.stats-table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-bottom: 0.25rem;
    touch-action: pan-x;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.12);
}

/* Chrome / Edge */
.stats-table-wrapper::-webkit-scrollbar {
    height: 10px;
}

.stats-table-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.stats-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 999px;
}

/*
    Nota: styles.css importa minimal-table.css que aplica:
    table:not(.jornadas-table) { width: 100%; }
    Ese selector es más específico que `.stats-table`, así que aquí usamos
    `.stats-table-wrapper .stats-table` para sobrescribirlo y permitir overflow.
*/
.stats-table-wrapper .stats-table {
    display: inline-table;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

.stats-table th, .stats-table td { 
    padding: 0.5em; 
    text-align: center; 
    white-space: nowrap;
}

/* Columna Jugador: nombre y apellido en 2 líneas */
.stats-table td.player-name-cell {
    white-space: normal;
    text-align: left;
}

.stats-table td.player-name-cell .player-first,
.stats-table td.player-name-cell .player-last {
    display: block;
    line-height: 1.1;
}

.stats-table th { 
    background: #222;
    text-align: center !important;
}

.stats-title { 
    margin-top: 2em; 
    font-size: 1.3em; 
}

/* Marcador (equipos + logos) */
.marcador-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.marcador-team {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.marcador-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.marcador-vs {
    opacity: 0.85;
}

/* Resaltar solo la columna de Valoración */
.stats-table th.col-valoracion,
.stats-table td.col-valoracion {
    background-color: #1e88e5;
    color: #000000;
    font-weight: 700;
}

/* =========================
   Resumen de partido (estilo propio inspirado)
   ========================= */
:root {
    --home-color: #546e93;
    --away-color: #1f2937;
    --panel-bg: rgba(255, 255, 255, 0.06);
    --panel-border: rgba(255, 255, 255, 0.12);
}

.match-summary {
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--panel-bg);
    backdrop-filter: blur(6px);
}

.match-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.team {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.team-away {
    justify-content: flex-end;
}

.team-logo {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    object-fit: contain;
}

.team-name {
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: clamp(12px, 1.2vw, 16px);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-center {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
}

.score-boxes {
    display: grid;
    grid-template-columns: 84px 84px;
    gap: 0.75rem;
}

.score {
    width: 84px;
    height: 64px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
}

.score-home { border-color: color-mix(in srgb, var(--home-color) 70%, transparent); }
.score-away { border-color: color-mix(in srgb, var(--away-color) 70%, transparent); }

.match-meta {
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.9;
}

.match-date {
    font-weight: 650;
}

.match-compare {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
}

.donuts {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.donut-card {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
}

.donut {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    background:
        conic-gradient(var(--accent, #999) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.12) 0);
    position: relative;
}

.donut::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.donut-label {
    font-weight: 900;
    letter-spacing: 0.03em;
}

.donut-sub {
    font-size: 0.85rem;
    opacity: 0.9;
    text-align: center;
    line-height: 1.2;
}

.bars {
    display: grid;
    gap: 0.5rem;
}

.bar-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
}

.bar-label {
    font-size: 0.95rem;
    opacity: 0.95;
    white-space: nowrap;
}

.bar-side {
    position: relative;
    height: 14px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bar-side .bar-fill {
    display: block;
    height: 10px;
    border-radius: 999px;
    width: var(--w, 0%);
}

.bar-left {
    justify-content: flex-end;
}

.bar-left .bar-fill {
    background: var(--home-color);
}

.bar-right {
    justify-content: flex-start;
}

.bar-right .bar-fill {
    background: var(--away-color);
}

.bar-value {
    font-weight: 800;
    font-size: 0.9rem;
    opacity: 0.95;
    min-width: 2ch;
}

@media (max-width: 900px) {
    .match-header {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .team-away {
        justify-content: center;
    }
    .donuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================
    Pestañas (RESUMEN / ESTADISTICAS / TIROS)
   ========================= */
.match-tabs {
    display: flex;
    gap: 0.5rem;
    background: #546e93; /* verde estilo barra */
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    margin: 0 0 1rem;
}

.match-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
}

.match-tab:hover {
    background: rgba(255, 255, 255, 0.14);
}

.match-tab.is-active {
    background: rgba(0, 0, 0, 0.18);
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}

.tab-empty {
    padding: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

/* =========================
   Tiros (cancha + puntos)
   ========================= */
.shots-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
}

.shots-kpi {
    font-size: 1rem;
    opacity: 0.95;
}

.shots-legend {
    display: inline-flex;
    gap: 0.9rem;
    align-items: center;
}

.legend-item {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    font-weight: 650;
    opacity: 0.95;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

/* Leyenda por equipo (home/away) */
.dot-home-made { background: #43a047; }
.dot-home-miss { background: transparent; border: 2px solid #43a047; }
.dot-away-made { background: #1e88e5; }
.dot-away-miss { background: transparent; border: 2px solid #1e88e5; }

.shots-kpi-team {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}

.shots-kpi-team.shots-home b { color: #a5d6a7; }
.shots-kpi-team.shots-away b { color: #90caf9; }

.shots-layout {
    display: flex;
    justify-content: center;
}

.match-court {
    position: relative;
    display: inline-block;
    max-width: 980px;
    width: 100%;
}

.match-court .imagen_cancha {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.punto_tiro {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

/* Tiros diferenciados por equipo */
.punto_tiro.home.made { background: #43a047; }
.punto_tiro.home.miss { background: transparent; border: 2px solid #43a047; box-shadow: none; }

.punto_tiro.away.made { background: #1e88e5; }
.punto_tiro.away.miss { background: transparent; border: 2px solid #1e88e5; box-shadow: none; }

.punto_tiro.unknown.made { background: rgba(255, 255, 255, 0.7); }
.punto_tiro.unknown.miss { background: transparent; border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: none; }

/* =========================
   RESUMEN (mejor jugador por equipo)
   ========================= */
.best-players {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.best-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1rem;
}

.best-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.best-team {
    margin-left: 2%;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.best-team-logo {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    object-fit: contain;
}

.best-team-name {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.best-badge {
    font-weight: 900;
    letter-spacing: 0.03em;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
}

.best-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.best-player-photo {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.9);
}

.best-player-name {
    font-weight: 950;
    font-size: 1.05rem;
    line-height: 1.15;
}

.best-player-sub {
    opacity: 0.92;
    margin-top: 0.2rem;
}

.best-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.best-item {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.5rem 0.55rem;
    background: rgba(0, 0, 0, 0.14);
    text-align: center;
}

.best-item.is-valoracion {
    border-color: rgba(30, 136, 229, 0.8);
    background: rgba(30, 136, 229, 0.18);
}

.best-label {
    font-weight: 900;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
    opacity: 0.95;
}

.best-value {
    font-weight: 900;
    margin-top: 0.15rem;
}

@media (max-width: 900px) {
    .best-players {
        grid-template-columns: 1fr;
    }
    .best-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .best-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}