/* Solo lo específico de financials. Colores y tipografía salen de shared/css/base.css:
   redefinirlos aquí rompería la consistencia entre apps y el modo oscuro. */
/* Las tablas de configuración llegan a nueve columnas y llevan contenido largo: una clave de la
   602 puede tener 122 caracteres de descripción búlgara. Van dentro de un contenedor que se
   desplaza en horizontal. */
.fin-scope .fin-tabla { overflow-x: auto; }
/* LA ALTURA MÁXIMA ES LO QUE HACE ALCANZABLE LA BARRA HORIZONTAL, y es la corrección que
   costó cuatro intentos encontrar.
   Una barra de desplazamiento horizontal vive en el BORDE INFERIOR de su contenedor. Sin tope de
   altura, el contenedor de una tabla de 265 cuentas mide varios miles de píxeles, así que su
   borde inferior -- y con él la barra -- queda kilómetros por debajo de la pantalla. La barra
   existe y funciona (con el touchpad se desplazaba), pero no hay forma de llegar a ella ni de
   saber que está ahí. Medido sobre la estructura real con 120 filas: contenedor de 4.599px de
   alto en un viewport de 700, la barra 4.034px por debajo.
   Con el tope, el contenedor nunca pasa de la pantalla: las dos barras quedan dentro. Una tabla
   corta no se entera, porque max-height no estira nada. */
.fin-scope .fin-tabla { max-height: 70vh; }
/* Y si la tabla se desplaza por dentro, los títulos tienen que quedarse: una fila 47 sin
   cabecera a la vista no se puede leer. El fondo opaco no es decorativo -- sin él, las filas se
   verían por debajo al pasar. */
.fin-scope .fin-cascada thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }
/* La esquina donde se cruzan la cabecera fija y la columna de acción anclada tiene que quedar
   por encima de las dos. */
.fin-scope .fin-cascada th.fin-sc-accion { z-index: 3; }
/* La barra se pide explícitamente porque si no NO SE VE. Windows 11 y macOS traen activado
   ocultar las barras de desplazamiento: son barras superpuestas que sólo aparecen mientras algo
   se mueve y después se desvanecen. El resultado es que una tabla que desborda se ve cortada a
   secas, sin ninguna señal de que haya más a la derecha -- que es justo lo que pasaba aquí: el
   contenedor SÍ desbordaba (1393px de tabla en 688px de hueco) y SÍ era desplazable, pero no
   había nada que lo dijera. Dar estilo al pseudoelemento hace que Chrome y Edge dibujen una
   barra clásica permanente en vez de la superpuesta; `scrollbar-width`/`scrollbar-color` hacen
   lo mismo en Firefox. Los colores salen de los tokens, así que sigue al modo oscuro. */
/* Las propiedades estándar SOLO donde no existe el pseudoelemento, es decir Firefox. En Chrome y
   Edge, declarar `scrollbar-width`/`scrollbar-color` hace que el navegador DESCARTE las reglas
   `::-webkit-scrollbar` de ese elemento -- y como `thin` respeta las barras superpuestas del
   sistema, el resultado era justo el que queríamos evitar. Comprobado renderizando las dos
   variantes con `--enable-features=OverlayScrollbar`: con las estándar sale un pulgar flotante
   sin carril, sin ellas sale la barra clásica con carril. */
@supports not selector(::-webkit-scrollbar) {
  .fin-scope .fin-tabla { scrollbar-width: thin; scrollbar-color: var(--muted) var(--line); }
}
.fin-scope .fin-tabla::-webkit-scrollbar { height: 10px; }
.fin-scope .fin-tabla::-webkit-scrollbar-track { background: var(--line); border-radius: 5px; }
.fin-scope .fin-tabla::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 5px; }
.fin-scope .fin-cascada { border-collapse: collapse; }
/* La tabla toma el ancho que NECESITA su contenido, y el contenedor desplaza cuando no cabe.
   Con `width: 100%` no desbordaba nunca —el navegador repartía el ancho disponible entre las
   nueve columnas y las aplastaba—, así que la barra de desplazamiento no llegaba a aparecer:
   justo lo contrario de lo que hace falta. `min-width: 100%` la mantiene ocupando todo el panel
   cuando el contenido es estrecho, para que no quede una tabla flotando a media anchura. */
.fin-scope .fin-tabla > .fin-cascada { width: max-content; min-width: 100%; }
/* Por defecto NADA se parte en dos líneas. Un código de cuenta partido es ilegible y además
   engaña: `6010001` roto queda como `601001` y `1`, y `302/13` como `302/` y `13`, que parecen
   dos valores distintos. Lo mismo con fechas y periodos. Sólo el texto libre largo lleva la
   clase `larga`, y con un tope, para que una descripción búlgara de 122 caracteres no se lleve
   el ancho entero de la tabla. */
.fin-scope .fin-cascada td, .fin-scope .fin-cascada th { white-space: nowrap; }
.fin-scope .fin-cascada td.larga { white-space: normal; }
/* El tope va en un elemento DENTRO de la celda, no en la celda. Un `max-width` sobre un `td` es
   sólo una sugerencia: con `table-layout: auto` el navegador ensancha la columna hasta que quepa
   el contenido y se lo salta. Sobre un bloque interior sí se respeta, y es lo que impide que una
   descripción búlgara de 122 caracteres se lleve el ancho entero de la tabla. Por eso estas
   celdas se pintan con `<td class="larga"><span>...</span></td>` en js/views/. */
.fin-scope .fin-cascada td.larga > span { display: inline-block; max-width: 34em; overflow-wrap: anywhere; }
/* Arriba, que es lo que hace legible una fila cuyo texto largo ocupa varias líneas mientras el
   resto de columnas ocupa una sola. */
.fin-scope .fin-cascada td { padding: 6px 8px; vertical-align: top; }
/* El título sigue a su columna: a la izquierda sobre texto, a la derecha sobre números.
   Antes TODOS los th iban a la derecha —la regla se escribió pensando en la cascada, que es una
   tabla de números— y sólo el primero a la izquierda. En las tablas de configuración, que son de
   texto, eso dejaba cada título volcado hacia la columna siguiente: se leía el encabezado de una
   columna encima del contenido de otra, y parecía que faltaban datos donde no faltaba nada.
   La alineación a la derecha se pide ahora explícitamente con la clase 'num', la misma que ya
   llevan las celdas numéricas, así que cabecera y contenido no pueden separarse. */
.fin-scope .fin-cascada th { text-align: left; }
.fin-scope .fin-cascada td.num, .fin-scope .fin-cascada th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-scope .fin-cascada thead th { color: var(--muted); font-weight: 600; padding: 6px 8px; }

/* Cabeceras ordenables del plan de grupo (js/views/plan_grupo.js).
   La flecha doble apagada va en TODAS las cabeceras ordenables: es la única pista de que se
   pueden pulsar. Apagada no compite con el título, pero no puede irse tan abajo que parezca
   suciedad de la pantalla: a .45 y 10px se leía como dos puntos pegados al texto, así que va a
   .7 y al mismo cuerpo que el título, separada del texto. La columna activa cambia a un
   triángulo a pleno color y además oscurece el texto, porque el triángulo solo, en una fila de
   ocho títulos, no se distingue de un vistazo. El hueco es de ancho fijo para que ordenar no
   ensanche la columna y no desplace la tabla entera bajo el cursor. */
.fin-scope .fin-cascada thead th.fin-orden { cursor: pointer; user-select: none; }
.fin-scope .fin-cascada thead th.fin-orden:hover { color: var(--ink); }
.fin-scope .fin-cascada thead th.fin-orden:hover .fin-orden-inerte { opacity: 1; }
.fin-scope .fin-cascada thead th.fin-orden:focus-visible { color: var(--ink); outline: 2px solid var(--muted); outline-offset: -2px; }
.fin-scope .fin-cascada thead th.fin-orden-activa { color: var(--ink); }
.fin-scope .fin-orden-flecha { display: inline-block; width: 1em; margin-left: 7px; text-align: center;
    font-size: 12px; line-height: 1; }
.fin-scope .fin-orden-inerte { opacity: .7; }

/* Task 14: formulario de importación (js/views/importar.js) y selector de sociedad de la vista
   de lotes (js/views/lotes.js) -- shared/css/base.css no define estilos genéricos de
   form/label/input, así que sin esto las etiquetas quedarían en línea con sus campos. */
.fin-scope .fin-form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.fin-scope .fin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.fin-scope .fin-form input, .fin-scope .fin-form select { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.fin-scope #finImpInforme { margin-top: 16px; }
.fin-scope #finImpInforme .btn { margin-top: 10px; }

/* Login standalone (js/views/login.js) — mismo patrón que rrhh/.rh-login y gmao/.gmao-login. */
.fin-scope .fin-login {
    max-width: 340px;
    margin: 64px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.fin-scope .fin-login h2 { margin: 0 0 2px; }
.fin-scope .fin-login-nota { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.fin-scope .fin-login input {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
}
.fin-scope .fin-login .btn.primary { margin-top: 6px; }
.fin-scope .fin-login-err { color: var(--neg); min-height: 1.2em; font-size: 13px; margin: 0; }

/* Fase 3 · pantallas de Configuración. Sólo lo que base.css no da: la nota en gris pequeño y
   la fila de subtotal en negrita. Los colores salen de los tokens, nunca en hexadecimal. */
.fin-scope .fin-nota { color: var(--muted); font-size: 12px; margin: 6px 0 10px; }
.fin-scope .fin-cascada tr.fin-subtotal td { font-weight: 700; border-top: 1px solid var(--line); }
/* Ancho explícito, no `width: 100%`: con la tabla ajustada a su contenido, un campo al 100 % se
   mide contra una celda que a su vez se mide por el campo, y acaba colapsado. Cada uno pide lo
   que su dato necesita -- un nombre de línea, una fórmula como `7+8+9+10`, un código de cuenta. */
.fin-scope .fin-cascada input { width: 22em; box-sizing: border-box; padding: 4px 6px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.fin-scope .fin-cascada input[disabled] { opacity: .5; }
/* Tarea "árbol de cuatro niveles" (2026-09-16, A2): rejilla de tres columnas para el árbol de
   Estructura (Línea > Departamento > Sección > Área). Contrato exacto -- la Tarea B (informe de
   P&L) reutiliza estas mismas clases, así que no se tocan sin avisar.
   Antes cada fila metía nombre, origen, el input de orden y los dos botones EN LÍNEA detrás del
   nombre, así que nada quedaba alineado y la profundidad del árbol lo empeoraba. La sangría iba
   como padding-left del propio <ul> anidado -- eso desplazaba TODA la fila, columnas de la
   derecha incluidas, exactamente el defecto que esta rejilla existe para evitar: aquí la
   sangría vive DENTRO de la primera columna (.fin-arb-nom), nunca como margen de la fila
   entera, así que las columnas de orden y acciones quedan alineadas entre sí sin importar el
   nivel de profundidad ni el largo del nombre. */
.fin-scope .fin-arb { display: flex; flex-direction: column; }
/* Ronda 2 de ajustes (fix-2.md, punto 2): con la primera columna en '1fr', crecía hasta ocupar
   TODO el espacio libre de la fila, así que orden y acciones (o el importe, en el informe)
   quedaban pegados al borde derecho del panel, lejísimos del nombre -- alineados entre sí, pero
   no "junto al texto" como pedía el usuario. 'minmax(0, ANCHO)' + 'justify-content:start' hace
   que la columna del nombre se ajuste a su contenido (nunca más ancha de lo que haga falta) sin
   dejar que el resto de columnas se estiren hasta el final: la fila entera queda anclada a la
   izquierda, con orden/acciones/importe justo después del nombre más largo de la pantalla.
   ANCHO no es un número a ojo: sale de medir la base de dev (32 caracteres el nombre de centro
   más largo, "Material de oficina y accesorios"; 31 el de línea, "Amortizaciones y
   depreciaciones") más lo que puede acompañar al nombre en la MISMA línea -- la sangría (hasta
   3 niveles × 1.4em en Estructura), el hueco/triángulo (~1.3em) y, sólo en Estructura, la nota
   de origen ("(semilla)", la más larga de las tres, con su espacio) y la de inactivo
   ("Неактивен", la más larga de las tres traducciones, con su "· " y su espacio). 'ch' en vez de
   convertir el conteo de caracteres a em a mano: 1ch es, por definición, el ancho de un carácter
   en la fuente real de este elemento, así que el número no depende de adivinar cuánto mide un
   carácter en esta tipografía. Es DELIBERADAMENTE generoso (cubre a la vez el nombre de línea Y
   el de centro más largos, más las dos notas, aunque nunca coincidan los cuatro en la misma
   fila): sigue siendo sólo un tope -- 'minmax(0, ...)' con mínimo 0 -- así que una fila con menos
   contenido no lo ocupa entero, y el requisito duro del usuario ("no truncar ni cortar ninguna
   línea de texto") sigue intacto para cualquier combinación aún más larga: envuelve, nunca corta
   ni pone puntos suspensivos (ver 'overflow-wrap' de '.fin-arb-nom', dos líneas más abajo. Nunca
   'text-overflow:ellipsis' ni 'white-space:nowrap' en esta rejilla). 'align-items:center' (ya
   presente) centra verticalmente el resto de columnas SIN necesidad de nada más cuando el nombre
   envuelve a dos o más líneas y la fila crece: todas las columnas de esa fila miden su altura
   contra la MISMA fila, más alta ahora, y se centran en ella por igual. */
.fin-scope .fin-arb-fila {
  display: grid; grid-template-columns: minmax(0, calc(54ch + 5.5em)) auto auto;
  justify-content: start; align-items: center; gap: 8px;
  padding: 3px 0;
}
.fin-scope .fin-arb-nom { min-width: 0; overflow-wrap: anywhere; }
.fin-scope .fin-arb-num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-scope .fin-arb-num input.fin-ce-orden { width: 4.5em; text-align: right; }
.fin-scope .fin-arb-acc { display: flex; gap: 6px; white-space: nowrap; }
/* El triángulo de expandir/contraer: botón sin adorno de <button>, mismo color que el texto.
   Important 1 (ronda de corrección de la revisión de rama): el hueco se pinta SIEMPRE, con
   hijos o sin ellos -- si no, el ancho del triángulo (~1.3em con su margen) se suma al de la
   sangría sólo en los nodos CON hijos, y un nodo con hijos queda casi un nivel entero (1.4em) a
   la derecha de su hermano sin hijos del MISMO nivel: la sangría, que es como el árbol comunica
   la profundidad, pasa a comunicar "tiene hijos o no" en su lugar. Sin hijos se pinta un
   <span> vacío del MISMO ancho en vez del <button> (mismo texto -- vacío -- así que no hay nada
   que anunciar ni que tabular para un nodo que no puede expandirse), nunca se omite la caja
   entera. */
.fin-scope .fin-tg {
  border: none; background: none; padding: 0; margin-right: 4px; cursor: pointer;
  color: var(--muted); font-size: .8em; width: 1em; display: inline-block; text-align: center;
}
.fin-scope .fin-tg:hover { color: var(--ink); }
/* El hueco vacío (nodo sin hijos, ver arriba): decorativo, nunca interactivo -- sin esto, el
   cursor cambiaría a "mano" sobre un espacio en blanco que no hace nada. */
.fin-scope .fin-tg[aria-hidden="true"] { cursor: default; pointer-events: none; }
/* Contenedor de los hijos de una fila -- se pliega/despliega con [hidden], nunca recargando el
   árbol (ronda I2 de la Task 5: recargar robaba el foco y hacía inviable reordenar en serie). */
.fin-scope .fin-arb-hijos[hidden] { display: none; }
/* Tipografía por nivel (data-nivel en la fila): distingue Línea > Departamento > Sección > Área >
   Cuenta a simple vista, sin depender sólo de la sangría. --blue es el token de base.css (azul del
   modo oscuro y claro ya resuelto ahí); no se inventa ningún color nuevo.
   EL SELECTOR CUELGA DE '[data-nivel]' A SECAS, NO DE '.fin-arb-fila[data-nivel]' (fix-4.md): las
   dos pantallas comparten el lenguaje visual pero ya no el mecanismo -- en Estructura la fila es
   una rejilla ('.fin-arb-fila'), y en el informe de P&L es un '<tr>' de la propia cascada, para que
   las columnas las alinee el navegador y no nosotros. Con el selector atado a la rejilla haría
   falta una copia de estas tres reglas por pantalla, y "que se vean iguales" pasaría a depender de
   que nadie tocara una sin la otra. */
.fin-scope [data-nivel="linea"] .fin-arb-nom { font-weight: 600; font-size: 1.05em; }
.fin-scope [data-nivel="dep"] .fin-arb-nom { color: var(--blue); }
.fin-scope [data-nivel="sec"] .fin-arb-nom { font-weight: 600; }
/* Área en negrita (petición del usuario, 2026-09-16, con el informe delante): su fila ES el subtotal
   de las cuentas que cuelgan de ella, y sin peso propio se confundía con ellas. No se sombrea -- el
   sombreado queda reservado a los tres niveles de agregación de arriba --, así que aquí la negrita
   es lo único que la separa de su detalle. */
.fin-scope [data-nivel="area"] .fin-arb-nom { font-weight: 600; }
/* El quinto nivel, la cuenta de grupo (Tarea C, 2026-09-16): SIN negrita y sin color propio -- lo
   único que la distingue de su área es un escalón más de sangría, que es justo lo que se quiere
   decir de ella. No hace falta declararlo: hereda el cuerpo normal del panel. Se deja escrito
   porque la ausencia de regla, en una lista donde los otros tres niveles SÍ la tienen, se lee como
   un olvido. */

/* fix-4.md · sombreado y negrita por nivel en el informe de P&L. Petición literal del usuario:
   "hay que sombrear los niveles de Línea cascada, departamento y secciones y sus importes en
   negrita para leer mejor el informe. Las cuentas a nivel de área sin sombrear ni negrita".
   La primera versión usó UN SOLO TONO (--bg) para los tres niveles, confiando en que los separara
   la tipografía. El usuario lo vio en pantalla y pidió lo contrario: "el sombreado del nivel 1
   línea de cascada que sea de color distinto del sombreado de departamento, y el de sección
   también de otro color, o gradientes de más oscuro a más claro del mismo color". Se hizo lo
   segundo -- ver la escala, más abajo. El sombreado dice ahora QUÉ nivel es, no sólo que lo hay.
   Va sobre los '<td>' y no sobre el '<tr>': con 'border-collapse' el fondo de la fila queda por
   debajo del de las celdas y no se vería -- mismo motivo que ya documenta '.fin-drill:hover'.
   Y cuelga de '.fin-pyg-casc', la clase de la tabla del informe, no de '.fin-cascada' a secas: la
   pantalla de configuración de la cascada (js/views/cascada.js) usa esa misma clase y tiene sus
   propias filas '.fin-subtotal', que son una tabla de edición y no un informe que sombrear.
   ESCALA DE TRES TONOS (petición del usuario, 2026-09-16, con el informe delante): un solo tono
   dejaba los tres niveles indistinguibles entre sí. Los tres salen de 'color-mix()' sobre los
   MISMOS dos tokens -- --ink sobre --panel --, en proporción decreciente: más oscuro cuanto más
   alto el nivel. No es un color inventado ni una escala escrita a mano: es el mismo token a tres
   intensidades, así que el modo oscuro lo sigue solo (allí --ink es claro y --panel oscuro, y la
   mezcla aclara en vez de oscurecer, que es la dirección correcta). */
/* '.fin-pyl-casc' añadida en la revisión final del P&L por periodos (hallazgo Important, punto 5):
   la tabla nueva pinta 'class="fin-cascada fin-pyl-casc"' (js/views/pyl_periodos.js) y se quedó
   sin este sombreado -- cuatro niveles y hasta veintiséis columnas distinguidos sólo por peso de
   letra. MISMA escala de tres tonos, sin inventar ningún color nuevo: es la razón de ser de esta
   regla, no un capricho estético, y la petición del usuario de arriba pedía justo esto. */
/* '.fin-cmp-casc' añadida en la Task 6 de la comparativa de sociedades (2026-09-29,
   js/views/comparativa.js): su cascada tiene el mismo nivel "línea" que pyg.js/pyl_periodos.js
   (las trece líneas de §9.3, una fila por sociedad al lado), así que se extiende la MISMA lista de
   selectores en vez de duplicar la regla. */
.fin-scope .fin-pyg-casc tr[data-nivel="linea"] > td,
.fin-scope .fin-pyl-casc tr[data-nivel="linea"] > td,
.fin-scope .fin-cmp-casc tr[data-nivel="linea"] > td,
.fin-scope .fin-pyg-casc tr.fin-subtotal > td,
.fin-scope .fin-pyl-casc tr.fin-subtotal > td,
.fin-scope .fin-cmp-casc tr.fin-subtotal > td { background: color-mix(in srgb, var(--ink) 9%, var(--panel)); }
/* '.fin-bal-casc' añadida en la Task 5 del Balance de gestión (2026-09-23, js/views/balance.js):
   su árbol tiene tres niveles de masa -- nunca cuatro, no hay una "línea" que los envuelva --, así
   que se pinta con las MISMAS tres reglas dep/sec/area que ya usa el árbol de cuatro niveles de
   pyg.js (departamento > sección > área > cuenta), sin sumarse nunca a la regla de "linea" de
   arriba: el Balance no pinta ningún data-nivel="linea". No se duplica ninguna regla, se extiende
   la lista de selectores -- mismo criterio que ya se aplicó aquí para '.fin-pyl-casc'. */
/* '.fin-eeff-casc' añadida en la Task 6 de EEFF oficiales (2026-09-24, js/views/eeff_balance.js):
   MISMO caso que '.fin-bal-casc' de arriba -- un árbol reconstruido en el cliente a partir de
   'padre_id' que, a partir de la profundidad 2, se pinta siempre como "area" (fin_eeff_importar()
   deja escrito que el fichero real salta de nivel 5 a nivel 7 sin pasar por el 6, así que hay más
   de tres niveles reales; no hay un cuarto estilo que inventar, se reutiliza el de "area" para
   todos los niveles hondos, igual que hace eeff_balance.js con 'nivelDato'). Se extiende la misma
   lista de selectores, nunca se duplica una regla. */
/* '.fin-cmp-casc' (Task 6 de la comparativa de sociedades, 2026-09-29): mismo árbol de cuatro
   niveles -- departamento/sección/área/cuenta -- que pyg.js, sólo que con N sociedades al lado en
   vez de cuatro columnas de periodo. Se extiende la misma lista de selectores. */
.fin-scope .fin-pyg-casc tr[data-nivel="dep"] > td,
.fin-scope .fin-pyl-casc tr[data-nivel="dep"] > td,
.fin-scope .fin-bal-casc tr[data-nivel="dep"] > td,
.fin-scope .fin-eeff-casc tr[data-nivel="dep"] > td,
.fin-scope .fin-cmp-casc tr[data-nivel="dep"] > td { background: color-mix(in srgb, var(--ink) 5.5%, var(--panel)); }
.fin-scope .fin-pyg-casc tr[data-nivel="sec"] > td,
.fin-scope .fin-pyl-casc tr[data-nivel="sec"] > td,
.fin-scope .fin-bal-casc tr[data-nivel="sec"] > td,
.fin-scope .fin-eeff-casc tr[data-nivel="sec"] > td,
.fin-scope .fin-cmp-casc tr[data-nivel="sec"] > td { background: color-mix(in srgb, var(--ink) 2.5%, var(--panel)); }
/* Los importes de esos mismos tres niveles, en negrita. Los subtotales de la cascada quedan FUERA
   de esta regla a propósito: ya van a 700 por 'tr.fin-subtotal td' y bajarlos a 600 los debilitaría
   justo donde más se leen. Por eso una fila de subtotal no lleva 'data-nivel' (js/views/pyg.js) --
   lleva su clase, que es más específica y más fuerte -- y aun así se sombrea, arriba, porque es un
   nivel de agregación como los otros. */
.fin-scope .fin-pyg-casc tr[data-nivel="linea"] > td.num,
.fin-scope .fin-pyl-casc tr[data-nivel="linea"] > td.num,
.fin-scope .fin-cmp-casc tr[data-nivel="linea"] > td.num,
.fin-scope .fin-pyg-casc tr[data-nivel="dep"] > td.num,
.fin-scope .fin-pyl-casc tr[data-nivel="dep"] > td.num,
.fin-scope .fin-bal-casc tr[data-nivel="dep"] > td.num,
.fin-scope .fin-eeff-casc tr[data-nivel="dep"] > td.num,
.fin-scope .fin-cmp-casc tr[data-nivel="dep"] > td.num,
.fin-scope .fin-pyg-casc tr[data-nivel="sec"] > td.num,
.fin-scope .fin-pyl-casc tr[data-nivel="sec"] > td.num,
.fin-scope .fin-bal-casc tr[data-nivel="sec"] > td.num,
.fin-scope .fin-eeff-casc tr[data-nivel="sec"] > td.num,
.fin-scope .fin-cmp-casc tr[data-nivel="sec"] > td.num,
.fin-scope .fin-pyg-casc tr[data-nivel="area"] > td.num,
.fin-scope .fin-pyl-casc tr[data-nivel="area"] > td.num,
.fin-scope .fin-bal-casc tr[data-nivel="area"] > td.num,
.fin-scope .fin-eeff-casc tr[data-nivel="area"] > td.num,
.fin-scope .fin-cmp-casc tr[data-nivel="area"] > td.num { font-weight: 600; }
/* El área SÍ va en negrita desde la segunda pasada del usuario sobre el informe: su fila es el
   subtotal de las cuentas que cuelgan de ella, y sin peso propio se confundía con su detalle. Pero
   NO se sombrea -- el sombreado queda para los tres niveles de agregación de arriba, y es lo que la
   distingue de ellos. La cuenta, el quinto nivel, sigue sin sombreado y sin negrita: es el detalle,
   y eso ES la decisión, no un olvido. En el Balance (arriba) el nivel 3 de masa hace el papel de
   "area" -- subtotal de sus cuentas, en negrita y sin sombra -- y las cuentas mismas no llevan
   'data-nivel' en absoluto, mismo criterio. */
/* Una fila plegada se oculta con [hidden] (refrescarFilas(), js/views/pyg.js -- y su copia en
   js/views/balance.js). El navegador ya lo hace por su hoja de estilos por defecto, pero aquí se
   declara: de esta regla depende que un informe abierto no se vea entero desplegado, y no conviene
   que dependa de nada que no esté escrito -- mismo criterio que '.fin-arb-hijos[hidden]', más
   arriba. */
.fin-scope .fin-pyg-casc tr[hidden],
.fin-scope .fin-pyl-casc tr[hidden],
.fin-scope .fin-bal-casc tr[hidden],
.fin-scope .fin-eeff-casc tr[hidden],
.fin-scope .fin-cmp-casc tr[hidden] { display: none; }

/* Task 6 de la comparativa de sociedades (2026-09-29, js/views/comparativa.js): cabecera de DOS
   filas -- sociedad arriba (con su error de bloque si lo hay), € · % · €/kg debajo de cada una --,
   que la regla genérica de arriba ('.fin-cascada thead th { position: sticky; top: 0 }') no cubre:
   con las dos filas en 'top: 0' se superpondrían entre sí al desplazar en vertical, porque cada
   'th' se pega por su cuenta sin saber de la fila de al lado.
   La primera fila (rowspan="2": '#', Línea, cada sociedad y Δ €/kg) se queda en 'top: 0'; la
   segunda (las tres subcolumnas) se desplaza el alto de la primera. '2.4em' no es una medida
   exacta de píxel -- que se desincronizaría con el primer cambio de tipografía -- sino el mismo
   cálculo que ya usa 'fin-th-2l' más arriba para una cabecera de dos líneas: el padding de la
   celda (6px arriba + 6px abajo, ~.75em con la tipografía base) más una línea de texto. */
.fin-scope .fin-cmp-casc thead tr:first-child th { top: 0; }
.fin-scope .fin-cmp-casc thead tr:last-child th { top: 2.4em; }

/* La fila única de acciones de la comparativa (petición del usuario, 29-09-2026): Expandir/
   Contraer a la izquierda, Calcular/Exportar a la derecha, y aire respecto a los bloques de
   filtros de arriba. Los dos hijos son los .fin-form que ya traen su propio espaciado interno. */
.fin-scope .fin-cmp-acciones {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.fin-scope .fin-cmp-acciones .fin-form { margin: 0; }
.fin-scope .fin-cmp-acciones[hidden] { display: none; }

/* P&L de gestión 2 (spec 2026-10-01): cabecera de cuadre, avisos y sangría de las filas. */
.fin-scope .fin-pyg2-cuadre { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 6px; font-weight: 600; }
.fin-scope .fin-pyg2-cuadre.fin-pyg2-descuadre { color: #b00020; }
.fin-scope .fin-pyg2-aviso { margin: 4px 0; padding: 6px 10px; border-left: 3px solid #e0a800; background: rgba(224, 168, 0, .08); }
.fin-scope .fin-cmp-casc tr[data-nivel="prod"] td:first-child { padding-left: 36px; }
.fin-scope .fin-cmp-casc tr[data-nivel="fila"] td:first-child { padding-left: 18px; }
.fin-scope .fin-pyg2-grupo-sel { font-size: .9em; margin-left: 6px; }

/* El detalle comparado (2026-09-29): clic en un importe € y un panel superpuesto con los
   asientos del ámbito en dos columnas, una por bloque. El cursor sólo se ofrece cuando la FILA
   lleva ámbito (los subtotales y la pseudo-cuenta de variación no lo llevan). */
.fin-scope .fin-cmp-casc tr[data-amb-tipo] td.fin-cmp-abre { cursor: pointer; }
.fin-scope .fin-cmp-casc tr[data-amb-tipo] td.fin-cmp-abre:hover { text-decoration: underline; }
.fin-cmp-det-fondo {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.fin-cmp-det { max-width: 1100px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; }
.fin-cmp-det .panelpad { overflow: auto; }
.fin-cmp-det-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.fin-cmp-det-col .fin-tabla { max-height: 55vh; overflow: auto; }
.fin-cmp-det-col h4 { margin: 0 0 6px; }
@media (max-width: 760px) { .fin-cmp-det-cols { grid-template-columns: 1fr; } }

/* La conciliación M.O. RR.HH. & Financials (Task 7, 2026-09-29): el desplegable mensual de la
   fila 4 (dif_nomina) -- MISMO tono apagado que ya usa el módulo para lo secundario ('.fin-nota',
   más arriba), para que las doce filas de mes no compitan visualmente con las diez del puente. */
.fin-scope .fin-cmo-casc tr.fin-cmo-mes td { color: var(--muted); font-size: 13px; }

/* El porcentaje sobre ventas (spec 2026-09-19, §3.2). Tres decisiones:

   COLOR 'var(--blue)' y no un hexadecimal: el contrato del portal (§1) sólo admite los tokens de
   base.css, y es lo que hace que el tema oscuro siga funcionando -- '--blue' es #3168c4 sobre
   fondo claro (azul oscuro, que es lo que se pidió) y #5b8def en oscuro, sin escribir una regla
   'body.dark' aquí.

   TAMAÑO RELATIVO Y NO EN PÍXELES: no porque el importe mida distinto según la fila hoy -- el
   '1.05em' de una fila de línea vive en el <span> del NOMBRE ('.fin-arb-nom', más arriba), no en
   la celda de importe ni en la de porcentaje, así que esta celda no hereda de él -- sino de cara
   a lo que venga: '.85em' se mide sobre lo que sea que la celda termine heredando (el tamaño base
   de '.fin-cascada td', el de una hoja de impresión, el que cambie mañana en shared/css/base.css),
   así que el porcentaje sigue leyéndose "un poco más pequeño que el importe de al lado" pase lo
   que pase con ese tamaño base, sin volver a tocar este número.

   'font-variant-numeric' lo hereda de '.num', que ya lo pone: los porcentajes de una columna se
   leen alineados por la coma como los importes. */
.fin-scope .fin-cascada .fin-pct { color: var(--blue); font-size: .85em; }
/* La CABECERA del '%' en el mismo azul, EXPLÍCITO y no heredado de la regla genérica de arriba:
   '.fin-pct' vale hoy tanto para <td> como para <th> (thPct(), js/views/pyg.js, marca el <th> con
   la misma clase), pero es una coincidencia de la que no conviene depender -- el día que alguien
   acote esa regla a 'td.fin-pct' (el sitio natural en el que pensarla, porque las celdas de datos
   son las que compiten de verdad en la tabla) la cabecera perdería el azul en silencio y volvería
   a leerse en '--muted', como cualquier otro <th>. 'thead th.fin-pct' iguala la familia de
   selectores de '.fin-scope .fin-cascada thead th' (más arriba, la regla que pone '--muted') y le
   gana por clases en vez de apoyarse en el recuento de la regla genérica de porcentaje, así que
   sigue ganando pase lo que pase con ella. Sin '!important': esta hoja no lleva ninguno y no es
   donde se empieza. */
.fin-scope .fin-cascada thead th.fin-pct { color: var(--blue); }

/* La columna €/kg vendido (spec 2026-09-27-financials-euro-kg, Task 6), MISMO tratamiento que
   '.fin-pct' arriba (tamaño relativo, alineación numérica heredada de '.num') pero en '--brand' y
   no en '--blue': son dos lecturas distintas de la misma celda de al lado -- el peso relativo
   sobre las ventas y el precio medio por kilo -- y compartir color las confundiría a primer
   vistazo, justo lo que dos colores existen para evitar. */
.fin-scope .fin-cascada .fin-eurkg { color: var(--brand); font-size: .85em; }
.fin-scope .fin-cascada thead th.fin-eurkg { color: var(--brand); }

/* Las dos cabeceras largas a dos líneas, para que las cuatro columnas nuevas quepan. Va por CSS y
   NO metiendo un salto en la traducción: 'fin.pyg.anterior' y 'fin.pyg.anteriorAcumulado' no son
   claves privadas de esta pantalla -- las usa js/views/detalle.js para rotular el ámbito y están
   duplicadas en FIN_EXPORT_TEXTOS para el Excel --, así que el salto se colaría en dos sitios
   donde estorba, y esc() lo imprimiría literal.
   El tope de ancho es lo que fuerza el corte; sin él 'white-space: normal' no parte nada, porque
   la tabla se mide con 'width: max-content' y le daría a la cabecera todo el ancho que pida. */
.fin-scope .fin-pyg-casc thead th.fin-th-2l { white-space: normal; max-width: 7.5em; }

.fin-scope .fin-cascada input.fin-casc-formula { width: 9em; }
.fin-scope .fin-cascada input.fin-eq-debe, .fin-scope .fin-cascada input.fin-eq-haber { width: 10em; }

/* Pantalla "Sin clasificar" (js/views/sin_clasificar.js). Ocho columnas, y tres de ellas con
   texto libre: con el tope general de 34em por celda larga la tabla se iba por encima de los
   2.000px, y la columna de acción —el campo de la cuenta de grupo y su botón— quedaba fuera del
   panel. El usuario no la veía ni podía alcanzarla, porque la barra de desplazamiento lateral no
   siempre es visible: Windows y macOS traen activadas las barras superpuestas, que sólo aparecen
   mientras algo se mueve.
   Dos medidas, y hacen falta las dos. Aquí el texto largo se topa mucho antes que en el resto de
   tablas, y la columna de acción se ANCLA a la derecha para estar siempre a la vista por ancha
   que sea la tabla. El fondo opaco no es decorativo: sin él, el contenido desplazado se vería
   por debajo de la columna anclada. */
.fin-scope .fin-sc .fin-cascada td.larga > span { max-width: 16em; }
.fin-scope .fin-cascada td.fin-sc-accion,
.fin-scope .fin-cascada th.fin-sc-accion {
  position: sticky;
  right: 0;
  background: var(--panel);
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
/* Anchos propios: el campo de cuenta de grupo cabe un código de siete dígitos y el de traducción
   una frase corta. El 22em por defecto de .fin-cascada input los haría inmanejables aquí. */
.fin-scope .fin-cascada input.fin-sc-grupo { width: 9em; margin-right: 6px; }
.fin-scope .fin-cascada input.fin-sc-es { width: 14em; margin-right: 4px; }

/* La columna del nombre, anclada a la izquierda (spec P&L por periodos, §3.3, js/views/pyl_periodos.js).
   Con veintiséis columnas, desplazarse a la derecha deja la fila sin sujeto: una hilera de
   números sin saber de qué línea son.
   EL FONDO OPACO NO ES DECORATIVO, y es la lección que ya pagó la columna de acción de «Sin
   clasificar» (arriba, .fin-sc-accion): sin él, el contenido que se desplaza por debajo se ve a
   través de la columna anclada justo donde más se mira.
   Y NO TAPA EL SOMBREADO POR NIVEL (revisión final, punto 5): el `<td>` de esta celda es TAMBIÉN
   el que sombrean las reglas de `tr[data-nivel="..."] > td` de más arriba, y esas reglas GANAN sin
   tocar nada aquí -- las dos tienen tres selectores de clase/atributo (`.fin-scope`+`.fin-pyl-casc`
   + un tercero), pero la de nivel añade DOS selectores de tipo (`tr` y `td`) contra el `td` suelto
   de ésta, así que su especificidad es mayor en el desempate. El fondo opaco de aquí sólo se
   aplica donde ninguna regla de nivel compite (la fila de cuenta, sin sombreado por diseño). */
.fin-scope .fin-pyl-casc td.fin-pyl-nombre,
.fin-scope .fin-pyl-casc th.fin-pyl-nombre {
  position: sticky;
  left: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

/* Fase 4 · las filas pulsables del drill-down de la cuenta de resultados (js/views/pyg.js).
   `.fin-drill` era una clase que sólo existía en el JS: la fila se abría al pulsarla, pero nada
   lo decía -- ni el cursor cambiaba ni la fila reaccionaba al pasar por encima --, así que los
   cuatro niveles de §9.6 estaban implementados y no los encontraba nadie. Un afford que no se ve
   es un afford que no existe.
   El fondo del hover sale de --line, el mismo token que ya dibuja los separadores de fila, así
   que sigue al modo oscuro sin un solo hexadecimal nuevo. Va sobre los `td` y no sobre el `tr`
   porque en una tabla con `border-collapse` el fondo de la fila queda por debajo del de las
   celdas y no se vería. */
.fin-scope .fin-cascada tr.fin-drill { cursor: pointer; }
.fin-scope .fin-cascada tr.fin-drill:hover > td { background: var(--line); }

/* Task 6 · la CASILLA pulsable de la cuenta de resultados (js/views/pyg.js): cada celda numérica
   abre el Detalle de asientos de esa fila en esa columna (§3.2). Mismo argumento que el bloque de
   arriba -- un afford que no se ve es un afford que no existe --, y mismo token: el fondo del
   hover sale de --line, el que ya dibuja los separadores de fila, así que sigue al modo oscuro sin
   un solo hexadecimal nuevo.
   Se distingue del hover de FILA de '.fin-drill' porque aquí el realce es de UNA celda: es
   exactamente la diferencia que hay que enseñar, porque son dos acciones distintas sobre la misma
   fila (el nombre despliega, la cifra abre el detalle). */
.fin-scope .fin-cascada td.fin-celda { cursor: pointer; }
.fin-scope .fin-cascada td.fin-celda:hover { background: var(--line); }
/* Alcanzable con el teclado ('tabindex="0"' en celdaImporte(), js/views/pyg.js): el foco tiene que
   VERSE, o la pantalla es navegable sólo con el ratón. ':focus-visible' y no ':focus' para no
   dibujar el recuadro tras un clic de ratón.
   NO lleva 'role="button"', y eso está decidido, no olvidado: ese role sustituiría la semántica de
   celda de tabla por la de botón, así que un lector de pantalla dejaría de anunciar la fila y la
   columna de la cifra. El razonamiento completo está junto al código que pinta la celda
   (js/views/pyg.js, celdaImporte()). Este comentario lo decía al revés y era justo el que habría
   hecho que alguien "arreglara" un olvido que no existe (M2 de la ronda de corrección). */
.fin-scope .fin-cascada td.fin-celda:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Task 6 · el Detalle de asientos (js/views/detalle.js). Los tres bloques que sostienen sus tres
   invariantes: el ámbito escrito, el total del conjunto separado del recuento de la página, y el
   aviso del ajuste. */
/* El ámbito y el rango: lo primero que se lee al llegar desde una casilla (§3.2). Se separa del
   resto con el mismo borde de siempre en vez de con un color propio. */
.fin-scope .fin-det-cab { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; margin: 10px 0; }
.fin-scope .fin-det-cab p { margin: 2px 0; }
/* El total del CONJUNTO FILTRADO, en grande. La separación con el recuento de la página no es un
   detalle estético: §3.4 dice que "un total que cambia al pasar de página es un número
   equivocado", y la manera de que no se confundan es que no se parezcan. El recuento de la página
   va en '.fin-nota' (gris, 12px, la clase que ya usa todo el módulo para lo secundario). */
.fin-scope .fin-det-total { margin: 10px 0 2px; font-size: 15px; }
.fin-scope .fin-det-cifra { font-weight: 700; font-variant-numeric: tabular-nums; }
/* El aviso del ajuste (§3.5): destacado con --warn, que es el token de "esto hay que leerlo" del
   portal, y NUNCA oculto ni plegado. El borde a la izquierda lo saca del flujo de notas grises
   sin necesitar un fondo de color. */
.fin-scope .fin-det-ajuste { border-left: 3px solid var(--warn); padding: 6px 0 6px 10px; margin: 10px 0; }
/* Y el descuadre contra la casilla, si lo hubiera: --neg, el token de error, porque eso ya no es
   una explicación sino algo que está mal. */
.fin-scope .fin-det-descuadre { border-left: 3px solid var(--neg); padding: 6px 0 6px 10px; margin: 10px 0; color: var(--neg); }
/* El «Página X de Y» entre los dos botones del paginador. 'align-self: end' + el padding lo dejan
   sobre la MISMA línea base que los botones: '.fin-form' es un flex con 'align-items: end', y en
   una fila cuya altura la marca el '<label>' del tamaño de página (que es más alto, porque lleva
   su rótulo encima), un texto centrado quedaría flotando por encima de los botones. */
.fin-scope .fin-det-pag { align-self: end; padding-bottom: 8px; color: var(--muted); font-size: 13px; }
/* La celda del concepto en español del Detalle de asientos (spec del glosario, 2026-09-17).
   Mismo tratamiento que la celda de traducción de "Sin clasificar" (input.fin-sc-es, más arriba):
   un campo de ancho fijo para que la columna no baile de fila en fila, y el botón pegado a él.

   EL ANCHO SALE DE MEDIR LOS CONCEPTOS, no de una impresión. Sobre las 2.105 entradas sembradas
   en dev el 2026-09-19: media de 26 caracteres, y el 99 % de las descripciones (1.982 de 2.003) y
   el 95 % del catálogo de subcuentas caben en 40. Las 16em de antes daban unos 30 caracteres de
   hueco visible -- por debajo incluso de las 22em que esta misma tabla usa por defecto --, así
   que un concepto de longitud corriente se leía cortado y había que recorrerlo con el cursor
   para saber qué decía. 26em dan sitio a unos 50, que cubre todo salvo un puñado de frases
   largas (la más larga tiene 121 caracteres y no cabría en ningún ancho razonable).

   ENSANCHAR ESTA COLUMNA ES LO QUE HACE APARECER LA BARRA HORIZONTAL en pantallas estrechas, y
   por eso no hace falta añadir ninguna: '.fin-tabla' ya es 'overflow-x: auto' con tope de altura
   (arriba del todo), y la tabla se mide con 'width: max-content'. Mientras la columna era
   estrecha la tabla cabía y la barra no tenía motivo para salir; con el ancho de verdad, sale
   sola cuando hace falta y sigue sin salir cuando no. */
.fin-scope .fin-cascada input.fin-det-es { width: 26em; margin-right: 4px; }
/* La procedencia de la celda del concepto, cuando sale de una subcuenta de almacén y no de la
   descripción (spec de la contrapartida, 2026-09-17). Va discreta -- es una pista, no un dato del
   informe -- pero siempre visible: quien edita ahí tiene que saber que toca el catálogo de un
   material y no la fila que tiene delante. */
.fin-scope .fin-det-subcuenta { margin-left: 6px; color: var(--muted); font-size: 12px; cursor: help; }
/* El gemelo de impresión de la celda del concepto: invisible en pantalla, donde manda el campo.
   Selector largo a propósito: '.fin-scope .fin-cascada td.larga > span' (más arriba) es más
   específico que la clase sola y le ganaría. */
.fin-scope .fin-cascada td.larga > span.fin-det-es-print { display: none; }

/* Los bloques de la pantalla de Intercompañía (spec 5A, §5). Cada uno lleva su título; el margen
   superior los separa sin necesitar un panel por bloque, que rompería la lectura de arriba abajo
   -- la pantalla se lee como una lista de cosas, no como cuatro tarjetas sueltas.
   El `.fin-nota + h4` va con el mismo margen y no es un extra: los dos bloques que pueden salir
   vacíos (sin huecos, sin cuentas marcadas) se pintan como una nota y no como tabla, y el mapa
   COMPLETO -- que es el estado al que se aspira -- es justo el que más notas tiene seguidas. */
.fin-scope .fin-tabla + h4,
.fin-scope .fin-nota + h4 { margin-top: 18px; }

/* Al imprimir, el tope de altura y la cabecera fija sobran y hacen daño: una tabla acotada a
   70vh saldría cortada por donde estuviera el desplazamiento, y una cabecera `sticky` se
   superpone en cada salto de página. En papel no hay barras que alcanzar, así que se deshacen
   las tres cosas. El módulo declara `printCss` en js/app-financials.js: esto se imprime de
   verdad. */
/* Cabecera de documento (Task 4 de la spec de exportación, 2026-09-16): sociedad, ejercicio,
   rango de periodos y fecha de generación -- MISMO criterio que la cabecera de la exportación a
   Excel (FIN_EXPORT_TEXTOS, api_fin.php), que un informe contable no se puede archivar ni
   contrastar sin esos cuatro datos. Oculta en pantalla (display:none) y visible SÓLO al
   imprimir: js/views/pyg.js y js/views/conciliacion.js la rellenan con los filtros vigentes. */
.fin-scope .fin-print-cab { display: none; }

/* La pantalla de mantenimiento de epígrafes (js/views/eeff_epigrafes.js, §5 de la spec de EEFF
   oficiales). Tres bloques, los tres de la ola de arreglos final de la rama.

   (1) EL ACUSE DE GUARDADO. '.fin-eeff-aviso' faltaba: el diff de la Task 7 la escribió en el JS
   pero sólo añadió '.fin-eeff-casc' aquí, así que el acuse salía con el tamaño y el color del
   texto normal de la tabla, indistinguible de un dato de la fila. Mismo tratamiento que
   '.fin-ce-ordenAviso' de centros.js, que se apoya en '.fin-nota' (gris, 12px) para lo mismo:
   aquí la clase va sola en el marcado, así que las dos declaraciones se escriben aquí. */
.fin-scope .fin-eeff-aviso { color: var(--muted); font-size: 12px; margin-left: 6px; }

/* (2) LA CELDA DE EPÍGRAFE, que es un botón y no un desplegable hasta que se pulsa (ver la
   cabecera de js/views/eeff_epigrafes.js: con 630 epígrafes y 621 cuentas, un <select> por celda
   eran 783.702 <option>). Se pinta como texto -- sin fondo, sin borde, con la tipografía de la
   tabla -- porque en una tabla de cientos de filas 1.242 botones con aspecto de botón serían una
   pared de cajas; el afford lo dan el cursor y el FONDO al pasar por encima (':hover' de abajo),
   MISMO criterio que '.fin-celda' de la casilla pulsable de PyG, más arriba, y mismo token
   '--line' para el realce -- no un subrayado, no hay ningún 'text-decoration' en este bloque
   (A4 de la re-revisión final: este comentario decía "subrayado" y llevaba describiendo mal su
   propia regla). Alineado a la izquierda y con 'text-align: inherit' porque un <button> centra su
   texto por defecto y aquí es una etiqueta de dato, no un rótulo. */
.fin-scope .fin-eeff-epiBoton {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
  /* A6 de la re-revisión final: MISMO tope de ancho que '.fin-eeff-epi' (abajo), que hasta esta
     ronda sólo llevaba el <select> y no el botón de la celda cerrada. Con el fichero real la
     etiqueta más larga son 198 caracteres, y sin este tope cada fila con una ruta así ocupaba
     varias líneas en una tabla de 621 filas. Recortada con puntos suspensivos -- el 'title' de
     botonEpigrafe() (js/views/eeff_epigrafes.js) sigue llevando la ruta completa, y ahora SÍ hace
     falta: es la única forma de leerla entera con la celda cerrada. */
  max-width: 32em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-scope .fin-eeff-epiBoton:hover { background: var(--line); }
/* Alcanzable con el teclado sin nada añadido -- es un <button> de verdad --, pero el foco tiene
   que VERSE. ':focus-visible' y no ':focus' para no dibujar el recuadro tras un clic de ratón,
   igual que en '.fin-celda'. */
.fin-scope .fin-eeff-epiBoton:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* El epígrafe guardado que YA NO ESTÁ en el catálogo (el patrón anti-borrado que documenta
   selectEpigrafe()). El texto ya lo dice ('fin.eeff.epigrafeFueraCatalogo'), pero en una tabla
   larga hay que poder encontrarlo sin leerla entera.
   BORDE, NO COLOR DE TEXTO (A5 de la re-revisión final): la primera versión de esta regla ponía
   '--warn' como 'color', que en todo el resto del módulo sólo se usa como color de BORDE o de
   FONDO (nunca de texto) -- '.fin-det-ajuste', más arriba, es el único precedente, y su propio
   comentario explica que el borde evita necesitar fondo de color precisamente porque el token no
   está pensado para texto. El contraste de '--warn' como texto de 13px sobre '--panel' no se
   puede verificar desde este repositorio: el token lo define el portal, no este fichero. En vez
   de dejarlo a medias (medido a ciegas, o sin medir y a la vista), se vuelve al patrón del módulo:
   mismo borde de 3px que ya usa '.fin-det-ajuste', que no depende de ningún contraste de texto. */
.fin-scope .fin-eeff-epiHuerfano { border-left: 3px solid var(--warn); padding-left: 6px; }
/* (3) El desplegable, mientras existe. Tope de ancho porque sus opciones llevan la RUTA completa
   de la rama (ver la cabecera del JS) y sin él el <select> cerrado se estiraría hasta el ancho de
   la opción más larga, arrastrando la tabla entera con él. La lista desplegada la dibuja el
   navegador y no la recorta este tope. MISMO valor que '.fin-eeff-epiBoton' de arriba (A6): la
   celda tiene que medir lo mismo abierta que cerrada, o cambiar de ancho al pulsarla. */
.fin-scope .fin-eeff-epi { max-width: 32em; }

@media print {
  .fin-scope .fin-tabla { max-height: none; overflow: visible; }
  .fin-scope .fin-cascada thead th { position: static; }
  .fin-scope .fin-cascada td.fin-sc-accion,
  .fin-scope .fin-cascada th.fin-sc-accion { position: static; }
  /* Task 6 de la spec de P&L por periodos: en papel no hay nada que desplazar, y una celda
     anclada se superpondría en cada salto de página -- se deshace igual que la cabecera fija y
     la columna de acción de arriba. */
  .fin-scope .fin-pyl-casc td.fin-pyl-nombre,
  .fin-scope .fin-pyl-casc th.fin-pyl-nombre { position: static; }
  /* Fuera lo que no es el informe: filtros, botones (Excel, PDF, expandir/contraer todo) y los
     triángulos de plegado. La clase real del formulario de filtros es '.fin-form' -- el pliego de
     esta tarea decía '.fin-filtros', que no existe en ningún js/views/*.js (comprobado con grep);
     con ese nombre la regla no habría ocultado nada. */
  .fin-scope .fin-form, .fin-scope .btn, .fin-scope .fin-tg { display: none !important; }
  /* Al imprimir se cambian los papeles: el campo de texto desaparece -- se imprimiría como una
     caja editable, y el botón ✓ ya lo oculta la regla de .btn de aquí arriba -- y sale el <span>,
     que fluye dentro de la celda y parte líneas. */
  .fin-scope input.fin-det-es { display: none !important; }
  .fin-scope .fin-cascada td.larga > span.fin-det-es-print { display: inline-block; }
  /* La marca de procedencia es una ayuda para quien EDITA, no un dato del informe -- y en el papel
     ni siquiera puede explicarse, porque el title no se imprime. Quedaría un código gris flotando
     junto al concepto, sin contexto, en un documento que se archiva y se manda fuera. */
  .fin-scope .fin-det-subcuenta { display: none !important; }
  /* Utilidad genérica para el resto de chrome que sólo tiene sentido en pantalla (el aviso de
     que el PDF refleja lo desplegado, y el mensaje de error de la exportación) -- SÓLO aquí,
     dentro de @media print: fuera de él ocultaría esa nota también en pantalla, que es
     exactamente donde tiene que leerse. Mismo nombre de clase que ya usa shell.js
     (printHtmlNode) para lo mismo por otro camino -- no se inventa un segundo vocabulario para
     "esto no se imprime". */
  .fin-scope .noprint { display: none !important; }
  /* La cabecera de documento, oculta en pantalla (arriba), se muestra sólo aquí. */
  .fin-scope .fin-print-cab { display: block; }
  /* La cabecera de la tabla, en CADA página: sin esto, de la segunda en adelante nadie sabe qué
     columna está leyendo. */
  .fin-scope .fin-cascada thead { display: table-header-group; }
  /* Ninguna fila partida entre dos páginas. */
  .fin-scope .fin-cascada tr { break-inside: avoid; }
  /* El sombreado por nivel se conserva: en gris impreso sigue siendo lo que hace legible la
     jerarquía. Los navegadores lo quitan por defecto al imprimir. */
  .fin-scope .fin-pyg-casc tr > td,
  .fin-scope .fin-pyl-casc tr > td,
  .fin-scope .fin-cmp-casc tr > td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Minor de la ronda de corrección 1: en pantalla 'width: max-content' deja crecer la tabla a su
     ancho natural y el contenedor desplaza en horizontal cuando no cabe (regla de arriba, línea
     51). En papel no hay nada que desplazar, así que sin este reseteo la tabla de PyG -- seis
     columnas, nombres largos -- se corta por la derecha en vez de ajustarse al ancho de la
     página, que es justo lo primero que se ve en la vista previa. */
  .fin-scope .fin-tabla > .fin-cascada { width: 100%; min-width: 0; }
  /* Task 6 · en papel una casilla no se puede pulsar, así que su afford sobra: el cursor no se
     imprime, pero el realce del foco sí dibujaría un recuadro en una celda al azar -- la que
     tuviera el foco al pulsar «Imprimir» -- que en el PDF archivado no significa nada. */
  .fin-scope .fin-cascada td.fin-celda:focus-visible { outline: none; }
}