/* ═══════════════════════════════════════════════════════════════
   base.css — Reset, tipografía y accesibilidad (NFR-1, NFR-3)
   ═══════════════════════════════════════════════════════════════ */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-ink-900);
  min-height: 100vh;
}

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  color: var(--c-ink-900);
  margin: 0 0 var(--s-4);
  font-weight: 700;
  letter-spacing: -0.011em;
}
h1 { font-size: var(--t-3xl); margin-bottom: var(--s-5); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-brand-700); text-underline-offset: 3px; }
a:hover { color: var(--c-brand-800); }

strong { font-weight: 700; }
small { font-size: var(--t-sm); }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
li { margin-bottom: var(--s-2); }

code, pre { font-family: var(--font-mono); font-size: 0.88em; }

img { max-width: 100%; height: auto; display: block; }

/* ── Foco visible: nunca se elimina el contorno (NFR-1) ── */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

/* ── Utilidades ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--s-4);
  z-index: 100;
  background: var(--c-brand-800);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: var(--s-2); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.muted   { color: var(--c-ink-500); }
.small   { font-size: var(--t-sm); }
.mt-16   { margin-top: var(--s-4); }
.mt-24   { margin-top: var(--s-6); }
.mt-32   { margin-top: var(--s-8); }
.mt-40   { margin-top: var(--s-10); }
.stack > * + * { margin-top: var(--s-2); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-brand-700);
  margin-bottom: var(--s-2);
}

.lead {
  font-size: var(--t-lg);
  color: var(--c-ink-700);
  max-width: 68ch;
  margin-bottom: var(--s-6);
}

/* ═══════════════════════════════════════════════════════════════════
   EL ATRIBUTO hidden TIENE QUE OCULTAR SIEMPRE
   ───────────────────────────────────────────────────────────────
   El navegador trae su propia regla `[hidden] { display: none }`, pero las
   hojas de estilo del autor pesan MÁS que las del navegador. Así que en
   cuanto una clase fija `display` en ese mismo elemento —`display: flex`,
   `display: grid`—, la regla propia gana y el atributo `hidden` deja de
   hacer nada.

   POR QUÉ ESTA REGLA ES IMPRESCINDIBLE
   El JavaScript muestra y oculta las pantallas poniendo `elemento.hidden`.
   Sin esta regla, el código parece correcto, la lógica funciona por debajo,
   y lo único que se ve es un cargador girando para siempre —porque el
   cargador, que ocupa toda la pantalla, nunca se retira—. Es un fallo que
   cuesta muchísimo encontrar, porque el error no está donde se mira.

   El `!important` es necesario: sin él, las reglas de clase de las hojas
   que se cargan después (espacio.css, panel.css) seguirían ganando por
   orden de aparición.

   Lo comprueba `herramientas/revisar-ocultado.js`.
   ═══════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ── Secciones ── */
.section { padding: var(--s-10) 0 var(--s-16); }

/* ── Responsividad (NFR-3: gama media y baja) ── */
@media (max-width: 900px) {
  :root {
    --t-4xl: 2rem;      /* H1 de 40 a 32px */
    --t-3xl: 1.625rem;  /* H2 de 32 a 26px */
    --t-2xl: 1.375rem;  /* H3 de 24 a 22px */
    --logo-height: 40px;
  }
  .section { padding: var(--s-6) 0 var(--s-12); }
}

@media (max-width: 560px) {
  :root {
    --t-4xl: 1.75rem;   /* H1 de 32 a 28px */
    --t-3xl: 1.5rem;    /* H2 de 26 a 24px */
    --t-xl: 1.125rem;
    --logo-height: 36px;
  }
  .wrap { padding-inline: var(--s-4); }
  /* Los botones conservan el alto cómodo al tacto, pero reducen el
     relleno lateral: en 360px de ancho, un relleno de 32px por lado
     desperdicia casi una quinta parte de la pantalla. */
  .btn { padding: var(--s-4) var(--s-5); }
}

/* ── Pie institucional ──
   Fondo oscuro oficial (#191919) con texto claro, según el sistema de
   marca de IELCO. */
.footer {
  background: #191919;
  color: #E5E5E5;
  padding: var(--s-10) 0;
  margin-top: var(--s-10);
}
.footer strong { color: #FFFFFF; }
.footer p { margin-bottom: var(--s-2); }
.footer .muted { color: #C4C8CF; }
.footer a { color: #8FB8E8; }
.footer a:hover { color: #FFFFFF; }

/* Imprime solo lo esencial */
@media print {
  .topbar, .filters, .wizard-actions, .canvas-side, .footer, .toast, .navtoggle { display: none !important; }
  body { background: #fff; }
  .section[hidden] { display: none !important; }
}