/* ===================== VIALIUM — TOKENS COMPARTIDOS ===================== */
:root{
  --bg-deep:#000000;
  --bg-0:#050506;
  --bg-1:#0b0b0d;
  --bg-2:#111114;
  --bg-3:#18181c;
  --line:#26262c;

  --violet:#4c8dff;
  --violet-soft:#8ab4ff;
  --violet-dim:#1d4ed8;
  --cold:#22d3ee;
  --cold-dim:#0e7490;
  --frost:#7ef0ff;

  --ok:#34d8a0;
  --warn:#ffb020;
  --danger:#ff4d5e;

  --text-0:#f2f5f9;
  --text-1:#a7b2c2;
  --text-2:#5f6b7d;

  --frost-line:linear-gradient(90deg, var(--cold), var(--violet) 55%, var(--warn));

  --font-ui:'Rajdhani', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"SF Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-brand:'Bebas Neue', sans-serif;

  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font-ui);
  background:var(--bg-deep);
  color:var(--text-0);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

a{ color:inherit; }
button{ font-family:inherit; }

/* fondo ambiental reutilizable */
.vlm-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:#000000;
}
.vlm-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(76,141,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,141,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* barra superior tipo macOS, usada en las pantallas de escritorio */
.vlm-menubar{
  position:fixed; top:0; left:0; right:0; height:26px; z-index:50;
  background:rgba(20,16,32,0.6);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; padding:0 16px; gap:16px;
  font-size:12.5px; color:var(--text-1); font-weight:500;
}
@media (max-width: 900px){
  .vlm-menubar{ display:none; }
  .layout{ padding-top:0 !important; }
  html{ -webkit-text-size-adjust:100%; }
  body{ overscroll-behavior-y:contain; }
  input, select, textarea{ font-size:16px !important; }
  button, .vlm-btn, .nav-item, .role-btn{ touch-action:manipulation; }
  .vlm-bg::after{ background-size:32px 32px; }
  ::-webkit-scrollbar{ width:0; height:0; }
}
.vlm-menubar .vlm-brand{ font-family:var(--font-brand); letter-spacing:0.08em; display:flex; align-items:center; gap:7px; color:var(--text-0); }
.vlm-menubar .vlm-brand img{ height:12px; }
.vlm-menubar .vlm-spacer{ flex:1; }
.vlm-menubar .vlm-clock{ color:var(--text-2); font-variant-numeric:tabular-nums; }

/* tarjetas / superficies */
.vlm-card{
  background:linear-gradient(155deg, rgba(76,141,255,0.06), var(--bg-2) 60%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:border-color .15s ease;
  box-shadow:0 8px 32px -18px rgba(0,0,0,0.9);
}
.vlm-frost-line{ height:2px; border-radius:2px; background:var(--frost-line); opacity:0.8; }
.vlm-glass{
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
}

/* botones */
.vlm-btn{
  border:none; border-radius:var(--radius-sm); font-weight:600; cursor:pointer;
  font-family:var(--font-ui); transition:transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.vlm-btn:active{ transform:scale(0.98); }
.vlm-btn-primary{
  color:#0a0712;
  background:linear-gradient(100deg, var(--violet-soft), var(--cold));
  box-shadow:0 14px 30px -14px rgba(47,111,237,0.55);
}
.vlm-btn-primary:disabled{ opacity:0.35; cursor:not-allowed; box-shadow:none; }
.vlm-btn-ghost{
  color:var(--text-1);
  background:var(--bg-3);
}

/* badges de estado */
.vlm-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:20px;
}
.vlm-badge.ok{ color:var(--ok); background:rgba(0,255,157,0.12); box-shadow:0 0 12px -4px rgba(0,255,157,0.6); border:1px solid rgba(0,255,157,0.35); }
.vlm-badge.warn{ color:var(--warn); background:rgba(255,176,32,0.12); box-shadow:0 0 12px -4px rgba(255,176,32,0.5); border:1px solid rgba(255,176,32,0.3); }
.vlm-badge.danger{ color:var(--danger); background:rgba(255,43,77,0.14); box-shadow:0 0 12px -4px rgba(255,43,77,0.6); border:1px solid rgba(255,43,77,0.35); }
.vlm-badge.idle{ color:var(--text-2); background:var(--bg-3); border:1px solid var(--line); }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--bg-3); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }