/* ==========================================================================
   Estilos para el Formato de Curso "Topics Activity Cards" en Moodle
   ========================================================================== */

/* --------------------------------------------------------------------------
   Estilos Globales de la Página del Curso
   -------------------------------------------------------------------------- */

/* Oculta el encabezado de página por defecto para dar protagonismo a las tarjetas */
body#page-course-view-topicsactivitycards header#page-header {
    display: none !important;
}

/* Ajusta el fondo y el padding del contenedor principal del contenido del curso */
body#page-course-view-topicsactivitycards div#page-content,
#page-course-view-topicsactivitycards #page.drawers .main-inner {
    background-color: #F8F8F6 !important;
    padding: 0 !important;
    border: none !important;
}

/* --------------------------------------------------------------------------
   Estilos para el Contenedor Principal de Tarjetas de Sección
   -------------------------------------------------------------------------- */

/* Estilo base para el contenedor de una sección (tarjeta grande) */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards li.section.tac-container .section-inner-wrapper {
    background-color: white;
    box-shadow: 1px 3px 9px 0px #7d7d7d26 !important;
    border-radius: 7px; /* Se añade para consistencia visual */
}

/* Padding interno para el contenido de la tarjeta de sección */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards .section-inner-wrapper .content {
    padding: 1rem;
}

/* Define la proporción para la imagen de cabecera de la tarjeta */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards .tac-card-mediawrapper {
    padding-top: 40%;
}

/* --------------------------------------------------------------------------
   Estilos para las Tarjetas de Actividad Individuales
   -------------------------------------------------------------------------- */

/* Wrapper interno de una actividad individual dentro de una tarjeta de sección */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards li.section.layoutcards .activity-inner-wrapper {
    border: 1px solid #f3f3f3;
    background-color: white;
}

/* Sombra para las tarjetas de actividad */
.activity-inner-wrapper.shadow.rounded.h-100 {
    box-shadow: 1px 3px 9px 0px #7d7d7d17 !important;
}

/* Ajuste de padding para el contenedor de la actividad */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards li.section.layoutcards .activity {
    padding: 3px !important;
}

/* --------------------------------------------------------------------------
   Estilos Específicos para las Secciones de Presentación (0 y 1)
   Objetivo: Hacer que la imagen de resumen ocupe todo el ancho superior de la tarjeta.
   -------------------------------------------------------------------------- */

/* 1. Se agrupan los selectores para las secciones 0 y 1 usando :is() para mayor legibilidad */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards .section-inner-wrapper .content {
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. Se fuerza al bloque de información a usar todo el ancho disponible */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards .section-inner-wrapper .content div[data-for="sectioninfo"] {
    margin: 0 !important;
    width: 100% !important;
}

/* 3. La imagen de portada se estira y se redondean sus esquinas superiores */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards .section-inner-wrapper .content .summarytext p img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: inherit; /* Hereda el border-radius del contenedor padre */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 4. Se eliminan márgenes del párrafo que contiene la imagen y del texto descriptivo */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards .section-inner-wrapper .content .summarytext p {
    margin: 0 !important;
}

/* 5. Se asegura que la lista de actividades dentro de estas secciones mantenga su padding */
.format-topicsactivitycards.path-course-view #page ul.topicsactivitycards .section-inner-wrapper .content ul[data-for="cmlist"] {
    padding: 1rem !important;
}

/* ==========================================================================
   REGLA ESPECÍFICA PARA LA SECCIÓN 0 (PRESENTACIÓN)  mostrar cabeceras
   ========================================================================== */

/* Por defecto, ocultar la cabecera de la Sección 0 en la página principal */
#page-course-view-topicsactivitycards #section-0 .course-section-header.d-flex {
    display: none !important;
}

/* Mostrar la cabecera de la Sección 0 SOLO cuando tiene la clase .dropready (Modo Edición) */
#page-course-view-topicsactivitycards #section-0 .course-section-header.d-flex.dropready {
    display: flex !important;
}


/* ==========================================================================
   REGLAS PARA LAS DEMÁS SECCIONES (MÓDULOS 1, 2, 3, etc.)
   ========================================================================== */

/* Ocultar las cabeceras cuando NO se están editando (sin draggable o en false) */
#page-course-view-topicsactivitycards .section:not(#section-0) .course-section-header.d-flex:not([draggable]),
#page-course-view-topicsactivitycards .section:not(#section-0) .course-section-header.d-flex[draggable="false"] {
    display: none !important;
}

/* Mostrar las cabeceras cuando se activa la edición (draggable="true") */
#page-course-view-topicsactivitycards .section:not(#section-0) .course-section-header.d-flex[draggable="true"] {
    display: flex !important;
}



/* 2. Ajustar el padding de los bloques internos de las tarjetas (Disponibilidad y Resumen) */
#page-course-view-topicsactivitycards .course-content .section_availability,
#page-course-view-topicsactivitycards .course-content .section-summary-activities {
    padding: 0 1.5rem 1rem;
}