/* Forzar el ancho completo y posición superior del header */
header.header.header--layout-1 {  
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: static !important;
}
.header__top-bar{
  background-color: #292C31 !important;
}
.header__secondary{
  background-color: #000 !important;
}
.header__primary {  
  width: 100% !important;
  margin: 0 !important;
}

.container, .container-fluid {   
  max-width: 92% !important;
  width: 92% !important;
  margin: 0 !important;
}

/* Efecto hover en los logos de redes sociales */
.social-links--main-nav .social-links__item {
  position: relative;
  display: inline-block;
}
.social-links--main-nav .social-links__link,
.social-links--main-nav .social-links__link i,
.social-links--main-nav .social-links__link .fa,
.social-links--main-nav .social-links__link .fab {
  color: #fff !important; /* Color por defecto */
  transition: color 0.3s ease !important;
}
.social-links--main-nav .social-links__link:hover,
.social-links--main-nav .social-links__link:hover i,
.social-links--main-nav .social-links__link:hover .fa,
.social-links--main-nav .social-links__link:hover .fab {
  color: #C2FF1F !important; /* Color verde en hover */
}
.social-links--main-nav .social-links__link:hover::after {
  content: attr(title); /* Usa el atributo title (Facebook, Twitter, Instagram) */
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #C2FF1F !important;
  color: #000 !important;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  border-radius: 4px;
  z-index: 1000;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Efecto hover y selección en los enlaces del menú principal */
.main-nav__list > li > a {
  color: #fff !important; /* Color por defecto */
  transition: all 0.3s ease !important;
  font-size: 12px !important; /* Tamaño confirmado */
}
.main-nav__list > li > a:hover {
  background: #C2FF1F !important; /* Fondo verde en hover */
  color: #000 !important; /* Letras negras en hover */
}
.main-nav__list > li > a.active {
  background: #C2FF1F !important; /* Fondo verde para enlace activo */
  color: #000 !important; /* Letras negras cuando está seleccionado */
}

/* Reducir tamaño de letras en header__secondary */
.header__secondary .info-block__heading,
.header__secondary .info-block__link,
.header__secondary .header-mobile__search-control {
  font-size: 12px !important; /* Tamaño confirmado */
}

/* Reducir tamaño de header__primary */
.header__primary {
  height: auto !important; /* Evita altura fija excesiva */
}

/*Logo de DataBet en el Header*/
.header-logo__img {
  max-width: 165px; /* Ajusta este valor según el tamaño deseado */
  height: auto; /* Mantiene la proporción */
  display: block;
  position: relative; /* Permite mover el logo con valores específicos */
  left: 50px; /* Mueve el logo a la derecha (ajusta el valor) */
  bottom: 5px; /* Mueve el logo hacia abajo (ajusta el valor) */
}

/* custom.css */
/* custom.css */
/* custom.css */
/* custom.css */
.hero-slider-wrapper {
  position: relative !important;
  height: 600px !important;
}

.hero-slider {
  position: relative !important;
  z-index: 1 !important;
  height: 100% !important;
}

/* Ocultar flecha izquierda y cualquier elemento de thumbnails */
.slick-prev,
.hero-slider-thumbs-container,
.hero-slider-thumbs,
.hero-slider-thumbs__item {
  display: none !important;
}

/* Botón verde cuadrado */
.custom-next-button {
  position: absolute !important;
  right: 30px !important; /* Pegado al margen derecho */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important; /* Tamaño cuadrado */
  height: 30px !important;
  background-color: #C2FF1F !important; /* Verde claro */
  border: none !important;
  border-radius: 0 !important; /* Cuadrado, sin bordes redondeados */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important; /* Asegurar que esté encima */
  transition: background-color 0.3s ease !important;
}

.custom-next-button:hover {
  background-color: #A8E01B !important; /* Verde más oscuro al hover */
}

.custom-next-button i {
  font-size: 15px !important; /* Flecha grande */
  color: #000000 !important; /* Flecha negra */
}

/* Evitar que otros elementos bloqueen clics */
.hero-slider__item-container,
.post__meta-block {
  z-index: 5 !important;
  pointer-events: none !important;
}

.hero-slider__item-container a,
.hero-slider__item-container button {
  pointer-events: auto !important;
}

.site-overlay {
  display: none !important;
}

/*ESTILOS NUEVOS*/
/* Estilos para el botón de navegación del hero slider */
.custom-next-button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background-color: #C2FF1F; /* Verde, consistente con el diseño */
  color: #000;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.custom-next-button:hover {
  background-color: #a1e01a; /* Verde más oscuro al hacer hover */
}

.custom-next-button i {
  font-size: 18px;
}

/* Asegurar que el slider ocupe el espacio correctamente */
.hero-slider {
  width: 100%;
  height: 100%;
  background-color: #000; /* Fondo negro para evitar huecos grises */
}

/* Estilos para las diapositivas */
.hero-slider .swiper-slide {
  width: 100%;
  height: 100%;
  background-size: cover; /* Cubrir toda el área */
  background-position: center; /* Centrar la imagen */
  background-repeat: no-repeat; /* Evitar repetición */
}

/* Asegurar que todas las diapositivas sean visibles durante la transición */
.hero-slider .swiper-slide {
  visibility: visible; /* Mostrar todas las diapositivas para el efecto slide */
  opacity: 1; /* Evitar que se desvanezcan */
}

/* Estilos específicos para las imágenes de fondo (ajusta las rutas según tus imágenes) */
.hero-slider__item--img1 {
  background-image: url("assets/images/hero-slider1.png");
}

.hero-slider__item--img2 {
  background-image: url("assets/images/hero-slider2.png");
}

.hero-slider__item--img3 {
  background-image: url("assets/images/hero-slider3.png");
}

/*AQUI EMPIEZA SCHEDULE*/
/* Centrar la tabla y establecer fondo negro */
.card.card--has-table {
  background-color: #000;
  margin-left: auto; /* Centrar horizontalmente */
  margin-right: auto; /* Centrar horizontalmente */
  width: 100%; /* Usar todo el ancho disponible */
  max-width: 1200px; /* Ancho máximo para evitar que se vea demasiado ancha */
}

/* Asegurar que el contenedor no interfiera con el centrado */
.container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%; /* Usar todo el ancho disponible */
  width: 100%;
  display: flex;
  justify-content: center; /* Centrar contenido */
}

/* Eliminar márgenes predeterminados del body */
body {
  margin: 0; /* Eliminar margen predeterminado del navegador */
}

/* Fondo negro para la tabla, encabezados y celdas */
.table.team-schedule.team-schedule--full,
.table.team-schedule.team-schedule--full thead,
.table.team-schedule.team-schedule--full tbody,
.table.team-schedule.team-schedule--full th,
.table.team-schedule.team-schedule--full td {
  background-color: #000;
  width: 100%; /* Forzar que la tabla ocupe todo el ancho */
  margin: 0; /* Eliminar márgenes automáticos */
}

/* Líneas divisorias verdes para título y encabezados */
.card__header {
  border-bottom: 1px solid #C2FF1F;
}

.table.team-schedule.team-schedule--full thead {
  border-bottom: 1px solid #C2FF1F;
}

/* Líneas divisorias de filas en verde */
.table.team-schedule.team-schedule--full tbody tr {
  border-bottom: 1px solid #C2FF1F;
}

/* Títulos de columnas en verde, centrados y más grandes */
.table.team-schedule.team-schedule--full thead th {
  color: #C2FF1F; /* Todos los títulos en verde, incluyendo Fecha y Hora */
  text-align: center;
  font-size: 16px; /* Aumentado a 16px */
}

/* Ajustar ancho de las columnas */
.table.team-schedule.team-schedule--full .team-schedule__date {
  color: #fff;
  text-align: center;
  width: 20%; /* Reducir ancho de Fecha y Hora */
}

.table.team-schedule.team-schedule--full .team-schedule__versus {
  width: 40%; /* Aumentar ancho de Partido */
}

.table.team-schedule.team-schedule--full .team-schedule__compet {
  width: 30%; /* Aumentar ancho de Liga */
}

.table.team-schedule.team-schedule--full .team-schedule__tickets {
  width: 10%; /* Mantener ancho razonable para Probabilidades */
  text-align: center;
  vertical-align: middle; /* Centrar verticalmente el contenido */
}

/* Texto blanco para nombres de equipos y ligas */
.team-meta__name,
.team-schedule__compet span {
  color: #fff;
}

/* Estilo para el renglón como enlace */
.table-row-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}

/* Efecto hover para toda la fila */
.table.team-schedule.team-schedule--full tbody tr.table-row {
  transition: background-color 0.2s ease; /* Suavizar la transición */
}

.table.team-schedule.team-schedule--full tbody tr.table-row:hover {
  background-color: #333 !important; /* Gris más oscuro para mejor contraste */
  cursor: pointer;
}

.table.team-schedule.team-schedule--full tbody tr.table-row:hover td {
  background-color: #333 !important; /* Mantener consistencia en las celdas */
}

/* Ajustar espaciado y tamaño en la columna Partido */
.team-meta {
  display: flex;
  align-items: flex-end; /* Alinear al fondo */
  justify-content: center;
  gap: 5px; /* Espacio simétrico */
  height: 100%; /* Usar toda la altura disponible */
}

/* Alinear logos y nombres de equipos hacia abajo */
.team-meta__logo,
.team-meta__info {
  margin-top: 0; /* Eliminar margen superior */
  margin-bottom: 0; /* Eliminar margen inferior */
  padding-top: 0; /* Asegurar que no haya padding superior */
  padding-bottom: 0; /* Asegurar que no haya padding inferior */
  flex: 1; /* Igualar el ancho */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Alinear contenido hacia abajo */
}

.team-meta__logo img {
  width: 30px; /* Tamaño fijo para logos */
  height: 30px;
  object-fit: contain;
}

.team-meta__info {
  margin: 0;
  flex: 1; /* Igualar el ancho */
  text-align: center;
}

.team-meta__vs {
  flex: 0;
  margin: 0 5px;
  align-self: flex-end; /* Alinear "vs" hacia abajo */
}

/* Centrar logos y nombres de ligas hacia abajo */
.team-meta--league {
  display: flex;
  align-items: flex-end; /* Alinear al fondo */
  justify-content: center;
  gap: 5px;
  overflow: hidden; /* Evitar que invada otras columnas */
  height: 100%; /* Usar toda la altura disponible */
}

/* Asegurar que los logos de ligas sean visibles y alineados abajo */
.team-meta--league .team-meta__logo {
  margin: 0;
  padding: 0;
  flex: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Alinear logo hacia abajo */
  min-width: 30px; /* Asegurar espacio mínimo para el logo */
}

.team-meta--league .team-meta__logo img {
  width: 30px; /* Tamaño fijo para logos de ligas */
  height: 30px;
  object-fit: contain;
  display: block; /* Asegurar que la imagen sea visible */
}

.team-meta--league span {
  align-self: flex-end; /* Alinear el nombre de la liga hacia abajo */
}

/* Centrar el botón Ver probabilidades vertical y horizontalmente con margen derecho */
.team-schedule__tickets .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto; /* Centrar horizontalmente */
  margin-right: 15px; /* Añadir espacio a la derecha para estética */
  height: 100%; /* Usar toda la altura de la celda */
  text-align: center;
}

/* Centrar el título PROBABILIDADES FREE */
.card__header.text-center {
  display: flex;
  justify-content: center;
}