/*
  Los tokens del panel de Guardianes — configuración visual central.

  Cambiar un color aquí lo propaga a todas las páginas de /guardianes.
  (La config de reglas del MOTOR no vive aquí: eso es backend. Aquí solo
  lo visual: paleta, semáforo de fiabilidad, medidas.)
*/
:root {
  /* Paleta del Reino (Grimorio §8) */
  --tinta: #2c1e0f;
  --pergamino: #f4ede0;
  --oro: #b8860b;
  /* EL ACENTO DE LOS BOTONES PRINCIPALES. No es --oro y no debe apuntar a él:
     son dos oros distintos escritos a mano desde siempre —#a3822c aquí,
     #b8860b allí— y --oro lo usan títulos, bordes y botones secundarios, así
     que fundirlos repintaría medio panel para ahorrar una línea. Nace como
     token con SU valor de hoy, ni un tono movido; que deba parecerse más a
     --oro es una decisión de diseño y se toma aparte. */
  --acento: #a3822c;
  /* EL COLOR DE LOS ICONOS PROPIOS. El nombre no se compromete con ningún
     color: es "el color de los iconos", y va a moverse mientras se trabajan
     los estilos. Un --oro-icono habría quedado mintiendo el primer día que
     dejara de ser oro, que fue este.

     Va aparte de --oro, y no es lo mismo: --oro lo usan títulos de sección,
     bordes y botones, así que probar un color de icono a través de él
     repintaría medio panel cada vez.

     Es el defecto, no una imposición — pero OJO CON CÓMO SE PISA. El icono se
     pinta con currentColor, así que hace falta cambiarle el `color` A ÉL: una
     regla que apunte al icono y gane en especificidad, como
     `.accion.bien .marca .icono-propio { color: … }` en actualizaciones.html.

     Poner `color` en el contenedor NO basta, aunque lo pareciera: .icono-propio
     DECLARA su color unas líneas más abajo, y una declaración que aplica al
     elemento gana siempre a lo que herede del padre. Aquí decía justo eso —
     "cualquier sitio que ponga color en su contexto gana"—, y era falso: quien
     lo siguiera al pie de la letra tendría iconos que no cambian de color y
     ninguna pista de por qué. */
  --color-iconos: #cd4946;

  /* LAS DOS TIPOGRAFÍAS, y la diferencia que importa no es el aspecto: es que
     UNA TIENE PESOS INTERMEDIOS Y LA OTRA NO. Medido el 24/08/2026 contando
     tinta en un canvas: la monoespaciada del sistema pinta EXACTAMENTE lo mismo
     con 400 que con 500, y lo mismo con 600, 700 y 900 — solo tiene Regular y
     Bold. --fuente-texto sí da los cinco escalones.
     Así que un `font-weight: 500` sobre monoespaciada no hace nada y parece que
     el CSS no se aplica. Si hace falta marcar algo un poco, tiene que estar en
     --fuente-texto o no hay término medio. */
  --fuente-texto: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: ui-monospace, monospace;
  --papel: #ffffff;
  --borde: #e4d9c4;
  --tenue: #7a6a55;
  /* LOS DOS TONOS DE UNA FILA, que dicen cosas distintas y por eso son dos.
     Estaban escritos a mano ONCE VECES entre Antorchas, Claves y Esferas: el
     mismo par de valores repetido tabla por tabla, que es como una paleta se
     desincroniza sin que nadie lo note.
     «Apuntada» y no «encima» porque no es solo el ratón: la fila del Perfil que
     tiene su tarjeta abierta lleva este mismo tono, y por la misma razón — dice
     «esta fila», la de la que estamos hablando. Está decidido así en
     antorchas.html, y ahí se explica que con cuatro secuencias desplegadas se
     perdía de vista de cuál colgaba la tarjeta. */
  --fila-apuntada: #faf5ea;
  --fila-seleccionada: #fdf6e3;
  --sombra: #00000018;
  /* EL FONDO DE LO QUE ESPERA: cajas de aviso, campos en reposo, filas sin
     dato. Vivía en herramientas.css, que solo cargan las pantallas del taller,
     mientras el visor lo usaba con un color de reserva escrito a mano un poco
     distinto (#f6f4ef): un nombre valiendo dos cosas según la pantalla. Sube
     aquí con el valor DECLARADO, no con el de reserva, porque el declarado era
     el que alguien eligió; el visor se aclara un punto y es lo correcto. */
  --pendiente: #faf7f0;
  /* Negros con transparencia, que no son tinta: son veladuras. Aquí importa
     más que en ningún otro token que estén nombrados, porque sobre un fondo
     oscuro un negro translúcido no atenúa — desaparece. Es lo primero que se
     rompe el día de [T-a019]. */
  --velo: #00000059;          /* el fondo del diálogo modal */
  --fondo-codigo: #00000026;  /* el resalte de `code` en línea */

  /* Semáforo de fiabilidad de la hora
     (ajustar aquí si el amarillo se ve mal → llevar a naranja) */
  --fiable-confirmada: #2e7d32;  /* verde */
  --fiable-aproximada: #c9962b;  /* amarillo/ámbar */
  --fiable-desconocida: #b23b3b; /* rojo */

  /* ── EL SEMÁFORO DE LAS CAPAS ────────────────────────────────
     El indicador de estado de TODAS las capas del método —Actualizaciones
     hoy; Backups, Seguridad y Espacio cuando lleguen—. Vive aquí y no en
     herramientas.css porque no pertenece a esa pantalla: pertenece al panel.

     NOMBRADOS POR SIGNIFICADO Y NO POR COLOR. El motor devuelve "bien",
     "atencion", "mal" o "pendiente" (servicios/actualizaciones.py::semaforo),
     así que un --semaforo-verde obligaría a traducir en cada pantalla — y
     mentiría el día que el tono se mueva, como le pasó a --oro-icono cuando
     dejó de ser oro.

     ⚠️ NO SON los --fiable-*, aunque hoy valgan exactamente lo mismo. El
     valor coincide A PROPÓSITO, para que el panel hable un solo idioma de
     colores, pero dicen cosas distintas:

         --fiable-*   "este DATO es dudoso"        → propiedad de un dato
         --semaforo-* "esto REQUIERE atención"     → estado del sistema

     Una hora de nacimiento aproximada no es una capa en ámbar, y un servidor
     con parches pendientes no es un dato poco fiable. El día que uno de los
     dos lenguajes quiera otro tono, tiene que poder moverse SOLO. Es el mismo
     caso de --color-iconos y --oro: mismo valor escrito, tokens distintos,
     ninguno arrastra al otro. Unificarlos porque "son iguales" es la
     regresión que este párrafo viene a evitar. */
  --semaforo-bien: #2e7d32;      /* al día, nada que hacer */
  --semaforo-atencion: #c9962b;  /* hay algo esperando, sin urgencia */
  --semaforo-mal: #b23b3b;       /* requiere mirarlo, o estamos ciegos */
  --semaforo-pendiente: #7a6a55; /* no hay dato: ni bien ni mal, se ignora */
  /* Y EL FONDO PÁLIDO DE CADA ESTADO, que acompaña al color pero no es él: el
     borde y el punto van al tono fuerte y la caja a este lavado. Estaban a mano
     seis veces entre herramientas.css y actualizaciones.html, y son tres pares
     que tienen que moverse juntos — un fondo cambiado con su borde viejo no se
     lee mal, se lee sucio.
     No se derivan del tono fuerte con color-mix a propósito: estos tres se
     eligieron a ojo y no salen de una fórmula, así que calcularlos los movería
     hoy mismo. El día que se rehaga la paleta se decide si pasan a derivarse. */
  --semaforo-bien-fondo: #eaf3ea;
  --semaforo-atencion-fondo: #faf2e0;
  --semaforo-mal-fondo: #f7eaea;

  /* ── EL CUARTO ESTADO DE UNA CORAZA ───────────────────────────
     El Mapa de Corazas pinta sus siete franjas con tres colores del semáforo
     —activa en rojo, en proceso en ámbar, disponible en verde— y un cuarto que
     el semáforo no tiene: SIN SEÑAL, cuando el cuerpo no dijo nada ahí.

     Y no es --semaforo-pendiente, aunque los dos signifiquen "no hay dato".
     Aquel es el marrón tenue de una capa que todavía no ha corrido; este es un
     gris neutro que tiene que convivir con la piel de la silueta sin teñirla de
     cálido. Se eligió mirando el dibujo, no la paleta.

     Está solo en su familia a propósito: es el único de los cuatro que no es un
     estado del semáforo, así que lleva el nombre de lo que es. Si algún día los
     otros tres necesitan moverse por su cuenta, se abre la familia entera y
     este ya está puesto. */
  --coraza-sin-senal: #878787;

  /* ── LAS MARCAS DE [M-a001] ───────────────────────────────────
     El color de una marca de edición o de diálogo en un documento del Reino.
     Nombrados por la marca y no por el color, igual que el semáforo: el
     comando y el visor hablan de «añadir», «quitar», «revisar» e
     «instrucción», así que un --marca-verde obligaría a traducir en cada
     pantalla y mentiría el día que el tono se mueva.

     ⚠️ NO SON los --semaforo-*, aunque hoy valgan exactamente lo mismo, y es
     el tercer caso de la misma regla de esta hoja: mismo valor escrito,
     tokens distintos, porque dicen cosas distintas.
         --fiable-*   "este DATO es dudoso"          → propiedad de un dato
         --semaforo-* "esto REQUIERE atención"       → estado del sistema
         --marca-*    "alguien PROPONE un cambio"    → conversación abierta
     Una marca no es una avería: es una persona diciéndole algo a otra dentro
     de un texto. El día que las marcas quieran su propia familia de tonos
     —que es probable, porque comparten pantalla con el semáforo y hoy se
     confunden— tienen que poder moverse solas.

     Revisar e instrucción comparten valor A PROPÓSITO y las distingue el
     icono, decidido al pintarlas. Van en dos tokens y no en uno para que esa
     decisión se pueda deshacer sin tocar el CSS de la pantalla. */
  --marca-anadir: #2e7d32;      /* + lo que se propone añadir */
  --marca-quitar: #b23b3b;      /* - lo que se propone quitar */
  --marca-revisar: #c9962b;     /* ? lo que se pregunta */
  --marca-instruccion: #c9962b; /* ! lo que se instruye */
  /* LA VOZ DE QUIEN MARCA, que no es la tinta del documento y por eso no
     apunta a --tinta. Sobre las cuatro marcas el texto marcado va en blanco, y
     una nota del mismo blanco se leería como parte de lo marcado; el negro la
     despega y separa las dos voces — lo blanco es documento, lo negro es lo
     que se dice sobre él. Está decidido así en el visor y aquí solo se le pone
     nombre para que pueda moverse cuando el fondo deje de ser claro. */
  --marca-nota: #000000;

  /* ── LOS DOS LADOS DEL BODYGRAPH ──────────────────────────────────
     Negro la Personalidad (lo consciente) y rojo el Diseño (lo inconsciente).
     ES CONVENCIÓN DE FUERA Y NO SE TOCA: quien lee bodygraphs distingue los dos
     lados por ese par antes de leer un número, y cambiarlo por la paleta del
     Reino volvería el gráfico ilegible para quien más lo usa.

     Van en tokens y no escritos en el dibujo por lo de siempre: para que se
     puedan mover el día que el fondo deje de ser claro. Y NO apuntan a
     `--marca-nota` ni a `--marca-quitar`, que hoy son el mismo negro y un rojo
     parecido: aquello es la voz de quien marca un documento y esto son los dos
     lados de una carta. Mismo valor escrito, tokens distintos.

     El rojo NO es #ff0000 sino un carmín algo apagado: sobre pergamino el rojo
     puro vibra, y aquí hay 36 líneas finas. Contrastes medidos el 04/09/2026
     sobre `--papel` y `--pergamino`: el negro 17,40:1 y 14,95:1; el rojo 5,57:1
     y 4,79:1. Los cuatro por encima del 4,5:1 de AA, al revés que el par de
     Quirón de aquí abajo. */
  --dh-personalidad: #1a1a1a;
  --dh-diseno: #c0342b;

  /* LO APAGADO DEL BODYGRAPH: los canales que no se activan y las puertas que
     no tiene nadie. UN SOLO TONO PARA LOS DOS, y eso es la mitad del diseño:
     lo no activado tiene que leerse como un sistema callado —las bandas y las
     bolas del mismo color— para que lo activado destaque por color y no por
     llevar una forma que las otras no tienen.

     No apunta a `--borde`, que es el de las rayas y los recuadros del panel:
     este vive dentro de un dibujo y va a moverse con él. Es más claro que
     aquel a propósito (1,31:1 sobre papel, frente a 1,40:1), porque son 36
     bandas y 64 bolas a la vez y con el tono de `--borde` hacían rejilla.

     El número encima va en `--tinta` y no en `--tenue`: 12,34:1 contra 3,99:1,
     medido el 06/09/2026. Quien dice el estado es el CÍRCULO, no el número, así
     que el número solo tiene que leerse bien. */
  --dh-apagado: #e9e0d0;

  /* EL RELLENO DE UN CENTRO DEFINIDO, que en el bodygraph es LA lectura: los
     nueve se miran para ver cuáles están llenos. Va en su propio token y no en
     `--pergamino` —que es una superficie de la página— porque tiene que poder
     oscurecerse sin arrastrar consigo el fondo de medio panel.

     Y hubo que oscurecerlo. Con `--pergamino` quedaba a 1,12:1 de
     `--dh-apagado`, así que donde una banda pálida tocaba un centro pálido no
     había frontera y los dos se leían como una sola mancha. Medido el
     06/09/2026: ahora 1,30:1 contra la banda y 1,70:1 contra el papel, con la
     tinta encima a 9,50:1. Sigue siendo un tono callado: lo que tiene que
     cantar es el color de lo activado, no el relleno de un centro. */
  --dh-definido: #d4c5a7;

  /* ── LA CAPA DE QUIRÓN EN EL DISEÑO HUMANO ────────────────────────
     El bodygraph pinta la Personalidad en negro y el Diseño en rojo: es
     convención de fuera y no se discute. Quirón NO es de esa convención —es
     aportación de los Guardianes y no entra en el grafo—, así que va en verde,
     que es el color que dice «esto lo pone el Reino». Dos tonos por el mismo
     motivo que allí hay dos: consciente el claro, inconsciente el oscuro.

     No apuntan a ningún verde de los de arriba y no deben: `--fiable-*` habla
     de la calidad de un dato, `--semaforo-*` del estado del sistema y
     `--marca-anadir` de una conversación abierta. Que hoy se parezcan no los
     hace lo mismo, y el día que uno se mueva los otros no tienen por qué.

     CONTRASTE MEDIDO sobre `--pergamino` el 04/09/2026: el claro 3,73:1 y el
     oscuro 8,42:1; entre ellos, 2,25:1. El claro queda por debajo del 4,5:1 de
     AA, y es a sabiendas: subirlo hasta ahí lo acerca tanto al oscuro que los
     dos dejan de distinguirse, que es lo único que se les pide. El panel es
     interno; si algún día esto se enseña a un Viajero, hay que rehacer el par. */
  --dh-quiron-consciente: #46874c;
  --dh-quiron-inconsciente: #1e4d24;

  /* Estados */
  --error: #a03030;
  /* LAS DOS CAJAS QUE AVISAN, cada una con su fondo, su borde y su tinta. No
     son un color sino un juego de tres, y por eso van completas: una caja con
     el fondo cambiado y el borde viejo no se lee mal, se lee sucia.
     ⚠️ `--error-tinta` NO es `--error`, y hoy son dos rojos distintos —#8a3030
     en la caja, #a03030 en el texto suelto—. Se deja así y no se unifican
     aquí: uno se lee sobre un fondo rosado y el otro sobre el pergamino, y
     igualarlos es una decisión de diseño que se toma mirando, no de paso. */
  --aviso-fondo: #fff8e8;
  --aviso-borde: #e8d9a8;
  --aviso-tinta: #7a5c15;
  --error-fondo: #fdeeee;
  --error-borde: #e8c0c0;
  --error-tinta: #8a3030;

  /* El rojo del sello (#cd4946) NO tiene token propio, y es a propósito.
     Donde manda es en los <meta name="theme-color"> DE LAS DIECISÉIS PÁGINAS y
     en el theme_color del manifest — y ni el HTML ni el JSON saben leer var().
     (Eran once cuando se escribió esto y el panel creció; el número se contó de
     nuevo el 28/08/2026. Se comprueba así, y por eso queda escrito el cómo y no
     solo el cuánto:  grep -rl 'theme-color' web --include='*.html' | wc -l)
     Un token que esos sitios no pueden consumir parecería la fuente de la
     verdad sin serlo: alguien lo cambiaría, no pasaría nada, y no sabría por
     qué. Si hay que cambiar ese rojo, se cambia a mano en los diecisiete sitios:
     las dieciséis páginas y el manifest.
     (Que hoy --color-iconos y el escudo lleven ese mismo valor escrito no lo
     convierte en la fuente: son decisiones sueltas que coinciden, y cada una
     puede moverse sin las otras.) */

  /* Medidas */
  --radio: 10px;
  --ancho-max: 1000px;

  /* ── El resguardo de la zona segura ──────────────────────────
     Lo que ocupan el reloj, la isla y la barra de gestos del iPhone.
     Hace falta porque la app instalada va en black-translucent: el lienzo
     web se extiende bajo la franja de estado, así que el margen lo ponemos
     nosotros o el contenido queda debajo del reloj.

     Fuera de la app instalada los cuatro valen 0: en escritorio y en Safari
     normal esto no mueve un píxel.

     Van los CUATRO lados, no solo arriba y abajo: en apaisado la isla se come
     el borde lateral, y el margen lateral de Antorchas en móvil (0.8rem) no
     llega ni a la mitad de lo que ocupa.

     El 0px de respaldo no es adorno. Si env() no devuelve valor, el calc() que
     lo suma se invalida ENTERO y la página se queda sin padding ninguno — no
     sin el resguardo: sin el padding de diseño también. Con el respaldo, ese
     caso computa a 0 y el margen de diseño sobrevive.
     (Cubre el navegador que entiende env() pero no tiene definido el inset,
     que es todo escritorio. Al que no entendiera env() en absoluto no lo
     salva nada: ahí no llega ni el respaldo. Pero eso es Safari anterior a 11
     y Chrome anterior a 69, que no pisan este panel.)

     ⚠️ NO se aplican aquí, en `body`: cada página escribe su propio `padding`
     abreviado en su <style>, que va después de esta hoja, y la abreviada pisa
     a la larga. Puesto aquí quedaría bien escrito y no haría nada — y solo se
     vería tras desplegar. Se suman en el padding de cada página con calc(). */
  --resguardo-arriba: env(safe-area-inset-top, 0px);
  --resguardo-abajo: env(safe-area-inset-bottom, 0px);
  --resguardo-izq: env(safe-area-inset-left, 0px);
  --resguardo-der: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

/* El pergamino, también en la raíz y no solo en el body.
   Hasta ahora el lienzo se pintaba por PROPAGACIÓN: cuando `html` no declara
   fondo, el navegador sube el del `body` y lo usa para toda la superficie. En
   una página normal basta. En la app instalada no: con black-translucent el
   lienzo se extiende bajo la franja de estado, y las zonas que dibuja el
   sistema salían negras en modo oscuro porque no tenían color propio, solo uno
   prestado.
   Declararlo aquí quita esa dependencia: la raíz tiene su fondo y no hay
   superficie sin dueño. La otra mitad de este arreglo es el
   <meta name="color-scheme" content="light"> de la cabecera, que cubre la
   ventana anterior a que llegue esta hoja. */
html { background: var(--pergamino); }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--tinta);
  background: var(--pergamino);
}

/* ── El semáforo de fiabilidad ─────────────────────────────── */
.fiabilidad {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.fiabilidad::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--punto, var(--tenue));
}
.fiabilidad.confirmada  { color: var(--fiable-confirmada); --punto: var(--fiable-confirmada); }
.fiabilidad.aproximada  { color: var(--fiable-aproximada); --punto: var(--fiable-aproximada); }
.fiabilidad.desconocida { color: var(--fiable-desconocida); --punto: var(--fiable-desconocida); }

/* La hora, coloreada por fiabilidad (sin punto ni texto; el color lo dice) */
.hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.hora.confirmada  { color: var(--fiable-confirmada); }
.hora.aproximada  { color: var(--fiable-aproximada); }
.hora.desconocida { color: var(--fiable-desconocida); }

/* ── LOS ICONOS DEL PANEL ──────────────────────────────────────
   Tres familias, y el prefijo del archivo decide cómo se pinta cada una
   (la regla vive en pintarIcono, panel.js):

       i_   propio, de una tinta  → MÁSCARA CSS; el color lo pone el CSS
       ie_  logo de un ajeno      → <img>, con sus colores
       m_   marca nuestra a color → <img> también, pero no es "externo"

   POR QUÉ MÁSCARA Y NO EL SVG DENTRO DE LA PÁGINA. Los propios salen en
   listados: hasta 100 filas en Antorchas, 64 Claves, 23 Esferas. Incrustar
   el dibujo sería repetirlo entero en cada fila. Medido sobre el listado
   real, con 100 filas y un icono de una sola forma:

                    por aparición   ×100 filas   sobre el documento (148 KB)
       incrustado        608 b        59,4 KB           +40 %
       <use>              84 b         8,2 KB            +6 %
       máscara            39 b         3,8 KB          +2,6 %

   Y en tiempo, con 100 filas, las tres están por debajo de medio
   milisegundo: la máscara gana, pero ahí no se decide nada. Se decide en el
   peso, y en que la máscara no mete NADA en el documento.

   SE DESCARTÓ <use> —dibujar el símbolo una vez y apuntarlo desde cada
   fila— por tres cosas: pesa el doble que la máscara, resultó ser el MÁS
   LENTO de los tres (resolver la referencia y sostener el árbol sombra sale
   más caro que repetir el dibujo), y obligaría a admitir <use> al sanear.

   Y NO SE PUEDE USAR <img>, que sería lo simple, porque entonces el color
   lo mandaría el archivo. Con máscara lo manda el CSS, así que estos iconos
   podrán seguir la paleta del Reino cuando cambie con la hora.

   CÓMO FUNCIONA. El SVG no se dibuja: RECORTA un fondo de color. De ahí que
   `background-color: currentColor` sea lo que le da el color, y que se
   herede — el icono toma el color del texto que acompaña, salvo que su
   sitio diga otra cosa.

   ⚠️ LO QUE IMPORTA DEL ARCHIVO ES EL ALFA, NO EL COLOR. Como máscara solo
   cuenta qué píxeles son opacos: el `fill` que traiga dentro da igual, y por
   eso un color quemado ya no estropea nada. Lo que SÍ estropea es lo que
   deja pasar luz a medias — `opacity`, `fill-opacity` o un degradado que se
   desvanece: eso saldría descolorido. Lo vigila probar_iconos.py. */
.icono { display: inline-block; margin-right: 0.5rem; line-height: 1; vertical-align: -0.25rem; }
img.icono { width: 1.4rem; height: 1.4rem; object-fit: contain; }

.icono-propio {
  /* Se declara AUTOSUFICIENTE (display y alineación incluidos) y no apoyada en
     .icono: en los listados el icono va solo, dentro de una celda, sin la
     clase .icono que aporta el margen. */
  display: inline-block;
  width: 1.4rem; height: 1.4rem;
  vertical-align: -0.25rem;
  /* EL COLOR POR DEFECTO DE TODO EL PANEL, y va aquí y no en la hoja de cada
     zona: puesto en herramientas.css dejaba fuera a Antorchas, Claves y
     Esferas, que son donde más iconos hay.
     Sale de --color-iconos y no de --oro: el porqué, donde se declara.
     Sigue decidiéndose POR SITIO: quien quiera otro tono pone `color` en su
     contexto y gana, porque background-color lo lee de ahí. */
  color: var(--color-iconos);
  background-color: currentColor;
  /* El prefijo -webkit- va PRIMERO y el estándar después, para que el
     estándar gane donde existan los dos. Los dos declarados a propósito: el
     panel se usa a diario desde un iPhone. */
  -webkit-mask: var(--icono) no-repeat center / contain;
          mask: var(--icono) no-repeat center / contain;
}

/* La ruta de cada icono, en el CSS y no en el HTML: así no viaja repetida
   cien veces en el documento. La clase ES el nombre del archivo, para que
   pintarIcono la deduzca sin tabla de equivalencias — y para que
   probar_iconos.py pueda cruzar las dos listas.
   ⚠️ Un icono nuevo necesita SU LÍNEA AQUÍ. Sin ella la máscara queda vacía
   y el icono se ve... invisible, sin un solo error. La prueba lo caza. */
.i_antorcha         { --icono: url("/guardianes/static/svg/i_antorcha.svg"); }
.i_persona          { --icono: url("/guardianes/static/svg/i_persona.svg"); }
.i_viajero          { --icono: url("/guardianes/static/svg/i_viajero.svg"); }
.i_claves           { --icono: url("/guardianes/static/svg/i_claves.svg"); }
.i_esferas          { --icono: url("/guardianes/static/svg/i_esferas.svg"); }
.i_lentes           { --icono: url("/guardianes/static/svg/i_lentes.svg"); }
.i_herramientas     { --icono: url("/guardianes/static/svg/i_herramientas.svg"); }
.i_guardianes       { --icono: url("/guardianes/static/svg/i_guardianes.svg"); }
.i_guardian_tecnico { --icono: url("/guardianes/static/svg/i_guardian_tecnico.svg"); }
.i_backups          { --icono: url("/guardianes/static/svg/i_backups.svg"); }
.i_fail2ban         { --icono: url("/guardianes/static/svg/i_fail2ban.svg"); }
.i_estado_del_motor { --icono: url("/guardianes/static/svg/i_estado_del_motor.svg"); }
.i_comunicaciones   { --icono: url("/guardianes/static/svg/i_comunicaciones.svg"); }
.i_actualizaciones  { --icono: url("/guardianes/static/svg/i_actualizaciones.svg"); }
.i_sistema          { --icono: url("/guardianes/static/svg/i_sistema.svg"); }
.i_contenedor       { --icono: url("/guardianes/static/svg/i_contenedor.svg"); }
.i_alerta           { --icono: url("/guardianes/static/svg/i_alerta.svg"); }
.i_ver              { --icono: url("/guardianes/static/svg/i_ver.svg"); }
.i_actuar           { --icono: url("/guardianes/static/svg/i_actuar.svg"); }
/* i_script es COPIA de i_grimorio_tecnico —la misma rueda dentada— y no el
   mismo archivo, por lo mismo que i_info: aquel señala un libro concreto de
   Notion y este, quién hizo una anotación del registro. Compartir archivo
   ataría dos cosas que no tienen por qué moverse juntas. */
.i_script           { --icono: url("/guardianes/static/svg/i_script.svg"); }
.i_plesk_mini       { --icono: url("/guardianes/static/svg/i_plesk_mini.svg"); }
/* i_info es COPIA de i_estado_del_proyecto, no el mismo archivo compartido, y
   es a propósito: aquel apunta a una página concreta de Notion y este es el
   genérico de "aquí está escrito". Compartir archivo los ataría, y el día que
   uno quiera otro dibujo se lo llevaría al otro por delante. */
.i_info             { --icono: url("/guardianes/static/svg/i_info.svg"); }
.i_grimorio_conceptual { --icono: url("/guardianes/static/svg/i_grimorio_conceptual.svg"); }
.i_grimorio_somatico   { --icono: url("/guardianes/static/svg/i_grimorio_somatico.svg"); }
.i_grimorio_tecnico    { --icono: url("/guardianes/static/svg/i_grimorio_tecnico.svg"); }
.i_estado_del_proyecto { --icono: url("/guardianes/static/svg/i_estado_del_proyecto.svg"); }
.i_tareas           { --icono: url("/guardianes/static/svg/i_tareas.svg"); }
.i_grafica          { --icono: url("/guardianes/static/svg/i_grafica.svg"); }
.i_icono            { --icono: url("/guardianes/static/svg/i_icono.svg"); }
.i_color            { --icono: url("/guardianes/static/svg/i_color.svg"); }
.i_pte              { --icono: url("/guardianes/static/svg/i_pte.svg"); }

/* LAS CUATRO MARCAS DE [M-a001], nombradas por el SIGNO EN PALABRAS y no por el
   signo. Nacieron como i_+, i_-, i_? e i_! y se renombraron el 24/08/2026 el
   mismo día: `+`, `?` y `!` no son válidos en un identificador CSS y obligaban a
   escribir el selector `.i_\+` mientras el archivo se llamaba `i_+`. Dos formas
   del mismo nombre, y la contrabarra se pierde sin dar ningún error — la regla
   simplemente deja de aplicar y el icono no aparece.
   El precio es una tabla de equivalencias en el intérprete, que la convención de
   arriba prefiere evitar. Sale a cuenta: la tabla está a la vista y falla
   ruidosamente; un escape olvidado, no. */
/* LA BARRA DEL PANEL, de [T-a005]. i_castillo entra declarado pero SIN USAR:
   el botón de inicio lleva i_guardianes, que es el mismo que el área. */
.i_atras            { --icono: url("/guardianes/static/svg/i_atras.svg"); }
.i_guardar          { --icono: url("/guardianes/static/svg/i_guardar.svg"); }
.i_nuevo            { --icono: url("/guardianes/static/svg/i_nuevo.svg"); }
.i_editar           { --icono: url("/guardianes/static/svg/i_editar.svg"); }
.i_borrar           { --icono: url("/guardianes/static/svg/i_borrar.svg"); }
.i_cancelar         { --icono: url("/guardianes/static/svg/i_cancelar.svg"); }
.i_circulo          { --icono: url("/guardianes/static/svg/i_circulo.svg"); }
.i_compartir        { --icono: url("/guardianes/static/svg/i_compartir.svg"); }
.i_castillo         { --icono: url("/guardianes/static/svg/i_castillo.svg"); }

.i_mas              { --icono: url("/guardianes/static/svg/i_mas.svg"); }
.i_menos            { --icono: url("/guardianes/static/svg/i_menos.svg"); }
/* Abrir y cerrar un bloque plegable. No son i_mas e i_menos: aquellos son
   añadir y quitar —una Antorcha, una fila—, y estos son enseñar y esconder lo
   que ya está ahí. El mismo dibujo para dos verbos distintos confunde en cuanto
   los dos aparecen en la misma pantalla. */
.i_desplegar        { --icono: url("/guardianes/static/svg/i_desplegar.svg"); }
.i_plegar           { --icono: url("/guardianes/static/svg/i_plegar.svg"); }
.i_interrogante     { --icono: url("/guardianes/static/svg/i_interrogante.svg"); }
.i_admiracion       { --icono: url("/guardianes/static/svg/i_admiracion.svg"); }
/* LAS TRES CLASES DE AUTOR de [M-a006], para las firmas del Historial. Se
   emparejan con los prefijos `humano:`, `agente:` y `proceso:`, que son los
   tres que esa norma admite; i_persona e i_script ya existían. */
.i_agente           { --icono: url("/guardianes/static/svg/i_agente.svg"); }

/* LOS TIPOS DE DOCUMENTO DEL REINO, para los Enlaces+ del visor. Uno por
   familia del contador, más los que todavía no tienen documentos pero ya
   tienen icono.

   i_tarea va PARTIDO EN DOS Y POR TIEMPO, no por resultado: futura es todo lo
   que queda por delante —idea, preparada, aceptada, pausada— y pasada es todo
   lo que ya no se va a mover, esté completada o CANCELADA. Nacieron llamándose
   _pendiente y _completada, y se renombraron el 24/08/2026 porque el segundo
   nombre mentía en cuanto una tarea se cancelaba: el eje real es cuándo, no
   cómo acabó. */
.i_metodo           { --icono: url("/guardianes/static/svg/i_metodo.svg"); }
.i_tarea_futura     { --icono: url("/guardianes/static/svg/i_tarea_futura.svg"); }
.i_tarea_pasada     { --icono: url("/guardianes/static/svg/i_tarea_pasada.svg"); }
.i_ds               { --icono: url("/guardianes/static/svg/i_ds.svg"); }
.i_wiki             { --icono: url("/guardianes/static/svg/i_wiki.svg"); }
.i_conocimiento     { --icono: url("/guardianes/static/svg/i_conocimiento.svg"); }
.i_disparador       { --icono: url("/guardianes/static/svg/i_disparador.svg"); }
/* i_pendiente es EL HUECO CON FORMA: el icono que se pone donde hará falta uno
   que todavía no está dibujado, en vez de reutilizar otro —que mentiría— o
   dejar el sitio vacío —que no se ve—. Un cuadrado lleno dice "aquí falta
   algo" sin encender ninguna alarma, y sustituirlo es cambiar un nombre.
   probar_iconos.py CUENTA cuántos hay puestos y lo dice en cada ejecución:
   así los pendientes molestan hasta que se dibujan, que es el trato. */
.i_pendiente        { --icono: url("/guardianes/static/svg/i_pendiente.svg"); }

/* ── LOS CAMPOS DE LA CABECERA DE UN DOCUMENTO ─────────────────
   La cabecera del visor de Los Registros se lee con iconos en lugar de con el
   nombre de cada campo: `descripcion`, `f_seguimiento` o `veces_aplazada` son
   nombres de máquina, y puestos en columna delante de su valor pesan más que
   lo que dicen. El icono ocupa menos y se reconoce antes.

   VAN AQUÍ Y NO EN `registros/lista.html` aunque hoy solo esa pantalla los
   pinte, porque aquí es donde vive la lista que cruza probar_iconos.py: un
   `--icono` declarado en la hoja de una pantalla se le escapa, y entonces un
   icono que falta no se ve como un error sino como un hueco en blanco. */
.i_descripcion      { --icono: url("/guardianes/static/svg/i_descripcion.svg"); }
.i_direccion        { --icono: url("/guardianes/static/svg/i_direccion.svg"); }
/* Los dos ritmos de una coraza: el caracol (ir despacio) y la vuelta atrás. */
.i_despacio_coraza  { --icono: url("/guardianes/static/svg/i_despacio_coraza.svg"); }
.i_volver_coraza    { --icono: url("/guardianes/static/svg/i_volver_coraza.svg"); }
.i_etiqueta         { --icono: url("/guardianes/static/svg/i_etiqueta.svg"); }
.i_f_seguimiento    { --icono: url("/guardianes/static/svg/i_f_seguimiento.svg"); }
.i_adelante         { --icono: url("/guardianes/static/svg/i_adelante.svg"); }
.i_dimension        { --icono: url("/guardianes/static/svg/i_dimension.svg"); }
.i_prioridad        { --icono: url("/guardianes/static/svg/i_prioridad.svg"); }
.i_duracion         { --icono: url("/guardianes/static/svg/i_duracion.svg"); }
.i_reprocesar       { --icono: url("/guardianes/static/svg/i_reprocesar.svg"); }

/* LOS CATORCE CUERPOS DEL CIELO, con su propia letra en el nombre: `i_p_`. No
   es una familia nueva de las que mira probar_iconos.py —siguen siendo
   propios, de una tinta y por máscara—, es que son un grupo cerrado y se
   reconocen de un vistazo entre los ochenta.

   ⚠️ VAN EN EL ORDEN DE `CUERPOS` (antorchas.html) Y NO EN ORDEN ALFABÉTICO, y
   ese orden es el del cielo: Sol y Tierra primero, los Nodos después, y de
   Mercurio a Plutón por distancia. Ordenarlas por nombre aquí las dejaría en
   un orden que no significa nada y que no se parece al de la tabla que las
   pinta.

   Y `quiron` se escribe con Q, como en el resto del motor: la clase ES el
   nombre del archivo, así que un `kiron` obligaría a una tabla de
   equivalencias justo para el cuerpo que ya lleva excepciones propias. */
.i_p_sol            { --icono: url("/guardianes/static/svg/i_p_sol.svg"); }
.i_p_tierra         { --icono: url("/guardianes/static/svg/i_p_tierra.svg"); }
.i_p_luna           { --icono: url("/guardianes/static/svg/i_p_luna.svg"); }
.i_p_nodo_norte     { --icono: url("/guardianes/static/svg/i_p_nodo_norte.svg"); }
.i_p_nodo_sur       { --icono: url("/guardianes/static/svg/i_p_nodo_sur.svg"); }
.i_p_mercurio       { --icono: url("/guardianes/static/svg/i_p_mercurio.svg"); }
.i_p_venus          { --icono: url("/guardianes/static/svg/i_p_venus.svg"); }
.i_p_marte          { --icono: url("/guardianes/static/svg/i_p_marte.svg"); }
.i_p_jupiter        { --icono: url("/guardianes/static/svg/i_p_jupiter.svg"); }
.i_p_saturno        { --icono: url("/guardianes/static/svg/i_p_saturno.svg"); }
.i_p_urano          { --icono: url("/guardianes/static/svg/i_p_urano.svg"); }
.i_p_neptuno        { --icono: url("/guardianes/static/svg/i_p_neptuno.svg"); }
.i_p_pluton         { --icono: url("/guardianes/static/svg/i_p_pluton.svg"); }
.i_p_quiron         { --icono: url("/guardianes/static/svg/i_p_quiron.svg"); }



/* ── LOS BOTONES DE ÁREA ───────────────────────────────────────
   La tarjeta grande por la que se entra a un sitio: el índice de Guardianes la
   usa para sus seis áreas, y la puerta de Los Registros para sus familias de
   documento. Estaba escrita dentro de index.html hasta el 30/08, cuando la
   necesitó la segunda pantalla — y ahí es cuando una copia deja de ser una
   copia y pasa a ser dos cosas que se van a separar. */
.areas { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 440px; }
a.area {
  display: block;
  padding: 1.4rem 1.8rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--sombra);
  text-decoration: none;
  color: var(--tinta);
  width: 100%;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.area:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--sombra); }
a.area .nombre { font-weight: 600; font-size: 1.1rem; }
a.area .desc { color: var(--tenue); font-size: 0.9rem; font-style: italic; margin-top: 0.3rem; }
/* Lo que todavía no se puede pulsar: se ve, dice que existe, y no responde. */
a.area.proxima { opacity: 0.5; pointer-events: none; }

/* ── PIEZAS COMPARTIDAS DE LAS TARJETAS DE CONTENIDO ───────────
   Nacieron en Las Claves y las usa ahora también la tarjeta de consulta de
   la ficha de una Antorcha. Viven aquí para que sean LA MISMA REGLA y no una
   parecida: dos copias con los mismos valores se separan en cuanto alguien
   retoca una, y entonces la misma cosa se ve distinta en dos pantallas.

   ⚠️ Las Claves conserva de momento su propia copia de estas reglas en su
   <style>. Como va después de esta hoja y declara los MISMOS valores, no hay
   diferencia visible — pero la duplicación sigue ahí. Unificarla del todo
   pide borrar esas líneas de claves.html, y eso es tocar Las Claves. */

/* El [+ info]: discreto, sin borde, y se enciende al pasar el ratón. Es lo
   contrario de un botón de acción, y a propósito: solo despliega lo que ya
   está en la página, no lleva a ninguna parte. */
.t-info {
  margin-left: auto; border: none; background: none;
  color: var(--tenue); font: inherit; font-size: 0.85rem;
  cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 4px;
  white-space: nowrap;
}
.t-info:hover { background: var(--pergamino); color: var(--tinta); }
/* Mientras pide sus datos. Cursor de espera, no de prohibido: no está
   vetado, está tardando. */
.t-info:disabled { opacity: 0.6; cursor: progress; }

/* La tarjeta destacada, con el filo dorado a la izquierda. En Las Claves la
   lleva la Invitación —lo accionable de la Clave— y por eso la lleva también
   en la ficha: es la misma cosa, dicha en el mismo sitio del recorrido.
   NO se llama `.tarjeta` a secas porque ese nombre ya está cogido, y con
   valores DISTINTOS, en Las Claves y en Las Esferas. */
.tarjeta-destacada {
  background: var(--papel); border: 1px solid var(--borde);
  border-left: 3px solid var(--oro);
  border-radius: var(--radio); box-shadow: 0 1px 3px var(--sombra);
  padding: 1.2rem 1.5rem;
}


/* ── La cabecera del Reino ─────────────────────────────────────
   El escudo, el nombre y el lema. La comparten el vestíbulo y la Puerta:
   vive aquí para que las dos no se desincronicen al retocar una.

   Va acotada a header.reino a propósito. Como `header` o `h1` sueltos
   pisaría las cabeceras de antorchas y claves, que son otra cosa.
   (Las Lentes SÍ la usa: repite la cabecera del Reino sobre su propio
   título de sección.) */
header.reino { text-align: center; }
/* El escudo se pinta a 96px desde un original de 300, así que sobra
   resolución para las pantallas de retina. */
header.reino .escudo { display: block; width: 96px; height: auto; margin: 0 auto 1rem; }
header.reino h1 { font-weight: 600; letter-spacing: 0.02em; margin: 0; font-size: 1.7rem; }
header.reino .subtitulo { color: var(--tenue); margin-top: 0.4rem; font-size: 0.95rem; }

/* ═══ LA BARRA DEL PANEL ═══════════════════════════════════════════════
   El chasis de navegación, de [T-a005]. VIVE AQUÍ Y LA INYECTA panel.js:
   el panel no tiene motor de plantillas —las páginas se sirven con
   FileResponse— y lo que se copia acaba divergiendo. Pasó con .volver-guard,
   que está definido en las quince páginas con variaciones.

   Se llama .barra-panel y no .barra porque ESA CLASE YA ESTÁ COGIDA: es la
   barra de filtros de Claves, Antorchas y Registros. Dos cosas distintas con
   el mismo nombre en la misma página es un choque, no un parecido.

   FIJA ABAJO TAMBIÉN EN ESCRITORIO, que es lo que la separa de una barra de
   móvil: el sitio de las acciones no cambia según la pantalla, y por eso el
   ojo lo aprende una vez. Lo que cambia es el ancho de lo de dentro. */
:root {
  /* El alto lo declara el token y no el contenido, para que el hueco de abajo
     pueda reservarlo SIN MEDIR NADA. Medir en JS obligaría a repintar el hueco
     cada vez que la barra cambie de botones, y la barra es dinámica. */
  --alto-barra: 3.5rem;

  /* CUÁNTO DEL RESGUARDO DE ABAJO SE RESPETA EN LA BARRA. Al 100% —que es lo
     que pide iOS— la barra sumaba unos 34px de blanco bajo los botones, casi
     el 70% de su alto, y en el iPhone se veía desproporcionado.
     Se probó al 20% —unos 7px— y se subió al 30% tras verlo en el iPhone: ~10px.
     Es la única medida de aquí que no se decide mirando la pantalla sino el
     dedo, porque ese espacio existe para que los botones no caigan bajo la
     barra de gestos del sistema, que se queda el toque antes de que llegue a la
     página. Subirlo es siempre seguro; bajarlo, no.
     Va en un token propio para que la barra y su hueco no puedan separarse:
     los dos lo leen, así que ajustarlo mueve las dos cosas a la vez. */
  --resguardo-barra: calc(var(--resguardo-abajo) * 0.3);
}

.barra-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--papel);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 10px var(--sombra);
  /* El resguardo va DENTRO de la barra: así el fondo llega hasta el borde
     físico de la pantalla y son los botones los que suben, en vez de quedar
     una franja de pergamino bajo una barra flotando. */
  padding-bottom: var(--resguardo-barra);
  padding-left: var(--resguardo-izq);
  padding-right: var(--resguardo-der);
}
.barra-panel .dentro {
  max-width: var(--ancho-max); margin: 0 auto;
  height: var(--alto-barra);
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 1.25rem;
}

/* 44px de lado es el mínimo táctil de iOS, y se declara en px a propósito:
   es una medida del DEDO, no de la tipografía, así que no debe crecer si
   alguien sube el tamaño de letra del sistema.
   SIN ETIQUETA: el botón es solo icono, así que lo que dice qué hace son el
   aria-label y el title que pone panel.js — no son un extra, son lo único. */
.barra-panel button {
  font: inherit;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0.3rem;
  background: none; border: none; border-radius: 8px;
  color: var(--tinta); cursor: pointer;
}
.barra-panel button:hover:not([disabled]) { background: var(--pendiente); }

/* LOS BOTONES DE MODO llevan etiqueta y van CENTRADOS en la barra: son la
   acción de lo que estás haciendo, no una esquina de navegación. El grupo se
   centra con los dos auto —el del primero por la izquierda y el del último por
   la derecha—, que reparten el sobrante a partes iguales sin tener que saber
   cuántos botones hay. */
.barra-panel button .etiqueta { margin-left: 0.4rem; font-size: 0.95rem; }
/* Más bajos que los fijos —38px frente a los 44 del mínimo táctil de iOS— y a
   propósito: son dos botones anchos, con etiqueta, y el ancho ya da superficie
   de sobra al dedo. La regla de los 44 protege al icono suelto, que es cuadrado
   y pequeño; aquí el blanco es una pastilla de más de cien píxeles de lado. */
.barra-panel button.modo { flex-direction: row; padding: 0.4rem 0.8rem;
                           min-height: 38px; font-weight: 600; }
.barra-panel button.modo:first-child { margin-left: auto; }

/* LA ACCIÓN DE LA PÁGINA VA A LA DERECHA, separada de los fijos por todo el
   hueco que sobre. No es decoración: son dos naturalezas distintas —navegar y
   hacer— y tenerlas juntas invita a pulsar la que no era. El auto empuja hasta
   el borde sin saber cuántos botones hay a un lado ni al otro. */
.barra-panel button.accion { margin-left: auto; }
/* Con dos acciones, solo la primera se separa: las demás van pegadas a ella. */
.barra-panel button.accion ~ button.accion { margin-left: 0; }
.barra-panel button.modo:last-child { margin-right: auto; }

/* SE DISTINGUEN POR COLOR Y NO SOLO POR SITIO: descartar y guardar quedan a un
   dedo de distancia y equivocarse cuesta lo escrito. Fondo suave al 15%, la
   misma forma que las marcas del visor, con el verde y el rojo del semáforo.
   El texto va en el color pleno para que se lea sobre ese fondo claro. */
/* EL ICONO TIENE QUE SEGUIR AL BOTÓN, y para eso hace falta apuntarle A ÉL.
   Poner `color` en el botón no basta: .icono-propio DECLARA `color:
   var(--color-iconos)` y una declaración sobre el elemento gana siempre a lo
   heredado del padre — es la trampa que su propio comentario avisa unas
   líneas más arriba. Sin esto, Guardar y Cancelar salían los dos con el rojo
   del sello y el color dejaba de distinguirlos, que era todo el objetivo. */
.barra-panel button.modo .icono-propio { color: inherit; }

.barra-panel button.confirmar {
  background: color-mix(in srgb, var(--semaforo-bien) 15%, transparent);
  color: var(--semaforo-bien); }
.barra-panel button.confirmar:hover:not([disabled]) {
  background: color-mix(in srgb, var(--semaforo-bien) 28%, transparent); }
.barra-panel button.descartar {
  background: color-mix(in srgb, var(--semaforo-mal) 15%, transparent);
  color: var(--semaforo-mal); }
.barra-panel button.descartar:hover:not([disabled]) {
  background: color-mix(in srgb, var(--semaforo-mal) 28%, transparent); }
/* El botón del sitio en el que ya estás no se disfraza de salida: se apaga y
   deja de responder, en vez de recargar la misma página. */
.barra-panel button[disabled] { opacity: 0.35; cursor: default; }
.barra-panel button .icono-propio {
  width: 1.5rem; height: 1.5rem;
  /* SE ANULA LO QUE .icono TRAE PARA CONVIVIR CON UN TEXTO, porque aquí no hay
     texto: pintarIcono() pone siempre `class="icono icono-propio i_x"`, y esa
     primera clase lleva margin-right para separarse de la etiqueta y un
     vertical-align para sentarse en su línea base. Sin etiqueta al lado, las
     dos cosas hacen lo mismo: descentrar el icono dentro de su botón. */
  margin: 0; vertical-align: initial;
}

/* EL AVISO DE LA BARRA. Sin hoja nativa de compartir no hay ninguna señal de
   que algo haya pasado —copiar al portapapeles es invisible por definición—,
   así que el aviso ES la confirmación, no un adorno.
   Va sobre la barra y no dentro de su fila: empujaría los botones al aparecer,
   y algo que mueve lo que estás pulsando justo al pulsarlo es peor que nada. */
.barra-panel .aviso-barra {
  position: absolute; bottom: 100%; left: 0; right: 0;
  padding: 0.5rem 1rem; text-align: center;
  font-size: 0.9rem; color: var(--tinta);
  background: var(--papel); border-top: 1px solid var(--borde);
  opacity: 0; visibility: hidden; transition: opacity 0.15s;
}
.barra-panel .aviso-barra.visible { opacity: 1; visibility: visible; }

/* CUANDO LAS ACCIONES SUBEN A LA BARRA, las del formulario se esconden con
   ESTA CLASE Y NO CON EL ATRIBUTO hidden. El navegador solo aplica `hidden`
   desde su hoja de usuario-agente, así que cualquier `display` de la página
   gana: en Antorchas, `.acciones { display: flex }` lo pisaba y los botones
   seguían viéndose — dos «Guardar» a la vez, uno en la barra y otro al final
   del formulario. Con Esferas y Claves no pasaba porque allí .acciones no
   declara display, y por eso coló hasta que se miró en Antorchas.
   El !important es lo que lo hace inmune a esa misma trampa en la próxima
   pantalla que se enganche. */
.acciones-en-la-barra { display: none !important; }

/* EL HUECO. Una barra fija tapa el final del contenido, y pedirle a las quince
   páginas que reserven sitio en su padding son quince ediciones que vuelven a
   divergir. Lo pone la propia inyección, como último hijo del body. */
.barra-panel-hueco {
  height: calc(var(--alto-barra) + var(--resguardo-barra));
  /* NO SE ENCOGE NUNCA. En las páginas cuyo `body` es un flex —Las Lentes, la
     puerta de Los Registros— este hueco es un hijo más, y en un contenedor flex
     lo normal es que un hijo ceda altura cuando falta sitio: `flex-shrink` vale
     1 por defecto. Con la lista larga se comprimía y la barra tapaba el final
     de la página, que se veía como una barra cortada por la mitad hasta que
     bajabas del todo. Visto el 30/08 en `?tipo=tarea`, con 64 documentos. */
  flex: none;
}

/* ═══ LA BARRA DE ARRIBA ═══════════════════════════════════════════════════
   Informa de dónde estás cuando el título ha salido de vista. Sin botones: lo
   que se pulsa vive en la barra de abajo, al alcance del pulgar.

   NO RESERVA HUECO, al revés que la de abajo, y es la diferencia que explica
   por qué una lleva espaciador y la otra no: esta solo existe con la página
   desplazada, así que arriba SIEMPRE hay contenido pasando por debajo. Un
   hueco fijo dejaría una franja vacía al principio de las quince páginas para
   algo que en ese momento no está. */
.barra-arriba {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 2px 10px var(--sombra);
  /* El resguardo va DENTRO, igual que en la de abajo: así el fondo llega al
     borde físico y es el texto el que baja, en vez de quedar la barra flotando
     bajo una franja de pergamino. Aquí se respeta ENTERO y no un 30%: arriba
     está el reloj y la isla, y meterse ahí no es incómodo, es ilegible. */
  padding-top: var(--resguardo-arriba);
  padding-left: var(--resguardo-izq);
  padding-right: var(--resguardo-der);
  /* Apagada por defecto. La transición es de opacidad y desplazamiento, no de
     altura: animar la altura movería el contenido de la página al aparecer. */
  opacity: 0; transform: translateY(-100%);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;     /* no roba toques mientras está apagada */
}
/* Encendida SÍ recibe toques: la barra entera sube al principio al pulsarla.
   El pointer-events de arriba existe para que apagada no robe el toque a lo que
   hay debajo, que es contenido de la página. */
.barra-arriba.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.barra-arriba.visible { cursor: pointer; }

.barra-arriba .titulo-arriba {
  max-width: var(--ancho-max); margin: 0 auto;
  height: 2.75rem;
  display: flex; align-items: center;
  padding: 0 1.25rem;
  font-weight: 600; font-size: 1rem;
  white-space: nowrap;
}
/* EL RECORTE VA EN LOS TROZOS, NO EN LA BARRA. Aquí estuvo puesto un
   `text-overflow: ellipsis` sobre este mismo elemento y no recortaba nada:
   sobre un contenedor flex no hace nada —los puntos suspensivos son cosa de una
   caja de texto—, así que un nombre largo se cortaba a hachazo. */
.barra-arriba .sitio-arriba,
.barra-arriba .seccion-arriba {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* QUIÉN CEDE SITIO CUANDO NO CABE: primero la sección, y de largo. El orden de
   la barra es la jerarquía —primero de quién es, después dónde dentro— y al
   apretar tiene que sobrevivir lo primero. */
.barra-arriba .sitio-arriba { flex: 0 1 auto; }
.barra-arriba .seccion-arriba { flex: 0 999 auto; }
.barra-arriba .titulo-arriba .icono-propio {
  width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; vertical-align: initial;
  flex: none;   /* el icono no se estruja: o cabe entero o no está */
}
/* LA CUENTA, PEGADA A LA DERECHA. No se encoge nunca: es un número corto y es
   justo el dato que se viene a mirar. El filtro que lleva delante sí, porque
   puede traer dentro lo que se haya escrito en el buscador. */
.barra-arriba .cola-arriba {
  flex: 0 1 auto; min-width: 0; margin-left: auto; padding-left: 0.9rem;
  display: flex; align-items: baseline; gap: 0.45rem;
  font-weight: 400;
}
.barra-arriba .filtro-arriba {
  color: var(--tenue); font-size: 0.9em;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.barra-arriba .cuenta-arriba { flex: none; color: var(--tenue); font-variant-numeric: tabular-nums; }
/* LA SECCIÓN POR LA QUE VAS, detrás del sitio donde estás y en segundo plano:
   lo primero es de quién es lo que se lee, y la sección es el detalle. El punto
   medio va en el ::before para que no haya que escribirlo cuando no hay
   sección — con el texto pegado quedaría un punto suelto al principio.
   El aire se pone con margen y no con espacios dentro del content: el título es
   un flex, cada trozo suyo es un elemento, y los espacios de los bordes de un
   elemento flex se descartan. Escritos, se leería «Adolfo Suárez· Afines». */
.barra-arriba .seccion-arriba { color: var(--tenue); font-weight: 400; margin-left: 0.4em; }
.barra-arriba .seccion-arriba::before { content: "·"; margin-right: 0.4em; }