/* Estilos para los recuadros del bracket */
.bracket {
    display: flex;
    justify-content: center; /* Alinear al centro */
    margin: 40px;
    flex-wrap: wrap; /* Permitir que las rondas se ajusten en pantallas pequeñas */
}

.round {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30px; /* Margen derecho para separar las rondas */
    flex-basis: 100%; /* Para hacer que las rondas ocupen el 100% del ancho en pantallas pequeñas */
}

.matchup {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team {
    padding: 25px;
    margin: 10px 0;
    border: 1px solid #ccc;
    text-align: center;
    width: 200px;
    background-color: #f9f9f9; /* Color de fondo predeterminado */
    border-radius: 8px; /* Esquinas redondeadas */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.round-1 .team {
    margin: 35px 0;
    background-color: #d7ba6e;
    color: white;
}

.round-2 .team {
    margin: 10px 0;
    background-color: #5b5a58;
    color: white;
}

.round-3 .team {
    margin: 150px 0;
    background-color: #237284;
    color: white;
}

.round-4 .team {
    margin: 330px 0;
    background-color: #134a56;
    color: white;
}

.final-round .team {
    margin: 700px 0;
    background-color: #8eda97;
    border-color: #c3e6cb;
    color: white;
}

/* Media Queries para hacer el diseño responsivo */
@media (min-width: 768px) {
    .round {
        flex-basis: calc(25% - 20px); /* Ocupa un cuarto del ancho en pantallas medianas */
        
    }

    .round-2 .team {
        margin: 97px 0;
    }

    .round-3 .team {
        margin: 200px 0;
    }

    .round-4 .team {
        margin: 400px 0;
    }

    .final-round .team {
        margin: 800px 0;
    }
}

@media (min-width: 1024px) {
    .round {
        flex-basis: calc(20% - 20px); /* Ocupa un quinto del ancho en pantallas grandes */
    }

    .round-2 .team {
        margin: 100px 0;
    }

    .round-3 .team {
        margin: 250px 0;
    }

    .round-4 .team {
        margin: 500px 0;
    }

    .final-round .team {
        margin: 1000px 0;
    }
}

@media (min-width: 1440px) {
    .round {
        flex-basis: calc(16.66% - 20px); /* Ocupa un sexto del ancho en pantallas muy grandes */
    }

    .round-2 .team {
        margin: 120px 0;
    }

    .round-3 .team {
        margin: 300px 0;
    }

    .round-4 .team {
        margin: 600px 0;
    }

    .final-round .team {
        margin: 1200px 0;
    }
}