/* ===================================================================
   Jacinto — Design System
   =================================================================== */

/* Radzen Layout: el body no debe mostrar fondo propio */
.rz-body {
    background-color: transparent !important;
}

:root {
    /* ── Paleta de marca Jacinto ─────────────────────────────────────
       Valores crudos. Todo lo de abajo se deriva de acá: si algún día
       cambia la marca, se tocan sólo estas líneas y nada más.       */
    --jac-azul: #14589C;
    --jac-azul-profundo: #0B2E51;
    --jac-celeste: #6CACE4;
    --jac-azul-medio: #1E4A78;

    --txt-1: #0B2E51;
    --txt-2: #4A6480;
    --txt-3: #7B93AC;
    --txt-placeholder: #8FA6BC;
    --txt-sobre-oscuro: #EAF3FB;
    --txt-sobre-oscuro-suave: #B9D3EA;

    --bg-suave: #F4F8FC;
    --bg-acento: #EAF3FB;

    --borde: #DCE7F2;
    --borde-fuerte: #C6D8E9;
    --borde-acento: #CFE2F3;

    /* Azul de marca en rgb() suelto, para los focus ring con alpha */
    --jac-azul-rgb: 20, 88, 156;

    /* Brand Palette */
    --primary-color: var(--jac-azul);
    --primary-light: var(--bg-acento);
    --primary-dark: var(--jac-azul-profundo);
    --secondary-color: var(--txt-3);

    /* Semantic Colors — verde/ámbar/rojo NO se tiñen de azul a propósito:
       son señales funcionales y tienen que leerse distintas de la marca. */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: var(--jac-celeste);

    /* Layout */
    --body-bg: var(--bg-suave);
    --header-bg: #ffffff;
    --header-text: var(--txt-1);
    --sidebar-bg: #ffffff;
    --sidebar-text: var(--txt-2);
    --sidebar-text-hover: var(--txt-1);
    --sidebar-active-bg: var(--bg-acento);
    --sidebar-active-text: var(--jac-azul);

    /* Surfaces */
    --border-radius: 0.875rem;
    --border-color: var(--borde);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.06);

    /* Motion */
    --transition: all 0.2s ease-in-out;
}

/* ===================================================================
   Global
   =================================================================== */
body {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    background-color: var(--body-bg);
    color: var(--txt-1);
    min-height: 100vh;
}

/* ===================================================================
   Header
   =================================================================== */
.rz-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    padding: 0.75rem 1.5rem !important;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
}

.rz-header .rz-text {
    color: var(--header-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* ===================================================================
   Sidebar
   =================================================================== */
.rz-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-color);
}

.rz-panel-menu {
    background: transparent !important;
    padding: 0.5rem 0 !important;
}

.rz-panel-menu-item {
    color: var(--sidebar-text) !important;
    transition: var(--transition) !important;
    border-radius: 0.625rem !important;
    margin: 2px 0.625rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

.rz-panel-menu-item:hover {
    color: var(--sidebar-text-hover) !important;
    background: var(--bg-suave) !important;
}

.rz-panel-menu-item.rz-state-active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 600 !important;
}

.rz-panel-menu-item-icon {
    color: inherit !important;
    opacity: 0.65;
    font-size: 1.15rem !important;
}

.rz-navigation-item-wrapper-active {
    background-color: transparent !important;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-wrapper.rz-state-active {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
}

/* ===================================================================
   Cards
   =================================================================== */
.rz-card {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow) !important;
    transition: var(--transition) !important;
    border: 1px solid var(--border-color) !important;
    background: #ffffff !important;
}

.rz-card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-1px);
}

/* ===================================================================
   Buttons
   =================================================================== */
.rz-button {
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    text-transform: none !important;
    box-shadow: none !important;
    letter-spacing: 0.01em;
}

.rz-button-primary {
    background: var(--primary-color) !important;
    color: white !important;
}

.rz-button-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--jac-azul-rgb), 0.3) !important;
}

.rz-button-secondary:hover,
.rz-button-light:hover {
    transform: translateY(-1px);
}

/* Botones Light con Outlined quedan transparentes — los forzamos a sólidos globalmente */
.rz-button-light {
    background: var(--bg-acento) !important;
    color: var(--txt-1) !important;
    border: 1px solid var(--borde-fuerte) !important;
}

.rz-button-light:hover {
    background: var(--borde-acento) !important;
}

.rz-variant-outlined.rz-button-light {
    background: var(--bg-acento) !important;
    color: var(--txt-1) !important;
    border: 1px solid var(--borde-fuerte) !important;
}


/* ===================================================================
   DataGrid
   =================================================================== */
.rz-datatable {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.rz-datatable-header {
    background: var(--bg-suave) !important;
    color: var(--txt-3) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-color) !important;
}

.rz-datatable-data tr {
    transition: background-color 0.15s ease !important;
}

.rz-datatable-data tr:hover td {
    background-color: var(--bg-suave) !important;
}

.rz-cell-data {
    color: var(--txt-1) !important;
    font-size: 0.875rem;
}

/* ===================================================================
   Form Fields
   =================================================================== */
.rz-textbox,
.rz-password,
.rz-dropdown,
.rz-numeric {
    border-radius: 0.5rem !important;
    border: 1px solid var(--border-color) !important;
    background-color: #fff !important;
    transition: var(--transition) !important;
}

.rz-textbox:focus,
.rz-password:focus,
.rz-dropdown:focus,
.rz-numeric:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--jac-azul-rgb), 0.15) !important;
}

/* ===================================================================
   Dashboard Stat Cards
   =================================================================== */
.dashboard-stat-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    border-left: 4px solid transparent;
}

.dashboard-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.dashboard-stat-card.primary {
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-acento) 100%);
    border-left-color: var(--jac-azul);
}

.dashboard-stat-card.success {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
    border-left-color: #10b981;
}

.dashboard-stat-card.warning {
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    border-left-color: #f59e0b;
}

.dashboard-stat-card.info {
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-acento) 100%);
    border-left-color: var(--jac-celeste);
}

/* ===================================================================
   Marca — isotipo del header y perrito del login
   Cada logo va en dos variantes (azul / blanco) y se intercambian
   según el tema, porque el azul de marca no contrasta sobre navy.
   =================================================================== */
.jacinto-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.jacinto-logo {
    height: 2rem;
    width: auto;
    display: block;
}

.login-logo {
    width: 170px;
    max-width: 100%;
    height: auto;
    display: block;
}

.jacinto-logo-oscuro,
.login-logo-oscuro {
    display: none;
}

[data-theme="dark"] .jacinto-logo-claro,
[data-theme="dark"] .login-logo-claro {
    display: none;
}

[data-theme="dark"] .jacinto-logo-oscuro,
[data-theme="dark"] .login-logo-oscuro {
    display: block;
}

/* ===================================================================
   Login
   =================================================================== */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--jac-azul) 0%, var(--jac-azul-profundo) 100%);
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    animation: loginFadeIn 0.4s ease-out;
}

@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================================
   Footer
   =================================================================== */

/* ===================================================================
   Global Search Bar
   =================================================================== */
.global-search {
    position: relative;
    flex: 0 1 380px;
    margin-left: 1.5rem;
}

.global-search-box {
    display: flex;
    align-items: center;
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    padding: 0 0.75rem;
    height: 2.25rem;
    transition: var(--transition);
}

.global-search-box:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--jac-azul-rgb), 0.12);
    background: #fff;
}

.global-search-icon {
    font-size: 1.1rem !important;
    color: var(--txt-placeholder);
    flex-shrink: 0;
}

.global-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.825rem;
    color: var(--header-text);
    width: 100%;
    padding: 0 0.5rem;
}

.global-search-input::placeholder {
    color: var(--txt-placeholder);
}

.global-search-clear {
    cursor: pointer;
    color: var(--txt-placeholder);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s;
}

.global-search-clear:hover {
    color: var(--danger-color);
}

.global-search-clear .rzi {
    font-size: 1rem !important;
}

.global-search-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    flex-shrink: 0;
    animation: searchSpin 0.6s linear infinite;
}

@keyframes searchSpin {
    to { transform: rotate(360deg); }
}

.global-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 480px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    max-height: 480px;
    overflow-y: auto;
    z-index: 9999;
    padding: 0.375rem;
    animation: searchDropIn 0.15s ease-out;
}

@keyframes searchDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.global-search-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--txt-3);
    padding: 0.625rem 0.75rem 0.25rem;
}

.global-search-group-count {
    background: var(--body-bg);
    color: var(--txt-2);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    min-width: 1.1rem;
    text-align: center;
}

.global-search-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.12s;
}

.global-search-item:hover,
.global-search-item.selected {
    background: var(--sidebar-active-bg);
}

.global-search-item-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.global-search-item-badge .rzi {
    font-size: 1.05rem !important;
}

.global-search-item-badge.badge-page {
    background: var(--bg-acento);
    color: var(--jac-azul);
}

.global-search-item-badge.badge-producto {
    background: #ecfdf5;
    color: #10b981;
}

.global-search-item-badge.badge-cliente {
    background: var(--bg-acento);
    color: var(--jac-azul-medio);
}

.global-search-item-badge.badge-proveedor {
    background: #fef3c7;
    color: #d97706;
}

.global-search-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.global-search-item-name {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--txt-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search-item-subtitle {
    font-size: 0.7rem;
    color: var(--txt-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search-item-go {
    font-size: 0.9rem !important;
    color: var(--borde-fuerte);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}

.global-search-item:hover .global-search-item-go {
    opacity: 1;
    color: var(--primary-color);
}

.global-search-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--txt-3);
    font-size: 0.825rem;
    justify-content: center;
}

.global-search-empty .rzi {
    font-size: 1.25rem !important;
}

/* ===================================================================
   Footer
   =================================================================== */
.rz-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--txt-2);
    font-size: 0.8rem;
}

/* ===================================================================
   Badges
   =================================================================== */
.rz-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em;
}

/* ===================================================================
   Notifications
   =================================================================== */
.rz-notification {
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

/* ===================================================================
   Scrollbar
   =================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--txt-placeholder);
}

/* ===================================================================
   Page Titles
   =================================================================== */
h1, .rz-text-h3, .rz-text-h4 {
    letter-spacing: -0.02em;
}

/* ===================================================================
   Sidebar Toggle
   =================================================================== */
.rz-sidebar-toggle {
    color: var(--header-text) !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition) !important;
}

.rz-sidebar-toggle:hover {
    background-color: var(--bg-acento) !important;
    color: var(--primary-color) !important;
}

.rz-sidebar-toggle .rzi {
    font-size: 1.2rem !important;
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 768px) {
    .rz-sidebar {
        position: fixed !important;
        z-index: 1000 !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.08);
    }
}

/* ===================================================================
   Side Panel (Dialog deslizable desde la derecha)
   =================================================================== */
.side-panel {
    position: fixed !important;
    right: 0 !important;
    left: unset !important;
    top: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.10) !important;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    animation: sideSlideIn 0.25s ease-out;
}

.side-panel .rz-dialog-titlebar {
    background: var(--body-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.875rem 1.25rem !important;
}

.side-panel .rz-dialog-title {
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: -0.01em;
}

.side-panel .rz-dialog-content {
    overflow-y: auto;
    padding: 1.25rem !important;
}

@keyframes sideSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* ===================================================================
   Tokens unificados: la paleta de la marca aplicada al tema Radzen.
   ÚNICO lugar donde se definen los colores — el resto de la app debe
   usar var(--rz-*) y NUNCA hex hardcodeado.
   =================================================================== */
:root {
    --rz-primary: var(--jac-azul);
    --rz-primary-light: var(--jac-celeste);
    --rz-primary-lighter: var(--bg-acento);
    --rz-primary-dark: var(--jac-azul-medio);
    --rz-primary-darker: var(--jac-azul-profundo);
    /* "Secondary" queda como neutro apagado, que es lo que se espera de un
       botón secundario (lo usan 18 pantallas). Va #4A6480 y no #7B93AC
       porque Radzen le pone texto blanco encima y el claro daba 2.9:1.
       OJO: hay que definir TODA la familia — pisar sólo --rz-secondary
       dejaba -light/-lighter/-dark en el rosa #e31c65 de Radzen. */
    --rz-secondary: var(--txt-2);
    --rz-secondary-light: var(--txt-3);
    --rz-secondary-lighter: var(--bg-acento);
    --rz-secondary-dark: var(--txt-1);
    --rz-secondary-darker: #071E36;
    --rz-success: #10b981;
    --rz-success-light: #34d399;
    --rz-success-lighter: #d1fae5;
    --rz-success-dark: #059669;
    --rz-warning: #f59e0b;
    --rz-warning-light: #fbbf24;
    --rz-warning-lighter: #fef3c7;
    --rz-warning-dark: #d97706;
    --rz-danger: #ef4444;
    --rz-danger-light: #f87171;
    --rz-danger-lighter: #fee2e2;
    --rz-danger-dark: #dc2626;
    --rz-info: var(--jac-celeste);
    --rz-info-light: #9CC4E8;
    --rz-info-lighter: var(--bg-acento);
    --rz-info-dark: var(--jac-azul-medio);

    /* Familia --rz-on-*-lighter: el color del TEXTO sobre los fondos "lighter".
       Radzen NO los deriva de --rz-primary, son hex fijos (el primary venía
       #4340D2, violeta). De acá salía el violeta del ítem de menú activo:
       --rz-panel-menu-item-active-color -> var(--rz-on-primary-lighter),
       y lo mismo los de 2do y 3er nivel. Se corrige en la variable y no en
       el selector para que valga en todo el árbol del menú. */
    --rz-on-primary-lighter: var(--jac-azul);
    --rz-on-secondary-lighter: var(--txt-2);
    --rz-on-info-lighter: var(--jac-azul-medio);
    --rz-on-success-lighter: #059669;
    --rz-on-warning-lighter: #d97706;
    --rz-on-danger-lighter: #dc2626;

    /* Radzen usa --rz-secondary (rosa #e31c65 por defecto) para los links y
       para la barrita del ítem activo. Ambos pasan al azul de marca. */
    --rz-link-color: var(--jac-azul);
    --rz-link-hover-color: var(--jac-azul-profundo);

    /* Todo lo que Radzen pinta como "seleccionado" cuelga de --rz-secondary,
       que acá es un neutro. Los acentos de selección van al azul de marca. */
    --rz-panel-menu-item-active-indicator: var(--jac-azul);
    --rz-datepicker-calendar-selected-background-color: var(--jac-azul);
    --rz-datepicker-calendar-selected-hover-background-color: var(--jac-azul-profundo);
    --rz-tabs-tab-selected-top-border-color: var(--jac-azul);
    --rz-steps-number-selected-background: var(--jac-azul);
    --rz-steps-title-selected-color: var(--jac-azul);
    --rz-grid-cell-focus-background-color: var(--bg-acento);
    --rz-grid-filter-focus-color: var(--jac-azul);
    --rz-grid-column-resizer-helper-background-color: var(--jac-azul);
    --rz-editor-button-selected-background-color: var(--bg-acento);
    --rz-gauge-arc-value-color: var(--jac-azul);
    /* Tipografía: Arial (metric-compatible con Helvetica), sin dependencia de internet (POS offline) */
    --rz-text-font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --rz-root-font-family: var(--rz-text-font-family);
    /* Bordes un poco más redondeados que Material default */
    --rz-border-radius: 8px;
}

/* ── Ajustes del tema OSCURO ────────────────────────────────────── */
[data-theme="dark"] {
    /* Escala oscura de Jacinto: navy derivado del azul profundo de la
       marca, en lugar del slate genérico que había antes. */
    --dk-fondo: #071E36;
    --dk-superficie: var(--jac-azul-profundo);
    --dk-hover: #12395F;
    --dk-borde: var(--jac-azul-medio);
    --dk-txt-muted: #7FAAD2;

    --body-bg: var(--dk-fondo);
    --header-bg: var(--dk-superficie);
    /* Los "lighter" claros quedan ilegibles en oscuro: versiones tenues */
    --rz-primary-lighter: rgba(var(--jac-azul-rgb), 0.22);
    --rz-success-lighter: rgba(16, 185, 129, 0.18);
    --rz-warning-lighter: rgba(245, 158, 11, 0.18);
    --rz-danger-lighter: rgba(239, 68, 68, 0.18);
    --rz-info-lighter: rgba(108, 172, 228, 0.18);

    /* Sobre esos tintes oscuros el azul de marca no se lee: el texto del
       ítem activo (y compañía) pasa a celeste. */
    --rz-on-primary-lighter: var(--jac-celeste);
    --rz-on-secondary-lighter: var(--txt-sobre-oscuro-suave);
    --rz-on-info-lighter: var(--jac-celeste);
    --rz-on-success-lighter: #34d399;
    --rz-on-warning-lighter: #fbbf24;
    --rz-on-danger-lighter: #f87171;

    --rz-link-color: var(--jac-celeste);
    --rz-link-hover-color: var(--txt-sobre-oscuro);

    /* Secondary en oscuro: el neutro claro no aguanta texto blanco, va navy */
    --rz-secondary: var(--jac-azul-medio);
    --rz-secondary-light: #2E5F92;
    --rz-secondary-lighter: rgba(var(--jac-azul-rgb), 0.22);
    --rz-secondary-dark: var(--jac-azul-profundo);
    --rz-secondary-darker: #071E36;

    --rz-panel-menu-item-active-indicator: var(--jac-celeste);
    --rz-datepicker-calendar-selected-background-color: var(--jac-azul);
    --rz-datepicker-calendar-selected-hover-background-color: var(--jac-celeste);
    --rz-tabs-tab-selected-top-border-color: var(--jac-celeste);
    --rz-steps-number-selected-background: var(--jac-azul);
    --rz-steps-title-selected-color: var(--jac-celeste);
    --rz-grid-cell-focus-background-color: rgba(var(--jac-azul-rgb), 0.28);
    --rz-grid-filter-focus-color: var(--jac-celeste);
    --rz-grid-column-resizer-helper-background-color: var(--jac-celeste);
    --rz-editor-button-selected-background-color: rgba(var(--jac-azul-rgb), 0.28);
    --rz-gauge-arc-value-color: var(--jac-celeste);
}

[data-theme="dark"] .rz-body { background-color: var(--dk-fondo) !important; }

/* ===================================================================
   MODO OSCURO — overrides de todas las reglas con colores claros fijos.
   Navy Jacinto: fondo #071E36, superficie #0B2E51 (azul profundo),
   hover #12395F, borde #1E4A78 (azul medio), texto #EAF3FB /
   secundario #B9D3EA. El acento de texto es el celeste #6CACE4.
   =================================================================== */
[data-theme="dark"] {
    --header-bg: var(--dk-superficie);
    --header-text: var(--txt-sobre-oscuro);
    --sidebar-bg: var(--dk-superficie);
    --sidebar-text: var(--txt-sobre-oscuro-suave);
    --sidebar-text-hover: var(--txt-sobre-oscuro);
    --sidebar-active-bg: rgba(var(--jac-azul-rgb), 0.38);
    --sidebar-active-text: var(--jac-celeste);
    --border-color: var(--dk-borde);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] body { color: var(--txt-sobre-oscuro-suave); }

[data-theme="dark"] .rz-panel-menu-item:hover { background: var(--dk-hover) !important; }

[data-theme="dark"] .rz-card { background: var(--dk-superficie) !important; }

[data-theme="dark"] .rz-button-light {
    background: var(--dk-hover) !important;
    color: var(--txt-sobre-oscuro) !important;
}
[data-theme="dark"] .rz-button-light:hover { background: var(--dk-borde) !important; }
[data-theme="dark"] .rz-variant-outlined.rz-button-light {
    background: transparent !important;
    border-color: var(--dk-borde) !important;
    color: var(--txt-sobre-oscuro) !important;
}

[data-theme="dark"] .rz-datatable-header {
    background: var(--dk-hover) !important;
    color: var(--txt-sobre-oscuro-suave) !important;
}
[data-theme="dark"] .rz-datatable-data tr:hover td { background-color: var(--dk-hover) !important; }
[data-theme="dark"] .rz-cell-data { color: var(--txt-sobre-oscuro) !important; }

[data-theme="dark"] .rz-numeric,
[data-theme="dark"] .rz-textbox,
[data-theme="dark"] .rz-textarea,
[data-theme="dark"] .rz-dropdown,
[data-theme="dark"] .rz-calendar .rz-inputtext {
    background: var(--dk-hover) !important;
    color: var(--txt-sobre-oscuro) !important;
    border-color: var(--dk-borde) !important;
}

[data-theme="dark"] .rz-footer {
    background-color: var(--dk-superficie) !important;
    color: var(--txt-sobre-oscuro-suave);
}

[data-theme="dark"] .rz-sidebar-toggle:hover { background: var(--dk-hover) !important; }

[data-theme="dark"] .side-panel .rz-dialog-content { background: var(--dk-superficie) !important; }

[data-theme="dark"] .rz-notification { background: var(--dk-superficie) !important; color: var(--txt-sobre-oscuro); }

/* Buscador global del header */
[data-theme="dark"] .global-search-box {
    background: var(--dk-hover) !important;
    border-color: var(--dk-borde) !important;
    color: var(--txt-sobre-oscuro);
}
[data-theme="dark"] .global-search-box:focus-within { background: var(--dk-borde) !important; }
[data-theme="dark"] .global-search-input { color: var(--txt-sobre-oscuro) !important; }
[data-theme="dark"] .global-search-input::placeholder { color: var(--dk-txt-muted) !important; }
[data-theme="dark"] .global-search-dropdown {
    background: var(--dk-superficie) !important;
    border-color: var(--dk-borde) !important;
}
[data-theme="dark"] .global-search-group-label { color: var(--dk-txt-muted) !important; }
[data-theme="dark"] .global-search-item-name { color: var(--txt-sobre-oscuro) !important; }
[data-theme="dark"] .global-search-item-subtitle { color: var(--dk-txt-muted) !important; }
[data-theme="dark"] .global-search-item:hover { background: var(--dk-hover) !important; }
[data-theme="dark"] .global-search-empty { color: var(--txt-sobre-oscuro-suave) !important; }
[data-theme="dark"] .global-search-icon,
[data-theme="dark"] .global-search-clear { color: var(--dk-txt-muted); }
[data-theme="dark"] .global-search-item-go { color: var(--dk-borde); }

/* Tarjetas del dashboard: tintes oscuros */
[data-theme="dark"] .dashboard-stat-card.primary { background: rgba(var(--jac-azul-rgb), 0.28) !important; }
[data-theme="dark"] .dashboard-stat-card.success { background: rgba(16, 185, 129, 0.15) !important; }
[data-theme="dark"] .dashboard-stat-card.warning { background: rgba(245, 158, 11, 0.15) !important; }
[data-theme="dark"] .dashboard-stat-card.info { background: rgba(108, 172, 228, 0.18) !important; }

/* El login en oscuro: el degradé de marca se apaga para no encandilar */
[data-theme="dark"] .login-container {
    background: linear-gradient(135deg, var(--jac-azul-profundo) 0%, var(--dk-fondo) 100%);
}

/* ── Indicador de conexión (header) ──────────────────────────────────────────
   Estar operando contra el catálogo local en vez de contra el servidor tiene
   que ser evidente sin buscarlo: offline se pinta con fondo, no solo color de
   texto, porque el rojo suelto sobre el header se pierde. */
.indicador-conexion {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.indicador-conexion-online {
    color: var(--rz-success);
}

.indicador-conexion-offline {
    color: #fff;
    background: var(--rz-danger);
}

[data-theme="dark"] .indicador-conexion-offline {
    background: #b91c1c;
}

/* Ventas cobradas offline todavía sin enviar. Ámbar y no rojo: no es un error,
   es un pendiente — pero tiene que verse aunque la conexión ya haya vuelto. */
.indicador-conexion-pendientes {
    color: #fff;
    background: var(--rz-warning);
}

[data-theme="dark"] .indicador-conexion-pendientes {
    background: #b45309;
}

/* Corte largo (se acerca el plazo para poder facturar lo encolado): rojo intenso
   y parpadeo suave, para que no pase inadvertido en el header. */
.indicador-conexion-critico {
    background: #7f1d1d;
    animation: indicador-latido 2s ease-in-out infinite;
}

@keyframes indicador-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .indicador-conexion-critico { animation: none; }
}

/* El chip de pendientes abre el detalle: tiene que verse clickeable. */
.indicador-clickeable { cursor: pointer; }
.indicador-clickeable:hover { filter: brightness(1.12); }
.indicador-clickeable:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ===================================================================
   Ficha de producto — pantalla de Precios

   Dos cosas que hay que resolver desde acá:
   1) Radzen aplica el Style del componente al wrapper, no al <input>,
      así que el tamaño y la alineación de los importes se alcanzan
      por .rz-spinner-input.
   2) --txt-1/2/3 NO se redefinen en el tema oscuro (son la escala
      clara), así que esta sección declara sus propios tokens y los
      voltea en [data-theme="dark"]. Usar --txt-2 directo dejaría las
      etiquetas azul oscuro sobre fondo azul oscuro.
   =================================================================== */

:root {
    --precio-texto: var(--txt-1);
    --precio-label: var(--txt-2);
    --precio-simbolo: var(--txt-3);
    --precio-destacado: var(--jac-azul);
    --precio-hover: var(--bg-acento);
    --precio-superficie: var(--bg-acento);
    --precio-borde: var(--borde);
}

/* En oscuro la escala clara no sirve: --bg-acento es celeste (#EAF3FB) y
   quedaría un bloque claro sobre el navy, y los grises de Radzen chocan
   con la escala azulada de Jacinto. */
[data-theme="dark"] {
    --precio-texto: var(--txt-sobre-oscuro);
    --precio-label: var(--txt-sobre-oscuro-suave);
    --precio-simbolo: var(--dk-txt-muted);
    --precio-destacado: var(--jac-celeste);
    --precio-hover: var(--dk-hover);
    --precio-superficie: var(--dk-hover);
    --precio-borde: var(--dk-borde);
}

/* La etiqueta y el importe se mantienen juntos en vez de irse a los
   extremos opuestos de una pantalla ancha. */
.precio-fila {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.35rem 0;
    max-width: 30rem;
}

.precio-fila > label {
    font-size: 1.15rem;
    color: var(--precio-label);
}

.precio-monto {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Las flechitas de incremento no sirven para cargar plata y se comen el
   ancho útil del campo, empujando el número hacia la izquierda. */
.precio-monto .rz-spinner-up,
.precio-monto .rz-spinner-down,
.precio-otros .rz-spinner-up,
.precio-otros .rz-spinner-down { display: none; }

.precio-monto .rz-spinner,
.precio-otros .rz-spinner { width: auto; }

.precio-monto .rz-spinner-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.55rem;
    width: 8.5rem;
    padding: 0.25rem 0.65rem;
}

.precio-simbolo {
    font-size: 1.25rem;
    color: var(--precio-simbolo);
}

/* El precio de venta es el número que se busca al entrar: pesa más. */
.precio-monto.destacado .rz-spinner-input {
    font-size: 2.05rem;
    width: 10.5rem;
    color: var(--precio-destacado);
}

.precio-monto.destacado .precio-simbolo {
    font-size: 1.55rem;
    color: var(--precio-destacado);
}

.precio-separador {
    height: 3px;
    background: var(--precio-destacado);
    border-radius: 2px;
    margin: 0.5rem 0 0.35rem;
    opacity: 0.85;
    max-width: 30rem;
}

/* Los desplegables son enlaces, no botones. La regla global de
   .rz-button-light los pinta con fondo y borde !important, y cinco de
   esos a todo el ancho quedan como una pila de barras celestes. */
.rz-button.precio-toggle {
    width: 100%;
    justify-content: flex-start !important;
    text-align: left;
    padding: 0.8rem 1.5rem !important;
    font-weight: 600;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--precio-destacado) !important;
}

.rz-button.precio-toggle:hover {
    background: var(--precio-hover) !important;
    transform: none !important;
}

/* Importes dentro de "Otros precios": misma alineación, tamaño normal. */
.precio-otros .rz-spinner-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ===================================================================
   MODO OSCURO — escala neutra de Radzen remapeada al navy de Jacinto

   material-dark-base.css trae una escala de GRISES PUROS (#121212 …
   #e0e0e0). Como acá el cromo de la app se pinta navy, todo componente
   de Radzen sin regla propia —submenús desplegados, popups, dropdowns,
   diálogos, paneles— quedaba gris flotando sobre azul.

   Remapear la escala entera de una vez es preferible a seguir agregando
   overrides por componente: cualquier componente nuevo hereda el navy
   correcto sin tocar nada. Se respeta el orden de luminancia original
   (50 = más claro → 900 = más oscuro) para no romper los contrastes que
   Radzen calcula a partir de estos tokens.
   =================================================================== */
[data-theme="dark"] {
    --rz-base-50:  #EAF3FB;  /* texto principal */
    --rz-base-100: #B9D3EA;  /* texto secundario */
    --rz-base-200: #7FAAD2;  /* texto atenuado */
    --rz-base-300: #5A87B4;
    --rz-base-400: #3E6E9E;
    --rz-base-500: #2A5C8F;
    --rz-base-600: #1E4A78;  /* bordes */
    --rz-base-700: #12395F;  /* hover */
    --rz-base-800: #0B2E51;  /* superficies: paneles, menús, popups */
    --rz-base-900: #071E36;  /* fondo */

    --rz-base: #1E4A78;
    --rz-base-light: #7FAAD2;
    --rz-base-lighter: #EAF3FB;
    --rz-base-dark: #0B2E51;
    --rz-base-darker: #071E36;
}

/* ===================================================================
   Pestañas

   Material las trae en MAYÚSCULAS con letter-spacing de 1.25px, que las
   hace ocupar mucho más de lo que dicen. Se pasan a capitalización
   normal y se achica el paso: se leen igual y pesan menos en pantalla.
   Se ajusta por los tokens de Radzen, no sobreescribiendo sus reglas.
   =================================================================== */
:root,
[data-theme="dark"] {
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-font-size: 0.8125rem;
    --rz-tabs-tab-font-weight: 600;
    --rz-tabs-tab-letter-spacing: 0.01em;
    --rz-tabs-tab-line-height: 1.25rem;
    --rz-tabs-tab-padding-block: 0.55rem;
    --rz-tabs-tab-padding-inline: 0.85rem;
    --rz-tabs-padding: 0.75rem;
}

/* ── Separador horizontal ────────────────────────────────────────────────────
   Reemplaza a <RadzenDivider>, que NO existe en Radzen.Blazor 8.4.0 (verificado
   contra el ensamblado del paquete). Razor lo avisaba con RZ10012 "markup
   element with unexpected name", pero como es sólo un warning, compilaba y se
   renderizaba como una etiqueta <radzendivider> inerte: los 13 separadores del
   sistema —el del cobro, el del arqueo de caja, el del pago a proveedores—
   simplemente no se dibujaban. Nadie lo notó porque la ausencia de una línea no
   se ve; se ve el bloque de texto todo junto y se lo toma por diseño. */
.jac-separador {
    height: 1px;
    border: 0;
    background: var(--rz-border-color, #e2e8f0);
    margin: 0.6rem 0;
}

[data-theme="dark"] .jac-separador { background: var(--dk-borde); }