/* ==========================================================================
   EQWeb / FACTUEXPRESS — Rediseño PANTALLA 01 — LOGIN (v3)
   RECONSTRUCCIÓN DE ARQUITECTURA -- master artboard 16:9, no columnas flex.

   .eq-login-viewport (fixed, 100vw/100vh, overflow:hidden)
     .eq-login-artboard (relative, min(100vw,100vh*16/9) x min(100vh,100vw*9/16))
       .eq-login-left-artboard (absolute 0/0/54%/100%, TODO position:absolute)
       .eq-login-panel / tarjeta (absolute 60.5%/5%/35.5%/90%, sin scroll)

   Todo scopeado bajo .eq-login-page. 0 cambio de autenticación.
   ========================================================================== */

@font-face {
  font-family: "Kalam";
  src: url("/public/fonts/redesign/login/Kalam-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Patrick Hand";
  src: url("/public/fonts/redesign/login/PatrickHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/public/fonts/redesign/login/NunitoSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.eq-login-page {
  /* CORREGIDO (2026-08-20, REDISEÑO #01 -- adopción del Design System
     Master): estos tokens tenían drift respecto a home.css/cajaapertura/
     cajacierre_nuevo (--ink #153C46 vs #153C66, --paper #F6F1E7 vs
     #F7F1E7, --muted #6F7A86 vs #667A89, --border-soft color sólido
     #A7B4BB vs rgba(21,60,102,.16)). Ahora apuntan a los tokens
     canónicos de design-system.css (--cp-*), con el valor viejo como
     fallback por si algún día se carga login.css sin design-system.css.
     0 cambio de comportamiento -- solo unifica el color real usado. */
  --ink: var(--cp-ink, #153C66);
  --teal: var(--cp-teal, #0B7A82);
  --teal-light: var(--cp-teal-light, #39B8C8);
  --teal-dark: var(--cp-teal-dark, #0A6970);
  --orange: var(--cp-orange, #E99A2E);
  --paper: var(--cp-paper, #F7F1E7);
  --card: var(--cp-card, #FCFAF5);
  --field: #FFFFFF;
  --muted: var(--cp-muted, #667A89);
  --border-soft: var(--cp-border-soft, rgba(21, 60, 102, .16));
  --success: var(--cp-success, #3C8D70);
  --error: var(--cp-danger, #D65C50);

  --cp-font-hand: 'Patrick Hand', 'Segoe Print', cursive;
  --cp-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  font-synthesis: none;
}

.eq-login-page,
.eq-login-page *,
.eq-login-page *::before,
.eq-login-page *::after {
  box-sizing: border-box;
}

html, body.eq-login-page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body.eq-login-page {
  background: var(--paper);
  font-family: var(--cp-font-body);
  color: var(--ink);
  position: relative;
}

/* -------------------------------------------------------------------- */
/* Viewport + master artboard 16:9                                        */
/* -------------------------------------------------------------------- */
.eq-login-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* textura de papel muy sutil, sobre el viewport completo */
.eq-login-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image:
    repeating-linear-gradient(0deg, rgba(21,60,70,.6) 0px, transparent 1px, transparent 2px, rgba(21,60,70,.6) 3px),
    repeating-linear-gradient(90deg, rgba(21,60,70,.6) 0px, transparent 1px, transparent 2px, rgba(21,60,70,.6) 3px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

.eq-login-artboard {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: visible;
  /* Reveal tipo "cortina" -- se abre desde el centro del logo grande
     (27%, 47% del artboard) en vez de un fade plano uniforme. */
  clip-path: circle(0% at 27% 47%);
  animation: eqArtboardReveal 950ms cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes eqArtboardReveal {
  to { clip-path: circle(150% at 27% 47%); }
}

@keyframes eqArtboardFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -------------------------------------------------------------------- */
/* Bloque izquierdo — ARTBOARD propio, todo position:absolute            */
/* -------------------------------------------------------------------- */
.eq-login-left-artboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 54%;
  height: 100%;
}

.eq-login-left-artboard img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Capa 0: manchas de fondo (esquinas), detrás de todo */
.eq-login-decor-tl {
  left: -3%;
  top: 0%;
  width: 26%;
  height: auto;
  z-index: 0;
  opacity: 0;
  animation: eqDecorFadeIn 900ms ease-out 300ms forwards;
}

.eq-login-decor-bl {
  left: -4%;
  bottom: -6%;
  top: auto;
  width: 32%;
  height: auto;
  z-index: 0;
  opacity: 0;
  animation: eqDecorFadeIn 900ms ease-out 300ms forwards;
}

@keyframes eqDecorFadeIn {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0); }
}

/* Capa 1: mancha vertical divisoria -- transición hacia la tarjeta */
.eq-login-divider {
  left: 70%;
  top: 16%;
  width: 16%;
  height: 65%;
  z-index: 1;
  opacity: 0;
  animation: eqDividerIn 1000ms ease-out 250ms forwards, eqDividerBreathe 9s ease-in-out 1400ms infinite;
  pointer-events: none;
}

@keyframes eqDividerIn {
  from { opacity: 0; }
  to   { opacity: .9; }
}

@keyframes eqDividerBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* -------------------------------------------------------------------- */
/* CORRECCIÓN #4: composición izquierda = UN SOLO asset ya compuesto     */
/* (aro + isotipo + "COMERCIAL PARRA" + salpicaduras, todo fusionado en   */
/* el PNG aprobado). Ya NO se arma con piezas independientes -- se       */
/* coloca completo, sin recortar, sin deformar, sin elementos encima.    */
/* -------------------------------------------------------------------- */
.eq-login-composed {
  left: 50%;
  top: 47%;
  width: clamp(520px, 37vw, 700px);
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%) scale(.94);
  transform-origin: center;
  z-index: 2;
  opacity: 0;
  overflow: visible;
  animation: eqComposedIn 850ms cubic-bezier(.22,1,.36,1) 180ms forwards,
             eqComposedBreathe 8s ease-in-out 1200ms infinite;
  pointer-events: none;
}

@keyframes eqComposedIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(14px) scale(.94); }
  60%  { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1.015); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}

/* Microrespiración muy sutil -- si generara pérdida de nitidez se anula
   fácilmente quitando esta regla; no usa blur, solo scale. */
@keyframes eqComposedBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.008); }
}

/* "Bienvenido" -- asset separado, muy cerca debajo de la composición */
.eq-login-bienvenido {
  left: 50%;
  top: 76%;
  width: clamp(220px, 18vw, 320px);
  height: auto;
  z-index: 8;
  opacity: 0;
  transform: translateX(-50%);
  clip-path: inset(0 100% 0 0);
  animation: eqBienvenidoReveal 700ms cubic-bezier(.65,0,.35,1) 620ms forwards;
}

@keyframes eqBienvenidoReveal {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  1%   { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0% 0 0); transform: translateX(-50%); }
}

/* -------------------------------------------------------------------- */
/* Tarjeta — posición absoluta dentro del artboard, SIN scroll            */
/* -------------------------------------------------------------------- */
.eq-login-panel {
  position: absolute;
  left: 60.5%;
  top: 5%;
  width: 35.5%;
  /* CORRECCIÓN #5: la fila grid "1fr" + overflow:hidden se comía el
     botón cuando el contenido real (con las imágenes YA recortadas a su
     bbox visible) no coincidía exactamente con el hueco calculado.
     Cambiado a alto natural + tope de seguridad -- nunca corta contenido
     invisible: si algo no cupiera, se vería (overflow:visible), nunca
     desaparecería. */
  height: auto;
  max-height: 90%;
  box-sizing: border-box;
  overflow: visible;
  background: var(--card);
  border: 1.5px solid rgba(21, 60, 70, .55);
  border-radius: 30px;
  box-shadow: 0 22px 50px rgba(45, 38, 28, .09);
  padding: clamp(22px, 3.5vh, 30px) clamp(36px, 3.4vw, 48px) clamp(16px, 2.4vh, 24px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  animation: eqPanelIn 800ms cubic-bezier(.22,1,.36,1) 320ms forwards;
}

.eq-login-panel::before {
  content: "";
  position: absolute;
  inset: 5px -4px -3px 4px;
  border: 1px solid rgba(21, 60, 70, .20);
  border-radius: 33px 27px 35px 29px;
  transform: rotate(-.12deg);
  pointer-events: none;
}

@keyframes eqPanelIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* -------------------------------------------------------------------- */
/* Stagger del contenido de la tarjeta -- cada pieza se asienta por su   */
/* cuenta en vez de aparecer toda junto con el panel. */
/* -------------------------------------------------------------------- */
@keyframes eqFieldIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.eq-login-brand-block,
.eq-login-card-title,
.eq-login-subtext,
.eq-login-form-group,
.eq-login-row,
.eq-login-copyright {
  opacity: 0;
  animation: eqFieldIn 500ms cubic-bezier(.22,1,.36,1) forwards;
}

.eq-login-brand-block                { animation-delay: 420ms; }
.eq-login-card-title                 { animation-delay: 480ms; }
.eq-login-subtext                    { animation-delay: 540ms; }
.eq-login-form-group:nth-of-type(1)  { animation-delay: 600ms; }
.eq-login-form-group:nth-of-type(2)  { animation-delay: 660ms; }
.eq-login-row                        { animation-delay: 720ms; }
.eq-login-copyright                  { animation-delay: 840ms; }

/* El botón ya tiene sus propios transform en hover/active -- la entrada
   usa SOLO opacity para no pelear con esos estados. */
.eq-login-btn {
  opacity: 0;
  animation: eqBtnFieldIn 400ms ease-out forwards;
  animation-delay: 780ms;
}

@keyframes eqBtnFieldIn {
  to { opacity: 1; }
}

/* Fila 1: logo del card, completo, con aire real -- nunca recortado */
.eq-login-brand-block {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.eq-login-card-logo {
  width: clamp(140px, 10.5vw, 165px);
  height: auto;
  display: block;
  object-fit: contain;
  animation: eqCardLogoBreathe 8s ease-in-out 2200ms infinite;
}

/* Respiración muy sutil -- conecta visualmente con la del logo grande
   de la izquierda, pero con mucha menos amplitud (elemento funcional,
   no protagonista). */
@keyframes eqCardLogoBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* Fila 2: título -- CORRECCIÓN #5: el PNG "Iniciar sesión" tiene ~61%
   de su lienzo transparente (medido por canal alpha: el texto real solo
   ocupa y[38.5%-61.7%]). Sin recortar esa porción invisible, el <img>
   con height:auto reservaba una caja enorme y vacía -- esa era la causa
   real de "logo -> hueco gigante -> título -> hueco gigante". Se usa la
   misma técnica de ventana recortada que ya se usó para el wordmark. */
.eq-login-card-title {
  text-align: center;
  margin: 8px auto 0;
  width: clamp(220px, 16vw, 290px);
  aspect-ratio: 1 / 0.232;
  overflow: hidden;
  position: relative;
}

.eq-login-card-title img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-38.5%);
}

/* Fila 3 (1fr): contenido funcional, flujo normal, se adapta al alto
   disponible -- SIN position:absolute para los campos. */
.eq-login-form-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.eq-login-subtext {
  text-align: center;
  font-family: var(--cp-font-body);
  font-weight: 500;
  font-size: clamp(16px, 1vw, 18px);
  color: var(--muted);
  margin: 12px 0 24px;
}

.eq-login-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* -------------------------------------------------------------------- */
/* Formulario                                                             */
/* -------------------------------------------------------------------- */
.eq-login-form-group {
  margin-bottom: 18px;
  width: 100%;
}

.eq-login-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cp-font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 7px;
}

.eq-login-label .eq-login-icon {
  width: 20px;
  font-size: 17px;
  flex: 0 0 20px;
  color: var(--teal);
  text-align: center;
}

/* Iconos reales (assets aprobados: user-icon.png, key-badge.png) --
   mismo tamaño visual que los Font Awesome que reemplazan (~17-18px),
   nunca gigantes. */
/* Iconos reales recortados a su contenido visible (ya no tienen el
   relleno transparente del PNG original -- ver icon-usuario.png /
   icon-password.png), por eso ahora se ven nítidos más grandes.
   height:auto preserva su proporción real (no son cuadrados). */
.eq-login-icon-img {
  width: 26px;
  height: auto;
  flex: 0 0 26px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.eq-login-label .eq-login-icon-img {
  width: 28px;
  flex: 0 0 28px;
}

.eq-login-input-wrap {
  position: relative;
  width: 100%;
}

.eq-login-input {
  width: 100%;
  height: 64px;
  background: var(--field);
  color: var(--ink);
  border: 1.5px solid var(--border-soft);
  border-radius: 16px;
  padding: 0 20px 0 54px;
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 17px;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.eq-login-input::placeholder {
  color: #8B96A1;
  font-weight: 500;
}

.eq-login-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(11, 122, 130, .10);
  transform: translateY(-1px);
}

.eq-login-input--pass {
  padding-right: 54px;
}

.eq-login-input-icon-left {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal);
  font-size: 17px;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1);
}

/* Focus: el icono del campo hace un pulso sutil de escala */
.eq-login-input-wrap:has(.eq-login-input:focus) .eq-login-input-icon-left {
  transform: translateY(-50%) scale(1.14);
}

.eq-login-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  transition: color 150ms ease, background 150ms ease;
}

/* Guiño al hacer click -- se anima el icono interno, no el botón (que
   ya tiene su propio transform de centrado estático). */
.eq-login-eye i {
  display: inline-block;
}

.eq-login-eye.is-blinking i {
  animation: eqEyeBlink 220ms ease;
}

@keyframes eqEyeBlink {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.15); }
}

.eq-login-eye:hover {
  color: var(--teal-dark);
  background: rgba(11, 122, 130, .08);
}

.eq-login-page input[type="password"]::-ms-reveal,
.eq-login-page input[type="password"]::-ms-clear {
  display: none;
}

/* -------------------------------------------------------------------- */
/* Recordar sesión + olvidaste contraseña                                 */
/* -------------------------------------------------------------------- */
.eq-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 16px;
}

.eq-login-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--cp-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  user-select: none;
}

.eq-login-remember input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

.eq-login-checkmark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1.5px solid var(--border-soft);
  border-radius: 5px;
  background: var(--field);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
}

.eq-login-remember input[type="checkbox"]:checked + .eq-login-checkmark {
  background: var(--teal);
  border-color: var(--teal);
}

.eq-login-checkmark svg {
  width: 12px;
  height: 12px;
  overflow: visible;
}

/* El check se "dibuja" con stroke-dashoffset en vez de solo aparecer */
.eq-login-check-path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset 220ms cubic-bezier(.65,0,.35,1);
}

.eq-login-remember input[type="checkbox"]:checked + .eq-login-checkmark .eq-login-check-path {
  stroke-dashoffset: 0;
}

.eq-login-remember input[type="checkbox"]:focus-visible + .eq-login-checkmark {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* CORRECCIÓN #5: "¿Olvidaste tu contraseña?" tiene ~88% de su lienzo
   transparente (contenido real solo en y[44.3%-56.6%]). Misma técnica de
   ventana recortada -- sin esto el link "flotaba" con aire enorme
   arriba/abajo, empujando todo lo de abajo (fila, botón, copyright). */
.eq-login-forgot {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: clamp(160px, 12vw, 200px);
  max-width: 100%;
  aspect-ratio: 1 / 0.123;
  overflow: hidden;
  flex: 0 0 auto;
}

.eq-login-forgot img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-44.3%);
  transition: filter 150ms ease;
}

.eq-login-forgot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: var(--teal);
  opacity: 0;
  transform: rotate(-.6deg) scaleX(0);
  transform-origin: left;
  transition: opacity 200ms ease, transform 250ms ease;
}

.eq-login-forgot:hover::after,
.eq-login-forgot:focus-visible::after {
  opacity: .6;
  transform: rotate(-.6deg) scaleX(1);
}

.eq-login-forgot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------- */
/* Botón Iniciar sesión                                                  */
/* -------------------------------------------------------------------- */
.eq-login-btn {
  position: relative;
  width: 100%;
  height: 64px;
  flex-shrink: 0;
  margin-top: 22px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--teal-light), var(--teal) 60%);
  border: 1.5px solid var(--teal-dark);
  border-radius: 16px;
  color: #FFFFFF;
  font-family: var(--cp-font-hand);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: .3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  transition: background 180ms ease, transform 170ms ease, box-shadow 170ms ease;
}

.eq-login-btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
  transition: left 500ms ease;
  pointer-events: none;
}

/* Ripple de acuarela al click -- forma irregular (no un círculo Material
   genérico), generado por login-ambient.js en el punto real de click. */
.eq-login-ripple {
  position: absolute;
  border-radius: 45% 55% 60% 40% / 55% 35% 65% 45%;
  background: rgba(255, 255, 255, .32);
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  animation: eqRippleOut 550ms ease-out forwards;
}

@keyframes eqRippleOut {
  to { transform: scale(1); opacity: 0; }
}

.eq-login-btn:hover {
  background:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--teal), var(--teal-dark) 65%);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(10, 105, 112, .22);
}

.eq-login-btn:hover::after {
  left: 130%;
}

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

.eq-login-btn:disabled {
  opacity: .8;
  cursor: not-allowed;
  transform: none;
}

.eq-login-btn-icon-slot {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.eq-login-btn-icon-slot .eq-login-icon {
  font-size: 20px;
  line-height: 1;
}

.eq-login-btn .eq-login-spinner {
  display: none;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: eqLoginSpin 800ms linear infinite;
}

.eq-login-btn.is-loading .eq-login-spinner {
  display: inline-block;
}

.eq-login-btn.is-loading .eq-login-btn-icon-slot .eq-login-icon,
.eq-login-btn.is-loading .eq-login-btn-label-default {
  display: none;
}

.eq-login-btn .eq-login-btn-label-loading {
  display: none;
}

.eq-login-btn.is-loading .eq-login-btn-label-loading {
  display: inline;
}

.eq-login-btn.is-success {
  background: linear-gradient(135deg, var(--success), #2E6E56);
  border-color: #2E6E56;
}

@keyframes eqLoginSpin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------- */
/* Mensaje de error                                                        */
/* -------------------------------------------------------------------- */
.eq-login-error {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(214, 92, 80, .08);
  border: 1.5px solid var(--error);
  color: #A63C33;
  padding: 10px 14px;
  border-radius: 13px;
  font-family: var(--cp-font-body);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}

.eq-login-error.is-visible {
  display: flex;
}

.eq-login-error-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  overflow: visible;
  /* CORREGIDO (cierre Pantalla #001): ahora es <img> del asset canonico
     error-icon.png (500x333, no cuadrado como el SVG anterior) --
     object-fit:contain evita que se deforme dentro de la caja 18x18. */
  object-fit: contain;
}

/* Reglas de abajo (dibujo del SVG anterior) quedan INERTES -- 0 elemento
   en el DOM las usa ya (ver comentario en auth_modern.php). Se preservan
   sin borrar por si se quiere revertir el swap del icono de error. */
/* El icono de alerta se "dibuja" (círculo + barra + punto) cuando el
   error se hace visible, en vez de aparecer de golpe. */
.eq-login-error-circle {
  stroke-dasharray: 52;
  stroke-dashoffset: 52;
}

.eq-login-error-mark {
  stroke-dasharray: 6;
  stroke-dashoffset: 6;
}

.eq-login-error-dot {
  opacity: 0;
  transform-origin: 10px 14px;
  transform: scale(0);
}

.eq-login-error.is-visible .eq-login-error-circle {
  animation: eqErrorDraw 380ms cubic-bezier(.65,0,.35,1) forwards;
}

.eq-login-error.is-visible .eq-login-error-mark {
  animation: eqErrorDraw 200ms cubic-bezier(.65,0,.35,1) 260ms forwards;
}

.eq-login-error.is-visible .eq-login-error-dot {
  animation: eqErrorDot 180ms ease-out 440ms forwards;
}

@keyframes eqErrorDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes eqErrorDot {
  to { opacity: 1; transform: scale(1); }
}

.eq-login-panel.is-shaking {
  animation: eqLoginShake 260ms ease-in-out;
}

@keyframes eqLoginShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* -------------------------------------------------------------------- */
/* Copyright                                                              */
/* -------------------------------------------------------------------- */
.eq-login-copyright {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 0;
  font-family: var(--cp-font-body);
  font-size: 12px;
  color: var(--muted);
}

/* -------------------------------------------------------------------- */
/* Estado de éxito -- ya no depende de grid-row (panel ahora es flex);   */
/* login-transition.js oculta eqLoginFormContent (display:none) antes    */
/* de mostrar este bloque, así que ambos nunca ocupan espacio a la vez.  */
/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */
/* Anti-overflow horizontal (sección 31)                                  */
/* -------------------------------------------------------------------- */
.eq-login-panel img {
  display: block;
  max-width: 100%;
  height: auto;
}

.eq-login-panel * {
  max-width: 100%;
}

/* -------------------------------------------------------------------- */
/* Cursores                                                                */
/* -------------------------------------------------------------------- */
.eq-login-page button,
.eq-login-page a,
.eq-login-page .eq-login-remember {
  cursor: pointer;
}

.eq-login-page input {
  cursor: text;
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eq-login-artboard,
  .eq-login-decor-tl,
  .eq-login-decor-bl,
  .eq-login-divider,
  .eq-login-panel,
  .eq-login-panel.is-shaking {
    animation: none !important;
    transition: opacity 150ms ease !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  /* .eq-login-composed y .eq-login-bienvenido usan transform también
     para su POSICIÓN estática (translate -50%) -- no se puede anular
     por completo o perderían el centrado. Solo se detiene la animación. */
  .eq-login-composed {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  .eq-login-bienvenido {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: translateX(-50%) !important;
  }
  /* Stagger de la tarjeta + respiración del logo chico + pulso de foco:
     todo queda estático, sin movimiento continuo ni entradas escalonadas. */
  .eq-login-brand-block,
  .eq-login-card-title,
  .eq-login-subtext,
  .eq-login-form-group,
  .eq-login-row,
  .eq-login-copyright,
  .eq-login-btn,
  .eq-login-card-logo {
    animation: none !important;
    opacity: 1 !important;
  }
  .eq-login-input-icon-left {
    transition: none !important;
  }
  .eq-login-input-wrap:has(.eq-login-input:focus) .eq-login-input-icon-left {
    transform: translateY(-50%) !important;
  }
  /* Check del checkbox y icono de error: se muestran directo en su
     estado final, sin dibujarse con stroke-dashoffset. */
  .eq-login-check-path,
  .eq-login-error-circle,
  .eq-login-error-mark {
    transition: none !important;
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .eq-login-error-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .eq-login-ripple {
    display: none !important;
  }
}

/* -------------------------------------------------------------------- */
/* Margen de seguridad medido analíticamente (sin navegador disponible):
   a 1366x768 el artboard mide ~1365x768, la tarjeta (90% alto) ~691px.
   El contenido sin compactar necesita ~747px -> compactar aquí evita
   cualquier posibilidad de overflow (deja ~79px de margen real). */
@media (max-height: 800px) {
  .eq-login-panel {
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .eq-login-brand-block {
    min-height: 76px;
  }
  .eq-login-card-title {
    margin-top: 6px;
    width: 190px;
  }
  .eq-login-subtext {
    margin: 8px 0 16px;
    font-size: 16px;
  }
  .eq-login-label {
    margin-bottom: 5px;
    font-size: 15px;
  }
  .eq-login-input {
    height: 56px;
    font-size: 16px;
  }
  .eq-login-form-group {
    margin-bottom: 14px;
  }
  .eq-login-row {
    margin-top: 14px;
  }
  .eq-login-btn {
    height: 56px;
    margin-top: 16px;
    font-size: 22px;
  }
  .eq-login-copyright {
    margin-top: 10px;
  }
}

/* Responsive -- desktop es la prioridad de esta corrección; en tablet    */
/* se mantiene el mismo artboard 16:9 (solo cambia de tamaño). Mobile     */
/* se preserva con un layout lineal simplificado, sin tocar el sistema.  */
/* -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .eq-login-viewport {
    position: static;
    display: block;
    min-height: 100dvh;
    overflow: visible;
  }
  .eq-login-artboard {
    position: static;
    width: 100%;
    height: auto;
    min-height: 100dvh;
  }
  .eq-login-left-artboard {
    position: static;
    width: 100%;
    height: auto;
    padding: 32px 20px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .eq-login-left-artboard img {
    position: static;
    max-width: 100%;
  }
  .eq-login-decor-tl,
  .eq-login-decor-bl,
  .eq-login-divider {
    display: none;
  }
  .eq-login-composed {
    position: static;
    width: 240px;
    margin: 0 auto;
    transform: none !important;
  }
  .eq-login-bienvenido {
    position: static;
    width: 160px;
    margin: 6px auto 0;
    clip-path: none;
  }
  .eq-login-panel {
    position: static;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 16px auto 32px;
    padding: 28px 22px 20px;
    display: block;
    border-radius: 26px;
  }
  .eq-login-brand-block {
    min-height: auto;
    margin-bottom: 8px;
  }
  .eq-login-card-logo {
    width: 130px;
  }
  .eq-login-card-title {
    width: 210px;
  }
  .eq-login-input {
    height: 58px;
  }
  .eq-login-btn {
    height: 60px;
    font-size: 22px;
  }
}