: la contencion hace de bloque contenedor de lo posicionado, y colgandola de un panel con barras de herramientas se llevaria por delante sus menus. */ container-type: inline-size; } .escpos-vista-previa { --escpos-columnas: 42; --escpos-cuerpo: 12px; /* El relleno (0,75rem a cada lado) mas los dos cantos de 1 px. */ --escpos-marco: calc(1.5rem + 2px); --escpos-avance: 0.6; /* El alto de linea del papel, en un sitio: el doble alto reserva exactamente una linea mas (lo mismo que el escpos.css del TPV). */ --escpos-interlineado: 1.35; box-sizing: border-box; font-family: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: clamp( 6px, calc((100cqw - var(--escpos-marco)) / (var(--escpos-columnas) * var(--escpos-avance))), var(--escpos-cuerpo) ); line-height: var(--escpos-interlineado); white-space: pre; /* NO DEBERIA DESPLAZARSE (tanda T3, 2026-09-28): quien pinta el papel escribe en el `style` del
 `--escpos-columnas` con las del papel O las de su
       linea mas ancha, la que sea mayor (VistaPreviaEscPos.EstiloDeColumnas, lo
       mismo que el TPV), y la letra se ajusta a esas columnas. Esto queda de
       ultimo recurso por debajo del suelo de 6 px: scrollea DENTRO de su caja y
       no en la pagina, que es la regla del sistema de diseno. */
    overflow-x: auto;
    width: calc(var(--escpos-columnas) * 1ch + var(--escpos-marco));
    max-width: 100%;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--tentalo-borde);
    border-radius: 6px;
    background-color: #fff;
    color: var(--tentalo-tinta);
    min-height: 8rem;
}

.escpos-vista-previa-32 {
    --escpos-columnas: 32;
}

.escpos-vista-previa-42 {
    --escpos-columnas: 42;
}

.escpos-vista-previa-48 {
    --escpos-columnas: 48;
    --escpos-cuerpo: 11px;
}

.escpos-vista-previa-56 {
    --escpos-columnas: 56;
    --escpos-cuerpo: 9.5px;
}

.escpos-vista-previa-64 {
    --escpos-columnas: 64;
    --escpos-cuerpo: 8.75px;
}

/* LAS MARCAS DE LA IMPRESORA (tanda T3, 2026-09-28). La central pinta con EL
   MISMO analizador que el TPV (Services\VistaPreviaEscPos.cs delega en
   frontend-blazor\Tentalo.POS.Tactil\Runtime\VistaPreviaEscPos.cs, compilado
   aqui por enlace), y estas reglas copian el criterio de su escpos.css. El
   analizador ya no sustituye etiqueta por etiqueta: recorre el marcado con el
   estado de la impresora y saca el texto en TRAMOS, uno por combinacion de
   bits, cada uno en UN  con sus clases:

     escpos-b     negrita.
     escpos-u     subrayado.
     escpos-neg   negativo (GS B): tinta clara sobre fondo oscuro. El nucleo
                  rellena con espacios la linea entera, asi que la banda del
                  titulo y la del TOTAL salen de lado a lado, como en el papel.
     escpos-red   la segunda tinta de las impresoras de dos colores (ESC r).
     escpos-cpp12 la fuente B: 9 puntos de ancho en vez de 12, o sea 0,75.
     escpos-dw    doble ancho: CADA LETRA OCUPA DOS COLUMNAS. Se estira el tramo
                  al doble desde su izquierda con un transform, que no ocupa
                  sitio, y el sitio de las otras N columnas lo reserva el margen:
                  `--n` son los caracteres del tramo, lo escribe el analizador.
                  Antes se separaban las letras 8 px, que no son columnas.
     escpos-dh    doble alto: cada letra ocupa DOS LINEAS. Se estira hacia arriba
                  desde el pie y la linea de encima la reserva el margen superior
                  del bloque en linea. Antes no se pintaba distinto.
     dw + dh      las dos cosas: el cuerpo al doble, que en una letra
                  monoespaciada es exactamente dos columnas y dos lineas.

   ``, ``, `` e `` no dejan clase (bits de ESC ! que las
   termicas corrientes no pintan), ni los cortes, la estacion, el avance de
   pagina, la pagina de codigos o los bytes en crudo: no dejan nada en el papel. */
.escpos-vista-previa .escpos-b {
    font-weight: 700;
}

.escpos-vista-previa .escpos-u {
    text-decoration: underline;
}

.escpos-vista-previa .escpos-neg {
    background-color: var(--tentalo-tinta);
    color: #fff;
}

.escpos-vista-previa .escpos-red {
    color: #b3261e;
}

.escpos-vista-previa .escpos-neg.escpos-red {
    background-color: #b3261e;
    color: #fff;
}

.escpos-vista-previa .escpos-cpp12 {
    font-size: 0.75em;
}

.escpos-vista-previa .escpos-dw {
    display: inline-block;
    transform: scaleX(2);
    transform-origin: 0 50%;
    margin-inline-end: calc(var(--n, 0) * 1ch);
}

.escpos-vista-previa .escpos-dh {
    display: inline-block;
    transform: scaleY(2);
    transform-origin: 50% 100%;
    margin-block-start: calc(var(--escpos-interlineado) * 1em);
}

.escpos-vista-previa .escpos-dw.escpos-dh {
    display: inline;
    transform: none;
    margin: 0;
    font-size: 2em;
}

.escpos-vista-previa .escpos-dw.escpos-dh.escpos-cpp12 {
    font-size: 1.5em;
}

/* LAS IMAGENES. El analizador pone las clases en el propio  (ya no hay
   envoltorio) y su ancho DEL PAPEL en columnas, en `ch` (doce puntos de la
   impresora por columna: una raya de 576 puntos ocupa las 48), asi que escalan
   con la letra igual que el texto. El tope es el papel. `pixelated` porque son
   mapas de bits de un punto por pixel: suavizados, las rayas salen grises. Sin
   `align` es centrada, que es lo que hace el motor ESC/POS (§17). */
.escpos-vista-previa img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    image-rendering: pixelated;
}

.escpos-vista-previa img.escpos-img-left {
    margin: 0 auto 0 0;
}

.escpos-vista-previa img.escpos-img-right {
    margin: 0 0 0 auto;
}

/* EL HUECO ROTULADO DEL DISENADOR (§21, 2026-09-18). Donde el motor no ha
   podido pintar una imagen -el bloque va dentro de un grupo cuya condicion no
   se cumple, la empresa no tiene logotipo, el base64 no vale- la vista previa
   del DISENADOR deja esta marca en su sitio. Antes no dejaba nada: el papel
   empezaba por la linea siguiente y no habia forma de saber que faltaba algo.

   PUNTEADO Y EN MOSTAZA, que es lo que el sistema de diseno reserva para
   «atencion, esto esta pendiente» (DESIGN.md): no es un error -el diseno se
   guarda y se imprime igual- sino algo que hay que mirar. El punteado dice
   ademas que el recuadro NO SALE POR EL PAPEL, que es justo lo que se quiere
   dar a entender.

   SE SALE DE LA REJILLA DE CARACTERES A PROPOSITO. El papel va en un  con
   `white-space: pre` y la letra apretada a las columnas del rollo; el rotulo es
   una frase larga que tiene que leerse, asi que aqui se vuelve a `normal` para
   que parta por palabras, y el cuerpo sube a 0,95em porque no cuenta columnas.
   Ocupa el ancho del papel, que es lo que ocuparia la imagen que falta. */
.escpos-vista-previa .escpos-hueco {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0.4rem 0;
    padding: 0.5rem 0.6rem;
    white-space: normal;
    font-size: 0.95em;
    line-height: 1.4;
    text-align: center;
    border: 1px dashed var(--plano-mostaza-honda);
    border-radius: 4px;
    background-color: var(--plano-mostaza-aguada);
    color: var(--plano-tinta);
}

/* El hueco de un codigo de barras o de un QR. El nucleo manda la MARCA con su
   valor, no el dibujo; el React pone en su sitio dos PNG genericos que trae
   dentro (ocho kilobytes de base64 entre los dos) y aqui se dibujan con CSS,
   que dice lo mismo y no pesa nada. */
.escpos-simbolo {
    display: block;
    margin: 0.4rem auto;
    border: 1px solid var(--tentalo-borde);
}

.escpos-simbolo-barras {
    width: 60%;
    height: 2.6rem;
    background-image: repeating-linear-gradient(
        90deg,
        var(--tentalo-tinta) 0 2px,
        #fff 2px 4px,
        var(--tentalo-tinta) 4px 5px,
        #fff 5px 9px
    );
}

.escpos-simbolo-qr {
    width: 5.5rem;
    height: 5.5rem;
    background-image:
        repeating-linear-gradient(90deg, var(--tentalo-tinta) 0 6px, #fff 6px 12px),
        repeating-linear-gradient(0deg, var(--tentalo-tinta) 0 6px, #fff 6px 12px);
    background-blend-mode: difference;
}

/* EL QR DE VERDAD (2026-09-18). js\qr.js mete dentro del  el SVG del
   codigo, dibujado con el valor que el traductor dejo en `data-valor`, y le
   pone esta clase: el recuadro de relleno de arriba se apaga -ya no hace falta
   decir «aqui va un QR» cuando esta el QR- y el hueco pasa a medir lo que mide
   el simbolo en el papel, que es el ancho que el propio SVG trae en tanto por
   ciento. El borde tambien se quita: el simbolo lleva su zona de silencio
   dibujada y un canto pegado a ella confunde al lector. */
.escpos-simbolo-qr-pintado {
    width: auto;
    height: auto;
    background-image: none;
    border: 0;
    line-height: 0;
}

/* EL SVG SE CENTRA SOLO, y hace falta decirlo: el  pasa a `width: auto`
   —o sea, todo el ancho del papel— y el `margin: auto` de `.escpos-simbolo` ya
   no lo mueve, porque lo que hay que centrar es el dibujo de dentro, que mide
   lo que mide en el papel. Sin esto el código sale pegado a la izquierda y la
   impresora lo saca centrado (ESC a 1), o sea que la previa mentiría. */
.escpos-simbolo-qr-pintado svg {
    display: block;
    height: auto;
    margin: 0 auto;
}

.escpos-simbolo-qr-pintado.escpos-simbolo-left svg {
    margin-left: 0;
}

.escpos-simbolo-qr-pintado.escpos-simbolo-right svg {
    margin-right: 0;
}

/* La alineacion del simbolo dentro del papel. Sin clase queda el `margin: auto`
   de `.escpos-simbolo`, que centra, y centrado es lo que hace la impresora con
   un ; estas dos son para el dia que el nucleo mande un `align`. */
.escpos-simbolo-left {
    margin-left: 0;
    margin-right: auto;
}

.escpos-simbolo-right {
    margin-left: auto;
    margin-right: 0;
}

/* EL QR DE MUESTRA: el que se pinta cuando el bloque todavia no tiene campo
   elegido. Se rotula con `::after` y no con texto dentro del  porque el
   papel va en un  con `white-space: pre` y un texto de mas correria una
   linea. Atenuado, para que nadie confunda la muestra con el QR del documento. */
.escpos-simbolo-qr-muestra {
    opacity: 0.55;
}

.escpos-simbolo-qr-muestra::after {
    content: attr(data-muestra);
    display: block;
    font-family: var(--plano-familia);
    font-size: 0.75em;
    line-height: 1.4;
    text-align: center;
    color: var(--tentalo-tinta-suave);
}

/* --- La vista previa de una pagina RDL ----------------------------------- */
/* Son PNG ya renderizados por el nucleo, una imagen por pagina. A ancho
   completo del panel y con su borde, para que se vea donde acaba la hoja. */
.impresion-vista-previa-paginas img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    border: 1px solid var(--tentalo-borde);
    border-radius: 4px;
    background-color: #fff;
}

.impresion-vista-previa-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --- El editor de elementos de cabecera, pie y cupon ---------------------- */
/* Una fila es: los dos botones de orden a la izquierda, el cuerpo (un campo de
   texto con sus cuatro conmutadores, o una imagen) en medio y el de quitar a la
   derecha. Con grid y no con flex porque las tres piezas tienen que quedar
   alineadas entre filas aunque una lleve imagen y la de al lado texto. */
.plantilla-elemento {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--tentalo-borde);
}

.plantilla-elemento:last-of-type {
    border-bottom: none;
}

/* min-width: 0 en el hijo de una rejilla: sin el, un campo de texto no baja de
   su min-content y la fila se sale del panel en 375 px. Es lo mismo que hace
   .crud-secciones-dos con sus columnas. */
.plantilla-elemento-cuerpo {
    min-width: 0;
}

.plantilla-elemento-orden,
.plantilla-elemento-quitar {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* Los botones a la altura del campo y no del borde de la fila: el campo
       lleva su etiqueta flotante encima. */
    padding-top: 0.25rem;
}

.plantilla-elemento-atributos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}

.plantilla-elementos-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Altura de toque (regla 3 del sistema de diseno): los botones de orden, el de
   quitar y los cuatro conmutadores de estilo son botones de icono pequenos, que
   MudBlazor deja en 30 px. Crece la caja, no el dibujo. */
.plantilla-elemento-boton {
    min-height: var(--tentalo-toque);
    min-width: var(--tentalo-toque);
}

/* --- La ayuda de marcadores de un cupon ---------------------------------- */
.cupon-marcadores code {
    white-space: nowrap;
}

.cupon-marcadores td:first-child {
    width: 1%;
    white-space: nowrap;
    vertical-align: top;
}

.cupon-marcadores-ejemplo {
    text-align: center;
    margin: 0.5rem 0;
}

/* --- El diario y la ficha de documentos de venta (fase D1) --------------- *
 *
 * docs\central\diario-de-documentos.md. Tres pantallas de tabla y tres fichas
 * que reutilizan casi todo lo del informe (.informe-rejilla, .informe-tabla,
 * .informe-celda-numero, .admin-insignia): aqui solo esta lo que anaden.      */

/* La columna de la casilla de seleccion, lo mas estrecha posible: en una tabla
   de treinta columnas cada pixel de la primera es un pixel que le falta a la
   serie y el numero. */
.documentos-celda-marca {
    width: 1%;
    padding-right: 0 !important;
}

/* La fila entera lleva a la ficha (OnRowClick), asi que tiene que parecerlo.
   El cursor es la unica pista que queda cuando la celda del enlace se ha
   apagado en el selector de columnas. */
.documentos-tabla .mud-table-row:hover {
    cursor: pointer;
}

/* El filtro por columna vive DENTRO de la cabecera, debajo del boton de
   ordenar. Sin el ancho minimo, MudBlazor le da el de su contenido y en una
   columna estrecha («CP») el campo se queda en dos caracteres. */
.documentos-filtro {
    min-width: 6rem;
    margin-top: 0.25rem;
}

/* El menu de columnas visibles: una columna de casillas con altura maxima, que
   con treinta columnas no cabe en pantalla. */
.documentos-columnas-menu {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    min-width: 14rem;
}

/* La barra de acciones de la ficha: navegacion a la izquierda, acciones a la
   derecha, y las dos se envuelven en vez de recortarse (la misma regla que
   .informe-resultado-acciones: un boton recortado es un boton inalcanzable). */
.documento-ficha-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.documento-ficha-navegacion,
.documento-ficha-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* EL CUERPO DE LA FICHA, UNA PILA DE ZONAS A ANCHO COMPLETO (tanda 5 del
   redisenio «El plano de sala»).

   Hasta la tanda 4 esto eran DOS COLUMNAS, la vista previa a la izquierda y los
   datos a la derecha, y la revision de acabado lo midio: un ticket ESC/POS de 42
   columnas no pasa de unos 330 px de ancho y se corta a 70vh de alto, mientras
   que la columna de datos de una factura -documento, importes, cliente y lineas-
   pasa de los mil cuatrocientos. Debajo del papel quedaban unos OCHOCIENTOS
   pixeles de columna en blanco.

   Ahora el papel es una zona mas, la primera, y las demas van debajo una tras
   otra. La rejilla de doce del §4 -rotulo condensado a la izquierda, contenido a
   la derecha- la enciende la clase `.crud-secciones` que el marcado lleva al
   lado, que es la misma que usan las 48 fichas del marco CRUD; aqui no hace
   falta ni una regla nueva. Es un `` sin nada que decir, y eso es lo que
   dice esta regla. */
.documento-ficha-cuerpo {
    display: block;
}

/* La vista previa hace scroll dentro de su zona: un ticket de sesenta lineas
   no puede alargar la ficha entera.

   Y NO SE ESTIRA A LO ANCHO. En una zona de nueve doceavos de la pagina hay unos
   970 px a 1.440: una pagina A4 estirada ahi se lee como un cartel, y un ticket
   de 42 columnas -que mide lo que mide- dejaria el resto en blanco de todas
   formas. 40 rem es lo que median las dos columnas de antes, asi que el papel se
   ve del mismo tamano que siempre. */
.documentos-previa {
    max-height: 70vh;
    max-inline-size: 40rem;
    overflow: auto;
}

.documento-ficha-insignias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* --------------------------------------------------------------------------
   EL PAPEL AL LADO Y LOS DATOS EN TARJETAS (2026-09-30,
   docs\central\ficha-de-factura-2026-09-30.md §2)
   --------------------------------------------------------------------------
   La queja, con fotos al 80 % en una pantalla de 1.920: «la parte de abajo es
   un churro». Medido en el banco (documentos-factura-simplificada): etiqueta y
   valor a 1.994 px uno del otro, nueve «-» en un cliente que no existe y ese
   bloque vacío con 373 px de alto. Los datos cortos de un documento no llenan
   una zona a ancho completo, así que dejan de ser zonas:

     * LA FICHA PARA EN 90 REM (1.440 px): el papel (22) más su hueco (2) más
       tres tarjetas en fila (66). La barra de acciones acaba donde acaban los
       datos y no en el borde de 2.400 px CSS que da una pantalla de 1.920 al
       80 %.
     * EL RESUMEN: el papel a la izquierda y las tarjetas a la derecha desde
       1.024 px; por debajo, el papel encima y las tarjetas debajo.
     * LAS TARJETAS miden de 18 rem a lo que toque (`auto-fill`, como las de
       diseños de impresión: una sola no se estira a todo el ancho) y el
       conjunto no pasa de 66 rem: tres por fila a 1.600 y a 1.920, dos a 1.280
       y a 768, una a 375.
     * UN PAR ES UNA FILA DE LA REJILLA de su tarjeta (`subgrid`): la columna de
       etiquetas mide la más larga y el valor va JUSTO al lado. Los importes, a
       la derecha y con cifras de ancho fijo para que las comas caigan en
       columna. */
.documento-ficha {
    max-inline-size: 90rem;
}

.documento-ficha-resumen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding-block: 1.25rem 1.75rem;
    border-block-end: 1px solid var(--plano-linea-fina);
}

@media (min-width: 1024px) {
    .documento-ficha-resumen {
        grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
        gap: 2rem;
    }

    /* Un documento de PÁGINA (A4 en imágenes o en PDF) necesita algo más de
       papel que un ticket de 42 columnas para leerse. */
    .documento-ficha-resumen:has(.impresion-vista-previa-paginas) {
        grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr);
    }
}

.documento-ficha-papel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-inline-size: 0;
}

.documento-ficha-papel .documentos-previa {
    max-inline-size: 100%;
    margin-block-start: 0.4rem;
}

.documento-ficha-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
    min-inline-size: 0;
    max-inline-size: 66rem;
}

/* Lo ancho sigue en zonas bajo el resumen; la primera se separa de su regla. */
.documento-ficha-cuerpo {
    padding-block-start: 1.25rem;
}

/* Las líneas de un ticket son cuatro columnas: a 60 rem se leen enteras sin
   que la cantidad y el importe queden a un metro del producto. */
.documento-ficha-cuerpo .plano-region-campos {
    max-inline-size: 60rem;
}

/* LA TARJETA: la habitación del plano (hoja, línea fina en dos lados y muro de
   2 px en los otros dos), la misma de `.admin-tarjeta` y de los diseños de
   impresión. Ni sombra ni papel. */
.documento-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-inline-size: 0;
    padding: 1rem 1.1rem 1.1rem;
    background-color: var(--plano-hoja);
    border: 1px solid var(--plano-linea-fina);
    border-left: 2px solid var(--plano-muro);
    border-bottom: 2px solid var(--plano-muro);
    border-radius: var(--plano-esquina-muro);
}

.documento-tarjeta-cabecera {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.documento-tarjeta-titulo {
    margin: 0;
}

/* LA AYUDA, entera: a todo el ancho de su tarjeta y partiéndose en líneas.
   Antes vivía en la columna del rótulo de la zona, a 34ch, y en la foto de la
   queja salía cortada por la izquierda. */
.documento-ficha-ayuda {
    margin: 0;
    font-size: var(--plano-t-13);
    line-height: 1.4;
    color: var(--plano-tinta-2);
    overflow-wrap: anywhere;
}

.documento-datos {
    display: grid;
    grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.45rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.documento-dato {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
}

.documento-dato-etiqueta {
    color: var(--plano-tinta-2);
}

.documento-dato-valor {
    margin: 0;
    min-inline-size: 0;
    font-weight: 600;
    color: var(--plano-tinta);
    overflow-wrap: anywhere;
}

.documento-dato-cifra .documento-dato-valor {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* EL TOTAL: con su regla encima y el peso de un total. */
.documento-dato-destacado {
    border-block-start: 1px solid var(--plano-linea);
    padding-block-start: 0.45rem;
}

.documento-dato-destacado .documento-dato-etiqueta,
.documento-dato-destacado .documento-dato-valor {
    font-size: var(--plano-t-15);
    font-weight: 700;
    color: var(--plano-tinta);
}

/* LO QUE FALTA, ATENUADO Y DICHO: «Sin dato», «Sin cliente», en la tinta
   secundaria (8:1 sobre la hoja) y sin peso. Nunca un guion suelto. */
.documento-dato-vacio .documento-dato-valor {
    font-weight: 400;
    color: var(--plano-tinta-2);
}

/* Un documento relacionado dentro de un par es un enlace: objetivo de 44 px. */
.documento-dato-enlace {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
}

/* El buscador por serie y numero: los dos campos y el boton en una linea, y en
   el movil apilados. El boton no encoge, para que no se recorte su texto. */
.documento-buscador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.documento-buscador .campo {
    max-width: 12rem;
    flex: 1 1 8rem;
}

.documento-buscador .mud-button-root {
    flex: 0 0 auto;
    min-height: var(--tentalo-toque);
}

/* --------------------------------------------------------------------------
   LAS ACCIONES DE LA FICHA Y DEL DIARIO (fases D2 y D3 de
   docs\central\diario-de-documentos.md)
   -------------------------------------------------------------------------- */

/* La barra de acciones de la ficha envuelve igual que su contenedor: en una
   factura son once acciones y a 1024 px no caben en una fila. */
.documento-ficha-acciones-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* El motivo por el que una accion del menu esta apagada, debajo de su nombre.
   Se acota en ancho: algunos MSG_* del nucleo son un parrafo entero y el menu
   no puede crecer hasta el pie de la pantalla. */
.documento-accion-motivo {
    max-width: 22rem;
    white-space: normal;
    line-height: 1.25;
}

/* Los campos del dialogo de emision: caja, jornada y forma de pago en una
   rejilla que se apila en el movil. */
.documento-emision-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.documento-emision-importe {
    display: flex;
    align-items: center;
}

/* Una tabla dentro de un dialogo (los clientes del buscador, los resultados de
   una accion en masa) hace scroll DENTRO de su caja: sin esto, un nombre fiscal
   largo saca la barra de scroll de la pagina entera. */
.documento-tabla-envoltorio {
    overflow-x: auto;
    max-height: 24rem;
    overflow-y: auto;
}

/* La fila elegida en el buscador de clientes. Con fondo y no solo con borde,
   porque en una tabla rayada un borde de 1 px no se distingue del rayado. */
.documento-fila-elegida > td {
    background: var(--tentalo-lila-suave, #e7ecea);
    font-weight: 600;
}

/* La barra de acciones EN MASA del diario, encima de la tabla: sale solo cuando
   hay filas marcadas y dice cuantas hay. */
.documento-masa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.documento-masa-cuantas {
    margin-right: 0.5rem;
    font-weight: 600;
}

/* El estado de la orden de «Imprimir en la tienda» dentro de la ficha. */
.documento-orden-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   LA SOLICITUD A LA TIENDA: «Abonar» y «Facturar» desde la central
   (docs\central\abonar-y-facturar-desde-la-central-2026-09-18.md, tanda T2)
   --------------------------------------------------------------------------
   La banda de `EstadoDeLaOperacion.razor`, debajo de la barra de acciones de la
   ficha de una factura. Es hermana de `.documento-orden-estado` de aqui arriba
   -misma fila flexible, mismo hueco- y se separa en una cosa: esta tiene ESTADO
   y por eso el color la posee entera, con una AGUADA de fondo.

   NO ES UNA TARJETA NI LLEVA BANDA LATERAL DE COLOR. Ni canto por los cuatro
   lados, ni sombra, ni `border-left` de acento: el color POSEE la region con su
   aguada, que es como manda aqui (DESIGN.md, «Zonas en vez de tarjetas», y el
   punto 6 de la revision de acabado que fija `AcabadoDelPlanoTests`). Una banda
   lateral de color no es muro -un muro va en tinta, nunca en mostaza- y se
   quito de las tres piezas que la tenian; no vuelve por esta.

   LOS TRES COLORES SON LOS TRES DE ESTADO, y ninguno es la accion: mostaza =
   atencion (la solicitud espera), salvia = al dia (emitido), arcilla = error
   (rechazado o caducado). El morado no entra aqui; el morado es lo que se
   pulsa. El cuarto caso -cancelada- se queda en la tinta neutra: no espera nada
   y tampoco fue un fallo.

   EL COLOR NO ES LA UNICA SENAL (WCAG 1.4.1): el titular DICE el estado con
   todas sus letras -«Emitido», «Rechazado», «Caducado»- y el punto de la
   izquierda solo lo acompana. Quien no distinga la mostaza de la salvia lee lo
   mismo. */
.documento-operacion-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--plano-papel-hondo, #eae6f0);
}

.documento-operacion-punto {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

/* El texto envuelve en una linea propia cuando no cabe: el motivo de un rechazo
   es el MSG_* del nucleo y alguno es un parrafo entero. */
.documento-operacion-texto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 14rem;
}

.documento-operacion-titular {
    font-weight: 600;
}

.documento-operacion-detalle {
    color: var(--plano-tinta-2, #5b4a73);
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Esperando a la tienda: MOSTAZA, que en este sistema es atencion y no error.
   La tinta es la honda (#9c6c12) y no la mostaza clara: esa no llega a 4,5:1
   sobre papel y aqui hay texto, no solo un canto (DESIGN.md, «Colors»). */
.documento-operacion-espera {
    background: var(--plano-mostaza-aguada, rgba(233, 180, 76, 0.18));
    color: var(--plano-mostaza-honda, #9c6c12);
}

/* Emitido: SALVIA, que es «al dia». */
.documento-operacion-hecha {
    background: var(--plano-salvia-aguada, rgba(47, 143, 131, 0.12));
    color: var(--plano-salvia, #23726a);
}

/* Rechazado o caducado: ARCILLA. */
.documento-operacion-fallo {
    background: var(--plano-arcilla-aguada, rgba(217, 96, 74, 0.14));
    color: var(--plano-arcilla-honda, #b03826);
}

/* Cancelado: ni espera ni fallo. Tinta normal sobre papel hondo. */
.documento-operacion-neutra {
    color: var(--plano-tinta-2, #5b4a73);
}

/* El titular y el detalle heredan el color de estado de la banda; el enlace al
   documento emitido NO, porque un enlace se pinta como enlace en todas las
   pantallas y cambiarle el color aqui lo haria irreconocible. */
.documento-operacion-estado .mud-typography {
    color: inherit;
}

.documento-operacion-estado a.mud-link {
    color: var(--plano-morado, #672990);
    font-weight: 600;
}

/* El aviso de «la tienda lleva N min sin conectar» dentro del dialogo de
   emision. Misma mostaza, misma aguada y misma gramatica que la banda de
   arriba, en una sola linea: es un aviso, no un estado, y no corta nada. El
   icono de nube tachada es la senal que no es color. */
.documento-emision-sin-conectar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--plano-mostaza-aguada, rgba(233, 180, 76, 0.18));
    color: var(--plano-mostaza-honda, #9c6c12);
    font-size: 0.875rem;
    line-height: 1.3;
}

/* ==========================================================================
   EL DISEÑADOR DE SALAS (prefijo `salas-`)
   ==========================================================================
   Fase M2 de docs\tpv\diseno-de-salas.md, rediseñado el 2026-09-11 (§9.8 de ese
   documento). Tres columnas —paleta, lienzo y propiedades— que en pantalla
   estrecha pasan a cajones, y un SVG que se dibuja en CENTÍMETROS: todo lo que
   aquí se mide en píxeles es del marco, no del plano.

   LA DIRECCIÓN ES «SALA CLARA, TINTA MORADA» (docs\tpv\diseno-sala-clara.md) y
   el listón lo ponen los editores de planos de Toast, Lightspeed, Square for
   Restaurants y SevenRooms: fondo cálido casi blanco, mesa con relleno suave y
   canto de 1,5 px, sombra corta, nombre en negrita y datos secundarios
   pequeños y grises, adornos con colores neutros que no compiten, y rejilla de
   puntos casi invisible.

   EL CANTO DE 1,5 px NO ESCALA CON EL ZOOM, y por eso todas las figuras llevan
   `vector-effect: non-scaling-stroke`. Sin él, el grosor va en centímetros del
   plano: al 30 % una mesa no tiene borde y al 300 % lo tiene de un dedo. El
   COLOR del canto sí es un atributo de cada figura (sale de su relleno, ver
   DibujoDeSala.CantoDeMesa) y estas reglas lo pisan solo cuando toca —estado,
   selección, error—, que es justo lo que se quiere.

   LOS COLORES DE ESTADO SON LOS DE «SALA CLARA» (§4): morado de marca #672990,
   verde #2f8f5b, ámbar #c98a12, azul #2f6fb5 y rojo #c8382f. El ámbar NO se usa
   para texto —no llega a 4,5:1 sobre blanco—, solo para canto y relleno, que es
   la salvedad que ese documento deja escrita.

   Y ESOS CINCO SIGUEN SIENDO MORADO, VERDE, ÁMBAR, AZUL Y ROJO después del
   rediseño «El plano de sala» (2026-09-17), a propósito: salen de `sala.css`,
   que es una COPIA del original del TPV y que una prueba compara por hash
   (PaletaDeSalaTests). Los siete estados de una mesa tienen que pintarse IGUAL
   en la nube y en la caja, así que el plano de sala del TPV manda aquí y la
   tinta del plano de la central no entra. Lo que sí cambia alrededor —el
   lienzo, los muebles preajustados, las tarjetas— está en esta hoja y ya usa
   las fichas del plano.

   Y DESDE EL 2026-09-12 NO SE ESCRIBEN AQUÍ: son los tokens --sala-* de
   wwwroot\css\sala.css, que es EL MISMO FICHERO que carga el TPV desde la
   biblioteca Táctil (una copia que refresca el objetivo MSBuild
   TentaloCopiarPaletaDeSala y vigila la prueba PaletaDeSalaTests). Los dos
   frentes pintan el mismo FloorPlanDTO y hasta ese encargo lo hacían con dos
   paletas distintas: arriba las mesas libres con relleno suave y «4 plazas» en
   gris, abajo en blanco y con un «4» pelado. La cabecera de sala.css cuenta la
   historia entera y lleva la tabla de tokens.

   Y NINGÚN ESTADO SE DISTINGUE SOLO POR EL COLOR: cocina lista, cuenta pedida,
   reservada y bloqueada llevan además un glifo, y la inactiva un rayado. Es la
   misma regla del sistema de diseño que hace que las insignias lleven texto. */

/* Los tokens del diseñador. Viven aquí y no en :root porque son de esta
   pantalla: el resto del administrador no pinta planos. */
.salas-editor,
.salas-tres-columnas,
.salas-tarjeta,
.salas-vacio {
    --salas-papel: var(--sala-suelo);
    --salas-lienzo: var(--sala-lienzo);
    --salas-canto: var(--sala-suelo-canto);
    --salas-tinta: var(--sala-tinta);
    --salas-tinta-2: #6b6373;
    --salas-marca: var(--tentalo-marca);
    --salas-sombra-1: 0 1px 2px rgba(42, 26, 62, 0.06), 0 1px 3px rgba(42, 26, 62, 0.07);
    --salas-sombra-3: 0 2px 4px rgba(42, 26, 62, 0.08), 0 6px 16px rgba(42, 26, 62, 0.12);
}

/* --- EL EDITOR A PANTALLA (§15 de docs\tpv\diseno-de-salas.md, 2026-09-27) ----
   «Se desaprovecha mucha pantalla, si haces zoom, lo haces dentro del
   rectángulo en el que está». El lienzo vivía en un recuadro de unos 340 px de
   alto en mitad de una página que seguía hacia abajo con el panel de
   propiedades. Ahora, con el editor abierto, EL MARCO MIDE LA VENTANA y no se
   desplaza: la barra, los taburetes y la línea de la central se quedan donde
   están y todo lo que sobra es del editor, que lo reparte en una columna —su
   cabeza, la barra de herramientas y las tres columnas— con el lienzo
   llevándose el alto entero. Las columnas se desplazan por dentro.

   Va con `:has()` y no con una clase puesta desde C# en el : el marco no
   sabe qué pantalla lleva dentro y así no hay nada que quitar al salir. */
.plano-marco:has(.salas-editor) {
    block-size: 100vh;
    block-size: 100dvh;
    min-block-size: 0;
    overflow: hidden;
}

/* EL CUERPO DEL MARCO, ATADO AL ALTO QUE QUEDA (2026-10-06, «el plano no se
   ajusta» en la sala «Barra» de T000010). La barra lateral del rediseño D2
   (hoja-limpia.css) metió entre el marco y el cuerpo una REJILLA,
   `.plano-marco-cuerpo`, con `align-items: start` y la fila a lo que mida su
   contenido. Con eso el cuerpo dejó de medir el alto que sobra y pasó a medir
   lo que mide el editor: la columna más alta —las propiedades, unos 1.370 px—
   estiraba el lienzo, salas.js medía ESE hueco (no el que se ve), la vista
   centraba la sala en él y el marco, con `overflow: hidden`, cortaba lo de
   abajo: hueco gris arriba, sala a media altura y cortada. Y como la hoja del
   `
   monoespaciado con el mismo ancho por número de columnas. Duplicarlo sería
   tener dos verdades sobre cuánto mide un papel de 48 columnas.

   Y NINGÚN ESTADO SE DISTINGUE SOLO POR EL COLOR: el bloque elegido lleva
   además una barra a la izquierda y `aria-pressed`, y un bloque de un tipo
   que esta central no conoce lleva su icono de interrogación además del
   canto punteado. Es la misma regla que hace que las insignias lleven texto. */

/* ==========================================================================
   LA DISPOSICIÓN DEL EDITOR (prefijo `impresion-editor-`)
   ==========================================================================
   Reforma del 2026-09-12. Antes eran tres columnas —paleta, lienzo,
   propiedades— con la VISTA PREVIA DEBAJO DEL LIENZO, y la queja fue exacta:
   «es incómodo tener la vista previa abajo». Y lo era de verdad: un ticket de
   fábrica tiene 120 bloques, la columna del lienzo medía cinco mil píxeles y
   para ver el papel había que bajar hasta el final y volver a subir a cambiar
   una línea. La previa estaba, pero no se veía nunca a la vez que lo que se
   estaba tocando, que es lo único para lo que sirve una vista previa.

   AHORA SON CUATRO PANELES A LA MISMA ALTURA —paleta · lienzo · propiedades ·
   previa— dentro de una caja que ocupa el alto de la ventana, cada uno con SU
   PROPIO SCROLL. El documento se recorre en el panel del lienzo sin mover la
   página, y el papel compuesto está siempre delante.

   EL ALTO ES `100dvh` Y NO `100vh`: en un móvil con la barra del navegador
   plegándose, `vh` deja la última fila debajo del borde de la pantalla. Y se
   le resta la cabecera del administrador con una variable propia, porque el
   alto de esa cabecera lo decide el marco y no este fichero.

   LOS ANCHOS SE ARRASTRAN Y SE RECUERDAN. Tres separadores mueven tres
   variables CSS (`--ancho-paleta`, `--ancho-propiedades`, `--ancho-previa`)
   que `js\impresion.js` escribe y guarda en `localStorage`. El `clamp()` de
   este fichero es el que decide cuánto puede encoger y crecer cada panel: el
   JavaScript solo mueve el número, así que un valor guardado absurdo -de otra
   pantalla, de otro monitor- no puede dejar un panel de tres píxeles.

   POR DEBAJO DE 1400 px NO CABEN CUATRO. La previa deja de ser una columna y
   pasa a compartir la de la derecha con las propiedades en dos pestañas, y
   queda además el botón de «previa flotante», que la abre en un cajón lateral
   SUPERPUESTO y NO MODAL: se sigue editando con la previa delante, que es lo
   que hace falta en un portátil de 1366. Por debajo de 1100 px se apila todo y
   la caja deja de medir el alto de la ventana, porque en un móvil el scroll
   que manda es el de la página.

   «SALA CLARA, TINTA MORADA»: fondo blanco cálido, cantos `--tentalo-borde` y
   el morado solo donde marca algo. */

/* EL CORTE SE MIDE SOBRE EL ESPACIO DE LOS PANELES Y NO SOBRE LA VENTANA, y
   por eso esto es una CONSULTA DE CONTENEDOR y no una media query. El
   administrador tiene una barra lateral de unos 240 px, así que una ventana de
   1440 deja 1.152 px de panel -medido-: decidir con el ancho de la ventana
   habría dejado cuatro columnas donde no caben y un lienzo de 130 px. Con
   `@container` la pregunta es la que importa —«¿cabe una cuarta columna
   AQUÍ?»— y el editor se comporta igual si mañana la barra lateral se pliega.

   El contenedor es `.impresion-editor` y no `.impresion-editor-paneles` porque
   una consulta de contenedor NO puede cambiar los estilos del propio
   contenedor, y lo que hay que cambiar es su `grid-template-columns`. */
/* EL EDITOR SE SALE DEL ANCHO MÁXIMO DEL ADMINISTRADOR. Todas las pantallas del
   administrador viven dentro del MudContainer del AdminLayout, que está en
   MaxWidth.Large: 1.280 px. Para una ficha con dos columnas de campos eso es
   justo lo que se quiere -una línea de texto de dos mil píxeles no se lee-, pero
   este editor son CUATRO PANELES y el ancho es la funcionalidad: con el tope
   puesto, un monitor de 1920 le dejaba al lienzo 296 px, menos que en uno de
   1440, y la pantalla no mejoraba al comprar monitor. Aquí el tope se quita, y
   solo aquí: el `:has` acota la excepción al contenedor que lleva DENTRO el
   editor, sin tocar el layout ni añadirle a la página un parámetro que las otras
   cuarenta pantallas tendrían que ignorar. */
.mud-container:has(> .impresion-editor) {
    max-width: none;
}

.impresion-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    container-type: inline-size;
    container-name: editor;
    /* La cabecera del administrador más el aire de la página. Es una variable y
       no un número suelto para poder afinarla en un solo sitio. */
    --impresion-editor-alto-cabecera: 8.5rem;
    height: calc(100dvh - var(--impresion-editor-alto-cabecera));
    min-height: 34rem;
}

.impresion-editor-paneles {
    /* Los anchos por omisión son los MÍNIMOS CÓMODOS y no los holgados: a partir
       de aquí el lienzo se queda todo lo que sobre, que es lo que hay que ver
       ancho en un monitor grande, y quien quiera más paleta la arrastra. */
    --ancho-paleta: 15rem;
    --ancho-propiedades: 19rem;
    --ancho-previa: 23rem;
    --impresion-editor-separador: 0.5rem;
    display: grid;
    grid-template-columns:
        clamp(11rem, var(--ancho-paleta), 26rem)
        var(--impresion-editor-separador)
        minmax(14rem, 1fr)
        var(--impresion-editor-separador)
        clamp(15rem, var(--ancho-propiedades), 34rem)
        var(--impresion-editor-separador)
        clamp(16rem, var(--ancho-previa), 44rem);
    flex: 1 1 auto;
    min-height: 0; /* sin esto un hijo con scroll estira el grid en vez de desplazarse */
}

/* --- Un panel ------------------------------------------------------------- */
.impresion-editor-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #ffffff;
    border: 1px solid var(--tentalo-borde);
    border-radius: 0.5rem;
    overflow: hidden;
}

.impresion-editor-panel-cabecera {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--tentalo-tinta-suave);
    /* Blanco cálido, la mitad de camino entre el blanco del panel y el canto:
       es lo que separa la cabecera del cuerpo sin meter otra línea. */
    background: #f2f5f3;
    border-bottom: 1px solid var(--tentalo-borde);
}

.impresion-editor-panel-cabecera .mud-icon-button {
    min-width: 2rem;
    min-height: 2rem;
}

.impresion-editor-panel-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* Nada queda aplastado: un panel con dos campos sigue teniendo cuerpo. */
    padding: 0;
}

.impresion-editor-panel-cuenta {
    margin-left: auto;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* --- Los separadores ------------------------------------------------------ */
/* Ocho píxeles de zona sensible con una línea de uno en medio: la zona de
   agarre tiene que ser cómoda y la línea tiene que ser fina. */
.impresion-editor-separador {
    position: relative;
    padding: 0;
    cursor: col-resize;
    background: transparent;
    border: 0;
    touch-action: none;
}

.impresion-editor-separador::after {
    content: "";
    position: absolute;
    inset: 0.25rem 50%;
    width: 1px;
    background: var(--tentalo-borde);
    transition: background-color 120ms ease, width 120ms ease;
}

.impresion-editor-separador:hover::after,
.impresion-editor-separador-activo::after {
    width: 3px;
    inset-inline: calc(50% - 1px);
    background: var(--tentalo-marca);
}

.impresion-editor-separador:focus-visible {
    outline: 2px solid var(--tentalo-marca);
    outline-offset: -2px;
    border-radius: 0.25rem;
}

/* --- La cabecera del editor ----------------------------------------------- */
.impresion-editor-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border: 1px solid var(--tentalo-borde);
    border-radius: 0.5rem;
}

/* Con qué se compone la vista previa (tanda T2 de «todo a Diseño»): el local que
   emite, la caja y la muestra o su último documento real. Una fila bajo la barra. */
.impresion-editor-contexto {
    flex: 0 0 auto;
    padding: 0.1rem 0.75rem;
}

.impresion-editor-contexto-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.impresion-editor-contexto-campos > div {
    flex: 0 1 16rem;
    min-width: 10rem;
}

/* El NOMBRE se edita EN LÍNEA y en el sitio donde se lee, no en un campo del
   panel de la derecha: es el título de la pantalla. Parece un título hasta que
   se pulsa, y entonces enseña su canto. */
.impresion-editor-nombre {
    flex: 1 1 14rem;
    min-width: 8rem;
    max-width: 26rem;
    padding: 0.2rem 0.4rem;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--tentalo-tinta);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.3rem;
}

.impresion-editor-nombre:hover {
    border-color: var(--tentalo-borde);
}

.impresion-editor-nombre:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--tentalo-marca);
    box-shadow: 0 0 0 3px rgba(103, 41, 144, 0.14);
}

.impresion-editor-chips {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* Los grupos de acciones, separados por un canto fino: deshacer y rehacer
   juntos, las herramientas del documento juntas, y guardar al final y solo. */
.impresion-editor-acciones {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.impresion-editor-acciones + .impresion-editor-acciones {
    padding-left: 0.4rem;
    border-left: 1px solid var(--tentalo-borde);
}

.impresion-editor-acciones-final {
    margin-left: auto;
}

/* La regla 3 del §6 de docs\central\diseno-web.md: 48 px de caja de toque, sin
   tocar el dibujo del icono. */
.impresion-editor-acciones .mud-icon-button {
    min-width: var(--tentalo-toque);
    min-height: var(--tentalo-toque);
}

/* --- Las pestañas de la columna estrecha ---------------------------------- */
/* Por debajo de 1400 px las propiedades y la previa comparten columna. Las
   pestañas se pintan SIEMPRE en el árbol -no se crean al estrecharse- para que
   el estado de la pestaña elegida no dependa del ancho de la ventana. */
/* LAS DOS CARAS DEL PANEL DE LA DERECHA. Por omisión -o sea, con la previa en su
   propia columna- este panel es SIEMPRE el de propiedades: se ve su cabecera y las
   pestañas sobran. Por debajo del corte se cambian los papeles. Lo decide el CSS y
   no C#, que es lo que permite que el estado de la pestaña no dependa del ancho. */
.impresion-editor-solo-estrecho {
    display: none;
}

.impresion-editor-pestanas {
    display: none;
    flex: 0 0 auto;
    gap: 0.25rem;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--tentalo-borde);
}

.impresion-editor-pestana {
    flex: 1 1 0;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tentalo-tinta-suave);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.3rem;
}

.impresion-editor-pestana:hover {
    background: rgba(103, 41, 144, 0.05);
}

.impresion-editor-pestana-activa {
    color: var(--tentalo-marca);
    background: rgba(103, 41, 144, 0.1);
    border-color: rgba(103, 41, 144, 0.3);
}

.impresion-editor-pestana:focus-visible {
    outline: 2px solid var(--tentalo-marca);
    outline-offset: 1px;
}

/* El cajón de la previa flotante. NO ES MODAL a propósito: se sigue editando
   con la previa delante, que es justo para lo que se abre. */
.impresion-editor-cajon .mud-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- Los cortes ----------------------------------------------------------- */
/* 1.180 px DE PANEL: por debajo, la previa deja de ser columna y se va a las
   pestañas de la derecha, con el botón de «previa flotante» como salida. El
   número sale de sumar: paleta 15 rem + propiedades 19 rem + previa 23 rem +
   tres separadores = 57,5 rem ≈ 920 px, más los 16 rem (256 px) que necesita
   una fila del lienzo con su icono, su texto y sus cuatro asas. Con la barra
   lateral del administrador puesta y sin el tope del contenedor, una ventana de
   1440 da 1.152 px de panel (queda con pestañas) y una de 1920, 1.632 (cuatro
   columnas). Medido con Playwright sobre el volcado; ver el §11. */
@container editor (max-width: 1180px) {
    .impresion-editor-paneles {
        grid-template-columns:
            clamp(11rem, var(--ancho-paleta), 26rem)
            var(--impresion-editor-separador)
            minmax(14rem, 1fr)
            var(--impresion-editor-separador)
            clamp(15rem, var(--ancho-propiedades), 34rem);
    }

    .impresion-editor-columna-previa,
    .impresion-editor-separador-previa {
        display: none;
    }

    /* Aquí la previa NO tiene columna: el panel de la derecha pasa a ser de dos
       caras y las pestañas sustituyen a su cabecera. */
    .impresion-editor-pestanas {
        display: flex;
    }

    .impresion-editor-solo-ancho {
        display: none;
    }

    .impresion-editor-solo-estrecho {
        display: block;
    }
}

/* 820 px de panel: ya no caben ni tres columnas y se apila todo. */
@container editor (max-width: 820px) {
    .impresion-editor-paneles {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .impresion-editor-separador {
        display: none;
    }

    .impresion-editor-panel-cuerpo {
        max-height: 32rem;
    }
}

/* Y LA ALTURA SÍ ES COSA DE LA VENTANA, no del panel: lo que se decide aquí es
   si el desplazamiento que manda es el de cada panel o el de la página, y en un
   móvil manda el de la página. (Va en una media query también porque una
   consulta de contenedor no puede cambiar los estilos de su propio contenedor.)
   Es el mismo criterio que el editor de salas. */
@media (max-width: 1100px) {
    .impresion-editor {
        height: auto;
        min-height: 0;
    }
}

/* --- La paleta ------------------------------------------------------------ */
.impresion-diseno-paleta {
    background: #ffffff;
    border: 1px solid var(--tentalo-borde);
    border-radius: 0.5rem;
    overflow: hidden;
}

.impresion-diseno-paleta-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.35rem;
}

/* EL BUSCADOR DE CAMPOS. El catálogo de un ticket son más de doscientos campos
   repartidos en once grupos plegados: encontrar «Verifactu» abriéndolos de uno
   en uno es exactamente lo que un buscador ahorra. Va pegado arriba del panel y
   no dentro de un grupo, porque busca en todos. */
.impresion-diseno-paleta-buscador {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.4rem 0.5rem;
    background: #ffffff;
    border-bottom: 1px solid var(--tentalo-borde);
}

.impresion-diseno-paleta-buscador .campo {
    margin: 0;
}

/* Los resultados de la búsqueda salen PLANOS y con su grupo delante: buscando
   se ha dejado de pensar en grupos, y saber de cuál sale cada campo es lo que
   evita insertar «Total» del documento creyendo que es el de una línea. */
.impresion-diseno-paleta-resultados {
    padding: 0.35rem 0.5rem 0.6rem;
}

.impresion-diseno-campo-grupo {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tentalo-tinta-suave);
}

.impresion-diseno-paleta-sin-resultados {
    padding: 0.75rem 0.25rem;
    font-size: 0.82rem;
    color: var(--tentalo-tinta-suave);
}

.impresion-diseno-pieza {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--tentalo-toque);
    padding: 0.35rem 0.5rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--tentalo-tinta);
    background: #ffffff;
    border: 1px solid var(--tentalo-borde);
    border-radius: 0.4rem;
}

.impresion-diseno-pieza:hover {
    border-color: var(--tentalo-marca);
    background: rgba(103, 41, 144, 0.06);
}

.impresion-diseno-pieza-nombre {
    font-size: 0.8rem;
    line-height: 1.15;
}

.impresion-diseno-campos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.impresion-diseno-campo {
    margin: 0;
    padding: 0;
}

.impresion-diseno-campo-boton {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    width: 100%;
    min-height: 2rem;
    padding: 0.2rem 0.35rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--tentalo-tinta);
    background: transparent;
    border: 0;
    border-radius: 0.3rem;
}

.impresion-diseno-campo-boton:hover {
    background: rgba(103, 41, 144, 0.08);
}

.impresion-diseno-campo-nombre {
    font-size: 0.8rem;
}

/* El valor de muestra, en gris y sin robarle sitio al nombre del campo. */
.impresion-diseno-campo-muestra {
    margin-left: auto;
    max-width: 55%;
    overflow: hidden;
    font-size: 0.72rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--tentalo-tinta-suave);
}

/* --- El desplegable que elige QUÉ CAMPO se imprime (2026-09-18) ----------- */
/* Una fila de la lista es la GRAMÁTICA DE FILA del plano de sala: lo principal
   —el nombre legible— a la izquierda, y las secundarias —la ruta técnica y el
   valor de ejemplo— en tinta suave. La ruta NO se esconde nunca: es lo que se
   guarda en el diseño. Encima de la primera fila de cada grupo va el rótulo del
   grupo, que aquí se pinta a mano porque MudAutocomplete no agrupa (ver
   Components\Impresion\SelectorDeCampo.razor). */
.impresion-campo-opcion {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    width: 100%;
}

.impresion-campo-opcion-grupo {
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tentalo-tinta-suave);
}

.impresion-campo-opcion-cuerpo {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.impresion-campo-opcion-nombre {
    overflow: hidden;
    font-size: 0.85rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* La ruta técnica, a la derecha y en monoespaciada: es un identificador y se
   lee mejor con la misma letra con la que sale en el JSON del diseño. */
.impresion-campo-opcion-ruta {
    margin-left: auto;
    overflow: hidden;
    flex-shrink: 0;
    max-width: 55%;
    font-family: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.7rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--tentalo-tinta-suave);
}

.impresion-campo-opcion-ejemplo {
    overflow: hidden;
    font-size: 0.72rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--tentalo-tinta-suave);
}

/* El campo y su aviso de «no está en el catálogo» forman un bloque: el aviso
   tiene que quedar pegado al campo y no al de abajo. */
.impresion-diseno-campo-selector {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.impresion-diseno-campo-coleccion {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem;
}

.impresion-diseno-campo-hijos {
    margin: 0 0 0.35rem 1.1rem;
    padding: 0;
    list-style: none;
    font-size: 0.72rem;
    color: var(--tentalo-tinta-suave);
}

/* --- El lienzo ------------------------------------------------------------ */
.impresion-diseno-lienzo-marco {
    background: #ffffff;
    border: 1px solid var(--tentalo-borde);
    border-radius: 0.5rem;
    overflow: hidden;
}

.impresion-diseno-lienzo-barra {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--tentalo-tinta-suave);
    border-bottom: 1px solid var(--tentalo-borde);
}

.impresion-diseno-lienzo-cuenta {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* El PAPEL. El ancho se mide en caracteres monoespaciados («ch»), que es lo que
   hace que un diseño de 48 columnas se vea más ancho que uno de 42 sin tener
   que calcular milímetros. El `min()` es la regla 2 del sistema de diseño: en
   375 px una caja fija se saldría del panel. */
/* EL PAPEL PARECE PAPEL: sombra baja, canto continuo y un poco de aire por
   fuera para que se vea que hay un borde y dónde se acaba el rollo. El canto
   punteado de antes lo hacía parecer un contenedor vacío de un maquetador. */
.impresion-diseno-papel {
    padding: 0.6rem 0.5rem;
    margin: 0.9rem auto;
    background: #ffffff;
    border: 1px solid var(--tentalo-borde);
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(42, 26, 62, 0.06), 0 6px 18px rgba(42, 26, 62, 0.07);
    overflow-x: auto;
}

.impresion-diseno-papel:focus-visible {
    outline: 2px solid var(--tentalo-marca);
    outline-offset: 2px;
}

.impresion-diseno-papel-42 { width: min(100%, 44ch); }

.impresion-diseno-papel-48 { width: min(100%, 50ch); }

/* EL ESTADO VACÍO no es una frase gris en medio de la nada: dice qué hay que
   hacer y con qué, y deja sitio para el icono. Es el mismo patrón que el estado
   vacío de las salas. */
.impresion-diseno-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 2.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    color: var(--tentalo-tinta-suave);
}

.impresion-diseno-vacio-icono {
    color: rgba(42, 26, 62, 0.35);
}

.impresion-diseno-vacio-titulo {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tentalo-tinta);
}

.impresion-diseno-filas {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Una fila por bloque. La sangría sale del NIVEL del recorrido plano, que el
   componente pasa en una variable CSS: así un grupo condicional y sus hijos se
   leen como lo que son sin un árbol de verdad. */
.impresion-diseno-fila {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.15rem 0.35rem;
    padding-left: calc(0.35rem + (var(--impresion-diseno-nivel, 0) * 1.25rem));
    font-family: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    cursor: pointer;
    background: var(--plano-hoja);
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.impresion-diseno-fila:hover {
    background: rgba(103, 41, 144, 0.05);
}

/* EL BLOQUE ELEGIDO: ANILLO MORADO Y AGUADA, y su `aria-pressed`; ningún estado
   se distingue solo por el color. El anillo va con `box-shadow` y no con
   `border` a propósito -un canto de dos píxeles movería la fila un píxel al
   elegirla y la lista entera daría un salto-.

   LA BARRA DE LA IZQUIERDA SE CAE (tanda 4): eran 3 px de morado en un solo
   lado, o sea la «raya de acento» que este rediseño quita de todas partes, y
   además competía con el anillo, que ya rodea la fila entera. La aguada dice lo
   mismo poseyendo la región, que es como manda el color aquí. */
.impresion-diseno-fila-elegida {
    border-color: transparent;
    background: rgba(103, 41, 144, 0.09);
    box-shadow: 0 0 0 2px var(--tentalo-marca);
}

.impresion-diseno-fila:focus-visible {
    outline: 2px solid var(--tentalo-marca);
    outline-offset: 1px;
}

/* Un bloque de un tipo que esta central no conoce: se conserva verbatim y no se
   puede editar. El canto punteado lo dice sin necesidad de leer el panel. */
.impresion-diseno-fila-desconocida {
    border-style: dashed;
    border-color: var(--tentalo-borde);
}

.impresion-diseno-fila-icono {
    flex: 0 0 auto;
    color: var(--tentalo-marca);
}

.impresion-diseno-fila-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Las asas de la fila: se ven siempre en pantalla táctil y al pasar por encima
   en escritorio. Nunca desaparecen del árbol -son la vía accesible-, solo
   pierden opacidad. */
.impresion-diseno-fila-asas {
    display: flex;
    flex: 0 0 auto;
    gap: 0;
    opacity: 0.35;
}

.impresion-diseno-fila:hover .impresion-diseno-fila-asas,
.impresion-diseno-fila-elegida .impresion-diseno-fila-asas,
.impresion-diseno-fila-asas:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .impresion-diseno-fila-asas {
        opacity: 1;
    }
}

/* --- El lienzo ABSOLUTO: etiqueta y página (fase P4) ---------------------- */

/* El papel se mide en MILÍMETROS DE CSS, que son 96/25.4 px por definición del
   estándar. Así una etiqueta de 57 × 32 mm mide en pantalla lo que mide en el
   rollo y no hay ningún factor de escala que mantener a mano entre este fichero
   y el C#; LienzoAbsoluto.PX_POR_MM es esa misma constante y es todo lo que
   hace falta para pasar el arrastre de píxeles a milímetros.

   Un A4 son 210 mm ≈ 794 px, que no caben en la columna central por debajo de
   1200 px: el papel va dentro de un contenedor que se desplaza en horizontal,
   que es la regla 2 del sistema de diseño (nada se sale de su panel). */
.impresion-diseno-lienzo-desplazable {
    padding: 0.75rem;
    overflow: auto;
}

.impresion-diseno-lienzo-mm {
    position: relative;
    margin: 0 auto;
    background-color: #ffffff;
    /* La rejilla: una línea fina cada milímetro y una marcada cada centímetro.
       Cuatro gradientes repetidos y ni un    monoespaciado un fondo sólido taparía el texto y una caja movería las
   columnas, y en una vista previa las columnas son el dato. */
.impresion-diseno-previa-bloque {
    display: block;
    background: rgba(42, 26, 62, 0.1);
    box-shadow: inset 3px 0 0 var(--tentalo-marca);
    border-radius: 0 0.15rem 0.15rem 0;
}

/* La vista previa de una ETIQUETA: el SVG que compone el núcleo, dentro de un
    con el papel de fondo. Se le pone un cuadro para que se vea el borde de
   la etiqueta aunque el SVG sea casi todo blanco. */
.impresion-diseno-previa-etiqueta {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--tentalo-borde);
    border-radius: 0.15rem;
}

/* La vista previa de una PÁGINA: el visor de PDF del navegador. El alto es fijo
   porque un