/* =============================================================
   Vitz / VManNet Design System — Foundations
   Source: Scripts/Django/Frontend/new.py (the "new" NiceGUI UI)
   ============================================================= */

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

:root {
  /* -------- Surface (dark "operations console") -------- */
  --vz-bg:        #0a0e0d;            /* page background */
  --vz-bg-2:      #0f1513;            /* secondary surface */
  --vz-panel:     rgba(16,22,21,0.82); /* cards, side rails, dialogs (with backdrop-filter blur) */
  --vz-panel-solid: #0f2020;          /* opaque modals & menus */
  --vz-panel-border: rgba(125,227,138,0.12); /* mint-tinted 1px borders */

  /* -------- Brand primaries -------- */
  --vz-teal:        #1E8A7A;          /* primary action (Iniciar Sesión, Generar, etc.) */
  --vz-teal-bright: #2bc2a8;          /* hover, links, accents, IP addresses */
  --vz-green:       #7de38a;          /* live/online status, brand pulse dot */

  /* -------- Semantic -------- */
  --vz-online:  #7de38a;
  --vz-warning: #ffb547;              /* "amber" — weak signal */
  --vz-offline: #ff5c5c;              /* "red" */
  --vz-info:    #26c6da;              /* cyan — modems, secondary highlight */
  --vz-master:  #90caf9;              /* role badge: Master / hub link */
  --vz-managed: #80cbc4;              /* role badge: Managed */
  --vz-ptp:     #ba68c8;              /* AP PtP (dish) topology category */
  --vz-ptp-sta: #f48fb1;              /* PtP Station */

  /* -------- Text -------- */
  --vz-text:      #e8efeb;            /* primary copy */
  --vz-text-dim:  #8c9a93;            /* secondary */
  --vz-text-mute: #5e6b65;            /* labels, separators ("/", ".") */

  /* -------- Type ramp -------- */
  --vz-font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --vz-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -------- Spacing (4-px grid) -------- */
  --vz-s-1: 4px; --vz-s-2: 8px;  --vz-s-3: 12px;
  --vz-s-4: 16px; --vz-s-5: 20px; --vz-s-6: 24px;
  --vz-s-7: 32px; --vz-s-8: 40px;

  /* -------- Radii -------- */
  --vz-r-xs: 4px;
  --vz-r-sm: 6px;     /* buttons, inputs */
  --vz-r-md: 8px;     /* stat tiles, zoom rails */
  --vz-r-lg: 10px;    /* panels, side rails */
  --vz-r-xl: 12px;    /* hero / login card */
  --vz-r-pill: 99px;

  /* -------- Borders -------- */
  --vz-border-1: 1px solid var(--vz-panel-border);
  --vz-border-input: 1px solid rgba(255,255,255,0.08);

  /* -------- Shadows / glows -------- */
  --vz-shadow-modal: 0 12px 40px rgba(0,0,0,0.70);
  --vz-shadow-toast: 0 8px 24px rgba(0,0,0,0.50);
  --vz-shadow-card:  0 8px 32px rgba(0,0,0,0.30);
  --vz-glow-green:   0 0 10px #7de38a;
  --vz-glow-teal:    0 0 8px var(--vz-teal-bright);

  /* -------- Backdrop blur (used on every floating surface) -------- */
  --vz-blur: blur(8px);
  --vz-blur-strong: blur(12px);

  /* -------- Layout -------- */
  --vz-topbar-h: 56px;
  --vz-side-w:   240px;
}

/* =============================================================
   Base type ramp
   ============================================================= */

html, body {
  background: var(--vz-bg);
  color: var(--vz-text);
  font-family: var(--vz-font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* "Atmosphere" — the subtle radial mint glow used on every page */
.vz-atmosphere {
  background:
    radial-gradient(circle at 20% 10%, rgba(30,138,122,0.10), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(125,227,138,0.06), transparent 40%),
    var(--vz-bg);
}

/* -------- Display / page titles -------- */
.vz-h1 {
  font: 600 28px/1.15 var(--vz-font-sans);
  letter-spacing: -0.015em;
  color: var(--vz-text);
}
.vz-h2 {
  font: 600 22px/1.2 var(--vz-font-sans);
  letter-spacing: -0.01em;
  color: var(--vz-text);
}
.vz-h3 {
  font: 600 16px/1.25 var(--vz-font-sans);
  color: var(--vz-text);
}

/* -------- Section eyebrow (UPPERCASE TRACKED) -------- */
/* Used as: VENDEDORES · ESTADO · LEYENDA · NOTAS · CONSEJOS · etc. */
.vz-eyebrow {
  font: 600 11px/1 var(--vz-font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vz-text-mute);
}
.vz-eyebrow.is-accent { color: var(--vz-teal-bright); }

/* -------- Section heading (uppercase teal-bright card titles) -------- */
.vz-section-title {
  font: 600 13px/1 var(--vz-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vz-teal-bright);
}

/* -------- Body copy -------- */
.vz-body  { font: 400 14px/1.5 var(--vz-font-sans); color: var(--vz-text); }
.vz-body-dim { color: var(--vz-text-dim); }
.vz-small { font: 400 12px/1.45 var(--vz-font-sans); color: var(--vz-text-dim); }

/* -------- Mono / data -------- */
.vz-mono    { font-family: var(--vz-font-mono); font-variant-numeric: tabular-nums; }
.vz-mono-sm { font: 500 11.5px/1.4 var(--vz-font-mono); font-variant-numeric: tabular-nums; }
.vz-stat-value { font: 600 22px/1.1 var(--vz-font-sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.vz-stat-value.is-green  { color: var(--vz-online); }
.vz-stat-value.is-amber  { color: var(--vz-warning); }
.vz-stat-value.is-red    { color: var(--vz-offline); }

/* -------- Link -------- */
.vz-link {
  color: var(--vz-teal-bright);
  text-decoration: none;
  font-family: var(--vz-font-mono);
}
.vz-link:hover { text-decoration: underline; }