/* ============================================================================
   Centro de Control · Design tokens (UI-1)
   Dark premium / operational intelligence.
   Derivado de ESPECIFICACION_TECNICA_REEMPLAZO_FRONTEND (§5).
   Solo capa visual: no cambia lógica, endpoints ni datos.
   ========================================================================== */

/* --- Fuentes auto-alojadas (sin CDN): Inter (cuerpo) + Sora (títulos) ------ */
/* Ambas son variables fonts (un archivo cubre todos los pesos). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/sora.woff2') format('woff2');
}

:root {
  /* Fondos y superficies */
  --bg-950: #070B12;
  --bg-900: #0B1019;
  --surface-900: #0F1622;
  --surface-850: #121B28;
  --surface-800: #172131;
  --border-700: #263246;
  --border-600: #334155;

  /* Texto */
  --text-100: #F7F9FC;
  --text-200: #DCE3EE;
  --text-400: #9BA9BC;
  --text-500: #718096;

  /* Identidad / acentos */
  --primary-500: #6C5CFF;
  --primary-400: #8577FF;
  --primary-600: #5647d6;
  --cyan-500: #00C6B8;
  --blue-500: #3B82F6;

  /* Estados semánticos */
  --success-500: #22C55E;
  --warning-500: #F59E0B;
  --danger-500: #EF4444;
  --info-500: #38BDF8;

  /* Actores */
  --human-500: #E6A86B;
  --ai-500: #8B5CF6;
  --automation-500: #10B981;

  /* Superficies translúcidas de estado (fondos suaves para badges/chips) */
  --success-bg: rgba(34, 197, 94, 0.14);
  --warning-bg: rgba(245, 158, 11, 0.14);
  --danger-bg: rgba(239, 68, 68, 0.14);
  --info-bg: rgba(56, 189, 248, 0.14);
  --primary-bg: rgba(108, 92, 255, 0.16);
  --cyan-bg: rgba(0, 198, 184, 0.14);
  --neutral-bg: rgba(155, 169, 188, 0.12);
  --human-bg: rgba(230, 168, 107, 0.16);

  /* Tipografía */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-title: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Geometría */
  --radius-card: 12px;
  --radius-control: 9px;
  --radius-pill: 999px;

  /* Sombras (bajas y difusas) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.35);

  /* Escala de espaciado base 4px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Medidas del shell */
  --sidebar-w: 236px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 60px;
}

/* --- Reset / base --------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-950);
  color: var(--text-200);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-title); color: var(--text-100); font-weight: 600; }

a { color: var(--primary-400); text-decoration: none; }

/* Números tabulares para KPIs / montos */
.tabular { font-variant-numeric: tabular-nums; }

/* Scrollbars discretos en superficies oscuras */
* { scrollbar-width: thin; scrollbar-color: var(--border-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-600); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Foco visible accesible (AA) */
:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 2px;
  border-radius: 6px;
}

.oculto { display: none !important; }