/* =====================================================
   Sistema de Temas (Light/Dark) inspirado en Material
   - Centralizamos la paleta para cambiarla fácil.
   - Dark es el modo por defecto (se aplica via data-theme="dark").
   - Variables base semánticas (no usar colores directos en componentes).
===================================================== */

/* Paleta de referencia (Material like) */
/* Primary: 6200EE (light), BB86FC (dark tonal) */
/* Secondary: 03DAC6 (teal) */
/* Error: B00020 (light), CF6679 (dark) */

:root {
  --sidebar-width: 250px;
  --radius: 6px;
  /* Altura/forma estándar para controles de formulario */
  --ui-control-height: 36px;
  --ui-control-radius: var(--radius);
  --ui-control-padding-x: .6rem;
  --ui-control-padding-y: 0; /* usamos height fijo con box-sizing:border-box */
  /* Duraciones y z-index comunes */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --elev-border: 1px solid var(--border-color);
  /* Z-index scale (centralized) */
  --z-base: 0;
  --z-widget: 10;
  --z-sidebar: 100;
  --z-nav-open: 30;
  --z-tooltip: 1000;
  --z-overlay: 2000;
  --z-flyout: 12050;

  /* Tipografía */
  --font-stack: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* Escala tipográfica global */
  --font-size-xs: .65rem; /* ayudas muy pequeñas, badges compactos */
  --font-size-sm: .72rem; /* help text, metadata secundaria */
  --font-size-base: .8rem; /* texto de formulario / inputs */
  --font-size-md: .9rem; /* labels, títulos menores */
  --font-size-lg: 1rem; /* headings card */
  --font-size-xl: 1.15rem; /* headings principales */
  --line-height-tight: 1.15;
  --line-height-base: 1.35;
  --line-height-relaxed: 1.5;

  /* Sizing tokens */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;

  /* Fallback (se sobrescribe por tema) */
  --color-bg: #0d1117;
  --color-bg-alt: #161b22;
  --color-surface: #161b22;
  --color-surface-alt: #1e2530;
  --color-text: #e6edf3;
  --color-text-invert: #000000;
  --color-muted: #8b949e;
  --color-border-raw: #30363d;
  --color-primary: #1f6feb;
  --color-primary-accent: #388bfd;
  --color-primary-contrast: #ffffff;
  --color-secondary: #03dac6;
  --color-secondary-contrast: #000000;
  --color-danger: #cf6679;
  --color-danger-contrast: #000000;
  --color-warning: #f9c513;
  --color-warning-contrast: #000000;
  --color-success: #2ea043;
  --color-success-contrast: #ffffff;
  --border-color: var(--color-border-raw);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.15);
  --shadow-md: 0 2px 6px rgba(0,0,0,.25);

  /* Alias legacy (mantener compatibilidad) */
  --color-accent: var(--color-primary);

  /* ===================== Component Tokens (Editor) ===================== */
  --ce-active-bg: #1e4e94;
  --ce-hover-bg: #3a6fb8;
  --ce-active-fg-soft: #d0e4ff;
  --ce-unsaved: var(--color-warning);
  --ce-drag-border: var(--color-success);
  --ce-dragging-bg: #264f78;
  --ce-drop-target-bg: #f2fff2;
  --ce-drag-over-bg: #e3f2fd;
  --ce-item-hover-bg: #1f2935;
  --ce-item-border: #2a3542;
  --ce-block-border: color-mix(in srgb, var(--color-primary) 50%, #2a3542);
  --ce-metrics: #004d61;
  --ce-rem-soft: #fff59d; /* remaining time normal */
  --ce-rem-exceed: #ff8a80; /* remaining exceed */
}

/* Tema Claro (paleta solicitada) */
[data-theme='light'] {
  /* Paleta base Light */
  /* Radix Slate (light) */
  --clr-dark-a0: #1c2024; /* slate-12 */
  --clr-light-a0: #ffffff;
  /* Primary */
  /* Radix Indigo (light) */
  --clr-primary-a0: #3e63dd;  /* indigo-9 */
  --clr-primary-a10: #3358d4; /* indigo-10 */
  --clr-primary-a20: #3a5bc7; /* indigo-11 */
  --clr-primary-a30: #8da4ef; /* indigo-8 */
  --clr-primary-a40: #c1d0ff; /* indigo-6 */
  --clr-primary-a50: #edf2fe; /* indigo-3 */
  /* Surface */
  --clr-surface-a0: #fcfcfd; /* slate-1 */
  --clr-surface-a10: #f9f9fb; /* slate-2 */
  --clr-surface-a20: #f0f0f3; /* slate-3 */
  --clr-surface-a30: #e8e8ec; /* slate-4 */
  --clr-surface-a40: #e0e1e6; /* slate-5 */
  --clr-surface-a50: #d9d9e0; /* slate-6 */
  /* Tonal Surface */
  /* Radix Indigo (light) - usar sólo donde de verdad queremos un tinte */
  --clr-surface-tonal-a0: #fdfdfe; /* indigo-1 */
  --clr-surface-tonal-a10: #f7f9ff; /* indigo-2 */
  --clr-surface-tonal-a20: #edf2fe; /* indigo-3 */
  --clr-surface-tonal-a30: #e1e9ff; /* indigo-4 */
  --clr-surface-tonal-a40: #d2deff; /* indigo-5 */
  --clr-surface-tonal-a50: #c1d0ff; /* indigo-6 */
  /* Feedback */
  --clr-success-a0: #059669; /* emerald-600 */
  --clr-success-a10: #10b981; /* emerald-500 */
  --clr-success-a20: #34d399; /* emerald-400 */
  --clr-warning-a0: #d97706; /* amber-600 */
  --clr-warning-a10: #f59e0b; /* amber-500 */
  --clr-warning-a20: #fbbf24; /* amber-400 */
  --clr-danger-a0: #dc2626; /* red-600 */
  --clr-danger-a10: #ef4444; /* red-500 */
  --clr-danger-a20: #f87171; /* red-400 */
  --clr-info-a0: #2563eb; /* blue-600 */
  --clr-info-a10: #3b82f6; /* blue-500 */
  --clr-info-a20: #60a5fa; /* blue-400 */

  /* Mapeo semántico */
  /* Estilo Radix: fondo muy claro (no blanco puro), paneles apenas más oscuros */
  --color-bg: #f6f8fc;
  --color-bg-alt: #edf2f9;
  --color-surface: #ffffff;
  --color-surface-alt: #e7ecf4;
  --color-text: var(--clr-dark-a0);
  --color-text-invert: var(--clr-light-a0);
  --color-muted: #5b6472; /* slate-11 tuned */
  --color-border-raw: #cfd7e4;
  --color-primary: var(--clr-primary-a0);
  --color-primary-accent: var(--clr-primary-a10);
  --color-primary-contrast: var(--clr-light-a0);
  --color-secondary: var(--clr-info-a10);
  --color-secondary-contrast: var(--clr-light-a0);
  --color-danger: var(--clr-danger-a0);
  --color-danger-contrast: var(--clr-light-a0);
  --color-warning: var(--clr-warning-a0);
  --color-warning-contrast: var(--clr-dark-a0);
  --color-success: var(--clr-success-a0);
  --color-success-contrast: var(--clr-light-a0);
  --border-color: var(--color-border-raw);
  --color-accent: var(--color-primary);

  /* Tokens UI (Light) */
  --ui-switch-indicator: var(--clr-surface-a50);
  --ui-switch-bg: var(--clr-surface-a30);
  --ui-switch-checked-indicator: var(--clr-surface-a10);
  --ui-switch-checked-bg: var(--clr-primary-a0);
  --ui-switch-checked-label: var(--clr-dark-a0);

  --ui-card-featured-text: var(--clr-dark-a0);
  --ui-card-featured-icon: var(--clr-primary-a30);
  --ui-card-featured-bg: var(--clr-surface-a0);
  --ui-card-featured-border: var(--clr-surface-a30);

  --ui-sidebar-item-text: var(--clr-dark-a0);
  --ui-sidebar-item-bg: var(--color-surface);
  --ui-sidebar-item-active-text: var(--clr-primary-a0);
  --ui-sidebar-item-active-bg: var(--clr-surface-tonal-a20);
  --ui-sidebar-hover-mix: 10%;
  /* Sidebar: un nivel más marcado que header/paneles (Radix "slate-3") */
  --ui-sidebar-bg: var(--clr-surface-a10);

  --ui-search-border: var(--color-border-raw);
  --ui-search-bg: var(--color-surface);
  --ui-search-placeholder: var(--clr-surface-a50);

  --ui-combo-text: var(--clr-dark-a0);
  --ui-combo-bg: var(--color-surface);
  --ui-combo-border: var(--color-border-raw);

  --ui-btn-surface-text: var(--clr-dark-a0);
  --ui-btn-surface-icon: var(--clr-primary-a0);
  --ui-btn-surface-bg: var(--color-surface);
  --ui-btn-surface-border: var(--color-border-raw);

  --ui-icon-surface-bg: var(--clr-surface-a10);
  --ui-icon-surface-fg: var(--clr-dark-a0);

  /* Editor overrides (light) */
  --ce-active-bg: var(--clr-primary-a20);
  --ce-hover-bg: var(--clr-primary-a10);
  --ce-active-fg-soft: #eef2ff;
  --ce-unsaved: var(--color-warning);
  --ce-drag-border: var(--color-success);
  --ce-dragging-bg: #d9e5ff;
  --ce-drop-target-bg: #f2fff2;
  --ce-drag-over-bg: #e8f0ff;
  --ce-item-hover-bg: var(--clr-surface-a10);
  --ce-item-border: var(--clr-surface-a30);
  --ce-block-border: color-mix(in srgb, var(--color-primary) 40%, var(--clr-surface-a30));
  --ce-metrics: var(--clr-primary-a30);
  --ce-rem-soft: var(--clr-warning-a10);
  --ce-rem-exceed: var(--clr-danger-a0);
  /* Indicar a los navegadores que este tema usa esquema claro
     para que apliquen colores nativos de controles acordes */
  color-scheme: light;
}

/* Tema Oscuro (por defecto) - paleta solicitada */
[data-theme='dark'] {
  /* Paleta base Dark */
  /* Radix Slate (dark) */
  --clr-dark-a0: #111113; /* slate-1 */
  --clr-light-a0: #edeef0; /* slate-12 */
  /* Primary */
  /* Radix Indigo (dark) */
  --clr-primary-a0: #3e63dd;  /* indigo-9 */
  --clr-primary-a10: #5472e4; /* indigo-10 */
  --clr-primary-a20: #9eb1ff; /* indigo-11 */
  --clr-primary-a30: #435db1; /* indigo-8 */
  --clr-primary-a40: #304384; /* indigo-6 */
  --clr-primary-a50: #182449; /* indigo-3 */
  /* Surface */
  --clr-surface-a0: #111113; /* slate-1 */
  --clr-surface-a10: #18191b; /* slate-2 */
  --clr-surface-a20: #212225; /* slate-3 */
  --clr-surface-a30: #272a2d; /* slate-4 */
  --clr-surface-a40: #2e3135; /* slate-5 */
  --clr-surface-a50: #363a3f; /* slate-6 */
  /* Tonal Surface */
  --clr-surface-tonal-a0: #11131f; /* indigo-1 */
  --clr-surface-tonal-a10: #141726; /* indigo-2 */
  --clr-surface-tonal-a20: #182449; /* indigo-3 */
  --clr-surface-tonal-a30: #1d2e62; /* indigo-4 */
  --clr-surface-tonal-a40: #253974; /* indigo-5 */
  --clr-surface-tonal-a50: #304384; /* indigo-6 */
  /* Feedback */
  --clr-success-a0: #10b981; /* emerald-500 */
  --clr-success-a10: #34d399; /* emerald-400 */
  --clr-success-a20: #6ee7b7; /* emerald-300 */
  --clr-warning-a0: #f59e0b; /* amber-500 */
  --clr-warning-a10: #fbbf24; /* amber-400 */
  --clr-warning-a20: #fcd34d; /* amber-300 */
  --clr-danger-a0: #ef4444; /* red-500 */
  --clr-danger-a10: #f87171; /* red-400 */
  --clr-danger-a20: #fca5a5; /* red-300 */
  --clr-info-a0: #3b82f6; /* blue-500 */
  --clr-info-a10: #60a5fa; /* blue-400 */
  --clr-info-a20: #93c5fd; /* blue-300 */

  /* Mapeo semántico */
  --color-bg: var(--clr-surface-a0);
  --color-bg-alt: var(--clr-surface-a10);
  --color-surface: var(--clr-surface-a10);
  --color-surface-alt: var(--clr-surface-a20);
  --color-text: var(--clr-light-a0);
  --color-text-invert: var(--clr-dark-a0);
  --color-muted: #b0b4ba; /* slate-11 */
  --color-border-raw: #363a3f; /* slate-6 */
  --color-primary: var(--clr-primary-a0);
  --color-primary-accent: var(--clr-primary-a10);
  --color-primary-contrast: #ffffff;
  --color-secondary: var(--clr-info-a10);
  --color-secondary-contrast: var(--clr-dark-a0);
  --color-danger: var(--clr-danger-a0);
  --color-danger-contrast: var(--clr-light-a0);
  --color-warning: var(--clr-warning-a0);
  --color-warning-contrast: var(--clr-dark-a0);
  --color-success: var(--clr-success-a0);
  --color-success-contrast: var(--clr-light-a0);
  --border-color: var(--color-border-raw);
  --color-accent: var(--color-primary);

  /* Tokens UI (Dark) */
  --ui-switch-indicator: var(--clr-surface-a50);
  --ui-switch-bg: var(--clr-surface-a30);
  --ui-switch-checked-indicator: var(--clr-surface-a10);
  --ui-switch-checked-bg: var(--clr-success-a0);
  --ui-switch-checked-label: var(--clr-light-a0);

  --ui-card-featured-text: var(--clr-light-a0);
  --ui-card-featured-icon: var(--clr-primary-a10);
  --ui-card-featured-bg: var(--clr-surface-a0);
  --ui-card-featured-border: var(--clr-surface-a30);

  --ui-sidebar-item-text: var(--clr-light-a0);
  --ui-sidebar-item-bg: var(--clr-surface-a10);
  --ui-sidebar-item-active-text: var(--clr-primary-a10);
  --ui-sidebar-item-active-bg: var(--clr-surface-a10);
  --ui-sidebar-hover-mix: 20%;
  /* Sidebar: un nivel más marcado que el header */
  --ui-sidebar-bg: var(--clr-surface-a20);

  --ui-search-border: var(--clr-surface-a10);
  --ui-search-bg: var(--clr-surface-a10);
  --ui-search-placeholder: var(--clr-surface-a50);

  --ui-combo-text: var(--clr-light-a0);
  --ui-combo-bg: var(--clr-surface-a10);
  --ui-combo-border: var(--clr-surface-a30);

  --ui-btn-surface-text: var(--clr-light-a0);
  --ui-btn-surface-icon: var(--clr-primary-a10);
  --ui-btn-surface-bg: var(--clr-surface-a10);
  --ui-btn-surface-border: var(--clr-surface-a30);

  --ui-icon-surface-bg: var(--clr-surface-a20);
  --ui-icon-surface-fg: var(--clr-light-a0);

  /* Editor overrides (dark) */
  --ce-active-bg: #3730a3; /* indigo-800 */
  --ce-hover-bg: #4338ca; /* indigo-700 */
  --ce-active-fg-soft: #e0e7ff;
  --ce-unsaved: var(--color-warning);
  --ce-drag-border: var(--color-success);
  --ce-dragging-bg: #1e293b;
  --ce-drop-target-bg: #1e2530;
  --ce-drag-over-bg: #1e3550;
  --ce-item-hover-bg: #1f2935;
  --ce-item-border: #2a3542;
  --ce-block-border: color-mix(in srgb, var(--color-primary) 50%, #2a3542);
  --ce-metrics: #004d61;
  --ce-rem-soft: #fff59d;
  --ce-rem-exceed: #ff8a80;
  /* Indicar a los navegadores que este tema usa esquema oscuro
     para que apliquen colores nativos de controles acordes
     (afecta listboxes/selects, scrollbars, etc.) */
  color-scheme: dark;
}

/* Tema Auto (seguirá prefers-color-scheme al cargar, se aplicará desde JS si se activa) */
/* [data-theme='auto'] usará sólo media queries, sin reglas directas para evitar bloque vacío */
@media (prefers-color-scheme: light){ [data-theme='auto']{ color-scheme:light; } }
@media (prefers-color-scheme: dark){ [data-theme='auto']{ color-scheme:dark; } }

* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-stack); background: var(--color-bg); color: var(--color-text); transition:background .3s var(--ease-standard), color .25s var(--ease-standard); }


/* Componentes UI movidos a static/css/components/ui-kit.css (cards, botones, alerts, badges, switch, search, combobox, icon-surface, theme-toggle) */

.user-info { font-size:.8rem; color:var(--color-muted); }

/* Componente de fecha: estilos movidos a static/css/components/date.css */

/* flatpickr overrides movidos a static/css/components/date.css */