/* ============================================================
   JARVIS PANEL · Magic Brain — Design Tokens (dirección "Audaz / HUD")
   Modo dark · negro carbón + amarillo de marca como acento.
   Pegá este archivo en tu proyecto e importalo una vez (global).
   Fuentes: Space Grotesk (UI) + JetBrains Mono (datos/IDs).
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   ============================================================ */

:root{
  /* Marca */
  --brand:#F4B71E;          /* amarillo Magic Brain — acento principal */
  --brand-soft:#FFD45E;     /* hover / variante clara */

  /* Superficies (negro carbón, neutro) */
  --bg:#070708;             /* fondo de la app */
  --surface:#0F0F11;        /* tarjetas / tablas */
  --surface-2:#15151A;      /* hover de fila / inputs */

  /* Líneas */
  --line:rgba(255,255,255,.10);     /* divisores estándar */
  --line-y:rgba(244,183,30,.35);    /* divisor de marca (header, headers de tabla) */

  /* Texto */
  --text:#EDEDEF;           /* texto principal */
  --muted:#82828A;          /* secundario */
  --faint:#56565E;          /* terciario / labels apagados */

  /* Estados (NO usar amarillo para estado — reservado a marca) */
  --ok:#5FD08A;             /* verde — OK / activo */
  --warn:#FF7A66;           /* rojo cálido — problema / vencido / cuota alta */
  --paused:#84848C;         /* gris — pausado */

  /* Tipografía */
  --sans:"Space Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* Radios (HUD usa esquinas casi rectas) */
  --r:8px;
  --r-chip:0px;

  /* Escala de texto */
  --fs-display:34px;  /* títulos de detalle */
  --fs-h2:15px;       /* headers de sección (mono, uppercase) */
  --fs-body:14px;
  --fs-data:13px;     /* datos en mono */
  --fs-label:10px;    /* labels mono uppercase, letter-spacing .12em */
}

/* ---------- BASE ---------- */
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Textura de grilla sutil opcional (sello "HUD"): */
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:42px 42px; background-attachment:fixed;
}
.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1; }   /* tabular nums para alinear cifras */
::selection{ background:var(--brand); color:#000; }

/* ---------- BOTONES ---------- */
.btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  border:1px solid var(--line); background:transparent; color:var(--text);
  border-radius:var(--r); padding:8px 13px; cursor:pointer; transition:.15s;
}
.btn:hover{ border-color:var(--line-y); color:var(--brand-soft); }

.btn-primary{                       /* acción principal: amarillo sólido, texto oscuro */
  font-family:var(--sans); font-weight:700; border:none;
  background:var(--brand); color:#1A1300;
  border-radius:var(--r); padding:9px 16px; cursor:pointer; transition:.15s;
}
.btn-primary:hover{ background:var(--brand-soft); box-shadow:0 6px 22px -6px rgba(244,183,30,.5); }

.btn-danger{ color:var(--warn); border-color:rgba(255,122,102,.4); }
.btn-danger:hover{ color:#fff; background:rgba(255,122,102,.16); border-color:var(--warn); }

/* ---------- ESTADO (pill entre corchetes) ---------- */
.pill{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; padding:3px 4px; }
.pill::before{ content:"[ "; opacity:.6; }
.pill::after{ content:" ]"; opacity:.6; }
.pill.ok{ color:var(--ok); }
.pill.warn{ color:var(--warn); }
.pill.paused{ color:var(--paused); }

/* chip (tier, etc.) */
.chip{ font-family:var(--mono); font-size:11px; color:var(--muted);
       border:1px solid var(--line); padding:3px 8px; }

/* ---------- INPUTS / SELECTS ---------- */
.control{
  appearance:none; background:var(--surface); border:1px solid var(--line);
  color:var(--text); font-family:var(--mono); font-size:13px;
  border-radius:var(--r); padding:10px 12px; outline:none; transition:.15s;
}
.control:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(244,183,30,.16); }

/* ---------- HEADER DE SECCIÓN ---------- */
.sec h2{ font-family:var(--mono); font-size:var(--fs-h2); font-weight:700;
         letter-spacing:.04em; text-transform:uppercase; }
.sec .blk{ width:14px; height:14px; background:var(--brand); }   /* bloque amarillo */

/* ---------- TABLA ---------- */
thead th{ font-family:var(--mono); font-size:10px; letter-spacing:.1em;
          text-transform:uppercase; color:var(--brand); font-weight:500;
          background:rgba(244,183,30,.04); border-bottom:1px solid var(--line-y);
          text-align:left; padding:13px 16px; }
tbody td{ border-bottom:1px solid var(--line); padding:15px 16px; font-size:var(--fs-body); }
tbody tr{ cursor:pointer; transition:.12s; }
tbody tr:hover{ background:var(--surface-2); box-shadow:inset 3px 0 0 var(--brand); }  /* borde activo amarillo */

/* ---------- BARRA DE CUOTA / USO (segmentada) ---------- */
.bar{ height:9px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar i{ display:block; height:100%;
  background-image:repeating-linear-gradient(90deg, var(--brand) 0, var(--brand) 5px, transparent 5px, transparent 7px); }
.bar.hi i{ /* >= 80% → rojo */
  background-image:repeating-linear-gradient(90deg, var(--warn) 0, var(--warn) 5px, transparent 5px, transparent 7px); }

/* ============================================================
   NOTAS DE USO
   - Amarillo SOLO en: botón primario, marca/logo, headers de tabla,
     bloque de sección, barras de cuota y borde-hover de fila.
   - Estados NUNCA en amarillo: verde=OK, rojo=problema, gris=pausado.
   - Datos, IDs, fechas, tokens, % → siempre en var(--mono) con .mono (tabular).
   - El logo (máscara negra) va sobre un tile blanco (o con outline amarillo)
     para que lea en dark. No invertir el negro del logo.
   - Cuota: si % >= 80, agregá la clase .hi a .bar y al %.
   ============================================================ */