.navbar{
            padding: .625rem 0rem !important;
            top: 0px;
        }
        .navbar>.container{
            margin-left: 1rem !important;
        }
        .navbar .ms-auto {
          margin-left: auto !important; 
        }
        
        .navbar .ms-auto .d-flex {
          display: flex !important; 
          align-items: center !important; 
        }
        .list-group {
            padding: 15px;
        }
        .embed-responsive {
            border-radius: 15px;
        }
        .course-container{
            position: relative!important;
        }
        /* Reading width for the class content (title, video/images, text).
           NEVER use the theme's `content` class here: it belongs to the docs
           layout and adds a ~400px margin-left for a fixed docs sidebar. */
        .course-content{
            max-width: 52rem;
        }
        /* Class list: in the flow (mobile: stacked below the content); on
           desktop it sticks below the fixed navbar and scrolls on its own.
           The THEME defines .course-sidebar as its fixed course-player rail
           (position:fixed; width:23.75rem; min-height:100vh) — override it
           fully or the card escapes its grid column. */
        .course-sidebar {
            overflow-x: hidden;
            text-align: left;
            position: static;
            width: 100%;
            min-height: 0;
            border-radius: .75rem; /* the theme forces border-radius:0 */
        }
        @media (min-width: 992px){
            .course-sidebar {
                position: sticky;
                top: 4.5rem;
                max-height: calc(100vh - 5.5rem);
                overflow-y: auto;
            }
        }
        
        /* Estilos para la scrollbar */
        .course-sidebar::-webkit-scrollbar {
            width: 10px;
        }
        
        .course-sidebar::-webkit-scrollbar-track-piece {
            background-color: #FFF;
        }
        
        .course-sidebar::-webkit-scrollbar-thumb {
            background-color: #CBCBCB;
            outline: 2px solid #FFF;
            outline-offset: -2px;
            border: 0.1px solid #B7B7B7;
        }
        
        .course-sidebar::-webkit-scrollbar-thumb:hover {
            background-color: #909090;
        }
        .card>.list-group:last-child{
            padding-bottom: 50px;
        }
        
    

        /* Estilo para los pasos numerados */
        .step {
          list-style: none;
          padding: 0;
          margin: 2rem 0;
        }
        
        .step .step-icon {
            display: -ms-inline-flexbox;
            display: inline-flex;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 1rem;
            font-weight: 600;
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 50%;
            margin-right: 1rem;
        }
      
        .step-icon-soft-primary {
          background-color: var(--gk-light-primary, #e9f5ff);
          color: var(--gk-primary, #0d6efd);
        }
        
        .step-content-wrapper {
          display: flex;
        }
        
        .step-content h4 {
          margin: 0 0 0.5rem;
        }
        
        .step-text {
          margin: 0;
          color: var(--gk-body-color);
        }
        
        /* Estilo para los encabezados */
        .docs-page-header-title {
          font-size: 2rem;
          font-weight: 600;
          margin-bottom: 0.25rem;
        }
        
        .docs-page-header-text {
          color: var(--gk-secondary-color);
        }
        
        /* Estilo para botones */
        .btn-success {
          background-color: #198754;
          border-color: #198754;
          color: #fff;
        }
        
        .btn-success:hover {
          background-color: #157347;
          border-color: #146c43;
        }
        
        /* Estilo para alertas suaves */
        .alert-soft-dark {
          background-color: #f8f9fa;
          border: 1px solid #ced4da;
          color: #212529;
        }
        
        .alert-soft-danger {
          background-color: #fef2f2;
          border: 1px solid #f5c2c7;
          color: #842029;
        }
        
        .alert-soft-primary {
          background-color: #e7f1ff;
          border: 1px solid #b6d4fe;
          color: #084298;
        }
        
        .alert-soft-secondary {
          background-color: #f8f9fa;
          border: 1px solid #dee2e6;
          color: #495057;
        }
        
        /* Estilo para tarjetas (cards) */
        .card-flush {
          border: none;
          border-radius: 0.5rem;
          overflow: hidden;
        }
        
        .card-stretched-vertical {
          height: 100%;
        }
        
        .card-body ul {
          padding-left: 1.2rem;
        }
        
        .card-body ul li {
          list-style: disc;
          margin-bottom: 0.25rem;
        }
        
        /* Imagenes responsivas */
        img.w-100 {
          max-width: 100%;
          height: auto;
          border-radius: 0.25rem;
        }
        
        /* Espaciado general */
        .content-space-1 {
          padding-top: 2rem;
          padding-bottom: 2rem;
        }
        
        .content-space-md-2 {
          padding-top: 3rem;
          padding-bottom: 3rem;
        }
        
        /* Divider estilo */
        .content-divider {
          border-top: 1px solid #dee2e6;
          margin-top: 2rem;
          margin-bottom: 2rem;
          padding-top: 2rem;
        }
    

        /* Dark mode: the soft alerts above use fixed light backgrounds */
        [data-bs-theme="dark"] .alert-soft-dark,
        [data-bs-theme="dark"] .alert-soft-secondary {
          background-color: var(--gk-gray-200);
          border-color: var(--gk-gray-400);
          color: var(--gk-body-color);
        }
        [data-bs-theme="dark"] .alert-soft-danger {
          background-color: var(--gk-light-danger);
          border-color: var(--gk-danger);
          color: var(--gk-body-color);
        }
        [data-bs-theme="dark"] .alert-soft-primary {
          background-color: var(--gk-light-primary);
          border-color: var(--gk-primary);
          color: var(--gk-body-color);
        }
        [data-bs-theme="dark"] .content-divider {
          border-color: var(--gk-gray-400);
        }