/* =========================================================================
   NOEMA · Páginas utilitarias  ·  Uso de datos (16) y Accesibilidad (17)

   Va después de noema.css. No redeclara ni un color ni un tamaño de texto:
   todo sale de las fichas del sistema. Una sola hoja para las dos páginas,
   porque comparten estructura y son las únicas del sitio sin paleta.

   POR QUÉ NO LLEVAN PALETA. No son secciones del proceso creativo, así que
   no consumen ninguna de las cinco. Es el mismo razonamiento por el que el
   enlace «Sobre» de la barra usa la rampa neutra del grafito: darle una
   paleta a algo que no es una fase rompe la codificación que el sitio
   enseña sola. Aquí solo hay papel, grafito y los componentes de acción,
   que nunca cuentan para esa regla.

   ORDEN DEL ARCHIVO
   01 · Cabecera
   02 · Listas de comprobación
   03 · Lista de definición
   04 · Notas y excepciones
   05 · Puntos de corte
   06 · Impresión
   ========================================================================= */


/* 01 · CABECERA =========================================================== */
/* Más corta que el héroe de las páginas de contenido: quien llega aquí viene
   del pie buscando un dato concreto, no a que lo reciban. */
.utilitaria-cabeza {
  padding-block: calc(var(--alto-nav) + var(--e8)) var(--e8);
}
.utilitaria-cabeza .display-l { text-transform: uppercase; letter-spacing: .005em; }


/* 02 · LISTAS DE COMPROBACIÓN ============================================= */
/* Cada punto es una afirmación con su prueba debajo. La afirmación en tono
   principal y la prueba más apagada, para que el ojo pueda recorrer solo las
   afirmaciones si quiere. */
.lista-datos {
  max-width: 74ch;
  margin-top: var(--e6);
}
.lista-datos li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}
.lista-datos li + li {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-sutil);
}
.lista-datos b {
  display: block;
  font-family: var(--grot);
  font-size: 17px; font-weight: 600;
  color: var(--texto-principal);
}
/* Hijo directo, o el selector alcanza también al span del ícono y lo
   convierte en palabra. Es la misma trampa que ya documenta sobre.css. */
.lista-datos > li > div > span {
  display: block;
  font-family: var(--grot);
  font-size: 15px; line-height: 1.6;
  color: var(--texto-secundario);
  margin-top: var(--e2);
}
/* «Cómo comprobarlo» va en cursiva y el nombre técnico en monoespacio: es
   una instrucción para ejecutar, no prosa. */
.lista-datos em { font-style: italic; color: var(--texto-principal); }
/* El monoespacio sirve a las dos listas: en «lo que no hace» marca el nombre
   técnico que hay que buscar en el código, y en la lista de Google Sheets
   marca la extensión del archivo. En los dos casos es algo que se teclea o se
   busca literal, no prosa. */
.lista-datos code,
.lista-pendientes code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--superficie-tenue);
  border-radius: var(--r-s);
  padding: 1px 5px;
}


/* 03 · LISTA DE DEFINICIÓN ================================================ */
.limite-datos { margin: 0; display: grid; gap: var(--e5); max-width: 74ch; }
.limite-datos > div { padding-top: var(--e5); border-top: 1px solid var(--borde-sutil); }
.limite-datos dt {
  font-family: var(--grot);
  font-size: 11px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin-bottom: var(--e3);
}
.limite-datos dd {
  margin: 0;
  font-family: var(--grot);
  font-size: 16px; line-height: 1.6;
  color: var(--texto-secundario);
}


/* 04 · NOTAS Y EXCEPCIONES ================================================ */
/* Borde punteado, igual que los bloques de estado editorial del resto del
   sitio: se lee como «esto todavía no está cerrado» sin decirlo. */
.nota-utilitaria {
  margin-top: var(--e7);
  border: 1.5px dashed var(--borde-fuerte, var(--borde-sutil));
  border-radius: var(--r-m);
  padding: var(--e6);
  max-width: 74ch;
}
.lista-pendientes li + li { margin-top: var(--e4); }
.lista-pendientes li {
  font-family: var(--grot);
  font-size: 15px; line-height: 1.6;
  color: var(--texto-secundario);
}
.lista-pendientes b { color: var(--texto-principal); font-weight: 600; }

/* La excepción declarada lleva filete superior en grafito y no en color: el
   sistema ya usa el color para significar, y aquí significaría «alerta»,
   que es justo lo que estas dos excepciones NO son. Están asumidas. */
.caja-excepcion { border-top: 5px solid var(--grafito); padding-top: var(--e6); }


/* 05 · PUNTOS DE CORTE ==================================================== */
@media (max-width: 1023px) {
  .utilitaria-cabeza { padding-block: calc(var(--alto-nav) + var(--e7)) var(--e7); }
}

@media (max-width: 767px) {
  .lista-datos li { gap: var(--e3); }
  .nota-utilitaria { padding: var(--e5); }
}


/* 06 · IMPRESIÓN ========================================================== */
/* Son las dos páginas del sitio que alguien puede querer archivar en papel,
   así que se imprimen limpias desde el primer día. */
@media print {
  @page { margin: 18mm 16mm; }
  .nav, .hoja-menu, .salto, .pie { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  body { background: none !important; font-size: 11pt; }
  .inverso, .superficie.inverso {
    background: none !important;
    color: #000 !important;
    border: 1px solid #ccc;
  }
  .inverso .parrafo, .inverso .micro { color: #000 !important; }
  .contenido { max-width: none; padding-inline: 0; }
  .lista-datos li, .limite-datos > div, .nota-utilitaria, .caja-excepcion { break-inside: avoid; }
}