/* =========================================================
   ACADEMIA SAYER — COURSE VIEW
   FASE 2 / PLANTILLA GLOBAL DE CURSOS
   ========================================================= */

body.sayer-courseview-enabled,
body.sayer-courseview-enabled #page,
body.sayer-courseview-enabled #page-wrapper,
body.sayer-courseview-enabled #page-content,
body.sayer-courseview-enabled .main-inner,
body.sayer-courseview-enabled #region-main,
body.sayer-courseview-enabled .region-main-content {
    background: #050505 !important;
    color: #ffffff !important;
}

/* Quitar encabezado duplicado */
body.sayer-courseview-enabled #page-header {
    display: none !important;
}

/* Mantener barra superior, pero oscura */
body.sayer-courseview-enabled .navbar,
body.sayer-courseview-enabled nav.navbar,
body.sayer-courseview-enabled .navbar.fixed-top {
    background: #000000 !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.4) !important;
}

body.sayer-courseview-enabled .navbar .nav-link,
body.sayer-courseview-enabled .navbar .dropdown-toggle,
body.sayer-courseview-enabled .navbar .primary-navigation a {
    color: #ffffff !important;
}

/* Barra secundaria del curso */
body.sayer-courseview-enabled .secondary-navigation {
    background: #0a0a0a !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.sayer-courseview-enabled .secondary-navigation .nav-link {
    color: #d6d6d6 !important;
}

body.sayer-courseview-enabled .secondary-navigation .nav-link.active {
    color: #ff8a1f !important;
    border-bottom-color: #ff8a1f !important;
}

/* Contenedor general */
body.sayer-courseview-enabled .main-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 70px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.sayer-course-shell {
    width: 100%;
    margin: 0;
}

/* =========================================================
   HERO
   ========================================================= */

.sayer-course-hero {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
    min-height: 400px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(245,124,0,.25),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #1a0b02,
            #070707 68%
        );
    border-bottom: 1px solid rgba(245,124,0,.2);
}

.sayer-course-hero__media {
    min-height: 400px;
    background:
        linear-gradient(
            135deg,
            #1b1b1b,
            #080808
        );
}

.sayer-course-hero__placeholder {
    display: flex;
    height: 100%;
    min-height: 400px;
    align-items: flex-end;
    padding: 34px;
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(255,122,0,.33),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #2c1304,
            #090909
        );
}

.sayer-course-hero__placeholder span {
    color: rgba(255,255,255,.68);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sayer-course-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px;
}

.sayer-course-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.sayer-course-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 11px;
    color: #ffffff;
    background: rgba(245,124,0,.14);
    border: 1px solid rgba(245,124,0,.32);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.sayer-course-badge--primary {
    background: #f57c00;
    border-color: #f57c00;
}

.sayer-course-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    font-weight: 840;
    line-height: 1;
    letter-spacing: -.055em;
}

.sayer-course-hero__description {
    max-width: 720px;
    margin: 22px 0 0;
    color: #b7b7b7;
    font-size: 1.03rem;
    line-height: 1.65;
}

/* Metadata */
.sayer-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 30px;
}

.sayer-course-meta__item {
    min-width: 145px;
    padding-right: 18px;
    border-right: 1px solid rgba(255,255,255,.1);
}

.sayer-course-meta__item:last-child {
    border-right: 0;
}

.sayer-course-meta__label {
    display: block;
    color: #808080;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sayer-course-meta__value {
    display: block;
    margin-top: 5px;
    color: #ffffff;
    font-size: .93rem;
    font-weight: 760;
}

/* =========================================================
   PROGRESO
   ========================================================= */

.sayer-course-progress {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 240px;
    gap: 20px;
    align-items: center;
    width: calc(100% - 48px);
    max-width: 1440px;
    margin: 26px auto 32px;
    padding: 24px;
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
}

.sayer-course-progress__label {
    display: block;
    margin-bottom: 10px;
    color: #d8d8d8;
    font-size: .82rem;
    font-weight: 760;
}

.sayer-course-progress__track {
    overflow: hidden;
    height: 10px;
    background: #252525;
    border-radius: 999px;
}

.sayer-course-progress__bar {
    display: block;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #e86100,
            #ff9a2f
        );
    border-radius: inherit;
    box-shadow:
        0 0 18px rgba(245,124,0,.35);
}

.sayer-course-progress__value {
    color: #ff8a1f;
    font-size: 1.8rem;
    font-weight: 850;
}

.sayer-course-primary-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #e85f00,
            #ff9228
        );
    border-radius: 13px;
    font-weight: 850;
    text-decoration: none !important;
    box-shadow:
        0 14px 34px rgba(245,124,0,.24);
}

/* =========================================================
   CONTENIDO NATIVO MOODLE
   ========================================================= */

.sayer-course-native-wrapper {
    width: calc(100% - 48px);
    max-width: 1440px;
    margin: 0 auto;
    scroll-margin-top: 110px;
}

.sayer-native-region {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Fondo de secciones */
body.sayer-courseview-enabled .course-content,
body.sayer-courseview-enabled .course-content ul,
body.sayer-courseview-enabled .course-content li,
body.sayer-courseview-enabled .course-section {
    background: transparent !important;
}

/* Secciones */
body.sayer-courseview-enabled .course-section {
    overflow: visible !important;
    margin-bottom: 16px !important;
    background:
        linear-gradient(
            145deg,
            #171717,
            #0b0b0b
        ) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
}

/* Encabezados de sección */
body.sayer-courseview-enabled .course-section-header {
    padding: 20px !important;
    background: transparent !important;
}

body.sayer-courseview-enabled .course-section-header h3,
body.sayer-courseview-enabled .course-section-header h4,
body.sayer-courseview-enabled .course-section-header a {
    color: #ffffff !important;
}

/* Actividades */
body.sayer-courseview-enabled .activity {
    margin: 0 !important;
    padding: 14px 18px !important;
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
}

body.sayer-courseview-enabled .activity a {
    color: #e9e9e9 !important;
}

body.sayer-courseview-enabled .activity:hover {
    background: rgba(255,255,255,.025) !important;
}

/* Descripciones */
body.sayer-courseview-enabled .activity-description,
body.sayer-courseview-enabled .description,
body.sayer-courseview-enabled .contentwithoutlink {
    color: #a6a6a6 !important;
}

/* Botones de finalización */
body.sayer-courseview-enabled .completion-info,
body.sayer-courseview-enabled .btn-success,
body.sayer-courseview-enabled .badge-success {
    border-radius: 999px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .sayer-course-hero {
        grid-template-columns: 1fr;
    }

    .sayer-course-hero__media,
    .sayer-course-hero__placeholder {
        min-height: 300px;
    }

    .sayer-course-progress {
        grid-template-columns: 1fr auto;
    }

    .sayer-course-primary-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .sayer-course-hero__content {
        padding: 34px 24px;
    }

    .sayer-course-progress,
    .sayer-course-native-wrapper {
        width: calc(100% - 24px);
    }

    .sayer-course-progress {
        grid-template-columns: 1fr;
    }

    .sayer-course-progress__value {
        font-size: 1.5rem;
    }
}
/* =========================================================
   ACADEMIA SAYER
   UNIFICACIÓN VISUAL DEL CONTENIDO DEL CURSO
   ========================================================= */

/* Contenedor general sin caja exterior */
body.sayer-courseview-enabled
.sayer-course-native-wrapper,
body.sayer-courseview-enabled
#region-main,
body.sayer-courseview-enabled
.course-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Quitar el borde/caja grande de cada sección */
body.sayer-courseview-enabled
.course-section,
body.sayer-courseview-enabled
.course-section.main,
body.sayer-courseview-enabled
.course-section.section {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Separación elegante entre secciones */
body.sayer-courseview-enabled
.course-section + .course-section {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Encabezado de cada módulo */
body.sayer-courseview-enabled
.course-section-header {
    margin: 0 !important;
    padding: 18px 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
}

/* Quitar cualquier tarjeta interna blanca/gris */
body.sayer-courseview-enabled
.course-section .content,
body.sayer-courseview-enabled
.course-section .summary,
body.sayer-courseview-enabled
.course-section .section-item,
body.sayer-courseview-enabled
.course-section .course-section-header,
body.sayer-courseview-enabled
.course-section .sectionname,
body.sayer-courseview-enabled
.course-section .collapse {
    background: transparent !important;
    box-shadow: none !important;
}

/* Actividades integradas al mismo fondo */
body.sayer-courseview-enabled
.activity,
body.sayer-courseview-enabled
.activity-item,
body.sayer-courseview-enabled
.activity-wrapper {
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Separador entre actividades */
body.sayer-courseview-enabled
.activity + .activity {
    border-top: 1px solid rgba(255,255,255,.07) !important;
}

/* Hover muy sutil */
body.sayer-courseview-enabled
.activity:hover {
    background: rgba(255,255,255,.025) !important;
}

/* Quitar fondos raros en listas */
body.sayer-courseview-enabled
.course-content ul,
body.sayer-courseview-enabled
.course-content li,
body.sayer-courseview-enabled
.section,
body.sayer-courseview-enabled
.section li {
    background: transparent !important;
}

/* Mejor espacio lateral */
body.sayer-courseview-enabled
.sayer-course-native-wrapper {
    padding: 0 10px 30px;
}

/* Eliminar bordes brillantes residuales */
body.sayer-courseview-enabled
.course-section *,
body.sayer-courseview-enabled
.activity * {
    box-shadow: none;
}
/* =========================================================
   ACADEMIA SAYER
   CORRECCIÓN FINAL DE CONTORNOS MOODLE / MOOVE
   ========================================================= */

/* ---------------------------------------------------------
   1. CONTENEDORES GENERALES
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.sayer-course-native-wrapper,

body.sayer-courseview-enabled
.sayer-native-region,

body.sayer-courseview-enabled
#region-main,

body.sayer-courseview-enabled
#region-main > div,

body.sayer-courseview-enabled
.course-content,

body.sayer-courseview-enabled
.course-content > ul,

body.sayer-courseview-enabled
.course-content > ul > li,

body.sayer-courseview-enabled
.course-content .section,

body.sayer-courseview-enabled
.course-content .course-section {
    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;

    outline: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   2. EL CONTENEDOR QUE MOODLE USA COMO TARJETA DE SECCIÓN
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-section,

body.sayer-courseview-enabled
.course-section.main,

body.sayer-courseview-enabled
.course-section.section,

body.sayer-courseview-enabled
.course-section .section-item,

body.sayer-courseview-enabled
.section-item,

body.sayer-courseview-enabled
.section.main,

body.sayer-courseview-enabled
li.section {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   3. CABECERA DE CADA MÓDULO
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-section-header,

body.sayer-courseview-enabled
.course-section-header.d-flex,

body.sayer-courseview-enabled
.course-section .course-section-header,

body.sayer-courseview-enabled
.section-item .course-section-header {
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ---------------------------------------------------------
   4. ACTIVIDADES
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.activity,

body.sayer-courseview-enabled
.activity-item,

body.sayer-courseview-enabled
.activity-wrapper,

body.sayer-courseview-enabled
.activity-basis,

body.sayer-courseview-enabled
.activity-grid,

body.sayer-courseview-enabled
.activity-info {

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   5. QUITAR EL RECTÁNGULO INTERNO OSCURO
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.activity-item:not(.activityinline),

body.sayer-courseview-enabled
.activity-item.activityinline,

body.sayer-courseview-enabled
.activity-item > div,

body.sayer-courseview-enabled
.activity-item .activity-grid {

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;

    border-radius: 0 !important;
}


/* ---------------------------------------------------------
   6. SEPARADORES SUTILES
   En vez de cuadros usamos solamente líneas.
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-section {

    padding: 12px 0 20px !important;
    margin: 0 !important;
}


body.sayer-courseview-enabled
.course-section + .course-section {

    margin-top: 8px !important;

    border-top:
        1px solid rgba(255,255,255,.09) !important;
}


/* Línea bajo el título de cada módulo */

body.sayer-courseview-enabled
.course-section-header {

    padding-top: 18px !important;
    padding-bottom: 18px !important;

    border-bottom:
        1px solid rgba(255,255,255,.08) !important;
}


/* Línea entre actividades */

body.sayer-courseview-enabled
.activity + .activity {

    border-top:
        1px solid rgba(255,255,255,.065) !important;
}


/* ---------------------------------------------------------
   7. EVITAR QUE MOOVE REINSERTE BORDES AL HACER HOVER
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-section:hover,

body.sayer-courseview-enabled
.section-item:hover,

body.sayer-courseview-enabled
.activity:hover,

body.sayer-courseview-enabled
.activity-item:hover {

    border-color: transparent !important;

    outline: 0 !important;

    box-shadow: none !important;
}


/* Hover solamente sobre la actividad */

body.sayer-courseview-enabled
.activity:hover {

    background:
        rgba(255,255,255,.025) !important;
}


/* ---------------------------------------------------------
   8. QUITAR EL GRAN MARCO EXTERIOR
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.sayer-course-native-wrapper {

    padding: 0 !important;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   9. TEXTOS
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-section-header h3,

body.sayer-courseview-enabled
.course-section-header h4,

body.sayer-courseview-enabled
.course-section-header a {

    color: #ffffff !important;
}


body.sayer-courseview-enabled
.activity-description,

body.sayer-courseview-enabled
.activity .description,

body.sayer-courseview-enabled
.activity .contentwithoutlink {

    color: #a8a8a8 !important;
}
/* =========================================================
   ACADEMIA SAYER
   COLORES DE ACTIVIDADES + BOTONES DE COLAPSAR
   ========================================================= */

/* ---------------------------------------------------------
   1. TÍTULOS DE ACTIVIDADES
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.activity a,

body.sayer-courseview-enabled
.activity-name-area a,

body.sayer-courseview-enabled
.activityinstance a,

body.sayer-courseview-enabled
.instancename {

    color: #f3f3f3 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}


/* Hover de títulos */
body.sayer-courseview-enabled
.activity a:hover,

body.sayer-courseview-enabled
.activity-name-area a:hover,

body.sayer-courseview-enabled
.activityinstance a:hover {

    color: #ff8a1f !important;
}


/* ---------------------------------------------------------
   2. TEXTOS SECUNDARIOS / DESCRIPCIONES
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.activity-description,

body.sayer-courseview-enabled
.activity .description,

body.sayer-courseview-enabled
.activity .contentwithoutlink,

body.sayer-courseview-enabled
.activity .text-muted,

body.sayer-courseview-enabled
.activity .dimmed_text {

    color: #a9a9a9 !important;
}


/* ---------------------------------------------------------
   3. ICONOS DE ACTIVIDADES
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.activityicon,

body.sayer-courseview-enabled
.activity-icon,

body.sayer-courseview-enabled
.activity img.activityicon,

body.sayer-courseview-enabled
.activity svg {

    filter: none !important;
}


/* Iconos SVG */
body.sayer-courseview-enabled
.activity svg,

body.sayer-courseview-enabled
.activity svg path,

body.sayer-courseview-enabled
.activity svg circle,

body.sayer-courseview-enabled
.activity svg rect {

    color: #ff8a1f !important;
    fill: currentColor !important;
}


/* Si el icono es imagen raster y Moodle le aplica color */
body.sayer-courseview-enabled
.activity img {

    opacity: .95 !important;
}


/* ---------------------------------------------------------
   4. ETIQUETAS DE TIPO DE ARCHIVO
   PPSX / PDF / ETC.
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.activity .badge,

body.sayer-courseview-enabled
.activity .activitybadge,

body.sayer-courseview-enabled
.activity .text-uppercase {

    color: #777777 !important;
    background: transparent !important;
    border: 0 !important;
}


/* ---------------------------------------------------------
   5. BOTÓN EXPANDIR / COLAPSAR SECCIÓN
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-section-header button,

body.sayer-courseview-enabled
.course-section-header .btn,

body.sayer-courseview-enabled
.course-section-header [data-toggle="collapse"],

body.sayer-courseview-enabled
.course-section-header [data-bs-toggle="collapse"] {

    width: 34px !important;
    height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ff8a1f !important;

    background: rgba(255,138,31,.09) !important;

    border:
        1px solid rgba(255,138,31,.28) !important;

    border-radius: 8px !important;

    box-shadow: none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}


/* Hover */
body.sayer-courseview-enabled
.course-section-header button:hover,

body.sayer-courseview-enabled
.course-section-header .btn:hover {

    color: #ffffff !important;

    background: #ff7a00 !important;

    border-color: #ff7a00 !important;
}


/* ---------------------------------------------------------
   6. FLECHAS / CHEVRONS DEL BOTÓN
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-section-header button svg,

body.sayer-courseview-enabled
.course-section-header button svg path,

body.sayer-courseview-enabled
.course-section-header .btn svg,

body.sayer-courseview-enabled
.course-section-header .btn svg path {

    color: currentColor !important;
    fill: currentColor !important;
}


/* ---------------------------------------------------------
   7. "COLAPSAR TODO"
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.course-content
a[href*="collapse"],

body.sayer-courseview-enabled
.course-content
button[data-action*="collapse"],

body.sayer-courseview-enabled
.course-content
.collapseall {

    color: #ff8a1f !important;

    background: transparent !important;

    border: 0 !important;

    font-weight: 700 !important;

    text-decoration: none !important;
}


/* Hover de Colapsar todo */
body.sayer-courseview-enabled
.course-content
a[href*="collapse"]:hover,

body.sayer-courseview-enabled
.course-content
button[data-action*="collapse"]:hover,

body.sayer-courseview-enabled
.course-content
.collapseall:hover {

    color: #ffffff !important;
}


/* ---------------------------------------------------------
   8. BOTONES DE ESTADO "HECHO"
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.completion-info button,

body.sayer-courseview-enabled
.completion-info .btn,

body.sayer-courseview-enabled
.activity-completion button {

    color: #8ee08a !important;

    background: rgba(74, 180, 80, .10) !important;

    border:
        1px solid rgba(74, 180, 80, .35) !important;

    border-radius: 999px !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   9. BOTONES PENDIENTES
   --------------------------------------------------------- */

body.sayer-courseview-enabled
.completion-info .btn-outline-secondary,

body.sayer-courseview-enabled
.activity-completion .btn-outline-secondary {

    color: #a7a7a7 !important;

    background: transparent !important;

    border:
        1px solid rgba(255,255,255,.18) !important;
}
/* =========================================================
   ACADEMIA SAYER
   RESTRICCIONES / ACTIVIDADES BLOQUEADAS
   ========================================================= */

/* Mensajes de restricción de acceso */
body.sayer-courseview-enabled
.availabilityinfo,

body.sayer-courseview-enabled
.availabilityinfo.isrestricted,

body.sayer-courseview-enabled
.activity .availabilityinfo,

body.sayer-courseview-enabled
.activity-item .availabilityinfo,

body.sayer-courseview-enabled
[data-region="availabilityinfo"] {

    color: #f2f2f2 !important;

    background: #111111 !important;
    background-color: #111111 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;

    box-shadow: none !important;
}


/* Contenedores internos */
body.sayer-courseview-enabled
.availabilityinfo > div,

body.sayer-courseview-enabled
.availabilityinfo span,

body.sayer-courseview-enabled
.availabilityinfo p,

body.sayer-courseview-enabled
.availabilityinfo small {

    color: #f2f2f2 !important;
    background: transparent !important;
}


/* Iconos / candados */
body.sayer-courseview-enabled
.availabilityinfo .icon,

body.sayer-courseview-enabled
.availabilityinfo i,

body.sayer-courseview-enabled
.availabilityinfo svg {

    color: #ff8a1f !important;
}


/* SVG */
body.sayer-courseview-enabled
.availabilityinfo svg path {

    fill: currentColor !important;
}


/* Si Moodle usa alertas dentro de la disponibilidad */
body.sayer-courseview-enabled
.availabilityinfo .alert,

body.sayer-courseview-enabled
.availabilityinfo .alert-info,

body.sayer-courseview-enabled
.availabilityinfo .alert-warning,

body.sayer-courseview-enabled
.activity .alert {

    color: #f2f2f2 !important;

    background: #111111 !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    border-radius: 12px !important;

    box-shadow: none !important;
}


/* Texto secundario */
body.sayer-courseview-enabled
.availabilityinfo .text-muted {

    color: #b2b2b2 !important;
}
/* =========================================================
   ACADEMIA SAYER
   ICONOS DE RECURSOS / ACTIVIDADES EN NARANJA
   ========================================================= */

/* Contenedor general del icono de actividad */
body.sayer-courseview-enabled
.activityiconcontainer,

body.sayer-courseview-enabled
.activity-icon,

body.sayer-courseview-enabled
.activityicon,

body.sayer-courseview-enabled
.activity-item .activityiconcontainer {
    color: #ff7a00 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* SVG de actividades */
body.sayer-courseview-enabled
.activityiconcontainer svg,

body.sayer-courseview-enabled
.activityiconcontainer svg path,

body.sayer-courseview-enabled
.activityiconcontainer svg rect,

body.sayer-courseview-enabled
.activityiconcontainer svg circle,

body.sayer-courseview-enabled
.activity-icon svg,

body.sayer-courseview-enabled
.activity-icon svg path {
    color: #ff7a00 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}


/* Iconos font / Moodle */
body.sayer-courseview-enabled
.activityiconcontainer i,

body.sayer-courseview-enabled
.activityiconcontainer .icon,

body.sayer-courseview-enabled
.activity .icon {
    color: #ff7a00 !important;
}


/* Imágenes de icono que Moodle carga como PNG/SVG externo */
body.sayer-courseview-enabled
.activityiconcontainer img,

body.sayer-courseview-enabled
.activity img.activityicon {
    filter:
        brightness(0)
        saturate(100%)
        invert(52%)
        sepia(99%)
        saturate(2746%)
        hue-rotate(359deg)
        brightness(101%)
        contrast(106%) !important;

    opacity: 1 !important;
}


/* PowerPoint / PDF / recurso */
body.sayer-courseview-enabled
.modtype_resource .activityiconcontainer,

body.sayer-courseview-enabled
.modtype_url .activityiconcontainer,

body.sayer-courseview-enabled
.modtype_page .activityiconcontainer,

body.sayer-courseview-enabled
.modtype_folder .activityiconcontainer {
    color: #ff7a00 !important;
}


/* Evaluaciones / quiz */
body.sayer-courseview-enabled
.modtype_quiz .activityiconcontainer,

body.sayer-courseview-enabled
.modtype_assign .activityiconcontainer {
    color: #ff7a00 !important;
}


/* Evitar que Moodle aplique gris por estados */
body.sayer-courseview-enabled
.activityiconcontainer.is-dimmed,

body.sayer-courseview-enabled
.activityiconcontainer.dimmed,

body.sayer-courseview-enabled
.activity .dimmed .activityiconcontainer {
    color: #ff7a00 !important;
    opacity: 1 !important;
}


/* Hover ligeramente más brillante */
body.sayer-courseview-enabled
.activity:hover
.activityiconcontainer {
    color: #ff9a32 !important;
}
/* =========================================================
   ACADEMIA SAYER
   HERO DE CURSO — ESTÁNDAR DE IMAGEN 1000 × 800 / 5:4
   ========================================================= */

/*
 * HERO:
 * mantenemos dos columnas,
 * pero permitimos que la proporción de la imagen
 * defina correctamente su altura.
 */
body.sayer-courseview-enabled
.sayer-course-hero {
    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(0, 1.1fr) !important;

    min-height: 0 !important;

    align-items: center !important;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(245, 124, 0, 0.25),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #1a0b02,
            #070707 68%
        ) !important;
}


/* =========================================================
   CONTENEDOR DE IMAGEN
   ========================================================= */

body.sayer-courseview-enabled
.sayer-course-hero__media {

    position: relative !important;

    width: 100% !important;

    /*
     * Proporción oficial:
     * 1000 × 800 = 5:4
     */
    aspect-ratio: 5 / 4 !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    align-self: center !important;

    background: #0b0b0b !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   IMAGEN REAL
   ========================================================= */

body.sayer-courseview-enabled
.sayer-course-hero__media img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    /*
     * Con imágenes producidas específicamente
     * en 5:4, prácticamente no habrá recorte.
     */
    object-fit: cover !important;

    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   PLACEHOLDER
   También respeta 5:4 mientras no exista portada.
   ========================================================= */

body.sayer-courseview-enabled
.sayer-course-hero__placeholder {

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    display: flex !important;

    align-items: flex-end !important;

    padding: 34px !important;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(255, 122, 0, 0.33),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #2c1304,
            #090909
        ) !important;
}


/* =========================================================
   CONTENIDO DERECHO
   ========================================================= */

body.sayer-courseview-enabled
.sayer-course-hero__content {

    min-height: 400px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 54px !important;
}


/* =========================================================
   QUITAR CUALQUIER LÍNEA RESIDUAL DE LA IMAGEN
   ========================================================= */

body.sayer-courseview-enabled
.sayer-course-hero__media,

body.sayer-courseview-enabled
.sayer-course-hero__media img,

body.sayer-courseview-enabled
.sayer-course-hero__placeholder {

    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    body.sayer-courseview-enabled
    .sayer-course-hero {

        grid-template-columns: 1fr !important;

        align-items: stretch !important;
    }

    body.sayer-courseview-enabled
    .sayer-course-hero__media {

        width: 100% !important;

        aspect-ratio: 5 / 4 !important;

        min-height: 0 !important;
    }

    body.sayer-courseview-enabled
    .sayer-course-hero__content {

        min-height: auto !important;

        padding: 40px 32px !important;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 760px) {

    body.sayer-courseview-enabled
    .sayer-course-hero__media {

        width: 100% !important;

        aspect-ratio: 5 / 4 !important;

        min-height: 0 !important;
    }

    body.sayer-courseview-enabled
    .sayer-course-hero__content {

        padding: 32px 24px !important;
    }
}