/* ═══════════════════════════════════════════════════════════════════════════
   COSMERIUM ERA III · NCRT-3
   voz.css — LAS DOS VOCES, DECLARADAS UNA SOLA VEZ

   Quinta hoja de la cadena, entre los componentes y la hoja de página:

        tokens → reset → chrome → components → VOZ → [página] → print

   ═══ POR QUÉ EXISTE ESTE FICHERO ═════════════════════════════════════════
   `.sys`, `.kicker`, `.title`, `.hint`, `.prose`, `.calle` y `.errata` no son
   componentes: son la tipografía de las DOS VOCES de §1.4 aplicada a un
   bloque. Por eso ninguna acabó en components.css y, sin sitio propio, cada
   pantalla se copió su juego dentro de su `<style>`: cinco copias de `.kicker`,
   seis de `.sys`, cuatro de `.prose` y `.title`, dos de `.calle` y dos de
   `.errata`. Y como una copia inline gana por cascada a cualquier hoja, el
   arreglo del kicker de 12→14 px hubo que hacerlo cinco veces —y en una de
   ellas se olvidó `.prose`, que quedó con otra interlínea.

   El Anexo C hace de esto el prerrequisito de fase 0 y tiene razón por un
   motivo comprobable: el parche de `.appbar__tools` vivió tres meses en tres
   plantillas y faltaba en las otras cuatro exactamente por esta razón.

   REGLA A PARTIR DE AQUÍ
   Ninguna plantilla vuelve a declarar estas siete clases. Lo que una pantalla
   sí puede hacer —y hace, con su motivo escrito al lado— es AÑADIR su delta:
   el portal le pone al kicker su filete de 28 px y la familia de UI; el Manual
   de Operación Ciudadana le sube a la prosa la interlínea a --lh-loose porque
   son 2.173 líneas de lectura seguida; el dictamen le da a `.dic__sec > .sys`
   un filete inferior. Eso es composición de página. Repetir el tamaño, el
   peso, el tracking y el color no lo es.

   ═══ CERO COLORES ESCRITOS A MANO ════════════════════════════════════════
   Todo sale de tokens.css. Los contrastes anotados están MEDIDOS en Chrome
   sobre el fondo compuesto real, no calculados sobre el token aislado.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1 · VOZ DEL SISTEMA · §1.4

   Institucional, seca, mayúsculas, monoespaciada, sin sujeto. Nunca comparte
   bloque con la voz de calle: el Registro no tutea y la calle no numera.
   ═══════════════════════════════════════════════════════════════════════════ */

.sys{
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-data);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.sys b{ color: var(--text-2); font-weight: 500 }


/* ═══════════════════════════════════════════════════════════════════════════
   2 · VOZ DE CALLE · §1.4 y §2.2 regla 3

   Segunda persona, caja normal, Barlow a 17 px. De aquí NO baja: una
   tipografía de 13 px en caja normal deja de ser una persona hablándote y
   pasa a ser una nota al pie. Un screamsheet es prosa; una nota de corrección
   es prosa; una biografía es prosa.

   `.prose` es la voz de calle en el lienzo (portal, aval, normativa).
   `.calle` es la voz de calle DENTRO de una pantalla del sistema —la mesa del
   Verificador y la bandeja—, donde el peso sube a 500 para que se distinga
   del gris institucional que la rodea.
   ═══════════════════════════════════════════════════════════════════════════ */

.prose{
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-2);
  max-width: var(--measure);
  margin: 0;
}
.prose em{ color: var(--text); font-style: italic }
.prose + .prose{ margin-top: var(--sp-3) }

.calle{
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  text-transform: none;
  letter-spacing: var(--tr-none);
  color: var(--text-2);
}
.calle b{ color: var(--text); font-weight: 600 }


/* ═══════════════════════════════════════════════════════════════════════════
   3 · RÓTULOS DE SECCIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

/* KICKER · 14 px Y PESO 600, QUE ES EL MÍNIMO QUE SU PROPIO COLOR PERMITE.
   El kicker va en --accent, y la tabla de §11.1 es tajante sobre ese par:
   «--k-red / --k-carbon · 4.3:1 · ≥14px peso 600. NUNCA MICROTEXTO, NUNCA
   PROSA». A 12 px (--fs-2xs) era exactamente el caso prohibido —4,17:1
   medido— y es el elemento que abre todas las pantallas del embudo.
   Se sube al mínimo legal en vez de apagar el acento: el rótulo de sección
   tiene que seguir siendo lo primero que se ve. */
.kicker{
  margin: 0 0 var(--sp-2);
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.title{
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-snug);
  text-transform: uppercase;
  color: var(--text);
}

.hint{
  margin: var(--sp-2) 0 0;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · HONESTIDAD COMO CHROME · §10.11 · DOS BADGES, NO UNA

   Mostrar un dato con autoridad y que esté mal es peor que mostrarlo feo. La
   badge lo declara al lado del dato, con el número de BUG en el `title`.

   PERO ERAN DOS COSAS DISTINTAS CON LA MISMA PINTA, Y ESO ES EL FALLO:

     `.errata--hueco`   AGUJERO DE FIDELIDAD. La web dice algo que el servidor
                        NO ejecuta: «DATO NO VERIFICADO CONTRA EL SERVIDOR»,
                        «NO LA APLICA EL SERVIDOR», «NO LO DISPARA NADIE».
                        Es una alarma: hay una promesa sin respaldo.

     `.errata--origen`  PROCEDENCIA DE REGLA. La regla SÍ se ejecuta; lo que
                        se declara es de dónde sale y por qué no coincide con
                        el libro: «DIVERGENCIA CON CYBERPUNK RED», «RESOLUCIÓN
                        ADOPTADA · R1», «REGLA ADOPTADA, NO HEREDADA».
                        No es una alarma: es una cita, y una decisión firmada.

   Un agujero y una firma no pueden verse igual. Se separan por TRES vías a la
   vez, porque §11.2 prohíbe que el estado dependa sólo del color: color
   (--warn / --text-3), trazo (continuo / discontinuo) y glifo (⚠ / §, que va
   en el texto de la plantilla y por tanto también lo lee un lector).

   TAMAÑO: 12 px, no 11. El suelo de 11 px de §11.2 es «sólo para OSD
   decorativo con aria-hidden», y esto es lo contrario de decorativo. Además
   --warn (--k-orange) tiene su propia condición en §11.1 —«6.4:1, ≥14px»— y
   a 11 px medía 5,78:1 sobre la superficie de la tarjeta: por eso la variante
   de alarma lleva el naranja en el TRAZO y el texto en --text, que se lee a
   13,3:1. El color marca; el color no escribe (§3.4.6). */

.errata{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--sp-2);
  padding: 1px 6px;
  border: var(--bw-hair) solid var(--text-3);
  background: transparent;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: var(--lh-data);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-2);
  cursor: help;
}

/* AGUJERO DE FIDELIDAD · alarma. Trazo continuo en --warn, filete grueso a la
   izquierda y un lavado del 10 % que la separa del fondo de la tarjeta. */
.errata--hueco{
  border-color: var(--warn);
  border-left-width: var(--bw-3);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--text);
}

/* PROCEDENCIA DE REGLA · cita. Trazo DISCONTINUO —el gesto de la anotación al
   margen, no el del aviso— y sin relleno: no interrumpe la lectura del dato,
   la acompaña. */
.errata--origen{
  border-style: dashed;
  border-color: var(--text-3);
  background: transparent;
  color: var(--text-2);
}

/* La badge se imprime: es un compromiso fechado, no un adorno de pantalla. En
   papel el naranja de fósforo no existe, así que la diferencia entre las dos
   la sostienen el trazo y el glifo, que es justo para lo que se eligieron. */
@media print{
  .errata{ border-color: var(--k-ink); background: transparent; color: var(--k-ink) }
  .errata--hueco { border-style: solid;  border-left-width: 1.2pt }
  .errata--origen{ border-style: dashed }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · ≤1023px

   El punto de corte es 1023 y no 1024 en TODO el proyecto (chrome.css,
   components.css y pages/wizard.css). Con 1024 aquí, en un viewport de
   exactamente 1024 px el titular ya estaba encogido mientras el chasis seguía
   en escritorio: un solo píxel de solape es un modo entero que nadie diseñó.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px){
  .title{ font-size: var(--fs-3xl) }
}