/* ==========================================================================
   Portal Clientes — Login
   Hoja de estilos ordenada, accesible y documentada
   ========================================================================== */

/* ==============
   01) Variables
   ============== */
:root{
  /* Colores de marca y neutros */
  --brand:       #249696;      /* azul principal */
  --brand-600:   #1c3c5f;      /* hover botón */
  --page-top:    #f4f7fb;      /* fondo superior suave */
  --bg:          #f6f6f6;      /* fondo base */
  --text:        #333;
  --muted:       #666;
  --line:        #d9dee7;      /* bordes sutiles */
  --ring:        rgba(2,95,142,0.15);

  /* Card / elevación */
  --card-bg:     rgba(255,255,255,0.94);
  --card-line:   rgba(0,0,0,0.06);
  --shadow-s:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-l:    0 12px 32px rgba(0,0,0,0.10);
  --shadow-h:    0 26px 60px -12px rgba(0,0,0,0.16);

  /* Radii y tamaños */
  --radius-s: 100px;
  --radius-m: 1px;

  /* Tipografía (el HTML ya carga Rubik) */
  --font: Rubik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =======================
   02) Reseteo muy ligero
   ======================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
}

/* ==========================================
   03) Layout general + fondo con gradientes
   ========================================== */
.login-container{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;

  /* Viñeta radial para separar el card del fondo */
  background:
    radial-gradient(1100px 520px at 50% 12%, rgba(2,95,142,0.08), transparent 60%),
    linear-gradient(180deg, var(--page-top), #fff);
}

/* ============================
   04) Tarjeta (glass + elevación)
   ============================ */
.login-card{
  position: relative;                  /* para el halo ::before */
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
  text-align: center;

  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-m);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-s), var(--shadow-l);

  transition: box-shadow 180ms ease, transform 180ms ease;
}

/* Halo ambiental muy difuso alrededor del card */
.login-card::before{
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(420px 220px at 50% -10%, rgba(2,95,142,0.10), transparent 60%);
  filter: blur(8px);
  z-index: -1;
}

/* Elevación al interactuar dentro del card */
.login-card:hover,
.login-card:focus-within{
  box-shadow:
    0 6px 16px rgba(0,0,0,0.10),
    var(--shadow-h),
    0 0 0 6px rgba(2,95,142,0.07);
  transform: translateY(-1px);
}

/* --- Logo del login --- */
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.login-logo img {
  height: 48px;            /* tamaño visual cómodo */
  max-width: 120px;        /* evita logos muy horizontales que se salgan */
  object-fit: contain;     /* no se deforma */
}


/* ===========================
   05) Encabezados / textos
   =========================== */
h1{
  margin: 0 0 10px 0;
  color: var(--brand-600);
  font-weight: 600;
  letter-spacing: -0.2px;
}

#step-title{
  margin: 4px 0 16px 0;
  color: var(--muted);
}

/* ===========================
   06) Formularios e inputs
   =========================== */
form{ margin: 18px 0; }

input{
  width: 100%;
  padding: 12px 12px;
  margin-bottom: 12px;
  font-size: 14px;

  background: #fff;
  color: var(--text);
  border: 1px solid #cfcfcf;
  border-radius: var(--radius-s);

  outline: none;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}
input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

/* ===========================
   07) Botones
   =========================== */
button{
  width: 100%;
  min-height: 44px;                 /* tamaño accesible */
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-m);

  background: var(--brand);
  color: #fff;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  outline: none;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    opacity 120ms ease;
}

/* Hover/active sólo si NO está deshabilitado */
button:not(:disabled):hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(2,95,142,.28);
  background: var(--brand-600);
}
button:not(:disabled):active{
  transform: translateY(0);
  box-shadow: none;
}

/* Foco visible (teclado) */
button:focus-visible{
  box-shadow:
    0 0 0 4px rgba(2,95,142,.18),
    0 8px 18px rgba(2,95,142,.24);
}

/* Estado deshabilitado */
button:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===========================
   08) Botones de elección (paso 0)
   =========================== */
#login-choice{
  display: grid;
  gap: 14px;
}

/* heredan de button (estética primaria) */
.choice-btn{
  /* nada extra: se muestra como botón primario */
}

/* Variante secundaria para la opción alternativa */
.choice-btn.alt{
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--line);
}
.choice-btn.alt:not(:disabled):hover{
  background: #f7fbff;
  box-shadow: none;
  transform: translateY(0);
  border-color: var(--brand);
}

/* ===========================
   09) Enlaces de apoyo (volver/olvide)
   =========================== */
a{
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}
a:hover{ text-decoration: underline; }

/* ===========================
   10) Mensajes de estado
   =========================== */
.status{
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

/* =======================================
   11) Movilidad / accesibilidad adicional
   ======================================= */
@media (prefers-reduced-motion: reduce){
  button, .login-card{
    transition: none !important;
  }
}