/* ============================================================
   WIFIRED · Agenda Técnica — Base: reset, tokens, tipografía
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  /* Fondo plano y sobrio (look profesional, sin brillos de color). */
  background: var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Design tokens ---------- */
:root {
  /* Brand — azul marino sobrio (menos saturado, más profesional) */
  --brand-600: #2c4f7c;
  --brand-500: #3a6098;
  --brand-700: #223f63;
  --accent:    #4a6d99;   /* azul acero apagado (reemplaza el cian) */

  /* Neutrals */
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --surface-2: #f7f8fa;
  --border:    #e4e7ec;
  --border-2:  #eef0f3;

  --text:      #1a2232;
  --text-2:    #55607a;
  --text-3:    #98a1b3;

  /* Status — tonos apagados y sobrios */
  --st-pend-bg:#f6efdd; --st-pend-fg:#8a6416; --st-pend-dot:#c79232;
  --st-prog-bg:#e2e9f3; --st-prog-fg:#2c4f7c; --st-prog-dot:#3a6098;
  --st-comp-bg:#e0efe6; --st-comp-fg:#256143; --st-comp-dot:#3f9d6d;
  --st-repr-bg:#f2e7db; --st-repr-fg:#8a5223; --st-repr-dot:#c47a3d;
  --st-canc-bg:#f3e0e0; --st-canc-fg:#8f3535; --st-canc-dot:#c14b4b;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.16);

  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 20px;

  /* Tipografía de titulares y números grandes (Dirección A) */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --sidebar-w: 248px;
}

/* Dark theme (viewer/system aware) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0b1120; --surface:#0f172a; --surface-2:#131c31;
    --border:#1e2b45; --border-2:#1a2540;
    --text:#e8edf7; --text-2:#a3b2cc; --text-3:#6b7c9c;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg:#0b1120; --surface:#0f172a; --surface-2:#131c31;
  --border:#1e2b45; --border-2:#1a2540;
  --text:#e8edf7; --text-2:#a3b2cc; --text-3:#6b7c9c;
}

/* ---------- Utilities ---------- */
.muted    { color: var(--text-2); }
.muted-sm { color: var(--text-3); font-size: 12px; }
.row      { display: flex; align-items: center; gap: 10px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wrap     { flex-wrap: wrap; }
.grow     { flex: 1; }
.hide     { display: none !important; }
.text-right { text-align: right; }
.nowrap   { white-space: nowrap; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

@keyframes fadeUp { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }
@keyframes pop    { from { opacity:0; transform: scale(.96);} to {opacity:1; transform:none;} }

/* ---------- Tipografía de titulares y números grandes (Dirección A) ----------
   Space Grotesk para el nombre WIFIRED, títulos de sección/tarjeta/ventana,
   los números KPI, el centro de la dona y otros números destacados. El resto
   del texto sigue en Inter. */
.brand-text strong,
.topbar-title,
.section-head h2,
.card-head h3,
.modal-head h3,
.kpi .kpi-val,
.donut-center strong,
.ds-pill .ds-n,
.tech-card .tstat strong,
.tec-hello,
.tec-client,
.login-brand h1,
.tk-num,
.cli-count {
  font-family: var(--font-display);
}