/* ============================================================
   SMP — Sociedad Mexicana de Parrilleros · Design System 1.3
   Premium SaaS · light & dark · Si.com inspired

   Estructura (única fuente de verdad — sin parches):
   - Step 1: Type scale en px absolutos (--t-9 → --t-20)
   - Step 2: Tokens semánticos por componente (--font-btn, etc.)
   - Step 3: Tabler/Bootstrap vars consumen tokens semánticos
   - Step 4: Componentes referencian tokens semánticos
   ============================================================ */

/* ============================================================
   1. INVARIANTES — brand, scale, motion (no cambian por tema)
   ============================================================ */
:root {
    /* Brand · Rojo Brasa */
    --smp-brasa: #e1261c;
    --smp-brasa-600: #c91f17;
    --smp-brasa-700: #a91913;
    --smp-brasa-300: #ff5a4d;
    --smp-brasa-rgb: 225, 38, 28;

    --smp-carbon: #0b0b0d;
    --smp-marfil: #f4efe8;
    --smp-humo: #2a2a31;
    --smp-ambar: #ff8a3d;
    --smp-arena: #c6a77a;

    /* ─── Type scale · px absolutos ─── */
    --t-9: 9px;
    --t-10: 10px;
    --t-11: 11px;
    --t-12: 12px;
    --t-13: 13px;
    --t-14: 14px;
    --t-15: 15px;
    --t-16: 16px;
    --t-18: 18px;
    --t-20: 20px;

    /* ─── Tokens semánticos · por rol ─── */
    --font-micro:       var(--t-9);    /* badges minimal, table-th */
    --font-caption:     var(--t-10);   /* labels en sidebar, hints */
    --font-meta:        var(--t-11);   /* table cells, secondary text */
    --font-body:        var(--t-12);   /* body, items, buttons, inputs, chips */
    --font-emphasis:    var(--t-13);   /* card titles, chip labels destacados */
    --font-section:     var(--t-14);   /* section headers, h3 */
    --font-page:        var(--t-15);   /* page titles, h2 */
    --font-display:     var(--t-18);   /* h1, display numbers */

    /* ─── Tokens por componente · cambias aquí, cambia en todos lados ─── */
    --font-btn:           var(--t-11);    /* botones compactos */
    --font-btn-sm:        var(--t-10);
    --font-btn-lg:        var(--t-12);
    --font-input:         var(--t-11);
    --font-table-cell:    var(--t-11);
    --font-table-head:    var(--t-10);
    --font-badge:         var(--t-10);
    --font-tab:           var(--t-11);
    --font-chip:          var(--t-11);
    --font-modal-title:   var(--t-13);
    --font-modal-body:    var(--t-12);
    --font-sidebar-item:  var(--t-12);
    --font-sidebar-label: var(--t-10);
    --font-sidebar-brand: var(--t-12);
    --font-sidebar-callout-title: var(--t-12);
    --font-sidebar-callout-body:  var(--t-10);
    --font-topbar-title:  var(--t-12);

    /* ─── Font weights · escala única ─── */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ─── Weights semánticos por rol (cambias aquí, cambia en todos lados) ─── */
    --fw-body:        var(--fw-regular);    /* body text */
    --fw-label:       var(--fw-medium);     /* form labels, items, btns, badges */
    --fw-title:       var(--fw-medium);     /* card / section titles · SLIM (= dashboard) */
    --fw-page-title:  var(--fw-semibold);   /* page titles en topbar/breadcrumb */
    --fw-display:     var(--fw-semibold);   /* KPI numbers, h1-h2, brand */

    /* Alturas de control (uniforme entre input, btn y chip topbar) */
    --h-control:    26px;     /* base · botones/inputs/chips compactos */
    --h-control-sm: 22px;
    --h-control-lg: 30px;

    /* Padding horizontal estándar */
    --pad-control-x: 9px;
    --pad-control-y: 4px;

    /* Aliases de compatibilidad (legacy uses var(--smp-text-X)) */
    --smp-text-xxs:  var(--font-micro);
    --smp-text-xs:   var(--font-caption);
    --smp-text-sm:   var(--font-meta);
    --smp-text-base: var(--font-body);
    --smp-text-md:   var(--font-emphasis);
    --smp-text-lg:   var(--font-section);
    --smp-text-xl:   var(--font-page);
    --smp-text-2xl:  var(--font-display);

    /* ─── Radii ─── */
    --smp-radius-xs:   4px;
    --smp-radius-sm:   6px;
    --smp-radius:      8px;
    --smp-radius-lg:  10px;
    --smp-radius-xl:  14px;
    --smp-radius-pill: 999px;

    /* ─── Motion ─── */
    --smp-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
    --smp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --smp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --smp-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); /* overshoot mínimo */
    --smp-dur-1: 120ms;
    --smp-dur-2: 180ms;
    --smp-dur-3: 280ms;
    --smp-dur-4: 420ms;

    /* Sombras (lift) */
    --smp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
    --smp-shadow-md: 0 4px 12px -4px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --smp-shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -4px rgba(15, 23, 42, 0.06);

    /* ─── Familia tipográfica ─── */
    --smp-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --smp-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --smp-glow: 0 0 0 3px rgba(225, 38, 28, 0.16);

    /* ─── Layout ─── */
    --smp-sidebar-width: 204px;
    --smp-topbar-height: 38px;
    --smp-content-pad: 6px;
}

/* Root anclado a 14px absoluto — sirve como unidad rem para spacing.
   Los tokens de texto son px absolutos así que el root no los afecta. */
html {
    font-size: 14px;
}

/* ---------- 2. Light theme (default) -------------------- */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* Superficies */
    --smp-canvas: #fafaf8;          /* fondo de la app (casi blanco, ligero tinte cálido) */
    --smp-surface-0: #fbfaf6;       /* sidebar */
    --smp-surface-1: #ffffff;       /* body content / wrapper */
    --smp-surface-2: #ffffff;       /* card */
    --smp-surface-3: #f4f1ea;       /* hover / raised */
    --smp-surface-4: #ffffff;       /* input */
    --smp-surface-5: #f6f4ed;       /* input raised */
    --smp-surface-overlay: rgba(255, 255, 255, 0.85);

    /* Bordes */
    --smp-border: #e8e2d4;
    --smp-border-strong: #d8d0bd;
    --smp-border-subtle: #f0ebde;

    /* Texto */
    --smp-text: #1a1a1d;
    --smp-text-muted: #6e6e76;
    --smp-text-subtle: #9b9ba2;
    --smp-text-on-brand: #ffffff;

    /* Estados (paleta Si.com / Shopify) */
    --smp-success: #1f7a4c;
    --smp-success-bg: #e3f3e8;
    --smp-success-border: #c0e0cc;

    --smp-warning: #8a5a00;
    --smp-warning-bg: #fff1d6;
    --smp-warning-border: #f4dca0;

    --smp-info: #1d4ed8;
    --smp-info-bg: #e3eaff;
    --smp-info-border: #c6d3ff;

    --smp-danger: var(--smp-brasa);
    --smp-danger-bg: #fde8e6;
    --smp-danger-border: #f5c2bd;

    --smp-neutral-bg: #f0ebde;
    --smp-neutral-border: #d8d0bd;

    /* Acento premium */
    --smp-premium: #d4ae3a;
    --smp-premium-bg: #fbf3d6;

    /* Sombras (xs/sm desactivadas globalmente; wrapper usa --smp-shadow-wrap) */
    --smp-shadow-xs: none;
    --smp-shadow-sm: none;
    /* Wrapper: drop sutil pero perceptible + highlight superior interno (neumorphic-light) */
    --smp-shadow-wrap:
        0 2px 6px rgba(17, 17, 22, 0.04),
        0 1px 2px rgba(17, 17, 22, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --smp-shadow-md: 0 4px 12px rgba(11, 11, 13, 0.06), 0 1px 2px rgba(11, 11, 13, 0.04);
    --smp-shadow-lg: 0 16px 48px rgba(11, 11, 13, 0.14);
}

/* ---------- 3. Dark theme ------------------------------- */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --smp-canvas: #0a0a0d;
    --smp-surface-0: #0d0d10;
    --smp-surface-1: #111114;
    --smp-surface-2: #15151a;
    --smp-surface-3: #1c1c22;
    --smp-surface-4: #16161c;
    --smp-surface-5: #20202a;
    --smp-surface-overlay: rgba(17, 17, 20, 0.85);

    --smp-border: #25252e;
    --smp-border-strong: #32323c;
    --smp-border-subtle: #1c1c24;

    --smp-text: #f4efe8;
    --smp-text-muted: #8e8e98;
    --smp-text-subtle: #5e5e68;

    --smp-success: #4ade80;
    --smp-success-bg: rgba(74, 222, 128, 0.12);
    --smp-success-border: rgba(74, 222, 128, 0.25);

    --smp-warning: #ffb547;
    --smp-warning-bg: rgba(255, 181, 71, 0.12);
    --smp-warning-border: rgba(255, 181, 71, 0.25);

    --smp-info: #60a5fa;
    --smp-info-bg: rgba(96, 165, 250, 0.12);
    --smp-info-border: rgba(96, 165, 250, 0.25);

    --smp-danger: var(--smp-brasa);
    --smp-danger-bg: rgba(225, 38, 28, 0.14);
    --smp-danger-border: rgba(225, 38, 28, 0.32);

    --smp-neutral-bg: rgba(255, 255, 255, 0.05);
    --smp-neutral-border: var(--smp-border);

    --smp-premium: #e9c44a;
    --smp-premium-bg: rgba(233, 196, 74, 0.14);

    --smp-shadow-xs: none;
    --smp-shadow-sm: none;
    --smp-shadow-wrap:
        0 2px 6px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --smp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --smp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ---------- 4. Tabler vars (consume tokens) ------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --tblr-font-sans-serif: var(--smp-font);
    --tblr-font-monospace: var(--smp-font-mono);
    --tblr-headings-font-family: var(--smp-font);
    --tblr-headings-font-weight: 600;
    --tblr-headings-color: var(--smp-text);
    --tblr-body-font-family: var(--smp-font);
    --tblr-body-font-size: var(--smp-text-base);
    --tblr-body-color: var(--smp-text);
    --tblr-body-bg: var(--smp-surface-1);
    --tblr-bg-surface: var(--smp-surface-1);
    --tblr-bg-surface-secondary: var(--smp-surface-3);
    --tblr-bg-surface-tertiary: var(--smp-surface-4);
    --tblr-card-bg: var(--smp-surface-2);
    --tblr-card-border-color: var(--smp-border);
    --tblr-border-color: var(--smp-border);
    --tblr-border-color-translucent: var(--smp-border);
    --tblr-border-width: 1px;
    --tblr-border-radius: var(--smp-radius-sm);
    --tblr-border-radius-sm: var(--smp-radius-xs);
    --tblr-border-radius-lg: var(--smp-radius);
    --tblr-border-radius-xl: var(--smp-radius-lg);
    --tblr-primary: var(--smp-brasa);
    --tblr-primary-rgb: var(--smp-brasa-rgb);
    --tblr-primary-fg: #ffffff;
    --tblr-secondary: var(--smp-text-muted);
    --tblr-muted: var(--smp-text-muted);
    --tblr-secondary-color: var(--smp-text-muted);
    --tblr-link-color: var(--smp-text);
    --tblr-link-hover-color: var(--smp-brasa);
}

[data-bs-theme="dark"] {
    --tblr-link-color: var(--smp-text);
    --tblr-link-hover-color: var(--smp-brasa-300);
}

/* Bootstrap rounded utilities → finas */
.rounded     { border-radius: var(--smp-radius-sm) !important; }
.rounded-1   { border-radius: var(--smp-radius-xs) !important; }
.rounded-2   { border-radius: var(--smp-radius-sm) !important; }
.rounded-3   { border-radius: var(--smp-radius) !important; }
.rounded-4   { border-radius: var(--smp-radius-lg) !important; }
.rounded-pill { border-radius: var(--smp-radius-pill) !important; }

/* ---------- 5. Base ------------------------------------- */
html {
    font-size: 87.5% !important; /* 14px base — comprime el sistema */
}
html, body {
    background-color: var(--smp-canvas);
    color: var(--smp-text);
    font-family: var(--smp-font);
    font-feature-settings: "ss01", "ss02", "cv01", "cv11";
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-size: var(--smp-text-base) !important;
}

::selection { background-color: rgba(var(--smp-brasa-rgb), 0.3); color: var(--smp-text); }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--smp-border-strong);
    border-radius: var(--smp-radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--smp-text-subtle); background-clip: padding-box; }

h1, h2, h3, h4, h5, h6 {
    color: var(--smp-text);
    letter-spacing: -0.015em;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
h1 { font-size: var(--smp-text-2xl); }
h2 { font-size: var(--smp-text-xl); }
h3 { font-size: var(--smp-text-md); font-weight: var(--fw-title); }
h4 { font-size: var(--smp-text-base); font-weight: var(--fw-title); }
h5 { font-size: var(--smp-text-sm); font-weight: var(--fw-title); }
h6 { font-size: var(--smp-text-xs); font-weight: var(--fw-title); }

/* Page header titles (h3.mb-0 inside sticky headers) */
.border-bottom > .container-fluid h3.mb-0,
.border-bottom h3.mb-0 {
    font-size: var(--smp-text-lg);
    font-weight: 600;
    letter-spacing: -0.018em;
}

a {
    color: var(--tblr-link-color);
    text-decoration: none;
    transition: color var(--smp-dur-2) var(--smp-ease);
}
a:hover { color: var(--tblr-link-hover-color); }

hr { border-color: var(--smp-border); opacity: 1; }

.text-muted, .text-secondary { color: var(--smp-text-muted) !important; }
.text-subtle { color: var(--smp-text-subtle); }

code, kbd, samp, pre {
    font-family: var(--smp-font-mono);
    color: var(--smp-text);
    font-size: 0.85em;
}

small { font-size: var(--smp-text-xs); }

.fs-1 { font-size: var(--smp-text-2xl) !important; }
.fs-2 { font-size: var(--smp-text-xl) !important; }
.fs-3 { font-size: var(--smp-text-lg) !important; }
.fs-4 { font-size: var(--smp-text-md) !important; }
.fs-5 { font-size: var(--smp-text-base) !important; }
.fs-6 { font-size: var(--smp-text-sm) !important; }

/* ---------- 6. Layout (chrome + card) ------------------- */
.page,
.page-wrapper {
    background-color: var(--smp-canvas);
}
.page-body { background-color: transparent; }

.footer {
    background-color: transparent;
    border-top: 1px solid var(--smp-border);
    color: var(--smp-text-muted);
    padding: 0.85rem 0;
    margin-top: auto;
    font-size: var(--smp-text-xs);
}

/* Page-wrapper · edge-to-edge, sin padding canvas.
   El contenido fluye directo desde el borde del sidebar al viewport. */
.page-wrapper {
    padding: 0;
    min-height: 100vh;
}

/* Override Tabler default 15rem para que coincida con sidebar */
@media (min-width: 992px) {
    .navbar-expand-lg.navbar-vertical ~ .navbar,
    .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-left: var(--smp-sidebar-width) !important;
    }
}

/* Cada vista tiene un contenedor flex.flex-column con height:100dvh.
   Layout: topbar canvas edge-to-edge arriba + content card flotando abajo. */
.page-wrapper > .d-flex.flex-column[style*="height: 100dvh"],
.page-wrapper > .d-flex.flex-column[style*="height:100dvh"] {
    background-color: var(--smp-canvas) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: 100dvh !important;
    gap: 0;
}

/* Topbar (sticky) · canvas matching el sidebar = chrome continuo en forma de L.
   border:0 global · neutraliza cualquier .border-bottom / .border-top inline
   que venga en el markup. */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > [id$="-header"],
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > div[style*="position: sticky"] {
    background-color: var(--smp-canvas) !important;
    border: 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto;
    padding-left: var(--smp-content-pad);
    padding-right: var(--smp-content-pad);
}
/* Cero borders en cualquier hijo directo del sticky header (mata Bootstrap .border-top / .border-bottom inline) */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > [id$="-header"] > *,
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > [id$="-header"] .border-top,
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > [id$="-header"] .border-bottom {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Filter collapse panel debajo del topbar */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > [id$="-header"] .collapse {
    background-color: transparent !important;
    border: 0 !important;
}

/* Content area (flex-fill) · CARD blanca.
   El topbar canvas (gris cálido) ya define el edge superior;
   el card cubre TODO lo que viene debajo (tabs incluidos, no solo la tabla).
   display:flex column → tabs en top, contenido scroll, pagination al fondo. */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > .flex-fill,
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > #table_view,
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > #content_view {
    background-color: var(--smp-surface-1) !important;
    border: 1px solid rgba(17, 17, 22, 0.04);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-wrap);
    min-height: 0;
    margin: 0 var(--smp-content-pad) var(--smp-content-pad);
    display: flex !important;
    flex-direction: column;
}
[data-bs-theme="dark"] .page-wrapper > .d-flex.flex-column[style*="100dvh"] > .flex-fill,
[data-bs-theme="dark"] .page-wrapper > .d-flex.flex-column[style*="100dvh"] > #table_view,
[data-bs-theme="dark"] .page-wrapper > .d-flex.flex-column[style*="100dvh"] > #content_view {
    border-color: rgba(255, 255, 255, 0.04);
}

/* Tables: oculto overflow para que el border-radius recorte limpio. */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > #table_view {
    overflow: hidden !important;
}

/* Form / detail views: scroll vertical interno cuando el contenido es largo. */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > #content_view {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Form / detail views: el container-fluid (con cards internas) que vive
   dentro de la card-wrapper queda transparente para no duplicar el chrome.
   flex:1 para que tome todo el alto restante debajo del row de tabs. */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > .flex-fill > .container-fluid,
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > #content_view > .container-fluid {
    background-color: transparent;
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================
   7. SIDEBAR · Si.com style, refactor limpio
   ============================================================ */

/* Container · canvas, fixed left, ancho del token */
.smp-sidebar,
.navbar-vertical.navbar-expand-lg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--smp-sidebar-width);
    min-width: var(--smp-sidebar-width);
    max-width: var(--smp-sidebar-width);
    z-index: 1030;
    background-color: var(--smp-canvas);
    border-right: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    /* overflow gestionado por .smp-sidebar-body — el contenedor no clipea
       para que dropdowns (cuenta) puedan extender su sombra hacia abajo. */
    overflow: visible;

    /* Override: el navbar de Bootstrap usa display:flex con flex-wrap.
       Para que .smp-sidebar-inner ocupe 100% en vertical, lo forzamos
       a column + stretch. */
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Page-wrapper queda con margen exacto del sidebar */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg ~ .page-wrapper,
    .smp-sidebar ~ .page-wrapper {
        margin-left: var(--smp-sidebar-width);
        padding-left: 0;
    }
}

/* Inner · ocupa 100% ancho y alto del aside */
.smp-sidebar-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

/* Bootstrap navbar legacy noise — neutralizado */
.smp-sidebar .navbar-brand,
.smp-sidebar .navbar-brand-autodark {
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

/* ─── Top row · brand chip + iconos.
   Altura = --smp-topbar-height para alinear visualmente con el topbar
   de la página (ambos viven a y=0 del viewport). ─── */
.smp-sidebar-top {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    height: var(--smp-topbar-height);
    flex: 0 0 auto;
}
.smp-brand-chip-wrap {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.smp-brand-chip {
    height: var(--h-control);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 3px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius-sm);
    box-shadow: var(--smp-shadow-xs);
    color: var(--smp-text);
    font-size: var(--font-sidebar-brand);
    font-weight: 600;
    letter-spacing: -0.008em;
    cursor: pointer;
    line-height: 1;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease);
}
.smp-brand-chip:hover {
    background-color: var(--smp-surface-3);
    border-color: var(--smp-border-strong);
}
.smp-brand-chip .smp-brand-mark {
    width: 20px;
    height: 20px;
    border-radius: var(--smp-radius-xs);
    border: 0;
}
.smp-brand-chip .smp-brand-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.smp-brand-chip .chevron {
    color: var(--smp-text-subtle);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--smp-dur-2) var(--smp-ease);
}
.smp-brand-chip[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Icon buttons en sidebar top (search, collapse, etc.) */
.smp-sidebar-icon-btn,
.smp-sidebar-collapse {
    width: var(--h-control);
    height: var(--h-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--smp-radius-sm);
    color: var(--smp-text-subtle);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease);
}
.smp-sidebar-icon-btn:hover,
.smp-sidebar-collapse:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-sidebar-icon-btn .ti,
.smp-sidebar-collapse .ti { font-size: 13px; }

/* ─── Brand dropdown menu ─── */
.smp-brand-menu {
    width: 220px;
    border-radius: var(--smp-radius);
    border: 1px solid var(--smp-border);
    background-color: var(--smp-surface-2);
    box-shadow: var(--smp-shadow-lg);
    padding: 4px;
    margin-top: 4px;
}
.smp-brand-menu-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 8px;
}
.smp-brand-menu-title {
    font-size: var(--font-emphasis);
    font-weight: 600;
    color: var(--smp-text);
    line-height: 1.2;
    letter-spacing: -0.012em;
}
.smp-brand-menu-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.smp-brand-menu-foot {
    font-size: var(--font-micro);
    color: var(--smp-text-subtle);
    text-align: center;
    padding: 4px 8px;
}

/* Brand mark · avatar */
.smp-brand-mark {
    width: 24px;
    height: 24px;
    border-radius: var(--smp-radius-sm);
    background-color: var(--smp-surface-3);
    border: 1px solid var(--smp-border);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.smp-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.smp-brand-mark--sm { width: 20px; height: 20px; }

/* Status dot */
.smp-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--smp-success);
    box-shadow: 0 0 0 2px rgba(31, 122, 76, 0.16);
    flex-shrink: 0;
    display: inline-block;
}
[data-bs-theme="dark"] .smp-status-dot {
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.16);
}

/* ─── Body · contiene nav + callout, scroll si overflow ─── */
.smp-sidebar-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    padding: 0;
    overflow-y: auto;
    min-height: 0;
}

.smp-nav {
    display: flex;
    flex-direction: column;
    padding: 2px 6px 6px;
    gap: 1px;
    flex: 1 1 auto;
}

.smp-nav-section-label {
    font-size: var(--font-sidebar-label);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--smp-text-subtle);
    padding: 10px 6px 2px;
    line-height: 1;
}
.smp-nav > .smp-nav-section-label:first-child {
    padding-top: 2px;
}

/* Items */
.smp-nav .nav-link,
.navbar-vertical .nav-link {
    height: var(--h-control);
    color: var(--smp-text);
    border-radius: var(--smp-radius-sm);
    padding: 0 6px;
    font-size: var(--font-sidebar-item);
    font-weight: 500;
    position: relative;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease);
}
.smp-nav .nav-link:hover,
.navbar-vertical .nav-link:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-nav .nav-link .nav-link-icon,
.navbar-vertical .nav-link .nav-link-icon {
    color: var(--smp-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.smp-nav .nav-link .nav-link-icon .ti,
.navbar-vertical .nav-link .nav-link-icon .ti { font-size: 14px; }
.smp-nav .nav-link:hover .nav-link-icon,
.smp-nav .nav-link.current .nav-link-icon,
.navbar-vertical .nav-link:hover .nav-link-icon,
.navbar-vertical .nav-link.current .nav-link-icon { color: var(--smp-text); }

.smp-nav .nav-link .nav-link-title,
.navbar-vertical .nav-link .nav-link-title {
    font-weight: 500;
    letter-spacing: -0.003em;
    flex: 1 1 auto;
    text-align: left;
}
.smp-nav .nav-link .nav-link-icon .icon,
.smp-nav .nav-link .nav-link-icon svg,
.navbar-vertical .nav-link .nav-link-icon .icon,
.navbar-vertical .nav-link .nav-link-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
}

/* Badge a la derecha · counts, Beta, etc */
.smp-nav-badge {
    font-size: var(--font-micro);
    color: var(--smp-text-muted);
    font-weight: 500;
    padding: 1px 6px;
    border-radius: var(--smp-radius-pill);
    background-color: var(--smp-neutral-bg);
    border: 1px solid var(--smp-neutral-border);
    line-height: 1.4;
}
.smp-nav-badge--accent {
    color: var(--smp-info);
    background-color: var(--smp-info-bg);
    border-color: var(--smp-info-border);
}

/* Estado activo · Linear/Notion (fill subtle, sin border ni shadow) */
.nav-link.current::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--smp-surface-3);
    border: 0;
    border-radius: var(--smp-radius-sm);
    box-shadow: none;
    z-index: 0;
}
[data-bs-theme="dark"] .nav-link.current::before {
    background-color: var(--smp-surface-3);
}
.nav-link > * { position: relative; z-index: 1; }
.nav-link.current,
.current * { color: var(--smp-text); }

/* Dropdown del usuario en sidebar (legacy) */
.navbar-brand .dropdown-menu {
    background-color: var(--smp-surface-2);
    border: 1px solid var(--smp-border);
    box-shadow: var(--smp-shadow-lg);
    color: var(--smp-text);
    padding: 0.3rem;
    border-radius: var(--smp-radius);
    font-size: var(--smp-text-sm);
}

.dropdown-divider { border-color: var(--smp-border); opacity: 1; margin: 0.3rem 0; }

.dropdown-item {
    color: var(--smp-text);
    border-radius: var(--smp-radius-xs);
    padding: 0.4rem 0.55rem;
    font-size: var(--smp-text-sm);
    transition: background-color var(--smp-dur-1) var(--smp-ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.dropdown-menu { font-size: var(--smp-text-sm); }

/* ---------- 8. Page header / breadcrumb ----------------- */
.page-header,
.page-title {
    font-size: var(--smp-text-xl);
    font-weight: 600;
    color: var(--smp-text);
    letter-spacing: -0.018em;
}
.page-pretitle {
    color: var(--smp-text-muted);
    text-transform: uppercase;
    font-size: var(--smp-text-xs);
    letter-spacing: 0.08em;
}
.breadcrumb { font-size: var(--smp-text-sm); }
.breadcrumb a { color: var(--smp-text-muted); }
.breadcrumb a:hover { color: var(--smp-text); }
.breadcrumb-item.active { color: var(--smp-text); }

/* ---------- 9. Cards ------------------------------------ */
.card {
    background-color: var(--smp-surface-2);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-xs);
    color: var(--smp-text);
    transition:
        border-color var(--smp-dur-2) var(--smp-ease),
        box-shadow var(--smp-dur-2) var(--smp-ease);
}
.card:hover {
    border-color: var(--smp-border-strong);
}

/* Card header / body / footer · compact p-2 (8px uniforme) */
.card-header,
.card-footer,
.card .card-header,
.card .card-footer {
    background-color: transparent;
    border-color: var(--smp-border);
    color: var(--smp-text);
    padding: 8px !important;
    min-height: 0;
}
.card-title,
.card-subtitle {
    color: var(--smp-text);
    font-size: var(--smp-text-md);
    font-weight: var(--fw-title);       /* 500 · slim */
    margin-bottom: 0.15rem;
}
.card-subtitle { color: var(--smp-text-muted); font-weight: var(--fw-body); font-size: var(--smp-text-sm); }
.card-body,
.card .card-body { padding: 8px !important; }

/* ---------- 10. Botones · semántico, sin parches ----------
   Base = altura uniforme con el control control h (28px), padding
   horizontal de --pad-control-x. font-size único en --font-btn.
   No usar !important · todo cae bien por orden de carga. */
.btn {
    height: var(--h-control);
    min-height: var(--h-control);
    border-radius: var(--smp-radius-sm);
    font-weight: 500;
    font-size: var(--font-btn);
    padding: 0 var(--pad-control-x);
    letter-spacing: -0.003em;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease),
        box-shadow var(--smp-dur-2) var(--smp-ease),
        transform var(--smp-dur-1) var(--smp-ease);
    border: 1px solid transparent;
    line-height: 1;
    box-shadow: var(--smp-shadow-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus,
.btn:focus-visible { outline: none; box-shadow: var(--smp-glow); }
.btn-sm { height: var(--h-control-sm); min-height: var(--h-control-sm); font-size: var(--font-btn-sm); padding: 0 8px; }
.btn-lg { height: var(--h-control-lg); min-height: var(--h-control-lg); font-size: var(--font-btn-lg); padding: 0 14px; }

/* Primary · marca flat */
.btn-primary,
.btn-danger,
.bg-github,
.btn.bg-github {
    background-color: var(--smp-brasa);
    color: #fff !important;
    border-color: var(--smp-brasa);
}
.btn-primary:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.bg-github:hover,
.btn.bg-github:hover {
    background-color: var(--smp-brasa-600);
    color: #fff !important;
    border-color: var(--smp-brasa-600);
}
.btn-primary:disabled,
.btn-danger:disabled {
    background-color: rgba(225, 38, 28, 0.4);
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: transparent;
    cursor: not-allowed;
}

/* Secondary · neutral · default */
.btn-secondary,
.btn-default,
.btn:not([class*="btn-"]) {
    background-color: var(--smp-surface-2);
    color: var(--smp-text);
    border-color: var(--smp-border);
}
.btn-secondary:hover:not(:disabled),
.btn-default:hover:not(:disabled),
.btn:not([class*="btn-"]):hover:not(:disabled) {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
    border-color: var(--smp-border-strong);
}

/* Ghost */
.btn-ghost,
.btn-transparent,
.btn-link,
.btn.btn-link {
    background-color: transparent;
    color: var(--smp-text);
    border-color: transparent;
    box-shadow: none;
}
.btn-link { text-decoration: none; }
.btn-ghost:hover:not(:disabled),
.btn-transparent:hover:not(:disabled),
.btn-link:hover:not(:disabled) {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
    text-decoration: none;
}

/* Outline */
.btn-outline-primary {
    background-color: transparent;
    color: var(--smp-brasa);
    border-color: rgba(var(--smp-brasa-rgb), 0.45);
}
.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--smp-danger-bg);
    color: var(--smp-brasa);
    border-color: var(--smp-brasa);
}
.btn-outline-secondary {
    background-color: transparent;
    color: var(--smp-text);
    border-color: var(--smp-border-strong);
}
.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.btn-outline-danger {
    background-color: transparent;
    color: var(--smp-brasa);
    border-color: rgba(var(--smp-brasa-rgb), 0.45);
}
.btn-outline-danger:hover:not(:disabled) {
    background-color: var(--smp-danger-bg);
    color: var(--smp-brasa);
    border-color: var(--smp-brasa);
}

/* Success → mantiene marca */
.btn-success {
    background-color: var(--smp-brasa);
    color: #fff !important;
    border-color: var(--smp-brasa);
}
.btn-success:hover:not(:disabled) {
    background-color: var(--smp-brasa-600);
    border-color: var(--smp-brasa-600);
}

.link-secondary { color: var(--smp-text-muted) !important; }
.link-secondary:hover { color: var(--smp-text) !important; }

.bg-github-lt,
.btn.bg-github-lt {
    background-color: var(--smp-surface-2) !important;
    color: var(--smp-text) !important;
    border-color: var(--smp-border) !important;
}
.bg-github-lt:hover,
.btn.bg-github-lt:hover {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text) !important;
}

.btn .ti { line-height: 1; }

/* Botón icon-only compacto */
.btn.px-2 {
    padding-left: 0.42rem !important;
    padding-right: 0.42rem !important;
}

/* ---------- 11. Inputs ---------------------------------- */
.form-label,
.form-check-label {
    color: var(--smp-text);
    font-weight: 500;
    font-size: var(--smp-text-sm);
    margin-bottom: 0.3rem;
    letter-spacing: -0.003em;
}
.form-label-description a {
    color: var(--smp-brasa);
    font-weight: 500;
    font-size: var(--smp-text-xs);
}
.form-hint,
small.form-hint {
    color: var(--smp-text-muted);
    font-size: var(--smp-text-xs);
}

.form-control,
.form-select,
textarea.form-control {
    height: var(--h-control);
    min-height: var(--h-control);
    background-color: var(--smp-surface-4);
    color: var(--smp-text);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius-sm);
    padding: 0 var(--pad-control-x);
    font-size: var(--font-input);
    line-height: 1.3;
    transition:
        border-color var(--smp-dur-2) var(--smp-ease),
        background-color var(--smp-dur-2) var(--smp-ease),
        box-shadow var(--smp-dur-2) var(--smp-ease);
    box-shadow: var(--smp-shadow-xs);
}
textarea.form-control {
    height: auto;
    min-height: 64px;
    padding: 6px var(--pad-control-x);
    line-height: 1.4;
}
.form-control::placeholder { color: var(--smp-text-subtle); }
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--smp-border-strong);
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background-color: var(--smp-surface-4) !important;
    border-color: var(--smp-brasa);
    color: var(--smp-text);
    box-shadow: var(--smp-glow);
    outline: none;
}
.form-control:disabled,
.form-control[readonly]:not(.flatpickr-alt-input),
.form-select:disabled {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text-muted);
    cursor: not-allowed;
}
/* Inputs de fecha (flatpickr): son readonly por diseño —el usuario solo elige por
   el calendario— pero deben verse como un input normal, no deshabilitado. */
.form-control.flatpickr-alt-input[readonly] {
    cursor: pointer;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 12px 12px;
    padding-right: 1.85rem !important;
}
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

textarea.form-control {
    min-height: 4.5rem;
    resize: vertical;
}

.input-group-text {
    background-color: var(--smp-surface-4);
    border-color: var(--smp-border);
    color: var(--smp-text-muted);
    border-radius: var(--smp-radius-sm);
    font-size: var(--smp-text-sm);
}
.input-icon .input-icon-addon { color: var(--smp-text-subtle); }
.input-group-flat .input-group-text { background-color: var(--smp-surface-4); }

.form-check-input {
    background-color: var(--smp-surface-4);
    border: 1px solid var(--smp-border-strong);
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease),
        box-shadow var(--smp-dur-2) var(--smp-ease);
}
.form-check-input:focus { box-shadow: var(--smp-glow); border-color: var(--smp-brasa); }
.form-check-input:checked {
    background-color: var(--smp-brasa);
    border-color: var(--smp-brasa);
}

.form-switch .form-check-input { width: 2rem; height: 1.1rem; }

.invalid-feedback { color: var(--smp-brasa); font-size: var(--smp-text-xs); }
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--smp-brasa);
    box-shadow: var(--smp-glow);
}

/* Brand · Shopify · logo oficial inline (multicolor) */
.smp-brand-shopify {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 292' preserveAspectRatio='xMidYMid'%3E%3Cpath d='M223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357-1.055-.088-23.383-1.743-23.383-1.743s-15.507-15.395-17.209-17.099c-1.703-1.703-5.029-1.185-6.32-.805-.19.056-3.388 1.043-8.678 2.68-5.18-14.906-14.322-28.604-30.405-28.604-.444 0-.901.018-1.358.044C129.31 3.407 123.644.779 118.75.779c-37.465 0-55.364 46.835-60.976 70.635-14.558 4.511-24.9 7.718-26.221 8.133-8.126 2.549-8.383 2.805-9.45 10.462C21.3 95.806.038 260.235.038 260.235l165.678 31.042 89.77-19.42S223.973 58.8 223.775 57.34zM156.49 40.848l-14.019 4.339c.005-.988.01-1.96.01-3.023 0-9.264-1.286-16.723-3.349-22.636 8.287 1.04 13.806 10.469 17.358 21.32zm-27.638-19.483c2.304 5.773 3.802 14.058 3.802 25.238 0 .572-.005 1.095-.01 1.624-9.117 2.824-19.024 5.89-28.953 8.966 5.575-21.516 16.025-31.908 25.161-35.828zm-11.131-10.537c1.617 0 3.246.549 4.805 1.622-12.007 5.65-24.877 19.88-30.312 48.297l-22.886 7.088C75.694 46.16 90.81 10.828 117.72 10.828z' fill='%2395BF46'/%3E%3Cpath d='M221.237 54.983c-1.055-.088-23.383-1.743-23.383-1.743s-15.507-15.395-17.209-17.099c-.637-.634-1.496-.959-2.394-1.099l-12.527 256.233 89.762-19.418S223.972 58.8 223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357' fill='%235E8E3E'/%3E%3Cpath d='M135.242 104.585l-11.069 32.926s-9.698-5.176-21.586-5.176c-17.428 0-18.305 10.937-18.305 13.693 0 15.038 39.2 20.8 39.2 56.024 0 27.713-17.577 45.558-41.277 45.558-28.44 0-42.984-17.7-42.984-17.7l7.615-25.16s14.95 12.835 27.565 12.835c8.243 0 11.596-6.49 11.596-11.232 0-19.616-32.16-20.491-32.16-52.724 0-27.129 19.472-53.382 58.778-53.382 15.145 0 22.627 4.338 22.627 4.338' fill='%23FFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* TomSelect FOUC prevention.
   Los <select> nativos con form-control/form-select se ven brevemente con su
   apariencia nativa antes de que TomSelect corra y los reemplace con .ts-wrapper.
   Para evitar ese flash: arrancan invisibles y se revelan tras 250ms.
   - Si TomSelect los procesa antes (caso típico, <50ms), gana .tomselected,
     esta regla deja de aplicar y TomSelect oculta el original con su propio CSS.
   - Si NO se convierten (select nativo legítimo), aparecen al cumplirse 250ms. */
select.form-select:not(.tomselected),
select.form-control:not(.tomselected) {
    opacity: 0;
    animation: smp-select-reveal 1ms 250ms forwards;
}
@keyframes smp-select-reveal {
    to { opacity: 1; }
}

/* TomSelect skin · REGLA: el wrapper ES el control visible.
   TomSelect copia la clase del <select> original al wrapper. Si el original
   tenía .form-select, el wrapper también tiene .form-select y por tanto hereda
   bg/border/shadow/height de la regla `.form-control, .form-select` arriba.
   El .ts-control interno es solo layout (display flex que contiene items + input).
   No le ponemos bg, border ni shadow para evitar doble caja visual. */

/* Solo limpiamos el chevron del background-image que .form-select trae por default
   (la flecha de dropdown nativa no aplica para TomSelect). */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
    background-image: none !important;
    padding-left: var(--pad-control-x) !important;
    padding-right: var(--pad-control-x) !important;
}

/* .ts-control: solo layout. NADA de visual. */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.has-items .ts-control,
.ts-control {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    color: var(--smp-text) !important;
    font-size: inherit;
    transition: none !important;
}

/* Hover/focus en el WRAPPER (que es el control visible), no en .ts-control. */
.ts-wrapper.form-select:hover:not(.disabled):not(.focus),
.ts-wrapper.form-control:hover:not(.disabled):not(.focus) {
    border-color: var(--smp-border-strong) !important;
}
.ts-wrapper.focus.form-select,
.ts-wrapper.focus.form-control {
    border-color: var(--smp-brasa) !important;
    box-shadow: var(--smp-glow) !important;
    outline: none !important;
}
.ts-wrapper.disabled.form-select,
.ts-wrapper.disabled.form-control {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text-muted) !important;
    cursor: not-allowed !important;
}

/* Multi-select: padding interno del .ts-control para que los chips de items
   no se peguen al border del wrapper. */
.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.has-items .ts-control {
    padding: 2px 0 !important;
    min-height: 0 !important;
}
.ts-control input {
    color: var(--smp-text) !important;
    font-size: var(--smp-text-sm);
    /* Reset del input nativo dentro del .ts-control para que no se vea el
       borde/outline del user-agent — TomSelect en algunos contextos no lo
       limpia y se nota como una "caja interna" detrás del placeholder. */
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.ts-control input::placeholder { color: var(--smp-text-muted) !important; }
/* Single-select: evita que el input salte a una segunda línea cuando el item es largo.
   Tom Select por default pone min-width: 7rem al <input>, lo que fuerza wrap si el item es ancho. */
.ts-wrapper.single .ts-control {
    flex-wrap: nowrap !important;
}
.ts-wrapper.single .ts-control > .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ts-wrapper.single.has-items:not(.input-active) .ts-control > input {
    min-width: 0 !important;
    flex: 0 1 4px !important;
    width: 4px !important;
}
.ts-dropdown {
    background-color: var(--smp-surface-2);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-lg);
    color: var(--smp-text);
    padding: 0.3rem;
    font-size: var(--smp-text-sm);
    /* Bootstrap modal está en z-index 1055/1060. Cuando se usa
       dropdownParent: "body" en TomSelect dentro de un modal, el dropdown
       se renderiza fuera del .modal-content y necesita un z-index superior
       para no quedar atrás. */
    z-index: 1080;
}
.ts-dropdown .option {
    border-radius: var(--smp-radius-xs);
    padding: 0.4rem 0.55rem;
    color: var(--smp-text);
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.ts-dropdown .option.selected {
    background-color: var(--smp-danger-bg);
    color: var(--smp-text);
}
.ts-wrapper.multi .ts-control > div {
    background-color: var(--smp-danger-bg);
    color: var(--smp-brasa);
    border: 1px solid var(--smp-danger-border);
    border-radius: var(--smp-radius-xs);
}

.pac-container {
    background-color: var(--smp-surface-2);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-lg);
    color: var(--smp-text);
    padding: 0.25rem;
    margin-top: 4px;
}
.pac-item {
    border: 0;
    border-radius: var(--smp-radius-xs);
    cursor: pointer;
    color: var(--smp-text);
    padding: 0.4rem 0.6rem;
    font-size: var(--smp-text-sm);
}
.pac-item-query { color: var(--smp-text); }
.pac-item:hover, .pac-item-selected { background-color: var(--smp-surface-3); }

/* ---------- 12. Tablas ---------------------------------- */
.table {
    --tblr-table-bg: transparent;
    --tblr-table-color: var(--smp-text);
    --tblr-table-border-color: var(--smp-border);
    --tblr-table-striped-bg: transparent;
    --tblr-table-hover-bg: var(--smp-surface-3);
    color: var(--smp-text);
    border-color: var(--smp-border);
    margin-bottom: 0 !important;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom-color: var(--smp-border-subtle);
    box-shadow: none;
}

/* HEADER · transparente para no generar bandas visibles */
.table thead th,
.table > thead > tr > th {
    background-color: transparent;
    color: var(--smp-text-muted);
    text-transform: capitalize;
    letter-spacing: 0;
    font-size: var(--font-table-head);
    font-weight: 500;
    border-top: 0;
    border-bottom: 1px solid var(--smp-border);
    padding: 8px 12px;
    line-height: 1.2;
    white-space: nowrap;
}
.table thead th .ti,
.table thead th svg { width: 12px !important; height: 12px !important; opacity: 0.7; }

/* Quita el border doble de table-bordered */
.table.table-bordered,
.table-bordered > :not(caption) > * > * {
    border-color: var(--smp-border-subtle) !important;
}
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0 !important; }

.table tbody tr {
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.table-hover tbody tr:hover,
.table-hover > tbody > tr:hover > * {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text);
}
.table.card-table { background-color: transparent; }

.table td {
    padding: 8px 12px;
    font-size: var(--font-table-cell);
    color: var(--smp-text);
    vertical-align: middle;
    line-height: 1.35;
}
.table th {
    padding-left: 12px;
    padding-right: 12px;
}
/* DataTables hereda los mismos tokens · sin !important */
.dataTables_wrapper td { font-size: var(--font-table-cell); }
.dataTables_wrapper thead th,
.dataTables_wrapper .dataTables_scrollHead th { font-size: var(--font-table-head); }

/* DataTables · wrapper flex column → paginación SIEMPRE pegada al fondo de la card */
.dataTables_wrapper {
    color: var(--smp-text);
    display: flex !important;
    flex-direction: column;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    /* contexto de posicionamiento para .dataTables_processing (chip absoluto) */
    position: relative;
}
.dataTables_scroll {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    min-height: 0;
    /* flex column: head fijo arriba, body toma el resto y hace scroll Y */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.dataTables_scroll > .dataTables_scrollHead {
    flex: 0 0 auto;
}
.dataTables_scroll > .dataTables_scrollBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
}

/* Scroll affordance: gradient en el borde inferior del scrollBody
   cuando hay más contenido debajo. Se desvanece al llegar al fondo. */
.dataTables_scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.7) 55%,
        rgba(255, 255, 255, 0.96) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms var(--smp-ease);
    z-index: 2;
}
.dataTables_scroll.smp-has-overflow:not(.smp-scrolled-to-bottom)::after {
    opacity: 1;
}
[data-bs-theme="dark"] .dataTables_scroll::after {
    background: linear-gradient(to bottom,
        rgba(17, 17, 20, 0) 0%,
        rgba(17, 17, 20, 0.65) 55%,
        rgba(17, 17, 20, 0.95) 100%);
}
.dataTables_wrapper .bottom-table,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    flex: 0 0 auto;
}

/* Bottom row · wrapper de page-size + paginación.
   El dom de DataTables se cambió a 'rt<"smp-table-foot"lp>' para envolver
   ambos elementos en un div con flex row. */
.smp-table-foot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-top: 1px solid var(--smp-border-subtle);
    background-color: var(--smp-surface-1);
    width: 100%;
    flex: 0 0 auto;
    border-bottom-left-radius: var(--smp-radius);
    border-bottom-right-radius: var(--smp-radius);
}
.smp-table-foot .dataTables_length,
.smp-table-foot .dataTables_paginate,
.smp-table-foot .dataTables_info {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.smp-table-foot .dataTables_length select {
    margin: 0 4px;
}
.smp-table-foot .pagination {
    margin: 0;
}
.smp-table-foot .smp-table-foot-info {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    font-variant-numeric: tabular-nums;
    margin-right: auto;
    padding-right: 12px;
    line-height: 1;
}

/* scrollHead y scrollBody comparten el mismo overflow horizontal cuando
   scrollX:true, así el header se "corta" donde se corta el body. */
.dataTables_scrollHead,
.dataTables_scrollBody {
    width: 100% !important;
}
.dataTables_scrollBody {
    overflow-x: auto !important;       /* scrollbar horizontal visible */
}
.dataTables_scrollHead {
    overflow: hidden !important;       /* el header sincroniza con el body via JS */
}

.dataTables_scrollHead {
    background-color: var(--smp-surface-1) !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
.dataTables_scrollHeadInner,
.dataTables_scrollHead table {
    background-color: transparent !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
.dataTables_scrollHead tr { border-bottom: 0 !important; }

.dataTables_scrollBody {
    background-color: transparent !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.dataTables_scrollBody > table { margin-top: 0 !important; }

div.dts div.dt-scroll-body,
div.dts div.dataTables_scrollBody,
div.dts div.dt-scroll-body table,
div.dts div.dataTables_scrollBody table {
    background: transparent !important;
}

/* Indicador "Procesando" para DataTables (server-side AJAX).
   Chip discreto fijo arriba del wrapper. No usamos !important sobre display
   para que el display:none inline que pone DataTables al ocultar gane sin
   peleas — sólo aplicamos el layout cuando display:block está activo. */
.dataTables_processing {
    /* base: el texto nativo queda oculto, el resto del estilo se activa
       únicamente con el atributo style="display: block" inline */
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 1;
    color: transparent;
    pointer-events: none;
}

/* DataTables 1.x inyecta sus propios hijos (un div con el texto y otro con
   4 puntos animados). Los ocultamos para que sólo se vea nuestro chip
   compuesto por los pseudo-elementos ::before y ::after. */
.dataTables_processing > * {
    display: none !important;
}

.dataTables_processing[style*="display: block"],
.dataTables_processing[style*="display:block"] {
    position: absolute;
    /* anclado al inicio del scrollBody (debajo del header, ~29-32px de alto)
       con un colchón de 8-10px para que respire sobre las primeras filas */
    top: calc(var(--smp-dt-head-h, 32px) + 10px);
    left: 50%;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    /* anula los margenes de centrado que el CSS de DataTables aplica
       (margin-left: -100px; margin-top: -26px) — ya no aplican con auto width */
    margin: 0;
    transform: translateX(-50%);
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: var(--smp-radius-pill);
    background: var(--smp-surface-2);
    border: 1px solid var(--smp-border-subtle);
    box-shadow:
        0 6px 18px rgba(11, 11, 13, 0.06),
        0 1px 2px rgba(11, 11, 13, 0.04);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
            backdrop-filter: saturate(140%) blur(8px);
    opacity: 0;
    z-index: 30;
    /* delay corto: si la respuesta tarda <120ms ni se ve aparecer */
    animation: smp-proc-in var(--smp-dur-3) var(--smp-ease-out) 120ms forwards;
}

.dataTables_processing::before {
    content: '';
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-radius: 50%;
    border: 2px solid var(--smp-surface-3);
    border-top-color: var(--smp-brasa);
    animation: smp-proc-spin 720ms linear infinite;
}

.dataTables_processing::after {
    content: 'Procesando';
    font-size: var(--smp-text-xs);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: 0.02em;
}

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

@keyframes smp-proc-in {
    to { opacity: 1; }
}

.dataTables_paginate { padding-top: 0.5rem !important; }
.dataTables_paginate .pagination {
    margin-bottom: 0;
    justify-content: flex-end;
    gap: 3px;
}
.page-link {
    background-color: transparent;
    border: 1px solid var(--smp-border);
    color: var(--smp-text-muted);
    border-radius: var(--smp-radius-xs) !important;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease);
    padding: 0.25rem 0.55rem;
    font-size: var(--smp-text-xs);
}
.page-link:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
    border-color: var(--smp-border-strong);
}
.page-link.active,
.active > .page-link {
    background-color: var(--smp-brasa) !important;
    border-color: var(--smp-brasa) !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    color: var(--smp-text-subtle);
    background-color: transparent;
    border-color: var(--smp-border-subtle);
}

.dataTables_length,
.dataTables_info,
.dataTables_filter {
    color: var(--smp-text-muted);
    font-size: var(--smp-text-xs);
}
.dataTables_length { display: flex; align-items: center; }
.dataTables_length select,
.dataTables_filter input {
    background-color: var(--smp-surface-4);
    border: 1px solid var(--smp-border);
    color: var(--smp-text);
    border-radius: var(--smp-radius-xs);
    padding: 0.22rem 0.5rem !important;
    font-size: var(--smp-text-xs);
}

.bottom-table {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem 0 0.9rem !important;
    margin-top: 0.4rem !important;
}
.bottom-table .form-select {
    border-radius: var(--smp-radius-xs) !important;
    padding: 0.28rem 1.4rem 0.28rem 0.55rem !important;
    font-size: var(--smp-text-xs);
}

#products-table > thead > tr > th {
    background-color: transparent !important;
    color: var(--smp-text-muted) !important;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- 13. Tabs (Bootstrap nav-tabs) -------------- */
.nav-tabs { border-bottom: 1px solid var(--smp-border); }
.nav-tabs .nav-link {
    color: var(--smp-text-muted);
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--smp-radius-xs) var(--smp-radius-xs) 0 0;
    padding: 0.45rem 0.85rem;
    font-size: var(--smp-text-sm);
    font-weight: 500;
    transition:
        color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease);
}
.nav-tabs .nav-link:hover {
    color: var(--smp-text);
    border-bottom-color: var(--smp-border-strong);
}
.nav-tabs .nav-link.active {
    color: var(--smp-text) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom-color: var(--smp-brasa) !important;
}

.card-header-tabs { background-color: transparent; font-weight: 500; }
.card-header-tabs .nav-link.active {
    background-color: transparent !important;
    border-width: 0 0 2px 0 !important;
    border-bottom-color: var(--smp-brasa) !important;
    color: var(--smp-text) !important;
}
.card-header-tabs .nav-link:hover {
    background-color: transparent !important;
    border-width: 0 0 2px 0 !important;
    border-bottom-color: var(--smp-border-strong) !important;
    color: var(--smp-text) !important;
}

/* Tabs canónicas del sistema · segmented control (Linear/Notion style).
   Container tinted, active tab "lifted" sobre surface-1. Sirve tanto para
   Bootstrap nav-tabs como para tablistas custom (data-segment / data-panel). */
ul.new-tabs,
.new-tabs {
    background-color: var(--smp-surface-3) !important;
    border: 1px solid var(--smp-border-subtle) !important;
    border-radius: var(--smp-radius-sm) !important;
    padding: 2px !important;
    gap: 2px;
    display: inline-flex !important;
    width: auto !important;
    font-size: var(--font-body) !important;
    line-height: 1.3;
    margin: 0;
}
ul.new-tabs[data-bs-toggle="tabs"] { border: 1px solid var(--smp-border-subtle) !important; }
ul.new-tabs .nav-item,
.new-tabs .nav-item {
    list-style: none;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0;
}
ul.new-tabs .nav-link,
.new-tabs .nav-link {
    color: var(--smp-text-muted) !important;
    border: 0 !important;
    border-radius: var(--smp-radius-xs) !important;
    padding: 4px 10px !important;
    font-size: var(--font-body) !important;
    font-weight: 500;
    background-color: transparent !important;
    height: auto;
    line-height: 1.3;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease);
}
ul.new-tabs .nav-link:hover,
.new-tabs .nav-link:hover {
    background-color: transparent !important;
    color: var(--smp-text) !important;
}
ul.new-tabs .nav-link.active,
.new-tabs .nav-link.active {
    background-color: var(--smp-surface-1) !important;
    color: var(--smp-text) !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(11, 11, 13, 0.06);
}
ul.new-tabs .nav-link .ti,
.new-tabs .nav-link .ti { font-size: 13px; }
ul.new-tabs .nav-link .badge,
ul.new-tabs .nav-link .new-tabs-count,
.new-tabs .nav-link .badge,
.new-tabs .nav-link .new-tabs-count {
    margin-left: 2px;
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
ul.new-tabs .nav-link.active .new-tabs-count,
.new-tabs .nav-link.active .new-tabs-count { color: var(--smp-text-muted); }
ul.new-tabs[data-bs-toggle="tabs"] .nav-link.active::before { content: none !important; }

/* Modifier · tabs ocupan 100% ancho con columnas iguales */
ul.new-tabs.is-fill,
.new-tabs.is-fill {
    display: flex !important;
    width: 100% !important;
}
ul.new-tabs.is-fill .nav-item,
.new-tabs.is-fill .nav-item {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
}
ul.new-tabs.is-fill .nav-link,
.new-tabs.is-fill .nav-link {
    width: 100%;
    justify-content: center;
}

.nav-tabs.flex-column .nav-link {
    border-radius: var(--smp-radius-sm);
    color: var(--smp-text-muted);
    background-color: transparent;
    border: 1px solid transparent;
    margin-bottom: 2px;
}
.nav-tabs.flex-column .nav-link:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.nav-tabs.flex-column .nav-link.active {
    background-color: var(--smp-surface-3);
    color: var(--smp-text) !important;
    border-color: var(--smp-border) !important;
    border-bottom-color: var(--smp-border) !important;
}

/* ---------- 14. Badges (chips estilo Si.com) ------------ */
.badge {
    font-weight: 500;
    font-size: var(--font-badge);
    padding: 2px 7px;
    border-radius: var(--smp-radius-xs);
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--smp-neutral-border);
    background-color: var(--smp-neutral-bg);
    color: var(--smp-text);
    line-height: 1.5;
}

.bg-success-lt,
.badge.bg-success-lt {
    background-color: var(--smp-success-bg) !important;
    color: var(--smp-success) !important;
    border-color: var(--smp-success-border) !important;
}
.bg-warning-lt,
.badge.bg-warning-lt {
    background-color: var(--smp-warning-bg) !important;
    color: var(--smp-warning) !important;
    border-color: var(--smp-warning-border) !important;
}
.bg-danger-lt,
.badge.bg-danger-lt,
.bg-primary-lt,
.badge.bg-primary-lt {
    background-color: var(--smp-danger-bg) !important;
    color: var(--smp-brasa) !important;
    border-color: var(--smp-danger-border) !important;
}
[data-bs-theme="dark"] .bg-danger-lt,
[data-bs-theme="dark"] .bg-primary-lt {
    color: var(--smp-brasa-300) !important;
}
.bg-info-lt,
.badge.bg-info-lt {
    background-color: var(--smp-info-bg) !important;
    color: var(--smp-info) !important;
    border-color: var(--smp-info-border) !important;
}
.bg-secondary-lt,
.badge.bg-secondary-lt {
    background-color: var(--smp-neutral-bg) !important;
    color: var(--smp-text-muted) !important;
    border-color: var(--smp-neutral-border) !important;
}

/* Homogenización: badges sólidos (.bg-success, .bg-warning, .bg-danger, etc.)
   se renderizan con el mismo estilo slim que los .bg-*-lt para no romper
   con colores planos saturados. Esto NO afecta a otros componentes que usan
   esas clases (avatars, buttons) — solo cuando van dentro de .badge. */
.badge.bg-success {
    background-color: var(--smp-success-bg) !important;
    color: var(--smp-success) !important;
    border: 1px solid var(--smp-success-border) !important;
}
.badge.bg-warning {
    background-color: var(--smp-warning-bg) !important;
    color: var(--smp-warning) !important;
    border: 1px solid var(--smp-warning-border) !important;
}
.badge.bg-danger,
.badge.bg-primary {
    background-color: var(--smp-danger-bg) !important;
    color: var(--smp-brasa) !important;
    border: 1px solid var(--smp-danger-border) !important;
}
.badge.bg-info {
    background-color: var(--smp-info-bg) !important;
    color: var(--smp-info) !important;
    border: 1px solid var(--smp-info-border) !important;
}
.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-light {
    background-color: var(--smp-neutral-bg) !important;
    color: var(--smp-text-muted) !important;
    border: 1px solid var(--smp-neutral-border) !important;
}
/* Tabler usa text-dark sobre warning/info para legibilidad; con nuestro skin
   slim ya no es necesario — fuerza el color del esquema. */
.badge.bg-warning.text-dark { color: var(--smp-warning) !important; }
.badge.bg-info.text-dark { color: var(--smp-info) !important; }
.badge.bg-light.text-dark { color: var(--smp-text-muted) !important; }

.bg-primary-lt.avatar,
.avatar.bg-primary-lt {
    color: var(--smp-brasa) !important;
    background-color: var(--smp-danger-bg) !important;
}

/* Solid */
.bg-success { background-color: var(--smp-success) !important; color: #fff !important; }
.bg-warning { background-color: var(--smp-warning) !important; color: #fff !important; }
.bg-danger,
.bg-primary { background-color: var(--smp-brasa) !important; color: #fff !important; }

/* Pago/estado · botones de fila usando "Pagado" / "Deuda" en eventos */
.badge.badge-type,
.badge-type {
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--smp-radius-xs);
    letter-spacing: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: var(--smp-radius-pill);
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--smp-border);
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}

.badge-button {
    background: transparent;
    color: var(--smp-text-muted);
    cursor: pointer;
    padding: 0.32rem 0.7rem;
    border-radius: var(--smp-radius-sm);
    font-size: var(--smp-text-xs);
    border: 1px solid transparent;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease);
}
.badge-button:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.badge-button.active {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
    border-color: var(--smp-border);
}

/* ---------- 15. Modales y offcanvas --------------------- */
.modal-content {
    background-color: var(--smp-surface-2);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-lg);
    color: var(--smp-text);
}
.modal-header,
.modal-footer {
    border-color: var(--smp-border);
    padding: 0.8rem 1rem;
}
.modal-title { color: var(--smp-text); font-weight: var(--fw-title); font-size: var(--smp-text-md); }
.modal-body { padding: 0.85rem 1rem; color: var(--smp-text); font-size: var(--smp-text-sm); }
.modal-backdrop.show { opacity: 0.4; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: 0.6; }

.btn-close { transition: filter var(--smp-dur-2) var(--smp-ease), opacity var(--smp-dur-2) var(--smp-ease); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) opacity(0.65); }
[data-bs-theme="dark"] .btn-close:hover { filter: invert(1) grayscale(1) opacity(1); }

.modal.modal-blur { backdrop-filter: blur(6px); }

.offcanvas {
    background-color: var(--smp-surface-2);
    color: var(--smp-text);
    border-left: 1px solid var(--smp-border);
}
.offcanvas-header { border-bottom: 1px solid var(--smp-border); }

.offcanvas-backdrop,
.offcanvas-backdrop.fade {
    background-color: #000 !important;
    opacity: 0 !important;
    transition: opacity 0.15s linear !important;
}
.offcanvas-backdrop.show {
    opacity: 0.24 !important;
}

/* ====================================================
   Offcanvas Detail · info-dense pattern
   Comparte: expenses, payments, clients
   ==================================================== */

/* Header */
.offcanvas .offcanvas-header { padding: 10px 14px; min-height: 48px; }
.offcanvas-title {
    font-size: var(--font-modal-title);   /* t-13 */
    font-weight: var(--fw-page-title);    /* 600 */
    letter-spacing: -0.005em;
}

/* ───────── Expense detail offcanvas · slim premium ───────── */
.smp-exp-oc .offcanvas-header.smp-exp-oc-header {
    padding: 14px 16px 12px;
    border-bottom: 0;
}
.smp-exp-oc .offcanvas-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
}
.smp-exp-oc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--smp-text-muted);
    line-height: 1;
}
.smp-exp-oc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--smp-text-subtle);
    display: inline-block;
}
.smp-exp-oc-status-dot--ok { background-color: var(--smp-success); }
.smp-exp-oc-status-dot--bad { background-color: var(--smp-brasa); }
.smp-exp-oc-status-text { color: var(--smp-text); }
.smp-exp-oc .offcanvas-header .btn-close {
    opacity: 0.5;
    padding: 6px;
}
.smp-exp-oc .offcanvas-header .btn-close:hover { opacity: 0.9; }

/* Hero · montos compactos sin borders */
.smp-offcanvas-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 4px 16px 16px;
    background-color: transparent;
}
.smp-offcanvas-hero-cell { min-width: 0; }
.smp-offcanvas-hero-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--smp-text-subtle);
    margin-bottom: 4px;
}
.smp-offcanvas-hero-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--smp-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.smp-offcanvas-hero-value.is-total { color: var(--smp-brasa); }
.smp-offcanvas-hero-value.is-positive { color: var(--smp-success); }
.smp-offcanvas-hero-value.is-muted { color: var(--smp-text-muted); }

/* Tabs wrap del offcanvas · gana sobre la regla global con :has() que
   inyecta padding 8px y bg surface-1 en cualquier div padre de .new-tabs.
   ID-based para asegurar la specificity sin tener que pelear con !important. */
#expenseDetailOffcanvas .smp-exp-oc-tabs-wrap {
    padding: 8px 16px 4px !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
.smp-exp-oc-body { padding: 12px 16px 24px; }

/* Section · separación por spacing */
.smp-section { padding: 0; }
.smp-section + .smp-section { margin-top: 18px; }
.smp-desc-block + .smp-section { margin-top: 18px; }
.smp-section-title {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smp-text-subtle);
    margin-bottom: 8px;
    padding: 0;
}
.smp-section-title i { display: none; }

/* Key-value rows · alineación firme */
.smp-kv {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 24px;
    padding: 4px 0;
    font-size: 12px;
    line-height: 1.35;
}
.smp-kv-label {
    color: var(--smp-text-muted);
    font-weight: 400;
    font-size: 12px;
}
.smp-kv-value {
    color: var(--smp-text);
    font-weight: 500;
    word-break: break-word;
    min-height: 18px;
    min-width: 0;
}
.smp-kv-value.is-mono {
    font-family: var(--smp-font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--smp-text-muted);
    font-weight: 400;
    letter-spacing: -0.01em;
}
.smp-kv-value.is-strong { font-weight: 600; }
.smp-kv-value.is-muted { color: var(--smp-text-muted); }

/* Inputs/selects dentro de kv-rows · compactos, usa el sistema sin pelearlo.
   No tocamos .ts-control ni .form-control · solo ajustamos alto (compactitud)
   y aseguramos que el wrapper de TomSelect ocupe todo el ancho del column. */
.smp-kv-value .form-control,
.smp-kv-value .form-select,
.smp-kv-value .ts-wrapper {
    width: 100%;
    box-sizing: border-box;
}
.smp-kv-value .form-control,
.smp-kv-value .form-select,
.smp-kv-value .ts-control {
    height: 28px !important;
    min-height: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}
.smp-kv-value .ts-wrapper.single .ts-control { padding-right: 22px !important; }

/* Description textarea · usa el sistema (.form-control), solo compactamos */
.smp-desc-block { padding: 0; margin-bottom: 0; }
.smp-desc-block textarea.form-control {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
}

/* Flags · texto coloreado sutil (sin badges) */
.smp-exp-flag {
    font-weight: 500;
    font-size: 12px;
    color: var(--smp-text-muted);
}
.smp-exp-flag--ok { color: var(--smp-success); }
.smp-exp-flag--warn { color: var(--smp-warning); }
.smp-exp-flag--off { color: var(--smp-text-subtle); }

/* Compat: legacy inline pills (otros lugares) */
.smp-inline-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 4px 0;
}
.smp-inline-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    color: var(--smp-text-muted);
}

/* Floating save · chip flotante cuando hay cambios */
.smp-floating-save {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 5;
    height: 32px;
    padding: 0 14px !important;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-md);
}

/* ---------- 16. Skeleton (loading shimmer) ------------- */
.smp-skeleton {
    display: inline-block;
    background-color: var(--smp-surface-3);
    background-image: linear-gradient(
        90deg,
        var(--smp-surface-3) 0%,
        var(--smp-surface-5) 50%,
        var(--smp-surface-3) 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: smpShimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
    min-height: 0.85em;
    line-height: 1;
}
.smp-skeleton-block {
    display: block;
    width: 100%;
    height: 14px;
}
.smp-skeleton-lg { height: 26px; border-radius: 8px; }
.smp-skeleton-pill { height: 18px; width: 60px; border-radius: 999px; }
@keyframes smpShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .smp-skeleton { animation: none; }
}

/* ───────── Eventos vinculados (offcanvas tab) ───────── */

/* Distribución · número grande, status inline, barra stacked */
.smp-evx-dist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.smp-evx-dist-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.smp-evx-dist-pct {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--smp-text);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.smp-evx-dist-pct-unit {
    font-size: 14px;
    color: var(--smp-text-subtle);
    margin-left: 1px;
}
.smp-evx-dist-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--smp-text-muted);
    line-height: 1.3;
}
.smp-evx-dist-status .ti { font-size: 13px; }
.smp-evx-dist-status--ok { color: var(--smp-success); }
.smp-evx-dist-status--warn { color: var(--smp-warning); }
.smp-evx-dist-status--bad { color: var(--smp-brasa); }
.smp-evx-dist-bar {
    display: flex;
    gap: 2px;
    height: 6px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.smp-evx-dist-seg {
    background-color: var(--c, var(--smp-brasa));
    transition: width var(--smp-dur-3) var(--smp-ease-out);
    min-width: 2px;
}
.smp-evx-dist-seg--pending {
    background-color: transparent;
    flex-shrink: 0;
}
.smp-evx-dist-seg:first-child { border-radius: 999px 0 0 999px; }
.smp-evx-dist-seg:last-child { border-radius: 0 999px 999px 0; }
.smp-evx-dist-seg:only-child { border-radius: 999px; }

/* Header de lista · título + botón vincular */
.smp-evx-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.smp-evx-list-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smp-text-subtle);
}
.smp-evx-list-count {
    margin-left: 4px;
    color: var(--smp-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.smp-evx-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--smp-brasa);
    border-radius: var(--smp-radius-xs);
    cursor: pointer;
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-add-btn:hover { background-color: var(--smp-surface-3); }
.smp-evx-add-btn .ti { font-size: 13px; }

/* Lista de eventos */
.smp-evx-list { display: flex; flex-direction: column; }

/* Una fila por evento · dot · code/name · % · monto · acciones */
.smp-evx-event {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) 64px 88px auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--smp-border-subtle);
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-event:last-child { border-bottom: 0; }
.smp-evx-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--c, var(--smp-brasa));
    align-self: center;
}
.smp-evx-event.is-orphan .smp-evx-event-code { color: var(--smp-warning); }
.smp-evx-event-info { min-width: 0; }
.smp-evx-event-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.smp-evx-event-name {
    font-size: 11px;
    color: var(--smp-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.smp-evx-event-pct {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background-color: var(--smp-surface-2);
    border-radius: var(--smp-radius-sm);
    padding: 0 6px 0 4px;
    height: 24px;
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-event-pct:focus-within { background-color: var(--smp-surface-3); }
.smp-evx-event-pct-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    color: var(--smp-text);
    padding: 0;
    font-variant-numeric: tabular-nums;
}
.smp-evx-event-pct-input::-webkit-outer-spin-button,
.smp-evx-event-pct-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.smp-evx-event-pct-unit {
    font-size: 11px;
    color: var(--smp-text-subtle);
    line-height: 1;
    font-weight: 500;
}
.smp-evx-event-amount {
    text-align: right;
    font-weight: 500;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.smp-evx-event-actions {
    display: inline-flex;
    gap: 2px;
    opacity: 0.5;
    transition: opacity var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-event:hover .smp-evx-event-actions { opacity: 1; }
.smp-evx-event-action {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--smp-radius-xs);
    color: var(--smp-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--smp-dur-2) var(--smp-ease), color var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-event-action:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-evx-event-action--danger:hover {
    background-color: var(--smp-danger-bg, color-mix(in srgb, var(--smp-brasa) 12%, transparent));
    color: var(--smp-brasa);
}
.smp-evx-event-action .ti { font-size: 14px; }

/* Save chip · aparece bajo la fila cuando hay cambios */
.smp-evx-event-save {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 6px;
    background-color: var(--smp-success);
    border: 0;
    color: var(--smp-text-on-brand, #fff);
    border-radius: var(--smp-radius-sm);
    height: 26px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: filter var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-event-save:hover { filter: brightness(0.92); }
.smp-evx-event-save .ti { font-size: 13px; }

/* Empty state */
.smp-evx-empty {
    text-align: center;
    padding: 28px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.smp-evx-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--smp-text);
}
.smp-evx-empty-desc {
    font-size: 12px;
    color: var(--smp-text-muted);
    max-width: 260px;
    line-height: 1.45;
    margin-bottom: 10px;
}
.smp-evx-empty-locked {
    font-size: 11px;
    color: var(--smp-text-subtle);
    margin-top: 6px;
}

/* Parcial summary · slim, sin caja prominente */
.smp-evx-parcial {
    background-color: var(--smp-surface-2);
    border-radius: var(--smp-radius-sm);
    padding: 8px 10px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}
.smp-evx-parcial-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.smp-evx-parcial-label {
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-evx-parcial-counts {
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.smp-evx-parcial-counts strong { font-weight: 600; }
.smp-evx-parcial-pending { color: var(--smp-warning); font-weight: 500; }
.smp-evx-parcial-errors {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.smp-evx-parcial-errors-label { color: var(--smp-brasa); font-weight: 500; }
.smp-evx-parcial-code {
    font-family: var(--smp-font-mono, ui-monospace, monospace);
    font-size: 11px;
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
    padding: 1px 6px;
    border-radius: var(--smp-radius-xs);
}

/* ---------- 16. Toasts ---------------------------------- */
#toast-container .toast {
    padding: 0 !important;
    background-position: 1em center;
    background-color: var(--smp-surface-2) !important;
    color: var(--smp-text) !important;
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-md);
}
#toast-container .toast:hover { box-shadow: var(--smp-shadow-lg); }
#toast-container .toast .toast-body {
    padding-left: 3.5em;
    color: var(--smp-text) !important;
    font-size: var(--smp-text-sm);
}
#toast-container .toast-success { border-left: 3px solid var(--smp-success); }
#toast-container .toast-warning { border-left: 3px solid var(--smp-warning); }
#toast-container .toast-error   { border-left: 3px solid var(--smp-brasa); }
#toast-container .toast-info    { border-left: 3px solid var(--smp-info); }

/* ---------- 17. Notificaciones del sistema ------------ */
.sys-notification {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--smp-border);
    background-color: transparent;
    color: var(--smp-text);
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.sys-notification:hover { background-color: var(--smp-surface-3); }
.sys-notification .avatar { width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; }
.sys-notification .notification-content { flex-grow: 1; }
.sys-notification .notification-content div:first-child { color: var(--smp-text); font-size: var(--smp-text-sm); }
.sys-notification .meta { font-size: var(--smp-text-xs); color: var(--smp-text-muted); margin-top: 2px; }
.sys-notification .menu-dots { font-size: 16px; color: var(--smp-text-muted); cursor: pointer; margin-left: 10px; }
.sys-notification .menu-dots:hover { color: var(--smp-text); }

/* ---------- 18. Dropzone -------------------------------- */
.dropzone {
    background-color: var(--smp-surface-2);
    border: 1px dashed var(--smp-border-strong);
    border-radius: var(--smp-radius);
    color: var(--smp-text-muted);
    padding: 1rem;
    transition:
        border-color var(--smp-dur-2) var(--smp-ease),
        background-color var(--smp-dur-2) var(--smp-ease);
}
.dropzone:hover {
    border-color: var(--smp-brasa);
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}

.dropzone-60, .dropzone-50, .dropzone-40, .dropzone-30, .dropzone-20 {
    border: 1px dashed var(--smp-border-strong);
    background-color: var(--smp-surface-2);
    border-radius: var(--smp-radius-sm);
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease);
}
.dropzone-60:hover, .dropzone-50:hover, .dropzone-40:hover, .dropzone-30:hover, .dropzone-20:hover {
    background-color: var(--smp-surface-3);
    border-color: var(--smp-brasa);
    cursor: pointer;
}
.dropzone-60 { height: 60px; width: 60px; }
.dropzone-50 { height: 50px; width: 50px; }
.dropzone-40 { height: 40px; width: 40px; }
.dropzone-30 { height: 30px; width: 30px; }
.dropzone-20 { height: 20px; width: 20px; }

#selected-images {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
}
.img-added-dpz, .add-file-element {
    display: flex; align-items: center; justify-content: center;
    color: var(--smp-text); font-size: 18px;
    position: relative; aspect-ratio: 1;
}
.img-added-dpz img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: var(--smp-radius-sm);
    background-color: var(--smp-surface-3);
}
.dz-preview { display: none; }
#selected-images .img-added-dpz:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.file-item {
    width: 90px; height: 90px;
    object-fit: contain;
    background-color: var(--smp-surface-2);
    border-radius: var(--smp-radius-sm);
    border: 1px solid var(--smp-border);
}
.add-file-element {
    background-color: var(--smp-surface-2);
    border-radius: var(--smp-radius-sm);
    border: 1px dashed var(--smp-border-strong);
    cursor: pointer;
    color: var(--smp-text-muted);
    transition: background-color var(--smp-dur-2) var(--smp-ease), border-color var(--smp-dur-2) var(--smp-ease);
}
.add-file-element:hover {
    background-color: var(--smp-surface-3);
    border-color: var(--smp-brasa);
    color: var(--smp-text);
}

/* ---------- 19. Iconos · motion ------------------------ */
.ti     { font-size: 1.05em; line-height: 1; }
.ti-sm  { font-size: 0.95em; }
.ti-xs  { font-size: 0.82em; }

[data-bs-toggle="dropdown"] .chevron {
    transition: transform var(--smp-dur-2) var(--smp-ease);
    transform-origin: center;
}
[data-bs-toggle="dropdown"][aria-expanded="true"] .chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

.dropdown-toggle::after { margin-top: -0.3em !important; }

.avatar {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
    border-radius: var(--smp-radius-sm);
}

.horizontal-divider { width: 1px; height: 1.2rem; background-color: var(--smp-border); }

.border-bottom-sm { border-bottom: 1px solid var(--smp-border); }
@media (min-width: 768px) { .border-bottom-sm { border-bottom: 0; } }
.border-bottom-md { border-bottom: 0; }
@media (min-width: 768px) { .border-bottom-md { border-bottom: 1px solid var(--smp-border); } }
.border-end-sm { border-right: 1px solid var(--smp-border); }
@media (min-width: 768px) { .border-end-sm { border-right: 0; } }
.border-end-md { border-right: 0; }
@media (min-width: 768px) { .border-end-md { border-right: 1px solid var(--smp-border); } }

.link-button {
    background-color: transparent;
    border: none;
    color: var(--smp-brasa);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--smp-text-sm);
    transition: color var(--smp-dur-2) var(--smp-ease);
}
.link-button:hover { color: var(--smp-brasa-600); }
.link-button:hover .link-text { text-decoration: underline; }
.link-button i { font-size: 16px; }

.select-categories-item:hover, .dp-header-categories:hover {
    background-color: var(--smp-surface-3);
    cursor: pointer;
}
.selected-category { background-color: var(--smp-surface-5); }

.delete-products:hover { background-color: var(--smp-danger-bg); color: var(--smp-brasa); }

.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%;
}

.lb-outerContainer { border-radius: var(--smp-radius); overflow: hidden; }
.lb-image { border: 0 !important; }

td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.iti { width: 100%; }
.progressbg { padding: 0.15rem 0.5rem !important; }
tr:hover { cursor: pointer; }

/* ---------- 20. Motion · fade vistas ------------------ */
@keyframes smpFadeUp {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.page-wrapper > *,
.modal.show .modal-dialog {
    animation: smpFadeUp var(--smp-dur-3) var(--smp-ease-out);
}

/* ---------- 20. Wizard / multi-step forms -------------- */
/* Horizontal stepper · estilo Linear/Notion */
.smp-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--smp-border);
    background-color: var(--smp-surface-1);
    flex: 0 0 auto;
    overflow-x: auto;
}
.smp-stepper-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--smp-text-subtle);
    font-size: var(--font-body);
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
    transition: color var(--smp-dur-2) var(--smp-ease);
}
.smp-stepper-item-num {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--smp-radius-pill);
    background-color: var(--smp-neutral-bg);
    border: 1px solid var(--smp-neutral-border);
    color: var(--smp-text-subtle);
    font-size: var(--font-meta);
    font-weight: 600;
    flex-shrink: 0;
    transition: all var(--smp-dur-2) var(--smp-ease);
}
.smp-stepper-item.active .smp-stepper-item-num {
    background-color: var(--smp-brasa);
    border-color: var(--smp-brasa);
    color: #fff;
}
.smp-stepper-item.active { color: var(--smp-text); }
.smp-stepper-item.complete .smp-stepper-item-num {
    background-color: var(--smp-success-bg);
    border-color: var(--smp-success-border);
    color: var(--smp-success);
}
.smp-stepper-item.complete { color: var(--smp-text-muted); }
.smp-stepper-divider {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--smp-border);
    min-width: 24px;
    max-width: 80px;
}

/* Vertical stepper · sidebar interno del wizard (Linear/Notion style) */
.smp-stepper.smp-stepper--vertical {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 10px;
    border-right: 1px solid var(--smp-border);
    border-bottom: 0;
    width: 196px;
    flex: 0 0 196px;
    overflow-x: visible;
    overflow-y: auto;
    background-color: var(--smp-surface-1);
}
.smp-stepper--vertical .smp-stepper-divider { display: none; }
.smp-stepper--vertical .smp-stepper-item {
    align-items: flex-start;
    padding: 5px 6px;
    gap: 8px;
    position: relative;
    border-radius: var(--smp-radius-sm);
    line-height: 1.3;
    white-space: normal;
}
.smp-stepper--vertical .smp-stepper-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;                          /* centro del num badge: 6(pad) + 11(half de 22) */
    top: 28px;
    width: 1px;
    height: calc(100% - 8px);
    background-color: var(--smp-border);
    z-index: 0;
}
.smp-stepper--vertical .smp-stepper-item-num {
    position: relative;
    z-index: 1;
}
.smp-stepper--vertical .smp-stepper-item-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 1px;
}
.smp-stepper--vertical .smp-stepper-item-title {
    font-size: var(--font-body);
    font-weight: 500;
    color: inherit;
    letter-spacing: -0.003em;
}
.smp-stepper--vertical .smp-stepper-item-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-weight: 400;
}
.smp-stepper--vertical .smp-stepper-item.active .smp-stepper-item-sub {
    color: var(--smp-text-muted);
}

/* Wizard layout wrapper (vertical stepper + form column) */
.smp-wizard {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.smp-wizard > form {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Form sections · sin card-inside-card */
.smp-form-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-form-section:last-of-type { border-bottom: 0; }
.smp-form-section-header {
    margin-bottom: 10px;
}
.smp-form-section-title {
    font-size: var(--font-emphasis);    /* 13px · sub-heading dentro del step */
    font-weight: var(--fw-title);       /* 500 · slim */
    color: var(--smp-text);
    letter-spacing: -0.005em;
    margin: 0 0 2px 0;
    line-height: 1.3;
}
.smp-form-section-desc {
    font-size: var(--font-meta);        /* 11px · helper text */
    font-weight: var(--fw-body);        /* 400 · regular */
    color: var(--smp-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* Footer fijo al fondo con acciones */
.smp-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--smp-border);
    background-color: var(--smp-surface-1);
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
}
.smp-form-footer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
.smp-form-helper {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
}

/* ---------- 21. Login ---------------------------------- */
.login-form-section { background: var(--smp-surface-1) !important; }
.login-form-section .form-label { color: var(--smp-text); }
.login-form-section h2 { color: var(--smp-text); }
.login-form-section .text-muted,
.login-copyright .text-muted { color: var(--smp-text-muted) !important; }
.login-copyright { border-top: 1px solid var(--smp-border) !important; }

/* ---------- 22. Helpers --------------------------------- */
.fs-mono { font-family: var(--smp-font-mono); }
.text-brasa { color: var(--smp-brasa); }
.bg-brasa { background-color: var(--smp-brasa); color: #fff; }
.surface-0 { background-color: var(--smp-surface-0); }
.surface-1 { background-color: var(--smp-surface-1); }
.surface-2 { background-color: var(--smp-surface-2); }
.surface-3 { background-color: var(--smp-surface-3); }
.canvas    { background-color: var(--smp-canvas); }

/* Premium callout (estilo Shopify yellow card) */
.smp-callout {
    background-color: var(--smp-premium-bg);
    border: 1px solid var(--smp-warning-border);
    border-radius: var(--smp-radius);
    padding: 0.85rem 1rem;
    font-size: var(--smp-text-sm);
    color: var(--smp-text);
}
.smp-callout-icon {
    color: var(--smp-premium);
}

.smp-mesh {
    background:
        radial-gradient(80% 60% at 50% 100%, rgba(var(--smp-brasa-rgb), 0.18) 0%, transparent 60%),
        radial-gradient(60% 40% at 90% 0%, rgba(255, 138, 61, 0.08) 0%, transparent 60%),
        var(--smp-surface-1);
}

/* ---------- 23. Page header (topbar) -----
   El topbar vive sobre el canvas (no en card), a la misma altura
   que la fila superior del sidebar para que ambos se alineen. */
[id$="-header"][style*="position: sticky"],
.page-wrapper > div > div[style*="position: sticky"] {
    background-color: transparent !important;
    border-bottom: 0 !important;
    height: auto !important;
    min-height: var(--smp-topbar-height) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}
[id$="-header"][style*="position: sticky"].border-bottom,
.page-wrapper > div > div[style*="position: sticky"].border-bottom {
    border-bottom: 0 !important;
}
/* container-fluid: full width, altura auto para acomodar topbar + collapse */
[id$="-header"] > .container-fluid,
.page-wrapper > div > div[style*="position: sticky"] > .container-fluid {
    width: 100%;
    height: auto;
}
/* La fila interna (title + actions) tiene altura fija = topbar-height; el collapse expande debajo */
[id$="-header"] > .container-fluid > div.d-flex.justify-content-between,
.page-wrapper > div > div[style*="position: sticky"] > .container-fluid > div.d-flex.justify-content-between {
    height: var(--smp-topbar-height);
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Container del header (la fila con título + acciones) */
[id$="-header"] > .container-fluid > div.d-flex.align-items-center.justify-content-between,
.page-wrapper > div > div[style*="position: sticky"] > .container-fluid > div.d-flex.align-items-center.justify-content-between {
    padding: 0 0 0 0.05rem !important;
    gap: 0.4rem;
    min-height: var(--smp-topbar-height);
}

/* Título del topbar · breadcrumb estilo Linear/Notion (sin chip, plain) */
[id$="-header"] > .container-fluid > div.d-flex h3.mb-0,
.page-wrapper > div > div[style*="position: sticky"] h3.mb-0 {
    height: var(--h-control);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    font-size: var(--font-topbar-title);
    font-weight: 600;
    color: var(--smp-text);
    letter-spacing: -0.012em;
    line-height: 1;
    margin: 0;
}
/* Icon prefix dentro del h3 del topbar (matching el del sidebar item) */
[id$="-header"] h3.mb-0 > i.ti,
[id$="-header"] h3.mb-0 > .ti {
    color: var(--smp-text-subtle);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
/* Breadcrumb: el primer segmento (link) en peso ligero, separador "/" sutil */
[id$="-header"] h3.mb-0 a {
    color: var(--smp-text-muted);
    text-decoration: none;
    font-weight: 500;
}
[id$="-header"] h3.mb-0 a:hover {
    color: var(--smp-text);
}

/* Search input dentro del topbar · altura uniforme con btn */
[id$="-header"] .input-icon .form-control,
.page-wrapper .input-icon .form-control {
    height: var(--h-control);
    min-height: var(--h-control);
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius-sm);
    box-shadow: var(--smp-shadow-xs);
    width: 220px;
    font-size: var(--font-input);
}
/* Icono al final (último hijo): padding a la derecha */
[id$="-header"] .input-icon .form-control:not(:last-child),
.page-wrapper .input-icon .form-control:not(:last-child) {
    padding-right: 2rem;
    padding-left: 0.75rem;
}
/* Icono al inicio (primer hijo): padding a la izquierda */
[id$="-header"] .input-icon .form-control:not(:first-child),
.page-wrapper .input-icon .form-control:not(:first-child) {
    padding-left: 2rem;
    padding-right: 0.75rem;
}
[id$="-header"] .input-icon .form-control:focus,
.page-wrapper .input-icon .form-control:focus {
    box-shadow: var(--smp-glow);
}
.input-icon .input-icon-addon {
    color: var(--smp-text-subtle);
    width: 2rem;
    min-width: 2rem;
}
.input-icon .input-icon-addon .ti { font-size: 0.9em; }

/* Filter chip · botón icon-only (cuadrado, hereda altura uniforme) */
.btn.bg-github-lt {
    padding: 0 8px;
    min-width: var(--h-control);
    justify-content: center;
}
.btn.bg-github-lt .ti {
    font-size: 12px;
}

/* ---------- Filter popover (custom dropdown) ----------
   Patrón nuevo: click al botón de filtro abre un panel posicionado
   (no un collapse que empuja el contenido). Reemplaza .smp-filter-collapse
   en páginas que lo adopten. */
.smp-filter-pop {
    position: relative;
    display: inline-flex;
}

/* Trigger button */
.smp-filter-pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--h-control);
    padding: 0 12px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius-sm);
    color: var(--smp-text);
    font-size: var(--smp-text-sm);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--smp-shadow-xs);
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease);
}
.smp-filter-pop-btn .ti { font-size: 15px; color: var(--smp-text-muted); }
.smp-filter-pop-btn:hover {
    background-color: var(--smp-surface-3);
    border-color: var(--smp-border-strong);
}
.smp-filter-pop-btn[aria-expanded="true"] {
    background-color: var(--smp-surface-3);
    border-color: var(--smp-border-strong);
}
.smp-filter-pop-btn.has-active {
    border-color: var(--smp-text);
    background-color: var(--smp-surface-3);
}
.smp-filter-pop-btn.has-active .ti { color: var(--smp-text); }
.smp-filter-pop-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    background-color: var(--smp-text);
    color: var(--smp-surface-1);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.smp-filter-pop-btn-count[hidden] { display: none; }

/* Panel */
.smp-filter-pop-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1040;
    width: min(280px, calc(100vw - 24px));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-lg);
    padding: 0;
    animation: smp-filter-pop-in 140ms var(--smp-ease-out);
}
/* Defensive: cualquier hijo que se pase del ancho se ajusta o se trunca */
.smp-filter-pop-panel * { min-width: 0; }
.smp-filter-pop-panel .form-select,
.smp-filter-pop-panel .form-control,
.smp-filter-pop-panel .ts-wrapper {
    max-width: 100%;
}
.smp-filter-pop-panel[hidden] { display: none; }
@keyframes smp-filter-pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Panel header */
.smp-filter-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--smp-border-subtle);
    position: sticky;
    top: 0;
    background-color: var(--smp-surface-1);
    z-index: 1;
}
.smp-filter-pop-head > div { min-width: 0; flex: 1; }
.smp-filter-pop-title {
    font-size: var(--smp-text-sm);
    font-weight: 500;
    color: var(--smp-text);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.smp-filter-pop-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    margin-top: 1px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-filter-pop-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    background: transparent;
    border: 0;
    border-radius: var(--smp-radius-xs);
    color: var(--smp-text-muted);
    font-size: var(--smp-text-xs);
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--smp-dur-2) var(--smp-ease), background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-filter-pop-clear-all:hover {
    color: var(--smp-text);
    background-color: var(--smp-surface-3);
}
.smp-filter-pop-clear-all .ti { font-size: 13px; }
.smp-filter-pop-clear-all[hidden] { display: none; }

/* Sections */
.smp-filter-section {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-filter-section:last-child { border-bottom: 0; }
.smp-filter-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
    min-height: 18px;
}
.smp-filter-section-title {
    font-size: var(--smp-text-xs);
    font-weight: 500;
    color: var(--smp-text-subtle);
    letter-spacing: 0;
}
.smp-filter-section-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--smp-text-subtle);
    cursor: pointer;
    transition: background-color var(--smp-dur-2) var(--smp-ease), color var(--smp-dur-2) var(--smp-ease);
}
.smp-filter-section-clear:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-filter-section-clear .ti { font-size: 12px; }
.smp-filter-section-clear[hidden] { display: none; }
.smp-filter-section-grid {
    display: grid;
    /* Single column por default — más vertical, más legible. Las páginas que
       quieran 2 cols (ej. monto min/max) usan inline style override. */
    grid-template-columns: 1fr;
    gap: 8px;
}
.smp-filter-section-grid .smp-filter-field { flex: initial; min-width: 0; }
.smp-filter-section-grid .form-label {
    margin-bottom: 3px;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    font-weight: 500;
}

/* Date range UX */
.smp-filter-date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.smp-filter-date-presets button {
    padding: 3px 8px;
    background-color: transparent;
    border: 1px solid var(--smp-border-subtle);
    border-radius: 999px;
    color: var(--smp-text-muted);
    font-size: var(--smp-text-xs);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease);
}
.smp-filter-date-presets button:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-filter-date-presets button.active {
    background-color: var(--smp-text);
    border-color: var(--smp-text);
    color: var(--smp-surface-1);
}

/* Date range · dos pickers apilados (verticalidad sobre horizontalidad). */
.smp-filter-date-range {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.smp-filter-date-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.smp-filter-date-field label {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-filter-date-fpinput {
    width: 100%;
    min-width: 0;
    height: var(--h-control);
    padding: 0 var(--pad-control-x);
    background-color: var(--smp-surface-4);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius-sm);
    color: var(--smp-text);
    font-size: var(--font-input);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--smp-shadow-xs);
    box-sizing: border-box;
    transition: border-color var(--smp-dur-2) var(--smp-ease);
}
.smp-filter-date-fpinput::placeholder { color: var(--smp-text-subtle); }
.smp-filter-date-fpinput:hover { border-color: var(--smp-border-strong); }
.smp-filter-date-fpinput:focus,
.smp-filter-date-fpinput.active {
    outline: 0;
    border-color: var(--smp-brasa);
    box-shadow: var(--smp-glow);
}

@media (max-width: 540px) {
    .smp-filter-section-grid { grid-template-columns: 1fr; }
    .smp-filter-date-range { grid-template-columns: 1fr; }
}

/* flatpickr · skin del design system */
.flatpickr-calendar {
    background-color: var(--smp-surface-1) !important;
    border: 1px solid var(--smp-border) !important;
    border-radius: var(--smp-radius) !important;
    box-shadow: var(--smp-shadow-lg) !important;
    font-family: var(--smp-font) !important;
    font-size: var(--smp-text-sm);
    color: var(--smp-text);
    padding: 6px;
    width: 264px !important;
}
/* Sin arrow apuntando al input — look más limpio */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none !important; }

/* Header */
.flatpickr-months { padding: 2px 0 4px; align-items: center; }
.flatpickr-month {
    background: transparent !important;
    color: var(--smp-text) !important;
    height: 30px;
}
.flatpickr-current-month {
    font-size: var(--smp-text-sm) !important;
    font-weight: 500 !important;
    padding: 2px 0 !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--smp-text) !important;
    background: transparent !important;
    font-weight: 500 !important;
    font-size: var(--smp-text-sm) !important;
    padding: 2px 4px !important;
    border-radius: var(--smp-radius-xs);
    border: 0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover { background-color: var(--smp-surface-3) !important; }
.flatpickr-current-month .numInputWrapper:hover { background: transparent !important; }
.flatpickr-current-month .arrowUp,
.flatpickr-current-month .arrowDown { display: none !important; }

.flatpickr-prev-month,
.flatpickr-next-month {
    padding: 6px !important;
    border-radius: var(--smp-radius-xs);
    color: var(--smp-text-muted) !important;
    fill: var(--smp-text-muted) !important;
    transition: background-color var(--smp-dur-2) var(--smp-ease), color var(--smp-dur-2) var(--smp-ease);
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { width: 12px; height: 12px; }
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text) !important;
    fill: var(--smp-text) !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--smp-text) !important; }

/* Weekdays */
.flatpickr-weekdays { background: transparent !important; height: 24px; }
.flatpickr-weekdaycontainer { display: flex; }
span.flatpickr-weekday {
    background: transparent !important;
    color: var(--smp-text-subtle) !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Days grid */
.dayContainer { padding: 0; min-width: 0 !important; width: 252px !important; }
.flatpickr-days { width: 252px !important; }
.flatpickr-day {
    background: transparent !important;
    color: var(--smp-text) !important;
    border: 0 !important;
    border-radius: var(--smp-radius-xs) !important;
    font-size: var(--smp-text-sm);
    font-weight: 400;
    width: 36px !important;
    max-width: 36px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin: 1px 0;
    transition: background-color var(--smp-dur-2) var(--smp-ease), color var(--smp-dur-2) var(--smp-ease);
}
.flatpickr-day:hover {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text) !important;
    border: 0 !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--smp-text-subtle) !important; }
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover { color: var(--smp-text) !important; }

/* Today · solo un dot debajo del número, sin fill ni border */
.flatpickr-day.today {
    background: transparent !important;
    color: var(--smp-text) !important;
    font-weight: 600;
    position: relative;
    border: 0 !important;
}
.flatpickr-day.today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--smp-brasa);
}
.flatpickr-day.today:hover {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text) !important;
}

/* Selected · negro lleno, blanco texto */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background-color: var(--smp-text) !important;
    color: var(--smp-surface-1) !important;
    font-weight: 500;
    border: 0 !important;
}
/* Si today TAMBIÉN está seleccionado, el dot se vuelve blanco */
.flatpickr-day.today.selected::after,
.flatpickr-day.today.startRange::after,
.flatpickr-day.today.endRange::after { background-color: var(--smp-surface-1); }

/* In-range · gris claro entre selected */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background-color: var(--smp-surface-3) !important;
    color: var(--smp-text) !important;
    box-shadow: -5px 0 0 var(--smp-surface-3), 5px 0 0 var(--smp-surface-3) !important;
    border-radius: 0 !important;
}
.flatpickr-day.startRange.endRange { border-radius: var(--smp-radius-xs) !important; }
.flatpickr-day.startRange:not(.endRange) { border-radius: var(--smp-radius-xs) 0 0 var(--smp-radius-xs) !important; }
.flatpickr-day.endRange:not(.startRange) { border-radius: 0 var(--smp-radius-xs) var(--smp-radius-xs) 0 !important; }

/* Disabled */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--smp-text-subtle) !important;
    background: transparent !important;
    opacity: 0.5;
}

/* Filter collapse panel · vive dentro del events-header (legacy, en uso por
   otras páginas que aún no migran al popover) */
.smp-filter-collapse {
    width: 100%;
    padding: 8px 0 12px;
}
.smp-filter-collapse .form-label {
    margin-bottom: 4px;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
}
.smp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
}
.smp-filter-field {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    flex-direction: column;
}
.smp-filter-field .form-control,
.smp-filter-field .form-select,
.smp-filter-field .ts-wrapper {
    width: 100% !important;
    min-width: 0 !important;
}
/* Wrapper de TomSelect dentro de un filter-field: el wrapper ES el control
   visible (hereda border/bg de .form-select). NO agregamos border a .ts-control
   porque generaría doble borde con el wrapper. */
.smp-filter-field input.form-control,
.smp-filter-field input.form-control[type="date"] {
    background-color: var(--smp-surface-4) !important;
    box-shadow: none !important;
}

/* ---------- 24. Section labels + card pattern ----------- */
.smp-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius);
    box-shadow: var(--smp-shadow-xs);
    color: var(--smp-text);
    font-size: var(--smp-text-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.smp-section-label .ti {
    color: var(--smp-text-subtle);
    font-size: 0.95em;
}

/* Card head con title · description */
.smp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--smp-border);
}
.smp-card-head-meta {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.smp-card-title {
    font-size: var(--smp-text-md);
    font-weight: 600;
    color: var(--smp-text);
    letter-spacing: -0.012em;
    margin: 0;
}
.smp-card-bullet {
    color: var(--smp-text-subtle);
    font-size: var(--smp-text-sm);
}
.smp-card-desc {
    font-size: var(--smp-text-sm);
    color: var(--smp-text-muted);
}

/* Show all link "→" en headers de card */
.smp-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--smp-text-sm);
    color: var(--smp-text);
    font-weight: 500;
    text-decoration: none;
    padding: 0.28rem 0.55rem;
    border-radius: var(--smp-radius-sm);
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-link-arrow:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}

/* ============================================================
   DASHBOARD · slim · premium · consistent
   ============================================================ */
.smp-dash {
    padding: 12px var(--smp-content-pad) 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.smp-dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 991.98px) {
    .smp-dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .smp-dash-kpi-grid { grid-template-columns: 1fr; }
}
.smp-dash-kpi {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.smp-dash-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-body);
    font-weight: 500;
    color: var(--smp-text-muted);
    letter-spacing: 0;
}
.smp-dash-kpi-label .ti { font-size: 13px; color: var(--smp-text-subtle); }
.smp-dash-kpi-value {
    font-size: var(--font-display);
    font-weight: 600;
    color: var(--smp-text);
    letter-spacing: -0.018em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.smp-dash-kpi-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    line-height: 1.3;
    font-weight: 400;
}
.smp-dash-kpi--positive .smp-dash-kpi-value { color: #1f7a4c; }
.smp-dash-kpi--negative .smp-dash-kpi-value { color: var(--smp-brasa); }
.smp-dash-kpi--warn .smp-dash-kpi-value { color: #b45309; }

/* Sección dedicada: Gasto vs Target 20% */
.smp-dash-target {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.smp-dash-target-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.smp-dash-target-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-emphasis);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.smp-dash-target-title .ti { color: var(--smp-text-subtle); font-size: 15px; }
.smp-dash-target-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    margin-top: 3px;
    line-height: 1.3;
}
.smp-dash-target-chips {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.smp-dash-target-chip {
    --c: var(--smp-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-caption);
    color: var(--c);
    line-height: 1.5;
}
.smp-dash-target-chip .ti { font-size: 12px; }
.smp-dash-target-chip strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.smp-dash-target-chip--ok { --c: #1f7a4c; }
.smp-dash-target-chip--bad { --c: var(--smp-brasa); }
.smp-dash-target-chip--mute { --c: var(--smp-text-subtle); }
.smp-dash-target-gauge {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smp-dash-target-chart-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.smp-dash-target-gauge-bar {
    position: relative;
    height: 8px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: visible;
}
.smp-dash-target-gauge-fill {
    height: 100%;
    background-color: #1f7a4c;
    border-radius: 999px;
    transition: width var(--smp-dur-3) var(--smp-ease-out), background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-dash-target--warn .smp-dash-target-gauge-fill,
.smp-dash-target-gauge--warn .smp-dash-target-gauge-fill { background-color: #b45309; }
.smp-dash-target--bad .smp-dash-target-gauge-fill,
.smp-dash-target-gauge--bad .smp-dash-target-gauge-fill { background-color: var(--smp-brasa); }
.smp-dash-target-gauge-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background-color: var(--smp-text);
    transform: translateX(-1px);
    border-radius: 1px;
}
.smp-dash-target-gauge-marker::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--smp-text);
}
.smp-dash-target-gauge-marker-label {
    display: none;
}
.smp-dash-target-gauge-scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--smp-text-subtle);
    font-variant-numeric: tabular-nums;
    padding-top: 6px;
}
.smp-dash-target-gauge-scale span:nth-child(2) {
    color: var(--smp-text);
    font-weight: 500;
}
.smp-dash-target-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.smp-dash-target-stat {
    background-color: var(--smp-surface-2);
    border-radius: var(--smp-radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.smp-dash-target-stat-label {
    font-size: 11px;
    color: var(--smp-text-subtle);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.smp-dash-target-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--smp-text);
    letter-spacing: -0.018em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.smp-dash-target-stat-sub {
    font-size: 11px;
    color: var(--smp-text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.smp-dash-target-trend-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
}
.smp-dash-target-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--smp-border-subtle);
    padding-top: 12px;
}
.smp-dash-target-list-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-dash-target-list-body { display: flex; flex-direction: column; }
.smp-dash-target-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.7fr);
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    font-size: var(--font-body);
    border-bottom: 1px solid var(--smp-border-subtle);
    color: var(--smp-text);
    text-decoration: none;
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-dash-target-row:hover { background-color: var(--smp-surface-3); color: var(--smp-text); }
.smp-dash-target-row:last-child { border-bottom: 0; }
.smp-dash-target-row-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.smp-dash-target-row-name > span:last-child {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-dash-target-list-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1f7a4c;
    font-size: var(--font-body);
    padding: 8px 0;
}

.smp-dash-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
}
.smp-dash-row + .smp-dash-row {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 991.98px) {
    .smp-dash-row,
    .smp-dash-row + .smp-dash-row { grid-template-columns: 1fr; }
}
.smp-dash-card {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 12px 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.smp-dash-card--full { grid-column: 1 / -1; }
.smp-dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.smp-dash-card-title {
    font-size: var(--font-emphasis);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.smp-dash-card-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    margin-top: 2px;
    font-weight: 400;
}
.smp-dash-card-link {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: var(--smp-radius-xs);
    transition: background-color var(--smp-dur-2) var(--smp-ease), color var(--smp-dur-2) var(--smp-ease);
}
.smp-dash-card-link:hover {
    color: var(--smp-text);
    background-color: var(--smp-surface-3);
}
.smp-dash-card-link .ti { font-size: 12px; }

/* Apexcharts overrides para consistencia con design system */
.smp-dash-card .apexcharts-text,
.smp-dash-card .apexcharts-legend-text {
    font-family: var(--smp-font) !important;
}
.smp-dash-card .apexcharts-tooltip {
    background-color: var(--smp-surface-2) !important;
    border: 1px solid var(--smp-border) !important;
    box-shadow: var(--smp-shadow-md) !important;
    border-radius: var(--smp-radius-sm) !important;
    color: var(--smp-text) !important;
}
.smp-dash-card .apexcharts-tooltip-title {
    background-color: var(--smp-surface-3) !important;
    border-bottom-color: var(--smp-border) !important;
    font-weight: 500 !important;
}

/* Recent activity list */
.smp-dash-recent {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--smp-border);
}
.smp-dash-recent-head,
.smp-dash-recent-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.8fr);
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    font-size: var(--font-body);
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-dash-recent-head {
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--smp-text-muted);
    text-transform: none;
    letter-spacing: 0;
    padding: 6px 0;
}
.smp-dash-recent-row {
    color: var(--smp-text);
    text-decoration: none;
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-dash-recent-row:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-dash-recent-row:last-child { border-bottom: 0; }
.smp-dash-recent-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.smp-dash-recent-code {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-family: var(--smp-font-mono);
    letter-spacing: -0.008em;
}
.smp-dash-recent-name > span:last-child {
    font-weight: 500;
    color: var(--smp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-dash-pos { color: #1f7a4c; font-variant-numeric: tabular-nums; font-weight: 500; }
.smp-dash-neg { color: var(--smp-brasa); font-variant-numeric: tabular-nums; font-weight: 500; }
.smp-dash-warn { color: #b45309; font-variant-numeric: tabular-nums; font-weight: 500; }
.smp-dash-empty {
    text-align: center;
    color: var(--smp-text-subtle);
    font-size: var(--font-body);
    padding: 20px 8px;
}

/* Status badge slim */
.smp-dash-status {
    --c: var(--smp-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--c);
    padding: 2px 7px;
    border-radius: var(--smp-radius-xs);
    background-color: color-mix(in srgb, var(--c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
    line-height: 1.4;
}

/* Dashboard wrapper · usa el card chrome y permite scroll vertical interno */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > #dashboard-content,
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > .flex-fill#dashboard-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ============================================================
   EVENT DETAIL · análisis financiero · slim · premium
   ============================================================ */
.smp-evt {
    padding: 12px var(--smp-content-pad) 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Código del evento — identificador inline en el título */
.smp-evt-code {
    font-family: var(--smp-font-mono);
    font-size: 0.78em;
    color: var(--smp-text);
    letter-spacing: -0.012em;
    line-height: 1.2;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--smp-radius-xs);
    background-color: var(--smp-surface-3);
    user-select: all;
    cursor: text;
    white-space: nowrap;
}

/* Status indicator — punto + label, integrado al título */
.smp-evt-status {
    --c: var(--smp-text-subtle);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7em;
    font-weight: 500;
    color: var(--c);
    margin-left: 8px;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: uppercase;
}
.smp-evt-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background-color: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
    flex: 0 0 7px;
}
.smp-evt-status--success { --c: var(--smp-success); }
.smp-evt-status--warning { --c: var(--smp-warning); }
.smp-evt-status--danger  { --c: var(--smp-danger); }
.smp-evt-status--info    { --c: var(--smp-info); }
.smp-evt-status--muted   { --c: var(--smp-text-subtle); }

/* Meta line — plana, sin chrome de card */
.smp-evt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    padding: 0 2px;
}
.smp-evt-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
}
.smp-evt-meta-item .ti {
    font-size: 13px;
    color: var(--smp-text-subtle);
}
.smp-evt-meta-item strong {
    color: var(--smp-text);
    font-weight: 500;
    letter-spacing: -0.002em;
}
.smp-evt-chip {
    --c: var(--smp-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--c);
    padding: 2px 8px;
    border-radius: var(--smp-radius-xs);
    background-color: color-mix(in srgb, var(--c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
    line-height: 1.4;
    letter-spacing: -0.002em;
}
.smp-evt-chip .ti { font-size: 11px; }
.smp-evt-chip--success  { --c: var(--smp-success); }
.smp-evt-chip--warning  { --c: var(--smp-warning); }
.smp-evt-chip--danger   { --c: var(--smp-danger); }
.smp-evt-chip--info     { --c: var(--smp-info); }
.smp-evt-chip--premium  { --c: var(--smp-premium); }
.smp-evt-chip--muted    { --c: var(--smp-text-subtle); }

/* KPI strip
   auto-fit con un min sensato (180px) evita columnas vacías cuando el grid
   se reusa en vistas con menos KPIs (event.ejs tiene 5, chapter/client/staff 4). */
.smp-evt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.smp-evt-kpi {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
/* Si el KPI tiene un .smp-evt-kpi-main, lo distribuimos en 2 columnas
   (contenido a la izquierda · chip/visual a la derecha) para evitar
   espacios muertos en cards anchas. */
.smp-evt-kpi:has(.smp-evt-kpi-main) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.smp-evt-kpi-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
/* KPI accionable: la card abre un modal al hacer clic */
.smp-evt-kpi--clickable {
    cursor: pointer;
}
.smp-evt-kpi--clickable:hover {
    border-color: var(--smp-border);
}
.smp-evt-kpi-hint {
    margin-left: auto;
    font-size: 13px;
    color: var(--smp-text-subtle);
    opacity: 0.6;
    transition: opacity var(--smp-dur-2) var(--smp-ease-out);
}
.smp-evt-kpi--clickable:hover .smp-evt-kpi-hint {
    opacity: 1;
}
.smp-evt-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-body);
    font-weight: 500;
    color: var(--smp-text-muted);
    letter-spacing: 0;
    line-height: 1.2;
}
.smp-evt-kpi-label .ti {
    font-size: 13px;
    color: var(--smp-text-subtle);
}
.smp-evt-kpi-value {
    font-size: var(--font-display);
    font-weight: 600;
    color: var(--smp-text);
    letter-spacing: -0.022em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-evt-kpi-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-weight: 400;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-evt-kpi--positive .smp-evt-kpi-value { color: var(--smp-success); }
.smp-evt-kpi--negative .smp-evt-kpi-value { color: var(--smp-brasa); }
.smp-evt-kpi--warn .smp-evt-kpi-value { color: var(--smp-warning); }

/* Right-side visual slot · trend chip o progress ring/bar */
.smp-evt-kpi-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.smp-evt-kpi-visual:empty { display: none; }
.smp-evt-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.smp-evt-kpi-delta .ti { font-size: 11px; }
.smp-evt-kpi-delta--up   { background-color: rgba(22, 163, 74, 0.10); color: #16a34a; }
.smp-evt-kpi-delta--down { background-color: rgba(220, 38, 38, 0.10); color: #dc2626; }
.smp-evt-kpi-delta--flat { background-color: var(--smp-surface-2); color: var(--smp-text-muted); }

/* Anillo de progreso (SVG) */
.smp-evt-kpi-ring {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.smp-evt-kpi-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.smp-evt-kpi-ring-track { stroke: var(--smp-surface-2); }
.smp-evt-kpi-ring-fill  { transition: stroke-dashoffset 300ms ease; }
.smp-evt-kpi-ring--good .smp-evt-kpi-ring-fill { stroke: #16a34a; }
.smp-evt-kpi-ring--warn .smp-evt-kpi-ring-fill { stroke: #d97706; }
.smp-evt-kpi-ring--bad  .smp-evt-kpi-ring-fill { stroke: #dc2626; }
.smp-evt-kpi-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
}

/* Sección dedicada: Costo vs Target 20% */
.smp-evt-target {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.smp-evt-target-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.smp-evt-target-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-emphasis);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
}
.smp-evt-target-title .ti { color: var(--smp-text-subtle); font-size: 16px; }
.smp-evt-target-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    margin-top: 2px;
}
.smp-evt-target-status {
    --c: var(--smp-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--c);
    line-height: 1.4;
}
.smp-evt-target-status .ti { font-size: 14px; }
.smp-evt-target-status--ok { --c: var(--smp-success); }
.smp-evt-target-status--warn { --c: var(--smp-warning); }
.smp-evt-target-status--bad { --c: var(--smp-brasa); }
.smp-evt-target-status--mute { --c: var(--smp-text-subtle); }
.smp-evt-target-chart-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.smp-evt-target-gauge {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}
.smp-evt-target-gauge-bar {
    position: relative;
    height: 8px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: visible;
}
.smp-evt-target-gauge-fill {
    height: 100%;
    background-color: var(--smp-success);
    border-radius: 999px;
    transition: width var(--smp-dur-3) var(--smp-ease-out), background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-target--warn .smp-evt-target-gauge-fill { background-color: var(--smp-warning); }
.smp-evt-target--bad .smp-evt-target-gauge-fill { background-color: var(--smp-brasa); }
.smp-evt-target--empty .smp-evt-target-gauge-fill { background-color: var(--smp-text-subtle); }
.smp-evt-target-gauge-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background-color: var(--smp-text);
    transform: translateX(-1px);
    border-radius: 1px;
}
.smp-evt-target-gauge-marker::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--smp-text);
}
.smp-evt-target-gauge-marker-label { display: none; }
.smp-evt-target-gauge-scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--smp-text-subtle);
    font-variant-numeric: tabular-nums;
    padding-top: 6px;
}
.smp-evt-target-gauge-scale span:nth-child(2) {
    color: var(--smp-text);
    font-weight: 500;
}
.smp-evt-target-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.smp-evt-target-stat {
    background-color: var(--smp-surface-2);
    border-radius: var(--smp-radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.smp-evt-target-stat--ok .smp-evt-target-stat-value { color: var(--smp-success); }
.smp-evt-target-stat--bad .smp-evt-target-stat-value { color: var(--smp-brasa); }
.smp-evt-target-stat-label {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-weight: 500;
}
.smp-evt-target-stat-value {
    font-size: var(--font-display);
    font-weight: 600;
    color: var(--smp-text);
    letter-spacing: -0.018em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.smp-evt-target-stat-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-evt-target-chart-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
}
.smp-evt-target-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--smp-border-subtle);
    padding-top: 12px;
}
.smp-evt-target-list-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-evt-target-list-body { display: flex; flex-direction: column; gap: 6px; }
.smp-evt-target-cat {
    --c: var(--smp-text-subtle);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
    gap: 10px;
    align-items: center;
    font-size: var(--font-body);
}
.smp-evt-target-cat-name {
    font-weight: 500;
    color: var(--smp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-evt-target-cat-bar {
    height: 6px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.smp-evt-target-cat-fill {
    height: 100%;
    background-color: var(--c);
    border-radius: 999px;
    transition: width var(--smp-dur-3) var(--smp-ease-out);
}
.smp-evt-target-cat-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.smp-evt-target-cat-pct {
    text-align: right;
    font-size: var(--font-caption);
    font-variant-numeric: tabular-nums;
}
.smp-evt-target-list-empty {
    color: var(--smp-text-subtle);
    font-size: var(--font-body);
    padding: 8px 0;
    text-align: center;
}

/* Rows / cards */
.smp-evt-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}
.smp-evt-row--main { grid-template-columns: 2fr 1fr; }
.smp-evt-row--3    { grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width: 1099.98px) {
    .smp-evt-row--main,
    .smp-evt-row--3 { grid-template-columns: 1fr; }
}

.smp-evt-card {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 12px 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.smp-evt-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.smp-evt-card-title {
    font-size: var(--font-emphasis);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.smp-evt-card-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    margin-top: 2px;
    font-weight: 400;
}
.smp-evt-card-action {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Apex chart consistency */
.smp-evt-card .apexcharts-text,
.smp-evt-card .apexcharts-legend-text {
    font-family: var(--smp-font) !important;
}
.smp-evt-card .apexcharts-tooltip {
    background-color: var(--smp-surface-2) !important;
    border: 1px solid var(--smp-border) !important;
    box-shadow: var(--smp-shadow-md) !important;
    border-radius: var(--smp-radius-sm) !important;
    color: var(--smp-text) !important;
}
.smp-evt-card .apexcharts-tooltip-title {
    background-color: var(--smp-surface-3) !important;
    border-bottom-color: var(--smp-border) !important;
    font-weight: 500 !important;
}

/* Stat list (key/value pairs) */
.smp-evt-stat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.smp-evt-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--smp-border-subtle);
    font-size: var(--font-body);
}
.smp-evt-stat:last-child { border-bottom: 0; }
.smp-evt-stat-label {
    color: var(--smp-text-muted);
    font-weight: 400;
}
.smp-evt-stat-value {
    color: var(--smp-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}
.smp-evt-stat--total {
    border-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid var(--smp-border);
}
.smp-evt-stat--total .smp-evt-stat-label { color: var(--smp-text); font-weight: 500; }
.smp-evt-stat--total .smp-evt-stat-value { font-weight: 600; }

/* Category bars (cost composition) */
.smp-evt-cats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.smp-evt-cat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
}
.smp-evt-cat-label {
    font-size: var(--font-body);
    color: var(--smp-text);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.smp-evt-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--c, var(--smp-text-subtle));
    flex: 0 0 8px;
}
.smp-evt-cat-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-evt-cat-amount {
    font-size: var(--font-body);
    color: var(--smp-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1.2;
}
.smp-evt-cat-amount-sub {
    display: block;
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-weight: 400;
}
.smp-evt-cat-bar {
    grid-column: 1 / -1;
    height: 4px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: hidden;
}
.smp-evt-cat-fill {
    height: 100%;
    width: 0;
    background-color: var(--c, var(--smp-text-subtle));
    border-radius: 999px;
    transition: width var(--smp-dur-3) var(--smp-ease-out);
}

/* Progress (collection / payments) */
.smp-evt-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.smp-evt-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
}
.smp-evt-progress-head strong {
    color: var(--smp-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.smp-evt-progress-bar {
    position: relative;
    height: 6px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: visible;
}
.smp-evt-progress-fill {
    height: 100%;
    width: 0;
    background-color: var(--smp-success);
    border-radius: 999px;
    transition: width var(--smp-dur-3) var(--smp-ease-out);
}
.smp-evt-progress-fill--warn { background-color: var(--smp-warning); }
.smp-evt-progress-fill--danger { background-color: var(--smp-brasa); }
.smp-evt-progress-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background-color: var(--smp-text);
    transform: translateX(-1px);
    border-radius: 1px;
    pointer-events: none;
}

/* Slim table */
.smp-evt-table-wrap {
    margin: 0 -14px -12px;
    border-top: 1px solid var(--smp-border-subtle);
    overflow-x: auto;
}
/* Variante con scroll interno · header sticky.
   Llega DINÁMICAMENTE lo más abajo posible del viewport. La fórmula resta
   un offset aproximado del chrome de arriba (header + KPIs + tabs + card head)
   para que la tabla use casi toda la altura visible disponible. */
.smp-evt-table-wrap--scroll {
    max-height: calc(100dvh - 280px);
    min-height: 200px;
    overflow-y: auto;
}
.smp-evt-table-wrap--scroll thead th {
    position: sticky;
    top: 0;
    background-color: var(--smp-surface-1);
    z-index: 1;
    box-shadow: 0 1px 0 var(--smp-border-subtle);
}
.smp-evt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-body);
    color: var(--smp-text);
}
.smp-evt-table th,
.smp-evt-table td {
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid var(--smp-border-subtle);
    vertical-align: middle;
}
.smp-evt-table th {
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--smp-text-muted);
    letter-spacing: 0;
    background-color: transparent;
    white-space: nowrap;
}
.smp-evt-table td.smp-evt-num,
.smp-evt-table th.smp-evt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.smp-evt-table tbody tr {
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-table tbody tr.is-clickable { cursor: pointer; }
.smp-evt-table tbody tr.is-clickable:hover { background-color: var(--smp-surface-3); }
/* Gastos que no suman al costo (cancelados / affects_budget = false) */
.smp-evt-table tbody tr.smp-evt-row--muted { opacity: 0.55; }
.smp-evt-table tbody tr:last-child td { border-bottom: 0; }
.smp-evt-table-folio {
    font-family: var(--smp-font-mono);
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    letter-spacing: -0.008em;
}
.smp-evt-table-primary {
    font-weight: 500;
    color: var(--smp-text);
}
.smp-evt-table-sub {
    display: block;
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-weight: 400;
    margin-top: 1px;
}

/* Numbers with sign color */
.smp-evt-num-pos { color: var(--smp-success); font-variant-numeric: tabular-nums; font-weight: 500; }
.smp-evt-num-neg { color: var(--smp-brasa);   font-variant-numeric: tabular-nums; font-weight: 500; }

/* Empty state */
.smp-evt-empty {
    text-align: center;
    color: var(--smp-text-subtle);
    font-size: var(--font-body);
    padding: 24px 12px;
}

/* Collapsible attendees */
.smp-evt-collapse {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    overflow: hidden;
}
.smp-evt-collapse > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--smp-text);
    font-size: var(--font-emphasis);
    font-weight: 500;
    transition: background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-collapse > summary::-webkit-details-marker { display: none; }
.smp-evt-collapse > summary:hover { background-color: var(--smp-surface-3); }
.smp-evt-collapse > summary .ti-chevron-down {
    transition: transform var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-collapse[open] > summary .ti-chevron-down { transform: rotate(180deg); }
.smp-evt-collapse-body { border-top: 1px solid var(--smp-border-subtle); }

/* Mini stat rows (cobranza panel) */
.smp-evt-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.smp-evt-mini-item {
    padding: 6px 0;
    border-top: 1px solid var(--smp-border-subtle);
}
.smp-evt-mini-item:nth-child(-n+2) {
    border-top: 0;
    padding-top: 0;
}
.smp-evt-mini-label {
    display: block;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    margin-bottom: 2px;
    font-weight: 400;
}
.smp-evt-mini-value {
    font-size: var(--font-emphasis);
    font-weight: 600;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.008em;
}
.smp-evt-mini-value--success { color: var(--smp-success); }
.smp-evt-mini-value--warning { color: var(--smp-warning); }
.smp-evt-mini-value--danger  { color: var(--smp-brasa); }

/* Page wrapper · permitir scroll vertical interno */
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > #event-detail-content,
.page-wrapper > .d-flex.flex-column[style*="100dvh"] > .flex-fill#event-detail-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ============================================================
   EVENT DETAIL · espaciado en tab-panes (Tabler maneja toggle)
   ============================================================ */
#tab-finanzas.show,
#tab-automations.show,
#tab-attendees.show,
#tab-grillmasters.show,
#tab-staff-people.show {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Form inline para agregar personas (nombre + correo + tel + botón) */
.smp-evt-people-form {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr auto;
    gap: 8px;
    align-items: center;
}

/* Form de asignación de event_staff (picker + tipo + horario + pago + agregar).
   Dos filas: arriba los selects, abajo los meta-campos compactos. */
.smp-evt-assign-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.smp-evt-assign-form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}
/* Picker row (staff + tipo): el staff ocupa 2 cols para alinear con
   Entrada+Salida; Tipo cae en la 3ra col, alineado con Pago. */
.smp-evt-assign-form-row:not(.smp-evt-assign-form-row--meta) > *:first-child {
    grid-column: span 2;
}
.smp-evt-assign-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    min-width: 0;
}
.smp-evt-assign-label {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    font-weight: 500;
    letter-spacing: 0;
}
.smp-evt-assign-submit { align-self: end; }
@media (max-width: 767.98px) {
    .smp-evt-assign-form-row,
    .smp-evt-assign-form-row--meta { grid-template-columns: 1fr; }
}

/* Tom Select options dentro de pickers de event_staff */
.smp-evt-picker-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
}
.smp-evt-picker-option-name {
    color: var(--smp-text);
    font-size: var(--font-body);
    font-weight: 500;
    line-height: 1.3;
}
.smp-evt-picker-option-sub {
    color: var(--smp-text-subtle);
    font-size: var(--font-caption);
    line-height: 1.3;
}
.smp-evt-picker-empty {
    padding: 10px 12px;
    color: var(--smp-text-subtle);
    font-size: var(--font-body);
}
.smp-evt-picker-empty a {
    color: var(--smp-brasa);
    font-weight: 500;
    text-decoration: none;
}
.smp-evt-picker-empty a:hover { text-decoration: underline; }

/* Form para vincular producto Shopify desde la vista del evento */
.smp-evt-shopify-form {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
}
.smp-evt-shopify-form .form-select { min-width: 0; }
@media (max-width: 575.98px) {
    .smp-evt-shopify-form {
        grid-template-columns: 1fr;
    }
    .smp-evt-shopify-form .btn { width: 100%; }
}

/* Link inline en el subtítulo de la cabecera (Maestros/Staff → Dar de alta) */
.smp-evt-auto-head-link {
    color: var(--smp-brasa);
    font-weight: 500;
    text-decoration: none;
    margin-left: 4px;
}
.smp-evt-auto-head-link:hover { text-decoration: underline; }

/* Lista de destinatarios del broadcast (modal Enviar aviso) */
.smp-evt-recipients {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    padding: 6px;
    background-color: var(--smp-surface-1);
}
.smp-evt-recipients-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--smp-text-subtle);
    font-size: var(--font-body);
}
.smp-evt-recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--smp-radius-xs);
    cursor: pointer;
    transition: background-color var(--smp-dur-2) var(--smp-ease);
    margin: 0;
}
.smp-evt-recipient:hover { background-color: var(--smp-surface-3); }
.smp-evt-recipient input[type="checkbox"] { flex-shrink: 0; margin: 0; }
.smp-evt-recipient-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.smp-evt-recipient-name {
    color: var(--smp-text);
    font-size: var(--font-body);
    font-weight: 500;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.smp-evt-recipient-name .ti { color: var(--smp-text-subtle); font-size: 13px; }
.smp-evt-recipient-sub {
    color: var(--smp-text-subtle);
    font-size: var(--font-caption);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón de acción en celda de tabla (eliminar / editar). Reemplaza el kebab
   genérico — chico, neutro, hover muted. */
.smp-evt-row-action {
    background: transparent;
    border: 1px solid transparent;
    color: var(--smp-text-subtle);
    width: 26px;
    height: 26px;
    border-radius: var(--smp-radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-row-action:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-brasa);
    border-color: var(--smp-border-subtle);
}
.smp-evt-row-action .ti { font-size: 14px; }
.smp-evt-people-form input[name="rol"] ~ * {
    /* nada, solo placeholder hook */
}
.smp-evt-people-form:has(input[name="rol"]) {
    grid-template-columns: 1.2fr 0.9fr 1.2fr 1fr auto;
}
@media (max-width: 767.98px) {
    .smp-evt-people-form,
    .smp-evt-people-form:has(input[name="rol"]) {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   EVENT DETAIL · Automatizaciones (UI mock) — flat
   ============================================================ */
.smp-evt-auto-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* En Asistentes los paneles manual/shopify envuelven form+tabla y necesitan
   su propio stack con respiro. */
.smp-evt-auto-wrap > #att-mode-manual,
.smp-evt-auto-wrap > #att-mode-shopify {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Tabla standalone dentro de auto-wrap (Asistentes / Maestros / Staff):
   no usa el bleed del smp-evt-card, así que la envolvemos como card propia. */
.smp-evt-auto-wrap .smp-evt-table-wrap {
    margin: 0 !important;
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    background-color: var(--smp-surface-1);
    overflow: hidden;
}
.smp-evt-auto-wrap .smp-evt-table th,
.smp-evt-auto-wrap .smp-evt-table td {
    padding: 10px 14px;
}
.smp-evt-auto-wrap .smp-evt-empty { padding: 32px 12px; }

/* Note inline · reemplazo flat de Bootstrap alert.
   Misma altura visual que la fila de form (smp-evt-people-form) para que
   el toggle entre paneles no produzca saltos de layout. */
.smp-evt-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--smp-surface-3);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    font-size: var(--font-body);
    color: var(--smp-text-muted);
    line-height: 1.4;
}
.smp-evt-note .ti {
    font-size: 14px;
    color: var(--smp-text-subtle);
    flex-shrink: 0;
}
.smp-evt-note--info {
    background-color: var(--smp-info-bg);
    border-color: var(--smp-info-border);
    color: var(--smp-text);
}
.smp-evt-note--info .ti { color: var(--smp-info); }
.smp-evt-auto-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.smp-evt-auto-head-text { min-width: 0; max-width: 720px; }
.smp-evt-auto-head-title {
    font-size: var(--font-emphasis);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.smp-evt-auto-head-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    margin-top: 2px;
    line-height: 1.45;
}
.smp-evt-auto-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-body);
    font-weight: 500;
    color: var(--smp-text);
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    padding: 6px 12px;
    border-radius: var(--smp-radius-sm);
    cursor: pointer;
    transition: background-color var(--smp-dur-2) var(--smp-ease),
                border-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-auto-new:hover {
    background-color: var(--smp-surface-3);
    border-color: var(--smp-border-strong);
}

/* Lista de automatizaciones — tabla densa, mismo lenguaje que .smp-evt-table */
.smp-evt-auto-list {
    display: flex;
    flex-direction: column;
}
.smp-evt-auto-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-evt-auto-card:last-child { border-bottom: 0; }
.smp-evt-auto-card--paused .smp-evt-auto-card-title,
.smp-evt-auto-card--paused .smp-evt-auto-card-preview { color: var(--smp-text-muted); }

.smp-evt-auto-card-main { min-width: 0; }
.smp-evt-auto-card-title {
    font-size: var(--font-body);
    font-weight: 500;
    color: var(--smp-text);
    line-height: 1.25;
}
.smp-evt-auto-card-preview {
    display: block;
    margin-top: 2px;
    color: var(--smp-text-subtle);
    font-size: var(--font-caption);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-evt-auto-card-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    min-width: 0;
}
.smp-evt-auto-card-trigger .ti { color: var(--smp-text-subtle); font-size: 13px; }
.smp-evt-auto-card-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.smp-evt-auto-card-channels {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.smp-evt-auto-card-channel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--smp-radius-xs);
    font-weight: 500;
    background-color: var(--smp-surface-3);
    color: var(--smp-text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
}
.smp-evt-auto-card-channel .ti { font-size: 11px; }

.smp-evt-auto-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.smp-evt-auto-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--smp-text-muted);
    padding: 3px 8px;
    border-radius: var(--smp-radius-xs);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--smp-dur-2) var(--smp-ease),
                color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-auto-card-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background-color: currentColor;
}
.smp-evt-auto-card--active .smp-evt-auto-card-status { color: var(--smp-success); }
.smp-evt-auto-card-status:hover { background-color: var(--smp-surface-3); }

.smp-evt-auto-card-kebab {
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--smp-text-subtle);
    cursor: pointer;
    border-radius: var(--smp-radius-xs);
    transition: background-color var(--smp-dur-2) var(--smp-ease),
                color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-auto-card-kebab:hover { background-color: var(--smp-surface-3); color: var(--smp-text); }

/* Empty state — sin border dashed, solo tipografía */
.smp-evt-auto-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 32px 12px;
}
.smp-evt-auto-empty-title {
    font-size: var(--font-body);
    font-weight: 500;
    color: var(--smp-text);
}
.smp-evt-auto-empty-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    max-width: 420px;
    line-height: 1.5;
}

/* Catálogo de triggers disponibles — minimal */
.smp-evt-auto-catalog {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.smp-evt-auto-catalog-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-evt-auto-catalog-head .text-muted {
    font-weight: 400;
    color: var(--smp-text-subtle) !important;
}
.smp-evt-auto-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 991.98px) {
    .smp-evt-auto-catalog-grid { grid-template-columns: 1fr; }
}
.smp-evt-auto-trigger-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--smp-dur-2) var(--smp-ease),
                background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-auto-trigger-card:hover {
    border-color: var(--smp-border-strong);
    background-color: var(--smp-surface-3);
}
.smp-evt-auto-trigger-card-icon {
    color: var(--smp-text-subtle);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.smp-evt-auto-trigger-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.smp-evt-auto-trigger-card-title {
    font-size: var(--font-body);
    font-weight: 500;
    color: var(--smp-text);
    line-height: 1.25;
}
.smp-evt-auto-trigger-card-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-subtle);
    line-height: 1.4;
}
.smp-evt-auto-trigger-card-arrow {
    color: var(--smp-text-subtle);
    font-size: 13px;
}

/* Offcanvas form · selección de trigger y canal */
.smp-evt-auto-form-trigger-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.smp-evt-auto-form-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--smp-surface-4, #fff);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    transition: border-color var(--smp-dur-2) var(--smp-ease),
                background-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-auto-form-trigger:hover { border-color: var(--smp-border-strong); }
.smp-evt-auto-form-trigger input { accent-color: var(--smp-text); margin-right: 10px; }
.smp-evt-auto-form-trigger:has(input:checked) {
    border-color: var(--smp-text);
    background-color: var(--smp-surface-3);
}
.smp-evt-auto-form-trigger-body {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-body);
    color: var(--smp-text);
}
.smp-evt-auto-form-trigger-body .ti { color: var(--smp-text-muted); }

.smp-evt-auto-form-channel {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background-color: var(--smp-surface-4, #fff);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    transition: border-color var(--smp-dur-2) var(--smp-ease),
                background-color var(--smp-dur-2) var(--smp-ease),
                color var(--smp-dur-2) var(--smp-ease);
}
.smp-evt-auto-form-channel input { accent-color: var(--smp-text); margin-right: 6px; }
.smp-evt-auto-form-channel:has(input:checked) {
    border-color: var(--smp-text);
    color: var(--smp-text);
    background-color: var(--smp-surface-3);
}
.smp-evt-auto-form-channel-body { display: inline-flex; align-items: center; gap: 5px; }
.smp-evt-auto-form-channel-body .ti { font-size: 13px; }

/* ============================================================
   MONITOR · Dashboard analítico venta vs meta
   ============================================================ */

#monitor-content {
    padding: 0.5rem;
}

/* ---------- KPI band ---------- */
.smp-monitor-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}
.smp-monitor-kpi {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.smp-monitor-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.smp-monitor-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-body);
    font-weight: 500;
    color: var(--smp-text-muted);
    letter-spacing: 0;
}
.smp-monitor-kpi-label .ti { font-size: 14px; }

.smp-monitor-help {
    color: var(--smp-text-muted);
    font-size: 13px !important;
    cursor: help;
    transition: color 150ms ease;
    margin-left: 2px;
    opacity: 0.6;
}
.smp-monitor-help:hover { color: var(--smp-text); opacity: 1; }
.smp-monitor-card-title .smp-monitor-help { font-size: 14px !important; }
.smp-monitor-kpi-value {
    font-size: var(--font-display);
    font-weight: 600;
    color: var(--smp-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    letter-spacing: -0.018em;
}
.smp-monitor-kpi-value small { font-size: var(--font-caption); font-weight: 500; letter-spacing: 0; }
.smp-monitor-kpi-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.smp-monitor-kpi-num { font-variant-numeric: tabular-nums; }

/* tone se transmite por el color del ícono y del valor, no por strip vertical */

.smp-monitor-kpi-bar {
    position: relative;
    height: 6px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: visible;
}
.smp-monitor-kpi-bar-fill {
    height: 100%;
    background-color: var(--smp-text);
    border-radius: 999px;
    transition:
        width var(--smp-dur-4) var(--smp-ease-out),
        background-color var(--smp-dur-3) var(--smp-ease-out);
}
.smp-monitor-kpi-bar-fill[data-tone="good"] { background-color: #16a34a; }
.smp-monitor-kpi-bar-fill[data-tone="warn"] { background-color: #d97706; }
.smp-monitor-kpi-bar-fill[data-tone="bad"]  { background-color: #dc2626; }
.smp-monitor-kpi-bar-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 10px;
    background-color: var(--smp-text);
    transform: translateX(-1px);
}

.smp-monitor-tone--good { color: #16a34a; }
.smp-monitor-tone--warn { color: #d97706; }
.smp-monitor-tone--bad  { color: #dc2626; }
.smp-monitor-tone--neutral { color: var(--smp-text-muted); }

.smp-monitor-delta {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--smp-radius-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: var(--font-caption);
}
.smp-monitor-delta--good { color: #15803d; background-color: rgba(34, 197, 94, 0.10); }
.smp-monitor-delta--bad  { color: #b91c1c; background-color: rgba(239, 68, 68, 0.10); }

/* ---------- Insights ---------- */
.smp-monitor-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.smp-monitor-insight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    flex: 1 1 280px;
    max-width: 480px;
    min-width: 0;
}
.smp-monitor-insight > .ti {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--smp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.smp-monitor-insight--danger > .ti  { color: #b91c1c; background-color: rgba(239, 68, 68, 0.10); }
.smp-monitor-insight--warning > .ti { color: #b45309; background-color: rgba(245, 158, 11, 0.10); }
.smp-monitor-insight--success > .ti { color: #15803d; background-color: rgba(34, 197, 94, 0.10); }
.smp-monitor-insight--info > .ti    { color: #1d4ed8; background-color: rgba(59, 130, 246, 0.10); }
.smp-monitor-insight-title { font-weight: 500; color: var(--smp-text); margin-bottom: 2px; font-size: var(--font-body); }
.smp-monitor-insight-detail { font-size: var(--font-caption); color: var(--smp-text-muted); line-height: 1.4; }
.smp-monitor-insight-body { min-width: 0; }

/* ---------- Cards generales del dashboard ---------- */
.smp-monitor-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.smp-monitor-row .smp-monitor-card--wide { grid-column: span 1; }
@media (max-width: 992px) {
    .smp-monitor-row { grid-template-columns: 1fr; }
}
.smp-monitor-card {
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius);
    padding: 18px 20px;
}
.smp-monitor-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--smp-border-subtle);
    flex-wrap: wrap;
}
.smp-monitor-card-title {
    margin: 0;
    font-size: var(--font-emphasis);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.smp-monitor-card-sub {
    margin: 3px 0 0;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
}

/* ---------- Segmented control ---------- */
.smp-monitor-segmented {
    display: inline-flex;
    background-color: var(--smp-surface-3);
    border-radius: var(--smp-radius-sm);
    padding: 2px;
    gap: 2px;
}
.smp-monitor-segmented button {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    border-radius: var(--smp-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 150ms, color 150ms;
}
.smp-monitor-segmented button:hover { color: var(--smp-text); }
.smp-monitor-segmented button.active {
    background-color: var(--smp-surface-1);
    color: var(--smp-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.smp-monitor-segmented .ti { font-size: 13px; }

/* ---------- Ranking bars ---------- */
.smp-monitor-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 380px;
    overflow-y: auto;
}
.smp-monitor-rank-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smp-monitor-rank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--font-caption);
}
.smp-monitor-rank-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--smp-text);
    min-width: 0;
}
.smp-monitor-rank-name strong { font-weight: 500; }
.smp-monitor-rank-bucket {
    font-size: var(--font-meta);
    padding: 1px 6px;
    border-radius: var(--smp-radius-sm);
    font-weight: 500;
    letter-spacing: 0;
}
.smp-monitor-rank-bucket--public { background-color: rgba(14, 165, 233, 0.12); color: #0369a1; }
.smp-monitor-rank-bucket--private { background-color: rgba(139, 92, 246, 0.12); color: #6d28d9; }
.smp-monitor-rank-pct { font-weight: 600; font-variant-numeric: tabular-nums; }

.smp-monitor-rank-bar {
    position: relative;
    height: 10px;
    background-color: var(--smp-surface-3);
    border-radius: 999px;
    overflow: visible;
}
.smp-monitor-rank-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    transition: width var(--smp-dur-4) var(--smp-ease-out);
}
.smp-monitor-rank-bar-fill--good { background-color: #16a34a; }
.smp-monitor-rank-bar-fill--warn { background-color: #d97706; }
.smp-monitor-rank-bar-fill--bad  { background-color: #dc2626; }
.smp-monitor-rank-bar-fill--neutral { background-color: var(--smp-text-muted); }
.smp-monitor-rank-bar-target {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 16px;
    background-color: var(--smp-text);
    transform: translateX(-1px);
}
.smp-monitor-rank-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-meta);
    color: var(--smp-text-muted);
}
.smp-monitor-rank-amounts { font-variant-numeric: tabular-nums; }

/* ---------- Heatmap ---------- */
.smp-monitor-legend {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-meta);
    color: var(--smp-text-muted);
}
.smp-monitor-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.smp-monitor-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--smp-border-subtle);
}
.smp-monitor-heatmap-wrap { overflow-x: auto; }
.smp-monitor-heatmap-table {
    border-collapse: separate;
    border-spacing: 3px;
    font-size: var(--font-meta);
    font-variant-numeric: tabular-nums;
}
.smp-monitor-heatmap-table th {
    color: var(--smp-text-muted);
    font-weight: 500;
    text-align: center;
    padding: 4px 6px;
    letter-spacing: 0;
}
.smp-monitor-heatmap-rowhead {
    text-align: left !important;
    color: var(--smp-text) !important;
    font-weight: 500 !important;
    white-space: nowrap;
    padding-right: 10px !important;
    min-width: 9rem;
}
.smp-monitor-heatmap-cell {
    width: 44px;
    height: 32px;
    text-align: center;
    font-weight: 500;
    color: #0f172a;
    border-radius: 4px;
    cursor: default;
    transition:
        transform var(--smp-dur-2) var(--smp-ease-out),
        background-color var(--smp-dur-3) var(--smp-ease-out);
}
.smp-monitor-heatmap-cell:hover { transform: scale(1.08); }
.smp-monitor-heatmap-cell--empty {
    background-color: var(--smp-surface-3);
    color: var(--smp-text-muted);
}
.smp-monitor-heatmap-corner { background: transparent; }

/* ---------- Mix ---------- */
.smp-monitor-mix-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.smp-monitor-mix-list-title {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    letter-spacing: 0;
    margin-bottom: 4px;
    font-weight: 500;
}
.smp-monitor-mix-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    font-size: var(--font-caption);
    padding: 4px 0;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-monitor-mix-item:last-child { border-bottom: none; }
.smp-monitor-mix-type { color: var(--smp-text); font-weight: 500; }
.smp-monitor-mix-amount { color: var(--smp-text); font-variant-numeric: tabular-nums; }
.smp-monitor-mix-share { color: var(--smp-text-muted); font-variant-numeric: tabular-nums; min-width: 3rem; text-align: right; }

.smp-monitor-empty {
    color: var(--smp-text-muted);
    font-size: var(--font-meta);
    font-style: italic;
}
.smp-monitor-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Modal de edición de metas ---------- */
.smp-monitor-targets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-caption);
}
.smp-monitor-targets-table th,
.smp-monitor-targets-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--smp-border-subtle);
    text-align: center;
    vertical-align: middle;
}
.smp-monitor-targets-table thead th {
    background-color: var(--smp-surface-2);
    font-weight: 500;
    color: var(--smp-text-muted);
    font-size: var(--font-caption);
}
.smp-monitor-targets-chapter-col { text-align: left !important; min-width: 8rem; }
.smp-monitor-target-input {
    width: 6.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Staff detail · grid del tab Resumen ----------
   Sin .row de Bootstrap para evitar overflow horizontal por su gutter negativo.
   2 columnas para datos personales + esquema de pago, fila completa para los
   eventos recientes. */
.smp-staff-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
.smp-staff-overview-grid-full { grid-column: 1 / -1; }
@media (max-width: 768px) {
    .smp-staff-overview-grid { grid-template-columns: 1fr; }
}

/* ---------- Staff detail · lista de eventos recientes ---------- */
.smp-staff-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-staff-recent-row:first-child { padding-top: 4px; }
.smp-staff-recent-row:last-child {
    padding-bottom: 4px;
    border-bottom: 0;
}
.smp-staff-recent-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.smp-staff-recent-name {
    font-size: var(--smp-text-sm);
    font-weight: 500;
    color: var(--smp-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.smp-staff-recent-name:hover { color: var(--smp-text); text-decoration: underline; }
.smp-staff-recent-meta {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
}
.smp-staff-recent-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.smp-staff-recent-hours {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
    font-variant-numeric: tabular-nums;
}
.smp-staff-recent-pay {
    font-size: var(--smp-text-sm);
    color: var(--smp-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.smp-staff-table-amount {
    color: var(--smp-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ---------- Global search · modal de detalle (gasto/pago preview) ---------- */
.smp-gs-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background-color: rgba(15, 15, 17, 0.55);
    backdrop-filter: blur(4px);
    animation: smp-gs-fade 120ms var(--smp-ease-out);
}
.smp-gs-detail-modal[hidden] { display: none; }
.smp-gs-detail-panel {
    width: 100%;
    max-width: 460px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius-lg);
    box-shadow: var(--smp-shadow-lg);
    overflow: hidden;
    animation: smp-gs-pop 140ms var(--smp-ease-out);
}
.smp-gs-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-gs-detail-eyebrow {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-subtle);
    font-weight: 500;
    margin-bottom: 2px;
}
.smp-gs-detail-title {
    font-size: var(--smp-text-md);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
}
.smp-gs-detail-close {
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--smp-text-muted);
    cursor: pointer;
    border-radius: var(--smp-radius-xs);
    flex-shrink: 0;
}
.smp-gs-detail-close:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-gs-detail-body { padding: 14px 16px 18px; }
.smp-gs-detail-hero {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background-color: var(--smp-surface-3);
    border-radius: var(--smp-radius-sm);
    margin-bottom: 12px;
}
.smp-gs-detail-hero-label {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-gs-detail-hero-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin-top: 2px;
}
.smp-gs-detail-kv {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: start;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-gs-detail-kv:last-child { border-bottom: 0; }
.smp-gs-detail-kv-label {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-gs-detail-kv-value {
    font-size: var(--smp-text-sm);
    color: var(--smp-text);
    word-break: break-word;
}
.smp-gs-detail-kv-value.is-mono {
    font-family: var(--smp-font-mono);
    font-size: var(--smp-text-xs);
}

/* Sección de eventos vinculados dentro del modal de detalle */
.smp-gs-detail-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--smp-border-subtle);
}
.smp-gs-detail-section-title {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
    font-weight: 500;
    margin-bottom: 8px;
}
.smp-gs-detail-events-loading,
.smp-gs-detail-empty {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-subtle);
    padding: 4px 0;
}
.smp-gs-detail-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.smp-gs-detail-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: var(--smp-surface-3);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    color: var(--smp-text);
    font-size: var(--smp-text-sm);
    text-decoration: none;
    transition: background-color var(--smp-dur-2) var(--smp-ease), border-color var(--smp-dur-2) var(--smp-ease);
}
.smp-gs-detail-event-chip:hover {
    background-color: var(--smp-surface-4);
    border-color: var(--smp-border);
    color: var(--smp-text);
}
.smp-gs-detail-event-chip.is-orphan {
    background-color: var(--smp-warning-bg);
    border-color: var(--smp-warning-border);
    color: var(--smp-warning);
    cursor: help;
}
.smp-gs-detail-event-code {
    font-family: var(--smp-font-mono);
    font-size: var(--smp-text-xs);
    font-weight: 500;
}
.smp-gs-detail-event-name {
    color: var(--smp-text-muted);
    font-size: var(--smp-text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.smp-gs-detail-event-chip .ti { font-size: 12px; opacity: 0.7; flex-shrink: 0; margin-left: auto; }

/* ---------- Badge de códigos huérfanos en tabla de gastos ---------- */
.smp-expense-orphan-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background-color: var(--smp-warning-bg);
    color: var(--smp-warning);
    border: 1px solid var(--smp-warning-border);
    border-radius: var(--smp-radius-xs);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    cursor: help;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-expense-orphan-badge .ti { font-size: 11px; flex-shrink: 0; }
.smp-expense-orphan-badge-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---------- Alert de códigos huérfanos en offcanvas de gasto ---------- */
.smp-evx-orphan-alert {
    padding: 12px 14px;
    background-color: var(--smp-warning-bg);
    border: 1px solid var(--smp-warning-border);
    border-radius: var(--smp-radius-sm);
    margin-bottom: 12px;
}
.smp-evx-orphan-alert-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.smp-evx-orphan-alert-head > .ti {
    font-size: 18px;
    color: var(--smp-warning);
    margin-top: 1px;
    flex-shrink: 0;
}
.smp-evx-orphan-alert-title {
    font-size: var(--smp-text-sm);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
}
.smp-evx-orphan-alert-sub {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.smp-evx-orphan-alert-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    margin-left: 28px;
}
.smp-evx-orphan-code {
    display: inline-block;
    padding: 2px 7px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-warning-border);
    border-radius: var(--smp-radius-xs);
    font-family: var(--smp-font-mono);
    font-size: 11px;
    color: var(--smp-warning);
    line-height: 1.4;
}
.smp-evx-orphan-alert-actions {
    margin-top: 10px;
    margin-left: 28px;
}
.smp-evx-orphan-alert-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background-color: var(--smp-text);
    color: var(--smp-surface-1);
    border-radius: var(--smp-radius-xs);
    font-size: var(--smp-text-xs);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-orphan-alert-cta:hover {
    color: var(--smp-surface-1);
    opacity: 0.85;
}
.smp-evx-orphan-alert-cta .ti { font-size: 12px; }

/* ---------- Botón "Repartir equitativamente" del distribuidor ---------- */
.smp-evx-dist-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}
.smp-evx-dist-distribute {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background-color: var(--smp-surface-3);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-xs);
    color: var(--smp-text-muted);
    font-size: var(--smp-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease);
}
.smp-evx-dist-distribute:hover:not(:disabled) {
    background-color: var(--smp-surface-4);
    color: var(--smp-text);
    border-color: var(--smp-border);
}
.smp-evx-dist-distribute:disabled,
.smp-evx-dist-distribute.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
}
.smp-evx-dist-distribute .ti { font-size: 13px; }

/* Modal edit-user: el header con border-bottom choca contra la fila de tabs
   (.nav-tabs) que viene justo después en .modal-body. Lo limpiamos para que
   solo haya una línea horizontal (la de los tabs). */
#editUserModal .modal-header { border-bottom: 0; }

/* ---------- Permissions modal · tabla limpia + subsección de tabs ----------
   IMPORTANTE: nunca usar overflow-x: hidden en .modal-body / .tab-pane —
   recorta los dropdowns de TomSelect que se renderizan en absolute dentro
   del modal. En su lugar atacamos la raíz del overflow:
   - permissions table: table-layout: fixed con widths que sumen 100%
   - tab info: neutralizamos el gutter negativo de .row de Bootstrap. */
#tabs-user-info .row { margin-left: 0; margin-right: 0; }
#tabs-user-info .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
#tabs-user-info .row > .col-md-6:first-child { padding-right: 6px; }
#tabs-user-info .row > .col-md-6:nth-child(2) { padding-left: 6px; }
@media (max-width: 767px) {
    #tabs-user-info .row > .col-md-6:first-child,
    #tabs-user-info .row > .col-md-6:nth-child(2) {
        padding-left: 0;
        padding-right: 0;
    }
}

#user-permissions-table {
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    overflow: hidden;
    font-size: var(--smp-text-sm);
    table-layout: fixed;
    width: 100%;
}
#user-permissions-table thead th {
    background-color: var(--smp-surface-3);
    color: var(--smp-text-muted);
    font-weight: 500;
    font-size: var(--smp-text-xs);
    padding: 6px 4px;
    border-bottom: 1px solid var(--smp-border-subtle);
}
#user-permissions-table tbody td {
    padding: 6px 4px;
    border-bottom: 1px solid var(--smp-border-subtle);
    vertical-align: middle;
}
#user-permissions-table tbody tr:last-child td { border-bottom: 0; }
.smp-perm-th-module { width: 22%; padding-left: 10px !important; }
.smp-perm-th-action { width: 19.5%; }
#user-permissions-table tbody td:first-child {
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#user-permissions-table tbody td:first-child > div {
    flex-wrap: nowrap;
    min-width: 0;
}
#user-permissions-table tbody td:first-child span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smp-perm-subsection {
    margin-top: 6px;
    padding: 12px 14px;
    background-color: var(--smp-surface-3);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
}
.smp-perm-subsection-head { margin-bottom: 10px; }
.smp-perm-subsection-title {
    font-size: var(--smp-text-sm);
    font-weight: 500;
    color: var(--smp-text);
    letter-spacing: -0.005em;
}
.smp-perm-subsection-desc {
    font-size: var(--font-caption);
    color: var(--smp-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.smp-perm-linkage-row {
    display: grid;
    grid-template-columns: minmax(0, 5.5rem) 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed var(--smp-border-subtle);
    min-width: 0;
}
.smp-perm-linkage-row:last-child { border-bottom: 0; }
.smp-perm-linkage-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--smp-text-sm);
    color: var(--smp-text);
    min-width: 0;
}
.smp-perm-linkage-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}
.smp-perm-linkage-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--smp-text-sm);
    color: var(--smp-text-muted);
    cursor: pointer;
    margin: 0;
}
.smp-perm-linkage-check input { margin: 0; }
.smp-perm-linkage-check span { line-height: 1; }
@media (max-width: 540px) {
    .smp-perm-linkage-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Global Search · Linear-style command palette ---------- */

/* Trigger en la sidebar */
.smp-global-search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    margin: 0 0 8px;
    background-color: var(--smp-surface-3);
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    color: var(--smp-text-muted);
    font-size: var(--smp-text-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--smp-dur-2) var(--smp-ease), border-color var(--smp-dur-2) var(--smp-ease);
}
.smp-global-search-trigger:hover {
    background-color: var(--smp-surface-4);
    border-color: var(--smp-border);
    color: var(--smp-text);
}
.smp-global-search-trigger-icon { display: inline-flex; font-size: 14px; }
.smp-global-search-trigger-label { flex: 1; }
.smp-global-search-trigger-kbd {
    display: inline-flex;
    gap: 2px;
}
.smp-global-search-trigger-kbd kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: 4px;
    font-family: var(--smp-font);
    font-size: 10px;
    font-weight: 500;
    color: var(--smp-text-muted);
    line-height: 1;
}

/* Overlay y panel */
.smp-gs-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background-color: rgba(15, 15, 17, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: smp-gs-fade 120ms var(--smp-ease-out);
}
.smp-gs-overlay[hidden] { display: none; }

@keyframes smp-gs-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes smp-gs-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.smp-gs-panel {
    width: 100%;
    max-width: 640px;
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-radius-lg);
    box-shadow: var(--smp-shadow-lg);
    overflow: hidden;
    animation: smp-gs-pop 140ms var(--smp-ease-out);
}

.smp-gs-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-gs-input-icon {
    font-size: 18px;
    color: var(--smp-text-subtle);
}
.smp-gs-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: var(--smp-text-md);
    color: var(--smp-text);
    line-height: 1.4;
    padding: 0;
    min-width: 0;
}
.smp-gs-input::placeholder { color: var(--smp-text-subtle); }
.smp-gs-esc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background-color: var(--smp-surface-3);
    border: 1px solid var(--smp-border-subtle);
    border-radius: 4px;
    font-family: var(--smp-font);
    font-size: 10px;
    font-weight: 500;
    color: var(--smp-text-muted);
    line-height: 1;
}

/* Filtros (chips de tipo) */
.smp-gs-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--smp-border-subtle);
}
.smp-gs-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background-color: transparent;
    border: 1px solid var(--smp-border-subtle);
    border-radius: 999px;
    font-size: var(--smp-text-xs);
    font-weight: 500;
    color: var(--smp-text-muted);
    cursor: pointer;
    transition: background-color var(--smp-dur-2) var(--smp-ease), border-color var(--smp-dur-2) var(--smp-ease), color var(--smp-dur-2) var(--smp-ease);
}
.smp-gs-chip:hover {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
}
.smp-gs-chip.active {
    background-color: var(--smp-text);
    border-color: var(--smp-text);
    color: var(--smp-surface-1);
}
.smp-gs-chip .ti { font-size: 12px; }
.smp-gs-filters-divider {
    width: 1px;
    height: 16px;
    background-color: var(--smp-border-subtle);
    margin: 0 4px;
}
.smp-gs-chip-advanced.is-open {
    background-color: var(--smp-surface-3);
    color: var(--smp-text);
    border-color: var(--smp-border);
}

/* Filtros avanzados (drawer) */
.smp-gs-advanced {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 10px;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--smp-border-subtle);
    background-color: var(--smp-surface-2);
    align-items: end;
}
.smp-gs-advanced[hidden] { display: none; }
.smp-gs-advanced-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.smp-gs-advanced-field--wide { grid-column: span 2; }
.smp-gs-advanced-field label {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
    font-weight: 500;
}
.smp-gs-advanced-clear {
    grid-column: span 2;
    justify-self: end;
    align-self: end;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--smp-border-subtle);
    border-radius: var(--smp-radius-sm);
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
    cursor: pointer;
}
.smp-gs-advanced-clear:hover {
    color: var(--smp-text);
    border-color: var(--smp-border);
}
@media (max-width: 600px) {
    .smp-gs-advanced { grid-template-columns: repeat(2, 1fr); }
    .smp-gs-advanced-field--wide { grid-column: span 2; }
    .smp-gs-advanced-clear { grid-column: span 2; }
}

/* Resultados */
.smp-gs-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    min-height: 0;
}
.smp-gs-empty {
    padding: 28px 24px 24px;
    text-align: center;
}
.smp-gs-empty-title {
    font-size: var(--smp-text-md);
    color: var(--smp-text);
    font-weight: 500;
    margin-bottom: 4px;
}
.smp-gs-empty-hint {
    font-size: var(--smp-text-sm);
    color: var(--smp-text-muted);
    line-height: 1.4;
    max-width: 360px;
    margin: 0 auto;
}
.smp-gs-recent {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.smp-gs-recent-title {
    font-size: var(--smp-text-xs);
    color: var(--smp-text-subtle);
    text-transform: none;
    padding: 0 4px 6px;
}
.smp-gs-recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--smp-radius-sm);
    color: var(--smp-text-muted);
    font-size: var(--smp-text-sm);
    cursor: pointer;
    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
}
.smp-gs-recent-item:hover { background-color: var(--smp-surface-3); color: var(--smp-text); }
.smp-gs-recent-item .ti { color: var(--smp-text-subtle); font-size: 14px; }

.smp-gs-group {
    padding: 4px 0;
}
.smp-gs-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 4px;
    font-size: var(--smp-text-xs);
    color: var(--smp-text-subtle);
    font-weight: 500;
}
.smp-gs-group-count { font-variant-numeric: tabular-nums; }

.smp-gs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
}
.smp-gs-item.is-active {
    background-color: var(--smp-surface-3);
}
.smp-gs-item-icon {
    width: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--smp-text-subtle);
    font-size: 16px;
}
.smp-gs-item.is-active .smp-gs-item-icon { color: var(--smp-text-muted); }

.smp-gs-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.smp-gs-item-title {
    color: var(--smp-text);
    font-size: var(--smp-text-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-gs-item-sub {
    color: var(--smp-text-muted);
    font-size: var(--smp-text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.smp-gs-item-sub-sep {
    display: inline-block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--smp-text-subtle);
    flex-shrink: 0;
}
.smp-gs-item-meta {
    flex-shrink: 0;
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.smp-gs-item-arrow {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--smp-text-subtle);
    opacity: 0;
    transition: opacity var(--smp-dur-2) var(--smp-ease);
}
.smp-gs-item.is-active .smp-gs-item-arrow { opacity: 1; }

.smp-gs-loading,
.smp-gs-nores {
    padding: 24px;
    text-align: center;
    color: var(--smp-text-muted);
    font-size: var(--smp-text-sm);
}
.smp-gs-loading .ti { animation: smp-gs-spin 800ms linear infinite; display: inline-block; margin-right: 6px; }
@keyframes smp-gs-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Footer */
.smp-gs-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    border-top: 1px solid var(--smp-border-subtle);
    background-color: var(--smp-surface-2);
}
.smp-gs-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--smp-text-xs);
    color: var(--smp-text-muted);
}
.smp-gs-footer-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: 4px;
    font-family: var(--smp-font);
    font-size: 10px;
    font-weight: 500;
    color: var(--smp-text-muted);
    line-height: 1;
}
.smp-gs-cancelled-tag {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    background-color: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ============================================================
   Chapter detail · /chapters/:id
   ============================================================ */

/* Chip del header (city_code junto al breadcrumb) */
.smp-client-header-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    font-size: 12px;
    font-weight: 500;
    color: var(--smp-text-muted);
    line-height: 1.4;
}
.smp-client-header-chip .ti { font-size: 12px; opacity: 0.7; }

/* KPI · variante income (verde tenue para Venta YTD) */
.smp-evt-kpi--income .smp-evt-kpi-value { color: var(--smp-success); }

/* Grid del tab Resumen del capítulo
   2 columnas con variante --full para tarjetas que ocupan toda la fila.
   Evitamos .row de Bootstrap por su gutter negativo. */
.smp-chapter-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
.smp-chapter-overview-full { grid-column: 1 / -1; }
@media (max-width: 992px) {
    .smp-chapter-overview-grid { grid-template-columns: 1fr; }
}

/* Heatmap mensual · cumplimiento por mes del año en curso */
.smp-chapter-heatmap {
    padding: 4px 0;
    min-height: 220px;
}
.smp-chapter-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
@media (max-width: 576px) {
    .smp-chapter-heatmap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.smp-chapter-heatmap-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: var(--smp-radius-sm, 6px);
    border: 1px solid var(--smp-border-subtle);
    min-height: 56px;
    transition: transform 120ms ease;
}
.smp-chapter-heatmap-cell:hover { transform: translateY(-1px); }
.smp-chapter-heatmap-month {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--smp-text-muted);
    line-height: 1;
}
.smp-chapter-heatmap-pct {
    font-size: 14px;
    font-weight: 600;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Heatmap rolling (36 meses · una fila por año) */
.smp-chapter-heatmap-rolling {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    overflow-x: auto;
}
.smp-chapter-heatmap-rolling-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 6px;
    min-width: 100%;
}
.smp-chapter-heatmap-rolling-row--head {
    margin-bottom: 2px;
}
.smp-chapter-heatmap-rolling-year {
    font-size: 11px;
    font-weight: 600;
    color: var(--smp-text-muted);
    text-align: right;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}
.smp-chapter-heatmap-rolling-cells {
    display: grid;
    grid-template-columns: repeat(12, minmax(28px, 1fr));
    gap: 4px;
}
.smp-chapter-heatmap-rolling-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 4px;
    border: 1px solid var(--smp-border-subtle);
    transition: transform 120ms ease;
}
.smp-chapter-heatmap-rolling-cell:hover { transform: scale(1.06); }
.smp-chapter-heatmap-rolling-cell--empty {
    background: transparent;
    border-style: dashed;
    border-color: var(--smp-border-subtle);
    opacity: 0.35;
}
.smp-chapter-heatmap-rolling-pct {
    font-size: 10px;
    font-weight: 600;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.smp-chapter-heatmap-rolling-month {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--smp-text-muted);
    text-align: center;
    line-height: 1;
}

/* Top clientes recurrentes */
.smp-chapter-top-clients {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}
.smp-chapter-top-client-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background-color 120ms ease;
}
.smp-chapter-top-client-row:hover {
    background-color: var(--smp-surface-1);
    color: inherit;
    text-decoration: none;
}
.smp-chapter-top-client-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.smp-chapter-top-client-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--smp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-chapter-top-client-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--smp-text-muted);
}
.smp-chapter-top-client-code {
    font-family: var(--smp-font-mono);
    font-size: 10px;
    padding: 1px 6px;
    background-color: var(--smp-surface-1);
    border: 1px solid var(--smp-border-subtle);
    border-radius: 4px;
    color: var(--smp-text-muted);
}
.smp-chapter-top-client-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 100px;
}
.smp-chapter-top-client-amount-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--smp-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.smp-chapter-top-client-bar {
    width: 100%;
    height: 4px;
    background-color: var(--smp-surface-1);
    border-radius: 999px;
    overflow: hidden;
}
.smp-chapter-top-client-bar-fill {
    height: 100%;
    background-color: var(--smp-brasa);
    border-radius: 999px;
    transition: width var(--smp-dur-3) var(--smp-ease-out);
}

/* ============================================================
   Motion · micro-interactions + skeletons + entrance animations
   ============================================================ */

/* ---------- Cards: hover-lift sutil ---------- */
.smp-evt-card,
.smp-evt-kpi {
    transition:
        transform var(--smp-dur-2) var(--smp-ease-out),
        box-shadow var(--smp-dur-2) var(--smp-ease-out),
        border-color var(--smp-dur-2) var(--smp-ease-out);
}
.smp-evt-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--smp-shadow-md);
    border-color: var(--smp-border);
}
.smp-evt-kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--smp-shadow-sm);
    border-color: var(--smp-border);
}

/* Anclas/links que actúan como cards (top clientes, recent events) */
.smp-chapter-top-client-row,
.smp-staff-recent-row {
    transition:
        background-color var(--smp-dur-2) var(--smp-ease-out),
        transform var(--smp-dur-2) var(--smp-ease-out);
}
a.smp-chapter-top-client-row:hover { transform: translateX(2px); }

/* ---------- Botones: press feedback ---------- */
.btn,
.smp-btn,
.smp-icon-btn {
    transition:
        background-color var(--smp-dur-2) var(--smp-ease),
        color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease),
        box-shadow var(--smp-dur-2) var(--smp-ease),
        transform var(--smp-dur-1) var(--smp-ease);
}
.btn:not(:disabled):active,
.smp-btn:not(:disabled):active,
.smp-icon-btn:not(:disabled):active {
    transform: scale(0.97);
}

/* ---------- Inputs: focus refinado ---------- */
.form-control,
.form-select,
.smp-input,
.smp-select {
    transition:
        border-color var(--smp-dur-2) var(--smp-ease-out),
        box-shadow var(--smp-dur-2) var(--smp-ease-out),
        background-color var(--smp-dur-2) var(--smp-ease-out);
}

/* ---------- Tablas: hover de fila ---------- */
.smp-evt-table tbody tr,
.table tbody tr,
.dataTable tbody tr {
    transition: background-color var(--smp-dur-1) var(--smp-ease);
}

/* ---------- Tabs: indicador con easing ---------- */
.nav-tabs .nav-link,
.new-tabs .nav-link {
    transition:
        color var(--smp-dur-2) var(--smp-ease),
        background-color var(--smp-dur-2) var(--smp-ease),
        border-color var(--smp-dur-2) var(--smp-ease);
}

/* ---------- Modal: slide-up sutil al abrir ---------- */
.modal.fade .modal-dialog {
    transition:
        transform var(--smp-dur-3) var(--smp-ease-out),
        opacity var(--smp-dur-3) var(--smp-ease-out);
    transform: translateY(8px) scale(0.99);
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* ---------- Tab-pane: fade + lift sutil ---------- */
.tab-pane.fade {
    transition:
        opacity var(--smp-dur-3) var(--smp-ease-out),
        transform var(--smp-dur-3) var(--smp-ease-out);
    transform: translateY(4px);
}
.tab-pane.fade.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Entrance animations (fade-in con stagger)
   ============================================================ */
@keyframes smp-fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes smp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Stagger: cada KPI entra con un delay incremental sutil */
.smp-evt-kpi-grid > .smp-evt-kpi {
    animation: smp-fade-in-up var(--smp-dur-3) var(--smp-ease-out) both;
}
.smp-evt-kpi-grid > .smp-evt-kpi:nth-child(1) { animation-delay: 20ms; }
.smp-evt-kpi-grid > .smp-evt-kpi:nth-child(2) { animation-delay: 60ms; }
.smp-evt-kpi-grid > .smp-evt-kpi:nth-child(3) { animation-delay: 100ms; }
.smp-evt-kpi-grid > .smp-evt-kpi:nth-child(4) { animation-delay: 140ms; }
.smp-evt-kpi-grid > .smp-evt-kpi:nth-child(5) { animation-delay: 180ms; }
.smp-evt-kpi-grid > .smp-evt-kpi:nth-child(6) { animation-delay: 220ms; }

/* Cards de overview también entran con fade */
.smp-evt-card {
    animation: smp-fade-in-up var(--smp-dur-3) var(--smp-ease-out) both;
    animation-delay: 80ms;
}

/* ============================================================
   Skeleton loaders (shimmer sutil)
   ============================================================ */
@keyframes smp-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.smp-skel {
    position: relative;
    background-color: var(--smp-surface-2);
    background-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -200% 0;
    animation: smp-skel-shimmer 1.6s var(--smp-ease-in-out) infinite;
    border-radius: 4px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
}
[data-bs-theme="dark"] .smp-skel,
.theme-dark .smp-skel {
    background-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}
.smp-skel-text {
    display: inline-block;
    width: 100%;
    height: 0.85em;
    vertical-align: middle;
}
.smp-skel-text--sm { height: 0.7em; }
.smp-skel-text--lg { height: 1.1em; }
.smp-skel-block {
    display: block;
    width: 100%;
    height: 16px;
    margin: 4px 0;
}
.smp-skel-pill {
    display: inline-block;
    height: 18px;
    min-width: 60px;
    border-radius: 999px;
}
/* Fila skeleton para tablas */
.smp-skel-row td { padding: 12px 14px !important; }
.smp-skel-row .smp-skel {
    height: 12px;
    border-radius: 3px;
}

/* Loader inline (sustituye texto "Cargando…")
   Uso: <td class="smp-evt-loading" colspan="X">Cargando…</td>
   El texto se oculta y se muestra una barra shimmer compacta. */
.smp-evt-loading {
    padding: 28px 14px !important;
    text-align: center !important;
    color: transparent !important;
    user-select: none;
    position: relative;
}
.smp-evt-loading::after {
    content: '';
    display: block;
    width: 100%;
    max-width: 180px;
    height: 8px;
    margin: 0 auto;
    background-color: var(--smp-surface-2);
    background-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -200% 0;
    border-radius: 4px;
    animation: smp-skel-shimmer 1.6s var(--smp-ease-in-out) infinite;
}
[data-bs-theme="dark"] .smp-evt-loading::after,
.theme-dark .smp-evt-loading::after {
    background-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}

/* ============================================================
   IVA chips · marcador inequívoco de si un monto es con/sin IVA
   ============================================================ */
.smp-iva-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: none;
}
.smp-iva-chip + .smp-iva-chip { margin-left: 4px; }
/* Acompañando un valor inline: pequeño gap a la izquierda */
.smp-iva-chip--inline { margin-left: 6px; }
/* Acompañando un label dentro de un th/label */
.smp-iva-chip--label { margin-left: 4px; }

/* ---------- Celda de proveedor (con etiqueta/alias) ---------- */
.smp-prov-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.smp-prov-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.smp-prov-primary {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-prov-secondary {
    font-size: 11px;
    color: var(--smp-text-subtle, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smp-prov-alias-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--smp-text-subtle, #9ca3af);
    cursor: pointer;
    /* Siempre visible (tenue) para que se descubra; se resalta en hover/focus. */
    opacity: 0.5;
    transition:
        opacity 120ms ease,
        background-color 120ms ease,
        color 120ms ease;
}
tr:hover .smp-prov-alias-btn,
.smp-prov-cell--inline .smp-prov-alias-btn,
.smp-prov-alias-btn:focus-visible {
    opacity: 1;
}
.smp-prov-alias-btn:hover {
    background-color: var(--smp-surface-3, rgba(0, 0, 0, 0.05));
    color: var(--smp-primary, #d63939);
}
/* Editor inline del alias (offcanvas de detalle del gasto) */
.smp-prov-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.smp-prov-edit-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Banner de sincronización de asistentes con Shopify */
.smp-evt-sync-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--smp-border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--smp-radius, 10px);
    background-color: var(--smp-surface-2, rgba(0, 0, 0, 0.02));
}
.smp-evt-sync-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
.smp-evt-sync-sep {
    color: var(--smp-text-subtle, #9ca3af);
}
.smp-evt-sync-pending.is-pending {
    color: var(--smp-brasa, #d63939);
    font-weight: 600;
}

/* Cards de selección de scope en el modal "Nuevo evento" (público/privado) */
.smp-scope-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 20px 12px;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--smp-border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--smp-radius, 10px);
    background-color: var(--smp-surface-1, #fff);
    color: var(--smp-text, inherit);
    cursor: pointer;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease,
        background-color 140ms ease;
}
.smp-scope-card:hover,
.smp-scope-card:focus-visible {
    border-color: var(--smp-brasa, #d63939);
    background-color: var(--smp-surface-2, rgba(0, 0, 0, 0.02));
    box-shadow: var(--smp-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    transform: translateY(-1px);
}
.smp-scope-card-icon {
    font-size: 28px;
    color: var(--smp-brasa, #d63939);
}
.smp-scope-card-title {
    font-weight: 600;
    margin-top: 2px;
}
.smp-scope-card-sub {
    font-size: 12px;
    color: var(--smp-text-muted, #6e6e76);
}

/* Sin IVA · verde tenue (= dinero "neto", limpio) */
.smp-iva-chip--no {
    background-color: rgba(22, 163, 74, 0.08);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.20);
}
/* Con IVA · violeta tenue (= dinero bruto, total real) */
.smp-iva-chip--yes {
    background-color: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, 0.20);
}
/* Sin confirmar · ámbar tenue (= revisar con contabilidad) */
.smp-iva-chip--unknown {
    background-color: rgba(245, 158, 11, 0.10);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.22);
}

[data-bs-theme="dark"] .smp-iva-chip--no,
.theme-dark .smp-iva-chip--no {
    background-color: rgba(74, 222, 128, 0.12);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.25);
}
[data-bs-theme="dark"] .smp-iva-chip--yes,
.theme-dark .smp-iva-chip--yes {
    background-color: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.28);
}
[data-bs-theme="dark"] .smp-iva-chip--unknown,
.theme-dark .smp-iva-chip--unknown {
    background-color: rgba(251, 191, 36, 0.14);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.28);
}

/* Variante para divs (no tabla): mismo shimmer pero más alto */
.smp-evt-loading-block {
    position: relative;
    min-height: 140px;
    border-radius: var(--smp-radius);
    background-color: var(--smp-surface-2);
    background-image: linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -200% 0;
    animation: smp-skel-shimmer 1.6s var(--smp-ease-in-out) infinite;
}

/* ============================================================
   Reduced motion: respeta preferencia del usuario
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .smp-evt-card:hover,
    .smp-evt-kpi:hover {
        transform: none;
    }
}