/* ══════════════════════════════════════════════════════════════════
   COP · EL PERFIL  (07/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«la página de perfil tiene que cambiar el diseño de la
   tarjeta de perfil: tiene que ser igual a la tarjeta de jugador del
   equipo de la semana, ese celeste, pero con la info del jugador —
   nombre, país, provincia— y tiene que mostrar la división del jugador
   (empieza en la 10) y sus datos de país, nombre de usuario y club que
   eligió en el onboarding. El botón de inventario tiene que ser nuestro
   nuevo botón estándar en tamaño grande a lo ancho, y pasar a llamarse
   “Jugadores del Equipo”. En la sección de equipo de 5 cambiale el
   título por “Mi Equipo” (…). Abajo de eso va información del usuario y
   tenés que poner un panel de estadísticas (…) y después un panel
   enorme de torneos (…). Historial movimientos y sobres abiertos
   eliminalo. Ahí abajo van una descripción propia del perfil y links a
   sus redes sociales»*.

   ══ LO QUE ESTA HOJA NO DIBUJA ════════════════════════════════════
   ⚠⚠ LA CARTA NO ESTÁ ACÁ. Es `cop-carta-jugador.css` —la misma carta
   de la tienda, del inventario y del Equipo de la Semana— y la arma
   `COPCartaJugador.html()`. Franco pidió «la misma tarjeta»: la única
   forma de que eso siga siendo verdad dentro de un mes es que sea el
   mismo archivo, no uno que se le parezca. Acá va SÓLO cuánto mide en
   esta pantalla.
   ⚠ LA CANCHA DE «MI EQUIPO» TAMPOCO. Es `.cop-cancha-panel` +
   `.cop-once`, de `cop-cancha.css`.
   ⚠ LOS BOTONES TAMPOCO. «Jugadores del Equipo» es `.cop-b .cop-b--lg
   .cop-borde`, el botón del sistema; los de redes son la familia
   «ícono», que el sistema define aparte y que sí vive acá porque no
   existía.

   ══ LO QUE SE FUE ═════════════════════════════════════════════════
   ⚠ MOVIMIENTOS Y SOBRES ABIERTOS: Franco los sacó. Eran dos listas de
   contabilidad en una pantalla que ahora es una carta de presentación.
   El historial de DUELOS se queda: es rendimiento, no contabilidad.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · LA CARTA ──────────────────────────────────────────────────
   ⚠ EL ANCHO ES EL DE UNA CARTA DE VERDAD, no el de la columna. A todo
   el ancho de una pantalla de 430 la carta mide 430×645 y ocupa la
   pantalla entera: se lee como una pantalla de carta, no como el
   encabezado de un perfil. */
.pf-carta{
  width:min(100%, 260px);
  margin:0 auto var(--gap-lg, 1rem);
}
/* la carta ya trae su proporción y su marco; nada más que decir acá */

/* ── 2 · LA ACCIÓN ─────────────────────────────────────────────────
   ⚠ `.cop-b--lg` YA ES `width:100%`: no hace falta estirarlo. Franco:
   *«nuestro nuevo botón estándar en tamaño grande a lo ancho»*.

   ⚠⚠ `display:flex` Y NO `block` (18/09/2026). Franco: *«ese botón tiene
   que estar bien puesto y centrado el texto»*, y tenía razón: el texto
   salía PEGADO A LA IZQUIERDA en un botón de 358 px de ancho.
   El motivo es el de siempre y ya está escrito dos veces en este
   proyecto: `.cop-b` centra su contenido con
   `display:inline-flex; justify-content:center`, y `.pf-accion` (0-1-0)
   empata con `.cop-b` (0-1-0) — esta hoja se carga DESPUÉS, así que
   `display:block` le ganaba y se llevaba puesto el centrado. Un botón
   que dice «a lo ancho» no puede además decidir cómo se muestra.
   ⚠ Con `flex` el `margin:0 auto` sigue centrando la caja y el
   `justify-content` del componente vuelve a mandar adentro. Cambiar el
   display por `inline-flex` NO alcanzaba: ahí el `margin:auto` no centra
   nada y el botón quedaba pegado al borde izquierdo de la columna. */
.pf-accion{
  display:flex;
  margin:0 auto var(--gap-2xl, 1.8rem);
  max-width:420px;
}

/* ── LAS SECCIONES ─────────────────────────────────────────────────
   ⚠ SIN CAJAS Y SEPARADAS POR UNA LÍNEA (regla 1). Es la corrección que
   Franco pide siempre, y en una pantalla con cinco bloques seguidos es
   donde más se nota: cinco cajas grises sobre un fondo gris son cinco
   parches.
   ⚠ LA LÍNEA VA ARRIBA (`+`) para que la última sección no termine en
   una raya suelta encima del pie. */
.pf-sec + .pf-sec{
  margin-top:var(--gap-2xl, 1.8rem);
  padding-top:var(--gap-2xl, 1.8rem);
  border-top:1px solid var(--card-border, #1e2330);
}
.pf-sec[hidden]{display:none}

.pf-tit{
  margin:0 0 var(--gap-lg, 1rem);
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  font-size:var(--fs-xl, 1.3rem);
  line-height:var(--lh-tight, 1.1);
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text, #f4f6fb);
}
/* la bajada de una sección: qué es lo que se está mirando */
.pf-sub{
  margin:-.6rem 0 var(--gap-lg, 1rem);
  font-size:var(--fs-sm, .8rem); font-weight:600;
  line-height:var(--lh-base, 1.3);
  color:var(--text-faint, #5a6275);
}

/* ── 3 · LOS DATOS DEL JUGADOR ─────────────────────────────────────
   Una lista de filas sin caja: etiqueta a la izquierda, dato a la
   derecha. Es el mismo patrón de `.cop-lista > .cop-item`.
   ⚠ EL DATO QUE FALTA SE VE COMO UN GUIÓN Y NO SE ESCONDE: «Provincia
   —» dice que el campo existe y está vacío, que es la verdad. */
.pf-datos{ display:flex; flex-direction:column }
.pf-dato{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-md, .7rem);
  padding:var(--gap-md, .7rem) 0;
  font-size:var(--fs-md, .88rem);
  line-height:var(--lh-base, 1.3);
}
.pf-dato + .pf-dato{ border-top:1px solid var(--card-border, #1e2330) }
.pf-dato-k{ color:var(--text-dim, #9aa3b5); font-weight:600; flex:0 0 auto }
.pf-dato-v{
  color:var(--text, #f4f6fb); font-weight:800;
  text-align:right; min-width:0;
  display:flex; align-items:center; gap:var(--gap-sm, .5rem);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-dato-v img{ width:20px; height:14px; object-fit:cover; border-radius:2px; flex:0 0 auto }

/* ── 4 · LOS PANELES DE NÚMEROS ────────────────────────────────────
   ⚠⚠ SON BALDOSAS DE DATO, NO GRÁFICOS. Lo que Franco pidió —«mejor
   racha», «mejor resultado», «mejor puesto»— son NÚMEROS SUELTOS: cada
   uno es un solo valor sin serie ni comparación, y un gráfico de un
   solo valor es un adorno con ejes. La baldosa dice el número grande y
   debajo qué es.
   ⚠ LAS DIVISIONES VAN COMO BORDES DE LAS CELDAS, no pintando el fondo
   del contenedor y dejando asomar el `gap`: con filas de distinto alto,
   lo segundo deja trazos sueltos colgando. */
.pf-numeros{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  /* el hueco es 0 porque lo que separa es la línea, no el aire */
  gap:0;
}
.pf-num{
  box-sizing:border-box;
  padding:var(--gap-lg, 1rem) var(--gap-md, .7rem);
  border-top:1px solid var(--card-border, #1e2330);
  border-left:1px solid var(--card-border, #1e2330);
  min-width:0;
}
/* ⚠ SÓLO LOS BORDES INTERIORES: los de afuera son el marco que la
   regla 1 no quiere. Se apagan por posición, no borrando la regla. */
.pf-num:first-child{ border-left:0 }
.pf-numeros > .pf-num:nth-child(1),
.pf-numeros > .pf-num:nth-child(2),
.pf-numeros > .pf-num:nth-child(3){ border-top:0 }

.pf-num-v{
  display:block;
  font-family:'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight:400;
  /* ⚠ ES UN NÚMERO DE DISPLAY, LA EXCEPCIÓN DE LA REGLA 4: el techo de
     1.5rem es para el TEXTO. Un marcador en 0,95rem no es un marcador. */
  font-size:clamp(1.5rem, 7vw, 2rem);
  line-height:1;
  color:var(--text, #f4f6fb);
  letter-spacing:.01em;
}
/* el que se destaca del panel: uno solo, o dejan de destacarse */
.pf-num--alto .pf-num-v{ color:rgb(var(--cop-acento-rgb, 12,149,235)) }
.pf-num--oro  .pf-num-v{ color:var(--gold, #ffc233) }
.pf-num-k{
  display:block; margin-top:.3rem;
  font-size:var(--fs-xs, .72rem); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  line-height:var(--lh-base, 1.3);
  color:var(--text-dim, #9aa3b5);
}
/* la aclaración de una baldosa: «desde que lo medimos», «en 4 torneos» */
.pf-num-n{
  display:block; margin-top:.18rem;
  font-size:var(--fs-xs, .72rem); font-weight:600;
  line-height:var(--lh-base, 1.3);
  color:var(--text-faint, #5a6275);
}

/* ⚠⚠ EL PANEL VACÍO DICE POR QUÉ ESTÁ VACÍO. Un panel de estadísticas
   con seis guiones y nada más se lee como un error de carga. Con una
   línea que diga de dónde salen los números, se lee como «todavía no
   jugaste», que es lo que pasa. */
.pf-vacio{
  margin:0; padding:var(--gap-lg, 1rem) 0;
  font-size:var(--fs-sm, .8rem); font-weight:600;
  line-height:var(--lh-loose, 1.5);
  color:var(--text-dim, #9aa3b5);
}

/* ── 5 · LA DESCRIPCIÓN ────────────────────────────────────────────
   ⚠ SIN CAJA Y CON UNA BARRA AL COSTADO: es una cita, lo que la persona
   dice de sí misma, y la barra la separa del resto sin encerrarla. */
.pf-bio{
  margin:0;
  padding-left:var(--gap-md, .7rem);
  border-left:2px solid rgb(var(--cop-acento-rgb, 12,149,235));
  font-size:var(--fs-base, 1rem); font-weight:600;
  line-height:var(--lh-loose, 1.5);
  color:var(--text, #f4f6fb);
  /* ⚠ EL SALTO DE LÍNEA QUE ESCRIBIÓ LA PERSONA SE RESPETA, y el resto
     se ajusta solo: `pre-wrap` y no `pre`, que dejaría una línea larga
     saliéndose de la pantalla. */
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.pf-bio[hidden]{display:none}

/* ── 6 · LAS REDES ─────────────────────────────────────────────────
   Franco: *«links a sus redes sociales, con los logos de x.com,
   instagram, tiktok, youtube, whatsapp, telegram, con un diseño moderno
   y minimalista de los botones»*.

   ⚠⚠ SON DE LA FAMILIA «ÍCONO», NO BOTONES. El sistema separa cinco
   familias y sólo la primera lleva `.cop-b`: esto es cuadrado, sin
   texto y va en fila de a seis. Con el cuerpo del botón, seis de ellos
   pesarían como seis acciones principales en una pantalla que ya tiene
   una.
   ⚠⚠ Y SON MONOCROMÁTICOS A PROPÓSITO. Los colores de marca de las seis
   redes —el rojo de YouTube, el verde de WhatsApp, el degradé de
   Instagram— juntos en una fila son seis marcas ajenas gritando en una
   pantalla que es de CP. En blanco tenue se leen igual (la FORMA del
   logo es lo que se reconoce) y la fila se ve como una pieza sola. El
   color de la red aparece al tocarla, que es cuando importa.
   ⚠ 44 px: el mínimo táctil. Por debajo el dedo falla, y son seis
   objetivos chicos uno al lado del otro. */
.pf-redes{
  display:flex; flex-wrap:wrap; gap:var(--gap-sm, .5rem);
}
.pf-redes[hidden]{display:none}
.pf-red{
  box-sizing:border-box;
  width:44px; height:44px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:var(--r-card, 14px);
  border:1px solid var(--card-border, #1e2330);
  background:none;
  color:var(--text-dim, #9aa3b5);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s, border-color .2s, transform 120ms cubic-bezier(.2,.8,.2,1);
}
.pf-red svg{ width:20px; height:20px; display:block; fill:currentColor }
.pf-red[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  /* ⚠ EL COLOR DE LA RED APARECE AL TOCARLA. `--pf-red` lo declara cada
     una abajo; sin puntero no se dispara, así que en el teléfono la
     fila nunca queda pintada de un color que el dedo dejó al pasar. */
  .pf-red:hover{
    color:var(--pf-red, var(--text, #f4f6fb));
    border-color:var(--pf-red, rgba(255,255,255,.5));
  }
}
.pf-red:active{ transform:scale(.92) }
.pf-red:focus{outline:none}
.pf-red:focus-visible{
  color:var(--pf-red, var(--text, #f4f6fb));
  border-color:rgb(var(--cop-acento-rgb, 12,149,235));
  box-shadow:0 0 0 3px rgba(var(--cop-acento-rgb, 12,149,235), .22);
}
/* ⚠ LOS COLORES SON LOS DE CADA MARCA Y SE ESCRIBEN UNA SOLA VEZ. Están
   acá y no en el JS porque son diseño: el JS sólo dice qué red es. */
.pf-red[data-red="x"]        { --pf-red:#ffffff }
.pf-red[data-red="instagram"]{ --pf-red:#e1306c }
.pf-red[data-red="tiktok"]   { --pf-red:#25f4ee }
.pf-red[data-red="youtube"]  { --pf-red:#ff0033 }
.pf-red[data-red="whatsapp"] { --pf-red:#25d366 }
.pf-red[data-red="telegram"] { --pf-red:#2aabee }
/* ⚠ twitch y kick (24/09/2026, ronda 9): la base las acepta desde perfil3 */
.pf-red[data-red="twitch"]   { --pf-red:#9146ff }
.pf-red[data-red="kick"]     { --pf-red:#53fc18 }

/* ── EL PIE ────────────────────────────────────────────────────────
   ⚠⚠ LOS DOS ENLACES LEGALES (16/09/2026). Apple pide en la guía 5.1.1
   que el enlace a la política de privacidad esté **adentro de la app, en
   un lugar fácil de encontrar**, no sólo en la ficha de la tienda. Este
   es ese lugar.
   ⚠ SON ENLACES Y NO BOTONES, a propósito: llevan a otro contenido, que
   es la familia «enlace». Darles cuerpo de `.cop-b` los pondría al mismo
   nivel visual que «Cerrar sesión» y «Borrar mi cuenta», que son
   acciones — y una de ellas es destructiva.
   ⚠ La separación con «Cerrar sesión» es la MISMA que tienen con la
   sección de arriba (1.8rem): no son un grupo con el botón, son otra
   cosa. Que el espacio sea igual arriba y abajo es lo que lo dice. */
.pf-legal{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:var(--gap-md, .7rem);
  margin-top:var(--gap-2xl, 1.8rem);
  font-size:var(--fs-sm, .8rem);
  line-height:var(--lh-base, 1.3);
  text-align:center;
}
.pf-legal a{
  color:var(--text-dim, #9aa3b5);
  text-decoration:none;
  /* área de toque cómoda sin agrandar el dibujo del texto */
  padding:var(--gap-xs, .3rem) 0;
}
.pf-legal span{ color:var(--text-faint, #5a6275) }
@media (hover:hover) and (pointer:fine){
  .pf-legal a:hover{ color:var(--text, #f4f6fb) }
}
/* ⚠ TODO COMPONENTE QUE DECLARA `display` DECLARA SU `[hidden]`: en
   empate de especificidad (0-1-0) gana el declarado después, y
   `[hidden]{display:none}` vive en el reset del navegador. Novena
   aparición de esta trampa en el proyecto. */
.pf-legal[hidden]{display:none}

/* ⚠ CERRAR SESIÓN ES EL BOTÓN DEL SISTEMA EN ROJO, no un botón escrito
   a mano con `style=` en el HTML —que es como estaba—. Es la misma
   pieza con otro color: `--borde-rgb` y la tinta. */
.pf-salir{
  --borde-rgb:248,113,113;
  color:#f87171;
  margin-top:var(--gap-2xl, 1.8rem);
}

/* ── PANTALLA GRANDE ───────────────────────────────────────────────
   ⚠ LAS BALDOSAS DE NÚMEROS PASAN A CUATRO POR FILA, y la primera fila
   pierde su borde de arriba con la regla de los tres primeros de más
   arriba… que a cuatro columnas dejaría al cuarto con línea. Se corrige
   acá, que es donde cambia la cantidad de columnas. */
@media (min-width:761px){
  .pf-numeros > .pf-num:nth-child(4){ border-top:0 }
  .pf-numeros > .pf-num:nth-child(4n+1){ border-left:0 }
}
@media (max-width:760px){
  /* a dos columnas: la segunda fila arranca en el tercero */
  .pf-numeros{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .pf-numeros > .pf-num:nth-child(3){ border-top:1px solid var(--card-border, #1e2330) }
  .pf-numeros > .pf-num:nth-child(odd){ border-left:0 }
}