/* ============================================================
   Vestuario · capa de plataforma (v2, diseño premium)
   - Estructura: barra lateral, barra superior, centro de comando.
   - Componentes de análisis: KPI, gráficos, mapa de calor, tabla densa, ficha.
   - Refinamientos de la identidad sobre estilos.css.
   Tokens de color en estilos.css (:root y :root[data-tema="oscuro"]).
   ============================================================ */
:root { --grafito: #0A0A0A; --grafito2: #141414; --lado-ink: #A1A7A3; --lado-mute: #6f7571; --lado-on: #ffffff; --lado-linea: rgba(255, 255, 255, .08); --info: var(--dv-pos); }
html { scroll-behavior: smooth; }
body { font-family: var(--fuente); font-feature-settings: "cv11", "ss03"; letter-spacing: -.003em; }
h1, h2, h3 { letter-spacing: -.02em; }
.num-g, .kpi-v, .rep-n b, .res-g b, .tile b, .contador b, .pj-s b, .cn, .prep, .dia b, .sueno output { font-family: var(--num); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 75%, #fff); outline-offset: 2px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.logo-s { width: 34px; height: 34px; flex: none; display: block; }
.logo-t { font: 700 21px/1 var(--num); letter-spacing: -.03em; }

/* ---------- Estructura móvil ---------- */
.lado { display: none; }
.top { background: var(--grafito); color: #fff; padding: calc(10px + env(safe-area-inset-top)) 16px 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 10px 10px; align-items: center; border-bottom: 1px solid var(--lado-linea); }
.top .logo-m { grid-row: 1; grid-column: 1; }
.top .club-sel { grid-row: 1; grid-column: 2; }
.top #btnTema { grid-row: 1; grid-column: 3; }
.selectores { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.sel { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sel span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lado-mute); }
.sel select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 44px; padding: 0 34px 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px; color: #fff; font-weight: 600; font-size: 15px; text-overflow: ellipsis; }
.sel select option { color: #0f1320; background: #fff; }
.top .icbtn { color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.club-sel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 7px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; text-align: left; max-width: 100%; }
.club-sel .club-t { display: none; flex-direction: column; line-height: 1.15; min-width: 0; }
.club-sel .club-t b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-sel .club-t small { font-size: 11.5px; color: var(--lado-ink); }
.club-sel .ico { width: 16px; height: 16px; opacity: .7; }
.club-sel .crest { flex: none; }
.crest-img { display: block; flex: none; border-radius: 0; object-fit: contain; background: transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.buscador, .solo-staff { display: none; }
.pie-demo { text-align: center; color: var(--muted); font-size: 12px; padding: 4px 16px calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); opacity: .85; }
#view { padding: 16px 16px 16px; max-width: 1480px; margin: 0 auto; width: 100%; outline: none; }
.resto { min-width: 0; }

.nav-abajo { background: color-mix(in srgb, var(--grafito) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--lado-linea); box-shadow: none; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.nav-abajo a { color: var(--lado-ink); font-weight: 600; min-height: 54px; }
.nav-abajo a.on { color: #fff; background: rgba(0, 255, 133, .12); font-weight: 700; }
.nav-abajo a.on::before { background: #00FF85; top: -6px; }

/* ---------- Componentes comunes refinados ---------- */
.card { border-radius: var(--radio); border: 1px solid var(--line); box-shadow: var(--sombra); background: var(--surface); }
:root[data-tema="oscuro"] .card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface) 60px); }
.phead h1 { font-family: var(--num); font-weight: 700; font-size: 26px; letter-spacing: -.03em; }
.phead p { font-size: 14px; }
.kicker { color: var(--acento-t); letter-spacing: .09em; }
.btn { border-radius: 11px; font-weight: 700; font-size: 15px; background: var(--marca); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 14px -8px var(--marca); }
.btn.sec { background: var(--surface); box-shadow: none; }
.btn.sec:hover { background: var(--surface2); border-color: color-mix(in srgb, var(--acento) 45%, var(--line)); }
.btn.acc { background: #00FF85; color: #0A0A0A; }
.btn.acc:hover { background: #5CFFAE; filter: none; }
.btn.ghost { box-shadow: none; }
.btn.grande { border-radius: 14px; }
.chip.info { background: color-mix(in srgb, var(--dv-pos) 14%, var(--surface)); color: color-mix(in srgb, var(--dv-pos) 70%, var(--ink)); border-color: color-mix(in srgb, var(--dv-pos) 32%, transparent); }
:root[data-tema="oscuro"] .chip.info { color: #8dbcff; }
.chip.navy { background: color-mix(in srgb, var(--acento) 14%, var(--surface)); color: var(--acento-t); border-color: color-mix(in srgb, var(--acento) 30%, transparent); }
.chip.ok { color: var(--ok-t); }
:root[data-tema="oscuro"] .chip.warn { color: var(--warn-t); }
.dot.info { background: var(--dv-pos); }
.av { background: color-mix(in srgb, var(--acento) 16%, var(--surface)); color: var(--acento-t); font-family: var(--num); }
.av.chico { width: 34px; height: 34px; font-size: 12.5px; }
.av.ok { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok-t); }
.av.warn { background: color-mix(in srgb, var(--warn) 22%, var(--surface)); color: var(--warn-t); }
.av.bad { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); color: var(--bad-t); }
.seg { border-radius: 11px; background: var(--surface2); }
.seg button { border-radius: 8px; font-weight: 600; }
.seg button.on { background: var(--marca); color: #0A0A0A; box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--marca) 80%, transparent); }
.icbtn { border-radius: 11px; }
.grow { flex: 1; min-width: 0; }
.ico.izq, .ico.izq90 { transform: rotate(-90deg); } .ico.der, .ico.der90 { transform: rotate(-90deg); } .ico.der90 { transform: rotate(90deg); }
.item-s.on { border-color: color-mix(in srgb, var(--acento) 50%, var(--line)); }
.item-s.off { opacity: .6; }
.item-s .crest { flex: none; }
.vacio-ico { background: color-mix(in srgb, var(--acento) 16%, var(--surface)); color: var(--acento-t); }
.hero-foco { background: linear-gradient(140deg, #1D1D1D, #0A0A0A); border: 1px solid rgba(0, 255, 133, .35); border-radius: var(--radio); }
.hero-foco::after { background: radial-gradient(circle, rgba(0, 255, 133, .30), transparent 70%); }
.hero-foco .kicker { color: #00FF85; }
.intro-ck { background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 16%, var(--surface)), var(--surface)); }
.ic-c, .num { background: var(--marca); color: #0A0A0A; }
.g-et-i { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.hm-n, .jug-c, .al-f, .fn-s a { color: var(--ink) !important; }
.dist-k { white-space: normal; }
.sw.on { background: var(--ok); }
.tile { border-radius: 14px; }
.tile.est.on { border-color: var(--acento); }
.lg.partido, .cel.partido { background: var(--marca); color: #0A0A0A; }
.cel.entrena { color: var(--ok-t); }
.apl, .vos { background: var(--marca); color: #0A0A0A; }
.barra i { background: var(--s1); }
#toast .toast-i, .toast-i { background: var(--grafito2); color: #fff; border: 1px solid var(--lado-linea); }
.toast-i .ico { color: #00FF85; }
.saltar:focus { z-index: 100; }
#tip { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; opacity: 0; background: var(--grafito2); color: #eceff6; border: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; line-height: 1.4; padding: 7px 10px; border-radius: 9px; max-width: 280px; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55); transition: opacity .1s; }
#tip.on { opacity: 1; }

/* ---------- Gráficos ---------- */
.g-svg { max-width: none; width: 100%; height: auto; }
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-base { stroke: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.g-et { fill: var(--muted); font-size: 11px; font-family: var(--fuente); font-variant-numeric: tabular-nums; }
.g-et-fuerte { fill: var(--ink); font-weight: 700; }
.g-et-i { font-style: normal; font-size: 10.5px; }
.g-val { fill: var(--ink); font-size: 11.5px; font-weight: 700; font-family: var(--num); }
.g-ref { stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 4 4; opacity: .85; }
.g-libre { fill: var(--line); }
.g-cruz { stroke: var(--muted); stroke-width: 1; opacity: 0; }
.g-pt { fill: var(--c); stroke: var(--surface); stroke-width: 2; opacity: 0; }
.hv:hover .g-cruz, .hv:hover .g-pt { opacity: 1; }
.hv-b:hover rect:first-child { fill: var(--acento); opacity: .07; }
.leyenda-g { font-size: 12.5px; margin: 0 0 6px; }
.leyenda-g i { border-radius: 3px; }
.la { background: var(--s1); } .lb { background: var(--s2); }
.mini-l { display: block; overflow: visible; }
.datos { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.datos summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); min-height: 32px; display: flex; align-items: center; list-style: none; }
.datos summary::-webkit-details-marker { display: none; }
.datos summary::before { content: "▸"; margin-right: 6px; font-size: 11px; transition: transform .15s; }
.datos[open] summary::before { transform: rotate(90deg); }
.datos summary:hover { color: var(--ink); }
.datos-t { max-height: 240px; overflow: auto; }
.datos table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.datos th, .datos td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); font-weight: 500; }
.datos thead th { font-weight: 700; color: var(--muted); position: sticky; top: 0; background: var(--surface); }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 14px 12px; border-radius: var(--radio); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sombra); min-width: 0; color: var(--ink); overflow: hidden; }
:root[data-tema="oscuro"] .kpi { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff), var(--surface)); }
button.kpi { cursor: pointer; transition: border-color .15s, transform .15s; }
button.kpi:hover { border-color: color-mix(in srgb, var(--acento) 55%, var(--line)); transform: translateY(-1px); }
button.kpi.on { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent), var(--sombra); }
.kpi-l { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.kpi-v { font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
.kpi-v em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; font-family: var(--fuente); }
.kpi-s { font-size: 12px; color: var(--muted); }
.kpi-d { font-size: 12.5px; font-weight: 700; display: inline-flex; gap: 4px; align-items: baseline; }
.kpi-d span { font-weight: 500; color: var(--muted); }
.kpi-d.bien { color: var(--ok-t); } .kpi-d.mal { color: var(--bad-t); } .kpi-d.neutro { color: var(--muted); }
.kpi-sp { margin-top: 4px; }
.meter { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; margin: 2px 0 2px; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--s1); }
.meter.ok i { background: var(--ok); } .meter.warn i { background: var(--warn); } .meter.bad i { background: var(--bad); } .meter.mute i { background: var(--mute-c); }

/* ---------- Grilla del centro de comando ---------- */
.gr12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.gr12 > .card, .gr12 > .col-apilada { margin: 0; min-width: 0; }
.col-apilada { display: flex; flex-direction: column; gap: 14px; }
.col-apilada > .card { margin: 0; }
.cg { padding: 16px 18px 14px; display: flex; flex-direction: column; }
.cg-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cg-h h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.cg-h p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cg.nopad-t { padding-bottom: 0; }
.nota-p { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.45; }

/* distribución por estado */
.pilah { display: flex; gap: 2px; height: 30px; margin: 4px 0 14px; }
.pilah i { display: grid; place-items: center; min-width: 6px; font: 600 12.5px var(--num); font-style: normal; color: #fff; border-radius: 4px; }
.pilah i:first-child { border-radius: 8px 4px 4px 8px; } .pilah i:last-child { border-radius: 4px 8px 8px 4px; }
.pilah i.ok { background: var(--ok); } .pilah i.warn { background: var(--warn); color: #1d1500; } .pilah i.bad { background: var(--bad); } .pilah i.mute { background: var(--mute-c); } .pilah i.info { background: var(--dv-pos); }
.dist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dist li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 28px auto; gap: 10px; align-items: center; font-size: 13.5px; }
.dist-k { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-b { height: 8px; background: color-mix(in srgb, var(--line) 80%, transparent); border-radius: 99px; overflow: hidden; }
.dist-b i { display: block; height: 100%; border-radius: 99px; }
.dist-b i.ok { background: var(--ok); } .dist-b i.warn { background: var(--warn); } .dist-b i.bad { background: var(--bad); } .dist-b i.mute { background: var(--mute-c); } .dist-b i.info { background: var(--dv-pos); } .dist-b i.serie { background: var(--s1); }
.dist b { font: 600 14px var(--num); text-align: right; }
.dist-p { font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; }
.dist li:not(:has(.dist-p)) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 28px; }

/* alertas */
.al-l { display: flex; flex-direction: column; margin: 0 -6px; }
.al-f { display: grid; grid-template-columns: 34px 1fr 18px; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; border-radius: 10px; min-height: 56px; }
.al-f:first-child { border-top: 0; }
.al-f:hover { background: var(--surface2); }
.al-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-t b { font-size: 14px; }
.al-t .chip { padding: 1px 8px; font-size: 11.5px; }
.al-d { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.al-d b { color: var(--ink); font-weight: 600; }
.al-go { color: var(--muted); } .al-go .ico { width: 16px; height: 16px; }

/* mapa de calor */
.hm { display: flex; flex-direction: column; gap: 6px; }
.hm-cab, .hm-cuerpo { display: grid; grid-template-columns: minmax(104px, 150px) minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.hm-f { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.hm-d { text-align: center; font: 600 11px/1.15 var(--num); color: var(--ink); display: flex; flex-direction: column; }
.hm-d small { font: 500 10px var(--fuente); color: var(--muted); }
.hm-d.hoy { color: var(--acento-t); } .hm-d.hoy small { color: var(--acento-t); }
.hm-n { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--ink); text-decoration: none; height: 20px; border-radius: 5px; }
.hm-n span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-n:hover span:last-child { text-decoration: underline; }
.hm-n .dot { width: 7px; height: 7px; }
.hc { display: block; height: 18px; border-radius: 4px; background: var(--surface3); }
.hc.libre { background: transparent; border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent); }
.hc.falta { background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--muted) 45%, transparent) 3px 4.5px); border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); }
.hc:hover { outline: 2px solid var(--ink); outline-offset: 0; position: relative; z-index: 1; }
.hm-ley { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.hm-grad { display: inline-block; width: 120px; height: 10px; border-radius: 3px; background: var(--surface3); }
.hm-ley .hc { display: inline-block; width: 18px; height: 12px; margin-left: 8px; }
.hm-card .cg-h { align-items: center; }

/* tabla densa */
.filtro-act { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 0 0 10px; flex-wrap: wrap; }
.filtro-act .ico { width: 16px; height: 16px; }
.tabla-w { margin: 0 -18px; overflow: clip; }
.tabla-d { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-d th, .tabla-d td { padding: 6px 8px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); }
.tabla-d thead th { position: sticky; top: 64px; z-index: 3; background: var(--surface2); border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 10px; height: 38px; white-space: nowrap; }
.tabla-d thead th small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 5px; }
.tabla-d thead th button { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; border-radius: 6px; padding: 0 2px; }
.tabla-d thead th button:hover { color: var(--ink); }
.tabla-d thead th[aria-sort="ascending"], .tabla-d thead th[aria-sort="descending"] { color: var(--acento-t); }
.tabla-d th:first-child, .tabla-d td:first-child { padding-left: 18px; }
.tabla-d th:last-child, .tabla-d td:last-child { padding-right: 18px; }
.ord { font-size: 9px; width: 9px; }
.tabla-d tbody tr.fj { cursor: pointer; transition: background .1s; }
.tabla-d tbody tr.fj:hover { background: color-mix(in srgb, var(--acento) 7%, var(--surface)); }
.tabla-d tbody th { font-weight: 500; }
.jug-c { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 40px; }
.jug-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.jug-t b { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.jug-t small { display: none; color: var(--muted); font-size: 12px; }
.tabla-d td.cn { white-space: nowrap; }
.tabla-d td.cn b { font-size: 16px; font-weight: 600; }
.prep { color: var(--c); }
.dl { margin-left: 6px; font-size: 11.5px; font-weight: 700; font-family: var(--fuente); }
.dl.up { color: var(--ok-t); } .dl.dn { color: var(--bad-t); }
.barrita { display: block; width: 72px; height: 4px; border-radius: 99px; background: var(--line); margin-top: 3px; overflow: hidden; }
.barrita i { display: block; height: 100%; background: var(--s2); border-radius: 99px; }
.c-acwr { white-space: nowrap; } .c-acwr .num-g { font-size: 15px; font-weight: 600; margin-right: 7px; }
.c-acwr .chip { padding: 1px 8px; font-size: 11.5px; }
.c-mol { white-space: nowrap; font-size: 13px; }
.c-apto .chip { padding: 1px 8px; font-size: 11.5px; margin-right: 4px; }
.pto { vertical-align: 1px; margin-right: 3px; }

/* ficha del jugador */
.ficha-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ficha-nav .lnk { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; padding-left: 0; }
.ficha-nav .lnk .ico { width: 18px; height: 18px; }
.fn-s { display: flex; gap: 6px; } .fn-s .icbtn { text-decoration: none; }
.ficha-cab { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; padding: 18px; margin-bottom: 14px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acento) 14%, var(--surface)), var(--surface) 55%); }
.fc-av { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; font: 600 28px var(--num); color: #00FF85; background: linear-gradient(140deg, #1D1D1D, #0A0A0A); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--mute-c); }
.fc-av.ok { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--ok); } .fc-av.warn { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--warn); } .fc-av.bad { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--bad); }
.fc-id h1 { font: 700 28px/1.1 var(--num); letter-spacing: -.035em; margin: 2px 0 2px; }
.fc-sub { color: var(--muted); font-size: 14px; }
.fc-acc { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.kpis4 .kpi-v { font-size: 30px; }
.factores2 { display: flex; flex-direction: column; gap: 14px; }
.fac2 { display: grid; grid-template-columns: 112px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.fac2 > b { font: 600 14px var(--num); text-align: right; }
.fbar { position: relative; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--line) 85%, transparent); }
.fbar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--s1); }
.fbar u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; text-decoration: none; opacity: .75; }
.vtl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vtl li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; flex-wrap: wrap; }
.vtl li:first-child { border-top: 0; }
.tabla-s { font-size: 13.5px; }
.cg .dos-cuerpos { margin: 0; }
.cg .tabla-w { margin: 0 -18px -14px; }

/* ---------- Escritorio ---------- */
@media (min-width: 700px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-cab { grid-template-columns: auto 1fr auto; }
  .fc-acc { grid-column: auto; }
  .jug-t small { display: none; }
}
@media (min-width: 900px) {
  :root { --nav-h: 0px; }
  .app { display: grid; grid-template-columns: 244px minmax(0, 1fr); }
  .lado { display: flex; flex-direction: column; gap: 18px; background: var(--grafito); color: var(--lado-ink); padding: 20px 14px 16px; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--lado-linea); overflow-y: auto; }
  .lado .logo { padding: 2px 8px 6px; }
  .lado-nav { display: flex; flex-direction: column; gap: 16px; flex: 1; }
  .nav-g { display: flex; flex-direction: column; gap: 2px; }
  .nav-gt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lado-mute); padding: 0 12px 6px; margin: 0; }
  .lado-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 12px; min-height: 42px; border-radius: 10px; color: var(--lado-ink); text-decoration: none; font-weight: 500; font-size: 14.5px; transition: background .15s, color .15s; }
  .lado-nav a .ico { width: 20px; height: 20px; opacity: .85; }
  .lado-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .lado-nav a.on { background: rgba(0, 255, 133, .10); color: #fff; font-weight: 600; }
  .lado-nav a.on::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #00FF85; }
  .lado-nav a.on .ico { color: #00FF85; opacity: 1; }
  .lado-pie { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--lado-linea); }
  .lado-pie p { font-size: 11.5px; color: var(--lado-mute); margin: 10px 4px 0; }
  .lado-user { display: flex; align-items: center; gap: 10px; color: #fff; }
  .lado-user b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; } .lado-user small { display: block; color: var(--lado-ink); font-size: 12px; }
  .lado-user .av { background: rgba(0, 255, 133, .14); color: #5CFFAE; }
  .nav-abajo { display: none; }
  .top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); color: var(--ink); padding: 12px 28px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
  .top .logo-m { display: none; }
  .club-sel { background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 0 10px 0 7px; }
  .club-sel:hover { border-color: color-mix(in srgb, var(--acento) 50%, var(--line)); }
  .club-sel .club-t { display: flex; } .club-sel .club-t small { color: var(--muted); }
  .selectores { display: flex; gap: 8px; margin: 0 auto 0 4px; }
  .sel { flex-direction: row; align-items: center; gap: 0; position: relative; }
  .sel span { position: absolute; left: 12px; top: 3px; font-size: 9.5px; letter-spacing: .08em; color: var(--muted); pointer-events: none; }
  .sel select { width: auto; min-width: 150px; min-height: 44px; padding: 14px 32px 0 12px; background-color: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba5ba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
  .sel select option { color: #0f1320; }
  .solo-staff { display: flex; }
  body[data-rol="jugador"] .solo-staff, body[data-rol="admin"] .solo-staff { display: none; }
  .buscador { display: flex; align-items: center; gap: 8px; position: relative; width: 250px; }
  body[data-rol="jugador"] .buscador, body[data-rol="admin"] .buscador { display: none; }
  .buscador .ico { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
  .buscador input { width: 100%; min-height: 44px; padding: 0 12px 0 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
  .buscador input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 25%, transparent); }
  .top .icbtn { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
  #view { padding: 26px 28px 20px; }
  .pie-demo { padding: 4px 16px 24px; }
  .phead h1 { font-size: 30px; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jug-t small { display: block; }
  .tabla-d thead th { top: 69px; }
}
@media (min-width: 1100px) {
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gr12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c6 { grid-column: span 6; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; }
  .kpis { gap: 14px; }
  .jug-t small { display: none; }
}
@media (max-width: 1099px) and (min-width: 700px) {
  .gr12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c12, .c8 { grid-column: span 2; }
  .c6, .c4, .c3 { grid-column: span 1; }
  .hm-card { grid-column: span 2; }
}
@media (max-width: 1699px) {
  .c-pos { display: none; }
  .jug-t small { display: block !important; }
}
.chip { white-space: nowrap; }
@media (max-width: 1099px) {
  .c-apto, .c-tend, .c-mol { display: none; }
}
@media (max-width: 699px) {
  .c-acwr .chip, .c-mol, .c-apto, .c-tend, .c-pos, .barrita { display: none; }
  .tabla-d th, .tabla-d td { padding: 7px 6px; }
  .tabla-d th:first-child, .tabla-d td:first-child { padding-left: 14px; }
  .tabla-d th:last-child, .tabla-d td:last-child { padding-right: 14px; }
  .tabla-w { margin: 0 -14px; }
  .cg { padding: 14px; }
  .hm-cab, .hm-cuerpo { grid-template-columns: minmax(84px, 108px) minmax(0, 1fr); gap: 2px 6px; }
  .hm-n { font-size: 11.5px; }
  .tabla-d thead th { top: 0; position: static; }
  .kpi-v { font-size: 30px; }
  .dist li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 26px auto; gap: 8px; }
  .phead-x .btn { flex: 1; }
  .fac2 { grid-template-columns: 96px 1fr 40px; }
  .fc-id h1 { font-size: 24px; }
  .club-sel .club-t { display: none; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .club-sel .club-t { display: flex; }
  .club-sel .club-t small { color: var(--lado-ink); }
}
@media (forced-colors: active) {
  .hc.falta { border: 1px solid CanvasText; } .pilah i { forced-color-adjust: none; }
}

/* ---------- Planificación y convocados: aprovechar el ancho ---------- */
.plan-grid { display: block; }
.cv-3 { display: block; }
.cv-cand { position: static !important; }
.cv-b .cv-cand { margin-bottom: 14px; }
@media (min-width: 1100px) {
  .dias-b { max-width: none; grid-template-columns: repeat(6, minmax(0, 120px)); }
  .plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 18px; align-items: start; }
  .plan-grid > .plan-main { grid-column: 1; grid-row: 1 / span 8; }
  .plan-grid > :not(.plan-main) { grid-column: 2; }
  .plan-grid > .resumen-p { top: 80px; }
  .plan-main .sec-h { margin-top: 0; }
  .pb-g { grid-template-columns: repeat(4, 1fr); }
  .cv-3 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
  .cv-a, .cv-b, .cv-c { min-width: 0; }
  .cv-a > .card, .cv-b > .card, .cv-c > .card { margin-bottom: 14px; }
  .cv-c .enviar { margin: 0 0 14px; }
  .cv-c .cf-r { padding: 6px 16px; }
  .cand-l { max-height: 420px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .cv-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .cv-c { grid-column: 1 / -1; }
}
.contador { padding: 14px 18px; }
.contador b { font-family: var(--num); }
.tablero-m { display: block; }
.plan-grid .g2, .cv-b .g2 { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .plan-grid .pb-g { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 900px) { body:not([data-ruta="panel"]):not([data-ruta="ficha"]) .solo-panel { display: none; } }

@media (max-width: 899px) {
  .sel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sel select { min-height: 42px; }
  .top { gap: 8px 8px; padding-bottom: 10px; }
  .selectores { gap: 8px; }
}
@media (max-width: 699px) { .c-carga { display: none; } .tabla-d td.cn b { font-size: 15px; } }

@media (max-width: 699px) { .c-acwr { display: none; } .jug-t b { white-space: normal; } }

.prox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.prox b { font: 600 17px var(--num); letter-spacing: -.02em; }
.prox .meter { margin-top: 6px; } .prox .lnk { align-self: flex-start; padding-left: 0; }

@media (min-width: 900px) and (max-width: 1279px) {
  .buscador { width: 170px; } .sel select { min-width: 0; } .club-sel .club-t small { display: none; }
  .top { padding: 12px 18px; gap: 8px; } .selectores { gap: 6px; } #view { padding-inline: 18px; }
}
@media (min-width: 900px) and (max-width: 1099px) { .solo-panel { display: none !important; } .buscador { width: 150px; } }
@media (min-width: 900px) and (max-width: 1019px) { .club-sel .club-t { display: none; } .buscador { width: 130px; } }
.vtl .chip { white-space: normal; text-align: right; }
.logo { min-height: 44px; } .sueno input[type=range] { height: 44px !important; }
@media (min-width: 900px) { .kpis.kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }