Pestañas de secciones del curso (format_onetopic)

Ficha técnica

• Impacto — Tema: SCSS nuevo scss/coursetabs.scss, registrado en theme_cdigital_get_main_scss_content() (lib.php)
• Impacto — Plugin: —
• Requisito: consistencia visual con las tabs de "Mis Cursos" del Área personal, pedida directamente para la vista de curso (sin documento de requerimiento ni nodo de Figma dedicados) · Figma: — · Estado: Implementado

Propósito

format_onetopic (plugin de terceros, course/format/onetopic) renderiza cada sección del curso como una pestaña — en /course/view.php?id=3: Bienvenida / Caja de herramientas / Módulo 1…5 — dentro de #tabs-tree-start > .tabs-wrapper > ul.format_onetopic-tabs. Por defecto trae su propio aspecto (carpetas con borde, esquinas redondeadas arriba, azul de Boost), visualmente desconectado del resto del tema. Esta feature le aplica el mismo lenguaje de tabs subrayadas que ya usa Mis Cursos del Área personal (.cdigital-miscursos__tabs), con el token de marca del tema.

Alcance

• Solo la vista por defecto de format_onetopic (tabsview = 0, clase defaulttabs en #tabs-tree-start). Las vistas alternativas onelinetabs y verticaltabs (configurables por curso desde la administración del formato) conservan el aspecto propio del plugin: una barra vertical necesita un indicador lateral, no un subrayado.
• Solo cursos con formato onetopic. No alcanza a los nav-tabs que genera core/tabtree en otras páginas del curso (calificaciones, informes, algunos módulos), que quedan con el estilo de Boost.
• No se sobrescribe ninguna plantilla del plugin (header.mustache, courseformat/tabtree.mustache): el marcado actual ya expone las clases necesarias (.marker, .dimmed, .disabled, .subtopic), así que todo el restyle se resuelve con CSS anclado en #tabs-tree-start, mismo patrón que Miga de pan evita sobrescribir core/navbar.mustache.

Desviaciones conscientes

• Color distinto al de "Mis Cursos": ese componente usa $primary (#0043CE, variable Sass del preset) en vez del token --color-primary (#0943B5) que usa el resto del tema. Aquí se usa --color-primary, porque justo encima de estas pestañas, en la misma página, ya conviven las pestañas-píldora cobalto de la navegación secundaria del curso (.secondary-navigation .navigation .nav-tabs, scss/preset/cdigital.scss:1744-1810); mezclar un segundo azul en la misma vista habría sido inconsistente. #0043CE vs #0943B5 es una divergencia preexistente entre /my/ y el resto del tema, no algo que esta feature intente resolver.
• .marker (sección "actual" sin estar seleccionada) no se trata como activa: el plugin la pinta en negrilla por defecto sin distinguirla de .active. Aquí conserva la negrilla pero en gris inactivo, reservando el color y el subrayado cobalto exclusivamente a la pestaña seleccionada.
• Desbordamiento resuelto con scroll horizontal, no con la segunda fila del plugin: con 6+ secciones (caso real del curso piloto, 8 pestañas) defaulttabs sin intervención envuelve a una segunda línea. Se fuerza una sola fila con overflow-x: auto y la barra de scroll oculta —mismo recurso que .cdigital-tabfilter en /my/courses.php—, porque el subrayado de 2px pierde sentido partido en dos líneas. A diferencia de la navegación secundaria del curso, aquí no hay JS de terceros (core/moremenu.js) midiendo el ancho de la fila, así que el overflow-x no compite con ningún cálculo existente.
• Precedencia respetada para colores configurados por curso: si un editor asigna colores por pestaña desde la administración del formato, el plugin los inyecta en tiempo real vía course/format/onetopic/styles.php, con reglas también ancladas en #tabs-tree-start pero con clases más específicas. Esas reglas siguen ganando sobre este SCSS — comportamiento deseado, ya que la intención del autor del curso debe prevalecer.

Archivos clave

Archivo	Descripción
theme/cdigital/scss/coursetabs.scss	Todo el restyle: pista, pestaña, estados (active/hover/focus-visible/marker/dimmed/disabled), scroll horizontal, subtabs y ajuste responsive
theme/cdigital/lib.php	theme_cdigital_get_main_scss_content() — registra el parcial anterior en la concatenación de SCSS del tema

Build y despliegue

Solo SCSS: no requiere build de AMD (grunt). Basta con purgar cachés tras el despliegue — ver Procedimiento de despliegue.