body, html {
                font-family: "DM Serif Display", serif;
                font-weight: 400;
                font-style: normal;
            }

            /* Variante regular */
            .dm-serif-display-regular {
                font-family: "DM Serif Display", serif;
                font-weight: 400;
                font-style: normal;
            }

            /* Variante italic */
            .dm-serif-display-regular-italic {
                font-family: "DM Serif Display", serif;
                font-weight: 400;
                font-style: italic;
            }

            .sidebar {
                height: 100vh;
                width: 300px;
                flex-shrink: 0;
                z-index: 2;
                background-image: url('../images/fondos/lateral.png');
                background-repeat: no-repeat;
                background-position: center top;
                background-size: 100% 100%;
                background-color: #000;
                transition: transform 0.3s ease-in-out;
            }

            .sidebar a {
                color: white;
                text-decoration: none;
            }

            .sidebar .nav-link {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-weight: 500;
            }

            .accordion-button {
                font-size: 1rem;
                padding: 0.5rem 1rem;
            }

            .accordion-body .nav-link {
                padding-left: 1.5rem;
                font-size: 0.95rem;
            }

            .main-content {
                height: 100vh;
                overflow-y: auto;
                background-color: #ffffff;
            }

            .logo-img {
                max-height: 100px;
                margin-top: -25px;
            }

            /* Icono de usuario en morado */

            /* Icono de salir: por defecto negro */
            .bi-box-arrow-right {
                color: #000; /* negro inicial */
                transition: color 0.3s ease; /* transición suave */
            }

            /* Al pasar el mouse sobre el botón de logout */
            form button:hover .bi-box-arrow-right {
                color: red; /* se pone rojo */
            }

            /* Responsive sidebar toggle */
            @media (max-width: 768px) {
                .sidebar {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 250px;
                    z-index: 1050;
                    transform: translateX(-100%);
                }

                .sidebar.show {
                    transform: translateX(0);
                }

                .menu-toggle {
                    position: fixed;
                    top: 1rem;
                    left: 1rem;
                    z-index: 1100;
                    background-color: #8a7bf4;
                    color: white;
                    border: none;
                    padding: 0.5rem 0.75rem;
                    border-radius: 0.25rem;
                }
            }

            /* Contenedor del buscador */
            .search-box-expandable {
                display: flex;
                align-items: center;
                background-color: #c9bffe;
                border-radius: 50px;
                padding: 5px 12px;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                width: 45px; /* Tamaño de la burbuja inicial */
                overflow: hidden;
                cursor: pointer;
                border: 1px solid transparent;
            }

            /* Icono de lupa */
            .search-box-expandable i {
                color: #845afd;
                font-size: 1.1rem;
                min-width: 22px;
            }

            /* Input oculto */
            .search-box-expandable input {
                width: 0;
                outline: none;
                border: none;
                background: none;
                transition: all 0.4s ease;
                padding: 0;
                color: #845afd;
                font-size: 0.9rem;
                font-weight: 500;
            }

            /* Efecto al pasar el mouse O cuando tiene el foco (clic) */
            .search-box-expandable:hover,
            .search-box-expandable:focus-within {
                width: 280px;
                padding: 5px 15px;
                background-color: #d1c8ff; /* Un tono un poco más oscuro al abrir */
                border-color: #845afd;
            }

            .search-box-expandable:hover input,
            .search-box-expandable:focus-within input {
                width: 100%;
                padding-left: 10px;
            }

            /* Estilo para el placeholder */
            .search-box-expandable input::placeholder {
                color: #845afd;
                opacity: 0.7;
            }