/* =====================================================================
   shadcn-skin.css — SHADCN-SKIN-EXPERIMENT
   Re-skin visual de Orbis Mentor: Materio (violeta) → shadcn/ui (zinc).
   Se carga al FINAL de todos los CSS y redefine los VALORES de los
   tokens --mt-* sin tocar materio-theme.css ni mt.css.

   ROLLBACK: quitar el <link> de este archivo en App.razor y revertir
   las ediciones marcadas con "SHADCN-SKIN-EXPERIMENT" (default 'light'
   en App.razor/site.js, meta theme-color, splash y reconnect pill).

   Notas de arquitectura:
   - 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"] es selector nuevo (el dark legacy vivía
     en :root), así que no tiene conflictos.
   - Radius base de controles: 0.5rem · cards/dialogs: 0.75rem.
   ===================================================================== */

/* ================================================================
   S1. TOKENS LIGHT (default) — paleta zinc de shadcn/ui
   ================================================================ */
:root,
html[data-theme="light"] {
    /* ── Primary = zinc-900 (botones negros) ─────────────────── */
    --mt-primary:          #18181B;
    --mt-primary-rgb:      24, 24, 27;
    --mt-primary-hover:    #2F2F33;
    --mt-primary-active:   #3F3F46;
    --mt-primary-light:    rgba(24, 24, 27, 0.08);
    --mt-primary-subtle:   rgba(24, 24, 27, 0.04);
    --mt-cal-work-band:    rgba(9, 9, 11, 0.04);
    --mt-on-primary:       #FAFAFA; /* texto claro sobre primario oscuro */

    --mt-secondary:        #71717A;
    --mt-secondary-rgb:    113, 113, 122;
    --mt-secondary-light:  rgba(113, 113, 122, 0.14);
    --mt-secondary-subtle: rgba(113, 113, 122, 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;

    /* ── Colores base ────────────────────────────────────────── */
    --mt-dark:             #18181B;
    --mt-dark-rgb:         24, 24, 27;
    --mt-black:            #09090B;
    --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 ─────────────────────────────────────────── */
    /* Contenido blanco vs sidebar zinc-50 (dashboard canónico shadcn):
       sin este contraste, el rail del menú y el gutter de las páginas
       centradas se funden en un solo bloque y parecen "panel vacío". */
    --mt-body-bg:          #FFFFFF;
    --mt-body-color:       #3F3F46;
    --mt-paper-bg:         #FFFFFF;
    --mt-heading-color:    #09090B;
    --mt-muted-color:      #71717A;
    --mt-border-color:     #E4E4E7;
    --mt-border-color-translucent: rgba(9, 9, 11, 0.08);
    --mt-divider-color:    #E4E4E7;

    /* ── Ring (token nuevo del skin, focus shadcn) ───────────── */
    --mt-ring:             #A1A1AA;
    --mt-ring-shadow:      0 0 0 3px rgba(24, 24, 27, 0.10);

    /* ── Border radius (base 0.5rem controles) ───────────────── */
    --mt-radius-xs:        0.25rem;   /* 4px  */
    --mt-radius-sm:        0.375rem;  /* 6px  */
    --mt-radius:           0.5rem;    /* 8px  */
    --mt-radius-lg:        0.625rem;  /* 10px */
    --mt-radius-xl:        0.75rem;   /* 12px */
    --mt-radius-xxl:       1rem;      /* 16px */

    /* ── Sombras (escala Tailwind, mínimas) ──────────────────── */
    --mt-shadow-xs:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --mt-shadow-sm:        0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --mt-shadow:           0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --mt-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --mt-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --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);

    /* ── Sidebar (light gris, estilo shadcn sidebar) ─────────── */
    --mt-sidebar-bg:       #FAFAFA;
    --mt-sidebar-bg2:      #FAFAFA;
    --mt-sidebar-text:     #3F3F46;
    --mt-sidebar-text-hover: #09090B;
    --mt-sidebar-active:   var(--mt-primary);
    --mt-sidebar-active-bg: #F4F4F5;
    --mt-sidebar-divider:  #E4E4E7;
    --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);

    /* ── 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 sin violeta ─────────────── */
    --c-brand-accent:      rgba(24, 24, 27, 0.55);
    --c-brand-dim:         rgba(24, 24, 27, 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-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;
}

/* ================================================================
   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
   ================================================================ */

/* ── Tipografía: tracking-tight en headings (sello shadcn) ───── */
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, .modal-content,
.bj-table-card, .bj-card, .asb-filter-card {
    border: 1px solid var(--mt-border-color) !important;
    border-radius: var(--mt-radius-xl) !important;
    box-shadow: var(--mt-shadow-xs) !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: 8;
    --layer-corner-radius: 12;
}
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. SIDEBAR ESTILO SHADCN
   El árbol del menú (MainLayout.razor, <style> inline) usa líneas
   guía, sangrías y headers con icono. shadcn usa: etiqueta de grupo
   pequeña y muted (sin icono), ítems planos icono+texto, hover y
   active en gris sólido redondeado, sin líneas conectoras.
   Scoped a .ml-sidebar:not(.collapsed) para no romper el modo
   colapsado (solo iconos) ni el sheet móvil.
   ================================================================ */

/* Medidas tomadas del source real (registry new-york-v4/sidebar):
   SidebarGroupLabel: h-8 px-2 text-xs font-medium text-fg/70 (sin uppercase)
   SidebarMenuButton: p-2 text-sm gap-2 rounded-md [&>svg]:size-4,
     hover/active: bg-sidebar-accent, data-active: + font-medium
   SidebarMenu: gap-1 (4px entre ítems)
   SidebarMenuSub: mx-3.5 border-l border-sidebar-border px-2.5 py-0.5
   SidebarMenuSubButton: h-7 px-2 text-sm
   Mapeo: header raíz → GroupLabel · depth 1 → MenuButton ·
   depth ≥2 → MenuSub/MenuSubButton */

/* ── Headers raíz (SOLICITUDES, SEGURIDAD...) → GroupLabel ───── */
html .ml-sidebar:not(.collapsed) .nav-parent:not(.nav-parent--nested) {
    height: 32px;
    margin-top: 8px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--mt-muted-color);
    background: transparent !important;
}
html .ml-sidebar:not(.collapsed) .nav-group.is-open > .nav-parent:not(.nav-parent--nested) {
    color: var(--mt-muted-color);
    font-weight: 500;
}
html .ml-sidebar:not(.collapsed) .nav-parent:not(.nav-parent--nested):hover,
html .ml-sidebar:not(.collapsed) .nav-group.is-open > .nav-parent:not(.nav-parent--nested):hover {
    color: var(--mt-heading-color);
}
html .ml-sidebar:not(.collapsed) .nav-parent:not(.nav-parent--nested) .nav-parent__icon {
    display: none;
}
html .ml-sidebar:not(.collapsed) .nav-parent:not(.nav-parent--nested) .nav-parent__chevron {
    width: 12px;
    height: 12px;
    opacity: 0.45;
}
html .ml-sidebar:not(.collapsed) .nav-group.is-open > .nav-parent:not(.nav-parent--nested) .nav-parent__chevron {
    color: var(--mt-muted-color);
}

/* ── Depth ≥1: SidebarMenuSub — línea guía vertical continua a la
     izquierda, como el sidebar canónico de shadcn (mx-3.5 border-l
     px-2.5). Se mata el ::before del árbol viejo y se usa border. ── */
html .ml-sidebar .nav-children::before { display: none; }
html .ml-sidebar .nav-children {
    margin: 0 var(--nav-side-pad, 8px) 0 14px;
    /* Sin padding vertical: el contenedor colapsa con max-height 0 y un
       padding dejaría visible un muñón del border en grupos cerrados. */
    padding: 0 0 0 10px;
    border-left: 1px solid var(--mt-sidebar-divider);
}
/* Depth ≥2: misma línea, anidada un nivel más adentro */
html .ml-sidebar .nav-children .nav-children {
    margin: 0 0 0 14px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--mt-sidebar-divider);
}
/* Fuera los stubs por-ítem del árbol viejo */
html .ml-sidebar .nav-parent--nested::after,
html .ml-sidebar .nav-leaf--child::after { display: none; }

/* ── Depth 1: MenuButton (32px, text-sm, gap-2, icono 16px) ───── */
html .ml-sidebar .nav-parent--nested,
html .ml-sidebar .nav-leaf--child {
    width: 100%;
    margin: 2px 0;
    height: 32px;
    padding: 0 8px;
    gap: 8px;
    border-radius: var(--mt-radius);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--mt-sidebar-text);
}
html .ml-sidebar .nav-parent--nested .nav-parent__icon,
html .ml-sidebar .nav-leaf--child .nav-leaf__icon {
    width: 16px;
    height: 16px;
    font-size: 13px;
}
/* Depth ≥2: MenuSubButton (28px) */
html .ml-sidebar .nav-children .nav-children .nav-parent--nested,
html .ml-sidebar .nav-children .nav-children .nav-leaf--child {
    height: 28px;
    margin: 1px 0;
}
html .ml-sidebar .nav-group.is-open > .nav-parent--nested {
    color: var(--mt-heading-color);
    font-weight: 500;
}

/* ── Hover y active: bg sidebar-accent sólido, sin barra/glow ─── */
html .ml-sidebar .nav-parent--nested:hover,
html .ml-sidebar .nav-leaf:hover {
    background: var(--mt-sidebar-active-bg);
    color: var(--mt-heading-color);
}
html .ml-sidebar .nav-leaf--root.active,
html .ml-sidebar .nav-leaf--child.active {
    background: var(--mt-sidebar-active-bg);
    color: var(--mt-heading-color);
    font-weight: 500;
    box-shadow: none;
}
html .ml-sidebar .nav-leaf--root.active::before { display: none; }
html .ml-sidebar .nav-leaf--root.active .nav-leaf__icon,
html .ml-sidebar .nav-leaf--child.active .nav-leaf__icon {
    color: var(--mt-heading-color);
}

/* Leaves raíz directas (sin grupo) = MenuButton también */
html .ml-sidebar:not(.collapsed) .nav-leaf--root {
    height: 32px;
    padding: 0 8px;
    gap: 8px;
    border-radius: var(--mt-radius);
    font-size: 0.875rem;
    font-weight: 400;
}
html .ml-sidebar:not(.collapsed) .nav-leaf--root .nav-leaf__icon {
    width: 16px;
    height: 16px;
    font-size: 13px;
}

/* 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) {

    /* Activar modo customizable en trigger y picker. !important para
       ganar a los appearance:none de clases por página (.cal2-select,
       .auth-select, etc.); sus chevrons SVG de background sobran
       porque el UA ahora pone ::picker-icon. El flex centrado evita
       que el texto quede arriba en triggers con height fijo (.ep-sel
       de /account tiene 44px). */
    html select:not([multiple]):not([size]) {
        appearance: base-select !important;
        background-image: none !important;
        position: relative;
        display: inline-flex;
        align-items: center;
        /* Reserva fija para el ::picker-icon absoluto (right: 10px +
           ~12px de icono): los selects con poco padding-right dejaban
           pasar el texto por debajo del chevron. */
        padding-right: 28px !important;
    }
    html select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    /* Chevron del trigger: absoluto en el borde derecho (donde iba la
       flecha nativa), para que el padding-right reservado por cada
       clase legacy para su SVG (13-40px) no lo desplace. Lleva fondo
       opaco igual al del select (el skin lo fuerza arriba) porque en
       selects angostos el texto desborda sobre el padding y pasaría
       por debajo del icono. Gira al abrir. */
    select::picker-icon {
        position: absolute;
        right: 2px;
        top: 50%;
        translate: 0 -50%;
        padding: 5px 8px 5px 5px;
        background-color: var(--mt-paper-bg);
        color: var(--mt-muted-color);
        transition: rotate 150ms ease;
    }
    html[data-theme="dark"] select::picker-icon {
        background-color: #1C1C1F;
    }
    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;
    }
}