/* ════════════════════════════════════════════════════════════════════
   COP · LAS LÍNEAS DE LA CANCHA — UN SOLO ARCHIVO (28/08/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«agregá el mismo fondo de cancha de fútbol que tenemos, con
   el mismo logo de CP en esa posición, adaptado a la pantalla donde se
   muestran los 11 picks… la mitad que se muestra es la de abajo, ya que
   el arquero está abajo y los delanteros arriba»*.

   ⚠⚠ POR ESO ESTE ARCHIVO EXISTE. El dibujo estaba escrito adentro de
   `en-vivo.html` —la cancha de la tab Alineaciones— y la cancha de Once
   Ideal necesita EL MISMO. Copiarlo era garantizar que en dos semanas
   una tuviera el área al 59 % y la otra al 55 %.
   ⚠ SÓLO VIAJAN LAS LÍNEAS. El contenedor NO: en `en-vivo` la cancha es
   una tarjeta con relleno y en `lineup` `.cancha` es la capa a pantalla
   completa de Mis Picks. Dos cosas distintas con el mismo nombre — meter
   acá el contenedor habría roto la segunda.

   ══ LAS MEDIDAS SON LAS DE UNA CANCHA DE VERDAD ═════════════════════
   Sobre 105 × 68 m:
     área grande   40,32 / 68 = 59 %  ·  16,5 / 105 = 15,5 %
     área chica    18,32 / 68 = 27 %  ·   5,5 / 105 =  5,5 %
     punto de penal            11 / 105 = 10,5 %
   ⚠⚠ El punto de penal tiene que quedar ADENTRO del área grande
   (10,5 % < 15,5 %). Una primera versión lo puso al 18,5 % y quedaba
   flotando entre los defensores: se vio en la captura, no en la
   medición — que sólo contaba que el punto existiera.
   ⚠ EN MEDIA CANCHA los porcentajes verticales se DUPLICAN: el alto de
   referencia es la mitad, así que 15,5 % de la cancha entera son 31 %
   de la mitad. Sin esto el área sale a la mitad de tamaño y la cancha
   se lee como una cancha chica, no como media cancha.
   ══════════════════════════════════════════════════════════════════ */

.cn-lineas{position:absolute;inset:0;pointer-events:none}
.cn-lineas span{position:absolute;border:1.5px solid var(--cn-linea,rgba(255,255,255,.16))}

.cn-area {left:50%;transform:translateX(-50%);width:59%;height:15.5%}
.cn-chica{left:50%;transform:translateX(-50%);width:27%;height:5.5%}
.cn-arr{top:-1.5px;border-top-color:transparent}
.cn-ab {bottom:-1.5px;border-bottom-color:transparent}
/* el punto de penal: un disco, no un borde */
.cn-penal{left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;
  background:var(--cn-linea,rgba(255,255,255,.16));border:0}
.cn-penal.cn-arr{top:10.5%} .cn-penal.cn-ab{bottom:10.5%}

/* ── MEDIA CANCHA (la de Once Ideal) ─────────────────────────────────
   El borde de arriba ES la línea del medio, así que el círculo central
   queda cortado por la mitad — que es exactamente lo que se ve cuando
   mirás media cancha. */
.cn-lineas.media .cn-area {height:31%}
.cn-lineas.media .cn-chica{height:11%}
.cn-lineas.media .cn-penal.cn-ab{bottom:21%}

/* ── MEDIA CANCHA CORTA — la del once (10/09/2026) ───────────────────
   Franco: *«la cancha tiene el área de abajo donde va el arquero muy
   larga, no representa realmente una cancha de fútbol, tiene que ser
   más corta, no tan alta, y el arquero estar posicionado en su parte de
   abajo, por dentro del área chica»*.

   ⚠⚠ EL 31 % ES GEOMÉTRICAMENTE CORRECTO Y AUN ASÍ SE VE MAL, y por eso
   este modificador existe en vez de cambiar el número de arriba. Sobre
   media cancha de verdad el área grande mide 16,5 de 52,5 = 31 %. Pero
   el lienzo del once NO tiene la proporción de media cancha: es 3 × 4,9
   (1,63 de alto por 1 de ancho) contra el 0,77 real, así que todo lo
   vertical sale estirado un 110 %. Dibujar el número real sobre un
   lienzo estirado da un área que ocupa un tercio de la pantalla.
   Estos números están corregidos por ese estiramiento: se ven como un
   área, que es lo que hay que lograr.
   ⚠ VA COMO MODIFICADOR Y NO REEMPLAZANDO A `.media` porque
   `mi-perfil.html` usa la misma media cancha en un lienzo de otra
   proporción, donde el 31 % sí se ve bien. Un archivo, dos lienzos, dos
   medidas declaradas — no una medida que sirve para uno y arruina al
   otro en silencio. */
.cn-lineas.media.corta .cn-area {height:26%}
.cn-lineas.media.corta .cn-chica{height:13%}
.cn-lineas.media.corta .cn-penal.cn-ab{bottom:17%}
/* ⚠⚠ Y SE VA EL CÍRCULO CENTRAL. El medio círculo tenía sentido cuando
   el borde de arriba del lienzo ERA la línea del medio: se leía como una
   cancha cortada al medio. Sin ese borde (Franco sacó las líneas de los
   bordes el 10/09/2026) el semicírculo quedó flotando como un aro vacío
   arriba de las tarjetas — se vio en la captura, no en los números.
   Una línea que ya no explica nada es ruido, así que se apaga. */
.cn-lineas.media.corta .cn-medio{display:none}
.cn-medio{
  left:50%;top:0;transform:translate(-50%,-50%);
  width:26%;aspect-ratio:1;border-radius:50%;
}

/* ── EL SELLO DE CP ──────────────────────────────────────────────────
   Franco, 27/08/2026: *«en la esquina interna superior izquierda tenés
   que agregar como sello el logo de CP en un gris claro que se note»*.

   ⚠⚠ NO ES UNA IMAGEN NUEVA NI UNA COPIA DEL LOGO EN SVG: es
   `logo-icon.png` —el mismo archivo que usa la topbar— usado como
   MÁSCARA. La máscara toma sólo la forma (el canal alfa del PNG) y el
   color lo pone el `background`: el sello se pinta del gris que haga
   falta sin tocar el archivo, y el día que cambie el logo cambia acá.
   Con un `<img>` y `filter:grayscale()` el color final dependería del
   azul del original y no se podría pedir un gris exacto.
   ⚠ EL FONDO SE DECLARA SÓLO SI HAY MÁSCARA: sin ella el elemento sería
   un rectángulo gris macizo. En vez de un logo peor, no hay logo. */
.cn-sello{
  position:absolute;top:.5rem;left:.5rem;
  /* la proporción es la del archivo (1072 × 737), así no se deforma */
  width:36px;aspect-ratio:1072/737;
  pointer-events:none;border:0;
}
@supports ((-webkit-mask-image:url('logo-icon.png')) or (mask-image:url('logo-icon.png'))){
  .cn-sello{
    background:rgba(255,255,255,.32);
    -webkit-mask:url('logo-icon.png') no-repeat center/contain;
    mask:url('logo-icon.png') no-repeat center/contain;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LA CANCHA COMO PANEL, Y EL ONCE DE A CINCO  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«tenés que poner las cartas con un recuadro de fondo igual
   al que se muestra en mis picks, con esa imagen de cancha gris de
   fondo, y la posición de las cartas de los jugadores como se muestran
   en mis picks»*.

   ══ POR QUÉ NO ALCANZABA CON LO QUE YA HABÍA ══════════════════════
   Arriba de este archivo están LAS LÍNEAS de la cancha, y son las
   mismas. Lo que faltaba son dos cosas que hasta hoy vivían escritas
   adentro del `<style>` de `lineup.html`:
     · el CÉSPED (`cancha-neutra.webp`) como fondo, que en Mis Picks es
       una capa `fixed` a pantalla completa
     · la formación 2-2-1 de los cinco lugares
   En el perfil las dos tienen que ser un RECUADRO, no una capa: hay
   contenido arriba y abajo.

   ⚠⚠ LO QUE NO SE MUDÓ HOY, Y POR QUÉ. `lineup.html` sigue con sus
   `.cancha-filas` / `.cancha-fila` propias en vez de usar `.cop-once`.
   No es un descuido: la tarea abierta de Franco sobre la cancha de Mis
   Picks —*«el arquero más abajo, casi adentro del arco; el DT a su
   izquierda en la misma línea; suplentes e info a su derecha»*— REESCRIBE
   justamente esas posiciones. Mudarlas hoy sería mover un código que
   está por cambiar, y dejar las dos versiones desincronizadas durante
   la mudanza. Cuando se haga esa tarea, `lineup` pasa a `.cop-once` y
   estas líneas quedan como el único lugar donde vive la formación.

   ⚠ EL CÉSPED SE DECLARA CON SU COLOR DE RESPALDO. Si la imagen tarda
   un cuadro, el recuadro no parpadea en blanco: `#08090d` es el negro
   profundo del propio archivo, medido.
   ══════════════════════════════════════════════════════════════════ */
.cop-cancha-panel{
  box-sizing:border-box;
  position:relative;
  border-radius:var(--r-card, 14px);
  overflow:hidden;
  /* 16/10/2026 · Franco: «en todas las páginas de mis picks no uses más ese
     diseño gris con la cancha de fútbol diseñada, cambiá ese gris por el
     color de fondo que usamos siempre en toda la app». */
  background:transparent;
  /* ⚠ SIN BORDE Y SIN SOMBRA (regla 1): el recuadro ya se distingue del
     fondo de la página por el césped. Un borde encima sería la caja que
     Franco viene sacando de todas las pantallas. */
  padding:var(--gap-lg, 1rem) var(--gap-md, .7rem);
}
.cop-cancha-panel[hidden]{display:none}

/* ── LA FORMACIÓN 2-2-1 ────────────────────────────────────────────
   ⚠ ES LA MISMA DE MIS PICKS: dos arriba, dos en el medio y el arquero
   centrado abajo. No es una formación elegida acá — es la que la
   persona ya vio armando su alineación, y por eso su equipo del perfil
   se le parece.
   ⚠ EL ARQUERO MIDE LO MISMO QUE LOS DEMÁS Y VA CENTRADO: si ocupara
   toda la fila se leería como «el más importante», que es lo contrario
   de lo que es en un equipo de cinco. */
.cop-once{
  --once-hueco:var(--gap-lg, 1rem);
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  gap:var(--once-hueco);
  width:100%;
  max-width:var(--once-ancho, 460px);
  margin-inline:auto;
}
.cop-once[hidden]{display:none}
.cop-once-fila{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--once-hueco);
}
.cop-once-fila--uno{
  grid-template-columns:minmax(0, 1fr);
  justify-items:center;
}
/* el mismo ancho que una de las dos de arriba, para que la columna no
   cambie de medida entre filas */
.cop-once-fila--uno > *{
  width:calc(50% - var(--once-hueco) / 2);
}
.cop-once-lugar{ position:relative; min-width:0 }

/* ⚠ EL LUGAR VACÍO SE VE, NO SE ESCONDE (regla 9). Un equipo de tres
   cartas con dos huecos punteados dice «te faltan dos»; sin los huecos
   dice «tu equipo es de tres», que no es verdad. */
.cop-once-lugar.vacio{
  border:2px dashed rgba(255,255,255,.28);
  border-radius:var(--r-card, 14px);
  aspect-ratio:1024 / 1536;
  display:grid; place-items:center;
  color:rgba(255,255,255,.5);
  font:700 .72rem/1.2 var(--texto, Inter, sans-serif);
  text-align:center; padding:var(--gap-sm, .5rem);
}