/**
 * App Service — Clásico Theme · CSS
 *
 * Estética Vista Classic — paleta gris azulada, Segoe UI, esquinas cuadradas.
 * Tema autocontenido. Cada regla scopeada a `.app-service-container.as-theme-clasico`.
 *
 * Secciones:
 *   1. Tokens (light + dark) — scopeados al container.
 *   2. Reset / base.
 *   3. Layout grid + estados de colapso (drawer/inspector/no-orders/variant horizontal).
 *   4. Topbar (global app-level).
 *   5. Drawer (rail vertical de global tabs).
 *   6. Sidebar (nav contextual al tab activo + footer).
 *   7. Toolbar (header doc-level de orden — estilo Vista de 2 filas).
 *   8. Dtabs (folder tabs estilo Windows).
 *   9. Subtabs horizontales (variante).
 *  10. Content.
 *  11. Inspector.
 *
 * @version 0.1.0
 */

/* ============================================================
   Boot loader: HTML en layout.php, removido por core/frontend/js/main.js#init()
   al terminar de hidratar. `visibility: visible` defiende contra el anti-FOUC
   del container; en clásico no hace daño (no hay anti-FOUC), en modern es
   necesario para que el spinner se vea antes de --visible.
   ============================================================ */
.as-theme-clasico .as-boot-loader {
    visibility: visible;
    position: fixed;
    inset: var(--wp-admin-bar-height, 0) 0 0 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    color: var(--accent);
    font-size: 32px;
}

/* ============================================================
   1. TOKENS
   ============================================================ */
.app-service-container.as-theme-clasico,
.app-service-page.as-theme-clasico {
    --font-sans: "Segoe UI", Tahoma, Verdana, "Lucida Grande", system-ui, sans-serif;

    --as-font-scale: 1;

    --fs-large-title: calc(20px * var(--as-font-scale, 1));
    --fs-title-1:     calc(17px * var(--as-font-scale, 1));
    --fs-title-2:     calc(14px * var(--as-font-scale, 1));
    --fs-headline:    calc(13px * var(--as-font-scale, 1));
    --fs-body:        calc(12px * var(--as-font-scale, 1));
    --fs-callout:     calc(11px * var(--as-font-scale, 1));
    --fs-footnote:    calc(11px * var(--as-font-scale, 1));
    --fs-micro:       calc(10px * var(--as-font-scale, 1));
    --fs-micro2:      calc(9px  * var(--as-font-scale, 1));

    --space-1: 4px;
    --space-2: 6px;
    --space-3: 10px;
    --space-4: 14px;
    --space-5: 20px;
    --space-6: 28px;

    --accent:         #2856a3;
    --accent-hover:   #1f4790;
    --accent-pressed: #18386f;
    --accent-bg-soft: rgba(40, 86, 163, 0.15);

    --system-red:      #b8120a;
    --system-red-soft: rgba(184, 18, 10, 0.14);
    --system-green:    #1f7032;
    --system-orange:   #a85800;

    /* Texto sobre accent (no cambia en dark, el accent es siempre azul). */
    --label-on-accent: #fff;

    --label-primary:    rgba(0, 0, 0, 0.85);
    --label-secondary:  rgba(0, 0, 0, 0.60);
    --label-tertiary:   rgba(0, 0, 0, 0.40);
    --label-quaternary: rgba(0, 0, 0, 0.20);

    --fill-1: rgba(0, 0, 0, 0.05);
    --fill-2: rgba(0, 0, 0, 0.09);
    --fill-3: rgba(0, 0, 0, 0.14);

    --bg-primary:   #eef0f3;
    --bg-secondary: #d4d7dc;
    --bg-tertiary:  #c8ccd3;

    --border:       #a8adb6;
    --border-soft:  #c1c5cd;
    --border-faint: rgba(0, 0, 0, 0.18);
    --separator:    rgba(0, 0, 0, 0.10);

    --r-sm: 2px;
    --r-md: 3px;
    --r-lg: 4px;

    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.06);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.14);

    /* === Component tokens (light) ===
       Permiten redefinir sólo los componentes en dark sin tocar las reglas.
       Cualquier hex hardcodeado en regla CSS rompe dark, por eso TODO lo que
       no sea el accent o un color de sistema vive como token acá. */

    /* Card / panel blanco con sus variantes */
    --card-bg:               #fff;
    --card-bg-subtle:        #f6f7f9;
    --card-header-bg:        linear-gradient(to bottom, #eef1f5, #dadee5);
    --card-header-bg-hover:  linear-gradient(to bottom, #f5f7fa, #e4e8ed);

    /* Inputs/selects: en light coincide con card-bg + delimitación por border;
       en dark debe ser distintamente más oscuro para "hundirse" en el panel. */
    --input-bg: #fff;

    /* Botón light Vista (idle / hover / pressed) */
    --btn-light-bg:         linear-gradient(to bottom, #f7f8fa, #d8dce3);
    --btn-light-bg-hover:   linear-gradient(to bottom, #ffffff, #e0e4eb);
    --btn-light-bg-pressed: linear-gradient(to bottom, #d8dce3, #c8ccd5);

    /* Shell (topbar + toolbar) */
    --shell-topbar-bg:  linear-gradient(to bottom, #e7eaef 0%, #c8cdd5 100%);
    --shell-toolbar-bg: linear-gradient(to bottom, #e0e4ea 0%, #c4c9d2 100%);

    /* Folder tabs (dtabs) */
    --folder-tab-bg:       linear-gradient(to bottom, #e0e4ea, #c8cdd5);
    --folder-tab-bg-hover: linear-gradient(to bottom, #ebeef3, #d4d8df);
    /* Fondo de la dtab ACTIVA: debe igualar el TOPE del gradient de la
       toolbar (`--shell-toolbar-bg`, franja inmediatamente debajo) para
       que la pestaña activa se funda con ella sin línea/seam. */
    --dtab-active-bg:      #e0e4ea;

    /* Botones primary (fill accent): en light usa el accent directo, en dark
       necesita un azul más profundo que el `--accent` brillante (sino el
       botón "Nueva" queda celeste claro fuera de tono con el resto). */
    --btn-primary-bg:       linear-gradient(to bottom, #2856a3, #18386f);
    --btn-primary-bg-hover: linear-gradient(to bottom, #1f4790, #18386f);

    /* Hover de botones de la app-toolbar: en light queda fuerte como gradient
       Vista; en dark queda sutil estilo `card-bg-subtle` (sin gradient). */
    --toolbar-btn-bg-hover: var(--btn-light-bg-hover);

    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --dur-fast: 120ms;
    --dur-mid:  180ms;

    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--label-primary);
    background: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
}

/* Escala de texto por usuario (4 presets). Solo redefine el multiplicador;
   los --fs-* ya lo consumen vía calc(). Ortogonal a dark mode. */
.app-service-container.as-theme-clasico[data-as-font-size="grande"]     { --as-font-scale: 1.15; }
.app-service-container.as-theme-clasico[data-as-font-size="mas-grande"] { --as-font-scale: 1.30; }
.app-service-container.as-theme-clasico[data-as-font-size="maximo"]     { --as-font-scale: 1.50; }

.dark .app-service-container.as-theme-clasico,
.app-service-container.as-theme-clasico.dark,
.dark .app-service-page.as-theme-clasico,
.app-service-page.as-theme-clasico.dark {
    --label-primary:    rgba(255, 255, 255, 0.92);
    --label-secondary:  rgba(255, 255, 255, 0.70);
    --label-tertiary:   rgba(255, 255, 255, 0.45);
    --label-quaternary: rgba(255, 255, 255, 0.25);

    --fill-1: rgba(255, 255, 255, 0.06);
    --fill-2: rgba(255, 255, 255, 0.10);
    --fill-3: rgba(255, 255, 255, 0.14);

    --bg-primary:   #2a2f37;
    --bg-secondary: #1f2329;
    --bg-tertiary:  #181c21;

    --border:       #5e6677;
    --border-soft:  #4a5160;
    --border-faint: rgba(255, 255, 255, 0.12);
    --separator:    rgba(255, 255, 255, 0.10);

    /* Accent: en dark el azul oscuro #2856a3 queda ilegible sobre cards
       oscuras. Subimos a un azul vibrante manteniendo la familia. */
    --accent:          #5a8edb;
    --accent-hover:    #7ba5e8;
    --accent-pressed:  #4a7cc9;
    --accent-bg-soft:  rgba(90, 142, 219, 0.22);

    --system-red:      #ff5a4a;
    --system-red-soft: rgba(255, 90, 74, 0.20);
    --system-green:    #3aa84e;
    --system-orange:   #d68429;

    /* === Component tokens (dark) ===
       Lógica invertida del light: card-bg debe ser MÁS CLARO que bg-primary
       (analogía a "blanco sobre gris claro" del light). Y card-header-bg
       debe ser más claro que el body de la card (en light el header es
       más oscuro porque el body es blanco; acá invertimos). */
    --card-bg:               #383d47;
    --card-bg-subtle:        #2f343d;
    --card-header-bg:        linear-gradient(to bottom, #4a5160, #383d47);
    --card-header-bg-hover:  linear-gradient(to bottom, #5a6275, #454c59);

    /* Inputs sobre card-bg dark deben ser MÁS oscuros para "hundirse"
       en el panel, opuesto al light donde coinciden. */
    --input-bg: #2a2f37;

    /* Botones light: hover claramente más brillante que el header de card,
       para que se note el feedback del cursor sobre los gradients oscuros. */
    --btn-light-bg:         linear-gradient(to bottom, #404654, #2a2f37);
    --btn-light-bg-hover:   linear-gradient(to bottom, #6b7589, #4e5667);
    --btn-light-bg-pressed: linear-gradient(to bottom, #2a2f37, #1f2329);

    --shell-topbar-bg:  linear-gradient(to bottom, #2e333c, #1f2329);
    --shell-toolbar-bg: linear-gradient(to bottom, #2a2f37, #1f2329);

    --folder-tab-bg:       linear-gradient(to bottom, #2e333c, #1f2329);
    --folder-tab-bg-hover: linear-gradient(to bottom, #3a4049, #262b32);
    /* Igual al TOPE de `--shell-toolbar-bg` dark (#2a2f37) → la dtab
       activa se funde con la toolbar también en dark. */
    --dtab-active-bg:      #2a2f37;

    /* Botón primary dark: usa azul más profundo (no el --accent #5a8edb que
       es celeste claro y desentona en topbar). */
    --btn-primary-bg:       linear-gradient(to bottom, #2c5fa8, #1f4382);
    --btn-primary-bg-hover: linear-gradient(to bottom, #356bb8, #2c5fa8);

    /* Hover toolbar dark: sutil, no gradient pesado (en dark el gradient
       claro queda demasiado fuerte y desentona). */
    --toolbar-btn-bg-hover: var(--card-bg-subtle);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
.app-service-container.as-theme-clasico,
.app-service-container.as-theme-clasico *,
.app-service-page.as-theme-clasico,
.app-service-page.as-theme-clasico * { box-sizing: border-box; }

.as-theme-clasico button { font-family: inherit; cursor: pointer; }
.as-theme-clasico input,
.as-theme-clasico select,
.as-theme-clasico textarea { font-family: inherit; }

/* ============================================================
   3. LAYOUT GRID
   ============================================================ */
html.app-service-shell-mounted,
body.app-service-shell-mounted,
html:has(.app-service-container.as-theme-clasico),
body:has(.app-service-container.as-theme-clasico) {
    overflow: hidden;
    height: 100vh;
}
.app-service-container.as-theme-clasico {
    position: fixed;
    top: var(--wp-admin-bar-height, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    overscroll-behavior: contain;
}

.as-theme-clasico .app-container {
    display: grid;
    grid-template-columns: 68px 224px 1fr 280px;
    /* Row 3 (toolbar) = `auto` para que crezca a 2 filas cuando los items
       no entran en una sola (flex-wrap del .app-toolbar). El min-height del
       toolbar mantiene los 40px nominales cuando entra en una sola fila. */
    grid-template-rows: 44px auto auto 1fr;
    grid-template-areas:
        "topbar topbar  topbar  topbar"
        "drawer sidebar dtabs   inspector"
        "drawer sidebar toolbar inspector"
        "drawer sidebar content inspector";
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: grid-template-columns var(--dur-mid) var(--ease),
                grid-template-rows var(--dur-mid) var(--ease);
}
/* Restauración de estado en el boot: theme.js aplica los data-drawer /
   data-inspector guardados DESPUÉS del primer paint del PHP. Sin esto el
   grid animaba las columnas en cada carga (todo lo de abajo del topbar
   "se movía" a la izquierda). layout.php marca `.app-container--booting`
   desde el primer byte; theme.js la quita tras restaurar (doble rAF) →
   los toggles del usuario posteriores sí animan. Specificity (0,3,0)
   gana a `.app-container` (0,2,0) sin `!important`. */
.as-theme-clasico .app-container--booting {
    transition: none;
}
body.admin-bar { --wp-admin-bar-height: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar { --wp-admin-bar-height: 46px; }
}

/* Cuando active tab no es ordenes, se colapsan toolbar+dtabs+inspector.
   Excluye tabs con `data-no-sidebar` (Estadísticas/Plazos) — ese caso lo
   maneja la regla declarativa de abajo. */
.as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]):not([data-no-sidebar]) {
    grid-template-rows: 44px 0px 0px 1fr;
    grid-template-columns: 68px 224px 1fr 0px;
}
.as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]) .app-toolbar,
.as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]) .app-dtabs {
    overflow: hidden; border: none; padding: 0; min-height: 0;
    height: 0; visibility: hidden; pointer-events: none;
}
.as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]) .app-inspector {
    overflow: hidden; border: none; width: 0; visibility: hidden; pointer-events: none;
}
.as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]) [data-ordenes-only] {
    display: none;
}

/* Tabs sin sidebar contextual (`data-no-sidebar` lo setea theme.js al
   entrar/salir de los tabs declarados en NO_SIDEBAR_TABS). Colapsa
   sidebar + dtabs + toolbar para que el contenido use todo el ancho/alto
   disponible. Mutuamente excluyente con las reglas legacy (que ya excluyen
   `[data-no-sidebar]` vía `:not()`). */
.as-theme-clasico .app-container[data-active-tab][data-no-sidebar] {
    grid-template-rows: 44px 0px 0px 1fr;
    grid-template-columns: 68px 0px 1fr 0px;
}
.as-theme-clasico .app-container[data-active-tab][data-no-sidebar] .app-sidebar {
    overflow: hidden; border: none; width: 0; visibility: hidden; pointer-events: none;
}
.as-theme-clasico .app-container[data-active-tab][data-no-sidebar] .app-toolbar,
.as-theme-clasico .app-container[data-active-tab][data-no-sidebar] .app-dtabs {
    overflow: hidden; border: none; padding: 0; min-height: 0;
    height: 0; visibility: hidden; pointer-events: none;
}
.as-theme-clasico .app-container[data-drawer="collapsed"][data-active-tab][data-no-sidebar] {
    grid-template-columns: 0px 0px 1fr 0px;
}

/* Inspector colapsable */
.as-theme-clasico .app-container[data-inspector="collapsed"] {
    grid-template-columns: 68px 224px 1fr 0px;
}

/* Drawer colapsable */
.as-theme-clasico .app-container[data-drawer="collapsed"] {
    grid-template-columns: 0px 224px 1fr 280px;
}
.as-theme-clasico .app-container[data-drawer="collapsed"][data-inspector="collapsed"] {
    grid-template-columns: 0px 224px 1fr 0px;
}
.as-theme-clasico .app-container[data-drawer="collapsed"][data-active-tab]:not([data-active-tab="ordenes"]):not([data-no-sidebar]) {
    grid-template-columns: 0px 224px 1fr 0px;
}
.as-theme-clasico .app-container[data-drawer="collapsed"] .app-drawer {
    overflow: hidden; visibility: hidden; pointer-events: none;
}

/* Modo controls=inspector: toolbar colapsa (controles migran al inspector). */
.as-theme-clasico .app-container[data-orders-controls="inspector"][data-active-tab="ordenes"] {
    grid-template-rows: 44px auto 0px 1fr;
}
.as-theme-clasico .app-container[data-orders-controls="inspector"] .app-toolbar {
    overflow: hidden; border: none; padding: 0; min-height: 0;
    height: 0; visibility: hidden; pointer-events: none;
}

/* Variante horizontal: subtabs como fila extra entre toolbar y content. */
.as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"] {
    grid-template-columns: 68px 0px 1fr 0px;
    grid-template-rows: 44px auto auto 36px 1fr;
    grid-template-areas:
        "topbar topbar  topbar   topbar"
        "drawer sidebar dtabs    inspector"
        "drawer sidebar toolbar  inspector"
        "drawer sidebar subtabs  inspector"
        "drawer sidebar content  inspector";
}
.as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"][data-drawer="collapsed"] {
    grid-template-columns: 0px 0px 1fr 0px;
}
.as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"] .app-sidebar-section[data-for-panel="ordenes"] {
    display: none;
}
.as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"] .app-inspector,
.as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"] .app-toolbar__btn--inspector,
.as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"] .app-sidebar__btn--inspector {
    display: none;
}

/* ============================================================
   4. TOPBAR
   ============================================================ */
.as-theme-clasico .app-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--shell-topbar-bg);
    border-bottom: 1px solid var(--border);
    color: var(--label-primary);
}
.as-theme-clasico .app-topbar__rail {
    display: flex;
    align-items: center;
}
.as-theme-clasico .app-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--label-primary);
    padding-right: var(--space-3);
}
.as-theme-clasico .app-topbar__brand-logo {
    height: 22px;
    width: auto;
}
.as-theme-clasico .app-topbar__brand-icon {
    color: var(--accent);
}
.as-theme-clasico .app-topbar__brand-name {
    font-size: var(--fs-headline);
}
.as-theme-clasico .app-topbar__sep {
    width: 1px;
    height: 22px;
    background: var(--border-soft);
}
.as-theme-clasico .app-topbar__spacer { flex: 1; }
.as-theme-clasico .app-topbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--label-secondary);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-topbar__btn:hover {
    background: var(--fill-1);
    border-color: var(--border-soft);
    color: var(--label-primary);
}
.as-theme-clasico .app-topbar__btn:active {
    background: var(--fill-2);
}
.as-theme-clasico .app-topbar__btn--drawer-icon-chev { display: none; }

/* ── Indicador de conexión: verde online / rojo offline ──────────────────────
   theme.js sincroniza las clases --online/--offline con el monitor real del
   core (appService.connection.changed) + eventos navigator online/offline. */
.as-theme-clasico .app-topbar__btn--connection i {
    transition: color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-topbar__btn--connection--online i { color: var(--system-green); }
.as-theme-clasico .app-topbar__btn--connection--offline i { color: var(--system-red); }

/* ── Order input (campo "Nº orden") ───────────────────────────────────────── */
.as-theme-clasico .app-toolbar__order-input {
    height: 26px;
    width: 86px;
    padding: 0 8px;
    font-family: inherit;
    font-size: var(--fs-callout);
    color: var(--label-primary);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-toolbar__order-input:focus {
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04),
                0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .app-toolbar__order-input::placeholder { color: var(--label-tertiary); }

/* ── Search group: input + filter-btn como un solo pill ───────────────────── */
.as-theme-clasico .app-topbar__search-group {
    position: relative;
    flex: 1;
    max-width: 360px;
    display: flex;
    align-items: stretch;
    height: 26px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-topbar__search-group:focus-within {
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04),
                0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .app-topbar__search-group .app-toolbar__search-input-new {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: none;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--fs-callout);
    color: var(--label-primary);
    outline: none;
}
.as-theme-clasico .app-topbar__search-group .app-toolbar__search-input-new::placeholder {
    color: var(--label-tertiary);
}
.as-theme-clasico .app-topbar__search-group .app-toolbar__filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 100%;
    padding: 0;
    border: none;
    border-left: 1px solid var(--border-soft);
    background: transparent;
    color: var(--label-tertiary);
    font-size: var(--fs-callout);
    border-top-right-radius: var(--r-sm);
    border-bottom-right-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-topbar__search-group .app-toolbar__filter-btn:hover {
    background: var(--fill-1);
    color: var(--label-primary);
}
.as-theme-clasico .app-topbar__search-group .app-toolbar__filter-btn--active {
    color: var(--accent);
    background: var(--accent-bg-soft);
}

/* Filter dropdown (sale del filter-btn que vive dentro del search-group) */
.as-theme-clasico .app-toolbar__filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    padding: 4px 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-3);
    z-index: 100;
}
.as-theme-clasico .app-toolbar__filter-dropdown.show { display: block; }
.as-theme-clasico .app-toolbar__filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: var(--fs-body);
    color: var(--label-primary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-toolbar__filter-item:hover { background: var(--fill-1); }
.as-theme-clasico .app-toolbar__filter-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
}

/* ── Botón "Nueva orden" — azul accent ────────────────────────────────────── */
.as-theme-clasico .app-topbar__btn-nueva {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--accent-pressed);
    border-radius: var(--r-sm);
    background: var(--btn-primary-bg);
    color: var(--label-on-accent);
    font-size: var(--fs-callout);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-topbar__btn-nueva:hover {
    background: linear-gradient(to bottom, var(--accent-hover), var(--accent-pressed));
}
.as-theme-clasico .app-topbar__btn-nueva:active {
    background: var(--accent-pressed);
}

/* ── User menu (avatar + dropdown "Cerrar sesión") ────────────────────────── */
.as-theme-clasico .app-topbar__order-group,
.as-theme-clasico .app-topbar__search-group {
    /* permite que el dropdown absoluto del filter-btn pueda salir abajo */
    position: relative;
}
.as-theme-clasico .app-toolbar__user-wrap {
    position: relative;
}
.as-theme-clasico .app-toolbar__user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-toolbar__user:hover {
    background: var(--fill-1);
    border-color: var(--border-soft);
    color: var(--label-primary);
}
.as-theme-clasico .app-toolbar__user-avatar {
    font-size: 16px;
    color: var(--label-tertiary);
}
.as-theme-clasico .app-toolbar__user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    padding: 4px 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-3);
    z-index: 100;
}
.as-theme-clasico .app-toolbar__user-dropdown.show { display: block; }
.as-theme-clasico .app-toolbar__user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--label-primary);
    font-size: var(--fs-body);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-toolbar__user-dropdown-item:hover {
    background: var(--accent-bg-soft);
    color: var(--accent);
}
.as-theme-clasico .app-toolbar__user-dropdown-item > i {
    width: 14px;
    text-align: center;
    color: var(--label-tertiary);
}
.as-theme-clasico .app-toolbar__user-dropdown-item:hover > i {
    color: var(--accent);
}

/* ============================================================
   5. DRAWER
   ============================================================ */
.as-theme-clasico .app-drawer {
    grid-area: drawer;
    background: var(--bg-tertiary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: var(--space-2) 0;
    gap: 2px;
    overflow: hidden;
    transition: width var(--dur-mid) var(--ease);
}
.as-theme-clasico .app-drawer__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-1);
}
.as-theme-clasico .app-drawer__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    height: 48px;
    padding: 4px 2px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--label-secondary);
    font-size: var(--fs-micro);
    line-height: 1.1;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-drawer__item i { font-size: 16px; }
.as-theme-clasico .app-drawer__item span {
    font-size: var(--fs-micro);
    letter-spacing: 0.01em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.as-theme-clasico .app-drawer__item:hover {
    background: var(--fill-1);
    color: var(--label-primary);
}
.as-theme-clasico .app-drawer__item--active {
    background: var(--accent-bg-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* ============================================================
   6. SIDEBAR
   ============================================================ */
.as-theme-clasico .app-sidebar {
    grid-area: sidebar;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.as-theme-clasico .app-sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
}
.as-theme-clasico .app-sidebar-section { display: none; }
.as-theme-clasico .app-sidebar-section.active { display: block; }
.as-theme-clasico .app-group {
    margin-bottom: var(--space-3);
}
.as-theme-clasico .app-group__heading {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--label-tertiary);
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
}
.as-theme-clasico .app-nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 5px var(--space-2);
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--label-primary);
    font-size: var(--fs-body);
    text-align: left;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-nav-item:hover {
    background: var(--fill-1);
    border-color: var(--border-soft);
}
.as-theme-clasico .app-nav-item--active {
    background: var(--accent-bg-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.as-theme-clasico .app-nav-badge {
    margin-left: auto;
    font-size: var(--fs-micro);
    font-weight: 600;
    background: var(--fill-2);
    color: var(--label-secondary);
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
}
.as-theme-clasico .app-nav-item--active .app-nav-badge {
    background: var(--accent);
    color: var(--label-on-accent);
}
.as-theme-clasico .app-sidebar__footer {
    border-top: 1px solid var(--border-soft);
    padding: var(--space-1) var(--space-2);
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}
.as-theme-clasico .app-sidebar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--label-secondary);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-sidebar__btn:hover {
    background: var(--fill-1);
    border-color: var(--border-soft);
    color: var(--label-primary);
}

/* ============================================================
   7. TOOLBAR (doc-level — header de orden de 2 filas estilo Vista)
   ============================================================ */
.as-theme-clasico .app-toolbar {
    grid-area: toolbar;
    display: flex;
    /* Wrap a 2 filas cuando los items no entran. El grid-row del shell es
       `auto` → la toolbar empuja al content cuando crece. `min-height` para
       mantener los 40px nominales cuando entra en una sola fila. El `gap`
       sirve como row-gap también en flex. */
    flex-wrap: wrap;
    align-items: center;
    min-height: 40px;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--shell-toolbar-bg);
    border-bottom: 1px solid var(--border);
    color: var(--label-primary);
}
.as-theme-clasico .app-toolbar__spacer { flex: 1; }
.as-theme-clasico .app-toolbar__sep {
    width: 1px;
    height: 22px;
    background: var(--border-soft);
}
.as-theme-clasico .app-toolbar__btn,
.as-theme-clasico .app-toolbar__btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--btn-light-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
/* `hidden` global no pisa el `display: inline-flex` de arriba — re-declaramos
   con specificity superior para que `el.hidden = true` (modo edit toggle de
   Guardar / Cancelar / pills de info) realmente oculte. Regla obligatoria por
   feedback_css_hidden_vs_display. */
.as-theme-clasico .app-toolbar__btn[hidden],
.as-theme-clasico .app-toolbar__btn-action[hidden],
.as-theme-clasico .app-toolbar__sep[hidden] { display: none; }
.as-theme-clasico .app-toolbar__btn:hover,
.as-theme-clasico .app-toolbar__btn-action:hover {
    background: var(--toolbar-btn-bg-hover);
}
.as-theme-clasico .app-toolbar__btn:active,
.as-theme-clasico .app-toolbar__btn-action:active {
    background: var(--btn-light-bg-pressed);
}
.as-theme-clasico .app-toolbar__btn-action[disabled],
.as-theme-clasico .app-toolbar__btn-action:disabled {
    color: var(--label-tertiary);
    background: var(--bg-secondary);
    cursor: not-allowed;
}
.as-theme-clasico .app-toolbar__btn-action--primary {
    background: linear-gradient(to bottom, var(--accent), var(--accent-pressed));
    border-color: var(--accent-pressed);
    color: var(--label-on-accent);
    font-weight: 600;
}
.as-theme-clasico .app-toolbar__btn-action--primary:hover {
    background: linear-gradient(to bottom, var(--accent-hover), var(--accent-pressed));
}
.as-theme-clasico .app-toolbar__btn-action--ghost {
    background: transparent;
    border-color: transparent;
}
.as-theme-clasico .app-toolbar__btn-action--ghost:hover,
.as-theme-clasico .app-toolbar__btn-action--readonly:hover {
    background: var(--toolbar-btn-bg-hover);
    border-color: var(--border-soft);
}
.as-theme-clasico .app-toolbar__btn-action--readonly {
    background: transparent;
    border-color: transparent;
    color: var(--label-secondary);
    cursor: default;
}
.as-theme-clasico .app-toolbar__info-label {
    color: var(--label-tertiary);
    font-weight: 600;
    margin-right: 2px;
}
/* Flechitas de navegación de estado (icon-only): compactas y ghost para
   leer como par del selector de estado (mismo peso visual), no como
   botones de acción sólidos. Hereda height/border/disabled del base. */
.as-theme-clasico .app-toolbar__btn-action--nav {
    padding: 0 var(--space-2);
    gap: 0;
}

/* Variante --warning del pill readonly: días transcurridos supera el threshold
   configurado en Developer Options (app_service_days_warning_threshold).
   El JS toggle la clase; sin clase, el pill mantiene el look ghost neutral. */
.as-theme-clasico .app-toolbar__btn-action--readonly.app-toolbar__btn-action--warning {
    background: color-mix(in srgb, var(--system-orange) 14%, transparent);
    border-color: color-mix(in srgb, var(--system-orange) 32%, transparent);
    color: var(--system-orange);
}
.as-theme-clasico .app-toolbar__btn-action--readonly.app-toolbar__btn-action--warning:hover {
    background: color-mix(in srgb, var(--system-orange) 22%, transparent);
}
.as-theme-clasico .app-toolbar__btn-action--readonly.app-toolbar__btn-action--warning i { color: var(--system-orange); }

/* ── Labels Vista para campos editables (estado/técnico/política).
   El span `[data-toolbar-field-display]` ya emite el VALOR; con un
   ::before le anteponemos el label descriptivo. Sin tocar HTML, sin
   romper el alineamiento del icono — el ::before se inyecta DENTRO
   del span (entre el icono y el valor visible). El gap del flex
   button sigue intacto. */
.as-theme-clasico [data-toolbar-field-display]::before {
    color: var(--label-tertiary);
    font-weight: 600;
    margin-right: 4px;
}
.as-theme-clasico [data-toolbar-field-display="estado"]::before   { content: "Estado:"; }
.as-theme-clasico [data-toolbar-field-display="tecnico"]::before  { content: "Téc:"; }
.as-theme-clasico [data-toolbar-field-display="politica"]::before { content: "Política:"; }
/* Ancho FIJO + elipsis del valor de los selectores editables
   (estado/técnico/política). Fijo (no max-width) a propósito: el toolbar
   no cambia de ancho al pasar de estado → las flechitas no se mueven al
   clickear. Dimensionado para nombres de técnico/política habituales;
   nombres muy largos truncan y quedan en el title nativo + dropdown.
   `ch` (no px) para que escale con el font-scale del tema. min-width:0 +
   inline-block para que la elipsis enganche dentro del botón flex. */
.as-theme-clasico [data-toolbar-field-display] {
    display: inline-block;
    width: 18ch;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Estado: override del ancho genérico al tamaño exacto del label_corto más
   largo que NO debe truncar ("Diagnóstico" / "Sin Reparar" ≈ 116px medidos
   en el tema; 120 = +4px de respiro). Solo "Pedido Repuestos" (≈150px) y
   nombres custom largos truncan. px (no ch) porque se midió en pantalla
   con la fuente real y bold del ::before; ch sobreestimaba. text-align:left
   pega el texto al ícono dentro del span de ancho fijo (el <button> padre
   tiene text-align:center por UA default y centraría el contenido). */
.as-theme-clasico [data-toolbar-field-display="estado"] {
    width: 120px;
    text-align: left;
}
/* Técnico y política: se adaptan al valor (sin mínimo). El 18ch funciona ahora
   como cap máximo: nombres más cortos achican el botón, más largos truncan. */
.as-theme-clasico [data-toolbar-field-display="politica"],
.as-theme-clasico [data-toolbar-field-display="tecnico"] {
    width: auto;
    max-width: 18ch;
}
/* El ícono de estado cambia por estado y los glifos de Font Awesome NO
   tienen ancho fijo → al cambiar de estado el botón hacía resize de 1-2px
   y movía las flechitas un poquito. Caja fija centra cada glifo en el
   mismo ancho → cero jitter. Técnico/política no necesitan esto (ícono
   constante: fa-user-cog / fa-tag). */
.as-theme-clasico [data-toolbar-field-icon="estado"] {
    display: inline-block;
    width: 1.1em;
    text-align: center;
}
.as-theme-clasico .app-toolbar__dropdown {
    position: relative;
}
.as-theme-clasico .app-toolbar__dropdown-chev {
    font-size: 9px;
    opacity: 0.6;
}
.as-theme-clasico .app-toolbar__dropdown-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 180px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-2);
    padding: 4px 0;
    z-index: 50;
    display: none;
}
.as-theme-clasico .app-toolbar__dropdown-menu.show {
    display: block;
}
.as-theme-clasico .app-toolbar__dropdown-heading {
    padding: 4px 10px 2px;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--label-tertiary);
}
.as-theme-clasico .app-toolbar__dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 10px;
    border: 0;
    background: transparent;
    color: var(--label-primary);
    font-size: var(--fs-body);
    text-align: left;
}
.as-theme-clasico .app-toolbar__dropdown-item:hover {
    background: var(--accent-bg-soft);
    color: var(--accent);
}
/* Item deshabilitado: visible pero sin interacción (estados no permitidos
   por flow/transición — mismo patrón que modern). */
.as-theme-clasico .app-toolbar__dropdown-item[disabled],
.as-theme-clasico .app-toolbar__dropdown-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.as-theme-clasico .app-toolbar__dropdown-item[disabled]:hover,
.as-theme-clasico .app-toolbar__dropdown-item:disabled:hover {
    background: transparent;
    color: var(--label-primary);
}

/* Inspector slot de controles (modo controls=inspector). */
.as-theme-clasico .app-inspector__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-primary);
}
.as-theme-clasico .app-inspector__controls .app-toolbar__btn-action,
.as-theme-clasico .app-inspector__controls .app-toolbar__dropdown > .app-toolbar__btn-action {
    width: 100%;
    justify-content: flex-start;
}
.as-theme-clasico .app-inspector__controls .app-toolbar__dropdown-chev {
    margin-left: auto;
}

/* ============================================================
   8. DTABS (folder tabs estilo Windows)
   ============================================================ */
.as-theme-clasico .app-dtabs {
    grid-area: dtabs;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    /* Altura mínima = 6px pad-top + 28px (.app-dtab). El grid fila usa
       `auto` (§3) → la franja crece cuando `.app-dtabs__list` wrappea
       a varias filas (multi-row). Mantiene la altura mínima cuando NO
       hay órdenes (sólo .app-dtabs__empty). */
    min-height: 34px;
    padding: 6px var(--space-3) 0;
    background: var(--bg-secondary);
    /* Línea Vista al fondo: corre por toda la franja gris. Las tabs
       inactivas tienen su border-bottom del mismo color (`--border`) +
       `margin-bottom:-1px` → se "asientan" exactamente sobre la línea
       y la confunden con su propio borde inferior (no la rompen). La
       activa tiene `border-bottom-color: --dtab-active-bg` (= tope del
       toolbar de abajo) → "rompe" la línea con un parche del color del
       toolbar y su border-top/left/right la "abraza". Mismo patrón que
       modern §8b v3 (theme.css:1417). */
    border-bottom: 1px solid var(--border);
}
.as-theme-clasico .app-dtabs__empty {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--space-2);
    color: var(--label-tertiary);
    font-size: var(--fs-callout);
    font-style: italic;
}
.as-theme-clasico .app-dtabs__list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-end;
    gap: 2px;
    row-gap: 4px;
}
/* Filler con flex-grow gigante: absorbe el sobrante de la ÚLTIMA fila
   para que las pestañas reales ahí conserven su ancho natural. Las
   filas previas (donde no aparece el filler) se reparten equitativamente
   y llenan el ancho sin huecos. Mismo patrón que modern §8. */
.as-theme-clasico .app-dtabs__list::after {
    content: "";
    flex: 9999 0 auto;
    height: 0;
    min-width: 0;
}
.as-theme-clasico .app-dtabs__close-all {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--label-tertiary);
    font-family: inherit;
    font-size: var(--fs-callout);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-dtabs__close-all:hover,
.as-theme-clasico .app-dtabs__close-all:focus-visible {
    background: var(--system-red-soft);
    border-color: var(--system-red);
    color: var(--system-red);
    outline: none;
}
.as-theme-clasico .app-dtabs__close-all > i { font-size: 10px; }
.as-theme-clasico .app-dtabs__close-all-label { font-size: var(--fs-callout); }
.as-theme-clasico .app-dtab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    background: var(--folder-tab-bg);
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    white-space: nowrap;
    cursor: pointer;
    /* flex 1 0 auto: la pestaña parte de su ancho natural (no shrink) y crece
       sólo para repartirse el sobrante de una fila WRAP completa. En la última
       fila el filler `::after` (grow 9999 vs 1) absorbe casi todo el remanente
       → tabs ahí conservan su ancho natural. Sin min-width: un "#42" ocupa lo
       que tiene que ocupar; sin max-width: títulos largos pueden alargar la
       fila completa y forzar el wrap (que es lo deseado). */
    flex: 1 0 auto;
    /* `margin-bottom:-1px` en TODAS las tabs: asienta su border-bottom
       sobre la línea de `.app-dtabs`. Inactiva (border-bottom = --border)
       coincide con la línea (invisible). Activa (border-bottom-color =
       --dtab-active-bg) la rompe en su tramo. */
    margin-bottom: -1px;
    /* El ellipsis vive en `.app-dtab__title` (NO en `.app-dtab`): si la tab
       tuviera `overflow:hidden`, clipea el `margin-bottom:-1px` + el
       `border-bottom-color: --dtab-active-bg` de la activa, y se pierde la
       línea Vista que la "fusiona" con el toolbar de abajo. */
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-dtab__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-theme-clasico .app-dtab:hover {
    background: var(--folder-tab-bg-hover);
    color: var(--label-primary);
}
.as-theme-clasico .app-dtab.is-active,
.as-theme-clasico .app-dtab--active {
    background: var(--dtab-active-bg);
    /* Border-bottom del color del toolbar (tope = --dtab-active-bg) →
       "rompe" la línea continua de `.app-dtabs` en su tramo, dando la
       sensación de que la franja gris envuelve la pestaña. El
       `margin-bottom:-1px` se hereda de `.app-dtab`. */
    border-bottom-color: var(--dtab-active-bg);
    color: var(--label-primary);
    font-weight: 600;
    z-index: 1;
}

/* ============================================================
   9. SUBTABS (variante horizontal — chips planos con underline)
   Diferenciación jerárquica con .app-dtabs (folder tabs):
   dtabs = nivel documento (orden abierta), subtabs = secciones
   internas. Las subtabs son chips planos sobre el fondo del
   topbar, con underline accent en la activa. NO compiten con
   las dtabs porque comparten paleta pero no morfología.
   Sin iconos: el label habla por sí solo (los `<i>` se quitaron
   declarativamente del template en layout.php).
   ============================================================ */
.as-theme-clasico .app-subtabs {
    grid-area: subtabs;
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.as-theme-clasico .app-subtabs::-webkit-scrollbar { height: 6px; }
.as-theme-clasico .app-container:not([data-active-tab="ordenes"]) .app-subtabs {
    display: none;
}
.as-theme-clasico .app-subtab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--space-3);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.as-theme-clasico .app-subtab:hover {
    color: var(--label-primary);
    background: var(--fill-1);
}
.as-theme-clasico .app-subtab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
    margin-bottom: -1px;
}
.as-theme-clasico .app-subtab__badge {
    font-size: var(--fs-micro);
    font-weight: 600;
    background: var(--fill-2);
    color: var(--label-secondary);
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
}
.as-theme-clasico .app-subtab--active .app-subtab__badge {
    background: var(--accent-bg-soft);
    color: var(--accent);
}
/* Sin orden abierta (data-has-order="no"): la barra de subtabs queda
   deshabilitada — no hay contenido que mostrar hasta abrir/crear una
   orden. Dim + sin interacción; además neutraliza el chip --active
   estático que el markup PHP marca por defecto en el primer subtab. */
.as-theme-clasico .app-container[data-has-order="no"] .app-subtabs {
    opacity: 0.45;
    pointer-events: none;
}
.as-theme-clasico .app-container[data-has-order="no"] .app-subtab,
.as-theme-clasico .app-container[data-has-order="no"] .app-subtab--active {
    color: var(--label-tertiary);
    border-bottom-color: transparent;
    font-weight: 400;
    cursor: default;
}
/* Misma lógica para la app-toolbar de orden (Recepción/Comprobante,
   estado, Téc/Pol, Edit/Save/Cancel): sin orden abierta no hay nada
   sobre qué operar → dim + sin interacción. Selector bare `.app-toolbar`
   (= header de orden, §7), NO `.app-toolbar__*` del topbar (search/user
   menu deben seguir activos sin orden). */
.as-theme-clasico .app-container[data-has-order="no"] .app-toolbar {
    opacity: 0.45;
    pointer-events: none;
}

/* ============================================================
   9b. SUBTAB COMPUESTO — "Datos del Cliente" (cliente + equipo)
   El override de window._saSubTabsDef en theme.js declara el
   subtab `cliente` con sources ['cliente','producto']. tabs.js
   genera UN solo .app-subtab-content[data-subtab="cliente"] con
   las dos páginas (.hig-page) adentro. Acá las disponemos en
   grid 2-col. Cuando el subtab no está activo, el style inline
   `display: none` del renderer gana sobre este grid (correcto).
   ============================================================ */
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] {
    display: grid;
    /* minmax(0, 1fr) y NO 1fr: 1fr = minmax(auto,1fr) y el `auto` usa el
       min-content de la columna. El `.hig-order__title` del Historial es
       texto largo en una línea (white-space:nowrap) → su min-content infla
       la columna y desplaza todo el layout. minmax(0,…) deja que la columna
       se achique y que el text-overflow:ellipsis del título funcione. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}
/* Defensa anti grid-blowout (par con minmax(0,1fr) de la track): el grid
   item con min-width:auto desbordaría igual si su contenido tiene
   min-content grande (el título del Historial). min-width:0 deja que la
   .hig-page se achique a su track y el ellipsis del título aplique. */
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] > .hig-page {
    min-width: 0;
}
/* Ambas .hig-page tienen su última card con `flex: 1 1 auto` (sin min-height
   forzado) — flex sólo crece si hay espacio sobrante, así que la columna
   naturalmente más alta determina el alto del grid row y la otra estira
   su última card para alinear. Sin garantía: Cliente alto → "Otras notas"
   se estira. Con garantía: Equipo alto → "Historial de Órdenes" se estira. */
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] > .hig-page > :last-child {
    flex: 1 1 auto;
    min-height: 0;
}
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] > .hig-page > :last-child > .hig-ps-textarea,
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] > .hig-page > :last-child > textarea,
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] > .hig-page > :last-child > .hig-group {
    flex: 1 1 auto;
    min-height: 70px;
}
/* Dentro del split-panel, cada `.hig-page` ya está confinada a una columna
   del grid 2-col exterior. Colapsamos el `--side-by-side` interno a 1 col
   y reordenamos por bloques con flex+order: primero el col-title-left con
   todos sus rows, después el col-title-right con todos sus rows. Esto evita
   que los dos titles ("Contacto" / "Ubicación") salgan pegados al inicio
   antes de cualquier row. */
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side {
    display: flex;
    flex-direction: column;
    column-gap: 0;
}
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-group__col-title--left { order: 1; }
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-row--col-left { order: 2; }
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-group__col-title--right { order: 3; }
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-row--col-right { order: 4; }
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-group__subtitle { order: 1; }
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-group__subtitle--divider { order: 5; }
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-group__subtitle--divider ~ .hig-row { order: 6; }
/* Equipo (input data-field="producto") va entre Modelo y Serie en clásico: order 2 alinea
   con los col-left y el orden DOM (Modelo → Equipo → Serie) determina el resultado visual. */
.as-theme-clasico .app-subtab-content[data-subtab="cliente"] .hig-group--side-by-side > .hig-row:has(> [data-field="producto"]) { order: 2; }

/* ============================================================
   10. CONTENT
   ============================================================ */
.as-theme-clasico .app-content {
    grid-area: content;
    background: var(--bg-primary);
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}
.as-theme-clasico .tab-content-container {
    height: 100%;
    width: 100%;
}
.as-theme-clasico .tab-content { display: none; }
.as-theme-clasico .tab-content.active { display: block; }

/* Empty state del área de contenido (sin ninguna orden abierta).
   Markup en `tabs.js::renderTabsBar`: ícono + título + hint. Hero
   centrado Vista: el ícono va en un badge circular tintado de accent
   para darle peso visual; jerarquía tipográfica con tokens. */
.as-theme-clasico .app-content__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 260px;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    user-select: none;
}
.as-theme-clasico .app-content__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-bg-soft);
    color: var(--accent);
    font-size: 30px;
    margin-bottom: var(--space-1);
}
.as-theme-clasico .app-content__empty-title {
    font-size: var(--fs-title-1);
    font-weight: 600;
    color: var(--label-primary);
}
.as-theme-clasico .app-content__empty-hint {
    font-size: var(--fs-body);
    color: var(--label-tertiary);
    max-width: 320px;
    line-height: 1.5;
}

/* ============================================================
   11. INSPECTOR
   ============================================================ */
.as-theme-clasico .app-inspector {
    grid-area: inspector;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.as-theme-clasico .app-inspector__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3);
}
.as-theme-clasico .app-inspector__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 100%;
    color: var(--label-tertiary);
    font-size: var(--fs-callout);
    text-align: center;
}
.as-theme-clasico .app-inspector__placeholder i {
    font-size: 24px;
    color: var(--label-quaternary);
}

/* ============================================================
   12. HIG PRIMITIVES (módulos)
   Consumidos por cliente, equipo, conceptos, cobros, estados,
   tracking, sucesos, fotos, etc. Vocabulario `.hig-*` del design
   system del plugin (no se redefine aquí — sólo se reestiliza
   con paleta Vista).
   ============================================================ */

/* — Page wrapper — */
.as-theme-clasico .hig-page {
    width: 100%;
    padding: var(--space-2) 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.as-theme-clasico .hig-page__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.as-theme-clasico .hig-page__actions-sep {
    width: 1px;
    height: 18px;
    background: var(--border-soft);
    margin: 0 var(--space-1);
    flex-shrink: 0;
}
.as-theme-clasico .hig-page__empty {
    padding: var(--space-5);
    color: var(--label-tertiary);
    font-size: var(--fs-body);
}

/* — Client header (avatar + título + subtítulo) — */
.as-theme-clasico .hig-client-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}
.as-theme-clasico .hig-client-header__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--accent-bg-soft);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--accent);
}
.as-theme-clasico .hig-client-header__avatar--product i { font-size: 18px; }
.as-theme-clasico .hig-client-header__info {
    flex: 1;
    min-width: 0;
}
.as-theme-clasico .hig-client-header__name {
    font-size: var(--fs-title-1);
    font-weight: 600;
    color: var(--label-primary);
    line-height: 1.2;
}
.as-theme-clasico .hig-client-header__sub {
    font-size: var(--fs-body);
    color: var(--label-secondary);
    margin-top: 2px;
}

/* — Section + Group (paneles tipo Win Vista) —
   Estética Vista: el `.hig-section__title` actúa como header del panel,
   pegado visualmente a la `.hig-group` siguiente vía `margin-bottom: -1px`
   y border-radius coordinado. Cuando un `.hig-section__title` está suelto
   (sin group adjunto, ej: precede a un `.hig-ps-textarea`), el mismo
   estilo aplica y la textarea hereda el bottom radius via su propia clase. */
.as-theme-clasico .hig-section {
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
}
.as-theme-clasico .hig-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px var(--space-4);
    background: var(--card-header-bg);
    border: 1px solid var(--border);
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
    font-size: var(--fs-headline);
    font-weight: 600;
    color: var(--label-primary);
    text-transform: none;
    letter-spacing: 0;
}
.as-theme-clasico .hig-section__hint {
    font-size: var(--fs-callout);
    color: var(--label-secondary);
    padding: 0 var(--space-1) var(--space-2);
    line-height: 1.5;
}
.as-theme-clasico .hig-group {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--space-3) 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
/* Cuando hay title arriba, la group de abajo se conecta visualmente
   (sin double border, esquinas superiores rectas). */
.as-theme-clasico .hig-section__title + .hig-group {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Lo mismo cuando el title precede a una textarea suelta (sin group). */
.as-theme-clasico .hig-section__title + .hig-ps-textarea,
.as-theme-clasico .hig-section__title + textarea {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Card con FRAME INTERIOR (estilo viejo ciberservice): la `.hig-section` que
   contiene un `.hig-ps-textarea` directo (Otras notas, Trabajo realizado) se
   convierte en panel outer con bg + border + radius; el title queda dentro
   sin border externo (solo divider abajo); la textarea recibe margin para
   que su propio border se lea como "frame interior" recuadrado. */
.as-theme-clasico .hig-section:has(> .hig-ps-textarea) {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.as-theme-clasico .hig-section:has(> .hig-ps-textarea) > .hig-section__title {
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
.as-theme-clasico .hig-section:has(> .hig-ps-textarea) > .hig-ps-textarea {
    margin: var(--space-3);
    width: calc(100% - var(--space-3) * 2);
    border: 1px solid var(--border-faint);
    border-radius: var(--r-sm);
}
.as-theme-clasico .hig-group--stack {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.as-theme-clasico .hig-group--flush { padding: 0; }
.as-theme-clasico .hig-group--gap-sm { margin-top: var(--space-1); }
.as-theme-clasico .hig-group__heading {
    font-size: var(--fs-headline);
    font-weight: 600;
    color: var(--label-primary);
}
.as-theme-clasico .hig-group__empty {
    padding: var(--space-3) var(--space-3);
    color: var(--label-tertiary);
    font-size: var(--fs-body);
}
.as-theme-clasico .hig-group__caption {
    margin: 0;
    padding: 0 var(--space-5) var(--space-2);
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
    line-height: 1.4;
}
.as-theme-clasico .hig-group__caption-status {
    font-weight: 600;
    color: var(--accent);
}
.as-theme-clasico .hig-divider {
    height: 1px;
    background: var(--border-soft);
}

/* — Row (icon · label · value · action). Densidad Vista: compacto, sin
   hover global agresivo (los inputs editables ya tienen feedback propio
   vía background y focus ring). — */
.as-theme-clasico .hig-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 7px var(--space-5);
    gap: var(--space-3);
}
.as-theme-clasico .hig-row--toggle { justify-content: space-between; }
.as-theme-clasico .hig-row--toggle input[type="radio"],
.as-theme-clasico .hig-row--toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
}
/* Icono Vista: símbolo monocromo simple sin chip. Los modifiers
   --accent / --success / --green / --orange solo cambian color. */
.as-theme-clasico .hig-row__icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--label-secondary);
}
.as-theme-clasico .hig-row__icon--accent  { color: var(--accent); }
.as-theme-clasico .hig-row__icon--success { color: var(--system-green); }
.as-theme-clasico .hig-row__icon--green { color: var(--system-green); }
.as-theme-clasico .hig-row__icon--orange { color: var(--system-orange); }
.as-theme-clasico .hig-row__label {
    font-size: var(--fs-body);
    color: var(--label-primary);
    min-width: 110px;
    flex-shrink: 0;
}
.as-theme-clasico .hig-row__value {
    flex: 1;
    font-size: var(--fs-body);
    color: var(--label-primary);
    text-align: right;
}
.as-theme-clasico .hig-row__value--strong { font-weight: 600; color: var(--label-primary); }
.as-theme-clasico .hig-row__value--green { color: var(--system-green); }
.as-theme-clasico .hig-row__value--orange { color: var(--system-orange); }

/* — Inputs / selects / textarea dentro de hig-row —
   Estilo Vista clásico: el input es SIEMPRE una caja blanca con borde,
   tanto en view como en edit. El readonly se diferencia por cursor y
   ausencia de focus ring, no por desaparecer la caja. */
.as-theme-clasico input.hig-row__value,
.as-theme-clasico input.hig-row__input,
.as-theme-clasico textarea.hig-row__textarea-value {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--label-primary);
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    margin: 0;
    min-height: 26px;
    outline: none;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico input.hig-row__value[readonly],
.as-theme-clasico input.hig-row__input[readonly],
.as-theme-clasico textarea.hig-row__textarea-value[readonly] {
    cursor: default;
    user-select: text;
}
.as-theme-clasico input.hig-row__value:not([readonly]):focus,
.as-theme-clasico input.hig-row__input:not([readonly]):focus,
.as-theme-clasico textarea.hig-row__textarea-value:not([readonly]):focus {
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02),
                0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico input.hig-row__value::placeholder,
.as-theme-clasico input.hig-row__input::placeholder,
.as-theme-clasico textarea.hig-row__textarea-value::placeholder {
    color: var(--label-tertiary);
}
.as-theme-clasico input.hig-row__value[type="date"]::-webkit-datetime-edit {
    flex: 1;
    text-align: left;
}
.as-theme-clasico select.hig-row__input {
    flex: 0 1 auto;
    min-width: 110px;
    padding: 3px 24px 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card-bg);
    color: var(--label-primary);
    font-size: var(--fs-body);
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23555' d='M2.5 4L5 6.5 7.5 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    cursor: pointer;
    margin-left: auto;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
}
.as-theme-clasico select.hig-row__input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04),
                0 0 0 2px var(--accent-bg-soft);
}

/* — Botones de acción (28x28 icon) — */
.as-theme-clasico .hig-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    background: var(--btn-light-bg);
    border-radius: var(--r-sm);
    color: var(--label-secondary);
    font-size: 11px;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-action-btn:hover {
    background: var(--btn-light-bg-hover);
    color: var(--label-primary);
}
.as-theme-clasico .hig-action-btn:active {
    background: var(--btn-light-bg-pressed);
}
.as-theme-clasico .hig-action-btn[disabled] {
    opacity: 0.45;
    pointer-events: none;
}
.as-theme-clasico .hig-action-btn--with-label {
    width: auto;
    padding: 0 10px;
    gap: 5px;
    font-size: var(--fs-callout);
    color: var(--label-primary);
}

/* — Botón Edit/Save/Cancel (pills compactos) — */
.as-theme-clasico .hig-btn-edit {
    height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--label-primary);
    background: var(--btn-light-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-btn-edit i { font-size: 10px; }
.as-theme-clasico .hig-btn-edit:hover {
    background: var(--btn-light-bg-hover);
}
.as-theme-clasico .hig-btn-edit:active {
    background: var(--btn-light-bg-pressed);
}
.as-theme-clasico .hig-btn-edit--save {
    color: var(--label-on-accent);
    background: linear-gradient(to bottom, var(--accent), var(--accent-pressed));
    border-color: var(--accent-pressed);
}
.as-theme-clasico .hig-btn-edit--save:hover {
    background: linear-gradient(to bottom, var(--accent-hover), var(--accent-pressed));
}
.as-theme-clasico .hig-btn-edit--cancel {
    color: var(--label-secondary);
}
.as-theme-clasico .hig-btn-edit--small {
    height: 22px;
    font-size: var(--fs-footnote);
    padding: 0 8px;
}
.as-theme-clasico .hig-btn-edit--small i { font-size: 9px; }
.as-theme-clasico .hig-btn-edit--block { width: 100%; justify-content: center; }

/* — Pago / CTA helpers — */
.as-theme-clasico .hig-pago-cell { flex: 1; min-width: 0; }
.as-theme-clasico .hig-pago-cell__amount { font-size: var(--fs-body); font-weight: 600; }
.as-theme-clasico .hig-pago-cell__meta { font-size: var(--fs-callout); color: var(--label-secondary); }
.as-theme-clasico .hig-cta-wrap { padding: 0 var(--space-3) var(--space-2); }

/* — Group con dos columnas (subtab Equipo: Detalles + Garantía) —
   Versión Vista simple: grid 2-col plano (sin subgrid). Cada `.hig-row`
   ocupa una de las dos columnas según su modifier. Los subtítulos se
   spancean a las dos columnas. */
.as-theme-clasico .hig-group--side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    padding: var(--space-3) var(--space-3);
}
.as-theme-clasico .hig-group--side-by-side > .hig-group__subtitle {
    grid-column: 1 / -1;
    font-size: var(--fs-footnote);
    font-weight: 600;
    color: var(--label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-2) var(--space-2) var(--space-1);
}
.as-theme-clasico .hig-group--side-by-side > .hig-group__subtitle--divider {
    border-top: 1px solid var(--border-soft);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}
.as-theme-clasico .hig-group--side-by-side > .hig-row--col-left {
    grid-column: 1;
}
.as-theme-clasico .hig-group--side-by-side > .hig-row--col-right {
    grid-column: 2;
}
.as-theme-clasico .hig-group--side-by-side > [hidden] { display: none; }

/* Header por columna (subtab Cliente: "Contacto" / "Ubicación"). Look Vista:
   uppercase + footnote, padding consistente con los rows. La última fila
   visible de cada columna pierde su border-bottom para no chocar con el
   borde del `.hig-group`. */
.as-theme-clasico .hig-group--side-by-side > .hig-group__col-title {
    font-size: var(--fs-footnote);
    font-weight: 600;
    color: var(--label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-2) var(--space-2) var(--space-1);
}
.as-theme-clasico .hig-group--side-by-side > .hig-group__col-title--left {
    grid-column: 1;
    grid-row: 1;
}
.as-theme-clasico .hig-group--side-by-side > .hig-group__col-title--right {
    grid-column: 2;
    grid-row: 1;
}
.as-theme-clasico .hig-group--side-by-side > .hig-row--col-left:nth-last-child(1 of .hig-row--col-left:not([hidden])),
.as-theme-clasico .hig-group--side-by-side > .hig-row--col-right:nth-last-child(1 of .hig-row--col-right:not([hidden])) {
    border-bottom: none;
}

/* — Botón de acción dentro de un row (ej. "buscar serie") — */
.as-theme-clasico .hig-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    background: var(--btn-light-bg);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-size: 10px;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-row__action:hover {
    background: var(--btn-light-bg-hover);
}

/* — Toggle (switch iOS-style adaptado a Vista) — */
.as-theme-clasico .hig-toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    margin-left: auto;
    flex-shrink: 0;
}
.as-theme-clasico .hig-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.as-theme-clasico .hig-toggle__track {
    width: 34px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--fill-2);
    position: relative;
    transition: background var(--dur-mid) var(--ease),
                border-color var(--dur-mid) var(--ease);
}
.as-theme-clasico .hig-toggle__thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform var(--dur-mid) var(--ease);
}
.as-theme-clasico .hig-toggle input:checked ~ .hig-toggle__track {
    background: var(--accent);
    border-color: var(--accent-pressed);
}
.as-theme-clasico .hig-toggle input:checked ~ .hig-toggle__track .hig-toggle__thumb {
    transform: translateX(16px);
}
.as-theme-clasico .hig-toggle input:disabled ~ .hig-toggle__track {
    opacity: 0.55;
    cursor: not-allowed;
}

/* — Switch (variante de toggle con markup más liviano: `.hig-switch >
   input + .hig-switch__slider`, sin thumb anidado — el thumb es un
   `::before` que se desplaza vía translateX). Usado por tab-admin
   (Tracking, Permisos, Dispositivos). Visualmente equivalente al
   `.hig-toggle` en versión Vista; convive porque cada template eligió
   su markup y no queremos refactorizarlo. — */
.as-theme-clasico .hig-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}
.as-theme-clasico .hig-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.as-theme-clasico .hig-switch__slider {
    position: absolute;
    inset: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--fill-2);
    transition: background var(--dur-mid) var(--ease),
                border-color var(--dur-mid) var(--ease);
}
.as-theme-clasico .hig-switch__slider::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform var(--dur-mid) var(--ease);
}
.as-theme-clasico .hig-switch input:checked + .hig-switch__slider {
    background: var(--accent);
    border-color: var(--accent-pressed);
}
.as-theme-clasico .hig-switch input:checked + .hig-switch__slider::before {
    transform: translateX(16px);
}
.as-theme-clasico .hig-switch input:disabled + .hig-switch__slider {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Variante compacta para tablas (Permisos, Dispositivos). */
.as-theme-clasico .hig-switch--sm {
    width: 28px;
    height: 16px;
    vertical-align: middle;
}
.as-theme-clasico .hig-switch--sm .hig-switch__slider {
    border-radius: 8px;
}
.as-theme-clasico .hig-switch--sm .hig-switch__slider::before {
    width: 12px;
    height: 12px;
}
.as-theme-clasico .hig-switch--sm input:checked + .hig-switch__slider::before {
    transform: translateX(12px);
}

/* — Textarea estilo Vista (subtab Equipo: Falla / Accesorios / Notas) — */
.as-theme-clasico .hig-ps-textarea {
    width: 100%;
    min-height: 84px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--label-primary);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
    outline: none;
    resize: vertical;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ps-textarea:focus {
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04),
                0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .hig-ps-textarea:disabled {
    cursor: default;
    user-select: text;
}

/* TABS internos (Falla / Accesorios) — folder tabs Vista.
   Tabs con ancho natural (auto, no 50% c/u); el panel debajo ocupa todo
   el ancho del card. Un ::after fillea el track sobrante de la fila de
   tabs para que la línea base llegue al borde derecho. */
.as-theme-clasico .hig-textareas-cols {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "tab-a tab-b filler"
        "panel panel panel";
    margin-bottom: var(--space-3);
}
.as-theme-clasico .hig-textareas-cols::after {
    content: '';
    grid-area: filler;
    border-bottom: 1px solid var(--border);
    align-self: end;
}
.as-theme-clasico .hig-textareas-cols > .hig-section { display: contents; }

.as-theme-clasico .hig-textareas-cols > .hig-section:nth-of-type(1) > .hig-section__title { grid-area: tab-a; }
.as-theme-clasico .hig-textareas-cols > .hig-section:nth-of-type(2) > .hig-section__title { grid-area: tab-b; }
.as-theme-clasico .hig-textareas-cols > .hig-section > .hig-section__title {
    cursor: pointer;
    user-select: none;
    margin: 0;
    padding: 7px var(--space-4);
    background: var(--card-header-bg);
    border: 1px solid var(--border);
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
    color: var(--label-secondary);
    font-size: var(--fs-body);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-textareas-cols > .hig-section > .hig-section__title:hover {
    background: var(--card-header-bg-hover);
    color: var(--label-primary);
}

.as-theme-clasico .hig-textareas-cols > .hig-section > .hig-ps-textarea,
.as-theme-clasico .hig-textareas-cols > .hig-section > textarea {
    grid-area: panel;
    width: 100%;
    min-height: 130px;
    margin: 0;
    padding: 18px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: none;
    resize: vertical;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--label-primary);
    /* Frame interior real (no shadow): outline con offset negativo dibuja
       un border DENTRO del padding de la textarea. Es border real. */
    outline: 1px solid var(--separator);
    outline-offset: -10px;
    display: none;
}
.as-theme-clasico .hig-textareas-cols > .hig-section.is-tab-active > .hig-section__title {
    background: var(--card-bg);
    border-bottom-color: var(--card-bg);
    color: var(--label-primary);
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.as-theme-clasico .hig-textareas-cols > .hig-section.is-tab-active > .hig-ps-textarea,
.as-theme-clasico .hig-textareas-cols > .hig-section.is-tab-active > textarea {
    display: block;
}
/* Default (sin click previo): primer section actúa como activo. */
.as-theme-clasico .hig-textareas-cols:not(:has(> .hig-section.is-tab-active)) > .hig-section:first-of-type > .hig-section__title {
    background: var(--card-bg);
    border-bottom-color: var(--card-bg);
    color: var(--label-primary);
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.as-theme-clasico .hig-textareas-cols:not(:has(> .hig-section.is-tab-active)) > .hig-section:first-of-type > .hig-ps-textarea,
.as-theme-clasico .hig-textareas-cols:not(:has(> .hig-section.is-tab-active)) > .hig-section:first-of-type > textarea {
    display: block;
}
.as-theme-clasico .hig-textareas-cols > .hig-section > .hig-ps-textarea:focus,
.as-theme-clasico .hig-textareas-cols > .hig-section > textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}

/* ============================================================
   13. PERSONALIZE (.pz-*) — adaptado a paleta Vista
   Markup en `modules/personalize/backend/tab-personalize.php`.
   Bordes 1px y radius pequeño (Vista), focus ring con accent.
   ============================================================ */

/* — Secciones — */
.as-theme-clasico .pz-section-content,
.as-theme-clasico .adm-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.as-theme-clasico .pz-section-content .hig-group,
.as-theme-clasico .adm-section-content .hig-group {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* — Grid de temas — */
.as-theme-clasico .pz-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2);
}
.as-theme-clasico .pz-theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
}
.as-theme-clasico .pz-theme-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.as-theme-clasico .pz-theme-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-primary);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-theme-option input:checked + .pz-theme-card {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .pz-theme-preview {
    height: 80px;
    background: var(--fill-1);
    display: flex;
    padding: 8px;
    gap: 5px;
}
.as-theme-clasico .pz-theme-preview--sidebar .pz-tp-sidebar {
    width: 28%;
    background: var(--bg-secondary);
    border-radius: 2px;
}
.as-theme-clasico .pz-theme-preview--sidebar .pz-tp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.as-theme-clasico .pz-theme-preview--sidebar .pz-tp-bar {
    height: 9px;
    background: var(--bg-secondary);
    border-radius: 2px;
}
.as-theme-clasico .pz-theme-preview--sidebar .pz-tp-body {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 2px;
}
.as-theme-clasico .pz-theme-preview--default { flex-direction: column; }
.as-theme-clasico .pz-theme-preview--default .pz-tp-bar {
    height: 9px;
    background: var(--bg-secondary);
    border-radius: 2px;
}
.as-theme-clasico .pz-theme-preview--default .pz-tp-tabs {
    display: flex;
    gap: 2px;
    margin-top: 5px;
}
.as-theme-clasico .pz-theme-preview--default .pz-tp-tabs span {
    flex: 1;
    height: 5px;
    background: var(--bg-secondary);
    border-radius: 1px;
}
.as-theme-clasico .pz-theme-preview--default .pz-tp-body {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 2px;
    margin-top: 5px;
}
.as-theme-clasico .pz-theme-name {
    font-size: var(--fs-callout);
    font-weight: 600;
    padding: 6px 10px 2px;
    color: var(--label-primary);
}
.as-theme-clasico .pz-theme-desc {
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
    padding: 0 10px 8px;
}

/* — Control de tamaño de texto (preset 4-valor) — */
.as-theme-clasico .pz-fontsize-group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.as-theme-clasico .pz-fontsize-group[hidden] { display: none; }
.as-theme-clasico .pz-fontsize-group[disabled] { opacity: 0.55; cursor: not-allowed; }
.as-theme-clasico .pz-fontsize-legend {
    padding: 0 0 var(--space-2);
    font-size: var(--fs-footnote);
    font-weight: 600;
    color: var(--label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.as-theme-clasico .pz-fontsize-options {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.as-theme-clasico .pz-fontsize-option {
    position: relative;
    flex: 1 1 120px;
    min-width: 0;
}
.as-theme-clasico .pz-fontsize-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.as-theme-clasico .pz-fontsize-option__name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-primary);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-fontsize-option:hover .pz-fontsize-option__name {
    background: var(--fill-1);
}
.as-theme-clasico .pz-fontsize-option input:checked + .pz-fontsize-option__name {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
    color: var(--accent);
    font-weight: 600;
}
.as-theme-clasico .pz-fontsize-group[disabled] .pz-fontsize-option__name {
    cursor: not-allowed;
}
.as-theme-clasico .pz-fontsize-group[disabled] .pz-fontsize-option:hover .pz-fontsize-option__name {
    background: var(--bg-primary);
}

/* Primitivas pz-* reutilizadas por otros módulos.
   Mantener acá aunque la sub-tab original (Colores/Avanzado/Pantalla) se haya
   eliminado: las usan `tab-admin.php` (actions-bar, export-btn), Tracking
   (actions-bar) y `themes/modern/personalize-section-layout.php` (layout-*). */

/* Actions bar — admin-tab, tracking */
.as-theme-clasico .pz-actions-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-soft);
}
.as-theme-clasico .pz-btn-secondary {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--btn-light-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-btn-secondary:hover {
    background: var(--btn-light-bg-hover);
}
.as-theme-clasico .pz-btn-primary {
    padding: 5px 12px;
    border: 1px solid var(--accent-pressed);
    border-radius: var(--r-sm);
    background: linear-gradient(to bottom, var(--accent), var(--accent-pressed));
    color: var(--label-on-accent);
    font-size: var(--fs-callout);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-btn-primary:hover {
    background: linear-gradient(to bottom, var(--accent-hover), var(--accent-pressed));
}

/* Export buttons — admin-tab "Subir logo" */
.as-theme-clasico .pz-export-btns {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.as-theme-clasico .pz-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--btn-light-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-export-btn:hover {
    background: var(--btn-light-bg-hover);
}

/* Nota: las clases `.pz-layout-*` viven sólo en modern/theme.css — el partial
   `themes/modern/personalize-section-layout.php` corre únicamente cuando el
   scaffold activo es modern (early-return en cualquier otro caso). */

/* ============================================================
   14. ADM (Ajustes / Empresa / Técnicos / Políticas)
   Markup en `modules/admin-tab/backend/tab-admin.php`. Reglas
   adaptadas de modern a paleta Vista; sin `!important` (specificity
   alcanza con `.as-theme-clasico .adm-add-btn`).
   ============================================================ */

/* — Empresa: ancho de label uniforme para los 3 inputs (Nombre / Dir / Contacto).
   El min-width global de hig-row__label (110px) no entra para "Nombre de
   fantasía" y deja los inputs desalineados. */
.as-theme-clasico .adm-section-content[data-adm-section="empresa"] .hig-row__label {
    min-width: 160px;
}

/* — Empresa: zona de logo — */
.as-theme-clasico .adm-logo-zone {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}
.as-theme-clasico .adm-logo-preview {
    width: 72px;
    height: 72px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-secondary);
}
.as-theme-clasico .adm-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.as-theme-clasico .adm-logo-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.as-theme-clasico .adm-logo-dims {
    display: flex;
    gap: var(--space-2);
}
.as-theme-clasico .adm-logo-dims label {
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.as-theme-clasico .adm-dim-input {
    width: 54px;
    padding: 3px 5px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-footnote);
    text-align: center;
    background: var(--bg-primary);
    color: var(--label-primary);
    font-family: inherit;
}

/* — Add row (input + botón "+") — */
.as-theme-clasico .adm-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.as-theme-clasico .adm-add-row .hig-row__input {
    flex: 1;
    text-align: left;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-primary);
    font-family: inherit;
    font-size: var(--fs-callout);
    color: var(--label-primary);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .adm-add-row .hig-row__input:hover { border-color: var(--label-tertiary); }
.as-theme-clasico .adm-add-row .hig-row__input:focus { border-color: var(--accent); }
.as-theme-clasico .adm-add-btn {
    padding: 4px 8px;
    border-radius: var(--r-sm);
}

/* — Listas (técnicos / políticas) — */
.as-theme-clasico .adm-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.as-theme-clasico .adm-list-item {
    display: flex;
    align-items: center;
    padding: 5px var(--space-1);
    border-bottom: 1px solid var(--border-soft);
}
.as-theme-clasico .adm-list-item:last-child { border-bottom: none; }
.as-theme-clasico .adm-list-item:hover { background: var(--fill-1); }
.as-theme-clasico .adm-list-name {
    flex: 1;
    font-size: var(--fs-callout);
    color: var(--label-primary);
}
.as-theme-clasico .adm-list-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}
.as-theme-clasico .adm-list-item:hover .adm-list-actions { opacity: 1; }
.as-theme-clasico .adm-list-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--label-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.as-theme-clasico .adm-list-btn:hover {
    background: var(--fill-1);
    color: var(--accent);
}
.as-theme-clasico .adm-list-btn--danger:hover {
    color: var(--system-red);
    background: rgba(192, 57, 43, 0.08);
}

/* — Toggle "Mostrar más / Mostrar menos" —
   Clase `admin-list--collapsed` la pone JS al boot (technicians.js,
   policies.js) cuando la lista tiene >5 items. Oculta del 6° en
   adelante. Click en `.admin-list-toggle` togglea la clase. */
.as-theme-clasico .adm-list.admin-list--collapsed > .adm-list-item:nth-child(n+6) { display: none; }
.as-theme-clasico .admin-list-toggle {
    margin-top: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--btn-light-bg);
    color: var(--label-secondary);
    font-size: var(--fs-footnote);
    font-family: inherit;
    cursor: pointer;
    align-self: flex-start;
}
.as-theme-clasico .admin-list-toggle:hover {
    background: var(--btn-light-bg-hover);
    color: var(--label-primary);
}

/* ============================================================
   15. CONCEPTOS / hig-ps-*
   Tabla de items + header + totals para subtab `conceptos`.
   Markup en `modules/orders/frontend/assets/order-items-tab.js`.
   Sigue el mismo patrón Vista que `.hig-section + .hig-group`
   (header gradient pegado arriba + panel blanco abajo) para que
   el bloque "Conceptos" lea como una unidad consistente con
   "Trabajo realizado" y "Garantía de reparación" debajo.
   ============================================================ */
.as-theme-clasico .hig-ps-section {
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
}

/* Header: idéntico patrón a .hig-section__title (gradient + border + r-md
   arriba), con el botón "+ Agregar" alineado a la derecha. */
.as-theme-clasico .hig-ps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 7px var(--space-4);
    background: var(--card-header-bg);
    border: 1px solid var(--border);
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
}
.as-theme-clasico .hig-ps-header__title {
    font-size: var(--fs-headline);
    font-weight: 600;
    color: var(--label-primary);
}
.as-theme-clasico .hig-ps-header__add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--btn-light-bg);
    color: var(--label-primary);
    font-family: inherit;
    font-size: var(--fs-footnote);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ps-header__add:hover:not(:disabled) {
    background: var(--btn-light-bg-hover);
    border-color: var(--accent);
    color: var(--label-primary);
}
.as-theme-clasico .hig-ps-header__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.as-theme-clasico .hig-ps-header__add i { font-size: 10px; }

/* Body: panel blanco que se conecta al header arriba (border-top none). */
.as-theme-clasico .hig-ps-table-wrap {
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: none;
}
/* Si NO hay totals abajo, el wrap cierra el panel con bottom-radius. */
.as-theme-clasico .hig-ps-table-wrap:last-child {
    border-bottom-left-radius: var(--r-md);
    border-bottom-right-radius: var(--r-md);
}

.as-theme-clasico .hig-ps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-callout);
    color: var(--label-primary);
}
.as-theme-clasico .hig-ps-table thead th {
    text-align: left;
    padding: 6px var(--space-3);
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--card-bg-subtle);
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}
.as-theme-clasico .hig-ps-table tbody td {
    padding: 4px var(--space-3);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.as-theme-clasico .hig-ps-table tbody tr:last-child td { border-bottom: 0; }

/* Inputs/selects dentro del panel: --input-bg coincide con card-bg en light
   (delimita por border) y se hunde más oscuro en dark (destaca sobre card). */
.as-theme-clasico .hig-ps-input,
.as-theme-clasico .hig-ps-select {
    width: 100%;
    height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-primary);
    font-family: inherit;
    font-size: var(--fs-callout);
    line-height: 1.4;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ps-input:focus,
.as-theme-clasico .hig-ps-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
/* No-edit: los inputs/selects mantienen la "caja" pero con border sutil.
   IMPORTANTE Safari: `<select disabled>` renderea con un overlay nativo
   (patrón diagonal/wavy + bg gris) que IGNORA `background: transparent`
   y `appearance: none` heredados. Hace falta:
   - `background-color` SÓLIDO (no transparent) — sobreescribe el bg nativo.
   - `-webkit-text-fill-color` — sobreescribe el text-fade nativo.
   - `opacity: 1` — cancela el fade que Safari aplica en disabled.
   - `appearance: none` re-declarado en `:disabled` (Safari lo pierde). */
.as-theme-clasico .hig-ps-input:disabled,
.as-theme-clasico .hig-ps-select:disabled {
    background-color: var(--card-bg);
    background-image: none;
    color: var(--label-primary);
    -webkit-text-fill-color: var(--label-primary);
    opacity: 1;
    border-color: var(--border-faint);
    cursor: default;
}
.as-theme-clasico .hig-ps-select:disabled {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 8px;
}
.as-theme-clasico .hig-ps-input[readonly] {
    color: var(--label-primary);
    font-weight: 600;
    background: transparent;
    border-color: var(--border-faint);
}
.as-theme-clasico .hig-ps-input--num { text-align: right; }
.as-theme-clasico .hig-ps-input--inline {
    width: auto;
    max-width: 90px;
    margin-left: 6px;
}
.as-theme-clasico .hig-ps-select--inline {
    width: auto;
    padding: 0 24px 0 8px;
}
.as-theme-clasico .hig-ps-input[type="number"]::-webkit-outer-spin-button,
.as-theme-clasico .hig-ps-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.as-theme-clasico .hig-ps-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.as-theme-clasico .hig-ps-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7180' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 7px center;
}
/* Chevron del select en dark: stroke más claro para que contraste sobre el bg dark. */
.dark .as-theme-clasico .hig-ps-select,
.app-service-container.as-theme-clasico.dark .hig-ps-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23a8adb6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
}

.as-theme-clasico .hig-ps-col--tipo { width: 140px; }
.as-theme-clasico .hig-ps-col--qty  { width: 70px; }
.as-theme-clasico .hig-ps-col--cu,
.as-theme-clasico .hig-ps-col--ct   { width: 110px; }
.as-theme-clasico .hig-ps-col--act  { width: 32px; text-align: center; }

.as-theme-clasico .hig-ps-remove {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--system-red);
    cursor: pointer;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ps-remove:hover:not(:disabled) {
    background: var(--system-red-soft);
}
.as-theme-clasico .hig-ps-remove:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.as-theme-clasico .hig-ps-empty {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    color: var(--label-tertiary);
    font-size: var(--fs-callout);
}

/* Totals: footer del panel blanco — cierra el bloque con bottom-radius. */
.as-theme-clasico .hig-ps-totals {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: 7px var(--space-4);
    background: var(--card-bg-subtle);
    border: 1px solid var(--border);
    border-top: none;
    border-bottom-left-radius: var(--r-md);
    border-bottom-right-radius: var(--r-md);
    font-size: var(--fs-callout);
}
.as-theme-clasico .hig-ps-totals__label {
    color: var(--label-secondary);
    margin-right: 6px;
}
.as-theme-clasico .hig-ps-totals__value {
    font-weight: 600;
    color: var(--label-primary);
}

/* ============================================================
   16. FINANZAS / pago-row
   Subtab `cobros` — markup en `modules/orders/frontend/assets/order-finanzas-tab.js`.
   Layout del row: icono · monto (90px) · categoría · detalle (flex:1) · medio
   · fecha (140px) · botón eliminar (flex-shrink:0, alineado a la derecha).
   ============================================================ */
.as-theme-clasico .pago-row > .pago-monto {
    max-width: 90px;
    flex-shrink: 0;
}
.as-theme-clasico .pago-row > .pago-detalle {
    flex: 1;
    min-width: 0;
}
.as-theme-clasico .pago-row > .pago-fecha {
    max-width: none;
    min-width: 140px;
    flex-shrink: 0;
}
.as-theme-clasico .pago-row > .btn-remove-pago {
    flex-shrink: 0;
    margin-left: auto;
}

/* ============================================================
   17. TOASTS (mostrarMensaje)
   Markup en `core/frontend/js/ui.js`: <div class="toast-stack"> >
   <div class="toast toast--{success|info|warning|error}">.
   El stack vive en <body>, fuera del shell — sin scope `.as-theme-clasico`.
   Estilo Vista clásico: pill claro con border + sombra Vista, no oscuro.
   ============================================================ */
.toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 100000;
    pointer-events: none;
    font-family: "Segoe UI", Tahoma, Verdana, "Lucida Grande", system-ui, sans-serif;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #a8adb6;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    animation: app-toast-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
    width: max-content;
    max-width: 360px;
}
.toast i {
    font-size: 14px;
    flex-shrink: 0;
}
.toast--success i { color: #1f7032; }
.toast--info i    { color: #2856a3; }
.toast--warning i { color: #a85800; }
.toast--error i   { color: #b8120a; }

.toast--leaving {
    animation: app-toast-out 180ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes app-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes app-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

/* ============================================================
   17b. SUGGEST DROPDOWN (autocomplete custom de dirección)
   Popover anclado a inputs `.cliente-provincia|departamento|localidad`
   del subtab Cliente. JS: `modules/orders/frontend/assets/location-autocomplete.js`.
   Inserción en `.app-service-container` (no body) para heredar tokens;
   position: fixed con viewport coords (ver comentarios del JS).
   ============================================================ */
.as-theme-clasico .suggest-dropdown {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--bg-primary);
    border: 1px solid var(--separator);
    border-radius: var(--r-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 4px;
    max-height: 220px;
    overflow-y: auto;
}
.as-theme-clasico .suggest-dropdown.open { display: block; }
.as-theme-clasico .suggest-option {
    padding: 6px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-callout);
    color: var(--label-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .suggest-option:hover,
.as-theme-clasico .suggest-option.active {
    background: var(--fill-1);
}

/* ============================================================
   18. HISTORIAL DE ÓRDENES (.hig-order*)
   Lista clickeable de órdenes anteriores del cliente, populada por
   `tabs.js::cargarHistorialCliente` dentro del subtab Datos del Cliente.
   Markup: `.cliente-historial-list` (.hig-group wrapper) >
     .hig-order > [.hig-order__body > .hig-order__title + .hig-order__meta]
     + .hig-order__chip + .hig-order__chevron.
   ============================================================ */
.as-theme-clasico .hig-order {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 6px var(--space-4);
    border-bottom: 1px solid var(--separator);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-order:last-child { border-bottom: none; }
.as-theme-clasico .hig-order:hover { background: var(--fill-1); }
.as-theme-clasico .hig-order:active { background: var(--fill-2); }
.as-theme-clasico .hig-order__body {
    flex: 1;
    min-width: 0;
}
.as-theme-clasico .hig-order__title {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--label-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-theme-clasico .hig-order__meta {
    font-size: var(--fs-callout);
    color: var(--label-tertiary);
    display: flex;
    gap: var(--space-2);
    margin-top: 1px;
}
.as-theme-clasico .hig-order__chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-micro);
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.as-theme-clasico .hig-order__chip--green {
    background: rgba(31, 112, 50, 0.12);
    border-color: rgba(31, 112, 50, 0.30);
    color: var(--system-green);
}
.as-theme-clasico .hig-order__chip--blue {
    background: var(--accent-bg-soft);
    border-color: rgba(40, 86, 163, 0.30);
    color: var(--accent);
}
.as-theme-clasico .hig-order__chip--orange {
    background: rgba(168, 88, 0, 0.12);
    border-color: rgba(168, 88, 0, 0.30);
    color: var(--system-orange);
}
/* Sub-grupo "Mismo equipo": wrapper que agrupa todas las órdenes con misma
   producto_serie. Lo emite tabs.js#fetchClienteHistorial cuando hay al menos
   una orden con la serie del producto actual. Visual: card sutil con accent
   tint + heading "Mismo equipo · Serie: XXX · count". Las rows hijas pierden
   el borde-bottom de la última fila (queda dentro del wrapper). */
.as-theme-clasico .hig-order-group {
    background: var(--accent-bg-soft);
    border: 1px solid rgba(40, 86, 163, 0.22);
    border-radius: var(--r-md);
    margin-bottom: var(--space-2);
    overflow: hidden;
}
.as-theme-clasico .hig-order-group__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    background: rgba(40, 86, 163, 0.06);
    border-bottom: 1px solid rgba(40, 86, 163, 0.18);
    color: var(--accent);
    font-size: var(--fs-footnote);
    font-weight: 600;
}
.as-theme-clasico .hig-order-group__icon { font-size: 11px; }
.as-theme-clasico .hig-order-group__title { letter-spacing: 0.2px; }
.as-theme-clasico .hig-order-group__sub {
    margin-left: 4px;
    color: var(--label-secondary);
    font-weight: 500;
    font-size: var(--fs-micro);
}
.as-theme-clasico .hig-order-group__count {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--label-on-accent);
    border-radius: 9px;
    font-size: var(--fs-micro);
    font-weight: 700;
}
.as-theme-clasico .hig-order-group__rows {
    background: var(--card-bg);
}
.as-theme-clasico .hig-order-group__rows > .hig-order {
    border-radius: 0;
    border-bottom: 1px solid var(--border-soft);
}
.as-theme-clasico .hig-order-group__rows > .hig-order:last-child {
    border-bottom: none;
}
/* Divisor "Otras órdenes del cliente" entre el grupo de mismo equipo y el
   resto sueltos. Sutil, en caps. (Legacy: ya no se usa con el modelo de
   sub-grupos por equipo, pero la dejo para consumidores externos.) */
.as-theme-clasico .hig-order-group__divider {
    margin: var(--space-2) var(--space-1) var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--fs-micro);
    color: var(--label-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
/* Grupos NO actuales: otros equipos del cliente. Estilo neutro (sin accent)
   para que el grupo del equipo activo destaque visualmente sin que los demás
   se sientan "menos importantes". */
.as-theme-clasico .hig-order-group--equip-other {
    background: var(--bg-secondary);
    border-color: var(--border);
}
.as-theme-clasico .hig-order-group--equip-other .hig-order-group__heading {
    background: var(--fill-1);
    border-bottom-color: var(--border-soft);
    color: var(--label-secondary);
}
.as-theme-clasico .hig-order-group--equip-other .hig-order-group__count {
    background: var(--label-tertiary);
    color: var(--bg-primary);
}
/* Grupo "Sin serie": órdenes legacy o cargadas sin nº serie. Más sutil aún. */
.as-theme-clasico .hig-order-group--no-serie {
    background: transparent;
    border-color: var(--border-soft);
    border-style: dashed;
}
.as-theme-clasico .hig-order-group--no-serie .hig-order-group__heading {
    background: transparent;
    border-bottom-style: dashed;
    border-bottom-color: var(--border-soft);
    color: var(--label-tertiary);
}
.as-theme-clasico .hig-order-group--no-serie .hig-order-group__count {
    background: var(--label-quaternary);
    color: var(--bg-primary);
}
/* Row individual marcada (legacy, ya no se usa con el wrapper pero la
   mantengo por si algún consumidor render rows sueltas con la marca). */
.as-theme-clasico .hig-order--same-equipment {
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--space-3) - 3px);
}
.as-theme-clasico .hig-order__chevron {
    color: var(--label-quaternary);
    font-size: 11px;
    flex-shrink: 0;
}

/* ============================================================
   19. SUCESOS / hig-ev-*
   Subtab `sucesos` — markup en `modules/orders/frontend/assets/order-events-tab.js`.
   Estructura: `.hig-ev-toolbar` (chips de filtro + botón add) +
   `.hig-ev-form` (form inline collapsable) + `.hig-ev-timeline` con
   `.hig-ev-item` (icon circular + main + view button).
   ============================================================ */

/* Toolbar: filter chips a izq + botón "Agregar suceso" a der */
.as-theme-clasico .hig-ev-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.as-theme-clasico .hig-ev-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--btn-primary-bg);
    border: 1px solid var(--accent-pressed);
    border-radius: var(--r-sm);
    color: var(--label-on-accent);
    font-family: inherit;
    font-size: var(--fs-callout);
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ev-add:hover:not(:disabled) {
    background: var(--btn-primary-bg-hover);
}
.as-theme-clasico .hig-ev-add:disabled {
    opacity: 0.5;
    cursor: default;
}
.as-theme-clasico .hig-ev-add i { font-size: 10px; }

/* Filter chips (Todos / Sistema / Manuales / Ediciones) */
.as-theme-clasico .hig-ev-filters {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}
.as-theme-clasico .hig-ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--btn-light-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--label-secondary);
    font-family: inherit;
    font-size: var(--fs-callout);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ev-chip:not(.hig-ev-chip--active):hover {
    background: var(--btn-light-bg-hover);
    color: var(--label-primary);
}
.as-theme-clasico .hig-ev-chip--active {
    background: var(--accent-bg-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.as-theme-clasico .hig-ev-chip__count {
    margin-left: 2px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* Form inline collapsable: panel Vista que se abre al click "Agregar suceso" */
.as-theme-clasico .hig-ev-form {
    background: var(--card-bg);
    border: 0 solid var(--border);
    border-radius: var(--r-md);
    padding: 0 var(--space-4);
    margin-bottom: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 220ms var(--ease),
                padding 220ms var(--ease),
                border-width 220ms var(--ease),
                margin-bottom 220ms var(--ease);
}
.as-theme-clasico .hig-ev-form.is-open {
    max-height: 240px;
    padding: var(--space-3) var(--space-4);
    border-width: 1px;
    margin-bottom: var(--space-3);
}
.as-theme-clasico .hig-ev-form__label {
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--label-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.as-theme-clasico .hig-ev-form__textarea {
    width: 100%;
    min-height: 70px;
    padding: 8px 10px;
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    color: var(--label-primary);
    font-family: inherit;
    font-size: var(--fs-body);
    outline: none;
    resize: vertical;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ev-form__textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .hig-ev-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.as-theme-clasico .hig-ev-form__btn {
    padding: 6px 14px;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-callout);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ev-form__btn--primary {
    background: var(--btn-primary-bg);
    border: 1px solid var(--accent-pressed);
    color: var(--label-on-accent);
}
.as-theme-clasico .hig-ev-form__btn--primary:hover:not(:disabled) {
    background: var(--btn-primary-bg-hover);
}
.as-theme-clasico .hig-ev-form__btn--cancel {
    background: var(--btn-light-bg);
    border: 1px solid var(--border);
    color: var(--label-primary);
}
.as-theme-clasico .hig-ev-form__btn--cancel:hover:not(:disabled) {
    background: var(--btn-light-bg-hover);
}

/* Timeline: panel Vista con items + línea vertical conectora */
.as-theme-clasico .hig-ev-timeline {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--space-2) 0;
    position: relative;
    overflow: hidden;
}
.as-theme-clasico .hig-ev-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--separator);
}
.as-theme-clasico .hig-ev-item:last-child { border-bottom: 0; }
.as-theme-clasico .hig-ev-item::before {
    content: '';
    position: absolute;
    left: calc(var(--space-4) + 14px);
    top: -1px;
    bottom: -1px;
    width: 2px;
    background: var(--separator);
    z-index: 0;
}
.as-theme-clasico .hig-ev-item:first-child::before { top: 50%; }
.as-theme-clasico .hig-ev-item:last-child::before { bottom: 50%; }
.as-theme-clasico .hig-ev-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
    background-color: var(--card-bg);
}
.as-theme-clasico .hig-ev-icon--sistema {
    background-image: linear-gradient(var(--fill-2), var(--fill-2));
    color: var(--label-secondary);
}
.as-theme-clasico .hig-ev-icon--manual {
    background-image: linear-gradient(rgba(168, 88, 0, 0.14), rgba(168, 88, 0, 0.14));
    color: var(--system-orange);
}
.as-theme-clasico .hig-ev-icon--edicion {
    background-image: linear-gradient(var(--accent-bg-soft), var(--accent-bg-soft));
    color: var(--accent);
}
.as-theme-clasico .hig-ev-main {
    flex: 1;
    min-width: 0;
}
.as-theme-clasico .hig-ev-title {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--label-primary);
    line-height: 1.4;
}
.as-theme-clasico .hig-ev-meta {
    font-size: var(--fs-callout);
    color: var(--label-tertiary);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.as-theme-clasico .hig-ev-meta__dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--label-tertiary);
    display: inline-block;
}
.as-theme-clasico .hig-ev-meta__badge {
    font-size: var(--fs-micro2);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
}
.as-theme-clasico .hig-ev-meta__badge--sistema {
    background: var(--fill-2);
    border-color: var(--separator);
    color: var(--label-secondary);
}
.as-theme-clasico .hig-ev-meta__badge--manual {
    background: rgba(168, 88, 0, 0.12);
    border-color: rgba(168, 88, 0, 0.30);
    color: var(--system-orange);
}
.as-theme-clasico .hig-ev-meta__badge--edicion {
    background: var(--accent-bg-soft);
    border-color: rgba(40, 86, 163, 0.30);
    color: var(--accent);
}
.as-theme-clasico .hig-ev-view {
    background: transparent;
    border: 1px solid transparent;
    color: var(--accent);
    font-family: inherit;
    font-size: var(--fs-callout);
    font-weight: 500;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-ev-view:hover {
    background: var(--accent-bg-soft);
    border-color: var(--accent);
}

/* Empty state */
.as-theme-clasico .hig-ev-empty {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--label-tertiary);
    font-size: var(--fs-body);
}
.as-theme-clasico .hig-ev-empty__icon {
    font-size: 22px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* ============================================================
   20. IMÁGENES (subtab order-images)
   Markup en `modules/orders/frontend/assets/order-images-tab.js`.
   Estructura: `.hig-group--stack` (ya estilada §12) envuelve un
   `.oimg-topbox` (layout-glue 2-col: QR card | upload zone) +
   `.oimg-upload-errors` (lista). Luego `.hig-quota` x2 y
   `.hig-images-grid` con `.hig-image-card`. Lightbox al click.
   Portado de modern → Vista (paneles --card-bg/--border/--r-md,
   chips con patrón §18/§19, sin radios grandes ni shadows blandas).
   ============================================================ */

/* QR card: code (placeholder) + info (title/url/status/renovar) */
.as-theme-clasico .hig-qr-card {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.as-theme-clasico .hig-qr-card__code { flex-shrink: 0; }
.as-theme-clasico .hig-qr-card__placeholder {
    width: 120px;
    height: 120px;
    border-radius: var(--r-sm);
    background: var(--fill-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--label-quaternary);
}
.as-theme-clasico .hig-qr-card__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
}
.as-theme-clasico .hig-qr-card__title {
    font-size: var(--fs-headline);
    font-weight: 600;
    color: var(--label-primary);
}
.as-theme-clasico .hig-qr-card__url {
    font-size: var(--fs-callout);
    color: var(--accent);
    word-break: break-all;
}
.as-theme-clasico .hig-qr-card__status {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-micro);
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    width: fit-content;
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.as-theme-clasico .hig-qr-card__status--active {
    background: rgba(31, 112, 50, 0.12);
    border-color: rgba(31, 112, 50, 0.30);
    color: var(--system-green);
}
.as-theme-clasico .hig-qr-card__status--expired {
    background: rgba(168, 88, 0, 0.12);
    border-color: rgba(168, 88, 0, 0.30);
    color: var(--system-orange);
}

/* QR card deshabilitado: dos casos
   - `--disabled`: aplicado server-side en modo vista (no editing).
   - `--expired`: aplicado por updateQrStatus cuando el QR caducó.
   Mismo look para ambos: el QR queda en grayscale + blur + overlay de
   icono "ban" centrado, para señalar claramente que no es escaneable.
   El botón "Renovar QR" queda inerte salvo en modo edición + expirado
   (donde es el CTA principal). El placeholder del overlay vive en el
   HTML siempre (oculto por default vía CSS); el `.hig-qr-card__code`
   lo posiciona absolute centrado sobre el QR. */
.as-theme-clasico .hig-qr-card__code { position: relative; }
.as-theme-clasico .hig-qr-card__overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.as-theme-clasico .hig-qr-card__overlay i {
    font-size: 56px;
    color: var(--label-tertiary);
    background: var(--card-bg);
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.as-theme-clasico .hig-qr-card--disabled,
.as-theme-clasico .hig-qr-card--expired {
    background: var(--card-bg-subtle);
    border-color: var(--border-soft);
}
.as-theme-clasico .hig-qr-card--disabled .hig-qr-card__placeholder,
.as-theme-clasico .hig-qr-card--expired .hig-qr-card__placeholder {
    filter: grayscale(1) blur(2px);
    opacity: 0.35;
}
.as-theme-clasico .hig-qr-card--disabled .hig-qr-card__overlay,
.as-theme-clasico .hig-qr-card--expired .hig-qr-card__overlay {
    display: flex;
}
/* Tinte del ícono según el modo: gris en vista (informativo), naranja
   en expirado (señaliza que requiere acción). */
.as-theme-clasico .hig-qr-card--expired .hig-qr-card__overlay i {
    color: var(--system-orange);
}
.as-theme-clasico .hig-qr-card--disabled .hig-qr-card__title,
.as-theme-clasico .hig-qr-card--disabled .hig-qr-card__url,
.as-theme-clasico .hig-qr-card--expired .hig-qr-card__title,
.as-theme-clasico .hig-qr-card--expired .hig-qr-card__url {
    color: var(--label-tertiary);
}
/* Modo vista: botón Renovar deshabilitado (atributo `disabled` lo emite
   el render). Modo expirado en edit: el botón sí funciona y queda como
   CTA — por eso el selector excluye `--expired` solo cuando NO hay
   `--disabled`. */
.as-theme-clasico .hig-qr-card--disabled .hig-btn-edit[data-action="renew-qr"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Upload zone: drop target Vista (panel subtle, dashed) + estado drag */
.as-theme-clasico .hig-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--card-bg-subtle);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-upload-zone:hover { background: var(--fill-1); }
.as-theme-clasico .hig-upload-zone.is-dragover {
    background: var(--accent-bg-soft);
    border-color: var(--accent);
    border-style: solid;
}
/* Modo vista u offline: upload zone deshabilitada + delete del thumb oculto.
   El guard "real" del comportamiento vive en el JS de attachImagenesHandlers
   (isEditingMode() en cada handler); el CSS comunica visualmente que esas
   acciones no aplican. `data-offline="1"` lo emite applyOfflineState al
   perderse la conexión real al server (sync con appService.connection.changed). */
.as-theme-clasico .hig-page[data-editing="0"] .hig-upload-zone,
.as-theme-clasico .hig-page[data-offline="1"] .hig-upload-zone {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.4);
}
.as-theme-clasico .hig-page[data-editing="0"] .hig-image-card__action--delete {
    display: none;
}
.as-theme-clasico .hig-upload-zone__icon {
    font-size: 26px;
    color: var(--label-tertiary);
}
.as-theme-clasico .hig-upload-zone__text {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--label-secondary);
}
.as-theme-clasico .hig-upload-zone__hint {
    font-size: var(--fs-callout);
    color: var(--label-tertiary);
}

/* Upload progress: barra + label dentro del upload-zone */
.as-theme-clasico .hig-upload-progress {
    width: 100%;
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.as-theme-clasico .hig-upload-progress[hidden] { display: none; }
.as-theme-clasico .hig-upload-progress__track {
    width: 100%;
    height: 6px;
    background: var(--fill-2);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.as-theme-clasico .hig-upload-progress__fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 150ms linear;
}
.as-theme-clasico .hig-upload-progress__label {
    font-size: var(--fs-callout);
    color: var(--label-tertiary);
    text-align: right;
}

/* Layout-glue del subtab: QR card | upload zone en 2 columnas.
   Sin --with-qr (QR bloqueado), el upload-zone ocupa toda la fila. */
.as-theme-clasico .oimg-topbox {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: stretch;
}
.as-theme-clasico .oimg-topbox--with-qr { grid-template-columns: 1fr 1fr; }
/* QR slot: __code con ancho fijo (no depende de aspect-ratio en cadena,
   que colapsaba el width y dejaba al __info pisando al QR). */
.as-theme-clasico .oimg-topbox--with-qr .hig-qr-card__code {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.as-theme-clasico .oimg-topbox--with-qr .hig-qr-card__placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-height: 100%;
}
.as-theme-clasico .oimg-topbox--with-qr .hig-qr-card__info > .hig-btn-edit {
    align-self: flex-start;
}
/* Defensa contra grid-blowout: min-width:0 fuerza al item a respetar 1fr. */
.as-theme-clasico .oimg-topbox > .hig-upload-zone { min-width: 0; }
.as-theme-clasico .oimg-topbox .hig-upload-zone__text { overflow-wrap: anywhere; }
/* Pre-reservar slot del progress: cuando está oculto sigue ocupando su
   altura (invisible) para que el upload-zone no salte al aparecer la barra. */
.as-theme-clasico .oimg-topbox .hig-upload-progress[hidden] {
    display: flex;
    visibility: hidden;
}

/* ──────────────────────────────────────────────────────────────────────────
   Subtab Imágenes — layout actual:
   - `.oimg-uploadbox` arriba: 2-col (QR card 110px | upload zone) side-by-side
   - `.oimg-quotas` debajo: full-width, cuotas "Esta orden" + "Servidor"
     apiladas con variante flat (`.hig-quota--flat`) — label + barra en una
     sola línea, look más bajo perfil que ocupa menos vertical.
   Reemplaza al patrón viejo `.oimg-topbox--with-qr` (mismo grid 2-col pero
   sin cuotas dedicadas debajo — quedaban full-width sueltas).
   ─────────────────────────────────────────────────────────────────────── */
.as-theme-clasico .oimg-uploadbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
}
/* El card del QR en el uploadbox necesita más padding del que trae base
   — el placeholder al ser chico (110px) "pegaba" al borde izquierdo del
   card. Subimos a --space-4 acá específicamente. */
.as-theme-clasico .oimg-uploadbox .hig-qr-card {
    padding: var(--space-4);
}
.as-theme-clasico .oimg-uploadbox .hig-qr-card__code {
    flex: 0 0 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.as-theme-clasico .oimg-uploadbox .hig-qr-card__placeholder {
    width: 110px;
    height: 110px;
    aspect-ratio: 1;
    overflow: hidden; /* defensa: si la lib QR ignora el size pedido, no desborda */
}
/* El __info debe expandirse a la derecha (resto del card) — sino con URL
   corta queda apretado al QR y deja un hueco a la derecha. min-width:0 evita
   que la URL larga rompa el grid externo (1fr puede colapsar a auto). */
.as-theme-clasico .oimg-uploadbox .hig-qr-card__info {
    flex: 1;
    min-width: 0;
}
.as-theme-clasico .oimg-uploadbox .hig-qr-card__info > .hig-btn-edit {
    align-self: flex-start;
}
.as-theme-clasico .oimg-uploadbox > .hig-upload-zone { min-width: 0; }
.as-theme-clasico .oimg-uploadbox .hig-upload-zone__text { overflow-wrap: anywhere; }
.as-theme-clasico .oimg-uploadbox .hig-upload-progress[hidden] {
    display: flex;
    visibility: hidden;
}

/* Box de cuotas: full-width debajo del uploadbox, ambas cuotas apiladas
   verticalmente con look más bajo perfil. Mismo card-style que el resto
   del subtab para consistencia visual. */
.as-theme-clasico .oimg-quotas {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--card-bg-subtle);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
}
.as-theme-clasico .oimg-quotas:empty { display: none; }
/* Si las dos cuotas están hidden (no hay límites), también colapsa todo. */
.as-theme-clasico .oimg-quotas:not(:has(> .hig-quota:not([hidden]))) { display: none; }

/* Variante flat de la cuota: label izq + barra a la derecha en una sola
   línea. La variante por defecto sigue stack vertical (label arriba, barra
   abajo) — no la pisamos. */
.as-theme-clasico .hig-quota--flat {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: var(--space-3);
    align-items: center;
}
.as-theme-clasico .hig-quota--flat .hig-quota__label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-callout);
}
.as-theme-clasico .hig-quota--flat .hig-quota__track {
    height: 6px;
    margin: 0;
}

/* Lista detallada de errores de upload (un <li> por archivo fallido).
   Persiste hasta el próximo intento (el toast del core es efímero). */
.as-theme-clasico .oimg-upload-errors {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--system-red-soft);
    border: 1px solid var(--system-red);
    border-radius: var(--r-sm);
    width: 100%;
    font-size: var(--fs-callout);
    color: var(--label-primary);
    text-align: left;
    overflow-wrap: anywhere;
}
.as-theme-clasico .oimg-upload-errors > li + li { margin-top: var(--space-1); }
.as-theme-clasico .oimg-upload-errors[hidden] { display: none; }

/* Quota bar (orden + servidor) */
.as-theme-clasico .hig-quota {
    padding: var(--space-3) var(--space-4);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.as-theme-clasico .hig-quota[hidden] { display: none; }
.as-theme-clasico .hig-quota__label {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-body);
    color: var(--label-secondary);
    margin-bottom: var(--space-2);
}
.as-theme-clasico .hig-quota__track {
    height: 6px;
    border-radius: var(--r-sm);
    background: var(--fill-2);
    overflow: hidden;
}
.as-theme-clasico .hig-quota__fill {
    height: 100%;
    border-radius: var(--r-sm);
    transition: width 300ms var(--ease);
}
.as-theme-clasico .hig-quota__fill--green  { background: var(--system-green); }
.as-theme-clasico .hig-quota__fill--yellow { background: var(--system-orange); }
.as-theme-clasico .hig-quota__fill--red    { background: var(--system-red); }

/* Grid de archivos adjuntos */
.as-theme-clasico .hig-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
}
.as-theme-clasico .hig-images-grid__empty {
    grid-column: 1 / -1;
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--label-tertiary);
    font-size: var(--fs-body);
}
.as-theme-clasico .hig-image-card {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    transition: box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-image-card:hover { box-shadow: var(--shadow-2); }
.as-theme-clasico .hig-image-card__thumb {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fill-1);
}
.as-theme-clasico .hig-image-card__thumb--pdf { background: var(--card-bg-subtle); }
.as-theme-clasico .hig-image-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.as-theme-clasico .hig-image-card__pdf-icon {
    font-size: 28px;
    color: var(--system-red);
}
.as-theme-clasico .hig-image-card__placeholder-icon {
    font-size: 24px;
    color: var(--label-quaternary);
}
.as-theme-clasico .hig-image-card__footer {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--separator);
}
.as-theme-clasico .hig-image-card__name {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--label-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-theme-clasico .hig-image-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-micro);
    color: var(--label-tertiary);
    margin-top: 2px;
}
.as-theme-clasico .hig-image-card__source {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border-radius: var(--r-sm);
    font-size: var(--fs-micro2);
    font-weight: 600;
    background: var(--fill-2);
    color: var(--label-secondary);
}
.as-theme-clasico .hig-image-card__source--qr {
    background: var(--accent-bg-soft);
    color: var(--accent);
}

/* Overlay sobre la imagen (hover): descargar + eliminar. Fondo oscuro
   theme-agnóstico (va sobre imágenes arbitrarias) y botones claros. */
.as-theme-clasico .hig-image-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
    pointer-events: none;
}
.as-theme-clasico .hig-image-card__overlay .hig-image-card__action { pointer-events: auto; }
.as-theme-clasico .hig-image-card:hover .hig-image-card__overlay { opacity: 1; }
.as-theme-clasico .hig-image-card__action {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: rgba(0, 0, 0, 0.85);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-image-card__action:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08);
}
.as-theme-clasico .hig-image-card__action--delete:hover {
    background: var(--system-red);
    color: rgba(255, 255, 255, 1);
}

/* Lightbox modal (preview de imágenes/PDFs al click). Va dentro del
   `.app-service-container` (hereda el scope). Backdrop/herramientas
   oscuras theme-agnósticas: van sobre el media. */
.as-theme-clasico .hig-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 200ms var(--ease);
}
.as-theme-clasico .hig-lightbox.is-visible { opacity: 1; }
.as-theme-clasico .hig-lightbox__content {
    position: relative;
    max-width: min(95vw, 1200px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.as-theme-clasico .hig-lightbox__content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: block;
    cursor: zoom-in;
    transition: transform 200ms var(--ease);
}
.as-theme-clasico .hig-lightbox__content img.is-zoomed { cursor: zoom-out; }
.as-theme-clasico .hig-lightbox__content iframe {
    width: min(95vw, 1000px);
    height: 85vh;
    border: 0;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.as-theme-clasico .hig-lightbox__toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: var(--space-2);
    z-index: 2;
}
.as-theme-clasico .hig-lightbox__tool {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-lightbox__tool:hover { background: rgba(0, 0, 0, 0.75); }
.as-theme-clasico .hig-lightbox__tool.is-active { background: rgba(40, 86, 163, 0.85); }
.as-theme-clasico .hig-lightbox__tool[hidden] { display: none; }
.as-theme-clasico .hig-lightbox__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    animation: app-img-spin 800ms linear infinite;
}
@keyframes app-img-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
    .as-theme-clasico .oimg-topbox--with-qr { grid-template-columns: 1fr; }
    .as-theme-clasico .oimg-uploadbox { grid-template-columns: 1fr; }
}

/* ============================================================
   21. TRACKING (subtab `tracking` — mensaje al cliente)
   Markup en `modules/orders/frontend/assets/order-status-tab.js`
   (`createTrackingMessageContent`). Primitivas `.hig-section/__title/
   __hint`, `.hig-row`, `.hig-toggle` ya estiladas (§12). Acá sólo el
   bloque `.hig-tr-msg*`: panel conectado al título de sección + editor
   con contador + acciones. Portado de modern → Vista.
   ============================================================ */

/* Panel del editor: se conecta visualmente al `.hig-section__title` de
   arriba (igual patrón que `.hig-section__title + .hig-group`). */
.as-theme-clasico .hig-tr-msg {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
    transition: opacity var(--dur-mid) var(--ease);
}
.as-theme-clasico .hig-section__title + .hig-tr-msg {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.as-theme-clasico .hig-tr-msg__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--label-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.as-theme-clasico .hig-tr-msg__count {
    font-variant-numeric: tabular-nums;
    color: var(--label-secondary);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.as-theme-clasico .hig-tr-msg__count.is-near { color: var(--system-orange); }
.as-theme-clasico .hig-tr-msg__count.is-full { color: var(--system-red); }
.as-theme-clasico .hig-tr-msg__textarea {
    width: 100%;
    min-height: 110px;
    padding: 8px 10px;
    background: var(--input-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    color: var(--label-primary);
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .hig-tr-msg__textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .hig-tr-msg__textarea:disabled {
    background: var(--card-bg-subtle);
    color: var(--label-tertiary);
}

/* ============================================================
   22. MODALES BODY-LEVEL (chrome compartido + variantes)
   Los modales viven en `<body>` (la JS hace `document.body.appendChild`)
   → quedan FUERA de `.as-theme-clasico`, igual que los toasts (§17).
   Por eso se scopean al wrapper específico (`.modal-coincidencias-wrapper`
   o `.modal-confirm-close-wrapper`) y usan `var(--token, <literal Vista>)`:
   el token no resuelve a nivel body, así que en la práctica rinde el
   literal Vista (light). Sin dark variant (mismo criterio que §17).
   Portado de modern → Vista: radios apretados (4/3/2px), fuente Segoe,
   botones flat Vista. Sólo una theme.css se enquela por request → sin
   choque cross-tema.

   Estructura:
   - Chrome compartido (floating-modal + header + body + footer + btn-*)
     usa `:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper)`
     para no duplicar reglas entre variantes.
   - Reglas específicas de coincidencias/suceso siguen scopeadas al
     wrapper de coincidencias (sub-bloque más abajo).
   - §23 agrega las reglas específicas del modal de confirmación de
     cierre (lista de pestañas, checkboxes).
   ============================================================ */

/* Display gate genérico */
.modal { display: none; }
.modal.is-open { display: block; }
body.modal-open { overflow: hidden; }

/* Backdrop dim (compartido) */
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Card flotante (la JS aplica position:fixed + top/left inline) */
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .floating-modal {
    background: var(--card-bg, rgb(255, 255, 255));
    border: 1px solid var(--border, rgb(168, 173, 182));
    border-radius: 4px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    width: min(540px, calc(100vw - 24px));
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    font-family: "Segoe UI", Tahoma, Verdana, "Lucida Grande", system-ui, sans-serif;
}

/* Header (compartido) */
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .modal-header.minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-header-bg, linear-gradient(to bottom, rgb(238, 241, 245), rgb(218, 222, 229)));
    border-bottom: 1px solid var(--border, rgb(168, 173, 182));
    user-select: none;
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .modal-header.minimal h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .modal-close {
    border: none;
    background: transparent;
    color: var(--label-tertiary, rgba(0, 0, 0, 0.40));
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 2px;
    transition: color 120ms, background 120ms;
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .modal-close:hover {
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    background: var(--fill-1, rgba(0, 0, 0, 0.05));
}

/* Body (compartido) */
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .modal-body {
    padding: 14px 16px 10px;
    overflow-y: auto;
    flex: 1;
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .modal-body p {
    text-align: center;
    color: var(--label-tertiary, rgba(0, 0, 0, 0.40));
    font-size: 12px;
    padding: 24px 0;
    margin: 0;
}

/* Match card */
.modal-coincidencias-wrapper .match-item {
    background: var(--card-bg-subtle, rgb(246, 247, 249));
    border: 1px solid var(--border-soft, rgb(193, 197, 205));
    border-radius: 3px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.modal-coincidencias-wrapper .match-header {
    font-size: 13px;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    margin-bottom: 6px;
}
.modal-coincidencias-wrapper .match-header strong {
    color: var(--accent, rgb(40, 86, 163));
}
.modal-coincidencias-wrapper .match-field {
    display: flex;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
}
.modal-coincidencias-wrapper .match-label {
    color: var(--label-secondary, rgba(0, 0, 0, 0.60));
    min-width: 90px;
    flex-shrink: 0;
}
.modal-coincidencias-wrapper .match-value {
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    word-break: break-word;
}
.modal-coincidencias-wrapper .match-falla {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--separator, rgba(0, 0, 0, 0.10));
    font-size: 12px;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    line-height: 1.5;
}
.modal-coincidencias-wrapper .match-falla strong {
    color: var(--label-secondary, rgba(0, 0, 0, 0.60));
    font-weight: 600;
}

/* Pager (← N/M →) */
.modal-coincidencias-wrapper .coincidencias-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 4px;
}
.modal-coincidencias-wrapper .coincidencias-index {
    font-size: 11px;
    color: var(--label-secondary, rgba(0, 0, 0, 0.60));
    min-width: 50px;
    text-align: center;
}
.modal-coincidencias-wrapper .btn-prev,
.modal-coincidencias-wrapper .btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border, rgb(168, 173, 182));
    background: var(--btn-light-bg, linear-gradient(to bottom, rgb(247, 248, 250), rgb(216, 220, 227)));
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    border-radius: 2px;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.modal-coincidencias-wrapper .btn-prev:hover:not(:disabled),
.modal-coincidencias-wrapper .btn-next:hover:not(:disabled) {
    background: var(--accent-bg-soft, rgba(40, 86, 163, 0.15));
    color: var(--accent, rgb(40, 86, 163));
    border-color: var(--accent, rgb(40, 86, 163));
}
.modal-coincidencias-wrapper .btn-prev:disabled,
.modal-coincidencias-wrapper .btn-next:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Footer (compartido) */
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .modal-footer.minimal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border, rgb(168, 173, 182));
    background: var(--card-bg-subtle, rgb(246, 247, 249));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modal-coincidencias-wrapper .match-utilizar-options {
    display: flex;
    gap: 16px;
}
.modal-coincidencias-wrapper .match-utilizar-options.is-hidden {
    display: none;
}
.modal-coincidencias-wrapper .match-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    cursor: pointer;
}
.modal-coincidencias-wrapper .match-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent, rgb(40, 86, 163));
    cursor: pointer;
}
.modal-coincidencias-wrapper .match-utilizar-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Botones (compartidos — scope a los wrappers para no chocar con .btn globales) */
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn:disabled {
    opacity: 0.5;
    cursor: default;
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn.is-hidden {
    display: none;
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn-primary {
    background: var(--btn-primary-bg, linear-gradient(to bottom, rgb(40, 86, 163), rgb(24, 56, 111)));
    color: var(--label-on-accent, rgb(255, 255, 255));
    border-color: var(--accent-pressed, rgb(24, 56, 111));
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-bg-hover, linear-gradient(to bottom, rgb(31, 71, 144), rgb(24, 56, 111)));
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn-secondary {
    background: var(--btn-light-bg, linear-gradient(to bottom, rgb(247, 248, 250), rgb(216, 220, 227)));
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    border-color: var(--border, rgb(168, 173, 182));
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn-secondary:hover:not(:disabled) {
    background: var(--btn-light-bg-hover, linear-gradient(to bottom, rgb(255, 255, 255), rgb(224, 228, 235)));
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn-text {
    background: transparent;
    color: var(--label-secondary, rgba(0, 0, 0, 0.60));
    border-color: transparent;
}
:is(.modal-coincidencias-wrapper, .modal-confirm-close-wrapper) .btn-text:hover:not(:disabled) {
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    background: var(--fill-1, rgba(0, 0, 0, 0.05));
}

/* ------------------------------------------------------------
   Modal "Detalle del Suceso" — comparte chrome con coincidencias
   (.floating-modal, .modal-header.minimal, .modal-body,
   .modal-footer.minimal-footer). Aquí sólo el contenido interno.
   El JS de coincidencias setea position:fixed inline; el de suceso
   NO, así que lo centramos vía ID sin afectar al de coincidencias.
   ------------------------------------------------------------ */
#modal-suceso-detalle .floating-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1250;
    animation: float-in-centered 220ms cubic-bezier(0.2, 0, 0.2, 1) both;
}
.modal-coincidencias-wrapper .suceso-detalle-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-coincidencias-wrapper .suceso-detalle-container,
.modal-coincidencias-wrapper .suceso-datos {
    background: var(--card-bg-subtle, rgb(246, 247, 249));
    border: 1px solid var(--border-soft, rgb(193, 197, 205));
    border-radius: 3px;
    padding: 12px;
}
.modal-coincidencias-wrapper .suceso-detalle-titulo {
    font-size: 13px;
    font-weight: 500;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    line-height: 1.4;
    word-break: break-word;
}
.modal-coincidencias-wrapper .suceso-detalle-header {
    margin-top: 4px;
}
.modal-coincidencias-wrapper .suceso-detalle-meta {
    font-size: 11px;
    color: var(--label-tertiary, rgba(0, 0, 0, 0.40));
}
.modal-coincidencias-wrapper .suceso-datos h4 {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--label-secondary, rgba(0, 0, 0, 0.60));
}
.modal-coincidencias-wrapper .suceso-datos ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modal-coincidencias-wrapper .suceso-dato-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.4;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--separator, rgba(0, 0, 0, 0.10));
}
.modal-coincidencias-wrapper .suceso-dato-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.modal-coincidencias-wrapper .suceso-dato-label {
    color: var(--label-secondary, rgba(0, 0, 0, 0.60));
    font-weight: 500;
}
.modal-coincidencias-wrapper .suceso-dato-value {
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Diff antes → después */
.modal-coincidencias-wrapper .diff-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--label-tertiary, rgba(0, 0, 0, 0.40));
    font-weight: 600;
}
.modal-coincidencias-wrapper .diff-before {
    background: var(--fill-1, rgba(0, 0, 0, 0.05));
    color: var(--label-secondary, rgba(0, 0, 0, 0.60));
    border-radius: 2px;
    padding: 2px 8px;
    text-decoration: line-through;
    text-decoration-color: var(--label-tertiary, rgba(0, 0, 0, 0.40));
}
.modal-coincidencias-wrapper .diff-after {
    background: var(--accent-bg-soft, rgba(40, 86, 163, 0.15));
    color: var(--accent, rgb(40, 86, 163));
    border-radius: 2px;
    padding: 2px 8px;
    font-weight: 500;
}
.modal-coincidencias-wrapper .diff-arrow {
    color: var(--label-tertiary, rgba(0, 0, 0, 0.40));
    font-size: 12px;
}

/* Animaciones de entrada (referenciadas inline en ui.js) */
@keyframes float-in-centered {
    from { opacity: 0; transform: translateX(-50%) translateY(-48%) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); }
}
@keyframes float-in-anchored {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   23. MODAL CONFIRMACIÓN DE CIERRE (cerrar pestañas con cambios)
   Comparte chrome con §22 (floating-modal, header/body/footer,
   btn-primary/-secondary/-text). Acá sólo el cuerpo específico:
   intro + lista de pestañas con checkbox + fila de acciones.
   El helper vive en `core/frontend/js/ui.js`
   (`mostrarConfirmacionCerrarPestanas`).
   ============================================================ */
.modal-confirm-close-wrapper .floating-modal {
    width: min(420px, calc(100vw - 24px));
}
.modal-confirm-close-wrapper .confirm-close-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-confirm-close-wrapper .confirm-close-intro {
    /* Sobreescribe el `.modal-body p` genérico (centrado + padding 24/0)
       — acá el intro es texto a la izquierda dentro de la card. */
    text-align: left;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    font-size: 12px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}
.modal-confirm-close-wrapper .confirm-close-intro strong {
    color: var(--accent, rgb(40, 86, 163));
    font-weight: 600;
}
.modal-confirm-close-wrapper .confirm-close-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-soft, rgb(193, 197, 205));
    border-radius: 3px;
    background: var(--card-bg-subtle, rgb(246, 247, 249));
    padding: 6px;
}
.modal-confirm-close-wrapper .confirm-close-item {
    margin: 0;
    padding: 0;
}
.modal-confirm-close-wrapper .confirm-close-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    color: var(--label-primary, rgba(0, 0, 0, 0.85));
    transition: background 120ms;
}
.modal-confirm-close-wrapper .confirm-close-label:hover {
    background: var(--fill-1, rgba(0, 0, 0, 0.05));
}
.modal-confirm-close-wrapper .confirm-close-chk {
    accent-color: var(--accent, rgb(40, 86, 163));
    cursor: pointer;
    flex-shrink: 0;
}
.modal-confirm-close-wrapper .confirm-close-tab-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal-confirm-close-wrapper .confirm-close-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================================
   24. PERMISOS (subtab Ajustes > Seguridad > Permisos)
   Markup en `modules/admin-tab/backend/tab-admin.php`
   (`[data-adm-section="permisos"]`). Tabla con header jerárquico
   (cat-row + perm-row), filas con switch `.hig-switch--sm` por
   celda. Sin `!important` — la specificity de `.as-theme-clasico
   .adm-perms-table .X` (0,3,0) gana a las reglas del módulo.
   ============================================================ */
.as-theme-clasico .adm-perms-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.as-theme-clasico .adm-perms-scroll::-webkit-scrollbar { display: none; }
.as-theme-clasico .adm-perms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-callout);
}
.as-theme-clasico .adm-perms-table thead th {
    text-align: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-footnote);
    font-weight: 500;
    color: var(--label-secondary);
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    vertical-align: middle;
}
.as-theme-clasico .adm-perms-table thead .admin-perms-cat-header {
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--label-tertiary);
    padding: var(--space-2) var(--space-3) 2px;
    background: var(--card-bg-subtle);
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.as-theme-clasico .adm-perms-table thead .admin-perms-perm-row th {
    padding: 2px var(--space-3) var(--space-2);
    font-weight: 500;
    background: var(--card-header-bg);
}
.as-theme-clasico .adm-perms-table td {
    padding: var(--space-2) var(--space-3);
    text-align: center;
    border-bottom: 1px solid var(--separator);
    vertical-align: middle;
}
.as-theme-clasico .adm-perms-table tbody tr:last-child td { border-bottom: none; }
.as-theme-clasico .adm-perms-table tbody tr:nth-child(even) td { background: var(--fill-1); }
.as-theme-clasico .adm-perms-table tbody tr:hover td { background: var(--accent-bg-soft); }

/* Celda usuario: alineada izquierda, padding extra para "respiro" */
.as-theme-clasico .adm-perms-user,
.as-theme-clasico .adm-perms-table td.adm-perms-user,
.as-theme-clasico .adm-perms-table th.adm-perms-user {
    text-align: left;
    min-width: 180px;
    padding-left: var(--space-4);
}
.as-theme-clasico .adm-perms-user-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.as-theme-clasico .adm-perms-user-name {
    font-size: var(--fs-callout);
    font-weight: 500;
    color: var(--label-primary);
}
.as-theme-clasico .adm-perms-user-name--current {
    color: var(--accent);
    font-weight: 600;
}
.as-theme-clasico .adm-perms-badge {
    display: inline-block;
    font-size: var(--fs-micro);
    padding: 1px 6px;
    border-radius: var(--r-md);
    background: var(--fill-2);
    color: var(--label-secondary);
    font-weight: 500;
    flex-shrink: 0;
}
.as-theme-clasico .adm-perms-badge--admin {
    background: var(--accent-bg-soft);
    color: var(--accent);
}
.as-theme-clasico .adm-perms-badge--current {
    background: var(--accent);
    color: var(--label-on-accent);
}

/* Separador vertical entre categorías de permisos. */
.as-theme-clasico .adm-perms-table .admin-perms-cat-sep {
    border-left: 1px solid var(--border-soft);
}

/* Scrollbar custom (siempre visible, ligado al wrapper). */
.as-theme-clasico .admin-perms-scrollbar {
    margin-top: var(--space-2);
    height: 6px;
    border-radius: 3px;
    background: var(--fill-1);
    overflow: hidden;
}
.as-theme-clasico .admin-perms-scrollbar-thumb {
    height: 100%;
    background: var(--label-tertiary);
    border-radius: 3px;
    cursor: grab;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .admin-perms-scrollbar-thumb:hover,
.as-theme-clasico .admin-perms-scrollbar-thumb:active {
    background: var(--label-secondary);
}

/* ============================================================
   25. DISPOSITIVOS (subtab Ajustes > Seguridad > Dispositivos)
   Markup en `modules/admin-tab/backend/tab-admin.php`
   (`[data-adm-section="dispositivos"]`). Tabla 3-col Usuario |
   Auth requerida | Sesión única, switches `.hig-switch--sm`
   en las 2 últimas. Estructura más simple que Permisos (sin
   header jerárquico ni scrollbar custom).
   ============================================================ */
.as-theme-clasico .adm-da-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-callout);
}
.as-theme-clasico .adm-da-table thead th {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-footnote);
    font-weight: 500;
    color: var(--label-secondary);
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}
.as-theme-clasico .adm-da-table th.adm-da-th--user {
    text-align: left;
    padding-left: var(--space-4);
}
.as-theme-clasico .adm-da-table th.adm-da-th--control { width: 140px; }
.as-theme-clasico .adm-da-table td {
    padding: var(--space-2) var(--space-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--separator);
}
.as-theme-clasico .adm-da-table tbody tr:last-child td { border-bottom: none; }
.as-theme-clasico .adm-da-table tbody tr:hover td { background: var(--accent-bg-soft); }
.as-theme-clasico .adm-da-td--user { padding-left: var(--space-4); }
.as-theme-clasico .adm-da-td--control { text-align: center; }
.as-theme-clasico .adm-da-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.as-theme-clasico .adm-da-user-name {
    font-size: var(--fs-callout);
    font-weight: 500;
    color: var(--label-primary);
}
.as-theme-clasico .adm-da-user-email {
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
}

/* ============================================================
   26. TRACKING ADMIN (subtab Ajustes > Herramientas > Tracking)
   Markup en `modules/tracking/admin/tracking-settings-card.php`
   (`[data-adm-section="tracking"]`). Combina `.hig-group +
   .hig-row--toggle + .hig-switch` (toggles principales),
   `.adm-track-radio` (modo comentarios), `.adm-track-estado-grid`
   (checkboxes por estado), `.adm-track-msg` (mensajes editables).
   Reusa `.pz-actions-bar + .pz-btn-primary` (§14).
   ============================================================ */
.as-theme-clasico .adm-track-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Radio row (modo de comentarios: Desactivado / Auto / Manual / Custom).
   El label envuelve toda la fila → click en cualquier zona marca el radio. */
.as-theme-clasico .adm-track-radio {
    cursor: pointer;
}
.as-theme-clasico .adm-track-radio .hig-row__label {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.as-theme-clasico .adm-track-radio__sub {
    font-size: var(--fs-footnote);
    font-weight: 400;
    color: var(--label-secondary);
}

/* Grid de checkboxes por estado (modo custom). Sin overflow lateral
   forzado — los estados son ~6-10, caben en 2-3 columnas. */
.as-theme-clasico .adm-track-estado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-2);
}
.as-theme-clasico .adm-track-estado-cb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--card-bg-subtle);
    cursor: pointer;
    font-size: var(--fs-callout);
    color: var(--label-primary);
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .adm-track-estado-cb:hover {
    background: var(--fill-1);
    border-color: var(--border);
}
.as-theme-clasico .adm-track-estado-cb input[type="checkbox"] {
    accent-color: var(--accent);
    margin: 0;
    flex-shrink: 0;
}

/* Mensajes editables por estado. Layout 2-col: label fijo a la izquierda,
   input flex-1 a la derecha. */
.as-theme-clasico .adm-track-msg {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-3);
    align-items: center;
    padding: 6px var(--space-5);
}
.as-theme-clasico .adm-track-msg > span {
    font-size: var(--fs-callout);
    color: var(--label-secondary);
}
.as-theme-clasico .adm-track-msg .hig-row__input {
    /* Reusa el styling de input genérico; sólo asegurar que ocupe la col
       2 del grid sin desbordarse. */
    width: 100%;
    min-width: 0;
}

/* Status del save (inline al lado del botón). */
.as-theme-clasico .adm-track-save-status {
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
}
.as-theme-clasico .adm-track-save-status.is-saving {
    color: var(--accent);
}
.as-theme-clasico .adm-track-save-status.is-saved {
    color: var(--system-green);
}
.as-theme-clasico .adm-track-save-status.is-error {
    color: var(--system-red);
}

/* ============================================================
   27. DISEÑADOR (Block Editor) — subtab Ajustes > Herramientas > Diseñador
   ----------------------------------------------------------------
   Markup en `modules/block-editor/frontend/assets/print-layout-editor.js`
   (JS-rendered sobre los hooks del template `modules/admin-tab/backend/
   tab-admin.php [data-adm-section="disenador"]`).

   Estructura visual:
   27a. Container general (flex column)
   27b. Flow-bar (top: plantillas + doc-segmented + page-controls + acciones)
   27c. Stage (side-panel + canvas-area)
   27d. Paper (hoja A4 fija, sombra multi-capa)
   27e. Canvas WYSIWYG (section-tags + selection rings variant-B + insert
        lines + container cells + resize handle + inline edit)
   27f. Popover (block properties: header + tabs + body + field rows +
        primitives iOS: toggle, stepper, footer danger btn)
   27g. Command palette (insert hidden block)
   27h. Template screen (pantalla de plantillas guardadas)
   27i. Sub-bloques de contenido del popover (text-rows, logo, field-picker,
        custom block textarea, be-details legacy)
   27j. Real preview + toast

   Adaptación a paleta Vista: radios apretados (--r-sm/-md/-lg = 2/3/4px,
   en algunos casos 6/7px hardcoded para componentes pill como iOS toggle
   que no escalan abajo de eso); fuente Segoe (heredada de body); tokens
   semánticos en lugar de hex; sombras de los 3 niveles existentes
   (--shadow-1/-2/-3). Sin `!important` — la specificity
   `.as-theme-clasico .X` (0,3,0) alcanza para overridear cualquier regla
   del módulo. Selection rings y backgrounds suaves: usar
   color-mix(in srgb, var(--accent) X%, transparent) (mismo enfoque que
   modern; soportado en todos los browsers actuales).
   ============================================================ */

/* ---------- 27a. Container general ---------- */
.as-theme-clasico .adm-section-content[data-adm-section="disenador"]:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---------- 27b. Flow-bar (top) + page controls + segmented + buttons ---------- */
.as-theme-clasico .be-flow-bar {
    display: flex;
    align-items: center;
    column-gap: 6px;
    padding: 8px 10px;
    min-height: 48px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    flex-shrink: 0;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}
.as-theme-clasico .be-flow-bar > *:not(.be-flow-spacer) { flex-shrink: 0; }
.as-theme-clasico .be-flow-spacer { flex: 1 1 0; min-width: 0; }

/* Page-controls (formato/orientación + zoom). Selects/inputs comparten
   lenguaje visual con los .btn vecinos. */
.as-theme-clasico .be-page-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.as-theme-clasico .be-page-select,
.as-theme-clasico .be-page-scale-input {
    height: 28px;
    background: var(--input-bg);
    color: var(--label-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-callout);
    font-family: inherit;
    transition: border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-page-select { padding: 0 8px; cursor: pointer; }
.as-theme-clasico .be-page-select:hover,
.as-theme-clasico .be-page-scale-input:hover {
    border-color: var(--label-tertiary);
}
.as-theme-clasico .be-page-scale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 4px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
}
.as-theme-clasico .be-page-scale:hover { border-color: var(--label-tertiary); }
.as-theme-clasico .be-page-scale-icon {
    color: var(--label-secondary);
    font-size: 11px;
}
.as-theme-clasico .be-page-scale-input {
    width: 44px;
    height: 24px;
    padding: 0 4px;
    border: none;
    font-variant-numeric: tabular-nums;
    text-align: right;
    -moz-appearance: textfield;
}
.as-theme-clasico .be-page-scale-input::-webkit-outer-spin-button,
.as-theme-clasico .be-page-scale-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.as-theme-clasico .be-page-scale-suffix {
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    font-variant-numeric: tabular-nums;
}

/* Botón primitive del block-editor — scopeado al .be-flow-bar y a la
   pantalla de plantillas (no chocar con otros .btn globales). */
.as-theme-clasico .be-flow-bar .btn,
.as-theme-clasico .be-tpl-screen .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--btn-light-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    white-space: nowrap;
}
.as-theme-clasico .be-flow-bar .btn:hover,
.as-theme-clasico .be-tpl-screen .btn:hover {
    background: var(--btn-light-bg-hover);
    border-color: var(--label-tertiary);
}
.as-theme-clasico .be-flow-bar .btn--primary,
.as-theme-clasico .be-tpl-screen .btn--primary {
    background: var(--btn-primary-bg);
    color: var(--label-on-accent);
    border-color: var(--accent-pressed);
}
.as-theme-clasico .be-flow-bar .btn--primary:hover,
.as-theme-clasico .be-tpl-screen .btn--primary:hover {
    background: var(--btn-primary-bg-hover);
    border-color: var(--accent-pressed);
}
/* Estado clean (Guardar sin cambios pendientes): gris real sin hover. */
.as-theme-clasico .be-flow-bar .btn--primary.is-clean,
.as-theme-clasico .be-flow-bar .btn--primary.is-clean:hover,
.as-theme-clasico .be-flow-bar .btn--primary.is-clean:focus,
.as-theme-clasico .be-flow-bar .btn--primary.is-clean:active {
    background: var(--fill-2);
    color: var(--label-tertiary);
    border-color: var(--border);
    cursor: default;
}
/* Estado saving: bloquea click sin cambiar dimensiones. */
.as-theme-clasico .be-flow-bar .btn--primary.is-saving {
    pointer-events: none;
    opacity: 0.7;
}
/* Botones icon-only. */
.as-theme-clasico .be-flow-bar .btn.btn--icon,
.as-theme-clasico .be-tpl-screen .btn.btn--icon {
    width: 28px;
    padding: 0;
}

/* Segmented control (doc-type switcher: Recepción Cliente / Local / Comprobante). */
.as-theme-clasico .be-segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--fill-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    gap: 2px;
    margin-right: 8px;
}
.as-theme-clasico .be-seg-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-seg-opt:hover { color: var(--label-primary); }
.as-theme-clasico .be-seg-opt.is-active {
    background: var(--card-bg);
    color: var(--label-primary);
    box-shadow: var(--shadow-1);
    font-weight: 600;
}

/* ---------- 27c. Stage (side-panel + canvas-area) ---------- */
.as-theme-clasico .be-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.as-theme-clasico .be-side-panel {
    width: 0;
    flex-shrink: 0;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width var(--dur-mid) var(--ease);
    display: flex;
    flex-direction: column;
}
.as-theme-clasico .be-stage[data-be-panel="open"] .be-side-panel {
    width: 320px;
}
.as-theme-clasico .be-side-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3);
    box-sizing: border-box;
}
.as-theme-clasico .be-side-panel__body::-webkit-scrollbar { width: 6px; }
.as-theme-clasico .be-side-panel__body::-webkit-scrollbar-thumb {
    background: var(--label-tertiary);
    border-radius: 3px;
}
/* El popover dentro del side-panel se vuelve estático (no flota) — usa el body
   normal. Specificity (0,4,0) alcanza para neutralizar los position/box-shadow
   inline o de §27f sin `!important`. */
.as-theme-clasico .be-side-panel__body > .be-popover {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    box-sizing: border-box;
    /* En modo side-panel el scroll lo gestiona `.be-side-panel__body` (panel
       padre). Si dejamos el max-height + overflow:hidden del popover standalone
       + overflow-y:auto del popover-body, aparece un scrollbar fantasma cuando
       el popover quedó más alto que el panel pero el panel todavía tenía aire. */
    max-height: none;
    overflow: visible;
}
.as-theme-clasico .be-side-panel__body > .be-popover .be-popover-body {
    overflow: visible;
    flex: 0 0 auto;
}

/* Canvas area (scroll wrapper centrado, fondo con leves halos accent). */
.as-theme-clasico .be-canvas-area {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: var(--space-4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 40%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent) 3%, transparent), transparent 40%),
        var(--bg-secondary);
}
.as-theme-clasico .be-canvas-area::-webkit-scrollbar { width: 8px; height: 8px; }
.as-theme-clasico .be-canvas-area::-webkit-scrollbar-thumb {
    background: var(--label-tertiary);
    border-radius: 3px;
}

/* ---------- 27d. Paper (hoja A4 fija) ---------- */
/* Hoja A4 1:1 con print: width/height fijos en cm absolutos, overflow:hidden
   recorta lo que excede. `min/max-W/H = W/H` para que ningún ancestor
   flex/grid pueda comprimir el paper. La escala visual la maneja
   `fitPaperToCanvas` (transform: scale). Fondo blanco fijo independiente del
   theme — el paper representa la hoja física. */
.as-theme-clasico .be-paper {
    position: relative;
    width: var(--be-paper-w, 21cm);
    height: var(--be-paper-h, 29.7cm);
    min-width: var(--be-paper-w, 21cm);
    min-height: var(--be-paper-h, 29.7cm);
    max-width: var(--be-paper-w, 21cm);
    max-height: var(--be-paper-h, 29.7cm);
    padding: var(--be-page-margin, 8mm);
    box-sizing: border-box;
    overflow: hidden;
    background: rgb(255, 255, 255);
    color: rgb(28, 28, 30);
    border-radius: var(--r-md);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    font-size: 12px;
    line-height: 1.45;
    flex-shrink: 0;
    flex-grow: 0;
    align-self: flex-start;
}
.dark .as-theme-clasico .be-paper {
    background: rgb(247, 247, 249);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ---------- 27e. Canvas WYSIWYG (selection rings variant-B, all-blue) ---------- */
/* Receipt sheet wrapper (sibling: .receipt-sheet o .comprobante-sheet). */
.as-theme-clasico #be-paper > [class$="-sheet"] { position: relative; }
.as-theme-clasico #be-paper [data-section-id] { position: relative; }

/* L1 — Section (outermost, ring más grande). Hover/selected con :has()
   exclusion (no se ilumina si el mouse está sobre un hijo). */
.as-theme-clasico #be-paper .receipt[data-section-id],
.as-theme-clasico #be-paper .comprobante[data-section-id] { position: relative; }
.as-theme-clasico #be-paper .receipt[data-section-id]:hover:not(:has(.be-container[data-block-id]:hover)),
.as-theme-clasico #be-paper .comprobante[data-section-id]:hover:not(:has(.be-container[data-block-id]:hover)) {
    outline: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.as-theme-clasico #be-paper .receipt[data-section-id].is-editing,
.as-theme-clasico #be-paper .comprobante[data-section-id].is-editing {
    outline: 1.5px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico #be-paper .receipt[data-section-id].is-editing::before,
.as-theme-clasico #be-paper .comprobante[data-section-id].is-editing::before {
    content: 'Sección';
    position: absolute;
    top: -12px;
    left: 8px;
    padding: 1px 8px;
    background: var(--card-bg);
    color: var(--accent);
    border: 1px solid var(--accent-bg-soft);
    border-radius: 999px;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 12;
    pointer-events: none;
}

/* L2 — Container, ring intermedio. */
.as-theme-clasico #be-paper .be-container[data-block-id] { position: relative; }
.as-theme-clasico #be-paper .be-container[data-block-id]:hover:not(:has(.be-container-cell:hover)) {
    outline: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    outline-offset: 1px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.as-theme-clasico #be-paper .be-container[data-block-id].is-selected {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico #be-paper .be-container[data-block-id].is-selected::before {
    content: 'Contenedor';
    position: absolute;
    top: -10px;
    left: 6px;
    padding: 1px 7px;
    background: var(--card-bg);
    color: var(--accent);
    border: 1px solid var(--accent-bg-soft);
    border-radius: 999px;
    font-size: var(--fs-micro2);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 11;
    pointer-events: none;
}
.as-theme-clasico #be-paper .be-container[data-block-id].is-hidden-block { opacity: 0.35; }

/* L3 — Cell (innermost, ring tight, sin offset). */
.as-theme-clasico #be-paper .be-container-cell {
    position: relative;
    min-height: 0;
    transition: outline-color var(--dur-fast);
}
.as-theme-clasico #be-paper .be-container-cell.is-empty {
    min-height: 32px;
    outline: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    outline-offset: -1px;
    background: color-mix(in srgb, var(--accent) 3%, transparent);
    border-radius: var(--r-md);
}
.as-theme-clasico #be-paper .be-container-cell.is-empty:hover {
    outline-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.as-theme-clasico #be-paper .be-container-cell.has-content:hover {
    outline: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    outline-offset: 0;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.as-theme-clasico #be-paper .be-container-cell.is-selected {
    outline: 1px solid var(--accent);
    outline-offset: 0;
    border-radius: var(--r-md);
    box-shadow: 0 0 0 1px var(--accent-bg-soft);
}
.as-theme-clasico #be-paper .be-container-cell.is-selected::before {
    content: 'Celda';
    position: absolute;
    top: -10px;
    right: 4px;
    padding: 1px 6px;
    background: var(--card-bg);
    color: var(--accent);
    border: 1px solid var(--accent-bg-soft);
    border-radius: 999px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 11;
    pointer-events: none;
}

/* Cell action buttons: add (+) en empty, clear (✕) en con contenido,
   col-delete (✕) en empty contigua. */
.as-theme-clasico .be-container-cell__add {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--accent) 60%, transparent);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border-radius: inherit;
    z-index: 5;
}
.as-theme-clasico .be-container-cell__add:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.as-theme-clasico .be-container-cell__clear,
.as-theme-clasico .be-container-cell__col-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    color: var(--label-tertiary);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 9px;
    cursor: pointer;
    z-index: 6;
}
.as-theme-clasico .be-container-cell__col-delete { z-index: 7; }
.as-theme-clasico #be-paper .be-container-cell:hover .be-container-cell__clear,
.as-theme-clasico #be-paper .be-container-cell.is-empty:hover .be-container-cell__col-delete {
    display: inline-flex;
}
.as-theme-clasico .be-container-cell__clear:hover,
.as-theme-clasico .be-container-cell__col-delete:hover {
    color: var(--system-red);
    border-color: var(--system-red);
}
.as-theme-clasico .be-container-cell__placeholder {
    display: inline-block;
    min-height: 12px;
}

/* Insert-lines (section/container/row): zero-height absolute zones, hit
   region de 6px alrededor. La línea y el botón son absolute. */
.as-theme-clasico .be-insert-line.be-insert-section,
.as-theme-clasico .be-insert-line.be-insert-container,
.as-theme-clasico .be-insert-line.be-insert-row {
    position: relative;
    display: block;
    height: 0;
    margin: 0;
    overflow: visible;
    z-index: 8;
}
.as-theme-clasico .be-insert-line.be-insert-section::before,
.as-theme-clasico .be-insert-line.be-insert-container::before,
.as-theme-clasico .be-insert-line.be-insert-row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 6px;
    z-index: -1;
}
.as-theme-clasico .be-insert-line.be-insert-section .be-insert-rule,
.as-theme-clasico .be-insert-line.be-insert-container .be-insert-rule,
.as-theme-clasico .be-insert-line.be-insert-row .be-insert-rule {
    position: absolute;
    left: 12px;
    right: 12px;
    top: -1px;
    height: 2px;
    flex: none;
}
.as-theme-clasico .be-insert-line.be-insert-section .be-insert-btn,
.as-theme-clasico .be-insert-line.be-insert-container .be-insert-btn,
.as-theme-clasico .be-insert-line.be-insert-row .be-insert-btn {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

/* Insert-line base (legacy + flow general). */
.as-theme-clasico .be-insert-line {
    position: relative;
    height: 4px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
    cursor: pointer;
}
.as-theme-clasico .be-insert-line:hover,
.as-theme-clasico .be-insert-line.is-active { opacity: 1; }
.as-theme-clasico .be-insert-rule {
    flex: 1;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}
.as-theme-clasico .be-insert-btn {
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--accent);
    color: var(--label-on-accent);
    border: none;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-2);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-insert-btn:hover { transform: scale(1.1); }

/* Row-cols chip (segmented inline para elegir cantidad de columnas). */
.as-theme-clasico .be-row-cols-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-2);
    font-family: inherit;
    font-size: var(--fs-body);
}
.as-theme-clasico .be-row-cols-chip__label {
    color: var(--label-secondary);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.as-theme-clasico .be-row-cols-chip__btn {
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fill-1);
    color: var(--label-primary);
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-row-cols-chip__btn + .be-row-cols-chip__btn { margin-left: 2px; }
.as-theme-clasico .be-row-cols-chip__btn:hover {
    background: var(--accent-bg-soft);
    color: var(--accent);
}
.as-theme-clasico .be-row-cols-chip__btn:active {
    background: var(--accent);
    color: var(--label-on-accent);
    transform: scale(0.95);
}

/* Inline edit (líneas editables inline en el canvas — header). */
.as-theme-clasico .be-inline-edit {
    outline: none;
    cursor: text;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-inline-edit:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.as-theme-clasico .be-inline-edit:focus {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Resize handle (bottom de container seleccionado). */
.as-theme-clasico .be-resize-handle {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 4px;
    background: var(--label-tertiary);
    border-radius: 2px;
    cursor: ns-resize;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
    z-index: 9;
}
.as-theme-clasico #be-paper .be-container[data-block-id]:hover .be-resize-handle,
.as-theme-clasico #be-paper .be-container[data-block-id].is-selected .be-resize-handle {
    opacity: 1;
}

/* Tag del contenedor — afordance clickeable que aparece sobre el borde
   top-left del .be-container al hacer hover. Sin esto la única vía para
   abrir el popover del contenedor era clickear el padding/borde directo,
   inalcanzable cuando las cells lo llenan sin gap. */
.as-theme-clasico .be-container-tag {
    position: absolute;
    top: -11px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--card-bg);
    color: var(--accent);
    border: 1px solid var(--accent-bg-soft);
    border-radius: 999px;
    font-size: var(--fs-micro2);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    z-index: 11;
}
.as-theme-clasico .be-container-tag i { font-size: 9px; }
.as-theme-clasico #be-paper .be-container[data-block-id]:hover > .be-container-tag,
.as-theme-clasico #be-paper .be-container[data-block-id].is-selected > .be-container-tag,
.as-theme-clasico #be-paper .be-container[data-block-id].is-editing > .be-container-tag {
    opacity: 1;
}
.as-theme-clasico .be-container-tag:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
    border-color: var(--accent);
}
/* Suprime el pseudo-pill "Contenedor" cuando ya está el tag real (sino se
   superponen en la misma esquina al estar seleccionado). */
.as-theme-clasico #be-paper .be-container[data-block-id].is-selected::before { content: none; }

/* ---------- 27f. Popover (block properties) ---------- */
.as-theme-clasico .be-popover {
    position: absolute;
    width: 320px;
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    z-index: 60;
    overflow: hidden;
    animation: bePopoverIn var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-popover-header,
.as-theme-clasico .be-popover-tabs { flex-shrink: 0; }
.as-theme-clasico .be-popover-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    min-width: 0;
    background: var(--card-header-bg);
}
.as-theme-clasico .be-popover-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--r-md);
    background: var(--accent-bg-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.as-theme-clasico .be-popover-titles { flex: 1; min-width: 0; }
.as-theme-clasico .be-popover-title {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--label-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-theme-clasico .be-popover-sub {
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-theme-clasico .be-popover-close {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--label-secondary);
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
    flex-shrink: 0;
}
.as-theme-clasico .be-popover-close:hover {
    background: var(--fill-1);
    color: var(--label-primary);
}
.as-theme-clasico .be-popover-tabs {
    display: flex;
    padding: 0 12px;
    gap: 2px;
    border-bottom: 1px solid var(--border);
}
.as-theme-clasico .be-popover-tab {
    flex: 1;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-popover-tab:hover { color: var(--label-primary); }
.as-theme-clasico .be-popover-tab.is-active {
    color: var(--accent);
    border-color: var(--accent);
}
.as-theme-clasico .be-popover-body {
    flex: 1;
    min-height: 0;
    padding: 8px 14px 12px;
    overflow-y: auto;
    overflow-x: hidden;
}
.as-theme-clasico .be-popover-body::-webkit-scrollbar { width: 6px; }
.as-theme-clasico .be-popover-body::-webkit-scrollbar-thumb {
    background: var(--label-tertiary);
    border-radius: 3px;
}

/* Footer del popover (separa el botón danger del cuerpo). */
.as-theme-clasico .be-popover-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.as-theme-clasico .be-popover-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--card-bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-popover-secondary-btn:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg-subtle));
    border-color: var(--accent);
    color: var(--accent);
}
.as-theme-clasico .be-popover-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--system-red-soft);
    border: 1px solid color-mix(in srgb, var(--system-red) 30%, transparent);
    border-radius: var(--r-sm);
    color: var(--system-red);
    font-size: var(--fs-callout);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-popover-danger-btn:hover {
    background: var(--system-red);
    border-color: var(--system-red);
    color: var(--label-on-accent);
}

/* Field group (HIG iOS-style rows dentro del popover). */
.as-theme-clasico .be-field-group {
    margin: 0 0 10px;
    background: var(--card-bg-subtle);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}
.as-theme-clasico .be-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    min-height: 36px;
    border-bottom: 1px solid var(--separator);
}
.as-theme-clasico .be-field-row:last-child { border-bottom: none; }
.as-theme-clasico .be-field-label {
    font-size: var(--fs-callout);
    color: var(--label-secondary);
    flex-shrink: 0;
}
.as-theme-clasico .be-field-input {
    height: 24px;
    padding: 0 8px;
    font-size: var(--fs-callout);
    font-family: inherit;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--label-primary);
    text-align: right;
    width: 100%;
    max-width: 160px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-field-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .be-field-input--num {
    max-width: 80px;
    text-align: center;
}

/* iOS-style toggle (popover variant — replaces `.be-toggle-switch`). */
.as-theme-clasico .be-toggle-ios {
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--fill-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-toggle-ios::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background: var(--card-bg);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-toggle-ios.is-on {
    background: var(--accent);
    border-color: var(--accent-pressed);
}
.as-theme-clasico .be-toggle-ios.is-on::after { transform: translateX(16px); }

/* Stepper (replaces `.be-font-controls` — dec / val / inc cluster). */
.as-theme-clasico .be-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    flex-shrink: 0;
}
.as-theme-clasico .be-stepper-btn {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--label-secondary);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-stepper-btn:hover {
    background: var(--fill-1);
    color: var(--label-primary);
}
.as-theme-clasico .be-stepper-val {
    min-width: 36px;
    width: 44px;
    padding: 0 4px;
    text-align: center;
    font-size: var(--fs-callout);
    font-weight: 500;
    color: var(--label-primary);
    font-variant-numeric: tabular-nums;
    /* Input editable (antes era span). Sin estos resets el browser pone borde,
       bg y outline propios y se ve fuera del stepper. */
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    line-height: 24px;
    -moz-appearance: textfield;
}
.as-theme-clasico .be-stepper-val::-webkit-outer-spin-button,
.as-theme-clasico .be-stepper-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.as-theme-clasico .be-stepper-val:focus { background: color-mix(in srgb, var(--accent) 8%, var(--input-bg)); }

/* ---------- 27g. Command palette (insert hidden block) ---------- */
.as-theme-clasico .be-cmd-palette {
    position: absolute;
    width: 340px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    z-index: 60;
    animation: bePopoverIn var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-cmd-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.as-theme-clasico .be-cmd-search i {
    color: var(--label-tertiary);
    font-size: 12px;
}
.as-theme-clasico .be-cmd-search input {
    flex: 1;
    height: 26px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--label-primary);
    font-size: var(--fs-body);
    font-family: inherit;
}
.as-theme-clasico .be-cmd-search input::placeholder {
    color: var(--label-tertiary);
}
.as-theme-clasico .be-cmd-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
.as-theme-clasico .be-cmd-list::-webkit-scrollbar { width: 6px; }
.as-theme-clasico .be-cmd-list::-webkit-scrollbar-thumb {
    background: var(--label-tertiary);
    border-radius: 3px;
}
.as-theme-clasico .be-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: var(--fs-callout);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-cmd-item:hover,
.as-theme-clasico .be-cmd-item.is-focused {
    background: var(--accent-bg-soft);
}
.as-theme-clasico .be-cmd-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    background: var(--fill-1);
    color: var(--label-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-cmd-item:hover .be-cmd-icon,
.as-theme-clasico .be-cmd-item.is-focused .be-cmd-icon {
    background: var(--accent);
    color: var(--label-on-accent);
}
.as-theme-clasico .be-cmd-main { flex: 1; min-width: 0; }
.as-theme-clasico .be-cmd-name {
    font-weight: 500;
    color: var(--label-primary);
    transition: color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-cmd-item:hover .be-cmd-name,
.as-theme-clasico .be-cmd-item.is-focused .be-cmd-name {
    color: var(--accent);
}
.as-theme-clasico .be-cmd-hint {
    font-size: var(--fs-micro);
    color: var(--label-tertiary);
}
.as-theme-clasico .be-cmd-kbd {
    padding: 1px 5px;
    background: var(--fill-1);
    color: var(--label-tertiary);
    border-radius: var(--r-sm);
    font-size: var(--fs-micro);
    font-family: inherit;
    font-weight: 500;
}
.as-theme-clasico .be-cmd-empty {
    padding: 16px;
    text-align: center;
    color: var(--label-tertiary);
    font-size: var(--fs-footnote);
}
.as-theme-clasico .be-cmd-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--border-soft);
    background: var(--card-bg-subtle);
    display: flex;
    gap: 12px;
    font-size: var(--fs-micro);
    color: var(--label-tertiary);
}
.as-theme-clasico .be-cmd-foot kbd {
    padding: 1px 5px;
    background: var(--card-bg);
    color: var(--label-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-micro);
    font-family: inherit;
    margin-right: 4px;
}

@keyframes bePopoverIn {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- 27h. Template screen (plantillas guardadas) ---------- */
.as-theme-clasico .be-tpl-screen {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: transparent;
    overflow: hidden;
}
.as-theme-clasico .be-tpl-screen-header {
    display: flex;
    align-items: center;
    column-gap: 6px;
    padding: 8px 10px;
    min-height: 48px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    flex-shrink: 0;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
}
.as-theme-clasico .be-tpl-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.as-theme-clasico .be-tpl-screen-title {
    margin: 0;
    font-size: var(--fs-title-2);
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--label-primary);
}
.as-theme-clasico .be-tpl-screen-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--space-4);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.as-theme-clasico .be-tpl-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.as-theme-clasico .be-tpl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.as-theme-clasico .be-tpl-section-title {
    margin: 0;
    font-size: var(--fs-headline);
    font-weight: 600;
    color: var(--label-primary);
}
.as-theme-clasico .be-tpl-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--label-tertiary);
    font-size: var(--fs-footnote);
    border: 1px dashed var(--border-soft);
    border-radius: var(--r-md);
}
.as-theme-clasico .be-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}
.as-theme-clasico .be-tpl-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: default;
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    display: flex;
    flex-direction: column;
}
.as-theme-clasico .be-tpl-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--label-tertiary);
}
.as-theme-clasico .be-tpl-card.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .be-tpl-thumb {
    height: 140px;
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    position: relative;
    overflow: hidden;
}
.as-theme-clasico .be-tpl-thumb__paper {
    width: 80%;
    height: 100%;
    background: var(--card-bg);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.as-theme-clasico .be-tpl-thumb__line {
    height: 4px;
    border-radius: 2px;
    background: var(--fill-2);
}
.as-theme-clasico .be-tpl-thumb__line--accent {
    background: var(--accent);
    width: 30%;
}
.as-theme-clasico .be-tpl-thumb__line--80 { width: 80%; }
.as-theme-clasico .be-tpl-thumb__line--60 { width: 60%; }
.as-theme-clasico .be-tpl-thumb__line--40 { width: 40%; }
.as-theme-clasico .be-tpl-thumb__block {
    height: 18px;
    border-radius: var(--r-sm);
    background: var(--fill-1);
}
.as-theme-clasico .be-tpl-meta {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.as-theme-clasico .be-tpl-name {
    font-size: var(--fs-headline);
    font-weight: 600;
    color: var(--label-primary);
}
.as-theme-clasico .be-tpl-desc {
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
}
.as-theme-clasico .be-tpl-foot {
    padding: 8px 14px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--border-soft);
    margin-top: auto;
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
}
.as-theme-clasico .be-tpl-foot-spacer { flex: 1; }
.as-theme-clasico .be-tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: var(--fill-1);
    border-radius: 10px;
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--label-secondary);
}
.as-theme-clasico .be-tpl-chip--active {
    background: var(--accent-bg-soft);
    color: var(--accent);
}

/* ---------- 27i. Sub-bloques de contenido del popover ---------- */
/* be-details: secciones colapsables (legacy del props panel; aún usado por
   headerPropsHTML/historyFieldsHTML dentro del popover body). */
.as-theme-clasico .be-details {
    border-top: 1px solid var(--border-soft);
    margin: 0 -14px;
    padding: 0 14px;
}
.as-theme-clasico .be-details:first-of-type { border-top: none; }
.as-theme-clasico .be-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: var(--fs-footnote);
    font-weight: 600;
    color: var(--label-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.as-theme-clasico .be-summary::-webkit-details-marker { display: none; }
.as-theme-clasico .be-summary::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
    font-weight: 900;
    font-size: 10px;
    margin-left: auto;
    color: var(--label-tertiary);
    transition: transform var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-details[open] > .be-summary::after {
    transform: rotate(180deg);
}
.as-theme-clasico .be-details-body {
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.as-theme-clasico .be-separator {
    border: none;
    border-top: 1px solid var(--border-soft);
    margin: 8px 0;
}

/* prop-row legacy. */
.as-theme-clasico .prop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: var(--fs-callout);
}
.as-theme-clasico .prop-row > span:first-child,
.as-theme-clasico .prop-label {
    font-size: var(--fs-callout);
    color: var(--label-primary);
    min-width: 96px;
}
.as-theme-clasico .prop-input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .prop-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .prop-input-num {
    flex: 0 1 64px;
    text-align: right;
}
.as-theme-clasico .prop-unit {
    font-size: var(--fs-micro);
    color: var(--label-tertiary);
    flex-shrink: 0;
}

/* Color input compacto. */
.as-theme-clasico .be-color-input {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px;
    background: var(--input-bg);
    cursor: pointer;
    flex-shrink: 0;
}
.as-theme-clasico .be-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.as-theme-clasico .be-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* Header text-rows (Dirección / Horarios — drag handle + label + fs + bold + remove). */
.as-theme-clasico .be-text-rows-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.as-theme-clasico .be-text-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--card-bg);
}
.as-theme-clasico .be-text-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.as-theme-clasico .be-text-drag {
    color: var(--label-tertiary);
    cursor: grab;
    width: 14px;
    flex-shrink: 0;
}
.as-theme-clasico .be-text-label,
.as-theme-clasico .be-text-value {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-text-label:focus,
.as-theme-clasico .be-text-value:focus {
    border-color: var(--accent);
}
.as-theme-clasico .be-text-value { width: 100%; }
.as-theme-clasico .be-text-fs {
    width: 48px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-primary);
    font-size: 11px;
    text-align: center;
    font-family: inherit;
    outline: none;
}
.as-theme-clasico .be-text-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.as-theme-clasico .be-text-bold-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-secondary);
    cursor: pointer;
    user-select: none;
    font-size: var(--fs-callout);
    font-weight: 700;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-text-bold-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.as-theme-clasico .be-text-bold-toggle:has(input:checked) {
    background: var(--accent-bg-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.as-theme-clasico .be-text-remove {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-tertiary);
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-text-remove:hover {
    color: var(--system-red);
    background: var(--system-red-soft);
    border-color: color-mix(in srgb, var(--system-red) 30%, transparent);
}
.as-theme-clasico .be-add-row-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-add-row-btn:hover {
    background: var(--accent-bg-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Logo card (logotipo principal + logotipo de política). */
.as-theme-clasico .be-logo-card { align-items: flex-start; }
.as-theme-clasico .be-logo-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.as-theme-clasico .be-logo-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--bg-secondary);
}
.as-theme-clasico .be-logo-thumb {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}
.as-theme-clasico .be-logo-fallback {
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
    font-style: italic;
}
.as-theme-clasico .be-logo-remove-btn {
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-secondary);
    font-size: var(--fs-callout);
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-logo-remove-btn:hover {
    color: var(--system-red);
    border-color: color-mix(in srgb, var(--system-red) 30%, transparent);
}
.as-theme-clasico .be-logo-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.as-theme-clasico .be-logo-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-logo-file-btn:hover {
    background: var(--fill-1);
    border-color: var(--accent);
}
.as-theme-clasico .be-logo-file-name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Field picker (client/product blocks: rows + add picker). */
.as-theme-clasico .be-field-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.as-theme-clasico .fp-rows-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.as-theme-clasico .fp-row-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    font-size: var(--fs-callout);
    cursor: grab;
}
.as-theme-clasico .fp-drag {
    color: var(--label-tertiary);
    width: 14px;
}
.as-theme-clasico .fp-row-label {
    flex: 1;
    color: var(--label-primary);
}
.as-theme-clasico .fp-row-remove {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--label-tertiary);
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .fp-row-remove:hover {
    color: var(--system-red);
    background: var(--system-red-soft);
}
.as-theme-clasico .fp-add-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.as-theme-clasico .fp-field-select,
.as-theme-clasico .fp-custom-input {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .fp-field-select {
    appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}
.as-theme-clasico .fp-custom-input:focus,
.as-theme-clasico .fp-field-select:focus {
    border-color: var(--accent);
}
.as-theme-clasico .fp-custom-add {
    display: flex;
    gap: 4px;
}
.as-theme-clasico .fp-custom-input { flex: 1; }
.as-theme-clasico .fp-custom-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--accent-pressed);
    border-radius: var(--r-sm);
    background: var(--btn-primary-bg);
    color: var(--label-on-accent);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .fp-custom-btn:hover {
    background: var(--btn-primary-bg-hover);
}

/* Custom block: textarea + delete. */
.as-theme-clasico .be-field-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
}
.as-theme-clasico .be-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    outline: none;
    resize: vertical;
    transition: border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-textarea:focus {
    border-color: var(--accent);
}
.as-theme-clasico .be-delete-btn {
    align-self: flex-start;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--system-red) 32%, transparent);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--system-red);
    font-size: var(--fs-callout);
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-delete-btn:hover {
    background: var(--system-red-soft);
}

/* Botones genéricos heredados dentro del details-body (.btn / .btn-secondary). */
.as-theme-clasico .be-details-body .btn,
.as-theme-clasico .be-details-body .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--btn-light-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-details-body .btn:hover {
    background: var(--btn-light-bg-hover);
}

/* Font controls (dec / value / inc cluster — legacy de props panel). */
.as-theme-clasico .be-font-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.as-theme-clasico .be-font-btn {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-secondary);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .be-font-btn:hover {
    background: var(--fill-1);
    color: var(--accent);
    border-color: var(--accent);
}
.as-theme-clasico .be-font-value {
    font-size: var(--fs-footnote);
    font-weight: 600;
    color: var(--accent);
    min-width: 40px;
    text-align: center;
}

/* Global controls wrapper (legacy). */
.as-theme-clasico .be-global-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* be-toggle-switch (HIG legacy, sigue usado por algunos templates). */
.as-theme-clasico .be-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-left: auto;
}
.as-theme-clasico .be-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.as-theme-clasico .be-toggle-slider {
    width: 32px;
    height: 18px;
    background: var(--fill-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    position: relative;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    flex-shrink: 0;
}
.as-theme-clasico .be-toggle-slider::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 14px;
    height: 14px;
    background: var(--card-bg);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.as-theme-clasico .be-toggle-switch input:checked + .be-toggle-slider {
    background: var(--accent);
    border-color: var(--accent-pressed);
}
.as-theme-clasico .be-toggle-switch input:checked + .be-toggle-slider::before {
    transform: translateX(14px);
}
.as-theme-clasico .be-toggle-status {
    font-size: var(--fs-callout);
    color: var(--label-tertiary);
    min-width: 56px;
}

/* be-select-sm dentro del editor. */
.as-theme-clasico .be-select-sm,
.as-theme-clasico select.hig-row__input {
    flex: 0 1 auto;
    min-width: 110px;
    padding: 5px 26px 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-primary);
    font-size: var(--fs-callout);
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    margin-left: auto;
}

/* ---------- 27j. Toast ---------- */

/* Toast (feedback de save). Sin scope `.as-theme-clasico` porque `showToast()`
   appendea a `document.body` — fuera del shell scope. Mismo criterio que §17
   TOASTS y §22-23 modales. Sólo light variant (criterio §17). Si modern y
   clásico se cargan en distintos requests, no chocan: una sola theme.css por
   request → no doble definición de .be-toast. */
.be-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 16px;
    background: rgba(28, 28, 30, 0.92);
    color: rgb(255, 255, 255);
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    animation: beToastFadeIn 200ms ease;
    transition: opacity 400ms ease;
}
.be-toast.out { opacity: 0; }
@keyframes beToastFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   28. ESTADOS (tab global)
   Markup en `modules/states/backend/tab-states.php` + filas
   generadas en `modules/states/frontend/assets/status-badge-list.js`.

   Estructura:
   - `#tab-estados > .app-content__body > .hig-page`
     - `.hig-client-header` (avatar + nombre + sub) — ya §11
     - `.eg-filters` (search input + row con date + select + clear)
     - `.hig-group.eg-list` con filas `.eg-order-row`
     - `.eg-loader` / `.eg-empty` (toggles vía `hidden`)

   El sidebar contextual de Estados se renderiza por theme.js (catálogo
   dinámico de `appServiceData.estados_config`) y usa `.app-nav-item`
   genérico (ya estilado en §6). Acá sólo el contenido del tab.
   ============================================================ */

/* — Filtros: search input + row de date/select/clear — */
.as-theme-clasico .eg-filters {
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.as-theme-clasico .eg-filters__search { position: relative; }
.as-theme-clasico .eg-filters__input {
    width: 100%;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 12px 0 30px;
    font-size: var(--fs-callout);
    font-family: inherit;
    background: var(--input-bg);
    color: var(--label-primary);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
    /* Lupita SVG inline. Color stroke en gris neutro para no atarse al
       theme — la lupa es decorativa y debe leerse parejo en light/dark. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 14px;
}
.as-theme-clasico .eg-filters__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg-soft);
}
.as-theme-clasico .eg-filters__input::placeholder {
    color: var(--label-tertiary);
}
.as-theme-clasico .eg-filters__row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
.as-theme-clasico .eg-filters__field {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
}
.as-theme-clasico .eg-filters__date,
.as-theme-clasico .eg-filters__select {
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 8px;
    font-size: var(--fs-footnote);
    font-family: inherit;
    background: var(--input-bg);
    color: var(--label-primary);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .eg-filters__date:focus,
.as-theme-clasico .eg-filters__select:focus {
    border-color: var(--accent);
}
.as-theme-clasico .eg-filters__select {
    padding-right: 22px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%23808080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    cursor: pointer;
}
.as-theme-clasico .eg-filters__clear {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--btn-light-bg);
    border-radius: var(--r-sm);
    color: var(--label-secondary);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .eg-filters__clear:hover {
    background: var(--accent-bg-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* — Filas de órdenes —
   Layout horizontal: #N° (mono accent) | info (cliente + equipo+sub) |
   fecha | botón abrir (icono flecha). Hover suave con --fill-1, click
   delega a `openOrderInTab` que el dtabs manager consume. */
.as-theme-clasico .eg-order-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px var(--space-4);
    border-bottom: 1px solid var(--separator);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.as-theme-clasico .eg-order-row:last-child { border-bottom: none; }
.as-theme-clasico .eg-order-row:hover { background: var(--fill-1); }
.as-theme-clasico .eg-order__num {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--accent);
    min-width: 48px;
    font-variant-numeric: tabular-nums;
}
.as-theme-clasico .eg-order__info { flex: 1; min-width: 0; }
.as-theme-clasico .eg-order__client {
    font-size: var(--fs-callout);
    font-weight: 500;
    color: var(--label-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-theme-clasico .eg-order__device {
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-theme-clasico .eg-order__date {
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.as-theme-clasico .eg-order__open {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--label-tertiary);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.as-theme-clasico .eg-order__open:hover {
    background: var(--accent-bg-soft);
    color: var(--accent);
}

/* — Estados vacíos / cargando — */
.as-theme-clasico .eg-empty,
.as-theme-clasico .eg-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    color: var(--label-tertiary);
    font-size: var(--fs-body);
}
.as-theme-clasico .eg-empty i {
    font-size: 28px;
    opacity: 0.4;
}
.as-theme-clasico .eg-loader i { font-size: 20px; }
.as-theme-clasico .eg-empty[hidden],
.as-theme-clasico .eg-loader[hidden] { display: none; }

/* ============================================================
   29. PLAZOS (tab global)
   Markup en `modules/timer/backend/tab-plazos.php`. Layout linear (sin
   subtabs ni sidebar): `#tab-plazos > .hig-page > .pz-toolbar +
   .pz-kpis-grid + .pz-chart-section + tabla`. Sidebar colapsado vía
   `[data-no-sidebar]` (§3). Toolbar/KPIs comparten lenguaje con
   Estadísticas (selectores duales .pz-* / .est-*).

   Sub-bloques:
   29b. KPIs grid (6 cells flat compactos, borders cross)
   29c. Chart section (header + segmented toggles + canvas)
   29d. Tabla live (header + thead/tbody + elapsed/remaining/aviso modifiers)

   Namespace `.pz-*` compartido con Personalize (§13) — convive porque
   markup vive en tabs distintas.
   ============================================================ */

/* ---------- 29b. KPI grid ---------- */
.as-theme-clasico .pz-kpis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
/* KPI cells flat compactos (mismo lenguaje que est-kpi-grid--ops):
   padding chico, value 18px, label 10px. El card lo aporta hig-group--flush. */
.as-theme-clasico .pz-kpi {
    padding: 10px 12px;
    border-right: 1px solid var(--separator);
    border-bottom: 1px solid var(--separator);
}
.as-theme-clasico .pz-kpi:nth-child(3n) { border-right: none; }
.as-theme-clasico .pz-kpi:nth-child(n+4) { border-bottom: none; }
.as-theme-clasico .pz-kpi__label {
    font-size: 10px;
    color: var(--label-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.as-theme-clasico .pz-kpi__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--label-primary);
    margin-top: 1px;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.as-theme-clasico .pz-kpi__value--danger { color: var(--system-red); }
.as-theme-clasico .pz-kpi__value--text {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}
.as-theme-clasico .pz-kpi__suffix {
    font-size: 11px;
    font-weight: 500;
    color: var(--label-tertiary);
}
.as-theme-clasico .pz-kpi__unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--label-secondary);
}
.as-theme-clasico .pz-kpi__sub {
    font-size: 10px;
    color: var(--label-tertiary);
    margin-top: 1px;
}

/* ---------- 29c. Chart section ---------- */
/* El panel ya aporta padding (hig-group--stack); el gap del stack separa
   header del canvas. */
.as-theme-clasico .pz-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.as-theme-clasico .pz-chart-title {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--label-primary);
}
/* Segmented control para alternar entre los 3 canvases. Mismo lenguaje que
   `.be-segmented` (§27b): fondo `--fill-1` + opciones con `is-active`
   blanca + shadow-1. */
.as-theme-clasico .pz-chart-toggles {
    display: inline-flex;
    background: var(--fill-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 2px;
    gap: 2px;
}
.as-theme-clasico .pz-chart-toggle {
    padding: 4px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-callout);
    font-weight: 500;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--label-secondary);
    font-family: inherit;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-chart-toggle:hover { color: var(--label-primary); }
.as-theme-clasico .pz-chart-toggle--active {
    background: var(--card-bg);
    color: var(--label-primary);
    box-shadow: var(--shadow-1);
    font-weight: 600;
}
.as-theme-clasico .pz-chart-canvas {
    position: relative;
    height: 220px;
}
.as-theme-clasico .pz-chart-canvas canvas {
    position: absolute;
    inset: 0;
}
/* Loading state: spinner overlay sobre los canvas mientras el fetch del histórico está en curso. */
.as-theme-clasico .pz-chart-canvas--loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card-bg);
    opacity: 0.65;
    z-index: 1;
}
.as-theme-clasico .pz-chart-canvas--loading::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: as-pz-spin 700ms linear infinite;
    z-index: 2;
}
@keyframes as-pz-spin { to { transform: rotate(360deg); } }

/* ---------- 29d. Tabla live ---------- */
.as-theme-clasico .pz-table-header {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--card-header-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.as-theme-clasico .pz-table-title {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--label-primary);
}
.as-theme-clasico .pz-table-count {
    font-size: var(--fs-footnote);
    color: var(--label-tertiary);
}
.as-theme-clasico .pz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-callout);
}
.as-theme-clasico .pz-table th {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-size: var(--fs-footnote);
    font-weight: 600;
    color: var(--label-tertiary);
    border-bottom: 1px solid var(--border);
    background: var(--card-header-bg);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.as-theme-clasico .pz-table td {
    padding: var(--space-2) var(--space-3);
    color: var(--label-primary);
    border-bottom: 1px solid var(--separator);
}
.as-theme-clasico .pz-table tr:last-child td { border-bottom: none; }
.as-theme-clasico .pz-table tr:hover td { background: var(--fill-1); }
.as-theme-clasico .pz-table__num { font-weight: 500; }
.as-theme-clasico .pz-table__estado,
.as-theme-clasico .pz-table__fase {
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
}
.as-theme-clasico .pz-elapsed,
.as-theme-clasico .pz-remaining {
    font-variant-numeric: tabular-nums;
    color: var(--label-primary);
}
.as-theme-clasico .pz-elapsed--danger,
.as-theme-clasico .pz-remaining--danger {
    color: var(--system-red);
    font-weight: 600;
}
.as-theme-clasico .pz-remaining--warning {
    color: var(--system-orange);
}
.as-theme-clasico .pz-elapsed--paused,
.as-theme-clasico .pz-remaining--paused,
.as-theme-clasico .pz-table__estado--paused,
.as-theme-clasico .pz-table__fase--paused {
    color: var(--label-tertiary);
}
.as-theme-clasico .pz-table__fase-icon { font-size: 9px; }
.as-theme-clasico .pz-aviso {
    font-size: var(--fs-footnote);
    color: var(--label-secondary);
}
.as-theme-clasico .pz-aviso--danger { color: var(--system-red); }
.as-theme-clasico .pz-aviso--warning { color: var(--system-orange); }
.as-theme-clasico .pz-aviso--paused { color: var(--label-tertiary); }
.as-theme-clasico .pz-table__debug-btn {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--label-secondary);
    font-size: var(--fs-footnote);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-table__debug-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.as-theme-clasico .pz-table__debug-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.as-theme-clasico .pz-table__empty {
    text-align: center;
    color: var(--label-tertiary);
    padding: var(--space-4) var(--space-3);
    font-size: var(--fs-footnote);
}

/* ---------- 29e. Toolbars del tab Plazos ---------- */
/* Toolbar superior del subtab Órdenes (Buscar/Filtros/Ordenar) + toolbar
   inferior del subtab Resumen (Periodo/Rango/Filtros, dentro del chart
   section). Antes los controles vivían en el sidebar contextual con
   clases .pz-sidebar-*. Markup en modules/timer/backend/tab-plazos.php;
   cableado en plazos-tab.js#wire{Ordenes,Resumen}Toolbar. */
/* Toolbar primitive cross-módulo (.pz-toolbar para Plazos, .est-toolbar para
   Estadísticas — selectores duales para evitar duplicación). Estilo flat:
   sin card, solo padding + border-bottom suave de separación. Alturas
   unificadas (28px en clásico, ligeramente más bajo que modern por tipo). */
.as-theme-clasico .pz-toolbar,
.as-theme-clasico .est-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) 0 var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--separator);
}
.as-theme-clasico .pz-toolbar__group,
.as-theme-clasico .est-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.as-theme-clasico .pz-toolbar__group--search { flex: 1 1 220px; position: relative; }
.as-theme-clasico .pz-toolbar__group--filters,
.as-theme-clasico .est-toolbar__group--filters { gap: 6px; }
.as-theme-clasico .est-toolbar__group--sublabel { margin-left: auto; }
.as-theme-clasico .pz-toolbar__label,
.as-theme-clasico .est-toolbar__label {
    font-size: var(--fs-callout); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--label-secondary); white-space: nowrap;
}
.as-theme-clasico .est-toolbar__sublabel {
    font-size: var(--fs-footnote); color: var(--label-tertiary); white-space: nowrap;
}
/* Altura unificada de los controles de la toolbar (inputs, dropdown trigger,
   apply) — 28px box, sin saltos al togglear Rango. El selector de periodo y
   Ordenar usan `.pz-tabs`/`.est-tabs` (tabs underline, sección aparte). */
.as-theme-clasico .pz-toolbar__input,
.as-theme-clasico .est-toolbar__input {
    appearance: none;
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--label-primary);
    font-family: inherit; font-size: var(--fs-footnote);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease);
}
.as-theme-clasico .pz-toolbar__input::placeholder,
.as-theme-clasico .est-toolbar__input::placeholder { color: var(--label-tertiary); }
.as-theme-clasico .pz-toolbar__input:focus,
.as-theme-clasico .est-toolbar__input:focus { border-color: var(--accent); }
.as-theme-clasico .pz-toolbar__input--search { padding-left: 28px; }
.as-theme-clasico .pz-toolbar__input--date,
.as-theme-clasico .est-toolbar__input--date {
    width: auto;
    min-width: 0;
}
.as-theme-clasico .pz-toolbar__icon {
    position: absolute;
    left: 9px; top: 50%;
    transform: translateY(-50%);
    color: var(--label-secondary);
    font-size: 11px;
    pointer-events: none;
}
.as-theme-clasico .pz-toolbar .app-toolbar__dropdown,
.as-theme-clasico .est-toolbar .app-toolbar__dropdown { position: relative; }
.as-theme-clasico .pz-toolbar .app-toolbar__btn-action,
.as-theme-clasico .est-toolbar .app-toolbar__btn-action {
    width: auto;
    max-width: 200px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px;
    gap: 6px;
    font-size: var(--fs-footnote);
}
/* El label del filtro seleccionado se trunca con ellipsis en el trigger
   (el dropdown muestra el texto completo). Solo afecta los selectores
   Téc/Pol de Plazos/Estadísticas (atributos data-*-filter-display). */
.as-theme-clasico .pz-toolbar [data-pz-filter-display],
.as-theme-clasico .est-toolbar [data-est-filter-display] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.as-theme-clasico .pz-toolbar__range-sep,
.as-theme-clasico .est-toolbar__range-sep { color: var(--label-secondary); font-size: var(--fs-footnote); }
.as-theme-clasico .pz-toolbar__apply,
.as-theme-clasico .est-toolbar__apply {
    height: 28px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-footnote);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease);
    white-space: nowrap;
}
.as-theme-clasico .pz-toolbar__apply:hover,
.as-theme-clasico .est-toolbar__apply:hover { filter: brightness(1.05); }
.as-theme-clasico .pz-toolbar__apply:disabled,
.as-theme-clasico .est-toolbar__apply:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: none;
}

/* Tabs underline para el selector de periodo (Estadísticas + Plazos —
   selectores duales para coherencia cross-tab). Sin container ni background;
   el activo lleva underline accent. Altura 28px matchea la toolbar. */
.as-theme-clasico .est-tabs,
.as-theme-clasico .pz-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    height: 28px;
}
.as-theme-clasico .est-tab,
.as-theme-clasico .pz-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--label-secondary);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 500;
    padding: 0 6px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease);
}
.as-theme-clasico .est-tab:hover,
.as-theme-clasico .pz-tab:hover { color: var(--label-primary); }
.as-theme-clasico .est-tab--active,
.as-theme-clasico .pz-tab--active {
    color: var(--accent);
    font-weight: 600;
}
.as-theme-clasico .est-tab--active::after,
.as-theme-clasico .pz-tab--active::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

/* ─────────────────────────────────────────────────────────────────
   View mode (controles disabled dentro de la dtab de orden)
   ─────────────────────────────────────────────────────────────────
   Chrome SUPRIME totalmente el click event sobre `<input disabled>`,
   `<select disabled>`, `<textarea disabled>` y `<button disabled>` —
   ni siquiera bubble-ea a ancestros. Sin `pointer-events: none`, el
   toast "No estás en modo edición. Tocá 'Editar' para modificar."
   (cableado en tabs.js#setupEventListeners) NUNCA dispara cuando el
   user clickea sobre un control disabled en los subtabs Conceptos,
   Cobros, o sobre las textareas/CTAs disabled de Equipo.
   Con pointer-events:none el click pasa al wrapper (.hig-row /
   .hig-section / .hig-cta-wrap / .hig-ps-header) y el fallback del
   listener detecta el control lockeado. Limitamos a `.order-tab-container`
   para no afectar otros tabs del plugin. */
.as-theme-clasico .order-tab-container input:disabled,
.as-theme-clasico .order-tab-container select:disabled,
.as-theme-clasico .order-tab-container textarea:disabled,
.as-theme-clasico .order-tab-container button:disabled {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADÍSTICAS — Tab global (est-*)
   El módulo statistics NO shipea CSS visual; todo vive acá.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header avatar: hereda el patrón del resto de avatars del tema
   (var(--accent-bg-soft) + var(--accent), definido en .hig-client-header__avatar).
   El gradient azul iOS del mockup queda solo en modern; en clásico desentona
   con el accent del tema. */

/* KPI Grid: el HTML usa `hig-group--flush` para anular el padding del
   card; las celdas (`.est-kpi-cell`) llevan su propio padding interno. */
.as-theme-clasico .est-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.as-theme-clasico .est-kpi-grid--ops {
    grid-template-columns: repeat(4, 1fr);
}
.as-theme-clasico .est-kpi-grid--ops .est-kpi-cell { padding: 10px 12px; }
.as-theme-clasico .est-kpi-grid--ops .est-kpi-label { font-size: 10px; }
.as-theme-clasico .est-kpi-grid--ops .est-kpi-value { font-size: 18px; margin-top: 1px; }

.as-theme-clasico .est-kpi-cell { padding: 16px; }
.as-theme-clasico .est-kpi-cell--br { border-right: 1px solid var(--separator); }
.as-theme-clasico .est-kpi-label {
    font-size: 11px; font-weight: 600; color: var(--label-tertiary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.as-theme-clasico .est-kpi-value {
    font-size: 28px; font-weight: 700; letter-spacing: -0.5px;
    color: var(--label-primary); margin-top: 2px;
    font-variant-numeric: tabular-nums; cursor: default;
}
.as-theme-clasico .est-kpi-tooltip {
    position: absolute; bottom: 100%; left: 0;
    background: var(--bg-primary); border: 1px solid var(--separator);
    border-radius: 6px; padding: 4px 8px;
    font-size: 12px; font-weight: 600; color: var(--label-primary);
    box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,0.08)); white-space: nowrap;
    z-index: 10; pointer-events: none;
}

/* Chart header: el panel ya aporta padding (hig-group--stack); el gap del
   stack separa header del canvas. Sin padding/border propios. */
.as-theme-clasico .est-chart-header {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.as-theme-clasico .est-chart-title {
    font-size: 13px; font-weight: 600; color: var(--label-primary);
}

/* Chart toggles — segmented control */
.as-theme-clasico .est-chart-toggles {
    display: inline-flex; align-items: center;
    background: var(--fill-1); border-radius: 6px; padding: 2px;
    flex-wrap: nowrap;
}
.as-theme-clasico .est-toggle-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 5px;
    font-size: 11px; font-weight: 500;
    color: var(--label-secondary);
    cursor: pointer; user-select: none;
    background: transparent;
    transition: background 150ms, color 150ms, box-shadow 150ms;
}
.as-theme-clasico .est-toggle-pill input { display: none; }
.as-theme-clasico .est-toggle-pill:has(input:checked) {
    background: var(--bg-primary);
    color: var(--label-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.as-theme-clasico .est-toggle-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    opacity: 0.4; transition: opacity 150ms;
}
.as-theme-clasico .est-toggle-pill:has(input:checked) .est-toggle-dot { opacity: 1; }
.as-theme-clasico .est-toggle-dot--recibidos { background: var(--accent); }
.as-theme-clasico .est-toggle-dot--reparados { background: var(--system-green, #1f7032); }

/* Chart wrap: el panel ya aporta padding (hig-group--stack); acá solo
   reservamos altura. Chart.js (responsive + maintainAspectRatio:false)
   dimensiona el canvas según el parent. */
.as-theme-clasico .est-chart-wrap {
    position: relative;
    width: 100%;
    height: 280px;
}
.as-theme-clasico .est-chart-wrap canvas { display: block; }

/* Chart tooltip externo */
.as-theme-clasico .est-tooltip {
    position: absolute; background: var(--bg-primary);
    border: 1px solid var(--separator); border-radius: 8px;
    padding: 8px 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-size: 12px; pointer-events: none; z-index: 20;
    transition: opacity 120ms; min-width: 160px;
}
.as-theme-clasico .est-tooltip-title {
    font-size: 11px; font-weight: 600; color: var(--label-secondary);
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px;
}
.as-theme-clasico .est-tooltip-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.as-theme-clasico .est-tooltip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.as-theme-clasico .est-tooltip-label { flex: 1; color: var(--label-secondary); font-size: 11px; }
.as-theme-clasico .est-tooltip-val {
    font-weight: 600; color: var(--label-primary); font-variant-numeric: tabular-nums;
}

/* Dashboard + Loader */
.as-theme-clasico .est-dashboard {
    display: flex; flex-direction: column; gap: 16px;
    opacity: 0; transition: opacity 300ms ease;
}
.as-theme-clasico .est-dashboard--visible { opacity: 1; }
.as-theme-clasico .est-loader {
    display: flex; align-items: center; gap: 8px;
    padding: 32px 16px; justify-content: center;
    font-size: 13px; color: var(--label-secondary);
}

/* Orders table header (la tabla está oculta por default; estilos quedan listos para re-habilitar) */
.as-theme-clasico .est-table-header {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.as-theme-clasico .est-table-filter { display: flex; align-items: center; gap: 8px; }
.as-theme-clasico .est-table-select {
    padding: 5px 24px 5px 8px;
    border: 1px solid var(--separator); border-radius: var(--r-sm, 6px);
    font-size: 12px; font-family: inherit;
    background: var(--bg-primary); color: var(--label-primary);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center;
    outline: none; transition: border-color 120ms;
}
.as-theme-clasico .est-table-select:focus { border-color: var(--accent); }
.as-theme-clasico .est-count {
    font-size: 11px; color: var(--label-tertiary);
    background: var(--fill-1); padding: 2px 8px;
    border-radius: 10px; font-weight: 600;
}
.as-theme-clasico .est-table-wrap { overflow-x: auto; }
.as-theme-clasico .est-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.as-theme-clasico .est-table th {
    text-align: left; padding: 8px 10px;
    font-size: 11px; font-weight: 600; color: var(--label-secondary);
    text-transform: uppercase; letter-spacing: 0.03em;
    border-bottom: 2px solid var(--separator);
}
.as-theme-clasico .est-table th.est-th-right { text-align: right; }
.as-theme-clasico .est-table td {
    padding: 10px; border-bottom: 1px solid var(--separator);
    color: var(--label-primary); vertical-align: top;
}
.as-theme-clasico .est-table tbody tr { transition: background 120ms; }
.as-theme-clasico .est-table tbody tr:hover { background: var(--fill-1); }
.as-theme-clasico .est-table tbody tr:last-child td { border-bottom: none; }
.as-theme-clasico .est-td-link {
    font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap;
}
.as-theme-clasico .est-td-link:hover { text-decoration: underline; }
.as-theme-clasico .est-td-truncate {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.as-theme-clasico .est-td-desc {
    max-width: 280px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--label-secondary); font-size: 12px;
}
.as-theme-clasico .est-td-desc--clickable { cursor: pointer; }
.as-theme-clasico .est-td-desc--expanded { white-space: normal; }
.as-theme-clasico .est-td-number,
.as-theme-clasico .est-td-right { text-align: right; font-variant-numeric: tabular-nums; }
@keyframes stats-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.as-theme-clasico .est-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 32px 16px;
    color: var(--label-tertiary); font-size: 13px;
}
.as-theme-clasico .est-empty i { font-size: 24px; }
.as-theme-clasico .est-load-more { display: flex; justify-content: center; padding: 12px; }
.as-theme-clasico .est-load-more-btn {
    padding: 7px 20px; border: 1px solid var(--separator); border-radius: var(--r-sm, 6px);
    font-size: 12px; font-weight: 500; font-family: inherit;
    color: var(--accent); background: var(--bg-primary);
    cursor: pointer; transition: background 150ms;
}
.as-theme-clasico .est-load-more-btn:hover { background: var(--fill-1); }
.as-theme-clasico .est-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Sidebar Estadísticas legacy (range/filters/export) eliminado 2026-05-18:
   los controles viven en `.est-toolbar` inline; el sidebar contextual
   colapsa en este tab vía `[data-no-sidebar]` (ver §3 LAYOUT). */

/* ============================================================
   23. RESPONSIVE — PHONE (≤600px)
   Clásico solo tiene variant=horizontal (inspector deshabilitado).
   - Grid colapsa a 1 columna; rows en orden topbar/sidebar/toolbar/
     dtabs/subtabs/content.
   - Drawer sale del grid → overlay position:fixed con backdrop.
     theme.js fuerza data-drawer="collapsed" en boot si phone y no
     hay valor persistido (sino arranca tapando la pantalla).
   - Sidebar (tabs no-órdenes) → fila horizontal scroll-x.
   - Sidebar (órdenes) → display:none (vacío en variant horizontal).
   - Inspector → display:none (deshabilitado por variant).
   - Topbar wrap a 2 filas: chrome arriba, order-input full-width
     abajo. Search/Nueva/wifi/dark ocultos.
   - Toolbar / dtabs / subtabs: overflow-x:auto.
   ============================================================ */
@media (max-width: 600px) {
    .as-theme-clasico .app-container,
    .as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]),
    .as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"],
    .as-theme-clasico .app-container[data-orders-variant="horizontal"][data-active-tab="ordenes"][data-drawer="collapsed"],
    .as-theme-clasico .app-container[data-drawer="collapsed"],
    .as-theme-clasico .app-container[data-drawer="collapsed"][data-active-tab]:not([data-active-tab="ordenes"]) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto 1fr;
        grid-template-areas:
            "topbar"
            "sidebar"
            "toolbar"
            "dtabs"
            "subtabs"
            "content";
    }

    /* Drawer overlay */
    .as-theme-clasico .app-drawer {
        grid-area: unset;
        position: fixed;
        top: calc(var(--wp-admin-bar-height, 0px) + 44px);
        left: 0;
        bottom: 0;
        width: 240px;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform var(--dur-mid) var(--ease);
        border-right: 1px solid var(--border);
    }
    .as-theme-clasico .app-container[data-drawer="expanded"] .app-drawer {
        transform: translateX(0);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    }
    .as-theme-clasico .app-container[data-drawer="expanded"]::before {
        content: '';
        position: fixed;
        top: calc(var(--wp-admin-bar-height, 0px) + 44px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 49;
    }
    /* Item del drawer en mobile: fila horizontal (icono + label al lado) */
    .as-theme-clasico .app-drawer__item {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-2);
        height: 40px;
        padding: 4px var(--space-2);
    }
    .as-theme-clasico .app-drawer__item span {
        text-align: left;
        font-size: var(--fs-body);
    }

    /* Inspector siempre oculto (clásico no lo usa) */
    .as-theme-clasico .app-inspector { display: none; }

    /* Sidebar: oculta en órdenes (vacía en variant horizontal),
       horizontal scroll en el resto. */
    .as-theme-clasico .app-container[data-active-tab="ordenes"] .app-sidebar {
        display: none;
    }
    .as-theme-clasico .app-container:not([data-active-tab="ordenes"]) .app-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .as-theme-clasico .app-container:not([data-active-tab="ordenes"]) .app-sidebar__nav {
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--space-1);
    }
    .as-theme-clasico .app-container:not([data-active-tab="ordenes"]) .app-sidebar-section.active {
        display: flex;
        gap: var(--space-1);
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .as-theme-clasico .app-container:not([data-active-tab="ordenes"]) .app-group {
        display: flex;
        gap: var(--space-1);
        margin-bottom: 0;
    }
    .as-theme-clasico .app-container:not([data-active-tab="ordenes"]) .app-group__heading {
        display: none;
    }
    .as-theme-clasico .app-container:not([data-active-tab="ordenes"]) .app-nav-item {
        width: auto;
        flex-shrink: 0;
    }

    /* Topbar: fila 1 = ☰ + brand + spacer + Nueva + user-menu.
       Fila 2 = order-input full. Fila 3 = search-group full.
       Ocultos: separadores, wifi, dark (chrome no esencial). */
    .as-theme-clasico .app-topbar {
        flex-wrap: wrap;
        padding: var(--space-1) var(--space-2);
        row-gap: var(--space-1);
    }
    .as-theme-clasico .app-topbar__sep,
    .as-theme-clasico .app-topbar__btn--connection,
    .as-theme-clasico .app-topbar__btn--dark {
        display: none;
    }
    .as-theme-clasico .app-topbar__order-group {
        flex-basis: 100%;
        order: 99;
    }
    .as-theme-clasico .app-toolbar__order-input {
        width: 100%;
    }
    .as-theme-clasico .app-topbar__search-group {
        flex-basis: 100%;
        max-width: none;
        order: 100;
    }
    /* Botón Nueva: queda en fila 1 pegado al user-menu, sin texto largo. */
    .as-theme-clasico .app-topbar__btn-nueva {
        order: 50;
        padding: 0 var(--space-2);
    }

    /* Toolbar: 1 fila con scroll-x. Spacer:0 + flex-shrink:0 + nowrap
       para que los items NO se compriman ni se trunquen ("1 día",
       "Recepción: may"). Los dropdowns que se abren hacia abajo serían
       recortados por overflow-x:auto del toolbar — para escapar de eso
       theme.js los reposiciona como position:fixed al abrirse en phone
       (ver `wireToolbarDropdownFixed` en theme.js). */
    .as-theme-clasico .app-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
    }
    .as-theme-clasico .app-toolbar__spacer { flex: 0; display: none; }
    .as-theme-clasico .app-toolbar__btn,
    .as-theme-clasico .app-toolbar__btn-action,
    .as-theme-clasico .app-toolbar__dropdown,
    .as-theme-clasico .app-toolbar__sep {
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* Dtabs / subtabs: sin dropdowns, scroll-x natural. */
    .as-theme-clasico .app-dtabs,
    .as-theme-clasico .app-subtabs {
        overflow-x: auto;
        overflow-y: hidden;
    }
    /* En tabs no-órdenes, toolbar/dtabs/subtabs no se muestran */
    .as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]) .app-toolbar,
    .as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]) .app-dtabs,
    .as-theme-clasico .app-container[data-active-tab]:not([data-active-tab="ordenes"]) .app-subtabs {
        display: none;
    }

    /* Content: padding lateral reducido para ganar ancho a los cards */
    .as-theme-clasico .app-content {
        padding: var(--space-2) var(--space-2);
    }

    /* Subtab Cliente: colapsa el split exterior 2-col a 1 col. El override
       interno del .hig-group--side-by-side (§9 L1271+) ya convierte el grid
       interno a flex column con orders correctos — sigue aplicando en phone. */
    .as-theme-clasico .app-subtab-content[data-subtab="cliente"] {
        grid-template-columns: 1fr;
    }
}