/* Estilos de la app: todo lo que era el <style> de base.html.
   Se carga en <head> desde base.html. Los tokens de color y la marca van
   primero (:root); cada bloque conserva su comentario de por que. */

:root {
  /* ======================================================================
     MARCA: verde bosque y latón sobre papel hueso (28/09/2026)
     ======================================================================
     Elegante y poco transitado en finanzas. Un color de marca, el VERDE
     BOSQUE casi negro, y un papel hueso que no llega a leerse como color.

       PRINCIPAL = ACCIÓN Y SELECCIÓN. El verde botella.

       LATÓN = CONTEXTO Y MARCO. Filete y punto, nunca relleno ancho ni
       texto (para texto, `--laton-ink`).

     La POLARIDAD va en verde y rojo APAGADOS, en pastel para los rellenos
     (`--pos-fill`/`--neg-fill`) y un escalón más hondo para la cifra.
     Azul, nunca.
     `py manage.py paleta` mide el contraste.

     La escala de texto es un solo verde tinta bajando de peso —ink → pardo →
     muted → hueco—, y líneas y sombras salen de la misma tinta translúcida. */
  /* 29/09/2026: la tinta pasa del verde tinta al MARRÓN de la marca («Calabaza»,
     #241E15 en /configuracion/marca/) y el papel a blanco. El logo se pinta con
     `--ink`, así que texto y marca vuelven a ser el mismo color. La escala baja
     de peso en el mismo marrón; el verde bosque queda solo como ACCIÓN. */
  --ink:#463829;          /* texto principal Y el logo (lo pinta con --ink). Chocolate SIN deriva roja: #4A3526 tenía R-G > G-B y sus claros se leían rojizos */
  --ink-rgb:70,56,41;    /* la misma tinta en canales, para rgba(var(--ink-rgb), α): sombras y líneas */
  --pardo:#675846;        /* texto secundario */
  --muted:#877764;        /* terciario, rótulos */
  --hueco:#CCC2B4;        /* el dato que NO está: hueco, placeholder */

  /* ---- El champán ----
     «Muy suave tirando a blanco»: siete puntos de calidez sobre el blanco,
     lo justo para que el papel se note y para que las tablas BLANCAS floten
     encima. Tres niveles, y cada uno dice una cosa:
       --bg     la página. El champán.
       --card   la tabla, el panel, lo que se lee. Blanco, sin mezcla.
       --rail   la ranura: el marco de la app (cabecera y barras laterales),
                un punto más hondo que la página.
     Y dos superficies más, que antes estaban escritas a mano en diez sitios:
       --surco  fondo hundido de un conmutador o un segmentado.
       --crema  banda de referencia DENTRO de una tabla blanca. */
  /* 29/09/2026: BLANCO. Se probaron papeles un punto por debajo —gris neutro,
     algodón hacia el marrón, verde de libro— y ninguno convenció: el blanco es el
     blanco. La separación entre bloques la hacen el borde y el aire. */
  --bg:#FFFFFF;
  /* 29/09/2026: «muy brillante, cansa la vista». La PÁGINA baja a un papel apenas
     verdoso; la barra de navegación, el lateral y las tarjetas siguen en --bg /
     --card, blancos, y ahora flotan sobre él. Lo usan el <body> y la banda de indicadores (.hk): --bg lo
     comparten campos, chips y cabeceras fijas, que tienen que seguir blancos. */
  --papel:#F9FAF6;
  --card:#FFFFFF;
  --rail:#F1ECE3;         /* banda de columnas de tabla: tostado claro. Ojo: con R-G > G-B se lee ROSADO (el #F7F3F0 de antes) */
  --surco:#F1EAE2;
  --crema:#FAF8F4;

  /* ---- La escala del DESPLIEGUE ----
     Un peldaño de superficie por cada nivel que se abre en un árbol. Lo que
     hace que abrir una fila SE SIENTA: sin esto, ocho filas nuevas aparecen
     en el mismo fondo que su padre y el ojo tiene que contar sangrías para
     saber dónde está.
     EL NIVEL 0 NO PINTA NADA (16/09/2026: "otra vez lo mismo, sigue
     blanco"). El árbol del informe es la única tabla que NO flota sobre la
     página: ocupa el centro entero y su primera fila es la página. Un
     rectángulo blanco de 1.120px sobre el champán es un recuadro aunque no
     tenga borde — es el mismo bulto que se quitó del `.panel`, pintado una
     fila más abajo.
     LA ESCALA SUBE HACIA EL BLANCO, no baja hacia la sombra (16/09/2026:
     "pierden legibilidad, que vayan a más claro de a poco"). La primera
     versión oscurecía un punto por peldaño, y eso pone el fondo MÁS SUCIO
     justo donde el texto es más pequeño y más gris: el nivel de proveedor,
     de persona o de producto va en `--muted` a 12px, y llegaba al cuarto
     peldaño con menos contraste que el título de arriba, que está en negrita
     y en `--ink`. Al revés funciona como se lee: abrir una fila SACA A LA
     LUZ lo que había dentro, el dato queda sobre blanco puro y el contraste
     crece con la profundidad en vez de caer.
     Y EMPIEZA EN EL PAPEL, no por debajo (17/09/2026: "el centro de costo
     es más oscuro que el título COGS, está mal desde dónde se empieza a
     aclarar"). La versión anterior arrancaba un punto hundido para tener de
     dónde subir, y eso deja la secuencia en V: el nivel 0 está en 0,965 de
     luminancia, el primer peldaño caía a 0,889 y de ahí subía. Ese bajon
     inicial era de -0,076, el DOBLE que cualquier paso posterior, así que
     lo único que se veía con fuerza era el escalón que va al revés: abrir
     una fila la ensuciaba, y el resto de la rampa —que sí aclaraba—
     empezaba al tercer clic anidado, donde casi nadie llega.
     EL PRECIO DE ARRANCAR EN EL PAPEL es que la superficie ya no cuenta
     niveles, y hay que saberlo: del champán al blanco puro hay 1,034 de
     ratio EN TOTAL, o sea ~1,009 por peldaño. Está en el límite de lo
     perceptible, y medido en pantalla los cuatro peldaños se ven casi
     planos —solo la hoja, ya en blanco, se despega del papel. Es el techo
     físico de este papel, no un ajuste pendiente: cualquier reparto
     ascendente da lo mismo, y el único modo de tener cuatro peldaños
     perceptibles es volver a hundir el arranque, que es justo lo que se
     rechazó. Quien quiera que abrir una fila SE SIENTA más que esto tiene
     que sacar la señal de otro sitio —la guía vertical de la sangría, como
     `lvl-bloque`— y no del fondo, que ya no da para más.
     Cuatro pasos parejos del papel a `--card`. Son del mismo champán,
     perdiendo calidez según suben —el azul sube nueve puntos y el rojo
     dos—. Nada de grises: un gris puro sobre este papel se lee sucio (ver
     la nota de los neutros, arriba). */
  --niv-1:#FFFFFF;
  --niv-2:#FFFFFF;
  --niv-3:#FFFFFF;
  --niv-4:#FFFFFF;

  /* Las líneas son TRANSLÚCIDAS a propósito: se apoyan sobre cualquier fondo
     (champán, tabla blanca, tinte de color) sin recortarse contra él. Y son
     EL MARRÓN de la tinta rebajado, no un gris: una hairline gris sobre papel
     cálido se ve sucia, y en esta app la hairline está en todas partes, así
     que es lo que más superficie de marca tiene por píxel de atención.
     Toda separación de bloque —el borde de un panel, el corte entre bandas,
     la raya bajo un encabezado— sale de aquí. Si hace falta una línea opaca
     (columnas clavadas, donde el translúcido deja ver los importes pasando
     por debajo), la versión opaca es `--reja`, que es el mismo marrón. */
  /* 29/09/2026: las líneas en MARRÓN que se vea marrón. Salían de la tinta a
     6-12% y sobre blanco se leían grises; ahora salen de un marrón tostado
     (#926E48), más cálido y con más croma que la tinta, al alfa justo para seguir
     siendo hairlines. */
  --line:rgba(146,110,72,.30);
  /* El borde de la tarjeta del área de trabajo: entre `--line-soft` y `--line`.
     El blanco sobre este papel casi no contrasta, así que es el borde el que
     dibuja la caja, pero tiene que leerse como contorno y no como raya. */
  --card-borde:rgba(146,110,72,.24);
  --line-soft:rgba(146,110,72,.16);
  --reja:#E9E0D4;         /* la hairline OPACA: rejilla de celda, track apagado */

  /* ---- Tres pesos de separación, y sólo uno cruza la pantalla ----
     Una app de tablas se convierte en papel milimetrado si toda línea va de
     borde a borde. El criterio:
       CORTE     `--line` a lo ancho. El marco de la app, la cabecera de
                 tabla, el total. Es estructura: separa cosas que no son la
                 misma. Son pocas y se ganan el ancho completo.
       SUGERIDA  la de aquí abajo. Separa renglones DENTRO de lo mismo, así
                 que no necesita llegar a los extremos: aparece cuando ya
                 hay dato y se apaga antes del borde. Guía el ojo por la
                 fila sin dibujar la caja que la contiene.
       NADA      entre las hojas de un mismo bloque, donde la sangría y el
                 color del texto ya dicen que van juntas.
     `--sep` vale lo mismo que `--line-soft` a ojo (un punto más, para que el
     tramo con color aguante el degradado): así la regla global del fade
     convive con las decenas de `border-bottom:var(--line-soft)` que cada
     vista declara por su cuenta, sin tener que tocarlas una a una.
     `--sep-fade` es el tramo que tarda en encenderse y en apagarse: hay que
     verlo, o el efecto es un recorte sucio en vez de una línea que se
     insinúa. El `min()` es para la tabla angosta, donde 120px fijos se
     comerían media línea. */
  --sep:rgba(146,110,72,.20);
  --sep-fade:min(120px,15%);
  /* Para bordes de celda (border-image, que respeta el border-collapse) */
  --sep-ini:linear-gradient(90deg, transparent 0, var(--sep) var(--sep-fade));
  --sep-fin:linear-gradient(90deg, var(--sep) calc(100% - var(--sep-fade)), transparent 100%);
  /* Para bloques que no son tabla (fondo de 1px, vía ::after) */
  --sep-linea:linear-gradient(90deg, transparent 0, var(--sep) var(--sep-fade),
              var(--sep) calc(100% - var(--sep-fade)), transparent 100%);
  /* Y la misma idea de pie: una vertical de altura completa entre dos cifras
     de la misma tira también dibuja una cuadrícula. Aquí el tramo va en
     porcentaje porque lo que separa mide 40px de alto, no 1.100 de ancho. */
  --sep-fade-v:22%;
  --sep-col:linear-gradient(180deg, transparent 0, var(--sep) var(--sep-fade-v),
            var(--sep) calc(100% - var(--sep-fade-v)), transparent 100%);

  /* El tono oscuro. NO ES LA CABECERA (es una banda clara, ver «La cabecera:
     UNA banda»): es el de los encabezados de tabla clavados, el toast, la
     barra del export y la marca del login. Es el fondo del pozo de la misma
     escala de marrón: un negro de otra paleta se notaría al lado del papel. */
  --nav:#463829;
  --nav-ink:#BCB2A5;      /* texto apagado sobre ese oscuro */

  /* ---- Caramelo: acción y selección ---- */
  --principal:#1E3B30;          /* relleno SIN texto encima: barra, punto, filete — 5,0:1 */
  --principal-hover:#112219;    /* hover del botón: más grave que el fondo del botón */
  --principal-ink:#1E3B30;      /* texto, trazo y FONDO DE BOTÓN — 6,2:1 en la ranura */
  /* 29/09/2026: el tinte de selección y de hover es MARRÓN CLARO (tostado, no
     rojizo): el verde a 8% sobre blanco no se leía verde, y la tinta a 4% se leía
     rosada. Un solo tostado para hover, selección y fondo de switch. */
  --hover:rgba(150,112,72,.075);
  --hover-2:rgba(150,112,72,.12);
  --principal-tint:rgba(150,112,72,.13);
  --principal-line:rgba(150,112,72,.42);
  /* La versión OPACA del tinte. No es un capricho: donde hay columnas
     clavadas (la consola de presupuesto, las tablas con la primera columna
     fija) un fondo translúcido deja ver los importes pasando por debajo del
     nombre, así que el hover de fila tiene que ser opaco. */
  --principal-op:#F5F0EA;

  /* ---- Celeste: contexto y marco. El único color vivo de la paleta ----
     Va SATURADO (S≈88) y no claro: la vivacidad la da el croma, no la
     luminosidad, y subirle la luminosidad para que «se viera más» es lo que
     lo dejaría por debajo de 3:1 sobre la ranura. Por eso el relleno no es
     un celeste de cielo de mediodía sino uno profundo, que es el que aguanta
     encima del champán sin desaparecer. */
  --laton:#A8874A;         /* relleno y punto — 3,3:1 */
  --laton-ink:#7A602E;     /* texto y token de período — 5,2:1 sobre el champán */
  --laton-tint:#F4EEE2;
  --laton-line:rgba(168,135,74,.45);

  /* Semánticos. El rojo NO es el rojo señal de siempre: es un rojo vino, con
     algo de rosa, para que un desvío se lea como una nota al margen y no como
     una alarma de sistema. Aguanta como texto (4,5:1); `-ink` es la versión
     grave, para cuando el rojo tiene que pesar más que la cifra. */
  --ambar:#82612A;        /* avisos suaves — 4,5:1 */
  --rojo:#A0524A;         /* desvíos al alza — 4,7:1 */
  --rojo-ink:#8A443D;     /* rojo de texto cuando tiene que pesar */
  --rojo-soft:#DDAAA2;    /* bordes y trazos rojos que no deben gritar */
  --rojo-tint:rgba(160,82,74,.08);
  --rojo-line:rgba(160,82,74,.24);

  /* Una tipografía, no tres. El peso y el tamaño hacen la jerarquía; la
     familia no. El logotipo conserva la suya —y sus verdes yerba—: es marca
     registrada, no interfaz.
     Fuentes DEL SISTEMA, sin descargar nada (29/09/2026): la app se publica
     y cada petición a un tercero es una dependencia más que el pentest y el
     RGPD miran. Segoe UI en Windows, San Francisco en Mac, Roboto en Android. */
  --ff:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;

  /* La única excepción, y no contradice lo de arriba: esta familia no hace
     jerarquía, hace AUTORÍA. Marca lo que escribió una persona frente a lo
     que redactó la app, que es una distinción que el peso y el tamaño no
     pueden dar (un párrafo en negrita no dice «esto lo firmó alguien»).
     Se usa SOLO en el texto manual de la explicación del mes.
     Una serif en CURSIVA (28/09/2026): la casual de antes (Shantell Sans) se
     leía a cuaderno — «demasiado informal». La cursiva serif conserva la
     sensación de nota al margen sin dejar de ser un informe, y el cambio de
     familia sigue diciendo «esto lo escribió alguien».
     Cambiar de idea es cambiar esta línea y `--est-nota`. */
  --ff-nota:Georgia,"Times New Roman",serif;
  --est-nota:italic;
  /* El fondo de la nota: PLANO, sin degradado. Lo justo para que la cita se
     lea como un bloque aparte del título de su fila. */
  --nota-bg:#F1ECE3;

  --radio:4px;
  /* La MEDIDA de los arboles del informe y de todo lo que tiene que
     alinear con sus columnas (la cabecera de cada pista, con su total y
     su tendencia). Es un token y no dos literales porque cuando se
     escribian por separado la cabecera se quedaba con el ancho del
     contenedor y su total acababa 400px a la derecha de la columna donde
     estan sus partes. */
  /* 29/09/2026: FIJA. Se probó que llenara el ancho (hasta 1400) y todo quedaba
     estirado: la cifra lejos de su concepto, la cascada ancha. El sobrante de una
     pantalla ancha lo absorbe el carril de «qué revisar» (ver `--carril-rev`).
     30/09/2026: 1180 → 1280 («agranda un poco más»), con los márgenes del centro
     y de la tarjeta recortados a la vez: la Q × P de ingresos ganó su Var % y con
     1180 menos 26+22 de aire por lado desbordaba y sacaba scroll lateral. */
  --medida-arbol:1280px;
  /* El ancho del carril de «qué revisar». Es un token porque lo necesitan
     DOS sitios que no se tocan en el marcado: la grilla del área de trabajo
     (`.pm-layout`), que lo reserva como columna, y la tira de cifras de la
     cabecera (`.hk`), que vive fuera de esa grilla y tiene que descontarlo
     para que su bloque caiga sobre la columna del análisis y no sobre el
     carril. Escrito dos veces, cualquier retoque dejaba el titular
     desalineado con la tabla que encabeza. */
  --carril-rev:clamp(300px, 20vw, 380px);   /* 29/09/2026: 318 lo cortaba, 520 se comía la pantalla */
  /* Sin relieve: los bloques se separan con una hairline y aire, no con una
     caja que flota. La única sombra que queda es `--flota`, para lo que de
     verdad está ENCIMA (desplegables), donde la sombra es información. Va
     teñida del marrón de la tinta, como las líneas: una sombra gris sobre papel cálido se
     ve sucia. */
  --sombra:none;
  --flota:0 0 0 1px rgba(70,56,41,.06), 0 8px 24px rgba(70,56,41,.12);
  --ring:0 0 0 2px rgba(30,59,48,.35);

  /* Cabecera, medida por el JS del final porque la banda envuelve y su alto
     cambia con el ancho:
       --ws-head  su alto completo. Fija el alto mínimo del área de trabajo.
       --ws-top   de dónde cuelga la barra lateral.
     Los dos valen lo mismo desde que la cabecera se pincha: antes se iba al
     scrollear y `--ws-top` medía cuánta quedaba en pantalla, pero ahora la
     banda lleva las CIFRAS DEL MES, que son justamente lo que no se puede ir
     (ver `.hk`). Se conservan los dos nombres porque significan cosas
     distintas y mañana pueden volver a diferir. */
  --ws-head:0px;
  --ws-top:0px;
  /* El carril de «qué revisar», fijo a la ventana (ver `.pm-rev-in`): dónde
     empiezan los recuadros de las cifras. Se mide con la cabecera completa y
     no cambia al compactar: el carril no se mueve. */
  --ws-rail-g:0px;

  /* Polaridad y gráficos. «Lo bueno» es un TURQUESA PETRÓLEO, no un verde:
     el verde de semáforo es el color más gastado que hay en una pantalla de
     cifras —lo usa cualquier planilla— y, sobre papel champán, un verde medio
     tira a oliva y se confunde con los verdes yerba del logotipo. El petróleo
     es un teal profundo (H≈182) que se lee como «bien» sin gritar y queda a
     quince grados de tono del celeste de marca (H≈197), que es bastante para
     no confundirlos porque además no comparten ni sitio ni oficio: el celeste
     enmarca, el petróleo es una cifra. */
  --pos:#427050;          /* holgura — 5,7:1 sobre el champán */
  --neg:#A0524A;          /* sobregasto */
  /* Los mismos dos, en velo: para teñir un papel sin pintarlo. El alfa es el
     de `--rojo-tint` (.09) porque es el más bajo que todavía se distingue del
     papel a simple vista; por encima de ahí el color deja de ser un matiz del
     soporte y se lee como un estado con relleno, que es lo que la paleta
     reserva para los chips. `--neg-tint` es el mismo velo que `--rojo-tint`
     y se nombra aparte porque lo que tiñe no es «rojo», es «va mal». */
  --neg-tint:rgba(160,82,74,.08);
  /* Y los mismos dos en FILETE. El velo tiñe el papel; el filete es el trazo
     del canto, que es donde la paleta pone el color cuando tiene que leerse
     de lejos (ver `--laton-line`, que hace lo mismo para «contexto»). Comparten
     alfa con el celeste (.34) para que un papelito teñido y uno sin signo
     pesen igual en el canto: lo que cambia es el tono, no la fuerza. */
  --pos-line:rgba(66,112,80,.30);
  /* Los mismos dos en PASTEL, para RELLENOS sin texto encima (barras, puntos,
     la cascada). 28/09/2026: «discretos, pastel, acordes a la página; rojos y
     verdes, azul nunca». El pastel no aguanta como texto, así que la cifra
     va en `--pos`/`--neg`, el mismo tono un escalón más hondo.
     29/09/2026: el verde (#A9C9AE) se leía lavado al lado del salmón. Ahora
     iguala su claridad OKLCH (0,78) con un poco más de croma (0,08 vs 0,067),
     porque a igual croma el verde sigue pareciendo más pálido. */
  --pos-fill:#8FC599;
  --neg-fill:#E0A99E;
  --btn-bg:var(--principal-ink); /* botón primario: lleva texto blanco encima */
  --btn-ink:#FFFFFF;
  /* Lo que en un gráfico NO es sumar ni restar —el mes actual, los extremos de
     la cascada, la línea de tendencia— va en el marrón del logo (29/09/2026). */
  --chart-now:#463829;
  /* Los extremos de la cascada (el mes anterior y el mes): contexto, no noticia.
     Van PÁLIDOS para que lo que salte a la vista sean las variaciones. */
  --chart-ancla:#463829;  /* los extremos de la cascada: el marrón del logo, como --chart-now */

  /* Incidencias del cierre — cuatro tonos categóricos, no semánticos.
     El color identifica el tipo de incidencia (falta contabilizar / vino el
     mes anterior / fuera de plan / variación), no si algo va bien o mal.
     Validados: banda de luminosidad, suelo de croma, separación para
     daltonismo (peor par ΔE 17,6 protan) y contraste >=3:1 sobre blanco.
     PENDIENTE, y ahora más que antes: `--c-inc-prev` era un azul (#1568A0) a
     un pelo del `--laton-ink` de marca, así que un chip de «vino el mes
     anterior» se parece al token de período; y `--c-inc-desvio` es un morado
     que quedó huérfano cuando el lila salió de la paleta. Retocarlos pide
     volver a correr la validación de separación (ΔE perceptual entre los
     cuatro, también en protanopia), que es un trabajo aparte y no se
     improvisa a la vez que un cambio de marca. */
  --c-inc-pend:#A87A35;
  --c-inc-prev:#56708A;
  /* Chip «info»: el fondo y el borde del --c-inc-prev, como --rojo-tint/--rojo-line. */
  --info-tint:rgba(86,112,138,.08);
  --info-line:rgba(86,112,138,.24);
  --c-inc-fuera:#A0524A;
  --c-inc-desvio:#7A5A7E;
}
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* El hueco de la barra de scroll se reserva SIEMPRE. Sin esto, pasar a una
   vista corta (p. ej. de «Cómo cerramos» a la bandeja) quitaba la barra, la
   página ganaba ~15px de ancho y todo —nav, cifras, carril— saltaba de lado a
   la vez que la cabecera se expandía. */
html { scrollbar-gutter:stable; }
body {
  margin:0; background:var(--papel); color:var(--ink);
  font-family:var(--ff);
  font-size:14px;
  /* El aire entre renglones es lo que hace que una pantalla densa de números
     se lea como un documento y no como una planilla. */
  line-height:1.62;
  letter-spacing:-.003em;
}
/* Rótulos en versalitas. Con UNA sola tipografía, lo que los separa del texto
   corrido es el tracking y el peso, no la familia: sin abrirlas, las
   mayúsculas se apelmazan y el rótulo pesa más que la cifra que titula. */
.tarjeta .l, .subs-lbl, th, .pe-scope-lbl {
  letter-spacing:.11em; font-weight:500;
}
h2 { font-size:19px; font-weight:600; letter-spacing:-.012em; }
h3 { font-size:14.5px; font-weight:600; letter-spacing:-.008em; }
a { color:var(--principal); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:8px; }

/* ==== Puente y matriz del cierre (gasto e ingresos) ====
   Componente compartido: el marcado vive en _cierre_puente/_cierre_matriz
   (gasto) y _fact_puente/_fact_matriz (ingresos). Está aquí y no en
   _gasto.html porque la pestaña de Ingresos llega por AJAX y puede
   cargarse sin gasto, según permisos. */
/* ---- Puente del cierre: mes anterior -> contabilizado -> presupuesto ----
   Cada tramo se lee "qué hay que hacerle al número de arriba para llegar
   al de abajo", así que la suma de cada bloque es la diferencia entre sus
   dos anclas. Los cuatro colores son los de las incidencias. */
.cp-panel { background:var(--card); border:1px solid var(--line); border-radius:6px;
  margin-bottom:14px; overflow:hidden; }
.cp-head { padding:13px 18px; border-bottom:1px solid var(--line-soft); display:flex;
  align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cp-head h3 { margin:0; font-size:14px; }
.cp-cadena { padding:4px 0 6px; }
.cp-fila { display:grid; grid-template-columns:minmax(200px,1fr) minmax(120px,320px) 108px 74px;
  align-items:center; gap:16px; padding:7px 20px; width:100%; border:0; background:none;
  text-align:left; font-family:inherit; color:inherit; }
.cp-fila.cp-clic { cursor:pointer; }
.cp-fila.cp-clic:hover { background:var(--hover); }
.cp-fila.cp-activa { background:var(--principal-tint); box-shadow:inset 3px 0 0 var(--principal); }
.cp-et { font-size:13px; display:flex; align-items:center; gap:8px; line-height:1.3; }
.cp-n { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right;
  white-space:nowrap; }
.cp-val {font-size:13.5px;
  text-align:right; font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap; }
/* Anclas: las tres cifras que la cadena cuadra */
.cp-ancla { background:var(--bg); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding-top:11px; padding-bottom:11px; }
.cp-ancla .cp-et { font-weight:700; font-size:13.5px; }
.cp-ancla .cp-val { font-weight:700; font-size:17px; }
.cp-ancla .cp-n { font-size:12px; color:var(--pardo); }
.cp-ancla-foco { box-shadow:inset 3px 0 0 var(--ink); }
/* Pista centrada en el cero: negativo a la izquierda, positivo a la derecha */
.cp-pista { position:relative; height:15px; }
.cp-cero { position:absolute; top:-5px; bottom:-5px; left:50%; width:1px; background:var(--line); }
.cp-b { position:absolute; top:2px; height:11px; border-radius:3px; }
.cp-tira { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  border:0; border-top:1px solid var(--line-soft); background:var(--bg); padding:13px 18px;
  flex-wrap:wrap; text-align:left; font-family:inherit; color:inherit; cursor:pointer; }
.cp-tira:hover { background:var(--principal-tint); }
.cp-tira.cp-activa { box-shadow:inset 3px 0 0 var(--principal); background:var(--principal-tint); }
.cp-tira .cp-td { display:block; font-size:12.5px; color:var(--pardo); margin-top:2px; }
.cp-eq {font-size:13px;
  color:var(--pardo); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cp-eq strong { font-size:17px; color:var(--ink); margin-left:8px; }
.cp-pie { padding:10px 18px; border-top:1px solid var(--line-soft); font-size:11.5px;
  color:var(--muted); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.cp-descuadre { color:var(--rojo); font-weight:600; }

/* ---- Matriz área x incidencia (sustituye las tarjetas por área) ----
   Las cuatro primeras columnas son la referencia (sus totales son las
   anclas del puente); las cuatro de la derecha, el desglose de revisión.
   Intensidad relativa DENTRO de cada columna: comparar un "falta
   contabilizar" con un "fuera de plan" no significaría nada. */
.mtz-wrap { overflow-x:auto; padding:4px 12px 2px; }
.mtz { width:100%; border-collapse:separate; border-spacing:2px; }
.mtz th {font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:500;
  padding:6px 10px; text-align:right; white-space:nowrap; border:0; background:none; }
.mtz th.mtz-inc { padding:0; }
.mtz td { border:0; padding:0; }
.mtz td.mtz-num { padding:8px 10px; text-align:right; white-space:nowrap;
font-size:13px;
  font-variant-numeric:tabular-nums; }
.mtz .mtz-corte { border-left:1px solid var(--line); }
.mtz-area { padding:8px 10px; font-size:13px; font-weight:600; white-space:nowrap;
  background:none; border:0; text-align:left; font-family:inherit; color:inherit; cursor:pointer; }
.mtz-area small { display:block; font-weight:400; font-size:11px; color:var(--muted); }
.mtz-area:hover { color:var(--principal); }
.mtz-cel { width:100%; border:1px solid transparent; border-radius:4px; padding:10px 8px;
font-variant-numeric:tabular-nums;
  font-size:13.5px; text-align:center; cursor:pointer; transition:transform .1s, border-color .1s;
  background:rgba(var(--mc), calc(var(--mi) / 100)); color:var(--ink); }
.mtz-cel-claro { color:var(--btn-ink); }
.mtz-cel:hover { border-color:var(--ink); }
.mtz-cel-activa { border-color:var(--ink); border-width:2px; }
.mtz-cel .mtz-cn { display:block; font-weight:600; }
.mtz-cel .mtz-cc { display:block; font-size:10.5px; font-weight:400; opacity:.72; margin-top:1px; }
.mtz-vacia { padding:10px 8px; text-align:center; color:var(--line); background:var(--bg);
  border-radius:8px; font-size:13px; }
.mtz-cel-pend   { --mc:185,127,36; }
.mtz-cel-prev   { --mc:21,104,160; }
.mtz-cel-fuera  { --mc:188,86,112; }
.mtz-cel-desvio { --mc:125,63,176; }
/* Ingresos reusa la matriz con otros ejes: su tercera incidencia es
   "nuevos este mes", que comparte tono con --c-inc-prev. */
.mtz-cel-nuevo  { --mc:21,104,160; }
/* Y sus desvíos van en dos columnas, positivos y negativos. Acá el color SÍ es
   semántico —es la única pareja de columnas que mide lo mismo en dos direcciones—
   y son los tonos --pos/--neg de la app: en ingresos celeste es más facturación.
   Triples literales como el resto de los tintes de celda (`--mc` es un rgb suelto
   porque la celda modula su alfa). */
.mtz-cel-desvio_pos { --mc:47,130,100; }
.mtz-cel-desvio_neg { --mc:188,86,112; }
.mtz-th-btn { background:none; border:0; padding:6px 10px; font:inherit; cursor:pointer;
font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
  width:100%; text-align:center; }
.mtz-th-btn:hover { color:var(--ink); }
.mtz-th-activa { color:var(--ink); font-weight:700; }
.mtz tfoot td, .mtz tfoot th { border-top:1px solid var(--line); padding-top:9px; }
.mtz-tot {font-weight:700;
  text-align:right; font-variant-numeric:tabular-nums; font-size:13.5px; padding:10px; }
.mtz-tot-inc { text-align:center; }
.mtz-av { display:inline-flex; align-items:center; gap:7px; justify-content:flex-end; font-size:12px; }
.mtz-avb { width:34px; height:4px; background:var(--line-soft); border-radius:3px; overflow:hidden; }
.mtz-avb > div { height:100%; border-radius:3px; }
/* La escala de color de las barras de avance (.av-*) vive en base.html */
.mtz-fila-activa .mtz-area { color:var(--principal); }
.mtz-fila-activa td.mtz-num { background:var(--principal-tint); }

/* ---- Logotipo «mate» ----
   Render: include "reportes/_logo_mate.html". Spec de marca: /configuracion/marca/.
   Siempre en minúsculas; la familia de la interfaz a 700; glifo «t» dibujado en SVG. */
/* El dibujo va en `currentColor`: el color es el de la tinta de la app y no
   uno propio escrito en el SVG, así la marca se lee como el texto de al lado. */
.mate-logo {
  display:inline-flex; align-items:baseline; line-height:1;
  color:var(--ink);
}
.mate-logo svg { width:100%; height:.76em; margin:0 .02em; }

/* ==== La cabecera: UNA banda ====
   Antes eran dos. Arriba, una barra oscura con las ocho vistas; debajo, la
   ficha del informe. La de arriba gastaba 52px de alto —en todas las
   pantallas, siempre— en algo que cambia una vez por sesión, y competía en
   peso con la única que dice QUÉ se está mirando. En una app donde la grilla
   es la pantalla, eso son cuatro filas de datos por banda.

   Ahora la vista es la PRIMERA PALABRA de esa misma frase —«Contable ·
   Sociedad Uno · agosto 2026 · USD»— y las demás viven en su desplegable,
   igual que las monedas viven en el de moneda. No hay vocabulario nuevo: es
   el mismo token (`.fr-tok`) con el mismo gesto.

   El «esto es el marco de la app, no el documento» ya no lo dice un fondo
   oscuro: lo dice el gris de ranura (`--rail`) contra el blanco del
   documento, que es exactamente cómo se separan las barras laterales del
   centro en el resto de la app. El argumento viejo —«en blanco no funciona,
   se apilan dos bandas sin peso»— era un argumento contra DOS bandas.

   La vista pesa menos que la sociedad a propósito: la sociedad es el sujeto
   del informe y se lee como título; la vista es la superficie sobre la que
   se trabaja, o sea el sitio donde pasa la frase. Con las dos en 17px no hay
   frase, hay dos títulos discutiendo. */
/* Pinchada. El argumento de que la cabecera cediera sitio al scrollear era
   que solo llevaba controles —lo que se está mirando, no lo que se ha
   mirado—, y las cifras vivían en un carril que sí se quedaba. Ahora las
   cifras están acá: si la banda se fuera, el titular del mes se iría con
   ella y volveríamos a analizar sin él a la vista, que es exactamente el
   problema que la barra vino a resolver. */
.ws-head { position:sticky; top:0; z-index:75;
  /* Papel hasta el borde del carril (`--ws-rail-g`) y nada más abajo. Entre el
     nav y la tarjeta de cifras queda un hueco que no pinta nadie: en la columna
     del carril, al scrollear, se transparentaba la celda blanca de `.pm-rev`
     subiendo por debajo. Más abajo no: ahí ya está el carril, y pintarlo lo
     taparía (por eso la tira lleva `margin-right`). */
  background:linear-gradient(var(--papel), var(--papel)) top / 100% var(--ws-rail-g, 0px) no-repeat;
  /* Nada de la banda puede ser el ancla del reanclaje del scroll: pinchada,
     el navegador la tomaba como ancla por estar arriba, y al compactarse la
     tarjeta de cifras «se movía» y lo compensaba restándolo al scroll —con
     un scroll mínimo, hasta 0, y la banda se volvía a expandir. */
  overflow-anchor:none; }
.nav {
  /* Sobre el papel de la página y sin filete: la banda no es una barra
     aparte, es la primera línea del documento. Opaca igual (sticky), para
     que lo que sube por debajo no se transparente. */
  background:var(--papel);
  /* El alto lo fija el mínimo, no el padding: el padding vertical está para
     cuando la banda envuelve en dos filas con la ventana angosta. */
  padding:5px 22px; min-height:44px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
/* Marca + vista: lo único de la banda que NO es del informe. Los separaba del
   resto un filete a toda altura; se fue (29/09/2026): era una línea más en una
   banda que ya no lleva ninguna. Lo que los aparta ahora es el aire —más ancho
   que el de la frase entre sus palabras— y que la vista va pegada a la marca
   como segunda palabra del logotipo. */
/* `baseline`: la vista se apoya en la MISMA línea que las letras de «mate»,
   no centrada en la caja del SVG. Es lo que la hace leer como una pieza. */
.nav-jefe { display:flex; align-items:baseline; gap:0; flex:none;
  align-self:stretch; margin-right:22px; position:relative; }
/* El filete que parte la banda en dos grupos: la app (marca + módulo) y el
   informe (sociedad, período…). Se había ido el 29/09 por ser «una línea más»;
   volvió el 30/09 porque con el módulo como palabra del logotipo, sin fondo,
   solo el aire separaba «contable ⌄» de la sociedad, y en ventana angosta ese
   aire se encoge. Media altura y tono de borde: separa, no enmarca. */
.nav-jefe::after { content:''; position:absolute; right:-16px; top:50%;
  height:22px; margin-top:-11px; width:1px; background:var(--line); pointer-events:none; }
.marca { display:flex; align-items:center; padding:0; text-decoration:none; }
/* El `.nav` de delante sube la especificidad a propósito: estas reglas
   viven antes que `.fr-tok` en la hoja y con una sola clase perderían por
   orden contra el token genérico. */
/* La vista como segunda palabra del logotipo: «mate contable». Minúsculas,
   tracking cerrado como el wordmark y la mitad de su cuerpo. Era una píldora
   gris de 13,5px (hasta 30/09/2026) y se leía como un botón más de la barra,
   no como el módulo en el que se está. Peso medio y tinta secundaria: a 700 y
   en --ink competía con la marca y pesaba más que la sociedad; la jerarquía es
   marca > módulo, como «Google Analytics». Sin fondo en reposo: el fondo
   aparece al tocarla, como en cualquier token. El `top` corrige la caja del
   texto contra el SVG, cuya base cae por debajo de la de sus letras (la hoja
   desciende). Se midió en píxeles, no a ojo: el fondo de la «m» y el de la «n»
   de «contable» en la misma fila (cambiar el peso o el cuerpo lo mueve). */
.nav .fr-vista { font-size:25px; font-weight:500; letter-spacing:-.03em;
  text-transform:lowercase; color:var(--pardo); background:none;
  padding:1px 7px 3px; margin-left:3px; gap:5px; line-height:1.1;
  border-radius:9px; position:relative; top:-1px; }
.nav .fr-vista:hover, .nav .fr-vista[aria-expanded="true"] { background:var(--hover-2); color:var(--ink); }
.nav .fr-panel-vistas { min-width:292px; }
a.fr-opt { text-decoration:none; }
/* La barra de contexto de cada página entra DENTRO de la banda: pierde su
   fondo, su filete y su padding, que ahora los pone la banda. Solo la de
   dentro —la clase se sigue usando en el cuerpo de algunas pantallas. */
.nav-ctx { flex:1 1 auto; min-width:0; display:flex; align-items:center; }
/* La barra de cada página NO se estira: ocupa lo que ocupa y lo que sobra
   queda a su derecha. Se estiraba de cuando la banda terminaba ahí; ahora
   detrás viene la escala de lectura, y con la barra estirada quedaba en la
   otra punta de la pantalla, separada de las decisiones con las que se elige
   a la vez. Consecuencia buscada en las demás vistas: el `<span flex:1>` con
   el que empujaban interco y EBITDA al borde derecho se queda sin holgura
   que repartir, así que esos dos vuelven a la fila con el período. */
/* Descendiente y no hijo directo: el consolidado envuelve su frase en el
   `<form>` GET del período, y con `>` la barra se quedaba con el fondo y el
   padding de cuerpo de página dentro de la banda. `.nav-ctx` no contiene
   nada más que la barra de la página y la escala, así que no hay riesgo de
   alcanzar a las `.subs-bar` que siguen usándose en el cuerpo. */
.nav-ctx .subs-bar, .nav-ctx .pe-ctx {
  background:none; border-bottom:0; padding:0; min-height:0;
  flex:0 1 auto; min-width:0;
}
/* El form es sólo el envoltorio del submit: no dibuja ni mide nada. */
.nav-ctx > form { display:flex; min-width:0; flex:0 1 auto; }
/* El rótulo «Presupuesto» de la consola era el nombre de la vista repetido:
   ahora lo dice el token, y repetirlo sobraba. */
.nav-ctx .pe-ctx-rot { display:none; }
/* ---- Las barras que todavía no son frase ----
   Contable ya se lee como una frase. El resto de las vistas conserva la
   botonera vieja —RÓTULO en versalitas + control con caja— y dentro de una
   banda de 44px eso se apelmaza y grita más que la frase. Acá se apaga: el
   rótulo más chico y el `select` sin caja hasta que lo tocás, como los
   tokens. No es la migración a frase —cada vista tiene sus propias
   dimensiones y esa conversión es otra tarea—: es que las dos gramáticas
   convivan sin que una tape a la otra. */
.nav .subs-bar .subs-lbl { font-size:10px; margin-right:2px; }
.nav .subs-bar .form-select {
  background:none; border-color:transparent; border-radius:8px;
  padding:5px 6px; font-size:13px; font-weight:600;
}
.nav .subs-bar .form-select:hover { background:var(--hover-2); }
/* Dentro de un desplegable el select vuelve a ser un select: ahí está sobre
   una tarjeta blanca que flota, y sin caja no se vería que se puede tocar. */
.nav .fr-panel .form-select {
  background:var(--card); border-color:var(--line); border-radius:9px;
  padding:7px 10px; font-weight:400;
}
.nav-controls { display:flex; align-items:center; gap:10px; flex:none; }
/* El final de la banda: quién está mirando, y nada más. Pegado al borde
   derecho por el hueco que deja el `margin-left:auto`. */
.nav-fin { margin-left:auto; flex:none; display:flex; align-items:center; gap:2px; }
/* ---- La escala de lectura ----
   Un token como los de la frase y AL LADO de la frase: quien viene a decidir
   cómo quiere ver la pantalla —qué mes, en qué moneda, con o sin interco—
   decide acá también con cuántos ceros. Estuvo un día en la otra punta de la
   banda, junto a las iniciales, porque la escala no es del informe sino de
   quien lo lee; era cierto y seguía siendo el sitio equivocado: obligaba a
   buscar en dos lugares distintos la misma clase de decisión.

   Que no es del informe lo siguen diciendo tres cosas, y ninguna cuesta una
   travesía de pantalla: pesa menos que los tokens de la frase (12,5/600
   contra 13,5 y 15,5), lo precede un filete a media altura que corta la
   frase, y su desplegable lo dice con todas las letras.

   En unidades el token se apaga —es lo de siempre, no hay nada que avisar—.
   En miles se enciende en caramelo y SE QUEDA encendido: es el único sitio
   donde se dice que todo lo de abajo está dividido por mil, y muchas líneas
   llevan «USD» escrito al lado. Un aviso que se apaga sería una trampa de
   tres ceros. */
.nav-esc { margin-left:14px; padding-left:14px; }
.nav-esc::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:17px; background:var(--line); pointer-events:none;
}
/* Las pantallas sin barra de contexto (Configuración y compañía) no tienen
   frase que cortar: el token quedaría con su filete pegado al de la marca,
   dos líneas verticales seguidas sin nada en medio. */
.nav-ctx:not(:has(.subs-bar, .pe-ctx)) .nav-esc { margin-left:0; padding-left:0; }
.nav-ctx:not(:has(.subs-bar, .pe-ctx)) .nav-esc::before { content:none; }
.nav-esc .fr-tok { font-size:12.5px; font-weight:600; color:var(--muted); padding:5px 8px; }
.nav-esc .fr-tok:hover, .nav-esc .fr-tok[aria-expanded="true"] { color:var(--ink); }
.nav-esc .fr-tok.esc-on {
  color:var(--ink); background:var(--principal-tint);
  box-shadow:inset 0 0 0 1px var(--principal-line);
}
.nav-user { flex:none; }
.nav .fr-yo { padding:3px; border-radius:999px; }
.yo-ini {
  display:grid; place-items:center; width:26px; height:26px; border-radius:999px;
  background:var(--hover-2); color:var(--pardo);
  font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
}
.nav .fr-yo:hover .yo-ini, .nav .fr-yo[aria-expanded="true"] .yo-ini {
  background:var(--ink); color:var(--btn-ink); }
.fr-yo-mail { margin:0; padding:0 10px 8px; font-size:11.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; }
.nav .fr-yo-salir { border-top:1px solid var(--line); border-radius:0 0 9px 9px; }

/* ---- Barra de subsidiarias ---- */
.subs-bar {
  background:var(--card); border-bottom:1px solid var(--line);
  padding:9px 20px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.subs-lbl { font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-right:4px; }
.chip {
  border:1px solid var(--line); background:var(--card); color:var(--pardo);
  border-radius:4px; padding:7px 14px; font-size:13px; font-weight:500;
  font-family:inherit; cursor:pointer; transition:all .12s;
}
.chip:hover { background:var(--hover); color:var(--ink); }

/* ---- La sociedad, como etiqueta de color ----
   Marcado en reportes/_soc_chip.html; el color de cada sociedad se asigna en
   Configuración → Sociedades y llega por la variable `--soc`.

   EL COLOR VA EN EL PUNTO, no en el relleno ni en el texto. En esta app el
   relleno de color significa ACCIÓN, y la acción es caramelo y sólo caramelo:
   ocho chips rellenos en una fila del calendario se leen como ocho botones. El
   punto identifica igual de rápido —es lo que hace un mapa de líneas de metro—
   y deja el texto en la tinta de siempre, que es la que se lee.

   El nombre en `--ink` y no en el color de la sociedad: catorce tonos elegidos
   para distinguirse entre sí no son catorce tonos elegidos para leerse sobre
   champán, y un nombre en ocre claro a 12px se pierde. El color contesta
   «¿de quién?» de un golpe de vista; el texto contesta «¿de quién exactamente?»
   cuando hace falta leerlo.

   Sin color asignado el punto queda hueco y con borde discontinuo: es un dato
   que falta y se tiene que ver que falta. */
.soc-chip {
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-size:12px; font-weight:600; color:var(--ink); line-height:1.3;
  white-space:nowrap; vertical-align:baseline;
}
.soc-chip > i {
  flex:none; width:8px; height:8px; border-radius:2.5px;
  background:var(--soc, var(--hueco));
  box-shadow:0 0 0 1px rgba(255,255,255,.65) inset;
}
.soc-chip > span { overflow:hidden; text-overflow:ellipsis; }
.soc-chip-sin { color:var(--muted); }
.soc-chip-sin > i { background:transparent; border:1px dashed var(--hueco); box-shadow:none; }
.soc-chip-solo { gap:0; }
/* La variante con cápsula, para cuando el chip va suelto sobre el papel y
   necesita un borde que lo recorte (una lista de filtros, una ficha). El velo
   es del color de la sociedad al 8%: se nota de qué color es sin llegar a ser
   un relleno. */
.soc-chip-caja {
  padding:3px 9px 3px 7px; border-radius:20px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--soc, transparent) 7%, var(--card));
  border-color:color-mix(in srgb, var(--soc, var(--line)) 26%, var(--line));
}

/* ==== La barra de contexto como FICHA DEL INFORME ====
   Marcado en reportes/_barra_frase.html. La barra dejó de ser una botonera:
   se lee como el encabezado de un informe —«Sociedad Uno · agosto 2026 · USD
   · con interco · EBITDA ajustado»— y cada palabra en negrita es su propio
   control. Lo que antes eran ocho cajas con su rótulo son ahora cinco
   palabras que además DICEN qué se está mirando, que es lo que una fila de
   switches nunca dijo.
   Vive acá y no en la piel porque no es una decisión de estilo: es cómo se
   navega, y vale para las dos pieles. */
.frase { gap:1px; padding:10px 24px; }
/* El sujeto del informe es el perímetro, así que se lee como un título y
   pierde la cápsula de control: lo que dice que se puede abrir es el caret. */
.frase .soc-trigger {
  border:0; background:none; border-radius:8px; padding:4px 6px 4px 10px;
  font-size:17px; font-weight:700; letter-spacing:-.015em; max-width:380px;
}
.frase .soc-trigger:hover,
.frase .soc-trigger[aria-expanded="true"] { background:var(--line-soft); box-shadow:none; }
.frase .soc-panel { left:6px; }
/* El caret del sujeto, igual que el de los demás tokens (`.fr-car`): mismo
   hueco, mismo tamaño y sin la caja redonda de 22px del picker suelto, que le
   sumaba 5px de aire por lado. Separado del nombre más que el del período, se
   leían como dos componentes distintos cuando son el mismo gesto. */
.frase .soc-trigger { gap:6px; }
.frase .soc-caret { width:auto; height:auto; display:inline-flex; border-radius:0; }
.frase .soc-caret svg { width:11px; height:11px; }
/* El punto entre sujeto y período. A media opacidad sobre el papel casi no se
   veía, y sin él la sociedad y el mes se leían como dos cosas sueltas en vez
   de una frase («Telecontact · agosto 2026»). Tinta terciaria entera y en
   negrita: se ve, y sigue pesando menos que cualquier palabra. */
.fr-sep { color:var(--muted); font-weight:700; padding:0 4px; user-select:none; }
.fr-tok-wrap { position:relative; }
.fr-tok {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border:0; background:none; border-radius:8px; padding:5px 9px;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--ink);
  letter-spacing:-.005em; cursor:pointer;
}
.fr-tok:hover, .fr-tok[aria-expanded="true"] { background:var(--hover-2); }
/* El período llevó un esfumado celeste para que el mes se encontrara en una fila
   de palabras todas iguales. Se quitó (16/09/2026): en esta barra nada tiene
   fondo, y el único que lo tenía se leía como una pieza pegada encima en vez
   de como la palabra que es. Lo que hacía falta —que el mes no se pierda— lo
   resuelve el peso del token y, desde el 17/09, su propio filete (más abajo),
   que es donde el celeste sí funciona. Queda el aire: un poco más de costado
   que el resto, que es lo que lo separa sin dibujarlo. */
.fr-tok.fr-per { padding:5px 12px; margin:0 2px; }
.fr-car { width:11px; height:11px; color:var(--muted); flex:none; transition:transform .15s; }
.fr-tok[aria-expanded="true"] .fr-car { transform:rotate(180deg); }

/* ---- EL FILETE: sólo debajo del SUJETO ----
   Lo llevaban los seis tokens, para avisar en reposo de que se podían elegir.
   Sobraba (16/09/2026): seis filetes seguidos son seis subrayados, y la fila
   vuelve a leerse como la botonera que la frase vino a quitar — da igual que
   cada uno se apague hacia la derecha, porque lo que cuenta no es la línea
   sola sino las seis juntas. La afordancia la dan el caret, el peso del texto
   y el fondo del hover, que es donde de verdad se mira.
   Se queda el de la SOCIEDAD, que no está marcando «esto se elige» sino otra
   cosa: es el sujeto del informe, de quién son las cifras que siguen, y por
   eso pesa más que el resto de la frase y arranca en chocolate. Uno solo no
   dibuja una botonera: dibuja un título. */
/* 29/09/2026: FUERA TAMBIÉN ESTE («los subrayados no me gustan en el nav»). La
   sociedad ya es el sujeto por cuerpo —17px contra 13,5px del resto— y no le
   hace falta una raya debajo para decirlo. */

/* ---- QUIÉN y CUÁNDO por delante de CÓMO SE LEE ----
   De las cinco decisiones de la frase, dos dicen de qué informe se trata —de
   quién son las cifras y de qué mes— y las otras tres dicen cómo se leen esas
   mismas cifras (moneda, interco, criterio de EBITDA). Escritas todas en
   14/700 se leían como cinco iguales, y la pregunta que más veces se hace
   delante de esta pantalla —«¿qué estoy mirando?»— había que contestarla
   leyendo la fila entera.

   Tres escalones y nada más: 17 la sociedad, 15,5 el período, 13,5 los tres
   de la derecha, que además bajan a pardo. No se esconde nada —siguen
   diciendo «USD» y «con interco» sin tener que abrirlos— pero dejan de
   competir con el sujeto y la fecha. */
.frase .fr-tok { font-size:13.5px; font-weight:600; color:var(--pardo); }
.frase .fr-tok:hover, .frase .fr-tok[aria-expanded="true"] { color:var(--ink); }
.frase .fr-tok.fr-per { font-size:15.5px; font-weight:700; color:var(--ink);
  letter-spacing:-.012em; }

/* ---- El segundo filete: el del CUÁNDO, y es celeste ----
   El de la sociedad arranca en tinta y va a caramelo. Éste es el mismo
   dibujo en el otro color de la marca, y no por variar: el celeste es el que
   en esta app dice CONTEXTO —el mismo del sello de mes cerrado que va justo
   detrás— y va en el filete, nunca en el relleno. Ese fue el error del
   esfumado que se quitó ayer: teñir el token lo convertía en una pieza
   pegada encima de la frase; teñir su subrayado lo deja siendo una palabra.

   Y son DOS filetes, no seis. Los seis eran una botonera disfrazada; dos,
   distintos entre sí y con tres palabras sin nada debajo a continuación,
   son un título con su fecha. */
/* 29/09/2026: el filete del período también se fue, con el de la sociedad. La
   jerarquía queda en el cuerpo (17 / 15,5 / 13,5) y el latón, en el sello de
   mes cerrado que va justo detrás. */

/* ---- Configuración rápida (ver _config_rapida.html) ----
   Un token con borde, el único de la frase: no es una palabra del título sino
   el mando de cómo se lee, y el borde lo dice sin tener que rotularlo. El
   resumen va en pardo, apagado, porque es contexto. */
/* Al extremo derecho (29/09/2026, «no se entiende»): en medio de la frase y al
   lado de «Mes cerrado» se leía como otro sello de estado. A la derecha queda
   lo que es —el mando de cómo se lee— y el distintivo «Config.» lo nombra: la
   tira de criterios sola no decía que era un botón. */
.frase .fr-cfg { margin-left:auto; }
/* Para que haya un «extremo derecho» la barra tiene que estirarse (ver
   `.nav-ctx .subs-bar`, que por defecto no lo hace). Solo cuando lleva el
   panel: con la escala en él, ya no queda ningún token detrás al que acercarse. */
.nav-ctx .subs-bar:has(.fr-cfg), .nav-ctx > form:has(.fr-cfg) { flex:1 1 auto; }
.frase .fr-cfg-tok { font-size:12px; font-weight:500; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:4px 5px 4px 10px; gap:9px;
  background:var(--card); }
.fr-cfg-badge { font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--laton-ink);
  background:var(--laton-tint); border-radius:4px; padding:2px 7px; }
.frase .fr-cfg-tok:hover, .frase .fr-cfg-tok[aria-expanded="true"] {
  border-color:var(--principal-line); background:var(--principal-tint); color:var(--ink); }
.fr-cfg-ico { width:14px; height:14px; flex:none; color:var(--muted); }
.fr-cfg-res i { font-style:normal; color:var(--muted); }
/* En miles se ENCIENDE y se queda encendido, como hacía el token suelto de la
   escala: es el único aviso de que todo lo de abajo está dividido por mil. */
.frase .fr-cfg-tok.esc-on { color:var(--ink); background:var(--principal-tint);
  border-color:var(--principal-line); }
.frase .fr-cfg-tok.esc-on [data-cfg-res="escala"] { font-weight:700; }
.fr-cfg-panel { width:560px; max-width:calc(100vw - 20px); min-width:0; padding:8px 8px 4px; }
.fr-cfg-gr { padding:6px 0 8px; border-top:1px solid var(--line-soft); }
.fr-cfg-gr:first-of-type { border-top:0; }
.fr-cfg-l { margin:0; padding:4px 10px 2px; font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.fr-cfg-ops { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.fr-cfg-ops .fr-panel-pie, .fr-cfg-gr > .fr-panel-pie { grid-column:1 / -1; margin:4px 10px 0; }
@media (max-width:640px) { .fr-cfg-ops { grid-template-columns:1fr; } }
/* PLEGADA en reposo (30/09/2026): icono + «Config.» + caret, y el resumen del
   criterio se despliega hacia la izquierda al pasar o enfocar. La tira entera
   ocupaba ~330px de la banda para decir, casi siempre, lo de siempre. Crece
   hacia la izquierda sin mover nada porque vive en el extremo derecho
   (`margin-left:auto`): se come el hueco, no empuja la frase.
   En miles NO se pliega: es el único aviso de que todas las cifras de abajo
   están divididas por mil, y un aviso escondido detrás de un hover no avisa. */
.fr-cfg-res { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  max-width:0; opacity:0; margin-right:-7px; /* = el gap del token: plegado no deja doble hueco */
  transition:max-width .22s cubic-bezier(.2,.7,.2,1), opacity .16s, margin .22s; }
.fr-cfg:hover .fr-cfg-res, .fr-cfg-tok:focus-visible .fr-cfg-res,
.fr-cfg-tok[aria-expanded="true"] .fr-cfg-res, .fr-cfg-tok.esc-on .fr-cfg-res {
  max-width:340px; opacity:1; margin-right:0; }
.frase .fr-cfg-tok { gap:7px; padding:4px 8px 4px 9px; }
@media (prefers-reduced-motion: reduce) { .fr-cfg-res { transition:none; } }
/* Con la configuración rápida en la banda, el token suelto de la escala sobra:
   sus opciones viven dentro del panel. */
.nav-ctx:has(.fr-cfg) > #esc-wrap { display:none; }
.fr-panel {
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  min-width:252px; max-width:340px; display:none; padding:8px;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--flota);
}
.fr-panel.open { display:block; }
/* El último token de la banda: su panel se ancla al borde derecho o se
   abriría fuera de la ventana. */
.fr-panel-der { left:auto; right:0; }
.fr-panel-t {
  margin:0; padding:3px 10px 7px; font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.fr-opt {
  display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left;
  border:0; background:none; border-radius:9px; padding:8px 10px; line-height:1.35;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--pardo);
  cursor:pointer; transition:background .1s, color .1s;
}
.fr-opt:hover { background:var(--hover-2); color:var(--ink); }
.fr-opt.active { color:var(--ink); font-weight:600; }
.fr-ck { width:13px; flex:none; color:var(--principal); opacity:0; font-size:12px; }
.fr-opt.active .fr-ck { opacity:1; }
/* Qué cambia si se elige esa opción. Es lo que antes vivía en un `title` que
   había que descubrir parándose encima del botón. */
.fr-opt-d { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px; }
.fr-panel-pie {
  margin:6px 4px 2px; padding-top:8px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.4; color:var(--muted);
}
/* Dentro del desplegable de período va el control de siempre, sin su rótulo. */
.fr-panel .subs-periodo { flex-wrap:wrap; gap:6px; padding:2px 6px 6px; }
.fr-panel .pp-rango { flex:0 0 100%; padding-left:2px; }

/* ---- La salud de cada mes, dentro del desplegable de período ----
   Marcado en reportes/_meses_salud.html. Era una tira de doce píldoras con su
   punto de color en la cabecera del consolidado, o sea un SEGUNDO selector de
   mes a dos centímetros del primero. Acá dentro vuelve a ser lo que es: una
   nota sobre los meses que este control ofrece.
   El mes que está bien no lleva nada encima. Doce puntos verdes para señalar
   el único ámbar es la forma cara de esconderlo: se escribe sólo el que pide
   algo, que es la misma regla del sello de cuadre. */
.pp-salud { margin:8px 4px 2px; padding-top:9px; border-top:1px solid var(--line); }
.pp-salud-t { margin:0 2px 6px; font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; }
.pp-salud-fila { display:flex; flex-wrap:wrap; gap:3px; padding:0 2px 2px; }
.pp-mes {
  display:inline-flex; flex-direction:column; align-items:flex-start;
  padding:4px 9px; border-radius:7px; text-decoration:none;
  font-size:12.5px; font-weight:600; color:var(--pardo); line-height:1.2;
}
.pp-mes:hover { background:var(--hover); color:var(--ink); }
.pp-mes small { font-size:10.5px; font-weight:500; letter-spacing:0;
  text-transform:none; margin-top:2px; }
/* El mes en pantalla se marca en TINTA, como lo elegido en toda la app. */
.pp-mes-sel { color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
/* Y los que piden algo, con el trazo de su tono. Sin relleno: el relleno de
   color es la acción. */
.pp-mes-amber { color:var(--ambar); box-shadow:inset 0 0 0 1px var(--principal-line); }
.pp-mes-warn  { color:var(--rojo-ink); box-shadow:inset 0 0 0 1px var(--rojo-line); }
.pp-mes-info  { color:var(--laton-ink); box-shadow:inset 0 0 0 1px var(--laton-line); }
.pp-mes-na    { color:var(--muted); }
/* El sello de conciliación YA NO vive en la cabecera: bajó a la esquina
   inferior izquierda, fijo sobre la página (ver `.conc-fijo`). El sitio de la
   derecha de la banda lo ocupan ahora las cifras del mes (ver `.hk`). */

/* ---- Selector de sociedad (picker buscable, selección única) ---- */
.soc-picker { position:relative; }
.soc-trigger {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  border-radius:4px; padding:7px 8px 7px 14px; font-size:13px; font-weight:500;
  font-family:inherit; cursor:pointer; transition:all .12s; max-width:360px;
}
.soc-trigger:hover { background:var(--hover); }
.soc-trigger[aria-expanded="true"] { border-color:var(--principal); box-shadow:var(--ring); }
.soc-trigger-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.soc-ph { color:var(--muted); font-weight:500; }
.soc-caret { width:22px; height:22px; display:grid; place-items:center; border-radius:50%;
  color:var(--muted); flex:none; transition:transform .15s; }
.soc-trigger[aria-expanded="true"] .soc-caret { transform:rotate(180deg); }
.soc-caret svg { width:12px; height:12px; }

.soc-panel {
  position:absolute; top:calc(100% + 8px); left:0; z-index:60; width:352px; max-width:88vw;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--flota); padding:8px; display:none;
}
.soc-panel.open { display:block; }
.soc-search {
  width:100%; border:1px solid var(--line); border-radius:9px; padding:8px 12px;
  font-size:13px; font-family:inherit; background:var(--card); color:var(--ink); margin-bottom:8px;
  transition:border-color .12s, box-shadow .12s;
}
.soc-search:focus { border-color:var(--principal); box-shadow:var(--ring); outline:none; }
.soc-todas {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:9px; margin-bottom:6px;
  font-size:13px; font-weight:600; color:var(--ink); background:var(--principal-tint);
  border:1px solid var(--principal-line); cursor:pointer; text-decoration:none;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.soc-todas:hover { border-color:var(--principal); box-shadow:inset 0 0 0 1px var(--principal);
  color:var(--principal-ink); }
/* La fila de la vista en la que ya se está: el selector no la esconde, la
   marca (con el mismo celeste que el ✓ de la sociedad abierta). */
.soc-todas-activo { border-color:var(--principal); color:var(--principal-ink); }
.soc-pronto { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--principal-ink); background:var(--principal-tint); border:1px solid var(--principal-line);
  border-radius:999px; padding:2px 8px; white-space:nowrap; }
/* Las vistas «— todas» (Individuales, Consolidado) también se pueden fijar con
   la estrella: la fila es el enlace + la estrella al lado (no dentro, para no
   anidar controles en el <a>). */
.soc-todas-fila { display:flex; align-items:center; gap:2px; margin-bottom:6px; }
.soc-todas-fila .soc-todas { flex:1; min-width:0; margin-bottom:0; }
/* Perímetro declarado y no elegible: el consolidado de un rol sin la vista
   Contable, que no tiene a dónde conmutar. Se muestra igual que el picker
   (sin caret) y conserva la estrella al lado. */
.soc-fijo { display:inline-flex; align-items:center; gap:2px; }
.soc-fijo .soc-trigger { text-decoration:none; }
.soc-list { max-height:280px; overflow-y:auto; margin:0 -4px; display:flex; flex-direction:column; }
.soc-opt {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:0; background:transparent; color:var(--pardo); font-family:inherit;
  font-size:13px; font-weight:500; padding:8px 10px; border-radius:9px; cursor:pointer;
  transition:background .1s, color .1s;
}
.soc-opt:hover, .soc-opt.marcado { background:var(--hover-2); color:var(--ink); }
.soc-opt-activo { color:var(--principal-ink); font-weight:600; }
.soc-check { width:14px; color:var(--principal); opacity:0; flex:none; font-size:12px; }
.soc-opt-activo .soc-check { opacity:1; }
.soc-opt-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.soc-empty { padding:16px 10px; color:var(--muted); font-size:12.5px; text-align:center; }
.soc-cat { display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:8px; padding-top:9px; border-top:1px solid var(--line);
  font-size:11px; color:var(--muted); }
.soc-cat-btn { border:0; background:transparent; color:var(--principal-ink); cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:600; padding:2px 4px; }
.soc-cat-btn:hover { text-decoration:underline; }
.soc-cat-btn[disabled] { opacity:.5; cursor:default; text-decoration:none; }
/* El sello de mes cerrado. Va detrás del período —habla de él— y por eso
   perdió el relleno: era una cápsula llena de celeste al lado de la fecha, y
   en una fila donde nada más tiene fondo el ojo iba antes al sello que al mes
   que el sello califica. Con el trazo solo dice lo mismo sin ganarle a la
   fecha, y el celeste queda donde le toca —en la línea, no en el relleno—,
   igual que el filete del período con el que ahora hace pareja. */
.mes-cerrado, .mes-vivo { display:inline-flex; align-items:center; gap:5px; margin-left:8px;
  font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--laton-ink);
  background:none; border:1px solid var(--laton-line);
  padding:3px 9px; border-radius:999px; white-space:nowrap; }
.mes-cerrado svg, .mes-vivo svg { flex:none; }
/* En la frase, solo el candado (30/09/2026): el rótulo se despliega al pasar o
   enfocar. El candado ya dice «cerrado» en cualquier idioma; el texto fijo era
   una segunda cápsula en la banda que competía con el mes que califica. El
   círculo de 24px conserva el trazo latón, así sigue siendo un sello. */
.mes-cerrado--ico, .mes-vivo { gap:0; padding:0; width:auto; min-width:24px; height:24px;
  justify-content:center; cursor:default; outline:none;
  transition:padding .22s cubic-bezier(.2,.7,.2,1), gap .22s; }
.mes-cerrado--ico .mc-txt, .mes-vivo .mc-txt { display:inline-block; overflow:hidden; max-width:0; opacity:0;
  transition:max-width .22s cubic-bezier(.2,.7,.2,1), opacity .16s; }
.mes-cerrado--ico:hover, .mes-cerrado--ico:focus-visible,
.mes-vivo:hover, .mes-vivo:focus-visible { gap:5px; padding:0 10px 0 8px; }
.mes-cerrado--ico:hover .mc-txt, .mes-cerrado--ico:focus-visible .mc-txt,
.mes-vivo:hover .mc-txt, .mes-vivo:focus-visible .mc-txt { max-width:120px; opacity:1; }
.mes-cerrado--ico:focus-visible, .mes-vivo:focus-visible { box-shadow:var(--ring); }
@media (prefers-reduced-motion: reduce) {
  .mes-cerrado--ico, .mes-cerrado--ico .mc-txt, .mes-vivo, .mes-vivo .mc-txt { transition:none; } }
/* El mismo hueco en un mes abierto (02/10/2026): «Actualizar». Forma del sello
   pero en tinta neutra —el latón es de lo congelado— y es un botón de verdad.
   Clase propia y no `mes-cerrado`: un mes abierto no lleva el sello de cerrado. */
.mes-vivo { font-family:inherit; color:var(--muted); border-color:var(--line); cursor:pointer; }
.mes-vivo:hover, .mes-vivo:focus-visible { color:var(--ink); border-color:var(--principal-line); }
.mes-vivo[disabled] { cursor:progress; }
.mes-vivo.girando svg { animation:mes-vivo-gira .9s linear infinite; }
@keyframes mes-vivo-gira { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mes-vivo.girando svg { animation:none; opacity:.5; } }
.soc-hint { margin:0 0 6px; padding:0 2px; font-size:11.5px; color:var(--muted); line-height:1.35; }
.soc-hint-star { color:var(--principal); font-weight:700; }
/* Estrella «fijar predeterminada» en cada fila. Tenue por defecto, se
   resalta al pasar el mouse; la que está fijada queda celeste y sólida. */
.soc-star {
  flex:none; display:grid; place-items:center; width:26px; height:26px; margin:-4px -4px -4px 0;
  border-radius:7px; color:var(--muted); opacity:.3; cursor:pointer;
  transition:opacity .12s, color .12s, background .12s;
}
.soc-star svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linejoin:round; }
.soc-opt:hover .soc-star { opacity:.6; }
.soc-star:hover { opacity:1; color:var(--principal-ink); background:var(--principal-tint); }
.soc-star.is-default { opacity:1; color:var(--principal); }
.soc-star.is-default svg { fill:currentColor; }
/* La del consolidado vive fuera de una .soc-opt: arranca un poco más visible
   (no hay fila que la revele al pasar el mouse) y no necesita el margen
   negativo de las filas. El :hover y el .is-default de arriba la pisan solos
   (mayor especificidad), así que no hace falta repetirlos acá. */
.soc-star-todas { color:var(--principal-ink); opacity:.5; margin:0; }
/* La del lado (Gasto / Ingresos): misma estrella, mismo significado. Vive en
   el rótulo de su cifra de la tira (dom_star.js), a la medida del rótulo:
   SOLO al pasar el mouse por la cifra, esté fijada o no. Visible en reposo,
   una estrella sólida al lado del rótulo se confundía con la marca de
   «elegida»; al pasar sale sólida si ese lado es el que se abre al entrar. */
.hk .dom-fav { display:inline-grid; width:18px; height:18px; margin:-4px 0 -4px 4px;
  vertical-align:middle; border-radius:5px; opacity:0; }
.hk .dom-fav svg { width:12px; height:12px; }
.hk .pm-c > summary:hover .dom-fav, .hk .dom-fav:focus-visible { opacity:.55; }
.hk .pm-c > summary:hover .dom-fav.is-default, .hk .dom-fav:hover { opacity:1; }
.ws-compacta .hk .dom-fav { display:none; }
/* La de «cómo leés las cifras al entrar» (lectura_star.js): junto al rótulo de
   cada grupo del panel de configuración y de cada interruptor suelto de
   Individuales. Tenue en reposo —el ✓ ya dice cuál está elegida— y sólida
   cuando la elegida es la que se abre al entrar. */
.lect-fav { display:inline-grid; width:18px; height:18px; margin:-4px 0 -4px 4px;
  vertical-align:middle; border-radius:5px; opacity:.45; }
.lect-fav svg { width:12px; height:12px; }
.lect-grupo { display:inline-flex; align-items:center; gap:2px; }
.lect-grupo > .lect-fav { margin:0 4px 0 2px; }

/* ---- Período dentro de la subs-bar (context bar) ---- */
.subs-lbl-sep { margin-left:12px; }
.subs-periodo { display:inline-flex; gap:6px; align-items:center; }
.subs-periodo .form-select { padding:7px 10px; font-size:13px; border-radius:9px; }
/* El alcance es del mismo control que el mes y el año (ver
   _periodo_picker.html), así que se ve igual; lo único que lo separa es un
   hueco algo mayor, para que se lea «mes/año» + «cuánto acumulo». */
.subs-periodo .pp-alcance { margin-left:4px; }
/* El rango ya resuelto. Es una ETIQUETA, no un control: sin borde ni fondo,
   para que nadie intente hacerle clic. */
.pp-rango { font-size:12.5px; color:var(--muted); white-space:nowrap; }

/* ---- Estado del período acumulado (ver _periodo_estado.html) ----
   Va ANTES de la primera cifra porque condiciona cómo se lee todo lo de
   abajo. Sobria por defecto —informa, no alarma—; solo el hueco interior,
   que es el caso en que la cifra está mal y no solo incompleta, se pinta
   como advertencia.

   ---- Una línea, no una tarjeta ----
   Mientras la cifra solo esté incompleta, esto es una nota al margen: sin
   caja, sin fondo y sin sombra, para que no compita con el primer número.
   La caja se la gana el hueco interior, que es el caso en que la cifra está
   MAL: ahí sí el aviso tiene que detener el ojo. */
.per-estado { margin:0 0 10px; }
.per-estado-mal { padding:9px 13px; border-radius:10px;
  border:1px solid var(--laton-line);
  background:var(--laton-tint); }
.per-l { margin:0; font-size:12.5px; line-height:1.55; color:var(--muted); }
.per-l > .ayu { margin-left:5px; }
.per-l-mal { color:var(--ink); }
.per-l strong { font-weight:600; }

/* ==== El área de trabajo (análisis individual y consolidado) ====
   Sustituye a la pestaña Resultado. La regla de diseño es una: las cifras que
   contestan «cómo fue el mes» y las partidas que hay que mirar tienen que
   estar SIEMPRE a la vista, se esté en la pestaña y el nivel que se esté. De
   ahí las tres columnas:
     .pm       «el mes en cifras». Ya no se dibuja acá: su contenido sube a
               la cabecera (ver `.hk`). Queda como enganche del AJAX.
     .pm-main  el análisis y su navegación. Lo único que scrollea la página.
     .pm-rev   «qué revisar», ingresos y gasto separados, con las cabeceras
               de sección pegadas mientras se recorre la lista.

   ---- Dos columnas de borde a borde ----
   Una sola superficie, sin margen exterior y sin huecos entre columnas: el
   hueco partía la pantalla en tres documentos sueltos. Lo que separa es una
   hairline y el cambio de fondo (`--rail` a los lados, el fondo de página
   en el centro). A la izquierda, las cifras del mes; en el centro, el
   análisis y su navegación; a la derecha, qué revisar.
   Cada barra se pincha bajo la cabecera y scrollea por dentro: lo único que
   mueve la página es el centro. */
/* ---- La medida de los carriles ----
   Eran dos anchos fijos (296 y 322) con un escalón a 1420px. En un portátil
   de 1366 eso son 554px de barras contra 812 de análisis: las barras son la
   REFERENCIA y se estaban quedando con el 40% de la pantalla donde se
   trabaja. Ahora crecen con la ventana entre un mínimo y un máximo, así que
   en pantalla chica ceden y en pantalla grande no se estiran sin motivo, y
   sin escalones que salten.

   No son iguales, y no por capricho: a la IZQUIERDA hay cinco cifras y una
   columna de dígitos, que caben en 232; a la DERECHA hay razones sociales
   («GABINETE CARBO ASESORES, S.L.»), y por debajo de ~268 se cortan con
   puntos suspensivos. Un nombre de proveedor cortado no sirve para nada: es
   justo el dato con el que se va a buscar la factura. Lo que se estrecha es
   el carril que puede. */
.pm-layout { display:grid;
  grid-template-columns:minmax(0, 1fr) var(--carril-rev);
  gap:0; align-items:stretch; min-height:calc(100vh - var(--ws-head)); }
/* La columna de la IZQUIERDA ya no se dibuja: «el mes en cifras» subió a la
   cabecera (ver `.hk`). El <aside> sigue en el marcado y no se borra —de él
   cuelgan los huecos #pm-slot-* que llena el AJAX de ingresos, los data-* que
   lee ese mismo script y el bloque del checklist—: lo que se mueve a la banda
   es su contenido, y lo que queda acá es el enganche. */
.pm      { display:none; }
/* ---- La columna del analisis va CENTRADA ----
   El informe mide `--medida-arbol` (lo que miden los arboles y la cabecera
   de cada pista). La columna es mas ancha que eso, y alineado a la
   izquierda todo el sobrante se juntaba en un solo lado: ~400px de blanco
   entre la ultima columna de la tabla y la barra de «que revisar», que se
   leia como que la tabla estaba descolgada. Centrando la COLUMNA —y no la
   tabla sola— el sobrante se reparte a los dos lados y las pestanas, los
   conmutadores y las tablas siguen compartiendo el mismo borde izquierdo,
   que es lo que se perderia centrando solo la tabla.
   El `+24px` son los 12 de padding de cada lado: lo que se centra es la
   caja de contenido, no la caja con su aire. (30/09/2026: eran 26; el aire
   ya lo pone la tarjeta, y cada píxel de más era scroll lateral.) */
.pm-main { grid-column:1; min-width:0; padding:18px 12px 52px;
  max-width:calc(var(--medida-arbol) + 24px); justify-self:center; width:100%; }
/* 29/09/2026: sigue centrada, pero el sobrante ya es poco: el carril de «qué
   revisar» crece con la pantalla (ver `--carril-rev`) y se lleva casi todo, así
   que lo que queda son dos márgenes chicos y parejos, no ~300px muertos. Se probó
   a la izquierda y el resto quedaba como un hueco entre la tabla y el carril. */
/* La ranura (`--rail`) es el fondo de la CABECERA y de lo que se navega. Usarla
   acá hacía leer «qué revisar» como un menú lateral, cuando es informe: son las
   partidas del mes con su explicación, el mismo contenido que el centro. Va con
   el papel de la página y la separa la hairline, que es una de las tres líneas
   del marco. Ver el bloque «el informe no lleva marcos» al final de esta hoja. */
/* La celda de la grilla solo RESERVA el ancho del carril: lo que se ve es
   `.pm-rev-in`, fijo a la ventana (ver abajo). */
.pm-rev  { grid-column:2; background:var(--bg); border-left:1px solid var(--line); }
/* El aire de arriba lo pone el padding de la columna, no el control: con los
   dos, las pestañas quedaban flotando a 40px del borde. */
.pm-main > :first-child .tabs,
.pm-main > .tabsrow:first-child { margin-top:0; }
/* El script del checklist viaja junto a la barra izquierda y queda como hijo
   de la grilla: que no reclame una celda. */
.pm-layout > script { display:none; }
.pm-fijo { position:sticky; top:var(--ws-top);
  max-height:calc(100vh - var(--ws-top)); overscroll-behavior:contain; }
/* El carril va FIJO a la ventana y su borde de arriba es el de los RECUADROS
   de las cifras. Antes colgaba del nav en cada fotograma (`--ws-top` menos la
   tira) y, como el nav encoge al hacer scroll, bajaba y subía a tirones.
   Después transicionaba entre dos alturas medidas; tampoco: el carril NO SE
   MUEVE. Es una columna de la pantalla, no parte de la cabecera, así que su
   borde es siempre `--ws-rail-g` y lo que compacta la cabecera lo hace por
   DEBAJO de ese borde (ver `.ws-compacta`): nav y aire de arriba no cambian. */
.pm-rev-in { position:fixed; top:var(--ws-rail-g, 0px); right:0; bottom:0;
  width:var(--carril-rev); z-index:5; background:var(--bg);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  border-top-left-radius:var(--radio); overscroll-behavior:contain; }
.pm-fijo { overflow:auto; }
.pm-rev-in { display:flex; flex-direction:column; overflow:hidden; }
.pm-scroll { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; }
/* Rótulo de la barra: dice de qué va toda la columna, así que se lee como un
   título y no como una etiqueta más. Va pinchado arriba de su propio scroll.
   El fondo es opaco y del MISMO papel que la columna: como es sticky tiene que
   tapar las filas que pasan por debajo, pero si además cambia de tono se lee
   como la cabecera de un menú, que es de lo que se sacó a esta columna. */
/* La sangría es la de las filas (18px) y no la suya propia: el rótulo, su
   marca, el metadato de la sección y los nombres de las partidas cuelgan de
   un solo borde izquierdo. Con 14px arriba y 18px abajo se veía el escalón. */
.pm-cab { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  flex-wrap:wrap; padding:13px 18px 13px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:3; background:var(--bg); }
.pm-cab-m {font-size:12.5px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
/* El lado (gasto / ingresos) es parte del TÍTULO: «QUÉ REVISAR EN GASTO».
   Se renderizan los dos sufijos y elige el CSS, por lo mismo que el resto de
   la barra (los ingresos llegan por AJAX). Sin clase `dom-*` —una sola
   pestaña, JS caído— no se nombra ninguno y manda la cabecera de sección. */
.pm-cab-dom { display:none; }
body.dom-gasto    .pm-rev .pm-cab-dom[data-dom="gasto"],
body.dom-ingresos .pm-rev .pm-cab-dom[data-dom="ingresos"],
.pm-rev-1-gasto .pm-cab-dom[data-dom="gasto"],
.pm-rev-1-ing   .pm-cab-dom[data-dom="ingresos"] { display:inline; }
/* Y el celeste marca LA PALABRA que dice qué se está mirando (17/09/2026:
   «el detalle minimalista que esté en la palabra gastos para que resalte»).
   Primero fue un filete suelto bajo el rótulo entero, y un trazo que no
   señala nada concreto es adorno: puesto bajo «GASTO» hace trabajo — dice
   cuál de las dos palabras del título es la que cambia al cambiar de
   pestaña. Es el mismo material y el mismo sitio de siempre: el celeste en
   el FILETE, nunca en el relleno, igual que el token de período de la
   cabecera. Va solo bajo el lado, no bajo el «en». */
.pm-cab-lado { position:relative; }
.pm-cab-lado::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, var(--laton), var(--laton-line));
}
/* El alcance NO va en versalitas: es una aclaración, no un segundo título. Con
   las dos en mayúsculas —«EL MES EN CIFRAS» / «HASTA EBITDA», «QUÉ REVISAR» /
   «VS JULIO»— y el carril angosto, las dos caían en renglones distintos y la
   barra arrancaba con dos rótulos gritando en vez de uno. */
.pm-cab-u { font-size:11px; letter-spacing:0; text-transform:none;
  color:var(--muted); }

/* ---- Una cifra ---- */
.pm-c { border-bottom:1px solid var(--line-soft); }
.pm-c:last-child { border-bottom:0; }
.pm-c > summary { list-style:none; cursor:pointer; padding:12px 34px 13px 16px;
  display:block; position:relative; }
.pm-c > summary::-webkit-details-marker { display:none; }
.pm-c > summary:hover { background:var(--hover); }
.pm-c-foco { background:var(--principal-tint); box-shadow:inset 3px 0 0 var(--principal); }
.pm-c-k { display:block;      font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); }
.pm-c-v { display:block; font-size:24px; font-weight:600; letter-spacing:-.022em;
  line-height:1.14; margin-top:3px;
  font-variant-numeric:tabular-nums; }
.pm-c-d { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--muted); margin-top:4px; }
.pm-c-ref { color:var(--muted); }
.pm-c-x { position:absolute; top:13px; right:13px; width:14px; height:14px;
  color:var(--muted); transition:transform .15s; }
.pm-c-x::before { content:"▾"; font-size:10px; line-height:14px; }
.pm-c[open] .pm-c-x { transform:rotate(180deg); }
/* ---- El reparto del gasto dentro de su cifra (gente / terceros) ----
   Marcado en _panel_mes.html. Dos columnas iguales debajo de una barra de
   proporción: la barra contesta «de qué está hecho» de un vistazo y las dos
   columnas dan la cifra y su variación. Los dos tonos son NEUTROS y no
   semánticos —dicen qué parte es cuál, no si va bien—; el único color lo
   pone la variación, que es lo que sí tiene signo. */
.pm-rep { display:block; margin-top:10px; }
/* La barra es una sola fila de tramos, no una barra con relleno: así vale igual
   para dos partes que para tres y ningún tramo es «el fondo». */
.pm-rep-bar { display:flex; gap:2px; height:3px; margin-bottom:8px; }
.pm-rep-bar > i { display:block; height:100%; border-radius:2px; min-width:2px; }
.pm-rep-fs { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
/* Con tres partes las columnas se estrechan, así que la variación va sin su
   porcentaje (lo decide la plantilla) y el rótulo puede partir en dos líneas. */
.pm-rep-fs[data-n="3"] { grid-template-columns:repeat(3, 1fr); gap:4px 8px; }
.pm-rep-p { display:block; text-decoration:none; color:inherit; border-radius:4px;
  padding:3px 4px; margin:-3px -4px; }
a.pm-rep-p:hover { background:var(--hover-2); }
.pm-rep-k { display:flex; align-items:center; gap:5px; font-size:9.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); line-height:1.3; }
/* El punto ata cada columna con su tramo de la barra. Sin él, cuál es cuál
   habría que deducirlo del tamaño, que es justo lo que la barra ya dice. */
.pm-rep-dot { width:6px; height:6px; border-radius:2px; flex:none; }
/* Tres tonos del MISMO gris: dicen qué parte es cuál, no si va bien. El orden
   es el del reparto (la parte principal primero), así que el más oscuro es
   siempre la base —la nómina en el gasto, lo recurrente en el ingreso—. */
.pm-rep-s1 { background:var(--pardo); }
.pm-rep-s2 { background:var(--muted); opacity:.55; }
.pm-rep-s3 { background:var(--muted); opacity:.28; }
i.pm-rep-dot.pm-rep-s2, i.pm-rep-dot.pm-rep-s3 { opacity:1; }
i.pm-rep-dot.pm-rep-s2 { background:var(--muted); }
i.pm-rep-dot.pm-rep-s3 { background:var(--line); box-shadow:inset 0 0 0 1px var(--muted); }
.pm-rep-v { display:block; font-size:14.5px; font-weight:600; letter-spacing:-.018em;
  font-variant-numeric:tabular-nums; color:var(--ink); margin-top:2px; }
.pm-rep-fs[data-n="3"] .pm-rep-v { font-size:13px; }
.pm-rep-d { display:block; font-size:11px; margin-top:1px; }
/* Salvedad del reparto: lo que todavía no está declarado no se disimula dentro
   de «Otros», se dice debajo. */
.pm-rep-nota { display:block; margin-top:7px; font-size:10.5px; line-height:1.35;
  color:var(--muted); }

.pm-barra { display:inline-block; width:54px; height:5px; border-radius:999px;
  background:var(--line-soft); overflow:hidden; flex:none; }
.pm-barra > i { display:block; height:100%; border-radius:999px; }
/* ---- Checklist de cierre ----
   Vive entero acá dentro: cerrado es un semáforo, abierto es la lista con la
   que se trabaja. Un tilde y una nota, nada más — en cuanto pide elegir entre
   más de dos estados deja de ser un click y se vuelve una pantalla.

   El semáforo tiene tres estados y ninguno es rojo a propósito: mide AVANCE,
   no desvío. Un cierre recién empezado no es un problema, así que la escala va
   de gris (sin empezar) a ámbar (en curso) a celeste (completo). El rojo de
   .av-severo es del gasto contra el plan, donde sí significa algo malo. */
.pm-chk-v small { font-size:.58em; font-weight:600; color:var(--muted);
  letter-spacing:0; margin-left:1px; }
.pm-chk-e { font-weight:600; }
.pm-chk-e.es-completo { color:var(--principal-ink); }
.pm-chk-e.es-curso { color:var(--ambar); }
.pm-chk-e.es-cero { color:var(--muted); font-weight:500; }
/* Cabecera de bloque (estado de resultado / de situación) */
.pm-chk-g { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:9px 16px 4px; margin-top:4px; border-top:1px solid var(--line);
font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.pm-c-b > .pm-chk-g:first-child { border-top:0; margin-top:0; }
.pm-chk-g b { font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums; }
/* Una tarea: la fila entera es el botón de tildar. */
.pm-chk-t { display:grid; grid-template-columns:15px minmax(0,1fr) auto; gap:8px;
  align-items:start; padding:5px 16px; cursor:pointer; }
.pm-chk-t:hover, .pm-chk-t:focus-visible { background:var(--principal-tint); outline:none; }
.pm-chk-box { width:15px; height:15px; margin-top:1px; padding:0; position:relative;
  border:1.5px solid var(--line); border-radius:5px; background:var(--card);
  cursor:pointer; flex:none; }
.pm-chk-box::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid var(--card); border-width:0 2px 2px 0; transform:rotate(42deg); opacity:0; }
.pm-chk-t[data-estado="hecho"] .pm-chk-box { background:var(--principal); border-color:var(--principal); }
.pm-chk-t[data-estado="hecho"] .pm-chk-box::after { opacity:1; }
.pm-chk-n { font-size:12px; line-height:1.35; color:var(--ink); }
.pm-chk-t[data-estado="hecho"] .pm-chk-n { color:var(--muted); text-decoration:line-through; }
/* Nota y borrar aparecen al pasar por encima: en una lista de veinte, dos
   botones fijos por fila serían más ruido que la propia lista. Con nota
   cargada el botón se queda visible — la nota es información, no un adorno. */
.pm-chk-acc { display:flex; gap:2px; opacity:0; transition:opacity .12s; }
.pm-chk-t:hover .pm-chk-acc, .pm-chk-t:focus-within .pm-chk-acc,
.pm-chk-t.con-nota .pm-chk-acc { opacity:1; }
.pm-chk-b { border:0; background:transparent; padding:0 4px; cursor:pointer;
  color:var(--muted); font:inherit; font-size:10.5px; font-weight:600; line-height:17px;
  border-radius:5px; }
.pm-chk-b:hover { color:var(--principal-ink); background:var(--card); }
.pm-chk-b.tiene { color:var(--ambar); }
.pm-chk-x:hover { color:var(--rojo); }
.pm-chk-nota { padding:0 16px 8px 39px; }
.pm-chk-nota[hidden] { display:none; }
.pm-chk-nota textarea { width:100%; box-sizing:border-box; min-height:48px; resize:vertical;
  font:inherit; font-size:11.5px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; }
.pm-chk-nota textarea:focus { border-color:var(--principal); outline:none; }
.pm-chk-nota p { margin:3px 0 0; font-size:10px; color:var(--muted); }
/* Agregar: un renglón, sin botón. Enter y listo. */
.pm-chk-add { padding:3px 16px 10px 39px; }
.pm-chk-add input { width:100%; box-sizing:border-box; font:inherit; font-size:11.5px;
  color:var(--ink); background:transparent; border:0; border-bottom:1px dashed var(--line);
  padding:4px 0; }
.pm-chk-add input:focus { outline:none; border-bottom-color:var(--principal); }
.pm-chk-vacio { padding:2px 16px 4px 39px; font-size:11px; color:var(--muted); }
/* Nombre en edición: se ve que es editable sin cambiar de tipografía ni de
   tamaño, para que el texto no salte al entrar y salir. */
.pm-chk-n[contenteditable="true"] { outline:none; background:var(--card);
  box-shadow:0 0 0 1px var(--principal); border-radius:5px; padding:0 3px;
  margin:0 -3px; cursor:text; }
.pm-chk-mv { padding:0 2px; font-size:11px; line-height:17px; }
/* Mes cerrado: solo lectura. Las acciones no se dibujan, así que basta con
   quitarle el gesto de «tildable» a la fila. */
.pm-chk-ro .pm-chk-t { cursor:default; }
.pm-chk-ro .pm-chk-t:hover { background:transparent; }
.pm-chk-ro-aviso { padding:8px 16px 4px; font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
/* Explicaciones pendientes: se lee como una tarea pero NO se tilda —se cumple
   sola—, así que no lleva casilla ni gesto de clic. */
.pm-chk-x { display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; padding:5px 16px; font-size:12.5px; color:var(--ink); }
.pm-chk-x-v { font-weight:600; color:var(--ambar); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.pm-chk-x.es-ok .pm-chk-x-v { color:var(--principal-ink); }

/* Variación: flecha + signo + color. El color NUNCA lleva el sentido solo
   (ver el tag var_chip), así se lee en gris, impreso y con daltonismo. */
.vch { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vch small { font-size:.72em; font-weight:600; opacity:.82; }
.vch-cero { color:var(--muted); font-weight:500; }

/* ---- Desglose de una cifra ----
   El tope de altura va en el CUERPO, no en la zona pinchada: si la zona
   creciera libremente, abrir un desglose largo (ingresos tiene una fila por
   clase) empujaba las cifras de abajo y las cortaba a media altura. Con el
   tope acá, y el acordeón del JS que solo deja una abierta, las cuatro
   cifras nunca se recortan — que es justo su razón de ser. */
.pm-c-b { padding:2px 0 10px; background:var(--bg); border-top:1px solid var(--line-soft);
  max-height:34vh; overflow:auto; overscroll-behavior:contain; }
.pm-c-t { padding:9px 16px 3px;      font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.pm-g, .pm-a { display:grid; grid-template-columns:minmax(0,1fr) auto 66px;
  gap:8px; align-items:baseline; padding:5px 16px; font-variant-numeric:tabular-nums; }
.pm-g { font-weight:600; font-size:12.5px; padding-top:8px; margin-top:3px;
  border-top:1px solid var(--line); }
.pm-c-b > .pm-g:first-child { border-top:0; margin-top:0; }
.pm-a { font-size:12px; color:var(--pardo); }
/* El nombre trunca; el chip NO. Antes el chip iba dentro del span que recorta,
   así que en «Professional Services» o «Administracion y Finanzas» el ellipsis
   se lo comía y la marca desaparecía justo en las áreas de nombre largo. */
.pm-g-n, .pm-a-n { display:flex; align-items:baseline; gap:0; min-width:0; }
.pm-g-t, .pm-a-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-g-n > .rc-chip, .pm-a-n > .rc-chip, .pm-r-n > .rc-chip { flex:0 0 auto; }
.pm-r-n { display:flex; align-items:baseline; min-width:0; }
.pm-r-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-g-v, .pm-a-v {      text-align:right; white-space:nowrap; }
.pm-g-d, .pm-a-d { font-size:11px; text-align:right; }
.pm-g-fuera { color:var(--muted); font-weight:500; }
.pm-g-fuera small { font-weight:400; }
.pm-nota { margin:9px 16px 0; font-size:11px; color:var(--muted); line-height:1.45; }
.pm-nota-top { margin:8px 16px 4px; padding-bottom:9px; border-bottom:1px solid var(--line); }

/* ---- Qué revisar ---- */
.pm-sec { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:11px 16px 6px; position:sticky; top:0; z-index:2; background:var(--card); }
.pm-sec-t {font-size:10.5px;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--pardo); }
.pm-sec-n { font-size:10.5px; color:var(--muted); white-space:nowrap; }
/* ---- Acotada a una columna de la cascada ----
   Un bloque por corte, todos en el DOM y uno solo a la vista. Sin JS se ve el de
   «todas», que es exactamente la barra que había: el acotado es una comodidad
   encima, no un requisito para poder leerla. Las dos clases ganan a la regla de
   arriba por ORDEN y no por peso —misma especificidad a propósito—, así que no
   hace falta un `!important` para algo que solo esconde. */
.pm-rev-corte { display:none; }
.pm-rev-corte[data-corte="__todas__"] { display:block; }
.pm-rev-corte.es-visto { display:block; }
.pm-rev-corte.es-oculto { display:none; }
/* La cabecera del bloque acotado dice a QUÉ está acotada la lista. El nombre del
   corte no es un rótulo de sección —no va en versalitas ni grita—: es el sujeto de
   la frase que viene debajo, así que se escribe como se llama. Y a la derecha, la
   salida: «Ver todo» es lo único que hay que saber para deshacer el filtro. */
/* Dos renglones y no uno: el nombre de un área no cabe al lado de su metadato en
   una columna de 296px, y recortarlo con puntos suspensivos sería esconder justo
   lo que hay que leer. Arriba el corte, solo; debajo su recuento y la salida. */
.pm-sec-corte { justify-content:flex-start; row-gap:5px; padding-bottom:7px; }
.pm-sec-c { flex:1 0 100%; font-size:12.5px; font-weight:700; color:var(--ink);
  line-height:1.25; }
.pm-sec-x { margin-left:auto; appearance:none; -webkit-appearance:none;
  border:1px solid var(--line); background:var(--card); color:var(--pardo);
  border-radius:999px; font:inherit; font-size:10.5px; line-height:17px;
  padding:0 9px; cursor:pointer; white-space:nowrap; }
.pm-sec-x:hover, .pm-sec-x:focus-visible { border-color:var(--principal);
  color:var(--ink); background:var(--principal-tint); }
/* Lo que la lista NO trae, al pie de la lista. Apagado y sin borde: no es una fila
   más —no se puede pulsar, no hay nada que abrir— es la constancia de lo que el
   umbral dejó fuera, que en esta app se declara siempre. */
.pm-resto { display:block; padding:7px 18px 10px; font-size:11px;
  color:var(--muted); line-height:1.45; }
.pm-r { display:block; padding:8px 16px 9px; border-bottom:1px dashed var(--line-soft); }
.pm-r:last-child { border-bottom:0; }
.pm-clic { cursor:pointer; transition:background .12s; }
.pm-clic:hover, .pm-clic:focus-visible { background:var(--principal-tint); }
.pm-r-1 { display:flex; align-items:baseline; gap:9px; }
.pm-r-n { font-size:12.5px; font-weight:600; }
.pm-r-m { margin-left:auto; font-size:12.5px; white-space:nowrap; }
.pm-r-2 { display:block; font-size:11px; color:var(--muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Sociedades de una variación (solo consolidado). Tercera línea de la fila y no
   en la segunda: «de qué empresa» es una dimensión distinta del «área · %», y
   apiladas se leen en dos pasadas en vez de una sola frase larga. Envuelven
   (`wrap`) porque acá el nombre no se puede recortar: es la respuesta. */
.pm-r-s { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.pm-soc { font-size:9.5px; font-weight:600; letter-spacing:.02em; line-height:15px;
  padding:0 7px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); color:var(--pardo); max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.pm-soc i { font-style:normal; font-weight:400; color:var(--muted); }
.pm-soc-mas { border-style:dashed; color:var(--muted); }
/* ---- Lo que ya se explicó ----
   Cuarta línea de la fila: la respuesta que alguien ya escribió sobre esa
   variación. Se lee como una CITA y no como un dato más de la fila, porque el
   texto es de otra persona y de otro momento: caja hundida —fondo del marco,
   un tono por debajo de la hoja— con el filete de la izquierda marcado.
   El fondo es el gris del marco (`--bg`) y NO el tinte celeste: ese es el del
   hover de «se puede tocar» de la fila, y con el mismo color la cita
   desaparecía justo al pasar por encima. Hundir en vez de teñir también dice
   lo correcto: esto ya está contestado, no es una señal que reclame nada.
   La nota se corta a dos líneas (el texto completo va en el `title`): la barra
   orienta, y una nota larga empujaría fuera de la vista las otras variaciones
   que todavía nadie miró. */
.pm-r-x { display:block; margin-top:6px; }
.pm-x { display:block; padding:7px 11px 8px; background:var(--nota-bg);
  border-left:2px solid var(--laton); border-radius:0 6px 6px 0;
  font-size:11px; line-height:1.45; }
.pm-x + .pm-x { margin-top:6px; }
.pm-x-c { display:flex; flex-wrap:wrap; gap:5px; align-items:baseline; }
/* El motivo tipificado es el titular de la cita; en `--principal` porque es lo
   único de la fila que dice «esto ya está contestado». Marcada sin motivo, la
   etiqueta es el estado y va apagada: no es una respuesta todavía. */
.pm-x-m { font-size:9.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--principal); }
.pm-x[data-estado="revisado"] .pm-x-m { color:var(--muted); }
.pm-x-s { font-size:9.5px; font-weight:600; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:0 6px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* LA NOTA DE LA PERSONA. Va en `--ff-nota` —la única familia que no es Inter—
   porque es lo único de toda la barra que no lo calculó la app: alguien se
   sentó a contestar por qué se movió esa partida. El motivo tipificado de
   arriba SÍ es de la app (es una opción de una lista), así que se queda en
   la sans de la interfaz; la frase es de quien la escribió. Va a 13px porque la x-height de
   la serif es menor que la de la sans de la interfaz. */
.pm-x-n { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; color:var(--pardo); margin-top:3px;
  font-family:var(--ff-nota); font-style:var(--est-nota);
  font-size:13px; line-height:1.45; }
.pm-x-f { display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.pm-x-mas { display:block; margin-top:4px; font-size:10px; color:var(--muted); }
.pm-vacio { padding:10px 16px 16px; font-size:11.5px; color:var(--muted); line-height:1.45; }
.pm-vacio .badge-ok { margin-left:0; }
.pm-c-err { padding:4px 16px 12px; font-size:11.5px; color:var(--rojo);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pm-reintentar { border:1px solid var(--line); background:var(--card); border-radius:7px;
  padding:2px 9px; font:inherit; font-size:11px; color:var(--pardo); cursor:pointer; }
.pm-reintentar:hover { border-color:var(--principal); color:var(--principal-ink); }
/* ---- Marca «no EBITDA» ----
   El consolidado saca esa línea del EBITDA por política de la empresa. Monocroma
   y sin tinte semántico A PROPÓSITO: no es una alerta ni un error, y no cambia
   ninguna cifra de esta vista.
   Dos formas, porque el mensaje es distinto: borde sólido = marcado exacto
   (afirma sobre esa cuenta o partida); punteado con punto delante = agregado
   (avisa de que ahí dentro hay algo). El punto existe para que la marca se vea
   de un barrido en los niveles que NO hay que desplegar —grupo, pista, la cifra
   de la barra—, que era justo el problema de marcar solo cuenta y área. */
.rc-chip { display:inline-flex; align-items:center; gap:4px; margin-left:6px;
  padding:0 7px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted);
  font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  vertical-align:1px; white-space:nowrap; cursor:help; }
.rc-chip-agr { border-style:dashed; }
/* Forma compacta: solo el punto. Para columnas estrechas (la barra lateral),
   donde el chip con texto se comía el nombre del área. */
.rc-chip-solo { padding:2px; gap:0; }
.rc-dot { width:5px; height:5px; border-radius:50%; flex:0 0 auto;
  background:var(--pardo); }
tr:hover .rc-chip, .pm-a:hover .rc-chip { border-color:var(--muted); }
/* En la cabecera de una pista y en el resumen de una cifra la marca convive con
   texto grande: se sube un poco para que quede alineada con la línea de base. */
.tb-t .rc-chip, .pm-c-k .rc-chip { vertical-align:2px; }

.pm-tag { display:inline-block; margin-left:5px; padding:0 6px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); font-size:9.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); vertical-align:middle; }

/* ---- Esqueleto mientras llegan los ingresos (dos consultas a NetSuite) ---- */
.pm-esq { padding:12px 16px 15px; }
.pm-esq-v, .pm-esq-d, .pm-esq-lista > i {
  border-radius:6px; background:var(--line-soft);
  background-image:linear-gradient(90deg, transparent 20%, var(--line) 50%, transparent 80%);
  background-size:220% 100%; background-repeat:no-repeat;
  animation:pm-brillo 1.5s ease-in-out infinite; }
.pm-esq-v { height:23px; width:62%; margin-top:5px; }
.pm-esq-d { height:11px; width:88%; margin-top:8px; }
.pm-esq-lista { padding:2px 16px 14px; }
.pm-esq-lista > i { display:block; height:12px; margin-top:12px; }
.pm-esq-lista > i:nth-child(2) { width:84%; }
.pm-esq-lista > i:nth-child(3) { width:66%; }
@keyframes pm-brillo { from { background-position:120% 0; } to { background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pm-esq-v, .pm-esq-d, .pm-esq-lista > i { animation:none; }
}

/* ==== La piel de las barras ====
   La barra es una ranura gris; lo que va adentro son hojas blancas. Aplanarlo
   todo al mismo gris dejaba una columna sin jerarquía: no se veía dónde
   empezaba una cifra y terminaba la otra. Cada cifra es su propia hoja y cada
   bloque de «qué revisar» es una hoja por sección, separadas por el gris de
   la ranura — la misma relación fondo/tarjeta que el centro, en pequeño. */
/* ¡OJO! Todo lo que sigue va scopeado con `.pm ` y HOY NO SE VE: es la
   vestimenta de columna, y la columna está en `display:none` desde que las
   cifras subieron a la banda (ver `.hk`). Se conserva entera y no se borra
   porque es la única descripción de cómo se veía —y de por qué se veía así—,
   y porque el marcado que la usa sigue existiendo: basta con quitar el
   `display:none` para tener la barra de vuelta. Lo que SÍ decide el aspecto
   de las cifras hoy son las reglas `.hk` y las reglas base sin scope
   (`.pm-c`, `.pm-g`, `.pm-a`, `.pm-nota`…), que comparten las dos formas.

   La barra es una LISTA, no una bandeja de tarjetas. Montada como «ranura
   gris con hojas blancas» (borde de 12px alrededor de cada cifra) dependía de
   que ranura y hoja tuvieran tonos distintos; con esta paleta lo único que
   quedaba era el CONTORNO de cinco cajas flotando sobre un fondo idéntico al
   suyo: lo más dibujado de la pantalla, y sin decir nada. */
.pm .pm-c {
  background:none; border:0; border-radius:0; margin:0; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.pm .pm-c:last-child { border-bottom:0; }
.pm .pm-cab { margin-bottom:0; }
/* La cifra en foco (resultado operativo) se pinta entera, no solo con el
   filete: es la respuesta a «cómo fue el mes» y tiene que encontrarse sin
   leer. Se repite el tinte porque la hoja de arriba, con más especificidad,
   se lo comería. */
/* Sin caja, lo que encuentra la cifra en foco es el filete. El tinte celeste
   sobre una columna entera de cifras pesaba más que la propia cifra. */
/* La cifra en foco lleva el CELESTE: dice «esta es la respuesta, mirá acá», que
   es contexto y no una acción. Antes iba en tinta porque el único acento era
   el de acción y pintarla con él la habría hecho parecer pulsable; con dos
   colores, el papel existe y tiene su color. */
.pm .pm-c-foco { background:var(--laton-tint); box-shadow:inset 3px 0 0 var(--laton); }
/* Etiqueta de una cifra: es el título de su hoja. */
/* ---- La cifra: una FILA DE TABLA, no una ficha ----
   Iba montada como ficha: rótulo en versalitas, la cifra grande abajo a la
   izquierda, la variación debajo, el reparto debajo con su barra de
   proporción, sus puntos de color y tres importes con su propia variación.
   Cinco fichas así en una columna de 240px son seis tamaños de letra, dos
   tipos de gráfico y cuatro alineaciones distintas: no es que fueran grandes,
   es que no se podían mirar.

   Ahora es lo que el resto de la app ya es: una tabla. Nombre a la izquierda,
   cifra pegada al borde DERECHO, y las cinco cifras formando una columna de
   dígitos que se lee de arriba abajo —que es lo único que hace legible una
   columna de números—. Debajo, en la misma alineación derecha, la variación y
   su referencia. Dos tamaños de letra en toda la barra: el nombre y la cifra;
   todo lo demás es el tamaño del nombre, apagado.

   El reparto se fue al desglose (ver _panel_mes.html): la barra dejó de tener
   un segundo cuadro de mando dentro de cada fila. Está a un clic, que es el
   contrato del <details>. */
.pm .pm-c > summary {
  display:grid; grid-template-columns:minmax(0, 1fr) auto;
  column-gap:10px; row-gap:1px; align-items:baseline;
  padding:10px 26px 11px 16px;
}
/* Fila 1: nombre | cifra. Fila 2: tendencia | variación. El desplegable
   (`.pm-c-x`) va absoluto y no pide celda. */
.pm .pm-c-k { grid-column:1; }
.pm .pm-c-v { grid-column:2; text-align:right; }
.pm .pm-c-sp { grid-column:1; align-self:center; }
.pm .pm-c-d { grid-column:2; }
/* El nombre deja las versalitas: era el registro de un rótulo de sección y
   acá es el nombre de una fila, igual que en el árbol del centro. */
.pm .pm-c-k {
  font-size:12.5px; font-weight:600; color:var(--pardo);
  letter-spacing:-.005em; text-transform:none;
}
/* 20px y no 25: sigue siendo la cifra más grande de la pantalla —en el centro
   nada pasa de 17px— sin ser un titular de portada. */
.pm .pm-c-v { font-size:20px; margin-top:0; line-height:1.2; }
/* La variación se alinea a la derecha con su cifra y la referencia baja a su
   propio renglón, también a la derecha: tres renglones en bandera derecha se
   leen como un bloque; mezclados con la izquierda, como cuatro cosas. */
.pm .pm-c-d {
  font-size:11px; margin-top:0; justify-content:flex-end;
  column-gap:6px; row-gap:0; text-align:right;
}
.pm .pm-c-ref { flex:0 0 100%; }
/* Excepción: donde la segunda fila es una barra de avance y su texto (plan y
   cierre del mes) los dos van juntos. Si la referencia se llevara su renglón,
   la barra se quedaría sola en el suyo, alineada a la derecha y sin decir de
   qué es. Si `:has` no estuviera, lo peor que pasa es eso. */
.pm .pm-c-d:has(.pm-barra) .pm-c-ref { flex:0 1 auto; }
/* La tendencia ocupa el hueco de la IZQUIERDA de la fila de la variación, que
   estaba vacío. Ya no comparte fila con el número, así que no puede chocar con
   él; lo que tiene que caber es tendencia + variación en el ancho del carril
   (52 + 10 + ~120 contra los ~190 de contenido en el mínimo). */
.pm .pm-c-sp svg { width:52px; height:auto; }
.pm-c-x { top:12px; right:9px; }
/* La barra de avance (plan y checklist) va con su texto, a la derecha. */
.pm .pm-barra { width:42px; height:4px; }

/* ==== «El mes en cifras» EN LA CABECERA (`.hk`) ====
   El contenido es EL MISMO —lo sigue pintando _panel_mes.html— pero su sitio
   dejó de ser una columna: es una tira a la derecha de la banda, y la
   composición de cada cifra se abre en su desplegable. El JS del final de
   esta plantilla mueve `.pm-fijo` de la barra a esta tira; acá solo está lo
   que cambia de forma al llegar.

   El motivo es de reparto de pantalla: la columna se llevaba 232-268px a
   tiempo completo para decir cinco números que se leen en un segundo,
   mientras que el desglose —que es lo que de verdad ocupa— se mira una vez
   cada tanto. En la banda los números siguen presentes SIEMPRE, que era todo
   el punto de la barra, y el desglose cuesta lo mismo que costaba: abrir el
   <details>.

   Todo va scopeado con `.hk` y no toca una sola regla de `.pm`: las dos
   hojas conviven porque la barra sigue existiendo en el marcado. */
/* La tira es una banda del INFORME, no de la navegación. Lo que lo dice es el
   papel: `--bg`, el mismo de la página del informe, contra el `--rail` de la
   cabecera. Y la MEDIDA: el bloque mide exactamente lo que mide la hoja que
   encabeza (`--medida-arbol`, centrado igual que `.pm-main` y descontando el
   carril de «qué revisar»), así que sus dos bordes caen sobre los de las
   pestañas y la tabla de abajo. Eso es lo que hace que se lea como el
   encabezado del documento y no como una barra de herramientas.

   Antes iba de borde a borde de la ventana. Las mismas cinco cifras repartidas
   sobre 1.888px daban celdas de 377 con ~150 de contenido: el número quedaba
   chico y suelto en su casilla, y la fila entera se leía estirada. A la medida
   de la hoja son celdas de 224 —las del resumen ejecutivo miden 233— y ahí la
   cifra puede ir al cuerpo con el que se lee de un vistazo. Ver `.rx-kpi` en
   resumen.html: es la misma anatomía —rótulo, cifra, contexto— y a propósito.
   Y NO lleva filete de abajo: la tarjeta ya cierra con su propio borde, y a
   9px de él una segunda regla decía lo mismo dos veces — dos rayas paralelas
   bajo la banda. Lo que separa el resumen del análisis es el aire.
   La banda es el PAPEL y no las cifras: el aire de arriba y abajo es lo que
   deja ver el champán alrededor del bloque blanco. Sin ese margen el recuadro
   toca los dos cortes y vuelve a leerse como una barra de herramientas. */
/* El padding es la receta de `.pm-main` partida en dos: 12px de aire a cada
   lado del contenido y, a la derecha, además el carril. Con eso la caja que
   queda mide lo mismo que la celda del análisis, y el `margin:0 auto` de la
   tarjeta la centra dentro exactamente igual que la grilla centra la hoja. */
/* `margin-right` y no `padding-right`: el carril no es aire de la banda, es
   la columna de «qué revisar», que sube hasta aquí. Con padding, el fondo de
   la banda llegaba hasta el borde de la ventana y tapaba ese tramo del carril,
   que quedaba como un rectángulo de papel vacío al lado del titular. */
.hk { display:flex; align-items:stretch; flex-wrap:wrap;
  background:var(--papel); border-bottom:0;
  margin-right:var(--carril-rev);
  padding:8px 12px 10px; position:relative; }
.hk:empty { display:none; }
/* Lo que baja de la barra pierde el pinchado y el scroll propio: acá no es
   una columna, es una fila.
   Y ES UNA TARJETA, la misma con la que finanzas y el resumen muestran sus
   totales: papel blanco, hairline alrededor y el radio de la casa, apoyada
   sobre el champán. Es la forma con la que esta app dice «esto es el
   titular»; que acá fuera del mismo color que la página hacía que las cinco
   cifras del mes —que son el resultado del informe— se leyeran como parte del
   cromo de la cabecera. Más chica que la de finanzas, pero la misma caja. */
/* `max-width` FIJO y no `max-content`: se probó dejar que la tarjeta se
   encogiera a su contenido y el bloque cambiaba de ancho al llegar el AJAX de
   ingresos —las dos celdas que arrancan como esqueleto miden menos que la
   cifra que van a traer—, así que el titular del informe daba un salto en cada
   carga. A la medida de la hoja no se mueve nunca. */
.hk .pm-fijo { flex:1 1 100%; display:flex; align-items:stretch; position:static;
  max-width:var(--medida-arbol); margin:0 auto;
  max-height:none; overflow:visible;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radio); }
/* Las celdas se reparten el ancho por igual. Con cada una a su contenido el
   bloque terminaba a media pantalla y el recuadro se leía como una pastilla
   suelta; repartido, son cinco casillas del mismo tamaño —lo que hace que se
   lean como una fila y no como cinco cosas juntas—. El `min-width` sigue
   siendo el suelo: por debajo de eso la cifra con su variación no entra. */
.hk .pm-fijo > :not(.pm-cab) { flex:1 1 0; min-width:150px; }
/* Los dos huecos del AJAX son un <div> envolviendo la cifra: sin esto la
   celda no ocupa su casilla y el filete de al lado queda a media altura. */
.hk #pm-slot-ing, .hk #pm-slot-res { display:flex; }
.hk #pm-slot-ing > *, .hk #pm-slot-res > * { flex:1 1 auto; min-width:0; }
/* Un filete entre cifras: cinco números seguidos sin nada que los separe se
   leen como uno largo. Va sobre los hijos directos de `.pm-fijo` —y no con
   `.pm-c + .pm-c`— porque dos de las cifras llegan envueltas en su hueco. */
/* `:not(.pm-cab) +`: la cabecera sigue en el marcado pero no se pinta acá, y
   sin esta guarda la primera cifra visible heredaba su filete y la tira
   arrancaba con una raya suelta. */
.hk .pm-fijo > :not(.pm-cab) + * { border-left:1px solid var(--line-soft); }
/* La cabecera de la columna entera sobra en la tira: ni el rótulo —nadie
   necesita que le digan que eso son las cifras del mes— ni el alcance, que lo
   dice el switch de EBITDA de la barra de contexto, dos renglones más arriba y
   en tamaño legible. Se queda en el marcado porque sigue valiendo si esto vuelve
   a rendirse como columna. */
.hk .pm-cab { display:none; }

/* ---- Una cifra de la tira ---- */
/* `display:block` a propósito: un <details> con display:flex tiene historial
   de no ocultar su cuerpo cuando está cerrado según el motor. Lo que centra
   en vertical es `align-items` de la tira, que no necesita tocar esto. */
/* Las celdas miden LO MISMO. Con cada una ajustada a su contenido, los cinco
   rótulos caían a distancias distintas y la tira se leía como cinco cosas
   sueltas en vez de como una fila: el ancho mínimo es lo único que las
   convierte en columnas. 150px es lo que ocupa la cifra más larga con su
   variación al lado, así que casi ninguna celda pasa de ahí y las que no
   llegan se alinean igual. */
.hk .pm-c { position:relative; border-bottom:0; display:block; min-width:150px; }
/* `height:100%` + `align-content`: la celda se estira a lo alto de la tarjeta
   —para que el filete que la separa de la siguiente llegue de borde a borde,
   como en finanzas— y el contenido se centra dentro de ella. Sin esto, una
   celda más baja que sus vecinas (un esqueleto, el checklist) dejaba el filete
   colgando a media altura. */
.hk .pm-c > summary {
  display:flex; flex-wrap:wrap; align-items:center; align-content:center;
  column-gap:8px; row-gap:0; height:100%; box-sizing:border-box;
  padding:10px 20px 11px 16px; border-radius:calc(var(--radio) - 1px);
}
.hk .pm-c > summary:hover { background:var(--hover-2); }
.hk .pm-c-k { flex:0 0 100%; font-size:10px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
/* La cifra al cuerpo con el que se lee sin buscarla, y en su propio renglón.
   Iba a 15px y compartiendo línea con la variación, que es lo que había que
   hacer cuando la celda medía 377px de ancho y 45 de alto. En renglón propio
   el salto de línea deja de depender de cuántos dígitos traiga el número: con
   la variación al lado, «1.234.567 ↑ +543.210» entraba en una sociedad y
   envolvía en el consolidado, y esa celda —una sola— empujaba el alto de toda
   la fila y dejaba a las otras cuatro con un hueco debajo. */
.hk .pm-c-v { font-size:23px; font-weight:700; letter-spacing:-.025em;
  line-height:1.1; margin-top:3px; flex:0 0 100%; }
/* Fuera de la tira: la tendencia (64px por cifra) y la referencia («vs julio
   (703.395)») no caben cinco veces en una banda que ya lleva la frase del
   informe. Las dos siguen enteras dentro del desplegable. */
.hk .pm-c-sp, .hk .pm-c-ref { display:none; }
.hk .pm-c-d { margin-top:4px; font-size:11.5px; column-gap:5px; flex:0 0 100%; }
/* Las dos cifras de AVANCE son la excepción, y por una razón: su tercer
   renglón es una barra, y una barra sola no dice contra qué avanza. En las
   otras tres el renglón lo ocupa la variación, que se explica sola. Acá cabe
   porque la barra mide 42px, así que la referencia entra al lado en vez de
   dejar la celda a medio llenar («108% de 674.436», «Sin empezar»).
   Se identifica por lo que hay DENTRO (`.pm-barra`) y no por el id de la
   celda: es la forma la que pide el texto, y así vale para la del plan, la
   del checklist y para cualquier otra que llegue con barra. */
.hk .pm-c-d:has(.pm-barra) { display:flex; align-items:center; gap:7px; }
.hk .pm-c-d:has(.pm-barra) .pm-c-ref { display:inline; }
/* Del chip queda el importe con su flecha; el porcentaje es lo mismo dicho
   dos veces y se lee al abrir. */
.hk .vch small { display:none; }
/* La cifra en foco no se marca con fondo: en una banda de 44px un recuadro
   de color se lee como un botón. Se marca en el rótulo, que es lo primero
   que se lee de la celda. */
.hk .pm-c-foco { background:none; box-shadow:none; }
/* Celeste, el mismo con el que la columna marcaba esta cifra y el mismo del
   período: no es «va bien», es «acá es donde estás mirando». */
.hk .pm-c-foco .pm-c-k { color:var(--laton-ink); }
/* A la altura del rótulo, no pegada al borde de la tarjeta: con la caja
   dibujada, una flecha en la esquina se lee como el pico del recuadro y no
   como el mando de esa cifra. */
/* La flecha es el ÚNICO mando del desplegable (el cuerpo de la cifra elige el
   lado, ver `.is-sel`), así que deja de ser un glifo tenue: SOLO el icono, sin
   casilla ni filete (con caja competía con el borde de la cifra elegida),
   pero a tinta plena y con una zona de clic de 22px. Al pasar o abierto se
   posa un tinte suave detrás, sin borde. */
.hk .pm-c-x { position:absolute; top:7px; right:7px; width:22px; height:22px;
  display:grid; place-items:center; line-height:1; opacity:.8; z-index:1;
  color:var(--ink); border:0; border-radius:6px; background:none; cursor:pointer;
  transition:background .12s, opacity .12s; }
.hk .pm-c-x::before { font-size:13px; line-height:1; }
.hk .pm-c-x:hover, .hk .pm-c-x:focus-visible, .hk .pm-c[open] .pm-c-x {
  opacity:1; background:var(--hover-2); outline:none; }
/* El cuerpo de la cifra ya no despliega: solo las que eligen lado se leen
   pulsables. Las otras tres no reaccionan al pasar. */
.hk .pm-c > summary { cursor:default; padding-right:34px; }
.hk .pm-c:not(.is-lado) > summary:hover { background:none; }
.hk .pm-c.is-lado > summary, .hk .pm-c.is-lado.pm-esq, .hk .pm-c.is-lado:not(details) { cursor:pointer; }

/* ---- La cifra ELEGIDA: el lado que se está analizando ----
   Las cifras Ingresos / Gasto operativo sustituyen a las pestañas, así que la
   elegida se marca entera: un marco grueso en la tinta del logo (`--ink`) que
   rodea la casilla, más el tinte de «esto es lo que estás mirando»
   (`.cp-activa`) y el rótulo en tinta. Se probó el filete de `.tab-btn.active`
   debajo y se quitó: en una tarjeta se leía como subrayado de un texto, no
   como la casilla elegida. Va con `box-shadow` inset para no mover el
   contenido ni el ancho de la casilla. La no elegida queda como cualquier
   otra cifra. */
.hk .pm-c.is-sel { background:rgba(255,209,101,.07);   /* pedido del usuario: ámbar muy suave */
  box-shadow:inset 0 0 0 2.5px var(--ink); border-radius:calc(var(--radio) - 1px); }
.hk .pm-c.is-sel > summary:hover { background:none; }
.hk .pm-c.is-sel .pm-c-k { color:var(--ink); }
/* Con un lado elegido a la vista, el celeste del resultado sería una segunda
   «acá estás mirando» en la misma tira. */
.hk .pm-fijo:has(.is-sel) .pm-c-foco .pm-c-k { color:var(--muted); }
/* Las pestañas de lado siguen en el marcado —el JS de cada página vive de
   ellas— pero con las cifras en la tira ya no se ven: el selector es la cifra. */
body:has(.hk .pm-c[data-dom]) .tabsrow > .tabs { display:none; }

/* ---- El desglose: de qué está hecho el número, y nada más ----
   Tuvo dentro la lista de grupos con sus áreas (o sus clientes): 13 y 55
   filas. Se probó recortarla a 7 —quitó el scroll quitando información— y
   ponerla en columnas a lo ancho de la banda —que en una ventana angosta se
   apilan y vuelve a ser una lista sin fin—. Las dos eran maneras de meter una
   pestaña dentro de un menú.
   Lo que queda es el REPARTO: dos o tres partes y un enlace a la pestaña,
   donde esa lista ya vive entera, ordenable y con su buscador. Con eso el
   panel mide ~150px, así que no necesita tope, ni scroll, ni recorte. */
.hk .pm-c-b {
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  width:min(360px, calc(100vw - 24px)); max-height:none; overflow:visible;
  /* Aire a los lados: con padding horizontal 0, la barra de proporción del
     reparto llegaba a tocar los dos bordes del panel y se leía como cortada.
     Las filas de dentro traen su propia sangría, así que acá van 6px: los
     justos para que la barra no muera contra el borde. */
  padding:10px 6px 8px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--flota);
}
/* El lado por el que abre el panel NO se decide acá: lo mide el JS al abrirlo
   (ver «Colocar el desplegable donde cabe»). Se intentó con
   `:nth-last-child(-n+2)` y está MAL: dos de las cifras llegan envueltas en su
   hueco del AJAX (`#pm-slot-ing`), así que contar hermanos no da la posición
   en la banda — Ingresos, que es la PRIMERA celda, contaba como penúltima, se
   anclaba a la derecha y su panel se salía 67px por el borde IZQUIERDO de la
   ventana (medido). */
/* El enlace a la pestaña: es la salida al detalle, no una acción del panel,
   así que va apagado y al pie. */
.pm-ir { display:block; width:100%; text-align:left; border:0; background:none;
  font-family:inherit; font-size:11.5px; font-weight:600; color:var(--principal-ink);
  cursor:pointer; padding:8px 16px 2px; }
.pm-ir:hover { background:var(--principal-tint); }

/* ---- El checklist es la excepción, y es una excepción honesta ----
   Las demás cifras abren un reparto de dos o tres partes: 130px, sin tope y
   sin scroll. El checklist son 24 tareas que se van tildando, más las
   explicaciones pendientes: no hay forma de que eso quepa en una pantalla, y
   recortarlo no es una opción porque la lista ENTERA es el trabajo.
   Así que acá sí hay tope y scroll. No contradice «un menú con scroll es un
   menú que se quedó una página dentro»: aquello era una lista de DATOS que
   ya vive en su pestaña; esto es una herramienta que no vive en ningún otro
   sitio. Sin el tope se cortaba por abajo y las últimas tareas no se podían
   ni ver ni tildar.
   También pide más ancho: son filas con nombre, acciones y una nota. */
.hk #pm-chk .pm-c-b {
  width:min(460px, calc(100vw - 24px));
  max-height:calc(100vh - var(--ws-head) - 24px);
  overflow:auto; overscroll-behavior:contain;
}
/* Los esqueletos, a la medida de la celda. */
/* Mismo alto que una celda pintada: el esqueleto ocupa el sitio exacto que va
   a ocupar la cifra, así la tarjeta no crece cuando responde el AJAX. */
.hk .pm-esq { padding:10px 16px 11px; border:0; }
.hk .pm-esq-v { height:25px; width:112px; margin-top:4px; }
.hk .pm-esq-d { height:13px; width:66px; margin-top:5px; }
.hk .pm-c-err { padding:10px 16px 11px; }

/* Sección de «qué revisar»: cabecera con peso de título, pinchada sobre el
   gris de la ranura, y las filas debajo en una hoja blanca. */
/* La cabecera de sección es una BANDA, no una fila más. Con el mismo fondo,
   la misma sangría y el mismo ritmo que las filas, el título se leía como el
   primer renglón de la lista por mucho cuerpo que se le diera: en una columna
   plana el ojo agrupa por franja, y «Gasto» no tenía franja propia. El tinte
   es el mismo con el que se marca la cifra en foco de la otra barra, así que
   no estrena material. Cierra con filete fuerte —el de entre filas es suave—:
   eso es lo que dice «todo lo de abajo cuelga de esto». */
/* El CELESTE VA EN EL FILETE, NO EN EL RELLENO (16/09/2026: «el celeste
   genial para respaldar con detalles, pero como color de toda la pantalla
   queda muy mal»). Primero esta cabecera fue una banda pintada de celeste y
   después un filete de 2px en degradado de lado a lado; los dos eran el
   mismo error visto de cerca: dibujar una separación entre DOS TÍTULOS —«QUÉ
   REVISAR» y «Gasto»— que no tenían por qué ser dos. El lado se mudó al
   rótulo de la columna (`.pm-cab-dom`) y con un solo título no hay nada que
   separar: no hace falta banda, ni degradado, ni franja de color. El celeste
   se queda donde sí es marco: el filete corto bajo el rótulo. */
.pm-rev .pm-sec {
  background:var(--bg); padding:19px 18px 9px; margin-top:0;
  flex-wrap:wrap; border-bottom:0;
}
/* Con el lado nombrado arriba, de la cabecera de sección solo sobrevive su
   metadato —cuántas van, qué quedó fuera—, que no encabeza nada: se lee como
   una línea apagada bajo el rótulo. Y si no le queda ni eso que decir,
   desaparece en vez de dejar un hueco. */
body.dom-gasto    .pm-rev .pm-rev-dom[data-dom="gasto"]    .pm-sec-t,
body.dom-ingresos .pm-rev .pm-rev-dom[data-dom="ingresos"] .pm-sec-t,
.pm-rev-1 .pm-sec-t { display:none; }
body.dom-gasto    .pm-rev .pm-rev-dom[data-dom="gasto"]    .pm-sec,
body.dom-ingresos .pm-rev .pm-rev-dom[data-dom="ingresos"] .pm-sec,
.pm-rev-1 .pm-sec { padding:9px 18px 5px; }
body.dom-gasto    .pm-rev .pm-rev-dom[data-dom="gasto"]    .pm-sec:not(:has(.pm-sec-n, .pm-sec-nota)),
body.dom-ingresos .pm-rev .pm-rev-dom[data-dom="ingresos"] .pm-sec:not(:has(.pm-sec-n, .pm-sec-nota)),
.pm-rev-1 .pm-sec:not(:has(.pm-sec-n, .pm-sec-nota)) { display:none; }
/* Como se muestra un solo lado, su cabecera arranca contra el rótulo de la
   columna y no necesita despegarse de nada. El `:first-child` cubre el caso sin
   clase `dom-*` —JS caído, o una sola pestaña—, donde se ven los dos. */
.pm-rev .pm-rev-dom:first-child .pm-sec,
body.dom-gasto    .pm-rev .pm-rev-dom[data-dom="gasto"]    .pm-sec,
body.dom-ingresos .pm-rev .pm-rev-dom[data-dom="ingresos"] .pm-sec { padding-top:11px; }
/* La nota de lo que la lista deja fuera (ajustes de consolidación) es una línea
   propia dentro de la MISMA cabecera: fuera de ella rompería el redondeo de la
   primera fila, que se hace con `.pm-sec + .pm-r`. */
.pm-sec-nota {
  flex:0 0 100%; margin-top:5px; font-size:10.5px; line-height:1.4;
  color:var(--muted); text-transform:none; letter-spacing:0;
}
/* El lado es el TÍTULO de su bloque y tiene que ganarle a los nombres de las
   filas de abajo, que van a 13px semibold. Empezó siendo más CHICO que ellos
   (11,5px) y en versalitas, el mismo registro que «QUÉ REVISAR», que es de
   otro nivel: la barra se leía como una lista corrida donde «Gasto» e
   «Ingresos» no separaban nada. Subirlo a 14,5px tampoco alcanzó —contra 13px
   no hay salto, hay empate—. En una barra sin cajas, que es como quedó, el
   título no lo hace un recuadro: lo hacen el cuerpo y el aire. De ahí 17px y
   28 de aire encima. Sin versalitas a propósito: quedan para el rótulo de la
   columna, que es lo único por encima de estos dos. */
.pm-rev .pm-sec-t {
  font-size:15px; font-weight:700; color:var(--ink);
  letter-spacing:-.01em; text-transform:none;
}
/* El conteo era una píldora blanca con borde, y se aguantaba mientras la
   cabecera iba pintada: sobre el celeste, la cápsula se leía como parte de
   la banda. Sin banda queda un recuadro flotando sobre el papel — el mismo
   relieve que el informe viene quitando en todas partes— y además dice lo
   mismo que el «7 señales» de la línea colapsada de al lado, dibujado de
   otra manera. Se unifican: texto apagado, sin caja. */
.pm-rev .pm-sec-n {
  font-size:11px; font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--muted); background:none; border:0; border-radius:0; padding:0;
}
/* La hoja se arma con los bordes de las propias filas: la primera después de
   la cabecera redondea arriba, la última abajo. Sin envoltorio, porque el
   bloque de ingresos llega por AJAX y el de gasto viene renderizado — los dos
   son filas sueltas dentro de su contenedor. */
.pm-rev .pm-r {
  background:none; margin:0; padding:9px 18px 10px;
  border:0; border-bottom:1px solid var(--line-soft);
}
/* El tinte de «se puede tocar» se repite por lo mismo que el foco: la hoja
   pinta fondo y le gana por especificidad a .pm-clic:hover. */
.pm-rev .pm-clic:hover, .pm-rev .pm-clic:focus-visible { background:var(--hover); }
.pm-rev .pm-r:last-child { border-bottom:0; }
.pm-rev .pm-r-n { font-size:13px; }

/* ---- La barra con aire (29/09/2026: «se veía mejor en el otro») ----
   Del prototipo Minimal: el rótulo pasa de versalitas de 12,5px a TÍTULO, con el
   alcance debajo en la línea apagada; cada partida respira más; y la cita deja
   de ser una caja rellena para ser un párrafo bajo un filete punteado. La
   estructura no cambia —misma fila, mismo clic, mismo corte por la cascada—,
   solo el tratamiento. Acotado a `.pm-rev`: `.pm-cab` es también la cabecera
   de la barra izquierda. */
.pm-rev .pm-cab { flex-direction:column; align-items:flex-start; gap:5px;
  padding:20px 18px 14px; }
.pm-rev .pm-cab-m { font-size:21px; font-weight:600; letter-spacing:-.015em;
  text-transform:none; line-height:1.2; }
.pm-rev .pm-cab-lado::after { bottom:-3px; }
.pm-rev .pm-cab-u { font-size:10px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; }
.pm-rev .pm-r { padding:13px 18px 14px; border-bottom-color:var(--line); }
.pm-rev .pm-r-2 { margin-top:2px; }
/* La cita (`.pm-x`) se trata más abajo, junto a su historia. */
/* EL DATO MANDA SOBRE EL COMENTARIO (29/09/2026). La cursiva tenía más
   presencia que los importes: baja un punto de cuerpo y de tinta, y la cifra
   de cada partida va en una COLUMNA tabular a la derecha, para que la barra se
   pueda escanear de arriba abajo por importe sin leer ninguna nota. */
.pm-rev .pm-r-m { min-width:86px; text-align:right; font-weight:600;
  font-variant-numeric:tabular-nums; }
/* El motivo, como CHIP DE COLOR POR FAMILIA DE CAUSA. Todos iguales, había que
   leerlos para saber de qué iba la cita. El catálogo es configurable, así que el
   color no va por motivo sino por familia (cinco, paleta cerrada, sin azul y
   sin rojo ni verde, que son polaridad); lo que no esté mapeado —un motivo
   nuevo, «otro», o el estado sin motivo— cae en el chip neutro. */
/* 29/09/2026: mismo formato que el sello «Mes cerrado» (`.mes-cerrado`):
   píldora con filete y sin relleno, en caja normal. El chip relleno en
   versalitas gritaba más que la cifra; el filete lo deja como etiqueta.
   El color de la familia va en el texto y el filete lo toma de él. */
.pm-rev .pm-x-m { display:inline-flex; align-items:center; font-size:11px; font-weight:600;
  letter-spacing:.02em; text-transform:none; border-radius:999px; padding:2px 9px;
  line-height:1.35; white-space:nowrap; background:none; color:var(--pardo);
  border:1px solid color-mix(in srgb, currentColor 32%, transparent); }
.pm-rev .pm-x-m:is([data-motivo="volumen"],[data-motivo="estacional"],
  [data-motivo="headcount"],[data-motivo="alta_baja_cliente"]) { color:#6E4E73; }  /* actividad: ciruela */
.pm-rev .pm-x-m:is([data-motivo="precio"],[data-motivo="cambio"]) {
  color:var(--laton-ink); border-color:var(--laton-line); }          /* precio y cambio: latón, como «Mes cerrado» */
.pm-rev .pm-x-m:is([data-motivo="one_off"]) { color:#7A5230; }      /* puntual: caramelo */
.pm-rev .pm-x-m:is([data-motivo="devengo"],[data-motivo="reclasificacion"],
  [data-motivo="imputacion"]) { color:#5B5347; }                    /* contable: grafito cálido */
.pm-rev .pm-x-m:is([data-motivo="no_ejecutado"],[data-motivo="fuera_de_plan"],
  [data-motivo="plan_desactualizado"]) { color:#5F5C2E; }           /* plan: caqui */
.pm-rev .pm-x[data-estado="revisado"] .pm-x-m { color:var(--muted); }
/* La frase de la persona: un punto por debajo del dato. 13px en pardo; sigue en
   serif cursiva porque eso dice «lo escribió alguien», no porque tenga que pesar. */
.pm-rev .pm-x-n { -webkit-line-clamp:3; font-size:13px; line-height:1.42;
  color:var(--pardo); margin-top:5px; }
.pm-rev .pm-x-f { margin-top:4px; }
/* La moneda de cada cifra del mes, pegada a su rótulo: «INGRESOS · USD». */
.pm-c-u { letter-spacing:.02em; font-weight:500; color:var(--muted); }
.pm-rev .pm-vacio {
  border-bottom:1px solid var(--line-soft); margin:0; padding:11px 18px 12px;
}
/* Los esqueletos también son hoja: si no, la barra parpadea de gris a blanco
   cuando llegan los datos. */
.pm .pm-esq, .pm-rev .pm-esq-lista {
  border-bottom:1px solid var(--line-soft); margin:0;
}
.pm-rev .pm-esq-lista { padding:4px 13px 14px; }

/* «Qué revisar» muestra UN SOLO lado, el de la pestaña abierta: el otro no
   aparece. El lado aparcado llegó a quedarse en una tira con su recuento y su
   mayor variación, y confundía: dos lados en la misma columna se leen como una
   sola lista, y la mitad no era de lo que estabas mirando. Quien quiera
   trabajar ingresos va a Ingresos; la lectura de los dos lados a la vez ya la
   da la barra izquierda, que es transversal por oficio.
   La clase `dom-*` la pone el conmutador de pestañas y solo cuando hay DOS
   pestañas; sin ella —JS caído, o un permiso de un solo lado— cae la regla de
   abajo y se ven los dos, que es lo correcto cuando no hay a dónde ir. */
body.dom-gasto    .pm-rev .pm-rev-dom[data-dom="ingresos"],
body.dom-ingresos .pm-rev .pm-rev-dom[data-dom="gasto"] { display:none; }

/* Las tres columnas se mantienen mientras el centro tenga sitio para las
   tablas anchas: primero adelgazan las barras y solo por debajo de ~1180px
   se apilan (arriba las cifras, abajo qué revisar), enteras y sin scroll
   interno. */
@media (max-width: 1420px) {
  /* El ancho de los carriles ya lo resuelve el `clamp`; acá solo se recorta
     el aire del centro, que es lo que el clamp no puede saber. */
  .pm-main { padding:18px 8px 52px; }
  /* La tira acompaña: su sangría es la del centro, o el titular deja de caer
     sobre la tabla que encabeza. */
  .hk { padding-left:8px; padding-right:8px; }
}
@media (max-width: 1180px) {
  .pm-layout { grid-template-columns:1fr; }
  /* Apilado no hay carril que descontar ni hoja centrada con la que
     alinearse: la tira vuelve a ser de borde a borde y el carril, que ya no
     es carril, deja de subir. */
  .hk { padding:8px 16px 10px; margin-right:0; }
  .hk .pm-fijo { max-width:none; }
  .pm-rev { margin-top:0; }
  .pm, .pm-main, .pm-rev { grid-column:1; box-shadow:none; }
  .pm { border-right:0; border-bottom:1px solid var(--line); }
  .pm-rev { border-left:0; border-top:1px solid var(--line); }
  .pm-main { padding:16px 16px 40px; }
  .pm-fijo, .pm-rev-in { position:static; max-height:none; height:auto; overflow:visible; }
  .pm-rev-in { width:auto; border-left:0; border-top:0; border-radius:0; }
  .pm-rev .pm-scroll { max-height:420px; }
}
@media print {
  .pm-layout { display:block; }
  .pm, .pm-rev { border:0; }
  /* En papel no hay carril al lado: la tira recupera el ancho de la hoja y el
     bloque de «qué revisar» deja de subir. */
  .hk { margin-right:0; }
  .pm-rev { margin-top:0; }
  .pm-fijo, .pm-rev-in, .pm-scroll { position:static; max-height:none; height:auto;
    overflow:visible; }
  .pm-rev-in { width:auto; border-left:0; }
  /* En papel no hay pestaña abierta ni nada que pulsar: los dos lados de
     «qué revisar» salen enteros. */
  .pm-rev .pm-rev-dom { display:block !important; }
}

/* ---- Layout ---- */
.contenedor { padding:28px; max-width:1400px; margin:0 auto; }
/* Vistas con área de trabajo: el ancho lo administra la grilla de tres
   columnas, así que el contenedor deja de centrar y de acolchar. Lo que
   queda por encima del área (la cabecera del consolidado, un aviso) lleva su
   propio padding con .ws-pad. */
.contenedor.ws { padding:0; max-width:none; }
.ws-pad { padding:18px 26px 0; }
/* La cabecera NO se pincha. Se probó y hubo que revertirlo: con la cabecera
   fija había que bajar también el punto donde se clavan los th de las tablas,
   y el encabezado de cada tabla pasaba a flotar a media altura tapando una
   fila (un área entera desaparecía detrás). Las tablas del centro mandan: sus
   encabezados se clavan en el borde de la ventana, como siempre. Las barras
   laterales se apañan solas con --ws-top, que mide cuánto queda de cabecera EN
   PANTALLA y baja a 0 al scrollear. */

/* ---- Controles / botones ---- */
.form-select {
  padding:8px 12px; border:1px solid var(--line); border-radius:4px;
  font-size:14px; font-family:inherit; background:var(--card); color:var(--ink);
  transition:border-color .12s, box-shadow .12s;
}
.form-select:focus { border-color:var(--principal); box-shadow:var(--ring); outline:none; }
.btn {
  border:1px solid transparent; border-radius:4px; padding:8px 16px;
  font-size:13.5px; font-weight:500; font-family:inherit; letter-spacing:.01em;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:all .12s;
}
.btn-primary { background:var(--principal-ink); color:var(--btn-ink); }
.btn-primary:hover { background:var(--principal-hover); }
.btn-sec { background:var(--card); color:var(--ink); border-color:var(--line); }
.btn-sec:hover { background:var(--hover-2); }

/* ---- Tabs ----
   Como grupo de píldoras sobre fondo gris era el elemento con más relieve de
   la pantalla, y encima competía con el switch de nivel que tiene al lado.
   Como texto subrayado desaparece del camino y la activa se lee igual. */
.tabs, .sw-nivel { display:inline-flex; gap:2px; border-bottom:1px solid var(--line); }
.tabs { margin:16px 0 0; }
.tab-btn, .sw-nivel > button {
  border:0; background:transparent; padding:8px 14px; margin-bottom:-1px;
  font-size:13.5px; font-weight:500; font-family:inherit; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; transition:all .12s;
}
.tab-btn:hover, .sw-nivel > button:hover { color:var(--ink); }
/* La pestaña activa lleva el MISMO filete con gradiente que los tokens de la
   barra: las dos cosas eligen qué se mira, así que se marcan igual (ver «El
   filete» arriba). El borde inferior se queda transparente y el filete lo
   pone un ::after, porque un `border-bottom` no puede llevar un gradiente
   sin `border-image`, que además redondearía mal en el pixel. */
.tab-btn.active, .sw-nivel > button.active {
  color:var(--ink); font-weight:600; border-bottom-color:transparent; position:relative;
}
.tab-btn.active::after, .sw-nivel > button.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 0%, var(--principal) 60%, var(--principal-line) 100%);
}

/* El conmutador de NIVEL se dibuja como los tabs y no como un segmentado:
   las dos cosas son lo mismo —elegir qué se mira—, solo que una parte el
   informe por dominio (Gasto / Ingresos) y la otra por profundidad. Dibujarlas
   distinto decía que eran cosas de distinta clase, y no lo son.

   Va como CLASE aparte (`.sw-nivel`) y no poniéndole `.tab-btn` a los botones
   porque hay CUATRO `querySelector('.tab-btn.active')` sin acotar —base.html,
   nomina.html y dos en reporte.html— que preguntan qué PESTAÑA está abierta.
   Si los botones de nivel también fueran `.tab-btn`, ese selector podría
   devolver uno de ellos —sin `dataset.tab`— cuando el usuario tiene permiso
   de un solo dominio y la fila de pestañas se queda sin ninguno activo.

   Y el contenedor **ya no lleva `class="sw"`**. Al principio llevaba las dos y
   se ganaba por especificidad (`.sw.sw-nivel` le gana a `.sw`), pero eso
   obliga a RESETEAR una por una todas las propiedades que pone el segmentado,
   y se escaparon dos: el `border-radius:999px` del botón y el
   `background:var(--card)` del activo. El resultado era una pastilla blanca en
   forma de píldora con el filete de 2px curvándose a su alrededor: justo el
   relieve que se quería quitar. Heredar-y-tapar es frágil; no heredar no lo es.
   Ningún JS engancha por la clase `.sw` pelada —el de nivel busca el
   contenedor por id (`#nivel-sw`, `#cons-sw-nivel`) y los demás por `.sw-ic`,
   `.sw-l`, `.sw-vista`…—, así que quitarla no rompe nada.

   Regla para la próxima: una clase que redibuja un componente entero no se
   apila sobre la del componente, lo reemplaza.

   `white-space:nowrap` porque las etiquetas de nivel son frases —«Por qué
   varió y qué revisar»—, no palabras sueltas como Gasto o Ingresos. */
.sw-nivel > button { white-space:nowrap; }

/* El globo de «sin explicar» sobre «Bandeja de variaciones» (baAviso en
   tarjetas-y-bandeja.js): el contador de una bandeja de correo. Rojo porque es
   trabajo que reclama, y lo pone el JS solo si hay algo: con cero no se pinta.
   Va al lado del texto y no montado sobre la esquina, para no tapar la etiqueta
   ni el filete de la pestaña activa. */
.sw-nivel > button .sw-aviso {
  display:inline-block; min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  border-radius:9px; background:var(--rojo); color:#fff;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
  vertical-align:1px; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--card);
  animation:sw-aviso-in .25s ease-out;
}
@keyframes sw-aviso-in { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .sw-nivel > button .sw-aviso { animation:none; } }

/* La fila que junta los dos grupos de pestañas: dominio a la izquierda, nivel
   a la derecha. La hairline la pone LA FILA, no cada grupo: con el hueco de
   `space-between` en medio, dos filetes cortos se leen como una línea rota.
   El aire de ABAJO no es decorativo: debajo de esta fila viene siempre otra
   tira de controles —la materialidad y el conmutador de lectura— y sin
   separación las dos se leían como una sola barra de seis grupos de botones.
   Son dos decisiones distintas (qué lado miro / cómo lo miro) y el filete de
   la fila solo las separa si tiene aire por debajo. */
.tabsrow { display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:16px 0 18px; border-bottom:1px solid var(--line); }
.tabsrow > .tabs { margin-top:0; }
.tabsrow > .tabs, .tabsrow > .sw-nivel { border-bottom:0; }
/* «↓ Exportar informe»: botón fantasma en el extremo derecho de la fila, con el
   mismo cuerpo y padding vertical que las pestañas para caer en su línea base, y
   sin padding a la derecha para que el texto termine en el borde de las tarjetas
   KPI. Mismo peso que «Bandeja de variaciones» sin activar: gris, 500, sin filete. */
.tabsrow > .tabsrow-export {
  margin-left:auto; border:0; background:transparent; padding:8px 0 8px 14px;
  font-size:13.5px; font-weight:500; font-family:inherit; color:var(--muted);
  cursor:pointer; white-space:nowrap; transition:color .12s;
}
.tabsrow > .tabsrow-export:hover { color:var(--ink); }
.tabsrow > .tabsrow-export:focus-visible { outline:2px solid var(--principal-line); outline-offset:2px; border-radius:4px; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ---- Switch segmentado chico (vistas de panel, moneda) ----
   Tiene que leerse como UNA ranura con una pastilla dentro, y no como los
   tabs que suele tener al lado (.tabs / .tab-btn): esos son texto con un
   filete debajo, esto es una forma cerrada. Lo que los distingue:

   - La ranura se VE. Antes era `rgba(70,56,41,.05)`, un literal suelto que
     sobre el champan quedaba en #F4F1EE: dos puntos de diferencia con el
     papel, asi que el grupo no se leia como grupo y la opcion inactiva
     parecia texto flotando. Ahora es `var(--surco)`, que existe justamente
     para esto («fondo hundido de un conmutador o un segmentado»).
   - La pastilla es BLANCA y ya no necesita anillo: el escalon lo pone la
     ranura. El `box-shadow` que la recortaba era un marco dentro del
     informe, que es lo que no queremos.
   - Forma de pildora (999px) contra el rectangulo de los tabs.
   - Lo elegido va en celeste (`--principal-ink`), que es el color de la seleccion
     en toda la app.

   EXCEPCION: el conmutador de nivel (`.sw-nivel`) NO se dibuja asi, se
   dibuja como los tabs. Ver el bloque de arriba. Aqui quedan los controles
   que ajustan COMO se mira lo mismo (interco, moneda, EBITDA, lectura del
   puente), que es otra cosa que elegir que se mira. */
/* 29/09/2026: SIN CAJA («muy grosero»). Ni ranura ni pastilla blanca: las
   opciones son texto, y lo elegido se dice con la tinta, el peso y un tostado
   apenas visible detrás. Es lo mismo que hacía la ranura —distinguir la
   opción puesta— sin dibujar un objeto encima del informe. */
.sw { display:inline-flex; gap:2px; background:none; padding:0; border-radius:0; }
.sw button { border:0; background:transparent; border-radius:5px; padding:4px 9px;
  font-size:12.5px; font-weight:500; font-family:inherit; color:var(--muted); cursor:pointer;
  white-space:nowrap; transition:background .12s, color .12s; }
.sw button:hover:not(.active) { color:var(--ink); background:var(--hover); }
.sw button:focus-visible { border-radius:5px; }
.sw button.active { background:var(--hover-2); color:var(--ink); font-weight:600; }

/* ---- La materialidad con la que se mira (ver _materialidad.html) ----
   Una tira de controles, no un panel: decide CÓMO se lee la tabla que tiene
   debajo, así que va pegada a ella y con el peso tipográfico de un rótulo.
   Los escalones son botones de acción —se pulsan— y por eso el elegido va en
   caramelo, como todo lo elegido en la app. */
.mat { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); }

.mat-medida button:disabled { opacity:.35; cursor:default; }
/* Los escalones, como texto (29/09/2026): el mismo trato que `.sw`. Ya no hay
   uno relleno en verde oscuro, porque un bloque macizo era lo más pesado de la
   fila. El elegido se lee por la tinta y el tostado. */
.mat-escala { display:inline-flex; gap:2px; border:0; border-radius:0; background:none; }
.mat-b { border:0; background:transparent; cursor:pointer; border-radius:5px;
  padding:4px 8px; font-size:12px; font-family:inherit; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; transition:background .12s, color .12s; }
.mat-b:hover:not(.active) { background:var(--hover); color:var(--ink); }
.mat-b.active { background:var(--hover-2); color:var(--ink); font-weight:600; }
.mat-libre { display:inline-flex; align-items:center; gap:5px; }
.mat-input { width:72px; padding:3px 7px; border:0; border-bottom:1px solid var(--line);
  border-radius:0; background:transparent; color:var(--ink); font-family:inherit; font-size:12px;
  text-align:right; font-variant-numeric:tabular-nums; }
.mat-input:focus { border-bottom-color:var(--ink); box-shadow:none; outline:none; }
.mat-mon { font-size:11px; }
/* El resumen solo aparece cuando hay filtro puesto: sin filtro no hay nada
   que declarar, y una línea vacía permanente es justo lo que esta pantalla
   está intentando quitarse de encima. En pardo y no en caramelo: el caramelo
   es lo que se puede pulsar o está elegido, y esto es una consecuencia de lo
   elegido. El escalón activo ya lleva el color. */
.mat-info { font-size:12px; color:var(--pardo); font-variant-numeric:tabular-nums;
  cursor:help; }
/* ---- El filtro detrás de un icono (ver _materialidad.html) ----
   En reposo, un embudo y «Ver desde» en el gris de los rótulos: el mando, sin
   peso. Con umbral, el mismo sitio pasa a ser el chip del filtro puesto
   —tinta, semibold, tostado detrás— con su ✕ al lado. */
.mat-wrap { position:relative; }
.mat .mat-tok { font-size:12px; font-weight:500; color:var(--muted); padding:4px 8px;
  gap:6px; border-radius:5px; }
.mat .mat-tok:hover, .mat .mat-tok[aria-expanded="true"] { background:var(--hover); color:var(--ink); }
.mat-ico { width:13px; height:13px; flex:none; }
.mat.mat-on .mat-tok { background:var(--hover-2); color:var(--ink); font-weight:600;
  font-variant-numeric:tabular-nums; }
.mat-quitar { border:0; background:none; cursor:pointer; color:var(--muted);
  font-size:11px; line-height:1; padding:4px 5px; border-radius:5px; margin-left:-6px; }
.mat-quitar:hover { color:var(--ink); background:var(--hover); }
.mat-quitar[hidden] { display:none; }
.mat-panel { min-width:290px; padding:8px 8px 10px; }
.mat-fila { padding:3px 4px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.mat-panel .mat-escala { flex-wrap:wrap; }
/* La segunda condición (variación %) se separa por aire, no por raya. */
.mat-panel .mat-pct-t { margin-top:10px; }
.mat-fila-pct[hidden] { display:none; }

/* Gana sobre el `style.display` inline que escribe el árbol al desplegarse:
   son dos filtros distintos sobre la misma fila y el de materialidad manda. */
.mat-oculto { display:none !important; }

/* ---- Los puntos de color de Ingresos (02/10/2026; `_marca_pt.html`) ----
   Recordatorio de trabajo, no explicación: a la IZQUIERDA del nombre, dentro de la
   sangría y con ancho cero para no correr el texto. Sin color solo se ve al posarse
   en la fila; con color, siempre. Los dos tonos son de semáforo y no los de la
   variación (`--rojo` es «desvío al alza»): esto no dice nada de las cifras. */
:root { --mk-amarillo:#E2A72E; --mk-rojo:#C9473C; }
.mk { display:inline-block; position:relative; width:0; height:0; vertical-align:middle; }
.mk-pt { display:inline-block; box-sizing:border-box; width:9px; height:9px; padding:0;
  border-radius:50%; border:1.5px solid var(--muted); background:none; cursor:pointer;
  vertical-align:middle; }
.mk .mk-pt { position:absolute; left:-17px; top:-5px; opacity:0; transition:opacity .12s; }
/* Área de clic más grande que el punto, sin agrandarlo. */
.mk .mk-pt::before { content:""; position:absolute; inset:-6px; }
.arbol tr:hover .mk .mk-pt, .mk .mk-pt:focus-visible { opacity:.55; }
.mk .mk-pt:hover { opacity:1; }
.mk .mk-pt:focus-visible { outline:none; box-shadow:var(--ring); }
.mk-pt.mk-amarillo { background:var(--mk-amarillo); border-color:var(--mk-amarillo); }
.mk-pt.mk-rojo { background:var(--mk-rojo); border-color:var(--mk-rojo); }
.mk .mk-pt.mk-amarillo, .mk .mk-pt.mk-rojo,
.arbol tr:hover .mk .mk-pt.mk-amarillo, .arbol tr:hover .mk .mk-pt.mk-rojo { opacity:1; }
@media (prefers-reduced-motion: reduce) { .mk .mk-pt { transition:none; } }
.mk-oculto { display:none !important; }

/* «nuevo» / «baja» en la celda del Var % (tag `pct_o_estado`): palabra y no número,
   en cursiva para que no se lea como una cifra más. El color lo hereda de la celda,
   el mismo de la variación de al lado. */
.var-est { font-style:italic; font-size:.92em; }

/* El selector: uno para toda la tabla, fijo bajo el punto pulsado. */
.mk-pop { position:fixed; z-index:60; display:none; width:236px; padding:8px;
  background:var(--card); border:1px solid var(--card-borde, var(--line)); border-radius:8px;
  box-shadow:0 6px 20px rgba(var(--ink-rgb, 60,40,20), .12); font-size:12.5px; }
.mk-pop.show { display:block; }
.mk-pop-fila { display:flex; gap:4px; margin-bottom:7px; }
.mk-op { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; font:inherit;
  font-size:12px; color:var(--ink); background:none; border:1px solid var(--line);
  border-radius:999px; cursor:pointer; }
.mk-op:hover { border-color:var(--principal-line); }
.mk-op.active { border-color:var(--ink); font-weight:600; }
.mk-op-quitar { margin-left:auto; color:var(--muted); }
.mk-op[hidden] { display:none; }
.mk-rec { box-sizing:border-box; width:100%; padding:5px 7px; font:inherit; font-size:12.5px;
  border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--card); }
.mk-rec:focus { outline:none; box-shadow:var(--ring); }
.mk-err { margin:6px 0 0; color:var(--rojo); font-size:11.5px; }
.mk-err[hidden] { display:none; }

/* El filtro, junto a «Ver desde»: un punto por color con cuántas líneas lleva. En
   Gasto la tira es de dos extremos (filtro | conmutador), así que los dos filtros van
   juntos en `.mk-junto` para no quedar repartidos por el medio. */
.mk-junto { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mk-filtro { display:inline-flex; gap:2px; }
.mk-filtro[hidden], .mk-f[hidden] { display:none; }
.mk-f { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; font:inherit;
  font-size:12px; color:var(--muted); background:none; border:1px solid transparent;
  border-radius:999px; cursor:pointer; }
.mk-f:hover { color:var(--ink); border-color:var(--line); }
.mk-f.active { color:var(--ink); font-weight:600; border-color:var(--ink); }
.mk-f:focus-visible { outline:none; box-shadow:var(--ring); }

/* La tira que junta la materialidad con el expandir/colapsar: las dos dicen
   cuánto árbol se quiere ver, una por tamaño y otra por nivel. */
.mat-fila { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px; }
.mat-fila .btn { padding:5px 12px; font-size:12.5px; }
.mat-fila-sep { width:1px; align-self:stretch; background:var(--line); margin:0 2px; }

/* ---- La leyenda, al pasar el mouse ----
   Cómo se lee una tabla se aprende el primer día y se cobra los otros
   doscientos. Así que no se deja escrita: se deja DISPONIBLE. Un punto de
   información pegado al título del bloque que explica, y la tarjeta aparece
   al posarse encima. Flota, así que no empuja nada hacia abajo, y mientras
   nadie la pide la pantalla es solo cifras.

   Es un punto de CONTEXTO, no una acción: por eso al encenderse va celeste
   y no caramelo, y el color está en el filete, no en el relleno.

   Contrato del marcado — un <span> y no un <details>, porque el CSS no
   puede abrir un <details> al pasar por encima:

     <span class="ayu" tabindex="0" role="note" aria-label="Cómo se lee">
       <span class="ayu-c"><span class="ayu-p">...</span></span>
     </span>

   La «i» la pone el CSS: quien lo usa escribe el texto, no el dibujo.
   `tabindex` es lo que hace que también se abra con el teclado y con un
   toque en pantalla táctil (donde no hay hover, el toque da el foco).
   `.ayu-dcha` ancla la tarjeta por la derecha, para los que viven cerca del
   borde de la pantalla. */
.ayu { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; flex:none; vertical-align:baseline; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font:700 10px/1 var(--ff); font-style:normal; letter-spacing:0; text-transform:none;
  margin-left:5px; cursor:help; transition:color .12s, border-color .12s; }
.ayu::before { content:"i"; }
.ayu:hover, .ayu:focus-visible { color:var(--laton-ink); border-color:var(--laton-line);
  outline:none; }
.ayu-c { position:absolute; z-index:60; top:calc(100% + 8px); left:-7px;
  width:330px; max-width:78vw; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radio);
  box-shadow:0 8px 26px rgba(var(--ink-rgb),.16); padding:12px 14px;
  opacity:0; visibility:hidden; transform:translateY(-3px); pointer-events:none;
  transition:opacity .12s, transform .12s, visibility .12s; }
/* El puente sobre el hueco: sin él, mover el mouse del punto a la tarjeta la
   cerraría a mitad de camino. */
.ayu-c::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.ayu:hover > .ayu-c, .ayu:focus-within > .ayu-c {
  opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.ayu-dcha > .ayu-c { left:auto; right:-7px; }
/* Los párrafos de la tarjeta son <span class="ayu-p">, no <p>: el punto vive
   muchas veces DENTRO de un párrafo o de un título, y un <p> anidado hace que
   el navegador cierre el de fuera y escupa el texto de la tarjeta en la
   página. Un span se puede anidar en cualquier sitio y con display:block se
   ve igual. */
.ayu-c .ayu-p { display:block; margin:0 0 8px; font-size:12.5px; line-height:1.55;
  color:var(--pardo); font-weight:400; font-style:normal; letter-spacing:0;
  text-transform:none; text-align:left; }
.ayu-c .ayu-p:last-child { margin-bottom:0; }
.ayu-c strong { font-weight:600; color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .ayu-c { transition:none; transform:none; } }

/* ---- Tarjetas / paneles ---- */
/* Las tarjetas dejan de ser tarjetas: son párrafos de una misma hoja. Lo que
   las separa es el aire y una hairline, no una caja con sombra. */
.tarjetas { display:flex; gap:0; margin:18px 0; flex-wrap:wrap; }
.tarjeta {
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:4px 22px 4px 0; flex:1; min-width:200px;
}
.tarjeta + .tarjeta { border-left:1px solid var(--line); padding-left:22px; }
.tarjeta .l {
  font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.09em; margin-bottom:6px;
}
.tarjeta .n {
  font-size:25px; font-weight:600; letter-spacing:-.022em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.panel {
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:16px 18px; margin-bottom:20px;
}

/* ---- Tablas ---- */
.tabla-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { padding:9px 14px; border-bottom:1px solid var(--line-soft); text-align:left; white-space:nowrap; }
th {
  background:var(--card); position:sticky; top:0; z-index:1;
  font-size:10.5px; font-weight:500; color:var(--muted);
  text-transform:uppercase; letter-spacing:.11em;
  border-bottom:1px solid var(--line);
}
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr:hover td { background:var(--hover); }
tr.subtotal td { border-top:1px solid var(--line); font-weight:600; }
tr.total td { border-top:1px solid var(--ink); border-bottom:0; font-weight:600; font-size:13.5px; }

/* ---- La línea de fila, sugerida ----
   No cambia QUÉ filas llevan línea: cambia dónde empieza y dónde termina.
   `border-image` es lo único que respeta el `border-collapse:collapse` de
   estas tablas, y por eso el degradado se declara por CELDA: la primera
   enciende la línea y la última la apaga, las de en medio siguen con su
   borde plano. Como el color es el mismo a ojo, el empalme no se ve.

   Va contra `tbody` y no contra `td` a secas para no tocar lo que sí es un
   corte: el filete del `thead`, el del `tfoot` y los de subtotal y total.
   `border-image` pinta los CUATRO lados, así que se queda fuera toda tabla
   con retícula vertical (`.pe-grid`, `.pe-mtx`), donde borraría el borde
   derecho de la celda. La especificidad es alta a propósito: los parciales
   del centro inyectan su hoja DESPUÉS de ésta. */
table:not(.pe-grid):not(.pe-mtx) > tbody > tr:not(.total):not(.subtotal) > td:first-child {
  border-image:var(--sep-ini) 1;
}
table:not(.pe-grid):not(.pe-mtx) > tbody > tr:not(.total):not(.subtotal) > td:last-child {
  border-image:var(--sep-fin) 1;
}
/* Una sola columna: la misma celda tiene que encender y apagar. */
table:not(.pe-grid):not(.pe-mtx) > tbody > tr:not(.total):not(.subtotal) > td:only-child {
  border-image:var(--sep-linea) 1;
}

/* ---- Alertas / conciliacion / P&L ---- */
.alerta { background:var(--rojo-tint); border:1px solid var(--rojo-line); color:var(--rojo);
  padding:12px 16px; border-radius:4px; font-size:13.5px; }
.alerta-ok { background:var(--principal-tint); border-color:var(--principal-line); color:var(--principal-ink); }
.badge-ok, .badge-warn {
  display:inline-block; padding:2px 10px; border-radius:4px; margin-left:6px;
  font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}
.badge-ok { background:var(--principal-tint); color:var(--principal-ink); }
.badge-warn { background:var(--rojo-tint); color:var(--rojo); }
.rec-ok { border-left:3px solid var(--principal); }
.rec-warn { border-left:3px solid var(--rojo); }
.rec-linea { display:flex; justify-content:space-between; padding:8px 0; max-width:520px;
  border-bottom:1px dashed var(--line); font-variant-numeric:tabular-nums; }
.rec-dif { border-bottom:0; font-size:15px; }
.rec-nota { color:var(--muted); font-size:12px; font-weight:400; margin:8px 0 0; }
/* Conciliación reducida a un sello: el mes que cuadra no merece un panel entero,
   solo la confirmación de que cuadra. El cuerpo sigue ahí, dentro del <details>,
   y la plantilla lo manda abierto cuando NO cuadra — que es cuando hay que mirarlo. */
.conc { margin:14px 0; }
.conc > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:8px; padding:7px 14px; border-radius:4px; border:1px solid var(--line);
  font-size:12.5px; font-variant-numeric:tabular-nums; }
.conc > summary::-webkit-details-marker { display:none; }
.conc > summary:focus-visible { outline:none; box-shadow:var(--ring); }
.conc-ok > summary { background:var(--principal-tint); border-color:var(--principal-line); color:var(--pos); }
.conc-warn > summary { background:var(--rojo-tint); border-color:var(--rojo-line); color:var(--neg); }
.conc-dot { width:8px; height:8px; border-radius:50%; flex:none; background:currentColor; }
.conc-et { font-weight:600; }
.conc-sub { color:var(--muted); }
.conc-mas { color:var(--muted); margin-left:2px; }
.conc-mas::before { content:"Ver detalle"; }
.conc[open] .conc-mas::before { content:"Ocultar"; }
.conc-cuerpo { margin-top:10px; }

/* El signo del cuadre. Un punto de color decía «pasa algo» pero no QUÉ, y en
   una app llena de puntos de color no se distinguía de un estado más. Acá el
   dibujo ES la pregunta: «=» cuadra, «≠» no cuadra. Se lee sin leyenda, sin
   color y sin tooltip —que es el requisito real: quien no distingue los dos
   tonos tiene que poder saberlo igual—, y el color solo confirma.
   Los tonos son los `-ink`, no los de relleno: el glifo es texto de 12px
   sobre color, y los de relleno no llegan al contraste que eso pide. */
.conc-sig {
  width:19px; height:19px; border-radius:50%; flex:none; color:var(--btn-ink);
  display:inline-grid; place-items:center; font-size:12px; font-weight:700;
  line-height:1; font-family:var(--ff);
}
.conc-ok .conc-sig { background:var(--principal-ink); }
.conc-warn .conc-sig { background:var(--rojo-ink); }

/* ==== El sello de conciliación, fijo abajo a la izquierda ====
   No es contenido de una pestaña ni una decisión del informe: es un HECHO
   sobre el informe entero —«lo que estás mirando cuadra con el libro»— y por
   eso no compite por sitio con nada. Vive en la esquina, dentro del margen,
   encima de la página, y no se mueve ni al cambiar de pestaña ni al
   scrollear.

   Cuando CUADRA es solo el signo: no hay nada que hacer con esa información
   más que confiar en ella, y un pill de 220px repitiendo «Cuadra con
   NetSuite» en todas las pantallas es ruido permanente. Al pasar por encima
   —o al abrir— dice el resto. Cuando NO cuadra, al revés: el texto va
   siempre, y la plantilla lo manda ya abierto, porque ahí sí hay trabajo.

   El cuerpo se abre HACIA ARRIBA por lo obvio: desde abajo, hacia abajo no
   hay sitio. */
.conc-fijo { position:fixed; left:16px; bottom:16px; z-index:70; }
.conc-fijo[hidden] { display:none; }
.conc-fijo .conc { margin:0; position:relative; }
.conc-fijo .conc[hidden] { display:none; }
/* Sin `background`: el tinte lo sigue poniendo `.conc-ok` / `.conc-warn`, que
   es lo que dice el estado. Acá solo cambia la forma —pastilla— y la sombra,
   que es la que lo despega de la página por la que flota. */
.conc-fijo .conc > summary {
  padding:5px 12px 5px 5px; gap:7px; border-radius:999px; font-size:12px;
  box-shadow:var(--flota);
}
/* Colapsado = el signo y nada más. El fondo tintado desaparece con el texto:
   una pastilla de color de 29px en una esquina se lee como un botón, y esto
   no lo es. */
.conc-fijo .conc-ok:not([open]):not(:hover):not(:focus-within) > summary {
  padding:5px; border-color:transparent; background:var(--card);
}
.conc-fijo .conc-ok:not([open]):not(:hover):not(:focus-within) .conc-et,
.conc-fijo .conc-ok:not([open]):not(:hover):not(:focus-within) .conc-sub,
.conc-fijo .conc-ok:not([open]):not(:hover):not(:focus-within) .conc-mas {
  display:none;
}
.conc-fijo .conc-cuerpo {
  position:absolute; bottom:calc(100% + 8px); left:0; z-index:70; margin:0;
  width:min(720px, 92vw); max-height:70vh; overflow:auto; padding:12px;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--flota);
}
/* Dentro del desplegable el cuerpo ya no necesita su propia caja: la caja es
   el desplegable. Queda el filete de color, que es lo que dice si cuadra. */
.conc-fijo .conc-cuerpo > .panel {
  border:0; border-radius:0; box-shadow:none; padding:0 0 0 12px; margin:0;
}
table.pl { max-width:520px; }
table.pl td { border-bottom:1px solid var(--line-soft); }
.up { color:var(--neg); font-weight:600; }
.down { color:var(--pos); font-weight:600; }
/* ---- Escala de la variación ----
   Tres tramos (ver `clase_var` en reporte_extras). Antes toda variación se
   dibujaba igual: un −0,7% y un +887% que mueve 323.000 pesaban lo mismo, y la
   pantalla contaba las noticias y el ruido con el mismo tono de voz.
   Sube el PESO y el CUERPO, no el color: el color ya está ocupado diciendo el
   sentido, y si además dijera la magnitud haría dos trabajos y ninguno claro.
   El escalón grave del tono se reserva al tramo de arriba, donde la cifra tiene
   que aguantar que la lean desde lejos. */
.v-alta { font-weight:700; }
.v-muy-alta { font-weight:700; font-size:15px; letter-spacing:-.015em; }
.up.v-muy-alta { color:var(--rojo-ink); }

/* ---- Puente de conciliación (por qué varía el mes): base -> variaciones -> real ---- */
.pt { max-width:900px; font-variant-numeric:tabular-nums; }
/* Montado como LECTURA de un conmutador la tarjeta es `.cp-panel`, que no acolcha
   —su contenido suele traer su propia cabecera— y la cadena quedaría pegada al
   borde. Suelto va dentro de un `.panel`, que ya acolcha, y esta clase no aparece. */
.pt-encaje { padding:14px 18px; }
.pt-fila { display:flex; align-items:center; gap:14px; padding:7px 4px;
  border-bottom:1px dashed var(--line-soft); font-size:13px; }
/* Fila clickeable del puente: abre el detalle del concepto (dos meses). */
.pt-fila.pt-clic { cursor:pointer; border-radius:6px; }
.pt-fila.pt-clic:hover { background:var(--hover); }
/* Fila de proveedor clickeable del árbol "Gasto por área": mismo drill-down.
   `ig-det-clic` es su gemela en el árbol de ingresos (la línea de artículo): son
   la misma affordance —la hoja del árbol abre su detalle— y se pintan igual. */
.arbol tr.prov-clic, .arbol tr.ig-det-clic { cursor:pointer; }
.arbol tr.prov-clic:hover td, .arbol tr.ig-det-clic:hover td { background:var(--hover-2); }
.pt-nombre { flex:1.5; min-width:0; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-meta { color:var(--muted); font-weight:400; font-size:11.5px; margin-left:6px; }
.pt-bar { flex:1; height:5px; border-radius:999px; background:var(--line-soft);
  overflow:hidden; min-width:60px; }
.pt-bar > span { display:block; height:100%; border-radius:999px; }
.pt-bar-rojo { background:var(--neg-fill); }
.pt-bar-celeste { background:var(--pos-fill); }
.pt-monto { min-width:120px; text-align:right; white-space:nowrap;
font-weight:600; }
.pt-sec { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:12px; padding:0 4px 5px; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); }
.pt-extremo { border-bottom:0; padding:10px 4px; }
.pt-extremo .pt-nombre { font-size:13.5px; }
.pt-extremo .pt-monto { font-size:16px; }
.pt-base { border-bottom:1px solid var(--line); }
.pt-otras { color:var(--pardo); margin-top:6px; }
.pt-total { border-top:1px solid var(--ink);
  margin-top:8px; padding-left:10px; padding-right:10px; }

/* ---- Cascada por corte (nivel P&L): el mes anterior, las variaciones y el mes ----
   Gráfico de columnas flotantes. Las posiciones las calcula la vista (`_cascada`)
   en % sobre el alto del lienzo, así que acá no hay ninguna aritmética: el CSS
   solo pinta.

   Dos filas hermanas —el lienzo y los rótulos— con el MISMO número de hijos en
   flex, que es como se alinean sin tabla (igual que `.rx-bars` + `.rx-bar-labs`).
   Las columnas NO llevan `gap`: el hilo que las une se posiciona en % del ancho de
   su columna, y con un hueco en píxeles de por medio no llegaría a la vecina. La
   separación la pone el ancho de la barra (60% centrado dentro de la columna). */
/* El lienzo mide lo que hace falta para comparar variaciones entre sí, que es la
   única pregunta que este gráfico contesta: no hay nada que ganar con más alto y
   sí mucho que perder —el trabajo de verdad es el árbol que viene debajo, y este
   panel es lo primero que se ve al abrir la pestaña—. A 248px la cascada empujaba
   la primera fila de la tabla fuera de la pantalla en un portátil. */
.wf-panel { --wf-alto:136px; }
/* La cabecera es UNA línea a cada lado. La prosa que había bajo el título repetía
   lo que dice el título y se fue detrás del punto de ayuda (la misma regla que en
   el resto de la app: la cifra se queda, la interpretación se guarda); y el rótulo
   del total va delante de su cifra en vez de encima, que es lo que hacía a la
   derecha más alta que a la izquierda. */
.wf-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.wf-tot { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.wf-tot-l { font-size:10.5px; letter-spacing:.07em; margin-right:7px;
  text-transform:uppercase; color:var(--muted); }
.wf-tot-n { font-size:19px; font-weight:700; letter-spacing:-.015em; }
.wf-tot-p { font-size:12.5px; color:var(--pardo); margin-left:5px; }

.wf { position:relative; display:flex; align-items:stretch; height:var(--wf-alto);
  margin:0 2px; }
/* El cero solo se dibuja cuando cae dentro de la escala. Si no está, el pie dice
   desde dónde arranca el lienzo: una escala cortada tiene que declararse. */
.wf-cero { position:absolute; left:0; right:0; height:0;
  border-top:1px solid var(--line); }
.wf-col { position:relative; flex:1 1 0; min-width:0; }
/* La barra (el `top` y el `height` los pone la plantilla) y el hilo que une el
   acumulado de una columna con el arranque de la siguiente: del borde derecho de
   esta barra (80%) al izquierdo de la vecina (120%). */
.wf-b { position:absolute; left:31%; width:38%; border-radius:2px; display:block;
  background:var(--muted); }
.wf-link { position:absolute; left:69%; right:-31%; height:0;
  border-top:1px dashed var(--line); }
/* LIVIANA (28/09/2026: «el bridge me rompe un poco la visualización»). Los dos
   bloques oscuros de los extremos eran lo que más pesaba de toda la pantalla y
   son lo que menos informa —el total ya está en la tira de cifras—. Van pálidos,
   las barras más finas y el lienzo más bajo: queda la silueta de la cadena y lo
   que salta son las variaciones. */
.wf-ancla .wf-b { background:var(--chart-ancla); }
.wf-pos .wf-b { background:var(--pos-fill); }
.wf-neg .wf-b { background:var(--neg-fill); }
.wf-otras .wf-b { background:var(--hueco); }
/* Oscurecer, no aclarar: aclarado, el rojo pastel se volvía salmón chillón. */
.wf-col:hover .wf-b { filter:brightness(.92); }

/* La cifra de cada columna: encima si la barra sube, debajo si baja, para que
   nunca tape su propia barra ni la línea del cero. */
.wf-v { position:absolute; left:-6%; right:-6%; text-align:center;
  font-size:10.5px; font-weight:600; white-space:nowrap; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--pardo); pointer-events:none; }
.wf-v.es-arriba { bottom:calc(100% - var(--y)); padding-bottom:4px; }
.wf-v.es-abajo { top:calc(var(--y) + var(--h)); padding-top:4px; }
.wf-ancla .wf-v { font-size:12.5px; color:var(--ink); }
.wf-pos .wf-v { color:var(--pos); }
.wf-neg .wf-v { color:var(--neg); }

/* Los rótulos. Dos líneas como mucho: con doce columnas no hay ancho para más, y
   el nombre entero vive en el `title` de la columna. */
.wf-labs { display:flex; align-items:flex-start; margin:8px 2px 0;
  border-top:1px solid var(--line); padding-top:7px; }
.wf-lab { flex:1 1 0; min-width:0; text-align:center; padding:0 3px;
  font-size:10.5px; line-height:1.25; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.wf-lab.es-ancla { color:var(--ink); font-weight:600; }
.wf-pie { margin:10px 0 0; font-size:11.5px; color:var(--muted); line-height:1.5; }
.wf-pie strong { color:var(--pardo); font-weight:600; }

/* ---- La columna elegida ----
   Una columna de tramo es un BOTÓN: pulsarla acota «qué revisar» a ese corte, y
   no abre nada (ver `cascada.js` y la nota de `_cascada.html`). Las anclas —el
   mes anterior y el mes— siguen siendo <div>: no son un corte. El reset es el de
   siempre para un botón que no quiere parecerlo, y el foco sí se ve, porque esto
   se recorre con el teclado como el resto del cierre. */
button.wf-col { appearance:none; -webkit-appearance:none; background:none;
  border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:inherit;
  cursor:pointer; }
button.wf-col:focus-visible { outline:2px solid var(--laton); outline-offset:3px;
  border-radius:3px; }
/* Elegida: las demás se APAGAN y esta se queda entera. Apagar en vez de pintar la
   elegida deja la silueta de la cascada intacta —se sigue leyendo la cadena, con
   una columna en foco— y no estrena ningún color. Las anclas no se apagan: son los
   extremos de la cadena y sin ellas el gráfico deja de ser un puente. */
.wf-col[data-corte].es-apagada { opacity:.32; }
/* Y el rótulo lleva el filete celeste, el mismo material y el mismo sitio que el
   lado abierto de «qué revisar»: el celeste va en el FILETE, nunca en el relleno.
   Con `box-shadow` y no con `::after` porque el rótulo recorta a dos líneas
   (`overflow:hidden`) y se comería un pseudo-elemento por debajo. */
.wf-lab.es-sel { color:var(--ink); font-weight:600;
  box-shadow:0 3px 0 -1px var(--laton); }

/* Estrecho: doce columnas de 40px no son un gráfico. Se dejan respirar en
   horizontal antes que aplastarlas, y el lienzo y los rótulos scrollean JUNTOS
   —dentro del mismo contenedor— o dejarían de estar alineados, que es todo lo
   que sostiene este dibujo. */
@media (max-width:860px) {
  .wf-scroll { overflow-x:auto; }
  .wf-scroll > .wf, .wf-scroll > .wf-labs { min-width:660px; }
}

/* ---- Escala de color para barras de avance ---- */
.av-ok { background:var(--pos-fill); }
.av-margen { background:#DCCB9E; }
.av-alto { background:#E5BC98; }
.av-severo { background:var(--neg-fill); }
.av-na { background:var(--line); }

/* ---- Arbol comparacion ---- */
.arbol tr[data-toggle] { cursor:pointer; }
/* La escala del despliegue (ver `--niv-*` en el `:root`). Va por SANGRÍA y no
   por clase de nivel a propósito: `lvl-cuenta` cuelga del área en la nómina
   y del bloque en el de terceros — es la misma clase a dos profundidades
   distintas, y lo que el ojo lee es la sangría, no el nombre del nivel.
   `:has()` sobre la primera celda es lo que permite atarlo a lo que se ve.
   El tono va en el `<tr>` y las celdas quedan transparentes: así el hover
   translúcido y las filas con superficie propia —`fila-fuera`, `fila-gap`,
   `fila-ajuste`, `fila-nomina`, `lvl-bloque`, todas en `--bg`— siguen
   pintando encima sin repetir el tono en cada regla.
   La escala sube hacia el blanco según se baja en el árbol: ver `--niv-*`.
   Quien quiera anclar una columna (la primera celda de la vista Q×P de
   ingresos) tiene que REPETIR estos mismos tonos en la celda, porque ahí el
   fondo debe ser opaco; lo que no puede hacer es inventarse uno —un
   `--card` por defecto pinta la celda de blanco mientras el resto de su fila
   se queda en el papel, y el nivel 0 sale partido en dos. */
.arbol tbody tr { background:transparent; }
.arbol tbody tr:has(> td.ind1) { background:var(--niv-1); }
.arbol tbody tr:has(> td.ind2) { background:var(--niv-2); }
.arbol tbody tr:has(> td.ind3) { background:var(--niv-3); }
.arbol tbody tr:has(> td.ind4),
.arbol tbody tr:has(> td.ind5),
.arbol tbody tr:has(> td.ind6) { background:var(--niv-4); }
.arbol .lvl-grupo td { font-weight:600; border-top:1px solid var(--line); }
.arbol .lvl-cuenta td { color:var(--pardo); }
.arbol .lvl-prov td { font-size:12.5px; color:var(--muted); }
/* Nivel SOCIEDAD del árbol de ingresos del consolidado: se lee como una
   dimensión, no como una cifra más, así que va en el tono de marca y no hereda
   el gris del nivel que ocupa. */
.arbol .lvl-soc td:first-child { color:var(--pardo); }
.arbol .lvl-asiento td { font-size:12px; color:var(--muted); }
.arbol tr:hover td { background:var(--hover); }
.arbol tr.grupo-presu td { background:var(--principal-tint); }
.arbol .ind1 { padding-left:32px; }
.arbol .ind2 { padding-left:58px; }
.arbol .ind3 { padding-left:84px; }
.arbol .ind4 { padding-left:110px; }
.arbol .ind5 { padding-left:136px; }
.arbol .ind6 { padding-left:162px; }
/* La línea del árbol arranca donde arranca el nombre. Cuanto más hondo el
   nivel, más tarde empieza y menos pesa: un renglón de detalle se separa del
   de al lado, pero no vuelve a dibujar el ancho completo de la tabla una vez
   por fila. No hace falta pelear especificidad con la regla de arriba —
   basta con redefinir aquí el token que ella usa, porque `var()` se resuelve
   en la celda. */
.arbol .ind1 { --sep-fade:min(140px,17%); }
.arbol .ind2 { --sep-fade:min(165px,19%); }
/* Y del tercer nivel para abajo, NINGUNA. Son las hojas —proveedor, sociedad,
   asiento, persona, concepto— y ya van juntas: comparten la banda de fondo
   del nivel y la sangría. Una línea entre dos de ellas no separa nada que no
   estuviera separado, y es la que convertía el árbol en papel milimetrado.
   El color se apaga en la FILA entera, no sólo en la celda del nombre: si se
   quitara nada más el arranque, el degradado empalmaría a media fila con un
   borde opaco y se vería el corte. Transparente y no `border:0` para que la
   fila no encoja un píxel al perder la línea. */
.arbol tbody tr:has(> td.ind3) > td,
.arbol tbody tr:has(> td.ind4) > td,
.arbol tbody tr:has(> td.ind5) > td,
.arbol tbody tr:has(> td.ind6) > td { border-bottom-color:transparent; }
/* y con el token en transparente se apaga también el degradado de los
   extremos, sin tener que pelearle la especificidad a la regla de arriba */
.arbol tbody tr:has(> td.ind3),
.arbol tbody tr:has(> td.ind4),
.arbol tbody tr:has(> td.ind5),
.arbol tbody tr:has(> td.ind6) { --sep:transparent; }
.caret { display:inline-block; width:12px; font-size:10px; color:var(--muted); transition:transform .12s; }
tr.open > td .caret { transform:rotate(90deg); }
/* Nivel BLOQUE: dentro de un centro de costo, «Nómina» y «Proveedores y
   terceros». No es una partida más —es la primera pregunta al abrir un área:
   si la variación es gente o es un tercero—, así que se lee como un rótulo con
   su subtotal (etiqueta en versalitas y filete lateral) y no como un concepto.
   Mismo filete que la fila de nómina del árbol contra presupuesto, para que la
   nómina se marque igual en las dos vistas. */
.arbol .lvl-bloque td:first-child { box-shadow:inset 3px 0 0 var(--line); }
.arbol tr.lvl-bloque:hover td { background:var(--hover); }
.blq-t {font-size:10.5px;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
/* Nómina vs terceros dentro del bloque: se distingue sin icono —el único icono
   de la fila es el botón del sub-libro—. La gente lleva filete lleno y rótulo
   en el tono del texto secundario; los terceros, filete hairline y rótulo
   terciario. Es la misma distinción que en la fila de nómina del árbol contra
   presupuesto, así que la nómina se marca igual en las dos vistas. */
.arbol .lvl-bloque-nomina td:first-child { box-shadow:inset 3px 0 0 var(--muted); }
.arbol .lvl-bloque-nomina .blq-t { color:var(--pardo); }
/* Fila de nómina dentro del árbol contra presupuesto. NO es un proveedor: en
   el área se concilia por cuenta contable contra el sub-libro. Antes se
   distinguía solo por la cursiva (y unos guiones largos metidos en el
   nombre), así que se leía como un proveedor más — encima uno que no se podía
   abrir. Se marca con fondo, hairline propia y etiqueta (el icono se retiró:
   repetía el dibujo del botón del sub-libro que ya está en la misma fila). */
.arbol .fila-nomina td:first-child { box-shadow:inset 3px 0 0 var(--muted); }
.arbol tr.fila-nomina:hover td { background:var(--hover); }
.fn-badge { display:inline-block; margin-left:7px; padding:0 7px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  vertical-align:1px; white-space:nowrap; }
.arbol .fila-nopresup td { color:var(--ambar); }
/* ---- Segunda lectura del bloque de nómina: país -> persona -> concepto ----
   El PAÍS ocupa el mismo escalón que la cuenta contable de la otra lectura (es su
   alternativa, no un nivel más), así que se lee como un rótulo —igual que el
   bloque— pero un punto más liviano: filete hairline en vez de lleno. */
.arbol .lvl-pais td:first-child { box-shadow:inset 3px 0 0 var(--line); }
.cnc-t {font-size:11px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--pardo); }
.cnc-ctas { margin-left:7px; padding:0 7px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); color:var(--muted); font-size:9.5px; font-weight:600;
  letter-spacing:.04em; vertical-align:1px; white-space:nowrap; cursor:help; }
/* «Esto ya está explicado»: la nota escrita, colgada de la fila (ver _ex_icono.html).
   Va en VERDE porque es lo único de esta familia que informa de algo HECHO —los otros
   iconos de la fila invitan a abrir algo—, y con `cursor:help` porque se lee al
   posarse, no se clica. Sin `opacity` de reposo, al revés que los demás: una partida
   contestada tiene que verse de un barrido, sin ir fila por fila. */
.ex-nota-ico { display:inline-flex; align-items:center; gap:2px; margin-left:5px;
  color:var(--principal-ink); vertical-align:middle; line-height:1; cursor:help; }
.ex-nota-ico:focus-visible { outline:none; box-shadow:var(--ring); border-radius:4px; }
/* Dos explicaciones (una por eje) son un hecho de la fila, no un adorno: se dicen.
   Cuenta solo las de ESTE mes (ver `ex_ico`): el antecedente no es una respuesta más. */
.ex-nota-n { font-size:9px; font-weight:700; line-height:1; }
/* Lo único escrito es del mes pasado: apagado, no celeste. El celeste de esta familia
   significa «hecho», y una nota de hace un mes no contesta la variación de ahora
   —al contrario, muchas veces es su causa—. Con el tono apagado la fila sigue
   pidiendo respuesta en un barrido, y el antecedente está ahí para quien se pose. */
.ex-nota-ico.solo-antes { color:var(--muted); }

/* --- La tarjeta que se abre al posarse sobre el icono ------------------------
   Reemplaza al `title` del sistema, que pintaba un bloque gris con el motivo y el
   comentario en el mismo párrafo: ni el estilo de la app ni jerarquía ninguna.
   Es una TARJETA de la casa (fondo, hairline y sombra de `.panel`) y dentro repite
   la jerarquía de la cita de la barra lateral: motivo arriba en celeste, la nota como
   prosa legible y la firma apagada al pie. Misma pregunta, mismo dibujo.
   `position:fixed` no es capricho: el árbol vive dentro de `.tabla-wrap`, que tiene
   `overflow-x:auto`, y ahí dentro cualquier panel absoluto se recorta. Fija escapa
   del recorte, y el ayudante de abajo la coloca. */
#ex-nota-pop { position:fixed; z-index:80; max-width:340px; padding:11px 13px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radio);
  box-shadow:0 2px 6px rgba(var(--ink-rgb),.08), 0 10px 28px rgba(var(--ink-rgb),.10);
  font-size:12px; line-height:1.5; color:var(--ink);
  opacity:0; pointer-events:none; transition:opacity .12s; }
#ex-nota-pop.abierta { opacity:1; }
/* Una explicación por bloque, con el mismo filete a la izquierda que `.pm-x`: es la
   marca de «esto es una cita», y separa las dos lecturas cuando hay dos. */
.exn-e { border-left:2px solid var(--principal-line); padding-left:10px; }
.exn-e + .exn-e { margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line-soft); }
.exn-c { display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; margin-bottom:4px; }
/* El motivo tipificado es el titular de la cita. En celeste porque dice «contestado»;
   apagado cuando solo hay estado, que todavía no es una respuesta. */
.exn-m { font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--principal-ink); }
.exn-e.sin-motivo { border-left-color:var(--line); }
.exn-e.sin-motivo .exn-m { color:var(--muted); }
/* El ANTECEDENTE: la nota del mes anterior, siempre al fondo de la tarjeta. El filete
   pasa a discontinuo y el texto baja un tono: es contexto de otro mes, no la
   respuesta de este, y con el mismo peso que la de arriba se leerían como dos
   respuestas a la misma pregunta. El mes va en un chip al frente porque el tono
   dice «de antes» pero no dice «de cuál», y a dos meses de distancia eso importa. */
.exn-e.antes { border-left-style:dashed; border-left-color:var(--line); }
.exn-e.antes .exn-m { color:var(--muted); }
.exn-e.antes .exn-n { color:var(--pardo); }
.exn-mes { font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--pardo); background:var(--bg); border:1px dashed var(--line);
  border-radius:999px; padding:0 6px; white-space:nowrap; }
.exn-s { font-size:9.5px; font-weight:600; color:var(--muted); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:0 6px; white-space:nowrap; }
/* La nota es PROSA y se lee entera: acá no hay nada debajo a lo que le robe sitio,
   que es lo que obliga a recortarla a dos líneas en la barra lateral. */
.exn-n { color:var(--ink); white-space:pre-line; overflow-wrap:anywhere;
  font-family:var(--ff-nota); font-style:var(--est-nota);
  font-size:13.5px; line-height:1.55; }
.exn-f { display:block; margin-top:6px; font-size:10.5px; color:var(--muted); }
/* La PERSONA es el escalón del proveedor en la otra lectura, y el CONCEPTO la hoja
   (en qué se le va el coste a esa persona): la más liviana de las dos. */
.arbol .lvl-persona td { font-size:12.5px; color:var(--pardo); }
.arbol .lvl-concepto td { font-size:12px; color:var(--muted); }
/* La rama de CUADRE. No es un aviso ni un error —el sub-libro no explica el 100 %
   de la nómina y eso es normal—, pero tampoco es gente, y la columna la suma.
   Ámbar, que en esta app es «mirá esto», con el nombre en versalitas para que no
   se lea como un país más de la lista. El detalle por concepto que cuelga de ella
   lleva el color pero no el peso: es el desglose, no el titular. */
.arbol tr.fila-gap td { color:var(--ambar); font-weight:600; }
.arbol tr.fila-gap td:first-child { box-shadow:inset 3px 0 0 var(--ambar);
  font-variant:small-caps; letter-spacing:.03em; }
.arbol tr.fila-gap:hover td { background:var(--hover); }
.arbol tr.fila-gap-det td { color:var(--ambar); }
/* «Plan sin ejecutar»: es plan, no gente, y va agregado. Se marca en cursiva y en
   el tono terciario para que no se cuente como una persona más de la lista. */
.arbol tr.fila-noejec td:first-child { font-style:italic; color:var(--muted); }
/* El neteo de consolidación va aparte del cuadre (no tiene personas detrás) y
   aparte de los países. Se marca con el filete, no con color: no hay nada que
   revisar en él, solo hay que saber que está. */
.arbol tr.fila-ajuste td:first-child { box-shadow:inset 3px 0 0 var(--line); }
/* Conmutador de las dos lecturas. Vive en la barra de acciones de la pista y no
   en cada bloque: son dos formas de leer la MISMA tabla. */
.lect-sw { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
/* ---- EL MISMO CONMUTADOR, PEGADO AL NOMBRE DEL BLOQUE ----
   En el árbol de gasto las dos lecturas vivían en una fila propia del `thead`
   (`tr.tit-acc`) con dos botones de 12,5px: una banda de unos 34px de alto,
   en cada tabla, que no traía ni un dato —solo repetía un control—. Acá son
   lo que son: dos maneras de terminar la frase que empieza el título
   («Nómina… por persona»), en texto y a media tinta, sin fila ni caja.

   La activa se marca con el FILETE caramelo y no con relleno: en esta app el
   caramelo es acción y va en el trazo (ver la nota de la paleta). Y se marca
   con el filete ADEMÁS del color, para que el estado no dependa del tono. */
.lect-in { display:inline-flex; align-items:baseline; gap:7px; margin-left:11px;
  font-size:11px; font-weight:500; letter-spacing:.01em; vertical-align:1px;
  white-space:nowrap; }
.lect-in .lk { color:var(--muted); font-weight:600; }
.lect-in .lect-sep { color:var(--line); }
.lect-o { appearance:none; -webkit-appearance:none; background:none; border:0;
  padding:0 0 2px; margin:0; font:inherit; color:var(--muted); cursor:pointer;
  border-bottom:1.5px solid transparent; }
.lect-o:hover { color:var(--pardo); border-bottom-color:var(--line); }
.lect-o.active { color:var(--principal-ink); font-weight:600;
  border-bottom-color:var(--principal-line); cursor:default; }
.lect-k {font-size:10px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.btn.sw-lect.active { background:var(--principal-tint); border-color:var(--principal-line);
  color:var(--principal-ink); }

/* Grupo que queda FUERA del total de su pista (hoy solo «No operativo»): se
   muestra para poder atar con el libro, pero no suma en el análisis. Sin la
   marca, sumar los grupos de la tabla no daba el total de su cabecera. */
.arbol tr.fila-fuera td { color:var(--muted); }
.arbol tr.fila-fuera td strong { font-weight:600; color:var(--muted); }
.arbol tr.fila-fuera:hover td { background:var(--hover); }

/* ==== Pistas de conciliación del gasto (vista «vs mes anterior») ====
   Dentro del coste hay dos lógicas que no se mezclan: la nómina se concilia
   por CUENTA CONTABLE contra el sub-libro y el resto por PROVEEDOR. La
   separación en dos tablas es correcta; el problema era visual — dos tablas
   de aspecto idéntico, ambas empezando por «COGS» con cifras distintas y sin
   nada que dijera que eran partes de un mismo total.
   Se arregla con dos piezas: la tira de reparto (.rep), que declara la suma,
   y un título por pista (.tit-bloque, la primera fila de su propia tabla)
   que nombra su lógica y lleva su total.
   Sin hues nuevos: el color queda reservado para el signo y las incidencias;
   aquí distingue el icono, la etiqueta y el peso del filete lateral. */
.rep { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin:0 0 18px;
  padding:13px 16px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radio); box-shadow:var(--sombra); }
.rep-tot, .rep-parte { display:flex; flex-direction:column; gap:2px; min-width:150px;
  padding:2px 4px; border-radius:9px; text-decoration:none; color:inherit; }
.rep-tot { flex:0 0 auto; padding-right:14px; border-right:1px solid var(--line-soft); }
.rep-parte { flex:1 1 160px; }
a.rep-parte:hover { background:var(--principal-tint); }
.rep-k {font-size:10.5px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rep-k small { font-weight:500; letter-spacing:.04em; opacity:.75; margin-left:5px; }
.rep-v {font-size:21px;
  font-weight:700; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums; }
.rep-v small { font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.05em;
  text-transform:uppercase; margin-left:4px; }
.rep-tot .rep-v { font-size:24px; }
.rep-d { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11.5px;
  color:var(--muted); }
.rep-ref { color:var(--muted); }
.rep-op { align-self:center;      font-size:17px; font-weight:600; color:var(--muted); flex:0 0 auto; }

.pista { margin:0 0 22px; scroll-margin-top:16px; }
.pista:last-child { margin-bottom:0; }
/* ---- EL TÍTULO DEL BLOQUE ES LA PRIMERA FILA DE SU TABLA ----
   Durante mucho tiempo fue una cabecera aparte (`.pista-h`): un flex que
   copiaba a mano las columnas de la tabla de abajo —132px de importe, 396px
   de hueco, 76px de tendencia— para que el total cayera sobre la columna del
   mes. Dos rejillas distintas diciendo lo mismo, que había que mantener
   iguales cada vez que se tocaba una medida, y que ya se habían desalineado
   una vez (400px de desfase). Encima llevaba una chapa celeste de 26px y un
   filete degradado, o sea el dibujo de un objeto que no existe: el bloque no
   es «un título más una tabla», es una tabla.

   Ahora el título es una fila del `thead`. El total no PUEDE despegarse de
   sus partes porque vive en su misma columna y la alinea la propia tabla.
   El único color es el trazo celeste del icono —contexto, y en el trazo, no
   en un relleno— sobre el papel crema de la banda.

   Tres trampas, todas pisadas ya alguna vez:
   · la fila lleva `colspan` y es la PRIMERA, así que con `table-layout:fixed`
     los anchos tienen que ir en un `colgroup` (ver `_arbol_colgroup.html`);
   · el `th` global es `position:sticky; top:0` — dos filas pegadas ahí se
     montan una encima de otra, así que ésta va `static` (lo mismo que hace
     `tr.qp-grupos` en la matriz de ingresos);
   · el `th` global va en versalitas y en `--muted`: hay que devolverle al
     título su caja alta, su interletrado y su tinta. */
.arbol col.ab-c-n { width:132px; }
.arbol col.ab-c-s { width:76px; }
/* La fila de acciones (`tr.tit-acc`) se fue: su único inquilino era el
   conmutador de lecturas de la nómina, que ahora va pegado al nombre del
   bloque (ver `.lect-in`). El encabezado vuelve a ser una sola fila. */
/* EL PAPEL DE CADA BANDA. Tres pesos, del más limpio al más cálido:
     · el título del bloque, en BLANCO (`--card`) — el papel más limpio de la
       paleta, y lo que lo levanta de la página;
     · la cabecera de columnas, sin fondo (ver abajo): es marco,
       no dato, y el marco de esta app es ese tono;
     · las filas de datos no pintan fondo: son el champán de la página.
   Estaba al revés —título en crema, columnas en blanco— y el rótulo de las
   columnas pesaba más que el nombre del bloque que las encabeza. */
.tit-bloque > th {
  position:static; background:var(--card);
  text-transform:none; letter-spacing:normal; color:var(--ink);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-top:12px; padding-bottom:12px;
}
/* 29/09/2026: sin relleno. La banda tostada partía el bloque en dos —título,
   franja, filas— y se leía como una tabla aparte; el rótulo de columnas se
   distingue por su versalita gris y la hairline de abajo, no por un fondo. */
.arbol > thead > tr.cols > th { background:var(--card); }
.tb-t { font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:normal; }
.tb-ico { display:inline-block; width:15px; height:15px; margin-right:8px;
  vertical-align:-2px; color:var(--laton-ink); }
.tb-ico svg { width:100%; height:100%; display:block; }
/* Cuando el icono del bloque es el botón del sub-libro (ver `_gasto.html`),
   ocupa el mismo sitio que ocuparía el glifo mudo: mismo hueco a la derecha
   y misma línea de base, para que los dos bloques empiecen igual. */
.tb-t > .op-detalle-ico { margin-right:7px; vertical-align:-1px; padding:0; }
.tb-sub { display:block; font-size:11.5px; font-weight:400; color:var(--muted);
  letter-spacing:0; margin-top:3px; line-height:1.4; white-space:normal; }
.tb-sub strong { color:var(--pardo); font-weight:600; }
.tb-v { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
/* El subtotal del bloque va cifra a cifra en las columnas de sus filas: el mes
   en su peso de total, el anterior y la variación un escalón por debajo, que
   son contexto del total y no otro total. */
.tb-a { font-size:13px; font-weight:600; color:var(--pardo); font-variant-numeric:tabular-nums; }
.tb-d { font-size:13px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* `.tit-bloque > th` fija la tinta y le gana a `.up`/`.down` por especificidad. */
.tit-bloque > th.tb-d.up { color:var(--neg); }
.tit-bloque > th.tb-d.down { color:var(--pos); }
.tb-s { padding-top:5px; padding-bottom:5px; }
/* Filete lateral de la tabla: cuando ya scrolleaste y la cabecera quedó arriba,
   es lo que dice en qué pista estás. Nómina en tono terciario, proveedores en
   secundario: la misma familia neutra, distinto peso — sin gastar un hue, que
   está reservado para el signo y las incidencias. */
.pista > .tabla-wrap { border-left:3px solid var(--line); padding-left:1px; }
.pista-nom > .tabla-wrap { border-left-color:var(--muted); }
.pista-prov > .tabla-wrap { border-left-color:var(--ink); }
@media (max-width: 760px) {
  .rep-tot { border-right:0; border-bottom:1px solid var(--line-soft); padding-bottom:10px; }
  .rep-op { display:none; }
}

/* ---- Estados vacios ---- */
.vacio { color:var(--muted); padding:28px; text-align:center; }
.placeholder { text-align:center; padding:90px 24px; color:var(--muted); }
.placeholder .ph-icon { font-size:48px; opacity:.85; }
.placeholder h2 { color:var(--ink); margin:14px 0 4px; }
canvas { max-height:340px; }

/* --- Control de estado de revisión por partida (bandeja + cierre) ------
   Overlay Pendiente/Revisado/Explicado + nota. El activo se pinta por CSS
   desde .rev[data-estado=...] (sin init JS; sirve al fragmento AJAX). --- */
.rev { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.rev-seg { display:inline-flex; border:1px solid var(--line); border-radius:999px;
  overflow:hidden; background:var(--card); }
.rev-b { border:0; background:transparent; cursor:pointer; padding:3px 9px;
  font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--muted);
  border-left:1px solid var(--line); transition:background .12s,color .12s; }
.rev-b:first-child { border-left:0; }
.rev-b:hover { background:var(--principal-tint); color:var(--principal-ink); }
/* Estado activo pintado según data-estado del wrapper */
.rev[data-estado="pendiente"] .rev-b[data-set="pendiente"] {
  background:var(--bg); color:var(--pardo); }
.rev[data-estado="revisado"] .rev-b[data-set="revisado"] {
  background:var(--principal); color:var(--btn-ink); }
.rev[data-estado="explicado"] .rev-b[data-set="explicado"] {
  background:var(--principal-ink); color:var(--btn-ink); }
.rev-nota { border:1px solid var(--line); background:var(--card); cursor:pointer;
  border-radius:999px; padding:3px 9px; font-size:11px; font-weight:600;
  color:var(--muted);      transition:background .12s,color .12s,border-color .12s; }
.rev-nota:hover { border-color:var(--principal); color:var(--principal-ink); }
.rev-nota.tiene { border-color:var(--ambar); color:var(--ambar);
  background:color-mix(in srgb, var(--ambar) 10%, transparent); }
.rev-ok { animation:revflash .9s ease-out; }
/* «+ nota» del árbol de «Cómo cerramos» (ver _rev_mas.html): el mismo editor de la
   bandeja desde la fila que se está mirando. Pegado al borde derecho de la celda del
   concepto y solo al posarse en la fila, al tabular hasta él o con su editor abierto:
   en reposo el árbol se lee como siempre. Absoluto porque la celda corta el texto con
   ellipsis y un botón al final del nombre se cortaría con él. */
.arbol td:has(> .arb-rev) { position:relative; }
.arb-rev { position:absolute; right:6px; top:50%; transform:translateY(-50%);
  opacity:0; pointer-events:none; transition:opacity .12s; }
.arbol tr:hover .arb-rev, .arb-rev:focus-within, .arb-rev.rev-activo {
  opacity:1; pointer-events:auto; }
/* Encima de un nombre largo el fondo tiene que ser OPACO: el de `.tiene` es un tinte
   translúcido y el texto se leía por debajo. (Un fundido a la izquierda se probó y se
   veía como un bloque: `--hover` es translúcido y se sumaba dos veces.) */
.arb-nota { padding:1px 8px; font-size:10.5px; line-height:16px; }
/* El color dice si la nota CASA con una fila de la bandeja (el de la casa) o es una
   nota NUEVA que la bandeja no tenía (gris punteado). Sustituye al ámbar de `.tiene`:
   acá lo escrito ya lo dice el texto («editar nota») y el globo de la fila. */
.arb-rev.caza .arb-nota { border-color:var(--principal); color:var(--principal-ink);
  background:color-mix(in srgb, var(--principal) 12%, var(--card)); }
.arb-rev.nueva .arb-nota { border-style:dashed; color:var(--muted); background:var(--card);
  border-color:color-mix(in srgb, var(--muted) 60%, var(--card)); }
@keyframes revflash { 0% { background:var(--principal-tint); } 100% { background:transparent; } }
/* Popover de nota (uno solo, compartido, anclado por JS) */
.rev-pop { position:absolute; z-index:80; width:280px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--sombra);
  padding:12px; display:none; }
.rev-pop.abierto { display:block; }
.rev-pop textarea { width:100%; min-height:74px; resize:vertical; box-sizing:border-box;
  border:1px solid var(--line); border-radius:8px; padding:8px; font:inherit;
  font-size:13px; color:var(--ink); background:var(--bg); }
/* Qué pregunta se está contestando: sin esto, dos explicaciones de la misma
   partida (mes anterior y presupuesto) se escriben sin saber cuál es cuál. */
.rev-pop-eje { font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.rev-pop select { width:100%; box-sizing:border-box; margin-bottom:8px;
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit;
  font-size:13px; color:var(--ink); background:var(--bg); }
.rev-pop-acc { display:flex; justify-content:flex-end; gap:8px; margin-top:9px; }
.rev-pop-b { border:1px solid var(--line); background:var(--card); cursor:pointer;
  border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--pardo); }
.rev-pop-b.prim { background:var(--principal-ink); color:var(--btn-ink); border-color:var(--principal-ink); }
.rev-pop-b:hover { border-color:var(--principal); }
/* Eliminar va a la izquierda, lejos de Guardar, y como enlace: es la acción que
   no se deshace y no debe parecer un botón más de la fila. */
.rev-pop-del { margin-right:auto; border:0; background:none; cursor:pointer;
  padding:5px 0; font:inherit; font-size:12px; color:var(--muted); }
.rev-pop-del:hover { color:var(--rojo-ink); text-decoration:underline; }
.rev-pop-del[hidden] { display:none; }
/* Resumen de revisión (chip en bandeja/cierre) */
.rev-resumen { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rev-resumen strong { color:var(--principal); }
th.rev-col { white-space:nowrap; width:1%; text-align:right; }

/* --- Seguimiento del ciclo de vida (marcadas que ya no aparecen) ------- */
.seg { margin:20px 0 8px; }
.seg-hero-t {      font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.seg-hero-s { color:var(--muted); font-size:12.5px; margin:2px 0 12px; }
.seg-hero-s strong { color:var(--ambar); font-variant-numeric:tabular-nums; }
.seg-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radio);
  box-shadow:var(--sombra); overflow:hidden; margin-bottom:12px; }
.seg-accent { height:3px; background:var(--ambar); }
.seg-head { padding:12px 18px 10px; border-bottom:1px solid var(--line); }
.seg-k {font-size:12px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.seg-count { display:inline-block; min-width:18px; text-align:center; padding:1px 7px;
  margin-left:6px; border-radius:999px; background:var(--bg); border:1px solid var(--line);
  color:var(--pardo); font-size:11px; letter-spacing:0; }
.seg-desc { color:var(--muted); font-size:12px; font-weight:400; margin-top:3px;
  letter-spacing:0; text-transform:none; }
.seg-tabla { width:100%; border-collapse:collapse; }
.seg-tabla td { padding:9px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.seg-tabla tr:last-child td { border-bottom:0; }
.seg-nombre { font-weight:600; font-size:13px; color:var(--ink); display:flex;
  align-items:center; gap:7px; flex-wrap:wrap; }
.seg-nombre.seg-dim { color:var(--pardo); font-weight:500; }
.seg-meta { font-size:11.5px; color:var(--muted); margin-top:1px; }
.seg-nota { color:var(--pardo); font-style:italic; }
.seg-badge { display:inline-block; padding:0 7px; border-radius:999px; font-size:10px;
  font-weight:600; letter-spacing:.03em; line-height:16px; text-transform:uppercase;
  background:var(--bg); border:1px solid var(--line); color:var(--muted); }
.seg-badge-revisado { color:var(--principal); border-color:var(--principal); }
.seg-badge-explicado { color:var(--principal-ink); border-color:var(--principal-ink); }
.seg-acc { text-align:right; white-space:nowrap; width:1%; }
.seg-btn { border:1px solid var(--line); background:var(--card); cursor:pointer;
  border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:600; color:var(--pardo);
transition:border-color .12s,color .12s; }
.seg-resolver:hover { border-color:var(--principal); color:var(--principal-ink); }
.seg-reabrir:hover { border-color:var(--ambar); color:var(--ambar); }
.seg-sum { list-style:none; cursor:pointer; padding:12px 18px; display:flex; align-items:baseline;
  gap:10px; user-select:none; }
.seg-sum::-webkit-details-marker { display:none; }
.seg-sum::before { content:"▸"; color:var(--muted); font-size:11px; }
details[open] .seg-sum::before { content:"▾"; }
.seg-res .seg-tabla { border-top:1px solid var(--line); }
/* ============ EL INFORME SIN MARCOS ==================================
   Las únicas líneas del área de trabajo son las que separan las TRES
   columnas (los filetes de .pm y .pm-rev) y la barra de contexto de
   arriba. Dentro del centro no hay recuadros.

   Lo que dibujaba cada panel era su borde Y SU FONDO. Quitar los dos no
   borra ningún bloque — los separa el aire y el peso del título, que es
   lo que ya hacía el trabajo. El fondo hay que apagarlo A MANO: `--card`
   es blanco puro y `--bg` es el papel champán, así que un panel sin borde
   seguía pintando un rectángulo blanco de ancho completo debajo de las
   pistas del gasto — invisible el día que los dos tonos eran el mismo.
   Las tablas sí se quedan blancas (`.arbol td`): lo blanco es el dato, no
   el envase. Antes se recortaba cuatro veces la misma zona en
   menos de 60px: el marco del panel, el de la tira de reparto, la regla
   de la cabecera de pista y la del thead, todas paralelas y sin nada
   en medio.

   Va al final de esta hoja y con `.pm-main` delante a propósito: los
   parciales del centro traen su propio bloque de estilos inline, que
   se inyecta DESPUÉS de esta cabecera, y hace falta el punto extra de
   especificidad para ganarles sin ir a tocar cada uno.

   Lo que NO se toca, porque no es marco:
   - la retícula de las tablas (th/td) y los border-top de subtotal y
     total: son el dato, no el envase;
   - los avisos (.alerta, .rec-*, .conc-*): son incidencias y su caja
     es lo que las distingue del informe;
   - la línea de las pestañas (.tabs) y los chips/controles.       */

/* Contenedores: fuera el recuadro, el fondo propio y la sangría que sólo
   existía para despegar el contenido de él. Queda el papel de la página. */
/* EL PANEL VUELVE A SER TARJETA (29/09/2026: «queda muy messy así como está»).
   Sin marco, la cascada, la nómina y los proveedores eran una sola sábana: el
   aire no alcanzaba para decir dónde terminaba uno y empezaba el otro, y meter
   líneas entre ellos era peor. Lo que separa ahora es la SUPERFICIE —blanco
   sobre el papel— con un borde apenas insinuado y la esquina redonda; nada de
   sombra que lo despegue, que no flota.
   Las dos pistas del gasto van en UNA tarjeta: son el mismo mes. */
.pm-main .panel:not(.rec-warn):not(.rec-ok):not(.alerta) {
  background:var(--card); border:1px solid var(--card-borde); border-radius:10px;
  /* 30/09/2026: 22 → 14 de lado. El aire lateral de la tarjeta se restaba del
     árbol dos veces (las dos orillas) y era lo que empujaba la Q × P al scroll. */
  padding:18px 14px; margin-bottom:16px;
}
/* Dentro de la tarjeta sobran las dos rayas que hacían de caja cuando no la
   había: la de encima del título del bloque (el borde de la tarjeta ya cierra
   arriba) y la de la última fila visible, que quedaba a 18px del borde de
   abajo como una segunda línea. La última fila no se puede señalar con
   `:last-child` —las hijas plegadas siguen en el DOM—, así que se recorta el
   píxel de abajo de la tabla; el `.tabla-wrap` ya recortaba igual. */
.pm-main .panel .tit-bloque > th { border-top:0; padding-top:0; }
.pm-main .tabla-wrap > .arbol { clip-path:inset(0 0 1px 0); }

/* ---- Paneles que se ocultan (ver `paneles.js`) ----
   El ojo tachado vive en la esquina, DENTRO del acolchado de la tarjeta (16px
   de alto por 2px de margen caben en los 18px de arriba), para no pisar la
   cifra que muchas tarjetas llevan arriba a la derecha. Solo aparece al pasar
   por encima: es un mando que se usa una vez, no algo que leer siempre. */
[data-panel] { position:relative; }
[data-panel][hidden] { display:none !important; }
.panel-x {
  position:absolute; top:1px; right:1px; z-index:2; width:16px; height:16px; padding:0;
  display:grid; place-items:center; border:0; border-radius:5px; cursor:pointer;
  background:transparent; color:var(--muted); opacity:0; transition:opacity .12s;
}
[data-panel]:hover > .panel-x, .panel-x:focus-visible { opacity:1; }
.panel-x:hover { background:var(--rail); color:var(--ink); }
.panel-x:focus-visible { outline:none; box-shadow:var(--ring); }
@media (hover:none) { .panel-x { opacity:.55; } }
/* Lo escondido, al pie: una línea, sin caja. Cada nombre lo devuelve. */
.paneles-ocultos {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 18px;
  font-size:12px; color:var(--muted);
}
.paneles-ocultos[hidden] { display:none; }
.paneles-ocultos button {
  font:inherit; color:var(--ink); background:transparent; cursor:pointer;
  border:1px dashed var(--line); border-radius:999px; padding:2px 10px;
}
.paneles-ocultos button::after { content:" · mostrar"; color:var(--muted); }
.paneles-ocultos button:hover { background:var(--card); border-style:solid; }
.paneles-ocultos button:focus-visible { outline:none; box-shadow:var(--ring); }
.pm-main .rep,
.pm-main .gl-panel,
.pm-main .cz-panel,
.pm-main .cz-resto,
.pm-main .ig-panel,
.pm-main .ig-resto,
.pm-main .cp-panel,
.pm-main .seg-panel {
  background:transparent; border:0; box-shadow:none;
}
/* Sin marco, el padding de la tira de reparto la sangraba respecto del
   título que tiene encima. */
.pm-main .rep { padding:2px 0 6px; }
.pm-main .gl-panel { padding:16px 0 4px; }
.pm-main .cz-panel-head, .pm-main .ig-panel-head { padding-left:0; padding-right:0; }
.pm-main .cz-tabla th:first-child, .pm-main .cz-tabla td:first-child,
.pm-main .ig-tabla th:first-child, .pm-main .ig-tabla td:first-child { padding-left:0; }
.pm-main .cz-tabla th:last-child, .pm-main .cz-tabla td:last-child,
.pm-main .ig-tabla th:last-child, .pm-main .ig-tabla td:last-child { padding-right:0; }
.pm-main .cz-vacio, .pm-main .cz-titulo { padding-left:0; padding-right:0; }

/* Divisorias internas que repetían lo que ya decía otra cosa: el «=» ya
   separa el total de sus partes. */
.pm-main .rep-tot { border-right:0; }
.pm-main .cz-panel-head,
.pm-main .ig-panel-head,
.pm-main .cp-head,
.pm-main .seg-head { border-bottom:0; }

/* Filete lateral de la pista: decía en cuál estabas al scrollear. Ahora lo
   dice la propia tabla — su primera fila lleva el nombre del bloque. */
.pm-main .pista > .tabla-wrap { border-left:0; padding-left:0; }

/* Columnas del tablero: las separa el hueco de 26px, no una línea. */
.pm-main .gl-kpis, .pm-main .gl-rev { border-left:0; }

/* Sin el marco del panel, la última línea de una tabla quedaba suelta
   en el aire en vez de cerrar contra algo. */
.pm-main .arbol tbody tr:last-child td { border-bottom:0; }

/* Las dos pistas del gasto son DOS BLOQUES, no dos tablas seguidas. Aquí
   vivía todo el andamiaje que lo dibujaba desde fuera de la tabla: una
   banda celeste de fondo, un filete degradado que se apagaba al 40%, una
   chapita de 26px detrás del icono y —lo más frágil— la cabecera partida en
   columnas de 132/396/76px para que su total cayera sobre la columna del
   mes. Se fue entero: el título es ahora la primera fila del `thead` (ver
   `.tit-bloque` más arriba), así que la rejilla la pone la tabla y no hay
   dos medidas que mantener iguales a mano.

   Lo único que sobrevive es el AIRE. La tabla de arriba termina en su
   última fila y el bloque de abajo necesita distancia propia, o su título
   —que ahora es una fila— se lee como una fila más de la tabla anterior. */
.pista-nom + .pista, .pista-prov + .pista { margin-top:34px; }
.pista-nom > .tabla-wrap,
.pista-prov > .tabla-wrap { margin-top:10px; }

/* ==== La piel de «qué revisar» ====
   El contenido ya era el correcto; lo que no se podía mirar era el dibujo.

   1. EL NOMBRE NO SE CORTA. Era una línea con puntos suspensivos —«GABINETE
      CARBO ASE…»— y ese es justo el dato con el que alguien va a buscar la
      factura: un nombre cortado no es un nombre. Ahora envuelve en dos
      líneas como máximo, que es lo que aguanta una razón social entera.
   2. LA CITA VA AL MARGEN. Fue tarjeta con borde (parecía una bandeja de
      notas), luego sin caja (la frase de la persona se leía igual de
      calculada que la cifra) y luego papelito con degradado y esquina
      doblada (adornado). Lo que la despega ahora es la LETRA —serif en
      cursiva, ver `--ff-nota`— y su filete izquierdo: sin fondo ni caja.
   3. NADA SE SALE. El renglón del lado aparcado no envolvía, así que
      «mayor ↑ +330.000» se cortaba contra el borde. */
.pm-rev .pm-r-t {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; text-overflow:clip;
}
/* LA NOTA ES UNA CITA AL MARGEN, NO UN PAPEL (28/09/2026: «el fondo degradé
   no se ve elegante y minimalista»). Hubo un papelito con degradado, un velo
   del color de la polaridad al pie y una esquina doblada: tres adornos para
   decir «esto lo escribió alguien», cuando eso ya lo dicen la serif cursiva y
   el filete. Pero sin nada detrás se mezclaba con el título de la fila («no se
   nota qué es comentario y qué es título»), así que lleva un fondo PLANO muy
   suave (`--nota-bg`), sin borde ni sombra, y el filete a la izquierda.
   El filete es SIEMPRE arena (28/09/2026, «más minimalista»): el signo ya lo
   dice la cifra de la fila, y repetirlo en el filete ponía dos colores por
   fila. Un color por fila, en la cifra.
   29/09/2026: FUERA LA CAJA TAMBIÉN (prototipo Minimal, «se veía mejor»). Lo
   que la caja resolvía —separar la cita del título de la fila— lo hacen ahora
   tres cosas que no dibujan un objeto: un filete punteado encima (en
   `.pm-r-x`), el motivo perfilado en latón y la serif a cuerpo de lectura, que
   ya no se parece en nada al nombre de la partida en sans semibold. */
.pm-rev .pm-x { background:none; border:0; border-radius:0; padding:0; }
.pm-rev .pm-r-x { margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); }
.pm-rev .pm-x + .pm-x { margin-top:10px; }

/* Dentro de una cita sin caja, la sociedad tampoco necesita la suya. */
.pm-rev .pm-x-s { background:none; border-color:transparent; padding:0; }
.pm-rev .pm-x-s::before { content:"· "; }

/* ---- La MEDIDA de los árboles del informe ----
   `width:100%` estiraba la tabla a lo que diera la pantalla, y como las
   columnas de cifras no crecen, todo el sobrante caía en la de concepto: en un
   monitor ancho quedaban ~700px de nada entre «COGS» y su importe, y el ojo
   tenía que cruzarlos para emparejar cada línea con su número. Una tabla se lee
   mejor estrecha; el hueco que queda a la derecha no es un defecto, es margen.
   `table-layout:fixed` no está solo por eso: es lo que hace que dos pistas
   distintas alineen sus columnas sin depender de cuánto mida su contenido, y
   sin eso no se puede quitar la cabecera repetida de más abajo. */
.pm-main .arbol { max-width:var(--medida-arbol); table-layout:fixed; }
.pm-main .arbol th.num, .pm-main .arbol td.num { width:132px; }
.pm-main .arbol th.tend-col, .pm-main .arbol td.tend-col { width:76px; }
/* Con medida fija el concepto ya no puede empujar al resto. Antes se cortaba con
   «…», y con la barra de «qué revisar» al lado le quedan ~140px: un cliente
   («INTER - IPCCTECHNOLOGY», «1035 INTER - InConcert…») había que adivinarlo. Ahora
   el nombre baja de línea: las cifras no se mueven y la fila solo crece donde hace
   falta. `anywhere` parte también una palabra que sola no cabe. */
.pm-main .arbol td:first-child { overflow:hidden; white-space:normal; overflow-wrap:anywhere; }
/* La altura de fila no la decide la cifra más gorda: sin esto una `.v-muy-alta`
   engorda su fila un par de píxeles y rompe el ritmo de la tabla justo en la
   línea que se quiere leer de un vistazo. */
.pm-main .arbol td.num { line-height:20px; }

/* ---- Una cabecera de columnas, no una por pista ----
   Las pistas son la misma tabla partida por su lógica de conciliación, con las
   mismas seis columnas. Repetir «CONCEPTO / AGOSTO / JULIO / VAR / VAR % / 6M»
   cada vez que empieza una es leer dos veces lo mismo en la misma pantalla.
   Se queda la de la PRIMERA pista que haya —el selector es por hermanos, así
   que si la nómina no se renderiza la cabecera aparece en la que quede— y las
   demás la heredan por posición, que es lo que garantiza el `fixed` de arriba.

   Apunta a `tr.cols` y NO al `thead` entero, que es lo que hacía antes: desde
   que el título del bloque vive también en el `thead` (`tr.tit-bloque`),
   esconder el `thead` completo se llevaba por delante el nombre de la segunda
   pista y su tabla empezaba directamente en COGS, sin decir de qué era. */
.pm-main .pista:not([hidden]) ~ .pista .arbol > thead > tr.cols { display:none; }
/* Con la nómina oculta (ver «Paneles que se ocultan») la cabecera pasa sola a
   la pista que quede primera: el selector solo cuenta hermanos VISIBLES. */

/* ---- La misma línea, fuera de la tabla ----
   Los separadores de dentro de un panel (la regla bajo su título, la de su
   pie, la de entre dos cifras) dicen lo mismo que la de una fila: «sigue
   siendo el mismo bloque». Aquí no hay `border-collapse` que respetar, así
   que la línea es un fondo de 1px vía pseudo-elemento — y no un borde — para
   que sobreviva a los `background:` de los estados hover, que en esta hoja
   se escriben con la forma corta y borrarían un `background-image`. */
.cp-head, .pm-c, .rec-linea { position:relative; }
.cp-pie, .cp-tira { position:relative; }
.cp-head::after, .pm-c::after, .rec-linea::after, .cp-pie::before, .cp-tira::before {
  content:''; position:absolute; left:0; right:0; height:1px;
  background:var(--sep-linea); pointer-events:none;
}
.cp-head::after, .pm-c::after, .rec-linea::after { bottom:0; }
.cp-pie::before, .cp-tira::before { top:0; }
/* y fuera los bordes que sustituyen */
.cp-head, .pm-c, .pm .pm-c, .rec-linea { border-bottom:0; }
.cp-pie, .cp-tira { border-top:0; }
/* El último de una serie no separa de nada */
.pm-c:last-child::after, .rec-dif::after, .hk .pm-c::after { content:none; }

/* ---- Y de pie: el filete entre dos cifras de la misma tira ----
   Mismo criterio. Lo que separa la bandeja del centro (`.pm-rev`) sí es
   marco y se queda entero; esto de aquí son dos cifras del mismo renglón. */
.hk .pm-fijo > :not(.pm-cab) + *, .tarjeta + .tarjeta { position:relative; }
.hk .pm-fijo > :not(.pm-cab) + *::before, .tarjeta + .tarjeta::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--sep-col); pointer-events:none;
}
.hk .pm-fijo > :not(.pm-cab) + *, .tarjeta + .tarjeta { border-left:0; }

/* ==== La cabecera COMPACTA al hacer scroll (`.ws-compacta`) ====
   La banda está pinchada porque lleva el titular del mes, pero pinchada a
   tamaño completo se come ~150px de cada pantalla de análisis. Al bajar se
   queda lo que se consulta de reojo —qué vista, qué sociedad, qué período y
   las cinco cifras— y se va lo que solo se lee al llegar: el segundo renglón
   de cada cifra, el aire de la tarjeta y la marca a cuerpo de título.
   Lo pone alto-cabecera.js desde el primer píxel de scroll y lo quita arriba
   del todo. El paso entre los dos se anima (ver `.ws-anim`). */
.ws-head { transition:box-shadow .22s; }
/* Mientras cambia: el JS anima el alto medido de un estado al otro y la banda
   se recorta a ese alto; el margen de abajo hace el recorrido contrario con la
   misma curva, así que lo que ocupa en el documento no cambia en ningún
   fotograma. Las cifras —que cambian de dos renglones a uno, y eso no se
   interpola— entran con fundido. */
.ws-head.ws-anim { overflow:hidden;
  transition:height .24s cubic-bezier(.2,.7,.2,1), margin-bottom .24s cubic-bezier(.2,.7,.2,1),
    box-shadow .24s; }
.ws-head .nav { transition:min-height .24s cubic-bezier(.2,.7,.2,1), padding .24s; }
.ws-head .marca .mate-logo { transition:font-size .24s cubic-bezier(.2,.7,.2,1); }
.ws-head .hk { transition:padding .24s cubic-bezier(.2,.7,.2,1); }
.ws-anim .hk .pm-fijo { animation:ws-fundido .24s ease-out; }
@keyframes ws-fundido { from { opacity:0; transform:translateY(-3px); } }
.ws-medir, .ws-medir .nav, .ws-medir .marca .mate-logo, .ws-medir .hk { transition:none !important; }
@media (prefers-reduced-motion: reduce) {
  .ws-head, .ws-head .nav, .ws-head .marca .mate-logo, .ws-head .hk { transition:none; }
  .ws-anim .hk .pm-fijo { animation:none; }
}
/* La sombra va en la TIRA (`.hk`), no en `.ws-head`: la banda ocupa todo el
   ancho pero la tira se para en el carril de «qué revisar» (`margin-right`), y
   puesta en la banda la raya y la sombra cruzaban por debajo del carril, a la
   altura de su título. Sin tira (páginas sin cifras) la sombra la pone el nav,
   solo al scrollear: en reposo no lleva filete.
   El nav NO encoge: todo lo que queda por encima del borde de la tarjeta de
   cifras se queda como está, porque ese borde es el del carril de «qué
   revisar», que no se mueve (ver `.pm-rev-in`). Lo que se gana compactando
   sale de la tarjeta, que pasa de dos renglones a uno. */
.ws-compacta:not(:has(.hk:not(:empty))) .nav { box-shadow:0 6px 14px -12px rgba(var(--ink-rgb),.35); }

/* Las cifras: una sola línea por celda — rótulo, cifra y variación.
   La tira NO se aplana: sigue siendo la tarjeta del titular, más baja. Plana
   llevaba un filete a todo el ancho que se cortaba contra el carril, y el
   borde del carril quedaba más arriba: dos rayas a dos alturas. Con tarjeta
   no hay raya — el carril arranca en su borde de arriba (`--ws-rail-g`).
   Sin fundido debajo: se probó un degradado al papel y confundía más de lo que
   suavizaba; lo que sube por debajo se corta limpio contra el papel. */
.ws-compacta .hk { padding-bottom:6px; }
/* A una línea las celdas no miden lo mismo: «Resultado operativo» con su
   variación no entra en un quinto de la hoja y el «Cierre» sobra. Se reparten
   según lo que llevan. */
.ws-compacta .hk .pm-fijo > :not(.pm-cab) { flex:1 1 auto; min-width:0; }
.ws-compacta .hk .pm-c { min-width:0; }
.ws-compacta .hk .pm-c > summary { flex-wrap:nowrap; align-items:baseline;
  column-gap:7px; padding:6px 10px 6px 12px; white-space:nowrap; overflow:hidden; }
.ws-compacta .hk .pm-c-k { flex:none; font-size:9.5px; letter-spacing:.07em; }
.ws-compacta .hk .pm-c-u { display:none; }
.ws-compacta .hk .pm-c-v { flex:none; font-size:14px; margin-top:0; line-height:1.2; }
.ws-compacta .hk .pm-c-d { flex:none; margin-top:0; font-size:11px; }
/* La barra de avance no se lee a este tamaño, y su referencia sin la barra
   tampoco: la cifra del plan ya es el desvío, y la del cierre ya dice «0/24». */
.ws-compacta .hk .pm-c-d:has(.pm-barra) { display:none; }
/* La flecha se queda: es el único mando del desplegable (el cuerpo de la
   cifra elige el lado). Más chica y centrada en la línea, con su hueco
   reservado a la derecha para no pisar la variación. */
.ws-compacta .hk .pm-c > summary { padding-right:30px; }
.ws-compacta .hk .pm-c-x { top:50%; right:5px; width:18px; height:18px; margin-top:-9px; }
.ws-compacta .hk .pm-c-x::before { font-size:9px; }
.ws-compacta .hk .pm-c-k .rc-chip { display:none; }
.tabsrow > .tabsrow-export:disabled { opacity:.45; cursor:default; }
.tabsrow > .tabsrow-export:disabled:hover { color:var(--muted); }
/* «Trabajando» mientras se prepara un Excel (exportar-informe.js): el texto del botón
   se sustituye EN SU SITIO por una barrita que va y viene. Indeterminada: el servidor no
   informa avance, así que no se finge un porcentaje. El botón conserva su ancho (lo fija
   el JS) y la barrita queda en su línea base, alineada a la derecha como el texto. */
.tabsrow > .tabsrow-export.descargando { opacity:1; cursor:progress; text-align:right; }
.descarga-mini { display:inline-block; position:relative; overflow:hidden; vertical-align:middle;
  width:56px; height:3px; border-radius:2px; background:rgba(146,110,72,.18); }
.descarga-mini > span { position:absolute; top:0; bottom:0; left:0; width:40%; border-radius:2px;
  background:#463829; animation:descarga-vaiven .9s ease-in-out infinite alternate; }
@keyframes descarga-vaiven { from { left:0; } to { left:60%; } }
@media (prefers-reduced-motion: reduce) {
  .descarga-mini > span { animation-duration:1.8s; }
}

/* «Está pasando algo» (carga.js): mientras llega la página siguiente —otro mes,
   otra sociedad, otra lectura de la configuración rápida— un filete de tinta corre
   por el borde de arriba de la ventana. Es la misma barrita que va y viene del
   Excel (`.descarga-mini`) a escala de página: indeterminada, porque el servidor no
   informa avance y no se finge un porcentaje. Dos píxeles, sin color de estado: es
   un aviso, no un mensaje.

   Lo de debajo de la cabecera se apaga a la vez (solo en navegaciones): sigue
   siendo la página de antes, y la cifra que se ve ya no es la que se pidió. Se
   apaga tarde y despacio para que una carga de medio segundo no lo llegue a notar;
   la banda se queda entera, que es donde se acaba de decidir. */
.carga { position:fixed; top:0; left:0; right:0; height:2px; z-index:1000;
  overflow:hidden; pointer-events:none; opacity:0; transition:opacity .25s; }
.carga::before { content:""; position:absolute; top:0; bottom:0; left:0; width:28%;
  background:linear-gradient(90deg, rgba(var(--ink-rgb),0), var(--ink) 35%, var(--ink) 65%, rgba(var(--ink-rgb),0));
  animation:carga-corre 1.25s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes carga-corre { from { transform:translateX(-100%); } to { transform:translateX(360%); } }
.cargando .carga { opacity:1; }
.cargando, .cargando * { cursor:progress; }
.contenedor, .hk { transition:opacity .2s; }
.cargando-nav .contenedor, .cargando-nav .hk { opacity:.6; transition:opacity .5s .35s; }
@media (prefers-reduced-motion: reduce) {
  .carga::before { width:100%; animation:carga-late 1.6s ease-in-out infinite alternate; }
  @keyframes carga-late { from { opacity:.25; } to { opacity:.9; } }
  .cargando-nav .contenedor, .cargando-nav .hk { transition:none; }
}