/* Estilos generales del bracket */
.tournament-bracket {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
    padding-right: 260px; /* Espacio para scrollbar */
    background-color: #010c18;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 100vh;
    width: 100%;
    gap: 40px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
/* Lado izquierdo: de arriba hacia abajo */
.bracket-left.bracket-fase-1 { margin-top: 0px; }
.bracket-left.bracket-fase-2 { margin-top: 80px; }
.bracket-left.bracket-fase-3 { margin-top: 160px; } /* octavos*/
.bracket-left.bracket-fase-4 { margin-top: 240px; } /* cuartos */
.bracket-left.bracket-fase-5 { margin-top: 320px; } /* semifinales */

/* Lado derecho: de abajo hacia arriba (espejo) */
.bracket-right.bracket-fase-1 { margin-top: 80px; } /* semifinales */
.bracket-right.bracket-fase-2 { margin-top: 0px; } /* cuartos */
.bracket-right.bracket-fase-3 { margin-top: 0px; } /* octavos*/
.bracket-right.bracket-fase-4 { margin-top: 80px; }
.bracket-right.bracket-fase-5 { margin-top: 0px; }
/* Contenedores principales */
.bracket-left, .bracket-center, .bracket-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    padding-top: 40px;
}

.bracket-left, .bracket-right {
    gap: 60px;
}

.bracket-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Columnas del bracket */
.bracket-phase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 220px;
    width: 220px;
    flex-shrink: 0;
}

/* Títulos de las fases */
.bracket-phase h4 {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 15px;
    background-color: #0424b3;
    color: white;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(4, 36, 179, 0.3);
    min-width: 160px;
}

/* Contenedor de partidos dentro de cada fase */
.bracket-phase .matches-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* Partidos individuales */
.bracket-match {
    background: linear-gradient(180deg, rgba(13,110,253,0.12) 0%, rgba(13,110,253,0.06) 100%);
    border: 1px solid #00fff0;
    border-radius: 10px;
    box-shadow:
        0 0 4px #0d6efd,
        0 0 10px #0d6efd,
        0 0 20px #0d6efd;
    padding: 14px;
    position: relative;
    min-height: 90px;
    width: 100%;
    transition: all 0.3s ease;
}

/* Efecto hover */
.bracket-match:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 6px #0d6efd,
        0 0 14px #0d6efd,
        0 0 24px #0d6efd;
}

/* Equipos */
.team {
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    color: white;
    font-size: 0.9rem;
    background-color: rgba(5, 7, 114, 0.411);
}

.team:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.team.winner {
    background-color: rgba(0, 255, 240, 0.08);
    font-weight: 600;
    color: #ffffff;
    text-shadow:
        0 0 1px #00fff0,
        0 0 3px #00fff0;
    border: 1px solid rgba(0, 255, 240, 0.2);
}

/* Puntuación */
.score {
    font-weight: 600;
    margin-left: 12px;
    color: #ffffff;
    text-shadow:
        0 0 2px #00fff0,
        0 0 4px #00fff0;
    font-size: 1rem;
}

/* Información del partido */
.match-info {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    text-align: center;
}

.global-result {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 6px;
    text-align: center;
}

/* ===== CONEXIONES ENTRE PARTIDOS ===== */

/* Conexiones horizontales */
.bracket-match.has-next::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 50%;
    width: 25px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(13,110,253,0.7) 100%);
    box-shadow: 0 0 4px #00fff0;
    z-index: 2;
}

.bracket-match.has-prev::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 50%;
    width: 25px;
    height: 2px;
    background: linear-gradient(270deg, rgba(255,255,255,0.7) 0%, rgba(13,110,253,0.7) 100%);
    box-shadow: 0 0 4px #00fff0;
    z-index: 2;
}

/* Conexiones verticales para escalonado */
.bracket-phase:not(:first-child) {
    position: relative;
}
.bracket-phase:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #00fff0 0%, #0d6efd 100%);
    opacity: 0.5;
    z-index: 1;
}

/* Estilo especial para final */
.bracket-center .bracket-phase:first-child {
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 18px #bfc9d1, 0 0 36px #878a8d;
    background-color: #061958;
    border-radius: 16px;
    padding: 40px 18px 18px 18px;
    position: relative;
    min-width: 260px;
}

/* Copa tipo Champions League plateada arriba del final */
.bracket-center .bracket-phase:first-child::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 110px;
    height: 110px;
    background: none;
    z-index: 10;
    background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="silver" x1="30" y1="10" x2="30" y2="50" gradientUnits="userSpaceOnUse"><stop stop-color="%23f5f6fa"/><stop offset="0.5" stop-color="%23bfc9d1"/><stop offset="1" stop-color="%23e6e6e6"/></linearGradient><filter id="neon" x="-10" y="-10" width="80" height="80" filterUnits="userSpaceOnUse"><feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="%23bfc9d1" flood-opacity="0.7"/></filter></defs><ellipse cx="30" cy="52" rx="12" ry="4" fill="%23bfc9d1" fill-opacity="0.15"/><path d="M20 15c-6 0-11 2-11 7 0 5 5 11 12 11" stroke="%23bfc9d1" stroke-width="2" fill="none"/><path d="M40 15c6 0 11 2 11 7 0 5-5 11-12 11" stroke="%23bfc9d1" stroke-width="2" fill="none"/><path d="M18 15c0 20 7 27 12 27s12-7 12-27" fill="url(%23silver)" stroke="%23bfc9d1" stroke-width="2" filter="url(%23neon)"/><ellipse cx="30" cy="15" rx="12" ry="5" fill="url(%23silver)" stroke="%23bfc9d1" stroke-width="1.5"/><ellipse cx="30" cy="15" rx="8" ry="3" fill="%23e6e6e6" fill-opacity="0.7"/><rect x="26" y="42" width="8" height="5" rx="2" fill="url(%23silver)" stroke="%23bfc9d1" stroke-width="1.5"/><rect x="24" y="47" width="12" height="4" rx="2" fill="%23bfc9d1" fill-opacity="0.6" stroke="%23bfc9d1" stroke-width="1"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
/* CORREGIDO: Copa debe hacerse más grande en móvil */
@media (max-width: 768px) {
    .bracket-center .bracket-phase:first-child::before {
        width: 80px !important;
        height: 80px !important;
        top: -40px !important;
        left: 50% !important;
        transform: translate(-50%, -60%) !important;
    }
}
@media (max-width: 576px) {
    .bracket-center .bracket-phase:first-child::before {
        width: 100px !important;
        height: 100px !important;
        top: -50px !important;
        left: 50% !important;
        transform: translate(-50%, -60%) !important;
    }
}

/* Estilo para tercer lugar */
.bracket-center .bracket-phase.third-place {
    margin-top: 30px;
    border: 1px solid #ffffff;
    box-shadow: 0 0 8px #bfc9d1, 0 0 16px #bfc9d1;
    border-radius: 10px;
    padding: 16px;
    background-color: rgba(108, 117, 125, 0.08);
    min-width: 240px;
}

/* Scroll personalizado */
.tournament-bracket::-webkit-scrollbar {
    height: 6px;
}
.tournament-bracket::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0.05);
    border-radius: 3px;
}
.tournament-bracket::-webkit-scrollbar-thumb {
    background: rgba(13, 110, 253, 0.7);
    border-radius: 3px;
}
.tournament-bracket::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 94, 215, 0.7);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Desktop - CON ESCALONADO PARA TOURNAMENT BRACKET */
@media (min-width: 1025px) {
    .tournament-bracket {
        justify-content: flex-start;
        align-items: flex-start;
        overflow-x: auto;
        width: 100vw;
        min-width: 100vw;
    }
    
    /* ESCALONADO PARA DESKTOP - Tournament bracket visual */
    .bracket-left .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-left .bracket-phase:nth-child(2) { margin-top: 80px; }
    .bracket-left .bracket-phase:nth-child(3) { margin-top: 160px; }
    .bracket-left .bracket-phase:nth-child(4) { margin-top: 240px; }
    .bracket-left .bracket-phase:nth-child(5) { margin-top: 320px; }
    
    .bracket-right .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-right .bracket-phase:nth-child(2) { margin-top: 80px; }
    .bracket-right .bracket-phase:nth-child(3) { margin-top: 160px; }
    .bracket-right .bracket-phase:nth-child(4) { margin-top: 240px; }
    .bracket-right .bracket-phase:nth-child(5) { margin-top: 320px; }
    
    /* Centro elevado para destacar la final */
    .bracket-center {
        margin-top: 120px;
    }
}

/* Tablets y pantallas medianas */
@media (max-width: 1024px) and (min-width: 769px) {
    .tournament-bracket {
        justify-content: flex-start;
        padding: 15px;
        gap: 30px;
    }
    
    /* ESCALONADO PARA TABLETS */
    .bracket-left .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-left .bracket-phase:nth-child(2) { margin-top: 60px; }
    .bracket-left .bracket-phase:nth-child(3) { margin-top: 120px; }
    .bracket-left .bracket-phase:nth-child(4) { margin-top: 180px; }
    .bracket-left .bracket-phase:nth-child(5) { margin-top: 240px; }
    
    .bracket-right .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-right .bracket-phase:nth-child(2) { margin-top: 60px; }
    .bracket-right .bracket-phase:nth-child(3) { margin-top: 120px; }
    .bracket-right .bracket-phase:nth-child(4) { margin-top: 180px; }
    .bracket-right .bracket-phase:nth-child(5) { margin-top: 240px; }
    
    .bracket-center {
        margin-top: 90px;
    }
    
    .bracket-phase {
        min-width: 200px;
        width: 200px;
    }
    .bracket-phase h4 {
        font-size: 0.95rem;
        padding: 8px 14px;
        margin-bottom: 18px;
        min-width: 140px;
    }
    .bracket-match {
        padding: 12px;
        min-height: 80px;
    }
    .team {
        padding: 8px;
        font-size: 0.85rem;
    }
    .bracket-center .bracket-phase:first-child {
        min-width: 240px;
        padding: 35px 15px 15px 15px;
    }
    .bracket-center .bracket-phase:first-child::before {
        width: 50px;
        height: 50px;
    }
    .bracket-center .bracket-phase.third-place {
        min-width: 220px;
        padding: 14px;
    }
}

/* Móviles - CON ESCALONADO VISUAL */
@media (max-width: 768px) {
    .tournament-bracket {
        padding: 10px;
        gap: 20px;
        min-height: auto;
        padding-bottom: 60px;
        justify-content: flex-start;
    }
    
    /* ESCALONADO VISUAL PARA MÓVILES */
    .bracket-left .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-left .bracket-phase:nth-child(2) { margin-top: 50px; }
    .bracket-left .bracket-phase:nth-child(3) { margin-top: 100px; }
    .bracket-left .bracket-phase:nth-child(4) { margin-top: 150px; }
    .bracket-left .bracket-phase:nth-child(5) { margin-top: 200px; }
    
    .bracket-right .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-right .bracket-phase:nth-child(2) { margin-top: 50px; }
    .bracket-right .bracket-phase:nth-child(3) { margin-top: 100px; }
    .bracket-right .bracket-phase:nth-child(4) { margin-top: 150px; }
    .bracket-right .bracket-phase:nth-child(5) { margin-top: 200px; }
    
    .bracket-center {
        margin-top: 75px;
    }
    
    .bracket-phase {
        min-width: 160px;
        width: 160px;
    }
    .bracket-phase h4 {
        font-size: 0.85rem;
        padding: 6px 10px;
        margin-bottom: 12px;
        min-width: 100px;
    }
    .bracket-match {
        padding: 8px;
        min-height: 70px;
    }
    .team {
        padding: 6px;
        font-size: 0.75rem;
        margin: 4px 0;
    }
    .score {
        font-size: 0.9rem;
        margin-left: 8px;
    }
    .match-info {
        font-size: 0.7rem;
        margin-top: 8px;
        padding-top: 8px;
    }
    .bracket-center .bracket-phase:first-child {
        min-width: 200px;
        padding: 25px 10px 10px 10px;
    }
    .bracket-center .bracket-phase:first-child::before {
        width: 40px;
        height: 40px;
    }
    .bracket-center .bracket-phase.third-place {
        min-width: 180px;
        padding: 12px;
        margin-top: 20px;
    }
    .tournament-bracket::after {
        content: '← Desliza →';
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(13, 110, 253, 0.9);
        color: white;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        z-index: 1000;
        animation: fadeInOut 3s ease-in-out infinite;
        pointer-events: none;
        white-space: nowrap;
    }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Móviles pequeños */
@media (max-width: 576px) {
    .tournament-bracket {
        padding: 8px;
        gap: 15px;
    }
    
    /* ESCALONADO MÁS PRONUNCIADO EN MÓVILES PEQUEÑOS */
    .bracket-left .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-left .bracket-phase:nth-child(2) { margin-top: 60px; }
    .bracket-left .bracket-phase:nth-child(3) { margin-top: 120px; }
    .bracket-left .bracket-phase:nth-child(4) { margin-top: 180px; }
    .bracket-left .bracket-phase:nth-child(5) { margin-top: 240px; }
    
    .bracket-right .bracket-phase:nth-child(1) { margin-top: 0; }
    .bracket-right .bracket-phase:nth-child(2) { margin-top: 60px; }
    .bracket-right .bracket-phase:nth-child(3) { margin-top: 120px; }
    .bracket-right .bracket-phase:nth-child(4) { margin-top: 180px; }
    .bracket-right .bracket-phase:nth-child(5) { margin-top: 240px; }
    
    .bracket-center {
        margin-top: 90px;
    }
    
    .bracket-phase {
        min-width: 140px;
        width: 140px;
    }
    .bracket-phase h4 {
        font-size: 0.8rem;
        padding: 5px 8px;
        margin-bottom: 10px;
        min-width: 80px;
    }
    .bracket-match {
        padding: 7px;
        min-height: 65px;
    }
    .team {
        padding: 5px;
        font-size: 0.7rem;
    }
    .bracket-center .bracket-phase:first-child {
        min-width: 180px;
        padding: 20px 8px 8px 8px;
    }
    .bracket-center .bracket-phase:first-child::before {
        width: 35px;
        height: 35px;
    }
}

/* Optimización para pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
    .bracket-match:hover {
        transform: none;
        box-shadow:
            0 0 4px #0d6efd,
            0 0 10px #0d6efd,
            0 0 20px #0d6efd;
    }
    .team:hover {
        background-color: rgba(255, 255, 255, 0.03);
    }
    .tournament-bracket {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .bracket-phase {
        scroll-snap-align: center;
    }
}


    .overflow-auto {
        overflow-x: auto !important;
    }
    
    .progress {
        height: 6px;
        background-color: rgba(255,255,255,0.2);
    }
    
    .progress-bar {
        background: linear-gradient(90deg, #ffffff);
        box-shadow:
            0 0 8px #00fff0,
            0 0 16px #00fff0,
            0 0 32px #00fff0,
            0 0 64px #00fff0;
        border-radius: 10px;
        transition: box-shadow 0.3s, background 0.3s;
        border: 1.5px solid #00fff0;
        position: relative;
        height: 18px;
        min-height: 18px;
        max-height: 18px;
    }
    .progress {
        height: 18px;
        min-height: 18px;
        max-height: 18px;
    }
    .progress-bar::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 10px;
        box-shadow:
            0 0 12px 4px #00fff0,
            0 0 24px 8px #00fff0;
        opacity: 0.5;
        pointer-events: none;
    }
    
    .liga-card {
        transition: all 0.3s ease;
        color: #fff;
        
    }
    
    .liga-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgb(255, 255, 255), 0 0 12px 2px #00fff0, 0 0 24px 4px #00fff0 !important;
        border: 2px solid #00fff0 !important;
    }
    
    /* ===== ESTILOS PARA LOGOS ===== */
    .team-with-logo {
        display: flex;
        align-items: center;
        min-width: 0;
    }
    
    .team-logo-container {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .team-logo {
        width: 30px;
        height: 30px;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: inline-block;
    }
    
    .team-name {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ===== ESTILOS PARA TABLAS ===== */
    .table {
        width: 100%;
        margin: 0;
    }
    
    .table th, .table td {
        white-space: nowrap;
        padding: 0.5rem;
        font-size: 0.8rem;
        vertical-align: middle;
    }

    /* ===== TABLA DE POSICIONES ===== */
    .table-standings-container {
        position: relative;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        padding-bottom: 5px;
        
    }
    
    .table-standings {
        width: auto;
        min-width: 100%;
        margin: 0;
    }
    
    .table-standings th:first-child,
    .table-standings td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #0d3b66;
    }
    
    .table-standings th:nth-child(2),
    .table-standings td:nth-child(2) {
        min-width: 150px;
    }

    /* ===== ESTILOS PARA PESTAÑAS ===== */
    .nav-tabs-modern {
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-tabs-modern .nav-link {
        color: #0d3b66;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 0;
        padding: 12px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        margin-right: 5px;
    }
    
    .nav-tabs-modern .nav-link:hover,
    .nav-tabs-modern .nav-link.active {
        color: #fff;
    }
    
    .nav-tabs-modern .nav-link.active {
        background-color: #031194;
        font-weight: 600;
        text-shadow: 0 0 1px #00FFFF;
    }
    
    .nav-tabs-modern .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #28a745;
    }

    .table.table-striped.table-hover.align-middle {
        border: 2px solid #00fff0;
        border-radius: 0 !important;
    }
    /* ===== TABLA DE GOLEADORES ===== */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overflow-x: scroll;
    }
    .table-scorers {
        width: auto;
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
    }
    
    .table-scorers thead th {
        background-color: #031194;
        color: white;
        padding: 12px 15px;
        text-align: center;
        font-weight: 600;
        border: none;
        text-shadow: 0 0 5px #00FFFF;
        font-weight: bold;  
    }
    
    .table-scorers tbody tr {
        transition: all 0.3s ease;
    }
    
    .table-scorers tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    .table-scorers tbody td {
        padding: 12px 15px;
        vertical-align: middle;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .table-scorers .position-cell {
        font-weight: bold;
        color: white;
        background-color: #031194;
        border-radius: 5px 0 0 5px;
        text-shadow: 0 0 1px #00FFFF, 0 0 5px #00FFFF, 0 0 10px #00FFFF !important;
    }
    
    .table-scorers .player-cell{
        text-align: left;
        font-weight: 500;
        background-color: #031194 !important;
        color: white;
        padding-left: 1rem !important;
        text-shadow: 0 0 1px #00FFFF, 0 0 3px #00FFFF, 0 0 8px #00FFFF;
    }
    .table-scorers .team-cell {
        text-align: left;
        font-weight: 500;
        background-color: #031194 !important;
        color: white;
        padding-left: 0.5rem !important;
    }
    
    .table-scorers .team-cell {
        display: flex;
        align-items: center;
    }
    
    .table-scorers .goals-cell {
        font-weight: bold;
        color: white !important;
        background-color: #031194;
        border-radius: 0 5px 5px 0;
        text-shadow: 0 0 1px #00FFFF, 0 0 5px #00FFFF, 0 0 10px #00FFFF;
        text-align: center !important;
    }
    
    .goals-jornada {
        color: white !important;
        background-color: #031194 !important;
    }
    
    .jornadas-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        margin-top: 5px;
    }
    
.top-scorer .player-cell strong::after {
    content: " 👑";
    margin-left: 8px;
    font-size: 1.5em;
    color: #FFD700; /* Dorado */
    text-shadow:
        0 0 4px #FFD700,
        0 0 8px rgba(255, 215, 0, 0.8),
        0 0 12px rgba(255, 215, 0, 0.5),
        0 0 16px rgba(255, 215, 0, 0.3);
    animation: goldenPulse 2s infinite ease-in-out;
    vertical-align: middle;
}

/* Animación de brillo dorado premium */
@keyframes goldenPulse {
    0% {
        text-shadow:
            0 0 4px #FFD700,
            0 0 8px rgba(255, 215, 0, 0.8),
            0 0 12px rgba(255, 215, 0, 0.5),
            0 0 16px rgba(255, 215, 0, 0.3);
    }
    100% {
        text-shadow:
            0 0 6px #FFD700,
            0 0 12px rgba(255, 215, 0, 1),
            0 0 18px rgba(255, 215, 0, 0.8),
            0 0 25px rgba(255, 215, 0, 0.6);
    }
}

  
    /* ===== MEDIA QUERIES PARA MÓVILES ===== */
    @media (max-width: 768px) {
        /* Contenedor principal */
        .container {
            width: 100%;
            padding: 0 !important;
            margin: 0 auto !important;
        }
        
        /* Tablas responsivas */
        .table-responsive {
            overflow-x: auto !important;              /* Mostrar scroll solo cuando es necesario */
            overflow-y: auto !important;              /* Permite scroll vertical si es necesario */
            -webkit-overflow-scrolling: touch;        /* Mejora el scroll en iOS */
            touch-action: auto !important;            /* Permite gestos normales: scroll y zoom */
            display: block !important;                /* Asegura el comportamiento esperado del scroll */
            width: 100%;
            padding-bottom: 10px;
        }

        
        .table th {
            padding: 0.3rem;
            font-size: 0.7rem !important;
            border: 0.01px solid #ffffff !important;          /* Borde neón cian */
            box-shadow: 0 0 3px #00ffff, 0 0 6px #00ffff; 

        }
         .table td {
            padding: 0.3rem;
            font-size: 0.7rem !important;
            border: none !important;                         /* Limpieza del borde */
            box-shadow: 0 0 1px #00ffff, 0 0 3px #00ffff !important;  
            border-radius: 3px !important; /* Bordes redondeados */
        }

         /* Padding específico para columnas Local y Visitante */
        /* Local */
        table.table-striped thead th:nth-child(2) {
            background: #031194 !important;
            text-shadow: 0 0 1px #00FFFF, 0 0 3px #00FFFF, 0 0 8px #00FFFF;
        }
        table.table-striped tbody tr td:nth-child(2) {
            padding-right: 1.3rem !important;
            text-align: left !important;
            
        }

        /* Visitante */
        table.table-striped thead th:nth-child(4) {
            background: #031194 !important;
            text-shadow: 0 0 1px #00FFFF, 0 0 3px #00FFFF, 0 0 8px #00FFFF;
        }
        table.table-striped tbody tr td:nth-child(4) {
            padding-right: 1.3rem !important;
            text-align: left !important;
            
        }

        /* Fecha/Hora */
        table.table-striped thead th:nth-child(1) {
            background: #031194 !important;
            text-shadow: 0 0 1px #00FFFF, 0 0 3px #00FFFF, 0 0 8px #00FFFF;
        }
        table.table-striped tbody tr td:nth-child(1) {
            background: #fff !important;
            
        }

        /* Resultado */
        table.table-striped thead th:nth-child(3) {
            background: #031194 !important;
            text-shadow: 0 0 1px #00FFFF, 0 0 3px #00FFFF, 0 0 8px #00FFFF;
        }
        table.table-striped tbody tr td:nth-child(3) {
            background: #fff !important;
            
        }

        /* Estado */
        table.table-striped thead th:nth-child(5) {
            background: #031194 !important;
            text-shadow: 0 0 1px #00FFFF, 0 0 3px #00FFFF, 0 0 8px #00FFFF;
        }
        table.table-striped tbody tr td:nth-child(5) {
            background: #fff !important;
            
        }
        
       /* Tabla de posiciones en móvil */
    .table-standings-container {
        -webkit-overflow-scrolling: touch;
        touch-action: auto;               /* <-- Permite gestos normales: scroll y zoom */
        overflow-x: auto !important;      /* <-- auto en vez de scroll es más natural */
        overflow-y: auto !important;      /* <-- Por si hay desborde vertical en algunos casos */
        display: block !important;        /* <-- Forzar bloque para scroll horizontal correcto */
        padding-bottom: 15px;
        
    }

        
        .table-standings {
            width: auto;
        }
        
        .table-standings th:first-child,
        .table-standings td:first-child {
            z-index: 3;
        }
        
      /* Tabla de goleadores en móvil */
        .table-scorers thead th {
            padding: 0.5rem !important;
            font-size: 0.75rem !important;
            border: 0.01px solid #ffffff !important;          /* Borde neón cian */
           text-shadow: 0 0 1px #00FFFF, 0 0 5px #00FFFF, 0 0 10px #00FFFF;     /* Efecto neón */
            width: auto !important;
            overflow: hidden;                                /* Asegura control de contenido */
            white-space: nowrap;                             /* Evita salto de línea */
            text-overflow: ellipsis;
            touch-action: auto !important;                   /* Permite scroll y zoom */
        }

        .table-scorers tbody td {
            padding: 0.001rem !important;                     /* Más razonable que 0.001rem */
            font-size: 0.7rem !important;
            border: none !important;                         /* Limpieza del borde */
            box-shadow: 0 0 1px #00ffff, 0 0 3px #00ffff;     /* Efecto neón */
            width: auto !important;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            touch-action: auto !important;                   /* Permite scroll y zoom */
        }
        .table-scorers .player-cell{
        text-align: left;
        font-weight: 500;
        background-color: #031194 !important;
        color: white;
        padding-left: 1rem !important;
        text-shadow: 0 0 1px #00FFFF, 0 0 3px #00FFFF, 0 0 8px #00FFFF;
        padding-right: 0.5rem !important;
    }
    .table-scorers .team-cell {
        text-align: left;
        font-weight: 500;
        background-color: #031194 !important;
        color: white;
        padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
    }
        
        .table-scorers .goals-cell {
            text-align: center !important;
            display: table-cell !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            text-shadow: 0 0 1px #00FFFF, 0 0 5px #00FFFF, 0 0 10px #00FFFF;
        }
        
        .table-scorers .jornada-badge {
            font-size: 0.6rem;
            padding: 1px 4px;
            margin: 0 2px 2px 0;
        }
        
        
        
        /* Ajustes para logos */
        .team-logo {
            width: 18px !important;
            height: 18px !important;
        }
        
        /* Ajustes para pestañas */
        .nav-tabs-modern .nav-link {
            padding: 0.5rem;
            font-size: 0.9rem;
        }
        
        /* Asegurar que las tablas no tengan width 100% en móvil */
        .table {
            width: auto !important;
            min-width: 100%;
            
        }
    
    }


.double-tap-anim-up {
                            position: relative;
                            display: inline-block;
                            font-size: 2.5rem;
                            transform: rotateX(30deg);
                            text-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 1px 0 #fff;
                            animation: doubletap-finger-up 1.2s infinite;
                        }
                        @keyframes doubletap-finger-up {
                            0%, 100% { transform: rotateX(30deg) translateY(0);}
                            10% { transform: rotateX(30deg) translateY(8px);}
                            20% { transform: rotateX(30deg) translateY(0);}
                            30% { transform: rotateX(30deg) translateY(8px);}
                            40% { transform: rotateX(30deg) translateY(0);}
                        }
                        .tap-wave-up {
                            position: absolute;
                            left: 50%;
                            top: 0.22em; /* Ajusta la posición vertical para la punta del dedo */
                            width: 2.5rem;
                            height: 2.5rem;
                            background: rgba(0, 191, 255, 0.25);
                            border-radius: 50%;
                            transform: translate(-50%, -60%);
                            pointer-events: none;
                            opacity: 0;
                            animation: tapwave-up 1.2s infinite;
                            z-index: 1;
                        }
                        .tap-wave-up:nth-child(2) {
                            animation-delay: 0.2s;
                        }
                        @keyframes tapwave-up {
                            0% { opacity: 0; transform: translate(-50%, -60%) scale(0.7);}
                            10% { opacity: 0.7; transform: translate(-50%, -60%) scale(1);}
                            30% { opacity: 0.5; transform: translate(-50%, -60%) scale(1.4);}
                            50% { opacity: 0.2; transform: translate(-50%, -60%) scale(1.8);}
                            100% { opacity: 0; transform: translate(-50%, -60%) scale(2);}
                        }