/* --------------------------------------------------------------------------
   16. PERFIL
   -------------------------------------------------------------------------- */
.perfil-body {
    background-color: var(--bg-dark);
    color: var(--text-white);
}

/* Badge de rango con imagen. Vive aqui (y no en ui-effects.css) porque lo
   pinta perfil-summary.php, que aparece en paginas que cargan profile-ui pero
   no ui-effects; alli el icono salia gigante por falta de estas reglas. */
.badge-rank-img {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rank-badge-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}
.rank-icon-sm {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
}

.perfil-container {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    /* Espaciado vertical uniforme (16px) igual que entre las secciones de
       las columnas; los laterales siguen en --sp-9. */
    padding: 16px var(--sp-9) 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* El resumen aparece DENTRO de .perfil-container en Overview (val-resumen) y
   FUERA, como hermano, en el resto de paginas. Para que se vea igual en ambos
   casos, su ancho coincide con el CONTENIDO del container: 1280 menos su
   padding lateral. Asi queda centrado y alineado esté donde esté. */
.perfil-summary {
    width: calc(100% - 2 * var(--sp-9));
    max-width: calc(var(--page-max) - 2 * var(--sp-9));
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-9);
}

.perfil-summary-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-9);
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--sp-9);
}

.perfil-avatar-block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }

.perfil-avatar {
    width: 80px;
    height: 80px;
    background-color: var(--bg-input);
    border-radius: var(--radius-circle);
    overflow: hidden;
    border: 2px solid var(--brand-accent);
}

.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; }

.subtle-btn {
    font-size: var(--fs-sm);
    color: var(--text-gray);
    text-decoration: none;
    background: none;
    border: 1px solid var(--border);
    padding: var(--sp-1) var(--sp-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
}

.subtle-btn:hover { color: var(--text-white); background-color: var(--bg-input); }

.perfil-info    { flex: 1; min-width: 200px; }

.perfil-username { font-size: var(--fs-4xl); margin-bottom: var(--sp-3); }

.perfil-badges  { display: flex; gap: var(--sp-3); }

.perfil-bio {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 340px;
    opacity: .85;
}

/* Estilo "tag": fondo translucido del propio color + texto del color solido,
   mayusculas y esquina pequena. El mismo que la etiqueta FREE de la home.
   Estos badges llevan tambien la clase base .badge (de ui-shared.css), que
   aporta borde, un punto pulsante (::before) y margen inferior pensados para
   el eyebrow del hero. Aqui se anulan: en el perfil no se quieren. */
.badge-rank, .badge-level, .badge-premium, .badge-country {
    border: none;
    border-radius: var(--radius-xs);
    margin-bottom: 0;
    gap: 5px;
}
.badge-rank::before, .badge-level::before, .badge-premium::before, .badge-country::before {
    display: none;
}

.badge-rank    { background: rgba(52, 211, 153, .12); color: var(--green); border-radius: var(--radius-xs); padding: 3px var(--sp-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; }

.badge-level   { background: rgba(167, 139, 250, .14); color: #c084fc; border-radius: var(--radius-xs); padding: 3px var(--sp-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; }

.badge-premium { background: rgba(251, 191, 36, .12); color: var(--amber); border-radius: var(--radius-xs); padding: 3px var(--sp-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; }

.badge-country {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bg-hover); color: var(--text-muted);
    border-radius: var(--radius-xs);
    padding: 3px var(--sp-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: .08em;
}

.perfil-chart-mini { position: relative; flex: 1; min-width: 0; height: 90px; display: flex; flex-direction: column; }

.perfil-chart-mini canvas { flex: 1; min-height: 0; }

.chart-no-data { flex: 1; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--text-muted); opacity: .6; }

.chart-filter-buttons { display: flex; justify-content: space-between; margin-top: var(--sp-2); }

.filter-btn { background: none; border: none; color: var(--text-gray); font-size: var(--fs-xs); cursor: pointer; }

.filter-btn.active { color: var(--brand-accent); font-weight: var(--fw-bold); }

.perfil-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-7);
    margin-top: var(--sp-8);
}

.summary-stat { display: flex; flex-direction: column; }

.section-label { font-size: var(--fs-xl); font-weight: var(--fw-bold); display: flex; align-items: center; gap: var(--sp-3); }

/* Tamaño uniforme de iconos de cabecera de sección (sobrescribe cualquier width/height inline) */
.section-label svg { width: 16px !important; height: 16px !important; flex-shrink: 0; vertical-align: -2px; }

.stats-row-label svg { width: 16px !important; height: 16px !important; flex-shrink: 0; vertical-align: -2px; }

.perfil-stats {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-9);
}

.perfil-stats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-8); }

.stats-period-btns button,
.agentes-sort-btns button,
.mapas-sort-btns button {
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-gray);
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
}

.stats-period-btns button.active,
.agentes-sort-btn.active,
.mapas-sort-btn.active {
    background-color: var(--brand-accent);
    color: var(--text-white);
    border-color: var(--brand-accent);
}

.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-7);
}

.stats-kpi {
    background-color: rgba(22, 32, 50, .4);
    border: 1px solid var(--border);
    padding: var(--sp-7);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-kpi-label { font-size: var(--fs-xs); color: var(--text-gray); text-transform: uppercase; }

.stats-kpi-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); margin: var(--sp-2) 0; }

.stats-kpi-sub, .stats-wins-total { font-size: var(--fs-xs); color: var(--text-gray); }

.stats-kpi-accent .stats-kpi-value { color: var(--brand-accent); }

.stats-kpi-green  .stats-kpi-value { color: var(--green); }

.stats-kpi-amber  .stats-kpi-value { color: var(--amber); }

.stats-divider { height: 1px; background-color: var(--border); margin: var(--sp-9) 0; }

.stats-rows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-5);
}

.perfil-rango { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-9); }

.perfil-rango-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-7); }

.rango-peak-pill {
    background-color: rgba(129, 140, 248, .1);
    color: var(--brand-accent);
    padding: var(--sp-1) var(--sp-5);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.perfil-roles,
.perfil-agentes,
.perfil-mapas,
.perfil-armas {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-9);
}

/* ── Agent Roles ─────────────────────────────────────── */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}

@media (max-width: 700px) {
    .roles-grid { grid-template-columns: repeat(2, 1fr); }
}

.role-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.role-name {
    font-size: var(--pcard-name-fs);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.role-games {
    font-size: var(--pcard-sub-fs);
    color: var(--text-gray);
    margin-top: 1px;
}

.role-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.role-stat-val {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-white);
}

.role-wr-bar {
    height: 3px;
    background: var(--border-subtle);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.role-wr-bar-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width var(--t-slow) ease;
}

.perfil-agentes-header,
.perfil-mapas-header,
.perfil-armas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-8);
}

.agentes-grid,
.mapas-grid,
.armas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-7);
}

/* Hit zones: interacción muñeco + línea "Most hit zone" (movido desde resumen.php) */
.hz-zone { stroke: none; transition: opacity .45s ease, filter var(--t-slow) ease; cursor: pointer; }

/* -- Banner de perfil -- */
.profile-banner {
    position: relative;
    height: 160px;
    background: linear-gradient(135deg, #0d1b2a 0%, #1a1030 50%, #0d1b2a 100%);
    overflow: hidden;
}

.banner-pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
    45deg,
    rgba(129, 140, 248, .04) 0px,
    rgba(129, 140, 248, .04) 1px,
    transparent 1px,
    transparent 40px
    );
}

.banner-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(11, 17, 30, .9) 100%);
}

.tab {
    background: none;
    border: none;
    color: var(--text-gray);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: var(--sp-3) var(--sp-7);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    transition: color var(--t-normal), background var(--t-normal);
    white-space: nowrap;
}

.tab:hover  { color: var(--text-white); background: var(--bg-input); }

.tab.active { color: var(--text-white); background: var(--bg-input); }

/* -- Avatar ring + online dot -- */
.avatar-ring {
    position: relative;
    padding: 3px;
    border-radius: var(--radius-circle);
    background: linear-gradient(135deg, var(--brand-accent), var(--purple));
}

.online-dot {
    width: 12px;
    height: 12px;
    background: var(--green);
    border-radius: var(--radius-circle);
    border: 2px solid var(--bg-card);
    position: absolute;
    bottom: 2px;
    right: 2px;
}

/* -- Header actions -- */
.perfil-summary-header-top { align-items: flex-start; }

/* -- Stats period btn (clase directa) -- */
.stats-period-btn {
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-gray);
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--t-normal), color var(--t-normal);
}

.stats-period-btn.active {
    background-color: var(--brand-accent);
    color: var(--text-white);
    border-color: var(--brand-accent);
}

/* -- Stats rows -- */
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4) var(--sp-6);
    background: rgba(22, 32, 50, .4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.stats-row-label { font-size: var(--fs-md); color: var(--text-gray); }

.stats-row-value { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-white); }

.rango-chip.active {
    border-color: var(--brand-accent);
    background: rgba(129, 140, 248, .08);
}

.agentes-sort-btn.active,
.mapas-sort-btn.active {
    background-color: var(--brand-accent);
    color: var(--text-white);
    border-color: var(--brand-accent);
}

.agent-card,
.mapa-card,
.arma-card {
    background: rgba(22, 32, 50, .4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-7);
    transition: border-color var(--t-normal);
}

.agent-card:hover,
.mapa-card:hover,
.arma-card:hover { border-color: rgba(129, 140, 248, .35); }

/* Imágenes de agentes y armas */
.agent-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Versión pequeña para tablas de partida */
.agent-img-sm {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    vertical-align: middle;
}

/* Icono de agente dentro de la card de partida */
.partida-agent-img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: block;
}

.weapon-icon-wrap {
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 64px;
}

/* Las tarjetas de arma (.arma-card, en val-resumen y ft-resumen) se montan por
   JS copiando la maqueta de las de agente pero con prefijo "arma-". Nunca se
   duplicaron estas reglas, asi que salian sin formato: cabecera sin flex, icono
   sin caja y nombre sin negrita. Se comparten los selectores en vez de repetir
   el bloque — si cambia el diseno de una, cambia el de la otra. */
.agent-card-header,
.arma-card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.agent-card-icon,
.arma-card-icon {
    font-size: var(--fs-4xl);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.agent-card-name,
.arma-card-name   { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-white); }

.agent-card-games { font-size: var(--fs-xs); color: var(--text-gray); margin-top: 2px; }

.agent-card-stats {
    display: flex;
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.agent-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-1);
}

.agent-card-stat-val { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-white); }

.agent-card-stat-lbl { font-size: var(--fs-2xs); color: var(--text-gray); margin-top: 2px; }

.agent-wr-bar {
    height: 4px;
    background: var(--bg-input);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.agent-wr-bar-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width var(--t-slow) ease;
}

/* -- Chart tooltip -- */
.chart-tooltip {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-white);
    font-size: var(--fs-xs);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    pointer-events: none;
    display: none;
    white-space: nowrap;
    z-index: var(--z-tooltip);
}