/* ============================================================================
   DATEL Design System v1.0
   Tokens y componentes compartidos para todo el panel
   ============================================================================ */

/* ─── 1. TOKENS DE COLOR ─── */
:root {
  /* Backgrounds */
  --datel-bg:           #060e1a;
  --datel-bg2:          #0a1628;
  --datel-bg3:          #1e2535;
  --datel-surface:      rgba(255,255,255,0.035);
  --datel-surface-h:    rgba(255,255,255,0.065);
  --datel-surface-a:    rgba(255,255,255,0.08);
  --datel-border:       rgba(255,255,255,0.06);
  --datel-border-h:     rgba(255,255,255,0.12);

  /* Texto */
  --datel-text:         #f0f3f8;
  --datel-text2:        #8d9bb5;
  --datel-text3:        #4e5d74;

  /* Estados semánticos */
  --datel-success:      #34d399;
  --datel-success-bg:   rgba(52,211,153,0.08);
  --datel-success-b:    rgba(52,211,153,0.18);

  --datel-danger:       #fb7185;
  --datel-danger-bg:    rgba(251,113,133,0.08);
  --datel-danger-b:     rgba(251,113,133,0.18);

  --datel-info:         #60a5fa;
  --datel-info-bg:      rgba(96,165,250,0.07);
  --datel-info-b:       rgba(96,165,250,0.16);

  --datel-warn:         #fbbf24;
  --datel-warn-bg:      rgba(251,191,36,0.08);
  --datel-warn-b:       rgba(251,191,36,0.18);

  --datel-special:      #a78bfa;
  --datel-special-bg:   rgba(167,139,250,0.08);
  --datel-special-b:    rgba(167,139,250,0.18);

  --datel-orange:       #fb923c;
  --datel-orange-bg:    rgba(251,146,60,0.08);
  --datel-orange-b:     rgba(251,146,60,0.18);

  --datel-rose:         #f0abfc;
  --datel-rose-bg:      rgba(240,171,252,0.10);
  --datel-rose-b:       rgba(240,171,252,0.22);

  /* Marca DATEL */
  --datel-brand-blue:   #336699;
  --datel-brand-cyan:   #00d4aa;
  --datel-brand-teal:   #2dd4bf;
  --datel-brand-pink:   #e91e63;

  /* Tipografía */
  --datel-font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --datel-font-display: 'Outfit', system-ui, sans-serif;
  --datel-font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* Espaciado y radius */
  --datel-radius:       16px;
  --datel-radius-sm:    10px;
  --datel-radius-xs:    6px;

  /* Sombras */
  --datel-shadow:       0 8px 32px rgba(0,0,0,0.24), 0 2px 8px rgba(0,0,0,0.12);
  --datel-shadow-lg:    0 20px 60px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.15);
}

/* ─── 2. RESET MÍNIMO ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--datel-font-ui);
  background: var(--datel-bg);
  color: var(--datel-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── 3. AMBIENT BACKGROUND ─── */
.datel-ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 600px 300px at 5% 0%, rgba(45,212,191,0.10), transparent 60%),
    radial-gradient(ellipse 400px 250px at 18% 4%, rgba(96,165,250,0.07), transparent 55%),
    radial-gradient(ellipse 300px 200px at 95% 5%, rgba(167,139,250,0.06), transparent 60%),
    radial-gradient(ellipse 500px 400px at 50% 100%, rgba(96,165,250,0.03), transparent 55%);
}

/* ─── 4. HEADER UNIFICADO ─── */
.datel-hdr {
  position: sticky; top: 0; z-index: 100;
  display: flex; flex-direction: column;
  padding: 12px 24px 0; margin: 0 -28px 14px;
  background: rgba(10,14,26,0.93);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.datel-hdr::after {
  content: ''; display: block; width: 100%; height: 2px; margin-top: 12px;
  background: linear-gradient(90deg,
    #f87171 0%, #fb923c 10%, #fbbf24 20%, #34d399 30%,
    #22d3ee 40%, #60a5fa 50%, #818cf8 60%, #a78bfa 70%,
    #f0abfc 80%, #fb923c 90%, #f87171 100%);
  background-size: 400% 100%;
  animation: datel-rainbow 20s linear infinite;
  opacity: .55;
}

@keyframes datel-rainbow {
  0% { background-position: 400% 0; }
  100% { background-position: 0% 0; }
}

.datel-hdr-main { display: flex; align-items: flex-end; width: 100%; gap: 14px; }

.datel-logo {
  height: 52px; width: auto; flex-shrink: 0;
  filter: brightness(1.06) drop-shadow(0 2px 8px rgba(0,188,212,0.12));
}

.datel-brand-sub {
  font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px;
  padding-bottom: 3px; flex: 1; min-width: 0;
  background: linear-gradient(90deg,
    #8b5cf6 0%, #22d3ee 35%, #2dd4bf 60%, #34d399 85%, #00d4aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.datel-brand-sub .name {
  -webkit-text-fill-color: #fff;
  font-weight: 700;
}

/* ─── 5. NAV LINKS UNIFICADOS ─── */
.datel-nav {
  display: flex; align-items: flex-end; gap: 8px;
  flex-shrink: 0; padding-bottom: 3px;
  flex-wrap: wrap;
}

.datel-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 50px;
  font-size: 11px; font-weight: 600;
  text-decoration: none;
  background: rgba(0,212,170,0.08);
  border: 1px solid rgba(0,212,170,0.18);
  color: var(--datel-brand-cyan);
  transition: all .15s ease;
  white-space: nowrap;
}

.datel-nav-link:hover {
  background: rgba(0,212,170,0.15);
  border-color: rgba(0,212,170,0.3);
  transform: translateY(-1px);
}

.datel-nav-link.active {
  background: rgba(0,212,170,0.20);
  border-color: var(--datel-brand-cyan);
  color: #fff;
}

/* ─── 6. PILLS DE ESTADO ─── */
.datel-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 50px;
  font-size: 10px; font-weight: 600;
  font-family: var(--datel-font-ui);
}

.datel-pill.ok {
  background: var(--datel-success-bg);
  border: 1px solid var(--datel-success-b);
  color: var(--datel-success);
}

.datel-pill.err {
  background: var(--datel-danger-bg);
  border: 1px solid var(--datel-danger-b);
  color: var(--datel-danger);
}

.datel-pill.warn {
  background: var(--datel-warn-bg);
  border: 1px solid var(--datel-warn-b);
  color: var(--datel-warn);
}

.datel-dot {
  width: 5px; height: 5px; border-radius: 50%;
}

.datel-dot.ok  { background: var(--datel-success); box-shadow: 0 0 4px var(--datel-success); }
.datel-dot.err { background: var(--datel-danger); }
.datel-dot.warn{ background: var(--datel-warn); }

/* ─── 7. BOTONES ─── */
.datel-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--datel-radius-sm);
  font-family: var(--datel-font-ui);
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--datel-border);
  background: var(--datel-surface);
  color: var(--datel-text);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  min-height: 36px;
}

.datel-btn:hover {
  background: var(--datel-surface-h);
  border-color: var(--datel-border-h);
}

.datel-btn-primary {
  background: rgba(96,165,250,0.12);
  border-color: rgba(96,165,250,0.25);
  color: var(--datel-info);
}

.datel-btn-primary:hover {
  background: rgba(96,165,250,0.22);
  border-color: rgba(96,165,250,0.4);
}

/* ─── 8. SCROLLBAR UNIFICADA ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.10); }

/* ─── 9. RESPONSIVE GLOBAL ─── */
@media (max-width: 900px) {
  .datel-logo { height: 44px; }
  .datel-brand-sub { font-size: 16px; }
  .datel-hdr { padding: 10px 14px 0; margin: 0 -14px 12px; }
}

@media (max-width: 600px) {
  .datel-logo { height: 36px; }
  .datel-brand-sub { font-size: 13px; line-height: 1.15; }
  .datel-brand-sub .name { display: none; }
  .datel-hdr { padding: 8px 10px 0; margin: 0 -10px 8px; }
  .datel-pill { font-size: 9px; padding: 3px 8px; }
  .datel-nav { gap: 4px; }
  .datel-nav-link { font-size: 10px; padding: 4px 8px; }
}