/* -------------------- style.css -------------------- */

/* 🌈 Fondo estático más ligero */
body {
  font-family: "Poppins", sans-serif;
  text-align: center;
  background: #e0f7fa; /* color sólido para mejorar rendimiento */
  color: #333;
  margin: 0;
  padding: 40px;
}

/* 🖋️ Título */
h1 {
  font-size: 2.2em;
  color: #222;
  margin-bottom: 25px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* 📥 Input del nombre */
input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 220px;
  font-size: 1em;
  margin-right: 10px;
  outline: none;
  transition: box-shadow 0.3s ease;
}

input:focus {
  box-shadow: 0 0 10px #74ebd5;
}

/* 🔘 Botones generales */
button {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6dd5fa, #2980b9);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

button:hover:enabled {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

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

/* 🧩 Secciones */
#modalidad, #materias, #dificultades, #resumenFinal, #contenidoTest {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 25px auto;
  width: 80%;
  max-width: 700px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}

#modalidad.fadeIn, #materias.fadeIn, #dificultades.fadeIn, #resumenFinal.fadeIn, #contenidoTest.fadeIn {
  opacity: 1;
  transform: translateY(0);
}

/* 💬 Texto de resumen y secciones */
#saludo, #seleccion, #seleccionMateria, #resumenFinal, #infoUsuario, #temasDiv, #testDiv, #resultadosDiv {
  font-weight: bold;
  margin-top: 15px;
  font-size: 1.1em;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

/* 🌟 Animación de entrada */
.fadeIn {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.6s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 📚 Contenido y temas */
.temaItem {
  margin: 10px 0;
  padding: 8px;
  background: #f0f0f0;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.temaItem button {
  padding: 5px 10px;
  font-size: 0.9em;
}

/* 🎨 Botones de materias con imágenes */
#botonesMaterias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.matBtn {
  position: relative;
  width: 160px;
  height: 120px;
  border: none;
  border-radius: 15px;
  overflow: hidden;
  color: white;
  font-weight: bold;
  font-size: 1.1em;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.matBtn:hover {
  transform: scale(1.07) rotateZ(1deg);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.matBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.matBtn span {
  position: relative;
  z-index: 2;
}

/* 🎯 Imágenes de materias por nombre */
.matBtn[data-materia="Matemáticas"] { background-image: url('https://manguselearning.com/images/imagenes_cursos/matematicas/matematicas.jpg'); }
.matBtn[data-materia="Ciencias"] { background-image: url('https://www.cosasdeeducacion.es/wp-content/uploads/sites/6/2009/07/que-es-ciencia.jpg'); }
.matBtn[data-materia="Geografía"] { background-image: url('https://humanidades.com/wp-content/uploads/2017/07/geografia-1-e1571191539294-800x416.jpg'); }
.matBtn[data-materia="Español"] { background-image: url('https://soledaddurazo.com/storage/2023/03/R.jpg'); }
.matBtn[data-materia="Historia"] { background-image: url('https://cdn.todamateria.com/imagenes/historia-og.jpg'); }
.matBtn[data-materia="Historia Moderna"] { background-image: url('https://www.liceus.com/wp-content/uploads/2020/09/Historia-Moderna-3-e1600277972534.jpg'); }
.matBtn[data-materia="Historia Universal"] { background-image: url('https://i.pinimg.com/736x/f0/58/c8/f058c8d2040409ce63a77f42bba34b9e.jpg'); }
.matBtn[data-materia="Inglés"] { background-image: url('https://youtalkonline.com/wp-content/uploads/ingl%C3%A9s-en-casa.jpg'); }
.matBtn[data-materia="Inglés 2"] { background-image: url('https://www.generacionuniversitaria.com.mx/wp-content/uploads/2023/08/ingles-1-1024x631.jpg'); }
.matBtn[data-materia="Arte"] { background-image: url('https://pymstatic.com/143552/conversions/el-arte-siempre-ha-sido-trascendental-small-16_9.jpg'); }
.matBtn[data-materia="Arte 2"] { background-image: url('https://uvp.mx/uvpblog/wp-content/uploads/2021/07/artes1.jpg'); }
.matBtn[data-materia="Educación Física"] { background-image: url('https://www.esneca.com/wp-content/uploads/que-es-educacion-fisica.jpg'); }
.matBtn[data-materia="Física"] { background-image: url('https://www.emagister.com/blog/wp-content/uploads/2021/11/GettyImages-936903524.jpg'); }
.matBtn[data-materia="Química"] { background-image: url('https://concepto.de/wp-content/uploads/2014/08/quimica-1-e1589576942464-800x400.jpg'); }
.matBtn[data-materia="Álgebra"] { background-image: url('https://dropinblog.net/34249715/files/auxiliar-post/que-es-el-algebra-todos-los-detalles.jpg'); }
.matBtn[data-materia="Biología"] { background-image: url('https://amautas.com/wp-content/uploads/2023/06/C047_fondo-curso-min-scaled.jpg'); }
.matBtn[data-materia="Cálculo"] { background-image: url('https://definicion.de/wp-content/uploads/2008/09/calculo-1.jpg'); }
.matBtn[data-materia="Física Avanzada"] { background-image: url('https://media.tutellus.com/libraries/45/01/lib/1360531664932.jpg?size=854x493s&ext=jpg'); }
.matBtn[data-materia="Literatura"] { background-image: url('https://s1.significados.com/foto/literatura-ca.jpg'); }
.matBtn[data-materia="Programación"] { background-image: url('https://concepto.de/wp-content/uploads/2020/08/Programacion-informatica-scaled-e1724960033513.jpg'); }
.matBtn[data-materia="Economía"] { background-image: url('https://www.marketeroslatam.com/wp-content/uploads/2023/05/tipos-de-economia.jpg'); }
.matBtn[data-materia="Ingeniería"] { background-image: url('https://universidadeuropea.com/resources/media/images/tipos-de-ingenieria-1200x630.original.jpg'); }
.matBtn[data-materia="Cálculo Integral"] { background-image: url('https://bloque10.unimagdalena.edu.co/wp-content/uploads/2021/06/portada-curso-calculo-integral.jpg'); }
.matBtn[data-materia="Estadística"] { background-image: url('https://unade.edu.mx/wp-content/uploads/2025/09/estadistica_descriptiva.jpg'); }
.matBtn[data-materia="Diseño"] { background-image: url('https://universidadeuropea.com/resources/media/images/herramientas_diseno_grafico.width-640.jpg'); }
.matBtn[data-materia="Psicología"] { background-image: url('https://udlondres.com/wp-content/uploads/2023/03/UDL-portada-blog-psicologia-1080x675.webp'); }
.matBtn[data-materia="Gestión de Proyectos"] { background-image: url('https://triskellsoftware.com/wp-content/uploads/2024/02/top-pmo-trends-1-1024x535.jpg'); }
.matBtn[data-materia="Investigación Avanzada"] { background-image: url('https://www.techtitute.com/techtitute/cursos/00728400/recursos/banner/curso-metodologia-investigacion-avanzada-portada.jpg'); }
.matBtn[data-materia="Filosofía"] { background-image: url('https://pymstatic.com/9932/conversions/ramas-de-filosofia-small-16_9.jpg'); }
.matBtn[data-materia="Filosofía Aplicada"] { background-image: url('https://postgrados.uandes.cl/content/uploads/E-MANDE-E-14.jpg'); }
.matBtn[data-materia="Idiomas"] { background-image: url('https://www.alphatrad.es/sites/alphatrad.es/files/images/articles/idiomas%20mas%20hablados%20en%20el%20mundo.jpg'); }
.matBtn[data-materia="Educación Superior"] { background-image: url('https://www.unesco.org/sites/default/files/2022-05/Higher%20education-unleash%20the%20talent%20of%20next%20generation-Gorodenkoff-Shutterstock.jpg'); }

/* 🎯 Círculo de calificación del test */
canvas {
  margin: 15px auto;
  display: block;
  border-radius: 50%;
}

#resultadosDiv h3 {
  margin-bottom: 10px;
}

#resultadosDiv div {
  margin-top: 10px;
  font-weight: bold;
}

#resultadosDiv button {
  margin-top: 5px;
  margin-right: 10px;
  }
