/* ============================================================
   Vestuario · estilos base (plataforma)
   Dos capas de color, bien separadas:
   - PLATAFORMA (Vestuario): --marca, --acento, superficies, estados, series de gráficos.
   - CLUB (el "tenant"): --club-1 y --club-2. Solo se usan en el escudo y en la
     vista previa de Configuración; no pintan la interfaz.
   Los gráficos usan los tokens --s1/--s2/--s3 (validados para daltonismo) y
   la escala de estados reservada (--ok, --warn, --bad). Ver plataforma.css.
   ============================================================ */
:root {
  /* club (tenant) */
  --club-1: #2E2C7F;
  --club-2: #FFFFFF;
  /* plataforma */
  --marca: #00FF85;
  --acento: #007A40;
  --acento-t: #007A40;
  --on-acento: #ffffff;
  --bg: #f4f5f4;
  --surface: #ffffff;
  --surface2: #f6f7f6;
  --surface3: #eceeec;
  --ink: #0A0A0A;
  --muted: #5a615c;
  --line: #e2e5e3;
  --primary: var(--marca);
  --on-primary: #0A0A0A;
  /* estados (reservados: nunca son color de serie) */
  --ok: #00C065; --ok-t: #007A40;
  --warn: #FFC53D; --warn-t: #7a5200;
  --bad: #FF4D4F; --bad-t: #a62525;
  --serio: #ec835a;
  --mute-c: #7d837f;
  /* escala de contacto del entrenamiento (rugby): 25 / 50 / 75 / 100 % */
  --c25: #23844a; --c50: #f4cc2b; --c75: #f28a1e; --c100: #c92a2a;
  /* series de gráficos (categóricas, en orden fijo) */
  --s1: #007A40; --s2: #eb6834; --s3: #2a78d6;
  --bar-a: var(--s1); --bar-b: var(--s2);
  /* mapa de calor: secuencial (acento) y divergente (azul / rojo con gris al medio) */
  --hm-lo: #e3f7ec; --hm-hi: #007A40;
  --dv-mid: #eceeec; --dv-pos: #2a78d6; --dv-neg: #e34948;
  /* mapa del cuerpo */
  --zone: #d8dcd9; --zone-base: #e9ebea;
  --z1: #f7c92b; --z2: #f28a1e; --z3: #d92f2f;
  --z1s: #8a6500; --z2s: #8f4300; --z3s: #6e1010;
  --z1t: #2a1f00; --z2t: #2a1500; --z3t: #ffffff;
  --sombra: 0 1px 0 rgba(10, 10, 10, .04), 0 14px 30px -20px rgba(10, 10, 10, .28);
  /* forma y espacios */
  --radio: 16px; --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --nav-h: 68px;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: "Space Grotesk", "Inter", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --acento: #00FF85;
  --acento-t: #5CFFAE;
  --marca: #00FF85;
  --on-acento: #0A0A0A;
  --bg: #0A0A0A;
  --surface: #141414;
  --surface2: #1D1D1D;
  --surface3: #242424;
  --ink: #F5F7F5;
  --muted: #A1A7A3;
  --line: #2A2A2A;
  --ok: #00FF85; --ok-t: #5CFFAE;
  --warn: #FFC53D; --warn-t: #FFC53D;
  --bad: #FF4D4F; --bad-t: #ff8a8b;
  --serio: #ec835a;
  --mute-c: #7d837f;
  --s1: #00FF85; --s2: #d95926; --s3: #3987e5;
  --hm-lo: #1D1D1D; --hm-hi: #00FF85;
  --dv-mid: #2A2A2A; --dv-pos: #3987e5; --dv-neg: #e66767;
  --zone: #3a3d3b; --zone-base: #242624;
  --z1: #f7d046; --z2: #ff9a3c; --z3: #ff6060;
  --z1s: #fff3b8; --z2s: #ffd9b0; --z3s: #ffd0d0;
  --z1t: #231a00; --z2t: #261200; --z3t: #2a0707;
  --sombra: 0 0 0 1px rgba(255, 255, 255, .02), 0 16px 32px -22px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
a:not([class]) { color: var(--acento-t); }
:root[data-tema="oscuro"] a:not([class]) { color: var(--acento); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 80%, #fff); outline-offset: 2px; border-radius: 8px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: 10px; z-index: 99; }
.saltar:focus { left: 8px; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mute { color: var(--muted); }
.c { text-align: center; }
.lnk { color: var(--acento-t); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; min-height: 40px; }
:root[data-tema="oscuro"] .lnk { color: var(--acento); }

/* ---------- Estructura ---------- */
.app { min-height: 100vh; }
.icbtn { width: 44px; height: 44px; border-radius: 13px; display: inline-grid; place-items: center; color: var(--ink); background: var(--surface2); border: 1px solid var(--line); flex: none; }
.icbtn.peq { width: 38px; height: 38px; border-radius: 11px; }
.icbtn .ico { width: 20px; height: 20px; }
.icbtn.mal { color: var(--bad-t); }
.icbtn:disabled, .btn:disabled, button[disabled] { opacity: .45; cursor: not-allowed; }
#view { padding: 18px 16px calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); max-width: 1180px; margin: 0 auto; outline: none; }
#view.enter { animation: entra .32s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.nav-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -14px rgba(15, 27, 51, .3); }
.nav-abajo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 14px; color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 600; position: relative; transition: color .15s, background .15s; }
.nav-abajo a.on { color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); font-weight: 800; }
.nav-abajo a.on::before { content: ""; position: absolute; top: -7px; width: 26px; height: 3px; border-radius: 3px; background: var(--acento); }
.nav-abajo .ico { width: 24px; height: 24px; }

/* ---------- Encabezado de página y textos ---------- */
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 14px; margin-bottom: 16px; }
.phead h1 { font-size: 27px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.phead p { color: var(--muted); font-size: 14.5px; margin-top: 3px; }
.phead-x { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.kicker.c-k { color: var(--muted); }
.h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.h3.g0 { margin: 0; }
.h3.sp { margin-top: 18px; margin-bottom: 8px; }
.h3 .ico { width: 20px; height: 20px; color: var(--muted); }
.h4 { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.ayuda { color: var(--muted); font-size: 14px; margin: 4px 0 12px; }
.sec-t, .sec-h { margin: 22px 2px 10px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; }

/* ---------- Tarjetas y botones ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); padding: 16px; margin-bottom: 14px; box-shadow: var(--sombra); }
.card.nopad { padding: 0; overflow: hidden; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.card-h.sup { border-top: 1px solid var(--line); background: var(--surface2); margin-top: 4px; }
.pad { padding: 12px 16px 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 15.5px; border: 1.5px solid transparent; text-decoration: none; transition: transform .1s, filter .15s, background .15s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.98); }
.btn .ico { width: 20px; height: 20px; }
.btn.sec { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: inset 0 0 0 1px transparent; }
.btn.sec:hover { background: var(--surface2); filter: none; }
.btn.ghost { background: transparent; color: var(--acento-t); }
:root[data-tema="oscuro"] .btn.ghost { color: var(--acento); }
.btn.ghost.mal { color: var(--bad-t); }
.btn.acc { background: var(--acento); color: var(--on-acento); }
.btn.grande { min-height: 58px; font-size: 17px; border-radius: 16px; }
.btn.block { width: 100%; }
.btn.chico { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fila.g { gap: 8px; margin: 8px 0; }
.fila.g0 { gap: 2px; margin: 0; }
.fila.sep { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.enviar { margin: 18px 0 8px; }
.enviar .mute { margin-top: 8px; font-size: 14px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface2); color: var(--muted); border: 1px solid var(--line); line-height: 1.35; }
.chip .ico { width: 15px; height: 15px; }
.chip.ok { background: color-mix(in srgb, var(--ok) 13%, var(--surface)); color: var(--ok-t); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.chip.warn { background: color-mix(in srgb, var(--warn) 17%, var(--surface)); color: var(--warn-t); border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.chip.bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad-t); border-color: color-mix(in srgb, var(--bad) 32%, transparent); }
.chip.acc { background: color-mix(in srgb, var(--acento) 22%, var(--surface)); color: var(--acento-t); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
:root[data-tema="oscuro"] .chip.acc { color: var(--acento); }
.chip.navy { background: color-mix(in srgb, var(--marca) 10%, var(--surface)); color: color-mix(in srgb, var(--marca) 90%, var(--ink)); border-color: color-mix(in srgb, var(--marca) 22%, transparent); }
:root[data-tema="oscuro"] .chip.navy { color: var(--ink); background: var(--surface2); }
.btn-chip { min-height: 38px; padding: 0 13px; text-align: left; transition: background .15s, border-color .15s; }
.btn-chip:hover { border-color: var(--acento); }
.btn-chip.sel { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.chip .x { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--mute-c); }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.chip .dot { width: 8px; height: 8px; }
.pto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--zone); flex: none; }
.pto.grande { width: 16px; height: 16px; }
.pto.z1 { background: var(--z1); } .pto.z2 { background: var(--z2); } .pto.z3 { background: var(--z3); }
.av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--marca) 12%, var(--surface)); color: color-mix(in srgb, var(--marca) 90%, var(--ink)); font-weight: 800; font-size: 14px; flex: none; }
:root[data-tema="oscuro"] .av { color: var(--ink); background: var(--surface2); }
.av.bad { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); color: var(--bad-t); }
.av.azul { background: color-mix(in srgb, #3b82f6 16%, var(--surface)); color: #2557b3; }
:root[data-tema="oscuro"] .av.azul { color: #8db6ff; }

.barra { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: var(--marca); transition: width .5s ease; }
:root[data-tema="oscuro"] .barra i { background: var(--acento); }
.barra.g i { background: var(--ok); }
.barra.gr { height: 12px; margin-top: 12px; }
.barra.m { margin: 0 16px 8px; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; min-width: 0; }
.campo > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.campo input, .campo select, .campo textarea, .obj-r input, .buscar input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.campo textarea { min-height: 76px; resize: vertical; line-height: 1.4; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .obj-r input:focus, .buscar input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 28%, transparent); }
.campo input:disabled, .campo textarea:disabled, .obj-r input:disabled { background: var(--surface2); color: var(--muted); }
.campo.color input { padding: 4px; min-height: 52px; cursor: pointer; }
.g2 { display: grid; gap: 0 14px; }
.g2s { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; padding: 3px; gap: 2px; max-width: 100%; }
.seg button { min-height: 42px; padding: 0 16px; border-radius: 11px; font-weight: 700; font-size: 14.5px; color: var(--muted); transition: background .15s, color .15s; white-space: nowrap; }
.seg button.on { background: var(--primary); color: var(--on-primary); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .4); }
.seg.chico button { min-height: 38px; padding: 0 11px; font-size: 13.5px; flex: 1; }
.tabs-s { margin-bottom: 14px; overflow-x: auto; }
.tabs-s .seg { display: flex; }
.tabs-s .seg button { flex: 1; }
.sw { width: 54px; height: 32px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .2s; border: 0; }
.sw i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: transform .2s; }
.sw.on { background: var(--ok); }
.sw.on i { transform: translateX(22px); }
.step { display: flex; align-items: center; gap: 6px; }
.step button { width: 46px; height: 48px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface2); font-size: 22px; font-weight: 700; }
.step input { text-align: center; width: 72px; font-weight: 800; }
.step em { color: var(--muted); font-size: 13px; font-style: normal; }
.step .ico { width: 18px; height: 18px; }

/* ---------- Check-in ---------- */
.intro-ck { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 20%, var(--surface)), var(--surface)); }
.intro-ck p { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.ic-c { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--marca); color: #0A0A0A; flex: none; }
:root[data-tema="oscuro"] .ic-c { background: var(--acento); color: var(--on-acento); }
.ck h2 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.num { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--marca); color: #0A0A0A; font-size: 14px; font-weight: 800; flex: none; }
:root[data-tema="oscuro"] .num { background: var(--acento); color: var(--on-acento); }
.sueno { display: flex; align-items: center; gap: 16px; }
.sueno output { font-size: 34px; font-weight: 800; min-width: 112px; letter-spacing: -.02em; }
.sueno input[type=range] { flex: 1; accent-color: var(--marca); height: 36px; }
:root[data-tema="oscuro"] .sueno input[type=range] { accent-color: var(--acento); }
.rango-e, .esc-ex { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.rango-e { padding-left: 128px; }
.esc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.esc button { min-height: 56px; border-radius: 15px; border: 1.5px solid var(--line); background: var(--surface2); font-size: 20px; font-weight: 800; color: var(--muted); transition: all .15s; }
.esc button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 16px -8px var(--primary); }
/* ---------- Mapa del cuerpo: elegir zona, elegir nivel ---------- */
.mol-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; align-items: stretch; }
.cuerpo-box { width: min(100%, 210px); flex: none; margin: 0 auto; }
.cuerpo { width: 100%; height: auto; display: block; -webkit-user-select: none; user-select: none; }
.cuerpo-base { fill: var(--zone-base); }
.cuerpo-base .lin { fill: none; stroke: var(--zone-base); stroke-linecap: round; stroke-linejoin: round; }
.zona .vis { fill: var(--zone); stroke: var(--surface); stroke-width: 1.6; transition: fill .15s; }
.zona .hit { fill: #000; fill-opacity: 0; stroke: none; }
.zona[data-act] { cursor: pointer; touch-action: manipulation; outline: none; }
.zona.z1 .vis { fill: var(--z1); stroke: var(--z1s); stroke-width: 1.8; }
.zona.z2 .vis { fill: var(--z2); stroke: var(--z2s); stroke-width: 1.8; }
.zona.z3 .vis { fill: var(--z3); stroke: var(--z3s); stroke-width: 1.8; }
.zona.sel .vis { stroke: var(--ink); stroke-width: 3; }
.zona.sel.z0 .vis { fill: color-mix(in srgb, var(--acento) 55%, var(--zone)); }
.zona[data-act]:focus-visible .vis { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 4 2; }
@media (hover: hover) { .zona.z0[data-act]:hover .vis { fill: color-mix(in srgb, var(--acento) 35%, var(--zone)); } }
.zl { font: 800 9px var(--fuente); text-anchor: middle; dominant-baseline: central; pointer-events: none; fill: var(--z1t); }
.zona.z2 .zl { fill: var(--z2t); } .zona.z3 .zl { fill: var(--z3t); }
.zsel { position: sticky; top: 8px; z-index: 6; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 10px 10px 10px; box-shadow: var(--sombra); transition: border-color .15s; }
.zsel.hay { border-color: var(--acento); }
.zsel-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin-bottom: 6px; }
.zsel-n { font-size: 15.5px; min-width: 0; line-height: 1.25; }
.zsel-n b { font-weight: 800; }
.quitar { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); color: var(--bad-t); font-weight: 700; font-size: 14px; background: var(--surface2); flex: none; }
.quitar .ico { width: 16px; height: 16px; }
.niv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nivb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 4px; border-radius: 15px; border: 3px solid transparent; text-align: center; transition: transform .12s, box-shadow .12s; touch-action: manipulation; }
.nivb b { font-size: 16px; font-weight: 800; line-height: 1.1; }
.nivb small { font-size: 11.5px; line-height: 1.2; font-weight: 600; opacity: .9; }
.nivb.z1 { background: var(--z1); color: var(--z1t); } .nivb.z2 { background: var(--z2); color: var(--z2t); } .nivb.z3 { background: var(--z3); color: var(--z3t); }
.nivb.on { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 16px -8px var(--ink); }
.nivb.on::after { content: "✓"; position: absolute; top: -9px; right: -5px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.mol-lista { display: flex; flex-direction: column; gap: 8px; }
.mol-lista .h4 { margin: 4px 0 0; }
.leyenda-n { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.leyenda-n span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-n i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.leyenda-n .z1 { background: var(--z1); } .leyenda-n .z2 { background: var(--z2); } .leyenda-n .z3 { background: var(--z3); }
.mol-it { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--surface2); border-left: 6px solid var(--zone); font-size: 14px; }
.mol-it.z1 { border-left-color: var(--z1); } .mol-it.z2 { border-left-color: var(--z2); } .mol-it.z3 { border-left-color: var(--z3); }
.mol-it.abierta { box-shadow: 0 0 0 2px var(--acento) inset; }
.mol-it-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mol-it-n { flex: 1; text-align: left; min-height: 40px; font-size: 15px; display: flex; align-items: center; }
.mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini { min-height: 40px; border-radius: 11px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 13.5px; touch-action: manipulation; }
.mini.z1.on { background: var(--z1); color: var(--z1t); border-color: var(--z1s); } .mini.z2.on { background: var(--z2); color: var(--z2t); border-color: var(--z2s); } .mini.z3.on { background: var(--z3); color: var(--z3t); border-color: var(--z3s); }
.mini.on { font-weight: 800; }
.mol-det { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 12.5px; }
.chips-s { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-s button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 600; touch-action: manipulation; }
.chips-s button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 800; }
.opc3 { display: grid; gap: 10px; }
.opc { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface2); min-height: 66px; transition: all .15s; }
.opc i { grid-row: 1 / 3; align-self: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mute-c); }
.opc b { font-size: 16.5px; }
.opc span { font-size: 13.5px; color: var(--muted); }
.opc.on.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, var(--surface)); }
.opc.on.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.opc.on.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, var(--surface)); }
.opc.on.ok i { background: var(--ok); border-color: var(--ok); box-shadow: inset 0 0 0 4px var(--surface); }
.opc.on.warn i { background: var(--warn); border-color: var(--warn); box-shadow: inset 0 0 0 4px var(--surface); }
.opc.on.bad i { background: var(--bad); border-color: var(--bad); box-shadow: inset 0 0 0 4px var(--surface); }
.hero-r { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; justify-content: center; background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--acento) 9%, var(--surface))); }
.hero-r-b { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.hero-r-b h2 { font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.hero-r-b p { color: var(--muted); }
.anillo { display: block; flex: none; }
.factores { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.fac { display: grid; grid-template-columns: 112px 1fr 46px; gap: 10px; align-items: center; font-size: 14px; }
.fac b { text-align: right; font-size: 13.5px; }
.fac .barra i { background: var(--ok); }
.resp .msg { display: flex; gap: 12px; margin-top: 12px; padding: 12px; background: var(--surface2); border-radius: 14px; }
.msg p { margin-top: 2px; }
.msg small { color: var(--muted); }
.atajos { display: grid; gap: 10px; }
.atajo { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--sombra); transition: transform .15s; min-height: 64px; }
.atajo:hover { transform: translateY(-2px); }
.atajo .ico { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--marca); }
:root[data-tema="oscuro"] .atajo .ico { color: var(--acento); }
.atajo span { color: var(--muted); font-size: 13.5px; }

/* ---------- Entreno de hoy ---------- */
.hero-foco { background: linear-gradient(140deg, var(--marca), color-mix(in srgb, var(--marca) 70%, #000)); color: #F5F7F5; border-radius: var(--radio); padding: 20px 18px; margin-bottom: 14px; position: relative; overflow: hidden; box-shadow: var(--sombra); }
.hero-foco::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acento) 55%, transparent), transparent 70%); }
.hero-foco h2 { font-size: 27px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 14px; position: relative; }
.hero-foco .kicker { color: var(--acento); position: relative; }
.pill-b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 700; position: relative; }
.pill-b .ico { width: 16px; height: 16px; }
.objs { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: o; display: flex; flex-direction: column; gap: 8px; }
.objs li { counter-increment: o; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.objs li::before { content: counter(o); width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--acento) 25%, var(--surface)); color: var(--acento-t); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
:root[data-tema="oscuro"] .objs li::before { color: var(--acento); }
.bloques { padding: 0 8px 10px; }
.bq { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 12px 8px; border-top: 1px solid var(--line); }
.bq:first-child { border-top: 0; }
.bq-t { display: flex; flex-direction: column; align-items: center; }
.bq-t b { font-size: 15.5px; font-weight: 800; }
.bq-t span { font-size: 12.5px; color: var(--muted); background: var(--surface2); border-radius: 8px; padding: 1px 8px; margin-top: 3px; font-weight: 700; }
.bq-c p { margin: 6px 0 6px; font-size: 15px; }
.bq-c small { color: var(--muted); font-size: 12.5px; }
.bq-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act { padding: 3px 11px; border-radius: 8px; font-size: 13px; font-weight: 800; background: var(--surface2); }
.a-video { background: #e6ecfb; color: #2c4fa8; } .a-fisico { background: #def3ea; color: #1b7650; } .a-uni { background: #e3f2f1; color: #1f6b66; }
.a-equipo { background: #dfe8f6; color: #16305c; } .a-hab { background: #fdf0d8; color: #8a5a00; } .a-agua { background: #dff2fb; color: #14739c; }
:root[data-tema="oscuro"] .act { background: var(--surface2); color: var(--ink); }
.grp { font-size: 13px; color: var(--muted); font-weight: 600; }
.bq-m { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bq.agua { opacity: .75; padding-top: 6px; padding-bottom: 6px; }
.car { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9px; background: var(--surface2); border: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.car .ico { width: 15px; height: 15px; }
.con { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 9px; font-size: 13px; font-weight: 800; color: #fff; }
.con i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .55; }
.con.c25 { background: var(--c25); } .con.c50 { background: var(--c50); color: #2b2200; } .con.c75 { background: var(--c75); color: #2b1600; } .con.c100 { background: var(--c100); }
.leyenda-con { display: grid; gap: 10px; margin-top: 10px; }
.leyenda-con > div { display: flex; align-items: center; gap: 12px; }
.leyenda-con .con { min-width: 78px; justify-content: center; }
.esf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.esf button { min-height: 54px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface2); font-size: 19px; font-weight: 800; color: var(--muted); transition: all .15s; }
.esf button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); transform: translateY(-2px); }
.esf.chico button { min-height: 44px; font-size: 16px; }
.esf-txt { text-align: center; margin: 12px 0 4px; color: var(--muted); }
.ok-box { display: flex; gap: 10px; align-items: center; padding: 13px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok-t); font-weight: 600; margin-top: 12px; }
.ok-box.grande { padding: 18px 16px; font-size: 16px; margin: 0 0 14px; }
.ok-box.suave { background: var(--surface2); color: var(--ink); font-weight: 500; }

/* ---------- Rutinas ---------- */
.nota-pf { display: flex; gap: 12px; align-items: flex-start; }
.nota-pf .ico { color: var(--acento-t); margin-top: 2px; }
.prog-rut { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; z-index: 5; padding: 12px 16px; }
.rut-s { padding-bottom: 6px; }
.rut-h { display: flex; flex-direction: column; margin-bottom: 4px; }
.rut-h span { color: var(--muted); font-size: 13.5px; }
.card.ss { border-left: 5px solid var(--acento); }
.ej { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.ej:first-of-type { border-top: 0; }
.chk { width: 44px; height: 44px; border-radius: 13px; border: 2px solid var(--mute-c); display: grid; place-items: center; color: #fff; transition: all .15s; background: var(--surface); }
.chk.on { background: var(--ok); border-color: var(--ok); }
.chk .ico { width: 22px; height: 22px; stroke-width: 3; }
.ej.hecho .ej-t b { text-decoration: line-through; opacity: .6; }
.ej.hecho .ej-m, .ej.hecho em { opacity: .55; }
.ej-t { display: flex; align-items: center; gap: 8px; }
.ej-t b { font-size: 16px; }
.tag { background: var(--marca); color: #0A0A0A; font-weight: 800; font-size: 12.5px; padding: 2px 8px; border-radius: 7px; flex: none; }
:root[data-tema="oscuro"] .tag { background: var(--acento); color: var(--on-acento); }
.ej-m { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pr { font-weight: 800; background: color-mix(in srgb, var(--acento) 24%, var(--surface)); color: var(--ink); padding: 3px 11px; border-radius: 9px; font-size: 14.5px; }
.pa { background: var(--surface2); border: 1px solid var(--line); padding: 3px 10px; border-radius: 9px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.ej em { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.leyenda-ab { font-size: 13px; color: var(--muted); padding: 4px 4px 0; }
.leyenda-ab.p { padding: 10px 16px 14px; }
.fin-r .ayuda { margin-top: 14px; }

/* ---------- Convocados (jugador) ---------- */
.partido .vs { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; flex-wrap: wrap; margin-bottom: 14px; }
.vs .club-n, .vs .riv { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.vs i { font-style: normal; color: var(--acento-t); font-weight: 800; background: color-mix(in srgb, var(--acento) 22%, var(--surface)); padding: 2px 10px; border-radius: 99px; }
.datos-p { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.datos-p > div { background: var(--surface2); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; }
.datos-p .ico { width: 18px; height: 18px; color: var(--muted); }
.datos-p span { font-size: 12px; color: var(--muted); }
.datos-p b { font-size: 15px; line-height: 1.2; }
.aviso-n { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in srgb, var(--marca) 6%, var(--surface)); }
.aviso-n .ico { margin-top: 2px; color: var(--marca); }
:root[data-tema="oscuro"] .aviso-n .ico { color: var(--acento); }
.cv-t { padding: 8px 16px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cv-t.sup { margin-top: 0; }
.cv-lista .cv-t:first-child { border-top: 0; }
.cv { display: grid; grid-template-columns: 34px 1fr 34px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); min-height: 58px; }
.cv .n { font-weight: 800; color: var(--muted); text-align: right; font-size: 15px; }
.cv .nm b { font-size: 15.5px; }
.cv small, .sl-c .mute { display: block; font-size: 12.5px; color: var(--muted); }
.cv.yo { background: color-mix(in srgb, var(--acento) 17%, var(--surface)); }
.apl { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: var(--marca); color: #0A0A0A; letter-spacing: .03em; vertical-align: middle; }
:root[data-tema="oscuro"] .apl { background: var(--acento); color: var(--on-acento); }
.apl.no { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); color: var(--bad-t); }
.vos { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--acento); color: var(--on-acento); }
.cf { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--mute-c); flex: none; }
.cf .ico { width: 16px; height: 16px; }
.cf.si { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok-t); }

/* ---------- Historial ---------- */
.tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tiles4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; text-align: left; box-shadow: var(--sombra); min-width: 0; }
.tile span { font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tile b { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.tile b em { font-style: normal; font-size: 16px; color: var(--muted); font-weight: 700; }
.tile small { font-size: 12px; color: var(--muted); }
.tile.est { border-width: 2px; border-color: transparent; transition: all .15s; }
.tile.est.on { border-color: var(--acento); transform: translateY(-2px); }
.tile.est.ok b { color: var(--ok-t); } .tile.est.warn b { color: var(--warn-t); } .tile.est.bad b { color: var(--bad-t); } .tile.est.mute b { color: var(--muted); }
.tile.alerta-t { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.grafico { width: 100%; height: auto; display: block; overflow: visible; max-width: 640px; margin: 0 auto; }
.racha { max-width: 340px; }
.pd-cab, .pd-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pd-cab span { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.pd { aspect-ratio: 1; border-radius: 50%; display: block; background: var(--line); width: 100%; max-width: 36px; margin: 0 auto; }
.pd.ok { background: var(--ok); } .pd.no { background: color-mix(in srgb, var(--bad) 28%, var(--surface)); border: 2px dashed var(--bad); } .pd.libre { background: var(--surface2); border: 2px solid var(--line); }
.pd.vacio { background: transparent; } .pd.fut { background: transparent; border: 2px dotted var(--line); }
.pd.hoy { outline: 3px solid var(--acento); outline-offset: 1px; }
.pdl { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 4px 0 12px; vertical-align: -1px; }
.pdl:first-child { margin-left: 0; }
.pdl.ok { background: var(--ok); } .pdl.no { background: color-mix(in srgb, var(--bad) 28%, var(--surface)); border: 2px dashed var(--bad); } .pdl.libre { background: var(--surface2); border: 2px solid var(--line); }
.cols-2, .col { display: block; }

/* ---------- Panel del entrenador ---------- */
.rep-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rep-n { display: flex; align-items: baseline; gap: 8px; }
.rep-n b { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.rep-n span { color: var(--muted); font-weight: 700; font-size: 17px; }
.alerta { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: start; }
.alerta > .btn, .alerta > .chip { grid-column: 2; justify-self: start; }
.alerta-c p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.alerta-c .fila { margin: 2px 0; }
.pj { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); min-height: 58px; }
.pj-c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pj-c b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-c small { color: var(--muted); font-size: 12.5px; }
.pj-s { text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.pj-s b { font-size: 18px; font-weight: 800; }
.pj-s small { font-size: 12px; color: var(--muted); }
.libre-b { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--marca) 7%, var(--surface)); }
.libre-b > div { flex: 1; min-width: 200px; }
.libre-b p { font-size: 14px; color: var(--muted); }
.dev .dv { text-align: right; }
.dv b { display: block; font-size: 18px; } .dv b.mas { color: var(--bad-t); } .dv b.menos { color: #2557b3; }
:root[data-tema="oscuro"] .dv b.menos { color: #8db6ff; }
.dv small { color: var(--muted); font-size: 12px; }
.leyenda-g { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 6px 0 4px; }
.leyenda-g.c { justify-content: center; margin-top: 12px; }
.leyenda-g i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.la { background: var(--bar-a); } .lb { background: var(--bar-b); }
.lg.entrena { background: color-mix(in srgb, var(--ok) 30%, var(--surface)); }
.lg.partido { background: var(--acento); } .lg.libre { background: var(--surface2); border: 1px solid var(--line); }
.barg rect[fill=transparent] { outline: none; }

/* ---------- Planificación ---------- */
.dias-b { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.dia { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 6px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); min-height: 78px; position: relative; transition: all .15s; }
.dia span { font-size: 12px; font-weight: 700; color: var(--muted); }
.dia b { font-size: 19px; font-weight: 800; }
.dia small { font-size: 10px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.dia i { width: 7px; height: 7px; border-radius: 50%; background: transparent; position: absolute; top: 6px; right: 6px; }
.dia i.pub { background: var(--ok); } .dia i.bor { background: var(--warn); }
.dia.on { background: var(--primary); border-color: var(--primary); }
.dia.on span, .dia.on b, .dia.on small { color: var(--on-primary); }
.dia.hoy:not(.on) { border-color: var(--acento); }
.plan-acc { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.plan-acc .fila.g { margin: 0; }
.plan-acc .btn { flex: 1; }
.resumen-p { position: sticky; top: 6px; z-index: 6; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); }
.res-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; margin-bottom: 12px; }
.res-g span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.res-g b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.res-g em { font-style: normal; font-size: 13px; color: var(--muted); }
.pila { display: flex; gap: 3px; height: 14px; }
.pila i { border-radius: 5px; min-width: 4px; }
.resumen-p .ayuda { margin: 10px 0 0; font-size: 13px; }
.obj-r { display: grid; grid-template-columns: 30px 1fr 38px; gap: 8px; align-items: center; margin-bottom: 8px; }
.obj-r .n { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--acento) 25%, var(--surface)); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.pb { padding: 14px; }
.pb.agua { background: color-mix(in srgb, #14739c 5%, var(--surface)); }
.pb-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pb-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pb-g .campo.ancho { grid-column: 1 / -1; }
.cseg { display: flex; gap: 5px; }
.cseg button { flex: 1; min-height: 44px; border-radius: 11px; font-weight: 800; font-size: 13.5px; border: 2px solid transparent; opacity: .5; transition: all .15s; }
.cseg button.c0 { background: var(--surface2); border-color: var(--line); color: var(--muted); }
.cseg button.c25 { background: var(--c25); color: #fff; } .cseg button.c50 { background: var(--c50); color: #2b2200; } .cseg button.c75 { background: var(--c75); color: #2b1600; } .cseg button.c100 { background: var(--c100); color: #fff; }
.cseg button.on { opacity: 1; border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.agregar { text-align: center; }
.equipos summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; list-style: none; min-height: 44px; }
.equipos summary::-webkit-details-marker { display: none; }
.equipos summary::after { content: "+"; font-size: 24px; font-weight: 700; color: var(--muted); }
.equipos[open] summary::after { content: "−"; }
.eq-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.eq-r { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.eq-r span { font-weight: 800; color: var(--muted); font-size: 14px; text-align: right; }
.eq-r input { min-height: 42px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font-size: 14.5px; width: 100%; min-width: 0; }
.eq-r input:focus { outline: none; border-color: var(--acento); }

/* ---------- Ventana emergente ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(8, 14, 28, .55); display: flex; align-items: flex-end; justify-content: center; animation: fondo .2s ease both; }
@keyframes fondo { from { opacity: 0; } }
.sheet { background: var(--surface); width: 100%; max-width: 560px; border-radius: 24px 24px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; animation: sube .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sube { from { transform: translateY(40px); opacity: .4; } }
.sheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet-h h3 { font-size: 19px; font-weight: 800; }
.sheet-f { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.sheet-f .btn { flex: 1; }
.rapidas { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.rapidas .chip { min-height: 44px; border-radius: 13px; font-size: 14px; font-weight: 600; width: 100%; }
.lista-s { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.item-s { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface2); min-height: 62px; }
.item-s small { display: block; color: var(--muted); font-size: 13px; }
.item-s:hover { border-color: var(--acento); }
body.con-sheet { overflow: hidden; }
#toast { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast-i { background: var(--marca); color: #0A0A0A; padding: 12px 18px; border-radius: 14px; display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14.5px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); animation: toast .3s ease both; max-width: 520px; border: 1px solid color-mix(in srgb, var(--acento) 50%, transparent); }
.toast-i .ico { color: var(--acento); width: 20px; height: 20px; stroke-width: 2.6; }
.toast-i.out { opacity: 0; transform: translateY(8px); transition: all .3s; }
@keyframes toast { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Vacío ---------- */
.vacio { text-align: center; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vacio-ico { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 20%, var(--surface)); color: var(--acento-t); margin-bottom: 4px; }
:root[data-tema="oscuro"] .vacio-ico { color: var(--acento); }
.vacio-ico .ico { width: 28px; height: 28px; }
.vacio h3 { font-size: 18px; font-weight: 800; }
.vacio p { color: var(--muted); max-width: 400px; font-size: 14.5px; }
.vacio .btn { margin-top: 10px; }

/* ---------- Convocados (entrenador) ---------- */
.contador { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.contador b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.contador .mute, .contador span:not(.chip) { color: var(--muted); font-weight: 600; }
.avisos .av-l { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 700; padding: 10px 0; border-top: 1px solid var(--line); margin-top: 6px; }
.avisos .av-l:first-of-type { margin-top: 8px; }
.avisos p { font-size: 13.5px; margin: 2px 0 4px; }
.av-chip { display: inline-flex; align-items: flex-start; gap: 6px; padding: 4px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; line-height: 1.35; margin-top: 4px; width: fit-content; max-width: 100%; }
.av-chip .ico { width: 14px; height: 14px; margin-top: 2px; }
.av-chip.bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad-t); }
.av-chip.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn-t); }
.cv-grid { display: block; }
.buscar { position: relative; padding: 0 16px 8px; }
.buscar span { position: absolute; left: 30px; top: 14px; color: var(--muted); }
.buscar .ico { width: 18px; height: 18px; }
.buscar input { padding-left: 42px; }
.filtros { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; }
.filtros button { min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line); font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--muted); background: var(--surface); }
.filtros button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cand-l { max-height: 330px; overflow: auto; border-top: 1px solid var(--line); }
.cand { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--line); min-height: 58px; transition: background .12s; }
.cand:hover { background: var(--surface2); }
.cand-c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cand-c b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-c small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand .ico { color: var(--acento-t); }
.cand.bad { background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.sl { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line); min-height: 62px; border-left: 5px solid transparent; }
.sl .n { font-weight: 800; color: var(--muted); text-align: right; }
.sl-c { min-width: 0; }
.sl-c b { font-size: 15px; }
.sl.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.sl.bad { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.sl.vac { grid-template-columns: 30px 1fr; border-top: 1px dashed var(--line); cursor: pointer; }
.sl.vac.sel { background: color-mix(in srgb, var(--acento) 18%, var(--surface)); border-left-color: var(--acento); }
.card-h.sup:first-child { margin-top: 0; }
.conf-l { display: flex; flex-direction: column; }
.cf-r { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); }
.cf-r small { grid-column: 2; color: var(--muted); font-size: 12.5px; margin-top: -2px; }
.cf-r .cf { grid-row: 1 / 3; }

/* ---------- Calendario ---------- */
.cal-c { padding: 14px 10px; }
.cal-cab, .cal-f { display: grid; grid-template-columns: 46px repeat(7, minmax(0, 1fr)); gap: 3px; align-items: center; }
.cal-cab { margin-bottom: 6px; }
.cal-cab span { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; line-height: 1.2; }
.cal-cab b { font-size: 15px; color: var(--ink); }
.cal-cab span.hoy b { background: var(--acento); color: var(--on-acento); border-radius: 99px; padding: 0 6px; margin: 0 auto; }
.cal-f { margin-bottom: 4px; }
.cal-d { font-size: 12.5px; font-weight: 800; }
.cel { min-height: 46px; border-radius: 10px; font-size: 10px; letter-spacing: -.02em; display: grid; place-items: center; border: 2px solid transparent; transition: all .12s; padding: 0 1px; }
.cel b { font-weight: 800; font-size: 10px; }
.cel.entrena { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok-t); }
.cel.partido { background: var(--acento); color: var(--on-acento); }
.cel.libre { background: var(--surface2); color: var(--muted); border-color: var(--line); border-style: dashed; }
.cel.on { border-color: var(--ink); border-style: solid; transform: scale(1.06); z-index: 1; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); }
.cel.hoy:not(.on) { box-shadow: inset 0 0 0 1.5px var(--acento); }
.det-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-det .seg { display: flex; margin-bottom: 14px; }
.cal-det .seg button { flex: 1; }

/* ---------- Rutinas del PF ---------- */
.ru-card .ru-t { margin-bottom: 4px; }
.ru-prog { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; font-size: 14px; color: var(--muted); }
.exe { border: 1.5px solid var(--line); border-radius: 15px; padding: 12px; margin-bottom: 12px; background: var(--surface2); }
.exe-t { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.exe-t input { flex: 1; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; min-width: 0; }
.exe-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.exe-g .campo { margin-bottom: 8px; }
.exe-g .campo.ancho { grid-column: 1 / -1; }
.exe-g .campo input, .exe-g .campo select { min-height: 44px; }
.vista-p { font-size: 13.5px; color: var(--muted); }
.vista-p b { color: var(--ink); background: color-mix(in srgb, var(--acento) 24%, transparent); padding: 1px 8px; border-radius: 7px; }

/* ---------- Molestias ---------- */
.mol-r { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; min-height: 66px; }
.card.nopad > .mol-r:first-child { border-top: 0; }
.mol-r:hover, .mol-r.on { background: color-mix(in srgb, var(--acento) 13%, var(--surface)); }
.mol-c { display: flex; flex-direction: column; min-width: 0; }
.mol-c small { color: var(--muted); font-size: 12.5px; }
.mol .mol-det-col { display: none; }
.mol.con-sel .mol-det-col { display: block; }
.mol.con-sel .mol-lista-col { display: none; }
.volver { display: block; margin-bottom: 8px; padding-left: 0; }
.dos-cuerpos { display: flex; justify-content: center; gap: 18px; margin: 10px 0; }
.dos-cuerpos > div { width: 124px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dos-cuerpos.chico > div { width: 112px; }
.evol { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.evol > div { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; background: var(--surface2); border-radius: 12px; min-width: 76px; }
.evol small { color: var(--muted); font-size: 12px; } .evol b { font-size: 13.5px; }
.flecha { width: 14px; height: 2px; background: var(--line); }
blockquote { margin: 12px 0; padding: 12px 14px; background: var(--surface2); border-radius: 14px; display: flex; gap: 10px; font-style: italic; color: var(--ink); }
blockquote .ico { color: var(--muted); margin-top: 2px; }
.dec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.dec-b { min-height: 56px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface2); font-weight: 800; font-size: 14.5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: all .15s; }
.dec-b i { width: 12px; height: 12px; border-radius: 50%; background: var(--mute-c); }
.dec-b.ok i { background: var(--ok); } .dec-b.warn i { background: var(--warn); } .dec-b.bad i { background: var(--bad); }
.dec-b.on.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--surface)); }
.dec-b.on.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 17%, var(--surface)); }
.dec-b.on.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, var(--surface)); }
.rank { margin-top: 12px; display: grid; gap: 6px; }
.rank > div { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--surface2); border-radius: 11px; font-size: 14.5px; }

/* ---------- Configuración ---------- */
.marca-prev { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--club-1), color-mix(in srgb, var(--club-1) 75%, #000)); color: #fff; margin-bottom: 16px; }
.mp-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-t b { font-size: 19px; } .mp-t > span { opacity: .8; font-size: 14px; }
.mp-t .fila { margin-top: 8px; }
.mp-b1 { background: #fff; color: var(--club-1); min-height: 34px; padding: 0 12px; font-size: 13px; }
.mp-t .acc { min-height: 34px; padding: 0 12px; font-size: 13px; }
.g2s.col2 { margin-top: 4px; }
.paletas { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.paleta { display: inline-flex; align-items: center; gap: 0; border: 2px solid var(--line); border-radius: 13px; overflow: hidden; min-height: 46px; background: var(--surface); padding-right: 12px; }
.paleta i { width: 22px; height: 46px; display: block; }
.paleta span { font-size: 13px; font-weight: 700; margin-left: 10px; }
.paleta.on { border-color: var(--ink); }
.cfg-r { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); min-height: 62px; }
.cfg-r:first-of-type { border-top: 0; }
.cfg-r b { display: block; }
.cfg-r small { color: var(--muted); font-size: 13px; display: block; line-height: 1.35; }
.dias-r { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.dias-r > b { width: 62px; font-size: 14px; }
.dch { display: flex; gap: 5px; flex: 1; }
.dch button { flex: 1; min-height: 42px; border-radius: 11px; background: var(--surface2); border: 1.5px solid var(--line); font-weight: 800; color: var(--muted); max-width: 52px; }
.dch button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.personas { display: flex; flex-direction: column; margin: 8px 0; }
.persona { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.pe-c small { display: block; color: var(--muted); font-size: 13px; }
.persona .btn-chip { min-height: 34px; font-size: 12.5px; padding: 0 10px; }
.persona .fila.g { margin: 8px 0 0; gap: 6px; }

/* ---------- Legajo ---------- */
.leg-cab { display: none; }
.leg-r { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.card.nopad > .leg-r:first-of-type { border-top: 0; }
.leg-n small { display: block; color: var(--muted); font-size: 12.5px; }
.rojo { color: var(--bad-t); font-weight: 800; }
.leg-c { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leg-c .lbl { font-size: 12.5px; color: var(--muted); font-weight: 700; min-width: 74px; }
.leg-a { margin-top: 2px; }

/* ---------- Escritorio ---------- */
@media (min-width: 640px) {
  .tiles4 { grid-template-columns: repeat(4, 1fr); }
  .atajos { grid-template-columns: repeat(3, 1fr); }
  .g2 { grid-template-columns: 1fr 1fr; }
  .opc3 { grid-template-columns: repeat(3, 1fr); }
  .opc { grid-template-columns: 1fr; text-align: center; }
  .opc i { display: none; }
  .pb-g { grid-template-columns: repeat(4, 1fr); }
  .pb-g .campo.ancho { grid-column: 1 / -1; }
  .pb-g .campo.mitad { grid-column: span 2; }
  .exe-g { grid-template-columns: repeat(5, 1fr); }
  .exe-g .campo.ancho { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  :root { --nav-h: 0px; }
  .app { display: grid; grid-template-columns: 258px 1fr; }
  .nav-abajo { display: none; }
  :root[data-tema="oscuro"] .sel select option { color: #0f1b33; }
  #view { padding: 28px 32px 60px; }
  .phead h1 { font-size: 32px; }
  .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
  .col { display: block; }
  .tiles3 { gap: 14px; }
  #toast { bottom: 24px; }
  .prog-rut { position: static; }
  .hero-r { justify-content: flex-start; }
  .cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .cv-cand { order: 2; position: sticky; top: 82px; }
  .cv-izq { order: 1; }
  .cand-l { max-height: 520px; }
  .sheet-back { align-items: center; }
  .sheet { border-radius: 24px; max-height: 80vh; }
  .rep-c { max-width: none; }
  .mol .mol-det-col, .mol.con-sel .mol-det-col { display: block; }
  .mol.con-sel .mol-lista-col { display: block; }
  .volver { display: none; }
  .leg-cab { display: grid; grid-template-columns: 1.4fr 1.2fr 1.4fr 150px; gap: 12px; padding: 12px 18px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface2); }
  .leg-r { grid-template-columns: 1.4fr 1.2fr 1.4fr 150px; align-items: center; padding: 12px 18px; }
  .leg-c .lbl { display: none; }
  .cuerpo-box { width: 230px; }
  .mol-wrap { max-width: 520px; margin-left: auto; margin-right: auto; }
  .datos-p b { font-size: 16.5px; }
  .dias-b { max-width: 640px; }
  .plan-acc { flex-direction: row; justify-content: space-between; align-items: center; }
  .plan-acc .btn { flex: none; }
  .resumen-p { top: 80px; }
  .cal-c { padding: 18px; }
  .cal-cab, .cal-f { grid-template-columns: 90px repeat(7, minmax(0, 1fr)); gap: 6px; }
  .cel { min-height: 54px; font-size: 13px; letter-spacing: 0; } .cel b { font-size: 13px; }
}
@media (max-width: 380px) {
  .phead h1 { font-size: 24px; }
  .fac { grid-template-columns: 96px 1fr 44px; }
  .tile b { font-size: 24px; }
  .res-g b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }