/* ==========================================================================
   PezControl — theme.css (Sistema de diseño canónico)
   Fuente de verdad: repos/ingepresupuestos/utils/theme.py
   ========================================================================== */

:root {
  /* ── Escala de capas (z-index). Orden obligatorio: cualquier panel/modal nuevo usa un token ── */
  --z-sticky: 10;              /* cabeceras pegajosas de tablas */
  --z-drawer-backdrop: 90;     /* capa atenuada del detalle de Presupuesto */
  --z-drawer: 95;              /* detalle de Presupuesto */
  --z-topbar: 100;             /* barra superior */
  --z-wide-drawer-backdrop: 100; /* capa del panel de Cronograma */
  --z-wide-drawer: 101;        /* panel de Cronograma */
  --z-avance-drawer: 150;      /* panel de partes diarios (contiene su propia capa) */
  --z-tooltip: 190;            /* tooltips flotantes (Gantt): sobre paneles, bajo modales */
  --z-modal: 200;              /* modales y confirmaciones: siempre sobre los paneles */
  --z-toast: 300;              /* avisos: encima de todo */

  /* Marca (Naranja Elementary - theme.py) */
  --color-orange-50: #FEF5EB;
  --color-orange-100: #FDE8D0;
  --color-orange-300: #F9A65C;
  --color-orange-500: #F37329;
  --color-orange-700: #C0621A;
  --color-orange-900: #7A3800;

  --color-brand: var(--color-orange-500);
  --color-brand-hover: var(--color-orange-700);
  --color-brand-soft: var(--color-orange-50);
  --color-brand-softer: var(--color-orange-100);
  --color-brand-dark: var(--color-orange-900);
  --color-brand-300: var(--color-orange-300);

  /* Slate (Azul-gris oscuro) */
  --color-slate-900: #1A2535;
  --color-slate-800: #1F2A38;
  --color-slate-700: #273445;
  --color-slate-500: #485A6C;
  --color-slate-400: #5C6B7A;
  --color-slate-300: #667885;
  --color-slate-100: #95A3AB;

  /* Silver (Greys neutros) */
  --color-silver-50: #FBFBFC;
  --color-silver-100: #F8F9FA;
  --color-silver-200: #F0F1F2;
  --color-silver-300: #D4D4D4;
  --color-silver-500: #ABACAE;
  --color-silver-700: #7E8087;
  --color-white: #FFFFFF;

  /* Superficies (Modo Claro) */
  --bg-app: var(--color-silver-100);
  --bg-surface: var(--color-white);
  --bg-surface-alt: var(--color-silver-50);
  --bg-surface-subtle: var(--color-silver-200);
  --bg-hover: rgba(243, 115, 41, 0.08);
  --bg-selected: rgba(243, 115, 41, 0.14);

  /* Texto (Modo Claro) */
  --text-primary: var(--color-slate-700);
  --text-secondary: var(--color-slate-500);
  --text-muted: var(--color-slate-300);
  --text-faint: var(--color-slate-100);
  --text-inverse: #FFFFFF;

  /* Bordes (Modo Claro) */
  --border-color: var(--color-silver-300);
  --border-subtle: var(--color-silver-200);

  /* Estados semánticos (theme.py) */
  --color-red-50: #FEE2E2;
  --color-red-500: #C6262E;
  --color-red-700: #991B1B;

  --color-green-50: #D1FAE5;
  --color-green-500: #68B723;
  --color-green-700: #16A34A;
  --color-green-900: #065F46;

  --color-blue-50: #E4EEF8;
  --color-blue-500: #2563EB;
  --color-blue-700: #0D52BF;

  --color-yellow-500: #F9C440;
  --color-purple-500: #7A36B1;

  --color-success: var(--color-green-700);
  --color-success-bg: var(--color-green-50);
  --color-success-dark: var(--color-green-900);
  --color-success-lime: var(--color-green-500);

  --color-error: var(--color-red-500);
  --color-error-bg: var(--color-red-50);
  --color-error-dark: var(--color-red-700);

  --color-warning: var(--color-yellow-500);
  --color-warning-bg: #FEF9C3;

  --color-info: var(--color-blue-700);
  --color-info-bg: var(--color-blue-50);
  --color-info-light: var(--color-blue-500);

  /* Tokens canónicos TIPO (theme.py: TIPO_MO, TIPO_MAT, TIPO_EQ, TIPO_SC) */
  --tipo-mo-bg: #EAF5E1;
  --tipo-mo-fg: #2E7D32;
  --tipo-mat-bg: #E6EFFB;
  --tipo-mat-fg: #0D52BF;
  --tipo-eq-bg: #FFF1E0;
  --tipo-eq-fg: #A75900;
  --tipo-sc-bg: #EFE6FB;
  --tipo-sc-fg: #6A36B1;

  /* Badges de recursos ACU */
  --badge-mo-bg: var(--tipo-mo-bg);
  --badge-mo-fg: var(--tipo-mo-fg);
  --badge-mat-bg: var(--tipo-mat-bg);
  --badge-mat-fg: var(--tipo-mat-fg);
  --badge-eq-bg: var(--tipo-eq-bg);
  --badge-eq-fg: var(--tipo-eq-fg);
  --badge-sc-bg: var(--tipo-sc-bg);
  --badge-sc-fg: var(--tipo-sc-fg);

  /* Jerarquía de títulos por nivel (Presupuesto) */
  --nivel-1-fg: #B71C1C;
  --nivel-1-bg: #FFF5F5;

  --nivel-2-fg: #0D52BF;
  --nivel-2-bg: #F5F8FF;

  --nivel-3-fg: #6A1B9A;
  --nivel-3-bg: #F9F5FF;

  --nivel-4-fg: #AD1457;
  --nivel-4-bg: #FFF5FA;

  --nivel-5-fg: #92400E;
  --nivel-5-bg: #FFFBF5;

  --nivel-6-fg: #00695C;
  --nivel-6-bg: #F1FAF8;

  --nivel-7-fg: #D84315;
  --nivel-7-bg: #F3F4FB;

  --nivel-8-fg: #33691E;
  --nivel-8-bg: #F5FAF0;

  --nivel-9-fg: #37474F;
  --nivel-9-bg: #F4F6F7;

  /* Sidebar y Topbar */
  --sidebar-bg: var(--color-slate-800);
  --sidebar-bg-alt: var(--color-slate-900);
  --sidebar-hover: var(--color-slate-700);
  --sidebar-text: #E8EDF2;
  --sidebar-text-muted: var(--color-slate-300);
  --topbar-bg: var(--color-slate-900);
  --topbar-border: #2D3A4B;

  /* Escala de Espaciado (S) */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm6: 6px;
  --space-sm: 8px;
  --space-md10: 10px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 18px;
  --space-xxl: 20px;
  --space-xxxl: 24px;
  --space-page: 32px;

  /* Border Radius (R) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 14px;
  --radius-round: 9999px;

  /* Tipografía (F) */
  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --font-tiny: 9px;
  --font-meta: 10px;
  --font-label: 11px;
  --font-body: 12px;
  --font-subt: 13px;
  --font-kpi: 14px;
  --font-title: 15px;
  --font-h1: 18px;
  --font-display: 22px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-drawer: -4px 0 24px rgba(15, 23, 42, 0.18);
}

/* ==========================================================================
   Modo Oscuro ([data-theme="dark"] o prefers-color-scheme)
   ========================================================================== */

[data-theme="dark"] {
  --bg-app: #141A23;
  --bg-surface: #1E2734;
  --bg-surface-alt: #19222E;
  --bg-surface-subtle: #273445;
  --bg-hover: rgba(243, 115, 41, 0.15);
  --bg-selected: rgba(243, 115, 41, 0.25);

  --text-primary: #E8EDF2;
  --text-secondary: #ABACAE;
  --text-muted: #7E8087;
  --text-faint: #485A6C;

  --border-color: #2D3A4B;
  --border-subtle: #24303F;

  --sidebar-bg: #111720;
  --sidebar-bg-alt: #0D1219;
  --topbar-bg: #0D1219;
  --topbar-border: #1E2734;

  /* Niveles de jerarquía en oscuro (colores luminosos ajustados) */
  --nivel-1-fg: #EF5350;
  --nivel-1-bg: rgba(183, 28, 28, 0.18);

  --nivel-2-fg: #60A5FA;
  --nivel-2-bg: rgba(13, 82, 191, 0.18);

  --nivel-3-fg: #C084FC;
  --nivel-3-bg: rgba(106, 27, 154, 0.18);

  --nivel-4-fg: #F472B6;
  --nivel-4-bg: rgba(173, 20, 87, 0.18);

  --nivel-5-fg: #FBBF24;
  --nivel-5-bg: rgba(146, 64, 14, 0.18);

  --nivel-6-fg: #2DD4BF;
  --nivel-6-bg: rgba(0, 105, 92, 0.18);

  --nivel-7-fg: #FB923C;
  --nivel-7-bg: rgba(216, 67, 21, 0.18);

  --nivel-8-fg: #A3E635;
  --nivel-8-bg: rgba(51, 105, 30, 0.18);

  --nivel-9-fg: #94A3B8;
  --nivel-9-bg: rgba(55, 71, 79, 0.18);

  /* Badges oscuros */
  --badge-mo-bg: rgba(46, 125, 50, 0.25);
  --badge-mo-fg: #86EFAC;
  --badge-mat-bg: rgba(13, 82, 191, 0.25);
  --badge-mat-fg: #93C5FD;
  --badge-eq-bg: rgba(167, 89, 0, 0.25);
  --badge-eq-fg: #FCD34D;
  --badge-sc-bg: rgba(106, 54, 177, 0.25);
  --badge-sc-fg: #D8B4FE;

  --color-success-bg: rgba(22, 163, 74, 0.2);
  --color-error-bg: rgba(198, 38, 46, 0.2);
  --color-warning-bg: rgba(249, 196, 64, 0.2);
  --color-info-bg: rgba(37, 99, 235, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app: #141A23;
    --bg-surface: #1E2734;
    --bg-surface-alt: #19222E;
    --bg-surface-subtle: #273445;
    --bg-hover: rgba(243, 115, 41, 0.15);
    --bg-selected: rgba(243, 115, 41, 0.25);

    --text-primary: #E8EDF2;
    --text-secondary: #ABACAE;
    --text-muted: #7E8087;
    --text-faint: #485A6C;

    --border-color: #2D3A4B;
    --border-subtle: #24303F;

    --sidebar-bg: #111720;
    --sidebar-bg-alt: #0D1219;
    --topbar-bg: #0D1219;
    --topbar-border: #1E2734;

    --nivel-1-fg: #EF5350;
    --nivel-1-bg: rgba(183, 28, 28, 0.18);
    --nivel-2-fg: #60A5FA;
    --nivel-2-bg: rgba(13, 82, 191, 0.18);
    --nivel-3-fg: #C084FC;
    --nivel-3-bg: rgba(106, 27, 154, 0.18);
    --nivel-4-fg: #F472B6;
    --nivel-4-bg: rgba(173, 20, 87, 0.18);
    --nivel-5-fg: #FBBF24;
    --nivel-5-bg: rgba(146, 64, 14, 0.18);
    --nivel-6-fg: #2DD4BF;
    --nivel-6-bg: rgba(0, 105, 92, 0.18);
    --nivel-7-fg: #FB923C;
    --nivel-7-bg: rgba(216, 67, 21, 0.18);
    --nivel-8-fg: #A3E635;
    --nivel-8-bg: rgba(51, 105, 30, 0.18);
    --nivel-9-fg: #94A3B8;
    --nivel-9-bg: rgba(55, 71, 79, 0.18);

    --badge-mo-bg: rgba(46, 125, 50, 0.25);
    --badge-mo-fg: #86EFAC;
    --badge-mat-bg: rgba(13, 82, 191, 0.25);
    --badge-mat-fg: #93C5FD;
    --badge-eq-bg: rgba(167, 89, 0, 0.25);
    --badge-eq-fg: #FCD34D;
    --badge-sc-bg: rgba(106, 54, 177, 0.25);
    --badge-sc-fg: #D8B4FE;

    --color-success-bg: rgba(22, 163, 74, 0.2);
    --color-error-bg: rgba(198, 38, 46, 0.2);
    --color-warning-bg: rgba(249, 196, 64, 0.2);
    --color-info-bg: rgba(37, 99, 235, 0.2);
  }
}

/* ==========================================================================
   Utilidades Globales
   ========================================================================== */

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-muted);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}