@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;}
.header-links a:hover{color:var(--gold);}

/* ── 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;}
.ticker-item .up{color:var(--up); font-weight:700;}
.ticker-item .down{color:var(--down); font-weight:700;}

/* ── 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;}
}