/* =============================================================================
   PORTAL SCOUTING — Estilos específicos (se cargan DESPUÉS de styles.css)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Badge de instancia (en la cabecera principal)
   ----------------------------------------------------------------------------- */
.header-instance-wrapper {
    margin-left: auto;
}

.instance-badge {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* -----------------------------------------------------------------------------
   Pantalla de selección de instancia (post-login)
   ----------------------------------------------------------------------------- */
.instance-selector-wrapper {
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(13, 59, 102, 0.60), rgba(20, 78, 140, 0.46)),
                url('/assets/depor-elche-277.jpg') center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.instance-selector-box {
    background: var(--white);
    padding: 2.5rem 3rem;
    border-radius: 16px;
    max-width: 900px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    text-align: center;
}

.instance-selector-title {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.instance-selector-subtitle {
    color: var(--text-gray);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.instance-cards-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.instance-card {
    flex: 0 1 220px;
    border: 3px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1.4rem 1rem;
    background: var(--white);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--font-body, "Commissioner", Arial, sans-serif);
}

.instance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.instance-card-short {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.3rem;
}

.instance-card-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-blue);
}

.instance-card-subtitle {
    margin-top: 0.4rem;
    color: var(--text-gray);
    font-size: 0.85rem;
}

/* -----------------------------------------------------------------------------
   Tarjeta KPI
   ----------------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.kpi-card {
    background: var(--white);
    border-left: 4px solid var(--primary-blue);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.kpi-label {
    color: var(--text-gray);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}

.kpi-value {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.8rem;
}

.kpi-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Reproductor de audio (informes)
   ----------------------------------------------------------------------------- */
.audio-player-wrapper {
    background: #f6f8fb;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.audio-player-label {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

.audio-player {
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Badges de rol
   ----------------------------------------------------------------------------- */
.rol-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rol-scout {
    background: #e3f0ff;
    color: var(--primary-blue);
}

.rol-secretario_tecnico {
    background: #fff4e0;
    color: #b35900;
}

.rol-director_deportivo {
    background: #ffe3e3;
    color: #9b0000;
}

/* Cuenta del usuario: integrada en la navegación, con acciones discretas. */
.sidebar-nav {
    min-height: 0;
    overflow-y: auto;
}

.sidebar-footer {
    padding: 12px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.sidebar-account {
    padding: 13px 12px 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
}

.sidebar-account-eyebrow,
.sidebar-account-label {
    color: rgba(255, 255, 255, .56);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.sidebar-account-identity {
    margin-top: 10px;
    min-width: 0;
}

.sidebar-account-person {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sidebar-account-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.sidebar-footer .user-info {
    margin: 0;
    min-width: 0;
}

.sidebar-account-name {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .81rem;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer .user-role {
    margin: -3px 0 0 41px;
    min-height: 17px;
}

.sidebar-footer .rol-badge {
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.sidebar-account-instance {
    margin-top: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-footer .user-instance {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 0;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
}

.sidebar-footer .user-instance::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #75c9a2;
}

.sidebar-account-actions {
    display: grid;
    gap: 2px;
    padding-top: 8px;
}

.sidebar-account-actions .btn-secondary,
.sidebar-account-actions .btn-logout {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: rgba(255, 255, 255, .76);
    font-family: var(--font-body, "Commissioner", Arial, sans-serif);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    transition: background .18s ease, color .18s ease;
}

.sidebar-account-actions .btn-secondary:hover,
.sidebar-account-actions .btn-logout:hover,
.sidebar-account-actions .btn-secondary:focus-visible,
.sidebar-account-actions .btn-logout:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    outline: none;
}

.sidebar-account-actions .btn-secondary:focus-visible,
.sidebar-account-actions .btn-logout:focus-visible {
    border-color: rgba(255, 255, 255, .72);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    cursor: pointer;
    width: 100%;
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--primary-blue);
}

/* =============================================================================
   ITER 1 — FICHA 360º DEL JUGADOR
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Sección genérica (título + subtítulo)
   ----------------------------------------------------------------------------- */
.seccion-header {
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--light-gray);
}

.seccion-titulo {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-blue);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.seccion-subtitulo {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0.3rem 0 0 0;
}

/* -----------------------------------------------------------------------------
   Cabecera del jugador
   ----------------------------------------------------------------------------- */
.player-header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    background: linear-gradient(135deg, var(--white) 0%, #f6f8fb 100%);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

.player-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-blue);
    background: #fff;
    flex-shrink: 0;
}

.player-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #ccc;
    background: var(--light-gray);
}

.player-info-wrapper {
    flex: 1;
}

.player-name {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0 0 0.6rem 0;
    font-size: 2rem;
}

.player-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1.2rem;
}

.player-info-item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.player-info-label {
    font-size: 0.7rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.player-info-value {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.95rem;
}

/* -----------------------------------------------------------------------------
   Card de informe individual
   ----------------------------------------------------------------------------- */
.informes-grid {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.informe-card {
    background: var(--white);
    border-left: 4px solid var(--primary-blue);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.informe-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.informe-badge {
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.informe-fecha {
    font-weight: 600;
    color: var(--dark-blue);
}

.informe-scout, .informe-visionado {
    color: var(--text-gray);
}

.informe-nota {
    margin-left: auto;
    font-weight: 700;
    color: var(--success-green);
    background: #eafaf1;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.informe-partido {
    font-size: 0.88rem;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
}

.informe-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.informe-tag {
    background: var(--light-gray);
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--dark-blue);
}

.informe-texto {
    margin: 0.5rem 0;
    color: #333;
    line-height: 1.5;
    background: #fafafa;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border-left: 3px solid #ddd;
}

.informe-mental {
    margin-top: 0.5rem;
    background: #f5e6ff;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* -----------------------------------------------------------------------------
   Flex resumen (radar + categorías)
   ----------------------------------------------------------------------------- */
.ficha-resumen-flex {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ficha-resumen-radar {
    flex: 1 1 420px;
    min-width: 320px;
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.ficha-resumen-cats {
    flex: 1 1 380px;
    min-width: 300px;
    background: var(--white);
    padding: 1rem 1.2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.radar-no-data {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 3rem 1rem;
}

/* -----------------------------------------------------------------------------
   Barras por categoría
   ----------------------------------------------------------------------------- */
.categories-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.cat-legends {
    display: flex;
    gap: 1.2rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    justify-content: flex-end;
}

.cat-legend-jugador { color: var(--primary-blue); }
.cat-legend-media   { color: #c8102e; }

.cat-block {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.5rem;
    align-items: center;
}

.cat-label {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.88rem;
}

.cat-bars {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cat-row-jugador, .cat-row-media {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 14px;
}

.cat-bar-jugador {
    height: 10px;
    background: var(--primary-blue);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cat-bar-media {
    height: 10px;
    background: #c8102e;
    border-radius: 3px;
    opacity: 0.7;
    transition: width 0.3s ease;
}

.cat-val {
    font-size: 0.75rem;
    color: var(--text-gray);
    min-width: 32px;
}

/* -----------------------------------------------------------------------------
   Bloque Wyscout — sin datos / métricas
   ----------------------------------------------------------------------------- */
.wyscout-no-data {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #fff8e1;
    border-left: 4px solid var(--warning-orange);
    padding: 1rem 1.2rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.wyscout-no-data-icon {
    font-size: 2rem;
}

.wy-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

.wy-metric-card {
    background: var(--white);
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wy-metric-label {
    color: var(--text-gray);
    font-size: 0.82rem;
}

.wy-metric-value {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--accent-blue);
}

.ficha-error {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    color: var(--text-gray);
}

/* =============================================================================
   ITER 1 — BUSCADOR EN HOME
   ============================================================================= */

.home-actividad-container {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.5rem 1.75rem 1.75rem;
}

.home-search-block {
    background: var(--white);
    padding: 1.2rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.home-search-bar {
    display: flex;
    gap: 0.5rem;
}

.home-search-input {
    flex: 1;
    padding: 0.6rem 0.9rem;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

.home-search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.home-search-btn {
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    border-radius: 6px;
    padding: 0 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.home-search-btn:hover {
    background: var(--dark-blue);
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.6rem;
}

.search-result-link {
    text-decoration: none;
    color: inherit;
}

.search-result-card {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    background: var(--white);
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--primary-blue);
}

.search-result-photo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--light-gray);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-nombre {
    font-weight: 600;
    color: var(--dark-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size: 0.78rem;
    color: var(--text-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-count {
    background: var(--primary-blue);
    color: var(--white);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.search-no-results {
    color: var(--text-gray);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* =============================================================================
   ITER 2 — BUSCADOR DE INFORMES (filtros + tabla + export)
   ============================================================================= */

.informes-filter-panel {
    background: var(--white);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.filter-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.filter-input {
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 0.9rem;
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.filter-actions {
    display: flex;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f0f0f0;
}

.btn-secondary-flat {
    background: transparent;
    border: 1px solid var(--text-gray);
    color: var(--text-gray);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-secondary-flat:hover {
    background: var(--light-gray);
}

.btn-excel {
    background: #1f7a4c;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-excel:hover {
    background: #166040;
}

/* =============================================================================
   ITER 3 — DASHBOARD HOME (charts grid)
   ============================================================================= */

.dashboard-charts {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.dashboard-chart-card {
    background: var(--white);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    height: 360px;               /* alto fijo — no crece ni encoge */
    overflow: hidden;
}

.dashboard-chart-card h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    .dashboard-charts {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   ITER 4 — SHORTLISTS (two-pane)
   ============================================================================= */

.sl-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}

@media (max-width: 800px) {
    .sl-layout { grid-template-columns: 1fr; }
}

.sl-left {
    background: var(--white);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    max-height: 720px;
    overflow-y: auto;
}

.sl-left-header {
    margin-bottom: 0.6rem;
}

.sl-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sl-list-item {
    padding: 0.6rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.12s ease;
}

.sl-list-item:hover {
    background: var(--light-gray);
}

.sl-list-item.active {
    background: rgba(26,58,92,0.08);
    border-left-color: var(--primary-blue);
}

.sl-list-name {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.92rem;
}

.sl-list-meta {
    color: var(--text-gray);
    font-size: 0.78rem;
}

.sl-create-block {
    margin-top: 1rem;
}

.sl-right {
    background: var(--white);
    border-radius: 10px;
    padding: 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    min-height: 400px;
}

.sl-right-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.sl-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-gray);
}

.sl-add-block {
    background: #f6f8fb;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.sl-add-result-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
}

.sl-add-result-row:last-child {
    border-bottom: none;
}

.remove-btn {
    background: transparent;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    transition: all 0.12s ease;
}

.remove-btn:hover {
    background: #e74c3c;
    color: white;
}

.card-extras {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.28rem;
    margin-left: auto;
}

/* =============================================================================
   ITER 5 — CUADRANTE
   ============================================================================= */

.cuad-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--white);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-top: 1rem;
}

.cuad-partidos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.6rem;
}

.cuad-partido-card {
    background: var(--white);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-left: 3px solid var(--primary-blue);
}

.cuad-partido-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.cuad-partido-fecha {
    font-weight: 700;
    color: var(--dark-blue);
}

.cuad-partido-liga {
    color: var(--text-gray);
}

.cuad-partido-jornada {
    background: var(--light-gray);
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    color: var(--text-gray);
}

.cuad-partido-equipos {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cuad-team {
    flex: 0 1 auto;
}

.cuad-vs {
    color: var(--text-gray);
    font-weight: 400;
    font-size: 0.85rem;
}

.cuad-visionado-row {
    background: var(--white);
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* =============================================================================
   ITER 6 — OFRECIMIENTOS
   ============================================================================= */

.ofr-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 1000px) {
    .ofr-layout { grid-template-columns: 1fr; }
}

.ofr-table {
    background: var(--white);
    border-radius: 10px;
    padding: 0.6rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    max-height: 700px;
    overflow-y: auto;
}

.ofr-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    border-radius: 6px;
    border-bottom: 1px solid #eee;
    transition: background 0.12s ease;
}

.ofr-row:hover {
    background: rgba(26,58,92,0.04);
}

.ofr-row:last-child {
    border-bottom: none;
}

.ofr-priority-badge {
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    text-transform: uppercase;
    min-width: 56px;
    text-align: center;
}

.ofr-asignados {
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.2;
}

.ofr-fecha {
    color: var(--text-gray);
    font-size: 0.74rem;
    margin-top: 0.2rem;
}

.ofr-detail {
    background: var(--white);
    border-radius: 10px;
    padding: 1.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    min-height: 300px;
}

.ofr-asign-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.ofr-asign-row:last-child {
    border-bottom: none;
}

.ofr-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-gray);
}

/* =============================================================================
   ITER 7 — COMPARADOR
   ============================================================================= */

.comp-search-block {
    background: var(--white);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.comp-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.comp-player-col {
    background: var(--white);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
    text-align: center;
}

.comp-player-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-blue);
    margin: 0 auto;
    display: block;
}

.comp-player-name {
    color: var(--primary-blue);
    margin: 0.5rem 0 0.4rem 0;
    font-size: 1.1rem;
}

.comp-kpi-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.6rem;
    text-align: left;
}

.comp-kpi-grid > div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding: 0.2rem 0;
}

.comp-kpi-label {
    color: var(--text-gray);
    font-size: 0.78rem;
}

.comp-kpi-value {
    font-weight: 600;
    color: var(--dark-blue);
    font-size: 0.85rem;
}

.comp-metrics-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.comp-metrics-table th,
.comp-metrics-table td {
    padding: 0.5rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 0.88rem;
}

.comp-metrics-table th {
    background: var(--primary-blue);
    color: white;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.comp-metrics-table tr:last-child td {
    border-bottom: none;
}

.comp-metrics-table tr:nth-child(even) {
    background: #fafbfd;
}

/* Botonera de posiciones dentro de cada columna de jugador */
.comp-pos-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin: 0.5rem 0 0.7rem;
}

.comp-pos-btn {
    background: #f0f3f8;
    color: var(--primary-blue);
    border: 1.5px solid #c8d4e3;
    border-radius: 20px;
    padding: 0.22rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.comp-pos-btn:hover {
    background: #dce6f5;
    border-color: var(--primary-blue);
}

.comp-pos-btn.active {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}

/* Fila de 3 radares comparativos */
.comp-radars-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.comp-radar-card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    min-width: 0;          /* permite encoger por debajo del contenido (SVG) en grid */
    display: flex;
    flex-direction: column;
}

/* Cabecera (barra de título) de cada radar, separada del gráfico. */
.comp-radar-block {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.comp-radar-title {
    background: var(--primary-blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    padding: 0.55rem 0.6rem;
    letter-spacing: 0.02em;
    border-radius: 10px 10px 0 0;   /* esquinas superiores redondeadas (sin overflow:hidden) */
}
/* El cuerpo tiene una ALTURA DEFINIDA (no min-height) para que el gráfico,
   con width/height 100% + autosize, se dimensione al contenedor y no caiga
   al tamaño por defecto de plotly (700×450) desbordando la tarjeta. */
.comp-radar-body {
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem;
}
.comp-radar-body > div {   /* dash-graph: que ocupe todo el cuerpo */
    width: 100%;
    height: 100%;
}

.comp-radar-empty {
    color: #bbb;
    font-size: 0.82rem;
    text-align: center;
    padding: 2rem;
}

/* Radar físico único: contenedor de centrado (la tarjeta va dentro). */
.comp-radar-single {
    max-width: 520px;
    margin: 0 auto;
}

/* Cabecera de subsección de radares: título + subtítulo en un solo contenedor,
   con título grande y en negrita (legible sobre cualquier fondo). */
.comp-sec-header {
    background: #eef4fb;
    border-left: 5px solid var(--primary-blue);
    border-radius: 8px;
    padding: 0.75rem 1.1rem;
    margin: 0 0 1.1rem 0;
}
.comp-sec-title {
    color: var(--primary-blue);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}
.comp-sec-sub {
    color: #5a6b7a;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.35;
}

/* Cabecera de subsección reutilizable (p. ej. panel de Dirección): contenedor
   claro con título destacado en negrita, legible sobre fondos oscuros. */
.subsec-header {
    background: #eef4fb;
    border-left: 5px solid var(--primary-blue);
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    margin: 2rem 0 1rem 0;
}
.subsec-title {
    color: var(--primary-blue);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.2rem 0;
    line-height: 1.2;
}
.subsec-sub {
    color: #5a6b7a;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.35;
}

/* ===== Shortlists: botones padre App Scouting / Olocip ===== */
.sl-modo-btns {
    display: flex; gap: 0.6rem; margin: 0.4rem 0 0.6rem;
    justify-content: center;
}
.sl-modo-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.55rem; min-width: 175px;
    border: 1px solid #d8e0ea; background: #fff; color: #33454c;
    padding: 0.5rem 1.5rem; border-radius: 9px; font-weight: 700;
    font-size: 0.92rem; cursor: pointer; transition: all .15s;
}
.sl-modo-btn:hover { border-color: var(--primary-blue); background: #eef4fb; }
.sl-modo-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
.sl-modo-logo { height: 22px; width: auto; object-fit: contain; }
.sl-modo-logo-solo { height: 26px; }   /* logo Olocip solo: centrado y algo mayor */
.sl-modo-hint {
    text-align: center; color: #64748b; font-size: 0.85rem;
    font-style: italic; margin: 0 0 1rem;
}

/* ===== Shortlists: controles de la vista Olocip ===== */
.sl-olo-controls {
    display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.6rem;
}
/* Fila de bloques de filtro independientes (estilo "tarjeta" como Dispersiones) */
.sl-olo-filtros-row {
    display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-start;
}
/* Cada filtro en su propio contenedor corto; acotados para que, al envolver,
   no se estire uno solo a todo el ancho (quedan uniformes y secuenciales). */
.sl-olo-filtros-row .disp-prov-block { max-width: 300px; }
.sl-olo-block-perfil .disp-prov-body { gap: 0.6rem; }
/* Grupos de filtro por BOTONES (etiqueta + botones clicables) */
.sl-olo-fgrp { display: flex; flex-direction: column; gap: 0.28rem; }
.sl-olo-flbl { font-size: 0.7rem; font-weight: 700; color: #64748b;
               text-transform: uppercase; letter-spacing: 0.03em; }
.sl-olo-fbtns { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sl-olo-fbtn {
    border: 1px solid #d8e0ea; background: #fff; color: #33454c; cursor: pointer;
    padding: 0.34rem 0.7rem; border-radius: 8px; font-weight: 600;
    font-size: 0.78rem; transition: all .12s; white-space: nowrap;
}
.sl-olo-fbtn:hover { border-color: var(--primary-blue); background: #eef3f9; }
.sl-olo-fbtn.active, .sl-olo-fbtn.active:hover {
    background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);
}
.sl-olo-min-input { max-width: 90px; }
/* Escudo del Dépor junto a cada opción "Fichar …" */
.sl-olo-fichar-lbl { display: inline-flex; align-items: center; gap: 0.3rem; }
.sl-olo-escudo-opt { height: 15px; width: auto; vertical-align: middle; }
/* Campograma con la métrica (Valor/90' · Acumulado) esquinada arriba-derecha */
.sl-olo-campo-wrap { position: relative; }
.sl-olo-metrica-corner {
    position: absolute; top: 0; right: 0; z-index: 5;
    display: inline-flex; gap: 0.3rem;
}
.sl-olo-row { display: flex; align-items: center; gap: 0.7rem;
              margin-bottom: 0.7rem; flex-wrap: wrap; }
.sl-olo-lbl { font-weight: 700; color: var(--primary-blue); font-size: 0.8rem;
              text-transform: uppercase; letter-spacing: 0.03em; min-width: 64px; }
.sl-olo-valor-btns, .sl-olo-presets { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.sl-olo-valor-btn, .sl-olo-preset-btn {
    border: 1px solid #d8e0ea; background: #fff; color: #33454c; cursor: pointer;
    padding: 0.4rem 0.85rem; border-radius: 8px; font-weight: 600; font-size: 0.82rem;
    transition: all .15s;
}
.sl-olo-valor-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
.sl-olo-preset-btn:hover { border-color: #1f9d57; background: #e9f7ef; color: #1f9d57; }
/* Preset activo: iluminado en azul oscuro (se mantiene aunque se pase el ratón) */
.sl-olo-preset-btn.active, .sl-olo-preset-btn.active:hover {
    background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);
}
.sl-olo-dd { flex: 1; min-width: 220px; }
.sl-olo-filtros {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem 1rem; align-items: end; margin-top: 0.2rem;
}
.sl-olo-f { display: flex; flex-direction: column; gap: 0.25rem; }
.sl-olo-f > label { font-size: 0.78rem; color: #5a6b7a; font-weight: 600; }
.sl-olo-f-edad { grid-column: span 2; min-width: 240px; }
.sl-olo-chk { display: flex; flex-direction: column; gap: 0.2rem;
              font-size: 0.82rem; color: #33454c; }

/* ===== Campograma Olocip: nombre / (equipo + valor + percentil) / aviso ===== */
.campo-row-olo { display: flex; flex-direction: column; gap: 0.05rem; }
.campo-row-olo .campo-cell-name { display: block; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.campo-olo-line2 { display: flex; align-items: center;
                   justify-content: space-between; gap: 0.3rem; }
.campo-olo-line2 .campo-cell-team { flex: 1; min-width: 0; white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
.campo-olo-line2 .campo-cell-escudo { height: 16px; max-width: 22px; flex: 0 0 auto;
                   justify-self: auto; }
.campo-olo-meta { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.campo-olo-val { font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700;
                 color: var(--primary-blue); font-size: 0.95rem; }
.campo-olo-pct { background: var(--primary-blue); color: #fff; border-radius: 6px;
                 padding: 0.05rem 0.32rem; font-size: 0.68rem; font-weight: 700; }
.campo-olo-warn { display: block; color: #c0392b; font-size: 0.62rem;
                  font-style: italic; }

@media (max-width: 900px) {
    .comp-radars-row {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   FICHA v2 — Scouting card
   ============================================================================= */

.ficha-search-inner {
    max-width: 700px;
}

/* ---- Cabecera ------------------------------------------------------------- */
.pf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--white);
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    flex-wrap: wrap;
    border-left: 5px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Estado de salud: disponible (verde) */
.pf-header-disponible {
    border-left-color: #27ae60;
    background: linear-gradient(135deg, rgba(39,174,96,0.06) 0%, var(--white) 55%);
}

/* Estado de salud: lesionado (rojo) */
.pf-header-lesionado {
    border-left-color: #c0392b;
    background: linear-gradient(135deg, rgba(192,57,43,0.07) 0%, var(--white) 55%);
}

/* Chip de estado bajo el nombre del jugador */
.pf-header-status-chip {
    display: block;
    width: fit-content;
    padding: 0.22rem 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
}

.pf-header-disponible .pf-header-status-chip {
    background: #d4efdf;
    color: #1a6b35;
    border: 1.5px solid #27ae60;
}

.pf-header-lesionado .pf-header-status-chip {
    background: #fadbd8;
    color: #922b21;
    border: 1.5px solid #c0392b;
}

.pf-header-left {
    display: flex;
    gap: 1.3rem;
    align-items: center;
    min-width: 0;
}

.pf-header-photo {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eef1f5;
    background: #f5f5f5;
    flex-shrink: 0;
}

.pf-header-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
}

.pf-header-name {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0 0 0.2rem 0;
    line-height: 1.05;
    min-width: 0;                /* permite que un nombre largo ceda ancho y parta en 2 líneas */
    overflow-wrap: anywhere;
}

/* Contenedor de nombre + club + posición + estado */
.pf-header-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;                /* la columna de identidad puede encoger (nombre largo) */
}

.pf-header-club {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 0.9rem;
}

.pf-club-escudo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.pf-header-position {
    display: block;
    width: fit-content;
    background: #e2ecf7;
    color: var(--primary-blue);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.22rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #c2d6ed;
}

.pf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.pf-tag {
    background: #eef3f9;
    color: var(--primary-blue);
    border: 1px solid #d6e2ef;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.pf-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pf-stat-box {
    text-align: center;
    min-width: 130px;
}

.pf-stat-label {
    color: var(--text-gray);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pf-stat-value {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.1;
}

.pf-stat-sub {
    color: #aaa;
    font-size: 0.72rem;
}

.pf-header-btn {
    background: var(--primary-blue);
    color: var(--white);
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.pf-header-btn:hover {
    background: var(--dark-blue);
}

/* ---- Cabecera expandida (player_header_v2) -------------------------------- */

/* Fila 1: foto · identidad · KPIs */
.pfh-top-row {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    width: 100%;
}

/* Nombre + bandera en línea */
.pfh-name-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
    min-width: 0;                /* deja que el H1 del nombre encoja y parta en 2 líneas */
}

/* Bandera */
.pfh-flag {
    height: 22px;
    width: auto;
    border-radius: 3px;
    border: 1px solid #dde6f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.13);
    flex-shrink: 0;
}

/* TransferRoom — logo (arriba) + badge "AVAILABLE" + asking price, a la derecha de la bandera */
.pfh-avail {
    display: inline-flex;
    flex-direction: column;      /* logo TransferRoom ARRIBA, badge AVAILABLE debajo */
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.2rem;
}
.pfh-avail-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pfh-avail-logo {
    height: 13px;                /* logo pequeño de TransferRoom sobre el badge AVAILABLE */
    width: auto;
    display: block;
    object-fit: contain;
}
.pfh-avail-badge {
    background: #16a34a;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.pfh-asking {
    color: #15803d;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
/* Potencial entre paréntesis junto al rating TransferRoom (más pequeño/suave) */
.pfh-rating-pot {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.62em;
}

/* Separador y nombre de competición junto al equipo */
.pfh-sep {
    color: #ccc;
    font-weight: 400;
    margin: 0 0.1rem;
}

.pfh-competition {
    color: var(--dark-blue);
    font-size: 0.82rem;
    font-weight: 500;
}

/* Pill de cesión: owner_team ≠ current_team en Wyscout → jugador cedido */
.pfh-loan-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    background: #fff4e5;
    color: #b15c00;
    border: 1px solid #ffd8a8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Posición + chip de estado en fila */
.pfh-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}

/* Desglose de posiciones (Wyscout · % de partidos) bajo las badges */
.pfh-pos-desglose {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #5b6b7a;
}

/* Desglose multi-posición v2 (Wyscout · % de minutos + minutos) — chips */
.pfh-pos-desglose-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.pfh-pos-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background: #f1f5fa;
    border: 1px solid #dfe7f0;
    border-radius: 999px;
    padding: 0.16rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.pfh-pos-chip-lbl {
    font-weight: 700;
    color: var(--primary-blue);
}
.pfh-pos-chip-pct {
    font-weight: 700;
    color: #2f7ed8;
}
.pfh-pos-chip-min {
    color: #7c8a98;
    font-size: 0.74rem;
}

/* Los tres KPIs grandes, pegados al extremo derecho */
.pfh-kpis {
    display: flex;
    gap: 1.2rem;
    margin-left: auto;
    align-items: flex-start;
    flex-shrink: 0;
}

/* Valor de contrato: algo más pequeño para que la fecha quepa bien */
.pfh-contract-val {
    font-size: 1.6rem !important;
    letter-spacing: 0.02em;
}

/* Fila 2: rejilla de datos personales */
.pfh-data-grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e8eef5;
}

.pfh-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.6rem;
    border-right: 1px solid #e8eef5;
    min-width: 0;
}

.pfh-cell:last-child {
    border-right: none;
}

.pfh-cell-label {
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8899aa;
    font-weight: 700;
    white-space: nowrap;
}

.pfh-cell-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Estadísticas personales en el espacio central de la cabecera */
.pfh-inline-stats {
    flex: 1 0 auto;              /* crece para ocupar el centro, pero NO encoge por debajo de su
                                   contenido (antes 'flex: 1' colapsaba y el texto se solapaba
                                   con los KPIs de la derecha) */
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    padding: 0 1.4rem;
    border-left:  1px solid #e8eef5;
    border-right: 1px solid #e8eef5;
}

.pfh-stat-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.pfh-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-blue);       /* accent-blue */
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 100px;   /* alinea todos los valores en la misma columna */
}

.pfh-stat-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark-blue);
    white-space: nowrap;
}

/* ---- Botonera vertical de subsecciones ----------------------------------- */
.pf-sidebar-tabs {
    flex: 0 0 155px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: sticky;
    top: 0.5rem;
    align-self: flex-start;
}

/* Los botones dentro del sidebar son bloques completos, no flex items */
.pf-sidebar-tabs .pf-tab-btn {
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1.05rem;
    font-size: 0.9rem;
    border-radius: 10px;
    line-height: 1.2;
}

@media (max-width: 900px) {
    .pfh-top-row    { flex-wrap: wrap; }
    .pfh-kpis       { margin-left: 0; }
    .pfh-inline-stats { border-left: none; border-right: none;
                        padding: 0.5rem 0; flex-direction: row;
                        flex-wrap: wrap; gap: 0.4rem 1.2rem; }
    .pfh-stat-label { flex: 0 0 auto; }
    .pf-sidebar-tabs { flex-direction: row; flex: 0 0 auto;
                       width: 100%; position: static; }
    .pf-sidebar-tabs .pf-tab-btn { flex: 1; }
}

/* ---- Tarjetas resumen ---------------------------------------------------- */
.pf-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 850px) {
    .pf-cards-row { grid-template-columns: 1fr; }
}

.pf-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    overflow: hidden;
}

.pf-card-title {
    background: #f4f6f9;
    color: var(--dark-blue);
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #e8ecf1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pf-card-body {
    padding: 0.6rem 1.3rem 1rem 1.3rem;
}

.pf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f0f2f5;
}

.pf-row:last-child {
    border-bottom: none;
}

.pf-row-label {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.pf-row-value {
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 0.95rem;
}

.pf-card-divider {
    height: 1px;
    background: #e8ecf1;
    margin: 0.6rem 0;
}

/* ---- Barras de rendimiento ---------------------------------------------- */
.pf-bar-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
}

.pf-bar-label {
    color: var(--text-gray);
    font-size: 0.85rem;
    flex: 0 0 175px;
}

.pf-bar-track {
    flex: 1;
    height: 9px;
    background: #eef1f5;
    border-radius: 999px;
    overflow: hidden;
}

.pf-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.pf-bar-value {
    flex: 0 0 44px;
    text-align: right;
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 0.85rem;
}

/* =============================================================================
   SHORTLISTS — botones de scout, filtros y campograma
   ============================================================================= */

/* Contenedor independiente de cada sección (scouts / shortlists / filtros) */
.sl-section {
    background: var(--white);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    margin-bottom: 0.8rem;
}

.sl-scouts-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.sl-scout-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.sl-scout-btn {
    background: var(--white);
    border: 1px solid #d6e2ef;
    color: var(--primary-blue);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.sl-scout-btn:hover {
    background: #eef3f9;
}

.sl-scout-btn.active {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
}

/* ---- Barra de filtros sobre el campograma ------------------------------- */
.campo-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0.8rem;
}

.campo-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
}

.campo-filter-btn {
    background: var(--white);
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}

.campo-filter-btn:hover {
    background: #eef3f9;
}

.campo-filter-btn.active {
    background: var(--success-green);
    border-color: var(--success-green);
    color: var(--white);
}

.campo-slider-wrap {
    background: var(--white);
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    padding: 0.7rem 1.1rem 0.3rem 1.1rem;
    flex: 1 1 260px;
    min-width: 240px;
}

.campo-slider-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.3rem;
}

.campo-count {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
}

/* ---- Campograma (campo + tarjetas de posición) -------------------------- */
.campo {
    background: linear-gradient(160deg, #1f4b7a 0%, var(--dark-blue) 100%);
    border-radius: 12px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
}

/* Línea de medio campo (vertical — campograma horizontal) */
.campo::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 2px;
    background: rgba(255,255,255,0.13);
}

/* Círculo central */
.campo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(255,255,255,0.13);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Formación 4-2-3-1 — orientación HORIZONTAL: columnas de defensa
   (izquierda) a ataque (derecha). Cada `.campo-fila` es una columna. */
.campo-formacion {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.campo-fila {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1;
    justify-content: center;
}

.campo-fila .campo-card {
    width: 100%;
}

/* Defensa (4 cards) y línea de 3: extremos repartidos arriba/abajo, de modo
   que las bandas queden a la misma altura que los laterales. */
.campo-fila-4,
.campo-fila-3 {
    justify-content: space-between;
}

/* Doble pivote: pivote arriba-izquierda y box to box abajo-derecha
   (posición algo más adelantada). */
.campo-fila-2 {
    flex: 1.15;
}

.campo-fila-2 .campo-card {
    width: 76%;
}

.campo-fila-2 .campo-card:first-child {
    align-self: flex-start;
}

.campo-fila-2 .campo-card:last-child {
    align-self: flex-end;
}

@media (max-width: 900px) {
    .campo-formacion { flex-wrap: wrap; }
    .campo-fila { flex: 1 1 45%; }
}

.campo-card {
    background: rgba(255,255,255,0.97);
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
    overflow: hidden;
}

.campo-card-header {
    background: #e9edf2;
    text-align: center;
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    color: var(--primary-blue);
    padding: 0.45rem 0.4rem;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.campo-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    padding: 0.32rem 0.6rem;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.campo-row-head {
    background: #fafbfd;
}

.campo-row-head .campo-cell {
    font-size: 0.68rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.campo-cell {
    font-size: 0.8rem;
    color: var(--dark-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campo-cell-name {
    font-weight: 600;
}

.campo-cell-team {
    color: var(--text-gray);
}

/* Escudo del club en la tarjeta del campograma (sustituye al nombre del equipo
   para dar más espacio al nombre del jugador). Si no hay escudo, se muestra el
   nombre del equipo acotado. */
.campo-cell-escudo {
    height: 18px; width: auto; max-width: 26px; object-fit: contain;
    display: block; justify-self: end;
}
.campo-row .campo-cell-team { max-width: 96px; justify-self: end; }

.campo-row-link {
    text-decoration: none;
    display: block;
}

.campo-row-link:hover .campo-row {
    background: #eef3f9;
}

.campo-row-link:last-child .campo-row {
    border-bottom: none;
}

/* 5 filas visibles (~29px cada una); scroll si hay más */
.campo-card-scroll {
    max-height: 146px;
    overflow-y: auto;
}

.campo-card-scroll::-webkit-scrollbar {
    width: 6px;
}

.campo-card-scroll::-webkit-scrollbar-thumb {
    background: #c5cdd8;
    border-radius: 3px;
}

.campo-empty {
    padding: 0.6rem;
    text-align: center;
    color: #aaa;
    font-size: 0.78rem;
    font-style: italic;
}

.sl-global-msg {
    color: var(--primary-blue);
    font-size: 0.85rem;
    min-height: 1.1rem;
    margin-bottom: 0.4rem;
}

/* ---- Chips horizontales de shortlists ----------------------------------- */
.sl-chips-row {
    margin: 0.2rem 0 0.7rem;
}

.sl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sl-chips-hint {
    color: var(--text-gray);
    font-style: italic;
    font-size: 0.88rem;
}

.sl-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid #d6e2ef;
    border-radius: 8px;
    padding: 0.42rem 0.7rem 0.42rem 0.9rem;
    cursor: pointer;
    transition: all 0.12s ease;
}

.sl-chip:hover {
    background: #eef3f9;
}

.sl-chip.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.sl-chip-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-blue);
}

.sl-chip.active .sl-chip-name {
    color: var(--white);
}

.sl-chip-count {
    background: var(--primary-blue);
    color: var(--white);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.sl-chip.active .sl-chip-count {
    background: var(--white);
    color: var(--primary-blue);
}

/* ---- Crear lista (compacto) --------------------------------------------- */
.sl-create-inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.8rem;
    max-width: 440px;
}

.sl-create-inline .filter-input {
    flex: 1;
}

/* ---- Cabecera de la lista activa ---------------------------------------- */
.sl-campo-header {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 0.3rem 0 0.1rem;
}

.sl-campo-header-count {
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* =============================================================================
   FICHA v2 — pestañas + columna resumen fija + pestaña informes
   ============================================================================= */

.pf-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    flex-wrap: wrap;
}

.pf-tab-btn {
    flex: 1;
    background: var(--white);
    border: 1px solid #d6e2ef;
    color: var(--primary-blue);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.12s ease;
}

.pf-tab-btn:hover { background: #eef3f9; }

.pf-tab-btn.active {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
}

.pf-main-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1rem;
}

@media (max-width: 850px) {
    .pf-main-row { flex-direction: column; }
}

/* Resumen del jugador — columna izquierda, estrecha y fija */
.pf-summary-col {
    flex: 0 0 300px;
    position: sticky;
    top: 0.5rem;
}

/* Tarjeta «Resumen del jugador» — algo más alta para equilibrar la ficha */
.pf-summary-col .pf-card {
    min-height: 480px;
}

@media (max-width: 850px) {
    .pf-summary-col { flex: 1 1 auto; width: 100%; position: static; }
}

.pf-tab-col {
    flex: 1;
    min-width: 0;
}

/* Línea "N con Fichar Dépor" bajo la nota media */
.pf-stat-sub-fd {
    color: var(--success-green);
    font-weight: 700;
}

/* ---- Filtros de la pestaña Informes ---- */
.pf-inf-filtros {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.pf-inf-flt {
    flex: 1;
    min-width: 180px;
}

.pf-inf-count {
    color: var(--text-gray);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* ---- Contenedor de informes: tamaño fijo + scroll vertical ---- */
.pf-informes-scroll {
    max-height: 620px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-right: 0.3rem;
}

.pf-informes-scroll::-webkit-scrollbar { width: 7px; }
.pf-informes-scroll::-webkit-scrollbar-thumb {
    background: #c5cdd8;
    border-radius: 4px;
}

/* ---- Placeholder de pestañas (Lesiones / IA) ---- */
.pf-tab-placeholder {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 3rem 1.5rem;
    text-align: center;
}

/* ---- informe_card — badge de valoración + fila meta ---- */
.informe-valoracion {
    color: var(--white);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.14rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.informe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.45rem 0;
}

/* =============================================================================
   EVALUACIÓN IA — percentiles olocip (grid 3x2)
   ============================================================================= */

.olo-wrapper {
    margin-top: 0;
}

.olo-grid {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 0.8rem;
    align-items: stretch;
}

/* Una sola métrica (valor por 90 min): etiqueta de fila + 1 celda */
.olo-grid-1m {
    grid-template-columns: 200px 1fr;
}

/* Aviso de muestra de minutos reducida (jugador <40% de su liga) */
.olo-aviso-minutos {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff4e5;
    color: #b15c00;
    border: 1px solid #ffd8a8;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

/* =============================================================================
   INFORMES — panel de percentil por scout (pestaña INFORMES de la ficha)
   ============================================================================= */
.inf-pc-panel {
    background: #f4f7fb;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.9rem;
}
.inf-pc-title {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.inf-pc-sub {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin: 0.1rem 0 0.6rem;
}
.inf-pc-pos-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.inf-pc-pos-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-gray);
}
.inf-pc-pos-btns {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.inf-pc-pos-btn {
    border: 1px solid #cdd7e3;
    background: #fff;
    color: var(--dark-blue);
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.inf-pc-pos-btn.active {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}
.inf-pc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.6rem;
}
.inf-pc-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.6rem 0.8rem;
    text-align: center;
}
.inf-pc-scout {
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.inf-pc-num {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 800;
    font-size: 2rem;
}
.inf-pc-unit {
    font-size: 0.72rem;
    color: var(--text-gray);
    margin-left: 0.15rem;
}
.inf-pc-unico {
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
    padding: 0.4rem 0;
}
.inf-pc-foot {
    font-size: 0.74rem;
    color: var(--text-gray);
    margin-top: 0.3rem;
}

/* Agrupación de informes por scout: cabecera con percentil + informes debajo */
.inf-grp { margin-bottom: 1.1rem; }
.inf-grp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 0.9rem;
}
.inf-grp-scout {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}
.inf-grp-meta { font-size: 0.76rem; opacity: 0.92; }
.inf-grp-pct {
    background: #fff;
    border-radius: 8px;
    padding: 0.1rem 0.55rem;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}
.inf-grp-pct-num {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 800;
    font-size: 1.7rem;
}
.inf-grp-pct-unit { font-size: 0.66rem; color: var(--text-gray); margin-left: 0.1rem; }

/* Badge de percentil clicable → abre el modal de ranking del pool del scout. */
.inf-grp-pct-btn {
    border: 1px solid #e3e9f1;
    cursor: pointer;
    transition: box-shadow .12s, transform .12s, border-color .12s;
}
.inf-grp-pct-btn:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 2px 10px rgba(26,58,92,.18);
    transform: translateY(-1px);
}
.inf-grp-pct-btn:active { transform: translateY(0); }

/* Modal de ranking del pool del scout (contexto del percentil de Informes). */
.inf-rank-box { max-width: 640px; width: 94%; }
.inf-rank-inner { padding: 0.5rem 0.4rem 0.2rem; }
.inf-rank-sub { font-size: 0.9rem; color: var(--text-gray); margin: 0 0.2rem 0.6rem; }
.inf-rank-sub strong { color: var(--primary-blue); }
.inf-rank-table { font-size: 0.86rem; }
.inf-rank-row {
    display: grid;
    grid-template-columns: 26px 34px minmax(0,1fr) minmax(0,1fr) 40px 52px 44px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.35rem;
    border-bottom: 1px solid #eef2f6;
    border-radius: 6px;
    transition: background .12s, box-shadow .12s;
    color: inherit;
    text-decoration: none;
}
.inf-rank-row:not(.inf-rank-hrow) { cursor: pointer; }
.inf-rank-hrow {
    font-weight: 700;
    color: var(--text-gray);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 2px solid #e3e9f1;
    position: sticky; top: 0; background: var(--white); z-index: 1;
}
.inf-rank-scroll { max-height: 56vh; overflow-y: auto; }
.inf-rank-pos { text-align: center; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.inf-rank-foto-c { display: flex; align-items: center; justify-content: center; }
.inf-rank-foto { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #eef2f6; }
.inf-rank-foto-ph { display: inline-block; }
.inf-rank-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inf-rank-team { color: var(--text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inf-rank-n    { text-align: center; font-variant-numeric: tabular-nums; }
.inf-rank-nota { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.inf-rank-pct  { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.inf-rank-row-target {
    background: #eaf4ff;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #9cc4ee;
}
.inf-rank-row-target .inf-rank-name { color: var(--primary-blue); }
/* Interactividad al pasar el ratón (mismo lenguaje que las tarjetas de Asignaciones) */
.inf-rank-row:not(.inf-rank-hrow):hover { background: #eef5ff; box-shadow: inset 0 0 0 1px #cdddf2; }
.inf-rank-row-target:hover { background: #dcebff; box-shadow: inset 0 0 0 1px #9cc4ee; }
.inf-rank-empty { padding: 1.2rem; text-align: center; color: var(--text-gray); }

/* === ASIGNACIONES — listado priorizado de ofrecimientos asignados === */
.asig-page { padding: 0.4rem 0.2rem; }
.asig-header { background: linear-gradient(90deg, #14304d, var(--primary-blue)); border-radius: 10px; padding: 0.95rem 1.3rem; margin-bottom: 1rem; }
.asig-title { margin: 0 0 0.25rem; color: #fff; }
.asig-intro { color: #fff; margin: 0; max-width: none; }
/* Cabecera de sección unificada (banda azul corporativa, igual que Asignaciones).
   Solo estética: NO altera ningún cálculo ni funcionalidad de las secciones. */
.sec-header { background: linear-gradient(90deg, #14304d, var(--primary-blue)); border-radius: 10px; padding: 0.95rem 1.3rem; margin-bottom: 1rem; }
.sec-title { margin: 0 0 0.25rem; color: #fff; }
.sec-sub { color: #fff; margin: 0; max-width: none; }
.asig-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.asig-ctl-label { font-size: 0.74rem; color: var(--text-gray); margin-right: 0.4rem; text-transform: uppercase; letter-spacing: .03em; }
.asig-scout-wrap, .asig-prio-wrap { display: flex; align-items: center; }
.asig-scout-dd { min-width: 230px; }
.asig-prio-dd { min-width: 190px; }
.asig-dim-toggle { display: inline-flex; border: 1px solid #d8e0ea; border-radius: 9px; overflow: hidden; }
.asig-dim-btn { border: none; background: #fff; color: #33454c; cursor: pointer; padding: 0.5rem 1rem; font-weight: 700; font-size: 0.86rem; transition: background .12s; }
.asig-dim-btn:hover { background: #eef4fb; }
.asig-dim-btn.active { background: var(--primary-blue); color: #fff; }
/* Tres columnas tipo tarjeta (estilo Comparador): Top+ · Datos · Físico */
.asig-cols { display: grid; gap: 1rem; align-items: start; }
.asig-cols-3 { grid-template-columns: repeat(3, 1fr); }
.asig-col { min-width: 0; background: #f6f8fc; border: 1px solid #e6ecf3;
            border-left: 4px solid var(--primary-blue); border-radius: 10px; padding: 0.7rem 0.8rem; }
.asig-col-plus   { border-left-color: #16a34a; }
.asig-col-datos  { border-left-color: #2563eb; }
.asig-col-fisico { border-left-color: #ea7a1c; }
.asig-col-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 800;
                  color: #223036; font-size: 0.84rem; letter-spacing: .02em; }
.asig-col-title::before { content: ""; width: 13px; height: 13px; border-radius: 3px;
                          background: var(--primary-blue); flex: none; }
.asig-ct-plus::before   { background: #16a34a; }
.asig-ct-datos::before  { background: #2563eb; }
.asig-ct-fisico::before { background: #ea7a1c; }
.asig-col-meta { color: var(--text-gray); font-size: 0.76rem; margin: 0.35rem 0 0.6rem 0.05rem; }
.asig-prio-pills { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.asig-pill { border: 1px solid #d8e0ea; background: #fff; color: #33454c; cursor: pointer;
             padding: 0.4rem 0.85rem; border-radius: 999px; font-weight: 700;
             font-size: 0.8rem; transition: background .12s, color .12s, border-color .12s; }
.asig-pill:hover { border-color: var(--primary-blue); }
.asig-pill.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
/* Universo: botones interactivos. TransferRoom en verde (su color) + logo. */
.asig-univ-wrap { display: flex; align-items: center; }
.asig-univ-btns { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.asig-univ-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid #d8e0ea; background: #fff; color: #33454c; cursor: pointer;
    padding: 0.5rem 0.9rem; border-radius: 9px; font-weight: 700; font-size: 0.86rem;
    transition: background .12s, color .12s, border-color .12s;
}
.asig-univ-btn:hover { border-color: var(--primary-blue); background: #eef4fb; }
.asig-univ-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
.asig-univ-tr { border-color: #1f9d57; color: #1f9d57; }
.asig-univ-tr:hover { border-color: #1f9d57; background: #e9f7ef; }
.asig-univ-tr.active { background: #1f9d57; color: #fff; border-color: #1f9d57; }
.asig-tr-logo { height: 20px; width: auto; }
/* Solo el logo de TransferRoom se vuelve blanco al activarse (sobre verde).
   El escudo del Dépor (Ofrecimientos) se muestra SIEMPRE en color. */
.asig-univ-tr.active .asig-tr-logo { filter: brightness(0) invert(1); }
.asig-controls-center { justify-content: center; }
.asig-controls-center .asig-univ-btn { padding: 0.6rem 1.4rem; font-size: 0.95rem; }
@media (max-width: 1100px) { .asig-cols-3 { grid-template-columns: 1fr; } }
.asig-list { display: flex; flex-direction: column; gap: 4px; max-height: 66vh; overflow-y: auto; padding-right: 4px; }
.asig-row { display: grid; grid-template-columns: 24px 34px minmax(0,1fr) auto; align-items: center; gap: 0.45rem; padding: 0.36rem 0.5rem; border: 1px solid #e9eef4; border-radius: 9px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .12s, transform .12s, border-color .12s; }
.asig-score2 { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.08; font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.asig-sl { font-size: 0.58rem; font-weight: 700; color: var(--text-gray); }
.asig-row:hover { background: #eef5ff; border-color: var(--primary-blue); box-shadow: 0 3px 14px rgba(26,58,92,.16); transform: translateY(-1px); }
.asig-col-plus  .asig-row:hover { background: #e9f9ef; border-color: #15803d; }
.asig-col-fisico .asig-row:hover { background: #fdf2e6; border-color: #b45309; }
.asig-row-nodata { opacity: .72; }
.asig-rank { text-align: center; font-weight: 800; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.asig-foto-c { display: flex; align-items: center; justify-content: center; }
.asig-foto { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #eef2f6; }
.asig-foto-ph { display: inline-block; }
.asig-id { min-width: 0; }
.asig-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asig-sub { font-size: 0.78rem; color: var(--text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asig-valor { font-size: 0.82rem; color: #33454c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.asig-score { font-weight: 800; font-size: 1.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.asig-fis-temporada { font-size: 0.62rem; font-weight: 600; color: #9aa7b3; margin-top: 0.1rem; white-space: nowrap; }
.asig-fis-temporada-warn { color: #b15c00; cursor: help; }
.asig-muestra { color: #e0a100; font-weight: 800; }
.asig-prio-chip { font-size: 0.7rem; font-weight: 800; padding: 0.08rem 0.4rem; border-radius: 6px; color: #fff; white-space: nowrap; min-width: 26px; text-align: center; }
.asig-prio-none { background: transparent; }
.asig-prio-1 { background: #c0392b; }
.asig-prio-2 { background: #e08e0b; }
.asig-prio-3 { background: #7a8aa0; }
.asig-sep { margin: 0.7rem 0 0.2rem; padding: 0.3rem 0.2rem; font-weight: 700; color: var(--text-gray); border-top: 2px solid #e3e9f1; font-size: 0.82rem; }
.asig-empty { padding: 1.4rem; text-align: center; color: var(--text-gray); }
.inf-grp-cards {
    border: 1px solid #e3e9f1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 900px) {
    .olo-grid { grid-template-columns: 1fr; }
    .olo-corner { display: none; }
}

.olo-col-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-blue);
    color: var(--white);
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    text-align: center;
}

.olo-row-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f4f6f9;
    border-radius: 8px;
    padding: 0.8rem 0.9rem;
}

.olo-row-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.olo-row-name {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--primary-blue);
    line-height: 1.1;
    margin: 0.15rem 0 0.3rem;
}

.olo-row-desc {
    font-size: 0.78rem;
    color: var(--text-gray);
    line-height: 1.3;
}

/* Sub-etiqueta de la fila: liga real comparada / badge de proyección */
.olo-row-liga {
    margin-top: 0.4rem;
    font-size: 0.74rem;
    color: var(--primary-blue);
    line-height: 1.25;
}
.olo-row-liga-lbl {
    color: #888;
    font-weight: 400;
}
.olo-row-proj-badge {
    display: inline-block;
    background: #fff4e5;
    color: #b15c00;
    border: 1px solid #ffd8a8;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 0.2rem;
    vertical-align: middle;
}

.olo-cell {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.7rem 0.9rem 0.5rem;
    display: flex;
    flex-direction: column;
}

.olo-cell-empty {
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-style: italic;
    font-size: 0.85rem;
    min-height: 150px;
}

.olo-pct {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.olo-pct-num {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
}

.olo-pct-unit {
    font-size: 0.8rem;
    color: var(--text-gray);
    font-weight: 600;
}

.olo-graph {
    margin: 0.1rem 0;
}

.olo-cell-foot {
    font-size: 0.74rem;
    color: var(--text-gray);
    text-align: center;
    border-top: 1px solid #f0f2f5;
    padding-top: 0.35rem;
    margin-top: auto;
}

.olo-nodata {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #f4f6f9;
    border-left: 4px solid var(--primary-blue);
    padding: 1.2rem 1.4rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.olo-nodata-icon {
    font-size: 2.2rem;
}

/* Rótulo de métrica dentro de cada celda del grid */
.olo-cell-cap {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary-blue);
    text-align: center;
    padding-bottom: 0.4rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid #eef1f5;
}

.olo-cell-empty-msg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-style: italic;
    font-size: 0.85rem;
    min-height: 120px;
}

/* Resumen textual de ranking bajo el grid */
.olo-explica {
    background: #f4f6f9;
    border-left: 4px solid var(--primary-blue);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-top: 0.9rem;
}

.olo-explica-text p {
    margin: 0 0 0.5rem;
    color: #333;
    line-height: 1.5;
    font-size: 0.9rem;
}

.olo-explica-text p:last-child {
    margin-bottom: 0;
}

.olo-explica-text strong {
    color: var(--primary-blue);
}

.olo-explica-nota {
    color: #8a98a5 !important;
    font-size: 0.8rem !important;
    font-style: italic;
}

/* =============================================================================
   RADARES WYSCOUT — pestaña ESTADÍSTICAS / sección COMPARATIVAS
   ============================================================================= */

/* Toggle de universo de comparación */
.pf-wy-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pf-wy-btn {
    flex: 1;
    background: var(--white);
    border: 1px solid #d6e2ef;
    color: var(--primary-blue);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.12s ease;
}

.pf-wy-btn:hover { background: #eef3f9; }

.pf-wy-btn.active {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
}

/* Fila de los 3 radares — siempre en línea horizontal */
.wy-radars-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
}

.wy-radar-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.5rem 0.3rem 0.25rem;
    height: 490px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wy-radar-title {
    width: 100%;
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #eef1f5;
    margin-bottom: 0.15rem;
}

.wy-radar-graph {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
}

.wy-radar-empty {
    color: #aaa;
    font-style: italic;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.82rem;
}

/* Descripción textual compacta bajo los radares */
.wy-explica {
    background: #f4f6f9;
    border-left: 4px solid var(--primary-blue);
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    margin-top: 0.5rem;
}

.wy-explica-text p {
    margin: 0 0 0.2rem;
    color: #333;
    line-height: 1.35;
    font-size: 0.82rem;
}

.wy-explica-text p:last-child { margin-bottom: 0; }

.wy-explica-text strong { color: var(--primary-blue); }

/* Banner sin datos Wyscout */
.wy-nodata {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #fff8e1;
    border-left: 4px solid var(--warning-orange);
    padding: 1.2rem 1.4rem;
    border-radius: 8px;
}

.wy-nodata-icon { font-size: 2.2rem; }


/* =============================================================================
   LESIONES — pestaña LESIONES de la ficha del jugador
   ============================================================================= */

/* Layout general: silueta izquierda + tabla derecha */
.les-main-row {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

/* Filtro de temporada — ancho suficiente para "Todas las temporadas" */
#pf-les-flt-temporada {
    min-width: 210px;
}

/* Columna izquierda: silueta + leyenda */
.les-body-col {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.les-svg-wrap {
    width: 100%;
}

/* Leyenda de colores */
.les-leyenda {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.les-leyenda-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.les-leyenda-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.12);
}

.les-leyenda-label {
    font-size: 0.75rem;
    color: #444;
    line-height: 1.2;
}

.les-leyenda-empty {
    font-size: 0.78rem;
    color: #999;
    font-style: italic;
    text-align: center;
}

/* Columna derecha: tabla de lesiones */
.les-table-col {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
}

/* Tabla de historial */
.les-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.les-tabla thead tr {
    background: #122d47;
}

.les-tabla th {
    padding: 0.45rem 0.6rem;
    text-align: left;
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    color: #c8ddf0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #1e4570;
    white-space: nowrap;
}

.les-th-flags {
    width: 44px;
    text-align: center;
}

.les-th-dias {
    text-align: right;
    width: 80px;
}

.les-tabla tbody tr {
    background: var(--primary-blue);
}

.les-tabla td {
    padding: 0.38rem 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    vertical-align: middle;
    color: #fff;
}

.les-td-flags {
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

.les-table-row {
    cursor: pointer;
    transition: background 0.1s ease;
}

.les-table-row:hover td {
    background: rgba(255,255,255,0.08) !important;
}

/* Días de baja (columna numérica, alineada a la derecha) */
.les-td-dias {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding-right: 0.8rem;
}

/* Lesiones graves (> 100 días): fondo rojo oscuro + texto en rojo claro */
.les-row-grave {
    background: rgba(180, 30, 30, 0.28) !important;
}
.les-row-grave td {
    color: #ffaaaa !important;
}
.les-row-grave:hover td {
    background: rgba(200, 40, 40, 0.38) !important;
}

.les-cell-activa {
    color: #c8102e;
    font-weight: 600;
}

/* Estado vacío */
.les-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

/* =============================================================================
   MODAL DE LESIÓN
   ============================================================================= */

.les-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 50, 0.55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.les-modal-box {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    max-width: 680px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    padding: 1.5rem 1.8rem 1.8rem;
}

.les-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background 0.1s;
}

.les-modal-close:hover { background: #f0f4f8; color: var(--primary-blue); }

.les-modal-header {
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.les-modal-title {
    font-size: 1.15rem;
    color: var(--primary-blue);
    margin: 0 0 0.4rem;
    line-height: 1.3;
}

.les-modal-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #777;
}

.les-modal-desc {
    font-size: 0.9rem;
    color: #444;
    margin: 0.6rem 0 0;
    line-height: 1.5;
}

/* Grid de KPIs del modal */
.les-modal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    background: #f4f7fb;
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.les-modal-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.les-modal-kpi-label {
    font-size: 0.72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.les-modal-kpi-value {
    font-size: 0.9rem;
    color: var(--primary-blue);
    font-weight: 600;
}

/* Sección noticias dentro del modal */
.les-modal-section-title {
    font-size: 0.9rem;
    color: var(--primary-blue);
    margin: 0 0 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.les-noticias-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.les-noticia-item {
    padding: 0.7rem 0.9rem;
    background: #f8fafc;
    border-left: 3px solid #d6e2ef;
    border-radius: 0 6px 6px 0;
}

.les-noticia-meta {
    font-size: 0.72rem;
    color: #888;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.les-noticia-title {
    font-size: 0.9rem;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    display: block;
    line-height: 1.35;
}

.les-noticia-title:hover { text-decoration: underline; color: #c8102e; }

.les-noticia-excerpt {
    font-size: 0.82rem;
    color: #555;
    margin: 0.3rem 0 0;
    line-height: 1.45;
}

.les-modal-body { display: flex; flex-direction: column; gap: 0; }

/* ---- Home: toggle «Más visionados / Más Fichar Dépor» -------------------- */
.home-top-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.home-top-btn {
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    background: rgba(255,255,255,0.13);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.28);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.home-top-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}

.home-top-btn.active {
    background: #ffffff;
    color: var(--primary-blue);
    border-color: #ffffff;
}

/* =============================================================================
   DATOS FÍSICOS — pestaña «Datos Físicos» (SkillCorner)
   ============================================================================= */

/* Radar (izquierda) + tabla de métricas (derecha) */
.fis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.fis-radar-card,
.fis-table-card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0.6rem 0.7rem;
}

.fis-table-card {
    padding: 0.9rem 1rem;
}

@media (max-width: 900px) {
    .fis-grid { grid-template-columns: 1fr; }
}

/* Tabla de métricas físicas */
.fis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.fis-table thead th {
    text-align: left;
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.74rem;
    color: #6b7b8a;
    border-bottom: 2px solid #e8ecf1;
    padding: 0.35rem 0.5rem;
}

.fis-table thead th:nth-child(2),
.fis-table thead th:nth-child(3),
.fis-table thead th:nth-child(4) { text-align: right; }

.fis-table tbody td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #f0f3f6;
}

.fis-table tbody tr:last-child td { border-bottom: none; }

.fis-td-label { color: #33454c; font-weight: 600; }
.fis-td-val   { text-align: right; color: var(--primary-blue); font-weight: 700;
                font-variant-numeric: tabular-nums; }
.fis-td-p50   { text-align: right; color: #8a98a5;
                font-variant-numeric: tabular-nums; }
.fis-td-pct   { text-align: right; width: 48px; }

/* Chip coloreado del percentil */
.fis-pct-chip {
    display: inline-block;
    min-width: 34px;
    padding: 0.16rem 0.45rem;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Chip clicable (abre la distribución del grupo) */
.fis-pct-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.fis-pct-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.22);
    filter: brightness(1.05);
}

.fis-pct-btn:active { transform: translateY(0); }

/* Percentil no disponible */
.fis-pct-na {
    background: #d8dde3;
    color: #fff;
    cursor: default;
}

.fis-footnote {
    margin: 0.75rem 0 0;
    color: #8a98a5;
    font-size: 0.78rem;
    line-height: 1.4;
}

.fis-pctmedio-hint {
    color: #b0b9c2;
    font-size: 0.74rem;
    font-style: italic;
}

/* Icono "?" de ayuda contextual (Dispersiones y donde haga falta) — burbuja
   oscura en :hover vía CSS puro, mismo patrón que .kpi-tooltip-* de
   Dash_Negocio (deportiendas.py), para que todos los "?" del grupo se vean
   igual. Sin JS: el hover del wrapper enseña la caja. */
.disp-qtip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    flex: 0 0 auto;
}
.disp-qtip-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-blue);
    background-color: transparent;
    color: var(--primary-blue);
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
}
.disp-qtip-icon:hover { border-color: var(--dark-blue); color: var(--dark-blue); }
/* Eje X/Eje Y/Escala/Referencia van sobre el fondo azul oscuro de la página
   (sin tarjeta blanca detrás) — el icono azul por defecto se vuelve invisible
   ahí, así que en blanco. */
.disp-ejes-top .disp-qtip-icon { border-color: #fff; color: #fff; }
.disp-ejes-top .disp-qtip-icon:hover { border-color: #cbd5e1; color: #cbd5e1; }
.disp-qtip-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--dark-blue);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.4;
    width: 230px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 40;
    text-transform: none;
    letter-spacing: normal;
    pointer-events: none;
    transition: opacity 0.15s;
}
.disp-qtip-box::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--dark-blue) transparent;
}
.disp-qtip-box.pos-left { left: auto; right: 0; transform: translateX(10%); }
.disp-qtip-box.pos-left::after { left: auto; right: 14px; transform: translateX(50%); }
.disp-qtip-box.pos-right { left: 0; transform: translateX(-10%); }
.disp-qtip-box.pos-right::after { left: 14px; transform: translateX(-50%); }
.disp-qtip-wrapper:hover .disp-qtip-box { visibility: visible; opacity: 1; }

/* "?" pequeño junto a cada métrica del selector Eje X/Eje Y (más compacto,
   dentro de un botón de lista). */
.disp-metric-qtip { margin-left: 0.3rem; }
.disp-metric-qtip .disp-qtip-box {
    width: 200px; font-size: 0.66rem;
    top: auto; bottom: calc(100% + 8px);
}
.disp-metric-qtip .disp-qtip-box::after {
    bottom: auto; top: 100%;
    border-color: var(--dark-blue) transparent transparent transparent;
}

/* Botonera de posición (contexto de evaluación) */
.fis-pos-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.1rem 0 0.8rem;
}

.fis-pos-label {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    color: #6b7b8a;
}

.fis-pos-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.fis-pos-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--white);
    border: 1px solid #d6e2ef;
    color: var(--primary-blue);
    border-radius: 20px;
    padding: 0.26rem 0.5rem 0.26rem 0.8rem;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.fis-pos-btn:hover { background: #eef3f9; }

.fis-pos-btn.active {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
}

.fis-pos-btn-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 0.55rem;
    border-radius: 10px;
    background: #eef1f5;
    color: #5b6b7a;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.fis-pos-btn.active .fis-pos-btn-n {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Indicador estático (cuando solo hay una posición evaluable) */
.fis-pos-static {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--primary-blue);
    color: var(--white);
    border: 1px solid var(--primary-blue);
    border-radius: 20px;
    padding: 0.26rem 0.5rem 0.26rem 0.8rem;
    font-weight: 600;
    font-size: 0.82rem;
}

.fis-pos-static .fis-pos-btn-n {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Modal de distribución física (reutiliza les-modal-overlay/box/close) */
.fis-modal-box {
    max-width: 560px;
    width: 92%;
}

.fis-modal-inner { padding: 0.4rem 0.3rem; }

.fis-modal-sub {
    color: #5b6b7a;
    font-size: 0.86rem;
    margin: 0.1rem 0 0.6rem;
}

.fis-modal-foot {
    margin-top: 0.5rem;
    color: #6b7b8a;
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Buscador: jugador sin informe (universo Wyscout ampliado) */
.search-result-count-none {
    color: #9aa7b4 !important;
    font-weight: 600;
    font-size: 0.72rem;
    font-style: italic;
}

/* Pestaña INFORMES — estado "sin informes" + CTA crear informe */
.pf-sin-informes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
.pf-sin-informes-icon { font-size: 2.6rem; opacity: 0.7; }
.pf-sin-informes-text {
    color: #5b6b7a;
    font-size: 0.95rem;
    margin: 0;
}
.pf-crear-informe-btn {
    display: inline-block;
    background: var(--primary-blue);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.pf-crear-informe-btn:hover { background: #2f5a86; }

/* =========================================================================
   TEMA FC PENAFIEL — skin por entidad (clase en #app-container)
   Reaprovecha las variables del tema Dépor para recolorear a crimson/negro
   SIN tocar styles.css y SIN cambiar la tipografía (se mantiene la del Dépor).
   ========================================================================= */
.theme-penafiel {
    --primary-blue: #DC143C;   /* crimson Penafiel */
    --dark-blue:    #b81030;   /* crimson oscuro (degradado del sidebar) */
    --accent-blue:  #DC143C;
    --light-blue:   #e0566f;
}
/* Acentos en azul claro hardcodeados (no usan variable) → tinte crimson */
.theme-penafiel .pf-header-position { background: #fce4e8; }
.theme-penafiel .pfh-pos-chip { background: #fdeef1; border-color: #f6cdd5; }
.theme-penafiel .pfh-pos-chip-pct { color: #DC143C; }
/* Escudo del sidebar (banner Penafiel es más cuadrado) — encaje uniforme */
.theme-penafiel .sidebar-banner { max-height: 120px; object-fit: contain; }
/* Panel principal: fondo NEGRO en Penafiel (en vez del azul del Dépor) */
.theme-penafiel .main-content {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.93)),
        url('/assets/MATERIAL/PENAFIEL/fondo.png');
}

/* Flecha de tendencia del valor de mercado en la cabecera */
.pf-valor-trend {
    font-size: 0.8em;
    font-weight: 700;
    vertical-align: middle;
}
.pf-valor-trend-up   { color: #27ae60; }   /* verde — al alza */
.pf-valor-trend-down { color: #e74c3c; }   /* rojo  — a la baja */

/* =========================================================================
   DISPERSIONES — scatter 2D del pool valorado
   ========================================================================= */
.disp-wrap { padding: 0.35rem 1.5rem 2rem 1.5rem; }

.disp-title {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.2rem 0;
}

/* La fila de contenido sube pegada al título. La regla .pf-main-row se comparte
   con la ficha de jugador (margin-top: 1rem); aquí se reduce esa separación
   superior solo en Dispersiones, sin afectar a aquélla. */
.disp-wrap .pf-main-row { margin-top: 0.35rem; }

/* Las subsecciones usan la botonera vertical de la ficha (.pf-sidebar-tabs /
   .pf-tab-btn / .pf-tab-col / .pf-main-row), definida más arriba. */

/* Barra de controles */
.disp-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: flex-end;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.7rem;
}
.disp-control { display: flex; flex-direction: column; gap: 0.25rem; }
.disp-control-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}
.disp-dd { width: 210px; font-size: 0.85rem; }

/* Fila de filtros (toggles de vencimiento de contrato + comparativa Dépor) */
.disp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

/* Fila del slider de cruce con Olocip (datos físicos SkillCorner ⨯ Olocip).
   Grid (label auto · slider 1fr) para dar al slider un ancho determinista
   independientemente del flex y del cálculo JS de rc-slider. */
.disp-olocip-row {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 1.2rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.35rem 1.4rem 0.1rem 1rem;
    margin-bottom: 0.7rem;
}
.disp-olocip-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-blue);
    white-space: nowrap;
}
.disp-olocip-slider { min-width: 0; padding-top: 0.6rem; }
.disp-olocip-slider .rc-slider { width: 100%; }

/* Botón "Comparativa Dépor" — acento de la entidad para diferenciarlo de los
   filtros de contrato (se recolorea con el skin Penafiel vía la variable). */
.disp-btn-depor {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    font-weight: 700;
}

/* Botón "Available (fichables)" — acento verde de mercado (TransferRoom) */
.disp-btn-available {
    border-color: #16a34a;
    color: #15803d;
    font-weight: 700;
}

/* Fila "Aplicar filtro", centrada encima de Eje X/Eje Y. */
/* ---- Selector de competición (campo + modal con banderas) ---------------- */
.disp-flag    { width: 22px; height: 16px; border-radius: 2px; object-fit: cover;
                box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.disp-flag-sm { width: 18px; height: 13px; border-radius: 2px; object-fit: cover;
                margin-right: 0.4rem; vertical-align: middle;
                box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }

/* Campo que abre el modal (aspecto de desplegable) */
.disp-comp-field {
    width: 210px;
    text-align: left;
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.disp-comp-field:hover { border-color: var(--primary-blue); }
.disp-comp-field::after { content: "▾"; margin-left: auto; color: #94a3b8; }
.disp-comp-field-txt { overflow: hidden; text-overflow: ellipsis; }

/* Overlay + panel del modal */
.disp-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(15, 33, 55, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.disp-modal-panel {
    background: #fff; border-radius: 12px;
    width: min(1100px, 95vw); max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    overflow: hidden;
}
.disp-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.1rem; border-bottom: 1px solid #eef2f7;
}
.disp-modal-title { font-weight: 800; color: var(--primary-blue); font-size: 1.05rem; }
.disp-modal-close {
    background: transparent; border: none; font-size: 1.1rem; cursor: pointer;
    color: #64748b; line-height: 1; padding: 0.2rem 0.4rem;
}
.disp-modal-close:hover { color: #ef4444; }

.disp-comp-todas {
    margin: 0.8rem 1.1rem 0.2rem;
    background: #f1f5f9; border: 1px solid #cfd8e3; border-radius: 8px;
    padding: 0.55rem 0.8rem; font-weight: 700; font-size: 0.85rem;
    color: var(--primary-blue); cursor: pointer; text-align: left;
}
.disp-comp-todas:hover { background: #e2e8f0; }

/* Pie del modal de competición: botón "Aplicar filtro" (cierra y refresca el scatter) */
.disp-comp-apply-row {
    display: flex; justify-content: flex-end;
    padding: 0.7rem 1.1rem 0.9rem; border-top: 1px solid #eef1f6;
    position: sticky; bottom: 0; background: #fff;
}
.disp-comp-aplicar {
    background: #E8732A; border: none; border-radius: 8px;
    padding: 0.6rem 1.4rem; font-weight: 700; font-size: 0.9rem;
    color: #fff; cursor: pointer;
}
.disp-comp-aplicar:hover { background: #cf6120; }

/* Grid denso: tarjetas de país en columnas (masonry) para minimizar scroll */
.disp-comp-grid {
    overflow-y: auto; padding: 0.4rem 1.1rem 1.1rem;
    column-width: 245px; column-gap: 0.9rem;
}
.disp-comp-card {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    display: inline-block; width: 100%; margin-bottom: 0.7rem;
}
/* Cabecera de país: CLICABLE (selecciona/deselecciona todas sus ligas) */
.disp-comp-country {
    display: flex; align-items: center; gap: 0.4rem; width: 100%;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 7px;
    padding: 0.35rem 0.5rem; margin-bottom: 0.3rem; cursor: pointer;
    text-align: left;
}
.disp-comp-country:hover { border-color: var(--primary-blue); background: #eef3f9; }
.disp-comp-country.active {
    background: var(--primary-blue); border-color: var(--primary-blue);
}
.disp-comp-country.active .disp-comp-country-name { color: #fff; }
.disp-comp-country.active .disp-comp-count {
    color: #fff; background: rgba(255,255,255,0.25);
}
.disp-comp-country-name { font-weight: 800; color: #1e293b; font-size: 0.82rem; }
.disp-comp-count {
    font-size: 0.68rem; color: #64748b; background: #eef2f7;
    border-radius: 999px; padding: 0.05rem 0.4rem; font-weight: 700;
    margin-left: auto;
}
.disp-comp-chips { display: flex; flex-direction: column; gap: 0.22rem; }
.disp-comp-chip {
    display: flex; align-items: center; width: 100%; text-align: left;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 0.28rem 0.5rem; font-size: 0.76rem; color: #334155; cursor: pointer;
    transition: all 0.1s ease;
}
.disp-comp-chip:hover { border-color: var(--primary-blue); background: #f8fafc; }
.disp-comp-chip-name { flex: 1; }
.disp-comp-jug {
    font-size: 0.68rem; color: #64748b; background: #eef2f7; border-radius: 999px;
    padding: 0.05rem 0.4rem; font-weight: 700; margin-left: 0.45rem; flex: 0 0 auto;
}
.disp-comp-chip.active .disp-comp-jug { color: #fff; background: rgba(255,255,255,0.25); }
.disp-comp-chip.active {
    background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);
}
.disp-comp-empty { color: #94a3b8; font-style: italic; padding: 1rem 0; }

/* Acordeón de competición: caret + estado abierto */
.disp-comp-caret { margin-left: 0.35rem; color: #94a3b8; font-size: 0.7rem; }
.disp-comp-country.abierto { border-color: var(--primary-blue); background: #eef3f9; }

/* Selector de ligas Olocip en Shortlists: acordeón país→ligas (reusa disp-comp-*) */
.sl-olo-row-ligas { display: flex; flex-direction: column; align-items: stretch; }
.sl-olo-ligas-box { display: flex; flex-direction: column; gap: 0.35rem; }
.sl-olo-ligas-clear {
    align-self: flex-start;
    background: #f1f5f9; border: 1px solid #cfd8e3; border-radius: 7px;
    padding: 0.32rem 0.7rem; font-size: 0.74rem; font-weight: 700;
    color: var(--primary-blue); cursor: pointer;
}
.sl-olo-ligas-clear:hover { background: #e2e8f0; }
.sl-olo-ligas-acc {
    max-height: 340px; overflow-y: auto;
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.5rem;
    background: #fafbfc;
}
/* Continentes: capa superior del acordeón (continente → país → ligas). El
   multicolumna pasa AQUÍ DENTRO (países en columnas), no en el contenedor, para
   que cada continente sea un bloque completo a todo el ancho y no se parta. */
.sl-olo-cont-card { margin-bottom: 0.45rem; }
.sl-olo-cont-head {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    background: #eef3f8; border: 1px solid #d8e0ea; border-radius: 7px;
    padding: 0.42rem 0.65rem; cursor: pointer; text-align: left;
    font-weight: 800; color: var(--primary-blue); text-transform: uppercase;
    letter-spacing: 0.04em; font-size: 0.8rem;
}
.sl-olo-cont-head:hover { background: #e2ebf4; }
.sl-olo-cont-head.abierto { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
.sl-olo-cont-name { flex: 1 1 auto; }
.sl-olo-cont-count {
    font-weight: 600; font-size: 0.7rem; opacity: 0.85; text-transform: none;
}
.sl-olo-cont-caret { font-size: 0.72rem; }
.sl-olo-cont-paises {
    column-width: 200px; column-gap: 0.8rem;
    padding: 0.45rem 0 0.15rem 0.4rem;
}
/* Cabecera "Ligas" plegable (clic = oculta/muestra el acordeón) */
.sl-olo-ligas-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 0.4rem; cursor: pointer;
    background: transparent; border: none; padding: 0 0 0.4rem;
    font: inherit; text-align: left;
}
.sl-olo-ligas-toggle:hover .disp-prov-name { color: #14438c; }
.sl-olo-ligas-caret { font-size: 0.72rem; color: #64748b; }

/* ---- Modal compartido (Fuente/Posición/Contexto/Eje X/Eje Y) ------------- */
.disp-sel-grid { overflow-y: auto; padding: 0.6rem 1.1rem 1.1rem; }

/* Grid de opciones (Fuente, Posición) */
.disp-opt-grid {
    display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.disp-opt-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.disp-opt {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; width: 100%; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 0.55rem 0.7rem; font-size: 0.85rem; color: #334155;
    transition: all 0.12s ease;
}
.disp-opt:hover { border-color: var(--primary-blue); background: #f8fafc; }
.disp-opt.active {
    background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);
}
.disp-opt-name { font-weight: 600; }
.disp-opt-count {
    font-size: 0.7rem; color: #64748b; background: #eef2f7;
    border-radius: 999px; padding: 0.05rem 0.45rem; font-weight: 700; flex: 0 0 auto;
}
.disp-opt.active .disp-opt-count { color: #fff; background: rgba(255,255,255,0.25); }
.disp-opt.active .disp-qtip-icon { border-color: rgba(255,255,255,0.7); color: #fff; }

/* Ejes: valoraciones globales destacadas + columnas de ítems */
.disp-opt-vals { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.disp-opt-vals .disp-opt.disp-opt-big {
    width: auto; flex: 1 1 220px; justify-content: center;
    font-size: 0.98rem; font-weight: 800; padding: 0.7rem 1rem;
    border-width: 2px;
}
.disp-itemcols {
    display: grid; gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    align-items: start;
}
.disp-itemcol { display: flex; flex-direction: column; gap: 0.28rem; }
.disp-itemcol-head {
    font-weight: 800; font-size: 0.8rem; color: #1e293b;
    border-bottom: 2px solid #e5e7eb; padding-bottom: 0.25rem; margin-bottom: 0.2rem;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.disp-itemcol .disp-opt { font-size: 0.78rem; padding: 0.32rem 0.55rem; }
/* Valoración global al inicio de su columna: más grande que el resto */
.disp-itemcol .disp-opt.disp-opt-big {
    font-size: 0.92rem; font-weight: 800; padding: 0.5rem 0.6rem;
    border-width: 2px; margin-bottom: 0.2rem;
}

/* Contenedor del gráfico */
/* Recuento por cuadrante (Eje X/Y ≥ P50 o no) — encima del scatter,
   inspirado en el dashboard de referencia Opta/TruMedia. */
.disp-quad-row { display: grid; grid-template-columns: repeat(4, 1fr);
                 gap: 0.5rem; margin-bottom: 0.6rem; }
.disp-quad-box { background: #f3f4f6; border-radius: 8px; padding: 0.5rem 0.7rem;
                  display: flex; flex-direction: column; gap: 0.15rem; }
.disp-quad-box strong { font-size: 1.3rem; font-weight: 800; color: #33454c;
                          font-variant-numeric: tabular-nums; }
.disp-quad-box span { font-size: 0.68rem; color: #667; text-transform: uppercase;
                        font-weight: 700; letter-spacing: 0.02em; }
.disp-quad-best { background: #dff0e3; }
.disp-quad-best strong { color: #1e7a3d; }
@media (max-width: 700px) { .disp-quad-row { grid-template-columns: repeat(2, 1fr); } }

.disp-graph-wrap {
    position: relative;   /* contexto de posicionamiento del dcc.Tooltip:
                             su contenedor .hover es position:absolute y se
                             ancla al ancestro posicionado más cercano; sin
                             esto saltaría al origen del viewport. */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Scatter + ranking lateral (todos los jugadores del pool, ordenados). */
.disp-graph-rank-row { display: flex; gap: 0.7rem; align-items: flex-start; }
.disp-graph-rank-row .disp-graph-wrap { flex: 1 1 auto; min-width: 0; }
.disp-rank-col {
    flex: 0 0 300px; width: 300px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 0.6rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.disp-rank-title { font-size: 0.78rem; font-weight: 700; color: #33454c; }
.disp-rank-search {
    width: 100%; font-size: 0.75rem; padding: 0.35rem 0.5rem;
    border: 1px solid #e5e7eb; border-radius: 6px;
}
.disp-rank-list {
    display: flex; flex-direction: column; gap: 0.2rem;
    max-height: 680px; overflow-y: auto;   /* a la par de la gráfica (height=680) */
}
.disp-rank-row {
    display: grid; grid-template-columns: 1.2rem 1.7rem 1fr auto 1rem;
    grid-template-areas: "n img name score warn" ". img team score warn";
    column-gap: 0.4rem; row-gap: 0;
    padding: 0.3rem 0.4rem; border-radius: 6px; text-align: left;
    background: none; border: none; cursor: pointer; width: 100%;
}
.disp-rank-row:hover { background: #f3f4f6; }
.disp-rank-row-static { cursor: default; }
.disp-rank-row-static:hover { background: none; }
.disp-rank-row-added { opacity: 0.5; cursor: default; }
.disp-rank-row-added:hover { background: none; }
.disp-rank-n {
    grid-area: n; font-size: 0.68rem; color: #98a2ae; font-weight: 700;
    align-self: center;
}
.disp-rank-img {
    grid-area: img; align-self: center; justify-self: center;
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; background: #eef2f7;
}
.disp-rank-img-ph {
    display: block; border: 1px solid #e2e8f0;
}
.disp-rank-name {
    grid-area: name; font-size: 0.75rem; font-weight: 600; color: #33454c;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disp-rank-team {
    grid-area: team; font-size: 0.66rem; color: #8a97a3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Aviso: sus stats son de la competición filtrada, pero su club actual ya no
   juega en ella (se fue de liga desde esa temporada). Columna propia -a la
   derecha del percentil-, para que no se recorte junto al nombre del equipo
   en una columna de ranking estrecha. */
.disp-rank-team-warn { color: #b45309; font-weight: 700; cursor: help; }
.disp-rank-warn {
    grid-area: warn; align-self: center; justify-self: center;
    font-size: 0.78rem; cursor: help;
}
.disp-rank-score {
    grid-area: score; align-self: center; font-size: 0.78rem; font-weight: 800;
    color: var(--primary-blue); font-variant-numeric: tabular-nums;
}
/* Escala "Valor real": dos valores (Eje X · Eje Y) en vez del percentil
   combinado -no cabe con el mismo tamaño de fuente-. */
.disp-rank-score-real { font-size: 0.66rem; white-space: nowrap; }
.disp-rank-empty { font-size: 0.75rem; color: #8a97a3; padding: 0.4rem; }
.disp-rank-truncated { font-size: 0.68rem; color: #8a97a3; padding: 0.5rem 0.4rem; text-align: center; font-style: italic; }
@media (max-width: 900px) {
    .disp-graph-rank-row { flex-direction: column; }
    .disp-rank-col { width: 100%; flex: 1 1 auto; }
    .disp-rank-list { max-height: 260px; }
}

/* Fila "Fuente de datos" — selector único de proveedor (sustituye pestañas) */
.disp-fuente-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
}
.disp-fuente-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}
.disp-fuente-row .pf-tab-btn {
    width: auto;
    text-align: center;
    white-space: nowrap;
}

/* Dos columnas: filtros por proveedor (izq) · scatter visible a la vez (der) */
/* Filtros en fila horizontal (todos los proveedores a la misma altura) y
   scatter debajo a todo el ancho: sin scroll para alternar selección/gráfico. */
/* Diagrama a la izquierda (~3/4 del ancho), filtros en columna pegados a la
   derecha (~1/4), en vez de filtros arriba + diagrama abajo a todo lo ancho. */
.disp-2col { display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; }
.disp-filters-col {
    order: 2;
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; gap: 0.65rem;
    flex: 0 0 10%; max-width: 10%; min-width: 200px;
}
.disp-filters-col .disp-prov-block,
.disp-filters-col .disp-combo-block,
.disp-filters-col .disp-comparativa-col { width: 100%; flex: none; min-width: 0; }
.disp-scatter-col { order: 1; flex: 1 1 90%; min-width: 0; }
@media (max-width: 1100px) {
    /* Pantallas estrechas: vuelve al apilado vertical (columna ilegible si
       se estrecha demasiado el diagrama o los filtros). */
    .disp-2col { flex-direction: column; }
    .disp-filters-col {
        order: 1; flex-direction: row; flex-wrap: wrap;
        max-width: 100%; min-width: 0;
    }
    .disp-filters-col .disp-prov-block,
    .disp-filters-col .disp-combo-block,
    .disp-filters-col .disp-comparativa-col { width: auto; flex: 1 1 180px; min-width: 178px; }
    .disp-scatter-col { order: 2; }
}
/* Ejes X/Y arriba-centro del diagrama (uno tras otro), columna de filtros más baja. */
.disp-ejes-top {
    display: flex; gap: 1rem; justify-content: center; align-items: flex-end;
    flex-wrap: wrap; margin: 0 0 0.5rem;
}
.disp-ejes-top .disp-control { flex: 0 1 250px; min-width: 180px; }
.disp-ejes-top .disp-comp-field { width: 100%; }
.disp-swap-axes-btn {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid #fff; background: transparent; color: #fff;
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.disp-swap-axes-btn:hover { background: rgba(255, 255, 255, 0.15); }
.disp-ejes-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
    margin-bottom: 0.8rem; max-width: 560px;
}
/* Bloque vertical de un proveedor: logo + lista de controles */
.disp-prov-block {
    border: 1px solid #e6ecf3; border-radius: 10px; background: #fff;
    padding: 0.5rem 0.7rem 0.7rem;
    flex: 1 1 180px; min-width: 178px;   /* ítem de la fila horizontal de filtros */
}
.disp-prov-head {
    display: flex; align-items: center; min-height: 24px;
    border-bottom: 1px solid #eef2f7; padding-bottom: 0.4rem; margin-bottom: 0.55rem;
}
.disp-prov-logo { height: 20px; width: auto; max-width: 165px; object-fit: contain; }
.disp-prov-name { font-size: 0.82rem; font-weight: 700; color: var(--primary-blue); }
.disp-prov-body { display: flex; flex-direction: column; gap: 0.5rem; }
/* Categóricos: rejilla compacta de 2 → más estrechos que los sliders */
/* En 1 sola columna (Posición, Pie, Competición apilados) — antes Posición/
   Pie iban lado a lado, pero con la columna de filtros más estrecha no cabían. */
.disp-cat-grid { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
.disp-cat-grid .disp-control { min-width: 0; margin: 0; }
.disp-filters-col .disp-comp-field {
    width: 100%; font-size: 0.73rem; padding: 0.38rem 0.5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disp-filters-col .campo-filter-btn { width: 100%; font-size: 0.72rem; padding: 0.4rem 0.5rem; }
/* Sliders: a todo el ancho del bloque (más anchos que los categóricos) */
.disp-filters-col .disp-olocip-row { display: block; }
.disp-filters-col .disp-olocip-label {
    display: block; font-size: 0.72rem; margin-bottom: 0.35rem; color: var(--text-gray);
}
.disp-filters-col .disp-olocip-slider { width: 100%; padding: 0 0.35rem; }
.disp-prov-loose { margin-top: 0.1rem; }
/* Filtro de informes (checklist "Fichar Depor+ / Fichar Dépor") en Dispersiones */
.disp-fichar-check { display: flex; flex-direction: column; gap: 0.3rem; }
.disp-fichar-label { display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; color: var(--text-gray); cursor: pointer; white-space: nowrap; }
.disp-fichar-input { cursor: pointer; accent-color: var(--primary-blue); }

/* Bloque "Fuente de datos": selector de fuente dentro de la columna de filtros.
   Conmuta el catálogo de ejes X/Y y el backend del scatter. */
.disp-src-btns { display: flex; flex-direction: column; gap: 0.35rem; }
.disp-src-btn {
    border: 1px solid #d8e0ea; background: #fff; color: #33454c;
    border-radius: 8px; padding: 0.5rem 0.7rem; font-weight: 700;
    font-size: 0.82rem; cursor: pointer; text-align: left;
    transition: background .12s, border-color .12s, color .12s;
}
.disp-src-btn:hover:not(:disabled) { background: #eef4fb; border-color: var(--primary-blue); }
.disp-src-btn.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.disp-src-btn-off, .disp-src-btn:disabled {
    background: #f1f3f5; color: #aab2bd; border-color: #e8ecf1;
    cursor: not-allowed; font-style: italic; font-weight: 600;
}
.disp-src-corner .disp-fis-scope-wrap { width: 150px; }
.disp-fis-scope-dd {
    font-size: 0.78rem; font-weight: 700; border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Olocip + TransferRoom + Informes Dépor combinados en un solo cuadro (uno
   debajo de otro), para no saturar la columna de filtros con 3 cajas sueltas. */
.disp-combo-block {
    border: 1px solid #e6ecf3; border-radius: 10px; background: #fff;
    padding: 0.5rem 0.7rem 0.7rem;
    flex: 1 1 180px; min-width: 178px;
    display: flex; flex-direction: column;
}
.disp-combo-block .disp-prov-block-nested {
    border: none; background: none; padding: 0; margin: 0; flex: none; min-width: 0;
}
.disp-combo-block .disp-prov-block-nested + .disp-prov-block-nested {
    margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid #eef2f7;
}

/* Selector de "Fuente de datos" (+ Modelo, solo Opta): flotantes en la esquina
   superior izquierda del propio diagrama (antes vivían en la columna de
   filtros). En fila: fuente primero, modelo al lado. */
.disp-src-corner {
    position: absolute; top: 10px; left: 64px; right: 10px; z-index: 3;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.disp-src-corner .disp-src-dd { width: 140px; }
.disp-src-corner .disp-src-dd {
    font-size: 0.78rem; font-weight: 700; border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.disp-opta-modelo-corner {
    display: flex; gap: 0.5rem; background: #fff; border-radius: 6px;
    padding: 0.3rem 0.55rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.disp-opta-modelo-corner label {
    display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.74rem; font-weight: 600; color: #33454c; white-space: nowrap;
    cursor: pointer;
}
/* Escala/Referencia: mismas cajitas blancas en línea que Modelo, junto a él. */
.disp-esc-corner {
    display: flex; align-items: center; gap: 0.35rem; background: #fff;
    border-radius: 6px; padding: 0.3rem 0.55rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.disp-esc-corner-label {
    font-size: 0.74rem; font-weight: 600; color: #33454c; white-space: nowrap;
}
.disp-esc-corner .disp-escala-dd { width: 118px; font-size: 0.74rem; }
/* "?" del corner de Fuente de datos (Fuente/Modelo/Escala/Referencia/Valoraciones):
   se abren hacia ARRIBA -están pegados al borde superior del propio gráfico,
   y hacia abajo (comportamiento por defecto) tapan los puntos del scatter-. */
.disp-src-qtip .disp-qtip-box { top: auto; bottom: calc(100% + 24px); }
.disp-src-qtip .disp-qtip-box::after {
    bottom: auto; top: 100%;
    border-color: var(--dark-blue) transparent transparent transparent;
}

/* "Destacar jugador": buscador (universo completo) + chips naranjas. */
.disp-dest-input {
    width: 100%; box-sizing: border-box; border: 1px solid #d8e0ea;
    border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.82rem;
}
.disp-dest-input:focus { outline: none; border-color: #ff7a18; }
.disp-dest-results {
    display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem;
    max-height: 230px; overflow-y: auto;
}
.disp-dest-row {
    display: flex; flex-direction: row; align-items: center; gap: 0.45rem;
    width: 100%; box-sizing: border-box; text-align: left;
    border: 1px solid #eef2f7; border-radius: 7px; padding: 0.28rem 0.45rem;
    font-size: 0.78rem; background: #fff;
}
.disp-dest-r-img {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    background: #eef2f6; flex: 0 0 auto;
}
.disp-dest-r-img-ph { display: inline-block; }
.disp-dest-r-txt {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.02rem; min-width: 0;
}
.disp-dest-row-ok { cursor: pointer; transition: background .12s, border-color .12s; }
.disp-dest-row-ok:hover { background: #fff3e8; border-color: #ff7a18; }
.disp-dest-row-off { opacity: 0.6; background: #f3f5f7; cursor: not-allowed; }
.disp-dest-row-added { background: #fff3e8; border-color: #ffd2ad; }
.disp-dest-r-name {
    font-weight: 700; color: #33454c;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.disp-dest-r-sub { color: var(--text-gray); font-size: 0.72rem; }
.disp-dest-r-reason { color: #b04632; font-size: 0.72rem; font-style: italic; }
.disp-dest-r-tag { color: #ff7a18; font-size: 0.72rem; font-weight: 700; }
.disp-dest-empty { color: var(--text-gray); font-size: 0.78rem; padding: 0.3rem 0.2rem; }
.disp-dest-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.disp-dest-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #ff7a18; color: #fff; border-radius: 999px;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem; font-size: 0.76rem; font-weight: 700;
}
.disp-dest-chip-lbl { white-space: nowrap; }
.disp-dest-chip-x {
    border: none; background: rgba(255,255,255,.25); color: #fff; border-radius: 50%;
    width: 16px; height: 16px; font-size: 0.6rem; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.disp-dest-chip-x:hover { background: rgba(255,255,255,.55); }
/* Columna Comparativa: botón "Destacar Dépor" (con escudo) arriba + hueco + caja. */
.disp-comparativa-col {
    display: flex; flex-direction: column; gap: 0.5rem;
    flex: 1 1 200px; min-width: 190px;
}
.disp-depor-solo { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.disp-depor-escudo { height: 18px; width: auto; flex: 0 0 auto; }
/* Desplegables (slider Olocip / asking TransferRoom) plegados por defecto, para
   simplificar la vista inicial de los filtros. */
.disp-collapse { margin-top: 0.4rem; }
.disp-collapse-sum {
    cursor: pointer; font-size: 0.74rem; font-weight: 700; color: var(--text-gray);
    padding: 0.2rem 0; list-style: none; user-select: none;
}
.disp-collapse-sum::-webkit-details-marker { display: none; }
.disp-collapse-sum::before { content: "\25B8  "; color: var(--primary-blue); }
.disp-collapse[open] > .disp-collapse-sum::before { content: "\25BE  "; }
.disp-collapse > .disp-olocip-row { margin-top: 0.4rem; }

/* Tarjeta de hover del scatter (dcc.Tooltip) */
.disp-card { width: 220px; font-size: 0.8rem; }
.disp-card-top {
    display: flex; align-items: center; gap: 0.55rem;
    padding-bottom: 0.5rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid #eef2f7;
}
.disp-card-img {
    width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
    background: #f1f5f9; flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.disp-card-ph {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #94a3b8;
}
.disp-card-id { min-width: 0; }
.disp-card-name {
    font-weight: 800; color: var(--primary-blue); line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disp-card-team {
    color: #64748b; font-size: 0.74rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Aviso en la tarjeta de hover: sus stats son de la competición filtrada,
   pero su club actual ya no juega en ella. */
.disp-card-team-warn { color: #b45309; font-weight: 700; }
.disp-card-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.disp-card-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 0.4rem;
    align-items: baseline;
}
.disp-card-metric {
    font-weight: 700; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disp-card-pct, .disp-card-val { font-size: 0.72rem; color: #64748b; flex: 0 0 auto; }
.disp-card-pct b { color: var(--primary-blue); font-size: 0.82rem; }
.disp-card-val b { color: #1e293b; font-size: 0.82rem; }
.disp-note {
    /* Va directamente sobre el fondo oscuro de la página (no una tarjeta
       blanca) -antes casi no se leía con un gris pensado para fondo claro. */
    color: #b9c4d4;
    font-size: 0.82rem;
    font-style: italic;
    margin-top: 0.6rem;
    padding-left: 0.2rem;
}

/* Leyenda del filtro global (chips) + botón "Ver jugadores" bajo el scatter */
.disp-legend-row {
    display: flex; align-items: flex-start; gap: 1rem;
    margin-top: 0.55rem; flex-wrap: wrap;
}
.disp-legend {
    flex: 1; min-width: 220px; display: flex; flex-wrap: wrap;
    gap: 0.35rem; align-items: center;
}
.disp-legend-title { font-size: 0.76rem; font-weight: 700; color: #e5eaf2; margin-right: 0.2rem; }
.disp-legend-chip {
    font-size: 0.74rem; color: #33415c; background: #eef2f8;
    border: 1px solid #dce3ee; border-radius: 999px; padding: 0.12rem 0.55rem;
}
.disp-legend-chip strong { color: var(--primary-blue); font-weight: 700; }
.disp-ver-btn { flex: 0 0 auto; }
.disp-players-count { font-size: 0.8rem; font-weight: 600; color: var(--primary-blue); margin: 0.5rem 0 0.3rem; }

/* Bloque plegable a pie del scatter físico: papel de cada proveedor. El
   <summary> va sobre el fondo oscuro de la página -antes un azul oscuro
   pensado para tarjeta blanca, casi ilegible-; el cuerpo expandido sí tiene
   su propia tarjeta clara (.disp-help-card), así que ese texto no cambia. */
.disp-fis-help {
    margin-top: 0.5rem;
    font-size: 0.84rem;
    color: #b9c4d4;
}
.disp-help-summary {
    cursor: pointer;
    color: #e5eaf2;
    font-weight: 600;
    font-size: 0.84rem;
    padding: 0.3rem 0.2rem;
    user-select: none;
}
.disp-help-summary:hover { text-decoration: underline; color: #fff; }
.disp-help-body { padding: 0.6rem 0.2rem 0.2rem; }
.disp-help-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}
.disp-help-card {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}
.disp-help-h {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}
.disp-help-h-full { margin-top: 0.2rem; }
/* "Por qué un jugador puede no aparecer": misma tarjeta blanca que las dos de
   arriba -antes iba suelta sobre el fondo azul marino de la página y el
   texto oscuro (pensado para fondo blanco) quedaba con muy poco contraste-. */
.disp-help-card-full { margin-top: 0; }
.disp-help-p {
    margin: 0 0 0.5rem;
    line-height: 1.5;
    color: #475569;
}
.disp-help-p:last-child { margin-bottom: 0; }
.disp-help-p strong { color: #1f2937; font-weight: 600; }
.disp-help-list {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.6;
    color: #475569;
}
.disp-help-list li { margin-bottom: 0.15rem; }

/* Stub (estadísticas / físicos en preparación) */
.disp-stub {
    text-align: center;
    padding: 3.5rem 1rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
}
.disp-stub-icon { font-size: 2.6rem; opacity: 0.5; }
.disp-stub-title {
    color: var(--primary-blue);
    margin: 0.5rem 0 0.3rem 0;
}
.disp-stub-text {
    color: #6b7280;
    max-width: 520px;
    margin: 0 auto;
    font-size: 0.9rem;
}

/* =============================================================================
   ALERTAS - leaderboards de records fisicos pico (SkillCorner)
   ============================================================================= */
.alr-wrap { padding: 0.35rem 1.5rem 2.5rem; }
.alr-head { margin-bottom: 0.8rem; }
.alr-title {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700;
    font-size: 1.9rem; color: var(--primary-blue); margin: 0;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.alr-sub { color: var(--text-gray); font-size: 0.9rem; margin: 0.2rem 0 0; }

.alr-controls {
    display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: flex-end;
    background: var(--white); padding: 0.9rem 1.1rem; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.alr-control { display: flex; flex-direction: column; gap: 0.25rem; }
.alr-control-lbl {
    font-size: 0.7rem; font-weight: 700; color: var(--text-gray);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.alr-dd { min-width: 190px; }
.alr-dd-lg { min-width: 250px; }
.alr-dd-sm { min-width: 120px; }
.alr-chk { font-size: 0.85rem; color: #33454c; padding-bottom: 0.4rem; }

.alr-softbar {
    display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap;
    margin: 0.7rem 0 0.2rem; padding: 0.3rem 0.2rem;
}
.alr-soft-lbl {
    font-size: 0.78rem; font-weight: 700; color: var(--primary-blue);
    text-transform: uppercase; letter-spacing: 0.03em;
}

.alr-umbral {
    background: #eef4fb; border-left: 4px solid var(--primary-blue);
    border-radius: 8px; padding: 0.6rem 1rem; margin: 0.8rem 0 0.5rem;
    font-size: 0.88rem; color: #33454c;
}

.alr-board { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.alr-link { text-decoration: none; color: inherit; display: block; }
.alr-link-off { cursor: default; }
.alr-row {
    display: grid;
    grid-template-columns: 34px 46px 1fr auto minmax(180px, 250px);
    align-items: center; gap: 0.8rem;
    background: var(--white); border-radius: 10px; padding: 0.55rem 0.9rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border-left: 3px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.alr-link:not(.alr-link-off) .alr-row:hover {
    transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,0.1);
    border-left-color: var(--primary-blue);
}
.alr-rank {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700;
    font-size: 1.5rem; color: var(--primary-blue); text-align: center;
}
.alr-foto {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    background: var(--light-gray); border: 2px solid #eef1f5;
}
.alr-foto-ph { background: var(--light-gray); }
.alr-mainc { min-width: 0; }
.alr-nrow { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.alr-name {
    font-weight: 700; color: var(--dark-blue); font-size: 1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.alr-badge {
    font-size: 0.66rem; font-weight: 700; padding: 0.12rem 0.45rem;
    border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em;
    white-space: nowrap;
}
.alr-b-sub { background: #e3f0ff; color: var(--primary-blue); }
.alr-b-ll { background: #fff0d6; color: #b35900; border: 1px solid #f0c674; }
.alr-b-nc { background: #f0f0f0; color: #888; }
.alr-meta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.2rem; }
.alr-mi { font-size: 0.78rem; color: var(--text-gray); white-space: nowrap; }
.alr-mi-comp { color: #9aa7b3; }
.alr-val {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700;
    font-size: 1.6rem; color: var(--primary-blue); text-align: right; white-space: nowrap;
}
.alr-market {
    display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-end;
    font-size: 0.75rem; color: var(--text-gray); text-align: right;
}
.alr-clubwrap { display: inline-flex; align-items: center; gap: 0.3rem; }
.alr-escudo { height: 15px; width: auto; object-fit: contain; }
.alr-club { color: #556; font-weight: 600; }
.alr-mk { white-space: nowrap; }
.alr-mk-disp { color: #1f7a4c; font-weight: 700; }

.alr-sindato { margin-top: 1.3rem; }
.alr-sindato-h {
    background: #fff8e1; border-left: 4px solid var(--warning-orange);
    border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.85rem;
    font-weight: 600; color: #8a6d1a; margin-bottom: 0.5rem;
}
.alr-board-muted .alr-row { opacity: 0.72; }

.alr-empty { color: var(--text-gray); font-style: italic; padding: 1.5rem; text-align: center; }

@media (max-width: 900px) {
    .alr-row { grid-template-columns: 28px 40px 1fr auto; }
    .alr-market { display: none; }
}

/* ----- Generar Informe: temporada por comparado (botones en cada resultado) ----- */
.geninf-res-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.geninf-res-seasons { display: inline-flex; flex-wrap: wrap; gap: 0.12rem; }
.geninf-res-seasons label {
    display: inline-flex; align-items: center; gap: 0.15rem; margin: 0;
    font-size: 0.66rem; padding: 0.06rem 0.32rem; color: #33454c;
    border: 1px solid #d8e0ea; border-radius: 6px; cursor: pointer;
}
.geninf-res-seasons input[type="radio"] { margin: 0 0.1rem 0 0; transform: scale(0.8); cursor: pointer; }
.geninf-chip-season {
    background: var(--primary-blue); color: #fff; border-radius: 5px; margin: 0 0.25rem 0 0.15rem;
    padding: 0.02rem 0.32rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
}

/* ----- Valoraciones: posiciones por comparado (toggles de promedio) ----- */
.geninf-pos-toggles { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.geninf-pos-toggle {
    border: 1px solid #c9d8ea; background: #fff; color: #33475b; cursor: pointer;
    border-radius: 999px; padding: 0.12rem 0.55rem; font-size: 0.72rem; font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.geninf-pos-toggle:hover { border-color: #0a4a9e; }
.geninf-pos-toggle.active { background: #0a4a9e; border-color: #0a4a9e; color: #fff; }

/* ----- ALERTAS v2: grid de metricas + tarjetas + modal "Ver mas" ----- */
.alr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; margin-top: 0.8rem; }
@media (max-width: 1400px) { .alr-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1080px) { .alr-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .alr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .alr-grid { grid-template-columns: 1fr; } }

.alr-card {
    background: var(--white); border-radius: 10px; padding: 0.6rem 0.7rem;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06); display: flex; flex-direction: column;
    border-top: 3px solid var(--primary-blue);
}
.alr-c-title {
    font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700; font-size: 0.95rem;
    color: var(--primary-blue); text-transform: uppercase; letter-spacing: 0.02em;
    line-height: 1.08;
}
.alr-c-titlerow {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.35rem;
    margin-bottom: 0.4rem; min-height: 2.1em;
}
.alr-c-help {
    position: relative;
    flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%;
    background: #e3ebf3; color: #7c8a99; font-size: 0.62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    cursor: help; user-select: none; margin-top: 0.1rem;
}
.alr-c-help:hover { background: var(--primary-blue); color: #fff; }
.alr-c-help::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 230px;
    background: var(--primary-blue); color: #fff; font-family: var(--font-body, "Commissioner", Arial, sans-serif);
    font-size: 0.74rem; font-weight: 500; text-transform: none; letter-spacing: normal;
    line-height: 1.35; text-align: left; padding: 0.55rem 0.75rem; border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    opacity: 0; visibility: hidden; transition: opacity .15s ease;
    z-index: 30; pointer-events: none;
}
.alr-c-help::before {
    content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--primary-blue);
    opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 30;
}
.alr-c-help:hover::after, .alr-c-help:hover::before { opacity: 1; visibility: visible; }
.alr-c-top { display: flex; flex-direction: column; gap: 0.18rem; flex: 1; }
.alr-c-empty { color: #aaa; font-size: 0.76rem; font-style: italic; padding: 0.5rem 0; }
.alr-c-more {
    margin-top: 0.55rem; background: transparent; border: 1px solid #d8e0ea; color: var(--primary-blue);
    border-radius: 6px; padding: 0.3rem; font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: all 0.12s;
}
.alr-c-more:hover { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }

.alr-pr-link { text-decoration: none; color: inherit; display: block; }
.alr-pr-off { cursor: default; }
.alr-pr { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 0.4rem; padding: 0.24rem 0.3rem; border-radius: 6px; transition: background 0.1s; }
.alr-pr-link:not(.alr-pr-off):hover .alr-pr { background: #eef4fb; }
.alr-pr-rank { font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700; color: #9aa7b3; font-size: 0.95rem; text-align: center; }
.alr-pr-main { min-width: 0; }
.alr-pr-nrow { display: flex; align-items: center; gap: 0.25rem; }
.alr-pr-name { font-weight: 700; color: var(--dark-blue); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alr-b-sub { background: #e3f0ff; color: var(--primary-blue); font-size: 0.56rem; font-weight: 700; padding: 0.02rem 0.28rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; flex-shrink: 0; }
.alr-b-ll { color: #d68a00; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
.alr-pr-meta { font-size: 0.68rem; color: var(--text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alr-pr-val { font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700; color: var(--primary-blue); font-size: 1rem; white-space: nowrap; }

.alr-modal-overlay { position: fixed; inset: 0; background: rgba(10,25,45,0.5); z-index: 9500; align-items: center; justify-content: center; }
.alr-modal-box { background: var(--white); border-radius: 12px; width: min(640px, 92vw); max-height: 84vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.alr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.2rem; border-bottom: 1px solid #eef1f5; }
.alr-modal-title { font-family: var(--font-display, "Barlow Condensed", "Arial Narrow", Arial, sans-serif); font-weight: 700; font-size: 1.2rem; color: var(--primary-blue); text-transform: uppercase; }
.alr-modal-close { background: transparent; border: none; font-size: 1.25rem; color: #99a; cursor: pointer; line-height: 1; }
.alr-modal-close:hover { color: #c0392b; }
.alr-modal-body-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.alr-modal-body { padding: 0.5rem 1rem 1rem; }
.alr-pr-modal { grid-template-columns: 28px 1fr auto; padding: 0.42rem 0.4rem; border-bottom: 1px solid #f2f4f7; }
.alr-pr-modal .alr-pr-name { font-size: 0.92rem; }
.alr-pr-modal .alr-pr-meta { font-size: 0.76rem; }
.alr-pr-modal .alr-pr-val { font-size: 1.2rem; }

/* =========================================================================
   RADAR POSICIONAL OPTA (pestaña Estadísticas) — filtros + pizza
   Reutiliza el lenguaje visual de los radares Wyscout/físicos.
   ========================================================================= */
.opta-block { display: flex; flex-direction: column; gap: 0.55rem; }

.opta-filters {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 0.6rem 0.9rem;
    background: #f6f9fc; border: 1px solid #e3ecf5;
    border-radius: 10px; padding: 0.6rem 0.7rem;
}
.opta-filters .pf-wy-toggle { margin-bottom: 0; flex: 0 0 auto; }
.opta-filters .pf-wy-btn { padding: 0.34rem 0.7rem; font-size: 0.82rem; }

.opta-selectores { display: flex; flex-wrap: wrap; gap: 0.55rem 0.7rem; flex: 1 1 auto; }
.opta-sel { display: flex; flex-direction: column; gap: 0.15rem; min-width: 150px; }
.opta-sel-wide { min-width: 220px; flex: 1 1 240px; }
.opta-sel-min { min-width: 110px; max-width: 130px; }
.opta-sel-lbl {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: #6b7d8f; font-weight: 600;
}
.opta-dd .Select-control, .opta-dd .Select__control {
    border-radius: 8px; border-color: #d6e2ef; min-height: 34px; font-size: 0.85rem;
}
.opta-min-input {
    width: 100%; height: 34px; border: 1px solid #d6e2ef; border-radius: 8px;
    padding: 0 0.55rem; font-size: 0.85rem; color: var(--primary-blue);
}

.opta-seccion-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opta-sec-btn {
    background: var(--white); border: 1px solid #d6e2ef; color: var(--primary-blue);
    border-radius: 999px; padding: 0.28rem 0.75rem; font-size: 0.8rem;
    cursor: pointer; transition: background 0.12s, color 0.12s;
}
.opta-sec-btn:hover { background: #eef3f9; }
.opta-sec-btn.active {
    background: var(--primary-blue); color: var(--white); border-color: var(--primary-blue);
}

/* un solo radar centrado, no a todo el ancho */
.opta-radars-row { justify-content: center; }
.opta-radars-row .wy-radar-card { flex: 0 1 560px; max-width: 620px; }

/* Opciones del dropdown Opta en una sola línea (evita solape por virtualización) */
.opta-dd .Select-menu-outer, .opta-dd .VirtualizedSelectFocusedOption { z-index: 30; }
.opta-dd .Select-option,
.opta-dd .VirtualizedSelectOption {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.35;
}
.opta-dd .Select-value-label { white-space: nowrap; }