/* =========================================================
   INDEX – Login / Acceso (match producción)
   ========================================================= */

body{
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}

/* Layout interno del hero de login */
.hero-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
  margin-top: 40px;   /* CLAVE */
  padding-bottom: 80px;
}

@media (max-width: 900px){
  .hero-content{
    grid-template-columns: 1fr;
    padding-top: 32px;
  }
}

/* ---------- LOGIN ---------- */

.login-card{
  padding: 36px;
}

.login-title{
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: #1b2863;
}

.login-sub{
  margin: 10px 0 28px;
  font-size: 16px;
  color: #5f6f8a;
}

/* inputs */
input,
select{
  background: #fff;
}

/* botón principal + botones del flujo (base) */
#ident-cta,
#btn-send-token,
#btn-validate,
#btn-continue{
  width: auto;
  height: 54px;
  font-size: 16px;
  border-radius: 999px;
}

/* ---------- BENEFICIOS ---------- */

.benefits{
  padding: 36px;
}

.benefits h3{
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 800;
  color: #1b2863;
}

/* mini cards “Todo en un solo lugar” */
.perk{
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e6e9f2;
  background: linear-gradient(180deg,#ffffff,#f9fbff);
  margin-bottom: 10px;
}

.perk:last-child{
  margin-bottom: 0;
}

.perk svg{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #00a7cf; /* mismo celeste que en prod */
}

/* ---------- Inputs del login ---------- */

#index-page input,
#index-page select{
  height: 52px;
  border-radius: 16px;
  border: 1px solid #d7e1f3;
  padding: 0 16px;
  font-size: 16px;
}

#index-page input:focus,
#index-page select:focus{
  border-color: #00a7cf;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,167,207,.15);
}

#index-page #ident-cta{
  width: 260px;
  margin: 16px auto 0;
  display: block;
  height: 54px;
  border-radius: 999px;
  font-size: 16px;
}

/* =========================================================
   Flujo de login: steps (identificación → método → teléfonos → token)
   ========================================================= */

/* Contenedor de pasos del flujo */
.flow{
  display: flex;
  flex-direction: column;
}

/* Cada paso (identificación, método, teléfonos, token) */
.step{
  border: 1px solid #e6e9f2;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height .45s ease,
    opacity .30s ease,
    transform .45s ease;
}

/* Paso visible / expandido: el JS agrega .open */
.step.open{
  max-height: 900px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.step .row{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* separación entre pasos */
.flow .step + .step{
  margin-top: 18px;
}

/* margen de la lista de radios, heredada del style */
#index-page .radio-list{
  margin: 12px 0 16px;
}

/* idem (evita que algún otro CSS lo pise) */
#index-page .radio-list{
  margin: 12px 0 16px;
}

/* ajuste leve del logo en header */
.site-header .logo img{
  margin-bottom: 4px;
}

/* ===== Versión refinada de steps (más precisa) ===== */

/* Contenedor de pasos */
#index-page .flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Paso oculto por defecto */
#index-page .flow .step {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  margin-top: 0;
  transition:
    max-height 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease,
    margin-top 0.25s ease;
}

/* Paso visible (el JS le agrega .open) */
#index-page .flow .step.open {
  max-height: 900px;        /* suficiente para el contenido */
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
}

/* El primer step abierto no agrega margen arriba */
#index-page .flow .step:first-child.open {
  margin-top: 0;
}

/* En la pantalla de login no mostramos el splash/busy */
#index-page #boot-splash,
#index-page #page-busy {
  display: none !important;
}

/* =========================================================
   LOGIN – Botones y flujo de token
   ========================================================= */

/* Tamaños estándar de botones tipo “pastilla” */
:root{
  --btn-minw: 190px;
  --btn-h: 52px;
  --brand-dark: #252265;      /* azul oscuro */
  --brand-dark-300: #5f659b;  /* azul más claro para el seleccionado */
}

/* En el index todos los botones del flujo van en MAYÚSCULA */
#index-page .btn,
#index-page .btn-choice{
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* -------- Radios de teléfonos / emails -------- */

#index-page .radio-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

#index-page .radio-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e6e9f2;
  border-radius: 14px;
  background: #ffffff;
}

/* Hover en radios */
#index-page .radio-item:hover{
  border-color: #cfe4ff;
  background: #f9fbff;
}

#index-page .radio-item:focus-within{
  outline: 2px solid #00a7cf;
  outline-offset: 2px;
}

#index-page .radio-item input{
  accent-color: #00a7cf;
}

/* -------- Botones de token -------- */

#token-actions{
  margin-top: 16px;
  gap: 14px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Enviar token (en el step de teléfonos) */
#btn-send-token{
  min-width: var(--btn-minw);
  height: var(--btn-h);
  padding: 0 20px;
  border-radius: 26px;
  background: #00a7cf;
  color: #fff;
  border: 0;
}

/* ENVIAR TOKEN – hover */
#btn-send-token:not(:disabled):hover{
  background: #009bc4;
}

/* ENVIAR TOKEN – disabled */
#btn-send-token:disabled{
  background: #d6dbea;
  color: #ffffff;
}

/* Validar / Continuar (step de token) */
#btn-validate,
#btn-continue{
  min-width: var(--btn-minw);
  height: var(--btn-h);
  padding: 0 20px;
  border-radius: 26px;
}

/* VALIDAR TOKEN → azul */
#btn-validate{
  background: #00a7cf;
  color: #ffffff;
  border: 0;
}

/* CONTINUAR → verde */
#btn-continue{
  background: #b7d34a;
  color: #1b2863;
  border: 0;
}

/* Hint debajo del panel de token (“¿Tus datos no están actualizados…?”) */
.token-help{
  margin-top: 10px;
  text-align: center;
  font-size: .95rem;
  color: #6a768f;
}

.token-help .link-help{
  border: 0;
  background: none;
  padding: 0;
  margin-left: 6px;
  color: #0b64d8;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   LOGIN – Selección método de envío (PRODUCCIÓN)
   ========================================================= */

#method-choice{
  margin-top: 16px;
}

/* Texto explicativo */
#method-choice > p,
#method-choice > .muted{
  background: #f1f8ff;
  border: 1px solid #cfe4ff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  color: #0f2e5f;
  font-size: 15px;
}

/* Botones TELÉFONO / EMAIL */
#method-choice .btn-choice{
  width: 180px;        /* MÁS CHICO */
  height: 46px;        /* MÁS BAJO */
  margin: 0 8px;
  border-radius: 23px; /* coherente con la altura */
  border: 0;
  background: #252265;
  color: #fff;
  font-weight: 800;
  font-size: 14px;     /* texto más chico */
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .2s ease, box-shadow .2s ease;
}

/* Hover */
#method-choice .btn-choice:hover{
  background: #3a3f86;
}

/* Activo (el JS usa aria-pressed) */
#method-choice .btn-choice[aria-pressed="true"]{
  background: #5f659b;        /* gris azulado como prod */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* Disabled visual (cuando el JS lo deshabilita) */
#method-choice .btn-choice:disabled{
  background: #c8cbe6;
  color: #ffffff;
  cursor: default;
}

/* Contenedor visual: botones siempre en línea */
#method-choice{
  text-align: center;
  background: #ffffff;
  border: 1px solid #e6e9f2;
  border-radius: 14px;
  padding: 16px;
}

/* Mobile chico recién apila */
@media (max-width: 420px){
  #method-choice .btn-choice{
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 10px auto 0;
  }
}

/* Todos los botones del flujo usan el mismo tamaño */
#index-page #btn-send-token,
#index-page #btn-validate,
#index-page #btn-continue{
  width: 180px;
  height: 46px;
  border-radius: 23px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Sección ayuda debajo del envío de token */
.token-help{
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #6a768f;
}

/* Links */
.token-help .link-help{
  background: none;
  border: 0;
  padding: 0;
  margin: 0 6px;
  color: #0b64d8;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Hover */
.token-help .link-help:hover{
  color: #084fb0;
}

/* ==============================
   Estados disabled (flujo)
   ============================== */

#index-page button:disabled,
#index-page .btn.is-disabled{
  background: #d6dbea !important;
  color: #ffffff !important;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;              /* prod NO usa opacity baja */
}

/* Hint líneas finas */
.token-help{
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}

/* ==== Botones más chicos y en 2 columnas (≤640px) ==== */
@media (max-width: 640px){

  /* 1) Tamaño base un poquito menor en mobile */
  :root{
    --btn-minw: 140px;   /* antes 190px */
    --btn-h: 40px;       /* antes 52px / 46px */
  }

  /* 2) Método de envío (TELÉFONO / EMAIL) → dos columnas */
  /* cubro varios posibles contenedores por si tu HTML los cambia desde JS */
  #method-choice .choices,
  #method-choice .row,
  #step-contact .row,
  #step-dest .row,
  .method-choices{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    justify-items: stretch !important;
  }

  /* los botones de elección ocupan su celda (100%) y son un toque más bajos */
  #method-choice .btn-choice{
    width: 100% !important;
    min-width: auto !important;
    height: var(--btn-h) !important;
    padding: 0 12px !important;   /* antes 14px */
    border-radius: 24px !important;
  }

  /* 3) Panel de token → ENVIAR / VALIDAR / CONTINUAR */
  #token-actions{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  #token-actions .btn{
    min-width: var(--btn-minw) !important;
    height: var(--btn-h) !important;
    padding: 0 14px !important;   /* antes 20px */
    border-radius: 24px !important;
    width: auto !important;     /* evita 100% */
  }
}

/* Contenedor del flujo de login */
#index-page .flow{
  display:flex;
  flex-direction:column;
}

/* Paso por defecto: completamente colapsado, sin borde ni padding */
#index-page .flow .step{
  border:0;
  background:transparent;
  border-radius:14px;
  padding:0;
  margin-top:0;
  max-height:0;
  opacity:0;
  transform:translateY(-4px);
  overflow:hidden;
  pointer-events:none;
  transition:
    max-height .45s ease,
    opacity .30s ease,
    transform .45s ease,
    margin-top .45s ease,
    padding .45s ease,
    border-width .45s ease;
}

/* Paso visible / expandido (JS agrega .open) */
#index-page .flow .step.open{
  border:1px solid #e6e9f2;
  background:#fff;
  border-radius:14px;
  padding:16px;            /* mismo “card” que en producción */
  margin-top:18px;         /* separación entre steps */
  max-height:900px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* El primer step abierto no agrega margen arriba */
#index-page .flow .step.open:first-child{
  margin-top:0;
}

/* Unificar tamaño de texto de TODOS los botones del flujo */
#index-page #ident-cta,
#index-page #btn-send-token,
#index-page #btn-validate,
#index-page #btn-continue{
  font-size: 14px !important;
  font-weight: 800;
}

/* ===============================
   FIX RADIO BUTTON (NO ESTIRADO)
   =============================== */

#index-page input[type="radio"]{
  width: auto !important;
  height: auto !important;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  padding: 0 !important;
  transform: scale(1.1);   /* opcional: tamaño prolijo sin deformar */
}