/* --- Estilos Generales --- */
/* =========================
   FONDO GENERAL
========================= */
	body {
		font-family: Arial, sans-serif;
		margin: 20px;
		background:
			linear-gradient(135deg, #0f172a, #111827, #1e293b);
		min-height: 100vh;
		color: white;
	}

/* =========================
   CONTENEDOR CRISTAL
========================= */
	.quiz-container {
		max-width: 90%;
		margin: 0 auto;
		padding: 30px;
		background: rgba(255,255,255,0.08);
		border: 1px solid rgba(255,255,255,0.18);
		border-radius: 24px;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		box-shadow:
			0 8px 32px rgba(0,0,0,0.35),
			0 0 20px rgba(0,255,255,0.08);
		position: relative;
		overflow: hidden;
	}

/* --- Estilos de Pregunta (Contenedor) --- */
    .question {
		margin-bottom: 12px;
		padding: 14px;
		background: rgba(255,255,255,0.06);
		border: 1px solid rgba(255,255,255,0.12);
		border-left: 4px solid rgba(0,255,255,0.6);
		border-radius: 16px;
		backdrop-filter: blur(8px);
		color: #f1f5f9;
		transition: 0.3s ease;
	}

	.question:hover {
		transform: translateY(-2px);
		box-shadow:
        0 0 15px rgba(0,255,255,0.18);
	}
		
	.question p {
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 4px;
            font-size: 16px;
    }
/* --- Estilos de Opciones de Respuesta (Label) --- */
    label {
		display: block;
		margin-bottom: 6px;
		padding: 10px;
		cursor: pointer;
		border-radius: 12px;
		background: rgba(255,255,255,0.04);
		border: 1px solid transparent;
		transition: 0.25s ease;
	}
	   
	label:hover {
         background: rgba(255,255,255,0.10);
		border-color: rgba(0,255,255,0.35);
	}     
			
/* --- Estilos del Botón Contenedor (para apilar) --- */
     /* =========================
   GRUPO DE BOTONES
========================= */
	.button-group {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 20px;
	}

/* =========================
   BOTONES MODERNOS NEÓN
========================= */
	.button-group button {
		width: 260px;
		align-self: center;
		padding: 12px 18px;
		border: none;
		border-radius: 18px;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 0.5px;
		cursor: pointer;
		color: white;
		background: #111;
		transition: all 0.3s ease;
		box-shadow:
			0 0 5px rgba(255,255,255,0.2),
			0 0 10px rgba(255,255,255,0.2);
		position: relative;
		overflow: hidden;
	}
	
/* EFECTO HOVER GENERAL */
	.button-group button:hover {
		transform: translateY(-2px) scale(1.02);
		box-shadow:
			0 0 8px currentColor,
			0 0 18px currentColor,
			0 0 30px currentColor;
	}

/* EFECTO AL PULSAR */
	.button-group button:active {
		transform: scale(0.98);
	}
	
/* =========================
   BOTÓN CORREGIR
========================= */
	#submitButton {
		background: linear-gradient(135deg, #007bff, #00c3ff);
		color: #eaf6ff;
		box-shadow:
			0 0 8px #00c3ff,
			0 0 18px #007bff;
	}

	#submitButton:hover {
		box-shadow:
			0 0 12px #00c3ff,
			0 0 24px #007bff,
			0 0 40px #00c3ff;
	}
/* =========================
   BOTÓN REINICIAR
========================= */
	#resetButton {
		background: linear-gradient(135deg, #ff9800, #ff5722);
		color: #fff7e6;
		box-shadow:
			0 0 8px #ff9800,
			0 0 18px #ff5722;
	}

	#resetButton:hover {
		box-shadow:
			0 0 12px #ff9800,
			0 0 24px #ff5722,
			0 0 40px #ff9800;
	}
	
/* =========================
   BOTÓN IMPRIMIR
========================= */
	#generateDocButton {
		background: linear-gradient(135deg, #00c853, #00e676);
		color: #f1fff5;
		box-shadow:
			0 0 8px #00e676,
			0 0 18px #00c853;
	}

	#generateDocButton:hover {
		box-shadow:
			0 0 12px #00e676,
			0 0 24px #00c853,
			0 0 40px #00e676;
	}	
	  

/* --- Estilos de Resultados --- */
/* =========================
   RESPUESTAS CORRECTAS
========================= */
	.option-correct {
		background: rgba(0,255,140,0.18);
		border: 1px solid rgba(0,255,140,0.45);
		color: #b9ffd3;
		box-shadow:
			0 0 12px rgba(0,255,140,0.35);
		font-weight: bold;
	}
	
/* =========================
   RESPUESTAS INCORRECTAS
========================= */
	.option-incorrect {
		background: rgba(255,70,70,0.18);
		border: 1px solid rgba(255,70,70,0.45);
		color: #ffd0d0;
		box-shadow:
			0 0 12px rgba(255,70,70,0.35);
	}

        #results {
            margin-top: 25px;
            padding: 15px;
            font-size: 1.2em;
            text-align: center;
            background-color: #90ee90;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            display: none;
        }