/* ============================================================
   GECONOT · auth.css
   Pantallas de acceso (login / registro / 2FA). Dos estéticas:
     · Personal interno: split-screen con panel de marca (oscuro).
     · Cliente final: estilo app (gradiente + tarjeta).
   Reutiliza variables de base.css y campos de componentes.css.
   ============================================================ */

/* ============================================================
   PERSONAL INTERNO — split screen
   ============================================================ */
.pantalla-acceso {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* --- Lado de marca --- */
.acceso__marca {
  position: relative; overflow: hidden;
  background: var(--sidebar-fondo);
  color: #fff;
  padding: 56px 52px;
  display: flex; flex-direction: column;
}
.acceso__marca::after {
  content: ""; position: absolute; right: -120px; bottom: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--gradiente-primario); opacity: 0.35; filter: blur(8px);
}
.acceso__marca-logo {
  display: flex; align-items: center; gap: 13px; position: relative; z-index: 1;
}
.acceso__marca-logo-icono {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--gradiente-primario); display: grid; place-items: center;
  font-weight: 800; font-size: 1.3rem;
}
.acceso__marca-nombre { font-size: 1.35rem; font-weight: 800; }
.acceso__marca-nombre span { color: var(--color-primario); }
.acceso__marca-centro { margin-top: auto; margin-bottom: auto; position: relative; z-index: 1; }
.acceso__marca-titular { font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; max-width: 460px; }
.acceso__marca-texto { color: rgba(255, 255, 255, 0.7); margin-top: 16px; max-width: 420px; font-size: 1rem; }
.acceso__marca-lista { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.acceso__marca-lista li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; }
.acceso__marca-lista i { color: #fff; background: rgba(255, 255, 255, 0.14); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.acceso__marca-pie { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; }

/* --- Lado del formulario --- */
.acceso__form { display: flex; align-items: center; justify-content: center; padding: 40px 28px; background: var(--fondo-app); }
.acceso-tarjeta { width: 100%; max-width: 400px; }
.acceso-tarjeta__logo-movil { display: none; align-items: center; gap: 11px; margin-bottom: 26px; }
.acceso-tarjeta__logo-movil-icono {
  width: 42px; height: 42px; border-radius: 12px; background: var(--gradiente-primario);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem;
}
.acceso-tarjeta__logo-movil-nombre { font-size: 1.2rem; font-weight: 800; }
.acceso-tarjeta__logo-movil-nombre span { color: var(--color-primario); }

.acceso-tarjeta__eyebrow { color: var(--color-primario-texto); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.acceso-tarjeta__titulo { font-size: 1.7rem; font-weight: 800; margin-top: 6px; }
.acceso-tarjeta__sub { color: var(--texto-secundario); margin-top: 6px; margin-bottom: 26px; }

/* ============================================================
   CAMPOS DE ACCESO (comunes)
   ============================================================ */
/* .campo-clave y .ojo se movieron a componentes.css: los paneles no cargan
   auth.css y también necesitan el botón de ver contraseña (Mi cuenta).
   componentes.css lo carga todo el proyecto, así que la regla vive ahí una
   sola vez en vez de estar duplicada en dos archivos. */

.acceso-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 20px; }
.acceso-recordar { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--texto-secundario); cursor: pointer; }
.acceso-recordar input { width: 16px; height: 16px; accent-color: var(--color-primario); }
.acceso-enlace { color: var(--color-primario-texto); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.acceso-enlace:hover { text-decoration: underline; }

.boton-bloque { width: 100%; justify-content: center; padding: 13px; font-size: 0.95rem; }

.acceso-separador { text-align: center; color: var(--texto-secundario); font-size: 0.88rem; margin-top: 22px; }
.acceso-separador a { color: var(--color-primario-texto); font-weight: 700; }

.acceso-nota {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--color-primario-tenue); color: var(--color-primario-fuerte);
  border-radius: var(--radio-sm); padding: 11px 13px; font-size: 0.8rem; margin-top: 22px;
}
.acceso-nota i { margin-top: 1px; }

/* ============================================================
   2FA — entrada de código (OTP)
   ============================================================ */
.otp-grupo { display: flex; gap: 10px; justify-content: space-between; margin: 8px 0 22px; }
.otp-grupo input {
  width: 100%; aspect-ratio: 3 / 4; min-width: 0;
  text-align: center; font-size: 1.5rem; font-weight: 800;
  border: 1.5px solid var(--borde-suave); border-radius: 12px;
  font-family: inherit; background: #fff; color: var(--texto-principal);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.otp-grupo input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.30); }

.otp-reenviar { text-align: center; font-size: 0.85rem; color: var(--texto-secundario); margin-top: 4px; }
.otp-reenviar a { color: var(--color-primario); font-weight: 700; }

.acceso-volver { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-secundario); font-size: 0.85rem; font-weight: 600; margin-bottom: 22px; cursor: pointer; }
.acceso-volver:hover { color: var(--color-primario); }

/* QR simulado para alta de 2FA (solo demostración visual) */
.qr-demo {
  width: 160px; height: 160px; margin: 0 auto 18px; border-radius: 14px; border: 6px solid #1f2430;
  background: repeating-conic-gradient(#1f2430 0 25%, #fff 0 50%) 0 0 / 26px 26px;
}

/* ============================================================
   RESPONSIVE personal interno → oculta la marca, muestra logo móvil
   ============================================================ */
@media (max-width: 860px) {
  .pantalla-acceso { grid-template-columns: 1fr; }
  .acceso__marca { display: none; }
  .acceso-tarjeta__logo-movil { display: flex; }
  .acceso__form { padding: 32px 22px; align-items: flex-start; padding-top: 48px; }
}

/* ============================================================
   CLIENTE FINAL — estilo app
   ============================================================ */
.acceso-app {
  min-height: 100dvh;
  background: var(--gradiente-primario);
  display: flex; flex-direction: column; align-items: center;
}
.acceso-app__hero {
  color: #fff; text-align: center;
  padding: 46px 24px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.acceso-app__logo {
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px);
  display: grid; place-items: center; font-weight: 800; font-size: 1.7rem;
}
.acceso-app__nombre { font-size: 1.6rem; font-weight: 800; }
.acceso-app__tagline { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; }

.acceso-app__card {
  background: var(--fondo-contenedor);
  width: 100%; flex: 1;
  border-radius: 26px 26px 0 0;
  padding: 30px 22px calc(34px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(20, 24, 40, 0.16);
}
.acceso-app__titulo { font-size: 1.35rem; font-weight: 800; }
.acceso-app__sub { color: var(--texto-secundario); margin-top: 4px; margin-bottom: 22px; font-size: 0.9rem; }

/* En escritorio el cliente también centra su tarjeta (no a pantalla completa) */
@media (min-width: 620px) {
  .acceso-app { justify-content: center; padding: 30px; }
  .acceso-app__hero { padding-top: 0; }
  .acceso-app__card {
    flex: none; max-width: 440px; border-radius: 26px;
    box-shadow: var(--sombra-flotante);
  }
}

/* ============================================================
   FLUJO DE ACCESO DEL CIUDADANO (número verificado + PIN)
   Pantallas: crear cuenta · entrar · confirmar código · definir PIN.
   ============================================================ */

/* Indicador de pasos: dice cuántos quedan. En un alta por SMS, saber que son
   dos pasos y no cinco es la diferencia entre terminarla y abandonarla. */
.pasos { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.pasos__punto {
  flex: 1; height: 4px; border-radius: 3px; background: var(--borde-suave);
  transition: background var(--transicion);
}
.pasos__punto.activo { background: var(--color-primario); }
.pasos__texto {
  font-size: 0.74rem; font-weight: 700; color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}

/* Número al que se envió el código, destacado para que se vea el error de
   tecleo antes de esperar un SMS que no va a llegar. */
.destino-codigo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--fondo-app); border: 1px solid var(--borde-suave);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 18px;
  font-weight: 700; font-size: 0.95rem;
}
.destino-codigo__cambiar {
  margin-left: auto; font-size: 0.8rem; font-weight: 700;
  color: var(--color-primario-texto); cursor: pointer; background: none; border: none;
}
.destino-codigo__cambiar:hover { text-decoration: underline; }

/* Campo de PIN: mismas casillas que el código, pero ocultando el valor. */
.otp-grupo--secreto input { -webkit-text-security: disc; text-security: disc; }

/* Aviso de que no hay pasarela contratada: el código se ve en pantalla. Es
   inequívocamente un modo de pruebas, y tiene que parecerlo. */
.codigo-desarrollo {
  margin: -6px 0 16px; padding: 12px 14px; border-radius: 12px;
  background: #fff8e1; border: 1px dashed var(--color-primario-fuerte);
  font-size: 0.85rem; color: var(--color-primario-texto); text-align: center;
}
.codigo-desarrollo strong { font-size: 1.25rem; letter-spacing: 0.28em; display: block; margin-top: 4px; }

/* Campo con prefijo de país fijo: evita la duda de si hay que escribirlo. */
.campo-telefono { display: flex; align-items: stretch; gap: 0; }
.campo-telefono__prefijo {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--fondo-app); border: 1.5px solid var(--borde-suave); border-right: none;
  border-radius: var(--radio-sm) 0 0 var(--radio-sm);
  font-weight: 700; color: var(--texto-secundario); white-space: nowrap;
}
.campo-telefono .campo-texto {
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0; flex: 1; min-width: 0;
}

.acceso-ayuda { font-size: 0.82rem; color: var(--texto-tenue); line-height: 1.6; margin-top: 14px; }
.acceso-ayuda i { color: var(--color-primario-fuerte); }

/* ---------- VINCULAR NAVEGADOR CON QR ---------- */
.acceso-o-bien {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--texto-tenue); font-size: 0.8rem;
}
.acceso-o-bien::before, .acceso-o-bien::after {
  content: ""; flex: 1; height: 1px; background: var(--borde-suave);
}
.qr-caja {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 4px 0 18px;
}
.qr-caja__lienzo {
  padding: 14px; background: #fff; border: 1px solid var(--borde-suave);
  border-radius: 18px; box-shadow: var(--sombra-card); line-height: 0;
  min-width: 228px; min-height: 228px; display: grid; place-items: center;
}
.qr-caja__estado {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 600; color: var(--texto-secundario);
}
.qr-caja__estado .bi-check-circle-fill { color: var(--color-exito); }
.qr-caja__estado .bi-x-circle { color: var(--color-peligro); }
.qr-pasos {
  margin: 0 0 16px; padding-left: 20px;
  color: var(--texto-secundario); font-size: 0.85rem; line-height: 1.8;
}