/* ============================================================================
   DASHBOARD DESIGN SYSTEM
   Plataforma operativa de lockers · Single-Project
   Stack: Tailwind CSS v4 + Django Templates + Vue 3
   ============================================================================

   ÍNDICE:
   01. Design Tokens (CSS Variables)
   02. Body & Global
   03. Typography
   04. Layout (Topbar / Sidenav / Content)
   05. Sidenav (Sidebar Dark)
   06. Topbar (Navbar Glass)
   07. Page Header & Breadcrumbs
   08. Cards
   09. KPI Cards
   10. Buttons
   11. Forms & Inputs
   12. Tables
   13. Badges & Status
   14. Avatars
   15. Modals & Drawers
   16. Alerts
   17. Footer
   18. Capacity Bar (Gym-Specific)
   19. Overrides: Toastr
   20. Overrides: SweetAlert2
   21. Overrides: Air Datepicker
   22. Animations & Transitions
   23. Dark Mode Overrides
   24. Scrollbar Custom
   25. Tabs
   26. Spinner / Loader
   27. Empty State
   28. Divider
   29. Pagination
   30. Progress (Generic)
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   01. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Brand Colors ─────────────────────────────────── */
    --color-primary:     #0D9488;
    --color-primary-hover: #0F766E;
    --color-primary-light: #F0FDFA;
    --color-secondary:   #14B8A6;
    --color-secondary-light: #CCFBF1;
    --color-success:     #059669;
    --color-success-light: #ECFDF5;
    --color-success-border: #A7F3D0;
    --color-danger:      #DC2626;
    --color-danger-light: #FEF2F2;
    --color-danger-border: #FECACA;
    --color-warning:     #B45309;
    --color-warning-light: #FEF3C7;
    --color-warning-border: #FDE68A;
    --color-info:        #1D4ED8;
    --color-info-light:  #DBEAFE;
    --color-info-border: #BFDBFE;

    /* ── Neutral Palette ──────────────────────────────── */
    --color-neutral-50:  #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;

    /* ── Light Mode Semantic ──────────────────────────── */
    --bg-body:           #F6F8FC;
    --bg-card:           #ffffff;
    --bg-card-hover:     #F8FAFC;
    --bg-topbar:         #ffffff;
    --bg-sidebar:        #0F172A;
    --bg-input:          #F8FAFC;

    --border-color:      #ECEEF1;
    --border-color-strong: #E2E8F0;

    --text-heading:      #0f172a;
    --text-body:         #334155;
    --text-muted:        #64748B;
    --text-subtle:       #94A3B8;

    /* ── Sidebar Tokens (light mode) ─────────────────── */
    --sidenav-width:             244px;
    --sidenav-width-sm:          75px;
    --sidenav-bg:                var(--bg-sidebar);
    --sidenav-border-color:      rgba(255, 255, 255, 0.08);
    --sidenav-item-color:        #8B949E;
    --sidenav-item-hover-color:  #F8FAFC;
    --sidenav-item-hover-bg:     rgba(255, 255, 255, 0.06);
    --sidenav-item-active-color: #ffffff;
    --sidenav-item-active-bg:    #1E3A5F;
    --sidenav-item-font-size:    0.875rem;
    --sidenav-item-font-weight:  600;
    --sidenav-item-icon-size:    1.125rem;
    --sidenav-item-gap:          12px;
    --sidenav-item-padding-x:    10px;
    --sidenav-item-padding-y:    10px;
    --sidenav-section-color:     rgba(153, 173, 200, 0.62);
    --sidenav-brand-color:       #f2f7ff;
    --sidenav-future-title-color: #f5c56f;
    --sidenav-future-color:      #f2d59a;
    --sidenav-future-icon-color: #f3c96e;
    --sidenav-future-bg:         rgba(245, 158, 11, 0.08);
    --sidenav-future-hover-color: #fff3cf;
    --sidenav-future-hover-bg:   rgba(245, 158, 11, 0.16);
    --sidenav-future-active-color: #fff8e8;
    --sidenav-future-active-bg:  rgba(245, 158, 11, 0.22);
    --sidenav-future-border:     rgba(245, 158, 11, 0.18);
    --sidenav-future-hover-border: rgba(245, 158, 11, 0.3);
    --sidenav-future-active-border: rgba(245, 158, 11, 0.4);
    --sidenav-future-rail:       rgba(251, 191, 36, 0.95);

    /* ── Topbar Tokens ────────────────────────────────── */
    --topbar-height:         56px;
    --topbar-bg:             #ffffff;
    --topbar-item-color:     #64748B;
    --topbar-item-hover-color: #0D9488;
    --topbar-search-bg:      #F8FAFC;
    --topbar-search-border:  #ECEEF1;

    /* ── Spacing & Radius (escala única) ──────────────── */
    --spacing-base:      var(--space-base);  /* deprecated alias — use --space-base */
    --radius-input:      0.5rem;    /*  8px — inputs, buttons, badges */
    --radius-card:       0.75rem;   /* 12px — cards, modals, panels */
    --radius-pill:       9999px;    /* pills, avatars circulares */
    /* aliases legacy (no usar en código nuevo) */
    --radius-sm:         var(--radius-input);
    --radius-md:         var(--radius-input);
    --radius-lg:         var(--radius-card);
    --radius-xl:         var(--radius-card);
    --radius-full:       var(--radius-pill);

    /* ── Shadows (escala única: 0/sm/md) ──────────────── */
    --shadow-none: 0 0 #0000;
    --shadow-sm:   0 1px 2px rgba(28, 46, 74, 0.04);
    --shadow-md:   0 4px 10px rgba(28, 46, 74, 0.06);
    /* aliases legacy (no usar en código nuevo) */
    --shadow-xs:   var(--shadow-sm);
    --shadow-lg:   var(--shadow-md);
    --shadow-xl:   var(--shadow-md);

    /* ── Transitions ──────────────────────────────────── */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-Index Scale ────────────────────────────────── */
    --z-sidenav:    40;
    --z-backdrop:   45;
    --z-topbar:     50;
    --z-popover:    60;
    --z-dropdown:   70;
    --z-modal:      1000;
    --z-drawer:     1001;
    --z-toast:      9999;

    /* ── Spacing Scale ────────────────────────────────── */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-base: var(--space-5); /* alias = 20px */
}

/* Theme axes. Runtime uses data-palette/data-semantic so data-theme remains light/dark only. */
html[data-palette="teal"] {
    --color-primary: #0D9488;
    --color-primary-hover: #0F766E;
    --color-primary-light: #F0FDFA;
    --color-secondary: #14B8A6;
    --color-secondary-light: #CCFBF1;
    --sidenav-item-active-bg: #1E3A5F;
}

html[data-palette="indigo"] { --color-primary:#4F46E5; --color-primary-hover:#4338CA; --color-primary-light:#EEF2FF; --color-secondary:#6366F1; --color-secondary-light:#E0E7FF; --sidenav-item-active-bg:#3730A3; }
html[data-palette="emerald"] { --color-primary:#059669; --color-primary-hover:#047857; --color-primary-light:#ECFDF5; --color-secondary:#10B981; --color-secondary-light:#D1FAE5; --sidenav-item-active-bg:#065F46; }
html[data-palette="violet"] { --color-primary:#7C3AED; --color-primary-hover:#6D28D9; --color-primary-light:#F5F3FF; --color-secondary:#8B5CF6; --color-secondary-light:#EDE9FE; --sidenav-item-active-bg:#4C1D95; }
html[data-palette="rose"] { --color-primary:#E11D48; --color-primary-hover:#BE123C; --color-primary-light:#FFF1F2; --color-secondary:#F43F5E; --color-secondary-light:#FFE4E6; --sidenav-item-active-bg:#881337; }
html[data-palette="amber"] { --color-primary:#D97706; --color-primary-hover:#B45309; --color-primary-light:#FFFBEB; --color-secondary:#F59E0B; --color-secondary-light:#FEF3C7; --sidenav-item-active-bg:#7C2D12; }
html[data-palette="sky"] { --color-primary:#0284C7; --color-primary-hover:#0369A1; --color-primary-light:#F0F9FF; --color-secondary:#0EA5E9; --color-secondary-light:#E0F2FE; --sidenav-item-active-bg:#075985; }
html[data-palette="cyan"] { --color-primary:#0891B2; --color-primary-hover:#0E7490; --color-primary-light:#ECFEFF; --color-secondary:#06B6D4; --color-secondary-light:#CFFAFE; --sidenav-item-active-bg:#155E75; }
html[data-palette="lime"] { --color-primary:#65A30D; --color-primary-hover:#4D7C0F; --color-primary-light:#F7FEE7; --color-secondary:#84CC16; --color-secondary-light:#ECFCCB; --sidenav-item-active-bg:#3F6212; }
html[data-palette="fuchsia"] { --color-primary:#C026D3; --color-primary-hover:#A21CAF; --color-primary-light:#FDF4FF; --color-secondary:#D946EF; --color-secondary-light:#FAE8FF; --sidenav-item-active-bg:#701A75; }
html[data-palette="slate"] { --color-primary:#475569; --color-primary-hover:#334155; --color-primary-light:#F8FAFC; --color-secondary:#64748B; --color-secondary-light:#E2E8F0; --sidenav-item-active-bg:#1E293B; }
html[data-palette="orange"] { --color-primary:#EA580C; --color-primary-hover:#C2410C; --color-primary-light:#FFF7ED; --color-secondary:#F97316; --color-secondary-light:#FFEDD5; --sidenav-item-active-bg:#7C2D12; }
html[data-palette="blue"] { --color-primary:#2563EB; --color-primary-hover:#1D4ED8; --color-primary-light:#EFF6FF; --color-secondary:#3B82F6; --color-secondary-light:#DBEAFE; --sidenav-item-active-bg:#1E40AF; }
html[data-palette="bronze"] { --color-primary:#936731; --color-primary-hover:#6E4E22; --color-primary-light:#FAF6F1; --color-secondary:#B68649; --color-secondary-light:#F0E2CC; --sidenav-item-active-bg:#6E4E22; }

/* Semantic axis: controls success/warning/danger/info independently from brand palette. */
html[data-semantic="subtle"] {
    --color-success: #059669; --color-success-light: #ECFDF5; --color-success-border: #A7F3D0;
    --color-warning: #A16207; --color-warning-light: #FEFCE8; --color-warning-border: #FEF08A;
    --color-danger: #BE123C; --color-danger-light: #FFF1F2; --color-danger-border: #FECDD3;
    --color-info: #0369A1; --color-info-light: #F0F9FF; --color-info-border: #BAE6FD;
}

html[data-semantic="default"] {
    --color-success: #15803D; --color-success-light: #DCFCE7; --color-success-border: #86EFAC;
    --color-warning: #B45309; --color-warning-light: #FEF3C7; --color-warning-border: #FCD34D;
    --color-danger: #DC2626; --color-danger-light: #FEE2E2; --color-danger-border: #FCA5A5;
    --color-info: #4338CA; --color-info-light: #E0E7FF; --color-info-border: #A5B4FC;
}

html[data-semantic="bold"] {
    --color-success: #FFFFFF; --color-success-light: #0D9488; --color-success-border: #0F766E;
    --color-warning: #FFFFFF; --color-warning-light: #EA580C; --color-warning-border: #C2410C;
    --color-danger: #FFFFFF; --color-danger-light: #E11D48; --color-danger-border: #BE123C;
    --color-info: #FFFFFF; --color-info-light: #6366F1; --color-info-border: #4F46E5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   02. BODY & GLOBAL
   ───────────────────────────────────────────────────────────────────────────── */

html, body { height: 100%; }

/*
 * Anti-flash blanco en navegación MPA: el <html> por defecto es blanco, así que el
 * frame entre páginas (unload → primer paint de la nueva) se ve blanco. Pintamos el
 * root con el color de fondo de la app (resuelto pre-paint vía data-theme) para que
 * ese frame sea del color del shell, no blanco.
 */
html { background-color: var(--bg-body); }

/*
 * Transición suave entre páginas (Chrome cross-document View Transitions). Hace un
 * cross-fade del documento viejo al nuevo en vez del corte/flash. Se ignora en
 * navegadores que no lo soportan (degradación limpia) y se respeta reduce-motion.
 */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;       /* 14px */
    line-height: 1.43;          /* 20px */
    font-weight: 400;
    color: var(--text-body);
    background-color: var(--bg-body);
    background-image: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

/* Prevent content flash while Vue loads */
[v-cloak] { display: none !important; }

/*
 * Toggle de tema sin parpadeo: el ícono correcto se decide por CSS según el tema
 * resuelto (html[data-theme]), que el script inline de _head.html setea ANTES del
 * primer paint y que toggleTheme actualiza en vivo. Evita el flash de ver sol+luna
 * juntos hasta que Vue aplica v-show.
 */
.theme-icon--sun { display: none !important; }
.theme-icon--moon { display: inline-block !important; }
html[data-theme="dark"] .theme-icon--moon { display: none !important; }
html[data-theme="dark"] .theme-icon--sun { display: inline-block !important; }

*,
*::before,
*::after { box-sizing: border-box; }

/* Skip link (accessibility) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-input);
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    transition: top var(--transition-fast);
}
.skip-link:focus {
    top: 0.5rem;
}

/* Global focus-visible — accessible default for all interactive elements */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced motion */
@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;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   03. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.card-title,
.menu-title,
.kpi-value,
.modal-title,
.page-title {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1, .page-title { font-size: 1.75rem;  line-height: 2rem;     font-weight: 600; letter-spacing: -0.02em; }
h2             { font-size: 1.375rem; line-height: 1.75rem;  font-weight: 600; }
h3, .card-title, .modal-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
h4             { font-size: 1rem;     line-height: 1.375rem; font-weight: 600; }
h5, h6         { font-size: 0.875rem; line-height: 1.25rem;  font-weight: 600; }

/* KPI numbers — large, tight, tabular */
.kpi-value {
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Body utilities */
p, .text-pretty { text-wrap: pretty; }

/* Display font alias (legacy) */
.font-display { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

a { transition: color var(--transition-fast); }


/* ─────────────────────────────────────────────────────────────────────────────
   04. LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

.wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.page-content {
    margin-left: var(--sidenav-width);
    margin-top: var(--topbar-height);
    min-height: calc(100vh - var(--topbar-height));
    transition: margin-left var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.content {
    padding: 1.75rem;
    flex: 1;
}

@media (max-width: 768px) {
    .content { padding: var(--space-base); }
}

/* Sidenav size states */
html[data-sidenav-size="sm"] .app-header,
html[data-sidenav-size="sm"] .page-content {
    margin-left: var(--sidenav-width-sm);
}

html[data-sidenav-size="offcanvas"] .app-header,
html[data-sidenav-size="offcanvas"] .page-content {
    margin-left: 0;
}

/* Logo visibility states */
.app-menu .logo-lg { display: flex; }
.app-menu .logo-sm { display: none; }
html[data-sidenav-size="sm"] .app-menu .logo-lg { display: none; }
html[data-sidenav-size="sm"] .app-menu .logo-sm { display: flex !important; }

/* Sidenav offcanvas state */
html[data-sidenav-size="offcanvas"] .app-menu.sidenav {
    transform: translateX(calc(var(--sidenav-width) * -1));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
}

html.sidenav-enable[data-sidenav-size="offcanvas"] .app-menu.sidenav {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: calc(var(--z-topbar) - 1);
}

/* Backdrop */
.sidenav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

html.sidenav-enable[data-sidenav-size="offcanvas"] .sidenav-backdrop {
    opacity: 1;
    pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────────────────────────
   05. SIDENAV (SIDEBAR LIGHT — dark mode override en Sección 23)
   ───────────────────────────────────────────────────────────────────────────── */

.app-menu.sidenav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-sidenav);
    width: var(--sidenav-width);
    min-width: var(--sidenav-width);
    background: var(--sidenav-bg);
    border-right: 1px solid var(--sidenav-border-color);
    transition: width var(--transition-slow), min-width var(--transition-slow),
                margin var(--transition-slow), left var(--transition-slow),
                opacity var(--transition-slow);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: hidden;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

/* Logo box */
.logo-box {
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--sidenav-border-color);
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}

/* Logo topbar (visible solo en mobile cuando sidebar oculto) */
.app-header .logo-topbar { display: none; }
@media (max-width: 1140px) { .app-header .logo-topbar { display: block; } }



/* Menu nav */
.sidenav-menu {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem 0.65rem;
    background: transparent;
}

/* Section titles */
.menu-title {
    padding: 1.125rem 0.875rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sidenav-section-color) !important;
}

.sidebar-section-toggle {
    min-height: 2rem;
    padding: 0 var(--sidenav-item-padding-x);
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: color var(--transition-fast) var(--ease-out);
}

.sidebar-section-toggle:hover,
.sidebar-section.active .sidebar-section-toggle {
    color: var(--sidenav-item-hover-color) !important;
}

.sidebar-section-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.sidebar-section-items.hidden { display: none; }


.menu-item.active > .menu-link,
.menu-link.active {
    color: var(--sidenav-item-active-color) !important;
    font-weight: 700;
}

.menu-item.active > .menu-link .menu-icon,
.menu-link.active .menu-icon {
    color: currentColor !important;
    opacity: 1;
}

.sidebar-section-chevron {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.72;
    transform: rotate(-90deg);
    transition: transform var(--transition-fast) var(--ease-out), opacity var(--transition-fast) var(--ease-out);
}

[data-sidebar-section-open="true"] .sidebar-section-chevron {
    transform: rotate(0deg);
    opacity: 1;
}

html[data-sidenav-size="sm"] .app-menu .sidebar-section-chevron,
html[data-sidenav-size="sm"] .app-menu .menu-title-label {
    display: none;
}

html[data-sidenav-size="sm"] .app-menu .sidebar-section-toggle {
    justify-content: center;
    padding: 0;
}

/* User profile footer card (sidebar bottom) */
.sidenav-user {
    padding: 0.75rem 0.875rem;
    margin: 0.5rem;
    border: 1px solid var(--sidenav-border-color);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.sidenav-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sidenav-user__info {
    min-width: 0;
    flex: 1;
}

.sidenav-user__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f3f8ff;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidenav-user__role {
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(141, 162, 192, 0.95);
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notification item (topbar dropdown) */
.notification-item {
    transition: background-color var(--transition-fast);
}
.notification-item:hover { background: var(--color-neutral-50); }

.notification-item__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.875rem;
}

/* Topbar profile trigger */
.topbar-profile-trigger {
    transition: background-color var(--transition-fast);
}
.topbar-profile-trigger:hover { background: var(--color-neutral-100); }

/* Dropdown item polish */
.dropdown-item {
    color: var(--text-body);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-input);
    text-decoration: none;
}
.dropdown-item:hover {
    background: var(--color-neutral-100);
    color: var(--text-heading);
}
.dropdown-item-danger {
    color: var(--color-danger);
}
.dropdown-item-danger:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
}


/* ─────────────────────────────────────────────────────────────────────────────
   06. TOPBAR (NAVBAR GLASS)
   ───────────────────────────────────────────────────────────────────────────── */

.app-header.topbar {
    min-height: var(--topbar-height);
    margin-left: var(--sidenav-width);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    transition: margin-left var(--transition-slow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-topbar);
}

/* Topbar search */
.app-header.topbar .form-input {
    border-color: var(--topbar-search-border);
    background: var(--topbar-search-bg);
    height: 2.25rem;
    border-radius: var(--radius-input);
    padding-left: 2.5rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-header.topbar .form-input:focus {
    border-color: var(--color-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Topbar icon buttons */
.app-header.topbar .btn-icon {
    transition: background-color var(--transition-fast), color var(--transition-fast);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
}

.app-header.topbar .btn-icon:hover {
    background: var(--color-neutral-100);
    color: var(--text-heading);
}

.topbar-live-pill {
    min-width: 116px;
    justify-content: center;
}

/* Notification badge pulse */
@keyframes pulse-ring {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: var(--color-danger);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-topbar);
}

.notification-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--color-danger);
    animation: none;
}

/* Dropdown menus */
.hs-dropdown-menu {
    border-radius: var(--radius-lg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    margin: 0 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}

.dropdown-item.text-danger:hover {
    background: var(--color-danger-light) !important;
    color: var(--color-danger) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   07. PAGE HEADER & BREADCRUMBS
   ───────────────────────────────────────────────────────────────────────────── */

.page-title-shell {
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    margin-bottom: var(--space-base);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
}

.breadcrumb-item {
    color: var(--text-subtle);
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb-item:hover { color: var(--color-primary); }

.breadcrumb-item.active {
    color: var(--text-muted);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--color-neutral-300);
    font-size: 0.75rem;
}

/* Page title H1 — escala global */
.page-title-shell h1,
.page-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 2rem;
    letter-spacing: -0.02em;
}

@media (max-width: 640px) {
    .page-title-shell h1,
    .page-title { font-size: 1.5rem; line-height: 1.875rem; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   08. CARDS
   ───────────────────────────────────────────────────────────────────────────── */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: none;
    overflow: hidden;
}

.card:hover,
.card:hover.hover\:shadow-md {
    box-shadow: none !important;
    transform: none !important;
    border-color: var(--border-color) !important;
    background: var(--bg-card) !important;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    min-height: 56px;
    background: var(--bg-card);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: -0.015em;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.125rem;
}

.card-footer {
    padding: 0.875rem 1.125rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: var(--bg-card);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}


/* ─────────────────────────────────────────────────────────────────────────────
   09. KPI CARDS
   ───────────────────────────────────────────────────────────────────────────── */

.kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kpi-grid > .card,
.kpi-grid > .surface-kpi-card {
    position: relative;
    cursor: default;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-none);
}

/* Normalize KPI card body layout to Dashboard stat-card baseline */
.kpi-grid > .card > .card-body {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 4.5rem;
    padding: 1.25rem;
}

.kpi-grid > .card > .card-body > .kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
}

.kpi-grid > .card > .card-body > .kpi-stat-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kpi-grid > .card > .card-body > .kpi-stat-content > .kpi-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}

.kpi-grid > .card > .card-body > .kpi-stat-content > .kpi-value {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1;
    order: -1;
}

/* Top accent bar removed — flat KPI cards per design refresh */

/* KPI icon container — circular solid-soft */
.kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.kpi-icon-primary {
    background: var(--icon-neutral-bg);
    color: var(--icon-neutral-color);
}

.kpi-icon-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.kpi-icon-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.kpi-icon-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.kpi-icon-info {
    background: var(--color-info-light);
    color: var(--color-info);
}

/* legacy aliases */
.kpi-icon-secondary { background: var(--color-info-light); color: var(--color-info); }
.kpi-icon-energy    { background: var(--color-warning-light); color: var(--color-warning); }

.kpi-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Trend indicators */
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

.kpi-trend-up {
    background: var(--color-success-light);
    color: var(--color-success);
}

.kpi-trend-down {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.kpi-trend-neutral {
    background: var(--color-neutral-100);
    color: var(--text-muted);
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-icon {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-input);
}

@media (max-width: 640px) {
    .app-header.topbar .btn-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Fallbacks for utility-based primary buttons used in templates */
.bg-default-900 {
    background: var(--color-default-900, #111827);
}

.text-white {
    color: #fff;
}

.hover\:bg-default-800:hover {
    background: var(--color-default-800, #1f2937);
}

.disabled\:bg-default-300:disabled {
    background: var(--color-default-300, #d1d5db);
}

/* Danger button */
.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.btn-danger:hover {
    background: #dc2768;
    border-color: #dc2768;
    color: #fff;
}

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


/* ─────────────────────────────────────────────────────────────────────────────
   11. FORMS & INPUTS
   ───────────────────────────────────────────────────────────────────────────── */

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-body);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    border-radius: var(--radius-input);
    border: 1px solid var(--border-color-strong);
    background: var(--bg-card);
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.43;
    color: var(--text-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-textarea {
    height: auto;
    padding: 0.5rem 0.75rem;
    min-height: 5rem;
    line-height: 1.5;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-subtle);
    opacity: 1;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Select arrow */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.625rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
}

/* Checkbox & Radio */
.form-checkbox,
.form-radio {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--border-color-strong);
    background: var(--bg-input);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
    flex-shrink: 0;
    color: var(--color-primary);
}

.form-checkbox:focus,
.form-radio:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.form-checkbox {
    border-radius: 0.3125rem;
}

/* Helper text */
.form-hint {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-subtle);
    line-height: 1.4;
}

/* Error state */
.form-error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-danger);
    font-weight: 500;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent);
}

/* Valid state */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 12%, transparent);
}

/* Form group — vertical stack with consistent spacing */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group + .form-group { margin-top: var(--space-4); }

/* Icon input group */
.input-icon-group {
    position: relative;
}

.input-icon-group .form-input,
.input-icon-group .form-select {
    padding-left: 2.5rem;
}

.input-icon-group .icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
    display: flex;
    align-items: center;
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. TABLES
   ───────────────────────────────────────────────────────────────────────────── */

.table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

.table thead {
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
}

.table thead th {
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    background: var(--color-neutral-50, #f8fafc);
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.15;
}

.table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table thead th:last-child  { border-top-right-radius: var(--radius-md); }

.table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    vertical-align: middle;
    color: var(--text-body);
    white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }

.table-hover tbody tr {
    transition: background-color var(--transition-fast);
}

.table-hover tbody tr:hover {
    background: var(--color-neutral-50);
}

.table tbody td {
    font-variant-numeric: tabular-nums;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.table-responsive > .table {
    white-space: nowrap;
}

/*
 * <smart-data-table> scroll wrapper. Unlike .table-responsive (which stacks into
 * cards under 768px), this keeps ALL columns and scrolls horizontally at every
 * breakpoint — the chosen pattern for operational data tables where comparing
 * columns matters more than vertical stacking.
 */
.ds-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.ds-table-scroll > .table {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .table-responsive {
        overflow-x: visible;
    }

    .table-responsive > .table,
    .table-responsive > .table > thead,
    .table-responsive > .table > tbody,
    .table-responsive > .table > thead > tr,
    .table-responsive > .table > tbody > tr {
        display: block;
        width: 100%;
    }

    .table-responsive > .table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-responsive > .table > tbody > tr {
        padding: 0.875rem 1rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--saas-border, var(--border-color, #ECEEF1));
        border-radius: 0.75rem;
        background: var(--saas-panel, var(--bg-card, #fff));
    }

    .table-responsive > .table > tbody > tr:last-child {
        margin-bottom: 0;
    }

    [data-theme="dark"] .table-responsive > .table > tbody > tr {
        background: var(--saas-panel, #1e293b);
        border-color: var(--saas-border, #334155);
    }

    .table-responsive > .table > tbody > td {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0.25rem 0;
        white-space: normal;
        border-bottom: none;
    }

    .table-responsive > .table > tbody > td::before {
        content: attr(data-label);
        flex-shrink: 0;
        width: 8.5rem;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-muted, #64748b);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .table-responsive > .table > tbody > td:last-child {
        padding-bottom: 0;
    }
}

@media (min-width: 1280px) {
    .table {
        min-width: 100%;
    }
}

.thead-sm th {
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
}

/* Table actions: unified icon language for all list screens */
.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    box-shadow: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.ui-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
}

.table-action-btn .ui-icon {
    width: 1rem;
    height: 1rem;
}

.table-action-btn:hover {
    background: color-mix(in srgb, var(--color-primary-light) 42%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--border-color));
    color: var(--color-primary);
}

.table-action-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 44%, transparent);
    outline-offset: 2px;
}

.table-action-btn--muted:hover {
    background: color-mix(in srgb, var(--color-neutral-100) 82%, transparent);
    border-color: color-mix(in srgb, var(--border-color-strong) 75%, transparent);
    color: var(--text-body);
}

.table-action-btn--primary:hover {
    background: color-mix(in srgb, var(--color-primary-light) 54%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border-color));
    color: var(--color-primary);
}

.table-action-btn--success:hover {
    background: color-mix(in srgb, var(--color-success-light) 56%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--border-color));
    color: var(--color-success);
}

.table-action-btn--danger:hover {
    background: color-mix(in srgb, var(--color-danger-light) 58%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-danger) 34%, var(--border-color));
    color: var(--color-danger);
}

.table-action-btn[disabled],
.table-action-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* Module status blocks for list loading/empty/error/success states */
/* Sin mensaje no reserva espacio: evita el hueco entre tabla y footer. */
.module-status:empty { display: none; }
.module-status {
    border-radius: 0.75rem;
    border: 1px dashed color-mix(in srgb, var(--border-color) 75%, transparent);
    background: color-mix(in srgb, var(--bg-soft) 92%, white 8%);
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
}

.module-status--idle {
    color: var(--text-muted);
}

.module-status--loading {
    border-style: solid;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary-light) 45%, var(--bg-soft));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.module-status--loading::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    border-top-color: var(--color-primary);
    animation: ds-spin 0.7s linear infinite;
    flex: 0 0 auto;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .module-status--loading::before { animation: none; }
}

.module-status--empty {
    color: var(--text-muted);
}

.module-status--success {
    border-style: solid;
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success-light) 52%, var(--bg-soft));
}

.module-status--error {
    border-style: solid;
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger-light) 52%, var(--bg-soft));
}


/* Paginación DS — espeja el catálogo §14 (index.html#pagination):
   resumen a la izquierda · espaciador · "Filas:" · pager de botones cuadrados.
   La usa <smart-data-table> (data-table.js). */
.ds-table-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
    margin-top: 1rem;
    padding: 0.875rem var(--space-5);
    background: var(--bg-soft);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.ds-table-footer__spacer { flex: 1 1 auto; }
.ds-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex-wrap: wrap; /* graceful wrap on narrow containers */
}
.ds-pagination__summary {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .ds-table-footer { justify-content: center; }
    .ds-table-footer__spacer { display: none; }
    .ds-pagination__summary { flex-basis: 100%; text-align: center; }
}
.ds-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ds-pagesize__label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.ds-pagesize__select {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-input);
    background: var(--bg-card);
    color: var(--text-body);
    line-height: 1.2;
}
.ds-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius-input);
    border: 1px solid var(--border-color-strong, var(--border-color));
    background: var(--bg-card);
    color: var(--text-body);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.ds-pagination__btn:hover:not(:disabled) {
    background: var(--bg-body);
    border-color: var(--border-color-strong, var(--border-color));
}
.ds-pagination__btn:disabled { opacity: 0.45; cursor: default; }
.ds-pagination__btn .ds-icon { width: 0.875rem; height: 0.875rem; }

/* Numbered page strip */
.ds-pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
    flex: 0 0 auto;
}
.ds-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.375rem;
    border-radius: var(--radius-input);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    line-height: 1;
}
.ds-pagination__page:hover:not(.ds-pagination__page--active) {
    background: var(--bg-body);
    border-color: var(--border-color-strong, var(--border-color));
}
.ds-pagination__page--active {
    background: var(--text-heading);
    border-color: var(--text-heading);
    color: var(--bg-card);
    cursor: default;
}
/* Keyboard focus ring (WCAG 2.4.7) for all interactive pager controls */
.ds-pagination__btn:focus-visible,
.ds-pagination__page:focus-visible,
.ds-pagesize__select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.ds-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    user-select: none;
}

/* Table wrapper — relative so the loading overlay can fill it */
.ds-table-wrapper {
    position: relative;
}

/* Loading overlay — semi-transparent veil over the table body while loading */
.ds-table-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background: color-mix(in srgb, var(--bg-card, #fff) 80%, transparent);
    border-radius: inherit;
}
.ds-table-spinner {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
    animation: ds-spin 0.8s linear infinite; /* ds-spin keyframes defined once near .module-status--loading */
}
@media (prefers-reduced-motion: reduce) {
    .ds-table-spinner { animation: none; opacity: 0.5; }
}
.ds-table-loading-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-sub, var(--text-muted));
}

/* ─── Filter field + label — shared DS pattern for filter bars ──────────────
   Usage: wrap each filter control in .ds-filter-field; add .ds-filter-label
   as the visible label element (or as the wrapping <label> element).          */
.ds-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ds-filter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted, #94A3B8);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* ─── Skeleton loading bar — DS pulse pattern (matches loading.html) ─────────
   Usage: place .ds-skeleton inside each table cell while loading.
   Width is set inline (style="width:…") for per-column variation.             */
.ds-skeleton {
    display: block;
    height: 0.75rem;
    border-radius: var(--radius-input, 0.375rem);
    background: var(--color-neutral-100, #f1f5f9);
    animation: ds-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes ds-skeleton-pulse {
    0%,  100% { opacity: 1;   }
    50%        { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-skeleton { animation: none; }
}

/* Warm reload (page change / filter / sort with data already present): keep rows in
   place and just dim them, so table height stays constant and the scroll does not jump. */
.ds-data-table.is-refreshing tbody {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
    .ds-data-table.is-refreshing tbody { transition: none; }
}

/* Sortable column header button */
.ds-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    /* los <button> no heredan text-transform/letter-spacing del thead (UA stylesheet) */
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    line-height: inherit;
}
.ds-sort-btn:hover { color: var(--text-title, #0F172A); }
.ds-sort-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity var(--transition-fast);
}
.ds-sort-btn:hover .ds-sort-icon,
th[aria-sort="ascending"] .ds-sort-icon,
th[aria-sort="descending"] .ds-sort-icon {
    opacity: 1;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. BADGES & STATUS
   ───────────────────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius-pill);
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: nowrap;
    border: 0;
    box-shadow: none;
}

.badge-primary   { background: var(--color-primary-light);   color: var(--color-primary); }
.badge-success   { background: var(--color-success-light);   color: #047857; }
.badge-danger    { background: var(--color-danger-light);    color: #b91c4d; }
.badge-warning   { background: rgba(249, 191, 89, 0.20);     color: #92400e; }
.badge-info      { background: var(--color-info-light);      color: #0e7490; }
.badge-default   { background: var(--color-neutral-100);     color: var(--text-muted); }
/* legacy aliases */
.badge-secondary { background: var(--color-info-light);      color: #0e7490; }
.badge-energy    { background: var(--color-warning-light);   color: #b45309; }

/* Status dot + badge combo */
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-success   { background: var(--color-success); }
.status-dot-danger    { background: var(--color-danger); }
.status-dot-warning   { background: var(--color-warning); }
.status-dot-secondary { background: var(--color-secondary); }


/* ─────────────────────────────────────────────────────────────────────────────
   14. AVATARS
   ───────────────────────────────────────────────────────────────────────────── */

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-100);
    font-weight: 600;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}

.avatar-xs  { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
.avatar-sm  { width: 2rem;    height: 2rem;    font-size: 0.75rem; }
.avatar-md  { width: 2.5rem;  height: 2.5rem;  font-size: 0.875rem; }
.avatar-lg  { width: 3rem;    height: 3rem;    font-size: 1rem; }
.avatar-xl  { width: 4rem;    height: 4rem;    font-size: 1.25rem; }
.avatar-2xl { width: 5rem;    height: 5rem;    font-size: 1.5rem; }

/* Avatar group */
.avatar-group {
    display: flex;
    align-items: center;
}

.avatar-group .avatar {
    border: 2px solid var(--bg-card);
    margin-left: -0.5rem;
}

.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group .avatar:hover { z-index: 1; }


/* ─────────────────────────────────────────────────────────────────────────────
   15. MODALS & DRAWERS
   ───────────────────────────────────────────────────────────────────────────── */

/* Modal overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Modal container */
.modal-container {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-in 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-sm { max-width: 28rem; }
.modal-md { max-width: 36rem; }
.modal-lg { max-width: 52rem; }
.modal-xl { max-width: 72rem; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: var(--bg-card);
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: var(--bg-card);
}

/* Drawer (Slide-in Panel) */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--z-modal);
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background: var(--bg-card);
    box-shadow: -4px 0 32px rgba(15, 23, 42, 0.15);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    animation: drawer-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

@keyframes drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: var(--bg-card);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.drawer-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. ALERTS
   ───────────────────────────────────────────────────────────────────────────── */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    color: var(--text-body);
}
.alert__icon {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.0625rem;
}
.alert__content { flex: 1 1 auto; min-width: 0; }
.alert__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.4;
}
.alert__message {
    margin: 0;
    line-height: 1.5;
}
.alert__title + .alert__message {
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

.alert-success { background: var(--color-success-light); border-color: var(--color-success-border); }
.alert-success .alert__icon { color: var(--color-success); border-color: var(--color-success-border); }

.alert-danger, .alert-error { background: var(--color-danger-light); border-color: var(--color-danger-border); }
.alert-danger .alert__icon, .alert-error .alert__icon { color: var(--color-danger); border-color: var(--color-danger-border); }

.alert-warning { background: var(--color-warning-light); border-color: var(--color-warning-border); }
.alert-warning .alert__icon { color: var(--color-warning); border-color: var(--color-warning-border); }

.alert-info { background: var(--color-info-light); border-color: var(--color-info-border); }
.alert-info .alert__icon { color: var(--color-info); border-color: var(--color-info-border); }


/* ─────────────────────────────────────────────────────────────────────────────
   17. FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.app-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: color-mix(in srgb, var(--bg-card) 95%, var(--bg-body) 5%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-subtle);
    margin-top: auto;
}

.app-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--color-neutral-50);
    font-size: 0.75rem;
    color: var(--text-subtle);
}

/* Dot indicator */
.app-footer-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 25%, transparent);
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   18. CAPACITY BAR (GYM-SPECIFIC)
   ───────────────────────────────────────────────────────────────────────────── */

.capacity-bar {
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    overflow: hidden;
    margin-top: 0.375rem;
}

.capacity-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.capacity-bar-fill.bg-success { background: var(--color-success); }
.capacity-bar-fill.bg-warning { background: var(--color-warning); }
.capacity-bar-fill.bg-danger  { background: var(--color-danger); }

/* Progress ring (for retention %) */
.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-track {
    fill: none;
    stroke: var(--color-neutral-100);
}

.progress-ring-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─────────────────────────────────────────────────────────────────────────────
   19. OVERRIDE: TOASTR
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Toast del Design System (card blanca + barra de acento + ícono en círculo) ──
   Espeja docs/design-system/components/alerts-toasts.html. */
.ds-toast-viewport {
    position: fixed;
    z-index: var(--z-toast);
    top: calc(var(--topbar-height) + 0.875rem);
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: min(384px, calc(100vw - 2rem));
    pointer-events: none;
}

.ds-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateX(0.75rem);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.ds-toast.is-visible { opacity: 1; transform: translateX(0); }
.ds-toast.is-leaving { opacity: 0; transform: translateX(0.75rem); }

.ds-toast__bar {
    flex: 0 0 auto;
    align-self: stretch;
    width: 0.25rem;
    min-height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--text-subtle);
}
.ds-toast__description {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.ds-toast__icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    color: var(--text-subtle);
}
.ds-toast__icon svg { width: 1.0625rem; height: 1.0625rem; }

.ds-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 0.125rem;
}
.ds-toast__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-heading);
    overflow-wrap: anywhere;
}

.ds-toast__close {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-toast__close svg { width: 0.875rem; height: 0.875rem; }
.ds-toast__close:hover { background: var(--bg-body); color: var(--text-body); }
.ds-toast__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Tipo → barra vertical + icono tintado sobre tarjeta neutra (catálogo).
   Sigue el mismo lenguaje cromático que las alertas y pills del DS. */
.ds-toast--success .ds-toast__bar { background: var(--color-success); }
.ds-toast--success .ds-toast__icon { background: var(--color-success-light); color: var(--color-success); }

.ds-toast--error .ds-toast__bar { background: var(--color-danger); }
.ds-toast--error .ds-toast__icon { background: var(--color-danger-light); color: var(--color-danger); }

.ds-toast--warning .ds-toast__bar { background: var(--color-warning); }
.ds-toast--warning .ds-toast__icon { background: var(--color-warning-light); color: var(--color-warning); }

.ds-toast--info .ds-toast__bar { background: var(--color-info); }
.ds-toast--info .ds-toast__icon { background: var(--color-info-light); color: var(--color-info); }

@media (prefers-reduced-motion: reduce) {
    .ds-toast { transition: none; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   20. OVERRIDE: SWEETALERT2
   ───────────────────────────────────────────────────────────────────────────── */

.swal2-container { z-index: var(--z-toast) !important; }

.swal2-dashboard-popup {
    border-radius: var(--radius-xl) !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    padding: 2rem 1.75rem 1.5rem !important;
    box-shadow: var(--shadow-md) !important;
    max-width: 420px !important;
    border: 1px solid var(--border-color) !important;
}

.swal2-dashboard-popup .swal2-title {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.015em !important;
}

.swal2-dashboard-popup .swal2-html-container {
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
}

.swal2-dashboard-popup .swal2-actions {
    gap: 0.625rem !important;
    margin-top: 1.5rem !important;
    padding: 0 !important;
    justify-content: flex-end !important;
}

.swal2-dashboard-popup .swal2-icon {
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 auto 1.25rem auto !important;
    border-width: 2px !important;
}

.swal2-dashboard-popup .swal2-icon .swal2-icon-content { font-size: 1.4rem !important; }



/* ─────────────────────────────────────────────────────────────────────────────
   21. OVERRIDE: AIR DATEPICKER
   ───────────────────────────────────────────────────────────────────────────── */

.air-datepicker {
    --adp-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --adp-font-size: 0.8125rem;
    --adp-accent-color: #0D9488;
    --adp-cell-background-color-selected: #0D9488;
    --adp-cell-background-color-selected-other-month: color-mix(in srgb, var(--color-primary) 40%, transparent);
    --adp-cell-background-color-in-range: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --adp-border-radius: var(--radius-card);
    --adp-btn-border-color: transparent;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}


/* ─────────────────────────────────────────────────────────────────────────────
   22. ANIMATIONS & TRANSITIONS
   ───────────────────────────────────────────────────────────────────────────── */

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.animate-fade-in   { animation: fade-in 0.2s ease; }
.animate-slide-up  { animation: slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.animate-scale-in  { animation: scale-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Skeleton loading */
.skeleton {
    background: var(--color-neutral-100);
    border-radius: var(--radius-sm);
}

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


/* ─────────────────────────────────────────────────────────────────────────────
   23. DARK MODE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
    --bg-body:               #111826;
    --bg-card:               #182233;
    --bg-card-hover:         #1d2a3f;
    --bg-topbar:             #182233;
    --bg-input:              #1d2940;
    --bg-sidebar:            #0f1627;

    --border-color:          #25344d;
    --border-color-strong:   #324561;

    --text-heading:          #ecf2fb;
    --text-body:             #cdd9ea;
    --text-muted:            #95a9c4;
    --text-subtle:           #7088a7;

    --topbar-bg:             #182233;
    --topbar-search-bg:      #1c2940;
    --topbar-search-border:  #2a3c57;
    --topbar-item-color:     #95aac6;
    --topbar-item-hover-color: #8abaff;

    /* Sidebar — restaurar estilo oscuro en dark mode */
    --sidenav-bg:                #0f1627;
    --sidenav-border-color:      rgba(255, 255, 255, 0.07);
    --sidenav-item-color:        #90a8c6;
    --sidenav-item-hover-color:  #e3edf9;
    --sidenav-item-hover-bg:     rgba(255, 255, 255, 0.06);
    --sidenav-item-active-color: #ffffff;
    --sidenav-item-active-bg:    rgba(102, 163, 249, 0.2);
    --sidenav-section-color:     rgba(151, 174, 205, 0.52);
    --sidenav-brand-color:       #f4f8ff;
    --sidenav-future-title-color: #f4cb79;
    --sidenav-future-color:      #f3ddb0;
    --sidenav-future-icon-color: #f2cf84;
    --sidenav-future-bg:         rgba(245, 158, 11, 0.09);
    --sidenav-future-hover-color: #fff5d9;
    --sidenav-future-hover-bg:   rgba(245, 158, 11, 0.18);
    --sidenav-future-active-color: #fff8e8;
    --sidenav-future-active-bg:  rgba(245, 158, 11, 0.24);
    --sidenav-future-border:     rgba(245, 158, 11, 0.2);
    --sidenav-future-hover-border: rgba(245, 158, 11, 0.34);
    --sidenav-future-active-border: rgba(245, 158, 11, 0.42);
    --sidenav-future-rail:       rgba(251, 191, 36, 0.98);

    /* Color overrides for dark mode */
    --color-primary-light:   color-mix(in srgb, var(--color-primary) 18%, transparent);
    --color-secondary-light: color-mix(in srgb, var(--color-secondary) 18%, transparent);
    --color-success-light:   color-mix(in srgb, var(--color-success) 15%, transparent);
    --color-danger-light:    color-mix(in srgb, var(--color-danger) 15%, transparent);
    --color-warning-light:   rgba(249, 191, 89, 0.15);
    --color-energy-light:    rgba(249, 115, 22, 0.15);
    --color-info-light:      color-mix(in srgb, var(--color-info) 15%, transparent);
    --color-neutral-50:      #152033;
    --color-neutral-100:     #1b2940;
    --color-neutral-200:     #243652;
    --color-neutral-300:     #304764;
    --color-neutral-400:     #4c6587;

    --icon-neutral-bg:       var(--color-neutral-200);
    --icon-neutral-color:    var(--text-muted);
    --icon-neutral-border:   var(--border-color);
}

/* Los ejes siempre se estampan (theme.js) y sus selectores html[data-palette] /
   html[data-semantic] (0,1,1) superan al bloque dark [data-theme="dark"] (0,1,0),
   asi que en dark los tokens *-light volvian a los tintes claros: texto invisible
   en opciones activas y alertas lavadas. Se re-afirman aca los tintes dark con
   mayor especificidad. "bold" queda fuera a proposito: sus rellenos solidos con
   texto blanco ya leen bien sobre fondo oscuro. */
html[data-theme="dark"][data-palette] {
    --color-primary-light:   color-mix(in srgb, var(--color-primary) 18%, transparent);
    --color-secondary-light: color-mix(in srgb, var(--color-secondary) 18%, transparent);
}

html[data-theme="dark"][data-semantic="subtle"],
html[data-theme="dark"][data-semantic="default"] {
    --color-success-light:   color-mix(in srgb, var(--color-success) 15%, transparent);
    --color-danger-light:    color-mix(in srgb, var(--color-danger) 15%, transparent);
    --color-warning-light:   rgba(249, 191, 89, 0.15);
    --color-info-light:      color-mix(in srgb, var(--color-info) 15%, transparent);
    --color-success-border:  color-mix(in srgb, var(--color-success) 38%, transparent);
    --color-danger-border:   color-mix(in srgb, var(--color-danger) 38%, transparent);
    --color-warning-border:  rgba(249, 191, 89, 0.38);
    --color-info-border:     color-mix(in srgb, var(--color-info) 38%, transparent);
}

/* Dark body background */
[data-theme="dark"] body {
    background-color: var(--bg-body);
    background-image: none;
}

/* Dark topbar */
[data-theme="dark"] .app-header.topbar {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .app-header.topbar .btn-icon {
    background: transparent;
    border-color: transparent;
}

[data-theme="dark"] .app-header.topbar .btn-icon:hover {
    background: var(--bg-card-hover);
    border-color: transparent;
}

/* Dark form input */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background-color: var(--bg-input);
    border-color: var(--border-color-strong);
    color: var(--text-heading);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--text-subtle);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    background-color: var(--bg-input);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Dark sidenav user footer card */
[data-theme="dark"] .sidenav-user {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark tabs-pills active */
[data-theme="dark"] .tabs-pills .tab-item:hover {
    background: var(--color-neutral-100);
    color: var(--text-heading);
}
[data-theme="dark"] .tabs-pills .tab-item.active {
    background: var(--color-primary-light);
    color: #8abaff;
}
[data-theme="dark"] .tabs-pills .tab-item.active .tab-count {
    background: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .form-select {
    color-scheme: dark;
    background-color: var(--bg-input);
    background-position: right 0.625rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235b7090' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-select option,
[data-theme="dark"] .form-select optgroup {
    background: var(--bg-card);
    color: var(--text-body);
}

/* Dark card */
[data-theme="dark"] .card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background: color-mix(in srgb, var(--bg-card) 94%, #000 6%);
    border-color: var(--border-color);
}

/* Dark table */
[data-theme="dark"] .table thead th {
    background: color-mix(in srgb, var(--bg-card) 90%, #000 10%);
    color: var(--text-muted);
    border-color: var(--border-color);
}

[data-theme="dark"] .table tbody td {
    border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--text-body);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

[data-theme="dark"] .table-action-btn {
    background: color-mix(in srgb, var(--bg-card) 86%, #0b1220 14%);
    border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
    color: var(--text-muted);
}

[data-theme="dark"] .table-action-btn:hover {
    background: color-mix(in srgb, var(--color-primary-light) 52%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--border-color));
    color: #d7e8ff;
}

[data-theme="dark"] .table-action-btn--muted:hover {
    background: color-mix(in srgb, var(--color-neutral-200) 72%, transparent);
    border-color: color-mix(in srgb, var(--border-color-strong) 78%, transparent);
    color: var(--text-body);
}

[data-theme="dark"] .table-action-btn--success:hover {
    background: color-mix(in srgb, var(--color-success-light) 58%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-success) 36%, var(--border-color));
    color: #9ff2df;
}

[data-theme="dark"] .table-action-btn--danger:hover {
    background: color-mix(in srgb, var(--color-danger-light) 60%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-danger) 36%, var(--border-color));
    color: #ffc0cd;
}

/* Dark modal */
[data-theme="dark"] .modal-container,
[data-theme="dark"] .drawer {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .drawer-header,
[data-theme="dark"] .drawer-footer {
    background: color-mix(in srgb, var(--bg-card) 94%, #000 6%);
    border-color: var(--border-color);
}

/* Dark SweetAlert2 */
[data-theme="dark"] .swal2-dashboard-popup {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .swal2-dashboard-popup .swal2-title {
    color: var(--text-heading) !important;
}

[data-theme="dark"] .swal2-dashboard-popup .swal2-html-container {
    color: var(--text-muted) !important;
}

/* Dark toast (DS) — la card usa --bg-card (theme-aware); solo reforzamos la sombra. */
[data-theme="dark"] .ds-toast { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

/* Dark Air Datepicker */
[data-theme="dark"] .air-datepicker {
    --adp-color: var(--text-body);
    --adp-background-color: var(--bg-card);
    --adp-background-color-hover: var(--bg-card-hover);
    --adp-background-color-active: var(--bg-card-hover);
    --adp-border-color: var(--border-color);
    --adp-border-color-inner: var(--border-color);
    --adp-day-name-color: var(--text-subtle);
    --adp-color-secondary: var(--text-muted);
    --adp-color-other-month: var(--text-subtle);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

/* Dark footer */
[data-theme="dark"] .app-footer {
    background: color-mix(in srgb, var(--bg-card) 90%, #000 10%);
    border-color: var(--border-color);
}

[data-theme="dark"] .app-footer-badge {
    background: color-mix(in srgb, var(--bg-card) 80%, #000 20%);
    border-color: var(--border-color);
}

/* Dark dropdown */
[data-theme="dark"] .hs-dropdown-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item { color: var(--text-muted); }

[data-theme="dark"] .dropdown-item:hover {
    background: var(--color-primary-light) !important;
    color: #7cb2ff !important;
}

/* Dark badge */
[data-theme="dark"] .badge-default {
    background: var(--color-neutral-200);
    color: var(--text-muted);
}

/* Dark alert: el texto sale de tokens (--text-heading/--text-body); los
   tintes y bordes dark los re-afirma el bloque de ejes tras el bloque dark. */

/* Dark capacity bar track */
[data-theme="dark"] .capacity-bar {
    background: var(--color-neutral-200);
}

/* Dark sidebar — restore dark-specific structural rules */
[data-theme="dark"] .logo-box {
    background: rgba(255, 255, 255, 0.025);
}

[data-theme="dark"] .menu-link:hover {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .menu-item.active > .menu-link,
[data-theme="dark"] .menu-link.active {
    border-color: rgba(100, 165, 255, 0.12) !important;
}

[data-theme="dark"] .menu-item.active > .menu-link::before,
[data-theme="dark"] .menu-link.active::before {
    background: rgba(100, 165, 255, 0.7) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   24. SCROLLBAR CUSTOM
   ───────────────────────────────────────────────────────────────────────────── */

.scrollbar-thin::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--color-neutral-200);
    border-radius: var(--radius-pill);
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-300);
}

/* Sidebar scrollbar contrast in dark sidebar */
.app-menu.sidenav .scrollbar-thin::-webkit-scrollbar-thumb,
.app-menu.sidenav.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}
.app-menu.sidenav .scrollbar-thin::-webkit-scrollbar-thumb:hover,
.app-menu.sidenav.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Global subtle scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-300); }


/* ─────────────────────────────────────────────────────────────────────────────
   UTILITY PATCHES
   ───────────────────────────────────────────────────────────────────────────── */

/* Spacing aliases — mapped to token scale */
.gap-base   { gap: var(--space-base); }
.mb-base    { margin-bottom: var(--space-base); }
.p-base     { padding: var(--space-base); }
.px-base    { padding-left: var(--space-base); padding-right: var(--space-base); }
.py-base    { padding-top: var(--space-base); padding-bottom: var(--space-base); }

/* Soft text sizes */
.text-2xs { font-size: 0.6875rem; line-height: 1.4; }

/* Focus ring helper */
.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Truncate */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
   25. TABS
   ───────────────────────────────────────────────────────────────────────────── */

.tabs {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.tab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
    user-select: none;
}

.tab-item:hover {
    color: var(--color-primary);
}

.tab-item.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-item .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--color-neutral-100);
    color: var(--text-subtle);
}

.tab-item.active .tab-count {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Pill-style tabs variant */
.tabs-pills {
    display: flex;
    gap: 0.25rem;
    border-bottom: none;
    padding: 0;
    background: transparent;
}

.tabs-pills .tab-item {
    border-bottom: none;
    border-radius: var(--radius-pill);
    margin-bottom: 0;
    padding: 0.375rem 0.875rem;
    color: var(--text-muted);
}

.tabs-pills .tab-item:hover {
    background: var(--color-neutral-100);
    color: var(--text-body);
}

.tabs-pills .tab-item.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    box-shadow: none;
    border-bottom-color: transparent;
}

.tabs-pills .tab-item.active .tab-count {
    background: var(--color-primary);
    color: #fff;
}


/* ─────────────────────────────────────────────────────────────────────────────
   26. SPINNER / LOADER
   ───────────────────────────────────────────────────────────────────────────── */

.spinner {
    display: inline-block;
    border-radius: 50%;
    border-style: solid;
    border-color: var(--color-neutral-200);
    border-top-color: var(--color-primary);
    animation: spin 0.65s linear infinite;
    flex-shrink: 0;
}

.spinner-xs  { width: 0.875rem; height: 0.875rem; border-width: 2px; }
.spinner-sm  { width: 1.125rem; height: 1.125rem; border-width: 2px; }
.spinner-md  { width: 1.625rem; height: 1.625rem; border-width: 2.5px; }
.spinner-lg  { width: 2.25rem;  height: 2.25rem;  border-width: 3px; }
.spinner-xl  { width: 3rem;     height: 3rem;     border-width: 3px; }

/* Colored variants */
.spinner-primary { border-top-color: var(--color-primary); }
.spinner-success { border-top-color: var(--color-success); }
.spinner-danger  { border-top-color: var(--color-danger); }
.spinner-white   { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }

/* Full-page loading overlay */
.page-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-3);
    z-index: var(--z-modal);
}

.page-loader-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
}


/* Reusable section/form/page blocker used by DashboardBlockUI. */
.dashboard-block-ui {
    position: absolute;
    inset: 0;
    z-index: var(--z-popover);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 4rem;
    border-radius: inherit;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    color: var(--text-body);
    font-size: 0.875rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.dashboard-block-ui--page {
    position: fixed;
    border-radius: 0;
    min-height: 100vh;
    background: color-mix(in srgb, var(--bg-body) 86%, transparent);
}

.dashboard-block-ui__label {
    line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────────────────
   27. EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    gap: var(--space-3);
}

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-100);
    color: var(--text-subtle);
    font-size: 1.75rem;
    margin-bottom: var(--space-1);
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.empty-state-description {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 26rem;
}

.empty-state-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* Compact version — for inside cards */
.empty-state-sm {
    padding: var(--space-8) var(--space-4);
}

.empty-state-sm .empty-state-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
}

.empty-state-sm .empty-state-title { font-size: 0.9375rem; }


/* ─────────────────────────────────────────────────────────────────────────────
   28. DIVIDER
   ───────────────────────────────────────────────────────────────────────────── */

.divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-4) 0;
}

.divider-sm { margin: var(--space-2) 0; }
.divider-lg { margin: var(--space-6) 0; }

/* M-08 (CSP, docs/seguridad-plataforma.md §6.5): plain top border, no margin
   reset — used on `<tr>`/`<div>` elements that used to carry
   `style="border-top: 1px solid var(--border-color);"` inline. `.divider`
   above cannot be reused there: its `margin` would break table row/section
   spacing that was never part of what those inline styles did. */
.tr-divider {
    border-top: 1px solid var(--border-color);
}

/* M-08 (CSP): the docs pages' flow/sequence diagrams and the plain docs
   shell used to cap their width with an inline `style="max-width: ..."`. */
.docs-plain-content {
    max-width: 960px;
    margin: 0 auto;
}

.svg-diagram {
    max-width: 100%;
}

.svg-diagram-640 {
    max-width: 640px;
}

.svg-diagram-720 {
    max-width: 720px;
}

/* M-08 (CSP): topbar/sidenav chrome (`partials/_topbar.html`,
   `partials/_sidenav.html`, `partials/_sidenav_menu.html`) used to set these
   with an inline `style="..."` attribute on every request — moved to classes
   so `style-src` does not need `'unsafe-inline'`. Values are unchanged. */
.icon-badge-primary {
    background: var(--color-primary);
}

.text-heading-color {
    color: var(--text-heading);
}

.text-subtle-color {
    color: var(--text-subtle);
}

.text-body-color {
    color: var(--text-body);
}

.text-topbar-item {
    color: var(--topbar-item-color);
}

.topbar-search-field {
    background: var(--topbar-search-bg);
    border-color: var(--topbar-search-border);
    font-size: 0.875rem;
}

.border-bottom-divider {
    border-bottom: 1px solid var(--border-color);
}

.divider-bg {
    background: var(--border-color);
}

.dropdown-panel {
    right: 0;
    top: calc(100% + 0.625rem);
    max-width: calc(100vw - 1rem);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

.dropdown-panel-notifications {
    width: min(22rem, calc(100vw - 1rem));
    min-width: min(22rem, calc(100vw - 1rem));
}

.dropdown-panel-profile {
    width: min(14rem, calc(100vw - 1rem));
    min-width: min(14rem, calc(100vw - 1rem));
}

/* En mobile el trigger (campana/avatar) no está pegado al borde derecho del
   viewport, así que anclar el panel con `right: 0` a ese trigger lo empuja
   fuera de pantalla por la izquierda (solo se ve una porción). Por debajo del
   breakpoint md lo pasamos a `fixed` y lo anclamos al viewport, no al trigger. */
@media (max-width: 767px) {
    .dropdown-panel {
        position: fixed;
        top: calc(var(--topbar-height) + 0.5rem);
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }

    .dropdown-panel-notifications,
    .dropdown-panel-profile {
        width: auto;
        min-width: 0;
    }
}

.icon-size-14 {
    font-size: 14px;
}

.icon-size-15 {
    font-size: 15px;
}

.icon-size-16 {
    font-size: 16px;
}

.sidenav-brand-text {
    color: var(--sidenav-brand-color);
    letter-spacing: -0.02em;
}

.sidenav-section-title-color {
    color: var(--sidenav-item-color);
}

.sidenav-item-color {
    color: var(--sidenav-item-color);
    font-size: var(--sidenav-item-font-size);
}

.sidenav-item-locked {
    color: var(--sidenav-item-color);
    font-size: var(--sidenav-item-font-size);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

.sidenav-icon-size {
    width: var(--sidenav-item-icon-size);
    height: var(--sidenav-item-icon-size);
    font-size: var(--sidenav-item-icon-size);
}

.badge-ml-auto {
    margin-left: auto;
}

/* M-08 (CSP): `components/ui/_tabler_sprite.html` — the sprite sheet's root
   `<svg>` is visually hidden (only referenced via `<use href="#tabler-...">`
   elsewhere), used to be an inline `style="..."`. */
.tabler-sprite-root {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Divider with label */
.divider-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.divider-label::before,
.divider-label::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border-color);
}

.divider-label span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Vertical divider */
.divider-v {
    width: 1px;
    background: var(--border-color);
    align-self: stretch;
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   29. PAGINATION
   ───────────────────────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.page-link {
    display: flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.page-link:hover {
    background: var(--color-neutral-100);
    color: var(--text-body);
}

.page-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    cursor: default;
}

.page-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Compact info text inside pagination */
.page-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
   30. PROGRESS (GENERIC)
   ───────────────────────────────────────────────────────────────────────────── */

.progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    overflow: hidden;
}

.progress-sm { height: 4px; }
.progress-lg { height: 10px; }

.progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-primary);
}

.progress-bar-success  { background: var(--color-success); }
.progress-bar-danger   { background: var(--color-danger); }
.progress-bar-warning  { background: var(--color-warning); }
.progress-bar-info     { background: var(--color-info); }

/* Striped animated progress */
.progress-bar-striped {
    background-image: none;
    animation: progress-stripes 0.8s linear infinite;
}

@keyframes progress-stripes {
    from { background-position: 1rem 0; }
    to   { background-position: 0 0; }
}

/* Dark mode refinements for new components */
[data-theme="dark"] .tabs { border-bottom-color: var(--border-color); }
[data-theme="dark"] .tabs-pills { background: transparent; }
[data-theme="dark"] .empty-state-icon { background: var(--color-neutral-200); }
[data-theme="dark"] .page-link { background: var(--bg-card); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .page-link:hover { background: var(--color-neutral-100); }
[data-theme="dark"] .progress { background: var(--color-neutral-200); }


/* ─────────────────────────────────────────────────────────────────────────────
   31. SURFACE COMPONENTS (ABMC LIST PAGES)
   Shared surface styles for list pages. Replaces the per-page _list_surface_styles.html include.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── KPI stat cards ────────────────────────────────── */
.surface-kpi-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: left;
    min-height: 5rem;
    padding: 1rem 1.25rem;
}

.surface-kpi-card .kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.surface-kpi-card:focus-visible {
    outline: 2px solid var(--color-primary, #0D9488);
    outline-offset: 2px;
}

/* ── Toolbar / filter card ─────────────────────────── */
.surface-toolbar {
    border: 1px solid color-mix(in srgb, var(--color-default-200, #e5e7eb) 88%, transparent);
    box-shadow: none;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.table-filter-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.table-filter-toolbar__lead {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.table-filter-toolbar__action-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.toolbar-export-dropdown {
    z-index: 20;
}

.toolbar-export-dropdown__menu {
    z-index: 80;
}

@media (min-width: 768px) {
    .table-filter-toolbar__lead {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .table-filter-toolbar__action-rail {
        justify-content: flex-end;
    }
}

.courier-filters-row {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.courier-filters-actions {
    display: flex;
    align-items: end;
    gap: 0.5rem;
}

@media (min-width: 1024px) {
    .courier-filters-row {
        grid-template-columns: minmax(280px, 1fr) 220px 180px auto;
        align-items: end;
    }
}

.returns-form-modal {
    width: min(34rem, calc(100vw - 2rem));
    max-width: 34rem;
    max-height: 88vh;
    overflow: hidden;
}

.returns-form-modal__body {
    max-height: calc(88vh - 5.5rem);
    overflow-y: auto;
}

/* ── Bulk actions bar ──────────────────────────────── */
.surface-bulk-bar {
    border: 1px solid color-mix(in srgb, var(--color-success, #059669) 30%, var(--color-default-200, #e5e7eb));
    box-shadow: none;
}

/* ── Mobile card rows ──────────────────────────────── */
.surface-mobile-card {
    border-bottom: 1px solid color-mix(in srgb, var(--color-default-200, #e5e7eb) 85%, transparent);
}

.surface-mobile-card:last-child {
    border-bottom: 0;
}


/* Module spacing helper */
.module-stack > * + * {
    margin-top: 1.5rem;
}

@media (min-width: 1024px) {
    .module-stack > * + * {
        margin-top: 1.75rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   32. ATTENDANCE MODULE
   ───────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────────
   33. MEMBER DETAIL PAGE
   ───────────────────────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

.member-detail-card {
    border: 1px solid color-mix(in srgb, var(--color-default-200, #e5e7eb) 70%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, #0f172a 4%, transparent);
    overflow: hidden;
    border-radius: 1rem;
}

.member-detail-card .card-header {
    padding-top: .95rem;
    padding-bottom: .95rem;
}

.member-detail-card .card-body {
    padding: 1.2rem;
}

.member-detail-card .card-body.p-0 {
    padding: 0;
}

.member-info-row {
    padding: .55rem .75rem;
    border-radius: .65rem;
    background: color-mix(in srgb, var(--color-default-50, #f8fafc) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-default-200, #e5e7eb) 60%, transparent);
}

.member-section-nav {
    border: 1px solid color-mix(in srgb, var(--color-default-200, #e5e7eb) 68%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, #0f172a 3%, transparent);
    border-radius: .85rem;
    background: #fff;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.member-tab {
    transition: color 0.2s ease;
    position: relative;
}

.member-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.member-tab:hover::after,
.member-tab.is-active::after {
    transform: scaleX(1);
}

/* Active color per tab */
#tab-medical.is-active             { color: var(--color-danger, #DC2626); }
#tab-membership-history.is-active  { color: var(--color-secondary, #14B8A6); }
#tab-payment-history.is-active     { color: var(--color-success, #059669); }
#tab-attendance.is-active          { color: var(--color-warning, #B45309); }

.member-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: .5rem;
    border: 1px solid color-mix(in srgb, var(--color-default-200, #e5e7eb) 75%, transparent);
    color: var(--color-default-500, #64748b);
    background: #fff;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.member-copy-btn:hover {
    border-color: color-mix(in srgb, var(--color-primary, #0D9488) 35%, var(--color-default-200, #e5e7eb));
    color: var(--color-primary, #0D9488);
}

.member-copy-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.member-progress-track {
    width: 100%;
    height: .55rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-default-200, #e5e7eb) 60%, transparent);
    overflow: hidden;
}

.member-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--color-primary, #0D9488);
}


/* Realtime status badge: subtle pulse for live connectivity indicators */
[data-live-status] {
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

[data-live-status] [data-live-dot] {
    animation: dashboard-live-pulse 1.8s ease-in-out infinite;
}

@keyframes dashboard-live-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
        transform: scale(0.78);
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-live-status] [data-live-dot] {
        animation: none;
    }
}

/* Dashboard command center */
.dashboard-command {
    --dashboard-danger: #e11d48;
    --dashboard-warning: #d97706;
}

.dashboard-priority-card,
.dashboard-detail-card {
    border-color: color-mix(in srgb, var(--dashboard-danger) 18%, var(--saas-border));
}

.dashboard-priority-card .thead-sm th {
    background: color-mix(in srgb, var(--dashboard-danger) 4%, var(--saas-panel));
}

.dashboard-exception-row {
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dashboard-exception-row:hover,
.dashboard-exception-row.is-selected {
    background: color-mix(in srgb, var(--saas-danger) 8%, var(--saas-panel));
}

.dashboard-exception-row.is-selected {
    box-shadow: inset 4px 0 0 var(--dashboard-danger);
}

.dashboard-exception-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--dashboard-danger) 65%, transparent);
    outline-offset: -2px;
}

/* Backend DS compatibility primitives (documented in docs/design-system/components/backend-primitives.html)
   Shared across dashboard, locker detail and merchant portal.
   Keep this layer token-backed: no one-off colors, radii or standard card shadows. */
.saas-console {
    --saas-bg: var(--bg-body);
    --saas-panel: var(--bg-card);
    --saas-border: var(--border-color);
    --saas-border-strong: var(--border-color-strong);
    --saas-text: var(--text-heading);
    --saas-muted: var(--text-muted);
    --saas-primary: var(--color-primary);
    --saas-success: var(--color-success);
    --saas-warning: var(--color-warning);
    --saas-danger: var(--color-danger);
}

[data-theme="dark"] .saas-console {
    --saas-bg: #0f172a;
    --saas-panel: rgba(30, 41, 59, 0.92);
    --saas-border: #1e293b;
    --saas-border-strong: #334155;
    --saas-text: #f1f5f9;
    --saas-muted: #94a3b8;
}

.saas-console .card {
    border-color: var(--saas-border);
    border-radius: var(--radius-card);
    box-shadow: none;
}

[data-theme="dark"] .saas-console .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.saas-console .card:hover,
.saas-console .card:hover.hover\:shadow-md {
    border-color: var(--saas-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .saas-console .card:hover,
[data-theme="dark"] .saas-console .card:hover.hover\:shadow-md {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.saas-hero {
    background: var(--saas-panel) !important;
    border-color: var(--saas-border-strong) !important;
}

.saas-eyebrow,
.dashboard-command__eyebrow {
    background: color-mix(in srgb, var(--saas-primary) 10%, var(--saas-panel)) !important;
    color: var(--saas-primary) !important;
    border: 1px solid color-mix(in srgb, var(--saas-primary) 18%, transparent) !important;
}

.saas-panel {
    background: var(--saas-panel);
}

.saas-kpi {
    border-left: 0 !important;
    background: var(--saas-panel);
}

.saas-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--saas-kpi-accent, var(--saas-primary));
}

.saas-kpi::after {
    background: none !important;
}

.saas-kpi--primary { --saas-kpi-accent: var(--saas-primary); }
.saas-kpi--success { --saas-kpi-accent: var(--saas-success); }
.saas-kpi--warning { --saas-kpi-accent: var(--saas-warning); }
.saas-kpi--danger { --saas-kpi-accent: var(--saas-danger); }

.saas-input {
    min-height: 2.5rem;
    background: var(--saas-panel);
    border-color: var(--saas-border) !important;
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.saas-input:focus {
    border-color: color-mix(in srgb, var(--saas-primary) 48%, var(--saas-border)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--saas-primary) 10%, transparent);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* `<select multiple>` needs its own height (a single-line `.saas-input`
   clips the option list) — a DS class instead of an inline `style=` so the
   CSP `style-src` (no `'unsafe-inline'`) never has to make an exception for
   it (docs/seguridad-plataforma.md §6.5, `tests/test_csp_compliance.py`).
   Used by `portal/integraciones/list.html`'s events multi-select. */
.saas-select--multi {
    height: auto;
    min-height: 6rem;
}

.saas-btn-secondary {
    border-radius: 10px !important;
    background: var(--saas-panel) !important;
    color: var(--saas-text) !important;
    border-color: var(--saas-border) !important;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.saas-btn-secondary:hover {
    background: color-mix(in srgb, var(--saas-border) 30%, var(--saas-panel)) !important;
    border-color: var(--saas-border-strong) !important;
    box-shadow: none;
}

.saas-data-table tbody tr,
.saas-console .table-hover tbody tr {
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Hover unificado con .ds-data-table: mismo tinte neutral sutil para que
   las tablas legacy (.saas-data-table) y las nuevas (.ds-data-table) se vean
   idénticas al pasar el mouse. */
.saas-data-table tbody tr:hover,
.saas-console .table-hover tbody tr:hover {
    background: color-mix(in srgb, var(--color-neutral-200) 30%, transparent);
}

.saas-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--saas-border);
    color: var(--saas-muted);
    font-size: 0.75rem;
    font-weight: 600;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.saas-row-action:hover {
    color: var(--saas-primary);
    border-color: color-mix(in srgb, var(--saas-primary) 30%, var(--saas-border));
    background: color-mix(in srgb, var(--saas-primary) 8%, var(--saas-panel));
}

.operator-inline-action-form {
    display: inline-flex;
    justify-content: flex-end;
    margin: 0;
}

.operator-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0 0.85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    white-space: nowrap;
}

.operator-inline-action--primary {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.operator-inline-action--primary:hover {
    color: #fff;
    background: color-mix(in srgb, var(--color-primary) 88%, #000);
    border-color: color-mix(in srgb, var(--color-primary) 88%, #000);
}

.operator-inline-action--success {
    color: #065f46;
    background: color-mix(in srgb, #10b981 14%, var(--saas-panel));
    border-color: color-mix(in srgb, #10b981 34%, var(--saas-border));
}

.operator-inline-action--success:hover {
    color: #064e3b;
    background: color-mix(in srgb, #10b981 22%, var(--saas-panel));
    border-color: color-mix(in srgb, #10b981 48%, var(--saas-border));
}

.operator-inline-action--secondary {
    color: var(--text-heading);
    background: var(--saas-panel);
    border-color: var(--saas-border);
}

.operator-inline-action--secondary:hover {
    color: var(--saas-primary);
    border-color: color-mix(in srgb, var(--saas-primary) 30%, var(--saas-border));
    background: color-mix(in srgb, var(--saas-primary) 8%, var(--saas-panel));
}

.merchant-status-pill {
    --merchant-status-color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 0.375rem;
    border: 1px solid rgba(100, 116, 139, 0.24);
    border: 1px solid color-mix(in srgb, var(--merchant-status-color) 28%, transparent);
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.08);
    color: #334155;
    color: color-mix(in srgb, var(--merchant-status-color) 72%, #111827);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.merchant-status-pill::before {
    content: "";
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--merchant-status-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--merchant-status-color) 16%, transparent);
}

.merchant-status-pill--pending_assignment,
.merchant-status-pill--cancelled,
.merchant-status-pill--unknown {
    --merchant-status-color: var(--text-muted);
}

.merchant-status-pill--awaiting_deposit,
.merchant-status-pill--expired {
    --merchant-status-color: #d97706;
    border-color: rgba(217, 119, 6, 0.28);
    background: rgba(217, 119, 6, 0.08);
    color: #92400e;
}

.merchant-status-pill--deposit_in_progress {
    --merchant-status-color: #0284c7;
    border-color: rgba(2, 132, 199, 0.28);
    background: rgba(2, 132, 199, 0.08);
    color: #075985;
}

.merchant-status-pill--deposited,
.merchant-status-pill--picked_up {
    --merchant-status-color: #059669;
    border-color: rgba(5, 150, 105, 0.28);
    background: rgba(5, 150, 105, 0.08);
    color: #065f46;
}

.merchant-status-pill--pickup_in_progress {
    --merchant-status-color: #4f46e5;
    border-color: rgba(79, 70, 229, 0.28);
    background: rgba(79, 70, 229, 0.08);
    color: #3730a3;
}

.merchant-status-pill--exception {
    --merchant-status-color: #e11d48;
    border-color: rgba(225, 29, 72, 0.28);
    background: rgba(225, 29, 72, 0.08);
    color: #9f1239;
}

[data-theme="dark"] .merchant-status-pill {
    color: color-mix(in srgb, var(--merchant-status-color) 28%, #f8fafc);
    border-color: color-mix(in srgb, var(--merchant-status-color) 42%, var(--saas-border, #334155));
}

.merchant-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr) minmax(260px, 0.9fr);
    gap: 1rem;
    overflow: hidden;
    border: 1px solid var(--saas-border-strong, #d8e1ec);
    border-radius: 1.35rem;
    background: #f8fafc;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    padding: 1rem;
}

.merchant-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

.merchant-detail-hero > * {
    position: relative;
    z-index: 1;
}

.merchant-detail-hero__status,
.merchant-detail-hero__route,
.merchant-detail-hero__action {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    padding: 1rem;
}

.merchant-detail-hero__status {
    display: grid;
    align-content: center;
    gap: 0.7rem;
}

.merchant-detail-hero__status h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.95;
}

.merchant-detail-hero__status p:last-child,
.merchant-detail-hero__action span,
.merchant-detail-hero__route span {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.merchant-detail-hero__eyebrow {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.merchant-detail-hero__route {
    display: grid;
    align-content: center;
    gap: 0.55rem;
}

.merchant-detail-hero__route strong {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.merchant-detail-hero__action {
    display: grid;
    align-content: center;
    gap: 0.7rem;
    border-color: color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
    background: var(--color-primary-light);
}

.merchant-detail-hero__action strong {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
}

.merchant-detail-hero__action form {
    margin: 0.2rem 0 0;
}

.merchant-detail-hero__primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border: 1px solid var(--color-primary);
    border-radius: 0.85rem;
    background: var(--color-primary);
    color: #fff;
    padding: 0.55rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast);
}

.merchant-detail-hero__primary-action:hover {
    background: var(--color-primary-hover);
}

.merchant-detail-hero__primary-action--success {
    border-color: #059669;
    background: #059669;
    box-shadow: 0 14px 28px rgba(5, 150, 105, 0.18);
}

.merchant-detail-hero__primary-action--success:hover {
    background: #047857;
    box-shadow: 0 16px 34px rgba(5, 150, 105, 0.24);
}

[data-theme="dark"] .merchant-detail-hero {
    background: #0f172a;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
}

[data-theme="dark"] .merchant-detail-hero__status,
[data-theme="dark"] .merchant-detail-hero__route,
[data-theme="dark"] .merchant-detail-hero__action {
    border-color: rgba(51, 65, 85, 0.9);
    background: rgba(15, 23, 42, 0.62);
}

[data-theme="dark"] .merchant-detail-hero__action {
    background: rgba(30, 64, 175, 0.22);
}

[data-theme="dark"] .merchant-detail-hero__status h2,
[data-theme="dark"] .merchant-detail-hero__route strong,
[data-theme="dark"] .merchant-detail-hero__action strong {
    color: #f8fafc;
}

[data-theme="dark"] .merchant-detail-hero__status p:last-child,
[data-theme="dark"] .merchant-detail-hero__action span,
[data-theme="dark"] .merchant-detail-hero__route span {
    color: #94a3b8;
}

@media (max-width: 1180px) {
    .merchant-detail-hero {
        grid-template-columns: 1fr 1fr;
    }

    .merchant-detail-hero__status {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .merchant-detail-hero {
        grid-template-columns: 1fr;
        border-radius: 1.1rem;
        padding: 0.75rem;
    }
}

.merchant-command-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: -0.25rem;
}

.merchant-command-strip__item {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    padding: 0.85rem 0.95rem;
}

.merchant-command-strip__item::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-primary);
    opacity: 0.72;
}

.merchant-command-strip__item--cell {
    border-color: rgba(5, 150, 105, 0.22);
    background: #f0fdf4;
}

.merchant-command-strip__item--cell::after {
    background: #059669;
    opacity: 0.86;
}

.merchant-command-strip__label {
    display: block;
    color: #94a3b8;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.merchant-command-strip__value {
    display: block;
    margin-top: 0.45rem;
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.merchant-command-strip__hint {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .merchant-command-strip__item {
    border-color: rgba(51, 65, 85, 0.92);
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .merchant-command-strip__item--cell {
    border-color: rgba(16, 185, 129, 0.26);
    background: rgba(6, 78, 59, 0.35);
}

[data-theme="dark"] .merchant-command-strip__value {
    color: #f8fafc;
}

[data-theme="dark"] .merchant-command-strip__label,
[data-theme="dark"] .merchant-command-strip__hint {
    color: #94a3b8;
}

@media (max-width: 1180px) {
    .merchant-command-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .merchant-command-strip {
        grid-template-columns: 1fr;
    }
}

.merchant-package-card {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--color-primary);
}

.merchant-package-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.merchant-package-card__header h2 {
    margin: 0.25rem 0 0;
}

.merchant-package-card__header > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-info);
    padding: 0.25rem 0.6rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.merchant-package-card__intro {
    margin: 0.65rem 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.merchant-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.merchant-package-grid > div,
.merchant-package-card__empty {
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 0.95rem;
    background: #f8fafc;
    padding: 0.8rem 0.9rem;
}

.merchant-package-grid__wide {
    grid-column: span 3;
}

.merchant-package-grid dt {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.merchant-package-grid dd {
    margin: 0.3rem 0 0;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.merchant-package-card__empty {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

[data-theme="dark"] .merchant-package-card {
    border-top-color: var(--color-primary);
}

[data-theme="dark"] .merchant-package-card__header > span {
    border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: color-mix(in srgb, var(--color-primary) 35%, white);
}

[data-theme="dark"] .merchant-package-card__intro,
[data-theme="dark"] .merchant-package-card__empty {
    color: #94a3b8;
}

[data-theme="dark"] .merchant-package-grid > div,
[data-theme="dark"] .merchant-package-card__empty {
    border-color: rgba(51, 65, 85, 0.92);
    background: rgba(15, 23, 42, 0.62);
}

[data-theme="dark"] .merchant-package-grid dd {
    color: #f8fafc;
}

@media (max-width: 900px) {
    .merchant-package-grid {
        grid-template-columns: 1fr 1fr;
    }

    .merchant-package-grid__wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .merchant-package-card__header {
        flex-direction: column;
    }

    .merchant-package-grid {
        grid-template-columns: 1fr;
    }

    .merchant-package-grid__wide {
        grid-column: span 1;
    }
}

.merchant-wizard-intro__title {
    margin: 0.25rem 0 0.35rem;
    color: #0f172a;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.04em;
}

.merchant-availability-gate {
    overflow: hidden;
}

.merchant-availability-gate::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--color-primary);
}

.merchant-availability-gate__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.merchant-availability-gate__badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.10);
    color: #92400e;
    padding: 0.25rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.merchant-availability-result {
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
}

.merchant-availability-result--available {
    border-color: rgba(5, 150, 105, 0.24);
    background: rgba(236, 253, 245, 0.78);
    color: #065f46;
}

.merchant-availability-result--warning {
    border-color: rgba(217, 119, 6, 0.26);
    background: rgba(255, 251, 235, 0.84);
    color: #92400e;
}

.merchant-availability-result--error {
    border-color: rgba(225, 29, 72, 0.24);
    background: rgba(255, 241, 242, 0.84);
    color: #9f1239;
}

.merchant-wizard {
    display: grid;
    gap: 1rem;
}

.merchant-wizard-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.merchant-wizard-stepper li {
    position: relative;
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
    padding: 0.85rem 0.9rem 0.85rem 3rem;
}

.merchant-wizard-stepper span {
    position: absolute;
    top: 0.82rem;
    left: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.55rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}

.merchant-wizard-stepper strong {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.merchant-wizard-stepper small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.merchant-wizard__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
    gap: 1rem;
    align-items: start;
}

.merchant-wizard__main {
    display: grid;
    gap: 1rem;
}

.merchant-wizard-section,
.merchant-wizard-summary {
    border: 1px solid rgba(226, 232, 240, 0.94);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055);
    padding: 1.1rem;
}

.merchant-wizard-section {
    display: grid;
    gap: 1rem;
}

.merchant-wizard-section__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.merchant-wizard-section__header > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.8rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.merchant-wizard-section__header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.merchant-wizard-section__header p {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.merchant-wizard-section--confirm {
    border-color: rgba(5, 150, 105, 0.24);
    background: #f0fdf4;
}

.merchant-wizard-note,
.merchant-wizard-summary__warning {
    display: grid;
    gap: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--border-color));
    border-radius: 0.9rem;
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    padding: 0.8rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.merchant-wizard-note strong {
    color: #1e40af;
    font-weight: 600;
}

.merchant-wizard__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    border: 1px solid #059669;
    border-radius: 0.85rem;
    background: #059669;
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast);
}

.merchant-wizard__submit:hover {
    background: #047857;
}

.merchant-wizard-summary {
    position: sticky;
    top: 5.5rem;
}

.merchant-wizard-summary h2 {
    margin: 0.3rem 0 0;
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.merchant-wizard-summary > p:not(.merchant-detail-hero__eyebrow) {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.merchant-wizard-summary__grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem 0.85rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    padding: 0.9rem 0;
}

.merchant-wizard-summary__grid span {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.merchant-wizard-summary__grid strong {
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.merchant-wizard-summary__warning {
    margin-top: 1rem;
}

[data-theme="dark"] .merchant-wizard-intro__title,
[data-theme="dark"] .merchant-wizard-stepper strong,
[data-theme="dark"] .merchant-wizard-section__header h2,
[data-theme="dark"] .merchant-wizard-summary h2,
[data-theme="dark"] .merchant-wizard-summary__grid strong {
    color: #f8fafc;
}

[data-theme="dark"] .merchant-wizard-stepper li,
[data-theme="dark"] .merchant-wizard-section,
[data-theme="dark"] .merchant-wizard-summary {
    border-color: rgba(51, 65, 85, 0.92);
    background: rgba(15, 23, 42, 0.74);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .merchant-wizard-section--confirm {
    background: rgba(6, 78, 59, 0.35);
}

[data-theme="dark"] .merchant-wizard-stepper small,
[data-theme="dark"] .merchant-wizard-section__header p,
[data-theme="dark"] .merchant-wizard-summary > p:not(.merchant-detail-hero__eyebrow) {
    color: #94a3b8;
}

[data-theme="dark"] .merchant-wizard-summary__grid {
    border-color: rgba(51, 65, 85, 0.92);
}

[data-theme="dark"] .merchant-wizard-note,
[data-theme="dark"] .merchant-wizard-summary__warning {
    border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: color-mix(in srgb, var(--color-primary) 35%, white);
}

@media (max-width: 1180px) {
    .merchant-wizard-stepper,
    .merchant-wizard__layout {
        grid-template-columns: 1fr;
    }

    .merchant-wizard-summary {
        position: static;
    }
}

@media (max-width: 760px) {
    .merchant-availability-gate__header {
        flex-direction: column;
    }

    .merchant-wizard-stepper li {
        padding-left: 2.75rem;
    }

    .merchant-wizard-section,
    .merchant-wizard-summary {
        padding: 0.95rem;
    }
}

.merchant-timeline-card {
    overflow: hidden;
}

.merchant-timeline-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--color-primary);
}

.merchant-timeline-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.merchant-timeline-card__header h2 {
    margin: 0.25rem 0 0;
}

.merchant-timeline-card__header > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--border-color));
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-info);
    padding: 0.25rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.merchant-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.merchant-timeline::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0.58rem;
    width: 2px;
    background: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.merchant-timeline__item {
    --merchant-timeline-color: #94a3b8;
    position: relative;
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0 0 1rem;
}

.merchant-timeline__item:last-child {
    padding-bottom: 0;
}

.merchant-timeline__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 0.78rem;
    height: 0.78rem;
    margin-top: 0.3rem;
    border: 2px solid var(--merchant-timeline-color);
    border-radius: 999px;
    background: var(--saas-panel, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--merchant-timeline-color) 12%, transparent);
}

.merchant-timeline__content {
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 0.95rem;
    background: rgba(248, 250, 252, 0.76);
    padding: 0.75rem 0.85rem;
}

.merchant-timeline__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.merchant-timeline__title {
    margin: 0;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.018em;
}

.merchant-timeline__status {
    flex: 0 0 auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--merchant-timeline-color) 11%, #fff);
    color: color-mix(in srgb, var(--merchant-timeline-color) 78%, #0f172a);
    padding: 0.18rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.merchant-timeline__description {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.merchant-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.merchant-timeline__meta > * {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.045);
    color: #475569;
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.merchant-timeline__item--completed {
    --merchant-timeline-color: #059669;
}

.merchant-timeline__item--current {
    --merchant-timeline-color: var(--color-primary);
}

.merchant-timeline__item--current .merchant-timeline__content {
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--border-color));
    background: var(--color-primary-light);
    box-shadow: none;
}

.merchant-timeline__item--pending {
    --merchant-timeline-color: #94a3b8;
}

.merchant-timeline__item--pending .merchant-timeline__content {
    opacity: 0.76;
}

[data-theme="dark"] .merchant-timeline-card__header > span {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: color-mix(in srgb, var(--color-primary) 35%, white);
    border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
}

[data-theme="dark"] .merchant-timeline__content {
    border-color: rgba(51, 65, 85, 0.92);
    background: rgba(15, 23, 42, 0.62);
}

[data-theme="dark"] .merchant-timeline__marker {
    background: #0f172a;
}

[data-theme="dark"] .merchant-timeline__title {
    color: #f8fafc;
}

[data-theme="dark"] .merchant-timeline__description {
    color: #94a3b8;
}

[data-theme="dark"] .merchant-timeline__meta > * {
    background: rgba(248, 250, 252, 0.08);
    color: #cbd5e1;
}

@media (max-width: 760px) {
    .merchant-timeline-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .merchant-timeline__title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }
}

.locker-console .surface-kpi-card {
    padding: 0;
}

.locker-section-copy {
    margin: 0;
    color: var(--saas-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}


.locker-kpi-grid .saas-kpi .card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.95rem;
    min-height: 8.35rem;
    padding: 1.125rem !important;
}

.locker-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.locker-kpi-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--kpi-card-accent, var(--saas-primary)) 9%, var(--saas-panel));
    color: var(--kpi-card-accent, var(--saas-primary));
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.25;
}

.locker-kpi-grid .kpi-stat-content {
    display: grid;
    gap: 0.12rem;
}

.locker-kpi-grid .kpi-label {
    margin: 0;
    color: var(--saas-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.locker-kpi-grid .kpi-value {
    margin: 0;
    color: var(--saas-text);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
}

.locker-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.locker-table-header .saas-eyebrow {
    display: inline-flex;
    margin-bottom: 0.45rem;
}

.locker-table-header .saas-section-title {
    display: block;
}

.locker-create-button {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.locker-filter-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 1.4fr) minmax(11rem, 0.8fr) minmax(12rem, 0.9fr);
    gap: 0.85rem;
    margin-top: 1rem;
}

.locker-filter-field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.locker-filter-field span {
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 700;
}

.locker-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.locker-table-footer .module-status {
    margin: 0;
}


.locker-table-identity,
.locker-table-location,
.locker-table-muted {
    min-width: 0;
}

.locker-table-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.locker-table-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--radius-input);
    background: color-mix(in srgb, var(--saas-primary) 9%, var(--saas-panel));
    color: var(--saas-primary);
    flex: 0 0 auto;
}

.locker-table-title {
    margin: 0;
    color: var(--saas-text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}

.locker-table-subtitle,
.locker-table-meta {
    margin: 0.15rem 0 0;
    color: var(--saas-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.locker-table-location strong {
    display: block;
    color: var(--saas-text);
    font-size: 0.84rem;
    font-weight: 700;
}


.locker-form-modal .saas-section-title,
.locker-detail-modal .locker-detail-modal__title {
    font-size: 1rem;
}

@media (max-width: 900px) {
    .locker-filter-grid {
        grid-template-columns: 1fr;
    }

    .locker-table-header,
    .locker-table-footer {
        align-items: stretch;
        flex-direction: column;
    }
}


.locker-detail-modal,
.locker-form-modal {
    width: min(42rem, calc(100vw - 2rem));
    max-width: 42rem;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-card);
    background: var(--saas-panel);
    color: var(--saas-text);
    box-shadow: var(--shadow-md);
}

.locker-detail-modal__heading,
.locker-detail-modal__title-row,
.locker-form-modal__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.locker-detail-modal__title-row {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.locker-detail-modal__icon,
.locker-form-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-input);
    background: color-mix(in srgb, var(--saas-primary) 9%, var(--saas-panel));
    color: var(--saas-primary);
    flex: 0 0 auto;
}

.locker-form-label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 700;
}

.locker-form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text-body);
    font-size: 0.875rem;
    font-weight: 600;
}

.locker-detail-modal::backdrop {
    background: rgba(15, 23, 42, 0.34);
}

.locker-detail-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--saas-border);
    background: var(--saas-panel);
}

.locker-detail-modal__title {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--saas-text);
}

.locker-detail-modal__subtitle {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--saas-muted);
}

.locker-detail-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0.22rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.locker-detail-modal__badge::before {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.locker-detail-modal__close,
.locker-detail-modal__maintenance {
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-input);
    background: var(--saas-panel);
    color: var(--saas-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.locker-detail-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: var(--saas-muted);
}

.locker-detail-modal__maintenance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.625rem 1rem;
}

.locker-detail-modal__close:hover,
.locker-detail-modal__maintenance:hover,
.locker-form-modal__close:hover {
    background: var(--bg-card-hover);
    border-color: var(--saas-border-strong);
}

.locker-detail-modal__body {
    max-height: 76vh;
    overflow-y: auto;
    padding: 1.25rem;
}

.locker-detail-modal__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.locker-detail-modal__meta-item {
    min-width: 0;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-card);
    background: var(--saas-panel);
    padding: 0.75rem 0.85rem;
}

.locker-detail-modal__meta-item--wide,
.locker-detail-modal__meta-item--alert {
    grid-column: 1 / -1;
}

.locker-detail-modal__meta-item--alert {
    border-color: rgba(244, 63, 94, 0.28);
    background: rgba(255, 241, 242, 0.74);
}

.locker-detail-modal__meta-item span,
.locker-cell-card__meta {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--saas-muted);
}

.locker-detail-modal__meta-item strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--saas-text);
    font-size: 0.875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.locker-detail-modal__actions {
    margin-top: 1rem;
}

.locker-detail-modal__section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--saas-border);
}

.locker-detail-modal__section-heading h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--saas-text);
}

.locker-detail-modal__section-heading p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--saas-muted);
    text-align: right;
}

.locker-detail-modal__cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.locker-cell-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-card);
    background: #ffffff;
    padding: 0.85rem;
}

.locker-cell-card__identity {
    min-width: 0;
}

.locker-cell-card__identity p {
    margin: 0;
    color: var(--saas-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.locker-cell-card__identity span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.locker-cell-card__status--success {
    color: var(--saas-success);
}

.locker-cell-card__status--warning {
    color: var(--saas-warning);
}

.locker-cell-card__status--danger {
    color: var(--saas-danger);
}

.locker-cell-card__status--info {
    color: var(--color-info);
}

.locker-cell-card__status--neutral {
    color: var(--saas-muted);
}

.locker-cell-card__meta {
    text-align: right;
    white-space: nowrap;
}

.locker-detail-modal__status {
    min-height: 2.5rem;
    margin: 0;
    border-top: 1px solid var(--saas-border);
    padding: 0.75rem 1.25rem;
    color: var(--saas-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

/* T9: tab bar for the locker detail modal (Detalle | Dispositivo) */
.locker-detail-modal__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--saas-border);
    background: var(--saas-panel);
    padding: 0 1.25rem;
}

.locker-detail-modal__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--saas-muted);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.locker-detail-modal__tab:hover {
    color: var(--saas-text);
}

.locker-detail-modal__tab--active {
    color: var(--color-brand-600, #0d9488);
    border-bottom-color: var(--color-brand-600, #0d9488);
}

.locker-form-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--saas-border);
}

.locker-form-modal__subtitle {
    margin: 0.2rem 0 0;
    color: var(--saas-muted);
    font-size: 0.8125rem;
}

.locker-form-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-input);
    background: var(--saas-panel);
    color: var(--saas-muted);
}

.locker-form-modal__body {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.locker-form-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: 0 -1.25rem -1.25rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--saas-border);
    background: var(--bg-card-hover);
}


.locker-exception-item {
    padding: 0.75rem;
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-input);
    background: var(--color-warning-light);
    color: var(--color-warning);
    text-align: left;
    font-size: 0.875rem;
}

.locker-exception-item__meta {
    margin: 0.25rem 0 0;
    color: var(--color-warning);
    font-size: 0.75rem;
}

.locker-exception-item__resolve {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-input);
    background: var(--saas-panel);
    color: var(--color-warning);
    font-size: 0.75rem;
    font-weight: 700;
}

.locker-history-item {
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-input);
    background: var(--saas-panel);
    color: var(--saas-text);
}

.locker-history-item {
    padding: 0.75rem;
    font-size: 0.875rem;
}

.locker-history-item--error {
    border-color: var(--color-danger-border);
    background: var(--color-danger-light);
    color: var(--saas-danger);
}

.locker-history-item__title {
    margin: 0;
    font-weight: 700;
}

.locker-history-item__message {
    margin: 0.125rem 0 0;
    color: inherit;
    font-size: 0.75rem;
    opacity: 0.82;
}

.locker-history-item__meta,
.locker-history-item__empty {
    margin: 0.25rem 0 0;
    color: var(--saas-muted);
    font-size: 0.75rem;
}

.locker-history-item__empty {
    padding: 0.25rem 0;
}

@media (max-width: 640px) {
    .locker-detail-modal__meta,
    .locker-detail-modal__cells {
        grid-template-columns: 1fr;
    }

    .locker-detail-modal__section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .locker-detail-modal__section-heading p {
        text-align: left;
    }
}



.merchant-console .surface-toolbar {
    box-shadow: none;
}


/* User correction: KPI cards use ONLY a flat top accent in the refreshed SaaS layer. */
.saas-console .saas-hero,
.saas-console .dashboard-command__hero {
    background: var(--saas-panel) !important;
}

.saas-console .dashboard-command__hero::after {
    content: none !important;
    display: none !important;
}

.saas-console .saas-kpi::before,
.saas-console .dashboard-kpi::before {
    content: none !important;
    display: none !important;
}

.saas-console .saas-kpi::after,
.saas-console .dashboard-kpi::after {
    content: none !important;
    display: none !important;
}

.saas-console .saas-kpi,
.saas-console .dashboard-kpi {
    --kpi-card-accent: var(--saas-kpi-accent, var(--dashboard-accent, var(--saas-primary)));
    border: 1px solid color-mix(in srgb, var(--kpi-card-accent) 16%, var(--saas-border)) !important;
    box-shadow: none;
}

[data-theme="dark"] .saas-console .saas-kpi,
[data-theme="dark"] .saas-console .dashboard-kpi {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.saas-console .saas-kpi:hover,
.saas-console .dashboard-kpi:hover {
    border-color: color-mix(in srgb, var(--kpi-card-accent) 16%, var(--saas-border)) !important;
    box-shadow: none;
}

[data-theme="dark"] .saas-console .saas-kpi:hover,
[data-theme="dark"] .saas-console .dashboard-kpi:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.saas-console .saas-kpi .kpi-icon,
.saas-console .dashboard-kpi .kpi-icon {
    background: color-mix(in srgb, var(--kpi-card-accent) 13%, var(--saas-panel)) !important;
    color: var(--kpi-card-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi-card-accent) 12%, transparent);
}

.saas-console .dashboard-kpi--danger { --saas-kpi-accent: var(--saas-danger); }
.saas-console .dashboard-kpi--warning { --saas-kpi-accent: var(--saas-warning); }
.saas-console .dashboard-kpi--neutral { --saas-kpi-accent: var(--text-muted); }
.saas-console .dashboard-kpi--primary { --saas-kpi-accent: var(--saas-primary); }

.saas-console .saas-btn-primary {
    box-shadow: none;
}

/* Compact section bars replace noisy page hero cards in refreshed operational screens. */
.saas-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding: 0.25rem 0 0.5rem;
}

.saas-section-bar p {
    margin: 0;
}

@media (max-width: 640px) {
    .saas-section-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.saas-section-title {
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--text-heading);
    font-weight: 600;
}


/* Dashboard operational redesign */
.dashboard-command > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2.25rem;
}

.dashboard-row {
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 1440px) {
    .dashboard-row--hero       { grid-template-columns: 1.1fr .9fr; }
    .dashboard-row--exceptions { grid-template-columns: 1.25fr .75fr; }
    .dashboard-row--lockers    { grid-template-columns: .85fr 1.15fr; }
    .dashboard-row--sla        { grid-template-columns: .9fr 1.1fr; }
}

.dashboard-command-bar {
    gap: 1rem;
}

.dashboard-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid var(--saas-border, var(--border-color));
    background: var(--saas-panel);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.dashboard-mode-toggle input {
    appearance: none;
    width: 2.25rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    transition: background-color 160ms ease;
}

.dashboard-mode-toggle input::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 160ms ease;
}

.dashboard-mode-toggle input:checked {
    background: var(--color-primary);
}

.dashboard-mode-toggle input:checked::after {
    transform: translateX(1.05rem);
}

.dashboard-actions-card {
    border-color: var(--border-color);
}

.dashboard-action-metric {
    position: relative;
    min-height: 138px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--saas-panel);
    padding: var(--space-5);
    overflow: hidden;
}

.dashboard-action-metric::after {
    content: none;
}

.dashboard-action-metric--danger { --metric-color: var(--color-danger); }
.dashboard-action-metric--warning { --metric-color: var(--color-info); }
.dashboard-action-metric--amber { --metric-color: var(--color-warning); }
.dashboard-action-metric--primary { --metric-color: var(--color-primary); }

.dashboard-action-icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    color: var(--metric-color, var(--icon-neutral-color));
    background: color-mix(in srgb, var(--metric-color, var(--icon-neutral-color)) 12%, var(--saas-panel));
}

.dashboard-action-value {
    margin-top: 0.85rem;
    font-size: 2rem;
    line-height: 1;
    font-weight: 600;
    color: var(--metric-color, var(--color-primary));
    letter-spacing: -0.04em;
}

.dashboard-action-label {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-heading, #0f172a);
}

.dashboard-action-hint {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}

.dashboard-filter-select {
    min-height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--saas-border, var(--border-color));
    background: var(--saas-panel);
    padding: 0 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-body);
}

.dashboard-operative-table tbody tr {
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-operative-table tbody tr:hover {
    background: color-mix(in srgb, var(--saas-primary) 6%, var(--saas-panel));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--saas-primary) 72%, transparent);
}

.dashboard-locker-status {
    display: grid;
    grid-template-columns: minmax(140px, 0.75fr) 1.25fr;
    gap: 1.25rem;
    align-items: center;
}

.dashboard-locker-total {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--bg-card);
    border: 0.5rem solid var(--color-success-light);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dashboard-locker-total span {
    font-size: 2rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1;
}

.dashboard-locker-total small {
    margin-top: -2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.dashboard-locker-status-list {
    display: grid;
    gap: 0.7rem;
}

.dashboard-locker-state {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid var(--saas-border, #ECEEF1);
    border-radius: 0.95rem;
    padding: 0.7rem 0.8rem;
    color: var(--text-body);
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.dashboard-locker-state:hover {
    border-color: color-mix(in srgb, var(--state-color) 34%, var(--saas-border, #ECEEF1));
    background: color-mix(in srgb, var(--state-color) 6%, var(--saas-panel));
}

.dashboard-state-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--state-color);
}

.dashboard-locker-state strong {
    color: #0f172a;
}

.dashboard-locker-state em {
    min-width: 2.5rem;
    text-align: right;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dashboard-command.is-operational-mode [data-operational-secondary] {
    display: none !important;
}

.dashboard-command.is-operational-mode .dashboard-detail-card,
.dashboard-command.is-operational-mode .dashboard-priority-card,
.dashboard-command.is-operational-mode .dashboard-actions-card {
    border-color: color-mix(in srgb, var(--color-danger) 20%, var(--saas-border, var(--border-color)));
}

.table-action-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .dashboard-locker-status {
        grid-template-columns: 1fr;
    }
    .dashboard-locker-total {
        max-width: 220px;
        margin-inline: auto;
    }
}

/* ============================================================================
   UI V2 COMPONENTS — Demo V1 operational design system
   Flat, token-driven and intentionally reusable across merchant/operations views.
   ============================================================================ */

.kpi-card-v2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem;
    border-radius: var(--radius-card);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.kpi-card-v2__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.kpi-card-v2__icon,
.hero-card__icon,
.action-card__icon {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-card-v2__icon--primary,
.hero-card__icon--primary,
.action-card__icon--primary { background: var(--icon-neutral-bg); color: var(--icon-neutral-color); }
.kpi-card-v2__icon--success,
.hero-card__icon--success,
.action-card__icon--success { background: var(--color-success-light); color: var(--color-success); }
.kpi-card-v2__icon--warning,
.kpi-card-v2__icon--amber,
.hero-card__icon--warning,
.action-card__icon--warning { background: var(--color-warning-light); color: var(--color-warning); }
.kpi-card-v2__icon--danger,
.hero-card__icon--danger,
.action-card__icon--danger { background: var(--color-danger-light); color: var(--color-danger); }
.kpi-card-v2__icon--info,
.hero-card__icon--info { background: var(--color-info-light); color: var(--color-info); }
.kpi-card-v2__icon--secondary,
.hero-card__icon--secondary { background: var(--color-secondary-light); color: var(--color-secondary); }

.kpi-card-v2__trend,
.capacity-card__status,
.summary-panel__status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius-full);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.kpi-card-v2__trend--up { background: var(--color-success-light); color: var(--color-success); }
.kpi-card-v2__trend--down { background: var(--color-danger-light); color: var(--color-danger); }
.kpi-card-v2__trend--neutral { background: var(--color-neutral-100); color: var(--text-muted); }

.kpi-card-v2__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.kpi-card-v2__value {
    margin: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.dashboard-chart-shell { min-block-size: 12rem; }
.dashboard-chart-shell--trend { min-block-size: 14.375rem; }
.dashboard-chart-shell--sla { min-block-size: 11.25rem; }

.wizard-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 2rem;
    padding: 0 0 0.25rem;
    list-style: none;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 640px) {
    .wizard-stepper { gap: 1rem; }
    .wizard-step { min-inline-size: 5.5rem; }
}

.wizard-stepper::before {
    content: '';
    position: absolute;
    inset-block-start: 1rem;
    inset-inline: 0;
    block-size: 2px;
    background: var(--color-neutral-200);
    z-index: 0;
}

.wizard-step {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
    position: relative;
    z-index: 1;
}

.wizard-step__number,
.summary-panel__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.125rem;
    block-size: 2.125rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 2px solid var(--color-neutral-300);
    color: var(--text-muted);
}

.wizard-step--completed .wizard-step__number,
.summary-panel__step--completed { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.wizard-step--current .wizard-step__number,
.summary-panel__step--current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.summary-panel__step--pending { background: var(--color-neutral-100); border-color: var(--color-neutral-200); color: var(--text-subtle); }

.wizard-step__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-wrap: balance;
}

.wizard-step--completed .wizard-step__label,
.wizard-step--current .wizard-step__label { color: var(--text-heading); }

.wizard-step__sublabel {
    font-size: 0.6875rem;
    color: var(--text-subtle);
    text-align: center;
    text-wrap: balance;
}

.timeline-v2 {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.timeline-v2::before {
    content: '';
    position: absolute;
    inset-inline-start: 1.1875rem;
    inset-block: 0;
    inline-size: 2px;
    background: var(--color-neutral-200);
}

.timeline-v2__item {
    display: flex;
    gap: 1rem;
    padding-block-end: 1.5rem;
    position: relative;
}

.timeline-v2__item:last-child { padding-block-end: 0; }

.timeline-v2__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    background: var(--bg-card);
    border: 2px solid var(--color-neutral-300);
    color: var(--text-muted);
    z-index: 1;
}

.timeline-v2__item--completed .timeline-v2__marker { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.timeline-v2__item--current .timeline-v2__marker { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.timeline-v2__content { flex: 1; min-inline-size: 0; padding-block-start: 0.25rem; }
.timeline-v2__title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text-heading); text-wrap: balance; }
.timeline-v2__description { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.timeline-v2__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-block-start: 0.5rem; font-size: 0.75rem; color: var(--text-subtle); }
.timeline-v2__meta time { display: inline-flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; }

.hero-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-card);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-none);
}

@media (min-width: 640px) {
    .hero-card { padding: 1.5rem; }
}

@media (min-width: 768px) {
    .hero-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero-card__item { display: flex; align-items: flex-start; gap: 1rem; min-inline-size: 0; }
.hero-card__item--action {
    grid-column: 1 / -1;
    border-block-start: 1px solid var(--border-color);
    padding-block-start: 1rem;
}
.hero-card__action-copy { min-inline-size: 0; }
.hero-card__label { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.hero-card__value { margin: 0.25rem 0 0; font-size: 1rem; font-weight: 600; color: var(--text-heading); overflow-wrap: anywhere; }
.hero-card__hint { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--text-subtle); overflow-wrap: anywhere; }


/* ----------------------------------------------------------------------------
   Operator task panel — única superficie de acción en el detalle de paquete.
   Reemplaza la combinación hero-card + command-strip + operator-detail-brief
   que repetía datos y escondía el CTA principal. Usa vars del DS (no hex).
---------------------------------------------------------------------------- */
.operator-task-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.operator-task-panel__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.operator-task-panel__heading { min-inline-size: 0; }

.operator-task-panel__eyebrow {
    display: inline-block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.operator-task-panel__title {
    margin: 0.35rem 0 0;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    text-wrap: balance;
}

.operator-task-panel__copy {
    max-width: 44rem;
    margin: 0.55rem 0 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.operator-task-panel__action { margin: 0; }

.operator-task-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.operator-task-panel__cta:hover { background: var(--color-primary-hover); }
.operator-task-panel__cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.operator-task-panel__cta .ds-icon { width: 1.1rem; height: 1.1rem; }

.operator-task-panel__cta--success { background: var(--color-success); }
.operator-task-panel__cta--success:hover { background: color-mix(in srgb, var(--color-success) 88%, #000); }
.operator-task-panel__cta--success:focus-visible { outline-color: var(--color-success); }

.operator-task-panel__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.operator-task-panel__fact {
    min-width: 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
}

.operator-task-panel__fact dt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.operator-task-panel__fact dt .ds-icon { width: 0.85rem; height: 0.85rem; }

.operator-task-panel__fact dd {
    margin: 0.3rem 0 0;
    color: var(--text-heading);
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.operator-task-panel__fact span {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* Tono del casillero (fact destacado): verde éxito del DS. */
.operator-task-panel__fact--cell {
    border-color: color-mix(in srgb, var(--color-success) 24%, var(--border-color));
    background: color-mix(in srgb, var(--color-success-light) 55%, var(--bg-card));
}

/* Acento izquierdo según estado del envío. */
.operator-task-panel--deposited { border-inline-start-color: var(--color-success); }
.operator-task-panel--deposited .operator-task-panel__eyebrow { color: var(--color-success); }

.operator-task-panel--cancelled { border-inline-start-color: var(--text-muted); }
.operator-task-panel--cancelled .operator-task-panel__eyebrow { color: var(--text-muted); }

.operator-task-panel--exception { border-inline-start-color: var(--color-warning); }
.operator-task-panel--exception .operator-task-panel__eyebrow { color: var(--color-warning); }

.operator-task-panel--deposit_in_progress { border-inline-start-color: var(--color-primary); }

[data-theme="dark"] .operator-task-panel { background: var(--bg-card); }
[data-theme="dark"] .operator-task-panel__fact { background: var(--bg-subtle); }

@media (min-width: 980px) {
    .operator-task-panel {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 1.05fr);
        align-items: stretch;
    }
    .operator-task-panel__main { justify-content: center; }
    .operator-task-panel__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .operator-task-panel__facts { grid-template-columns: 1fr; }
    .operator-task-panel__cta { width: 100%; justify-content: center; }
}

.operator-assigned-page {
    --operator-blue: #0f6eea;
    --operator-navy: #0b1730;
    --operator-surface: #ffffff;
    --operator-border: #dfe7f3;
    --operator-muted: #61708f;
    --operator-shadow: 0 18px 46px rgba(15, 35, 68, 0.08);
}

.operator-assigned-hero {
    display: grid;
    grid-template-columns: minmax(360px, 1.55fr) repeat(4, minmax(132px, 0.55fr));
    gap: 0.875rem;
    align-items: stretch;
}

.operator-assigned-next-card,
.operator-assigned-metric,
.operator-assigned-filter-card,
.operator-assigned-empty {
    border: 1px solid var(--operator-border);
    border-radius: 1.05rem;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9)),
        var(--operator-surface);
    box-shadow: var(--operator-shadow);
}

.operator-assigned-next-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem;
    min-block-size: 9.4rem;
    overflow: hidden;
    padding: 1.45rem 1.35rem 1.35rem;
}

.operator-assigned-eyebrow {
    margin: 0;
    color: var(--operator-blue);
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.operator-assigned-next-card h2 {
    margin: 0.65rem 0 0;
    color: var(--text-heading);
    font-size: clamp(1.12rem, 0.98rem + 0.42vw, 1.5rem);
    font-weight: 850;
    letter-spacing: -0.04em;
}

.operator-assigned-next-card__copy {
    max-inline-size: 28rem;
    margin: 0.55rem 0 0;
    color: var(--operator-muted);
    font-size: 0.925rem;
    line-height: 1.55;
}

.operator-assigned-next-card__copy strong {
    color: var(--text-heading);
    font-weight: 800;
}

.operator-assigned-illustration {
    position: relative;
    min-inline-size: 8.5rem;
}

.operator-assigned-illustration::before {
    content: "";
    position: absolute;
    inset-block-start: 2rem;
    inset-inline-end: 0.4rem;
    inline-size: 6.8rem;
    block-size: 4.4rem;
    border-radius: 1.2rem;
    background: linear-gradient(135deg, rgba(15,110,234,0.07), rgba(10,27,60,0.03));
}

.operator-assigned-illustration__locker,
.operator-assigned-illustration__box,
.operator-assigned-illustration__panel {
    position: absolute;
    display: block;
    border: 2px solid rgba(89, 112, 151, 0.42);
}

.operator-assigned-illustration__locker {
    inset-block-start: 2.35rem;
    inset-inline-end: 0.8rem;
    inline-size: 4.7rem;
    block-size: 4rem;
    border-radius: 0.35rem;
    background:
        linear-gradient(90deg, transparent 48%, rgba(89,112,151,0.25) 49% 51%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(89,112,151,0.25) 49% 51%, transparent 52%);
}

.operator-assigned-illustration__box {
    inset-block-start: 4.2rem;
    inset-inline-end: 5.45rem;
    inline-size: 2.25rem;
    block-size: 2rem;
    border-radius: 0.2rem;
    background: rgba(255,255,255,0.82);
}

.operator-assigned-illustration__panel {
    inset-block-start: 3.2rem;
    inset-inline-end: 1.15rem;
    inline-size: 1.4rem;
    block-size: 2rem;
    border-color: rgba(15,110,234,0.45);
    background: rgba(15,110,234,0.14);
}

.operator-assigned-metrics {
    display: contents;
}

.operator-assigned-metric {
    display: flex;
    min-block-size: 9.4rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.8rem;
    text-align: center;
    text-decoration: none;
}

.operator-assigned-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 999px;
}

.operator-assigned-metric__label {
    color: #64708b;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.055em;
}

.operator-assigned-metric strong {
    font-size: clamp(1.9rem, 1.6rem + 0.7vw, 2.35rem);
    font-weight: 900;
    line-height: 1;
}

.operator-assigned-metric--warning { --metric-accent: #f97316; }
.operator-assigned-metric--info { --metric-accent: #0f6eea; }
.operator-assigned-metric--danger { --metric-accent: #e11d48; }
.operator-assigned-metric--success { --metric-accent: #16a34a; }

.operator-assigned-metric--warning .operator-assigned-metric__icon,
.operator-assigned-metric--info .operator-assigned-metric__icon,
.operator-assigned-metric--danger .operator-assigned-metric__icon,
.operator-assigned-metric--success .operator-assigned-metric__icon {
    background: color-mix(in srgb, var(--metric-accent) 13%, #fff);
    color: var(--metric-accent);
}

.operator-assigned-metric strong {
    color: var(--metric-accent);
}

.operator-assigned-metric[href]:hover {
    border-color: color-mix(in srgb, var(--metric-accent) 28%, var(--operator-border));
    transform: translateY(-1px);
}

.operator-assigned-filter-card .card-body {
    padding: 1.35rem 1.55rem;
}

.operator-assigned-filter-card .merchant-filter-form--with-status {
    grid-template-columns: minmax(360px, 1.35fr) minmax(260px, 0.62fr) auto;
    gap: 1.4rem;
}

.operator-assigned-filter-card .search-bar-v2__input,
.operator-assigned-filter-card .saas-input {
    min-block-size: 3.45rem;
    border-radius: 0.72rem;
    background: #fff;
    font-size: 0.93rem;
}

.operator-assigned-filter-card .merchant-filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-block-size: 3.45rem;
    min-inline-size: 8.7rem;
    border-color: color-mix(in srgb, var(--operator-blue) 72%, var(--operator-border));
    color: var(--operator-blue);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15,110,234,0.08);
}

.operator-assigned-empty .card-body {
    display: flex;
    min-block-size: 25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.operator-assigned-empty__illustration {
    position: relative;
    inline-size: 11.5rem;
    block-size: 8rem;
    margin-block-end: 1.1rem;
}

.operator-assigned-empty__box {
    position: absolute;
    inset-inline-start: 3.15rem;
    inset-block-end: 0.65rem;
    inline-size: 5.2rem;
    block-size: 3.25rem;
    border: 2px solid rgba(99,122,164,0.55);
    border-radius: 0.28rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(239,245,255,0.72));
}

.operator-assigned-empty__box::before,
.operator-assigned-empty__box::after {
    content: "";
    position: absolute;
    inset-block-start: -1.35rem;
    inline-size: 3.1rem;
    block-size: 1.45rem;
    border: 2px solid rgba(99,122,164,0.48);
    background: rgba(255,255,255,0.7);
}

.operator-assigned-empty__box::before { inset-inline-start: -0.35rem; transform: skewY(-12deg); }
.operator-assigned-empty__box::after { inset-inline-end: -0.35rem; transform: skewY(12deg); }

.operator-assigned-empty__paper {
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-start: 0.3rem;
    inline-size: 3.5rem;
    block-size: 2.2rem;
    border-block-start: 2px solid rgba(99,122,164,0.6);
    border-inline-end: 2px solid rgba(99,122,164,0.6);
    transform: rotate(-23deg);
}

.operator-assigned-empty h2 {
    margin: 0;
    color: var(--text-heading);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.operator-assigned-empty p {
    max-inline-size: 40rem;
    margin: 0.7rem 0 0;
    color: var(--operator-muted);
    font-size: 0.95rem;
}

.operator-assigned-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-block-start: 1.65rem;
}

.operator-assigned-empty__actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-block-size: 3rem;
    min-inline-size: 10.4rem;
    justify-content: center;
}

.operator-route-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
    gap: 1rem;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}

.operator-route-panel__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.operator-route-panel__main h2 {
    margin: 0.25rem 0 0;
    color: var(--text-heading);
    font-size: clamp(1.15rem, 1rem + 0.55vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.operator-route-panel__copy {
    max-width: 44rem;
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.925rem;
    line-height: 1.55;
}

.operator-route-panel__copy strong {
    color: var(--text-heading);
    font-weight: 700;
}

.operator-route-panel__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

.operator-route-panel__action:hover {
    color: #fff;
    background: color-mix(in srgb, var(--color-primary) 86%, #000);
}

.operator-route-panel__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.operator-route-metric {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    padding: 0.875rem;
    text-decoration: none;
}

.operator-route-metric span {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.operator-route-metric strong {
    color: var(--text-heading);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
}

.operator-route-metric--warning strong { color: #b45309; }
.operator-route-metric--info strong { color: #0369a1; }
.operator-route-metric--danger strong { color: #be123c; }
.operator-route-metric--neutral strong { color: var(--text-heading); }

.operator-route-metric[href]:hover {
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
    background: color-mix(in srgb, var(--color-primary-light) 38%, var(--bg-card));
}

.operator-detail-brief {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.operator-detail-brief__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    border-radius: calc(var(--radius-xl) - 0.35rem);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-card));
}

.operator-detail-brief__main h2 {
    margin: 0.25rem 0 0;
    color: var(--text-heading);
    font-size: clamp(1.2rem, 1rem + 0.5vw, 1.55rem);
    font-weight: 750;
    letter-spacing: -0.03em;
}

.operator-detail-brief__main p {
    max-width: 42rem;
    margin: 0.55rem 0 0;
    color: var(--text-muted);
    font-size: 0.925rem;
    line-height: 1.55;
}

.operator-detail-brief__main strong {
    color: var(--text-heading);
}

.operator-detail-brief__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.operator-detail-brief__facts > div {
    min-width: 0;
    padding: 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
}

.operator-detail-brief__facts dt {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.operator-detail-brief__facts dd {
    margin: 0.35rem 0 0;
    color: var(--text-heading);
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.operator-detail-brief__facts span {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .operator-assigned-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operator-assigned-next-card {
        grid-column: 1 / -1;
    }

    .operator-assigned-filter-card .merchant-filter-form--with-status {
        grid-template-columns: 1fr;
    }

    .operator-route-panel {
        grid-template-columns: 1fr;
    }

    .operator-detail-brief {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .operator-assigned-hero {
        grid-template-columns: 1fr;
    }

    .operator-assigned-next-card {
        grid-template-columns: 1fr;
    }

    .operator-assigned-illustration {
        display: none;
    }

    .operator-route-panel__metrics {
        grid-template-columns: 1fr;
    }

    .operator-detail-brief__facts {
        grid-template-columns: 1fr;
    }
}

.merchant-filter-card {
    overflow: visible;
}

.merchant-shipment-header {
    display: grid;
    gap: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    padding: 1rem 1.15rem;
    box-shadow: var(--shadow-xs);
}

.merchant-shipment-header__body {
    display: grid;
    gap: 0.35rem;
}

.merchant-shipment-header__eyebrow,
.merchant-shipment-shell__eyebrow {
    margin: 0;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.merchant-shipment-header__title {
    margin: 0;
}

.merchant-shipment-header__description {
    max-width: 52rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.merchant-shipment-shell {
    border-radius: calc(var(--radius-xl) + 0.25rem);
    background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-subtle));
    box-shadow: var(--shadow-xs);
}

.merchant-shipment-shell .merchant-wizard-section {
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    padding: 0;
    overflow: hidden;
}

.merchant-shipment-shell .merchant-wizard-section__header {
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-primary-light) 24%, var(--bg-card));
    padding: 1rem;
    color: inherit;
}

.merchant-shipment-shell .merchant-wizard-section__number {
    box-shadow: none;
}

.merchant-wizard-section__body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.merchant-shipment-shell .saas-input {
    margin-top: 0.35rem;
    border-color: #dbe3ec;
    background: #f8fafc;
    color: var(--text-body);
}

.merchant-shipment-shell textarea.saas-input {
    background: #f8fafc;
}

.merchant-shipment-shell select.saas-input {
    background: #f8fafc;
}

.merchant-shipment-shell .saas-input:focus {
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-light) 70%, transparent);
    outline: 2px solid transparent;
}

.merchant-capacity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.5fr);
    align-items: start;
    gap: 1rem;
}

.capacity-inline-suggestion {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.capacity-check-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-heading);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.capacity-check-button {
    align-self: end;
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.capacity-check-button:hover:not(:disabled) {
    color: #fff;
    background: color-mix(in srgb, var(--color-primary) 88%, #000);
    border-color: color-mix(in srgb, var(--color-primary) 88%, #000);
}

.capacity-check-button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.capacity-card--idle {
    border-color: var(--border-color);
    background: var(--bg-subtle);
}

.capacity-card__status--neutral {
    background: var(--color-neutral-100);
    color: var(--text-muted);
}

.merchant-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-success) 22%, var(--border-color));
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-success-light) 46%, var(--bg-card));
    padding: 1rem;
}

.merchant-wizard-actions strong,
.merchant-wizard-actions span {
    display: block;
}

.merchant-wizard-actions strong {
    color: var(--text-heading);
    font-size: 0.95rem;
}

.merchant-wizard-actions span {
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.merchant-submit-alert {
    max-width: 28rem;
    border: 1px solid rgba(244, 63, 94, 0.28);
    border-radius: var(--radius-card);
    background: #fff7f8;
    padding: 0.85rem 1rem;
    color: #be123c;
}

.merchant-submit-alert strong {
    color: #881337;
    font-size: 0.9rem;
    font-weight: 800;
}

.merchant-submit-alert span,
.merchant-submit-alert li {
    color: #be123c;
    font-size: 0.8rem;
    line-height: 1.45;
}

.merchant-submit-alert ul {
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
}

.merchant-list-header--compact {
    align-items: center;
    min-height: auto;
    padding-block: 0.25rem;
}

.merchant-list-header--compact .text-sm {
    max-width: 48rem;
}

.merchant-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: end;
}

.merchant-filter-form--with-status {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto;
}

.merchant-filter-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.merchant-filter-label {
    color: var(--text-heading);
    font-size: 0.8125rem;
    font-weight: 600;
}

.merchant-filter-submit {
    min-height: 2.9rem;
    align-self: end;
}

@media (max-width: 900px) {
    .merchant-filter-form,
    .merchant-filter-form--with-status {
        grid-template-columns: 1fr;
    }

    .merchant-filter-submit {
        width: 100%;
    }

    .merchant-capacity-grid {
        grid-template-columns: 1fr;
    }

    .merchant-wizard-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .capacity-check-button {
        width: 100%;
    }
}

.search-bar-v2 { position: relative; }
.search-bar-v2__icon { position: absolute; inset-inline-start: 0.875rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.search-bar-v2__input {
    inline-size: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-input);
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    font-size: 0.875rem;
    color: var(--text-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.search-bar-v2__input:focus {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border-color));
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.summary-panel,
.capacity-card,
.action-card {
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.summary-panel { padding: 1.25rem; position: sticky; inset-block-start: 1rem; }
.merchant-shipment-shell .summary-panel {
    border-color: var(--border-color);
    box-shadow: var(--shadow-xs);
}
.summary-panel__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-heading); }
.summary-panel__item { display: flex; align-items: flex-start; gap: 0.75rem; padding-block: 0.875rem; border-block-end: 1px solid var(--border-color); }
.summary-panel__item:last-child { border-block-end: 0; }
.summary-panel__content { flex: 1; min-inline-size: 0; }
.summary-panel__label { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-heading); }
.summary-panel__hint { margin: 0.125rem 0 0; padding: 0.35rem 0.5rem; font-size: 0.75rem; color: var(--text-muted); overflow-wrap: anywhere; }
.summary-panel__status--completed,
.summary-panel__status--current { background: var(--color-primary-light); color: var(--color-primary); }
.summary-panel__status--pending { background: var(--color-neutral-100); color: var(--text-muted); }

.capacity-card { padding: 1rem; }
.capacity-card--available { border-color: color-mix(in srgb, var(--color-success) 24%, var(--border-color)); background: color-mix(in srgb, var(--color-success-light) 58%, var(--bg-card)); }
.capacity-card--unavailable { border-color: color-mix(in srgb, var(--color-warning) 28%, var(--border-color)); background: color-mix(in srgb, var(--color-warning-light) 58%, var(--bg-card)); }
.capacity-card--error { border-color: color-mix(in srgb, var(--color-danger) 24%, var(--border-color)); background: color-mix(in srgb, var(--color-danger-light) 58%, var(--bg-card)); }
.capacity-card__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.capacity-card__name { display: inline-flex; align-items: center; gap: 0.5rem; min-inline-size: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-heading); }
.capacity-card--available .capacity-card__name,
.capacity-card--available .capacity-card__footer { color: var(--color-success); }
.capacity-card--unavailable .capacity-card__name,
.capacity-card--unavailable .capacity-card__footer { color: var(--color-warning); }
.capacity-card--error .capacity-card__name,
.capacity-card--error .capacity-card__footer { color: var(--color-danger); }
.capacity-card__status--online { background: var(--color-success-light); color: var(--color-success); }
.capacity-card__status--offline { background: var(--color-danger-light); color: var(--color-danger); }
.capacity-card__status--warning { background: var(--color-warning-light); color: var(--color-warning); }
.capacity-card__bar { block-size: 0.5rem; border-radius: var(--radius-full); background: var(--color-neutral-100); overflow: hidden; margin-block-start: 0.875rem; }
.capacity-card__bar-fill { block-size: 100%; inline-size: var(--capacity, 0%); border-radius: inherit; }
.capacity-card__bar-fill--success { background: var(--color-success); }
.capacity-card__bar-fill--warning { background: var(--color-warning); }
.capacity-card__bar-fill--danger { background: var(--color-danger); }
.capacity-card__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-block-start: 0.75rem; font-size: 0.75rem; color: var(--text-muted); }
.capacity-card__footer strong { color: var(--text-heading); font-variant-numeric: tabular-nums; }
.capacity-card__note { margin: 0.75rem 0 0; font-size: 0.75rem; color: currentColor; }

.action-card { padding: 1.25rem; }
.action-card__header { display: flex; align-items: center; gap: 0.75rem; }
.action-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-heading); }
.action-card__description { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.action-card__hint { margin-block-start: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--color-neutral-50); padding: 0.875rem; font-size: 0.8125rem; color: var(--text-muted); }
.action-card__hint--success { background: var(--color-success-light); border-color: color-mix(in srgb, var(--color-success) 22%, var(--border-color)); color: var(--color-success); }
.action-card__hint--warning { background: var(--color-warning-light); border-color: color-mix(in srgb, var(--color-warning) 24%, var(--border-color)); color: var(--color-warning); }

[data-theme="dark"] .kpi-card-v2,
[data-theme="dark"] .summary-panel,
[data-theme="dark"] .capacity-card,
[data-theme="dark"] .action-card { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .kpi-card-v2__trend--neutral,
[data-theme="dark"] .summary-panel__status--pending,
[data-theme="dark"] .capacity-card__bar { background: var(--color-neutral-200); }
[data-theme="dark"] .wizard-stepper::before,
[data-theme="dark"] .timeline-v2::before { background: var(--color-neutral-700); }
[data-theme="dark"] .wizard-step__number,
[data-theme="dark"] .timeline-v2__marker { background: var(--bg-card); border-color: var(--color-neutral-600); color: var(--text-muted); }
[data-theme="dark"] .search-bar-v2__input { background: var(--bg-input); color: var(--text-body); }

@media (max-width: 760px) {
    .wizard-stepper {
        overflow-x: auto;
        justify-content: flex-start;
        padding-block-end: 0.25rem;
    }

    .wizard-stepper::before { display: none; }
    .wizard-step { flex: 0 0 7.5rem; }
    .summary-panel { position: static; }
}


/* Lockers list: strict alignment with Dashboard DS components. */
.saas-input {
    min-height: 2.5rem;
    background: var(--bg-input) !important;
    border-color: var(--border-color-strong) !important;
    border-radius: var(--radius-input) !important;
    color: var(--text-heading);
    font-size: 0.875rem;
    box-shadow: none;
}

.saas-input::placeholder {
    color: var(--text-subtle);
}

.saas-input:focus {
    background: var(--bg-card) !important;
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 0 1px var(--color-primary) !important;
    outline: none;
}

.saas-btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.625rem 1rem !important;
    border-radius: var(--radius-input) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none !important;
}

.saas-btn-primary:hover,
.saas-btn-primary:focus-visible {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #fff !important;
}

.saas-btn-secondary {
    border-radius: var(--radius-input) !important;
    font-weight: 600;
}

.locker-console.module-stack > * + * {
    margin-top: 1.25rem;
}



.locker-console .locker-kpi-grid {
    gap: 1rem;
}

.locker-console .locker-kpi-grid .saas-kpi {
    border-color: var(--saas-border) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden;
}

.locker-console .locker-kpi-grid .saas-kpi::before {
    content: none;
}

.locker-console .locker-kpi-grid .saas-kpi:hover {
    border-color: var(--saas-border) !important;
}

.locker-kpi-grid .saas-kpi .card-body {
    gap: 0.875rem;
    min-height: auto;
    padding: 1.125rem !important;
}

.locker-kpi-head {
    gap: 0.625rem;
}

.locker-kpi-grid .kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg);
    font-size: 1rem;
}

.locker-kpi-chip {
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
}

.locker-kpi-grid .kpi-stat-content {
    gap: 0.5rem;
}

.locker-kpi-grid .kpi-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none !important;
}

.locker-kpi-grid .kpi-value {
    color: var(--text-heading);
    font-size: 1.875rem !important;
    font-weight: 700;
    line-height: 1;
}

.locker-table-header {
    align-items: flex-start;
    gap: 1rem;
}

.locker-table-header .saas-eyebrow {
    margin-bottom: 0.5rem;
}

.locker-table-header .saas-section-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.locker-create-button .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.locker-filter-grid {
    gap: 1rem;
    margin-top: 1.25rem;
}

.locker-filter-field {
    gap: 0.375rem;
}

.locker-filter-field span {
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
}

.locker-console .saas-table-card {
    margin-top: 1.25rem !important;
    overflow: hidden;
    border-color: var(--saas-border) !important;
    border-radius: var(--radius-card) !important;
}

.locker-console .saas-table-card .card-body,
.locker-console .saas-table-card .table-responsive {
    margin: 0;
    padding: 0 !important;
}

.locker-console .saas-data-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-body);
}

.locker-console .saas-data-table thead th {
    padding: 0.75rem 1.25rem !important;
    background: var(--bg-input) !important;
    border-bottom: 1px solid var(--saas-border) !important;
    color: var(--text-muted) !important;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

.locker-console .saas-data-table tbody tr {
    background: var(--saas-panel);
}

.locker-console .saas-data-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-neutral-200) 30%, transparent);
}

.locker-console .saas-data-table tbody td {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid var(--color-neutral-100) !important;
    color: var(--text-body);
    font-size: 0.875rem;
    vertical-align: middle;
}

.locker-console .saas-data-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.locker-console .saas-data-table th.text-right,
.locker-console .saas-data-table td.text-right {
    padding-right: 1.25rem !important;
}

.locker-table-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg);
}

.locker-table-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.locker-table-subtitle,
.locker-table-meta {
    margin-top: 0.125rem;
    color: var(--text-subtle);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.35;
}

.locker-table-location strong {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}


.locker-console .table-actions {
    gap: 0.375rem;
}

.locker-console .table-action-btn {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-input);
    background: var(--color-neutral-100);
    color: var(--text-body);
}

.locker-console .table-action-btn .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.locker-console .table-action-btn:hover,
.locker-console .table-action-btn--primary:hover,
.locker-console .table-action-btn--success:hover,
.locker-console .table-action-btn--danger:hover {
    background: var(--color-neutral-200);
    color: var(--text-heading);
}

.locker-table-footer {
    margin-top: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-input);
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-card);
}


.locker-console .locker-kpi-grid > .card > .card-body > .kpi-stat-content > .kpi-label {
    color: var(--text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.35;
    text-transform: none !important;
}

.locker-console .saas-table-card .locker-table-footer {
    margin-top: 0;
    padding: 0.875rem 1.25rem;
    background: var(--bg-input);
    border: 0;
    border-top: 1px solid var(--saas-border);
    border-radius: 0;
}

/* Lockers list: console eyebrow, live pill and Lucide icon sizing. */
.locker-console .saas-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--color-primary) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.locker-console .saas-eyebrow::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    flex: 0 0 auto;
}

.lockers-ds-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.5rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-pill);
    background: var(--color-success-light);
    color: var(--color-success);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.lockers-ds-live-pill__dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.locker-console [data-lucide] {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 1.75;
    flex: 0 0 auto;
}

.locker-search-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-input);
    background: var(--bg-input);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.locker-search-control:focus-within {
    background: var(--bg-card);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.locker-search-control .saas-input {
    min-height: 0;
    height: 2.375rem;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.locker-search-control .saas-input:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.locker-console .locker-filter-field span {
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
}

.locker-console .locker-kpi-grid .kpi-icon svg {
    width: 1rem;
    height: 1rem;
}

.locker-console .locker-table-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-input);
}

.locker-console .locker-table-icon svg {
    width: 0.75rem;
    height: 0.75rem;
}

.locker-console .table-action-btn {
    width: 1.75rem;
    height: 1.75rem;
}

.locker-console .table-action-btn svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* Shared backend DS migration primitives used by Locations and future list pages. */
.ds-page-header {
    margin-bottom: 1.25rem;
}

.ds-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ds-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ds-breadcrumb a:hover {
    color: var(--text-heading);
}

.ds-breadcrumb span[aria-current="page"] {
    color: var(--text-heading);
    font-weight: 600;
}

.ds-page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ds-page-header__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.ds-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 0 0 auto;
}

.ds-eyebrow,
.ds-console .saas-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--color-primary) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.ds-eyebrow > span,
.ds-console .saas-eyebrow::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    flex: 0 0 auto;
}

.ds-page-title {
    margin: 0;
    color: var(--text-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.ds-page-copy,
.ds-section-copy {
    margin: 0.375rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ds-icon,
.ds-breadcrumb svg,
.ds-console [data-lucide] {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 1.75;
    flex: 0 0 auto;
}

/*
 * Anti-FOUC de íconos Lucide: el placeholder <i data-lucide> es inline (0px) hasta
 * que createIcons() lo reemplaza por <svg>, lo que provoca layout shift + "pop".
 * Forzamos que el placeholder reserve la misma caja (display inline-flex) para que
 * el swap sea imperceptible. La <svg> resultante hereda las clases de tamaño.
 */
i[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 0.875rem;
    height: 0.875rem;
}

.ds-icon--muted {
    color: var(--text-subtle);
}

.ds-icon--separator {
    color: var(--border-color-strong);
}

.ds-console.module-stack > * + * {
    margin-top: 1.25rem;
}

.ds-kpi-grid {
    margin-bottom: 1.25rem;
}

/* KPI size tokens — default = large (legacy/dashboard look). Override per grid
   with .ds-kpi-grid--md / .ds-kpi-grid--sm to get more compact rows. */
.ds-kpi-grid {
    --kpi-min-h: 9.5rem;
    --kpi-pad: 1.125rem;
    --kpi-gap: 1.125rem;
    --kpi-icon: 2.25rem;
    --kpi-icon-svg: 1rem;
    --kpi-value: 1.875rem;
    --kpi-label: 0.75rem;
    --kpi-note-mt: 0.5rem;
}

.ds-kpi-grid--md {
    --kpi-min-h: 6.25rem;
    --kpi-pad: 0.875rem;
    --kpi-gap: 0.5rem;
    --kpi-icon: 2rem;
    --kpi-icon-svg: 0.9375rem;
    --kpi-value: 1.5rem;
    --kpi-label: 0.75rem;
    --kpi-note-mt: 0.25rem;
}

.ds-kpi-grid--sm {
    --kpi-min-h: 4.5rem;
    --kpi-pad: 0.75rem;
    --kpi-gap: 0.375rem;
    --kpi-icon: 1.75rem;
    --kpi-icon-svg: 0.875rem;
    --kpi-value: 1.25rem;
    --kpi-label: 0.6875rem;
    --kpi-note-mt: 0.125rem;
}

.ds-kpi-grid .saas-kpi {
    min-height: var(--kpi-min-h);
    overflow: hidden;
    border-color: var(--saas-border) !important;
    border-radius: var(--radius-card) !important;
    background: var(--saas-panel) !important;
}

.ds-kpi-grid .saas-kpi::before {
    content: none !important;
}

.ds-kpi-grid .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--kpi-gap);
    height: 100%;
    padding: var(--kpi-pad) !important;
}

.ds-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ds-kpi-grid .kpi-icon {
    width: var(--kpi-icon);
    height: var(--kpi-icon);
    border-radius: var(--radius-lg);
}

.ds-kpi-grid .kpi-icon svg {
    width: var(--kpi-icon-svg);
    height: var(--kpi-icon-svg);
}

.ds-kpi-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-pill);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
}

.ds-kpi-grid .kpi-label {
    color: var(--text-muted) !important;
    font-size: var(--kpi-label) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.35;
    text-transform: none !important;
}

.ds-kpi-grid .kpi-value {
    margin-top: 0.25rem;
    color: var(--text-heading) !important;
    font-size: var(--kpi-value) !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.ds-kpi-note {
    margin: var(--kpi-note-mt) 0 0;
    color: var(--text-subtle);
    font-size: 0.75rem;
    line-height: 1.35;
}


/* ============================================================================
   smart-kpi-stat — KPI compacto vertical bajo para 5 por fila.
   Alternativa densa a smart-kpi-card para páginas con muchos KPIs donde el
   card grande ocupa demasiado. Opt-in por página (no reemplaza al global).
   Layout: [icono + label (+chip)] en una línea, [valor (+note)] abajo.
   Ocupa mínimo ancho y altura. Usa tokens del DS, sin gradientes.
   ============================================================================ */
.ds-kpi-stat {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-card);
    background: var(--saas-panel);
    color: var(--text-body);
}

.ds-kpi-stat__head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.ds-kpi-stat__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.ds-kpi-stat__icon svg { width: 0.75rem; height: 0.75rem; }
.ds-kpi-stat__icon--success { background: var(--color-success-light); color: var(--color-success); }
.ds-kpi-stat__icon--warning,
.ds-kpi-stat__icon--amber   { background: var(--color-warning-light); color: var(--color-warning); }
.ds-kpi-stat__icon--danger  { background: var(--color-danger-light); color: var(--color-danger); }
.ds-kpi-stat__icon--info    { background: var(--color-info-light); color: var(--color-info); }
.ds-kpi-stat__icon--secondary { background: var(--color-secondary-light); color: var(--color-secondary); }
.ds-kpi-stat__icon--neutral { background: var(--color-neutral-100); color: var(--text-muted); }

.ds-kpi-stat__label {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
}

.ds-kpi-stat__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 1.0625rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.3;
}

.ds-kpi-stat__body {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.ds-kpi-stat__value {
    color: var(--text-heading);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ds-kpi-stat__note {
    color: var(--text-subtle);
    font-size: 0.6875rem;
    line-height: 1.3;
}

[data-theme="dark"] .ds-kpi-stat {
    background: var(--saas-panel);
    border-color: var(--saas-border);
}

.ds-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ds-table-header .saas-section-title {
    display: block;
    margin: 0;
    color: var(--text-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.ds-table-card {
    overflow: hidden;
    border-color: var(--saas-border) !important;
    border-radius: var(--radius-card) !important;
}

.ds-table-card .card-body,
.ds-table-card .table-responsive {
    margin: 0;
    padding: 0 !important;
}

.ds-data-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-body);
}

.ds-data-table thead th {
    padding: 0.75rem 1.25rem !important;
    background: var(--bg-input) !important;
    border-bottom: 1px solid var(--saas-border) !important;
    color: var(--text-muted) !important;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Columna ordenable: cursor + indicador de dirección.
   TomSelect/data-table.js setea aria-sort="ascending|descending|none" en el th. */
.ds-data-table thead th[aria-sort] { cursor: pointer; }
.ds-data-table thead th[aria-sort="ascending"]::after,
.ds-data-table thead th[aria-sort="descending"]::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.4rem;
    vertical-align: middle;
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
}
.ds-data-table thead th[aria-sort="ascending"]::after {
    border-bottom: 0.3rem solid var(--color-primary);
}
.ds-data-table thead th[aria-sort="descending"]::after {
    border-top: 0.3rem solid var(--color-primary);
}

/* Sticky header opt-in: el thead queda fijo al scrollear dentro del contenedor.
   Activar con .ds-data-table--sticky (requiere contenedor con height/max-height y overflow). */
.ds-data-table--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.ds-data-table tbody tr {
    background: var(--saas-panel);
    transition: background-color var(--transition-fast);
}

/* Hover sutil: un tinte neutral del 4% (antes --bg-input, que parpadeaba
   demasiado en tablas densas). Mantiene la filosofía "tonos sutiles" del DS. */
.ds-data-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-neutral-200) 30%, transparent);
}

/* Zebra stripping opt-in: filas pares con un neutral muy sutil.
   Activar con .ds-data-table--striped. Mejora seguimiento de línea en
   tablas largas sin ser ruidoso. */
.ds-data-table--striped tbody tr:nth-child(even):not(:hover) {
    background: color-mix(in srgb, var(--color-neutral-100) 50%, transparent);
}

.ds-data-table tbody td {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid var(--color-neutral-100) !important;
    color: var(--text-body);
    font-size: 0.875rem;
    vertical-align: middle;
}

.ds-data-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.ds-data-table th.text-right,
.ds-data-table td.text-right {
    padding-right: 1.25rem !important;
}

.ds-table-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ds-table-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-input);
    background: var(--color-primary-light);
    color: var(--color-primary);
    flex: 0 0 auto;
}

.ds-table-icon svg {
    width: 0.75rem;
    height: 0.75rem;
}

.ds-table-title {
    margin: 0;
    color: var(--text-heading);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.ds-table-title--sm {
    font-weight: 500;
}

.ds-table-subtitle,
.ds-table-muted {
    margin: 0.125rem 0 0;
    color: var(--text-subtle);
    font-size: 0.75rem;
    line-height: 1.35;
}

.ds-table-number {
    color: var(--text-heading);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.ds-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

.ds-console .table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-input);
    background: var(--color-neutral-100);
    color: var(--text-body);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ds-console .table-action-btn:hover,
.ds-console .table-action-btn--primary:hover,
.ds-console .table-action-btn--success:hover,
.ds-console .table-action-btn--danger:hover {
    background: var(--color-neutral-200);
    color: var(--text-heading);
}

.ds-console .table-action-btn svg {
    width: 0.75rem;
    height: 0.75rem;
}

.ds-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.375rem;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-pill);
    background: var(--color-neutral-100);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.ds-state-pill::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.ds-state-pill--success {
    background: var(--color-success-light);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.ds-state-pill--warning {
    background: var(--color-warning-light);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}

.ds-state-pill--danger {
    background: var(--color-danger-light);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.ds-state-pill--neutral {
    background: var(--color-neutral-100);
    border-color: var(--border-color-strong);
    color: var(--text-muted);
}

.ds-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ds-inline-link:hover {
    color: var(--color-primary-hover);
}

.ds-form-modal {
    position: relative;          /* anchor for TomSelect dropdown appended here */
    width: min(42rem, calc(100vw - 2rem));
    max-height: min(85vh, 720px);
    padding: 0;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-card);
    background: var(--saas-panel);
    color: var(--text-body);
    box-shadow: var(--shadow-md);
    /* overflow auto (no hidden) para que el dropdown absoluto del TomSelect
       no se recorte cuando el select vive dentro del dialog. */
    overflow: auto;
}

.ds-form-modal::backdrop {
    background: color-mix(in srgb, var(--text-heading) 34%, transparent);
}

.ds-form-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--saas-border);
}

.ds-form-modal__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.ds-form-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-input);
    background: var(--color-primary-light);
    color: var(--color-primary);
    flex: 0 0 auto;
}

.ds-form-modal__subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ds-form-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-input);
    background: var(--color-neutral-100);
    color: var(--text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ds-form-modal__close:hover {
    background: var(--color-neutral-200);
    color: var(--text-heading);
}

.ds-form-modal__body {
    padding: 1.25rem;
}

.ds-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ds-form-label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.ds-form-label > span {
    color: var(--text-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
}

.ds-form-label--wide {
    grid-column: 1 / -1;
}

.ds-form-modal .saas-input {
    min-height: 2.5rem;
    border-color: var(--border-color-strong) !important;
    border-radius: var(--radius-input) !important;
    background: var(--bg-input) !important;
    color: var(--text-heading);
    font-size: 0.875rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-form-modal textarea.saas-input {
    min-height: 4.5rem;
    resize: vertical;
}

.ds-form-modal .saas-input:focus {
    background: var(--bg-card) !important;
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 0 1px var(--color-primary) !important;
}

.ds-form-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

.ds-form-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.ds-status-text {
    min-height: 1.25rem;
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
}

.ds-status-text--default {
    color: var(--text-muted);
}

.ds-status-text--success {
    color: var(--color-success);
}

.ds-status-text--error {
    color: var(--color-danger);
}

.ds-form-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--saas-border);
}

@media (max-width: 900px) {
    .ds-page-header__row,
    .ds-page-header__actions,
    .ds-table-header {
        align-items: stretch;
        flex-direction: column;
    }

    .ds-page-header__actions > .btn,
    .ds-inline-link {
        justify-content: center;
    }

    .ds-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .ds-kpi-grid,
    .ds-form-grid {
        grid-template-columns: 1fr !important;
    }

    .ds-form-modal__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .ds-form-modal__footer .btn {
        justify-content: center;
        width: 100%;
    }
}

/* Shared DS interaction refinements: hover, focus, modal footer and checkbox fidelity. */
.ds-page-header__actions .saas-btn-secondary:hover,
.ds-page-header__actions .saas-btn-secondary:focus-visible,
.ds-form-modal__footer .saas-btn-secondary:hover,
.ds-form-modal__footer .saas-btn-secondary:focus-visible {
    background: var(--bg-input) !important;
    border-color: var(--border-color-strong) !important;
    color: var(--text-heading) !important;
}

.ds-page-header__actions .saas-btn-primary:focus-visible,
.ds-page-header__actions .saas-btn-secondary:focus-visible,
.ds-console .table-action-btn:focus-visible,
.ds-inline-link:focus-visible,
.ds-form-modal__close:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.ds-console .table-action-btn--primary:hover,
.ds-console .table-action-btn--primary:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.ds-form-modal__close {
    background: transparent;
}

.ds-form-modal__close:hover {
    background: var(--bg-input);
}

.ds-form-modal__footer {
    margin: 1.25rem -1.25rem -1.25rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-input);
}

.ds-form-check {
    cursor: pointer;
    user-select: none;
}

.ds-form-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ds-form-check__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-input);
    background: var(--saas-panel);
    color: var(--bg-card);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    flex: 0 0 auto;
}

.ds-form-check__box svg {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0;
    stroke-width: 2.25;
}

.ds-form-check:hover .ds-form-check__box {
    border-color: var(--color-primary);
}

.ds-form-check__input:checked + .ds-form-check__box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.ds-form-check__input:checked + .ds-form-check__box svg {
    opacity: 1;
}

.ds-form-check__input:focus-visible + .ds-form-check__box {
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ds-form-check .ds-form-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ??????????????????????????????????????????????????????????????
   Dashboard reusable UI components
   ?????????????????????????????????????????????????????????????? */
.ds-section-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ds-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    justify-content: flex-end;
}

.ds-offcanvas.is-open {
    display: flex;
}

.ds-offcanvas__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--text-heading) 40%, transparent);
}

.ds-offcanvas__panel {
    position: relative;
    width: min(28rem, 100vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--saas-panel);
    border-left: 1px solid var(--saas-border);
    box-shadow: var(--shadow-md);
}

.ds-offcanvas__header,
.ds-offcanvas__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.ds-offcanvas__header {
    border-bottom: 1px solid var(--saas-border);
}

.ds-offcanvas__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1.25rem;
}

.ds-offcanvas__footer {
    border-top: 1px solid var(--saas-border);
    background: var(--bg-input);
    justify-content: flex-end;
}

.ds-offcanvas__header {
    align-items: flex-start;
    justify-content: space-between;
}

.ds-offcanvas__heading {
    min-width: 0;
}

.ds-offcanvas__eyebrow {
    margin: 0 0 0.125rem;
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ds-offcanvas__tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--saas-border);
    overflow-x: auto;
}

.ds-offcanvas__tab {
    position: relative;
    padding: 0.625rem 0.5rem;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ds-offcanvas__tab:hover {
    color: var(--text-body);
}

.ds-offcanvas__tab.is-active {
    color: var(--color-primary);
}

.ds-offcanvas__tab.is-active::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
}

.ds-offcanvas__tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Collapsible technical/JSON block */
.ds-json-block {
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-lg);
    background: var(--bg-input);
}

.ds-json-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.ds-json-block__toggle,
.ds-json-block__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    background: transparent;
    color: var(--text-body);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.ds-json-block__copy {
    color: var(--color-primary);
}

.ds-json-block__content {
    padding: 0 0.75rem 0.75rem;
}

.ds-json-block__pre {
    margin: 0;
    padding: 0.75rem;
    max-height: 18rem;
    overflow: auto;
    border-radius: var(--radius-md);
    background: var(--saas-panel);
    border: 1px solid var(--saas-border);
    color: var(--text-body);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre;
}

.ds-json-block__note {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.6875rem;
}

/* Masked credential */
.ds-credential {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ds-credential__label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.ds-credential__value-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ds-credential__value {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-md);
    background: var(--bg-input);
    border: 1px solid var(--saas-border);
    color: var(--text-heading);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.ds-credential__value.is-masked {
    letter-spacing: 0.2em;
}

.ds-credential__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-md);
    background: var(--saas-panel);
    color: var(--text-body);
    cursor: pointer;
}

.ds-credential__btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.ds-credential__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Detail-screen content primitives (offcanvas summary/timing tabs) */
.ds-offcanvas__section-title {
    margin: 1.25rem 0 0.75rem;
    color: var(--text-heading);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ds-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ds-detail-title {
    margin: 0;
    color: var(--text-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    word-break: break-all;
}

.ds-detail-list {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.ds-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}

.ds-detail-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ds-detail-row dt {
    color: var(--text-muted);
}

.ds-detail-row dd {
    margin: 0;
    text-align: right;
    font-weight: 500;
    color: var(--text-body);
    word-break: break-word;
}

.ds-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
}

.ds-timeline__item {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-lg);
    background: var(--saas-panel);
    font-size: 0.8125rem;
}

.ds-timeline__title {
    margin: 0;
    color: var(--text-heading);
    font-weight: 600;
}

.ds-timeline__meta {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.ds-table-link {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: var(--text-heading);
    font-weight: 600;
    cursor: pointer;
}

.ds-table-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.ds-data-table tbody tr.is-selected {
    background: var(--color-primary-light, rgba(13, 148, 136, 0.06));
}

/* Segmented status filter */
.ds-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-pill);
    background: var(--bg-input);
}

.ds-segmented__item {
    padding: 0.375rem 0.875rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.ds-segmented__item:hover {
    color: var(--text-body);
}

.ds-segmented__item.is-active {
    background: var(--saas-panel);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.ds-segmented__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Offcanvas manual actions */
.ds-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ds-action-status {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ds-action-status.is-success {
    color: var(--color-success);
}

.ds-action-status.is-error {
    color: var(--color-danger);
}

/* Credential cards (offcanvas credentials tab) */
.ds-cred-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.ds-cred-card {
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-lg);
    background: var(--saas-panel);
}

.ds-cred-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ds-cred-card__kind {
    color: var(--text-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
}

.ds-tech-note {
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-info-border, var(--saas-border));
    border-radius: var(--radius-lg);
    background: var(--color-info-light, var(--bg-input));
    color: var(--color-info, var(--text-body));
    font-size: 0.75rem;
}

/* Dark-mode palette reconciliation: palette changes selected menu accent only. */
html[data-theme="dark"][data-palette="teal"] { --sidenav-item-active-bg:#1E3A5F; }
html[data-theme="dark"][data-palette="indigo"] { --sidenav-item-active-bg:#3730A3; }
html[data-theme="dark"][data-palette="emerald"] { --sidenav-item-active-bg:#065F46; }
html[data-theme="dark"][data-palette="violet"] { --sidenav-item-active-bg:#4C1D95; }
html[data-theme="dark"][data-palette="rose"] { --sidenav-item-active-bg:#881337; }
html[data-theme="dark"][data-palette="amber"] { --sidenav-item-active-bg:#7C2D12; }
html[data-theme="dark"][data-palette="sky"] { --sidenav-item-active-bg:#075985; }
html[data-theme="dark"][data-palette="cyan"] { --sidenav-item-active-bg:#155E75; }
html[data-theme="dark"][data-palette="lime"] { --sidenav-item-active-bg:#3F6212; }
html[data-theme="dark"][data-palette="fuchsia"] { --sidenav-item-active-bg:#701A75; }
html[data-theme="dark"][data-palette="slate"] { --sidenav-item-active-bg:#1E293B; }
html[data-theme="dark"][data-palette="orange"] { --sidenav-item-active-bg:#7C2D12; }
html[data-theme="dark"][data-palette="blue"] { --sidenav-item-active-bg:#1E40AF; }
html[data-theme="dark"][data-palette="bronze"] { --sidenav-item-active-bg:#6E4E22; }

/* Profile theme controls: reusable presentation for local theme preferences. */
.profile-theme-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-input);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-neutral-bg);
    color: var(--icon-neutral-color);
    flex: 0 0 auto;
}

.profile-theme-title,
.profile-theme-option__label {
    color: var(--text-heading);
    font-weight: 700;
}

.profile-theme-title {
    font-size: 1rem;
    line-height: 1.5rem;
}

.profile-theme-option {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-input);
    background: var(--saas-panel);
    color: var(--text-body);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.profile-theme-option:hover,
.profile-theme-option:focus-visible {
    border-color: var(--color-primary);
    background: var(--bg-input);
    color: var(--text-heading);
}

.profile-theme-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.profile-theme-option--active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--text-heading);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.profile-theme-swatch {
    display: flex;
    width: 4rem;
    height: 1rem;
    overflow: hidden;
    border-radius: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
}

.profile-theme-swatch__tone {
    flex: 1 1 0;
}

[data-palette-option="teal"] { --profile-swatch-1: #5EEAD4; --profile-swatch-2: #0D9488; --profile-swatch-3: #0F766E; }
[data-palette-option="indigo"] { --profile-swatch-1: #A5B4FC; --profile-swatch-2: #4F46E5; --profile-swatch-3: #4338CA; }
[data-palette-option="emerald"] { --profile-swatch-1: #6EE7B7; --profile-swatch-2: #059669; --profile-swatch-3: #047857; }
[data-palette-option="violet"] { --profile-swatch-1: #C4B5FD; --profile-swatch-2: #7C3AED; --profile-swatch-3: #6D28D9; }
[data-palette-option="rose"] { --profile-swatch-1: #FDA4AF; --profile-swatch-2: #E11D48; --profile-swatch-3: #BE123C; }
[data-palette-option="amber"] { --profile-swatch-1: #FCD34D; --profile-swatch-2: #D97706; --profile-swatch-3: #B45309; }
[data-palette-option="sky"] { --profile-swatch-1: #7DD3FC; --profile-swatch-2: #0284C7; --profile-swatch-3: #0369A1; }
[data-palette-option="cyan"] { --profile-swatch-1: #67E8F9; --profile-swatch-2: #0891B2; --profile-swatch-3: #0E7490; }
[data-palette-option="lime"] { --profile-swatch-1: #BEF264; --profile-swatch-2: #65A30D; --profile-swatch-3: #4D7C0F; }
[data-palette-option="fuchsia"] { --profile-swatch-1: #F0ABFC; --profile-swatch-2: #C026D3; --profile-swatch-3: #A21CAF; }
[data-palette-option="slate"] { --profile-swatch-1: #94A3B8; --profile-swatch-2: #475569; --profile-swatch-3: #334155; }
[data-palette-option="orange"] { --profile-swatch-1: #FDBA74; --profile-swatch-2: #EA580C; --profile-swatch-3: #C2410C; }
[data-palette-option="blue"] { --profile-swatch-1: #93C5FD; --profile-swatch-2: #2563EB; --profile-swatch-3: #1D4ED8; }
[data-palette-option="bronze"] { --profile-swatch-1: #D9B889; --profile-swatch-2: #936731; --profile-swatch-3: #6E4E22; }

.profile-theme-swatch__tone--1 { background: var(--profile-swatch-1); }
.profile-theme-swatch__tone--2 { background: var(--profile-swatch-2); }
.profile-theme-swatch__tone--3 { background: var(--profile-swatch-3); }

.profile-theme-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.profile-theme-status span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.profile-theme-status--success { background: var(--color-success-light); border-color: var(--color-success-border); color: var(--color-success); }
.profile-theme-status--warning { background: var(--color-warning-light); border-color: var(--color-warning-border); color: var(--color-warning); }
.profile-theme-status--danger { background: var(--color-danger-light); border-color: var(--color-danger-border); color: var(--color-danger); }
.profile-theme-status--info { background: var(--color-info-light); border-color: var(--color-info-border); color: var(--color-info); }

/* ============================================================================
   24. Overrides: TomSelect (#186 — DS alignment)
   ============================================================================ */

/* ============================================================================
   TomSelect (plugin de selects) — alineado a los inputs estándar del DS.
   Altura 40px (h-10), bg --bg-input, border --border-color-strong, focus brand.
   Sin gradientes ni hovers excesivos: tonos sutiles del DS.
   ============================================================================ */

/* TomSelect copia las clases del <select> original al .ts-wrapper
   (input.getAttribute('class') → wrapper), así que .saas-input / .form-select /
   .form-input pintan una SEGUNDA caja (borde + padding lateral + fondo) alrededor
   del control real (.ts-control). En multi-select esa caja externa además NO crece
   con los chips. Neutralizamos el wrapper: la única caja visible es .ts-control. */
.ts-wrapper.saas-input,
.ts-wrapper.form-select,
.ts-wrapper.form-input {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Control — la "caja" cerrada del select. Coincide con .saas-input / inputs DS. */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    box-sizing: border-box;
    min-height: 2.5rem;            /* 40px = h-10 del DS */
    padding: 0.4375rem 0.75rem;    /* vertical 7px, lateral 12px — centra el texto */
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-input);
    background: var(--bg-input);
    box-shadow: none;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-heading);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Texto del placeholder / opción no seleccionada. */
.ts-wrapper .ts-control > .item {
    color: var(--text-heading);
    line-height: 1.4;
}
.ts-wrapper .ts-control input::-webkit-input-placeholder,
.ts-wrapper .ts-control input::placeholder {
    color: var(--text-muted);
}

/* Focus — idéntico al .saas-input:focus: borde brand + inset shadow sutil.
   (Antes usábamos un halo externo de 3px, que no matcheaba los inputs hermanos.) */
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.single:focus-within .ts-control,
.ts-wrapper.multi:focus-within .ts-control {
    border-color: var(--color-primary);
    background: var(--bg-card);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* Chevron / flecha lateral del single-select. */
.ts-wrapper.plugin-dropdown_input .ts-control,
.ts-wrapper.single .ts-control {
    padding-right: 2rem;            /* espacio para la flecha */
}
.ts-wrapper.single .ts-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.875rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
    transition: transform var(--transition-fast);
}
.ts-wrapper.single.dropdown-active .ts-control::after {
    transform: translateY(-35%) rotate(-135deg);
}

/* Dropdown — la lista abierta. */
.ts-dropdown {
    margin-top: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-input);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    color: var(--text-body);
}
/* Forzar un radio consistente y separación del control. */
.ts-dropdown .ts-dropdown-content {
    padding: 0.25rem;
    max-height: 16rem;
}

/* Opciones — hover y activo usan el tint sutil del brand, no saturados. */
.ts-dropdown .option {
    padding: 0.5rem 0.625rem;
    border-radius: calc(var(--radius-input) - 2px);
    color: var(--text-body);
    cursor: pointer;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: var(--bg-input);
    color: var(--text-heading);
}
.ts-dropdown .option.selected,
.ts-dropdown .option.selected.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

/* Grupo header (optgroup labels). */
.ts-dropdown .optgroup-header {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Caso "sin resultados". */
.ts-dropdown .create,
.ts-dropdown .no-results {
    padding: 0.625rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Chips (multi, plugin remove_button) — píldoras brand sutiles. */
.ts-wrapper.multi .ts-control .item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.125rem 0.25rem 0.125rem 0;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    background: var(--color-primary-light);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}
.ts-wrapper.multi .ts-control .item.active {
    background: color-mix(in srgb, var(--color-primary) 16%, var(--bg-card));
}
.ts-wrapper.multi .ts-control .item .remove {
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    background: transparent;
    color: var(--color-primary);
    opacity: 0.7;
    margin-left: 0.125rem;
    padding-left: 0.375rem;
    padding-right: 0.25rem;
    cursor: pointer;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}
.ts-wrapper.multi .ts-control .item .remove:hover {
    opacity: 1;
    color: var(--color-danger);
}

/* Estado deshabilitado. */
.ts-wrapper.disabled .ts-control {
    opacity: 0.55;
    background: var(--bg-input);
    cursor: not-allowed;
}

/* Dark mode — los tokens son theme-aware, solo reforzamos bordes y sombra. */
html[data-theme="dark"] .ts-wrapper .ts-control,
html[data-theme="dark"] .ts-dropdown {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-body);
}
html[data-theme="dark"] .ts-dropdown .option:hover,
html[data-theme="dark"] .ts-dropdown .option.active {
    background: var(--bg-input);
}
html[data-theme="dark"] .ts-dropdown {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Reduced motion: quitar la rotación suave de la flecha. */
@media (prefers-reduced-motion: reduce) {
    .ts-wrapper.single .ts-control::after,
    .ts-wrapper .ts-control { transition: none; }
}

/* ─── Filter row — single line, wraps on small screens ───────────────────────
   Usage: wrap .ds-filter-field controls in .ds-filters-row. Add
   .ds-filter-field--search to the search/text field so it gets extra width,
   and put trailing buttons (Exportar/Limpiar) in .ds-filters-actions so they
   are pushed to the end of the row. */
.ds-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}
.ds-filters-row .ds-filter-field {
    flex: 0 1 auto;
    min-width: 9rem;
}
.ds-filters-row .ds-filter-field--search {
    flex: 1 1 220px;
    min-width: 200px;
}
.ds-filters-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
@media (max-width: 640px) {
    .ds-filters-row .ds-filter-field,
    .ds-filters-row .ds-filter-field--search {
        flex: 1 1 100%;
    }
    .ds-filters-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DS TABS — accessible, vanilla-JS (shared/tabs.js). Sin hover con
   movimiento (solo cambia color/borde). Usado por Empresa/Equipo (T5) y
   detalle de máquina (T4).
   ───────────────────────────────────────────────────────────────────────────── */
.ds-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--saas-border);
    margin-bottom: 1.5rem;
}
.ds-tabs__btn {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.625rem 0.25rem;
    margin-right: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-sub, var(--text-muted));
    cursor: pointer;
}
.ds-tabs__btn[aria-selected="true"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.ds-tabs__panel[hidden] {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOCS LAYOUT — sidebar de anclas + contenido, páginas de `portal/docs/`
   (nivel-1-cobro). Sin movimiento en hover, solo cambio de color (mismo
   criterio que el resto del DS). Se oculta entero en `?plain=1`.
   ───────────────────────────────────────────────────────────────────────────── */
.docs-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }
}
.docs-toc {
    position: sticky;
    inset-block-start: 1rem;
}
.docs-toc__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-sub, var(--text-muted));
    margin-bottom: 0.5rem;
}
.docs-toc__list,
.docs-toc__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.docs-toc__list > li {
    margin-bottom: 0.375rem;
}
.docs-toc__list > li > a {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-sub, var(--text-muted));
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.625rem;
}
.docs-toc__list > li > a:hover {
    color: var(--color-primary);
}
.docs-toc__sublist {
    margin-top: 0.25rem;
    margin-bottom: 0.375rem;
}
.docs-toc__sublist li a {
    display: block;
    padding: 0.1875rem 0 0.1875rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-sub, var(--text-muted));
    text-decoration: none;
    border-left: 2px solid transparent;
}
.docs-toc__sublist li a:hover {
    color: var(--color-primary);
}
@media (max-width: 1024px) {
    .docs-toc {
        position: static;
    }
}

/* ─── Bloques colapsables ("cómo lo implemento", no compiten con la
   referencia de endpoints): curl, pseudocódigo ESP32, arnés de referencia. */
.docs-details {
    border: 1px solid var(--saas-border);
    border-radius: 0.75rem;
    padding: 0;
}
.docs-details + .docs-details {
    margin-top: 0.75rem;
}
.docs-details > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-strong, var(--text-heading));
}
.docs-details > summary::-webkit-details-marker {
    display: none;
}
.docs-details[open] > summary {
    border-bottom: 1px solid var(--saas-border);
}
.docs-details__body {
    padding: 1.25rem;
}

/* ─── Modo `?plain=1`: sin JS de tabs, así que se muestran todos los
   paneles de protocolo apilados en vez de depender de [hidden]. El
   sidebar de anclas tampoco tiene sentido para imprimir/leer offline. */
.docs-plain-content .ds-tabs__panel[hidden] {
    display: block;
}
.docs-plain-content .ds-tabs__nav {
    display: none;
}
.docs-plain-content .docs-toc {
    display: none;
}
.docs-plain-content .docs-layout {
    display: block;
}

/* ─── Bloque de código `.docs-code`: reemplazo visual de los
   `pre.card.saas-panel.p-4` de las páginas de docs. Sin JS es un bloque
   de código normal; docs_portal.js lo envuelve en `.docs-code-block` con
   barra de lenguaje + botón "Copiar" (los templates NO la renderizan,
   para que en `?plain=1` no aparezca inerte). */
.docs-code {
    display: block;
    margin: 0.5rem 0 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--saas-panel);
    font-size: 0.75rem;
    line-height: 1.6;
}
.docs-code-block {
    margin-top: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--saas-panel);
}
.docs-code-block .docs-code {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.docs-code-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0.5rem 0.375rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.docs-code-block__lang {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.docs-code__copy {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-sub, var(--text-muted));
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}
.docs-code__copy:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ─── Etiquetas de subsección dentro de endpoints y pasos ("Headers",
   "Body", "Respuesta"...): reemplazan la triple repetición de utilities. */
.docs-label {
    margin-top: 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.docs-label:first-child {
    margin-top: 0;
}

/* ─── TOC: grupos ("Guía" / "Referencia" / "Soporte") + item activo
   (scrollspy de docs_portal.js). ─── */
.docs-toc__group {
    margin: 1.125rem 0 0.375rem;
    padding-left: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.docs-toc__group:first-of-type {
    margin-top: 0;
}
.docs-toc a.docs-toc__link--active,
.docs-toc__sublist a.docs-toc__link--active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* ─── Pasos del inicio rápido: número + explicación + llamada exacta.
   CSS puro (funciona igual en `?plain=1`). ─── */
.docs-step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.25rem 1rem;
    align-items: start;
}
.docs-step + .docs-step {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border-color);
}
.docs-step__num {
    grid-row: span 1;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
}
.docs-step__title {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-strong, var(--text-heading));
}
.docs-step__body {
    min-width: 0;
}
.docs-step__call {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--saas-panel);
}
.docs-step__call code {
    overflow-wrap: anywhere;
}

/* ─── Tarjeta de endpoint estilo redoc: banda de método + ruta + título,
   separada del cuerpo (headers/body/respuesta/errores). */
.docs-endpoint-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--saas-border, var(--border-color));
    background: var(--saas-panel);
}
.docs-endpoint-card__head code {
    font-size: 0.875rem;
    color: var(--text-strong, var(--text-heading));
    overflow-wrap: anywhere;
}
.docs-endpoint-card__title {
    width: 100%;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-strong, var(--text-heading));
}

/* ─── Clave/valor ("Antes de empezar": base URL, credencial, content-type). */
.docs-kv {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    gap: 0.625rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}
.docs-kv dt {
    color: var(--text-muted);
    font-weight: 600;
}
.docs-kv dd {
    margin: 0;
    color: var(--text-sub, var(--text-heading));
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 640px) {
    .docs-kv {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }
    .docs-kv dd {
        margin-bottom: 0.75rem;
    }
}

/* ─── Ritmo vertical del contenido de docs. `space-y-8` NO existe en el build
   de Tailwind del proyecto (llega hasta `space-y-6`), así que las tarjetas
   quedaban pegadas. El ritmo se define acá, no con utilities. */
.docs-layout__content > * + * {
    margin-top: 2rem;
}
@media (max-width: 640px) {
    .docs-layout__content > * + * {
        margin-top: 1.5rem;
    }
}

/* ─── Nota corta bajo un bloque de código o una tabla: mismo color que
   `.text-text-sub` pero con el margen ya resuelto. */
.docs-note {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-sub, var(--text-muted));
}

/* ─── "Cuándo usar" de cada ejemplo: encabezado del bloque colapsable con
   una segunda línea que dice en qué caso sirve. */
.docs-details__when {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ─── Las anclas del índice lateral tienen que quedar por debajo de la
   topbar fija, si no el título de la sección aparece cortado al saltar. */
.docs-layout__content > [id] {
    scroll-margin-top: 5rem;
}

/* ─── Descarga destacada (colección Postman): acción, no colapsable. */
.docs-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--saas-panel);
}
.docs-download__body {
    flex: 1 1 18rem;
    min-width: 0;
}
.docs-download__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-strong, var(--text-heading));
}
.docs-download__text {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-sub, var(--text-muted));
}

/* ─── Tablas de docs: sin anchos, la primera columna (códigos de error,
   badges de status) se estiraba y la explicación quedaba comprimida. */
.docs-table-status th:first-child,
.docs-table-status td:first-child {
    width: 8rem;
}
.docs-table-symptom th:first-child,
.docs-table-symptom td:first-child {
    width: 38%;
}

/* ─── "Probar sin firmware": es una HERRAMIENTA, no documentación. Se separa
   visualmente de las tarjetas de la guía (fondo propio, borde de acento) para
   que el lector no confunda el texto explicativo con el panel interactivo. */
.docs-tool {
    border: 1px solid var(--saas-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-card, 0.75rem);
    background: var(--bg-card);
    overflow: hidden;
}
.docs-tool__head {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--saas-border);
    background: var(--saas-panel);
}
.docs-tool__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-strong, var(--text-heading));
}
.docs-tool__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-sub, var(--text-muted));
}
.docs-tool__body {
    padding: 1.5rem;
}

/* ─── Pasos del panel: cada uno es un bloque cerrado con su propio título y
   la URL que está por llamar. */
.n1h-step + .n1h-step {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.n1h-step.hidden {
    display: none;
}
.n1h-step__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.n1h-step__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-strong, var(--text-heading));
}
.n1h-step__num {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ─── Chip con el método + la URL absoluta que el paso va a llamar. El
   integrador tiene que poder leer a dónde va cada request sin abrir el
   registro. */
.n1h-endpoint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--saas-panel);
}
.n1h-endpoint__url {
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-strong, var(--text-heading));
    overflow-wrap: anywhere;
}
.n1h-endpoint__note {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ─── QR + datos en vivo. El QR va CHICO y con tamaño fijo: antes usaba
   `max-w-[220px]`, una utility arbitraria que el build purgado de Tailwind
   no genera, así que el SVG `w-full` se comía toda la columna. */
.n1h-live {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
}
.n1h-live__meta {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.n1h-qr {
    width: 144px;
    height: 144px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: #fff;
}
.n1h-qr svg {
    width: 100%;
    height: 100%;
}
.n1h-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ─── Registro HTTP. Filas compactas: colapsada es una línea, no una caja
   vacía. Los polls repetidos los agrupa el JS en una sola fila con contador. */
.docs-wire {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 26rem;
    overflow-y: auto;
    margin-top: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--saas-panel);
}
.docs-wire__empty {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.docs-wire__call {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-card);
    overflow: hidden;
}
.docs-wire__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.docs-wire__head:hover {
    background: var(--saas-panel);
}
.docs-wire__chevron {
    flex: none;
    width: 0.75rem;
    color: var(--text-muted);
    font-size: 0.625rem;
    line-height: 1;
}
.docs-wire__url {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-strong, var(--text-heading));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.docs-wire__repeat {
    flex: none;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.625rem;
    font-weight: 700;
}
.docs-wire__time {
    flex: none;
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.docs-wire__body {
    padding: 0 0.625rem 0.625rem;
    border-top: 1px solid var(--border-color);
}
.docs-wire__body[hidden] {
    display: none;
}
.docs-wire__label {
    margin-top: 0.75rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.docs-wire pre.docs-code {
    margin-top: 0.25rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.6875rem;
    background: var(--saas-panel);
}
@media (max-width: 640px) {
    .docs-wire__time {
        display: none;
    }
}

/* ─── Compact stat-cards row (machine detail header, T4) ────────────────────
   Usage: wrap .card.saas-panel items in .ds-cards-row for a responsive
   grid of equal-width compact cards (no fixed widths, no overlap). */
.ds-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* ─── Compact KPI grid (T2, Ronda 1 UX) ──────────────────────────────────────
   Usage: wrap .saas-kpi cards in .ds-kpi-grid--compact. Same tokens/colors
   as the regular saas-kpi (border accent, tones), just less padding and a
   smaller value so 4 fit comfortably in one row on desktop. */
.ds-kpi-grid--compact .saas-kpi .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem !important;
    min-height: 0;
}
.ds-kpi-grid--compact .ds-kpi-head {
    margin: 0;
}
.ds-kpi-grid--compact .kpi-icon {
    width: 1.75rem;
    height: 1.75rem;
}
.ds-kpi-grid--compact .kpi-label {
    font-size: 0.75rem;
    margin: 0;
}
.ds-kpi-grid--compact .kpi-value {
    font-size: 1.25rem;
    margin: 0;
}
.ds-kpi-grid--compact .ds-kpi-note {
    font-size: 0.7rem;
    margin: 0;
}

/* ─── KPI grid, 5 columns wide (T1, ronda 2 UX) ──────────────────────────────
   Usage: add alongside .ds-kpi-grid--compact when a screen has 5 KPIs that
   should share a single row on wide desktop instead of splitting 4+1.
   Column count itself comes from Tailwind utilities on the wrapper
   (grid-cols-1 sm:grid-cols-3 xl:grid-cols-5); this class only overrides the
   two breakpoints below where `.ds-kpi-grid` forces 2/1 columns via
   `!important`, so 3-per-row survives on tablet instead of collapsing to 2. */
.ds-kpi-grid--cols-5 {
    /* Sin Tailwind en los proyectos consumidores: la cuenta de columnas
       vive acá, no en utilidades del wrapper. 5 en escritorio, 3 en
       tablet, 1 en móvil. */
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
    .ds-kpi-grid--cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    .ds-kpi-grid--cols-5 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ─── Equal two-column panel grid (T2, ronda 2 UX) ───────────────────────────
   Usage: replace ad-hoc column fractions (e.g. `xl:grid-cols-[1fr_.95fr]`)
   with `.ds-panels-grid` so every two-panel row on a page shares the same
   width split, gap and row height as the others. */
.ds-panels-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
.ds-panels-grid > * {
    height: 100%;
}
@media (max-width: 900px) {
    .ds-panels-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Sidenav hotkey badges (T6, ronda 2 UX) ─────────────────────────────────
   Usage: `static/js/core/hotkeys.js` toggles `[data-sidebar-accordion]
   .menu-link[data-hotkey]` visibility while Alt is held via the
   `hotkeys-active` class on the sidenav — no JS-driven inline styles, no
   layout shift (the badge occupies space always, just transparent/hidden
   until Alt is pressed). Sin movimiento en hover/aparición: solo
   opacidad. */
.menu-hotkey-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    padding: 0 0.3rem;
    border-radius: var(--radius-sm, 4px);
    background: rgba(255, 255, 255, 0.12);
    color: var(--sidenav-item-color);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
[data-sidebar-accordion].hotkeys-active .menu-link[data-hotkey] .menu-hotkey-badge {
    opacity: 1;
    visibility: visible;
}
[data-sidebar-accordion].hotkeys-active .menu-link[data-hotkey].hotkey-target-flash {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* `.form-input.is-invalid` (línea ~1351) ya cubre los forms legacy; los
   modales CRUD (Vue) usan `.saas-input`, que necesita la misma regla acá
   porque `.saas-input` la redefine con `!important` en varios bloques
   anteriores scopeados por ancestro. Ver `DashboardFormErrors.render`
   (core/form-errors.js), que ahora sí aplica esta clase al input. */
.is-invalid.saas-input {
    border-color: var(--color-danger) !important;
}
.is-invalid.saas-input:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 15%, transparent) !important;
}