/* ============================================================================
EL PANEL — ESTILO
============================================================================
Se apoya en los tokens de marca.css y no redeclara ni un color de marca. Lo
que hay aquí es la maqueta de un panel: barra superior, cajón de navegación,
tablas densas, formularios.
DESDE EL 28 SEP 2026 USA EL SISTEMA DE DISEÑO DE LA WEB (skill
diseno-trufas, muestrario en somostrufas.org/muestra): los tamaños son
`--tipo-*`, los textos `--texto-1/2/3`, los espacios grandes `--esp-*` con
nombre, los biseles y aros los de marca.css por escalones de alto, y NO HAY
SOMBRAS: las cajas se separan por tono. La escala propia que tenía
(`--tx-*`, `--tit-*`, `--elev-*`, un `--filo-xs` de 6 px que pisaba el de
5 de marca) se retiró ese día. Lo único que se queda es lo que la web no
tiene: los pasos de 4 px de dentro de un control (`--esp-1…4`, apuntados
como excepción en la skill), alturas de control y duraciones.
POR QUÉ NO SE REUSA base.css, QUE ES LA HOJA DE LA WEB PÚBLICA. Porque no
sirve para esto: ahí viven el nav, el hero y las tarjetas de una web de
cara al público, y ninguno se parece a un panel. Y porque en base.css
`.panel` es el desplegable del menú móvil — el mismo nombre para dos cosas
distintas es el bug que aún no ha pasado.
Lo que sí comparten los dos sitios está en DOS hojas de assets/, que el
panel recibe copiadas al publicarse (scripts/comun-panel.mjs):
marca.css —las tipografías y el :root de tokens— y componentes.css
—botones, píldoras, `.caja`, el menú de cuenta y `.reveal`—. Esta hoja se
carga después y solo añade lo que es del panel.
EL RESET VA AQUÍ Y NO EN marca.css, a propósito: marca.css es la marca, no
la maqueta, y quien la cargue debe recibir colores y letras, no reglas que
le muevan el layout.
============================================================================
LO QUE HAY QUE SABER ANTES DE TOCAR NADA: `clip-path` SE COME TRES COSAS
============================================================================
El bisel de la marca es un `clip-path`, y un clip recorta TODO lo que pinta
el elemento. Eso explica tres cosas que parecían decisiones y eran
consecuencias:
· EL BORDE DESAPARECE en las dos esquinas cortadas. Se veía en cualquier
ficha: el marco se interrumpía justo en el chaflán.
· LA SOMBRA EXTERIOR NO SE VE NUNCA, que es por qué en 322 líneas no había
ni una: no es que no se quisiera profundidad, es que no se habría visto.
· EL `outline` DEL FOCO TAMPOCO SE VE. Ningún botón ni entrada de la barra
enseñaba dónde estaba el teclado. Era un fallo de accesibilidad real.
Las tres salidas, y se usan en todo el archivo:
· marco → en una caja opaca grande, la CAPA DOBLE de `.caja`
(componentes.css); en lo pequeño o translúcido, UN pseudo con forma de
aro (`--filo-xs`, `--filo-sm` en marca.css) del escalón de su alto,
· sombra → ninguna. La skill lo prohíbe: la profundidad es de tono
(`--surface` sobre `--ink`). Hasta el 28 sep 2026 aquí iba un
`filter: drop-shadow()`,
· foco → el aro de 2 px (`--filo-foco-*`), por DENTRO del recorte.
========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
/* ============================================================================
LOS TOKENS DEL PANEL
============================================================================
marca.css es la frontera compartida con la web pública y ahí no se toca
nada: un color de más allí cambia los dos sitios. Lo de aquí es lo que solo
tiene sentido en un panel —alturas de control, pasos pequeños, duraciones—
y por eso vive aquí. Los tamaños de letra, los niveles de texto y los
espacios grandes NO: son los de marca.css.
LOS VALORES VAN CALCULADOS A MANO Y NO CON color-mix(). Sin build, lo que se
escribe es lo que se sirve, y un color-mix() que un navegador no entienda
deja la variable inválida y el elemento SIN COLOR. Un rgba() no falla.
========================================================================== */
:root{
/* Que los calendarios nativos de finanzas, las barras de scroll y las
casillas nazcan oscuros. Una línea, y se acabaron los date-pickers
blancos en mitad de un formulario negro. */
color-scheme:dark;
/* ESPACIO DENTRO DE UN CONTROL — pasos de 4 px. La web no los tiene porque
no tiene tablas densas ni formularios de diecisiete campos; lo grande
(caja, bloque, rejilla, cabecera) es de marca.css: `--esp-caja`,
`--esp-bloque`, `--esp-rejilla`, `--esp-cabecera`. Excepción escrita en
la skill diseno-trufas. */
--esp-1:.25rem; --esp-2:.5rem; --esp-3:.75rem; --esp-4:1rem;
/* El relleno de una tarjeta de ficha (P.tarjeta): 24 px. `--esp-caja` (40)
es el de una caja de formulario; en una rejilla de tarjetas inflaba la
ficha muy por encima del artifact que le sirve de modelo (3 oct 2026). */
--esp-tarjeta:1.5rem;
/* SUPERFICIES — el lienzo, la tarjeta, lo elevado, lo que destaca */
--sup-0:var(--ink); /* #17110D · el fondo de la página */
--sup-1:var(--surface); /* #241A15 · ficha, barra, aviso */
--sup-2:var(--surface-2); /* #2E211A · hover, pestaña activa */
/* VELADURAS — crema con alfa. Suben cualquier superficie sin saber cuál es,
que es lo que hace que sirvan igual sobre la barra que sobre una tabla. */
--velo-1:rgba(242,232,220,.045);
--velo-2:rgba(242,232,220,.08);
--velo-3:rgba(242,232,220,.025); /* la cebra de las tablas */
--velo-vivo:rgba(255,198,33,.10); /* amarillo al 10 % */
--velo-alerta:rgba(154,147,141,.12); /* --gris-3 al 12 % */
--linea-suave:rgba(74,54,43,.6); /* --line al 60 % */
--borde-vivo:rgba(255,198,33,.45);
--borde-alerta:rgba(154,147,141,.45);
/* EL TEXTO SOBRE AMARILLO. marca.css lo declara con el mismo nombre y el
mismo valor; se repite aquí como literal para que el botón amarillo se
lea aunque no llegue la hoja de somostrufas.org. NO puede escribirse
como `var(--sobre-amarillo, …)`: una propiedad que se refiere a sí misma
es un ciclo y el navegador la tira entera. El amarillo encendido del
hover ya es `--yellow-alto`, de marca.css. */
--sobre-amarillo:#1A1207;
/* MOVIMIENTO — esto es una herramienta de trabajo, no una web de producto:
nada rebota y nada pasa de 300 ms. */
--t-rapido:.12s; --t-medio:.2s; --t-lento:.3s;
--curva:cubic-bezier(.22,.61,.36,1); /* frena al final, sin rebote */
/* Una sola altura para TODO lo que se pulsa o se rellena. Hoy un input, un
select y un input[type=date] medían tres cosas distintas porque cada
navegador les pone su padding, y en una fila de cuatro campos se nota. */
--alto-control:2.5rem;
/* Medidas del armazón, en un solo sitio: las leen la rejilla, el hueco que
deja la barra superior y el borde de arriba del cajón. */
--topbar:3.5rem;
--barra-entera-w:15.5rem;
--barra-w:var(--barra-entera-w); /* lo que mide la columna AHORA */
--barra-plegada-w:4.5rem; /* el riel: 72 px, como el de la web */
/* LA FLECHA DEL SELECT, dibujada aquí (es el `flecha-abajo` de la
iconografía común, a 1,8 de trazo; los avisos, `check-circulo` y
`aviso-error`). La CSP del panel permite `data:` en
img-src, que es quien gobierna background-image. Sin esto la flecha la
pone el sistema, en gris de sistema, y rompe el tema. */
--flecha:url("data:image/svg+xml;utf8,");
--flecha-viva:url("data:image/svg+xml;utf8,");
}
/* ---------- BASE ---------- */
body{
background:var(--sup-0);
color:var(--texto-1);
font-family:'Poppins',system-ui,sans-serif;
font-weight:300;
font-size:var(--tipo-cuerpo);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
[hidden]{display:none !important}
/* El cinturón, por encima de los tirantes de min-width: lo que se desborde,
que se desborde dentro de su caja. La página nunca se mueve de lado.
`clip` y no `hidden`: con `hidden` en html y body, el body pasa a ser un
contenedor de scroll que no se desplaza, y la barra (`position:sticky`) se
iba con la página (CEO, 21 oct 2026). */
html,body{overflow-x:clip;max-width:100%}
/* EL CORTE TIPOGRÁFICO (CEO, 21 oct 2026; muestrario «Textos 1»): la familia la
decide el tamaño. ≥ 32 px, Dharma M; por debajo de 32, Poppins 600. El panel usa la escala grande (sin `escala-compacta`), así que
subtítulo (34→42), numeral (44) y dato (32) son siempre M, y cada regla lo
pide por su token (`--fuente-subtitulo`/`-numeral`/`-dato` + su
`--tracking-*`) en vez de nombrar la Dharma a pelo. Lo que baja de 32 px
(números del calendario, del embudo y del resumen de permisos) va en
Poppins 600. */
h1,h2{text-transform:uppercase;letter-spacing:.01em}
h1{
font-family:var(--fuente-display);font-weight:800;
font-size:var(--tipo-titulo);line-height:.9;
}
h2{
font-family:var(--fuente-subtitulo);font-weight:700;
font-size:var(--tipo-subtitulo);line-height:1;letter-spacing:calc(.01em + var(--tracking-subtitulo))
}
/* El titular a dos colores: la segunda parte en amarillo y en su línea. */
h1 em{font-style:normal;color:var(--yellow);display:block}
/* EL ANTETÍTULO es el de componentes.css («03 / Finanzas»); aquí solo el
aire hasta el titular. */
.eyebrow{margin-bottom:var(--esp-3)}
/* Para el lector de pantalla y para nadie más. `clip` y 1 px, no display:none,
porque lo que no se pinta tampoco se lee. */
.solo-lectores{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* ---------- EL FOCO SE VE ----------
Dos familias: sobre lo plano vale un `outline`; sobre lo biselado el anillo
va por DENTRO, con el aro de 2 px del mismo escalón que el recorte
(`--filo-foco-xs/-sm/` en marca.css), porque el `clip-path` se come
cualquier `outline`. El doble `box-shadow` inset de abajo es solo la reserva
del navegador que no entiende el `evenodd` del aro.
`:focus-visible` y no `:focus`, para no dibujarlo al hacer clic con ratón. */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
outline:2px solid var(--yellow);
outline-offset:2px;
}
.btn-menu:focus-visible,
.pestana:focus-visible{
outline:none;
box-shadow:inset 0 0 0 2px var(--sup-0), inset 0 0 0 4px var(--yellow);
}
/* El contenido recibe el foco al cambiar de pantalla; eso no es una parada de
tabulación y no debe dibujar un marco alrededor de media página. */
.contenido:focus{outline:none}
/* ============================================================================
LOS CONTENEDORES, LOS DE LA WEB
============================================================================
Las cajas grandes (ficha, métrica, tarjeta de Inicio, caja de aviso, la de
entrar y el menú de la cuenta) llevan la clase `.caja` de componentes.css:
CAPA DOBLE, el fondo del color del contorno y el relleno 1 px por dentro.
El porqué está allí. Aquí solo los estados y los retoques del panel.
HASTA EL 28 SEP 2026 esas cajas llevaban el aro `--filo` en un `::after`, y
el contorno se veía incompleto: en medio píxel los cantos perdían fuerza
(medido: 55 de 74) y, sin `evenodd`, los chaflanes salían sin raya.
Lo pequeño —botones, píldoras, chips, hamburguesa— sigue con el aro
`--filo-*` del escalón de su alto: los botones y las píldoras lo traen de
componentes.css; aquí van solo los que son del panel. */
/* ⚠ El `@supports` no es decorativo: sin él, un navegador que no entienda el
`fill-rule` dejaría el `clip-path` del pseudo en `none` y taparía la pieza
con un rectángulo macizo. */
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
.btn-menu,.chip,.pestana-activa{position:relative}
.btn-menu::after,.chip::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:var(--filo-color,transparent);
}
.btn-menu::after{clip-path:var(--filo-sm)}
/* El chip mide 32–36 px: su corte es el compacto de 7 px y su aro TIENE que
ser el mismo (hasta el 28 sep 2026 llevaba 5 px y el contorno no casaba;
hasta el 16 oct 2026, 9). */
.chip::after{clip-path:var(--filo-compacto)}
/* EL FOCO DE LO BISELADO, CON LA FORMA DEL BISEL: el aro pasa a 2 px y a
amarillo. El de los botones lo pone componentes.css. */
.btn-menu:focus-visible,.pestana:focus-visible{box-shadow:none}
.pestana:focus-visible::after{
content:'';position:absolute;inset:0;pointer-events:none;
clip-path:var(--filo-foco-sm);background:var(--yellow);
}
.btn-menu:focus-visible::after{clip-path:var(--filo-foco-sm);--filo-color:var(--yellow)}
.chip:has(input:focus-visible)::after{clip-path:var(--filo-foco-compacto)}
}
/* EL FOCO DE UNA CAJA PULSABLE (el atajo del Resumen): contorno amarillo y
el relleno se retira a 2 px, así se lee como anillo. No necesita
`evenodd`: es la misma capa doble. */
a.atajo:focus-visible::before{inset:2px}
/* ---------- BOTONES ----------
Son los de la web (`.btn`, `.btn-primary`, `.btn-ghost`, `.btn-sm` en
componentes.css). El panel solo les fija la altura de sus controles, para
que un botón y un campo de la misma fila midan lo mismo. */
.btn{justify-content:center;min-height:var(--alto-control)}
.btn-sm{min-height:var(--btn-sm-alto, auto)} /* 32: el suelo del botón pequeño (16 oct 2026) */
/* Mientras guarda, el JS ya le cambia el texto a «Guardando…»; esto le añade
el latido que dice que sigue vivo. */
.btn:disabled{cursor:progress;filter:grayscale(.4) brightness(.8);animation:latido 1.2s ease-in-out infinite}
.btn-discord{width:100%;min-height:3rem}
/* El logo de Discord hereda la tinta del botón (sobre el amarillo, oscura):
`.ico-discord` de componentes.css lo pinta en --texto-2 para un texto suelto. */
.btn-discord .ico-discord{color:inherit;width:1.5em;height:1.5em}
/* ============================================================================
EL ARMAZÓN
============================================================================
⚠ `.app` ES UNA REJILLA CON ÁREAS NOMBRADAS, y todo hijo EN FLUJO se coloca
en una celda. Los tres que no son la barra superior, la lateral, la
cabecera delgada ni el contenido —el salto, el velo y el anuncio— están
FUERA DE FLUJO (fixed o absolute) y por eso no participan. Quitarle el `position` a cualquiera de
ellos, o añadir un hijo nuevo en flujo, parte el escritorio en columnas
fantasma. Está avisado también en el HTML.
========================================================================== */
.app{
display:grid;
grid-template-columns:var(--barra-w) 1fr;
grid-template-rows:auto auto 1fr;
grid-template-areas:
"topbar topbar"
"barra cab"
"barra contenido";
min-height:100dvh;
}
/* LA CABECERA DELGADA (CEO, 22 oct 2026; navegacion.js, LATERAL.cabecera):
la banda de 48 encima del contenido, a la derecha del lateral, con el
icono y el nombre del módulo. Se pega bajo lo que haya arriba (la franja
de la demo, o la barra superior donde se ve) y se esconde al bajar. Es su
propia celda (`cab`): dentro de `.contenido` su `overflow-x` rompería el
`sticky` e `ir()` la borraría. En el móvil no se pinta (lateral.css): la
barra superior hace de cabecera. */
.app > .lat-cab{grid-area:cab;--lat-cab-arriba:var(--topbar)}
/* LA COLUMNA DE LA BARRA LLEGA HASTA ABAJO. La barra es pegajosa y mide lo
que la ventana; en una pantalla más larga que eso, debajo quedaba el lienzo
y la raya de la derecha se cortaba a media página. El fondo de la columna
lo pinta la rejilla, en --ink (donde acaba el degradado del lateral). Solo
en escritorio y solo si hay barra. */
/* SIN BARRA DE ARRIBA CON LATERAL (20 oct 2026, CEO: todo menú lateral
hereda del home). En escritorio y con barra lateral, la marca es la cabeza
del lateral y la cuenta está en su pie (navegacion.js), así que la barra
superior no se pinta y el lateral va a toda la altura. --topbar baja a lo
que mida la franja de la demo (0 sin demo): lo que se pegaba debajo de la
barra (el lateral, las cabeceras de las tablas) sube solo. Si algún día
vuelve el menú de secciones (#areas con dos o más), la barra se queda. */
@media (min-width:960px){
.app:not(:has(#modulos:empty)){
background:linear-gradient(90deg,
var(--ink) calc(var(--barra-w) - 1px), var(--line) 0 var(--barra-w), transparent 0);
}
.app:not(:has(#modulos:empty)):has(#areas:empty){--topbar:var(--franja-h, 0px);padding-top:var(--topbar)}
.app:not(:has(#modulos:empty)):has(#areas:empty) .topbar{display:none}
html.lateral-visible .topbar-marca{display:none}
}
/* SIN MÓDULOS QUE NAVEGAR, NO HAY BARRA. Las tres pantallas de bloqueo —sin
alta, sin 2FA y fallo técnico— vacían `#modulos`, y una columna de 15.5rem
vacía al lado de un mensaje que dice «no puedes pasar» se lee como que el
panel se quedó a medio cargar. Sin ella, el mensaje ocupa la pantalla y es lo
único que hay, que es exactamente lo que es. */
/* Y LO MISMO CON UNA SECCIÓN DE UN SOLO MÓDULO (Bot de Discord): panel.js no
le pinta barra lateral (ver pintarBarra), así que la pantalla va entera.
En móvil el cajón se queda si tiene el menú de secciones: es la única forma
de cambiar de sección en un teléfono. */
.app:has(#modulos:empty){grid-template-columns:1fr;grid-template-areas:"topbar" "cab" "contenido"}
@media (min-width:960px){ .app:has(#modulos:empty) .barra{display:none} }
@media (max-width:959.98px){ .app:has(#modulos:empty):has(#areas-cajon:empty) .barra{display:none} }
/* `min-width:0` EN LOS HIJOS DE LA REJILLA, Y NO ES DECORATIVO.
Un hijo de grid vale `min-width:auto` por defecto, o sea «al menos lo que
mida mi contenido»: así, un `overflow-x:auto` de dentro no llega a
dispararse nunca — la columna crece en vez de recortar, y lo que se desborda
es la PÁGINA. Se vio midiendo el documento a 390 px de ancho: 934 px, con la
barra de ocho módulos empujando por debajo. Con esto, cada uno recorta lo
suyo y el `body` no se mueve. */
.barra,
.contenido,
.topbar{min-width:0}
/* ---------- SALTAR AL CONTENIDO ----------
Primer foco de la página. Con ocho módulos en la barra, llegar al contenido
tabulando son nueve pulsaciones cada vez. Nace fuera de pantalla con un
transform —no con display:none, que lo sacaría del orden de tabulación— y
aparece al enfocarlo. */
.salto{
position:fixed;z-index:60;
top:max(var(--esp-2),env(safe-area-inset-top));left:var(--esp-2);
background:var(--yellow);color:var(--sobre-amarillo);
font-size:var(--tipo-control);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:var(--esp-3) var(--esp-4);clip-path:var(--bevel-sm);
transform:translateY(-250%);transition:transform var(--t-rapido) ease;
}
.salto:focus{transform:none}
/* ---------- LA BARRA SUPERIOR ----------
Solo donde no hay lateral (20 oct 2026: en escritorio con lateral no se
pinta, ver «SIN BARRA DE ARRIBA CON LATERAL»):
· En ESCRITORIO SIN LATERAL (las pantallas de bloqueo, una sección de un
solo módulo) es la banda de identidad y de sesión: la marca y la
cuenta (el avatar con su menú, ver cuenta.js), que ahí es la salida.
· En MÓVIL lleva además la hamburguesa.
Va por encima del cajón (z-index) a propósito: con el cajón abierto la X
sigue visible y pulsable, que es mejor salida que una franja de velo. */
.topbar{
grid-area:topbar;
position:sticky;top:0;z-index:45;
display:flex;align-items:center;gap:var(--esp-3);
height:calc(var(--topbar) + env(safe-area-inset-top));
padding:env(safe-area-inset-top) max(var(--esp-4),env(safe-area-inset-right))
0 max(var(--esp-4),env(safe-area-inset-left));
background:var(--sup-1);
box-shadow:inset 0 -1px 0 var(--line);
}
/* El imagotipo a la altura del de la barra de la web, sin sello (20 oct
2026: el «PANEL» de al lado se fue, el home no lo lleva). */
.topbar-marca{
display:flex;align-items:center;flex:0 0 auto;
}
.topbar-marca img{height:1.5rem;width:auto}
/* EL MENÚ DE SECCIONES (Administración · Bot de Discord): el `.nav-paginas`
de la web (componentes.css), con la raya amarilla en la sección en la que
estás. Ocupa el alto de la barra para que la raya caiga en su canto, y
empuja la cuenta a la derecha. En móvil se esconde y aparece arriba del
cajón (`.barra-areas`). */
.topbar-areas{margin-left:calc(var(--esp-4) * 2)}
.topbar-areas:empty{display:none}
.cuenta{margin-left:auto}
.barra-areas{display:none}
/* LA CAMPANA DE LA CABECERA (S3, 20 oct 2026; modulos/bandeja.js): solo con la
barra convertida en cajón, donde el número de la fila no se ve. En
escritorio la fila de la barra ya lleva la cifra: dos campanas a la vez
serían lo mismo dos veces. Va pegada a la cuenta. */
.campana-cab.es-movil{margin-left:auto}
.campana-cab.es-movil + .cuenta{margin-left:0}
/* Desde el corte del móvil (960), no desde 896: entre los dos no había ni
lateral ni campana, y con el dock la Bandeja solo está aquí. */
@media (min-width:960px){ .campana-cab.es-movil{display:none} }
/* En un teléfono estrecho la barra no da para la marca con su etiqueta, la
campana y el avatar: se va la etiqueta «Panel» (la marca ya dice dónde
estás) y el aire de los bordes baja un escalón. Sin esto el avatar se
salía de la pantalla. */
@media (max-width:26rem){
.topbar-sello{display:none}
.topbar{padding-left:max(var(--esp-3),env(safe-area-inset-left));padding-right:max(var(--esp-3),env(safe-area-inset-right))}
}
/* ---------- LA CUENTA: EL AVATAR Y SU MENÚ ----------
El botón y el menú son los del home: `.cuenta-*` en componentes.css, con el
menú en caja biselada de capa doble y sin sombra. Aquí solo lo que el panel
añade: el nombre de pila en el chip (la barra tiene sitio y trabajan varias
personas), la inicial si no hay avatar, y la leyenda bajo «Cerrar sesión»,
que aquí cierra todas las sesiones (ver sesion.js). */
.topbar{--btn-h:var(--alto-control)}
.cuenta{min-width:0}
.cuenta-boton{gap:var(--esp-2);padding:0 var(--esp-3) 0 var(--esp-2)}
.cuenta-boton[aria-expanded="true"]{--filo-color:var(--yellow)}
.cuenta-inicial{
width:1.625rem;height:1.625rem;border-radius:50%;flex:none;
display:grid;place-items:center;background:var(--sup-2);
font-size:var(--tipo-leyenda);font-weight:600;color:var(--yellow);
}
.cuenta-corto{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuenta-menu{min-width:15rem;max-width:calc(100vw - 2 * var(--esp-4))}
/* Sin outline, el foco del teclado se ve por el fondo y por la raya. */
.cuenta-item:focus-visible{box-shadow:inset 3px 0 0 var(--yellow)}
.cuenta-salir{border-top:1px solid var(--line);margin-top:var(--esp-1)}
/* La hamburguesa. El mismo dibujo que la de la web pública (base.css): tres
barras de 2 px con 5 de hueco, y por eso el translateY(7px) de la X cuadra.
44×44 porque es el mínimo que se acierta con el pulgar sin mirar. */
.btn-menu{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:2.75rem;height:2.75rem;padding:0 var(--esp-3);flex:0 0 auto;
background:var(--velo-1);--filo-color:var(--line);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
clip-path:var(--bevel-sm);border:0;cursor:pointer;
}
.btn-menu span{
display:block;height:2px;width:100%;background:var(--texto-1);
transition:transform var(--t-lento) var(--curva),opacity var(--t-medio) ease;
}
.btn-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.btn-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.btn-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- EL VELO ----------
Solo en móvil. `visibility` y no `display`, para que la opacidad se pueda
animar; y la visibility con retardo igual a la transición, para que no
desaparezca de golpe a mitad del cierre. Cerrado, no lo alcanza ni el dedo
ni el tabulador. */
.velo{
position:fixed;inset:0;z-index:30;
background:rgba(23,17,13,.72);
opacity:0;visibility:hidden;
transition:opacity var(--t-medio) ease,visibility 0s linear var(--t-medio);
}
/* EL FONDO NO SE MUEVE MIENTRAS EL CAJÓN ESTÁ ABIERTO. La clase la pone
navegacion.js, que además guarda y devuelve la posición: `overflow:hidden` a
secas no basta en Safari, que sigue arrastrando el documento por debajo. */
body.sin-scroll{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* ---------- LA BARRA LATERAL · la del home (20 oct 2026, CEO) ----------
Todo menú lateral hereda del home (/muestra, «Maquetación 7»): el fondo,
el filo, la cabeza, el pie, la pestaña «/», los títulos, las filas y la
marca son los comunes (`.lat` y `.lat-*` de assets/comun/lateral.css,
copia de assets/lateral.css). Aquí, la columna (248 entera, 72 en riel),
lo que va en el pie (la cuenta) y el cajón del móvil. La lista se
desplaza DENTRO (#modulos, .lat-nav) con la barra de la marca, y la barra
no recorta: la pestaña asoma por el filo. Las filas encogen con la
columna y recortan su nombre: el icono no se mueve (x 26–46). */
.barra{
grid-area:barra;
display:flex;flex-direction:column;
position:sticky;top:var(--topbar);
height:calc(100dvh - var(--topbar));
}
.barra .lat-nav{padding:.5rem 0 .75rem}
/* PLEGAR LA BARRA (16 oct 2026, regla del COO: todo menú lateral se
pliega, igual que el de la web). Lo lleva assets/comun/lateral.js, que
deja en el `lateral-entero` o `lateral-riel` antes de pintar: riel
de serie por debajo de 1366, fijarlo abierto solo desde 1152 (por debajo,
la pestaña y la tecla «[» lo abren ENCIMA), y nada en móvil, que tiene su
cajón. --barra-w se registra como longitud; ya NO se anima (17 oct 2026:
la columna cambia de golpe, el ancho de la barra se anima con su
`transition` y el contenido vuelve a su sitio en el compositor, ver
assets/comun/lateral.js). */
@property --barra-w{syntax:'';inherits:true;initial-value:15.5rem}
@media (min-width:960px){
html.lateral-riel{--barra-w:var(--barra-plegada-w)}
.barra{width:var(--barra-w);z-index:25;transition:width var(--t-medio) var(--curva);
/* LA ESCALA DEL LATERAL ES LA DEL HOME: el panel no lleva `escala-compacta`,
pero `.barra` está en la lista de su regla en marca.css (los ocho tamaños
de lo pequeño, sin copia aquí). Solo el dato, que es de otro escalón. */
--tipo-dato:1.125rem;
--fuente-dato:var(--fuente-titular);--tracking-dato:var(--tracking-titular)}
html.lateral-riel .barra.desplegado{width:var(--barra-entera-w)}
/* El fondo de la marca empieza donde acaba la columna de la barra, que
es opaca: si no, las piezas de la izquierda quedarían debajo. */
html.lateral-visible .fondo-marca{--fondo-izq:var(--barra-w)}
}
/* En móvil el cajón no lleva cabeza ni pie: la marca y la cuenta están en la
barra de arriba. */
@media (max-width:959.98px){ .barra .barra-cabeza,.barra .barra-pie{display:none} }
/* ---------- LA CUENTA EN EL PIE DEL LATERAL (20 oct 2026) ----------
El chip de 56 del home (`.mc-boton`, assets/marco.css): el retrato de 44
(sin anillo de XP: el panel no tiene niveles; un aro --line en su lugar),
el nombre entero y la flecha; el menú se abre HACIA ARRIBA, a lo ancho del
pie. Plegado, el chip se queda en 56 con el retrato en el centro del riel
(x 14–58), el nombre sale en la etiqueta amarilla y el menú se abre AL
LADO. El pie mide lo mismo en los dos modos. Fuera del pie (arriba a la
derecha), el retrato y el nombre largo no existen como caja. */
.cuenta-retrato{display:contents}
.cuenta-largo{display:none}
.barra-pie .cuenta{display:block;position:relative;width:100%;margin:0}
.barra-pie .cuenta-boton{
width:100%;height:3.5rem;gap:.625rem;justify-content:flex-start;
padding:.375rem .625rem .375rem .375rem;
font-size:var(--tipo-descripcion);font-weight:600;letter-spacing:0;text-transform:none;color:var(--texto-1);
background:rgba(242,232,220,.04);overflow:hidden;white-space:nowrap;
}
.barra-pie .cuenta-boton:hover,.barra-pie .cuenta-boton[aria-expanded="true"]{background:rgba(242,232,220,.08);--filo-color:var(--yellow-bajo)}
.barra-pie .cuenta-retrato{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:50%;
box-shadow:inset 0 0 0 2px var(--line)}
.barra-pie .cuenta-retrato .cuenta-avatar,.barra-pie .cuenta-retrato .cuenta-inicial{width:2.1875rem;height:2.1875rem}
.barra-pie .cuenta-retrato .cuenta-inicial{font-size:var(--tipo-descripcion)}
.barra-pie .cuenta-corto{display:none}
/* La cabecera de la hoja de la cuenta en el móvil (assets/lateral.css): el
mismo retrato de 44 y el nombre largo que el chip del pie. */
.lat-hoja-cabecera .cuenta-retrato{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:50%;
box-shadow:inset 0 0 0 2px var(--line)}
.lat-hoja-cabecera .cuenta-avatar,.lat-hoja-cabecera .cuenta-inicial{width:2.1875rem;height:2.1875rem}
.lat-hoja-cabecera .cuenta-inicial{font-size:var(--tipo-descripcion)}
.lat-hoja-cabecera .cuenta-corto{display:none}
.lat-hoja-cabecera .cuenta-largo{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.barra-pie .cuenta-largo{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;
transition:opacity .18s ease var(--lat-retraso, 0s)}
.barra-pie .cuenta-boton .cuenta-chevron{transform:rotate(180deg);transition:opacity .18s ease var(--lat-retraso, 0s)}
.barra-pie .cuenta-boton[aria-expanded="true"] .cuenta-chevron{transform:none}
.barra-pie .cuenta-menu{top:auto;bottom:calc(100% + .5rem);left:0;right:0;min-width:0}
@media (min-width:960px){
html.lateral-riel .barra:not(.desplegado) .cuenta-largo,
html.lateral-riel .barra:not(.desplegado) .barra-pie .cuenta-chevron{opacity:0;transition:none}
html.lateral-riel .barra:not(.desplegado) .barra-pie .cuenta-menu{left:calc(100% + .75rem);right:auto;bottom:0;width:13.5rem}
}
@media (prefers-reduced-motion: reduce){ .barra-pie .cuenta-largo,.barra-pie .cuenta-chevron{transition:none} }
/* El icono del módulo (14 oct 2026) en su sitio; sin icono, el número. */
.mod-num{display:inline-flex;align-items:center;justify-content:center;
font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--tipo-control)}
/* El sello de los módulos que aún no existen. En la barra, para que se sepa
antes de entrar; dentro, la pantalla lo explica. */
/* Una etiqueta secundaria (el muestrario, «Componentes 1»): el tamaño de
todas, el corte de 5 px, y el nivel lo da el estilo, nunca el tamaño. */
.mod-sello{
font-size:var(--tipo-etiqueta);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
color:var(--texto-3);background:var(--sup-0);
padding:var(--esp-1) var(--esp-2);clip-path:var(--bevel-xs);
}
/* El margen lateral, un 25 % más (CEO, 21 oct 2026; antes 40 · 16): 50 · 20.
ARRIBA, --inicio-pagina (CEO, 22 oct 2026): de la cabecera al antetítulo,
lo mismo que en la web y en el Dashboard. */
.contenido{
grid-area:contenido;
padding:var(--inicio-pagina) 3.125rem var(--esp-bloque);
overflow-x:hidden;
}
/* Sin tope de ancho (14 oct 2026): con `max-width:80rem` el módulo se quedaba
a la izquierda y en una pantalla ancha dejaba media pantalla vacía a la
derecha. Ahora ocupa todo lo que deja la barra; los textos largos siguen
cortados por su propio `ch`, así que no se hacen ilegibles. */
/* ---------- PANTALLAS ----------
La cabecera de cada módulo es la de cualquier sección de la web:
antetítulo numerado → titular → bajada, con sus tres tokens (la arma
P.cabecera() en panel.js). Hasta el 28 sep 2026 era un trazo amarillo sin
texto encima del nombre del módulo, que repetía lo que ya decía la barra. */
.pantalla-cabecera{margin-bottom:var(--esp-cabecera)}
.pantalla-cabecera h1{color:var(--texto-1)}
.pantalla-sub{
color:var(--texto-2);font-size:var(--tipo-descripcion);line-height:1.6;
margin-top:var(--esp-3);max-width:60ch;
}
/* Las pestañas dejan de ser un subrayado y ganan cuerpo: la activa tiene
fondo, bisel y la raya dentro. La raya va en box-shadow inset y no en
border-bottom porque el bisel se comería el borde justo en la esquina
cortada. En móvil se deslizan, sin barra de scroll a la vista: son cuatro
botones, no una región de desplazamiento. */
.pestanas{
display:flex;gap:var(--esp-1);
border-bottom:1px solid var(--line);
margin-bottom:var(--esp-rejilla);
overflow-x:auto;scrollbar-width:none;
}
.pestanas::-webkit-scrollbar{display:none}
/* Una sola pestaña no es una elección: repetía el título de la ficha que
tiene debajo («Consultar» y «CONSULTAR»). Se esconde. */
.pestanas:has(> .pestana:only-child){display:none}
.pestana{
position:relative;flex:0 0 auto;
font-family:inherit;font-size:var(--tipo-control);font-weight:500;
letter-spacing:.1em;text-transform:uppercase;
background:transparent;border:0;color:var(--texto-2);
padding:0 var(--esp-4);min-height:var(--alto-control);cursor:pointer;
transition:background var(--t-rapido) var(--curva),
color var(--t-rapido) var(--curva);
}
.pestana:hover{background:var(--velo-1);color:var(--texto-1)}
/* 40 px de alto: el escalón del chip, `--bevel-sm` (antes 6 px). */
.pestana-activa{
color:var(--yellow);background:var(--sup-2);font-weight:600;
clip-path:var(--bevel-sm);
box-shadow:inset 0 -3px 0 var(--yellow);
}
.pestanas .pestana-activa:focus-visible{box-shadow:inset 0 -3px 0 var(--yellow)}
/* ---------- CARGANDO: LA PIEZA COMÚN (16 oct 2026, CEO) ----------
Ya no son barras que respiran ni «Un momento…»: es assets/carga.js (la
Trufacoin que gira, en /assets/comun/), con sus estilos en componentes.css.
panel.js la envuelve en dos tamaños (P.cargando y P.cargandoMini): aquí
solo va el hueco que ocupa cada uno. El de módulo se centra en el área
libre como cualquier estado (ver «EL ESTADO QUE OCUPA LA PANTALLA»). */
.cargando{display:flex;flex-direction:column;margin:var(--esp-rejilla) 0}
.cargando > .carga{--estado-alto:14rem}
.cargando-fila{display:flex;justify-content:center;margin:var(--esp-rejilla) 0}
.cargando-fila .carga-texto{font-size:var(--tipo-leyenda)}
/* ---------- EL ESTADO QUE OCUPA LA PANTALLA (16 oct 2026, CEO) ----------
Bloqueos («Vuelve a entrar», 2FA, sin alta…), «Próximamente» y la carga
del arranque van centrados EN LOS DOS EJES del área libre (bajo la barra
y al lado del lateral), como la pantalla de entrar, nunca pegados arriba.
`.contenido` ya mide todo el alto que deja la barra (la fila 1fr de
`.app`): con un estado dentro se vuelve columna y el estado se estira a lo
que quede debajo del antetítulo. */
.contenido:has(> .estado-centro, > .cargando:only-child){display:flex;flex-direction:column}
/* Abajo, el mismo aire que arriba: con el relleno grande de serie el
centro quedaba unos píxeles por encima del de la pantalla. */
.contenido:has(> .estado-centro, > .cargando:only-child){padding-bottom:var(--esp-caja)}
@media (max-width:959.98px){
.contenido:has(> .estado-centro, > .cargando:only-child){
padding-bottom:calc(var(--esp-rejilla) + env(safe-area-inset-bottom))}
}
.contenido > .estado-centro{--estado-alto:0px;padding-inline:0}
.contenido > .cargando:only-child{flex:1 1 auto;margin:0}
.contenido > .cargando:only-child > .carga{--estado-alto:0px;flex:1 1 auto}
/* ---------- AVISOS ----------
LOS ERRORES NO DESAPARECEN SOLOS. Los mensajes de error de este panel
vienen de Postgres —«No puedes cambiar tus propios roles…»— y están
escritos para leerse. Un aviso que se esfuma en tres segundos obliga a
repetir la acción para volver a leerlo. Se cierran con ✕ o Escape, o al
cambiar de módulo. Los buenos («Guardado») sí se van solos, a los 4 s.
Desde el 3 oct 2026 flotan abajo: ver «LOS AVISOS FLOTAN», más abajo.
El icono va en `data:` —legal con la CSP por `img-src … data:`— y no en
emoji, que cambia de dibujo en cada sistema operativo. */
.aviso-zona:empty{display:none}
.aviso-error,.aviso-ok{
display:grid;grid-template-columns:1.15rem 1fr;gap:.7rem;align-items:start;
/* Un mensaje del servidor puede traer una cadena larga sin espacios (un
código, una URL); sin esto la cortaba `.contenido{overflow-x:hidden}`. */
overflow-wrap:anywhere;
font-size:var(--tipo-descripcion);line-height:1.55;color:var(--texto-1);
padding:var(--esp-3) var(--esp-4);margin-bottom:var(--esp-4);
background:var(--sup-1);
border-left:3px solid var(--gris-3);
animation:entra-aviso var(--t-medio) var(--curva) both;
}
/* El error vive en la gama gris (el muestrario, «Color y ambiente 1 · Color»): avisa y no
se pulsa. El bueno, con la raya en amarillo. */
.aviso-error{background:var(--gris-1);border-left-color:var(--gris-3)}
.aviso-ok{border-left-color:var(--yellow)}
.aviso-error::before,.aviso-ok::before{
content:'';width:1.15rem;height:1.15rem;margin-top:.1rem;
background-repeat:no-repeat;background-size:contain;
}
.aviso-error::before{
background-image:url("data:image/svg+xml;utf8,");
}
.aviso-ok::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* LOS AVISOS FLOTAN (3 oct 2026). P.avisar (panel.js) ya no los pone arriba
del módulo ni sube la página: van en una pila abajo a la derecha (en el
móvil, abajo y a lo ancho), dentro de un popover para verse también sobre
un