/* =========================================================
   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);
}

/* =========================================================
   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;
}

.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;
}

.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;
  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* Hover: cuando el mouse pasa encima */
.toggle-password:hover{
  background:#f3f4f6;
  color:#111827;
}

/* Focus visible: útil para teclado/accesibilidad */
.toggle-password:focus-visible{
  outline:none;
  background:#eef2ff;
  box-shadow:0 0 0 4px rgba(27,70,157,.12);
  color:#1c45a1;
}

/* Estado ACTIVO:
   se aplica cuando el JS agrega la clase .active
   y significa que la contraseña se está mostrando */
.toggle-password.active{
  background:#f1f3f5; /* gris suave */
  color:#374151;     /* gris oscuro */
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.08),
    0 4px 10px rgba(0,0,0,.12);
}

/* Si está activo y además pasas el mouse, mantiene el estado */
.toggle-password.active:hover{
  background:#374151;
  color:#ffffff;
}

/* =========================================================
   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:16px;
  }

  .login-card{
    padding:14px;
    gap:16px;
    border-radius:24px;
    min-height:auto;
  }

  .login-brand{
    min-height:280px;
    padding:24px 22px 26px;
    border-radius:20px;
  }

  .brand-top strong{
    font-size:.95rem;
  }

  .brand-content h2{
    font-size:1rem;
    margin-bottom:8px;
  }

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

  .form-logo img{
    width:78px;
  }

  .form-head h2{
    font-size:2rem;
  }

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