/* ============================================================================
   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:       #697687;

    /* ── 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 {
    /* Bajado de 1.75rem: mismo criterio de densidad que `.module-stack` --
       menos aire fijo antes de llegar al contenido. */
    padding: 1.5rem;
    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%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

/* `min-width` solo hacía falta para que la tabla no se aplaste en mobile
   (`.table-responsive` la vuelve tarjetas por fila ahí de todos modos, pero
   algunas tablas viejas no usan ese wrapper). A partir de 768px una tabla
   angosta ya no necesita piso: forzarlo era lo que obligaba al scroll
   horizontal en smart-data-table incluso con pocas columnas. */
@media (max-width: 767px) {
    .table {
        min-width: 760px;
    }
}

.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);
    /* `normal` + `anywhere` (no `nowrap`): con contenido real (nombres,
       ubicaciones, rutas) el `nowrap` de acá era la otra causa del scroll
       horizontal en smart-data-table a partir de 1280px. Las columnas
       que SÍ necesitan una sola línea (acciones, importes, fechas) lo piden
       explícito con `.ds-col-nowrap`, `.text-right` o `.table-actions`. */
    white-space: normal;
    overflow-wrap: anywhere;
}

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

/* `overflow-wrap: anywhere` de arriba corta en cualquier punto -- para texto
   normal está bien, pero un identificador monoespaciado largo
   ("idempotency_key_required" en las tablas de códigos de error de
   `docs/nivel1`) queda partido en cualquier letra Y además `anywhere` reduce
   el ancho mínimo que el navegador le da a la columna, así que la tabla
   entera se angosta de más. `break-word` previene el overflow igual (última
   instancia si no hay otro punto de corte) sin tocar ese cálculo. */
.table tbody td code,
.table tbody td.font-mono {
    overflow-wrap: break-word;
}

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

@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);
    }

    /* Bug real: un `<td>` NUNCA es hijo directo de
       `<tbody>` (siempre cuelga de un `<tr>`), así que este selector con
       combinador `>` jamás matcheaba nada -- las tres reglas de acá abajo
       estaban muertas desde que se escribieron. Con `> tr > td` la vista
       "tarjeta apilada" de mobile (`data-label` como pseudo-columna) por fin
       aplica. */
    .table-responsive > .table > tbody > tr > td {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0.25rem 0;
        white-space: normal;
        border-bottom: none;
    }

    .table-responsive > .table > tbody > tr > 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 > tr > td:last-child {
        padding-bottom: 0;
    }
}

.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;
    white-space: nowrap;
}

.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2rem, uno de los dos tamaños canónicos de icon-button -- antes
       1.95rem, un valor a mitad de camino sin ningún motivo. */
    width: 2rem;
    height: 2rem;
    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,
.table-action-btn .ds-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:           #7690AC;

    --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. Bajado de 1.5/1.75rem: más denso, menos scroll
   para llegar al contenido real de la página. */
.module-stack > * + * {
    margin-top: 1.25rem;
}

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


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


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

html {
    scroll-behavior: smooth;
    /* Reserva el ancho de la scrollbar aunque no haga falta todavía: sin esto,
       abrir un modal (que bloquea el scroll del body) angosta el viewport y
       todo el layout se corre ~15px a la derecha por un instante. */
    scrollbar-gutter: stable;
}

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

/* `<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;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.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: 2px solid transparent;
    outline-offset: 2px;
}

.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 {
    /* Bajado de 1.25rem: cabecera más compacta. */
    margin-bottom: 1rem;
}

.ds-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Bajado de 1.25rem/0.875rem. */
    margin-bottom: 0.375rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    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);
    /* Bajado de 1.5rem. */
    font-size: 1.375rem;
    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-page-copy {
    /* Un subtítulo de una sola frase larga ocupaba todo el ancho del header
       en pantallas anchas: un párrafo se lee mejor en
       una medida de línea acotada que estirado a 1440px. */
    max-width: 70ch;
}

.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 {
    /* Bajado de `0.75rem 1.25rem`: con columnas más angostas y varias por
       fila, ese padding era el otro motivo de scroll horizontal en
       pantallas de 1280px -- no el contenido, el aire. */
    padding: 0.5rem 0.875rem !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 {
    /* Bajado de `1rem 1.25rem`, mismo motivo que el th. */
    padding: 0.625rem 0.875rem !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;
    white-space: nowrap;
}

/* ---- Helpers de columna --------------------------------------------
   Con `td` en `white-space: normal` por default (arriba), estas clases
   marcan a mano las columnas que SÍ necesitan quedarse en una línea, o que
   necesitan comportamiento especial de recorte. Van en `th` y `td` por
   igual -- `smart-data-table` (data-table.js) las agrega solo con
   `c.nowrap` / `c.priority` / `c.truncate`; una `<table class="table">`
   escrita a mano las pone directo en el markup. ---------------------- */
.ds-col-nowrap {
    white-space: nowrap;
}

/* Columna que se oculta por debajo de 1440px (`c.priority: 3` en
   data-table.js): para datos secundarios que no hacen falta en pantallas
   angostas y que, de mostrarse, empujan a las columnas importantes fuera
   de vista sin llegar a activar el scroll horizontal. */
@media (max-width: 1439.98px) {
    .ds-col-p3 {
        display: none;
    }
}

.ds-col-truncate {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Celda de dos líneas: dato principal + dato secundario chico y muted.
   Reemplaza tener que armar dos <span> sueltos por celda en cada tabla que
   necesita, por ejemplo, "Máquina" (nombre + id + ubicación) en una sola
   columna en vez de tres. */
.ds-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ds-cell-main {
    color: var(--text-heading);
    font-size: 0.875rem;
    line-height: 1.35;
}

.ds-cell-sub {
    color: var(--text-subtle);
    font-size: 0.75rem;
    line-height: 1.35;
}

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

/* Modificador para celdas con muchas acciones (ficha de máquina, tabla de
   slots fusionada: hasta 7 botones con las 3 features prendidas). Envuelve
   en líneas de 4 botones en vez de ensanchar la columna -- ver
   docs/plan-mejora-ficha-maquina.md §3. `.table-actions` (arriba) fija
   `white-space: nowrap`, por eso hace falta pisarlo acá; el selector
   compuesto con `.ds-table-actions` le gana en especificidad sin tocar el
   comportamiento de las demás tablas que solo usan una de las dos clases. */
.ds-table-actions.ds-table-actions--wrap {
    flex-wrap: wrap;
    /* 4 botones de 2rem por línea: con 7 acciones quedan 2 líneas, no 4. */
    min-width: 8.75rem;
    max-width: 8.75rem;
    white-space: normal;
    row-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 {
    /* Sin position aparte: el `<dialog>` ya se posiciona con las reglas nativas
       de la top layer (o `position: fixed` si el navegador la necesita, ver
       más abajo). `position: relative` acá lo volvía el contenedor de
       posicionamiento de sus ancestros con position:absolute (ninguno hoy),
       y `selects.js` NO usa `dropdownParent` -- el comentario viejo decía lo
       contrario. */
    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;
}

/* `.ds-filter-input` ya se usaba en `sales/list.html` pero sin CSS propia
   -- quedaba con el estilo default
   del navegador. Mismo look que `.saas-input` pero más bajo (2.25rem, la
   altura compacta de `.saas-console--dense .form-input`), pensado para
   convivir en una `.ds-filters-row` de una sola línea. */
.ds-filter-input {
    width: 100%;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color-strong) !important;
    border-radius: var(--radius-input) !important;
    color: var(--text-heading);
    font-size: 0.8125rem;
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.ds-filter-input::placeholder {
    color: var(--text-subtle);
}

.ds-filter-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: 2px solid transparent;
}
@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__btn[aria-current="page"] {
    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 {
        /* `minmax(0, 1fr)`, no `1fr`: `1fr` equivale a `minmax(auto, 1fr)` y
           el min-content de las tablas de referencia (≈1200px) estiraba la
           columna más allá del viewport, con scroll horizontal en toda la
           página a ≤1024px. */
        grid-template-columns: minmax(0, 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;
}
/* Un panel anidado dentro de otro panel comparte su color y se pierde: se
   ve una tarjeta blanca sobre otra blanca, sostenida sólo por el borde. Las
   páginas de documentación que todavía usan el patrón viejo de bloque de
   código (`pre.card.saas-panel.p-4`, anterior a `.docs-code`) caen siempre
   en este caso: el ejemplo de JSON vive dentro de la tarjeta de la sección.
   Se invierte al fondo de página para recuperar la separación.
   Verificado en el navegador el 2026-09-08. */
.card.saas-panel .card.saas-panel {
    background: var(--bg-body);
}

.docs-code-block {
    margin-top: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    /* `--saas-panel` sólo existe dentro de `.saas-console` (ver la capa de
       primitivas más arriba) y las páginas de documentación NO están dentro
       de ese contenedor: sin el fallback la declaración es inválida y el
       bloque queda TRANSPARENTE, o sea código sin fondo sobre el fondo de
       la página. Mismo patrón que ya usa `.saas-console` fuera de alcance
       en este archivo. Verificado en el navegador el 2026-09-08. */
    background: var(--saas-panel, var(--bg-card));
}
.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);
}

/* ─── Coloreado por tokens dentro de `.docs-code` (docs_portal.js, según
   `data-lang`). Solo color, sin peso ni fondo, para que un bloque siga
   leyéndose como texto. Los tonos oscuros se redefinen abajo. */
.docs-code .tok-key  { color: var(--docs-tok-key); }
.docs-code .tok-str  { color: var(--docs-tok-str); }
.docs-code .tok-num  { color: var(--docs-tok-num); }
.docs-code .tok-lit  { color: var(--docs-tok-lit); }
.docs-code .tok-kw   { color: var(--docs-tok-kw); font-weight: 600; }
.docs-code .tok-flag { color: var(--docs-tok-flag); }
.docs-code .tok-pun  { color: var(--text-muted); }
.docs-code .tok-cmt  { color: var(--text-muted); font-style: italic; }
:root {
    --docs-tok-key:  #1D4ED8;
    --docs-tok-str:  #0F766E;
    --docs-tok-num:  #B45309;
    --docs-tok-lit:  #7C3AED;
    --docs-tok-kw:   #BE185D;
    --docs-tok-flag: #A16207;
}
[data-theme="dark"] {
    --docs-tok-key:  #93C5FD;
    --docs-tok-str:  #6EE7B7;
    --docs-tok-num:  #FCD34D;
    --docs-tok-lit:  #C4B5FD;
    --docs-tok-kw:   #F9A8D4;
    --docs-tok-flag: #FDE68A;
}

/* ─── 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.
   SIN `max-height` en la lista: con un tope de 26rem una llamada expandida
   (headers + body + respuesta) quedaba cortada dentro de un scroll interno
   y había que scrollear a ciegas. La lista crece con la página. */
.docs-wire {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    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;
}
/* Cuerpo expandido: dos columnas (Request | Response) en escritorio, una en
   móvil. Cada columna lleva su título y sus bloques (headers, body).
   La grilla se activa SOLO si el JS ya armó las columnas (`:has`): con un
   docs_nivel1_harness.js viejo cacheado (mismo `?v=`, ver skill
   diseno-portal) el cuerpo trae etiquetas y <pre> sueltos, y una grilla de
   dos columnas los desparrama alternados. Sin `:has` (navegador viejo) se
   queda en una columna, que también se lee bien. */
.docs-wire__body {
    padding: 0 0.625rem 0.75rem;
    border-top: 1px solid var(--border-color);
}
.docs-wire__body:has(> .docs-wire__col) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}
.docs-wire__body[hidden] {
    display: none;
}
.docs-wire__col {
    min-width: 0;
}
.docs-wire__col-title {
    margin: 0.75rem 0 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-strong, var(--text-heading));
}
.docs-wire__label {
    margin-top: 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.docs-wire .docs-code-block {
    margin-top: 0.25rem;
}
.docs-wire .docs-code-block__bar {
    padding: 0.125rem 0.25rem 0.125rem 0.75rem;
}
.docs-wire pre.docs-code {
    margin-top: 0.25rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.6875rem;
    background: var(--saas-panel);
}
.docs-wire .docs-code-block pre.docs-code {
    margin-top: 0;
    background: transparent;
}
@media (max-width: 900px) {
    .docs-wire__body:has(> .docs-wire__col) {
        grid-template-columns: minmax(0, 1fr);
    }
}
@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;
}

/* ------------------------------------------------------------------------
   Modal de formulario: header y footer siempre a la vista.

   El diálogo entero es el contenedor de scroll (`.ds-form-modal` con
   `overflow: auto`, que NO se puede pasar a `hidden` porque recortaría el
   dropdown absoluto del TomSelect). Con el markup actual el header y el
   footer scrollean junto al contenido y en formularios largos —máquinas,
   por ejemplo— los botones Cancelar/Guardar quedan fuera de pantalla.

   `position: sticky` dentro de ese mismo scrollport los fija sin tener que
   reestructurar el markup de las ~12 pantallas que usan estas clases.
   El footer se ancla a `bottom: 0`; para que apoye justo en el borde
   inferior del diálogo se le saca el `margin-bottom: -1.25rem` (que peleaba
   con el límite del sticky) y se le pasa esa compensación al body.

   Fix genérico: candidato a portar a dashboard_design_system (consultar
   antes, ver skill `diseno-portal`).
   ------------------------------------------------------------------------ */
.ds-form-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    /* `--bg-card`, no `--saas-panel`: en oscuro el panel es rgba(...,0.92) y a
       través de un header pegado se transparentaría el contenido que scrollea
       por debajo. `--bg-card` es opaco en los dos temas. */
    background: var(--bg-card);
}

.ds-form-modal__body {
    padding-bottom: 0;
}

.ds-form-modal__body .ds-form-modal__footer,
.ds-form-modal > .ds-form-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-bottom: 0;
}

/* El footer suelto (fuera de `__body`, ej. el modal de callback de cuentas de
   proveedor) no tiene padding del que colgarse: sin margen negativo. */
.ds-form-modal > .ds-form-modal__footer {
    margin-inline: 0;
}

/* ------------------------------------------------------------------------
   Lista de métodos de pago (una fila por método).

   Reemplaza el par de fieldsets "Métodos de pago" + "Método de pago por
   defecto": eran dos preguntas separadas sobre los mismos ítems y el
   segundo bloque, mientras no hubiera nada tildado, era solo una frase
   suelta que parecía un error. Acá cada fila responde las dos: el checkbox
   habilita el método y el radio de la derecha lo marca como el que se
   ofrece primero.
   ------------------------------------------------------------------------ */
.ds-method-list {
    display: grid;
    gap: 0.375rem;
    margin: 0.625rem 0 0;
    padding: 0;
    list-style: none;
}

.ds-method-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--saas-border);
    border-radius: var(--radius-input);
    background: var(--bg-input);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.ds-method-row--on {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.ds-method-row__pick {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    cursor: pointer;
}

.ds-method-row__pick input,
.ds-method-row__default input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.ds-method-row__name {
    color: var(--text-heading);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ds-method-row__default {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
}

.ds-method-row--on .ds-method-row__default {
    color: var(--text-body);
}

/* Sin método tildado el radio no aplica: se atenúa en vez de desaparecer,
   para que la columna no baile mientras se tilda y destilda. Se atenúa con
   el token (`--text-subtle`, ~4.6:1 sobre la fila, AA) y NO con `opacity`, que
   dejaba la etiqueta abajo de 2:1 -- ilegible incluso para un control
   deshabilitado. Lo que comunica el estado es el radio en sí. */
.ds-method-row__default:has(input:disabled) {
    color: var(--text-subtle);
    cursor: not-allowed;
}

.ds-method-row__default input:disabled {
    cursor: not-allowed;
}

/* Escape del radio group: sin esto, una vez elegido un default no habría
   forma de volver a "ninguno" (un radio no se destilda solo). */
.ds-method-clear {
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.ds-method-clear:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.ds-method-clear:focus-visible {
    outline: 0;
    border-radius: var(--radius-input);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

@media (max-width: 480px) {
    .ds-method-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.375rem;
    }
}

/* ---- Densidad y acciones (plan-mejora-ui-portal, 2026-09-13) ---- */

.ds-form-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .ds-form-grid--cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.saas-btn-primary.saas-btn--sm,
.saas-btn-secondary.saas-btn--sm {
    min-height: 2rem;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem;
}

.saas-btn--sm .ds-icon,
.saas-btn--sm .ui-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.saas-console--dense .card-body {
    padding: 1rem 1.125rem;
}

/* `.ds-card-body`: padding compacto para `<div class="card-body ds-card-body">`
   sin redefinir `.p-6`, que docs, 403 y auth siguen usando tal cual. */
.ds-card-body {
    padding: 1rem 1.125rem;
}

/* KPI que lleva a la lista filtrada: el `<a>` envuelve a `_kpi_card.html`
   sin subrayar ni recolorear sus textos. Hover sin movimiento. */
.ds-kpi-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ds-kpi-link:hover .saas-kpi,
.ds-kpi-link:focus-visible .saas-kpi {
    border-color: var(--color-primary);
}

.saas-console--dense.module-stack > * + *,
.saas-console--dense .module-stack > * + * {
    margin-top: 1rem;
}

.saas-console--dense .ds-table-header {
    margin-bottom: 0.75rem;
}

.saas-console--dense .ds-table-header .saas-section-title {
    font-size: 1.0625rem;
    line-height: 1.3;
}

.saas-console--dense .ds-section-copy {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
}

.saas-console--dense .form-input,
.saas-console--dense .form-select {
    height: 2.25rem;
}

.saas-console--dense .table tbody td,
.saas-console--dense .table thead th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ds-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1rem;
}

.ds-form-grid > .ds-form-actions {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .saas-console--dense .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

.ds-form-modal {
    overscroll-behavior: contain;
}

/* Bloqueo de scroll del documento con el modal abierto. `:has()` cubre
   navegadores modernos; `.ds-modal-open` (activado/desactivado según
   `window.__dsSyncModalLock`, un estado derivado del DOM, ver
   crud-state.js / action-modal.js) es el fallback determinista para
   Firefox <121 y para no depender de la versión del UA. */
body:has(dialog.ds-form-modal[open]) {
    overflow: hidden;
}

.ds-modal-open {
    overflow: hidden;
}

/* Sustituto de la variante responsive de Tailwind sm:flex, que el styles.css
   distribuido por el design system no incluye (ver plan-mejora-ui-portal §0.1).
   En uso por el indicador "En vivo" del topbar. */
@media (max-width: 639.98px) { .ds-hide-below-sm { display: none !important; } }