.head {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 20px;
    background: url('../../multimedia/Fondo-Card1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #353941;
    border-radius: 10px;
}

.head>svg {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: var(--textoPrincipalColor);
}

.fase {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    background-color: #081018;
    overflow-x: auto;
}

.fase li {
    padding: 5px;
    border-radius: 5px;
}

.fase .select {
    border-bottom: 1px solid var(--textoPrincipalColor);   
}

.fase .select a {
    color: var(--textoPrincipalColor);
}

.fase li a{
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
}

.grupos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding-top: 0;
    gap: 20px;
}

.grupos .grupo {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.grupos>.grupo>h1 {
    font-size: 14px;
}

.card-partido {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    margin-top: 10px;
}

.card-partido .head-partido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #353941;
}

.card-partido .head-partido ul {
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: space-between;
    gap: 10px;
}

.card-partido .head-partido ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.card-partido .head-partido h1 {
    font-size: 10px;
    color: var(--textoPrincipalColor);
}

.contenido-partido {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenido-partido .equipo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.contenido-partido .equipo h1 {
    font-weight: 400;
}

.contenido-partido .marcador {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contenido-partido .marcador ul {
    display: flex;
    list-style: none;
    gap: 5px;
    margin: 10px;
    align-items: center;
    justify-content: center;
}

.contenido-partido .marcador ul li {
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
}

.contenido-partido .estado {
    display: block;
    padding: 10px;
    border: 1px solid #353941;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

.contenido-partido .estado p {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--textoPrincipalColor);
    text-align: center;
}

.contenido-partido {
    justify-content: space-between;
}
 
.contenido-partido .equipo {
    width: 38%;
    min-width: 0;
    overflow: hidden;
}
 
.contenido-partido .equipo.Eq1 {
    justify-content: flex-end;
}
 
.contenido-partido .equipo.Eq2 {
    justify-content: flex-start;
}
 
.contenido-partido .marcador {
    width: 24%;
    flex-shrink: 0;
}
 
.contenido-partido .equipo h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: clamp(11px, 1.4vw, 20px);
}
 
.contenido-partido .equipo img {
    flex-shrink: 0;
}

.contenido-partido {
    gap: 20px;
}
 
.card-partido[data-status="SCHEDULED"] .estado p {
    color: #767981;
}
.card-partido[data-status="LIVE"] .estado p {
    color: #f4c51e;
}

/** ------------------------------------------------------ **/
/** ----------------------- MOBILE ----------------------- **/
/** ------------------------------------------------------ **/

@media (max-width: 1000px) {

    .head>h1{
        font-size: 14px;
    }

    .head>p {
        font-size: 10px;
        color: #696a73;
    }

    .head>svg {
        width: 30px;
        height: 30px;
    }

    .fase {
        width: 100%;
    }

    .container>div {
        width: 100%;
    }

    .responsive-pc1 {
        width: 100%;
    }

    .card-partido .head-partido ul li svg {
        width: 15px;
        height: 15px;
        color: #696a73;
    }

    .card-partido .head-partido ul li p {
        font-size: 8px;
        color: #696a73;
    }

    .contenido-partido .equipo img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .contenido-partido .equipo h1 {
        font-size: 12px;
    }

    .filtros {
        display: none;
    }
}

/** -------------------------------------------------- **/
/** ----------------------- PC ----------------------- **/
/** -------------------------------------------------- **/

@media (min-width: 1000px) {
    .container {
        width: 100%;
        margin: 10px;
    }

    .head>h1{
        font-size: 22px;
    }

    .head>p {
        font-size: 12px;
        color: #696a73;
    }

    .head>svg {
        width: 40px;
        height: 40px;
    }

    .fase {
        width: 100%;
        gap: 20%;
        align-items: center;
        justify-content: center;
    }

    .container>.responsive-pc1 {
        display: flex;
        width: 100%;
        gap: 20px;
        justify-content: space-between;
    }

    .container>.responsive-pc1>.responsive-pc2 {
        width: 75%;
    }

    .card-partido {
        background-color: #081018;
    }

    .card-partido .head-partido ul li svg {
        width: 20px;
        height: 20px;
        color: #696a73;
    }

    .card-partido .head-partido ul li p {
        font-size: 9px;
        color: #696a73;
    }

    .contenido-partido {
        gap: 40px;
    }

    .contenido-partido .equipo img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .contenido-partido .equipo h1 {
        font-size: 14px;
    }

    .filtros {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        width: 25%;
        max-height: 500px;
        padding: 10px;
        border: 1px solid #353941;
        border-radius: 10px;
        background-color: #081018;
    }

    .filtros>.title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filtros>.title>svg {
        color: var(--textoPrincipalColor);
    }

    .filtros .grupo, .filtros .fecha, .filtros .estado {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .filtros .grupo select {
        margin-left: 10px;
        width: 80%;
        height: 40px;
        padding: 10px;
        border: 1px solid #353941;
        border-radius: 10px;
        background-color: #081018;
        color: white;
        font-family: "Goldman", sans-serif;
    }

    .filtros .grupo select:focus {
        border-color: var(--textoPrincipalColor);
    }

    .filtros .grupo select option {
        font-family: "Goldman", sans-serif;
    }

    .filtros .fecha input {
        margin-left: 10px;
        margin-right: 10px;
        width: 80%;
        height: 40px;
        padding: 10px;
        border: 1px solid #353941;
        border-radius: 10px;
        background-color: #081018;
        color: white;
        font-family: "Goldman", sans-serif;
    }

    .filtros .estado .inputs-estado {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .filtros .estado .inputs-estado input {
        display: none;
    }

    .filtros .estado .inputs-estado label {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
        font-size: 14px;
        cursor: pointer;
    }

    .filtros .estado .inputs-estado label::before {
        display: flex;
        align-items: center;
        justify-content: center;
        content: "";
        width: 16px;
        height: 16px;
        border: 2px solid #696a73;
        border-radius: 4px;
        transition: 0.2s;
    }

    .filtros .estado .inputs-estado input:checked + label::before {
        background: var(--textoPrincipalColor);
        border-color: var(--textoPrincipalColor);
        color: #081018;
        content: "✓";
        
    }

    .filtros .estado .info-estado {
        display: flex;
        flex-direction: column;
        margin: 10px;
        padding: 10px;
        border: 1px solid #353941;
        border-radius: 10px;
        gap: 10px;
    }

    .filtros .estado .info-estado li {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .filtros .estado .info-estado li span {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }

    .filtros .estado .info-estado li p {
        font-size: 14px;
    }
}