body {
    margin-top: 60px; /* Ajusta el margen superior para que coincida con la altura de la barra de navegación */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    width: 100%; /* Ajusta el ancho para que ocupe toda la pantalla */
    z-index: 999; /* Ajusta el índice z para que esté por encima de otros elementos */
    font-family: 'Roboto', Arial, sans-serif;
}

.navbar-brand img {
    height: 40px; /* Ajusta el tamaño del logo según sea necesario */
    transition: transform 0.3s ease; /* Transición de transformación suave para toda la imagen */
}

.account-btn,
.logout-btn {
    background-color: #838999;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Roboto', Arial, sans-serif;
    margin-right: 10px; /* Ajusta el margen derecho para mover los botones más a la izquierda */
}

.crear-btn {
    background-color: #0494a0;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Roboto', Arial, sans-serif;
    margin-right: 10px; /* Ajusta el margen derecho para mover los botones más a la izquierda */
}

.administrator-btn {
    background-color: #4d4f52;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Roboto', Arial, sans-serif;
    margin-right: 10px; /* Ajusta el margen derecho para mover los botones más a la izquierda */
}


.gestionar-btn {
    background-color: #687178;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Roboto', Arial, sans-serif;
    margin-right: 10px; /* Ajusta el margen derecho para mover los botones más a la izquierda */
}


.navbar-buttons {
    display: flex;
    align-items: center;
    margin-right: 3%; /* Ajusta el margen derecho del contenedor de botones */
}

.administrator-btn:hover
{
    background-color: #646465;
}
.account-btn:hover,
.logout-btn:hover {
    background-color: #687178;
}

.crear-btn:hover {
    background-color: #048c99;
}

.gestionar-btn:hover {
    background-color: #989795;
}

.logout-container {
    display: flex;
    align-items: center;
    font-family: 'Roboto', Arial, sans-serif;
}

.navbar-brand img:hover {
    transform: scale(1.05); /* Aumenta el tamaño al 110% cuando se pasa el mouse */
    font-family: 'Roboto', Arial, sans-serif;
}

/* DESPLEGABLE */

.dropdown-toggle {
    background-color: #838999;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
}

/* Efecto de aparición/desaparición */
.dropdown-content {
    display: block;
    position: absolute;
    background-color: #fff;
    min-width: 100px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 8px;
    padding: 10px 0;
    margin-top: 5px;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 1.3s; /* Retraso en ocultarse */
    margin-right: 65px;
}

.dropdown-content a {
    color: #343a40;
    padding: 10px 20px; /* Espaciado dentro del desplegable */
    text-decoration: none;
    display: block;
    border-radius: 5px;
    font-size: 14px; /* Tamaño de texto consistente */
}

.dropdown-content a:hover {
    background-color: #687178;
    color: white;
}

/* Mostrar el dropdown al pasar el mouse */
/* Al hacer hover */
.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s;
}

.dropdown:hover .dropdown-toggle {
    background-color: #687178;
}