body {
  font-family: 'Caveat', cursive;
  background-image: url('img/fondo_victoriano.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  color: #000;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #003366;
  font-size: 2.5em;
  margin-bottom: 30px;
}

.malla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.materia {
  border: 2px solid #003366;
  border-radius: 10px;
  padding: 15px;
  background-color: #e6f0fa;
  transition: background-color 0.3s ease, transform 0.2s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.materia:hover {
  transform: scale(1.02);
}

.materia.aprobada {
  background-color: #b3e6cc;
  border-color: #339966;
}

.materia h3 {
  margin: 0 0 10px 0;
  color: #003366;
}

.materia button {
  padding: 8px 12px;
  background-color: #003366;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Caveat', cursive;
}

.materia button:disabled {
  background-color: #999;
  cursor: not-allowed;
}