.c-tab__content {
    overflow-x: auto;
    overflow-y: clip;
}

.cuadrante-playoffs {
    display: flex; /* Usar flexbox para el diseño de columnas */
    justify-content: space-between; /* Espacio entre las columnas */
    margin: 1.25rem 0; /* Espacio arriba y abajo */
}

.columna-categoria {
    flex: 1; /* Permitir que cada columna ocupe espacio igual */
    margin: 0 .5em; /* Margen entre columnas */
    padding: .5em; /* Espacio interno en cada columna */
    border: 0.063rem solid #ddd; /* Borde alrededor de cada columna */
    border-radius: 0.25rem; /* Bordes redondeados */ 
    background-color: var(--primary__color); /* Fondo naranja claro */
}

.titulo-categoria {
    text-align: center; /* Centrar el título de la categoría */
    font-weight: bold; /* Hacer el texto más destacado */
    margin-bottom: 1em; /* Espacio debajo del título */
}

.fila-partido {
    display: flex; /* Flexbox para alinear los equipos y resultados */
    justify-content: space-between; /* Espaciado entre equipos y resultados */
    align-items: center; /* Alinear verticalmente */
    margin: .5em 0; /* Espacio entre filas de partidos */
    padding: 1em; /* Espacio interno en cada fila */
    border: 0.063rem solid #ddd; /* Bordes entre partidos */
    border-radius: 0.25rem; /* Bordes redondeados */
    transition: background-color 0.3s; /* Transición suave para hover */
    width: 100%; /* Aumentar el ancho de la fila para llenar el espacio */
    box-shadow: 0 0.125rem 0.313rem rgba(0, 0, 0, 0.1); /* Sombra para un efecto de profundidad */
    cursor: pointer; /* Cambiar el cursor cuando se pasa por encima */
    background-color: var(--terciary__color); /* Fondo naranja claro */
    flex-wrap: wrap;
    column-gap: 1rem;
}

.fila-partido:hover {
    background-color: white; /* Color llamativo al pasar el cursor */
}

.columna-equipos {
    display: flex; /* Flexbox para mostrar el equipo y el icono juntos */
    align-items: center; /* Alinear verticalmente */
    flex: 1; /* Permitir que cada equipo ocupe espacio igual */
    justify-content: space-between; /* Espaciado entre nombre y icono */

}

.equipo {
    font-size: 1em;
    font-weight: bold;
}

.equipo.ganador {
    color: blue; /* Colorear equipo ganador de azul */
}

.icono-equipo {
    width: 31.25rem; /* Aumentar ancho de los iconos */
    height: 3.125rem; /* Aumentar alto de los iconos */
    margin-left: .5em; /* Margen entre nombre del equipo y icono */
}

.info-partido {
    text-align: center; /* Centrar texto de la información del partido */
    flex: 2; /* Espacio extra para la información del partido */
}

.resultado {
    font-size: 1em;
    background-color: #32CD32; /* Fondo verde */
    color: white; /* Texto blanco */
    padding: 0.3125rem .5em; /* Espacio interno del texto */
    border-radius: 0.25rem; /* Bordes redondeados */
    display: inline-block; /* Mostrar el resultado como bloque en línea */
}

.dia-partido, .penaltis, .polideportivo {
    margin: 0.3125rem 0; /* Espacio entre líneas de información */
    width: 100%;
    text-align: center;
}

.penaltis {
    color: green; /* Colorear los penales de verde */
}

/* Estilo para el ganador de la final */
.final .equipo-finalista {
    position: relative;
    text-align: center;
}

/* Estilo del icono para el ganador de la final */
.icono-final {
    font-size: 1em;
    text-align: center; /* Centrar el icono */
    display: block; /* Hacer que el icono ocupe un bloque */
    margin-bottom: 0.3125rem; /* Espacio debajo del icono */
}

/* Estilo del nombre del equipo */
.equipo {
    font-size: 1em;
}

/* Estilo para el equipo ganador */
.equipo.ganador {
    color: blue; /* Color azul para los equipos ganadores */
    font-weight: bold; /* Hacer el texto en negrita */
}

/* Efecto hover para la fila del partido */
.fila-partido:hover {
    background-color: #ffcc00; /* Color llamativo para hover */
    transition: background-color 0.3s ease; /* Transición suave */
}

/* Estilos para las columnas */
.columna-categoria {
    background-color: var(--primary__color); /* Naranja claro */
    padding: 1em; /* Espaciado interno */
    border-radius: 0.3125; /* Bordes redondeados */
}

/* Estilo para el resultado del partido */
.resultado {
    background-color: green; /* Color de fondo verde */
    color: white; /* Color del texto blanco */
    padding: 0.3125rem; /* Espaciado interno */
    font-size: 1em;
    font-weight: bold; /* Negrita */
    text-align: center; /* Centrar el texto */
    border-radius: 0.3125rem; /* Bordes redondeados */
}

/* Asegurar que todas las imágenes de los equipos sean del mismo tamaño */
.icono-equipo {
    width: 3.75rem; /* Ajusta según sea necesario */
    height: 3.75rem; /* Ajusta según sea necesario */
    object-fit: cover; /* Mantiene la proporción */
    display: block; /* Para que no haya espacio extra */
    margin: 0 auto; /* Centrar la imagen */
}
/* Estilo del icono para el ganador de la final */
.icono-final {
    font-size: 1em;
    text-align: center; /* Centrar el icono */
    display: block; /* Hacer que el icono ocupe un bloque */
    margin-bottom: 0.3125; /* Espacio debajo del icono */
}

/* Estilo del nombre del equipo */
.equipo {
    font-size: 1em;
    margin: .5em 0; /* Espaciado uniforme arriba y abajo */
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Estilo para el equipo ganador */
.equipo.ganador {
    color: blue; /* Color azul para los equipos ganadores */
    font-weight: bold; /* Hacer el texto en negrita */
}

/* Efecto hover para la fila del partido */
.fila-partido:hover {
    background-color: #ffcc00; /* Color llamativo para hover */
    transition: background-color 0.3s ease; /* Transición suave */
}

/* Estilos para las columnas */
.columna-categoria {
    background-color: var(--primary__color); /* Naranja claro */
    padding: 1em; /* Espaciado interno */
    border-radius: 0.3125rem; /* Bordes redondeados */
}

/* Estilo para el resultado del partido */
.resultado {
    background-color: green; /* Color de fondo verde */
    color: white; /* Color del texto blanco */
    padding: 1em; /* Espaciado interno */
    font-size: 1em;
    font-weight: bold; /* Negrita */
    text-align: center; /* Centrar el texto */
    border-radius: 0.3125rem; /* Bordes redondeados */
    margin: .5em 0; /* Espaciado uniforme arriba y abajo */
}

/* Estilo del icono para el ganador de la final */
.icono-final {
    font-size: 1em;
    text-align: center; /* Centrar el icono */
    display: block; /* Hacer que el icono ocupe un bloque */
    margin-bottom: 0.3125; /* Espacio debajo del icono */
}

/* Estilo del nombre del equipo */
.equipo {
    font-size: 1em;
    margin: 0.5rem 0; /* Espaciado uniforme más corto arriba y abajo */
    flex-grow: 1;
}

.equipo.is-local {
    text-align: right;
}

/* Estilo para el equipo ganador */
.equipo.ganador {
    color: blue; /* Color azul para los equipos ganadores */
    font-weight: bold; /* Hacer el texto en negrita */
}

/* Efecto hover para la fila del partido */
.fila-partido:hover {
    background-color: #ffcc00; /* Color llamativo para hover */
    transition: background-color 0.3s ease; /* Transición suave */
}

/* Estilos para las columnas */
.columna-categoria {
    background-color: var(--primary__color); /* Naranja claro */
    padding: 1.25rem; /* Espaciado interno */
    border-radius: 0.3125rem; /* Bordes redondeados */
}

/* Estilo para el resultado del partido */
.resultado {
    background-color: green; /* Color de fondo verde */
    color: white; /* Color del texto blanco */
    padding: .5em; /* Espaciado interno */
    font-size: 1em;
    font-weight: bold; /* Negrita */
    text-align: center; /* Centrar el texto */
    border-radius: 0.3125rem; /* Bordes redondeados */
    margin: .5em 0; /* Espaciado uniforme arriba y abajo */
}

/* Asegurar que todas las imágenes de los equipos sean del mismo tamaño */
.icono-equipo {
    width: 4.5em; /* Tamaño de la imagen */
    height: 4.5em; /* Tamaño de la imagen */
    object-fit: cover; /* Mantiene la proporción */
    display: block; /* Para que no haya espacio extra */
    margin: .5em auto; /* Centrar la imagen y agregar separación superior e inferior */
}

/* Espaciado para otros elementos de texto */
.dia-partido,
.penaltis,
.polideportivo {
    margin: .5em 0; /* Espaciado uniforme arriba y abajo */
}
.icono-final {
    font-size: 1em;
    color: gold;
    position: absolute;
    top: 0;
    left: 0;
}

.fila-partido-horizontal {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fila-partido-horizontal .fila-partido {
    margin-top: auto;
    margin-bottom: auto;
}
.fila-partido {
    font-size: 75%;
    min-width: 360px;
}

.horizontal-scroll-wrapper {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
}