@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&display=swap');
    body {
        font-family: 'IBM Plex Sans', sans-serif !important;
        margin: 0;
        padding: 0;
        background-color: #f4f6f9;
        overflow-x: hidden !important;
    }

    h1 {
        color: #ffffff;
        text-align: center;
        font-size: 1.95rem;
        margin: 0 0 15px 0;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .card {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        background-color: #ffffff;
    }

    .container,
    .container-fluid,
    #region-main-box {
        --content-padding: 15px;
    }

    /* ==========================================================
       2. BARRA DE NAVEGACIÓN SUPERIOR (HEADER)
       ========================================================== */
    
    #header .userbutton .usertext {
        color: #333333 !important;
        font-weight: bold !important;
    }

    #header .popover-region-toggle {
        color: #555555 !important;
    }

    #header .userbutton .avatars .dropdown-toggle .caret {
        border-top-color: #555555 !important;
    }

    /* ==========================================================
       3. CABECERA DE PÁGINA Y CONTENIDO
       ========================================================== */

    #page-header {
        background-color: #3c90d3;
        border: 2px solid #6edff6;
        border-radius: 10px;
        width: 100%;
        margin-top: 25px;
        margin-bottom: 25px;
        padding: 15px 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    #page-header .col-xs-12 {
        padding: 10px !important;
    }

    #page-header .card {
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .breadcrumb-nav .breadcrumb {
        color: #fff;
        padding: 0;
        margin-bottom: 0;
        font-size: 0.75rem;
    }

    .breadcrumb-nav .breadcrumb-item+.breadcrumb-item::before {
        color: #d1d1d1;
    }

    .breadcrumb-nav .breadcrumb-item a {
        color: #ffffff;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .breadcrumb-nav .breadcrumb-item a:hover {
        color: #ffca28;
    }

    #page-content-wrapper {
        padding: 30px;
    }

    .main-content {
        background-color: #f8f9fa;
    }

    /* --- Color de Títulos de Sección (WEEK 1) e Iconos (Birrete) --- */
    .course-content .sectionname,
    .course-content .sectionname a,
    .course-content .section-title h3 {
        color: #000000 !important;
    }

    .course-content .activityinstance .instancename,
    .course-content .activityinstance a .instancename {
        color: #000000 !important;
    }

    .course-content .icon.fa {
        color: #000000 !important;
    }

    /* ==========================================================
       4. BARRA LATERAL (NAV-DRAWER)
       ========================================================== */

    #nav-drawer {
        background-color: #eaeaea !important;
        border-right: 1px solid #e0e0e0;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
        top: 86px;
        font-family: 'IBM Plex Sans', sans-serif !important;
    }

    [data-action="toggle-drawer"] {
        color: #555555;
        border: none;
        background: transparent;
        font-size: 52px;
    }

    [data-action="toggle-drawer"]:hover {
        opacity: 0.8;
    }

    #nav-drawer .list-group-item:not(a) {
        color: #333333 !important;
        font-weight: bold;
        background-color: #eeeeee !important;
        font-size: 1.2rem;
        padding: 15px 20px;
    }

    #nav-drawer nav.list-group a.list-group-item {
        background-color: transparent !important;
        color: #333333 !important;
        font-weight: bold !important;
        border: none !important;
        padding: 14px 20px !important;
        transition: background-color 0.2s ease, color 0.2s ease;
        font-size: 1.2rem; /* Tamaño de letra grande */
        display: flex;
        align-items: center;
        margin-top: 5px;
        border-radius: 8px;
    }

    #nav-drawer nav.list-group a.list-group-item:hover {
        background-color: #e0e0e0 !important;
        color: #333333 !important;
    }

    #nav-drawer nav.list-group a.list-group-item.active {
        background-color: #2b4e84 !important;
        color: #ffffff !important; /* Texto blanco en el activo */
        margin-top: 20px !important;
    }

    #nav-drawer a[data-key="mycourses"] {
        font-size: 1.3rem !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: bold !important;
        color: #333333 !important;
        margin-top: 20px !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
        border-radius: 0;
    }

    #nav-drawer a[href*="course/view.php"] {
        padding-left: 35px !important;
        font-size: 1.1rem !important;
        font-weight: normal !important;
    }

    /* ==========================================================
       5. ASIGNACIÓN DE ÍCONOS (EMOJIS)
       ========================================================== */
    .nav-drawer i {
        color: white;
    }
    
    .icon fa fa-folder fa-fw {
        color: black
    }
    /* --- Espacio para Emojis (Ordenado y Separado) --- */
    #nav-drawer a.list-group-item::before {
        content: " ";
        font-size: 1.1em;
        width: 30px; 
        text-align: center;
        margin-right: 10px; 
    }

    /* --- Asignación individual --- */
    #nav-drawer a[data-key="myhome"]::before { content: "👤"; }
    #nav-drawer a[data-key="home"]::before { content: "🏠"; }
    #nav-drawer a[data-key="calendar"]::before { content: "📅"; }
    #nav-drawer a[data-key="privatefiles"]::before { content: "🔒"; }
    #nav-drawer a[data-key="mycourses"]::before { content: "📚"; }
    #nav-drawer a[href*="course/view.php"]::before { content: "🎓"; }

 /*
   AJUSTE GENERAL*/
 html,
 body {
     overflow-x: hidden !important;
 }

 /* 
   LAYOUT PRINCIPAL
   */
 .container,
 .container-fluid,
 #region-main-box {
     --content-padding: 15px;
 }

 /* 
   HEADER (evitar que se achique)
   */
 #page-header {
     background: #2b4e84;
     padding: 15px !important;
 }

 #page-header .col-xs-12 {
     padding: 10px !important;
 }

 /* 
   NAV DRAWER - MENÚ LATERAL
   */

 /* Bajar la posición del curso activo */
 #nav-drawer a.list-group-item.active {
     margin-top: 20px !important;
 }

 /* Separar "Mis cursos" de los cursos listados */
 #nav-drawer a[data-key="mycourses"] {
     margin-bottom: 12px !important;
 }

 /* Mejora visual general */
 #nav-drawer .list-group-item {
     padding: 10px 14px !important;
     font-size: 15px;
 }
 .icon fa fa-folder fa-fw{
    color: black;
 }