/* ══════════════════════════════════════════════════════════════════
   COP · LOS BOTONES DE ACCESO — UN SOLO ARCHIVO (27/08/2026)

   Los tiles redondos de la portada: ícono adentro de una caja
   redondeada y el nombre chico abajo. Misiones, Rangos, Explorar y
   Rankings en `app.html`; Alineación, Divisiones y Ranking en
   `futbol11.html`.

   Franco, 27/08/2026: *«tenés que agregar 3 botones nuevos que van a
   cumplir las funciones de las tabs de mi alineación, divisiones y
   ranking. Los mismos tienen que tener el mismo diseño que tienen los
   botones de ranking, rangos y el de misiones que aparecen en la página
   de inicio. Es como si once ideal tuviera un menú propio»*.

   ⚠⚠ POR QUÉ SALIÓ DE `app.html`. «El mismo diseño» sólo es verdad si es
   el mismo archivo. Copiado, las dos pantallas empiezan iguales y se
   separan en el primer retoque que se haga en una sola — y nadie se
   entera hasta que están al lado en una captura.

   ⚠ LO QUE NO SE MUDÓ, A PROPÓSITO: `.access-desktop` y `.access-card`,
   las tarjetas horizontales de la columna derecha en escritorio. Ésas
   son de la portada y de ningún otro lado; traerlas acá sería mudar algo
   que no comparte nadie.
   ══════════════════════════════════════════════════════════════════ */

.access-grid{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:var(--gap-xl, 1.2rem);
  margin-bottom:1.2rem;
}

/* ⚠⚠ EL DEGRADÉ RODEA EL BOTÓN ENTERO, NO EL LOGO (Franco, 28/08/2026):
   *«pusiste el diseño de degradé alrededor de los logos… y no iba ahí,
   el diseño de degradé es todo el recuadro, no esa parte interna
   sola»*. Estaba en la caja del ícono, que en teléfono es un cuadradito
   de 58×36 adentro de una caja que ya existía: dos marcos, uno dentro
   del otro, y el de afuera —el que el jugador lee como «el botón»— era
   el gris de siempre.

   El marco lo pone `cop-borde` desde el marcado de cada pantalla. Acá
   sólo va lo que el botón necesita para tener forma. */
.access-btn{
  /* ⚠ EL ANCLA DEL CONTADOR ES EL BOTÓN, NO LA CAJA DEL ÍCONO. En
     teléfono esa caja pierde su tamaño propio (queda del porte del
     emoji), así que un contador colgado de ella se le apoyaba encima y
     tapaba el dibujo. Colgado del botón, cae en la esquina de la caja
     con borde, que es donde se lee. */
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.18rem;
  flex:0 0 auto;
  padding:.5rem .7rem;
  cursor:pointer;
  font-family:inherit;
  text-decoration:none;
  transition:transform .2s;
}
/* ⚠ EL RESET VA SÓLO PARA EL QUE NO LLEVA EL MARCO. Escrito suelto,
   `background:none` le borraba el degradé al que sí lo lleva —el marco
   son dos capas de fondo, así que cualquier `background` propio lo
   apaga—. `cop-borde` gana por especificidad, pero una regla que existe
   para ser vencida es una trampa esperando a la próxima edición. */
.access-btn:not(.cop-borde){background:none;border:none}
.access-btn:hover,
.access-btn:active{transform:translateY(-2px)}

/* ⚠ LA CAJA DEL ÍCONO YA NO ES UNA CAJA: es el emoji y nada más. Tenía
   medida propia y fondo `var(--bg)` de cuando ella era el recuadro; con
   el marco alrededor del botón, ese fondo es el mismo color que el que
   ya pinta `cop-borde` adentro — un rectángulo invisible que sólo puede
   aparecer el día que alguien cambie uno de los dos. */
.access-btn .ab-ico{
  display:grid;place-items:center;
  line-height:1;
  font-size:var(--fs-2xl, 1.5rem);
}

/* ══ EL BOTÓN CON ARTE PROPIA (Franco, 28/08/2026) ═══════════════════
   *«el tamaño debe ser el mismo que el actual, pero el contenido y el
   fondo tiene que ser el de la imagen… quiero exactamente ese diseño
   con su fondo incluido, manteniendo el borde en degradé. Eliminá el
   texto y los logos de emoji: va la imagen con el borde en degradé»*.

   ⚠⚠ ES UNA VARIANTE, NO UN REEMPLAZO. Todo esto cuelga de `.ab-img`,
   que sólo existe en los botones que TIENEN arte. Once Ideal usa el
   mismo componente y sus tres botones (Alineación · Divisiones ·
   Ranking) no tienen arte todavía: siguen con su emoji y su nombre,
   sin tocar una línea. El día que tengan la suya, se les agrega la
   imagen y se les saca el texto — y nada más.

   ⚠ EL NOMBRE NO SE PIERDE AUNQUE SE VAYA EL TEXTO: viaja en el `alt`
   de la imagen. Sin eso, un lector de pantalla anuncia «enlace» cuatro
   veces y la portada deja de ser navegable.

   ⚠⚠ Y EL 29/08/2026 FRANCO LO CAMBIÓ: *«en los botones solo debe
   quedar el escudo del medio, sin el fondo que tiene alrededor de
   degradé con color celeste. Y tampoco quiero que tenga el borde de
   degradé de color celeste, no tiene que tener ningún borde, se tiene
   que ver directamente el escudo del medio sobre el fondo de la
   página»*. Lo que sigue es esa versión; lo de arriba queda como
   historia de por qué el archivo está armado así.

   ⚠⚠ EL FONDO CELESTE NO ERA CSS: VENÍA DENTRO DEL `.webp`. Los cuatro
   `boton-*.webp` eran cuadros de 512×512 con el escudo en el medio y
   una escena propia alrededor —una viñeta azul oscura y dos haces de
   luz celeste desde abajo—. Por eso no alcanzaba con sacarle el marco
   al botón: había que RECORTAR el escudo y dejar el resto transparente.
   Los nuevos son `escudo-*.webp`, con fondo transparente y recortados a
   la tinta del escudo.
   ⚠ SON ARCHIVOS NUEVOS, no los viejos pisados: los `boton-*.webp`
   siguen en la carpeta. Si algún día vuelve a hacer falta el botón con
   su escena, está.

   ⚠⚠ `contain` Y NO `cover`. Con `cover` el escudo —que es apaisado,
   más de 2:1— se recortaría por los costados dentro de un botón casi
   cuadrado: se comería la primera y la última letra. Sin plato detrás,
   recortar no es una opción estética, es perder el nombre. */
.access-btn:has(.ab-img){padding:0}

/* ⚠⚠ SIN MARCO Y SIN CAJA: el botón deja de ser un recuadro y pasa a
   ser el escudo. Como ya no hay plato, el alto lo pone la imagen —que
   va EN EL FLUJO, no absoluta— y los cuatro se reparten el ancho por
   igual, así el escudo sale lo más grande que entra.
   ⚠ EL `flex:1 1 0` REEMPLAZA AL `flex:0 0 auto` DE ARRIBA: con el
   automático cada botón medía lo que medía su imagen a tamaño natural
   (465 px) y los cuatro juntos se salían de la pantalla. */
/* ⚠ EL AIRE ENTRE BOTONES NO SE TOCA. Lo probé en .55rem para ganar dos
   píxeles de escudo y el arnés de Once Ideal lo marcó al toque: compara
   el aire de las dos pantallas y ahí quedaban 8,8 contra 8. Dos números
   para la misma separación, por dos píxeles que nadie ve. */
.access-btn:has(.ab-img){
  flex:1 1 0; min-width:0;
  background:none; border:none;
}

/* ⚠⚠ EL BOTÓN CON ARTE NO SE SOSTIENE SOLO, Y EN TABLET SE DERRUMBABA.
   El de emoji tiene su contenido EN EL FLUJO —el dibujo y el nombre— así
   que él mismo mide lo que mide. El de arte no tiene nada adentro: la
   imagen va absoluta, o sea que no empuja. En el teléfono no se nota
   porque el alto está fijado más abajo, pero la portada sigue mostrando
   estos cuatro botones hasta los 1100 px, y entre 761 y 1100 quedaban de
   2×2 px: los cuatro accesos DESAPARECÍAN.

   ⚠ ESTO NO LO CAZÓ EL ARNÉS: mide a 430 px y estaba todo verde. Lo
   destapó una prueba que midió el mismo botón a 900. Por eso ahora hay
   un control que mira ese ancho (H11).

   ⚠ EL ALTO NO ES UN NÚMERO INVENTADO: son los mismos ingredientes que
   apila el botón con emoji —relleno arriba y abajo (.5rem×2), el ícono
   (1.5rem), la separación (.18rem) y el nombre (.78rem)—, así que los
   dos miden igual sin que yo elija nada. Y va en su propia consulta de
   medios, complementaria a la del teléfono, para no tener que anularlo
   después: escrito suelto le ganaría por especificidad al alto del
   teléfono (`:has` cuenta como clase: 0-2-0 contra 0-1-0). */
/* ⚠⚠ EL ALTO FIJO DE TABLET SE FUE, Y CON ÉL EL DEFECTO QUE ARREGLABA.
   Existía porque la imagen iba ABSOLUTA: el botón no tenía nada adentro
   que lo empujara y entre 761 y 1100 px quedaba de 2×2 px — los cuatro
   accesos desaparecían—. Ahora la imagen está en el flujo y el botón
   mide lo que mide ella, en cualquier ancho. El control que vigila ese
   ancho (H11) sigue vivo: lo que cambió es cómo se sostiene, no que se
   tenga que sostener. */

/* ⚠ EN EL FLUJO Y SIN RECORTE. Iba absoluta y con el radio de adentro
   del marco; sin marco no hay radio que descontar, y sin plato el
   escudo no se puede recortar (ver arriba). */
.access-btn .ab-img{
  position:static; width:100%; height:auto;
  object-fit:contain; display:block;
  border-radius:0;
}
/* ⚠ EL CONTADOR VA ARRIBA DE LA IMAGEN. Sin esto, la arte lo tapa y el
   «0/11» de Once Ideal desaparece sin que nada avise. */
.access-btn .ab-cuenta{z-index:2}

.access-btn .ab-label{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:var(--fs-sm, .8rem);
  letter-spacing:.2px;
  color:var(--text-dim);
  text-align:center;
  line-height:1;
  white-space:nowrap;
}

/* ── el contador de la esquina ──────────────────────────────────────
   ⚠ EXISTE PORQUE SI NO SE PIERDE UN DATO. En Once Ideal el «0/11» vivía
   adentro de la pestaña «Mi alineación»; al reemplazar las pestañas por
   estos botones, sin este lugar el jugador dejaba de ver cuántos picks
   lleva sin entrar a la pantalla. Es opcional: el botón que no lo pasa
   se ve exactamente como los cuatro de la portada. */
.access-btn .ab-cuenta{
  position:absolute;
  top:-.35rem;right:-.35rem;
  font:800 .62rem 'Inter',sans-serif;
  line-height:1;
  padding:.16rem var(--gap-xs, .3rem);
  border-radius:999px;
  background:var(--card,#11141d);
  border:1px solid var(--card-border,#1e2330);
  color:var(--text-dim,#8b93a7);
}

/* ── EN TELÉFONO, EL TILE ES UNA CAJA ───────────────────────────────
   ⚠⚠ ESTO VIVÍA EN `app.html` BAJO `#colInicio`, Y ERA EL DISEÑO QUE SE
   VE DE VERDAD. Franco pidió para Once Ideal *«el mismo diseño que
   tienen los botones de ranking, rangos y el de misiones que aparecen en
   la página de inicio»*, y en la portada de un teléfono esos botones no
   son el tile de arriba: son ESTA caja con borde. Copiar el archivo sin
   esta parte daba dos botones que se parecen de lejos y miden distinto
   —58×38 contra 26×25—. Lo destapó el arnés, que compara un tile contra
   el otro en vez de contra un número escrito por mí.

   ⚠ LAS COLUMNAS SE CUENTAN SOLAS (`grid-auto-flow:column`): la portada
   tiene cuatro accesos y Once Ideal tres. Con `repeat(4,1fr)` escrito a
   mano, la pantalla de tres dejaba un hueco al costado. */
@media(max-width:760px){
  .access-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap:.5rem;
  }
  /* ⚠ EL `var(--s2, #161b25)` Y EL BORDE GRIS SE FUERON CON EL DEGRADÉ: eran el
     recuadro que ahora dibuja `cop-borde`, y el radio de 14 lo pone
     `cop-borde--boton`, que vale el mismo número. Acá queda la medida
     —que es lo único que esta pantalla decide— y el relleno se achica
     porque la altura ya está fijada. */
  .access-btn{
    gap:.24rem;
    min-width:0;
    padding:.3rem var(--gap-sm, .5rem);
    height:clamp(48px,7.4dvh,70px);
  }
  /* ⚠ EL DE ARTE NO LLEVA RELLENO en ningún ancho: la imagen ocupa el
     botón entero. Se repite acá porque la regla de arriba lo vuelve a
     poner dentro de la consulta de medios.
     ⚠⚠ Y TAMPOCO LLEVA ALTO FIJO (29/08/2026). El `clamp(48px,7.4dvh,
     70px)` de arriba es la caja del botón con recuadro; con el escudo
     suelto, esa caja es aire: el escudo mide 2,1 a 1, o sea 44 px de
     alto en una columna de 93, y los otros 26 px quedaban de hueco
     debajo — un espacio vacío que empujaba el contenido de la portada
     sin dibujar nada. Ahora el botón mide lo que mide el escudo. */
  .access-btn:has(.ab-img){padding:0; height:auto}
  .access-btn .ab-ico{
    font-size:clamp(1.02rem,2.5dvh,1.35rem);
  }
  .access-btn .ab-label{
    font-size:clamp(.6rem,1.45dvh,.73rem);
    color:#cfd3dc;
    max-width:100%;
    overflow:hidden;text-overflow:ellipsis;
  }
  .access-btn .ab-cuenta{top:-.42rem;right:-.32rem}
}