:root {
    /* slate */
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    /* gray */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;

    /* neutral */
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0a0a0a;

    /* indigo */
    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-300: #a5b4fc;
    --color-indigo-400: #818cf8;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;
    --color-indigo-800: #3730a3;
    --color-indigo-900: #312e81;
    --color-indigo-950: #1e1b4b;

    /* blue */
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;
    --color-blue-950: #172554;

    /* green */
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-300: #86efac;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;
    --color-green-900: #14532d;
    --color-green-950: #052e16;

    /* amber */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
    --color-amber-950: #451a03;

    /* purple */
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-300: #d8b4fe;
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-700: #7e22ce;
    --color-purple-800: #6b21a8;
    --color-purple-900: #581c87;
    --color-purple-950: #3b0764;

    /* rose */
    --color-rose-50: #fff1f2;
    --color-rose-100: #ffe4e6;
    --color-rose-200: #fecdd3;
    --color-rose-300: #fda4af;
    --color-rose-400: #fb7185;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-rose-700: #be123c;
    --color-rose-800: #9f1239;
    --color-rose-900: #881337;
    --color-rose-950: #4c0519;

    /* sky (used by --color-info-*) */
    --color-sky-50: #f0f9ff;
    --color-sky-100: #e0f2fe;
    --color-sky-200: #bae6fd;
    --color-sky-300: #7dd3fc;
    --color-sky-400: #38bdf8;
    --color-sky-500: #0ea5e9;
    --color-sky-600: #0284c7;
    --color-sky-700: #0369a1;
    --color-sky-800: #075985;
    --color-sky-900: #0c4a6e;
    --color-sky-950: #082f49;

    /* emerald (used by --color-success-*) */
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-200: #a7f3d0;
    --color-emerald-300: #6ee7b7;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-emerald-800: #065f46;
    --color-emerald-900: #064e3b;
    --color-emerald-950: #022c22;

    /* white / black */
    --color-white: #ffffff;
    --color-black: #000000;
}

:root {
    --color-dark-50: #e6e7eb;
    --color-dark-100: #d0d2db;
    --color-dark-200: #b7bac4;
    --color-dark-300: #838794;
    --color-dark-400: #4c4f57;
    --color-dark-450: #383a41;
    --color-dark-500: #2a2c32;
    --color-dark-600: #232429;
    --color-dark-700: #1c1d21;
    --color-dark-750: #1a1b1f;
    --color-dark-800: #15161a;
    --color-dark-900: #0e0f11;
}

:root {
    --color-gray-150: #e9eef5;
    /* Mapped to slate by default */
}

[data-theme-light="slate"] {
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-150: #e9eef5;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-gray-950: #020617;
}

[data-theme-light="gray"] {
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-150: #ebedf0;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;
}

[data-theme-light="neutral"] {
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-150: #ededed;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    --color-gray-950: #0a0a0a;
}

[data-theme-dark="navy"] {
    --color-dark-50: #e7e9ef;
    --color-dark-100: #c2c9d6;
    --color-dark-200: #a5afc4;
    --color-dark-300: #6d7ea1;
    --color-dark-400: #5c6b8a;
    --color-dark-450: #465675;
    --color-dark-500: #384766;
    --color-dark-600: #313e59;
    --color-dark-700: #24314a;
    --color-dark-750: #222e45;
    --color-dark-800: #202b40;
    --color-dark-900: #182030;
}

[data-theme-dark="mirage"] {
    --color-dark-50: #dde5f5;
    --color-dark-100: #b4bfd9;
    --color-dark-200: #9eaac4;
    --color-dark-300: #6c7c9e;
    --color-dark-400: #3d4e70;
    --color-dark-450: #293859;
    --color-dark-500: #1e2b47;
    --color-dark-600: #1a2640;
    --color-dark-700: #101a2e;
    --color-dark-750: #0f1729;
    --color-dark-800: #0c1221;
    --color-dark-900: #050a16;
}

[data-theme-dark="mint"] {
    --color-dark-50: #e1e5ea;
    --color-dark-100: #c5ccd3;
    --color-dark-200: #a0abb6;
    --color-dark-300: #70838f;
    --color-dark-400: #506877;
    --color-dark-450: #384954;
    --color-dark-500: #2a3942;
    --color-dark-600: #242f38;
    --color-dark-700: #152129;
    --color-dark-750: #111b22;
    --color-dark-800: #0d161c;
    --color-dark-900: #0a1014;
}

[data-theme-dark="black"] {
    --color-dark-50: #ebebed;
    --color-dark-100: #d9d9de;
    --color-dark-200: #c5c5cc;
    --color-dark-300: #93939c;
    --color-dark-400: #4a4a4f;
    --color-dark-450: #333338;
    --color-dark-500: #242428;
    --color-dark-600: #1f1f21;
    --color-dark-700: #131314;
    --color-dark-750: #0c0c0d;
    --color-dark-800: #080809;
    --color-dark-900: #000000;
}

[data-theme-dark="cinder"] {
    --color-dark-50: #e6e7eb;
    --color-dark-100: #d0d2db;
    --color-dark-200: #b7bac4;
    --color-dark-300: #838794;
    --color-dark-400: #4c4f57;
    --color-dark-450: #383a41;
    --color-dark-500: #2a2c32;
    --color-dark-600: #232429;
    --color-dark-700: #1c1d21;
    --color-dark-750: #1a1b1f;
    --color-dark-800: #15161a;
    --color-dark-900: #0e0f11;
}

:root {
    --color-primary-50: var(--color-indigo-50);
    --color-primary-100: var(--color-indigo-100);
    --color-primary-200: var(--color-indigo-200);
    --color-primary-300: var(--color-indigo-300);
    --color-primary-400: var(--color-indigo-400);
    --color-primary-500: var(--color-indigo-500);
    --color-primary-600: var(--color-indigo-600);
    --color-primary-700: var(--color-indigo-700);
    --color-primary-800: var(--color-indigo-800);
    --color-primary-900: var(--color-indigo-900);
    --color-primary-950: var(--color-indigo-950);
}

[data-theme-primary="indigo"] {
    --color-primary-50: var(--color-indigo-50);
    --color-primary-100: var(--color-indigo-100);
    --color-primary-200: var(--color-indigo-200);
    --color-primary-300: var(--color-indigo-300);
    --color-primary-400: var(--color-indigo-400);
    --color-primary-500: var(--color-indigo-500);
    --color-primary-600: var(--color-indigo-600);
    --color-primary-700: var(--color-indigo-700);
    --color-primary-800: var(--color-indigo-800);
    --color-primary-900: var(--color-indigo-900);
    --color-primary-950: var(--color-indigo-950);
}

[data-theme-primary="blue"] {
    --color-primary-50: var(--color-blue-50);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-400: var(--color-blue-400);
    --color-primary-500: var(--color-blue-500);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);
    --color-primary-900: var(--color-blue-900);
    --color-primary-950: var(--color-blue-950);
}

[data-theme-primary="green"] {
    --color-primary-50: var(--color-green-50);
    --color-primary-100: var(--color-green-100);
    --color-primary-200: var(--color-green-200);
    --color-primary-300: var(--color-green-300);
    --color-primary-400: var(--color-green-400);
    --color-primary-500: var(--color-green-500);
    --color-primary-600: var(--color-green-600);
    --color-primary-700: var(--color-green-700);
    --color-primary-800: var(--color-green-800);
    --color-primary-900: var(--color-green-900);
    --color-primary-950: var(--color-green-950);
}

[data-theme-primary="amber"] {
    --color-primary-50: var(--color-amber-50);
    --color-primary-100: var(--color-amber-100);
    --color-primary-200: var(--color-amber-300);
    --color-primary-300: var(--color-amber-300);
    --color-primary-400: var(--color-amber-400);
    --color-primary-500: var(--color-amber-500);
    --color-primary-600: var(--color-amber-600);
    --color-primary-700: var(--color-amber-700);
    --color-primary-800: var(--color-amber-800);
    --color-primary-900: var(--color-amber-900);
    --color-primary-950: var(--color-amber-950);
}

[data-theme-primary="purple"] {
    --color-primary-50: var(--color-purple-50);
    --color-primary-100: var(--color-purple-100);
    --color-primary-200: var(--color-purple-200);
    --color-primary-300: var(--color-purple-300);
    --color-primary-400: var(--color-purple-400);
    --color-primary-500: var(--color-purple-500);
    --color-primary-600: var(--color-purple-600);
    --color-primary-700: var(--color-purple-700);
    --color-primary-800: var(--color-purple-800);
    --color-primary-900: var(--color-purple-900);
    --color-primary-950: var(--color-purple-950);
}

[data-theme-primary="rose"] {
    --color-primary-50: var(--color-rose-50);
    --color-primary-100: var(--color-rose-100);
    --color-primary-200: var(--color-rose-200);
    --color-primary-300: var(--color-rose-300);
    --color-primary-400: var(--color-rose-400);
    --color-primary-500: var(--color-rose-500);
    --color-primary-600: var(--color-rose-600);
    --color-primary-700: var(--color-rose-700);
    --color-primary-800: var(--color-rose-800);
    --color-primary-900: var(--color-rose-900);
    --color-primary-950: var(--color-rose-950);
}

:root {
    --surface-1: var(--color-white);
    --surface-2: var(--color-gray-50);
    --surface-3: var(--color-gray-100);
}

html.dark {
    --surface-1: var(--color-dark-450);
    --surface-2: var(--color-dark-500);
    --surface-3: var(--color-dark-600);
}

html[data-card-skin="bordered"] {
    --surface-1: var(--color-white);
    --surface-2: var(--color-gray-50);
    --surface-3: var(--color-gray-100);
}

html.dark[data-card-skin="bordered"] {
    --surface-1: var(--color-dark-500);
    --surface-2: var(--color-dark-600);
    --surface-3: var(--color-dark-700);
}

:root {
    --color-info-lighter: var(--color-sky-400);
    --color-info-light: var(--color-sky-500);
    --color-info: var(--color-sky-600);
    --color-info-darker: var(--color-sky-700);

    --color-success-lighter: var(--color-emerald-400);
    --color-success-light: var(--color-emerald-500);
    --color-success: var(--color-emerald-600);
    --color-success-darker: var(--color-emerald-700);

    --color-warning-lighter: #ffba42;
    --color-warning-light: #ffa71a;
    --color-warning: #f59200;
    --color-warning-darker: #db7c00;

    --color-error-lighter: #ff8a5c;
    --color-error-light: #ff6933;
    --color-error: #ff4f1a;
    --color-error-darker: #e52e00;

    --color-secondary-lighter: #ff75df;
    --color-secondary-light: #ff2ecf;
    --color-secondary: #e000ad;
    --color-secondary-darker: #b8008c;
}

.this\:primary {
    --color-this-lighter: var(--color-primary-400);
    --color-this-light: var(--color-primary-500);
    --color-this: var(--color-primary-600);
    --color-this-darker: var(--color-primary-700);
}

.this\:secondary {
    --color-this-lighter: var(--color-secondary-lighter);
    --color-this-light: var(--color-secondary-light);
    --color-this: var(--color-secondary);
    --color-this-darker: var(--color-secondary-darker);
}

.this\:info {
    --color-this-lighter: var(--color-info-lighter);
    --color-this-light: var(--color-info-light);
    --color-this: var(--color-info);
    --color-this-darker: var(--color-info-darker);
}

.this\:success {
    --color-this-lighter: var(--color-success-lighter);
    --color-this-light: var(--color-success-light);
    --color-this: var(--color-success);
    --color-this-darker: var(--color-success-darker);
}

.this\:warning {
    --color-this-lighter: var(--color-warning-lighter);
    --color-this-light: var(--color-warning-light);
    --color-this: var(--color-warning);
    --color-this-darker: var(--color-warning-darker);
}

.this\:error {
    --color-this-lighter: var(--color-error-lighter);
    --color-this-light: var(--color-error-light);
    --color-this: var(--color-error);
    --color-this-darker: var(--color-error-darker);
}

:root {
    --shadow-soft:
        rgba(145, 158, 171, 0.2) 0 0 2px 0,
        rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
    --shadow-soft-dark: 0 3px 10px 0 rgb(25 25 25 / 30%);

    --shadow-elevation-1: 0 1px 2px rgb(0 0 0 / .04);
    --shadow-elevation-2: var(--shadow-soft);
    --shadow-elevation-3: 0 12px 24px rgb(0 0 0 / .10);
    --shadow-elevation-4: 0 18px 36px rgb(0 0 0 / .12);

    /* Motion durations are project-local extras (estilos.css only defines
       --default-transition-duration). They sit between the standard
       150 ms and longer 400 ms reveals. */
    --motion-short:  100ms;
    --motion-medium: 200ms;
    --motion-long:   250ms;
    --motion-x-long: 400ms;
}

html.dark {
    --shadow-elevation-1: 0 1px 2px rgb(0 0 0 / .35);
    --shadow-elevation-2: var(--shadow-soft-dark);
    --shadow-elevation-3: 0 14px 28px rgb(0 0 0 / .55);
    --shadow-elevation-4: 0 18px 36px rgb(0 0 0 / .60);
}

:root {
    --margin-x: 1rem;
}

@media (min-width: 768px) {
    :root {
        --margin-x: 1.5rem;
    }
}

@media (min-width: 1280px) {
    [data-layout="main-layout"] {
        --margin-x: 4rem;
    }

    [data-layout="sideblock"] {
        --margin-x: 1.5rem;
    }
}

@media (min-width: 1536px) {
    [data-layout="sideblock"], [data-layout="horizontal-nav"] {
        --margin-x: 3rem;
    }
}

html {
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    /* Prevent off-screen drawers (MudDrawer Temporary anchored to End) from
       creating a horizontal scrollbar that reveals the drawer when the user
       drags sideways. Components that legitimately need horizontal scroll
       (wide tables, code blocks) opt in locally via overflow-x: auto. */
    overflow-x: hidden;
}

html.dark {
    color-scheme: dark;
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.43;
    color: var(--color-gray-700);
    background-color: var(--color-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.dark body {
    color: var(--color-dark-200);
    background-color: var(--color-dark-900);
}

[data-card-skin="bordered"] body {
    background-color: var(--color-white);
}

html.dark[data-card-skin="bordered"] body {
    background-color: var(--color-dark-900);
}

/* Force the drawer to span the full viewport regardless of MudLayout's
   appbar/footer offsets. With only top:0 / bottom:0, the drawer auto-stretches
   to 100vh but Mud keeps its own flex layout intact (so the drawer-content
   children scroll correctly). z-index is intentionally NOT overridden — Mud
   already stacks Overlay (1199) below Drawer (1200) and forcing it breaks
   that order. */
/* the floating-drawer pattern. Spec:
     fixed inset-y-0 right-0 z-61 w-screen flex flex-col bg-white
     dark:bg-dark-750/80 backdrop-blur-sm
     sm:inset-y-2 sm:mx-2 sm:w-80 sm:rounded-xl

   Mobile (≤639 px): edge-to-edge, full screen, no radius.
   Desktop (≥640 px): floats with 8 px gutter on top/right/bottom,
   320 px wide, 12 px rounded on all 4 corners.

   `position: fixed !important` + `transform: none !important` defeat any
   GPU-acceleration / containing-block hacks that MudDrawer or its parent
   might apply, which otherwise let the drawer drift with page scroll. */
/* DO NOT override `position`, `top`, `bottom`, `right`, `width`, `transform`
   on .mud-drawer — Mud uses those internally for the slide-in/-out
   animation (and may use `right: -<width>` rather than transform on some
   builds). Overriding any of them blocks the close state and the drawer
   stays permanently visible. We only override visual properties (border,
   background, blur) and add a `margin` to achieve the design floating look
   without touching the layout primitives. */
.bp-theme-drawer.mud-drawer {
    backdrop-filter: blur(8px);
    overflow: hidden; /* clip the inner scroll within the rounded corners */
    border-radius: 0; /* mobile: edge-to-edge, no radius */
    /* IMPORTANT: NO right margin. A `margin-right` would push the drawer
       inward from the viewport edge by that amount; when MudBlazor closes
       via `transform: translateX(100%)`, the drawer only slides by its own
       width — leaving a visible sliver equal to the margin. By using
       top/bottom/left only, the drawer hugs the viewport's right edge when
       open and fully disappears when closed. The animation is preserved. */
    margin: 8px 0 8px 8px !important;
    height: 100vh !important;
    position: fixed !important;
}

@media (min-width: 640px) {
    .bp-theme-drawer.mud-drawer {
        margin: 8px 0 8px 8px !important;
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
        border-radius: var(--radius-xl);
        position: fixed !important;
    }
}

/* Translucent dark fill (design uses `dark:bg-dark-750/80`). The 80 %
   opacity + backdrop-blur on the panel creates the frosted-glass effect.
   `--color-dark-750` was loaded with the design palettes (§4 / §A) and
   is theme-aware via data-theme-dark. */
html.dark .bp-theme-drawer.mud-drawer {
    background: rgb(from var(--color-dark-750) r g b / 0.85) !important;
}

/* design .custom-scrollbar pattern (estilos.css §1000-1037): 4 px wide,
   semi-transparent gray-300 thumb that darkens on hover. Replaces the
   default browser scrollbar, which renders thick / jittery and is the
   main reason the drawer felt "mareado" while scrolling. */
.bp-theme-drawer .mud-drawer-content {
    height: 100%;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgb(from var(--color-gray-300) r g b / 0.6) transparent;
    /* The drawer panel itself owns the backdrop-filter (see .bp-theme-drawer.
       mud-drawer above). Don't duplicate it here — nested backdrop-filter
       breaks the parent's frosted-glass effect on Chromium. */
}

    .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar {
        width: 4px;
    }

    .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb {
        background-color: rgb(from var(--color-gray-300) r g b / 0.6);
        border-radius: 4px;
    }

        .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb:hover {
            background-color: var(--color-gray-400);
        }

html.dark .bp-theme-drawer .mud-drawer-content {
    scrollbar-color: var(--color-dark-400) transparent;
}

    html.dark .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb {
        background-color: var(--color-dark-400);
    }

        html.dark .bp-theme-drawer .mud-drawer-content::-webkit-scrollbar-thumb:hover {
            background-color: var(--color-dark-300);
        }

.bp-theme-drawer-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 1;
}

html.dark .bp-theme-drawer-header {
    border-bottom-color: var(--color-dark-500);
    background: var(--color-dark-700);
}

.bp-theme-drawer-title {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-gray-700);
}

html.dark .bp-theme-drawer-title {
    color: var(--color-dark-100);
}

.bp-theme-drawer-title-icon {
    color: var(--color-primary-600);
}

.bp-theme-drawer-body {
    padding: 12px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bp-theme-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bp-theme-section-title {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    margin: 0;
    letter-spacing: 0;
}

html.dark .bp-theme-section-title {
    color: var(--color-dark-100);
}

/* §11.b ─── bp-theme-drawer Anchor.Start mirror ──────────────────────────────
   Base §11 sets margin: 8px 0 8px 8px (flush-right look for Anchor.End).
   Anchor.Start (Left) mirrors that margin so the floating panel sits
   flush against the left edge of the viewport. Height, width and transform
   stay on Mud's defaults — see feedback_muddrawer_no_position_overrides.

   Top / Bottom anchors do NOT receive bp-theme-drawer styling — the floating
   skin pelea con el slide nativo de Mud para drawers horizontales. Si en el
   futuro un caso real lo necesita (action sheet móvil, command palette), se
   trata como primitiva separada con su propio skin.
   =========================================================================== */

@media (min-width: 640px) {
    .bp-theme-drawer.mud-drawer.mud-drawer-anchor-start {
        margin: 8px 8px 8px 0 !important;
    }
}

/* Hint subtitle shown under a section title when the controls below are
   informational only (e.g. the Primary Colors section becomes locked while
   the Avalme brand is active). */
.bp-theme-section-hint {
    margin: -4px 0 4px;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-gray-500);
    font-style: italic;
}

html.dark .bp-theme-section-hint {
    color: var(--color-dark-300);
}

.bp-theme-section--disabled .bp-theme-grid,
.bp-theme-section--disabled .mud-input-control,
.bp-theme-section--disabled .mud-select {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.bp-theme-grid {
    display: grid;
    gap: 10px;
}

.bp-theme-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bp-theme-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bp-theme-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 12px; }

.bp-theme-tile-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.bp-theme-tile-label {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs-plus);
    font-weight: 500;
    color: var(--color-gray-600);
    text-align: center;
    line-height: 1.2;
}

html.dark .bp-theme-tile-label {
    color: var(--color-dark-200);
}

.bp-theme-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    display: block;
    transition: box-shadow var(--motion-medium) var(--ease-in-out),
                outline-color var(--motion-medium) var(--ease-in-out);
}

    .bp-theme-tile:hover {
        box-shadow: 0 0 0 1px var(--color-gray-300);
    }

    .bp-theme-tile.selected {
        outline: 2px solid var(--color-primary-600);
        outline-offset: 2px;
    }

html.dark .bp-theme-tile.selected {
    outline-color: var(--color-primary-500);
}

.bp-theme-tile-body,
.bp-theme-tile-half {
    width: 100%;
    height: 100%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--color-gray-200);
}

    .bp-theme-tile-body-dark,
    .bp-theme-tile-half-dark {
        background: var(--color-dark-900);
    }

/* Two stacked mini-cards inside the body */
.bp-theme-tile-card {
    background: var(--color-white);
    border-radius: 3px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

    .bp-theme-tile-card-dark {
        background: var(--color-dark-700);
    }

.bp-theme-tile-card-row {
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/* Lines and circles inside the mini-cards */
.bp-theme-tile-line {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--color-gray-400);
}

    .bp-theme-tile-line.tiny {
        height: 1.5px;
    }

    .bp-theme-tile-line-dark {
        background: var(--color-dark-400);
    }

.bp-theme-tile-circle {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-gray-400);
}

    .bp-theme-tile-circle-dark {
        background: var(--color-dark-400);
    }

.bp-theme-tile.is-mode-system {
    position: relative;
}

    .bp-theme-tile.is-mode-system .bp-theme-tile-half {
        position: absolute;
        inset: 0;
    }

    .bp-theme-tile.is-mode-system .bp-theme-tile-half-light {
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    .bp-theme-tile.is-mode-system .bp-theme-tile-half-dark {
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

.bp-theme-tile-layout {
    width: 100%;
    height: 100%;
    background: var(--color-gray-100);
    display: flex;
    overflow: hidden;
}

html.dark .bp-theme-tile-layout {
    background: var(--color-dark-900);
}

.bp-theme-tile-mainpanel {
    flex: 0 0 9%;
    background: var(--color-gray-200);
    border-right: 1px solid var(--color-gray-300);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

html.dark .bp-theme-tile-mainpanel {
    background: var(--color-dark-700);
    border-right-color: var(--color-dark-600);
}

.bp-theme-tile-dot-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bp-theme-tile-line-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bp-theme-tile-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gray-400);
}

html.dark .bp-theme-tile-dot {
    background: var(--color-dark-400);
}

.bp-theme-tile-primepanel {
    flex: 0 0 22%;
    background: var(--color-gray-200);
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

    .bp-theme-tile-primepanel-wide {
        flex-basis: 30%;
    }

html.dark .bp-theme-tile-primepanel {
    background: var(--color-dark-700);
}

.bp-theme-tile-canvas {
    flex: 1;
    background: var(--color-gray-100);
    display: flex;
    flex-direction: column;
}

html.dark .bp-theme-tile-canvas {
    background: var(--color-dark-900);
}

.bp-theme-tile-appbar {
    height: 12px;
    background: var(--color-gray-200);
    border-left: 1px solid var(--color-gray-300);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 6px;
}

html.dark .bp-theme-tile-appbar {
    background: var(--color-dark-700);
    border-left-color: var(--color-dark-600);
}

.bp-theme-color-card {
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: 10px;
    border: 1px solid var(--color-gray-200);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color var(--motion-medium) var(--ease-in-out);
}

    .bp-theme-color-card:hover {
        border-color: var(--color-gray-300);
    }

    .bp-theme-color-card.selected {
        border-color: var(--color-primary-500);
    }

html.dark .bp-theme-color-card {
    border-color: var(--color-dark-500);
}

    html.dark .bp-theme-color-card.selected {
        border-color: var(--color-primary-400);
    }

.bp-theme-color-diamond {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    transform: rotate(45deg);
    transition: transform var(--motion-medium) var(--ease-in-out);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

.bp-theme-color-card.selected .bp-theme-color-diamond {
    transform: rotate(45deg) scale(1.1);
}

.bp-theme-swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    display: block;
    transition: outline-color var(--motion-medium) var(--ease-in-out);
}

    .bp-theme-swatch:hover {
        box-shadow: 0 0 0 1px var(--color-gray-300);
    }

    .bp-theme-swatch.selected {
        outline: 2px solid var(--color-primary-600);
        outline-offset: 2px;
    }

html.dark .bp-theme-swatch.selected {
    outline-color: var(--color-primary-500);
}

.bp-theme-swatch-body {
    width: 100%;
    height: 100%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--swatch-bg);
}

.bp-theme-swatch-card {
    background: var(--swatch-card);
    border-radius: 3px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.bp-theme-swatch-card-row {
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.bp-theme-swatch-line {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--swatch-line);
}

.bp-theme-swatch-circle {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--swatch-line);
}

.bp-theme-select.mud-input-control {
    width: 100%;
}

/* MudRadioGroup renders three nested wrappers before reaching the radios:
       .mud-input-control (gets our class) — display:flex column (Mud default)
         └─ .mud-input-control-input-container — display:flex column
              └─ .mud-radio-group — display:inherit, flex-direction:row, NO gap
                   ├─ .mud-radio
                   └─ .mud-radio
   The actual flex container holding the radios is `.mud-radio-group`. Mud
   sets it to row but never adds `gap`, so the two radios sit edge-to-edge.
   Targeting that level directly is the only way to space them apart. */
.bp-theme-density-group .mud-radio-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

    .bp-theme-density-group .mud-radio {
        margin: 0 !important;
    }

/* ============================================================================
 * design primitives — imported verbatim from E:\Trabajo\.net\avalme\cursor\estilos.css
 *
 * The blocks below mirror the design tokens that design defines at :root.
 * Component-level CSS (avalme-v1.css and the bridge) consumes these via
 * `var(--token)` so we never sprinkle raw HEX/numbers in component rules.
 *
 * What is NOT brought in:
 *   - `--tw-*` — Tailwind v4 runtime variables, not design tokens.
 *   - @keyframes definitions — they live alongside the components that use them.
 *
 * Index (sections appended to the original tokens file)
 *   §A  Tailwind palettes — fill in what was missing (OKLCH, full 50-950 ramps)
 *   §B  Typography primitives          (text, font-weight, tracking, leading, font family)
 *   §C  Sizing primitives              (radius, container, blur, border-width)
 *   §D  Motion primitives              (ease, default-transition-duration, animations)
 *   §E  Z-index primitives             (--z-index-1..5)
 *   §F  MudBlazor palette mappings     (was the Mud bridge stylesheet §1)
 *   §G  Lead-status palette            (was avalme-v1.css §3.1)
 *
 * Single-source-of-truth invariant: this file is the ONLY place CSS variables
 * are defined in the project. Bridge / component / feature stylesheets only
 * consume tokens via var(--token), never define them.
 * ========================================================================== */

/* ============================================================================
 * §A  Tailwind palettes (OKLCH)
 *
 * Full 50-950 ramps for the palettes our existing the design tokens stylesheet §2 left
 * incomplete. Values are copied verbatim from estilos.css for visual parity
 * with the design source. The palettes already present (rose, indigo,
 * blue, green, amber, purple, emerald) keep their existing HEX definitions
 * in §2 — migrating those to OKLCH is a separate task.
 * ========================================================================== */
:root {
    --color-red-50:  oklch(97.1%  .013  17.38);
    --color-red-100: oklch(93.6%  .032  17.717);
    --color-red-200: oklch(88.5%  .062  18.334);
    --color-red-300: oklch(80.8%  .114  19.571);
    --color-red-400: oklch(70.4%  .191  22.216);
    --color-red-500: oklch(63.7%  .237  25.331);
    --color-red-600: oklch(57.7%  .245  27.325);
    --color-red-700: oklch(50.5%  .213  27.518);
    --color-red-800: oklch(44.4%  .177  26.899);
    --color-red-900: oklch(39.6%  .141  25.723);
    --color-red-950: oklch(25.8%  .092  26.042);

    --color-orange-50:  oklch(98%    .016  73.684);
    --color-orange-100: oklch(95.4%  .038  75.164);
    --color-orange-200: oklch(90.1%  .076  70.697);
    --color-orange-300: oklch(83.7%  .128  66.29);
    --color-orange-400: oklch(75%    .183  55.934);
    --color-orange-500: oklch(70.5%  .213  47.604);
    --color-orange-600: oklch(64.6%  .222  41.116);
    --color-orange-700: oklch(55.3%  .195  38.402);
    --color-orange-800: oklch(47%    .157  37.304);
    --color-orange-900: oklch(40.8%  .123  38.172);
    --color-orange-950: oklch(26.6%  .079  36.259);

    --color-yellow-50:  oklch(98.7%  .026  102.212);
    --color-yellow-100: oklch(97.3%  .071  103.193);
    --color-yellow-200: oklch(94.5%  .129  101.54);
    --color-yellow-300: oklch(90.5%  .182  98.111);
    --color-yellow-400: oklch(85.2%  .199  91.936);
    --color-yellow-500: oklch(79.5%  .184  86.047);
    --color-yellow-600: oklch(68.1%  .162  75.834);
    --color-yellow-700: oklch(55.4%  .135  66.442);
    --color-yellow-800: oklch(47.6%  .114  61.907);
    --color-yellow-900: oklch(42.1%  .095  57.708);
    --color-yellow-950: oklch(28.6%  .066  53.813);

    --color-lime-50:  oklch(98.6%  .031  120.757);
    --color-lime-100: oklch(96.7%  .067  122.328);
    --color-lime-200: oklch(93.8%  .127  124.321);
    --color-lime-300: oklch(89.7%  .196  126.665);
    --color-lime-400: oklch(84.1%  .238  128.85);
    --color-lime-500: oklch(76.8%  .233  130.85);
    --color-lime-600: oklch(64.8%  .2    131.684);
    --color-lime-700: oklch(53.2%  .157  131.589);
    --color-lime-800: oklch(45.3%  .124  130.933);
    --color-lime-900: oklch(40.5%  .101  131.063);
    --color-lime-950: oklch(27.4%  .072  132.109);

    --color-sky-50:  oklch(97.7%  .013  236.62);
    --color-sky-100: oklch(95.1%  .026  236.824);
    --color-sky-200: oklch(90.1%  .058  230.902);
    --color-sky-300: oklch(82.8%  .111  230.318);
    --color-sky-400: oklch(74.6%  .16   232.661);
    --color-sky-500: oklch(68.5%  .169  237.323);
    --color-sky-600: oklch(58.8%  .158  241.966);
    --color-sky-700: oklch(50%    .134  242.749);
    --color-sky-800: oklch(44.3%  .11   240.79);
    --color-sky-900: oklch(39.1%  .09   240.876);
    --color-sky-950: oklch(29.3%  .066  243.157);

    --color-cyan-50:  oklch(98.4%  .019  200.873);
    --color-cyan-100: oklch(95.6%  .045  203.388);
    --color-cyan-200: oklch(91.7%  .08   205.041);
    --color-cyan-300: oklch(86.5%  .127  207.078);
    --color-cyan-400: oklch(78.9%  .154  211.53);
    --color-cyan-500: oklch(71.5%  .143  215.221);
    --color-cyan-600: oklch(60.9%  .126  221.723);
    --color-cyan-700: oklch(52%    .105  223.128);
    --color-cyan-800: oklch(45%    .085  224.283);
    --color-cyan-900: oklch(39.8%  .07   227.392);
    --color-cyan-950: oklch(30.2%  .056  229.695);

    --color-teal-50:  oklch(98.4%  .014  180.72);
    --color-teal-100: oklch(95.3%  .051  180.801);
    --color-teal-200: oklch(91%    .096  180.426);
    --color-teal-300: oklch(85.5%  .138  181.071);
    --color-teal-400: oklch(77.7%  .152  181.912);
    --color-teal-500: oklch(70.4%  .14   182.503);
    --color-teal-600: oklch(60%    .118  184.704);
    --color-teal-700: oklch(51.1%  .096  186.391);
    --color-teal-800: oklch(43.7%  .078  188.216);
    --color-teal-900: oklch(38.6%  .063  188.416);
    --color-teal-950: oklch(27.7%  .046  192.524);

    --color-violet-50:  oklch(96.9%  .016  293.756);
    --color-violet-100: oklch(94.3%  .029  294.588);
    --color-violet-200: oklch(89.4%  .057  293.283);
    --color-violet-300: oklch(81.1%  .111  293.571);
    --color-violet-400: oklch(70.2%  .183  293.541);
    --color-violet-500: oklch(60.6%  .25   292.717);
    --color-violet-600: oklch(54.1%  .281  293.009);
    --color-violet-700: oklch(49.1%  .27   292.581);
    --color-violet-800: oklch(43.2%  .232  292.759);
    --color-violet-900: oklch(38%    .189  293.745);
    --color-violet-950: oklch(28.3%  .141  291.089);

    --color-fuchsia-50:  oklch(97.7%  .017  320.058);
    --color-fuchsia-100: oklch(95.2%  .037  318.852);
    --color-fuchsia-200: oklch(90.3%  .076  319.62);
    --color-fuchsia-300: oklch(83.3%  .145  321.434);
    --color-fuchsia-400: oklch(74%    .238  322.16);
    --color-fuchsia-500: oklch(66.7%  .295  322.15);
    --color-fuchsia-600: oklch(59.1%  .293  322.896);
    --color-fuchsia-700: oklch(51.8%  .253  323.949);
    --color-fuchsia-800: oklch(45.2%  .211  324.591);
    --color-fuchsia-900: oklch(40.1%  .17   325.612);
    --color-fuchsia-950: oklch(29.3%  .136  325.661);

    --color-pink-50:  oklch(97.1%  .014  343.198);
    --color-pink-100: oklch(94.8%  .028  342.258);
    --color-pink-200: oklch(89.9%  .061  343.231);
    --color-pink-300: oklch(82.3%  .12   346.018);
    --color-pink-400: oklch(71.8%  .202  349.761);
    --color-pink-500: oklch(65.6%  .241  354.308);
    --color-pink-600: oklch(59.2%  .249  .584);
    --color-pink-700: oklch(52.5%  .223  3.958);
    --color-pink-800: oklch(45.9%  .187  3.815);
    --color-pink-900: oklch(40.8%  .153  2.432);
    --color-pink-950: oklch(28.4%  .109  3.907);

    --color-slate-50:  oklch(98.4%  .003  247.858);
    --color-slate-100: oklch(96.8%  .007  247.896);
    --color-slate-200: oklch(92.9%  .013  255.508);
    --color-slate-300: oklch(86.9%  .022  252.894);
    --color-slate-400: oklch(70.4%  .04   256.788);
    --color-slate-500: oklch(55.4%  .046  257.417);
    --color-slate-600: oklch(44.6%  .043  257.281);
    --color-slate-700: oklch(37.2%  .044  257.287);
    --color-slate-800: oklch(27.9%  .041  260.031);
    --color-slate-900: oklch(20.8%  .042  265.755);
    --color-slate-950: oklch(12.9%  .042  264.695);

    --color-neutral-50:  oklch(98.5%  0  0);
    --color-neutral-100: oklch(97%    0  0);
    --color-neutral-200: oklch(92.2%  0  0);
    --color-neutral-300: oklch(87%    0  0);
    --color-neutral-400: oklch(70.8%  0  0);
    --color-neutral-500: oklch(55.6%  0  0);
    --color-neutral-600: oklch(43.9%  0  0);
    --color-neutral-700: oklch(37.1%  0  0);
    --color-neutral-800: oklch(26.9%  0  0);
    --color-neutral-900: oklch(20.5%  0  0);
    --color-neutral-950: oklch(14.5%  0  0);
}

/* ============================================================================
 * §B  Typography primitives
 * ========================================================================== */
:root {
    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --default-font-family: var(--font-sans);
    /* --font-display: optional display/heading font, set ONLY by an active brand
       theme (e.g. `data-theme-brand="avalme"` overrides this to Montserrat for
       H1-H3). Default fallback IS `var(--font-sans)` so any rule that uses
       `var(--font-display)` outside a brand context stays on Inter and the
       cascade never breaks. */
    --font-display: var(--font-sans);

    --text-xs:        .75rem;     /* 12 */
    --text-sm:        .875rem;    /* 14 */
    --text-base:      1rem;       /* 16 */
    --text-lg:        1.125rem;   /* 18 */
    --text-xl:        1.25rem;    /* 20 */
    --text-2xl:       1.5rem;     /* 24 */
    --text-3xl:       1.875rem;   /* 30 */
    --text-4xl:       2.25rem;    /* 36 */
    --text-5xl:       3rem;       /* 48 */
    --text-6xl:       3.75rem;    /* 60 */
    --text-7xl:       4.5rem;     /* 72 */
    --text-8xl:       6rem;       /* 96 */

    /* design extras (between standard steps) */
    --text-tiny:      .625rem;    /* 10 */
    --text-tiny-plus: .6875rem;   /* 11 */
    --text-xs-plus:   .8125rem;   /* 13 */
    --text-sm-plus:   .9375rem;   /* 15 */

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --tracking-tight:  -.025em;
    --tracking-normal: 0em;
    --tracking-wide:   .025em;
    --tracking-wider:  .05em;

    --leading-tight:    1.25;
    --leading-snug:     1.375;
    --leading-normal:   1.5;
    --leading-relaxed:  1.625;
}

/* ============================================================================
 * §C  Sizing primitives
 *
 * Includes the radius scale that avalme-v1.css §1 / §2 were referencing via
 * `var(--radius-lg, 8px)` fallbacks — those fallbacks become unreachable now
 * because the tokens are defined.
 * ========================================================================== */
:root {
    --spacing: .25rem;       /*  4 px */

    --radius-xs:  .125rem;   /*  2 px */
    --radius-sm:  .25rem;    /*  4 px */
    --radius-md:  .375rem;   /*  6 px */
    --radius-lg:  .5rem;     /*  8 px */
    --radius-xl:  .75rem;    /* 12 px */
    --radius-2xl: 1rem;      /* 16 px */
    --radius-3xl: 1.5rem;    /* 24 px */
    --radius-full: 9999px;   /* pill / circle */

    --container-xs:  20rem;   /*  320 */
    --container-sm:  24rem;   /*  384 */
    --container-md:  28rem;   /*  448 */
    --container-lg:  32rem;   /*  512 */
    --container-xl:  36rem;   /*  576 */
    --container-2xl: 42rem;   /*  672 */
    --container-3xl: 48rem;   /*  768 */
    --container-4xl: 56rem;   /*  896 */
    --container-5xl: 64rem;   /* 1024 */

    --breakpoint-lg: 64rem;

    --blur-xs: 4px;
    --blur-sm: 8px;

    --border-width-3: 3px;
}

/* ============================================================================
 * §D  Motion primitives
 *
 * Easing curves and animation shorthands. The ease-* tokens match the named
 * Tailwind v4 easings; --ease-elastic is a design extension used for the
 * sidebar/drawer slide-ins.
 * ========================================================================== */
:root {
    --ease-in:      cubic-bezier(.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, .2, 1);
    --ease-in-out:  cubic-bezier(.4, 0, .2, 1);
    --ease-elastic: cubic-bezier(.53, .21, .29, .67);

    --default-transition-duration: .15s;

    --animate-spin:     spin 1s linear infinite;
    --animate-ping:     ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse:    pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-shimmer:  shimmer 2s linear infinite;
}

/* ============================================================================
 * §E  Z-index primitives
 * ========================================================================== */
:root {
    --z-index-1: 1;
    --z-index-2: 2;
    --z-index-3: 3;
    --z-index-5: 5;
}

/* ============================================================================
 * §F  MudBlazor palette mappings  (was the Mud bridge stylesheet §1)
 *
 * Maps the semantic tokens onto MudBlazor's --mud-palette-* CSS
 * variables. Centralised here so the design tokens stylesheet is the single home of
 * every CSS variable definition in the project — bridge / component files
 * only consume tokens, never define them.
 *
 * !important is required because MudThemeProvider injects the same CSS
 * variables at runtime from PaletteLight/PaletteDark in
 * BpAdminDashboardTheme.cs; source-order alone does not beat the runtime
 * inline rules.
 *
 * Theme propagation:
 *   data-theme-primary  → flips --color-primary-* in §5, which cascades into
 *                         --mud-palette-primary* below.
 *   data-theme-light    → flips --color-gray-* in §3, cascades into surfaces.
 *   data-theme-dark     → flips --color-dark-* in §4, cascades into dark
 *                         surfaces below.
 * ========================================================================== */

/* Light theme tokens. */
:root,
.mud-theme-default {
    --mud-palette-primary: var(--color-primary-600) !important;
    --mud-palette-primary-text: var(--color-white) !important;
    --mud-palette-primary-darken: var(--color-primary-700) !important;
    --mud-palette-primary-lighten: var(--color-primary-500) !important;
    --mud-palette-primary-hover: rgba(99, 102, 241, 0.08) !important;

    --mud-palette-tertiary: var(--color-primary-500) !important;
    --mud-palette-tertiary-text: var(--color-white) !important;
    --mud-palette-tertiary-darken: var(--color-primary-600) !important;
    --mud-palette-tertiary-lighten: var(--color-primary-400) !important;

    --mud-palette-secondary: var(--color-secondary) !important;
    --mud-palette-secondary-text: var(--color-white) !important;
    --mud-palette-secondary-darken: var(--color-secondary-darker) !important;
    --mud-palette-secondary-lighten: var(--color-secondary-light) !important;

    /* Semantic */
    --mud-palette-info: var(--color-info) !important;
    --mud-palette-info-text: var(--color-white) !important;
    --mud-palette-info-darken: var(--color-info-darker) !important;
    --mud-palette-info-lighten: var(--color-info-light) !important;

    --mud-palette-success: var(--color-success) !important;
    --mud-palette-success-text: var(--color-white) !important;
    --mud-palette-success-darken: var(--color-success-darker) !important;
    --mud-palette-success-lighten: var(--color-success-light) !important;

    --mud-palette-warning: var(--color-warning) !important;
    --mud-palette-warning-text: var(--color-white) !important;
    --mud-palette-warning-darken: var(--color-warning-darker) !important;
    --mud-palette-warning-lighten: var(--color-warning-light) !important;

    --mud-palette-error: var(--color-error) !important;
    --mud-palette-error-text: var(--color-white) !important;
    --mud-palette-error-darken: var(--color-error-darker) !important;
    --mud-palette-error-lighten: var(--color-error-light) !important;

    --mud-palette-background: var(--color-gray-50) !important;
    --mud-palette-background-gray: var(--color-gray-100) !important;
    --mud-palette-surface: var(--color-white) !important;

    /* Drawer / app bar */
    --mud-palette-drawer-background: var(--color-white) !important;
    --mud-palette-drawer-text: var(--color-gray-700) !important;
    --mud-palette-drawer-icon: var(--color-gray-600) !important;
    --mud-palette-appbar-background: var(--color-white) !important;
    --mud-palette-appbar-text: var(--color-gray-700) !important;

    /* Text */
    --mud-palette-text-primary: var(--color-gray-800) !important;
    --mud-palette-text-secondary: var(--color-gray-500) !important;
    --mud-palette-text-disabled: var(--color-gray-400) !important;

    /* Action / interactive surfaces */
    --mud-palette-action-default: var(--color-gray-600) !important;
    --mud-palette-action-default-hover: rgba(0, 0, 0, 0.04) !important;
    --mud-palette-action-disabled: var(--color-gray-400) !important;
    --mud-palette-action-disabled-background: var(--color-gray-150) !important;

    /* Lines, dividers, table chrome */
    --mud-palette-divider: var(--color-gray-200) !important;
    --mud-palette-divider-light: var(--color-gray-150) !important;
    --mud-palette-lines-default: var(--color-gray-200) !important;
    --mud-palette-lines-inputs: var(--color-gray-300) !important;
    --mud-palette-table-lines: var(--color-gray-200) !important;
    --mud-palette-table-striped: var(--color-gray-50) !important;
    --mud-palette-table-hover: var(--color-gray-100) !important;

    /* Overlay / scrim */
    --mud-palette-overlay-dark: rgba(0, 0, 0, 0.5) !important;
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.6) !important;

    /* Skeleton */
    --mud-palette-skeleton: var(--color-gray-150) !important;
}

/* Dark theme tokens. MudBlazor swaps to .mud-theme-dark on <body> when
   IsDarkMode toggles; we also key on html.dark to keep parity with the
   design JS bootstrap. */
.mud-theme-dark,
html.dark .mud-theme-default,
html.dark {
    --mud-palette-primary: var(--color-primary-500) !important;
    --mud-palette-primary-text: var(--color-white) !important;
    --mud-palette-primary-darken: var(--color-primary-600) !important;
    --mud-palette-primary-lighten: var(--color-primary-400) !important;
    --mud-palette-primary-hover: rgba(129, 140, 248, 0.12) !important;

    --mud-palette-tertiary: var(--color-primary-400) !important;
    --mud-palette-tertiary-darken: var(--color-primary-500) !important;
    --mud-palette-tertiary-lighten: var(--color-primary-300) !important;

    --mud-palette-secondary: var(--color-secondary-light) !important;
    --mud-palette-secondary-darken: var(--color-secondary) !important;
    --mud-palette-secondary-lighten: var(--color-secondary-lighter) !important;

    --mud-palette-info: var(--color-info-light) !important;
    --mud-palette-info-darken: var(--color-info) !important;
    --mud-palette-info-lighten: var(--color-info-lighter) !important;

    --mud-palette-success: var(--color-success-light) !important;
    --mud-palette-success-darken: var(--color-success) !important;
    --mud-palette-success-lighten: var(--color-success-lighter) !important;

    --mud-palette-warning: var(--color-warning-light) !important;
    --mud-palette-warning-darken: var(--color-warning) !important;
    --mud-palette-warning-lighten: var(--color-warning-lighter) !important;

    --mud-palette-error: var(--color-error-light) !important;
    --mud-palette-error-darken: var(--color-error) !important;
    --mud-palette-error-lighten: var(--color-error-lighter) !important;

    /* Surfaces flip with data-theme-dark (navy / mirage / mint / black / cinder) */
    --mud-palette-background: var(--color-dark-900) !important;
    --mud-palette-background-gray: var(--color-dark-800) !important;
    --mud-palette-surface: var(--color-dark-700) !important;

    --mud-palette-drawer-background: var(--color-dark-700) !important;
    --mud-palette-drawer-text: var(--color-dark-200) !important;
    --mud-palette-drawer-icon: var(--color-dark-300) !important;
    --mud-palette-appbar-background: var(--color-dark-800) !important;
    --mud-palette-appbar-text: var(--color-dark-200) !important;

    --mud-palette-text-primary: var(--color-dark-100) !important;
    --mud-palette-text-secondary: var(--color-dark-300) !important;
    --mud-palette-text-disabled: var(--color-dark-400) !important;

    --mud-palette-action-default: var(--color-dark-200) !important;
    --mud-palette-action-default-hover: rgba(255, 255, 255, 0.06) !important;
    --mud-palette-action-disabled: var(--color-dark-400) !important;
    --mud-palette-action-disabled-background: var(--color-dark-600) !important;

    --mud-palette-divider: var(--color-dark-500) !important;
    --mud-palette-divider-light: var(--color-dark-600) !important;
    --mud-palette-lines-default: var(--color-dark-500) !important;
    --mud-palette-lines-inputs: var(--color-dark-400) !important;
    --mud-palette-table-lines: var(--color-dark-500) !important;
    --mud-palette-table-striped: var(--color-dark-600) !important;
    --mud-palette-table-hover: var(--color-dark-600) !important;

    --mud-palette-overlay-dark: rgba(0, 0, 0, 0.7) !important;
    --mud-palette-overlay-light: rgba(0, 0, 0, 0.4) !important;

    --mud-palette-skeleton: var(--color-dark-600) !important;
}

/* ============================================================================
 * §G  Lead-status palette  (was avalme-v1.css §3.1)
 *
 * Domain palette for lead-status badges. Not theme tokens — these stay fixed
 * regardless of the user's theme picks. The HEX literals live here because
 * this is the token-definition layer for the feature; consumers (.av-color-*
 * in avalme-v1.css §3) reference them via var().
 *
 * Where possible we alias to a design primitive so a single change to the
 * primitive (e.g. blue-500's value) ripples through every status badge.
 * ========================================================================== */
:root {
    --av-status-purple: #667eea;
    --av-status-pink:   #ec4899;
    --av-status-blue:   var(--color-blue-500);
    --av-status-green:  var(--color-green-500);
    --av-status-orange: #f97316;
    --av-status-teal:   #14b8a6;
    --av-status-red:    #ef4444;
    --av-status-yellow: #eab308;
    --av-status-indigo: var(--color-indigo-500);
    --av-status-cyan:   #06b6d4;
}

/* ============================================================================
 * §H ─── AVALME BRAND THEME — `data-theme-brand="avalme"`
 * ----------------------------------------------------------------------------
 * Aplica el branding corporativo de AVALME 1:1 con el Brand Identity Manual
 * (Page 3 — Color, Typography & Visual Language). Activarlo seteando
 * `data-theme-brand="avalme"` en el <html> (lo gestiona avalme-theme.js +
 * el Theme Customizer Drawer).
 *
 * Cuando NO está activo, la app sigue exactamente igual que ahora: paleta
 * design default, primary picker normal (indigo/blue/etc.), Inter para todo.
 * Este bloque NO toca nada del default — solo añade un override scoped al
 * atributo.
 *
 * Orden de cascada: este bloque vive al FINAL del archivo y todas las
 * propiedades caen sobre los tokens globales y los `[data-theme-primary=…]`
 * overrides. Eso garantiza que cuando el brand Avalme está activo, el primary
 * color picker queda "dominado" por la paleta Avalme Blue (sin necesidad
 * de !important).
 *
 * Spec source: la imagen del manual del usuario (sesión actual). Los HEX son
 * verbatim del documento; el ramp 50-950 deriva del HEX base via HSL
 * lightness sweeps (las otras paletas Tailwind/design siguen la misma técnica).
 * ============================================================================ */
[data-theme-brand="avalme"] {

    --font-display: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;

    /* 500 es el HEX exacto del manual. Las otras tonalidades derivan en HSL
       conservando hue (217°) y saturation (100%), variando solo lightness. */
    --color-primary-50:  #EBF3FF;
    --color-primary-100: #C7DBFF;
    --color-primary-200: #94BBFF;
    --color-primary-300: #5C95FF;
    --color-primary-400: #2D7BFF;
    --color-primary-500: #0A6BFF;
    --color-primary-600: #0058D9;
    --color-primary-700: #0046B0;
    --color-primary-800: #003585;
    --color-primary-900: #00255E;
    --color-primary-950: #00153B;

    --av-brand-avalme-blue:      #0A6BFF;   /* primary actions, key highlights */
    --av-brand-deep-blue:        #0B1D3A;   /* headings, nav, structural elements */
    --av-brand-teal:             #00A3C7;   /* accent, supporting highlights, data viz */
    --av-brand-growth-green:     #25C16F;   /* success, progress, positive states */
    --av-brand-charcoal:         #111827;   /* body text, icons, dividers */
    --av-brand-soft-background:  #F6F8FA;   /* section backgrounds, surfaces */
    --av-brand-white:            #FFFFFF;   /* default canvas */

    /* Info → Teal (accent del manual). Success → Growth Green.
       Mantenemos warning/error en sus colores design porque el manual no los
       especifica explícitamente. */
    --color-info:           var(--av-brand-teal);
    --color-info-lighter:   #4DC4DD;
    --color-info-light:     #1AB2D5;
    --color-info-darker:    #007AA0;

    --color-success:         var(--av-brand-growth-green);
    --color-success-lighter: #5CD495;
    --color-success-light:   #3FCB80;
    --color-success-darker:  #1B9A56;

    /* El Charcoal del manual reemplaza al gray-800 default para el body
       text. El gray-50 se remapea a Soft Background para que el body bg
       — que es var(--color-gray-50) en el reset design — herede #F6F8FA
       sin que tengamos que overridear `body { background-color }` directo.
       Esto es clave para que el axis Card Skin siga funcionando: cuando el
       user elige "bordered", su regla `[data-card-skin="bordered"] body`
       puede ganar el body bg porque §H no compite directamente sobre body. */
    --color-gray-50:  var(--av-brand-soft-background);
    --color-gray-800: var(--av-brand-charcoal);
}

html.dark [data-theme-brand="avalme"],
[data-theme-brand="avalme"].dark,
html.dark[data-theme-brand="avalme"] {
    /* En dark mode los tokens primary-* siguen siendo los mismos (el ramp
       está derivado de un hue/sat constante, las lightness más altas dan
       buen contraste sobre dark surfaces). No hace falta override aquí. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   §I — TYPOGRAPHY SCALE (canonical, brand-agnostic)
   ─────────────────────────────────────────────────────────────────────────
   Single source of truth for typography in the app. Implements the table
   defined in UI Guidelines/STYLE_GUIDE_AVALME.md §3.3. Every
   `<MudText Typo="Typo.X">` renders the role-specific size / weight /
   line-height / tracking from this scale.

   MANDATORY rules for developers (also in CLAUDE.md):
     1. To set a text's typography, pick the right `Typo.X` on `<MudText>`.
        Do NOT write font-size / font-weight / line-height / letter-spacing
        in component-level CSS (av-*, bp-*, *-card, *-chip, etc.).
     2. Component classes only add color, margin, padding, transform,
        layout — never typography metrics.
     3. The scale is INVARIANT: `Typo.h5` always renders 18 / 26 / 600
        regardless of where it sits in the DOM.

   Exceptions (Mud renders these OUTSIDE `.mud-typography-*`):
     - Buttons → `.mud-button-label`. Handled by `av-btn` (§14.1 av-v1.css).
     - Avatars → `.mud-avatar`. Handled by `av-avatar` (§14.4).
     - Form inputs → `.mud-input-*`. Handled by mud-bridge.css safety net.

   Brand composition: when `data-theme-brand="avalme"` is active, §H above
   overrides the FONT-FAMILY of H1-H6 to Montserrat and the SIZES of H1-H3
   to the Brand Identity Manual values (48 / 32 / 22). H4-H6 sizes and all
   other roles stay identical to this scale.
   ═══════════════════════════════════════════════════════════════════════════ */

.mud-typography-h1 {
    font-family: var(--font-sans);
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}

.mud-typography-h2 {
    font-family: var(--font-sans);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
}

.mud-typography-h3 {
    font-family: var(--font-sans);
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
}

.mud-typography-h4 {
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.36;
    font-weight: 600;
    letter-spacing: 0;
}

.mud-typography-h5 {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.44;
    font-weight: 600;
    letter-spacing: 0;
}

.mud-typography-h6 {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0;
}

.mud-typography-subtitle1 {
    font-family: var(--font-sans);
    font-size: var(--text-sm-plus);    /* 15 px */
    line-height: 1.46;
    font-weight: 500;
    letter-spacing: 0;
}

.mud-typography-subtitle2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs-plus);    /* 13 px */
    line-height: 1.38;
    font-weight: 500;
    letter-spacing: 0;
}

.mud-typography-body1 {
    font-family: var(--font-sans);
    font-size: var(--text-sm);         /* 14 px */
    line-height: 1.43;
    font-weight: 400;
    letter-spacing: 0;
}

.mud-typography-body2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs-plus);    /* 13 px */
    line-height: 1.38;
    font-weight: 400;
    letter-spacing: 0;
}

.mud-typography-caption {
    font-family: var(--font-sans);
    font-size: var(--text-xs);         /* 12 px */
    line-height: 1.33;
    font-weight: 400;
    letter-spacing: 0;
}

.mud-typography-overline {
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.27;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mud-typography-button {
    font-family: var(--font-sans);
    font-size: var(--text-xs-plus);    /* 13 px */
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* §I.1 ── Form-control safety net (weight reset) ───────────────────────────
   MudBlazor reuses `.mud-typography-subtitle1` (and `.mud-typography-body1`)
   on the wrappers of input labels, selects, autocompletes, datepickers,
   numericfields, textareas, etc. The base scale above sets `subtitle1` to
   weight 500 (per STYLE_GUIDE_AVALME §3.3), which is correct for emphasis
   text — but bleeds into form-control surfaces and makes labels and typed
   values look bolder / darker than form fields should look.

   This block resets the weight to 400 (body weight) on every form-control
   surface. We do NOT touch `font-size` here — Mud handles input sizing via
   its own Density / Dense / Margin rules and our `[data-density="compact"]`
   overrides in `mud-bridge.css §2`. Color is also untouched (kept at gray-600
   / dark-200 via the existing §H "Components stay on Inter" block + Mud's
   default form-control color rules).

   Brand-agnostic: applies regardless of `data-theme-brand` so inputs feel
   identical under default brand and Avalme brand. */
.mud-input,
.mud-input-root,
.mud-input-input,
.mud-input-slot,
.mud-input-label,
.mud-input-helper-text,
.mud-input-control,
.mud-form-control,
.mud-select,
.mud-select-input,
.mud-autocomplete,
.mud-picker-input,
.mud-picker-input-button,
textarea {
    font-weight: 400;
}

[data-theme-brand="avalme"] h1,
[data-theme-brand="avalme"] .mud-typography-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: 0;
}

[data-theme-brand="avalme"] h2,
[data-theme-brand="avalme"] .mud-typography-h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: 0;
}

[data-theme-brand="avalme"] h3,
[data-theme-brand="avalme"] .mud-typography-h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0;
}

/* H4-H6: el manual solo define H1-H3, pero para evitar saltos visuales
   mantenemos Montserrat SemiBold con tamaños descendentes coherentes con
   la escala H3.

   `subtitle1` y `subtitle2` NO se incluyen acá aunque visualmente sean
   "near-headings" para MudBlazor: Mud reusa `.mud-typography-subtitle1`
   sobre el wrapper de MudTextField outlined (y otros componentes
   form-control) — si le aplicáramos Montserrat 600, los inputs cambiarían
   de fuente/peso bajo Avalme, lo cual NO queremos. Inputs / selects /
   buttons mantienen Inter siempre (ver bloque "Components stay on Inter"
   más abajo). */
[data-theme-brand="avalme"] h4,
[data-theme-brand="avalme"] h5,
[data-theme-brand="avalme"] h6,
[data-theme-brand="avalme"] .mud-typography-h4,
[data-theme-brand="avalme"] .mud-typography-h5,
[data-theme-brand="avalme"] .mud-typography-h6 {
    font-family: var(--font-display);
    font-weight: 600;
}

[data-theme-brand="avalme"] body,
[data-theme-brand="avalme"] .mud-application-layout,
[data-theme-brand="avalme"] .mud-typography-body1,
[data-theme-brand="avalme"] .mud-typography-body2 {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--av-brand-charcoal);
}

/* Dark counterpart REQUERIDO: el bloque anterior fuerza color charcoal (#111827)
   en body1/body2/body/application-layout con specificity (0,2,0). En dark mode
   eso deja todos los textos casi invisibles sobre fondo oscuro. Esta regla
   restablece los textos al token Mud --mud-palette-text-primary (= --color-dark-100
   en dark) cuando html.dark está activo. La selección de mud-text-secondary se
   delega al token Mud — los hijos con .mud-text-secondary heredan via la cascade
   de Mud y NO son tocados acá (solo body1/body2 raw quedan con text-primary). */
html.dark[data-theme-brand="avalme"] body,
html.dark [data-theme-brand="avalme"] body,
html.dark[data-theme-brand="avalme"] .mud-application-layout,
html.dark [data-theme-brand="avalme"] .mud-application-layout,
html.dark[data-theme-brand="avalme"] .mud-typography-body1,
html.dark [data-theme-brand="avalme"] .mud-typography-body1,
html.dark[data-theme-brand="avalme"] .mud-typography-body2,
html.dark [data-theme-brand="avalme"] .mud-typography-body2 {
    color: var(--mud-palette-text-primary);
}

/* mud-text-secondary debe ganar sobre body1/body2 default — si el consumer marca
   un body como secondary, queremos el color secondary. La cascade natural NO
   logra esto porque `.mud-typography-body2.mud-text-secondary` (0,2,0) empata
   con `[data-theme-brand="avalme"] .mud-typography-body2` (0,2,0) y gana la
   última declarada. Esta regla específica garantiza que secondary gane en dark. */
html.dark[data-theme-brand="avalme"] .mud-typography-body1.mud-text-secondary,
html.dark [data-theme-brand="avalme"] .mud-typography-body1.mud-text-secondary,
html.dark[data-theme-brand="avalme"] .mud-typography-body2.mud-text-secondary,
html.dark [data-theme-brand="avalme"] .mud-typography-body2.mud-text-secondary {
    color: var(--mud-palette-text-secondary);
}

[data-theme-brand="avalme"] body {
    font-size: 16px;
    line-height: 1.6;
}

html.dark [data-theme-brand="avalme"] body,
html.dark [data-theme-brand="avalme"] .mud-application-layout {
    color: var(--color-dark-100);
}

[data-theme-brand="avalme"] .mud-typography-caption,
[data-theme-brand="avalme"] small {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
}

[data-theme-brand="avalme"] .mud-typography-subtitle1,
[data-theme-brand="avalme"] .mud-typography-subtitle2,
[data-theme-brand="avalme"] .mud-typography-button,
[data-theme-brand="avalme"] .mud-input,
[data-theme-brand="avalme"] .mud-input-root,
[data-theme-brand="avalme"] .mud-input-input,
[data-theme-brand="avalme"] .mud-input-slot,
[data-theme-brand="avalme"] .mud-input-label,
[data-theme-brand="avalme"] .mud-input-helper-text,
[data-theme-brand="avalme"] .mud-input-control,
[data-theme-brand="avalme"] .mud-form-control,
[data-theme-brand="avalme"] .mud-select,
[data-theme-brand="avalme"] .mud-select-input,
[data-theme-brand="avalme"] .mud-autocomplete,
[data-theme-brand="avalme"] .mud-picker-input,
[data-theme-brand="avalme"] textarea,
[data-theme-brand="avalme"] .mud-button-root,
[data-theme-brand="avalme"] .mud-button-label,
[data-theme-brand="avalme"] .mud-icon-button,
[data-theme-brand="avalme"] .mud-chip,
[data-theme-brand="avalme"] .mud-checkbox,
[data-theme-brand="avalme"] .mud-radio,
[data-theme-brand="avalme"] .mud-switch,
[data-theme-brand="avalme"] .mud-checkbox .mud-typography,
[data-theme-brand="avalme"] .mud-radio .mud-typography,
[data-theme-brand="avalme"] .mud-switch .mud-typography,
[data-theme-brand="avalme"] .mud-menu-item,
[data-theme-brand="avalme"] .mud-list-item,
[data-theme-brand="avalme"] .mud-list-item-text,
[data-theme-brand="avalme"] .mud-tab,
[data-theme-brand="avalme"] .mud-tab-panel,
[data-theme-brand="avalme"] .mud-table,
[data-theme-brand="avalme"] .mud-table-cell {
    font-family: var(--font-sans);
}


/* ============================================================================
 * §J ─── DATATABLE TOKENS
 * ----------------------------------------------------------------------------
 * Tokens consumed by avalme-v1.css §38+ (.av-datagrid chrome — toolbar,
 * view-menu, etc.) and any future Mud-direct skin layer.
 *
 * Theme-aware: colors via existing semantic ramps (--color-gray-*,
 * --color-dark-*, --color-primary-*). The Avalme brand axis
 * (data-theme-brand=avalme) re-tints primary automatically.
 * ============================================================================ */
:root {
    /* ── Cell padding — NORMAL density ────────────────────────────── */
    --av-table-pad-x:           16px;
    --av-table-pad-x-sm:        20px;
    --av-table-pad-y:           16px;
    --av-table-head-pad-y:      16px;

    /* ── Cell padding — DENSE density (Row Dense toggle) ─────────── */
    --av-table-pad-x-dense:     12px;
    --av-table-pad-y-dense:     4px;
    --av-table-head-pad-y-dense: 12px;

    /* ── Frame ─────────────────────────────────────────────────── */
    --av-table-radius:          8px;

    /* ── Header text rhythm ──────────────────────────────────── */
    --av-table-head-size:       var(--text-xs);
    --av-table-head-weight:     600;
    --av-table-head-tracking:   0.025em;

    /* ── Body cell text rhythm ─────────────────────────────── */
    --av-table-cell-size:       var(--text-sm);

    /* ── Selected-row accent bar (3 px left, primary-500) ──── */
    --av-table-accent-w:        3px;
    --av-table-accent-tint:     rgb(from var(--color-primary-500) r g b / 0.10);
    --av-table-accent-tint-dark: rgb(from var(--color-primary-400) r g b / 0.16);

    /* ── Toolbar + Pagination chrome spacing ─────────────── */
    --av-table-chrome-pad-x:    16px;
    --av-table-chrome-pad-x-sm: 20px;
    --av-table-chrome-pad-y:    12px;
    --av-table-chrome-gap:      12px;

    /* ── Mask shapes (Guía Visual `mask is-X`) — usados por §31 av-avatar-squircle
        y §45 av-mask. Cada token es un data-URI SVG con viewBox propio; el
        consumidor aplica mask-size: contain para escalar al container.
        Copiados verbatim del demo de Guía Visual (components/mask) salvo
        squircle que mantiene el path original del proyecto (equivalente
        visual). Si en el futuro la Guía Visual agrega más shapes, se suman acá. ── */
    --av-squircle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,100 C0,0 0,0 100,0 C200,0 200,0 200,100 C200,200 200,200 100,200 C0,200 0,200 0,100 Z'/%3E%3C/svg%3E");
    --av-reuleaux-triangle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='207' height='207' fill='none' viewBox='0 0 207 207'%3E%3Cpath fill='%23000' d='M138.648 181.408C47.268 232.569 1.327 206.607.824 103.52.324.432 46.014-25.148 137.896 26.777c91.882 51.925 92.133 103.469.753 154.631h-.001z'/%3E%3C/svg%3E");
    --av-diamond-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='227' height='227' fill='none' viewBox='0 0 227 227'%3E%3Cpath fill='%23000' d='M42.71 42.71c-56.568 56.57-56.568 84.853 0 141.422 56.57 56.569 84.853 56.569 141.422 0s56.569-84.853 0-141.421c-56.569-56.569-84.853-56.569-141.421 0z'/%3E%3C/svg%3E");
    --av-hexagon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='182' height='201' fill='none' viewBox='0 0 182 201'%3E%3Cpath fill='%23000' d='M.3 65.486c0-9.196 6.687-20.063 14.211-25.078l61.86-35.946c8.36-5.016 20.899-5.016 29.258 0l61.86 35.946c8.36 5.015 14.211 15.882 14.211 25.078v71.055c0 9.196-6.687 20.063-14.211 25.079l-61.86 35.945c-8.36 4.18-20.899 4.18-29.258 0l-61.86-35.945C6.151 157.44.3 145.737.3 136.54V65.486z'/%3E%3C/svg%3E");
    --av-octagon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='198' height='198' fill='none' viewBox='0 0 198 198'%3E%3Cpath fill='%23000' d='M91.346 2.17a20 20 0 0115.308 0l55.403 22.95a20 20 0 0110.824 10.823l22.949 55.403a20.004 20.004 0 010 15.308l-22.949 55.403a20.006 20.006 0 01-10.824 10.824l-55.403 22.949a20.004 20.004 0 01-15.308 0l-55.403-22.949a20 20 0 01-10.824-10.824L2.17 106.654a20 20 0 010-15.308l22.95-55.403a20 20 0 0110.823-10.824L91.346 2.17z'/%3E%3C/svg%3E");
    --av-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' viewBox='0 0 180 180'%3E%3Cpath fill='%23000' d='M82.39 2.111a14 14 0 0114.568 0l10.401 6.337a14 14 0 007.613 2.04l12.176-.287a14.003 14.003 0 0112.616 7.283l5.839 10.688a14.005 14.005 0 005.573 5.574l10.688 5.84a14.001 14.001 0 017.284 12.615l-.287 12.175a14.004 14.004 0 002.04 7.614l6.336 10.4a14 14 0 010 14.568l-6.336 10.401a14 14 0 00-2.04 7.613l.287 12.176a14.002 14.002 0 01-7.284 12.616l-10.688 5.839a14.005 14.005 0 00-5.573 5.573l-5.839 10.688a14.003 14.003 0 01-12.616 7.284l-12.176-.287a14 14 0 00-7.613 2.04l-10.401 6.336a13.998 13.998 0 01-14.567 0l-10.401-6.336a14.004 14.004 0 00-7.614-2.04l-12.175.287a13.994 13.994 0 01-12.616-7.284l-5.84-10.688a14.004 14.004 0 00-5.573-5.573l-10.688-5.839a14.001 14.001 0 01-7.283-12.616l.287-12.176a14 14 0 00-2.04-7.613L2.11 96.958a14 14 0 010-14.567L8.448 71.99a14 14 0 002.04-7.614L10.2 52.201a13.998 13.998 0 017.283-12.616l10.688-5.84a14 14 0 005.574-5.573l5.84-10.688A14 14 0 0152.2 10.201l12.175.287a14 14 0 007.614-2.04l10.4-6.337h.001z'/%3E%3C/svg%3E");
    --av-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='185' fill='none' viewBox='0 0 200 185'%3E%3Cpath fill='%23000' d='M100 184.606a15.382 15.382 0 01-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 004.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.388 15.388 0 01-8.653 2.673z'/%3E%3C/svg%3E");
}