/* ==========================================================
   base.css — reset, tipografía y los nueve fixes de comportamiento nativo
   ==========================================================
   Depende de tokens.css. No define ni un color ni un radio propio.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box }

html {
  -webkit-text-size-adjust: 100%;
  /* FIX 9 — el salto lateral. Sin esto el layout se mueve ~15px cuando el
     contenido crece más de una pantalla y aparece la barra de scroll. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--f14);
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;

  /* FIX 3 — el destello del navegador. Un recuadro gris parpadea en cada toque
     y eso se lee como "página web". Se quita, y cada control gana un estado
     :active real para no perder la respuesta táctil. */
  -webkit-tap-highlight-color: transparent;

  /* FIX 6 — el notch en horizontal. Sin esto el contenido se esconde debajo del
     alojamiento de sensores. */
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

h1, h2, h3, h4, p { margin: 0 }
ul, ol, dl { margin: 0; padding: 0; list-style: none }
button, input, textarea, select { font: inherit; color: inherit }
a { color: var(--acc-text) }
svg { display: block; flex: none }
img { max-width: 100% }

/* El anillo de foco nunca se quita. Es lo que hace que el teclado funcione
   gratis, y con él los lectores de pantalla. */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--rs) }
::selection { background: var(--acc-wash2); color: var(--ink) }

/* Solo para lectores de pantalla */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Toda cifra, conteo o duración lleva tabular-nums, o un valor que se actualiza
   en vivo salta de ancho al cambiar. */
.num { font-variant-numeric: tabular-nums }
.mono { font-family: var(--fm); font-size: var(--f12); letter-spacing: 0; font-variant-numeric: tabular-nums }

/* Ningún hijo de flex o grid puede provocar scroll horizontal por un
   identificador largo. */
.row > *, .col > * { min-width: 0 }

/* ----------------------------------------------------------
   FIX 1 — hover pegado

   El bug: una tarjeta tocada en un táctil se queda resaltada hasta que tocás
   otra cosa. La causa es que :hover persiste tras un tap.

   Por eso NINGÚN estilo de hover vive fuera de esta consulta. Si aparece un
   `:hover` suelto en el proyecto, es un bug.
   ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .hoverable:hover { background: var(--hover) }
}
/* En táctil, el hover se reemplaza por un estado de presión real. */
.hoverable:active { background: var(--press) }

/* ----------------------------------------------------------
   FIX 5 — 100vh en iOS

   Una hoja a altura completa se mete debajo de la barra del navegador. dvh es
   la unidad correcta; el vh queda como respaldo para quien no la soporte.
   ---------------------------------------------------------- */
.fullh { height: 100vh }
@supports (height: 100dvh) { .fullh { height: 100dvh } }

/* ----------------------------------------------------------
   Movimiento

   Solo se animan transform y opacity. Las salidas son siempre más rápidas que
   las entradas: una salida lenta es el motivo principal de que una interfaz se
   sienta pesada.

   Los datos en vivo NO se animan. Un número que se actualiza hace crossfade en
   180ms; nunca cuenta hacia arriba, ni destella, ni se desliza.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------
   `[hidden]` tiene que ganar

   El navegador trae `[hidden]{display:none}`, pero es una regla suya y
   CUALQUIER regla de autor que ponga `display` le gana. `.fopt{display:flex}`
   la tapaba, así que marcar una opción como `hidden` no la escondía: el filtro
   del selector de municipios escondía las 44 opciones y las 44 seguían a la
   vista, sin un solo error en consola.

   Es el mismo tipo de trampa que los otros fixes de este archivo: el
   comportamiento nativo existe, pero se pierde en cuanto alguien estiliza el
   elemento. Con `!important` acá, `el.hidden = true` significa lo que dice en
   todo el sistema.
   ---------------------------------------------------------- */
[hidden] { display: none !important }