/* ============================================================
   FUNDACIÓN BANÚS · BASES DEL CONCURSO
   Solo maquetación de esta página. Ni un color ni un cuerpo se
   definen aquí: todo sale de los tokens del sistema. La página se
   lee en pantalla (superficie negra) y se guarda como PDF con un
   clic (superficie papel, ver @media print al final).
   ============================================================ */

.doc {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.doc__cabecera { padding-top: var(--space-lg); }

/* El título de las bases va en voz editorial, como el de la
   convocatoria de la home, pero a cuerpo de rótulo de documento. */
.doc__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-display);
  line-height: var(--lh-titulo);
  margin: var(--space-md) 0 0;
}

.doc__subtitulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--texto-editorial);
  margin: var(--space-2xs) 0 0;
}

/* Entradilla: la convocatoria y la dotación en prosa. */
.doc__intro {
  margin-top: var(--space-xl);
  max-width: var(--medida);
}

.doc__intro p { margin: 0; font-weight: var(--fw-extralight); color: var(--texto-tenue); }
.doc__intro p + p { margin-top: var(--space-md); }

/* ---------- Ficha de dotación ----------
   Mismo lenguaje que .convocatoria__ficha de la home: reglas finas,
   pares etiqueta-valor, importes en Public Sans light y en blanco
   roto —dato, no etiqueta de precio—. Aquí como banda a lo ancho. */
.dotacion {
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-top: var(--linea) solid var(--borde);
}

.dotacion__dato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-bottom: var(--linea) solid var(--borde);
}

.dotacion dt {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.dotacion dd {
  margin: 0;
  font-family: var(--font-texto);
  font-weight: var(--fw-light);
  font-size: var(--text-cuerpo);
  line-height: 1.3;
  color: var(--texto);
  text-align: right;
}

.dotacion__dato--fecha dd {
  font-size: var(--text-cuerpo);
  color: var(--texto-tenue);
}

.dotacion__nota {
  margin: var(--space-md) 0 0;
  font-size: var(--text-menor);
  color: var(--texto-tenue);
  max-width: var(--medida);
}

/* ---------- Acciones (descargar / imprimir) ---------- */
.doc__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ---------- Articulado (las diez bases) ----------
   El componente .lista-num del sistema, adaptado a prosa legal: el
   número en rosa Banús —cifra, no texto—, el articulado a la
   derecha dentro de la medida legible. Cada base es un artículo con
   filete arriba, como el colofón de un catálogo. */
.articulado {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: base;
}

.articulado > li {
  counter-increment: base;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, var(--medida));
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-lg);
  border-top: var(--linea) solid var(--borde);
  break-inside: avoid;
}

.articulado > li:last-child { border-bottom: var(--linea) solid var(--borde); }

.articulado > li::before {
  content: counter(base, decimal-leading-zero);
  font-family: var(--font-texto);
  font-size: var(--text-menor);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--acento-display);
  padding-top: 0.2em;
}

.articulado__texto > * { margin: 0; }
.articulado__texto > * + * { margin-top: var(--space-sm); }
.articulado__texto p { color: var(--texto-tenue); }

/* Enunciado breve de la base en versalitas, cuando lo hay
   (p. ej. "El tema será libre."): destaca sin cambiar de color. */
.articulado__enunciado {
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-menor);
  color: var(--texto);
}

/* ---------- Subpuntos (exigencias formales a–g) ----------
   Letra minúscula en el acento de texto, sangría fina. La lista
   respira dentro del artículo sin competir con la numeración madre. */
.subpuntos {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  counter-reset: sub;
  display: grid;
  gap: var(--space-sm);
}

.subpuntos > li {
  counter-increment: sub;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  color: var(--texto-tenue);
}

.subpuntos > li::before {
  content: counter(sub, lower-alpha) ")";
  font-weight: var(--fw-medium);
  color: var(--acento-texto);
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .dotacion__dato {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }
  .dotacion dd { text-align: left; }

  .articulado > li { grid-template-columns: 2.25rem 1fr; gap: var(--space-sm); }
}

/* ============================================================
   IMPRESIÓN · "Guardar como PDF"
   El documento se va a papel: fondo blanco roto, tinta negra
   cálida y acento vino (el rosa legible sobre claro, el mismo que
   el sistema usa en superficie arena). Se retira todo lo que es
   navegación de pantalla. El resultado es una descarga con la marca
   de la Fundación, no una captura de la web oscura.
   ============================================================ */
@media print {
  :root,
  [data-surface] {
    --surface:         #F2F0E6;   /* blanco roto */
    --texto:           #1A1A1A;   /* negro cálido */
    --texto-tenue:     #3B3A3D;   /* gris piedra: letra pequeña legible */
    --texto-editorial: #3B3A3D;
    --borde:           rgba(26, 26, 26, 0.22);
    --borde-fuerte:    rgba(26, 26, 26, 0.45);
    --acento-display:  #6E4A55;   /* vino: legible sobre papel */
    --acento-texto:    #6E4A55;
  }

  @page { margin: 18mm 16mm; }

  html, body { background: #fff; }

  /* Fuera todo lo que es interfaz de pantalla. */
  .salto,
  .cabecera,
  .nav,
  .doc__acciones,
  .nav-flotante { display: none !important; }

  /* Los acentos y filetes deben imprimirse aunque el navegador
     recorte fondos por defecto. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  main { padding: 0; }

  /* El gran aire vertical del sistema (--seccion-y, hasta 9rem) es para
     la pantalla; en papel deja bandas casi vacías y descuadra los
     saltos de página. Aquí se recorta a una distancia editorial para
     que el documento fluya lleno, sin portada semivacía. */
  .seccion { padding-block: var(--space-md); }
  .doc__cabecera { padding-top: 0; }
  .legal { padding-block: var(--space-lg); }

  /* La entradilla va extra-light (200) en pantalla; sobre papel blanco a
     ese cuerpo el 200 queda desvaído, así que en impresión vuelve al
     peso normal. */
  .doc__intro p { font-weight: var(--fw-regular); }
  /* El margen superior del articulado va inline (space-xl) para la
     pantalla; en papel se recorta —con !important porque el inline le
     gana a una regla normal— para que el rótulo "BASES" y su primera
     base quepan juntos en la portada. */
  .articulado { margin-top: var(--space-md) !important; }

  /* Las bases largas (la 3ª, con sus subpuntos) no caben enteras en el
     hueco que queda al pie: con break-inside:avoid saltaban de golpe a
     la página siguiente y dejaban el gran vacío que rompía la armonía.
     Se deja que un artículo pueda continuar en la hoja siguiente; solo
     se protege de partirse lo corto: la ficha y cada subpunto suelto. */
  .articulado > li { break-inside: auto; }
  .dotacion,
  .subpuntos > li { break-inside: avoid; }

  /* Nada de líneas huérfanas o viudas sueltas al cambiar de hoja. */
  p, li { orphans: 3; widows: 3; }

  /* La portada (título + convocatoria + dotación) se queda sola en la
     primera hoja y el articulado abre página nueva. Así el rótulo
     "BASES" no queda colgando al pie con su primer filete y la base 01
     saltando sola a la página siguiente —el desajuste que rompía la
     armonía—. break-before:page sí lo respeta el motor de impresión,
     al contrario que break-after:avoid. */
  section[aria-labelledby="articulado-titulo"] { break-before: page; }