/* TrendX -- terminal de trading deportivo. Direccion de marca aprobada
   2026-09-08 (mockup "TrendX Terminal"). Reemplaza el sistema anterior
   (Tailwind CDN + 4 colores -700 sueltos + emoji como iconos) por un
   sistema propio: 1 acento de marca (Ticker Gold), semantico Over/Under
   separado, 4 categorias mas contenidas, iconos dibujados, mono para datos. */

:root{
  --bg: #0a0b0d;
  --panel: #121317;
  --panel-2: #17191e;
  --border: #24262d;
  --border-soft: #1b1d22;
  --text: #eae7e1;
  --text-dim: #90939c;
  --text-faint: #55585f;

  --accent: #e3a53d;        /* Ticker Gold -- unico acento de marca */
  --accent-dim: #7a5e28;

  --good: #4ade80;          /* Rally Green -- semantico Over, no es el acento */
  --bad: #f0645f;           /* Drawdown Red -- semantico Under */

  --local: #5b9bd9;         /* Steel Blue */
  --away: #d9705b;          /* Ember Coral */
  --matchtotal: #9c8fd9;    /* Dusk Violet */
  --bothscore: #4fbfae;     /* Teal Signal */

  --ball: #eae7e1;          /* balon -- blanco */
  --corner: #e2823f;        /* bandera de corner -- naranja */
  --card: #e8d23a;          /* tarjeta -- amarillo */

  --shadow: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  background:var(--bg); color:var(--text); margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.5;
}
::selection{ background:var(--accent); color:#1a1305; }
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
img{ max-width:100%; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.dir{font-weight:700}
.dir.o{color:var(--good)}
.dir.u{color:var(--bad)}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,var(--panel),var(--bg));
}
.site-inner{
  max-width:760px;margin:0 auto;padding:22px 20px 18px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; }
.mark{ flex-shrink:0; }
.wordmark{ display:flex; align-items:baseline; gap:2px; }
.wordmark .t1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.wordmark .t2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.wordmark.small .t1,.wordmark.small .t2{font-size:1.05rem}
.wordmark .cursor{
  width:3px;height:1.05rem;background:var(--accent);margin-left:3px;border-radius:1px;
  animation:blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce){ .wordmark .cursor{ animation:none; } }
@keyframes blink{ 50%{opacity:0} }
.tagline{font-size:.82rem;color:var(--text-dim);margin:2px 0 0}

.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.info-wrap{position:relative}
.icon-btn{
  width:20px;height:20px;border-radius:999px;border:1px solid var(--border);
  color:var(--text-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.icon-btn svg{width:13px;height:13px}
.icon-btn:hover{color:var(--text);border-color:var(--text-faint)}
.popover{
  position:absolute;top:26px;right:0;z-index:10;width:280px;
  background:var(--panel);border:1px solid var(--border-soft);border-radius:10px;
  padding:12px 14px;font-size:.78rem;color:var(--text-dim);box-shadow:var(--shadow);
}
.legend-toggle-btn{
  display:none;border:1px solid var(--border);color:var(--text-dim);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;
}
.legend-toggle-btn:hover{color:var(--text);border-color:var(--text-faint)}
.legend-block{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.legend-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.legend-item{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--text-dim)}
.legend-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.legend-note{font-size:.72rem;color:var(--text-faint);text-align:right;max-width:320px;margin:0}
.star-inline{width:10px;height:10px;color:var(--accent);vertical-align:-1px}

@media (max-width:639px){
  .legend-toggle-btn{ display:inline-flex; }
  .legend-block{ display:none; }
  .legend-block.legend-open{ display:flex; }
}

/* ---------- Tabs ---------- */
.tabbar-row{
  max-width:760px;margin:0 auto;padding:18px 20px 0;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.tabs{display:flex;gap:22px;position:relative}
.tab-btn{color:var(--text-faint);font-weight:700;font-size:.92rem;padding:6px 0 12px;position:relative}
.tab-btn.active{color:var(--text)}
.tab-underline{
  position:absolute;bottom:0;height:2px;background:var(--accent);border-radius:2px;
  transition:left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}
.tab-date{font-size:.78rem;color:var(--text-faint);margin:0}
.tabbar-rule{border-bottom:1px solid var(--border-soft);max-width:760px;margin:0 auto 22px;padding:0 20px}

/* ---------- League list ---------- */
.league-grid{max-width:760px;margin:0 auto;padding:0 20px 60px;display:flex;flex-direction:column;gap:16px}
.league-group{ }
.panel{
  background:var(--panel);border:1px solid var(--border-soft);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;gap:8px;padding:0;
  border-bottom:1px solid var(--border-soft);width:100%;text-align:left;
}
.panel-head-inner{display:flex;align-items:center;gap:8px;padding:12px 16px;flex:1;min-width:0}
.panel-head img{height:18px;width:18px;object-fit:contain;flex-shrink:0}
.panel-head h3{font-size:.86rem;font-weight:700;color:var(--text);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chevron{color:var(--text-faint);flex-shrink:0;margin-right:14px;transition:transform .18s}
.chevron.collapsed{transform:rotate(-90deg)}

/* Un "match-block" es UN partido completo (equipos + chips) -- el divisor
   entre partidos va al FINAL del bloque, no debajo de los nombres de
   equipo. Bug real corregido 2026-09-08: la linea vivia en .match-row, o
   sea ENTRE los nombres y sus propios chips -- visualmente parecia que los
   chips eran del partido de ABAJO. */
.match-block{border-bottom:1px solid var(--border-soft)}
.match-block:last-child{border-bottom:none}
.match-row{
  display:flex;align-items:center;gap:12px;padding:12px 16px 8px;
}
.row-status{width:42px;flex-shrink:0;font-size:.76rem;color:var(--text-faint);text-align:left}
.row-status .live{color:var(--accent);font-weight:700}
.row-teams{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-teams .tm{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-teams img{height:15px;width:15px;object-fit:contain;flex-shrink:0}
.row-score{flex-shrink:0;text-align:right;font-size:.85rem;font-weight:700;color:var(--text-dim)}
.row-score div{line-height:1.65}
.row-score .finished{color:var(--text)}

/* Los chips van en UNA sola fila lineal (no mas separados en 2 filas por
   categoria -- se veia raro apilado) y mas chicos/compactos. */
.chip-row{display:flex;flex-wrap:wrap;gap:5px;padding:0 16px 14px}
.chip-row:empty{display:none}

/* Chip de 2 piezas -- tag solido con letra (dice QUIEN: Local/Visitante/
   Match Total/Ambos anotan, color+texto redundante) + cuerpo neutro con un
   icono de color FIJO por tipo de stat (dice QUE stat es, sin importar la
   categoria). 2 codigos independientes en vez de 1 solo debil -- decidido
   con el usuario 2026-09-08 despues de que el primer intento (icono chico
   con relleno tenue por categoria) resultara dificil de distinguir. */
.chip{
  display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;
  font-size:.68rem;font-weight:600;box-shadow:0 0 0 1px var(--border) inset;
  white-space:nowrap;
}
.chip .tag{
  font-weight:800;font-size:.62rem;padding:3px 6px;display:flex;align-items:center;
  letter-spacing:.01em;color:#0a0b0d;
}
.chip .body{background:var(--panel-2);color:var(--text);padding:3px 6px;display:flex;align-items:center;gap:4px}
.chip .body svg{width:11px;height:11px;fill:none;stroke-width:1.8;flex-shrink:0}
.tag-local{background:var(--local)}
.tag-away{background:var(--away)}
.tag-mt{background:var(--matchtotal);color:#fff}
.tag-aa{background:var(--bothscore)}
.icon-ball{stroke:var(--ball)}
.icon-corner{stroke:var(--corner)}
.icon-card{stroke:var(--card)}
.chip .hit-star{width:10px;height:10px;color:var(--accent);margin-left:1px}

.empty-state{
  border:1px dashed var(--border);border-radius:12px;background:var(--panel-2);
  padding:24px;font-size:.85rem;color:var(--text-dim);
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border-soft);margin-top:8px}
.footer-inner{
  max-width:760px;margin:0 auto;padding:26px 20px;
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:600px){ .footer-inner{flex-direction:row;align-items:center;justify-content:space-between} }
.footer-sub{font-size:.76rem;color:var(--text-faint);margin:2px 0 0}
.footer-disclaimer{font-size:.76rem;color:var(--text-faint);max-width:340px;margin:0}
.footer-meta{font-size:.74rem;color:var(--text-faint);margin:0}