/* ════════════════════════════════════════════════════════════════════
   COP · LA CABECERA DE UNA PANTALLA COMPLETA  (05/09/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«hay una estructura de título y flecha hacia atrás en las
   páginas que ocupan toda la pantalla que quiero replicar, que es la de
   la página de penales, ya que tiene el título "Duelo de Penales" con el
   logo de CP centrado arriba y a su izquierda la flecha de ir hacia
   atrás»*. Y para las que hoy cierran con una ✕: *«en lugar de poner una
   x arriba a la derecha para cerrar va la misma flecha de atrás a la
   izquierda»*.

   ⚠⚠ LA ✕ ARRIBA A LA DERECHA ERA EL PATRÓN VIEJO, y hay una razón para
   que se vaya más allá del gusto: una ✕ dice «cerrar», que en una app
   sin ventanas no significa nada — el jugador no sabe si pierde lo que
   hizo, si vuelve a donde estaba o si sale del modo. La flecha dice
   «volver», que es exactamente lo que pasa. Además queda del lado del
   pulgar y en el mismo lugar en todas las pantallas.

   ⚠ ESTA CABECERA NO ES LA TOPBAR. La topbar es la barra fija con el
   logo, la campana y el saldo, y vive en las pantallas de navegación.
   Ésta es para las pantallas que ocupan TODO —un duelo, una hoja de
   amigos, un ranking abierto desde adentro de un modo—, donde la topbar
   estorba y lo único que hace falta es saber dónde estoy y cómo salgo.

   ⚠⚠ EL LOGO DE CP SE FUE DEL TÍTULO (Franco, 17/09/2026): *«el título
   con el nombre de cada página, SIN el logo de Clash of Picks al lado
   del título; eliminalo también de las otras páginas que lo tienen
   así»*. Estaba en 9 pantallas. Y tiene sentido más allá del gusto: el
   logo ya está arriba en la topbar y otra vez en el ícono de la app, así
   que al lado del título no agregaba información — lo que hacía era
   comerle ancho al nombre de la pantalla, que es el único dato que la
   cabecera tiene que dar. En un teléfono de 320 esa diferencia es la que
   decide si «Ranking de competencia» entra o se achica.
   ⚠ El logo SUELTO —centrado, sin título al lado— no es esto y no se
   toca: en `onboarding.html` es la única vez que alguien ve la marca
   antes de tener cuenta. Un barrido por nombre de archivo se lo llevó
   puesto una vez; se comprobó contra la copia anterior y volvió.

   CÓMO SE USA:
     <header class="cop-cab">
       <a class="cop-cab-volver" href="…" aria-label="Volver">…flecha…</a>
       <div class="cop-cab-marca">
         <h1>Duelo Amistoso</h1>
       </div>
     </header>

   La flecha se posiciona sola sobre el borde izquierdo; la marca queda
   centrada en la pantalla y NO se corre por el ancho de la flecha, que
   es lo que hace que el título quede en el eje de verdad.

   ⚠⚠ Y LA REGLA ES «LA PRIMERA LÍNEA DE LA PANTALLA VA EN LA LÍNEA DE
   LA FLECHA» (Franco, 18/09/2026, sobre la ficha de un partido): *«tenés
   que subir el contenido para que el nombre de la liga y la fecha estén
   alineados en la misma línea que la flecha de volver atrás, ya que eso
   tiene que quedar como regla fija»*. O sea que lo que identifica la
   pantalla —el título, o la liga y la fecha del partido— NO va en un
   renglón propio debajo: va ADENTRO de esta fila. Una flecha sola
   ocupando una línea entera son 40 px que no dicen nada, y en un
   teléfono esos 40 px salen del contenido.
   ⚠ Por eso tampoco va `fixed`: una flecha flotando fuera del flujo no
   puede estar «en la misma línea» que nada, y encima tapa lo que pasa
   por debajo al hacer scroll. En `en-vivo.html` era exactamente eso.
   ════════════════════════════════════════════════════════════════════ */

.cop-cab{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:40px;
  /* ⚠ el aire de abajo es del sistema, no un número de esta pieza */
  margin-bottom:var(--gap-lg, 1rem);
}
.cop-cab[hidden]{display:none}

/* ── LA MARCA: logo + título ────────────────────────────────────────
   ⚠ EL TAMAÑO SALE DE UNA SOLA VARIABLE y el logo lo sigue. Así el
   logo y las letras siempre miden lo mismo, en cualquier pantalla, sin
   dos números que se puedan desincronizar.
   ⚠ `clamp` y no un tamaño fijo: en un teléfono de 320 un título de 26
   px con la flecha al lado se corta, y en una tablet uno de 19 se pierde. */
.cop-cab-marca{
  display:flex;align-items:center;gap:var(--gap-md, .7rem);
  min-width:0;
  --cab-tit:clamp(19px, 5.4vw, 26px);
}
/* ⚠ La regla del `img` se borró con el logo (17/09/2026). Se borra y no
   se comenta: una regla que dibuja algo que ya nadie pide son líneas que
   el próximo lector tiene que leer sólo para descartarlas. */
.cop-cab-marca h1,
.cop-cab-marca .cop-cab-tit{
  margin:0;
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  font-size:var(--cab-tit);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text, #f4f6fb);
  /* ⚠ SIN CORTAR: un título de pantalla que termina en «…» deja al
     jugador sin saber dónde está. Si no entra, entra más chico —de eso
     se ocupa el `clamp`— pero no se recorta. */
  white-space:nowrap;
}

/* ── LA FLECHA DE VOLVER ────────────────────────────────────────────
   ⚠⚠ VA `absolute` Y NO EN EL FLUJO, Y ES LO QUE HACE QUE EL TÍTULO
   QUEDE CENTRADO DE VERDAD. Si la flecha ocupara lugar, el título se
   correría a la derecha la mitad de su ancho: 19 px que se notan
   apenas, pero que hacen que el título no coincida con el de la
   pantalla anterior y la app «salte» al navegar.
   ⚠ 44 px de zona táctil aunque el ícono mida 16: es el mínimo por
   debajo del cual el dedo falla, y en la esquina superior izquierda
   —donde el pulgar llega peor— importa más que en ningún lado. */
/* ⚠⚠⚠ 21/09/2026 — EL AIRE LATERAL DEJA DE DEPENDER DE QUIÉN SEA EL
   PADRE. Franco: *«todas las flechas (…) 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»*.

   `left:0` cae sobre el borde del PADRE, así que la flecha terminaba en
   un lugar distinto según dónde estuviera la cabecera: adentro de
   `.cop-main` —que ya trae el aire de la app— el ícono caía en 20 px
   (misiones, la referencia); suelta en la página, en 4 (amigos,
   draft-estadísticas). Medido en veinte pantallas.
   Ahora el aire lo declara la PROPIA cabecera con `--cop-cab-aire`, y
   la única que lo pone en cero es la que vive dentro de un envoltorio
   que ya lo trae. Un valor, dos casos, y el que agregue una cabecera
   nueva no tiene que acordarse de nada.
   ⚠ LOS −10 NO SON UN CAPRICHO: el ícono mide 17 en una caja táctil de
   44, así que la caja tiene que sobresalir 10 para que el DIBUJO quede
   en el margen de la app y no la caja invisible. */
   ⚠⚠ Y EL VALOR POR OMISIÓN ES CERO, corregido tras medir: la mayoría
   de las cabeceras vive dentro de un envoltorio que YA trae el aire de
   la app —`.cop-main`, pero también los `main` propios de Fútbol 11, En
   Vivo o Inventario—. Poniendo el aire por omisión, esas cinco se
   corrieron 16 px hacia adentro (medido: el ícono pasó de 20 a 36). La
   excepción es la cabecera SUELTA, sin envoltorio, y ésa lo dice con
   `--suelta`. */
.cop-cab{ --cop-cab-aire:0px }
.cop-cab--suelta{ --cop-cab-aire:var(--cop-aire-movil, 1rem) }
.cop-cab-volver{
  position:absolute;left:var(--cop-cab-aire, 0px);top:50%;translate:0 -50%;
  width:44px;height:44px;
  margin-left:-10px;              /* el ícono queda alineado con el texto de abajo */
  display:grid;place-items:center;
  background:none;border:none;padding:0;
  color:var(--text, #f4f6fb);
  text-decoration:none;cursor:pointer;
  transition:color .16s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.cop-cab-volver svg{width:17px;height:17px;display:block}
/* ⚠ el hover sólo con puntero de verdad: en el teléfono el navegador lo
   simula al apoyar el dedo y la flecha queda pintada */
@media (hover:hover) and (pointer:fine){
  .cop-cab-volver:hover{ color:var(--primary-soft, #5fbbff) }
}
.cop-cab-volver:active{ transform:scale(.92) }
.cop-cab-volver:focus{ outline:none }
.cop-cab-volver:focus-visible{
  outline:2px solid var(--primary, #0c95eb); outline-offset:2px; border-radius:50%;
}

/* ── LA ESQUINA DERECHA, PARA LO QUE DE VERDAD LA NECESITA ──────────
   ⚠ NO ES PARA UNA ✕. Es para lo que además de volver hace otra cosa:
   la ruedita de configuración de notificaciones, por ejemplo. Va sin
   fondo —Franco, 05/09/2026: *«eliminá el fondo de gris más claro de
   atrás del botón de la ruedita de configuración»*— porque un círculo
   gris alrededor de un ícono es una caja, y las cajas no son de CP. */
.cop-cab-accion{
  position:absolute;right:0;top:50%;translate:0 -50%;
  width:44px;height:44px;margin-right:-10px;
  display:grid;place-items:center;
  background:none;border:none;padding:0;
  color:var(--text-dim, #9aa3b5);
  cursor:pointer;transition:color .16s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.cop-cab-accion svg{width:19px;height:19px;display:block}
@media (hover:hover) and (pointer:fine){
  .cop-cab-accion:hover{ color:var(--text, #f4f6fb) }
}
.cop-cab-accion:active{ transform:scale(.92) }
.cop-cab-accion[hidden]{display:none}

/* ── EL SUBTÍTULO, OPCIONAL ─────────────────────────────────────────
   Una línea chica bajo el título, para lo que no cabe en el nombre de
   la pantalla: «5 en línea», «División 9 · 60 duelos». */
.cop-cab-sub{
  text-align:center;margin:var(--gap-xs, .3rem) 0 0;
  font-size:var(--fs-xs, .72rem);font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dim, #9aa3b5);
}

/* ── LA ESQUINA DERECHA CUANDO SON **DOS** COSAS  (21/09/2026) ───────
   Franco, para la sala de Mega Spin: *«a la derecha la cantidad de
   usuarios jugando Mega Spin de ese rango de entrada y la i de
   información»*.

   ⚠⚠ `.cop-cab-accion` AGUANTA UNA SOLA PIEZA: es `position:absolute`
   con su propio `right:0`, así que dos hermanas se apilan una encima de
   la otra. Éste es el grupo, y la pieza absoluta pasa a ser ÉL: adentro
   los hijos van en flujo normal y se ordenan solos con el `gap` del
   sistema.
   ⚠ EL `margin-right` NEGATIVO ES EL MISMO que el de `.cop-cab-accion`
   —y el mismo que el de `.cop-cab-volver` del otro lado—: es lo que hace
   que el ÍCONO quede alineado con el contenido y no su caja de 44 px.
   Por eso el ícono va ÚLTIMO en el grupo: si fuera primero, el que
   tocaría el borde sería el dato y la compensación quedaría mal puesta.
   ⚠ NO COMPITE CON EL TÍTULO: el título sigue centrado en el eje de la
   PANTALLA, que es lo que pidió Franco, así que el grupo puede quedarle
   cerca en pantallas angostas. Lo que lo evita es que el dato es corto y
   `white-space:nowrap`; si algún día lleva algo largo, va al
   `.cop-cab-sub`, no acá. */
.cop-cab-der{
  position:absolute; right:0; top:50%; translate:0 -50%;
  display:inline-flex; align-items:center; gap:var(--gap-sm, .5rem);
  margin-right:-10px;
}
.cop-cab-der[hidden]{display:none}
/* ⚠ ADENTRO DEL GRUPO LA ACCIÓN YA NO SE POSICIONA SOLA: si conservara
   su `position:absolute`, se saldría del grupo y volvería al borde,
   pisando al dato. */
.cop-cab-der .cop-cab-accion{
  position:static; translate:none; margin-right:0;
  width:34px; height:34px;
}

/* ── UN DATO CHICO EN LA CABECERA ───────────────────────────────────
   Cuántos están jugando, cuántos quedan, cuánto falta. Es un DATO, no
   un control: no se toca, no tiene borde y no es un chip.
   ⚠ SIN CAJA NI FONDO, que es la regla 1 de la casa: el número en
   blanco y el ícono en el acento alcanzan para que se lea como un dato.
   ⚠ `tabular-nums` PARA QUE NO BAILE: el contador se refresca solo, y
   con dígitos de ancho variable la cabecera se mueve sola cada vez que
   pasa de 99 a 100.
   ⚠ SE OCULTA SIN NÚMERO: un ícono de gente con nada al lado se lee como
   un dato que no cargó. */
.cop-cab-dato{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:'Inter', sans-serif; font-weight:800;
  font-size:var(--fs-sm, .8rem); line-height:1;
  color:var(--text, #f4f6fb);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cop-cab-dato[hidden]{display:none}
.cop-cab-dato svg{
  width:15px; height:15px; display:block; flex:0 0 auto;
  color:var(--cop-acento, var(--primary, #0c95eb));
}