/* =========================================================
   VARIABLES GLOBALES
   Aquí definimos colores, sombras y radios reutilizables.
   Esto hace más fácil mantener el diseño.
   ========================================================= */
:root{
  /* Colores del fondo general */
  --bg-a:#cedaea;
  --bg-b:#f6f6f6;

  /* Colores de texto */
  --text:#111827;
  --muted:#667085;

  /* Líneas y bordes suaves */
  --line:rgba(15,23,42,.12);
  --line-strong:rgba(15,23,42,.16);

  /* Sombras principales */
  --shadow-main:0 28px 70px rgba(0,0,0,.12);
  --shadow-soft:0 8px 18px rgba(0,0,0,.08);

  /* Radios de bordes */
  --radius-xl:34px;
  --radius-lg:26px;
  --radius-md:16px;
}

/* =========================================================
   RESET BÁSICO
   Quitamos márgenes y paddings por defecto del navegador
   y usamos box-sizing:border-box para controlar medidas.
   ========================================================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* Hace que html y body ocupen toda la altura de la ventana */
html,
body{
  height:100%;
}

/* =========================================================
   BODY
   Define tipografía general, color principal y fondo.
   El fondo tiene gradiente diagonal cruzado.
   ========================================================= */
body{
  font-family:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(
    135deg,
    #cedaea 0%,
    #f6f6f6 50%,
    #cedaea 100%
  );
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Las imágenes nunca se desbordan y se renderizan como bloque */
img{
  max-width:100%;
  display:block;
}

/* Botones e inputs heredan la tipografía del sitio */
button,
input{
  font:inherit;
}

/* =========================================================
   CONTENEDOR EXTERIOR
   Centra toda la tarjeta del login en la pantalla.
   ========================================================= */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
}

/* =========================================================
   TARJETA PRINCIPAL DEL LOGIN
   Contiene panel izquierdo y panel derecho.
   ========================================================= */
.login-card{
  width:min(1280px, 100%);
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  padding:22px;
  border-radius:var(--radius-xl);
  background:#ffffff;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-main);
}

/* =========================================================
   PANEL IZQUIERDO
   Zona visual de branding / presentación.
   ========================================================= */
.login-brand{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  padding:34px 34px 38px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  min-height:716px;
  background:
    radial-gradient(circle at 74% 82%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle at 42% 60%, rgba(114,171,255,.20), transparent 34%),
    radial-gradient(circle at 18% 18%, rgba(0,0,0,.38), transparent 36%),
    linear-gradient(160deg, #021021 0%, #0b3b91 44%, #7fa7d9 100%);
}

/* Texto superior: DIRIS LIMA SUR */
.brand-top{
  position:relative;
  z-index:2;
}

.brand-top strong{
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.97);
}

/* Bloque inferior con el módulo y el nombre del sistema */
.brand-content{
  position:relative;
  z-index:2;
  max-width:470px;
  margin-top:auto;
  padding-bottom:8px;
}

/* Texto pequeño superior del bloque inferior */
.brand-content h2{
  font-size:1.18rem;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.01em;
  color:rgba(255,255,255,.88);
  margin:0 0 10px;
}

/* Título principal del panel izquierdo */
.brand-content h1{
  font-size:clamp(2.4rem, 3.2vw, 3.45rem);
  line-height:1.03;
  font-weight:300;
  letter-spacing:-0.035em;
  color:#ffffff;
  margin:0;
}

/* =========================================================
   EFECTOS DECORATIVOS DE LUZ
   Son manchas difusas para dar profundidad al panel.
   ========================================================= */
.brand-glow{
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  filter:blur(14px);
}

.glow-1{
  width:220px;
  height:220px;
  right:-60px;
  top:-50px;
  background:rgba(37,99,235,.18);
}

.glow-2{
  width:280px;
  height:280px;
  left:-80px;
  bottom:-90px;
  background:rgba(255,255,255,.08);
}

.glow-3{
  width:260px;
  height:260px;
  right:40px;
  bottom:60px;
  background:rgba(255,255,255,.13);
}


.brand-subtitle {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  text-transform: uppercase;
}

/* =========================================================
   PANEL DERECHO
   Contiene logo, título, formulario y pie.
   ========================================================= */
.login-form-side{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 12px;
}

/* Caja interna del formulario */
.form-wrap{
  width:min(460px, 100%);
}

/* =========================================================
   LOGO DEL FORMULARIO
   Espacio del logo encima de "Iniciar Sesión".
   ========================================================= */
   .form-logo {
    margin-bottom: 20px;
    display: flex;        /* Añadido para centrar */
    justify-content: center; /* Centra la imagen */
  }

.form-logo img{
  width:90px;
  height:auto;
  border-radius:18px;
  box-shadow:
    0 3px 6px rgba(255,255,255,.25) inset,
    0 10px 10px rgba(0,0,0,.08),
    0 22px 28px rgba(0,0,0,.22);
}

/* =========================================================
   CABECERA DEL FORMULARIO
   ========================================================= */
   .form-head {
    margin-bottom: 26px;
    text-align: center;   /* Añadido para centrar el texto H2 */
  }

.form-head h2{
  font-size:clamp(2.1rem, 3vw, 2.9rem);
  line-height:1.04;
  font-weight:600;
  letter-spacing:-0.03em;
  color:#111111;
}

/* =========================================================
   MENSAJE DE ERROR
   Se muestra cuando el login falla.
   ========================================================= */
.alert-error{
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#991b1b;
  font-size:.95rem;
  font-weight:500;
}

/* =========================================================
   FORMULARIO
   ========================================================= */
.login-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Cada grupo = label + input */
.input-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Etiquetas de los campos */
.input-group label{
  font-size:1rem;
  font-weight:500;
  color:#2f3b4a;
  letter-spacing:-0.01em;
}

/* Inputs de usuario y contraseña */
.input-group input{
  width:100%;
  height:58px;
  padding:0 18px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  outline:none;
  font-weight:400;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Texto placeholder dentro de los inputs */
.input-group input::placeholder{
  color:#98a2b3;
  font-weight:400;
}

/* Estado focus del input */
.input-group input:focus{
  border-color:rgba(27,70,157,.42);
  box-shadow:0 0 0 4px rgba(27,70,157,.10);
}

/* =========================================================
   CAMPO CONTRASEÑA
   Tiene input + botón del ojo.
   ========================================================= */
.password-wrap{
  position:relative;
}

/* Dejamos espacio a la derecha para el botón del ojo */
.password-wrap input{
  padding-right:58px;
}

/* Botón ojo: estado normal */
.toggle-password{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:none;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  color:#667085;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #667085 !important; /* Forzamos el gris */
  opacity: 0.7;
  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

 

/* Simplificamos el estado activo para que no cambie a colores raros */
.toggle-password.active {
  background: rgba(0, 0, 0, 0.05);
  color: #374151 !important; /* Sigue siendo un gris oscuro */
  box-shadow: none; 
}

/* Ajuste para evitar colores de sistema en móviles */
.toggle-password:focus, 
.toggle-password:active {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* =========================================================
   BOTÓN PRINCIPAL DE INGRESO
   ========================================================= */
.btn-login{
  width:100%;
  height:58px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg, #1c45a1 0%, #14398c 100%);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  letter-spacing:-0.01em;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(20,57,140,.24);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-login:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(20,57,140,.28);
  filter:brightness(1.02);
}

.btn-login:active{
  transform:translateY(0);
}

/* =========================================================
   PIE DEL FORMULARIO
   ========================================================= */
.form-footer{
  margin-top:22px;
  text-align:center;
  font-size:.84rem;
  color:var(--muted);
}

/* =========================================================
   RESPONSIVE TABLET
   Cuando baja de 1100px, los paneles pasan a una columna.
   ========================================================= */
@media (max-width: 1100px){
  .login-card{
    grid-template-columns:1fr;
    min-height:auto;
    width:min(900px, 100%);
  }

  .login-brand{
    min-height:340px;
  }

  .form-wrap{
    width:min(520px, 100%);
  }
}

/* =========================================================
   RESPONSIVE MOBILE
   Ajustes de tamaños y espacios para celular.
   ========================================================= */
@media (max-width: 680px){
  .login-shell {
    padding: 10px;
    min-height: 100dvh; /* Usa dynamic viewport height para móviles */
    display: flex;
    align-items: center; 
  }

  .login-card {
    min-height: auto;
    height: auto;      /* Deja que el contenido defina la altura */
    max-height: 95vh;  /* Asegura que no sea más alto que la pantalla */
    overflow-y: auto;  /* Si el celular es muy pequeño, el scroll será interno a la card */
    padding: 15px;
    gap: 10px;
    display: flex;     /* Cambiamos de grid a flex para mejor control */
    flex-direction: column;
  }

  .login-brand {
    min-height: 120px; /* Reducido aún más */
    flex-shrink: 0;    /* Evita que se aplaste */
    padding: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .brand-top {
    margin-bottom: 5px;
  }

  .brand-subtitle {
    font-size: 0.65rem; /* Más pequeño en móvil para que no ocupe espacio */
  }


  .brand-content {
    margin-top: 0;      /* Quitamos el margin-top: auto */
    padding-bottom: 0;
  }

 .brand-content h1 {
    font-size: 1.5rem;
  }

  .form-wrap {
    width: 100%;
  }

  .form-logo {
    margin-bottom: 10px;
  }

  .form-head {
    margin-bottom: 15px;
  }

 .login-form-side {
    padding: 10px 0;
  }

  .input-group input,
  .btn-login{
    height:54px;
  }

}

/* =========================================================
   INDEX — utilidades y registro
   ========================================================= */
.alert-success-custom {
  background: #e9f8ef;
  color: #1b6b3a;
  border: 1px solid #bfe8cc;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.form-footer-login-link {
  margin-top: 12px;
}

.muted-link {
  color: var(--muted);
  text-decoration: none;
}

/* Registro de usuario */
.login-card.registro-card {
  min-height: 760px;
  grid-template-columns: minmax(170px, 0.25fr) minmax(0, 1.75fr);
}

.registro-card .login-brand {
  transform-origin: left center;
  animation: brandShrinkLeft 850ms cubic-bezier(.2,.8,.2,1) both;
}

.registro-card .login-form-side {
  justify-content: center;
  align-items: center;
  padding: 18px 8px;
}

.registro-card .form-wrap {
  width: min(940px, 100%);
  animation: formRevealBlur 900ms ease 180ms both;
}

.registro-card .login-form,
.registro-card .input-group,
.registro-card .input-group input,
.registro-card .input-group select {
  width: 100%;
  box-sizing: border-box;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.field-message {
  margin-top: 8px;
  font-size: 0.9rem;
}

.field-message.error { color: #b42318; }
.field-message.success { color: #1b6b3a; }
.field-message.info { color: #2458a6; }

.office-autocomplete {
  position: relative;
}

.office-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 230px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #c9d4e5;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.14);
  z-index: 30;
  display: none;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}

.office-suggestions.show {
  display: block;
}

.office-suggestion-item {
  padding: 10px 12px;
  font-size: 14px;
  color: #1d2a3b;
  cursor: pointer;
  line-height: 1.35;
}

.office-suggestion-item:hover,
.office-suggestion-item.active {
  background: #eef4ff;
}

.input-group .uniform-control {
  height: 58px;
  border: 1px solid #c9d4e5;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  color: #1d2a3b;
  outline: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: border-color .2s ease, box-shadow .2s ease;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.input-group .uniform-control:focus {
  border-color: #4f86ff;
  box-shadow: 0 0 0 3px rgba(79, 134, 255, 0.2);
}

.styled-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #5b6f8e 50%),
    linear-gradient(135deg, #5b6f8e 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.styled-select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

@keyframes brandShrinkLeft {
  from {
    transform: scaleX(1.06);
    filter: blur(1px);
    opacity: .72;
  }
  to {
    transform: scaleX(0.93);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes formRevealBlur {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .registro-card .login-brand,
  .registro-card .form-wrap {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .registro-card .login-brand {
    max-width: 100%;
    transform: none;
    animation: none;
  }
}

@media (max-width: 680px) {
  .form-grid,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}