/* ============================================================
   MISS DEPORTES — identidad: azul noche, azul M, oro trofeo, lima.
   Títulos en Alfa Slab One (estilo universitario del escudo),
   botones y marcadores en Exo 2 cursiva; texto en Work Sans. Antes: Anton a
   tamaño de póster, Work Sans pequeña debajo y objetos 3D
   recortados encima. Ver DESIGN.md para la idea y las reglas.
   ============================================================ */

/* ---------- tipografías (servidas en local, subconjunto latino) ---------- */
@font-face { font-family: 'Alfa Slab One'; src: url('fonts/alfaslabone.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 84%; }
@font-face { font-family: 'Exo 2'; src: url('fonts/exo2-800i.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/worksans.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --paper: #F4F6FA;
  --paper-2: #E7ECF4;
  --paper-3: #D5DCE9;
  --ink: #0A1F4D;
  --ink-2: #13294F;
  --muted: #46557A;
  --night-muted: #9AA6BA;
  --green: #C6F432;
  --green-press: #A8D61E;
  --yellow: #F5C518;
  --red: #E5484D;
  --blue: #1E6FE0;
  --pink: #ff8fb8;
  --cyan: #2ec4d6;
  --white: #ffffff;

  /* campo del capítulo activo (lo cambia app.js según la vista / el deporte favorito) */
  --chapter-bg: var(--yellow);
  --chapter-ink: var(--ink);

  /* alias de compatibilidad: plantillas antiguas de app.js usan estos nombres en estilos en línea */
  --bg: var(--paper); --bg-elev: var(--paper-2); --bg-card: var(--paper-2); --bg-card-hover: var(--paper-3);
  --border: var(--paper-3); --border-soft: var(--paper-2);
  --text: var(--ink); --text-dim: var(--muted); --text-faint: var(--muted);
  --accent: var(--green); --accent-ink: var(--ink); --accent-dyn: var(--green);
  --emerald: var(--ink); --rose: var(--red); --sos: var(--red);

  --font-display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --font-sport: 'Exo 2', 'Work Sans', 'Arial Black', sans-serif;
  --night: #0B111B; --surface: #131C2B; --navy: #0A1F4D; --brand-blue: #1E6FE0; --gold: #F5C518; --lime: #C6F432; --text-hi: #F2F4F8; --text-lo: #9AA6BA;
  --font-text: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem);
  --step-poster: clamp(36px, 7.4vw, 112px);

  --margin: clamp(16px, 2.6vw, 40px);
  --gutter: clamp(12px, 1.4vw, 24px);
  --section: clamp(72px, 10vw, 180px);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms; --t-reveal: 800ms;

  --shadow-float: 0 24px 60px rgba(10, 31, 77, .28), 0 4px 12px rgba(10, 31, 77, .12);
  --glass: rgba(244, 246, 250, .7);
  --nav-h: 72px;
  --rail-w: 248px;
  color-scheme: light;
}

/* colores por familia de deporte: el contenido tiñe la superficie */
[data-category="Raqueta"]     { --cat: var(--yellow); --cat-ink: var(--ink); }
[data-category="Equipo"]      { --cat: var(--green);  --cat-ink: var(--ink); }
[data-category="Resistencia"] { --cat: var(--cyan);   --cat-ink: var(--ink); }
[data-category="Fitness"]     { --cat: var(--pink);   --cat-ink: var(--ink); }
[data-category="Agua"]        { --cat: var(--blue);   --cat-ink: var(--white); }
[data-category="Combate"]     { --cat: var(--red);    --cat-ink: var(--ink); }
[data-category="Competitivo"] { --cat: var(--ink);    --cat-ink: var(--paper); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; height: 100svh; /* taste-skill-ignore: 100vh solo como respaldo; manda 100svh */
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1; margin: 0; text-wrap: balance; hyphens: none; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .07em; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: 2px; }
.lnd-hero__foot, .lnd-search, .lnd-foot, .chapter--matches, .notif-panel__head, .tabs, .auth__media, .is-dark { --focus-ring: var(--green); }
html { scroll-padding-top: 72px; scroll-padding-bottom: 96px; }
button, a, [role=button], summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.is-armed { outline: 3px solid var(--red) !important; outline-offset: 2px; }
.is-pending { opacity: .7; cursor: progress; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 200; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; clip: auto; padding: 12px 16px; }
.wordmark { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; line-height: .9; text-decoration: none; }
code { font-family: inherit; font-weight: 600; background: var(--paper-3); padding: 0 .3em; }

/* pictogramas: hereda color y tamaño del texto */
.glyph { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; pointer-events: none; overflow: visible; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 0;
  font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.1; text-decoration: none; text-align: center;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--green); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.btn--danger { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--red); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: var(--ink); color: var(--green); }
  .btn--dark:hover { background: var(--green); color: var(--ink); }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); }
  .btn--danger:hover { background: var(--red); }
}
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: 0 28px; }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: 44px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .glyph { width: 1.2em; height: 1.2em; }
.link-btn, .link-quiet { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .07em; font-weight: 600; color: inherit; min-height: 44px; }
.link-btn { align-self: flex-start; font-size: .9375rem; }

/* ---------- campos ---------- */
.select, .field input, .field textarea, .field select, input.select, textarea.select {
  width: 100%; min-height: 48px; padding: 12px 14px; background: var(--paper-2); color: var(--ink);
  border: 0; border-radius: 0; box-shadow: inset 0 -3px 0 var(--ink); font-size: 1rem; outline: none; /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
  transition: box-shadow var(--t-hover) ease, background-color var(--t-hover) ease;
}
select.select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.select:focus, .select:focus-visible, .field input:focus-visible { background-color: var(--paper-3); box-shadow: inset 0 -4px 0 var(--green); outline: none; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
textarea.select { min-height: 88px; resize: vertical; }
.select--sm { min-height: 44px; padding: 8px 36px 8px 12px; font-size: 1rem; width: auto; }
::placeholder { color: var(--muted); opacity: 1; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form--row { flex-direction: row; gap: 8px; }
.form--row input { flex: 1; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.field__hint { font-size: .875rem; font-weight: 500; min-height: 1.2em; color: var(--muted); }
.field__hint--ok { color: var(--ink); }
.field__hint--ok::before { content: ''; display: inline-block; width: .7em; height: .7em; background: var(--green); margin-right: .45em; vertical-align: .02em; }
.field__hint--bad { color: var(--ink); }
.field__hint--bad::before { content: ''; display: inline-block; width: .7em; height: .7em; background: var(--red); margin-right: .45em; vertical-align: .02em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; font-weight: 500; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); margin: 0; }
.check--sos { padding: 0 14px; background: var(--red); font-weight: 600; }
.check--sos input { accent-color: var(--ink); }

/* chips y grupos de chips (sustituyen selects cortos) */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; font-size: .875rem; font-weight: 600; line-height: 1.2; background: var(--paper-3); color: var(--ink); border-radius: 0; }
.chip .glyph { width: 1.05em; height: 1.05em; }
.chip--muted, .chip--level, .chip--gender { background: var(--paper-3); color: var(--ink); }
.chip--accent { background: var(--green); }
.chip--gold { background: var(--yellow); }
.chip--sos { background: var(--red); }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-option {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: var(--paper-2); color: var(--ink);
  font-weight: 600; font-size: .9375rem; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: inset 0 0 0 2px var(--paper-3); /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.chip-option:active { transform: scale(.97); }
.chip-option.active { background: var(--ink); color: var(--paper); box-shadow: none; } /* taste-skill-ignore: box-shadow none (falso positivo del lint) */
@media (hover: hover) and (pointer: fine) { .chip-option:not(.active):hover { box-shadow: inset 0 0 0 2px var(--ink); } } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.chip-group--sm .chip-option { min-height: 44px; }
.chip-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-picker__item { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; background: var(--paper-2); font-size: .9375rem; font-weight: 500; cursor: pointer; user-select: none; box-shadow: inset 0 0 0 2px var(--paper-3); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.chip-picker__item.selected { background: var(--ink); color: var(--paper); box-shadow: none; } /* taste-skill-ignore: box-shadow none (falso positivo del lint) */
.chip-picker__empty { color: var(--muted); font-size: .9375rem; }
.empty { color: var(--muted); font-size: 1rem; padding: 32px 0; }
.stack { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================
   PORTADA PÚBLICA
   ============================================================ */
.landing { position: relative; background: var(--paper); }
.lnd-nav { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px var(--margin); }
.lnd-nav__mark { font-size: 36px; color: var(--ink); }
.lnd-nav__right { display: flex; align-items: center; gap: 4px; }
.lnd-nav__lang, .lnd-nav__link { min-height: 44px; min-width: 44px; padding: 0 12px; background: none; border: 0; font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.lnd-nav__lang { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .lnd-nav__link:hover, .lnd-nav__lang:hover { text-decoration: underline; text-underline-offset: .2em; } }
@media (max-width: 520px) { .lnd-nav__cta { display: none; } }

/* 1. héroe: línea de flotación */
.lnd-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; --seam: 50%; --fs: min(11vw, 20svh); } /* taste-skill-ignore: 100vh solo como respaldo; manda 100svh */
.lnd-hero__field { position: absolute; left: 0; right: 0; }
.lnd-hero__field--day { top: 0; height: var(--seam); background: var(--paper); }
.lnd-hero__field--night { top: var(--seam); bottom: 0; background: var(--ink); }
.lnd-hero__title { position: absolute; z-index: 2; left: calc(var(--margin) - .04em); top: calc(var(--seam) - var(--fs) * 1.29); height: calc(var(--fs) * 1.72); width: 64%; font-size: var(--fs); line-height: .86; letter-spacing: -.01em; margin: 0; }
.lnd-hero__copy { position: absolute; inset: 0; display: block; white-space: nowrap; }
.lnd-hero__copy--day { color: var(--ink); clip-path: inset(0 0 25% 0); }
.lnd-hero__copy--night { color: var(--green); clip-path: inset(75% 0 0 0); }
.lines .line { display: block; overflow: hidden; padding: .08em 0; margin: -.08em 0; }
.lines [data-line] { display: block; }
.lnd-hero__ball-wrap { position: absolute; z-index: 1; right: 2vw; top: calc(var(--seam) - min(23vw, 39svh)); width: min(46vw, 78svh); aspect-ratio: 1; }
.lnd-hero__ball { width: 100%; height: auto; }
.lnd-hero__foot { position: absolute; z-index: 3; left: var(--margin); right: var(--margin); bottom: clamp(24px, 5svh, 56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; color: var(--paper); }
.lnd-hero__lead { max-width: 38ch; font-size: var(--step-lead); line-height: 1.32; }
.lnd-hero__live { display: inline; color: var(--green); font-weight: 600; }
@media (max-width: 760px) {
  .lnd-hero { --seam: 44%; --fs: min(21vw, 19svh); min-height: 600px; }
  .lnd-hero__title { width: calc(100% - 2 * var(--margin)); }
  .lnd-hero__ball-wrap { width: 54vw; right: -7vw; top: calc(var(--seam) + var(--fs) * .46); }
  .lnd-hero__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .lnd-hero__lead { font-size: 1.0625rem; max-width: 27ch; }
}

/* 2. buscador vivo sobre la pista nocturna */
.lnd-search { position: relative; min-height: 92svh; padding: var(--section) var(--margin); background: var(--ink); color: var(--paper); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.lnd-search__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; background: var(--ink); }
.lnd-search::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,20,20,.9) 0%, rgba(20,20,20,.72) 55%, rgba(20,20,20,.45) 100%); } /* taste-skill-ignore: velo neutro sobre imagen para legibilidad */
.lnd-search__inner { width: 100%; }
.lnd-search__label { display: block; font-size: var(--step-lead); font-weight: 500; margin-bottom: 12px; }
.lnd-search__field { position: relative; }
.lnd-search__input { width: 100%; padding: 0 0 8px; background: transparent; border: 0; border-radius: 0; color: var(--paper); caret-color: var(--green);
  font-family: var(--font-display); font-size: var(--step-poster); line-height: 1.1; text-transform: uppercase; letter-spacing: -.005em; outline: none;
  box-shadow: inset 0 -6px 0 rgba(233,227,213,.25); transition: box-shadow var(--t-hover) ease; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.lnd-search__input:focus-visible { box-shadow: inset 0 -6px 0 var(--green); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.lnd-search__answer { margin-top: 40px; max-width: 820px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.lnd-search__examples { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; }
.lnd-ex { min-height: 44px; background: none; border: 0; padding: 0; color: var(--paper); font-size: 1.0625rem; font-weight: 500; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: .07em; text-decoration-color: rgba(233,227,213,.5); transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .lnd-ex:hover { color: var(--green); text-decoration-color: currentColor; } }
@media (max-width: 760px) {
  .lnd-search { min-height: 84svh; }
  .lnd-search__input { font-size: var(--step-poster); }
  .lnd-search__examples { gap: 6px; }
  .lnd-ex { background: rgba(233,227,213,.12); padding: 0 14px; text-decoration: none; }
}
/* fila de respuesta: un trozo de la interfaz real de la app */
.ans-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 20px; padding: 14px 16px; background: var(--paper); color: var(--ink); }
.ans-row--sos { background: var(--red); }
.ans-row__time { font-family: var(--font-display); font-size: 36px; line-height: .9; font-variant-numeric: tabular-nums; grid-row: span 2; }
.ans-row__sport { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.ans-row__where { font-size: 1.0625rem; color: var(--ink); grid-column: 2; }
.ans-row--sos .ans-row__where { color: var(--ink); }
.ans-row__go { grid-column: 3; grid-row: 1 / span 2; }
.ans-empty { font-size: var(--step-lead); max-width: 34ch; }
.ans-empty .btn { margin-top: 16px; }
@media (max-width: 520px) { .ans-row { grid-template-columns: auto 1fr; } .ans-row__go { grid-column: 1 / -1; grid-row: auto; } }

/* 3. barra de etapas */
.lnd-steps { padding: var(--section) var(--margin); background: var(--paper); }
.lnd-h2 { font-size: var(--step-head); max-width: 12ch; }
.stagebar { display: flex; gap: 6px; margin-top: 64px; }
.stagebar__col { flex: var(--grow) 1 0; min-width: 0; }
.stagebar__seg { height: 22vh; min-height: 150px; padding: 20px; }
.stagebar__seg--search { background: var(--yellow); }
.stagebar__seg--join { background: var(--red); }
.stagebar__seg--play { background: var(--green) url(img/court-low.webp) center 60% / cover no-repeat; background-blend-mode: luminosity; color: var(--paper); }
.stagebar__dur { display: block; font-family: var(--font-display); font-size: var(--step-lead); line-height: 1; text-transform: uppercase; }
.stagebar__note { margin-top: 14px; font-size: 1.0625rem; max-width: 24ch; }
@media (max-width: 760px) {
  .stagebar { flex-direction: column; margin-top: 40px; }
  .stagebar__seg { height: auto; min-height: 76px; }
  .stagebar__col:last-child .stagebar__seg { min-height: 240px; }
  .stagebar__note { margin: 10px 0 18px; }
}

/* 4. SOS */
.lnd-sos { position: relative; display: grid; grid-template-columns: 5fr 7fr; min-height: 92svh; background: var(--red); overflow: hidden; }
.lnd-sos__text { align-self: center; padding: var(--section) 0 var(--section) var(--margin); position: relative; z-index: 2; }
.lnd-sos__body { margin-top: 28px; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.lnd-sos__live { margin-top: 20px; font-weight: 600; }
.lnd-sos__pic { position: relative; margin: 0; min-height: 60svh; }
.lnd-sos__pic img { position: absolute; width: min(118%, 980px); right: -16%; bottom: -10%; transform: rotate(-9deg); }
.lnd-sos__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px var(--margin); background: var(--ink); color: var(--paper); font-size: 1.0625rem; font-weight: 500; }
@media (max-width: 760px) {
  .lnd-sos { grid-template-columns: 1fr; }
  .lnd-sos__text { padding: var(--section) var(--margin) 0; }
  .lnd-sos__pic { min-height: 92vw; }
  .lnd-sos__pic img { width: 100vw; right: -14vw; bottom: 2vw; }
}

/* 5. lista de póster */
.lnd-list { position: relative; padding: 80px var(--margin); background: var(--yellow); overflow: hidden; }
.poster-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.poster-list__item { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; color: var(--ink); text-decoration: none; transition: opacity var(--t-hover) ease; }
.poster-list__name { font-family: var(--font-display); font-size: var(--step-poster); line-height: 1.04; text-transform: uppercase; }
.poster-list__fact { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .poster-list:hover .poster-list__item:not(:hover) { opacity: .32; } }
.lnd-list__frame { position: absolute; z-index: 1; right: 16vw; top: 50%; width: min(30vw, 440px); transform: translateY(-50%) rotate(5deg) scale(.92); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.lnd-list.is-previewing .lnd-list__frame { opacity: 1; transform: translateY(-50%) rotate(5deg) scale(1); }
@media (max-width: 760px) {
  .poster-list__item { display: block; margin-bottom: 22px; }
  .poster-list__name { display: block; font-size: var(--step-poster); }
  .poster-list__fact { display: block; margin-top: 6px; font-size: .875rem; }
  .lnd-list__frame { display: none; }
}

/* 6. cifras escalonadas */
.lnd-figures { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 80px var(--margin) var(--section); background: var(--paper); }
.lnd-figures__h { position: absolute; left: calc(50% + 4px); top: 80px; font-size: 36px; max-width: 14ch; }
.fig { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; overflow: hidden; }
.fig--tall { flex: 6; height: 70vh; min-height: 460px; background: var(--green); }
.fig--ink { flex: 3; height: 44vh; min-height: 300px; margin-top: 18vh; background: var(--ink); color: var(--paper); }
.fig--mid { flex: 3; height: 34vh; min-height: 240px; margin-top: 30vh; background: var(--paper-3); }
.fig__num { font-family: var(--font-display); font-size: var(--step-head); line-height: 1; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.fig__cap { font-size: 1.0625rem; font-weight: 500; max-width: 22ch; position: relative; z-index: 1; }
.fig__pic { position: absolute; width: 62%; right: -6%; top: 16%; }
@media (max-width: 760px) {
  .lnd-figures { flex-wrap: wrap; padding-top: 112px; }
  .lnd-figures__h { left: var(--margin); top: 48px; font-size: 36px; }
  .fig--tall { flex: 1 1 100%; height: 112vw; min-height: 0; }
  .fig--ink, .fig--mid { flex: 1 1 calc(50% - 4px); height: auto; min-height: 220px; margin-top: 0; }
  .fig--mid { margin-top: 32px; }
  .fig { padding: 18px; }
  .fig__cap { font-size: 1.0625rem; }
}

/* 7. primer paso ya abierto */
.lnd-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; min-height: 90svh; padding: var(--section) var(--margin) 48px; background: var(--green); }
.lnd-cta__h { font-size: var(--step-poster); line-height: .92; }
.lnd-cta__after { margin-top: 20px; font-size: 1.0625rem; max-width: 34ch; }
.ui-dialog { align-self: center; justify-self: center; width: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--paper); box-shadow: none; } /* taste-skill-ignore: box-shadow none (falso positivo del lint) */
.ui-dialog__title { font-family: var(--font-display); font-size: 36px; line-height: .95; text-transform: uppercase; }
.ui-dialog__field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 1.0625rem; }
.ui-dialog__field input { min-height: 52px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--paper-2); box-shadow: inset 0 -3px 0 var(--ink); font-size: 1.0625rem; font-weight: 500; outline: none; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.ui-dialog__field input:focus-visible { box-shadow: inset 0 -4px 0 var(--green); background: var(--paper-3); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.ui-dialog__seg { display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.seg { min-height: 48px; border: 0; background: transparent; font-weight: 600; font-size: 1.0625rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.seg.active { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) {
  .lnd-cta { grid-template-columns: 1fr; align-items: start; min-height: 84svh; gap: 40px; }

  .ui-dialog { width: 100%; padding: 20px; }
  .ui-dialog .btn { min-height: 52px; }
}

/* 8. cierre */
.lnd-foot { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 90svh; padding: 40px var(--margin) 28px; background: var(--ink); color: var(--paper); overflow: hidden; }
.lnd-foot__top { display: flex; justify-content: space-between; gap: 24px; font-size: .875rem; }
.lnd-foot__top p { max-width: 46ch; }
.lnd-foot__up { font-weight: 600; white-space: nowrap; }
.lnd-foot__name { font-size: min(calc((100vw - 2 * var(--margin)) / 8.1), 190px); line-height: .9; white-space: nowrap; margin-left: -.02em; color: var(--paper); }
@media (max-width: 600px) { .lnd-foot__name { font-size: calc((100vw - 2 * var(--margin)) / 5.4); white-space: normal; } }
.lnd-foot__meta { display: flex; justify-content: space-between; gap: 16px; font-size: .875rem; color: var(--paper); }
.lnd-foot__meta .link-quiet { color: var(--paper); min-height: 0; font-size: inherit; }
@media (max-width: 760px) { .lnd-foot__top, .lnd-foot__meta { flex-direction: column; gap: 10px; } .lnd-foot { min-height: 70svh; } }

/* ============================================================
   ACCESO (login / registro)
   ============================================================ */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; background: var(--paper); } /* taste-skill-ignore: 100vh solo como respaldo; manda 100svh */
.auth__media { position: relative; overflow: hidden; background: var(--ink); }
.auth__media img, .auth__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth__video { opacity: 0; transition: opacity 600ms ease; }
.auth__video.is-playing { opacity: 1; }
@media (max-width: 899px) { .auth__video { display: none; } }
.auth__media::after { content: ''; position: absolute; inset: 50% 0 0 0; background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.78) 100%); } /* taste-skill-ignore: velo neutro sobre imagen para legibilidad */
.auth__media-title { position: absolute; z-index: 1; left: var(--margin); right: var(--margin); bottom: var(--margin); font-size: clamp(56px, 7vw, 128px); line-height: .86; color: var(--paper); max-width: 8ch; }
.auth__card { width: 100%; max-width: 540px; justify-self: center; align-self: center; padding: 32px var(--margin) 40px; }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.auth__mark { font-size: 28px; }
.auth__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; font-weight: 600; }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 0 0 2px var(--ink); margin-bottom: 28px; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.auth__tab { min-height: 52px; border: 0; background: transparent; font-weight: 600; font-size: 1rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.auth__tab.active { background: var(--ink); color: var(--paper); }
.auth__error { margin: 0; padding: 12px 14px; background: var(--red); font-weight: 600; font-size: .9375rem; }
.auth__hint { font-size: .875rem; color: var(--muted); }
.auth__legal { margin-top: 24px; font-size: .875rem; color: var(--muted); line-height: 1.5; }
.auth__legal a { color: var(--ink); font-weight: 600; cursor: pointer; }
.password-wrap { position: relative; display: flex; }
.password-wrap input { padding-right: 52px; }
.password-toggle { position: absolute; right: 2px; top: 2px; bottom: 5px; width: 46px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink); }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth__media { height: 34svh; min-height: 220px; }
  .auth__media img { object-position: 50% 70%; }
  .auth__media-title { font-size: 15vw; }
  .auth__card { padding-top: 20px; }
  .auth__top { margin-bottom: 20px; }
}

/* ============================================================
   CARCASA DE LA APP
   ============================================================ */
.shell { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } /* taste-skill-ignore: 100vh solo como respaldo; manda 100svh */

/* navegación: barra negra inferior en móvil, columna negra lateral en escritorio */
.tabs { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr); background: var(--ink); color: var(--paper); isolation: isolate; }
.tabs__brand, .tabs__city { display: none; }
.tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 6px 2px;
  background: none; border: 0; color: var(--night-muted); font-size: .8125rem; font-weight: 600; line-height: 1.1; transition: color var(--t-ui) ease; -webkit-tap-highlight-color: transparent; }
.tab .glyph { width: 24px; height: 24px; }
.tab.active { color: var(--ink); }
.tab:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.tabs__ink { position: absolute; z-index: 0; left: 0; top: 0; height: var(--nav-h); width: 20%; background: var(--green); transform: translateX(var(--ink-x, 0)); transition: transform 420ms var(--ease-out), width 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tab:not(.active):hover { color: var(--paper); } }

@media (min-width: 1024px) {
  .shell { padding-bottom: 0; padding-left: var(--rail-w); }
  .tabs { right: auto; top: 0; width: var(--rail-w); height: 100vh; height: 100dvh; padding: 28px 0; display: flex; flex-direction: column; gap: 2px; } /* taste-skill-ignore: 100vh solo como respaldo; manda 100svh */
  .tabs__brand { display: block; padding: 0 24px 40px; font-size: 40px; color: var(--paper); }
  .tabs__city { display: block; margin-top: auto; padding: 0 24px; font-size: .875rem; color: var(--night-muted); }
  .tab { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 64px; padding: 0 24px; font-family: var(--font-display); font-size: 30px; font-weight: 400; text-transform: uppercase; line-height: 1; }
  .tab .glyph { width: 22px; height: 22px; }
  .tabs__ink { left: 0; width: 100%; height: 64px; transform: translateY(var(--ink-y, 0)); }
}

/* barra superior: utilidades */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 8px var(--margin); }
.topbar__mark { font-size: 26px; min-width: 0; overflow: hidden; white-space: nowrap; }
.topbar__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.topbar__label { display: none; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--ink); font-weight: 600; transition: background-color var(--t-hover) ease; }
.icon-btn .glyph { width: 22px; height: 22px; }
.icon-btn--text { font-variant-numeric: tabular-nums; font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--paper-2); } }
.avatar { width: 40px; height: 40px; margin: 0 4px; border-radius: 50%; border: 0; padding: 0; overflow: hidden; background: var(--ink); color: var(--paper); font-weight: 600; font-size: .8125rem; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t-press) var(--ease-out); }
.avatar:active { transform: scale(.94); }
.avatar img, .hero__avatar img, .participant__avatar img, .team-col__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sos-pill { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin-right: 6px; border: 0; background: var(--red); color: var(--ink); font-weight: 600; font-size: .875rem; }
.sos-pill .glyph { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .topbar__mark { visibility: hidden; }
  .topbar__label { display: inline; font-size: .9375rem; }
}
@media (max-width: 599px) { #btn-logout { display: none; } .topbar__inner { gap: 4px; } }
@media (max-width: 420px) { #btn-invite { display: none; } .sos-pill .glyph { display: none; } .topbar__mark { font-size: 22px; } .icon-btn { min-width: 40px; padding: 0 4px; } .avatar { width: 36px; height: 36px; margin: 0 2px; } .sos-pill { padding: 0 8px; margin-right: 2px; } }

/* notificaciones */
.notif-wrap { position: relative; }
.notif-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--red); color: var(--ink); font-size: .75rem; font-weight: 700; line-height: 18px; text-align: center; }
.notif-panel { position: absolute; z-index: 60; top: calc(100% + 8px); right: -96px; width: min(360px, calc(100vw - 2 * var(--margin))); max-height: 70vh; overflow-y: auto; background: var(--paper); box-shadow: var(--shadow-float); } /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
.notif-panel__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 22px; text-transform: uppercase; }
.notif-panel__head .btn { color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); font-family: var(--font-text); text-transform: none; min-height: 36px; font-size: .875rem; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.notif-list { display: flex; flex-direction: column; }
.notif-row { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background-color var(--t-hover) ease; }
.notif-row + .notif-row { box-shadow: inset 0 6px 0 var(--paper-2); padding-top: 20px; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.notif-row--unread { background: var(--paper-2); }
.notif-row__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); }
.notif-row--unread .notif-row__icon { background: var(--green); color: var(--ink); }
.notif-row__title { font-weight: 600; }
.notif-row__body { font-size: .9375rem; color: var(--muted); margin-top: 2px; }
.notif-row__time { font-size: .8125rem; color: var(--muted); margin-top: 4px; }
.notif-empty { padding: 24px 16px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .notif-row:hover { background: var(--paper-3); } }

/* avisos */
.banner { padding: 16px var(--margin); }
.banner--verify { background: var(--yellow); }
.banner--verify p { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 500; }
.verify-link-box { margin-top: 10px; padding: 12px 14px; background: var(--paper); font-size: .9375rem; word-break: break-all; }
.verify-link-box a { font-weight: 600; }

/* ============================================================
   VISTAS Y CAPÍTULOS
   ============================================================ */
.wrap { padding: 0 var(--margin) 96px; }
.view > *:not(.chapter) { max-width: 1240px; }
.chapter {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  min-height: clamp(300px, 46svh, 500px); margin: 0 calc(-1 * var(--margin)) 32px; padding: 32px var(--margin) clamp(24px, 4vw, 48px);
  background: var(--chapter-bg); color: var(--chapter-ink); overflow: hidden; isolation: isolate;
}
.chapter__title { position: relative; z-index: 2; font-size: clamp(64px, 12vw, 184px); line-height: 1.1; max-width: 10ch; }
.chapter__lead { position: relative; z-index: 2; max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.chapter__render { position: absolute; z-index: 1; right: -2%; top: 6%; width: clamp(180px, 34vw, 500px); transform: rotate(-7deg); pointer-events: none; }
.chapter__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.chapter__action { position: relative; z-index: 2; align-self: flex-start; margin-top: 6px; }
.chapter__count { font-family: var(--font-display); font-size: 1.6em; line-height: .9; vertical-align: -.08em; margin-right: .1em; }
.chapter__figure { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: .1em; }
.chapter__num { font-family: var(--font-display); font-size: clamp(96px, 14vw, 220px); line-height: .9; font-variant-numeric: tabular-nums; }
.chapter__cap { font-size: var(--step-lead); font-weight: 600; max-width: 14ch; line-height: 1.15; }
.chapter__stamp { position: relative; z-index: 2; align-self: flex-start; padding: 6px 12px; background: var(--ink); color: var(--yellow); font-family: var(--font-display); font-size: 28px; line-height: 1; text-transform: uppercase; transform: rotate(-3deg); }
.chapter__search { position: relative; z-index: 2; max-width: 560px; }
.chapter__search .select { background: var(--paper); }
@media (min-width: 1024px) { .chapter { margin-top: 0; } }
@media (max-width: 760px) {
  .chapter { min-height: 360px; padding-top: 20px; }
  .chapter__render { width: 46vw; right: -8vw; top: 8px; }
  .chapter--profile { padding-top: 30vw; }
  .chapter--profile .chapter__render { width: 40vw; }
  .chapter__title { font-size: 19vw; }
}
.chapter--stats { --chapter-bg: var(--yellow); --chapter-ink: var(--ink); }
.chapter--matches { --chapter-bg: var(--ink); --chapter-ink: var(--paper); min-height: clamp(340px, 52svh, 560px); }
.chapter--matches::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,20,20,.86) 0%, rgba(20,20,20,.35) 60%, rgba(20,20,20,.1) 100%); } /* taste-skill-ignore: velo neutro sobre imagen para legibilidad */
.chapter--friends { --chapter-bg: var(--pink); --chapter-ink: var(--ink); }
.chapter--league { --chapter-bg: var(--blue); --chapter-ink: var(--white); }
.chapter--league .btn--dark { background: var(--paper); color: var(--ink); }
.chapter--sos { --chapter-bg: var(--red); --chapter-ink: var(--ink); }
.chapter--profile { --chapter-bg: var(--cat, var(--green)); --chapter-ink: var(--cat-ink, var(--ink)); }

.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 56px 0 18px; }
.block-head h2 { font-size: clamp(40px, 5.4vw, 72px); }
.block-head h3 { font-size: clamp(28px, 3vw, 40px); }
.block-head--tight { margin: 0 0 12px; align-items: center; }
.block-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.block-head__sub { font-weight: 600; margin: 12px 0 4px; }
.modal__hint { font-size: 1rem; color: var(--muted); line-height: 1.5; margin: 0 0 16px; max-width: 64ch; }
.load-more-row { display: flex; justify-content: center; margin-top: 18px; }

/* entrada de vista: el titular sube desde su línea base, el objeto cae */
@media (prefers-reduced-motion: no-preference) {
  .view.view--enter .chapter__title { animation: lineUp 760ms var(--ease-out) both; }
  .view.view--enter .chapter__lead, .view.view--enter .chapter__figure, .view.view--enter .chapter__action, .view.view--enter .chapter__search, .view.view--enter .xp-row, .view.view--enter .hero__info > *:not(.hero__nameRow) { animation: rise 640ms var(--ease-out) 120ms both; }
  .view.view--enter .chapter__render { animation: dropIn 900ms var(--ease-out) 60ms both; }
  .view.view--enter .chapter__photo { animation: settle 1400ms var(--ease-out) both; }
}
@keyframes lineUp { from { transform: translateY(40%); opacity: 0; clip-path: inset(0 0 100% 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 -20% 0); } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dropIn { 0% { transform: translateY(-38%) rotate(-18deg); opacity: 0; } 62% { transform: translateY(4%) rotate(-5deg); opacity: 1; } 100% { transform: rotate(-7deg); opacity: 1; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }

/* ============================================================
   PERFIL
   ============================================================ */
.hero { gap: 20px; }
.hero__id { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 18px; }
.hero__avatar-wrap { position: relative; flex-shrink: 0; }
.hero__avatar { width: clamp(84px, 11vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); overflow: hidden; }
.avatar-edit-btn { position: absolute; right: -4px; bottom: -4px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0; }
.avatar-tier-badge { position: absolute; left: -4px; top: -4px; padding: 3px 8px; background: var(--ink); color: var(--paper); font-size: .8125rem; font-weight: 700; }
.hero__info { min-width: 0; }
.hero__nameRow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
#hero-name { font-size: clamp(56px, 9vw, 150px); line-height: 1; max-width: 11ch; overflow-wrap: anywhere; }
@media (min-width: 761px) { .chapter--profile .chapter__render { top: auto; bottom: -14%; right: 1%; width: clamp(180px, 25vw, 380px); } }
.hero__streak { margin-top: 10px; font-weight: 600; font-size: 1.0625rem; }
.hero__info .chip--gold { margin-top: 10px; background: var(--ink); color: var(--yellow); }
.xp-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; max-width: 620px; }
.xp-badge { font-family: var(--font-display); font-size: clamp(72px, 9vw, 120px); line-height: .82; font-variant-numeric: tabular-nums; min-width: 1ch; }
.xp-body { flex: 1; min-width: 0; }
.xp-label { font-weight: 600; margin-bottom: 8px; }
.xp-bar-track { height: 14px; background: rgba(20,20,20,.18); }
.chapter--profile[data-category="Agua"] .xp-bar-track, .chapter--profile[data-category="Competitivo"] .xp-bar-track { background: rgba(255,255,255,.22); }
.xp-bar-fill { height: 100%; background: currentColor; transition: width 900ms var(--ease-out); }
.xp-hint { margin-top: 8px; font-size: .9375rem; font-weight: 500; }
.xp-levelup { animation: levelPop 700ms var(--ease-out); }
@keyframes levelPop { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-6deg); } 100% { transform: scale(1); } }

.streak-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.flame-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--paper-2); }
.flame-card__flame { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--paper-3); color: var(--muted); flex-shrink: 0; transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.flame-card__flame .glyph { width: 26px; height: 26px; }
.flame-card__flame.lit { background: var(--red); color: var(--ink); }
.flame-card.flame--3 .flame-card__flame.lit, .flame-card.flame--4 .flame-card__flame.lit, .flame-card.flame--5 .flame-card__flame.lit { background: var(--ink); color: var(--yellow); }
.flame-card__label { font-size: .9375rem; color: var(--muted); font-weight: 500; }
.flame-card__value { font-family: var(--font-display); font-size: 32px; line-height: 1; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) { .flame-card__flame.lit .glyph { animation: flicker 1.6s ease-in-out infinite; transform-origin: 50% 90%; } }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08, .94) rotate(2deg); } }
.streak-bump { animation: levelPop 550ms var(--ease-out); }
@media (max-width: 520px) { .flame-card { padding: 14px; gap: 10px; } .flame-card__value { font-size: 24px; } }

.stat-grid { display: flex; flex-wrap: wrap; gap: 32px 48px; margin-top: 40px; }
.stat-card { min-width: 120px; }
.stat-card__value { font-family: var(--font-display); font-size: clamp(56px, 6.4vw, 96px); line-height: .86; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.stat-card__value .glyph { width: .42em; height: .42em; stroke-width: 2.6; }
.stat-card__label { margin-top: 6px; font-weight: 600; font-size: .9375rem; }
.stat-card__value--good::after { content: ''; width: .16em; height: .16em; background: var(--green); align-self: flex-start; margin-top: .06em; }
.stat-card__value--bad::after { content: ''; width: .16em; height: .16em; background: var(--red); align-self: flex-start; margin-top: .06em; }

/* logros: medallas */
.achv-row { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); }
.achv { flex: 0 0 auto; width: 176px; padding: 18px; scroll-snap-align: start; background: var(--paper-2); color: var(--muted); }
.achv__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--paper-3); color: var(--muted); margin-bottom: 14px; }
.achv__icon .glyph { width: 30px; height: 30px; }
.achv__name { font-family: var(--font-display); font-size: 24px; line-height: 1; text-transform: uppercase; }
.achv__desc { margin-top: 6px; font-size: .875rem; line-height: 1.35; }
.achv--unlocked { background: var(--yellow); color: var(--ink); }
.achv--unlocked .achv__icon { background: var(--ink); color: var(--yellow); }
.achv--justUnlocked { animation: levelPop 900ms var(--ease-out) 2; }

/* álbum de cartas */
.block-head--album { margin-top: 72px; }
.pokedex-search-wrap { position: relative; max-width: 520px; margin: 0 0 20px; }
.pokedex-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
.pokedex-search { width: 100%; min-height: 52px; padding: 12px 14px 12px 46px; border: 0; border-radius: 0; background: var(--paper-2); box-shadow: inset 0 -3px 0 var(--ink); font-size: 1rem; outline: none; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.pokedex-search:focus-visible { box-shadow: inset 0 -4px 0 var(--green); background: var(--paper-3); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.pokedex { display: flex; flex-direction: column; gap: 40px; }
.pokedex-section { display: flex; flex-direction: column; gap: 14px; }
.pokedex__section-title { font-family: var(--font-display); font-size: 32px; line-height: 1; text-transform: uppercase; display: flex; align-items: baseline; gap: 12px; }
.pokedex__count { font-family: var(--font-text); font-size: 1rem; font-weight: 600; color: var(--muted); }
.pokedex__empty { padding: 28px; background: var(--paper-2); color: var(--muted); max-width: 52ch; }
.pokedex-empty { color: var(--muted); padding: 12px 0; }
.card-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.sport-card {
  position: relative; aspect-ratio: 3 / 4; background: var(--cat, var(--paper-2)); color: var(--cat-ink, var(--ink)); overflow: hidden; cursor: pointer;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 300ms var(--ease-out);
  --mx: 50%; --my: 30%;
}
.sport-card.is-tilting { transition: transform 60ms linear; }
.sport-card__open { position: absolute; inset: 0; z-index: 3; background: none; border: 0; padding: 0; }
.sport-card__open:focus-visible { outline: 4px solid var(--ink); outline-offset: -4px; }
.sport-card__img { position: absolute; z-index: 1; right: -12%; top: 14%; width: 96%; height: auto; transition: transform 500ms var(--ease-out); pointer-events: none; }
.sport-card__level { position: absolute; z-index: 2; left: 12px; top: 10px; font-family: var(--font-display); font-size: 56px; line-height: .86; font-variant-numeric: tabular-nums; pointer-events: none; }
.sport-card__name { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 34px; font-family: var(--font-display); font-size: 26px; line-height: .92; text-transform: uppercase; pointer-events: none; overflow-wrap: anywhere; }
.sport-card__meta { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 10px; font-size: .8125rem; font-weight: 600; pointer-events: none; }
.sport-card__tier { position: absolute; z-index: 2; left: 12px; top: 64px; padding: 2px 8px; background: var(--ink); color: var(--yellow); font-size: .8125rem; font-weight: 700; pointer-events: none; }
.sport-card[data-category="Competitivo"] .sport-card__tier { background: var(--yellow); color: var(--ink); }
.sport-card__fav { position: absolute; z-index: 4; right: 6px; top: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; opacity: .45; padding: 0; }
.sport-card__fav .glyph { width: 22px; height: 22px; }
.sport-card__fav.active { opacity: 1; }
.sport-card__fav.active .glyph { fill: currentColor; }
/* brillo holográfico: solo en los tramos altos (la recompensa) */
.sport-card[data-tier="3"]::after, .sport-card[data-tier="4"]::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 46%, rgba(255,255,255,0) 58%); background-size: 240% 240%; background-position: var(--mx) var(--my); } /* taste-skill-ignore: brillo holográfico solo en cartas de nivel alto, excepción de dopamina documentada en DESIGN.md */
.sport-card[data-tier="4"]::after { opacity: .85; }
@media (hover: hover) and (pointer: fine) { .sport-card:not(.sport-card--compact):hover .sport-card__img { transform: translateY(-6px) rotate(-4deg) scale(1.04); } }
.card-deck--compact { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.sport-card--compact { aspect-ratio: auto; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px; border: 0; text-align: left;
  background: var(--paper-2); color: var(--muted); transform: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.sport-card--compact .sport-card__icon .glyph { width: 28px; height: 28px; }
.sport-card--compact .sport-card__name { position: static; font-family: var(--font-text); font-size: .9375rem; font-weight: 600; text-transform: none; line-height: 1.2; }
.sport-card__fav-dot { position: absolute; right: 8px; top: 8px; width: 10px; height: 10px; background: var(--ink); font-size: 0; }
@media (hover: hover) and (pointer: fine) { .sport-card--compact:hover { background: var(--cat); color: var(--cat-ink); } }
@media (prefers-reduced-motion: no-preference) {
  .card-enter { animation: deal 520ms var(--ease-out) both; }
}
@keyframes deal { from { opacity: 0; transform: translateY(24px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .card-deck { grid-template-columns: repeat(2, 1fr); }
  .card-deck--compact { grid-template-columns: repeat(3, 1fr); }
  .sport-card__level { font-size: 48px; }
  .sport-card__name { font-size: 22px; }
}

/* recomendación */
.banner--recommend { margin: 32px 0 0; padding: 0; }
.banner--recommend__title { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); line-height: .95; text-transform: uppercase; margin-bottom: 14px; max-width: 24ch; display: flex; align-items: center; gap: 12px; }
.banner--recommend__title .glyph { width: .9em; height: .9em; }

/* ============================================================
   PARTIDOS: el tablón (cada partido es un cartel)
   ============================================================ */
.view-toggle { margin-bottom: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filters .select { width: auto; min-width: 0; max-width: 100%; flex: 1 1 200px; }
.cards-grid { display: flex; flex-direction: column; gap: 6px; }
.fixture {
  position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr) auto auto; align-items: center; gap: 0 22px;
  min-height: 112px; background: var(--paper-2); color: var(--ink); transition: background-color var(--t-hover) ease;
}
.fixture__when { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px; background: var(--cat); color: var(--cat-ink); }
.fixture__time { font-family: var(--font-display); font-size: 44px; line-height: .86; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fixture__date { font-size: .875rem; font-weight: 600; text-transform: capitalize; }
.fixture__what { min-width: 0; padding: 14px 0; }
.fixture__open { display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; color: inherit; text-align: left; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 38px); line-height: .95; text-transform: uppercase; }
.fixture__open::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.fixture__open:focus-visible { outline: none; }
.fixture__open:focus-visible::after { outline: 4px solid var(--ink); outline-offset: -4px; }
.fixture__open .glyph { width: .8em; height: .8em; stroke-width: 2.4; }
.fixture__where { margin-top: 6px; font-size: .9375rem; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.fixture__where .glyph { width: 1.05em; height: 1.05em; }
.fixture__meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.fixture__meta .chip { min-height: 26px; padding: 2px 8px; font-size: .8125rem; background: var(--paper-3); }
.fixture__slots { display: flex; align-items: center; gap: 4px; }
.slot { width: 14px; height: 26px; background: var(--paper-3); }
.slot.is-taken { background: var(--ink); }
.fixture__count { margin-left: 8px; font-family: var(--font-display); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.fixture__act { position: relative; z-index: 1; padding-right: 16px; display: flex; gap: 6px; align-items: center; }
.fixture__act .chip { min-height: 44px; padding: 0 14px; }
.fixture--sos { background: var(--red); }
.fixture--sos .slot { background: rgba(20,20,20,.25); }
.fixture--sos .slot.is-taken { background: var(--ink); }
.fixture--sos .fixture__meta .chip { background: rgba(20,20,20,.14); }
.fixture__stamp { position: absolute; z-index: 1; top: -8px; right: 18px; padding: 4px 10px; background: var(--ink); color: var(--red); font-family: var(--font-display); font-size: 20px; line-height: 1; text-transform: uppercase; transform: rotate(-4deg); pointer-events: none; }
.fixture.is-joined .fixture__when { box-shadow: inset 6px 0 0 var(--ink); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
@media (hover: hover) and (pointer: fine) { .fixture:not(.fixture--sos):hover { background: var(--paper-3); } }
@media (max-width: 760px) {
  .fixture { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 16px; }
  .fixture__when { grid-row: 1 / span 2; padding: 12px 10px; }
  .fixture__time { font-size: 33px; }
  .fixture__what { padding: 14px 14px 0 0; }
  .fixture__slots { grid-column: 2; padding: 10px 0 14px; flex-wrap: wrap; }
  .fixture__act { grid-column: 1 / -1; grid-row: 3; padding: 0 14px 14px; }
  .fixture__act .btn, .fixture__act .chip { flex: 1; justify-content: center; }
  .slot { width: 12px; height: 22px; }
}

/* póster en vivo del asistente de crear partido */
.wizard-poster { position: relative; margin: 0 calc(-1 * var(--wiz-pad, 20px)) 20px; padding: 18px var(--wiz-pad, 20px) 20px; background: var(--cat, var(--ink)); color: var(--cat-ink, var(--paper)); min-height: 156px; overflow: hidden; transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.wizard-poster__glyph { position: absolute; right: 18px; top: 16px; opacity: .9; }
.wizard-poster__glyph .glyph { width: 56px; height: 56px; stroke-width: 1.6; }
.wizard-poster__sport { font-family: var(--font-display); font-size: clamp(38px, 7vw, 56px); line-height: .9; text-transform: uppercase; max-width: 80%; }
.wizard-poster__when { margin-top: 8px; font-family: var(--font-display); font-size: 26px; line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.wizard-poster__where { margin-top: 6px; font-weight: 600; font-size: .9375rem; min-height: 1.2em; }
.wizard-poster__slots { display: flex; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.wizard-poster__slots .slot { background: rgba(20,20,20,.2); }
.wizard-poster[data-category="Agua"] .wizard-poster__slots .slot, .wizard-poster[data-category="Competitivo"] .wizard-poster__slots .slot, .wizard-poster:not([data-category]) .wizard-poster__slots .slot { background: rgba(255,255,255,.22); }
.wizard-poster__slots .slot.is-taken { background: currentColor; }
.wizard-poster__stamp { position: absolute; right: 18px; bottom: 16px; padding: 4px 10px; background: var(--red); color: var(--ink); font-family: var(--font-display); font-size: 22px; text-transform: uppercase; transform: rotate(-5deg); }
.wizard-poster.is-bumped { animation: posterBump 380ms var(--ease-out); }
@keyframes posterBump { 0% { transform: none; } 40% { transform: translateY(-4px) rotate(-.6deg); } 100% { transform: none; } }

/* ============================================================
   MAPA
   ============================================================ */
.map-stage { position: relative; margin: 0 calc(-1 * var(--margin)); }
.map-container { width: 100%; height: min(72svh, 680px); min-height: 420px; position: relative; isolation: isolate; background: var(--paper-2); }
.map-container .leaflet-tile-pane { filter: grayscale(1) sepia(.18) contrast(1.06) brightness(1.02); }
.map-float { position: absolute; z-index: 500; left: var(--margin); top: 16px; max-width: min(420px, calc(100% - 2 * var(--margin))); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--shadow-float); } /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
.map-float__hint { font-size: .9375rem; font-weight: 500; }
#map-filter-panel { display: flex; flex-direction: column; gap: 10px; max-height: 42svh; overflow-y: auto; }
#map-filter-panel.hidden { display: none !important; }
.map-picker { width: 100%; height: 240px; margin-top: 8px; position: relative; isolation: isolate; background: var(--paper-2); }
.map-picker .leaflet-tile-pane { filter: grayscale(1) sepia(.18) contrast(1.06); }
.leaflet-container { font-family: var(--font-text); }
.leaflet-popup-content-wrapper { border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-float); } /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
.leaflet-popup-tip { background: var(--paper); }
.leaflet-popup-content { margin: 16px 18px; font-size: .9375rem; line-height: 1.4; }
.leaflet-bar a { border-radius: 0 !important; color: var(--ink); }
.map-popup__title { font-family: var(--font-display); font-size: 24px; line-height: 1; text-transform: uppercase; margin: 0 0 6px; }
.map-popup__meta { color: var(--muted); margin: 0 0 8px; }
.map-popup__sports { display: flex; flex-wrap: wrap; gap: 4px; }
.map-popup__sports .chip { cursor: pointer; }
.map-popup__sports .chip:hover { background: var(--green); }
.sm-pin { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--cat, var(--ink)); color: var(--cat-ink, var(--paper)); box-shadow: 0 6px 14px rgba(20,20,20,.35); } /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
.sm-pin .glyph { width: 20px; height: 20px; }
.sm-pin::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--cat, var(--ink)); border-bottom: 0; }
.sm-pin-wrap { background: none; border: 0; }
.sm-pin { position: relative; }
.map-pin-drop .sm-pin { animation: pinDrop 640ms var(--ease-out) both; animation-delay: inherit; }
@keyframes pinDrop { 0% { opacity: 0; transform: translateY(-36px); } 60% { opacity: 1; transform: translateY(4px); } 100% { transform: none; } }

/* ============================================================
   ESTADÍSTICAS
   ============================================================ */
.stats-grid-2 { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
@media (min-width: 900px) { .stats-grid-2 { grid-template-columns: 1fr 1fr; } }
.chart-card { padding: clamp(18px, 2.4vw, 28px); background: var(--paper-2); min-width: 0; }
.chart-card--wide { margin-top: 6px; }
.chart-card__title { font-family: var(--font-display); font-size: 28px; line-height: 1; text-transform: uppercase; margin: 0 0 16px; }
.chart-card svg text { fill: var(--ink); font-family: var(--font-text); font-size: 10px; }
.chart-card .radar-fill { fill: var(--green); fill-opacity: .55; stroke: var(--ink); stroke-width: 2; }
.chart-card .radar-grid { fill: none; stroke: var(--paper-3); stroke-width: 2; }
.chart-card .radar-dot { fill: var(--ink); }
.chart-card .radar-label .glyph-svg { stroke: var(--ink); }
.radar-grow-hint { color: var(--muted); font-size: .9375rem; margin-top: 8px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.donut-legend__row { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.donut-legend__row b { font-weight: 700; }
.donut-legend__dot { width: 14px; height: 14px; flex-shrink: 0; }
.elo-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.elo-legend__item { display: flex; align-items: center; gap: 8px; font-size: .9375rem; }
.elo-legend__dot { width: 14px; height: 14px; }
.heatmap-scroll { overflow-x: auto; padding-bottom: 8px; }
.heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 18px); gap: 3px; width: max-content; }
.heatmap-cell { width: 18px; height: 18px; background: var(--paper-3); display: flex; align-items: center; justify-content: center; }
.heatmap-cell--1 { background: rgba(24,188,66,.35); }
.heatmap-cell--2 { background: rgba(24,188,66,.65); }
.heatmap-cell--3 { background: var(--green); color: var(--ink); }
.heatmap-cell .glyph { width: 13px; height: 13px; stroke-width: 2.4; }
.heatmap-legend { margin-top: 12px; font-size: .9375rem; color: var(--muted); }
.percentile-block { margin-bottom: 18px; }
.percentile-block:last-child { margin-bottom: 0; }
.percentile-block__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9375rem; margin-bottom: 8px; }
.percentile-track { position: relative; height: 14px; background: var(--paper-3); }
.percentile-fill { height: 100%; background: var(--ink); transition: width 900ms var(--ease-out); }
.percentile-avg-mark { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 4px; background: var(--green); }
.rivalry-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.rivalry-row + .rivalry-row { box-shadow: inset 0 4px 0 var(--paper); padding-top: 16px; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.rivalry-row__name { flex: 1; font-weight: 600; }
.rivalry-row__record { font-family: var(--font-display); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.rivalry-row__record .w { color: var(--ink); }
.rivalry-row__record .l { color: var(--muted); }
.rivalry-row .glyph { width: 28px; height: 28px; }
.participant__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.muscle-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 14px; font-size: .9375rem; }
.muscle-legend__item { display: flex; align-items: center; gap: 8px; }
.muscle-legend__item.is-most-worked { font-weight: 700; }
.muscle-legend__dot { width: 14px; height: 14px; }
.muscle-zone rect, .muscle-zone { stroke: var(--ink); stroke-width: 1.5; }
.period-toggle { display: flex; box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.period-toggle__btn { min-height: 40px; padding: 0 12px; border: 0; background: transparent; font-weight: 600; font-size: .875rem; }
.period-toggle__btn.active { background: var(--ink); color: var(--paper); }
.wrapped-scroller { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.wrapped-card { flex: 0 0 min(86%, 380px); scroll-snap-align: start; padding: 24px; background: var(--green); color: var(--ink); }
.wrapped-card + .wrapped-card { background: var(--yellow); }
.wrapped-card__period { font-weight: 600; font-size: 1rem; }
.wrapped-card__big { font-family: var(--font-display); font-size: 120px; line-height: .86; margin-top: 8px; font-variant-numeric: tabular-nums; }
.wrapped-card__sub { margin: 8px 0 16px; font-weight: 600; }
.wrapped-card__row { display: flex; justify-content: space-between; padding: 8px 0; font-weight: 600; box-shadow: inset 0 3px 0 rgba(20,20,20,.15); font-variant-numeric: tabular-nums; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.wrapped-card--empty { background: var(--paper-2) !important; color: var(--muted); }
.accordion-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 56px; min-height: 72px; padding: 0 20px; border: 0; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); text-transform: uppercase; text-align: left; }
.accordion-toggle__chevron { transition: transform var(--t-ui) var(--ease-out); }
.accordion-toggle.open .accordion-toggle__chevron { transform: rotate(180deg); }
.accordion-body { padding: 20px 0; }
.svg-draw-in { stroke-dasharray: 2000; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .svg-draw-in { animation: drawLine 1.4s var(--ease-out) both; } }
@keyframes drawLine { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }

/* historial: filas de tablón */
.card { position: relative; padding: 18px 20px; background: var(--paper-2); }
.card__top { display: flex; align-items: center; gap: 14px; }
.card__sport-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); flex-shrink: 0; }
.card__sport-icon .glyph { width: 26px; height: 26px; }
.card__sport-name { font-family: var(--font-display); font-size: 28px; line-height: 1; text-transform: uppercase; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card__sport-name .chip { font-family: var(--font-text); text-transform: none; }
.card__loc { margin-top: 6px; font-size: .9375rem; }
.card__datetime { margin-top: 6px; font-size: .9375rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.card__actions { display: flex; gap: 8px; margin-top: 12px; }
.card--manual-log { background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper-2); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.outcome { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.outcome::before { content: ''; width: .7em; height: .7em; background: var(--paper-3); }
.outcome--victoria::before { background: var(--green); }
.outcome--derrota::before { background: var(--red); }
.outcome--empate::before { background: var(--ink); }

/* ============================================================
   AMIGOS, GRUPOS, LIGA, TORNEOS
   ============================================================ */
.friend-row, .search-row, .request-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--paper-2); }
.friend-row .participant__avatar, .search-row .participant__avatar, .request-row .participant__avatar { width: 48px; height: 48px; font-size: .9375rem; }
.friend-row__name, .search-row__name, .request-row__name { flex: 1 1 160px; font-weight: 600; font-size: 1.0625rem; min-width: 0; }
.search-row__username { color: var(--muted); font-weight: 500; }
.friend-row.just-accepted { animation: levelPop 700ms var(--ease-out); background: var(--green); }
.friend-star { display: inline-block; width: .6em; height: .6em; background: var(--green); font-size: 0; vertical-align: .1em; }
.group-row { padding: 16px; background: var(--paper-2); }
.group-row__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.group-row__name { flex: 1 1 160px; font-family: var(--font-display); font-size: 26px; line-height: 1; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.group-row__meta { color: var(--muted); font-weight: 600; }
.group-row__members { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.is-clickable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .is-clickable:hover { text-decoration: underline; text-underline-offset: .2em; } .participant__avatar.is-clickable:hover { outline: 3px solid var(--green); outline-offset: 2px; text-decoration: none; } }
.mode-toggle { display: inline-flex; box-shadow: inset 0 0 0 2px var(--ink); margin-bottom: 16px; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.mode-toggle__btn { min-height: 44px; padding: 0 16px; border: 0; background: transparent; font-weight: 600; }
.mode-toggle__btn.active { background: var(--ink); color: var(--paper); }
.table-wrap { overflow-x: auto; background: var(--paper); }
.league-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.league-table th { text-align: left; padding: 12px 14px; font-weight: 600; font-size: .9375rem; background: var(--ink); color: var(--paper); }
.league-table td { padding: 14px; font-size: 1.0625rem; box-shadow: inset 0 -3px 0 var(--paper-2); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.league-table tr.is-you td { background: var(--green); }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-family: var(--font-display); font-size: 22px; background: var(--paper-3); }
.rank-badge--1 { background: var(--yellow); }
.rank-badge--2 { background: var(--paper-3); }
.rank-badge--3 { background: var(--pink); }
.tournament-card { position: relative; padding: 18px 20px; background: var(--paper-2); cursor: pointer; }
.tournament-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tournament-card__name { font-family: var(--font-display); font-size: 28px; line-height: 1; text-transform: uppercase; }
.tournament-card__meta { color: var(--muted); margin-top: 4px; }
.card__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.round-block { margin-bottom: 20px; }
.round-block__title { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; margin-bottom: 8px; }
.bracket-match { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 6px; background: var(--paper-2); }
.bracket-match__players { display: flex; flex-direction: column; gap: 4px; }
.bracket-match__player--winner { font-weight: 700; box-shadow: inset 4px 0 0 var(--green); padding-left: 10px; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.bracket-match__bye { color: var(--muted); font-style: italic; }
.tournament-winner-banner { padding: 20px; margin-bottom: 16px; background: var(--yellow); font-family: var(--font-display); font-size: 28px; text-transform: uppercase; }
.tournament-players-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.tournament-player-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: var(--paper-2); font-weight: 500; }
.invite-code { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; margin-bottom: 16px; background: var(--paper-2); }
.invite-code code { flex: 1; background: none; overflow-x: auto; white-space: nowrap; font-weight: 600; }
.progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.progress { flex: 1; height: 14px; background: var(--paper-3); overflow: hidden; }
.progress__bar { height: 100%; background: var(--ink); transition: width 600ms var(--ease-out); }
.progress__label { font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; }
.invite-list { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--paper-2); }
.invite-row button { min-height: 40px; padding: 0 12px; border: 0; background: var(--paper-3); font-weight: 600; }
.invite-row__status--confirmed { background: var(--green) !important; }

/* ============================================================
   HOJAS (MODALES)
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 20, 20, .58); }
.modal__card {
  --wiz-pad: clamp(18px, 4vw, 28px);
  position: relative; width: 100%; max-width: 600px; max-height: 92vh; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px var(--wiz-pad) calc(28px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: var(--shadow-float); /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
}
@media (prefers-reduced-motion: no-preference) { .modal__card { animation: sheetUp 360ms var(--ease-out); } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.modal__card--sm { max-width: 460px; }
.modal__card--lg { max-width: 720px; }
.modal__card--center { text-align: center; }
@media (min-width: 720px) {
  .modal { align-items: center; padding: 24px; }
  @media (prefers-reduced-motion: no-preference) { .modal__card { animation: pop 260ms var(--ease-out); } }
}
@keyframes pop { from { transform: scale(.97) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.modal__head h3 { font-size: clamp(32px, 5vw, 44px); line-height: .92; }
.modal__x { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; margin: -6px -10px 0 0; padding: 0; border: 0; background: none; color: var(--ink); }
.modal__x .glyph { width: 26px; height: 26px; }
.modal__x--float { position: absolute; top: 12px; right: 16px; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .modal__x:hover { background: var(--paper-2); } }
.modal__row { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.modal__row .btn { flex: 1; }
.legal-text { font-size: 1rem; line-height: 1.6; max-height: 62vh; overflow-y: auto; }
.legal-text p { margin: 0 0 14px; }

/* asistente */
.wizard-steps { display: flex; gap: 4px; margin-bottom: 18px; }
.wizard-step-chip { flex: 1; height: 8px; background: var(--paper-3); font-size: 0; color: transparent; transition: background-color var(--t-ui) ease; }
.wizard-step-chip.active { background: var(--ink); }
.wizard-step-chip.done { background: var(--green); }
.wizard-pane { display: flex; flex-direction: column; gap: 16px; }
.wizard-pane__title { font-family: var(--font-display); font-size: clamp(36px, 6vw, 52px); line-height: .9; text-transform: uppercase; }
.wizard-nav { display: flex; gap: 8px; margin-top: 8px; position: sticky; bottom: calc(-28px - env(safe-area-inset-bottom)); padding: 12px 0 0; background: var(--paper); }
.wizard-nav .btn { flex: 1; min-height: 56px; }
.quick-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-chip { min-height: 48px; padding: 0 16px; border: 0; background: var(--paper-2); font-weight: 600; box-shadow: inset 0 0 0 2px var(--paper-3); transition: background-color var(--t-hover) ease; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.quick-chip.active { background: var(--ink); color: var(--paper); box-shadow: none; } /* taste-skill-ignore: box-shadow none (falso positivo del lint) */
.level-slider-row { display: flex; align-items: center; gap: 16px; }
.level-slider { flex: 1; accent-color: var(--ink); height: 44px; }
.level-slider__readout { font-family: var(--font-display); font-size: 40px; line-height: 1; min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.declare-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
.declare-preset-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px; border: 0; background: var(--paper-2); text-align: left; font-weight: 600; }
.declare-preset-btn span:last-child { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.declare-preset-btn.active { background: var(--ink); color: var(--paper); }
.sport-picker { position: relative; }
.sport-picker__results { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: var(--paper); box-shadow: var(--shadow-float); padding: 6px; } /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
.sport-picker__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; background: none; text-align: left; font-weight: 600; font-size: 1rem; }
.sport-picker__item:hover, .sport-picker__item:focus-visible { background: var(--paper-2); }
.sport-picker__item-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--cat, var(--ink)); color: var(--cat-ink, var(--paper)); }
.sport-picker__item-icon .glyph { width: 20px; height: 20px; }
.sport-picker__empty { padding: 12px; color: var(--muted); }

/* ficha de deporte, reglas, ruleta */
.sport-detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sport-detail-head__icon { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: var(--cat, var(--ink)); color: var(--cat-ink, var(--paper)); flex-shrink: 0; overflow: hidden; }
.sport-detail-head__icon img { width: 120%; height: auto; max-width: none; }
.sport-detail-head__icon .glyph { width: 48px; height: 48px; }
.sport-detail-head__nivel { font-family: var(--font-display); font-size: 64px; line-height: .86; font-variant-numeric: tabular-nums; }
.sport-detail-head .sport-card__fav { position: relative; opacity: 1; background: var(--paper-2) !important; color: var(--ink) !important; }
.sport-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sport-detail-actions .btn { flex: 1 1 180px; }
.sport-history-list { display: flex; flex-direction: column; gap: 4px; }
.sport-history-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--paper-2); font-size: .9375rem; }
.sport-history-row__badge { padding: 2px 8px; font-weight: 700; font-size: .8125rem; background: var(--paper-3); }
.sport-history-row__badge--victoria { background: var(--green); }
.sport-history-row__badge--derrota { background: var(--red); }
.sport-history-row__badge--empate { background: var(--ink); color: var(--paper); }
.routine-pill-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.routine-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px; background: var(--paper-2); }
.routine-pill__name { font-weight: 700; }
.routine-pill__meta { color: var(--muted); font-size: .9375rem; }
.routine-pill__actions { display: flex; gap: 6px; }
.rules-card { padding: 16px; background: var(--paper-2); margin-top: 12px; text-align: left; }
.rules-title-line { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 28px; line-height: 1; text-transform: uppercase; margin-bottom: 10px; }
.rules-meta-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; }
.rules-text { font-size: 1rem; line-height: 1.55; }
.rules-badge-new { display: inline-block; padding: 4px 10px; background: var(--green); font-weight: 700; font-size: .875rem; }
.roulette-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0; }
.roulette-stage { position: relative; width: 260px; height: 260px; }
.roulette-pointer { position: absolute; z-index: 2; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 22px solid var(--ink); }
.roulette-wheel { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; transition: transform 3.2s cubic-bezier(.12,.72,.14,1); display: flex; align-items: center; justify-content: center; }
.roulette-wheel svg { width: 100%; height: 100%; }
.roulette-wheel svg .glyph-svg { stroke: var(--ink); }
.roulette-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; }
.roulette-hub .glyph { width: 30px; height: 30px; }
#roulette-hub.landed { animation: hubLand 500ms var(--ease-out); background: var(--green); color: var(--ink); }
@keyframes hubLand { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.35); } 100% { transform: translate(-50%, -50%) scale(1); } }
.roulette-result { text-align: center; opacity: 0; transform: translateY(8px); transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.roulette-result.show { opacity: 1; transform: none; }
.random-name { font-family: var(--font-display); font-size: 48px; line-height: .9; text-transform: uppercase; }
.random-category { margin-top: 6px; font-weight: 600; color: var(--muted); }
.random-filters-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; max-height: 360px; overflow-y: auto; }
.random-filter-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; background: var(--paper-2); font-weight: 600; cursor: pointer; }
.random-filter-row input { width: 22px; height: 22px; accent-color: var(--ink); }
.random-filter-row__swatch { width: 18px; height: 18px; flex-shrink: 0; }

/* ajustes y guía */
.settings-section-title { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; margin: 28px 0 10px; }
.settings-section-title--danger { color: var(--ink); box-shadow: inset 0 -6px 0 var(--red); display: inline-block; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.settings-inline-form { display: flex; gap: 8px; }
.settings-inline-form input, .settings-stack-form input { min-height: 48px; padding: 10px 14px; border: 0; background: var(--paper-2); box-shadow: inset 0 -3px 0 var(--ink); outline: none; font-size: 1rem; } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.settings-inline-form input:focus-visible, .settings-stack-form input:focus-visible { background-color: var(--paper-3); box-shadow: inset 0 -5px 0 var(--green); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.settings-inline-form input { flex: 1; min-width: 0; }
.settings-stack-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.settings-stack-form input { width: 100%; }
.settings-notif-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.onboarding-step { text-align: left; padding: 8px 0; }
.onboarding-step__glyph { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: var(--green); margin-bottom: 18px; }
.onboarding-step__glyph .glyph { width: 46px; height: 46px; }
.onboarding-step__title { font-family: var(--font-display); font-size: clamp(32px, 6vw, 48px); line-height: .92; text-transform: uppercase; margin-bottom: 12px; }
.onboarding-step__body { font-size: 1.0625rem; line-height: 1.55; max-width: 52ch; }

/* detalle de partido */
.detail-hero { margin: -20px calc(-1 * var(--wiz-pad)) 18px; padding: 20px var(--wiz-pad); background: var(--cat, var(--ink)); color: var(--cat-ink, var(--paper)); position: relative; overflow: hidden; min-height: 168px; }
.detail-hero__img { position: absolute; right: -6%; top: -10%; width: 46%; max-width: 260px; pointer-events: none; }
.detail-hero__time { font-family: var(--font-display); font-size: clamp(56px, 10vw, 84px); line-height: .86; font-variant-numeric: tabular-nums; position: relative; }
.detail-hero__date { font-weight: 600; text-transform: capitalize; position: relative; margin-top: 4px; }
.detail-hero__where { position: relative; margin-top: 10px; font-weight: 600; display: flex; align-items: center; gap: 6px; max-width: 60%; }
.detail-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; font-size: 1rem; }
.detail-info p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-participants { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.participant { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: var(--paper-2); font-size: .9375rem; }
.participant p { font-weight: 600; }
.participant.is-you { background: var(--green); }
.participant.is-friend .participant__avatar { box-shadow: 0 0 0 3px var(--green); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.participant__rep { font-size: .8125rem; color: var(--muted); margin-left: 4px; }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.star { background: none; border: 0; padding: 0 1px; font-size: 16px; line-height: 1; color: var(--paper-3); }
.star.on { color: var(--ink); }
.stars--input .star { font-size: 30px; min-width: 40px; min-height: 44px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.detail-actions .btn { flex: 1 1 200px; min-height: 56px; }
.detail-close-hint { color: var(--muted); font-size: .9375rem; }
.chat { margin-top: 24px; padding-top: 18px; box-shadow: inset 0 6px 0 var(--paper-2); } /* taste-skill-ignore: trazo interior/anillo, no es una sombra */
.chat__title { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; margin-bottom: 12px; }
.chat__thread { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; }
.chat__msg { max-width: 84%; padding: 10px 12px; background: var(--paper-2); font-size: .9375rem; }
.chat__msg--me { align-self: flex-end; background: var(--ink); color: var(--paper); }
.chat__msg-author { font-weight: 700; font-size: .8125rem; margin-bottom: 2px; }
.chat__msg-author--me { color: var(--green); }
.chat__empty, .chat__locked { color: var(--muted); padding: 12px; background: var(--paper-2); }
.chat__form { display: flex; gap: 8px; }
.chat__form input { flex: 1; min-width: 0; }
.team-block { margin-top: 20px; }
.team-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.team-col { padding: 14px; background: var(--paper-2); }
.team-col:first-child { background: var(--yellow); }
.team-col:last-child { background: var(--cyan); }
.team-col__label { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; margin-bottom: 8px; }
.team-col__player { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 500; }
.team-col__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 700; overflow: hidden; }
.team-form-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mvp-vote-block { margin-top: 16px; }
.mvp-vote-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mvp-vote-chip { min-height: 44px; border: 0; cursor: pointer; }
.mvp-vote-chip.active { background: var(--ink); color: var(--paper); }
.rate-list { display: flex; flex-direction: column; gap: 6px; }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--paper-2); }
.rate-row__name { font-weight: 600; }
.rate-row__comment { width: 100%; }

/* ============================================================
   AVISOS, CELEBRACIONES, MOVIMIENTO
   ============================================================ */
.toast {
  position: fixed; z-index: 120; left: 50%; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 2 * var(--margin))); padding: 14px 18px; background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: var(--shadow-float); /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
}
@media (prefers-reduced-motion: no-preference) { .toast { animation: toastIn 320ms var(--ease-out); } }
@keyframes toastIn { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast--achv { background: var(--yellow); color: var(--ink); }
@media (min-width: 1024px) { .toast { bottom: 24px; left: calc(50% + var(--rail-w) / 2); } }
#confetti-canvas { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.celebration-overlay { position: fixed; inset: 0; z-index: 140; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#celebration-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.celebration-overlay__badge { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(88vw, 460px); padding: 28px; background: var(--green); color: var(--ink); box-shadow: var(--shadow-float); opacity: 0; transform: scale(.6) rotate(-8deg); } /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
.celebration-overlay__icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--green); }
.celebration-overlay__icon .glyph { width: 40px; height: 40px; }
.celebration-overlay__title { font-family: var(--font-display); font-size: clamp(48px, 10vw, 76px); line-height: .88; text-transform: uppercase; }
.celebration-overlay__sub { font-weight: 600; font-size: 1.0625rem; }
.celebration-overlay__badge.show { opacity: 1; transform: rotate(-3deg); transition: opacity 200ms ease, transform 560ms cubic-bezier(.2, 1.4, .4, 1); }
.celeb-in--2.show, .celeb-in--7.show { background: var(--yellow); }
.celeb-in--3.show, .celeb-in--8.show { background: var(--cyan); }
.celeb-in--4.show, .celeb-in--9.show { background: var(--pink); }
.celeb-in--5.show, .celeb-in--10.show { background: var(--paper); }
.celeb-in--2.show .celebration-overlay__icon, .celeb-in--7.show .celebration-overlay__icon { color: var(--yellow); }
.celebration-overlay__badge.is-milestone { background: var(--ink); color: var(--paper); }
.celebration-overlay__badge.is-milestone .celebration-overlay__icon { background: var(--yellow); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .celebration-overlay__badge.show { transform: none; transition: opacity 200ms ease; } }
.ticket-stamp { position: fixed; inset: 0; z-index: 140; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.ticket-stamp__card { display: flex; align-items: center; gap: 16px; padding: 20px 28px; background: var(--ink); color: var(--paper); opacity: 0; transform: scale(2) rotate(-12deg); box-shadow: var(--shadow-float); } /* taste-skill-ignore: capa flotante real (panel, hoja, toast, pin de mapa) */
.ticket-stamp__card.show { animation: slam 1200ms var(--ease-out) both; }
@keyframes slam { 0% { opacity: 0; transform: scale(2) rotate(-12deg); } 22% { opacity: 1; transform: scale(.94) rotate(-4deg); } 32% { transform: scale(1) rotate(-4deg); } 80% { opacity: 1; transform: scale(1) rotate(-4deg); } 100% { opacity: 0; transform: scale(1) rotate(-4deg) translateY(-20px); } }
.ticket-stamp__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--ink); }
.ticket-stamp__icon .glyph { width: 32px; height: 32px; }
.ticket-stamp__title { font-family: var(--font-display); font-size: 44px; line-height: .9; text-transform: uppercase; }
.challenge-fly { position: fixed; z-index: 150; pointer-events: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--ink); animation: fly 800ms var(--ease-out) forwards; }
.challenge-fly .glyph { width: 18px; height: 18px; }
@keyframes fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(28px, -84px) scale(.5) rotate(20deg); opacity: 0; } }
.shake { animation: shakeX 420ms; }
@keyframes shakeX { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.btn.is-rippling { animation: press 260ms var(--ease-out); }
@keyframes press { 40% { transform: scale(.95); } 100% { transform: none; } }

/* entradas de la portada (solo si hay JS: sin él todo se ve desde el principio) */
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(108%); animation: lineIn 980ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 120ms + 180ms); }
  .js .lnd-hero__ball-wrap { animation: ballIn 1200ms var(--ease-out) 380ms both; }
  .lnd-hero__ball { animation: bob 6s ease-in-out 1.6s infinite; }
  .js .lnd-hero__foot, .js .lnd-nav { animation: rise 800ms var(--ease-out) 620ms both; }
  .lnd-search__bg { animation: drift 26s ease-in-out infinite alternate; }
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 760ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .lnd-sos__pic img { transform: rotate(-24deg) translateX(18%); opacity: 0; transition: transform 1200ms var(--ease-out), opacity 600ms ease; }
  .js .lnd-sos__pic.is-in img { transform: rotate(-9deg); opacity: 1; }
  .js .fig__pic { transform: translateY(18%) rotate(-12deg); transition: transform 1100ms var(--ease-out); }
  .js .fig.is-in .fig__pic { transform: none; }
  .js .ans-row { animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
}
@keyframes lineIn { to { transform: none; } }
@keyframes ballIn { 0% { transform: translateY(-60%) rotate(-40deg); opacity: 0; } 55% { transform: translateY(6%) rotate(4deg); opacity: 1; } 75% { transform: translateY(-3%) rotate(-2deg); } 100% { transform: none; opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2.5%) rotate(3deg); } }
@keyframes drift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.1) translateX(-2%); } }

/* transición entre vistas (API View Transitions donde exista) */
::view-transition-old(root) { animation: 220ms var(--ease-out) both vtOut; }
::view-transition-new(root) { animation: 380ms var(--ease-out) both vtIn; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* asistente: los atajos de fecha ocupan la fila entera */
.modal .field-row:has(#date-quick-row) { grid-template-columns: 1fr; }
.chapter__invite { position: relative; z-index: 2; align-self: flex-start; }

/* auditoría guidelines: contención de scroll en paneles y listas internas */
.notif-panel, #map-filter-panel, .sport-picker__results, .chat__thread, .random-filters-list { overscroll-behavior: contain; }
.sport-picker__item:focus-visible { outline-offset: -3px; }
@media (hover: hover) {
  .seg:hover, .auth__tab:hover, .period-toggle__btn:hover, .mode-toggle__btn:hover, .quick-chip:hover, .declare-preset-btn:hover, .accordion-toggle:hover { background-color: var(--paper-3); }
  .password-toggle:hover, .auth__back:hover, .link-btn:hover, .link-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
  .notif-row:hover, .chip-picker__item:hover, .tournament-card:hover { filter: brightness(.96); }
}

/* Números sin datos: un solo cartel en vez de una pared de tarjetas vacías */
.chart-card.is-locked { display: none; }
.stats-grid-2:has(> .is-locked) > .chart-card:not(.is-locked):not(.hidden) { grid-column: 1 / -1; }
.stats-locked { margin-top: 6px; padding: clamp(24px, 4vw, 48px); background: var(--ink); color: var(--paper); --focus-ring: var(--green); }
.stats-locked__title { font-family: var(--font-display); font-size: var(--step-head); line-height: 1; text-transform: uppercase; margin: 0; }
.stats-locked__lead { margin: 10px 0 24px; color: var(--paper); max-width: 48ch; }
.stats-locked__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 2px; }
.stats-locked__list li { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 18px; border-top: 2px solid #2c2c2c; padding-right: 24px; }
.stats-locked__name { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.05; text-transform: uppercase; color: var(--yellow); }
.stats-locked__hint { font-size: 1rem; line-height: 1.45; color: #d9d3c5; }

.star .glyph--fill, .friend-star .glyph--fill { width: 1em; height: 1em; fill: currentColor; stroke: none; vertical-align: -0.12em; }

/* ===== v3: escala compacta, densidad y componentes nuevos ===== */
:root {
  --step-body: 15px; --step-small: 13px; --step-lead: 15px;
  --step-chapter: clamp(28px, 4.2vw, 56px);
  --margin: clamp(14px, 2.2vw, 32px);
  --nav-h: 56px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
}
body { font-size: 15px; }
.chapter { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; min-height: 0; margin-bottom: 16px; padding: 14px var(--margin); }
.chapter__title { font-size: var(--step-chapter); line-height: 1; max-width: none; }
.chapter__lead { font-size: 15px; line-height: 1.3; max-width: 46ch; flex: 1 1 200px; }
.chapter__render { width: clamp(56px, 9vw, 96px); right: var(--margin); top: 50%; transform: translateY(-50%) rotate(-7deg); opacity: .95; }
.chapter__action { align-self: center; margin-top: 0; }
.chapter__num { font-size: clamp(44px, 6vw, 72px); }
.chapter__cap { font-size: 15px; }
.chapter__figure { margin-top: 0; gap: 8px; }
#hero-name { font-size: var(--step-chapter); max-width: none; }
.xp-badge { font-size: clamp(36px, 5vw, 56px); }
.block-head { margin: 24px 0 10px; }
.block-head h2 { font-size: clamp(24px, 3vw, 36px); }
.block-head h3 { font-size: clamp(20px, 2.4vw, 28px); }
.block-head--album { margin-top: 28px; }
.chapter--matches { min-height: 0; }
@media (min-width: 900px) { .chapter { max-height: 128px; } .chapter--profile { max-height: none; } }
@media (max-width: 899px) { .chapter:not(.chapter--profile) { max-height: 88px; } }

/* botones: pequenos y con mas caracter */
.btn { font-size: 14px; letter-spacing: .02em; }
.btn--sm { min-height: 44px; padding: 0 12px; font-size: 13px; }
.btn--lg { min-height: 48px; padding: 0 20px; }
.btn:not(.btn--ghost):not(.btn--danger) { box-shadow: inset 0 -3px 0 rgba(20,20,20,.28); } /* taste-skill-ignore: trazo interior, no es sombra */
.btn:active { transform: translateY(1px) scale(.98); }
.chip-option { min-height: 36px; padding: 0 12px; font-size: 13px; }
.chip-option .glyph { width: 1em; height: 1em; }

/* arena */
.chapter--arena { position: relative; min-height: 112px; overflow: hidden; }
@media (min-width: 900px) { .chapter--arena { min-height: 144px; max-height: none; } }
@media (max-width: 899px) { .chapter--arena { max-height: none; } }
.arena__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.arena__bg svg { width: 100%; height: 100%; display: block; }
.arena__obj { position: absolute; left: 0; top: 0; z-index: 1; width: 56px; height: 56px; pointer-events: none; will-change: transform; }
.arena__count { position: absolute; right: var(--margin); bottom: 6px; z-index: 2; font-family: var(--font-display); font-size: 22px; opacity: 0; transition: opacity .2s; }
.arena__count.is-on { opacity: 1; }
.chapter--arena .chapter__title, .chapter--arena .chapter__lead, .chapter--arena .chapter__action { position: relative; z-index: 2; }
.is-shake { animation: arenaShake .28s ease; }
@keyframes arenaShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* filtros */
.filterbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sportsearch { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px; background: var(--paper-2); }
.sportsearch input { flex: 1 1 140px; min-width: 0; min-height: 36px; border: 0; background: none; font: inherit; font-size: 15px; outline: none; }
.sportsearch:focus-within { outline: 3px solid var(--ink); outline-offset: -3px; }
.sportsearch__results { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 240px; overflow-y: auto; background: var(--paper); box-shadow: var(--shadow-float); } /* taste-skill-ignore: capa flotante real */
.sportsearch__results[hidden] { display: none; }
.sportsearch__item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sportsearch__item:hover, .sportsearch__item[aria-selected="true"], .sportsearch__item:focus-visible { background: var(--yellow); outline: none; }
.chip--sport { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; border: 0; }
.chip--ok { background: var(--green); color: var(--ink); }
.filterbar__scroll { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filterbar__scroll::-webkit-scrollbar { display: none; }
.filterbar__scroll > * { flex-shrink: 0; }
.chip-group--bar { flex-wrap: nowrap; }
.filterbar__sep { width: 2px; align-self: stretch; background: var(--ink); opacity: .2; }
.chip-option--sos.active { background: var(--red); color: var(--ink); }
.chip-option--clear { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore: anillo */
@media (min-width: 900px) { .filterbar__scroll { flex-wrap: wrap; overflow: visible; } }

/* lista: filas compactas */
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: stretch; }
@media (min-width: 1200px) { .cards-grid { grid-template-columns: 1fr 1fr; gap: 6px 12px; } }
.day-sep { grid-column: 1 / -1; position: sticky; top: 0; z-index: 5; margin: 8px 0 0; padding: 6px 4px; background: var(--paper); font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.fixture { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 10px; min-height: 68px; max-height: none; overflow: hidden; }
.fixture__when { padding: 8px 6px; gap: 2px; align-items: center; text-align: center; }
.fixture__time { font-size: 26px; }
.fixture__date { font-size: 11px; }
.fixture__what { padding: 8px 0; }
.fixture__open { font-size: 20px; gap: 6px; }
.fixture__where { margin-top: 2px; font-size: 13px; background: none; border: 0; padding: 4px 0; min-height: 28px; text-align: left; cursor: pointer; color: inherit; max-width: 100%; position: relative; z-index: 1; }
.fixture__where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.fixture__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fixture__meta { margin-top: 0; }
.fixture__count { font-size: 18px; margin-left: 6px; }
.fixture__act { padding-right: 8px; }
.fixture__act .chip, .fixture__act .btn { min-height: 44px; padding: 0 12px; font-size: 13px; }
.fixture__ribbon { position: absolute; z-index: 2; top: 8px; right: -26px; width: 100px; padding: 2px 0; background: var(--red); color: var(--ink); font-family: var(--font-display); font-size: 11px; text-align: center; text-transform: uppercase; transform: rotate(35deg); pointer-events: none; }
.fixture__stamp { top: 0; right: 8px; font-size: 11px; padding: 2px 8px; }

/* navegacion inferior 56px */
.tabs { padding-bottom: env(safe-area-inset-bottom); }
.tabs__ink { height: var(--nav-h); }
.tab { gap: 0; font-size: 12px; }
.tab .glyph { width: 22px; height: 22px; }
.tab .tab__label { display: none; }
.tab.active .tab__label { display: block; font-size: 12px; }
@media (min-width: 900px) { .tab .tab__label { display: block; } }

/* amigos */
.seg { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.seg__btn { flex: 1 0 auto; min-height: 44px; padding: 0 14px; border: 0; background: var(--paper-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg__btn[aria-selected="true"], .seg__btn.active { background: var(--ink); color: var(--paper); }
.seg__btn:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.suggest-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.suggest-card { flex: 0 0 120px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--paper-2); text-align: center; }
.suggest-card .avatar { width: 52px; height: 52px; }
.suggest-card__name { font-weight: 600; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* valoraciones */
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.rating__n { font-weight: 700; font-variant-numeric: tabular-nums; }
.star--half { position: relative; }
.star--cut { clip-path: inset(0 50% 0 0); }

/* avisos */
.notice { padding: 10px 12px; font-size: 14px; line-height: 1.35; background: var(--paper-2); border-left: 6px solid var(--ink); margin: 8px 0; }
.notice--info { border-color: var(--blue); }
.notice--warn { border-color: var(--red); background: rgba(220,60,40,.1); }
.notice--muted { border-color: var(--muted); color: var(--muted); }
.notice--ok { border-color: var(--green); }

/* flujo de resultado */
.rf-q { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; line-height: 1; margin: 4px 0 14px; }
.rf-lab { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.rf-big { display: flex; gap: 8px; }
.rf-big .btn { flex: 1; min-height: 56px; }
.rf-score { display: flex; align-items: center; gap: 10px; }
.rf-score input { width: 72px; min-height: 52px; text-align: center; font-family: var(--font-display); font-size: 28px; }
.rf-sets { display: flex; flex-direction: column; gap: 6px; }
.rf-set { display: flex; align-items: center; gap: 8px; }
.rf-set input { width: 56px; min-height: 44px; text-align: center; }
.rf-result { padding: 18px 14px; text-align: center; font-family: var(--font-display); font-size: 34px; line-height: 1; text-transform: uppercase; }
.rf-result.win { background: var(--green); }
.rf-result.lose { background: var(--blue); color: var(--white); }
.rf-level { margin-top: 10px; font-weight: 600; text-align: center; }
.rf-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chip-group--wrap { flex-wrap: wrap; }
.rate-row--compact { padding: 6px 0; }
@media (prefers-reduced-motion: no-preference) {
  .rf-result.win { animation: rfPop .5s var(--ease-out); }
  .rf-result.lose.rf-soft { animation: rfSoft .6s ease-out; }
}
@keyframes rfPop { 0% { transform: scale(.85); } 60% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes rfSoft { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* fotos */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 600px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo { position: relative; aspect-ratio: 1; background: var(--paper-3); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__toggle { position: absolute; right: 4px; bottom: 4px; min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: var(--ink); color: var(--paper); font-size: 12px; cursor: pointer; }
.photo.is-hidden img { opacity: .25; filter: grayscale(1); }

/* lugar, mapa, equipos */
.place-map { height: 220px; width: 100%; background: var(--paper-3); margin-bottom: 10px; }
.place-sub { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.detail-hero__where { background: none; border: 0; padding: 4px 0; min-height: 44px; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.team-stats { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 14px; margin: 6px 0; }
.team-col__lvl { font-family: var(--font-display); font-size: 20px; }
.sm-pin__n { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--green); color: var(--ink); font-family: var(--font-display); font-size: 12px; line-height: 20px; text-align: center; }
.sm-pin--count { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--ink); font-family: var(--font-display); font-size: 16px; }
.map-popup__list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.map-popup__match { min-height: 44px; padding: 4px 8px; border: 0; background: var(--paper-2); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.map-empty { padding: 16px; text-align: center; font-size: 14px; color: var(--muted); }

/* hojas inferiores */
.modal__card { --wiz-pad: 16px; padding: 16px var(--wiz-pad) calc(20px + env(safe-area-inset-bottom)); }
.modal__head h3 { font-size: clamp(24px, 4vw, 32px); }
.modal__row { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .arena__obj, .is-shake { animation: none !important; }
  * { scroll-behavior: auto !important; }
}


/* ===== v5: escala global (generado del barrido de las reglas antiguas; solo dentro de la app) ===== */
body[data-screen="app"] h1,
body[data-screen="app"] h2,
body[data-screen="app"] h3 { text-transform:none; }
body[data-screen="app"] .btn { font-size:14px; }
body[data-screen="app"] .btn--lg { padding:0 24px; }
body[data-screen="app"] select.select { padding-right:24px; }
body[data-screen="app"] .select--sm { padding:8px 24px 8px 12px; }
body[data-screen="app"] .empty { padding:24px 0; }
body[data-screen="app"] .poster-list__name { font-size:20px; text-transform:none; }
body[data-screen="app"] .poster-list__fact { font-size:14px; }
body[data-screen="app"] .poster-list__name { font-size:20px; }
body[data-screen="app"] .ui-dialog { padding:24px; }
body[data-screen="app"] .ui-dialog__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .ui-dialog__field { font-size:14px; }
body[data-screen="app"] .ui-dialog__field input { font-size:14px; }
body[data-screen="app"] .seg { font-size:14px; }
body[data-screen="app"] .password-wrap input { padding-right:24px; }
body[data-screen="app"] .tabs__brand { padding:0 24px 24px; font-size:20px; }
body[data-screen="app"] .topbar__mark { font-size:20px; }
body[data-screen="app"] .topbar__mark { font-size:16px; }
body[data-screen="app"] .notif-badge { font-weight:600; }
body[data-screen="app"] .notif-panel__head { font-size:16px; text-transform:none; }
body[data-screen="app"] .wrap { padding:0 var(--margin) 24px; }
body[data-screen="app"] .chapter { min-height:0; margin:0 calc(-1 * var(--margin)) 24px; padding:24px var(--margin) 24px; }
body[data-screen="app"] .chapter__title { font-size:20px; }
body[data-screen="app"] .chapter__lead { font-size:20px; }
body[data-screen="app"] .chapter__num { font-size:28px; }
body[data-screen="app"] .chapter__cap { font-size:20px; }
body[data-screen="app"] .chapter__stamp { font-size:20px; text-transform:none; }
body[data-screen="app"] .chapter { min-height:0; }
body[data-screen="app"] .chapter--matches { min-height:0; }
body[data-screen="app"] .block-head { margin:24px 0 18px; }
body[data-screen="app"] .block-head h2 { font-size:20px; }
body[data-screen="app"] .block-head h3 { font-size:20px; }
body[data-screen="app"] .hero__avatar { font-size:20px; }
body[data-screen="app"] .avatar-tier-badge { font-weight:600; }
body[data-screen="app"] #hero-name { font-size:20px; }
body[data-screen="app"] .hero__streak { font-size:14px; }
body[data-screen="app"] .xp-badge { font-size:28px; }
body[data-screen="app"] .flame-card__value { font-size:28px; text-transform:none; }
body[data-screen="app"] .flame-card__value { font-size:28px; }
body[data-screen="app"] .stat-grid { gap:24px 24px; margin-top:24px; }
body[data-screen="app"] .stat-card__value { font-size:28px; }
body[data-screen="app"] .achv__name { font-size:20px; text-transform:none; }
body[data-screen="app"] .block-head--album { margin-top:24px; }
body[data-screen="app"] .pokedex-search { padding:12px 14px 12px 24px; }
body[data-screen="app"] .pokedex { gap:24px; }
body[data-screen="app"] .pokedex__section-title { font-size:20px; text-transform:none; }
body[data-screen="app"] .pokedex__empty { padding:24px; }
body[data-screen="app"] .sport-card__level { font-size:28px; }
body[data-screen="app"] .sport-card__name { font-size:20px; text-transform:none; }
body[data-screen="app"] .sport-card__tier { font-weight:600; }
body[data-screen="app"] .sport-card__name { font-size:16px; }
body[data-screen="app"] .banner--recommend { margin:24px 0 0; }
body[data-screen="app"] .banner--recommend__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .fixture__time { font-size:28px; }
body[data-screen="app"] .fixture__open { font-size:20px; text-transform:none; }
body[data-screen="app"] .fixture__count { font-size:28px; }
body[data-screen="app"] .fixture__stamp { font-size:16px; text-transform:none; }
body[data-screen="app"] .wizard-poster__sport { font-size:20px; text-transform:none; }
body[data-screen="app"] .wizard-poster__when { font-size:20px; text-transform:none; }
body[data-screen="app"] .wizard-poster__stamp { font-size:16px; text-transform:none; }
body[data-screen="app"] .map-popup__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .chart-card { padding:18px; }
body[data-screen="app"] .chart-card__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .donut-legend__row b { font-weight:600; }
body[data-screen="app"] .rivalry-row__record { font-size:20px; }
body[data-screen="app"] .participant__avatar { font-weight:600; }
body[data-screen="app"] .muscle-legend__item.is-most-worked { font-weight:600; }
body[data-screen="app"] .wrapped-card__big { font-size:28px; }
body[data-screen="app"] .accordion-toggle { margin-top:24px; font-size:20px; text-transform:none; }
body[data-screen="app"] .card__sport-name { font-size:20px; text-transform:none; }
body[data-screen="app"] .outcome { font-weight:600; }
body[data-screen="app"] .friend-row__name,
body[data-screen="app"] .search-row__name,
body[data-screen="app"] .request-row__name { font-size:14px; }
body[data-screen="app"] .group-row__name { font-size:20px; text-transform:none; }
body[data-screen="app"] .league-table td { font-size:14px; }
body[data-screen="app"] .rank-badge { font-size:16px; }
body[data-screen="app"] .tournament-card__name { font-size:20px; text-transform:none; }
body[data-screen="app"] .round-block__title { font-size:16px; text-transform:none; }
body[data-screen="app"] .bracket-match__player--winner { font-weight:600; }
body[data-screen="app"] .tournament-winner-banner { font-size:20px; text-transform:none; }
body[data-screen="app"] .progress__label { font-size:20px; }
body[data-screen="app"] .modal__card { padding:20px var(--wiz-pad) calc(24px + env(safe-area-inset-bottom)); }
body[data-screen="app"] .modal__head h3 { font-size:20px; }
body[data-screen="app"] .wizard-pane__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .level-slider__readout { font-size:28px; }
body[data-screen="app"] .declare-preset-btn span:last-child { font-size:20px; }
body[data-screen="app"] .sport-detail-head__nivel { font-size:28px; }
body[data-screen="app"] .sport-history-row__badge { font-weight:600; }
body[data-screen="app"] .routine-pill__name { font-weight:600; }
body[data-screen="app"] .random-name { font-size:20px; text-transform:none; }
body[data-screen="app"] .settings-section-title { font-size:20px; text-transform:none; margin:24px 0 10px; }
body[data-screen="app"] .onboarding-step__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .onboarding-step__body { font-size:14px; }
body[data-screen="app"] .detail-hero__time { font-size:28px; }
body[data-screen="app"] .stars--input .star { font-size:20px; }
body[data-screen="app"] .chat__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .chat__msg-author { font-weight:600; }
body[data-screen="app"] .team-col__label { font-size:20px; text-transform:none; }
body[data-screen="app"] .team-col__avatar { font-weight:600; }
body[data-screen="app"] .celebration-overlay__badge { padding:24px; }
body[data-screen="app"] .celebration-overlay__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .celebration-overlay__sub { font-size:14px; }
body[data-screen="app"] .ticket-stamp__card { padding:20px 24px; }
body[data-screen="app"] .ticket-stamp__title { font-size:20px; text-transform:none; }
body[data-screen="app"] .stats-locked { padding:24px; }
body[data-screen="app"] .stats-locked__title { font-size:28px; text-transform:none; }
body[data-screen="app"] .stats-locked__name { font-size:16px; text-transform:none; }
body[data-screen="app"] .arena__count { font-size:16px; }
body[data-screen="app"] .day-sep { font-size:16px; text-transform:none; }
body[data-screen="app"] .fixture__open { font-size:16px; }
body[data-screen="app"] .fixture__count { font-size:16px; }
body[data-screen="app"] .rating__n { font-weight:600; }
body[data-screen="app"] .rf-q { font-size:20px; text-transform:none; }
body[data-screen="app"] .rf-score input { font-size:28px; }
body[data-screen="app"] .rf-result { font-size:20px; text-transform:none; }
body[data-screen="app"] .team-col__lvl { font-size:16px; }

/* ============================================================
   v4 — TINTE PROFUNDO
   Degradado azul-índigo, superficies de vidrio, Outfit/Work Sans,
   color por deporte, botones pequeños en píldora. Solo dentro de la
   app (body[data-screen="app"]); acceso y registro no cambian.
   ============================================================ */
@font-face { font-family: 'Outfit'; src: local('Outfit'), local('Outfit Regular'); font-weight: 400 600; font-display: swap; }

body[data-screen="app"] {
  --paper: #131C2B; --paper-2: rgba(255,255,255,.07); --paper-3: rgba(255,255,255,.12);
  --ink: #F2F4F8; --ink-2: #E1E6EF; --muted: #9AA6BA; --night-muted: #8592A8;
  --green: #4ccf8f; --green-press: #3bb87b; --yellow: #F5C518; --red: #EF5A5F; --blue: #4D8DF0; --pink: #e58bb8; --cyan: #5cc6d8; --violet: #b58bff;
  --pill: #1E6FE0; --pill-ink: #FFFFFF; --line: rgba(255,255,255,.12);
  --font-display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --font-text: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --shadow-float: 0 18px 44px rgba(0, 0, 0, .5);
  --glass: rgba(19,28,43,.88);
  --chapter-ink: #fff;
  color-scheme: dark;
  background: #0B111B linear-gradient(165deg, #0B111B 0%, #0F1A2E 55%, #0A1F4D 100%) fixed;
  color: var(--ink); font-size: 14px; line-height: 1.4; font-weight: 400;
}
body[data-screen="app"] h1, body[data-screen="app"] h2, body[data-screen="app"] h3, body[data-screen="app"] h4 { font-weight: 600; text-transform: none; letter-spacing: 0; }
body[data-screen="app"] .accordion-toggle,
body[data-screen="app"] .achv__name,
body[data-screen="app"] .ans-row__sport,
body[data-screen="app"] .banner--recommend__title,
body[data-screen="app"] .card__sport-name,
body[data-screen="app"] .celebration-overlay__title,
body[data-screen="app"] .chapter__stamp,
body[data-screen="app"] .chart-card__title,
body[data-screen="app"] .chat__title,
body[data-screen="app"] .fixture__open,
body[data-screen="app"] .fixture__ribbon,
body[data-screen="app"] .fixture__stamp,
body[data-screen="app"] .flame-card__value,
body[data-screen="app"] .group-row__name,
body[data-screen="app"] .lnd-search__input,
body[data-screen="app"] .map-popup__title,
body[data-screen="app"] .notif-panel__head,
body[data-screen="app"] .onboarding-step__title,
body[data-screen="app"] .pokedex__section-title,
body[data-screen="app"] .poster-list__name,
body[data-screen="app"] .random-name,
body[data-screen="app"] .rf-q,
body[data-screen="app"] .rf-result,
body[data-screen="app"] .round-block__title,
body[data-screen="app"] .rules-title-line,
body[data-screen="app"] .settings-section-title,
body[data-screen="app"] .sport-card__name,
body[data-screen="app"] .stagebar__dur,
body[data-screen="app"] .stats-locked__name,
body[data-screen="app"] .stats-locked__title,
body[data-screen="app"] .tab,
body[data-screen="app"] .team-col__label,
body[data-screen="app"] .ticket-stamp__title,
body[data-screen="app"] .tournament-card__name,
body[data-screen="app"] .tournament-winner-banner,
body[data-screen="app"] .ui-dialog__title,
body[data-screen="app"] .wizard-pane__title,
body[data-screen="app"] .wizard-poster__sport,
body[data-screen="app"] .wizard-poster__stamp,
body[data-screen="app"] .wizard-poster__when,
body[data-screen="app"] .wordmark,
body[data-screen="app"] h1,
body[data-screen="app"] h2,
body[data-screen="app"] h3 { font-family: var(--font-text); text-transform: none; letter-spacing: 0; font-weight: 700; }
/* títulos grandes y marca: Alfa Slab One (un solo peso, sin negrita sintética) */
body[data-screen="app"] h1, body[data-screen="app"] h2,
body[data-screen="app"] .ui-dialog__title, body[data-screen="app"] .wizard-pane__title,
body[data-screen="app"] .settings-section-title, body[data-screen="app"] .pokedex__section-title,
body[data-screen="app"] .tournament-winner-banner, body[data-screen="app"] .wordmark { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* ---- superficies ---- */
body[data-screen="app"] .shell { background: none; }
body[data-screen="app"] .card, body[data-screen="app"] .modal__card, body[data-screen="app"] .notif-panel, body[data-screen="app"] .usermenu {
  border-radius: 14px; border: 1px solid var(--line); }
body[data-screen="app"] .modal { background: rgba(5, 9, 16, .72); backdrop-filter: blur(6px); }
body[data-screen="app"] .modal__card, body[data-screen="app"] .notif-panel, body[data-screen="app"] .usermenu {
  background: linear-gradient(160deg, #131C2B, #0F1A2E); }
body[data-screen="app"] .modal__card { border-radius: 18px 18px 0 0; max-width: 560px; }
@media (min-width: 700px) { body[data-screen="app"] .modal { align-items: center; } body[data-screen="app"] .modal__card { border-radius: 18px; } }
body[data-screen="app"] .banner { background: rgba(255,255,255,.10); color: var(--ink); }
body[data-screen="app"] code { background: rgba(255,255,255,.14); }

/* ---- botones: pequeños, en píldora ---- */
body[data-screen="app"] .btn { min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0; gap: 6px; position: relative; box-shadow: none; }
body[data-screen="app"] .btn::after, body[data-screen="app"] .go::after, body[data-screen="app"] .chip-option::after, body[data-screen="app"] .icon-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
body[data-screen="app"] .btn:not(.btn--ghost):not(.btn--danger) { box-shadow: none; }
body[data-screen="app"] .btn--accent, body[data-screen="app"] .btn--dark { background: var(--pill); color: var(--pill-ink); }
body[data-screen="app"] .btn--ghost { background: rgba(255,255,255,.08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
body[data-screen="app"] .btn--danger { background: rgba(224,89,107,.14); color: #ffd7dc; box-shadow: inset 0 0 0 1px rgba(224,89,107,.6); }
body[data-screen="app"] .btn--sm { min-height: 26px; padding: 0 11px; font-size: 12px; }
body[data-screen="app"] .btn--lg { min-height: 36px; padding: 0 18px; font-size: 14px; }
body[data-screen="app"] .btn .glyph { width: 1.1em; height: 1.1em; }
@media (hover: hover) and (pointer: fine) {
  body[data-screen="app"] .btn--accent:hover, body[data-screen="app"] .btn--dark:hover { background: #fff; color: var(--pill-ink); }
  body[data-screen="app"] .btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
  body[data-screen="app"] .btn--danger:hover { background: var(--red); color: #fff; }
}
body[data-screen="app"] .btn[disabled] { opacity: .45; }
body[data-screen="app"] :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- campos ---- */
body[data-screen="app"] .select, body[data-screen="app"] .field input, body[data-screen="app"] .field textarea, body[data-screen="app"] .field select,
body[data-screen="app"] input.select, body[data-screen="app"] textarea.select {
  min-height: 40px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.10); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 14px; }
body[data-screen="app"] .select:focus, body[data-screen="app"] .field input:focus-visible, body[data-screen="app"] .field textarea:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
body[data-screen="app"] select.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f2fa' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
body[data-screen="app"] select option { color: #0A1F4D; background: #fff; }
body[data-screen="app"] ::placeholder { color: rgba(244,242,250,.55); }
body[data-screen="app"] .field { gap: 4px; }
body[data-screen="app"] .field-hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
body[data-screen="app"] .field > span, body[data-screen="app"] label.field__label { font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---- chips y opciones ---- */
body[data-screen="app"] .chip { border-radius: 999px; min-height: 22px; padding: 2px 9px; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.14); color: var(--ink); }
body[data-screen="app"] .chip--accent { background: rgba(79,185,138,.28); color: #c7f5df; }
body[data-screen="app"] .chip--gold { background: rgba(245,197,24,.28); color: #ffe3b3; }
body[data-screen="app"] .chip--sos { background: var(--red); color: #fff; }
body[data-screen="app"] .chip-option { position: relative; min-height: 28px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
body[data-screen="app"] .chip-option.active, body[data-screen="app"] .chip-option[aria-pressed="true"] { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
body[data-screen="app"] .chip-option--sos.active, body[data-screen="app"] .chip-option--sos[aria-pressed="true"] { background: var(--red); color: #fff; }
body[data-screen="app"] .chip-option--clear { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
body[data-screen="app"] .chip-group { gap: 6px; }
body[data-screen="app"] .filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pill); color: var(--pill-ink); font-size: 11px; font-weight: 600; }

/* ---- barra superior y navegación ---- */
body[data-screen="app"] .topbar { background: rgba(23, 64, 106, .72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
body[data-screen="app"] .topbar__inner { min-height: 56px; padding: 6px var(--margin); }
body[data-screen="app"] .topbar__mark { font-size: 20px; }
body[data-screen="app"] .icon-btn { position: relative; border-radius: 999px; color: var(--ink); }
body[data-screen="app"] .icon-btn:hover { background: rgba(255,255,255,.12); }
body[data-screen="app"] .avatar { background: var(--pill); color: var(--pill-ink); border: 2px solid rgba(255,255,255,.5); }
body[data-screen="app"] .sos-pill { border-radius: 999px; min-height: 28px; background: var(--red); color: #fff; font-size: 12px; }
.menu-wrap { position: relative; }
body[data-screen="app"] .usermenu { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-float); }
body[data-screen="app"] .usermenu.hidden { display: none; }
body[data-screen="app"] .usermenu .icon-btn { width: 100%; justify-content: flex-start; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
body[data-screen="app"] .usermenu .topbar__label { display: inline; }
body[data-screen="app"] #btn-invite { display: inline-flex; }
body[data-screen="app"] .notif-panel { right: -60px; }
body[data-screen="app"] .notif-panel__head { padding: 10px 12px; font-size: 14px; border-bottom: 1px solid var(--line); }

body[data-screen="app"] .tabs { background: rgba(21, 52, 96, .86); backdrop-filter: blur(14px); border-top: 1px solid var(--line); color: var(--ink); }
body[data-screen="app"] .tab { color: var(--night-muted); font-family: var(--font-text); font-size: 12px; font-weight: 500; }
body[data-screen="app"] .tab.active { color: #fff; }
body[data-screen="app"] .tabs__ink { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); border-top: 2px solid #fff; }
@media (min-width: 1024px) {
  body[data-screen="app"] .tab { font-size: 15px; min-height: 48px; border-radius: 12px; }
  body[data-screen="app"] .tabs__ink { height: 48px; border: 0; border-radius: 12px; background: rgba(255,255,255,.14); }
  body[data-screen="app"] .tabs { border-top: 0; border-right: 1px solid var(--line); }
  body[data-screen="app"] .tabs__brand { font-size: 24px; }
}

/* ---- cabeceras de capítulo: banda de color del deporte, baja ---- */
body[data-screen="app"] .chapter { background: linear-gradient(135deg, color-mix(in srgb, var(--chapter-bg) 62%, #0F1A2E), color-mix(in srgb, var(--chapter-bg) 22%, #0A1F4D)); color: #fff; border-radius: 0 0 18px 18px; margin-bottom: 12px; padding: 10px var(--margin); max-height: none; min-height: 56px; border-bottom: 1px solid var(--line); }
body[data-screen="app"] .chapter__title { font-size: 20px; font-weight: 600; text-transform: none; }
body[data-screen="app"] .chapter__lead { font-size: 13px; font-weight: 400; opacity: .9; }
body[data-screen="app"] .chapter__render { width: 56px; }
body[data-screen="app"] .chapter__num { font-size: 28px; }
body[data-screen="app"] .block-head h2 { font-size: 18px; }
body[data-screen="app"] .block-head h3 { font-size: 16px; }
body[data-screen="app"] .block-head { margin: 16px 0 8px; }
body[data-screen="app"] .sec-title, .sec-title { margin: 12px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---- color por deporte (y respaldo por categoría) ---- */
[data-category="Raqueta"]     { --sc: #F5C518; }
[data-category="Equipo"]      { --sc: #4fb98a; }
[data-category="Resistencia"] { --sc: #6fa3ff; }
[data-category="Fitness"]     { --sc: #e58bb8; }
[data-category="Agua"]        { --sc: #5cc6d8; }
[data-category="Combate"]     { --sc: #e0596b; }
[data-category="Competitivo"] { --sc: #b58bff; }
[data-sport="padel"] { --sc: #F5C518; } [data-sport="futbol"], [data-sport="futbol-7"], [data-sport="futbol-sala"] { --sc: #4fb98a; }
[data-sport="boxeo"] { --sc: #e0596b; } [data-sport="baloncesto"] { --sc: #e5833d; } [data-sport="running"] { --sc: #6fa3ff; }
[data-sport="tenis"] { --sc: #b58bff; } [data-sport="voleibol"], [data-sport="voley-playa"] { --sc: #F5C518; } [data-sport="tenis-mesa"] { --sc: #5cc6d8; }
[data-sport="badminton"] { --sc: #c3d86a; } [data-sport="escalada"] { --sc: #d98a5f; }

/* ---- tira de días ---- */
.daystrip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 8px; margin: 0 calc(-1 * var(--margin)); padding-inline: var(--margin); scroll-snap-type: x proximity; }
.daystrip::-webkit-scrollbar { display: none; }
.day { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 40px; height: 50px; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--ink); font: inherit; cursor: pointer; scroll-snap-align: center; }
.day small { font-size: 10px; font-weight: 500; opacity: .75; text-transform: capitalize; line-height: 1; }
.day b { font-size: 15px; font-weight: 600; line-height: 1.1; }
.day i { width: 4px; height: 4px; border-radius: 50%; background: transparent; margin-top: 1px; }
.day.has i { background: #7fe0b0; }
.day.active { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.day.active small { opacity: .8; }
.day.active.has i { background: var(--pill-ink); }
.day--any { width: auto; min-width: 52px; padding: 0 12px; font-size: 12px; font-weight: 600; }
.day::after { content: ''; position: absolute; inset: -4px -3px; }

/* ---- buscador de deportes, filtros ---- */
.filterbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
body[data-screen="app"] .sportsearch { min-height: 36px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
body[data-screen="app"] .sportsearch input { min-height: 30px; font-size: 14px; color: var(--ink); background: none; box-shadow: none; padding: 0; }
body[data-screen="app"] .sportsearch:focus-within { outline: 2px solid #fff; outline-offset: 1px; }
.sportsearch__icon { width: 16px; height: 16px; opacity: .7; }
.sportsearch__chips { display: contents; }
body[data-screen="app"] .sportsearch__results { margin-top: 6px; border-radius: 12px; border: 1px solid var(--line); background: #131C2B; }
body[data-screen="app"] .sportsearch__results button { color: var(--ink); background: none; }
.sportquick, .filterbar__scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center; padding-bottom: 2px; }
.sportquick::-webkit-scrollbar, .filterbar__scroll::-webkit-scrollbar { display: none; }
.sportquick .chip-option { border-left: 3px solid var(--sc, transparent); }
.filterpanel { display: grid; grid-template-columns: 1fr; gap: 8px 16px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
@media (min-width: 640px) { .filterpanel { grid-template-columns: 1fr 1fr; } }
.rng { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rng__label { font-size: 12px; font-weight: 500; color: var(--muted); }
.rng input[type=range], .dual input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.rng input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.rng input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.rng input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--pill); border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.rng input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--pill); border: 0; }
.dual { position: relative; height: 28px; }
.dual input[type=range] { position: absolute; left: 0; top: 0; pointer-events: none; }
.dual input[type=range]::-webkit-slider-thumb { pointer-events: auto; }
.dual input[type=range]::-moz-range-thumb { pointer-events: auto; }
.dual input[type=range]:last-child::-webkit-slider-runnable-track { background: transparent; }
.dual input[type=range]:last-child::-moz-range-track { background: transparent; }

/* ---- lista a dos columnas y tarjeta de partido ---- */
body[data-screen="app"] .cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
@media (min-width: 1100px) { body[data-screen="app"] .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 340px) { body[data-screen="app"] .cards-grid { grid-template-columns: 1fr; } }
body[data-screen="app"] .day-sep { grid-column: 1 / -1; position: sticky; top: 56px; z-index: 5; margin: 4px calc(-1 * var(--margin)) 0; padding: 6px var(--margin); background: rgba(23,64,106,.82); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; text-transform: capitalize; color: var(--muted); }
.mcard { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 124px; padding: 10px 10px 8px; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sc, #8fa6e0) 34%, rgba(255,255,255,.06)), color-mix(in srgb, var(--sc, #8fa6e0) 10%, rgba(255,255,255,.06)) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, #8fa6e0) 45%, rgba(255,255,255,.12)); color: var(--ink); transition: transform var(--t-press) var(--ease-out); }
.mcard:active { transform: scale(.985); }
.mcard__art { position: absolute; z-index: -1; right: -14px; bottom: -14px; width: 84px; height: 84px; object-fit: contain; opacity: .38; pointer-events: none; transform: rotate(-8deg); }
.mcard__open { position: absolute; inset: 0; z-index: 1; border: 0; background: none; cursor: pointer; border-radius: 14px; }
.mcard__open:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mcard__top { display: flex; align-items: baseline; gap: 6px; }
.mcard__time { font-size: 20px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.mcard__day { font-size: 11px; opacity: .8; text-transform: capitalize; }
.mcard__day:empty { display: none; }
.mcard__sos { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.mcard__sport { font-size: 14px; font-weight: 600; line-height: 1.15; }
.mcard__where { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; opacity: .88; cursor: pointer; text-align: left; }
.mcard__where::after { content: ''; position: absolute; inset: -12px -4px; }
.mcard__where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__where .glyph { width: 12px; height: 12px; }
.mcard__meta { margin: 0; font-size: 11px; opacity: .78; line-height: 1.25; }
.mcard__meta .glyph { width: 11px; height: 11px; }
.mcard__foot { position: relative; z-index: 2; margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none; }
.mcard__foot > * { pointer-events: auto; }
.mcard__slots { display: inline-flex; align-items: center; gap: 2px; }
.slot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); }
.slot.is-taken { background: #fff; }
.mcard__count { margin-left: 4px; font-size: 11px; font-weight: 500; opacity: .85; }
.go { position: relative; min-height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.go:hover { background: #fff; }
.go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mcard__state { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; opacity: .85; }
.mcard__state--ok { color: #c7f5df; opacity: 1; }
.mcard__state .glyph { width: 12px; height: 12px; }
.mcard--sos { box-shadow: inset 0 0 0 1.5px var(--red); }
.mcard.is-joined { box-shadow: inset 0 0 0 1.5px rgba(127,224,176,.8); }

/* ---- Tus partidos ---- */
.mine-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--margin)); padding: 0 var(--margin) 8px; scroll-snap-type: x proximity; }
.mine-row::-webkit-scrollbar { display: none; }
.mine { position: relative; flex: 0 0 148px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 66px; padding: 8px 10px; border: 0; border-radius: 12px; overflow: hidden; isolation: isolate; text-align: left; color: var(--ink); font: inherit; cursor: pointer; scroll-snap-align: start;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sc, #8fa6e0) 36%, rgba(255,255,255,.06)), color-mix(in srgb, var(--sc, #8fa6e0) 12%, rgba(255,255,255,.06))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, #8fa6e0) 45%, rgba(255,255,255,.12)); }
.mine__art { position: absolute; z-index: -1; right: -8px; bottom: -10px; width: 56px; height: 56px; object-fit: contain; opacity: .4; transform: rotate(-8deg); }
.mine__sport { font-size: 13px; font-weight: 600; }
.mine__when { font-size: 12px; opacity: .85; }
.mine__rem { margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.22); font-size: 10.5px; font-weight: 500; }
.mine.is-soon .mine__rem { background: var(--pill); color: var(--pill-ink); }
.mine.slide-in { animation: mineIn 520ms var(--ease-out); }
@keyframes mineIn { 0% { transform: translateY(-14px) scale(.92); opacity: 0; } 60% { transform: translateY(2px) scale(1.02); opacity: 1; } 100% { transform: none; } }

.empty { padding: 20px 0; font-size: 13px; color: var(--muted); }
body[data-screen="app"] #partidos-empty { text-align: center; }

/* ---- amigos en una sola pantalla ---- */
.friends-block { margin: 0 0 14px; }
.friends-block.hidden { display: none; }
.foldable > summary, .pokedex-locked > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--muted); }
.foldable > summary::-webkit-details-marker, .pokedex-locked > summary::-webkit-details-marker { display: none; }
.foldable > summary::after, .pokedex-locked > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-ui) ease; }
.foldable[open] > summary::after, .pokedex-locked[open] > summary::after { transform: rotate(-135deg); }
.suggest-card { flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.suggest-card__name { margin: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.suggest-card__meta { margin: 0; font-size: 11px; color: var(--muted); min-height: 1.2em; }

/* ---- números / deportes ---- */
.pokedex-locked { margin-top: 12px; padding: 4px 12px 10px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.pokedex-locked .pokedex__section-title { font-size: 13px; }
body[data-screen="app"] .sport-card { border-radius: 14px; background: linear-gradient(150deg, color-mix(in srgb, var(--sc, #8fa6e0) 32%, rgba(255,255,255,.06)), color-mix(in srgb, var(--sc, #8fa6e0) 10%, rgba(255,255,255,.06))); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, #8fa6e0) 45%, rgba(255,255,255,.12)); }
body[data-screen="app"] .hero__avatar { background: var(--pill); color: var(--pill-ink); font-weight: 600; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 0 5px color-mix(in srgb, var(--chapter-bg) 70%, #fff); }
body[data-screen="app"] .toast { border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: 13px; }
body[data-screen="app"] .photo, body[data-screen="app"] .place-map { border-radius: 12px; }

/* ---- resto de superficies heredadas: esquinas suaves ---- */
body[data-screen="app"] .fixture, body[data-screen="app"] .chart-card, body[data-screen="app"] .flame-card, body[data-screen="app"] .group-row, body[data-screen="app"] .ans-row { border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
  .mine.slide-in, .mcard { animation: none !important; transition: none !important; }
}

/* ---- arena v4: escena a color en 3 capas ---- */
body[data-screen="app"] .chapter--arena { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2px 12px; min-height: 150px; padding: 14px var(--margin) 12px; border-radius: 0 0 20px 20px; overflow: hidden; isolation: isolate; background: #0F1A2E; }
@media (min-width: 900px) { body[data-screen="app"] .chapter--arena { min-height: 200px; } }
.arena__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.arena__layer { position: absolute; left: -14px; right: -14px; top: -8px; bottom: -8px; width: calc(100% + 28px); height: calc(100% + 16px); display: block; will-change: transform; }
.arena__layer--0 { transform: translate3d(calc(var(--par-x, 0) * -4px), calc(var(--par-y, 0) * -3px), 0); }
.arena__layer--1 { transform: translate3d(calc(var(--par-x, 0) * -8px), calc(var(--par-y, 0) * -5px), 0); }
.arena__layer--2 { transform: translate3d(calc(var(--par-x, 0) * -12px), calc(var(--par-y, 0) * -8px), 0); }
.chapter--arena::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,40,100,0) 35%, rgba(23,40,100,.62)); pointer-events: none; }
.arena__objwrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body[data-screen="app"] .arena__obj { filter: drop-shadow(0 14px 8px rgba(0,0,0,.38)); animation: arenaBreathe 3s ease-in-out infinite; }
@keyframes arenaBreathe { 50% { translate: 0 -3px; } }
.chapter--arena.is-paused .arena__obj { animation-play-state: paused; }
.chapter--arena.is-in .arena__layer--1, .chapter--arena.is-in .arena__layer--2 { animation: arenaRise 600ms var(--ease-out) both; }
.chapter--arena.is-in .arena__objwrap { animation: arenaDrop 640ms cubic-bezier(.3,.7,.4,1) both; }
@keyframes arenaRise { from { opacity: 0; margin-top: 22px; } to { opacity: 1; margin-top: 0; } }
@keyframes arenaDrop { 0% { transform: translateY(-70px); opacity: 0; } 55% { transform: translateY(0); opacity: 1; } 75% { transform: translateY(-9px); } 100% { transform: translateY(0); } }
body[data-screen="app"] .chapter--arena .chapter__title, body[data-screen="app"] .chapter--arena .chapter__lead, body[data-screen="app"] .chapter--arena .chapter__action { position: relative; z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
body[data-screen="app"] .chapter--arena .chapter__title { flex: 1 1 100%; font-size: 20px; }
body[data-screen="app"] .chapter--arena .chapter__lead { flex: 1 1 auto; }
.arena__count { position: absolute; right: var(--margin); top: 10px; z-index: 3; font-size: 18px; font-weight: 600; opacity: 0; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.arena__count:not(.hidden) { opacity: .95; }
@media (prefers-reduced-motion: reduce) {
  .arena__layer, .arena__objwrap, .arena__obj { animation: none !important; transform: none !important; }
}

/* ---- barras mensuales (crecen al aparecer) ---- */
.mbars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 150px; }
.mbars__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; min-width: 0; }
.mbars__col > b { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mbars__col > small { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.mbars__stack { width: 100%; max-width: 38px; min-height: 2px; display: flex; flex-direction: column-reverse; border-radius: 8px 8px 3px 3px; overflow: hidden; transform-origin: bottom; animation: mbarGrow 800ms var(--ease-out) both; }
.mbars__stack i { display: block; min-height: 0; }
.mbars__w { background: #4fb98a; } .mbars__l { background: #e0596b; }
.mbars__legend { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.mbars__key { width: 8px; height: 8px; border-radius: 50%; } .mbars__key--w { background: #4fb98a; } .mbars__key--l { background: #e0596b; margin-left: 8px; }
@keyframes mbarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mbars__stack { animation: none; } }

/* ---- crear partido: hoja compacta ---- */
body[data-screen="app"] .wizard-poster { min-height: 0; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cat, #8fa6e0) 42%, rgba(255,255,255,.06)), color-mix(in srgb, var(--cat, #8fa6e0) 14%, rgba(255,255,255,.06))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
body[data-screen="app"] .wizard-poster__sport { font-size: 16px; }
body[data-screen="app"] .wizard-poster__when, body[data-screen="app"] .wizard-poster__where { font-size: 12px; }
body[data-screen="app"] .wizard-poster__glyph { width: 28px; height: 28px; }
body[data-screen="app"] .wizard-poster__slots .slot { width: 7px; height: 7px; }
body[data-screen="app"] .wizard-pane__title { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
body[data-screen="app"] .wizard-step-chip { width: 22px; height: 22px; font-size: 11px; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--ink); }
body[data-screen="app"] .wizard-step-chip.active { background: var(--pill); color: var(--pill-ink); }
body[data-screen="app"] .form { gap: 10px; }
body[data-screen="app"] .quick-chip { min-height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
body[data-screen="app"] .quick-chip.active { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.more-opts { margin: 4px 0 8px; padding: 0 12px 8px; border-radius: 12px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); }
.more-opts > .field { margin-top: 8px; }
body[data-screen="app"] .wizard-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
body[data-screen="app"] .check--sos { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(224,89,107,.14); box-shadow: inset 0 0 0 1px rgba(224,89,107,.45); font-size: 13px; }


/* ============================================================
   v5 — ESCALA GLOBAL: texto 11/12/14/16/20/28, espacios 4/8/12/16, controles pequeños
   ============================================================ */
body[data-screen="app"] {
  --step-body: 14px; --step-small: 12px; --step-lead: 14px; --step-head: 20px; --step-poster: 28px; --step-chapter: 20px;
  --margin: 16px; --gutter: 12px; --section: 24px; --nav-h: 56px; --rail-w: 208px;
  --fs-xs: 11px; --fs-s: 12px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 20px; --fs-num: 28px;
  font-size: 14px; line-height: 1.4;
}
body[data-screen="app"] h1 { font-size: 20px; line-height: 1.2; }
body[data-screen="app"] h2, body[data-screen="app"] h3 { font-size: 16px; line-height: 1.25; }
body[data-screen="app"] h4 { font-size: 14px; }
body[data-screen="app"] p, body[data-screen="app"] li { line-height: 1.4; }
body[data-screen="app"] .wrap { padding: 0 16px 24px; }
@media (min-width: 900px) { body[data-screen="app"] { font-size: 14px; } body[data-screen="app"] .wrap { padding: 0 24px 24px; } }
body[data-screen="app"] .modal__hint, body[data-screen="app"] .field__hint { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
body[data-screen="app"] .stack { gap: 8px; }

/* menú lateral y barra inferior */
body[data-screen="app"] .tabs__brand { font-size: 20px; font-weight: 600; color: #F2F4F8; padding: 0 16px 16px; display: block; opacity: 1; }
body[data-screen="app"] .topbar__mark { color: #F2F4F8; font-size: 18px; font-weight: 600; opacity: 1; }
body[data-screen="app"] .tabs { padding-top: 0; padding-bottom: env(safe-area-inset-bottom); }
body[data-screen="app"] .tab { font-size: 11px; font-weight: 500; opacity: .7; color: #F2F4F8; }
body[data-screen="app"] .tab.active { opacity: 1; color: #fff; }
body[data-screen="app"] .tab .glyph { width: 20px; height: 20px; }
body[data-screen="app"] .tab .tab__label { font-size: 11px; }
@media (min-width: 1024px) {
  body[data-screen="app"] .tabs { padding: 16px 8px; gap: 2px; }
  body[data-screen="app"] .tab { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 10px; opacity: .7; }
  body[data-screen="app"] .tab.active { opacity: 1; background: rgba(255,255,255,.14); }
  body[data-screen="app"] .tab .tab__label { display: inline; font-size: 14px; }
  body[data-screen="app"] .tabs__ink { display: none; }
  body[data-screen="app"] .tabs__brand { padding: 4px 12px 16px; }
  body[data-screen="app"] .tabs__city { padding: 0 12px; font-size: 12px; color: var(--muted); }
}
@media (max-width: 1023px) { body[data-screen="app"] .tabs__brand { display: none; } }

/* cabeceras de capítulo */
body[data-screen="app"] .chapter { padding: 10px 16px; margin: 0 -16px 12px; min-height: 56px; max-height: none; gap: 4px 12px; }
@media (min-width: 900px) { body[data-screen="app"] .chapter { margin: 0 -24px 12px; padding: 10px 24px; } }
body[data-screen="app"] .chapter__title { font-size: 20px; line-height: 1.15; }
body[data-screen="app"] .chapter__lead { font-size: 13px; font-weight: 400; line-height: 1.3; }
body[data-screen="app"] .chapter__cap { font-size: 12px; }
body[data-screen="app"] .chapter__num { font-size: 28px; line-height: 1; }
body[data-screen="app"] .chapter__stamp { font-size: 11px; }
body[data-screen="app"] .chapter__figure { gap: 8px; align-items: baseline; }
body[data-screen="app"] .chapter__render { width: 56px; }
body[data-screen="app"] .chapter--arena { min-height: 150px; padding: 12px 16px; }
@media (min-width: 900px) { body[data-screen="app"] .chapter--arena { min-height: 200px; padding: 12px 24px; } }
body[data-screen="app"] .chapter--arena .chapter__title { font-size: 20px; }
body[data-screen="app"] .chapter--arena .chapter__lead { font-size: 13px; }
body[data-screen="app"] .block-head { margin: 12px 0 8px; gap: 8px; }
body[data-screen="app"] .block-head h2, body[data-screen="app"] .block-head h3 { font-size: 16px; }
body[data-screen="app"] .block-head--album { margin-top: 16px; }

/* perfil */
body[data-screen="app"] .chapter--profile { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 96px; padding: 12px 16px; }
@media (min-width: 900px) { body[data-screen="app"] .chapter--profile { padding: 12px 24px; } }
body[data-screen="app"] .chapter--profile .chapter__render { width: 72px; opacity: .5; right: 16px; }
body[data-screen="app"] .hero { gap: 10px 16px; }
body[data-screen="app"] .hero__id { align-items: center; gap: 12px; }
body[data-screen="app"] .hero__avatar { width: 60px; font-size: 20px; font-weight: 600; box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 0 0 4px color-mix(in srgb, var(--chapter-bg) 70%, #fff); }
body[data-screen="app"] .avatar-edit-btn { width: 24px; height: 24px; min-width: 24px; min-height: 24px; right: -4px; bottom: -2px; }
body[data-screen="app"] .avatar-edit-btn .glyph { width: 13px; height: 13px; }
body[data-screen="app"] .avatar-tier-badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; left: -4px; top: -4px; }
body[data-screen="app"] #hero-name { font-size: 22px; line-height: 1.15; max-width: none; }
body[data-screen="app"] .hero__nameRow { gap: 6px; }
body[data-screen="app"] .hero__streak { margin-top: 2px; font-size: 13px; font-weight: 400; opacity: .92; }
body[data-screen="app"] .hero__info .chip--gold { margin-top: 4px; }
body[data-screen="app"] .xp-row { flex: 1 1 220px; max-width: 320px; margin-left: auto; gap: 10px; }
body[data-screen="app"] .xp-badge { font-size: 28px; line-height: 1; min-width: 1ch; }
body[data-screen="app"] .xp-label { font-size: 12px; font-weight: 500; margin: 0 0 4px; }
body[data-screen="app"] .xp-bar-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
body[data-screen="app"] .xp-bar-fill { background: #fff; border-radius: 3px; }
body[data-screen="app"] .xp-hint { font-size: 11px; font-weight: 400; margin-top: 4px; opacity: .9; }
body[data-screen="app"] .streak-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
body[data-screen="app"] .flame-card { padding: 8px 12px; gap: 10px; min-height: 52px; border-radius: 14px; }
body[data-screen="app"] .flame-card__flame { width: 32px; height: 32px; border-radius: 10px; }
body[data-screen="app"] .flame-card__flame .glyph { width: 18px; height: 18px; }
body[data-screen="app"] .flame-card__flame.lit { color: #fff; }
body[data-screen="app"] .flame-card__label { font-size: 12px; font-weight: 400; line-height: 1.2; }
body[data-screen="app"] .flame-card__value { font-size: 16px; font-weight: 600; line-height: 1.2; margin: 0; }
body[data-screen="app"] .banner--recommend { margin: 0 0 8px; padding: 0; background: none; }
body[data-screen="app"] .banner--recommend__title { font-size: 14px; font-weight: 500; line-height: 1.3; max-width: none; margin: 0 0 8px; gap: 8px; }
body[data-screen="app"] .banner--recommend__title .glyph { width: 16px; height: 16px; }
body[data-screen="app"] .stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
body[data-screen="app"] .stat-card { min-width: 0; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
body[data-screen="app"] .stat-card__value { font-size: 22px; line-height: 1.1; font-weight: 600; justify-content: center; gap: 3px; }
body[data-screen="app"] .stat-card__value .glyph { width: 12px; height: 12px; }
body[data-screen="app"] .stat-card__label { margin: 2px 0 0; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.2; }
body[data-screen="app"] .achv-row { gap: 8px; margin-right: -16px; padding-right: 16px; padding-bottom: 4px; }
body[data-screen="app"] .achv { width: 124px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.08); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
body[data-screen="app"] .achv--unlocked { background: linear-gradient(150deg, rgba(245,197,24,.4), rgba(245,197,24,.14)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(245,197,24,.6); }
body[data-screen="app"] .achv__icon { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 6px; background: rgba(255,255,255,.14); color: inherit; }
body[data-screen="app"] .achv--unlocked .achv__icon { background: rgba(255,255,255,.9); color: #8a5a10; }
body[data-screen="app"] .achv__icon .glyph { width: 18px; height: 18px; }
body[data-screen="app"] .achv__name { font-size: 13px; font-weight: 600; line-height: 1.2; }
body[data-screen="app"] .achv__desc { font-size: 11px; margin-top: 2px; line-height: 1.3; }

/* álbum de deportes */
body[data-screen="app"] .pokedex-search-wrap { max-width: none; margin: 0 0 8px; }
body[data-screen="app"] .pokedex-search { min-height: 36px; padding: 6px 12px 6px 36px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font-size: 14px; color: var(--ink); }
body[data-screen="app"] .pokedex-search:focus-visible { box-shadow: inset 0 0 0 2px #fff; background: rgba(255,255,255,.14); }
body[data-screen="app"] .pokedex-search__icon { width: 16px; height: 16px; left: 12px; }
body[data-screen="app"] .pokedex { gap: 12px; }
body[data-screen="app"] .pokedex-section { gap: 8px; }
body[data-screen="app"] .pokedex__section-title { font-size: 14px; gap: 8px; }
body[data-screen="app"] .pokedex__count { font-size: 12px; font-weight: 500; }
body[data-screen="app"] .card-deck { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
body[data-screen="app"] .card-deck--compact { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
body[data-screen="app"] .sport-card { aspect-ratio: 5 / 6; border-radius: 14px; transform: none; }
body[data-screen="app"] .sport-card__img { width: 78%; right: -10%; top: 16%; opacity: .9; }
body[data-screen="app"] .sport-card__level { left: 10px; top: 8px; font-size: 22px; font-weight: 600; line-height: 1; }
body[data-screen="app"] .sport-card__tier { left: 10px; top: 36px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; background: rgba(0,0,0,.28); color: #fff; }
body[data-screen="app"] .sport-card__name { left: 10px; right: 10px; bottom: 24px; font-size: 14px; font-weight: 600; line-height: 1.15; }
body[data-screen="app"] .sport-card__meta { left: 10px; right: 10px; bottom: 8px; font-size: 11px; font-weight: 500; }
body[data-screen="app"] .sport-card__fav { width: 36px; height: 36px; right: 2px; top: 2px; }
body[data-screen="app"] .sport-card__fav .glyph { width: 16px; height: 16px; }
body[data-screen="app"] .sport-card--compact { min-height: 64px; aspect-ratio: auto; gap: 6px; padding: 8px 10px; }
body[data-screen="app"] .sport-card--compact .sport-card__icon .glyph { width: 20px; height: 20px; }
body[data-screen="app"] .sport-card--compact .sport-card__name { font-size: 13px; }
body[data-screen="app"] .pokedex__empty { padding: 12px; font-size: 13px; border-radius: 12px; max-width: none; }

/* números */
body[data-screen="app"] .stats-grid-2 { gap: 8px; margin-top: 8px; }
@media (min-width: 900px) { body[data-screen="app"] .stats-grid-2 { grid-template-columns: 1fr 1fr; } }
body[data-screen="app"] .chart-card { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line); }
body[data-screen="app"] .chart-card--wide { margin-top: 8px; }
body[data-screen="app"] .chart-card__title { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
body[data-screen="app"] .chart-card svg { max-height: 220px; }
body[data-screen="app"] .chart-card .radar-grid { stroke: rgba(255,255,255,.2); stroke-width: 1; }
body[data-screen="app"] .chart-card .radar-fill { stroke: #fff; stroke-width: 1.5; }
body[data-screen="app"] .chart-card .radar-dot { fill: #fff; }
body[data-screen="app"] .chart-card svg text { fill: var(--ink); font-size: 10px; }
body[data-screen="app"] .percentile-block { margin-bottom: 10px; }
body[data-screen="app"] .percentile-block__head { font-size: 13px; margin-bottom: 4px; }
body[data-screen="app"] .percentile-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
body[data-screen="app"] .percentile-fill { background: #fff; }
body[data-screen="app"] .rivalry-row { padding: 6px 0; gap: 8px; }
body[data-screen="app"] .rivalry-row + .rivalry-row { box-shadow: inset 0 1px 0 var(--line); padding-top: 8px; }
body[data-screen="app"] .rivalry-row .glyph { width: 20px; height: 20px; }
body[data-screen="app"] .rivalry-row__name { font-size: 13px; }
body[data-screen="app"] .rivalry-row__record { font-size: 16px; font-weight: 600; }
body[data-screen="app"] .rivalry-row__record .w { color: #7fe0b0; }
body[data-screen="app"] .donut-legend__row { font-size: 13px; padding: 2px 0; }
body[data-screen="app"] .stats-locked { padding: 12px; margin: 8px 0; border-radius: 14px; background: rgba(255,255,255,.06); }
body[data-screen="app"] .stats-locked__title { font-size: 14px; font-weight: 600; }
body[data-screen="app"] .stats-locked__lead, body[data-screen="app"] .stats-locked__hint { font-size: 12px; }
body[data-screen="app"] .stats-locked__name { font-size: 13px; color: var(--ink); }
body[data-screen="app"] .stats-locked__list li { padding: 8px 0; border-top: 1px solid var(--line); }
body[data-screen="app"] .wrapped-card { padding: 12px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, #4fb98a, #2f7f8f); }
body[data-screen="app"] .wrapped-card + .wrapped-card { background: linear-gradient(150deg, #F5C518, #b5603f); }
body[data-screen="app"] .wrapped-card__big { font-size: 28px; line-height: 1.1; margin-top: 4px; }
body[data-screen="app"] .wrapped-card__period, body[data-screen="app"] .wrapped-card__sub, body[data-screen="app"] .wrapped-card__row { font-size: 12px; }

/* partidos */
body[data-screen="app"] .sportsearch { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: 100%; min-height: 36px; height: auto; max-height: none; padding: 2px 12px; margin: 0; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
body[data-screen="app"] .sportsearch__chips { display: flex; flex-wrap: nowrap; gap: 4px; flex: 0 0 auto; }
body[data-screen="app"] .sportsearch input, body[data-screen="app"] .sportsearch__input { flex: 1 1 80px; width: auto; min-width: 0; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font-size: 14px; outline: none; }
body[data-screen="app"] .sportsearch input:focus-visible { outline: none; box-shadow: none; }
body[data-screen="app"] .sportsearch:focus-within { outline: 2px solid #fff; outline-offset: 1px; }
body[data-screen="app"] .sportsearch__results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; padding: 4px; }
body[data-screen="app"] .sportsearch__results button, body[data-screen="app"] .sportsearch__results [role=option] { width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; text-align: left; font: inherit; font-size: 14px; display: flex; align-items: center; gap: 8px; background: none; color: var(--ink); cursor: pointer; }
body[data-screen="app"] .sportsearch__results button:hover { background: rgba(255,255,255,.12); }
body[data-screen="app"] .filterbar { position: relative; gap: 8px; margin: 0 0 8px; }
body[data-screen="app"] .view-toggle { margin: 0 0 8px; }
body[data-screen="app"] .daystrip { margin-bottom: 4px; }
body[data-screen="app"] .mine-row { margin-right: -16px; }
body[data-screen="app"] .load-more-row { margin: 12px 0; display: flex; justify-content: center; }
body[data-screen="app"] .fixture { min-height: 56px; padding: 6px 0; border-radius: 14px; background: rgba(255,255,255,.08); }
body[data-screen="app"] .fixture__time { font-size: 20px; font-weight: 600; }
body[data-screen="app"] .fixture__open { font-size: 14px; }
body[data-screen="app"] .fixture__count { font-size: 14px; }
body[data-screen="app"] .accordion-toggle { min-height: 44px; margin-top: 8px; font-size: 14px; }

/* detalle, listas, ajustes, modales */
body[data-screen="app"] .detail-hero { min-height: 0; padding: 12px; border-radius: 14px; }
body[data-screen="app"] .detail-hero__time { font-size: 22px; font-weight: 600; line-height: 1.1; }
body[data-screen="app"] .card { padding: 12px; }
body[data-screen="app"] .card__sport-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.14); color: var(--ink); }
body[data-screen="app"] .card__sport-icon .glyph { width: 20px; height: 20px; }
body[data-screen="app"] .card__sport-name { font-size: 16px; }
body[data-screen="app"] .friend-row, body[data-screen="app"] .search-row, body[data-screen="app"] .request-row { padding: 8px 12px; gap: 8px; border-radius: 14px; }
body[data-screen="app"] .friend-row .participant__avatar, body[data-screen="app"] .search-row .participant__avatar, body[data-screen="app"] .request-row .participant__avatar { width: 36px; height: 36px; font-size: 13px; }
body[data-screen="app"] .group-row { padding: 10px 12px; border-radius: 14px; }
body[data-screen="app"] .group-row__name { font-size: 15px; }
body[data-screen="app"] .league-table th { padding: 8px 10px; font-size: 12px; background: rgba(255,255,255,.14); color: var(--ink); }
body[data-screen="app"] .league-table td { padding: 8px 10px; font-size: 13px; }
body[data-screen="app"] .tournament-card__name { font-size: 15px; }
body[data-screen="app"] .modal__card { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
body[data-screen="app"] .modal__head h3 { font-size: 16px; }
body[data-screen="app"] .modal__head { margin-bottom: 8px; }
body[data-screen="app"] .modal__x { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: 50%; }
@media (min-width: 700px) { body[data-screen="app"] .modal__card { max-width: 520px; } }
body[data-screen="app"] .settings-section-title { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
body[data-screen="app"] .onboarding-step__glyph { width: 56px; height: 56px; }
body[data-screen="app"] .sport-detail-head__icon { width: 56px; height: 56px; }
body[data-screen="app"] .celebration-overlay__title { font-size: 20px; }
body[data-screen="app"] .celebration-overlay__icon { width: 48px; height: 48px; }
body[data-screen="app"] .chat__thread { max-height: 260px; }
body[data-screen="app"] .empty, body[data-screen="app"] .pokedex-empty { padding: 12px 0; font-size: 13px; }
body[data-screen="app"] .stars--input .star { font-size: 22px; }

/* ===== v6: arreglos de buscador y desplegables ===== */
body[data-screen="app"] .filterbar { align-items: stretch; flex-direction: column; }
body[data-screen="app"] .sportsearch { flex: none; }
body[data-screen="app"] .sportquick, body[data-screen="app"] .filterbar__scroll { justify-content: flex-start; }
body[data-screen="app"] .filterpanel { width: 100%; }
body[data-screen="app"] select.select, body[data-screen="app"] .field select { background-color: rgba(255,255,255,.10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f2fa' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px; appearance: none; -webkit-appearance: none; }
body[data-screen="app"] select option, body[data-screen="app"] select optgroup { background: #131C2B; color: #F2F4F8; }
body[data-screen="app"] .sportsearch__results { max-height: 320px; overflow-y: auto; padding: 6px; }
.sportsearch__group + .sportsearch__group { margin-top: 6px; }
.sportsearch__cat { margin: 4px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sportsearch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
@media (min-width: 700px) { .sportsearch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sportsearch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, #8fa6e0); flex-shrink: 0; }
.sportsearch__none { margin: 8px; font-size: 13px; color: var(--muted); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc, #8fa6e0); }
body[data-screen="app"] .sportquick .chip-option { border-left: 0; }

/* ===== v6: marcador rápido, entrenos, gimnasio, ruleta, ajustes y columnas ===== */
.pad-body { display: flex; flex-direction: column; gap: 8px; }
.pad { display: flex; flex-direction: column; gap: 8px; }
.pad-lab { display: block; margin: 6px 0 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.pad-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pad-inline .pad-lab { margin: 0; }
.pad-center { display: flex; justify-content: center; }
.pad-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.pad-two > label, .pad-two > div { min-width: 0; }
.pad-empty { margin: 8px 0; font-size: 13px; color: var(--muted); }
.pad-save { margin-top: 6px; min-height: 40px; font-size: 14px; }
.pad-more { border-radius: 12px; background: rgba(255,255,255,.06); padding: 0 12px; }
.pad-more > summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted); list-style: none; }
.pad-more > summary::-webkit-details-marker { display: none; }
.pad-more[open] { padding-bottom: 10px; }
.pad-check { font-size: 13px; }
.pad-date { margin-top: 6px; }
.pad-safe { margin: 0; font-size: 12px; }

/* stepper: − número + */
.stp { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.stp__b { position: relative; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--ink); font: inherit; font-size: 18px; font-weight: 500; line-height: 1; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.stp__b::after { content: ''; position: absolute; inset: -7px; }
.stp__b:hover { background: rgba(255,255,255,.24); }
.stp__b:active { transform: scale(.88); }
.stp__i { width: 44px; min-height: 30px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stp__i::-webkit-outer-spin-button, .stp__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stp__i::placeholder { color: rgba(244,242,250,.4); }
.stp__i:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 6px; }
.stp--big .stp__b { width: 40px; height: 40px; font-size: 22px; }
.stp--big .stp__i { width: 64px; font-size: 26px; }

/* botones de resultado grandes con rebote */
.obs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; border: 0; border-radius: 16px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 200ms var(--ease-out), opacity 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.ob .glyph { width: 22px; height: 22px; }
.ob:hover { background: rgba(255,255,255,.14); }
.ob:active { transform: scale(.94); }
.obs.has-pick .ob:not(.is-on) { opacity: .45; }
.ob--win.is-on { background: linear-gradient(150deg, #4fb98a, #2f8f6c); box-shadow: 0 8px 22px rgba(79,185,138,.4); color: #fff; }
.ob--draw.is-on { background: linear-gradient(150deg, #8fa6e0, #5c74b8); box-shadow: 0 8px 22px rgba(143,166,224,.35); color: #fff; }
.ob--loss.is-on { background: linear-gradient(150deg, #e0596b, #b23a4d); box-shadow: 0 8px 22px rgba(224,89,107,.35); color: #fff; }
.ob.pop { animation: obPop 420ms cubic-bezier(.3,1.6,.5,1); }
@keyframes obPop { 0% { transform: scale(.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* marcador por lados y sets */
.duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.duo__s { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.duo__l { font-size: 12px; color: var(--muted); }
.duo__x { padding-bottom: 14px; font-size: 20px; opacity: .6; }
.sets { display: flex; flex-direction: column; gap: 6px; }
.set { display: grid; grid-template-columns: 44px auto 14px auto 1fr; align-items: center; gap: 6px; }
.set--head { min-height: 0; }
.set__who { font-size: 11px; color: var(--muted); text-align: center; }
.set__n { font-size: 12px; font-weight: 600; color: var(--muted); }
.set__x { text-align: center; opacity: .6; }
.set__bad { font-size: 11px; color: #ffb3bd; }
.set.is-bad .stp { box-shadow: inset 0 0 0 1px #e0596b; }
.tri { display: flex; gap: 8px; flex-wrap: wrap; }
.tri__c { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.par-out { font-size: 13px; font-weight: 600; color: #c7f5df; }

/* chips del marcador */
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { position: relative; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.pchip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.pchip:active { transform: scale(.94); }
.pchip.is-on { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.pchips--sm .pchip { min-height: 26px; font-size: 12px; }
.pchips--seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); }
.pchips--seg .pchip { box-shadow: none; background: none; }
.pchips--seg .pchip.is-on { background: var(--pill); }
.pchips--grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.pchips--grades .pchip { padding: 0 4px; }

/* intensidad: tres botones con barras */
.ints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.int { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 6px 2px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.int:active { transform: scale(.94); }
.int__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.int__bars i { width: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.int__bars i:nth-child(1) { height: 5px; } .int__bars i:nth-child(2) { height: 9px; } .int__bars i:nth-child(3) { height: 14px; }
.int--0 .int__bars i:nth-child(1), .int--1 .int__bars i:nth-child(-n+2), .int--2 .int__bars i { background: currentColor; }
.int.is-on { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.int--2.is-on { background: linear-gradient(150deg, #F5C518, #e0596b); color: #fff; }

/* métricas, plantillas, deporte elegido */
.mets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.met { display: flex; flex-direction: column; gap: 2px; }
.tpls { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tpls::-webkit-scrollbar { display: none; }
.tpl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.tpl .glyph { width: 14px; height: 14px; }
.tpl--last { background: rgba(79,185,138,.22); box-shadow: inset 0 0 0 1px rgba(79,185,138,.6); }
.tpl.is-on { background: var(--pill); color: var(--pill-ink); }
.pad-sport { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(150deg, color-mix(in srgb, var(--sc, #8fa6e0) 36%, rgba(255,255,255,.06)), color-mix(in srgb, var(--sc, #8fa6e0) 10%, rgba(255,255,255,.06))); }
.pad-sport img { width: 40px; height: 40px; object-fit: contain; }
.pad-sport b { flex: 1; font-size: 15px; }
.pad-search { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.pad-search:focus-within { outline: 2px solid #fff; outline-offset: 1px; }
.pad-search .glyph { width: 16px; height: 16px; opacity: .7; }
.pad-search__i { flex: 1; min-width: 0; min-height: 32px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
@media (min-width: 520px) { .sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 76px; padding: 8px 4px; border: 0; border-radius: 12px; background: linear-gradient(150deg, color-mix(in srgb, var(--sc, #8fa6e0) 30%, rgba(255,255,255,.06)), color-mix(in srgb, var(--sc, #8fa6e0) 8%, rgba(255,255,255,.06))); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; text-align: center; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.sp-tile:active { transform: scale(.95); }
.sp-tile img { width: 36px; height: 36px; object-fit: contain; }
.rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }

/* interruptores */
.tgl { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.06); cursor: pointer; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl__l { font-size: 13px; line-height: 1.25; }
.tgl__s { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.22); transition: background-color 200ms ease; }
.tgl__s::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease-out); }
.tgl input:checked + .tgl__s { background: #4fb98a; }
.tgl input:checked + .tgl__s::after { transform: translateX(16px); }
.tgl input:focus-visible + .tgl__s { outline: 2px solid #fff; outline-offset: 2px; }
.tgl--row { background: none; padding: 0; }

/* gimnasio */
.splits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .splits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.split { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 84px; padding: 10px; border: 0; border-radius: 14px; background: linear-gradient(150deg, rgba(229,139,184,.30), rgba(229,139,184,.08)); box-shadow: inset 0 0 0 1px rgba(229,139,184,.45); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.split:active { transform: scale(.96); }
.split b { font-size: 14px; }
.split span { font-size: 11px; color: var(--muted); line-height: 1.3; }
.split__bars { display: flex; gap: 3px; margin-top: auto; }
.split__bars em { width: 14px; height: 4px; border-radius: 2px; background: #e58bb8; }
.split--mine { background: linear-gradient(150deg, rgba(79,185,138,.28), rgba(79,185,138,.08)); box-shadow: inset 0 0 0 1px rgba(79,185,138,.5); }
.gtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gtop b { font-size: 15px; }
.gxs { display: flex; flex-direction: column; gap: 8px; }
.gx { --mc: #8fa6e0; padding: 8px 10px 6px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--mc), inset 0 0 0 1px rgba(255,255,255,.12); }
.gx.is-drag { opacity: .5; }
.gx__h { display: flex; align-items: center; gap: 8px; }
.gx__dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--mc); }
.gx__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gx__t b { font-size: 14px; line-height: 1.2; }
.gx__t span { font-size: 11px; color: var(--muted); }
.gx__pr { padding: 1px 7px; border-radius: 999px; background: linear-gradient(150deg, #F5C518, #e0596b); color: #fff; font-size: 10px; font-weight: 600; animation: obPop 420ms cubic-bezier(.3,1.6,.5,1); }
.gx__acts { display: flex; gap: 2px; }
.ib { position: relative; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ib::after { content: ''; position: absolute; inset: -8px -2px; }
.ib:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.ib[disabled] { opacity: .3; }
.ib .glyph { width: 14px; height: 14px; }
.ib--up { transform: rotate(180deg); }
.gx__sets { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.gs { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 10px; transition: background-color 200ms ease; }
.gs .stp__i { width: 40px; font-size: 14px; }
.gs .stp__b { width: 26px; height: 26px; font-size: 16px; }
.gs__n { width: 16px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.gs__u { font-size: 11px; color: var(--muted); }
.gs__ok { position: relative; margin-left: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--muted); cursor: pointer; transition: transform 200ms cubic-bezier(.3,1.6,.5,1), background-color 200ms ease; }
.gs__ok::after { content: ''; position: absolute; inset: -6px; }
.gs__ok .glyph { width: 16px; height: 16px; }
.gs__ok.is-on { background: #4fb98a; color: #fff; transform: scale(1.08); }
.gs.is-done { background: rgba(79,185,138,.14); }
.gx__add { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.gx__add .glyph { width: 12px; height: 12px; }
.gx__add:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.glib { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.14); }
.glib__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 240px; overflow-y: auto; }
@media (min-width: 520px) { .glib__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.glib__it { --mc: #8fa6e0; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.glib__it:hover { background: rgba(255,255,255,.16); }
.g-vol { margin: 0; font-size: 12px; color: #c7f5df; }
.grest { position: sticky; bottom: -16px; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; border-radius: 14px; background: #2a3f86; box-shadow: 0 -6px 20px rgba(0,0,0,.35); }
.grest span { font-size: 12px; color: var(--muted); }
.grest b { font-size: 18px; font-variant-numeric: tabular-nums; min-width: 44px; }
.grest__bar { flex: 1 1 100%; order: 9; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.grest__bar em { display: block; height: 100%; background: #4fb98a; transform-origin: left; transition: transform 250ms linear; }

/* ruleta */
.modal__card--roulette { max-width: 480px; }
.roulette-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.roulette-chips::-webkit-scrollbar { display: none; }
.roulette-chips .pchip { flex: 0 0 auto; }
.roulette { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 16px auto 4px; }
.roulette__wheel { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.1); will-change: transform; }
.roulette__wheel svg { display: block; width: 100%; height: 100%; }
.roulette__wheel.bump { animation: wheelBump 420ms cubic-bezier(.3,1.6,.5,1); }
@keyframes wheelBump { 40% { scale: 1.04; } 100% { scale: 1; } }
.roulette__pointer { position: absolute; z-index: 2; left: 50%; top: -10px; width: 22px; height: 28px; transform: translateX(-50%); transform-origin: 50% 20%; background: #F2F4F8; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.roulette__pointer.tick { animation: ptrTick 120ms ease-out; }
@keyframes ptrTick { 50% { transform: translateX(-50%) rotate(-18deg); } }
.roulette__hub { position: absolute; z-index: 2; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: var(--pill); color: var(--pill-ink); font: inherit; font-size: 15px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.25); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.roulette__hub:active { transform: translate(-50%, -50%) scale(.92); }
.roulette__hub[disabled] { opacity: .4; }
.roulette__count { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.roulette-win { --sc: #8fa6e0; display: grid; grid-template-columns: 72px 1fr; gap: 6px 12px; align-items: center; margin-top: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(150deg, color-mix(in srgb, var(--sc, #8fa6e0) 45%, rgba(255,255,255,.06)), color-mix(in srgb, var(--sc, #8fa6e0) 12%, rgba(255,255,255,.06))); animation: winUp 520ms cubic-bezier(.3,1.4,.5,1); }
.roulette-win img { width: 72px; height: 72px; object-fit: contain; }
.roulette-win__n { margin: 0; font-size: 20px; font-weight: 600; }
.roulette-win__c { margin: 0; font-size: 12px; color: var(--muted); }
.roulette-win__a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
@keyframes winUp { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* mínimo de jugadores en la tarjeta */
.mcard__min { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.2); font-size: 10px; font-weight: 500; }
.mcard__min.is-ok { background: rgba(79,185,138,.35); color: #e6fff3; }

/* ajustes compactos */
.modal__card--settings { max-width: 820px; }
@media (min-width: 700px) { body[data-screen="app"] .modal__card--settings { max-width: 820px; } }
.set-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .set-grid { grid-template-columns: 1fr 1fr; } }
.set-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line); }
.set-card__t { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.set-row { display: flex; align-items: center; gap: 8px; min-height: 40px; flex-wrap: wrap; }
.set-row__l { flex: 0 0 auto; min-width: 72px; font-size: 13px; color: var(--muted); }
.set-row__v { font-weight: 600; font-size: 14px; }
.set-inline { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.set-inline input, .set-stack input { flex: 1; min-width: 0; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 10px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.set-inline input:focus-visible, .set-stack input:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.set-stack { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin-top: 6px; }
.set-stack .btn { align-self: flex-start; }
.set-more > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; }
.set-more > summary::-webkit-details-marker { display: none; }
.set-more--danger > summary { color: #ffb3bd; }
.set-note { margin: 0; font-size: 12px; color: var(--muted); }
.set-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .set-two { grid-template-columns: 1fr; } }
.set-toggles { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 420px) { .set-toggles { grid-template-columns: 1fr 1fr; } }

/* listas en columnas */
body[data-screen="app"] #friends-list, body[data-screen="app"] #friend-requests-block .stack, body[data-screen="app"] #groups-list, body[data-screen="app"] .routine-pill-list, body[data-screen="app"] .sport-history-list, body[data-screen="app"] #recent-reviews-block, body[data-screen="app"] .participants, body[data-screen="app"] #tournaments-list, body[data-screen="app"] .notif-list--grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
body[data-screen="app"] .friend-row { flex-wrap: wrap; }
body[data-screen="app"] .friend-row .select--sm { flex: 1 1 120px; min-height: 30px; }
body[data-screen="app"] .achv-row { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); overflow: visible; margin-right: 0; padding-right: 0; }
body[data-screen="app"] .achv { width: auto; }
body[data-screen="app"] .routine-pill { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.07); }
body[data-screen="app"] .routine-pill__actions { display: flex; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .ob.pop, .gx__pr, .roulette-win, .roulette__wheel.bump, .roulette__pointer.tick { animation: none !important; }
  .stp__b, .ob, .pchip, .int, .split, .sp-tile, .gs__ok { transition: none !important; }
}
.set-grid { align-items: start; }
.set-card > * { margin-top: 0; margin-bottom: 0; }
.set-card > .btn { align-self: flex-start; }
.set-card form { margin: 0; }

/* ============================================================
   v7 — orden, asistencia, nivel fiable y avisos
   ============================================================ */
/* nav: botón Crear destacado en el centro */
.tab--create { color: var(--ink); }
.tab--create__dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pill); color: var(--pill-ink); box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform var(--t-press, .12s) ease; }
.tab--create__dot .glyph { width: 22px; height: 22px; }
.tab--create:active .tab--create__dot { transform: scale(.92); }
.tab--create .tab__label { display: none; }
/* Tú: Perfil / Estadísticas */
.you-seg { display: flex; gap: 4px; width: max-content; margin: 0 0 12px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.you-seg__b { position: relative; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; opacity: .75; }
.you-seg__b::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.you-seg__b.is-on, .you-seg__b[aria-selected="true"] { background: var(--pill); color: var(--pill-ink); opacity: 1; }
.you-seg__b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.you-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.you-actions .btn { min-height: 44px; }
/* carteles de desbloqueo progresivo */
.gate { margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.gate p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.4; }
.gate .glyph { flex: 0 0 auto; width: 22px; height: 22px; opacity: .8; }
.gate__bar { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.gate__bar em { display: block; height: 100%; background: var(--pill); transform-origin: left; transition: transform .5s ease; }
.is-gated { display: none !important; }
/* Liga en construcción */
.wip-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: repeating-linear-gradient(135deg, rgba(245,197,24,.16) 0 12px, rgba(245,197,24,.08) 12px 24px); box-shadow: inset 0 0 0 1px rgba(245,197,24,.4); font-size: 13px; font-weight: 500; }
.lt-cards { display: grid; gap: 10px; }
@media (min-width: 620px) { .lt-cards { grid-template-columns: 1fr 1fr; } }
.lt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 88px; padding: 14px 16px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lt-card b { font-size: 16px; }
.lt-card span { font-size: 13px; opacity: .8; }
.lt-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Tus partidos */
.mine__open { position: absolute; inset: 0; z-index: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.mine__open:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mine > :not(.mine__open):not(.mine__art) { position: relative; z-index: 1; pointer-events: none; }
.mine__foot { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; pointer-events: auto !important; }
.mine__foot .go, .mine__foot a { pointer-events: auto; }
.mine__ics { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; background: rgba(0,0,0,.22); color: var(--ink); position: relative; }
.mine__ics::after { content: ''; position: absolute; inset: -8px; }
.mine__ics .glyph { width: 14px; height: 14px; }
.mine__ics:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mine.needs-confirm { box-shadow: inset 0 0 0 2px var(--pill); }
.mine__rain { margin-top: 3px; padding: 1px 7px; border-radius: 999px; background: rgba(111,163,255,.3); font-size: 11px; font-weight: 500; }
.mine-none { margin: 2px 0 6px; font-size: 13px; opacity: .7; }
.go--ghost { background: rgba(255,255,255,.12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.go--ghost:hover { background: rgba(255,255,255,.2); }
.go--confirm { background: #4fb98a; color: #0d2a1f; }
.go--confirm:hover { background: #6fd3a4; }
.mcard__by { font-size: 11px; opacity: .8; }
/* reto por historial */
.rival-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(224,89,107,.22), rgba(245,197,24,.14)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.rival-card p { flex: 1 1 200px; margin: 0; font-size: 14px; line-height: 1.35; }
.rival-card__x { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.2); color: var(--ink); cursor: pointer; }
.rival-card__x::after { content: ''; position: absolute; inset: -6px; }
.rival-card__x .glyph { width: 14px; height: 14px; }
/* participantes: punto de confirmación y nivel */
.cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); flex: 0 0 auto; }
.cdot.is-on { background: #4fb98a; box-shadow: 0 0 0 3px rgba(79,185,138,.22); }
.lvl-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11px; font-weight: 500; white-space: nowrap; }
.lvl-tag.is-prov { background: rgba(245,197,24,.18); box-shadow: inset 0 0 0 1px rgba(245,197,24,.45); }
.att-tag { display: inline-flex; padding: 1px 7px; border-radius: 999px; background: rgba(79,185,138,.18); font-size: 11px; font-weight: 500; }
.att-tag.is-low { background: rgba(224,89,107,.2); }
/* ficha del partido */
.detail-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.detail-quick .btn { min-height: 40px; }
.confirm-line, .wait-line { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 13px; line-height: 1.35; }
.confirm-line.is-all { background: rgba(79,185,138,.16); }
.weather { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 13px; }
.weather.is-rain { background: rgba(111,163,255,.18); }
.weather__ico { width: 28px; height: 28px; }
.weather__t { font-size: 18px; font-weight: 600; }
.weather__warn { padding: 1px 8px; border-radius: 999px; background: #6fa3ff; color: #0e1a33; font-size: 12px; }
.link-btn { position: relative; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .85; }
.link-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.link-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.create-roulette { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
/* teléfono */
.phone-wrap { display: flex; align-items: stretch; gap: 0; }
.phone-wrap .phone-prefix + input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1; min-width: 0; }
.phone-prefix { display: grid; place-items: center; padding: 0 12px; border-radius: 10px 0 0 10px; background: rgba(0,0,0,.08); font-weight: 600; font-size: 14px; }
.vphone { margin-top: 8px; }
.vphone__f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vphone__f input { flex: 1 1 140px; min-width: 0; min-height: 40px; }
.vphone__num { font-weight: 600; font-size: 14px; }
.vphone__sim { margin: 6px 0 0; font-size: 13px; font-weight: 500; }
/* bienvenida y cuestionario */
.wsteps { display: flex; gap: 6px; margin: 0 0 12px; }
.wsteps i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); transition: background-color .3s ease; }
.wsteps i.is-on { background: var(--pill); }
.wel__t { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.2; }
.wel__nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; }
.sp-grid--multi .sp-tile.is-on { box-shadow: inset 0 0 0 2px var(--pill); background: color-mix(in srgb, var(--sc, #8fa6e0) 42%, rgba(255,255,255,.1)); }
.sp-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qz { margin: 12px 0; }
.qz__q { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.pchips--quiz { display: flex; flex-wrap: wrap; gap: 6px; }
.pchips--quiz .pchip { min-height: 36px; }
.qz__res { min-height: 22px; margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.qz__res.is-ready { color: #c7f5df; }
/* resultado: ¿vino todo el mundo? y voto de nivel */
.pchip.is-warn { background: #e0596b; color: #fff; }
.lvote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0; }
.lvote > span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
/* estadísticas por formato */
.formats-grid { margin-top: 12px; }
.fx-card { display: flex; flex-direction: column; gap: 8px; }
.fx-row { display: flex; flex-wrap: wrap; gap: 16px; }
.fx { display: flex; flex-direction: column; }
.fx b { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx small { font-size: 12px; opacity: .75; }
.fx-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-list span { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; }
.fx-list b { font-weight: 600; }
.fx-note { margin: 0; font-size: 12px; opacity: .7; }
.spark { width: 100%; height: 36px; color: var(--pill); }
.vol-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.vol-bars i { flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--pill); opacity: .85; }
/* perfil público */
.pp-head { display: flex; align-items: center; gap: 12px; }
.pp-avatar { width: 56px; height: 56px; font-size: 20px; }
.pp-name { margin: 0; font-size: 20px; font-weight: 600; }
.pp-user { margin: 0; font-size: 13px; opacity: .75; }
.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.pp-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,.08); }
.pp-stat b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.pp-stat small { font-size: 12px; opacity: .75; text-align: center; }
.pp-sports { display: grid; gap: 6px; }
.pp-sport { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--sc, #8fa6e0) 26%, transparent), transparent); }
.pp-sport img { width: 32px; height: 32px; object-fit: contain; }
.pp-sport__n { flex: 1; font-size: 14px; font-weight: 500; }
.pp-h2h { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-h2h span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; }
.pp-full { width: 100%; margin-top: 14px; }
/* partido fijo de grupo */
.fixed-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 13px; }
.fixed-sum .glyph { width: 16px; height: 16px; }
.fixed-sum.is-paused { opacity: .6; }
.fixed-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fixed-add { margin-top: 8px; }
.fixed-form { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.fixed-days { flex-wrap: wrap; }
/* rutinas compartidas */
.share-code { margin: 14px 0 8px; font-size: 28px; font-weight: 600; letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; }
.share-link { display: flex; gap: 8px; }
.share-link input { flex: 1; min-width: 0; font-size: 13px; }
/* importar */
.import-pick { position: relative; cursor: pointer; }
.import-pick:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.imp-list { display: grid; gap: 8px; }
.imp { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); }
.imp.is-off { opacity: .5; }
.imp__chk { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 600; cursor: pointer; }
.imp__chk input { width: 20px; height: 20px; accent-color: #4fb98a; }
.imp__meta { font-size: 13px; opacity: .8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tgl--push .tgl__l { display: flex; flex-direction: column; gap: 2px; }
.tgl--push small { font-size: 12px; opacity: .75; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .tab--create__dot, .gate__bar em, .wsteps i { transition: none; }
}

/* ============================================================
   LIGAS Y TORNEOS (competiciones)
   ============================================================ */
.cmp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.cmp-top .you-seg { margin: 0; }
.cmp-top .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.cmp-top .btn .glyph { width: 18px; height: 18px; }
.cmp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cmp-cards { display: grid; gap: 8px; }
@media (min-width: 720px) { .cmp-cards { grid-template-columns: 1fr 1fr; } }
.cmp-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border: 0; border-radius: 16px; overflow: hidden; isolation: isolate; text-align: left; color: var(--ink); font: inherit; cursor: pointer;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sc, #8fa6e0) 28%, rgba(255,255,255,.06)), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: transform var(--t-press, .12s) ease; }
.cmp-card:active { transform: scale(.98); }
.cmp-card:focus-visible, .cmp-next:focus-visible, .cmp-m:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cmp-card.has-act { box-shadow: inset 0 0 0 2px var(--pill); }
.cmp-card__art { flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; }
.cmp-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-card__name { font-size: 16px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-card__meta { font-size: 12px; opacity: .78; }
.cmp-card__line { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; }
.cmp-card__line .glyph { width: 14px; height: 14px; flex: 0 0 auto; }
.cmp-card__act { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: 12px; font-weight: 600; }
.cmp-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cmp-card__pos { font-size: 22px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cmp-chip { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: rgba(255,255,255,.12); }
.cmp-chip--inscripcion { background: rgba(245,197,24,.22); box-shadow: inset 0 0 0 1px rgba(245,197,24,.5); }
.cmp-chip--en_juego { background: rgba(79,185,138,.24); box-shadow: inset 0 0 0 1px rgba(79,185,138,.55); }
.cmp-chip--terminada { background: rgba(255,255,255,.14); }
.cmp-chip--cancelada { background: rgba(224,89,107,.22); }
.cmp-next { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 14px 16px; border: 0; border-radius: 16px; text-align: left; color: var(--pill-ink); font: inherit; cursor: pointer;
  background: linear-gradient(120deg, var(--pill), color-mix(in srgb, var(--sc, #8fa6e0) 40%, var(--pill))); }
.cmp-next__when { grid-column: 1 / -1; font-size: 12px; font-weight: 600; opacity: .8; }
.cmp-next__vs { font-size: 20px; font-weight: 600; line-height: 1.2; }
.cmp-next__comp { grid-column: 1; font-size: 13px; opacity: .8; }
.cmp-next .cmp-card__act { grid-column: 2; grid-row: 2 / 4; align-self: center; background: var(--pill-ink); color: var(--pill); }
.cmp-ranking { width: 100%; margin-top: 4px; }
.cmp-ranking .glyph { width: 20px; height: 20px; }
/* asistente */
.cmp-namef { margin-top: 6px; }
.cmp-fmts { display: grid; gap: 8px; }
.cmp-fmt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--ink); font: inherit; text-align: left; }
.cmp-fmt b { font-size: 15px; }
.cmp-fmt span { font-size: 13px; opacity: .8; }
.cmp-fmt.is-on { box-shadow: inset 0 0 0 2px var(--pill); background: rgba(255,255,255,.12); }
.cmp-fmt[disabled] { opacity: .5; cursor: not-allowed; }
.cmp-fmt em { position: absolute; top: 10px; right: 12px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; font-style: normal; font-weight: 600; }
.cmp-plan { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: 14px; font-weight: 500; }
.cmp-days { flex-wrap: wrap; }
.cmp-days .pchip { min-width: 44px; text-transform: capitalize; }
.cmp-rules-txt { margin: 0; font-size: 13px; line-height: 1.45; opacity: .9; }
.cmp-rules-ed { display: flex; flex-direction: column; gap: 6px; }
.cmp-steps3 { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cmp-steps3 .field { min-width: 0; }
/* detalle */
.cmp-head { display: flex; align-items: center; gap: 12px; }
.cmp-head__art { width: 56px; height: 56px; object-fit: contain; }
.cmp-head__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cmp-head__meta { margin: 0; font-size: 13px; opacity: .8; }
.cmp-champ { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, rgba(245,197,24,.35), rgba(245,197,24,.12)); box-shadow: inset 0 0 0 1px rgba(245,197,24,.55); }
.cmp-champ .glyph { width: 30px; height: 30px; color: #F5C518; }
.cmp-champ small { display: block; font-size: 12px; opacity: .8; }
.cmp-champ b { font-size: 20px; }
.cmp-champ.pop { animation: cmp-pop .5s var(--ease-out, ease-out); }
@keyframes cmp-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.cmp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.cmp-acts .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.cmp-acts .btn .glyph { width: 18px; height: 18px; }
.cmp-tabs { margin: 12px 0 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cmp-tabs::-webkit-scrollbar { display: none; }
.cmp-tabs .you-seg__b { padding: 0 12px; font-size: 13px; white-space: nowrap; }
.cmp-pane { min-height: 120px; }
.cmp-tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cmp-table th { padding: 6px 4px; font-size: 11px; font-weight: 600; text-align: center; opacity: .7; white-space: nowrap; }
.cmp-table td { padding: 9px 4px; text-align: center; border-top: 1px solid rgba(255,255,255,.08); }
.cmp-table .c-pos { width: 28px; }
.cmp-table .c-team { text-align: left; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-table .c-pts b { font-size: 15px; }
.cmp-table tr.is-me td { background: rgba(255,255,255,.08); }
.cmp-table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--pill); }
.cmp-table tr.is-champ .c-team { font-weight: 600; color: #F5C518; }
.cmp-table tr.is-out { opacity: .5; }
.cmp-rounds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; }
.cmp-rounds::-webkit-scrollbar { display: none; }
.cmp-rounds .pchip { flex: 0 0 auto; min-width: 44px; }
.cmp-rounds .pchip.is-done:not(.is-on) { opacity: .65; }
.cmp-rounds .pchip.has-dot::before { content: ''; position: absolute; top: 2px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #F5C518; }
.cmp-ms-list { display: flex; flex-direction: column; gap: 6px; }
.cmp-m { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.06); color: var(--ink); font: inherit; cursor: pointer; }
.cmp-m.is-mine { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.cmp-m.has-act { box-shadow: inset 0 0 0 2px var(--pill); }
.cmp-m__t { font-size: 14px; font-weight: 500; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-m__t--away { text-align: right; }
.cmp-m__t.is-win { font-weight: 700; }
.cmp-m__mid { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; }
.cmp-m__mid b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-m__mid small { font-size: 12px; opacity: .8; white-space: nowrap; }
.cmp-ms { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 500; background: rgba(255,255,255,.1); white-space: nowrap; }
.cmp-ms--por_confirmar { background: rgba(245,197,24,.25); }
.cmp-ms--confirmado { background: rgba(79,185,138,.25); }
.cmp-ms--wo { background: rgba(224,89,107,.22); }
.cmp-ms--disputed { background: #e0596b; color: #fff; }
.cmp-rest { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; opacity: .8; }
.cmp-rest .glyph { width: 15px; height: 15px; }
.cmp-teams { display: grid; gap: 8px; }
@media (min-width: 620px) { .cmp-teams { grid-template-columns: 1fr 1fr; } }
.cmp-team { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.cmp-team.is-me { box-shadow: inset 0 0 0 1px var(--pill); }
.cmp-team.is-out { opacity: .5; }
.cmp-team__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cmp-team__h b { font-size: 15px; }
.cmp-team__h small { font-size: 12px; opacity: .7; }
.cmp-team__m { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.cmp-av { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cmp-av small { font-size: 11px; opacity: .7; }
.cmp-teamf { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.cmp-checks { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.cmp-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.cmp-check:hover { background: rgba(255,255,255,.06); }
.cmp-check input { width: 20px; height: 20px; accent-color: #4fb98a; }
.cmp-check.is-off { opacity: .5; cursor: default; }
.cmp-check small { font-size: 12px; opacity: .75; }
.cmp-info { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.cmp-info dt { font-size: 12px; font-weight: 600; opacity: .7; padding-top: 2px; }
.cmp-info dd { margin: 0; }
.cmp-info small { font-size: 12px; opacity: .75; }
.cmp-cancel { margin-top: 12px; color: #f2a0aa; }
/* partido */
.cmp-mhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; text-align: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sc, #8fa6e0) 26%, rgba(255,255,255,.06)), rgba(255,255,255,.05)); }
.cmp-mhead > b { font-size: 16px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.cmp-mhead > b.is-win { font-weight: 700; }
.cmp-mhead__s { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-mhead__when { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; opacity: .85; }
.cmp-mhead__when .glyph { width: 14px; height: 14px; }
.cmp-mstate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; padding: 10px 12px; border-radius: 12px; background: rgba(245,197,24,.14); font-size: 13px; line-height: 1.4; }
.cmp-mstate small { flex-basis: 100%; font-size: 12px; opacity: .8; }
.cmp-mstate br { display: none; }
.cmp-mstate.is-ok { background: rgba(79,185,138,.16); }
.cmp-mstate.is-bad { background: rgba(224,89,107,.2); }
.cmp-mstate .glyph { width: 16px; height: 16px; }
.cmp-rform { transition: opacity .2s ease; }
.cmp-rform.is-wo { opacity: .35; pointer-events: none; }
.cmp-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.cmp-score > div { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cmp-score small { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-score__x { padding-bottom: 12px; font-size: 22px; opacity: .6; }
.cmp-sets { display: flex; flex-direction: column; gap: 6px; }
.cmp-sets__h, .cmp-sets__r { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 8px; align-items: center; }
.cmp-sets__h small { font-size: 12px; text-align: center; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sets__r span { font-size: 13px; opacity: .8; }
.cmp-sets__r input { min-height: 44px; text-align: center; font-size: 18px; }
.cmp-winner { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.cmp-winner .pchip { min-height: 48px; font-size: 14px; white-space: normal; line-height: 1.2; }
.cmp-resched { margin-top: 4px; align-items: end; }
.cmp-resched .btn { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
  .cmp-card, .cmp-rform { transition: none; }
  .cmp-champ.pop { animation: none; }
}
.cmp-sportgrid { max-height: 252px; overflow-y: auto; padding: 2px; margin: 4px -2px 0; scrollbar-width: thin; }
#cmp-create-body .field > .stp, #cmp-body .field > .stp { align-self: flex-start; width: auto; }
#cmp-create-body .field, #cmp-body .cmp-rules-ed .field { display: flex; flex-direction: column; gap: 4px; }
.cmp-stepf { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* ============================================================
   LIGAS Y TORNEOS — v8: cuadro, formularios por deporte, resumen, calendario
   ============================================================ */
.cmp-plan { display: block; }
.cmp-plan__t { margin: 0 0 4px; font-size: 12px; font-weight: 600; opacity: .75; }
.cmp-plan ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.cmp-plan li { font-size: 14px; line-height: 1.4; font-weight: 500; }
.cmp-wrapchips { flex-wrap: wrap; }
.cmp-fmt:focus-visible, .cmp-feat:focus-visible, .cmp-br__m:focus-visible, .cmp-why:focus-visible, .cmp-bracket:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pad-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal__hint.is-warn { color: #F5C518; }
/* aviso al empezar */
.cmp-launch { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(79,185,138,.2); box-shadow: inset 0 0 0 1px rgba(79,185,138,.55); animation: cmp-launch-in .5s ease-out both; }
.cmp-launch p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.cmp-launch__ico { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #4fb98a; color: #0d1f17; animation: cmp-launch-pop .6s .15s ease-out both; }
.cmp-launch__ico .glyph { width: 20px; height: 20px; }
@keyframes cmp-launch-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes cmp-launch-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* próximo partido destacado */
.cmp-feat { display: grid; gap: 3px; width: 100%; margin: 0 0 12px; padding: 14px 16px; border: 0; border-radius: 16px; text-align: left; color: var(--pill-ink); font: inherit; cursor: pointer; background: linear-gradient(120deg, var(--pill), color-mix(in srgb, var(--sc, #8fa6e0) 40%, var(--pill))); }
.cmp-feat small { font-size: 12px; font-weight: 600; opacity: .8; }
.cmp-feat b { font-size: 20px; line-height: 1.2; }
.cmp-feat span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cmp-feat span .glyph { width: 14px; height: 14px; }
.cmp-feat em { justify-self: start; margin-top: 4px; padding: 3px 12px; border-radius: 999px; background: var(--pill-ink); color: var(--pill); font-size: 12px; font-style: normal; font-weight: 600; }
/* tablas: columnas por deporte, forma reciente y explicación del orden */
.cmp-table .c-team { max-width: 150px; }
.cmp-table .c-team__n { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cmp-table .c-form { text-align: left; padding-left: 8px; }
.cmp-table tr.is-adv td:first-child { box-shadow: inset 3px 0 0 #4fb98a; }
.cmp-table--rank td { min-width: 32px; }
.cmp-form { display: inline-flex; gap: 3px; }
.cmp-form__d { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 700; color: #0d1f17; }
.cmp-form__d--V { background: #4fb98a; }
.cmp-form__d--E { background: #F5C518; }
.cmp-form__d--D { background: #e0596b; color: #fff; }
.cmp-why { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px -8px -12px 0; border: 0; background: transparent; color: inherit; cursor: pointer; vertical-align: middle; opacity: .75; }
.cmp-why .glyph { width: 16px; height: 16px; }
.cmp-why[aria-expanded="true"] { opacity: 1; color: #F5C518; }
.cmp-why-row td { padding: 0 8px 10px; border-top: 0; text-align: left; }
.cmp-why-txt { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(245,197,24,.14); font-size: 13px; line-height: 1.4; white-space: normal; }
.cmp-pool { margin: 0 0 14px; }
.cmp-pool__t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.cmp-pool__t small { font-size: 12px; font-weight: 500; opacity: .75; }
/* cuadro visual */
.cmp-bracket { overflow-x: auto; margin: 0 -4px; padding: 4px 4px 10px; scrollbar-width: thin; border-radius: 12px; }
.cmp-br { display: flex; gap: 28px; min-width: min-content; }
.cmp-br__col { flex: 0 0 168px; display: flex; flex-direction: column; }
.cmp-br__h { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-align: center; opacity: .75; }
.cmp-br__cells { flex: 1; display: flex; flex-direction: column; }
.cmp-br__cell { flex: 1; display: flex; align-items: center; position: relative; padding: 5px 0; min-height: 76px; }
.cmp-br__col:not(.is-last) .cmp-br__cell::after { content: ''; position: absolute; top: 50%; right: -14px; width: 14px; border-top: 2px solid rgba(255,255,255,.28); }
.cmp-br__col:not(.is-last) .cmp-br__cell:nth-child(odd)::before { content: ''; position: absolute; top: 50%; bottom: 0; right: -14px; border-right: 2px solid rgba(255,255,255,.28); }
.cmp-br__col:not(.is-last) .cmp-br__cell:nth-child(even)::before { content: ''; position: absolute; top: 0; bottom: 50%; right: -14px; border-right: 2px solid rgba(255,255,255,.28); }
.cmp-br__col + .cmp-br__col .cmp-br__m::before { content: ''; position: absolute; top: 50%; left: -14px; width: 14px; border-top: 2px solid rgba(255,255,255,.28); }
.cmp-br__m { position: relative; display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 0; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cmp-br__m[disabled] { cursor: default; opacity: .8; }
.cmp-br__m.is-mine { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.cmp-br__m.has-act { box-shadow: inset 0 0 0 2px var(--pill); }
.cmp-br__r { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 4px 8px; font-size: 13px; }
.cmp-br__r + .cmp-br__r { border-top: 1px solid rgba(255,255,255,.1); }
.cmp-br__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-br__r b { font-variant-numeric: tabular-nums; }
.cmp-br__r.is-win { font-weight: 700; background: rgba(79,185,138,.22); }
.cmp-br__r.is-lose { opacity: .55; }
.cmp-br__r.is-me .cmp-br__n::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--pill); vertical-align: middle; }
.cmp-br__r.is-tbd, .cmp-br__r.is-bye { opacity: .55; font-size: 12px; }
.cmp-br__m small { padding: 2px 8px 4px; font-size: 11px; opacity: .75; }
.cmp-br__third { max-width: 220px; margin: 0 0 8px; }
/* marcas del ranking por pruebas */
.cmp-time { display: flex; gap: 8px; }
.cmp-time label { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; font-size: 12px; }
.cmp-time input { width: 100%; min-height: 48px; text-align: center; font-size: 20px; }
.cmp-m--solo { grid-template-columns: 1fr auto; }
/* sets con tie-break y validación */
.cmp-sets__r { grid-template-columns: 56px 1fr 1fr; row-gap: 4px; }
.cmp-sets__tb { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cmp-sets__tb[hidden] { display: none; }
.cmp-sets__tb input { max-width: 96px; min-height: 40px; text-align: center; }
.cmp-sets__err { grid-column: 1 / -1; min-height: 0; font-size: 12px; color: #f2a0aa; }
.cmp-sets__err:empty { display: none; }
.cmp-sets__r.is-bad input { box-shadow: inset 0 0 0 2px #e0596b; }
@media (prefers-reduced-motion: reduce) {
  .cmp-launch, .cmp-launch__ico { animation: none; }
}

/* ===== v8.1 · táctil 44 px, tipografía mínima 11 px y maquetación móvil ===== */
/* Panel de notificaciones: hoja fija con 8 px a cada lado, fondo atenuado y botón de cerrar */
.notif-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(8, 20, 38, .55); }
.notif-panel, body[data-screen="app"] .notif-panel { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; max-width: 420px; margin-inline: auto; max-height: calc(100dvh - 80px); }
.notif-close { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: var(--paper); cursor: pointer; box-shadow: inset 0 0 0 2px var(--paper); } /* taste-skill-ignore: anillo interior */
.notif-close::after { content: ''; position: absolute; inset: -4px; }
.notif-close .glyph { width: 16px; height: 16px; }
.notif-close:focus-visible { outline: 3px solid var(--pill); outline-offset: 2px; }
/* Zonas táctiles de 44 px sin cambiar el aspecto: área invisible ::after */
.mine__ics::after, .mcard__where::after, .sport-card__fav::after, .avatar-edit-btn::after, .suggest-card__avatar::after { content: ''; position: absolute; inset: -9px; }
.mine__ics, .sport-card__fav, .avatar-edit-btn, .suggest-card__avatar, .sos-pill, #header-avatar { position: relative; }
.sos-pill::after, #header-avatar::after, .icon-btn::after { content: ''; position: absolute; inset: -4px; min-width: 44px; min-height: 44px; }
.sos-pill, #header-avatar, .icon-btn { min-width: 40px; min-height: 40px; }
.foldable > summary, .pokedex__section-title { min-height: 44px; display: flex; align-items: center; }
#pokedex-search, .sportsearch input, .friend-search input, .rng input[type=range] { min-height: 44px; }
.rng input[type=range] { padding-block: 10px; }
.btn, .quick-chip, .modal__x, .tab { min-height: 44px; min-width: 44px; }
.btn--sm { min-height: 44px; }
.notif-panel__head .btn { min-height: 44px; }
/* Tipografía: nada por debajo de 11 px */
.mcard__sos, .mcard__min, .avatar-tier-badge, .day small, .sport-card__tier, .gx__pr, .mine__rem { font-size: 11px; }
/* Tarjetas de la home: texto con min-width:0, pie que envuelve y sin columnas de 1 carácter */
.mine > *, .mcard > * { min-width: 0; }
.mine { flex-basis: 168px; }
.mine__sport, .mine__when { overflow-wrap: anywhere; }
.mine__rem { max-width: 100%; white-space: normal; }
.mine__foot, .mcard__foot { flex-wrap: wrap; row-gap: 4px; }
.mcard__foot .btn, .mine__foot .btn { flex: 1 1 auto; white-space: nowrap; }
/* Refuerzos de especificidad (los estilos de componente posteriores ganaban a las reglas genéricas) */
body .ib { min-width: 44px; min-height: 44px; }
body .mcard__where { padding-block: 5px; margin-block: -5px; box-sizing: content-box; }
body #sportsearch-input, body #friend-search-input, body #pokedex-search { min-height: 44px; box-sizing: border-box; }
body summary.pokedex__section-title, body .foldable > summary { min-height: 44px; }
body #btn-change-avatar, body .avatar-edit-btn { min-width: 44px; min-height: 44px; }
body #avatar-tier-badge, body .avatar-tier-badge, body .sport-card__tier, body .gx__pr, body .mcard__min, body .mcard__sos { font-size: 11px; }
@media (max-width: 480px) { body .sport-card .sport-card__tier, body span.sport-card__tier { font-size: 11px; } }
body .sport-card .sport-card__tier, body .pokedex .sport-card__tier, body span.sport-card__tier { font-size: 11px !important; } /* gana a la regla de ficha compacta */
.notif-panel__head { flex-wrap: wrap; }
.notif-panel__head #notif-title { flex: 1 1 auto; min-width: 0; }
.notif-panel__head #btn-notif-read-all { order: 3; flex: 1 0 100%; }
.notif-panel { z-index: 61; }
.notif-backdrop { z-index: 60; }
body[data-screen="app"] .notif-panel__head .btn, body[data-screen="app"] .notif-close { color: #0A1F4D; box-shadow: inset 0 0 0 2px #0A1F4D; }
body[data-screen="app"] .notif-panel__head .btn { background: transparent; }
.empty__sub { margin: 4px 0 12px; font-size: 14px; opacity: .8; }
.empty .btn { margin-top: 4px; }

/* ===== v9 · lanzamiento: legal, soporte, moderación, compartir, sedes y panel de admin ===== */
.lv-check { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 14px; line-height: 1.4; cursor: pointer; }
.lv-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--accent, #8fe3b0); }
.lv-check input:focus-visible { outline: 3px solid var(--pill, #8fe3b0); outline-offset: 2px; }
.lv-check a, .lv-links a, .lv-foot-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lv-links { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.lv-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.lv-foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.lv-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lv-tools .btn { min-height: 44px; }
.lv-tools .btn .glyph { width: 16px; height: 16px; }
.lv-msg-report { position: relative; margin: 2px 0 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 11px; opacity: .7; text-decoration: underline; cursor: pointer; }
.lv-msg-report::after { content: ''; position: absolute; inset: -16px -10px; }
.lv-msg-report:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.lv-fav { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--pill, #8fe3b0); color: var(--pill-ink, #0f2c4b); font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.lv-venues { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; margin: 8px 0 12px; }
.lv-zone { margin: 10px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.lv-tabs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.lv-rep { margin: 0 0 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lv-rep p { margin: 0 0 4px; overflow-wrap: anywhere; }
.lv-rep__h { font-size: 15px; } .lv-rep__m { font-size: 12px; opacity: .8; }
.lv-rep__q, .lv-rep__c { font-size: 13px; padding: 6px 10px; border-left: 3px solid rgba(255,255,255,.35); }
.lv-h { margin: 18px 0 8px; font-size: 16px; } .lv-sub { font-size: 12px; opacity: .7; font-weight: 400; }
.lv-bar { display: grid; grid-template-columns: 88px 1fr 44px; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; }
.lv-bar__t { display: block; height: 14px; border-radius: 7px; background: rgba(255,255,255,.12); overflow: hidden; }
.lv-bar__t i { display: block; height: 100%; border-radius: 7px; background: var(--pill, #8fe3b0); }
.lv-bar__v { text-align: right; font-variant-numeric: tabular-nums; }
.lv-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.lv-table th, .lv-table td { padding: 8px 6px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.12); }
.lv-table th:first-child { text-align: left; font-weight: 600; }
.lv-spark { display: block; width: 100%; height: 70px; color: var(--pill, #8fe3b0); }
#modal-admin .modal__card { max-width: 560px; }
@media (max-width: 420px) { .lv-bar { grid-template-columns: 74px 1fr 40px; } }
.set-row .lv-links { flex: 1 1 100%; }

/* ============================================================
   OLIMPIADA ENTRE AMIGOS
   Mismo lenguaje que Ligas y torneos: tarjetas translúcidas, píldoras y tipografía 11-28 px.
   ============================================================ */
.oly-block { margin: 8px 0 20px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(245,197,24,.22), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-block__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.oly-block__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; }
.oly-block__lead { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 46ch; }
.oly-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.oly-empty, .oly-muted { margin: 4px 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.oly-trophy-line { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.oly-trophy-line .glyph { width: 18px; height: 18px; color: var(--yellow); flex: 0 0 auto; }
.oly-card { display: flex; flex-direction: column; gap: 8px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-card.has-act { box-shadow: inset 0 0 0 2px var(--pill); } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-card__main { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 16px; }
.oly-card__main:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.oly-card__ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.12); }
.oly-card__ico .glyph { width: 24px; height: 24px; }
.oly-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oly-card__name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oly-card__meta { font-size: 12px; color: var(--muted); }
.oly-card__line { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.oly-card__line .glyph { width: 14px; height: 14px; }
.oly-card__act { align-self: flex-start; margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: 12px; font-weight: 600; }
.oly-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.oly-card__pos { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oly-card__btns { display: flex; gap: 8px; padding: 0 14px 12px; }
.oly-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: rgba(255,255,255,.14); }
.oly-chip .glyph { width: 12px; height: 12px; }
.oly-chip--en_juego, .oly-chip--desempate { background: var(--green); color: #10261b; }
.oly-chip--terminada { background: var(--pill); color: var(--pill-ink); }
.oly-chip--gold { background: var(--yellow); color: #2b1d05; white-space: normal; }

/* formulario y piezas comunes */
.oly-form { display: flex; flex-direction: column; gap: 12px; }
.oly-lab { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.oly-lab small { font-size: 12px; font-weight: 400; color: var(--muted); }
.oly-input { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: var(--ink); font: inherit; font-size: 15px; } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.oly-input--sm { min-height: 44px; font-size: 13px; }
.oly-input:disabled { opacity: .5; }
.oly-inline { display: flex; gap: 8px; align-items: center; }
.oly-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oly-row .oly-lab { margin: 0; }
.oly-stp { display: inline-flex; align-items: center; gap: 6px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.10); }
.oly-stp b { min-width: 34px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.oly-stp__b { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; }
.oly-stp__b:disabled { opacity: .35; cursor: not-allowed; }
.oly-stp__b:active { transform: scale(.92); }
.oly-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oly-pchip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-pchip .glyph { width: 16px; height: 16px; }
.oly-pchip.is-on { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.oly-pchip.is-out { opacity: .4; text-decoration: line-through; }
.oly-pchip:disabled { cursor: default; }
.oly-pchip:active:not(:disabled) { transform: scale(.95); }
.oly-pchip--p { padding-left: 4px; }
.oly-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.oly-seg__b { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 10px 12px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-seg__b b { font-size: 14px; }
.oly-seg__b small { font-size: 12px; color: var(--muted); }
.oly-seg__b.is-on { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.oly-seg__b.is-on small { color: var(--pill-ink); opacity: .8; }
.oly-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.oly-acts--center { justify-content: center; }
.oly-main { margin-top: 12px; }
.oly-av { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 600; }
.oly-av img { width: 100%; height: 100%; object-fit: cover; }
.oly-pchip--p .oly-av { width: 36px; height: 36px; }
.oly-warn { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--yellow); }
.oly-warn .glyph { width: 14px; height: 14px; }
.oly-cancel { margin-top: 16px; }

/* editor del pool */
.oly-pool { display: flex; flex-direction: column; gap: 6px; }
.oly-quick { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-quick .glyph { width: 22px; height: 22px; flex: 0 0 auto; }
.oly-quick span { display: flex; flex-direction: column; gap: 2px; }
.oly-quick b { font-size: 14px; }
.oly-quick small { font-size: 12px; color: var(--muted); }
.oly-quick.is-on { background: var(--pill); color: var(--pill-ink); }
.oly-quick.is-on small { color: var(--pill-ink); opacity: .8; }
.oly-style { padding: 4px 10px 8px; border-radius: 14px; background: rgba(255,255,255,.05); }
.oly-style.is-open { background: rgba(255,255,255,.08); }
.oly-style .oly-chips { margin-top: 6px; }
.oly-style__head { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.oly-style__head--static { justify-content: space-between; padding: 0 4px; font-size: 14px; }
.oly-style__name { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.oly-style__name b { flex: 1; font-size: 14px; font-weight: 600; }
.oly-style__name span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.oly-style__name .glyph { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease-out); }
.oly-style.is-open .oly-style__name .glyph { transform: rotate(180deg); }
.oly-tog { position: relative; flex: 0 0 auto; width: 52px; height: 44px; border: 0; background: none; cursor: pointer; }
.oly-tog::before { content: ''; position: absolute; left: 2px; right: 2px; top: 11px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background-color var(--t-hover) ease; }
.oly-tog__k { position: absolute; top: 14px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--t-ui) var(--ease-out); }
.oly-tog--on::before { background: var(--green); }
.oly-tog--some::before { background: rgba(79,185,138,.5); }
.oly-tog--on .oly-tog__k { transform: translateX(24px); }
.oly-tog--some .oly-tog__k { transform: translateX(12px); }
.oly-customs { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.oly-custom { display: flex; align-items: center; gap: 8px; padding-left: 8px; }
.oly-custom b { font-size: 14px; }
.oly-custom small { flex: 1; font-size: 12px; color: var(--muted); }
.oly-addsport { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.oly-special { display: flex; flex-direction: column; gap: 8px; }
.oly-sround { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.oly-sround__top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }

/* olimpiada abierta */
.oly-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.oly-head__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.12); flex: 0 0 auto; }
.oly-head__ico .glyph { width: 26px; height: 26px; }
.oly-head__meta { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.oly-head__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oly-tabs { margin-bottom: 12px; }
.oly-pane { display: flex; flex-direction: column; }
.oly-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oly-people li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border-radius: 12px; background: rgba(255,255,255,.05); }
.oly-people li b { flex: 1; font-size: 14px; font-weight: 500; }
.oly-people li small { font-size: 12px; color: var(--muted); }
.oly-people li .glyph { width: 16px; height: 16px; color: var(--yellow); }
.oly-people li.is-dim { opacity: .6; }
.oly-people .oly-acts { margin: 0; }
.oly-link { margin-top: 8px; }
.oly-link__row code { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.18); font-size: 12px; word-break: break-all; }

/* prueba */
.oly-test { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-test--idle, .oly-test--cd { text-align: center; align-items: center; }
.oly-test__k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.oly-cd { margin: 4px 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; padding: 10px 26px; border-radius: 999px; background: rgba(255,255,255,.12); }
.oly-cd.is-hot { background: var(--red); color: #fff; animation: oly-pulse 1s ease-in-out infinite; }
@keyframes oly-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.oly-wheelbox { position: relative; display: grid; place-items: center; margin: 8px auto 0; width: min(280px, 100%); }
.oly-wheel { width: 100%; max-width: 280px; aspect-ratio: 1; display: block; }
.oly-reveal { position: relative; z-index: 1; align-self: center; margin: -36px auto 0; transform: translateY(16px) scale(.9); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 200px; max-width: 100%; padding: 12px 18px; border-radius: 16px; background: var(--pill); color: var(--pill-ink); opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); box-shadow: var(--shadow-float); text-align: center; }
.oly-reveal.is-in { opacity: 1; transform: none; }
.oly-reveal__ico .glyph { width: 28px; height: 28px; }
.oly-reveal.is-in .oly-reveal__ico { animation: oly-pop 600ms var(--ease-out); }
@keyframes oly-pop { 0% { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }
.oly-reveal__name { font-size: 22px; font-weight: 700; line-height: 1.1; }
.oly-reveal__fmt { font-size: 13px; font-weight: 500; }

.oly-flash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: #fff; opacity: 0; }
.oly-flash.is-on { animation: oly-flash 600ms ease-out; }
@keyframes oly-flash { 0% { opacity: .75; } 100% { opacity: 0; } }
.oly-ficha { margin-top: 6px; border-radius: 12px; background: rgba(255,255,255,.06); }
.oly-ficha summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.oly-ficha summary::-webkit-details-marker { display: none; }
.oly-ficha summary span { flex: 1; }
.oly-ficha summary .glyph { width: 16px; height: 16px; }
.oly-ficha[open] summary .glyph:last-child { transform: rotate(180deg); }
.oly-ficha ol { margin: 0; padding: 0 12px 12px 32px; font-size: 13px; line-height: 1.45; }
.oly-ficha[open] ol { animation: oly-in 300ms var(--ease-out); }
@keyframes oly-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.oly-rest { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; font-size: 13px; }
.oly-rest .glyph { width: 16px; height: 16px; }
.oly-variant { margin-top: 4px; }
.oly-used { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oly-used li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 13px; }
.oly-used li > span { flex: 1; }
.oly-used li .glyph { width: 16px; height: 16px; flex: 0 0 auto; }
.oly-used li .oly-acts { margin: 0; }
.oly-used small { font-size: 12px; color: var(--muted); }
.oly-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.oly-alert { padding: 12px 14px; border-radius: 14px; background: var(--pill); color: var(--pill-ink); }
.oly-alert p { margin: 0; font-size: 14px; font-weight: 600; }
.oly-alert .btn--ghost { color: var(--pill-ink); box-shadow: inset 0 0 0 2px var(--pill-ink); } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-bucket { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.oly-teams { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oly-teams li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 36px; }
.oly-teams li span { flex: 1; }
.oly-teams li.is-mine { font-weight: 600; }
.oly-teams .glyph { width: 16px; height: 16px; }
.oly-teams small { font-size: 12px; color: var(--muted); }
.oly-matches { display: flex; flex-direction: column; gap: 8px; }
.oly-match { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); }
.oly-match.is-mine { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-match__fmt { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.oly-match__vs { margin: 2px 0; font-size: 15px; font-weight: 600; }
.oly-match__vs i { font-style: normal; font-weight: 400; color: var(--muted); padding: 0 4px; }
.oly-match__st { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.oly-match__cards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.oly-match__cards .glyph { width: 14px; height: 14px; }
.oly-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); flex: 0 0 auto; }
.oly-dot--propuesto { background: var(--yellow); }
.oly-dot--disputa { background: var(--red); }
.oly-dot--resuelto { background: var(--green); }
.oly-mute { align-self: center; }

/* comodines */
.oly-hand { margin-top: 16px; }
.oly-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oly-cardbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 104px; padding: 10px 6px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--ink); font: inherit; text-align: center; cursor: pointer; transition: transform var(--t-press) var(--ease-out); } /* taste-skill-ignore: trazo interior, no es sombra */
.oly-cardbtn .glyph { width: 26px; height: 26px; }
.oly-cardbtn b { font-size: 13px; line-height: 1.15; }
.oly-cardbtn small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.oly-cardbtn.is-ready { background: linear-gradient(160deg, var(--yellow), #c97f1d); color: #241703; box-shadow: none; }
.oly-cardbtn.is-ready small { color: #241703; opacity: .8; }
.oly-cardbtn:active { transform: scale(.95); }
.oly-cardsheet { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.oly-cardsheet .glyph { width: 40px; height: 40px; }
.oly-cardsheet p { margin: 0; font-size: 14px; }

/* resultados */
.oly-grid { display: flex; flex-direction: column; gap: 6px; }
.oly-pos { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 14px; }
.oly-pos .oly-input { grid-column: 1 / -1; }
.oly-mark { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; font-size: 14px; }

/* clasificación, pruebas y jugador */
.oly-table { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oly-row-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px; border: 0; border-radius: 14px; background: rgba(255,255,255,.06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.oly-row-btn.is-me { background: rgba(255,255,255,.14); }
.oly-row-btn.is-dim { opacity: .55; }
.oly-row-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.oly-table__pos { width: 24px; font-size: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.oly-table__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oly-table__name b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oly-table__name small { font-size: 12px; color: var(--muted); }
.oly-table__pts { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.oly-ico .glyph { width: 18px; height: 18px; color: var(--yellow); }
.oly-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oly-tests li { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.oly-tests__h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 2px; font-size: 14px; }
.oly-tests__h .glyph { width: 18px; height: 18px; }
.oly-tests__h small { font-size: 12px; color: var(--muted); }
.oly-player { display: flex; align-items: center; gap: 12px; }
.oly-player .oly-av { width: 48px; height: 48px; font-size: 16px; }
.oly-player p { margin: 0; font-size: 14px; }
.oly-moves { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oly-moves li { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 13px; }
.oly-moves small { font-size: 12px; color: var(--muted); }

/* final */
.oly-final { display: flex; flex-direction: column; align-items: center; text-align: center; }
.oly-champ { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 24px; font-weight: 700; }
.oly-champ .glyph { width: 28px; height: 28px; color: var(--yellow); }
.oly-ar { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14px; }
.oly-ar .glyph { width: 18px; height: 18px; color: var(--cyan); }
.oly-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 6px; width: 100%; max-width: 360px; margin: 16px 0 8px; }
.oly-podium__c { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 0; border-radius: 14px 14px 0 0; background: rgba(255,255,255,.10); }
.oly-podium__c b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oly-podium__c span { font-size: 12px; color: var(--muted); }
.oly-podium__c i { font-style: normal; font-size: 28px; font-weight: 700; padding: 4px 0 10px; }
.oly-podium__c--1 { min-height: 170px; background: linear-gradient(180deg, rgba(245,197,24,.55), rgba(245,197,24,.15)); }
.oly-podium__c--2 { min-height: 140px; }
.oly-podium__c--3 { min-height: 120px; }
@media (prefers-reduced-motion: reduce) {
  .oly-cd.is-hot, .oly-reveal.is-in .oly-reveal__ico, .oly-flash.is-on, .oly-ficha[open] ol { animation: none; }
  .oly-reveal, .oly-tog__k, .oly-style__name .glyph { transition: none; }
}

/* objetivos táctiles de 44 px también con los botones compactos del tema */
body[data-screen="app"] :is(#modal-oly, #modal-oly-sheet, #modal-oly-create, .oly-block) .btn { min-height: 44px; }
body[data-screen="app"] :is(#modal-oly, #modal-oly-sheet, #modal-oly-create) .btn--icon { width: 44px; }
body[data-screen="app"] :is(#modal-oly, #modal-oly-sheet, #modal-oly-create) .oly-input { min-height: 44px; }
body[data-screen="app"] .oly-tabs .you-seg__b { min-height: 44px; }
body[data-screen="app"] :is(#modal-oly, #modal-oly-sheet, #modal-oly-create) .modal__x { width: 44px; height: 44px; }

/* ============================================================
   MISS DEPORTES — marca: logos, marca de agua, tipografía deportiva
   ============================================================ */
html { font-synthesis-weight: none; }
/* botones, etiquetas y marcadores: Exo 2 cursiva (como "MissDeportes" del logo) */
.btn, .chip, .sos-pill, .rank-badge, .fixture__time, .fixture__count, .stat-card__value, .xp-badge, .fig__num,
.chapter__num, .chapter__count, .sport-card__level, .rivalry-row__record, .progress__label, .level-slider__readout,
.sport-detail-head__nivel, .wrapped-card__big, .ans-row__time, .flame-card__value {
  font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: .01em; }
body[data-screen="app"] .btn { font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: .02em; }

/* logos */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.brand-logo img { display: block; width: auto; height: 36px; max-width: 100%; }
.lnd-nav__mark img { height: clamp(46px, 4.6vw, 72px); }
.topbar__mark { overflow: visible; }
.topbar__mark img, body[data-screen="app"] .topbar__mark img { height: 34px; }
@media (max-width: 420px) { .topbar__mark img, body[data-screen="app"] .topbar__mark img { height: 30px; } .lnd-nav__mark img { height: 42px; } }
.tabs__brand img, body[data-screen="app"] .tabs__brand img { height: 44px; }
.auth__escudo { display: block; width: min(62vw, 220px); max-width: 280px; height: auto; margin: -12px auto 20px;
  filter: drop-shadow(0 14px 26px rgba(10, 31, 77, .28)); animation: md-in 400ms var(--ease-out) both; }
@media (min-width: 900px) { .auth__escudo { width: 240px; } }
@keyframes md-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth__escudo { animation: none; } }

/* marca de agua: un único pseudo-elemento fijo, sin JS ni repintado al hacer scroll */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('img/brand/marca-agua.webp') center 55% / min(78vw, 560px) no-repeat;
  opacity: .1;
}
body[data-screen="app"]::before { opacity: .13; }
html.no-wm body::before { display: none; }
@media print { body::before { display: none; } }

/* estados vacíos con el símbolo */
.view p.empty, .view div.empty { text-align: center; }
.view p.empty::before, .view div.empty::before { content: ''; display: block; width: 76px; height: 45px; margin: 0 auto 10px;
  background: url('img/brand/simbolo.webp') center / contain no-repeat; opacity: .55; }

/* oro del trofeo: primeros puestos, ganadores, rankings */
.rank-badge--1, .tournament-winner-banner { background: var(--gold); color: #0B111B; }
.rank-badge--2 { background: #C9D1DE; color: #0B111B; }
.rank-badge--3 { background: #D98A4E; color: #0B111B; }
body[data-screen="app"] .tournament-winner-banner { background: linear-gradient(120deg, #F5C518, #FFE27A); color: #0B111B; }
/* selector "Busco partido / Organizo uno": anula el .seg contenedor de amigos */
.ui-dialog__seg > .seg { display: flex; align-items: center; justify-content: center; margin: 0; overflow: visible; padding: 0 12px; }

/* ============================================================
   RACHAS — fuego por deporte (álbum), racha semanal y victorias seguidas
   ============================================================ */
.md-flame, .md-bolt { display: block; width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .md-flame--3 .md-flame__body { transform-origin: 16px 35px; animation: md-flick 1.9s ease-in-out infinite; }
  .md-flame--3 .md-flame__i { transform-origin: 16px 33px; animation: md-flick 1.3s ease-in-out infinite reverse; }
  .md-flame--3 .md-flame__sparks { animation: md-spark 2.4s ease-in-out infinite; }
  .md-flame--2 .md-flame__i { transform-origin: 16px 33px; animation: md-flick 1.6s ease-in-out infinite; }
}
@keyframes md-flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.97, 1.04) skewX(-2deg); } 65% { transform: scale(1.02, .97) skewX(1.5deg); } }
@keyframes md-spark { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* tarjetas de la cabecera del perfil */
.flame-card__flame, body[data-screen="app"] .flame-card__flame, .flame-card__flame.lit, body[data-screen="app"] .flame-card__flame.lit {
  width: 46px; height: 46px; background: none !important; border-radius: 0; color: inherit; }
.flame-card__flame .glyph { display: none; }
.flame-card__help { margin: 2px 0 0; font-size: 11px; line-height: 1.3; color: var(--muted); }
.flame-card__risk { margin: 3px 0 0; font-size: 11px; font-weight: 700; color: #FFB443; }
body[data-screen="app"] .flame-card { align-items: center; padding: 10px 12px; }
body[data-screen="app"] .flame-card.is-lit { background: linear-gradient(120deg, rgba(255,138,31,.16), rgba(255,255,255,.05) 60%); box-shadow: inset 0 0 0 1px rgba(255,170,60,.28); }
body[data-screen="app"] #flame-wins.is-lit { background: linear-gradient(120deg, rgba(245,197,24,.16), rgba(30,111,224,.10) 60%); box-shadow: inset 0 0 0 1px rgba(245,197,24,.3); }

/* fuego en la carta del álbum: arriba a la derecha; la estrella de favorito se aparta */
.sport-card__streak { position: absolute; z-index: 5; right: 6px; top: 6px; display: flex; align-items: center; gap: 1px; min-width: 44px; min-height: 44px; padding: 0 4px 0 2px; border: 0; background: none; cursor: pointer; color: #fff; }
.sport-card__streak svg { width: 31px; height: 33px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.sport-card__streak b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 17px; line-height: 1; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 8px rgba(255,140,40,.6); margin-left: -3px; }
.sport-card__streak.is-risk b { color: #C9D1DE; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.sport-card[data-streak] .sport-card__fav { right: 50px; }

/* popover de la racha */
.md-pop { position: absolute; z-index: 300; padding: 12px 14px; border-radius: 14px; background: #131C2B; color: #F2F4F8; box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12); font-size: 13px; line-height: 1.4; animation: md-in 200ms var(--ease-out) both; }
.md-pop p { margin: 0 0 6px; } .md-pop p:last-child { margin: 0; }
.md-pop__t { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.md-pop__t svg { width: 26px; height: 28px; flex-shrink: 0; }
.md-pop__risk { color: #FFB443; font-weight: 700; }
.md-pop__best { color: #9AA6BA; }

/* ficha del deporte y perfil público */
.sd-streak { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; }
.sd-streak svg { width: 22px; height: 24px; flex-shrink: 0; }
.sd-streak__risk { margin-top: 2px; font-size: 12px; font-weight: 700; color: #FFB443; }
.pp-sport__streak { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; }
.pp-sport__streak svg { width: 18px; height: 20px; }
.pp-sport__streak b { font-family: var(--font-sport); font-style: italic; font-weight: 800; font-size: 13px; }

.sport-card__streak .md-flame--3 { width: 36px; height: 37px; }
@media (max-width: 480px) { body[data-screen="app"] .flame-card { gap: 8px; padding: 10px; } .flame-card__flame, body[data-screen="app"] .flame-card__flame { width: 38px; height: 38px; } }
@media (max-width: 440px) { body[data-screen="app"] .streak-row { grid-template-columns: 1fr; } }

/* ===== Ubicación por mapa, radio, GPS, historial plegable, retos (v15) ===== */
.hp{display:grid;gap:10px}
.hp__row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.hp__search{flex:1 1 200px;margin:0}
.hp__me{min-height:44px;white-space:nowrap}
.hp__map{height:260px;border-radius:14px;overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.18));background:#0B111B;touch-action:pan-x pan-y}
.hp__status{margin:0;font-size:14px;color:var(--muted,#9AA6BA)}
.hp__results{list-style:none;margin:0;padding:4px;border-radius:12px;background:var(--card,#121b2b);border:1px solid var(--line,rgba(255,255,255,.18));max-height:220px;overflow:auto}
.hp__results li{padding:12px;border-radius:8px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.hp__results li:hover,.hp__results li:focus-visible{background:rgba(255,255,255,.08);outline:none}
.hp__none{color:var(--muted,#9AA6BA);cursor:default!important}
.radius-bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:4px 0 8px}
.radius-bar .chip-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.notice{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:14px;border:1px solid var(--line,rgba(255,255,255,.18));background:rgba(47,107,255,.12);margin:8px 0}
.notice p{margin:2px 0 0;font-size:14px}.notice__act{display:flex;gap:8px}
.notice--warn{background:rgba(229,72,77,.14)}
.empty-near{padding:12px 0}.empty-near__act{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.venue-disc{margin:6px 0;color:var(--muted,#9AA6BA)}.venue-disc a{color:inherit;text-decoration:underline}
.dlg{border:1px solid var(--line,rgba(255,255,255,.18));border-radius:16px;background:var(--card,#121b2b);color:inherit;max-width:min(92vw,420px);padding:0}
.dlg::backdrop{background:rgba(0,0,0,.6)}.dlg__body{padding:16px;display:grid;gap:12px}.dlg__act{display:flex;gap:8px;justify-content:flex-end}
.set-more{margin-top:10px}.set-more summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
/* grabadora y detalle de actividad */
.rec-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin:12px 0}
.rec-stats__v{display:block;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}.rec-stats__l{font-size:13px;color:var(--muted,#9AA6BA)}
.rec-map{height:300px;border-radius:14px;overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.18));margin:8px 0}.rec-map.is-small{height:200px}
.rec-warn{font-size:14px;color:var(--muted,#9AA6BA);margin:6px 0}.rec-warn--keep{padding:10px 12px;border-radius:12px;background:rgba(198,244,50,.1);color:inherit}
.tv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.tv-stat{padding:12px;border-radius:14px;background:rgba(255,255,255,.06)}.tv-stat b{display:block;font-size:22px;font-variant-numeric:tabular-nums}.tv-stat span{font-size:13px;color:var(--muted,#9AA6BA)}
.tv-splits{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.tv-splits th,.tv-splits td{padding:6px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.tv-photos{display:flex;gap:8px;flex-wrap:wrap}.tv-photo{position:relative;margin:0;width:96px;height:96px;border-radius:12px;overflow:hidden}.tv-photo img{width:100%;height:100%;object-fit:cover}
.tv-photo__x{position:absolute;top:2px;right:2px;min-width:32px;min-height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1}
.tv-add{display:inline-flex;align-items:center;min-height:44px}
.tv-set{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin:12px 0}
.tv-date{color:var(--muted,#9AA6BA);margin:0 0 6px}
/* historial plegable */
.acc{display:grid;gap:6px}.acc__item{border-radius:12px;background:rgba(255,255,255,.05)}
.acc__h{margin:0;font:inherit}
.acc__btn{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 12px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:12px}
.acc__btn:focus-visible{outline:3px solid #C6F432;outline-offset:2px}
.acc__date{color:var(--muted,#9AA6BA);font-size:14px;min-width:84px}.acc__t{flex:1;font-weight:600}
.acc__chev{transition:transform .2s}.acc__btn[aria-expanded="true"] .acc__chev{transform:rotate(180deg)}
.acc__panel{padding:4px 12px 12px}.acc__panel p{margin:4px 0}
@media (prefers-reduced-motion:reduce){.acc__chev{transition:none}}
/* retos */
.goals{padding:14px;border-radius:16px;background:rgba(255,255,255,.05);margin:12px 0}
.goals__head{display:flex;justify-content:space-between;align-items:center;gap:8px}.goals__head h3{margin:0;font-size:18px}
.goals__list{list-style:none;margin:8px 0;padding:0;display:grid;gap:10px}.goals__sub{margin:10px 0 0;font-weight:600}
.goal__top{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.goal__bar{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:4px}.goal__bar i{display:block;height:100%;background:#C6F432;border-radius:99px;transition:width .4s}
.goal.is-done .goal__top{color:#C6F432}
@media (prefers-reduced-motion:reduce){.goal__bar i{transition:none}}
@media (max-width:420px){.tv-set{grid-template-columns:1fr}.rec-stats__v{font-size:24px}}

/* ============================================================
   GRUPOS HABITUALES: tarjetas, menú ⋯ y ficha del grupo (groups-ui.js)
   ============================================================ */
.block-head__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--green); flex-shrink: 0; }
body[data-screen="app"] #groups-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gcard { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--paper-2); min-width: 0; }
.gcard__head { display: flex; align-items: center; gap: 10px; }
.gcard__ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--cat, rgba(255,255,255,.14)); color: var(--cat-ink, var(--ink)); }
.gcard__ico .glyph { width: 22px; height: 22px; }
.gcard__title { flex: 1; min-width: 0; }
.gcard__title h4 { font-size: 17px; line-height: 1.15; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__title p { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.gcard__title .glyph { width: 13px; height: 13px; }
.gcard h4, .gcard p, .gmatch p, .gmatch b { margin: 0; }
.gcard__next, .gcard__league, .gcard__none { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--ink); font: inherit; font-size: 13px; text-align: left; }
.gcard__next, .gcard__league { cursor: pointer; }
.gcard__next > span, .gcard__none > span { flex: 1; min-width: 0; }
.gcard__league { flex-wrap: wrap; }
.gcard__next .glyph, .gcard__league .glyph, .gcard__none .glyph { width: 16px; height: 16px; flex-shrink: 0; }
.gcard__rk { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; }
.gcard__rk i { font-style: normal; font-weight: 700; color: var(--green); }
.gcard__rk em { font-style: normal; font-weight: 700; }
.gcard__muted { color: var(--muted); font-size: 12.5px; }
.gcard__link { margin-left: auto; border: 0; background: none; color: var(--green); font: inherit; font-weight: 600; cursor: pointer; padding: 4px; }
.gcard__people { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gcard__invite { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--green); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px; }
.gcard__invite .glyph { width: 16px; height: 16px; }
.gcard__acts { display: flex; gap: 8px; }
.gcard__acts .btn:first-child { flex: 1; }
.gavs { display: flex; }
.gavs .gav { margin-left: -8px; box-shadow: 0 0 0 2px var(--paper); }
.gavs .gav:first-child { margin-left: 0; }
.gav { position: relative; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,.88); color: #0A1F4D; font-size: 11px; font-weight: 700; vertical-align: middle; }
.gav img { width: 100%; height: 100%; object-fit: cover; }
.gav.is-owner { box-shadow: 0 0 0 2px #F5C518; }
.gavs .gav.is-owner { box-shadow: 0 0 0 2px #F5C518; }
.gav--more { background: rgba(255,255,255,.18); color: var(--ink); }
.gmenu { position: relative; }
.gmenu summary { list-style: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink); background: rgba(255,255,255,.06); }
.gmenu summary::-webkit-details-marker { display: none; }
.gmenu[open] summary { background: rgba(255,255,255,.14); }
.gmenu__pop { position: absolute; right: 0; top: 42px; z-index: 30; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: #1b2638; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.gmenu__pop button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.gmenu__pop button:hover { background: rgba(255,255,255,.08); }
.gmenu__pop button.is-danger { color: var(--red); }
.gmenu__pop .glyph { width: 18px; height: 18px; flex-shrink: 0; }
.gtabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin: 0 -2px; scrollbar-width: none; }
.gtabs::-webkit-scrollbar { display: none; }
.gtabs .pchip { flex-shrink: 0; }
.gtabs .pchip.is-on { background: var(--pill); }
.gdot { display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.gbody { display: flex; flex-direction: column; gap: 8px; }
.gh { margin: 14px 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gh:first-child { margin-top: 2px; }
.gmatch { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--paper-2); }
.gmatch__top { display: flex; align-items: center; gap: 10px; }
.gmatch__top b { font-size: 15px; }
.gmatch__top p { color: var(--muted); font-size: 13px; margin-top: 1px; }
.gst-list { display: flex; flex-wrap: wrap; gap: 6px; }
.gst { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12.5px; }
.gst .gav { width: 24px; height: 24px; font-size: 10px; }
.gst i { font-style: normal; font-weight: 600; font-size: 11.5px; }
.gst--ok i { color: var(--green); }
.gst--in i { color: #8fb4ff; }
.gst--wait i { color: #F5C518; }
.gst--out { opacity: .6; }
.gst--out i { color: var(--red); }
.gacts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.gmatch .gacts { margin-left: 0; }
.gslot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); font-size: 14px; }
.gslot .glyph { width: 16px; height: 16px; flex-shrink: 0; }
.gslot.is-paused { opacity: .6; }
.gform { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.gform--row { grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; }
.gform--row .btn { grid-column: auto; }
#form-group-code { grid-template-columns: 1fr auto; grid-auto-flow: row; margin-bottom: 10px; }
.gdays { overflow-x: auto; }
.grow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--paper-2); }
.grow__name { flex: 1 1 140px; min-width: 0; font-size: 14px; display: flex; flex-direction: column; }
.grow__name small { color: var(--muted); font-size: 12px; }
.grow__name.is-clickable { cursor: pointer; }
.gbadge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11.5px; font-weight: 600; }
.gbadge .glyph { width: 12px; height: 12px; }
.gbadge--owner { background: rgba(245,197,24,.2); color: #F5C518; }
.gbadge--sub { background: rgba(143,180,255,.2); color: #8fb4ff; }
.ginvite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); }
.ginvite__code b { letter-spacing: .12em; }
.gsettings { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.gleague { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--paper-2); }
.gleague__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gleague__head .glyph, .gleague__lead .glyph { width: 16px; height: 16px; vertical-align: -3px; }
.gleague__lead { font-size: 14px; }
.gtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gtable th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 6px; }
.gtable td { padding: 6px; border-top: 1px solid var(--line); }
.gtable td:first-child { white-space: nowrap; }
.gtable td .gav { margin-right: 4px; width: 22px; height: 22px; font-size: 9px; }
.gtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 6px; border-radius: 12px; background: var(--paper-2); text-align: center; }
.gtile b { font-size: 22px; line-height: 1.1; }
.gtile span { color: var(--muted); font-size: 12px; }
.gtile .glyph { width: 18px; height: 18px; color: #ff9b3d; }
.gchat__thread { min-height: 200px; max-height: 46svh; }
.gmoney { font-size: 13px; font-weight: 600; color: var(--muted); }
.gmoney.is-pos { color: var(--green); }
.gmoney.is-neg { color: var(--red); }
@media (max-width: 520px) { .gform--row { grid-auto-flow: row; grid-auto-columns: auto; } #form-group-code { grid-template-columns: 1fr auto; } .gtiles .gtile b { font-size: 18px; } }