/* ==========================================================================
   Ingreso (login.html) — estilos propios de la pantalla.
   Composición: panel de marca en tinta (libro mayor con renglones, trébol
   gigante y el "libro del día") + columna de papel con el formulario.
   En celular la marca se vuelve una banda arriba y la caja se monta encima.
   Solo tokens. Prefijo de clases: .ing-
   ========================================================================== */

.ing-cuerpo { background: var(--fondo); }

.ing {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Panel de marca ---------- */
.ing-marca {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--e-8);
  padding: var(--e-8) clamp(var(--e-8), 5vw, var(--e-16));
  background-color: var(--lateral-fondo);
  /* Renglones del libro mayor + línea de margen ámbar */
  background-image:
    linear-gradient(90deg, transparent 0 calc(clamp(32px, 5vw, 64px) - 14px), color-mix(in srgb, var(--acento) 34%, transparent) calc(clamp(32px, 5vw, 64px) - 14px) calc(clamp(32px, 5vw, 64px) - 13px), transparent calc(clamp(32px, 5vw, 64px) - 13px)),
    repeating-linear-gradient(180deg, transparent 0 35px, var(--lateral-borde) 35px 36px);
  color: var(--lateral-texto);
  /* Llena siempre el alto de la fila: si el formulario crece (estado de error)
     el panel se estira con él y no queda franja clara abajo. */
  min-height: 100vh; min-height: 100dvh;
}
.ing-marca::after { /* viñeta suave para que los renglones se apaguen abajo */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, var(--lateral-fondo) 100%);
}

.ing-trebol {
  position: absolute; z-index: -2; pointer-events: none;
  width: min(640px, 70vh); height: auto; right: -18%; bottom: -22%;
  transform: rotate(-12deg);
}
.ing-trebol .hoja { fill: none; stroke: color-mix(in srgb, var(--lateral-marca) 22%, transparent); stroke-width: 0.12; }
.ing-trebol .hoja--suerte { fill: color-mix(in srgb, var(--acento) 16%, transparent); stroke: color-mix(in srgb, var(--acento) 45%, transparent); }

.ing-marca__logo { display: inline-flex; align-items: center; gap: 10px; }
.ing-marca__logo .logo-marca { width: 34px; height: 34px; }
.ing-marca__logo .lateral__nombre { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 700; letter-spacing: -0.01em; color: var(--lateral-texto); }
.ing-marca__logo .lateral__nombre span { color: var(--lateral-marca); font-weight: 600; }

.ing-marca__centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--e-4); max-width: 560px; }
.ing-marca__antetitulo {
  font-size: var(--t-12); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acento);
}
.ing-marca__titular {
  font-family: var(--fuente-titulo); font-weight: 700; color: var(--lateral-texto);
  font-size: clamp(2.25rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.ing-subrayado { position: relative; color: var(--lateral-marca); white-space: nowrap; }
.ing-subrayado::after { /* trazo a mano, en ámbar */
  content: ""; position: absolute; left: -2px; right: -4px; bottom: -0.1em; height: 0.2em;
  background: var(--acento); border-radius: 0 999px 999px 999px / 0 100% 100% 100%;
  transform: rotate(-1.2deg); opacity: 0.9; z-index: -1;
}
.ing-marca__bajada { color: var(--lateral-texto-2); font-size: var(--t-16); max-width: 46ch; }

/* Escena: el libro del día */
.ing-escena { position: relative; margin-top: var(--e-6); width: min(460px, 100%); padding-bottom: var(--e-16); }
.ing-ticket {
  position: relative; background: var(--superficie); color: var(--texto);
  border-radius: var(--radio-3) var(--radio-3) 0 0; box-shadow: var(--sombra-3);
  padding: var(--e-4) var(--e-5) var(--e-5);
  transform: rotate(-1.6deg); transform-origin: 30% 100%;
  /* borde inferior troquelado */
  -webkit-mask: radial-gradient(circle 6px at 9px 100%, transparent 98%, black) -9px 0 / 18px 100% repeat-x;
  mask: radial-gradient(circle 6px at 9px 100%, transparent 98%, black) -9px 0 / 18px 100% repeat-x;
}
.ing-ticket__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px solid var(--borde); }
.ing-ticket__titulo { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); }
.ing-ticket .en-vivo { font-size: var(--t-12); }
.ing-ticket__lista { list-style: none; margin: 0; padding: 0; }
.ing-asiento {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--e-3);
  padding: 9px 0; border-bottom: 1px dashed var(--borde); font-size: var(--t-13);
}
.ing-asiento:nth-child(1) { background: linear-gradient(90deg, var(--primario-suave), transparent 70%); margin: 0 calc(var(--e-5) * -1); padding-left: var(--e-5); padding-right: var(--e-5); }
.ing-asiento__hora { font-family: var(--fuente-mono); font-size: var(--t-12); color: var(--texto-3); }
.ing-asiento__cuenta { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-asiento__monto { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ing-ticket__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-3); font-size: var(--t-13); color: var(--texto-2); }
.ing-ticket__monto { font-family: var(--fuente-titulo); font-size: var(--t-24); font-weight: 700; color: var(--texto); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ing-ticket__monto small { font-size: 0.6em; color: var(--texto-2); }
.ing-ticket__pie { font-size: var(--t-12); color: var(--texto-3); margin-top: 2px; }

.ing-nota {
  position: absolute; right: -14%; bottom: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: var(--e-3); max-width: 270px;
  padding: var(--e-3) var(--e-4); border-radius: var(--radio-3);
  background: var(--acento-suave); background: color-mix(in srgb, var(--acento) 18%, var(--lateral-fondo));
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--lateral-texto); font-size: var(--t-13); line-height: 1.4; box-shadow: var(--sombra-2);
  transform: rotate(1.4deg);
}
.ing-nota strong { display: block; color: var(--lateral-texto); }
.ing-nota > span:last-child { color: var(--lateral-texto-2); }
.ing-nota__ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acento); color: var(--lateral-fondo); }

.ing-promesas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.ing-promesas li { display: flex; align-items: flex-start; gap: var(--e-2); color: var(--lateral-texto-2); font-size: var(--t-13); line-height: 1.4; padding-top: var(--e-3); border-top: 1px solid var(--lateral-borde); }
.ing-promesas .ico { color: var(--lateral-marca); margin-top: 1px; }

/* ---------- Columna del formulario ---------- */
.ing-lado { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }
.ing-barra { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-2); padding: var(--e-4) var(--e-6) 0; }
.ing-barra__ayuda { font-size: var(--t-14); font-weight: 500; color: var(--texto-2); text-decoration: none; padding: 10px var(--e-2); border-radius: var(--radio-1); }
.ing-barra__ayuda:hover { color: var(--texto); text-decoration: underline; }

.ing-lado .acceso { flex: 1; min-height: 0; padding: var(--e-8) var(--e-6); }
.ing-lado .acceso:focus { outline: none; }
.acceso__caja.tarjeta--relleno { width: min(440px, 100%); padding: var(--e-8); border-radius: var(--radio-4); box-shadow: var(--sombra-2); }
.ing-logo-caja { display: none; margin-bottom: var(--e-6); }
.ing-logo-caja .lateral__nombre { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -0.01em; }

.ing-paso { display: grid; gap: var(--e-4); }
.ing-paso[hidden] { display: none; }
.ing-titulo { font-family: var(--fuente-titulo); font-size: var(--t-28); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ing-titulo:focus { outline: none; }
.ing-sub { color: var(--texto-2); font-size: var(--t-15); margin-top: calc(var(--e-2) * -1); }
.ing-sub strong { color: var(--texto); }
.ing-paso > .form { margin-top: var(--e-2); }
.ing-error-general { margin-top: var(--e-1); }

/* Progreso de 2 pasos */
.ing-progreso { display: flex; align-items: center; gap: 6px; }
.ing-progreso__barra { width: 28px; height: 4px; border-radius: var(--radio-total); background: var(--pista); }
.ing-progreso__barra--hecha { background: var(--primario-suave); background: color-mix(in srgb, var(--primario) 40%, var(--pista)); }
.ing-progreso__barra--activa { width: 44px; background: var(--primario); }
.ing-progreso__texto { margin-left: var(--e-2); font-size: var(--t-12); font-weight: 600; color: var(--texto-3); letter-spacing: 0.02em; }

.ing-etiqueta-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.ing-etiqueta-fila .btn--enlace { font-weight: 600; text-decoration: none; }
.ing-etiqueta-fila .btn--enlace:hover { text-decoration: underline; }

/* Ojo de la contraseña: cambia de ícono según aria-pressed (lo pone app.js) */
.ing-ojo .ing-ojo__ocultar { display: none; }
.ing-ojo[aria-pressed="true"] .ing-ojo__ver { display: none; }
.ing-ojo[aria-pressed="true"] .ing-ojo__ocultar { display: block; }
.ing-mayus { color: var(--alerta); font-weight: 500; }

.ing-alta { font-size: var(--t-14); color: var(--texto-2); text-align: center; padding-top: var(--e-4); border-top: 1px solid var(--borde); margin-top: var(--e-2); }
.ing-alta a { font-weight: 600; }

/* Usuaria que está ingresando */
.ing-usuario { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie-2); min-width: 0; }
.ing-usuario .persona__texto { flex: 1; }
/* El correo entero, aunque pase a dos líneas (corta en el @ o en los puntos) */
.ing-usuario .persona__meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

/* Código: casillas que ocupan el ancho de la caja */
#campo-codigo { grid-template-columns: minmax(0, 1fr); }
.ing-otp { justify-content: space-between; gap: var(--e-2); min-width: 0; }
.ing-otp input { flex: 1 1 0; min-width: 0; width: 0; max-width: 56px; }
.campo--error .ing-otp input { border-color: var(--peligro); }
.campo--error .ing-otp input:focus { box-shadow: 0 0 0 3px var(--peligro-fondo); }
.ing-otp:has(input:focus) ~ .campo__ayuda { color: var(--texto-2); }

/* Reloj del código */
.ing-reloj { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--texto-3); font-weight: 500; }
.ing-reloj__aro { width: 16px; height: 16px; transform: rotate(-90deg); }
.ing-reloj__aro circle { fill: none; stroke-width: 2.5; }
.ing-reloj__pista { stroke: var(--pista); }
.ing-reloj__resto { stroke: var(--primario); stroke-linecap: round; stroke-dasharray: var(--resto) 30; transition: stroke-dasharray 1s linear; }
.ing-reloj--poco { color: var(--alerta); }
.ing-reloj--poco .ing-reloj__resto { stroke: var(--tope-alerta); }

/* Alternativas al código */
.ing-alternativas { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--borde); margin-top: var(--e-2); }
.ing-alternativas__titulo { font-size: var(--t-13); font-weight: 600; color: var(--texto-3); }
.ing-alternativa {
  display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 56px; text-align: left;
  padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie);
  cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1);
}
.ing-alternativa:hover:not(:disabled) { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.ing-alternativa:disabled { cursor: default; opacity: 0.7; }
.ing-alternativa__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radio-2); background: var(--primario-suave); color: var(--primario-texto); }
.ing-alternativa__texto { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.ing-alternativa__texto strong { font-size: var(--t-14); color: var(--texto); }
.ing-alternativa__texto small { font-size: var(--t-12); color: var(--texto-3); overflow-wrap: anywhere; }
.ing-alternativa__chev { color: var(--texto-3); }

.ing-respaldo { font-size: var(--t-20); letter-spacing: 0.12em; text-transform: uppercase; min-height: 52px; text-align: center; }
.ing-respaldo::placeholder { letter-spacing: 0.12em; }
.ing-aviso { margin-top: var(--e-1); }
.ing-volver { justify-self: start; margin-left: calc(var(--e-3) * -1); }

/* Recuperar acceso */
.ing-icono-grande { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--acento-suave); color: var(--acento-texto); }
.ing-icono-grande--exito { background: var(--exito-fondo); color: var(--exito); }
.ing-nota-chica { font-size: var(--t-13); color: var(--texto-3); }
.ing-pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.ing-pasos-lista li { display: flex; gap: var(--e-3); font-size: var(--t-14); color: var(--texto-2); line-height: 1.45; }
.ing-pasos-lista strong { color: var(--texto); }
.ing-pasos-lista__num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--superficie-3); color: var(--texto); font-size: var(--t-12); font-weight: 700; margin-top: 1px; }
.ing-acciones { display: grid; gap: var(--e-2); margin-top: var(--e-2); }

/* Pie */
.ing-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2) var(--e-5);
  padding: var(--e-4) var(--e-6) var(--e-6); font-size: var(--t-12); color: var(--texto-3); text-align: center;
}
.ing-pie__seguro { display: inline-flex; align-items: center; gap: 6px; }
.ing-pie__links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1) var(--e-4); }
.ing-pie a { color: var(--texto-2); text-decoration: none; }
.ing-pie a:hover { color: var(--texto); text-decoration: underline; }

/* ---------- Casos especiales del paso 1 (sesión cerrada, mantenimiento) ---------- */
.ing-aviso-estado { margin-top: var(--e-1); }
.ing-aviso-estado .aviso__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.ing-aviso-estado__dato { color: var(--texto-2); overflow-wrap: anywhere; }

/* Ícono grande: variantes */
.ing-icono-grande--marca { background: var(--primario-suave); color: var(--primario-texto); }
.ing-icono-grande--peligro { background: var(--peligro-fondo); color: var(--peligro); }

/* Medidor, requisitos, QR y códigos de respaldo: componentes del sistema (estilos.css) */

/* ---------- Alta de la verificación en dos pasos ---------- */
.ing-2fa { display: grid; min-width: 0; }
.ing-qr-bloque {
  padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie-2);
}
.ing-qr-cuenta { display: grid; gap: 2px; min-width: 0; font-size: var(--t-14); color: var(--texto-2); line-height: 1.4; }
.ing-qr-cuenta__etiqueta { font-size: var(--t-12); color: var(--texto-3); }
.ing-qr-cuenta strong { color: var(--texto); font-size: var(--t-15); }
.ing-qr-cuenta [data-ing-2fa-correo] { overflow-wrap: anywhere; }
.secreto .clave-manual { font-size: var(--t-16); letter-spacing: 0.08em; color: var(--texto); }
#campo-2fa { grid-template-columns: minmax(0, 1fr); }

.ing-codigos-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin-top: calc(var(--e-1) * -1); }
#campo-guarde { gap: var(--e-2); }

.ing-obligatorio {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding-top: var(--e-4); border-top: 1px solid var(--borde); margin-top: var(--e-2);
  font-size: var(--t-13); font-weight: 500; color: var(--texto-2); line-height: 1.45;
}
.ing-obligatorio .ico { flex: none; color: var(--primario-texto); margin-top: 1px; }

/* ---------- Pie de la caja: paso a la consola ---------- */
.ing-caja-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--e-2);
  margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px dashed var(--borde);
  font-size: var(--t-13); color: var(--texto-3); text-align: center;
}
.ing-caja-pie[hidden] { display: none; }
.ing-caja-pie a { color: var(--texto-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }
.ing-caja-pie a:hover { color: var(--primario-texto); text-decoration-color: currentColor; }
/* En el paso 1 queda pegado a "¿Tu empresa todavía no cobra…?", sin otra raya */
.acceso__caja:has(> .ing-paso:first-of-type:not([hidden])) .ing-caja-pie { margin-top: var(--e-2); padding-top: 0; border-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .ing-nota { right: -6%; }
  .ing-promesas { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
  .ing-promesas li { padding-top: var(--e-2); }
}
@media (max-height: 820px) and (min-width: 1024px) {
  .ing-promesas { display: none; }
}
@media (max-height: 700px) and (min-width: 1024px) {
  .ing-escena { display: none; }
}

/* Tablet y celular: la marca se vuelve una banda y la caja se monta encima */
@media (max-width: 1023px) {
  .ing { grid-template-columns: minmax(0, 1fr); }
  .ing-marca {
    position: relative; height: auto; min-height: 0; gap: var(--e-3);
    padding: var(--e-5) var(--e-4) calc(var(--e-16) + var(--e-6));
    background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--lateral-borde) 31px 32px);
  }
  .ing-marca::after { display: none; }
  .ing-trebol { width: 260px; right: -120px; bottom: -40px; top: auto; opacity: 0.8; }
  .ing-marca__centro { gap: var(--e-2); max-width: 600px; }
  .ing-marca__titular { font-size: clamp(1.9rem, 6.4vw, 2.6rem); }
  .ing-marca__bajada { font-size: var(--t-14); max-width: 40ch; }
  .ing-escena, .ing-promesas { display: none; }
  .ing-marca__antetitulo { margin-top: var(--e-4); }

  .ing-lado { min-height: 0; }
  .ing-barra { position: absolute; z-index: 2; top: var(--e-3); right: var(--e-3); padding: 0; }
  .ing-barra__ayuda { display: none; }
  .ing-barra__tema { color: var(--lateral-texto-2); }
  .ing-barra__tema:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
  .ing-barra__tema:focus-visible { outline-color: var(--lateral-marca); }
  .ing-lado .acceso { position: relative; z-index: 1; display: block; padding: 0 var(--e-4); margin-top: calc(var(--e-16) * -1); }
  .acceso__caja.tarjeta--relleno { margin: 0 auto; width: min(520px, 100%); }
}

@media (max-width: 767px) {
  .acceso__caja.tarjeta--relleno { padding: var(--e-6) var(--e-5); border-radius: var(--radio-4); }
  .ing-titulo { font-size: var(--t-24); }
  .ing-sub { font-size: var(--t-14); }
  .ing-otp { gap: 6px; }
  .ing-otp input { width: 0; height: 54px; }
  .ing-pie { flex-direction: column; gap: var(--e-2); padding: var(--e-6) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom)); }

  /* La clave entera a la vista: más chica y, si igual no entra, baja de renglón en un espacio */
  .secreto .clave-manual { font-size: var(--t-14); letter-spacing: 0.04em; white-space: normal; overflow: visible; }
}

@media (max-width: 360px) {
  .acceso__caja.tarjeta--relleno { padding: var(--e-5) var(--e-4); }
  .ing-otp .otp__separador { display: none; }
  .ing-codigos-acciones { grid-template-columns: minmax(0, 1fr); }
}

/* Áreas táctiles de 44 px en enlaces de texto: en pantallas táctiles y en celular */
@media (pointer: coarse), (max-width: 767px) {
  .ing-etiqueta-fila .btn--enlace { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--e-1); margin-right: calc(var(--e-1) * -1); }
  .ing-alta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-1); vertical-align: middle; }
  .ing-alternativa { min-height: 60px; }
  .ing-pie a { display: inline-flex; align-items: center; min-height: 44px; }
  .ing-caja-pie a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-1); }
}