/* Tabla de encuentros cruzados */
table.matches {
  width: 100%;
  max-width: 900px; /* Limitar ancho máximo */
  border-collapse: collapse;
  margin: 0 auto; /* Centrar la tabla */
  font-size: 0.9rem;
  background-color: #fff;
  table-layout: fixed; /* Ajuste proporcional */
  border: 2px solid #000; /* Borde uniforme */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* Encabezado */
table.matches th {
  width: 60px; /* Ajusta este valor para reducir el ancho */
  background-color: #e8f4fc; /* Fondo azul claro */
  color: #333;
  font-weight: bold;
  padding: 0.4rem;
  text-align: center;
  border: 2px solid #000; /* Bordes oscuros */
  font-size: 0.75rem; /* Tamaño reducido */
  white-space: pre-line; /* Permitir texto en múltiples líneas */
  line-height: 1.2; /* Espaciado entre líneas */
  height: 3rem; /* Altura uniforme para encabezados */
}

/* Celdas */
table.matches td {
  padding: 0.4rem;
  text-align: center;
  border: 1px solid #ddd;
  color: #333;
  font-size: 0.75rem; /* Tamaño reducido */
  word-wrap: break-word;
  line-height: 1.2;
  height: 3rem; /* Altura uniforme para celdas */
}

/* Estilo diagonal */
table.matches td.diagonal {
  background-color: #3b4dd4; /* Azul oscuro */
  color: #ffffff;
  font-weight: bold;
  border: 2px solid #3b4dd4;
}

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

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

/* Hover en filas */
table.matches tbody tr:hover {
  background-color: #e2e3e5;
  cursor: pointer;
}

/* Responsividad */
@media screen and (max-width: 768px) {
  table.matches {
    font-size: 0.7rem;
  }

  table.matches th, table.matches td {
    padding: 0.3rem;
    font-size: 0.7rem;
    height: 2.5rem; /* Reducir altura en pantallas pequeñas */
  }
}