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

        /* ============================================
           TOPBAR — Forzar fondo azul igual que FcavMaster
           Sobrescribe var(--subsitio-1) naranja del template
           ============================================ */
        #topbar2 {
            background: #003d5c !important;
            background-color: #003d5c !important;
        }

        #topbar2 .btn,
        #topbar2 a.btn {
            color: #ffffff !important;
            font-size: 13px !important;
            font-weight: normal !important;
            display: inline-block !important;
            float: none !important;
            text-align: center !important;
        }

        #topbar2 .btn:hover,
        #topbar2 a.btn:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
        }

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

        /* ============================================
           NAVBAR DROPDOWN — Fondo azul semi-transparente
           ============================================ */
        #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;
        }

        /* ============================================
           CARRUSEL — Fix colapso de altura en transición fade
           Bootstrap pone los items NO-activos en position:absolute
           al hacer fade, lo que colapsa el contenedor.
           Solución: altura fija en .carousel-inner y posición
           absoluta con width/height 100% en todos los items.
           ============================================ */
        #heroCarousel .carousel-inner {
            height: 450px;
            position: relative;
            overflow: hidden;
        }

        #heroCarousel .carousel-item {
            position: absolute !important;
            top: 0;
            left: 0;
            width: 100%;
            height: 450px;
            opacity: 0;
            z-index: 0 !important;
            transition: opacity 0.6s ease-in-out !important;
            display: block !important;
            pointer-events: none !important;
        }

        #heroCarousel .carousel-item.active {
            opacity: 1;
            z-index: 1 !important;
            pointer-events: auto !important;
        }

        /* Ensure controls stay on top of the active slide */
        #heroCarousel .carousel-control-prev,
        #heroCarousel .carousel-control-next {
            z-index: 20 !important;
        }

        #heroCarousel .carousel-item img,
        #heroCarousel .imagen-item img {
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 450px !important;
            display: block;
        }

        .imagen-item {
            position: relative;
            height: 450px;
            overflow: hidden;
        }

        /* Botón Ver Más centrado sobre la imagen */
        #heroCarousel .centered-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }



        /* ============================================
           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;
        }

        /* 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;
        }