/* ═══════════════════════════════════════════════════════════════════════════
   burocracks.css — EL SISTEMA VISUAL DE BUROCRACKS · 16/09/2026
   Versión definitiva. Sustituye entera a la del 15/09/2026.
   ═══════════════════════════════════════════════════════════════════════════

   QUÉ ES ESTE ARCHIVO
   Es el juego de piezas con el que se montan TODAS las pantallas de Burocracks:
   los colores, las letras, la cabecera, las tarjetas, las tablas, los
   formularios, los botones y los avisos.

     Es la caja de azulejos de la obra. Todos los azulejos salen de aquí. El día
     que se cambie el color de un azulejo se cambia en la caja y cambia la casa
     entera. Lo que NO se puede volver a hacer es ir pintando cada baldosa a
     mano, que es exactamente de dónde venimos: hoy cada pantalla se inyecta su
     propio <style> y escribe los colores a pelo, y por eso cada pestaña parece
     de un programa distinto.

   DE DÓNDE SALE
   De juzgar tres propuestas de sistema visual escritas el 16/09/2026 —«la
   oficina seria», «el cuaderno de contabilidad» y «el panel que te dice qué
   hacer»— y quedarse con lo mejor de cada una. Quién puso qué, y por qué, está
   escrito en `src/modules/gestoria/propuestas/JUICIO.md`. Aquí solo va el
   resultado, con el porqué pegado a cada pieza.

   ═══════════════════════════════════════════════════════════════════════════
   CÓMO SE USA · TRES REGLAS Y NINGUNA MÁS
   ═══════════════════════════════════════════════════════════════════════════
   1. Se carga UNA vez, con una etiqueta <link> en el HTML del ERP:
        <link rel="stylesheet" href="../modules/gestoria/burocracks.css">
      Y a partir de ahí NINGUNA pantalla vuelve a inyectar un <style> propio.

   2. TODO empieza por `#gst-raiz`, que es el cajón donde el ERP pinta el
      módulo. Fuera de ese cajón este archivo no pinta absolutamente nada y no
      puede estropear ninguna otra pestaña del programa.

        Es la valla de la obra: dentro se pinta lo que haga falta; fuera, ni una
        gota. Por eso hasta las variables se declaran sobre `#gst-raiz` y no
        sobre `:root`. `:root` es la casa entera —incluidas Nóminas, el
        Calendario y todo lo demás—; `#gst-raiz` es nuestra habitación.

   3. La densidad se elige con UNA clase en ese mismo cajón:
        <div id="gst-raiz" class="bc-operador">  ← lado Burocracks (Willy)
        <div id="gst-raiz" class="bc-cliente">   ← lado Mi empresa (el cliente)
      También vale ponerla en un trozo suelto para comparar las dos a la vez;
      así está hecha la página de muestra.

   NO DEPENDE DE NADA (CLAUDE.md §2.10). Ni CDN, ni librerías, ni fuentes de
   Google. Solo letras que ya están en el ordenador y CSS que entiende Chrome.

   «Zenon» siempre sin tilde. «Burocracks» con CKS.

   ═══════════════════════════════════════════════════════════════════════════
   COMPATIBLE CON LO QUE YA HAY · ESTO IMPORTA PARA NO ROMPER NADA
   ═══════════════════════════════════════════════════════════════════════════
   `gst-marca.js` ya inyecta hoy una hoja con estos mismos nombres de cajón
   (`--bc-negro`, `--bc-lima`, `--bc-filo`, `--bc-urgente`, `--bc-pronto`,
   `--bc-enplazo`, `--bc-cerrado`, `--bc-hecho`, `--bc-titular`, `--bc-texto`)
   y estas mismas clases (`bc-barra`, `bc-logo`, `bc-n0`…`bc-n4`,
   `bc-marca-nivel`, `bc-leyenda`, `bc-cajon`, `bc-cajon-t`, `bc-cajon-n`,
   `bc-bp`, `bc-ayuda`). Juan aprobó esos colores el 15/09/2026.

   Este archivo los RESPETA TODOS y los amplía. Así el paso siguiente es borrar
   la hoja que `gst-marca.js` inyecta —no reescribir las pantallas que ya la
   usan—, y lo que hoy funciona sigue funcionando el mismo día del cambio.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1 · LOS COLORES · EL ÚNICO SITIO CON UN CÓDIGO DE COLOR ESCRITO
   ═══════════════════════════════════════════════════════════════════════════
   Si hay que tocar un color, se toca AQUÍ. Ninguna pieza de más abajo lleva un
   código de color escrito: todas nombran uno de estos cajones.

     Una variable es un cajón con su etiqueta. Abajo nunca se dice «pon rojo»:
     se dice «pon el color de FUERA DE PLAZO». El día que lo de fuera de plazo
     se pinte de otra forma, cambia todo a la vez y nadie tiene que enterarse.
     Por eso los nombres son POR SU FUNCIÓN y no por su color.

   ── CONTRASTE · CALCULADO CON LA FÓRMULA DE WCAG 2.1, NO ESTIMADO ──────────
   Calculado el 16/09/2026 con un programilla que ANTES se pasó por dos colores
   que tenían que suspender —el gris enfermo de hoy (#9b9890 sobre blanco =
   2,88:1) y el lima como letra sobre blanco (1,28:1)— y los suspendió a los
   dos. Un chequeo que no se ha visto fallar no demuestra nada (CLAUDE.md §2.6).

   Mínimos: 4,50:1 para texto. 3,00:1 para una línea que LLEVE INFORMACIÓN
   (el borde de una casilla, el filo de un botón). Un separador decorativo no
   tiene mínimo porque no dice nada que no esté ya escrito.

     TINTA SOBRE LOS CUATRO FONDOS      hoja     papel    franja   realce
                                       #FFFFFF  #EDEDED  #F4F3EF  #E7E5DF
       --bc-tinta    #1C1C1C            17,04    14,56    15,35    13,53
       --bc-tinta-2  #4C4C4C             8,59     7,34     7,73     6,82
       --bc-tinta-3  #5C5C5C             6,69     5,71     6,02     5,31
     ↑ hasta el gris MÁS FLOJO de este sistema pasa AA sobre los cuatro fondos.
       Compárese con el `--txt3` del ERP: 2,88:1, y es el color con el que hoy
       están escritos el título de TODAS las tarjetas y más de 110 explicaciones
       del lado cliente.

     LOS CINCO ESTADOS (letra de color)   hoja   papel  franja  su fondo suave
       fuera de plazo  #B02617            6,70   5,72   6,03    5,75
       vence pronto    #8A5B00            5,87   5,01   5,29    5,23
       en plazo        #14568F            7,62   6,50   6,86    6,62
       cerrado         #5C5C5C            6,69   5,71   6,02    5,81
       hecho / cuadra  #1F6B3A            6,52   5,57   5,87    5,66
     Y la tinta encima de cada uno de esos fondos suaves: 14,63 · 15,19 · 14,82
     · 14,81 · 14,81. O sea que un aviso se puede leer entero, no solo su
     titular.

     LA MARCA
       negro sobre lima (botón principal) ............... 13,30
       lima sobre negro (la marca en la banda) .......... 13,30
       niebla sobre negro (el texto de la banda) ........ 14,56
       apoyo #B5B5B5 sobre negro (el NIF en la banda) ....  8,31
       tinta sobre lima-suave (fila elegida, lo hallado) . 16,12
       blanco sobre el rojo (la chapa de un contador) ....  6,70

     LAS LÍNEAS (mínimo 3,00 si llevan información)
       --bc-borde-mando  #6E6E68 ... 5,13 sobre hoja · 4,62 sobre franja
         (el filo de una casilla y de un botón: SÍ informa, y pasa hasta AA)
       --bc-raya-fuerte  #8A8A8A ... 3,45 sobre hoja · 3,11 sobre franja
         (el filete que cierra una tabla)
       --bc-lima-borde   #7A9328 ... 3,48 sobre hoja
         (el filo del botón lima, que sobre blanco solo no se vería)
       --bc-raya         #D9D7D1 ... 1,44 — DECORACIÓN. Es el renglón del
         cuaderno: guía el ojo y no dice nada. Si algún día se le cuelga un
         significado, sube a raya-fuerte.

   ── LA REGLA DEL LIMA · MEDIDA, NO OPINADA ────────────────────────────────
     1. EL LIMA ES RELLENO, NO LETRA. Va de fondo y encima siempre el negro.
     2. EL LIMA SOBRE FONDO CLARO NO EXISTE: ni letra, ni borde, ni subrayado
        (1,28:1; ni siquiera llega al 3,00 de una línea).
     3. EL LIMA SOBRE NEGRO SÍ: ahí da 13,30 y es donde se reconoce la marca.
   Para eso está `--bc-filo`: «el trazo de la marca que SÍ se ve en el fondo que
   toca». De día es el negro; de noche, el lima. Un solo nombre, y cada modo
   pone el que se ve.                                                          */

#gst-raiz {

  /* ── LOS CUATRO OFICIALES · burocracks-maestro.md:113. No se tocan ────── */
  --bc-negro:  #1C1C1C;
  --bc-lima:   #C6F432;
  --bc-niebla: #EDEDED;
  --bc-blanco: #FFFFFF;

  /* El trazo de marca que se ve en el fondo que toca. Ver la regla del lima. */
  --bc-filo: var(--bc-negro);

  /* ── EL PAPEL · cuatro superficies y se acabó ────────────────────────────
     Un despacho ordenado no tiene quince grises. Cada una tiene un trabajo:  */
  --bc-papel:  var(--bc-niebla);  /* el fondo de la pestaña: la mesa */
  --bc-hoja:   var(--bc-blanco);  /* la tarjeta: la hoja encima de la mesa */
  --bc-franja: #F4F3EF;           /* cabecera de tabla, banda alterna, mando en reposo */
  --bc-realce: #E7E5DF;           /* la fila que tiene el ratón o el foco encima */

  /* ── LA TINTA · tres pesos, y los tres legales ────────────────────────── */
  --bc-tinta:   #1C1C1C;  /* el dato: importes, nombres, titulares */
  --bc-tinta-2: #4C4C4C;  /* la segunda línea de una fila, el texto corrido */
  --bc-tinta-3: #5C5C5C;  /* rótulos en mayúsculas y notas al pie. NUNCA más flojo */
  --bc-tinta-sobre-negro: #B5B5B5;  /* el apoyo dentro de la banda de marca */

  /* ── LAS LÍNEAS · «trazo fino»: todas de 1 px, lo que cambia es el tono ── */
  --bc-raya:        #D9D7D1;  /* el renglón de cada fila. Decoración */
  --bc-raya-media:  #BEBBB3;  /* el renglón reforzado cada cinco filas */
  --bc-raya-fuerte: #8A8A8A;  /* el filete que cierra una tabla o una caja */
  --bc-borde-mando: #6E6E68;  /* OBLIGATORIO en todo lo que se pulsa o se escribe.
                                 Una casilla se tiene que VER que es una casilla */

  /* ── DERIVADOS DEL LIMA ────────────────────────────────────────────────
     Se calculan del oficial con `color-mix`, que es CSS normal (Chrome 111+,
     Firefox 113+, Safari 16.2+). Abajo, §17, hay repuesto escrito a mano. */
  --bc-lima-suave:  color-mix(in srgb, var(--bc-lima) 22%, #FFFFFF);  /* #F4FDD6 */
  --bc-lima-borde:  #7A9328;   /* el filo del botón lima: 3,48:1 sobre blanco */
  --bc-lima-fuerte: #ACD42F;   /* el lima al pasar el ratón */

  /* ── LOS CINCO ESTADOS · EL ÚNICO COLOR DE LA PANTALLA ───────────────────
     Los aprobó Juan el 15/09/2026 y están en `gst-marca.js`. No se tocan.
     Son apagados a propósito: son colores de expediente, no de folleto, y no
     compiten con el lima. Y un color de estado NO se usa jamás para decorar:
     si algo está en rojo es porque está fuera de plazo. Punto.                */
  --bc-urgente: #B02617;  --bc-urgente-f: #FBEAE7;  /* ▲ ya pasó el plazo */
  --bc-pronto:  #8A5B00;  --bc-pronto-f:  #FAF1DF;  /* ◆ quedan pocos días */
  --bc-enplazo: #14568F;  --bc-enplazo-f: #E8F0F9;  /* ● tiene fecha y da tiempo */
  --bc-cerrado: #5C5C5C;  --bc-cerrado-f: #F0EFEB;  /* ○ todavía no toca */
  --bc-hecho:   #1F6B3A;  --bc-hecho-f:   #E6F2EA;  /* ✓ presentado, cuadra */

  /* El verde de «hecho» NO es el lima, y es a propósito. El lima dice
     «Burocracks»; el verde dice «esto ya está». Si fueran el mismo, una
     pantalla llena de cosas hechas parecería una pantalla llena de marca y el
     lima dejaría de significar nada.

     Y el gris de «cerrado» es el mismo que el de las notas al pie a propósito
     también: las dos cosas quieren decir «aquí no hay nada que hacer». */

  /* ── LAS LETRAS ─────────────────────────────────────────────────────────
     Las dos vienen con Windows y con Office desde hace quince años, o sea que
     están en el Chrome de Juan y en el de Willy. Ninguna se descarga.

     TITULAR · Constantia. Un serif de documento con más aristas que la Georgia
       del resto del ERP de Zenon. Eso es justo lo que se busca: al entrar en
       Burocracks cambia la letra de los titulares, y solo eso ya dice «has
       cambiado de programa». Los recambios (Cambria, Palatino, Georgia) son
       serifs del mismo aire para quien entre desde un Mac o un Android.

     TEXTO · Corbel. Palo seco humanista, estrecho, cómodo a 13 px, que es la
       medida a la que Willy trabaja ocho horas.

     CIFRAS · la misma Corbel, con los números forzados. Ver §3: ahí está el
       detalle que más importa en una gestoría y que casi nadie ve.

     CÓDIGO · monoespaciada, y SOLO para lo que se copia y se compara letra a
       letra: IBAN, cuenta de cotización, número de asiento. Ahí hace falta
       distinguir el 0 de la O. Los EUROS no van en mono: van en Corbel con
       cifras tabulares (§3), que cuadran igual y no parecen un recibo de los
       años noventa.                                                           */
  /* 17/09/2026 · Era un serif (Constantia) y el dossier corporativo manda
     «titulares en grotesca de peso alto» (p. 20, normas de uso). Grotesca es
     palo seco: lo contrario. Corregido aquí y en gst-marca.js, que es el que
     manda de verdad; esta línea existe para que la muestra suelta
     (burocracks-muestra.html) se vea igual sin cargar el módulo. */
  --bc-titular: "Arial Black", "Helvetica Neue", "Segoe UI Black", Impact, "Segoe UI", system-ui, Arial, sans-serif;
  --bc-texto:   Corbel, Candara, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bc-cifra:   Corbel, Candara, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bc-codigo:  Consolas, "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;

  /* ── LA ESCALA TIPOGRÁFICA · SIETE PELDAÑOS Y CADA UNO CON SU TRABAJO ────
     Siete, no doce. Con doce nadie acierta cuál toca y acaban conviviendo 14,
     14,5 y 15 px en la misma pantalla, que es lo que pasa hoy.

       --bc-t7  30px  Constantia  LA CIFRA. El «te toca pagar 2.418,65 €».
                                  UNA por pantalla. Si hay dos, no hay ninguna.
       --bc-t6  21px  Constantia  LA ACCIÓN. La frase de lo que hay que hacer.
                                  Es lo primero que se lee en toda la pantalla.
       --bc-t5  17px  Constantia  Título de pantalla y de panel.
       --bc-t4  15px  Constantia  Título de tarjeta y de grupo de campos.
       --bc-t3  ~13px Corbel      El dato y el texto corrido. Lo pone la densidad.
       --bc-t2  ~12px Corbel      Etiqueta de campo, cabecera de tabla, ayuda.
       --bc-t1  12px  Corbel      Unidades, pies de cifra, sellos, rótulos. Lo
                                  que no se lee: solo se reconoce.

     MAYÚSCULAS: solo en --bc-t1 y en la cabecera de una tabla, y siempre con
     `letter-spacing` positivo, que en mayúsculas no es adorno —sin él se pegan
     y cuestan de leer—. Una frase entera en mayúsculas no se lee, se descifra:
     es exactamente por qué el cartel rojo del BOE de «Mis papeles» asusta.     */
  /* 17/09/2026 · era 11px. Sube a 12 por lo mismo que se cuenta en la §19:
     por debajo de 12 px la letra deja de leerse y empieza a descifrarse, y
     quien trabaja aquí lo hace ocho horas seguidas. */
  --bc-t1: 12px;
  --bc-t4: 15px;
  --bc-t5: 17px;
  --bc-t6: 21px;
  --bc-t7: 30px;
  /* --bc-t2 y --bc-t3 los pone la densidad (§4), porque son los que cambian. */

  /* ── ESQUINAS Y SOMBRAS · «trazo fino» ──────────────────────────────────
     La marca es de líneas finas. Nada de esquinas de 12 px, que son de una
     aplicación de móvil. Y casi ninguna sombra: aquí se ordena con líneas.
     Solo levantan del papel las dos cosas que de verdad flotan: la cabecera de
     tabla cuando se pega arriba y la barra de guardar cuando se pega abajo.   */
  --bc-r:   4px;    /* casillas, botones, celdas */
  --bc-r2:  7px;    /* tarjetas y paneles */
  --bc-r3: 10px;    /* la cabecera */
  --bc-rp: 999px;   /* pastilla: solo para sellos de estado */
  --bc-sombra-pega: 0 3px 6px -3px rgba(28,28,28,.30);
  --bc-sombra-flot: 0 -3px 8px -4px rgba(28,28,28,.22);
  --bc-sombra-alta: 0 8px 24px rgba(28,28,28,.18);

  /* ── ANCHOS DE CASILLA · POR LO QUE LLEVAN DENTRO, NO POR LA REJILLA ─────
     En `ch`, que es «el ancho de un cero». Un NIF son nueve caracteres: pedir
     13ch es pedir el hueco de un NIF, no un sexto de la pantalla. Si mañana
     cambia la letra, el hueco se ajusta solo.

       Es la diferencia entre encargar un cajón «de 40 cm» y encargarlo «para
       que quepan los tornillos».

     Y los nombres son POR EL DATO, no por el tamaño (no «corto/medio/largo»,
     sino «cp/nif/eur»). Eso es lo que permite que mañana `campo()` reciba
     `'cp'` y coloque la casilla sin que nadie decida nada a ojo.               */
  --bc-w-cp:     8ch;   /* 47004 */
  --bc-w-nif:   13ch;   /* B47318204 */
  --bc-w-fecha: 13ch;   /* 20/10/2026 */
  --bc-w-pct:    9ch;   /* 21,00 % */
  --bc-w-eur:   15ch;   /* 1.234.567,89 € */
  --bc-w-ccc:   20ch;   /* 47/1038475/21 */
  --bc-w-corto: 18ch;   /* CNAE, epígrafe, código de cuenta */
  --bc-w-medio: 30ch;   /* municipio, provincia, nombre comercial */
  --bc-w-largo: 46ch;   /* razón social, domicilio */

  /* Ancho máximo de una línea que hay que LEER. Más de 70 caracteres y el ojo
     se pierde al volver al principio del renglón. */
  --bc-lectura: 68ch;

  color-scheme: light;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2 · MODO NOCHE · APAGADO POR DEFECTO, Y A PROPÓSITO
   ═══════════════════════════════════════════════════════════════════════════
   Juan decidió el 15/09/2026 que mientras Burocracks viva dentro del ERP de
   Zenon —que es blanco entero— el modo noche no se enciende solo: dos programas
   con temas distintos en la misma pantalla marean, y una pestaña negra dentro
   de un programa blanco parece una avería.

     El interruptor está instalado, pero no lo acciona el vecino: lo acciona
     quien vive en la casa.

   Por eso NO hay ninguna regla de `prefers-color-scheme` aquí: que el ordenador
   esté en oscuro no basta. Se enciende a mano, de dos maneras:
       <div id="gst-raiz" class="bc-noche">        ← toda la pestaña
       <div id="gst-raiz" data-tema="oscuro">      ← igual, con atributo
   Y `.bc-noche` vale también sobre un trozo suelto, para poder enseñar los dos
   modos uno al lado del otro. Es lo que hace la página de muestra.

   Aquí NO se inventa ni una pieza: se vuelven a llenar los mismos cajones, así
   que ni una sola regla de más abajo sabe que existe el modo noche.

   CONTRASTE MEDIDO EN NOCHE (papel #141414 · hoja #1E1E1E · franja #2A2A2A):
     tinta   #EDEDED → 14,24 sobre hoja · 15,74 sobre papel
     tinta-2 #B8B8B8 →  8,40 sobre hoja
     tinta-3 #9E9E9E →  6,22 sobre hoja · 5,36 sobre franja
     urgente #FF9384 7,75 · pronto #E8B33F 8,69 · enplazo #7FB6F0 7,82
     cerrado #ADADAD 7,43 · hecho #6FCB8F 8,43   (todos sobre hoja)
     lima    #C6F432 → 13,01 sobre hoja  ← aquí el lima por fin puede ser trazo
     borde-mando #8A8A84 → 4,80  ·  raya-fuerte #6E6E6E → 3,27   (mínimo 3,00)

   Los cinco estados CAMBIAN de noche: los de día son oscuros y sobre fondo
   oscuro no llegarían ni de lejos a 4,50. Mismo nombre de cajón, otro color
   dentro.                                                                     */

#gst-raiz.bc-noche,
#gst-raiz[data-tema="oscuro"],
#gst-raiz .bc-noche {
  --bc-papel:  #141414;
  --bc-hoja:   #1E1E1E;
  --bc-franja: #2A2A2A;
  --bc-realce: #323232;

  --bc-tinta:   #EDEDED;
  --bc-tinta-2: #B8B8B8;
  --bc-tinta-3: #9E9E9E;

  --bc-raya:        #303030;
  --bc-raya-media:  #4A4A4A;
  --bc-raya-fuerte: #6E6E6E;
  --bc-borde-mando: #8A8A84;

  --bc-filo: var(--bc-lima);
  --bc-lima-suave: #2C3A0B;    /* tinta encima: 10,45:1 */

  --bc-urgente: #FF9384;  --bc-urgente-f: #3A1712;
  --bc-pronto:  #E8B33F;  --bc-pronto-f:  #33260A;
  --bc-enplazo: #7FB6F0;  --bc-enplazo-f: #12243A;
  --bc-cerrado: #ADADAD;  --bc-cerrado-f: #262626;
  --bc-hecho:   #6FCB8F;  --bc-hecho-f:   #133023;

  --bc-sombra-pega: 0 3px 8px -3px rgba(0,0,0,.65);
  --bc-sombra-flot: 0 -3px 10px -4px rgba(0,0,0,.60);
  --bc-sombra-alta: 0 8px 24px rgba(0,0,0,.70);

  color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3 · LAS CIFRAS · EL DETALLE QUE MÁS IMPORTA EN UNA GESTORÍA
   ═══════════════════════════════════════════════════════════════════════════
   Si este archivo sirviera solo para una cosa, sería esta.

   EL PRIMER PROBLEMA, EL DE SIEMPRE
   En una letra normal el «1» es más estrecho que el «8». En un párrafo eso está
   bien, se lee mejor. En una columna de euros es un desastre: 1.111,11 y
   8.888,88 ocupan anchos distintos y las unidades dejan de caer una debajo de
   otra. `tabular-nums` obliga a que todos los dígitos midan lo mismo.

   EL SEGUNDO, QUE ES ESPECÍFICO DE LA LETRA DE BUROCRACKS
   Corbel y Candara traen de fábrica cifras «de estilo antiguo»: el 3, el 4, el
   5, el 7 y el 9 bajan por debajo del renglón, y el 6 y el 8 suben.

     Son las cifras que se usan dentro de un párrafo, donde se quiere que el
     número no cante. En la columna de un libro mayor es justo lo contrario de
     lo que hace falta: parece que los números bailan.

   `lining-nums` las pone todas a la misma altura. SIN ESTO, una columna en
   Corbel no cuadra por mucho `tabular-nums` que se le ponga. Se declara dos
   veces a propósito —la forma moderna y la antigua— para navegadores que no
   entienden la primera.

   Y ESTO VALE TAMBIÉN PARA LOS CÓDIGOS DE CUENTA. 430000 y 477000 tienen que
   caer en columna igual que los euros: en una lista de cuentas el ojo busca el
   número antes que el nombre.

   TRES REGLAS MÁS, QUE SON DE OFICIO Y NO DE CSS, pero se escriben aquí porque
   es aquí donde se olvidan:
   · El menos es «−» (U+2212), no el guion del teclado. El guion es corto y se
     confunde con un separador; el menos mide lo mismo que un dígito.
   · El punto de millar SIEMPRE, y la coma decimal SIEMPRE: 12.345,67 €. Hoy hay
     siete funciones distintas de euro en la capa de pantalla y una de ellas
     escribe 12345,67 € sin punto. Dos cifras de lo mismo, en pantallas vecinas,
     escritas distinto.
   · Un cero no es lo mismo que «nada». El cero se escribe apagado
     (`bc-cifra-cero`); el hueco vacío se deja vacío. Así se distingue «cero
     euros» de «no lo sé».                                                     */

#gst-raiz .bc-cifra,
#gst-raiz .bc-num,
#gst-raiz td.bc-num,
#gst-raiz th.bc-num,
#gst-raiz .bc-cuenta-cod,
#gst-raiz input.bc-in--cifra,
#gst-raiz input.bc-in--codigo {
  font-family: var(--bc-cifra);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  white-space: nowrap;
}

#gst-raiz .bc-num { text-align: right; }

/* El código de cuenta: cifras cuadradas, pero a la izquierda y en tinta plena,
   porque es un identificador, no un importe. */
#gst-raiz .bc-cuenta-cod { font-weight: 700; color: var(--bc-tinta); text-align: left; }

/* LA CIFRA GRANDE. Va SIEMPRE con su rótulo encima y su matiz debajo, en ese
   orden (§9). Hoy el orden está invertido: primero el susto de 27 px y debajo,
   en gris pequeño, el matiz de que ese número está calculado sin los gastos
   que todavía faltan. */
#gst-raiz .bc-cifra-grande {
  font-family: var(--bc-cifra);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--bc-t7);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--bc-tinta);
  display: block;
  white-space: nowrap;
}

/* El número en rojo SOLO si significa algo malo. Si es solo un signo —un abono,
   un haber— va en tinta normal. Por eso son dos clases y no una regla que mire
   el signo: el programa no sabe si un menos es una mala noticia. */
#gst-raiz .bc-cifra-mal  { color: var(--bc-urgente); }
#gst-raiz .bc-cifra-bien { color: var(--bc-hecho); }
#gst-raiz .bc-cifra-cero { color: var(--bc-tinta-3); }

/* Lo que se copia y se compara letra a letra. */
#gst-raiz .bc-codigo {
  font-family: var(--bc-codigo);
  font-size: .94em;
  letter-spacing: .02em;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4 · LAS DOS DENSIDADES · UNA CLASE, NUNCA DOS HOJAS
   ═══════════════════════════════════════════════════════════════════════════
   WILLY entra a las ocho y sale a las seis, lleva muchas empresas y quiere ver
   el máximo de filas de una vez, comparar y moverse con el teclado. La
   explicación le sobra porque se la sabe.

   EL CLIENTE entra cada quince días, no sabe de impuestos y quiere saber qué le
   toca hacer y cuánto va a pagar. La explicación ES el producto.

   Las piezas son LAS MISMAS. Lo que cambia son seis medidas y una decisión: si
   las explicaciones se ven o no.

     Es el mismo mueble con dos alturas de balda. La estantería no cambia; lo
     que cambia es cuánto se separan los estantes.

   POR QUÉ NO SON DOS HOJAS: porque el día que haya que tocar la tabla hay que
   tocarla UNA vez. Dos hojas se separan solas en tres meses — es exactamente lo
   que ha pasado con las siete hojas inyectadas a mano que hay hoy.

   Ninguna pieza de este archivo escribe un tamaño a mano: todas leen estos
   cajones. Cambiar la clase de la raíz cambia la pestaña entera de golpe.

   CUENTA HECHA con 900 px de alto de ventana (calculada sobre los valores de
   este archivo; no está medida en un navegador de verdad, eso es la tarea #7):
     hoy ......... cabecera 204 px (305 en Laboral) + fila de 26 px → 18-22 filas
     operador .... cabecera ~126 px + fila de 25 px ............... ~30 filas   */

/* ── OPERADOR · densidad de trabajo ───────────────────────────────────────── */
#gst-raiz.bc-operador,
#gst-raiz .bc-operador {
  --bc-e: 6px;              /* el escalón base. Todo lo demás sale de aquí */
  --bc-t2: 12px;
  --bc-t3: 13px;
  --bc-fila: 25px;          /* alto de una fila de tabla */
  --bc-mando: 28px;         /* alto de una casilla y de un botón */
  --bc-tarjeta-p: 12px;     /* el margen de dentro de la tarjeta */
  --bc-interlinea: 1.45;
  --bc-ayuda-visible: none; /* al que se lo sabe no se le explica */
}

/* ── CLIENTE · densidad de lectura ────────────────────────────────────────── */
#gst-raiz.bc-cliente,
#gst-raiz .bc-cliente {
  --bc-e: 10px;
  --bc-t2: 13px;
  --bc-t3: 15px;
  --bc-fila: 40px;          /* se puede tocar con el dedo */
  --bc-mando: 36px;         /* 36 px es el mínimo cómodo para un dedo */
  --bc-tarjeta-p: 24px;
  --bc-interlinea: 1.6;
  --bc-ayuda-visible: block;
}

/* Si alguien se olvida de poner la clase, se comporta como operador: aprieta,
   pero no descoloca nada. Es el valor seguro. */
#gst-raiz:not(.bc-cliente):not(.bc-operador) {
  --bc-e: 6px;          --bc-t2: 12px;        --bc-t3: 13px;
  --bc-fila: 25px;      --bc-mando: 28px;     --bc-tarjeta-p: 12px;
  --bc-interlinea: 1.45; --bc-ayuda-visible: none;
}

/* Los escalones de espacio salen todos del escalón base. Si algún día una
   pantalla necesita «13 px», la respuesta es que no: o 12 o 16. Eso es lo que
   hace que las hojas queden a escuadra. */
#gst-raiz {
  --bc-e0: calc(var(--bc-e) * .5);   /*  3 /  5 */
  --bc-e1: var(--bc-e);              /*  6 / 10 */
  --bc-e2: calc(var(--bc-e) * 1.5);  /*  9 / 15 */
  --bc-e3: calc(var(--bc-e) * 2);    /* 12 / 20 */
  --bc-e4: calc(var(--bc-e) * 3);    /* 18 / 30 */
  --bc-e5: calc(var(--bc-e) * 4);    /* 24 / 40 */
}

/* LA CHINCHETA. El operador que un día quiere leer las explicaciones pone esta
   clase y aparecen todas, SIN cambiar la densidad. Hoy esa idea existe en una
   sola pantalla (el Expediente, y arranca apagada y se olvida al recargar);
   aquí vale en todas y es una clase, no un estado que se pierde. */
#gst-raiz.bc-pistas { --bc-ayuda-visible: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   §5 · LA BASE Y LA JERARQUÍA TIPOGRÁFICA
   ═══════════════════════════════════════════════════════════════════════════
   HOY LA JERARQUÍA ESTÁ DEL REVÉS, Y ES MEDIBLE: `.ev-h` —el título de TODAS
   las tarjetas— es de 10,5 px, en mayúsculas y del gris de 2,88:1, mientras el
   cuerpo es de 15 px. El titular de cada tarjeta es el texto MÁS PEQUEÑO y MÁS
   FLOJO de la pantalla.

     Es un libro donde los capítulos están en letra pequeña y las notas al pie
     en grande. Se puede leer, pero no se puede hojear.

   La regla, sin excepciones:

       TÍTULO  >  CUERPO  >  APOYO  >  RÓTULO

   El rótulo en mayúsculas sigue existiendo —es útil, nombra una columna o una
   cifra en el mínimo espacio— pero es la ETIQUETA de la carpeta: va ENCIMA del
   título y NUNCA lo sustituye.                                                */

#gst-raiz {
  font-family: var(--bc-texto);
  font-size: var(--bc-t3);
  line-height: var(--bc-interlinea);
  color: var(--bc-tinta-2);
  background: var(--bc-papel);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

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

/* El ERP de alrededor tiene su propia hoja y hereda hacia dentro. Se corta
   aquí: dentro de este cajón manda Burocracks. */
#gst-raiz button, #gst-raiz input, #gst-raiz select, #gst-raiz textarea {
  font-family: inherit; color: inherit; margin: 0;
}
/* 24/09/2026 · EL BOTÓN PRINCIPAL SE LEÍA GRIS OSCURO SOBRE NEGRO.
   La regla de arriba («color: inherit») pesa más que la de la casa
   (`.bp{color:#f8f6f1}`, en el monolito) porque lleva el #gst-raiz delante.
   Resultado, medido en Chromium: letra rgb(76,76,76) sobre fondo rgb(26,26,26),
   y «+ Dar de alta un trabajador» o «Guardar el expediente» parecían botones
   apagados. Solo se le devuelve a `.bp` su color de siempre; nada más cambia. */
#gst-raiz button.bp { color: #f8f6f1; }
#gst-raiz h1, #gst-raiz h2, #gst-raiz h3, #gst-raiz h4,
#gst-raiz p, #gst-raiz figure, #gst-raiz ul, #gst-raiz ol { margin: 0; padding: 0; }
#gst-raiz ul, #gst-raiz ol { list-style: none; }
#gst-raiz fieldset { border: 0; padding: 0; min-width: 0; }

#gst-raiz .bc-t-pantalla {
  font-family: var(--bc-titular);
  font-size: var(--bc-t5);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--bc-tinta);
}
#gst-raiz .bc-t-tarjeta,
#gst-raiz .bc-tit {          /* `bc-tit` existe ya en gst-marca.js: se respeta */
  font-family: var(--bc-titular);
  font-size: var(--bc-t4);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--bc-tinta);
}
/* LA FRASE DE LA ACCIÓN. Es el peldaño más grande después de la cifra, y es lo
   primero que se lee en una pantalla del cliente. Más larga que esto ya no es
   una frase: es un párrafo, y un párrafo no es una acción. */
#gst-raiz .bc-frase {
  font-family: var(--bc-titular);
  font-size: var(--bc-t6);
  font-weight: 700;
  line-height: 1.3;
  color: var(--bc-tinta);
  max-width: 46ch;
}

/* EL RÓTULO. Pequeño y en mayúsculas, sí, pero en tinta-3 (6,69:1), no en el
   gris muerto. Y con `letter-spacing`, que en mayúsculas no es adorno. */
#gst-raiz .bc-rotulo {
  display: block;
  font-family: var(--bc-texto);
  font-size: var(--bc-t1);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--bc-tinta-3);
}

#gst-raiz .bc-apoyo { font-size: var(--bc-t2); color: var(--bc-tinta-2); }
#gst-raiz .bc-mini  { font-size: var(--bc-t1); color: var(--bc-tinta-3); }
#gst-raiz .bc-fuerte { color: var(--bc-tinta); font-weight: 700; }
#gst-raiz .bc-lectura { max-width: var(--bc-lectura); }

/* ── LA EXPLICACIÓN · LO ÚNICO QUE LA DENSIDAD PUEDE APAGAR ─────────────────
   Los seis párrafos de cabecera que hoy salen SIEMPRE en las seis pantallas
   —explicándole a un profesional qué es un libro registro y qué es la partida
   doble— son exactamente esto. No se borran del HTML: se apagan. Así la misma
   pantalla sirve a los dos, y si un día Willy los quiere, es una clase. */
#gst-raiz .bc-explica {
  display: var(--bc-ayuda-visible);
  font-size: var(--bc-t2);
  line-height: 1.55;
  color: var(--bc-tinta-2);
  max-width: var(--bc-lectura);
  margin-top: var(--bc-e0);
}
/* La que se enseña siempre, también al operador: porque cambia con el dato y
   no es paja (de dónde sale una cifra, qué NO vigila un semáforo). */
#gst-raiz .bc-explica--siempre { display: block; }

/* Un enlace se distingue SIN depender del color: subrayado siempre. */
#gst-raiz a {
  color: var(--bc-enplazo);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#gst-raiz a:hover { color: var(--bc-tinta); }

/* Lo que encuentra el buscador. Es el ÚNICO sitio donde el lima toca un fondo
   claro, y funciona porque es RELLENO con la tinta negra encima: 16,12:1. */
#gst-raiz mark, #gst-raiz .bc-marcado {
  background: var(--bc-lima-suave);
  color: var(--bc-tinta);
  box-shadow: inset 0 -2px 0 var(--bc-lima-borde);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── EL FOCO DEL TECLADO · SE VE SIEMPRE, Y ES EL MISMO EN TODO ─────────────
   Willy trabaja con las manos en el teclado, así que el foco no es un extra: es
   la herramienta. Y quien no usa ratón no puede trabajar sin él.

   El anillo es DOBLE, y no por adorno: el filo de la marca lleva el contraste
   (negro de día, 17,04:1 sobre blanco; lima de noche, 13,01:1 sobre la hoja) y
   el lima de fuera hace de halo para que se vea también encima de un botón
   lima, donde un anillo negro solo se confundiría con su propio borde.

     El lima es la pegatina de la marca; el negro es el que se ve. Juntos, se ve
     y además es nuestro.

   `:focus-visible` y no `:focus` para que el anillo salga al tabular y no al
   hacer clic… salvo en las casillas de escribir, donde el foco marca DÓNDE
   ESTÁS ESCRIBIENDO y tiene que verse también con el ratón.                   */
#gst-raiz :focus-visible {
  outline: 2px solid var(--bc-filo);
  outline-offset: 2px;
  border-radius: var(--bc-r);
  box-shadow: 0 0 0 5px var(--bc-lima);
}
#gst-raiz.bc-noche :focus-visible,
#gst-raiz[data-tema="oscuro"] :focus-visible,
#gst-raiz .bc-noche :focus-visible { box-shadow: 0 0 0 5px rgba(28,28,28,.92); }

#gst-raiz .bc-in:focus,
#gst-raiz .bc-sel:focus,
#gst-raiz textarea.bc-in:focus {
  outline: 2px solid var(--bc-filo);
  outline-offset: 0;
  border-color: var(--bc-filo);
}

/* Si el ordenador pide menos movimiento, se le hace caso. No es un detalle:
   hay gente a la que el movimiento le marea de verdad. */
@media (prefers-reduced-motion: reduce) {
  #gst-raiz *, #gst-raiz *::before, #gst-raiz *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Para lectores de pantalla: lo que se oye y no se ve. Es lo que permite que
   una forma o un icono lleven su palabra sin ocupar sitio. */
#gst-raiz .bc-solo-voz {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6 · LOS CINCO NIVELES · EL COLOR NUNCA VA SOLO
   ═══════════════════════════════════════════════════════════════════════════
       nivel 1 · FUERA DE PLAZO   ▲  filete de 4 px macizo     ya pasó el plazo
       nivel 2 · VENCE PRONTO     ◆  filete de 4 px a rayas    quedan pocos días
       nivel 3 · EN PLAZO         ●  filete de 2 px macizo     hay tiempo
       nivel 4 · TODAVÍA NO TOCA  ○  filete de 2 px de puntos  sin plazo abierto
       nivel 0 · HECHO            ✓  filete de 4 px macizo     presentado, cuadra

   Cinco y ni uno más. Con seis, nadie recuerda cuál va antes.

   CADA NIVEL LLEVA CUATRO SEÑALES Y SOLO UNA ES EL COLOR: la forma (▲ ◆ ● ○ ✓),
   el grosor y el estilo del filete, la palabra escrita y el color. Uno de cada
   doce hombres no distingue bien el rojo del verde, y el ámbar y el rojo se le
   parecen mucho. El examen es imprimir la pantalla en blanco y negro: se tiene
   que seguir entendiendo. Ese examen lo suspenden todas las pantallas de hoy.

   CÓMO FUNCIONA, Y POR QUÉ ASÍ
   Una clase de nivel NO pinta nada por sí sola: solo RELLENA CUATRO CAJONES. El
   filete lo dibuja después cada pieza como le corresponde —el bloque en su
   borde izquierdo, la fila de tabla en su primera celda, el sello en su
   contorno—. Eso es lo que arregla de raíz el fallo de hoy: `gst-marca.js` le
   pone `border-left` y `padding-left` a cualquier cosa que lleve `.bc-n2`, y
   cuando esa cosa es un `<tr>` el padding no aplica y el borde pelea con
   `border-collapse`, así que EL MARCADOR NO SE VE.

   Y de paso: como el cajón de la forma se hereda, `<span class="bc-n1
   bc-marca-nivel">` funciona igual que `<div class="bc-n1"><span
   class="bc-marca-nivel">`. Las dos escrituras pintan el triángulo.           */

#gst-raiz .bc-n1 { --bc-nivel: var(--bc-urgente); --bc-nivel-f: var(--bc-urgente-f); --bc-nivel-forma: "\25B2"; --bc-nivel-filete: 4px; --bc-nivel-estilo: solid; }
#gst-raiz .bc-n2 { --bc-nivel: var(--bc-pronto);  --bc-nivel-f: var(--bc-pronto-f);  --bc-nivel-forma: "\25C6"; --bc-nivel-filete: 4px; --bc-nivel-estilo: dashed; }
#gst-raiz .bc-n3 { --bc-nivel: var(--bc-enplazo); --bc-nivel-f: var(--bc-enplazo-f); --bc-nivel-forma: "\25CF"; --bc-nivel-filete: 2px; --bc-nivel-estilo: solid; }
#gst-raiz .bc-n4 { --bc-nivel: var(--bc-cerrado); --bc-nivel-f: var(--bc-cerrado-f); --bc-nivel-forma: "\25CB"; --bc-nivel-filete: 2px; --bc-nivel-estilo: dotted; }
#gst-raiz .bc-n0 { --bc-nivel: var(--bc-hecho);   --bc-nivel-f: var(--bc-hecho-f);   --bc-nivel-forma: "\2713"; --bc-nivel-filete: 4px; --bc-nivel-estilo: solid; }

/* La forma escrita. Se puede poner sola, en una leyenda o delante de un texto. */
#gst-raiz .bc-marca-nivel::before {
  content: var(--bc-nivel-forma, "\25CF") "\00a0";
  color: var(--bc-nivel, var(--bc-tinta-3));
  font-style: normal;
}

/* LA LEYENDA. Va una vez por pantalla, al pie de la primera lista con niveles.
   Sin leyenda, cinco formas son cinco adivinanzas. Y va AL LADO de lo que
   explica, no en una página de ayuda que no abre nadie. */
#gst-raiz .bc-leyenda {
  display: flex; flex-wrap: wrap;
  gap: var(--bc-e0) var(--bc-e4);
  font-size: var(--bc-t1);
  color: var(--bc-tinta-2);
  line-height: 1.6;
  margin: var(--bc-e1) 0;
}
#gst-raiz .bc-leyenda span { white-space: nowrap; }

/* ── EL SELLO DE ESTADO · una pastilla con la forma Y la palabra ────────────
   Un punto de color a secas no es un estado: es un acertijo. Aquí siempre lleva
   escrito lo que quiere decir. */
#gst-raiz .bc-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--bc-t1);
  font-weight: 700;
  line-height: 1.5;
  padding: 1px var(--bc-e2);
  border-radius: var(--bc-rp);
  border: 1px solid var(--bc-nivel, var(--bc-raya-fuerte));
  background: var(--bc-nivel-f, var(--bc-franja));
  color: var(--bc-nivel, var(--bc-tinta-2));
  white-space: nowrap;
  vertical-align: baseline;
}
#gst-raiz .bc-estado::before { content: var(--bc-nivel-forma, ""); font-size: .78em; }
/* El nivel 2 se distingue del 1 también por el grosor del borde: rayas frente a
   macizo no se puede dibujar en una pastilla tan pequeña. */
#gst-raiz .bc-estado.bc-n2 { border-width: 2px; }
/* El único que se rellena del todo: dentro de una lista larga salta a la vista
   sin tener que comparar colores. */
#gst-raiz .bc-estado--macizo.bc-n1 {
  background: var(--bc-urgente);
  color: var(--bc-blanco);          /* 6,70:1 */
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7 · LA CABECERA · «AL ENTRAR TIENE QUE VERSE QUE ESTÁS EN BUROCRACKS»
   ═══════════════════════════════════════════════════════════════════════════
   La queja de Juan era literal, y el diagnóstico la confirmó: el módulo abre
   SIEMPRE en «Mi empresa · Facturas», el lado del empresario, y la elección no
   se guarda en ninguna parte, así que cada F5 devuelve al operador al lado del
   cliente.

   Esta cabecera contesta TRES preguntas antes de leer nada:

       ¿DÓNDE ESTOY?  → la banda negra con la marca en lima (13,30:1). Negro y
                        lima no se parecen a nada del ERP de Zenon: se reconoce
                        de reojo, desde el otro lado de la mesa.
       ¿DE QUIÉN?     → LA CARTELA: la razón social en la letra de titulares,
                        grande, con el NIF debajo. Es la etiqueta de la carpeta
                        de un archivador, no un selector gris.
       ¿QUÉ PERIODO?  → el periodo, a la derecha de la cartela, con su estado y
                        su botón de cambiar. UNO para toda la pantalla.

   Lo tercero es un arreglo de fondo: hoy hay CINCO controles de tiempo que no
   se hablan —el «Mes» de arriba y los años propios de Libros, Contabilidad,
   Modelos y Control—, y en Facturas el de arriba deja de responder para siempre
   en cuanto tocas un trimestre.

     Un mando que deja de funcionar sin decirlo es peor que no tener mando.

   Y va pegada arriba: el que baja por un libro de sesenta filas no deja de ver
   en qué empresa está.

   PRESUPUESTO DE ALTO (calculado sobre estos valores, no medido en pantalla):
     banda de marca ~40 px + cartela ~52 px + pestañas ~34 px = ~126 px
   contra los 204 px de hoy (305 en Laboral, ~340 en Control).                 */

#gst-raiz .bc-cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bc-hoja);
  box-shadow: var(--bc-sombra-pega);
}

/* ── 7.1 · LA BANDA DE MARCA ────────────────────────────────────────────────
   Es lo único de la pantalla que va en negro macizo: así se sabe de un vistazo
   dónde estás sin que el color inunde el trabajo. Y es el único sitio donde el
   lima puede ser LETRA, porque detrás hay negro.
   `bc-barra` es el nombre que ya usa `gst-marca.js`: se respeta. */
#gst-raiz .bc-barra {
  display: flex;
  align-items: center;
  gap: var(--bc-e3);
  flex-wrap: wrap;
  background: var(--bc-negro);
  color: var(--bc-niebla);
  border-bottom: 3px solid var(--bc-lima);   /* la firma. «Trazo fino»: 3 px */
  border-radius: var(--bc-r3) var(--bc-r3) 0 0;
  padding: var(--bc-e1) var(--bc-e4);
  min-height: 40px;
}
/* El cuadrito lima con la B. El lima manda aquí, y funciona porque está sobre
   negro. Sobre blanco no se usa NUNCA como letra ni como raya. */
#gst-raiz .bc-sello {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  background: var(--bc-lima);
  color: var(--bc-negro);
  font-family: var(--bc-titular);
  font-size: 15px; font-weight: 700; line-height: 1;
  border-radius: 2px;
}
/* EL LOGOTIPO. «BURO» apagado y tachado por un trazo fino de lima, «CRACKS»
   entero. El tachado no es `text-decoration:line-through` —esa raya la dibuja
   la letra, hereda su color y no se puede afinar— sino una barra propia puesta
   encima del trozo «BURO», que así mide siempre lo que mide esa palabra aunque
   el ordenador de quien mira no tenga la misma tipografía. */
#gst-raiz .bc-logo {
  font-family: var(--bc-titular);
  font-size: var(--bc-t5);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--bc-niebla);          /* 14,56:1 */
  white-space: nowrap;
  display: inline-block;
  /* «Zona de respeto = la altura de la B»: el aire mínimo alrededor del nombre. */
  padding-right: var(--bc-e2);
}
#gst-raiz .bc-logo .bc-buro { position: relative; color: #8C8C8C; }
#gst-raiz .bc-logo .bc-buro::after {
  content: ""; position: absolute; left: -.06em; right: -.10em;
  top: .46em; height: .075em; background: var(--bc-lima); border-radius: 2px;
}
#gst-raiz .bc-logo .bc-cracks { color: var(--bc-blanco); }
#gst-raiz .bc-logo.bc-logo-claro .bc-cracks { color: var(--bc-negro); }
#gst-raiz .bc-logo.bc-logo-claro .bc-buro  { color: #9A9A9A; }
#gst-raiz .bc-logo i { color: var(--bc-lima); font-style: normal; }
#gst-raiz .bc-barra-apoyo {
  font-size: var(--bc-t1);
  color: var(--bc-tinta-sobre-negro);   /* 8,31:1 sobre el negro */
  white-space: nowrap;
}
#gst-raiz .bc-empuja { margin-left: auto; }

/* ── 7.2 · LA CARTELA · la etiqueta de la carpeta ────────────────────────── */
#gst-raiz .bc-cartela {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--bc-e2) var(--bc-e5);
  padding: var(--bc-e2) var(--bc-e4);
  background: var(--bc-hoja);
  border-bottom: 1px solid var(--bc-raya);
}
#gst-raiz .bc-cartela-quien { min-width: 0; flex: 1 1 22ch; }
#gst-raiz .bc-empresa {
  display: block;
  font-family: var(--bc-titular);
  font-size: var(--bc-t5);
  font-weight: 700;
  line-height: 1.15;
  color: var(--bc-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#gst-raiz .bc-empresa-datos {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px var(--bc-e2);
  margin-top: 2px;
  font-size: var(--bc-t2);
  color: var(--bc-tinta-2);
}
#gst-raiz .bc-empresa-datos > * + *::before {
  content: "·";
  margin-right: var(--bc-e2);
  color: var(--bc-raya-fuerte);
}

/* EL PERIODO. Va con pinta de MANDO, no de rótulo, para que se vea que se puede
   cambiar. Y es el único: aquí se acaban los cinco controles de tiempo. */
#gst-raiz .bc-periodo {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--bc-e1);
  flex: none;
}
#gst-raiz .bc-periodo-caja {
  display: inline-flex; flex-direction: column;
  border: 1px solid var(--bc-borde-mando);
  border-radius: var(--bc-r);
  background: var(--bc-franja);
  padding: 2px var(--bc-e2);
  line-height: 1.2;
}
#gst-raiz .bc-periodo-v {
  font-family: var(--bc-cifra);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--bc-t4);
  font-weight: 700;
  color: var(--bc-tinta);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8 · NAVEGACIÓN · TRES NIVELES CON TRES FORMAS QUE NO SE CONFUNDEN
   ═══════════════════════════════════════════════════════════════════════════
   EL PROBLEMA DE HOY no es que haya muchas pestañas: es que los cuatro niveles
   usan LA MISMA clase `.ev-tab`, el mismo tamaño y el mismo estado activo. Nada
   dice cuál manda sobre cuál.

     Son los carteles de un aeropuerto puestos todos del mismo tamaño: da igual
     que uno diga «Terminal 2» y otro «Puerta 14».

   Aquí cada nivel tiene una FORMA que no se puede confundir con las otras:

     NIVEL 1 · EL LADO (Burocracks / Mi empresa)
        Un CONMUTADOR dentro de la banda negra. No son pestañas: es la llave de
        la puerta. Cambiar de lado es cambiar de programa, y por eso vive arriba
        del todo, en la marca, y el activo se rellena de lima.

     NIVEL 2 · LA SECCIÓN (Expediente, Libros, Contabilidad…)
        PESTAÑAS DE CARPETA: la activa se pega al contenido —es la misma hoja
        blanca, sin línea que las separe— y lleva el filete de marca arriba. Las
        inactivas quedan hundidas sobre el papel gris. Es la metáfora del
        archivador: la carpeta que has sacado es la que está en primer plano.

     NIVEL 3 · EL SEGMENTO (Emitidas/Recibidas, Diario/Mayor, 1T 2T 3T 4T)
        Un selector pequeño DENTRO de la hoja, pegado a lo que filtra. Se ve que
        manda menos porque no tiene ni el tamaño ni la forma de una pestaña. Lo
        que hoy es una tercera y una cuarta fila de pestañas —las cinco
        subpestañas de Laboral, las siete de Contabilidad— es esto.

   Y en los tres, el estado activo NO se dice solo con color: cambia el fondo Y
   el peso de la letra Y lleva `aria-selected` o `aria-pressed`, que es lo que
   permite que un lector de pantalla lo diga en voz alta.                      */

/* ── 8.1 · NIVEL 1 · el conmutador de lado, dentro de la banda negra ─────── */
#gst-raiz .bc-lados {
  display: inline-flex;
  gap: 3px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--bc-rp);
  padding: 3px;
  flex: none;
}
#gst-raiz .bc-lado {
  font-family: var(--bc-texto);
  font-size: var(--bc-t3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--bc-tinta-sobre-negro);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bc-rp);
  padding: 4px 14px;
  cursor: pointer;
  white-space: nowrap;
}
#gst-raiz .bc-lado:hover { color: var(--bc-blanco); background: rgba(255,255,255,.12); }
#gst-raiz .bc-lado[aria-selected="true"],
#gst-raiz .bc-lado[aria-current="page"] {
  background: var(--bc-lima);
  color: var(--bc-negro);          /* 13,30:1 · la regla del lima, cumplida */
  border-color: var(--bc-lima-borde);
}

/* ── 8.2 · NIVEL 2 · las pestañas de carpeta ─────────────────────────────── */
#gst-raiz .bc-secciones {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  padding: 0 var(--bc-e4);
  background: var(--bc-papel);
  border-bottom: 1px solid var(--bc-raya-fuerte);
  overflow-x: auto;
  scrollbar-width: thin;
}
#gst-raiz .bc-seccion {
  font-family: var(--bc-texto);
  font-size: var(--bc-t3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--bc-tinta-2);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--bc-r) var(--bc-r) 0 0;
  padding: var(--bc-e1) var(--bc-e3);
  margin-bottom: -1px;             /* pisa la línea de abajo: así se «pega» */
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--bc-e0);
}
#gst-raiz .bc-seccion:hover { color: var(--bc-tinta); background: var(--bc-franja); }
#gst-raiz .bc-seccion[aria-selected="true"],
#gst-raiz .bc-seccion[aria-current="page"] {
  color: var(--bc-tinta);
  font-weight: 700;
  background: var(--bc-hoja);
  border-color: var(--bc-raya-fuerte);
  /* El filete de marca arriba. Sobre claro el filo de la marca es el NEGRO,
     nunca el lima (1,28:1). De noche este mismo cajón vale lima. */
  box-shadow: inset 0 3px 0 var(--bc-filo);
}

/* EL CONTADOR de una sección: cuántas cosas piden atención ahí dentro. Es lo
   que deja saber dónde ir sin entrar a mirar. Va en rojo solo cuando urge; el
   resto del tiempo es una chapa neutra, porque un contador siempre rojo deja de
   avisar a la semana. */
#gst-raiz .bc-cuenta {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: var(--bc-rp);
  background: var(--bc-franja);
  border: 1px solid var(--bc-raya);
  font-family: var(--bc-cifra);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--bc-t1);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--bc-tinta);
}
#gst-raiz .bc-cuenta--urge {
  background: var(--bc-urgente);
  border-color: var(--bc-urgente);
  color: var(--bc-blanco);         /* 6,70:1 */
}

/* ── 8.3 · NIVEL 3 · el segmento ─────────────────────────────────────────── */
#gst-raiz .bc-segmento {
  display: inline-flex;
  border: 1px solid var(--bc-borde-mando);
  border-radius: var(--bc-r);
  overflow: hidden;
  background: var(--bc-hoja);
  flex: none;
}
#gst-raiz .bc-segmento button {
  font-family: var(--bc-texto);
  font-size: var(--bc-t2);
  font-weight: 600;
  height: var(--bc-mando);
  padding: 0 var(--bc-e2);
  border: 0;
  border-right: 1px solid var(--bc-raya);
  background: var(--bc-hoja);
  color: var(--bc-tinta-2);
  cursor: pointer;
  white-space: nowrap;
}
#gst-raiz .bc-segmento button:last-child { border-right: 0; }
#gst-raiz .bc-segmento button:hover { background: var(--bc-realce); color: var(--bc-tinta); }
#gst-raiz .bc-segmento button[aria-pressed="true"],
#gst-raiz .bc-segmento button[aria-selected="true"] {
  background: var(--bc-negro);
  color: var(--bc-lima);           /* 13,30:1 · aquí el lima SÍ es letra */
  font-weight: 700;
}

/* ── 8.4 · LAS MIGAS · dónde estoy, escrito ──────────────────────────────── */
#gst-raiz .bc-migas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bc-e0);
  font-size: var(--bc-t1);
  color: var(--bc-tinta-3);
  margin-bottom: var(--bc-e1);
}
#gst-raiz .bc-migas > * + *::before {
  content: "›";
  margin-right: var(--bc-e0);
  color: var(--bc-raya-fuerte);
}
#gst-raiz .bc-migas [aria-current] { color: var(--bc-tinta); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════════
   §9 · EL PANEL DE ACCIÓN · LA PIEZA QUE VA PRIMERO EN TODA PANTALLA
   ═══════════════════════════════════════════════════════════════════════════
   REGLA DE ORO: lo primero que hay debajo de la navegación es QUÉ HAY QUE
   HACER. No un párrafo explicando qué es un libro registro, no una cifra grande
   sin contexto, no un cartel rojo en mayúsculas hablando del BOE.

   Hoy pasa justo lo contrario, y está contado pantalla por pantalla:
   · Expediente abre con un aviso legal y la ficha de identidad; el calendario
     —lo único que se mira a diario— es la QUINTA tarjeta, unos 1.400 px más
     abajo, dos pantallas por debajo del pliegue.
   · Libros, Contabilidad, Modelos, Control y Laboral abren con un párrafo de
     dos o tres renglones que sale siempre y nunca cambia.
   · Facturas, que es la pantalla de aterrizaje del cliente, no propone NINGUNA
     acción: cero botones principales en toda la pantalla.

   Y hay una pieza ya construida para esto que el cliente NO VE NUNCA: los
   cajones «Hay que hacer algo / Ya se puede presentar / Todavía no / Hecho».
   Están escritos y solo se pintan en las tres pantallas del operador. El
   invento para el que no sabe se lo quedó el que sabe. Aquí es la pieza madre y
   la ven los dos, con dos ropas distintas:

     · EL OPERADOR ve una COLA DE TRABAJO: renglones apretados ordenados por
       urgencia, con la empresa, qué hay que hacer, el plazo y el importe.
     · EL CLIENTE ve UNA FRASE Y UN BOTÓN. Nada más.                           */

#gst-raiz .bc-panel {
  background: var(--bc-hoja);
  border: 1px solid var(--bc-raya-fuerte);
  border-left: 5px solid var(--bc-nivel, var(--bc-filo));
  border-radius: 0 var(--bc-r2) var(--bc-r2) 0;
  padding: var(--bc-e3) var(--bc-e4);
  margin-bottom: var(--bc-e3);
}
#gst-raiz .bc-panel.bc-n1, #gst-raiz .bc-panel.bc-n2,
#gst-raiz .bc-panel.bc-n3, #gst-raiz .bc-panel.bc-n0 { background: var(--bc-nivel-f); }
#gst-raiz .bc-panel.bc-n2 { border-left-style: dashed; }

/* El rótulo de arriba del panel: «LO SIGUIENTE». Pequeño a propósito, porque no
   es la información: es la etiqueta del cajón. */
#gst-raiz .bc-panel-et {
  display: flex; align-items: center; gap: var(--bc-e1);
  font-size: var(--bc-t1);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--bc-tinta-3);
  margin-bottom: var(--bc-e0);
}

/* ── 9.1 · LA COLA DE TRABAJO DEL OPERADOR ──────────────────────────────────
   Cada renglón es un <button> de verdad: se recorre con el tabulador y con las
   flechas, y se abre con Intro. Willy va a teclado. */
#gst-raiz .bc-cola { display: block; }
#gst-raiz .bc-cola-fila {
  display: grid;
  grid-template-columns: 2.4ch minmax(16ch, 1.3fr) minmax(20ch, 2fr) var(--bc-w-fecha) var(--bc-w-eur) auto;
  align-items: center;
  gap: var(--bc-e2);
  width: 100%;
  min-height: var(--bc-fila);
  padding: 0 var(--bc-e1);
  border: 0;
  border-bottom: 1px solid var(--bc-raya);
  border-left: 4px solid var(--bc-nivel, transparent);
  background: var(--bc-hoja);
  font-family: var(--bc-texto);
  font-size: var(--bc-t3);
  color: var(--bc-tinta-2);
  text-align: left;
  cursor: pointer;
}
#gst-raiz .bc-cola-fila.bc-n2 { border-left-style: dashed; }
#gst-raiz .bc-cola-fila:hover { background: var(--bc-realce); }
#gst-raiz .bc-cola-fila[aria-current="true"] { background: var(--bc-lima-suave); }
#gst-raiz .bc-cola-fila .bc-quien {
  font-weight: 700; color: var(--bc-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#gst-raiz .bc-cola-fila .bc-que { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gst-raiz .bc-cola-fila .bc-cuando {
  font-family: var(--bc-cifra);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--bc-t2);
  text-align: right;
}

/* ── 9.2 · LA CIFRA DEL CLIENTE ─────────────────────────────────────────────
   ORDEN OBLIGATORIO: QUÉ ES (rótulo) → CUÁNTO (cifra) → DE QUÉ DEPENDE (pie).
   Hoy está invertido: primero el susto de 9.243,18 € a 27 px y debajo, en gris
   pequeño, la advertencia de que está calculado sin los gastos por confirmar.
   El matiz va PEGADO a la cifra y en tinta legible, o no es un matiz: es letra
   pequeña de un contrato. */
#gst-raiz .bc-dato { display: block; }
#gst-raiz .bc-dato-pie {
  display: block;
  font-size: var(--bc-t2);
  color: var(--bc-tinta-2);
  margin-top: 2px;
  max-width: 48ch;
}

/* ── 9.3 · EL CAJÓN · el titular dice qué hay que hacer con lo de dentro ────
   Los nombres `bc-cajon`, `bc-cajon-t` y `bc-cajon-n` son los que ya usa
   `gst-marca.js`: se respetan tal cual para no tocar las pantallas que los
   pintan hoy. */
#gst-raiz .bc-cajon {
  display: flex;
  align-items: baseline;
  gap: var(--bc-e1);
  margin: var(--bc-e5) 0 var(--bc-e1);
  padding-bottom: 5px;
  border-bottom: 2px solid var(--bc-nivel, var(--bc-filo));
}
#gst-raiz .bc-cajon:first-child { margin-top: var(--bc-e0); }
#gst-raiz .bc-cajon-t {
  font-family: var(--bc-titular);
  font-size: var(--bc-t4);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bc-tinta);
}
#gst-raiz .bc-cajon-n {
  font-family: var(--bc-cifra);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--bc-t2);
  font-weight: 700;
  color: var(--bc-negro);
  background: var(--bc-lima);
  border-radius: var(--bc-rp);
  padding: 1px 8px;
  margin-left: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10 · LA TARJETA Y LA RETÍCULA DE PANTALLA
   ═══════════════════════════════════════════════════════════════════════════
   Hoy una `.ev-card` gasta 46 px de borde, relleno y margen ANTES de escribir
   nada, y Contabilidad tiene 24 tarjetas: 1.104 px de pantalla solo en marcos.
   Aquí el marco lo pone la densidad: en operador son 24 px por tarjeta, y hay
   una variante SIN marco para cuando lo único que se quiere es agrupar — que es
   la mayoría de las veces.

   Y la tarjeta tiene CABEZA de verdad: el rótulo pequeño arriba (la etiqueta) y
   el título legible debajo (el nombre). Nunca al revés.                       */

#gst-raiz .bc-mesa {
  max-width: 1520px;
  margin: 0 auto;
  padding: var(--bc-e3) var(--bc-e4) var(--bc-e5);
}
#gst-raiz .bc-tarjeta {
  background: var(--bc-hoja);
  border: 1px solid var(--bc-raya);
  border-radius: var(--bc-r2);
  padding: var(--bc-tarjeta-p);
  margin-bottom: var(--bc-e3);
}
#gst-raiz .bc-tarjeta > :first-child { margin-top: 0; }
/* Para meter una tabla a sangre, sin que el marco de la tarjeta la estreche. */
#gst-raiz .bc-tarjeta--pegada { padding: 0; overflow: hidden; }
#gst-raiz .bc-tarjeta--pegada > .bc-tarjeta-cab { padding: var(--bc-tarjeta-p) var(--bc-tarjeta-p) var(--bc-e1); margin-bottom: 0; }
#gst-raiz .bc-tarjeta--pegada > .bc-tarjeta-pie { padding: var(--bc-e1) var(--bc-tarjeta-p) var(--bc-tarjeta-p); }
/* Para cuando solo hace falta agrupar: una raya arriba y nada más. */
#gst-raiz .bc-tarjeta--plana {
  background: none; border: 0; border-top: 1px solid var(--bc-raya);
  border-radius: 0; padding: var(--bc-e2) 0;
}
/* La tarjeta marcada por la casa o por un estado: un filete a la izquierda. Es
   la ÚNICA decoración de color que lleva una tarjeta. */
#gst-raiz .bc-tarjeta--marca { border-left: 4px solid var(--bc-filo); }
#gst-raiz .bc-tarjeta.bc-n0, #gst-raiz .bc-tarjeta.bc-n1,
#gst-raiz .bc-tarjeta.bc-n2, #gst-raiz .bc-tarjeta.bc-n3,
#gst-raiz .bc-tarjeta.bc-n4 {
  border-left: var(--bc-nivel-filete) var(--bc-nivel-estilo) var(--bc-nivel);
}
/* En densidad de operador la tarjeta casi desaparece: lo que importa es la
   tabla, no el marco de la tabla. */
#gst-raiz.bc-operador .bc-tarjeta,
#gst-raiz .bc-operador .bc-tarjeta { border-radius: var(--bc-r); }

#gst-raiz .bc-tarjeta-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bc-e2);
  flex-wrap: wrap;
  margin-bottom: var(--bc-e2);
  padding-bottom: var(--bc-e1);
  border-bottom: 1px solid var(--bc-raya);
}

/* Maestro-detalle: el índice a la izquierda (la lista de cuentas, la lista de
   empresas) y el detalle a la derecha. Es la forma del libro mayor y de
   cualquier «elige uno y míralo». Se apila cuando de verdad no cabe. */
#gst-raiz .bc-dos {
  display: grid;
  grid-template-columns: minmax(26ch, 34ch) minmax(0, 1fr);
  gap: var(--bc-e3);
  align-items: start;
}
/* Piezas que se reparten el ancho a partes iguales. */
#gst-raiz .bc-piezas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--bc-e3);
  align-items: start;
}
#gst-raiz .bc-piezas > * { min-width: 0; }

/* La barra de mandos de una pantalla: a la izquierda lo que manda, a la derecha
   lo accesorio. NUNCA dos filas de botones. Va hundida, para que se lea como
   «los mandos» y no como contenido. */
#gst-raiz .bc-mandos {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--bc-e1);
  background: var(--bc-franja);
  border: 1px solid var(--bc-raya);
  border-radius: var(--bc-r) var(--bc-r) 0 0;
  padding: var(--bc-e1) var(--bc-e2);
}
#gst-raiz .bc-fila-piezas { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bc-e2); }
#gst-raiz .bc-sep { height: 1px; background: var(--bc-raya); border: 0; margin: var(--bc-e2) 0; }

/* Lista de datos de solo lectura (una ficha que no se edita). */
#gst-raiz .bc-datos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--bc-e0) var(--bc-e3);
  align-items: baseline;
}
#gst-raiz .bc-datos dt { font-size: var(--bc-t2); color: var(--bc-tinta-2); }
#gst-raiz .bc-datos dd { margin: 0; color: var(--bc-tinta); }


/* ═══════════════════════════════════════════════════════════════════════════
   §11 · LA TABLA · EL LIBRO RAYADO
   ═══════════════════════════════════════════════════════════════════════════
   Hoy hay CUATRO sistemas de tabla conviviendo (`.gx-tb`, `.gk-tb`, `.gf-tb` y
   una escrita a mano en Laboral) más un quinto que no carga nadie, y ninguno
   tiene cabecera fija (`grep sticky` → 0 en todo el módulo), ninguno tiene
   bandas ni renglón, y el de los libros no tiene cifras tabulares. Con topes de
   sesenta filas, a partir de la veinte se están mirando columnas sin nombre. Y
   peor: `.gx-tb` solo existe si antes has pasado por Expediente, así que si
   Willy entra directo a Libros la columna de euros ni siquiera está alineada a
   la derecha.

   Aquí hay UNA tabla, y hace las ocho cosas que hacen falta. Las cinco primeras
   son de oficio; las tres últimas están copiadas de un libro de contabilidad de
   verdad, que lleva doscientos años funcionando:

   1. CABECERA CLAVADA. Se queda arriba mientras la tabla se desplaza.
   2. TOTAL CLAVADO ABAJO. La suma no se escapa por arriba al recorrer el libro.
   3. FILA RECORRIBLE. Se realza al pasar el ratón Y al llegar con el tabulador
      (`:focus-within`), que es como se mueve quien no usa ratón.
   4. EUROS CUADRADOS. A la derecha y con cifras tabulares de caja alta (§3).
   5. LA PRIMERA COLUMNA IDENTIFICA. Va en tinta plena y en negrita: es lo que
      deja recorrer la tabla con la vista sin leerla entera.
   6. EL RENGLÓN. Cada fila lleva su raya fina debajo. No es adorno: es lo que
      impide saltar de línea al ir del concepto al importe, que en una tabla de
      nueve columnas pasa constantemente.
   7. LA RAYA CADA CINCO. Cada quinta fila lleva la raya un punto más fuerte.
      Los libros mayores llevan siglos agrupando de cinco en cinco para poder
      decir «la tercera del segundo grupo». Cuesta una línea y es lo que más
      ayuda a recorrer una tabla larga.
   8. LA DOBLE RAYA DEL TOTAL. Un total en un libro se subraya dos veces. Es la
      señal más reconocible que existe en contabilidad y no cuesta nada.

   POR QUÉ EL RENGLÓN Y NO LAS BANDAS ALTERNAS (la «cebra»)
   Porque el rayado NO mete color en la pantalla, y aquí el color está reservado
   a los cinco estados. Una tabla a bandas grises compite con el filete rojo de
   la fila que está fuera de plazo, que es justo lo que no se puede perder. Para
   tablas de siete columnas o más, donde el renglón ya no basta, está la
   variante `.bc-tabla--franjas`, que sí las pone. Esa es la regla: renglón por
   defecto, bandas a partir de siete columnas.                                 */

/* El marco es quien desplaza. Poner el desplazamiento aquí —y no en la página—
   es lo que permite que la cabecera se pegue de verdad DENTRO de una tarjeta.
   Sin un contenedor con desplazamiento propio, `sticky` se pega a la ventana
   del navegador y se va detrás de la cabecera negra. */
#gst-raiz .bc-marco {
  border: 1px solid var(--bc-raya-fuerte);
  border-radius: var(--bc-r);
  background: var(--bc-hoja);
  max-height: var(--bc-marco-alto, 62vh);
  overflow: auto;
  scrollbar-width: thin;
}
#gst-raiz .bc-marco--corto { --bc-marco-alto: 34vh; }
#gst-raiz .bc-marco--alto  { --bc-marco-alto: 76vh; }
/* Al cliente no se le enseña un libro de sesenta filas: se le enseña lo poco
   que le toca. Si una tabla suya crece, se pagina; no se estira. */
#gst-raiz.bc-cliente .bc-marco,
#gst-raiz .bc-cliente .bc-marco { max-height: none; }

#gst-raiz .bc-tabla {
  width: 100%;
  /* `separate` y no `collapse`: con `collapse` los bordes de una cabecera
     clavada se quedan atrás al desplazar. Es un fallo conocido de los
     navegadores y se evita así. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--bc-t3);
  line-height: 1.35;
}

/* ── 11.1 · LA CABECERA CLAVADA ──────────────────────────────────────────── */
#gst-raiz .bc-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bc-franja);
  color: var(--bc-tinta-3);        /* 6,02:1 sobre la franja */
  font-family: var(--bc-texto);
  font-size: var(--bc-t1);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  padding: var(--bc-e0) var(--bc-e2);
  border-bottom: 2px solid var(--bc-filo);
}
#gst-raiz .bc-tabla thead th.bc-num { text-align: right; }
/* La cabecera que ordena. La flecha se escribe en el HTML; aquí solo se marca
   cuál manda, y con `aria-sort` el lector de pantalla lo dice también. */
#gst-raiz .bc-tabla th[aria-sort] { color: var(--bc-tinta); }
#gst-raiz .bc-tabla th button {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}

/* ── 11.2 · EL RENGLÓN ───────────────────────────────────────────────────── */
#gst-raiz .bc-tabla tbody td {
  padding: var(--bc-e0) var(--bc-e2);
  height: var(--bc-fila);
  border-bottom: 1px solid var(--bc-raya);
  vertical-align: middle;
  color: var(--bc-tinta-2);
}
/* La primera columna identifica la fila: tinta plena y negrita. */
#gst-raiz .bc-tabla tbody td:first-child { color: var(--bc-tinta); font-weight: 600; }
/* La raya reforzada cada cinco: el agrupamiento del libro mayor de toda la vida. */
#gst-raiz .bc-tabla tbody tr:nth-child(5n) td { border-bottom-color: var(--bc-raya-media); }
/* El filete vertical delante de las columnas de cifras: eso convierte
   debe / haber / saldo en tres columnas de verdad, y no en texto alineado a la
   derecha que casualmente cae junto. */
#gst-raiz .bc-tabla .bc-grupo-ini { border-left: 1px solid var(--bc-raya); }
/* La segunda línea de una celda: el proveedor, el concepto, el porqué. */
#gst-raiz .bc-tabla .bc-sub,
#gst-raiz .bc-linea-2 {
  display: block;
  font-size: var(--bc-t1);
  font-weight: 400;
  color: var(--bc-tinta-2);
  line-height: 1.4;
}

/* ── 11.3 · LA FILA, CON RATÓN Y CON TECLADO ─────────────────────────────── */
#gst-raiz .bc-tabla tbody tr:hover td { background: var(--bc-realce); }
#gst-raiz .bc-tabla tbody tr:focus-within td { background: var(--bc-realce); }
/* La fila elegida se marca con la marca: lima rebajado y tinta negra encima
   (16,12:1). Es el único sitio, con el buscador, donde el lima toca fondo claro,
   y funciona porque es relleno. */
#gst-raiz .bc-tabla tbody tr[aria-selected="true"] td { background: var(--bc-lima-suave); color: var(--bc-tinta); }

/* Las bandas alternas, para tablas de siete columnas o más. */
#gst-raiz .bc-tabla--franjas tbody tr:nth-child(even) td { background: var(--bc-franja); }
#gst-raiz .bc-tabla--franjas tbody tr:hover td { background: var(--bc-realce); }

/* ── 11.4 · EL MARCADOR DE FILA · POR QUÉ VA EN `box-shadow` ────────────────
   El código de hoy le pone `border-left: 4px dashed` y `padding-left: 10px` a
   un `<tr>`. El `padding` NO aplica a una fila de tabla y el borde pelea con
   `border-collapse`: el marcador de «esto no está claro» no se ve.

   Aquí el filete es una SOMBRA INTERIOR sobre la primera celda. Siempre se
   dibuja, no mueve ni un píxel de sitio y no depende del modo de bordes. Y como
   es sombra y no borde, no hay que compensar el relleno de la celda. */
#gst-raiz .bc-tabla tbody tr.bc-n0 > td:first-child,
#gst-raiz .bc-tabla tbody tr.bc-n1 > td:first-child,
#gst-raiz .bc-tabla tbody tr.bc-n2 > td:first-child,
#gst-raiz .bc-tabla tbody tr.bc-n3 > td:first-child,
#gst-raiz .bc-tabla tbody tr.bc-n4 > td:first-child {
  box-shadow: inset var(--bc-nivel-filete) 0 0 var(--bc-nivel);
  padding-left: calc(var(--bc-e2) + var(--bc-nivel-filete));
}
/* La fila apagada (un asiento anulado, un trabajador de baja). NO se esconde:
   se apaga. Esconderle un dato a un operador es peor que enseñárselo en gris. */
#gst-raiz .bc-tabla tbody tr.bc-f-apagada td { color: var(--bc-tinta-3); }

/* ── 11.5 · EL TOTAL, CLAVADO ABAJO Y CON SU DOBLE RAYA ──────────────────── */
#gst-raiz .bc-tabla tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bc-franja);
  border-top: 3px double var(--bc-filo);
  border-bottom: 0;
  padding: var(--bc-e0) var(--bc-e2);
  font-weight: 700;
  color: var(--bc-tinta);
}
/* El subtotal dentro del cuerpo: una raya sencilla arriba, sin doble. */
#gst-raiz .bc-tabla tr.bc-subtotal td {
  border-top: 1px solid var(--bc-filo);
  background: var(--bc-franja);
  font-weight: 700;
  color: var(--bc-tinta);
}

/* Columnas que solo existen para el operador (el número de asiento, el
   identificador interno). Un solo sitio para esconderlas, en vez de escribir
   dos tablas distintas. */
#gst-raiz.bc-cliente .bc-solo-operador,
#gst-raiz .bc-cliente .bc-solo-operador { display: none; }

/* ── 11.6 · EL ÍNDICE · la lista de cuentas o de empresas de la izquierda ── */
#gst-raiz .bc-indice { margin: 0; padding: 0; }
#gst-raiz .bc-indice-fila {
  display: flex; align-items: baseline; gap: var(--bc-e1);
  width: 100%; text-align: left;
  min-height: var(--bc-fila);
  padding: var(--bc-e0) var(--bc-e2);
  border: 0; border-bottom: 1px solid var(--bc-raya);
  background: transparent;
  color: var(--bc-tinta-2);
  font-family: var(--bc-texto);
  font-size: var(--bc-t3);
  cursor: pointer;
}
#gst-raiz .bc-indice-fila:hover { background: var(--bc-realce); }
#gst-raiz .bc-indice-fila[aria-current="true"] {
  background: var(--bc-lima-suave);
  color: var(--bc-tinta);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--bc-filo);
}
#gst-raiz .bc-indice-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gst-raiz .bc-indice-saldo {
  flex: none;
  font-family: var(--bc-cifra);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--bc-t2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §12 · EL FORMULARIO · «LA FICHA FEÍSIMA»
   ═══════════════════════════════════════════════════════════════════════════
   CUATRO COSAS ESTÁN MAL HOY Y LAS CUATRO SE ARREGLAN AQUÍ:

   A) TODOS LOS CAMPOS MIDEN LO MISMO. La función que los pinta recibe un ancho
      pensado uno a uno ('150px' el NIF, '120px' el código postal, '420px' los
      epígrafes) y NO LO LEE NI UNA VEZ: todo acaba en una rejilla de columnas
      iguales, y el código postal ocupa exactamente lo mismo que la razón
      social.

        Es un archivador donde todas las carpetas son del tamaño de la más
        gorda. Cabe todo, pero no se encuentra nada.

      Aquí el ancho lo pide la casilla según lo que lleva dentro, en `ch` (§1), y
      la colocación es `flex`, NO `grid`: en una rejilla todas las columnas miden
      lo mismo por definición, que es justo el problema que venimos a arreglar.
      El ancho no es decoración: es la primera pista de cuánto hay que escribir.
      Una casilla de 420 px para un código postal de cinco cifras hace dudar al
      que la rellena.

   B) NO HAY GRUPOS, SOLO SALTOS DE REJILLA. Hay separaciones, pero sin rótulo, y
      como la rejilla es `auto-fit`, el agrupamiento CAMBIA CON EL ANCHO DE LA
      VENTANA. En Laboral son 22 campos en una rejilla plana sin un solo rótulo:
      identidad, afiliación, cotización, IRPF, banco y notas todos revueltos.
      Aquí el grupo es obligatorio y es un `<fieldset>` con `<legend>`: tiene
      nombre escrito, y además el lector de pantalla lo anuncia («Domicilio,
      código postal»).

   C) TRES BOTONES DE GUARDAR, uno por tarjeta. Al guardar uno se repinta la
      pestaña entera y LO ESCRITO EN LAS OTRAS DOS SE PIERDE EN SILENCIO, sin
      ningún aviso. Aquí hay UNA barra de guardar, pegada abajo, para toda la
      pantalla, que solo aparece cuando hay algo que guardar y dice cuánto.

   D) NO HAY NI UN `<form>` EN TODO EL MÓDULO (grep: 0), así que la tecla Intro
      no guarda nada en ninguna pantalla. La ficha va dentro de un `<form>` de
      verdad. Intro guarda.                                                    */

/* ── 12.1 · EL GRUPO ─────────────────────────────────────────────────────── */
#gst-raiz .bc-grupo {
  border-top: 1px solid var(--bc-raya);
  padding-top: var(--bc-e2);
  margin-top: var(--bc-e3);
}
#gst-raiz .bc-grupo:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
#gst-raiz .bc-grupo > legend,
#gst-raiz .bc-grupo-t {
  font-family: var(--bc-titular);
  font-size: var(--bc-t4);
  font-weight: 700;
  color: var(--bc-tinta);
  padding: 0 0 var(--bc-e0);
  /* Un `<legend>` dentro de una caja flexible se coloca mal en Chrome. Con
     `float` se comporta como un bloque normal y NO pierde su significado para
     el lector de pantalla, que es lo que hace falta conservar. */
  float: left;
  width: 100%;
}
#gst-raiz .bc-grupo > legend + .bc-explica { clear: both; margin-bottom: var(--bc-e2); }

/* ── 12.2 · LA FILA DE CAMPOS Y LOS ANCHOS ───────────────────────────────── */
#gst-raiz .bc-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bc-e2) var(--bc-e3);
  align-items: flex-start;
  clear: both;
}
#gst-raiz .bc-campo {
  display: flex; flex-direction: column; gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
}
#gst-raiz .bc-w-cp    { flex-basis: var(--bc-w-cp); }
#gst-raiz .bc-w-nif   { flex-basis: var(--bc-w-nif); }
#gst-raiz .bc-w-fecha { flex-basis: var(--bc-w-fecha); }
#gst-raiz .bc-w-pct   { flex-basis: var(--bc-w-pct); }
#gst-raiz .bc-w-eur   { flex-basis: var(--bc-w-eur); }
#gst-raiz .bc-w-ccc   { flex-basis: var(--bc-w-ccc); }
#gst-raiz .bc-w-corto { flex-basis: var(--bc-w-corto); }
#gst-raiz .bc-w-medio { flex-basis: var(--bc-w-medio); }
#gst-raiz .bc-w-largo { flex-basis: var(--bc-w-largo); flex-grow: 1; }
#gst-raiz .bc-w-todo  { flex-basis: 100%; }
/* Empuja lo que siga al renglón de abajo, sin meter un `div` de mentira en
   medio. Así el domicilio no se cuela al final de la fila de la identidad y el
   agrupamiento deja de ser una casualidad del ancho de la ventana. */
#gst-raiz .bc-salto { flex-basis: 100%; height: 0; margin: 0; padding: 0; }

/* ── 12.3 · LA CASILLA ───────────────────────────────────────────────────── */
#gst-raiz .bc-et {
  font-size: var(--bc-t2);
  font-weight: 700;
  color: var(--bc-tinta);          /* la etiqueta es tinta plena: 17,04:1 */
  line-height: 1.25;
}
/* «obligatorio» ESCRITO, no un asterisco rojo. Un asterisco es color y una
   forma diminuta: no lo lee un lector de pantalla y no lo entiende nadie. */
#gst-raiz .bc-oblig   { font-size: var(--bc-t1); font-weight: 600; color: var(--bc-urgente); margin-left: 4px; }
#gst-raiz .bc-opcional { font-size: var(--bc-t1); font-weight: 400; color: var(--bc-tinta-2); margin-left: 4px; }

#gst-raiz .bc-in,
#gst-raiz .bc-sel {
  font-family: var(--bc-texto);
  font-size: var(--bc-t3);
  color: var(--bc-tinta);
  background: var(--bc-hoja);
  border: 1px solid var(--bc-borde-mando);   /* 5,13:1 · se tiene que VER */
  border-radius: var(--bc-r);
  height: var(--bc-mando);
  padding: 0 var(--bc-e1);
  width: 100%;
  min-width: 0;
}
#gst-raiz textarea.bc-in {
  height: auto;
  min-height: calc(var(--bc-mando) * 2.2);
  padding: var(--bc-e1);
  line-height: var(--bc-interlinea);
  resize: vertical;
}
#gst-raiz .bc-in:hover, #gst-raiz .bc-sel:hover { border-color: var(--bc-tinta-2); }
#gst-raiz .bc-in::placeholder { color: var(--bc-tinta-3); opacity: 1; }
/* Desactivada o de solo lectura: se ve que no se puede escribir SIN depender
   del color, porque el borde cambia de estilo. */
#gst-raiz .bc-in:disabled, #gst-raiz .bc-sel:disabled,
#gst-raiz .bc-in[readonly] {
  background: var(--bc-franja);
  color: var(--bc-tinta-2);
  border-style: dashed;
  cursor: not-allowed;
}
/* Lo que se teclea cae donde luego se lee: los importes a la derecha y en
   cifras de cuaderno; los códigos a la izquierda, porque son códigos. */
#gst-raiz .bc-in--cifra  { text-align: right; }
#gst-raiz .bc-in--codigo { letter-spacing: .02em; }

/* El sufijo pegado (€, %). Va FUERA de la casilla, no dentro del texto: si va
   dentro, desaparece en cuanto se escribe. */
#gst-raiz .bc-con-unidad { display: flex; align-items: stretch; }
#gst-raiz .bc-con-unidad .bc-in { border-radius: var(--bc-r) 0 0 var(--bc-r); }
#gst-raiz .bc-unidad {
  display: inline-flex; align-items: center;
  padding: 0 var(--bc-e1);
  border: 1px solid var(--bc-borde-mando);
  border-left: 0;
  border-radius: 0 var(--bc-r) var(--bc-r) 0;
  background: var(--bc-franja);
  color: var(--bc-tinta-2);
  font-size: var(--bc-t2);
}

/* La ayuda pegada a SU casilla. Esta NO se apaga con la densidad: cambia según
   el campo y no es paja. Se enlaza con `aria-describedby`. */
#gst-raiz .bc-ayuda-campo {
  font-size: var(--bc-t1);
  color: var(--bc-tinta-2);        /* 8,59:1 — legible de verdad */
  line-height: 1.45;
  max-width: 46ch;
}

/* ── 12.4 · EL ERROR · PEGADO AL CAMPO, NUNCA ARRIBA DEL TODO ─────────────
   No hay ningún cartel de errores encima del formulario: el error vive debajo
   del campo que lo tiene. Y lleva TRES señales: el borde el doble de grueso, el
   triángulo del nivel 1 y la frase que dice qué hacer. El color es la tercera,
   no la única. */
#gst-raiz .bc-campo--mal .bc-in,
#gst-raiz .bc-campo--mal .bc-sel {
  border: 2px solid var(--bc-urgente);
  background: var(--bc-urgente-f);
}
#gst-raiz .bc-error {
  display: flex; align-items: flex-start; gap: 4px;
  font-size: var(--bc-t1);
  font-weight: 700;
  color: var(--bc-urgente);        /* 6,70:1 */
  line-height: 1.45;
  max-width: 46ch;
}
#gst-raiz .bc-error::before { content: "\25B2"; font-size: .85em; line-height: 1.7; flex: none; }
#gst-raiz .bc-campo--bien .bc-in { border-color: var(--bc-hecho); }
#gst-raiz .bc-ok { font-size: var(--bc-t1); color: var(--bc-hecho); }
#gst-raiz .bc-ok::before { content: "\2713\00a0"; }

/* ── 12.5 · CASILLAS DE MARCAR ───────────────────────────────────────────── */
#gst-raiz .bc-marcar {
  display: flex; align-items: flex-start; gap: var(--bc-e1);
  padding: 2px 0;
  font-size: var(--bc-t3);
  cursor: pointer;
}
#gst-raiz .bc-marcar input {
  width: 15px; height: 15px; margin-top: 2px; flex: none;
  accent-color: var(--bc-lima-borde);
}

/* ── 12.6 · LA BARRA DE GUARDAR · UNA POR PANTALLA ────────────────────────
   Se pega abajo y SOLO aparece cuando hay cambios sin guardar: se le pone
   `data-sucio="si"` al formulario. Así se acaba el «he escrito en tres tarjetas,
   he guardado una y las otras dos se han borrado sin avisar». */
#gst-raiz .bc-guardar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bc-e2);
  margin-top: var(--bc-e3);
  padding: var(--bc-e2) var(--bc-e3);
  background: var(--bc-hoja);
  border: 1px solid var(--bc-raya-fuerte);
  border-top: 2px solid var(--bc-filo);
  border-radius: 0 0 var(--bc-r2) var(--bc-r2);
  box-shadow: var(--bc-sombra-flot);
}
#gst-raiz [data-sucio="si"] .bc-guardar,
#gst-raiz .bc-guardar--siempre { display: flex; }
/* El contador de cambios sin guardar. Es lo que hoy no existe. */
#gst-raiz .bc-sucio {
  font-size: var(--bc-t2);
  font-weight: 700;
  color: var(--bc-pronto);         /* 5,87:1 */
}
#gst-raiz .bc-sucio::before { content: "\25C6\00a0"; font-size: .85em; }


/* ═══════════════════════════════════════════════════════════════════════════
   §13 · LOS BOTONES · CUATRO, Y UNO SOLO PRINCIPAL POR PANTALLA
   ═══════════════════════════════════════════════════════════════════════════
   LA REGLA QUE FALTA HOY: UN botón principal por pantalla. En «Mi trimestre»
   hay hasta SEIS botones «Arreglarlo» idénticos en la misma tarjeta, todos
   principales y del mismo tamaño; y en la pantalla de aterrizaje del cliente
   hay CERO. Ni seis ni cero: uno.

     Seis acciones principales son cero acciones principales: si todo grita, no
     se oye nada.

     bc-b1 · PRINCIPAL   relleno de lima con letra negra (13,30:1). Es «lo que
                         hay que hacer aquí», y es el único lima de la pantalla
                         sobre fondo claro, porque va de RELLENO, que es donde
                         el lima funciona. Lleva filo negro: sin él, sobre
                         blanco, el botón no tendría contorno.
     bc-b2 · SECUNDARIO  blanco con filo. Todo lo demás que se puede hacer.
     bc-b3 · DE TEXTO    sin caja y SUBRAYADO, no solo de color. Acciones de
                         fila, «ver el detalle», «deshacer». En una tabla se ve
                         ochenta veces seguidas: no puede pesar.
     bc-b4 · PELIGROSO   filo rojo y letra roja; se rellena al pasar el ratón.
                         NO va relleno de rojo desde el principio: un botón rojo
                         macizo invita a pulsarlo, y este es justo el que no.
                         Pero tampoco se disfraza de secundario.

   `bc-bp` es el nombre que ya usa `gst-marca.js` para el principal: se mantiene
   como sinónimo para no romper lo que ya lo pinta.                            */

#gst-raiz .bc-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-e0);
  height: var(--bc-mando);
  padding: 0 var(--bc-e3);
  font-family: var(--bc-texto);
  font-size: var(--bc-t3);
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--bc-rp);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bc-tinta);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#gst-raiz .bc-b1, #gst-raiz .bc-bp {
  background: var(--bc-lima);
  color: var(--bc-negro);
  border-color: var(--bc-lima-borde);
}
#gst-raiz .bc-b1:hover, #gst-raiz .bc-bp:hover { background: var(--bc-lima-fuerte); }
#gst-raiz .bc-b2 {
  background: var(--bc-hoja);
  color: var(--bc-tinta);
  border-color: var(--bc-borde-mando);
}
#gst-raiz .bc-b2:hover { background: var(--bc-realce); border-color: var(--bc-tinta-2); }
#gst-raiz .bc-b3 {
  height: auto;
  padding: 0 var(--bc-e0);
  background: none;
  border: 0;
  color: var(--bc-enplazo);        /* 7,62:1 */
  font-size: var(--bc-t2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#gst-raiz .bc-b3:hover { color: var(--bc-tinta); }
#gst-raiz .bc-b4 {
  background: var(--bc-hoja);
  color: var(--bc-urgente);
  border-color: var(--bc-urgente);
  border-width: 2px;
}
#gst-raiz .bc-b4:hover { background: var(--bc-urgente); color: var(--bc-blanco); }  /* 6,70:1 */

#gst-raiz .bc-b--peq { height: calc(var(--bc-mando) - 6px); padding: 0 var(--bc-e2); font-size: var(--bc-t2); font-weight: 600; }
#gst-raiz .bc-b--ancho { width: 100%; }
/* En el panel de acción del cliente el principal es más grande: es lo único que
   tiene que hacer en toda la pantalla. */
#gst-raiz.bc-cliente .bc-panel .bc-b1,
#gst-raiz .bc-cliente .bc-panel .bc-b1 {
  height: calc(var(--bc-mando) + 8px);
  font-size: var(--bc-t4);
  padding: 0 var(--bc-e5);
}
/* Apagado: se ve que no se puede pulsar sin depender del color (pierde el filo
   y el ratón cambia de forma). */
#gst-raiz .bc-b:disabled, #gst-raiz .bc-b[aria-disabled="true"] {
  background: var(--bc-franja);
  color: var(--bc-tinta-3);
  border-color: var(--bc-raya);
  cursor: not-allowed;
}
/* El principal SIEMPRE el último a la derecha: es donde se termina de leer. */
#gst-raiz .bc-botonera { display: flex; flex-wrap: wrap; gap: var(--bc-e1); align-items: center; }
#gst-raiz .bc-botonera--fin { justify-content: flex-end; }

/* La tecla que se enseña al lado de una acción. Willy va a teclado: si la tecla
   no está escrita, la tecla no existe. */
#gst-raiz .bc-tecla {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  border: 1px solid var(--bc-raya-fuerte);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--bc-franja);
  font-family: var(--bc-codigo);
  font-size: var(--bc-t1);
  line-height: 16px;
  text-align: center;
  color: var(--bc-tinta-2);
  white-space: nowrap;
}

/* El buscador. La lupa va escrita FUERA de la casilla: un icono dentro tapa el
   texto en cuanto se escribe largo. */
#gst-raiz .bc-buscador { display: flex; align-items: center; gap: var(--bc-e0); flex: 1 1 26ch; max-width: 42ch; }
#gst-raiz .bc-buscador .bc-in { flex: 1 1 auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   §14 · LOS AVISOS · Y LA REGLA DE HIGIENE QUE LOS ORDENA
   ═══════════════════════════════════════════════════════════════════════════
   Un aviso tiene que decir TRES cosas: qué pasa, a quién le pasa y qué se hace.
   Si no hay nada que hacer, no es un aviso: es un dato, y va en la tarjeta.

   Y LA REGLA QUE MÁS DAÑO HACE HOY, que no es de CSS pero se escribe aquí
   porque es aquí donde se olvida:

       UN AVISO QUE SALE SIEMPRE NO ES UN AVISO: ES PAPEL PINTADO.
       Y si el papel pintado es rojo, lo que se aprende es a no mirar el rojo.

   «Mis papeles» —la pantalla de trabajo diario del cliente— abre TODOS LOS DÍAS
   con un cartel rojo en MAYÚSCULAS hablando del BOE y de Hacienda a alguien que
   solo venía a arrastrar un PDF. Ese mismo patrón ya se reconoció como error y
   se quitó de «Mi trimestre» y de «Mi equipo»; en la pantalla donde el cliente
   tiene que TRABAJAR sigue intacto.

   Lo que no puede desaparecer no es urgente: es una nota (`bc-nota`) o un pie
   legal (`bc-pie-legal`), y va abajo, pequeño y legible, sin gritar.

   MAYÚSCULAS NUNCA en un párrafo: son más lentas de leer y se perciben como un
   grito.                                                                      */

#gst-raiz .bc-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--bc-e1);
  padding: var(--bc-e1) var(--bc-e2);
  border: 1px solid var(--bc-raya);
  border-left: var(--bc-nivel-filete, 4px) var(--bc-nivel-estilo, solid) var(--bc-nivel, var(--bc-raya-fuerte));
  border-radius: 0 var(--bc-r) var(--bc-r) 0;
  background: var(--bc-nivel-f, var(--bc-franja));
  color: var(--bc-tinta);           /* el cuerpo del aviso, siempre tinta plena */
  font-size: var(--bc-t3);
  line-height: var(--bc-interlinea);
  margin-bottom: var(--bc-e1);
}
#gst-raiz .bc-aviso::before {
  content: var(--bc-nivel-forma, "\25CF");
  color: var(--bc-nivel, var(--bc-tinta-3));
  font-size: 12px;
  line-height: 1.5;
  flex: none;
}
#gst-raiz .bc-aviso-cuerpo { min-width: 0; flex: 1 1 auto; }
#gst-raiz .bc-aviso-t { display: block; font-weight: 700; color: var(--bc-nivel, var(--bc-tinta)); }
#gst-raiz .bc-aviso p { max-width: var(--bc-lectura); }
#gst-raiz .bc-aviso .bc-empuja { align-self: center; }

/* La nota que SÍ se queda en pantalla: de dónde sale una cifra, qué NO vigila un
   semáforo, por qué esta pantalla no presenta nada. Un filete fino y una línea.
   No grita, y no se va. */
#gst-raiz .bc-nota {
  border-left: 2px solid var(--bc-raya-media);
  padding: 2px 0 2px var(--bc-e1);
  margin-top: var(--bc-e1);
  font-size: var(--bc-t1);
  color: var(--bc-tinta-2);
  line-height: 1.5;
}
#gst-raiz .bc-nota--marca { border-left-color: var(--bc-filo); }

/* El descargo legal: UNA vez, al final, en gris legible. NO tres carteles rojos
   permanentes como hoy. */
#gst-raiz .bc-pie-legal {
  margin-top: var(--bc-e5);
  padding-top: var(--bc-e1);
  border-top: 1px solid var(--bc-raya);
  font-size: var(--bc-t1);
  color: var(--bc-tinta-2);
  line-height: 1.5;
  max-width: var(--bc-lectura);
}

/* ── LA AYUDA CONTEXTUAL · LA INTERROGACIÓN ────────────────────────────────
   LA REGLA QUE ORDENA LA PANTALLA:
     · EL NOMBRE DE LAS COSAS NO ES UNA AYUDA. Va escrito siempre, como texto
       normal. Hoy la pantalla avisa del 349 y no dice ni cómo se llama, porque
       el nombre está detrás de un interruptor que arranca apagado.
     · LO QUE HAY QUE HACER Y LO QUE ESTÁ EN PELIGRO tampoco. Siempre a la vista.
     · LA EXPLICACIÓN LARGA (qué es el 349, de dónde sale ese plazo) va detrás de
       la interrogación. Ahí no estorba y se encuentra sola.

   Es un <button> de verdad y no un adorno, para que lleguen el dedo y el
   tabulador, y sin JavaScript: un globo de ayuda que depende de un script es un
   globo que desaparece el día que el script falla, y las explicaciones son justo
   lo que no puede desaparecer.
   La estructura es la que ya genera `gst-marca.js`:
       <span class="bc-ayuda"><button>?</button><span role="tooltip">…</span></span> */
#gst-raiz .bc-ayuda { position: relative; display: inline-block; vertical-align: baseline; }
#gst-raiz .bc-ayuda > button {
  width: 18px; height: 18px; min-width: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--bc-rp);
  border: 1px solid var(--bc-borde-mando);
  background: transparent;
  color: var(--bc-tinta-2);
  font-family: var(--bc-texto);
  font-size: 11px; line-height: 1;
  padding: 0;
  cursor: help;
}
#gst-raiz .bc-ayuda > button:hover { background: var(--bc-lima-suave); border-color: var(--bc-lima-borde); color: var(--bc-tinta); }
/* Un blanco de 34 px para el dedo alrededor de un botón de 18 px, sin que el
   botón se vea más grande. Es el mínimo que se toca sin fallar. */
#gst-raiz .bc-ayuda > button::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
#gst-raiz .bc-ayuda > span {
  position: absolute; left: 0; top: 24px; z-index: 60;
  width: max-content; max-width: min(21rem, 78vw);
  background: var(--bc-negro);
  color: var(--bc-niebla);          /* 14,56:1 */
  padding: 9px 11px;
  border-radius: var(--bc-r);
  font-family: var(--bc-texto);
  font-size: var(--bc-t2);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0; visibility: hidden;
  pointer-events: none;             /* el globo nunca tapa un botón */
  transition: opacity .12s ease, visibility .12s;
  box-shadow: var(--bc-sombra-alta);
}
#gst-raiz .bc-ayuda:hover > span,
#gst-raiz .bc-ayuda:focus-within > span { opacity: 1; visibility: visible; }
/* Si la interrogación está pegada al borde derecho, el globo se ancla al otro
   lado en vez de salirse de la pantalla. */
#gst-raiz .bc-ayuda--der > span { left: auto; right: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   §15 · CUANDO NO HAY NADA, Y MIENTRAS LLEGA
   ═══════════════════════════════════════════════════════════════════════════
   UN VACÍO NO ES UN ERROR. Casi siempre es una buena noticia («no tienes nada
   pendiente») o una invitación («todavía no has subido ningún papel»). Así que
   nunca va en rojo, nunca lleva una cara triste, y SIEMPRE lleva la acción que
   lo llena: un estado vacío sin acción es un callejón.                        */

#gst-raiz .bc-vacio {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--bc-e1);
  padding: var(--bc-e5) var(--bc-e3);
  background: var(--bc-hoja);
  border: 1px dashed var(--bc-raya-fuerte);
  border-radius: var(--bc-r);
  color: var(--bc-tinta-2);
}
#gst-raiz .bc-vacio-t {
  font-family: var(--bc-titular);
  font-size: var(--bc-t4);
  font-weight: 700;
  color: var(--bc-tinta);
}
#gst-raiz .bc-vacio-x { font-size: var(--bc-t2); color: var(--bc-tinta-2); max-width: 52ch; }

/* CARGANDO · renglones fantasma con la FORMA de las filas que están llegando,
   no una rueda girando. Una rueda no dice cuánto falta ni qué va a salir; un
   renglón del mismo alto que el de verdad sí, y además cuando lleguen los datos
   NADA SALTA DE SITIO. El texto dice QUÉ se está trayendo, no «cargando…». */
#gst-raiz .bc-cargando {
  border: 1px solid var(--bc-raya);
  border-radius: var(--bc-r);
  overflow: hidden;
}
#gst-raiz .bc-cargando-t { font-size: var(--bc-t2); color: var(--bc-tinta-2); padding: var(--bc-e1) var(--bc-e2); }
#gst-raiz .bc-fantasma {
  height: var(--bc-fila);
  border-bottom: 1px solid var(--bc-raya);
  background: linear-gradient(90deg, var(--bc-franja) 25%, var(--bc-realce) 50%, var(--bc-franja) 75%);
  background-size: 300% 100%;
  animation: bc-latido 1.4s linear infinite;
}
#gst-raiz .bc-fantasma:last-child { border-bottom: 0; }
@keyframes bc-latido { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  #gst-raiz .bc-fantasma { animation: none; background: var(--bc-franja); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §16 · PANTALLAS PEQUEÑAS
   ═══════════════════════════════════════════════════════════════════════════
   El cliente entra desde el móvil más que desde el ordenador. Willy, nunca.
   Por debajo de 720 px: la cabecera se apila, las casillas ocupan el ancho
   entero (a 360 px ya no hay nada que repartir), el maestro-detalle se pone en
   una columna y la tabla rueda de lado DENTRO de su marco, sin mover el resto
   de la página.                                                               */

@media (max-width: 900px) {
  #gst-raiz .bc-dos { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #gst-raiz .bc-mesa { padding-left: var(--bc-e2); padding-right: var(--bc-e2); }
  #gst-raiz .bc-cartela { align-items: flex-start; }
  #gst-raiz .bc-periodo { margin-left: 0; width: 100%; }
  #gst-raiz .bc-campo { flex-basis: 100% !important; }
  #gst-raiz .bc-marco { max-height: none; }
  #gst-raiz .bc-piezas { grid-template-columns: 1fr; }
  #gst-raiz .bc-b { height: 40px; }        /* más alto: es para el dedo */
  #gst-raiz .bc-ayuda > span { max-width: calc(100vw - 32px); }
  #gst-raiz .bc-cola-fila { grid-template-columns: 2.4ch minmax(0, 1fr) auto; }
  #gst-raiz .bc-cola-fila .bc-que, #gst-raiz .bc-cola-fila .bc-cuando { display: none; }
}
/* (02/10/2026, auditoría 29/09 N03 y N04) En el móvil, las tablas de las
   pantallas (Facturas, Libros, el Mayor, el Expediente) medían hasta 961 px y
   se cortaban: la página tiene `overflow-x: clip` y no dejaba llegar a las
   columnas del IVA y del total. Aquí cada tabla rueda de lado DENTRO de sí
   misma, como el marco de arriba, sin mover el resto de la página. Y las
   casillas y desplegables no pasan del ancho de la pantalla (en el
   Expediente se salían de 10 a 18 px).                                       */
@media (max-width: 720px) {
  #gst-raiz table.gf-tb, #gst-raiz table.gx-tb, #gst-raiz table.gk-tb {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  #gst-raiz select, #gst-raiz input, #gst-raiz textarea, #gst-raiz .fi { max-width: 100%; box-sizing: border-box; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §17 · REPUESTO PARA NAVEGADORES VIEJOS
   ═══════════════════════════════════════════════════════════════════════════
   `color-mix` lo entienden Chrome 111+, Firefox 113+ y Safari 16.2+. Juan usa
   Chrome al día, así que esto es un cinturón por si un cliente entra con algo
   viejo: el valor ya calculado a mano. #F4FDD6 es exactamente lo que devuelve
   el `color-mix` de la §1.                                                    */

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #gst-raiz { --bc-lima-suave: #F4FDD6; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §18 · AL IMPRIMIR
   ═══════════════════════════════════════════════════════════════════════════
   Un expediente y un libro registro se imprimen más de lo que parece, y se
   guardan en PDF para el cliente. En papel: sin barra negra, sin nada pegado,
   sin fondos de color (que solo gastan tinta y bajan el contraste), las tablas
   enteras y —esto es lo que hace un libro de verdad— la cabecera de la tabla
   REPETIDA en cada hoja.                                                      */

@media print {
  #gst-raiz { background: #FFFFFF; color: #000000; }
  #gst-raiz .bc-cabecera { position: static; box-shadow: none; }
  #gst-raiz .bc-barra { background: #FFFFFF; color: #000000; border-bottom: 2px solid #000000; }
  #gst-raiz .bc-logo, #gst-raiz .bc-logo i, #gst-raiz .bc-sello { color: #000000; background: none; }
  /* En papel el logotipo compone en negro, y el trazo del tachado también:
     el lima sobre blanco no se ve, y en una impresora en blanco y negro
     desaparecería del todo. El dossier lo permite («sobre fondo claro puede
     componer en negro»). Sin esta regla el tachado se perdía al imprimir y
     el logotipo se quedaba en «BUROCRACKS» a secas, que no es la marca. */
  #gst-raiz .bc-logo .bc-cracks { color: #000000; }
  #gst-raiz .bc-logo .bc-buro { color: #666666; }
  #gst-raiz .bc-logo .bc-buro::after { background: #000000; }
  #gst-raiz .bc-marco { max-height: none; overflow: visible; border-color: #000000; }
  #gst-raiz .bc-tabla thead { display: table-header-group; }
  #gst-raiz .bc-tabla thead th { position: static; background: #FFFFFF; color: #000000; }
  #gst-raiz .bc-tabla tfoot td { position: static; background: #FFFFFF; }
  #gst-raiz .bc-tabla tbody tr { break-inside: avoid; }
  #gst-raiz .bc-tarjeta { break-inside: avoid; box-shadow: none; }
  #gst-raiz .bc-guardar, #gst-raiz .bc-lados, #gst-raiz .bc-secciones,
  #gst-raiz .bc-mandos, #gst-raiz .bc-ayuda > button { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §19 · EL SUELO DE LA LETRA  ·  17/09/2026
   ═══════════════════════════════════════════════════════════════════════════
   La auditoría con navegador midió, pantalla a pantalla, cuánto del texto está
   por debajo de 12 px. En «Mi equipo» eran 297 trozos de 414. En el expediente,
   238 de 350. Y eso, dicho con las palabras de la propia auditoría, «a las ocho
   horas duele»: el operador de una gestoría no mira esta pantalla un minuto,
   la mira toda la jornada.

   Cómo se había llegado ahí: nadie puso letra de 10 px a propósito. Se puso
   `font-size:10px` en una etiqueta de un formulario, y esa etiqueta se copió a
   la siguiente pantalla, y a la siguiente. Doce pantallas después, la mitad de
   lo escrito es letra de aviso legal.

     Es la fotocopia de la fotocopia: cada copia se parece a la anterior y
     ninguna se parece al original.

   EL SUELO SON 12 px, y se pone AQUÍ, una vez, y no parcheando doce pantallas:
   estas clases las usan todas, así que un solo sitio las arregla todas — y las
   que se escriban mañana nacen ya bien.

   POR QUÉ FUNCIONA DESDE AQUÍ: varias pantallas se inyectan su propia hoja de
   estilos con `<style>` desde su archivo .js, y esas hojas entran DESPUÉS que
   esta. Da igual: escriben `.gx-ay`, y aquí pone `#gst-raiz .gx-ay`, que pesa
   más por llevar un identificador delante. Gana el que pesa, no el que llega
   el último.

   LO QUE ESTO NO PUEDE ARREGLAR, y hay que decirlo: un `style="font-size:10px"`
   escrito en la propia etiqueta gana a cualquier hoja. Esos se arreglan en su
   archivo, uno a uno. Aquí solo caben los que vienen por su clase.

   Y LO QUE SE HA DEJADO A PROPÓSITO (17/09/2026): el ERP tiene en su hoja
   principal un `thead th { font-size: 10px }` que vale para TODO el programa,
   no solo para Burocracks. Hoy se cuela en una tabla de «Mi banco» (diez
   rótulos de columna). Subirlo desde aquí es una línea —`#gst-raiz thead th`—
   pero toca una tabla que nadie ha medido todavía, así que no se hace de
   pasada: se mide primero. Queda apuntado para que no haya que volver a
   buscarlo.

   El escalón más bajo de la propia marca (`--bc-t1`) también sube, y se cambia
   donde se define (§3) para que no haya dos verdades sobre lo mismo.         */

#gst-raiz .ev-h,                  /* el rótulo de cada tarjeta (era 10,5 px)   */
#gst-raiz .ev-pill,               /* los distintivos de color (11 px)          */
#gst-raiz .ev-chip,               /* las fichitas de filtro (11 px)            */
#gst-raiz .gx-ay,                 /* la explicación de cada casilla (11 px)    */
#gst-raiz .gx-int,                /* el interruptor de explicaciones (11 px)   */
#gst-raiz .gx-nota,               /* la línea de aviso discreta (11,5 px)      */
#gst-raiz .gx-plantilla,          /* el recuento de la plantilla (11,5 px)     */
#gst-raiz .gx-tb th {             /* la cabecera de las tablas del expediente
                                     (9,5 px, la letra más pequeña que había)  */
  font-size: 12px;
}

/* OJO CON LAS HOJAS QUE YA ESCRIBEN `#gst-raiz` DELANTE (contabilidad,
   facturas, epígrafes): esas pesan lo mismo que estas reglas y entran después,
   así que ganarían ellas. Por eso esas tres NO están en la lista de arriba: se
   han subido a 12 px en su propio archivo, que es donde se puede.            */

/* ═══════════════════════════════════════════════════════════════════════════
   FIN. Si algo de una pantalla no se puede montar con estas piezas, la
   respuesta NO es inyectar un <style> en esa pantalla: es añadir la pieza AQUÍ,
   con su comentario, y que sirva en las dos densidades. Eso es lo único que
   impide volver al sitio del que venimos.
   ═══════════════════════════════════════════════════════════════════════════ */