/* ===========================================================
   Abatech DMS — layout + sistema de temas
   Todo el "chrome" se maneja con variables; cada tema las redefine.
   =========================================================== */

/* ── Tema Predeterminado (base) ───────────────────────────── */
:root {
    --dms-sidebar-w:           240px;
    --dms-sidebar-collapsed-w: 64px;
}

:root { --dms-esquema: light; --dms-hover-mix: 12%; }   /* respaldo si un tema no lo declara */

/* ═══ TAMAÑOS Y FORMA — tokens con default ════════════════════════════════════
   Hasta Grafito el TAMAÑO de las cosas no era parte del tema: el padding del contenido, el alto
   de una fila o el cuerpo del encabezado de tabla estaban escritos en cada regla, y un tema sólo
   podía cambiar colores. Por eso "todo se ve grande" no tenía arreglo sin tocar a los seis.
   Ahora son tokens. Los valores de acá son EXACTAMENTE los de antes, así que los temas que no los
   declaran se ven igual que siempre; el que quiere otra densidad (Grafito) declara los suyos.
   Van arriba de todo por lo mismo que los semánticos: `:root` y `[data-theme]` empatan en
   especificidad y gana el que está más abajo. */
:root {
    --dms-content-pad:    22px;            /* aire alrededor de cada pantalla */
    --dms-topbar-py:      10px;
    --dms-brand-pad:      16px;
    --dms-nav-py:         10px;            /* alto de un ítem del menú */
    --dms-nav-fs:         .92rem;
    --dms-sub-py:         8px;
    --dms-sub-fs:         .88rem;
    --dms-nav-indicator:  transparent;     /* la raya del ítem activo; los temas viejos no la tienen */
    --dms-page-title-fs:  calc(1.275rem + .3vw);   /* el <h1 class="h4"> de cada pantalla, como Bootstrap */
    --dms-page-title-weight: 500;
    /* Íconos del menú: el tema elige entre el emoji de cada module.php y el ícono de línea
       (Ui::icono imprime los dos). Son valores de `display`, así que alcanza con un token. */
    --dms-ico-emoji:      inline;
    --dms-ico-linea:      none;
    --dms-title-fs:       1.15rem;
    --dms-tabla-fs:       .8rem;
    --dms-tabla-densa-fs: .72rem;
    --dms-cell-py:        .25rem;          /* .table-sm de Bootstrap */
    --dms-cell-px:        .25rem;
    --dms-table-py:       .5rem;           /* .table a secas de Bootstrap */
    --dms-table-px:       .5rem;
    --dms-th-bg:          var(--dms-bg);            /* el encabezado fijo de las tablas con scroll */
    --dms-th-light-bg:    var(--dms-surface-2);     /* el <thead class="table-light"> */
    --dms-th-color:       var(--dms-text);
    --dms-th-fs:          1em;
    --dms-th-weight:      bold;
    --dms-th-transform:   none;
    --dms-th-spacing:     normal;
    --dms-chip-radius:    999px;
    /* El punto de color adelante de un chip de estado ("• En stock"). Valor de `display`. */
    --dms-chip-dot:       none;
    /* Fuente de títulos y cifras grandes. Por defecto, la misma del texto: sólo un tema que quiere
       dos voces (Stitch: Plus Jakarta para títulos, Inter para datos) la declara. */
    --dms-font-display:   var(--dms-font);
    /* Chips de marca. Por defecto son el color sólido de la marca, como siempre. Existen aparte de
       --marca-* porque ese token también pinta barras de gráficos y el encabezado de la lista de
       precios: un tema que quiere el chip en tono suave (fondo claro, letra de color) no puede
       aclarar --marca-* sin dejar las barras lavadas. */
    --marca-audi-chip-bg:   var(--marca-audi);    --marca-audi-chip-txt:   var(--marca-audi-txt);    --marca-audi-chip-borde:   transparent;
    --marca-jetour-chip-bg: var(--marca-jetour);  --marca-jetour-chip-txt: var(--marca-jetour-txt);  --marca-jetour-chip-borde: transparent;
    --marca-gac-chip-bg:    var(--marca-gac);     --marca-gac-chip-txt:    var(--marca-gac-txt);     --marca-gac-chip-borde:    transparent;
    --marca-usados-chip-bg: var(--marca-usados);  --marca-usados-chip-txt: var(--marca-usados-txt);  --marca-usados-chip-borde: transparent;
    --marca-mg-chip-bg:     var(--marca-mg);      --marca-mg-chip-txt:     var(--marca-mg-txt);      --marca-mg-chip-borde:     transparent;
}
@media (min-width: 1200px) { :root { --dms-page-title-fs: 1.5rem; } }

/* ═══ VALORES POR DEFECTO DEL CONTRATO ═══════════════════════════════════════
   Van ARRIBA DE TODO, antes de cualquier tema, y no es cosmético: `:root` y `[data-theme="x"]`
   tienen la misma especificidad, así que entre ellos gana el que está más abajo en el archivo.
   Con los defaults acá, un tema puede declarar su propio juego esté donde esté.
   Cuando estaban al final pasaba lo contrario: un tema nuevo escribía sus semánticos, no pasaba
   nada, y no había forma de darse cuenta salvo midiendo el valor computado.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tokens semánticos de estado — DE TEMA: :root es la base (y la que usa el tema claro);
   cualquier tema puede redefinir su propio juego, no sólo los oscuros. */
:root {
    --dms-ok:      #1a7f37;  --dms-ok-bg:      rgba(26,127,55,.12);
    --dms-warn:    #bf8700;  --dms-warn-bg:    rgba(191,135,0,.14);
    --dms-danger:  #d1242f;  --dms-danger-bg:  rgba(209,36,47,.12);
    --dms-neutral: #657588;  --dms-neutral-bg: rgba(101,117,136,.12);
    --dms-info:    #0088c4;  --dms-info-bg:    rgba(0,136,196,.12);
    --dms-accent:  #1b2a44;  --dms-accent-bg:  rgba(27,42,68,.10);
}
/* Paleta de DATOS — para series de gráficos. Semántica: :root es la base y los oscuros
   redeclaran su propio juego (no es un aclarado automático del claro: son pasos elegidos).
   POR QUÉ EXISTE APARTE de los tokens de estado: --dms-ok/warn/danger significan "está bien /
   ojo / está mal". Usarlos para "serie 1, serie 2" rompe ese significado — un gráfico con una
   barra verde y una roja se lee como bueno/malo aunque sean sólo dos categorías.
   El orden es FIJO: la serie 1 es siempre --dms-dato-1, pase lo que pase con los filtros. Si el
   color siguiera al orden de aparición, filtrar repintaría las series que quedan.
   Los seis pasos de cada juego están verificados (banda de luminosidad, croma, separación para
   daltonismo y contraste contra la superficie del tema). Cambiar un valor a ojo rompe eso: hay
   que revalidar (validador de la skill dataviz: validate_palette.js --mode light|dark --surface).
   Sep 2026: pasó a tonos pastel a pedido (la anterior se veía dura al lado del resto del DMS).
   En los claros el pastel queda por debajo de 3:1 contra el blanco: por eso todo gráfico lleva
   tooltip y una tabla con los mismos números al lado. Marea usaba el mismo juego que :root
   repetido; se borró y hereda. */
:root {
    --dms-dato-1: #6b9bf2;  --dms-dato-2: #ef8a6d;  --dms-dato-3: #2fb0b8;
    --dms-dato-4: #a283f5;  --dms-dato-5: #d49b2f;  --dms-dato-6: #e86aa0;
    /* Grilla y ejes: alias de los tokens de borde y de texto tenue, para que un gráfico no tenga
       que decidir por su cuenta y para no duplicar el mismo valor en los seis temas. */
    --dms-grilla: var(--dms-border);
    --dms-eje:    var(--dms-text-3);
}
/* Colores de MARCA — identidad, no tema: el hex nunca va en la clase .chip--*.
   Base = los colores históricos de producción, así `default` y `dark` quedan como estaban
   sin necesidad de override propio. */
:root {
    --marca-audi:   #111827;  --marca-audi-txt:   #ffffff;
    --marca-jetour: #f2c200;  --marca-jetour-txt: #111827;
    --marca-gac:    #d6483f;  --marca-gac-txt:    #ffffff;
    --marca-usados: #6b7280;  --marca-usados-txt: #ffffff;
    /* El carmín de MG. Es rojo como GAC y por eso va MÁS OSCURO que el suyo (L .128 contra .193):
       dos rojos del mismo peso al lado se confunden en una tabla, y el chip queda de paso en 5.9:1
       contra el blanco, arriba del 4.32 justito de GAC. */
    /* MG en violeta y NO en su rojo de fábrica. Es la única marca cuyo color de fábrica choca con
       el de otra: el rojo de MG y el de GAC son casi el mismo, y las dos listas de precios —que se
       tiñen con un 12% del color— daban el mismo rosa y no se distinguían de un vistazo. El violeta
       es el único hueco que quedaba libre entre el casi negro de Audi, el ámbar de Jetour, el rojo
       de GAC y el gris de Usados, y al 12% da un lila suave que acompaña al resto.
       Contraste con el blanco de su texto: 6,4:1. */
    --marca-mg:     #6b46c1;  --marca-mg-txt:     #ffffff;
}

:root,
[data-theme="default"] {
    --dms-bg:               #f5f6f8;
    --dms-surface:          #ffffff;
    --dms-surface-2:        #eef1f5;

    --dms-sidebar-bg:       #1f2937;
    --dms-sidebar-bg-2:     #111827;
    --dms-sidebar-border:   transparent;
    --dms-sidebar-text:     #cbd5e1;
    --dms-sidebar-text-hover:#ffffff;
    --dms-sidebar-hover-bg: rgba(255,255,255,.08);
    --dms-sidebar-active-bg:#2b6cb0;
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #94a3b8;
    --dms-brand-text:       #ffffff;

    --dms-text:             #1a202c;
    --dms-text-2:           #5d646e;
    --dms-text-3:           #9ba0a8;
    --dms-border:           rgba(0,0,0,.08);
    --dms-border-strong:    rgba(0,0,0,.12);

    --dms-primary:          #2b6cb0;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #ffc107;
    --dms-badge-text:       #1a202c;

    --dms-font:             'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-mono:             'Segoe UI', system-ui, monospace;
    --dms-shadow:           0 1px 3px rgba(0,0,0,.06);
    --dms-radius-card:      12px;
    --dms-radius-btn:       8px;
    /* Claro u oscuro: lo declara el tema, no una lista en el JS. */
    --dms-esquema:          light;
}

/* ── Tema Editorial (papel cálido + dorado) ───────────────── */
[data-theme="editorial"] {
    --dms-bg:               #f5f3ef;
    --dms-surface:          #ffffff;
    --dms-surface-2:        #efece6;

    --dms-sidebar-bg:       #faf9f6;
    --dms-sidebar-bg-2:     #efeae0;
    --dms-sidebar-border:   #d4cfc4;
    --dms-sidebar-text:     #5d646e;
    --dms-sidebar-text-hover:#1b1e22;
    --dms-sidebar-hover-bg: #efece6;
    --dms-sidebar-active-bg:#b7831c;
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #9ba0a8;
    --dms-brand-text:       #1b1e22;

    --dms-text:             #1b1e22;
    --dms-text-2:           #5d646e;
    --dms-text-3:           #9ba0a8;
    --dms-border:           #e4e0d8;
    --dms-border-strong:    #d4cfc4;

    --dms-primary:          #b7831c;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #b7831c1a;
    --dms-badge-text:       #b7831c;

    --dms-font:             'Archivo', sans-serif;
    --dms-mono:             'IBM Plex Mono', monospace;
    --dms-shadow:           0 1px 2px #1b1e2208, 0 6px 20px #1b1e220a;
    --dms-radius-card:      14px;
    --dms-radius-btn:       8px;
    /* Claro u oscuro: lo declara el tema, no una lista en el JS. */
    --dms-esquema:          light;
}

/* ── Tema Oscuro ──────────────────────────────────────────────
   Combina con data-bs-theme="dark" (lo setea el JS) para que tablas, inputs,
   dropdowns, alerts y demás componentes de Bootstrap adopten el modo oscuro. */
[data-theme="dark"] {
    --dms-bg:               #0f141a;
    --dms-surface:          #1a212b;
    --dms-surface-2:        #232c38;

    --dms-sidebar-bg:       #111827;
    --dms-sidebar-bg-2:     #0b111b;
    --dms-sidebar-border:   #232c38;
    --dms-sidebar-text:     #cbd5e1;
    --dms-sidebar-text-hover:#ffffff;
    --dms-sidebar-hover-bg: rgba(255,255,255,.07);
    --dms-sidebar-active-bg:#2b6cb0;
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #94a3b8;
    --dms-brand-text:       #ffffff;

    --dms-text:             #e6e9ee;
    --dms-text-2:           #a7b0bd;
    --dms-text-3:           #7d8798;
    --dms-border:           rgba(255,255,255,.10);
    --dms-border-strong:    rgba(255,255,255,.18);

    --dms-primary:          #4a90d9;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #f0b429;
    --dms-badge-text:       #1a202c;

    --dms-font:             'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-mono:             'Segoe UI', system-ui, monospace;
    --dms-shadow:           0 1px 3px rgba(0,0,0,.45);
    --dms-radius-card:      12px;
    --dms-radius-btn:       8px;
    /* Claro u oscuro: lo declara el tema, no una lista en el JS. */
    --dms-esquema:          dark;
    /* Sobre casi negro hace falta más color para que el hover se vea. */
    --dms-hover-mix:        24%;
}

/* ── Temas "Grupo Buenos Aires" (paleta Finanzas) ─────────────
   Claro (navy + azul), Oscuro y Pizarra. Sólo redefinen los tokens --dms-*. */

/* Claro: fondo limpio, chrome navy, primario azul. */
[data-theme="claro"] { /* AIRE — claro neutro, nítido (paleta original del preview) */
    --dms-bg:               #f4f6f8;
    --dms-surface:          #ffffff;
    --dms-surface-2:        #eef1f4;

    --dms-sidebar-bg:       #101a2e;
    --dms-sidebar-bg-2:     #0a1220;
    --dms-sidebar-border:   transparent;
    --dms-sidebar-text:     #aab6c8;
    --dms-sidebar-text-hover:#ffffff;
    --dms-sidebar-hover-bg: rgba(255,255,255,.08);
    --dms-sidebar-active-bg:#2563eb;
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #8494a8;
    --dms-brand-text:       #ffffff;

    --dms-text:             #1a2430;
    --dms-text-2:           #657588;
    --dms-text-3:           #8494a8;
    --dms-border:           #dde3e9;
    --dms-border-strong:    #c4cfdd;

    --dms-primary:          #2563eb;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #fff3cd;
    --dms-badge-text:       #7a5b00;

    --dms-font:             'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-mono:             'Segoe UI', system-ui, monospace;
    --dms-shadow:           0 1px 2px rgba(20,40,60,.05);
    --dms-radius-card:      10px;
    --dms-radius-btn:       8px;
    /* Claro u oscuro: lo declara el tema, no una lista en el JS. */
    --dms-esquema:          light;
}


/* ── MAREA — azules y verdes pastel sobre blanco ──────────────────────────────
   Fondo blanco de verdad (#ffffff), no un gris que se hace pasar por blanco como en los otros
   claros. Eso obliga a que la separación entre las cosas la haga el BORDE y no un cambio de
   fondo: sin borde, sobre blanco puro, una tarjeta no existe.

   El pastel está en las superficies y los bordes —menta y celeste apagados—, no en el texto ni
   en la acción. Un pastel es por definición poco contrastado: usarlo para algo que hay que leer
   es lo que hace que un tema "suave" sea un tema ilegible. Azul para lo que se toca (el primario),
   verde en el acento y en el papel de los encabezados.

   Contraste sobre blanco puro, que es el caso más exigente: principal 15,48:1, secundario 6,70:1,
   tenue 4,70:1, primario 5,93:1. El tenue arrancó en 4,27 —abajo del mínimo de 4,5— y se bajó
   medio tono hasta pasarlo: en un tema pastel es el valor que más tienta a dejar flojo. */
[data-theme="marea"] {
    --dms-esquema:          light;

    --dms-bg:               #ffffff;
    /* La superficie es igual al fondo: acá las tarjetas se separan por el borde. */
    --dms-surface:          #ffffff;
    --dms-surface-2:        #e0efec;

    --dms-sidebar-bg:       #10353f;
    --dms-sidebar-bg-2:     #0a252c;
    --dms-sidebar-border:   #1c4c58;
    --dms-sidebar-text:     #bfd9db;
    --dms-sidebar-text-hover:#ffffff;
    --dms-sidebar-hover-bg: rgba(255,255,255,.10);
    --dms-sidebar-active-bg:#0369a1;
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #8fb0b5;
    --dms-brand-text:       #ffffff;

    --dms-text:             #0f2732;
    --dms-text-2:           #42606f;
    --dms-text-3:           #5a7887;
    --dms-border:           #cbe3e4;
    --dms-border-strong:    #a3c9cc;

    --dms-primary:          #0369a1;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #cdeae2;
    --dms-badge-text:       #0b4a3e;

    --dms-font:             'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-mono:             'Segoe UI', system-ui, monospace;
    /* Sombra apenas insinuada: con fondo blanco y bordes de color, una sombra marcada ensucia. */
    --dms-shadow:           0 1px 2px rgba(15,39,50,.06);
    --dms-radius-card:      12px;
    --dms-radius-btn:       8px;

    /* Los semánticos siguen siendo semánticos: verde es "bien" y rojo es "mal" también acá.
       Se eligen los tonos que conviven con el pastel sin perder los 4,5:1 sobre blanco. */
    --dms-ok:      #0f7a3d;  --dms-ok-bg:      rgba(15,122,61,.13);
    --dms-warn:    #8a5a00;  --dms-warn-bg:    rgba(138,90,0,.14);
    --dms-danger:  #b3131f;  --dms-danger-bg:  rgba(179,19,31,.11);
    --dms-neutral: #42606f;  --dms-neutral-bg: rgba(66,96,111,.12);
    --dms-info:    #0369a1;  --dms-info-bg:    rgba(3,105,161,.12);
    --dms-accent:  #0d7d6b;  --dms-accent-bg:  rgba(13,125,107,.12);
}

/* ── GRAFITO — opción del selector desde septiembre 2026 (el default sigue siendo `default`) ──
   Elegido sobre un prototipo navegable (menú lateral, tablas compactas). Lo que
   se buscaba: que el DMS deje de verse "grande" y que en un listado entren las columnas sin
   scrollear de costado. Autos a pagar, con sus 16 columnas, era la vara.

   El color se gasta en poco: el chrome es neutro (grafito y blancos con una pizca de azul) para
   que lo único fuerte en pantalla sean las marcas —Audi, Jetour, GAC, MG— y los estados. Un
   menú azul y botones azules competían con el chip de Jetour por la atención.

   La densidad va en los tokens de tamaño (ver arriba): filas de ~30 px, encabezados de tabla en
   versalita chica, menos aire alrededor. Nada de esto toca a los otros temas. */
[data-theme="grafito"] {
    --dms-esquema:          light;

    --dms-bg:               #f3f4f5;
    --dms-surface:          #ffffff;
    --dms-surface-2:        #eef0f2;

    --dms-sidebar-bg:       #16181b;
    --dms-sidebar-bg-2:     #16181b;   /* la marca no va en otro tono: el menú es una sola pieza */
    --dms-sidebar-border:   transparent;
    --dms-sidebar-text:     #aeb4bb;
    --dms-sidebar-text-hover:#ffffff;
    --dms-sidebar-hover-bg: rgba(255,255,255,.06);
    /* El activo NO es un bloque azul: es un gris apenas más claro con la raya del indicador. Un
       bloque de color lleno en el menú era lo más saturado de la pantalla, y no es lo importante. */
    --dms-sidebar-active-bg:rgba(255,255,255,.10);
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #80878f;
    --dms-brand-text:       #ffffff;
    --dms-nav-indicator:    #4a86e0;

    --dms-text:             #15181c;
    --dms-text-2:           #555d66;
    /* 4,6:1 aun sobre el gris de los chips (5,2:1 sobre blanco). El del prototipo, #8a929b, daba
       3,9 sobre el fondo: el tenue es el que más tienta a dejar flojo, y es el de las fechas y los
       "—" de las tablas, que también se leen. */
    --dms-text-3:           #666d76;
    --dms-border:           #e3e6e9;
    --dms-border-strong:    #cfd4d9;

    --dms-primary:          #2458b3;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #fbf0d9;
    --dms-badge-text:       #8f5b00;

    /* Todo en Segoe UI, como Predeterminado, a pedido: se probaron Source Sans 3, Aptos e IBM Plex
       Mono y se volvió a la letra de siempre. Viene con Windows: no se descarga nada. */
    --dms-font:             'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-mono:             'Segoe UI', system-ui, monospace;
    --dms-shadow:           0 1px 2px rgba(20,24,28,.05);
    --dms-radius-card:      8px;
    --dms-radius-btn:       6px;
    --dms-hover-mix:        8%;

    /* Semánticos: los mismos significados, en tonos que conviven con el gris sin perder 4,5:1. */
    --dms-ok:      #1a7a3c;  --dms-ok-bg:      #e3f2e8;
    --dms-warn:    #8f5b00;  --dms-warn-bg:    #fbf0d9;
    --dms-danger:  #b42318;  --dms-danger-bg:  #fbe6e4;
    --dms-info:    #1d5fb8;  --dms-info-bg:    #e4eefb;
    --dms-neutral: #555d66;  --dms-neutral-bg: #eceef0;
    --dms-accent:  #2458b3;  --dms-accent-bg:  rgba(36,88,179,.10);

    /* Densidad */
    --dms-sidebar-w:        216px;
    --dms-content-pad:      16px;
    --dms-topbar-py:        6px;
    --dms-brand-pad:        12px 14px;
    --dms-nav-py:           6px;
    --dms-nav-fs:           .875rem;
    --dms-sub-py:           4px;
    --dms-sub-fs:           .84rem;
    --dms-page-title-fs:    1.15rem;
    --dms-title-fs:         1.15rem;
    --dms-tabla-fs:         .8rem;
    --dms-tabla-densa-fs:   .74rem;
    --dms-cell-py:          .3rem;
    --dms-cell-px:          .5rem;
    /* Las tablas sin .table-sm también: "todas iguales" quiere decir que la mitad de los listados
       no tenga filas del doble de alto por haber olvidado una clase. */
    --dms-table-py:         .3rem;
    --dms-table-px:         .5rem;
    --dms-th-bg:            #f7f8f9;
    --dms-th-light-bg:      #f7f8f9;
    --dms-page-title-weight: 600;
    --dms-ico-emoji:        none;
    --dms-ico-linea:        inline-block;
    --dms-th-color:         #555d66;
    --dms-th-fs:            .72rem;
    --dms-th-weight:        600;
    --dms-th-transform:     uppercase;
    --dms-th-spacing:       .04em;
    --dms-chip-radius:      4px;
}

/* ── STITCH — diseño hecho en Google Stitch (sep 2026) ────────────────────────────────────────
   Los valores salen del DESIGN.md y del código que exportó Stitch (_Claude/stitch/, fuera del
   repo). Menú azul noche con el ítem activo en azul lleno, fondo apenas azulado, tarjetas blancas
   muy redondeadas, dos voces tipográficas: Plus Jakarta Sans para títulos y cifras, Inter para el
   dato, JetBrains Mono para VIN e importes.

   Lo que NO es igual al diseño, a propósito:
   - El tenue: Stitch usa slate-400 (#94A3B8), que da 2,6:1 sobre su fondo. Es el de fechas y "—",
     que también se leen. Se oscureció hasta pasar 4,5:1 contra el encabezado de tabla.
   - La letra de Jetour: el ámbar del diseño (#B45309) queda en 4,51 sobre su crema, al filo. Un
     tono más oscuro.
   - Las filas: el diseño tiene 52 px porque lleva foto del auto y dos renglones por celda. Sin foto
     eso es aire vacío; se deja en ~38 px, más aireado que Grafito pero sin desperdiciar.
   - La vista en tarjetas del celular y las fotos no son del tema: son HTML de cada vista. */
[data-theme="stitch"] {
    --dms-esquema:          light;

    --dms-bg:               #f8f9ff;
    --dms-surface:          #ffffff;
    --dms-surface-2:        #eff4ff;

    --dms-sidebar-bg:       #131b2e;
    --dms-sidebar-bg-2:     #131b2e;
    --dms-sidebar-border:   transparent;
    --dms-sidebar-text:     #c3cad8;
    --dms-sidebar-text-hover:#ffffff;
    --dms-sidebar-hover-bg: rgba(255,255,255,.06);
    --dms-sidebar-active-bg:#2563eb;
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #8e98ab;
    --dms-brand-text:       #ffffff;
    --dms-nav-indicator:    transparent;   /* el activo ya es un bloque azul: raya no hace falta */

    --dms-text:             #0b1c30;
    --dms-text-2:           #475569;
    --dms-text-3:           #5b6b80;
    --dms-border:           #e2e8f0;
    --dms-border-strong:    #cbd5e1;

    --dms-primary:          #2563eb;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #fef3c7;
    --dms-badge-text:       #92400e;

    /* Todo en Segoe UI, como Predeterminado, a pedido: el diseño traía Plus Jakarta Sans para
       títulos, Inter para texto y JetBrains Mono para cifras. Viene con Windows: no se descarga nada. */
    --dms-font:             'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-font-display:     'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-mono:             'Segoe UI', system-ui, monospace;
    --dms-shadow:           0 1px 3px 0 rgba(15,23,42,.04), 0 1px 2px -1px rgba(15,23,42,.02);
    --dms-radius-card:      16px;
    --dms-radius-btn:       8px;
    --dms-hover-mix:        6%;

    --dms-ok:      #15803d;  --dms-ok-bg:      #dcfce7;
    --dms-warn:    #c2410c;  --dms-warn-bg:    #ffedd5;
    --dms-danger:  #b91c1c;  --dms-danger-bg:  #fee2e2;
    --dms-info:    #0369a1;  --dms-info-bg:    #e0f2fe;
    --dms-neutral: #475569;  --dms-neutral-bg: #f1f5f9;
    --dms-accent:  #2563eb;  --dms-accent-bg:  rgba(37,99,235,.10);
    --dms-chip-dot:         inline-block;
    --dms-chip-radius:      999px;

    /* Marcas en chip: Audi sólido (así lo pide el diseño), el resto en tono suave con borde. */
    --marca-audi-chip-bg:   #111827;  --marca-audi-chip-txt:   #ffffff;  --marca-audi-chip-borde:   transparent;
    --marca-jetour-chip-bg: #fef3c7;  --marca-jetour-chip-txt: #92400e;  --marca-jetour-chip-borde: #fcd34d;
    --marca-gac-chip-bg:    #fee2e2;  --marca-gac-chip-txt:    #b91c1c;  --marca-gac-chip-borde:    #fca5a5;
    --marca-usados-chip-bg: #f1f5f9;  --marca-usados-chip-txt: #334155;  --marca-usados-chip-borde: #cbd5e1;
    --marca-mg-chip-bg:     #ede9fe;  --marca-mg-chip-txt:     #6d28d9;  --marca-mg-chip-borde:     #c4b5fd;
    /* Y el color pleno (barras de gráficos) es el sólido del diseño. */
    --marca-jetour:         #f59e0b;  --marca-jetour-txt:      #111827;
    --marca-gac:            #dc2626;
    --marca-usados:         #475569;

    /* Densidad de escritorio */
    --dms-sidebar-w:        240px;
    --dms-content-pad:      24px;
    --dms-topbar-py:        10px;
    --dms-brand-pad:        16px;
    --dms-nav-py:           9px;
    --dms-nav-fs:           .9rem;
    --dms-sub-py:           6px;
    --dms-sub-fs:           .86rem;
    --dms-page-title-fs:    1.6rem;
    --dms-page-title-weight: 700;
    --dms-title-fs:         1.25rem;
    --dms-tabla-fs:         .8125rem;
    --dms-tabla-densa-fs:   .75rem;
    --dms-cell-py:          .55rem;
    --dms-cell-px:          .75rem;
    --dms-table-py:         .55rem;
    --dms-table-px:         .75rem;
    --dms-th-bg:            #eff4ff;
    --dms-th-light-bg:      #eff4ff;
    --dms-th-color:         #5b6b80;
    --dms-th-fs:            .6875rem;
    --dms-th-weight:        600;
    --dms-th-transform:     uppercase;
    --dms-th-spacing:       .06em;
    --dms-ico-emoji:        none;
    --dms-ico-linea:        inline-block;
}

/* ── EJECUTIVO — "AutoDMS Executive", segundo diseño de Google Stitch (sep 2026) ───────────────
   Los valores salen del CÓDIGO que exportó Stitch (_Claude/stitch3/, fuera del repo: la config de
   colores de cada code.html) y no del texto de su DESIGN.md, que describe una paleta "slate" que
   después no es la que dibuja. La que dibuja es esta: lavanda muy clara de fondo, menú claro con
   el activo en azul noche lleno, tarjetas blancas sin borde y con sombra mínima, verde azulado
   para "en stock", Plus Jakarta Sans en títulos y cifras e Inter en el texto.

   Lo que NO es igual al diseño, a propósito:
   - El tenue: el "outline" de Stitch (#757682) se deja tal cual para texto chico: da 4,6:1 sobre
     blanco. El "outline-variant" (#c5c5d3) sólo se usa como borde, nunca como texto.
   - La fila con fondo alternado (cebra) del diseño no se copia: con filtros y orden por columna,
     la cebra se reordena con las filas y deja de ayudar a seguir un renglón. */
[data-theme="ejecutivo"] {
    --dms-esquema:          light;

    --dms-bg:               #faf8ff;
    --dms-surface:          #ffffff;
    --dms-surface-2:        #f2f3ff;

    --dms-sidebar-bg:       #f2f3ff;
    --dms-sidebar-bg-2:     #f2f3ff;
    --dms-sidebar-border:   #eaedff;
    --dms-sidebar-text:     #131b2e;
    --dms-sidebar-text-hover:#00236f;
    --dms-sidebar-hover-bg: #eaedff;
    --dms-sidebar-active-bg:#1e3a8a;
    --dms-sidebar-active-text:#ffffff;
    --dms-sidebar-sub-text: #444651;
    --dms-brand-text:       #00236f;
    --dms-nav-indicator:    transparent;

    --dms-text:             #131b2e;
    --dms-text-2:           #444651;
    --dms-text-3:           #757682;
    --dms-border:           #eaedff;
    --dms-border-strong:    #c5c5d3;

    --dms-primary:          #00236f;
    --dms-on-primary:       #ffffff;

    --dms-badge-bg:         #ffddb8;
    --dms-badge-text:       #653e00;

    --dms-font:             'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --dms-font-display:     'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --dms-mono:             'Inter', 'Segoe UI', system-ui, sans-serif;
    --dms-shadow:           0 1px 2px 0 rgba(19,27,46,.05);
    --dms-radius-card:      12px;
    --dms-radius-btn:       8px;
    --dms-hover-mix:        5%;

    --dms-ok:      #006a61;  --dms-ok-bg:      #86f2e4;
    --dms-warn:    #653e00;  --dms-warn-bg:    #ffddb8;
    --dms-danger:  #ba1a1a;  --dms-danger-bg:  #ffdad6;
    --dms-info:    #264191;  --dms-info-bg:    #dce1ff;
    --dms-neutral: #444651;  --dms-neutral-bg: #eaedff;
    --dms-accent:  #1e3a8a;  --dms-accent-bg:  #dce1ff;
    --dms-chip-dot:         inline-block;
    --dms-chip-radius:      999px;

    /* Marcas: los pares del diseño (texto oscuro de la marca sobre su tinte). Audi, sólido. */
    --marca-audi-chip-bg:   #131b2e;  --marca-audi-chip-txt:   #ffffff;  --marca-audi-chip-borde:   transparent;
    --marca-jetour-chip-bg: #fef3c7;  --marca-jetour-chip-txt: #b45309;  --marca-jetour-chip-borde: transparent;
    --marca-gac-chip-bg:    #ffedd5;  --marca-gac-chip-txt:    #c2410c;  --marca-gac-chip-borde:    transparent;
    --marca-usados-chip-bg: #e2e8f0;  --marca-usados-chip-txt: #334155;  --marca-usados-chip-borde: transparent;
    --marca-mg-chip-bg:     #ede9fe;  --marca-mg-chip-txt:     #6d28d9;  --marca-mg-chip-borde:     transparent;
    /* Color pleno (barras): los del diseño — azul noche, ámbar, rojo y gris. */
    --marca-audi:           #00236f;  --marca-audi-txt:        #ffffff;
    --marca-jetour:         #ef9900;  --marca-jetour-txt:      #131b2e;
    --marca-gac:            #ba1a1a;
    --marca-usados:         #757682;

    --dms-sidebar-w:        248px;
    --dms-content-pad:      28px;
    --dms-topbar-py:        12px;
    --dms-brand-pad:        18px;
    --dms-nav-py:           10px;
    --dms-nav-fs:           .9375rem;
    --dms-sub-py:           7px;
    --dms-sub-fs:           .875rem;
    --dms-page-title-fs:    1.375rem;
    --dms-page-title-weight: 700;
    --dms-title-fs:         1.125rem;
    --dms-tabla-fs:         .8125rem;
    --dms-tabla-densa-fs:   .75rem;
    --dms-cell-py:          .7rem;
    --dms-cell-px:          .75rem;
    --dms-table-py:         .7rem;
    --dms-table-px:         .75rem;
    --dms-th-bg:            #eaedff;
    --dms-th-light-bg:      #eaedff;
    --dms-th-color:         #131b2e;
    --dms-th-fs:            .8125rem;
    --dms-th-weight:        600;
    --dms-th-transform:     none;
    --dms-th-spacing:       0;
    /* Íconos del menú: los emoji de siempre, a pedido (el diseño traía íconos de línea). */
    --dms-ico-emoji:        inline;
    --dms-ico-linea:        none;
    /* Componentes de Bootstrap re-vestidos (tokens opcionales, ver "Componentes de Bootstrap que un
       tema puede re-vestir"): botones secundarios en bloque suave, avisos suaves, campos sin borde. */
    --dms-card-borde:       #eef0fb;
    --dms-card-cab-bg:      transparent;
    --dms-card-cab-borde:   #eef0fb;
    --dms-btn-radio:        8px;
    --dms-btn2-bg:          #eaedff;  --dms-btn2-borde: transparent;  --dms-btn2-txt: #131b2e;
    --dms-btn2-hover-bg:    #dae2fd;  --dms-btn2-hover-txt: #00236f;
    --dms-btn3-bg:          #dce1ff;  --dms-btn3-borde: transparent;  --dms-btn3-txt: #00236f;
    --dms-btn3-hover-bg:    #b6c4ff;  --dms-btn3-hover-txt: #00164e;
    --dms-aviso-radio:      12px;
    --dms-aviso-warn-bg:    #fff4e6;  --dms-aviso-warn-txt:    #653e00;  --dms-aviso-warn-borde:    #ffddb8;
    --dms-aviso-danger-bg:  #fff1ef;  --dms-aviso-danger-txt:  #93000a;  --dms-aviso-danger-borde:  #ffdad6;
    --dms-aviso-info-bg:    #f2f3ff;  --dms-aviso-info-txt:    #264191;  --dms-aviso-info-borde:    #dce1ff;
    --dms-aviso-ok-bg:      #eafdf9;  --dms-aviso-ok-txt:      #005049;  --dms-aviso-ok-borde:      #86f2e4;
    --dms-aviso-neutral-bg: #f2f3ff;  --dms-aviso-neutral-txt: #444651;  --dms-aviso-neutral-borde: #eaedff;
    --dms-input-bg:         #f2f3ff;  --dms-input-borde: transparent;  --dms-input-radio: 8px;  --dms-input-foco-bg: #ffffff;
    /* Estructura re-vestida (tokens opcionales, ver "Estructura (sidebar y topbar)"). */
    --dms-topbar-bg:        rgba(250,248,255,.85);  --dms-topbar-borde: #eaedff;  --dms-topbar-filtro: blur(12px);
    --dms-brand-ico-lado:   34px;  --dms-brand-ico-bg: #131b2e;  --dms-brand-ico-txt: #86f2e4;
    --dms-navbar-movil:     flex;  --dms-navbar-alto: 64px;
    --dms-titulo-emoji:     none;
}

/* El diseño pide 16 px de margen en el celular (DESIGN.md, "margin"). Sigue siendo sólo un token. */
@media (max-width: 767.98px) { [data-theme="ejecutivo"] { --dms-content-pad: 16px; } }

/* ── Puente Bootstrap → tokens del DMS ────────────────────────────────────────
   Bootstrap pinta sus componentes con sus propias variables --bs-*, que no saben nada de los
   tokens del DMS. Esta es la traducción, y se escribe UNA SOLA VEZ para todos los temas.

   ANTES estaba repetida tema por tema: cada tema nuevo había que inscribirlo en ~20 listas de
   selectores, y olvidarse de una dejaba ese componente con los colores del tema anterior — sin
   error, sin aviso, visible recién semanas después en una pantalla que nadie miraba. Medido sobre
   este mismo archivo: `default` y `editorial` aparecían en 1 selector, `claro` en 19, `pizarra` en
   20 y `oscuro` en 23.

   Como los --dms-* ya cambian con el tema, traducirlos una vez alcanza: el componente de Bootstrap
   sigue al tema solo. Un tema nuevo vuelve a ser lo que debería haber sido siempre — su bloque de
   tokens y el botón en el menú. Nada más.

   El precio de unificar fue unificar también el ASPECTO: los tres temas nuevos (Aire/Carbón/Lino)
   tenían badges suaves y resumen en tarjetas, y los viejos (Predeterminado/Editorial/Oscuro) el
   look de Bootstrap. Ahora es uno solo, el nuevo, en los seis. Dos generaciones conviviendo era
   justamente lo que hacía falta mantener por duplicado. */
:root {
    --bs-body-bg:            var(--dms-bg);
    --bs-body-color:         var(--dms-text);
    --bs-emphasis-color:     var(--dms-text);
    --bs-heading-color:      var(--dms-text);
    --bs-secondary-color:    var(--dms-text-2);
    --bs-tertiary-color:     var(--dms-text-3);
    --bs-border-color:       var(--dms-border);
    --bs-secondary-bg:       var(--dms-surface-2);
    --bs-tertiary-bg:        var(--dms-surface-2);
    --bs-card-bg:            var(--dms-surface);
    --bs-card-border-color:  var(--dms-border);
    --bs-table-color:        var(--dms-text);
    --bs-table-border-color: var(--dms-border);
}

/* El resaltado de la fila al pasar el mouse. Bootstrap lo hace con un velo negro
   (rgba(0,0,0,.075)) — o sea gris, en los seis temas, sin importar la identidad de ninguno.
   Acá sale del PRIMARIO del tema: en los azules queda celeste, en Lino verde azulado, en
   Glicina lila. Un tema nuevo lo hereda sin declarar nada.

   color-mix con transparente y no un color opaco: así el resaltado se apoya sobre lo que ya
   tenga la fila —el ámbar de "Pend. Autológica", el rojo de una urgente— en vez de taparlo.

   La intensidad es un token porque no puede ser la misma en claro que en oscuro: sobre un fondo
   casi negro, un 12% de color no se ve. Cada tema oscuro sube el suyo en su propio bloque. */
.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: color-mix(in oklab, var(--dms-primary) var(--dms-hover-mix, 12%), transparent);
}

/* Superficies que Bootstrap trae en un claro fijo. Toman el token para que sigan al tema —
   incluido el día que el tema sea oscuro, donde un blanco fijo salta a la vista. */
.bg-white { background-color: var(--dms-surface)   !important; color: var(--dms-text); }
.bg-light { background-color: var(--dms-surface-2) !important; color: var(--dms-text); }

/* El encabezado de tabla se pinta con la variable de Bootstrap y no con background-color: así
   sigue componiendo con el hover y el rayado en vez de ganarles por !important. */
.table-light { --bs-table-bg: var(--dms-th-light-bg); --bs-table-color: var(--dms-th-color); }

/* Deuda de Clientes: la fila "Pend. Autológica" está teñida con un amarillo fijo en el <style> de
   la vista. Acá pasa al token de atención, para que no quede clara sobre un fondo oscuro. */
#deudaTbl tr.op-pend-autologica { --bs-table-bg: var(--dms-warn-bg); }
#deudaTbl tr.op-pend-autologica td:first-child { box-shadow: inset 3px 0 0 0 var(--dms-warn); }

/* (Acá vivían reglas que disfrazaban de chip a los badges de Bootstrap `.badge.text-bg-*`, con
   !important. Desde sep 2026 las vistas usan .chip / .chip--* directamente, así que se fueron: un
   badge nuevo con text-bg-* se vería con el color sólido de Bootstrap, que es la señal de que va un
   chip.) */

/* Deuda: el resumen va en tarjetas KPI. La vista rendea las dos formas y el CSS elige; ahora
   elige lo mismo en todos los temas. */
.deuda-resumen-linea { display: none; }
.deuda-resumen-kpi   { display: flex; }

/* =====================================================================
   SISTEMA DE DISEÑO — glosario (tokens semánticos + clases de componentes)
   ---------------------------------------------------------------------
   Regla de oro: en las vistas NO pongas colores a mano (#e10600, red…).
   Usá estas clases/variables → todo tiene UNA lógica y sigue el tema.
   Mapa visual (catálogo): /admin/estilo

     · Estado (significado → color):
         .chip.chip--ok      verde   (saldado / al día / entregado)
         .chip.chip--warn    ámbar   (por vencer / atención)
         .chip.chip--danger  rojo    (vencido / con deuda / error)
         .chip.chip--info    azul    (informativo / en curso)
         .chip.chip--neutral gris    (sin dato / libre)
         .chip.chip--accent  navy    (destacado)
     · Marca (unidad de negocio):
         .chip.chip--audi / --jetour / --gac / --usados / --mg
     · Títulos:  .dms-title (página) · .dms-subtitle (sección)
   ===================================================================== */

[data-theme="dark"] {
    --dms-ok:      #2ea043;  --dms-ok-bg:      rgba(46,160,67,.16);
    --dms-warn:    #d29922;  --dms-warn-bg:    rgba(210,153,34,.16);
    --dms-danger:  #f85149;  --dms-danger-bg:  rgba(248,81,73,.16);
    --dms-neutral: #8b98a5;  --dms-neutral-bg: rgba(139,152,165,.14);
    --dms-info:    #00a8e8;  --dms-info-bg:    rgba(0,168,232,.16);
    --dms-accent:  #a371f7;  --dms-accent-bg:  rgba(163,113,247,.16);
}

[data-theme="dark"] {
    --dms-dato-1: #6590e0;  --dms-dato-2: #d2755a;  --dms-dato-3: #29a0a8;
    --dms-dato-4: #927ee6;  --dms-dato-5: #b48428;  --dms-dato-6: #d56894;
}

/* Los tres temas del preview de diseño comparten su propia identidad de marca. */
[data-theme="claro"] {
    --marca-audi:   #1b2a44;
    --marca-jetour: #f2c531;  --marca-jetour-txt: #1a2430;
    --marca-gac:    #c14a3f;
    /* El gris del preview (#8b9299) daba 3.15:1 con texto blanco: se baja a L=46%
       manteniendo tono y saturación → 4.66:1. */
    --marca-usados: #6e757d;
}
/* Ajustes de contraste de los temas oscuros: cada uno aclara desde SU propia base,
   porque no parten del mismo tono. `default` es claro y no necesita override. */
[data-theme="dark"] {
    /* Audi de producción (#111827, hsl 221 39% 11%) subido a L=50% con el tono y la
       saturación intactos: sobre el fondo de dark el original era ilegible (1.04:1). */
    --marca-audi:   #4e6db1;
    /* El carmín de MG contra la SUPERFICIE de dark daba 2.75, abajo del 3:1 (contra el fondo
       pelado llegaba a 3.14 y habría pasado desapercibido: el chip vive sobre las tarjetas, no
       sobre el fondo). Mismo tono y misma saturación, la luz de 42% a 48%: 3.37 contra la
       superficie y 4.80 con el texto blanco, que es el techo — a 50% el texto cae a 4.45. */
    --marca-mg:     #7c5cd0;   /* aclarado, como los otros: 4,9:1 con el blanco de su texto */
}

/* Títulos — mismo color y fuente en todo el DMS. */
.dms-title    { font-family: var(--dms-font-display); color: var(--dms-text); font-size: var(--dms-title-fs); font-weight: 650; line-height: 1.25; margin: 0; }
.dms-subtitle { font-family: var(--dms-font-display); color: var(--dms-text); font-size: .95rem; font-weight: 650; margin: 0; }
.dms-title small, .dms-subtitle small { color: var(--dms-text-2); font-weight: 400; }

/* Chips / etiquetas de estado — un color por significado. */
.chip { display:inline-block; padding:2px 9px; border-radius:var(--dms-chip-radius); font-size:11px; font-weight:600;
        line-height:1.5; white-space:nowrap; }
.chip--ok      { background: var(--dms-ok-bg);      color: var(--dms-ok); }
.chip--warn    { background: var(--dms-warn-bg);    color: var(--dms-warn); }
.chip--danger  { background: var(--dms-danger-bg);  color: var(--dms-danger); }
.chip--neutral { background: var(--dms-neutral-bg); color: var(--dms-neutral); }
.chip--info    { background: var(--dms-info-bg);    color: var(--dms-info); }
.chip--accent  { background: var(--dms-accent-bg);  color: var(--dms-accent); }

/* Estado de una operación con COLOR (se elige en el ABM de estados). El desplegable de la lista lleva la misma clase
   que el chip de sólo lectura: sale de los mismos tokens, así que cambia con el tema como todo lo demás. */
.estado-color--ok      { background-color: var(--dms-ok-bg) !important;      color: var(--dms-ok) !important; }
.estado-color--warn    { background-color: var(--dms-warn-bg) !important;    color: var(--dms-warn) !important; }
.estado-color--danger  { background-color: var(--dms-danger-bg) !important;  color: var(--dms-danger) !important; }
.estado-color--info    { background-color: var(--dms-info-bg) !important;    color: var(--dms-info) !important; }
.estado-color--neutral { background-color: var(--dms-neutral-bg) !important; color: var(--dms-neutral) !important; }
.estado-color--accent  { background-color: var(--dms-accent-bg) !important;  color: var(--dms-accent) !important; }
select[class*="estado-color--"] { font-weight: 600; }
/* El punto sale del color del texto del chip: no hay un color más que mantener. Sólo en los de
   ESTADO — un chip de marca con punto sería un segundo marcador para lo mismo. */
:is(.chip--ok, .chip--warn, .chip--danger, .chip--neutral, .chip--info, .chip--accent)::before {
    content: ""; display: var(--dms-chip-dot);
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    margin-right: 5px; vertical-align: 1px;
}

/* ── Semáforo ──────────────────────────────────────────────────────────────
   Un punto de color que se carga a mano, para columnas donde alguien revisa fila por fila
   (Auditoría → Operaciones completo). Un clic lo cicla: sin definir → verde → amarillo → rojo.

   Los colores son los MISMOS tokens semánticos de los chips, no una paleta aparte: verde, amarillo
   y rojo ya quieren decir "está bien / ojo / está mal" en todo el DMS, y un semáforo con otros
   verdes sería un segundo idioma para lo mismo.

   El botón no tiene fondo ni borde a propósito: la columna tiene que ser lo más angosta posible y
   el punto es todo lo que se ve. El nombre del estado viaja en un .visually-hidden dentro del
   botón — de ahí lo leen el filtro y el orden del motor de tablas, y también un lector de
   pantalla, que del color no puede leer nada. */
.dms-semaforo { display:inline-flex; align-items:center; justify-content:center;
                padding:2px; border:0; background:none; line-height:0; cursor:pointer; }
.dms-semaforo__luz { display:inline-block; width:12px; height:12px; border-radius:999px;
                     background: var(--dms-neutral-bg); box-shadow: inset 0 0 0 1px var(--dms-border-strong); }
/* Los modificadores van DESPUÉS de la base y con la misma especificidad: pisan por orden, sin
   !important. El anillo del hover sí es más específico y sobrevive encima del color — que es lo
   que se quiere: al pasar el mouse se nota que el punto se puede tocar. */
.dms-semaforo--ok     { background: var(--dms-ok);     box-shadow:none; }
.dms-semaforo--warn   { background: var(--dms-warn);   box-shadow:none; }
.dms-semaforo--danger { background: var(--dms-danger); box-shadow:none; }
.dms-semaforo:hover .dms-semaforo__luz { box-shadow: inset 0 0 0 1px var(--dms-text-3); }

/* Chips sólidos de marca — leen los tokens --marca-*, nunca un hex propio. */
.chip--audi   { background: var(--marca-audi-chip-bg);   color: var(--marca-audi-chip-txt);   box-shadow: inset 0 0 0 1px var(--marca-audi-chip-borde); }
.chip--jetour { background: var(--marca-jetour-chip-bg); color: var(--marca-jetour-chip-txt); box-shadow: inset 0 0 0 1px var(--marca-jetour-chip-borde); }
.chip--gac    { background: var(--marca-gac-chip-bg);    color: var(--marca-gac-chip-txt);    box-shadow: inset 0 0 0 1px var(--marca-gac-chip-borde); }
.chip--usados { background: var(--marca-usados-chip-bg); color: var(--marca-usados-chip-txt); box-shadow: inset 0 0 0 1px var(--marca-usados-chip-borde); }
.chip--mg     { background: var(--marca-mg-chip-bg);     color: var(--marca-mg-chip-txt);     box-shadow: inset 0 0 0 1px var(--marca-mg-chip-borde); }

/* ── Base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* El lugar de la barra de scroll vertical queda siempre reservado. Si no, pasar de una pantalla corta a una larga
   (Contabilidad → Plan de cuentas, Leo 29/10/2026: "se mueve toda la pantalla") hacía aparecer la barra, el ancho
   bajaba 15 px y saltaba todo lo que va alineado a la derecha: la barra de arriba, los botones, las tablas. En los
   celulares la barra flota y esto no cambia nada. */
html { scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: var(--dms-font);
    background-color: var(--dms-bg);
    color: var(--dms-text);
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease, color .2s ease;
}

/* Números: monoespaciada + alineados en columna */
.mono {
    font-family: var(--dms-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Estructura ───────────────────────────────────────────── */
.dms-layout { display: flex; min-height: 100vh; }

.dms-main {
    flex: 1;
    min-width: 0;            /* permite scroll horizontal de tablas anchas */
    display: flex;
    flex-direction: column;
}

.dms-content { padding: var(--dms-content-pad); }

/* PANTALLAS QUE LLENAN LA VENTANA (body.x-llenar-alto, lo pone app.js cuando hay una tabla [data-llenar-alto], Stock): el layout mide lo que la ventana, la barra
   lateral scrollea por su cuenta si es más alta y el contenido es lo único que queda. Sin esto, un menú largo estiraba la página y ésta scrolleaba entera: el título y
   los filtros se iban para arriba y el encabezado de la tabla quedaba tapado. */
@media (min-width: 768px) {
    body.x-llenar-alto .dms-layout { height: 100vh; min-height: 0; }
    body.x-llenar-alto .dms-sidebar { overflow-y: auto; max-height: 100vh; }
    body.x-llenar-alto .dms-main { overflow-y: auto; min-height: 0; }
}

/* El título de cada pantalla. Las 70 vistas lo escriben igual —<h1 class="h4 mb-0">— así que el
   tamaño se decide acá y no en cada una. */
.dms-content h1.h4 { font-size: var(--dms-page-title-fs); font-weight: var(--dms-page-title-weight); }
/* Títulos y cifras de KPI (las tarjetas usan .h5 para el número) en la fuente de títulos. */
.dms-content :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--dms-font-display); }

/* Íconos de línea (Ui::icono): toman el color y el tamaño del texto que los rodea. Cuál de las
   dos versiones se ve lo decide el tema (--dms-ico-emoji / --dms-ico-linea). */
.dms-ico-emoji { display: var(--dms-ico-emoji); }
.dms-ico       { display: var(--dms-ico-linea); }
.dms-ico {
    width: 1.1em; height: 1.1em; vertical-align: -.18em;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.dms-sidebar {
    width: var(--dms-sidebar-w, 240px);
    flex-shrink: 0;
    background: var(--dms-sidebar-bg);
    border-right: 1px solid var(--dms-sidebar-border);
    color: var(--dms-sidebar-text);
    display: flex;
    flex-direction: column;
    transition: width .15s ease, background-color .2s ease;
}

.dms-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--dms-brand-pad);
    font-weight: 700;
    color: var(--dms-brand-text);
    white-space: nowrap;
    overflow: hidden;
    background: var(--dms-sidebar-bg-2);
}
.brand-icon { font-size: 1.2rem; flex-shrink: 0; }

.dms-nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }

.dms-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: var(--dms-nav-py) 12px;
    border: none;
    background: none;
    border-radius: var(--dms-radius-btn);
    color: var(--dms-sidebar-text);
    text-decoration: none;
    text-align: left;
    font-size: var(--dms-nav-fs);
    white-space: nowrap;
    cursor: pointer;
}
.dms-nav-item:hover { background: var(--dms-sidebar-hover-bg); color: var(--dms-sidebar-text-hover); }
.dms-nav-item.active { background: var(--dms-sidebar-active-bg); color: var(--dms-sidebar-active-text);
                      box-shadow: inset 2px 0 0 var(--dms-nav-indicator); }

.nav-icon { width: 20px; text-align: center; flex-shrink: 0; }
.nav-caret { margin-left: auto; font-size: .7rem; transition: transform .15s ease; }
.dms-nav-parent[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.submenu { display: flex; flex-direction: column; padding: 2px 0 2px 38px; }
.dms-subitem {
    padding: var(--dms-sub-py) 12px;
    color: var(--dms-sidebar-sub-text);
    text-decoration: none;
    font-size: var(--dms-sub-fs);
    border-radius: 6px;
    white-space: nowrap;
}
.dms-subitem:hover { color: var(--dms-sidebar-text-hover); background: var(--dms-sidebar-hover-bg); }
.dms-subitem.active { color: var(--dms-sidebar-text-hover); font-weight: 600; box-shadow: inset 2px 0 0 var(--dms-nav-indicator); }

/* Badge de notificación (ej. reservas pendientes) */
.dms-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #dc3545;
    border-radius: 9px;
}
.dms-subitem { display: flex; align-items: center; }
.nav-caret + .dms-badge, .dms-badge + .nav-caret { margin-left: 6px; }
/* En modo colapsado el badge flota sobre el ícono */
.sidebar-collapsed .dms-nav-item { position: relative; }
.sidebar-collapsed .dms-nav-item .dms-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    margin: 0;
    min-width: 16px;
    height: 16px;
    font-size: .6rem;
}

/* Mini-KPIs del inicio */
.dms-kpi-mini { transition: background .12s ease, transform .12s ease; }
.dms-kpi-mini:hover { background: var(--dms-sidebar-hover-bg, #f1f3f5); transform: translateY(-2px); }

/* Estado colapsado (solo íconos) en escritorio */
.sidebar-collapsed .dms-sidebar { width: var(--dms-sidebar-collapsed-w, 64px); }
.sidebar-collapsed .nav-label { display: none; }
.sidebar-collapsed .submenu { display: none !important; }
.sidebar-collapsed .dms-nav-item { justify-content: center; gap: 0; }

/* ── Topbar ───────────────────────────────────────────────── */
.dms-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--dms-topbar-py) 18px;
    background: var(--dms-surface);
    border-bottom: 1px solid var(--dms-border);
}
.dms-toggle {
    border: none;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--dms-text-2);
    padding: 4px 8px;
    border-radius: 6px;
}
.dms-toggle:hover { background: var(--dms-bg); }

/* Título y acciones de la pantalla, mudados desde la vista (dmsSubirTitulo, layouts/app.php). Todo
   en UN renglón: el título se corta con "…" y lo demás no se achica ni se parte; si así no entra,
   el script lo devuelve a la vista. Los !important son contra las utilidades de Bootstrap que trae
   cada vista (mb-2, flex-wrap), que también llevan !important. */
.dms-topbar__pagina { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.dms-topbar__pagina:empty { display: none; }
.dms-topbar__pagina > *, .dms-topbar__pagina .d-flex { flex-wrap: nowrap !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.dms-topbar__pagina > * { flex-shrink: 0; }
.dms-topbar__pagina > :has(> h1) { flex-shrink: 1; min-width: 0; }
.dms-topbar__pagina h1 { flex-shrink: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                           font-family: var(--dms-font-display); font-weight: var(--dms-page-title-weight);
                           font-size: calc(1.15rem / var(--dms-fontscale, 1)); }

/* Buscador: chico, con el atajo a la vista. */
.dms-search { position: relative; }
.dms-search .form-control { width: 190px; padding-right: 52px; }
.dms-search__kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none;
                   font-size: calc(.68rem / var(--dms-fontscale, 1)); padding: 1px 5px; background: var(--dms-surface-2);
                   color: var(--dms-text); border: 1px solid var(--dms-border); border-radius: 4px; }
.dms-search .form-control:focus + .dms-search__kbd { display: none; }
.dms-topbar__fav { min-width: 34px; justify-content: center; padding-left: 6px; padding-right: 6px; }
.dms-topbar__fav-txt { max-width: 9rem; }

/* Menú del usuario: un círculo con las iniciales; adentro, secciones que se despliegan. Fondo neutro
   y no el primario: con texto blanco sobre el primario, Oscuro y Editorial no llegaban a 4,5:1. */
.dms-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
              background: var(--dms-surface-2); color: var(--dms-text); border: 1px solid var(--dms-border);
              font-weight: 700; font-size: calc(.8rem / var(--dms-fontscale, 1)); cursor: pointer; }
.dms-avatar:hover, .dms-avatar[aria-expanded="true"] { border-color: var(--dms-primary); }
.dms-avatar:focus-visible { outline: 2px solid var(--dms-primary); outline-offset: 2px; }
.dms-usermenu { min-width: 290px; }
.dms-usermenu__sec > summary { cursor: pointer; list-style: none; border-radius: 6px; }
.dms-usermenu__sec > summary::-webkit-details-marker { display: none; }
.dms-usermenu__sec > summary::after { content: "›"; float: right; color: var(--dms-text-2); transition: transform .15s; }
.dms-usermenu__sec[open] > summary::after { transform: rotate(90deg); }
.dms-usermenu__fila { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px var(--bs-dropdown-item-padding-x, 1rem); }
/* En el celular, blancos de dedo de 44px. */
@media (max-width: 767.98px) {
    .dms-usermenu .dropdown-item, .dms-usermenu__sec > summary { min-height: 44px; display: flex; align-items: center; }
    .dms-usermenu__sec > summary::after { margin-left: auto; }
}

/* ── Escala de los listados ───────────────────────────────────────────────────
   El tamaño de letra de una tabla NO se escribe en la vista. Antes sí, y el resultado fue 24
   listados con 9 tamaños distintos —de .66rem a .85rem, más cinco sin nada que heredaban el 1rem
   de Bootstrap— sin ninguna razón detrás: `lasteniaTbl` y `finTbl` tienen las mismas 15 columnas
   y estaban a .8 y a .66. No es densidad, es que cada uno eligió por su cuenta.

   Son dos pasos y ninguno más:
     .dms-tabla         el listado normal. Sirve hasta 15 columnas — está probado, es lo que usan
                        Reservas y Lastenia, que son las más anchas del sistema.
     .dms-tabla--densa  sólo cuando las columnas son DINÁMICAS y pueden pasar de ~15 (Auditoría de
                        reservas llega a 19 según cuántos conceptos difieran). No es para ganar
                        una fila más en pantalla: es para que no se rompa el ancho.

   Si una tabla necesita otro tamaño, el que está mal es el tamaño de la tabla, no la escala. */
.dms-tabla        { font-size: var(--dms-tabla-fs); }
.dms-tabla--densa { font-size: var(--dms-tabla-densa-fs); }

/* ── Encabezado y celdas: una sola forma para todos los listados ──────────────
   Con :where() para que la especificidad quede en el piso: una tabla con reglas propias (la lista
   de precios, que pinta el encabezado con el color de la marca) sigue ganando sin !important. */
:where(.table) > thead > tr > th {
    font-size: var(--dms-th-fs);
    font-weight: var(--dms-th-weight);
    text-transform: var(--dms-th-transform);
    letter-spacing: var(--dms-th-spacing);
    color: var(--dms-th-color);
}
.table > :not(caption) > * > *    { padding: var(--dms-table-py) var(--dms-table-px); }
.table-sm > :not(caption) > * > * { padding: var(--dms-cell-py) var(--dms-cell-px); }

/* ── Encabezados de tabla fijos al scrollear ──────────────────
   Las tablas de datos (dentro de .table-responsive) scrollean dentro de su contenedor y el
   encabezado (thead) queda pegado arriba. Se acota la altura para que el scroll ocurra ahí. */
.table-responsive { max-height: calc(100vh - 200px); }
.table-responsive > table > thead > tr > th,
.table-responsive > table > thead > tr > td {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--dms-th-bg);
    box-shadow: inset 0 -1px 0 var(--dms-border-strong);
}

/* ── Stock: el bloque de precios ──────────────────────────────────────────────
   Las cuatro columnas de plata —precio de lista, gastos, total y bonificado— van sobre un fondo
   distinto para leerse como un bloque y no como cuatro columnas sueltas al final de la tabla.

   Era amarillo (el token del badge) y se destacaba MÁS que los datos del auto, que es lo que se
   busca primero. Un gris apenas separado de la superficie alcanza para agrupar sin gritar, y
   --dms-surface-2 es el token que ya usan los chips y los fondos sutiles, así que acompaña al tema
   —en los oscuros es un gris oscuro, no un amarillo apagado—. */
/* Sólo el ENCABEZADO lleva el fondo del bloque. Las celdas NO: un fondo propio tapaba el gris alternado por modelo (data-zebra-grupo) y la columna quedaba en un celeste/gris fijo que cortaba
   el rayado de la grilla (Gabi, 28/10/2026). Sin fondo propio siguen los grises de la fila a lo largo de todo el ancho; el borde izquierdo de abajo es lo que marca dónde empieza el bloque. */
.dms-tabla th.stock-precio { background: var(--dms-surface-2); }
/* El borde marca dónde empieza el bloque. Sólo a la izquierda de la primera: cuatro bordes serían
   una tabla dentro de la tabla. */
.dms-tabla th.stock-precio:first-of-type,
.dms-tabla td.stock-precio:first-of-type { border-left: 1px solid var(--dms-border-strong); }
/* EL PRECIO DE VENTA DE CONTADO de Audi es el número que se le dice al cliente: centrado, en negrita y en el azul del tema (--dms-info, que es azul
   en todos), y lo más angosto posible —el título se parte en tres renglones en vez de ensanchar la columna—. */
.dms-tabla th.stock-titulo-compacto { white-space: normal; text-align: center; line-height: 1.15; width: 1%; min-width: 4.5rem; max-width: 5.5rem; }   /* un título largo en varios renglones, centrado, en vez de ensanchar la columna */
.dms-tabla th.stock-contado { white-space: normal; text-align: center; line-height: 1.15; width: 1%; min-width: 4.5rem; max-width: 5.5rem; }
.dms-tabla td.stock-contado { text-align: center; font-weight: 700; color: var(--dms-info); width: 1%; }
.dms-tabla td.stock-contado .fw-semibold { font-weight: 700; }
/* El campo editable no lleva fondo propio: sobre el gris del bloque, un blanco recortado parece un
   error de pintado. El foco lo sigue marcando el outline de Bootstrap. */
/* El campo comparte la celda con el "USD" de adelante, así que el `margin-left:auto` se lo lleva
   el contenedor: acá dejaría el prefijo pegado al borde izquierdo y el campo al derecho, con un
   hueco en el medio. */
.dms-tabla .stock-precio-inp {
    width: 96px;
    background: transparent;
    border-color: var(--dms-border);
}
.dms-tabla .stock-precio-inp:hover { border-color: var(--dms-border-strong); }

/* ── Columnas con ancho fijado por el usuario ─────────────────────────────────
   El ancho en píxeles va inline (es un número por columna, no un estilo compartido); lo que va acá
   es el recorte, que sí es siempre el mismo. Sin el overflow, un modelo largo estira la celda y el
   max-width no sirve de nada. El texto completo queda en el title de la celda. */
.dms-tabla th.col-ancho,
.dms-tabla td.col-ancho {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── El botón de filtro de cada columna (tablefilter.js) ──────────────────────
   Vivía como estilo inline adentro del JS, y un inline le gana a cualquier clase: no se podía
   mover ni agrandar desde acá. Estos valores son los mismos que tenía, así que ningún listado
   cambia de aspecto; lo que cambia es que ahora se puede ajustar donde haga falta. */
.col-filter-btn {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--dms-text-3);
    font-size: .75rem;
    padding: 0 2px;
}
/* La flecha de orden, por el mismo motivo que el botón: su aspecto vivía inline adentro del JS, y
   un inline no se puede adaptar a un encabezado con otro fondo. Mismos valores que tenía. */
.tf-arrow { margin-left: 3px; color: var(--dms-primary); font-size: .7rem; }

/* Con un filtro puesto en esa columna: el botón lo dice, que es lo que evita mirar una lista
   recortada creyendo que está entera. */
.col-filter-btn.tf-on { color: var(--dms-primary); }

/* ── Lista de precios ─────────────────────────────────────────────────────────
   La tabla de precios no es un listado más: son diez columnas de números casi iguales entre sí
   —"Conc. Neto", "Conc. IVA", "Púb. Neto"…— y la fila que importa es la del modelo que se está
   mirando. Antes se resolvía apretando todo (letra .8, padding .2rem) y el resultado era una
   planilla gris donde no se distinguía una marca de otra ni una fila de la de al lado.

   Tres cosas la hacen legible, y ninguna es un color escrito a mano:

   1. EL COLOR SALE DE LA MARCA. `data-marca` alimenta --tp-marca con el token --marca-<x> que ya
      usan los chips, y de ahí sale todo el resto. Sumar una marca es sumar su token, como en
      `.chip--<x>`. GAC y Jetour van con el encabezado tiznado; Audi, con el color pleno — el
      porqué está abajo, en el bloque de tokens.
   2. EL ANCHO DE CADA COLUMNA SALE DE SU DATO MÁS LARGO. La celda editable es un <input>, y un
      input no le pide ancho a su texto sino al padre: sin un mínimo, el navegador la achica y el
      dato se ve cortado con la base entera adentro.
   3. EL PREFIJO REPETIDO SE ESCRIBE UNA VEZ, arriba y en chico (ver Precio::grupoDeHeader), y la
      primera columna del grupo lleva la línea de la marca. Seis encabezados que empiezan igual se
      leen como seis columnas iguales.

   Los números van en --dms-mono con tabular-nums: sin eso las comas de los importes bailan de fila
   en fila y la columna deja de leerse como columna. */
table.tabla-precios                      { --tp-marca: var(--dms-neutral); --tp-marca-txt: var(--dms-on-primary); }
table.tabla-precios[data-marca="audi"]   { --tp-marca: var(--marca-audi);   --tp-marca-txt: var(--marca-audi-txt); }
table.tabla-precios[data-marca="jetour"] { --tp-marca: var(--marca-jetour); --tp-marca-txt: var(--marca-jetour-txt); }
table.tabla-precios[data-marca="gac"]    { --tp-marca: var(--marca-gac);    --tp-marca-txt: var(--marca-gac-txt); }
table.tabla-precios[data-marca="usados"] { --tp-marca: var(--marca-usados); --tp-marca-txt: var(--marca-usados-txt); }
table.tabla-precios[data-marca="mg"]     { --tp-marca: var(--marca-mg);     --tp-marca-txt: var(--marca-mg-txt); }

/* ── El encabezado: tiznado por defecto, pleno en Audi ──────────────────────────────────────
   HAY DOS FORMAS Y NO ES INDECISIÓN. El tinte del 12% funciona cuando el color de la marca TIENE
   color: sobre blanco, el rojo de GAC da un rosa, el ámbar de Jetour un crema y el violeta de MG un
   lila, y las tres listas se reconocen enseguida sin que ninguna grite.

   Con Audi no funciona porque su color es casi negro: un doceavo de negro es un gris frío que no se
   lee como "Audi" sino como "tabla sin marca". Para eso está el color pleno, que ahí sí dice de
   quién es la lista.

   MG estuvo un rato del lado del pleno, cuando todavía tenía su rojo de fábrica y había que
   separarla de GAC a la fuerza. Con el violeta ya se distingue sola, y el pleno le quedaba
   demasiado fuerte para una lista que se mira todo el día.
   TODO LO DEMÁS SE ESCRIBE UNA VEZ y lee estos tokens. La alternativa era duplicar cada regla con
   un selector por marca, y entonces la marca que venga mañana entra tocando quince reglas en vez
   de declarar seis valores acá. */
table.tabla-precios {
    --tp-cab-bg:    color-mix(in oklab, var(--tp-marca) 12%, var(--dms-surface));
    --tp-cab-txt:   color-mix(in oklab, var(--tp-marca) 35%, var(--dms-text));
    --tp-cab-tenue: var(--dms-text-3);       /* el grupo y el número de fila, apagados */
    --tp-cab-ctl:   var(--dms-text);         /* las casillas de Stock y Visible */
    --tp-cab-borde: var(--tp-marca);         /* la regla de abajo del encabezado */
    --tp-cab-sep:   var(--tp-marca);         /* la línea que separa Concesionario de Público */
    --tp-dest-tit:  var(--tp-dest);          /* el título de las dos columnas destacadas */
    /* El rayado se lo dejamos a Bootstrap y sólo le cambiamos el color: así el hover —que pinta por
       --bs-table-bg-state— le sigue ganando al rayado, que pinta por --bs-table-bg-type. Pintar el
       fondo de la celda a mano rompía eso y la fila bajo el mouse dejaba de resaltarse. */
    --bs-table-striped-bg: color-mix(in oklab, var(--tp-marca) 6%, transparent);
}
table.tabla-precios[data-marca="audi"] {
    --tp-cab-bg:    var(--tp-marca);
    --tp-cab-txt:   var(--tp-marca-txt);
    /* Apagado SOBRE EL COLOR PLENO: un gris fijo ahí encima desaparece. */
    --tp-cab-tenue: color-mix(in oklab, var(--tp-marca-txt) 70%, transparent);
    --tp-cab-ctl:   var(--tp-marca-txt);
    --tp-cab-borde: transparent;             /* una regla del color del fondo no es una regla */
    --tp-cab-sep:   color-mix(in oklab, var(--tp-marca-txt) 45%, transparent);
    /* El título de las destacadas NO se pinta sobre el color: texto de color sobre fondo de color
       se pierde. Arriba las marca la barra de abajo; el color queda en el cuerpo, con los números. */
    --tp-dest-tit:  var(--tp-marca-txt);
    /* Y las filas quedan limpias: con el encabezado ya pintado entero, teñir además el rayado es
       repetir lo mismo dos veces encima de los importes. */
    --bs-table-striped-bg: var(--dms-surface-2);
}

table.tabla-precios > thead > tr > th,
table.tabla-precios > tbody > tr > td { padding: .3rem .5rem; }

/* LA TABLA NO SE ESTIRA PARA LLENAR EL ANCHO. Bootstrap le pone `width: 100%`, que está bien con
   veinte columnas —ahí la tabla ya desborda y .table-responsive scrollea— y es un desastre con dos:
   la lista de Jetour que ve un vendedor tiene Modelo y Precio, y el 100% las inflaba hasta media
   pantalla cada una, con el precio perdido en el medio de su celda.
   El ancho mínimo de cada columna lo sigue poniendo el contenido (style="min-width:…ch" en el th). */
table.tabla-precios { width: auto; }
/* Y ninguna columna de texto se vuelve una franja: un nombre de modelo largo no justifica 40rem. */
.tabla-precios td.tp-txt, .tabla-precios th.tp-txt { max-width: 26rem; }

table.tabla-precios > thead > tr > th {
    background: var(--tp-cab-bg);
    color: var(--tp-cab-txt);
    border-bottom: 2px solid var(--tp-cab-borde);
    box-shadow: none;              /* pisa el inset gris que .table-responsive le pone a todo thead */
    vertical-align: bottom;
    white-space: normal;
}

/* EL BOTÓN DE FILTRO Y LA FLECHA DE ORDEN VAN CON EL TÍTULO, a su derecha. El motor los mete
   adentro de la etiqueta (.tf-label), así que acá sólo hay que darles tamaño y color: más grandes
   que en el resto de los listados —en esta celda compiten con dos casillas y un campo de texto— y
   con el color del encabezado de la marca, porque sobre el negro de Audi un gris fijo no se ve. */
.tabla-precios .col-filter-btn {
    font-size: 1rem; line-height: 1; padding: 0 0 0 .15rem; vertical-align: middle;
    color: var(--tp-cab-tenue);
}
.tabla-precios .col-filter-btn:hover,
.tabla-precios .col-filter-btn.tf-on { color: var(--tp-cab-txt); }
.tabla-precios .tf-arrow             { color: var(--tp-cab-txt); font-size: .82rem; }

/* CADA COLUMNA SE ALINEA DE UNA SOLA MANERA, TÍTULO Y DATO.
   Antes el título iba centrado y el dato donde cayera. Con el campo editable no se notaba —el input
   ocupa la celda entera y alinea el número a la derecha—, pero un VENDEDOR no edita: ve el texto
   pelado, que caía a la izquierda debajo de un título centrado. Ése es el "precio mal alineado" de
   la lista de Jetour.
   Números a la derecha, porque una columna de importes sirve para compararlos de arriba abajo y
   para eso tienen que arrancar todos del mismo lado; texto y códigos a la izquierda. El encabezado
   sigue a su dato y no al revés. */
.tabla-precios th.tp-num  .tp-titulo,
.tabla-precios th.tp-num  .tp-grupo  { text-align: right; }
.tabla-precios th.tp-txt  .tp-titulo,
.tabla-precios th.tp-txt  .tp-grupo,
.tabla-precios th.tp-col-codigo .tp-titulo,
.tabla-precios th.tp-col-codigo .tp-grupo { text-align: left; }

.tabla-precios td.tp-num {
    text-align: right;
    font-family: var(--dms-mono); font-variant-numeric: tabular-nums;
}
.tabla-precios td.tp-txt { text-align: left; }

/* Las casillas de configuración quedan SIEMPRE a la izquierda, siga el título la alineación que
   siga: son tres renglones con un cuadradito adelante, y acompañar al título los haría bailar de
   columna en columna. */
.tabla-precios thead .admin-ctl { text-align: left; }

/* El grupo va en su caja aunque esté vacío: si no, la columna sin grupo sube su título y los
   encabezados quedan a dos alturas distintas. */
.tabla-precios .tp-grupo {
    font-size: .68rem; font-weight: 600; line-height: 1.1;
    color: var(--tp-cab-tenue);
    min-height: 1.1em;
}
/* Los títulos van TODOS en mayúscula, y no es decoración: los encabezados vienen del PDF de cada
   marca y llegan mezclados —"CODIGO MODELO" a los gritos al lado de "Conc. Neto sin imp."—. Pasarlos
   a minúscula no se puede sin romper las siglas (IVA, CV, USD quedarían "Iva", "Cv", "Usd"), así que
   se unifican para arriba: una sola forma para los diez, venga como venga la lista. */
.tabla-precios .tp-titulo {
    font-size: .74rem; font-weight: 700; line-height: 1.15;
    text-transform: uppercase; letter-spacing: .03em;
    color: var(--tp-cab-txt);
}
/* Las casillas de configuración viven adentro del encabezado, así que van con el color de ahí: en
   Audi, negro sobre negro no se veían. */
.tabla-precios thead .admin-ctl,
.tabla-precios thead .admin-ctl .form-check-label { color: var(--tp-cab-ctl); }

/* LAS TRES CASILLAS QUEDAN A LA MISMA ALTURA EN TODAS LAS COLUMNAS.
   La causa de que bailaran era una sola: en las columnas angostas la etiqueta "🧑‍💼 Vendedores" se
   partía en dos renglones, el bloque de esa columna crecía, y como el th alinea abajo, sus casillas
   arrancaban más arriba que las de al lado — y el título, más abajo.
   NO SE ARREGLA CON UNA ALTURA FIJA. Todas las columnas tienen exactamente los mismos tres
   casilleros y el mismo campo: si nada se parte, todos los bloques miden lo mismo SOLOS, y el día
   que se agregue un cuarto nivel siguen midiendo lo mismo sin que haya que ajustar un número acá.
   Lo único que hace falta es prohibir el corte de renglón. */
.tabla-precios thead .admin-ctl {
    display: flex; flex-direction: column; gap: .05rem;
}
.tabla-precios thead .admin-ctl .form-check {
    min-height: 0; line-height: 1.2; white-space: nowrap; padding-left: 1.35em;
}
.tabla-precios thead .admin-ctl .form-check-input { margin-top: .15em; }
/* El campo del nombre en Stock se deja chico: con la altura que trae de fábrica, los cuatro
   renglones del bloque estiraban el encabezado de Audi —el que más columnas tiene— sin necesidad. */
.tabla-precios thead .admin-ctl .col-name {
    height: 1.45rem; padding: .05rem .35rem; line-height: 1.3;
}
.tabla-precios th.tp-grupo-inicio { border-left: 2px solid var(--tp-cab-sep); }
.tabla-precios td.tp-grupo-inicio { border-left: 1px solid color-mix(in oklab, var(--tp-marca) 30%, transparent); }

/* NO HAY COLUMNA FIJA. Se probó dejar el código pegado a la izquierda al scrollear en horizontal y
   el remedio salió peor: la celda fija se dibuja ENCIMA de la de al lado, así que tapaba el arranque
   del modelo —"A1 Sportback 30 TFSI" se leía "1 Sportback 30 TFSI" y "GS3 EMZOOM GB" empezaba en
   "MZOOM GB"—. Un dato cortado en una lista de precios no es un detalle de diseño. La tabla es una
   tabla entera y se mueve entera. */

.tabla-precios .tp-nro        { font-family: var(--dms-mono); font-size: .74rem; text-align: right; width: 1%; }
.tabla-precios thead .tp-nro  { color: var(--tp-cab-tenue); }
.tabla-precios tbody .tp-nro  { color: var(--dms-text-3); }
.tabla-precios .tp-dato  { font-family: var(--dms-mono); font-variant-numeric: tabular-nums; }

/* La columna que sale de una cuenta se muestra, no se ofrece para escribir. Sin casillero:
   un campo editable que se pisa solo en la próxima recarga invita a corregirlo y después no
   se entiende por qué no quedó. */
.tabla-precios .tp-calc  {
    font-family: var(--dms-mono); font-variant-numeric: tabular-nums;
    text-align: right; color: var(--dms-text-2); white-space: nowrap;
}
.tabla-precios .tp-codigo{ font-family: var(--dms-mono); font-weight: 600; white-space: nowrap; }

/* El precio de venta y el piso: las dos columnas que se leen antes que ninguna, y cada una con su
   color para no confundirlas entre sí — son dos números parecidos, uno al lado del otro, y el que
   importa es distinto según qué se esté haciendo.
   LOS COLORES SALEN DE LA PALETA DE DATOS (--dms-dato-1 y -2) y no de los tokens de estado: --dms-ok
   y --dms-danger significan "está bien" y "está mal", y un precio no es ninguna de las dos cosas.
   La paleta de datos existe justamente para distinguir categorías, y sus pasos ya están verificados
   en contraste contra la superficie de cada tema, claro y oscuro. */
.tabla-precios .tp-destacada .tp-titulo { font-size: .82rem; }
.tabla-precios .tp-destacada .cell-edit,
.tabla-precios td.tp-destacada          { font-weight: 700; font-size: 1.1em; }

/* Las dos bonificaciones que se restan (al patentamiento y propia): ROJO OSCURO y sin negrita. Es el color de peligro del tema, mezclado con el del texto para oscurecerlo: sigue al tema. */
.tabla-precios td.tp-rojo,
.tabla-precios td.tp-rojo .cell-edit,
.tabla-precios th.tp-rojo .tp-titulo { color: color-mix(in srgb, var(--dms-danger) 72%, var(--dms-text)); font-weight: 400; }

.tabla-precios .tp-destacada-1 { --tp-dest: var(--dms-dato-1); }
.tabla-precios .tp-destacada-2 { --tp-dest: var(--dms-dato-2); }
/* El color va en el texto y el fondo apenas teñido: un fondo oscuro con texto claro se pelearía
   con el rayado y con el resaltado de la fila bajo el mouse, que son los que dicen en qué renglón
   se está parado. */
/* En el cuerpo el color va siempre; el TÍTULO depende del encabezado que tenga esa lista —ver
   --tp-dest-tit—. Y la barra de abajo se ve sobre cualquier fondo, así que arriba las marca igual. */
.tabla-precios td.tp-destacada,
.tabla-precios td.tp-destacada .cell-edit { color: var(--tp-dest); }
.tabla-precios th.tp-destacada .tp-titulo { color: var(--tp-dest-tit); }
.tabla-precios th.tp-destacada            { border-bottom: 3px solid var(--tp-dest); }
.tabla-precios td.tp-destacada            { background: color-mix(in oklab, var(--tp-dest) 8%, transparent); }

/* La vigencia no es un precio: es de qué lista salió la fila. Se puede corregir, pero se lee como
   un dato al margen y no compitiendo con los importes. */
.tabla-precios .tp-meta .cell-edit { color: var(--dms-text-2); font-size: .92em; }

/* La celda se edita en el lugar: sin marco hasta que la tocás, y ahí sí se ve dónde estás parado. */
.tabla-precios .cell-edit {
    border: 1px solid transparent; background: transparent; width: 100%; min-width: 4.5rem;
    font: inherit; color: inherit; padding: .1rem .3rem; border-radius: var(--dms-radius-btn);
}
.tabla-precios .cell-edit:hover  { border-color: var(--dms-border-strong); }
.tabla-precios .cell-edit:focus  {
    border-color: var(--dms-primary); background: var(--dms-surface); outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--dms-primary) 25%, transparent);
}
.tabla-precios .cell-edit.num    { text-align: right; font-family: var(--dms-mono); font-variant-numeric: tabular-nums; }
.tabla-precios .cell-edit.saved  { border-color: var(--dms-ok);     background: var(--dms-ok-bg); }
.tabla-precios .cell-edit.err    { border-color: var(--dms-danger); background: var(--dms-danger-bg); }

.dms-brand-badge {
    background: var(--dms-badge-bg);
    color: var(--dms-badge-text);
    border-radius: 99px;
    padding: 5px 12px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Tarjetas ─────────────────────────────────────────────── */
.card {
    background: var(--dms-surface);
    border: 1px solid var(--dms-border);
    border-radius: var(--dms-radius-card);
    box-shadow: var(--dms-shadow);
    color: var(--dms-text);
}

/* Botón primario con el acento del tema */
.btn-primary {
    background-color: var(--dms-primary);
    border-color: var(--dms-primary);
    color: var(--dms-on-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--dms-primary);
    border-color: var(--dms-primary);
    color: var(--dms-on-primary);
    filter: brightness(.94);
}

/* ── Componentes de Bootstrap que un tema puede re-vestir (tokens OPCIONALES) ─────────────────
   Por qué existe: el tema Ejecutivo tiene que cambiar el ASPECTO de cien pantallas que no se van a
   reescribir —botones "outline" (169 en las vistas), avisos alert-* (~100), tarjetas con cabecera,
   formularios—, y un tema sólo puede declarar tokens (ver skill diseno-dms).
   Por qué opcionales: cada regla lee su token con el valor de Bootstrap de RESPALDO. Un tema que no
   lo declara se ve exactamente como antes, sin que haya que tocar su bloque; el que lo declara
   cambia el componente en todo el DMS. Así sumar esto no movió un píxel de los otros seis temas. */
.card { border-color: var(--dms-card-borde, var(--dms-border)); }
.card-header { background-color: var(--dms-card-cab-bg, var(--bs-card-cap-bg));
               border-bottom-color: var(--dms-card-cab-borde, var(--bs-card-border-color)); }
.card-header.fw-bold, .card-header .fw-bold { font-family: var(--dms-font-display); }

.btn, .btn-sm { --bs-btn-border-radius: var(--dms-btn-radio, var(--bs-border-radius)); }
.btn-sm       { --bs-btn-border-radius: var(--dms-btn-radio, var(--bs-border-radius-sm)); }
/* El secundario ("outline-secondary", el botón más usado del DMS) y el outline primario. Se pisan
   las propiedades y no las --bs-btn-*: Bootstrap declara esas variables en la misma clase, y
   pisarlas dejaría sin el valor original al que tiene que volver un tema que no opina. */
.btn-outline-secondary { background-color: var(--dms-btn2-bg, transparent); border-color: var(--dms-btn2-borde, var(--bs-btn-border-color));
                         color: var(--dms-btn2-txt, var(--bs-btn-color)); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible, .btn-outline-secondary.active {
    background-color: var(--dms-btn2-hover-bg, var(--bs-btn-hover-bg)); border-color: var(--dms-btn2-borde, var(--bs-btn-hover-border-color));
    color: var(--dms-btn2-hover-txt, var(--bs-btn-hover-color)); }
.btn-outline-primary { background-color: var(--dms-btn3-bg, transparent); border-color: var(--dms-btn3-borde, var(--bs-btn-border-color));
                       color: var(--dms-btn3-txt, var(--bs-btn-color)); }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible, .btn-outline-primary.active {
    background-color: var(--dms-btn3-hover-bg, var(--bs-btn-hover-bg)); border-color: var(--dms-btn3-borde, var(--bs-btn-hover-border-color));
    color: var(--dms-btn3-hover-txt, var(--bs-btn-hover-color)); }

/* Avisos: el tema elige si son el recuadro de Bootstrap o el aviso suave de los semánticos. */
.alert { --bs-alert-border-radius: var(--dms-aviso-radio, var(--bs-border-radius)); }
.alert-warning { --bs-alert-bg: var(--dms-aviso-warn-bg, var(--bs-warning-bg-subtle)); --bs-alert-color: var(--dms-aviso-warn-txt, var(--bs-warning-text-emphasis));
                 --bs-alert-border-color: var(--dms-aviso-warn-borde, var(--bs-warning-border-subtle)); }
.alert-danger  { --bs-alert-bg: var(--dms-aviso-danger-bg, var(--bs-danger-bg-subtle)); --bs-alert-color: var(--dms-aviso-danger-txt, var(--bs-danger-text-emphasis));
                 --bs-alert-border-color: var(--dms-aviso-danger-borde, var(--bs-danger-border-subtle)); }
.alert-info    { --bs-alert-bg: var(--dms-aviso-info-bg, var(--bs-info-bg-subtle)); --bs-alert-color: var(--dms-aviso-info-txt, var(--bs-info-text-emphasis));
                 --bs-alert-border-color: var(--dms-aviso-info-borde, var(--bs-info-border-subtle)); }
.alert-success { --bs-alert-bg: var(--dms-aviso-ok-bg, var(--bs-success-bg-subtle)); --bs-alert-color: var(--dms-aviso-ok-txt, var(--bs-success-text-emphasis));
                 --bs-alert-border-color: var(--dms-aviso-ok-borde, var(--bs-success-border-subtle)); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--dms-aviso-neutral-bg, var(--bs-secondary-bg-subtle)); --bs-alert-color: var(--dms-aviso-neutral-txt, var(--bs-secondary-text-emphasis));
                 --bs-alert-border-color: var(--dms-aviso-neutral-borde, var(--bs-secondary-border-subtle)); }

/* Campos: el tema puede pasarlos a "bloque suave" (fondo tenue, sin borde) como en el diseño de Stitch. */
.form-control, .form-select { background-color: var(--dms-input-bg, var(--bs-body-bg)); border-color: var(--dms-input-borde, var(--bs-border-color));
                              border-radius: var(--dms-input-radio, var(--bs-border-radius)); }
.form-control-sm, .form-select-sm { border-radius: var(--dms-input-radio, var(--bs-border-radius-sm)); }
.form-control:focus, .form-select:focus { background-color: var(--dms-input-foco-bg, var(--bs-body-bg)); }

/* ── Backdrop (móvil) ─────────────────────────────────────── */
.dms-backdrop { display: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .dms-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: var(--dms-sidebar-w, 240px);
    }
    .sidebar-open .dms-sidebar { transform: translateX(0); }
    .sidebar-collapsed .dms-sidebar { width: var(--dms-sidebar-w, 240px); }
    .sidebar-collapsed .nav-label { display: inline; }

    .sidebar-open .dms-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1040;
    }
}

/* ── Celda editable ─────────────────────────────────────────────────────────
   Para grillas donde se carga el dato en la propia tabla (Financiero → Autos a
   pagar, desde que se apagó la hoja de Google y el DMS pasó a ser la fuente).

   Un <input class="form-control"> por celda convierte la tabla en un formulario
   de 200 cajas y deja de leerse. Acá el input se ve como texto y sólo muestra
   que es editable cuando el mouse pasa o cuando tiene el foco.

   Todo sale de tokens: se ve bien en los cinco temas sin un solo selector por
   tema. Si algún día hace falta un color propio, falta un token — no un
   [data-theme] acá. */
.celda-edit {
    width: 100%;
    min-width: 0;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.2;
}
.celda-edit:hover  { border-color: var(--dms-border); }
.celda-edit:focus  { border-color: var(--dms-primary); background: var(--dms-surface);
                     outline: none; box-shadow: 0 0 0 2px var(--dms-accent-bg); }
.celda-edit::placeholder { color: var(--dms-text-3); }
/* Los importes van en la mono tabular del sistema: sin esto las columnas bailan
   al editarlas, que es justo cuando hay que comparar una con otra. */
.celda-edit.num { text-align: right; font-family: var(--dms-mono); font-variant-numeric: tabular-nums; }

/* ── Vista nueva (beta): piezas de las pantallas rediseñadas ────────────────────────────────
   Las usan las `<vista>_beta.php` (interruptor "Vista nueva" del menú 🎨, ver Ui::beta()).
   Copian la estructura del diseño "AutoDMS Executive" de Stitch (_Claude/stitch3/), pero NO son
   del tema Ejecutivo: todo lee tokens, así que se ven bien en cualquier tema. Una pieza que quiera
   un color propio está pidiendo un token, no un [data-theme] acá. Muestra viva en /admin/estilo.

   Tamaños tipográficos del diseño (DESIGN.md): título de pantalla 18 px, cifra de KPI 26 px,
   rótulo 11 px en versalita, dato tabular 13 px. */

/* Ícono de línea (Ui::ico). Del color del texto: sigue al tema. */
.dms-i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
         fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tarjeta base de la beta: blanca, sin borde, sombra mínima. */
.x-card { background: var(--dms-surface); border-radius: var(--dms-radius-card); box-shadow: var(--dms-shadow);
          border: 1px solid color-mix(in srgb, var(--dms-border) 60%, transparent); }

/* Encabezado de pantalla EN TARJETA: ícono, título, chip "En vivo", bajada y acciones. */
.x-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
          padding: 16px 20px; margin-bottom: 16px; }
.x-head__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.x-head__tit { margin: 0; font-family: var(--dms-font-display); font-size: 1.125rem; font-weight: 700;
               letter-spacing: -.01em; color: var(--dms-text); }
.x-head__sub { margin: 2px 0 0; font-size: .75rem; color: var(--dms-text-2); }
.x-head__acc { display: flex; flex-wrap: wrap; gap: 8px; }
/* El título y las acciones subieron a la barra (dmsSubirTitulo): queda sólo la bajada, como una
   línea de texto sin tarjeta. El ícono acompañaba al título; sin él, sobra. */
.x-head.x-head--subido { padding: 0 2px; margin-bottom: 12px; background: transparent; box-shadow: none; border: 0; }
.x-head--subido .x-tile { display: none; }
.x-head--subido .x-head__sub { margin: 0; }

/* Baldosa del ícono (encabezado, depósitos, KPI). */
.x-tile { display: inline-flex; align-items: center; justify-content: center; flex: none;
          width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem;
          background: var(--dms-th-light-bg); color: var(--dms-primary); }
.x-tile--ok     { background: var(--dms-ok-bg);     color: var(--dms-ok); }
.x-tile--warn   { background: var(--dms-warn-bg);   color: var(--dms-warn); }
.x-tile--danger { background: var(--dms-danger-bg); color: var(--dms-danger); }
.x-tile--info   { background: var(--dms-info-bg);   color: var(--dms-info); }

.x-vivo { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
          font-size: .6875rem; font-weight: 600; background: var(--dms-ok-bg); color: var(--dms-ok); }

/* Botones de la beta: el secundario es un bloque suave, no un contorno. */
.x-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0;
         border-radius: var(--dms-radius-btn); font-size: .8125rem; font-weight: 600; line-height: 1.3;
         text-decoration: none; cursor: pointer; white-space: nowrap;
         background: var(--dms-th-light-bg); color: var(--dms-text); box-shadow: var(--dms-shadow); }
.x-btn:hover { background: color-mix(in srgb, var(--dms-th-light-bg) 80%, var(--dms-primary)); color: var(--dms-text); }
.x-btn .dms-i { color: var(--dms-text-2); }
.x-btn--pri { background: var(--dms-primary); color: var(--dms-on-primary); }
.x-btn--pri:hover { background: color-mix(in srgb, var(--dms-primary) 85%, var(--dms-surface)); color: var(--dms-on-primary); }
.x-btn--pri .dms-i { color: inherit; }
.x-btn--sm { padding: 4px 10px; font-size: .75rem; box-shadow: none; }

/* StatCard: el KPI. Rótulo en versalita + ícono, cifra grande (de color si significa algo), pie. */
.dms-kpi { display: flex; flex-direction: column; height: 100%; padding: 16px; }
.dms-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dms-kpi__lbl { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                color: var(--dms-text-2); }
.dms-kpi__top .dms-i { font-size: 1.25rem; color: var(--dms-primary); }
.dms-kpi__val { margin-top: 8px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
                font-family: var(--dms-font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.2;
                letter-spacing: -.02em; color: var(--dms-text); font-variant-numeric: tabular-nums; }
.dms-kpi__val small { font-family: var(--dms-font); font-size: .6875rem; font-weight: 500; letter-spacing: 0;
                      color: var(--dms-text-2); }
.dms-kpi__sub { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; gap: 8px;
                font-size: .75rem; color: var(--dms-text-2); }
.dms-kpi--ok     :is(.dms-kpi__val, .dms-kpi__top .dms-i) { color: var(--dms-ok); }
.dms-kpi--warn   :is(.dms-kpi__val, .dms-kpi__top .dms-i) { color: var(--dms-warn); }
.dms-kpi--danger :is(.dms-kpi__val, .dms-kpi__top .dms-i) { color: var(--dms-danger); }
.dms-kpi--pri    .dms-kpi__val { color: var(--dms-primary); }

/* Barra apilada (mix de marcas, tramos). Cada tramo trae su ancho y su color de token por style. */
.x-segbar { display: flex; height: 6px; margin-top: 12px; border-radius: 999px; overflow: hidden;
            background: var(--dms-th-light-bg); }
.x-segbar > span { height: 100%; }
.x-segbar__ley { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px;
                 font-size: .6875rem; font-weight: 600; color: var(--dms-text-2); }

/* ActionBanner: aviso con lo que hay que hacer al lado. La variante elige el semántico. */
.dms-aviso {
    --aviso: var(--dms-info); --aviso-bg: var(--dms-info-bg);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--aviso-bg) 55%, var(--dms-surface));
    border: 1px solid color-mix(in srgb, var(--aviso) 18%, transparent);
    border-radius: var(--dms-radius-card);
    color: var(--dms-text);
}
.dms-aviso--ok     { --aviso: var(--dms-ok);     --aviso-bg: var(--dms-ok-bg); }
.dms-aviso--warn   { --aviso: var(--dms-warn);   --aviso-bg: var(--dms-warn-bg); }
.dms-aviso--danger { --aviso: var(--dms-danger); --aviso-bg: var(--dms-danger-bg); }
.dms-aviso > .x-tile { background: var(--dms-surface); color: var(--aviso); box-shadow: var(--dms-shadow); }
.dms-aviso__tit { font-weight: 700; color: var(--aviso); }
.dms-aviso__acc { margin-left: auto; }

/* Control segmentado (marca, estado): píldora blanca sobre una pista suave. Son LINKS a la misma
   pantalla con otro parámetro, no un filtro en JS: el de la tabla es tablefilter.js (regla 3). */
.dms-pills { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--dms-radius-btn);
             background: var(--dms-surface-2); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.dms-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px;
            font-size: .8125rem; font-weight: 600; color: var(--dms-text-2); text-decoration: none; white-space: nowrap; }
.dms-pill:hover { color: var(--dms-text); }
.dms-pill.is-activa { background: var(--dms-surface); color: var(--dms-primary); box-shadow: var(--dms-shadow); }
.dms-pill__n { font-weight: 400; color: var(--dms-text-2); font-variant-numeric: tabular-nums; }

/* Buscador de la barra de herramientas. */
.x-buscar { position: relative; flex: 1 1 260px; max-width: 420px; }
.x-buscar .dms-i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--dms-text-3); }
.x-buscar input { width: 100%; padding: 8px 12px 8px 36px; border: 0; border-radius: var(--dms-radius-btn);
                  background: var(--dms-surface-2); color: var(--dms-text); font-size: .8125rem; box-shadow: var(--dms-shadow); }
.x-buscar input:focus { outline: 2px solid var(--dms-accent-bg); background: var(--dms-surface); }
.x-buscar input::placeholder { color: var(--dms-text-3); }

.x-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; }
.x-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
         padding: 12px 16px; background: var(--dms-surface-2); font-size: .75rem; color: var(--dms-text-2); }
.x-pie b { color: var(--dms-text); font-variant-numeric: tabular-nums; }

/* Celda de dos renglones: el dato arriba y su aclaración abajo, más chica. */
.dms-sub2 { display: block; font-size: .6875rem; font-weight: 500; color: var(--dms-text-2); line-height: 1.35; }
.x-vin { color: var(--dms-primary); font-weight: 500; font-variant-numeric: tabular-nums; }

/* VIN con botón de copiar. */
.dms-copiar { padding: 0 4px; border: 0; background: transparent; color: var(--dms-text-3);
              font-size: .85rem; line-height: 1; cursor: pointer; }
.dms-copiar:hover { color: var(--dms-primary); }
.dms-copiar.is-ok { color: var(--dms-ok); }

/* Tarjeta de depósito (resumen al pie de Stock). */
.x-dep { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; height: 100%; }
.x-dep__n { font-family: var(--dms-font-display); font-size: 1.375rem; font-weight: 700; color: var(--dms-text);
            font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.x-dep__n small { display: block; font-family: var(--dms-font); font-size: .6875rem; font-weight: 600; color: var(--dms-ok); }

/* ── Tabla → tarjetas en el celular ─────────────────────────────────────────────────────────
   En vez de dibujar una lista aparte para el celular (que la búsqueda y los filtros de
   tablefilter.js no verían), la MISMA tabla se reacomoda: cada fila es una tarjeta y cada celda va
   a su lugar por grid-area. Así buscar, ordenar y contar funcionan igual en las dos. Cada vista
   nombra sus celdas con .xc-<area>. */
@media (max-width: 767.98px) {
    .x-cards thead { display: none; }
    .x-cards, .x-cards tbody { display: block; }
    .x-cards tbody tr { display: grid; gap: 4px 10px; margin: 0 0 12px; padding: 14px;
                        background: var(--dms-surface); border-radius: var(--dms-radius-card); box-shadow: var(--dms-shadow); }
    /* (0,1,3): gana a la celda de Bootstrap (0,1,1) pero pierde con .x-<vista> .xc-<area> (0,2,0), que
       es donde cada vista ubica y alinea sus celdas. */
    .x-cards > tbody > tr > td { display: block; padding: 0; border: 0; background: transparent; box-shadow: none;
                                      text-align: left; white-space: normal; }
    .x-cards tbody tr td:empty { display: none; }
    .x-card.x-cards-envol { background: transparent; box-shadow: none; border: 0; }
    .x-cards-envol .table-responsive { overflow: visible; }
    .x-solo-desk.x-solo-desk { display: none; }
}
@media (min-width: 768px) { .x-solo-movil.x-solo-movil { display: none; } }

/* Stock beta en el celular. Las columnas son CONFIGURABLES ("Configurar stock"), así que la tarjeta
   no puede tener un lugar fijo para cada una: arriba va lo que se mira siempre —marca, situación,
   total, modelo y el botón de reservar— y el resto de las celdas se despliega con "Ver todo"
   (tr.is-abierta, lo alterna la vista) en una grilla de dos "rótulo / dato". Nada queda escondido
   del todo: la clásica en el celular scrolleaba de costado, acá se abre.
   El rótulo sale de data-lbl con ::before y no de un <span> dentro de la celda: tablefilter.js arma
   el filtro con el texto de la celda, y un rótulo adentro terminaría en cada opción del ▾.
   Las ubicaciones van con .table.x-stock > tbody > tr > td.xc-* para ganarle al span 3 general. */
@media (max-width: 767.98px) {
    .x-stock tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; align-items: start;
                        grid-template-areas: "marca marca sit sit total total"
                                             "modelo modelo modelo modelo total total"
                                             "reserva reserva reserva reserva mas mas"
                                             "opc opc opc opc opc opc"; }
    .table.x-stock > tbody > tr > td { grid-column: span 3; min-width: 0; font-size: .8125rem; overflow-wrap: anywhere; }
    .table.x-stock > tbody > tr:not(.is-abierta) > td:not(.xc-marca, .xc-sit, .xc-modelo, .xc-total, .xc-reserva, .xc-proforma, .xc-mas, .xc-opc, [colspan]) { display: none; }
    .table.x-stock > tbody > tr > td[data-lbl]::before { content: attr(data-lbl); display: block; margin-bottom: 1px;
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    .table.x-stock > tbody > tr > td:is(.xc-modelo, .xc-reserva)::before { content: none; }
    .table.x-stock > tbody > tr > td.xc-marca   { grid-area: marca; }
    .table.x-stock > tbody > tr > td.xc-sit     { grid-area: sit; }
    .table.x-stock > tbody > tr > td.xc-sit .chip { white-space: normal; }
    .table.x-stock > tbody > tr > td.xc-total   { grid-area: total; text-align: right; background: transparent;
        font-family: var(--dms-font-display); font-size: 1.15rem; color: var(--dms-primary); }
    .table.x-stock > tbody > tr > td.xc-modelo  { grid-area: modelo; font-family: var(--dms-font-display); font-size: 1.05rem; }
    .table.x-stock > tbody > tr > td.xc-reserva { grid-area: reserva; align-self: center; }
    .table.x-stock > tbody > tr > td.xc-mas     { grid-area: mas; justify-self: end; align-self: center; }
    /* Los opcionales de Audi: a la vista en la tarjeta cerrada, con los chips envueltos, de ancho completo. */
    .table.x-stock > tbody > tr > td.xc-opc     { grid-area: opc; grid-column: 1 / -1; max-width: none !important; }
    .table.x-stock > tbody > tr > td.xc-opc::before { content: none; }
    /* El link «Proforma»: ocupa su renglón en la tarjeta, sin rótulo. */
    .table.x-stock > tbody > tr > td.xc-proforma { grid-column: 1 / -1; text-align: left; }
    /* Para el dedo: 44 px de alto y a todo el ancho, no un botón chico pegado a «Reservar» y «Ver todo». */
    .table.x-stock > tbody > tr > td.xc-proforma .x-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; }
    .table.x-stock > tbody > tr > td.xc-proforma::before { content: none; }
    /* El vincular trae un desplegable con VIN y color: necesita el ancho entero. */
    .table.x-stock > tbody > tr > td.xc-autologica { grid-column: 1 / -1; }
}

/* Resumen flotante del celular (Stock beta): cuántas se ven y cuánto valen. */
.x-flota { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between;
           gap: 12px; margin-top: 8px; padding: 12px 16px; border-radius: 999px;
           background: var(--dms-text); color: var(--dms-surface); font-size: .8125rem; box-shadow: var(--dms-shadow); }
.x-flota b { color: var(--dms-ok-bg); font-variant-numeric: tabular-nums; }
/* En escritorio cada unidad en un renglón (dos con la aclaración): partido en cuatro, el modelo
   se lee peor y la tabla pierde la mitad de las filas visibles. */
@media (min-width: 768px) { .x-stock td { white-space: nowrap; } }

/* Resumen de un renglón del celular (Stock beta) y los puntos de estado. */
.x-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .75rem; color: var(--dms-text-2); }
.x-resumen b { color: var(--dms-text); }
.x-punto { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--dms-text-3); }
.x-punto--ok   { background: var(--dms-ok); }
.x-punto--warn { background: color-mix(in srgb, var(--dms-warn) 60%, var(--dms-warn-bg)); }
@media (max-width: 767.98px) {
    .x-head { padding: 0; margin-bottom: 12px; background: transparent; box-shadow: none; border: 0; flex-wrap: nowrap; }
    .x-head__tit { font-size: 1.25rem; }
    .x-toolbar { padding: 0 0 12px; }
    .x-toolbar .dms-pills { width: 100%; }
}
@media (max-width: 767.98px) {
    .dms-aviso { padding: 10px 12px; gap: 8px; }
    .dms-aviso > .x-tile { display: none; }
    .dms-aviso__acc { margin-left: 0; }
}

/* ── Inicio beta ── */
.x-hola { margin: 0; font-family: var(--dms-font-display); font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em;
          color: var(--dms-text); }
/* Sub-panel dentro de una tarjeta (el recuadro gris del KPI, el pie de "Ventas por marca"). */
.x-panel { padding: 10px 12px; border-radius: var(--dms-radius-btn); background: var(--dms-surface-2);
           font-size: .75rem; color: var(--dms-text-2); }
.x-panel b { color: var(--dms-text); font-variant-numeric: tabular-nums; }
.x-panel a { color: var(--dms-primary); }
.x-panel--kpi { margin-top: 12px; column-gap: 8px; }
/* Barra de progreso de una sola serie. */
.x-prog { height: 8px; border-radius: 999px; overflow: hidden; background: var(--dms-surface-2); }
.x-prog > span { display: block; height: 100%; border-radius: 999px; background: var(--dms-primary); }
/* Encabezado de sección dentro de una tarjeta. */
.x-sec { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.x-sec .x-tile { width: 36px; height: 36px; border-radius: 10px; }
.x-sec__tit { margin: 0; font-family: var(--dms-font-display); font-size: 1.125rem; font-weight: 600; color: var(--dms-text); }
.x-marca + .x-marca { margin-top: 16px; }
/* Ranking de vendedores. */
.x-rank { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--dms-radius-btn); }
.x-rank + .x-rank { margin-top: 4px; }
.x-rank.is-primero { background: var(--dms-surface-2); }
.x-rank__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
             border-radius: 50%; background: var(--dms-surface-2); color: var(--dms-text-2); font-size: .75rem; font-weight: 700; }
.x-rank__n--podio { background: var(--dms-warn-bg); color: var(--dms-warn); }
.x-rank.is-primero .x-rank__n { background: var(--dms-warn); color: var(--dms-surface); }
/* Tarjeta de estado teñida (Reservas por estado). */
.x-estado { --est: var(--dms-neutral); --est-bg: var(--dms-neutral-bg);
            display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: var(--dms-radius-card);
            background: color-mix(in srgb, var(--est-bg) 60%, var(--dms-surface)); color: var(--dms-text); text-decoration: none; }
.x-estado:hover { background: var(--est-bg); color: var(--dms-text); }
.x-estado--ok     { --est: var(--dms-ok);     --est-bg: var(--dms-ok-bg); }
.x-estado--warn   { --est: var(--dms-warn);   --est-bg: var(--dms-warn-bg); }
.x-estado--danger { --est: var(--dms-danger); --est-bg: var(--dms-danger-bg); }
.x-estado__lbl { font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--est); }
.x-estado__n { font-family: var(--dms-font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--est);
               font-variant-numeric: tabular-nums; }
.x-estado__sub { font-size: .75rem; color: var(--dms-text-2); }
@media (max-width: 767.98px) {
    .x-hola { font-size: 1.5rem; }
    .x-estado { align-items: center; text-align: center; }
    .x-estado__lbl { order: 2; text-transform: none; letter-spacing: 0; font-size: .75rem; }
}
@media (max-width: 767.98px) {
    .dms-kpi { padding: 12px; }
    .dms-kpi__lbl { font-size: .625rem; }
    .dms-kpi__val { font-size: 1.3rem; margin-top: 4px; }
    .x-panel--kpi { padding: 6px 8px; font-size: .6875rem; margin-top: 8px; }
    .x-panel--kpi.d-flex, .x-panel--kpi .d-flex { flex-wrap: wrap; column-gap: 8px; }
    .x-sec { gap: 10px; margin-bottom: 12px; }
    .x-sec__tit { font-size: 1rem; }
}

/* ── Estructura (sidebar y topbar) que un tema puede re-vestir: tokens OPCIONALES ──────────────
   Mismo criterio que los componentes de Bootstrap: sin el token, cada regla cae en el valor de
   siempre y los otros temas no cambian. El Ejecutivo pide el topbar "de vidrio" del diseño de
   Stitch (se ve el fondo de la página, desenfocado) y el logo en baldosa. */
.dms-topbar { background: var(--dms-topbar-bg, var(--dms-surface)); border-bottom-color: var(--dms-topbar-borde, var(--dms-border));
              backdrop-filter: var(--dms-topbar-filtro, none); }
.dms-topbar .btn-light { background-color: var(--dms-btn2-bg, var(--bs-btn-bg)); border-color: var(--dms-btn2-borde, var(--bs-btn-border-color));
                         color: var(--dms-btn2-txt, var(--bs-btn-color)); }
.dms-topbar .btn-light:hover { background-color: var(--dms-btn2-hover-bg, var(--bs-btn-hover-bg)); }
.dms-brand .brand-icon { display: inline-flex; align-items: center; justify-content: center;
                         width: var(--dms-brand-ico-lado, auto); height: var(--dms-brand-ico-lado, auto);
                         border-radius: 10px; background: var(--dms-brand-ico-bg, transparent); color: var(--dms-brand-ico-txt, inherit); }

/* Estado seleccionado (filtro activo) en las tarjetas de estado de las pantallas beta. */
.x-estado.is-activa { box-shadow: inset 0 0 0 2px var(--dms-primary); }
/* Hijo de flex que tiene que poder achicarse (textos con text-truncate). */
.min-w-0 { min-width: 0; }

/* ── Barra de navegación del celular (partials/navbar_movil.php) ─────────────────────────────
   Token OPCIONAL: se muestra sólo si el tema declara --dms-navbar-movil (valor de display: flex).
   Fija abajo, con el margen de seguridad del iPhone; el contenido deja lugar para que no la tape. */
.x-navbar { display: none; }
@media (max-width: 767.98px) {
    .x-navbar { display: var(--dms-navbar-movil, none); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
                justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
                background: var(--dms-topbar-bg, var(--dms-surface)); backdrop-filter: var(--dms-topbar-filtro, none);
                border-top: 1px solid var(--dms-border); }
    .x-navbar__item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 44px;
                      padding: 4px 8px; border-radius: var(--dms-radius-btn); font-size: .6875rem; font-weight: 600;
                      color: var(--dms-text-2); text-decoration: none; }
    .x-navbar__item .dms-i { font-size: 1.35rem; }
    .x-navbar__item.is-activo { color: var(--dms-primary); background: var(--dms-surface-2); }
    .dms-content { padding-bottom: calc(var(--dms-content-pad) + var(--dms-navbar-alto, 0px)); }
    /* El resumen flotante de Stock tiene que quedar arriba de la barra, no debajo. */
    .x-flota { bottom: calc(12px + var(--dms-navbar-alto, 0px)); }
}
/* El botón "¿Algo no anda?" (partials/feedback.php) va fijo abajo a la derecha: con la barra de
   navegación del celular prendida, se sube lo que ella ocupa para no taparla. */
@media (max-width: 767.98px) { .dms-feedback-btn.dms-feedback-btn { bottom: calc(16px + var(--dms-navbar-alto, 0px)); } }
/* El emoji al comienzo de un título de pantalla (lo envuelve layouts/app.php). Token OPCIONAL. */
.dms-tit-emoji { display: var(--dms-titulo-emoji, inline); }

/* Reservas beta. Selects suaves de la barra (año/mes/Autológica/mostrar): mismo bloque suave que
   el buscador, para que la barra no mezcle contornos de Bootstrap con piezas de la beta. */
.x-sel { border: 0; background-color: var(--dms-surface-2); color: var(--dms-text); font-size: .8125rem;
         box-shadow: var(--dms-shadow); }
/* Reservas beta en el celular: la tarjeta del diseño (marca + estado arriba, total a la derecha,
   cliente grande, modelo) y al pie las acciones con "Ver todo". La beta muestra las mismas 26
   columnas que la clásica; en la tarjeta, todo lo que no es el resumen (.xc-mas) va plegado y se
   despliega por fila con "Ver todo" (clase is-abierta en el <tr>): así no se esconde ningún dato
   y la tarjeta no mide 26 renglones. Cada dato desplegado lleva su rótulo de data-lbl con ::before
   (no con un <span> adentro: tablefilter.js arma el filtro con el texto de la celda). Las celdas sin
   dato (.xc-vacia: las de Lastenia en filas de GAC/Jetour, gestión que no aplica) no ocupan lugar.
   La fila vencida / paga hoy pierde el fondo de table-danger en la tarjeta (las celdas quedan
   transparentes): se marca con un filete del semántico. */
@media (max-width: 767.98px) {
    /* Sin hover no hay burbuja con el texto completo: el cliente, el vendedor y el comentario se
       leen enteros (la vista trunca con max-width: var(--xc-trunc, Npx)). */
    .x-reservas { --xc-trunc: none; }
    .x-reservas .text-truncate { white-space: normal; }
    .x-reservas tbody tr { grid-template-columns: auto 1fr auto;
                           grid-template-areas: "marca estado total" "cliente cliente total" "modelo modelo modelo"; align-items: center; }
    .x-reservas .xc-marca   { grid-area: marca; }
    .x-reservas .xc-estado  { grid-area: estado; }
    .x-reservas .xc-total   { grid-area: total; text-align: right; align-self: start; font-family: var(--dms-font-display); color: var(--dms-primary); }
    .x-reservas .xc-cliente { grid-area: cliente; font-size: 1rem; margin-top: 6px; }
    .x-reservas .xc-modelo  { grid-area: modelo; font-size: .8125rem; color: var(--dms-text-2); }
    /* Sin grid-area: cae después de los datos desplegados, que se ubican solos en filas nuevas. */
    .x-reservas .xc-accion  { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
    .x-reservas .xc-accion .me-1 { margin-right: 0; }
    .x-reservas td[colspan] { grid-column: 1 / -1; }
    .x-reservas > tbody > tr > td.xc-mas { display: none; }
    .x-reservas > tbody > tr.is-abierta > td.xc-mas { display: block; grid-column: 1 / -1; font-size: .8125rem;
        padding-top: 6px; border-top: 1px solid var(--dms-border); text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .x-reservas > tbody > tr.is-abierta > td.xc-mas.xc-vacia { display: none; }
    .x-reservas > tbody > tr.is-abierta > td.xc-mas::before { content: attr(data-lbl); display: inline-block; min-width: 8.5rem;
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    .x-reservas > tbody > tr.is-abierta > td.xc-mas .form-select { margin-top: 4px; }
    .x-reservas tbody tr.table-danger  { box-shadow: inset 4px 0 0 var(--dms-danger), var(--dms-shadow); }
    .x-reservas tbody tr.table-warning { box-shadow: inset 4px 0 0 var(--dms-warn), var(--dms-shadow); }
}

/* Autos a pagar de MG, Jetour y GAC en el celular (Financiero/Views/terminal/autos.php): la tarjeta
   muestra modelo y estado, el importe y el vencimiento —que se editan ahí mismo— y Pagar a lo ancho.
   Interno, VIN, unidad, factura y Cancelar van plegados en "Ver todo" (Cancelar lejos de Pagar, para no
   tocarlo sin querer con el pulgar). Mismo mecanismo que Reservas: .xc-mas + is-abierta + data-lbl. */
@media (max-width: 767.98px) {
    .x-terminal tbody tr { grid-template-columns: 1fr auto; grid-template-areas: "modelo estado" "usd vence" "marcar marcar" "accion accion"; align-items: center; }
    .x-terminal > tbody > tr > td.xc-marcar { grid-area: marcar; text-align: left; min-height: 44px; display: flex; align-items: center; }
    .x-terminal > tbody > tr > td.xc-marcar .form-check-input { width: 1.5rem; height: 1.5rem; }
    .x-terminal > tbody > tr > td.xc-modelo { grid-area: modelo; }
    .x-terminal > tbody > tr > td.xc-estado { grid-area: estado; justify-self: end; }
    .x-terminal > tbody > tr > td.xc-usd    { grid-area: usd; }
    .x-terminal > tbody > tr > td.xc-vence  { grid-area: vence; }
    .x-terminal > tbody > tr > td.xc-usd input { font-size: 1.125rem; }
    .x-terminal > tbody > tr > td.xc-accion { grid-area: accion; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .x-terminal > tbody > tr > td.xc-accion [data-pagar] { flex: 1 1 100%; min-height: 44px; }
    .x-terminal td[colspan] { grid-column: 1 / -1; }
    .x-terminal > tbody > tr > td.xc-mas { display: none; }
    .x-terminal > tbody > tr.is-abierta > td.xc-mas { display: block; grid-column: 1 / -1; font-size: .8125rem;
        padding-top: 6px; border-top: 1px solid var(--dms-border); overflow-wrap: anywhere; }
    .x-terminal > tbody > tr.is-abierta > td.xc-mas::before { content: attr(data-lbl); display: block;
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    .x-terminal tbody tr.is-vencida { box-shadow: inset 4px 0 0 var(--dms-danger), var(--dms-shadow); }
    /* El color va fuera del texto de la celda (ver la vista): acá se muestra junto al modelo. */
    .x-terminal > tbody > tr > td.xc-modelo::after { content: " " attr(data-color); }
    /* 44 px: lo que se toca en cada tarjeta. .btn-sm y .form-control-sm lo bajaban a 30. */
    .x-terminal .xc-vertodo, .x-terminal .xc-usd input, .x-terminal .xc-vence input { min-height: 44px; }
}
/* Ventas y beneficio (Ventas/Views/beneficio.php). En escritorio el pie con los totales queda pegado
   abajo de la caja con scroll (.table-responsive tiene tope de alto): con un año entero son cientos de
   filas y el total tiene que leerse sin bajar hasta la última.
   En el celular, tarjetas: marca, estado de la compra y el % a la vista —es lo que se viene a
   mirar—, venta / compra / beneficio en una fila con su rótulo, el incentivo para cargar, y abajo mes,
   interno y VIN. */
.x-benef tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--dms-surface);
                    box-shadow: inset 0 2px 0 var(--dms-border-strong); }
@media (max-width: 767.98px) {
    .x-benef tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
                        grid-template-areas: "marca estado pct" "cod modelo modelo" "venta compra benef" "inc inc inc" "mes interno interno" "vin vin vin"; }
    .x-benef > tbody > tr > td.xc-marca  { grid-area: marca; }
    .x-benef > tbody > tr > td.xc-estado { grid-area: estado; }
    .x-benef > tbody > tr > td.xc-pct    { grid-area: pct; text-align: right; font-family: var(--dms-font-display); font-size: 1.15rem; }
    .x-benef > tbody > tr > td.xc-modelo { grid-area: modelo; font-size: .9375rem; }
    .x-benef > tbody > tr > td.xc-cod    { grid-area: cod; font-size: .75rem; align-self: center; }
    .x-benef > tbody > tr > td.xc-venta  { grid-area: venta; }
    .x-benef > tbody > tr > td.xc-compra { grid-area: compra; }
    .x-benef > tbody > tr > td.xc-benef  { grid-area: benef; }
    .x-benef > tbody > tr > td.xc-inc     { grid-area: inc; }
    /* 44 px y 16 px de letra: se toca con el pulgar, y con menos de 16 el iPhone hace zoom al escribir. */
    .x-benef .benef-inc { min-height: 44px; font-size: 16px; }
    .x-benef > tbody > tr > td.xc-mes     { grid-area: mes; font-size: .75rem; color: var(--dms-text-2); }
    .x-benef > tbody > tr > td.xc-interno { grid-area: interno; font-size: .75rem; }
    .x-benef > tbody > tr > td.xc-vin     { grid-area: vin; font-size: .75rem; overflow-wrap: anywhere; }
    .x-benef > tbody > tr > td:is(.xc-venta, .xc-compra, .xc-benef) { font-size: .8125rem; }
    .x-benef > tbody > tr > td:is(.xc-venta, .xc-compra, .xc-inc, .xc-benef, .xc-interno, .xc-vin)::before { content: attr(data-lbl); display: block;
        font-family: var(--dms-font); font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    .x-benef td[colspan] { grid-column: 1 / -1; }
}
/* Deuda de clientes (Financiero) en el celular: cliente, saldo y "a cobrar" a la vista; el resto
   plegado en "Ver todo", como Autos a pagar. */
@media (max-width: 767.98px) {
    .x-deuda tbody tr { grid-template-columns: 1fr auto; grid-template-areas: "cliente saldo" "cobrar accion"; align-items: center; }
    .x-deuda > tbody > tr > td.xc-cliente { grid-area: cliente; }
    .x-deuda > tbody > tr > td.xc-saldo   { grid-area: saldo; text-align: right; }
    .x-deuda > tbody > tr > td.xc-cobrar  { grid-area: cobrar; }
    .x-deuda > tbody > tr > td.xc-accion  { grid-area: accion; justify-self: end; }
    .x-deuda .xc-vertodo { min-height: 44px; }
    .x-deuda td[colspan] { grid-column: 1 / -1; }
    .x-deuda > tbody > tr > td.xc-mas { display: none; }
    .x-deuda > tbody > tr.is-abierta > td.xc-mas { display: block; grid-column: 1 / -1; font-size: .8125rem;
        padding-top: 6px; border-top: 1px solid var(--dms-border); overflow-wrap: anywhere; text-align: left; }
    .x-deuda > tbody > tr.is-abierta > td.xc-mas::before { content: attr(data-lbl); display: block;
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
}
/* Facturación MG en el celular: cada venta o comprobante es una tarjeta de pocas celdas, todas a la
   vista (no hace falta "Ver todo"). Como tabla medía 710 px y el botón Facturar quedaba fuera de la
   pantalla (QA, 25/10/2026). */
@media (max-width: 767.98px) {
    .x-fact tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .x-fact > tbody > tr > td { font-size: .8125rem; overflow-wrap: anywhere; }
    .x-fact > tbody > tr > td:is(.xc-ancho, .xc-accion), .x-fact td[colspan] { grid-column: 1 / -1; }
    .x-fact > tbody > tr > td[data-lbl]::before { content: attr(data-lbl); display: block; font-family: var(--dms-font);
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    .x-fact > tbody > tr > td.xc-accion { display: flex; gap: 8px; flex-wrap: wrap; }
    .x-fact .xc-accion .btn { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Plan de cuentas: la jerarquía se lee por sangría según el nivel (la vista pone --nivel en la celda). En el
   celular la sangría se va (no entra) y la tarjeta dice "dentro de 1131 · …"; arriba código, tipo y estado. */
.cta-nivel { display: inline-block; padding-left: calc(var(--nivel, 0) * 1rem); }
/* Con las 12 columnas del Excel, en una pantalla angosta el nombre se aplastaba a una palabra por renglón:
   que la tabla scrollee de costado antes que eso. */
.x-plan td.xc-ancho { min-width: 18rem; }
/* La fila que se edita en el lugar (Editar): los campos chicos no estiran la columna. */
.x-plan tr.editando [data-campo="salto_pagina"] .form-control { width: 4.5rem; }
.x-plan tr.editando [data-campo="cta_costo"] .form-control { width: 7.5rem; }
/* Y Editar/Desactivar quedan pegados a la derecha mientras se scrollea: a 1024 px quedaban fuera de la vista (ux). */
@media (min-width: 768px) {
    .x-plan :is(td.xc-accion, thead th:last-child) { position: sticky; right: 0; background: var(--dms-surface); }
}
@media (max-width: 767.98px) {
    .cta-nivel { padding-left: 0; }
    /* Tarjeta corta (ux, 26/10/2026): el nivel ya lo dice "dentro de …" y la cuenta de costo sólo si tiene. */
    .x-plan tbody tr { grid-template-columns: auto auto 1fr auto; align-items: center;
                       grid-template-areas: "cod tipo . estado" "nom nom nom nom"; }
    .x-plan > tbody > tr > td:is(.xc-nivel, .xc-vacia) { display: none; }
    .x-plan > tbody > tr > td { font-size: .8125rem; overflow-wrap: anywhere; }
    .x-plan > tbody > tr > td.xc-cod    { grid-area: cod; font-weight: 600; }
    .x-plan > tbody > tr > td.xc-tipo   { grid-area: tipo; }
    .x-plan > tbody > tr > td.xc-estado { grid-area: estado; justify-self: end; }
    .x-plan > tbody > tr > td.xc-ancho  { grid-area: nom; font-size: .9375rem; min-width: 0; }
    /* Editar y Desactivar en su propio renglón, al final y lado a lado: en la columna de la derecha se apilaban
       y le comían el ancho al nombre (tarjetas de 260 px, ux 26/10/2026). */
    .x-plan > tbody > tr > td.xc-accion { grid-column: 1 / -1; order: 99; }
    /* Con Deshabilitar (por empresa) son tres botones: bajan de renglón en vez de salirse de la tarjeta (ux). */
    .x-plan > tbody > tr > td.xc-accion > div { flex-wrap: wrap; }
    .x-plan > tbody > tr > td.xc-accion :is(.btn, form) { flex: 1; }
    .x-plan > tbody > tr > td.xc-accion form .btn { width: 100%; }
    /* Las columnas del Excel (monetaria, balances, costo, hecho imponible…) van de a dos por renglón debajo
       del nombre, con su rótulo; las vacías no ocupan lugar. */
    .x-plan > tbody > tr > td.xc-dato   { grid-column: span 2; }
    .x-plan > tbody > tr > td.xc-dato::before { content: attr(data-lbl) ": "; color: var(--dms-text-2); }
    /* En edición se ven todos los campos, también los vacíos (si no, no hay dónde tildar "Monetaria"). */
    .x-plan > tbody > tr.editando > td.xc-dato { display: block; }
    .x-plan .xc-accion .btn { min-height: 44px; }
}
/* Libros de Contabilidad (diario, mayor, sumas y saldos). En el diario la primera línea de cada asiento lleva un
   filete arriba: las líneas siguientes repiten fecha y número, y sin la raya no se ve dónde empieza el próximo. */
.x-diario > tbody > tr.diario-inicio > td { border-top: 2px solid var(--dms-border-strong); }
@media (max-width: 767.98px) {
    /* Tarjeta de dos columnas con rótulo (gotchas: una x-cards sin clase propia no dibuja los data-lbl). */
    .x-diario tbody tr, .x-sumas tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    :is(.x-diario, .x-sumas) > tbody > tr > td { font-size: .8125rem; overflow-wrap: anywhere; }
    :is(.x-diario, .x-sumas) > tbody > tr > td:is(.xc-ancho, .xc-cuenta, .xc-det), :is(.x-diario, .x-sumas) td[colspan] { grid-column: 1 / -1; }
    :is(.x-diario, .x-sumas) > tbody > tr > td[data-lbl]::before { content: attr(data-lbl); display: block; font-family: var(--dms-font);
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    :is(.x-diario, .x-sumas) > tbody > tr > td.xc-vacia { display: none; }
    /* Cada línea es una tarjeta: la primera de cada asiento se separa más, y Debe y Haber no cambian de lugar cuando
       falta uno (si no, se distinguían sólo por el rótulo, ux). */
    .x-diario > tbody > tr.diario-inicio > td { border-top: 0; }
    .x-diario > tbody > tr.diario-inicio { margin-top: 22px; border-top: 3px solid var(--dms-border-strong); }
    .x-diario > tbody > tr > td:is(.xc-debe, .xc-haber).xc-vacia { display: block; visibility: hidden; }
    /* El pie de totales también en grilla: con cuatro importes en fila pasaba los 375 px (sumas y saldos, 413). */
    :is(.x-diario, .x-sumas) tfoot tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; padding: 10px 14px; }
    :is(.x-diario, .x-sumas) tfoot td { display: block; padding: 0; border: 0; text-align: left; }
    :is(.x-diario, .x-sumas) tfoot td[colspan] { grid-column: 1 / -1; }
    :is(.x-diario, .x-sumas) tfoot td[data-lbl]::before { content: attr(data-lbl); display: block; font-size: .625rem; font-weight: 600;
        letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    /* Los renglones del asiento manual: número y cuenta arriba, Debe y Haber, y detalle y sucursal. La tabla y el
       tbody pasan a bloque: con la tabla en display:table el tr en grilla se achicaba al contenido (199 de 342 px, ux). */
    .x-asiento, .x-asiento tbody { display: block; }
    .x-asiento thead { display: none; }
    .x-asiento tbody tr { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 6px;
        grid-template-areas: "n cta cta x" "debe debe haber haber" "det det suc suc"; padding: 10px 12px; border-bottom: 1px solid var(--dms-border); }
    .x-asiento > tbody > tr > td { display: block; padding: 0; border: 0; }
    .x-asiento > tbody > tr > td:nth-child(1) { grid-area: n; padding-top: 12px; }
    .x-asiento > tbody > tr > td:nth-child(2) { grid-area: cta; }
    .x-asiento > tbody > tr > td:nth-child(3) { grid-area: debe; }
    .x-asiento > tbody > tr > td:nth-child(4) { grid-area: haber; }
    .x-asiento > tbody > tr > td:nth-child(5) { grid-area: det; }
    .x-asiento > tbody > tr > td:nth-child(6) { grid-area: suc; }
    .x-asiento > tbody > tr > td:nth-child(7) { grid-area: x; }
    .x-asiento .form-control, .x-asiento .form-select, .x-asiento .btn { min-height: 44px; }
}
/* Facturas de compra (MG) en el celular: tarjeta de dos columnas con rótulo en cada celda (sin clase propia
   los data-lbl no se dibujaban y quedaban cinco importes sin nombre, ux 26/10/2026). A la vista factura,
   fecha, concepto, total y Autos a pagar; neto, IVA, TC, pesos y la unidad, con "Ver todo". */
@media (max-width: 767.98px) {
    .x-compras tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .x-compras > tbody > tr > td { font-size: .8125rem; overflow-wrap: anywhere; text-align: left; }
    .x-compras > tbody > tr > td:is(.xc-ancho, .xc-accion), .x-compras td[colspan] { grid-column: 1 / -1; }
    .x-compras > tbody > tr > td[data-lbl]::before { content: attr(data-lbl); display: block; font-family: var(--dms-font);
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    .x-compras > tbody > tr > td.xc-mas { display: none; }
    .x-compras > tbody > tr.is-abierta > td.xc-mas { display: block; }
    .x-compras > tbody > tr > td.xc-accion { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
    .x-compras .xc-accion .btn { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Vencida en escritorio: filete rojo a la izquierda y el chip; la fila no se pinta entera. */
.x-terminal tbody tr.is-vencida > td:first-child { box-shadow: inset 4px 0 0 var(--dms-danger); }
/* El contador de la solapa activa sobre el fondo primario: con el chip neutral no se leía. */
.x-terminal-solapas .nav-link.active .chip { background: var(--dms-surface); color: var(--dms-primary); }

/* Autos/Repuestos a pagar beta en el celular: la tarjeta resumen ocupa el ancho y las dos casillas
   de marcar + Pagar quedan en un renglón, en vez de tres renglones sueltos. */
@media (max-width: 767.98px) {
    #finTbl.x-cards tbody tr, #finRepTbl.x-cards tbody tr { grid-template-columns: 1fr 1fr auto; align-items: center; }
    #finTbl.x-cards tbody tr > td:first-child, #finRepTbl.x-cards tbody tr > td:first-child,
    #finTbl.x-cards tbody tr > td[colspan], #finRepTbl.x-cards tbody tr > td[colspan] { grid-column: 1 / -1; }
}
/* Operaciones en Curso / Autos completo / Entregadas / Auditoría beta en el celular. Las columnas
   son CONFIGURABLES (cada pantalla y cada admin elige las suyas), así que la tarjeta no puede tener
   un lugar fijo para cada una como la de Stock: cliente arriba (lo que se busca), saldo arriba a la
   derecha (por lo que se abre la pantalla), y el resto en una grilla de tres "rótulo / dato". Las
   celdas sin dato (.xc-vacia, la marca la vista) no ocupan lugar: con 20 columnas visibles la
   tarjeta pasaba la pantalla entera y la mitad eran guiones.
   El rótulo sale de data-lbl con ::before y no de un <span> dentro de la celda: tablefilter.js arma
   el filtro con el texto de la celda, y un rótulo adentro terminaría en cada opción del ▾. */
@media (max-width: 767.98px) {
    .x-deuda tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
    .table.x-deuda > tbody > tr > td { font-size: .8125rem; min-width: 0; overflow-wrap: anywhere; }
    .table.x-deuda > tbody > tr > td.xc-vacia { display: none; }
    /* Los chips de aviso ("sin imputar USD…", "falta facturar…") no parten línea y se salían de la
       tarjeta al lado del nombre del cliente. */
    .table.x-deuda > tbody > tr > td .chip { white-space: normal; max-width: 100%; }
    .table.x-deuda > tbody > tr > td::before { content: attr(data-lbl); display: block; margin-bottom: 1px;
        font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dms-text-2); }
    .table.x-deuda > tbody > tr > td:is(.xc-cliente, .xc-saldo, [colspan])::before { content: none; }
    .table.x-deuda > tbody > tr > td.xc-cliente { grid-column: 1 / span 2; grid-row: 1;
        font-family: var(--dms-font-display); font-size: 1rem; }
    .table.x-deuda > tbody > tr > td.xc-saldo { grid-column: 3; grid-row: 1; text-align: right;
        font-family: var(--dms-font-display); font-size: 1.05rem; }
    /* Los desplegables de gestión y el comentario necesitan el ancho entero para leerse. */
    .table.x-deuda > tbody > tr > td:is(.xc-marca_modelo, .xc-op_estado, .xc-op_asignado, .xc-cobrador,
        .xc-comentario, .xc-aud_pendiente, [colspan]) { grid-column: 1 / -1; }
    /* Reserva del DMS sin ingresar en Autológica, y entregada con saldo: el teñido de escritorio vive
       en las celdas, que en la tarjeta son transparentes. Se le pasa a la tarjeta. */
    .x-deuda tbody tr.op-pend-autologica { background: color-mix(in srgb, var(--dms-warn-bg) 70%, var(--dms-surface));
        box-shadow: inset 3px 0 0 0 var(--dms-warn), var(--dms-shadow); }
    .x-deuda tbody tr.table-danger { background: color-mix(in srgb, var(--dms-danger-bg) 70%, var(--dms-surface));
        box-shadow: inset 3px 0 0 0 var(--dms-danger), var(--dms-shadow); }
}
/* GENERAL, no sólo de esta pantalla: .table-responsive trae max-height (calc(100vh - 200px)) para
   que las tablas de escritorio scrolleen adentro con el encabezado fijo. En el celular la tabla
   hecha tarjetas pone overflow: visible, así que las tarjetas se salen de esa altura, se pisan con
   el pie y la .x-card (overflow-hidden) corta el resto: se ven ~600 px de tarjetas y nada más.
   Stock beta usa las mismas clases y debería tener el mismo problema. */
@media (max-width: 767.98px) {
    .x-cards-envol .table-responsive { max-height: none; }
}
/* Deuda beta en el celular: la tarjeta muestra las primeras columnas configuradas (más cliente,
   saldo y las de gestión, siempre) y el resto queda PLEGADO detrás de "Ver todo (N datos más)".
   Plegado y no escondido: en el celular tampoco puede faltar un dato que la clásica muestra.
   "Autos completo" tiene todas las columnas del archivo y cada tarjeta abierta mide ~2.500 px:
   plegadas, las 72 operaciones siguen siendo una lista que se recorre. La vista marca .xc-mas y
   el botón alterna .is-abierta en su fila. */
@media (max-width: 767.98px) {
    .table.x-deuda > tbody > tr:not(.is-abierta) > td.xc-mas { display: none; }
    .table.x-deuda > tbody > tr > td.xc-vertodo { grid-column: 1 / -1; justify-self: start; }
    /* La celda del botón no tiene rótulo: sin esto el ::before general deja un renglón vacío. */
    .table.x-deuda > tbody > tr > td.xc-vertodo::before { content: none; }
}
/* En el celular el resumen flotante de Stock va arriba del botón "¿Algo no anda?" (fijo abajo a la
   derecha): a la misma altura se pisaban. */
@media (max-width: 767.98px) { .x-flota.x-flota { bottom: calc(68px + var(--dms-navbar-alto, 0px)); } }

/* ── FICHA (ver un registro) · patrón común, ver docs/patrones-pantalla.md §2 ─────────────────
   Una sola vista para escritorio y celular, sin _beta: con dos archivos la clásica y la beta
   terminan mostrando cosas distintas (inconsistencia nº 1 del catálogo). En escritorio estas
   clases no cambian nada; en el celular:
   - las acciones de arriba pasan a una grilla de dos botones de 44 px (con btn-sm eran de 31 px
     y "Imprimir boleto" + "Volver" se salían de la pantalla, porque la fila no partía);
   - la línea de contexto va un dato por renglón, sin el "·" que quedaba colgando al partirse;
   - las listas rótulo/valor (.dms-ficha__dl) ponen el rótulo ARRIBA del valor: en col-4 de 375 px
     "Estado / Obs." ocupaba tres renglones y el VIN o el mail se cortaban;
   - los montos NO: siguen en dos columnas como un ticket, para leerlos de corrido;
   - las acciones que cambian el estado van a lo ancho, el motivo en su renglón. */
@media (min-width: 768px) {
    .dms-ficha__motivo { width: 220px; }
    .dms-ficha__precio { width: 150px; }
    .dms-ficha__aprobar { min-width: 300px; }
}
@media (max-width: 767.98px) {
    .dms-ficha__head { flex-direction: column; align-items: stretch !important; }
    .dms-ficha__head h1 .chip { white-space: nowrap; }
    .dms-ficha__acc { display: grid !important; grid-template-columns: 1fr 1fr; }
    .dms-ficha__acc > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* el botón suelto, a lo ancho */
    .dms-ficha__acc .btn, .dms-ficha__acciones .btn { min-height: 44px; display: inline-flex; align-items: center;
        justify-content: center; font-size: .9375rem; }
    .dms-ficha__ctx { flex-direction: column; gap: .15rem !important; }
    .dms-ficha__sep { display: none; }
    .dms-ficha__dl { font-size: .9375rem; }
    .dms-ficha__dl > dt { width: 100%; margin-top: .5rem; font-size: .75rem; font-weight: 600; color: var(--dms-text-2); }
    .dms-ficha__dl > dt:first-child { margin-top: 0; }
    .dms-ficha__dl > dd { width: 100%; margin-bottom: 0; overflow-wrap: anywhere; }
    .dms-ficha__acciones { flex-direction: column; align-items: stretch !important; }
    .dms-ficha__acciones > form { display: flex; flex-direction: column; gap: .5rem !important; width: 100%; }
    .dms-ficha__acciones > form > .btn { width: 100%; }
    .dms-ficha__acciones .form-control { min-height: 44px; font-size: 16px; }
}

/* ── FORMULARIOS · controles de 44 px en el celular (docs/patrones-pantalla.md §3) ────────────
   OPT-IN con .dms-form en el <form> (o en el contenedor, si el formulario lo manda JS como en
   Logística). No es global a propósito: filtros de listados, selects dentro de tarjetas .x-cards e
   inputs de una fila de tabla crecerían a 44 px y romperían esas pantallas.
   Adentro de .dms-form, -sm deja de achicar: reservas/form.php usa form-control-sm en todo y así
   se migra sin reescribir el markup.
   16 px de fuente: con menos, el iPhone hace zoom al tocar el campo y la pantalla queda corrida. */
@media (max-width: 767.98px) {
    .dms-form .form-control, .dms-form .form-select,
    .dms-form .form-control-sm, .dms-form .form-select-sm,
    .dms-form .input-group-sm > .form-control, .dms-form .input-group-sm > .form-select {
        min-height: 44px; font-size: 16px; padding-top: .5rem; padding-bottom: .5rem; }
    .dms-form textarea.form-control { min-height: 88px; }
    .dms-form .form-control-color { padding: .25rem; }
    .dms-form .input-group-text, .dms-form .input-group-sm > .input-group-text,
    .dms-form .input-group > .btn { min-height: 44px; font-size: .9375rem; }
    .dms-form .btn, .dms-form .btn-sm { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; font-size: 1rem; }
    /* Los ✕ de quitar de una lista no son botones de formulario: quedan chicos. */
    .dms-form .btn-link.p-0 { min-height: 0; padding: 0; }
    .dms-form .form-check { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding-left: 0; }
    .dms-form .form-check .form-check-input { float: none; margin: 0; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
    .dms-form .form-check.form-switch .form-check-input { width: 2.75rem; }
    .dms-form .form-label { font-size: .875rem; }
    /* Botón principal pegado abajo, a la altura del resumen de Stock (.x-flota): arriba de la barra
       del celular y del botón "¿Algo no anda?", que está fijo abajo a la derecha y lo tapaba. */
    .dms-form__pie { position: sticky; bottom: calc(68px + var(--dms-navbar-alto, 0px)); z-index: 5;
        padding: .5rem; border-radius: var(--dms-radius-btn); background: var(--dms-surface);
        box-shadow: var(--dms-shadow); }
    .dms-form__pie > .btn-primary, .dms-form__pie > .btn-success { width: 100%; }
}

/* ── PANTALLAS PÚBLICAS (login, elegir contraseña) · layouts/publica.php ─────────────────── */
.dms-publica { background: var(--dms-bg); color: var(--dms-text); }
.dms-publica__caja { max-width: 400px; margin: 10vh auto 2rem; padding: 0 1rem; }
@media (max-width: 767.98px) {
    .dms-publica__caja { margin-top: 4vh; }
    .dms-publica__pie a { display: inline-block; padding: .75rem; }
}

/* ── Columnas fijas (table[data-col-fijas], las posiciona app.js) ───────────────────────────────
   La celda necesita fondo propio: sin él, lo que pasa por debajo al scrollear se ve a través. Se usa el de la fila
   (--bs-table-bg) para que una fila vencida o "paga hoy" siga pintada. En el encabezado, por encima de las demás
   celdas fijas del cuerpo (z-index) para que no se le meta nada al scrollear hacia abajo. */
.table-responsive > table > tbody > tr > .col-fija { position: sticky; z-index: 2; background-color: var(--bs-table-bg); }
.table-responsive > table > thead > tr > .col-fija { z-index: 4; }
.table > :not(caption) > * > .col-fija--ult { box-shadow: inset -1px 0 0 var(--dms-border-strong); }

/* Fondo alternado por grupo (data-zebra-grupo, lo pone app.js): un poco más oscuro que el de la fila, del color del texto
   mezclado, para que siga al tema. Va por --bs-table-bg porque la celda de Bootstrap pinta con eso. */
.table > tbody > tr.fila-grupo-alt { --bs-table-bg: color-mix(in srgb, var(--dms-text) 9%, var(--dms-surface)); }

/* Aviso breve ("Ficha copiada"): abajo al centro, con los tokens del tema. */
.dms-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; padding: 8px 16px;
    border-radius: 8px; background: var(--dms-text); color: var(--dms-surface); font-size: .85rem; box-shadow: var(--dms-shadow);
    transition: opacity .4s ease; pointer-events: none; }
.dms-toast.is-off { opacity: 0; }

/* USADO A INGRESAR en el Stock: el usado de una reserva que todavía no llegó. Toda la fila en gris (y en cursiva) para que se note que NO es stock que está: es un compromiso
   de una reserva. Con --dms-neutral, que acompaña al tema (en los oscuros es un gris claro, no un gris que se pierde). */
.dms-tabla tr.stock-a-ingresar > td { color: var(--dms-neutral); font-style: italic; background: var(--dms-neutral-bg); }
.dms-tabla tr.stock-a-ingresar > td a:not(.chip) { color: inherit; }

/* Logotipo de texto «Usados Buenos Aires» (el peritaje impreso). Ver Stock/Views/_logo_usados.php. */
.logo-usados { display: inline-flex; align-items: center; gap: .6rem; line-height: 1; }
.logo-usados__marca { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: .2rem solid var(--dms-accent); color: var(--dms-accent); font-weight: 800; font-size: 1.5rem; }
.logo-usados__texto { display: inline-flex; flex-direction: column; gap: .2rem; }
.logo-usados__texto b { font-size: 1.5rem; letter-spacing: .08em; color: var(--dms-text); }
.logo-usados__texto span { font-size: .72rem; letter-spacing: .32em; color: var(--dms-accent); font-weight: 600; }

/* PERITAJE: en papel sólo sale la planilla (sin menú, botones ni validación interactiva) y las dos columnas de ítems caben en una hoja. */
@media print {
    .peritaje-no-imprimir { display: none !important; }
    .peritaje-hoja .card { border: 0; box-shadow: none; }
    .peritaje-hoja select, .peritaje-hoja input, .peritaje-hoja textarea { border: 0 !important; background: transparent !important; appearance: none; -webkit-appearance: none; padding: 0 !important; }
}

/* VISOR DE FOTOS (assets/js/visor-fotos.js). */
/* El visor va POR ENCIMA del modal de Bootstrap (1055). Fondo oscuro con el token del texto, y los controles con el del fondo: acompaña al tema. */
.cot-visor { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.cot-visor[hidden] { display: none; }
.cot-visor__fondo { position: absolute; inset: 0; background: var(--dms-text); opacity: .92; }
.cot-visor__centro { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 3.5rem 4rem; }
.cot-visor__centro img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .4rem; }
.cot-visor__btn { position: absolute; z-index: 1; border: 0; border-radius: 999px; background: var(--dms-bg); color: var(--dms-text); width: 2.75rem; height: 2.75rem; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: .85; }
.cot-visor__btn:hover, .cot-visor__btn:focus-visible { opacity: 1; }
.cot-visor__cerrar { top: .75rem; right: .75rem; font-size: 1.2rem; }
.cot-visor__prev { left: .75rem; top: 50%; transform: translateY(-50%); }
.cot-visor__next { right: .75rem; top: 50%; transform: translateY(-50%); }
.cot-visor__cont { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); z-index: 1; padding: .15rem .7rem; border-radius: 999px; background: var(--dms-bg); color: var(--dms-text); font-size: .85rem; }
.cot-visor--una .cot-visor__prev, .cot-visor--una .cot-visor__next { display: none; }
@media (max-width: 575px) { .cot-visor__centro { padding: 3.5rem .5rem; } .cot-visor__prev, .cot-visor__next { top: auto; bottom: .75rem; transform: none; } }

/* Archivos de un usado (miniaturas y su ✕). Ver UsadoArchivo::chips(). */
.ua-item { position: relative; display: inline-block; margin: 0 .3rem .3rem 0; vertical-align: top; }
.ua-mini { width: 54px; height: 40px; object-fit: cover; border-radius: .3rem; border: 1px solid var(--dms-border); cursor: zoom-in; background: var(--dms-surface-2); display: block; }
.ua-x { position: absolute; top: -.35rem; right: -.35rem; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 999px; background: var(--dms-danger); color: var(--dms-bg); font-size: .6rem; line-height: 1; cursor: pointer; }

/* El número interno es el enlace a la ficha del auto: destacado como enlace, sin subrayar (tampoco al pasar el mouse). */
.dms-tabla a.stock-ficha-link { color: var(--dms-info); font-weight: 600; text-decoration: none; }
.dms-tabla a.stock-ficha-link:hover, .dms-tabla a.stock-ficha-link:focus-visible { text-decoration: none; filter: brightness(.85); }

/* Logos oficiales de Usados Buenos Aires: el de letras negras sobre fondo claro y el de letras blancas sobre el tema oscuro (al imprimir, siempre el negro). */
.logo-usados-img { display: inline-flex; align-items: center; line-height: 0; }
.logo-usados-img img { height: 3.5rem; width: auto; }
.logo-usados-img__oscuro { display: none; }
[data-theme="dark"] .logo-usados-img--dos .logo-usados-img__claro { display: none; }
[data-theme="dark"] .logo-usados-img--dos .logo-usados-img__oscuro { display: inline; }
@media print { .logo-usados-img--dos .logo-usados-img__claro { display: inline !important; } .logo-usados-img--dos .logo-usados-img__oscuro { display: none !important; } }

/* «A cobrar» fijado a mano por un supervisor (ACobrarManual): el lápiz lo pone el CSS para que el texto del chip siga siendo Sí/No en el filtro de la tabla. */
.acobrar-manual::after { content: " \270E"; font-size: .85em; }

/* STOCK AUDI. Opcionales: un renglón de TEXTO por opcional (sin cápsula ni fondo gris), chico y pegado al siguiente, para que la fila ocupe poco alto.
   «Estado Nadin»: columna angosta con la leyenda en renglones dentro de la celda. */
.audi-opc-box { display: block; }
.audi-opc-l { font-size: .74rem; line-height: 1.25; padding: 0; color: var(--dms-text); }
.audi-estado-nadin { display: inline-block; max-width: 8.5rem; font-size: .7rem; line-height: 1.2; font-weight: 600; text-transform: uppercase; color: var(--dms-text-2); white-space: normal; text-align: left; }
.audi-col-estado { width: 9rem; max-width: 9rem; white-space: normal; }

/* La banderita del comentario de una unidad: sólo el ícono, a la derecha del modelo (el texto va en el tooltip; se edita en la ficha). */
.stock-flag { font-size: .8em; cursor: help; margin-left: .25rem; }

/* ── TABLA EDITABLE (.dms-abm) · alta y edición en filas (docs/patrones-pantalla.md §6) ──────────────────────────
   Para las pantallas de "una fila por registro, todo editable en el lugar" (Sucursales, Empresas, las sucursales de
   Logística…). Antes cada registro era una tarjeta con los rótulos repetidos ("Nombre *", "Empresa *" × 8), estirada a
   todo el ancho: para leer un renglón el ojo viajaba 1.900 px. Ahora los rótulos van UNA vez, en negrita, en el
   encabezado; el ancho tiene tope (lo que la tabla necesita, no la pantalla); "Guardar" aparece sólo en la fila que
   cambió, que además se pinta; y las de baja van al final, apagadas.
   En el celular cada fila es una tarjeta con su rótulo arriba de cada campo (data-lbl). */
.dms-abm { max-width: var(--dms-abm-ancho, 1080px); }
/* Si en una ventana angosta las columnas no entran, la tabla scrollea de costado; la página no. */
@media (min-width: 768px) { .dms-abm { overflow-x: auto; } }
.dms-abm__tabla { background: var(--dms-surface); border: 1px solid var(--dms-border); border-radius: var(--dms-radius-card, 10px);
                  overflow: hidden; border-collapse: separate; border-spacing: 0; }
.dms-abm__tabla > thead > tr > th { font-weight: 700; color: var(--dms-text); background: var(--dms-surface-2); white-space: nowrap; }
.dms-abm__tabla > tbody > tr:last-child > td { border-bottom: 0; }
.dms-abm__cod { font-weight: 700; font-size: 1.05em; white-space: nowrap; }
.dms-abm__acc { text-align: right; white-space: nowrap; width: 1%; }
.dms-abm__tabla tr.is-baja > td { color: var(--dms-text-2); }
.dms-abm__tabla tr.is-baja .form-control, .dms-abm__tabla tr.is-baja .form-select { color: var(--dms-text-2); }
.dms-abm__tabla tr.is-baja .dms-chipcasilla { opacity: .6; }
.dms-abm__tabla tr.is-sucio > td { background: var(--dms-info-bg); }
.dms-abm__tabla tr.dms-abm__nueva > td { background: var(--dms-surface-2); }
/* Sin JS no hay forma de saber qué fila cambió: el botón queda siempre a la vista. */
.dms-abm.is-listo tbody tr:not(.is-sucio):not(.dms-abm__nueva) .dms-abm__guardar { visibility: hidden; }
.dms-abm__pie { font-size: .8125rem; color: var(--dms-text-2); margin-top: .5rem; }
/* El motivo de una fila que no se pudo guardar al guardar varias juntas (app.js). */
.dms-abm__error { white-space: normal; text-align: left; min-width: 12rem; }

/* Casilla con forma de chip (Ui::chipCasilla): prendida a color y con ✓, apagada sin relleno y con borde. El ✓ es
   porque el color solo no alcanza: en Ejecutivo los chips de marca son pasteles y USADOS prendido se confundía con
   cualquier apagado. Sin opacity: el texto apagado quedaba por debajo de 4,5:1. En una fila de la tabla van en un
   solo renglón: una marca sola en el de abajo dejaba las filas de alturas distintas. */
.dms-chipcasillas { display: flex; flex-wrap: wrap; gap: 5px; }
.dms-abm__tabla .dms-chipcasillas { flex-wrap: nowrap; }
.dms-chipcasilla { display: inline-flex; margin: 0; cursor: pointer; user-select: none; }
.dms-chipcasilla > input:not(:checked) + .chip { background: transparent; color: var(--dms-text-2); box-shadow: inset 0 0 0 1px var(--dms-text-2); }
.dms-chipcasilla > input:checked + .chip::before { content: "✓"; margin-right: 3px; }
.dms-chipcasilla > input:focus-visible + .chip { outline: 2px solid var(--dms-primary); outline-offset: 2px; }
.dms-chipcasilla:hover > .chip { filter: brightness(.95); }

@media (max-width: 767.98px) {
    .dms-abm__tabla, .dms-abm__tabla > tbody, .dms-abm__tabla > tbody > tr, .dms-abm__tabla > tbody > tr > td { display: block; width: 100%; }
    .dms-abm__tabla { background: transparent; border: 0; }
    .dms-abm__tabla > thead { display: none; }
    .dms-abm__tabla > tbody > tr { background: var(--dms-surface); border: 1px solid var(--dms-border); border-radius: var(--dms-radius-card, 10px);
                                   padding: 10px 14px; margin-bottom: 10px; }
    .dms-abm__tabla > tbody > tr > td { border: 0; padding: 4px 0; background: transparent !important; }
    .dms-abm__tabla > tbody > tr.is-sucio { background: linear-gradient(var(--dms-info-bg), var(--dms-info-bg)), var(--dms-surface); }
    .dms-abm__tabla > tbody > tr.dms-abm__nueva { background: var(--dms-surface-2); }
    .dms-abm__tabla > tbody > tr > td[data-lbl]::before { content: attr(data-lbl); display: block; font-weight: 700; font-size: .8125rem; margin-bottom: 2px; }
    .dms-abm__acc { text-align: left; width: 100%; }
    .dms-abm__acc .btn { width: 100%; }
    /* Una tarjeta mide 450-600 px: el Guardar de la fila cambiada se queda pegado abajo mientras la tarjeta esté a la
       vista (con el teclado abierto quedaba fuera de pantalla), arriba de la barra del celular. */
    .dms-abm__tabla > tbody > tr.is-sucio > td.dms-abm__acc { position: sticky; bottom: calc(var(--dms-navbar-alto, 0px) + 8px); z-index: 2; }
    /* Que la fila de alta no se confunda con una existente. */
    .dms-abm__tabla > tbody > tr.dms-abm__nueva::before { content: attr(data-titulo); display: block; font-weight: 700; margin-bottom: 4px; }
    .dms-abm.is-listo tbody tr:not(.is-sucio):not(.dms-abm__nueva) .dms-abm__acc { display: none; }
    .dms-chipcasillas { gap: 8px; }
    .dms-chipcasilla .chip { padding: 10px 14px; font-size: .875rem; }
    .dms-abm__tabla .form-switch .form-check-input { width: 3rem; height: 1.6rem; }
}

/* La bonificación propia de una unidad contra la de la lista de precios: ▲ si es MAYOR, ▼ si es MENOR (nada si es igual). Con los tokens del tema: mayor = lo que se regala de más (aviso),
   menor = lo que se regala de menos (información). */
.bonif-ico { font-size: .72rem; line-height: 1; cursor: help; }
.bonif-ico--mayor { color: var(--dms-warn); }
.bonif-ico--menor { color: var(--dms-info); }

/* Fila elegida en el Stock: un primer clic en cualquier parte de la fila la deja pintada de azul (el token info, que existe en
   todos los temas) hasta que se hace clic en otro lado. Se apoya con color-mix sobre lo que la fila ya tenga —zebra, ámbar, rojo—
   y va DESPUÉS del hover de Bootstrap para ganarle: elegida y con el mouse encima sigue viéndose elegida. */
.table > tbody > tr.fila-sel > * {
    --bs-table-bg-state: color-mix(in oklab, var(--dms-info) 28%, transparent);
    --bs-table-hover-bg: color-mix(in oklab, var(--dms-info) 28%, transparent);
}

/* Contabilidad: la banda con la empresa con la que se trabaja (Views/_banda.php), ancha y del color de su marca. La
   vista pone --banda-bg/--banda-txt con los tokens de la marca; sin marca, la superficie gris con el texto del tema (el
   gris --dms-neutral con blanco no se leía en los oscuros, ux). Va en el grupo del título, que sube a la barra.
   ANCHO FIJO, no "lo que quede": estirada, en las pestañas con botones en el título (Plan, Diario, Pendientes…) se
   achicaba para hacerles lugar y al cambiar de pestaña la barra de arriba saltaba (Leo, 29/10/2026). En el celular
   queda arriba del contenido, a todo el ancho. */
.contab-titulo { flex: 1 1 auto; min-width: 0; }
.contab-banda { flex: 0 1 auto; width: clamp(16rem, 34vw, 36rem); max-width: 100%; display: flex; align-items: center; gap: .75rem;
    padding: .3rem .9rem; border-radius: var(--dms-radius-btn); font-weight: 600; text-decoration: none;
    background: var(--banda-bg, var(--dms-surface-2)); color: var(--banda-txt, var(--dms-text)); }
.contab-banda:hover, .contab-banda:focus { color: var(--banda-txt, var(--dms-text)); filter: brightness(1.08); }
/* Sin opacidad: sobre el rojo de GAC el «Cambiar» atenuado no llegaba al contraste mínimo (ux). */
.contab-banda small { margin-left: auto; font-weight: 400; white-space: nowrap; text-decoration: underline; }
@media (max-width: 767.98px) { .contab-banda { width: 100%; } }
/* La entrada a Contabilidad (Views/elegir.php): una tarjeta por empresa, del mismo color que la banda. */
.contab-elegir { display: block; border: 0; padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--dms-radius-card);
    background: var(--banda-bg, var(--dms-surface-2)); color: var(--banda-txt, var(--dms-text)); box-shadow: var(--dms-shadow); }
.contab-elegir:hover, .contab-elegir:focus-visible { filter: brightness(1.08); }

/* Tesorería → Arqueos de caja (Views/arqueos). El control de la semana y del mes es un calendario de 7 columnas por caja:
   una grilla de 31 columnas no entra en 375 px (ux, 28/10/2026). Cada día lleva color Y símbolo (✓ ! ○ ·): en el tema
   Ejecutivo el color solo no alcanza. Faltante y sobrante son los dos "con diferencia" (danger): ninguno es menos grave. */
.arq-cal { width: 100%; max-width: 420px; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.arq-cal th { text-align: center; font-size: .6875rem; font-weight: 600; color: var(--dms-text-2); }
.arq-cal td { padding: 0; }
.arq-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px;
    border-radius: 6px; font-size: .8125rem; font-weight: 600; line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums; }
.arq-dia:hover, .arq-dia:focus-visible { filter: brightness(.95); }
.arq-dia--ok    { background: var(--dms-ok-bg);     color: var(--dms-ok); }
.arq-dia--dif   { background: var(--dms-danger-bg); color: var(--dms-danger); }
.arq-dia--falta { background: var(--dms-warn-bg);   color: var(--dms-warn); }
.arq-dia--nc    { background: var(--dms-surface-2); color: var(--dms-text-3); }
.arq-dia.is-hoy { outline: 2px solid var(--dms-primary); outline-offset: 1px; }
/* La muestra de la leyenda: el mismo color y símbolo, chiquito y en línea. */
.arq-dia--mini { display: inline-flex; min-height: 0; width: 1.4em; height: 1.4em; font-size: .75rem; vertical-align: middle; }
.arq-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.arq-vig th, .arq-vig td { vertical-align: top; }
@media (max-width: 767.98px) {
    /* El control del día y el listado en tarjeta (x-cards x-diario): "Arquear" y "Ver" a lo ancho y de 44 px, que se toca parado frente a la caja. */
    .x-arqueo > tbody > tr > td.xc-accion { grid-column: 1 / -1; }
    .x-arqueo > tbody > tr > td.xc-accion .btn { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Navegación del período y "← Volver" de los arqueos: en el celular, 44 px como todo lo que se toca (qa midió 30). */
@media (max-width: 767.98px) { .arq-nav { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } }