/* ============================================================================
   BASE — reset, elementos HTML y utilidades
   Ver docs/09-sistema-diseno.md
   ========================================================================== */

/* ── Reset moderno ───────────────────────────────────────────────────────── */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa el desplazamiento al saltar a un ancla con cabecera fija. */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
}

body {
  min-height: 100dvh;          /* dvh evita el salto de la barra del navegador móvil */
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  color: var(--texto);
  background-color: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ── Titulares ───────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  line-height: var(--interlineado-ajustado);
  font-weight: var(--peso-semi);
  letter-spacing: -0.011em;
  color: var(--texto);
  text-wrap: balance;          /* Evita titulares con una palabra suelta en la última línea */
}

h1 { font-size: var(--texto-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--texto-2xl); letter-spacing: -0.016em; }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

p { text-wrap: pretty; }

/* ── Enlaces ─────────────────────────────────────────────────────────────── */

a {
  color: var(--primario);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transicion-rapida);
}

a:hover { color: var(--primario-hover); }

/* ── Foco ────────────────────────────────────────────────────────────────────
   Anillo muy visible: en una pantalla de voto, saber dónde está el foco
   del teclado es un requisito de accesibilidad, no un detalle estético.   */

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* Solo se quita el anillo por defecto donde se sustituye por uno propio. */
:focus:not(:focus-visible) { outline: none; }

/* ── Selección de texto ──────────────────────────────────────────────────── */

::selection {
  background-color: var(--primario-suave);
  color: var(--texto);
}

/* ── Listas de contenido ─────────────────────────────────────────────────── */

.contenido ul,
.contenido ol {
  padding-left: var(--e-6);
  display: grid;
  gap: var(--e-2);
}

.contenido > * + * { margin-top: var(--e-4); }

.contenido {
  max-width: var(--ancho-lectura);
  color: var(--texto-suave);
}

.contenido h2,
.contenido h3 {
  margin-top: var(--e-8);
  color: var(--texto);
}

/* ── Reglas y código ─────────────────────────────────────────────────────── */

hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin-block: var(--e-8);
}

code, kbd, samp {
  font-family: var(--fuente-mono);
  font-size: 0.9em;
  background-color: var(--fondo-sutil);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 0.1em 0.35em;
}

/* ============================================================================
   ACCESIBILIDAD
   ========================================================================== */

/* Texto solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace «Saltar al contenido»: primer elemento del body, visible al tabular. */
.saltar-contenido {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: calc(var(--capa-modal) + 1);
  transform: translateY(-200%);
  padding: var(--e-3) var(--e-5);
  background-color: var(--primario);
  color: var(--sobre-primario);
  border-radius: var(--radio-md);
  font-weight: var(--peso-semi);
  text-decoration: none;
  box-shadow: var(--sombra-lg);
  transition: transform var(--transicion);
}

.saltar-contenido:focus {
  transform: translateY(0);
  color: var(--sobre-primario);
}

/* Respeta a quien haya pedido menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modo de alto contraste del sistema. */
@media (prefers-contrast: more) {
  :root {
    --borde: var(--n-500);
    --borde-fuerte: var(--n-700);
    --texto-suave: var(--n-800);
  }
}

/* ============================================================================
   UTILIDADES
   Pocas y con nombre explícito. No es una librería de utilidades: si algo se
   repite tres veces, se convierte en componente.
   ========================================================================== */

.apilar        { display: grid; gap: var(--e-4); }
.apilar--sm    { gap: var(--e-2); }
.apilar--lg    { gap: var(--e-6); }
.apilar--xl    { gap: var(--e-8); }

.fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.fila--separada  { justify-content: space-between; }
.fila--derecha   { justify-content: flex-end; }
.fila--centrada  { justify-content: center; }
.fila--arriba    { align-items: flex-start; }

.texto-suave     { color: var(--texto-suave); }
.texto-tenue     { color: var(--texto-tenue); font-size: var(--texto-sm); }
.texto-centrado  { text-align: center; }
.texto-sm        { font-size: var(--texto-sm); }
.texto-lg        { font-size: var(--texto-lg); }
.peso-medio      { font-weight: var(--peso-medio); }
.peso-semi       { font-weight: var(--peso-semi); }
.numerico        { font-variant-numeric: tabular-nums; }

.ancho-lectura   { max-width: var(--ancho-lectura); }
.ancho-formulario{ max-width: var(--ancho-formulario); }

.sin-margen      { margin: 0; }
.margen-arriba   { margin-top: var(--e-6); }

/* Rejilla que se adapta sola, sin media queries. */
.rejilla {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.rejilla--estrecha {
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

/* Oculta en pantallas pequeñas sin sacar el elemento del DOM. */
@media (max-width: 767px) {
  .solo-escritorio { display: none !important; }
}

@media (min-width: 768px) {
  .solo-movil { display: none !important; }
}

/* ----------------------------------------------------------------------------
   EL ATRIBUTO hidden GANA SIEMPRE

   La regla del navegador para [hidden] es `display: none`, y la pierde en cuanto
   una clase fija su propio `display` — que es lo que hace .campo__error con
   `display: flex`. El resultado: elementos marcados como ocultos que se ven.

   Se detectó el 18/08/2026 en la composición de candidaturas: bajo un campo
   correctamente relleno aparecía en rojo «elija un socio de la lista». Un error
   que no lo es asusta más que uno real, porque no hay forma de quitarlo.
   -------------------------------------------------------------------------- */

[hidden] { display: none !important; }