/* ════════════════════════════════════════════════════════════════════
CLASH OF PICKS · BARRA INFERIOR / RAIL DE ESCRITORIO — COMPARTIDA
────────────────────────────────────────────────────────────────────
Estaba copiada en 14 páginas. Misma lógica que la topbar: se toca acá
y baja a todas. El nombre lleva versión por el caché del navegador.
════════════════════════════════════════════════════════════════════ */
/* bottombar inline (autocontenido) */
/* ════════════════════════════════════════════════════════════
BOTTOM BAR / SIDEBAR UNIFICADA — diseño único de toda la plataforma
(extraído de arena.html — NO duplicar estos estilos en cada página)
════════════════════════════════════════════════════════════ */
/* ⚠⚠⚠ LA MISMA DECISIÓN QUE LA TOPBAR (Franco, 22/09/2026): la barra
deja pasar el fondo de la app, translúcida y con desenfoque. El
porqué largo está en `cop-ui-topbar.css`; acá va el resumen: con las
barras opacas el fondo queda encerrado en la franja del medio, y eso
fue exactamente lo que hizo que Franco sacara el fondo del 16/09 al
día siguiente.
⚠ Los mismos números que la topbar, a propósito: dos barras del mismo
material con dos opacidades distintas se leen como un error. */
.sidebar{
position:fixed;top:0;left:0;bottom:0;
width:var(--sidebar-w);
background:rgba(var(--barra-rgb, 11,14,20), .72);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
border-right:1px solid var(--card-border);
display:flex;flex-direction:column;align-items:center;
padding:1rem 0;z-index:50;
}
.sb-logo{
width:44px;height:44px;border-radius:var(--r-card, 14px);
background:linear-gradient(135deg,var(--primary),var(--secondary));
display:grid;place-items:center;font-size:var(--fs-lg, 1.15rem);color:#fff;
box-shadow:none;
margin-bottom:2rem;flex:0 0 auto;
}
/* ⚠ 30/09/2026: el logo de la barra lateral no tenía tamaño propio y
dependía de que la página trajera `img{max-width:100%}`; en grupo.html
(que no lo trae) se dibujaba a 1072 px tapando la pantalla en la compu. */
.sb-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.sb-nav{display:flex;flex-direction:column;gap:.5rem;flex:1;width:100%;align-items:center}
.sb-item{
position:relative;width:48px;height:48px;border-radius:14px;
background:transparent;display:grid;place-items:center;
font-size:var(--fs-xl, 1.3rem);color:var(--text-dim);text-decoration:none;
transition:background .2s,color .2s;
}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-item.active{
background:linear-gradient(135deg,rgba(12,149,235,.25),rgba(32,104,255,.25));
color:#fff;
}
.sb-item.active::before{
content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
width:4px;height:26px;border-radius:0 4px 4px 0;
background:linear-gradient(180deg,var(--primary),var(--secondary));
}
.sb-item::after{
content:attr(data-label);
position:absolute;left:60px;top:50%;transform:translateY(-50%);
background:var(--card);border:1px solid var(--card-border);
color:#fff;font-size:var(--fs-sm, .8rem);font-weight:600;
padding:var(--gap-sm, .5rem) var(--gap-md, .7rem);border-radius:var(--r-card, 14px);white-space:nowrap;
opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;
}
.sb-item:hover::after{opacity:1}
.sb-bottom{display:flex;flex-direction:column;gap:.5rem;align-items:center}
/* overrides de íconos/labels (idénticos a arena) */
.sb-ico{display:grid;place-items:center;font-size:var(--fs-xl, 1.3rem);line-height:1}
.sb-text{display:none}
.sb-home-logo img{width:30px;height:30px;object-fit:contain}
@media(min-width:761px){
.sb-bottom .sb-item{width:48px;height:48px}
}
@media(max-width:760px){
.sb-nav{justify-content:space-between;padding:0 var(--gap-sm, .5rem)}
.sb-item{flex:1;height:auto;width:auto;flex-direction:column;gap:.15rem;padding:.3rem 0;border-radius:var(--r-card, 14px)}
.sb-text{display:block;font-size:.6rem;font-weight:700;letter-spacing:.2px;color:var(--text-dim)}
.sb-item.active .sb-text{color:var(--primary)}
.sb-ico{font-size:var(--fs-xl, 1.3rem)}
.sb-home .sb-home-logo{width:auto;height:auto;border-radius:0;background:none;margin-top:0;box-shadow:none;border:none;display:grid;place-items:center}
.sb-home .sb-home-logo img{display:none}
.sb-home .sb-home-logo::before{
content:"";width:24px;height:24px;display:block;background:#fff;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
}
/* ════════ MOBILE: barra inferior ════════ */
@media(max-width:760px){
:root{--sidebar-w:0px}
/* barra recta y lisa, pegada al borde inferior, ocupando todo el ancho */
.sidebar{
top:auto;bottom:0;left:0;right:0;transform:none;
width:100%;max-width:none;height:auto;
flex-direction:row;justify-content:center;gap:0;
/* ⚠⚠ ESTO SE MIDIÓ EN EL TELÉFONO, NO SE ESTIMÓ (17/09/2026).
Franco, con la app instalada: *«las tabs de abajo se ven levantadas
de más, la distancia que tienen con el borde de abajo es mucho más
larga que la de arriba, hay mucho espacio vacío abajo de los
símbolos»*. Tenía razón y el número lo explica: era `8px` arriba
contra `8px + env(safe-area-inset-bottom)` abajo, y en un iPhone
con barra de inicio ese `env()` vale **34px**. O sea 8 arriba
contra 42 abajo — cinco veces más de un lado que del otro. En el
navegador `env()` vale 0 y los dos lados daban 8: por eso esto NO
se veía hasta tener la app en la mano.
⚠⚠⚠ Y EL PRIMER ARREGLO NO ALCANZÓ — Franco, mirando la captura:
*«se ve igual, la distancia de las palabras al margen de abajo
tiene que ser LA MISMA que la que hay desde la parte de arriba de
los símbolos hasta el borde de arriba de la tab»*. Tenía razón y
el error fue mío: yo había igualado **nuestro** relleno (7 arriba
contra 6 abajo) y me quedé tranquilo, pero el jugador no ve
nuestro relleno — ve el borde de arriba de la barra y el borde de
abajo de la pantalla, y entre el rótulo y ese borde seguían
habiendo 40px contra 7. **La simetría es la que se VE, no la que
está escrita en el archivo.**
LA SALIDA: el `env()` se REPARTE ENTRE LOS DOS LADOS en vez de
sumarse sólo abajo. `max(8px, env()/2)` da 17px arriba y 17px
abajo en un iPhone (34/2), y 8px y 8px donde no hay barra de
inicio —el navegador, un iPhone viejo—, así que no queda nunca
pegado.
⚠ MEDIDO, con la barra de inicio simulada, en
`arnes/_cap-fondo-barra.mjs`:
· alto total ............ 101px → **77px**
· arriba del ícono ....... 13px → **20px**
· abajo del rótulo ....... 46px → **19px**
Veinte contra diecinueve: eso es lo que pidió Franco. Y de paso
la barra bajó 24px, que en una pantalla de 844 es contenido de
verdad.
⚠ A CAMBIO, LOS RÓTULOS QUEDAN MÁS CERCA DE LA BARRITA DE INICIO:
ella ocupa los ~13px de abajo y el rótulo ahora termina a 17, o
sea 4px de aire. En la captura entra bien; **esto hay que mirarlo
en el teléfono**, porque es justo lo que una captura no puede
decidir. Si roza, se sube el `8px` del `max()` a 12 y listo. */
padding:max(8px, calc(env(safe-area-inset-bottom) / 2)) 0;
border:none;border-top:1px solid rgba(255,255,255,.08);
border-radius:0;
/* ⚠⚠⚠ ACÁ TAMBIÉN, Y ES LA MITAD QUE SE OLVIDA. Esta regla del
teléfono re-declaraba `background:var(--s0)` y apagaba el
desenfoque A MANO (`backdrop-filter:none`), así que cambiar sólo
la regla de arriba dejaba la barra opaca justo donde Franco la
mira: en el celular. Lo cazó el arnés a 390px, no la lectura.
Es el mismo defecto de siempre: el estilo estaba escrito en DOS
lugares y se cambió uno. */
background:rgba(var(--barra-rgb, 11,14,20), .72);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
box-shadow:none;overflow:visible;
}
.sidebar::after{display:none}
.sb-logo,.sb-bottom{display:none}
/* ⚠ `center` y no `flex-start`: con los ítems pegados al borde de
arriba, cualquier diferencia de alto entre uno y otro —un rótulo que
dobla, un ícono más alto— deja la fila despareja hacia abajo. */
.sb-nav{flex-direction:row;justify-content:space-around;align-items:center;gap:0;width:100%}
.sb-item{
flex:1 1 0;min-width:0;width:auto;height:auto;
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:2px 2px;border-radius:0;background:none;
color:rgba(255,255,255,.55);
-webkit-tap-highlight-color:transparent;
transition:color .18s ease,transform .12s ease;
}
.sb-item .sb-ico{line-height:1}
/* ⚠ 24px, y los dos IGUALES: antes el `img` medía 25 y el `svg` 26,
así que las pestañas con ícono dibujado y las que usan imagen no
alineaban entre sí por un píxel. */
.sb-item .sb-ico img{width:24px;height:24px;filter:brightness(0) invert(1)}
.sb-item .sb-ico svg{width:24px;height:24px;display:block}
/* ⚠ `.82rem` era el rótulo MÁS GRANDE de toda la app para un texto de
apoyo — más grande que el de una tarjeta de modo (`.74rem`). Baja a
`--fs-xs`, que es el escalón de la escala para exactamente esto: una
etiqueta debajo de un ícono. Es la mitad de los 15px que se ganaron. */
.sb-text{display:block;font-size:var(--fs-xs, .72rem);font-weight:600;line-height:1;color:inherit}
.sb-item:hover{color:rgba(255,255,255,.85)}
.sb-item:active{transform:scale(.94)}
.sb-item.active{background:none;color:#fff}
.sb-item.active::before{display:none}
.sb-item::after{display:none}
}