/*  — styles.css */
:root{
  --bg: #090d12;
  --bg-soft: #0e141c;
  --bg-elev: #121a24;
  --card: #0f151e;
  --text: #e8eef5;
  --muted: #90a8c2;
  --brand: #00c896;
  --brand-2: #7aa2f7;
  --danger: #ff5c5c;
  --border: #1a2736;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --head-h: 64px;
  --table-head-h: 48px;
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1100px 500px at 20% -10%, rgba(0,200,150,0.06), transparent 55%),
    radial-gradient(900px 400px at 100% 0%, rgba(122,162,247,0.07), transparent 50%),
    var(--bg);
  color: var(--text);
  font: 14px/1.5 ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, "SF Pro", system-ui, Arial;
}
.hidden{ display:none !important; }

/* Header */
.main-header{
  position: relative; /* ❌ ya no es fixed */
  top: auto; left: auto; right: auto; height: var(--head-h);
  background: linear-gradient(180deg, rgba(18,26,36,0.9), rgba(18,26,36,0.8));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(7px);
  z-index: auto;
}
.container{ max-width: 1200px; margin: 0 auto; padding: 0 18px; }
.hdr{ height: var(--head-h); display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 16px rgba(0,200,150,0.6); }
.main{ padding-top: 20px; padding-bottom: 24px; } /* sin compensación */

/* Tabs (desktop): sólo texto, sin caja. Hover ilumina, activo en verde */
.tabs{
  display:flex; gap:16px; align-items:center;
}
.tab{
  appearance:none; background:transparent; border:0;
  padding:0; margin:0;
  color:#b7c8db; cursor:pointer; font-weight:600;
  border-radius:0;
  position:relative;
  transition: color .15s ease, text-shadow .15s ease;
}
.tab:hover{
  color:#e8eef5;
  text-shadow: 0 0 18px rgba(122,162,247,0.35);
}
.tab.active{
  color: var(--brand);
  text-shadow: 0 0 18px rgba(0,200,150,0.45);
}

/* Wallet */
.wallet{ display:flex; gap:8px; align-items:center; }
.pill{ background:#0c1219; padding:6px 10px; border-radius:10px; border:1px solid var(--border); color: var(--muted); }
#btn-connect{ border:0; background: var(--brand); color:#001510; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer; }

/* Tables */
.table-wrap{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,0.3);
  margin-bottom: 14px;
}

/* Table subheader — ❌ sin sticky */
.table-head{
  position: relative;
  top: auto; z-index: auto;
  height: var(--table-head-h);
  padding: 0 12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(18,26,36,0.95), rgba(18,26,36,0.92));
  backdrop-filter: blur(4px);
}

.table-title{ font-weight:700; }
.table-sub{ color: var(--muted); font-size: 12px; }
table{ width:100%; border-collapse: separate; border-spacing: 0; }

/* Table header — sin sticky */
thead{
  position: static;
  top: auto;
  z-index: auto;
  background: var(--card);
}
thead th{
  position: static;
  text-align:left;
  padding:10px 12px;
  font-size:12px;
  color: var(--muted);
  background: var(--card);
  border-bottom:1px solid var(--border);
}

tbody td{ padding:10px 12px; border-bottom:1px solid #11202f; }
tbody tr:hover{ background: rgba(0,200,150,0.05); }
.col-fav{ width:60px; }

.mk-title{ font-weight:600; }
.mk-cell{ display:flex; align-items:center; gap:10px; }
.thumb{ width:64px; height:40px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }

/* Buttons */
.btn, .btn-outlined, .btn-mini{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; user-select:none;
  border-radius:10px;
}
.btn{ padding:8px 12px; background:var(--brand); color:#001510; border:0; font-weight:700; }
.btn-outlined{ padding:8px 12px; background:#0d141c; border:1px solid var(--border); color:#dfeaf7; }
.btn-mini{ padding:6px 8px; background:#0c141d; border:1px solid #1b2a3b; color:#b9cde4; border-radius:8px; }

/* Actions */
.actions{ display:flex; gap:6px; flex-wrap: wrap; }
.btn-action{
  padding:8px 10px; border-radius: 10px; background: #0c141d;
  border:1px solid #1b2a3b; color: #bcd3ef; cursor: not-allowed; white-space: nowrap; font-weight:600;
}
.btn-action .pct{ opacity:.9; margin-left:6px; color:#7aa2f7; }

/* Favorite star */
.btn-fav{
  width:34px; height:34px; border-radius:9px; background:#0c141d; border:1px solid #1b2a3b; color:#98b4cc; cursor:pointer;
}
.btn-fav.on{ color: #ffd86b; border-color:#6b5b25; box-shadow: inset 0 0 16px rgba(255,216,107,0.25); }

/* Modals */
#modal-market, #modal-profile{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(5,10,16,0.55); z-index: 50;
}
#modal-market.show, #modal-profile.show{ display:flex; }
.modal{
  width: min(760px, 92vw); border-radius: 16px; overflow: hidden;
  background: var(--card); border:1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.modal-header{
  display:flex; align-items:center; gap:12px; padding:12px;
  background: var(--bg-elev); border-bottom:1px solid var(--border);
}
.modal-img{ width:120px; height:76px; object-fit:cover;
  border-radius:10px; border:1px solid var(--border); }
.modal h2{ margin:0; font-size:18px; line-height:1.2; }
.muted{ color: var(--muted); }
.small{ font-size:12px; }
.modal-stats, .modal-body, .modal-list{ padding:12px; }
.modal-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background: var(--bg-elev); border-top:1px solid var(--border);
}
.btn-close{
  margin-left:auto; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--border); background:#0c141d; color:#bfd3ea; cursor:pointer;
}

/* Profile modal table */
.profile-name{ font-weight:700; font-size:16px; }
.profile-table thead{ position: static; }
.profile-table thead th{ position: static; }

/* Watchlist */
#watchlist{
  position: fixed; right:16px; bottom:16px; width: 360px; max-width: 92vw;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45); display:none; z-index: 40;
}
#watchlist.open{ display:block; }
#watchlist .head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border);
  background: var(--bg-elev);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
#watchlist .body{ padding:10px; max-height: 60vh; overflow:auto; }
.wl-card{
  display:grid; grid-template-columns: 84px 1fr auto; gap:10px; align-items:center;
  padding:8px; background:#0e1520; border:1px solid #162334;
  border-radius:12px; margin-bottom:8px;
}
.wl-card img{ width:84px; height:52px; object-fit:cover; border-radius:8px;
  border:1px solid var(--border); }
.wl-title{ font-weight:600; }
.wl-meta{ color: var(--muted); font-size:12px; margin-top:4px; }
.spark-mini{ width:100%; height:48px; margin-top:6px; }

/* Inputs */
.input{ background:#0b121a; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; outline:none; }
.input:focus{ border-color:#284260;
  box-shadow:0 0 0 3px rgba(122,162,247,0.12); }

/* Grid / Cards */
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.card{ background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 34px rgba(0,0,0,0.25); }
.card .content{ padding:12px; }
.card .title{ font-weight:700; }

/* Footers */
.table-foot{ padding: 10px 12px; display:flex; align-items:center;
  justify-content:center; border-top:1px solid var(--border);
  background: var(--bg-elev); }

/* Skeletons (simple) */
.skeleton .sk-box{ height:12px; background:#101a26; border-radius:6px;
  border:1px solid #122233; }
.skeleton .sk-row{ display:flex; gap:8px; align-items:center; }
.w-12{ width: 48px; } .w-16{ width: 64px; } .w-24{ width: 96px; }
.w-32{ width:128px; } .w-40{ width:160px; } .w-56{ width:224px; }
.w-64{ width:256px; }

/* Responsive */
@media (max-width: 1024px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
}
/* Bet choices: clearer selected state */
.btn-choice {
  position: relative;
  padding-left: 28px;
}
.btn-choice .choice-dot {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #243447; border: 1px solid #37516b;
}
.btn-choice.on {
  outline: 2px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(0,200,150,0.15);
}
.btn-choice.on .choice-dot {
  background: var(--brand);
  border-color: var(--brand);
}
/* chips in markets odds */
.btn-chip { opacity: .95; }

/* --- Mobile header: oculta brand y wallet, pero deja visible el menú --- */
@media (max-width: 768px){
  .main-header .hdr .brand,
  .main-header .hdr .wallet { display: none !important; }

  /* Fuerza el menú visible en móvil aunque lleve .hidden en el HTML */
  .main-header .hdr #main-tabs { display: flex !important; gap: 6px; }

  /* Un pelín de aire arriba */
  .main { padding-top: 12px; }
}