body {  /* contiene el cuerpo entero de la pagina */
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 20px;
    display: flex; /* Usar flexbox para organizar los grupos */
    flex-wrap: wrap; /* Permitir que los grupos salten de línea */
    gap: 30px; /* Espacio entre los grupos */
    justify-content: center; /* Centrar los grupos horizontalmente */
    padding-bottom: 50px; /* Espacio al final de la página */
}

h1 {
    width: 100%; /* Tabla de Clasificacion, el título ocupa todo el ancho */
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.group-container { /* contiene todo para cada grupo*/
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: fit-content; /* El ancho se ajusta al contenido */
    text-align: center;
    min-width: 300px; /* Ancho mínimo para que no se vea demasiado estrecho */
}

h2 {
    background-color: #f4b084; /* Fondo gris claro para el título del grupo */
    padding: 10px 250px;
    margin-top: 0;
    border-radius: 5px;
    color: #333;
    font-size: 1.2em;
    text-align: center;
    border: 1px solid black; /* Borde para el título del grupo */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    /* table-layout: fixed; */
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #d3d3d3; /* Color de encabezado similar al de la imagen */
    color: #333;
    font-weight: bold;
    border: 1px solid black;
}

/* Estilo para las celdas de datos */
td {
    background-color: #f9f9f9;
    border: 1px solid black;
}

/* Fondo verde claro para las filas impares de datos */
tbody tr:nth-child(1) td {	/* odd impares */
    background-color: #e6ffe6;
}

/* Fondo verde claro para las filas impares de datos */
tbody tr:nth-child(2) td {	/* odd impares */
    background-color: #e6ffe6;
}

/* Fondo amarillo claro para las filas que no clasifican */
tbody tr:nth-child(3) td {	/* odd pares */
    background-color: #fff2cc;	/* Amarillo claro */	EDITADO
}

/* Columna 'Pareja' con un color de fondo ligeramente diferente */
tbody tr td:nth-child(2) {
    width: 200px;
    */ background-color: #ffe0b2; /* Naranja claro */	EDITADO
}

/* Columna de números/asterisco al inicio de cada fila */
tbody tr td:first-child {
    background-color: #ffffff; /* Blanco */ 	EDITADO
    font-weight: bold;
    width: 17px;
}

/* Estilo específico para las celdas vacías */
td:empty {
    background-color: #f9f9f9; /* Fondo blanco/gris muy claro para celdas vacías */
    width: 40px;
}

/* Columna 'Ptos' con un color de fondo ligeramente diferente */
tbody tr td:nth-child(3) {
    width: 40px;
    */ background-color: #ffe0b2; /* Naranja claro */	EDITADO
}

/* Columna 'PJ' con un color de fondo ligeramente diferente */
tbody tr td:nth-child(4) {
    width: 40px;
    */ background-color: #ffe0b2; /* Naranja claro */	EDITADO
}
/* Columna 'PG2' con un color de fondo ligeramente diferente */
tbody tr td:nth-child(5) {
    width: 40px;
    */ background-color: #ffe0b2; /* Naranja claro */	EDITADO
}
/* Columna 'PG3' con un color de fondo ligeramente diferente */
tbody tr td:nth-child(6) {
    width: 40px;
    */ background-color: #ffe0b2; /* Naranja claro */	EDITADO
}
/* Columna 'PP2' con un color de fondo ligeramente diferente */
tbody tr td:nth-child(7) {
    width: 40px;
    */ background-color: #ffe0b2; /* Naranja claro */	EDITADO
}
/* Columna 'PP3' con un color de fondo ligeramente diferente */
tbody tr td:nth-child(8) {
    width: 40px;
    */ background-color: #ffe0b2; /* Naranja claro */	EDITADO
}

/* ESTILOS PARA EL NUEVO BOTÓN DE CARGA */
.cargar-btn {
    display: block; /* Ocupa su propio espacio */
    margin: 15px auto 5px auto; /* Centrar horizontalmente con auto y añadir margen vertical */
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    color: #333; /* Texto oscuro para buen contraste */
    background-color: #B0E0E6; /* Azul claro (Powder Blue) */
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cargar-btn:hover {
    background-color: #87CEFA; /* Azul un poco más fuerte al pasar el ratón */
    border: 1px solid black;
    color: #000000;
}

/* Estilos para los botones de grupo en index.html */
.group-buttons {
    background-color: #f4b084; /* Naranja claro */
    padding: 10px 260px;
    /* display: block;  Ocupa su propio espacio */
    margin-top: 0;
    border-radius: 5px;
    color: #333 bold; /* Texto oscuro para buen contraste */
    /* margin: 15px auto 5px auto; /* Centrar horizontalmente con auto y añadir margen vertical */
    font-size: 1.2em;
    cursor: pointer;
    border: 1px solid black;
    width: fit-content;
    /* transition: background-color 0.3s ease; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.group-buttons:hover {
    background-color: #ff9122; /* Naranja un poco más fuerte al pasar el ratón */
    border: 2px solid black;
    color: #000000;
}

/* Estilos para la página partidosDeGrupo.html */
.group-header {
    background-color: #F8CBAD; /* Color naranja claro */
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.group-header h1 {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
}

.match-block {
    margin-bottom: 10px; /* Espacio entre cada bloque de partido */
    background-color: #fff;
    border: 1px solid #fff; /* Borde alrededor de cada bloque completo */
    padding: 15px;
    border-radius: 8px;
}

/* Estilos para la tabla de detalles (Día, Horario, Cancha, Observaciones) */
table.match-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1px; /* Espacio entre las dos tablas dentro del bloque */
}

table.match-details td {
    padding: 5px;
    border: 1px solid #000;
    vertical-align: top;
    font-size: 0.9em;
}

table.match-details tr:first-child td {
    background-color: #fff; /* Fondo blanco para Día, Horario, Cancha */
width: 16%;
}

/* Anchos de columna para match-details */
table.match-details td:nth-child(1) { /* Columna "Día:", "Horario:", "Cancha:" */
    width: 60px;
    font-weight: bold;
}

table.match-details td:nth-child(3),
table.match-details td:nth-child(5) { /* Campos editables */
    width: auto;  /* Se ajustará al contenido restante */
    text-align: center;
    font-weight: bold;
}

/* Estilos para la tabla de sets (Equipos y Puntuaciones) */
table.match-sets {
    width: 100%;
    border-collapse: collapse;
}
table.match-sets th,
table.match-sets td {
    padding: 8px;
    border: 1px solid #000;
    text-align: center;
    font-size: 1.2em;
}
 table.match-sets tr {
    height: 15px;
}

table.match-sets .team-name-header { /* Encabezado de los equipos en thead */
    width: 40%; 
    background-color: #d3d3d3; 
}

table.match-sets .team-name { /* Celdas de nombres de equipo en tbody */
    width: 40%; /* Ancho para los nombres de los equipos */
    text-align: center;
    background-color: #e6ffe6; /* Fondo verde claro para nombres de equipo */
}

table.match-sets .set-score {
    width: 20%; /* Ancho para las puntuaciones de set */
}

table.match-details tr:nth-child(2) td {
    background-color: #fff2cc; /* Fondo amarillo claro para Observaciones: */
    /* font-weight: bold; */
    text-align: left;
    height: 15px;
}

table.match-details tr:nth-child(2) td:nth-child(2) {
    background-color: #fff2cc; /* Fondo amarillo claro para Observaciones: */
    /* font-weight: bold; */
    text-align: left;
    height: 15px;
    color: #e9305f;
}

.volver-Btn {
  margin-right: 50px;
  padding: 10px 20px;
  font-size: 1em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #000000; /* Texto oscuro para buen contraste */
  background-color: #F8CBAD; /* color normal */
  transition: background-color 0.3s ease; /* efecto suave */
}

.volver-Btn:hover {
    background-color: #ff9122; /* Naranja un poco más fuerte al pasar el ratón */
    border: 1px solid black;
    color: #000000;
}

/* ESTILOS PARA EL BOTÓN DE CARGAR PARTIDOS */
.cargarPartidos-Btn {
    /* display: block;  Ocupa su propio espacio */
    margin: 15px auto 5px auto; /* Centrar horizontalmente con auto y añadir margen vertical */
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    color: #000000; /* Texto oscuro para buen contraste */
    background-color: #B0E0E6; /* Azul claro (Powder Blue) */
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cargarPartidos-Btn:hover {
    background-color: #87CEFA; /* Azul un poco más fuerte al pasar el ratón */
    border: 1px solid black;
    color: #000000;
}