/* ════════════════════════════════════════════════════════════════════ CLASH OF PICKS · TOPBAR — HOJA COMPARTIDA ──────────────────────────────────────────────────────────────────── Antes este bloque estaba COPIADO Y PEGADO dentro de 19 páginas. Cada arreglo había que hacerlo 19 veces, y por eso se había desincronizado: la tipografía del avatar y de las monedas era Anton en 17 páginas e Inter en 5. Ahora vive acá y se toca UNA vez. TIPOGRAFÍA DE LA TOPBAR: Inter (Franco, 01/08/2026). Cambiar estas DOS declaraciones es todo lo que hace falta para que las 19 páginas cambien juntas — antes había que editarlas de a una y por eso se habían desincronizado. Inter necesita peso explícito porque Anton es de un solo grosor: 800 en el avatar, 700 en las monedas, que es lo que iguala el aspecto compacto que tenía. ⚠ El nombre del archivo lleva versión (?v=N) porque el navegador guarda las hojas en caché: sin eso, al desplegar podrías seguir viendo la anterior. La versión sube con cada ZIP. ════════════════════════════════════════════════════════════════════ */ /* topbar inline (autocontenido) */ /* TOPBAR — igual a arena original (_14) */ /* ════════ TOPBAR ════════ */ .topbar{ position:fixed;top:0;left:var(--sidebar-w);right:0; /* ⚠⚠ LA ALTURA SALE DEL TOKEN, NO DE UN NÚMERO A MANO (04/09/2026). Escrita acá en 64 fijo, la barra medía 64 y DOCE páginas —batalla-sobres, clash-draft, doble-nada, draft, draft-doble, draft-doble-juego, equipo-competitivo, equipos, grupo, grupos, spin, survival— declaraban `:root{--topbar-h:58px}` y con ese 58 calculaban su `padding-top`: el contenido les arrancaba SEIS PIXELES POR DEBAJO de la barra, tapado. Nadie sabía por qué esas doce se veían mal y el resto bien, porque los dos números estaban en archivos distintos y ninguno de los dos estaba equivocado solo. ⚠ El respaldo literal es obligatorio: hay páginas que no cargan `cop-ui-tokens.css` y sin él la barra se quedaría sin altura. */ height:var(--topbar-h, 64px); background:rgba(15,15,15,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--card-border); display:flex;align-items:center; /* ⚠ EL AIRE SE FUE ADENTRO: lo pone `.tb-in`, que además limita el ancho. Acá quedaría por fuera del tope de 1500 px y la barra volvería a pasarse de los bordes del contenido. */ padding:0;z-index:40; /* ⚠ EL COLOR DE TEXTO SE DECLARA, NO SE HEREDA (31/08/2026). Sin esto la barra tomaba el `color` del `body` de cada pantalla: en 10 de las 34 era blanco puro y en el resto `--text` (var(--text, #f4f6fb)). Nadie lo iba a ver —los íconos y las píldoras declaran su propio color— pero un componente cuyo aspecto depende de dónde lo cuelguen no es un componente. Medido con `getComputedStyle`, no leído. */ color:var(--text); } /* ══════════════════════════════════════════════════════════════════ ⚠⚠ LOS MISMOS LÍMITES QUE EL CONTENIDO (Franco, 31/08/2026) ------------------------------------------------------------------ *«los límites de la topbar en ubicación tienen que tener los mismos márgenes o bordes que tiene el contenido en la página de inicio, no puede pasarse de esos límites»*. La barra sigue ocupando todo el ancho —su fondo tiene que llegar a los dos bordes de la pantalla— pero su CONTENIDO se frena donde se frena el de la página: `--cop-ancho` y `--cop-aire`, los mismos dos valores que usa `.main` de la portada. ⚠ `margin-right:auto` Y NO `margin:0 auto`: el contenido de la portada NO está centrado, arranca pegado a la barra lateral y se corta a los 1500 px. Centrar la barra la habría dejado desalineada del contenido justo en las pantallas anchas, que es donde se nota. */ .tb-in{ width:100%; /* ⚠⚠ 25/09/2026 (tanda 9C): el tope es el ANCHO DEL CONTENIDO más su aire a cada lado, como `.cop-main--xl` de la portada desde el 04/09. Con 1500 a secas el aire quedaba ADENTRO del tope y en pantallas anchas la barra terminaba ~29 px antes que el contenido (`arnes-lote-ba` 3f). */ max-width:calc(var(--cop-ancho, 1500px) + var(--cop-aire, 1.8rem) * 2); margin-right:auto; padding:0 var(--cop-aire, 1.8rem); display:flex;align-items:center;gap:1rem; box-sizing:border-box; } .tb-brand{flex:0 0 auto;display:flex;align-items:center;text-decoration:none} .tb-brand img{height:20px;width:auto;display:block} .tb-right{margin-left:auto;display:flex;align-items:center;gap:.7rem;flex:0 0 auto} .tb-coins{display:flex;align-items:center;gap:var(--gap-sm, .5rem);margin-right:.3rem} .coin-pill{ display:inline-flex;align-items:center;gap:.3rem; font-weight:700;font-size:var(--fs-md, .88rem);padding:.3rem var(--gap-md, .7rem);border-radius:999px; border:1px solid var(--card-border); } .coin-pill strong{font-family:'Inter',sans-serif;font-weight:400} .coin-gold{background:rgba(255,194,51,.12);color:var(--gold);border-color:rgba(255,194,51,.4)} .coin-diamond{background:rgba(12,149,235,.12);color:#5fc4ff;border-color:rgba(12,149,235,.4)} .tb-ico{ position:relative;width:38px;height:38px;border-radius:50%; display:grid;place-items:center;font-size:var(--fs-lg, 1.15rem);color:var(--text-dim); background:transparent;border:none;cursor:pointer;transition:background .2s,color .2s; } .tb-ico:hover{background:rgba(255,255,255,.07);color:#fff} .tb-badge{ position:absolute;top:2px;right:0; background:var(--red, #ff3b5c);color:#fff;font-size:.62rem;font-weight:700; min-width:16px;height:16px;border-radius:999px; display:grid;place-items:center;padding:0 4px; } .tb-user{ display:flex;align-items:center; padding:.25rem;border-radius:var(--r-card, 14px);text-decoration:none;cursor:pointer; background:transparent;transition:background .2s; } .tb-user:hover{background:rgba(255,255,255,.07)} .tb-avatar{ width:34px;height:34px;border-radius:var(--r-card, 14px); background:radial-gradient(ellipse at center,#0a0d14,#000); border:none; box-shadow:none; display:grid;place-items:center; font-size:var(--fs-base, 1rem);color:#fff; } @media(max-width:760px){ /* ⚠ EL AIRE VA EN `.tb-in`, NO EN LA BARRA (31/08/2026): declarado acá quedaba FUERA del tope de ancho, así que el contenido de la barra arrancaba 0,8rem más adentro que el de la página y las dos columnas no coincidían. En el teléfono no hay barra lateral, así que `left` sí se corrige acá. */ .topbar{left:0} .tb-in{padding:0 var(--cop-aire-movil, 1rem);gap:var(--gap-md, .7rem)} .tb-brand img{height:22px} .tb-right{gap:.5rem} .tb-coins{gap:.3rem} .coin-pill{font-size:var(--fs-xs, .72rem);padding:.25rem .5rem;gap:.25rem} .tb-ico{width:34px;height:34px;font-size:var(--fs-base, 1rem)} .tb-avatar{width:32px;height:32px;border-radius:var(--r-card, 14px);font-size:var(--fs-sm, .8rem)}} /* ===== TOPBAR UNIFICADA (override) ===== */ /* ⚠⚠⚠ LA BARRA DEJA PASAR EL FONDO (Franco, 22/09/2026): *«las barras también quiero que vayan incluidas, ya que eso le da profundidad y uniformidad al diseño como algo completo»*. Acá decía `background:var(--s0) !important` y `backdrop-filter:none !important` — o sea, gris PLANO y opaco. Ésa fue la razón por la que el fondo de app del 16/09 se rechazó al día siguiente: el arte quedaba en la franja del medio con dos barras planas arriba y abajo diciendo otra cosa. No era un fondo de la app, era un fondo del contenido. ⚠⚠ TRANSLÚCIDA **CON DESENFOQUE**, NUNCA TRANSPARENTE. Las dos cosas van juntas y son una sola decisión: el `.72` deja ver el degradado y el `blur` separa el texto de lo que pasa por detrás. Sin la capa de color el texto de la topbar queda directamente sobre el degradado y se lee PEOR que con el gris plano que Franco ya rechazó — o sea que «dejar pasar el fondo» llevado al extremo reintroduce el problema por el otro lado. El arnés exige el alpha en su rango Y el desenfoque. ⚠ EL `-webkit-` VA: sin él, Safari de iOS no desenfoca y la barra queda semitransparente a secas, que es justo el caso ilegible. ⚠ EL `!important` SE QUEDA: el `