/* Matriz */
.matrix {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 1.05rem; /* texto más grande */
}

/* Estilo general de celdas */
.matrix td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: center;
  vertical-align: middle;
  background: #D3F1EF;   /* azul claro para celdas */
}

/* Encabezados de filas y columnas */
.matrix th {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: center;
  vertical-align: middle;
  background: #1B7F87;   /* azul oscuro */
  color: #fff;           /* texto claro */
  font-weight: bold;
}

/* Ancho fijo de la primera columna */
.matrix thead th:first-child {
  width: 130px;
}

/* Tarjetas (espaciado entre tablas) */
.card {
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 1rem;
  margin: 3rem 0;
  background: #fff;
}

/* Reproductores */
audio {
  width: 200px;
  height: 36px;
  border-radius: 8px;
}

/* Hover en celdas */
.matrix td:hover {
  background: #90E4C8;   /* verde claro */
}