/* Zorrones — sistema visual v2 "Night Court": vidrio sobre aurora nocturna, lima eléctrico, zorro naranja y cian de datos. */
:root {
  --bg: #050816;
  --bg-2: #0a1030;
  --panel: rgba(16, 24, 56, 0.62);
  --panel-solid: #0f1736;
  --panel-hi: rgba(28, 40, 86, 0.7);
  --line: rgba(150, 175, 255, 0.12);
  --line-hi: rgba(200, 255, 61, 0.35);
  --text: #f2f5ff;
  --muted: #8f9cc4;
  --lime: #c8ff3d;
  --lime-d: #9fd80f;
  --fox: #ff6b2c;
  --fox-2: #ffb547;
  --cyan: #3de8ff;
  --blue: #4f7dff;
  --oro: #f7c948;
  --plata: #cdd6e4;
  --bronce: #e0915a;
  --danger: #ff5d73;
  --ok: #3ddc97;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --glow-lime: 0 0 0 1px rgba(200, 255, 61, 0.25), 0 12px 40px -12px rgba(200, 255, 61, 0.45);
  --display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: var(--sans); font-size: 15px; line-height: 1.5;
  color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(200, 255, 61, 0.35); }

/* ---------- fondo: aurora + grilla de cancha en perspectiva ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg-fx::before, .bg-fx::after { content: ''; position: absolute; pointer-events: none; }
.bg-fx::before {
  inset: -30%;
  background:
    radial-gradient(35% 30% at 20% 15%, rgba(79, 125, 255, 0.32), transparent 70%),
    radial-gradient(30% 28% at 85% 10%, rgba(255, 107, 44, 0.22), transparent 70%),
    radial-gradient(40% 35% at 70% 90%, rgba(200, 255, 61, 0.12), transparent 70%),
    radial-gradient(30% 30% at 10% 85%, rgba(61, 232, 255, 0.14), transparent 70%);
  filter: blur(10px);
  animation: aurora 26s ease-in-out infinite alternate;
}
.bg-fx::after {
  left: -25%; right: -25%; bottom: 0; height: 60vh; opacity: 0.22;
  background-image: linear-gradient(rgba(61, 232, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 232, 255, 0.5) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: gridMove 6s linear infinite;
}
@keyframes aurora { 50% { transform: translate(5%, -4%) rotate(6deg) scale(1.08); } 100% { transform: translate(-4%, 3%) rotate(-4deg) scale(1.04); } }
@keyframes gridMove { to { background-position: 0 64px, 0 0; } }
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.8; }

h1, h2, h3 { margin: 0 0 6px; line-height: 1.12; font-family: var(--display); letter-spacing: -0.02em; }
h1 { font-size: 34px; font-weight: 700; }
h2 { font-size: 28px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
h3 > .ico { color: var(--lime); }
p { margin: 4px 0; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.link { color: var(--lime); font-weight: 600; font-size: 14px; transition: opacity 0.2s; }
.link:hover { opacity: 0.8; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; color: var(--lime); font-family: var(--display); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; margin-top: 18px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-sm.end { align-items: flex-end; }
.ico { width: 18px; height: 18px; flex: none; }
.section-title { margin: 8px 0 16px; display: flex; align-items: center; gap: 12px; font-size: 26px; }
.section-title .ico { width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: var(--bg); background: var(--lime); box-shadow: var(--glow-lime); }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
#app { max-width: 1140px; margin: 0 auto; padding: 0 16px 120px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
/* franja de lectura a todo el ancho sin desbordar: sombra expandida recortada a la altura de la barra */
.topbar { background: rgba(5, 8, 22, 0.78); box-shadow: 0 0 0 100vmax rgba(5, 8, 22, 0.78); clip-path: inset(0 -100vmax); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand .fox { filter: drop-shadow(0 4px 12px rgba(255, 107, 44, 0.45)); }
.userchip { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; transition: 0.25s var(--ease); flex: none; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.25); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(255, 93, 115, 0.1); }

/* dock de navegación flotante; la píldora activa se desliza entre íconos con View Transitions */
.nav { position: fixed; z-index: 30; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 2px; padding: 6px; border-radius: 24px;
  background: rgba(10, 16, 42, 0.78); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06); width: min(560px, calc(100% - 24px)); }
.nav a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 18px; color: var(--muted); font-size: 11px; font-weight: 600; transition: color 0.25s; isolation: isolate; }
.nav a .ico { width: 22px; height: 22px; transition: transform 0.35s var(--spring); }
.nav a:hover { color: var(--text); }
.nav a:hover .ico { transform: translateY(-2px); }
.nav a.active { color: #08100a; }
.nav a.active::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #e2ff8a, var(--lime) 50%, var(--lime-d)); box-shadow: 0 8px 24px -6px rgba(200, 255, 61, 0.7); view-transition-name: nav-pill; }
.page { animation: pageIn 0.5s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }

/* View Transitions: cambio de pantalla con fundido y desplazamiento */
::view-transition-old(root) { animation: vtOut 0.22s var(--ease) both; }
::view-transition-new(root) { animation: vtIn 0.38s var(--ease) both; }
::view-transition-group(nav-pill), ::view-transition-group(tab-pill) { animation-duration: 0.42s; animation-timing-function: var(--spring); }
@keyframes vtOut { to { opacity: 0; transform: scale(0.985); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- tarjetas de vidrio con borde degradado y foco luminoso ---------- */
.card {
  position: relative; border-radius: var(--radius); padding: 20px; margin-bottom: 16px; isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.02) 65%, rgba(200, 255, 61, 0.18)) border-box;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.card::before, .stat::before, .match::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 255, 61, 0.08), transparent 45%);
}
.card:hover::before, .stat:hover::before, .match:hover::before { opacity: 1; }
.card.glow { background: linear-gradient(var(--panel-hi), var(--panel-hi)) padding-box, conic-gradient(from var(--ang, 0deg), var(--lime), var(--cyan), var(--fox), var(--lime)) border-box; animation: spinBorder 6s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spinBorder { to { --ang: 360deg; } }
.card.warn { background: linear-gradient(rgba(247, 201, 72, 0.08), rgba(247, 201, 72, 0.08)) padding-box, linear-gradient(rgba(247, 201, 72, 0.5), rgba(247, 201, 72, 0.2)) border-box; color: var(--oro); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.grid-2.tight, .grid-3.tight { gap: 12px; margin-bottom: 12px; }
.reveal { animation: reveal 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(6px); } }
.calm .reveal, .calm .page, .calm .progress span, .calm .step-block, .calm .champion, .calm .fox-anim .f, .calm .fox-anim .fx-halo { animation: none; }

/* ---------- botones, insignias, formularios ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); font: 600 14px var(--sans); cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.3s, background 0.3s, border-color 0.3s; white-space: nowrap; isolation: isolate; }
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, #e2ff8a, var(--lime) 45%, var(--lime-d)); color: #08100a; border-color: transparent; box-shadow: 0 10px 30px -12px rgba(200, 255, 61, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn-primary:hover { box-shadow: 0 16px 36px -10px rgba(200, 255, 61, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); border-color: transparent; }
.btn-primary::after, .btn-gold::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%); transform: translateX(-120%); }
.btn-primary:hover::after, .btn-gold:hover::after { transition: transform 0.75s var(--ease); transform: translateX(120%); }
.btn-gold { background: linear-gradient(120deg, #f7c948, #fff0a8, #e0a92a); background-size: 200% 100%; color: #2a1d00; border-color: transparent; animation: shimmer 3s linear infinite; box-shadow: 0 10px 30px -12px rgba(247, 201, 72, 0.8); }
@keyframes shimmer { to { background-position: -200% 0; } }
.btn-ghost { background: rgba(255, 255, 255, 0.03); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(255, 93, 115, 0.4); }
.btn-danger:hover { background: rgba(255, 93, 115, 0.12); border-color: var(--danger); }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; padding: 13px 18px; font-size: 15px; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: 0.25; pointer-events: none; animation: ripple 0.6s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.chip, .tab { position: relative; overflow: hidden; }
.fx-canvas { transition: opacity 0.6s; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.badge .ico { width: 14px; height: 14px; }
.badge-live { background: rgba(200, 255, 61, 0.12); color: var(--lime); border-color: rgba(200, 255, 61, 0.25); }
.badge-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
.badge-blue { background: rgba(61, 232, 255, 0.12); color: var(--cyan); border-color: rgba(61, 232, 255, 0.25); }
.badge-oro { background: rgba(247, 201, 72, 0.14); color: var(--oro); border-color: rgba(247, 201, 72, 0.3); }
.badge-plata { background: rgba(205, 214, 228, 0.12); color: var(--plata); border-color: rgba(205, 214, 228, 0.25); }
.badge-muted { background: rgba(255, 255, 255, 0.06); color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.field.narrow { max-width: 280px; margin-bottom: 14px; }
input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 6, 20, 0.55); color: var(--text); font: 500 15px var(--sans); transition: border 0.25s, box-shadow 0.25s, background 0.25s; }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 255, 255, 0.2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lime); background: rgba(3, 6, 20, 0.8); box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.14), 0 0 24px -6px rgba(200, 255, 61, 0.5); }
select option, select optgroup { background: var(--panel-solid); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-top: 6px; }
.check input { width: auto; accent-color: var(--lime); }
.search { width: 190px; padding: 8px 14px; border-radius: 999px; }
.select-pill { width: auto; border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.hint { margin-top: 14px; font-size: 12px; color: var(--muted); text-align: center; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.tabs { display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(3, 6, 20, 0.5); border: 1px solid var(--line); margin: 0 0 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tabs-scroll { overflow-x: auto; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .tabs-scroll .tab { flex: 0 0 auto; } }
.tab { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: 600 14px var(--sans); cursor: pointer; white-space: nowrap; transition: color 0.25s; isolation: isolate; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 18px -8px rgba(0, 0, 0, 0.6); view-transition-name: tab-pill; }
.tab.active::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.tab.oro.active { color: var(--oro); }
.tab.oro.active::after { background: var(--oro); box-shadow: 0 0 10px var(--oro); }
.tab.plata.active { color: var(--plata); }
.tab.plata.active::after { background: var(--plata); box-shadow: 0 0 10px var(--plata); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); font: 600 13px var(--sans); cursor: pointer; transition: 0.25s var(--ease); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--lime); transform: translateY(-1px); }
.chip.active { background: var(--lime); color: #08100a; border-color: transparent; box-shadow: 0 6px 18px -6px rgba(200, 255, 61, 0.8); }
.chips-info { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.chips-info span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.chips-info .ico { width: 15px; height: 15px; color: var(--lime); }

/* ---------- avatares ---------- */
.av { --s: 36px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%; font-weight: 700; font-family: var(--display); font-size: calc(var(--s) * 0.36); color: #fff; letter-spacing: 0.02em;
  background: linear-gradient(135deg, hsl(var(--h) 90% 62%), hsl(calc(var(--h) + 50) 85% 42%)); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px hsla(var(--h), 90%, 60%, 0.35), 0 6px 14px -6px hsl(var(--h) 80% 50%); }
.av-pair { display: inline-flex; flex: none; }
.av-pair .av + .av { margin-left: calc(var(--s) * -0.3); }
.av-pair.ghost { width: 40px; }

/* ---------- marca: zorro facetado + wordmark ---------- */
.fox { display: block; flex: none; overflow: visible; }
.fox-xs { width: 36px; height: 36px; }
.fox-sm { width: 84px; height: 84px; margin: 0 auto 10px; filter: drop-shadow(0 10px 24px rgba(255, 107, 44, 0.35)); }
.fox-md { width: 72px; height: 72px; filter: drop-shadow(0 10px 24px rgba(255, 107, 44, 0.35)); }
.fox-lg { width: 104px; height: 104px; filter: drop-shadow(0 14px 30px rgba(255, 107, 44, 0.5)); animation: float 5s ease-in-out infinite; }
.fox-xl { width: 132px; height: 132px; filter: drop-shadow(0 18px 40px rgba(255, 107, 44, 0.55)); }
.fox .f { transform-box: fill-box; transform-origin: center; }
.fox .fx-halo { opacity: 0; }
.fox-eyes { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.fx-glint { animation: glint 6s ease-in-out infinite; }
.fox-anim .f { animation: facetIn 0.7s var(--spring) both; animation-delay: calc(var(--d) * 90ms + 100ms); }
.fox-anim .fx-halo { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 1.4s var(--ease) 0.2s forwards, haloFade 1s ease 1.6s forwards; }
.fox.wave { animation: wave 3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes facetIn { from { opacity: 0; transform: scale(0.2) rotate(-25deg); } }
@keyframes draw { 0% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes haloFade { to { opacity: 0; } }
@keyframes glint { 0%, 55% { transform: translateX(0); } 80%, 100% { transform: translateX(210px); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes float { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg); } 80% { transform: rotate(7deg); } 90% { transform: rotate(-4deg); } }
.wordmark { font-family: var(--display); font-weight: 700; letter-spacing: 0.06em; line-height: 0.9; background: linear-gradient(100deg, #fff 35%, var(--lime) 50%, #fff 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmerText 6s linear infinite; }
.wordmark .wm-z { color: var(--lime); -webkit-text-fill-color: var(--lime); text-shadow: 0 0 24px rgba(200, 255, 61, 0.6); }
@keyframes shimmerText { to { background-position: -250% 0; } }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; padding: 32px 0; }
.brand-big { display: flex; align-items: center; gap: 18px; }
.brand-big h1 { font-size: clamp(52px, 8.5vw, 88px); margin: 0; }
.brand-big p { color: var(--muted); margin: 10px 0 0; font-size: 16px; letter-spacing: 0.04em; }
.brand-big p::before { content: ''; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.hero-art { margin: 10px 0; position: relative; }
.hero-court { width: 100%; max-width: 620px; height: auto; display: block; }
/* cancha realista: estructura metálica, red, focos y haces de luz */
.hc-post { stroke: #9aa6c2; stroke-width: 1.3; opacity: 0.75; }
.hc-rail { stroke: #b9c4dc; stroke-width: 1.6; opacity: 0.7; }
.hc-tower { stroke: #222b45; stroke-width: 3.2; stroke-linecap: round; }
.hc-netmesh line, .hc-netmesh polyline { stroke: rgba(255, 255, 255, 0.2); stroke-width: 0.6; }
.hc-nettop { stroke: #f4f7ff; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.hc-netpost { stroke: #dfe6f2; stroke-width: 3.4; stroke-linecap: round; }
.hc-brand { font-family: var(--display); font-weight: 700; fill: rgba(255, 255, 255, 0.24); }
.hc-brand.sub { fill: rgba(200, 255, 61, 0.38); font-weight: 600; }
.hc-beams { mix-blend-mode: screen; animation: beams 6s ease-in-out infinite; }
@keyframes beams { 50% { opacity: 0.75; } }
.hc-pool { mix-blend-mode: screen; }
.hc-ballcore { filter: drop-shadow(0 0 6px rgba(216, 255, 58, 0.75)); }
.spark { animation: spark 2.4s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes spark { 0%, 100% { opacity: 0.1; transform: scale(0.5); } 50% { opacity: 0.9; transform: scale(1.3); } }
.hero-next { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: 100%; }
.hero-next b { color: var(--lime); }
.hero-feats { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; color: var(--text); font-size: 13px; }
.hero-feats li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.hero-feats .ico { color: var(--lime); width: 16px; height: 16px; }
.login-card { padding: 24px; }
.login-card .tabs { margin-bottom: 20px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(200, 255, 61, 0.7); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(200, 255, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 255, 61, 0); } }

/* ---------- splash ---------- */
.splash { min-height: 90vh; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--muted); font-weight: 600; text-align: center; }
.splash .wordmark { font-size: 44px; }
.loader { width: 180px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.loader span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--lime), transparent); animation: load 1.1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- inicio ---------- */
.greet { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 18px; }
.greet h1 { font-size: 32px; }
.next-card { overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, rgba(79, 125, 255, 0.3), transparent 55%), linear-gradient(var(--panel-hi), var(--panel-hi)) padding-box, linear-gradient(145deg, rgba(200, 255, 61, 0.5), rgba(255, 255, 255, 0.04) 40%, rgba(61, 232, 255, 0.3)) border-box; }
.next-card::after { content: ''; position: absolute; z-index: -1; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f7ffb0, var(--lime) 45%, var(--lime-d)); opacity: 0.14; filter: blur(2px); animation: bounce 3.6s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translate(-24px, 34px); } }
.next-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.countdown { display: flex; gap: 10px; margin: 18px 0; }
.countdown div { position: relative; min-width: 72px; padding: 12px 6px 10px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); overflow: hidden; }
.countdown div::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.35); }
.countdown b { display: block; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 34px; line-height: 1; color: var(--lime); text-shadow: 0 0 18px rgba(200, 255, 61, 0.45); }
.countdown span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
.live-now { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--lime); font-size: 18px; font-family: var(--display); }
.progress-wrap { margin: 12px 0; }
.progress { position: relative; height: 10px; border-radius: 999px; background: rgba(3, 6, 20, 0.6); overflow: hidden; margin: 8px 0 12px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.progress span { position: relative; display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); animation: grow 1.2s var(--ease) both; box-shadow: 0 0 16px rgba(200, 255, 61, 0.6); overflow: hidden; }
.progress span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: sweep 2.2s ease-in-out infinite; }
@keyframes grow { from { width: 0; } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.stepper { display: flex; list-style: none; padding: 0; margin: 16px 0; gap: 6px; counter-reset: s; }
.stepper li { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.stepper li:not(:last-child)::after { content: ''; flex: 1; height: 2px; margin: 0 6px; border-radius: 2px; background: var(--line); }
.stepper li.done:not(:last-child)::after { background: linear-gradient(90deg, var(--lime), rgba(200, 255, 61, 0.3)); }
.stepper li span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 12px; flex: none; font-family: var(--display); transition: 0.3s; }
.stepper li.done { color: var(--text); }
.stepper li.done span { background: rgba(200, 255, 61, 0.14); color: var(--lime); border-color: rgba(200, 255, 61, 0.3); }
.stepper li.now { color: var(--lime); }
.stepper li.now span { background: var(--lime); color: #08100a; border-color: transparent; box-shadow: 0 0 0 4px rgba(200, 255, 61, 0.18), 0 0 18px rgba(200, 255, 61, 0.6); animation: nowPulse 2s ease-in-out infinite; }
@keyframes nowPulse { 50% { box-shadow: 0 0 0 7px rgba(200, 255, 61, 0.08), 0 0 24px rgba(200, 255, 61, 0.7); } }
.stat { position: relative; isolation: isolate; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)), var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.3s var(--ease), border-color 0.3s; }
.stat:hover { transform: translateY(-3px); border-color: rgba(200, 255, 61, 0.3); }
.stat::after { content: ''; position: absolute; left: 18px; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.stat:nth-child(2)::after { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.stat:nth-child(3)::after { background: var(--fox); box-shadow: 0 0 12px var(--fox); }
.stat:nth-child(4)::after { background: var(--oro); box-shadow: 0 0 12px var(--oro); }
.stat-num { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -0.03em; }
.stat-num small { font-size: 18px; margin-left: 2px; }
.stat-num .oro, .oro { color: var(--oro); }
.stat-num .plata, .plata { color: var(--plata); }
.stat-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.reminder > .row.between, .reminder > .row.between > .row { flex-wrap: wrap; row-gap: 8px; }
.next-match { display: flex; gap: 16px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(90deg, rgba(200, 255, 61, 0.1), rgba(61, 232, 255, 0.04)); border: 1px solid rgba(200, 255, 61, 0.3); }
.nm-time { text-align: center; padding-right: 16px; border-right: 1px solid var(--line); }
.nm-time b { display: block; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 32px; color: var(--lime); line-height: 1; text-shadow: 0 0 18px rgba(200, 255, 61, 0.4); }
.nm-time span { font-size: 12px; color: var(--muted); font-weight: 600; }
.nm-vs { font-size: 17px; margin: 2px 0; }
.mini-rank { list-style: none; padding: 0; margin: 10px 0 0; }
.mini-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background 0.25s, transform 0.25s var(--ease); }
.mini-rank li:hover { background: rgba(255, 255, 255, 0.04); transform: translateX(3px); }
.mini-rank li b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.mini-rank li.me, tr.me td { background: rgba(200, 255, 61, 0.08); }
.pos { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: 13px; background: rgba(255, 255, 255, 0.06); font-family: var(--display); }
.pos.p1 { background: linear-gradient(135deg, #fff0a8, var(--oro)); color: #2a1d00; box-shadow: 0 0 14px rgba(247, 201, 72, 0.5); }
.pos.p2 { background: linear-gradient(135deg, #fff, var(--plata)); color: #1b2230; }
.pos.p3 { background: linear-gradient(135deg, #ffd0a8, var(--bronce)); color: #2a1300; }
.aviso { padding: 12px 0 12px 14px; border-left: 2px solid rgba(200, 255, 61, 0.35); margin: 8px 0; }

/* ---------- jornada ---------- */
.jornada-head h2 { margin: 2px 0; }
.pair-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.pair-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(3, 6, 20, 0.35); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s; }
.pair-row:hover { transform: translateX(4px); border-color: rgba(200, 255, 61, 0.3); background: rgba(200, 255, 61, 0.04); }
.pair-row .num { width: 26px; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--muted); text-align: center; }
.solo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.solo { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 107, 44, 0.1); border: 1px solid rgba(255, 107, 44, 0.35); font-size: 14px; }
.solo small { color: var(--muted); }
.admin-tools { padding: 12px 16px; background: linear-gradient(rgba(61, 232, 255, 0.05), rgba(61, 232, 255, 0.05)) padding-box, repeating-linear-gradient(90deg, rgba(61, 232, 255, 0.5) 0 8px, transparent 8px 14px) border-box; }
.admin-tools .ico { color: var(--cyan); vertical-align: -3px; margin-right: 4px; }
.group-letter { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #e2ff8a, var(--lime)); color: #08100a; font-family: var(--display); font-weight: 700; font-size: 17px; box-shadow: var(--glow-lime); }
.table-wrap { overflow-x: auto; margin: 8px -4px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; padding: 8px 6px; text-align: center; }
.table td { padding: 10px 6px; text-align: center; border-top: 1px solid var(--line); white-space: nowrap; transition: background 0.2s; }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.table .left { text-align: left; }
.table td.left .av-pair { vertical-align: middle; margin-right: 6px; }
.zone-oro td:first-child { box-shadow: inset 3px 0 0 var(--oro); }
.zone-plata td:first-child { box-shadow: inset 3px 0 0 var(--plata); }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 6px 0 14px; }
.legend .dot { width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.dot.oro { background: var(--oro); box-shadow: 0 0 8px var(--oro); }
.dot.plata { background: var(--plata); }
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

.match { position: relative; isolation: isolate; padding: 11px 13px; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(3, 6, 20, 0.45); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.match.editable { cursor: pointer; }
.match.editable:hover { transform: translateY(-3px); border-color: rgba(200, 255, 61, 0.55); box-shadow: 0 14px 30px -16px rgba(200, 255, 61, 0.7); }
.match.mine { border-color: rgba(255, 107, 44, 0.7); box-shadow: 0 0 0 1px rgba(255, 107, 44, 0.25), 0 0 24px -8px rgba(255, 107, 44, 0.6); }
.match.is-bye { opacity: 0.5; border-style: dashed; }
.match-meta { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.match-meta span { display: inline-flex; align-items: center; gap: 4px; }
.match-meta .ico { width: 12px; height: 12px; }
.tag-me { color: var(--fox); }
.tag-edit { margin-left: auto; color: var(--lime); padding: 2px 8px; border-radius: 999px; background: rgba(200, 255, 61, 0.1); }
.side { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.side .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .g { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; min-width: 24px; text-align: right; color: var(--muted); }
.side.win .pname { font-weight: 700; }
.side.win .g { color: var(--lime); text-shadow: 0 0 12px rgba(200, 255, 61, 0.6); }
.side.tbd .pname { color: var(--muted); font-style: italic; }
.side .av-pair .av { --s: 24px; }

.cup { overflow: hidden; }
.cup-oro { background: radial-gradient(90% 60% at 0% 0%, rgba(247, 201, 72, 0.16), transparent 60%), linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(145deg, rgba(247, 201, 72, 0.55), rgba(255, 255, 255, 0.03) 45%, rgba(247, 201, 72, 0.2)) border-box; }
.cup-plata { background: radial-gradient(90% 60% at 0% 0%, rgba(205, 214, 228, 0.13), transparent 60%), linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(145deg, rgba(205, 214, 228, 0.5), rgba(255, 255, 255, 0.03) 45%, rgba(205, 214, 228, 0.2)) border-box; }
.cup-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cup-title .trophy { width: 54px; height: 54px; filter: drop-shadow(0 8px 16px rgba(247, 201, 72, 0.35)); }
.bracket { display: grid; grid-template-columns: repeat(var(--rounds), minmax(220px, 1fr)); gap: 28px; overflow-x: auto; padding-bottom: 6px; }
.round { display: flex; flex-direction: column; }
.round-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 12px; text-align: center; font-family: var(--display); }
.round-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.round:not(:last-child) .match::after { content: ''; position: absolute; right: -15px; top: 50%; width: 14px; height: 2px; background: linear-gradient(90deg, var(--line-hi), transparent); }
.round:not(:first-child) .match { box-shadow: -14px 0 0 -12px rgba(200, 255, 61, 0.35); }
.round:last-child .match { border-color: rgba(247, 201, 72, 0.6); box-shadow: 0 0 30px -10px rgba(247, 201, 72, 0.5); }
.cup-plata .round:last-child .match { border-color: rgba(205, 214, 228, 0.6); box-shadow: 0 0 30px -10px rgba(205, 214, 228, 0.4); }

.champion { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; isolation: isolate; animation: champIn 0.9s var(--spring) both; }
.champion::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.15), transparent 30%); animation: rays 8s linear infinite; }
.champion-oro { background: linear-gradient(120deg, rgba(247, 201, 72, 0.32), rgba(247, 201, 72, 0.06)); border: 1px solid rgba(247, 201, 72, 0.6); box-shadow: 0 20px 50px -24px rgba(247, 201, 72, 0.7); }
.champion-plata { background: linear-gradient(120deg, rgba(205, 214, 228, 0.26), rgba(205, 214, 228, 0.05)); border: 1px solid rgba(205, 214, 228, 0.55); }
.champion .trophy { width: 64px; height: 64px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)); }
.champion .eyebrow { opacity: 0.9; }
.champion-oro .eyebrow { color: var(--oro); }
.champion-plata .eyebrow { color: var(--plata); }
.champion-names { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.champion-names span { color: var(--muted); }
.champion > .av-pair { margin-left: auto; }
@keyframes champIn { from { opacity: 0; transform: scale(0.9) translateY(12px); } }
@keyframes rays { to { transform: rotate(360deg); } }
.trophy .shine { animation: shine 2.8s ease-in-out infinite; transform: skewX(-20deg) translateX(-30px); }
@keyframes shine { 0%, 55% { transform: skewX(-20deg) translateX(-30px); } 100% { transform: skewX(-20deg) translateX(70px); } }

.sched-wrap { overflow-x: auto; }
.sched { display: grid; gap: 6px; min-width: calc(70px + var(--courts) * 150px); }
.sched-row { display: grid; grid-template-columns: 64px repeat(var(--courts), minmax(140px, 1fr)); gap: 6px; }
.sched-row.head span { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; text-align: center; letter-spacing: 0.14em; }
.sched-time { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--lime); display: grid; place-items: center; }
.sched-cell { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 12px; font-size: 13px; background: rgba(3, 6, 20, 0.45); border: 1px solid var(--line); border-left: 3px solid var(--cyan); position: relative; transition: transform 0.25s var(--ease); }
.sched-cell:not(.empty):hover { transform: scale(1.03); z-index: 1; }
.sched-cell small { font-size: 9px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.12em; }
.sched-cell b { position: absolute; right: 9px; top: 8px; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--lime); }
.sched-cell.ph-oro { border-left-color: var(--oro); }
.sched-cell.ph-plata { border-left-color: var(--plata); }
.sched-cell.mine { background: rgba(255, 107, 44, 0.14); border-color: rgba(255, 107, 44, 0.4); }
.sched-cell.empty { background: transparent; border: 1px dashed var(--line); }

/* ---------- ranking ---------- */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 10px 0 18px; padding-top: 34px; }
.step { flex: 1; max-width: 220px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.step-av { position: relative; }
.step-1 .step-av .av { --s: 72px !important; }
.step-1 .step-av .av-pair .av { --s: 52px !important; }
.step-1 .step-av::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 201, 72, 0.4), transparent 70%); animation: pulseGlow 2.4s ease-in-out infinite; z-index: -1; }
@keyframes pulseGlow { 50% { transform: scale(1.15); opacity: 0.6; } }
.crown { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); }
.crown .trophy { width: 34px; height: 34px; animation: float 2.6s ease-in-out infinite; }
.step-name { font-weight: 600; font-size: 14px; min-height: 2.4em; display: flex; align-items: center; }
.step-pts { color: var(--muted); font-size: 13px; }
.step-pts b { color: var(--text); font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 24px; }
.step-block { position: relative; width: 100%; border-radius: 16px 16px 6px 6px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 44px; color: rgba(0, 0, 0, 0.4); transform-origin: bottom; animation: rise 1s var(--spring) both; overflow: hidden; }
.step-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 4s ease-in-out 1.2s infinite; }
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.step-1 .step-block { height: 136px; background: linear-gradient(180deg, #fff0a8, var(--oro) 55%, #b8860b); animation-delay: 0.35s; box-shadow: 0 20px 50px -20px rgba(247, 201, 72, 0.8); }
.step-2 .step-block { height: 98px; background: linear-gradient(180deg, #fff, var(--plata) 55%, #8d99ab); animation-delay: 0.15s; }
.step-3 .step-block { height: 72px; background: linear-gradient(180deg, #ffd0a8, var(--bronce) 55%, #9a5520); animation-delay: 0.5s; }
.step.me .step-name { color: var(--lime); }
@keyframes rise { from { transform: scaleY(0); } }
.cell-name { display: inline-flex; align-items: center; gap: 8px; }
.rank-table td:last-child b { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 18px; color: var(--lime); }
.prize-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.prize { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); position: relative; overflow: hidden; transition: transform 0.3s var(--ease); }
.prize:hover { transform: translateY(-3px); }
.prize::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; }
.prize-p1::before { background: var(--oro); box-shadow: 0 0 12px var(--oro); }
.prize-p2::before { background: var(--plata); }
.prize-p3::before { background: var(--bronce); }
.prize-pair::before { background: var(--fox); box-shadow: 0 0 12px var(--fox); }
.prize-rank { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); }
.prize-what { font-weight: 600; margin: 6px 0; }
.prize-who { font-size: 13px; color: var(--lime); }

/* ---------- historial y perfil ---------- */
.history { display: grid; gap: 10px; }
.hist { display: flex; gap: 16px; align-items: center; margin: 0; transition: transform 0.3s var(--ease); }
.hist:hover { transform: translateX(6px); }
.hist-date { width: 60px; text-align: center; padding: 8px 0; border-radius: 14px; background: linear-gradient(180deg, rgba(200, 255, 61, 0.12), rgba(200, 255, 61, 0.02)); border: 1px solid rgba(200, 255, 61, 0.2); }
.hist-date b { display: block; font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 26px; line-height: 1; color: var(--lime); }
.hist-date span { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.1em; }
.hist-champs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: 14px; }
.hist-champs span { display: inline-flex; align-items: center; gap: 6px; }
.hist-champs .trophy { width: 22px; height: 22px; }
.profile-hero { display: flex; align-items: center; gap: 20px; overflow: hidden; flex-wrap: wrap; }
.profile-hero > * { position: relative; }
.profile-hero > .grow { min-width: 200px; }
.profile-hero > .av { box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5px rgba(200, 255, 61, 0.5), 0 0 40px -6px rgba(200, 255, 61, 0.6); }
.profile-bg { position: absolute !important; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 0% 0%, rgba(255, 107, 44, 0.3), transparent 60%), radial-gradient(50% 100% at 100% 100%, rgba(61, 232, 255, 0.22), transparent 60%); }
.plog, .mlog { list-style: none; padding: 0; margin: 8px 0 0; }
.plog li, .mlog li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.plog li:last-child, .mlog li:last-child { border: 0; }
.plog b { color: var(--lime); font-family: var(--display); font-variant-numeric: tabular-nums; }
.mlog b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.mlog .res { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: 12px; font-family: var(--display); }
.mlog .w .res { background: rgba(61, 220, 151, 0.18); color: var(--ok); box-shadow: 0 0 12px -4px var(--ok); }
.mlog .l .res { background: rgba(255, 93, 115, 0.16); color: var(--danger); }
.mlog .d .res { background: rgba(255, 255, 255, 0.08); }

/* ---------- admin ---------- */
.wizard { display: flex; flex-direction: column; gap: 4px; }
.wiz-step { position: relative; display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wiz-n { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #e2ff8a, var(--lime)); color: #08100a; font-family: var(--display); font-weight: 700; font-size: 17px; box-shadow: var(--glow-lime); }
.courts-pick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.court-opt { position: relative; }
.court-opt input { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.court-opt span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; transition: 0.3s var(--ease); color: var(--muted); background: rgba(3, 6, 20, 0.35); }
.court-opt span:hover { border-color: rgba(61, 232, 255, 0.5); transform: translateY(-2px); }
.court-opt span .ico { width: 22px; height: 22px; }
.court-opt b { font-family: var(--display); font-size: 20px; color: var(--text); line-height: 1; }
.court-opt input:checked + span { background: linear-gradient(180deg, rgba(61, 232, 255, 0.22), rgba(79, 125, 255, 0.12)); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 10px 24px -10px var(--cyan), inset 0 0 0 1px rgba(61, 232, 255, 0.3); transform: translateY(-3px); }
.court-opt input:focus-visible + span { outline: 2px solid var(--lime); }
.stepper-input { display: flex; }
.stepper-input input { text-align: center; border-radius: 0; -moz-appearance: textfield; font-family: var(--display); font-weight: 700; }
.stepper-input button { width: 46px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 20px; cursor: pointer; transition: background 0.2s; }
.stepper-input button:hover { background: rgba(200, 255, 61, 0.15); color: var(--lime); }
.stepper-input button:first-child { border-radius: 12px 0 0 12px; }
.stepper-input button:last-child { border-radius: 0 12px 12px 0; }
.estimate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(200, 255, 61, 0.08), rgba(61, 232, 255, 0.05)); border: 1px solid rgba(200, 255, 61, 0.3); }
.est b { display: block; font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 22px; color: var(--lime); line-height: 1.15; }
.est span { font-size: 12px; color: var(--muted); }
.player-list { list-style: none; padding: 0; margin: 12px 0 0; }
.player-list li { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 12px; transition: background 0.2s; }
.player-list li:hover { background: rgba(255, 255, 255, 0.03); }
.player-list li:last-child { border: 0; }

/* ---------- v3: formato Express, sorteo, Copa Bronce y perfil de evolución ---------- */
:root { --bronce-c: #e0915a; }
.badge-bronce { background: rgba(224, 145, 90, 0.14); color: var(--bronce); border-color: rgba(224, 145, 90, 0.3); }
.tab.bronce.active { color: var(--bronce); }
.tab.bronce.active::after { background: var(--bronce); box-shadow: 0 0 10px var(--bronce); }
.dot.bronce { background: var(--bronce); }
.zone-bronce td:first-child { box-shadow: inset 3px 0 0 var(--bronce); }
.sched-cell.ph-bronce { border-left-color: var(--bronce); }
.tag-third { color: var(--cyan); }
.cup-bronce { background: radial-gradient(90% 60% at 0% 0%, rgba(224, 145, 90, 0.14), transparent 60%), linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(145deg, rgba(224, 145, 90, 0.5), rgba(255, 255, 255, 0.03) 45%, rgba(224, 145, 90, 0.2)) border-box; }
.cup-bronce .round:last-child .match { border-color: rgba(224, 145, 90, 0.6); box-shadow: 0 0 30px -10px rgba(224, 145, 90, 0.45); }
.champion-bronce { background: linear-gradient(120deg, rgba(224, 145, 90, 0.28), rgba(224, 145, 90, 0.05)); border: 1px solid rgba(224, 145, 90, 0.55); }
.champion-bronce .eyebrow { color: var(--bronce); }
.title-dot { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px; border-radius: 999px; font-size: 12px; font-weight: 700; font-family: var(--display); color: #120c00; }
.title-dot.oro { background: var(--oro); } .title-dot.plata { background: var(--plata); } .title-dot.bronce { background: var(--bronce); }
.round-block + .round-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.group-letter .ico { width: 16px; height: 16px; color: #08100a; }

/* asistente: tarjetas de opción y campos según formato */
.option-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 12px; }
.opt-card { position: relative; cursor: pointer; }
.opt-card input { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opt-card > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(3, 6, 20, 0.35); transition: 0.3s var(--ease); }
.opt-card > span > .ico { color: var(--muted); width: 22px; height: 22px; }
.opt-card b { font-family: var(--display); font-size: 15px; }
.opt-card em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 7px; margin-left: 4px; border-radius: 999px; background: var(--lime); color: #08100a; vertical-align: 2px; }
.opt-card small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.opt-card:hover > span { border-color: rgba(200, 255, 61, 0.35); transform: translateY(-2px); }
.opt-card input:checked + span { border-color: var(--lime); background: linear-gradient(160deg, rgba(200, 255, 61, 0.14), rgba(200, 255, 61, 0.03)); box-shadow: var(--glow-lime); }
.opt-card input:checked + span > .ico { color: var(--lime); }
.opt-card input:focus-visible + span { outline: 2px solid var(--lime); }
.wizard:has(input[name=format][value=express]:checked) .only-grupos, .wizard:has(input[name=format][value=grupos]:checked) .only-express { display: none; }
.narrow-step { max-width: 220px; }
.est.fits b { color: var(--lime); }
.est.long b { color: var(--oro); }

/* perfil de evolución */
.profile-hero .edit-btn { margin-top: 12px; }
.level-badge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 170px; padding: 16px 18px; border-radius: 20px; text-align: center; background: rgba(3, 6, 20, 0.45); border: 1px solid var(--line); overflow: hidden; }
.level-badge::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, var(--tier, var(--lime)), transparent 35%); opacity: 0.25; animation: rays 6s linear infinite; z-index: -1; }
.level-num { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 46px; line-height: 1; color: var(--tier, var(--lime)); text-shadow: 0 0 24px var(--tier, var(--lime)); }
.level-badge .tier { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tier, var(--lime)); }
.level-badge .delta { margin-top: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.delta.up { color: var(--ok); background: rgba(61, 220, 151, 0.12); }
.delta.down { color: var(--danger); background: rgba(255, 93, 115, 0.12); }
.tier-oro { --tier: var(--oro); } .tier-cyan { --tier: var(--cyan); } .tier-lime { --tier: var(--lime); } .tier-blue { --tier: var(--blue); } .tier-fox { --tier: var(--fox); }
.line-chart { width: 100%; height: auto; display: block; margin: 8px 0 4px; overflow: visible; }
.lc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lcDraw 1.6s var(--ease) 0.2s forwards; filter: drop-shadow(0 0 6px rgba(200, 255, 61, 0.6)); }
.lc-area { opacity: 0; animation: fadeIn 1s ease 0.9s forwards; }
.lc-dot { fill: var(--bg-2); stroke: var(--cyan); stroke-width: 2; opacity: 0; animation: fadeIn 0.3s ease forwards; animation-delay: calc(0.3s + var(--i) * 60ms); }
.lc-now { fill: var(--lime); filter: drop-shadow(0 0 8px var(--lime)); animation: nowPulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lc-base { stroke: rgba(255, 255, 255, 0.15); stroke-dasharray: 4 6; }
.lc-label { fill: var(--muted); font-size: 11px; font-family: var(--display); }
.lc-value { fill: var(--lime); font-size: 15px; font-weight: 700; font-family: var(--display); }
@keyframes lcDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
.calm .lc-line { animation: none; stroke-dashoffset: 0; } .calm .lc-area, .calm .lc-dot { animation: none; opacity: 1; }
.form-row { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.form-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.fc { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-weight: 700; font-family: var(--display); animation: reveal 0.5s var(--ease) both; }
.fc.w { background: rgba(61, 220, 151, 0.18); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.35); }
.fc.l { background: rgba(255, 93, 115, 0.16); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(255, 93, 115, 0.3); }
.fc.d { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.stat-num.streak.w { color: var(--ok); } .stat-num.streak.l { color: var(--danger); }
.mini-person { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mini-person:last-child { border: 0; }
.mini-person .stat-label { display: flex; align-items: center; gap: 4px; }
.mini-person .stat-label .ico { width: 13px; height: 13px; color: var(--lime); }
.titles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 14px; }
.title-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(3, 6, 20, 0.35); border: 1px solid var(--line); }
.title-box .trophy { width: 34px; height: 34px; }
.title-box b { font-family: var(--display); font-size: 22px; line-height: 1; }
.title-box span { font-size: 11px; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 18px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.bar span { display: block; width: 100%; max-width: 38px; height: var(--h); min-height: 4px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--cyan), rgba(61, 232, 255, 0.25)); transform-origin: bottom; animation: rise 0.8s var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
.bar.oro span { background: linear-gradient(180deg, #fff0a8, var(--oro)); box-shadow: 0 0 14px -4px var(--oro); }
.bar.plata span { background: linear-gradient(180deg, #fff, var(--plata)); }
.bar.bronce span { background: linear-gradient(180deg, #ffd0a8, var(--bronce)); }
.bar b { font-family: var(--display); font-size: 12px; }
.bar small { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* ---------- modal, toasts, vacíos ---------- */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 12, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade 0.25s both; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: 24px; border: 1px solid transparent;
  background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, linear-gradient(145deg, rgba(200, 255, 61, 0.5), rgba(255, 255, 255, 0.05) 40%, rgba(61, 232, 255, 0.35)) border-box;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 60px -30px rgba(200, 255, 61, 0.5); animation: pop 0.4s var(--spring) both; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.9) translateY(18px); } }
.score-entry { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 16px 0 8px; }
.score-side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 14px; }
.score-side input { width: 96px; text-align: center; font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 40px; padding: 8px; border-radius: 16px; }
.vs { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--muted); letter-spacing: 0.1em; }
#toasts { position: fixed; z-index: 80; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 16px; background: rgba(15, 23, 54, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(200, 255, 61, 0.35); box-shadow: var(--shadow), 0 0 30px -14px rgba(200, 255, 61, 0.6); font-weight: 600; font-size: 14px; animation: toastIn 0.45s var(--spring) both; }
.toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--lime); transform-origin: left; animation: toastBar 3.2s linear forwards; }
.toast.ok .ico { color: var(--lime); }
.toast.error { border-color: rgba(255, 93, 115, 0.6); box-shadow: var(--shadow), 0 0 30px -14px rgba(255, 93, 115, 0.7); }
.toast.error::after { background: var(--danger); }
.toast.error .ico { color: var(--danger); }
.toast.out { opacity: 0; transform: translateY(-10px) scale(0.97); transition: 0.35s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-18px) scale(0.94); } }
@keyframes toastBar { to { transform: scaleX(0); } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }
.empty { text-align: center; padding: 22px 10px; }

/* ---------- responsive ---------- */
@media (min-width: 900px) {
  .nav { top: 12px; bottom: auto; left: 50%; width: auto; border-radius: 18px; flex-direction: row; }
  .nav a { flex-direction: row; gap: 8px; padding: 9px 15px; font-size: 14px; border-radius: 13px; }
  .nav a .ico { width: 18px; height: 18px; }
  #app { padding-bottom: 40px; }
  .topbar { padding: 14px 0; }
  #toasts { top: 76px; }
}
@media (max-width: 899px) {
  .login { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; min-height: auto; }
  .login-card { order: 2; }
  .login-hero { display: contents; }
  .brand-big { order: 0; }
  .hero-art { order: 3; max-width: 420px; margin: 0 auto; opacity: 0.9; }
  .hero-next { order: 1; }
  .hero-feats { order: 4; justify-content: center; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prize-grid, .estimate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-cards { grid-template-columns: 1fr; }
  .level-badge { width: 100%; }
  .courts-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  h1 { font-size: 28px; }
  .greet h1 { font-size: 26px; }
  .brand-big h1 { font-size: 46px; }
  .brand-big .fox-lg { width: 76px; height: 76px; }
  .card { padding: 16px; }
  .countdown { gap: 6px; }
  .countdown div { min-width: 0; flex: 1; }
  .countdown b { font-size: 28px; }
  .stepper li { font-size: 0; }
  .stepper li span { font-size: 12px; }
  .brand span { font-size: 17px; }
  .userchip > span:not(.av):not(.badge) { display: none; }
  .search { width: 130px; }
  .score-side input { width: 76px; font-size: 32px; }
  .podium { gap: 6px; }
  .step-name { font-size: 12px; }
  .bracket { grid-template-columns: repeat(var(--rounds), minmax(200px, 1fr)); }
  .champion-names { font-size: 20px; }
  .stat-num { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}