*/
.ui-title-ico { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; margin: 0 0.35rem 0 0.15rem;
vertical-align: middle; flex: 0 0 auto; background: var(--menu-solid); color: var(--surface); }
.ui-title-ico svg { width: 0.95rem; height: 0.95rem; }
:is(.ui-sub, .ui-sec) .ui-title-ico { width: 1.35rem; height: 1.35rem; margin-left: 0; }
:is(.ui-sub, .ui-sec) .ui-title-ico svg { width: 0.8rem; height: 0.8rem; }
/* botón de elección (servicio, tráfico, filtro): .
Marcado: fondo del color sólido del menú, letra e ícono blancos; sin marcar: blanco con borde. El radio no se ve.
La clase va doble a propósito: le gana a las reglas de «label» de cada formulario (.pr-form label, .ui-form label…). */
.ui-choice.ui-choice { display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem; border: 1px solid var(--border);
border-radius: 999px; padding: 0.25rem 0.7rem; font-weight: 400; cursor: pointer; background: var(--surface);
color: var(--ink); }
.ui-choice.ui-choice:has(input:checked) { background: var(--menu-solid); border-color: var(--nav-dark, var(--navy));
color: var(--surface); font-weight: 600; }
.ui-choice:has(input:checked) input[type="checkbox"] { accent-color: var(--accent); }
.ui-choice:has(input[type="radio"]) input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-choice:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-choice-ico { display: inline-flex; }
.ui-choice-ico svg { width: 1.05rem; height: 1.05rem; }
/* 2026-10-23: íconos sueltos (macro ico de _ui.html) y «Adjuntar archivos» (macro attach) */
.ui-ico { width: 1em; height: 1em; vertical-align: -0.15em; flex: 0 0 auto; }
/* en un botón (inline-flex) el espacio entre el ícono y el texto se pierde: lo da el gap */
:is(.btn-primary, .btn-secondary, .btn-small, .btn-small-quiet, .btn-danger):has(> .ui-ico) { gap: 0.35em; }
.ui-attach-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-attach { position: relative; }
.ui-attach [data-attach] { display: inline-flex; align-items: center; gap: 0.35rem; }
.ui-attach-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ui-attach-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; min-width: 0; }
.ui-attach-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-attach-list li small { color: var(--muted); flex: 0 0 auto; }
.ui-attach-list li .ui-icon-btn { width: 1.6rem; height: 1.6rem; padding: 0; font-size: 0.8rem; }
.ui-attach-list .ui-attach-empty { color: var(--muted); font-size: 0.8rem; }
.ui-callout { border-left: 3px solid var(--warn-fg); padding-left: 0.75rem; } /* aviso con borde de atención (antes un color fijo en 7 pantallas) */
/* 2026-10-19: aviso de cierre por inactividad (static/session_idle.js) */
.ui-idle-warning { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1000; display: flex;
gap: 0.75rem; align-items: center; max-width: calc(100% - 2rem); padding: 0.7rem 1rem; border-radius: var(--radius-card, 10px);
background: var(--navy); color: var(--surface); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); font-size: 0.9rem; }
@media (max-width: 600px) { .ui-idle-warning { flex-direction: column; align-items: stretch; text-align: center; } }
/* 2026-10-23 (Angel): barra de procesos del pie (base.html #ui-processes, ui.js «Procesos»). Una tarjeta por proceso, abajo a
la derecha: en proceso (ícono girando y barra), listo (verde, se va sola) o no se pudo (roja, con la causa; se cierra a mano). */
.ui-processes { position: fixed; right: 1rem; bottom: 1rem; z-index: 950; display: flex; flex-direction: column; gap: 0.5rem;
width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.ui-process { pointer-events: auto; display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.7rem 0.8rem;
background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-left: 4px solid var(--accent);
border-radius: var(--radius-card, 10px); box-shadow: var(--shadow-pop, var(--shadow)); font-size: 0.88rem;
animation: ui-process-in 0.18s ease-out; }
.ui-process-ok { border-left-color: var(--ok-fg); }
.ui-process-error { border-left-color: var(--bad-fg); }
.ui-process-ico { flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; color: var(--accent); }
.ui-process-ok .ui-process-ico { color: var(--ok-fg); }
.ui-process-error .ui-process-ico { color: var(--bad-fg); }
.ui-process-ico svg { width: 100%; height: 100%; }
.ui-process-running .ui-process-ico svg { animation: ui-spin 0.9s linear infinite; }
.ui-process-text { flex: 1 1 auto; min-width: 0; }
.ui-process-text strong { display: block; color: var(--accent); line-height: 1.25; }
.ui-process-state { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
.ui-process-ok .ui-process-state { color: var(--ok-fg); }
.ui-process-error .ui-process-state { color: var(--bad-fg); }
.ui-process-text p { margin: 0.3rem 0 0; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; }
.ui-process-text p:empty { display: none; }
.ui-process-bar { height: 4px; margin-top: 0.5rem; border-radius: 2px; background: var(--border); overflow: hidden; }
.ui-process-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s; }
.ui-process-bar-loop span { animation: ui-process-loop 1.3s ease-in-out infinite; }
.ui-process-close { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; padding: 0.2rem; border: 0; background: transparent; color: var(--muted);
cursor: pointer; border-radius: var(--radius-button, 6px); }
.ui-process-close:hover { color: var(--ink); background: var(--border); }
.ui-process-close svg { width: 100%; height: 100%; }
button.ui-busy { opacity: 0.7; cursor: progress; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-process-loop { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes ui-process-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .ui-processes { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .ui-process, .ui-process-running .ui-process-ico svg, .ui-process-bar-loop span { animation: none; } }
/* 2026-10-29 (Angel: «un estándar de barras o donas de procesando, ya lo hicimos con facturas de proveedor… cuando un proceso
tarda, debemos decirle al usuario que lo estamos procesando»; skill /pantallas §1c, ui.js «Procesando»). Salen solo si tarda
más que el umbral del tablero (`data-busy-ms`, parámetro del tenant), para que no parpadee. */
.ui-spinner { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; box-sizing: border-box; vertical-align: middle;
border: 3px solid var(--info-bg, var(--border)); border-top-color: var(--accent); animation: ui-spin 0.9s linear infinite; }
.ui-spinner-lg { width: 2.4rem; height: 2.4rem; border-width: 4px; }
.ui-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; min-height: 8rem;
color: var(--muted); font-size: 0.9rem; text-align: center; }
.ui-loading-error { color: var(--bad-fg); }
.ui-loading-error strong { display: block; color: var(--bad-fg); }
.ui-loading-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: 3px; overflow: hidden; pointer-events: none;
background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ui-loading-bar span { display: block; width: 35%; height: 100%; background: var(--accent); animation: ui-process-loop 1.1s ease-in-out infinite; }
body.ui-page-loading [data-loading-dim] { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; }
button[data-busy].ui-busy .ui-spinner, a.ui-busy .ui-spinner { width: 1rem; height: 1rem; border-width: 2px; margin-right: 0.35rem; }
/* el popup de detalle común (macro detail_dialog de _ui.html, ui.js): cabe en la pantalla y su contenido se desplaza */
dialog[data-ui-detail] { margin-top: 1rem; }
dialog[data-ui-detail] > .modal-box { max-height: calc(100vh - 2rem); overflow-y: auto; padding: 0.75rem 1rem; }
/* el título y la ✕ quedan fijos arriba mientras el cuerpo se desplaza (skill /pantallas §1c) */
dialog[data-ui-detail] .modal-close { position: sticky; top: 0; float: right; z-index: 3; }
dialog[data-ui-detail] [data-ui-detail-body] > h2:first-of-type { position: sticky; top: -0.75rem; z-index: 2; margin-top: -0.75rem;
padding: 0.75rem 2.5rem 0.4rem 0; background: var(--surface); }
/* la flecha de la comparación con el periodo anterior (macro `delta` de _graficas_macros.html). Sin verde ni rojo: que suba
no siempre es bueno (más costo, más demora), así que la flecha solo dice hacia dónde fue. */
.ui-delta { margin-left: 0.3rem; font-size: 0.66rem; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: help; }
@media (prefers-reduced-motion: reduce) { .ui-spinner, .ui-loading-bar span { animation: none; } }
/* ---- Utilidades (2026-10-19, F2 de PLAN_MEJORAS_ARQUITECTURA.md): lo que antes iba en style="…" dentro de las
plantillas, una clase por declaración y en una escala corta (tamaños de letra 70–90, espacios 0–15 = 0–1.5rem,
anchos en medios rem). Llevan !important porque reemplazan a un estilo en línea, que ganaba a todo; las de display
no se aplican a un elemento con [hidden]. Una regla nueva va en la hoja del módulo, no aquí ni en style=. ---- */
.ui-b-0 { border: 0 !important; }
.ui-b-1 { border: 1px solid var(--border) !important; }
.ui-bg-surface { background: var(--surface) !important; }
.ui-bg-warn { background: var(--warn-fg) !important; }
.ui-border-box { box-sizing: border-box !important; }
.ui-break { overflow-wrap: anywhere !important; }
.ui-bt-dashed { border-top: 1px dashed var(--border) !important; }
.ui-c-ink { color: var(--ink) !important; }
.ui-c-surface { color: var(--surface) !important; }
.ui-c-warn { color: var(--warn-fg) !important; }
.ui-col-2-end { grid-column: 2 / -1 !important; }
.ui-col-full { grid-column: 1/-1 !important; }
.ui-col-span-2 { grid-column: span 2 !important; }
.ui-d-block:not([hidden]) { display: block !important; }
.ui-d-flex:not([hidden]) { display: flex !important; }
.ui-d-inline-block:not([hidden]) { display: inline-block !important; }
.ui-d-inline-flex:not([hidden]) { display: inline-flex !important; }
.ui-d-inline:not([hidden]) { display: inline !important; }
.ui-flex-1 { flex: 1 !important; }
.ui-flex-16 { flex: 1 1 16rem !important; }
.ui-flex-18 { flex: 1 1 18rem !important; }
.ui-flex-22 { flex: 1 1 22rem !important; }
.ui-font-inherit { font: inherit !important; }
.ui-fs-70 { font-size: 0.7rem !important; }
.ui-fs-74 { font-size: 0.74rem !important; }
.ui-fs-78 { font-size: 0.78rem !important; }
.ui-fs-80 { font-size: 0.8rem !important; }
.ui-fs-84 { font-size: 0.84rem !important; }
.ui-fs-90 { font-size: 0.9rem !important; }
.ui-fw-400 { font-weight: 400 !important; }
.ui-fw-500 { font-weight: 500 !important; }
.ui-gap-1 { gap: 0.1rem !important; }
.ui-gap-10 { gap: 1rem !important; }
.ui-gap-3 { gap: 0.3rem !important; }
.ui-gap-4 { gap: 0.4rem !important; }
.ui-gap-5 { gap: 0.5rem !important; }
.ui-gap-6 { gap: 0.6rem !important; }
.ui-grid-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
.ui-h-60vh { height: 60vh !important; }
.ui-help { cursor: help !important; }
.ui-items-center { align-items: center !important; }
.ui-justify-end { justify-content: flex-end !important; }
.ui-left-0 { left: 0 !important; }
.ui-m-0 { margin: 0 !important; }
.ui-m-1 { margin: 0.1rem !important; }
.ui-maxh-22-5 { max-height: 22.5rem !important; }
.ui-maxh-28 { max-height: 28rem !important; }
.ui-maxw-5-5 { max-width: 5.5rem !important; }
.ui-maxw-6 { max-width: 6rem !important; }
.ui-maxw-60 { max-width: 60rem !important; }
.ui-maxw-7 { max-width: 7rem !important; }
.ui-maxw-8 { max-width: 8rem !important; }
.ui-maxw-none { max-width: none !important; }
.ui-mb-0 { margin-bottom: 0 !important; }
.ui-mb-10 { margin-bottom: 1rem !important; }
.ui-mb-15 { margin-bottom: 1.5rem !important; }
.ui-mb-2 { margin-bottom: 0.2rem !important; }
.ui-mb-3 { margin-bottom: 0.3rem !important; }
.ui-mb-4 { margin-bottom: 0.4rem !important; }
.ui-mb-5 { margin-bottom: 0.5rem !important; }
.ui-mb-6 { margin-bottom: 0.6rem !important; }
.ui-mb-8 { margin-bottom: 0.8rem !important; }
.ui-minw-0 { min-width: 0 !important; }
.ui-minw-14 { min-width: 14rem !important; }
.ui-minw-16 { min-width: 16rem !important; }
.ui-minw-18 { min-width: 18rem !important; }
.ui-minw-7-5 { min-width: 7.5rem !important; }
.ui-ml-0 { margin-left: 0 !important; }
.ui-ml-1 { margin-left: 0.1rem !important; }
.ui-ml-5 { margin-left: 0.5rem !important; }
.ui-ml-6 { margin-left: 0.6rem !important; }
.ui-ml-auto { margin-left: auto !important; }
.ui-mono { font-family: monospace !important; }
.ui-mr-0 { margin-right: 0 !important; }
.ui-mr-1 { margin-right: 0.1rem !important; }
.ui-mt-0 { margin-top: 0 !important; }
.ui-mt-10 { margin-top: 1rem !important; }
.ui-mt-15 { margin-top: 1.5rem !important; }
.ui-mt-2 { margin-top: 0.2rem !important; }
.ui-mt-3 { margin-top: 0.3rem !important; }
.ui-mt-4 { margin-top: 0.4rem !important; }
.ui-mt-5 { margin-top: 0.5rem !important; }
.ui-mt-6 { margin-top: 0.6rem !important; }
.ui-mt-8 { margin-top: 0.8rem !important; }
.ui-no-underline { text-decoration: none !important; }
.ui-nowrap { white-space: nowrap !important; }
.ui-normal { white-space: normal !important; } /* celda de texto largo que se parte en renglones (las celdas van en uno) */
.ui-nowrap-flex { flex-wrap: nowrap !important; }
.ui-o-auto { overflow: auto !important; }
.ui-ox-auto { overflow-x: auto !important; }
.ui-oy-auto { overflow-y: auto !important; }
.ui-p-0 { padding: 0 !important; }
.ui-p-4 { padding: 0.4rem !important; }
.ui-p-5 { padding: 0.5rem !important; }
.ui-pb-0 { padding-bottom: 0 !important; }
.ui-pb-1 { padding-bottom: 0.1rem !important; }
.ui-pb-2 { padding-bottom: 0.2rem !important; }
.ui-pl-0 { padding-left: 0 !important; }
.ui-pl-3 { padding-left: 0.3rem !important; }
.ui-pl-4 { padding-left: 0.4rem !important; }
.ui-pointer { cursor: pointer !important; }
.ui-pr-0 { padding-right: 0 !important; }
.ui-pr-3 { padding-right: 0.3rem !important; }
.ui-pr-4 { padding-right: 0.4rem !important; }
.ui-pre-line { white-space: pre-line !important; }
.ui-pre-wrap { white-space: pre-wrap !important; }
.ui-pt-0 { padding-top: 0 !important; }
.ui-pt-1 { padding-top: 0.1rem !important; }
.ui-pt-2 { padding-top: 0.2rem !important; }
.ui-pt-4 { padding-top: 0.4rem !important; }
.ui-pt-5 { padding-top: 0.5rem !important; }
.ui-r-6 { border-radius: 6px !important; }
.ui-r-8 { border-radius: 8px !important; }
.ui-right { text-align: right !important; }
.ui-right-auto { right: auto !important; }
.ui-row { flex-direction: row !important; }
.ui-upper { text-transform: uppercase !important; }
.ui-w-4 { width: 4rem !important; }
.ui-w-4-5 { width: 4.5rem !important; }
.ui-w-5 { width: 5rem !important; }
.ui-w-5-5 { width: 5.5rem !important; }
.ui-w-6 { width: 6rem !important; }
.ui-w-6-5 { width: 6.5rem !important; }
.ui-w-7-5 { width: 7.5rem !important; }
.ui-w-8 { width: 8rem !important; }
.ui-w-9 { width: 9rem !important; }
.ui-w-9-5 { width: 9.5rem !important; }
.ui-w-auto { width: auto !important; }
.ui-w-full { width: 100% !important; }
.ui-wrap { flex-wrap: wrap !important; }
/* 2026-10-20 (docs/PLAN_MONITOREO.md §3.4): línea de tiempo de la noche en Plataforma › Procesos. Cada barra se coloca con
su posición y ancho (dato) en % de la noche; los colores son los de estado (--ok-fg, --bad-fg, ...). */
.ui-timeline { margin: 0.75rem 0; }
.ui-timeline-hours { position: relative; height: 1.2rem; margin-left: 12rem; font-size: 0.72rem; color: var(--muted, inherit); }
.ui-timeline-hours span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ui-timeline-row { display: flex; align-items: center; gap: 0.5rem; min-height: 1.6rem; border-bottom: 1px solid var(--ui-row-line); }
.ui-timeline-name { flex: 0 0 11.5rem; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-timeline-track { position: relative; flex: 1 1 auto; height: 0.9rem; background: var(--ui-zebra); border-radius: 3px; }
.ui-timeline-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--ok-fg); }
.ui-timeline-bar.is-fallo { background: var(--bad-fg); }
.ui-timeline-bar.is-corriendo { background: var(--accent); }
.ui-timeline-bar.is-perdida { background: var(--warn-fg); }
@media (max-width: 700px) {
.ui-timeline-hours { margin-left: 6.5rem; }
.ui-timeline-name { flex-basis: 6rem; font-size: 0.75rem; }
}
/* 2026-10-24 (pase visual de Cost Control; skill /pantallas §1d): tarjetas de cifras con su ícono Tabler en un círculo del
color de lo que cuentan — y en cada tarjeta .
El ícono va en su columna a la izquierda: el texto nunca se mete debajo (en celular la tarjeta es angosta). */
.ui-stat-icons .stat-card:has(> .ui-stat-ico) { position: relative; padding-left: 2.75rem; }
.stat-cards.ui-stat-icons { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); } /* con el ícono, una cifra de monto cabe entera */
.ui-stat-icons .ui-stat-ico { position: absolute; left: 0.45rem; top: 0.45rem; display: inline-flex; align-items: center;
justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--chart-1);
background: color-mix(in srgb, currentColor 13%, transparent); }
.ui-stat-icons .ui-stat-ico .ui-ico { width: 1.05rem; height: 1.05rem; }
.ui-stat-icons .ui-stat-ico.ui-tone-ok { color: var(--chart-ok); }
.ui-stat-icons .ui-stat-ico.ui-tone-warn { color: var(--chart-warn); }
.ui-stat-icons .ui-stat-ico.ui-tone-bad { color: var(--chart-bad); }
.ui-stat-icons .ui-stat-ico.ui-tone-neutral { color: var(--neutral-fg); }
/* la línea de detalle debajo de la cifra («en 7 días medidos»): chica, sin robarle peso a la cifra */
.ui-stat-icons .stat-card p.muted { font-size: 0.78rem; line-height: 1.3; margin: 0.15rem 0 0; }
.cc-reasons { color: var(--warn-fg); } .cc-reasons .ui-ico { width: 1rem; height: 1rem; vertical-align: -0.15em; }
/* estado de Cost Control: chip y triángulo en un solo bloque, en un renglón (2026-10-26) */
.cc-estado-in { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.cc-estado-in .chip { white-space: nowrap; max-width: none; }
/* «Más filtros» (ui.js): los secundarios ocultos hasta abrirlos */
.ui-filters:not(.ui-show-more) .ui-more { display: none; }
.ui-filters [data-more-filters] .ui-ico { transition: transform .15s ease; }
.ui-filters.ui-show-more [data-more-filters] .ui-ico { transform: rotate(180deg); }
/* 2026-10-26 (Angel: «en Liquidación servirían los días como los tienes en Comercial»): renglón de periodo común a los
tableros (_periodo_menu.html, _cc_periodo.html): calendario, «Filtrar por», botones de periodo, el rango elegido y, a
la derecha, ocultar gráficas y Paleta. Antes vivía en la plantilla de Comercial. */
.com-period { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0 0 0.6rem; }
.com-period-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.com-chip { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem;
background: var(--surface); color: inherit; text-decoration: none; white-space: nowrap; }
main a.com-chip:hover { text-decoration: none; border-color: var(--accent); }
.com-chip.active { background: var(--ui-selected); border-color: var(--accent); color: var(--navy); font-weight: 600; }
.com-chip.com-chip-range { display: inline-flex; align-items: center; gap: 0.3rem; cursor: default; font-weight: 600;
color: inherit; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); /* letra como los botones de días (Angel, 2026-10-24) */
background: color-mix(in srgb, var(--accent) 9%, var(--surface)); font-variant-numeric: tabular-nums; }
.com-chip.com-chip-range .ui-ico { width: 0.95rem; height: 0.95rem; }
.com-period-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin: 0; font-size: 0.82rem; }
.com-period-form label { display: inline-flex; align-items: center; gap: 0.3rem; }
.com-period-form select { padding: 0.2rem 0.35rem; font: inherit; }
.com-period-form .com-pal-btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.com-period-ico { display: inline-flex; color: var(--accent); }
.com-period-ico .ui-ico, .com-period-form label > .ui-ico { width: 1rem; height: 1rem; }
.com-period-form label > .ui-ico { color: var(--accent); }
.com-period-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.com-pal-btn[hidden] { display: none !important; }
/* «Ocultar filtros» (2026-10-26): la barra de filtros es flex y le ganaba al atributo hidden */
[data-filters][hidden] { display: none !important; }