/* ------------------------------
   Estructura base y reset general
   ------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: ui-sans-serif, system-ui, sans-serif;
  height: 100vh;
  line-height: 1.5;
  width: 100vw;
}

body {
  background-color: rgb(23 37 84);
  padding: 0.75rem;
}

/* ------------------------------
   Tabla principal
   ------------------------------ */
table {
  border: 2px solid rgb(15 13 89);
  border-collapse: collapse;
  height: 100%;
  table-layout: fixed;
  width: 100%;
}

/* ------------------------------
   Encabezado de columnas
   ------------------------------ */
thead {
  background-color: rgb(221 214 254);
  color: rgb(23 37 84);
  font-size: 2.25rem;
  height: 3.5rem;
}

thead th {
  text-align: center;
}

/* ------------------------------
   Encabezado de cada grupo de sala
   ------------------------------ */
tbody {
  color: rgb(219 234 254);
}

tbody .group-title {
  background-color: rgb(15 13 89);
  font-size: 1.5rem;
  font-weight: 800;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: left;
}

/* Añadir padding horizontal a la primera fila del grupo (el título de sala) */
tbody tr:first-child td {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ------------------------------
   Filas individuales de personas
   ------------------------------ */
tbody tr:not(:first-child) {
  font-size: 1.875rem;
  text-align: center;
  text-transform: capitalize;
}

/* Alternar color de fondo para mejorar la legibilidad */
tbody tr:nth-child(odd):not(:first-child) {
  background-color: rgb(65 61 193);
}

tbody tr:nth-child(even):not(:first-child) {
  background-color: rgb(26 23 156);
}