/**
 * OTEC Biomédica — Integración con Moodle (portada tipo mockup)
 */

/* ---------- Ocultar UI Moodle no usada en la portada OTEC (no tocar #page-header global del tema) ---------- */
.path-site.otec-fp-catalog #fpmaincontent .page-header,
.path-site.otec-fp-catalog #fpmaincontent .page-header-headings,
.path-site.otec-fp-catalog #fpmaincontent .page-context-header,
.path-site.otec-fp-catalog .sticky-header,
.path-site.otec-fp-catalog .secondary-navigation,
.path-site.otec-fp-catalog .tertiary-navigation,
.path-site.otec-fp-catalog .activity-navigation,
.path-site.otec-fp-catalog .activity-header,
.path-site.otec-fp-catalog .course-content-footer,
.path-site.otec-fp-catalog .coursepageinformationbanners,
.path-site.otec-fp-catalog .region_main_settings_menu_proxy,
.path-site.otec-fp-catalog #drawerTogglerRight,
.path-site.otec-fp-catalog .drawer-toggler.drawer-right-toggle {
    display: none !important;
}

.path-site.otec-fp-catalog #theme_alpha-drawers-blocks.drawer {
    display: none !important;
}

.path-site.otec-fp-catalog #region-main-box {
    max-width: 100%;
}

.path-site.otec-fp-catalog .otec-fp-main-inner {
    width: 100%;
}

/* ---------- Base portada ---------- */
.path-site.otec-fp-catalog #page-wrapper {
    background: #fff;
}

/* Marca / hero (teal institucional) */
:root {
    --otec-teal: #399ba6;
    --otec-teal-dark: #2b7a83;
    --otec-navy: #1a2b4b;
    /* Cabecera y pie (mismo teal institucional) */
    --otec-header-accent: #3a96a1;
    --otec-footer-teal: #3a96a1;
}

/* ---------- Header institucional (referencia imagen 2: blanco, marca + Inicio/Cursos + Acceder) ---------- */
#topBar.rui-topbar-wrapper {
    background: #fff !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.otec-header-topbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem 1rem;
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
    min-height: clamp(64px, 8vw, 80px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Crece para que el bloque de iconos (.otec-header-actions + ml-auto) quede al borde derecho */
.otec-header-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.otec-header-left {
    gap: 0.5rem;
}

.otec-header-logo-link {
    gap: 0.65rem;
    text-decoration: none !important;
}

.otec-header-mark-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.otec-header-mark-icon svg {
    width: clamp(32px, 3.5vw, 46px);
    height: clamp(32px, 3.5vw, 46px);
}

.otec-header-brand-lines {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
    margin-left: 0;
}

.otec-header-brand-line {
    font-size: clamp(0.65rem, 0.5rem + 0.38vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #111 !important;
    text-transform: uppercase;
}

/* ── LOGO EN HEADER: mostrar PNG institucional, ocultar SVG genérico y texto ── */

/* Cuando hay logo subido (clase rui-navbar-brand--img) → mostrar PNG, ocultar SVG+texto */
#topBar .rui-navbar-brand--img .otec-header-mark-icon {
    display: none !important;
}
#topBar .rui-navbar-brand--img .otec-header-brand-lines {
    display: none !important;
}
#topBar .rui-navbar-brand--img .otec-header-raster-logo {
    display: inline-flex !important;
    align-items: center;
}
#topBar .rui-navbar-brand--img .rui-custom-logo {
    max-height: clamp(44px, 6vw, 68px);
    width: auto;
    max-width: min(240px, 40vw);
    object-fit: contain;
    margin-left: 0 !important;
}
/* Ocultar dark-mode logo (solo mostrar el claro en topbar blanco) */
#topBar .rui-navbar-brand--img .rui-custom-dmlogo {
    display: none !important;
}

/* Cuando NO hay logo (sin clase --img) → mostrar SVG+texto normalmente */
#topBar .otec-header-logo-link:not(.rui-navbar-brand--img) .otec-header-raster-logo {
    display: none !important;
}

/* Logo en móvil: también mostrar PNG si existe */
#topBar .otec-header-mobile-brand .otec-header-raster-logo {
    display: inline-flex !important;
    align-items: center;
}
#topBar .otec-header-mobile-brand .rui-custom-logo {
    max-height: clamp(36px, 8vw, 52px);
    width: auto;
    max-width: min(180px, 48vw);
    object-fit: contain;
    margin-left: 0 !important;
}

.otec-header-nav {
    gap: 1.35rem !important;
    align-items: center;
}

.otec-header-nav-link {
    font-size: 1rem;
    font-weight: 600;
    color: #111 !important;
    text-decoration: none !important;
    line-height: 1.2;
    padding: 0.35rem 0;
    white-space: nowrap;
}

.otec-header-nav-link:hover {
    color: var(--otec-header-accent) !important;
}

.otec-header-primary-nav .moremenu .nav-link,
.otec-header-primary-nav .more-nav > li > .nav-link {
    font-weight: 600 !important;
    color: #111 !important;
}

.otec-header-primary-nav .moremenu .nav-link:hover {
    color: var(--otec-header-accent) !important;
}

.otec-header-login-btn,
a.rui-login-btn,
.rui-topbar-btn.rui-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: var(--otec-header-accent) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.65rem !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

/* Quitar icono/pix que Moodle o el tema puedan inyectar junto al texto */
#topBar .otec-header-login-btn .icon,
#topBar .otec-header-login-btn img.icon,
#topBar .otec-header-login-btn > svg {
    display: none !important;
}

#topBar .otec-header-login-btn::before,
#topBar .otec-header-login-btn::after {
    content: none !important;
}

.otec-header-login-btn:hover,
.otec-header-login-btn:focus,
a.rui-login-btn:hover,
a.rui-login-btn:focus,
.rui-topbar-btn.rui-login-btn:hover {
    background: #318896 !important;
    color: #fff !important;
}

#topBar ul.rui-icon-menu.otec-header-actions {
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto !important;
}

/* Ocultar <li> vacío del plugin bar (evita huecos) */
#topBar .rui-icon-menu > li:empty {
    display: none !important;
}

.otec-header-login-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Referencia: barra limpia (sin idioma en topbar, modo oscuro visible) */
#topBar .otec-header-lang-slot {
    display: none !important;
}

@media (min-width: 992px) {
    .otec-header-left .rui-drawer-toggle {
        display: none !important;
    }
}

/* Móvil: misma marca que escritorio */
#topBar .rui-mobile-nav.otec-header-mobile-bar {
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

#topBar .otec-header-mobile-brand .otec-header-brand-line {
    font-size: 0.58rem;
}

@media (min-width: 576px) {
    #topBar .otec-header-mobile-brand .otec-header-brand-line {
        font-size: 0.62rem;
    }
}

/* Contenedor del pie: sin fondo/padding extra del wrapper Alpha */
.otec-page-footer.wrapper-page {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Cabecera siempre clara (referencia), aunque el sitio use modo oscuro */
/* Portada dark mode: siempre topbar blanco (marca sobre fondo claro) */
.pagelayout-frontpage.theme-dark #topBar.rui-topbar-wrapper {
    background: #fff !important;
    border-bottom: none !important;
}

.theme-dark .otec-header-brand-line {
    color: #111;
}

.theme-dark .otec-header-nav-link,
.theme-dark .otec-header-primary-nav .moremenu .nav-link {
    color: #2c2c2c !important;
}

/* ── LOGO SIDEBAR (drawer) — PNG con fondo blanco sobre sidebar oscuro ── */
.rui-drawer-logo {
    display: block;
    padding: 12px 16px 10px;
    margin-bottom: 6px;
}
.rui-drawer-logo .rui-custom-logo {
    display: block;
    max-height: 52px;
    width: auto;
    max-width: 185px;
    object-fit: contain;
    /* Contenedor blanco redondeado para el PNG con fondo blanco */
    background: #ffffff;
    border-radius: 8px;
    padding: 5px 8px;
}
/* Ocultar dark-mode duplicate en drawer */
.rui-drawer-logo .rui-custom-dmlogo {
    display: none !important;
}

/* Logo horizontal OTEC — barra superior */
#topBar .rui-custom-logo {
    max-height: clamp(44px, 6vw, 68px);
    width: auto;
    max-width: min(240px, 40vw);
    object-fit: contain;
    /* Sin fondo extra en header blanco — el PNG encaja directo */
    background: none;
    padding: 0;
    border-radius: 0;
}

.path-login .rui-login-logo {
    max-height: 64px;
    width: auto;
    max-width: min(320px, 85vw);
    object-fit: contain;
}

.otec-fp-dot {
    background: var(--otec-teal) !important;
}

.otec-fp-tagline {
    color: var(--otec-navy);
    font-weight: 600;
}

.otec-fp-text-teal {
    color: var(--otec-teal) !important;
}

.otec-fp-text-brand {
    color: var(--otec-navy) !important;
}

.otec-fp-hero-h1 {
    color: var(--otec-navy);
}

/* ========================= OTEC Hero Visual Card ========================= */
.otec-hero-visual {
    position: relative;
    padding: 1rem 0.5rem 3rem;
}

.otec-hv-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(26,43,75,0.13);
    padding: 2rem;
}

.otec-hv-card--main {
    position: relative;
    z-index: 2;
}

.otec-hv-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.otec-hv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #eef7f8;
    color: var(--otec-teal);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.otec-hv-badge--green {
    background: #ecfdf5;
    color: #059669;
}

.otec-hv-card__title {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 700;
    color: var(--otec-navy);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.otec-hv-card__desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.otec-hv-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
}

.otec-hv-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 80px;
    min-width: 70px;
}

.otec-hv-stat__num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--otec-navy);
    line-height: 1.1;
}

.otec-hv-stat__lbl {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.otec-hv-stat-divider {
    width: 1px;
    height: 36px;
    background: #e2e8f0;
    flex: 0 0 1px;
    margin: 0 0.25rem;
}

/* Floating cards */
.otec-hv-card--float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(26,43,75,0.14);
    z-index: 3;
    min-width: 170px;
    background: #fff;
}

.otec-hv-card--float strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.otec-hv-card--float span {
    font-size: 0.78rem;
    color: #64748b;
}

.otec-hv-card--float-left {
    bottom: 1.5rem;
    left: -1.5rem;
}

.otec-hv-card--float-right {
    bottom: 1.5rem;
    right: -1.5rem;
}

.otec-hv-float-icon {
    font-size: 1.6rem;
    color: var(--otec-teal);
    flex-shrink: 0;
}

.otec-hv-float-icon--teal {
    color: #059669;
}

@media (max-width: 575px) {
    .otec-hv-card--float-left,
    .otec-hv-card--float-right {
        position: static;
        margin-top: 0.75rem;
    }
    .otec-hero-visual {
        padding-bottom: 1rem;
    }
}
/* ========================= END Hero Visual ========================= */

.otec-fp-explore-title {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1.2;
    color: var(--otec-navy);
    letter-spacing: -0.02em;
}

.otec-fp-link-all {
    color: var(--otec-teal) !important;
    font-weight: 600;
}

.otec-fp-link-all:hover {
    color: var(--otec-teal-dark) !important;
}

.otec-fp-filter-pill {
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}

.otec-fp-pill-teal {
    background: var(--otec-teal) !important;
    color: #fff !important;
    border: 0 !important;
    text-decoration: none !important;
}

.otec-fp-pill-teal:hover {
    background: var(--otec-teal-dark) !important;
    color: #fff !important;
}

.otec-fp-hero-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.2;
    color: #111;
    letter-spacing: -0.02em;
}

/* ── Hero H1: tamaño controlado para que el título no rompa palabras ── */
h1.otec-fp-hero-h1,
h1.otec-fp-hero-h1.display2 {
    font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3.25rem) !important;
    line-height: 1.18 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    letter-spacing: -0.02em;
}

.otec-fp-hero-desc {
    font-size: 1rem;
    line-height: 1.65;
}

/* Barra de búsqueda (botón + campo + enviar) */
.otec-fp-search {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
    border: 1px solid #e2e5eb;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.otec-fp-search-all {
    flex: 0 0 auto;
    padding: 0.75rem 1.35rem;
    border-radius: 0 !important;
    background: var(--otec-teal, #399ba6) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.otec-fp-search-all:hover {
    background: var(--otec-teal-dark, #2b7a83) !important;
    color: #fff !important;
}

.otec-fp-search-field {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
}

.otec-fp-search-input {
    width: 100%;
    height: 100%;
    min-height: 48px;
    border: 0 !important;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.otec-fp-search-submit {
    flex: 0 0 auto;
    width: 52px;
    border-radius: 0 !important;
    background: #f4f6f9 !important;
    border: none !important;
    border-left: 1px solid #e2e5eb !important;
    color: #334155 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.otec-fp-search-submit:hover {
    background: #e8ecf1 !important;
}

@media (max-width: 575px) {
    .otec-fp-search {
        border-radius: 16px;
        flex-direction: column;
    }
    .otec-fp-search-all {
        width: 100%;
        justify-content: center;
        border-radius: 16px 16px 0 0 !important;
    }
    .otec-fp-search-submit {
        width: 100%;
        border-left: 0 !important;
        border-top: 1px solid #e2e5eb !important;
    }
}

/* Hero: no recortar el H1 (antes overflow-hidden cortaba “Diplomados”) */
.otec-fp-banner--hero {
    overflow: visible;
}

.otec-fp-banner--hero .shape {
    pointer-events: none;
}

/* Portada: ocultar lista vertical de categorías (cajas blancas); mantener bloques de cursos */
.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo > .collapsible-actions,
.otec-fp-catalog .course_category_tree.frontpage-category-combo > .collapsible-actions {
    display: none !important;
}

.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo::before,
.otec-fp-catalog .course_category_tree.frontpage-category-combo::before {
    content: none !important;
    display: none !important;
}

/* Alpha usa .wrapper-fw.info para el nombre de categoría */
.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo .category > .info,
.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo .category > .wrapper-fw.info,
.otec-fp-catalog .course_category_tree.frontpage-category-combo .category > .info,
.otec-fp-catalog .course_category_tree.frontpage-category-combo .category > .wrapper-fw.info,
#fpmaincontent .course_category_tree.frontpage-category-combo .category > .info,
#fpmaincontent .course_category_tree.frontpage-category-combo .category > .wrapper-fw.info {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo .category.collapsed > .content,
.otec-fp-catalog .course_category_tree.frontpage-category-combo .category.collapsed > .content {
    display: block !important;
}

.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo .subcategories > .category,
.otec-fp-catalog .course_category_tree.frontpage-category-combo .subcategories > .category {
    margin-bottom: 1.5rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo .subcategories > .category:last-child,
.otec-fp-catalog .course_category_tree.frontpage-category-combo .subcategories > .category:last-child {
    margin-bottom: 0 !important;
}

/* Evitar que flex en .subcategories deje huecos visibles */
.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo .subcategories,
.otec-fp-catalog .course_category_tree.frontpage-category-combo .subcategories {
    display: block !important;
    gap: 0 !important;
}

.otec-fp-catalog .rui-number-of-courses,
.otec-fp-catalog .rui-number-of-courses .badge-sq {
    display: none !important;
}

.otec-fp-catalog .rui-category-link {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #111 !important;
}

/* ---------- Tarjetas de curso: estilo demo (imagen + tarjeta clara + CTA teal) ---------- */
.otec-fp-catalog .rui-course-card-deck,
.otec-fp-catalog .rui-course--list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem !important;
    margin-top: 0 !important;
}

@media (max-width: 991px) {
    .otec-fp-catalog .rui-course-card-deck,
    .otec-fp-catalog .rui-course--list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .otec-fp-catalog .rui-course-card-deck,
    .otec-fp-catalog .rui-course--list {
        grid-template-columns: 1fr;
    }
}

.otec-fp-catalog .rui-course-card-deck > .position-relative,
.otec-fp-catalog .rui-course--list > .position-relative {
    min-width: 0;
}

/* Resumen flotante del tema Alpha: oculto para vista tipo catálogo limpio */
.otec-fp-catalog .position-relative > .rui-course-card-text {
    display: none !important;
}

.otec-fp-catalog .rui-course-card {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #e8ecf1 !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.07) !important;
    height: auto !important;
    overflow: hidden;
}

.otec-fp-catalog .rui-course-card a {
    color: inherit !important;
    text-decoration: none !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.otec-fp-catalog .rui-course-card-img-top {
    display: block !important;
    height: 200px !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
}

.otec-fp-catalog .rui-course-card-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.otec-fp-catalog .rui-course-card-body {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    flex: 1 1 auto;
    padding: 0.85rem 1.1rem 0.85rem !important;
    background: #fff !important;
}

.otec-fp-catalog .rui-course-card-title,
.otec-fp-catalog .rui-course-card-title .coursename {
    color: #1a2b4b !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.otec-fp-catalog .rui-course-cat-badge,
.otec-fp-catalog .rui-course-cat-badge * {
    color: #64748b !important;
    font-size: 0.8rem !important;
}

.otec-fp-catalog .rui-course-card-footer {
    margin-top: auto !important;
    padding: 1rem 1.1rem 1.15rem !important;
    border-top: 1px solid #f1f5f9;
    background: #fff !important;
}

.otec-fp-catalog .rui-course-card-link {
    width: 100%;
    justify-content: center;
    border-radius: 10px !important;
    background: var(--otec-teal, #399ba6) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0.55rem 1rem !important;
}

.otec-fp-catalog .rui-course-card-link:hover {
    background: var(--otec-teal-dark, #2b7a83) !important;
    color: #fff !important;
}

.otec-fp-catalog .rui-course-card-link svg {
    stroke: #fff !important;
}

.otec-fp-catalog .rui-course-card-progress-bar {
    padding: 0 1.1rem 1.15rem !important;
}

/* Tarjetas: contraste en modo oscuro del tema + imagen uniforme */
body.path-site.otec-fp-catalog.theme-dark .rui-course-card,
body.path-site.otec-fp-catalog.theme-dark .rui-course-card .rui-course-card-body,
body.path-site.otec-fp-catalog.theme-dark .rui-course-card .rui-course-card-footer {
    background: #fff !important;
    color: #1a2b4b !important;
}

body.path-site.otec-fp-catalog.theme-dark .rui-course-card .rui-course-card-title,
body.path-site.otec-fp-catalog.theme-dark .rui-course-card .coursename,
body.path-site.otec-fp-catalog.theme-dark .rui-course-card .rui-course-card-title * {
    color: #1a2b4b !important;
}

body.path-site.otec-fp-catalog.theme-dark .rui-course-card .rui-course-cat-badge,
body.path-site.otec-fp-catalog.theme-dark .rui-course-card .rui-course-cat-badge * {
    color: #64748b !important;
}

.otec-fp-catalog .rui-course-card figure.rui-course-card-img-top {
    flex-shrink: 0;
    min-height: 180px;
    background-color: #e8f2f4 !important;
    background-size: cover !important;
    background-position: center !important;
}

.otec-fp-catalog .rui-course-card .rui-course-card-footer {
    border-radius: 0 0 14px 14px;
}

.otec-fp-catalog .rui-course-card-footer .btn.rui-course-card-link {
    width: 100%;
    max-width: 100%;
}

/* Tarjetas OTEC: mockup (corazón, clases/nivel, valoración) */
.rui-course-card .otec-card-media-wrap {
    position: relative;
}

.rui-course-card .otec-card-fav {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
    color: var(--otec-teal, #3e97a3);
    pointer-events: none;
}

.rui-course-card .otec-card-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-top: 0.65rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.rui-course-card .otec-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.rui-course-card .otec-card-meta-icon {
    flex-shrink: 0;
    color: #64748b;
}

.rui-course-card .otec-card-rating-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    font-size: 0.8125rem;
    color: #475569;
}

.rui-course-card .otec-card-star {
    color: #fbbf24;
    font-size: 1rem;
    line-height: 1;
}

/* Portada catálogo: como referencia (sin categoría ni CTA inferior) */
.path-site.otec-fp-catalog .otec-card-category-wrap {
    display: none !important;
}

.path-site.otec-fp-catalog .rui-course-card-footer {
    display: none !important;
}

.path-site.otec-fp-catalog .rui-course-card-wrapper {
    padding: 0 !important;
}

/* Vista lista */
.otec-fp-catalog .rui-course-card.rui-course-list {
    margin-bottom: 0 !important;
    background: #fff !important;
    border-radius: 16px !important;
    padding: 1.1rem !important;
    border: 1px solid #e8ecf1 !important;
}

.otec-fp-catalog .rui-course-list-title a,
.otec-fp-catalog .rui-course-list-title {
    color: #1a2b4b !important;
}

.otec-fp-catalog .rui-course-list .rui-course-cat-badge,
.otec-fp-catalog .rui-course-list .rui-course-cat-badge * {
    color: #64748b !important;
}

/* Contenedor principal Moodle */
.otec-fp-main-content {
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}

.otec-explore-page-content .region-main-wrapper--fp {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Ocultar breadcrumb en portada */
.path-site #page-content .page-content-wrapper > nav.breadcrumb-nav {
    display: none;
}

/* Subcategorías: espacio (excluye combo portada: allí va display:block arriba) */
.otec-fp-catalog .course_category_tree:not(.frontpage-category-combo) .subcategories {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.otec-fp-catalog .course_category_tree:not(.frontpage-category-combo) .subcategories .category.loaded {
    border: none !important;
    background: transparent !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}

/* Testimonios mockup */
.otec-fp-testimonials .testimonials__thumbs img {
    max-height: 420px;
    object-fit: cover;
    width: 100%;
}

/* Contadores: tono azul suave mockup */
.path-site.otec-fp-catalog .counter .bg-main-25 {
    background: #e8f4fc !important;
    border-color: #cfe8f8 !important;
}

.path-site.otec-fp-catalog .counter .bg-main-two-25 {
    background: #e4f0ff !important;
    border-color: #c7daf8 !important;
}

/* Pie OTEC oscuro (referencia imagen 2: #2d2d2d, barra #3197a3, rejilla proporcional) */
.otec-footer.otec-footer--dark,
.otec-footer {
    background: #2d2d2d !important;
    color: #f4f4f5 !important;
    padding-bottom: 0 !important;
}

.otec-footer a:not(.otec-footer-link--accent) {
    color: #f4f4f5 !important;
}

.otec-footer-title {
    color: var(--otec-footer-teal) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem !important;
}

/* Columnas: marca algo más estrecha; “about” más ancha (≈ 0.9 : 1 : 1.15 : 1.35) */
.otec-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.35fr);
    gap: 2rem 1.75rem;
    align-items: start;
}

.otec-footer__col--brand {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    overflow: visible;
}

@media (min-width: 992px) {
    .otec-footer__col--brand {
        justify-content: flex-start;
    }
}

.otec-footer__col--brand > a {
    display: block;
    width: 100%;
    max-width: min(280px, 100%);
    overflow: visible;
}

.otec-footer-brand-icon {
    color: #f4f4f5;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 140px;
}

.otec-footer-brand-svg {
    width: 100%;
    height: auto;
    max-width: 120px;
    display: block;
}

.otec-footer-link--accent {
    color: var(--otec-footer-teal) !important;
    font-weight: 600;
}

.otec-footer-link--accent:hover {
    color: #4dc4c4 !important;
}

.otec-footer-lead,
.otec-footer-hours {
    line-height: 1.65;
    font-size: 0.95rem;
}

.otec-footer-bottom {
    background: var(--otec-footer-teal) !important;
    color: #fff !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.otec-footer-bottom-inner {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.otec-footer-help {
    justify-self: start;
    white-space: nowrap;
}

.otec-footer-bottom a,
.otec-footer-help a {
    color: #fff !important;
    font-weight: 500;
}

.otec-footer-copy-center {
    color: #fff !important;
    justify-self: center;
    text-align: center;
    max-width: min(100%, 42rem);
    margin: 0 auto;
    line-height: 1.45;
}

.otec-footer-bottom-actions {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.otec-wa-btn {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background-color: #25d366 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.otec-wa-btn:hover {
    color: #fff !important;
    filter: brightness(1.05);
}

.otec-footer-btt {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.otec-footer-btt:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* FAB WhatsApp (referencia: botón flotante verde) */
.otec-wa-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 5.5rem;
    z-index: 1040;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    line-height: 1;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.otec-wa-fab:hover {
    color: #fff !important;
    transform: scale(1.04);
}

/* FAB dentro de <footer>: evitar que el color de enlaces del pie lo blanquee */
.otec-footer a.otec-wa-fab {
    color: #fff !important;
    background: #25d366 !important;
}

/* Evitar doble botón “subir” flotante (ya va en la barra teal del pie OTEC) */
#back-to-top {
    display: none !important;
}

@media (max-width: 991px) {
    .otec-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .otec-footer__col--about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .otec-footer__grid {
        grid-template-columns: 1fr;
    }

    .otec-footer__col--about {
        grid-column: auto;
    }

    .otec-footer-bottom-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .otec-footer-help {
        justify-self: center;
        white-space: normal;
        order: 1;
    }

    .otec-footer-copy-center {
        order: 3;
    }

    .otec-footer-bottom-actions {
        justify-self: center;
        order: 2;
    }

    .otec-wa-fab {
        bottom: 4.5rem;
        right: 1rem;
    }
}

/* Botones hero: teal institucional */
.otec-fp-banner .btn-main {
    background: var(--otec-teal, #399ba6) !important;
    border-color: var(--otec-teal, #399ba6) !important;
    color: #fff !important;
}

.otec-fp-banner .btn-main:hover {
    background: var(--otec-teal-dark, #2b7a83) !important;
    border-color: var(--otec-teal-dark, #2b7a83) !important;
}

.otec-fp-banner .btn-outline-main {
    border-color: #cbd5e1 !important;
    color: var(--otec-navy, #1a2b4b) !important;
    background: #fff !important;
}

.otec-fp-banner .btn-outline-main:hover {
    border-color: var(--otec-teal, #399ba6) !important;
    color: var(--otec-teal, #399ba6) !important;
}

.otec-footer .otec-social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0.25rem;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.otec-footer .otec-social-icon i,
.otec-footer .otec-social-icon [class*="ph-"] {
    color: #fff !important;
    font-size: 1.28rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.otec-footer .otec-social-icon:hover {
    background: var(--otec-teal) !important;
    border-color: var(--otec-teal) !important;
}

/* Franja legal Moodle */
.otec-moodle-footer-legal {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Legado: hero antiguo si queda en caché */
.banner.py-80 {
    width: 100%;
    margin: 0;
}

.banner .btn-main,
.banner .btn-outline-main {
    text-decoration: none !important;
}

#topofscroll .wrapper-page {
    padding-top: 0;
}

#otec-courses {
    border-bottom: none;
}

.banner i[class^="ph"] {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 767px) {
    .banner-thumb__img {
        height: 300px !important;
    }
    .banner.py-80 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

.navbar,
#topBar {
    position: relative;
    z-index: 1000;
}

/* ======================================================
   FIXES ADICIONALES – Portada OTEC
   ====================================================== */

/* 1. Botón Acceder en topbar → teal + píldora (no afecta otros .btn del menú usuario) */
#topBar .otec-header-login-btn,
#topBar .otec-header-login-wrap .btn,
#topBar .login .btn[href*="login"] {
    background: var(--otec-header-accent, #3a96a1) !important;
    border-color: var(--otec-header-accent, #3a96a1) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 0.45rem 1.25rem !important;
}
#topBar .otec-header-login-btn:hover,
#topBar .otec-header-login-wrap .btn:hover {
    background: #318896 !important;
    border-color: #318896 !important;
    color: #fff !important;
}

/* 2. Ocultar bloque completo de nombres de categoría (filas blancas accordion) */
.path-site.otec-fp-catalog .frontpage-category-names,
.path-site.otec-fp-catalog .course_category_tree.frontpage-category-names {
    display: none !important;
}

/* Ocultar cabeceras de categoría internas en accordion/combo */
.path-site.otec-fp-catalog .frontpage-category-combo .category > .info,
.path-site.otec-fp-catalog .frontpage-category-combo .category > .wrapper-fw.info,
.path-site.otec-fp-catalog .course_category_tree.frontpage-category-combo > .collapsible-actions,
.path-site.otec-fp-catalog .course_category_tree .collapsible-actions,
.path-site.otec-fp-catalog .course_category_tree .category-listing > .info {
    display: none !important;
}

/* Ocultar también los .wrapper-fw.info del árbol principal de categorías */
.path-site.otec-fp-catalog .course_category_tree:not(.frontpage-category-combo) .category > .wrapper-fw.info {
    display: none !important;
}

/* Estilizar el h5/a del nombre de categoría como separador de sección */
.path-site.otec-fp-catalog .course_category_tree .rui-categoryname {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--otec-navy, #1a2b4b) !important;
    margin: 2rem 0 1rem !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Expandir subcategorías colapsadas */
.path-site.otec-fp-catalog .course_category_tree .category.collapsed > .content {
    display: block !important;
}

/* 3. Expandir categorías colapsadas */
.path-site.otec-fp-catalog .frontpage-category-combo .category.collapsed > .content,
.path-site.otec-fp-catalog .frontpage-category-combo .category > .content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* 4. Título de sección de categoría → visible pero estilizado */
.path-site.otec-fp-catalog .courses-frontpage-category,
.path-site.otec-fp-catalog .course_category_tree .category {
    margin-bottom: 2.5rem !important;
}

.path-site.otec-fp-catalog .course_category_tree .category > .categoryname,
.path-site.otec-fp-catalog .courses-frontpage-category h3,
.path-site.otec-fp-catalog .course_category_tree h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--otec-navy, #1a2b4b) !important;
    padding: 0.5rem 0 !important;
    border: none !important;
    background: none !important;
    margin-bottom: 1rem !important;
}

/* Ocultar la fila "Nombre de categoría" como caja blanca */
.path-site.otec-fp-catalog .courses-frontpage-category > .rui-course-category-info,
.path-site.otec-fp-catalog .courses-frontpage-category > .info-box,
.path-site.otec-fp-catalog .courses-frontpage-category > .box.py-3.generalbox {
    display: none !important;
}

/* 5. Tarjetas de curso: grid 3 columnas, altura natural por tarjeta */
.path-site.otec-fp-catalog .courses-frontpage-category .rui-course-card-deck,
.path-site.otec-fp-catalog .courses-frontpage-category .rui-course--list,
.path-site.otec-fp-catalog .rui-course-card-deck,
.path-site.otec-fp-catalog .rui-course--list,
.path-site.otec-fp-catalog .course_category_tree .rui-course-card-deck,
.path-site.otec-fp-catalog .course_category_tree .rui-course--list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
}

.path-site.otec-fp-catalog .rui-course-card-deck > .position-relative,
.path-site.otec-fp-catalog .rui-course--list > .position-relative,
.path-site.otec-fp-catalog .courses-frontpage-category .rui-course-card-deck > .position-relative,
.path-site.otec-fp-catalog .courses-frontpage-category .rui-course--list > .position-relative,
.path-site.otec-fp-catalog .course_category_tree .rui-course-card-deck > .position-relative,
.path-site.otec-fp-catalog .course_category_tree .rui-course--list > .position-relative {
    min-width: 0;
}

@media (max-width: 991px) {
    .path-site.otec-fp-catalog .rui-course-card-deck,
    .path-site.otec-fp-catalog .rui-course--list,
    .path-site.otec-fp-catalog .courses-frontpage-category .rui-course-card-deck,
    .path-site.otec-fp-catalog .courses-frontpage-category .rui-course--list,
    .path-site.otec-fp-catalog .course_category_tree .rui-course-card-deck,
    .path-site.otec-fp-catalog .course_category_tree .rui-course--list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .path-site.otec-fp-catalog .rui-course-card-deck,
    .path-site.otec-fp-catalog .rui-course--list,
    .path-site.otec-fp-catalog .courses-frontpage-category .rui-course-card-deck,
    .path-site.otec-fp-catalog .courses-frontpage-category .rui-course--list,
    .path-site.otec-fp-catalog .course_category_tree .rui-course-card-deck,
    .path-site.otec-fp-catalog .course_category_tree .rui-course--list {
        grid-template-columns: 1fr !important;
    }
}

/* Índice de cursos / categorías: misma rejilla 3-2-1 que la portada (Alpha usa auto-fill aquí) */
.path-course .courses .rui-course-card-deck,
.path-course .courses .rui-course--list,
.path-course .rui-category-browse .rui-course-card-deck,
.path-course .rui-category-browse .rui-course--list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
}

.path-course .courses .rui-course-card-deck > .position-relative,
.path-course .courses .rui-course--list > .position-relative,
.path-course .rui-category-browse .rui-course-card-deck > .position-relative,
.path-course .rui-category-browse .rui-course--list > .position-relative {
    min-width: 0;
}

@media (max-width: 991px) {
    .path-course .courses .rui-course-card-deck,
    .path-course .courses .rui-course--list,
    .path-course .rui-category-browse .rui-course-card-deck,
    .path-course .rui-category-browse .rui-course--list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .path-course .courses .rui-course-card-deck,
    .path-course .courses .rui-course--list,
    .path-course .rui-category-browse .rui-course-card-deck,
    .path-course .rui-category-browse .rui-course--list {
        grid-template-columns: 1fr !important;
    }
}

/* 6. Fondo blanco correcto y sin overflow en tarjetas del tema Alpha */
.path-site.otec-fp-catalog .rui-course-card {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #e8ecf1 !important;
    box-shadow: 0 4px 24px rgba(15,23,42,0.07) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    height: auto !important;
}

/* Card body: flujo normal debajo de la imagen (el tema Alpha lo hace absoluto con offsets) */
.path-site.otec-fp-catalog .rui-course-card .rui-course-card-body {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    padding: 0.85rem 1.1rem 0.85rem !important;
    flex: 1 1 auto;
    background: #fff !important;
}

/* Wrapper sin padding extra para imagen full-bleed */
.path-site.otec-fp-catalog .rui-course-card .rui-course-card-wrapper {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
}

/* Link ocupa la altura del contenido, no de la tarjeta */
.path-site.otec-fp-catalog .rui-course-card > a {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.path-site.otec-fp-catalog .rui-course-card:hover {
    box-shadow: 0 12px 40px rgba(15,23,42,0.13) !important;
    transform: translateY(-3px) !important;
}

/* 7. Contenido de tarjeta: padding limpio */
.path-site.otec-fp-catalog .rui-course-card .rui-course-card-content,
.path-site.otec-fp-catalog .rui-course-card .card-body {
    padding: 1rem 1.25rem !important;
}

/* 8. Título del curso en tarjeta */
.path-site.otec-fp-catalog .rui-course-card .rui-course-card-title,
.path-site.otec-fp-catalog .rui-course-card h3 a,
.path-site.otec-fp-catalog .rui-course-card .coursename a {
    font-size: 0.97rem !important;
    font-weight: 700 !important;
    color: var(--otec-navy, #1a2b4b) !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
}

.path-site.otec-fp-catalog .rui-course-card .rui-course-card-title a:hover,
.path-site.otec-fp-catalog .rui-course-card h3 a:hover {
    color: var(--otec-teal, #399ba6) !important;
}

/* 9. Separador y espaciado del catálogo */
.path-site.otec-fp-catalog .otec-fp-catalog-section {
    background: #f8fafc !important;
}

/* 9b. Eliminar espacio extra de accesibilidad Moodle antes de los cursos */
.path-site.otec-fp-catalog .main-content span.skip-block-to,
.path-site.otec-fp-catalog .main-content a.skip-block,
.path-site.otec-fp-catalog .main-content br {
    display: none !important;
    margin: 0 !important;
}

.path-site.otec-fp-catalog .otec-fp-main-inner {
    padding: 0 1rem 3rem !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}

/* 10. Quitar padding lateral extra del page-content en frontpage */
.path-site.otec-fp-catalog #page-content.otec-fp-page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* ---- Testimonial Visual (reemplaza placeholder 526x575) ---- */
.otec-testimonial-visual {
    background: linear-gradient(135deg, var(--otec-navy, #1a2b4b) 0%, #243a63 100%);
    border-radius: 20px !important;
    padding: 3rem 2.5rem;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 24px 64px rgba(26,43,75,0.25);
}

.otec-tv-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
}

.otec-tv-icon-wrap {
    width: 72px;
    height: 72px;
    background: rgba(57,155,166,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otec-tv-icon {
    font-size: 2rem;
    color: var(--otec-teal, #399ba6);
}

.otec-tv-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.otec-tv-subtitle {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.otec-tv-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    width: 100%;
    justify-content: center;
}

.otec-tv-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.otec-tv-num {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.otec-tv-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
}

.otec-tv-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.otec-tv-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.otec-tv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
}

.otec-tv-badge--teal {
    background: rgba(57,155,166,0.25);
    color: var(--otec-teal, #399ba6);
}

/* ========================= Login: sign-in (prioridad sobre Alpha / default.css) ========================= */
body.path-login.otec-login-signin #page-login-index,
body.path-login.otec-login-signin #page-login-forgot_password {
    background-color: #eef2f6 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 100vh !important;
    width: 100% !important;
}

body.path-login.otec-login-signin.theme-dark #page-login-index,
body.path-login.otec-login-signin.theme-dark #page-login-forgot_password {
    background-color: #1e293b !important;
}

body.path-login.otec-login-signin #page-login .login-wrapper {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    min-height: 100vh !important;
    width: 100% !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
}

body.path-login.otec-login-signin #page-login .login-container {
    width: 100% !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.path-login.otec-login-signin .rui-login-form-root .rui-login-wrapper {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.path-login.otec-login-signin .rui-login-form-root.rui-login-layout-img .rui-login-wrapper.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.path-login.otec-login-signin .rui-login-container {
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.1) !important;
}

body.path-login.otec-login-signin.theme-dark .rui-login-container {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4) !important;
}

body.path-login.otec-login-signin .rui-login-layout-img .rui-login-box {
    width: 50% !important;
    flex: 1 1 50% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2.25rem 1.75rem !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

body.path-login.otec-login-signin .rui-login-box .rui-login-content {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    margin: 0 auto !important;
}

body.path-login.otec-login-signin .rui-login-layout-simple .rui-login-box {
    background: transparent !important;
    width: 100% !important;
    flex: none !important;
    padding: 2rem 1rem !important;
}

body.path-login.otec-login-signin .rui-login-layout-simple .rui-login-content {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.path-login.otec-login-signin .rui-login-layout-img .rui-login-bg-container {
    width: 50% !important;
    flex: 1 1 50% !important;
    min-width: 0 !important;
    min-height: 520px !important;
    border: none !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
}

body.path-login.otec-login-signin .rui-login-bg-container.otec-login-bg-placeholder {
    background-color: #dfeaf0 !important;
    background-image:
        radial-gradient(ellipse 85% 65% at 72% 38%, rgba(57, 155, 166, 0.38) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 18% 78%, rgba(26, 43, 75, 0.1) 0%, transparent 52%),
        linear-gradient(148deg, #e8f3f5 0%, #dbecef 42%, #cfdfea 100%) !important;
}

body.path-login.otec-login-signin.theme-dark .rui-login-layout-img .rui-login-box {
    background: #1e293b !important;
}

body.path-login.otec-login-signin.theme-dark .rui-login-bg-container.otec-login-bg-placeholder {
    background-image:
        radial-gradient(ellipse 85% 65% at 72% 38%, rgba(57, 155, 166, 0.22) 0%, transparent 58%),
        linear-gradient(148deg, #1e293b 0%, #0f172a 100%) !important;
}

body.path-login.otec-login-signin .otec-login-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem 1.85rem;
    box-shadow: 0 1px 12px rgba(15, 23, 42, 0.05);
    text-align: left;
}

body.path-login.otec-login-signin.theme-dark .otec-login-card {
    background: #1e293b;
    border-color: #475569;
    box-shadow: none;
}

body.path-login.otec-login-signin .otec-login-intro .rui-loginpage-intro-logo {
    justify-content: flex-start !important;
    text-align: left !important;
    margin-bottom: 0.75rem !important;
}

body.path-login.otec-login-signin .otec-login-logo-img {
    max-height: 56px !important;
    width: auto !important;
    max-width: 260px !important;
    height: auto !important;
    object-fit: contain !important;
}

body.path-login.otec-login-signin .otec-login-sitename {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--otec-navy, #1a2b4b);
}

body.path-login.otec-login-signin.theme-dark .otec-login-sitename {
    color: #f1f5f9;
}

body.path-login.otec-login-signin .otec-login-intro-html {
    text-align: left !important;
    font-size: 0.9rem;
    color: #64748b;
}

body.path-login.otec-login-signin .otec-login-welcome__title {
    font-weight: 700;
    color: #2d3436;
    letter-spacing: -0.02em;
}

body.path-login.otec-login-signin.theme-dark .otec-login-welcome__title {
    color: #f8fafc;
}

body.path-login.otec-login-signin .otec-login-welcome__subtitle {
    font-size: 0.95rem;
    color: #636e72;
}

body.path-login.otec-login-signin.theme-dark .otec-login-welcome__subtitle {
    color: #94a3b8;
}

body.path-login.otec-login-signin .otec-login-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3436;
}

body.path-login.otec-login-signin.theme-dark .otec-login-label {
    color: #e2e8f0;
}

body.path-login.otec-login-signin .form-control--username-box:before,
body.path-login.otec-login-signin .form-control--username-box::before,
body.path-login.otec-login-signin .form-control--password-box:before,
body.path-login.otec-login-signin .form-control--password-box::before {
    display: none !important;
    content: none !important;
}

body.path-login.otec-login-signin .otec-login-input.form-control--username,
body.path-login.otec-login-signin .otec-login-input.form-control--password {
    padding-left: 1.15rem !important;
    background-image: none !important;
}

body.path-login.otec-login-signin .otec-login-input.form-control {
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    padding: 0.65rem 1.15rem;
    font-size: 0.95rem;
    min-height: 48px;
}

body.path-login.otec-login-signin.theme-dark .otec-login-input.form-control {
    background-color: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}

body.path-login.otec-login-signin .form-control--password-box .otec-login-input {
    padding-right: 3rem !important;
}

body.path-login.otec-login-signin .rui-show-password-btn {
    right: 0.5rem !important;
}

body.path-login.otec-login-signin .otec-login-forgot {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e67e22 !important;
}

body.path-login.otec-login-signin .otec-login-forgot:hover {
    color: #d35400 !important;
    text-decoration: underline;
}

body.path-login.otec-login-signin .otec-login-signup-line {
    font-size: 0.95rem;
    color: #636e72;
}

body.path-login.otec-login-signin.theme-dark .otec-login-signup-line {
    color: #94a3b8;
}

body.path-login.otec-login-signin .otec-login-signup-line__link {
    font-weight: 700;
    color: var(--otec-navy, #1a2b4b) !important;
    margin-left: 0.25rem;
}

body.path-login.otec-login-signin .otec-login-signup-line__link:hover {
    color: var(--otec-teal, #399ba6) !important;
    text-decoration: underline;
}

body.path-login.otec-login-signin.theme-dark .otec-login-signup-line__link {
    color: #7dd3fc !important;
}

body.path-login.otec-login-signin #loginbtn.otec-login-submit.btn,
body.path-login.otec-login-signin .otec-login-submit.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background: var(--otec-teal, #399ba6) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0.8rem 1.25rem;
    min-height: 50px;
    box-shadow: 0 4px 14px rgba(57, 155, 166, 0.35);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

body.path-login.otec-login-signin #loginbtn.otec-login-submit.btn:hover,
body.path-login.otec-login-signin #loginbtn.otec-login-submit.btn:focus,
body.path-login.otec-login-signin .otec-login-submit.btn:hover,
body.path-login.otec-login-signin .otec-login-submit.btn:focus {
    background: var(--otec-teal-dark, #2b7a83) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(57, 155, 166, 0.45);
}

body.path-login.otec-login-signin .otec-login-submit__icon {
    flex-shrink: 0;
}

body.path-login.otec-login-signin .otec-login-guest-btn {
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #2d3436;
    font-weight: 600;
    padding: 0.55rem 1rem;
    min-height: 44px;
}

body.path-login.otec-login-signin.theme-dark .otec-login-guest-btn {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}

@media (max-width: 767px) {
    body.path-login.otec-login-signin .rui-login-layout-img .rui-login-box,
    body.path-login.otec-login-signin .rui-login-layout-img .rui-login-bg-container {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 0 !important;
    }

    body.path-login.otec-login-signin .rui-login-layout-img .rui-login-bg-container {
        min-height: 200px !important;
        order: -1;
    }

    body.path-login.otec-login-signin .rui-login-layout--3.rui-login-layout-img .rui-login-bg-container {
        order: -1;
    }
}

/* ========================= Drawer lateral (alumno y admin con menú Alpha) ========================= */
#nav-drawer .rui-sidebar-nav-item-link.active {
    background: linear-gradient(135deg, var(--otec-teal, #399ba6), var(--otec-teal-dark, #2b7a83)) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(57, 155, 166, 0.35);
}

#nav-drawer .rui-sidebar-nav-item-link.active .rui-sidebar-nav-icon {
    color: #fff !important;
    opacity: 1 !important;
}

#nav-drawer .rui-sidebar-nav-item-link:hover:not(.active) {
    background-color: rgba(57, 155, 166, 0.12) !important;
}

#nav-drawer .rui-flatnavigation .list-group-item.active,
#nav-drawer .rui-flatnavigation a.list-group-item-action.active,
#nav-drawer .rui-flatnavigation .list-group-item-action.active {
    background: linear-gradient(135deg, var(--otec-teal, #399ba6), var(--otec-teal-dark, #2b7a83)) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 10px !important;
}

#nav-drawer .rui-sidebar-mycourses {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-dark #nav-drawer .rui-sidebar-nav-item-link:hover:not(.active) {
    background-color: rgba(57, 155, 166, 0.18) !important;
}

/* Calendario: botón principal y acentos alineados con OTEC */
.path-calendar [data-action="new-event-button"],
.path-calendar .btn-primary[data-action="new-event-button"],
.path-calendar a.btn-primary[href*="event"] {
    background: var(--otec-teal, #399ba6) !important;
    border-color: var(--otec-teal-dark, #2b7a83) !important;
    color: #fff !important;
}

.path-calendar [data-action="new-event-button"]:hover,
.path-calendar .btn-primary[data-action="new-event-button"]:hover {
    background: var(--otec-teal-dark, #2b7a83) !important;
    border-color: var(--otec-teal-dark, #2b7a83) !important;
    color: #fff !important;
}

.path-calendar .calendar-controls .btn-link:hover,
.path-calendar .calendarwrapper .btn-link:hover {
    color: var(--otec-teal, #399ba6) !important;
}

/* Admin: drawer izquierdo usa el mismo #nav-drawer cuando está logueado; bloques de contenido con .btn-primary tipo formularios */
.path-admin #region-main .btn-primary,
.path-admin .main-inner .btn-primary {
    background: var(--otec-teal, #399ba6) !important;
    border-color: var(--otec-teal-dark, #2b7a83) !important;
}

.path-admin #region-main .btn-primary:hover,
.path-admin .main-inner .btn-primary:hover {
    background: var(--otec-teal-dark, #2b7a83) !important;
    border-color: var(--otec-teal-dark, #2b7a83) !important;
}

/* ============================================================
   FIXES COMPREHENSIVOS — Portada, Admin Menu, Permisos, Layout
   ============================================================ */

/* ----------------------------------------------------------
   1. OCULTAR NAV-DRAWER IZQUIERDO EN PORTADA
   El cuerpo recibe margin-left: 290px cuando drawer-open-left
   está activo. Lo reseteamos completamente en la portada OTEC.
   ---------------------------------------------------------- */
body.path-site.otec-fp-catalog,
body.path-site.otec-fp-catalog.drawer-open-left {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Ocultar el drawer lateral izquierdo en la portada */
body.path-site.otec-fp-catalog #nav-drawer,
.path-site.otec-fp-catalog #nav-drawer {
    display: none !important;
}

/* Ocultar botón toggle del drawer izquierdo en portada */
.path-site.otec-fp-catalog .drawer-toggler.drawer-left-toggle,
.path-site.otec-fp-catalog #drawerTogglerLeft,
.path-site.otec-fp-catalog [data-toggler="drawers"][data-target="theme_alpha-drawers-navdrawer"],
.path-site.otec-fp-catalog [data-action="toggle-drawer"][data-side="left"],
.path-site.otec-fp-catalog .btn.drawer-toggler[data-target*="navdrawer"] {
    display: none !important;
}

/* El contenido principal ocupa el 100% del ancho en portada */
.path-site.otec-fp-catalog #page-wrapper,
.path-site.otec-fp-catalog #page,
.path-site.otec-fp-catalog #page-site-index {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ----------------------------------------------------------
   2. ARREGLO MENÚ ÁREA ADMINISTRATIVA
   Mejorar la navegación por tabs del admin y el header
   ---------------------------------------------------------- */

/* Tab navigation del admin — estilos mejorados */
.path-admin .nav.nav-tabs .nav-link,
.path-admin .secondary-navigation .nav-link {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    padding: 0.6rem 1rem !important;
    border-radius: 6px 6px 0 0 !important;
    transition: color 0.15s, background 0.15s !important;
}

.path-admin .nav.nav-tabs .nav-link:hover,
.path-admin .secondary-navigation .nav-link:hover {
    color: var(--otec-teal, #399ba6) !important;
    background: rgba(57,155,166,0.07) !important;
}

.path-admin .nav.nav-tabs .nav-link.active,
.path-admin .secondary-navigation .nav-link.active,
.path-admin .nav.nav-tabs .nav-item.active .nav-link {
    color: var(--otec-teal, #399ba6) !important;
    border-bottom-color: var(--otec-teal, #399ba6) !important;
    font-weight: 600 !important;
}

/* Admin header tab row */
.path-admin .rui-admin-nav-tabs,
.path-admin .admin-content-nav {
    border-bottom: 2px solid #e5e7eb !important;
}

/* Admin navigation menu lateral */
.path-admin #admin-menu-trigger,
.path-admin .admin-settings-nav a {
    color: #374151 !important;
    font-size: 0.875rem !important;
}

.path-admin .admin-settings-nav a:hover,
.path-admin .admin-settings-nav a.active {
    color: var(--otec-teal, #399ba6) !important;
}

/* Admin: mejorar contraste en titulos de sección */
.path-admin h2.main-content-node,
.path-admin .admin-settingspage h2,
.path-admin .admin-settingspage h3 {
    color: var(--otec-navy, #1a2b4b) !important;
    font-weight: 600 !important;
}

/* Admin: nav drawer izquierdo — mantenerlo visible pero con estilos OTEC */
.path-admin #nav-drawer {
    background: #1e293b !important;
}

.path-admin #nav-drawer .list-group-item,
.path-admin #nav-drawer a {
    font-size: 0.82rem !important;
}

/* Admin breadcrumb mejora */
.path-admin .breadcrumb {
    font-size: 0.82rem !important;
}

.path-admin .breadcrumb .breadcrumb-item a {
    color: var(--otec-teal, #399ba6) !important;
}

/* Botones de acción en admin con colores OTEC */
.path-admin .btn-primary {
    background: var(--otec-teal, #399ba6) !important;
    border-color: var(--otec-teal-dark, #2b7a83) !important;
    color: #fff !important;
}

.path-admin .btn-primary:hover {
    background: var(--otec-teal-dark, #2b7a83) !important;
    border-color: #236870 !important;
    color: #fff !important;
}

/* Tab activa del admin principal */
.path-admin .settingsform .nav-tabs .nav-link.active,
.path-admin #adminsettings .nav-link.active {
    background: rgba(57,155,166,0.12) !important;
    color: var(--otec-teal, #399ba6) !important;
    border-color: #dee2e6 #dee2e6 transparent !important;
    font-weight: 600 !important;
}

/* ----------------------------------------------------------
   3. OCULTAR BARRA NEGRA DE DEBUG/CRON EN PORTADA
   El admin ve ciertos banners de Moodle; ocultarlos visualmente
   en la portada para no romper el diseño OTEC
   ---------------------------------------------------------- */
.path-site.otec-fp-catalog .rui-admin-notification,
.path-site.otec-fp-catalog #admin-bar-notif,
.path-site.otec-fp-catalog .rui-fixbottombar {
    display: none !important;
}

/* Ocultar "Modo de edición" toggle en portada (admin lo ve pero lo movemos) */
.path-site.otec-fp-catalog .editmode-switch-form {
    position: fixed !important;
    bottom: 1rem !important;
    right: 1rem !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,0.95) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ----------------------------------------------------------
   4. CONTENIDO PRINCIPAL — asegurar ancho completo sin drawer
   ---------------------------------------------------------- */
.path-site.otec-fp-catalog #page-content,
.path-site.otec-fp-catalog #region-main-box,
.path-site.otec-fp-catalog #region-main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* ----------------------------------------------------------
   5. HERO SECTION — fix ancho ahora que no hay sidebar
   ---------------------------------------------------------- */
.path-site.otec-fp-catalog .otec-hero-section {
    padding: 3.5rem 1.5rem 3.5rem !important;
}

@media (min-width: 1200px) {
    .path-site.otec-fp-catalog .otec-hero-section {
        padding: 5rem 2rem 5rem !important;
    }
}

/* ----------------------------------------------------------
   6. ADMIN: tab navigation en settings de apariencia/theme
   ---------------------------------------------------------- */
.path-admin .rui-settings-tabs .nav-link.active,
.path-admin [role="tablist"] .nav-link.active {
    color: var(--otec-teal, #399ba6) !important;
    border-bottom: 2px solid var(--otec-teal, #399ba6) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Admin: inputs y selects con focus teal */
.path-admin input:focus,
.path-admin select:focus,
.path-admin textarea:focus {
    border-color: var(--otec-teal, #399ba6) !important;
    box-shadow: 0 0 0 3px rgba(57,155,166,0.2) !important;
    outline: none !important;
}

/* Admin: notifications/alerts con colores OTEC */
.path-admin .alert-info {
    border-left: 4px solid var(--otec-teal, #399ba6) !important;
    background: rgba(57,155,166,0.06) !important;
    color: #1e4047 !important;
}

/* ----------------------------------------------------------
   7. ARREGLAR ITEM ACTIVO EN SIDEBAR (Página principal del sitio)
   ---------------------------------------------------------- */
#nav-drawer .list-group-item.active,
#nav-drawer a.active {
    background: linear-gradient(90deg, var(--otec-teal,#399ba6), var(--otec-teal-dark,#2b7a83)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ----------------------------------------------------------
   8. PORTADA: eliminar espacio extra en el page-wrapper
   ---------------------------------------------------------- */
.path-site.otec-fp-catalog #page-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Asegurar que el header ocupa todo el ancho */
.path-site.otec-fp-catalog #topBar.rui-topbar-wrapper {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Portada OTEC: botón Acceder sin icono (SVG lo añade theme_alpha core_renderer para invitados) */
.path-site.otec-fp-catalog #topBar a.rui-login-btn > svg,
.path-site.otec-fp-catalog #topBar a.rui-login-btn svg.ml-2 {
    display: none !important;
}

/* ==========================================================================
   CORRECCIONES AULA (incourse / course) — v2 2026
   Arregla el "descuadrado" del tema dentro de cursos
   ========================================================================== */

/* 1. Contenedor principal del curso: evitar desbordamiento horizontal */
.path-course #page.drawers,
.pagelayout-incourse #page.drawers,
.pagelayout-course #page.drawers {
    overflow-x: hidden !important;
}

/* 2. La columna principal no debe tener un max-width rígido que cause corte */
.path-course #region-main-box,
.pagelayout-incourse #region-main-box,
.pagelayout-course #region-main-box {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Eliminar padding negativo que provoca corte lateral en Bootstrap grid */
.path-course .main-inner,
.pagelayout-incourse .main-inner,
.pagelayout-course .main-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
}

/* 4. Wrapper del curso: full width, sin overflow */
.path-course .wrapper-course,
.pagelayout-incourse .wrapper-course,
.pagelayout-course .wrapper-course {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* 5. Corrección: el page-content debe respetar los drawers abiertos */
.path-course #page-content.page-content,
.pagelayout-incourse #page-content.page-content,
.pagelayout-course #page-content.page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 6. Arreglo de la barra de navegación secundaria (moremenu) dentro del curso */
.path-course .secondary-navigation .moremenu,
.pagelayout-course .secondary-navigation .moremenu {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* 7. Course index (índice lateral) — asegurar que no sobresolape el contenido */
.path-course [data-region="courseindex-drawer"],
.pagelayout-course [data-region="courseindex-drawer"] {
    z-index: 1040 !important;
}

/* 8. Imagen del curso, tablas y media: sin overflow */
.path-course #region-main img,
.path-course #region-main table,
.pagelayout-incourse #region-main img,
.pagelayout-incourse #region-main table,
.pagelayout-course #region-main img,
.pagelayout-course #region-main table {
    max-width: 100% !important;
}

/* ==========================================================================
   CORRECCIONES CATEGORÍAS — Pills de filtro en portada
   ========================================================================== */

/* Pill base (categorías en home que NO son la activa) */
.otec-fp-filter-pill .nav-link.otec-fp-pill {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.otec-fp-filter-pill .nav-link.otec-fp-pill:hover,
.otec-fp-filter-pill .nav-link.otec-fp-pill:focus {
    background: var(--otec-teal, #399ba6);
    color: #fff !important;
    border-color: var(--otec-teal, #399ba6);
}

/* Pill activa "Todos los Cursos" (teal) */
.otec-fp-filter-pill .nav-link.otec-fp-pill-teal {
    background: var(--otec-teal, #399ba6);
    color: #fff !important;
    border: 1px solid var(--otec-teal-dark, #2b7a83);
}

/* Pills en modo oscuro */
.theme-dark .otec-fp-filter-pill .nav-link.otec-fp-pill {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
}

.theme-dark .otec-fp-filter-pill .nav-link.otec-fp-pill:hover {
    background: var(--otec-teal, #399ba6);
    color: #fff !important;
}

/* Responsive: pills que se adaptan en móvil */
@media (max-width: 575px) {
    .otec-fp-filter-pill ul.nav-pills {
        gap: 0.4rem !important;
    }
    .otec-fp-filter-pill .nav-link {
        font-size: 0.82rem !important;
        padding: 0.45rem 0.85rem !important;
    }
}

/* ==========================================================================
   MEJORAS LOGIN — asegurar que la página no quede en blanco
   ========================================================================== */

/* Fallback base si el tema no pudo leer la configuración */
body.path-login #page-login-index,
body.path-login #page-login-forgot_password {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: #eef2f6;
}

body.path-login #page-login .login-wrapper {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 1.5rem;
    width: 100%;
}

body.path-login #page-login .login-container {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

/* Garantizar visibilidad del formulario aunque no cargue el CSS avanzado */
body.path-login .rui-login-layout {
    width: 100%;
}

body.path-login .rui-login-box {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(15,23,42,0.08);
}

/* Asegurar que el fondo del panel decorativo siempre sea visible */
body.path-login .rui-login-bg-container.otec-login-bg-placeholder,
body.path-login .rui-login-bg-container:not([style]) {
    background-color: #dfeaf0 !important;
    background-image:
        radial-gradient(ellipse 85% 65% at 72% 38%, rgba(57, 155, 166, 0.38) 0%, transparent 58%),
        linear-gradient(148deg, #e8f3f5 0%, #dbecef 42%, #cfdfea 100%) !important;
    min-height: 480px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Icono decorativo del panel de login */
body.path-login .rui-login-bg-container.otec-login-bg-placeholder::after {
    content: "";
    display: block;
    width: 160px;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='rgba(57,155,166,0.22)' d='M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0C63.78 166.78 40.31 185.66 25.08 212a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════════
   SECONDARY NAVIGATION — Sacar de sticky para evitar overlap con título.
   El tema usa margin:-40px -60px 30px + position:sticky+z-index:1029
   que, sin imagen de curso, provoca que las pestañas sobrepongan el título.
   Solución: flujo relativo normal, sin sangría negativa.
   ══════════════════════════════════════════════════════════════════ */
.pagelayout-course .secondary-navigation,
.pagelayout-incourse .secondary-navigation,
.pagelayout-standard .secondary-navigation,
.pagelayout-report .secondary-navigation {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Reducir padding-top del wrapper en páginas de curso para acercar tabs al breadcrumb */
@media (min-width: 1080px) {
    .pagelayout-course .wrapper-course,
    .pagelayout-incourse .wrapper-course,
    .pagelayout-standard .wrapper-course {
        padding-top: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   VISIBILIDAD CONTEXTUAL: Header OTEC y Footer solo en página principal
   ══════════════════════════════════════════════════════════════════ */

/* Ocultar links de nav (Inicio/Cursos) en todas las páginas internas */
body:not(.pagelayout-frontpage) .otec-header-nav,
body:not(.pagelayout-frontpage) .otec-header-primary-nav {
    display: none !important;
}

/* Logo visible en todas las páginas incluyendo curso e incourse */

/* Ocultar el footer OTEC en portales internos y login.
   Visible en: portada, categorías de cursos, páginas públicas. */
body.pagelayout-admin #otec-footer,
body.pagelayout-admin #s-page-footer,
body.pagelayout-mydashboard #otec-footer,
body.pagelayout-mydashboard #s-page-footer,
body.pagelayout-mycourses #otec-footer,
body.pagelayout-mycourses #s-page-footer,
body.pagelayout-incourse #otec-footer,
body.pagelayout-incourse #s-page-footer,
body.pagelayout-mypublic #otec-footer,
body.pagelayout-mypublic #s-page-footer,
body.pagelayout-base #otec-footer,
body.pagelayout-base #s-page-footer,
body.path-admin #otec-footer,
body.path-admin #s-page-footer,
body.pagelayout-login #otec-footer,
body.pagelayout-login #s-page-footer {
    display: none !important;
}

/* Mostrar footer explícitamente en páginas públicas de catálogo */
body.path-course-index #otec-footer,
body.path-course-index #s-page-footer {
    display: block !important;
}

/* Logo real OTEC en el footer — blanco suave sobre fondo oscuro (SVG ancho: no recortar texto) */
.otec-footer-logo-img {
    width: 100%;
    max-width: min(280px, 100%);
    min-width: 0;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
    /* Convierte el logo oscuro a blanco suave para footer dark */
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: opacity 0.2s ease;
}
.otec-footer-logo-img:hover {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   PORTAL ADMIN / ALUMNO — Topbar compacto + Dark Mode real
   ══════════════════════════════════════════════════════════════════ */

/*
 * Portales internos: topbar ancho completo, sin tarjeta flotante.
 * Anula el diseño “card” del tema (right:20px, width:calc(100%-40px)).
 */
body:not(.pagelayout-frontpage) #topBar.rui-topbar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 0 !important;
    z-index: 1070 !important;
}

/* Light mode: fondo blanco con separador sutil */
body:not(.pagelayout-frontpage):not(.theme-dark) #topBar.rui-topbar-wrapper {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Dark mode: fondo oscuro coherente con el tema */
body:not(.pagelayout-frontpage).theme-dark #topBar.rui-topbar-wrapper {
    background: #1e2537 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar: padding-top para que "Mis cursos" no quede tapado por el topbar */
body:not(.pagelayout-frontpage) #nav-drawer {
    padding-top: 54px !important; /* topbar ~61px - nav-drawer top:7px */
}

/* Portales internos: topbar full-width sin centrado, logo pegado a la izquierda */
body:not(.pagelayout-frontpage) #topBar .rui-topbar.otec-header-topbar {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Altura mínima coherente en portales (área personal, cursos, admin, calendario, archivos, etc.) */
body.pagelayout-admin #topBar .rui-topbar.otec-header-topbar,
body.pagelayout-mydashboard #topBar .rui-topbar.otec-header-topbar,
body.pagelayout-mycourses #topBar .rui-topbar.otec-header-topbar,
body.pagelayout-incourse #topBar .rui-topbar.otec-header-topbar,
body.pagelayout-base #topBar .rui-topbar.otec-header-topbar,
body.pagelayout-course #topBar .rui-topbar.otec-header-topbar,
body.pagelayout-standard #topBar .rui-topbar.otec-header-topbar,
body.pagelayout-coursecategory #topBar .rui-topbar.otec-header-topbar,
body.path-admin #topBar .rui-topbar.otec-header-topbar {
    justify-content: flex-start !important;
    min-height: 58px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/*
 * Logo navbar: compacto = solo ícono (recorte PNG).
 * Portada (site-index): ícono recortado + texto institucional (.otec-header-brand-lines).
 */
#topBar a#logo.otec-header-logo--compact img,
#topBar a#logo-mobile.otec-header-logo--compact img,
#topBar a#logo.otec-header-logo--full .otec-header-logo-mark,
#topBar a#logo-mobile.otec-header-logo--full .otec-header-logo-mark {
    height: 44px !important;
    width: 44px !important;
    max-height: unset !important;
    max-width: unset !important;
    object-fit: cover;
    object-position: left center;
    display: block;
    flex-shrink: 0;
}

#topBar a#logo.otec-header-logo--full,
#topBar a#logo-mobile.otec-header-logo--full {
    gap: 0.5rem 0.65rem;
}

#topBar a#logo.otec-header-logo--full .otec-header-brand-lines,
#topBar a#logo-mobile.otec-header-logo--full .otec-header-brand-lines {
    display: flex !important;
    flex-direction: column;
    line-height: 1.12;
    margin-left: 0;
    text-align: start;
}

/* Modo claro: colores naturales del PNG */
#topBar a#logo img.otec-header-logo-img,
#topBar a#logo-mobile img.otec-header-logo-img {
    filter: none;
}

/*
 * Modo oscuro: ícono compacto en blanco (portada site-index no usa compact en la práctica).
 * En portada con topbar clara el logo completo sigue a color.
 */
body.theme-dark:not(.pagelayout-frontpage) #topBar a#logo.otec-header-logo--compact img.otec-header-logo-img,
body.theme-dark:not(.pagelayout-frontpage) #topBar a#logo-mobile.otec-header-logo--compact img.otec-header-logo-img,
body.theme-dark:not(.pagelayout-frontpage) #topBar a#logo.otec-header-logo--full .otec-header-logo-mark,
body.theme-dark:not(.pagelayout-frontpage) #topBar a#logo-mobile.otec-header-logo--full .otec-header-logo-mark {
    filter: brightness(0) invert(1);
    opacity: 0.98;
}

.pagelayout-frontpage.theme-dark #topBar a#logo img.otec-header-logo-img,
.pagelayout-frontpage.theme-dark #topBar a#logo-mobile img.otec-header-logo-img {
    filter: none;
    opacity: 1;
}

/* Alpha fija .rui-navbar-brand { height: 40px }: ajuste solo en modo compacto */
#topBar a#logo.otec-header-logo-link.otec-header-logo--compact.rui-navbar-brand {
    height: auto !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    align-self: center;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 0;
}

#topBar a#logo.otec-header-logo-link.otec-header-logo--full.rui-navbar-brand {
    height: auto !important;
    min-height: 0;
    display: inline-flex !important;
    align-items: center;
    align-self: center;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 0;
}

#topBar #topbarLeft.otec-header-left {
    align-items: center !important;
    align-self: center;
}


/* Misma prioridad que arriba: portales con topbar sin “tarjeta” (transparente sobre #page) */
body.pagelayout-admin.theme-dark #topBar.rui-topbar-wrapper,
body.pagelayout-mydashboard.theme-dark #topBar.rui-topbar-wrapper,
body.pagelayout-mycourses.theme-dark #topBar.rui-topbar-wrapper,
body.pagelayout-incourse.theme-dark #topBar.rui-topbar-wrapper,
body.pagelayout-base.theme-dark #topBar.rui-topbar-wrapper,
body.pagelayout-course.theme-dark #topBar.rui-topbar-wrapper,
body.pagelayout-standard.theme-dark #topBar.rui-topbar-wrapper,
body.pagelayout-coursecategory.theme-dark #topBar.rui-topbar-wrapper,
body.path-admin.theme-dark #topBar.rui-topbar-wrapper {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Dark mode: textos y elementos del portal no-portada */
body:not(.pagelayout-frontpage).theme-dark #page-wrapper,
body:not(.pagelayout-frontpage).theme-dark #page {
    background: #141824 !important;
}

body:not(.pagelayout-frontpage).theme-dark .secondary-navigation,
body:not(.pagelayout-frontpage).theme-dark .rui-secondary-navigation {
    background: #1a2133 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* Dark mode: tarjetas y cajas de contenido */
body:not(.pagelayout-frontpage).theme-dark .card,
body:not(.pagelayout-frontpage).theme-dark .rui-block {
    background: #1e2537 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Ocultar logo del panel lateral izquierdo (nav-drawer) */
.rui-drawer-logo {
    display: none !important;
}

/* Dark mode: botones y badges del portal */
body:not(.pagelayout-frontpage).theme-dark .btn-outline-secondary {
    border-color: rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.8) !important;
}
body:not(.pagelayout-frontpage).theme-dark .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* Drawer lateral: adaptar en dark mode */
body:not(.pagelayout-frontpage).theme-dark .drawer {
    background: #1a2133 !important;
    border-color: rgba(255,255,255,0.07) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PÁGINA DE CATEGORÍA DE CURSOS — diseño limpio y profesional
   ══════════════════════════════════════════════════════════════════ */

/* Fondo general */
.path-course-index #page-wrapper {
    background: #f2f4f8 !important;
}

/* ── Offset del topbar: dejar que el tema Alpha lo calcule, solo asegurar mínimo ── */
.path-course-index #page.drawers,
.path-course-index #page {
    padding-top: max(var(--rui-topbar-height, 0px), 82px) !important;
}

/* ── Cero toda la basura que genera espacio vacío ── */
.path-course-index .sticky-header,
.path-course-index .secondary-navigation,
.path-course-index .tertiary-navigation,
.path-course-index #page-header,
.path-course-index .rui-page-header-area,
.path-course-index [data-region="page-header-wrapper"] {
    display: none !important;
}

/* ── Eliminar TODOS los espacios vacíos entre breadcrumb y contenido ── */
.path-course-index #page-content,
.path-course-index #page-content > .container-fluid,
.path-course-index #page-content > div {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Breadcrumb: sin margin-bottom */
.path-course-index [data-region="page-navbar"],
.path-course-index .page-navbar,
.path-course-index nav[aria-label*="bread"],
.path-course-index nav.breadcrumb-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.path-course-index ol.breadcrumb {
    margin: 0 !important;
    padding: 0.5rem clamp(1rem, 4vw, 3rem) !important;
    background: transparent !important;
}

/* ── Contenedor de región principal: sin padding extra ── */
.path-course-index #region-main-box {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Cualquier contenedor intermedio entre navbar y main-box */
.path-course-index #page-content .container,
.path-course-index #page-content .container-xl,
.path-course-index #page-content .container-fluid {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Banner hero de categoría (cuando hay h1 — página de categoría específica) */
.path-course-index #region-main h1 {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(120deg, var(--otec-navy) 0%, #1a4470 55%, #0e6b7c 100%) !important;
    color: #fff !important;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 5vw, 4rem) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-size: clamp(1.5rem, 1.5vw + 0.8rem, 2.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    border-left: none !important;
    box-shadow: 0 4px 20px rgba(26,43,75,0.15) !important;
    line-height: 1.2 !important;
}

/* Área de contenido: padding compacto sin top extra */
.path-course-index #region-main {
    padding: 0 0 3rem !important;
}
.path-course-index #region-main .main-inner,
.path-course-index #region-main > .container-fluid,
.path-course-index .course_category_tree {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1rem, 4vw, 2.5rem) !important;
    padding-right: clamp(1rem, 4vw, 2.5rem) !important;
    padding-top: 1.25rem !important;
}

/* ── Página raíz del catálogo: estilizar la lista de categorías ── */
/* Título de catálogo cuando no hay h1 específico */
.path-course-index .course_category_tree .category {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.path-course-index .course_category_tree .category:hover {
    box-shadow: 0 4px 20px rgba(26,43,75,0.1) !important;
    border-color: var(--otec-teal) !important;
}
.path-course-index .course_category_tree .category .info {
    padding: 1rem 1.5rem !important;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.path-course-index .course_category_tree .category .categoryname a {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--otec-navy) !important;
    text-decoration: none !important;
}
.path-course-index .course_category_tree .category .categoryname a:hover {
    color: var(--otec-teal) !important;
}
/* Número de cursos y botón "Ver todos" */
.path-course-index .course_category_tree .category .morelink a,
.path-course-index .course_category_tree .category .coursecount {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
}

/* Barra filtro + búsqueda */
.path-course-index form.mb-1,
.path-course-index .course-search-form {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: #fff !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(26,43,75,0.08) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    margin-bottom: 1.75rem !important;
}
.path-course-index form.mb-1 select,
.path-course-index form.mb-1 input[type="text"],
.path-course-index form.mb-1 .input-group input {
    border: 1px solid #d5dae6 !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.9rem !important;
    background: #fff !important;
}
.path-course-index form.mb-1 .btn {
    border-radius: 8px !important;
    font-size: 0.9rem !important;
}

/* Etiqueta de sección ("Cursos del área de…") */
.path-course-index .courses h4,
.path-course-index .courses h3,
.path-course-index .coursebox h3 {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--otec-teal) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 1.25rem !important;
}

/* Grid de tarjetas: asegurar espacio mínimo sin romper Bootstrap */
.path-course-index .courses .row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}
.path-course-index .rui-course-card {
    height: 100%;
    overflow: hidden;
}

/* Breadcrumb: limpio sin exceso */
.path-course-index .breadcrumb-item {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* main-inner: sin margin-top */
.path-course-index #region-main .main-inner {
    margin-top: 0 !important;
}

/* Dark mode */
.path-course-index.theme-dark #page-wrapper {
    background: #101520 !important;
}
.path-course-index.theme-dark #region-main h1 {
    background: linear-gradient(120deg, #0b1220 0%, #112038 55%, #0b3a45 100%) !important;
}
.path-course-index.theme-dark form.mb-1,
.path-course-index.theme-dark .course-search-form {
    background: #1a2135 !important;
    border-color: rgba(255,255,255,0.08) !important;
}