/* ════════════════════════════════════════════════════════════════════ COP CAMINO — el camino vertical de niveles ──────────────────────────────────────────────────────────────────── El mapa scrolleable, la tarjeta de división, el escalón de cada nivel con sus tres columnas —lo que pide a la izquierda · el nodo · la recompensa a la derecha— y el cartel bajo el nodo actual. ⚠⚠ ESTO VIVÍA ADENTRO DE `carrera.html` Y SE MUDÓ ACÁ (08/09/2026), porque Franco pidió una SEGUNDA pantalla con el mismo camino: *«armá un camino exactamente igual al del Modo Carrera que en lugar de poner los puntos de carrera ponga los puntos de XP necesarios para llegar a ese nivel (…) sólo tenés que tomar la estructura central, sin botones laterales ni nada, y mantené la misma cantidad de divisiones y niveles»*. «Exactamente igual» es literal: no es una hoja parecida, es LA MISMA. Copiada, la primera corrección que pidiera sobre el camino aparecería en una pantalla y no en la otra — que es el error que este proyecto ya pagó con cuatro tarjetas de historial. ⚠ LO QUE **NO** SE MUDÓ: `.vidas`, `.candado`, `.pie`, `.fab` y las hojas de selección. Eso es de Carrera y sólo de Carrera. ⚠ LAS DOS PERILLAS DE LA PÁGINA: --cam-reserva cuánto ancho hay que esquivar a cada lado por una columna fija que flote sobre el mapa (Carrera: 136px por sus fabs; XP: 0, no tiene). --pr-alto el alto del escalón. ⚠ EL CENTRADO ES POR CONSTRUCCIÓN Y NO POR CUENTA: la fila del nivel son TRES columnas del mismo ancho, así que el nodo cae en el 50 % exacto aunque la columna de la izquierda o la de la derecha estén vacías. Si se dejaran encoger, el camino saldría en zigzag — es la razón por la que `--pr-an` es fija y tiene que seguir siéndolo. ⚠ SE CARGA DESPUÉS de `cop-borde.css` y de `cop-escalera.css`: usa el marco en degradé y la fila de división de Rangos. ════════════════════════════════════════════════════════════════════ */ /* ── camino de niveles (scrolleable, arranca abajo) ── */ .mapa{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;z-index:10; scrollbar-width:none} .mapa::-webkit-scrollbar{display:none} /* ⚠⚠ EL AIRE LATERAL ES LEY, Y ACÁ NO ESTABA (Franco, 05/09/2026): *«el indicador de intento de juego con su texto de abajo y el botón de ver alineación excede los márgenes impuestos por la app de los costados. Siempre tenés que respetar esos márgenes en toda la app, a menos que haya una indicación específica de que no debe respetarlo. Es la alineación de izquierda a derecha más usada en toda la app, así que es un espacio fijo que debe estar determinado»*. El camino tenía `padding:9rem 0` — cero a los costados. Los nodos no se notaban porque van centrados, pero el cartel de abajo (`.prox`, con `min-width:280px`) y su botón (`display:block`) se estiraban hasta el borde físico de la pantalla. ⚠ EL NÚMERO NO SE ESCRIBE ACÁ: sale de `--cop-main-aire`, el mismo token que usa `.cop-main` en las otras 26 pantallas. Si algún día ese aire cambia, cambia en un solo lugar. */ .camino{position:relative;width:100%;max-width:520px;margin:0 auto; padding:9rem var(--cop-main-aire, 16px) 7.5rem; box-sizing:border-box; display:flex;flex-direction:column-reverse;align-items:center;gap:0} /* ⚠⚠⚠ EL CAMINO, CENTRADO DE VERDAD (Franco, 26/08/2026): *«el camino de carrera tiene que estar centrado, con el "Niv" adentro del candado, los puntos a la izquierda y las recompensas a la derecha, y la línea igual a la de rangos y del color del tramo»*. Lo que había: el nodo y su recompensa formaban un PAR centrado, así que el nodo quedaba medio par corrido a la izquierda del centro y la troncal se corría con él (`left:calc(50% - (--pr-an + --pr-aire)/2)`) para poder enhebrarlos. Funcionaba, pero el camino entero se leía descentrado respecto de la pantalla y de la tarjeta de división, que sí está en el medio. Lo que hay: TRES columnas de ancho igual —puntos · nodo · recompensa— así que el nodo cae exactamente en el 50 % por construcción y la línea vuelve al centro sin cuentas. Las dos columnas de los costados miden lo mismo (`--pr-an`) aunque una esté vacía: si se encogieran, ese nivel se correría del eje y el camino quedaría en zigzag — que es la razón por la que `--pr-an` era fija antes y la sigue siendo. ⚠ LA LÍNEA YA NO ES UNA SOLA BARRA DE PUNTA A PUNTA. Ahora cada nivel dibuja SU tramo (arriba y abajo del nodo), como el riel de `rangos.html`: 6 px, `var(--card-border)` cuando está por venir y el color del tramo cuando ya se recorrió. Una sola barra no podía cambiar de color por división, que es justo lo que pidió Franco. */ /* ⚠⚠ LAS TRES MEDIDAS DEL ESCALÓN, EN UN SOLO LUGAR. `--pr-an` deja de ser 96 px fijos (27/08/2026). La columna de la derecha —vidas, M y H— es un elemento FIJO que flota sobre el mapa: no participa del centrado, así que en un teléfono angosto la fila del escalón le pasaba POR DEBAJO y el recuadro dorado quedaba tapado a medias. (Se veía en la foto ya antes de esta tanda, con los dos botones solos; con las vidas en vertical pasó a taparse toda una columna de alto.) ⚠ NO SE ARREGLA CORRIENDO EL CAMINO HACIA LA IZQUIERDA: quedaría descentrado, que es justo lo que costó arreglar el 26/08. Se arregla ACHICANDO la fila hasta que entre entre las dos zonas —la de la columna y su espejo del otro lado—, así sigue centrada y ya no hay nada debajo de los botones. ⚠ `100vw` Y NO `100%`: esta variable se usa en `.nivel-par`, que es un grid cuyo ancho lo deciden sus propias columnas. Un `100%` ahí se mediría contra sí mismo. */ .camino{ --pr-aire:.55rem; --pr-alto:76px; /* 68px = el fab de 46 + 1rem hasta el borde + 6 px de aire; por dos, porque la zona hay que reservarla también del lado espejo o la fila dejaría de estar centrada. Medido: con 62 la fila terminaba EXACTO en el borde del fab —cero luz— y se leía como si se tocaran. */ /* ⚠⚠ LOS 136 px PASARON A SER UNA PERILLA (08/09/2026, al compartir esta hoja con el camino de XP). Eran la zona de la columna fija de Carrera —vidas, M y H— reservada de los DOS lados para que la fila siguiera centrada. El camino de XP no tiene esa columna: si heredara la reserva, su fila saldría 136 px más angosta sin ninguna razón. Cada página declara lo que tenga que esquivar; el defecto es 0. */ --pr-an:min(96px, calc((100vw - var(--cam-reserva, 0px) - var(--pr-aire) * 2) / 3)); } .nivel{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center; padding:var(--gap-xl, 1.2rem) 0} /* ⚠⚠ LA RECOMPENSA VA AL LADO, NO ARRIBA (Franco, 22/08/2026): *"en el camino de niveles, la recompensa con su logo pase a estar a la derecha del indicador del nivel, ambos en conjunto centrados uno al lado del otro"*. Estaba arriba, como un globo con su piquito apuntando al nodo, y le sumaba a cada nivel su alto más el margen: el camino entraba a razón de tres niveles por pantalla. Al costado, el par mide lo alto del nodo —y de paso las recompensas quedan alineadas en su propia columna, que se lee de un vistazo. El piquito se va con el globo: apuntaba hacia abajo, y ahora abajo no está el nodo. */ /* ⚠⚠ TRES COLUMNAS, NO UN PAR (26/08/2026). `grid` y no `flex` porque lo que hace falta es que las dos columnas de los costados midan LO MISMO aunque una esté vacía: con flex, un nivel sin puntos encogía su celda y ese nodo se corría del eje. Con `--pr-an` a los dos lados, el nodo está en el 50 % de la fila siempre, y la línea también. */ .nivel-par{display:grid; grid-template-columns:var(--pr-an,96px) auto var(--pr-an,96px); align-items:center;justify-content:center; gap:var(--pr-aire,.7rem)} /* ⚠ EL "NIV 7" AHORA VA ADENTRO DEL CANDADO (Franco, 26/08/2026), así que ya no necesita salir del flujo: el bloque del nivel vuelve a medir lo que mide el nodo y los centros de las tres columnas coinciden solos. Antes la etiqueta iba debajo, absoluta, para no correr 10 px hacia abajo el centro del par (medido en el arnés, `delta=-10`). */ .nivel-nodo{position:relative;display:flex;flex-direction:column;align-items:center} /* ⚠⚠ LA RECOMPENSA VA SOBRE EL FONDO DE LA PÁGINA, SIN CAJA (Franco, 22/08/2026, noche): *«en el recuadro de las recompensas por nivel no tenés que ponerle ni recuadro con borde, y el fondo debe eliminarse así queda la recompensa sobre el fondo de la página»*. ⚠ SE VAN EL BORDE, EL FONDO Y LA SOMBRA — PERO NO EL ANCHO. El `width:var(--pr-an)` es lo que mantiene el camino centrado: es una de las dos columnas gemelas de `.nivel-par`, así que si la recompensa dejara de medir sus 96 px el nodo se correría del eje. Es la misma medida que costó alinear premio y nodo el 20/08; acá solo se saca la piel. */ /* ⚠⚠ Y EL 27/08/2026 LA CAJA VUELVE, PERO NO ES LA DE ANTES. Lo que Franco sacó el 22/08 era un recuadro con FONDO propio —la recompensa flotaba en una pastilla gris más clara que la página—. Lo que pide ahora es el borde degradado nuevo, que es lo contrario: adentro va el fondo de la página, y lo único que se dibuja es el marco. Las dos cosas conviven: sigue sin haber "otro color de fondo". ⚠ EL ANCHO SIGUE SIENDO SAGRADO por la misma razón de siempre: es una de las dos columnas gemelas de `.nivel-par`. */ /* ⚠⚠ EL DIBUJO CENTRADO Y LA CANTIDAD ABAJO, EN LA FILA DEL RÓTULO (Franco, 01/09/2026, corrección de la tanda BD: *«la cantidad de puntos debe estar siempre abajo del logo de puntos, alineado en la misma fila del nivel»* — y la simetría de la tanda arrastra a la recompensa al mismo molde). La primera pasada los puso EN FILA (dibujo y cantidad lado a lado, centrados): el número quedaba a mitad de celda mientras el «Niv N» del estadio vive pegado a la plataforma — dos alturas en la misma fila, que es justo lo que Franco marcó en la captura. Ahora el dibujo se centra en la celda (como el estadio en la suya) y la cantidad baja al renglón del rótulo — que desde la segunda corrección del 01/09 cuelga `.4rem` BAJO la celda (el «Niv N» se despegó del arte del estadio): el mismo `top:calc(100% + .4rem)` acá, en `.puntos b` y en `.nvlbl` es la MISMA línea porque las tres celdas son la misma `lv-caja`. */ .premio{flex:0 0 auto; display:grid;place-items:center; box-shadow:none; font-weight:800;font-size:var(--fs-md, .88rem);line-height:1;position:relative} .premio b{position:absolute;left:0;right:0;top:calc(100% + .4rem);text-align:center} /* ══ LOS TRES RECUADROS DEL ESCALÓN ═══════════════════════════════════ Franco, 27/08/2026: *«lo importante es que los 3 recuadros tengan el mismo tamaño, mismo diseño, con diferente color, y sigan alineados»*. ⚠⚠ POR ESO LA MEDIDA SE ESCRIBE UNA SOLA VEZ, ACÁ. Antes cada uno traía la suya —el premio 96 de ancho y el alto que le diera el contenido, los puntos otro alto, el nodo 72×72 y 86×86 cuando era el actual—: tres cajas que se veían distintas porque estaban escritas en tres lugares distintos. Si el tamaño vuelve a repartirse, en dos cambios se despareja de nuevo. ⚠ EL NIVEL ACTUAL YA NO CRECE. Crecía a 86 px para destacarse, y con eso rompía justo lo que se pide. Se destaca igual —y más— por el resplandor, el borde encendido y el ícono grande: el tamaño no era la única herramienta, era la más cara. ⚠ EL COLOR VIAJA EN `--borde-rgb` Y NADA MÁS. `cop-borde.css` no sabe de carrera; esta pantalla le dice de qué color y él dibuja. Es la misma convención que usan lineup y modos-competitivos. */ .lv-caja{ box-sizing:border-box; width:var(--pr-an,96px); height:var(--pr-alto,76px); padding:.3rem .25rem; /* el relleno es el fondo de la página, como en todo `cop-borde` */ --borde-fondo:var(--bg, #0b0e14); } /* ⚠ LOS RECUADROS DE PUNTOS Y PREMIO SE FUERON (Franco, 01/09/2026, tanda BD): los `cop-borde--primary`/`--gold` que viajaban en esos dos armadores ya no están en el marcado. `lv-caja` sobrevive como pura GEOMETRÍA: el ancho de las columnas gemelas y el alto común, que son los que mantienen el camino derecho y las tres piezas en UNA línea. */ /* ⚠ EL DEL MEDIO CONSERVA SU COLOR DE ESTADO, y es una decisión, no un olvido: el borde del nodo es lo único que dice de un vistazo si el escalón está cerrado, superado o es el de ahora. Pintarlo de un cuarto color fijo sería cambiar información por decoración. Cerrado va en blanco apagado, superado en verde, el actual en celeste encendido. */ .nodo.chip.lv-caja{--borde-rgb:255,255,255;--borde-abajo:.45;--borde-arriba:.06} .nivel.hecho .nodo.chip.lv-caja{--borde-rgb:34,197,94;--borde-abajo:.9;--borde-arriba:.14} /* ⚠⚠ EL CELESTE ERA UN NÚMERO ESCRITO A MANO — 18/09/2026. Franco: *«todo lo de modo carrera tiene que ser violeta, internamente también se tienen que mostrar los colores violeta»*. Ahora sale del acento de la competencia, con el celeste como respaldo: `carrera.html` declara `data-comp="carrera"` y da violeta; `xp.html`, que carga esta misma hoja y NO declara competencia, se queda en el celeste de antes. Un color por pantalla, decidido por la pantalla, sin duplicar la tabla. */ .nivel.actual .nodo.chip.lv-caja{--borde-rgb:var(--cop-acento-rgb,12,149,235);--borde-abajo:1;--borde-arriba:.3} /* ── LOS PUNTOS, A LA IZQUIERDA (Franco, 26/08/2026) ──────────────── *«los puntos a la izquierda y las recompensas a la derecha»*. El objetivo de puntos era un renglón chiquito debajo de la recompensa y SOLO en el nivel actual: leído así, el camino no decía cuánto pide cada escalón, que es la información con la que el jugador decide si sigue. Ahora es una columna propia, con el mismo ancho y el mismo trato visual que la recompensa — el mismo peso porque son las dos caras del mismo trato: esto pedís, esto cobrás. ⚠ El símbolo fue el dardo (🎯) hasta el 01/09/2026: ahora es la moneda CP violeta que cargó Franco (`punto-carrera.webp`). */ /* ⚠⚠ LA MONEDA CENTRADA Y EL NÚMERO ABAJO (Franco, 01/09/2026, corrección de la tanda BD: *«el número de la cantidad de puntos debe estar en la misma fila que "nivel"… en el nivel 9 por ejemplo debe estar a la misma altura y línea de "Niv 9"… la cantidad de puntos debe estar siempre abajo del logo de puntos»*). La primera pasada los puso EN FILA (moneda y número lado a lado): el número quedaba a mitad de celda y el «Niv N» del estadio pegado a la plataforma — dos alturas distintas. Ahora la moneda se centra en la celda (como el estadio en la suya) y el número se apoya en el renglón del rótulo. ⚠ EL RENGLÓN BAJÓ CON EL RÓTULO (segunda corrección del 01/09: el «Niv N» se despegó del estadio y cuelga `.4rem` bajo la celda): el mismo `top:calc(100% + .4rem)` acá y en `.nodo-estadio .nvlbl` es la MISMA línea porque las tres celdas comparten la geometría de `lv-caja`. */ .puntos{position:relative; display:grid;place-items:center; font-family:'Inter',sans-serif;font-weight:800;font-size:var(--fs-md, .88rem); color:#8fd0ff;text-align:center;line-height:1} .puntos b{position:absolute;left:0;right:0;top:calc(100% + .4rem);text-align:center} /* la moneda CP violeta (01/09/2026), GRANDE y sin el rótulo «puntos» (mismo pedido de Franco que en el premio: el dibujo y la cantidad, nada más). El rótulo `.pt-lbl` se fue del marcado con su regla: grepeado en la página antes de borrarla, que es la regla del 25/08. */ .puntos .pt-ico{width:30px;height:30px;display:block;object-fit:contain} .nivel.bloq .puntos{color:var(--text-dim,#8b93a7)} .nivel.actual .puntos{color:#fff} /* ⚠ el nivel SIN recompensa (o sin objetivo) deja el hueco igual (`visibility`, no `display`): si desapareciera, la columna se encogería y ese nodo quedaría corrido del eje — un escalón torcido en medio del camino por un dato que falta. */ .premio.vacio,.puntos.vacio{visibility:hidden} /* más grande (01/09/2026): con «Carta»/«Sobre»/«puntos» afuera, el dibujo es el que dice qué es — y a 1.5rem quedaba tímido solo */ .premio .ico{font-size:2.1rem;line-height:1} /* ⚠ LA CLASH COIN OCUPA LO MISMO QUE OCUPABA EL EMOJI. `cop-ico` es un `background-image` y mide lo que le digan: sin esta línea salía a 1 em (≈12 px con la letra de la chapita) y la fila de recompensas quedaba desalineada respecto de la carta y el sobre, que siguen siendo emojis de 2.1rem. Se mide contra ellos, no contra un número inventado. */ .premio i.cop-ico.ico{width:2.1rem;height:2.1rem;display:block} /* el objetivo solo aparece en el nivel actual, debajo del nombre */ /* ⚠ `.premio .obj` se fue con el objetivo (26/08/2026): los puntos son ahora su propia columna (`.puntos`) a la izquierda del nodo, y esta regla ya no la usaba nadie —grepeado antes de borrarla, que es la regla desde el 25/08—. */ /* ⚠⚠ SE FUE EL ROMBO ENTERO (27/08/2026). Eran ocho reglas —`.nodo`, `.rombo`, sus tres estados y el `.nodo` grande del actual— del diseño anterior al candado cuadrado del 20/08. El marcado no escribe `class="rombo"` en ningún lado desde entonces: grepeado en la página antes de borrarlas, que es la regla desde el 25/08. Se borran AHORA y no antes porque dos de ellas ya no eran sólo muertas, eran dañinas: `.nivel.actual .nodo{width:96px;height:96px}` (0-3-0) le ganaba al tamaño único de `.lv-caja` (0-1-0) y el escalón actual habría seguido midiendo distinto que sus dos vecinos — justo lo que se pidió emparejar. */ .nivel.bloq .ncont{color:#6b7390;font-size:var(--fs-lg, 1.15rem)} .ncont{position:relative;z-index:2;display:grid;place-items:center} .nivel.actual{padding-bottom:var(--gap-sm, .5rem)} /* ⚠ EL ÍCONO DEL ACTUAL BAJA DE 2.6rem A 1.9rem. Con la caja emparejada en 76 px de alto, 2,6 rem (41,6 px) más el "Niv N" no entraban: la llama se comía el rótulo. El resplandor y el borde encendido siguen marcando cuál es el escalón de ahora. */ .nivel.actual .ncont{font-size:1.9rem;filter:drop-shadow(0 4px 10px rgba(var(--cop-acento-rgb,12,149,235),.7))} .nivel.hecho .ncont{color:var(--ok, #22c55e);font-weight:900;font-size:var(--fs-lg, 1.15rem)} /* cartel del próximo partido (bajo el nodo actual) */ /* la chip del sistema (tanda UI-2): var(--s2, #161b25) · borde 1.5 · radio 14 */ /* ⚠⚠ Y EL CARTEL DEL PRÓXIMO PARTIDO TAMPOCO LLEVA CAJA (Franco, 22/08/2026, noche): *«lo mismo que el recuadro que está alrededor del botón de armar mis 5 picks: tiene que estar el texto y el botón sin ese recuadro y sin ese otro color de fondo»*. Quedan el objetivo y el botón, apoyados sobre el fondo de la página. El `min-width` se conserva: es lo que evita que el cartel se angoste y el botón salte de ancho entre un nivel y el siguiente. */ /* ⚠ EL MARGEN SUBIÓ DE .9 A 1.8rem (01/09/2026, segunda corrección): el «Nivel N» del escalón actual ahora CUELGA ~20 px por debajo de la celda del estadio, y con .9rem el botón del cartel le respiraba en la nuca. El cartel arranca después del renglón colgado, con aire. */ .prox{margin-top:1.8rem;background:none;border:none;border-radius:0; padding:var(--gap-xs, .3rem) 0;text-align:center;width:100%;max-width:340px} .prox-eq{display:flex;align-items:center;justify-content:center;gap:.7rem;font-weight:900;font-size:var(--fs-base, 1rem)} .prox-eq img{width:26px;height:26px;border-radius:6px;object-fit:cover} .prox-hora{color:#cfd6ee;font-weight:800} /* ⚠ sin la línea gris de arriba (tanda UI-2, Franco) */ .prox-cd{margin-top:var(--gap-sm, .5rem); color:var(--oro);font-weight:800;font-size:var(--fs-sm, .8rem);letter-spacing:.8px;text-transform:uppercase; display:flex;align-items:center;justify-content:center;gap:var(--gap-sm, .5rem)} /* ⚠ EL BOTÓN CONSERVA SU BORDE, NO SU RELLENO. Sin el borde dejaría de leerse como algo que se toca —sería un link suelto en el medio del mapa—; lo que Franco sacó es «ese otro color de fondo», así que el relleno pasa a transparente y el botón se apoya sobre el fondo de la página igual que el resto del cartel. */ /* ⚠⚠ Y AHORA ESE BORDE ES EL NUEVO (Franco, 27/08/2026): *«el botón de "armar mis 5 picks" también tiene que tener este nuevo diseño de recuadro»*. Se van el `border` de un color y el `background`: los pone `cop-borde.css` con el color celeste que este botón ya tenía. */ /* ⚠⚠ `margin-inline:auto` — 18/09/2026. Franco: *«en el modo carrera las ligas bloqueadas tienen que tener el botón de liga bloqueada centrado»*. LA CAUSA, medida y no supuesta: el botón de la liga ABIERTA es un `` y el de la bloqueada es un `