/* =============================================================================
   LA HOJA LIMPIA — rediseño de la central, tanda D1 «Base visual»
   (docs/central/rediseno-central-2026-10-04.md §3; plan en
   docs/central/plan-d1-base-visual-2026-10-04.md)
   =============================================================================

   QUE ES
   ======
   El sistema visual de las listas y las fichas desde el 2026-10-04: fondo
   «papel», contenido en HOJAS blancas con borde de 1 px y radio de 12 px, sin
   sombras salvo diálogos y menús; lilas grises para lo secundario; cifras
   tabulares a la derecha; etiquetas de estado suaves; y el morado SOLO para lo
   que se pulsa y lo seleccionado.

   POR QUE ES UNA HOJA APARTE Y LA ULTIMA
   ======================================
   plano.css y app.css tienen pruebas que leen su texto, y no se tocan. Esta
   hoja va la ÚLTIMA en index.html, así que a igual peso de selector gana por
   orden, sin `!important`.

   CLARO Y OSCURO
   ==============
   Las fichas `--limpia-*` se declaran dos veces, entre las marcas que lee
   HojaTemaTests. El bloque oscuro, además, OSCURECE las fichas `--plano-*` que
   ya consume toda la web: así el menú, la barra y las otras pantallas cambian
   con la página y no queda una isla oscura en un mar claro (que es lo que
   hizo retirar el primer intento, ver «LA VARIANTE OSCURA: POR QUE AQUI NO, Y DONDE SI» en app.css).
   EL BORDE DE LOS CONTROLES (`--limpia-borde-control`) NO ES DECORATIVO: delimita
   el campo, y WCAG 1.4.11 pide 3:1 contra lo que tiene detrás (la hoja o el
   papel). Los cantos de hojas y filas (`--limpia-borde`, `--limpia-borde-fino`)
   sí son decorativos y se quedan suaves.
   MudBlazor recibe los mismos colores por la PaletteDark de App.razor, y una
   prueba comprueba que coinciden.
*/

/* LIMPIA: CLARO */
:root {
    --limpia-papel: #f5f3f8;
    --limpia-hoja: #ffffff;
    --limpia-cabecera: #faf9fc;
    --limpia-hover: #faf7fd;
    --limpia-borde: #e7e2ee;
    --limpia-borde-fino: #f0edf4;
    --limpia-borde-control: #8a7d9e;
    --limpia-tinta: #2a1a3e;
    --limpia-tinta-2: #5b4a73;
    --limpia-tinta-3: #736587;
    --limpia-morado: #672990;
    --limpia-morado-hondo: #4f1f70;
    --limpia-morado-aguada: #efe7f6;
    --limpia-sobre-morado: #ffffff;
    --limpia-bien-fondo: #e6f2f0;
    --limpia-bien-tinta: #23726a;
    --limpia-aviso-fondo: #fdf4e2;
    --limpia-aviso-tinta: #8a5f0f;
    --limpia-error-fondo: #fbe9e5;
    --limpia-error-tinta: #b03826;
    --limpia-neutro-fondo: #efeaf5;
    --limpia-neutro-tinta: #5b4a73;
    --limpia-barra-fondo: #2a1a3e;
    --limpia-barra-tinta: #f5f3f8;
    /* EL MENÚ LATERAL DE NAVEGACIÓN (2026-10-16): OSCURO EN LOS DOS MODOS, para que se separe del contenido. En claro es una
       berenjena honda (15:1 contra el papel); en oscuro, un punto más oscuro que el papel (ver el bloque oscuro). Sus
       textos y su acento se miden contra ESTE fondo, no contra la hoja: por eso llevan fichas propias. */
    --limpia-menu-fondo: #231a36;
    --limpia-menu-borde: #3b2f54;
    --limpia-menu-hover: #2e2346;
    --limpia-menu-actual: #3a2c58;
    --limpia-menu-acento: #c7a4e6;
    --limpia-menu-tinta: #ece6f4;
    --limpia-menu-tinta-2: #cfc4e0;
    --limpia-menu-tinta-3: #b2a4c8;
    --limpia-menu-sobre-actual: #ffffff;
    --limpia-menu-foco: #d8bdf0;
    --limpia-menu-desplazamiento: #5a4b78;
    --limpia-menu-bien: #8fd3c8;
    --limpia-menu-aviso: #f0c674;
    --limpia-menu-error: #f2a596;
    /* El papel de un LIENZO (ticket, PDF, vista previa): blanco y con tinta oscura en los dos modos. */
    --limpia-lienzo: #ffffff;
    --limpia-lienzo-tinta: #2a1a3e;
    --limpia-lienzo-tinta-2: #5b4a73;
    --limpia-radio: 12px;
    --limpia-radio-control: 8px;
    --limpia-fila: 40px;
    --limpia-sombra-menu: 0 8px 24px rgba(42, 26, 62, 0.16);
    color-scheme: light;
}
/* FIN: CLARO */

@media (prefers-color-scheme: dark) {
    /* LIMPIA: OSCURO */
    :root {
        --limpia-papel: #17111f;
        --limpia-hoja: #201829;
        --limpia-cabecera: #251c30;
        --limpia-hover: #2a2036;
        --limpia-borde: #352a44;
        --limpia-borde-fino: #2a2135;
        --limpia-borde-control: #7d6f94;
        --limpia-tinta: #f1edf6;
        --limpia-tinta-2: #c9bedb;
        --limpia-tinta-3: #a99bbd;
        --limpia-morado: #c7a4e6;
        --limpia-morado-hondo: #b48ad9;
        --limpia-morado-aguada: #33264a;
        --limpia-sobre-morado: #17111f;
        --limpia-bien-fondo: #173430;
        --limpia-bien-tinta: #8fd3c8;
        --limpia-aviso-fondo: #3a2c10;
        --limpia-aviso-tinta: #f0c674;
        --limpia-error-fondo: #3d1a14;
        --limpia-error-tinta: #f2a596;
        --limpia-neutro-fondo: #2e2540;
        --limpia-neutro-tinta: #cbbfe0;
        --limpia-barra-fondo: #e9e3f1;
        --limpia-barra-tinta: #17111f;
        /* El menú lateral: un punto más oscuro que el papel (#17111f) y que la hoja (#201829). */
        --limpia-menu-fondo: #0b0710;
        --limpia-menu-borde: #2a2135;
        --limpia-menu-hover: #1b1326;
        --limpia-menu-actual: #2a1f3d;
        --limpia-menu-acento: #c7a4e6;
        --limpia-menu-tinta: #e6dff0;
        --limpia-menu-tinta-2: #c9bedb;
        --limpia-menu-tinta-3: #a99bbd;
        --limpia-menu-sobre-actual: #ffffff;
        --limpia-menu-foco: #d8bdf0;
        --limpia-menu-desplazamiento: #4a3d63;
        --limpia-menu-bien: #8fd3c8;
        --limpia-menu-aviso: #f0c674;
        --limpia-menu-error: #f2a596;
        /* El lienzo NO cambia con el modo: es papel (DESIGN.md «Lienzos»). */
        --limpia-lienzo: #ffffff;
        --limpia-lienzo-tinta: #2a1a3e;
        --limpia-lienzo-tinta-2: #5b4a73;
        --limpia-sombra-menu: 0 8px 24px rgba(0, 0, 0, 0.55);
        color-scheme: dark;

        /* Las fichas del plano en oscuro: lo que ya las consume cambia con ellas. */
        --plano-papel: #17111f;
        --plano-hoja: #201829;
        --plano-papel-hondo: #2a2135;
        /* El logotipo en oscuro (2026-10-04): trazo morado #672990 sobre #201829 daba 1,87:1; con este
           filtro (contraste .42, brillo 1,68: #672990 -> #c599e0) da 7,36:1 sobre la hoja y 7,93:1 sobre el
           papel. En claro no existe y el logo va tal cual. Lo consumen .plano-barra-logo y .arranque. */
        --plano-logo-filtro: contrast(0.42) brightness(1.68);
        --plano-tinta: #f1edf6;
        --plano-tinta-2: #c9bedb;
        --plano-linea: rgba(241, 237, 246, 0.18);
        --plano-linea-fina: rgba(241, 237, 246, 0.12);
        --plano-muro: rgba(241, 237, 246, 0.55);
        --plano-morado: #c7a4e6;
        --plano-morado-honda: #b48ad9;
        --plano-morado-aguada: rgba(199, 164, 230, 0.14);
        --plano-morado-aguada-honda: rgba(199, 164, 230, 0.24);
        --plano-salvia: #8fd3c8;
        --plano-salvia-viva: #8fd3c8;
        --plano-mostaza-honda: #f0c674;
        --plano-arcilla-honda: #f2a596;
        --plano-berenjena-honda: #0f0a16;
        /* La insignia de la pestaña abierta, que plano.css pone sobre la tecla ENTINTADA: en oscuro la
           tinta es clara, y la lila clara encima daba 1,4:1. La tinta suave del claro da 6,7:1. */
        --plano-lila-clara: #5b4a73;

        /* EL ALIAS COPIADO DE app.css (revisión final del rediseño D1, I3). `--tentalo-tinta-suave` lleva
           el valor escrito (#5b4a73, no un var(): ver app.css) y no seguía a --plano-tinta-2: sus 77 reglas
           daban ~2,3:1 sobre el papel oscuro. Es el mismo valor que --plano-tinta-2 aquí arriba. */
        --tentalo-tinta-suave: #c9bedb;
    }
    /* FIN: OSCURO */

    html { scrollbar-color: rgba(241, 237, 246, 0.25) transparent; }
}

/* LAS CAPAS (revisión final del rediseño D1, I2). Lo que flota en las listas y
   las fichas, en UNA escala y no en números sueltos; el orden es el que importa:

     39  --limpia-z-barra           la barra «Hay cambios sin guardar», pegada abajo:
                                    por DEBAJO de los velos, para que con un menú
                                    abierto pulsarla lo cierre en vez de guardar.
     40  --limpia-z-velo            los velos transparentes que recogen «pulsar fuera».
     41  --limpia-z-sobre-velo      lo que se sigue pulsando con un menú abierto: su
                                    propio botón, las otras pastillas, las pestañas.
     42  --limpia-z-menu            los paneles desplegables (pastilla, «Más», «⋯»).
     45  --limpia-z-carril-abierto  el carril de las pestañas mientras «Más» está
                                    abierto. A ≥ 900 px plano.css lo pega con
                                    `z-index: 20`, y eso lo hace CONTEXTO DE APILADO:
                                    su panel (42) y su velo (40) cuentan DENTRO de su
                                    20, y la barra (39) los tapaba. Con el velo dentro
                                    el carril entero sube por encima de la barra.

   Todo muy por debajo de la barra del marco (1100), los diálogos (1300) y los
   avisos (1400) de MudBlazor. Los números que quedan en esta hoja (1-4) son de
   DENTRO de la tabla —la cabecera y la columna pegadas—, en el contexto de su caja.
   HojaTemaTests.Las_capas_de_la_hoja_son_una_escala_de_fichas… lo comprueba. */
:root {
    --limpia-z-barra: 39;
    --limpia-z-velo: 40;
    --limpia-z-sobre-velo: 41;
    --limpia-z-menu: 42;
    --limpia-z-carril-abierto: 45;
}

/* El envoltorio de App.razor que lleva `data-tema`: no pinta caja. */
.tema { display: contents; }

/* --- Los campos: blancos, con canto de 1 px y el morado al enfocar -------- */
/* El mismo peso que las reglas de plano.css (dos clases) y detrás: ganan por
   orden. Es lo que deja los campos legibles en oscuro, donde el velo de tinta
   de plano.css (rgba(42, 26, 62, .05)) no se ve. */
.mud-input.mud-input-filled,
.mud-input.mud-input-outlined {
    background-color: var(--limpia-hoja);
    border-radius: var(--limpia-radio-control);
    box-shadow: inset 0 0 0 1px var(--limpia-borde-control);
}

.mud-input.mud-input-filled:hover,
.mud-input.mud-input-outlined:hover {
    background-color: var(--limpia-hoja);
    box-shadow: inset 0 0 0 1px var(--limpia-tinta-3);
}

.mud-input.mud-input-filled.mud-focused,
.mud-input.mud-input-outlined.mud-focused {
    background-color: var(--limpia-hoja);
    box-shadow: inset 0 0 0 2px var(--limpia-morado);
}

.mud-input.mud-input-error,
.mud-input.mud-input-error.mud-focused { box-shadow: inset 0 0 0 2px var(--limpia-error-tinta); }

/* --- El autorrelleno del navegador respeta la caja del campo (2026-10-31) ---------------------------------------------
   Chrome pinta el fondo del autorrelleno (amarillo o azul pálido) en el <input>, que es HIJO de la caja `.mud-input`: la
   caja pone el fondo, el radio y el canto de 1 px (un `inset` suyo) y el <input> se pinta encima, de modo que el color
   del navegador tapaba el canto, se salía del radio y dejaba un hueco entre el campo y su icono o su botón del ojo
   (login: «Correo» con el icono de persona y «Contraseña» con el ojo). Los campos con adorno eran los que se veían peor,
   pero la regla es de TODOS los campos de la central: es la pieza común de MudBlazor.
   Se arregla en el <input> y sin tocar la caja:
     1. el relleno del navegador se tapa con un `inset` de 1000 px del color del campo (la técnica clásica);
     2. `clip-path` recorta 2 px el pintado del <input> por los lados que tocan el borde de la caja, que es justo lo que
        ocupan el canto (1 px) y el anillo de foco o de error (2 px): así el relleno ya no los pisa. Por el lado del
        adorno no se recorta (ahí el <input> no toca el borde y se comería la primera letra);
     3. el color de la letra y el cursor se fijan, porque el autorrelleno cambia el de la letra a negro;
     4. `transition` con 600000 s de retraso: el color de fondo del navegador no llega a verse nunca (segunda barrera).
   Ni un color escrito: las fichas de la hoja, que ya cambian con el tema. */
.mud-input > :is(input, textarea).mud-input-slot:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--limpia-hoja) inset;
    box-shadow: 0 0 0 1000px var(--limpia-hoja) inset;
    -webkit-text-fill-color: var(--limpia-tinta);
    caret-color: var(--limpia-tinta);
    border-radius: inherit;
    clip-path: inset(2px);
    transition: background-color 600000s 0s, color 600000s 0s;
}

.mud-input > .mud-input-slot.mud-input-root-adorned-start:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) { clip-path: inset(2px 2px 2px 0); }
.mud-input > .mud-input-slot.mud-input-root-adorned-end:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) { clip-path: inset(2px 0 2px 2px); }
.mud-input > .mud-input-slot.mud-input-root-adorned-start.mud-input-root-adorned-end:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) { clip-path: inset(2px 0); }

/* --- Etiquetas de estado --------------------------------------------------- */
.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: var(--plano-t-12);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.etiqueta-bien { background-color: var(--limpia-bien-fondo); color: var(--limpia-bien-tinta); }
.etiqueta-aviso { background-color: var(--limpia-aviso-fondo); color: var(--limpia-aviso-tinta); }
.etiqueta-error { background-color: var(--limpia-error-fondo); color: var(--limpia-error-tinta); }
.etiqueta-neutro { background-color: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); }

/* UNA CIFRA CON TONO (CrudColumna.TonoDe; revisión de la tarea 13: el descuadre de un arqueo). Sin fondo: es una cifra,
   no una etiqueta; va en la tinta del tono (arcilla #b03826 sobre la hoja blanca 6,1:1; #f2a596 sobre #201829 en
   oscuro 8,7:1) y un punto más gruesa. La palabra del tono va dentro, en .lista-oculto, para el lector de pantalla. */
.celda-tono[data-tono="error"] { color: var(--limpia-error-tinta); font-weight: 650; }
.celda-tono[data-tono="aviso"] { color: var(--limpia-aviso-tinta); font-weight: 650; }
.celda-tono[data-tono="bien"] { color: var(--limpia-bien-tinta); font-weight: 650; }

/* --- El error de un bloque, con «Reintentar» en su sitio (§6) -------------- */
.estado-error {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde);
    border-inline-start: 3px solid var(--limpia-error-tinta);
    border-radius: var(--limpia-radio);
}

.estado-error-icono { color: var(--limpia-error-tinta); display: inline-flex; }
.estado-error-texto { flex: 1 1 16rem; min-inline-size: 0; }
.estado-error-titulo { margin: 0; font-weight: 650; }
.estado-error-mensaje { margin: 2px 0 0; color: var(--limpia-tinta-2); }
.estado-error-detalle { margin: 2px 0 0; color: var(--limpia-tinta-3); font-size: var(--plano-t-12); }

/* --- Texto solo para lectores de pantalla ---------------------------------- */
.lista-oculto {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- El pie de una lista: contador, paginador y tamaño de página (§4.1) ---- */
/* Los botones de página son controles: su canto es --limpia-borde-control
   (3:1) y el morado solo marca la página en la que se está. 36 px de alto
   (40 con el dedo): holgado sobre los 24 px que pide WCAG 2.5.8. */
.lista-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 4px;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-13);
}

.lista-pie .crud-contador { color: var(--limpia-tinta-3); }

.lista-paginador {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.lista-rango {
    margin-inline-end: 8px;
    color: var(--limpia-tinta-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lista-pagina {
    min-inline-size: 36px;
    min-block-size: 36px;
    padding: 0 8px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.lista-pagina-flecha { font-size: var(--plano-t-17); line-height: 1; }

.lista-pagina:hover:not(:disabled):not([aria-current="page"]) { background-color: var(--limpia-hover); }

.lista-pagina[aria-current="page"] {
    background-color: var(--limpia-morado);
    border-color: var(--limpia-morado);
    color: var(--limpia-sobre-morado);
    font-weight: 600;
}

.lista-pagina:disabled {
    color: var(--limpia-tinta-3);
    border-color: var(--limpia-borde);
    cursor: default;
    opacity: 0.6;
}

.lista-pagina-hueco {
    min-inline-size: 20px;
    color: var(--limpia-tinta-3);
    text-align: center;
}

.lista-tamano {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--limpia-tinta-3);
}

.lista-tamano select {
    min-block-size: 36px;
    padding: 0 8px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    font: inherit;
}

/* --- Las pastillas de filtro y su panel (§4.1) ----------------------------- */
.lista-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Por encima del velo: pulsar otra pastilla con el panel abierto la abre a la
   primera, sin tener que cerrar antes. */
.lista-chip-caja {
    position: relative;
    z-index: var(--limpia-z-sobre-velo);
}

/* LA PASTILLA ES UN BOTÓN MÁS DE LA BARRA, NO UN ÓVALO (repaso del 2026-10-06, a petición del usuario: «hazlos más
   cuadrados como el que tiene al lado»). Era una píldora de 32 px entre un buscador y unos «Columnas» y «Exportar» de
   48: tres formas y tres alturas en una fila. Ahora lleva el radio de control de TODOS los botones (10 px) y su alto
   de toque (`--tentalo-toque`, el de `.crud-boton`), así que la barra se lee como una sola fila. La puesta se sigue
   distinguiendo por el morado (canto, aguada y peso) y «+ Filtro» por su canto discontinuo y su tinta rebajada. La
   letra se queda en 13 px: a 15 la fila de Familias no cabía a 1024 px y «Nuevo» bajaba a otro renglón.
   Medido en tools/central/capturar-repaso-chips-y-mas.mjs (reports/central/repaso-chips-y-menu-mas-2026-10-06/). */
.lista-chip {
    min-block-size: var(--tentalo-toque);
    padding: 0 12px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta-2);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--plano-radio-control);
    font: inherit;
    font-size: var(--plano-t-13);
    white-space: nowrap;
    cursor: pointer;
}

.lista-chip:hover:not(.lista-chip-on) { background-color: var(--limpia-hover); }

/* Con valor = seleccionada = morado. */
.lista-chip-on {
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    border-color: var(--limpia-morado);
    font-weight: 600;
}

.lista-chip-mas {
    border-style: dashed;
    color: var(--limpia-tinta-3);
}

.lista-chip-panel {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline-start: 0;
    z-index: var(--limpia-z-menu);
    display: flex;
    flex-direction: column;
    min-inline-size: 11rem;
    max-inline-size: min(20rem, 90vw);
    max-block-size: 18rem;
    overflow-y: auto;
    padding: 4px;
    background-color: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    /* Un menú flota sobre la hoja: es de lo poco que lleva sombra. */
    box-shadow: var(--limpia-sombra-menu);
}

/* `justify-content` porque el `button` de MudBlazor es un flex centrado: sin él, las opciones
   salían centradas en el panel (capturas de la tarea 9). Igual en las de «Más ▾». */
.lista-chip-opcion {
    justify-content: flex-start;
    min-block-size: 36px;
    padding: 0 12px;
    background: none;
    color: var(--limpia-tinta);
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: var(--plano-t-13);
    text-align: start;
    cursor: pointer;
}

.lista-chip-opcion:hover { background-color: var(--limpia-hover); }

.lista-chip-opcion[aria-pressed="true"] {
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    font-weight: 600;
}

/* El velo transparente que recoge el «pulsar fuera». */
.lista-chip-velo {
    position: fixed;
    inset: 0;
    z-index: var(--limpia-z-velo);
    background: transparent;
}

.lista-pagina:focus-visible,
.lista-tamano select:focus-visible,
.lista-chip:focus-visible,
.lista-chip-opcion:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .lista-tabla .crud-celda-seleccion .mud-checkbox > .mud-button-root { padding: 10px; }
    .lista-pagina,
    .lista-tamano select { min-block-size: 44px; min-inline-size: 44px; }
    .lista-chip-opcion { min-block-size: 44px; }
}

/* =============================================================================
   LA LISTA (CrudLista, §4.1)
   La barra, la hoja y la tabla propia. El pie (contador y paginador) y las
   pastillas de filtro están arriba, con sus piezas.

   Por debajo de 720 px MANDA plano.css: la barra en UNA fila (buscador, «Nuevo»
   y «⋯», sin envolver), la fila a dos líneas por `data-papel` y el pie de
   totales en una línea. Aquí no se toca nada de eso; solo se deja bajar a un
   segundo renglón lo que esa barra no conocía (pastillas y «Exportar»).
   Por encima de 720 px, plano.css fija la primera columna al desplazar a lo
   ancho y pinta la señal de continuidad con el color del PAPEL; dentro de la
   hoja se repinta con el de la HOJA.
   ============================================================================= */

.crud-lista,
.crud-lista-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-inline-size: 0;
}

/* El hueco entre la barra y la hoja lo pone el `gap` de arriba. */
.crud-lista .crud-barra { margin: 0; }

.crud-lista .crud-buscador-caja {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* EL BUSCADOR MIDE 48 PX, NO 77 (capturas de la tarea 9). app.css le pone `min-height: 48px` al
   <input> para el dedo, pero MudBlazor lo deja en `box-sizing: content-box` y le suma 23 + 6 px de
   relleno: la barra crecía a 85 px. Contando el relleno dentro, el campo mide lo que app.css quería. */
.crud-lista .crud-buscador input.mud-input-slot { box-sizing: border-box; }

/* --- La hoja -------------------------------------------------------------- */
.lista-hoja {
    background-color: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
    min-inline-size: 0;
}

/* La página anterior sigue a la vista mientras llega la nueva (aria-busy). */
.lista-hoja-cargando .lista-tabla tbody {
    opacity: 0.55;
    transition: opacity var(--plano-tiempo) var(--plano-curva);
}

.lista-hoja-vacia { padding: 32px 16px; }

.lista-tabla {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--plano-t-13);
    color: var(--limpia-tinta);
}

.lista-tabla thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: 9px 12px;
    background-color: var(--limpia-cabecera);
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-11);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: start;
    white-space: nowrap;
    border-block-end: 1px solid var(--limpia-borde);
}

/* El alto de la fila y el no partir son de escritorio (abajo): por debajo de
   720 px plano.css pone el nombre en bloque y a dos líneas. */
.lista-tabla tbody :is(td, th) {
    padding: 8px 12px;
    vertical-align: middle;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.lista-tabla tbody tr:last-child :is(td, th) { border-block-end: none; }
.lista-tabla tbody tr:hover :is(td, th) { background-color: var(--limpia-hover); }
/* Una cabecera de fila (<th scope="row">, el tipo de IVA del desglose) se lee como una celda más, sin el centrado ni la
   negrita del navegador. */
.lista-tabla tbody th { text-align: start; font-weight: 500; }
/* Seleccionada = morado (aguada). */
.lista-tabla tbody tr.lista-fila-elegida td { background-color: var(--limpia-morado-aguada); }

.lista-tabla :is(th, td).crud-celda-numero { text-align: end; font-variant-numeric: tabular-nums; }
.lista-tabla :is(th, td).crud-celda-centro { text-align: center; }
/* 40 px justos, sin relleno lateral: la columna fija del nombre empieza ahí. */
.lista-tabla :is(th, td).crud-celda-seleccion {
    inline-size: 40px;
    padding-block: 2px;
    padding-inline: 0;
    text-align: center;
}

/* LA CASILLA CABE EN SUS 40 PX (capturas de la tarea 9). MudCheckBox pinta un botón de icono de
   20 px con 12 × 18 px de relleno: 56,8 px de ancho, que estiraban la celda, y la columna fija del
   nombre (pegada a 40 px) le tapaba 17 px al desplazar a lo ancho; y 44 px de alto, que subían la fila
   a 65 px. Con 8 px de relleno son 36 × 36: cabe, y sigue por encima de los 24 px de WCAG 2.5.8. */
.lista-tabla .crud-celda-seleccion .mud-checkbox > .mud-button-root { min-block-size: 0; padding: 8px; }
/* El ancho va también DENTRO: con la tabla más ancha que su caja, Chrome dejaba la columna en los
   36 px del contenido pese al `inline-size: 40px` de la celda, y la columna fija del nombre (a 40 px)
   se montaba 4 px sobre la casilla. Un contenido de 40 px no deja otra medida. */
.lista-tabla .crud-celda-seleccion .mud-input-control { margin: 0; inline-size: 40px; min-block-size: 0; }
.lista-tabla .crud-celda-seleccion .mud-input-control-input-container { justify-content: center; }

/* FILAS DE 40 PX CON RATÓN (§4.1; capturas de la tarea 9). Los botones de la fila son de
   app.css (`.crud-accion`, 48 × 48 para el dedo) y subían cada fila a 65 px. Con un ratón bastan
   32 px (WCAG 2.5.8 pide 24); con el dedo se quedan los 48 y la fila crece, que es lo que toca. */
@media (min-width: 720px) and (pointer: fine) {
    .lista-tabla tbody td.crud-celda-acciones { padding-block: 4px; }

    .lista-tabla .crud-celda-acciones .mud-icon-button.crud-accion {
        min-block-size: 32px;
        min-inline-size: 32px;
        padding: 6px;
    }
}

/* El nombre de la fila se pulsa: es morado. */
.lista-tabla .crud-principal {
    color: var(--limpia-morado);
    font-weight: 600;
    text-decoration: none;
}

.lista-tabla .crud-principal:hover:not(:disabled) { text-decoration: underline; }

/* Un nombre apagado (el código de una instalación dada de baja: no hay nada a lo que entrar) no se subraya ni da cursor de mano. */
.lista-tabla .crud-principal:disabled { cursor: default; }
.lista-tabla tbody a:not(.crud-principal):not(.mud-icon-button) { color: var(--limpia-morado); }

.lista-tabla :is(.crud-principal, tbody a):focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
    border-radius: 2px;
}

/* La cabecera que ordena es un botón sin aspecto de botón: hereda el versal. */
.crud-orden {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.crud-orden:hover,
th[aria-sort] .crud-orden { color: var(--limpia-tinta); }
.crud-orden:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 2px; }
.crud-orden-flecha { font-size: 10px; }

.lista-tabla tfoot :is(td, th) {
    padding: 9px 12px;
    text-align: start;
    background-color: var(--limpia-cabecera);
    font-weight: 700;
    border-block-start: 1px solid var(--limpia-borde);
}

.lista-sin-coincidencias {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--limpia-tinta-2);
    text-align: center;
}

.lista-sin-coincidencias p { margin: 0; }

/* --- Escritorio: la hoja recorta y la tabla se desplaza dentro ------------ */
/* La cabecera se queda pegada porque la tabla tiene su propio desplazamiento:
   con una tabla más ancha que la hoja (clientes: 18 columnas) el contenedor
   tiene que desplazarse a lo ancho, y un `position: sticky` solo se pega
   dentro de su contenedor con desplazamiento. */
@media (min-width: 720px) {
    .crud-lista .crud-buscador-caja { flex: 1 1 16rem; max-inline-size: 30rem; }

    .lista-hoja { overflow: clip; }

    /* Una fila, una línea: una tabla ancha (productos, 20 columnas; clientes, 18)
       se desplaza a lo ancho en vez de partir los nombres. Era la regla de
       `.crud-tabla .mud-table-cell` en app.css, que sin MudTable ya no encaja. */
    .lista-tabla tbody td {
        block-size: var(--limpia-fila);
        white-space: nowrap;
    }

    .crud-lista .crud-tabla {
        overflow: auto;
        max-block-size: max(24rem, calc(100dvh - 15rem));
    }

    /* La columna fija de plano.css (la primera, y con selección también la del
       nombre) lleva el fondo de la HOJA, no el del papel; la cabecera, el suyo. */
    .lista-hoja .lista-tabla tbody > tr > :is(:first-child, [data-papel="seleccion"] + *) {
        background-color: var(--limpia-hoja);
        background-image: none;
    }

    .lista-hoja .lista-tabla tbody > tr > [data-papel="seleccion"] + * {
        position: sticky;
        inset-inline-start: 40px;
        z-index: 2;
    }

    /* plano.css (0,4,1) pinta aquí un morado aguado con background-image: fuera. */
    .lista-hoja .lista-tabla tbody > tr:hover > :is(:first-child, [data-papel="seleccion"] + *) {
        background-color: var(--limpia-hover);
        background-image: none;
    }

    .lista-hoja .lista-tabla tbody > tr.lista-fila-elegida > :is(:first-child, [data-papel="seleccion"] + *) {
        background-color: var(--limpia-morado-aguada);
    }

    /* La cabecera pegada arriba pasa POR ENCIMA de la columna pegada a la
       izquierda al desplazar en las dos direcciones; su esquina, de todo. */
    .lista-hoja .lista-tabla thead > tr > th { z-index: 3; }

    .lista-hoja .lista-tabla thead > tr > :is(:first-child, [data-papel="seleccion"] + *) {
        position: sticky;
        z-index: 4;
        background-color: var(--limpia-cabecera);
        background-image: none;
    }

    .lista-hoja .lista-tabla thead > tr > [data-papel="seleccion"] + * { inset-inline-start: 40px; }

    /* La señal de continuidad de plano.css, con las tapas del color de la hoja. */
    .lista-hoja .crud-tabla {
        background-image:
            linear-gradient(to right, var(--limpia-hoja) 55%, transparent),
            linear-gradient(to left, var(--limpia-hoja) 55%, transparent),
            linear-gradient(to right, color-mix(in srgb, var(--limpia-tinta) 20%, transparent), transparent),
            linear-gradient(to left, color-mix(in srgb, var(--limpia-tinta) 20%, transparent), transparent);
    }
}

/* --- Teléfono: lo que la barra de una fila no conocía baja a otro renglón -- */
@media (max-width: 719.98px) {
    /* EL PIE DE TOTALES PUEDE PARTIRSE (capturas de la tarea 9). plano.css lo pone en una línea sin
       envolver porque pensaba en «un rótulo y un total»; el diario trae tres (base, IVA y total) y a
       390 px se salía 2 px de la ventana. Se envuelve, y los totales se quedan a la derecha. */
    /* Con el peso del `:is()` de plano.css (0,3,3) o más, que pone `space-between`. */
    .lista-hoja > .crud-tabla > table.lista-tabla > tfoot > tr { flex-wrap: wrap; justify-content: flex-end; }
    .lista-hoja > .crud-tabla > table.lista-tabla > tfoot > tr > .lista-totales-rotulo { flex: 1 1 auto; }

    /* La fila a dos líneas de plano.css se pensó sobre el papel, sin canto: dentro de la hoja el
       texto quedaba a 4 px del borde. El aire va en la caja, no en la fila, para no mover los
       carriles de la cifra y del «⋯», que se colocan contra la fila. */
    .lista-hoja > .crud-tabla { padding-inline: 12px; }

    .crud-lista .crud-barra:has(.lista-filtros, [data-testid="exportar"]) { flex-wrap: wrap; }
    .crud-lista .crud-barra .lista-filtros { order: 4; flex: 1 1 100%; }
    .crud-lista .crud-barra [data-testid="exportar"] { order: 5; }
    /* «EXPORTAR» CON VARIOS FORMATOS (D5) lleva el botón dentro de .crud-exportar, que es el hijo de la barra: el
       orden va en la caja (sin él quedaba la primera, delante del buscador). Abajo, al principio de su renglón, el
       panel se abre hacia la derecha: pegado a la derecha del botón se salía 126 px por la izquierda de la ventana
       (capturas de la tarea 13, documentos-facturas-exportar a 390 px). */
    /* OJO: abrir hacia la derecha da por hecho que .crud-exportar EMPIEZA su renglón, y hoy es así porque delante va
       .lista-filtros (orden 4, el renglón entero). Una lista futura con «Exportar» y SIN filtros la dejaría al lado del
       buscador y el panel se saldría por la derecha: entonces hay que volver a medirlo (capturas a 390 px). */
    .crud-lista .crud-barra .crud-exportar { order: 5; }
    .crud-lista .crud-barra .crud-exportar .crud-exportar-panel { inset-inline-start: 0; inset-inline-end: auto; }

    /* LA FILA MARCADA, ENTERA (capturas de la tarea 13, documentos-entregas-marcadas a 390 px). En el teléfono la fila
       es una tarjeta de dos líneas y cada celda mide lo que su texto: el morado de la regla de escritorio, puesto en
       las celdas, salía a parches (detrás del número, de la cifra y del «⋯») con la tarjeta blanca entre ellos. Aquí
       va en la fila y las celdas lo dejan ver. */
    .lista-tabla tbody tr.lista-fila-elegida { background-color: var(--limpia-morado-aguada); }
    .lista-tabla tbody tr.lista-fila-elegida td { background-color: transparent; }

    /* DOS CIFRAS DECLARADAS (revisión de la tarea 13: entregas, «Total» y «Pendiente», para que ninguna se esconda por
       ancho en el escritorio). La fila del teléfono tiene UN hueco de cifra, que plano.css ancla a la derecha de la
       primera línea, y dos se pintaban una encima de otra: se queda la primera; la otra está en el pie de totales y en
       la ficha. Con más peso que el `:is()` de plano.css (0,4,3) que la pone en `flex`. */
    .lista-hoja > .crud-tabla > table.lista-tabla > tbody > tr > td[data-papel="cifra"] ~ td[data-papel="cifra"] { display: none; }
}

/* =============================================================================
   «MÁS ▾» DE LAS PESTAÑAS Y LA ETIQUETA DE LA CABECERA (§4.2)

   La fila de pestañas y su carril son de plano.css (y por debajo de 720 px el
   carril ENTERO se esconde: ahí cada zona enseña su tirador de acordeón y «Más»
   no existe). Aquí solo se añade lo que esa hoja no conocía: el botón «Más», su
   desplegable y la etiqueta junto al título. Todo con fichas `--limpia-*`; el
   morado, solo para lo seleccionado y lo que se pulsa.
   ============================================================================= */

.admin-cabecera-titulo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-cabecera-titulo-fila > .admin-cabecera-titulo { min-inline-size: 0; }

/* La caja de «Más» cuelga del carril de plano.css, hermana del tablist. Lleva la
   misma regla de 1,5 px que la fila, para que la línea no se corte donde acaba
   la última pestaña. Por encima del velo (40) para poder pulsar «Más» otra vez
   con el desplegable abierto. */
.plano-caja-mas {
    position: relative;
    z-index: var(--limpia-z-sobre-velo);
    flex: none;
    display: flex;
    align-items: flex-end;
    border-block-end: 1.5px solid var(--limpia-tinta);
}

.plano-caja-mas-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: var(--plano-toque);
    padding: 0 1rem;
    background: none;
    border: 0;
    border-radius: var(--limpia-radio-control) var(--limpia-radio-control) 0 0;
    color: var(--limpia-tinta-2);
    font: inherit;
    font-size: var(--plano-t-15);
    font-weight: 560;
    white-space: nowrap;
    cursor: pointer;
}

/* EL RÓTULO DE «MÁS» CON TOPE (pendiente de D1): con una zona de nombre largo abierta dentro, el botón empujaba la
   fila. El nombre entero va en el `title` del botón. */
.plano-caja-mas-rotulo {
    max-inline-size: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El hover no pisa lo seleccionado: «Más» en morado (la abierta es de dentro) se queda así.
   LLEVA SU RAYA GRIS (capturas de la tarea 9): en la ficha el carril es del color del papel y el
   fondo de hover (--limpia-hover sobre --limpia-papel) daba un contraste de 1,04, que no se ve. La raya es la de
   la pestaña abierta en gris: dice «esto se pulsa» sin parecer seleccionado. */
.plano-caja-mas-boton:hover:not(.plano-caja-mas-activa) {
    background-color: var(--limpia-hover);
    color: var(--limpia-tinta);
    box-shadow: inset 0 -2px 0 var(--limpia-borde-control);
}

.plano-caja-mas-boton.plano-caja-mas-activa {
    color: var(--limpia-morado);
    font-weight: 640;
    box-shadow: inset 0 -2px 0 var(--limpia-morado);
}

.plano-caja-mas-boton:focus-visible,
.plano-caja-mas-opcion:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: -2px;
}

/* EL ANCHO ES EL DE LA OPCIÓN MÁS LARGA (repaso del 2026-10-06). El panel cuelga de la caja de «Más», que mide lo que
   su botón (unos 90 px): un absoluto sin ancho se encoge al hueco de su caja, así que se quedaba en su mínimo de 12rem y
   «Informe de balance de caja · 6 bloques» partía la insignia en dos líneas. Con `max-content` mide lo que su opción
   más larga, con tope (24rem, y nunca más que la ventana menos sus márgenes); lo que pase del tope se corta con
   elipsis en el rótulo, nunca en la insignia. */
.plano-caja-mas-panel {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline-end: 0;
    z-index: var(--limpia-z-menu);
    display: flex;
    flex-direction: column;
    inline-size: max-content;
    min-inline-size: 12rem;
    max-inline-size: min(24rem, calc(100vw - 32px));
    max-block-size: min(24rem, 60dvh);
    overflow-y: auto;
    padding: 4px;
    background-color: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    box-shadow: var(--limpia-sombra-menu);
}

.plano-caja-mas-panel[hidden] { display: none; }

/* UNA OPCIÓN, UNA LÍNEA: el rótulo a la izquierda, que es lo único que cede (elipsis), y la insignia en su columna a
   la derecha —`margin-inline-start: auto` contra el borde de la opción, que mide lo que el panel—, sin partirse y
   centrada con su texto. El punto de arcilla de los fallos va pegado al rótulo, delante de la insignia, para que la
   columna de insignias no se mueva cuando lo hay. 36 px de alto, el de las opciones de menú de la hoja limpia
   (`.lista-chip-opcion`); 44 con el dedo, abajo. */
.plano-caja-mas-opcion {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-block-size: 36px;
    padding: 0 12px;
    background: none;
    color: var(--limpia-tinta);
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: var(--plano-t-13);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

.plano-caja-mas-opcion > .plano-caja-pestana-rotulo {
    flex: 0 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plano-caja-mas-opcion > .plano-caja-pestana-errores { flex: none; order: 1; }

.plano-caja-mas-opcion > .plano-caja-pestana-insignia {
    flex: none;
    order: 2;
    margin-inline-start: auto;
    padding-inline-start: 16px;
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-12);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.plano-caja-mas-opcion:hover:not([aria-current="true"]) { background-color: var(--limpia-hover); }

.plano-caja-mas-opcion[aria-current="true"] {
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    font-weight: 640;
}

/* El velo transparente que recoge el «pulsar fuera». */
.plano-caja-mas-velo {
    position: fixed;
    inset: 0;
    z-index: var(--limpia-z-velo);
    background: transparent;
}

@media (pointer: coarse) {
    .plano-caja-mas-opcion { min-block-size: 44px; }
}

/* Solo con la fila a la vista (plano.css esconde el carril por debajo de 720 px;
   este media es su complemento exacto, sin hueco entre 719,98 y 720).

   El carril pasa a ser una FILA FLEX cuando lleva «Más», y las dos flechas de
   desplazamiento, que eran absolutas y se montaban sobre los extremos, pasan a ser
   piezas de la fila: si no, la derecha taparía el botón. Orden: flecha izquierda,
   pestañas, flecha derecha, «Más». */
@media not all and (max-width: 719.98px) {
    .plano-caja-carril:has(> .plano-caja-mas) {
        display: flex;
        align-items: stretch;
    }

    .plano-caja-carril:has(> .plano-caja-mas) > .plano-caja-pestanas {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .plano-caja-carril:has(> .plano-caja-mas) > .plano-caja-flecha {
        position: static;
        flex: none;
        background-image: none;
        border-block-end: 1.5px solid var(--limpia-tinta);
    }

    .plano-caja-carril:has(> .plano-caja-mas) > .plano-caja-flecha-der { order: 2; }
    .plano-caja-carril:has(> .plano-caja-mas) > .plano-caja-mas { order: 3; }

    /* LA SEÑAL DE «HAY MÁS» CON LAS FLECHAS EN LA FILA (capturas de la tarea 9). En plano.css la flecha
       flota sobre las pestañas con un degradado del papel y la punta sale al pasar el ratón. Aquí la
       flecha es una pieza más y no tapa nada: el degradado ya no difumina ninguna pestaña y la punta
       escondida dejaba un hueco en blanco, con la última pestaña cortada en seco como si fuera la última.
       La punta se ve siempre y es el borde de la fila el que se difumina. */
    .plano-caja-carril:has(> .plano-caja-mas) > .plano-caja-flecha .mud-icon-root { opacity: 1; }

    .plano-caja-carril:has(> .plano-caja-mas)[data-desborda="si"][data-fin="no"] > .plano-caja-pestanas {
        mask-image: linear-gradient(to left, transparent, black 2rem);
    }

    .plano-caja-carril:has(> .plano-caja-mas)[data-desborda="si"][data-inicio="no"] > .plano-caja-pestanas {
        mask-image: linear-gradient(to right, transparent, black 2rem);
    }

    .plano-caja-carril:has(> .plano-caja-mas)[data-desborda="si"][data-inicio="no"][data-fin="no"] > .plano-caja-pestanas {
        mask-image: linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent);
    }

    /* LA PESTAÑA ENFOCADA NO SE DIFUMINA (pendiente de D1): la máscara del borde caía encima de la pestaña a la que
       se llegaba con las flechas. Con el foco dentro de la fila, la fila se ve entera. Cada selector es más concreto
       que su pareja de arriba. */
    .plano-caja-carril:has(> .plano-caja-mas)[data-desborda="si"][data-fin="no"] > .plano-caja-pestanas:has(:focus-visible),
    .plano-caja-carril:has(> .plano-caja-mas)[data-desborda="si"][data-inicio="no"] > .plano-caja-pestanas:has(:focus-visible),
    .plano-caja-carril:has(> .plano-caja-mas)[data-desborda="si"][data-inicio="no"][data-fin="no"] > .plano-caja-pestanas:has(:focus-visible) {
        mask-image: none;
    }

    /* Con el desplegable abierto, las pestañas de la fila se quedan POR ENCIMA del velo:
       pulsar una abre su zona a la primera, en vez de gastar el clic en cerrar. */
    .plano-caja-carril:has(> .plano-caja-mas-velo) > :is(.plano-caja-pestanas, .plano-caja-flecha) {
        position: relative;
        z-index: var(--limpia-z-sobre-velo);
    }

    /* Y EL CARRIL ENTERO POR ENCIMA DE LA BARRA DE CAMBIOS mientras «Más» está abierto
       (revisión final del rediseño D1, I2; ver «LAS CAPAS» arriba). A ≥ 900 px plano.css lo
       pega con `z-index: 20` y su panel y su velo no salían de ese 20: a 1024 px de ancho y
       una ventana baja, la barra tapaba las últimas opciones. Entre 720 y 899 el carril no
       se pega y esto solo le da una capa que no le hace falta (es `position: relative` en
       plano.css). */
    .plano-caja-carril:has(> .plano-caja-mas-velo) {
        z-index: var(--limpia-z-carril-abierto);
    }
}

/* =============================================================================
   LA FICHA (CrudFicha, §4.2)

   Cabecera con su «⋯», pestañas planas bajo ella, cada zona en una hoja y la
   barra «Hay cambios sin guardar · Descartar · Guardar» pegada abajo.

   Por debajo de 720 px MANDA plano.css en la caja: el carril se esconde y cada
   zona enseña su tirador de acordeón. Por eso las pestañas planas van SOLO
   dentro de `@media not all and (max-width: 719.98px)`, que es el complemento
   exacto de esa regla. La barra sube por encima de la barra inferior del marco
   donde esta existe (por debajo de 480 px, como en plano.css).
   ============================================================================= */

.ficha { min-inline-size: 0; }

/* La regla bajo la cabecera sobra: la línea de las pestañas ya separa. */
.ficha .admin-cabecera {
    margin-block-end: 16px;
    padding-block-end: 0;
    border-block-end: none;
}

.ficha .admin-cabecera-titulo {
    font-size: var(--plano-t-20);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --- La caja deja de ser una hoja: las hojas son las zonas ------------------ */
.ficha .plano-caja {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ficha .plano-caja-panel { padding: 12px 0 0; }

/* --- Cada zona de primer nivel es una hoja; las de dentro, apartados -------- */
.ficha .plano-region:not(.plano-region .plano-region) {
    margin-block: 0 10px;
    padding: 16px 20px;
    background-color: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
}

.ficha .plano-region .plano-region {
    margin-block: 16px 0;
    padding: 16px 0 0;
    background: none;
    border: none;
    border-block-start: 1px solid var(--limpia-borde-fino);
    border-radius: 0;
}

/* El título encima de los campos, no a su izquierda (la rejilla 12rem·1fr de
   plano.css era de la ficha de antes). */
.ficha .plano-region-conrotulo { display: block; }

.ficha .plano-region-rotulo { margin-block-end: 12px; }

.ficha .plano-region .plano-rotulo,
.ficha .plano-region .admin-panel-titulo {
    margin: 0;
    color: var(--limpia-tinta);
    font-size: var(--plano-t-15);
    font-weight: 650;
    font-stretch: 100%;
    letter-spacing: 0;
    text-transform: none;
}

/* Con el título encima, la ayuda corre a lo ancho de la hoja: los 34ch de plano.css eran
   para la columna izquierda de la ficha de antes, y la partían en tres renglones. */
.ficha .plano-region-ayuda {
    max-inline-size: 72ch;
    margin-block: 2px 0;
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-12);
}

/* --- Campos a dos columnas (una en un teléfono) ---------------------------- */
@media (min-width: 720px) {
    .ficha .plano-region-campos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 12px;
        align-items: start;
    }

    .ficha .plano-region-campos > * { grid-column: 1 / -1; }

    .ficha .plano-region-campos > :is(.mud-input-control, .mud-select, .mud-autocomplete):not(:has(textarea)),
    .ficha .plano-region-campos > .campo-con-atajos {
        grid-column: auto;
    }
}

/* --- La etiqueta ENCIMA del campo, ayuda y error debajo --------------------- */
/* Siete clases: gana a la regla más pesada de MudBlazor que coloca la etiqueta
   rellena (`.mud-input:focus-within ~ label…margin-dense`, seis clases). */
.ficha .mud-input-control-input-container { display: flex; flex-direction: column; }

.ficha .mud-input-control .mud-input-control-input-container > .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    position: static;
    order: -1;
    transform: none;
    max-inline-size: 100%;
    margin-block-end: 4px;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-12);
    font-weight: 600;
    line-height: 1.3;
    pointer-events: auto;
}

.ficha .mud-input.mud-input-filled > :is(input, textarea).mud-input-slot { padding-block: 8px; }

/* Y 48 PX DE CAMPO, NO 64: el `min-height: 48px` de app.css es del campo entero, pero MudBlazor
   deja el <input> en `content-box` y le sumaba el relleno (capturas de la tarea 9). */
.ficha .mud-input.mud-input-filled > input.mud-input-slot { box-sizing: border-box; }

/* --- Los campos de varias líneas (2026-10-13) -------------------------------- */
/* «Pie de los correos» salía con la primera línea tapada a medias y un hueco vacío encima. MudBlazor
   reserva DENTRO del textarea relleno y denso el sitio de su etiqueta flotante: 27 px de margen
   arriba y una máscara (`mask-image: linear-gradient(transparent 23px, black 23px)`) que borra los
   23 px de arriba para que el texto desplazado no pise la etiqueta. Aquí la etiqueta va ENCIMA del
   campo (regla de arriba) y el relleno es de 8 px, así que el margen era hueco y la máscara se comía
   la primera línea. Se quitan los dos; el alto lo pone CampoTexto (Sizing Auto: crece con el texto
   hasta su tope y desplaza por encima), con el mismo interlineado que mide el JS de MudBlazor.
   Cinco clases: gana a la más pesada de MudBlazor (…root-filled.mud-input-root-margin-dense). */
.ficha .mud-input.mud-input-filled > textarea.mud-input-slot.mud-input-root {
    box-sizing: border-box;
    margin-block-start: 0;
    -webkit-mask-image: none;
    mask-image: none;
    line-height: 1.45;
}

/* --- El «⋯» de la cabecera ------------------------------------------------- */
/* Por encima del velo (40), para poder cerrarlo pulsando el propio botón. */
.ficha-mas {
    position: relative;
    z-index: var(--limpia-z-sobre-velo);
    display: inline-flex;
}

.ficha-mas-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta-2);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    cursor: pointer;
}

.ficha-mas-boton:hover:not([aria-expanded="true"]) {
    background-color: var(--limpia-hover);
    color: var(--limpia-tinta);
}

/* Abierto = seleccionado = morado. */
.ficha-mas-boton[aria-expanded="true"] {
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    border-color: var(--limpia-morado);
}

.ficha-mas-boton:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

.ficha-mas-panel {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline-end: 0;
    z-index: var(--limpia-z-menu);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 12rem;
    max-inline-size: min(20rem, 90vw);
    padding: 6px;
    background-color: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    /* Un menú flota sobre la hoja: es de lo poco que lleva sombra. */
    box-shadow: var(--limpia-sombra-menu);
}

.ficha-mas-panel[hidden] { display: none; }

/* Lo que la pantalla pone dentro (botones de Mud) se alinea como una lista. */
.ficha-mas-panel .mud-button-root {
    justify-content: flex-start;
    inline-size: 100%;
}

.ficha-mas-peligro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block-start: 4px;
    border-block-start: 1px solid var(--limpia-borde-fino);
}

.ficha-mas-peligro:first-child { padding-block-start: 0; border-block-start: none; }

/* El velo transparente que recoge el «pulsar fuera». */
.ficha-mas-velo {
    position: fixed;
    inset: 0;
    z-index: var(--limpia-z-velo);
    background: transparent;
}

@media (pointer: coarse) {
    .ficha-mas-boton { inline-size: 44px; block-size: 44px; }
}

/* --- La barra «Hay cambios sin guardar · Descartar · Guardar» ---------------- */
/* Pegada abajo y EN EL FLUJO: al final del desplazamiento se queda debajo del
   último campo en vez de taparlo. Apagada no se ve, pero conserva su sitio.
   Por debajo del velo del «⋯» (40): con el menú abierto, pulsar la barra lo
   cierra en vez de guardar a ciegas. */
.ficha-barra.crud-ficha-acciones {
    position: sticky;
    inset-block-end: 16px;
    z-index: var(--limpia-z-barra);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 12px 8px 16px;
    background-color: var(--limpia-barra-fondo);
    color: var(--limpia-barra-tinta);
    border: none;
    border-radius: var(--limpia-radio);
    box-shadow: var(--limpia-sombra-menu);
    transition: opacity var(--plano-tiempo) var(--plano-curva), transform var(--plano-tiempo) var(--plano-curva),
        visibility var(--plano-tiempo);
}

.ficha-barra[data-activa="false"] {
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
}

.ficha-barra .crud-ficha-estado {
    color: var(--limpia-barra-tinta);
    font-size: var(--plano-t-13);
    font-weight: 600;
}

.ficha-barra .mud-button-root.mud-button-text { color: var(--limpia-barra-tinta); }

.ficha-barra .mud-button-root.mud-button-text:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--limpia-barra-tinta) 14%, transparent);
}

.ficha-barra .mud-button-root.mud-button-filled,
.ficha-barra .mud-button-root.mud-button-filled:disabled {
    background-color: var(--limpia-barra-tinta);
    color: var(--limpia-barra-fondo);
    box-shadow: none;
}

.ficha-barra .mud-button-root.mud-button-filled:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--limpia-barra-tinta) 86%, var(--limpia-barra-fondo));
    box-shadow: none;
}

.ficha-barra .mud-button-root:disabled { opacity: 0.7; }

.ficha-barra .mud-button-root:focus-visible {
    outline: 2px solid var(--limpia-barra-tinta);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ficha-barra.crud-ficha-acciones { transition: none; }
}

/* EL ALTO DE LA BARRA INFERIOR DEL TELÉFONO, UNA SOLA FICHA (revisión de la tarea 9).
   plano.css sube lo que vive junto a esa barra (el aviso emergente, la barra de acciones y
   el diálogo lateral) `--plano-toque-movil`, 48 px; pero 48 es el MÍNIMO de cada taburete, y
   la barra mide más. Se calcula con sus mismas piezas de plano.css, en unidades que siguen a
   la letra del usuario:
     · el canto de arriba, 2 px (`border-block-start` de `.plano-barra-inferior`);
     · el taburete: 0,4rem de relleno arriba y abajo, la pieza de 26 px, 0,2rem de hueco y el
       rótulo, de `--plano-t-12` (0,75rem) por el interlineado 1,5 que hereda de `body`; nunca
       menos que `--plano-toque-movil`, su mínimo.
   = 2px + max(48px, 26px + 0,8rem + 0,2rem + 1,125rem) = 62 px con la letra de 16 px. Las capturas
   (capturar-hoja.mjs) miden la barra de verdad contra esta ficha en cada escena de teléfono: si
   plano.css cambia una pieza, la puerta lo dice. La muesca (`env(safe-area-inset-bottom)`) va
   aparte, como en plano.css. Desde D2 (barra lateral) la barra inferior ya no existe y la ficha
   vale 0; las reglas que la usan se quedan, así un cambio futuro vuelve a ser una línea. */
@media (max-width: 479.98px) {
    :root {
        /* DESDE D2 NO HAY BARRA INFERIOR (la sustituye el cajón de la barra lateral): la ficha vale 0 y lo que se
           apoyaba en ella —la barra de cambios, el aviso de «Guardado» y el diálogo lateral— baja al borde. */
        --limpia-alto-barra-inferior: 0px;
    }

    /* Lo que plano.css subía 48 px sube el alto de verdad: el aviso de «Guardado» se metía
       14 px debajo de la barra justo después de guardar. */
    [class*="mud-snackbar-location-bottom"] {
        padding-block-end: calc(var(--limpia-alto-barra-inferior) + env(safe-area-inset-bottom, 0px));
    }

    .mud-dialog-container.mud-dialog-centerright .mud-dialog {
        padding-block-end: calc(var(--limpia-alto-barra-inferior) + env(safe-area-inset-bottom, 0px));
    }
}

/* En un teléfono la barra de cambios va encima de la inferior, con 8 px de aire. */
@media (max-width: 479.98px) {
    .ficha-barra.crud-ficha-acciones {
        inset-block-end: calc(var(--limpia-alto-barra-inferior) + env(safe-area-inset-bottom, 0px) + 8px);
        /* UN RENGLÓN: a 375 px «Guardar» bajaba solo a un segundo y la barra tapaba el doble. Lo
           que se parte, si hace falta, es el texto; los botones no. */
        flex-wrap: nowrap;
        padding: 6px 8px 6px 12px;
    }

    .ficha-barra > .flex-grow-1 { display: none; }

    .ficha-barra .crud-ficha-estado {
        flex: 1 1 auto;
        min-inline-size: 0;
        white-space: normal;
        line-height: 1.25;
    }

    .ficha-barra .mud-button-root { flex: none; }
}

/* --- El acordeón del móvil: cerrada, una zona es solo su tirador ------------ */
@media (max-width: 719.98px) {
    .ficha .plano-caja-panel .plano-region[data-pestana][hidden] {
        padding: 0;
        background: none;
        border: none;
    }

    .ficha .plano-caja-panel .plano-region[data-pestana]:not([hidden]) { padding: 8px 12px 16px; }
}

/* --- Pestañas planas bajo la cabecera (solo con la fila a la vista) --------- */
@media not all and (max-width: 719.98px) {
    .ficha .plano-caja-carril {
        display: flex;
        align-items: stretch;
        background-color: var(--limpia-papel);
        border-block-end: 1px solid var(--limpia-borde);
    }

    .ficha .plano-caja-pestanas {
        flex: 0 1 auto;
        gap: 20px;
        padding: 0;
        border-block-end: none;
    }

    /* La regla de 1,5 px de tinta de la fila de teclas se va con ellas. */
    .ficha .plano-caja-carril > .plano-caja-flecha,
    .ficha .plano-caja-mas { border-block-end: none; }

    .ficha .plano-caja-pestana,
    .ficha .plano-caja-pestana:active {
        min-block-size: var(--plano-toque);
        margin-block-end: 0;
        padding: 10px 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        color: var(--limpia-tinta-3);
        font-weight: 600;
    }

    /* El hover no pisa la abierta. */
    .ficha .plano-caja-pestana:not(.plano-caja-pestana-abierta):hover {
        background: none;
        color: var(--limpia-tinta);
    }

    /* Abierta = seleccionada = morado, subrayada. */
    .ficha .plano-caja-pestana.plano-caja-pestana-abierta {
        background: none;
        color: var(--limpia-morado);
        box-shadow: inset 0 -2px 0 var(--limpia-morado);
    }

    .ficha .plano-caja-pestana.plano-caja-pestana-abierta .plano-caja-pestana-insignia { color: var(--limpia-tinta-3); }

    .ficha :is(.plano-caja-pestana, .plano-caja-mas-boton, .plano-caja-mas-opcion) .plano-caja-pestana-errores {
        background-color: var(--limpia-error-fondo);
        color: var(--limpia-error-tinta);
    }

    .ficha .plano-caja-pestana:focus-visible {
        outline: 2px solid var(--limpia-morado);
        outline-offset: -2px;
    }
}

/* =============================================================================
   EL CROMO EN OSCURO (revisión final del rediseño D1, I4)
   =============================================================================
   app.css tiene 42 reglas con un fondo claro ESCRITO a mano (blanco o casi:
   los tres canales ≥ 0xe0) más la insignia ámbar y la fila elegida de los
   documentos (un var() a una ficha que no existe, con respaldo claro). No
   siguen al modo: en oscuro salían cajas blancas con la tinta clara del tema
   encima. app.css no se toca (sus pruebas leen su texto); aquí, en oscuro:

   - EL CROMO (barras, paneles, paletas, cabeceras, insignias) toma un fondo
     por ficha: la hoja si era blanco, el papel hondo si era un gris claro, la
     pareja de la etiqueta si era una insignia; y la tinta acorde.
   - EL LIENZO (DESIGN.md «Lienzos»: el papel del diseñador de impresión, la
     vista previa del ticket, los PDF, los QR, el marco del plano de mesas) se
     queda BLANCO. Lo que cambia es su tinta: las fichas de tinta del tema se
     vuelven claras en oscuro, y dentro del papel se devuelven a las del papel
     (--limpia-lienzo-tinta*), que no cambian con el modo.

   La lista de cada regla está en HojaTemaTests.El_cromo_con_fondo_claro…, y
   en docs/central/rediseno-d1-base-visual.md. Una regla nueva con blanco a
   mano hace fallar esa prueba hasta que alguien decida de qué lado está. */
@media (prefers-color-scheme: dark) {
    /* CROMO: OSCURO */
    /* Blancos de cromo: la hoja. */
    .crud-ficha-acciones,
    .informe-mapa-tabla th[scope="row"],
    .salas-columna,
    .salas-barra,
    .salas-paleta,
    .salas-preset,
    .salas-vacio,
    .impresion-editor-panel,
    .impresion-editor-barra,
    .impresion-editor-nombre:focus,
    .impresion-diseno-paleta,
    .impresion-diseno-paleta-buscador,
    .impresion-diseno-pieza,
    .impresion-diseno-familia,
    .paleta {
        background-color: var(--limpia-hoja);
        color: var(--limpia-tinta);
    }

    /* Grises claros de cromo (los verdosos de app.css): el papel hondo. */
    .admin-ocupacion,
    .cobros-devolucion,
    .salas-chip,
    .impresion-editor-panel-cabecera,
    .impresion-diseno-subficha,
    .impresion-diseno-familia-cabecera:hover,
    .paleta-tecla {
        background-color: var(--plano-papel-hondo);
    }

    /* La pastilla de las salas llevaba su tinta escrita (--salas-tinta-2, un gris medio): sobre el
       papel hondo oscuro no se leía. */
    .salas-chip { color: var(--limpia-tinta-2); }

    /* Las insignias de las listas antiguas: la pareja de la etiqueta de la hoja limpia. */
    .admin-insignia-roja { background-color: var(--limpia-error-fondo); color: var(--limpia-error-tinta); }
    .admin-insignia-ambar { background-color: var(--limpia-aviso-fondo); color: var(--limpia-aviso-tinta); }
    .admin-insignia-verde { background-color: var(--limpia-bien-fondo); color: var(--limpia-bien-tinta); }
    .admin-insignia-neutra { background-color: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); }

    /* La fila elegida de los documentos: la aguada de lo seleccionado. */
    .documento-fila-elegida > td { background-color: var(--limpia-morado-aguada); }

    /* EL LIENZO: blanco como estaba, con la tinta del papel. Las fichas de tinta se redefinen
       DENTRO del papel porque lo de dentro las lee (--tentalo-tinta se resuelve en :root y se
       hereda ya resuelta: hay que darle su valor aquí, no basta con cambiar --plano-tinta). */
    .escpos-vista-previa,
    .impresion-diseno-lienzo-marco,
    .impresion-diseno-papel,
    .impresion-diseno-lienzo-mm,
    .impresion-diseno-texto,
    .impresion-diseno-miniatura,
    .impresion-imagen-vista,
    .impresion-diseno-previa-suelta,
    .impresion-diseno-previa-etiqueta,
    .impresion-diseno-previa-pdf,
    .impresion-venta-papel-grafico,
    .impresion-venta-papel-pdf {
        --plano-tinta: var(--limpia-lienzo-tinta);
        --plano-tinta-2: var(--limpia-lienzo-tinta-2);
        --tentalo-tinta: var(--limpia-lienzo-tinta);
        --tentalo-tinta-suave: var(--limpia-lienzo-tinta-2);
        --limpia-tinta: var(--limpia-lienzo-tinta);
        --limpia-tinta-2: var(--limpia-lienzo-tinta-2);
        color: var(--limpia-lienzo-tinta);
    }
    /* FIN: CROMO OSCURO */
}

/* ============================================================== «EXPORTAR» (D5)
   El botón «Exportar» de una lista con varios formatos abre un panel como el de una pastilla (.lista-chip-panel), pegado
   a la derecha porque el botón está al final de la barra. Cada opción es una .lista-chip-opcion con su explicación en
   un <small> debajo. */
.crud-exportar {
    position: relative;
}

/* El alto máximo de la pastilla (18rem) dejaba la sexta opción a medias y había que desplazar el panel para verla: aquí
   caben las seis (unos 24rem) siempre que la ventana deje sitio. */
.crud-exportar .crud-exportar-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-inline-size: 16rem;
    max-block-size: min(28rem, 75vh);
}

/* `flex-shrink: 0` porque el panel es una columna flex con alto máximo (18rem) que se desplaza por dentro: sin él, las
   seis opciones se encogían hasta sus 44 px para caber y la ayuda de cada una se montaba sobre el título de la
   siguiente (capturas de la tarea 13, documentos-facturas-exportar a 390 y 1024 px). */
.crud-exportar .lista-chip-opcion {
    display: block;
    flex-shrink: 0;
    padding-block: 8px;
    min-block-size: 44px;
}

.crud-exportar .lista-chip-opcion small {
    display: block;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-12, 12px);
    font-weight: 420;
}

/* ============================================================== DESGLOSE POR TIPO DE IVA (D5)
   Una hoja más bajo la lista de «Facturas y tickets», con su título y su línea de ayuda; la tabla es la de la lista. */
.desglose-iva {
    margin-block-start: 16px;
    padding: 16px;
}

.desglose-iva-titulo {
    margin: 0 0 4px;
    font-size: var(--plano-t-15, 15px);
    font-weight: 650;
    color: var(--limpia-tinta);
}

.desglose-iva-ayuda {
    margin: 0 0 12px;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-13, 13px);
}

/* La señal de continuidad de plano.css (toda .admin-tabla), con las tapas del color de la HOJA, como la de la lista: con
   las del lienzo, los cantos de la tabla salían sombreados sin nada que desplazar, encima de la columna «Documentos»
   (capturas de la tarea 13, documentos-facturas a 1024 px). */
@media (min-width: 720px) {
    .desglose-iva .admin-tabla {
        background-image:
            linear-gradient(to right, var(--limpia-hoja) 55%, transparent),
            linear-gradient(to left, var(--limpia-hoja) 55%, transparent),
            linear-gradient(to right, color-mix(in srgb, var(--limpia-tinta) 20%, transparent), transparent),
            linear-gradient(to left, color-mix(in srgb, var(--limpia-tinta) 20%, transparent), transparent);
    }
}

/* =============================================================================
   «COPIAS DE SEGURIDAD» (2026-10-04, docs/central/pantalla-de-copias-2026-10-04.md)

   La pantalla del master con las copias de la central y las locales de cada
   tienda. Solo piezas de la hoja: hojas, tabla de lista y etiquetas; aquí va lo
   suyo (el resumen, el título de cada instalación y la caja que deja a la tabla
   desplazarse de lado en el teléfono sin mover la página). Solo fichas.
   ============================================================================= */
.copias { display: flex; flex-direction: column; gap: 28px; min-inline-size: 0; }
.copias-hoja { padding: 12px 16px; min-inline-size: 0; }
.copias-resumen { display: flex; flex-direction: column; gap: 6px; }
.copias-resumen-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.copias-nota { margin: 0; color: var(--limpia-tinta-2); font-size: var(--plano-t-13); }
/* Las purgas de copias (2026-10-30): una línea por purga; el motivo largo de una pendiente parte palabra, no desborda a 360 px. */
.copias-purgas { margin: 0; padding-left: 1.1rem; overflow-wrap: anywhere; }
.copias-instalacion { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.copias-titulo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.copias-titulo { margin: 0; color: var(--limpia-tinta); font-size: var(--plano-t-17); font-weight: 650; }
.copias-codigo { color: var(--limpia-tinta-3); font-variant-numeric: tabular-nums; font-weight: 600; }
/* El separador entre el código y el nombre del título (2026-10-31): sin él salían pegados («T000016EMPRESA…»). */
.copias-separador { color: var(--limpia-tinta-3); font-weight: 400; }
.copias-subtitulo { margin: 0 0 8px; color: var(--limpia-tinta-2); font-size: var(--plano-t-13); font-weight: 600; }
.copias-tabla-caja { overflow-x: auto; min-inline-size: 0; }
.copias-tabla td { vertical-align: top; }
.copias-tabla td > span { display: block; }
.copias-tabla td > span.etiqueta { display: inline-flex; }
.copias-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.copias-local { font-weight: 600; }
.copias-error { color: var(--limpia-error-tinta); font-size: var(--plano-t-13); overflow-wrap: anywhere; }
/* El aviso de una copia buena (la mensual sin escribir, 2026-11-08): ámbar, como `etiqueta-aviso`. */
.copias-aviso { color: var(--limpia-aviso-tinta); font-size: var(--plano-t-13); overflow-wrap: anywhere; }
.copias-alerta { margin-block-end: 8px; overflow-wrap: anywhere; }
/* UN MOTIVO DE FALLO LARGO SE RECORTA A DOS LÍNEAS (2026-10-31): el error de Azure trae cientos de caracteres (XML, cabeceras,
   rutas sin espacios) y llenaba el aviso de Instalaciones y desbordaba la columna «Resultado», con la tabla de 6.000 px y su
   barra de desplazamiento (la «raya suelta» bajo la última fila). Entero, en el `title`. Lleva `white-space: normal` porque las
   celdas de las tablas de la hoja no parten (`nowrap`), y un tope de ancho para que la columna no se lo coma todo. */
.copias-recorte {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    max-inline-size: min(100%, 36rem);
}
/* Dentro de la tabla, más que `.copias-tabla td > span { display: block }`. */
.copias-tabla td > span.copias-recorte { display: -webkit-box; min-inline-size: 12rem; }
.copias-mas {
    margin-block-start: 8px;
    min-block-size: var(--plano-toque);
    padding: 0 12px;
    background: none;
    border: 0;
    border-radius: var(--limpia-radio-control);
    color: var(--limpia-morado);
    font: inherit;
    font-size: var(--plano-t-13);
    font-weight: 600;
    cursor: pointer;
}
.copias-mas:hover { color: var(--limpia-morado-hondo); background-color: var(--limpia-hover); }

/* =============================================================================
   LA BARRA LATERAL (rediseño D2)
   =============================================================================
   docs/central/rediseno-central-2026-10-04.md §4.3; plan en
   docs/central/plan-d2-barra-lateral-2026-10-04.md, tareas 6 y 8.

   TRES FORMAS, UN SOLO ÁRBOL (Layout/BarraLateral.razor):
     - ANCHA (≥ 1280 px): 248 px, el mapa entero. Hoy; Análisis y Documentos
       siempre abiertos; Gestión con sus secciones plegables.
     - ICONOS (720-1279 px): una columna de 64 px; el panel de la sección que
       se pulsa sale al lado, a toda la altura, por encima del contenido.
     - CAJÓN (< 720 px): fuera de la vista; el botón de la barra de arriba la
       saca encima del contenido en su forma ancha, con una sombra detrás.
   Las consultas son las MISMAS que las de plano.js (vigilarModo).

   SOLO FICHAS: ni un color escrito (lo vigila BarraLateralHojaTests), así el
   oscuro sale solo.

   OSCURA EN LOS DOS MODOS (2026-10-16: «el menú lateral ponlo en oscuro, para que
   haya contraste con la parte central»): fondo --limpia-menu-fondo (una berenjena
   honda en claro, un punto más oscuro que el papel en oscuro), textos y acento
   con las fichas --limpia-menu-* (cada pareja pasa 4,5:1 y lo que no es texto
   3:1: HojaTemaTests). La entrada actual lleva un fondo un punto más claro y una
   barra de acento a la izquierda; el morado de marca hondo (--limpia-morado) ya no
   sale en la barra: sobre el menú oscuro no se ve. El logotipo vive en la banda de
   arriba, no en el menú, y se queda como está.

   LAS CAPAS: la banda de arriba es 1200 (plano.css) y los menús de MudBlazor
   van por encima; la barra, su panel y su velo, justo por debajo de la banda. */
/* BARRA LATERAL (D2) */
:root {
    --limpia-barra-ancho: 248px;
    --limpia-barra-iconos: 64px;
    --limpia-barra-panel: 16rem;
    --limpia-z-barra-velo: 1140;
    --limpia-z-barra-lateral: 1150;
    --limpia-z-barra-panel: 1160;
    /* «Saltar al contenido», con el foco: sobre la banda (1200) y bajo las hojas (1300). */
    --limpia-z-saltar: 1250;
    /* EL VELO DEL CAJÓN OSCURECE EN LOS DOS MODOS (capturas de la tarea 8): se mezcla con lo más oscuro del modo.
       En claro, la tinta; en oscuro, el papel (la tinta es clara y aclaraba el contenido en vez de taparlo). */
    --limpia-barra-velo: color-mix(in srgb, var(--limpia-tinta) 24%, transparent);
    /* Sin JavaScript (el banco de capturas), lo que se pega dentro de una pantalla
       se mide contra la banda: desde D2 el marco de arriba es solo ella. */
    --plano-marco-alto: var(--plano-banda-alto);
}

/* El cuerpo del marco: la barra a la izquierda y la pantalla a la derecha. */
.plano-marco-cuerpo {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: var(--limpia-barra-ancho) minmax(0, 1fr);
    align-items: start;
}

.plano-marco-cuerpo > .plano-cuerpo { min-inline-size: 0; }

/* El botón del menú solo existe en el teléfono. */
.barra-lateral-abrir { display: none; }

/* SALTAR AL CONTENIDO (revisión final de D2; WCAG 2.4.1): lo primero del marco con el
   tabulador. Escondido hasta que tiene el foco; entonces sale arriba a la izquierda. */
.saltar-al-contenido {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: var(--limpia-z-saltar);
    min-block-size: var(--plano-toque);
    padding: 10px 16px;
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    box-shadow: var(--limpia-sombra-menu);
    font-family: var(--plano-familia);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.saltar-al-contenido:not(:focus) {
    clip-path: inset(50%);
    inline-size: 1px;
    block-size: 1px;
    min-block-size: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: none;
}

.saltar-al-contenido:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

/* El contenido recibe el foco del salto: el anillo es del botón, no de la pantalla entera. */
.plano-cuerpo:focus { outline: none; }

.barra-lateral {
    position: sticky;
    inset-block-start: var(--plano-banda-alto);
    block-size: calc(100dvh - var(--plano-banda-alto));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px;
    background-color: var(--limpia-menu-fondo);
    border-inline-end: 1px solid var(--limpia-menu-borde);
    font-family: var(--plano-familia);
    z-index: var(--limpia-z-barra-lateral);
    /* OSCURO EN LOS DOS MODOS (2026-10-16): lo de MudBlazor que cae dentro (la estrella de favorito) toma los colores del
       menú y no los del tema de la página. */
    --mud-palette-primary: var(--limpia-menu-acento);
    --mud-palette-action-default: var(--limpia-menu-tinta-3);
    --mud-palette-action-disabled: var(--limpia-menu-tinta-3);
    --mud-palette-action-default-hover: var(--limpia-menu-hover);
    color-scheme: dark;
}

/* LA BARRA DE DESPLAZAMIENTO, DISCRETA: fina y del tono del menú, sin el carril claro del sistema. */
.barra-sincronizacion-lista,
.barra-lateral,
.barra-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--limpia-menu-desplazamiento) transparent;
}

.barra-seccion { position: relative; }

/* Los rótulos: «Gestión», el de cada bloque y el de cada submenú. */
.barra-bloque,
.barra-panel-titulo,
.barra-subgrupo-rotulo {
    display: block;
    margin: 0;
    padding: 12px 8px 4px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--limpia-menu-tinta-3);
}

/* El rótulo de un bloque («Gestión») abre con un filo, sin cambiar el alto de la fila. */
.barra-bloque { box-shadow: inset 0 1px 0 var(--limpia-menu-borde); }

.barra-subgrupo-rotulo { padding-block-start: 8px; }

.barra-lista,
.barra-sublista,
.barra-dentro {
    list-style: none;
    margin: 0;
    padding: 0;
}

.barra-entrada {
    display: flex;
    align-items: center;
    gap: 2px;
}

.barra-enlace,
.barra-apartado,
.barra-sincronizacion-tirador,
.barra-ayuda {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 36px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--limpia-radio-control);
    background: none;
    color: var(--limpia-menu-tinta-2);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.barra-apartado { inline-size: 100%; font-weight: 600; }

.barra-enlace:hover,
.barra-apartado:hover,
.barra-sincronizacion-tirador:hover,
.barra-ayuda:hover {
    background-color: var(--limpia-menu-hover);
    color: var(--limpia-menu-tinta);
}

.barra-enlace:focus-visible,
.barra-apartado:focus-visible,
.barra-sincronizacion-tirador:focus-visible,
.barra-ayuda:focus-visible {
    outline: 2px solid var(--limpia-menu-foco);
    outline-offset: -2px;
}

/* La pantalla en la que se está: un fondo un punto más claro, el texto en blanco y una barra de acento a la izquierda
   (el morado de marca, en su versión clara: el morado hondo no se ve sobre el menú oscuro). */
.barra-enlace,
.barra-apartado { position: relative; }

.barra-enlace[aria-current="page"] {
    background-color: var(--limpia-menu-actual);
    color: var(--limpia-menu-sobre-actual);
    font-weight: 650;
}

.barra-enlace[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--limpia-menu-acento);
}

.barra-apartado[aria-expanded="true"],
.barra-seccion[data-actual="true"] > .barra-apartado { color: var(--limpia-menu-tinta); }

.barra-enlace-icono,
.barra-apartado-icono {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
}

.barra-enlace-texto,
.barra-texto {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-chevron {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    transition: transform 150ms ease;
}

.barra-apartado[aria-expanded="true"] .barra-chevron { transform: rotate(180deg); }

/* Las pantallas de una sección de Gestión van sangradas bajo su botón, que ya dice el nombre. */
.barra-seccion[data-bloque="gestion"] > .barra-panel { padding-inline-start: 12px; }
.barra-seccion[data-bloque="gestion"] > .barra-panel > .barra-panel-titulo { display: none; }

/* Análisis y Documentos se ven siempre: su botón solo sirve en la columna de iconos. */
.barra-seccion:is([data-bloque="analisis"], [data-bloque="documentos"]) > .barra-apartado { display: none; }

/* Lo que cuelga provisionalmente de un apartado (hasta D3, D4 y D5). */
.barra-entrada-dentro .barra-enlace {
    min-block-size: 32px;
    padding-inline-start: 36px;
    font-size: 13px;
}

/* La estrella espera: se ve al pasar, al enfocar, si ya está puesta y siempre sin ratón. */
.barra-estrella { flex: none; opacity: 0; transition: opacity 150ms ease; }

/* La estrella sobre el menú oscuro: sin marcar, el gris claro del menú; marcada, el acento. El fondo al pasar, el del menú.
   (plano.css da a TODO `.mud-icon-button` la tinta suave y, al pasar, el morado hondo: sobre el menú oscuro dan 2,1:1.) */
.barra-estrella .mud-icon-button,
.barra-estrella .mud-icon-button:disabled { color: var(--limpia-menu-tinta-3); background-color: transparent; }
.barra-estrella .mud-icon-button:hover:not(:disabled) { background-color: var(--limpia-menu-hover); color: var(--limpia-menu-tinta); }
.barra-estrella .mud-icon-button.admin-menu-estrella-puesta,
.barra-estrella .mud-icon-button.admin-menu-estrella-puesta:hover:not(:disabled) { color: var(--limpia-menu-acento); }
.barra-estrella .mud-icon-button:focus-visible { outline: 2px solid var(--limpia-menu-foco); outline-offset: -2px; }

.barra-entrada:hover .barra-estrella,
.barra-entrada:focus-within .barra-estrella,
.barra-estrella:has(.admin-menu-estrella-puesta) { opacity: 1; }

@media (hover: none) {
    .barra-estrella { opacity: 1; }
}

/* LA ESTRELLA A LA MEDIDA DE SU FILA (capturas de la tarea 8). app.css le pone el mínimo de toque (48 px,
   `--tentalo-toque`) y plano.css el relleno de un botón: cada fila medía 48 px y no 36, y la estrella se comía
   57 px del nombre («Datos de la instala…» en el panel de Ajustes). Medido en hoja-lista-clientes a 1600 px: el
   alto de la barra por dentro pasa de 1.287 a 1.047 px.
   Revisión de la tarea 8: los 32 px, SOLO con puntero fino y desde 720 px (columna de iconos y forma ancha). En el
   cajón del teléfono, y con el dedo en cualquier ancho, el toque de la casa (`--plano-toque`, 44 px: PRODUCT.md). */
.barra-estrella .admin-menu-estrella {
    min-inline-size: 0;
    min-block-size: 0;
    inline-size: var(--plano-toque);
    block-size: var(--plano-toque);
    padding: 0;
}

@media (min-width: 720px) and (pointer: fine) {
    .barra-estrella .admin-menu-estrella {
        inline-size: 32px;
        block-size: 32px;
    }
}

/* La línea de la central, al pie. SIEMPRE A LA VISTA (capturas de la tarea 8): la barra se desplaza por dentro y la
   línea iba al final de lo desplazable; a 1280 y 1600 × 900 su tirador salía cortado por el borde de abajo y, abierta
   (barra-analisis-con-dentro), su lista no se veía. Se pega al pie con el fondo de la barra, cubriendo también el
   relleno de abajo de la barra (12 px) para que nada asome por debajo. */
.barra-sincronizacion {
    position: sticky;
    inset-block-end: -12px;
    margin-block-start: auto;
    margin-block-end: -12px;
    padding-block: 8px 12px;
    background-color: var(--limpia-menu-fondo);
    border-block-start: 1px solid var(--limpia-menu-borde);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.barra-sincronizacion-resumen {
    padding: 0 8px 4px 36px;
    font-size: 12px;
    color: var(--limpia-menu-tinta-3);
}

.barra-sincronizacion-resumen-aviso { color: var(--limpia-menu-error); font-weight: 600; }

/* Las luces de la línea de la central, con los tonos del menú: los del plano (salvia, mostaza y arcilla hondos) están
   hechos para el papel claro y sobre el menú oscuro no llegan a 3:1. */
.barra-sincronizacion .plano-luz { background-color: var(--limpia-menu-tinta-3); }
.barra-sincronizacion .plano-luz-abierta { background-color: var(--limpia-menu-bien); }
.barra-sincronizacion .plano-luz-atencion { background-color: var(--limpia-menu-aviso); }
.barra-sincronizacion .plano-luz-sin-conexion { background-color: var(--limpia-menu-error); }

/* EL BOTÓN «AYUDA» (Argus T7), al pie con la línea de la central y con su mismo patrón (icono y `barra-texto`). Con el
   panel abierto se queda marcado como lo desplegado, sin el morado (eso es solo lo seleccionado y el foco). */
.barra-ayuda[aria-expanded="true"] {
    background-color: var(--limpia-menu-hover);
    color: var(--limpia-menu-tinta);
}

/* LA LISTA ABIERTA LLEVA TOPE (revisión de la tarea 8): la línea va pegada al pie y su estado abierto se guarda; sin
   tope, con muchas tiendas tapaba el menú y, pasado el alto de la barra, su tirador quedaba fuera para siempre. Un
   tercio del alto de la barra, y se desplaza por dentro (región con tabindex en LineaDeLaCentral.razor). */
.barra-sincronizacion-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-block-size: calc((100dvh - var(--plano-banda-alto)) / 3);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 8px 4px;
    font-size: 12px;
    color: var(--limpia-menu-tinta-2);
}

.barra-sincronizacion-lista:focus-visible {
    outline: 2px solid var(--limpia-menu-foco);
    outline-offset: -2px;
}

.barra-sincronizacion-punto { display: flex; align-items: center; gap: 8px; }

.barra-velo { display: none; }

/* ---- La columna de iconos (720-1279 px) ---------------------------------- */
@media (min-width: 720px) and (max-width: 1279.98px) {
    :root { --limpia-barra-ancho: var(--limpia-barra-iconos); }

    .barra-bloque,
    .barra-chevron,
    .barra-sincronizacion-resumen,
    .barra-seccion[data-bloque="hoy"] .barra-estrella { display: none; }

    /* Solo el icono; el nombre sigue ahí para el lector de pantalla y en el `title`. */
    .barra-seccion[data-bloque="hoy"] .barra-enlace-texto,
    .barra-apartado > .barra-texto,
    .barra-sincronizacion-tirador > .barra-texto,
    .barra-ayuda > .barra-texto {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .barra-seccion[data-bloque="hoy"] .barra-enlace,
    .barra-apartado,
    .barra-sincronizacion-tirador,
    .barra-ayuda {
        justify-content: center;
        padding-inline: 0;
    }

    .barra-seccion:is([data-bloque="analisis"], [data-bloque="documentos"]) > .barra-apartado { display: flex; }

    .barra-seccion[data-actual="true"] > .barra-apartado {
        background-color: var(--limpia-menu-actual);
        color: var(--limpia-menu-sobre-actual);
    }

    .barra-seccion[data-actual="true"] > .barra-apartado::before {
        content: "";
        position: absolute;
        inset-block: 6px;
        inset-inline-start: 0;
        inline-size: 3px;
        border-radius: 0 3px 3px 0;
        background-color: var(--limpia-menu-acento);
    }

    /* Los paneles, solo el de la sección pulsada: al lado de la columna, a toda la altura. */
    .barra-seccion > .barra-panel { display: none; }

    .barra-seccion[data-desplegada="true"] > .barra-panel {
        display: block;
        position: fixed;
        inset-block: var(--plano-banda-alto) 0;
        inset-inline-start: var(--limpia-barra-iconos);
        inline-size: var(--limpia-barra-panel);
        overflow-y: auto;
        padding: 8px;
        background-color: var(--limpia-menu-fondo);
        border-inline-end: 1px solid var(--limpia-menu-borde);
        box-shadow: var(--limpia-sombra-menu);
        z-index: var(--limpia-z-barra-panel);
    }

    .barra-seccion[data-desplegada="true"] > .barra-panel > .barra-panel-titulo { display: block; }

    .barra-velo[data-por="seccion"] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--limpia-z-barra-velo);
    }

    .barra-sincronizacion-lista {
        position: fixed;
        inset-block-end: 8px;
        inset-inline-start: calc(var(--limpia-barra-iconos) + 4px);
        inline-size: var(--limpia-barra-panel);
        padding: 8px;
        background-color: var(--limpia-menu-fondo);
        border: 1px solid var(--limpia-menu-borde);
        border-radius: var(--limpia-radio);
        box-shadow: var(--limpia-sombra-menu);
        z-index: var(--limpia-z-barra-panel);
    }

    /* La lista y el panel comparten sitio (abajo, junto a la columna) y z-index, y la lista va después en
       el DOM: con una sección desplegada taparía el pie de su panel. Mientras haya una, la lista se esconde
       (su estado abierto se conserva: vuelve al plegar el panel). */
    .barra-lateral:has(.barra-seccion[data-desplegada="true"]) .barra-sincronizacion-lista { display: none; }
}

/* ---- El menú PLEGADO a petición de una pantalla (≥ 1280 px) ----------------
   Una pantalla que necesita todo el ancho (el editor del plano del evento) pide el menú plegado (Layout/PliegueDelMenu.cs) y
   el marco pone `data-menu="plegado"`: en la forma ancha, la columna de iconos de arriba. Es la MISMA forma que la de
   720-1279 px, con las mismas reglas, solo que elegida por la pantalla y no por el ancho; por debajo de 1280 ya es así y por
   debajo de 720 manda el cajón. Sin el atributo no cambia nada. */
@media (min-width: 1280px) {
    .plano-marco[data-menu="plegado"] { --limpia-barra-ancho: var(--limpia-barra-iconos); }

    .plano-marco[data-menu="plegado"] :is(.barra-bloque, .barra-chevron, .barra-sincronizacion-resumen),
    .plano-marco[data-menu="plegado"] .barra-seccion[data-bloque="hoy"] .barra-estrella { display: none; }

    .plano-marco[data-menu="plegado"] :is(
        .barra-seccion[data-bloque="hoy"] .barra-enlace-texto,
        .barra-apartado > .barra-texto,
        .barra-sincronizacion-tirador > .barra-texto,
        .barra-ayuda > .barra-texto) {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .plano-marco[data-menu="plegado"] :is(
        .barra-seccion[data-bloque="hoy"] .barra-enlace,
        .barra-apartado,
        .barra-sincronizacion-tirador,
        .barra-ayuda) {
        justify-content: center;
        padding-inline: 0;
    }

    .plano-marco[data-menu="plegado"] .barra-seccion:is([data-bloque="analisis"], [data-bloque="documentos"]) > .barra-apartado { display: flex; }

    .plano-marco[data-menu="plegado"] .barra-seccion[data-actual="true"] > .barra-apartado {
        background-color: var(--limpia-menu-actual);
        color: var(--limpia-menu-sobre-actual);
    }

    .plano-marco[data-menu="plegado"] .barra-seccion[data-actual="true"] > .barra-apartado::before {
        content: "";
        position: absolute;
        inset-block: 6px;
        inset-inline-start: 0;
        inline-size: 3px;
        border-radius: 0 3px 3px 0;
        background-color: var(--limpia-menu-acento);
    }

    .plano-marco[data-menu="plegado"] .barra-seccion > .barra-panel { display: none; }

    .plano-marco[data-menu="plegado"] .barra-seccion[data-desplegada="true"] > .barra-panel {
        display: block;
        position: fixed;
        inset-block: var(--plano-banda-alto) 0;
        inset-inline-start: var(--limpia-barra-iconos);
        inline-size: var(--limpia-barra-panel);
        overflow-y: auto;
        padding: 8px;
        background-color: var(--limpia-menu-fondo);
        border-inline-end: 1px solid var(--limpia-menu-borde);
        box-shadow: var(--limpia-sombra-menu);
        z-index: var(--limpia-z-barra-panel);
    }

    .plano-marco[data-menu="plegado"] .barra-seccion[data-desplegada="true"] > .barra-panel > .barra-panel-titulo { display: block; }

    .plano-marco[data-menu="plegado"] .barra-velo[data-por="seccion"] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--limpia-z-barra-velo);
    }

    .plano-marco[data-menu="plegado"] .barra-sincronizacion-lista {
        position: fixed;
        inset-block-end: 8px;
        inset-inline-start: calc(var(--limpia-barra-iconos) + 4px);
        inline-size: var(--limpia-barra-panel);
        padding: 8px;
        background-color: var(--limpia-menu-fondo);
        border: 1px solid var(--limpia-menu-borde);
        border-radius: var(--limpia-radio);
        box-shadow: var(--limpia-sombra-menu);
        z-index: var(--limpia-z-barra-panel);
    }

    .plano-marco[data-menu="plegado"] .barra-lateral:has(.barra-seccion[data-desplegada="true"]) .barra-sincronizacion-lista { display: none; }
}

/* ---- El cajón del teléfono (< 720 px) ------------------------------------- */
@media (max-width: 719.98px) {
    .barra-lateral-abrir {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        inline-size: 40px;
        block-size: 40px;
        margin-inline-start: -8px;
        border: 0;
        border-radius: var(--limpia-radio-control);
        background: none;
        color: var(--limpia-tinta);
        cursor: pointer;
    }

    .barra-lateral-abrir:hover { background-color: var(--limpia-hover); }

    .barra-lateral-abrir:focus-visible {
        outline: 2px solid var(--limpia-morado);
        outline-offset: 2px;
    }

    .plano-marco-cuerpo { grid-template-columns: minmax(0, 1fr); }

    .barra-lateral {
        position: fixed;
        inset-block: var(--plano-banda-alto) 0;
        inset-inline-start: 0;
        inline-size: min(20rem, 86vw);
        block-size: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 200ms ease, visibility 0s linear 200ms;
    }

    .barra-lateral[data-cajon="abierto"] {
        transform: none;
        visibility: visible;
        box-shadow: var(--limpia-sombra-menu);
        transition: transform 200ms ease;
    }

    .barra-velo[data-por="cajon"] {
        display: block;
        position: fixed;
        inset: var(--plano-banda-alto) 0 0 0;
        background-color: var(--limpia-barra-velo);
        z-index: var(--limpia-z-barra-velo);
    }
}

/* Sin barra inferior, el cuerpo del teléfono deja de reservar su alto (plano.css lo
   reservaba: 48 px + 2,5rem + la muesca). */
@media (max-width: 479.98px) {
    .plano-cuerpo { padding-block-end: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }

    /* EN UNA FICHA, LA BARRA DE CAMBIOS ES EL FINAL (capturas de la tarea 8). Su sitio (encendida o apagada) ya deja
       el aire de abajo; con los 2,5rem del cuerpo debajo, al final del desplazamiento se quedaba 40 px por encima del
       borde en vez de a los 8 en los que va pegada (hoja-ficha-con-cambios-390: acababa en 860 de 900). */
    .plano-cuerpo:has(.ficha-barra.crud-ficha-acciones) {
        padding-block-end: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra-lateral,
    .barra-lateral[data-cajon="abierto"],
    .barra-chevron,
    .barra-estrella { transition: none; }
}

/* EL LOGOTIPO EN OSCURO: el morado del logotipo sobre la banda oscura no se lee, y
   el logotipo no se toca (PRODUCT.md: ni recolorear, ni filtrar). Se le pone debajo
   su papel, el del lienzo, que no cambia con el modo. */
@media (prefers-color-scheme: dark) {
    /* El velo del cajón, hacia el papel: lo más oscuro del modo (ver --limpia-barra-velo arriba). */
    :root { --limpia-barra-velo: color-mix(in srgb, var(--limpia-papel) 72%, transparent); }

    .plano-barra-logo {
        background-color: var(--limpia-lienzo);
        border-radius: var(--limpia-radio-control);
        padding: 2px 8px;
    }
}

/* UNA SOLA BARRA DE DESPLAZAMIENTO (pendiente de D1: «doble desplazamiento a 1024×900»). Medido en las capturas de D2:
   con la tabla desplazándose por dentro, la página se pasaba 163 px de la ventana. */
@media (min-width: 720px) {
    .crud-lista .crud-tabla { max-block-size: max(24rem, calc(100dvh - (15rem + 11rem))); }
}
/* FIN: BARRA LATERAL */

/* =============================================================================
   PANEL DE AYUDA (T7 de soporte e IA: Layout/PanelDeAyuda.razor)

   Un <aside> hermano de <main> en el cuerpo del marco, con el /embed de Argus en
   un <iframe>. Sin MudDrawer: como la barra lateral, es del marco.
     * Forma ancha (≥ 1280 px): una TERCERA COLUMNA de la rejilla del cuerpo, de
       ~420 px, pegada bajo la banda como la barra: la pantalla se estrecha y se
       sigue viendo entera.
     * Por debajo: encima del contenido, pegado a la derecha, con su sombra.
     * Teléfono (< 720 px): a todo el ancho, bajo la banda.
   ============================================================================= */
:root {
    --limpia-ayuda-ancho: 420px;
    /* Sobre los paneles de la barra lateral (1160) y bajo la banda (1200) y «Saltar al contenido» (1250). */
    --limpia-z-ayuda: 1170;
}

@media (min-width: 1280px) {
    .plano-marco-cuerpo:has(> .ayuda-panel) {
        grid-template-columns: var(--limpia-barra-ancho) minmax(0, 1fr) var(--limpia-ayuda-ancho);
    }
}

.ayuda-panel {
    position: sticky;
    inset-block-start: var(--plano-banda-alto);
    block-size: calc(100dvh - var(--plano-banda-alto));
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background-color: var(--limpia-hoja);
    border-inline-start: 1px solid var(--limpia-borde);
    font-family: var(--plano-familia);
    z-index: var(--limpia-z-ayuda);
}

@media (max-width: 1279.98px) {
    .ayuda-panel {
        position: fixed;
        inset-block: var(--plano-banda-alto) 0;
        inset-inline-end: 0;
        inline-size: min(var(--limpia-ayuda-ancho), 100vw);
        block-size: auto;
        box-shadow: var(--limpia-sombra-menu);
    }
}

@media (max-width: 719.98px) {
    .ayuda-panel {
        inset-inline-start: 0;
        inline-size: 100%;
        border-inline-start: 0;
    }
}

.ayuda-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 8px 8px 16px;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.ayuda-titulo {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--limpia-tinta);
}

/* El selector Soporte | Gestión: dos botones pegados, el elegido con la tinta sobre el hover. */
.ayuda-modos {
    display: inline-flex;
    flex: none;
    padding: 2px;
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
}

.ayuda-modo {
    min-block-size: 32px;
    padding: 4px 12px;
    border: 0;
    border-radius: var(--limpia-radio-control);
    background: none;
    color: var(--limpia-tinta-2);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.ayuda-modo:hover { color: var(--limpia-tinta); }

.ayuda-modo[aria-pressed="true"] {
    background-color: var(--limpia-hover);
    color: var(--limpia-tinta);
    font-weight: 650;
}

.ayuda-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--plano-toque);
    block-size: var(--plano-toque);
    border: 0;
    border-radius: var(--limpia-radio-control);
    background: none;
    color: var(--limpia-tinta-2);
    cursor: pointer;
}

.ayuda-cerrar:hover {
    background-color: var(--limpia-hover);
    color: var(--limpia-tinta);
}

.ayuda-modo:focus-visible,
.ayuda-cerrar:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: -2px;
}

/* El marco de Argus llena lo que queda: el panel de Argus pinta su propio fondo. */
.ayuda-marco {
    flex: 1 1 auto;
    inline-size: 100%;
    min-block-size: 0;
    border: 0;
    background-color: var(--limpia-hoja);
}
/* FIN: PANEL DE AYUDA */

/* =============================================================================
   REGISTRO DE ACTIVIDAD (2026-10-06, docs/central/registro-de-actividad-2026-10-06.md)

   Dos partes. Primero, lo que las pastillas comunes (FiltrosDeLista) ganan para
   esta pantalla y que cualquier lista puede pedir: la × de una pastilla puesta,
   el buscador dentro del panel, las opciones que se marcan (varios a la vez) con
   su «Listo», y el hueco del contenido propio («A medida»). La FORMA de la
   pastilla sigue siendo la de .lista-chip: la × va dentro de su caja y toma el
   radio de la pastilla menos 2 px, así acompaña a cualquier forma que tenga.
   Después, la propia pantalla: el recuento, las acciones delicadas, la tabla
   agrupada por día (en el teléfono, una tarjeta por evento) y su detalle.
   ============================================================================= */

/* --- La × de una pastilla puesta ------------------------------------------ */
.lista-chip-caja:has(> .lista-chip-quitar) > .lista-chip { padding-inline-end: 32px; }

.lista-chip-quitar {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 3px;
    display: grid;
    place-items: center;
    inline-size: 26px;
    block-size: min(34px, calc(100% - 6px));
    margin-block: auto;
    padding: 0;
    background: none;
    color: var(--limpia-morado);
    border: 0;
    border-radius: max(2px, calc(var(--plano-radio-control, 8px) - 2px));
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.lista-chip-quitar:hover { background-color: color-mix(in srgb, var(--limpia-morado) 14%, transparent); }

.lista-chip-quitar:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 1px;
}

/* --- El panel: buscador, opciones que se marcan, «Listo» y contenido propio -- */
.lista-chip-panel-con-buscador {
    min-inline-size: min(17rem, 90vw);
    max-block-size: min(24rem, 70vh);
}

.lista-chip-buscador {
    position: sticky;
    inset-block-start: -4px;
    z-index: 1;
    flex: none;
    margin: -4px -4px 4px;
    min-block-size: 40px;
    padding: 0 12px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 0;
    border-block-end: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control) var(--limpia-radio-control) 0 0;
    font: inherit;
    font-size: var(--plano-t-13);
}

.lista-chip-buscador::placeholder { color: var(--limpia-tinta-3); }

.lista-chip-buscador:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: -2px;
}

.lista-chip-opcion-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* Marcada o no se ve en la casilla y no solo en el color de la fila. */
.lista-chip-casilla {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 16px;
    block-size: 16px;
    border: 1.5px solid var(--limpia-borde-control);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.lista-chip-opcion-marca[aria-pressed="true"] .lista-chip-casilla {
    background-color: var(--limpia-morado);
    border-color: var(--limpia-morado);
    color: var(--limpia-sobre-morado);
}

.lista-chip-listo {
    position: sticky;
    inset-block-end: -4px;
    flex: none;
    justify-content: center;
    margin: 4px -4px -4px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-morado);
    border-block-start: 1px solid var(--limpia-borde);
    border-radius: 0 0 var(--limpia-radio-control) var(--limpia-radio-control);
    font-weight: 600;
    text-align: center;
}

.lista-chip-nada {
    margin: 8px 12px;
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-13);
}

.lista-chip-contenido {
    flex: none;
    margin-block-start: 4px;
    padding-block-start: 4px;
    border-block-start: 1px solid var(--limpia-borde);
}

/* --- La pantalla ------------------------------------------------------------ */
.actividad-limpiar {
    min-block-size: 32px;
    padding: 0 4px;
    background: none;
    color: var(--limpia-morado);
    border: 0;
    font: inherit;
    font-size: var(--plano-t-13);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.actividad-limpiar:focus-visible,
.actividad-delicada-boton:focus-visible,
.actividad-abrir:focus-visible,
.actividad-rastro:focus-visible,
.actividad-a-medida input:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

.actividad-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.actividad-cuenta {
    margin: 0;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-13);
    font-variant-numeric: tabular-nums;
}

.actividad-delicadas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* LAS DELICADAS, en ámbar con su número: un toque filtra por ellas. */
.actividad-delicada-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 28px;
    padding: 0 10px;
    background-color: var(--limpia-aviso-fondo);
    color: var(--limpia-aviso-tinta);
    border: 1px solid color-mix(in srgb, var(--limpia-aviso-tinta) 35%, transparent);
    border-radius: var(--limpia-radio-control);
    font: inherit;
    font-size: var(--plano-t-12);
    cursor: pointer;
}

.actividad-delicada-boton[aria-pressed="true"] {
    border-color: var(--limpia-aviso-tinta);
    box-shadow: inset 0 0 0 1px var(--limpia-aviso-tinta);
    font-weight: 600;
}

.actividad-delicada-numero {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.actividad-tabla thead th { position: static; }

.actividad-tabla .actividad-col-hora { inline-size: 4.5rem; font-variant-numeric: tabular-nums; color: var(--limpia-tinta-2); }
.actividad-tabla .actividad-col-quien { inline-size: 11rem; }
.actividad-tabla .actividad-col-donde { inline-size: 13rem; }
.actividad-tabla .actividad-col-abrir { inline-size: 3rem; text-align: end; }

.actividad-tabla tbody td {
    block-size: auto;
    white-space: normal;
    vertical-align: top;
}

/* LA CABECERA DE CADA DÍA. */
.actividad-tabla tbody tr.actividad-dia > th,
.actividad-tabla tbody tr.actividad-dia:hover > th {
    padding: 6px 12px;
    background-color: var(--limpia-cabecera);
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-12);
    font-weight: 600;
    border-block-end: 1px solid var(--limpia-borde);
}

.actividad-tabla tbody:not(:first-of-type) tr.actividad-dia > th { border-block-start: 1px solid var(--limpia-borde); }

.actividad-que {
    display: block;
    color: var(--limpia-tinta);
    font-weight: 500;
}

.actividad-accion {
    display: block;
    max-inline-size: 64ch;
    overflow: hidden;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-12);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actividad-local {
    display: block;
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-12);
}

/* UNA DELICADA: canto ámbar a la izquierda y la palabra, no solo el color (WCAG 1.4.1). */
.actividad-tabla tbody tr.actividad-fila-delicada > td:first-child { box-shadow: inset 3px 0 0 var(--limpia-aviso-tinta); }

.actividad-insignia {
    display: inline-block;
    margin-inline-end: 6px;
    padding: 1px 6px;
    background-color: var(--limpia-aviso-fondo);
    color: var(--limpia-aviso-tinta);
    border-radius: 4px;
    font-size: var(--plano-t-11);
    font-weight: 600;
    vertical-align: 1px;
}

.actividad-abrir {
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    background: none;
    color: var(--limpia-tinta-2);
    border: 0;
    border-radius: var(--limpia-radio-control);
    font-size: 1rem;
    cursor: pointer;
}

.actividad-abrir:hover { background-color: var(--limpia-hover); }

.actividad-tabla tbody tr.actividad-fila-abierta > td { background-color: var(--limpia-hover); border-block-end-color: transparent; }

.actividad-tabla tbody tr.actividad-detalle > td,
.actividad-tabla tbody tr.actividad-detalle:hover > td {
    padding: 4px 16px 16px calc(4.5rem + 12px);
    background-color: var(--limpia-hover);
}

.actividad-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 8px 24px;
    margin: 0;
}

.actividad-datos dt {
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-11);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.actividad-datos dd {
    margin: 2px 0 0;
    color: var(--limpia-tinta);
    overflow-wrap: anywhere;
}

.actividad-texto {
    max-block-size: 16rem;
    margin: 12px 0 0;
    padding: 8px 12px;
    overflow: auto;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    font: inherit;
    font-size: var(--plano-t-13);
    white-space: pre-wrap;
}

.actividad-rastro {
    display: inline-block;
    margin-block-start: 12px;
    color: var(--limpia-morado);
    font-weight: 500;
}

.actividad-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-13);
}

.actividad-pie-error { color: var(--limpia-error-tinta); }

/* «A medida», al final del panel del periodo. */
.actividad-a-medida {
    display: grid;
    gap: 8px;
    padding: 4px 12px 8px;
}

.actividad-a-medida-rotulo {
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-11);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.actividad-a-medida label {
    display: grid;
    gap: 2px;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-12);
}

.actividad-a-medida input {
    min-block-size: 36px;
    padding: 0 8px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde-control);
    border-radius: 6px;
    font: inherit;
    font-size: var(--plano-t-13);
}

.actividad-a-medida .actividad-aplicar {
    justify-content: center;
    background-color: var(--limpia-morado);
    color: var(--limpia-sobre-morado);
    font-weight: 600;
}

.actividad-a-medida .actividad-aplicar:hover { background-color: var(--limpia-morado-hondo); }

@media (pointer: coarse) {
    .actividad-abrir { inline-size: 44px; block-size: 44px; }
    .actividad-delicada-boton,
    .actividad-limpiar { min-block-size: 40px; }
    .lista-chip-quitar { inline-size: 34px; }
    .lista-chip-caja:has(> .lista-chip-quitar) > .lista-chip { padding-inline-end: 40px; }
}

/* EN EL TELÉFONO, UNA TARJETA POR EVENTO: hora y quién arriba, qué en medio y dónde abajo; la flecha a la derecha. */
@media (max-width: 719.98px) {
    .actividad-tabla thead { display: none; }

    .actividad-tabla,
    .actividad-tabla tbody,
    .actividad-tabla tbody tr,
    .actividad-tabla tbody :is(td, th) { display: block; }

    .actividad-tabla tbody tr.actividad-fila {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "hora quien abrir"
            "que que abrir"
            "donde donde abrir";
        gap: 2px 8px;
        padding: 10px 12px;
        border-block-end: 1px solid var(--limpia-borde-fino);
    }

    .actividad-tabla tbody tr.actividad-fila > td {
        inline-size: auto;
        padding: 0;
        border: 0;
        background: none;
        text-align: start;
    }

    .actividad-tabla tbody tr.actividad-fila > .actividad-col-hora { grid-area: hora; }
    .actividad-tabla tbody tr.actividad-fila > .actividad-col-quien { grid-area: quien; font-weight: 600; }
    .actividad-tabla tbody tr.actividad-fila > .actividad-col-que { grid-area: que; }
    .actividad-tabla tbody tr.actividad-fila > .actividad-col-abrir { grid-area: abrir; align-self: center; }

    .actividad-tabla tbody tr.actividad-fila > .actividad-col-donde {
        grid-area: donde;
        color: var(--limpia-tinta-3);
        font-size: var(--plano-t-12);
    }

    .actividad-tabla tbody tr.actividad-fila > .actividad-col-donde > * { display: inline; }
    .actividad-tabla tbody tr.actividad-fila > .actividad-col-donde > .actividad-local::before { content: " · "; }

    .actividad-tabla tbody tr.actividad-fila-delicada { box-shadow: inset 3px 0 0 var(--limpia-aviso-tinta); }
    .actividad-tabla tbody tr.actividad-fila-delicada > td:first-child { box-shadow: none; }
    .actividad-tabla tbody tr.actividad-fila-abierta { background-color: var(--limpia-hover); border-block-end-color: transparent; }

    .actividad-accion { white-space: normal; }

    /* «Quitar filtros» detrás de las pastillas (que bajan a su renglón con orden 4), no delante del buscador. */
    .crud-lista .crud-barra .actividad-limpiar { order: 5; }

    /* Las delicadas, en UNA fila que se desliza: en tres renglones empujaban la tabla fuera de la primera pantalla. */
    .actividad-delicadas {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        min-inline-size: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .actividad-delicada-boton { flex: none; white-space: nowrap; }

    .actividad-tabla tbody tr.actividad-detalle > td,
    .actividad-tabla tbody tr.actividad-detalle:hover > td { padding: 0 12px 14px; }
}
/* FIN: REGISTRO DE ACTIVIDAD */

/* =============================================================================
   LOS FILTROS TIPO EXCEL (2026-10-06; docs/central/filtros-tipo-excel-2026-10-06.md)
   -----------------------------------------------------------------------------
   Sustituyen a la fila de cajas blancas bajo la cabecera («son una chapuza; hazlo
   en plan Excel», el usuario sobre el listado de tickets). Un embudo en la cabecera
   de cada columna filtrable, su panel (FiltroDeColumna.razor) y las fichas de lo
   filtrado en la fila de pastillas (FichasDeFiltro.razor). Solo fichas --limpia-*:
   el oscuro llega solo.
   ============================================================================= */

/* La cabecera: el título (que ordena) y el embudo pegado a él. */
.filtro-cabecera {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.filtro-columna {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
}

/* El embudo: un botón de icono pequeño y discreto que se ve al pasar o con filtro. */
.filtro-columna-boton {
    display: inline-grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--limpia-radio-control);
    color: var(--limpia-tinta-3);
    cursor: pointer;
}

.filtro-columna-boton:hover {
    background-color: var(--limpia-hover);
    color: var(--limpia-morado);
}

/* Con filtro: el embudo relleno, en morado y sobre su aguada (no solo el color: también la forma). */
.filtro-columna-boton-on,
.filtro-columna-boton[aria-expanded="true"] {
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
}

.filtro-columna-boton:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 1px;
}

.filtro-columna-velo {
    position: fixed;
    inset: 0;
    z-index: var(--limpia-z-velo);
    background: transparent;
    cursor: default;
}

/* EL PANEL. Fijo (crud.js lo coloca bajo su embudo) porque la tabla se desplaza por
   dentro y lo recortaría. Deshace lo que hereda de la cabecera: versales, letra de
   11 px, sin partir. */
.filtro-columna-panel {
    position: fixed;
    inset-block-start: 20vh;
    inset-inline-start: 50%;
    z-index: var(--limpia-z-menu);
    display: flex;
    flex-direction: column;
    gap: 10px;
    inline-size: 18.5rem;
    max-inline-size: calc(100vw - 16px);
    max-block-size: min(32rem, calc(100dvh - 16px));
    overflow-y: auto;
    padding: 12px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
    box-shadow: var(--limpia-sombra-menu);
    font-size: var(--plano-t-13);
    font-weight: 420;
    letter-spacing: normal;
    line-height: 1.4;
    text-align: start;
    text-transform: none;
    white-space: normal;
    font-stretch: 100%;
    cursor: default;
}

/* Con poco alto (crud.js le da el que queda bajo el embudo) el panel se desplaza entero: nada se encoge ni se monta
   encima de otra cosa, y el pie con «Aplicar» se queda pegado abajo, siempre a mano. */
.filtro-columna-panel > * { flex-shrink: 0; }

.filtro-columna-asa { display: none; }

.filtro-columna-titulo {
    margin: 0;
    font-size: var(--plano-t-13);
    font-weight: 650;
    color: var(--limpia-tinta);
}

.filtro-columna-orden {
    display: flex;
    flex-direction: column;
    padding-block-end: 8px;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

/* `justify-content` porque el `button` de MudBlazor es un flex centrado (lo mismo que .lista-chip-opcion). */
.filtro-columna-opcion,
.filtro-columna-atajo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-block-size: 36px;
    padding: 0 10px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--limpia-tinta);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.filtro-columna-opcion:hover,
.filtro-columna-atajo:hover { background-color: var(--limpia-hover); }

.filtro-columna-opcion[aria-pressed="true"] {
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    font-weight: 600;
}

.filtro-columna-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-block-size: 0;
}

.filtro-columna-campo {
    inline-size: 100%;
    min-block-size: 36px;
    padding: 0 10px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    font: inherit;
    color-scheme: light dark;
}

.filtro-columna-rotulo {
    font-size: var(--plano-t-12, 12px);
    font-weight: 600;
    color: var(--limpia-tinta-2);
}

.filtro-columna-operandos {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* La lista de valores se desplaza sola; el resto del panel se queda quieto. */
.filtro-columna-valores {
    display: flex;
    flex-direction: column;
    max-block-size: 15rem;
    overflow-y: auto;
    padding: 2px;
    border: 1px solid var(--limpia-borde-fino);
    border-radius: var(--limpia-radio-control);
}

.filtro-columna-valor {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 32px;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
}

.filtro-columna-valor:hover { background-color: var(--limpia-hover); }

.filtro-columna-valor input {
    inline-size: 16px;
    block-size: 16px;
    margin: 0;
    accent-color: var(--limpia-morado);
    flex: none;
}

.filtro-columna-todos {
    font-weight: 600;
    border-block-end: 1px solid var(--limpia-borde-fino);
    border-radius: 6px 6px 0 0;
}

.filtro-columna-texto {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.filtro-columna-cuenta {
    flex: none;
    color: var(--limpia-tinta-3);
    font-variant-numeric: tabular-nums;
}

.filtro-columna-nota {
    margin: 0;
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-12, 12px);
}

.filtro-columna-error { color: var(--limpia-error-tinta); }

.filtro-columna-atajos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.filtro-columna-atajo {
    min-block-size: 32px;
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
}

.filtro-columna-pie {
    position: sticky;
    inset-block-end: -12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-block-end: -12px;
    padding-block: 8px 12px;
    background-color: var(--limpia-hoja);
    border-block-start: 1px solid var(--limpia-borde-fino);
}

.filtro-columna-quitar,
.filtro-columna-aplicar {
    min-block-size: 36px;
    padding: 0 14px;
    border-radius: var(--limpia-radio-control);
    font: inherit;
    font-weight: 560;
    cursor: pointer;
}

.filtro-columna-quitar {
    background: none;
    color: var(--limpia-morado);
    border: 1px solid transparent;
}

.filtro-columna-quitar:hover:not(:disabled) { background-color: var(--limpia-hover); }

/* La acción principal del panel: la única morada rellena. */
.filtro-columna-aplicar {
    background-color: var(--limpia-morado);
    color: var(--limpia-sobre-morado);
    border: 1px solid var(--limpia-morado);
}

.filtro-columna-aplicar:hover:not(:disabled) {
    background-color: var(--limpia-morado-hondo);
    border-color: var(--limpia-morado-hondo);
}

.filtro-columna-quitar:disabled,
.filtro-columna-aplicar:disabled {
    background-color: var(--limpia-cabecera);
    color: var(--limpia-tinta-3);
    border-color: var(--limpia-borde);
    cursor: not-allowed;
}

.filtro-columna-panel :is(button, input, select):focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 1px;
}

/* LAS FICHAS: una pastilla puesta con su «×». */
.filtro-ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filtro-ficha-x {
    font-size: 15px;
    line-height: 1;
}

.filtro-ficha:hover .filtro-ficha-x { color: var(--limpia-morado-hondo); }

.filtro-ficha-texto {
    max-inline-size: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filtro-fichas-todas {
    min-block-size: 32px;
    padding: 0 8px;
    background: none;
    border: 0;
    color: var(--limpia-morado);
    font: inherit;
    font-size: var(--plano-t-13);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.filtro-fichas-todas:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

/* TÁCTIL: todo objetivo a 44 px (DESIGN.md, «Do»). */
@media (pointer: coarse) {
    .filtro-columna-boton { inline-size: 44px; block-size: 44px; }
    .filtro-columna-opcion,
    .filtro-columna-atajo,
    .filtro-columna-valor,
    .filtro-columna-campo,
    .filtro-columna-quitar,
    .filtro-columna-aplicar,
    .filtro-fichas-todas { min-block-size: 44px; }
    .filtro-columna-valor input { inline-size: 20px; block-size: 20px; }
}

/* «Filtrar y ordenar»: solo en un teléfono, donde la cabecera de la tabla (y sus embudos) no se ve. */
.filtro-movil { display: none; }

/* EN UN TELÉFONO, UNA HOJA INFERIOR: el ancho entero, pegada abajo, con su asa y el velo
   oscurecido (aquí sí tapa: es lo único que se mira). */
@media (max-width: 719.98px) {
    .filtro-movil { display: inline-flex; position: relative; }
}

@media (max-width: 720px) {
    .filtro-columna-velo { background-color: color-mix(in srgb, var(--limpia-tinta) 32%, transparent); }

    .filtro-columna-panel {
        inset: auto 0 0 0 !important; /* crud.js no lo coloca en un teléfono, pero un style de antes no puede ganar. */
        inline-size: auto;
        max-inline-size: none;
        max-block-size: 85dvh;
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: var(--limpia-radio) var(--limpia-radio) 0 0;
        border-block-end: 0;
    }

    .filtro-columna-asa {
        display: block;
        align-self: center;
        inline-size: 40px;
        block-size: 4px;
        border-radius: 2px;
        background-color: var(--limpia-borde-control);
    }

    .filtro-columna-valores { max-block-size: 45dvh; }
    .filtro-columna-boton { inline-size: 44px; block-size: 44px; }
    .filtro-columna-opcion,
    .filtro-columna-atajo,
    .filtro-columna-valor,
    .filtro-columna-campo,
    .filtro-columna-quitar,
    .filtro-columna-aplicar { min-block-size: 44px; }
    .filtro-columna-pie > * { flex: 1 1 0; }
    .filtro-columna-pie { inset-block-end: 0; margin-block-end: 0; padding-block-end: 0; }
}
/* FIN: FILTROS TIPO EXCEL */

/* =============================================================================
   EL «?» DEL MANUAL (pieza 4 del soporte, tarea 6: Components/BotonDeAyuda.razor)

   Un botón redondo junto a la cabecera de cada pantalla. Desde 768 px abre la
   «Ayuda» de la central en un panel de 420 px a la derecha, encima del contenido
   (un <iframe> del mismo origen); por debajo, el botón se esconde y sale el enlace
   que la abre en otra pestaña. Sin JavaScript.
   ============================================================================= */
.boton-de-ayuda { display: inline-flex; flex: none; align-self: flex-start; }

.boton-de-ayuda-panel,
.boton-de-ayuda-pestana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--limpia-borde);
    border-radius: 50%;
    background: var(--limpia-hoja);
    color: var(--limpia-tinta);
    font: 650 16px/1 var(--plano-familia);
    text-decoration: none;
    cursor: pointer;
}

.boton-de-ayuda-panel:hover,
.boton-de-ayuda-pestana:hover { border-color: var(--tentalo-marca); color: var(--tentalo-marca); }

.boton-de-ayuda-pestana { display: none; }

@media (max-width: 767.98px) {
    .boton-de-ayuda-panel { display: none; }
    .boton-de-ayuda-pestana { display: inline-flex; inline-size: var(--plano-toque); block-size: var(--plano-toque); }
    .manual-panel { display: none; }
}

.manual-panel {
    position: fixed;
    inset-block: var(--plano-banda-alto, 64px) 0;
    inset-inline-end: 0;
    inline-size: min(var(--limpia-ayuda-ancho, 420px), 100vw);
    display: flex;
    flex-direction: column;
    background-color: var(--limpia-hoja);
    border-inline-start: 1px solid var(--limpia-borde);
    box-shadow: var(--limpia-sombra-menu);
    z-index: var(--limpia-z-ayuda);
}

.manual-panel-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 8px 8px 16px;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.manual-panel-titulo { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 650; color: var(--limpia-tinta); }

.manual-panel-pestana { flex: none; font-size: 13px; color: var(--tentalo-marca); }

.manual-panel-cerrar {
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border: 0;
    border-radius: var(--limpia-radio-control);
    background: none;
    color: var(--limpia-tinta);
    font-size: 22px;
    cursor: pointer;
}

.manual-panel-marco { flex: 1 1 auto; inline-size: 100%; border: 0; background: var(--limpia-hoja); }
/* FIN: EL «?» DEL MANUAL */

/* =============================================================================
   LISTAS COHERENTES (2026-10-14; docs/central/listas-coherentes-2026-10-14.md)

   1. Un texto largo de una celda se corta AL FINAL con puntos suspensivos y lleva su
      `title` (CrudLista): nunca se desplaza la tabla por una cadena, y nunca se ve el
      final de un texto con el principio tapado por la columna fija.
   2. Las listas de nombres (grupos de cajas) son fichas cortas: dos y «+N».
   3. Lo de dentro del panel de categorías (el panel y la fila pulsable son de lista-con-panel.css) y el árbol.
   ============================================================================= */

@media (min-width: 720px) {
    .lista-tabla .crud-texto {
        display: inline-block;
        max-inline-size: 22rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

.crud-fichas { display: inline-flex; flex-wrap: nowrap; gap: 4px; max-inline-size: 100%; vertical-align: middle; }

.crud-nombre-corto {
    display: inline-block;
    max-inline-size: 11rem;
    overflow: hidden;
    padding: 1px 8px;
    border: 1px solid var(--limpia-borde);
    border-radius: 6px;
    background-color: var(--limpia-cabecera);
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-11);
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crud-nombre-corto-mas { color: var(--limpia-tinta-3); }

.crud-columnas-vacia { margin-inline-start: auto; color: var(--limpia-tinta-3); font-size: var(--plano-t-11); }

/* --- Dentro del panel de categorías (el panel es de lista-con-panel.css) ---- */
.panel-seccion { display: flex; flex-direction: column; gap: 6px; }
.panel-seccion-titulo { margin: 0; color: var(--limpia-tinta-3); font-size: var(--plano-t-11); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.panel-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-fichas .crud-nombre-corto { max-inline-size: 100%; }
.panel-dato { display: flex; justify-content: space-between; gap: 12px; }
.panel-dato > :first-child { color: var(--limpia-tinta-2); }
.panel-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.panel-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-block-end: 1px solid var(--limpia-borde-fino); }
.panel-lista li:last-child { border-block-end: none; }
.panel-lista a { color: var(--limpia-morado); text-decoration: none; overflow-wrap: anywhere; }
.panel-lista a:hover { text-decoration: underline; }
.panel-lista .panel-lista-dato { flex: none; color: var(--limpia-tinta-3); font-size: var(--plano-t-11); }
.panel-nota { margin: 0; color: var(--limpia-tinta-3); font-size: var(--plano-t-11); }

/* --- El árbol de categorías ------------------------------------------------ */
.arbol-nombre { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 0; max-inline-size: 100%; }
.arbol-sangria { flex: none; display: inline-block; }
.arbol-tirador {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--limpia-tinta-2);
    cursor: pointer;
}
.arbol-tirador:hover { background-color: var(--limpia-hover); }
.arbol-tirador:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; }
.arbol-tirador[aria-expanded="true"] .mud-icon-root { transform: rotate(90deg); }
.arbol-hueco { flex: none; display: inline-block; inline-size: 24px; }
.arbol-nombre .crud-principal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arbol-hijas { flex: none; color: var(--limpia-tinta-3); font-size: var(--plano-t-11); font-weight: 400; }
.arbol-ruta { display: block; color: var(--limpia-tinta-3); font-size: var(--plano-t-11); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.categoria-baja { color: var(--limpia-tinta-3); }
.uso-fichas { display: inline-flex; gap: 4px; }
.uso-ficha { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 6px; background-color: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); font-size: var(--plano-t-11); line-height: 18px; white-space: nowrap; }
.uso-ficha .mud-icon-root { font-size: 14px; }
.uso-ficha-nada { color: var(--limpia-tinta-3); font-size: var(--plano-t-11); }
.lista-arbol-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--limpia-tinta-2); font-size: var(--plano-t-13); }
@media (pointer: coarse) {
    .arbol-tirador { inline-size: 44px; block-size: 44px; }
    .arbol-hueco { inline-size: 44px; }
}
/* EN UN TELÉFONO el enlace del nombre se estira sobre la tarjeta entera (plano.css): el tirador del árbol, por encima. Y el
   nombre se corta dentro de su celda: un nombre largo importado del sistema anterior («BEBIDAS - CAFETERIA SANTANDER») no puede ensanchar la
   página. */
.arbol-celda { display: block; max-inline-size: 100%; min-inline-size: 0; }
.arbol-nombre { display: flex; }
.arbol-nombre .crud-principal { flex: 0 1 auto; min-inline-size: 0; }
@media (max-width: 719.98px) {
    .arbol-tirador { position: relative; z-index: 2; }
    .lista-tabla td:has(> .arbol-celda) { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
}
/* --- La imagen de un medio de pago (lista y panel) ------------------------- */
.medio-imagen {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--limpia-neutro-fondo);
    color: var(--limpia-neutro-tinta);
    vertical-align: middle;
}
.medio-imagen img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* --- Las acciones de una fila, en el «⋯» también en el escritorio ----------
   Antes eran tres iconos sueltos por fila (editar, duplicar y la papelera roja al alcance de cada fila). Ahora el «⋯»
   abre una hoja con las acciones con su texto; borrar (o dar de baja) va la última, separada y en rojo, y pide
   confirmación. plano.css lo hacía solo en el teléfono (§7.3, 5); aquí vale para todos los anchos. */
.lista-tabla .crud-acciones-menu { display: block; position: relative; }

.lista-tabla .crud-acciones-tirador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border: none;
    border-radius: var(--limpia-radio-control);
    background: none;
    color: var(--limpia-tinta-2);
    cursor: pointer;
}

.lista-tabla .crud-acciones-tirador:hover { background-color: var(--limpia-hover); }
.lista-tabla .crud-acciones-tirador:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 2px; }
.lista-tabla .crud-acciones-menu-abierto .crud-acciones-tirador { background-color: var(--limpia-morado-aguada); color: var(--limpia-morado); }

.lista-tabla .crud-acciones-panel { display: none; }

/* EL MENÚ SE PINTA FUERA DE LA TABLA (2026-10-15; reports/central/menu-de-fila-2026-10-15). Hasta la 1.0.94 se abría con
   `position: absolute` a la izquierda del «⋯», dentro de la celda, y lo recortaba lo que tiene encima: en productos la celda
   (`td { overflow: hidden }` de lista-productos.css, para los puntos suspensivos) dejaba ver solo el canto de la caja, y en
   cualquier lista la tabla que se desplaza por dentro y la hoja (`overflow: clip`). Ahora el panel lleva `popover="manual"`
   y crud.js (colocarMenuDeFila) lo sube a la capa superior del navegador y le pone `top` y `left` en línea, pegado al «⋯»:
   debajo y hacia la izquierda, o encima si abajo no cabe, siempre dentro de la ventana. Se ve SOLO con `data-colocado`, que
   pone crud.js después de colocarlo. Es un menú: las acciones una debajo de otra, con su texto; la de borrar, la última. */
.lista-tabla .crud-acciones-menu-abierto .crud-acciones-panel[data-colocado] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: var(--limpia-z-menu);
    box-sizing: border-box;
    min-inline-size: 10rem;
    max-inline-size: calc(100vw - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    white-space: nowrap;
    padding: 4px;
    color: var(--limpia-tinta);
    background-color: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    box-shadow: var(--limpia-sombra-menu);
}

.lista-tabla .crud-acciones-panel .crud-accion {
    justify-content: flex-start;
    min-block-size: 32px;
    margin: 0;
    padding-inline: 8px 12px;
}

/* El divisor de la de borrar, en horizontal: el menú va en columna. */
.lista-tabla .crud-acciones-panel .crud-accion-divisor {
    display: block;
    inline-size: auto;
    block-size: 1px;
    margin: 2px 4px;
}

/* LA FILA NO SE SUBE POR ENCIMA DEL VELO (2026-10-15): el menú ya está en la capa superior, y con la fila por encima tocar en
   ella fuera del menú no lo cerraba (abría la ficha). Ahora todo lo que no es el menú es «fuera»: el velo lo recoge y lo cierra;
   también el propio «⋯», que así sigue abriendo y cerrando. */
.crud-acciones-velo { z-index: var(--limpia-z-velo); }

@media (pointer: coarse) {
    .lista-tabla .crud-acciones-tirador { inline-size: 44px; block-size: 44px; }
    .lista-tabla .crud-acciones-panel .crud-accion { min-block-size: 44px; }
}

/* --- La inicial de un empleado --------------------------------------------- */
.empleado-inicial {
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    font-weight: 650;
    line-height: 1;
}
/* La fila del panel abierto, entera: las celdas fijas (nombre, casilla) llevan su fondo propio y la marca quedaba a trozos. */
.lista-hoja .lista-tabla tbody > tr.lista-fila-activa > :is(td, th) { background-color: var(--limpia-morado-aguada); }

/* --- La presencia (ListaDePresencia) ---------------------------------------- */
/* Las dos fechas, pequeñas, en la barra de la lista: buscan al cambiar, sin botón. */
.presencia-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.presencia-fechas label { display: inline-flex; align-items: center; gap: 6px; color: var(--limpia-tinta-2); font-size: var(--plano-t-13); }
.presencia-fechas input[type="date"] {
    block-size: 32px;
    padding: 0 8px;
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    font: inherit;
    font-size: var(--plano-t-13);
}
.presencia-fechas input[type="date"]:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; }
.lista-hoja .lista-tabla tbody > tr.presencia-sin-cerrar > td { background-color: var(--limpia-aviso-fondo); }
.presencia-horario { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.presencia-otro-dia { color: var(--limpia-aviso-tinta); font-size: var(--plano-t-11); font-weight: 600; }
.presencia-por-empleado { margin-block-end: 12px; overflow: auto; max-block-size: 18rem; }
@media (pointer: coarse) {
    .presencia-fechas input[type="date"] { block-size: 44px; }
}
@media (max-width: 719.98px) {
    .lista-tabla tbody tr.presencia-sin-cerrar { background-color: var(--limpia-aviso-fondo); }
}
/* FIN: LISTAS COHERENTES */

/* =============================================================================
   LA FILA DE UNA DADA DE BAJA EN «INSTALACIONES» (2026-10-31)
   Vive aquí y no en plano.css porque aquel tiene tope de tamaño; pisa las reglas comunes de la fila apilada de plano.css (§7.3)
   por especificidad. Medido con el banco (BancoResponsivo.Bajas.cs y tools/central/capturar-bajas-de-instalaciones.mjs).
   ============================================================================= */
@media (max-width: 719.98px) {
    /* LA FILA DE UNA DADA DE BAJA (2026-10-31). Su «autorización» no es una insignia de 5,5 rem sino la insignia, la cuenta atrás
       y el motivo de un borrado fallido (texto libre), y sus acciones son «Recuperar» y «Borrar ya» con texto, no un «⋮» de 44 px:
       en los carriles anclados de la derecha se pisaban sobre el código y el nombre. Las dos celdas dejan de estar ancladas y bajan a
       su propia línea de la fila (después de los datos secundarios), a todo el ancho y con el texto partiendo palabra. Los carriles se
       quitan con la misma condición con que se reservaron; las clases repetidas suben la especificidad por encima de la regla común. */
    .instalaciones-tabla.plano-papeles.admin-tabla tbody > tr:has(> td.instalaciones-baja-cifra.instalaciones-baja-cifra) {
        --plano-carril-cifra: 0px;
    }

    .instalaciones-tabla.plano-papeles.admin-tabla tbody > tr:has(> td.instalaciones-baja-acciones.instalaciones-baja-acciones) {
        --plano-carril-acciones: 0px;
    }

    .instalaciones-tabla.plano-papeles.admin-tabla tbody > tr > td.instalaciones-baja-cifra[data-papel="cifra"] {
        position: static;
        order: 3;
        flex: 1 0 100%;
        max-inline-size: none;
        min-block-size: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.25rem 0.4rem;
        padding-block-start: 0.25rem;
        text-align: start;
        white-space: normal;
        font-size: var(--plano-t-13);
        font-weight: 420;
    }

    .instalaciones-tabla .instalaciones-baja-detalle { max-inline-size: none; }

    .instalaciones-tabla .instalaciones-baja-botones { flex-direction: row; align-items: center; }

    .instalaciones-tabla.plano-papeles.admin-tabla tbody > tr > td.instalaciones-baja-acciones[data-papel="acciones"] {
        position: static;
        order: 4;
        flex: 1 0 100%;
        white-space: normal;
        padding-block-start: 0.25rem;
    }
}

/* Y EN EL ESCRITORIO la celda de la baja también parte el texto (la tabla es `nowrap` entre 720 y 1024 px): el detalle baja a su
   línea dentro de la celda y el motivo largo de un borrado fallido no ensancha la tabla; los dos botones se apilan si no caben. */
.instalaciones-tabla td.instalaciones-baja-cifra,
.instalaciones-tabla td.instalaciones-baja-acciones { white-space: normal; }

/* Los dos botones de una baja, uno sobre otro y del mismo ancho: lado a lado son 230 px en una columna que ya aprieta a una tabla de
   nueve (entre 720 y 1280 px la tabla se desplaza por dentro). En un teléfono, en fila (bloque de la baja, arriba). */
.instalaciones-baja-botones { flex-direction: column; align-items: stretch; }

.instalaciones-baja-detalle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    min-inline-size: 0;
    max-inline-size: 16rem;
    overflow-wrap: anywhere;
}

/* =============================================================================
   LAS LISTAS EN UN TELÉFONO (2026-10-31, «Arregla el responsivo»; docs/central/responsivo-listas-2026-10-31.md)
   Capturas del usuario en su iPhone (390 px). En «Instalaciones» y «Usuarios» de la central —las dos MudTable escritas a mano
   con el buscador dentro de la barra de la tabla— la barra iba en UNA fila sin envolver: el buscador se quedaba en 132 px con su
   ayuda debajo (83 px de alto), los botones se centraban respecto de esa caja alta y bajaban 16-19 px, «Dadas de baja (1)»
   (con 48 px propios) se partía en tres renglones y medía 51 contra los 44 de «Filtrar y ordenar». Y en las filas apiladas la
   celda de acciones, anclada al canto derecho, medía 60 px —los 44 del «⋮» y 16 de relleno que MudBlazor da a la última celda—
   contra un hueco de 49,6: el «⋮» pisaba 6 px la insignia de la cifra; con «Editar» al lado (Usuarios) eran 190 px encima de la
   insignia «Sí» y del final del correo. Medido con BancoResponsivo.Listas.cs y tools/central/capturar-listas-responsivas.mjs.
   ============================================================================= */

/* LA BARRA DE UNA MudTable CON BUSCADOR, en todos los anchos: sus botones del alto del campo (40 px; 44 con el dedo) y separados. */
.mud-table-toolbar:has(> .crud-buscador-caja) { gap: 8px; }

.mud-table-toolbar:has(> .crud-buscador-caja) > .mud-button,
.mud-table-toolbar:has(> .crud-buscador-caja) > .filtro-barra-de-tabla .filtro-movil > .lista-chip {
    min-block-size: max(var(--densidad-campo), var(--densidad-boton));
    white-space: nowrap;
}

.mud-table-toolbar:has(> .crud-buscador-caja) > .mud-icon-button {
    min-inline-size: max(var(--densidad-campo), var(--densidad-boton));
    min-block-size: max(var(--densidad-campo), var(--densidad-boton));
}

/* Y el campo, del alto de sus botones: con el dedo y la disposición de escritorio (el teléfono tumbado, 844 × 390) los botones
   suben a 44 y el campo se quedaba en 40, arriba de una caja de 44: 4 px más alto que ellos. */
.mud-table-toolbar > .crud-buscador-caja .mud-input-control .mud-input {
    min-block-size: max(var(--densidad-campo), var(--densidad-boton));
}

/* «EXPORTAR» DE LA BARRA DE UNA LISTA, DEL ALTO DEL CAMPO. La barra de CrudLista va alineada arriba (nitida.css) y el botón pequeño
   medía 32 px junto al campo de 40: 4 px más alto su centro, en los diarios de documentos y en el registro de actividad (lo encontró el
   barrido nuevo de la barra a 768, 1280 y 1440 px). */
.crud-barra .crud-exportar > .mud-button,
.crud-barra > a.mud-button.crud-boton {
    min-block-size: max(var(--densidad-campo), var(--densidad-boton));
}

/* EN EL ESCRITORIO, UNA FILA CENTRADA EN EL CAMPO: la ayuda cuelga del campo fuera del flujo y su renglón se reserva debajo de la
   barra (lo mismo que hace plano.css con la barra de CrudLista). Antes la caja del buscador medía campo y ayuda, y «Dadas de baja» y
   refrescar quedaban 8-12 px más abajo que el campo. */
@media (min-width: 720px) {
    .mud-table-toolbar > .crud-buscador-caja .crud-buscador { position: relative; }

    .mud-table-toolbar > .crud-buscador-caja .crud-buscador > .mud-input-control-helper-container {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
    }

    .mud-table-toolbar:has(> .crud-buscador-caja .mud-input-control-helper-container) {
        padding-block-end: calc(0.5rem + 1.25rem);
    }
}

@media (max-width: 719.98px) {
    /* EN EL TELÉFONO, DOS FILAS: el buscador a todo el ancho con su ayuda debajo (que ya no empuja a nadie), y debajo los botones
       del mismo alto, con refrescar al final (el MudSpacer de la barra lo empuja). Las fichas de los filtros puestos, en su fila. */
    .mud-table-toolbar:has(> .crud-buscador-caja) { flex-wrap: wrap; align-items: center; }

    .mud-table-toolbar > .crud-buscador-caja { flex: 1 1 100%; max-inline-size: none; }

    .mud-table-toolbar:has(> .crud-buscador-caja) > .filtro-barra-de-tabla { display: contents; }

    .mud-table-toolbar:has(> .crud-buscador-caja) > .filtro-barra-de-tabla > .filtro-fichas { order: 1; flex: 1 1 100%; }

    /* LA CELDA DE ACCIONES MIDE LO QUE SU «⋮»: sin el relleno de 16 px que MudBlazor da a la última celda de la fila
       (`.mud-table-cell:last-child`, cuatro clases), que la hacía 12 px más ancha que el hueco que la fila le reserva. */
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > td.mud-table-cell:is([data-papel="acciones"], .crud-celda-acciones) {
        padding: 0;
    }

    /* EL AVISO DE LA LISTA VACÍA, A TODO EL ANCHO: la fila apilada es `flex` y su única celda iba en línea (302 de 366 px). */
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > :is(td, th).mud-table-empty-row {
        display: block;
        flex: 1 0 100%;
    }

    /* «EDITAR» NO SE PINTA EN UN USUARIO: la fila entera lo abre (el correo, Usuarios.razor). Queda el «⋮» con su objetivo de 44. */
    .usuarios-tabla .usuarios-editar { display: none; }
}

/* EL CORREO QUE ABRE UN USUARIO: un botón que se lee como el texto de su celda (en el teléfono, en el peso del nombre). */
.usuarios-abrir {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    overflow-wrap: break-word;
    cursor: pointer;
}

.usuarios-abrir:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   TRES DETALLES DE LAS LISTAS (2026-10-31, «arregla también estos tres detalles»; docs/central/listas-tres-detalles-2026-10-31.md)
   Vive aquí y no en plano.css porque aquel está en su tope de tamaño (218 KB). Medido con BancoResponsivo.Listas.cs
   (tools/central/capturas-listas-responsivas.sh) y con el barrido de la web publicada en AOT (tools/central/barrer-densidad.mjs).
   ============================================================================= */

@media (max-width: 719.98px) {
    /* EL «·» NUNCA ABRE NI CIERRA UN RENGLÓN. La segunda línea de una fila apilada son celdas sueltas de una fila `flex` que
       envuelve: cuando la tercera no cabía bajaba entera con su punto delante («· 40 cajas» en Instalaciones a 360-430 px). El punto
       ya no va DENTRO de la celda sino colgado a su izquierda, en el hueco entre dos celdas (`column-gap` del ancho del punto y un
       margen negativo igual): entre dos datos del mismo renglón se ve como siempre; delante del primero de un renglón cae fuera del
       canto izquierdo de la fila, y la fila recorta lo que se sale por ese canto (`clip-path` solo a la izquierda: arriba, abajo y a
       la derecha no recorta nada, ni el foco del «⋯»). Detrás de un dato nunca hay punto: el de la celda siguiente va con ella.
       Las tarjetas con miniatura no entran: sus datos ya van cortados con «…» en una línea y su hueco de la izquierda es la foto. */
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:not(:has(> [data-papel="miniatura"])) {
        --plano-separador: 0.85rem;
        column-gap: var(--plano-separador);
        clip-path: inset(-100vh -100vw -100vh 0);
    }

    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:not(:has(> [data-papel="miniatura"])) > [data-papel="secundaria"][data-separador]::before,
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:not(:has(> [data-papel="miniatura"])) > td:not([data-papel]):nth-of-type(n+3)::before,
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:not(:has(> [data-papel="miniatura"])) >
        td:is(.crud-celda-numero, .admin-celda-numero) ~ td:not([data-papel]):is(.crud-celda-numero, .admin-celda-numero)::before {
        display: inline-block;
        inline-size: var(--plano-separador);
        margin-inline: calc(-1 * var(--plano-separador)) 0;
        text-align: center;
    }

    /* EN INSTALACIONES, LA INSIGNIA ANCHA TIENE SU HUECO: «Suspendida» con su icono y el candado del cifrado miden 124 px y el hueco
       de la cifra son 88 (5,5 rem): el nombre largo pasaba 26 px por debajo de la insignia. Esas filas (Instalaciones.razor) reservan
       8 rem; las clases repetidas suben la especificidad por encima de la regla común del carril (plano.css §7.3 bis). */
    .instalaciones-tabla.instalaciones-tabla.instalaciones-tabla.plano-papeles.admin-tabla tbody > tr:has(> td.instalaciones-cifra-ancha) {
        --plano-carril-cifra: 8rem;
    }

    .instalaciones-tabla.plano-papeles.admin-tabla tbody > tr > td.instalaciones-cifra-ancha[data-papel="cifra"] { max-inline-size: 8rem; }

    /* EL «⋯» DE LA BARRA DE CrudLista: «Columnas» y «Seleccionar» del mismo ancho y con el icono al mismo canto. «Columnas» va dentro de
       su envoltorio (el de su menú) y se quedaba en su ancho: 107 px junto a los 117 de «Seleccionar» (lo vio el barrido nuevo del panel). */
    .crud-barra-mas-abierto .crud-barra-mas-panel .crud-columnas > .crud-columnas-tirador { flex: 1 1 auto; }

    .crud-barra-mas-abierto .crud-barra-mas-panel :is(.crud-columnas-tirador, .crud-modo-seleccion) { justify-content: flex-start; }

    /* EL PANEL DEL «⋯» SE ABRE DEBAJO DE SU FILA Y DESDE EL CANTO IZQUIERDO DE LA BARRA, por encima de las pastillas. Iba pegado por la
       derecha a su tirador y crecía hacia la izquierda: en Productos el tirador abre la fila y el panel salía 72 px por la izquierda de la
       pantalla, debajo de las pastillas de los filtros (que van por encima del velo). Anclado a la barra cabe siempre, y el menú de
       «Columnas» de dentro (14 rem) se abre hacia la derecha desde ese mismo canto: a 360 px, desde el tirador, se salía. Lo vio el
       barrido nuevo del panel. Clases repetidas: la regla de la lista con panel (lista-con-panel.css) lleva cinco. */
    .crud-barra:has(.crud-barra-mas) { position: relative; }

    .crud-barra .crud-barra-mas { position: static; }

    .crud-barra .crud-barra-mas.crud-barra-mas-abierto .crud-barra-mas-panel {
        inset-inline: 0 auto;
        inset-block-start: auto;
        margin-block-start: calc(var(--plano-toque) + 2px);
        z-index: var(--limpia-z-menu);
    }

    .crud-barra .crud-barra-mas.crud-barra-mas-abierto .crud-columnas.crud-columnas-abierto .crud-columnas-panel {
        inset-inline: 0 auto;
        z-index: var(--limpia-z-menu);
    }
}

/* «COLUMNAS» DE LA BARRA DE CrudLista, DEL ALTO DEL CAMPO: en el escritorio medía 32 px junto al campo y a «Nuevo» de 40 (la barra va
   alineada arriba): 4 px más alto su centro en todas las listas del marco a 768-1440 px. El barrido no lo veía porque saltaba todo lo
   que hubiera dentro del panel del «⋯», que en el escritorio se deshace en la barra. */
.crud-barra .crud-columnas-tirador { min-block-size: max(var(--densidad-campo), var(--densidad-boton)); }

/* LA TABLA DE INSTALACIONES CABE A 1024, 1280 Y 1440 px SIN DESPLAZARSE. Con nombres y correos largos medía 1328 px en una caja de 1216
   a 1280 (y de 973 a 1024): MudBlazor da 16 + 24 px de relleno a cada una de sus nueve celdas y el correo no partía. Ahora el relleno
   es el de las listas de la central (12 px por lado, como `.lista-tabla`), el correo parte (Instalaciones.razor le da un corte delante
   de la arroba) y por debajo de 1280 la fecha de alta, que está en la ficha, no se pinta. */
@media (min-width: 720px) {
    /* Cuatro clases: las de MudBlazor para la tabla densa son tres (`.mud-table-dense * .mud-table-row .mud-table-cell`). */
    .instalaciones-tabla.mud-table .mud-table-row > .mud-table-cell { padding-inline: 12px; }

    .instalaciones-tabla td.instalaciones-correo { overflow-wrap: anywhere; }
}

@media (min-width: 720px) and (max-width: 1279.98px) {
    .instalaciones-tabla .instalaciones-fecha { display: none; }
}

/* El correo de un usuario también parte donde haga falta: a 1024 px la tabla de Usuarios se desplazaba 5 px. */
.usuarios-tabla .usuarios-abrir { overflow-wrap: anywhere; }