/* ============================================================
   BASE · reset, tipografía y accesibilidad
   Sistema "CÉDULA OFICIAL" (v2.0)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-texto);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--fondo);
  /* El guilloche: la trama grabada del billete. Va a tamaño fijo
     (no cover) porque es un patrón que empalma, y estirarlo lo
     rompería. Queda anclado al viewport para que el fondo no se
     "arrastre" al hacer scroll: la sensación es papel quieto y
     contenido que se desliza encima, no una alfombra que corre. */
  background-image: var(--textura-papel);
  background-size: var(--trama-escala);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;               /* nada de scroll horizontal, nunca */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Tipografía ----------
   Los títulos son condensados (Bahnschrift / DIN / Roboto
   Condensed): la voz de un formulario del Estado. Como la
   condensada aprieta las letras, se compensa con tracking. */
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--track-titulo);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 3px; }

/* ---------- Formularios y botones ---------- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; }

/* Todo control interactivo respeta el mínimo táctil */
button, [role="button"], input[type="submit"], select {
  min-height: var(--tap);
}

/* ---------- Foco visible (accesibilidad real) ----------
   Oro, no azul: en este sistema el rojo ya significa "acento" y
   también "error", así que el foco necesitaba el tercer color de
   la bandera para no confundirse con ninguno de los dos. */
:focus-visible {
  outline: 3px solid var(--py-oro);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Imágenes y SVG ---------- */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ---------- Tablas ---------- */
table { border-collapse: collapse; width: 100%; }

/* ---------- Utilidades ---------- */
.oculto { display: none !important; }

.solo-lectores, .oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Contenedor de scroll horizontal seguro (tablas, diagramas anchos) */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ---------- Movimiento reducido ----------
   Quien lo pide no quiere "menos animación": quiere ninguna. Se
   apagan también los bucles infinitos (el foil, el ticker, el
   brillo del esqueleto), que son los que de verdad marean. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Barras de scroll discretas ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); background-clip: content-box; }

/* ---------- Selección ---------- */
::selection { background: var(--py-oro-claro); color: #14181a; }