/* =====================================================================================================
   ANÁLISIS, LA PLANTILLA DE LOS SIETE APARTADOS (rediseño D4, docs/central/plan-d4-analisis-2026-10-05.md; diseño en
   docs/central/rediseno-central-2026-10-04.md §3 y §5.2).

   SOLO CONSUME LAS FICHAS --limpia-* DE hoja-limpia.css: ni un color escrito aquí, así que el claro y el oscuro salen
   solos (PiezasDeAnalisisTests lo comprueba). Va en index.html justo ANTES de hoja-limpia.css, que sigue siendo la
   última. El morado, solo en lo que se pulsa y lo seleccionado (pastillas elegidas, enlaces de la tabla).
   ===================================================================================================== */

.analisis {
    display: grid;
    gap: 16px;
    min-inline-size: 0;
}

/* --- la barra común ---------------------------------------------------------------------------------- */

.analisis-barra {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
}

@media (min-width: 768px) {
    .analisis-barra {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
    }
}

.analisis-barra-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-inline-size: 0;
}

.analisis-pastillas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.analisis-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--limpia-tinta-2);
}

.analisis-pastilla {
    min-block-size: 36px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    color: var(--limpia-tinta);
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde-control);
    /* No un óvalo (repaso del 2026-10-06): el radio de control de la hoja limpia, 8 px, que es también el de la tecla
       de las pastillas de periodo (DESIGN.md «Shapes»). Esta hoja solo usa fichas --limpia-*. */
    border-radius: var(--limpia-radio-control);
    cursor: pointer;
}

.analisis-pastilla:hover {
    background: var(--limpia-hover);
}

.analisis-pastilla[aria-pressed="true"],
.analisis-pastilla[aria-checked="true"] {
    color: var(--limpia-sobre-morado);
    background: var(--limpia-morado);
    border-color: var(--limpia-morado);
}

.analisis-pastilla:focus-visible,
.analisis-detalles a:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

/* Con el dedo (tableta y teléfono), 44 px: la barra común medía 36 también ahí (integración de los pinchos, 2026-11-07, punto 9 de la lista;
   como el «Cambiar» del selector de familias de la 1.0.129: 36 con ratón y 44 con el dedo). */
@media (pointer: coarse) {
    .analisis-pastilla,
    .analisis-fecha input {
        min-block-size: 44px;
    }
}

.analisis-rango-comparado {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--limpia-tinta-2);
}

.analisis-fechas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.analisis-fecha {
    display: grid;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--limpia-tinta-2);
}

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

.analisis-franja {
    margin: 0;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--limpia-aviso-tinta);
    background: var(--limpia-aviso-fondo);
    border-radius: var(--limpia-radio-control);
}

/* --- los detalles del apartado y lo abierto ahora ---------------------------------------------------- */

.analisis-detalles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
}

.analisis-detalles a {
    color: var(--limpia-morado);
}

.analisis-ahora {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.analisis-ahora li {
    padding: 6px 10px;
    background: var(--limpia-neutro-fondo);
    color: var(--limpia-neutro-tinta);
    border-radius: var(--limpia-radio-control);
}

/* --- las cifras clave -------------------------------------------------------------------------------- */

.analisis-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 12px;
}

.analisis-cifra {
    display: grid;
    /* Las filas, arriba: sin esto la rejilla reparte el alto que sobra entre sus filas y la cifra de una tarjeta sin
       línea secundaria («Ticket medio» en Horas) quedaba unos 7 px más baja que la de sus vecinas. */
    align-content: start;
    gap: 4px;
    min-block-size: 96px;
    padding: 14px 16px;
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
}

.analisis-cifra-etiqueta {
    font-size: 12px;
    font-weight: 600;
    color: var(--limpia-tinta-2);
}

.analisis-cifra-valor {
    font-size: 26px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--limpia-tinta);
}

.analisis-cifra-nota,
.analisis-contra {
    font-size: 12px;
    color: var(--limpia-tinta-3);
}

.analisis-cifra-variacion {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.analisis-sentido-bien {
    color: var(--limpia-bien-tinta);
}

.analisis-sentido-mal {
    color: var(--limpia-error-tinta);
}

.analisis-sentido-neutro {
    color: var(--limpia-tinta-2);
}

/* --- el gráfico y la tabla --------------------------------------------------------------------------- */

.analisis-grafico,
.analisis-tabla {
    min-inline-size: 0;
    padding: 14px 16px;
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
}

/* EL MAPA DE CALOR CON LOS DÍAS ENTEROS: el API los manda como «Miércoles» y no «Mié», y la columna de rótulos de app.css
   mide 2,5rem: «Miércoles» y «Domingo» se montaban sobre la primera columna de celdas (capturas de «Horas y días» a 390 y
   1024 px). Aquí la columna mide lo que su rótulo más largo; las celdas ceden ese sitio (el tope de ancho es el de app.css,
   que se escribe con su ficha --grafico-columnas, y esta hoja solo consume fichas --limpia-*). */
.analisis-grafico .grafico-calor-rejilla {
    grid-template-columns: max-content minmax(0, 1fr);
}

/* LOS DÍAS DE LAS LÍNEAS EN UNA CAJA ESTRECHA, uno de cada dos de los que ya rotula el componente (como las horas del
   mapa de calor en app.css): dieciséis días son ocho rótulos de «13 sep», 300 px de texto en los 285 de un teléfono, y se
   montaban (capturas de «Ventas» a 390 px). */
.analisis-grafico {
    container: analisis-grafico / inline-size;
}

@container analisis-grafico (max-width: 36rem) {
    .analisis-grafico[data-tipo="lineas"] .grafico-eje-x span:nth-child(even) {
        visibility: hidden;
    }
}

.analisis-titulo {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 650;
    color: var(--limpia-tinta);
}

.analisis-tabla-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-block-end: 8px;
}

.analisis-tabla-cabecera .analisis-titulo {
    margin: 0;
    flex: 1 1 auto;
}

.analisis-subir,
.analisis-exportar,
.analisis-tabla-hoja tbody a {
    color: var(--limpia-morado);
}

.analisis-filas {
    font-size: 12px;
    color: var(--limpia-tinta-3);
}

.analisis-tabla-caja {
    overflow-x: auto;
}

.analisis-tabla-hoja {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.analisis-tabla-hoja thead th {
    position: sticky;
    inset-block-start: 0;
    background: var(--limpia-cabecera);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--limpia-tinta-2);
    text-align: start;
    white-space: nowrap;
}

/* Los botones que ordenan son los .crud-orden de la hoja limpia (con su flecha .crud-orden-flecha): sin estilo aquí. */

.analisis-tabla-hoja th,
.analisis-tabla-hoja td {
    block-size: var(--limpia-fila);
    padding: 0 10px;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.analisis-tabla-hoja tbody th {
    font-weight: 420;
    text-align: start;
}

.analisis-tabla-hoja tbody tr:hover {
    background: var(--limpia-hover);
}

.analisis-tabla-hoja tfoot th,
.analisis-tabla-hoja tfoot td {
    font-weight: 650;
    border-block-start: 1px solid var(--limpia-borde);
}

/* «Total», al principio como los nombres de las filas (un th sin text-align sale centrado). Solo el th: las cifras del
   pie siguen a la derecha (.analisis-numero). */
.analisis-tabla-hoja tfoot th {
    text-align: start;
}

.analisis-numero {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.analisis-tabla-hoja thead th.analisis-numero {
    text-align: end;
}

/* LA CABECERA FIJA, como la lista de la hoja limpia (.crud-lista .crud-tabla): un `sticky` se pega dentro de su
   contenedor con desplazamiento, y la caja lo es (se desplaza a lo ancho); sin alto máximo, la cabecera se iría con la
   página. Desde 720 px la caja tiene alto propio y se desplaza dentro; en el móvil, la tabla corre con la página. */
@media (min-width: 720px) {
    .analisis-tabla-caja {
        overflow: auto;
        max-block-size: max(24rem, calc(100dvh - 15rem));
    }

    .analisis-tabla-hoja thead th {
        z-index: 1;
    }
}

/* --- sin datos: una frase en su sitio, nunca una hoja en blanco ------------------------------------- */

.analisis-vacio {
    display: grid;
    place-items: center;
    min-block-size: 8rem;
    margin: 0;
    padding: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--limpia-tinta-2);
    border: 1.5px dashed var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
}

.analisis-cifras > .analisis-vacio {
    grid-column: 1 / -1;
}

/* --- las esperas ------------------------------------------------------------------------------------ */

.analisis-esqueleto {
    background: var(--limpia-neutro-fondo);
    border-radius: var(--limpia-radio-control);
}

.analisis-esqueleto-grafico {
    block-size: 240px;
}

.analisis-esqueleto-fila {
    block-size: var(--limpia-fila);
    margin-block-end: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .analisis-esqueleto {
        animation: analisis-latido 1.4s ease-in-out infinite;
    }
}

@keyframes analisis-latido {
    50% {
        opacity: 0.55;
    }
}

/* --- un listado filtrado por un empleado, un cliente o una zona (AdminAnaliticaListado) -------------- */

.admin-listado-solo {
    margin: 0;
    font-size: 13px;
    color: var(--limpia-tinta-2);
}

.admin-listado-solo a {
    color: var(--limpia-morado);
}

/* --- «A medida»: el tirador de la pregunta en el teléfono (AdminAnaliticaExplorar) ---------------------
   Las pastillas del tirador desplazaban en horizontal (`overflow-x: auto` de app.css) DENTRO de un <button>: una región
   que desplaza y a la que no se llega con el teclado (axe, `scrollable-region-focusable`, capturas de «A medida» a
   390 px), y no se le puede dar foco sin meter algo pulsable dentro de otro. No hace falta que desplacen: el botón abre
   la hoja con la pregunta entera. Se recortan; la máscara y las sombras de app.css siguen diciendo que hay más. */

.admin-explorador-abrir .admin-explorador-abrir-pastillas {
    overflow-x: hidden;
}

/* En «A medida» la barra común no va dentro de la rejilla de `.analisis` (que separa 16 px) sino justo encima de la banda
   de acciones del Explorador: sin esto «Excel» tocaba el borde de la barra (capturas de «A medida» a 390 y 1600 px). */
.analisis-barra + .admin-acciones-de-pagina {
    margin-block-start: 16px;
}

/* --- el informe de anulaciones (AdminAnalisisAnulaciones, 2026-10-16) ------------------------------------------------------
   Solo fichas --limpia-*: claro y oscuro salen solos. Las etiquetas de riesgo llevan SIEMPRE su texto («Tras preparar»), así que
   el color no es lo único que lo dice (WCAG 1.4.1). Rojo = tras preparar; ámbar = tras imprimir; relleno rojo = tras cobrar
   (crítico); morado claro = tras enviar a cocina; verde = antes de cocina. */

.anul-cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-block: 12px;
}

@media (min-width: 720px) {
    .anul-cifras {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .anul-cifras {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.anul-cifra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 44px;
    padding: 8px 10px;
    text-align: left;
    font: inherit;
    color: var(--limpia-tinta);
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-inline-start-width: 4px;
    border-radius: var(--limpia-radio-control);
    cursor: pointer;
}

.anul-cifra:hover {
    background: var(--limpia-hover);
}

.anul-cifra:focus-visible,
.anul-solo-peligrosas:focus-visible,
.anul-enlace:focus-visible,
.anul-quitar:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

.anul-cifra--activa {
    background: var(--limpia-morado-aguada);
    border-color: var(--limpia-morado);
}

.anul-cifra--neutro { border-inline-start-color: var(--limpia-borde-control); }
.anul-cifra--peligro { border-inline-start-color: var(--limpia-error-tinta); }
.anul-cifra--aviso { border-inline-start-color: var(--limpia-aviso-tinta); }
.anul-cifra--critico { border-inline-start-color: var(--limpia-error-tinta); border-inline-start-width: 8px; }
.anul-cifra--alto { border-inline-start-color: var(--limpia-morado); }
.anul-cifra--bajo { border-inline-start-color: var(--limpia-bien-tinta); }

.anul-cifra-nombre {
    font-size: 12px;
    color: var(--limpia-tinta-2);
}

.anul-cifra-importe {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.anul-cifra-numero {
    font-size: 12px;
    color: var(--limpia-tinta-3);
}

.anul-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin-block-end: 12px;
}

.anul-solo-peligrosas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    font: inherit;
    font-weight: 600;
    color: var(--limpia-error-tinta);
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-error-tinta);
    border-radius: var(--limpia-radio-control);
    cursor: pointer;
}

.anul-solo-peligrosas--activo {
    color: var(--limpia-hoja);
    background: var(--limpia-error-tinta);
}

.anul-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 12px;
    color: var(--limpia-tinta-2);
}

.anul-campo select {
    min-height: 44px;
    max-width: 14rem;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: var(--limpia-tinta);
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
}

.anul-quitar,
.anul-enlace {
    min-height: 44px;
    padding: 0 4px;
    font: inherit;
    color: var(--limpia-morado);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.anul-enlace {
    min-height: 32px;
    text-align: left;
}

.anul-bloque {
    margin-block: 16px;
    padding: 12px;
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
}

.anul-rotulo {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--limpia-tinta);
}

.anul-rotulo-orden {
    font-weight: 400;
    font-size: 13px;
    color: var(--limpia-tinta-3);
}

.anul-tabla-caja {
    overflow-x: auto;
}

.anul-fila-activa {
    background: var(--limpia-morado-aguada);
}

.anul-cuenta--peligro {
    font-weight: 600;
    color: var(--limpia-error-tinta);
}

.anul-cero {
    color: var(--limpia-tinta-3);
}

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

.anul-donde,
.anul-estaba,
.anul-autorizo {
    display: block;
    font-size: 12px;
    color: var(--limpia-tinta-2);
}

.anul-importe {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.anul-cuando {
    white-space: nowrap;
}

.anul-motivo {
    max-width: 16rem;
}

.anul-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-end: 2px;
}

.anul-etiqueta {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    border-radius: 999px;
}

.anul-etiqueta--peligro { color: var(--limpia-error-tinta); background: var(--limpia-error-fondo); }
.anul-etiqueta--aviso { color: var(--limpia-aviso-tinta); background: var(--limpia-aviso-fondo); }
.anul-etiqueta--critico { color: var(--limpia-hoja); background: var(--limpia-error-tinta); }
.anul-etiqueta--alto { color: var(--limpia-morado); background: var(--limpia-morado-aguada); }
.anul-etiqueta--bajo { color: var(--limpia-bien-tinta); background: var(--limpia-bien-fondo); }

.anul-vacio,
.anul-cargando {
    margin: 8px 0;
    color: var(--limpia-tinta-2);
}

.anul-nota {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--limpia-tinta-3);
}

.anul-nota a {
    color: var(--limpia-morado);
}

/* LAS TARJETAS DEL TELÉFONO (hasta 720 px): una por anulación, con el importe arriba a la derecha y las etiquetas debajo del qué. */
.anul-tarjetas {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.anul-tarjeta {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--limpia-borde);
    border-inline-start-width: 4px;
    border-radius: var(--limpia-radio-control);
    background: var(--limpia-hoja);
}

.anul-tarjeta--alto { border-inline-start-color: var(--limpia-aviso-tinta); }
.anul-tarjeta--critico { border-inline-start-color: var(--limpia-error-tinta); }
.anul-tarjeta--bajo { border-inline-start-color: var(--limpia-bien-tinta); }

.anul-tarjeta-cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.anul-tarjeta-cabeza .anul-que {
    min-width: 0;
    overflow-wrap: anywhere;
}

.anul-tarjeta-datos {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    margin: 0;
    font-size: 13px;
}

.anul-tarjeta-datos dt {
    color: var(--limpia-tinta-3);
}

.anul-tarjeta-datos dd {
    margin: 0;
    color: var(--limpia-tinta);
    overflow-wrap: anywhere;
}

.anul-tarjeta-ticket {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--limpia-morado);
}

.anul-solo-estrecho {
    display: none;
}

@media (max-width: 719.98px) {
    .anul-solo-ancho {
        display: none;
    }

    .anul-solo-estrecho {
        display: grid;
    }

    .anul-campo {
        flex: 1 1 calc(50% - 6px);
    }

    .anul-campo select {
        max-width: none;
        width: 100%;
    }

    /* El resumen por empleado, en tarjetas de dos columnas: el nombre arriba y las cifras con su rótulo. */
    .anul-empleados thead {
        display: none;
    }

    .anul-empleados,
    .anul-empleados tbody {
        display: block;
    }

    .anul-empleados tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 12px;
        padding: 8px 0;
        border-bottom: 1px solid var(--limpia-borde);
    }

    .anul-empleados th,
    .anul-empleados td {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .anul-empleados th {
        grid-column: 1 / -1;
        text-align: left;
    }

    .anul-empleados td::before {
        content: attr(data-label);
        color: var(--limpia-tinta-3);
        text-align: left;
        white-space: normal;
    }
}

/* =====================================================================================================
   ANÁLISIS › VITRINA (pieza I-web de docs/tpv/plan-pinchos-de-vitrina-2026-11-06.md; boceto 13, la A, aprobado el 2026-11-06).
   Solo fichas --limpia-*: el claro y el oscuro salen solos. Compacta: campos de 40 px (--densidad-campo) con la etiqueta pequeña encima;
   con toque (tableta y teléfono) todo lo que se pulsa, 44 px. «Sin cuadrar» en gris, siempre; el ámbar solo sobre el umbral.
   ===================================================================================================== */

.vit-an {
    min-inline-size: 0;
}

.vit-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.vit-campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--limpia-tinta-2);
}

.vit-campo select {
    min-height: var(--densidad-campo, 40px);
    min-width: 14rem;
    max-width: 100%;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--limpia-tinta);
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
}

.vit-bloques {
    display: grid;
    gap: 14px;
    min-inline-size: 0;
}

.vit-avisos {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vit-aviso {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--limpia-aviso-tinta);
    background: var(--limpia-aviso-fondo);
    border-radius: var(--limpia-radio-control);
}

.vit-vacio,
.vit-cargando {
    margin: 0;
    padding: 16px;
    color: var(--limpia-tinta-2);
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
}

.vit-vacio a {
    color: var(--limpia-morado);
    font-weight: 600;
}

.vit-esqueleto {
    block-size: 96px;
    margin-block-end: 8px;
    background: var(--limpia-neutro-fondo);
    border-radius: var(--limpia-radio-control);
}

.vit-esqueleto--alto {
    block-size: 220px;
}

@media (prefers-reduced-motion: no-preference) {
    .vit-esqueleto {
        animation: analisis-latido 1.4s ease-in-out infinite;
    }
}

/* --- la frase de conclusión de cada bloque ---------------------------------------------------------- */

.vit-frase {
    margin: 0;
    padding: 10px 14px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--limpia-tinta);
    background: var(--limpia-neutro-fondo);
    border-inline-start: 3px solid var(--limpia-morado);
    border-radius: 0 var(--limpia-radio-control) var(--limpia-radio-control) 0;
}

/* --- las seis cifras ---------------------------------------------------------------------------------- */

.vit-cifras {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.vit-cifra {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 14px;
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
}

.vit-cifra b {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.vit-cifra small {
    font-size: 12.5px;
    color: var(--limpia-tinta-3);
    font-variant-numeric: tabular-nums;
}

.vit-k {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--limpia-tinta-3);
}

.vit-delta {
    font-size: 12px;
    font-weight: 650;
    color: var(--limpia-tinta-2);
}

.vit-delta--bueno {
    color: var(--limpia-bien-tinta);
}

.vit-delta--malo {
    color: var(--limpia-error-tinta);
}

/* «Sin cuadrar»: borde de puntos y en gris (es una cuenta); ámbar solo sobre el umbral de la vitrina. */
.vit-cifra--neutra {
    border-style: dashed;
}

.vit-cifra--ambar {
    background: var(--limpia-aviso-fondo);
    border-color: var(--limpia-aviso-tinta);
}

.vit-cifra--ambar b,
.vit-cifra--ambar .vit-k {
    color: var(--limpia-aviso-tinta);
}

/* --- un bloque ----------------------------------------------------------------------------------------- */

.vit-panel {
    min-width: 0;
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
}

.vit-panel-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-block-size: 49px;
    padding: 8px 16px;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.vit-panel-cab h2 {
    margin: 0;
    margin-inline-end: auto;
    font-size: 15px;
    font-weight: 700;
}

.vit-ayuda-cab {
    font-size: 12.5px;
    color: var(--limpia-tinta-3);
}

.vit-panel-cuerpo {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    min-width: 0;
}

.vit-ayuda {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--limpia-tinta-3);
}

/* --- la merma ------------------------------------------------------------------------------------------ */

.vit-kv4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.vit-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vit-kv dt {
    font-size: 12px;
    font-weight: 650;
    color: var(--limpia-tinta-2);
}

.vit-kv dd {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.vit-pila {
    display: flex;
    block-size: 14px;
    overflow: hidden;
    background: var(--limpia-neutro-fondo);
    border-radius: 4px;
}

.vit-pila i {
    display: block;
    block-size: 100%;
}

.vit-pila-tirado {
    background: var(--limpia-aviso-tinta);
}

.vit-pila-personal {
    background: var(--limpia-morado);
}

.vit-pila-sin-cuadrar {
    background: var(--limpia-borde-control);
}

.vit-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--limpia-tinta-2);
}

.vit-leyenda i {
    display: inline-block;
    inline-size: 12px;
    block-size: 12px;
    margin-inline-end: 6px;
    vertical-align: -2px;
    border-radius: 3px;
}

/* --- las tablas ----------------------------------------------------------------------------------------- */

.vit-tabla-caja {
    overflow-x: auto;
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
}

.vit-tabla {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.vit-tabla th,
.vit-tabla td {
    padding: 7px 10px;
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.vit-tabla thead th {
    padding: 0 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--limpia-tinta-2);
    white-space: nowrap;
    background: var(--limpia-cabecera);
}

.vit-tabla tbody th {
    font-weight: 600;
}

.vit-tabla tbody tr:last-child th,
.vit-tabla tbody tr:last-child td {
    border-block-end: 0;
}

.vit-tabla tfoot th,
.vit-tabla tfoot td {
    font-weight: 700;
    border-block-start: 1px solid var(--limpia-borde);
    border-block-end: 0;
}

.vit-tabla .n {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vit-tabla thead th.n .vit-orden {
    justify-content: flex-end;
}

.vit-tabla .nw {
    white-space: nowrap;
}

.vit-orden {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    inline-size: 100%;
    min-block-size: var(--densidad-boton, 36px);
    padding: 0 6px;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-align: start;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.vit-orden:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: -2px;
}

.vit-orden-flecha {
    font-size: 9px;
}

.vit-palo-celda {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.vit-palo {
    display: inline-block;
    flex: none;
    inline-size: 6px;
    block-size: 16px;
    margin-inline-end: 8px;
    background: var(--c, var(--limpia-borde-control));
    border-radius: 2px;
}

.vit-barrita {
    display: inline-block;
    block-size: 8px;
    margin-inline-end: 8px;
    vertical-align: 1px;
    background: var(--limpia-aviso-tinta);
    border-radius: 4px;
}

/* La diferencia sin cuadrar: gris; ámbar solo sobre el umbral. */
.vit-sc {
    color: var(--limpia-tinta-2);
    font-weight: 650;
}

.vit-sc--ambar {
    color: var(--limpia-aviso-tinta);
    font-weight: 700;
}

.vit-av {
    color: var(--limpia-aviso-tinta);
    font-weight: 700;
}

.vit-tabla tr.vit-alerta td,
.vit-tabla tr.vit-alerta th {
    background: var(--limpia-aviso-fondo);
}

.vit-sin-confirmar {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--limpia-tinta-3);
}

/* La pastilla de «Más del 20 % tirado»: de filtro, así que con el radio de control y el alto de toque (no una píldora). */
.vit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: var(--densidad-boton, 36px);
    padding: 0 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--limpia-tinta);
    background: var(--limpia-hoja);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    cursor: pointer;
}

.vit-chip--quieto {
    cursor: default;
    color: var(--limpia-tinta-2);
    background: var(--limpia-neutro-fondo);
    border-color: transparent;
}

.vit-chip--puesto {
    color: var(--limpia-sobre-morado);
    background: var(--limpia-morado);
    border-color: var(--limpia-morado);
}

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

.vit-chip b {
    display: inline-grid;
    place-items: center;
    min-inline-size: 20px;
    block-size: 18px;
    padding: 0 5px;
    font-size: 12px;
    color: var(--limpia-tinta-2);
    background: var(--limpia-hoja);
    border-radius: 6px;
}

/* --- el mapa de calor ------------------------------------------------------------------------------------ */

.vit-calor {
    inline-size: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 12.5px;
}

.vit-calor th {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--limpia-tinta-3);
    text-align: center;
}

.vit-calor tbody th {
    inline-size: 118px;
    font-size: 12.5px;
    font-weight: 650;
    text-align: start;
    color: var(--limpia-tinta-2);
}

.vit-calor thead td:first-child {
    inline-size: 118px;
}

.vit-c {
    block-size: 40px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    text-align: center;
    color: var(--limpia-tinta);
    background: color-mix(in srgb, var(--limpia-aviso-tinta) var(--p, 0%), var(--limpia-hoja));
    border-radius: 6px;
}

/* El texto es siempre el de la tinta: sobre el ámbar tope (70 %) del claro da más de 5:1; en el oscuro el ámbar se queda en un 55 % de su escala
   (tope 38 %) para que la tinta clara siga dando más de 4,5:1. */
@media (prefers-color-scheme: dark) {
    .vit-c {
        background: color-mix(in srgb, var(--limpia-aviso-tinta) calc(var(--p, 0%) * 0.55), var(--limpia-hoja));
    }
}

.vit-c--vacia {
    font-weight: 500;
    color: var(--limpia-tinta-3);
    background: var(--limpia-neutro-fondo);
}

/* Las horas de la franja («08:00-11:30») bajo su nombre, y «cerr.» en el día que el local estaba cerrado (como el boceto aprobado). */
.vit-calor tbody th small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--limpia-tinta-3);
}

.vit-c--cerrada {
    font-weight: 500;
    font-size: .92em;
    color: var(--limpia-tinta-3);
    background: var(--limpia-neutro-fondo);
}

.vit-c--hoy {
    outline: 2px solid var(--limpia-tinta);
    outline-offset: -2px;
}

/* --- tableta y teléfono ----------------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .vit-cifras {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vit-orden,
    .vit-chip,
    .vit-campo select {
        min-block-size: 44px;
    }

    .vit-barrita {
        display: none;
    }

    .vit-tabla th,
    .vit-tabla td {
        padding-inline: 8px;
    }
}

/* Las columnas que sobran se esconden hasta 899 px (la tableta vertical, con la barra lateral cerrada, mide ~720 de contenido). */
@media (max-width: 899px) {
    .vit-tabla .no-m {
        display: none;
    }
}

@media (max-width: 719px) {
    .vit-cifras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vit-campo {
        flex: 1 1 100%;
    }

    .vit-campo select {
        min-block-size: 44px;
        min-width: 0;
        inline-size: 100%;
    }

    .vit-kv4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vit-panel-cab {
        padding-inline: 12px;
    }

    .vit-panel-cuerpo {
        padding-inline: 12px;
    }

    .vit-frase {
        font-size: 14px;
        padding: 8px 12px;
    }

    .vit-tabla {
        font-size: 12.5px;
    }

    .vit-tabla th,
    .vit-tabla td {
        padding-inline: 6px;
    }

    .vit-tabla thead th {
        font-size: 10.5px;
        letter-spacing: 0.02em;
    }

    .vit-tabla thead th {
        white-space: normal;
    }

    .vit-orden {
        padding: 0 2px;
        white-space: normal;
        word-break: break-word;
    }

    .vit-tabla .n {
        white-space: normal;
    }

    .vit-palo-celda {
        white-space: normal;
    }

    .vit-calor {
        border-spacing: 2px;
        font-size: 11.5px;
    }

    .vit-calor tbody th,
    .vit-calor thead td:first-child {
        inline-size: 74px;
    }

    .vit-calor tbody th small {
        display: none;
    }

    .vit-c {
        block-size: 36px;
    }
}

/* --- pinchos de vitrina, F2 (2026-11-08): por vitrina y local, por franja y pincho, y el Excel ---------------------------------------- */

.vit-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--limpia-tinta-2);
}

.vit-sub-linea {
    font-size: 12px;
    color: var(--limpia-tinta-2);
    white-space: nowrap;
}

.vit-campo--cab {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.vit-campo--cab select {
    min-width: 10rem;
}

.vit-descargas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vit-descarga {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--densidad-boton, 36px);
    padding: 0 12px;
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    color: var(--limpia-morado);
    background: var(--limpia-hoja);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.vit-descarga:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

@media (max-width: 1279px) {
    .vit-descarga {
        min-block-size: 44px;
    }
}

@media (max-width: 719px) {
    .vit-campo--cab {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .vit-descarga {
        flex: 1 1 auto;
        justify-content: center;
    }
}