/* ══════════════════════════════════════════════════════════════════════
   MobiiClub Admin — UI System
   ----------------------------------------------------------------------
   Capa única de diseño. Se carga DESPUÉS de tabler.css, global.css y
   dark-mode-override.css; luego components.css (componentes de dominio)
   y el CSS propio
   de cada vista, así que gana a la base y las vistas siguen pudiendo
   ajustar lo suyo.

   Referencias de lenguaje visual: Supabase (dashboard/table editor) y
   Plain (inbox). Principios:
     · Tipografía legible: base 14px, metadatos 12px, títulos 16–20px.
     · Aire: paddings generosos, bordes finos, nada de sombras pesadas.
     · Color reservado para estado y datos. El chrome es neutro.
     · Una sola fuente de verdad para alturas de control (32px).

   Secciones:
     0. Tokens             4. Rail (barra de iconos)    8. Tablas
     1. Base / tipografía  5. Sidebar contextual        9. Badges / estado
     2. Superficies        6. Barra superior            10. Controles
     3. Layout de página   7. Encabezados de página     11. Legacy / misc
   ══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
   0. TOKENS
   ──────────────────────────────────────────────────────────────────── */
:root {
    --font-sans:
        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:
        'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --tblr-font-sans-serif: var(--font-sans);
    --tblr-font-monospace: var(--font-mono);

    /* Root fijo en 14px: las 40+ vistas que calculan alturas con `3rem`
       para la barra superior dependen de este valor. La escala tipográfica
       se define abajo en px reales (vía rem sobre 14). */
    font-size: 14px;

    /* Escala tipográfica — base 14px. Mínimo legible en UI: 12px. */
    --fs-micro: 0.786rem; /* 11px — pills, contadores */
    --fs-meta: 0.857rem; /* 12px — captions, table headers, eyebrows */
    --fs-body: 0.929rem; /* 13px — texto base, inputs, botones, nav */
    --fs-subtitle: 1rem; /* 14px — títulos de card, section header */
    --fs-title: 1.071rem; /* 15px — h3, título de página en listas */
    --fs-display: 1.286rem; /* 18px — valores KPI, títulos grandes */
    --fs-display-lg: 1.714rem; /* 24px — hero numerics */
    --fs-hero: 3rem;
    --fs-watermark: 5rem;

    /* Tabla: celdas un punto por debajo del body para densidad razonable */
    --fs-table: 0.929rem; /* 13px */

    /* Espaciado: múltiplos de 4px. `--sp-N` = N × 4px. Los alias
       `--space-*` se conservan por compatibilidad con vistas existentes. */
    --sp-unit: 4px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --space-1: var(--sp-1);
    --space-2: var(--sp-2);
    --space-3: var(--sp-3);
    --space-4: var(--sp-4);
    --space-5: var(--sp-6);
    --space-6: var(--sp-8);
    --space-7: var(--sp-12);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Alturas de control — todos los .btn/.form-control/.ts-control */
    --control-h: 2.286rem; /* 32px */
    --control-h-sm: 1.857rem; /* 26px */
    --control-h-lg: 2.571rem; /* 36px */
    --control-h-xs: 1.571rem; /* 22px */

    /* Shell */
    --rail-w: 48px;
    --sidebar-w: 224px;
    --topbar-h: 3rem;

    /* Paleta neutra (light) */
    --ui-bg: #fafafa;
    --ui-surface: #ffffff;
    --ui-surface-2: #f4f4f5;
    --ui-surface-3: #e9e9ec;
    --ui-border: #e4e4e7;
    --ui-border-strong: #d4d4d8;
    /* Texto — cinco niveles con su contraste sobre --ui-surface (blanco).
       Regla: texto que se lee ≥ 4.8:1. `faint` es sólo para lo decorativo
       (separadores, iconos de apoyo, placeholders). */
    --ui-fg: #171717; /* 16.1:1 · títulos, valores, cuerpo */
    --ui-fg-2: #525252; /* 7.4:1  · texto secundario largo */
    --ui-fg-muted: #6b6b6b; /* 5.3:1  · etiquetas, meta, captions */
    --ui-fg-subtle: #737373; /* 4.8:1  · mínimo legible: hints, contadores */
    --ui-fg-faint: #a3a3a3; /* 2.6:1  · NO texto: bordes de icono, separadores */
    --ui-accent: #2563eb;
    --ui-accent-soft: rgba(37, 99, 235, 0.1);
    --ui-ring: rgba(37, 99, 235, 0.25);

    /* Pares wash / ink — un fondo lavado y una tinta del mismo tono.
       Para avisos, insights, filas seleccionadas y estados. Nunca color
       sólido con texto blanco fuera de botones primarios. */
    --ui-wash-info: #eaf1fe;
    --ui-ink-info: #1b4bc4;
    --ui-wash-success: #e3f7ea;
    --ui-ink-success: #1f7a45;
    --ui-wash-warning: #fff4dc;
    --ui-ink-warning: #8a5a00;
    --ui-wash-danger: #fde8e8;
    --ui-ink-danger: #b32020;
    --ui-danger-bg: var(--ui-wash-danger);
    --ui-overlay: rgba(23, 23, 23, 0.45);

    /* Tags (badges): fondo pastel + texto oscuro, contraste ≥ 4.5:1
       (paleta de tags de Twenty). */
    --ui-tag-green-bg: #d7f5e1;
    --ui-tag-green-fg: #1f7a45;
    --ui-tag-red-bg: #fbdbdb;
    --ui-tag-red-fg: #b32020;
    --ui-tag-orange-bg: #fde6d3;
    --ui-tag-orange-fg: #a85410;
    --ui-tag-yellow-bg: #fff3d0;
    --ui-tag-yellow-fg: #8a6100;
    --ui-tag-blue-bg: #dbe5fe;
    --ui-tag-blue-fg: #1b4bc4;
    --ui-tag-purple-bg: #e4ddfb;
    --ui-tag-purple-fg: #5232a8;
    --ui-tag-teal-bg: #d0f4ee;
    --ui-tag-teal-fg: #17786c;

    /* Estado — el único color permitido fuera de los datos */
    --ui-success: #16a34a;
    --ui-warning: #d97706;
    --ui-danger: #dc2626;
    --ui-info: #2563eb;
    --ui-purple: #7c3aed;
    --ui-teal: #0d9488;
    --tblr-green: var(--ui-success);
    --tblr-success: var(--ui-success);
    --tblr-orange: var(--ui-warning);
    --tblr-yellow: var(--ui-warning);
    --tblr-warning: var(--ui-warning);
    --tblr-red: var(--ui-danger);
    --tblr-danger: var(--ui-danger);
    --tblr-blue: var(--ui-info);
    --tblr-azure: var(--ui-info);
    --tblr-purple: var(--ui-purple);
    --tblr-teal: var(--ui-teal);

    /* Mapeo a Tabler para que todo lo existente herede la paleta */
    --tblr-body-bg: var(--ui-bg);
    --tblr-bg-surface: var(--ui-surface);
    --tblr-bg-surface-secondary: var(--ui-surface-2);
    --tblr-bg-surface-tertiary: var(--ui-surface-3);
    --tblr-border-color: var(--ui-border);
    --tblr-border-color-translucent: var(--ui-border);
    --tblr-body-color: var(--ui-fg);
    --tblr-secondary: var(--ui-fg-muted);
    --tblr-secondary-color: var(--ui-fg-muted);
    --tblr-muted: var(--ui-fg-muted);
    --tblr-primary: var(--ui-accent);
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-link-color: var(--ui-accent);
    --tblr-border-radius: var(--radius-sm);
    --tblr-border-radius-sm: 4px;
    --tblr-border-radius-lg: var(--radius-md);
    --tblr-border-radius-xl: var(--radius-lg);
    --tblr-card-bg: var(--ui-surface);
}

[data-bs-theme='dark'] {
    /* Negro dominante (Twenty / Supabase dark): el fondo es casi negro y
       las superficies suben apenas un paso; el gris sólo aparece en
       bordes y texto secundario. */
    --ui-bg: #0a0a0a;
    --ui-surface: #121212;
    --ui-surface-2: #1c1c1c;
    --ui-surface-3: #262626;
    --ui-border: #262626;
    --ui-border-strong: #3a3a3a;
    --ui-fg: #ededed; /* 15.5:1 sobre #121212 */
    --ui-fg-2: #b5b5b5; /* 8.6:1 */
    --ui-fg-muted: #9b9b9b; /* 6.3:1 */
    --ui-fg-subtle: #7d7d7d; /* 4.8:1 · mínimo legible */
    --ui-fg-faint: #5c5c5c; /* 2.9:1 · NO texto */
    --ui-accent: #3b82f6;
    --ui-wash-info: #14264a;
    --ui-ink-info: #93b4ff;
    --ui-wash-success: #10321d;
    --ui-ink-success: #7ee2a3;
    --ui-wash-warning: #3a2e0c;
    --ui-ink-warning: #fbd66b;
    --ui-wash-danger: #3a1616;
    --ui-ink-danger: #f58b8b;
    --ui-danger-bg: var(--ui-wash-danger);
    --ui-overlay: rgba(0, 0, 0, 0.65);
    --ui-accent-soft: rgba(59, 130, 246, 0.16);
    --ui-ring: rgba(59, 130, 246, 0.35);
    /* Tags (badges) en oscuro: fondo tenue del color, texto claro */
    --ui-tag-green-bg: #10321d;
    --ui-tag-green-fg: #7ee2a3;
    --ui-tag-red-bg: #3a1616;
    --ui-tag-red-fg: #f58b8b;
    --ui-tag-orange-bg: #3a2210;
    --ui-tag-orange-fg: #f8b27a;
    --ui-tag-yellow-bg: #3a2e0c;
    --ui-tag-yellow-fg: #fbd66b;
    --ui-tag-blue-bg: #14264a;
    --ui-tag-blue-fg: #93b4ff;
    --ui-tag-purple-bg: #261b4a;
    --ui-tag-purple-fg: #c4b5fd;
    --ui-tag-teal-bg: #0f3330;
    --ui-tag-teal-fg: #6ee7d8;
    --ui-success: #4ade80;
    --ui-warning: #fbbf24;
    --ui-danger: #f87171;
    --ui-info: #60a5fa;
    --ui-purple: #a78bfa;
    --ui-teal: #2dd4bf;

    --tblr-body-bg: var(--ui-bg);
    --tblr-bg-surface: var(--ui-surface);
    --tblr-bg-surface-dark: var(--ui-bg);
    --tblr-bg-surface-secondary: var(--ui-surface-2);
    --tblr-bg-surface-tertiary: var(--ui-surface-3);
    --tblr-border-color: var(--ui-border);
    --tblr-border-color-translucent: var(--ui-border);
    --tblr-border-color-light: var(--ui-border);
    --tblr-body-color: var(--ui-fg);
    --tblr-secondary: var(--ui-fg-muted);
    --tblr-secondary-color: var(--ui-fg-muted);
    --tblr-muted: var(--ui-fg-muted);
    --tblr-primary: var(--ui-accent);
    --tblr-primary-rgb: 96, 165, 250;
    --tblr-link-color: var(--ui-accent);
    --tblr-card-bg: var(--ui-surface);
    --tblr-card-cap-bg: var(--ui-surface);
    --tblr-form-control-bg: var(--ui-surface);
    --tblr-dropdown-bg: var(--ui-surface);
    --tblr-dropdown-border-color: var(--ui-border);
    --tblr-dropdown-link-hover-bg: var(--ui-surface-2);
    --tblr-modal-bg: var(--ui-surface);
    --tblr-modal-border-color: var(--ui-border);
    --tblr-navbar-bg: var(--ui-surface);
    --tblr-sidebar-bg: var(--ui-surface);
    --shadcn-border: var(--ui-border);
    --shadcn-muted: var(--ui-surface-2);
    --shadcn-muted-foreground: var(--ui-fg-muted);
    --shadcn-secondary: var(--ui-surface-2);
    --shadcn-background: var(--ui-bg);
    --shadcn-card: var(--ui-surface);
    --shadcn-popover: var(--ui-surface);
    --shadcn-accent: var(--ui-surface-2);
    --tblr-offcanvas-bg: var(--ui-surface);
    --tblr-body-bg-rgb: 12, 12, 12;
}
/* Contenedores en oscuro: mismas superficies, sin grises sueltos */
[data-bs-theme='dark'] body,
[data-bs-theme='dark'] .page-wrapper {
    background: var(--ui-bg);
}
[data-bs-theme='dark'] .card,
[data-bs-theme='dark'] .offcanvas,
[data-bs-theme='dark'] .modal-content,
[data-bs-theme='dark'] .dropdown-menu,
[data-bs-theme='dark'] .popover,
[data-bs-theme='dark'] .toast,
[data-bs-theme='dark'] .list-group-item,
[data-bs-theme='dark'] .accordion-item,
[data-bs-theme='dark'] .pre-sidebar,
[data-bs-theme='dark'] .main-sidebar,
[data-bs-theme='dark'] .fixed-top-bar,
[data-bs-theme='dark'] .dispatch-topbar,
[data-bs-theme='dark'] .an-topbar,
[data-bs-theme='dark'] #system-notifications {
    background: var(--ui-surface);
}
[data-bs-theme='dark'] .form-control,
[data-bs-theme='dark'] .form-select,
[data-bs-theme='dark'] .ts-wrapper .ts-control,
[data-bs-theme='dark'] .input-group-text {
    background-color: var(--ui-bg);
    border-color: var(--ui-border);
    color: var(--ui-fg);
}
[data-bs-theme='dark'] .form-control:focus,
[data-bs-theme='dark'] .form-select:focus {
    background-color: var(--ui-bg);
}
[data-bs-theme='dark'] .table thead th {
    background: var(--ui-surface-2);
}
[data-bs-theme='dark'] .card-header,
[data-bs-theme='dark'] .card-footer,
[data-bs-theme='dark'] .modal-header,
[data-bs-theme='dark'] .modal-footer,
[data-bs-theme='dark'] .offcanvas-header,
[data-bs-theme='dark'] .offcanvas-footer {
    background: transparent;
}
/* Dentro del offcanvas y modales, las tarjetas suben un paso de superficie */
[data-bs-theme='dark'] .offcanvas .card,
[data-bs-theme='dark'] .modal .card,
[data-bs-theme='dark'] .offcanvas .timeline-event-card {
    background: var(--ui-surface-2);
    border-color: var(--ui-border);
}
[data-bs-theme='dark'] .btn:not([class*='btn-']):not(.dropdown-item),
[data-bs-theme='dark'] .btn-outline-secondary,
[data-bs-theme='dark'] .btn-secondary,
[data-bs-theme='dark'] .btn-light,
[data-bs-theme='dark'] .btn-white {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-fg) !important;
}
[data-bs-theme='dark'] .btn-dark {
    background: var(--ui-fg);
    color: var(--ui-bg);
    border-color: var(--ui-fg);
}
[data-bs-theme='dark'] *::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
}

/* ────────────────────────────────────────────────────────────────────
   1. BASE / TIPOGRAFÍA
   ──────────────────────────────────────────────────────────────────── */
html,
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.006em;
    color: var(--tblr-body-color);
    background: var(--tblr-body-bg);
}

.text-mono,
code,
pre,
kbd,
samp,
.table .num,
.badge.text-mono,
.form-control.text-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Jerarquía por tamaño, no por peso. 500 en todo; 600 solo en display. */
h1,
.h1 {
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
h2,
.h2 {
    font-size: var(--fs-title);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
h3,
.h3 {
    font-size: var(--fs-subtitle);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.35;
}
h4,
.h4 {
    font-size: var(--fs-subtitle);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
h5,
.h5 {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.45;
}
h6,
.h6 {
    font-size: var(--fs-meta);
    font-weight: 500;
    line-height: 1.45;
    color: var(--tblr-secondary);
}

small,
.small,
.text-sm {
    font-size: var(--fs-meta);
}

.text-eyebrow,
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tblr-secondary);
}

.section-header {
    margin-bottom: var(--space-4);
}
.section-header > h2,
.section-header > h3,
.section-header > h4 {
    margin: 0 0 4px;
}
.section-subtitle {
    margin: 0;
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
    line-height: 1.45;
}

.page-pad {
    padding: var(--space-4) var(--space-5);
}
@media (min-width: 992px) {
    .page-pad {
        padding: var(--space-5) var(--space-6);
    }
}

/* Iconos: mismo tamaño que el texto que acompañan */
.ti {
    font-size: 1.1em;
    line-height: 1;
    vertical-align: -0.12em;
}
.ti-xs {
    font-size: 0.85em;
}
.ti-sm {
    font-size: 1em;
}
.ti-md {
    font-size: 1.25em;
}
.ti-lg {
    font-size: 1.5em;
}
.ti-xl {
    font-size: 2em;
}

/* Enlaces. En un admin casi todo `<a>` es un control —un item de
   navegación, una fila, una acción— y subrayarlo al pasar el mouse lo
   hace ver roto. El hover se marca con color (Tabler ya cambia
   `--tblr-link-color-rgb`), nunca con subrayado. Un enlace dentro de un
   párrafo sí necesita el subrayado para leerse como enlace: para ése
   está `.link`, que lo lleva siempre y en gris tenue. */
a {
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: none;
}
.link {
    text-decoration: underline;
    text-decoration-color: var(--ui-border-strong);
    text-underline-offset: 2px;
}
.link:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* Scrollbars finos y neutros */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-track {
    background: transparent;
}

/* ────────────────────────────────────────────────────────────────────
   2. SUPERFICIES — cards, dropdowns, modales, offcanvas
   ──────────────────────────────────────────────────────────────────── */
.card {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
    background: transparent;
    font-size: var(--fs-body);
    font-weight: 500;
    min-height: 0;
}
.card-title {
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}
.card-body {
    padding: 1rem;
}
.card-footer {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--tblr-border-color);
    background: transparent;
}
.card-sm .card-body {
    padding: 0.75rem;
}

.dropdown-menu {
    font-size: var(--fs-body) !important;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-md);
    padding: 0.3rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08);
    background: var(--tblr-bg-surface);
    min-width: 11rem;
}
[data-bs-theme='dark'] .dropdown-menu {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.4);
}
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.6rem;
    font-size: var(--fs-body);
    color: var(--tblr-body-color);
    min-width: 0;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    text-decoration: none;
}
.dropdown-item .ti {
    color: var(--tblr-secondary);
    margin-right: 0.5rem;
    width: 1.1em;
}
.dropdown-divider {
    margin: 0.3rem 0.2rem;
    border-color: var(--tblr-border-color);
}
.dropdown-header {
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
    padding: 0.4rem 0.6rem 0.2rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
.modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
}
.modal-title {
    font-size: var(--fs-title);
    font-weight: 500;
}
.modal-body {
    padding: 1.25rem;
    font-size: var(--fs-body);
}
.modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--tblr-border-color);
    gap: 0.5rem;
}

.offcanvas {
    border-color: var(--tblr-border-color) !important;
    background: var(--tblr-bg-surface);
}
.offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
}
.offcanvas-title {
    font-size: var(--fs-title);
    font-weight: 500;
}
.offcanvas-body {
    padding: 1.25rem;
}

.alert {
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    padding: 0.75rem 1rem;
}

.list-group-item {
    font-size: var(--fs-body);
    padding: 0.7rem 1rem;
    border-color: var(--tblr-border-color);
}

.tooltip .tooltip-inner {
    font-size: var(--fs-meta);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
}

/* ────────────────────────────────────────────────────────────────────
   3. LAYOUT DE PÁGINA
   ──────────────────────────────────────────────────────────────────── */
body .page-wrapper {
    margin-left: var(--rail-w) !important;
    margin-top: var(--topbar-h) !important;
    padding-left: 0 !important;
    min-height: 0 !important;
    height: calc(100dvh - var(--topbar-h));
    overflow: auto;
    background: var(--tblr-body-bg);
    transition: margin-left 0.22s cubic-bezier(0.2, 0, 0, 1);
}
body .page-wrapper.sidebar-open {
    margin-left: calc(var(--rail-w) + var(--sidebar-w)) !important;
}
.page-body {
    margin-bottom: 0;
}
.container-fluid,
.container-xl {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.row {
    --tblr-gutter-x: 1rem;
}

/* ────────────────────────────────────────────────────────────────────
   4. RAIL — barra de iconos (Supabase style)
   ──────────────────────────────────────────────────────────────────── */
.pre-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--rail-w);
    background: var(--tblr-bg-surface);
    border-right: 1px solid var(--tblr-border-color);
    z-index: 1040 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    padding-bottom: 0.5rem;
}
.rail-brand {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}
.rail-brand img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
}
.rail-spacer {
    flex: 1 1 auto;
}
.pre-sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--tblr-secondary);
    margin: 0.15rem 0;
    border-radius: 8px;
    position: relative;
    text-decoration: none !important;
    transition:
        background-color 0.12s,
        color 0.12s;
}
.pre-sidebar-btn i {
    font-size: 1.15rem;
}
.pre-sidebar-btn:hover {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}
.pre-sidebar-btn.active {
    background: var(--ui-accent-soft);
    color: var(--tblr-primary);
}
.pre-sidebar-btn.active::before {
    content: none;
}
.pre-sidebar-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    border: 1.5px solid var(--tblr-bg-surface);
    pointer-events: none;
}
.rail-divider {
    width: 24px;
    height: 1px;
    background: var(--tblr-border-color);
    margin: 0.35rem 0;
    flex-shrink: 0;
}

/* Botón "+ Nuevo" del rail: acción principal, relleno oscuro */
.rail-new {
    position: relative;
    margin: 0.1rem 0 0.15rem;
}
.rail-new-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 0;
    background: var(--ui-fg);
    color: var(--ui-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.12s;
}
.rail-new-btn i {
    font-size: 1.1rem;
    transition: transform 0.15s ease;
}
.rail-new-btn:hover {
    opacity: 0.88;
}
/* driver.js también marca `aria-expanded` en el elemento que resalta. */
.rail-new-btn[aria-expanded='true']:not(.driver-active-element) i {
    transform: rotate(45deg);
}
.rail-new .dropdown-menu {
    position: absolute;
    left: calc(100% + 10px);
    top: 0;
    right: auto;
    bottom: auto;
    width: 220px;
    margin: 0;
}

/* Avatar de usuario al pie del rail + menú lateral */
.rail-user {
    position: relative;
    margin-top: 0.25rem;
}
.rail-user .rail-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--tblr-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--tblr-border-color);
    cursor: pointer;
    user-select: none;
}
.rail-user .rail-avatar:hover {
    border-color: var(--ui-border-strong);
}
.rail-user .dropdown-menu {
    position: absolute;
    left: calc(100% + 10px);
    bottom: 0;
    top: auto;
    right: auto;
    width: 240px;
    margin: 0;
}
.rail-user-head {
    padding: 0.5rem 0.6rem 0.6rem;
}
.rail-user-name {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rail-user-mail {
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-segment {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 3px;
    background: var(--tblr-bg-surface-secondary);
    border-radius: 7px;
    margin: 0.25rem 0.3rem 0.4rem;
}
.theme-segment label {
    margin: 0;
    cursor: pointer;
}
.theme-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.theme-segment span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 26px;
    border-radius: 5px;
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
    transition:
        background 0.12s,
        color 0.12s;
}
.theme-segment input:checked + span {
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Flyout al hacer hover sobre el rail (Supabase style) */
.pre-sidebar-hover-panel {
    position: fixed;
    z-index: 1050;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 0.35rem;
    min-width: 200px;
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.12s ease,
        transform 0.12s ease;
    pointer-events: none;
}
.pre-sidebar-hover-panel.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.hover-panel-header {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--tblr-body-color);
    padding: 0.4rem 0.6rem 0.45rem;
    border-bottom: 1px solid var(--tblr-border-color);
    margin-bottom: 0.3rem;
}
.hover-panel-label {
    font-weight: 500;
    font-size: var(--fs-body);
    padding: 0.4rem 0.6rem;
    color: var(--tblr-body-color);
    white-space: nowrap;
}
.hover-panel-group {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tblr-secondary);
    padding: 0.35rem 0.6rem 0.15rem;
}
.hover-panel-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--tblr-body-color);
    text-decoration: none !important;
    font-size: var(--fs-body);
    white-space: nowrap;
    transition: background 0.12s;
}
.hover-panel-link:hover {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}
.hover-panel-link i {
    font-size: 1em;
    color: var(--tblr-secondary);
    width: 1.1em;
    text-align: center;
}
/* Contadores del flyout: iguales a los de la sidebar (número gris mono).
   Especificidad extra para ganar a `.badge.bg-*` de la sección 9. */
.pre-sidebar-hover-panel .badge.hover-panel-badge,
.pre-sidebar-hover-panel .hover-panel-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    color: var(--ui-fg-subtle) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 0 0.75rem !important;
    min-width: 0;
}
/* Flotante (sidebar cerrada): alto acotado con scroll propio */
.pre-sidebar-hover-panel {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    width: 232px;
}
/* Peek (sidebar abierta): ocupa el lugar de la sidebar, a toda altura,
   con la misma cabecera y ritmo que la sidebar real. */
.pre-sidebar-hover-panel.is-peek {
    top: 0;
    bottom: 0;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-width: 0 1px 0 0;
    padding: 0 0.5rem 1rem;
    transform: none;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.12);
    z-index: 1035;
}
.pre-sidebar-hover-panel.is-peek .hover-panel-header {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    margin: 0 -0.5rem 0.5rem;
    padding: 0 1rem;
    font-size: var(--fs-subtitle);
}
.pre-sidebar-hover-panel.is-peek .hover-panel-link {
    height: 32px;
    padding: 0 0.6rem;
}
.pre-sidebar-hover-panel.is-peek .hover-panel-divider {
    display: none;
}
.pre-sidebar-hover-panel.is-peek .hover-panel-group {
    padding: 0.85rem 0.6rem 0.3rem;
}
[data-bs-theme='dark'] .pre-sidebar-hover-panel.is-peek {
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.5);
}
.hover-panel-link-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
.hover-panel-divider {
    height: 1px;
    background: var(--tblr-border-color);
    margin: 0.3rem 0.4rem;
}
[data-bs-theme='dark'] .pre-sidebar-hover-panel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ────────────────────────────────────────────────────────────────────
   5. SIDEBAR CONTEXTUAL (Plain style)
   ──────────────────────────────────────────────────────────────────── */
.main-sidebar {
    position: fixed !important;
    left: var(--rail-w) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-w) !important;
    padding: 0 !important;
    background: var(--tblr-bg-surface) !important;
    border-right: 1px solid var(--tblr-border-color);
    box-shadow: none !important;
    z-index: 1030 !important;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
    overflow: hidden !important;
}
.main-sidebar.show {
    transform: translateX(0);
}
.main-sidebar > .w-100,
.main-sidebar .navbar-collapse {
    height: 100%;
}
.sidebar-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Cabecera de sección: título + botón cerrar (móvil) */
.sidebar-section > div:first-child {
    height: var(--topbar-h) !important;
    flex-shrink: 0;
    padding: 0 0.75rem 0 1rem !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar-section > div:first-child h4 {
    font-size: var(--fs-subtitle);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--tblr-body-color);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-section ul.navbar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 1rem !important;
    gap: 1px !important;
    display: flex;
    flex-direction: column;
}
.sidebar-section .nav-item {
    width: 100%;
}
/* Eyebrow de grupo */
.sidebar-section .nav-item > div.nav-link {
    padding: 0.85rem 0.6rem 0.3rem !important;
    margin: 0;
    color: var(--tblr-secondary) !important;
    cursor: default;
    display: block;
}
.sidebar-section ul.navbar-nav > li.nav-item:first-child > div.nav-link {
    padding-top: 0.4rem !important;
}
.sidebar-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.07em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--tblr-secondary);
    opacity: 1;
}
/* Items */
.sidebar-section .nav-item > a.nav-link,
.sidebar-section .nav-item > a.nav-link:hover,
.sidebar-section .nav-item > a.nav-link.active,
.sidebar-section .nav-item > a.nav-link.current {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 32px;
    padding: 0 0.6rem !important;
    margin: 0 !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--fs-body);
    line-height: 1;
    text-decoration: none !important;
    position: relative;
    transition:
        background 0.12s,
        color 0.12s;
}
.sidebar-section .nav-item > a.nav-link {
    font-weight: 400;
    color: var(--tblr-body-color) !important;
    background: transparent !important;
}
.sidebar-section .nav-item > a.nav-link:hover {
    background: var(--tblr-bg-surface-secondary) !important;
}
.sidebar-section .nav-item > a.nav-link.active,
.sidebar-section .nav-item > a.nav-link.current {
    background: var(--ui-accent-soft) !important;
    color: var(--tblr-primary) !important;
    font-weight: 500;
    box-shadow: none !important;
}
.sidebar-section .nav-item > a.nav-link.current::before,
.sidebar-section .nav-item > a.nav-link.active::before {
    display: none !important;
    content: none !important;
}
.sidebar-section .nav-item > a.nav-link i {
    color: var(--tblr-secondary);
    font-size: 1.05rem;
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
    margin-right: 0 !important;
}
.sidebar-section .nav-item > a.nav-link.active i,
.sidebar-section .nav-item > a.nav-link.current i {
    color: var(--tblr-primary) !important;
}
.sidebar-section .nav-item > a.nav-link.current *,
.sidebar-section .nav-item > a.nav-link.active * {
    color: inherit !important;
}
.sidebar-section .nav-item > a.nav-link .nav-link-title {
    font-weight: inherit;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* El `line-height: 1` del item deja la caja de línea del alto exacto de la
       fuente, así que las descendentes (g, p, y, j) sobresalen y este
       `overflow: hidden` —que existe para el ellipsis— las corta. Se le da
       alto de línea suficiente; el item mide 32px con los hijos centrados,
       así que nada se mueve. */
    line-height: 1.45;
}
/* Contadores: número mono, sin fondo (Plain) */
.main-sidebar .navbar-nav .nav-link .badge {
    position: static;
    transform: none;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 500;
    padding: 0;
    background: transparent !important;
    color: var(--tblr-secondary) !important;
    border: 0 !important;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sidebar-section .nav-item > a.nav-link.current .badge,
.sidebar-section .nav-item > a.nav-link.active .badge {
    color: var(--tblr-primary) !important;
}
.sidebar-close-btn {
    color: var(--tblr-secondary);
}

/* ────────────────────────────────────────────────────────────────────
   6. BARRA SUPERIOR — breadcrumb + acciones globales
   ──────────────────────────────────────────────────────────────────── */
.fixed-top-bar {
    position: fixed;
    top: 0;
    left: var(--rail-w);
    right: 0;
    height: var(--topbar-h);
    background: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color) !important;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem 0 0.75rem;
    transition: left 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.fixed-top-bar.sidebar-open {
    left: calc(var(--rail-w) + var(--sidebar-w));
}
.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 0;
    background: transparent;
    color: var(--tblr-secondary);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none !important;
    transition:
        background 0.12s,
        color 0.12s;
}
.topbar-icon-btn:hover {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}
.topbar-icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.topbar-icon-btn i {
    font-size: 1.1rem;
}
.topbar-crumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-body);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.topbar-crumbs a {
    color: var(--tblr-secondary);
    text-decoration: none !important;
}
.topbar-crumbs a:hover {
    color: var(--tblr-body-color);
}
.topbar-crumbs .crumb-sep {
    color: var(--ui-fg-subtle);
    font-size: var(--fs-body);
    user-select: none;
}
.topbar-crumbs .crumb-current {
    color: var(--tblr-body-color);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Botón de notificaciones — icono + contador mono */
.system-notifications-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 30px;
    padding: 0 0.6rem !important;
    border-radius: 7px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--tblr-secondary) !important;
    font-size: var(--fs-body);
    box-shadow: none !important;
    text-decoration: none !important;
}
.system-notifications-toggle:hover {
    background: var(--tblr-bg-surface-secondary) !important;
    color: var(--tblr-body-color) !important;
}
.system-notifications-toggle i {
    font-size: 1.1rem;
}
#notificationCounter {
    font-family: var(--font-mono);
    font-size: var(--fs-micro) !important;
    font-weight: 500;
    padding: 0.15em 0.45em;
    border-radius: 999px;
    background: var(--tblr-primary) !important;
    color: #fff !important;
    line-height: 1.2;
    min-width: 1.4em;
}
#system-notifications {
    position: fixed;
    width: 420px;
    min-height: 240px;
    max-height: 600px;
    z-index: 1050;
    bottom: auto;
    top: calc(var(--topbar-h) + 0.5rem);
    right: 0.75rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.12);
}
#system-notifications .nav-tabs {
    padding: 0 0.5rem;
}
#system-notifications .card-footer .btn {
    height: var(--control-h-sm);
}

@media (max-width: 991px) {
    :root {
        --sidebar-w: 200px;
    }
    .pre-sidebar-btn {
        width: 32px;
        height: 32px;
    }
}
@media (max-width: 576px) {
    :root {
        --sidebar-w: 180px;
    }
    .fixed-top-bar {
        padding: 0 0.6rem;
    }
    #system-notifications {
        width: calc(100vw - 1rem);
        right: 0.5rem;
    }
    .topbar-crumbs .crumb-section {
        display: none;
    }
    .topbar-crumbs .crumb-section + .crumb-sep {
        display: none;
    }
}

/* ────────────────────────────────────────────────────────────────────
   7. ENCABEZADOS DE PÁGINA — patrón canónico `.ui-page-head`
   Una sola fila (52px), título a la izquierda y controles a la derecha.
   Todas las vistas usan este marcado:

     <header class="ui-page-head">
       [<a class="ui-page-head__back btn btn-icon" href="…"><i class="ti ti-arrow-left"></i></a>]
       <div class="ui-page-head__heading">
         <h1 class="ui-page-head__title">Título en sentence case</h1>
         [<p class="ui-page-head__sub">Subtítulo / meta</p>]
       </div>
       <div class="ui-page-head__actions">
         1. buscador   <div class="input-icon ui-page-head__search">
                         <span class="input-icon-addon"><i class="ti ti-search"></i></span>
                         <input class="form-control form-control-sm" …></div>
         2. filtros / segmentados / selects / fechas
         3. secundarios  btn btn-sm btn-outline-secondary [btn-icon]
         4. primario     btn btn-sm btn-primary (uno, al final)
       </div>
       [<div class="ui-page-head__bar"> tabs subrayadas o chips </div>]
     </header>

   Sin iconos en el título, sin colores decorativos, sin estilos inline.
   `--static` quita el sticky (vistas cuyo contenedor no hace scroll).
   ──────────────────────────────────────────────────────────────────── */
:root {
    --page-head-h: 3.714rem; /* 52px */
}
.page-wrapper .ui-page-head,
.ui-page-head {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--sp-4);
    row-gap: var(--sp-2);
    min-height: var(--page-head-h);
    margin: 0;
    padding: var(--sp-2) var(--sp-5);
    background: var(--ui-surface);
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    box-shadow: none;
}
.page-wrapper .ui-page-head.ui-page-head--static {
    position: relative;
    top: auto;
}
.ui-page-head__back.btn {
    flex-shrink: 0;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    margin-right: calc(-1 * var(--sp-2));
    background: transparent;
    border: 0;
    color: var(--ui-fg-muted);
}
.ui-page-head__back.btn:hover {
    background: var(--ui-surface-2);
    color: var(--ui-fg);
}
.ui-page-head__heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.page-wrapper .ui-page-head__title,
.ui-page-head__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ui-fg);
    white-space: nowrap;
}
/* Meta inline junto al título (estado de un corte, conteo…) */
.ui-page-head__title .badge,
.ui-page-head__title-meta {
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0;
}
.ui-page-head__title-meta {
    color: var(--ui-fg-muted);
    font-family: var(--font-sans);
}
.page-wrapper .ui-page-head__sub,
.ui-page-head__sub {
    margin: 0;
    font-size: var(--fs-meta);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ui-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Meta en vivo dentro del subtítulo (conteos, sync, timers): texto
   secundario, sin cápsulas de color ni iconos. */
.page-wrapper .ui-page-head__sub {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
.page-wrapper .ui-page-head__sub .badge {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ui-fg-muted) !important;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.page-wrapper .ui-page-head__sub .badge > .ti {
    display: none;
}
.ui-page-head__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-left: auto;
    min-width: 0;
}
.ui-page-head__actions > .d-flex,
.ui-page-head__group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
/* Buscador de ancho fijo con icono a la izquierda */
.ui-page-head .ui-page-head__search {
    flex: 0 1 240px;
    width: 240px;
    min-width: 160px;
}
.ui-page-head .ui-page-head__search .form-control {
    width: 100% !important;
}
/* Controles: misma altura y tipografía en todo el encabezado */
.page-wrapper .ui-page-head .btn,
.page-wrapper .ui-page-head .form-control,
.page-wrapper .ui-page-head .form-select,
.page-wrapper .ui-page-head .ts-wrapper .ts-control {
    height: var(--control-h);
    min-height: var(--control-h);
    font-size: var(--fs-body);
    border-radius: var(--radius-sm);
}
.page-wrapper .ui-page-head .form-control,
.page-wrapper .ui-page-head .form-select {
    line-height: calc(var(--control-h) - 2px);
}
.page-wrapper .ui-page-head .btn {
    padding: 0 var(--sp-3);
    gap: var(--sp-1);
}
.page-wrapper .ui-page-head .btn.btn-icon {
    width: var(--control-h);
    padding: 0;
}
.page-wrapper .ui-page-head .btn > .ti,
.page-wrapper .ui-page-head .btn > i {
    font-size: 1rem;
    margin: 0;
}
.page-wrapper .ui-page-head .btn.dropdown-toggle::after {
    margin-left: var(--sp-1);
}
.page-wrapper .ui-page-head .form-select {
    width: auto;
    padding-right: 2rem;
}
/* Segunda fila opcional: tabs subrayadas / chips */
.ui-page-head__bar {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
.page-wrapper .ui-page-head:has(> .ui-page-head__bar > .nav-tabs) {
    padding-bottom: 0;
}
/* Pestañas del encabezado: subrayado del ancho del texto, alineadas con el
   título, sin íconos (el texto basta) y pegadas al borde inferior. */
.ui-page-head__bar > .nav-tabs {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: var(--sp-5) !important;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 0 -1px 0;
    padding: 0;
    border-bottom: 0;
}
.ui-page-head__bar > .nav-tabs .nav-item {
    margin: 0;
}
.ui-page-head__bar > .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--ui-fg-muted);
    font-size: var(--fs-body);
    font-weight: 500;
    white-space: nowrap;
}
.ui-page-head__bar > .nav-tabs .nav-link:hover {
    color: var(--ui-fg);
}
.ui-page-head__bar > .nav-tabs .nav-link.active {
    color: var(--ui-fg);
    border-bottom-color: var(--ui-fg) !important;
}
.ui-page-head__bar > .nav-tabs .nav-link > .ti {
    display: none;
}
.ui-page-head__bar > .nav-tabs .nav-link .badge {
    margin: 0 !important;
    padding: 0 0.35em;
    border: 0 !important;
    background: none !important;
    color: var(--ui-fg-subtle) !important;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 400;
}
/* La tabla que sigue a un encabezado con pestañas no repite el borde */
.ui-page-head:has(> .ui-page-head__bar > .nav-tabs) + * .dataTables_scrollHead,
.ui-page-head:has(> .ui-page-head__bar > .nav-tabs) ~ .tab-content .dataTables_scrollHead {
    border-top: 0 !important;
}
/* Filtros avanzados que se despliegan bajo el encabezado
   (<div class="collapse ui-page-filters" id="filterCollapse">) */
.ui-page-filters {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    padding: var(--sp-3) var(--sp-5);
}
@media (max-width: 767.98px) {
    .page-wrapper .ui-page-head {
        padding: var(--sp-2) var(--sp-4);
    }
    .ui-page-head__actions {
        margin-left: 0;
        justify-content: flex-start;
        flex: 1 0 100%;
    }
    .ui-page-head .ui-page-head__search {
        flex: 1 1 auto;
    }
}

/* Legacy — encabezados aún no migrados. Se igualan métricas al patrón
   canónico (altura, título, fondo) para que no desentonen. */
.page-wrapper [class*='container-'].border-bottom > .d-flex.align-items-center.justify-content-between,
.page-wrapper [class*='container-'] > .d-flex.align-items-center.justify-content-between.border-bottom,
.page-header > .container-fluid > .d-flex.align-items-center.justify-content-between,
.section-header {
    min-height: 2.571rem;
    gap: var(--sp-3);
}
.page-wrapper [class*='container-'].border-bottom > .d-flex.align-items-center.justify-content-between > h4,
.page-wrapper [class*='container-'].border-bottom > .d-flex.align-items-center.justify-content-between > h3,
.page-wrapper [class*='container-'].border-bottom > .d-flex.align-items-center.justify-content-between > h2,
.page-wrapper .page-header .page-title,
.page-wrapper .an-topbar h4,
.page-wrapper .section-header > h4,
.page-wrapper .section-header > h3,
.page-wrapper .section-header > h2 {
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ui-fg);
    margin: 0;
}
.section-header {
    padding: var(--sp-2) var(--sp-5);
}
.page-wrapper .an-topbar,
.page-wrapper .section-header {
    min-height: var(--page-head-h);
    padding: var(--sp-2) var(--sp-5);
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
}
.page-pretitle {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tblr-secondary);
    font-weight: 500;
}
.page-header {
    margin: 0;
    padding: var(--sp-2) 0;
}

/* Tabs subrayadas, tipo Supabase */
.nav-tabs {
    border-bottom: 1px solid var(--tblr-border-color);
    gap: 0.25rem;
}
.nav-tabs .nav-link {
    font-size: var(--fs-body);
    color: var(--tblr-secondary);
    padding: 0.55rem 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    background: transparent;
    font-weight: 400;
}
.nav-tabs .nav-link:hover {
    color: var(--tblr-body-color);
    border-bottom-color: var(--ui-border-strong);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--tblr-body-color);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--tblr-body-color);
    font-weight: 500;
}
.nav-tabs .nav-link .badge {
    margin-left: 0.4rem;
}
.nav-tabs.flex-column .nav-link,
.nav-tabs.flex-column .nav-link.active {
    border: 0;
    border-radius: var(--radius-sm);
}
.nav-tabs.flex-column .nav-link.active {
    background: var(--tblr-bg-surface-secondary);
}

/* Segmented control genérico */
.segmented,
.btn-group.segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--tblr-bg-surface-secondary);
    border-radius: 8px;
    border: 1px solid var(--tblr-border-color);
}

/* ────────────────────────────────────────────────────────────────────
   8. TABLAS (Supabase table editor)
   ──────────────────────────────────────────────────────────────────── */
.table {
    font-size: var(--fs-table);
    color: var(--tblr-body-color);
    margin-bottom: 0;
    --tblr-table-bg: transparent;
}
.table > :not(caption) > * > * {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--tblr-border-color);
    vertical-align: middle;
    font-weight: 400;
    background: transparent;
}
.table thead th,
.table > thead > tr > th,
.dataTable thead th {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--tblr-secondary);
    text-transform: none;
    letter-spacing: 0;
    background: var(--tblr-bg-surface-secondary);
    border-bottom: 1px solid var(--tblr-border-color);
    padding: 0.55rem 0.9rem;
    white-space: nowrap;
    height: 38px;
}
/* Los headers traían un icono por columna (JS los inyecta dentro de un
   .d-flex): ruido. Fuera, en cualquier profundidad. */
.table thead th i.ti,
.dataTable thead th i.ti {
    display: none;
}
.table thead th > .d-flex {
    gap: 0 !important;
}
.table tbody tr {
    transition: background 0.1s;
}
.table-hover > tbody > tr:hover > *,
.table tbody tr:hover > * {
    background-color: var(--tblr-bg-surface-secondary);
    color: inherit;
    --tblr-table-accent-bg: transparent;
}
.table tbody tr.selected > *,
.table tbody tr.table-active > * {
    background-color: var(--ui-accent-soft) !important;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px 0;
}
.table-bordered > :not(caption) > * > * + * {
    border-left: 1px solid var(--tblr-border-color);
}
.table.table-compact > :not(caption) > * > * {
    padding: 0.45rem 0.75rem;
}
.table .num,
.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
}
.table .form-check-input {
    margin: 0;
}
.table-responsive {
    border-radius: 0;
}
.card > .table-responsive,
.card > .table {
    border-top: 1px solid var(--tblr-border-color);
}

/* Grid estilo Supabase: hairlines verticales tenues, header gris,
   primera columna (checkbox / id) compacta, filas de 40px. */
.table.dataTable > :not(caption) > * > *,
.table.table-grid > :not(caption) > * > * {
    border-right: 1px solid color-mix(in srgb, var(--tblr-border-color) 70%, transparent);
    padding: 0.5rem 0.9rem;
    height: 40px;
}
.table.dataTable > :not(caption) > * > *:last-child,
.table.table-grid > :not(caption) > * > *:last-child {
    border-right: 0;
}
.table.dataTable thead th,
.table.table-grid thead th {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}
.table.dataTable thead th.dt-checkboxes-cell,
.table.dataTable td.dt-checkboxes-cell,
.table.dataTable th.select-checkbox,
.table.dataTable td.select-checkbox {
    width: 2.5rem;
    text-align: center;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
.table.dataTable tbody td {
    color: var(--tblr-body-color);
}
.table.dataTable tbody td.text-muted,
.table.dataTable tbody td .text-muted {
    color: var(--tblr-secondary) !important;
}
/* Columnas de ID / fecha / número leen en mono, como en el editor de Supabase */
.table.dataTable tbody td.col-id,
.table.dataTable tbody td.num,
.table.dataTable tbody td.dt-type-numeric,
.table.dataTable tbody td.dt-type-date {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_paginate {
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
    font-family: var(--font-mono);
}
.dataTables_wrapper .dataTables_length select {
    height: var(--control-h-sm);
    font-size: var(--fs-meta);
    font-family: var(--font-sans);
    padding: 0 1.6rem 0 0.5rem;
}
.dataTables_wrapper .bottom-table {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}
.dataTables_paginate {
    padding-top: 0 !important;
}
.dataTables_paginate .pagination {
    margin-bottom: 0;
    gap: 2px;
    justify-content: end;
}
.page-link {
    font-size: var(--fs-meta);
    font-family: var(--font-sans);
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px !important;
    color: var(--tblr-secondary);
    background: transparent;
}
.page-link:hover {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    border-color: transparent;
}
.page-link.active,
.active > .page-link {
    color: var(--tblr-body-color) !important;
    background-color: var(--tblr-bg-surface) !important;
    border-color: var(--ui-border-strong) !important;
    font-weight: 500;
}
.dataTables_scrollHead tr {
    border-bottom: 0 !important;
}
.dataTables_empty,
.table .empty {
    padding: 3rem 1rem !important;
    color: var(--tblr-secondary);
    font-size: var(--fs-body);
    text-align: center;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    opacity: 0.5;
}

/* Botones de acción dentro de tablas */
.btn-table-action,
.tbl-actions .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tblr-secondary);
}
.btn-table-action:hover,
.tbl-actions .btn:hover {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    border-color: var(--tblr-border-color);
}

/* ────────────────────────────────────────────────────────────────────
   9. BADGES / ESTADO
   Todos los badges se vuelven "soft": fondo tenue + texto de color +
   borde sutil. Los sólidos saturados desaparecen (ruido visual).
   ──────────────────────────────────────────────────────────────────── */
.badge {
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    padding: 0.25em 0.6em;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    border-color: var(--tblr-border-color);
    vertical-align: middle;
}
.badge.badge-pill,
.badge.rounded-pill {
    border-radius: 999px;
}
.badge i.ti {
    font-size: 1em;
}
.badge .brand-logo {
    width: 1em;
    height: 1em;
}

.badge.bg-green,
.badge.bg-success,
.badge.bg-green-lt,
.badge.bg-success-lt,
.badge.bg-lime,
.badge.bg-lime-lt {
    background: var(--ui-tag-green-bg) !important;
    color: var(--ui-tag-green-fg) !important;
    border-color: transparent !important;
}
.badge.bg-red,
.badge.bg-danger,
.badge.bg-red-lt,
.badge.bg-danger-lt,
.badge.bg-pink,
.badge.bg-pink-lt {
    background: var(--ui-tag-red-bg) !important;
    color: var(--ui-tag-red-fg) !important;
    border-color: transparent !important;
}
.badge.bg-orange,
.badge.bg-warning,
.badge.bg-yellow,
.badge.bg-orange-lt,
.badge.bg-warning-lt,
.badge.bg-yellow-lt {
    background: var(--ui-tag-orange-bg) !important;
    color: var(--ui-tag-orange-fg) !important;
    border-color: transparent !important;
}
.badge.bg-blue,
.badge.bg-primary,
.badge.bg-azure,
.badge.bg-info,
.badge.bg-cyan,
.badge.bg-blue-lt,
.badge.bg-primary-lt,
.badge.bg-azure-lt,
.badge.bg-info-lt,
.badge.bg-cyan-lt {
    background: var(--ui-tag-blue-bg) !important;
    color: var(--ui-tag-blue-fg) !important;
    border-color: transparent !important;
}
.badge.bg-purple,
.badge.bg-indigo,
.badge.bg-purple-lt,
.badge.bg-indigo-lt {
    background: var(--ui-tag-purple-bg) !important;
    color: var(--ui-tag-purple-fg) !important;
    border-color: transparent !important;
}
.badge.bg-teal,
.badge.bg-teal-lt {
    background: var(--ui-tag-teal-bg) !important;
    color: var(--ui-tag-teal-fg) !important;
    border-color: transparent !important;
}
.badge.bg-secondary,
.badge.bg-secondary-lt,
.badge.bg-gray,
.badge.bg-muted,
.badge.bg-light,
.badge.bg-muted-lt,
.badge.bg-gray-lt,
.badge.bg-dark,
.badge.bg-dark-lt,
.badge.bg-black {
    background: var(--tblr-bg-surface-secondary) !important;
    color: var(--tblr-body-color) !important;
    border-color: var(--tblr-border-color) !important;
}
/* Puntos de estado: `<span class="status-dot bg-green">` */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}
.status {
    font-size: var(--fs-meta);
    border-radius: 6px;
}

/* ────────────────────────────────────────────────────────────────────
   10. CONTROLES — botones, inputs, selects, TomSelect, flatpickr
   ──────────────────────────────────────────────────────────────────── */
.btn {
    height: var(--control-h);
    padding: 0 0.85rem;
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.006em;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition:
        background 0.12s,
        border-color 0.12s,
        color 0.12s;
}
.btn > i {
    vertical-align: 0;
}
.btn.btn-sm {
    height: var(--control-h-sm);
    padding: 0 0.6rem;
    font-size: var(--fs-meta);
}
.btn.btn-lg {
    height: var(--control-h-lg);
    padding: 0 1.1rem;
    font-size: var(--fs-subtitle);
    border-radius: var(--radius-md);
}
.btn.btn-icon {
    width: var(--control-h);
    padding: 0;
}
.btn.btn-icon.btn-sm {
    width: var(--control-h-sm);
}
/* Secundario = blanco con borde (Supabase "Copy") */
.btn-outline-secondary,
.btn-secondary,
.btn-light,
.btn-white,
.btn-default {
    background: var(--tblr-bg-surface) !important;
    border: 1px solid var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}
.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-white:hover,
.btn-default:hover {
    background: var(--tblr-bg-surface-secondary) !important;
    border-color: var(--ui-border-strong) !important;
}
.btn-ghost-secondary,
.btn-ghost-primary,
.btn-transparent {
    background: transparent;
    border-color: transparent;
    color: var(--tblr-secondary);
}
.btn-ghost-secondary:hover,
.btn-transparent:hover {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}
.btn-primary {
    background: var(--tblr-primary);
    border-color: var(--tblr-primary);
    color: #fff;
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--tblr-primary) 88%, #000);
    border-color: color-mix(in srgb, var(--tblr-primary) 88%, #000);
}
.btn-dark {
    background: var(--ui-fg);
    border-color: var(--ui-fg);
    color: var(--ui-surface);
}
.btn-dark:hover {
    background: color-mix(in srgb, var(--ui-fg) 85%, var(--ui-surface));
    border-color: transparent;
    color: var(--ui-surface);
}
.btn-success,
.btn-green {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.btn-danger,
.btn-red {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-ring);
}
.btn-list {
    gap: 0.5rem;
}

.form-control,
.form-select,
.ts-wrapper .ts-control {
    height: var(--control-h);
    min-height: var(--control-h);
    padding: 0 0.7rem;
    font-size: var(--fs-body);
    line-height: calc(var(--control-h) - 2px);
    font-weight: 400;
    border-radius: var(--radius-sm);
    border: 1px solid var(--tblr-border-color);
    background-color: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    box-shadow: none;
    transition:
        border-color 0.12s,
        box-shadow 0.12s;
}
.form-control:hover,
.form-select:hover {
    border-color: var(--ui-border-strong);
}
.form-control:focus,
.form-select:focus,
.ts-wrapper.focus .ts-control {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 3px var(--ui-ring);
    background-color: var(--tblr-bg-surface);
}
.form-control::placeholder {
    color: var(--ui-fg-subtle);
}
textarea.form-control {
    height: auto;
    min-height: 5rem;
    line-height: 1.5;
    padding: 0.5rem 0.7rem;
}
.form-control-sm,
.form-select-sm {
    height: var(--control-h-sm);
    min-height: var(--control-h-sm);
    padding: 0 0.5rem;
    font-size: var(--fs-meta);
    line-height: calc(var(--control-h-sm) - 2px);
}
.form-select {
    padding-right: 2rem;
}
.form-label {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--tblr-body-color);
    margin-bottom: 0.35rem;
    letter-spacing: 0;
}
.form-hint {
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
}
.input-icon .form-control {
    padding-left: 2.1rem;
}
.input-icon .input-icon-addon {
    top: 50%;
    transform: translateY(-50%);
    padding-left: 0.7rem;
    color: var(--tblr-secondary);
    min-width: 0;
}
.input-icon .input-icon-addon i {
    font-size: 1em;
}
.input-group-text {
    height: var(--control-h);
    font-size: var(--fs-body);
    border-radius: var(--radius-sm);
    background: var(--tblr-bg-surface-secondary);
    border-color: var(--tblr-border-color);
    color: var(--tblr-secondary);
}
.form-check-input {
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    border: 1px solid var(--ui-border-strong);
    margin-top: 0.2em;
    background-color: var(--tblr-bg-surface);
}
.form-check-input:checked {
    background-color: var(--ui-fg);
    border-color: var(--ui-fg);
}
.form-check-label {
    font-size: var(--fs-body);
}
.form-switch .form-check-input {
    width: 2rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 0;
    background-color: var(--ui-border-strong);
}
.form-switch .form-check-input:checked {
    background-color: var(--tblr-primary);
}
.ts-wrapper .ts-control {
    display: flex;
    align-items: center;
}
.ts-wrapper.multi .ts-control {
    height: auto;
    min-height: var(--control-h);
    padding: 0.2rem 0.5rem;
    line-height: 1.4;
}
.ts-wrapper.multi .ts-control > .item {
    background: var(--tblr-bg-surface-secondary);
    border: 1px solid var(--tblr-border-color);
    border-radius: 5px;
    font-size: var(--fs-meta);
    padding: 0.1rem 0.4rem;
    margin: 0.1rem 0.25rem 0.1rem 0;
}
.ts-dropdown {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08);
    font-size: var(--fs-body);
    background: var(--tblr-bg-surface);
    margin-top: 4px;
}
.ts-dropdown .option {
    padding: 0.45rem 0.7rem;
}
.ts-dropdown .active {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}
.flatpickr-calendar {
    border-radius: var(--radius-md);
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    font-size: var(--fs-body);
}
.dropzone {
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--radius-md);
    color: var(--tblr-secondary);
    padding: 1rem;
    background: var(--tblr-bg-surface);
}

/* Avatares */
.avatar {
    font-size: var(--fs-meta);
    font-weight: 500;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--tblr-body-color);
}
.avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
}

/* Progress */
.progress {
    height: 6px;
    border-radius: 999px;
    background: var(--ui-surface-3);
}
.progress-bar {
    border-radius: 999px;
}

/* Toasts: ver §19 */

/* Empty states */
.empty {
    padding: 3rem 1rem;
}
.empty-icon {
    color: var(--ui-fg-subtle);
    margin-bottom: 0.75rem;
}
.empty-title {
    font-size: var(--fs-subtitle);
    font-weight: 500;
}
.empty-subtitle {
    font-size: var(--fs-body);
    color: var(--tblr-secondary);
}

/* ────────────────────────────────────────────────────────────────────
   11. KPI CARDS — patrón compartido (Supabase project cards)
   Aplica a `.kpi-pill` (torre de control) y a cualquier `.stat-card`
   nuevo. Los KPI de analíticas (`.an-kpi`) viven en analytics-shell.css. Label mono en mayúsculas arriba, valor
   grande abajo, delta/subtexto en meta.
   ──────────────────────────────────────────────────────────────────── */
.stat-card {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--radius-md);
    min-width: 0;
}
.stat-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tblr-secondary);
    font-size: 1.15rem;
}
.stat-card-label,
.dispatch-kpis .kpi-pill .kpi-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tblr-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-card-value {
    font-size: var(--fs-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--tblr-body-color);
}
.stat-card-sub {
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────────
   11b. TORRE DE CONTROL — tratamiento común a todas las vistas v2
   (envíos locales, actividad, rutas dedicadas, combustible, nacional,
   internacional). Las vistas traen su propio CSS con la misma
   especificidad y se carga después, por eso aquí se antepone
   `.page-wrapper`.
   ──────────────────────────────────────────────────────────────────── */
/* Los topbars de Torre de Control usan `.ui-page-head` (sección 7); el
   título se muestra igual que en el resto de vistas. */
.page-wrapper .fleet-topbar,
.page-wrapper .routes-topbar,
.page-wrapper .fuel-topbar,
.page-wrapper .parcel-topbar,
.page-wrapper .dispatch-topbar {
    min-height: var(--page-head-h);
    padding: var(--sp-2) var(--sp-5);
    background: var(--ui-surface);
}
/* Pills informativos del header → texto secundario, sin caja. */
.page-wrapper .routes-topbar .badge,
.page-wrapper .fuel-topbar .badge {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--tblr-secondary) !important;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    font-weight: 400;
}
/* Tarjetas KPI (.kpi-card) y etapas del pipeline: etiqueta mono arriba,
   valor abajo. */
.page-wrapper .kpi-card {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    gap: 0.2rem;
}
.page-wrapper .kpi-card .kpi-label,
.page-wrapper .pipeline-stage .stage-label {
    order: -1;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tblr-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-wrapper .kpi-card .kpi-value,
.page-wrapper .pipeline-stage .stage-count {
    font-size: var(--fs-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--tblr-body-color);
    line-height: 1.2;
}
.page-wrapper .kpi-card .kpi-hint,
.page-wrapper .pipeline-stage .stage-pct {
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
}
.page-wrapper .pipeline-stage {
    border-radius: var(--radius-md);
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    padding: 0.85rem 1rem;
}
.page-wrapper .pipeline-arrow {
    color: var(--ui-fg-subtle);
}

/* Chips de origen (Todos / Normal / ML Flex / Uber Direct) — contraste en
   ambos temas. Uber usa negro de marca en claro; en oscuro se invierte. */
[data-bs-theme='dark'] .src-chip.src-chip-uber:not(.active) {
    color: var(--tblr-body-color);
    border-color: transparent;
    background: transparent;
}
[data-bs-theme='dark'] .src-chip.src-chip-uber.active {
    background: #fff;
    color: #000;
    border-color: #fff;
}
[data-bs-theme='dark'] .src-chip.src-chip-uber:not(.active):hover {
    background: var(--tblr-bg-surface-secondary);
}

/* ────────────────────────────────────────────────────────────────────
   11c. OFFCANVAS DE DETALLE (envío local / nacional / internacional,
   unidad, ruta). Cabecera compacta con guía en mono, acciones ligeras,
   tabs subrayadas y bloques de información como secciones planas con
   etiqueta mono arriba.
   ──────────────────────────────────────────────────────────────────── */
.offcanvas.offcanvas-end {
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
}
.offcanvas .offcanvas-header {
    padding: 0.7rem 1.25rem !important;
    min-height: 3.25rem;
    gap: 0.75rem;
}
.offcanvas .offcanvas-header h4 {
    font-family: var(--font-mono);
    font-size: var(--fs-subtitle);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
}
/* Títulos de panel (no son números de guía): tipografía normal */
.offcanvas .offcanvas-header h4.offcanvas-title {
    font-family: var(--font-sans);
    font-size: var(--fs-title);
    letter-spacing: -0.01em;
}
.offcanvas .offcanvas-header .ti-grid-pattern {
    color: var(--tblr-secondary);
}
.offcanvas .offcanvas-header .badge {
    font-size: var(--fs-micro);
}
.offcanvas .offcanvas-header .btn {
    height: var(--control-h-sm);
    padding: 0 0.6rem;
    font-size: var(--fs-meta);
    font-weight: 500;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    color: var(--tblr-body-color);
}
.offcanvas .offcanvas-header .btn:hover {
    background: var(--tblr-bg-surface-secondary);
}
/* Acción destructiva: borde y texto rojos, sin bloque sólido. */
.offcanvas .offcanvas-header .btn.bg-danger-lt,
.offcanvas .offcanvas-header .btn-danger,
.offcanvas .offcanvas-header .btn.bg-danger {
    background: transparent !important;
    color: var(--ui-danger) !important;
    border-color: color-mix(in srgb, var(--ui-danger) 35%, transparent) !important;
}
.offcanvas .offcanvas-header .btn.bg-danger-lt:hover,
.offcanvas .offcanvas-header .btn-danger:hover {
    background: color-mix(in srgb, var(--ui-danger) 8%, transparent) !important;
}
.offcanvas .offcanvas-header .btn-close {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-size: 0.7rem;
    opacity: 0.6;
    margin: 0;
}
.offcanvas .offcanvas-header .btn-close:hover {
    opacity: 1;
    background-color: var(--tblr-bg-surface-secondary);
}
.offcanvas .offcanvas-body {
    padding: 0 !important;
}
.offcanvas .offcanvas-body > .row {
    --tblr-gutter-y: 0;
    margin: 0;
    max-width: 100%;
    min-width: 0;
}
.offcanvas .offcanvas-body > .row > [class*='col-'] {
    padding: 0;
}
/* Fila "Cliente MobiiClub" + Contacto/Historial (offcanvas local) */
.offcanvas .offcanvas-body > .row > .col-md-12:first-child > .d-flex {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
}
.offcanvas .nav-tabs.card-header-tabs {
    margin: 0;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
}
.offcanvas .nav-tabs .nav-link {
    font-size: var(--fs-body);
    padding: 0.65rem 0.7rem;
}
.offcanvas .nav-tabs .nav-link .ti {
    color: var(--tblr-secondary);
    margin-right: 0.35rem !important;
}
.offcanvas .nav-tabs .nav-link.active .ti {
    color: var(--tblr-body-color);
}
.offcanvas .tab-content {
    padding: 1.1rem 1.25rem 1.5rem !important;
    margin: 0 !important;
}
.offcanvas .border-top.w-100 {
    border-top: 0 !important;
}
/* Etiquetas de bloque: eyebrow mono */
.offcanvas .form-label,
.offcanvas .datagrid-title,
.offcanvas .ml-section-head .title {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tblr-secondary);
}
.offcanvas .datagrid-content {
    font-size: var(--fs-body);
}
.offcanvas .avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm) !important;
    background: var(--tblr-bg-surface-secondary) !important;
    color: var(--tblr-secondary) !important;
}
/* Timeline recolección → entrega (Tabler .timeline)
   Geometría explícita: icono de 1.75rem anclado en (0,0), conector de 2px
   centrado bajo el icono y con contraste real, tarjeta desplazada a la
   derecha del icono. Antes el padding del evento movía el icono pero no
   el conector, y quedaban desfasados. */
.offcanvas .timeline {
    --tblr-timeline-icon-size: 1.75rem;
    --tblr-page-padding: 0.75rem;
    margin: 0;
    padding: 0;
}
.offcanvas .timeline-event {
    position: relative;
    padding: 0;
    margin: 0;
}
.offcanvas .timeline-event:not(:last-child) {
    margin-bottom: 1rem;
}
.offcanvas .timeline-event:not(:last-child)::before {
    content: '';
    display: block;
    position: absolute;
    top: 1.75rem;
    bottom: -1rem;
    left: calc(0.875rem - 1px);
    width: 2px;
    border-radius: 2px;
    background: var(--ui-border-strong);
}
.offcanvas .timeline-event-card {
    margin-left: 2.5rem;
}
.offcanvas .timeline-event-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px !important;
    background: var(--tblr-bg-surface) !important;
    border: 1px solid var(--tblr-border-color);
    color: var(--tblr-secondary) !important;
    box-shadow: none;
}
.offcanvas .timeline-event-icon.bg-success-lt,
.offcanvas .timeline-event-icon.bg-green-lt {
    color: var(--ui-success) !important;
    border-color: color-mix(in srgb, var(--ui-success) 40%, transparent);
}
.offcanvas .timeline-event-icon.bg-primary-lt,
.offcanvas .timeline-event-icon.bg-blue-lt {
    color: var(--ui-accent) !important;
    border-color: color-mix(in srgb, var(--ui-accent) 40%, transparent);
}
.offcanvas .timeline-event-icon .ti {
    font-size: 0.95rem;
}
.offcanvas .timeline-event-card {
    border: 1px solid var(--tblr-border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    background: var(--tblr-bg-surface);
}
.offcanvas .timeline-event-card > .p-2,
.offcanvas .timeline-event-card .card-body {
    padding: 0.85rem 1rem !important;
}
.offcanvas .timeline-event-card .form-label + small,
.offcanvas .timeline-event-card small {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--tblr-secondary);
}
.offcanvas .timeline-event-card .row.g-1 {
    --tblr-gutter-y: 0.35rem;
}
.offcanvas .timeline-event-card .row.g-1 > [class*='col-'] {
    font-size: var(--fs-body);
    line-height: 1.45;
}
.offcanvas .timeline-event-card .row.g-1 .ti {
    color: var(--ui-fg-subtle);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
/* Cards genéricas dentro del offcanvas: planas */
.offcanvas .tab-pane .card {
    box-shadow: none;
}
.offcanvas .tab-pane .card-header {
    padding: 0.65rem 1rem;
}
.offcanvas .table {
    font-size: var(--fs-table);
}
.offcanvas .offcanvas-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--tblr-border-color);
}
.offcanvas .offcanvas-footer:empty {
    display: none;
}

/* ────────────────────────────────────────────────────────────────────
   11d. FINANZAS / ANALÍTICAS — legibilidad
   ──────────────────────────────────────────────────────────────────── */
/* Título fuera del contenido (vive en el breadcrumb); el rango queda
   como meta. */
.page-wrapper .an-topbar h4 {
    display: none;
}
.page-wrapper .an-topbar .text-muted.small,
.page-wrapper .an-topbar #fin-range-label {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
}
/* Notas, insights, tira de métricas, tablas `.fin-table` y barras
   segmentadas de analíticas: analytics-shell.css. */
.page-wrapper .billing-money {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-meta);
}
/* Facturación: tarjetas KPI (fin-kpi-*) al patrón stat-card */
.page-wrapper .fin-kpi-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tblr-secondary);
    order: -1;
}
.page-wrapper .fin-kpi-value {
    font-size: var(--fs-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.page-wrapper .fin-kpi-sub {
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
}
.page-wrapper .flex-fill:has(> .fin-kpi-value),
.page-wrapper .fin-kpi-row > div:has(> .fin-kpi-value) {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
/* Iconos de KPI en facturación: caja neutra */
.page-wrapper .card-body > .d-flex.align-items-start.gap-3 > .avatar,
.page-wrapper .card-body > .d-flex.align-items-start.gap-3 > span.avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--tblr-bg-surface-secondary) !important;
    color: var(--tblr-secondary) !important;
}
/* Estados fiscales / de pago en tablas: pills suaves (ya cubiertas por
   .badge). Los `.billing-status-badge` propios también. */
.page-wrapper .billing-status-badge {
    font-size: var(--fs-micro);
    font-weight: 500;
    border-radius: 6px;
    padding: 0.2em 0.55em;
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}

/* ────────────────────────────────────────────────────────────────────
   11e. HOMOLOGACIÓN — tabs, segmentados, checkboxes y alineación de
   tablas. Dos familias y nada más:
     · TABS (cambian el contenido)  → subrayado. .nav-tabs y equivalentes.
     · SEGMENTADOS (filtran/modo)   → píldora en pista gris. .segmented y
       todas las variantes que fueron naciendo por vista.
   Los selectores llevan `.page-wrapper` / `.offcanvas` / `.modal` para
   ganar a los CSS de cada vista, que cargan después.
   ──────────────────────────────────────────────────────────────────── */

/* ── TABS ─────────────────────────────────────────────────────────── */
.page-wrapper .nav-tabs,
.offcanvas .nav-tabs,
.modal .nav-tabs,
#system-notifications .nav-tabs,
.page-wrapper .billing-section-nav,
.page-wrapper .ship-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--tblr-border-color);
    background: transparent;
    overflow-x: auto;
    scrollbar-width: none;
}
.page-wrapper .nav-tabs::-webkit-scrollbar,
.page-wrapper .billing-section-nav::-webkit-scrollbar,
.page-wrapper .ship-tabs::-webkit-scrollbar {
    display: none;
}
.page-wrapper .nav-tabs.card-header-tabs,
.offcanvas .nav-tabs.card-header-tabs,
.modal .nav-tabs.card-header-tabs {
    margin: 0 !important;
}
.page-wrapper .nav-tabs .nav-item,
.offcanvas .nav-tabs .nav-item {
    margin: 0;
}
.page-wrapper .nav-tabs .nav-link,
.offcanvas .nav-tabs .nav-link,
.modal .nav-tabs .nav-link,
#system-notifications .nav-tabs .nav-link,
.page-wrapper .billing-section-nav .section-pill,
.page-wrapper .ship-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 40px;
    padding: 0 0.75rem;
    margin: 0 0 -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--tblr-secondary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.page-wrapper .nav-tabs .nav-link:hover,
.offcanvas .nav-tabs .nav-link:hover,
.modal .nav-tabs .nav-link:hover,
.page-wrapper .billing-section-nav .section-pill:hover,
.page-wrapper .ship-tab:hover {
    color: var(--tblr-body-color);
    background: transparent;
    border-bottom-color: var(--ui-border-strong);
}
.page-wrapper .nav-tabs .nav-link.active,
.offcanvas .nav-tabs .nav-link.active,
.modal .nav-tabs .nav-link.active,
#system-notifications .nav-tabs .nav-link.active,
.page-wrapper .billing-section-nav .section-pill.active,
.page-wrapper .ship-tab.is-active {
    color: var(--tblr-body-color);
    background: transparent;
    border-bottom-color: var(--tblr-body-color);
    font-weight: 500;
}
/* Icono y contador dentro de un tab: neutros, el contador en mono */
.page-wrapper .nav-tabs .nav-link .ti,
.offcanvas .nav-tabs .nav-link .ti,
.page-wrapper .billing-section-nav .section-pill i,
.page-wrapper .ship-tab .ti {
    font-size: 0.95rem;
    color: var(--ui-fg-subtle);
    margin: 0 !important;
}
.page-wrapper .nav-tabs .nav-link.active .ti,
.offcanvas .nav-tabs .nav-link.active .ti,
.page-wrapper .billing-section-nav .section-pill.active i {
    color: var(--tblr-body-color);
}
.page-wrapper .nav-tabs .nav-link .badge,
.offcanvas .nav-tabs .nav-link .badge,
.page-wrapper .billing-section-nav .section-pill .badge,
.page-wrapper .billing-tab-count,
.page-wrapper .ship-tab .badge {
    font-family: var(--font-mono);
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    color: var(--tblr-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
    line-height: 1;
}
.page-wrapper .nav-tabs .nav-link.active .badge,
.page-wrapper .billing-section-nav .section-pill.active .badge,
.page-wrapper .ship-tab.is-active .badge {
    color: var(--tblr-body-color) !important;
}
/* Tabs dentro de un card-header o de una barra de página: alineadas al
   padding del contenedor, sin margen negativo de Tabler. */
.page-wrapper .card-header .nav-tabs {
    border-bottom: 0;
    margin: 0 -1rem -0.75rem !important;
    padding: 0 1rem;
}
.page-wrapper .billing-section-nav-wrap {
    padding: 0 1.25rem;
    border-bottom: 0;
}
/* Tabs verticales (wizards) mantienen su look de lista */
.page-wrapper .nav-tabs.flex-column {
    border-bottom: 0;
    gap: 2px;
}
.page-wrapper .nav-tabs.flex-column .nav-link {
    height: auto;
    padding: 0.5rem 0.75rem;
    border-bottom: 0;
    border-radius: var(--radius-sm);
}
.page-wrapper .nav-tabs.flex-column .nav-link.active {
    background: var(--tblr-bg-surface-secondary);
}

/* ── SEGMENTADOS ──────────────────────────────────────────────────── */
.page-wrapper .segmented,
.page-wrapper .btn-group.segmented,
.page-wrapper .an-period-toggle,
.page-wrapper .tms-tabs,
.page-wrapper .fleet-toggle,
.page-wrapper .routes-toggle,
.page-wrapper .view-toggles,
.page-wrapper .shipments-source-filter,
.page-wrapper .form-selectgroup,
.modal .segmented,
.modal .form-selectgroup,
.offcanvas .segmented,
.offcanvas .routes-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    height: var(--control-h);
    padding: 3px;
    margin: 0;
    background: var(--tblr-bg-surface-secondary);
    border: 1px solid var(--tblr-border-color);
    border-radius: 7px;
    box-sizing: border-box;
    vertical-align: middle;
}
.page-wrapper .segmented.is-stretch,
.page-wrapper .fleet-toggle,
.page-wrapper .tms-tabs {
    display: flex;
    width: 100%;
}
.page-wrapper .segmented > .seg-item,
.page-wrapper .segmented.btn-group > .btn,
.page-wrapper .an-period-toggle button,
.page-wrapper .tms-tab,
.page-wrapper .fleet-toggle button,
.page-wrapper .routes-toggle button,
.page-wrapper .view-toggles button,
.page-wrapper .shipments-source-filter .src-chip,
.page-wrapper .form-selectgroup .form-selectgroup-label,
.modal .segmented > .seg-item,
.modal .form-selectgroup .form-selectgroup-label,
.offcanvas .segmented > .seg-item,
.offcanvas .routes-toggle button {
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0.65rem !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tblr-secondary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.page-wrapper .form-selectgroup .form-selectgroup-item {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
}
.page-wrapper .form-selectgroup .form-selectgroup-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.page-wrapper .segmented > .seg-item:hover,
.page-wrapper .segmented.btn-group > .btn:hover,
.page-wrapper .an-period-toggle button:hover,
.page-wrapper .tms-tab:hover,
.page-wrapper .fleet-toggle button:hover,
.page-wrapper .routes-toggle button:hover,
.page-wrapper .view-toggles button:hover,
.page-wrapper .shipments-source-filter .src-chip:hover,
.page-wrapper .form-selectgroup .form-selectgroup-label:hover {
    color: var(--tblr-body-color) !important;
}
.page-wrapper .segmented > .seg-item.active,
.page-wrapper .segmented.btn-group > .btn.active,
.page-wrapper .an-period-toggle button.is-active,
.page-wrapper .tms-tab.active,
.page-wrapper .fleet-toggle button.is-active,
.page-wrapper .routes-toggle button.is-active,
.page-wrapper .view-toggles button.is-active,
.page-wrapper .shipments-source-filter .src-chip.active,
.page-wrapper .form-selectgroup .form-selectgroup-input:checked + .form-selectgroup-label,
.modal .segmented > .seg-item.active,
.modal .form-selectgroup .form-selectgroup-input:checked + .form-selectgroup-label,
.offcanvas .segmented > .seg-item.active,
.offcanvas .routes-toggle button.is-active {
    background: var(--tblr-bg-surface) !important;
    color: var(--tblr-body-color) !important;
    border-color: var(--tblr-border-color) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    font-weight: 500 !important;
}
/* Chips de marca: el color vive solo en el icono/texto del chip activo */
.page-wrapper .shipments-source-filter .src-chip.src-chip-meli.active {
    color: #b45309 !important;
}
.page-wrapper .shipments-source-filter .src-chip.src-chip-shopify.active {
    color: #15803d !important;
}
.page-wrapper .shipments-source-filter .src-chip.src-chip-uber.active {
    color: var(--tblr-body-color) !important;
}
.page-wrapper .shipments-source-filter .src-chip img,
.page-wrapper .shipments-source-filter .src-chip svg {
    width: 0.9rem;
    height: 0.9rem;
}
/* Iconos y contadores dentro de un segmento */
.page-wrapper .segmented .ti,
.page-wrapper .fleet-toggle .ti,
.page-wrapper .view-toggles .ti,
.page-wrapper .shipments-source-filter .ti {
    font-size: 0.95rem;
}
.page-wrapper .fleet-toggle-count,
.page-wrapper .segmented .badge,
.page-wrapper .segmented .count {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--tblr-secondary);
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
[data-bs-theme='dark'] .page-wrapper .segmented > .seg-item.active,
[data-bs-theme='dark'] .page-wrapper .an-period-toggle button.is-active,
[data-bs-theme='dark'] .page-wrapper .shipments-source-filter .src-chip.active,
[data-bs-theme='dark'] .page-wrapper .fleet-toggle button.is-active,
[data-bs-theme='dark'] .page-wrapper .tms-tab.active {
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-border-strong) !important;
}

/* ── CHECKBOXES / RADIOS ──────────────────────────────────────────── */
.form-check-input,
.dt-checkboxes {
    width: 16px !important;
    height: 16px !important;
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--ui-border-strong);
    background-color: var(--tblr-bg-surface);
    box-shadow: none;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.form-check-input[type='radio'] {
    border-radius: 50%;
}
.form-check-input:hover,
.dt-checkboxes:hover {
    border-color: var(--ui-fg-muted);
}
.form-check-input:focus-visible,
.dt-checkboxes:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-ring);
    border-color: var(--tblr-primary);
}
.form-check-input:checked,
.dt-checkboxes:checked,
.form-check-input:indeterminate {
    background-color: var(--ui-fg);
    border-color: var(--ui-fg);
}
[data-bs-theme='dark'] .form-check-input:checked,
[data-bs-theme='dark'] .dt-checkboxes:checked,
[data-bs-theme='dark'] .form-check-input:indeterminate {
    background-color: var(--ui-fg);
    border-color: var(--ui-fg);
    --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 0;
    padding-left: 0;
    margin-bottom: 0;
}
.form-check .form-check-input {
    float: none;
    margin: 0;
}
.form-check-label {
    font-size: var(--fs-body);
    cursor: pointer;
}
.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label {
    opacity: 0.45;
    cursor: default;
}
/* Columna de selección en tablas: 44px, centrada, sin padding extra */
.table td.dt-checkboxes-cell,
.table th.dt-checkboxes-select-all,
.table td.select-checkbox,
.table th.select-checkbox,
.table td:has(> .form-check-input:only-child),
.table th:has(> .form-check-input:only-child),
.table td:has(> .form-check:only-child),
.table th:has(> .form-check:only-child) {
    width: 44px !important;
    min-width: 44px;
    max-width: 44px;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.table td.dt-checkboxes-cell .form-check-input,
.table th.dt-checkboxes-select-all .form-check-input,
.table td .form-check-input:only-child,
.table th .form-check-input:only-child {
    display: inline-block;
    margin: 0 auto;
}
.table tbody tr:has(> td .form-check-input:checked) > * {
    background: var(--ui-accent-soft);
}

/* ── ALINEACIÓN EN TABLAS ─────────────────────────────────────────── */
.table th,
.table td {
    text-align: left;
}
.table .text-end,
.table th.dt-right,
.table td.dt-right,
.table td.dt-type-numeric,
.table th.dt-type-numeric,
.table td.num,
.table th.num,
.table td.money,
.table th.money {
    text-align: right !important;
}
.table .text-center {
    text-align: center !important;
}
.table td.dt-type-numeric,
.table td.num,
.table td.money,
.table td.col-id,
.table td.mono {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
}
/* Columna de acciones: siempre al final y a la derecha */
.table td:has(> .tbl-actions),
.table td:has(> .btn-table-action),
.table td.actions,
.table th.actions,
.table td:has(> .dropdown > .btn-icon:only-child) {
    text-align: right !important;
    white-space: nowrap;
}
.table td:has(> .tbl-actions) .tbl-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 0.25rem;
}
/* Celdas con avatar + texto o icono + texto: centradas verticalmente */
.table td > .d-flex:not(.flex-column) {
    align-items: center;
}
/* Celdas apiladas (nombre + subtítulo): alineadas a la izquierda, no centradas */
.table td > .d-flex.flex-column {
    align-items: stretch;
    text-align: left;
}
/* Truncado limpio en celdas largas */
.table td .text-truncate {
    display: block;
    max-width: 100%;
}
/* Badges en celdas. Muchas vistas usan `table-layout: fixed` y global.css
   recorta toda celda con "…": un badge más ancho que su columna quedaba
   mordido y con puntos pegados afuera. Ahora el badge nunca rebasa la
   celda (si no cabe, recorta su propio texto dentro de la píldora) y la
   celda no dibuja "…" junto a elementos. utils/table-fit.js ensancha la
   columna cuando otra columna de texto puede ceder espacio. */
.table td .badge {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.table td .badge > :is(.ti, img, svg, .status-dot, .brand-logo) {
    vertical-align: -0.125em;
}
.table td .badge > :is(.ti, img, svg, .status-dot, .brand-logo):not(:last-child) {
    margin-right: 0.3em;
}
.table td:has(> :is(.badge, .btn, .avatar, .form-check, img)) {
    text-overflow: clip;
}
/* Cabeceras: mismo tamaño y color sin importar si traen sort */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-right: 1.4rem;
}
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after {
    font-size: 0.65rem;
    right: 0.5rem;
    opacity: 0.35;
}
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:after {
    opacity: 0.9;
}

/* ────────────────────────────────────────────────────────────────────
   11f. CABECERAS DE LISTA Y FILTROS — una sola barra de herramientas
   Orden canónico (Supabase): buscador → botón de filtros → chips de
   modo → … → acciones/primario a la derecha. Aplica sólo a cabeceras
   legacy; las migradas usan `.ui-page-head`. Los filtros avanzados se despliegan debajo en una
   franja propia.
   ──────────────────────────────────────────────────────────────────── */
.page-wrapper [class*='container-'].border-bottom > .d-flex.align-items-center.justify-content-between {
    padding: 0.35rem 0;
}
/* El grupo de controles ocupa todo el ancho y ordena sus hijos */
.page-wrapper [class*='container-'].border-bottom > .d-flex.align-items-center.justify-content-between > .d-flex {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 0.5rem !important;
    min-width: 0;
}
.page-wrapper [class*='container-'].border-bottom .d-flex > .input-icon {
    order: -3;
    width: auto !important;
    flex: 0 1 22rem;
}
.page-wrapper [class*='container-'].border-bottom .d-flex > .input-icon .form-control {
    width: 100% !important;
}
.page-wrapper [class*='container-'].border-bottom .d-flex > [data-bs-target='#filterCollapse'],
.page-wrapper [class*='container-'].border-bottom .d-flex > [data-bs-target='#filterCollapseActions'] {
    order: -2;
}
.page-wrapper [class*='container-'].border-bottom .d-flex > .shipments-source-filter,
.page-wrapper [class*='container-'].border-bottom .d-flex > .segmented {
    order: -1;
}
.page-wrapper [class*='container-'].border-bottom .d-flex > .dropdown:has(> .dropdown-toggle),
.page-wrapper [class*='container-'].border-bottom .d-flex > .btn-primary,
.page-wrapper [class*='container-'].border-bottom .d-flex > .btn-dark,
.page-wrapper [class*='container-'].border-bottom .d-flex > a.btn {
    order: 10;
}
.page-wrapper [class*='container-'].border-bottom .d-flex > .dropdown:has(> .dropdown-toggle) {
    margin-left: auto;
}
/* Buscador: icono SIEMPRE a la izquierda */
.input-icon {
    position: relative;
}
.input-icon .input-icon-addon,
.input-icon .input-icon-addon:last-child {
    left: 0 !important;
    right: auto !important;
    top: 0;
    bottom: 0;
    transform: none;
    display: flex;
    align-items: center;
    padding: 0 0 0 0.7rem;
    color: var(--ui-fg-subtle);
    pointer-events: none;
    min-width: 0;
}
.input-icon .form-control,
.input-icon .form-control:not(:last-child) {
    padding-left: 2.1rem !important;
    padding-right: 0.7rem !important;
}
/* Botones con tinte "github" (Historial, filtros): neutros con borde */
.page-wrapper .btn.bg-github-lt,
.offcanvas .btn.bg-github-lt {
    background: var(--tblr-bg-surface) !important;
    border: 1px solid var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}
.page-wrapper .btn.bg-github-lt:hover,
.offcanvas .btn.bg-github-lt:hover {
    background: var(--tblr-bg-surface-secondary) !important;
}
/* Botón de filtros (icono solo): cuadrado; activo en acento suave */
.page-wrapper .btn[data-bs-target='#filterCollapse'] {
    width: var(--control-h);
    padding: 0 !important;
    justify-content: center;
    color: var(--tblr-secondary) !important;
}
.page-wrapper .btn[data-bs-target='#filterCollapse']:hover {
    color: var(--tblr-body-color) !important;
    background: var(--tblr-bg-surface-secondary) !important;
}
.page-wrapper .btn[data-bs-target='#filterCollapse'][aria-expanded='true'] {
    background: var(--ui-accent-soft) !important;
    border-color: transparent !important;
    color: var(--tblr-primary) !important;
}
/* Botones sin variante ("Acciones", "Opciones") → secundario */
.page-wrapper .btn.dropdown-toggle:not([class*='btn-']),
.page-wrapper .btn:not([class*='btn-']):not(.bg-github-lt):not(.dropdown-item):not(.nav-link) {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    color: var(--tblr-body-color);
}
.page-wrapper .btn.dropdown-toggle:not([class*='btn-']):hover,
.page-wrapper .btn:not([class*='btn-']):not(.bg-github-lt):not(.dropdown-item):not(.nav-link):hover {
    background: var(--tblr-bg-surface-secondary);
    border-color: var(--ui-border-strong);
}
/* Franja de filtros avanzados (#filterCollapse): labels mono, controles
   alineados abajo, fondo neutro, más aire */
.page-wrapper #filterCollapse,
.page-wrapper #filterCollapseActions {
    padding: 0.75rem 1.25rem !important;
    background: var(--tblr-bg-surface);
}
.page-wrapper #filterCollapse .form-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tblr-secondary);
    margin-bottom: 0.3rem;
}
.page-wrapper #filterCollapse .row {
    --tblr-gutter-x: 0.75rem;
}
.page-wrapper #filterCollapse .btn {
    height: var(--control-h);
}
/* Selección múltiple en tablas (contador + acciones) */
.page-wrapper #filterCollapseActions .text-muted {
    font-size: var(--fs-meta);
}
.page-wrapper #filterCollapseActions .btn.bg-warning-lt {
    background: var(--tblr-bg-surface) !important;
    border: 1px solid var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}
/* Selectores de fecha de Torre de Control: alineados a la izquierda con
   icono, como cualquier otro control */
.page-wrapper .flatpickr-input.text-end {
    text-align: left !important;
}

/* ────────────────────────────────────────────────────────────────────
   11g. OFFCANVAS — distribución tipo Plain
   Propiedades arriba (cliente, acciones ligeras), recolección y entrega
   lado a lado, pie con la acción principal compacta a la derecha.
   ──────────────────────────────────────────────────────────────────── */
/* Fila de propiedades del cliente */
.offcanvas .offcanvas-body > .row > .col-md-12:first-child > .d-flex .avatar {
    display: none;
}
.offcanvas .offcanvas-body > .row > .col-md-12:first-child > .d-flex .datagrid-content {
    font-size: var(--fs-body);
    font-weight: 500;
}
.offcanvas .offcanvas-body > .row > .col-md-12:first-child > .d-flex .btn {
    height: var(--control-h-sm);
    padding: 0 0.6rem;
    font-size: var(--fs-meta);
    background: var(--tblr-bg-surface) !important;
    border: 1px solid var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
    box-shadow: none;
}
.offcanvas .offcanvas-body > .row > .col-md-12:first-child > .d-flex .btn:hover {
    background: var(--tblr-bg-surface-secondary) !important;
}
/* La fila de propiedades puede envolver en paneles angostos */
.offcanvas .offcanvas-body > .row > .col-md-12:first-child > .d-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    min-width: 0;
}
/* Recolección y entrega en dos columnas cuando el PANEL (no la ventana)
   es ancho: container query sobre el offcanvas. */
.offcanvas.offcanvas-end {
    container-type: inline-size;
}
.offcanvas .timeline {
    margin: 0;
    padding: 0;
}
@container (min-width: 880px) {
    .offcanvas .timeline {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        padding: 0;
    }
    .offcanvas .timeline-event {
        padding: 0 !important;
        margin: 0;
    }
    .offcanvas .timeline-event::before,
    .offcanvas .timeline-event::after {
        display: none !important;
    }
    .offcanvas .timeline-event-icon {
        display: none;
    }
    .offcanvas .timeline-event-card {
        height: 100%;
        margin-left: 0;
    }
    .offcanvas .timeline-event:not(:last-child) {
        margin-bottom: 0;
    }
    /* El tipo de punto se marca con un punto de color antes de la etiqueta */
    .offcanvas .timeline-event-card .form-label::before {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-right: 0.45rem;
        vertical-align: 1px;
        background: var(--ui-accent);
    }
    .offcanvas .timeline-event:has(.timeline-event-icon.bg-success-lt) .timeline-event-card .form-label::before,
    .offcanvas .timeline-event:has(.timeline-event-icon.bg-green-lt) .timeline-event-card .form-label::before {
        background: var(--ui-success);
    }
}
.offcanvas .timeline-event-card .row.g-1 > [class*='col-'] > .d-flex {
    align-items: flex-start;
}
.offcanvas .timeline-event-card .row.g-1 .ti {
    margin-top: 0.2rem;
}
/* Pie: acción principal compacta a la derecha, opciones a la izquierda */
.offcanvas .offcanvas-footer {
    padding: 0.75rem 1.25rem !important;
    border-top: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}
.offcanvas .offcanvas-footer > .border-top {
    display: none;
}
.offcanvas .offcanvas-footer .btn {
    height: var(--control-h);
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 0.9rem;
    font-size: var(--fs-body);
}
.offcanvas .offcanvas-footer .btn.bg-success,
.offcanvas .offcanvas-footer .btn-success {
    background: var(--ui-fg) !important;
    border-color: var(--ui-fg) !important;
    color: var(--ui-surface) !important;
}
.offcanvas .offcanvas-footer .btn.bg-success:disabled,
.offcanvas .offcanvas-footer .btn-success:disabled {
    opacity: 0.45;
}
.offcanvas .offcanvas-footer .btn:not(.bg-success):not(.btn-success):not(.btn-primary) {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    color: var(--tblr-body-color);
}

/* ────────────────────────────────────────────────────────────────────
   11h. AVISOS, ALERTAS Y OVERLAYS — pares wash/ink
   ──────────────────────────────────────────────────────────────────── */
.alert {
    border: 1px solid transparent;
    color: var(--ui-fg);
    background: var(--tblr-bg-surface-secondary);
}
.alert .alert-title,
.alert strong {
    font-weight: 600;
}
.alert-success,
.alert.alert-success {
    background: var(--ui-wash-success);
    color: var(--ui-ink-success);
    border-color: color-mix(in srgb, var(--ui-ink-success) 25%, transparent);
}
.alert-warning,
.alert.alert-warning {
    background: var(--ui-wash-warning);
    color: var(--ui-ink-warning);
    border-color: color-mix(in srgb, var(--ui-ink-warning) 25%, transparent);
}
.alert-danger,
.alert.alert-danger,
.alert-important.alert-danger {
    background: var(--ui-wash-danger);
    color: var(--ui-ink-danger);
    border-color: color-mix(in srgb, var(--ui-ink-danger) 25%, transparent);
}
.alert-info,
.alert.alert-info,
.alert-primary {
    background: var(--ui-wash-info);
    color: var(--ui-ink-info);
    border-color: color-mix(in srgb, var(--ui-ink-info) 25%, transparent);
}
.alert .ti {
    color: inherit;
}
/* Aviso de solicitudes (Torre de Control) */
.page-wrapper .requested-alert {
    background: var(--ui-wash-warning) !important;
    color: var(--ui-ink-warning) !important;
    border-color: color-mix(in srgb, var(--ui-ink-warning) 30%, transparent) !important;
}
.page-wrapper .requested-alert-icon {
    background: color-mix(in srgb, var(--ui-ink-warning) 15%, transparent) !important;
    color: var(--ui-ink-warning) !important;
}
.page-wrapper .requested-alert-sub {
    color: var(--ui-ink-warning) !important;
    opacity: 0.8;
}
.page-wrapper .requested-alert-cta {
    background: var(--tblr-bg-surface) !important;
    color: var(--ui-fg) !important;
    border-color: var(--tblr-border-color) !important;
}
/* Discrepancias ML/Uber en el offcanvas */
#orderDataOffCanvas .auto-discrepancy {
    background: var(--ui-wash-warning);
    color: var(--ui-ink-warning);
    border: 1px solid color-mix(in srgb, var(--ui-ink-warning) 25%, transparent);
}
#orderDataOffCanvas .auto-discrepancy.is-danger {
    background: var(--ui-wash-danger);
    color: var(--ui-ink-danger);
    border-color: color-mix(in srgb, var(--ui-ink-danger) 25%, transparent);
}
/* Fila seleccionada / activa */
.table tbody tr.selected > *,
.table tbody tr.table-active > *,
.table tbody tr:has(> td .form-check-input:checked) > * {
    background: var(--ui-wash-info) !important;
}
/* Overlays */
.modal-backdrop,
.offcanvas-backdrop {
    background-color: var(--ui-overlay) !important;
}
.modal-backdrop.show,
.offcanvas-backdrop.show {
    opacity: 1;
}
/* Zona de peligro en modales de confirmación */
.modal .modal-status.bg-danger {
    background: var(--ui-ink-danger);
}
.modal .bg-danger-lt,
.modal .text-danger.bg-danger-lt {
    background: var(--ui-danger-bg) !important;
    color: var(--ui-ink-danger) !important;
}
/* Elementos decorativos usan `faint`; texto nunca */
.topbar-crumbs .crumb-sep,
.table thead th .dt-column-order,
.input-icon .input-icon-addon,
.empty-icon {
    color: var(--ui-fg-faint);
}

/* ────────────────────────────────────────────────────────────────────
   12. LEGACY — reglas heredadas del layout que otras vistas usan
   ──────────────────────────────────────────────────────────────────── */
.nav-link > * {
    position: relative;
    z-index: 1;
}
.navbar-expand-lg .nav-item.active:after {
    border-color: black !important;
}
.bottom-table .form-select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 1.6rem !important;
    padding-left: 0.6rem !important;
    border-radius: var(--radius-sm) !important;
}
#products-table > thead > tr > th {
    background-color: var(--tblr-bg-surface-secondary);
    font-size: var(--fs-meta);
}
.badge-button {
    background: none;
    color: var(--tblr-body-color);
    cursor: pointer;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
}
.badge-button:hover {
    background: var(--tblr-bg-surface-secondary);
}
.badge-button.active {
    background: var(--ui-accent-soft);
    color: var(--tblr-primary);
}
.dataTables_length {
    display: flex;
    align-items: center;
}
.delete-products:hover {
    background-color: color-mix(in srgb, var(--tblr-red) 12%, transparent);
}
.user-name-ellipsis {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0%;
}
.sys-notification {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tblr-border-color);
    background-color: var(--tblr-bg-surface);
    transition: background-color 0.15s ease;
}
.sys-notification:hover {
    background-color: var(--tblr-bg-surface-secondary);
}
.sys-notification .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
}
.sys-notification .notification-content {
    flex-grow: 1;
}
.sys-notification .notification-content div:first-child {
    color: var(--tblr-body-color);
    font-size: var(--fs-body);
}
.sys-notification .meta {
    font-size: var(--fs-meta);
    color: var(--tblr-secondary);
    margin-top: 2px;
}
.sys-notification .menu-dots {
    font-size: var(--fs-title);
    color: var(--tblr-secondary);
    cursor: pointer;
    margin-left: 12px;
}
[data-bs-toggle='dropdown'] .chevron {
    transition: transform 0.18s ease;
    transform-origin: center;
}
[data-bs-toggle='dropdown'][aria-expanded='true'] .chevron {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    [data-bs-toggle='dropdown'] .chevron {
        transition: none;
    }
}
.pac-container {
    background-color: var(--tblr-bg-surface);
    z-index: 9999;
    position: fixed;
    display: inline-block;
    border-radius: var(--radius-md);
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    font-family: var(--font-sans);
}
.footer {
    padding: 0.5em 0 !important;
    margin-top: auto;
}
.cursor-pointer {
    cursor: pointer;
}

/* ────────────────────────────────────────────────────────────────────
   13. HOMOLOGACIÓN GLOBAL — normaliza variantes heredadas de Tabler
   Cubre también el HTML que generan los scripts. Reglas:
     · Un solo botón de acción destacado: .btn-primary.
       Guardar / confirmar (.btn-success) se ve como primario.
     · Destructivo (.btn-danger) se conserva, pero sólo en modales/confirmaciones.
     · Cualquier otro color o tinte → secundario neutro.
     · Iconos en cuadritos de color → neutros.
   ──────────────────────────────────────────────────────────────────── */

/* Fondo del botón secundario: igual que .btn-outline-secondary en cada tema */
:root {
    --ui-btn-2-bg: var(--tblr-bg-surface);
}
[data-bs-theme='dark'] {
    --ui-btn-2-bg: var(--ui-surface-2);
}

/* Confirmar = primario (mismos tokens que .btn-primary, §15) */
html .btn.btn-success,
html .btn.btn-green {
    background-color: var(--ui-fg) !important;
    border-color: var(--ui-fg) !important;
    color: var(--ui-surface) !important;
}
html .btn.btn-success:hover,
html .btn.btn-green:hover {
    background-color: color-mix(in srgb, var(--ui-fg) 85%, var(--ui-surface)) !important;
    border-color: color-mix(in srgb, var(--ui-fg) 85%, var(--ui-surface)) !important;
    color: var(--ui-surface) !important;
}

/* Colores y tintes decorativos → secundario */
html .btn.btn-warning,
html .btn.btn-info,
.btn.btn-purple,
.btn.btn-orange,
.btn.btn-cyan,
.btn.btn-teal,
.btn.btn-azure,
.btn.btn-indigo,
.btn.btn-pink,
.btn.btn-lime,
.btn.btn-yellow,
.btn.btn-blue,
.btn.btn-outline-primary,
.btn.btn-outline-success,
.btn.btn-outline-info,
.btn.btn-outline-warning,
.btn.btn-outline-azure,
.btn.btn-outline-purple,
.btn.btn-outline-dark,
.btn[class*='bg-'][class*='-lt']:not([class*='bg-danger-lt']):not([class*='bg-red-lt']) {
    background: var(--ui-btn-2-bg) !important;
    border: 1px solid var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}
html .btn.btn-warning:hover,
html .btn.btn-info:hover,
.btn.btn-purple:hover,
.btn.btn-orange:hover,
.btn.btn-cyan:hover,
.btn.btn-teal:hover,
.btn.btn-azure:hover,
.btn.btn-indigo:hover,
.btn.btn-pink:hover,
.btn.btn-lime:hover,
.btn.btn-yellow:hover,
.btn.btn-blue:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-success:hover,
.btn.btn-outline-info:hover,
.btn.btn-outline-warning:hover,
.btn.btn-outline-azure:hover,
.btn.btn-outline-purple:hover,
.btn.btn-outline-dark:hover,
.btn[class*='bg-'][class*='-lt']:not([class*='bg-danger-lt']):not([class*='bg-red-lt']):hover {
    background: var(--tblr-bg-surface-secondary) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--tblr-body-color) !important;
}
.btn[class*='bg-'][class*='-lt'] > .ti,
.btn.btn-outline-primary > .ti {
    color: inherit !important;
}

/* Destructivo secundario: texto rojo sobre superficie neutra */
.btn.btn-outline-danger,
.btn.bg-danger-lt,
.btn.bg-red-lt {
    background: var(--ui-btn-2-bg) !important;
    border: 1px solid var(--tblr-border-color) !important;
    color: var(--ui-tag-red-fg) !important;
}
.btn.btn-outline-danger:hover,
.btn.bg-danger-lt:hover,
.btn.bg-red-lt:hover {
    background: var(--ui-tag-red-bg) !important;
    border-color: transparent !important;
}
.btn.btn-danger {
    background: var(--ui-tag-red-fg);
    border-color: var(--ui-tag-red-fg);
    color: #fff;
}

/* Iconos dentro de botones: siempre al tamaño del texto */
.btn > .ti,
.btn > .ti-sm,
.btn > .ti-xs,
.btn > .ti-md {
    font-size: 1.15em;
}
.btn {
    gap: 0.35rem;
}
.btn > .ti {
    margin: 0 !important;
}

/* Cuadritos de icono con color → neutros */
.avatar[class*='bg-'][class*='-lt'] {
    background: var(--ui-surface-2) !important;
    color: var(--ui-fg-muted) !important;
    border: 1px solid var(--ui-border);
    box-shadow: none;
}
.avatar[class*='bg-'][class*='-lt'] > .ti,
.avatar[class*='bg-'][class*='-lt'] > .icon {
    color: inherit !important;
}

/* Iconos con color decorativo → apagados (el texto con color de estado se respeta) */
.ti.text-azure,
.ti.text-purple,
.ti.text-cyan,
.ti.text-teal,
.ti.text-indigo,
.ti.text-pink,
.ti.text-lime,
.ti.text-orange,
.ti.text-blue,
.ti.text-primary {
    color: var(--ui-fg-muted) !important;
}

/* Inputs y selects: un solo radio y altura */
.form-control,
.form-select,
.input-group-text,
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.page-wrapper .ts-wrapper .ts-control {
    border-radius: var(--radius-sm) !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .btn:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .btn:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
select:not(.form-select):not([multiple]):not(.tomselected):not(.ts-hidden-accessible):not([hidden]) {
    height: var(--control-h);
    padding: 0 var(--sp-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    background-color: var(--ui-surface);
    color: var(--ui-fg);
    font-size: var(--fs-body);
}

/* Badges: sin cápsula redonda */
.badge:not(:empty)[class*='rounded'],
.badge:not(:empty).badge-pill {
    border-radius: var(--radius-sm) !important;
}

/* Tablas: sin rayado ni rejilla completa */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --tblr-table-accent-bg: transparent;
    --bs-table-accent-bg: transparent;
    background-image: none;
}
.table-bordered > :not(caption) > * > * {
    border-left-width: 0;
    border-right-width: 0;
}
.table-bordered > :not(caption) > * {
    border-width: 0;
}

/* Tabs de tarjeta: mismas que las subrayadas */
.nav-tabs.card-header-tabs {
    margin: 0;
    border-bottom: 1px solid var(--ui-border);
}

/* Encabezados dentro de contenido */
.page-wrapper .card-title,
.page-wrapper .modal-title,
.page-wrapper .offcanvas-title {
    font-size: var(--fs-title);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Interruptores */
.form-switch .form-check-input {
    width: 2rem;
    height: 1.125rem;
    border-radius: 999px;
}

/* ────────────────────────────────────────────────────────────────────
   14. UTILIDADES — reemplazo de estilos inline (style="…")
   Usar en vistas y en HTML generado por scripts. No crear variantes
   por vista si alguna de estas sirve.
   ──────────────────────────────────────────────────────────────────── */
/* Tipografía */
.fs-display { font-size: var(--fs-display) !important; }
.fs-title { font-size: var(--fs-title) !important; }
.fs-subtitle { font-size: var(--fs-subtitle) !important; }
.fs-body { font-size: var(--fs-body) !important; }
.fs-meta { font-size: var(--fs-meta) !important; }
.fs-micro { font-size: var(--fs-micro) !important; }
.text-mono { font-family: var(--font-mono) !important; }
.text-num { font-variant-numeric: tabular-nums; }
.fw-medium { font-weight: 500 !important; }

/* Color de texto y superficies (tokens) */
.text-fg { color: var(--ui-fg) !important; }
.text-fg-2 { color: var(--ui-fg-2) !important; }
.text-fg-muted { color: var(--ui-fg-muted) !important; }
.text-fg-subtle { color: var(--ui-fg-subtle) !important; }
.bg-surface { background-color: var(--ui-surface) !important; }
.bg-surface-2 { background-color: var(--ui-surface-2) !important; }
.bg-canvas { background-color: var(--ui-bg) !important; }
.border-ui { border: 1px solid var(--ui-border) !important; }

/* Estado de tono (texto + fondo) para chips/avisos generados */
.tone-ok { background: var(--ui-tag-green-bg) !important; color: var(--ui-tag-green-fg) !important; }
.tone-info { background: var(--ui-tag-blue-bg) !important; color: var(--ui-tag-blue-fg) !important; }
.tone-warn { background: var(--ui-tag-orange-bg) !important; color: var(--ui-tag-orange-fg) !important; }
.tone-bad { background: var(--ui-tag-red-bg) !important; color: var(--ui-tag-red-fg) !important; }
.tone-accent { background: var(--ui-tag-purple-bg) !important; color: var(--ui-tag-purple-fg) !important; }
.tone-neutral { background: var(--ui-surface-2) !important; color: var(--ui-fg-2) !important; }

/* Tono sólo en el texto (montos, fechas de vencimiento, deltas) */
.ink-ok { color: var(--ui-ink-success) !important; }
.ink-info { color: var(--ui-ink-info) !important; }
.ink-warn { color: var(--ui-ink-warning) !important; }
.ink-bad { color: var(--ui-ink-danger) !important; }
.ink-muted { color: var(--ui-fg-muted) !important; }

/* Estado en tablas sin cápsula: punto de color + texto.
   `<span class="ui-state is-ok">Vigente</span>` · is-ok/info/warn/bad/neutral.
   El texto sólo toma color cuando pide atención (warn/bad). */
.ui-state {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    font-size: var(--fs-meta);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ui-fg-2);
    white-space: nowrap;
}
.ui-state::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-fg-faint);
}
.ui-state.is-ok::before { background: var(--ui-success); }
.ui-state.is-info::before { background: var(--ui-info); }
.ui-state.is-warn::before { background: var(--ui-warning); }
.ui-state.is-bad::before { background: var(--ui-danger); }
.ui-state.is-warn { color: var(--ui-ink-warning); }
.ui-state.is-bad { color: var(--ui-ink-danger); }
.ui-state.is-neutral { color: var(--ui-fg-muted); }

/* Layout */
.min-h-0 { min-height: 0 !important; }
.min-w-0 { min-width: 0 !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.h-viewport { height: calc(100dvh - var(--topbar-h, 3rem)) !important; }
.h-control { height: var(--control-h) !important; }
.nowrap { white-space: nowrap !important; }
.object-contain { object-fit: contain !important; }
.w-control-sm { width: 6rem !important; }
.w-control-md { width: 10rem !important; }
.w-control-lg { width: 15rem !important; }
.w-search { width: 240px !important; }
.chart-h-sm { min-height: 150px !important; }
.chart-h-md { min-height: 280px !important; }
.chart-h-lg { min-height: 300px !important; }
.pad-chip { padding: 0.1em 0.35em !important; }

/* ══════════════════════════════════════════════════════════════════════
   15. PRIMITIVOS QUE CUBRÍA shadcn-overrides.css (retirado)
   Botón primario neutro, inputs/TomSelect de una sola caja, pesos.
   ══════════════════════════════════════════════════════════════════════ */

/* §0 Tokens · velo para texto sobre fotos/mapas (igual en ambos temas) */
:root {
    --ui-scrim: rgba(15, 23, 42, 0.78);
    --ui-on-scrim: #ffffff;
}

/* §10 Botón primario neutro. ui-system pinta .btn-primary con el acento
   azul, pero §13 hace que .btn-success se vea "como el primario" en
   negro/blanco (los valores que traía shadcn-overrides). Sin esto el
   sistema tendría dos CTA de colores distintos. */
.btn.btn-primary,
.btn.btn-github {
    background-color: var(--ui-fg) !important;
    border-color: var(--ui-fg) !important;
    color: var(--ui-surface) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-github:hover,
.btn.btn-github:focus {
    background-color: color-mix(in srgb, var(--ui-fg) 85%, var(--ui-surface)) !important;
    border-color: color-mix(in srgb, var(--ui-fg) 85%, var(--ui-surface)) !important;
    color: var(--ui-surface) !important;
}

/* §13 Destructivo sólido en oscuro: --ui-tag-red-fg es un rosa claro y el
   texto blanco no se lee sobre él. */
[data-bs-theme='dark'] .btn.btn-danger {
    color: var(--ui-bg);
}

/* §10 Enlace-botón ("Cancelar" en modales): texto apagado, sin caja */
.btn.btn-link {
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--ui-fg-muted);
    text-decoration: none;
    text-underline-offset: 4px;
}
.btn.btn-link:hover {
    color: var(--ui-fg);
}

/* §1 Peso: jerarquía por tamaño, no por peso (250+ usos de .fw-bold) */
.fw-bold,
b,
strong {
    font-weight: 600 !important;
}

/* §10 Inputs y selects: global.css fuerza `padding: .25rem .75rem
   !important` en .form-control/.form-select, que gana al padding de
   ui-system (sin !important). Con alto fijo (--control-h) y line-height
   de ~30px, el texto queda desplazado hacia abajo. shadcn-overrides lo
   neutralizaba; aquí se conserva sólo el padding vertical en 0 y el hueco
   del caret del select. Textareas quedan fuera. */
.form-control:not(textarea),
.form-select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.form-select:not([multiple]):not([size]) {
    padding-right: 2rem !important;
}

/* §10 TomSelect: el wrapper hereda .form-select (borde, alto, caret) y
   dibuja una segunda caja alrededor de .ts-control. El wrapper queda
   invisible y .ts-control es la única caja. */
.ts-wrapper.form-select,
.ts-wrapper.form-control,
.ts-wrapper.single,
.ts-wrapper.multi {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent none !important;
    box-shadow: none !important;
}
.ts-wrapper .ts-control,
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select.single.input-active .ts-control,
.ts-wrapper.form-control.single.input-active .ts-control {
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-fg);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    overflow: hidden;
    flex-wrap: nowrap;
}
/* Tabler vendors fuerza fondo transparente con !important (0,4,0) */
.ts-wrapper .ts-control,
.ts-wrapper.form-select:not(.disabled) .ts-control,
.ts-wrapper.form-control:not(.disabled) .ts-control {
    background-color: var(--ui-surface) !important;
}
[data-bs-theme='dark'] .ts-wrapper .ts-control,
[data-bs-theme='dark'] .ts-wrapper.form-select:not(.disabled) .ts-control,
[data-bs-theme='dark'] .ts-wrapper.form-control:not(.disabled) .ts-control {
    background-color: var(--ui-bg) !important;
}
.ts-wrapper .ts-control:hover {
    border-color: var(--ui-border-strong) !important;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--ui-accent) !important;
}
.ts-wrapper.multi .ts-control {
    flex-wrap: wrap;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}
.ts-wrapper .ts-control input {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: var(--fs-body) !important;
    line-height: 1 !important;
    color: inherit;
}
.form-select-sm.ts-wrapper .ts-control,
.input-group-sm > .ts-wrapper .ts-control {
    height: var(--control-h-sm);
    min-height: var(--control-h-sm);
}

/* §6 Panel de notificaciones (views/layouts/main.ejs): cuerpo con scroll */
#system-notifications .notif-body {
    max-height: 500px;
    overflow-y: auto;
}

/* ────────────────────────────────────────────────────────────────────
   16. PIE DE TABLA — patrón canónico `.ui-table-foot`
   Lo inserta public/scripts/utils/table-foot.js en toda DataTable y lo
   usan también las tablas propias (facturación, etc.):
     <div class="ui-table-foot">
       <div class="ui-table-foot__info">1–20 de 739</div>
       <div class="ui-table-foot__side">
         [select de filas]  <div class="ui-table-foot__pager">
           <span class="ui-table-foot__page">Página 1 de 37</span> ‹ ›
     </div></div></div>
   ──────────────────────────────────────────────────────────────────── */
.ui-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
    font-variant-numeric: tabular-nums;
}
.ui-table-foot__info {
    min-width: 0;
    white-space: nowrap;
}
.ui-table-foot__side,
.ui-table-foot__pager {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.ui-table-foot__page {
    margin-right: var(--sp-1);
    white-space: nowrap;
}
.ui-table-foot .dataTables_length,
.ui-table-foot .dataTables_length label {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
}
.ui-table-foot .dataTables_length select {
    width: auto;
    min-width: 4.5rem;
    height: var(--control-h-sm);
    min-height: var(--control-h-sm);
    font-size: var(--fs-meta);
}
.ui-table-foot .btn.btn-icon:disabled {
    opacity: 0.4;
}
/* Controles nativos sustituidos por el pie */
.dataTables_wrapper.has-ui-foot .ui-table-foot-src,
.dataTables_wrapper.has-ui-foot > .dataTables_info,
.dataTables_wrapper.has-ui-foot > .dataTables_paginate {
    display: none !important;
}
.dataTables_wrapper.has-ui-foot .dataTables_scroll {
    margin-bottom: 0 !important;
}
/* Conteos y paginación en sans (antes mono) */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
    font-family: var(--font-sans);
}
@media (max-width: 576px) {
    .ui-table-foot__page {
        display: none;
    }
}

/* Tabla como contenido principal de una lista: pegada al encabezado y a
   los bordes (`#table_view` bajo `.ui-page-head`). Sin padding ni margen;
   el aire lo dan las celdas. */
.page-wrapper #table_view {
    padding: 0 !important;
    margin: 0 !important;
}
.page-wrapper #table_view > .dataTables_wrapper,
.page-wrapper #table_view > .table-view-inner > .dataTables_wrapper {
    margin: 0;
    padding: 0;
}

/* ────────────────────────────────────────────────────────────────────
   17. BARRA DE FILTROS POR CHIPS — `.fbar` (public/scripts/utils/filter-bar.js)
   Una fila bajo `.ui-page-head`: chips editables + "+ Filtro" + Limpiar.
   Cada chip abre un popover `.fbar-pop` con el control del filtro.
   ──────────────────────────────────────────────────────────────────── */
.fbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.fbar[hidden] {
    display: none !important;
}
.fbar-chips {
    display: contents;
}
.fbar-spacer {
    flex: 1 1 auto;
}
.fbar-chip {
    display: inline-flex;
    align-items: stretch;
    height: 28px;
    max-width: 360px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-sm);
    background: var(--ui-surface-2);
    overflow: hidden;
}
.fbar-chip.is-default,
.fbar-chip.is-pending {
    border-style: dashed;
    background: transparent;
}
.fbar-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0 var(--sp-2);
    border: 0;
    background: none;
    color: var(--ui-fg);
    font-size: var(--fs-meta);
    white-space: nowrap;
}
.fbar-chip-main:hover {
    background: var(--ui-surface-3);
}
.fbar-chip-main > .ti {
    color: var(--ui-fg-muted);
    font-size: 1.05em;
}
.fbar-chip-label {
    color: var(--ui-fg-muted);
}
.fbar-chip-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.fbar-chip-caret {
    font-size: 0.9em !important;
    opacity: 0.6;
}
.fbar-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--ui-border);
    background: none;
    color: var(--ui-fg-muted);
}
.fbar-chip-x:hover {
    background: var(--ui-surface-3);
    color: var(--ui-fg);
}
.fbar-add {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 28px;
    padding: 0 var(--sp-2);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ui-fg-muted);
    font-size: var(--fs-meta);
}
.fbar-add:hover {
    border-style: solid;
    color: var(--ui-fg);
    background: var(--ui-surface-2);
}
.fbar-add[hidden] {
    display: none;
}
.fbar-clear {
    border: 0;
    background: none;
    padding: 0 var(--sp-1);
    color: var(--ui-fg-muted);
    font-size: var(--fs-meta);
}
.fbar-clear:hover {
    color: var(--ui-fg);
}
.fbar-clear[hidden] {
    display: none;
}

/* Botón del encabezado que muestra/oculta la barra */
.btn.fbar-toggle.is-on {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border-strong) !important;
}
.fbar-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    background: var(--ui-fg);
    color: var(--ui-surface);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    line-height: 18px;
    text-align: center;
}
.fbar-count[hidden] {
    display: none;
}

/* Popover */
.fbar-pop {
    position: fixed;
    z-index: 1085;
    width: 300px;
    max-height: min(70vh, 520px);
    overflow: visible;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-md);
    background: var(--ui-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    animation: fbar-in 0.12s ease-out;
}
.fbar-pop.is-menu {
    width: 220px;
    padding-bottom: var(--sp-1);
}
@keyframes fbar-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}
.fbar-pop-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-fg-muted);
}
.fbar-pop-body {
    padding: var(--sp-3);
    min-height: 0;
}
.fbar-pop-body .ts-wrapper {
    width: 100%;
}
.fbar-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    height: 32px;
    padding: 0 var(--sp-3);
    border: 0;
    background: none;
    color: var(--ui-fg);
    font-size: var(--fs-body);
    text-align: left;
}
.fbar-menu-item:hover,
.fbar-menu-item:focus-visible {
    background: var(--ui-surface-2);
    outline: none;
}
.fbar-menu-item > .ti {
    color: var(--ui-fg-muted);
}
.fbar-quick {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.fbar-quick button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ui-fg-muted);
    font-size: var(--fs-meta);
}
.fbar-quick button:hover {
    color: var(--ui-fg);
}
.fbar-list {
    display: flex;
    flex-direction: column;
    margin: 0 calc(var(--sp-3) * -1);
    max-height: 320px;
    overflow-y: auto;
}
.fbar-check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding: 0.35rem var(--sp-3);
    font-size: var(--fs-body);
    cursor: pointer;
}
.fbar-check:hover {
    background: var(--ui-surface-2);
}
.fbar-check .form-check-input {
    margin: 0;
}
.fbar-pop:has(.fbar-cal) {
    width: auto;
}
.fbar-pop-body:has(.fbar-cal) {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2);
}
.fbar-presets {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding-right: var(--sp-2);
    border-right: 1px solid var(--ui-border);
}
.fbar-presets .fbar-menu-item {
    height: 30px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-meta);
}
.fbar-cal .flatpickr-calendar.inline {
    box-shadow: none;
    border: 0;
    background: transparent;
}
.fbar-cal > input {
    display: none !important;
}

/* ────────────────────────────────────────────────────────────────────
   18. FICHA DE ENVÍO — `.offcanvas.sheet` (public/scripts/utils/shipment-sheet.js)
   Encabezado con guía grande + acciones a tamaño normal, franja de ruta
   origen → destino, hechos clave y paradas con acciones (copiar, llamar,
   WhatsApp, mapa).
   ──────────────────────────────────────────────────────────────────── */
.offcanvas.sheet {
    --sheet-pad: var(--sp-6);
    width: min(720px, 100vw) !important;
}
.offcanvas.sheet .offcanvas-header {
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sheet-pad) var(--sp-4) !important;
    border-bottom: 0;
}
.offcanvas.sheet .offcanvas-header > .d-flex {
    align-items: flex-start !important;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.offcanvas.sheet .offcanvas-header > .d-flex > .d-flex:first-child {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--sp-1) !important;
    min-width: 0;
}
.offcanvas.sheet .offcanvas-header > .d-flex > .d-flex:first-child > .d-flex {
    gap: var(--sp-2) !important;
    min-width: 0;
}
.offcanvas.sheet .offcanvas-header .ti-grid-pattern {
    display: none;
}
.sheet-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ui-fg-subtle);
}
.offcanvas.sheet .offcanvas-header h4.sheet-title,
.offcanvas.sheet .offcanvas-header .sheet-title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ui-fg);
    word-break: break-all;
}
.offcanvas.sheet .offcanvas-header .btn {
    height: var(--control-h);
    padding: 0 0.85rem;
    font-size: var(--fs-body);
}
.offcanvas.sheet .offcanvas-header .btn:disabled {
    opacity: 0.45;
}
.offcanvas.sheet .offcanvas-header .btn-close {
    width: var(--control-h);
    height: var(--control-h);
    flex-shrink: 0;
}
.offcanvas.sheet .offcanvas-header .badge {
    font-size: var(--fs-meta);
    padding: 0.3em 0.6em;
}
/* El bloque "Cliente MobiiClub" del offcanvas local se sustituye por los hechos */
.offcanvas.sheet .offcanvas-body > .row > .col-md-12:first-child > .d-flex {
    padding: var(--sp-2) var(--sheet-pad);
    border-bottom: 0;
}
.offcanvas.sheet .offcanvas-body > .row > .col-md-12:first-child .avatar,
.offcanvas.sheet .offcanvas-body > .row > .col-md-12:first-child .datagrid-title,
.offcanvas.sheet .offcanvas-body > .row > .col-md-12:first-child #mobiiclub_cliente {
    display: none;
}
.offcanvas.sheet .nav-tabs.card-header-tabs {
    padding: 0 var(--sheet-pad);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--ui-surface);
}
.offcanvas.sheet .nav-tabs .nav-link {
    padding: 0.8rem 0.25rem;
    margin-right: var(--sp-4);
}
.offcanvas.sheet .tab-content {
    padding: var(--sp-5) var(--sheet-pad) var(--sp-8, 2.5rem) !important;
}

/* Botón de acción cuadrado */
.sheet-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ui-fg-muted);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sheet-act:hover {
    background: var(--ui-surface-2);
    border-color: var(--ui-border);
    color: var(--ui-fg);
}
.sheet-act.is-done {
    color: var(--ui-tag-green-fg);
}
.sheet-title .sheet-act {
    font-size: 1rem;
    opacity: 0.55;
}
.sheet-title:hover .sheet-act {
    opacity: 1;
}

/* Franja de ruta + hechos */
.sheet-hero {
    margin: 0 var(--sheet-pad) var(--sp-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    background: var(--ui-surface);
    overflow: hidden;
}
.sheet-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--ui-surface-2);
}
.sheet-place {
    min-width: 0;
}
.sheet-place.is-end {
    text-align: right;
}
.sheet-place-city {
    margin-top: 2px;
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ui-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sheet-place-city span {
    margin-left: 0.4rem;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ui-fg-muted);
    letter-spacing: 0;
}
.sheet-place-sub {
    margin-top: 2px;
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sheet-route-line {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
}
.sheet-route-track {
    flex: 1 1 auto;
    height: 0;
    border-top: 2px dashed var(--ui-border-strong);
}
.sheet-route-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--ui-fg-muted);
    background: var(--ui-surface-2);
    flex-shrink: 0;
}
.sheet-route-dot.is-end {
    border-color: var(--ui-fg);
    background: var(--ui-fg);
}
.sheet-route-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px var(--sp-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    background: var(--ui-surface);
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--ui-fg-2);
    white-space: nowrap;
}
.sheet-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    margin: 0;
    border-top: 1px solid var(--ui-border);
}
.sheet-facts > div {
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border-right: 1px solid var(--ui-border);
}
.sheet-facts > div:last-child {
    border-right: 0;
}
.sheet-facts dt {
    margin-bottom: 2px;
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--ui-fg-subtle);
}
.sheet-facts dd {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.35;
    color: var(--ui-fg);
    overflow-wrap: anywhere;
}
.sheet-carrier {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
.sheet-carrier img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.sheet-carrier em {
    font-style: normal;
    color: var(--ui-fg-muted);
    text-transform: capitalize;
}
.sheet-money {
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sheet-link {
    color: var(--ui-fg);
    text-decoration: none;
}
.sheet-link:hover {
    color: var(--ui-accent);
}
.sheet-link .ti {
    margin-left: 2px;
    font-size: 0.85em;
    color: var(--ui-fg-muted);
}

/* Paradas */
.sheet-stops {
    display: flex;
    flex-direction: column;
}
.sheet-stop {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--sp-3);
    position: relative;
}
.sheet-stop + .sheet-stop {
    margin-top: var(--sp-2);
}
.sheet-stop-marker {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}
.sheet-stop-marker span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ui-fg-muted);
    background: var(--ui-surface);
    z-index: 1;
}
.sheet-stop.is-dropoff .sheet-stop-marker span {
    border-color: var(--ui-fg);
    background: var(--ui-fg);
}
.sheet-stop.is-pickup .sheet-stop-marker::after {
    content: '';
    position: absolute;
    top: 18px;
    bottom: calc(var(--sp-2) * -1 - 4px);
    left: 50%;
    width: 0;
    border-left: 2px dashed var(--ui-border-strong);
    transform: translateX(-1px);
}
.sheet-stop-body {
    min-width: 0;
    padding-bottom: var(--sp-4);
}
.sheet-stop.is-pickup .sheet-stop-body {
    border-bottom: 1px solid var(--ui-border);
}
.sheet-stop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.sheet-stop-date {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
    white-space: nowrap;
}
.sheet-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2);
    min-height: 32px;
    margin: 0 calc(var(--sp-2) * -1);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
}
.sheet-row:hover {
    background: var(--ui-surface-2);
}
.sheet-row-icon {
    color: var(--ui-fg-subtle);
    text-align: center;
}
.sheet-row-value {
    min-width: 0;
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--ui-fg);
    overflow-wrap: anywhere;
}
.sheet-row-actions {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.sheet-row:hover .sheet-row-actions,
.sheet-row:focus-within .sheet-row-actions {
    opacity: 1;
}
@media (hover: none) {
    .sheet-row-actions {
        opacity: 1;
    }
}
@media (max-width: 576px) {
    .offcanvas.sheet {
        --sheet-pad: var(--sp-4);
    }
    .sheet-route {
        grid-template-columns: 1fr;
    }
    .sheet-place.is-end {
        text-align: left;
    }
    .sheet-route-line {
        display: none;
    }
}
/* Paneles de pestaña de la ficha */
.sheet-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sheet-panel + .sheet-panel {
    margin-top: var(--sp-4);
}
.sheet-panel-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--ui-surface-2);
}
.sheet-panel-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.sheet-panel-title {
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--ui-fg);
}
.sheet-panel-sub {
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
    text-transform: capitalize;
}
.sheet-facts.is-panel {
    border-top: 1px solid var(--ui-border);
}
.sheet-panel > .sheet-facts.is-panel:first-child {
    border-top: 0;
}
.sheet-alert {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-wash-warning);
    color: var(--ui-ink-warning);
}
.sheet-alert strong {
    display: block;
    font-weight: 600;
}
.sheet-alert span {
    font-size: var(--fs-meta);
}
.sheet-table-wrap {
    border-top: 1px solid var(--ui-border);
    overflow-x: auto;
}
.sheet-table th:first-child,
.sheet-table td:first-child {
    padding-left: var(--sp-5);
    width: 44px;
}
.sheet-table th:last-child,
.sheet-table td:last-child {
    padding-right: var(--sp-5);
}
.fbar-menu-item .ti-point {
    opacity: 0;
}
.fbar-menu-item.is-selected {
    font-weight: 500;
}
.fbar-pop-body > .fbar-list:only-child {
    margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1);
    padding: var(--sp-1) 0;
}

/* ────────────────────────────────────────────────────────────────────
   19. BÚSQUEDA GLOBAL — paleta ⌘K `.cmdk` (public/scripts/command-palette/)
   Disparador en la barra superior + diálogo centrado estilo Linear:
     <div class="cmdk">                       overlay
       <div class="cmdk-panel" role="dialog">
         .cmdk-head     crumb de cliente · input · spinner · esc
         .cmdk-scopes   segmentado de alcance + "Solo en curso"
         .cmdk-list     grupos (.cmdk-group-label) y filas (.cmdk-item)
         .cmdk-foot     atajos de teclado
   Filas planas a todo el ancho; la activa sólo cambia el fondo.
   ──────────────────────────────────────────────────────────────────── */
.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    width: 260px;
    height: 30px;
    padding: 0 var(--sp-1) 0 var(--sp-3);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-surface-2);
    color: var(--ui-fg-subtle);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 0.12s,
        color 0.12s;
}
.cmdk-trigger:hover {
    border-color: var(--ui-border-strong);
    color: var(--ui-fg-muted);
}
.cmdk-trigger:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ui-ring);
}
.cmdk-trigger > .ti {
    font-size: 1rem;
}
/* Alto de línea propio: con `line-height: 1` + overflow se recortan los
   descendentes (g, comas). */
.cmdk-trigger-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    line-height: 20px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmdk-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface);
    color: var(--ui-fg-subtle);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .cmdk-trigger {
        width: 30px;
        padding: 0;
        justify-content: center;
        border-color: transparent;
        background: transparent;
    }
    .cmdk-trigger-label,
    .cmdk-trigger .cmdk-kbd {
        display: none;
    }
}

/* Overlay y panel */
.cmdk {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh var(--sp-3) var(--sp-3);
    background: rgba(10, 10, 10, 0.32);
    animation: cmdk-fade 0.12s ease-out;
}
[data-bs-theme='dark'] .cmdk {
    background: rgba(0, 0, 0, 0.6);
}
.cmdk[hidden] {
    display: none !important;
}
.cmdk-panel {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(76vh, 640px);
    overflow: hidden;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-lg);
    background: var(--ui-surface);
    color: var(--ui-fg);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 24px 64px rgba(0, 0, 0, 0.22);
    animation: cmdk-rise 0.14s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes cmdk-fade {
    from {
        opacity: 0;
    }
}
@keyframes cmdk-rise {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.99);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cmdk,
    .cmdk-panel {
        animation: none;
    }
}
@media (max-width: 576px) {
    .cmdk {
        padding: 0;
    }
    .cmdk-panel {
        width: 100%;
        max-height: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }
}

/* Cabecera: input grande sin caja */
.cmdk-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 54px;
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--ui-border);
}
.cmdk-head > .ti-search {
    flex-shrink: 0;
    color: var(--ui-fg-subtle);
    font-size: 1.15rem;
}
.cmdk-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ui-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-title);
    letter-spacing: -0.01em;
}
.cmdk-input::placeholder {
    color: var(--ui-fg-subtle);
}
.cmdk-input::-webkit-search-cancel-button {
    display: none;
}
.cmdk-crumb {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 45%;
    height: 24px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    background: var(--ui-surface-2);
    color: var(--ui-fg-2);
    font-size: var(--fs-meta);
    white-space: nowrap;
    cursor: pointer;
}
.cmdk-crumb[hidden] {
    display: none;
}
.cmdk-crumb span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmdk-crumb .ti {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--ui-fg-subtle);
}
.cmdk-crumb:hover {
    color: var(--ui-fg);
}
.cmdk-spinner {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--ui-border-strong);
    border-top-color: var(--ui-fg-muted);
    border-radius: 50%;
    animation: cmdk-spin 0.7s linear infinite;
}
.cmdk-spinner[hidden] {
    display: none;
}
@keyframes cmdk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Alcance: segmentado en pista gris + interruptor "Solo en curso" */
.cmdk-scopes {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--ui-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.cmdk-scopes::-webkit-scrollbar {
    display: none;
}
.cmdk-scopes[hidden] {
    display: none;
}
.cmdk-seg {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-surface-2);
}
.cmdk-seg-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0 var(--sp-2);
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--ui-fg-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.cmdk-seg-item:hover {
    color: var(--ui-fg);
}
.cmdk-seg-item.is-active {
    border-color: var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-fg);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.cmdk-seg-count {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
}
.cmdk-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    margin-left: auto;
    color: var(--ui-fg-muted);
    font-size: var(--fs-meta);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.cmdk-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cmdk-toggle-track {
    position: relative;
    width: 26px;
    height: 16px;
    border-radius: 8px;
    background: var(--ui-border-strong);
    transition: background 0.12s;
}
.cmdk-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.12s;
}
.cmdk-toggle input:checked + .cmdk-toggle-track {
    background: var(--ui-fg);
}
[data-bs-theme='dark'] .cmdk-toggle input:checked + .cmdk-toggle-track::after {
    background: var(--ui-surface);
}
.cmdk-toggle input:checked + .cmdk-toggle-track::after {
    transform: translateX(10px);
}
.cmdk-toggle input:focus-visible + .cmdk-toggle-track {
    box-shadow: 0 0 0 3px var(--ui-ring);
}
.cmdk-toggle:hover {
    color: var(--ui-fg);
}

/* Lista */
.cmdk-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-1) 0 var(--sp-2);
    scroll-padding: var(--sp-8) 0 var(--sp-2);
}
.cmdk-group + .cmdk-group {
    margin-top: var(--sp-1);
}
.cmdk-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4) var(--sp-1);
    color: var(--ui-fg-subtle);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cmdk-group-more {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ui-fg-subtle);
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.cmdk-group-more:hover {
    color: var(--ui-fg);
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    color: var(--ui-fg);
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
}
.cmdk-item.is-active {
    background: var(--ui-surface-3);
}
.cmdk-item-icon {
    flex-shrink: 0;
    width: 18px;
    color: var(--ui-fg-muted);
    font-size: 1.05rem;
    text-align: center;
}
.cmdk-item-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1px;
}
.cmdk-item-line {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    min-width: 0;
}
.cmdk-item-title {
    overflow: hidden;
    font-size: var(--fs-body);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmdk-item-code {
    flex-shrink: 0;
    color: var(--ui-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    white-space: nowrap;
}
.cmdk-item-sub {
    overflow: hidden;
    color: var(--ui-fg-muted);
    font-size: var(--fs-meta);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmdk-item-side {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--sp-3);
    color: var(--ui-fg-subtle);
    font-size: var(--fs-meta);
    white-space: nowrap;
}
.cmdk-item-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
}
.cmdk-item-meta.is-text {
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
}
.cmdk-item-hint {
    display: none;
    color: var(--ui-fg-subtle);
}
.cmdk-item.is-active .cmdk-item-hint {
    display: inline-flex;
}
.cmdk-item mark {
    padding: 0;
    border-radius: 2px;
    background: var(--ui-accent-soft);
    color: inherit;
}
/* Estado: texto con punto, sin caja */
.cmdk-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-fg-2);
    font-size: var(--fs-meta);
}
.cmdk-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-fg-faint);
}
.cmdk-status.is-ok::before {
    background: var(--ui-success);
}
.cmdk-status.is-info::before {
    background: var(--ui-info);
}
.cmdk-status.is-warn::before {
    background: var(--ui-warning);
}
.cmdk-status.is-bad::before {
    background: var(--ui-danger);
}
.cmdk-live {
    color: var(--ui-fg-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
}

/* Vacío / error / cargando */
.cmdk-empty {
    padding: var(--sp-10) var(--sp-6);
    color: var(--ui-fg-muted);
    font-size: var(--fs-body);
    text-align: center;
}
.cmdk-empty strong {
    display: block;
    margin-bottom: var(--sp-1);
    color: var(--ui-fg);
    font-weight: 500;
}
.cmdk-skel {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 40px;
    padding: 0 var(--sp-4);
}
.cmdk-skel::before,
.cmdk-skel::after {
    content: '';
    height: 10px;
    border-radius: 3px;
    background: var(--ui-surface-2);
    animation: cmdk-pulse 1.2s ease-in-out infinite;
}
.cmdk-skel::before {
    width: 18px;
}
.cmdk-skel::after {
    width: var(--w, 40%);
}
@keyframes cmdk-pulse {
    50% {
        opacity: 0.45;
    }
}

/* Pie con atajos */
.cmdk-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
    min-height: 38px;
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-2);
    color: var(--ui-fg-subtle);
    font-size: var(--fs-meta);
}
.cmdk-foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cmdk-foot .cmdk-foot-end {
    margin-left: auto;
}
.cmdk-foot [hidden] {
    display: none;
}
button.cmdk-kbd {
    cursor: pointer;
}
button.cmdk-kbd:hover {
    color: var(--ui-fg);
}
@media (max-width: 576px) {
    .cmdk-foot,
    .cmdk-item-meta,
    .cmdk-live {
        display: none;
    }
    .cmdk-close {
        height: 28px;
        min-width: 28px;
        font-size: 1rem;
    }
}

/* Encabezado con pestañas: línea divisoria de borde a borde entre el título
   y la fila de pestañas (la fila de pestañas se alinea con el título). */
.page-wrapper .ui-page-head > .ui-page-head__bar:has(> .nav-tabs),
.ui-page-head > .ui-page-head__bar:has(> .nav-tabs) {
    margin: var(--sp-1) calc(var(--sp-5) * -1) 0;
    padding: 0 var(--sp-5);
    border-top: 1px solid var(--ui-border);
}

/* ────────────────────────────────────────────────────────────────────
   19. TOASTS (toastr) — tarjeta neutra, ícono con tono por tipo
   toastr.options en layouts: titleClass 'toast-header', messageClass 'toast-body'.
   ──────────────────────────────────────────────────────────────────── */
#toast-container {
    z-index: 1100 !important;
}
#toast-container.toast-top-right {
    top: calc(var(--topbar-h, 3rem) + var(--sp-2));
    right: var(--sp-4);
}
#toast-container > div,
#toast-container > .toast {
    position: relative;
    display: block;
    width: 360px;
    max-width: calc(100vw - 2rem);
    margin: 0 0 var(--sp-2) !important;
    padding: var(--sp-3) var(--sp-8, 2.5rem) var(--sp-3) 3rem !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--radius-md) !important;
    background: var(--ui-surface) !important;
    background-image: none !important;
    color: var(--ui-fg) !important;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.45;
    opacity: 1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.16) !important;
    cursor: default;
    animation: toast-in 0.18s ease-out;
}
#toast-container > div:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 36px rgba(0, 0, 0, 0.2) !important;
}
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}
/* Ícono */
#toast-container > div::before {
    content: '';
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--ui-surface-2);
}
#toast-container > div::after {
    content: '';
    position: absolute;
    top: calc(var(--sp-3) + 4px);
    left: calc(var(--sp-3) + 4px);
    width: 14px;
    height: 14px;
    background: var(--ui-fg-muted);
    -webkit-mask: var(--toast-icon) center / contain no-repeat;
    mask: var(--toast-icon) center / contain no-repeat;
}
/* Título y mensaje (Tabler trae estilos de .toast-header/.toast-body) */
#toast-container .toast-header,
#toast-container .toast-title {
    display: block;
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ui-fg) !important;
    font-size: var(--fs-body);
    font-weight: 600;
}
#toast-container .toast-body,
#toast-container .toast-message {
    display: block;
    margin: 0;
    padding: 0 !important;
    color: var(--ui-fg-2) !important;
    font-size: var(--fs-body);
    overflow-wrap: anywhere;
}
#toast-container .toast-header + .toast-body,
#toast-container .toast-title + .toast-message {
    color: var(--ui-fg-muted) !important;
    font-size: var(--fs-meta);
}
#toast-container .toast-body:only-of-type {
    padding-top: 2px !important;
}
#toast-container .toast-body a,
#toast-container .toast-message a,
#toast-container .toast-body label {
    color: var(--ui-fg) !important;
    font-weight: 500;
}
/* Cerrar */
#toast-container .toast-close-button {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    float: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--radius-sm);
    color: var(--ui-fg-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
}
#toast-container .toast-close-button:hover {
    background: var(--ui-surface-2);
    color: var(--ui-fg);
    opacity: 1;
}
/* Progreso */
#toast-container .toast-progress {
    height: 2px;
    background: var(--ui-border-strong);
    opacity: 1;
}

#toast-container > .toast-success {
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
}
#toast-container > .toast-success::before {
    background: var(--ui-tag-green-bg);
}
#toast-container > .toast-success::after {
    background: var(--ui-tag-green-fg);
}

#toast-container > .toast-error {
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
}
#toast-container > .toast-error::before {
    background: var(--ui-tag-red-bg);
}
#toast-container > .toast-error::after {
    background: var(--ui-tag-red-fg);
}

#toast-container > .toast-warning {
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
#toast-container > .toast-warning::before {
    background: var(--ui-tag-orange-bg);
}
#toast-container > .toast-warning::after {
    background: var(--ui-tag-orange-fg);
}

#toast-container > .toast-info {
    --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");
}
#toast-container > .toast-info::before {
    background: var(--ui-tag-blue-bg);
}
#toast-container > .toast-info::after {
    background: var(--ui-tag-blue-fg);
}

/* ────────────────────────────────────────────────────────────────────
   20. PESTAÑAS — patrón único para toda `.nav-tabs` horizontal
   Sólo texto (los íconos se ocultan; logos de marca <img> se respetan),
   subrayado del ancho del texto, separación fija, contador en mono.
   Las verticales (`.flex-column`) conservan su estilo de lista.
   ──────────────────────────────────────────────────────────────────── */
.nav-tabs:not(.flex-column) {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-5) !important;
    margin-bottom: 0;
    padding-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-bottom: 1px solid var(--ui-border);
}
.nav-tabs:not(.flex-column)::-webkit-scrollbar {
    display: none;
}
.nav-tabs:not(.flex-column) > .nav-item {
    margin: 0 !important;
    flex-shrink: 0;
}
.nav-tabs:not(.flex-column) .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 40px;
    margin: 0 0 -1px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--ui-fg-muted) !important;
    font-size: var(--fs-body);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.nav-tabs:not(.flex-column) .nav-link:hover {
    color: var(--ui-fg) !important;
    border-bottom-color: var(--ui-border-strong) !important;
}
.nav-tabs:not(.flex-column) .nav-link.active,
.nav-tabs:not(.flex-column) .nav-item.show .nav-link {
    color: var(--ui-fg) !important;
    border-bottom-color: var(--ui-fg) !important;
}
.nav-tabs:not(.flex-column) .nav-link.disabled,
.nav-tabs:not(.flex-column) .nav-link:disabled {
    opacity: 0.4;
    pointer-events: none;
}
.nav-tabs:not(.flex-column) .nav-link > .ti,
.nav-tabs:not(.flex-column) .nav-link > i.ti {
    display: none !important;
}
.nav-tabs:not(.flex-column) .nav-link > img {
    width: 16px;
    height: 16px;
    margin: 0 !important;
}
.nav-tabs:not(.flex-column) .nav-link .badge,
.nav-tabs:not(.flex-column) .nav-link .tab-count {
    margin: 0 !important;
    padding: 0 0.3em;
    border: 0 !important;
    background: none !important;
    color: var(--ui-fg-subtle) !important;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 400;
}
.nav-tabs:not(.flex-column) .nav-link.active .badge,
.nav-tabs:not(.flex-column) .nav-link.active .tab-count {
    color: var(--ui-fg-muted) !important;
}
/* Pestañas dentro de tarjetas / modales / offcanvas: mismo patrón con aire lateral */
.card > .card-header > .nav-tabs:not(.flex-column),
.modal .nav-tabs:not(.flex-column),
.offcanvas .nav-tabs:not(.flex-column) {
    padding: 0 var(--sp-5);
}
.offcanvas.sheet .nav-tabs:not(.flex-column) {
    padding: 0 var(--sheet-pad);
}
.card > .card-header:has(> .nav-tabs) {
    padding: 0;
    border-bottom: 0;
}

/* Ficha: barra de avance y acciones del encabezado */
.sheet-progress {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    margin: 0;
    padding: var(--sp-3) var(--sp-5) var(--sp-4);
    list-style: none;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.sheet-progress li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sheet-progress-bar {
    position: relative;
    height: 4px;
    margin-bottom: var(--sp-2);
    border-radius: 2px;
    background: var(--ui-surface-3);
}
.sheet-progress li.is-done .sheet-progress-bar {
    background: var(--ui-fg);
}
.sheet-progress li.is-current .sheet-progress-bar {
    background: linear-gradient(90deg, var(--ui-fg) 0 45%, var(--ui-surface-3) 45%);
}
.sheet-progress li.is-bad .sheet-progress-bar {
    background: var(--ui-tag-red-fg);
}
.sheet-progress-label {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ui-fg-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sheet-progress li.is-done .sheet-progress-label,
.sheet-progress li.is-current .sheet-progress-label {
    color: var(--ui-fg);
}
.sheet-progress li.is-bad .sheet-progress-label {
    color: var(--ui-tag-red-fg);
}
.sheet-progress-time {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sheet-head-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
    flex-shrink: 0;
}
.offcanvas.sheet .offcanvas-header .sheet-head-actions .btn {
    height: var(--control-h);
}
.sheet-hero.is-local .sheet-place-city {
    font-size: var(--fs-title);
}
@media (max-width: 576px) {
    .sheet-progress {
        grid-auto-flow: row;
    }
}

/* Ficha local: franja del servicio que opera (ML Flex / Uber Direct / flotilla) */
.offcanvas.sheet #integration_badge_offcanvas {
    display: none;
}
.sheet-band {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.sheet-band-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--ui-surface-2);
    overflow: hidden;
}
.sheet-band-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sheet-band-mark .ti {
    font-size: 1.35rem;
}
.sheet-band-body {
    flex: 1 1 auto;
    min-width: 0;
}
.sheet-band-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ui-fg);
}
.sheet-band-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--sp-4);
    margin-top: 2px;
    font-size: var(--fs-meta);
    color: var(--ui-fg-2);
}
.sheet-band-meta em {
    margin-right: 0.35rem;
    font-style: normal;
    color: var(--ui-fg-subtle);
}
.sheet-band-meta code {
    padding: 0;
    background: none;
    color: inherit;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
}
.sheet-band-actions {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.sheet-band-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 28px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-sm);
    background: var(--ui-surface);
    color: var(--ui-fg);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.sheet-band-btn:hover {
    background: var(--ui-surface-2);
    color: var(--ui-fg);
}
.sheet-band-btn .ti {
    order: 2;
    font-size: 0.95em;
}
/* Mercado Libre Flex: tono amarillo de marca */
.sheet-band.is-meli {
    background: var(--ui-tag-yellow-bg);
    border-bottom-color: color-mix(in srgb, var(--ui-tag-yellow-fg) 20%, transparent);
}
.sheet-band.is-meli .sheet-band-title {
    color: var(--ui-tag-yellow-fg);
}
.sheet-band.is-meli .sheet-band-mark {
    background: #fff159;
    padding: 5px;
}
.sheet-band.is-meli .sheet-band-btn {
    border-color: color-mix(in srgb, var(--ui-tag-yellow-fg) 35%, transparent);
    background: color-mix(in srgb, var(--ui-surface) 70%, transparent);
}
/* Uber Direct: bloque invertido */
.sheet-band.is-uber {
    background: var(--ui-fg);
    border-bottom-color: var(--ui-fg);
}
.sheet-band.is-uber .sheet-band-title,
.sheet-band.is-uber .sheet-band-meta {
    color: var(--ui-surface);
}
.sheet-band.is-uber .sheet-band-meta em {
    color: color-mix(in srgb, var(--ui-surface) 60%, transparent);
}
.sheet-band.is-uber .sheet-band-mark {
    background: var(--ui-surface);
    color: var(--ui-fg);
}
.sheet-band.is-uber .sheet-band-btn {
    border-color: color-mix(in srgb, var(--ui-surface) 35%, transparent);
    background: transparent;
    color: var(--ui-surface);
}
.sheet-band.is-uber .sheet-band-btn:hover {
    background: color-mix(in srgb, var(--ui-surface) 12%, transparent);
}
/* Flotilla MobiiClub: neutra con logo */
.sheet-band.is-fleet .sheet-band-mark {
    background: #fcc200;
}
@media (max-width: 576px) {
    .sheet-band {
        flex-wrap: wrap;
    }
}

/* La ficha nunca encoge su encabezado: sólo el cuerpo hace scroll */
.offcanvas.sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.offcanvas.sheet > .offcanvas-header,
.offcanvas.sheet > .offcanvas-footer {
    flex-shrink: 0;
}
.offcanvas.sheet > .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}
.offcanvas.sheet .offcanvas-header #state_badge_offcanvas {
    line-height: 1;
}
.sheet-fact-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 100%;
}
.sheet-fact-inline .sheet-act {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.offcanvas.sheet #history-btn[hidden] {
    display: none !important;
}
/* Paquetería: canal del envío */
.sheet-band.is-shopify {
    background: var(--ui-tag-green-bg);
    border-bottom-color: color-mix(in srgb, var(--ui-tag-green-fg) 20%, transparent);
}
.sheet-band.is-shopify .sheet-band-title {
    color: var(--ui-tag-green-fg);
}
.sheet-band.is-shopify .sheet-band-mark {
    background: var(--ui-surface);
    padding: 6px;
}
.sheet-band.is-shopify .sheet-band-btn {
    border-color: color-mix(in srgb, var(--ui-tag-green-fg) 35%, transparent);
    background: color-mix(in srgb, var(--ui-surface) 70%, transparent);
}
.sheet-band.is-api .sheet-band-mark,
.sheet-band.is-direct .sheet-band-mark {
    color: var(--ui-fg-muted);
}
.sheet-band.is-direct {
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}
.sheet-band.is-direct .sheet-band-mark {
    width: 28px;
    height: 28px;
}
.sheet-band.is-direct .sheet-band-mark .ti {
    font-size: 1.05rem;
}
/* Pie de la ficha de paquetería */
.offcanvas.sheet > .offcanvas-footer.d-flex {
    padding: var(--sp-3) var(--sheet-pad) !important;
}

/* Pestañas: línea base y subrayado como sombras internas.
   La lista tiene overflow (scroll horizontal) y recortaba el subrayado
   cuando se dibujaba con borde + margen negativo: quedaba de 1px. */
.nav-tabs:not(.flex-column),
.ui-page-head__bar > .nav-tabs {
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 var(--ui-border);
}
.ui-page-head__bar > .nav-tabs {
    box-shadow: none;
}
.nav-tabs:not(.flex-column) .nav-link,
.ui-page-head__bar > .nav-tabs .nav-link {
    margin: 0 !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 -2px 0 transparent;
}
.nav-tabs:not(.flex-column) .nav-link:hover,
.ui-page-head__bar > .nav-tabs .nav-link:hover {
    box-shadow: inset 0 -2px 0 var(--ui-border-strong);
}
.nav-tabs:not(.flex-column) .nav-link.active,
.nav-tabs:not(.flex-column) .nav-item.show .nav-link,
.ui-page-head__bar > .nav-tabs .nav-link.active {
    box-shadow: inset 0 -2px 0 var(--ui-fg);
}

/* ────────────────────────────────────────────────────────────────────
   21. FICHA DE COMBUSTIBLE — `.offcanvas.fuel-sheet` (arquetipo Auditoría)
   (public/scripts/utils/sheets/fuel-sheet.js). Confirma que la carga
   cuadra: veredicto → conciliación → evidencia → contexto. Secciones
   planas separadas por 1px; el tono sólo en el veredicto y en las
   diferencias. Base de la ficha (encabezado/pie fijos): §18.
   ──────────────────────────────────────────────────────────────────── */
.offcanvas.fuel-sheet > .offcanvas-body {
    padding: 0 !important;
}
.fuel-sec {
    padding: var(--sp-4) var(--sheet-pad) var(--sp-5);
    border-top: 1px solid var(--ui-border);
}
.fuel-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 24px;
    margin-bottom: var(--sp-3);
}
.fuel-sec-head .sheet-act {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
}

/* 1. Veredicto: franja a todo lo ancho + motivos con su umbral */
.fuel-verdict-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    padding: var(--sp-3) var(--sheet-pad);
}
.fuel-verdict-line > .ti {
    font-size: 1.15rem;
}
.fuel-verdict-title {
    font-size: var(--fs-title);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fuel-verdict-meta {
    margin-left: auto;
    font-size: var(--fs-meta);
    opacity: 0.85;
}
.fuel-reasons {
    margin: 0;
    padding: var(--sp-2) var(--sheet-pad) var(--sp-3);
    list-style: none;
}
.fuel-reasons li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    font-size: var(--fs-body);
    color: var(--ui-fg);
}
.fuel-reasons li > .ti {
    align-self: center;
    font-size: 0.95rem;
    color: var(--ui-fg-subtle);
}
.fuel-reasons li.is-bad > .ti {
    color: var(--ui-ink-danger);
}
.fuel-reasons li.is-warn > .ti {
    color: var(--ui-ink-warning);
}
.fuel-reasons li.is-info > .ti {
    color: var(--ui-ink-info);
}
.fuel-reason-text {
    min-width: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.fuel-reason-rule {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ui-fg-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 2. Conciliación: concepto × esperado · reportado · diferencia */
.fuel-recon-wrap {
    overflow-x: auto;
}
.fuel-recon {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.fuel-recon th,
.fuel-recon td {
    padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
    border-bottom: 1px solid var(--ui-border);
    text-align: left;
    vertical-align: top;
}
.fuel-recon th:last-child,
.fuel-recon td:last-child {
    padding-right: 0;
    text-align: right;
}
.fuel-recon thead th {
    padding-top: 0;
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-fg-subtle);
    white-space: nowrap;
}
.fuel-recon tbody th {
    width: 28%;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ui-fg);
}
.fuel-recon tbody tr:last-child > * {
    border-bottom: 0;
}
.fuel-recon-value {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    color: var(--ui-fg);
    white-space: nowrap;
}
.fuel-recon-src {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
    white-space: nowrap;
}
.fuel-recon-empty {
    color: var(--ui-fg-faint);
}
.fuel-recon tr.is-none .fuel-recon-value {
    color: var(--ui-fg-muted);
}
.fuel-diff {
    display: inline-block;
    padding: 1px var(--sp-1);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: 500;
    white-space: nowrap;
}

/* 3. Evidencia: miniaturas en el orden de captura, clic = lightbox */
.fuel-evidence {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--sp-3);
}
.fuel-shot {
    margin: 0;
    min-width: 0;
}
.fuel-shot-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    background: var(--ui-surface-2);
    overflow: hidden;
}
.fuel-shot-media:has(> .fuel-shot-empty) {
    border-style: dashed;
    border-color: var(--ui-border-strong);
    background: transparent;
}
.fuel-shot-media > a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.fuel-shot-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fuel-shot-media > a:hover img {
    opacity: 0.85;
}
.fuel-shot-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
}
.fuel-shot-empty .ti {
    font-size: 1.15rem;
    color: var(--ui-fg-faint);
}
.fuel-shot-empty.is-loading .ti {
    animation: fuel-spin 0.9s linear infinite;
}
@keyframes fuel-spin {
    to {
        transform: rotate(360deg);
    }
}
.fuel-shot figcaption {
    margin-top: var(--sp-1);
    font-size: var(--fs-micro);
    line-height: 1.3;
    color: var(--ui-fg-muted);
}
.fuel-shot figcaption span,
.fuel-shot figcaption em {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fuel-shot figcaption em {
    font-style: normal;
    font-family: var(--font-mono);
    color: var(--ui-fg);
    font-variant-numeric: tabular-nums;
}

/* 4. Contexto: pares etiqueta/valor compactos en dos columnas */
.fuel-ctx {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
    margin: 0;
}
.fuel-ctx > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--sp-2);
    align-items: baseline;
    padding: var(--sp-1) 0;
    font-size: var(--fs-body);
}
.fuel-ctx dt {
    font-weight: 400;
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
}
.fuel-ctx dd {
    min-width: 0;
    margin: 0;
    color: var(--ui-fg);
    overflow-wrap: anywhere;
}
.fuel-ctx-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 100%;
}
.fuel-ctx-inline > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fuel-ctx-inline .sheet-act {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
}
.fuel-ctx-sub {
    display: block;
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pie: destructiva con borde rojo, principal a la derecha */
.offcanvas.fuel-sheet .offcanvas-footer .btn.btn-outline-danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--ui-danger) 35%, transparent);
    color: var(--ui-danger);
}
.offcanvas.fuel-sheet .offcanvas-footer .btn.btn-outline-danger:hover {
    background: color-mix(in srgb, var(--ui-danger) 8%, transparent);
}
.offcanvas.fuel-sheet .offcanvas-footer .dropup:only-child {
    margin-right: auto;
}

@media (max-width: 576px) {
    .fuel-verdict-meta {
        margin-left: 0;
        flex-basis: 100%;
    }
    .fuel-reasons li {
        grid-template-columns: 16px minmax(0, 1fr);
    }
    .fuel-reason-rule {
        grid-column: 2;
        white-space: normal;
    }
    .fuel-ctx {
        grid-template-columns: 1fr;
    }
    .fuel-evidence {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-2);
    }
}

/* ────────────────────────────────────────────────────────────────────
   23. FICHAS DE RECOLECCIÓN Y CLIENTE
   Mismo lenguaje que la ficha de envío (sección 18):
     · Recolección  #mobiiclub_data_offcanvas / #parcel_data_offcanvas
                    (public/scripts/utils/sheets/pickup-sheet.js)
     · Evidencia    #an-evidence  (clients/client/finance/general.js)
     · Shopify      #shopify-order-offcanvas (clients/client/integrations/shopify.js)
     · Tarifa       #rate-detail-offcanvas (inbox/main.js)
   ──────────────────────────────────────────────────────────────────── */

/* Franja: paquetería (logo del carrier sobre blanco) */
.sheet-band.is-carrier .sheet-band-mark {
    background: #fff;
    border: 1px solid var(--ui-border);
    padding: 3px;
}
.sheet-band.is-api .sheet-band-mark .ti,
.sheet-band.is-direct .sheet-band-mark .ti {
    font-size: 1.15rem;
}

/* Ventana de recolección */
.pk-when {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--ui-border);
}
.pk-cal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--radius-md);
    background: var(--ui-surface);
    overflow: hidden;
}
.pk-cal span {
    align-self: stretch;
    padding: 2px 0;
    background: var(--ui-fg);
    color: var(--ui-surface);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pk-cal strong {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-display-lg);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ui-fg);
}
.pk-when-body {
    flex: 1 1 auto;
    min-width: 0;
}
.pk-when-date {
    margin-top: 2px;
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ui-fg);
}
.pk-when-time {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    color: var(--ui-fg-2);
}
.pk-when-time .ti {
    color: var(--ui-fg-subtle);
}
.pk-when-rel {
    flex-shrink: 0;
    padding: 3px var(--sp-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    background: var(--ui-surface-2);
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ui-fg-2);
    white-space: nowrap;
}
.pk-when-rel.is-today {
    border-color: transparent;
    background: var(--ui-tag-orange-bg);
    color: var(--ui-tag-orange-fg);
}
.pk-when-rel.is-done {
    border-color: transparent;
    background: var(--ui-tag-green-bg);
    color: var(--ui-tag-green-fg);
}
.pk-when-rel.is-past {
    color: var(--ui-fg-subtle);
}
.sheet-hero.is-pickup .sheet-route,
.sheet-hero.is-shopify .sheet-route {
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
}
.sheet-hero.is-pickup .sheet-place-city,
.sheet-hero.is-shopify .sheet-place-city {
    font-size: var(--fs-title);
}

/* Aprobación de solicitud (MobiiClub) */
.offcanvas.sheet .pk-approve {
    margin: 0 var(--sheet-pad) var(--sp-4);
}
.pk-approve .sheet-panel-head {
    background: var(--ui-wash-warning);
}
.pk-approve .sheet-panel-sub {
    text-transform: none;
}
.pk-approve-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--ui-surface);
    color: var(--ui-tag-orange-fg);
    font-size: 1.1rem;
}
.pk-approve-body {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--ui-border);
}
.pk-approve-address > .col-md-12 {
    margin-top: var(--sp-3);
    margin-bottom: 0 !important;
}
.pk-approve-address .form-hint {
    display: block;
}

/* Secciones y paradas de la ficha */
.pk-section + .pk-section,
.sp-section + .sp-section {
    margin-top: var(--sp-6);
}
.pk-section-head,
.sp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.pk-count,
.sp-count {
    font-size: var(--fs-meta);
    color: var(--ui-fg-subtle);
}
.sheet-stops .sheet-stop.is-dropoff:not(:last-child) .sheet-stop-marker::after {
    content: '';
    position: absolute;
    top: 18px;
    bottom: calc(var(--sp-2) * -1 - 4px);
    left: 50%;
    width: 0;
    border-left: 2px dashed var(--ui-border-strong);
    transform: translateX(-1px);
}
.sheet-stops .sheet-stop.is-dropoff:not(:last-child) .sheet-stop-body {
    border-bottom: 1px solid var(--ui-border);
}
.sheet-stops.is-single .sheet-stop.is-pickup .sheet-stop-marker::after {
    display: none;
}
.sheet-stops.is-single .sheet-stop.is-pickup .sheet-stop-body {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Tabla de guías incluidas */
.sheet-panel > .sheet-table-wrap:first-child {
    border-top: 0;
}
.pk-table th:first-child,
.pk-table td:first-child,
.sp-items th:first-child,
.sp-items td:first-child {
    width: auto;
}
.pk-table td,
.sp-items td {
    vertical-align: middle;
}
.pk-guide {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
}
.pk-guide .sheet-act {
    width: 24px;
    height: 24px;
    opacity: 0;
}
.pk-table tr:hover .pk-guide .sheet-act {
    opacity: 1;
}
.pk-sub,
.sp-sub {
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
    line-height: 1.35;
}
.pk-dest,
.sp-item {
    font-weight: 500;
    color: var(--ui-fg);
}
.pk-table .badge {
    white-space: nowrap;
}
.sheet-empty,
.sp-empty {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    color: var(--ui-fg-muted);
}
.sheet-empty .ti,
.sp-empty .ti {
    font-size: 1.1rem;
    color: var(--ui-fg-subtle);
}

/* Evidencia de KPI (analíticas del cliente) */
.offcanvas.sheet.ev-sheet {
    width: min(600px, 100vw) !important;
}
.offcanvas.sheet .offcanvas-header .ev-title {
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ui-fg);
}
.ev-head-sub {
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
}
.ev-hero {
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    background: var(--ui-surface-2);
}
.ev-hero-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ui-fg);
}
.ev-hero-unit {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ui-fg-muted);
}
.ev-hero-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-meta);
    font-weight: 500;
    background: var(--ui-surface-3);
    color: var(--ui-fg-2);
}
.ev-hero-delta.is-good {
    background: var(--ui-tag-green-bg);
    color: var(--ui-tag-green-fg);
}
.ev-hero-delta.is-bad {
    background: var(--ui-tag-red-bg);
    color: var(--ui-tag-red-fg);
}
.ev-hero-delta.is-none {
    background: none;
    padding-left: 0;
    color: var(--ui-fg-subtle);
}
.ev-body,
.sp-body {
    padding: var(--sp-2) var(--sheet-pad) var(--sp-8, 2.5rem);
}

/* Pedido de Shopify */
.offcanvas.sheet .offcanvas-header .shopify-pill {
    padding: 0.3em 0.6em;
    font-size: var(--fs-micro);
    letter-spacing: 0.03em;
}
.sp-sheet .sheet-fact-inline .text-truncate {
    min-width: 0;
}
.sp-sheet #shopify-detail-order-id {
    font-size: var(--fs-body);
}
.sp-sheet #shopify-detail-copy-id {
    width: 24px;
    height: 24px;
}
.sp-items td:first-child {
    min-width: 180px;
}
.sp-ship-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    background: var(--ui-surface);
    color: var(--ui-fg-muted);
    font-size: 1.05rem;
}
.sp-sheet .sheet-panel-head .shopify-pill {
    font-size: var(--fs-micro);
}
.sp-sheet .sheet-panel-sub {
    text-transform: none;
}
.sp-sheet .shopify-synced-tracking-btn {
    color: var(--ui-fg);
    font-size: var(--fs-body);
    text-decoration: none;
}
#shopify-order-offcanvas .shopify-finance-table {
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--ui-border);
    font-size: var(--fs-body);
}
#shopify-order-offcanvas .shopify-finance-table th,
#shopify-order-offcanvas .shopify-finance-table td {
    padding: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--ui-border);
}
#shopify-order-offcanvas .shopify-finance-table th {
    font-weight: 400;
    color: var(--ui-fg-muted);
}
#shopify-order-offcanvas .shopify-finance-table td {
    font-family: var(--font-mono);
    text-align: right;
    color: var(--ui-fg);
}
#shopify-order-offcanvas .shopify-finance-table tr.shopify-finance-total th,
#shopify-order-offcanvas .shopify-finance-table tr.shopify-finance-total td {
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-top: 0;
    border-bottom: 0;
    background: var(--ui-surface-2);
    color: var(--ui-fg);
    font-weight: 600;
    font-size: var(--fs-title);
}

.offcanvas.sheet .offcanvas-header .ev-title {
    font-family: var(--font-sans);
}
.sp-ship-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.sp-ship-sub > span {
    color: var(--ui-fg-subtle);
}
#shopify-order-offcanvas .shopify-finance-table th,
#shopify-order-offcanvas .shopify-finance-table td {
    border-left: 0;
    border-right: 0;
}
@media (max-width: 576px) {
    .pk-when {
        flex-wrap: wrap;
    }
    .ev-hero-value {
        font-size: var(--fs-display-lg);
    }
}

/* ────────────────────────────────────────────────────────────────────
   22. FICHAS DE BITÁCORA — arquetipo INSPECCIÓN `.offcanvas.log-sheet`
   (public/scripts/utils/sheets/log-sheet.js). Jornada de unidad y
   servicio de ruta. Propósito: revisar el estado de la unidad / turno.
   Orden: fotos (Inicio / Cierre) → odómetro → checklist e incidencias →
   contexto. Secciones planas separadas por 1px; sin tarjetas ni barras.
   ──────────────────────────────────────────────────────────────────── */
.offcanvas.log-sheet .offcanvas-body {
    padding-top: 0 !important;
}
.log-sec {
    padding: var(--sp-4) var(--sheet-pad);
    border-top: 1px solid var(--ui-border);
}
.log-sec:first-child {
    padding-top: 0;
    border-top: 0;
}
.log-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--control-h);
    margin-bottom: var(--sp-2);
}
.log-sec-head.is-sub {
    min-height: 0;
    margin-top: var(--sp-4);
}
.log-sec-count {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    color: var(--ui-fg-muted);
}

/* 1 · Inspección fotográfica */
.log-inspect {
    container-type: inline-size;
}
.offcanvas.log-sheet .log-inspect .segmented {
    height: var(--control-h-sm);
}
.offcanvas.log-sheet .log-inspect .segmented > .seg-item:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.log-seg-count {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    color: var(--ui-fg-subtle);
}
.log-seg-count.is-short {
    color: var(--ui-tag-orange-fg);
}
[data-log-shots-pane][hidden] {
    display: none !important;
}
.log-shot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}
@container (min-width: 520px) {
    .log-shot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.log-shot-grid.is-empty {
    display: block;
}
.log-shots-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-8) var(--sp-4);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    color: var(--ui-fg-muted);
}
.log-shot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
    color: var(--ui-fg-2);
    text-decoration: none;
}
.log-shot-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    background: var(--ui-surface-2);
    overflow: hidden;
}
.log-shot-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}
a.log-shot {
    cursor: zoom-in;
}
a.log-shot:hover {
    color: var(--ui-fg);
}
a.log-shot:hover .log-shot-img {
    border-color: var(--ui-border-strong);
}
a.log-shot:hover .log-shot-img img {
    transform: scale(1.03);
}
a.log-shot:focus-visible {
    outline: none;
}
a.log-shot:focus-visible .log-shot-img {
    box-shadow: 0 0 0 3px var(--ui-ring);
}
.log-shot-cap {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    min-width: 0;
    font-size: var(--fs-meta);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-shot-n {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    color: var(--ui-fg-subtle);
}
.log-shot.is-empty .log-shot-img {
    border: 1px dashed var(--ui-border-strong);
    background: transparent;
    color: var(--ui-fg-faint);
    font-size: 1.5rem;
}
.log-shot.is-empty .log-shot-cap {
    color: var(--ui-tag-orange-fg);
}

/* 2 · Odómetro: inicio → cierre = recorrido */
.log-odo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-3);
    margin: 0;
}
.log-odo > div {
    min-width: 0;
}
.log-odo dt {
    margin-bottom: 2px;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ui-fg-muted);
}
.log-odo dd {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 28px;
    margin: 0;
}
.log-odo-value {
    font-family: var(--font-mono);
    font-size: var(--fs-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--ui-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-odo-value .is-bad {
    color: var(--ui-tag-red-fg);
}
.log-odo-value .text-fg-muted,
.log-odo-value .text-fg-subtle {
    font-family: var(--font-sans);
    font-size: var(--fs-subtitle);
    font-weight: 500;
}
.log-odo dd.log-odo-sub {
    display: block;
    min-height: 0;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-odo-arrow {
    padding-top: 26px;
    color: var(--ui-fg-faint);
    font-size: 1rem;
}
.log-odo .sheet-act {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
}
.log-odo-pending {
    display: none;
    font-size: var(--fs-subtitle);
    font-weight: 500;
    color: var(--ui-fg-subtle);
}
.log-odo [data-log-end].is-pending .log-odo-value,
.log-odo [data-log-end].is-pending .log-odo-sub,
.log-odo [data-log-end].is-pending .sheet-act {
    display: none !important;
}
.log-odo [data-log-end].is-pending .log-odo-pending {
    display: inline;
}

/* 3 · Checklist e incidencias: filas planas con indicador de tono */
.log-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}
.log-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    padding: var(--sp-2) 0;
}
.log-rows > .log-row + .log-row,
.log-rows > li + li {
    border-top: 1px solid var(--ui-border);
}
.log-row.is-warn {
    align-items: flex-start;
}
.log-tone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.log-row-body {
    flex: 1 1 auto;
    min-width: 0;
}
.log-row-label {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ui-fg);
}
.log-row-text {
    margin-top: 2px;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--ui-fg-2);
}
.log-row-value {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-subtitle);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-fg);
}
.log-row-value .sheet-act {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
}
.log-row-meta {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
}
.log-pair {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-1) var(--sp-5);
}
.log-pair-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    color: var(--ui-fg);
}
.log-pair-item em {
    font-style: normal;
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
}
.log-pair-item[data-log-end].is-pending {
    display: none;
}
.log-warnings > li {
    margin: 0 !important;
    padding: 0;
}
.log-warnings > p {
    margin: 0;
    padding: var(--sp-3) 0;
    font-size: var(--fs-body);
    color: var(--ui-fg-muted) !important;
}

/* Combustible: barra con tono por nivel */
.log-fuel {
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--ui-surface-3);
    overflow: hidden;
}
.log-fuel-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-fg-muted);
    transition: width 0.3s ease;
}
.log-fuel[data-level='high'] .log-fuel-fill {
    background: var(--ui-tag-green-fg);
}
.log-fuel[data-level='mid'] .log-fuel-fill {
    background: var(--ui-tag-yellow-fg);
}
.log-fuel[data-level='low'] .log-fuel-fill {
    background: var(--ui-tag-red-fg);
}

/* 4 · Contexto: filas compactas etiqueta / valor */
.log-context {
    margin: 0;
}
.log-context > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: 36px;
    padding: var(--sp-1) 0;
}
.log-context > div[hidden] {
    display: none;
}
.log-context > div + div {
    border-top: 1px solid var(--ui-border);
}
.log-context dt {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ui-fg-muted);
}
.log-context dd {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 var(--sp-2);
    min-width: 0;
    margin: 0;
}
.log-context-main {
    min-width: 0;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ui-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.log-context-sub {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
}
.log-context-sub:empty {
    display: none;
}
.log-context dd.log-context-act {
    align-items: center;
}
.log-where {
    margin-top: var(--sp-3);
}
.log-where:not(:has(.log-map:not(.d-none))) {
    display: none;
}
.log-where > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ui-fg-muted);
    cursor: pointer;
    list-style: none;
}
.log-where > summary::-webkit-details-marker {
    display: none;
}
.log-where > summary::before {
    content: '▸';
    font-size: var(--fs-micro);
    transition: transform 0.12s;
}
.log-where[open] > summary::before {
    transform: rotate(90deg);
}
.log-where > summary:hover {
    color: var(--ui-fg);
}
.log-where-maps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}
.log-map {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.log-map-label {
    font-size: var(--fs-micro);
    color: var(--ui-fg-subtle);
}
.log-map > iframe {
    display: block;
    width: 100%;
    height: 160px;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    background: var(--ui-surface-2);
}

/* Pie: opciones a la izquierda, principal a la derecha, destructiva con borde rojo */
.offcanvas.log-sheet > .offcanvas-footer[hidden] {
    display: none !important;
}
.offcanvas.log-sheet .offcanvas-footer > .btn.bg-success {
    margin-left: auto;
}
.offcanvas.log-sheet .offcanvas-footer .btn.btn-outline-danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--ui-danger) 35%, transparent);
    color: var(--ui-danger);
}
.offcanvas.log-sheet .offcanvas-footer .btn.btn-outline-danger:hover {
    background: color-mix(in srgb, var(--ui-danger) 8%, transparent);
}
.offcanvas.log-sheet .dropdown-menu .dropdown-item.text-danger {
    color: var(--ui-danger) !important;
}
.offcanvas.log-sheet .dropdown-menu .dropdown-item.text-danger:hover {
    background: color-mix(in srgb, var(--ui-danger) 8%, transparent);
}

@media (max-width: 576px) {
    .log-odo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .log-odo-arrow {
        display: none;
    }
    .log-odo > .is-total {
        grid-column: 1 / -1;
        padding-top: var(--sp-2);
        border-top: 1px solid var(--ui-border);
    }
    .log-row:has(.log-pair) {
        flex-wrap: wrap;
    }
    .log-pair {
        justify-content: flex-start;
        width: 100%;
        padding-left: calc(24px + var(--sp-3));
    }
    .log-context > div {
        grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    }
    .log-where-maps {
        grid-template-columns: 1fr;
    }
}

/* ────────────────────────────────────────────────────────────────────
   24. BOTÓN CERRAR — sin filtros
   Bootstrap aclara la X en oscuro con `filter: invert(1)`; ese filtro
   también invertía el fondo de hover (gris oscuro → cuadro blanco).
   La X se dibuja con una máscara sobre `currentColor`.
   ──────────────────────────────────────────────────────────────────── */
.btn-close,
[data-bs-theme='dark'] .btn-close,
.btn-close.btn-close-white {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent none !important;
    color: var(--ui-fg-muted);
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none;
}
.btn-close::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-close:hover,
[data-bs-theme='dark'] .btn-close:hover {
    background-color: var(--ui-surface-2) !important;
    color: var(--ui-fg);
}
.btn-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-ring);
}
.btn-close:disabled {
    opacity: 0.4 !important;
}
.offcanvas.sheet .offcanvas-header .btn-close,
.offcanvas .offcanvas-header .btn-close {
    width: var(--control-h);
    height: var(--control-h);
}

/* ────────────────────────────────────────────────────────────────────
   25. RECORRIDO DE NOVEDADES — driver.js `.driver-popover.mc-tour`
   (public/scripts/whats-new/menu-tour.js)
   Sólo acomoda piezas del sistema dentro del popover: los botones son
   `.btn.btn-sm` (§10), el cierre es `.btn-close` (§24), las etiquetas
   `.eyebrow` (§1) y el atajo `.cmdk-kbd` (§19). Elevación de dropdown
   para los pasos anclados y de modal para el aviso inicial; overlay
   `--ui-overlay`; duración 150 ms (`duration` en el JS). Sin flecha: el
   recorte del overlay ya señala.
     .mc-tour-tag      eyebrow sobre el título (Nuevo / Cambió / Se movió)
     .mc-tour-map      grupos → páginas de la sección, leídos de la sidebar
     .mc-tour-was      "Antes": dónde vivía, tras una línea fina
   ──────────────────────────────────────────────────────────────────── */
.driver-popover.mc-tour {
    font-family: var(--font-sans);
    color: var(--ui-fg);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08);
    padding: var(--sp-4);
    min-width: 300px;
    max-width: 340px;
}
[data-bs-theme='dark'] .driver-popover.mc-tour {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.4);
}
.driver-popover.mc-tour:focus {
    outline: 0;
}
.driver-popover.mc-tour--intro,
[data-bs-theme='dark'] .driver-popover.mc-tour--intro {
    max-width: 400px;
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
.driver-popover.mc-tour .driver-popover-arrow {
    display: none;
}
/* `.btn-close` (§24) es relativo; aquí vuelve a la esquina. */
.driver-popover.mc-tour .driver-popover-close-btn {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
}
.driver-popover.mc-tour .mc-tour-tag {
    display: block;
    margin-bottom: var(--sp-1);
}
.driver-popover.mc-tour .mc-tour-tag--new,
.driver-popover.mc-tour .mc-tour-tag--intro {
    color: var(--ui-ink-info);
}
.driver-popover.mc-tour .driver-popover-title {
    font-size: var(--fs-title);
    font-weight: 600;
    line-height: 1.35;
    padding-right: var(--sp-8);
    color: var(--ui-fg);
}
.driver-popover.mc-tour--intro .driver-popover-title {
    font-size: var(--fs-display);
}
.driver-popover.mc-tour .driver-popover-title[style*='block'] + .driver-popover-description {
    margin-top: var(--sp-1);
}
.driver-popover.mc-tour .driver-popover-description {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--ui-fg-2);
}
.driver-popover.mc-tour .driver-popover-description p {
    margin: 0;
}
.driver-popover.mc-tour .driver-popover-description b {
    font-weight: 600;
    color: var(--ui-fg);
}
/* Lista del aviso inicial: texto con icono, sin caja (como la sidebar). */
.mc-tour-list {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}
.mc-tour-list li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}
.mc-tour-list .ti {
    flex: 0 0 auto;
    font-size: 1em;
    color: var(--ui-fg-muted);
    transform: translateY(1px);
}
.mc-tour-map {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--ui-surface-2);
    border-radius: var(--radius-sm);
}
.mc-tour-map .eyebrow,
.mc-tour-was .eyebrow {
    display: block;
    margin-bottom: var(--sp-1);
}
.mc-tour-map__items {
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--ui-fg);
}
.mc-tour-map__item {
    white-space: nowrap;
}
.mc-tour-was {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--ui-border);
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--ui-fg-muted);
}
.driver-popover.mc-tour .mc-tour-hint {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: var(--fs-meta);
    color: var(--ui-fg-muted);
}
.driver-popover.mc-tour .driver-popover-footer {
    margin-top: var(--sp-4);
    gap: var(--sp-3);
}
.driver-popover.mc-tour .driver-popover-progress-text {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--ui-fg-subtle);
}
.driver-popover.mc-tour .driver-popover-navigation-btns {
    gap: var(--sp-2);
}
.driver-popover.mc-tour .driver-popover-navigation-btns button + button {
    margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
    .driver-fade .driver-overlay,
    .driver-fade .driver-popover {
        animation: none;
    }
}


/* ────────────────────────────────────────────────────────────────────
   26. GEOCODER (MapboxGeocoder dentro de un formulario)
   El plugin renderiza su propio input con estilos propios. Aquí se
   retempla para que se vea y se comporte como un `.form-control` del
   sistema. Se monta en un contenedor `.geocoder-mount`
   (`.pp-geocoder-mount` es el alias histórico de la ficha de cliente).
   ──────────────────────────────────────────────────────────────────── */
/* ─── Mapbox Geocoder · integración con Tabler ────────────────────
   El widget de MapboxGeocoder renderiza su propio input con estilos
   propios. Lo retemplado para que herede la apariencia de `.form-control`
   y se sienta nativo dentro del modal de bodega. */
.geocoder-mount,
.pp-geocoder-mount {
    width: 100%;
}
.geocoder-mount .mapboxgl-ctrl-geocoder,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder {
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    font-family: inherit;
    font-size: var(--fs-body);
    min-height: var(--control-h, 2rem);
}
.geocoder-mount .mapboxgl-ctrl-geocoder--input,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder--input {
    height: var(--control-h, 2rem);
    line-height: var(--control-h, 2rem);
    padding: 0 2.25rem;
    color: var(--tblr-body-color);
    font-size: var(--fs-body);
}
.geocoder-mount .mapboxgl-ctrl-geocoder--input:focus,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder--input:focus {
    outline: 0;
}
.geocoder-mount .mapboxgl-ctrl-geocoder:focus-within,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder:focus-within {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 .15rem var(--ui-ring);
}
.geocoder-mount .mapboxgl-ctrl-geocoder--icon-search,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder--icon-search {
    top: 50%;
    left: .6rem;
    transform: translateY(-50%);
    margin: 0;
    width: 1rem;
    height: 1rem;
    fill: var(--tblr-secondary);
}
.geocoder-mount .mapboxgl-ctrl-geocoder--button,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder--button {
    background: transparent;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
}
.geocoder-mount .mapboxgl-ctrl-geocoder--icon-close,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder--icon-close {
    fill: var(--tblr-secondary);
}
.geocoder-mount .suggestions,
.pp-geocoder-mount .suggestions {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    margin-top: .25rem;
    font-family: inherit;
}
.geocoder-mount .suggestions > li > a,
.pp-geocoder-mount .suggestions > li > a {
    color: var(--tblr-body-color);
    padding: .45rem .65rem;
    font-size: var(--fs-meta);
}
.geocoder-mount .suggestions > li > a:hover,
.pp-geocoder-mount .suggestions > li > a:hover,
.geocoder-mount .suggestions > .active > a,
.pp-geocoder-mount .suggestions > .active > a {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-primary);
}
.geocoder-mount .mapboxgl-ctrl-geocoder--powered-by,
.pp-geocoder-mount .mapboxgl-ctrl-geocoder--powered-by { display: none; }

[data-bs-theme='dark'] .geocoder-mount .mapboxgl-ctrl-geocoder,
[data-bs-theme='dark'] .pp-geocoder-mount .mapboxgl-ctrl-geocoder {
    background: var(--tblr-bg-surface);
    border-color: var(--tblr-border-color);
}
[data-bs-theme='dark'] .geocoder-mount .mapboxgl-ctrl-geocoder--input,
[data-bs-theme='dark'] .pp-geocoder-mount .mapboxgl-ctrl-geocoder--input { color: var(--tblr-body-color); }


/* ────────────────────────────────────────────────────────────────────
   27. NAVEGACIÓN VERTICAL DE SECCIÓN — `.ui-vnav`
   Tercera familia de navegación, distinta de las dos de pestañas (§11e):
   no es un filtro ni una pestaña subrayada, es un índice de secciones
   dentro de una ficha (cliente, driver). Items compactos de 32px con
   icono, agrupados bajo una etiqueta mono en mayúsculas; el activo se
   marca con fondo de acento suave, sin barra lateral ni tarjeta.

     <nav class="ui-vnav">
       <div class="ui-vnav__group">
         <div class="ui-vnav__label">Finanzas</div>
         <a href="#pane" class="ui-vnav__item active" data-bs-toggle="tab">
           <i class="ti ti-chart-bar"></i><span>Resumen</span></a>
       </div>
     </nav>

   `.side-nav-group` / `.side-nav-label` / `.side-nav-item` son los alias
   históricos de la ficha del cliente y apuntan al mismo bloque.
   ──────────────────────────────────────────────────────────────────── */
.ui-vnav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: var(--sp-3) var(--sp-2);
    background: var(--ui-surface);
    border-right: 1px solid var(--ui-border);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.ui-vnav::-webkit-scrollbar { width: 6px; }
.ui-vnav::-webkit-scrollbar-thumb { background: var(--ui-border); border-radius: 3px; }
.ui-vnav__item.is-disabled {
    color: var(--ui-fg-subtle);
    pointer-events: none;
}
.ui-vnav__item.is-disabled i { color: var(--ui-fg-faint); }

.ui-vnav__group,
.side-nav-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: .5rem;
    margin-top: .25rem;
    border-top: 0;
}
.ui-vnav__group:first-of-type,
.side-nav-group:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}
.side-nav-group-bottom {
    margin-top: auto;
}

.ui-vnav__label,
.side-nav-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ui-fg-muted);
    padding: .5rem .6rem .3rem;
    font-weight: 500;
    user-select: none;
}

.ui-vnav__item,
.side-nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 32px;
    padding: 0 .6rem;
    border-radius: var(--radius-sm);
    color: var(--ui-fg);
    font-size: var(--fs-body);
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: background .1s, color .1s;
    position: relative;
    min-width: 0;
}
.ui-vnav__item i,
.side-nav-item i {
    font-size: 1rem;
    color: var(--tblr-secondary);
    flex-shrink: 0;
    transition: color .1s;
}
.ui-vnav__item span,
.side-nav-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-vnav__item:hover,
.side-nav-item:hover {
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}
.ui-vnav__item:hover i,
.side-nav-item:hover i { color: var(--tblr-body-color); }
.ui-vnav__item:focus-visible,
.side-nav-item:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: -2px;
}
.ui-vnav__item.active,
.side-nav-item.active {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-weight: 500;
}
.ui-vnav__item.active i,
.side-nav-item.active i { color: var(--ui-accent); }