/* Look "espacial": fondo negro profundo con estrellas y órbitas muy tenues, paneles de cristal (translúcidos con
   desenfoque), bordes de un pixel y resplandores en grises. Solo blanco, negro y sus tonos; el rojo marca únicamente
   un partido en juego. El logo lleva borde blanco para leerse sobre el fondo. Un solo look oscuro a propósito. */
:root {
  color-scheme: dark;
  --bg: #050505;
  --ink: #f5f5f5;
  --ink-2: #b0b0b0;
  --glass: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0.065));
  --panel: var(--glass);
  --panel-2: rgba(255, 255, 255, 0.08);
  --side: rgba(8, 8, 8, 0.55);
  --line: rgba(255, 255, 255, 0.24);
  --line-2: rgba(255, 255, 255, 0.11);
  --lit: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --depth: 0 22px 50px -24px rgba(0, 0, 0, 0.9);
  --blur: blur(18px) saturate(1.2);
  --accent: #ffffff;
  --grad: linear-gradient(180deg, #ffffff, #d2d2d2);
  --on-grad: #0a0a0a;
  --soft-bg: rgba(255, 255, 255, 0.12);
  --soft-ink: #ececec;
  --hi-bg: #f5f5f5;
  --hi-ink: #0a0a0a;
  --ok-bg: rgba(255, 255, 255, 0.12);
  --ok: #f5f5f5;
  --live: #ff4d5e;
  --focus: #ffffff;
  --halo: #ffffff;
  --f-title: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --panel: #161616; --side: #0c0c0c; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --panel: #161616; --side: #0c0c0c; --blur: none; }
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--f-body); min-height: 100%; }
#app { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--f-title); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--ink-2); }
.ico { width: 20px; height: 20px; flex: none; }

/* Fondo: estrellas, órbitas y el borde de un planeta. Va fijo y detrás de todo. */
.space { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1000px 640px at 88% -12%, rgba(255, 255, 255, 0.13), transparent 62%),
    radial-gradient(820px 560px at -4% 106%, rgba(255, 255, 255, 0.09), transparent 62%),
    radial-gradient(700px 420px at 46% 52%, rgba(255, 255, 255, 0.035), transparent 70%),
    var(--bg); }
.space::before, .space::after { content: ""; position: absolute; inset: 0; }
.space::before { opacity: 0.6; background-size: 340px 340px; background-image:
  radial-gradient(1.2px 1.2px at 30px 40px, rgba(255, 255, 255, 0.9), transparent),
  radial-gradient(1px 1px at 110px 150px, rgba(255, 255, 255, 0.6), transparent),
  radial-gradient(1.4px 1.4px at 220px 70px, rgba(255, 255, 255, 0.75), transparent),
  radial-gradient(1px 1px at 280px 240px, rgba(255, 255, 255, 0.5), transparent),
  radial-gradient(1.2px 1.2px at 60px 260px, rgba(255, 255, 255, 0.55), transparent),
  radial-gradient(1px 1px at 170px 310px, rgba(255, 255, 255, 0.7), transparent); }
.space::after { opacity: 0.45; background-size: 590px 590px; background-image:
  radial-gradient(1px 1px at 90px 80px, rgba(255, 255, 255, 0.8), transparent),
  radial-gradient(1.6px 1.6px at 400px 120px, rgba(255, 255, 255, 0.7), transparent),
  radial-gradient(1px 1px at 250px 330px, rgba(255, 255, 255, 0.6), transparent),
  radial-gradient(1.2px 1.2px at 520px 440px, rgba(255, 255, 255, 0.75), transparent),
  radial-gradient(1px 1px at 130px 520px, rgba(255, 255, 255, 0.55), transparent); }
.space .orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.space .limb { position: absolute; left: 50%; bottom: -60vw; width: 150vw; height: 70vw; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 42%, transparent 72%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 -24px 90px rgba(255, 255, 255, 0.07); }

/* Logo: borde blanco recortado (calcomanía) y un resplandor suave para que se lea sobre el fondo oscuro */
.logo { display: block; height: auto; filter: drop-shadow(var(--hw, 2px) 0 0 var(--halo)) drop-shadow(calc(var(--hw, 2px) * -1) 0 0 var(--halo)) drop-shadow(0 var(--hw, 2px) 0 var(--halo)) drop-shadow(0 calc(var(--hw, 2px) * -1) 0 var(--halo)) drop-shadow(0 0 var(--gw, 14px) rgba(255, 255, 255, 0.3)); }
.logo.small { width: 112px; --hw: 1.5px; --gw: 10px; }
.logo.big { width: min(100%, 460px); --hw: 3px; --gw: 30px; }
.brandbtn { background: none; border: 0; padding: 2px; line-height: 0; border-radius: 8px; }

/* Cristal: todo lo que es tarjeta comparte el mismo tratamiento */
.panel, .stat, .match, .door, .side-foot, .steps, .search, .bell { background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--lit), var(--depth); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--ink); font-weight: 700; line-height: 1.1; text-decoration: none; transition: filter 0.12s ease, border-color 0.12s ease, background-color 0.12s ease; }
.btn:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
.btn.solid { background: var(--grad); border-color: transparent; color: var(--on-grad); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 30px -8px rgba(255, 255, 255, 0.38); }
.btn.solid:hover { filter: brightness(0.88); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 0.95rem; }
.link { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Etiquetas */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 11px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.badge.soft { background: var(--soft-bg); color: var(--soft-ink); border-color: rgba(255, 255, 255, 0.16); }
.badge.warn { background: var(--hi-bg); color: var(--hi-ink); border-color: transparent; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(255, 255, 255, 0.2); }
.badge.live { background: var(--live); color: #fff; border-color: transparent; }
.badge.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .badge.live::before { animation: none; } .btn, .door { transition: none; } }

/* Estructura */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: grid; gap: 22px; align-content: start; padding: 20px 16px; background: var(--side); border-right: 1px solid var(--line-2); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
.nav { display: grid; gap: 4px; }
.nav button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font-weight: 500; text-align: left; }
.nav button:hover { background: var(--panel-2); color: var(--ink); }
.nav button[aria-current="page"] { background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); color: #fff; font-weight: 700; }
.nav button[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #fff; box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.8); }
.side-foot { display: grid; gap: 8px; padding: 14px; border-radius: 14px; font-size: 0.92rem; box-shadow: var(--lit); }
.side-foot b { font-family: var(--f-title); font-weight: 600; }
.col { min-width: 0; }
.topbar, .content, .chips { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.topbar { display: flex; align-items: center; gap: 12px; padding-block: 16px; }
.topbar .grow { flex: 1; }
.search { flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--ink-2); box-shadow: var(--lit); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; text-overflow: ellipsis; }
.search input::placeholder { color: var(--ink-2); }
.search:focus-within { border-color: rgba(255, 255, 255, 0.7); outline: 2px solid var(--focus); outline-offset: 2px; }
.bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); box-shadow: var(--lit); }
.bell .n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--hi-bg); color: var(--hi-ink); font: 700 0.75rem/20px var(--f-body); text-align: center; box-shadow: 0 0 14px rgba(255, 255, 255, 0.55); }
.me { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: var(--on-grad); font: 700 1rem var(--f-title); }
.mobile-only { display: none; }
.chips { display: none; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.chips button { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--ink-2); font-weight: 700; white-space: nowrap; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.chips button[aria-current="page"] { background: var(--grad); border-color: transparent; color: var(--on-grad); box-shadow: 0 0 22px -4px rgba(255, 255, 255, 0.45); }
.content { display: grid; gap: 26px; align-content: start; padding-block: 8px 56px; }
.page-head { display: grid; gap: 8px; justify-items: start; }
.page-head h1 { background: linear-gradient(180deg, #ffffff 30%, #9c9c9c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: 0.08em; }
.page-head p { max-width: 60ch; }

/* Tarjetas y contadores */
.panel { border-radius: 18px; padding: 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { display: grid; gap: 12px; padding: 16px; border-radius: 18px; }
.stat .top { display: flex; align-items: center; justify-content: space-between; }
.stat .ic { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: var(--soft-bg); color: var(--soft-ink); }
.stat b { display: block; font: 700 2.4rem/1 var(--f-title); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-2); }
.stat.hot { background: var(--grad); border-color: rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 0 #fff, 0 0 46px -10px rgba(255, 255, 255, 0.5); }
.stat.hot .ic { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.12); color: var(--on-grad); }
.stat.hot, .stat.hot b, .stat.hot span { color: var(--on-grad); }
.stat.hot span { font-weight: 700; }

.msg { padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-weight: 700; box-shadow: 0 0 30px -10px rgba(255, 255, 255, 0.35); }
.msg:empty { display: none; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.stack { display: grid; gap: 24px; min-width: 0; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }

/* Listas */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.row:last-child { border-bottom: 0; padding-bottom: 2px; }
.row .grow { flex: 1 1 230px; min-width: 0; }
.row > .badge { min-width: 5.2rem; }
.row b { display: block; font-weight: 700; }
.row .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.empty { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-2); }
.noresult { padding: 10px 0; color: var(--ink-2); }

/* Equipos: el aro y la banderola van en una escala de grises (un tono por equipo) */
.av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--ink); font: 700 0.82rem var(--f-title); box-shadow: inset 0 0 0 2px var(--c), 0 0 16px -4px var(--c); }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.team-row:last-child { border-bottom: 0; }
.team-row .grow { flex: 1; min-width: 0; }
.team-row b { display: block; font-weight: 700; }
.team-row small { color: var(--ink-2); }
.team-row .cnt { font: 600 0.95rem var(--f-title); font-variant-numeric: tabular-nums; }

/* Marcadores */
.matches { display: grid; gap: 12px; }
.match { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; }
.match.live { border-color: rgba(255, 77, 94, 0.6); box-shadow: var(--lit), 0 10px 34px -10px rgba(255, 77, 94, 0.4); }
.match .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.9rem; color: var(--ink-2); }
.match .meta b { color: var(--ink); font-weight: 700; }
.match .board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.team { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 1.05rem/1.15 var(--f-title); }
.team.away { justify-content: flex-end; text-align: right; }
.team.lose { color: var(--ink-2); font-weight: 500; }
.flag { flex: none; width: 12px; height: 28px; background: var(--c); clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.away .flag { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.score { font: 700 1.9rem/1 var(--f-title); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score i { font: 400 0.82rem var(--f-body); font-style: normal; color: var(--ink-2); padding: 0 6px; }
.vs { color: var(--ink-2); font-weight: 700; }

/* Pantalla de entrada */
.entry { display: grid; gap: 34px; max-width: 980px; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
.hero { display: grid; gap: 16px; justify-items: start; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.door { display: grid; gap: 10px; align-content: start; justify-items: start; text-align: left; padding: 20px; border-radius: 18px; color: var(--ink); transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; }
.door:hover { border-color: rgba(255, 255, 255, 0.55); transform: translateY(-2px); box-shadow: var(--lit), 0 0 44px -12px rgba(255, 255, 255, 0.35); }
.door .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: var(--on-grad); box-shadow: 0 0 24px -4px rgba(255, 255, 255, 0.5); }
.block { display: grid; gap: 14px; align-content: start; }
.steps { list-style: none; margin: 0; padding: 2px 18px; border-radius: 18px; }
.steps li { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.steps li:last-child { border-bottom: 0; }
.steps .n { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: var(--panel-2); font: 600 0.95rem var(--f-title); }
.steps li.now .n { background: var(--grad); border-color: transparent; color: var(--on-grad); box-shadow: 0 0 20px -4px rgba(255, 255, 255, 0.5); }
.steps b { display: block; }
.steps small { color: var(--ink-2); font-size: 0.93rem; }

/* Pantallas por construir */
.later { display: grid; gap: 16px; justify-items: start; }
.later ul { margin: 10px 0 0; padding-left: 1.2rem; display: grid; gap: 6px; max-width: 64ch; }
.later .ask { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); color: var(--ink-2); }

/* Formularios */
.entry.narrow { max-width: 560px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.form .wide { grid-column: 1 / -1; }
.form .sec { padding-top: 18px; border-top: 1px solid var(--line-2); }
.form .sec:first-of-type { padding-top: 0; border-top: 0; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > label { font-weight: 700; font-size: 0.93rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.field textarea { min-height: 78px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8a8a8a; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: #fff; }
.field [aria-invalid="true"] { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 18px -2px rgba(255, 255, 255, 0.5); }
.hint { color: var(--ink-2); font-size: 0.88rem; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: #fff; }
.check input[aria-invalid="true"] { outline: 2px solid #fff; outline-offset: 2px; }
.privacy { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.privacy summary { cursor: pointer; font-weight: 700; }
.privacy p { margin-top: 10px; color: var(--ink-2); }
.err { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 12px; background: rgba(255, 255, 255, 0.09); }
.err ul { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tip { display: grid; gap: 10px; justify-items: start; }
.row .grow .muted { display: block; }

@media (max-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .chips { display: flex; }
  .mobile-only { display: block; }
  .topbar { flex-wrap: wrap; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .topbar .logo.small { width: 92px; }
}
@media (min-width: 900px) {
  .topbar, .content, .chips { padding-inline: max(32px, env(safe-area-inset-left, 0px)) max(32px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 520px) {
  .team { font-size: 0.98rem; gap: 7px; }
  .score { font-size: 1.55rem; }
  .row .acts { width: 100%; }
  .steps li { grid-template-columns: 36px 1fr; }
  .steps li .badge { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Cinco accesos: público, tablas, filtros, árbitro ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.block1 { display: block; }
.note { color: var(--ink-2); font-size: 0.88rem; }
.page-head h1, .hero2 h1 { background: linear-gradient(180deg, #ffffff 30%, #9c9c9c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: 0.08em; }
.msg.bad { border-color: #fff; background: rgba(255, 255, 255, 0.16); }

/* Público: barra superior y contenido centrado */
.pub { position: relative; }
.pubbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); background: rgba(5, 5, 5, 0.6); border-bottom: 1px solid var(--line-2); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.nav2 { display: flex; gap: 6px; flex: 1 1 auto; overflow-x: auto; }
.nav2 button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.nav2 button:hover { background: var(--panel-2); color: var(--ink); }
.nav2 button[aria-current="page"] { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); color: #fff; }
.pubmain { display: grid; gap: 28px; align-content: start; max-width: 1120px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
@media (max-width: 640px) { .nav2 { order: 3; flex-basis: 100%; } .pubbar .brandbtn { margin-right: auto; } }
.hero2 { display: grid; gap: 12px; justify-items: start; padding: 24px; }
.tcard { display: grid; gap: 8px; align-content: start; }
.tcard .head { justify-content: flex-start; flex-wrap: wrap; }

/* Tablas */
.tblw { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl th { color: var(--ink-2); font-size: 0.8rem; font-weight: 700; }
.tbl th.l, .tbl td.l { text-align: left; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .pos { width: 40px; color: var(--ink-2); }
.tbl .tm { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tbl .flag { width: 9px; height: 20px; }
.tbl tr.mi-eq td { background: rgba(255, 255, 255, 0.08); }
.tbl td.key { font-weight: 800; color: #fff; }
.tbl td.pts { font-weight: 800; }
.tbl td.muted { color: var(--ink-2); }
@media (max-width: 520px) { .tbl .hs { display: none; } .tbl th, .tbl td { padding: 10px 7px; } }

/* Filtros */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--ink-2); font-weight: 700; }
.seg button:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.5); }
.seg button[aria-pressed="true"] { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 22px -4px rgba(255, 255, 255, 0.45); }

/* Selectores, campos pequeños y filas con botones */
.sel { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.viewas { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.92rem; }
.viewas.inl { margin-top: 2px; }
@media (max-width: 899px) { .topbar .viewas { order: 4; flex-basis: 100%; } .topbar .viewas .sel { flex: 1; min-width: 0; } }
.numin { width: 76px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--ink); text-align: center; font: 700 1rem var(--f-title); }
.numin:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: #fff; }
.no { flex: none; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: var(--panel-2); font: 700 1rem var(--f-title); font-variant-numeric: tabular-nums; }
.pl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pl:last-child { border-bottom: 0; }
.pl .nm { flex: 1 1 140px; min-width: 0; font-weight: 700; }
.pl .tog { display: flex; gap: 8px; }
.pl .tog .btn { min-width: 88px; }
.btn[aria-pressed="true"]:not(.neg) { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 20px -4px rgba(255, 255, 255, 0.45); }
.btn.neg[aria-pressed="true"] { background: #000; border: 2px solid #fff; color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 520px) { .pl .tog { flex-basis: 100%; } .pl .tog .btn { flex: 1; } }

/* Árbitro: marcador fijo, jugadores, panel de jugadas */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 899px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.sb { position: sticky; top: 8px; z-index: 5; padding: 12px 16px; border-radius: 16px; }
.sb .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); }
.sb .meta b { color: var(--ink); }
.picks { display: grid; gap: 8px; margin-top: 12px; }
.pk { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; text-align: left; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.pk .no { grid-row: 1 / span 2; }
.pk .nm { font-weight: 700; grid-column: 2; }
.pk .chp { grid-column: 2; color: var(--ink-2); font-size: 0.85rem; }
.pk .chp:empty { display: none; }
.pk:hover { border-color: rgba(255, 255, 255, 0.5); }
.pk[aria-pressed="true"] { background: var(--grad); color: var(--on-grad); border-color: transparent; box-shadow: 0 0 24px -6px rgba(255, 255, 255, 0.5); }
.pk[aria-pressed="true"] .chp { color: #3a3a3a; }
.pk[aria-pressed="true"] .no { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.15); color: var(--on-grad); }
.dock { position: sticky; bottom: max(8px, env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 14, 14, 0.8); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.8), var(--lit); }
.dock.col1 { display: grid; }
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sbtn { display: grid; gap: 2px; place-items: center; min-height: 58px; padding: 6px 8px; text-align: center; line-height: 1.15; }
.sbtn small { color: var(--ink-2); font-size: 0.85rem; }
.log { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; color: var(--ink-2); }

/* Perfil del jugador */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 10px; }
.datos div { display: grid; gap: 2px; }

/* Las tablas anchas se desplazan dentro de su tarjeta, no estiran la página */
.pubmain > *, .content > *, .stack > *, .cols > *, .cols2 > * { min-width: 0; }
.page-head h1, .hero2 h1 { background-image: linear-gradient(180deg, #ffffff 55%, #bdbdbd); }
.sb { background: linear-gradient(150deg, rgba(34, 34, 34, 0.94), rgba(18, 18, 18, 0.94)); }
.so { display: none; }
.tbl td.tn { white-space: normal; }
@media (max-width: 520px) {
  .tbl .hs { display: none; }
  .tbl .flag { display: none; }
  .tbl .so { display: block; font-size: 0.8rem; }
  .tbl th, .tbl td { padding: 10px 6px; }
  .tbl .pos { width: 28px; }
}
.sbtn { min-height: 56px; }
.sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .sbtn { padding: 6px 2px; font-size: 0.88rem; } .dock.col1 { padding: 10px 12px; } }
.sb .board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
@media (max-width: 520px) { .tbl td.l:not(.pos) { white-space: normal; } }

/* Portada pública */
.cover { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px)); }
.cover-top { display: flex; justify-content: flex-end; }
.cover-main { width: 100%; max-width: 860px; margin: 0 auto; display: grid; gap: 30px; justify-items: center; text-align: center; }
.cover-main > * { min-width: 0; }
.cover .logo.big { width: min(100%, 420px); }
.enter { width: 100%; display: grid; gap: 10px; justify-items: center; padding: 30px 20px 26px; border-radius: 24px; color: var(--ink); text-align: center; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; }
.enter:hover { border-color: rgba(255, 255, 255, 0.55); transform: translateY(-2px); box-shadow: var(--lit), 0 0 52px -12px rgba(255, 255, 255, 0.4); }
.enter.off { cursor: default; }
.enter.off:hover { transform: none; border-color: var(--line-2); box-shadow: var(--lit), var(--depth); }
.enter .tn2 { font-size: clamp(2.1rem, 9vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; padding-bottom: 0.06em; background: linear-gradient(180deg, #ffffff 55%, #bdbdbd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.enter .go { margin-top: 8px; pointer-events: none; }
.cover-next { width: 100%; display: grid; gap: 14px; justify-items: start; text-align: left; }
.cover-next .doors { width: 100%; }
@media (max-width: 520px) { .cover { padding-bottom: 40px; } .cover-main { gap: 22px; padding-top: 12px; } .cover .logo.big { width: min(100%, 320px); } .enter { padding: 24px 16px 22px; } }
@media (prefers-reduced-motion: reduce) { .enter { transition: none; } .enter:hover { transform: none; } }

/* Enlace al equipo y página de equipo */
.tlink { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.28); text-underline-offset: 4px; }
.tlink:hover { text-decoration-color: currentColor; }
.rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 16px 12px; padding: 18px 20px; }
.rec b { display: block; font: 800 1.8rem/1.1 var(--f-title); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rec span { color: var(--ink-2); font-size: 0.85rem; }
.tgl { list-style: none; margin: 0; padding: 0; }
.tgm { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.tgm:last-child { border-bottom: 0; }
.tgm .jn { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.tgm .who { display: grid; gap: 2px; min-width: 0; }
.tgm .rv { font-weight: 700; overflow-wrap: anywhere; }
.tgm .who small { font-size: 0.85rem; }
.tgm .res { display: grid; gap: 4px; justify-items: end; }
.tgm .sc { font: 700 1.25rem/1 var(--f-title); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgm .sc i { font: 400 0.78rem var(--f-body); font-style: normal; color: var(--ink-2); padding: 0 5px; }

/* Registro: leyenda para menores. Mi roster del jugador: listados */
.legend { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.07); font-weight: 600; }
.dl { margin: 4px 0 0; }
.dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.dl > div:last-child { border-bottom: 0; }
.dl dt { color: var(--ink-2); }
.dl dd { margin: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; font-weight: 700; text-align: right; }
.mates { list-style: none; margin: 0; padding: 0; }

/* Listas desplegables legibles: fondo oscuro opaco y texto claro (si no, las opciones quedan blancas sobre blanco) */
.field select, .sel { background-color: #242424; color: #f5f5f5; color-scheme: dark; }
select option, select optgroup { background-color: #242424; color: #f5f5f5; }

/* Buscador dentro de un panel (coach: agregar jugador) */
.panel .search { max-width: 560px; margin: 6px 0 10px; }
.pl.rr .nm { flex-basis: 90px; }

/* Código del equipo */
.codebox { margin: 6px 0; padding: 14px 16px; border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: 14px; background: rgba(255, 255, 255, 0.05); text-align: center; font: 800 clamp(1.5rem, 6vw, 2.1rem)/1 var(--f-title); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; user-select: all; }
.baja h2 + p { margin: 6px 0 14px; }
.pl .acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Estadísticas del jugador: títulos de bloque y resumen del equipo dentro de un panel */
.pg-sec { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 -6px; }
.pg-sec:not(:first-of-type) { margin-top: 18px; }
.rec.in { padding: 6px 0 2px; }
@media (max-width: 520px) { .xs-hide { display: none; } }
@media (max-width: 380px) { .tbl th, .tbl td { padding: 10px 5px; } }

/* Partido en vivo: acciones guiadas */
.sb .last { margin: 8px 0 0; font-size: 0.9rem; color: var(--ink-2); line-height: 1.35; }
.step { border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 28px -10px rgba(255, 255, 255, 0.45); }
.step h2:focus { outline: none; }
.lbl3 { margin: 16px 0 8px; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); }
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.agrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abtn { display: grid; gap: 2px; place-items: center; align-content: center; min-height: 64px; padding: 8px 6px; text-align: center; line-height: 1.15; min-width: 0; }
.abtn small { color: var(--ink-2); font-size: 0.85rem; font-weight: 500; }
.btn.solid.abtn small { color: #3a3a3a; }
.abtn.full { grid-column: 1 / -1; }
.abtn.full.solid { min-height: 76px; font-size: 1.15rem; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
@media (min-width: 700px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .agrid.c3 .abtn { min-height: 72px; } }
.pgrid .pk { min-width: 0; padding: 8px 10px; gap: 2px 10px; }
.pgrid .pk .nm { overflow-wrap: anywhere; line-height: 1.2; }
.seg .tsc { margin-left: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .abtn { font-size: 0.9rem; } .agrid.c3 .abtn { padding: 8px 2px; font-size: 0.85rem; } .seg button { padding-left: 12px; padding-right: 12px; } }

/* Resumen del partido: la tabla se ajusta al ancho del celular y los nombres de jugador no se parten a media palabra */
.tbl.wrapt th, .tbl.wrapt td { white-space: normal; }
.tbl.wrapt th:not(.l), .tbl.wrapt td { text-align: center; vertical-align: middle; }
.tbl.wrapt th[scope="row"] { font-weight: 600; color: var(--ink-2); width: 44%; }
.pgrid .pk { grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 8px; }
.pgrid .pk .no { min-width: 32px; width: 32px; height: 32px; font-size: 0.9rem; }
.pgrid .pk .nm { font-size: 0.92rem; overflow-wrap: break-word; word-break: normal; hyphens: none; }
@media (max-width: 420px) { .tbl.wrapt th, .tbl.wrapt td { padding: 9px 5px; } }

/* Medio tiempo */
.pausa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pausa-row .muted { font-size: 0.9rem; }
.step.pausa { border-style: dashed; border-color: rgba(255, 255, 255, 0.55); }
.btn.big { width: 100%; min-height: 64px; font-size: 1.15rem; }

/* Foto de perfil del jugador */
.ph { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.08); color: var(--ink); font: 700 0.8rem var(--f-title); box-shadow: inset 0 0 0 2px var(--line); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.lg { width: 96px; height: 96px; font-size: 1.6rem; }
.ph.sm { width: 28px; height: 28px; font-size: 0.65rem; }
.ph svg { width: 46%; height: 46%; }
.fotorow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fotoinfo { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }
.fotoinfo p { margin: 0; }
.fotoacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.field .lbl { font-weight: 700; font-size: 0.93rem; }
.fotoacts input.sr:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.fotoacts label.btn { cursor: pointer; }
.nmf { display: inline-flex; align-items: center; gap: 10px; }
/* Roster del coach con foto: que "Quitar" quede en la misma línea en celular */
.pl.rr { gap: 8px 10px; flex-wrap: nowrap; }
.pl.rr .numin { width: 60px; flex: none; padding: 0 6px; }
.pl.rr .ph { width: 32px; height: 32px; font-size: 0.7rem; }
.pl.rr .nm { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; line-height: 1.2; }
.pl.rr .btn { flex: none; }

/* Inscripciones y torneos */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-2); font-size: 0.85rem; }
.tcard b.n { color: var(--ink); font-weight: 700; }
.motivo { display: grid; gap: 8px; margin-top: 12px; }
.motivo label { font-weight: 700; font-size: 0.93rem; }
.motivo input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.motivo input::placeholder { color: #8a8a8a; }
.motivo input:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: #fff; }
.acts2 { display: flex; flex-wrap: wrap; gap: 8px; }

/* Contador de inscripciones por aceptar en el menú */
.nb { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #f5f5f5; color: #111; font-size: 0.75rem; font-weight: 700; line-height: 1; }
.nav button[aria-current="page"] .nb, .chips button[aria-current="page"] .nb { background: #111; color: #f5f5f5; }

/* Categorías, subcategorías y grupos */
.grp { margin: 16px 0 8px; font-size: 0.95rem; font-weight: 700; color: var(--ink-2); }
.grp:first-child { margin-top: 0; }
.catrow { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.catlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.catlist li { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
.catlist b { font-weight: 700; }
.field input:disabled { opacity: 0.45; cursor: not-allowed; }
.row:has(.motivo) > .badge { align-self: flex-start; margin-top: 2px; }
.panel > .seg + .note { margin-top: 10px; }

/* Rosters del mismo equipo */
.cod { white-space: nowrap; }
.row .grow > b .badge { margin-left: 6px; vertical-align: 1px; }

/* Subcategorías del torneo */
.catrow .lbl { font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.vacias { display: grid; gap: 14px; }
.vacias > summary { cursor: pointer; padding: 12px 2px; font-weight: 600; }
.vacias[open] > summary { margin-bottom: 4px; }

/* Registro por enlace privado */
.linkbox { margin: 6px 0; padding: 12px 14px; border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: 12px; background: rgba(255, 255, 255, 0.05); font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; word-break: break-word; user-select: all; }
.join { margin: 0; font-size: 1.02rem; }
.steps.enl li { grid-template-columns: 1fr auto; }
.steps.enl small { overflow-wrap: anywhere; }
@media (max-width: 640px) { .steps.enl li { grid-template-columns: 1fr; } .steps.enl li .btn { justify-self: start; } }

/* Entrar con el correo */
.mailcard { display: grid; gap: 6px; margin: 8px 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.05); }
.mailcard b { font-size: 1.02rem; }
.mailcard p { margin: 0; }
.salirm { padding: 4px 16px 32px; }
/* En celular el botón "Abrir" del recorrido queda debajo del texto, no apretado en la columna del número. */
@media (max-width: 520px) { .steps:not(.enl) li .btn { grid-column: 2; justify-self: start; } }
/* Versión para árbitros: agregar jugadores en línea, detalles y aviso de confirmación. */
.addj .ar, .addj .ar2 { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding-top: 12px; }
.addj .ar2 { padding-top: 0; }
.addj .ar2 select { grid-column: 1 / -1; }
.addj input, .addj select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background-color: rgba(255, 255, 255, 0.05); color: var(--ink); }
.addj select { background-color: #242424; color-scheme: dark; }
.addj input[type="number"] { text-align: center; padding: 0 6px; }
.addj input:focus, .addj select:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: #fff; }
.addj .btn { min-height: 44px; }
.panel details { margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 4px; }
.panel details summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.panel details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.panel details .form { padding: 4px 0 0; border: 0; background: none; box-shadow: none; }
.manual { width: 100%; min-height: 200px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--ink); font: 0.95rem/1.45 var(--f-body, inherit); resize: vertical; }
.manual:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: #fff; }

.resimg { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-2); background: #050505; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.resimg:focus { outline: none; }
.resimg:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
#arb-imgp { scroll-margin-top: 72px; }
.parecido { display: block; margin-top: 8px; color: var(--ink-2); font-size: 0.92rem; line-height: 1.45; }
.parecido .badge { margin-right: 6px; }
.motivo select { width: 100%; }
.row .grow > .motivo { margin-top: 12px; }
.panel.cuenta > .acts2, .panel.cuenta > .form { margin-top: 14px; }
.panel.cuenta .btn.small { padding-left: 16px; padding-right: 16px; }
.panel > h2 + p.muted, .panel > h2 + .muted { margin-top: 6px; }
.panel > p.muted + .acts2, .panel > p.muted + .acts { margin-top: 14px; }
.hintlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.hintlist li { display: grid; gap: 2px; color: var(--ink-2); font-size: 14px; }
.hintlist li b { color: inherit; font-weight: 600; word-break: break-all; }

/* Pasar al roster: nombre arriba; número y botón abajo, para que el nombre no se parta en pantallas angostas. */
.pl.rr.pasar { flex-wrap: wrap; }
.pl.rr.pasar .nm { flex: 1 1 calc(100% - 52px); }
.pl.rr.pasar .numin { margin-left: 42px; }

/* Estadísticas: cada categoría es un bloque desplegable */
.panel.acc { padding: 0; }
.acc-h { margin: 0; font-size: 1.15rem; }
.acc-b { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: none; border: 0; border-radius: 18px; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.acc-b:hover { background: rgba(255, 255, 255, 0.04); }
.acc-b:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.acc-t { flex: 1 1 auto; min-width: 0; }
.acc-t small { display: block; margin-top: 2px; font-size: 0.85rem; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
.acc-b::after { content: ""; flex: none; width: 9px; height: 9px; margin: -3px 2px 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.18s ease; }
.acc-b[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
.acc-b[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.acc-p { padding: 6px 18px 18px; border-top: 1px solid var(--line-2); }
.acc-p .actions { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .acc-b::after { transition: none; } }

/* Logo del equipo: sobre fondo claro para que se vea bien aunque el logo sea oscuro */
.escudo { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 2px; border-radius: 9px; background: #f2f2f2; overflow: hidden; }
.escudo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.escudo.sm { width: 30px; height: 30px; }
.escudo.xl { width: 60px; height: 60px; padding: 4px; border-radius: 15px; }
.escudo.lg { width: 96px; height: 96px; padding: 6px; border-radius: 22px; }
.escudo.vacio { background: rgba(255, 255, 255, 0.08); color: var(--ink-2); }
.escudo.vacio svg { width: 46%; height: 46%; }
.tbl .escudo { width: 28px; height: 28px; border-radius: 8px; }
.tags .escudo { width: 22px; height: 22px; padding: 1px; border-radius: 7px; }
.eqhead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.eqhead h1 { min-width: 0; }
.eqh2 { display: flex; align-items: center; gap: 10px; }
.av.has-logo { padding: 3px; background: #f2f2f2; }
.av.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 520px) { .tbl .escudo { width: 24px; height: 24px; } .team .escudo { width: 28px; height: 28px; } .escudo.xl { width: 48px; height: 48px; } }

/* Foto del jugador junto a su nombre en las estadísticas */
.tn .nmf { display: flex; align-items: center; }
.tn .nmt { display: block; min-width: 0; }

/* Tiempos fuera */
.tf .head { flex-wrap: wrap; }
.tf .seg button { min-height: 36px; padding: 0 14px; }
.tfn2 { margin: 2px 0 6px; font-size: 0.9rem; }
.tfrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.tfn { flex: 1 1 130px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.tfdots { display: inline-flex; gap: 6px; }
.tfd { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-2); box-sizing: border-box; }
.tfd.on { background: var(--ink); border-color: var(--ink); }
.tfq { min-width: 5.2em; color: var(--ink-2); font-size: 0.9rem; }
@media (max-width: 420px) { .tf .seg button { padding-left: 12px; padding-right: 12px; } .tfrow .btn { flex: 1 1 auto; } }
.pausa .note { margin: 10px 0 14px; }

/* Reloj del partido */
.rel { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.relt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.reld { font: 700 2rem/1 var(--f-title); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink-2); }
.rel.on .reld { color: #fff; text-shadow: 0 0 20px rgba(255, 255, 255, 0.35); }
.rel.fin .reld { color: #0a0a0a; background: #f5f5f5; padding: 2px 8px; border-radius: 8px; letter-spacing: 0; }
.relc { color: var(--ink-2); font-size: 0.85rem; }
.rel .btn { flex: none; }
.relad { display: flex; align-items: center; gap: 8px 14px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); }
.relad .reld { flex: none; font-size: 1.6rem; color: var(--ink-2); }
.relad.on .reld { color: #fff; text-shadow: 0 0 16px rgba(255, 255, 255, 0.3); }
.relad .relc { min-width: 0; }
.rp .head { flex-wrap: wrap; }
.rp .seg button { min-height: 36px; padding: 0 14px; }
.relform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0; }
.relform .numin { width: 76px; }
.relaj { flex: 1 1 100%; font-weight: 700; }
@media (max-width: 420px) { .reld { font-size: 1.75rem; } .rp .seg button { padding-left: 12px; padding-right: 12px; } }

/* Mientras el servidor contesta un cambio, el cursor lo avisa y los botones se ven apagados. */
body.ocupado, body.ocupado * { cursor: progress; }
body.ocupado .btn, body.ocupado .link { opacity: .65; }