/* Contenedor de tablas para hacerlas responsivas */
.table-container {
  overflow-x: auto; /* Permite desplazamiento horizontal */
  margin: 1rem 0; /* Espaciado superior e inferior */
}

/* Estilos Generales para Tablas */
table {
  width: 100%; /* Ocupar todo el ancho del contenedor */
  max-width: 900px; /* Ancho máximo para pantallas grandes */
  margin: 0 auto; /* Centrar la tabla */
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  border: 2px solid #000;
}

table thead th {
  background-color: #192020; /* Amarillo claro ahora un poco más oscuro */
  color: #f0df9d;
  font-weight: bold;
  padding: 0.5rem; /* Menor padding */
  text-align: center;
  border: 2px solid #000;
  font-size: 0.85rem; /* Texto más pequeño */
}

table tbody td {
  padding: 0.4rem; /* Menor padding */
  text-align: center;
  border: 1px solid #202020; /* Bordes más suaves */
  color: #333;
  word-wrap: break-word;
}

/* Alternancia de colores */
table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

table tbody tr:nth-child(even) {
  background-color: #e3e3e3;
}

table tbody tr:hover {
  background-color: #e2e3e5;
  cursor: pointer;
}

/* Estilo para Tablas de Clasificación */
table.classification tbody td:first-child {
  background-color: #fcbc4b;
  color: #1b201e;
  font-weight: bold;
  width: 20px; /* Ajusta este valor para reducir el ancho */
  max-width: 50px; /* Limita el ancho máximo */
  text-align: center; /* Asegura alineación */
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  overflow: hidden; /* Oculta el contenido sobrante */
  text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es muy largo */
}

/* Ajuste en la columna de nombres */
table.classification tbody td:nth-child(2) {
  font-weight: bold; /* Texto en negrita */
  text-align: left; /* Alinear texto a la izquierda */
  max-width: 80px; /* Limitar el ancho máximo */
  white-space: normal; /* Permitir saltos de línea */
}

/* Ajuste específico para la columna "Puntos" */
table.classification thead th:nth-child(3) {
   /* background-color: #f6eaae; Fondo amarillo claro */
 /* color: #333; /* Texto oscuro */
  font-weight: bold;
  width: 30px; /* Ajusta este valor para reducir el ancho */
  max-width: 50px; /* Limita el ancho máximo */
  text-align: center; /* Asegura alineación */
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  overflow: hidden; /* Oculta el contenido sobrante */
  text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es muy largo */
}

table.classification tbody td:nth-child(3) {
  background-color: #fcbc4b; /*  Fondo rosa claro ahora verde*/
   color: #1b201e; /* Texto rojo ahora negro */
  font-weight: bold;
  width: 30px; /* Ajusta este valor para reducir el ancho */
  max-width: 50px; /* Limita el ancho máximo */
  text-align: center; /* Asegura alineación */
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  overflow: hidden; /* Oculta el contenido sobrante */
  text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es muy largo */
}

/* Estilo para Tablas de Encuentros Cruzados */
table.matches tbody td.diagonal {
  background-color: #3b4dd4; /* Fondo azul oscuro */
  color: #ffffff; /* Texto blanco */
  font-weight: bold;
  text-align: center;
}
/* Contenedor de tablas para hacerlas responsivas BORRAR*/
.table-container {
  width: 100%;
  overflow-x: auto; /* Permite desplazamiento horizontal */
  -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en iOS */
}

/* Contenedor del botón de calendario */
.calendar-button-container {
    text-align: center; /* Centrar el botón */
    margin: 1rem 0; /* Espaciado superior e inferior */
}

/* Estilo del botón de calendario */
.btn-calendar {
    display: inline-block;
    background-color: #0056b3; /* Azul */
    color: #fff; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-calendar:hover {
    background-color: #003d82; /* Azul más oscuro al pasar el ratón */
    transform: scale(1.05); /* Pequeño efecto de zoom */
}
/* Estilo para Calendarios */
.calendar-section table {
  width: 100%; /* Ocupar todo el ancho */
  margin: 1rem auto;
  border-collapse: collapse;
  font-size: 0.9rem;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.calendar-section th,
.calendar-section td {
  text-align: center;
  padding: 0.5rem;
  border: 1px solid #ddd;
}

/* Estilo para el encabezado */
.calendar-section th {
  background-color: #043454;
  color: #ffffff;
  font-weight: bold;
}

.calendar-section tbody tr.jornada-impar td {
  background-color: rgba(236, 243, 244, 0.933) !important; /* Fuerza el color de fondo */
}

.calendar-section tbody tr.jornada-par td {
  background-color: #ffffff !important; /* Fuerza el color de fondo */
}

/* Hover en filas */
.calendar-section tbody tr:hover {
  background-color: #0d5394; /* Azul claro */
  cursor: pointer;
}

/* Botón Ir al Inicio */
.back-to-top {
  position: fixed;
  bottom: 2rem; /* Distancia desde la parte inferior */
  right: 2rem; /* Distancia desde la derecha */
  background-color: #0056b3; /* Azul */
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%; /* Botón redondo */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover {
  background-color: #003d82; /* Azul más oscuro */
  transform: scale(1.1); /* Pequeño zoom */
}

/* Ocultar el botón inicialmente */
.back-to-top.hidden {
  display: none;
}