/* =====================================================================================
   Theme tokens – TicasERP (data-theme)
   Capa de design tokens + re-skin estructural para el selector de tema de /system-branding.

   - :root = tema ACTUAL (por defecto). html[data-theme="classic"|"modern"] redefinen tokens.
   - body.dark-mode ajusta sidebar/topbar a su variante oscura.
   - COLOR (marca / sidebar / botones) aplica en claro Y oscuro.
   - FORMA (radio / densidad) aplica en claro Y oscuro.
   - ESTRUCTURA (fondo, tarjetas, tablas, degradados, topbar) aplica SOLO en claro, para no
     romper el modo oscuro actual (ya afinado en app.css).

   Precedencia con el branding por licencia (colores del administrador de empresa):
   js/branding-boot.js (applyLicenseColors) redefine estas mismas variables (--theme-*, --tds-*)
   como estilo inline de <html>, que gana a las definiciones de este archivo. Si la empresa define
   color de sidebar, también quita data-sidebar para que sus colores fijos no ganen.
   ===================================================================================== */

:root {
    --theme-primary: #4e73df;
    --theme-primary-hover: #2e59d9;
    --theme-primary-active: #2653d4;
    --theme-primary-soft-bg: #eef2fd;      /* equivale a brand-50  */
    --theme-primary-soft-text: #2e59d9;    /* equivale a brand-600 */
    --theme-sidebar-bg: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
    --theme-sidebar-dark-bg: linear-gradient(180deg, #000000 10%, #224abe 100%);
    --theme-topbar-bg: #ffffff;
}

/* ---- Tradicional (clásico corporativo: azul marino + acero) ---- */
html[data-theme="classic"] {
    --theme-primary: #1d4ed8;
    --theme-primary-hover: #1e40af;
    --theme-primary-active: #1e3a8a;
    --theme-primary-soft-bg: #e2e8f0;
    --theme-primary-soft-text: #1d4ed8;
    --theme-sidebar-bg: #0f1c3d;
    --theme-sidebar-dark-bg: #0b1220;
    --theme-topbar-bg: #ffffff;

    --tds-primary: #1d4ed8;
    --tds-info: #64748b;
}

/* ---- Moderno (índigo/violeta + cian, SaaS) ---- */
html[data-theme="modern"] {
    --theme-primary: #6366f1;
    --theme-primary-hover: #4f46e5;
    --theme-primary-active: #4338ca;
    --theme-primary-soft-bg: #eef2ff;
    --theme-primary-soft-text: #6366f1;
    --theme-sidebar-bg: linear-gradient(160deg, #312e81 0%, #4f46e5 100%);
    --theme-sidebar-dark-bg: linear-gradient(160deg, #1e1b4b 0%, #312e81 100%);
    --theme-topbar-bg: #ffffff;

    --tds-primary: #6366f1;
    --tds-info: #22d3ee;
}

/* ---- Modo oscuro: sidebar y topbar a su variante oscura ---- */
body.dark-mode {
    --theme-sidebar-bg: var(--theme-sidebar-dark-bg);
    --theme-topbar-bg: #1e1e1e;
}

/* =====================================================================================
   COLOR — sidebar y topbar (claro + oscuro)
   ===================================================================================== */
.sidebar.bg-gradient-primary { background: var(--theme-sidebar-bg) !important; }
#content-wrapper > #content > nav.topbar { background-color: var(--theme-topbar-bg) !important; }

/* =====================================================================================
   COLOR — botones de marca (claro: todos los temas; oscuro: solo classic/modern para
   dejar el tema Actual exactamente como estaba)
   ===================================================================================== */

/* Bootstrap · claro */
body:not(.dark-mode) .btn-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; }
body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) .btn-primary:focus,
body:not(.dark-mode) .btn-primary.focus { background-color: var(--theme-primary-hover) !important; border-color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .btn-primary:not(:disabled):not(.disabled):active,
body:not(.dark-mode) .btn-primary:not(:disabled):not(.disabled).active,
body:not(.dark-mode) .show > .btn-primary.dropdown-toggle { background-color: var(--theme-primary-active) !important; border-color: var(--theme-primary-active) !important; }
body:not(.dark-mode) .btn-outline-primary { color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; }
body:not(.dark-mode) .btn-outline-primary:hover { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: #fff !important; }

/* Tailwind · claro */
body:not(.dark-mode) .t-btn-primary { background-color: var(--theme-primary) !important; }
body:not(.dark-mode) .t-btn-primary:hover { background-color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .t-btn-outline-primary { border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; }
body:not(.dark-mode) .t-btn-outline-primary:hover { background-color: var(--theme-primary) !important; color: #fff !important; }

/* Bootstrap + Tailwind · oscuro (solo temas no-default) */
html[data-theme="classic"] body.dark-mode .btn-primary,
html[data-theme="modern"]  body.dark-mode .btn-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; }
html[data-theme="classic"] body.dark-mode .btn-primary:hover,
html[data-theme="classic"] body.dark-mode .btn-primary:focus,
html[data-theme="modern"]  body.dark-mode .btn-primary:hover,
html[data-theme="modern"]  body.dark-mode .btn-primary:focus { background-color: var(--theme-primary-hover) !important; border-color: var(--theme-primary-hover) !important; }
html[data-theme="classic"] body.dark-mode .btn-outline-primary,
html[data-theme="modern"]  body.dark-mode .btn-outline-primary { color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; }
html[data-theme="classic"] body.dark-mode .btn-outline-primary:hover,
html[data-theme="modern"]  body.dark-mode .btn-outline-primary:hover { background-color: var(--theme-primary) !important; color: #fff !important; }
html[data-theme="classic"] body.dark-mode .t-btn-primary,
html[data-theme="modern"]  body.dark-mode .t-btn-primary { background-color: var(--theme-primary) !important; }
html[data-theme="classic"] body.dark-mode .t-btn-primary:hover,
html[data-theme="modern"]  body.dark-mode .t-btn-primary:hover { background-color: var(--theme-primary-hover) !important; }
html[data-theme="classic"] body.dark-mode .t-btn-outline-primary,
html[data-theme="modern"]  body.dark-mode .t-btn-outline-primary { border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; }
html[data-theme="classic"] body.dark-mode .t-btn-outline-primary:hover,
html[data-theme="modern"]  body.dark-mode .t-btn-outline-primary:hover { background-color: var(--theme-primary) !important; color: #fff !important; }

/* =====================================================================================
   COLOR — enlaces y resaltados (solo claro, para conservar el contraste del modo oscuro)
   ===================================================================================== */
body:not(.dark-mode) a { color: var(--theme-primary); }
body:not(.dark-mode) .text-primary { color: var(--theme-primary) !important; }
body:not(.dark-mode) .t-nav-link-active { border-color: var(--theme-primary) !important; color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .t-breadcrumb a { color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .t-badge-primary { background-color: var(--theme-primary-soft-bg) !important; color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .t-combobox-option-active { background-color: var(--theme-primary-soft-bg) !important; color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .t-stat-card-primary { border-left-color: var(--theme-primary) !important; }
body:not(.dark-mode) .t-stat-label-primary { color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .t-form-control:focus { border-color: var(--theme-primary) !important; }
body:not(.dark-mode) .text-brand-500 { color: var(--theme-primary) !important; }
body:not(.dark-mode) .text-brand-600 { color: var(--theme-primary-hover) !important; }
body:not(.dark-mode) .bg-brand-500 { background-color: var(--theme-primary) !important; }
body:not(.dark-mode) .bg-brand-50 { background-color: var(--theme-primary-soft-bg) !important; }
body:not(.dark-mode) .border-brand-500 { border-color: var(--theme-primary) !important; }

/* =====================================================================================
   FORMA — radio y densidad (claro + oscuro). Solo classic/modern: el default conserva los
   valores compilados de Bootstrap/Tailwind tal cual. Forma de Bootstrap legacy sin tocar a
   propósito (sus .input-group/.btn-group dependen de radios por posición).
   ===================================================================================== */

html[data-theme="classic"] .t-btn { border-radius: 0.375rem !important; }
html[data-theme="classic"] .t-card { border-radius: 0.5rem !important; }
html[data-theme="classic"] .t-card-header { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; }
html[data-theme="classic"] .t-card-footer { border-bottom-left-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
html[data-theme="classic"] .t-form-control { border-radius: 0.25rem !important; }
html[data-theme="classic"] .input-group > .t-form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html[data-theme="classic"] .t-badge { border-radius: 0.25rem !important; }
html[data-theme="classic"] .t-combobox-panel,
html[data-theme="classic"] .t-dropdown-menu,
html[data-theme="classic"] .t-alert { border-radius: 0.375rem !important; }
html[data-theme="classic"] .t-table thead th { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
html[data-theme="classic"] .t-table tbody td { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }

html[data-theme="modern"] .t-btn { border-radius: 0.75rem !important; }
html[data-theme="modern"] .t-card { border-radius: 1.25rem !important; }
html[data-theme="modern"] .t-card-header { border-top-left-radius: 1.25rem !important; border-top-right-radius: 1.25rem !important; }
html[data-theme="modern"] .t-card-footer { border-bottom-left-radius: 1.25rem !important; border-bottom-right-radius: 1.25rem !important; }
html[data-theme="modern"] .t-form-control { border-radius: 0.75rem !important; }
html[data-theme="modern"] .input-group > .t-form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html[data-theme="modern"] .t-combobox-panel,
html[data-theme="modern"] .t-dropdown-menu,
html[data-theme="modern"] .t-alert { border-radius: 1rem !important; }
html[data-theme="modern"] .t-table thead th,
html[data-theme="modern"] .t-table tbody td { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }

/* =====================================================================================
   ESTRUCTURA — fondo, tarjetas, tablas, botones, topbar (SOLO claro)
   ===================================================================================== */

/* Fondo del contenido: tintado para que las tarjetas blancas resalten */
html[data-theme="classic"] body:not(.dark-mode) #content-wrapper { background-color: #eef1f6 !important; }
html[data-theme="modern"]  body:not(.dark-mode) #content-wrapper { background-color: #f4f6fc !important; }

/* Tarjetas: clásico = borde marcado y plano; moderno = flotante, sin borde, sombra de color */
html[data-theme="classic"] body:not(.dark-mode) .t-card { border-color: #d8dde6 !important; box-shadow: none !important; }
html[data-theme="classic"] body:not(.dark-mode) .card { border-color: #d8dde6 !important; box-shadow: none !important; }
html[data-theme="classic"] body:not(.dark-mode) .t-card-header { background-color: #f4f6f9 !important; }
html[data-theme="classic"] body:not(.dark-mode) .card .card-header { background-color: #f4f6f9 !important; }

html[data-theme="modern"] body:not(.dark-mode) .t-card { border-color: rgba(99, 102, 241, 0.08) !important; box-shadow: 0 10px 30px rgba(79, 70, 229, 0.08) !important; }
html[data-theme="modern"] body:not(.dark-mode) .card { border-color: rgba(99, 102, 241, 0.08) !important; box-shadow: 0 10px 30px rgba(79, 70, 229, 0.08) !important; }

/* Tablas: clásico = cabecera gris; moderno = cabecera limpia sin banda */
html[data-theme="classic"] body:not(.dark-mode) .t-table thead th { background-color: #e9edf3 !important; }
html[data-theme="classic"] body:not(.dark-mode) .table thead th { background-color: #e9edf3 !important; }
html[data-theme="modern"]  body:not(.dark-mode) .t-table thead th { background-color: transparent !important; border-bottom-color: #eef2f6 !important; }

/* Botones: clásico = plano; moderno = degradado + sombra */
html[data-theme="classic"] body:not(.dark-mode) .t-btn { box-shadow: none !important; }
html[data-theme="classic"] body:not(.dark-mode) .btn { box-shadow: none !important; }
html[data-theme="modern"] body:not(.dark-mode) .t-btn-primary,
html[data-theme="modern"] body:not(.dark-mode) .btn-primary {
    background-image: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

/* Topbar: clásico = línea inferior; moderno = sombra suave */
html[data-theme="classic"] body:not(.dark-mode) .topbar { box-shadow: 0 1px 0 #d8dde6 !important; }
html[data-theme="modern"]  body:not(.dark-mode) .topbar { box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06) !important; }

/* =====================================================================================
   NIVEL 2 — pestañas, breadcrumb, tablas (rejilla) y sidebar (solo claro)
   El modo oscuro conserva su apariencia actual (subrayado / sidebar oscuro).
   ===================================================================================== */

/* ---- Pestañas: Tradicional = control segmentado; Moderno = píldoras ---- */
html[data-theme="classic"] body:not(.dark-mode) .t-nav-tabs {
    border-bottom: none !important;
    background-color: #e9edf3 !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem !important;
    gap: 0.25rem !important;
}
html[data-theme="classic"] body:not(.dark-mode) .t-nav-link {
    border: none !important;
    border-radius: 0.375rem !important;
    margin-bottom: 0 !important;
    color: #475467 !important;
}
html[data-theme="classic"] body:not(.dark-mode) .t-nav-link-active {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    color: var(--theme-primary) !important;
}

html[data-theme="modern"] body:not(.dark-mode) .t-nav-tabs { border-bottom: none !important; gap: 0.5rem !important; }
html[data-theme="modern"] body:not(.dark-mode) .t-nav-link {
    border: none !important;
    border-radius: 9999px !important;
    margin-bottom: 0 !important;
    color: #667085 !important;
}
html[data-theme="modern"] body:not(.dark-mode) .t-nav-link:hover { background-color: #eef2ff !important; color: var(--theme-primary) !important; }
html[data-theme="modern"] body:not(.dark-mode) .t-nav-link-active { background-color: var(--theme-primary) !important; color: #ffffff !important; }

/* ---- Breadcrumb: Tradicional = caja con chevron; Moderno = minimal ---- */
html[data-theme="classic"] body:not(.dark-mode) .t-breadcrumb {
    background-color: #ffffff !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
}
html[data-theme="classic"] body:not(.dark-mode) .t-breadcrumb-item:not(:last-child)::after { content: "›" !important; color: #98a2b3 !important; }

html[data-theme="modern"] body:not(.dark-mode) .t-breadcrumb { color: #98a2b3 !important; }
html[data-theme="modern"] body:not(.dark-mode) .t-breadcrumb a { color: #667085 !important; }
html[data-theme="modern"] body:not(.dark-mode) .t-breadcrumb a:hover { color: var(--theme-primary) !important; }
html[data-theme="modern"] body:not(.dark-mode) .t-breadcrumb-item:not(:last-child)::after { content: "›" !important; color: #d0d5dd !important; }

/* ---- Tablas: Tradicional = rejilla (bordes por celda) + zebra + cabecera gris ---- */
html[data-theme="classic"] body:not(.dark-mode) .t-table thead th,
html[data-theme="classic"] body:not(.dark-mode) .t-table tbody td { border: 1px solid #d8dde6 !important; }
html[data-theme="classic"] body:not(.dark-mode) .t-table thead th { background-color: #e9edf3 !important; }
html[data-theme="classic"] body:not(.dark-mode) .t-table tbody tr:nth-child(even) { background-color: #f6f8fb !important; }

/* ---- Sidebar: Moderno = ítem activo como píldora ---- */
html[data-theme="modern"] body:not(.dark-mode) .sidebar .nav-item.active .nav-link {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-radius: 0.5rem !important;
    color: #ffffff !important;
}
html[data-theme="modern"] body:not(.dark-mode) .sidebar .nav-item.active .nav-link i { color: #ffffff !important; }

/* =====================================================================================
   PERSONALIZACIÓN POR TEMA — data-sidebar / data-font / data-radius + acento (solo claro)
   Estos atributos los pone branding-boot.js desde la personalización guardada por tema.
   Van al final para ganar a las reglas de tema por orden de origen.
   ===================================================================================== */

/* ---- Estilo del menú lateral ---- */
html[data-sidebar="dark"] body:not(.dark-mode) .sidebar { background: #0f172a !important; background-image: none !important; }
html[data-sidebar="gradient"] body:not(.dark-mode) .sidebar { background: linear-gradient(180deg, #4f46e5 0%, #312e81 100%) !important; }

html[data-sidebar="light"] body:not(.dark-mode) .sidebar { background: #f8f9fc !important; background-image: none !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar-brand { background: #0f1c3d !important; color: #ffffff !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .sidebar-heading { color: #98a2b3 !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar hr.sidebar-divider { border-top-color: #e4e7ec !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .nav-item .nav-link { color: #475467 !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .nav-item .nav-link i { color: #98a2b3 !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .nav-item .nav-link:hover { background-color: #eef1f6 !important; color: #101828 !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .nav-item .nav-link[data-toggle="collapse"]::after { color: #98a2b3 !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .nav-item.active .nav-link {
    background-color: #e8eefc !important;
    box-shadow: inset 3px 0 0 0 var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .nav-item.active .nav-link i { color: var(--theme-primary) !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar #sidebarToggle { background-color: #e4e7ec !important; }

/* ---- Tipografía (fuentes del sistema, sin descargar nada) ---- */
html[data-font="system"] body,
html[data-font="system"] h1, html[data-font="system"] h2, html[data-font="system"] h3,
html[data-font="system"] h4, html[data-font="system"] h5, html[data-font="system"] h6,
html[data-font="system"] .card, html[data-font="system"] .modal-content, html[data-font="system"] .dropdown-menu {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
html[data-font="serif"] body,
html[data-font="serif"] h1, html[data-font="serif"] h2, html[data-font="serif"] h3,
html[data-font="serif"] h4, html[data-font="serif"] h5, html[data-font="serif"] h6,
html[data-font="serif"] .card, html[data-font="serif"] .modal-content, html[data-font="serif"] .dropdown-menu {
    font-family: Georgia, "Times New Roman", "Nunito", serif !important;
}

/* ---- Redondez forzada (override del tema) ---- */
html[data-radius="compact"] .t-btn { border-radius: 0.375rem !important; }
html[data-radius="compact"] .t-card { border-radius: 0.5rem !important; }
html[data-radius="compact"] .t-card-header { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; }
html[data-radius="compact"] .t-card-footer { border-bottom-left-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
html[data-radius="compact"] .t-form-control { border-radius: 0.25rem !important; }
html[data-radius="compact"] .t-combobox-panel,
html[data-radius="compact"] .t-dropdown-menu,
html[data-radius="compact"] .t-alert { border-radius: 0.375rem !important; }

html[data-radius="rounded"] .t-btn { border-radius: 0.75rem !important; }
html[data-radius="rounded"] .t-card { border-radius: 1.25rem !important; }
html[data-radius="rounded"] .t-card-header { border-top-left-radius: 1.25rem !important; border-top-right-radius: 1.25rem !important; }
html[data-radius="rounded"] .t-card-footer { border-bottom-left-radius: 1.25rem !important; border-bottom-right-radius: 1.25rem !important; }
html[data-radius="rounded"] .t-form-control { border-radius: 0.75rem !important; }
html[data-radius="rounded"] .t-combobox-panel,
html[data-radius="rounded"] .t-dropdown-menu,
html[data-radius="rounded"] .t-alert { border-radius: 1rem !important; }

html[data-radius="compact"] .input-group > .t-form-control,
html[data-radius="rounded"] .input-group > .t-form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* ---- Acento (color de info) ---- */
body:not(.dark-mode) .text-info { color: var(--tds-info) !important; }
body:not(.dark-mode) .bg-info { background-color: var(--tds-info) !important; }
body:not(.dark-mode) .btn-info { background-color: var(--tds-info) !important; border-color: var(--tds-info) !important; }

/* =====================================================================================
   DISEÑO DEL MENÚ — lateral (default) vs superior
   El modo "Superior" solo aplica en ESCRITORIO (≥992px): oculta el sidebar y muestra el menú
   horizontal en el topbar, junto al quick-nav.
   En MÓVIL (<992px) se conserva el menú LATERAL con la hamburguesa aunque el tema esté
   configurado como "Superior" (el menú horizontal no cabe bien en pantallas chicas).
   OJO: NO poner overflow en .horizontal-nav — un contenedor con scroll/overflow recorta
   los dropdowns (submenús) que son position:absolute.
   ===================================================================================== */
.horizontal-nav { display: none !important; }

@media (min-width: 992px) {
    html[data-menu="top"] .sidebar { display: none !important; }
    html[data-menu="top"] .horizontal-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    html[data-menu="top"] .horizontal-nav .nav-link {
        height: auto !important;
        padding: 0.5rem 0.55rem !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }
    html[data-menu="top"] .horizontal-nav .nav-link i { margin-right: 0.3rem !important; }
}

/* =====================================================================================
   SELECTOR DE EMPRESA / SUCURSAL DEL MENÚ LATERAL (Layout/SidebarModuleNav.razor)
   Se ve como un enlace más del sidebar (sin caja, texto en negritas, flecha blanca) para que
   funcione con los estilos oscuro, degradado y de color de empresa; el claro tiene su variante.
   Vive aquí y no en SidebarModuleNav.razor.css porque index.html no carga el bundle de CSS aislado.
   ===================================================================================== */
.sidebar .sb-modnav-ctx { padding: 0 1rem .5rem; }
.sidebar .sb-modnav-heading { padding: .6rem 0 .25rem !important; }

.sidebar .sb-modnav-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    padding: .35rem 1.5rem .35rem .5rem !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, .9) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .5rem center !important;
    background-size: .6rem !important;
    border: 0 !important;
    border-radius: .35rem !important;
    box-shadow: none !important;
    cursor: pointer;
    text-overflow: ellipsis;
}
.sidebar .sb-modnav-select:hover,
.sidebar .sb-modnav-select:focus {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    outline: none !important;
}
.sidebar .sb-modnav-select option { color: #3a3b45; background-color: #ffffff; font-weight: 400; }

.sidebar .sb-modnav-fixed {
    padding: .35rem .5rem;
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar .sb-modnav-fixed i { color: rgba(255, 255, 255, .3); }

.sidebar .sb-modnav-state { color: rgba(255, 255, 255, .6); font-size: .78rem; padding: .25rem 1rem; }
.sidebar .sb-modnav-chevron { float: right; font-size: .6rem; margin-top: .35rem; opacity: .7; }

/* Sidebar colapsado: el selector no cabe; las pestañas salen como menú flotante solo al pasar el
   mouse por el módulo (abierto todo el tiempo taparía el contenido). */
.sidebar.toggled .sb-modnav-ctx,
.sidebar.toggled .sb-modnav-chevron { display: none; }
.sidebar.toggled .sb-modnav-item .collapse { display: none; left: 6.5rem; padding-left: .75rem; }
.sidebar.toggled .sb-modnav-item:hover .collapse { display: block; }

/* Estilo claro del sidebar. */
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .sb-modnav-select {
    color: #344054 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398a2b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .sb-modnav-select:hover,
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .sb-modnav-select:focus { background-color: #eef1f6 !important; color: #101828 !important; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .sb-modnav-fixed { color: #344054; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .sb-modnav-fixed i { color: #98a2b3; }
html[data-sidebar="light"] body:not(.dark-mode) .sidebar .sb-modnav-state { color: #98a2b3; }