* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
  background: #f4f7fa;
  color: #333;
  padding: 1rem;
  
  /* Ajusta la ruta al archivo de tu imagen */
  background-image: url('RED.jpeg');
  background-size: cover;           /* Escala la imagen para cubrir todo */
  background-position: center;      /* Centra la imagen */
  background-repeat: no-repeat;     /* Evita que se repita */
  /* Si quisieras un color de respaldo: */
  background-color: #f4f7fa;

}


.instruction {
  text-align: center;
  font-style: italic;
  color: #0a041e;
  margin-bottom: 1rem;
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
}
.input-area {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.input-area input,
.input-area select {
  padding: .5rem;
  font-size: 1rem;
}
.input-area button {
  padding: .5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}
.matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.quadrant {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: .75rem;
  min-height: 120px;
}
.quadrant h2 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.quadrant small {
  font-weight: normal;
  font-size: .75rem;
  color: #666;
}
.quadrant ul {
  list-style: disc inside;
  min-height: 50px;
}
.quadrant li {
  margin-bottom: .25rem;
}
footer {
    text-align: center;
    background-color: rgba(64, 65, 63, 0.8);
    color: white;
    padding: 20px;
    margin-top: 20px;
}

footer p {
    margin: 0;
}