:root {
            --primary: #377dff !important;
        }
        /* Dark mode readable text: theme.min.css defines TWO
           [data-bs-theme=dark] blocks — the first sets the intended
           --gk-body-color:#cbd5e1 (light slate) but a later block overrides it
           with #64748b (gray-600), leaving body text too dim. Restore the
           theme's intended value. */
        [data-bs-theme="dark"] {
            --gk-body-color: #cbd5e1;
            --gk-body-color-rgb: 203, 213, 225;
        }
        .bg-primary{
            background-color: #377dff !important;
        }
        .navbar-expand-lg{
            position: fixed!important;
            width: 100%;
            z-index: 1000;
        }
        /*.navbar {*/
        /*    padding: .625rem 8rem!important;*/
        /*}*/
        /*.navbar .dropdown-menu .dropdown-submenu.dropend .dropdown-menu {*/
        /*    min-width: fit-content; */
        /*}*/

        .mt-10{
            margin-top: 4.5rem;
        }
        .bg-light-blue { background-color: #85baff; }
        .bg-dark-blue { background-color: #1f5acb; }
        .bg-deep-blue { background-color: #0046aa; }
        
        .bg-orange { background-color: #ff8f40; }
        .bg-coral-red { background-color: #ff5a5f; }
        .bg-golden-yellow { background-color: #ffbe0b; }
        
        .bg-emerald-green { background-color: #1ecb81; }
        .bg-olive-green { background-color: #789d50; }
        
        .bg-light-gray { background-color: #f5f7fa; }
        .bg-medium-gray { background-color: #adb5bd; }
        .bg-black-soft { background-color: #1c1c1e; }
        
        /* Colores por aplicación — manual de marca §6.2 (course hero bg).
           Apps sin color en el manual (Agenda, Gastos, Integraciones,
           Mantenimiento) usan el azul principal de marca (bg-primary). */
        .bg-facturacion { background-color: #FE7088; }  /* E-Factura */
        .bg-pos { background-color: #DB2342; }
        .bg-contabilidad { background-color: #28A745; }
        .bg-inventario { background-color: #FF9C37; }
        .bg-rrhh { background-color: #23C2DB; }
        .bg-erp { background-color: #525252; }          /* General/ERP */
        .bg-salud { background-color: #8B3DFF; }        /* RIPS */
        @keyframes bounce {
          0%, 100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-5px);
            border-bottom: 2px solid var(--gk-primary);
            color: var(--gk-primary);
          }
        }
        
        .bounce-effect {
          animation: bounce 1.0s infinite;
        }
         

    
        /* Flecha abajo usando CSS puro */
        .dropdown-toggle::after {
          display: none!important;
        }
        .logo-brand-goujana{
            width: 100px;
        }
        main{
            padding-top: 55px;
        }
        /* Academia search: the [data-academia-search] inputs are triggers that
           open the big offcanvas (#academia-search-canvas). */
        /* Navbar trigger: lives next to the brand (outside the collapse, which
           overflows on laptop widths). Shrinks on small screens, capped on big. */
        .navbar .academia-search{
            flex: 1 1 auto;
            min-width: 6rem;
            max-width: 14rem;
        }
        .navbar .academia-search input[type="search"]{
            width: 100%;
        }
        /* Big results offcanvas (the theme's offcanvas-top height is only 30vh,
           set via the --gk-offcanvas-height custom property) */
        .academia-search-canvas{
            --gk-offcanvas-height: 85vh;
            height: 85vh;
        }
        /* Responsive media, infallible: ANY video or embed (YouTube iframe or
           self-hosted <video>) inside academia content always fills its column
           and keeps a sane height, regardless of the width/height attributes
           hardcoded in old pages.
           - iframes get a forced 16:9 box (their attrs lie about size);
           - <video> keeps its own intrinsic ratio via height:auto. */
        .course-content iframe,
        .content_clase_texto iframe,
        .tab-content iframe{
            width: 100% !important;
            max-width: 100%;
            height: auto !important;
            aspect-ratio: 16 / 9;
            border: 0;
            border-radius: .75rem;
        }
        .course-content video,
        .content_clase_texto video,
        .tab-content video{
            width: 100%;
            max-width: 100%;
            height: auto;
            border-radius: .75rem;
        }
        /* Legacy embed wrappers with a hardcoded inline height (e.g.
           style="height:600px") lose proportionality on small screens:
           force them back to a 16:9 box. */
        .course-content .embed-responsive[style*="height"],
        .content_clase_texto .embed-responsive[style*="height"],
        .tab-content .embed-responsive[style*="height"]{
            height: auto !important;
            aspect-ratio: 16 / 9;
        }
        /* Latest-courses grid cards: uniform cover images */
        .academia-latest-img{
            height: 160px;
            width: 100%;
            object-fit: cover;
        }
        /* Grouped navbar: one dropdown per vertical, apps as columns */
        .navbar .academia-nav-panel{
            min-width: 16rem;
        }
        .academia-nav-app{
            min-width: 13rem;
            max-width: 17rem;
        }
        .academia-nav-app-title{
            color: var(--gk-primary);
        }
        /* Course table of contents (list-group-flush.html: clase sidebar +
           "Clases" tab in courses). min-width:0 lets flex children truncate
           instead of overflowing the card out of its column. */
        .academia-course-toc .list-group-item{
            min-width: 0;
        }
        .academia-toc-section{
            min-width: 0;
        }
        .academia-toc-link{
            min-width: 0;
            color: var(--gk-body-color);
        }
        .academia-toc-link:hover{
            background-color: var(--gk-gray-100);
            color: var(--gk-primary);
        }
        .academia-toc-link.active{
            /* brand blue #377DFF at 11% opacity (manual de marca: gota suave) */
            background-color: rgba(55, 125, 255, .11);
            color: var(--gk-primary);
            box-shadow: inset 3px 0 0 var(--gk-primary);
        }
        .academia-toc-link .bi{
            color: var(--gk-primary);
        }
        /* Usage tier ("Popular"/"Muy consultado") as a badge beside the kind
           tag in search results, fed by the entry rank in academia.json; the
           card border takes the tier color. */
        .academia-search-usage{
            background-color: var(--gk-warning);
            color: #fff;
        }
        .academia-search-item.is-popular{
            border-color: var(--gk-warning) !important;
        }
        .academia-search-item.is-hot{
            border-color: var(--gk-warning) !important;
            box-shadow: 0 0 0 1px var(--gk-warning);
        }
        /* Result cards: clamp long descriptions, highlight keyboard selection */
        .academia-search-item .academia-search-desc{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .academia-search-item:hover,
        .academia-search-item.active{
            border-color: var(--gk-primary) !important;
            box-shadow: 0 0 0 1px var(--gk-primary);
        }