@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg-void:#0A0C10;
  --bg-panel:#12151B;
  --bg-raised:#191D25;
  --border:#232733;
  --text:#EDEFF2;
  --muted:#7C8494;
  --gold:#D8A93A;
  --gold-dim:#8A6E2A;
  --up:#3FAE72;
  --down:#C1553F;
  --radius:10px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-void);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}

a{color:inherit;}

/* ── Header ───────────────────────────────── */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(10,12,16,0.92); backdrop-filter:blur(6px);
  z-index:50;
}
.brand{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px;
  letter-spacing:0.01em; display:flex; align-items:center; gap:8px;
}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;}
.brand small{color:var(--muted); font-weight:500; font-size:12px; font-family:'JetBrains Mono',monospace;}
.header-links a{font-size:13px; color:var(--muted); text-decoration:none; margin-left:20px; font-weight:500; cursor:pointer;}
.header-links a:hover{color:var(--gold);}
.header-links a.active{color:var(--gold);}
.header-links .premium-btn{color:var(--gold); border:1px solid var(--gold-dim); border-radius:20px; padding:5px 12px;}

/* ── Ticker: colores semánticos (favorable / desfavorable) ─────── */
.ticker-item .fav{color:var(--up); font-weight:700;}
.ticker-item .unfav{color:var(--down); font-weight:700;}

/* ── Selector de serie ───────────────────────── */
.serie-bar{
  display:flex; align-items:center; gap:12px; padding:14px 28px 0;
  flex-wrap:wrap;
}
.serie-bar label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em;}
.serie-bar select{
  background:var(--bg-raised); border:1px solid var(--gold-dim); color:var(--gold);
  border-radius:7px; padding:8px 12px; font-size:13px; font-weight:600; font-family:'JetBrains Mono',monospace;
}

/* ── Tabla: columna hora ───────────────────────── */
td.time-col{color:var(--muted); font-size:12px;}

/* ── Buscador ───────────────────────────────── */
.search-box{position:relative;}
.search-box input{padding-left:30px !important; min-width:190px;}
.search-box::before{content:"🔎"; position:absolute; left:9px; top:50%; transform:translateY(-50%); font-size:11px; opacity:0.6;}

/* ── Modal genérico (login premium) ─────────────── */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,7,10,0.75); display:none;
  align-items:center; justify-content:center; z-index:200;
}
.modal-overlay.open{display:flex;}
.modal-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; width:320px;
}
.modal-card h3{font-family:'Space Grotesk',sans-serif; margin:0 0 4px;}
.modal-card p{color:var(--muted); font-size:12.5px; margin-top:0;}
.modal-close{float:right; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer;}
.premium-tag{
  display:inline-flex; align-items:center; gap:5px; background:#2A2510; color:var(--gold);
  padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:600; margin-left:14px;
}

/* ── Tabla de muestras (elegante) ────────────────── */
.samples-table-wrap{max-height:220px; overflow-y:auto; margin-top:14px; border:1px solid var(--border); border-radius:8px;}
.samples-table{width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:12px;}
.samples-table thead th{
  position:sticky; top:0; background:var(--bg-raised); color:var(--muted); text-align:left;
  padding:8px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em;
}
.samples-table td{padding:6px 12px; border-top:1px solid var(--border);}
.samples-table td.delta-pos{color:var(--down);}
.samples-table td.delta-neg{color:var(--up);}
.candle-mode-toggle{display:flex; gap:6px; margin-top:12px;}
.candle-mode-toggle button{
  background:var(--bg-raised); border:1px solid var(--border); color:var(--muted);
  border-radius:6px; padding:5px 10px; font-size:11.5px; cursor:pointer;
}
.candle-mode-toggle button.active{border-color:var(--gold); color:var(--gold);}

/* ── Vista: Comparar deportes ───────────────────── */
.compare-view{padding:20px 28px 60px; display:none;}
.compare-view.open{display:block;}
.compare-view h2{font-family:'Space Grotesk',sans-serif; margin:0 0 4px;}
.compare-view .sub{color:var(--muted); font-size:13px; margin-bottom:18px;}
.sport-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.chip{
  border:1px solid var(--border); border-radius:20px; padding:7px 14px; font-size:12.5px;
  cursor:pointer; user-select:none; color:var(--muted); background:var(--bg-panel);
  display:flex; align-items:center; gap:6px;
}
.chip .dot{width:8px; height:8px; border-radius:50%;}
.chip.selected{color:var(--text); border-color:currentColor;}
.chip.all{font-weight:600;}
#compare-chart-container{background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; height:340px;}
.compare-insight{
  background:var(--bg-raised); border-left:3px solid var(--gold); padding:12px 16px;
  font-size:13px; color:var(--text); margin-top:16px; border-radius:0 6px 6px 0; line-height:1.5;
}
.compare-table-wrap{margin-top:18px; max-height:320px; overflow-y:auto; border:1px solid var(--border); border-radius:8px;}

@media (max-width:820px){
  .serie-bar{padding-left:16px; padding-right:16px;}
  .compare-view{padding-left:16px; padding-right:16px;}
}

/* ── Ticker tape (elemento firma) ─────────────── */
.ticker-wrap{
  overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--border);
  background:var(--bg-panel); padding:9px 0;
}
.ticker{
  display:inline-flex; gap:36px; padding-left:100%;
  animation:scroll-left 45s linear infinite;
  font-family:'JetBrains Mono',monospace; font-size:12.5px;
}
.ticker-wrap:hover .ticker{ animation-play-state:paused; }
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
.ticker-item{display:inline-flex; align-items:center; gap:7px; color:var(--muted);}
.ticker-item b{color:var(--text); font-weight:500;}

/* ── Layout ───────────────────────────────── */
.stats-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding:22px 28px 6px;
}
.stat-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px;
}
.stat-card .label{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px;}
.stat-card .value{font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700;}
.stat-card .value.pos{color:var(--up);}
.stat-card .value.neg{color:var(--down);}

.filters-bar{
  display:flex; flex-wrap:wrap; gap:10px; padding:16px 28px; align-items:center;
  border-bottom:1px solid var(--border); margin-top:8px;
}
.filters-bar select, .filters-bar input{
  background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:8px 10px; font-size:13px; font-family:'Inter',sans-serif;
}
.filters-bar label{font-size:11px; color:var(--muted); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.04em;}
.filter-group{display:flex; flex-direction:column;}
.filters-bar .spacer{flex:1;}
.btn{
  background:var(--gold); color:#151204; border:none; border-radius:7px; padding:9px 16px;
  font-weight:600; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif;
}
.btn:hover{background:#e8ba53;}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text);}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ── Table ───────────────────────────────── */
.table-wrap{padding:18px 28px 60px;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border);
  cursor:pointer; user-select:none;
}
thead th:hover{color:var(--gold);}
tbody tr{border-bottom:1px solid var(--border); cursor:pointer;}
tbody tr:hover{background:var(--bg-panel);}
tbody td{padding:11px 12px; font-family:'JetBrains Mono',monospace;}
td.event-name{font-family:'Inter',sans-serif; font-weight:500;}
.badge{
  display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600;
  font-family:'Inter',sans-serif;
}
.badge.pendiente{background:#2A2510; color:var(--gold);}
.badge.ganada{background:#12261C; color:var(--up);}
.badge.perdida{background:#2A1613; color:var(--down);}
.badge.nula{background:var(--bg-raised); color:var(--muted);}
.drop-pct{color:var(--up); font-weight:700;}
.profit.pos{color:var(--up); font-weight:700;}
.profit.neg{color:var(--down); font-weight:700;}

/* ── Modal / slide-over de velas ─────────────── */
.overlay{
  position:fixed; inset:0; background:rgba(6,7,10,0.7); display:none;
  align-items:stretch; justify-content:flex-end; z-index:100;
}
.overlay.open{display:flex;}
.panel{
  width:min(680px,92vw); background:var(--bg-panel); border-left:1px solid var(--border);
  padding:24px; overflow-y:auto;
}
.panel h2{font-family:'Space Grotesk',sans-serif; margin:0 0 4px;}
.panel .sub{color:var(--muted); font-size:13px; margin-bottom:18px;}
.close-btn{float:right; background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer;}
.pattern-note{
  background:var(--bg-raised); border-left:3px solid var(--gold); padding:10px 14px;
  font-size:13px; color:var(--muted); margin-top:14px; border-radius:0 6px 6px 0;
}
#chart-container{width:100%; height:320px; margin-top:12px;}

/* ── Login / Admin ───────────────────────────── */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.login-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; width:340px;
}
.login-card h1{font-family:'Space Grotesk',sans-serif; font-size:20px; margin-bottom:4px;}
.login-card p{color:var(--muted); font-size:13px; margin-top:0;}
.field{margin-bottom:14px;}
.field label{font-size:12px; color:var(--muted); display:block; margin-bottom:5px;}
.field input{
  width:100%; background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
  padding:10px 11px; border-radius:7px; font-size:14px;
}
.error-msg{color:var(--down); font-size:13px; margin-top:8px;}
.admin-wrap{padding:28px;}
.admin-wrap select{background:var(--bg-raised); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px 8px;}

@media (max-width:820px){
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .site-header{padding:14px 16px;}
  .table-wrap, .filters-bar, .stats-row{padding-left:16px; padding-right:16px;}
}