/* ════════════════════════════════════════════════════════════════════
   COP · EL ESQUELETO DE UNA PÁGINA  (04/09/2026)
   ────────────────────────────────────────────────────────────────────
   Franco, 04/09/2026: *«que se acomode todo bajo la de CP, que va a
   mantener la gran mayoría de las cosas en su lugar pero parejas, y con
   la esencia de la app»*.

   ⚠⚠ ESTE ARCHIVO EXISTE PORQUE CADA PÁGINA INVENTABA SU ENVOLTORIO.
   Medido el 04/09 sobre las 73 pantallas: `.main` (1500), `.shop` (900),
   `.rank` (820), `.ex-main` (760), `.ranks` (720), `.arena-menu` (640),
   `.profile` (560), `.cd-main` (560), `.gr-main` (640), `.noti-main`
   (640), `.wrap` (560), `.lg-main` (sin tope)… dieciséis clases
   distintas para la MISMA pieza, cada una con su ancho, su aire lateral
   (1rem / 1.8rem / token) y su forma de descontar la topbar (`0`,
   `--topbar-h`, `+.6rem`, `+.9rem`, `+1rem`). En el teléfono casi no se
   nota; en una pantalla grande la app se lee como seis productos.

   ⚠ LO QUE UNIFICA NO ES EL ANCHO, ES LA MECÁNICA. Que el perfil sea
   una columna angosta y el inicio un panel ancho es una DECISIÓN, y se
   respeta. Lo que no puede seguir pasando es que cada pantalla
   reinvente cómo se descuenta la barra, cuánto aire lleva al costado y
   cómo se centra. Por eso `.cop-main` trae la mecánica y el ancho entra
   por una variable, con cuatro escalones en vez de dieciséis valores.

   ⚠ LOS CUATRO ESCALONES SON LOS QUE YA USABA LA MAYORÍA, no los más
   lindos: 640 lo usaban 7 pantallas (la moda), 560 lo usaban 4, 820 y
   1500 una cada uno. Los sueltos (720, 760, 900) caen al escalón más
   cercano. Así aplicar el sistema se ve como «ordenar» y no como
   «rediseñar», que es la regla de arquitectura del proyecto.

   CÓMO SE USA — una sola clase en el <main>:
     <main class="cop-main">…</main>                 columna de lista (640)
     <main class="cop-main cop-main--sm">…</main>    columna de lectura (560)
     <main class="cop-main cop-main--lg">…</main>    tabla ancha (820)
     <main class="cop-main cop-main--xl">…</main>    panel (1500)
   Se puede conservar la clase vieja al lado (`class="rank cop-main
   cop-main--lg"`): hay JS colgado de esos nombres y renombrarlos rompe
   en silencio. Lo que se borra es su CSS, no su nombre.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ⚠ EL ALTO DE LA BARRA INFERIOR, QUE NO EXISTÍA COMO TOKEN. Lo venía
     escribiendo cada pantalla como `var(--bb-h, 70px)` — o sea, todas
     leían una variable que nadie declaraba y vivían del respaldo. Se
     declara acá, con el mismo 70 que ya usaban. */
  /* ⚠⚠ 58,5 Y NO 70 (24/09/2026): MEDIDO. La barra mide 58,5 px en 320,
     390 y 430 (8 + íconos + rótulo + 8; el área segura del iPhone va
     aparte, en `env()`). Con 70, cada pantalla reservaba 11,5 px de más
     debajo de su último elemento: el aire sobre la barra daba 50 en vez
     de los 38 de `--cop-main-abajo`. Lo cazó `arnes/_sin-hueco-abajo.mjs`
     (Franco: «dejar únicamente un margen con las tabs de abajo que sea el
     de la distancia estándar»). */
  --bb-h: 58.5px;

  /* el aire lateral del contenido y el aire de arriba, bajo la topbar */
  --cop-main-aire: var(--cop-aire-movil, 1rem);
  --cop-main-arriba: .9rem;
  --cop-main-abajo: 2.4rem;

  /* el escalón por defecto: la columna de lista */
  --cop-main-ancho: 640px;
  --cop-main-rail: var(--sidebar-w, 0px);
}

@media(min-width:761px){
  :root{ --cop-main-aire: var(--cop-aire, 1.8rem) }
}

/* ── EL CONTENEDOR ──────────────────────────────────────────────────
   ⚠⚠ EL CENTRADO SE HACE CON PADDING, NO CON `margin:0 auto`, y es
   deliberado: en escritorio hay un rail fijo de 76px a la izquierda,
   así que el contenido no se centra en la VENTANA sino en lo que queda
   a la derecha del rail. Con `max-width` + `margin:auto` el bloque
   quedaba centrado en la ventana y, con el rail encima, corrido.
   La cuenta: el padding de cada lado es el aire mínimo, o la mitad de
   lo que sobra después de descontar el rail y el ancho elegido — lo
   que sea mayor. Un solo elemento, sin envoltorio interno, así ninguna
   página tiene que cambiar su marcado para entrar al sistema. */
.cop-main{
  /* ⚠ EL `box-sizing` SE DECLARA ACÁ Y NO SE HEREDA: hay páginas sin
     reset, y ahí el padding se SUMA al ancho y aparece scroll lateral
     (la trampa que ya costó tiempo en el juego de penales). */
  box-sizing:border-box;
  display:block;
  width:auto;
  /* ⚠ el rail entra por una variable propia para poder anularlo en el
     teléfono sin depender de quién declare `--sidebar-w` (ver abajo) */
  margin-left:var(--cop-main-rail);
  margin-right:0;

  padding-inline:max(
    var(--cop-main-aire),
    calc((100% - var(--cop-main-rail) - var(--cop-main-ancho)) / 2)
  );
  padding-top:calc(var(--topbar-h, 64px) + var(--cop-main-arriba));
  padding-bottom:var(--cop-main-abajo);
}

/* ── LOS CUATRO ESCALONES ───────────────────────────────────────── */
.cop-main--sm{ --cop-main-ancho: 560px }   /* lectura: perfil, torneo, lobby */
.cop-main--md{ --cop-main-ancho: 640px }   /* lista: arena, misiones, grupos (defecto) */
.cop-main--lg{ --cop-main-ancho: 820px }   /* tabla: ranking, rangos, tienda, explorar */
/* ⚠⚠ EL PANEL NO VA CENTRADO, VA PEGADO AL RAIL — y no es un descuido,
   es una decisión que ya está tomada en `cop-ui-topbar.css` (31/08/2026):
   *«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»*.
   La topbar usa `margin-right:auto` por eso mismo. Si este escalón
   centrara, el contenido del inicio dejaría de alinear con la barra de
   arriba en cuanto la pantalla pasa los 1500 — que es exactamente el
   problema que esa decisión vino a resolver.
   ⚠ Los otros tres escalones SÍ se centran: son columnas angostas
   (560-820) donde el eje de la pantalla manda más que la barra. */
.cop-main--xl{
  --cop-main-ancho: var(--cop-ancho, 1500px);
  max-width:calc(var(--cop-ancho, 1500px) + var(--cop-main-aire) * 2);
  padding-inline:var(--cop-main-aire);
}

/* ── VARIANTES DE CHROME ────────────────────────────────────────────
   ⚠ Son las dos excepciones REALES, no una perilla por las dudas:
   · `--sin-topbar` para las pantallas de juego a pantalla completa
     (lineup, duelo en curso, penales), que no llevan barra de arriba.
   · `--con-banner` para las que abren con el banner de cabecera pasando
     POR DEBAJO de la topbar (`cop-tapa-todo`): ahí el aire de arriba lo
     pone el banner y descontarlo dos veces deja una franja muerta. */
.cop-main--sin-topbar{ padding-top:var(--cop-main-arriba) }
.cop-main--con-banner{ padding-top:0 }

/* ── AIRE DE ABAJO EN EL TELÉFONO ───────────────────────────────────
   ⚠ SIN ESTO LA ÚLTIMA FILA QUEDA DEBAJO DE LA BARRA INFERIOR. Lo tenía
   resuelto `arena.html` y nadie más; en el resto, el último elemento de
   la lista quedaba tapado y parecía que la página terminaba antes.
   `env(safe-area-inset-bottom)` es la barra de gestos del iPhone. */
@media(max-width:760px){
  /* ⚠⚠ EL RAIL SE ANULA ACÁ, NO SE CONFÍA EN OTRA HOJA (04/09/2026).
     En el teléfono no hay barra lateral y `--sidebar-w` vale 0 — pero ese
     0 lo declara `cop-ui-bottombar.css`, y hay páginas que no la cargan
     (torneo, entre otras). Ahí `--sidebar-w` se quedaba en 76 y este
     contenedor empujaba el contenido 76px a la derecha: contenido
     angosto y scroll lateral (cazado por el arnés a 320, 390, 430 y 600).
     Un componente que sólo funciona si otra hoja está cargada no es un
     componente. El margen se pone en cero acá y listo. */
  .cop-main{
    --cop-main-rail:0px;
    padding-bottom:calc(var(--bb-h) + env(safe-area-inset-bottom) + var(--cop-main-abajo));
  }
  /* la pantalla de juego no tiene barra inferior: no le sobra aire */
  .cop-main--sin-barra{
    padding-bottom:calc(env(safe-area-inset-bottom) + var(--cop-main-abajo));
  }
}

/* ════════════════════════════════════════════════════════════════════
   EL BOTÓN DE VOLVER
   ────────────────────────────────────────────────────────────────────
   ⚠⚠ ESTABA COPIADO LETRA POR LETRA EN ONCE PÁGINAS —arena, perfil,
   mi-perfil, misiones, hitos, rangos, ranking, ranking-competencia,
   tienda, equipo, duelo-equipos— y en ninguna hoja compartida. La misma
   declaración de 340 caracteres, once veces. Es exactamente el caso que
   la regla del proyecto llama «se muda, no se copia»: el día que Franco
   pida cambiarlo, hoy habría que acordarse de once archivos.

   ⚠ SE MUDA TAL CUAL, sin tocar un pixel. El objetivo de esta tanda es
   que las páginas queden PAREJAS, no que se vean distintas: si además
   cambio el botón, no hay forma de saber si algo se movió por el
   componente nuevo o por el rediseño. Primero unificar, después decidir.
   ════════════════════════════════════════════════════════════════════ */
/* ══════ 21/09/2026 — UNA SOLA FLECHA EN TODA LA APP ════════════
   Franco: *«todas las flechas de volver atrás que están a la izquierda
   se vuelven también un componente único y fijo en cuanto al tamaño y la
   posición que ocupan en el margen superior izquierdo, ya que en muchas
   páginas están apenas corridas en lugares diferentes. Tenés que usar de
   referencia la posición de la página de misiones»*.

   ⚠⚠ Y NO ERA UNA IMPRESIÓN SUYA — MEDIDO EN VEINTE PANTALLAS a 390 px,
   el borde izquierdo del ÍCONO caía en: 20 (misiones, la referencia),
   4 (amigos), 4 (draft-estadísticas), 15 (ranking-competencia),
   21 (inventario), 23 (estadísticas-jugador), 25 (equipo). Diecinueve
   píxeles de diferencia entre dos pantallas de la misma app.

   ⚠⚠⚠ POR QUÉ HABÍA DOS BOTONES Y AHORA ES UNO. `.cop-cab-volver`
   —la de misiones— es una caja de 44 con el ícono de 17 y sin fondo;
   `.page-back` era un círculo NEGRO de 34 flotando sobre el contenido.
   Dos piezas para la misma acción es exactamente lo que Franco vino a
   sacar, así que `.page-back` deja de dibujar lo suyo y pasa a ser la
   MISMA flecha: mismo tamaño, mismo ícono, mismo color, misma
   vertical del margen. Lo único que conserva es ser `fixed`, porque en
   esas pantallas no hay una fila de cabecera donde meterla.

   ⚠ LA POSICIÓN SALE DE LOS MISMOS TOKENS QUE EL TÍTULO, y por eso
   queda alineada con él sin un número mágico por página:
     · a lo ancho: el aire lateral de la app menos los 10 px de ajuste
       óptico que ya usaba la de misiones —el ícono mide 17 dentro de una
       caja táctil de 44, así que la caja tiene que sobresalir para que
       el DIBUJO quede en el margen, no la caja;
     · a lo alto: `--topbar-h` (la barra de arriba) + `--cop-main-arriba`
       (el aire con que `.cop-main` arranca el contenido) − 10, que es lo
       que centra la caja de 44 contra la primera línea del título. Es la
       regla que Franco pidió para las páginas con topbar: *«misma altura
       de margen y más abajo, respetando la alineación con el título; no
       puede quedar ni muy abierta ni muy cerrada»*.
   ⚠ EL ARNÉS `_flecha-volver.mjs` MIDE LAS VEINTE Y COMPARA CONTRA
   MISIONES: si alguna se corre, se pone rojo con el nombre. */
.page-back{
  position:fixed;
  top:calc(var(--topbar-h, 64px) + var(--cop-main-arriba, .9rem) - 10px);
  left:calc(var(--cop-aire-movil, 1rem) - 10px);
  z-index:30;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  color:var(--text, #f4f6fb);text-decoration:none;
  background:none;border:none;border-radius:0;
  cursor:pointer;transition:color .16s cubic-bezier(.2,.8,.2,1);
  flex:0 0 auto;font-size:0;line-height:0;
  -webkit-tap-highlight-color:transparent;
}
/* ⚠ el hover sólo donde hay puntero de verdad: en el teléfono el
   navegador lo simula al apoyar el dedo y el botón queda pintado */
/* ⚠ EL HOVER ES EL MISMO QUE EL DE `.cop-cab-volver`: cambia el COLOR
   del ícono, no pinta un fondo — ya no hay fondo que pintar. */
@media(hover:hover) and (pointer:fine){
  .page-back:hover{color:var(--primary-soft, #5fbbff)}
}
.page-back:active{transform:scale(.92)}
.page-back:focus{outline:none}
.page-back:focus-visible{
  outline:2px solid var(--primary, #0c95eb); outline-offset:2px; border-radius:50%;
}
.page-back svg{width:17px;height:17px;display:block}
.page-back .arrow{display:none}
/* ⚠ el `hidden` propio: `[hidden]{display:none}` empata en especificidad
   con `.page-back` y pierde por orden de declaración. Van seis
   apariciones de este bug en el proyecto. */
.page-back[hidden]{display:none}

/* ⚠⚠ LA VARIANTE EN LÍNEA (08/09/2026) — el mismo botón, pero adentro de
   una fila en vez de flotando sobre el contenido.
   Nació de un choque real: en `equipo.html` la cabecera pasó a pegarse
   arriba de todo (la `.gcab` de Grupos, que ya no lleva banner) y el
   botón fijo —top: topbar + .5rem, left: .7rem— quedó JUSTO encima de la
   camiseta del club. En la captura se lee como un error de dibujo, no
   como un botón.
   La salida fácil era correr la cabecera 44 px a la derecha con un padding
   en esa página: un número mágico que habría que recordar cada vez que la
   cabecera cambie de alto. Esto en cambio lo mete en el flujo —es el
   primer elemento de la fila— y se acomoda solo.
   ⚠ NO SE TOCA `.page-back`: veintipico de páginas dependen de que sea
   fijo. Esta clase se agrega AL LADO, y la página que no la lleve no se
   entera de que existe. */
.page-back--enlinea{
  position:static; top:auto; left:auto;
  /* ⚠⚠ LOS −10 TAMBIÉN ACÁ (21/09/2026). La caja táctil mide 44 y el
     ícono 17, así que sin sacar la caja fuera del margen el DIBUJO queda
     13 px adentro — medido en `equipo.html`: el ícono en 30 contra los
     20 del resto de la app. Es el mismo ajuste óptico que hace
     `.cop-cab-volver`, y por eso es el mismo número. */
  margin-left:-10px; margin-right:.15rem;
}

/* ══════════════════════════════════════════════════════════════════
   LA FILA DEL VOLVER — Y LA «i» A SU ALTURA · LEY FIJA (12/09/2026)
   ------------------------------------------------------------------
   Franco: *«el símbolo de info tiene que ser más chico y estar siempre
   a la misma altura que el botón de volver de la página en la que esté.
   Que quede como regla visual a mantener: cuando haya un botón de info
   va más chico y alineado con esa sección»*.

   ⚠⚠ ES UNA REGLA, NO UN ARREGLO DE UNA PANTALLA. Hasta hoy la «i» del
   grupo vivía ADENTRO de la tarjeta de cabecera, la de los modos vive
   sobre la tapa de la competencia y la de los drafts arriba del banner:
   tres lugares para el mismo botón. Desde hoy, **toda pantalla que
   tenga botón de volver pone su «i» en esa misma fila, a la derecha**.
   Ahí se lee como lo que es —«qué es esto», al lado de «de dónde
   vengo»— y deja de competir con el contenido.

   Se usa así, y la página no escribe una sola medida:

     <div class="cop-fila-volver">
       <a class="volver" href="…">‹ Todos los grupos</a>
       <button class="cop-mi-i cop-mi-i--sm" id="…">i</button>
     </div>

   ⚠ EL VOLVER CONSERVA SU CLASE (`.volver` o `.page-back--enlinea`):
   hay JS y hojas colgando de esos nombres, y lo que esta fila decide es
   el REPARTO, no cómo se ve el volver. Sin «i», la fila se ve idéntica
   a lo de antes — el `space-between` con un solo hijo no mueve nada.

   ⚠⚠ EL MARGEN VERTICAL ES DE LA FILA Y SE LE ANULA A LOS HIJOS, Y ESO
   LO DECIDIÓ LA MEDICIÓN. La primera versión dejaba el margen en el
   volver —`.volver` trae `margin:var(--gap-lg, 1rem) 0 var(--gap-md, .7rem)`— con este comentario
   escrito al lado: «el margen sale del volver, la fila sólo alinea».
   Era falso: el margen es ASIMÉTRICO, así que la caja de contenido del
   volver queda 2,4 px por debajo del centro de la fila y `align-items:
   center` centra a la «i» respecto de la FILA, no del texto. Los dos
   quedaban a distinta altura por 2,4 px — invisible a ojo, y es
   exactamente lo que Franco pidió que no pasara. **Con el margen en la
   fila, el eje es uno solo y la alineación sale por construcción.**
   ⚠ VA CON `> a, > button` Y NO CON `> *`: `.volver` vive en el
   `<style>` de cada página, o sea DESPUÉS de esta hoja, y con la misma
   especificidad (0-1-0) gana por orden. Con el elemento adentro son
   0-1-1 y pierde. Es la misma trampa que ya costó tres veces.
   ══════════════════════════════════════════════════════════════════ */
.cop-fila-volver{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-sm, .5rem);
  margin:var(--gap-lg, 1rem) 0 var(--gap-md, .7rem);
}
.cop-fila-volver > a,
.cop-fila-volver > button{ margin-top:0; margin-bottom:0 }
/* ⚠ EL `[hidden]` PROPIO: la fila declara `display`, y `hidden` esconde
   con el `display:none` de la hoja del NAVEGADOR, que pierde contra
   cualquier `display` de autor. Van ONCE apariciones de este bug. */
.cop-fila-volver[hidden]{ display:none }

/* ══ NINGUNA PÁGINA TERMINA EN UN HUECO (24/09/2026) ═══════════════════
   Franco: *«muchas páginas tienen un scroll más largo del que necesitan
   (…) quiero que haya una regla que cualquier espacio vacío que no se
   utilice abajo debe ser eliminado y dejar únicamente un margen con las
   tabs de abajo que sea el de la distancia estándar»*.
   ⚠⚠ EL AIRE DE ABAJO LO PONE `.cop-main` Y NADIE MÁS. Medido en 390 ×
   844 (`arnes/_sin-hueco-abajo.mjs`): once pantallas terminaban entre 78
   y 185 px por encima de la barra en vez de 38, porque al aire de
   `.cop-main` se le sumaban otros tres:
     · un `padding-bottom:96px` en el `body` que 23 páginas tenían copiado
       de cuando `arena.html` resolvía la barra por su cuenta (se borró);
     · un `padding-bottom:3rem` en el `body` de tienda y perfil;
     · el `margin-bottom` de la última sección, que dentro de `.cop-main`
       no colapsa con el `padding` y se sumaba.
   Las dos reglas de abajo cierran eso para siempre: el `body` de una
   página con `.cop-main` no reserva nada, y la última pieza de `.cop-main`
   no trae margen propio. El aire es `--cop-main-abajo`, uno solo. */
body:has(.cop-main){ padding-bottom:0; }
.cop-main > :last-child,
.cop-main > :last-child > :last-child{ margin-bottom:0; }