/* ==========================================================================
   ESTILOS PARA LAS PÁGINAS DE MENÚ
   ========================================================================== */

/* --- ESTILO PARA CENTRAR LA PÁGINA DE CURSO/BLOQUES (MODIFICADO) --- */
/* >  * Anula el padding-top global de la navbar
 * SÓLO para las páginas de tipo "hub" (curso, bloque, etc.)
 */
body.hub-page {
    padding-top: 0;
}

.test-container.curso-page {
    /* 1. ELIMINAMOS min-height: 100vh; para que margin: auto funcione */

    /* 2. AUMENTAMOS el padding-top para dejar espacio a la navbar (60px) + espacio extra (2rem) */
    /* (5rem = 80px aprox, que es > 60px) */
    padding: 5rem 2rem 2rem 2rem;

    /* 3. MANTENEMOS el centrado */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 1. ESTILOS DE CABECERA Y NAVEGACIÓN
   -------------------------------------------------------------------------- */
.test-header {
    display: flex;
    /* Nuevo */
    flex-direction: column;
    /* Nuevo */
    margin-bottom: 3rem;
    /* Eliminamos el padding-bottom y border-bottom de aquí */
    position: relative;
}

/* --- CÓDIGO NUEVO AÑADIDO --- */
/* 1. Estilo para el grupo del Título (Centrado y con la línea) */
.header-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1.5rem;
}

/* 2. Estilo para el contenedor de la miga de pan (Cursos) */
.header-breadcrumb {
    width: 100%;
    /* Se alinea solo a la izquierda */
    display: flex;
    justify-content: flex-start;
}

/* 3. Rediseño del botón "Cursos" a un enlace de navegación limpio */
.header-breadcrumb .back-link {
    /* Reseteamos el estilo de botón que tenía antes */
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    /* Espacio entre el enlace y el título */
    background: none;
    color: var(--text-muted);
    /* Color más sutil */
    font-size: 0.9rem;
    /* Un poco más pequeño */
    gap: 0.2rem;
    /* Menos espacio entre icono y texto */
}

/* 4. Estilo del icono de flecha */
.header-breadcrumb .back-link .material-icons {
    font-size: 1.2rem;
    /* Tamaño del icono "chevron_left" */
}

/* 5. Efecto hover para el enlace de navegación */
.header-breadcrumb .back-link:hover {
    background: none;
    border: none;
    transform: none;
    /* Quitamos el efecto de botón */
    color: var(--accent-color);
    /* Color de acento al pasar el ratón */
}

/* --- FIN DEL CÓDIGO NUEVO --- */
.test-header .header-icon-wrapper {
    display: inline-block;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.test-header .header-icon-wrapper svg {
    width: 32px;
    height: 32px;
}

.test-header h1 {
    font-size: 2rem;
}

.test-header p {
    margin-top: 0.5rem;
    color: var(--text-muted);
}

.test-header .block-subtitle {
    font-size: 1.5rem;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 0.9rem;
    text-transform: uppercase;
    line-height: 1.2;
}

.back-link,
.prev-link,
.next-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
    margin-bottom: 2rem;
}

.back-link:hover,
.prev-link:hover,
.next-link:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.block-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

.prev-link {
    grid-column: 1;
    justify-self: start;
    margin-bottom: 0;
}

.block-navigation .back-link {
    grid-column: 2;
    justify-self: center;
    margin-bottom: 0;
}

.next-link {
    grid-column: 3;
    justify-self: end;
    margin-bottom: 0;
}

/* 2. ESTILOS DE CONTENIDO PRINCIPAL (TARJETAS DE BLOQUE / CURSO) - MODIFICADO
   -------------------------------------------------------------------------- */
.menu-container {
    display: grid;
    /* 1. Cambiamos '1fr' por un ancho máximo (ej. 320px) para evitar que las columnas se estiren */
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: 1.5rem;
    margin-bottom: 3rem;
    /* Espacio antes del botón de notas */
    /* 2. AÑADIMOS ESTO: Centra el grupo de columnas en el contenedor */
    justify-content: center;
}

.block-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem 2rem;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 4px 10px -4px var(--shadow-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-smooth);
    text-align: center;
}

.block-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px -6px var(--shadow-color);
    border-color: var(--accent-color);
}

.block-card-icon {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.block-card-icon svg {
    width: 32px;
    height: 32px;
}

.block-card h2 {
    font-size: 1.3rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.block-card p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 3. ESTILOS DE LISTAS DE TEMAS
   -------------------------------------------------------------------------- */
.topic-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.topic-item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.topic-item {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 4px -1px var(--shadow-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-smooth);
    gap: 1rem;
    border-left: 4px solid transparent;
    /* Por defecto, el LI es un contenedor flex para sus hijos (enlace principal y botón de repaso si existe) */
    /* El padding se aplica aquí por defecto */
}

/* Estilo específico para los items de test en tema.php que tienen todo dentro del enlace */
/* Estos LI no necesitan ser flex ni tener padding, ya que el enlace interno lo gestiona */
.topic-item.topic-card {
    padding: 0;
    /* El padding se mueve al enlace interno */
    display: block;
    /* Anula el display:flex del .topic-item general */
    gap: 0;
    /* Anula el gap del .topic-item general */
}

/* Aplica la animación a las tarjetas de test en progreso */
.topic-card.test-in-progress {
    animation: pulse-border 2.5s infinite ease-in-out;
}


.topic-item-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Se mantiene para alinear el texto verticalmente si no hay saltos de línea */
    text-decoration: none;
    color: var(--text-color);
    /* Para los items que no son .topic-card (capítulos, resúmenes, y tests en capitulo.php),
       el LI ya tiene padding, por lo que el enlace no necesita añadirlo.
       Si el LI no fuera flex, este enlace necesitaría flex-grow: 1; para ocupar el espacio.
       Como el LI es flex, este enlace ya ocupa el espacio disponible. */
    padding: 0;
    /* Aseguramos que no haya doble padding si el LI ya lo tiene */
    flex-grow: 1;
    /* Hacemos que el enlace ocupe todo el espacio disponible */
    min-width: 0;
    /* Permite que el texto se ajuste y no desborde el contenedor */
}

.topic-item-link .material-icons {
    color: var(--text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.topic-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 10px -3px var(--shadow-color);
    /* El borde izquierdo se mantiene en el li */
}

/* Estilo para el contenedor del contenido de la tarjeta de tema */
.topic-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1rem;
}

/* Estilo específico para el enlace principal de los tests en tema.php */
/* Este enlace es el que contiene todo el contenido y necesita ser flex */
.topic-card-main-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    text-decoration: none;
    color: var(--text-color);
    min-width: 0;
    /* Evita que el contenido empuje el layout */
}

.topic-item span {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-color);
    /* USAMOS VARIABLE: El color del texto se adapta al tema */
}

.topic-details {
    display: flex;
    align-items: center;
    /* Alinea verticalmente botones y nota */
    gap: 1rem;
    flex-shrink: 0;
    /* Evita que el botón de repaso se encoja */
}

.topic-item:hover .topic-item-link .material-icons {
    transform: translateX(4px);
    color: var(--accent-color);
}

/* 4. ESTILOS DE BOTONES Y ACCIONES - MODIFICADO
   -------------------------------------------------------------------------- */
.link-button,
.link-button-review {
    padding: 0.5rem 0.8rem;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: 700;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    font-size: 0.7rem;
    /* Tamaño de fuente para los botones en la vista de escritorio */
    flex-shrink: 0;
    white-space: nowrap;
}

.link-button:hover,
.link-button-review:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.link-button {
    background-color: var(--accent-color);
    color: white;
}

.link-button-review {
    background-color: var(--flag-color);
    color: #1a1d23 !important;
    /* Color de texto oscuro fijo para legibilidad */
}

.final-actions {
    text-align: center;
    margin-top: 2.5rem;
}

/* Estilo para el botón "Ver Resumen de Notas" */
#notes-button {
    display: inline-block;
    background-color: var(--flag-color);
    color: #1a1d23;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 15px -5px var(--shadow-color);
}

.repaso-btn {
    display: inline-block;
    background-color: var(--flag-color);
    color: #1a1d23;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 280px;
    box-shadow: 0 4px 15px -5px var(--shadow-color);
    text-align: center;
}

#notes-button:hover,
.repaso-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px -5px var(--shadow-color);
}

/* --- CÓDIGO NUEVO: Estilo para el título de la sección de repaso --- */
.review-section h3 {
    font-size: 1.2rem;
    /* Tamaño de fuente para escritorio. ¡Puedes ajustar este valor! */
    font-weight: 500;
    /* Un peso de fuente medio, no tan fuerte como un H1 */
    color: var(--text-muted);
    /* Un color más sutil para que no domine */
    text-align: center;
    /* Centrar el texto */
    margin-bottom: 1rem;
    /* Espacio entre el texto y el botón de debajo */
}


footer {
    text-align: center;
    margin-top: 3rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* 5. AJUSTES RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Hacemos que la página de curso también sea de una columna en móvil */
    .curso-page .menu-container {
        grid-template-columns: 1fr;
    }

    .topic-item {
        flex-wrap: nowrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .topic-item>span {
        font-size: 1rem;
        flex-grow: 1;
        white-space: normal;
    }

    /* Ajuste para el botón de repaso general del tema en móviles */
    /* Aseguramos que se ajuste al contenido y permita el salto de línea */
    .repaso-btn {
        padding: 0.8rem 1.0rem;
        /* Reducimos el relleno */
        font-size: 0.8rem;
        /* Reducimos el tamaño del texto */
        min-width: 0;
        /* Eliminamos el ancho mínimo para que se ajuste al contenido */
        white-space: normal;
        /* Permitimos que el texto salte de línea */
    }

    /* NUEVO: Ajuste para el título de la sección de repaso en móvil */
    .review-section h3 {
        font-size: 1rem;
        /* Tamaño de fuente para móvil. ¡Puedes ajustar este valor! */
        margin-bottom: 0.75rem;
        /* Menos espacio en móvil */
    }



    .topic-item .topic-details {
        gap: 0.5rem;
        /* Reducir el espacio entre los elementos de detalles */
        flex-wrap: wrap;
        /* Permitir que los elementos se envuelvan si no caben */
        justify-content: flex-end;
        /* Alinear a la derecha si se envuelven */
    }

    /* Selector más específico para asegurar que se aplique en tema.php y capitulo.php */
    /* Aseguramos que se comporte como un botón y permita el salto de línea */
    .topic-item .topic-details .link-button-review {
        display: inline-flex;
        /* Asegura que el padding y el tamaño se apliquen correctamente */
        padding: 0.4rem 0.4rem;
        /* Reducir el padding del botón de repaso */
        font-size: 0.75rem;
        /* Reducir el tamaño del texto del botón */
        white-space: normal;
        /* Permitimos que el texto salte de línea */
    }
}

@media (max-width: 768px) {

    /* NUEVO: Ajuste tamaño de fuente de la nota en móvil */
    .topic-details .last-score {
        font-size: 0.95rem;
        /* Tamaño más pequeño para móvil (ajusta si es necesario) */
    }
}

/* --- ESTILO PARA TÍTULOS DE CAPÍTULO --- */
.chapter-title {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    color: var(--accent-color);
    font-size: 1.3rem;
    font-weight: 500;
}

.topic-list>.chapter-title:first-child {
    margin-top: 0;
}

.topic-item.score-green {
    border-left-color: var(--correct-color);
}

.topic-item.score-yellow {
    border-left-color: var(--flag-color);
}

.topic-item.score-red {
    border-left-color: var(--incorrect-color);
}

/* --- CÓDIGO NUEVO: Estilos para la última nota en la tarjeta del test --- */
.topic-details .last-score {
    display: inline-block;
    /* Para que esté en línea */
    font-size: 1.1rem;
    /* Tamaño para escritorio */
    font-weight: bold;
    margin-left: 10px;
    /* Espacio a la izquierda */
    vertical-align: middle;
    /* Alineado con los botones */
}

/* Clases de color para la nota */
.last-score.score-green {
    color: var(--correct-color);
}

.last-score.score-yellow {
    color: var(--flag-color);
}

.last-score.score-red {
    color: var(--incorrect-color);
}

.last-score.score-red {
    color: var(--incorrect-color);
}

/* --- CÓDIGO NUEVO: Estilos para la página de ver resumen --- */
.summary-content {
    max-width: 800px;
    /* Ancho máximo para mejorar la legibilidad del texto */
    margin-left: auto;
    /* Centra el bloque de contenido */
    margin-right: auto;
    /* Centra el bloque de contenido */
    padding: 2rem;
    /* Espaciado interno para que el texto no se pegue a los bordes */
    background-color: var(--card-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 10px -4px var(--shadow-color);
    line-height: 1.7;
    /* Aumenta el espacio entre líneas para facilitar la lectura */
    font-size: 1.1rem;
    /* Tamaño de fuente ligeramente mayor */
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
    .summary-content {
        padding: 1.5rem 1rem;
        /* Reduce el padding en móviles */
        font-size: 1rem;
    }
}

/* --- Protección Anti-Copia básica --- */
.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* --- ANIMACIÓN PARA TEST EN PROGRESO --- */
@keyframes pulse-border {
    0% {
        border-color: var(--border-color);
        box-shadow: 0 2px 4px -1px var(--shadow-color);
    }

    50% {
        border-color: var(--flag-color);
        box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--flag-color) 40%, transparent);
    }

    100% {
        border-color: var(--border-color);
        box-shadow: 0 2px 4px -1px var(--shadow-color);
    }
}

/* ==========================================================================
   ESTILOS PARA EL REPRODUCTOR DE AUDIO PERSONALIZADO (DISEÑO MEJORADO)
   - Archivo: ver_resumen_view.php
   ========================================================================== */

/* 1. Contenedor principal: más espaciado y una sombra más suave */
.audio-player-container {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    background-color: var(--card-color);
    /* Fondo más cohesivo con el resto de la UI */
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 15px -5px var(--shadow-color);
    /* Sombra superior más sutil */
    padding: 0.75rem 1.5rem;
    /* Mayor espaciado vertical */
    transition: background-color var(--transition-smooth);
}

/* 2. Contenedor del reproductor: centrado y con ancho máximo */
.audio-player {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* Espacio aumentado entre elementos */
    max-width: 800px;
    /* Ancho máximo para que no se estire en pantallas grandes */
    margin: 0 auto;
    /* Centrado horizontal */
}

/* 3. Botón de Play/Pausa: más grande y con sombra para destacarlo */
.audio-player .play-pause-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    /* Botón más grande */
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent-color) 50%, transparent);
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.audio-player .play-pause-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.audio-player .play-pause-btn .material-icons {
    font-size: 30px;
    /* Icono más grande */
}

/* 4. Controles (Barra y tiempo): ahora en una fila */
.audio-player .controls {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Espacio entre la barra y el tiempo */
}

/* 5. Barra de progreso: más gruesa y con un "pulgar" para interactuar */
.audio-player .progress-bar-container {
    flex-grow: 1;
    width: 100%;
    height: 10px;
    /* Barra más gruesa */
    background-color: var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    /* Se quita overflow:hidden para que el pulgar sea visible */
}

.audio-player .progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 5px;
    position: relative;
    /* Necesario para posicionar el pulgar */
    transition: width 0.1s linear;
}

/* El "pulgar" o manejador de la barra de progreso */
.audio-player .progress-bar::after {
    content: '';
    position: absolute;
    right: -8px;
    /* Lo posiciona al final de la barra de progreso */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    /* El pulgar solo aparece cuando la reproducción ha comenzado */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Mostramos el pulgar cuando la barra tiene algo de progreso */
.audio-player .progress-bar[style*="width: 0%"]::after,
.audio-player .progress-bar[style*="width: 0.0"]::after {
    opacity: 0;
}

.audio-player .progress-bar:not([style*="width: 0%"]):not([style*="width: 0.0"])::after {
    opacity: 1;
}


/* 6. Tiempo: limpio y alineado a la derecha de la barra */
.audio-player .time-display {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: monospace;
    flex-shrink: 0;
    /* Evita que el texto se comprima */
}

/* Ajustes para móvil */
@media (max-width: 768px) {
    .audio-player-container {
        /* Menos padding en los bordes en móvil */
        padding: 0 1rem;
    }

    .audio-player {
        /* Reducimos el padding en móvil para un look más compacto */
        padding: 0.5rem 0;
    }

    .audio-player .play-pause-btn {
        width: 40px;
        height: 40px;
        margin: 0;
    }
}