/* =========================================================
   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;
    /* --- Info (azul): fichaje abierto, eventos informativos, turno de tarde --- */
    --color-info: #1e88e5;
    --color-info-bg: #e3f2fd;
    --color-info-border: #90caf9;
    --color-info-dark: #1565c0;
    /* --- Violeta: turno de noche --- */
    --color-violet: #5e35b1;
    --color-violet-bg: #ede7f6;
    --color-violet-border: #b39ddb;
    /* --- Teal: indicador de banderas de jornada --- */
    --color-teal: #00897b;
    /* --- Paleta de avatares (asignación cíclica por nombre) --- */
    --avatar-1: #1e88e5;
    --avatar-2: #8e24aa;
    --avatar-3: #fb8c00;
    --avatar-4: #00897b;
    --avatar-5: #6d4c41;
    --avatar-6: #e53935;
    --avatar-7: #3949ab;
    --avatar-8: #039be5;
    /* --- 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-pending-text: #9c7a00;
    --color-pending-ink: #5a4a00;
    --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);
    /* --- Escala de espaciado (base 4px) ---
       Usar en lugar de px sueltos para paddings/gaps/margins. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    /* --- Escala de radios de borde --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    /* --- Escala tipográfica --- */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-base: 14px;
    --font-lg: 15px;
    --font-title: 22px;
    --font-stat: 26px;
    /* --- 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: var(--radius-sm);
    /* 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);

    --md-on-primary: #ffffff; /* color de texto sobre el color primario (header) */
    --md-surface: #ffffff; /* fondo del menú desplegable */
    --md-on-surface: #161d17; /* color de texto dentro del menú */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}


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

/* RadzenSwitch: reducir el halo de hover del círculo para que no desborde el componente */
.rz-switch .rz-switch-circle:hover:not(.rz-disabled):before {
    box-shadow: var(--rz-switch-box-shadow), 0 0 0 4px rgba(0, 0, 0, 0.04) !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled):before {
    box-shadow: var(--rz-switch-box-shadow), 0 0 0 4px var(--rz-primary-lighter) !important;
}

.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;
}

/* =========================================================
   Defaults globales de Radzen (.rz-*)
   El look corporativo estándar (radio, sombra, contenedores)
   se aplica AQUÍ una sola vez, de modo que cualquier componente
   Radzen lo herede automáticamente sin Style/class por instancia.
   Regla: no repetir border-radius/box-shadow/padding estándar en
   cada página — ya es el defecto. Style inline solo para lo
   excepcional (anchos concretos, etc.).
   ========================================================= */

/* RadzenCard: radio y sombra corporativos por defecto */
.rz-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* RadzenButton: radio consistente con la escala */
.rz-button {
    border-radius: var(--radius-sm);
}

/* La confirmación del selector de hora usa una variante secundaria de Radzen. */
.rz-timepicker > .rz-button.rz-secondary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.rz-timepicker > .rz-button.rz-secondary:hover:not(.rz-state-disabled) {
    background-color: var(--color-primary-dark);
}

/* DataGrid dentro de una Card: la card ya aporta el marco; el grid
   pierde su borde/radio propios y hereda las esquinas de la card
   (evita el patrón repetido <RadzenCard Style="padding:0"> + doble borde). */
.rz-card .rz-datatable,
.rz-card .rz-data-grid {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.rz-data-grid{
    border-radius: var(--radius-lg);
}

/* FormField outlined ocupa el ancho de su contenedor por defecto
   (en formularios/diálogos es lo habitual; los filtros horizontales
   fijan ancho explícito con min-width en .filter-bar). */
.rz-form-field {
    border-radius: var(--radius-sm);
}

/* RadzenDialog: esquinas redondeadas acordes a la escala */
.rz-dialog {
    border-radius: var(--radius-lg);
}

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