/* =========================================================
   Base: usa la misma paleta unificada que el fichero previo
   ========================================================= */
:root{
  --surface-0: color-mix(in oklab, Canvas 98%, transparent);
  --surface-1: color-mix(in oklab, Canvas 94%, transparent);
  --surface-2: color-mix(in oklab, Canvas 92%, transparent);
  --surface-3: color-mix(in oklab, Canvas 90%, transparent);
  --line-1:    color-mix(in oklab, CanvasText 12%, Canvas 88%);
  --line-2:    color-mix(in oklab, CanvasText 20%, Canvas 80%);
  --muted:     color-mix(in oklab, CanvasText 55%, Canvas 45%);
  --brand-1:   #0ea5e9;  /* azul */
  --brand-2:   #6366f1;  /* índigo */
  --success-1: #16a34a;  --success-2:#22c55e;
  --warn-1:    #f59e0b;  --error-1:#dc2626;
}
@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%);
  }
}

/* Preflight mínimo (evita duplicar el de Tailwind CDN) */
*,::before,::after{box-sizing:border-box;border:0 solid var(--line-1)}
html{ -webkit-tap-highlight-color:transparent }
html.dark { color-scheme: dark; }   
body{ margin:0; line-height:1.5; font-family:Inter,Nunito,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; }

/* ====== Dialog + mini-form ====== */
dialog{ border:0; border-radius:12px; padding:0; max-width:92vw; overflow-x:hidden; }
.mini-form{ width:min(92vw,300px); max-width:300px; padding:12px 10px; }
.mini-form h3{ margin:0 0 8px; font-size:.95rem; }
.mini-form .group{ border:1px solid var(--line-2); border-radius:10px; padding:8px 10px; }
.mini-form .legend{ font-size:.8rem; margin-bottom:4px; opacity:.85; }
.mini-form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mini-form label{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; }
.mini-form input{ width:100%; padding:6px 8px; font-size:.9rem; line-height:1.2; border:1px solid var(--line-2); border-radius:8px; background:var(--surface-1); color:inherit; }
.mini-form .primary{ font-weight:600; border:1px solid var(--line-2); border-radius:10px; padding:7px 10px; }
@media (max-width:480px){ .mini-form{ width:92vw; max-width:92vw } .mini-form .grid{ grid-template-columns:1fr } }

/* ====== Glass ====== */
.glass{ backdrop-filter:blur(8px) }
@supports (background: color-mix(in oklab, #fff 70%, transparent)){
  .glass{ background: color-mix(in oklab, #111 70%, transparent) }
}

/* ====== Mensajes ====== */
#mensaje.success{ background: color-mix(in oklab, var(--success-1) 12%, transparent); color: var(--success-1); }
#mensaje.error{   background: color-mix(in oklab, var(--error-1) 12%, transparent);   color: var(--error-1); }

/* ====== Card base ====== */
.card{
  border-radius:.75rem; border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  padding:1.25rem; transition:transform .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.card:hover{ transform:translateY(-2px) }
@media (min-width:768px){ .card{ padding:1.5rem } }

/* ====== Tabla con scroll ====== */
.table-wrap{
  position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; /*scrollbar-gutter:stable;*/
  --fade: linear-gradient(90deg, rgba(0,0,0,.12), transparent 30%);
}
.table-wrap::before,.table-wrap::after{
  content:""; position:sticky; top:0; bottom:0; width:12px; pointer-events:none;
}
.table-wrap::before{ left:0; background:var(--fade) }
.table-wrap::after{ right:0; background:var(--fade); transform:scaleX(-1) }

/* Tabla base */
.data-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; }
.data-table thead th{
  position:sticky; top:0; z-index:2; background: rgb(17 24 39); color:#e5e7eb; border-bottom:1px solid #2a2b32; }
.data-table tbody td,.data-table thead th{ padding:.6rem .75rem; white-space:nowrap; border-bottom:1px solid #2a2b32; }
.data-table tbody tr:hover td{ background: rgb(31 41 55); }

/* ====== Badges / chips / barras ====== */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.18rem .5rem; border-radius:999px; font-size:.75rem; line-height:1;
  border:1px solid var(--line-2); background:var(--surface-2); color:inherit;
}
.badge--neutral{ color:#374151 }
.badge--info{ color:#1d4ed8; background:#e0e7ff; border-color:#c7d2fe }
.badge--success{ color:#065f46; background:#ecfdf5; border-color:#a7f3d0 }
.badge--warn{ color:#92400e; background:#fffbeb; border-color:#fde68a }
.badge--danger{ color:#7f1d1d; background:#fef2f2; border-color:#fecaca }

.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px; line-height:1;
  border:1px solid var(--line-1); background:var(--surface-1); color: inherit;
  transition: transform .12s ease, box-shadow .2s ease;
}
.chip:hover{ transform:translateY(-1px) }

.cell-stack{ display:flex; flex-direction:column; gap:.25rem }
.bar{ position:relative; height:6px; background: color-mix(in oklab, Canvas 88%, CanvasText 12%); border-radius:6px; overflow:hidden }
.bar__fill{
  position:absolute; inset:0; width:0%;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
}

/* ====== Medallas ====== */
.medal{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; color:#0b0b0c; font-weight:700; font-size:.8rem; }
.medal--gold{   background: linear-gradient(145deg,#fbbf24,#f59e0b) }
.medal--silver{ background: linear-gradient(145deg,#e5e7eb,#cbd5e1) }
.medal--bronze{ background: linear-gradient(145deg,#d97706,#b45309) }

/* ====== Paneles ====== */
.border.glass, .panel, .card {
  --fg-strong: #e8edf3;
}
/* ⚠️ eliminado el .border.glass * { color:… !important } que blanqueaba todo */

/* ====== Texto de 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:#b9c0cf !important; opacity:.95 !important }

/* ====== Títulos ====== */
h1, h2, h3, h4,
.section-title, .card-title, .chart-title {
  color: #e9eef7 !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}

/* ==== Mejora visual de H1 ==== */
h1 {
  line-height: 1.3;      /* más aire vertical */
  margin-bottom: 1.2em;  /* espacio extra debajo */
}

h1 > .bg-clip-text {
  display: inline-block;
  line-height: 1.3;      /* coherente con el H1 */
  padding-bottom: 0.2em; /* evita corte del degradado */
}

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


/* en public/css/styles.css */
.emoji, .chip .emoji{
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
               system-ui,-apple-system,ui-sans-serif,sans-serif !important;
  font-variant-emoji: emoji; 
}
.dark .chip { color: inherit; }


/* ==== Chips: icono + número visibles + variantes ==== */
.chip { color: inherit; }
.chip__icon { display:inline-flex; align-items:center; line-height:0; }
.chip__icon svg { width:14px; height:14px; display:block; }
.chip__value { font-weight:700; font-variant-numeric: tabular-nums; }

/* Variantes de color (las que usas en el Index Top-3) */
.chip--neutral { background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.35); }
.chip--success { background: rgba(34,197,94,.18);  border-color: rgba(34,197,94,.35);  }
.chip--warn    { background: rgba(250,204,21,.25); border-color: rgba(250,204,21,.45); }

/* ==== KV (PJ/PG/PR/Coef) — siempre dos columnas limpias ==== */
.kv{
  display:grid !important;
  grid-template-columns: 4.5rem 1fr !important; /* etiqueta | valor */
  column-gap:.75rem;
  row-gap:.25rem;
}
.kv dt,.kv dd{ margin:0; }
.kv dt{ justify-self:start; }
.kv dd{ justify-self:end; text-align:right; font-variant-numeric: tabular-nums; }

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

th {
  background-color: #4CAF50;
  color: white;
}


.player-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: 16px 0;
  background-color: #fff;
}

.player-card img {
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

.player-card h3 {
  font-size: 1.2em;
  margin: 0;
}

.player-card .badge {
  background-color: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 4px;
}


/* =========================================================
   Tablas PLC · skin unificado para todas las vistas
   (jugadores, clasificación, ranking, ligas y análisis)
   ========================================================= */
:root{
  --tbl-head-bg: #111827;         /* gris 900 */
  --tbl-head-fg: #e5e7eb;         /* gris 200 */
  --tbl-row:     #0c111c;         /* base */
  --tbl-stripe:  #0f172a;         /* par (zebra sutil) */
  --tbl-hover:   #1f2937;         /* hover */
  --tbl-border:  #2a2b32;         /* separadores */
}

/* Lista de tablas que tenemos en las páginas */
:where(#tabla-ligas,
       #tablaJugadores,
       #tabla-ranking,
       #tabla-clasificacion,
       #tabla-parejas,
       .tabla-buscar,
       .ap-tabla) {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* Cabecera fija y legible */
:where(#tabla-ligas,
       #tablaJugadores,
       #tabla-ranking,
       #tabla-clasificacion,
       #tabla-parejas,
       .tabla-buscar,
       .ap-tabla) thead th{
  position: sticky; top: 0; z-index: 2;
  background: var(--tbl-head-bg);
  color: var(--tbl-head-fg);
  border-bottom: 1px solid var(--tbl-border);
}

/* Celdas y separadores */
:where(#tabla-ligas,
       #tablaJugadores,
       #tabla-ranking,
       #tabla-clasificacion,
       #tabla-parejas,
       .tabla-buscar,
       .ap-tabla) th,
:where(#tabla-ligas,
       #tablaJugadores,
       #tabla-ranking,
       #tabla-clasificacion,
       #tabla-parejas,
       .tabla-buscar,
       .ap-tabla) td{
  padding: .6rem .75rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--tbl-border);
}

/* Filas: base, zebra y hover */
:where(#tabla-ligas,
       #tablaJugadores,
       #tabla-ranking,
       #tabla-clasificacion,
       #tabla-parejas,
       .tabla-buscar,
       .ap-tabla) tbody tr{ background: var(--tbl-row); }

:where(#tabla-ligas,
       #tablaJugadores,
       #tabla-ranking,
       #tabla-clasificacion,
       #tabla-parejas,
       .tabla-buscar,
       .ap-tabla) tbody tr:nth-child(even){ background: var(--tbl-stripe); }

:where(#tabla-ligas,
       #tablaJugadores,
       #tabla-ranking,
       #tabla-clasificacion,
       #tabla-parejas,
       .tabla-buscar,
       .ap-tabla) tbody tr:hover td{ background: var(--tbl-hover); }

/* Elimina las “líneas blancas” producidas por border-t del JS */
#tabla-ligas tbody tr,
#tablaJugadores tbody tr,
#tabla-ranking tbody tr,
#tabla-clasificacion tbody tr,
#tabla-parejas tbody tr{
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
}

/* Card contenedor */
.metric-card {
  border: 1px solid rgba(38,38,38,.6); /* neutral-800/60 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* Tabla */
.metric-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .875rem; /* text-sm */
}

.metric-table thead {
  background: #22c55e; /* green-500 */
  color: #111827;      /* neutral-900 */
  font-weight: 600;
}

.metric-table th,
.metric-table td {
  padding: .75rem 1rem; /* px-4 py-3 */
}

.metric-table tbody tr {
  border-top: 1px solid rgba(38,38,38,.6);
}

.metric-table tbody tr:nth-child(even) {
  background: rgba(250,250,250,.03); /* neutral-50/5 aprox */
}

.metric-table .metric {
  color: rgb(229,229,229); /* neutral-200 */
  font-weight: 600;
}

.metric-card {
  border: 1px solid rgba(38,38,38,.6);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.metric-note {
  padding: .75rem 1rem;
  font-size: .875rem;
  color: rgb(163,163,163);
  border-top: 1px solid rgba(38,38,38,.6);
}