/*
  entrada.css — la puerta de la app: login, onboarding y la portada (index).

  Mismo producto que landing.html y el diseño del teléfono: bosque, menta sólo
  para acciones, chapeta amarilla, Atkinson para leer y Big Shoulders para los
  números. Tarjetas planas, sin sombras de neumorfismo ni degradados.

  Modo noche: los colores salen de las variables de shared/css/dark.css
  (--n-*) cuando la página la carga (index); si no (login, onboarding), del
  segundo valor de cada var(), que es el mismo color copiado.
*/

:root {
  --e-bosque: #163A24;
  --e-bosque-hondo: #0F2A1A;
  --e-menta: #2ECC71;
  --e-menta-hover: #3EDB80;
  --e-sobre-menta: #0F1A14;
  --e-fondo: #F3F7F2;
  --e-tarjeta: #FFFFFF;
  --e-campo: #F3F7F2;
  --e-linea: #DCE5DD;
  --e-ink: #0F1A14;
  --e-titulo: #163A24;
  --e-gris: #4E6157;
  --e-tenue: #5F7268;
  --e-ambar: #C27A1A;
  --e-chapeta: #F2C230;
  --e-chapeta-ink: #2B2104;
  --e-claro: #E3F3EA;
  --e-rojo: #B42318;
  --e-foco: #1F7A45;
  --e-icono-fondo: #E8F4EC;
  --e-texto: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --e-numero: 'Big Shoulders Display', 'Atkinson Hyperlegible', sans-serif;
}

.dark {
  --e-fondo: var(--n-bg, #0B1510);
  --e-tarjeta: var(--n-card, #13221A);
  --e-campo: var(--n-raised, #1A2E23);
  --e-linea: var(--n-line, #22382B);
  --e-ink: var(--n-ink, #E8F3EC);
  --e-titulo: var(--n-ink, #E8F3EC);
  --e-gris: var(--n-ink2, #A9C4B3);
  --e-tenue: var(--n-mute, #7F9A8A);
  --e-ambar: var(--n-ambar, #E0A040);
  --e-rojo: var(--n-rojo, #F07167);
  --e-sobre-menta: var(--n-menta-ink, #0B1510);
  --e-foco: var(--n-menta, #2ECC71);
  --e-icono-fondo: var(--n-raised, #1A2E23);
  --e-bosque-hondo: #0B1D13;
  color-scheme: dark;
}

.entrada, .entrada body { margin: 0; }
.entrada body {
  background: var(--e-fondo);
  color: var(--e-ink);
  font: 400 17px/1.5 var(--e-texto);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  min-height: 100vh;
}
.entrada *, .entrada *::before, .entrada *::after { box-sizing: border-box; }
:where(.entrada) :where(h1, h2, h3, p, figure) { margin: 0; }
.entrada .hidden { display: none !important; }
.entrada .material-symbols-outlined { line-height: 1; }
.entrada :focus-visible { outline: 3px solid var(--e-foco); outline-offset: 2px; border-radius: 10px; }
.entrada .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Marca ─────────────────────────────────────────────── */
.e-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; color: #fff; min-height: 44px; }
.e-marca img { width: 36px; height: 36px; border-radius: 10px; }

/* ── Botones: la menta es sólo para la acción ──────────── */
.e-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--e-menta); color: var(--e-sobre-menta);
  font: 700 17px/1 var(--e-texto); text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.e-boton:hover { background: var(--e-menta-hover); }
.e-boton:active { transform: translateY(1px); }
.e-boton:disabled { opacity: .7; cursor: progress; }
.e-boton .material-symbols-outlined { font-size: 20px; }
.e-boton-bloque { width: 100%; }
.e-boton-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--e-ink); border: 1.5px solid var(--e-linea);
  font: 700 16px/1 var(--e-texto); text-decoration: none;
}
.e-boton-sec:hover { border-color: var(--e-gris); }
.e-enlace { background: none; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer; font: 700 16px/1 var(--e-texto); color: var(--e-foco); text-decoration: underline; text-underline-offset: 4px; }
.dark .e-enlace { color: var(--e-menta); }

/* ── Campos ────────────────────────────────────────────── */
.e-campo { display: grid; gap: 6px; }
.e-campo label, .e-etiqueta { font-weight: 700; font-size: 15px; color: var(--e-ink); }
.e-caja { position: relative; }
.e-caja > .material-symbols-outlined:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--e-tenue); pointer-events: none; }
.entrada .e-input {
  width: 100%; min-height: 48px; padding: 12px 14px 12px 44px;
  background: var(--e-campo); color: var(--e-ink);
  border: 1.5px solid transparent; border-radius: 14px;
  font: 400 17px/1.3 var(--e-texto);
  -webkit-appearance: none; appearance: none;
}
.entrada .e-input.sin-icono { padding-left: 14px; }
.entrada .e-input::placeholder { color: var(--e-tenue); opacity: 1; }
.entrada .e-input:hover { border-color: var(--e-linea); }
.entrada .e-input:focus { outline: none; border-color: var(--e-foco) !important; box-shadow: 0 0 0 3px rgba(31, 122, 69, .18) !important; }
.dark.entrada .e-input:focus { box-shadow: 0 0 0 3px rgba(46, 204, 113, .25) !important; }
.e-ver-clave {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 12px; cursor: pointer; color: var(--e-gris);
}
.e-ver-clave:hover { color: var(--e-ink); }
.e-ver-clave .material-symbols-outlined { font-size: 22px; }
.e-caja .e-input.con-ojo { padding-right: 52px; }

/* ── La chapeta (el mismo dibujo del landing) ──────────── */
.e-rebano { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; }
.e-tag {
  aspect-ratio: 44 / 50; position: relative; border-radius: 26% 26% 18% 18% / 23% 23% 16% 16%;
  background: var(--e-chapeta); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12%;
  font: 800 clamp(13px, 1.4vw, 19px)/1 var(--e-numero); color: var(--e-chapeta-ink);
}
.e-tag::before { content: ""; position: absolute; top: 14%; left: 50%; width: 18%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--e-bosque-hondo); }
.e-tag.falta { background: transparent; box-shadow: inset 0 0 0 2px var(--e-ambar); color: #E7A64B; }
.e-tag.falta::before { background: transparent; box-shadow: inset 0 0 0 2px var(--e-ambar); }

/* ── Aviso flotante (#toast) ───────────────────────────── */
.entrada #toast {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999;
  align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px;
  font: 700 16px/1.35 var(--e-texto); color: var(--e-sobre-menta) !important;
  box-shadow: 0 10px 30px -12px rgba(15, 26, 20, .45) !important;
}
@media (min-width: 640px) { .entrada #toast { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }
.entrada #toast.flex { display: flex; }

/* ── Ventanas (modales) ────────────────────────────────── */
.e-velo { position: fixed; inset: 0; z-index: 200; background: rgba(15, 26, 20, .55); align-items: flex-end; justify-content: center; padding: 0; }
.e-velo.flex { display: flex; }
@media (min-width: 640px) { .e-velo { align-items: center; padding: 24px; } }
.e-ventana {
  width: 100%; max-width: 520px; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--e-tarjeta); color: var(--e-ink); border-radius: 22px 22px 0 0; overflow: hidden;
}
@media (min-width: 640px) { .e-ventana { border-radius: 22px; } }
.e-ventana-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.e-ventana-cab h2 { font: 700 22px/1.2 var(--e-texto); color: var(--e-titulo); }
.e-ventana-cab p { margin-top: 4px; font-size: 15px; color: var(--e-gris); }
.e-cerrar { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 0; background: var(--e-campo); color: var(--e-ink); cursor: pointer; }
.e-ventana-cuerpo { padding: 4px 20px 20px; overflow-y: auto; }
.e-ventana-pie { display: flex; gap: 10px; padding: 14px 20px 20px; border-top: 1px solid var(--e-linea); }
.e-ventana-pie > * { flex: 1; }
.e-ventana-pie > .e-boton { flex: 2; }

@media (prefers-reduced-motion: reduce) {
  .entrada *, .entrada *::before, .entrada *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}