#dates .active {
    background-color: var(--green-900);
    color: var(--neutral-600);
}

.grupo {
    margin-top: 24px;
}

.grupo table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 16px;
    overflow: hidden;
}

.grupo table th,
.grupo table td {
    border: 0;
    padding: 0.5rem;
    text-align: center;
}

.grupo table th {
    background-color: var(--green-700);
    color: #fff;
}
.grupo table tr:nth-child(even) td {
    background-color: var(--neutral-300);
    color: var(--green-700);
}
.grupo table tr:nth-child(odd) td {
    background-color: var(--neutral-100);
    color: var(--green-700);
}


/* Estilos para la sección de eliminatorias */
.eliminatorias {
    margin-top: 24px;
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    align-items: stretch;
    --connector-color: var(--green-700);
    --connector-stroke: 2px;
    --connector-gap: 0.28rem;
    --connector-curve-width: 1.35rem;
    --connector-height-octavos: 72px;
    --connector-height-cuartos: 112px;
    --connector-height-semifinal: 116px;
    --connector-y-nudge-octavos: 0px;
    --connector-y-nudge-cuartos: -1px;
    --connector-y-nudge-semifinal-top: -1px;
    --connector-y-nudge-semifinal-bottom: 1px;
}

.eliminatorias > div {
    display: flex;
    flex-direction: column;
}

.eliminatorias .fase {
    margin: 1rem 0;
    flex: 1;
    min-width: 300px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    align-self: stretch;
    position: relative;
}

.eliminatorias .cuadrante {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    gap: 1rem;
}

.eliminatorias .partido {
    position: relative;
}

.eliminatorias .octavos .cuadrante {
    gap: 11rem;
}

.eliminatorias > :nth-child(1),
.eliminatorias > :nth-child(2),
.eliminatorias > :nth-child(8),
.eliminatorias > :nth-child(9) {
    --connector-current-height: var(--connector-height-octavos);
    --connector-current-nudge: var(--connector-y-nudge-octavos);
}

.eliminatorias > :nth-child(3),
.eliminatorias > :nth-child(7) {
    --connector-current-height: var(--connector-height-cuartos);
    --connector-current-nudge: var(--connector-y-nudge-cuartos);
}

.eliminatorias > :nth-child(5) {
    --connector-current-height: var(--connector-height-semifinal);
}

.eliminatorias > :nth-child(1) .cuadrante .partido:first-child::after,
.eliminatorias > :nth-child(2) .cuadrante .partido:first-child::after,
.eliminatorias > :nth-child(3) .cuadrante:first-child .partido::after {
    content: "";
    position: absolute;
    top: calc(50% + var(--connector-current-nudge));
    right: calc((var(--connector-gap) + var(--connector-curve-width)) * -1);
    width: var(--connector-curve-width);
    height: var(--connector-current-height);
    border-top: var(--connector-stroke) solid var(--connector-color);
    border-right: var(--connector-stroke) solid var(--connector-color);
    border-top-right-radius: 100vw;
    pointer-events: none;
}

.eliminatorias > :nth-child(1) .cuadrante .partido:last-child::after,
.eliminatorias > :nth-child(2) .cuadrante .partido:last-child::after,
.eliminatorias > :nth-child(3) .cuadrante:last-child .partido::after {
    content: "";
    position: absolute;
    top: calc(50% - var(--connector-current-height) + var(--connector-current-nudge));
    right: calc((var(--connector-gap) + var(--connector-curve-width)) * -1);
    width: var(--connector-curve-width);
    height: var(--connector-current-height);
    border-bottom: var(--connector-stroke) solid var(--connector-color);
    border-right: var(--connector-stroke) solid var(--connector-color);
    border-bottom-right-radius: 100vw;
    pointer-events: none;
}

.eliminatorias > :nth-child(9) .cuadrante .partido:first-child::before,
.eliminatorias > :nth-child(8) .cuadrante .partido:first-child::before,
.eliminatorias > :nth-child(7) .cuadrante:first-child .partido::before {
    content: "";
    position: absolute;
    top: calc(50% + var(--connector-current-nudge));
    left: calc((var(--connector-gap) + var(--connector-curve-width)) * -1);
    width: var(--connector-curve-width);
    height: var(--connector-current-height);
    border-top: var(--connector-stroke) solid var(--connector-color);
    border-left: var(--connector-stroke) solid var(--connector-color);
    border-top-left-radius: 100vw;
    pointer-events: none;
}

.eliminatorias > :nth-child(9) .cuadrante .partido:last-child::before,
.eliminatorias > :nth-child(8) .cuadrante .partido:last-child::before,
.eliminatorias > :nth-child(7) .cuadrante:last-child .partido::before {
    content: "";
    position: absolute;
    top: calc(50% - var(--connector-current-height) + var(--connector-current-nudge));
    left: calc((var(--connector-gap) + var(--connector-curve-width)) * -1);
    width: var(--connector-curve-width);
    height: var(--connector-current-height);
    border-bottom: var(--connector-stroke) solid var(--connector-color);
    border-left: var(--connector-stroke) solid var(--connector-color);
    border-bottom-left-radius: 100vw;
    pointer-events: none;
}

.eliminatorias > :nth-child(5) .cuadrante:first-child .partido::before,
.eliminatorias > :nth-child(5) .cuadrante:first-child .partido::after,
.eliminatorias > :nth-child(5) .cuadrante:last-child .partido::before,
.eliminatorias > :nth-child(5) .cuadrante:last-child .partido::after {
    content: "";
    position: absolute;
    width: var(--connector-curve-width);
    height: var(--connector-current-height);
    pointer-events: none;
}



@media (prefers-color-scheme: dark) {
    #dates .active {
        background-color: var(--neutro-200);
        color: var(--green-900);
    }

    .eliminatorias {
        --connector-color: var(--neutral-300);
    }
}