/* =========================================================
   1. ESTRUCTURA GENERAL DE LA PÁGINA
   ========================================================= */


/* Oculta el encabezado principal de la página del curso en formato One Topic */
#page-course-view-onetopic #page-header {
    display: none !important;
}


/* Elimina el margen superior y establece un relleno superior equivalente a 15 px */
#page-course-view-onetopic #topofscroll {
    margin-top: 0 !important;
    padding-top: 0.9375rem !important;
}


/* Hace que el contenedor principal herede el fondo del body y elimina padding, borde y esquinas redondeadas */
#page-course-view-onetopic #page-content {
    background-color: inherit !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}


/* Añade una separación superior al área principal de contenido del curso */
#page-course-view-onetopic #region-main {
    margin-top: 0.9375rem !important;
}


/* =========================================================
   2. NAVEGACIÓN POR PESTAÑAS ONE TOPIC
   ========================================================= */


/* Configura la barra de pestañas y mantiene una separación adaptable entre ellas */
#page-course-view-onetopic .format_onetopic-tabs {
    position: relative;

    align-items: flex-end !important;

    gap: clamp(0.375rem, 0.8vw, 0.625rem) !important;

    border-bottom: 0 !important;
}


/* Neutraliza desplazamientos inferiores de Moodle/Bootstrap */
#page-course-view-onetopic .format_onetopic-tabs .nav-item {
    margin-bottom: 0 !important;
}


/* Mantiene las pestañas inactivas transparentes y sin borde visible sobre el fondo de la página */
#page-course-view-onetopic .format_onetopic-tabs .nav-link {
    position: relative;
    z-index: 1;

    margin-bottom: 0 !important;

    background-color: transparent !important;

    /*
     * El borde transparente conserva las dimensiones de la pestaña
     * cuando posteriormente pasa al estado activo.
     */
    border: 0.0625rem solid transparent !important;
    border-radius: 0.4375rem !important;

    color: inherit;

    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* Sitúa la pestaña activa por delante y la integra visualmente con el panel de contenido */
#page-course-view-onetopic .format_onetopic-tabs .nav-link.active {
    z-index: 3;

    background-color: #fff !important;

    border-color: #e3e3e3 !important;
    border-bottom-color: #fff !important;
    border-radius: 0.4375rem 0.4375rem 0 0 !important;

    transform: translateY(0.0625rem);

    box-shadow:
        0 -0.125rem 0.375rem #7d7d7d1a !important;
}


/* Resalta suavemente las pestañas inactivas con un fondo inspirado en su color de acento */
#page-course-view-onetopic .format_onetopic-tabs .dygo-onetopic-tab:not(.active):hover {
    /*
     * Este primer color funciona como respaldo en navegadores
     * que no interpreten color-mix().
     */
    background-color: #f4f6f7 !important;

    /*
     * Genera un fondo muy suave usando un 8 % del color
     * característico de cada pestaña.
     */
    background-color: color-mix(
        in srgb,
        var(--dygo-tab-accent) 8%,
        #fff 92%
    ) !important;

    border-color: transparent !important;
    border-radius: 0.4375rem !important;

    transform: translateY(-0.0625rem);

    box-shadow:
        0 0.125rem 0.375rem #7d7d7d14 !important;
}


/* =========================================================
   3. PANEL DE CONTENIDO DE LA PESTAÑA
   ========================================================= */


/* Estiliza el panel y utiliza su propio borde superior para generar una unión continua con la pestaña activa */
#page-course-view-onetopic .onetopic-tab-body {
    position: relative;

    background-color: #fff !important;

    padding:
        0.9375rem
        clamp(0.9375rem, 2vw, 1.25rem) !important;

    border: 0.0625rem solid #e3e3e3 !important;

    border-radius:
        0
        0.4375rem
        0.4375rem
        0.4375rem !important;

    box-shadow:
        0 0.35rem 0.5rem -0.2rem #7d7d7d26 !important;
}


/* =========================================================
   4. CONTENIDO INTERNO DE LAS SECCIONES
   ========================================================= */


/* Elimina siempre el margen superior de las secciones del curso en formato One Topic */
#page-course-view-onetopic .course-section {
    margin-top: 0 !important;
}


/* Aplica un relleno horizontal equivalente a 20 px al texto de resumen de las secciones */
#page-course-view-onetopic .summarytext {
    padding: 0 1.25rem !important;
}


/* =========================================================
   5. PERSONALIZAR LAS PESTAÑAS SEGÚN SU NOMBRE - TEMPLATE M11
   ========================================================= */


/* Prepara las pestañas identificadas dinámicamente, aumenta el título y alinea el icono */
#page-course-view-onetopic .dygo-onetopic-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;

    font-size: 1.15em;
}


/* Define la apariencia común de los iconos y aumenta su presencia visual */
#page-course-view-onetopic .dygo-onetopic-tab::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.25em;

    flex: 0 0 auto;

    color: var(--dygo-tab-accent);

    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}


/* Mantiene los iconos inactivos ligeramente atenuados sin perder su identidad cromática */
#page-course-view-onetopic .dygo-onetopic-tab:not(.active)::before {
    opacity: 0.92;
}


/* Recupera toda la intensidad del icono al pasar sobre una pestaña inactiva */
#page-course-view-onetopic .dygo-onetopic-tab:not(.active):hover::before {
    opacity: 1;
}


/* Muestra el icono con toda su intensidad cuando la pestaña está activa */
#page-course-view-onetopic .dygo-onetopic-tab.active::before {
    opacity: 1;
}


/* Aplica el color de énfasis al borde superior real de la pestaña activa */
#page-course-view-onetopic .format_onetopic-tabs .dygo-onetopic-tab.active {
    border-top-color: var(--dygo-tab-accent) !important;
    border-top-width: 0.1875rem !important;
}


/* Identifica Presentación del curso con un azul petróleo vivo */
#page-course-view-onetopic .dygo-onetopic-tab--presentacion {
    --dygo-tab-accent: #287fa3;
}


/* Añade el icono de información a Presentación del curso */
#page-course-view-onetopic .dygo-onetopic-tab--presentacion::before {
    content: "\f05a";
}

/* Identifica pestaña de Interacción con un tono fucsia frambuesa */
#page-course-view-onetopic .dygo-onetopic-tab--interaccion {
    --dygo-tab-accent: #6f5bc7;
}

/* Añade el icono de verificación a Comunicación*/
#page-course-view-onetopic .dygo-onetopic-tab--interaccion::before {
    content: "\f086";
}

/* Identifica Material de estudio con un naranja cálido */
#page-course-view-onetopic .dygo-onetopic-tab--material {
    --dygo-tab-accent: #e67e22;
}


/* Añade el icono de libro a Material de estudio */
#page-course-view-onetopic .dygo-onetopic-tab--material::before {
    content: "\f518";
}


/* Identifica Actividades formativas con un verde vivo y equilibrado */
#page-course-view-onetopic .dygo-onetopic-tab--formativas {
    --dygo-tab-accent: #2e9d5b;
}


/* Añade el icono académico a Actividades formativas */
#page-course-view-onetopic .dygo-onetopic-tab--formativas::before {
    content: "\f19d";
}


/* Identifica Actividades evaluativas con un tono fucsia frambuesa */
#page-course-view-onetopic .dygo-onetopic-tab--evaluativas {
    --dygo-tab-accent: #d6457d;
}


/* Añade el icono de verificación a Actividades evaluativas */
#page-course-view-onetopic .dygo-onetopic-tab--evaluativas::before {
    content: "\f46c";
}


/* Identifica Archivo docente con un tono ámbar dorado */
#page-course-view-onetopic .dygo-onetopic-tab--gestion{
    --dygo-tab-accent: #b8871b;
}


/* Añade el icono de carpeta a Archivo docente */
#page-course-view-onetopic .dygo-onetopic-tab--gestion::before {
    content: "\f4fe";
}


/* =========================================================
   6. BLOQUES DE LA REGIÓN SUPERIOR - ONE TOPIC
   ========================================================= */


/* Neutraliza la apariencia de tarjeta de todos los bloques ubicados en la región superior */
#page-course-view-onetopic #block-region-top .block.card {
    background-color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}


/* Mantiene transparente visualmente el cuerpo interno de cada bloque */
#page-course-view-onetopic #block-region-top .block.card .card-body {
    background-color: inherit !important;
    border: none !important;
    padding: 0px !important;
}

/* =========================================================
   7. NAVEGACIÓN SECUNDARIA DEL CURSO - ONE TOPIC
   ========================================================= */


/* Elimina el relleno inferior del contenedor de navegación secundaria */
#page-course-view-onetopic .secondary-navigation {
    padding-bottom: 0 !important;
}


/* Redondea únicamente las esquinas superiores del contenedor interno de navegación secundaria */
#page-course-view-onetopic .secondary-navigation .navigation {
    border-radius: 0.4375rem 0.4375rem 0 0 !important;
}

/* =========================================================
   0. OCULTO BOTÓN DE AÑADIR RECURSO O ACTIVIDAD EN PESTAÑA DE PRESENTACIÓN Y DE MATERIAL
   ========================================================= */

/* Oculta el botón cuando la pestaña activa sea "Interacción" o "Presentación" */
body:has(.format_onetopic-tabs .dygo-onetopic-tab--interaccion.active) .course-content .divider.bulk-hidden,
body:has(.format_onetopic-tabs .dygo-onetopic-tab--presentacion.active) .course-content .divider.bulk-hidden,
body:has(.format_onetopic-tabs .dygo-onetopic-tab--material.active) .course-content .divider.bulk-hidden {
    display: none !important;
}