.page-title {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
            padding: 5px 0;
        }

        /* Dropdown on hover for topbar */
        #topbar2 .dropdown:hover .dropdown-menu {
            display: block;
            margin-top: 0;
        }

        /* ============================================
           NAVBAR DROPDOWN — Fondo azul semi-transparente
           Igual que el color de la barra superior (#003d5c)
           con leve transparencia para efecto glassmorphism
           ============================================ */
        #topbar2 .dropdown-menu {
            background-color: rgba(0, 61, 92, 0.92) !important;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 0 0 8px 8px !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
            padding: 4px 0 !important;
            margin-top: 0 !important;
        }

        #topbar2 .dropdown-menu .dropdown-item {
            color: #ffffff !important;
            font-size: 0.875rem;
            padding: 8px 20px !important;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        #topbar2 .dropdown-menu .dropdown-item:hover,
        #topbar2 .dropdown-menu .dropdown-item:focus {
            background-color: rgba(255, 255, 255, 0.15) !important;
            color: #f0a500 !important;
        }

        #topbar2 .dropdown-menu .dropdown-divider {
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        /* ============================================
           Sidebar accordion fix — override uat.css
           uat.css sets:
             .mnuAccordion > ul a { color: #fff !important }
             .mnuAccordion > ul ul li { color: #fff !important }
             #mnuIzquierda.mnuAccordion > ul ul { background: transparent }
             .mnuAccordion > ul li a:hover { background-color: var(--alt-2) !important }
           We must beat ALL of these with higher specificity.
           ============================================ */

        /* Force submenu panel background to white at all times */
        #menu-izq .mnuAccordion>ul>li>ul {
            background-color: #fff !important;
            background: #fff !important;
        }

        /* Force submenu li text color to dark */
        #menu-izq .mnuAccordion>ul>li>ul>li {
            color: #333 !important;
        }

        /* Force all submenu links to dark text */
        #menu-izq .mnuAccordion>ul>li>ul>li>a {
            color: #333 !important;
            display: block !important;
            padding: 8px 12px !important;
        }

        /* Hover state for submenu links */
        #menu-izq .mnuAccordion>ul>li>ul>li>a:hover {
            color: var(--azul-1) !important;
            background-color: rgba(0, 74, 135, 0.1) !important;
        }

/* ===== BLOCK 2 ===== */

/* Seamless footer extension for short pages */
        html,
        body {
            background-color: var(--naranja-sec-1) !important;
            overflow-x: hidden !important;
        }

        /* Fix text color for left menu accordion links since they inherit white color on a white background */
        #menu-izq .mnuAccordion>ul ul li a {
            color: #333 !important;
        }

        #menu-izq .mnuAccordion>ul ul li a:hover {
            color: var(--azul-1) !important;
        }

        /* ============================================
           SIDEBAR INFORMES / RECURSOS CARDS
           These must ALWAYS have white background.
           The remote uat.css sets card-body inside
           #menu-izq to var(--azul-1). We override here
           with inline <style> which beats external CSS.
           ============================================ */
        .sidebar-card,
        .sidebar-card .card-body,
        .sidebar-card .card-body-wrapper,
        #home-informes,
        #home-descargas {
            background: #ffffff !important;
            background-color: #ffffff !important;
            color: #333333 !important;
        }

        .sidebar-card h5:not(.color h5),
        .sidebar-card h6 {
            color: #222222 !important;
        }

        .sidebar-card span,
        .sidebar-card p {
            color: #555555 !important;
        }

        .sidebar-card a {
            color: var(--azul-1) !important;
        }

        .sidebar-card .color {
            background-color: var(--azul-1) !important;
            color: #ffffff !important;
            padding: 5px;
            border-radius: 10px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sidebar-card .color h5,
        .sidebar-card .color * {
            color: #ffffff !important;
        }

        /* ============================================
           CONTENT AREA ACCORDION BUTTONS
           Plan de Estudios, Directorio, etc.
           Bootstrap resets accordion-button color;
           we restore it here for blue-bg buttons.
           ============================================ */
        .accordion-button[style*="azul-1"],
        .accordion-button.dir-accordion-btn {
            background-color: var(--azul-1) !important;
            color: #ffffff !important;
        }

        .accordion-button[style*="azul-1"]:not(.collapsed),
        .accordion-button.dir-accordion-btn:not(.collapsed) {
            background-color: var(--azul-1) !important;
            color: #ffffff !important;
            box-shadow: none !important;
        }

        .accordion-button[style*="azul-1"].collapsed,
        .accordion-button.dir-accordion-btn.collapsed {
            background-color: var(--azul-1) !important;
            color: #ffffff !important;
            opacity: 0.85;
        }

        .accordion-button[style*="azul-1"]:hover,
        .accordion-button.dir-accordion-btn:hover {
            opacity: 1;
            filter: brightness(1.1);
        }

        /* Fix the arrow icon color on blue buttons */
        .accordion-button[style*="azul-1"]::after,
        .accordion-button.dir-accordion-btn::after {
            filter: invert(1) brightness(2);
        }

        /* Accordion body always white */
        .accordion-body.bg-white,
        .accordion-item .accordion-body {
            background-color: #ffffff !important;
            color: #333 !important;
        }

        /* ============================================
           COMUNIDAD FCAV — Collapsible sub-groups
           in topbar dropdown (accordion-style)
           ============================================ */
        .comunidad-dropdown .comunidad-group-toggle {
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .comunidad-dropdown .comunidad-toggle-icon {
            transition: transform 0.2s ease;
            font-size: 0.7em;
        }

        .comunidad-dropdown .comunidad-group-toggle:not(.collapsed) .comunidad-toggle-icon {
            transform: rotate(180deg);
        }

        .comunidad-dropdown .comunidad-sub-items {
            padding-left: 0;
            list-style: none;
        }

        .comunidad-dropdown .comunidad-sub-items .dropdown-item {
            padding-left: 1.5rem !important;
            font-size: 0.85rem;
        }

        /* ============================================
           NORMATIVIDAD — Collapsible "Derechos y Obligaciones"
           in topbar dropdown (accordion-style)
           ============================================ */
        .nor-dropdown .nor-group-toggle {
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nor-dropdown .nor-toggle-icon {
            transition: transform 0.2s ease;
            font-size: 0.7em;
        }

        .nor-dropdown .nor-group-toggle:not(.collapsed) .nor-toggle-icon {
            transform: rotate(180deg);
        }

        .nor-dropdown .nor-sub-items {
            padding-left: 0;
            list-style: none;
        }

        .nor-dropdown .nor-sub-items .dropdown-item {
            padding-left: 1.5rem !important;
            font-size: 0.85rem;
        }