/* ============================================================
   Xtryde — Estilos custom con identidad prehispanica sutil
   ============================================================ */

/* --- Fuentes --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
    --color-primario: #D84315;
    --color-primario-hover: #BF360C;
    --color-primario-light: rgba(216, 67, 21, 0.08);
    /* Variante para texto sobre crema — cumple WCAG 4.5:1 (token de marca queda intacto para fondos/bordes) */
    --color-primario-text: #B3340D;
    --color-acento: #37474F;
    /* Variantes oscuras de éxito/alerta para texto sobre crema — WCAG AA */
    --color-exito: #2E7D32;
    --color-alerta: #C62828;
    --color-fondo: #FFF8F0;
    --color-texto: #2D2D2D;
    /* Texto secundario: oscurecido de #757575 a #6B6B6B para cumplir 4.5:1 sobre crema */
    --color-texto-sec: #6B6B6B;
    --color-borde: #E8DDD3;
    --color-sombra: rgba(216, 67, 21, 0.08);

    /* Greca escalonada (xicalcoliuhqui) — patron prehispanico autentico */
    --greca-svg: url("data:image/svg+xml,%3Csvg width='24' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%23D84315' stroke-opacity='0.22' stroke-width='1.5'/%3E%3Cpath d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%23D84315' stroke-opacity='0.22' stroke-width='1.5'/%3E%3C/svg%3E");

    /* Patron sutil para fondos — cruz escalonada geometrica */
    --patron-sutil: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22,16 H26 V22 H32 V26 H26 V32 H22 V26 H16 V22 H22 Z' fill='%23D84315' fill-opacity='0.025'/%3E%3C/svg%3E");
}

* {
    font-family: 'DM Sans', sans-serif;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

/* SPA (app.html): el body es h-screen + overflow-hidden, asi que su alto fija el
   area visible completa. 100vh NO descuenta la barra de navegacion del sistema
   (los 3 botones de Android), dejando el fondo del layout cortado tras ella.
   100dvh = alto visible real, que si la descuenta. */
body.h-screen {
    height: 100vh; /* fallback navegadores sin dvh */
    height: 100dvh;
}

/* --- Greca prehispanica decorativa --- */
.greca-top {
    background-image: var(--greca-svg);
    background-repeat: repeat-x;
    background-position: top;
    height: 12px;
    width: 100%;
}

.greca-bottom {
    background-image: var(--greca-svg);
    background-repeat: repeat-x;
    background-position: bottom;
    height: 12px;
    width: 100%;
}

/* --- Focus visible global accesible (WCAG 2.4.7) --- */
button:focus-visible,
a:focus-visible,
[role="radio"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Helper screen-reader-only (Tailwind sr-only equivalente, por si no esta disponible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Sidebar --- */
.sidebar {
    background: linear-gradient(180deg, #37474F 0%, #263238 100%);
    border-right: 1px solid rgba(216, 67, 21, 0.35);
    box-shadow: 2px 0 10px -4px rgba(0,0,0,0.15);
    position: relative;
}


.sidebar a, .sidebar button {
    color: #CFD8DC;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
}

.sidebar a:hover, .sidebar button:hover {
    color: #FFFFFF;
    background-color: rgba(216, 67, 21, 0.2);
    border-left-color: var(--color-primario);
}

.sidebar .nav-activo {
    color: #FFFFFF;
    background-color: rgba(216, 67, 21, 0.25);
    border-left-color: var(--color-primario);
    font-weight: 600;
}

/* Encabezados de seccion del sidebar (reorg editorial jun-2026).
   Mono terracota tenue, mayusculas, esquinas rectas. NO es navegable:
   solo agrupa visualmente los items por dominio (Operacion, Catalogo...). */
.sidebar .nav-seccion {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-terracota-soft, #F2A085);
    padding: 0.45rem 1rem 0.3rem;
    margin-top: 0.55rem;
    border-top: 1px solid rgba(207, 216, 220, 0.12);
    user-select: none;
    pointer-events: none;
}

/* Encabezado colapsable (jun-2026): cuando el sidebar muestra varias secciones,
   cada encabezado se vuelve un toggle que pliega/despliega su grupo de items
   para acortar la barra. Esquinas rectas, sin pill. */
.sidebar .nav-seccion--toggle {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 38px;            /* objetivo táctil cómodo en móvil */
    border-radius: 0;
    transition: color 0.18s ease, background-color 0.18s ease;
}
.sidebar .nav-seccion--toggle:hover,
.sidebar .nav-seccion--toggle:focus-visible {
    color: #FFFFFF;
    background-color: rgba(216, 67, 21, 0.18);
    outline: none;
}
.sidebar .nav-seccion--toggle:focus-visible {
    box-shadow: inset 2px 0 0 var(--color-primario, #D84315);
}
.sidebar .nav-seccion__chevron {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
    opacity: 0.7;
}
/* Colapsada -> chevron apunta a la derecha (grupo plegado). */
.sidebar .nav-seccion--colapsada .nav-seccion__chevron {
    transform: rotate(-90deg);
}
/* Item plegado por colapso de su sección (independiente del gateo por plan,
   que usa .hidden). El item activo nunca se pliega: queda como "estás aquí". */
.sidebar .nav-item-colapsado:not(.nav-activo) {
    display: none !important;
}

/* --- Header --- */
.header-principal {
    background: var(--color-primario);
    color: white;
    border-bottom: none;
    box-shadow: 0 4px 20px -6px rgba(216,67,21,0.35);
    position: sticky;
    top: 0;
    z-index: 60;
    overflow: hidden;
}
.header-principal > * { position: relative; z-index: 1; }
.header-principal::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 V0 H30 V20 H10 V10 H20 V30' fill='none' stroke='%23fff' stroke-opacity='0.15' stroke-width='2'/%3E%3Cpath d='M30,0 V30 H60 V10 H40 V20 H50 V0' fill='none' stroke='%23fff' stroke-opacity='0.15' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 120px auto;
    animation: greca-move 30s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes greca-move {
    from { background-position: 0 0; }
    to   { background-position: 240px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .header-principal::after { animation: none; }
}

/* Oculta grecas estaticas (ya van integradas en el header animado) */
.greca-top, .greca-bottom { display: none !important; }

/* --- Cards con textura sutil prehispanica --- */
.card-xtryde {
    background: white;
    background-image: var(--patron-sutil);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    box-shadow: 0 10px 30px -18px rgba(55,71,79,0.2), 0 2px 6px -2px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-xtryde:hover {
    box-shadow: 0 18px 40px -20px rgba(55,71,79,0.25), 0 4px 10px -4px rgba(216,67,21,0.08);
}

/* --- KPI cards --- */
.kpi-card {
    background: white;
    background-image: var(--patron-sutil);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-primario);
    box-shadow: 0 10px 24px -18px rgba(55,71,79,0.2), 0 1px 3px rgba(0,0,0,0.04);
    border-radius: 14px;
    padding: 1.25rem;
}

.kpi-card .kpi-valor {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-acento);
}

.kpi-card .kpi-label {
    font-size: 0.85rem;
    color: var(--color-texto-sec);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px var(--color-sombra), 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Botones con gradiente y sombra calida --- */
.btn-primario {
    background: linear-gradient(135deg, #D84315, #E55a2a);
    color: white;
    padding: 0.6rem 1.35rem;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px -6px rgba(216,67,21,0.45);
}

.btn-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(216,67,21,0.55);
    filter: brightness(1.03);
}

.btn-primario:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px -4px rgba(216,67,21,0.4);
}

.btn-secundario {
    background-color: white;
    color: var(--color-acento);
    padding: 0.6rem 1.35rem;
    border-radius: 12px;
    border: 1.5px solid var(--color-borde);
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.btn-secundario:hover {
    background-color: var(--color-fondo);
    border-color: var(--color-primario);
    color: var(--color-primario);
    transform: translateY(-1px);
}

.btn-peligro {
    background: linear-gradient(135deg, #E53935, #C62828);
    color: white;
    padding: 0.6rem 1.35rem;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(229,57,53,0.4);
}

.btn-peligro:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(229,57,53,0.5);
    filter: brightness(1.03);
}

/* --- Tabla --- */
.tabla-xtryde {
    width: 100%;
    border-collapse: collapse;
}

.tabla-xtryde thead {
    background-color: var(--color-acento);
    color: white;
}

.tabla-xtryde th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tabla-xtryde td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-xtryde tbody tr:hover {
    background-color: var(--color-primario-light);
}

/* --- Tabla: vista de tarjetas SOLO en movil/tablet --- */
@media (max-width: 1023px) {
    .card-xtryde:has(.tabla-xtryde) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .tabla-xtryde thead { display: none; }
    .tabla-xtryde { display: block; width: 100%; min-width: 0 !important; overflow: hidden; }
    .tabla-xtryde tbody { display: block; width: 100%; }
    .tabla-xtryde tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0.65rem;
        border: 1px solid var(--color-borde);
        border-left: 3px solid var(--color-primario);
        border-radius: 6px;
        background: white;
        overflow: hidden;
    }
    .tabla-xtryde tbody tr:last-child { margin-bottom: 0; }
    .tabla-xtryde td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0.55rem 0.75rem;
        border-bottom: 1px solid var(--color-borde);
        gap: 0.5rem;
        text-align: right;
    }
    .tabla-xtryde td:last-child { border-bottom: none; }
    .tabla-xtryde td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        color: var(--color-texto-sec);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        min-width: 90px;
        text-align: left;
    }
    .tabla-xtryde td[data-label=""] { justify-content: flex-end; }
    .tabla-xtryde tbody tr:hover { background: var(--color-primario-light); }
}

/* --- Inputs --- */
.input-xtryde {
    border: 1px solid var(--color-borde);
    border-bottom: 2px solid var(--color-acento);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    background: white;
    transition: border-color 0.2s;
    font-size: 0.95rem;
}

.input-xtryde:focus {
    outline: none;
    border-color: var(--color-primario);
    border-bottom-color: var(--color-primario);
    box-shadow: 0 2px 8px var(--color-sombra);
}

/* --- Badges / estados --- */
.badge-unidad {
    background-color: rgba(55, 71, 79, 0.08);
    color: var(--color-acento);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.badge-tipo-tienda {
    background-color: rgba(55, 71, 79, 0.1);
    color: var(--color-acento);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-tipo-restaurante {
    background-color: rgba(216, 67, 21, 0.1);
    color: var(--color-primario);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-activo {
    background-color: rgba(67, 160, 71, 0.12);
    color: var(--color-exito);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-inactivo {
    background-color: rgba(229, 57, 53, 0.12);
    color: var(--color-alerta);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-alerta-disparada {
    background-color: rgba(229, 57, 53, 0.14);
    color: var(--color-alerta);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-alerta-count {
    background-color: var(--color-alerta);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    line-height: 1;
}

/* --- Modal --- */
.modal-overlay {
    background-color: rgba(45, 45, 45, 0.6);
    backdrop-filter: blur(2px);
    /* Por encima del sidebar drawer (z:200) */
    z-index: 250 !important;
}

.modal-contenido {
    background: white;
    background-image: var(--patron-sutil);
    border-radius: 6px;
    border-top: 4px solid var(--color-primario);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* --- Loading — glifo escalonado girando --- */
.spinner-xtryde {
    width: 40px;
    height: 40px;
    position: relative;
    animation: spin-xtryde 1.2s linear infinite;
}

.spinner-xtryde::before,
.spinner-xtryde::after {
    content: '';
    position: absolute;
    border: 3px solid transparent;
}

.spinner-xtryde::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-top-color: var(--color-primario);
    border-right-color: var(--color-primario);
}

.spinner-xtryde::after {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-bottom-color: var(--color-primario);
    border-left-color: var(--color-primario);
    animation: spin-xtryde-inner 0.8s linear infinite reverse;
}

@keyframes spin-xtryde {
    to { transform: rotate(360deg); }
}

@keyframes spin-xtryde-inner {
    to { transform: rotate(360deg); }
}

@keyframes xtPulso {
    0%   { box-shadow: 0 0 0 0 rgba(255,248,240,0.85); }
    70%  { box-shadow: 0 0 0 8px rgba(255,248,240,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,248,240,0); }
}

/* === Corte de caja: grids editoriales propios === */
.corte-grid-turno,
.corte-grid-apertura {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}
@media (min-width: 720px) {
    .corte-grid-turno,
    .corte-grid-apertura {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(120px, auto);
    }
}
@media (min-width: 1024px) {
    .corte-grid-turno {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(170px, auto);
    }
    .corte-grid-turno .kpi-hero {
        grid-column: span 2;
        grid-row: span 2;
    }
    .corte-grid-apertura {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(170px, auto);
    }
    .corte-grid-apertura .kpi-hero {
        grid-column: span 2;
        grid-row: span 2;
    }
    /* Las 3 fichas didácticas: apilar 1 abajo, 1 arriba para llenar la malla */
    .corte-grid-apertura > .kpi-editorial:nth-of-type(1) { grid-column: span 2; }
    .corte-grid-apertura > .kpi-editorial:nth-of-type(2) { grid-column: span 1; }
    .corte-grid-apertura > .kpi-editorial:nth-of-type(3) { grid-column: span 1; }
}

/* CTA dentro del hero terracota — pill claro de marca */
.corte-cta-cerrar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--xt-crema);
    color: var(--xt-terracota-dark);
    border: 1px solid var(--xt-crema);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 14px -8px rgba(0,0,0,0.25);
}
.corte-cta-cerrar:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 10px 18px -10px rgba(0,0,0,0.32);
}
.corte-cta-cerrar:active { transform: translateY(0); }

.corte-cta-abrir {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--xt-crema);
    color: var(--xt-terracota-dark);
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--xt-crema);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 18px -10px rgba(0,0,0,0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.corte-cta-abrir:hover { transform: translateY(-1px); }

/* Inputs de moneda dentro de fichas — escalan fluido como cifra-hero */
.corte-money-box {
    display: flex;
    align-items: center;
    gap: clamp(0.35rem, 1.2vw, 0.6rem);
    background: rgba(255, 248, 240, 0.12);
    border: 1px solid rgba(255, 248, 240, 0.32);
    border-radius: 8px;
    padding: clamp(0.5rem, 1.4vw, 0.7rem) clamp(0.7rem, 2vw, 0.95rem);
    width: 100%;
}
.corte-money-box.is-light {
    background: #fff;
    border-color: var(--xt-line-strong);
}
.corte-money-box .corte-money-sign {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 3.5vw, 1.6rem);
    line-height: 1;
    color: var(--xt-crema);
}
.corte-money-box.is-light .corte-money-sign { color: var(--xt-carbon); }
.corte-money-box input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 3.5vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--xt-crema);
    /* iOS no auto-zoom: el min de clamp es 1.25rem = 20px > 16px */
}
.corte-money-box.is-light input { color: var(--xt-carbon); }
.corte-money-box input::-webkit-outer-spin-button,
.corte-money-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.corte-money-box input[type=number] { -moz-appearance: textfield; }

/* Cierre: grid Esperado / Real / Diferencia — apilar bien en mobile */
.corte-cierre-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.1rem;
}
@media (min-width: 560px) {
    .corte-cierre-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
    .corte-cierre-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}
.corte-cierre-grid .cifra-sec { font-size: clamp(1.35rem, 3.8vw, 2rem); }

/* Hero apertura: contenedor del input no se sale en mobile */
.corte-apertura-input-wrap {
    max-width: min(340px, 100%);
    margin-top: 0.4rem;
}
@media (max-width: 480px) {
    .corte-apertura-input-wrap { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    [style*="xtPulso"] { animation: none !important; }
}

/* --- Separador con greca --- */
.separador-greca {
    border: none;
    height: 12px;
    background-image: var(--greca-svg);
    background-repeat: repeat-x;
    margin: 1.5rem 0;
}

/* --- Scrollbar custom --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-fondo);
}

::-webkit-scrollbar-thumb {
    background: var(--color-borde);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primario);
}

/* --- Utilidades --- */
/* text-* usan variantes oscurecidas para cumplir WCAG AA 4.5:1 sobre fondos claros.
   Los tokens de marca originales (--color-primario) siguen disponibles para fondos/bordes. */
.text-primario { color: var(--color-primario-text); }
.text-exito { color: var(--color-exito); }
.text-alerta { color: var(--color-alerta); }
.bg-primario-light { background-color: var(--color-primario-light); }

/* Badge tipo-restaurante: color de texto accesible sobre fondo claro */
.badge-tipo-restaurante { color: var(--color-primario-text); }

/* Links sobre fondos claros */
a:not([class*="bg-"]):not(.sidebar a) { color: var(--color-primario-text); }

/* ============================================================
   RESPONSIVE — Movil y Tablet
   ============================================================ */

/* --- Tabla: en desktop con min-width para mantener legibilidad --- */
@media (min-width: 1024px) {
    .tabla-xtryde {
        min-width: 560px;
    }
}

/* --- Estado de Resultados: compactar columnas en movil --- */
@media (max-width: 639px) {
    #er-body .flex.gap-8 {
        gap: 0.5rem !important;
    }
    #er-body .w-28 {
        width: auto !important;
        min-width: 70px;
    }
    #er-body .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    #er-body .pl-8  { padding-left: 1.25rem !important; }
    #er-body .pl-14 { padding-left: 1.75rem !important; }
    #er-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Sidebar como drawer en tablet y movil (< 1024px) --- */
@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 200;
        width: 240px;
        transition: left 0.25s ease;
        overflow-y: auto;
        padding-top: 1rem;
    }

    .sidebar.sidebar-abierta {
        left: 0;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }

    /* El contenido principal ocupa todo el ancho */
    .flex-1.overflow-y-auto {
        width: 100%;
    }
}

/* --- Overlay oscuro detras del sidebar (movil/tablet) --- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(1px);
}

.sidebar-overlay.visible {
    display: block;
}

/* --- Boton hamburger (solo movil/tablet) --- */
.btn-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgba(255,255,255,0.15);
    border: none;
    cursor: pointer;
    color: white;
    flex-shrink: 0;
}

.btn-hamburger:hover {
    background: rgba(255,255,255,0.25);
}

@media (max-width: 1023px) {
    .btn-hamburger {
        display: flex;
    }
}

@media (max-width: 639px) {
    /* Safety bottom padding en telefono para que el ultimo boton de formularios
       no quede pegado al borde inferior. */
    main.flex-1 {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    #content-area,
    #vista-edicion {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    }

    #btn-guardar-prod,
    #btn-guardar-insumo {
        margin-bottom: 1rem;
    }
}

/* --- Barra flotante del carrito (POS movil) --- */
.carrito-flotante {
    display: none;
}

@media (max-width: 1023px) {
    .carrito-flotante {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 120;
        background: var(--color-acento);
        color: white;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 3px solid var(--color-primario);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
        transition: transform 0.2s ease;
    }

    .carrito-flotante.hidden {
        display: none;
    }

    /* Padding extra cuando la barra flotante esta visible, para que no tape el boton Cobrar */
    main.flex-1.con-carrito-flotante {
        padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Touch targets: botones e inputs mas grandes en movil (WCAG 2.5.5, mínimo 44×44) --- */
@media (max-width: 1023px) {
    .btn-primario,
    .btn-secundario,
    .btn-peligro {
        min-height: 44px;
        padding: 0.6rem 1.25rem;
    }

    /* Botones genéricos, selects y hamburger — asegurar 44px mínimo */
    button,
    .btn-hamburger,
    select {
        min-height: 44px;
    }

    /* Estrellas, botones NPS y chips de filtro: 44×44 en táctil */
    .star,
    .nps-btn,
    .chip,
    .chip-filtro,
    [role="tab"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Inputs de formulario */
    .input-xtryde {
        min-height: 44px;
        /* Evita zoom automatico en iOS al enfocar un input */
        font-size: 16px;
    }

    #content-area,
    #vista-edicion {
        padding: 1rem 1rem 2rem;
    }

    /* Header: mas compacto */
    .header-principal {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    /* Cards: menos padding interno */
    .card-xtryde {
        border-radius: 6px;
        padding: 1rem !important;
    }

    /* KPI grid: 2 columnas en tablet, 1 en telefono */
    .kpi-card .kpi-valor {
        font-size: 1.4rem;
    }

    /* max-w-2xl del formulario: ocupa todo el ancho en tablet */
    .max-w-2xl {
        max-width: 100% !important;
    }
}

/* --- Formularios: optimizaciones movil (< 640px) --- */
@media (max-width: 639px) {
    /* Cards con menos padding en telefono */
    .card-xtryde {
        padding: 0.875rem !important;
    }

    /* max-w-lg y max-w-2xl: full width en telefono */
    .max-w-lg,
    .max-w-2xl {
        max-width: 100% !important;
    }

    /* Grillas de formularios: 1 columna en telefono */
    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* La cabecera de formularios (titulo + boton cancelar): wrap en 2 lineas si no cabe */
    #vista-edicion > div > .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Tablas: fuente mas pequeña para que quepan */
    .tabla-xtryde th,
    .tabla-xtryde td {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }

    /* KPIs: 1 columna en telefono muy pequeno */
    .kpi-card {
        padding: 0.875rem;
    }

    /* Input de busqueda: ancho completo en telefono */
    input[style*="width:200px"],
    select[style*="width:170px"],
    select[style*="width:200px"] {
        width: 100% !important;
    }
}

/* --- Modal: bottom sheet en telefono --- */
@media (max-width: 639px) {
    .modal-contenido {
        border-radius: 12px 12px 0 0;
        border-top: 4px solid var(--color-primario);
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        position: fixed !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
        left: 0;
        right: 0;
        /* Scroll interno cuando el contenido no cabe */
        max-height: calc(100vh - 72px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-overlay {
        align-items: flex-end !important;
    }

    /* Scanner: ocupa zona alta de la pantalla, no tapado por nav */
    #modal-scanner .modal-contenido {
        border-radius: 12px 12px 0 0;
    }
}

/* --- Modal: tablet (640-1023px) --- */
@media (min-width: 640px) and (max-width: 1023px) {
    .modal-contenido {
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Alertas: ancho completo en movil --- */
@media (max-width: 639px) {
    #alertas-global {
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
    }
}

/* ============================================================
   Mesas — Plano scrollable en movil/tablet
   ============================================================ */

/* Wrapper que habilita scroll horizontal y vertical del plano */
.plano-scroll-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    /* Scrollbar visible para que el usuario sepa que puede deslizar */
    scrollbar-width: thin;
}

.plano-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.plano-scroll-wrapper::-webkit-scrollbar-track {
    background: var(--color-fondo);
    border-radius: 4px;
}

.plano-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-primario);
    border-radius: 4px;
}

/* Plano de mesas: dimensiones controladas por JS (_planoCalcDims) */
#plano-espacio {
    min-width: 640px;
}

/* En mobile, dejar que el plano se ajuste al viewport (sin scroll horizontal
   forzado). El JS reduce el ancho base y las mesas se reposicionan con sus
   coordenadas en %, manteniendo la distribucion relativa. */
@media (max-width: 640px) {
    #plano-espacio {
        min-width: 0;
    }
}

/* ============================================================
   Tablet horizontal (640-1023px) — mejoras de aprovechamiento
   ============================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Formularios largos: 2 columnas en tablet horizontal */
    #vista-edicion .grid-cols-1.md\:grid-cols-2,
    #vista-edicion .grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
    }

    /* KPI grid: 4 columnas en tablet horizontal donde quepan */
    #content-area .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Cards mas compactas en tablet */
    .card-xtryde {
        padding: 1.25rem !important;
    }

    /* Header un poco mas compacto */
    .header-principal {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* ============================================================
   Forzar visibilidad del ultimo boton del formulario
   ============================================================ */
@media (max-width: 1023px) {
    /* Ultimo boton del formulario — espacio extra abajo siempre */
    #vista-edicion form > button[type="submit"]:last-child,
    #vista-edicion form .btn-primario.w-full:last-child {
        margin-bottom: 1.5rem;
    }
}

/* ============================================================
   Super Admin — Fichas de tiendas + Drawer
   ============================================================ */

/* KPIs piramidales escalonados */
.kpi-piramide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .kpi-piramide-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
}
.kpi-piramide {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-piramide::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primario) 0%, #FF8A65 100%);
    opacity: 0.85;
}
.kpi-piramide-2::before { background: linear-gradient(90deg, #2E7D32 0%, #66BB6A 100%); }
.kpi-piramide-3::before { background: linear-gradient(90deg, #BF360C 0%, #FFB74D 100%); }
.kpi-piramide-4::before { background: linear-gradient(90deg, #37474F 0%, #78909C 100%); }
.kpi-piramide-5::before { background: linear-gradient(90deg, #5D4037 0%, #D84315 100%); }
.kpi-piramide:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(55,71,79,0.08); }
.kpi-piramide .kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-sec);
    margin-bottom: 0.25rem;
}
.kpi-piramide .kpi-valor {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-acento);
    line-height: 1.1;
}

/* Toolbar (chips + búsqueda) */
.tienda-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .tienda-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.tienda-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tienda-chip {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-texto-sec);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.tienda-chip:hover { border-color: var(--color-primario); color: var(--color-primario-text); }
.tienda-chip-activo {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}
.tienda-chip-num {
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
}
.tienda-chip-activo .tienda-chip-num { background: rgba(255,255,255,0.25); color: #fff; }
.tienda-buscar { width: 100%; max-width: 320px; }

/* Grid de fichas */
.fichas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .fichas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fichas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .fichas-grid { grid-template-columns: repeat(4, 1fr); } }

.fichas-vacio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    background: #fff;
    border: 1px dashed var(--color-borde);
    border-radius: 14px;
}

/* Ficha individual */
.ficha-tienda {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}
.ficha-tienda:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(55,71,79,0.12);
    border-color: var(--color-primario);
}
.ficha-tienda:focus-visible {
    outline: 3px solid var(--color-primario);
    outline-offset: 2px;
}
.ficha-tienda-greca {
    height: 14px;
    background: linear-gradient(180deg, rgba(255,248,240,0) 0%, rgba(216,67,21,0.05) 100%);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    opacity: 0.55;
}
.greca-ficha {
    width: 100%;
    height: 100%;
    display: block;
}
.ficha-tienda-cabecera {
    position: relative;
    padding: 0.5rem 1rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.ficha-tienda-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(216,67,21,0.25);
}
.ficha-tienda-estado {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ficha-tienda-cuerpo {
    padding: 0.85rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ficha-tienda-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-acento);
    margin-bottom: 0.15rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ficha-tienda-dueno {
    font-size: 0.8rem;
    color: var(--color-texto-sec);
    margin-bottom: 0.6rem;
}
.ficha-tienda-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}
.ficha-tienda-tag {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    color: var(--color-texto-sec);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}
.ficha-tienda-tag-plan {
    background: rgba(216,67,21,0.08);
    border-color: rgba(216,67,21,0.2);
    color: var(--color-primario-text);
}
.ficha-tienda-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    padding: 0.65rem;
    background: var(--color-fondo);
    border-radius: 10px;
    margin-bottom: 0.65rem;
}
.ficha-stat-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-acento);
    line-height: 1.1;
    text-align: center;
}
.ficha-stat-lbl {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-texto-sec);
    text-align: center;
    margin-top: 0.1rem;
}
.ficha-tienda-correo {
    font-size: 0.75rem;
    color: var(--color-texto-sec);
    margin-top: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.6rem;
}
.ficha-tienda-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--color-borde);
}
.ficha-accion {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    color: var(--color-acento);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.4rem 0.55rem;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 32px;
    transition: all 0.15s ease;
    flex: 1 1 auto;
    justify-content: center;
}
.ficha-accion:hover {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}
.ficha-accion span { font-weight: 700; }
.ficha-accion-toggle { flex-basis: 100%; }
.ficha-accion-eliminar {
    flex-basis: 100%;
    background: rgba(229, 57, 53, 0.07);
    border-color: rgba(229, 57, 53, 0.22);
    color: #C62828;
}
.ficha-accion-eliminar:hover {
    background: var(--color-alerta, #E53935);
    border-color: var(--color-alerta, #E53935);
    color: #fff;
}

.dash-chart-wrap {
    position: relative;
    width: 100%;
}
.dash-chart-wrap canvas {
    max-height: 100% !important;
}

/* Drawer lateral */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(55,71,79,0.55);
    z-index: 60;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn 0.18s ease;
}
@keyframes drawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
.drawer-panel {
    width: 100%;
    max-width: 480px;
    background: #fff;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: drawerSlideIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.18);
}
@keyframes drawerSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@media (max-width: 640px) {
    .drawer-overlay { align-items: flex-end; }
    .drawer-panel {
        max-width: 100%;
        max-height: 92vh;
        height: 92vh;
        margin-top: auto;
        border-radius: 22px 22px 0 0;
        animation: drawerSlideUp 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    @keyframes drawerSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}
.drawer-cabecera {
    padding: 1.5rem 1.5rem 1.25rem;
    color: #fff;
    position: relative;
    text-align: center;
}
.drawer-cerrar {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-size: 1.6rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}
.drawer-cerrar:hover { background: rgba(255,255,255,0.35); }
.drawer-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(255,255,255,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    margin: 0.5rem auto 0.75rem;
    border: 2px solid rgba(255,255,255,0.4);
}
.drawer-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    word-break: break-word;
}
.drawer-subtitulo {
    font-size: 0.85rem;
    opacity: 0.92;
    margin-bottom: 0.6rem;
}
.drawer-estado {
    display: inline-block;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.drawer-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.drawer-tab {
    background: transparent;
    border: none;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-texto-sec);
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    min-height: 44px;
    transition: all 0.15s;
}
.drawer-tab:hover { background: rgba(216,67,21,0.08); color: var(--color-primario-text); }
.drawer-tab-activo {
    background: #fff;
    color: var(--color-primario-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.drawer-tab-peligro { color: var(--color-alerta); margin-left: auto; }
.drawer-tab-peligro.drawer-tab-activo { color: var(--color-alerta); }

.drawer-contenido {
    padding: 1.25rem;
    flex: 1;
}
.drawer-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.drawer-label {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-acento);
    gap: 0.3rem;
}
.drawer-label .input-xtryde { font-size: 0.95rem; }
.drawer-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.drawer-info-box {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
}
.drawer-info-titulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-sec);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.drawer-info-linea {
    font-size: 0.78rem;
    color: var(--color-acento);
    margin-bottom: 0.2rem;
    word-break: break-all;
}
.drawer-info-linea span { color: var(--color-texto-sec); margin-right: 0.35rem; }
.drawer-info-linea code {
    background: #fff;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.72rem;
    border: 1px solid var(--color-borde);
}
.drawer-acciones { margin-top: 0.5rem; }

.drawer-stat-pill {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}
.drawer-stat-pill-lbl {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-sec);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.drawer-stat-pill-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-acento);
}

.drawer-h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-acento);
    margin: 1.25rem 0 0.6rem;
}
.drawer-acciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 480px) {
    .drawer-acciones-grid { grid-template-columns: 1fr 1fr; }
}
.drawer-accion-btn {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 64px;
}
.drawer-accion-btn:hover {
    border-color: var(--color-primario);
    background: rgba(216,67,21,0.04);
}
.drawer-accion-btn strong { font-size: 0.88rem; color: var(--color-acento); }
.drawer-accion-btn span { font-size: 0.72rem; color: var(--color-texto-sec); }

.drawer-progress {
    background: var(--color-borde);
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}
.drawer-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.drawer-pagos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.drawer-pago-item {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.drawer-peligro-card {
    background: #fff;
    border: 1px solid rgba(198,40,40,0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.btn-peligro {
    background: var(--color-alerta);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s;
}
.btn-peligro:hover { background: #8E1F1F; }

/* ============================================================
   Modal de eliminación con formato (confirmarEliminacion)
   ============================================================ */
.modal-eliminacion-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(15, 10, 8, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalElimFade 160ms ease-out;
}
@keyframes modalElimFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal-eliminacion-card {
    background: #fff;
    width: 100%;
    max-width: 460px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 12px rgba(216,67,21,0.15);
    border: 1px solid rgba(229, 57, 53, 0.18);
    animation: modalElimRise 200ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes modalElimRise {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.modal-eliminacion-header {
    position: relative;
    background: linear-gradient(135deg, #C62828 0%, #E53935 60%, #FF7043 100%);
    color: #fff;
    padding: 1.4rem 1.4rem 1.1rem;
    text-align: center;
}
.modal-eliminacion-greca-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    color: rgba(255,255,255,0.45);
    overflow: hidden;
}
.modal-eliminacion-greca {
    width: 100%;
    height: 100%;
    display: block;
}
.modal-eliminacion-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: 2px solid rgba(255,255,255,0.45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.6rem auto 0.7rem;
}
.modal-eliminacion-titulo {
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.modal-eliminacion-bajada {
    font-size: 0.78rem;
    opacity: 0.92;
    margin: 0;
}
.modal-eliminacion-cuerpo {
    padding: 1.1rem 1.4rem 0.6rem;
}
.modal-eliminacion-entidad {
    background: var(--color-fondo, #FFF8F0);
    border: 1px solid var(--color-borde, rgba(0,0,0,0.08));
    border-left: 4px solid var(--color-alerta, #E53935);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.85rem;
}
.modal-eliminacion-entidad-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-alerta, #E53935);
    background: rgba(229, 57, 53, 0.10);
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.35rem;
}
.modal-eliminacion-entidad-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-acento, #37474F);
    margin: 0;
    word-break: break-word;
}
.modal-eliminacion-sub {
    font-size: 0.78rem;
    color: var(--color-texto-sec, #666);
    margin: 0.15rem 0 0;
    word-break: break-word;
}
.modal-eliminacion-lista {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.modal-eliminacion-lista li {
    position: relative;
    padding: 0.45rem 0.6rem 0.45rem 1.5rem;
    background: rgba(229, 57, 53, 0.05);
    border: 1px solid rgba(229, 57, 53, 0.12);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--color-acento, #37474F);
}
.modal-eliminacion-lista li::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-alerta, #E53935);
    transform: translateY(-50%);
}
.modal-eliminacion-footer {
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
    padding: 0.85rem 1.4rem 1.2rem;
}
.modal-eliminacion-footer .btn-secundario,
.modal-eliminacion-footer .btn-peligro {
    min-width: 120px;
}
@media (max-width: 480px) {
    .modal-eliminacion-footer { flex-direction: column-reverse; }
    .modal-eliminacion-footer .btn-secundario,
    .modal-eliminacion-footer .btn-peligro { width: 100%; }
}

/* Dashboard layout */
.dash-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .dash-row { grid-template-columns: 2fr 1fr; }
}

.dash-leyenda-planes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dash-leyenda-planes li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.dash-leyenda-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.dash-leyenda-lbl { flex: 1; color: var(--color-acento); }
.dash-leyenda-val { font-weight: 600; color: var(--color-primario-text); }

.dash-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.dash-funnel-paso { display: flex; flex-direction: column; gap: 0.25rem; }
.dash-funnel-bar {
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    color: #fff;
    transition: width 0.5s ease;
    min-width: 60px;
}
.dash-funnel-val { font-weight: 700; font-size: 0.95rem; }
.dash-funnel-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.dash-funnel-lbl { color: var(--color-acento); font-weight: 500; }
.dash-funnel-pct { color: var(--color-texto-sec); }

.dash-top-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dash-top-item {
    background: var(--color-fondo);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.dash-top-rank {
    background: var(--color-primario);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-top-ltv {
    font-weight: 700;
    color: var(--color-primario-text);
    font-size: 0.9rem;
    white-space: nowrap;
}

.dash-heatmap {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.dash-heatmap-dias {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
    font-size: 0.65rem;
    color: var(--color-texto-sec);
    padding-top: 2px;
}
.dash-heatmap-dias span {
    height: 16px;
    display: flex;
    align-items: center;
}
.dash-heatmap-grid {
    display: flex;
    gap: 3px;
    flex: 1;
}
.dash-heatmap-col {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
    flex: 1;
    min-width: 16px;
}
.dash-heatmap-celda {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
}
.dash-heatmap-leyenda {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: var(--color-texto-sec);
    margin-top: 0.75rem;
    justify-content: flex-end;
}

/* ============================================================
   FICHAS USUARIOS (super_admin)
   ============================================================ */
.ficha-usuario {
    background: var(--color-superficie, #fff);
    border: 1px solid rgba(55, 71, 79, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    box-shadow: 0 1px 2px rgba(55, 71, 79, 0.04);
}
.ficha-usuario:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(55, 71, 79, 0.10);
    border-color: rgba(216, 67, 21, 0.18);
}
.ficha-usuario:focus-visible {
    outline: 3px solid var(--color-primario, #D84315);
    outline-offset: 2px;
}
.ficha-usuario-cabecera {
    height: 92px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}
.ficha-usuario-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-acento, #37474F);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.ficha-usuario-rol {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-acento, #37474F);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 8px;
    border-radius: 999px;
}
.ficha-usuario-rol-super {
    background: var(--color-primario, #D84315);
    color: #fff;
}
.ficha-usuario-cuerpo {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.ficha-usuario-nombre {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-acento, #37474F);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}
.ficha-usuario-email {
    font-size: 12px;
    color: var(--color-texto-sec, #607D8B);
    margin: 0;
    word-break: break-all;
}
.ficha-usuario-estado-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.ficha-usuario-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.ficha-usuario-acciones {
    margin-top: auto;
    padding-top: 12px;
}
.btn-peligro-light {
    width: 100%;
    background: rgba(229, 57, 53, 0.08);
    color: #C62828;
    border: 1px solid rgba(229, 57, 53, 0.18);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
    transition: background 150ms ease, border-color 150ms ease;
}
.btn-peligro-light:hover {
    background: rgba(229, 57, 53, 0.14);
    border-color: rgba(229, 57, 53, 0.32);
}

/* ============================================================
   FICHAS TICKET (descuentos suscripcion)
   ============================================================ */
.fichas-grid-tickets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
}
.ficha-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 130px 1fr;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(55, 71, 79, 0.08);
    box-shadow: 0 1px 2px rgba(55, 71, 79, 0.04);
    transition: transform 180ms ease, box-shadow 180ms ease;
    min-height: 168px;
}
.ficha-ticket:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(55, 71, 79, 0.12);
}
.ficha-ticket:focus-visible {
    outline: 3px solid var(--color-primario, #D84315);
    outline-offset: 2px;
}
.ficha-ticket-izq {
    background: linear-gradient(135deg, #D84315 0%, #FF8A65 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    text-align: center;
}
.ficha-ticket-vigente .ficha-ticket-izq {
    background: linear-gradient(135deg, #2E7D32 0%, #66BB6A 100%);
}
.ficha-ticket-programado .ficha-ticket-izq {
    background: linear-gradient(135deg, #455A64 0%, #78909C 100%);
}
.ficha-ticket-inactivo .ficha-ticket-izq {
    background: linear-gradient(135deg, #9E9E9E 0%, #BDBDBD 100%);
}
.ticket-pct {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    display: block;
}
.ticket-pct-sm { font-size: 36px; }
.ticket-pct small {
    font-size: 22px;
    font-weight: 700;
    margin-left: 1px;
}
.ticket-pct-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-top: 6px;
    text-transform: uppercase;
    opacity: 0.95;
}
.ficha-ticket-perforacion {
    position: absolute;
    left: 130px;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed rgba(55, 71, 79, 0.18);
    transform: translateX(-1px);
}
.ficha-ticket-perforacion::before,
.ficha-ticket-perforacion::after {
    content: "";
    position: absolute;
    left: -8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-fondo, #FFF8F0);
    border: 1px solid rgba(55, 71, 79, 0.10);
}
.ficha-ticket-perforacion::before { top: -8px; }
.ficha-ticket-perforacion::after { bottom: -8px; }
.ficha-ticket-der {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ficha-ticket-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.ficha-ticket-nombre {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-acento, #37474F);
    margin: 0;
    line-height: 1.25;
}
.ficha-ticket-estado {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(55, 71, 79, 0.08);
    color: var(--color-acento, #37474F);
    white-space: nowrap;
}
.ficha-ticket-vigente .ficha-ticket-estado {
    background: rgba(46, 125, 50, 0.12);
    color: #2E7D32;
}
.ficha-ticket-programado .ficha-ticket-estado {
    background: rgba(216, 67, 21, 0.10);
    color: #D84315;
}
.ficha-ticket-alcance {
    font-size: 12px;
    color: var(--color-texto-sec, #607D8B);
    margin: 0;
    line-height: 1.35;
}
.ficha-ticket-fechas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-acento, #37474F);
    font-weight: 600;
    margin-top: 2px;
}
.ficha-ticket-flecha {
    color: var(--color-primario, #D84315);
    font-weight: 700;
}
.ficha-ticket-acciones {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    flex-wrap: wrap;
}
.ficha-accion {
    background: rgba(55, 71, 79, 0.06);
    color: var(--color-acento, #37474F);
    border: 1px solid rgba(55, 71, 79, 0.10);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-height: 32px;
    transition: background 150ms ease, border-color 150ms ease;
}
.ficha-accion:hover {
    background: rgba(216, 67, 21, 0.10);
    border-color: rgba(216, 67, 21, 0.22);
}
.ficha-accion-peligro {
    background: rgba(229, 57, 53, 0.08);
    color: #C62828;
    border-color: rgba(229, 57, 53, 0.18);
}
.ficha-accion-peligro:hover {
    background: rgba(229, 57, 53, 0.16);
    border-color: rgba(229, 57, 53, 0.32);
}

/* ============================================================
   FICHAS CUPON (codigos promocionales)
   ============================================================ */
.fichas-grid-cupones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.ficha-cupon {
    position: relative;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(55, 71, 79, 0.08);
    box-shadow: 0 1px 2px rgba(55, 71, 79, 0.04);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.ficha-cupon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(55, 71, 79, 0.12);
}
.ficha-cupon:focus-visible {
    outline: 3px solid var(--color-primario, #D84315);
    outline-offset: 2px;
}
.ficha-cupon-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(135deg, #D84315 0%, #FF8A65 100%);
    color: #fff;
    padding: 14px 14px 12px 14px;
    margin: -16px -16px 0 -16px;
    border-radius: 16px 16px 0 0;
}
.ficha-cupon-activo .ficha-cupon-superior {
    background: linear-gradient(135deg, #D84315 0%, #FF8A65 100%);
}
.ficha-cupon-expirado .ficha-cupon-superior {
    background: linear-gradient(135deg, #6D4C41 0%, #A1887F 100%);
}
.ficha-cupon-agotado .ficha-cupon-superior {
    background: linear-gradient(135deg, #455A64 0%, #78909C 100%);
}
.ficha-cupon-inactivo .ficha-cupon-superior {
    background: linear-gradient(135deg, #9E9E9E 0%, #BDBDBD 100%);
}
.cupon-pct {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    display: inline-block;
}
.cupon-pct-sm { font-size: 26px; }
.cupon-pct small {
    font-size: 18px;
    font-weight: 700;
    margin-left: 1px;
}
.cupon-pct-lbl {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: 8px;
    opacity: 0.95;
    vertical-align: middle;
}
.ficha-cupon-estado {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    white-space: nowrap;
}
.ficha-cupon-perforacion {
    position: relative;
    height: 10px;
    margin: 0 -16px;
    background:
        radial-gradient(circle at 0 50%, var(--color-fondo, #FFF8F0) 6px, transparent 7px),
        radial-gradient(circle at 100% 50%, var(--color-fondo, #FFF8F0) 6px, transparent 7px);
    border-bottom: 2px dashed rgba(55, 71, 79, 0.18);
}
.ficha-cupon-codigo-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 4px;
}
.ficha-cupon-codigo {
    flex: 1;
    font-family: ui-monospace, "Courier New", monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--color-acento, #37474F);
    background: rgba(216, 67, 21, 0.06);
    border: 2px dashed rgba(216, 67, 21, 0.32);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    user-select: all;
    word-break: break-all;
}
.ficha-cupon-copiar {
    background: var(--color-primario, #D84315);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: background 150ms ease, transform 100ms ease;
}
.ficha-cupon-copiar:hover { background: #BF360C; }
.ficha-cupon-copiar:active { transform: scale(0.97); }
.ficha-cupon-nombre {
    font-size: 13px;
    color: var(--color-texto-sec, #607D8B);
    margin: 0;
    line-height: 1.35;
}
.ficha-cupon-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(55, 71, 79, 0.08);
}
.ficha-cupon-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ficha-cupon-meta-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-texto-sec, #607D8B);
    font-weight: 600;
}
.ficha-cupon-meta-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-acento, #37474F);
}
.ficha-cupon-barra {
    margin-top: 4px;
    height: 4px;
    background: rgba(55, 71, 79, 0.10);
    border-radius: 999px;
    overflow: hidden;
}
.ficha-cupon-barra-fill {
    height: 100%;
    background: var(--color-primario, #D84315);
    border-radius: 999px;
    transition: width 300ms ease;
}
.ficha-cupon-acciones {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px;
}

@media (max-width: 480px) {
    .fichas-grid-tickets,
    .fichas-grid-cupones { grid-template-columns: 1fr; }
    .ficha-ticket { grid-template-columns: 110px 1fr; min-height: 152px; }
    .ficha-ticket-perforacion { left: 110px; }
    .ticket-pct { font-size: 36px; }
    .cupon-pct { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════
   FICHA TIENDA — pantalla completa (super_admin)
   Identidad: terracota + greca + orbs blureados (matching landing)
   ════════════════════════════════════════════════════════════ */

/* CTA al final de la card del grid: "Ver ficha completa →" */
.ficha-tienda-cta {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primario-text, #BF360C);
    letter-spacing: 0.01em;
    transition: gap 0.2s ease;
}
.ficha-tienda:hover .ficha-tienda-cta { gap: 0.6rem; }

/* Wrapper de la ficha pantalla completa */
.ficha-full {
    animation: fichaFadeIn 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 0;
}
@keyframes fichaFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ficha-full-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--color-borde);
    color: var(--color-acento);
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.18s ease;
    align-self: flex-start;
}
.ficha-full-back:hover {
    background: #fff;
    border-color: var(--color-primario);
    color: var(--color-primario-text);
    transform: translateX(-2px);
}

/* Header hero con greca animada + orbs */
.ficha-full-header {
    position: relative;
    color: #fff;
    border-radius: 22px;
    padding: 2rem 1.75rem 2.25rem;
    overflow: hidden;
    box-shadow: 0 10px 30px -12px rgba(55,71,79,0.25);
    margin-bottom: 0;
}
.ficha-full-greca {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90'><path d='M0,90 V0 H90 V60 H30 V30 H60 V90' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2.5'/><path d='M90,0 V90 H180 V30 H120 V60 H150 V0' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2.5'/></svg>");
    background-size: 280px auto;
    animation: grecaSlide 50s linear infinite;
    pointer-events: none;
}
@keyframes grecaSlide {
    from { background-position: 0 0; }
    to   { background-position: 560px 0; }
}
.ficha-full-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.42;
    pointer-events: none;
}
.ficha-full-orb-1 {
    width: 320px; height: 320px;
    top: -100px; right: -80px;
    background: radial-gradient(circle, rgba(255,255,255,0.7), transparent 70%);
}
.ficha-full-orb-2 {
    width: 240px; height: 240px;
    bottom: -100px; left: -60px;
    background: radial-gradient(circle, rgba(0,0,0,0.4), transparent 70%);
}
.ficha-full-header-content {
    position: relative;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.ficha-full-avatar {
    width: 88px;
    height: 88px;
    min-width: 88px;
    border-radius: 22px;
    background: rgba(255,255,255,0.22);
    border: 2px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.3);
}
.ficha-full-meta { flex: 1; min-width: 220px; }
.ficha-full-estado {
    display: inline-block;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}
.ficha-full-titulo {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 0.3rem;
    word-break: break-word;
}
.ficha-full-subtitulo {
    font-size: 0.92rem;
    opacity: 0.92;
    margin: 0 0 0.85rem;
    word-break: break-word;
}
.ficha-full-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.ficha-full-tag {
    font-size: 0.72rem;
    font-weight: 500;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ficha-full-tag-plan { background: rgba(255,255,255,0.28); }

/* Tabs sticky */
.ficha-full-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    z-index: 5;
    margin-top: 1.25rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px -4px rgba(55,71,79,0.08);
}
.ficha-full-tab {
    background: transparent;
    border: none;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto-sec);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 10px;
    transition: all 0.18s ease;
    position: relative;
}
.ficha-full-tab:hover {
    color: var(--color-primario-text);
    background: rgba(216,67,21,0.06);
}
.ficha-full-tab-activo {
    color: #fff !important;
    background: var(--color-primario) !important;
    box-shadow: 0 4px 10px -4px rgba(216,67,21,0.45);
}
.ficha-full-tab-peligro { color: var(--color-alerta); }
.ficha-full-tab-peligro.ficha-full-tab-activo {
    background: var(--color-alerta) !important;
    box-shadow: 0 4px 10px -4px rgba(229,57,53,0.45);
}

/* Contenido de las tabs */
.ficha-full-contenido { padding: 1.25rem 0 2rem; }
.ficha-full-seccion { margin-bottom: 1.5rem; }
.ficha-full-seccion:last-child { margin-bottom: 0; }

.ficha-h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-acento);
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}
.ficha-h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-acento);
    margin: 0 0 0.6rem;
}

.ficha-full-grid-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}
@media (min-width: 640px) { .ficha-full-grid-pills { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ficha-full-grid-pills { grid-template-columns: repeat(6, 1fr); } }

.ficha-pill {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    transition: all 0.18s ease;
}
.ficha-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(55,71,79,0.12); }
.ficha-pill-lbl {
    font-size: 0.7rem;
    color: var(--color-texto-sec);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.25rem;
    font-weight: 600;
}
.ficha-pill-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-acento);
    margin: 0;
    letter-spacing: -0.01em;
}

/* KPI cards grandes (Resumen + Uso) */
.ficha-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
@media (min-width: 640px) { .ficha-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ficha-kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.ficha-kpi {
    --kpi-color: #D84315;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.15rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}
.ficha-kpi::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kpi-color), color-mix(in srgb, var(--kpi-color) 35%, transparent));
}
.ficha-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(55,71,79,0.18);
    border-color: color-mix(in srgb, var(--kpi-color) 25%, var(--color-borde));
}
.ficha-kpi-lbl {
    font-size: 0.72rem;
    color: var(--color-texto-sec);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.4rem;
    font-weight: 600;
}
.ficha-kpi-val {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--kpi-color);
    margin: 0 0 0.2rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.ficha-kpi-sub {
    font-size: 0.72rem;
    color: var(--color-texto-sec);
    margin: 0;
}

/* Skeletons */
.ficha-skeleton {
    background: linear-gradient(90deg, #f5ede0 0%, #fff8f0 50%, #f5ede0 100%);
    background-size: 200% 100%;
    animation: skelMove 1.4s ease-in-out infinite;
    color: var(--color-texto-sec);
    padding: 1.5rem;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed var(--color-borde);
    font-size: 0.85rem;
}
.ficha-skeleton-grande { padding: 3rem 1.5rem; font-size: 0.95rem; }
@keyframes skelMove {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Rango chips (tab Uso) */
.ficha-rango-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.ficha-rango-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.ficha-rango-chip {
    background: #fff;
    border: 1px solid var(--color-borde);
    color: var(--color-texto-sec);
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
}
.ficha-rango-chip:hover { border-color: var(--color-primario); color: var(--color-primario-text); }
.ficha-rango-chip-activo {
    background: var(--color-primario) !important;
    color: #fff !important;
    border-color: var(--color-primario) !important;
    box-shadow: 0 4px 10px -4px rgba(216,67,21,0.45);
}
.ficha-rango-custom {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.ficha-rango-lbl {
    font-size: 0.72rem;
    color: var(--color-texto-sec);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ficha-rango-lbl .input-xtryde { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
.ficha-rango-info {
    font-size: 0.78rem;
    color: var(--color-texto-sec);
    margin: 0.25rem 0 0;
}

/* Chart card */
.ficha-chart-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 1.1rem 1.2rem 0.9rem;
    box-shadow: 0 2px 8px -4px rgba(55,71,79,0.06);
}
.ficha-chart-sub {
    font-size: 0.78rem;
    color: var(--color-texto-sec);
    margin: 0 0 0.85rem;
}
.ficha-chart-wrap {
    position: relative;
    height: 220px;
    width: 100%;
}

/* Tablas desglose */
.ficha-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) { .ficha-grid-2 { grid-template-columns: 1fr 1fr; } }

.ficha-tabla-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
}
.ficha-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.ficha-tabla th {
    text-align: left;
    color: var(--color-texto-sec);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-borde);
}
.ficha-tabla td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid #f3ebde;
    color: var(--color-texto);
}
.ficha-tabla tbody tr:last-child td { border-bottom: none; }
.ficha-tabla tbody tr:hover { background: rgba(216,67,21,0.04); }
.ficha-tabla .text-right { text-align: right; }
.ficha-tabla .text-center { text-align: center; }
.ficha-tabla .text-sec { color: var(--color-texto-sec); }

.ficha-nota {
    font-size: 0.72rem;
    color: var(--color-texto-sec);
    margin-top: 0.85rem;
    font-style: italic;
    padding-left: 0.6rem;
    border-left: 2px solid var(--color-borde);
}

/* Acciones rápidas (cards clicables) */
.ficha-acciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
@media (min-width: 640px) { .ficha-acciones-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ficha-acciones-grid { grid-template-columns: repeat(4, 1fr); } }

.ficha-accion-card {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 0.95rem 1.05rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: all 0.18s ease;
    font-family: inherit;
}
.ficha-accion-card strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-acento);
}
.ficha-accion-card span {
    font-size: 0.76rem;
    color: var(--color-texto-sec);
    line-height: 1.35;
}
.ficha-accion-card:hover {
    border-color: var(--color-primario);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(216,67,21,0.25);
}
.ficha-accion-card:hover strong { color: var(--color-primario-text); }

/* Forms en la ficha */
.ficha-form { display: flex; flex-direction: column; gap: 0.85rem; }
.ficha-label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-acento);
    gap: 0.3rem;
}
.ficha-label .input-xtryde { font-weight: 400; }
.ficha-acciones { padding-top: 0.5rem; }

/* Info boxes (datos identificadores, trial activo) */
.ficha-info-box {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    padding: 0.9rem 1.05rem;
}
.ficha-info-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-acento);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ficha-info-linea {
    font-size: 0.85rem;
    margin: 0.15rem 0;
    display: flex;
    gap: 0.5rem;
    color: var(--color-texto);
}
.ficha-info-linea span {
    color: var(--color-texto-sec);
    min-width: 70px;
    font-weight: 500;
}
.ficha-info-trial {
    background: rgba(216,67,21,0.08);
    border-color: rgba(216,67,21,0.3);
}
.ficha-info-trial .ficha-info-titulo { color: var(--color-primario-text); }
.ficha-info-peligro {
    background: rgba(198,40,40,0.06);
    border-color: rgba(198,40,40,0.3);
}

/* Progress bar IA */
.ficha-progress {
    height: 8px;
    background: var(--color-fondo);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--color-borde);
}
.ficha-progress-fill {
    height: 100%;
    background: var(--color-primario);
    transition: width 0.4s ease;
}

/* Pagos */
.ficha-pagos-lista {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.ficha-pago-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-borde);
    align-items: center;
    gap: 0.75rem;
}
.ficha-pago-item:last-child { border-bottom: none; }
.ficha-pago-item:hover { background: rgba(216,67,21,0.03); }
.ficha-pago-eliminar {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-texto-sec);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.ficha-pago-eliminar:hover {
    background: rgba(229,57,53,0.10);
    color: var(--color-alerta);
    border-color: rgba(229,57,53,0.25);
}

/* Peligro */
.ficha-peligro-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid rgba(198,40,40,0.25);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

/* Helpers de color reusables (compatible con HTML del controller) */
.text-sec { color: var(--color-texto-sec); }
.text-alerta { color: var(--color-alerta); }

/* Responsive: header más compacto en móvil */
@media (max-width: 640px) {
    .ficha-full-header { padding: 1.5rem 1.25rem 1.75rem; border-radius: 18px; }
    .ficha-full-avatar { width: 64px; height: 64px; min-width: 64px; font-size: 1.4rem; border-radius: 16px; }
    .ficha-full-titulo { font-size: 1.35rem; }
    .ficha-full-subtitulo { font-size: 0.84rem; }
    .ficha-chart-wrap { height: 180px; }
    .ficha-full-back { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
}

/* ============================================================
   SISTEMA EDITORIAL DASHBOARD — Identidad Xtryde de marca v3
   Paleta: terracota + jade + carbon + cremas (mismo deck Sales)
   Tipografía: DM Sans + DM Mono (marca) + Fraunces (cifras hero)
   ============================================================ */

:root {
    --ficha-radius: 4px;
    --ficha-radius-lg: 16px;
    --ficha-sombra: 0 1px 0 rgba(42,54,61,0.04), 0 10px 24px -16px rgba(42,54,61,0.14);
    --ficha-sombra-hover: 0 2px 0 rgba(42,54,61,0.08), 0 16px 32px -18px rgba(42,54,61,0.22);
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Paleta oficial del Sales Deck v4 */
    --xt-terracota: #D84315;
    --xt-terracota-dark: #BF360C;
    --xt-terracota-soft: #F2A085;
    --xt-jade: #00897B;
    --xt-jade-dark: #00695C;
    --xt-carbon: #2A363D;
    --xt-crema: #FFF8F0;
    --xt-crema-2: #F5ECDD;
    --xt-crema-3: #EDE0CC;
    --xt-line: rgba(42, 54, 61, 0.16);
    --xt-line-strong: rgba(42, 54, 61, 0.32);
    --xt-muted: #6B6B6B;
    /* Greca xicalcoliuhqui — usada como cinta superior en algunas fichas */
    --xt-greca-terracota: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%23D84315' stroke-opacity='0.4' stroke-width='1.5'/><path d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%23D84315' stroke-opacity='0.4' stroke-width='1.5'/></svg>");
    --xt-greca-crema: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%23FFF8F0' stroke-opacity='0.42' stroke-width='1.5'/><path d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%23FFF8F0' stroke-opacity='0.42' stroke-width='1.5'/></svg>");
    --xt-greca-soft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%232A363D' stroke-opacity='0.18' stroke-width='1.5'/><path d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%232A363D' stroke-opacity='0.18' stroke-width='1.5'/></svg>");
}

/* --- Ficha base — watermark del isotipo SIEMPRE presente en todas las fichas --- */
.ficha-xtryde {
    position: relative;
    overflow: hidden;
    border-radius: var(--ficha-radius-lg);
    padding: 1.65rem 1.55rem 1.4rem;
    box-shadow: var(--ficha-sombra);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    isolation: isolate;
    background: var(--xt-crema-2);
    color: var(--xt-carbon);
}
.ficha-xtryde:hover {
    box-shadow: var(--ficha-sombra-hover);
}
.ficha-xtryde > * { position: relative; z-index: 1; }

/* Watermark del isotipo X — default en TODAS las fichas. Cada variante
   ajusta tamaño y opacidad para evitar repetición visual. */
.ficha-xtryde::after {
    content: "";
    position: absolute;
    right: var(--watermark-x, -36px);
    bottom: var(--watermark-y, -36px);
    width: var(--watermark-size, 140px);
    height: var(--watermark-size, 140px);
    background-image: var(--watermark-img, url("../img/isotipo-terracota.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: var(--watermark-opacity, 0.08);
    pointer-events: none;
    z-index: 0;
}
/* Modifier opt-in para watermark más grande (hero / signature) */
.ficha-iso {
    --watermark-size: 200px;
    --watermark-opacity: 0.16;
    --watermark-x: -40px;
    --watermark-y: -40px;
}

/* Modifier de cinta de greca (xicalcoliuhqui) en la parte superior */
.ficha-greca::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 32px 16px;
    z-index: 2;
    pointer-events: none;
}

/* Variantes de color — paleta reducida a 3 (+ terracota signature solo en hero) */
.ficha-crema {
    background: var(--xt-crema-2);
    color: var(--xt-carbon);
    --watermark-img: url("../img/isotipo-terracota.svg");
    --watermark-opacity: 0.08;
    --watermark-size: 140px;
}
.ficha-crema-3 {
    background: var(--xt-crema-3);
    color: var(--xt-carbon);
    --watermark-img: url("../img/isotipo-terracota.svg");
    --watermark-opacity: 0.09;
    --watermark-size: 140px;
}
.ficha-terracota {
    background: var(--xt-terracota);
    color: var(--xt-crema);
    --watermark-img: url("../img/isotipo-blanco.svg");
    --watermark-opacity: 0.16;
    --watermark-size: 200px;
}
.ficha-jade {
    background: var(--xt-jade);
    color: var(--xt-crema);
    --watermark-img: url("../img/isotipo-blanco.svg");
    --watermark-opacity: 0.14;
    --watermark-size: 150px;
}
.ficha-dark {
    background: var(--xt-carbon);
    color: var(--xt-crema);
    --watermark-img: url("../img/isotipo-blanco.svg");
    --watermark-opacity: 0.12;
    --watermark-size: 150px;
}
.ficha-jade.ficha-greca::before { background-image: var(--xt-greca-crema); }
.ficha-terracota.ficha-greca::before { background-image: var(--xt-greca-crema); }
.ficha-dark.ficha-greca::before { background-image: var(--xt-greca-crema); }
/* Alias legacy */
.ficha-verde { background: var(--xt-jade); color: var(--xt-crema); }
.ficha-acento { background: var(--xt-carbon); color: var(--xt-crema); }
.ficha-peach { background: var(--xt-crema-3); color: var(--xt-carbon); }

/* --- Sello numerado editorial (mono DM Mono, letter-spacing 0.22em del deck) --- */
.sello-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
    display: inline-block;
    margin-bottom: 1rem;
    /* No partir palabras: si la ficha es muy angosta, baja el letter-spacing
       en vez de mostrar "VE\nDE\nTU" letra por letra. */
    word-break: keep-all;
    overflow-wrap: normal;
}
@media (max-width: 480px) {
    .sello-num { letter-spacing: 0.14em; font-size: 0.66rem; }
}
.sello-num strong {
    font-weight: 500;
    margin-right: 0.7rem;
    opacity: 1;
    color: var(--xt-terracota);
}
.ficha-terracota .sello-num strong,
.ficha-jade .sello-num strong,
.ficha-dark .sello-num strong { color: var(--xt-crema); }

/* --- Tipografía display (números KPI) — mix DM Sans (peso) + Fraunces (cifras hero) --- */
.cifra-display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.cifra-hero {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.cifra-sec {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.0;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* --- KPI Hero (Ingresos en 2 columnas) --- */
.kpi-hero {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}
.kpi-hero .kpi-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

/* --- KPI editorial secundario --- */
.kpi-editorial {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
}

/* Delta chip (variación %) — píldora discreta */
.delta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,248,240,0.18);
    color: var(--xt-crema);
}
.ficha-crema .delta-chip,
.ficha-crema-3 .delta-chip,
.ficha-peach .delta-chip {
    background: rgba(42,54,61,0.08);
    color: var(--xt-jade-dark);
}
.ficha-crema .delta-chip.delta-neg,
.ficha-crema-3 .delta-chip.delta-neg,
.ficha-peach .delta-chip.delta-neg {
    background: rgba(216,67,21,0.10);
    color: var(--xt-terracota-dark);
}

/* --- Header de sección editorial — DM Sans bold + greca line --- */
.seccion-editorial {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--xt-line);
}
.seccion-editorial h2 {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--xt-carbon);
}
.seccion-editorial .seccion-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

/* --- Etiqueta de categoría en pie de ficha (opcional, usar con clase .con-pie) --- */
.ficha-pie {
    margin-top: 1.4rem;
    padding-top: 0.95rem;
    border-top: 1px solid currentColor;
    opacity: 0.85;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.ficha-crema .ficha-pie,
.ficha-crema-3 .ficha-pie {
    border-top-color: var(--xt-line);
    opacity: 1;
    color: var(--xt-terracota);
}
.ficha-peach .ficha-pie {
    border-top-color: rgba(42,54,61,0.18);
    opacity: 1;
    color: var(--xt-terracota-dark);
}
.ficha-terracota .ficha-pie,
.ficha-jade .ficha-pie,
.ficha-dark .ficha-pie {
    border-top-color: rgba(255,248,240,0.25);
    color: rgba(255,248,240,0.85);
    opacity: 1;
}

/* --- Tarjeta-panel grande (para tendencia / charts) sin watermark por default --- */
.panel-xtryde {
    position: relative;
    overflow: hidden;
    background: white;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--ficha-sombra);
}
/* Cinta de greca arriba del panel — modifier opt-in para marcar paneles signature */
.panel-greca::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 32px 16px;
    z-index: 1;
    pointer-events: none;
}
.panel-greca { padding-top: 2.1rem; }
.panel-xtryde > * { position: relative; z-index: 2; }

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.panel-titulo {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--xt-carbon);
}
.panel-subtitulo {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-top: 0.35rem;
}

/* Grid editorial KPIs: hero + 5 chicas */
.kpi-grid-editorial {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .kpi-grid-editorial {
        grid-template-columns: repeat(4, 1fr);
    }
    .kpi-grid-editorial .kpi-hero {
        grid-column: span 2;
        grid-row: span 2;
    }
}
@media (min-width: 1280px) {
    .kpi-grid-editorial {
        grid-template-columns: repeat(6, 1fr);
    }
    .kpi-grid-editorial .kpi-hero {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Grid de insights — mezcla de fichas crema/terracota/verde */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
    .insights-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .insights-grid { grid-template-columns: repeat(3, 1fr); }
}

.insight-titular {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin-top: 0.4rem;
}

/* Responsive móvil */
@media (max-width: 767px) {
    .ficha-xtryde { padding: 1.15rem 1.15rem 1rem; }
    /* Hero solo expande a 2 col cuando el grid padre TIENE 2+ columnas en móvil
       (dashboard). Otros grids (corte-caja) son 1fr en móvil y no deben crear
       una columna implícita con span 2. Sobrescribimos el `grid-column: span 2`
       de la regla base para evitar columnas fantasma en grids 1fr. */
    .kpi-hero { min-height: 160px; grid-column: auto; }
    .kpi-grid-editorial .kpi-hero { grid-column: span 2; }
    .cifra-hero { font-size: 2.4rem; }
    .cifra-sec { font-size: 1.5rem; }
    .panel-xtryde { padding: 1.15rem; }
    .seccion-editorial h2 { font-size: 1.3rem; }
}

/* ============================================================
   Estado de Resultados — layout responsive
   ============================================================ */
.er-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.er-concepto {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.er-montos {
    display: flex;
    gap: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}
.er-monto {
    width: 7rem;
    display: inline-block;
}
.er-resultado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.er-resultado-label { font-size: 0.95rem; min-width: 0; flex: 1; }
.er-resultado-final .er-resultado-label { font-size: 1.05rem; }
.er-resultado-margen { margin-left: 0.4rem; white-space: nowrap; }
.er-resultado-valor { font-size: 1.15rem; flex-shrink: 0; white-space: nowrap; }
.er-resultado-final .er-resultado-valor { font-size: 1.5rem; }

@media (max-width: 640px) {
    .er-fila { gap: 0.5rem; padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
    .er-fila[style*="padding-left: 2.25rem"] { padding-left: 1.4rem !important; }
    .er-fila[style*="padding-left: 3.5rem"] { padding-left: 2rem !important; }
    .er-montos { gap: 0.5rem; }
    .er-monto { width: auto; min-width: 4.5rem; font-size: 0.82rem; }
    .er-monto-parcial:empty { display: none; }
    .er-monto-total:empty { display: none; }

    .er-resultado {
        gap: 0.5rem;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        flex-wrap: wrap;
    }
    .er-resultado-label { font-size: 0.85rem; flex-basis: 100%; }
    .er-resultado-final .er-resultado-label { font-size: 0.95rem; }
    .er-resultado-margen {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
    .er-resultado-valor {
        font-size: 1.25rem;
        flex-basis: 100%;
        text-align: right;
    }
    .er-resultado-final .er-resultado-valor { font-size: 1.55rem; }
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ficha-xtryde { transition: none; }
}

/* ============================================================
   TOP PRODUCTOS — Podium editorial (winner + lista compacta)
   ============================================================ */
.podium-wrap { display: flex; flex-direction: column; gap: 0.85rem; }

/* Winner card — el #1 del ranking */
.podium-winner {
    position: relative;
    overflow: hidden;
    border-radius: var(--ficha-radius-lg);
    padding: 1.4rem 1.4rem 1.2rem;
    background: var(--xt-carbon);
    color: var(--xt-crema);
    isolation: isolate;
}
.podium-winner::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -32px;
    width: 140px; height: 140px;
    background: url("../img/isotipo-blanco.svg") no-repeat center/contain;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
.podium-winner > * { position: relative; z-index: 1; }
.podium-winner-rank {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,248,240,0.7);
    margin-bottom: 0.6rem;
}
.podium-winner-rank strong { color: var(--xt-crema); margin-right: 0.5rem; }
.podium-winner-nombre {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
    text-wrap: balance;
}
.podium-winner-valor {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--xt-crema);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Lista compacta — posiciones 02 a 05 */
.podium-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.podium-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.podium-row:hover { background: rgba(216,67,21,0.06); }
.podium-row-rank {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xt-terracota);
    min-width: 1.6rem;
}
.podium-row-nombre {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--xt-carbon);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podium-row-valor {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--xt-carbon);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   MINI-CHIPS para info compacta en headers de panel
   ============================================================ */
.chip-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(216,67,21,0.08);
    color: var(--xt-terracota);
}
.chip-meta.jade { background: rgba(0,137,123,0.10); color: var(--xt-jade-dark); }
.chip-meta.dark { background: rgba(42,54,61,0.08); color: var(--xt-carbon); }

/* ============================================================
   WRAPPER de tabs outer (Dashboard | Reportes) — dashboard_reportes.js
   ============================================================ */
.dr-tabs-wrap {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: flex-start;
}
.dr-tabs-wrap .dash-tabs {
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
}

/* ============================================================
   DASHBOARD CHROME — header editorial (título Fraunces + tabs + control bar)
   ============================================================ */
.dash-chrome {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.dash-chrome-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.dash-titulo {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--xt-carbon);
    line-height: 1;
}

/* Tabs editoriales: pill group con fondo carbon */
.dash-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem;
    background: rgba(42,54,61,0.06);
    border-radius: 999px;
    flex-wrap: wrap;
}
.dash-tab {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-carbon);
    background: transparent;
    border: 0;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    line-height: 1;
}
.dash-tab:hover { background: rgba(42,54,61,0.06); }
.dash-tab.is-active {
    background: var(--xt-terracota);
    color: var(--xt-crema);
    box-shadow: 0 2px 0 rgba(216,67,21,0.25);
}
.dash-tab.is-active:hover { background: var(--xt-terracota-dark); }
.dash-tab-ghost { background: rgba(255,248,240,0.4); }
.dash-tab-ghost:hover { background: rgba(255,248,240,0.7); }

/* Control bar — sin fondo card, layout horizontal limpio */
.dash-chrome-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--xt-line);
    border-bottom: 1px solid var(--xt-line);
    background: var(--xt-crema);
    border-radius: 6px;
}
.dash-control {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.dash-control.hidden { display: none; }
.dash-control-lab {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.dash-select {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--xt-carbon);
    background: transparent;
    border: 1px solid var(--xt-line);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.dash-select:hover { border-color: var(--xt-terracota); }
.dash-select:focus {
    outline: 2px solid var(--xt-terracota);
    outline-offset: 2px;
    border-color: var(--xt-terracota);
}
.dash-rango-label {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

@media (max-width: 640px) {
    .dash-titulo { font-size: 1.6rem; }
    .dash-tabs { width: 100%; justify-content: stretch; }
    .dash-tab { flex: 1; padding: 0.5rem 0.5rem; font-size: 0.65rem; letter-spacing: 0.12em; }
    .dash-rango-label { margin-left: 0; width: 100%; text-align: left; }

    /* Opt-in: barras con 4+ tabs usan .dash-tabs-scroll en lugar del flex:1
       stretch que aplasta etiquetas largas como "Factura global" o "Proveedores".
       Resultado: pills a ancho natural + scroll horizontal con snap + fade hint
       en el borde derecho. Llamar a _centrarTabActivo(btn) al cambiar de tab
       para que la activa quede centrada. */
    .dash-tabs.dash-tabs-scroll {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0.3rem 0.4rem;
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }
    .dash-tabs.dash-tabs-scroll::-webkit-scrollbar { display: none; }
    .dash-tabs.dash-tabs-scroll .dash-tab {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        padding: 0.55rem 1rem !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.14em !important;
        min-height: 38px;
        white-space: nowrap;
    }
    .dash-tabs.dash-tabs-scroll .dash-tab.is-active { scroll-snap-align: center; }
    /* Si la barra esta dentro de un dash-chrome-top, stack vertical para que
       las tabs tomen ancho completo (titulo arriba, tabs abajo). */
    .dash-chrome:has(.dash-tabs-scroll) .dash-chrome-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
}

/* ============================================================
   STAT CHIPS — kpi compacto editorial (label mono + valor Fraunces)
   Usado arriba de charts (tendencia, día/hora) para resumir señales
   ============================================================ */
.stat-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}
.stat-chip {
    position: relative;
    padding: 0.85rem 1rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--xt-line);
    background: var(--xt-crema);
    overflow: hidden;
}
.stat-chip.solid-jade { background: var(--xt-jade); color: var(--xt-crema); border-color: transparent; }
.stat-chip.solid-terracota { background: var(--xt-terracota); color: var(--xt-crema); border-color: transparent; }
.stat-chip.solid-dark { background: var(--xt-carbon); color: var(--xt-crema); border-color: transparent; }
.stat-chip .lab {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.3rem;
}
.stat-chip .val {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.stat-chip .sub {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    opacity: 0.7;
    margin-top: 0.2rem;
    text-transform: uppercase;
}

/* ============================================================
   BARRA STACKED HORIZONTAL — sustituye donuts (categorías, métodos)
   Layout: segmento[] + leaderboard lateral
   ============================================================ */
.stack-wrap { display: flex; flex-direction: column; gap: 1.1rem; }
.stack-bar {
    display: flex;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--xt-crema-2);
}
.stack-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xt-crema);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: filter 0.15s ease;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 0.4rem;
}
.stack-seg:hover { filter: brightness(1.1); }
.stack-leaderboard {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1.2rem;
}
.stack-leaderboard li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--xt-line);
    font-size: 0.85rem;
}
.stack-dot {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.stack-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: var(--xt-carbon);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stack-pct {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--xt-muted);
    min-width: 3rem;
    text-align: right;
}

/* ============================================================
   HEATMAP DÍA × HORA — versión mejorada con marginales y peak
   ============================================================ */
.hm-table {
    display: grid;
    grid-template-columns: 36px repeat(24, minmax(22px, 1fr)) 92px;
    gap: 3px;
    min-width: 780px;
}
.hm-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--xt-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-cell {
    height: 24px;
    border-radius: 3px;
    background: var(--xt-crema-2);
    position: relative;
    transition: transform 0.12s ease;
}
.hm-cell:hover { transform: scale(1.18); z-index: 3; outline: 1px solid var(--xt-carbon); }
.hm-cell.peak {
    outline: 2px solid var(--xt-jade-dark);
    outline-offset: 1px;
}
.hm-total {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--xt-carbon);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.hm-total.col {
    font-size: 0.6rem;
    color: var(--xt-muted);
    justify-content: center;
    padding-right: 0;
    transform: rotate(-90deg);
    transform-origin: center;
}
.hm-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-top: 0.85rem;
}
.hm-scale {
    display: inline-flex;
    height: 10px;
    width: 120px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(216,67,21,0.06), rgba(216,67,21,0.95));
}

/* ============================================================
   SEMÁFORO de inventario / alertas — fichas tipo card con barra
   ============================================================ */
.semaforo-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: clamp(280px, 60vh, 480px);
    overflow-y: auto;
    padding-right: 0.4rem;
}
.semaforo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 1rem;
    align-items: center;
    padding: 0.8rem 1rem;
    background: var(--xt-crema-2);
    border-radius: 10px;
    border-left: 4px solid var(--xt-line);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;  /* Evita que flex aplaste filas cuando hay muchas y el wrap tiene max-height */
}
.semaforo-row.critico { border-left-color: var(--xt-terracota); background: rgba(216,67,21,0.07); }
.semaforo-row.bajo    { border-left-color: #E8A33C; background: rgba(232,163,60,0.08); }
.semaforo-row.estable { border-left-color: var(--xt-jade); background: rgba(0,137,123,0.06); }
.semaforo-nombre {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--xt-carbon);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.semaforo-meta {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--xt-muted);
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.semaforo-valor {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--xt-carbon);
    text-align: right;
    font-variant-numeric: tabular-nums;
    grid-row: span 2;
    white-space: nowrap;
}
.semaforo-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 99px;
    background: rgba(42,54,61,0.08);
    overflow: hidden;
}
.semaforo-bar > span {
    display: block;
    height: 100%;
    background: currentColor;
    border-radius: 99px;
}
.semaforo-row.critico .semaforo-bar > span { background: var(--xt-terracota); }
.semaforo-row.bajo .semaforo-bar > span    { background: #E8A33C; }
.semaforo-row.estable .semaforo-bar > span { background: var(--xt-jade); }

/* Móvil: tipografía más compacta + meta con menos letter-spacing para no overflow */
@media (max-width: 640px) {
    .semaforo-row { padding: 0.7rem 0.85rem; gap: 0.3rem 0.7rem; }
    .semaforo-nombre { font-size: 0.88rem; }
    .semaforo-valor  { font-size: 0.95rem; }
    .semaforo-meta   { font-size: 0.6rem; letter-spacing: 0.1em; }
}

/* ============================================================
   HISTORIAL DE VENTAS — Metáfora "Bitácora del libro mayor"
   Patrón único del módulo: NO usa dash-chrome ni fichas KPI hero.
   En su lugar: masthead de bitácora + cintillo + asientos contables.
   ============================================================ */

/* --- Masthead "Bitácora" (header del módulo) --- */
.hv-masthead {
    position: relative;
    margin: 0 0 1.25rem;
    padding: 1.35rem 0 1.15rem;
    border-top: 2px solid var(--xt-carbon);
    border-bottom: 1px solid var(--xt-line);
}
/* Cinta de greca xicalcoliuhqui pegada al border-top (filo del libro) */
.hv-masthead::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 12px;
    background-image: var(--xt-greca-terracota);
    background-repeat: repeat-x;
    background-size: 24px 12px;
    opacity: 0.75;
    pointer-events: none;
}
.hv-masthead-rotulo {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--xt-terracota);
    margin-bottom: 0.35rem;
}
.hv-masthead-rotulo strong {
    color: var(--xt-carbon);
    font-weight: 600;
}
.hv-masthead-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.85rem, 3.6vw, 2.55rem);
    line-height: 1.05;
    color: var(--xt-carbon);
    margin: 0;
    letter-spacing: -0.005em;
}
.hv-masthead-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.hv-masthead-acciones {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hv-masthead-btn {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.55rem 0.95rem;
    border-radius: 4px;
    border: 1px solid var(--xt-carbon);
    background: transparent;
    color: var(--xt-carbon);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.hv-masthead-btn:hover {
    background: var(--xt-carbon);
    color: var(--xt-crema);
}
.hv-masthead-btn.is-primary {
    background: var(--xt-terracota);
    border-color: var(--xt-terracota);
    color: var(--xt-crema);
}
.hv-masthead-btn.is-primary:hover {
    background: var(--xt-terracota-dark);
    border-color: var(--xt-terracota-dark);
}

/* --- Tabs de estado: capítulos de la bitácora (segmented inline) --- */
.hv-capitulos {
    display: inline-flex;
    gap: 0;
    padding: 0;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    overflow: hidden;
}
.hv-capitulo {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.6rem 1.1rem;
    background: transparent;
    color: var(--xt-muted);
    border: 0;
    border-right: 1px solid var(--xt-line);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    white-space: nowrap;
}
.hv-capitulo:last-child { border-right: 0; }
.hv-capitulo:hover { color: var(--xt-carbon); }
.hv-capitulo.is-active {
    background: var(--xt-carbon);
    color: var(--xt-crema);
}
.hv-capitulo .conteo {
    display: inline-block;
    margin-left: 0.4rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.85;
}

/* --- Barra de filtros compacta (sin labels arriba, estilo formulario contable) --- */
.hv-filtros-row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: #FFFFFF;
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    margin: 0.85rem 0 1.1rem;
}
@media (min-width: 640px) { .hv-filtros-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hv-filtros-row { grid-template-columns: 1.2fr 1fr 1fr 1fr 1.4fr; } }

.hv-campo {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.hv-campo-lab {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.hv-campo input,
.hv-campo select {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.88rem;
    color: var(--xt-carbon);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--xt-line);
    border-radius: 0;
    padding: 0.3rem 0;
    outline: none;
    transition: border-color 140ms ease;
}
.hv-campo input:focus,
.hv-campo select:focus {
    border-bottom-color: var(--xt-terracota);
}

/* --- Cintillo de stats inline (estilo encabezado de página de diario) --- */
.hv-cintillo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 0;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
/* Isotipo X discreto al fondo del cintillo (lado derecho, opacity baja) */
.hv-cintillo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    width: 130px;
    height: 130px;
    transform: translateY(-50%);
    background-image: url("../img/isotipo-terracota.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}
.hv-cintillo > * { position: relative; z-index: 1; }
@media (min-width: 768px) { .hv-cintillo { grid-template-columns: repeat(4, 1fr); } }
.hv-cintillo-stat {
    padding: 0.7rem 0.95rem;
    border-right: 1px solid var(--xt-line);
    border-bottom: 1px solid var(--xt-line);
    position: relative;
}
.hv-cintillo-stat:nth-child(2n) { border-right: 0; }
@media (min-width: 768px) {
    .hv-cintillo-stat:nth-child(2n) { border-right: 1px solid var(--xt-line); }
    .hv-cintillo-stat:last-child { border-right: 0; }
    .hv-cintillo-stat { border-bottom: 0; }
}
.hv-cintillo-lab {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.2rem;
}
.hv-cintillo-val {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--xt-carbon);
}
.hv-cintillo-val.is-jade { color: var(--xt-jade-dark); }
.hv-cintillo-val.is-terra { color: var(--xt-terracota); }
.hv-cintillo-val.is-alerta { color: #B71C1C; }

/* --- Asiento contable: card de venta con rail vertical de color --- */
.hv-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 640px)  { .hv-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hv-lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .hv-lista { grid-template-columns: repeat(4, 1fr); } }

.hv-asiento {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    padding: 0.7rem 0.8rem 0.7rem 1rem;
    overflow: hidden;
    transition: border-color 160ms ease, transform 160ms ease;
    font-size: 0.85rem;
}
.hv-asiento::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--xt-jade); /* default: activa */
}
/* Sello del isotipo X en esquina inferior derecha (muy sutil) */
.hv-asiento::after {
    content: "";
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 38px;
    height: 38px;
    background-image: url("../img/isotipo-terracota.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}
.hv-asiento > * { position: relative; z-index: 1; }
.hv-asiento.is-cancelada::after { opacity: 0.04; }
.hv-asiento.is-cancelada::before { background: #B71C1C; }
.hv-asiento.is-credito::before   { background: var(--xt-terracota); }
.hv-asiento.is-credito.is-saldado::before { background: var(--xt-jade); }
.hv-asiento.is-credito.is-vencido::before { background: #B71C1C; }
.hv-asiento:hover { border-color: var(--xt-line-strong); }

.hv-asiento-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.hv-asiento-folio {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--xt-carbon);
    letter-spacing: -0.01em;
}
.hv-asiento-folio span {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
    display: block;
    margin-bottom: 0.1rem;
}
.hv-asiento-fecha {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--xt-muted);
    text-align: right;
    white-space: nowrap;
    line-height: 1.3;
}
.hv-asiento-monto {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.05;
    color: var(--xt-carbon);
    margin: 0.2rem 0 0.3rem;
    letter-spacing: -0.01em;
}
.hv-asiento.is-cancelada .hv-asiento-monto { color: var(--xt-muted); text-decoration: line-through; text-decoration-color: rgba(183,28,28,0.4); }

.hv-asiento-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}
.hv-asiento-vendedor {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.72rem;
    color: var(--xt-muted);
    line-height: 1.3;
}
.hv-asiento-vendedor strong {
    color: var(--xt-carbon);
    font-weight: 600;
}

/* Badges editoriales (borde, no relleno fuerte) */
.hv-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.12rem 0.42rem;
    border-radius: 3px;
    border: 1px solid currentColor;
    background: transparent;
    line-height: 1.35;
    white-space: nowrap;
}
.hv-badge.is-activa     { color: var(--xt-jade-dark); }
.hv-badge.is-cancelada  { color: #B71C1C; background: rgba(183,28,28,0.06); }
.hv-badge.is-metodo     { color: var(--xt-carbon); }
.hv-badge.is-saldado    { color: var(--xt-jade-dark); }
.hv-badge.is-pendiente  { color: #9A6600; }
.hv-badge.is-vencido    { color: #B71C1C; background: rgba(183,28,28,0.08); }
.hv-badge.is-sin-fact   { color: #B71C1C; background: rgba(183,28,28,0.06); }
.hv-asiento-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
}

/* Bloque de crédito dentro del asiento */
.hv-credito {
    margin: 0.4rem 0 0;
    padding: 0.42rem 0.55rem;
    background: var(--xt-crema-2);
    border-left: 2px solid var(--xt-terracota);
    border-radius: 0 4px 4px 0;
    font-size: 0.72rem;
}
.hv-credito.is-saldado { border-left-color: var(--xt-jade); background: rgba(0,137,123,0.05); }
.hv-credito-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.08rem 0;
}
.hv-credito-row .lab {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.hv-credito-row .val {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-weight: 600;
    color: var(--xt-carbon);
}
.hv-credito-row .val.is-saldo { color: var(--xt-terracota); }
.hv-credito-vence {
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

/* Nota de cancelación dentro del asiento */
.hv-cancelnota {
    margin-top: 0.4rem;
    padding: 0.4rem 0.55rem;
    background: rgba(183,28,28,0.04);
    border-left: 2px solid #B71C1C;
    border-radius: 0 4px 4px 0;
    font-size: 0.72rem;
    color: var(--xt-carbon);
}
.hv-cancelnota .quien {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B71C1C;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.hv-cancelnota .motivo {
    color: var(--xt-carbon);
    font-style: italic;
}

/* Sello "VOID" estampado para asientos cancelados (decorativo) */
.hv-asiento.is-cancelada .hv-sello-void {
    position: absolute;
    top: 0.7rem;
    right: 0.55rem;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    color: #B71C1C;
    border: 1.5px solid #B71C1C;
    padding: 0.12rem 0.38rem;
    transform: rotate(-8deg);
    opacity: 0.7;
    pointer-events: none;
    background: rgba(255,248,240,0.6);
}

/* Acciones del asiento */
.hv-asiento-acciones {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--xt-line);
}
.hv-action {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.45rem;
    border-radius: 3px;
    border: 1px solid var(--xt-carbon);
    background: transparent;
    color: var(--xt-carbon);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.hv-action:hover {
    background: var(--xt-carbon);
    color: var(--xt-crema);
}
.hv-action.is-danger {
    border-color: #B71C1C;
    color: #B71C1C;
}
.hv-action.is-danger:hover {
    background: #B71C1C;
    color: var(--xt-crema);
}

/* Vacío editorial */
.hv-vacio-editorial {
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed var(--xt-line);
    border-radius: 4px;
    background: var(--xt-crema-2);
}
.hv-vacio-editorial .rotulo {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--xt-terracota);
    margin-bottom: 0.4rem;
}
.hv-vacio-editorial .msg {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--xt-carbon);
}

/* --- Modal "hoja del diario" --- */
.hv-modal-hoja {
    background: var(--xt-crema);
    border-radius: 4px;
    border: 1px solid var(--xt-line);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.hv-modal-hoja .hoja-cab {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem 0.9rem;
    border-bottom: 2px solid var(--xt-carbon);
    overflow: hidden;
}
/* Cinta de greca terracota arriba del cabezal del modal */
.hv-modal-hoja .hoja-cab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background-image: var(--xt-greca-terracota);
    background-repeat: repeat-x;
    background-size: 24px 12px;
    opacity: 0.7;
    pointer-events: none;
}
.hv-modal-hoja .hoja-cab > * { position: relative; z-index: 1; }
.hv-modal-hoja .hoja-rotulo {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--xt-terracota);
    margin-bottom: 0.25rem;
}
.hv-modal-hoja .hoja-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.65rem;
    color: var(--xt-carbon);
    margin: 0;
    letter-spacing: -0.01em;
}
.hv-modal-hoja .hoja-cerrar {
    background: transparent;
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    color: var(--xt-carbon);
    cursor: pointer;
    line-height: 1;
}
.hv-modal-hoja .hoja-cerrar:hover { background: var(--xt-carbon); color: var(--xt-crema); }
.hv-modal-hoja .hoja-cuerpo { padding: 1.1rem 1.4rem 1.4rem; }

.hv-hoja-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    background: #FFFFFF;
    margin-bottom: 1.1rem;
}
.hv-hoja-meta > div {
    padding: 0.7rem 0.9rem;
    border-right: 1px solid var(--xt-line);
    border-bottom: 1px solid var(--xt-line);
}
.hv-hoja-meta > div:nth-child(2n) { border-right: 0; }
.hv-hoja-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.hv-hoja-meta .lab {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.18rem;
}
.hv-hoja-meta .val {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-weight: 600;
    color: var(--xt-carbon);
    font-size: 0.9rem;
}
.hv-hoja-meta .val.is-monto {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Tabla de items en modal */
.hv-hoja-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
}
.hv-hoja-tabla thead th {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--xt-carbon);
    background: transparent;
    font-weight: 500;
}
.hv-hoja-tabla tbody td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--xt-line);
    color: var(--xt-carbon);
}
.hv-hoja-tabla tbody tr:last-child td { border-bottom: 0; }
.hv-hoja-tabla .num { font-variant-numeric: tabular-nums; }

/* Bloque de crédito en modal — variante extendida */
.hv-hoja-credito {
    background: #FFFFFF;
    border: 1px solid var(--xt-line);
    border-left: 3px solid var(--xt-terracota);
    border-radius: 0 4px 4px 0;
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
}
.hv-hoja-credito.is-saldado { border-left-color: var(--xt-jade); }
.hv-hoja-credito.is-vencido { border-left-color: #B71C1C; }
.hv-hoja-credito-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}
.hv-hoja-credito-cab .rotulo {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-carbon);
    font-weight: 600;
}
.hv-hoja-credito-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}
.hv-hoja-credito-grid > div .lab {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.hv-hoja-credito-grid > div .val {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-weight: 600;
    color: var(--xt-carbon);
}

/* Cancelación stamp en modal */
.hv-hoja-cancel-stamp {
    background: rgba(183,28,28,0.06);
    border: 1px solid #B71C1C;
    border-radius: 4px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
    position: relative;
}
.hv-hoja-cancel-stamp .rotulo {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #B71C1C;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.hv-hoja-cancel-stamp .quien {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    color: var(--xt-carbon);
    margin-bottom: 0.18rem;
    font-size: 0.92rem;
}
.hv-hoja-cancel-stamp .quien strong { font-weight: 600; }
.hv-hoja-cancel-stamp .fecha {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--xt-muted);
    margin-bottom: 0.5rem;
}
.hv-hoja-cancel-stamp .motivo {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--xt-carbon);
    border-left: 2px solid #B71C1C;
    padding-left: 0.7rem;
}

/* Banner legacy editorial */
.hv-banner-legacy-ed {
    margin-bottom: 1.1rem;
    padding: 0.85rem 1rem;
    background: var(--xt-crema-3);
    border: 1px solid var(--xt-line);
    border-left: 3px solid #E8A33C;
    border-radius: 0 4px 4px 0;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.hv-banner-legacy-ed .rotulo {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9A6600;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.hv-banner-legacy-ed .msg {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--xt-carbon);
    font-weight: 500;
}
.hv-banner-legacy-ed .sub {
    font-size: 0.78rem;
    color: var(--xt-muted);
    margin-top: 0.2rem;
}

/* Modal "Cancelar venta" editorial */
.hv-modal-cancelar {
    background: var(--xt-crema);
    border-radius: 4px;
    border: 1px solid var(--xt-line);
    border-top: 3px solid #B71C1C;
    width: 100%;
    max-width: 480px;
    padding: 1.3rem 1.4rem 1.4rem;
}
.hv-modal-cancelar .rotulo {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #B71C1C;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.hv-modal-cancelar .titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    color: var(--xt-carbon);
    margin: 0 0 0.4rem;
}
.hv-modal-cancelar .resumen {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.86rem;
    color: var(--xt-muted);
    margin-bottom: 0.9rem;
}
.hv-modal-cancelar .resumen strong { color: var(--xt-carbon); font-weight: 600; }
.hv-modal-cancelar .nota {
    background: rgba(183,28,28,0.06);
    border: 1px dashed rgba(183,28,28,0.4);
    border-radius: 4px;
    padding: 0.7rem 0.85rem;
    font-size: 0.78rem;
    color: var(--xt-carbon);
    margin-bottom: 1rem;
}
.hv-modal-cancelar label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.35rem;
}
.hv-modal-cancelar label .req { color: #B71C1C; }
.hv-modal-cancelar textarea {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    padding: 0.6rem 0.7rem;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.9rem;
    color: var(--xt-carbon);
    resize: vertical;
    outline: none;
    transition: border-color 140ms ease;
}
.hv-modal-cancelar textarea:focus { border-color: #B71C1C; }
.hv-modal-cancelar .contador {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--xt-muted);
    margin-top: 0.3rem;
}
.hv-modal-cancelar .acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.1rem;
}
.hv-modal-cancelar .acciones button {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.7rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.hv-modal-cancelar .acciones .is-danger {
    background: #B71C1C;
    color: var(--xt-crema);
    border: 1px solid #B71C1C;
}
.hv-modal-cancelar .acciones .is-danger:hover:not(:disabled) { background: #8E1414; border-color: #8E1414; }
.hv-modal-cancelar .acciones .is-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.hv-modal-cancelar .acciones .is-ghost {
    background: transparent;
    border: 1px solid var(--xt-carbon);
    color: var(--xt-carbon);
}
.hv-modal-cancelar .acciones .is-ghost:hover { background: var(--xt-carbon); color: var(--xt-crema); }

/* Tabla de abonos editorial dentro del modal */
.hv-tabla-abonos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.hv-tabla-abonos thead th {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--xt-carbon);
    font-weight: 500;
}
.hv-tabla-abonos tbody td {
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--xt-line);
    color: var(--xt-carbon);
}
.hv-tabla-abonos tbody tr:last-child td { border-bottom: 0; }
.hv-tabla-abonos .vacio {
    text-align: center;
    color: var(--xt-muted);
    font-style: italic;
    padding: 0.7rem;
}


/* --- Toggle de vista: Asientos / Libro mayor --- */
.hv-toggle-vista {
    display: inline-flex;
    border: 1px solid var(--xt-carbon);
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
}
.hv-toggle-vista button {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem;
    background: transparent;
    color: var(--xt-carbon);
    border: 0;
    border-right: 1px solid var(--xt-carbon);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    white-space: nowrap;
}
.hv-toggle-vista button:last-child { border-right: 0; }
.hv-toggle-vista button.is-active {
    background: var(--xt-carbon);
    color: var(--xt-crema);
}
.hv-toggle-vista button:hover:not(.is-active) {
    background: var(--xt-crema-2);
}

/* --- Vista "Libro mayor": tabla contable clasica editorial --- */
.hv-libromayor {
    background: #FFFFFF;
    border: 1px solid var(--xt-line);
    border-radius: 4px;
    overflow: hidden;
}
.hv-libromayor-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--xt-crema-2);
    border-bottom: 2px solid var(--xt-carbon);
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow: hidden;
}
/* Isotipo X grande al fondo del header del libro mayor (sello de página) */
.hv-libromayor-head::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    width: 110px;
    height: 110px;
    transform: translateY(-50%) rotate(-6deg);
    background-image: url("../img/isotipo-terracota.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
}
/* Cinta de greca thin debajo del border-bottom (filo del libro mayor) */
.hv-libromayor-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 8px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 24px 12px;
    opacity: 0.55;
    pointer-events: none;
}
.hv-libromayor-head > * { position: relative; z-index: 1; }
.hv-libromayor-head .rotulo {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--xt-terracota);
    font-weight: 600;
}
.hv-libromayor-head .titulo {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--xt-carbon);
    margin-top: 0.05rem;
}
.hv-libromayor-head .periodo {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

.hv-libromayor-wrap {
    overflow-x: auto;
}
.hv-libromayor-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 720px;
}
.hv-libromayor-tabla thead th {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    font-weight: 500;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--xt-carbon);
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}
.hv-libromayor-tabla thead th.num { text-align: right; }
.hv-libromayor-tabla thead th.ctr { text-align: center; }
.hv-libromayor-tabla tbody td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--xt-line);
    color: var(--xt-carbon);
    vertical-align: middle;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}
.hv-libromayor-tabla tbody td.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
}
.hv-libromayor-tabla tbody td.ctr { text-align: center; }
.hv-libromayor-tabla tbody td.folio {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--xt-carbon);
    white-space: nowrap;
}
.hv-libromayor-tabla tbody td.fecha {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--xt-muted);
    white-space: nowrap;
}
.hv-libromayor-tabla tbody td.metodo {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.hv-libromayor-tabla tbody td .row-badges {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.hv-libromayor-tabla tbody tr {
    cursor: pointer;
    transition: background 120ms ease;
    position: relative;
}
.hv-libromayor-tabla tbody tr:hover {
    background: var(--xt-crema-2);
}
.hv-libromayor-tabla tbody tr.is-cancelada td.num.monto {
    color: var(--xt-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(183,28,28,0.4);
}
.hv-libromayor-tabla tbody tr.is-cancelada td.folio {
    color: #B71C1C;
}
.hv-libromayor-tabla tbody tr.is-cancelada {
    background: rgba(183,28,28,0.03);
}
.hv-libromayor-tabla tbody tr.is-cancelada:hover {
    background: rgba(183,28,28,0.06);
}

/* Rail de color a la izquierda en cada fila (estado) */
.hv-libromayor-tabla tbody td:first-child {
    position: relative;
    padding-left: 0.95rem;
}
.hv-libromayor-tabla tbody td:first-child::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--xt-jade);
}
.hv-libromayor-tabla tbody tr.is-cancelada td:first-child::before { background: #B71C1C; }
.hv-libromayor-tabla tbody tr.is-credito td:first-child::before   { background: var(--xt-terracota); }
.hv-libromayor-tabla tbody tr.is-credito.is-saldado td:first-child::before { background: var(--xt-jade); }
.hv-libromayor-tabla tbody tr.is-credito.is-vencido td:first-child::before { background: #B71C1C; }

/* Footer "suma del periodo" */
.hv-libromayor-tabla tfoot td {
    padding: 0.7rem 0.7rem;
    border-top: 2px solid var(--xt-carbon);
    background: var(--xt-crema-2);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-carbon);
    font-variant-numeric: tabular-nums;
}
.hv-libromayor-tabla tfoot td.lab {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
    font-weight: 500;
}
.hv-libromayor-tabla tfoot td.num { text-align: right; font-size: 1rem; }

/* Pequena leyenda al pie */
.hv-libromayor-pie {
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--xt-line);
    background: var(--xt-crema);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}
.hv-libromayor-pie .item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.hv-libromayor-pie .swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}
.hv-libromayor-pie .sw-activa   { background: var(--xt-jade); }
.hv-libromayor-pie .sw-credito  { background: var(--xt-terracota); }
.hv-libromayor-pie .sw-saldado  { background: var(--xt-jade); }
.hv-libromayor-pie .sw-cancel   { background: #B71C1C; }


/* ════════════════════════════════════════════════════════════════
   SISTEMA EDITORIAL INVENTARIO (insumos, categorias,
   activos fijos, alertas, mermas, proveedores, proyeccion).
   Productos usa su propio sistema scoped .prod-* inyectado por
   productos.js (vease 7e9c596). Aqui viven solo las clases
   compartidas por el resto del modulo Inventario.
   ════════════════════════════════════════════════════════════════ */
/* ── Hero del inventario ─────────────────────────────────── */
  .inv-hero {
    background: var(--xt-crema-2);
    border-radius: var(--ficha-radius-lg);
    padding: 1.4rem 1.7rem 1.5rem;
    margin-bottom: 1.1rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xt-line);
  }
  .inv-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 28px 6px;
    background-repeat: repeat-x;
    opacity: 0.72;
  }
  .inv-hero::after {
    content: ''; position: absolute;
    right: -28px; bottom: -28px;
    width: 180px; height: 180px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.06; pointer-events: none;
  }
  .inv-hero-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    position: relative; z-index: 1;
  }
  .inv-hero-left {
    flex: 1 1 280px; min-width: 240px;
  }
  .inv-hero-eyebrow {
    font-family: var(--font-mono); font-size: 0.66rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-dark); margin-bottom: 0.45rem;
  }
  .inv-hero-titulo {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.85rem, 3.6vw, 2.55rem);
    color: var(--xt-carbon); line-height: 1.05; margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
  }
  .inv-hero-lead {
    font-size: 0.92rem; color: var(--xt-muted); max-width: 50ch;
    line-height: 1.45;
  }
  .inv-hero-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem; min-width: 320px; flex: 0 1 460px;
  }
  @media (max-width: 640px) {
    .inv-hero-stats { grid-template-columns: repeat(2, 1fr); width: 100%; }
  }
  .inv-stat {
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: 12px;
    padding: 0.7rem 0.8rem 0.75rem;
    position: relative;
  }
  .inv-stat-lab {
    font-family: var(--font-mono); font-size: 0.58rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--xt-muted); margin-bottom: 0.2rem;
  }
  .inv-stat-val {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.55rem; color: var(--xt-carbon); line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  .inv-stat-sub {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--xt-muted); margin-top: 0.15rem;
  }
  .inv-stat.is-critico {
    background: rgba(216,67,21,0.06);
    border-color: rgba(216,67,21,0.28);
  }
  .inv-stat.is-critico .inv-stat-val { color: var(--xt-terracota-dark); }
  .inv-stat.is-jade {
    background: rgba(0,137,123,0.05);
    border-color: rgba(0,137,123,0.25);
  }
  .inv-stat.is-jade .inv-stat-val { color: var(--xt-jade-dark); }
  .inv-stat.is-warn {
    background: rgba(232,163,60,0.08);
    border-color: rgba(232,163,60,0.32);
  }
  .inv-stat.is-warn .inv-stat-val { color: #B07B1B; }

  /* ── Toolbar del inventario ──────────────────────────────── */
  .inv-toolbar {
    display: flex; align-items: center; gap: 0.8rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--ficha-sombra);
  }
  .inv-toolbar-search {
    flex: 1 1 220px; min-width: 200px;
    position: relative;
  }
  .inv-toolbar-search input {
    width: 100%;
    border: 1px solid var(--xt-line);
    background: var(--xt-crema-2);
    padding: 0.55rem 0.85rem 0.55rem 2.2rem;
    border-radius: 10px;
    font-size: 0.88rem; color: var(--xt-carbon);
    transition: border-color .15s ease, background .15s ease;
  }
  .inv-toolbar-search input:focus {
    outline: none;
    border-color: var(--xt-terracota);
    background: #fff;
  }
  .inv-toolbar-search::before {
    content: ''; position: absolute;
    left: 0.75rem; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat; background-size: contain;
    pointer-events: none;
  }
  .inv-toolbar-meta {
    font-family: var(--font-mono); font-size: 0.64rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--xt-muted); white-space: nowrap;
  }
  .inv-toolbar-actions {
    display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto;
  }
  .inv-action {
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.5rem 0.85rem; border-radius: 8px;
    border: 1px solid var(--xt-line); background: #fff;
    color: var(--xt-carbon); cursor: pointer;
    transition: all .15s ease; display: inline-flex;
    align-items: center; gap: 0.4rem;
    white-space: nowrap;
  }
  .inv-action:hover { border-color: var(--xt-carbon); background: var(--xt-crema-2); }
  .inv-action.primary {
    background: var(--xt-terracota); color: var(--xt-crema);
    border-color: var(--xt-terracota);
  }
  .inv-action.primary:hover {
    background: var(--xt-terracota-dark);
    border-color: var(--xt-terracota-dark);
  }
  .inv-action.ghost { background: var(--xt-crema-2); }

  /* ── Shelf grid de insumos / productos ───────────────────── */
  .shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 0.95rem;
  }
  .shelf-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.05rem 1.1rem 0.85rem 1.25rem;
    display: flex; flex-direction: column;
    box-shadow: var(--ficha-sombra);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
  }
  .shelf-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ficha-sombra-hover);
    border-color: rgba(216,67,21,0.32);
  }
  .shelf-card::before {
    content: '';
    position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem;
    width: 4px; border-radius: 0 4px 4px 0;
    background: var(--xt-jade); opacity: 0.85;
  }
  .shelf-card.is-bajo::before { background: #E8A33C; }
  .shelf-card.is-critico::before { background: var(--xt-terracota); }
  .shelf-card.is-sin::before { background: var(--xt-carbon); opacity: 0.55; }
  .shelf-card::after {
    content: '';
    position: absolute;
    right: -18px; bottom: -22px;
    width: 110px; height: 110px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.05;
    pointer-events: none;
  }
  .shelf-card > * { position: relative; z-index: 1; }

  .shelf-num {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-muted); margin-bottom: 0.55rem;
  }
  .shelf-num strong {
    color: var(--xt-terracota-dark); font-weight: 500;
    margin-right: 0.35rem;
  }
  .shelf-head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    margin-bottom: 0.85rem;
  }
  .shelf-thumb {
    width: 44px; height: 44px; border-radius: 10px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
  }
  .shelf-thumb-fb {
    width: 44px; height: 44px; border-radius: 10px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--xt-carbon); color: var(--xt-crema);
    font-family: var(--font-display); font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--xt-line-strong);
  }
  .shelf-thumb-fb.is-unit {
    background: var(--xt-crema-2); color: var(--xt-carbon);
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .shelf-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.02rem; color: var(--xt-carbon); line-height: 1.15;
    margin: 0; word-break: break-word;
  }
  .shelf-meta {
    font-family: var(--font-mono); font-size: 0.58rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--xt-muted); margin-top: 0.2rem;
  }

  .shelf-estado-pill {
    position: absolute; top: 0.95rem; right: 0.95rem;
    font-family: var(--font-mono); font-size: 0.56rem;
    text-transform: uppercase; letter-spacing: 0.16em;
    padding: 0.2rem 0.55rem; border-radius: 999px;
  }
  .shelf-estado-pill.ok { background: rgba(0,137,123,0.14); color: var(--xt-jade-dark); }
  .shelf-estado-pill.bajo { background: rgba(232,163,60,0.15); color: #8B5A0C; }
  .shelf-estado-pill.critico { background: rgba(216,67,21,0.14); color: var(--xt-terracota-dark); }
  .shelf-estado-pill.sin { background: rgba(42,54,61,0.12); color: var(--xt-carbon); }

  .shelf-cifra-row {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-top: 1px dashed var(--xt-line);
    border-bottom: 1px dashed var(--xt-line);
    margin-bottom: 0.75rem;
  }
  .shelf-cifra-block { text-align: left; }
  .shelf-cifra-lab {
    font-family: var(--font-mono); font-size: 0.55rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--xt-muted);
  }
  .shelf-cifra-val {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.1rem; color: var(--xt-carbon); line-height: 1.1;
    font-variant-numeric: tabular-nums; margin-top: 0.1rem;
  }
  .shelf-cifra-val.is-critico { color: var(--xt-terracota-dark); }
  .shelf-cifra-val.is-bajo { color: #B07B1B; }
  .shelf-cifra-val.is-jade { color: var(--xt-jade-dark); }
  .shelf-cifra-val.is-muted { color: var(--xt-muted); font-weight: 500; }

  .shelf-cad {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.65rem;
  }
  .shelf-cad strong {
    font-weight: 500; color: var(--xt-carbon);
  }
  .shelf-cad.is-warn strong { color: #B07B1B; }
  .shelf-cad.is-critico strong { color: var(--xt-terracota-dark); }

  .shelf-actions {
    margin-top: auto;
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    padding-top: 0.55rem;
  }
  .shelf-btn {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.13em; text-transform: uppercase;
    padding: 0.4rem 0.7rem; border-radius: 7px;
    border: 1px solid var(--xt-line); background: #fff;
    color: var(--xt-carbon); cursor: pointer;
    transition: all .15s ease;
    flex: 1; min-width: 0;
    text-align: center;
  }
  .shelf-btn:hover { border-color: var(--xt-carbon); background: var(--xt-crema-2); }
  .shelf-btn.primary { border-color: var(--xt-terracota); color: var(--xt-terracota-dark); }
  .shelf-btn.primary:hover { background: rgba(216,67,21,0.08); }
  .shelf-btn.jade { border-color: var(--xt-jade); color: var(--xt-jade-dark); }
  .shelf-btn.jade:hover { background: rgba(0,137,123,0.08); }
  .shelf-btn.danger { border-color: rgba(229,57,53,0.4); color: #c62828; flex: 0 0 auto; padding: 0.4rem 0.6rem; }
  .shelf-btn.danger:hover { background: rgba(229,57,53,0.08); }

  /* ── Badge composicion (combo/compuesto) ─────────────────── */
  .shelf-badge-comp {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: var(--font-mono); font-size: 0.56rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    border: 1px solid var(--xt-line);
    background: var(--xt-crema-2); color: var(--xt-carbon);
    margin-left: 0.45rem;
  }
  .shelf-badge-comp.combo { color: var(--xt-jade-dark); border-color: rgba(0,137,123,0.32); background: rgba(0,137,123,0.06); }
  .shelf-badge-comp.receta { color: var(--xt-terracota-dark); border-color: rgba(216,67,21,0.28); background: rgba(216,67,21,0.05); }

  /* ── Alertas notas editoriales ───────────────────────────── */
  .alertas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.95rem;
  }
  .alerta-nota {
    position: relative;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.5rem 1.2rem 1.1rem;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: var(--ficha-sombra);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .alerta-nota:hover {
    transform: translateY(-2px);
    box-shadow: var(--ficha-sombra-hover);
  }
  .alerta-nota::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 8px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 22px 8px; background-repeat: repeat-x;
    opacity: 0.78;
  }
  .alerta-nota.estable::before { background: var(--xt-greca-crema, var(--xt-jade)); opacity: 0.65; }
  .alerta-nota.bajo::before { background-image: linear-gradient(90deg, #E8A33C 50%, transparent 50%); background-size: 14px 8px; opacity: 0.78; }
  .alerta-nota::after {
    content: '';
    position: absolute;
    right: -16px; bottom: -22px;
    width: 100px; height: 100px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.06;
    pointer-events: none;
  }
  .alerta-nota > * { position: relative; z-index: 1; }
  .alerta-nota-num {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-dark); margin-bottom: 0.45rem;
  }
  .alerta-nota.estable .alerta-nota-num { color: var(--xt-jade-dark); }
  .alerta-nota.bajo .alerta-nota-num { color: #B07B1B; }
  .alerta-nota-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.08rem; color: var(--xt-carbon); line-height: 1.2;
    margin: 0 0 0.6rem; word-break: break-word;
  }
  .alerta-nota-body {
    font-size: 0.82rem; color: var(--xt-muted);
    line-height: 1.45; margin-bottom: 0.85rem;
  }
  .alerta-nota-cifras {
    display: flex; gap: 1rem; padding: 0.55rem 0;
    border-top: 1px dashed var(--xt-line);
    border-bottom: 1px dashed var(--xt-line);
    margin-bottom: 0.7rem;
  }
  .alerta-nota-cifra { flex: 1; }
  .alerta-nota-cifra-lab {
    font-family: var(--font-mono); font-size: 0.54rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--xt-muted);
  }
  .alerta-nota-cifra-val {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; color: var(--xt-carbon);
    font-variant-numeric: tabular-nums; margin-top: 0.12rem;
  }
  .alerta-nota-cifra-val.is-critico { color: var(--xt-terracota-dark); }
  .alerta-nota-bar {
    height: 6px; border-radius: 999px;
    background: rgba(42,54,61,0.1);
    overflow: hidden; margin-bottom: 0.7rem;
  }
  .alerta-nota-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--xt-terracota);
    transition: width .4s ease;
  }
  .alerta-nota.estable .alerta-nota-bar > span { background: var(--xt-jade); }
  .alerta-nota.bajo .alerta-nota-bar > span { background: #E8A33C; }
  .alerta-nota-foot {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin-top: auto;
  }

  /* ── Empty state editorial ───────────────────────────────── */
  .inv-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem 3.5rem;
    background: #fff;
    border: 1px dashed var(--xt-line-strong);
    border-radius: var(--ficha-radius-lg);
    position: relative;
    overflow: hidden;
  }
  .inv-empty::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 28px 6px; background-repeat: repeat-x;
    opacity: 0.5;
  }
  .inv-empty-num {
    font-family: var(--font-mono); font-size: 0.66rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-dark); margin-bottom: 0.55rem;
  }
  .inv-empty-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.3rem; color: var(--xt-carbon); margin: 0 0 0.4rem;
  }
  .inv-empty-lead {
    font-size: 0.88rem; color: var(--xt-muted);
    max-width: 42ch; margin: 0 auto;
  }

  /* ── Form shell (vista-edicion) ──────────────────────────── */
  .inv-form-shell {
    max-width: 720px;
    margin: 0 auto;
  }
  .inv-form-topbar {
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.2rem 1.4rem 1.25rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.9rem;
  }
  .inv-form-topbar::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--xt-greca-terracota, var(--xt-terracota));
    background-size: 28px 6px; background-repeat: repeat-x;
    opacity: 0.72;
  }
  .inv-form-topbar::after {
    content: ''; position: absolute;
    right: -22px; bottom: -22px;
    width: 130px; height: 130px;
    background-image: url('img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain; background-position: bottom right;
    opacity: 0.07; pointer-events: none;
  }
  .inv-form-topbar-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    position: relative; z-index: 1;
  }
  .inv-form-num {
    font-family: var(--font-mono); font-size: 0.66rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--xt-terracota-dark); margin-bottom: 0.4rem;
  }
  .inv-form-titulo {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.6rem; color: var(--xt-carbon); margin: 0;
    letter-spacing: -0.01em;
  }
  .inv-form-card {
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    padding: 1.5rem 1.65rem 1.7rem;
    box-shadow: var(--ficha-sombra);
  }
  .inv-form-section {
    margin-bottom: 1.5rem;
  }
  .inv-form-section + .inv-form-section {
    padding-top: 1.35rem;
    border-top: 1px dashed var(--xt-line);
  }
  .inv-form-section-titulo {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; color: var(--xt-carbon); margin: 0 0 0.15rem;
  }
  .inv-form-section-sub {
    font-family: var(--font-mono); font-size: 0.58rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--xt-muted); margin-bottom: 0.95rem;
  }
  .inv-form-label {
    display: block; font-size: 0.8rem; font-weight: 500;
    color: var(--xt-carbon); margin-bottom: 0.35rem;
  }
  .inv-form-label .opt {
    font-weight: 400; color: var(--xt-muted); font-size: 0.7rem;
    margin-left: 0.25rem;
  }
  .inv-form-input,
  .inv-form-select {
    width: 100%;
    border: 1px solid var(--xt-line);
    background: var(--xt-crema-2);
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 0.92rem; color: var(--xt-carbon);
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease;
  }
  .inv-form-input:focus,
  .inv-form-select:focus {
    outline: none;
    border-color: var(--xt-terracota);
    background: #fff;
  }
  .inv-form-helper {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--xt-muted); margin-top: 0.35rem;
  }
  .inv-form-toggle {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--xt-crema-2);
    border: 1px dashed var(--xt-line-strong);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .inv-form-toggle:hover {
    border-color: var(--xt-terracota);
    background: rgba(216,67,21,0.04);
  }
  .inv-form-toggle input[type="checkbox"] {
    margin-top: 0.15rem;
    accent-color: var(--xt-terracota);
    width: 16px; height: 16px;
  }
  .inv-form-toggle-text {
    font-size: 0.88rem; font-weight: 600;
    color: var(--xt-carbon); display: block;
  }
  .inv-form-toggle-sub {
    font-size: 0.78rem; color: var(--xt-muted);
    margin-top: 0.2rem; line-height: 1.4;
  }
  .inv-form-submit {
    width: 100%;
    background: var(--xt-terracota);
    color: var(--xt-crema);
    border: 1px solid var(--xt-terracota);
    border-radius: 10px;
    padding: 0.85rem 1.2rem;
    font-family: var(--font-display); font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background .15s ease;
    margin-top: 0.5rem;
  }
  .inv-form-submit:hover { background: var(--xt-terracota-dark); border-color: var(--xt-terracota-dark); }
  .inv-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

  /* ── Filtros strip horizontal ────────────────────────────── */
  .inv-filtros {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin-bottom: 0.85rem;
  }
  .inv-filtro-chip {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.4rem 0.85rem; border-radius: 999px;
    border: 1px solid var(--xt-line); background: #fff;
    color: var(--xt-carbon); cursor: pointer;
    transition: all .15s ease;
  }
  .inv-filtro-chip:hover { border-color: var(--xt-carbon); }
  .inv-filtro-chip.is-active {
    background: var(--xt-carbon); color: var(--xt-crema);
    border-color: var(--xt-carbon);
  }

  /* ── Mini bar (proyeccion / valor) ───────────────────────── */
  .inv-mini-bar {
    height: 4px; border-radius: 999px;
    background: rgba(42,54,61,0.1);
    overflow: hidden; margin-top: 0.45rem;
  }
  .inv-mini-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--xt-jade);
    transition: width .4s ease;
  }
  .inv-mini-bar.bajo > span { background: #E8A33C; }
  .inv-mini-bar.critico > span { background: var(--xt-terracota); }

  /* ── Catalogo strip (Activos fijos / Categorias) ─────────── */
  .cat-fila {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    position: relative;
    transition: border-color .15s ease, transform .15s ease;
  }
  .cat-fila:hover { border-color: var(--xt-terracota); transform: translateX(2px); }
  .cat-fila-num {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--xt-muted); min-width: 1.8rem;
    font-weight: 500;
  }
  .cat-fila-nombre {
    flex: 1;
    font-family: var(--font-display); font-weight: 500;
    font-size: 1rem; color: var(--xt-carbon);
  }
  .cat-fila-meta {
    font-family: var(--font-mono); font-size: 0.58rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--xt-muted);
  }
  .cat-fila-actions { display: flex; gap: 0.35rem; }

  /* ── Tablas editoriales (Mermas / Proveedores) ───────────── */
  .inv-tabla-wrap {
    background: #fff;
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    overflow: hidden;
    box-shadow: var(--ficha-sombra);
  }
  .inv-tabla {
    width: 100%; border-collapse: collapse;
  }
  .inv-tabla thead th {
    font-family: var(--font-mono); font-size: 0.58rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--xt-muted);
    padding: 0.85rem 1rem; text-align: left;
    background: var(--xt-crema-2);
    border-bottom: 1px solid var(--xt-line);
    font-weight: 500;
  }
  .inv-tabla tbody td {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    color: var(--xt-carbon);
    border-bottom: 1px solid var(--xt-line);
  }
  .inv-tabla tbody tr:last-child td { border-bottom: none; }
  .inv-tabla tbody tr:hover { background: rgba(245,236,221,0.4); }
  .inv-tabla .num { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 500; }
  .inv-tabla .mono {
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

/* ============================================================
   PUNTO DE VENTA — Header editorial minimalista
   Aplica a: ventas (POS), mesas (salón), pedidos (comandas),
             cotizaciones (cuaderno de propuestas).
   Sin recuadro oscuro, sin CTA, sin atajos visibles —
   solo turno + título + lede + cinta xicalcoliuhqui.
   ============================================================ */

.pos-header {
    position: relative;
    padding: 0.4rem 0 1.1rem;
    margin: 0 0 1.5rem;
    isolation: isolate;
}

/* Isologo terracota como watermark sutil, top-right del header */
.pos-header::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 0;
    width: 86px;
    height: 86px;
    background-image: url("../img/isotipo-terracota.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}
.pos-header > * { position: relative; z-index: 1; }

.pos-header-folio {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin: 0 0 0.55rem;
}

.pos-header-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.8vw, 2.3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--xt-carbon);
    margin: 0;
}

.pos-header-lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--xt-muted);
    margin: 0.4rem 0 0;
    max-width: 44rem;
}

.pos-header-greca {
    margin-top: 0.95rem;
    height: 10px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: auto 10px;
    opacity: 0.55;
}

/* Strip de KPIs/folios — chips horizontales bajo el header */
.pos-folios {
    display: flex;
    gap: 0.5rem 0.85rem;
    flex-wrap: wrap;
    margin: 0 0 1.4rem;
}
.pos-folio {
    flex: 1 1 140px;
    min-width: 130px;
    background: var(--xt-crema-2);
    border-radius: 12px;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid var(--xt-line);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pos-folio.is-terracota { border-left-color: var(--xt-terracota); background: rgba(216,67,21,0.06); }
.pos-folio.is-jade      { border-left-color: var(--xt-jade);      background: rgba(0,137,123,0.07); }
.pos-folio.is-carbon    { border-left-color: var(--xt-carbon);    background: var(--xt-crema-3); }
.pos-folio-kicker {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin: 0 0 0.3rem;
}
.pos-folio-cifra {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--xt-carbon);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.pos-folio-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    color: var(--xt-muted);
    margin: 0.3rem 0 0;
}

/* Tabs editoriales (file-folder style) — usados por mesas/pedidos/cotizaciones */
.pos-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--xt-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pos-tabs::-webkit-scrollbar { display: none; }
.pos-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--xt-line);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--xt-crema-2);
    color: var(--xt-carbon);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    margin-bottom: -1px;
    white-space: nowrap;
}
.pos-tab:hover { background: var(--xt-crema-3); }
.pos-tab.is-active {
    background: var(--xt-jade);
    color: var(--xt-crema);
    border-color: var(--xt-jade);
    position: relative;
}
.pos-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--xt-terracota);
}
.pos-tab .pos-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--xt-terracota);
    color: var(--xt-crema);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.pos-tab.is-active .pos-tab-badge { background: var(--xt-crema); color: var(--xt-terracota-dark); }

/* Sección editorial dentro de POS */
.pos-seccion {
    margin: 0 0 1.5rem;
}
.pos-seccion-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--xt-line);
}
.pos-seccion-titulo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--xt-carbon);
    margin: 0;
}
.pos-seccion-meta {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
}

/* Ticket editorial — carrito POS y cuenta de mesa */
.pos-ticket {
    background: var(--xt-crema);
    border-radius: 12px;
    padding: 1.1rem 1.15rem 1.25rem;
    box-shadow: var(--ficha-sombra);
    position: relative;
    scroll-margin-top: 80px;
}
.pos-ticket::before,
.pos-ticket::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 8px;
    background-image: radial-gradient(circle at 6px 4px, transparent 4px, var(--xt-crema-2) 4px);
    background-size: 12px 8px;
    background-repeat: repeat-x;
}
.pos-ticket::before { top: -1px; }
.pos-ticket::after  { bottom: -1px; transform: rotate(180deg); }
.pos-ticket-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed var(--xt-line);
}
.pos-ticket-titulo {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--xt-carbon);
    margin: 0;
}
.pos-ticket-folio {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.pos-ticket-total {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    color: var(--xt-terracota);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}

@media (max-width: 720px) {
    .pos-folio { flex-basis: calc(50% - 0.5rem); }
}

/* Móvil estrecho: 3 chips equiparten ancho en una sola fila para evitar
   layout asimétrico 2+1 con el tercer chip estirado a 100%. */
@media (max-width: 640px) {
    .pos-folios { flex-wrap: nowrap; gap: 0.45rem; }
    .pos-folio {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.55rem 0.7rem;
    }
    .pos-folio-kicker {
        font-size: 0.5rem;
        letter-spacing: 0.14em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pos-folio-cifra { font-size: 1.15rem; }
    .pos-folio-meta {
        font-size: 0.62rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Catálogo del POS: el override global "grid-cols-2 → 1 columna" en móvil
   (línea ~900) está pensado para formularios. Para grids de cards (catálogo,
   menú, listados de tarjetas) queremos mantener 2 columnas en teléfono. */
@media (max-width: 639px) {
    #lista-productos.grid-cols-2,
    .grid-cards-mobile-2.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Ticket/carrito en móvil: menos padding y sin sticky (estorba al scrollear
   un catálogo largo arriba). */
@media (max-width: 1023px) {
    .pos-ticket { padding: 0.95rem 1rem 1.1rem; }
    .pos-ticket.sticky { position: static !important; top: auto !important; }
}

/* Escritorio (>=1024px): el ticket es sticky dentro de su columna. Sin tope de
   altura, con muchos productos en el carrito crecía mas alto que la pantalla y
   el boton "Cobrar" del fondo quedaba fuera de vista e inalcanzable (habia que
   reducir el zoom). Lo acotamos a la altura visible y dejamos que SOLO la lista
   de items haga scroll interno; total, metodo de pago y el boton Cobrar quedan
   fijos y siempre visibles, sin importar cuantos productos haya. */
@media (min-width: 1024px) {
    .pos-ticket.sticky {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
    }
    .pos-ticket.sticky > #carrito-items {
        flex: 1 1 auto;
        min-height: 3rem;
        max-height: none;
    }
    .pos-ticket.sticky > :not(#carrito-items) {
        flex-shrink: 0;
    }
}

/* ============================================================
   COTIZACIONES — Overlay editorial (Cuaderno de propuestas)
   Scope: #cotizaciones-root, #cotcfg-root y modales .cot-modal-editorial
   Reescribe inline-styles legacy (background:white, var(--color-acento), etc.)
   con identidad editorial. NO toca la lógica JS — solo el render.
   ============================================================ */

#cotizaciones-root,
#cotcfg-root {
    /* Alias del color heredado al token editorial (sin tocar el global) */
    --color-acento: var(--xt-carbon);
}

/* Botones de acción del header: Configuración / Nueva cotización */
#cotizaciones-root .btn-secundario,
#cotcfg-root #cotcfg-volver {
    background: var(--xt-crema-3);
    color: var(--xt-carbon);
    border: 1px solid var(--xt-line);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background .15s, border-color .15s;
}
#cotizaciones-root .btn-secundario:hover,
#cotcfg-root #cotcfg-volver:hover {
    background: var(--xt-crema-2);
    border-color: var(--xt-line-strong);
}

#cotizaciones-root .btn-primario {
    background: var(--xt-terracota);
    color: var(--xt-crema);
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px -10px rgba(216,67,21,.4);
}
#cotizaciones-root .btn-primario:hover { background: var(--xt-terracota-dark); }

/* "Hoja" del cuaderno: cualquier rounded-2xl con bg:white se vuelve papel editorial */
#cotizaciones-root [style*="background:white"][class*="rounded-2xl"],
#cotizaciones-root [style*="background: white"][class*="rounded-2xl"],
#cotizaciones-root section[class*="rounded-2xl"][style*="background:white"],
.cot-modal-editorial .modal-contenido {
    position: relative;
    background: var(--xt-crema) !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: var(--ficha-radius-lg) !important;
    box-shadow: var(--ficha-sombra);
    overflow: hidden;
}

/* Cinta greca xicalcoliuhqui horizontal en el top de cada "hoja" — sello editorial */
#cotizaciones-root [style*="background:white"][class*="rounded-2xl"]::before,
.cot-modal-editorial .modal-contenido::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: auto 10px;
    background-position: left top;
    opacity: 0.55;
    pointer-events: none;
}

/* Subpaneles internos (lineas, listas) con fondo crema-2 — "ficha pegada al cuaderno" */
#cotizaciones-root [style*="background:var(--color-fondo"],
#cotizaciones-root [style*="background: var(--color-fondo"],
#cotcfg-root [style*="background:var(--color-fondo"] {
    background: var(--xt-crema-2) !important;
    border-color: var(--xt-line) !important;
}

/* Buscadores e inputs principales */
#cotizaciones-root input[type="text"],
#cotizaciones-root input[type="email"],
#cotizaciones-root input[type="number"],
#cotizaciones-root input[type="date"],
#cotizaciones-root textarea,
#cotizaciones-root select,
#cotcfg-root input[type="text"],
#cotcfg-root input[type="email"],
#cotcfg-root input[type="number"],
#cotcfg-root textarea,
#cotcfg-root select {
    background: #fff;
    border-color: var(--xt-line) !important;
    color: var(--xt-carbon);
    transition: border-color .15s, box-shadow .15s;
}
#cotizaciones-root input:focus,
#cotizaciones-root textarea:focus,
#cotizaciones-root select:focus,
#cotcfg-root input:focus,
#cotcfg-root textarea:focus,
#cotcfg-root select:focus {
    outline: none;
    border-color: var(--xt-terracota) !important;
    box-shadow: 0 0 0 3px rgba(216,67,21,0.10);
}

/* Headings: h3.font-bold y h4.font-semibold → Fraunces editorial */
#cotizaciones-root h3.font-bold,
#cotcfg-root h2.text-xl,
#cotcfg-root h3.font-semibold {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--xt-carbon);
}
#cotizaciones-root h4.font-semibold {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    border-bottom: 1px solid var(--xt-line);
    padding-bottom: 0.55rem;
    margin-bottom: 0.85rem;
}
#cotizaciones-root h4.text-xs.uppercase {
    font-family: var(--font-mono);
    color: var(--xt-muted);
    letter-spacing: 0.2em;
}

/* Cifras tabulares ($) en Fraunces — sin tocar tamaño Tailwind ya aplicado */
#cotizaciones-root .tabular-nums {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
/* Mantener cifras de lineas/sub-totales en mono (mejor para tablas densas) */
#cotizaciones-root .text-xs.tabular-nums,
#cotizaciones-root td.tabular-nums,
#cotizaciones-root .grid-cols-12 .tabular-nums {
    font-family: var(--font-mono);
    letter-spacing: 0;
}
/* Cifras hero del total: terracota + display */
#cotizaciones-root [style*="color:var(--color-primario)"].text-2xl,
#cotizaciones-root [style*="color:var(--color-primario)"].text-lg,
#cotizaciones-root [style*="color: var(--color-primario)"].text-2xl {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ── Sellos de estado (badge editorial tipo cuño postal) ──
   La JS aplica .cot-estado .is-{borrador|vigente|cerrada|rechazada} */
#cotizaciones-root .cot-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 4px;
    border: 1px solid currentColor;
    background: transparent;
}
#cotizaciones-root .cot-estado::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
}
#cotizaciones-root .cot-estado.is-borrador  { color: var(--xt-muted); }
#cotizaciones-root .cot-estado.is-vigente   { color: var(--xt-terracota); }
#cotizaciones-root .cot-estado.is-cerrada   { color: var(--xt-jade-dark); }
#cotizaciones-root .cot-estado.is-rechazada { color: #B71C1C; }
#cotizaciones-root .cot-estado.is-sinfactura { color: #9A6600; border-style: dashed; }

/* Card de cotización (output de _cotCardElemento). El JS le agrega class .cot-hoja */
#cotizaciones-root .cot-hoja {
    position: relative;
    background: var(--xt-crema) !important;
    border: 1px solid var(--xt-line) !important;
    border-left: 3px solid var(--xt-terracota) !important;
    border-radius: var(--ficha-radius-lg) !important;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-left-color .15s;
}
#cotizaciones-root .cot-hoja:hover {
    transform: translateY(-1px);
    box-shadow: var(--ficha-sombra-hover);
}
#cotizaciones-root .cot-hoja[data-cot-estado="cerrada"]   { border-left-color: var(--xt-jade); }
#cotizaciones-root .cot-hoja[data-cot-estado="rechazada"] { border-left-color: #B71C1C; }
#cotizaciones-root .cot-hoja[data-cot-estado="borrador"]  { border-left-color: var(--xt-line-strong); }
/* Folio en Fraunces, no en sans-serif */
#cotizaciones-root .cot-hoja .cot-folio,
#cotizaciones-root .cot-folio {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--xt-carbon);
}
/* Botones de acción en la card (Abrir / PDF / Correo / Duplicar / Eliminar) */
#cotizaciones-root .cot-hoja button[data-cot-accion] {
    background: transparent !important;
    color: var(--xt-carbon) !important;
    border: 1px solid var(--xt-line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    transition: background .12s, border-color .12s, color .12s;
}
#cotizaciones-root .cot-hoja button[data-cot-accion]:hover {
    background: var(--xt-crema-3);
    border-color: var(--xt-line-strong);
}
#cotizaciones-root .cot-hoja button[data-cot-accion="abrir"] {
    background: var(--xt-terracota) !important;
    color: var(--xt-crema) !important;
    border-color: var(--xt-terracota);
}
#cotizaciones-root .cot-hoja button[data-cot-accion="abrir"]:hover {
    background: var(--xt-terracota-dark) !important;
}
#cotizaciones-root .cot-hoja button[data-cot-accion="eliminar"] {
    color: #B71C1C !important;
    border-color: rgba(183,28,28,0.25);
}
#cotizaciones-root .cot-hoja button[data-cot-accion="eliminar"]:hover {
    background: rgba(183,28,28,0.06);
    border-color: rgba(183,28,28,0.5);
}

/* Botones de la ficha read-only — mismo lenguaje pill mono */
#cotizaciones-root [data-cot-accion-ficha] {
    background: var(--xt-crema-3) !important;
    color: var(--xt-carbon) !important;
    border: 1px solid var(--xt-line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
#cotizaciones-root [data-cot-accion-ficha="pdf"] {
    background: var(--xt-terracota) !important;
    color: var(--xt-crema) !important;
    border-color: var(--xt-terracota);
}
#cotizaciones-root [data-cot-accion-ficha="cerrar"] {
    background: var(--xt-jade) !important;
    color: var(--xt-crema) !important;
    border-color: var(--xt-jade);
}
#cotizaciones-root [data-cot-accion-ficha="rechazar"],
#cotizaciones-root [data-cot-accion-ficha="eliminar"] {
    color: #B71C1C !important;
    background: transparent !important;
    border-color: rgba(183,28,28,0.25);
}

/* Filas de listado (Cerrar venta + Clientes + Cliente ficha cotizaciones) */
#cotizaciones-root [data-cot-cerrar-id],
#cotizaciones-root [data-cot-cliente-id],
#cotizaciones-root [data-cot-abrir-cot] {
    background: #fff !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: 10px !important;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
#cotizaciones-root [data-cot-cerrar-id]:hover,
#cotizaciones-root [data-cot-cliente-id]:hover,
#cotizaciones-root [data-cot-abrir-cot]:hover {
    border-color: var(--xt-terracota);
    box-shadow: var(--ficha-sombra-hover);
    transform: translateY(-1px);
}
#cotizaciones-root [data-cot-cerrar-id] [style*="color:var(--color-primario)"],
#cotizaciones-root [data-cot-abrir-cot] [style*="color:var(--color-primario)"] {
    font-family: var(--font-display);
    font-weight: 700;
}
/* "Cerrar →" pill en filas vigentes */
#cotizaciones-root [data-cot-cerrar-id] [style*="background:var(--color-primario);color:white"] {
    background: transparent !important;
    color: var(--xt-terracota) !important;
    border: 1px solid var(--xt-terracota);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Volver / back links → mono caption */
#cotizaciones-root #cot-cli-volver,
#cotizaciones-root #cot-ficha-volver,
#cotizaciones-root #cot-form-volver {
    font-family: var(--font-mono) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: transparent !important;
    border: 1px solid var(--xt-line);
    border-radius: 999px;
    padding: 0.45rem 0.85rem !important;
    color: var(--xt-muted) !important;
}
#cotizaciones-root #cot-cli-volver:hover,
#cotizaciones-root #cot-ficha-volver:hover,
#cotizaciones-root #cot-form-volver:hover {
    color: var(--xt-carbon) !important;
    border-color: var(--xt-line-strong);
}

/* Botón principal del formulario (Guardar / Enviar) */
#cotizaciones-root #cot-guardar {
    background: var(--xt-carbon) !important;
    color: var(--xt-crema) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
#cotizaciones-root #cot-enviar {
    background: var(--xt-terracota) !important;
    color: var(--xt-crema) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Modal: estructura genérica (Cerrar venta, Correo, Versiones, Rechazo) */
.cot-modal-editorial .modal-contenido {
    background: var(--xt-crema) !important;
    border: 1px solid var(--xt-line) !important;
}
.cot-modal-editorial h3.font-bold {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-carbon);
    letter-spacing: -0.01em;
}
.cot-modal-editorial button[style*="background:var(--color-primario);"],
.cot-modal-editorial button[style*="background: var(--color-primario);"] {
    background: var(--xt-terracota) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cot-modal-editorial button[style*="background:var(--color-primario-light)"] {
    background: var(--xt-crema-3) !important;
    color: var(--xt-carbon) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.cot-modal-editorial button[style*="background:var(--color-exito"] {
    background: var(--xt-jade) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* "Sello-num" auto en headings de ficha read-only (Cliente / Items / Notas...) */
#cotizaciones-root section > h4.text-sm.font-semibold {
    position: relative;
    padding-left: 0;
}
#cotizaciones-root section > h4.text-sm.font-semibold[data-sello]::before {
    content: attr(data-sello);
    display: inline-block;
    margin-right: 0.65rem;
    color: var(--xt-terracota);
    font-weight: 600;
}

/* Empty states */
#cotizaciones-root #cot-cerrar-empty,
#cotizaciones-root #cot-clientes-empty,
#cotizaciones-root [class*="border-dashed"] {
    background: var(--xt-crema-2) !important;
    border: 1px dashed var(--xt-line-strong) !important;
    border-radius: var(--ficha-radius-lg);
}

/* Detalles / accordions opcionales */
#cotizaciones-root details[style*="border"] {
    background: var(--xt-crema-2) !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: var(--ficha-radius-lg);
}
#cotizaciones-root details > summary {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-carbon);
}

/* Cliente "chip" pills (registrado/nuevo/generico) */
#cotizaciones-root label[style*="background:var(--color-fondo"]:has(input[type="radio"][name="cot-cli-tipo"]) {
    background: #fff !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: 999px;
    padding: 0.5rem 0.95rem !important;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* "Cuño" decorativo en la esquina superior derecha de la ficha read-only */
#cotizaciones-root .cot-cuno {
    position: absolute;
    top: 18px; right: 18px;
    pointer-events: none;
    opacity: 0.08;
    transform: rotate(-12deg);
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--xt-terracota);
    letter-spacing: -0.02em;
}

/* Pequeño sello "01/02/03 ·" delante de los kickers de los folios POS */
.pos-folio { position: relative; }
.pos-folio[data-folio-num]::after {
    content: attr(data-folio-num);
    position: absolute;
    top: 12px; right: 14px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--xt-muted);
    opacity: 0.7;
}

/* Línea separadora hr → más sutil + cinta greca corta cuando sea principal */
#cotizaciones-root hr {
    border: 0;
    height: 1px;
    background: var(--xt-line);
    margin: 1rem 0;
}

/* #cotcfg-root botones editoriales */
#cotcfg-root button[style*="background:var(--color-primario);"],
#cotcfg-root label[style*="background:var(--color-primario);"] {
    background: var(--xt-terracota) !important;
    color: var(--xt-crema) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
#cotcfg-root button[style*="background:var(--color-primario-light);"] {
    background: var(--xt-crema-3) !important;
    color: var(--xt-carbon) !important;
    border: 1px solid var(--xt-line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
#cotcfg-root [style*="background:#E5393511"] {
    background: transparent !important;
    color: #B71C1C !important;
    border: 1px solid rgba(183,28,28,0.25) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
#cotcfg-root section[class*="rounded-2xl"][style*="background:white"] {
    position: relative;
    background: var(--xt-crema) !important;
    border: 1px solid var(--xt-line) !important;
    overflow: hidden;
}
#cotcfg-root section[class*="rounded-2xl"][style*="background:white"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: auto 10px;
    opacity: 0.55;
    pointer-events: none;
}

/* Card de tipo de pago activo (modal cerrar venta) — sobreescribe inline */
.cot-modal-editorial .cot-cv-tipo-card {
    background: #fff !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: var(--ficha-radius-lg);
    transition: border-color .15s, background .15s, transform .12s;
}
.cot-modal-editorial .cot-cv-tipo-card.activo {
    background: var(--xt-crema-3) !important;
    border-color: var(--xt-terracota) !important;
    border-left: 3px solid var(--xt-terracota) !important;
}
.cot-modal-editorial .cot-cv-metodo {
    background: #fff !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.cot-modal-editorial .cot-cv-metodo.activo {
    background: var(--xt-terracota) !important;
    color: var(--xt-crema) !important;
    border-color: var(--xt-terracota) !important;
}

/* ============================================================
   POS · Ficha de estado (gates: caja cerrada, sin acceso, etc.)
   ============================================================ */
.pos-gate {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.pos-gate-card {
    position: relative;
    background: var(--xt-crema-2);
    border-radius: 16px;
    padding: 2.2rem 2rem 2.1rem;
    max-width: 30rem;
    width: 100%;
    text-align: center;
    box-shadow: var(--ficha-sombra);
    overflow: hidden;
    isolation: isolate;
}
.pos-gate-card::before {
    /* Cinta lateral terracota — signature de "atención" */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--xt-terracota);
}
.pos-gate-card::after {
    /* Watermark isotipo terracota bottom-right */
    content: "";
    position: absolute;
    right: -22px; bottom: -22px;
    width: 130px; height: 130px;
    background: url("../img/isotipo-terracota.svg") no-repeat center/contain;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}
.pos-gate-card > * { position: relative; z-index: 1; }
.pos-gate-kicker {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--xt-terracota-dark);
    margin: 0 0 0.7rem;
}
.pos-gate-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.5vw, 1.95rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--xt-carbon);
    margin: 0 0 0.65rem;
}
.pos-gate-mensaje {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--xt-muted);
    margin: 0 0 1.4rem;
}
.pos-gate-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--xt-terracota);
    color: var(--xt-crema);
    border: 0;
    border-radius: 12px;
    padding: 0.7rem 1.4rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(191,54,12,0.4), 0 10px 22px -10px rgba(216,67,21,0.55);
    transition: background 0.15s ease, transform 0.1s ease;
    min-height: 44px;
}
.pos-gate-cta:hover {
    background: var(--xt-terracota-dark);
    transform: translateY(-1px);
}
.pos-gate-cta:focus-visible {
    outline: 3px solid var(--xt-jade);
    outline-offset: 2px;
}

/* =====================================================================
   COMANDAS — Tira editorial del mostrador de pedidos (restaurante+tienda)
   Cada pedido = ticket tipográfico (Fraunces + DM Mono). Estados via
   border-left-color, no via badges pill rojos/verdes. Items con sello
   "LISTO" en jade-soft. Sin strike-through (anti-patrón legibilidad).
   ===================================================================== */

.comanda-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .comanda-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1440px) {
    .comanda-grid { grid-template-columns: repeat(3, 1fr); }
}

.comanda-card {
    padding: 1.25rem 1.4rem 1.1rem;
    border-left: 4px solid transparent;
    transition: border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.comanda-card.is-pendiente { border-left-color: var(--xt-terracota); }
.comanda-card.is-listo     { border-left-color: var(--xt-jade); }
.comanda-card.is-en-camino { border-left-color: #1565C0; }
.comanda-card.is-completado,
.comanda-card.is-cancelado { border-left-color: var(--xt-line-strong); opacity: 0.78; }

.comanda-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.comanda-id { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.comanda-folio {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.5vw, 2.4rem);
    line-height: 1;
    color: var(--xt-carbon);
    letter-spacing: -0.01em;
}
.comanda-estado-sello {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.4rem;
    color: var(--xt-muted);
}
.comanda-estado-sello.is-pendiente { color: var(--xt-terracota-dark); }
.comanda-estado-sello.is-listo     { color: var(--xt-jade-dark); }
.comanda-estado-sello.is-en-camino { color: #1565C0; }
.comanda-estado-sello.is-completado { color: var(--xt-muted); }
.comanda-estado-sello.is-cancelado { color: var(--xt-muted); text-decoration: line-through; }

.comanda-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
}
.comanda-origen {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    background: var(--xt-crema-3);
    color: var(--xt-carbon);
    border: 1px solid var(--xt-line);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.comanda-origen.is-qr     { background: rgba(216,67,21,0.10); color: var(--xt-terracota-dark); border-color: rgba(216,67,21,0.20); }
.comanda-origen.is-mesa   { background: rgba(0,137,123,0.10); color: var(--xt-jade-dark);      border-color: rgba(0,137,123,0.22); }
.comanda-origen.is-pos    { background: var(--xt-crema-3); color: var(--xt-carbon); }
.comanda-origen.is-envio  { background: rgba(21,101,192,0.10); color: #0d3b73;  border-color: rgba(21,101,192,0.22); }
.comanda-origen.is-pickup { background: rgba(216,67,21,0.10); color: var(--xt-terracota-dark); border-color: rgba(216,67,21,0.20); }
.comanda-tiempo {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    font-weight: 500;
}

.comanda-cliente {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin: 0 0 0.75rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.comanda-cliente strong {
    color: var(--xt-carbon);
    font-weight: 700;
    font-family: var(--font-display);
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.95rem;
    margin-left: 0.4rem;
}

.comanda-direccion {
    margin: 0.5rem 0 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(21,101,192,0.06);
    border-left: 3px solid #1565C0;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}
.comanda-direccion-icon { color: #1565C0; flex-shrink: 0; margin-top: 0.15rem; }
.comanda-direccion-texto {
    font-family: var(--font-display);
    font-weight: 600;
    color: #0d3b73;
    line-height: 1.3;
    font-size: 1rem;
}
.comanda-direccion-ref {
    font-size: 0.8rem;
    color: var(--xt-muted);
    margin-top: 0.2rem;
}
.comanda-direccion-acciones {
    display: flex;
    gap: 1rem;
    margin-top: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}
.comanda-direccion-acciones a { color: #1565C0; text-decoration: none; }
.comanda-direccion-acciones a:hover { text-decoration: underline; }

.comanda-repartidor {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.comanda-repartidor-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(216,67,21,0.10);
    color: var(--xt-terracota-dark);
    font-weight: 700;
}

.comanda-items {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.4rem 0 0.9rem;
}

.comanda-item {
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: var(--xt-crema);
    border: 1px solid var(--xt-line);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    font-family: inherit;
}
.comanda-item:hover:not(.is-listo):not(.is-readonly) { background: var(--xt-crema-3); border-color: var(--xt-line-strong); }
.comanda-item:active:not(.is-listo):not(.is-readonly) { transform: scale(0.995); }
.comanda-item.is-listo {
    background: rgba(0,137,123,0.10);
    border-color: rgba(0,137,123,0.28);
}
.comanda-item.is-readonly { cursor: default; }

.comanda-item-cant {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--xt-terracota-dark);
    min-width: 2.5rem;
    text-align: center;
}
.comanda-item.is-listo .comanda-item-cant { color: var(--xt-jade-dark); }
.comanda-item.is-readonly .comanda-item-cant { color: var(--xt-muted); font-size: 1.2rem; }

.comanda-item-cuerpo { min-width: 0; }
.comanda-item-nombre {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--xt-carbon);
    line-height: 1.25;
    display: block;
}
.comanda-item-extras {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--xt-terracota-dark);
    font-weight: 500;
}
.comanda-item-extras::before {
    content: "+ ";
    font-weight: 700;
}
.comanda-item-nota {
    margin-top: 0.4rem;
    padding: 0.45rem 0.65rem;
    background: var(--xt-crema-3);
    border-left: 3px solid var(--xt-terracota);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--xt-carbon);
    line-height: 1.35;
}
.comanda-item-nota::before {
    content: "NOTA · ";
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--xt-terracota-dark);
    margin-right: 0.25rem;
}

.comanda-item-check {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: transparent;
    color: var(--xt-muted);
    border: 1px solid var(--xt-line);
    white-space: nowrap;
    align-self: center;
}
.comanda-item.is-listo .comanda-item-check {
    background: var(--xt-jade);
    color: var(--xt-crema);
    border-color: var(--xt-jade);
}

.comanda-item-precio {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-carbon);
    font-size: 0.95rem;
}

.comanda-pie {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 0.5rem;
}
.comanda-pie-fecha {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    font-weight: 500;
}
.comanda-total { text-align: right; line-height: 1.1; }
.comanda-total-sub {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-muted);
    display: block;
    margin-bottom: 0.2rem;
}
.comanda-total-lbl {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-right: 0.5rem;
}
.comanda-total-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--xt-carbon);
}

.comanda-acciones {
    display: flex;
    gap: 0.55rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.comanda-acciones .btn-primario,
.comanda-acciones .btn-secundario { flex: 1; min-width: 9rem; }
.comanda-acciones .comanda-btn-azul {
    background: #1565C0;
    border-color: #1565C0;
    color: #FFF8F0;
}
.comanda-acciones .comanda-btn-azul:hover { background: #0d4a8f; border-color: #0d4a8f; }
.comanda-acciones .comanda-btn-cancelar {
    flex: 0 0 auto;
    min-width: auto;
    padding: 0.7rem 1rem;
    color: var(--color-alerta);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Estado vacío editorial */
.comanda-vacio {
    position: relative;
    padding: 4rem 1.5rem 4.5rem;
    text-align: center;
    background: var(--xt-crema-2);
    border-radius: var(--ficha-radius-lg);
    overflow: hidden;
    box-shadow: var(--ficha-sombra);
}
.comanda-vacio::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 280px;
    height: 280px;
    background-image: url('../img/isotipo-terracota.svg');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.10;
    pointer-events: none;
}
.comanda-vacio::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12px;
    background-image: var(--xt-greca-terracota);
    background-repeat: repeat-x;
    background-size: auto 12px;
    opacity: 0.55;
}
.comanda-vacio-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    color: var(--xt-carbon);
    margin: 0 0 0.45rem;
    position: relative;
    z-index: 1;
}
.comanda-vacio-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Barra superior del mostrador (filtros + en vivo) */
.comanda-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0.5rem 0 1.1rem;
}
.comanda-barra-izq { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.comanda-barra-der {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.comanda-vivo-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--xt-terracota);
    box-shadow: 0 0 0 0 rgba(216,67,21,0.5);
    animation: comanda-vivo-pulse 1.8s infinite ease-out;
}
@keyframes comanda-vivo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(216,67,21,0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(216,67,21,0); }
    100% { box-shadow: 0 0 0 0 rgba(216,67,21,0); }
}
.comanda-contador-activas {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    background: var(--xt-terracota);
    color: var(--xt-crema);
}
.comanda-contador-activas.is-hidden { display: none; }

/* Chips Tipo de entrega (envío/pickup) */
.comanda-chips-tipo {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.comanda-chip-tipo {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--xt-crema-3);
    color: var(--xt-carbon);
    border: 1px solid var(--xt-line);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.comanda-chip-tipo:hover { background: var(--xt-crema-2); }
.comanda-chip-tipo.is-active {
    background: var(--xt-carbon);
    color: var(--xt-crema);
    border-color: var(--xt-carbon);
}
.comanda-chips-lbl {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-right: 0.35rem;
    font-weight: 500;
}

/* Toggle editorial reutilizable (config) */
.cfg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}
.cfg-toggle-track {
    width: 44px; height: 24px;
    border-radius: 999px;
    background: var(--xt-line-strong);
    position: relative;
    transition: background .2s;
}
.cfg-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--xt-crema);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: transform .2s;
}
.cfg-toggle input { display: none; }
.cfg-toggle input:checked + .cfg-toggle-track { background: var(--xt-jade); }
.cfg-toggle input:checked + .cfg-toggle-track .cfg-toggle-thumb { transform: translateX(20px); }
.cfg-toggle-lbl {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--xt-carbon);
}

/* Config tab: panel QR + selector mesas + pedidos en línea */
.cfg-pedidos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
@media (min-width: 900px) {
    .cfg-pedidos-grid { grid-template-columns: 1.15fr 0.85fr; }
}
.cfg-qr-row {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.cfg-qr-box {
    background: var(--xt-crema);
    padding: 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--xt-line);
    flex-shrink: 0;
}
.cfg-qr-link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    word-break: break-all;
    padding: 0.55rem 0.7rem;
    background: var(--xt-crema);
    border: 1px solid var(--xt-line);
    border-radius: 8px;
    color: var(--xt-carbon);
    margin: 0.5rem 0 0.7rem;
}
.cfg-meta-line {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.4rem;
}
.cfg-bloque {
    padding: 0.95rem 0;
    border-top: 1px solid var(--xt-line);
}
.cfg-bloque:first-of-type { border-top: 0; padding-top: 0.4rem; }
.cfg-bloque-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-carbon);
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
}
.cfg-bloque-meta {
    font-size: 0.88rem;
    color: var(--xt-muted);
    margin: 0 0 0.65rem;
    line-height: 1.4;
}
.cfg-pedidos-checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
@media (min-width: 640px) {
    .cfg-pedidos-checks { grid-template-columns: 1fr 1fr; }
}
.cfg-check-card {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border-radius: 10px;
    background: var(--xt-crema);
    border: 1px solid var(--xt-line);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cfg-check-card:hover { border-color: var(--xt-jade); }
.cfg-check-card input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--xt-jade); }
.cfg-check-card-titulo {
    font-weight: 600;
    color: var(--xt-carbon);
    font-size: 0.92rem;
}
.cfg-check-card-meta {
    font-size: 0.78rem;
    color: var(--xt-muted);
    margin-top: 0.15rem;
    line-height: 1.35;
}
.cfg-detalle-bloqueado { opacity: 0.45; pointer-events: none; }
.cfg-acciones-pie {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--xt-line);
}

/* ============================================================
   MESAS — IDENTIDAD EDITORIAL XTRYDE
   Scope: .mesas-editorial (vista) y .mesas-modal-editorial (overlays).
   Toda la decoracion vive aqui; el JS solo agrega clases y kickers.
   ============================================================ */

/* --- Vista principal --- */
.mesas-editorial .pos-tabs { gap: 0.4rem; }

/* Plano del salon: fondo crema + greca xicalcoliuhqui muy sutil */
.mesas-editorial .plano-shell {
    position: relative;
    background: var(--xt-crema);
    border: 1px solid var(--xt-line);
    border-radius: 16px;
    padding: 0.85rem 1rem 1.1rem;
    overflow: hidden;
}
.mesas-editorial .plano-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 12px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 28px 14px;
    opacity: 0.55;
    pointer-events: none;
}
.mesas-editorial .plano-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.65rem;
}
.mesas-editorial .plano-meta-lede {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.mesas-editorial .plano-leyenda {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    align-items: center;
}
.mesas-editorial .plano-leyenda span.dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.mesas-editorial .plano-leyenda-item {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xt-carbon);
    opacity: 0.78;
}
.mesas-editorial .plano-leyenda .dot-libre    { background: rgba(0,137,123,0.12); border: 1.5px solid var(--xt-jade); }
.mesas-editorial .plano-leyenda .dot-ocupada  { background: var(--xt-terracota); }
.mesas-editorial .plano-leyenda .dot-listo    { background: #F2C14E; border: 1.5px solid #B07A1F; }

.mesas-editorial .plano-superficie {
    background-color: var(--xt-crema-2);
    background-image:
        var(--xt-greca-soft),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(42,54,61,0.05) 39px, rgba(42,54,61,0.05) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(42,54,61,0.05) 39px, rgba(42,54,61,0.05) 40px);
    background-repeat: repeat-x, repeat, repeat;
    background-size: 28px 14px, auto, auto;
    background-position: 0 0, 0 0, 0 0;
    border-radius: 12px;
    border: 1px solid var(--xt-line);
}
.mesas-editorial .plano-superficie.is-edit {
    background-color: #FFF5EC;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat;
    background-size: 28px 14px;
    border: 2px dashed var(--xt-terracota);
}

/* --- Mesa tile editorial --- */
.mesas-editorial .mesa-tile {
    position: absolute;
    border-radius: 12px;
    width: 96px;
    min-height: 78px;
    padding: 0.55rem 0.45rem 0.5rem;
    box-sizing: border-box;
    background: var(--xt-crema);
    border: 1px solid var(--xt-line-strong);
    box-shadow: 0 1px 0 rgba(42,54,61,0.06), 0 8px 16px -12px rgba(42,54,61,0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    color: var(--xt-carbon);
    overflow: hidden;
}
.mesas-editorial .mesa-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(42,54,61,0.08), 0 12px 22px -12px rgba(42,54,61,0.28);
}
.mesas-editorial .mesa-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--xt-line);
}
.mesas-editorial .mesa-tile.is-libre {
    background: var(--xt-crema);
    border-color: rgba(0,137,123,0.32);
}
.mesas-editorial .mesa-tile.is-libre::before { background: var(--xt-jade); }
.mesas-editorial .mesa-tile.is-ocupada {
    background: var(--xt-terracota);
    color: var(--xt-crema);
    border-color: var(--xt-terracota-dark);
}
.mesas-editorial .mesa-tile.is-ocupada::before { background: var(--xt-terracota-dark); }
.mesas-editorial .mesa-tile.is-listo {
    background: #FDF3D4;
    border-color: #B07A1F;
    color: #5C3A0A;
}
.mesas-editorial .mesa-tile.is-listo::before { background: #B07A1F; }
.mesas-editorial .mesa-tile.is-edit {
    border-style: dashed;
    cursor: grab;
}
.mesas-editorial .mesa-tile .mesa-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: center;
    margin-top: 0.25rem;
}
.mesas-editorial .mesa-tile .mesa-kicker {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.78;
    margin-top: 0.15rem;
}
.mesas-editorial .mesa-tile .mesa-val {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    margin-top: 0.2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mesas-editorial .mesa-tile .mesa-meta {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.72;
    margin-top: 0.18rem;
}
.mesas-editorial .mesa-tile .mesa-reserva {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--xt-carbon);
    color: var(--xt-crema);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* --- Empty state editorial --- */
.mesas-editorial .empty-editorial,
.mesas-modal-editorial .empty-editorial {
    text-align: center;
    padding: 2.4rem 1.6rem;
}
.mesas-editorial .empty-editorial .sello-num,
.mesas-modal-editorial .empty-editorial .sello-num {
    margin-bottom: 0.85rem;
}
.mesas-editorial .empty-editorial .empty-titulo,
.mesas-modal-editorial .empty-editorial .empty-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--xt-carbon);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.mesas-editorial .empty-editorial .empty-lede,
.mesas-modal-editorial .empty-editorial .empty-lede {
    color: var(--xt-muted);
    font-size: 0.92rem;
    max-width: 28rem;
    margin: 0 auto 1.2rem;
    line-height: 1.55;
}

/* --- Cuenta: header dash-chrome reusado, ajustes y banner --- */
.mesas-editorial .mesa-banner-listo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--xt-crema-3);
    border: 1px solid #B07A1F;
    border-left: 5px solid #B07A1F;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}
.mesas-editorial .mesa-banner-listo .b-kicker {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8C5A12;
}
.mesas-editorial .mesa-banner-listo .b-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: #5C3A0A;
}

/* Persona tabs */
.mesas-editorial .persona-tabs {
    margin-bottom: 0.85rem;
}
.mesas-editorial .persona-tabs .p-lab {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.45rem;
    display: block;
}
.mesas-editorial .persona-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--xt-line-strong);
    background: var(--xt-crema);
    color: var(--xt-carbon);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mesas-editorial .persona-chip:hover { background: var(--xt-crema-3); }
.mesas-editorial .persona-chip.is-active {
    background: var(--xt-terracota);
    color: var(--xt-crema);
    border-color: var(--xt-terracota);
}
.mesas-editorial .persona-chip.is-active.is-general {
    background: var(--xt-carbon);
    border-color: var(--xt-carbon);
}
.mesas-editorial .persona-chip .p-val {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

/* Subtotal cuenta */
.mesas-editorial .cuenta-subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--xt-line);
}
.mesas-editorial .cuenta-subtotal .cs-lab {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.mesas-editorial .cuenta-subtotal .cs-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--xt-terracota);
    font-variant-numeric: tabular-nums;
}

/* Filas de items: mantener look limpio editorial */
.mesas-editorial .mesa-item-row { border-bottom: 1px solid var(--xt-line); }
.mesas-editorial .mesa-item-row:last-child { border-bottom: 0; }

/* Lista de productos panel derecho */
.mesas-editorial .mesa-prod-row {
    border-bottom: 1px solid var(--xt-line);
    transition: background 0.12s ease;
}
.mesas-editorial .mesa-prod-row:hover { background: var(--xt-crema-3); }
.mesas-editorial .mesa-prod-row .prod-precio {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-terracota);
    font-variant-numeric: tabular-nums;
}

/* --- MODALES editoriales (overlay con scope) --- */
.mesas-modal-editorial .modal-contenido {
    background: var(--xt-crema) !important;
    border: 1px solid var(--xt-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 60px -25px rgba(42,54,61,0.45) !important;
    position: relative;
    overflow: hidden;
}
.mesas-modal-editorial .modal-contenido::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background-image: var(--xt-greca-soft);
    background-repeat: repeat-x;
    background-size: 26px 12px;
    opacity: 0.6;
    pointer-events: none;
}
.mesas-modal-editorial .modal-contenido > * { position: relative; z-index: 1; }
.mesas-modal-editorial .modal-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.45rem;
    color: var(--xt-carbon);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.mesas-modal-editorial .modal-lede {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-top: 0.25rem;
}
.mesas-modal-editorial .modal-cerrar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(42,54,61,0.06);
    color: var(--xt-carbon);
    font-size: 1.1rem;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mesas-modal-editorial .modal-cerrar:hover { background: rgba(42,54,61,0.14); }

/* Resumen de cobro: panel editorial con cifra Fraunces */
.mesas-modal-editorial .cobro-resumen {
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
}
.mesas-modal-editorial .cobro-resumen .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
}
.mesas-modal-editorial .cobro-resumen .row .lab {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.mesas-modal-editorial .cobro-resumen .row .val {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--xt-carbon);
    font-variant-numeric: tabular-nums;
}
.mesas-modal-editorial .cobro-resumen .row.total {
    padding-top: 0.55rem;
    margin-top: 0.45rem;
    border-top: 1px solid var(--xt-line);
}
.mesas-modal-editorial .cobro-resumen .row.total .lab {
    color: var(--xt-carbon);
    font-size: 0.7rem;
}
.mesas-modal-editorial .cobro-resumen .row.total .val {
    font-size: 1.85rem;
    color: var(--xt-terracota);
    font-weight: 700;
}

/* Pills editoriales para propina / metodo de pago */
.mesas-modal-editorial .pill-grupo {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.mesas-modal-editorial .pill-mesa {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--xt-line-strong);
    background: var(--xt-crema);
    color: var(--xt-carbon);
    cursor: pointer;
    transition: all 0.15s ease;
}
.mesas-modal-editorial .pill-mesa:hover { background: var(--xt-crema-3); }
.mesas-modal-editorial .pill-mesa.is-active {
    background: var(--xt-terracota);
    color: var(--xt-crema);
    border-color: var(--xt-terracota);
}
.mesas-modal-editorial .pill-mesa.is-active.is-carbon {
    background: var(--xt-carbon);
    border-color: var(--xt-carbon);
}

/* Bloque seccion mono dentro de modal */
.mesas-modal-editorial .modal-mini-kicker {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 0.55rem;
    display: block;
}

/* Lista compacta de espacios en modal de gestion */
.mesas-modal-editorial .espacio-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--xt-line);
}
.mesas-modal-editorial .espacio-row:last-child { border-bottom: 0; }

/* Iconito de alerta editorial (para confirmaciones destructivas) */
.mesas-modal-editorial .icono-alerta {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(216,67,21,0.12);
    color: var(--xt-terracota);
    flex-shrink: 0;
}
.mesas-modal-editorial .aviso-rojo {
    background: rgba(216,67,21,0.08);
    border: 1px solid rgba(216,67,21,0.25);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    color: var(--xt-carbon);
    font-size: 0.88rem;
}
.mesas-modal-editorial .aviso-info {
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    color: var(--xt-carbon);
    font-size: 0.88rem;
}

/* Folios POS — anular numero decorativo en mesas (lo usaba ventas) */
.mesas-editorial .pos-folio { position: relative; }

/* Responsive: tile mas pequeno en moviles */
@media (max-width: 640px) {
    .mesas-editorial .mesa-tile {
        width: 82px;
        min-height: 70px;
        padding: 0.45rem 0.35rem;
    }
    .mesas-editorial .mesa-tile .mesa-num { font-size: 1.1rem; }
    .mesas-modal-editorial .cobro-resumen .row.total .val { font-size: 1.55rem; }
}

/* ============================================================
   SISTEMA EDITORIAL — Componentes extra para vistas admin
   Extrae a CSS global lo que vivia inline en index.html / landing.
   Canon: .claude/skills/xtryde-design/componentes/*.md
   ============================================================ */

/* --- Sellos / cintillas / labels mono --- */
.cintilla-xt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    border-top: 1px solid var(--xt-line);
    border-bottom: 1px solid var(--xt-line);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.cintilla-xt-sep { color: var(--xt-line-strong); }

.label-mono {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 8px;
    display: block;
}

/* --- Botones editoriales (canon: componentes/botones.md) --- */
.btn-xt-primario {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    min-height: 48px;
    border-radius: var(--ficha-radius);
    background: var(--xt-terracota);
    color: var(--xt-crema);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--ficha-sombra);
    transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.btn-xt-primario:hover {
    box-shadow: var(--ficha-sombra-hover);
    transform: translateY(-1px);
    background: var(--xt-terracota-dark);
}
.btn-xt-primario:active { transform: translateY(0); }
.btn-xt-primario:disabled,
.btn-xt-primario[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--ficha-sombra);
}
.btn-xt-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.btn-xt-primario:hover .btn-xt-arrow { transform: translateX(4px); }

.btn-xt-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    min-height: 48px;
    border-radius: var(--ficha-radius);
    background: transparent;
    color: var(--xt-carbon);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    border: 1.5px solid var(--xt-line-strong);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.btn-xt-ghost:hover {
    border-color: var(--xt-terracota);
    color: var(--xt-terracota);
    background: rgba(216, 67, 21, 0.04);
}
.btn-xt-ghost:disabled,
.btn-xt-ghost[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-xt-texto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--xt-carbon);
    text-decoration: underline;
    text-decoration-color: var(--xt-terracota);
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    transition: color 0.3s ease;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
}
.btn-xt-texto:hover { color: var(--xt-terracota); }

.btn-xt-blanco {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    min-height: 48px;
    border-radius: var(--ficha-radius);
    background: var(--xt-crema);
    color: var(--xt-terracota-dark);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-xt-blanco:hover {
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

/* Variantes peligro / exito para botones primarios */
.btn-xt-primario.is-peligro {
    background: var(--color-alerta);
}
.btn-xt-primario.is-peligro:hover { background: #8E0000; }
.btn-xt-primario.is-exito {
    background: var(--color-exito);
}
.btn-xt-primario.is-exito:hover { background: #1B5E20; }

/* --- Tipografia interna de ficha (cuando la ficha tiene contenido editorial) --- */
.ficha-sello {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--xt-muted);
    margin-bottom: 12px;
    display: block;
}
.ficha-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
    color: var(--xt-carbon);
    margin: 0 0 12px;
}
.ficha-cuerpo {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--xt-muted);
    margin-bottom: 18px;
}
.ficha-terracota .ficha-sello,
.ficha-jade .ficha-sello,
.ficha-dark .ficha-sello { color: rgba(255, 248, 240, 0.62); }
.ficha-terracota .ficha-titulo,
.ficha-jade .ficha-titulo,
.ficha-dark .ficha-titulo { color: var(--xt-crema); }
.ficha-terracota .ficha-cuerpo,
.ficha-jade .ficha-cuerpo,
.ficha-dark .ficha-cuerpo { color: rgba(255, 248, 240, 0.78); }

/* --- Tabs editoriales (canon: componentes/tabs.md) --- */
.tabs-xt {
    display: inline-flex;
    gap: 0;
    border-bottom: 1px solid var(--xt-line);
    flex-wrap: wrap;
}
.tab-xt {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 22px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    color: var(--xt-muted);
    transition: color 0.3s ease, border-color 0.3s ease;
    margin-bottom: -1px;
}
.tab-xt:hover { color: var(--xt-carbon); }
.tab-xt.is-active {
    color: var(--xt-carbon);
    border-bottom-color: var(--xt-terracota);
}
.tab-xt-num {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--xt-muted);
}
.tab-xt-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.tab-xt.is-active .tab-xt-num { color: var(--xt-terracota); }

/* --- Formularios editoriales (canon: componentes/forms.md) --- */
.campo-xt { margin-bottom: 20px; }
.campo-xt.is-inline { display: flex; gap: 16px; align-items: end; margin-bottom: 0; }
.input-xt,
.textarea-xt,
.select-xt {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--xt-line-strong);
    border-radius: var(--ficha-radius);
    background: var(--xt-crema);
    color: var(--xt-carbon);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color 0.3s ease;
}
.input-xt:focus,
.textarea-xt:focus,
.select-xt:focus {
    outline: 0;
    border-color: var(--xt-terracota);
}
.input-xt::placeholder { color: var(--xt-muted); opacity: 0.6; }
.textarea-xt { min-height: 120px; resize: vertical; }
.select-xt {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1,1 L6,6 L11,1' fill='none' stroke='%232A363D' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px auto;
    padding-right: 40px;
}
.input-xt[aria-invalid="true"],
.textarea-xt[aria-invalid="true"],
.select-xt[aria-invalid="true"] { border-color: var(--xt-terracota-dark); }

.error-xt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--xt-terracota-dark);
    margin-top: 6px;
}
.helper-xt {
    font-size: 12.5px;
    color: var(--xt-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* --- Lista como fichas (reemplaza <table>) --- */
.tabla-fichas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
.tabla-fichas-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    box-shadow: var(--ficha-sombra);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tabla-fichas-row:hover {
    box-shadow: var(--ficha-sombra-hover);
}
.tabla-fichas-row.is-inactivo {
    opacity: 0.55;
}
.tabla-fichas-icono {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--xt-crema-3);
    border-radius: var(--ficha-radius);
    color: var(--xt-terracota);
}
.tabla-fichas-icono img { width: 28px; height: 28px; opacity: 0.85; }
.tabla-fichas-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tabla-fichas-titulo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--xt-carbon);
    line-height: 1.2;
    word-break: break-word;
}
.tabla-fichas-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xt-muted);
}
.tabla-fichas-meta span strong {
    font-weight: 500;
    color: var(--xt-carbon);
    margin-left: 6px;
    letter-spacing: 0;
    text-transform: none;
    font-family: 'DM Sans', sans-serif;
}
.tabla-fichas-acciones {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 640px) {
    .tabla-fichas-row {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .tabla-fichas-acciones {
        grid-column: 1 / -1;
        justify-content: flex-end;
        border-top: 1px solid var(--xt-line);
        padding-top: 0.6rem;
    }
}

/* --- Status badge / pill estado (chips de estado pasivo) --- */
.estado-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--xt-crema-3);
    color: var(--xt-carbon);
    border: 1px solid var(--xt-line);
}
.estado-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}
.estado-pill.is-exito { background: rgba(0,137,123,0.10); color: var(--xt-jade-dark); border-color: rgba(0,137,123,0.28); }
.estado-pill.is-alerta { background: rgba(216,67,21,0.10); color: var(--xt-terracota-dark); border-color: rgba(216,67,21,0.28); }
.estado-pill.is-aviso { background: rgba(232,163,60,0.12); color: #8B5A1A; border-color: rgba(232,163,60,0.32); }
.estado-pill.is-info { background: rgba(42,54,61,0.06); color: var(--xt-carbon); border-color: var(--xt-line); }

/* --- Toolbar editorial (busqueda + filtros + accion) --- */
.toolbar-xt {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--xt-crema-2);
    border: 1px solid var(--xt-line);
    border-radius: var(--ficha-radius-lg);
    margin-bottom: 1.25rem;
}
.toolbar-xt-busqueda {
    flex: 1 1 240px;
    min-width: 200px;
}
.toolbar-xt-busqueda .input-xt { padding-left: 38px; background-position: 12px center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); }
.toolbar-xt-acciones { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* --- Estado vacio editorial --- */
.estado-vacio-xt {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--xt-crema-2);
    border: 1px dashed var(--xt-line-strong);
    border-radius: var(--ficha-radius-lg);
}
.estado-vacio-xt img {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    opacity: 0.5;
}
.estado-vacio-xt h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--xt-carbon);
    margin-bottom: 0.4rem;
}
.estado-vacio-xt p {
    color: var(--xt-muted);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

/* --- Toggle editorial (rectangular, no iOS pill) --- */
.toggle-xt {
    --w: 48px;
    --h: 24px;
    position: relative;
    display: inline-block;
    width: var(--w);
    height: var(--h);
    flex-shrink: 0;
}
.toggle-xt input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}
.toggle-xt-slider {
    position: absolute;
    inset: 0;
    background: var(--xt-crema-3);
    border: 1.5px solid var(--xt-line-strong);
    border-radius: 4px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.toggle-xt-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--h) - 8px);
    height: calc(var(--h) - 8px);
    background: var(--xt-carbon);
    border-radius: 2px;
    transition: transform 0.2s ease, background 0.2s ease;
}
.toggle-xt input:checked + .toggle-xt-slider {
    background: var(--xt-terracota);
    border-color: var(--xt-terracota-dark);
}
.toggle-xt input:checked + .toggle-xt-slider::after {
    transform: translateX(calc(var(--w) - var(--h)));
    background: var(--xt-crema);
}
.toggle-xt input:focus-visible + .toggle-xt-slider {
    outline: 2px solid var(--xt-terracota);
    outline-offset: 3px;
}
.toggle-xt input:disabled + .toggle-xt-slider { opacity: 0.5; cursor: not-allowed; }