/* cel4 · base compartida por todas las páginas (ver DESIGN.md).
   Acá viven los tokens y las piezas que se repiten: logo, volver, campos de formulario.
   Cada página suma solo lo propio; los botones están en botones.css. */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f6;
  --ink: #0b0b0c;
  --ink-2: #4a4a4f;
  --ink-3: #8a8a90;
  --line: #e7e7ea;
  /* Un solo color, apagado y sólido, para lo que pide atención. Rojo solo para lo grave. */
  --acc: #b4560f; --acc-l: #f0a868;
  --bad: #c4362b;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  /* Títulos: Archivo Expanded */
  --display: "Archivo", "Geist", system-ui, sans-serif;
  --dst: 125%; --dw: 700; --dws: 600; --dk: .77;
  --dls: -0.045em; --dls-s: -0.02em; --dls-w: -0.06em; --dlh: .98;
  /* Superficies oscuras (sidebar de la demo, panel de ingreso) */
  --dk-bg: #141416; --dk-mod: #1b1b1e; --dk-line: #2a2a2f; --dk-fg2: #a3a3a9; --dk-fg3: #66666d;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }

/* Logo: isotipo + "cel4" */
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-stretch: var(--dst); font-weight: var(--dws); font-size: calc(18px * var(--dk)); letter-spacing: var(--dls-s); }
.logo svg { display: block; flex: none; height: 22px; width: auto; aspect-ratio: 340 / 420; fill: currentColor; }

/* Etapa del proyecto: 4 segmentos, el actual se va llenando */
.etapa { display: inline-flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--ink-2); }
.etapa .seg { display: flex; gap: 4px; }
.etapa .seg i { width: 26px; height: 6px; border-radius: 3px; background: #e4e4e7; }
.etapa .seg i.f { background: var(--ink); }
.etapa .seg i.n { background: linear-gradient(90deg, var(--ink) 50%, #e4e4e7 50%); background-size: 200% 100%; animation: stagefill 2.4s var(--ease) infinite alternate; }
@keyframes stagefill { from { background-position: 100% 0; } to { background-position: 30% 0; } }
.etapa b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .etapa .seg i.n { animation: none; } }

/* Módulo oscuro: bloque recortado sobre fondo casi negro */
.mod-dk { background: var(--dk-mod); border: 1px solid var(--dk-line); border-radius: 16px; padding: 14px; color: #fff; }

/* Link subrayado (también sirve como botón de texto) */
.lk { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.lk:hover { color: var(--ink); }

/* Volver */
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); transition: color .2s; }
.back span { transition: transform .3s var(--ease); }
.back:hover { color: var(--ink); }
.back:hover span { transform: translateX(-3px); }
button.back { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }

/* Formularios: campos de línea inferior, sin caja */
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field .help { font-size: 12px; color: var(--ink-3); }
.field .err { font-size: 12.5px; color: var(--bad); }
.input { height: 44px; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 0 2px; font: inherit; font-size: 16px; color: inherit; background: transparent; outline: 0; width: 100%; transition: border-color .2s; }
.input:focus { border-bottom-color: var(--ink); }
.input.invalid { border-bottom-color: var(--bad); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; user-select: none; }
.check input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ink); cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--ink); }
.check input:checked::after { content: ""; width: 6px; height: 6px; background: #fff; }