/* =====================================================================
   orbis-skin.css — ORBIS-SKIN
   Lenguaje visual "Orbis" definido por el área de diseño (jul 2026):
   light-first, tinta #0A0A0A + verde de marca #16A34A, tipografía
   Archivo (+ Newsreader itálica como acento editorial), radios 9-20px,
   sombras bajas y difusas. Sucesor de shadcn-skin.css, que se BORRÓ en la
   oleada 8 de limpieza (jul 2026) una vez completado el rediseño de las 73
   pantallas; si se necesitara, está en el historial de git. Este archivo se
   carga al FINAL de todos los CSS y redefine los VALORES de los tokens
   --mt-* sin tocar materio-theme.css ni mt.css.

   Notas de arquitectura (heredadas del skin shadcn):
   - Los tokens LIGHT se declaran DOS veces: en :root (nuevo default)
     y en html[data-theme="light"]. Esto es intencional: los bloques
     legacy html[data-theme="light"] de materio-theme.css, mt.css y
     tareas-calendario.css tienen especificidad 0,1,1 y ganarían a un
     :root (0,1,0) aunque este archivo cargue después. Duplicar el
     bloque con la misma especificidad + orden de carga posterior los
     neutraliza sin editarlos.
   - html[data-theme="dark"] CONSERVA la paleta zinc del skin anterior
     (decisión jul-2026: el lenguaje Orbis es light-first; un dark de
     marca se diseñará, si se pide, como fase posterior). Por eso S2 y
     S4b siguen intactas.
   - Radius: controles 10px · tarjetas 12px · dialogs 16px · píldoras 20px.
   ===================================================================== */

/* ================================================================
   S0. TIPOGRAFÍA SELF-HOSTED — Archivo (variable 100-900) para UI y
   Newsreader itálica (variable) como acento editorial en títulos.
   woff2 en wwwroot/fonts/ (subsets latin + latin-ext).
   ================================================================ */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/Archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/Archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/Archivo-Italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/Archivo-Italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/Newsreader-Italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/Newsreader-Italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ================================================================
   S1. TOKENS LIGHT (default) — lenguaje Orbis: tinta + verde marca
   ================================================================ */
:root,
html[data-theme="light"] {
    /* ── Tipografía (pisa el Inter de materio-theme.css) ─────── */
    --mt-font:             'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mt-font-serif:       'Newsreader', Georgia, serif;

    /* ── Primary = tinta #0A0A0A (botones negros) ─────────────── */
    --mt-primary:          #0A0A0A;
    --mt-primary-rgb:      10, 10, 10;
    --mt-primary-hover:    #26262B;
    --mt-primary-active:   #3A3A40;
    --mt-primary-light:    rgba(10, 10, 10, 0.08);
    --mt-primary-subtle:   rgba(10, 10, 10, 0.04);
    --mt-cal-work-band:    rgba(15, 17, 21, 0.04);
    --mt-on-primary:       #FFFFFF; /* texto claro sobre primario oscuro */

    --mt-secondary:        #6A6E76;
    --mt-secondary-rgb:    106, 110, 118;
    --mt-secondary-light:  rgba(106, 110, 118, 0.14);
    --mt-secondary-subtle: rgba(106, 110, 118, 0.07);

    /* ── Semánticos (tonos tailwind-600, look shadcn) ────────── */
    --mt-success:          #16A34A;
    --mt-success-rgb:      22, 163, 74;
    --mt-success-hover:    #15803D;
    --mt-success-light:    rgba(22, 163, 74, 0.12);
    --mt-success-subtle:   rgba(22, 163, 74, 0.06);

    --mt-info:             #2563EB;
    --mt-info-rgb:         37, 99, 235;
    --mt-info-hover:       #1D4ED8;
    --mt-info-light:       rgba(37, 99, 235, 0.12);
    --mt-info-subtle:      rgba(37, 99, 235, 0.06);

    --mt-warning:          #D97706;
    --mt-warning-rgb:      217, 119, 6;
    --mt-warning-hover:    #B45309;
    --mt-warning-light:    rgba(217, 119, 6, 0.12);
    --mt-warning-subtle:   rgba(217, 119, 6, 0.06);

    --mt-danger:           #DC2626;
    --mt-danger-rgb:       220, 38, 38;
    --mt-danger-hover:     #B91C1C;
    --mt-danger-light:     rgba(220, 38, 38, 0.12);
    --mt-danger-subtle:    rgba(220, 38, 38, 0.06);

    --mt-accent-error:     #DC2626;
    --mt-accent-success:   #16A34A;

    /* ── Acentos de marca Orbis (tokens nuevos) ──────────────── */
    --mt-purple:           #7C3AED;
    --mt-purple-rgb:       124, 58, 237;
    --mt-purple-light:     rgba(124, 58, 237, 0.12);
    --mt-teal:             #0D9488;
    --mt-teal-rgb:         13, 148, 136;
    --mt-teal-light:       rgba(13, 148, 136, 0.12);
    --mt-amy:              var(--mt-teal); /* identidad IA */
    --mt-gradient-hero:    linear-gradient(135deg, #0F1115, #20242C);
    --mt-gradient-brand:   linear-gradient(135deg, #16A34A, #0D9488);

    /* ── Colores base ────────────────────────────────────────── */
    --mt-dark:             #0F1115;
    --mt-dark-rgb:         15, 17, 21;
    --mt-black:            #0A0A0A;
    --mt-white:            #fff;
    --mt-light:            #E4E4E7;
    --mt-light-rgb:        228, 228, 231;

    /* ── Escala de grises = zinc 50→900 (asc. hacia texto) ───── */
    --mt-gray-25:          #FAFAFA;
    --mt-gray-50:          #F4F4F5;
    --mt-gray-100:         #E4E4E7;
    --mt-gray-200:         #D4D4D8;
    --mt-gray-300:         #B5B5BD;
    --mt-gray-400:         #A1A1AA;
    --mt-gray-500:         #71717A;
    --mt-gray-600:         #52525B;
    --mt-gray-700:         #3F3F46;
    --mt-gray-800:         #27272A;
    --mt-gray-900:         #18181B;

    /* ── Superficies: app gris #F4F5F7, tarjetas blancas ─────── */
    /* Inversión clave del lenguaje Orbis: el lienzo de la app es gris
       suave y las superficies (cards, tablas, modales, sidebar) son
       blancas con borde translúcido — las tarjetas se delimitan solas. */
    --mt-body-bg:          #F4F5F7;
    --mt-body-color:       #34363B;
    --mt-paper-bg:         #FFFFFF;
    --mt-heading-color:    #0A0A0A;
    --mt-muted-color:      #8A8F98;
    --mt-border-color:     rgba(15, 17, 21, 0.08);
    --mt-border-color-translucent: rgba(15, 17, 21, 0.08);
    --mt-divider-color:    rgba(15, 17, 21, 0.08);

    /* ── Campos (tokens nuevos, guía Orbis) ──────────────────── */
    --mt-input-border:     rgba(15, 17, 21, 0.14);
    --mt-input-height:     40px;
    --mt-label-color:      #8A8F98;

    /* ── Ring: foco verde de marca ───────────────────────────── */
    --mt-ring:             #16A34A;
    --mt-ring-shadow:      0 0 0 4px rgba(22, 163, 74, 0.12);

    /* ── Border radius (campos/botones 9-11 · tarjetas 12-16 ·
         píldoras 20) ───────────────────────────────────────────── */
    --mt-radius-xs:        0.375rem;  /* 6px  */
    --mt-radius-sm:        0.5rem;    /* 8px  */
    --mt-radius:           0.625rem;  /* 10px */
    --mt-radius-lg:        0.75rem;   /* 12px */
    --mt-radius-xl:        1rem;      /* 16px */
    --mt-radius-xxl:       1.25rem;   /* 20px */

    /* ── Sombras bajas y difusas (guía Orbis) ────────────────── */
    --mt-shadow-xs:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --mt-shadow-sm:        0 8px 24px -18px rgba(0, 0, 0, 0.4);
    --mt-shadow:           0 12px 32px -22px rgba(0, 0, 0, 0.4);
    --mt-shadow-base:      var(--mt-shadow); /* alias: varias páginas Orbis lo referencian */
    --mt-shadow-lg:        0 20px 60px -30px rgba(0, 0, 0, 0.4);
    --mt-shadow-xl:        0 30px 70px -28px rgba(0, 0, 0, 0.45);
    --mt-shadow-inset:     inset 0 1px 2px rgba(0, 0, 0, 0.04);

    /* ── Stripes calendario ──────────────────────────────────── */
    --mt-stripe-bg:        rgba(9, 9, 11, 0.03);
    --mt-stripe-line:      rgba(9, 9, 11, 0.15);

    /* ── Chrome (tarjeta única topbar+sidebar+contenido) = blanco ── */
    --mt-chrome-bg:        #FFFFFF;

    /* ── Rail de módulos: superficie tinta fija (marca, ambos temas) ── */
    --mt-rail-bg:          #0F1115;
    --mt-rail-fg:          rgba(255, 255, 255, 0.78);
    --mt-rail-muted:       rgba(255, 255, 255, 0.52);
    --mt-rail-hover:       rgba(255, 255, 255, 0.07);
    --mt-rail-active:      rgba(255, 255, 255, 0.10);

    /* ── Sidebar: superficie blanca, activo = verde de marca ── */
    --mt-sidebar-bg:       #FFFFFF;
    --mt-sidebar-bg2:      #FFFFFF;
    --mt-sidebar-text:     #34363B;
    --mt-sidebar-text-hover: #0A0A0A;
    --mt-sidebar-active:   var(--mt-success);
    --mt-sidebar-active-bg: rgba(22, 163, 74, 0.10);
    --mt-sidebar-divider:  rgba(15, 17, 21, 0.08);
    --mt-sidebar-icon:     #8A8F98;
    --mt-topbar-bg:        var(--mt-paper-bg);
    --mt-topbar-text:      var(--mt-heading-color);
    --mt-topbar-border:    var(--mt-border-color);

    /* ── Pastel tints legacy → muertos (gradient invisible) ──── */
    --mt-pastel-lavender:  transparent;
    --mt-pastel-peach:     transparent;
    --mt-pastel-mint:      transparent;
    --mt-pastel-sky:       transparent;

    /* ── Bridge de auth: brand panel en tinta Orbis ──────────── */
    --c-brand-accent:      rgba(10, 10, 10, 0.55);
    --c-brand-dim:         rgba(10, 10, 10, 0.40);

    /* ── FluentUI: texto sobre botón accent (primary oscuro) ─── */
    --foreground-on-accent-rest: #FFFFFF;
    --foreground-on-accent-hover: #FFFFFF;
    --foreground-on-accent-active: #FFFFFF;
}

/* ================================================================
   S2. TOKENS DARK — zinc dark de shadcn/ui
   (selector nuevo: el dark legacy vivía en :root, sin conflictos)
   ================================================================ */
html[data-theme="dark"] {
    /* ── Primary = casi blanco (botones blancos, texto oscuro) ─ */
    --mt-primary:          #FAFAFA;
    --mt-primary-rgb:      250, 250, 250;
    --mt-primary-hover:    #E4E4E7;
    --mt-primary-active:   #D4D4D8;
    --mt-primary-light:    rgba(250, 250, 250, 0.10);
    --mt-primary-subtle:   rgba(250, 250, 250, 0.05);
    --mt-cal-work-band:    rgba(255, 255, 255, 0.04);
    --mt-on-primary:       #18181B; /* texto oscuro sobre primario casi blanco */

    --mt-secondary:        #A1A1AA;
    --mt-secondary-rgb:    161, 161, 170;
    --mt-secondary-light:  rgba(161, 161, 170, 0.14);
    --mt-secondary-subtle: rgba(161, 161, 170, 0.07);

    /* ── Semánticos (tonos -400/500, contraste sobre oscuro) ─── */
    --mt-success:          #22C55E;
    --mt-success-rgb:      34, 197, 94;
    --mt-success-hover:    #16A34A;
    --mt-success-light:    rgba(34, 197, 94, 0.15);
    --mt-success-subtle:   rgba(34, 197, 94, 0.08);

    --mt-info:             #3B82F6;
    --mt-info-rgb:         59, 130, 246;
    --mt-info-hover:       #2563EB;
    --mt-info-light:       rgba(59, 130, 246, 0.15);
    --mt-info-subtle:      rgba(59, 130, 246, 0.08);

    --mt-warning:          #FBBF24;
    --mt-warning-rgb:      251, 191, 36;
    --mt-warning-hover:    #F59E0B;
    --mt-warning-light:    rgba(251, 191, 36, 0.15);
    --mt-warning-subtle:   rgba(251, 191, 36, 0.08);

    --mt-danger:           #EF4444;
    --mt-danger-rgb:       239, 68, 68;
    --mt-danger-hover:     #DC2626;
    --mt-danger-light:     rgba(239, 68, 68, 0.15);
    --mt-danger-subtle:    rgba(239, 68, 68, 0.08);

    --mt-accent-error:     #EF4444;
    --mt-accent-success:   #22C55E;

    /* ── Colores base (siguen siendo "oscuros" — los usan chips
         y fondos navy; el legacy light tampoco los invertía) ─── */
    --mt-dark:             #27272A;
    --mt-dark-rgb:         39, 39, 42;
    --mt-black:            #09090B;
    --mt-white:            #fff;
    --mt-light:            #27272A;
    --mt-light-rgb:        39, 39, 42;

    /* ── Escala de grises (superficies asc. hacia texto) ─────── */
    --mt-gray-25:          #111113;
    --mt-gray-50:          #1C1C1F;
    --mt-gray-100:         #232327;
    --mt-gray-200:         #27272A;
    --mt-gray-300:         #3F3F46;
    --mt-gray-400:         #52525B;
    --mt-gray-500:         #71717A;
    --mt-gray-600:         #A1A1AA;
    --mt-gray-700:         #D4D4D8;
    --mt-gray-800:         #E4E4E7;
    --mt-gray-900:         #FAFAFA;

    /* ── Superficies ─────────────────────────────────────────── */
    --mt-body-bg:          #09090B;
    --mt-body-color:       #D4D4D8;
    --mt-paper-bg:         #18181B;
    --mt-heading-color:    #FAFAFA;
    --mt-muted-color:      #A1A1AA;
    --mt-border-color:     #27272A;
    --mt-border-color-translucent: rgba(255, 255, 255, 0.10);
    --mt-divider-color:    #27272A;

    --mt-ring:             #71717A;
    --mt-ring-shadow:      0 0 0 3px rgba(250, 250, 250, 0.12);

    /* ── Sombras: mismas que light (el borde hace el trabajo) ── */
    --mt-shadow-xs:        0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --mt-shadow-sm:        0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --mt-shadow:           0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --mt-shadow-base:      var(--mt-shadow); /* alias: varias páginas Orbis lo referencian */
    --mt-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
    --mt-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --mt-shadow-inset:     inset 0 1px 2px rgba(0, 0, 0, 0.2);

    --mt-stripe-bg:        rgba(255, 255, 255, 0.03);
    --mt-stripe-line:      rgba(255, 255, 255, 0.14);

    /* ── Sidebar ─────────────────────────────────────────────── */
    --mt-sidebar-bg:       #18181B;
    --mt-sidebar-bg2:      #18181B;
    --mt-sidebar-text:     #A1A1AA;
    --mt-sidebar-text-hover: #FAFAFA;
    --mt-sidebar-active:   var(--mt-primary);
    --mt-sidebar-active-bg: #27272A;
    --mt-sidebar-divider:  rgba(255, 255, 255, 0.10);
    --mt-sidebar-icon:     #71717A;
    --mt-topbar-bg:        var(--mt-paper-bg);
    --mt-topbar-text:      var(--mt-heading-color);
    --mt-topbar-border:    var(--mt-border-color);

    --mt-pastel-lavender:  transparent;
    --mt-pastel-peach:     transparent;
    --mt-pastel-mint:      transparent;
    --mt-pastel-sky:       transparent;

    --c-brand-accent:      rgba(250, 250, 250, 0.55);
    --c-brand-dim:         rgba(250, 250, 250, 0.40);

    /* ── FluentUI: primary claro → texto oscuro sobre accent ─── */
    --foreground-on-accent-rest: #18181B;
    --foreground-on-accent-hover: #18181B;
    --foreground-on-accent-active: #18181B;
}

/* ── ORBIS-SKIN: tokens nuevos que en dark necesitan valor propio.
     (El resto de tokens nuevos — teal, purple, gradientes, serif —
     valen igual en ambos temas y viven solo en S1/:root.) ── */
html[data-theme="dark"] {
    --mt-input-border:     rgba(255, 255, 255, 0.12);
    --mt-label-color:      #A1A1AA;
    /* chrome de la tarjeta única: en dark sigue el paper zinc (S1 lo puso
       blanco en :root y aquí hay que devolverlo) */
    --mt-chrome-bg:        #18181B;
}

/* ================================================================
   S3. NEUTRALIZACIÓN DE COSMÉTICA LEGACY
   ================================================================ */

/* Gradient pastel del light legacy (materio-theme.css:2109-2136).
   Las vars pastel ya son transparent; esto lo hace explícito. */
html[data-theme="light"] .ml-content,
html[data-theme="light"] .mt-shell,
html[data-theme="light"] .pl-shell,
html[data-theme="light"] .pr-shell,
html[data-theme="light"] .ta-shell,
html[data-theme="light"] .te-shell,
html[data-theme="light"] .bj-shell {
    background-image: none;
}

/* Hack dark de checkboxes (mt.css): innecesario con accent-color */
html[data-theme="dark"] input[type="checkbox"]:not(:checked) {
    filter: none;
}

/* El light por default también necesita el undo del filter dark,
   por si el atributo data-theme aún no se aplicó (pre-script) */
input[type="checkbox"]:not(:checked) {
    filter: none !important;
}

/* Sidebar light necesita borde de separación (antes solo en light legacy) */
.ml-sidebar {
    border-right: 1px solid var(--mt-sidebar-divider);
}

/* ================================================================
   S4. FORMA — réplica de componentes shadcn/ui
   ================================================================ */

/* ── Fuente por defecto del body: el reboot.css de FluentUI carga
     después de materio-theme y pisa su body { font-family } con
     Segoe UI; este archivo carga al FINAL y lo devuelve a Archivo ── */
body {
    font-family: var(--mt-font);
}

/* ── Tipografía: tracking-tight en headings ──────────────────── */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em;
}

/* ── Focus ring (pisa mt.css:1761) ───────────────────────────── */
input:focus, textarea:focus, select:focus {
    border-color: var(--mt-ring) !important;
    box-shadow: var(--mt-ring-shadow) !important;
    outline: none;
}

/* ── Inputs: fondo blanco/transparente como shadcn (mt.css los
     pinta con gray-50) ─────────────────────────────────────────── */
input, textarea, select,
.form-control, .form-select {
    background-color: var(--mt-paper-bg) !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: #1C1C1F !important;
}

/* ── Cards: borde 1px + sombra mínima + radius 12px ──────────── */
.card,
.bj-table-card, .bj-card, .asb-filter-card {
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius-lg) !important;
    box-shadow: var(--mt-shadow-xs) !important;
}
/* Dialogs/modales: radius 16px + sombra difusa grande (guía Orbis) */
.modal-content {
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius-xl) !important;
    box-shadow: var(--mt-shadow-lg) !important;
}

/* ── Botones bandeja: peso 500, sin glow violeta ─────────────── */
.bj-btn-new {
    box-shadow: var(--mt-shadow-xs) !important;
    font-weight: 500 !important;
}
.bj-btn-detail {
    border-color: var(--mt-border-color) !important;
    color: var(--mt-heading-color) !important;
    font-weight: 500 !important;
}
.bj-btn-detail:hover {
    background: var(--mt-gray-50) !important;
}

/* ── FluentUI: radius de controles y dialogs ─────────────────── */
:root {
    --control-corner-radius: 10;
    --layer-corner-radius: 16;
}
fluent-dialog::part(control) {
    border-radius: var(--mt-radius-xl) !important;
    box-shadow: var(--mt-shadow-lg) !important;
}
fluent-dialog::part(overlay) {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
}

/* ── Scrollbars: thumb pill, track invisible ─────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #D4D4D8;
    border-radius: 999px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3F3F46;
}

/* ── Tablas: thead estilo shadcn ─────────────────────────────── */
th {
    font-weight: 500 !important;
}

/* ================================================================
   S4b. CONTRASTE EN DARK — primary es casi blanco; toda regla que
   asume "texto blanco sobre fondo primary" se invierte aquí.
   Lista generada por scan de background:var(--mt-primary) +
   color:#fff en los 123 .razor.css y CSS globales (jun 2026).
   ================================================================ */
html[data-theme="dark"] :is(
    .aa-emp-avatar, .act-btn-primary, .am-badge-count, .am-hijo-card__num,
    .am-hijo-doc:hover, .amy-avatar, .amy-cta, .ar-avatar, .ar-avatar-initials,
    .ar-btn-primary, .ar-btn--primary, .auth-btn-primary, .bj-btn-detail:hover,
    .bj-btn-new, .bj-btn-primary, .bj-btn-share, .bs-cta, .btn-activo,
    .cal2-btn-nueva, .cal2-btn--primary, .cal2-join, .cal-btn-new,
    .cdlg-btn-save, .cfdlg-btn-save, .cl-btn-primary, .cmd-btn-save,
    .cn-print-btn, .com-avatar, .com-btn--primary, .com-nav__link:hover,
    .cv-chip.is-active, .dh-count, .dh-dlg-btn--primary, .dh-grupo.active,
    .dlg-btn--primary, .dlg-body.dlg-tareas .dlg-btn--primary, .dm-btn-new,
    .dmdlg-btn-save, .dpb__day--sel, .ds-btn--primary, .dvac-back-btn:hover,
    .edd-btn-save, .edd-score-btn.active, .ep-hijo__badge, .ep-rank-avatar,
    .ep-rank-you, .ep-strip__mini-avatar, .ep-strip__you, .ep-toggle__btn.is-on,
    .eu-back-btn:hover, .eu-btn--primary, .f360-btn--primary,
    .fpe-avatar-initials, .fpe-back-btn:hover, .fv-btn--primary,
    .ga-btn--primary, .ga-mode__btn.is-active, .gt-bar--en_progreso,
    .iad-btn--primary, .idlg-btn-save, .inc-btn-new, .ind-btn--primary,
    .iv-btn--primary, .iv-step__num, .mm-btn-primary, .mm-btn--primary,
    .mt-badge-primary, .mt-btn-primary, .mt-btn--close-confirm,
    .mt-btn--export, .mt-btn--resume, .mt-btn--save, .mt-btn--start,
    .mt-btn-label-primary:hover, .mt-btn-outline-primary:hover,
    .mt-dbn--today, .mt-page-link.active, .mt-quickadd__save,
    .mt-tabs-pill .mt-tab.active, .ns-btn--primary, .pd-avatar,
    .pd-btn--add:hover:not(:disabled), .pd-btn--primary,
    .pdd-estado-btn.active, .pdd-mini-btn, .pep-btn--primary, .pep-stat-cta,
    .pep-tab__badge, .per-avatar-initials, .per-filtro-btn.active,
    .pl-btn--add, .pl-btn--primary, .pr-btn--primary, .ptlp-filtro.active,
    .pub-submit, .pu-btn-primary, .pud-btn-primary, .rep-btn-primary,
    .rep-pager-btn--active, .req-filtro-btn.active, .rp-btn--primary,
    .rpt-apply-btn, .rpt-emp-avatar, .rsd-btn-approve,
    .sel-applicants__avatar, .sel-dash__btn--primary, .sel-iv__join,
    .ta-btn--assign, .ta-btn--export, .ta-btn--primary, .te-btn--export,
    .tr-avatar--fallback, .tr-btn--primary, .trd-btn--primary,
    .vac-card-btn--primary, .vac-filtro-btn.active, .vf-add:hover,
    .vf-back-btn:hover, .vp-btn--primary, .zd-btn-primary, .zn-btn-primary
) {
    color: #18181B !important;
}
html[data-theme="dark"] :is(.pr-tab, .ta-tab, .te-tab).is-active,
html[data-theme="dark"] .per-card:hover .per-card-btn {
    color: #18181B !important;
}

/* Clases de <style> inline en .razor (no cubiertas por el scan de
   .razor.css): avatares del layout, botones de dialogs/marcación */
html[data-theme="dark"] :is(
    .ml-avatar-circle, .ml-user-head-avatar,
    .ml-mobile-action.is-active .ml-mobile-action__icon,
    .emd-btn-save, .rd-btn-save, .map-btn-confirm, .marc-geo-btn,
    .ep-photo__btn, .ep-btn--next:hover:not(:disabled), .ud-avatar
) {
    color: #18181B !important;
}

/* Adición jun-2026: clases de los módulos Comercial y Vacaciones creadas
   DESPUÉS del scan original. Mismo motivo que S4b: fondo var(--mt-primary)
   (casi blanco en dark) con texto/icono #fff que quedaba invisible
   (toggles Lista/Calendario, número del día de hoy, avatares de iniciales,
   logos de empresa/grupo, botones primary).
   NOTA: .hx-tl__dot se OMITE a propósito — su fondo lo fija --ev (color por
   tipo de evento: verde/azul/rojo/ámbar/violeta/teal), no primary, y forzar
   texto oscuro rompería los puntos de color de la línea de tiempo. */
html[data-theme="dark"] :is(
    .ag-view.is-active, .ag-cell.is-today .ag-cell__num,
    .nt-view.is-active, .nt-btn--primary, .nt-avatar--ini,
    .kb-btn--primary, .kb-avatar, .dc-btn--primary,
    .ge-btn--primary, .ge-logo, .ed-logo,
    .hx-avatar--ini, .hx-ic,
    .cv-vista.is-active, .cv-dia.is-hoy .cv-dia__num,
    .av-chip.is-active, .av-btn--primary,
    .mv-btn-primary, .pv-btn--primary, .pv-accion--primary, .rv-btn--primary
) {
    color: #18181B !important;
}

/* ================================================================
   S5. FIXES PUNTUALES DE HEX HARDCODED
   Violetas vivos en <style> inline de páginas (los <style> de
   componente se inyectan en <body> y ganarían por orden; se pisa
   con especificidad html + !important donde hace falta).
   Los colores en C# (charts, Excel, SVG de logs) quedan fuera del
   alcance CSS — limitación documentada del experimento.
   ================================================================ */

/* Marcación de asistencia: tokens locales --marc-* */
html .marc-page {
    --marc-navy:  var(--mt-dark);
    --marc-navy2: var(--mt-paper-bg);
    --marc-blue:  var(--mt-primary);
}
html .marc-geo-btn:hover {
    background: var(--mt-primary-hover) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}

/* Ficha de empleado / usuario: tokens locales .ep-shell */
html .ep-shell {
    --navy:     var(--mt-dark);
    --navy-2:   var(--mt-gray-300);
    --blue:     var(--mt-primary);
    --blue-2:   var(--mt-primary-hover);
    --blue-mid: var(--mt-gray-300);
}

/* Dashboard Home: chips de iconos y notificaciones violeta */
html .hw-icon--purple {
    background: var(--mt-primary-light) !important;
    color: var(--mt-primary) !important;
}
html .hw-icon--navy {
    background: var(--mt-secondary-light) !important;
    color: var(--mt-secondary) !important;
}
html .hw-notif-indicator {
    background: var(--mt-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--mt-primary-rgb), 0.12) !important;
}
html .hw-notif-footer {
    color: var(--mt-primary) !important;
}

/* Botones save de dialogs con hover violeta hardcoded */
html .emd-btn-save:hover,
html .rd-btn-save:hover,
html .map-btn-confirm:hover:not(:disabled) {
    background: var(--mt-primary-hover) !important;
    border-color: var(--mt-primary-hover) !important;
}

/* Dialog suscripciones de rol: accent hover local */
html .srd-shell, html [class*="srd-"] {
    --srd-accent-dark: var(--mt-primary-hover);
}

/* Login: el logo se blanqueaba con invert(1) para el panel dark
   original; en light va en negro monocromo */
html[data-theme="light"] .auth-logo-img {
    filter: brightness(0);
    opacity: 0.9;
}

/* ================================================================
   S6. PANEL CONTEXTUAL — estilo Orbis (mockup 26a del rediseño)
   El árbol del menú (MenuItem.razor; estilos base inline en
   MainLayout.razor) se re-viste aquí: filas icono+texto, sección
   abierta en peso 600 con chevron verde, hoja activa como PÍLDORA
   DE TINTA con barra verde a la izquierda. Prefijo `html` para
   ganar a los estilos inline de MainLayout (van después en el
   documento y empatarían en especificidad). Aplica al panel de
   escritorio (.ml-sidebar) y al sheet móvil (.ml-mobile-sheet),
   que comparten las clases nav-*.
   ================================================================ */

/* ── Filas (padres y hojas, todas las profundidades) ─────────── */
html :is(.ml-sidebar, .ml-mobile-sheet) :is(.nav-parent, .nav-leaf) {
    border-radius: var(--mt-radius);
    font-size: 0.855rem;
    font-weight: 500;
}
html :is(.ml-sidebar, .ml-mobile-sheet) :is(.nav-parent, .nav-leaf):hover {
    background: var(--mt-gray-50);
    color: var(--mt-heading-color);
}

/* Sección raíz abierta: peso 600 y chevron verde */
html :is(.ml-sidebar, .ml-mobile-sheet) .nav-group.is-open > .nav-parent:not(.nav-parent--nested) {
    color: var(--mt-heading-color);
    font-weight: 600;
}
html :is(.ml-sidebar, .ml-mobile-sheet) .nav-group.is-open > .nav-parent .nav-parent__chevron {
    color: var(--mt-success);
    opacity: 1;
}

/* ── Guía de hijos: línea continua sutil, sin stubs por ítem ── */
html .ml-sidebar .nav-children::before {
    background: var(--mt-sidebar-divider);
}
html :is(.ml-sidebar, .ml-mobile-sheet) .nav-parent--nested::after,
html :is(.ml-sidebar, .ml-mobile-sheet) .nav-leaf--child::after {
    display: none;
}

/* ── Hoja activa = píldora de tinta + barra verde ────────────── */
html :is(.ml-sidebar, .ml-mobile-sheet) :is(.nav-leaf--root, .nav-leaf--child).active {
    background: var(--mt-primary);
    color: var(--mt-on-primary);
    font-weight: 600;
    box-shadow: var(--mt-shadow-xs);
}
html :is(.ml-sidebar, .ml-mobile-sheet) :is(.nav-leaf--root, .nav-leaf--child).active .nav-leaf__icon {
    color: var(--mt-on-primary);
    filter: none;
}
html :is(.ml-sidebar, .ml-mobile-sheet) .nav-leaf--root.active::before {
    background: var(--mt-success);
    box-shadow: none;
}
html :is(.ml-sidebar, .ml-mobile-sheet) .nav-leaf--child.active::before {
    background: var(--mt-success);
    box-shadow: none;
}

/* ── Estrella de favorito en el panel de escritorio: aparece al
     pasar el cursor (en el sheet móvil es siempre visible) ────── */
html .ml-sidebar .nav-leaf-shell {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
html .ml-sidebar .nav-leaf-shell .nav-leaf {
    flex: 1;
    min-width: 0;
    width: auto;
}
html .ml-sidebar .nav-favorite {
    width: 28px;
    min-width: 28px;
    margin: 1px 8px 1px 0;
    border: none;
    border-radius: var(--mt-radius-sm);
    background: transparent;
    color: var(--mt-muted-color);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
}
html .ml-sidebar .nav-leaf-shell:hover .nav-favorite { opacity: 1; }
html .ml-sidebar .nav-favorite:hover {
    background: var(--mt-gray-50);
    color: var(--mt-warning);
}
html .ml-sidebar .nav-favorite.is-active {
    opacity: 1;
    color: var(--mt-warning);
}

/* Chevron de selects: SVG inline con stroke violeta #8c57ff →
   gris zinc según tema (auth.css .auth-select y .ep-sel inline) */
html .auth-select,
html .ep-sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] .auth-select,
html[data-theme="dark"] .ep-sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* ================================================================
   S6. SELECT NATIVO → shadcn Select (Customizable Select API,
       appearance: base-select — Chromium 135+)
   Estila el POPUP del <select> nativo, que antes pintaba el SO
   (lista azul de Windows). Cero cambios de markup: aplica a todos
   los <select> del ERP. Firefox/Safari ignoran el @supports y
   conservan su picker nativo.
   ================================================================ */
@supports (appearance: base-select) {

    /* Popup de <select>: se intentó activar el modo customizable de Chrome
       (appearance: base-select → ::picker(select)) pero resultó inconsistente
       (Chromium-only, popup a veces nativo con esquinas cuadradas, chevron mal
       ubicado). Se decidió un componente Select propio (TaxSelect). MIENTRAS TANTO
       el <select> queda NATIVO con appearance:none + chevron de fondo: recuadro con
       look shadcn y popup del SO (las reglas ::picker* de abajo quedan inertes bajo
       appearance:none). */
    html select:not([multiple]):not([size]) {
        appearance: none !important;
        -webkit-appearance: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 30px !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b6779' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 12px 9px !important;
    }

    /* Inertes bajo appearance:none (no existe ::picker-icon); se conservan por si se
       reevalúa el modo customizable en el futuro. */
    select::picker-icon {
        color: var(--mt-muted-color);
        transition: rotate 150ms ease;
    }
    select:open::picker-icon { rotate: 180deg; }

    select:open {
        border-color: var(--mt-ring) !important;
        box-shadow: var(--mt-ring-shadow) !important;
    }

    /* Popup = SelectContent: card con borde zinc, sombra md, p-1 */
    select::picker(select) {
        background: var(--mt-paper-bg);
        color: var(--mt-heading-color);
        font-family: var(--mt-font);
        border: 1px solid var(--mt-border-color);
        border-radius: var(--mt-radius);
        box-shadow: var(--mt-shadow);
        padding: 4px;
        margin-block: 4px;

        /* Entrada estilo Radix: fade + zoom sutil (allow-discrete
           anima la aparición desde display:none / top layer) */
        opacity: 0;
        transform: translateY(-2px) scale(0.98);
        transition:
            opacity 120ms ease,
            transform 120ms ease,
            overlay 120ms ease allow-discrete,
            display 120ms ease allow-discrete;
    }

    select:open::picker(select) {
        opacity: 1;
        transform: none;
    }

    @starting-style {
        select:open::picker(select) {
            opacity: 0;
            transform: translateY(-2px) scale(0.98);
        }
    }

    /* Items = SelectItem: text-sm, hover zinc, radius sm.
       OJO: los <option> se estilan DIRECTO — un selector descendiente
       después de ::picker(select) es inválido y descarta la regla
       entera (bug de la primera versión de esta sección). */
    select:not([multiple]):not([size]) option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: var(--mt-radius-sm);
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--mt-heading-color);
        background: transparent;
        transition: background-color 100ms ease;
    }

    select:not([multiple]):not([size]) option:hover,
    select:not([multiple]):not([size]) option:focus-visible {
        background: var(--mt-gray-50);
        outline: none;
    }

    select:not([multiple]):not([size]) option:disabled {
        color: var(--mt-muted-color);
        opacity: 0.5;
    }

    /* Check del item seleccionado a la derecha (estilo new-york) */
    select:not([multiple]):not([size]) option::checkmark {
        order: 1;
        margin-left: auto;
        font-size: 0.75rem;
        color: var(--mt-muted-color);
    }

    /* Grupos = SelectLabel: etiqueta xs muted. Solo tipografía:
       los <option> re-declaran la suya, así que esto únicamente
       afecta al label del <optgroup>. */
    select:not([multiple]):not([size]) optgroup {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--mt-muted-color);
        padding-inline: 0;
    }
}