/* =====================================================================
   perfil.css  ·  popup del perfil de jugador (16/09/2026)

   Lo usan ranking.html e index.html. Todo lleva el prefijo .pf para no
   chocar con los estilos de cada pagina: este archivo no depende de
   nada de ellas salvo los colores de :root.

   Celular (hasta 760 px): ocupa toda la pantalla.
   PC: ventana centrada con la pagina atras.
   ===================================================================== */

html.pf-abierto,html.pf-abierto body{overflow:hidden}

.pf{
  --pf-negro:var(--negro,#0b0d10); --pf-panel:var(--panel,#15181d); --pf-blanco:var(--blanco,#ffffff);
  --pf-celeste:var(--celeste,#2fb5e6); --pf-plata:var(--plata,#c9ced4); --pf-oro:var(--oro,#e8b923);
  --pf-linea:var(--linea,#242a31); --pf-alto:var(--panel-alto,#0f1216);
  padding:0;margin:auto;border:1px solid var(--pf-linea);border-radius:6px;background:var(--pf-negro);color:var(--pf-plata);
  width:min(980px,calc(100% - 40px));max-width:none;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:hidden;
  font:400 17px/1.6 'Barlow',system-ui,sans-serif;text-align:left
}
.pf *{box-sizing:border-box}
.pf::backdrop{background:rgba(0,0,0,.74)}
.pf[open]{animation:pf-entra .18s ease-out}
@keyframes pf-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pf[open]{animation:none}}

.pf p{max-width:none}
.pf-caja{display:flex;flex-direction:column;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
.pf-barra{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--pf-linea);background:var(--pf-alto);flex:none}
.pf-titulo-barra{margin-right:auto;min-width:0;font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-celeste);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-boton{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--pf-linea);background:var(--pf-panel);color:var(--pf-blanco);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;flex:none}
.pf-boton:hover{border-color:var(--pf-celeste)}
.pf-cerrar{width:44px;height:44px;padding:0;font-size:20px;line-height:1}
.pf-cuerpo{overflow-y:auto;padding:22px 24px 30px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pf-cuerpo:focus{outline:none}

.pf-cargando,.pf-vacio{padding:26px 18px;background:var(--pf-panel);border:1px solid var(--pf-linea);border-radius:4px;color:var(--pf-plata)}

/* ---- cabecera ---- */
.pf-cab{display:flex;align-items:center;gap:18px}
.pf-foto{width:92px;height:92px;border-radius:999px;flex:none;background:var(--pf-alto);border:2px solid var(--pf-celeste);display:block;object-fit:cover}
.pf .pf-nick{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:none;letter-spacing:0;color:var(--pf-blanco);font-size:clamp(28px,6vw,44px);line-height:1.05;margin:0;overflow-wrap:anywhere}
.pf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.pf-chip{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pf-plata);border:1px solid var(--pf-linea);background:var(--pf-panel);border-radius:999px;padding:2px 11px;white-space:nowrap}
.pf-chip.celeste{color:var(--pf-celeste)}
.pf-chip.oro{color:var(--pf-oro);border-color:var(--pf-oro)}
.pf-fechas{font-size:15px;margin:10px 0 0;color:var(--pf-plata)}

/* ---- secciones ---- */
.pf-sec{margin-top:26px}
.pf .pf-h2{font-family:'Black Ops One',cursive;font-weight:400;text-transform:uppercase;color:var(--pf-blanco);
  font-size:clamp(19px,3vw,24px);line-height:1.1;letter-spacing:0;margin:0 0 12px}
.pf-fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pf-ficha{background:var(--pf-panel);border:1px solid var(--pf-linea);border-radius:4px;padding:13px 16px}
.pf-et{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pf-plata)}
.pf-num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;line-height:1.1;color:var(--pf-blanco);font-variant-numeric:tabular-nums}
.pf-sub{font-size:14px;color:var(--pf-plata);line-height:1.35}

.pf-grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pf-grilla.tres{grid-template-columns:repeat(3,1fr)}
.pf-panel{background:var(--pf-panel);border:1px solid var(--pf-linea);border-radius:4px;padding:16px 18px}
.pf .pf-h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--pf-blanco);line-height:1.2;margin:0 0 8px}
.pf-nota{font-size:14px;color:var(--pf-plata);margin:10px 0 0;line-height:1.45}

dl.pf-lista{margin:0;display:grid;grid-template-columns:1fr auto}
dl.pf-lista dt,dl.pf-lista dd{padding:7px 0;border-bottom:1px solid var(--pf-linea);margin:0}
dl.pf-lista dt{color:var(--pf-plata);font-size:16px}
dl.pf-lista dd{padding-left:14px;color:var(--pf-blanco);text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
dl.pf-lista dt:nth-last-of-type(1),dl.pf-lista dd:nth-last-of-type(1){border-bottom:0}
dl.pf-lista dd.oro{color:var(--pf-oro)}
.pf-barras + dl.pf-lista{margin-top:12px}

/* ---- barras horizontales: nombre y valor arriba, barra abajo ---- */
.pf-barras{display:grid;gap:10px}
.pf-fila{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.pf-fila .n{font-size:16px;color:var(--pf-plata)}
.pf-fila .v{text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;color:var(--pf-blanco);font-variant-numeric:tabular-nums}
.pf-fila .v small{font-weight:500;color:var(--pf-plata);font-size:14px;margin-left:4px}
.pf-pista{grid-column:1 / -1;height:10px;background:var(--pf-alto);border-radius:0 4px 4px 0;overflow:hidden}
.pf-relleno{height:100%;background:var(--pf-celeste);border-radius:0 4px 4px 0;min-width:2px}

/* ---- tabla de armas (propia, no usa la de la pagina) ---- */
.pf-tabla-caja{border:1px solid var(--pf-linea);border-radius:4px;overflow-x:auto}
.pf table.pf-tabla{width:100%;min-width:0;border-collapse:collapse;background:var(--pf-panel);border:0;border-radius:0}
.pf .pf-tabla th{text-align:right;padding:11px 14px;background:var(--pf-alto);border-bottom:1px solid var(--pf-linea);white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--pf-plata)}
.pf .pf-tabla td{padding:10px 14px;border-bottom:1px solid var(--pf-linea);text-align:right;white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:17px;color:var(--pf-blanco);font-variant-numeric:tabular-nums;background:none}
.pf .pf-tabla tr:last-child td{border-bottom:0}
.pf .pf-tabla .izq{text-align:left}
.pf .pf-tabla td.pos{width:48px;color:var(--pf-plata)}
.pf .pf-tabla td.arma{font-weight:700}
.pf .pf-tabla td.flojo{color:var(--pf-plata)}
.pf .pf-tabla td.parte{width:30%;min-width:150px}
.pf-parte{display:flex;align-items:center;gap:10px}
.pf-parte .pf-pista{flex:1}
.pf-parte span{width:40px;text-align:right}

/* ---- grafico de actividad ---- */
.pf-graf{position:relative}
.pf-graf svg{display:block;width:100%;height:180px;overflow:visible}
.pf-tip{position:absolute;pointer-events:none;background:var(--pf-alto);border:1px solid var(--pf-linea);border-radius:4px;
  padding:6px 10px;font-size:14px;line-height:1.35;color:var(--pf-plata);white-space:nowrap;transform:translate(-50%,-100%);display:none}
.pf-tip b{color:var(--pf-blanco);font-family:'Barlow Condensed',sans-serif;font-size:17px}
.pf .solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (min-width:761px) and (max-width:960px){
  .pf-grilla.tres{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .pf{width:100%;height:100%;height:100dvh;max-height:none;border:0;border-radius:0}
  .pf-caja{height:100%;max-height:none}
  .pf-barra{padding:8px 8px 8px 16px}
  .pf-cuerpo{padding:18px 16px 32px}
  .pf-foto{width:68px;height:68px}
  .pf-cab{align-items:flex-start;gap:14px}
  .pf-fichas{grid-template-columns:repeat(2,1fr);gap:8px}
  .pf-ficha{padding:11px 13px}
  .pf-num{font-size:28px}
  .pf-grilla,.pf-grilla.tres{grid-template-columns:1fr}
  .pf .pf-tabla th{padding:9px 10px;font-size:12px;letter-spacing:.06em}
  .pf .pf-tabla td{padding:9px 10px;font-size:16px}
  .pf .opc{display:none}
}
@media (max-width:380px){
  .pf-chip{font-size:13px}
}