/* =========================================================
   DEV Studio Theme – ÚNICA fuente de verdad de colores
   No usar hex/rgb fuera de este bloque :root
   ========================================================= */

:root {
    /* --- Tipografía ---
       Para cambiar la fuente: editar solo estas dos variables y actualizar
       el @import de Google Fonts en index.html.
       ----------------------------------------------------------------- */
    --font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;

    /* --- Paleta base --- */
    --color-primary: #148F28;
    --color-primary-dark: #0F6E20;
    --color-primary-light: #1FB33A;
    --color-accent: #5FD476;
    --color-surface: #CDEFD6;
    --color-on-primary: #FFFFFF;
    --color-text: #1a1a1a;
    --color-text-muted: #525252;
    --color-text-on-dark: #ededed;
    --color-border: #dcedda;
    --color-bg: #FFFFFF;
    --color-bg-alt: #f5faf5;
    --color-danger: #E53935;
    --color-danger-light: #EF5350;
    --color-danger-dark: #c62828;
    --color-warning: #FB8C00;
    --color-warning-light: #ffcc80;
    --color-warning-bg: #fff3e0;
    --color-pending: #FFBF00;
    --color-unassigned: #FF751F;
    --color-success: #43a047;
    --color-success-dark: #2e7d32;
    --color-success-bg: #f1f8e9;
    --color-success-border: #a5d6a7;
    --color-neutral: #757575;
    --color-neutral-light: #e0e0e0;
    --color-accent-faint: rgba(95, 212, 118, 0.05);
    --color-placeholder: #888888;
    --color-placeholder-light: #bbbbbb;
    --color-tooltip-bg: #323232;
    /* --- Colores semánticos de estado (para badges, iconos, notas) --- */
    --color-state-approved: var(--color-success);
    --color-state-approved-bg: var(--color-success-bg);
    --color-state-approved-border: var(--color-success-border);
    --color-state-rejected: var(--color-danger);
    --color-state-rejected-bg: #ffebee;
    --color-state-rejected-border: #ef9a9a;
    --color-state-pending: #FFBF00;
    --color-state-pending-bg: #fffde7;
    --color-state-pending-border: #fff59d;
    --color-state-unassigned: #FF751F;
    --color-state-unassigned-bg: #fff3e0;
    --color-state-unassigned-border: #ffcc80;
    --color-state-neutral: var(--color-neutral);
    --color-state-neutral-bg: #f5f5f5;
    --color-state-neutral-border: var(--color-neutral-light);
    /* --- Colores componente Radio Button custom --- */
    --color-radio-border: #BFBFBF;
    --color-radio-checked: #4340D2;
    /* --- Colores componente Nota de usuario (burbuja azul indigo) --- */
    --color-note-user-avatar: #5c6bc0;
    --color-note-user-bubble-bg: #e4f2fb;
    --color-note-user-bubble-border: #b2ebf2;
    /* --- Sombras (no dependen del tema de color, pero centralizadas aquí) --- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-node: 0 2px 6px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.15);
    --shadow-hover-strong: 0 3px 10px rgba(0, 0, 0, 0.18);
    --shadow-hover-action: 0 6px 18px rgba(0, 0, 0, 0.06);
    --shadow-error-bar: 0 -1px 2px rgba(0, 0, 0, 0.2);
    /* --- Aliases semánticos (consumidos por el resto del CSS) --- */
    --topbar-bg: var(--color-primary);
    --topbar-text: var(--color-on-primary);
    --nav-bg: var(--color-primary-dark);
    --nav-text: var(--color-on-primary);
    --sidebar-bg: var(--color-bg-alt);
    --sidebar-border: var(--color-border);
    --link-color: var(--color-primary);
    --focus-ring: var(--color-primary-light);
    --button-bg: var(--color-primary);
    --button-bg-hover: var(--color-primary-dark);
    --button-text: var(--color-on-primary);
    --grid-header-bg: var(--color-primary);
    --grid-header-text: var(--color-on-primary);
    --grid-row-hover: var(--color-surface);
    --grid-row-alt: var(--color-bg-alt);
    --input-border: var(--color-border);
    --input-focus: var(--color-primary);
    --tab-active: var(--color-primary);
    --tab-active-text: var(--color-on-primary);
    --card-bg: var(--color-bg);
    --card-border: var(--color-border);
    --badge-bg: var(--color-accent);
    --divider-color: var(--color-accent);
    --text-code: var(--color-primary-dark);
    --text-muted: var(--color-text-muted);
    --separator-color: var(--color-border);
    --footer-bg: var(--color-bg-alt);
    --row-bg: var(--color-bg-alt);
    --top-row-bg: var(--color-bg-alt);
    --top-row-border: var(--color-border);
    /* -------------------------------------------------------
     Overrides Radzen (--rz-*)
     Estos sobreescriben el material-base.css de Radzen
     ------------------------------------------------------- */
    /* Tipografía */
    --rz-text-font-family: var(--font-family-base);
    /* Colores principales */
    --rz-primary: var(--color-primary);
    --rz-primary-darker: var(--color-primary-dark);
    --rz-primary-lighter: var(--color-surface);
    --rz-on-primary-lighter: var(--color-primary-dark);
    --rz-success: var(--color-accent);
    --rz-warning: #FFBF00;
    --rz-base-background-color: var(--color-bg);
    --rz-secondary-background-color: var(--color-bg-alt);
    --rz-text-color: var(--color-text);
    --rz-border-radius: 6px;
    /* RadzenButton */
    --rz-button-background-color: var(--color-primary);
    --rz-button-hover-background-color: var(--color-primary-dark);
    --rz-button-active-background-color: var(--color-primary-dark);
    --rz-button-color: var(--color-on-primary);
    /* RadzenDataGrid – cabecera neutra (fondo blanco, texto oscuro) */
    --rz-grid-header-background-color: var(--color-bg);
    --rz-grid-header-color: var(--color-text);
    --rz-grid-alternating-row-background-color: var(--color-bg-alt);
    --rz-grid-row-hover-background-color: var(--color-surface);
    --rz-grid-row-selected-background-color: var(--color-primary);
    /* RadzenTextBox / RadzenNumeric / RadzenDatePicker / RadzenDropDown / RadzenComboBox */
    --rz-input-border-color: var(--color-border);
    --rz-input-focus-border-color: var(--color-primary);
    --rz-input-focus-shadow: 0 0 0 2px var(--color-surface);
    /* RadzenSidebar / Navegación */
    --rz-sidebar-background-color: var(--color-bg-alt);
    --rz-sidebar-color: var(--color-text);
    --rz-navigation-item-color: var(--color-text);
    --rz-navigation-item-active-color: var(--color-on-primary);
    --rz-link-color: var(--color-primary);
    --rz-selectbar-selected-color: var(--color-on-primary);
    /* RadzenPanelMenu */
    --rz-panel-menu-item-selected-background-color: var(--color-primary);
    --rz-panel-menu-item-selected-color: var(--color-primary);
    --rz-panel-menu-item-hover-background-color: var(--color-surface);
    /* RadzenTabs */
    --rz-tab-active-background-color: var(--color-primary);
    --rz-tab-active-color: var(--color-on-primary);
    /* RadzenDialog */
    --rz-dialog-background-color: var(--color-bg);
    --rz-dialog-header-background-color: var(--color-primary);
    --rz-dialog-header-color: var(--color-on-primary);
    /* RadzenTooltip */
    --rz-tooltip-background-color: var(--color-primary-dark);
    --rz-tooltip-color: var(--color-on-primary);
    /* RadzenNotification */
    --rz-notification-success-background-color: var(--color-surface);
    --rz-notification-success-color: var(--color-primary-dark);
    --rz-notification-success-icon-color: var(--color-primary-dark);
    --rz-notification-info-background-color: var(--color-bg-alt);
    --rz-notification-info-color: var(--color-text);
    --rz-notification-info-icon-color: var(--color-primary);
    /* RadzenBadge */
    --rz-badge-background-color: var(--color-accent);
    --rz-badge-color: var(--color-text);
    /* RadzenCard */
    --rz-card-background-color: var(--color-bg);
    --rz-card-border-color: var(--color-border);
    /* RadzenCheckBox / RadzenSwitch / RadzenRadioButton */
    --rz-checkbox-checked-background-color: var(--color-primary);
    --rz-switch-checked-background-color: var(--color-primary);
    --rz-switch-checked-circle-background-color: var(--color-primary-dark);
    --rz-radio-checked-background-color: var(--color-primary);
    /* RadzenProgressBar */
    --rz-progress-bar-background-color: var(--color-surface);
    --rz-progress-bar-fill-color: var(--color-primary);
    /* RadzenPager – página seleccionada */
    --rz-pager-numeric-button-selected-background-color: var(--color-primary);
    --rz-pager-numeric-button-selected-color: var(--color-on-primary);
    /* RadzenListBox / RadzenPickList – ítems seleccionados */
    --rz-listbox-item-selected-background-color: var(--color-surface);
    --rz-listbox-item-selected-color: var(--color-primary-dark);
    /* RadzenDropDown – ítem seleccionado */
    --rz-dropdown-item-selected-background-color: var(--color-surface);
    --rz-dropdown-item-selected-color: var(--color-primary-dark);
    /*RadzenDatePiker - selectedItem*/
    --rz-datepicker-calendar-selected-hover-background-color: var(--color-primary);
    --rz-sidebar-toggle-hover-background-color: var(--color-primary-dark);
    --rz-steps-title-selected-color: var(--color-primary);
}


.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled){
    background-color:var(--color-primary);
}
.rz-selectbar .rz-button.rz-state-active {
    background-color: var(--color-primary);
}

.rz-steps .rz-state-highlight .rz-steps-number {
    background: var(--color-primary);
}
.rz-steps .rz-state-highlight .rz-steps-title {
    color: var(--color-primary);
}

/* --- Botones Variant.Text sobre fondos de color primario de Radzen --- */
.rz-background-color-primary .rz-button.rz-variant-text,
.rz-background-color-primary-lighter .rz-button.rz-variant-text,
.rz-background-color-primary-darker .rz-button.rz-variant-text {
    color: var(--color-on-primary) !important;
}

/* --- Dark mode placeholder (estructura lista para implementar) --- */
@media (prefers-color-scheme: dark) {
    /* TODO: override vars for dark mode */
}