/* Sistema de Gestión del Programa — estilos propios.
   Tokens copiados del design system SAHISmart (FCV-SAHI: Documentation/09-UX-UI/09.06, fcv-sahismart-tokens.css).
   Tema claro en :root; tema oscuro por preferencia del sistema o por data-theme="dark". Sin CDN ni fuentes externas. */
:root {
  --color-blue-50: #f6faff; --color-blue-100: #d7e5f2; --color-blue-200: #a8c8e4; --color-blue-300: #5a9fd4;
  --color-blue-400: #226cb6; --color-blue-500: #094e95; --color-blue-600: #063d76; --color-blue-700: #042d58;
  --color-neutral-0: #FFFFFF; --color-neutral-50: #f4f5f7; --color-neutral-100: #dee1e4; --color-neutral-200: #97a0b0;
  --color-neutral-250: #6b7280; --color-neutral-300: #878888; --color-neutral-400: #5e5e5e; --color-neutral-500: #404040;
  --color-neutral-600: #24354e; --color-neutral-700: #1a2738; --color-neutral-900: #0d1520;
  --color-green-100: #d4edda; --color-green-400: #26ab35; --color-green-500: #15803d; --color-green-700: #166534;
  --color-amber-100: #fff3cd; --color-amber-400: #faaa45; --color-amber-500: #d98821; --color-amber-700: #92400e;
  --color-red-100: #f8d7da; --color-red-400: #cd0808; --color-red-500: #b20000; --color-red-700: #b91c1c;
  --accent: var(--color-blue-400); --accent-hover: var(--color-blue-500); --accent-foreground: var(--color-neutral-0);
  --accent-subtle: var(--color-blue-100); --accent-muted: var(--color-blue-50); --accent-text: var(--color-blue-500);
  --foreground: var(--color-neutral-600); --foreground-muted: var(--color-neutral-400);
  --foreground-placeholder: var(--color-neutral-250); --foreground-secondary: var(--color-neutral-400); --foreground-inverse: var(--color-neutral-0);
  --background: var(--color-neutral-50); --background-card: var(--color-neutral-0); --background-elevated: var(--color-blue-50);
  --background-sidebar: var(--color-blue-100); --background-table-header: var(--color-blue-100);
  --border: var(--color-neutral-100); --border-focus: var(--color-blue-400);
  --success: var(--color-green-500); --success-hover: var(--color-green-700); --success-foreground: var(--color-neutral-0);
  --success-subtle: var(--color-green-100); --success-text: var(--color-green-700);
  --warning: var(--color-amber-400); --warning-hover: var(--color-amber-500); --warning-foreground: var(--color-neutral-500);
  --warning-subtle: var(--color-amber-100); --warning-text: var(--color-amber-700);
  --danger: var(--color-red-400); --danger-hover: var(--color-red-500); --danger-foreground: var(--color-neutral-0);
  --danger-subtle: var(--color-red-100); --danger-text: var(--color-red-700);
  --accent-soft: var(--color-neutral-0); --accent-soft-foreground: var(--color-neutral-400); --accent-soft-hover: #f5f5f5;
  --default: #fafafa; --default-hover: #f5f5f5;
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.05); --shadow-lg: 0px 2px 8px 0px rgba(0,0,0,0.08), inset 0 0 1px rgba(0,0,0,0.3);
  color-scheme: light;
  --font-family-primary: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600;
  --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 24px;
  --radius-none: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-full: 9999px;
  --border-width: 1px; --ring-focus-width: 4px; --touch-target-min: 44px;
  --espacio-1: 4px; --espacio-2: 8px; --espacio-3: 12px; --espacio-4: 16px; --espacio-6: 24px; --espacio-8: 32px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-neutral-0: #0d1520; --color-neutral-50: #1a2738; --color-neutral-100: #2a3a4e; --color-neutral-200: #4a5568;
  --color-neutral-300: #718096; --color-neutral-400: #a0aec0; --color-neutral-500: #cbd5e0; --color-neutral-600: #e2e8f0;
  --color-neutral-700: #edf2f7; --color-neutral-900: #f7fafc;
  --color-blue-50: #1a2738; --color-blue-100: #1e3a5f; --color-blue-400: #4a9ede; --color-blue-500: #226cb6;
  --color-green-100: #1a3a2a; --color-amber-100: #3a2e1a; --color-red-100: #3a1a1a;
  --accent: var(--color-blue-400); --accent-hover: var(--color-blue-500); --accent-foreground: #0d1520;
  --accent-subtle: var(--color-blue-100); --accent-muted: var(--color-blue-50); --accent-text: var(--color-blue-400);
  --foreground: var(--color-neutral-600); --foreground-muted: var(--color-neutral-400);
  --foreground-placeholder: var(--color-neutral-300); --foreground-secondary: var(--color-neutral-400); --foreground-inverse: var(--color-neutral-900);
  --background: var(--color-neutral-50); --background-card: #1e2a3a; --background-elevated: var(--color-blue-50);
  --background-sidebar: #0d1520; --background-table-header: var(--color-blue-100);
  --border: var(--color-neutral-100); --border-focus: var(--color-blue-400);
  --success: #34d058; --success-hover: #26ab35; --success-subtle: var(--color-green-100); --success-text: #86efac;
  --warning: #faaa45; --warning-hover: #d98821; --warning-subtle: var(--color-amber-100); --warning-text: #fcd34d;
  --danger: #f56565; --danger-hover: #cd0808; --danger-subtle: var(--color-red-100); --danger-text: #fca5a5;
  --accent-soft: #1e2a3a; --accent-soft-foreground: var(--color-neutral-400); --accent-soft-hover: #2a3a4e;
  --default: #1e2a3a; --default-hover: #2a3a4e;
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.2); --shadow-lg: 0px 2px 8px 0px rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-neutral-0: #0d1520; --color-neutral-50: #1a2738; --color-neutral-100: #2a3a4e; --color-neutral-200: #4a5568;
  --color-neutral-300: #718096; --color-neutral-400: #a0aec0; --color-neutral-500: #cbd5e0; --color-neutral-600: #e2e8f0;
  --color-neutral-700: #edf2f7; --color-neutral-900: #f7fafc;
  --color-blue-50: #1a2738; --color-blue-100: #1e3a5f; --color-blue-400: #4a9ede; --color-blue-500: #226cb6;
  --color-green-100: #1a3a2a; --color-amber-100: #3a2e1a; --color-red-100: #3a1a1a;
  --accent: var(--color-blue-400); --accent-hover: var(--color-blue-500); --accent-foreground: #0d1520;
  --accent-subtle: var(--color-blue-100); --accent-muted: var(--color-blue-50); --accent-text: var(--color-blue-400);
  --foreground: var(--color-neutral-600); --foreground-muted: var(--color-neutral-400);
  --foreground-placeholder: var(--color-neutral-300); --foreground-secondary: var(--color-neutral-400); --foreground-inverse: var(--color-neutral-900);
  --background: var(--color-neutral-50); --background-card: #1e2a3a; --background-elevated: var(--color-blue-50);
  --background-sidebar: #0d1520; --background-table-header: var(--color-blue-100);
  --border: var(--color-neutral-100); --border-focus: var(--color-blue-400);
  --success: #34d058; --success-hover: #26ab35; --success-subtle: var(--color-green-100); --success-text: #86efac;
  --warning: #faaa45; --warning-hover: #d98821; --warning-subtle: var(--color-amber-100); --warning-text: #fcd34d;
  --danger: #f56565; --danger-hover: #cd0808; --danger-subtle: var(--color-red-100); --danger-text: #fca5a5;
  --accent-soft: #1e2a3a; --accent-soft-foreground: var(--color-neutral-400); --accent-soft-hover: #2a3a4e;
  --default: #1e2a3a; --default-hover: #2a3a4e;
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.2); --shadow-lg: 0px 2px 8px 0px rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,0.1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-family-primary); font-size: var(--font-size-sm); color: var(--foreground); background: var(--background); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent-text); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; background: var(--accent-muted); padding: 0 var(--espacio-1); border-radius: var(--radius-none); }
h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin: 0 0 var(--espacio-2); }
h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin: 0 0 var(--espacio-2); }
.muted { color: var(--foreground-muted); }

.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-4); padding: var(--espacio-3) var(--espacio-6);
  background: var(--background-card); border-bottom: var(--border-width) solid var(--border); box-shadow: var(--shadow-sm); }
.marca { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); color: var(--foreground); text-decoration: none; }
.nav { display: flex; gap: var(--espacio-2); flex: 1; }
.nav a { text-decoration: none; color: var(--foreground-secondary); padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radius-none); min-height: 36px; display: inline-flex; align-items: center; }
.nav a:hover { background: var(--accent-subtle); color: var(--accent-text); }
.nav a.activo { background: var(--accent); color: var(--accent-foreground); }
.corte { display: flex; align-items: center; gap: var(--espacio-3); font-size: var(--font-size-xs); color: var(--foreground-muted); }

.contenido { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--espacio-6); }
.pie { padding: var(--espacio-3) var(--espacio-6); font-size: var(--font-size-xs); border-top: var(--border-width) solid var(--border); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--espacio-4); margin: var(--espacio-4) 0 var(--espacio-6); }
.tarjeta { display: block; padding: var(--espacio-4); background: var(--background-card); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.tarjeta:hover { border-color: var(--border-focus); box-shadow: var(--shadow-lg); }
.tarjeta h2 { color: var(--accent-text); }
.tarjeta p { margin: 0; color: var(--foreground-muted); }
.panel { padding: var(--espacio-4); background: var(--background-card); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.vacio { padding: var(--espacio-8); text-align: center; color: var(--foreground-muted); border: 2px dashed var(--border); border-radius: var(--radius-md); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--espacio-1) var(--espacio-4); margin: var(--espacio-3) 0 0; }
.datos dt { color: var(--foreground-muted); } .datos dd { margin: 0; }
.badge { display: inline-block; padding: 0 var(--espacio-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.badge--ok { background: var(--success-subtle); color: var(--success-text); }
.badge--alerta { background: var(--warning-subtle); color: var(--warning-text); }
.badge--error { background: var(--danger-subtle); color: var(--danger-text); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2); min-height: 36px; padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radius-none); border: var(--border-width) solid transparent; font: inherit; font-weight: var(--font-weight-medium); cursor: pointer; }
.btn:focus-visible { outline: var(--ring-focus-width) solid var(--accent-subtle); outline-offset: 0; border-color: var(--border-focus); }
.btn--primary { background: var(--accent); color: var(--accent-foreground); } .btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--accent-soft); color: var(--accent-soft-foreground); border-color: var(--border); } .btn--secondary:hover { background: var(--accent-soft-hover); }
.btn--ghost { background: transparent; color: var(--foreground-secondary); } .btn--ghost:hover { background: var(--default-hover); }
.btn--danger { background: var(--danger); color: var(--danger-foreground); } .btn--danger:hover { background: var(--danger-hover); }
.htmx-request { opacity: 0.6; }

@media (max-width: 640px) {
  .cabecera { padding: var(--espacio-3) var(--espacio-4); } .contenido { padding: var(--espacio-4); } .corte { width: 100%; }
}

/* --- Programa (GOAL-02) --- */
.subnav { display: flex; flex-wrap: wrap; gap: var(--espacio-1); margin: 0 0 var(--espacio-4); border-bottom: var(--border-width) solid var(--border); }
.subnav a { text-decoration: none; color: var(--foreground-secondary); padding: var(--espacio-2) var(--espacio-3); border-bottom: 2px solid transparent; }
.subnav a.activo { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: var(--font-weight-medium); }
.fila-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-3); flex-wrap: wrap; }
.filtros { display: flex; gap: var(--espacio-4); align-items: end; flex-wrap: wrap; margin: var(--espacio-3) 0; }
.filtros label, .formulario label { display: flex; flex-direction: column; gap: var(--espacio-1); color: var(--foreground-muted); font-size: var(--font-size-xs); }
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-3); margin: var(--espacio-3) 0; }
.formulario--inline { align-items: end; }
.formulario .acciones { grid-column: 1 / -1; display: flex; gap: var(--espacio-2); }
input, select, textarea { font: inherit; color: var(--foreground); background: var(--background-card); border: var(--border-width) solid var(--border); border-radius: var(--radius-none); padding: var(--espacio-2) var(--espacio-3); min-height: 36px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--ring-focus-width) solid var(--accent-subtle); border-color: var(--border-focus); }
.tabla { width: 100%; border-collapse: collapse; background: var(--background-card); border-radius: var(--radius-none); overflow: hidden; }
.tabla th { text-align: left; background: var(--background-table-header); padding: var(--espacio-2) var(--espacio-3); font-weight: var(--font-weight-medium); }
.tabla td { padding: var(--espacio-2) var(--espacio-3); border-top: var(--border-width) solid var(--border); vertical-align: top; }
.tabla tr.salida td { opacity: 0.6; }
.tabla-scroll { overflow-x: auto; }
.badge--celula { background: var(--accent-subtle); color: var(--accent-text); }
.aviso { padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radius-none); margin-bottom: var(--espacio-3); }
.aviso--ok, .aviso--message { background: var(--success-subtle); color: var(--success-text); }
.aviso--error { background: var(--danger-subtle); color: var(--danger-text); }
.alerta { padding: var(--espacio-2) var(--espacio-3); border-left: 4px solid var(--border); background: var(--background-card); margin: var(--espacio-2) 0; border-radius: 0 var(--radius-none) var(--radius-none) 0; }
.alerta--error { border-left-color: var(--danger); } .alerta--alerta { border-left-color: var(--warning); } .alerta--info { border-left-color: var(--accent); }
.panel { margin-top: var(--espacio-4); } .panel--alerta { border-left: 4px solid var(--warning); }
.tabla--calendario th, .tabla--calendario td.cal { text-align: center; padding: 2px; min-width: 18px; font-size: var(--font-size-xs); }
.tabla--calendario th.finde { color: var(--foreground-placeholder); }
td.cal { height: 22px; border-left: 1px solid var(--border); }
.cal--ausente { background: var(--danger); } .cal--festivo { background: var(--warning-subtle); } .cal--finde { background: var(--background); } .cal--fuera { background: repeating-linear-gradient(45deg, var(--border) 0 3px, transparent 3px 6px); }
span.cal { display: inline-block; padding: 0 var(--espacio-2); border-radius: var(--radius-none); }
span.cal--ausente { color: var(--danger-foreground); }
.tabla tr.viejo td:first-child, .tabla tr.vencido td:first-child { box-shadow: inset 4px 0 0 var(--warning); }
.tabla tr.vencido td:first-child { box-shadow: inset 4px 0 0 var(--danger); }

/* --- Seguimiento HU (GOAL-04) --- */
.tarjetas--modulos .tarjeta h2 { font-size: var(--font-size-md); }
.tarjeta--sin-hu { opacity: 0.85; border-style: dashed; }
.embudo { display: flex; height: 22px; border-radius: var(--radius-none); overflow: hidden; margin: var(--espacio-2) 0; background: var(--background); }
.embudo--grande { height: 30px; }
.embudo .seg { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); color: #fff; min-width: 14px; border-radius: 0; padding: 0 2px; overflow: hidden; white-space: nowrap; }
.seg { display: inline-block; padding: 0 var(--espacio-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: #fff; }
.seg--candidata { background: var(--color-neutral-300); } .seg--redactada { background: #8a94a6; } .seg--estimada { background: var(--color-blue-300); }
.seg--enviada { background: var(--color-blue-400); } .seg--aprobada { background: var(--color-blue-600); } .seg--con_spec { background: var(--color-amber-500); }
.seg--construida { background: var(--color-green-400); } .seg--verificada { background: var(--color-green-700); } .seg--excluida { background: var(--color-red-400); }
.leyenda { margin: var(--espacio-3) 0; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--espacio-4); }
.gherkin { white-space: pre-wrap; font-size: var(--font-size-xs); background: var(--background); padding: var(--espacio-3); border-radius: var(--radius-none); max-height: 480px; overflow: auto; }

/* --- Bolsa (GOAL-05) --- */
.semaforo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; background: var(--color-neutral-200); }
.semaforo--verde { background: var(--success); } .semaforo--ambar { background: var(--warning); } .semaforo--rojo { background: var(--danger); }
.saldo { margin: var(--espacio-1) 0 0; }
.cascada { min-width: 160px; } .cascada .barra { display: block; height: 6px; margin: 1px 0; border-radius: 3px; }
.barra--base { background: var(--color-neutral-300); } .barra--lib { background: var(--danger); } .barra--cons { background: var(--warning); } .barra--vig { background: var(--accent); }
.tabla tr.total td { border-top: 2px solid var(--border); background: var(--background-elevated); }

/* --- Autenticación (M-021) --- */
.tarjeta--login { max-width: 420px; margin: var(--espacio-8) auto; }
.formulario--columna { grid-template-columns: 1fr; }
.usuario-actual { display: flex; align-items: center; gap: var(--espacio-2); font-size: var(--font-size-xs); }
.usuario-actual form { display: inline; }

/* --- Buscador (M-015) --- */
.buscador input { min-width: 220px; font-size: var(--font-size-xs); min-height: 32px; }

.celda-prod { text-align: center; font-size: var(--font-size-xs); white-space: nowrap; }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espacio-2); margin: var(--espacio-2) 0 0; }
.cifras div { background: var(--background); border-radius: var(--radius-none); padding: var(--espacio-1) var(--espacio-2); }
.cifras dt { font-size: var(--font-size-xs); color: var(--foreground-muted); } .cifras dd { margin: 0; font-size: var(--font-size-sm); }
mark { background: var(--warning-subtle); color: inherit; padding: 0 2px; border-radius: 2px; }
.panel--error-pagina { max-width: 560px; margin: var(--espacio-6) auto; text-align: center; }
.grafico { width: 100%; max-width: 900px; height: auto; display: block; margin: var(--espacio-3) 0; }
.grafico text { font-size: 11px; fill: var(--foreground-muted); }
.grafico .eje { stroke: var(--border); stroke-width: 1; }
.grafico .leyenda { font-size: 12px; fill: var(--foreground); }
.bloque-copiable { white-space: pre; overflow-x: auto; font-family: var(--font-mono, monospace); font-size: var(--font-size-xs); background: var(--background-elevated); padding: var(--espacio-3); border-radius: var(--radius-md); }