/* ============================================================
   QUATTRO GAME — Design System canónico (fuente única de marca)
   Servido por Caddy en /assets/quattro.css. Se aplica a TODOS los
   frontends (admin-ui, cliente-panel, consolas de motor) de forma
   incremental. Solo presentacional: no toca lógica.

   Sembrado del styles.css maduro de Cannonbets. Variables --qg-* y
   clases .qg-* para no colisionar con Tailwind ni con estilos locales.
   ============================================================ */

:root {
  /* Marca */
  --qg-gold:      #f0b429;   /* dorado Quattro (ÚNICA fuente de verdad) */
  --qg-gold-2:    #facc15;   /* dorado hover */
  --qg-green:     #22c55e;
  --qg-red:       #ef4444;
  --qg-amber:     #f59e0b;
  --qg-link:      #7dd3fc;

  /* Fondos y superficies (oscuro) */
  --qg-bg:        #0a0e1a;
  --qg-surface:   #0d1220;
  --qg-surface-2: #12192e;
  --qg-border:    #1e2a40;

  /* Texto */
  --qg-text:      #e2e8f0;
  --qg-muted:     #6b7a99;

  /* Radios y sombra */
  --qg-radius:    8px;
  --qg-radius-lg: 12px;
  --qg-shadow:    0 18px 40px -12px rgba(0,0,0,.6);

  /* Tipografía (self-host recomendado; fallback a system) */
  --qg-font:      'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qg-font-head: 'Rajdhani', var(--qg-font);
  --qg-mono:      ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* ---------- Marca / superficies ---------- */
.qg-bg        { background: var(--qg-bg); color: var(--qg-text); }
.qg-surface   { background: var(--qg-surface); border: 1px solid var(--qg-border); }
.qg-gold      { color: var(--qg-gold); }
.qg-head      { font-family: var(--qg-font-head); letter-spacing: 1px; }

/* ---------- Card ---------- */
.qg-card {
  background: var(--qg-surface);
  border: 1px solid var(--qg-border);
  border-radius: var(--qg-radius);
  padding: 16px;
}

/* ---------- KPI ---------- */
.qg-kpi { background: var(--qg-surface); border: 1px solid var(--qg-border); border-radius: var(--qg-radius); padding: 14px 16px; }
.qg-kpi .qg-label { font-size: 11px; color: var(--qg-muted); text-transform: uppercase; letter-spacing: 1px; }
.qg-kpi .qg-value { font-family: var(--qg-font-head); font-size: 26px; color: var(--qg-gold); font-weight: 700; margin-top: 4px; }
.qg-kpi.green .qg-value { color: var(--qg-green); }
.qg-kpi.red   .qg-value { color: var(--qg-red); }

/* ---------- Tabla ---------- */
.qg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.qg-table th { text-align: left; padding: 8px 10px; background: var(--qg-surface-2); color: var(--qg-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--qg-border); }
.qg-table td { padding: 8px 10px; border-bottom: 1px solid var(--qg-border); }
.qg-table tr:hover td { background: rgba(30,42,64,.3); }
.qg-num { text-align: right; font-family: var(--qg-mono); font-variant-numeric: tabular-nums; }

/* ---------- Formularios / botones ---------- */
.qg-input, .qg-select {
  font-family: inherit; font-size: 13px;
  background: var(--qg-bg); color: var(--qg-text);
  border: 1px solid var(--qg-border); border-radius: 6px;
  padding: 7px 10px; outline: none;
}
.qg-input:focus, .qg-select:focus { border-color: var(--qg-gold); }
.qg-btn { font-family: inherit; font-size: 13px; background: var(--qg-border); color: var(--qg-text); border: 1px solid var(--qg-border); border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.qg-btn:hover:not(:disabled) { background: #2a3a5a; }
.qg-btn:disabled { opacity: .4; cursor: default; }
.qg-btn.primary { background: var(--qg-gold); color: #000; font-weight: 700; border-color: var(--qg-gold); }
.qg-btn.primary:hover { background: var(--qg-gold-2); }
.qg-btn.danger  { background: var(--qg-red); color: #fff; border-color: var(--qg-red); }
.qg-btn.small   { padding: 4px 8px; font-size: 11px; }

/* ---------- Badges de estado ---------- */
.qg-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.qg-badge.green  { background: rgba(34,197,94,.18);  color: var(--qg-green); border: 1px solid var(--qg-green); }
.qg-badge.red    { background: rgba(239,68,68,.18);  color: var(--qg-red);   border: 1px solid var(--qg-red); }
.qg-badge.yellow { background: rgba(240,180,41,.18); color: var(--qg-gold);  border: 1px solid var(--qg-gold); }
.qg-badge.gray   { background: rgba(107,122,153,.18);color: var(--qg-muted); border: 1px solid var(--qg-muted); }

/* ---------- Utilidades de layout ---------- */
.qg-row  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qg-grid { display: grid; gap: 12px; }
.qg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.qg-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .qg-grid-3, .qg-grid-4 { grid-template-columns: 1fr; } }