/* ============================================================
   TRAYEKTO - SISTEMA CENTRAL DE TEMA
   Light / Dark
   ============================================================ */

:root,
html[data-theme="light"] {
    --bg-primary: #f3f7fb;
    --bg-secondary: #eef4fa;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-elevated: #ffffff;
    --bg-subtle: #f5f8fc;
    --text-primary: #0a2149;
    --text-secondary: #35557d;
    --text-muted: #6680a3;
    --border-color: #dce7f2;
    --border-soft: #edf2f7;
    --input-bg: #ffffff;
    --input-border: #cedbea;
    --hover-bg: #f1f7ff;
    --selected-bg: #e8f3ff;
    --shadow-color: rgba(20, 53, 92, .08);
    --primary: #087eff;
    --primary-hover: #006ee6;
    --sidebar-text: #102d55;
    --sidebar-muted: #526b91;
    --topbar-text: #0b2145;
    --map-filter: none;
}

html[data-theme="dark"] {
    --bg-primary: #061827;
    --bg-secondary: #071d2e;
    --bg-card: #09253b;
    --bg-sidebar: #031a2b;
    --bg-header: #041d30;
    --bg-elevated: #0b2b44;
    --bg-subtle: #0b2a42;
    --text-primary: #f3f7fb;
    --text-secondary: #c3d4e5;
    --text-muted: #88a5be;
    --border-color: #1b4764;
    --border-soft: #12344d;
    --input-bg: #09263d;
    --input-border: #28506b;
    --hover-bg: #0d3552;
    --selected-bg: #0d4166;
    --shadow-color: rgba(0, 0, 0, .28);
    --primary: #168cff;
    --primary-hover: #3ba0ff;
    --sidebar-text: #f3f7fb;
    --sidebar-muted: #9bb2c7;
    --topbar-text: #f7fbff;
    --map-filter: brightness(.82) saturate(1.05) contrast(1.04);
}

html,
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Shell / TopBar / Sidebar */
html[data-theme] .dashboard-shell {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .dashboard-sidebar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-color);
}

html[data-theme] .dashboard-topbar {
    background: var(--bg-header) !important;
    color: var(--topbar-text) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 12px var(--shadow-color) !important;
}

html[data-theme] .menu-button,
html[data-theme] .dashboard-topbar .mud-icon-root {
    color: var(--topbar-text) !important;
}

html[data-theme] .global-search {
    background: var(--input-bg) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--input-border);
    box-shadow: 0 1px 6px var(--shadow-color) !important;
}

html[data-theme] .global-search input {
    color: var(--text-primary) !important;
}

html[data-theme] .global-search input::placeholder {
    color: var(--text-muted);
}

/* Theme toggle */
.theme-toggle {
    width: 78px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 6px;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 9px var(--shadow-color);
}

.theme-toggle .mud-icon-root {
    font-size: 17px !important;
}

.theme-toggle-track {
    position: relative;
    width: 28px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #d8e3ee;
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform .2s ease;
}

html[data-theme="dark"] .theme-toggle-track {
    background: #166db1;
}

html[data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(12px);
}

.theme-sun { color: #ffb000 !important; }
.theme-moon { color: #287de8 !important; }

/* Navigation */
html[data-theme] .nav-shell {
    color: var(--sidebar-text) !important;
}

html[data-theme] .menu .menu-group,
html[data-theme] .nav-footer {
    border-color: var(--border-color) !important;
}

html[data-theme] .menu .menu-group-title {
    color: var(--sidebar-muted) !important;
}

html[data-theme] .menu .menu-link,
html[data-theme] .dashboard-link {
    color: var(--sidebar-text) !important;
}

html[data-theme] .menu .menu-link:hover,
html[data-theme] .menu .menu-link.active {
    color: var(--text-primary) !important;
    background: var(--hover-bg) !important;
}

html[data-theme] .dashboard-link.active {
    color: #fff !important;
    background: var(--primary) !important;
}

/* Cards, panels, forms and tables across authenticated pages */
html[data-theme] .panel,
html[data-theme] .metric-card,
html[data-theme] .reception-list-panel,
html[data-theme] .registration-panel,
html[data-theme] .process-strip > div,
html[data-theme] .workspace-panel,
html[data-theme] .detail-card,
html[data-theme] .tracking-card,
html[data-theme] .map-card,
html[data-theme] .create-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 3px 14px var(--shadow-color) !important;
}

html[data-theme] .welcome-row h1,
html[data-theme] .panel-header h2,
html[data-theme] .operational-note h2,
html[data-theme] .page-heading h1,
html[data-theme] .panel-title h2,
html[data-theme] .create-title h3,
html[data-theme] .metric-card strong,
html[data-theme] .route-item strong,
html[data-theme] .notification-item strong,
html[data-theme] .table-row strong,
html[data-theme] .process-strip strong,
html[data-theme] .pickup-field > label {
    color: var(--text-primary) !important;
}

html[data-theme] .welcome-row p,
html[data-theme] .date-block,
html[data-theme] .eyebrow,
html[data-theme] .page-heading p,
html[data-theme] .metric-card > span,
html[data-theme] .metric-card span,
html[data-theme] .route-item span,
html[data-theme] .notification-item span,
html[data-theme] .route-item small,
html[data-theme] .empty-state,
html[data-theme] .state-panel,
html[data-theme] .operational-note p,
html[data-theme] .process-strip span,
html[data-theme] td small,
html[data-theme] .muted {
    color: var(--text-secondary) !important;
}

html[data-theme] .status-total,
html[data-theme] .table-head,
html[data-theme] th,
html[data-theme] .pickup-table th {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .route-item,
html[data-theme] .notification-item,
html[data-theme] .status-row,
html[data-theme] .table-row,
html[data-theme] td,
html[data-theme] .pickup-table td,
html[data-theme] .pagination-row,
html[data-theme] .tabs {
    border-color: var(--border-soft) !important;
}

html[data-theme] td,
html[data-theme] .table-row,
html[data-theme] .pagination-row,
html[data-theme] .tabs button {
    color: var(--text-secondary) !important;
}

html[data-theme] .pickup-table tbody tr:hover,
html[data-theme] .pickup-table tbody tr.selected,
html[data-theme] .party-results button:hover {
    background: var(--hover-bg) !important;
}

/* Native form controls */
html[data-theme] .dashboard-shell input,
html[data-theme] .dashboard-shell select,
html[data-theme] .dashboard-shell textarea {
    color: var(--text-primary);
}

html[data-theme] .search-box,
html[data-theme] .filters-grid select,
html[data-theme] .form-field input,
html[data-theme] .form-field select,
html[data-theme] .form-field textarea,
html[data-theme] .party-results,
html[data-theme] .party-results button {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

html[data-theme] .dashboard-shell input::placeholder,
html[data-theme] .dashboard-shell textarea::placeholder {
    color: var(--text-muted);
}

/* MudBlazor controls */
html[data-theme] .dashboard-shell .mud-paper,
html[data-theme] .dashboard-shell .mud-popover,
html[data-theme] .dashboard-shell .mud-menu-list,
html[data-theme] .dashboard-shell .mud-picker-container {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

html[data-theme] .dashboard-shell .mud-input,
html[data-theme] .dashboard-shell .mud-input-slot,
html[data-theme] .dashboard-shell .mud-select,
html[data-theme] .dashboard-shell .mud-typography {
    color: var(--text-primary);
}

html[data-theme] .dashboard-shell .mud-input-outlined {
    background: var(--input-bg) !important;
}

html[data-theme] .dashboard-shell .mud-input-outlined-border {
    border-color: var(--input-border) !important;
}

html[data-theme] .dashboard-shell .mud-table-root,
html[data-theme] .dashboard-shell .mud-table-container {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Map: preserve real map tiles; only darken them in dark mode. */
html[data-theme="dark"] .leaflet-tile-pane {
    filter: var(--map-filter);
}

html[data-theme="dark"] .leaflet-control,
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Focus / accessibility */
html[data-theme] .dashboard-shell button:focus-visible,
html[data-theme] .dashboard-shell a:focus-visible,
html[data-theme] .dashboard-shell input:focus-visible,
html[data-theme] .dashboard-shell select:focus-visible,
html[data-theme] .dashboard-shell textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .theme-toggle {
        width: 58px;
        gap: 3px;
        padding-inline: 4px;
    }

    .theme-toggle .mud-icon-root {
        font-size: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle-thumb {
        transition: none;
    }
}

/* Dashboard dark: jerarquía visual cercana al mockup aprobado. */
html[data-theme="dark"] .dashboard-content {
    background: var(--bg-primary);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card {
    background: linear-gradient(145deg, var(--bg-card), #071f33) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .status-total,
html[data-theme="dark"] .table-head {
    background: var(--bg-subtle) !important;
}

html[data-theme="dark"] .map-toolbar {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .map-empty-note {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .leaflet-tile-pane {
    filter: var(--map-filter);
}

/* Logos independientes por tema: sin filtros ni inversión de colores. */
html[data-theme="light"] .brand-logo-dark { display: none !important; }
html[data-theme="light"] .brand-logo-light { display: block !important; }
html[data-theme="dark"] .brand-logo-light { display: none !important; }
html[data-theme="dark"] .brand-logo-dark { display: block !important; }

/* LOGIN: superficie de autenticación fija, independiente de Light/Dark.
   No aplicar aquí variables del Dashboard. */
html[data-theme] .login-modal .login-form-panel {
    background: #fff !important;
    color: #0b1b39 !important;
    color-scheme: light;
}
html[data-theme] .login-modal .login-form-panel .trayekto-login-field .mud-input,
html[data-theme] .login-modal .login-form-panel .trayekto-login-field .mud-input-root,
html[data-theme] .login-modal .login-form-panel .trayekto-login-field .mud-input-slot,
html[data-theme] .login-modal .login-form-panel .trayekto-login-field input {
    background: #fbfdff !important;
    color: #12213d !important;
    -webkit-text-fill-color: #12213d;
}
html[data-theme] .login-modal .login-form-panel .trayekto-login-field input::placeholder {
    color: #73849c !important;
    -webkit-text-fill-color: #73849c;
}
html[data-theme] .login-modal .login-form-panel .trayekto-login-field .mud-input-label {
    color: #63708a !important;
}
html[data-theme] .login-modal .login-form-panel .trayekto-login-field .mud-input-outlined-border {
    border-color: #cbd8e9 !important;
}
html[data-theme] .login-modal .login-form-panel .remember-option,
html[data-theme] .login-modal .login-form-panel .remember-option .mud-typography,
html[data-theme] .login-modal .login-form-panel .remember-option .mud-checkbox-label {
    color: #162642 !important;
}
html[data-theme] .login-modal .login-form-panel .password-toggle .mud-icon-root {
    color: #17345e !important;
}


/* ================================================
   TRAYEKTO / ÓRDENES Y ENVÍOS - SELECTOR DE ESTADO
   El popover MudBlazor se monta fuera del componente
   Razor: por eso estas reglas son CSS global acotado
   exclusivamente a PopoverClass de este selector.
   ================================================ */
html[data-theme="light"] .trayekto-shipments-status-menu {
    --shipment-menu-bg: #ffffff;
    --shipment-menu-text: #102a56;
    --shipment-menu-border: #dce6f2;
    --shipment-menu-hover: #eef5ff;
    --shipment-menu-selected: #e4f0ff;
}
html[data-theme="dark"] .trayekto-shipments-status-menu {
    --shipment-menu-bg: #1b2c45;
    --shipment-menu-text: #f1f5fb;
    --shipment-menu-border: #38506f;
    --shipment-menu-hover: #294362;
    --shipment-menu-selected: #214b7c;
}
html[data-theme] .trayekto-shipments-status-menu,
html[data-theme] .trayekto-shipments-status-menu .mud-paper,
html[data-theme] .trayekto-shipments-status-menu .mud-list {
    background: var(--shipment-menu-bg) !important;
    color: var(--shipment-menu-text) !important;
    opacity: 1 !important;
}
html[data-theme] .trayekto-shipments-status-menu {
    border: 1px solid var(--shipment-menu-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(9, 30, 66, .20) !important;
    overflow: hidden;
    z-index: 1500 !important;
}
html[data-theme] .trayekto-shipments-status-menu .mud-list {
    padding: 5px !important;
    max-height: 280px;
    overflow-y: auto;
}
html[data-theme] .trayekto-shipments-status-menu .mud-list-item {
    min-height: 40px;
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 6px;
    color: var(--shipment-menu-text) !important;
    background: var(--shipment-menu-bg) !important;
}
html[data-theme] .trayekto-shipments-status-menu .mud-list-item:hover,
html[data-theme] .trayekto-shipments-status-menu .mud-list-item:focus-visible {
    background: var(--shipment-menu-hover) !important;
}
html[data-theme] .trayekto-shipments-status-menu .mud-list-item.mud-selected-item {
    background: var(--shipment-menu-selected) !important;
    color: var(--shipment-menu-text) !important;
    font-weight: 600;
}
html[data-theme] .trayekto-shipments-status-menu .mud-list-item-text,
html[data-theme] .trayekto-shipments-status-menu .mud-typography {
    color: inherit !important;
}


/* ===============================================================
   TRAYEKTO - refinamiento de filtros de órdenes (2026-10-13)
   Mantener el contorno del buscador únicamente en el campo externo.
   No se modifican los controles ni los eventos de filtrado.
   =============================================================== */
html[data-theme] .shipments-page .shipment-search-field .mud-input-control,
html[data-theme] .shipments-page .shipment-search-field .mud-input,
html[data-theme] .shipments-page .shipment-search-field .mud-input-root,
html[data-theme] .shipments-page .shipment-search-field input {
    box-shadow: none !important;
    outline: none !important;
}
html[data-theme] .shipments-page .shipment-search-field .mud-input-root,
html[data-theme] .shipments-page .shipment-search-field input {
    border: 0 !important;
    background: transparent !important;
}
html[data-theme] .shipments-page .shipment-search-field .mud-input-outlined-border {
    border-radius: 6px;
}
html[data-theme="light"] .shipments-page .shipment-search-field .mud-input-outlined-border {
    border-color: #d5e1ef !important;
}
html[data-theme="dark"] .shipments-page .shipment-search-field .mud-input-outlined-border {
    border-color: #38506f !important;
}
html[data-theme] .shipments-page .shipment-search-field:focus-within .mud-input-outlined-border {
    border-color: #1677f9 !important;
    border-width: 1px !important;
}

/* ================================================================
   TRAYEKTO | Estándar reutilizable de acciones de cabecera
   Aplicación opt-in mediante trayekto-action-button/action-menu.
   No cambia eventos, navegación ni habilitación de los controles.
   ================================================================ */
.trayekto-action-button.mud-button-root,
.trayekto-action-menu .mud-button-root {
    min-height: 44px;
    padding: 0 17px;
    border-radius: 11px;
    font-size: .875rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 4px 13px rgba(15, 44, 82, .11);
    transition: background-color .18s ease, box-shadow .18s ease;
}
.trayekto-action-button .mud-button-start-icon,
.trayekto-action-menu .mud-button-start-icon {
    margin-inline-end: 11px;
    margin-inline-start: 0;
}
.trayekto-action-button .mud-button-end-icon {
    margin-inline-start: 12px;
    margin-inline-end: 0;
    color: #0757ac;
}
.trayekto-action-button .mud-icon-root,
.trayekto-action-menu .mud-icon-root { font-size: 22px; }
.trayekto-action-primary.mud-button-filled {
    background: #087bfa;
    color: #fff;
    border: 1px solid #087bfa;
    box-shadow: 0 5px 14px rgba(8, 123, 250, .22);
}
.trayekto-action-primary.mud-button-filled:not(.mud-disabled):hover {
    background: #0567da;
    box-shadow: 0 7px 18px rgba(8, 123, 250, .30);
}
.trayekto-action-import.mud-button-outlined,
.trayekto-action-dates.mud-button-outlined,
.trayekto-action-menu .mud-button-outlined {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}
.trayekto-action-import .mud-button-start-icon { color: #08a55b; }
.trayekto-action-dates .mud-button-start-icon { color: #0869d7; }
.trayekto-action-menu .mud-button-start-icon { color: #7043db; }
.trayekto-action-menu .mud-button-root::after {
    content: '';
    display: inline-block;
    margin-inline-start: 13px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #0757ac;
}
.trayekto-action-button:not(.mud-disabled):hover,
.trayekto-action-menu .mud-button-root:not(.mud-disabled):hover {
    box-shadow: 0 6px 18px rgba(15, 44, 82, .17);
}
.trayekto-action-button:focus-visible,
.trayekto-action-menu .mud-button-root:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}
.trayekto-action-button.mud-disabled {
    opacity: .56;
    box-shadow: none;
    cursor: not-allowed;
}
@media (max-width: 600px) {
    .trayekto-action-button.mud-button-root,
    .trayekto-action-menu .mud-button-root { min-height: 42px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .trayekto-action-button.mud-button-root,
    .trayekto-action-menu .mud-button-root { transition: none; }
    .trayekto-action-button:not(.mud-disabled):hover,
    .trayekto-action-menu .mud-button-root:not(.mud-disabled):hover { transform: none; }
}

/* ================================================================
   TRAYEKTO | Superficies flotantes MudBlazor
   Los menús se posicionan por MudPopoverProvider (MainLayout).
   No aplicar transform a los activadores: crea stacking contexts
   y puede alterar la relación visual con el panel flotante.
   ================================================================ */
html[data-theme] .mud-popover-provider .mud-popover,
html[data-theme] .mud-popover.mud-popover-open {
    z-index: 1600;
}
html[data-theme] .mud-popover .mud-menu-list {
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 12px 30px rgba(10, 35, 70, .20);
}
html[data-theme] .mud-popover .mud-menu-list .mud-list-item {
    min-height: 40px;
    border-radius: 6px;
}
html[data-theme] .trayekto-action-menu .mud-button-root {
    transform: none !important;
}


/* TRAYEKTO | Corrección de superficie de menús MudBlazor.
   El fondo debe aplicarse al contenedor real del popover y no solo
   a .mud-menu-list, para impedir que se vean las tarjetas inferiores. */
html[data-theme] .mud-popover:has(.mud-menu-list),
html[data-theme] .mud-popover:has(.mud-menu-list) > .mud-paper,
html[data-theme] .mud-popover:has(.mud-menu-list) .mud-menu-list,
html[data-theme] .mud-popover:has(.mud-menu-list) .mud-list {
    background-color: var(--mud-palette-surface, #ffffff) !important;
    color: var(--mud-palette-text-primary, #102b55) !important;
    opacity: 1 !important;
}

html[data-theme] .mud-popover:has(.mud-menu-list) {
    z-index: 1700 !important;
    border: 1px solid var(--mud-palette-lines-default, #dce5f0);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(10, 35, 70, .22) !important;
    overflow: hidden;
}

html[data-theme] .mud-popover:has(.mud-menu-list) .mud-list-item {
    background-color: transparent;
    min-height: 40px;
}

html[data-theme] .mud-popover:has(.mud-menu-list) .mud-list-item:hover {
    background-color: var(--mud-palette-action-default-hover, #eef4fc);
}


/* Calendario empresarial: diálogo propio, sin popover ni posicionamiento artificial. */
.trayekto-date-trigger {
    width: 100%; min-width: 0; min-height: 42px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; padding: 5px 12px;
    border: 1px solid var(--mud-palette-lines-default, #d5e1ef);
    border-radius: 8px; background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #102a56); text-align: left;
    cursor: pointer; font: inherit;
}
.trayekto-date-trigger:focus-visible { outline: 2px solid var(--mud-palette-primary, #087bfa); outline-offset: 2px; }
.trayekto-date-trigger-content { display: flex; flex-direction: column; min-width: 0; }
.trayekto-date-trigger-content small { font-size: 11px; color: var(--mud-palette-text-secondary, #53657b); }
.trayekto-date-trigger .mud-icon-root { color: var(--mud-palette-primary, #087bfa); }
.trayekto-calendar-overlay {
    position: fixed; inset: 0; z-index: 3000; display: flex;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(7, 23, 47, .58);
}
.trayekto-calendar-modal {
    box-sizing: border-box; width: min(380px, 100%); max-height: calc(100dvh - 32px);
    overflow: auto; border-radius: 16px; border: 1px solid var(--mud-palette-lines-default, #dce6f2);
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #102a56);
    box-shadow: 0 24px 65px rgba(0, 18, 45, .36);
}
.trayekto-calendar-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid var(--mud-palette-lines-default, #dce6f2);
}
.trayekto-calendar-close { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 26px; line-height: 1; }
.trayekto-calendar-modal .mud-picker { max-width: 100%; }
.trayekto-calendar-modal .mud-picker-calendar { margin-inline: auto; }


/* ============================================================
   CLASIFICACIÓN — TEMA CORPORATIVO DE ÓRDENES Y ENVÍOS
   Se aplican exclusivamente a .classification-page.
   El tema claro usa superficies blancas; el oscuro reproduce
   las tarjetas y tablas azul marino de Órdenes y envíos.
   ============================================================ */
html[data-theme] .classification-page {
    color: var(--text-primary) !important;
}
html[data-theme] .classification-page .classification-hero,
html[data-theme] .classification-page .classification-metric,
html[data-theme] .classification-page .classification-panel,
html[data-theme] .classification-page .classification-bottom-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 12px var(--shadow-color) !important;
}
html[data-theme="dark"] .classification-page .classification-hero,
html[data-theme="dark"] .classification-page .classification-metric,
html[data-theme="dark"] .classification-page .classification-panel,
html[data-theme="dark"] .classification-page .classification-bottom-card {
    background: #09253b !important;
    border-color: #1b4764 !important;
    box-shadow: none !important;
}
html[data-theme] .classification-page h1,
html[data-theme] .classification-page h3,
html[data-theme] .classification-page .classification-metric strong,
html[data-theme] .classification-page .classification-metric small,
html[data-theme] .classification-page .classification-hero p,
html[data-theme] .classification-page .classification-table,
html[data-theme] .classification-page .classification-history,
html[data-theme] .classification-page .classification-legend,
html[data-theme] .classification-page .classification-table-footer {
    color: var(--text-primary) !important;
}
html[data-theme] .classification-page .classification-demo-note {
    color: var(--text-secondary) !important;
}
html[data-theme] .classification-page .classification-tabs {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme] .classification-page .classification-tabs > button {
    color: var(--text-secondary) !important;
}
html[data-theme] .classification-page .classification-tabs > button.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}
html[data-theme] .classification-page .classification-search input,
html[data-theme] .classification-page .classification-filters input,
html[data-theme] .classification-page .classification-filters select,
html[data-theme] .classification-page .scanner input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
    border-radius: 5px;
}
html[data-theme] .classification-page .classification-search input::placeholder,
html[data-theme] .classification-page .scanner input::placeholder {
    color: var(--text-muted) !important;
}
html[data-theme] .classification-page .classification-filters label,
html[data-theme] .classification-page .classification-search span {
    color: var(--text-secondary) !important;
}
html[data-theme] .classification-page .classification-table th,
html[data-theme] .classification-page .classification-history th {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme] .classification-page .classification-table td,
html[data-theme] .classification-page .classification-history td {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}
html[data-theme] .classification-page .classification-table td strong,
html[data-theme] .classification-page .classification-history td strong {
    color: var(--text-primary) !important;
}
html[data-theme] .classification-page .classification-table tbody tr:hover td,
html[data-theme] .classification-page .classification-history tbody tr:hover td,
html[data-theme] .classification-page .classification-table tr.selected td {
    background: var(--hover-bg) !important;
}
html[data-theme] .classification-page .classification-donut > div {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
html[data-theme] .classification-page .classification-dialog {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme] .classification-page .classification-close {
    color: var(--text-primary) !important;
}
html[data-theme] .classification-page .classification-tab-actions .mud-button-root,
html[data-theme] .classification-page .scanner .mud-button-root {
    border-radius: 6px;
}


/* ============================================================
   ORDENES Y SERVICIOS - PANELES CON CONTRASTE EN AMBOS TEMAS
   Estilos globales porque el selector html[data-theme] vive
   fuera del alcance del CSS aislado de ServiceOrders.razor.css.
   ============================================================ */
html[data-theme="light"] .service-orders {
    --so-panel-bg: #ffffff;
    --so-panel-border: #dbe6f2;
    --so-panel-shadow: 0 4px 14px rgba(15, 52, 95, .07);
    --so-panel-heading: #0a2857;
    --so-panel-muted: #58749b;
    --so-panel-input: #ffffff;
    --so-panel-row-hover: #f3f8ff;
    --so-panel-head: #f1f6fc;
}
html[data-theme="dark"] .service-orders {
    --so-panel-bg: #102d44;
    --so-panel-border: #31526a;
    --so-panel-shadow: 0 5px 18px rgba(0, 0, 0, .24);
    --so-panel-heading: #f2f8ff;
    --so-panel-muted: #aec5d9;
    --so-panel-input: #0a253b;
    --so-panel-row-hover: #193a53;
    --so-panel-head: #193950;
}

html[data-theme] .service-orders .so-metric,
html[data-theme] .service-orders .so-filters,
html[data-theme] .service-orders .so-table-panel {
    background: var(--so-panel-bg) !important;
    border: 1px solid var(--so-panel-border) !important;
    box-shadow: var(--so-panel-shadow) !important;
    border-radius: 10px;
}
html[data-theme] .service-orders .so-metric strong,
html[data-theme] .service-orders .so-filters label,
html[data-theme] .service-orders .so-table-panel th {
    color: var(--so-panel-heading) !important;
}
html[data-theme] .service-orders .so-metric small,
html[data-theme] .service-orders .so-demo,
html[data-theme] .service-orders .so-table-panel footer {
    color: var(--so-panel-muted) !important;
}
html[data-theme] .service-orders .so-filters input,
html[data-theme] .service-orders .so-filters select {
    background: var(--so-panel-input) !important;
    border: 1px solid var(--so-panel-border) !important;
    color: var(--text-primary) !important;
    border-radius: 7px;
}
html[data-theme] .service-orders .so-table-panel th {
    background: var(--so-panel-head) !important;
}
html[data-theme] .service-orders .so-table-panel td,
html[data-theme] .service-orders .so-table-panel footer {
    border-color: var(--so-panel-border) !important;
}
html[data-theme] .service-orders .so-table-panel tbody tr:hover {
    background: var(--so-panel-row-hover) !important;
}
html[data-theme] .service-orders .so-table-panel td strong {
    color: var(--so-panel-heading) !important;
}
html[data-theme] .service-orders .so-table-panel td small {
    color: var(--so-panel-muted) !important;
}
html[data-theme] .service-orders .so-tabs button:not(.selected) {
    background: var(--so-panel-bg) !important;
    border: 1px solid var(--so-panel-border) !important;
    color: var(--text-primary) !important;
}
html[data-theme] .service-orders .so-dialog {
    background: var(--so-panel-bg) !important;
    border: 1px solid var(--so-panel-border) !important;
    color: var(--text-primary) !important;
}


/* Shared semantic tokens for dashboard modules. Consume these instead of
   MudBlazor palette variables, which may be transparent in the current theme. */
:root, html[data-theme="light"], html[data-theme="dark"] {
    --trayekto-page-bg: var(--bg-primary);
    --trayekto-surface: var(--bg-card);
    --trayekto-surface-alt: var(--bg-subtle);
    --trayekto-text: var(--text-primary);
    --trayekto-text-secondary: var(--text-secondary);
    --trayekto-border: var(--border-color);
    --trayekto-input-bg: var(--input-bg);
    --trayekto-input-border: var(--input-border);
    --trayekto-shadow: 0 3px 12px var(--shadow-color);
}

/* Opt-in shared module primitives: do not override Bootstrap or MudBlazor globally. */
.trayekto-module-card {
    background-color: var(--trayekto-surface);
    color: var(--trayekto-text);
    border: 1px solid var(--trayekto-border);
    border-radius: 9px;
    box-shadow: var(--trayekto-shadow);
}
.trayekto-module-field {
    background-color: var(--trayekto-input-bg);
    color: var(--trayekto-text);
    border: 1px solid var(--trayekto-input-border);
    border-radius: 5px;
}


/* ============================================================
   PORTAL DE CLIENTES - PUENTE AL TEMA GLOBAL LIGHT / DARK
   Usa las variables corporativas existentes, sin crear un tema paralelo.
   Incluye las pantallas del portal y el asistente de nueva solicitud.
   ============================================================ */
html[data-theme] .client-shell {
    --mud-palette-background: var(--bg-primary);
    --mud-palette-background-gray: var(--bg-secondary);
    --mud-palette-surface: var(--bg-card);
    --mud-palette-text-primary: var(--text-primary);
    --mud-palette-text-secondary: var(--text-secondary);
    --mud-palette-lines-default: var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}
html[data-theme] .client-sidebar,
html[data-theme] .client-topbar {
    background: var(--bg-sidebar);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html[data-theme] .client-topbar { background: var(--bg-header); }
html[data-theme] .client-navigation-divider,
html[data-theme] .client-global-search,
html[data-theme] .client-user-button,
html[data-theme] .client-theme-toggle {
    border-color: var(--border-color);
}
html[data-theme] .client-global-search {
    background: var(--input-bg);
    color: var(--text-primary);
}
html[data-theme] .client-global-search input,
html[data-theme] .client-user-caption small,
html[data-theme] .client-navigation-pending {
    color: var(--text-secondary);
}
html[data-theme] .client-navigation a:not(.active):hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}
html[data-theme] .client-main,
html[data-theme] .new-request-page { background: var(--bg-primary); color: var(--text-primary); }
html[data-theme] .new-request-panel,
html[data-theme] .new-request-summary,
html[data-theme] .new-request-item {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html[data-theme] .new-request-panel > header,
html[data-theme] .new-request-summary > header {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html[data-theme] .new-request-form input,
html[data-theme] .new-request-form select,
html[data-theme] .new-request-form textarea {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    color-scheme: inherit;
}
html[data-theme] .new-request-form input::placeholder,
html[data-theme] .new-request-form textarea::placeholder { color: var(--text-muted); opacity: 1; }
html[data-theme] .new-request-services button {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}
html[data-theme] .new-request-services button.selected {
    background: var(--selected-bg);
    border-color: var(--primary);
}
html[data-theme] .new-request-services button:hover { border-color: var(--primary); }
html[data-theme] .new-request-secondary {
    background: var(--bg-elevated);
    color: var(--primary);
    border-color: var(--input-border);
}
html[data-theme] .new-request-steps span { background: var(--bg-card); border-color: var(--border-color); }
html[data-theme] .new-request-steps .current span,
html[data-theme] .new-request-steps .complete span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
html[data-theme] .new-request-title > span { background: var(--selected-bg); color: var(--primary); }
html[data-theme] .new-request-footer,
html[data-theme] .new-request-summary dt,
html[data-theme] .new-request-summary dd { border-color: var(--border-color); }
html[data-theme] .new-request-breadcrumb,
html[data-theme] .new-request-help,
html[data-theme] .new-request-summary dt,
html[data-theme] .new-request-summary > p,
html[data-theme] .new-request-services small { color: var(--text-secondary); }
html[data-theme] .new-request-form :is(input,select,textarea):focus-visible,
html[data-theme] .new-request-services button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}