/* =================================================================== */
/* ===         GUÍA DE PSICOMETRÍA - HOJA DE ESTILOS FINAL         === */
/* =================================================================== */

/* --- 1. CONFIGURACIÓN GLOBAL Y VARIABLES DE COLOR --- */
:root {
--color-primario: #2c3e50;
--color-secundario: #34495e;
--color-fondo: #f4f6f9;
--color-acento: #3498db;
--color-acento-hover: #2980b9;
--color-blanco: #ffffff;
--color-borde: #e0e0e0;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}


body {
font-family: 'Poppins', 'Segoe UI', sans-serif;
/* Un fondo sutil para dar textura y un look más profesional */
background-color: var(--color-fondo);
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: var(--color-primario);
margin-top: 0.5rem;
line-height: 1.7;
}


/* --- 2. ENCABEZADO (BANNER PRINCIPAL) --- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)), url('../media/banner-bg.jpg');
background-size: cover;
background-position: center center;
background-attachment: fixed;
color: var(--color-blanco);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 6rem 2rem;
min-height: 85vh;
}

section.hero {
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0;
margin: 0;
max-width: 950px;
}

section.hero h1 {
font-size: 5rem;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 1.5px var(--color-blanco);
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
line-height: 1.1;
margin-bottom: 1rem;
}

section.hero .subtitle {
font-size: 1.4rem;
font-weight: 400;
color: var(--color-blanco);
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.85);
opacity: 0.95;
letter-spacing: 0.5px;
}

.hero audio {
margin-top: 2rem;
max-width: 100%;
}


/* --- 3. BARRA DE NAVEGACIÓN FIJA --- */
nav {
position: sticky;
top: 0;
width: 100%;
background-color: var(--color-secundario);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
padding: 0.5rem 2rem;
box-sizing: border-box;
}

#menu {
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
}

#menu li a {
color: var(--color-blanco);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
padding: 0.5rem 0;
position: relative;
transition: color 0.3s ease;
}

#menu li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: var(--color-acento);
transition: all 0.3s ease;
}

#menu li a:hover {
color: var(--color-acento);
}

#menu li a:hover::after {
width: 100%;
left: 0;
}


/* --- 4. ESTRUCTURA Y TÍTULOS DE LAS SECCIONES --- */
section {
background-color: var(--color-blanco);
margin: 2rem auto;
padding: 2.5rem;
max-width: 900px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border: 1px solid var(--color-borde);
}

h2 {
background-color: var(--color-primario);
color: var(--color-blanco);
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 0.75rem 1.5rem;
margin: -2.5rem -2.5rem 3.5rem -2.5rem;
border-radius: 12px 12px 0 0;
border-bottom: none;
}

h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-secundario);
line-height: 1.3;
}


/* --- 5. COMPONENTES REUTILIZABLES --- */

/* --- Botones Genéricos (Quiz, Chat) --- */
.btn-quiz, .btn-submit-quiz, #chat-send {
display: inline-block;
background-color: var(--color-acento);
color: var(--color-blanco);
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-quiz:hover, .btn-submit-quiz:hover, #chat-send:hover {
background-color: var(--color-acento-hover);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --- Botones de Descarga (individuales) --- */
.btn-descarga {
display: inline-flex;
align-items: center;
text-decoration: none;
font-weight: 600;
color: var(--color-acento);
background-color: var(--color-fondo);
padding: 10px 20px;
border-radius: 8px;
border: 1px solid var(--color-borde);
margin: 0.5rem 0.5rem 0.5rem 0;
transition: all 0.3s ease;
}

.btn-descarga:hover {
background-color: var(--color-acento);
color: var(--color-blanco);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-descarga::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M5 20h14v-2H5v2zm7-18C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 13l-4-4h2.55V7h2.9v4H16l-4 4z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M5 20h14v-2H5v2zm7-18C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 13l-4-4h2.55V7h2.9v4H16l-4 4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.descargables-en-seccion {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

/* --- Iframes (Google Forms/Sheets) --- */
.iframe-wrap {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
border-radius: 8px;
margin: 2rem 0;
border: 1px solid var(--color-borde);
}

.iframe-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}

/* --- Nota de Propósito (Centrada) --- */
.note {
max-width: 800px;
margin: 2rem auto;
text-align: center;
padding: 1.5rem;
background-color: var(--color-fondo);
border-left: 5px solid var(--color-acento);
border-radius: 0 8px 8px 0;
}

/* --- Tabla de Cronograma --- */
table.cronograma {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}

table.cronograma th, table.cronograma td {
border: 1px solid var(--color-borde);
padding: 0.75rem;
text-align: left;
}

table.cronograma th {
background: var(--color-secundario);
color: var(--color-blanco);
font-weight: 600;
}


/* --- 6. SECCIONES Y COMPONENTES ESPECÍFICOS --- */

/* --- Centro de Recursos (Descargables) --- */
#descargables-list {
margin-top: 2rem;
margin-bottom: 2rem;
background-color: var(--color-fondo);
padding: 1.5rem;
border-radius: 10px;
border: 1px solid var(--color-borde);
}

#descargables-list ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}

#descargables-list li a {
display: flex;
align-items: center;
background-color: var(--color-blanco);
padding: 1rem;
border-radius: 8px;
text-decoration: none;
color: var(--color-acento);
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
border: 1px solid var(--color-borde);
}

#descargables-list li a:hover {
background-color: var(--color-acento);
color: var(--color-blanco);
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#descargables-list li a::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 12px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.btn-jamovi-guide {
display: flex; align-items: center; text-decoration: none; font-weight: 600;
color: var(--color-acento); background-color: var(--color-blanco);
padding: 1rem; border-radius: 8px; border: 1px solid var(--color-borde);
width: 100%;
justify-content: center;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-jamovi-guide:hover {
background-color: var(--color-acento); color: var(--color-blanco);
transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Checklists Interactivos --- */
.checklist-container {
margin-top: 2rem;
margin-bottom: 1.5rem;
padding: 1.5rem 2rem;
background-color: var(--color-fondo);
border-radius: 10px;
border: 1px solid var(--color-borde);
}

.checklist-container h4 {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-secundario);
margin-top: 0;
margin-bottom: 1rem;
border-bottom: 2px solid var(--color-borde);
padding-bottom: 0.5rem;
}

.checklist { list-style: none; }
.checklist li { margin-bottom: 0.75rem; }
.checklist label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 1rem;
transition: color 0.3s ease;
}
.checklist label span { transition: all 0.3s ease; }
.checklist input[type="checkbox"] {
margin-right: 12px;
width: 18px;
height: 18px;
cursor: pointer;
}
.checklist input[type="checkbox"]:checked + span {
text-decoration: line-through;
color: #95a5a6;
opacity: 0.8;
}

/* --- Modal (Guía Jamovi) --- */
.modal-backdrop {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 2000;
display: flex; align-items: center; justify-content: center;
}

.modal-window {
background-color: var(--color-blanco);
padding: 2rem 2.5rem;
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0,0,0,0.2);
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
position: relative;
}

.modal-close {
position: absolute; top: 10px; right: 20px;
font-size: 2.5rem; line-height: 1;
color: #aaa; background: none; border: none;
cursor: pointer; transition: color 0.2s ease;
}

.modal-close:hover { color: var(--color-primario); }

.hidden { display: none; }

#modal-content h2 { margin-top: 0; }
#modal-content table { width: 100%; margin-top: 1rem; border-collapse: collapse; }
#modal-content th, #modal-content td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-borde); }
#modal-content th { background-color: var(--color-fondo); }
#modal-content a { font-weight: 600; }

/* --- Sección Notebook de Colab --- */
.colab-section {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
background-color: #e8f0fe;
border: 1px solid #d2e3fc;
}
.colab-icon { flex-shrink: 0; }
.colab-icon img { width: 50px; height: 50px; }
.colab-text { flex-grow: 1; }
.colab-text h2 {
border: none;
margin: 0.1rem 0 0.5rem 0.5rem;
padding: 0;
background: none;
border-radius: 0;
color: #1967d2;
font-size: 1.5rem;
}
.colab-text p { margin: 0; line-height: 1.6; }
.colab-action { flex-shrink: 0; }
.btn-colab {
background-color: #1a73e8;
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.btn-colab:hover { background-color: #1765cc; }

/* --- Footer --- */
#creditos {
text-align: center;
padding: 2rem;
font-size: 0.85rem;
color: #6c757d;
}

/* =================================================================== */
/* ===                LA CORRECCIÓN FINAL DE ESTILO                === */
/* =================================================================== */

/* --- 1. REORGANIZACIÓN DEL LAYOUT DEL CHAT --- */

/* Contenedor principal del área de entrada del chat */
.chat-input-area {
display: flex;
flex-direction: column; /* Apila los elementos verticalmente */
gap: 0.75rem; /* Espacio entre los elementos */
margin-top: 1rem;
}

/* Estilos para el selector y el campo de texto */
#chat-domain,
#chat-input {
width: 100%; /* Ocupan todo el ancho disponible */
padding: 12px;
border: 1px solid var(--color-borde);
border-radius: 8px;
font-size: 1rem;
font-family: 'Poppins', sans-serif;
}

#chat-input {
/* El campo de texto ya no necesita ser estrecho */
}

/* El botón de enviar ahora ocupa todo el ancho */
#chat-send {
width: 100%;
}

/* La ventana de respuestas (log) ahora tiene más espacio */
#chat-log {
min-height: 200px; /* Le damos una altura mínima */
background-color: var(--color-fondo);
border-radius: 8px;
padding: 1rem;
border: 1px solid var(--color-borde);
}


/* =================================================================== */
/* ===       ESTILO FINAL PARA BIBLIOGRAFÍA (SANGRÍA FRANCESA)     === */
/* =================================================================== */

/* El contenedor de la lista de bibliografía */
#biblio-list {
list-style: none; /* Quitamos los puntos por defecto */
padding-left: 0; /* Quitamos el padding por defecto */
}

/* Cada elemento (referencia) de la lista */
#biblio-list li {
padding-left: 2em; /* Creamos un espacio a la izquierda para la sangría */
text-indent: -2em; /* ¡LA MAGIA! Esto mueve la primera línea hacia la izquierda, creando la sangría francesa */
margin-bottom: 0.5rem; /* La separación entre una referencia y otra que pediste */
}

/* =================================================================== */
/* ===      PULIDO FINAL: RESPONSIVIDAD MÓVIL Y ESPACIADO        === */
/* =================================================================== */

/* --- 1. ESPACIO SUPERIOR PARA PÁRRAFOS DESCRIPTIVOS --- */
p.section-description {
margin-top: 1rem; /* Añade un pequeño espacio superior al texto del cuerpo */
}


/* --- 2. SOLUCIÓN PARA TABLAS ANCHAS EN MÓVILES --- */
.table-container {
overflow-x: auto; /* ¡LA MAGIA! Permite el scroll horizontal */
-webkit-overflow-scrolling: touch; /* Deslizamiento suave en iOS */
margin: 0 -1rem; /* Pequeño ajuste para que el scroll se vea bien */
padding: 0 1rem;
}


/* --- 3. AJUSTES PARA PANTALLAS PEQUEÑAS (MÓVILES) --- */
@media (max-width: 768px) {

/* --- Encabezado --- */
header {
min-height: 60vh; /* Reduce la altura del banner */
padding: 4rem 1.5rem; /* Reduce el espaciado interno */
}

section.hero h1 {
font-size: 3rem; /* Reduce drásticamente el tamaño del título */
-webkit-text-stroke-width: 1px; /* Borde de letra más fino */
}

section.hero .subtitle {
font-size: 1.1rem; /* Reduce el tamaño del subtítulo */
}

/* --- Títulos de sección --- */
h2 {
font-size: 1rem; /* Un poco más pequeño en móviles */
letter-spacing: 1px;
}

/* --- Layout de Secciones --- */
section {
padding: 2rem 1.5rem; /* Reduce el padding de las secciones */
margin: 1.5rem auto;
}

/* --- Ajuste para el Widget de Colab --- */
.colab-section {
flex-direction: column; /* Apila los elementos verticalmente */
text-align: center;
gap: 1rem;
}

.colab-action {
width: 100%; /* El botón ocupa todo el ancho */
}

.btn-colab {
width: 100%;
}
}


/* =================================================================== */
/* ===         LA EDICIÓN FINAL: LAYOUT Y ESPACIADO              === */
/* =================================================================== */

/* --- 1. NUEVO LAYOUT PARA EL WIDGET DEL ASISTENTE IA --- */
.colab-section {
flex-direction: column; /* Apila los bloques principales verticalmente */
align-items: flex-start; /* Alinea todo a la izquierda */
gap: 1rem; /* Espacio entre el header, el texto y el botón */
}

.colab-header {
display: flex; /* Pone el icono y el título uno al lado del otro */
align-items: center;
gap: 1rem; /* Espacio entre el icono y el título */
}

.colab-text {
padding-left: 0; /* Aseguramos que el texto esté alineado */
}

.colab-action {
width: 100%; /* El contenedor del botón ocupa todo el ancho */
}

.btn-colab {
width: 100%; /* El botón se expande para un look moderno en móvil */
}

/* --- 2. ESPACIADO FINAL PARA CHAT Y BIBLIOGRAFÍA --- */

/* Espacio superior para la ventana del chat */
#chat-log {
margin-top: 1.5rem;
}

/* Espacio superior para la lista de bibliografía */
#biblio-list {
margin-top: 1.5rem;
}

/* =================================================================== */
/* ===                PULIDO FINAL DE ESPACIADO                  === */
/* =================================================================== */

/* Espacio superior para los párrafos descriptivos de cada sección */
p.section-description {
margin-top: 1.5rem; /* Asegura un espacio consistente */
}

/* Espacio superior para el contenedor del chat, para separarlo del título */
#chat-section .chat-box {
margin-top: 1.5rem;
}


/* =================================================================== */
/* ===      SOLUCIÓN PARA IMAGEN DE FONDO EN iPAD/iPHONE         === */
/* =================================================================== */

/* Esta media query se activa solo en pantallas de tabletas y móviles 
   (cualquier cosa por debajo de 1024px de ancho) */
@media (max-width: 1024px) {
  
  header {
    /* Desactivamos el efecto parallax y usamos el método de scroll estándar,
       que es 100% compatible con todos los dispositivos. */
    background-attachment: scroll;
  }
  
}
/* =================================================================== */
/* ===    ESTILOS PARA MARKDOWN DENTRO DE LAS BURBUJAS DEL CHAT    === */
/* =================================================================== */

.bubble.bot strong {
  color: var(--color-primario); /* Hace que el texto en negrita destaque un poco más */
}

.bubble.bot a {
  color: var(--color-acento); /* Asegura que los enlaces tengan el color de acento */
  font-weight: 600;
  text-decoration: underline;
}

.bubble.bot a:hover {
  text-decoration: none;
}

/* =================================================================== */
/* ===         REDISENO TOTAL DE ESTILO PARA LOS QUIZZES           === */
/* =================================================================== */

/* Contenedor principal del quiz, después de hacer clic en el botón */
.quiz-box {
  margin-top: 2rem;
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 1.5rem 2rem;
  background-color: var(--color-fondo);
}

/* El formulario que contiene todas las preguntas */
.quiz-form {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Espacio generoso entre cada pregunta */
}

/* Cada bloque de pregunta individual */
.quiz-question {
  /* No necesita mucho estilo, el espacio lo da el formulario */
}

/* El texto de la pregunta (ej. "1. ¿Cuál es el propósito...") */
.question-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primario);
  margin-bottom: 1rem;
}

/* --- El Nuevo Diseño de las Opciones de Respuesta --- */

/* El contenedor de todas las opciones para una pregunta */
.options-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Espacio entre las opciones */
}

/* Ocultamos el botón de radio original. ¡La magia está en el label! */
.options-container input[type="radio"] {
  display: none;
}

/* La etiqueta que envuelve el botón de radio y el texto. La convertimos en un botón. */
.options-container label {
  display: block;
  background-color: var(--color-blanco);
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid var(--color-borde);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  padding-left: 2.5rem; /* Espacio para nuestro círculo personalizado */
}


/* Efecto al pasar el ratón por encima */
.options-container label:hover {
  border-color: var(--color-acento-hover);
  transform: translateY(-2px); /* Eleva la opción ligeramente */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Añade una sombra sutil */
}

/* Estilo del CÍRCULO que reemplaza al botón de radio por defecto */
.options-container label::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-borde);
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

/* LA MAGIA: Qué pasa cuando se SELECCIONA una opción */
.options-container input[type="radio"]:checked + span {
  /* (El código JS actual no usa un span, así que esta regla no es necesaria por ahora) */
}

.options-container input[type="radio"]:checked + label {
  background-color: var(--color-acento);
  border-color: var(--color-acento-hover);
  color: var(--color-blanco);
  font-weight: 600;
}

.options-container input[type="radio"]:checked + label::before {
  background-color: var(--color-blanco);
  border-color: var(--color-blanco);
  box-shadow: inset 0 0 0 3px var(--color-acento); /* El punto interior del círculo */
}


/* --- La Nueva Tarjeta de Resultados --- */

/* Contenedor de la retroalimentación final */
.quiz-results {
  text-align: center;
  padding: 2rem;
}

.quiz-results h3 {
  font-size: 1.8rem;
  color: var(--color-secundario);
  margin-bottom: 0.5rem;
}

.quiz-results p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Estilos para los resultados detallados */
.quiz-summary {
  text-align: center;
  margin-bottom: 2rem;
}
.quiz-summary h2 {
  background: none;
  border: none;
  color: var(--color-primario);
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.result-item {
  background-color: var(--color-blanco);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  text-align: left;
  border-left: 5px solid; /* Borde de color que indicará si es correcto o no */
}

.result-item.correct {
  border-left-color: #27ae60; /* Verde para correcto */
}

.result-item.incorrect {
  border-left-color: #e74c3c; /* Rojo para incorrecto */
}

.result-item p {
  margin: 0.5rem 0;
}

.result-item .explanation {
  font-size: 0.9rem;
  color: #7f8c8d;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--color-borde);
}

/* =================================================================== */
/* ===    ESTILO FINAL REFINADO PARA BIBLIOGRAFÍA (TEXTO DISCRETO) === */
/* =================================================================== */

#biblio-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

/* Cada ítem de referencia */
.biblio-item {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-borde);
}
/* Eliminamos el fondo y borde de la tarjeta para un look más integrado */

/* El texto de la referencia con sangría francesa */
.ref-text {
  padding-left: 2em;
  text-indent: -2em;
  margin-bottom: 0.75rem; /* Menos espacio, más cohesión */
}


/* Contenedor para las acciones de texto */
.ref-actions {
  display: flex; /* Usamos Flexbox para alinear los elementos */
  align-items: center; /* Centramos verticalmente los enlaces */
  flex-wrap: wrap; /* ¡IMPORTANTE! Permite que los enlaces se ajusten en pantallas pequeñas */
  gap: 0.5rem 1.5rem; /* Espacio vertical y horizontal para cuando se envuelven */
  padding-left: 2em; /* Mantenemos la alineación con la sangría */
  font-size: 0.85rem; /* Hacemos el texto un poco más pequeño y discreto */
  margin-top: 0.5rem; /* Añadimos un pequeño espacio superior */
}

/* Estilo de los enlaces y la etiqueta */
.ref-actions a, .ref-actions label {
  color: var(--color-acento);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ref-actions a:hover, .ref-actions label:hover {
  text-decoration: underline;
  color: var(--color-acento-hover);
}

/* El separador "|" */
.action-separator {
  color: var(--color-borde);
  font-weight: normal;
}

/* Ocultamos el checkbox */
.biblio-toggle {
  display: none;
}

/* El comentario, oculto por defecto */
.ref-comment {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease-out;
  margin-top: 0;
  padding-left: 2em; /* Alineado con la sangría */
  color: var(--color-secundario);
}

/* LA MAGIA: Cuando el checkbox está marcado, mostramos el comentario */
.biblio-toggle:checked ~ .ref-comment {
  max-height: 500px;
  margin-top: 1rem;
}

/* Cambiamos el estilo de la etiqueta "Leer comentario" cuando está activa */
.biblio-toggle:checked ~ .ref-actions label {
  color: var(--color-primario);
  font-weight: 700;
}