/* =========================================================
   UI base · cromática uniforme
   ========================================================= */
:root{
  --surface-0: 24 24 27;
  --surface-1: 24 24 27;
  --surface-2: 17 24 39;
  --surface-3: 17 24 39;
  --line-1:    148 163 184;
  --line-2:    148 163 184;
  --muted:     203 213 225;
  --brand-1:   #0ea5e9;
  --brand-2:   #6366f1;
  --success-1: #16a34a;  --success-2:#22c55e;
  --warn-1:    #f59e0b;  --error-1:#dc2626;
  --on-surface: 226 232 240;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface-0: color-mix(in oklab, Canvas 12%, transparent);
    --surface-1: color-mix(in oklab, Canvas 8%, transparent);
    --surface-2: color-mix(in oklab, Canvas 6%, transparent);
    --surface-3: color-mix(in oklab, Canvas 10%, transparent);
    --line-1:    color-mix(in oklab, Canvas 70%, CanvasText 30%);
    --line-2:    color-mix(in oklab, Canvas 65%, CanvasText 35%);
    --muted:     color-mix(in oklab, Canvas 40%, CanvasText 60%);
  }
}

/* Motion */
@media (prefers-reduced-motion: no-preference){
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
}
.reveal{opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s;}
.reveal.is-visible{opacity:1; transform:none;}

/* =========================================================
   Botones
   ========================================================= */
.btn-primary,
.btn-ghost,
.install-icon,
#pwaInstall{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:1rem;
  padding:.5rem 1rem;
  font-weight:600;
}

/* Primario */
.btn-primary{
  color:#fff;
  background-image: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  transition: filter .15s, transform .15s;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:active{ transform:translateY(1px); }

/* Ghost */
.btn-ghost{
  border:1px solid var(--line-1);
  background: var(--surface-2);
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover{ background: var(--surface-3); }
@media (prefers-color-scheme: dark){
  .btn-ghost{ border-color: var(--line-2); }
}

/* Chip de instalación */
.install-icon,
#pwaInstall{
  color:#fff;
  border-radius:999px;
  background-image: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  transition: filter .15s, transform .15s;
}
.install-icon:hover, #pwaInstall:hover{ filter:brightness(1.08); }
.install-icon:active, #pwaInstall:active{ transform:translateY(1px); }

/* =========================================================
  Navegación
  ========================================================= */
.nav-link:hover{ background: rgb(var(--surface-3) / .60); }
.nav-link[aria-current="page"]{ font-weight:600; background: rgba(var(--surface-3), .85); }
@media (prefers-color-scheme: dark){
  .nav-link:hover{ background: color-mix(in oklab, Canvas 85%, CanvasText 15%); }
  .nav-link[aria-current="page"]{ background: color-mix(in oklab, Canvas 80%, CanvasText 20%); }
}

/* =========================================================
   Tarjetas rápidas
   ========================================================= */
.card-quick{
  position:relative; display:flex; gap:1rem; align-items:center;
  padding:1.25rem; border-radius:1rem;
  border:1px solid var(--line-2);
  background: var(--surface-1);
  backdrop-filter: blur(8px);
  transition: transform .2s, box-shadow .2s;
}
.card-quick:hover{ transform:translateY(-2px) rotateX(.8deg); box-shadow: var(--shadow-2); }
.card-quick::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; opacity:0; pointer-events:none;
  background: radial-gradient(120px 80px at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--brand-1) 35%, transparent), transparent 70%);
  transition: opacity .25s;
}
.card-quick:hover::after{ opacity:1; }

/* =========================================================
   Chips / buscador / toggle vista
   ========================================================= */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .7rem; border-radius:999px; cursor:pointer; user-select:none;
  border:1px solid var(--line-1); background: var(--surface-2);
  transition: background .2s, border-color .2s;
}
.chip:hover{ background: var(--surface-3); }
.chip[aria-pressed="true"]{ background: color-mix(in oklab, Canvas 90%, CanvasText 10%); border-color: var(--line-2); font-weight:600; }

.input-search{
  border:1px solid var(--line-1);
  background: var(--surface-0);
  border-radius:.75rem; padding:.5rem .75rem;
}
.input-search:focus{ outline:2px solid currentColor; outline-offset:2px; }

.view-toggle{ display:inline-flex; border:1px solid var(--line-1); border-radius:.75rem; overflow:hidden; }
.view-toggle button{ padding:.45rem .75rem; font-weight:600; opacity:.7; transition: background .2s, opacity .2s; }
.view-toggle button[aria-pressed="true"]{ background: color-mix(in oklab, Canvas 90%, CanvasText 10%); opacity:1; }

/* =========================================================
   Tablas y clasificación
   ========================================================= */
.table-card{ border:1px solid rgb(var(--line-1)); background: rgb(var(--surface-2) / .92); }
@media (prefers-color-scheme: dark){
  .table-card:hover{ border-color: rgb(var(--line-2)); background: rgba(var(--surface-1), .94); }
}
.table-zebra tbody tr:nth-child(even){ background: rgb(var(--surface-2) / .50); }
.table-hover tbody tr:hover{ background: rgb(var(--surface-3) / .65); }
.table-sticky thead th{ position:sticky; top:0; background:inherit; backdrop-filter: blur(6px); z-index:1; }

#tabla-clasificacion th, #tabla-clasificacion td{ padding:.6rem .75rem; }
#tabla-clasificacion th:nth-child(1), #tabla-clasificacion td:nth-child(1){ text-align:right; width:3.5rem; }

/* =========================================================
   Badges
   ========================================================= */
.badge{
  display:inline-block; font-size:.72rem; line-height:1;
  padding:.28rem .5rem; border-radius:.5rem;
  border:1px solid var(--line-2);
  background: var(--surface-2);
}
.badge-pos{ color:var(--success-1); }
.badge-warn{ color:var(--warn-1); }
.badge-neg{ color:var(--error-1); }

/* =========================================================
   Barras
   ========================================================= */
.bar{ height:8px; border-radius:999px; background: rgb(var(--surface-2) / .15); overflow:hidden; }
.bar > i{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); transition: width .35s ease; }

/* =========================================================
   Player cards
   ========================================================= */
.card-grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:.9rem; }
@media (min-width:480px){ .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.player-card{
  display:flex; gap:1rem; padding:1rem; border-radius:1rem; cursor:pointer;
  border:1px solid var(--line-1);
  background: var(--surface-1);
  backdrop-filter: blur(6px);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.player-card:hover{ transform:translateY(-2px); box-shadow: var(--shadow-2); }

/* =========================================================
   Gráficos
   ========================================================= */
svg text{
  font-size: 13px !important;
  fill: #e8edf3 !important;
  fill-opacity: 1 !important;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,.85);
  stroke-width: 2px;
  stroke-linejoin: round;
}
svg .axis path,
svg .axis line{ stroke:#9ca3af !important; opacity:.9 !important }

/* =========================================================
   Tablas (probabilidades)
   ========================================================= */
.border.glass table th,
.border.glass table td{
  color: #e7ebf3 !important;
  opacity: 1 !important;
  font-weight: 500;
}
.border.glass table thead th{ color: #f3f4f6 !important; }
.border.glass table{ font-size: 15px !important; }

/* =========================================================
   Header
   ========================================================= */
.header-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left { display:flex; align-items:center; gap:12px; }
.header-left img{ height:36px; width:auto; border-radius:50%; }
.header-bar .volver{ margin:0; }
header.glass{ padding-inline:0!important; }
header.glass>nav{
  width:min(1200px,100% - 32px);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:12px;
}
header.glass img[alt=""]{ height:28px;width:28px;border-radius:50%; }

/* =========================================================
   FIX TEXTO NEGRO EN RESALTADOS
   ========================================================= */
.favpill,
.badge,
.chip,
.pill,
.tag,
mark {
  background: #ffeb3b !important;
  color: #000 !important;
  font-weight: 700;
  border-radius: .5rem;
  padding: .1rem .45rem;
  line-height: 1.2;
  display: inline-block;
}