a {
            text-decoration: none;
            color:#84c474 ; /* Color de texto para el menú */
            padding: 10px;
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            position: relative;
            overflow: hidden; /* Asegura que el efecto no se salga del enlace */
            transition: color 0.3s ease;
        }

        /* Estilo para el enlace activo */
        a.active, a:hover {
            color: #84c474; /* Color al pasar el cursor por encima */
        }

        /* Estilo del efecto de lente de cámara */
        a::before {
            top: 50%;
            left: 50%;
            width: 300%; /* Ampliar el área del efecto */
            height: 300%; /* Ampliar el área del efecto */
            background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 30%, transparent 70%);
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform: translate(-50%, -50%) scale(0);
            z-index: 1;
            opacity: 0;
        }

        a:hover::before {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        /* Estilo del cuadro con solo las 4 esquinas */
        a .hover-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Asegura que el cuadro no interfiera con los clics */
        }

        
        a .hover-box::before,
        a .hover-box::after{
            content: '';
            position: absolute;
            border: 1px solid  #84c474; /* Color del borde */
            transition: all 0.3s ease;

        }




        /* Esquinas superior izquierda e inferior derecha */
        a .hover-box::before {
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-top-width: 1px;
            border-left-width: 1px;
            border-right-width: 0;
            border-bottom-width: 0;
        }


        /* Esquinas inferior izquierda y superior derecha */
        a .hover-box::after {
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-bottom-width: 1px;
            border-right-width: 1px;
            border-left-width: 0;
            border-top-width: 0;
        }




        a:hover .hover-box::before,
        a:hover .hover-box::after,
        a.active .hover-box::before,
        a.active .hover-box::after {
        width: 20px; /* Tamaño de las esquinas */
        height: 20px; /* Tamaño de las esquinas */
        }




        /* Estilo para los íconos */
        a .icon-box {
            position: absolute;
            color:  #84c474; /* Color del ícono */
            font-size: 20px; /* Tamaño del ícono */
            transition: opacity 0.3s ease;
            z-index: 2;
        }

        /* Posicionar íconos en las esquinas */
        a .icon-box::before {
            content: '\f030'; /* Código del ícono de FontAwesome para una cámara (ajustar según el ícono deseado) */
            position: absolute;
            top: 10px;
            left: 10px;
            opacity: 0;
        }

        a .icon-box::after {
            content: '\f030'; /* Código del ícono de FontAwesome para una cámara (ajustar según el ícono deseado) */
            position: absolute;
            right: 10px;
            opacity: 0;
        }

        a:hover .icon-box::before,
        a:hover .icon-box::after,
        a.active .icon-box::before,
        a.active .icon-box::after {
        opacity: 1; /* Mostrar íconos al pasar el cursor o cuando el enlace está activo */
        }

        /* Estilo inicial del botón */
/* Estilo base para los botones */
#myButton {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 7px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButton.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButton {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButton {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}


#myButtonsano {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 7px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonsano.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonsano {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonsano {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}

#myButtonplanes {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 7px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonplanes.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonplanes {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonplanes {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}

#myButtonnosotros {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 7px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonnosotros.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonnosotros {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonnosotros {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}

#myButtonpqrs {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 7px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonpqrs.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonpqrs {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonpqrs {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}
 
#myButtonanuncios{
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 50px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonanuncios.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonanuncios {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonanuncios {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}

#myButtonpqr {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 50px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonpqr.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonpqr {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonpqr {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}

#myButtonusuarios {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 50px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonusuarios.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonusuarios {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonusuarios {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}

#myButtonlitausuarios {
    background-color: #00a5df; /* El color de fondo del botón */
    color: white; /* El color del texto */
    border-radius: 50px; /* Bordes redondeados */
    border: none;
    font-size: 20px; /* Tamaño de fuente */
    cursor: pointer; /* Cambia el cursor cuando se pasa sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el color de fondo */
    
    /* Sombreado */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de 2px de desplazamiento vertical y 5px de difuminado */
    
    /* Ajuste automático del tamaño del botón al contenido */
    display: inline-flex; /* Utiliza flexbox para centrar el texto y ajustarse al contenido */
    align-items: center; /* Centra verticalmente el texto */
    justify-content: center; /* Centra horizontalmente el texto */
    
    /* Espacio interno */
    padding: 2px 10px; /* Ajusta el espacio alrededor del texto dentro del botón */
    
    /* Espacio alrededor del botón */
    margin: -12px; /* Espacio entre botones */
    margin-top: 1px;
    /* Ajustes adicionales */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del botón */
}

/* Estilo del botón cuando está activo */
#myButtonlitausuarios.active {
    background-color: #c1d241;
}

/* Consultas de medios para pantallas más pequeñas */
@media (max-width: 768px) {
    #myButtonlitausuarios {
        font-size: 18px; /* Reduce el tamaño de la fuente en pantallas más pequeñas */
        padding: 6px 12px; /* Ajusta el padding para pantallas más pequeñas */
        margin: 4px; /* Reduce el margen en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    #myButtonlitausuarios {
        font-size: 16px; /* Reduce aún más el tamaño de la fuente en pantallas muy pequeñas */
        padding: 4px 8px; /* Ajusta aún más el padding */
        margin: 3px; /* Ajusta el margen para pantallas muy pequeñas */
    }
}       
.icons{
    position: relative;
    min-height: 38px;
    min-width: 38px;
    vertical-align: middle;
    padding-top: 10px;
    color: #0896cc;
    font-size: 24px;
}


.iconsnava{
    position: relative;
    min-height: 29px;
    min-width: 29px;
    vertical-align: middle;
    padding-top: 5px;
    color: #0896cc;
    font-size: 19px;
}


.icon-style-cameras {
    position: relative;
    min-height: 29px;
    min-width: 29px;
    vertical-align: middle;
}

.icon-style-cameras > span {
    position: absolute;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    border: 0 solid #00a5df;
    background-color: transparent;
    pointer-events: none;
    transition: height .5s, width .5s, color .08s;
}

.icon-style-cameras > span:nth-child(1) {
    top: 0;
    left: 0;
    border-width: 1px 0 0 1px;
}

.icon-style-cameras > span:nth-child(2) {
    top: 0;
    right: 0;
    border-width: 1px 1px 0 0;
}

.icon-style-cameras > span:nth-child(3) {
    bottom: 0;
    right: 0;
    border-width: 0 1px 1px 0;
}

.icon-style-cameras > span:nth-child(4) {
    bottom: 0;
    left: 0;
    border-width: 0 0 1px 1px;
}

.icon-style-cameras:hover > span {
    border-color: #84c474;
}

.icon-style-cameras:hover > span:nth-child(1) {
    width: 100%;
}

.icon-style-cameras:hover > span:nth-child(2) {
    height: 100%;
}

.icon-style-cameras:hover > span:nth-child(3) {
    width: 100%;
}

.icon-style-cameras:hover > span:nth-child(4) {
    height: 100%;
}

.icon-style-cameras, .icon-style-cameras:active, .icon-style-cameras:focus {
}

.icon-style-cameras:hover {
    color: #84c474;
}

      .dropdown-container {
        display: inline-block;
        position: relative; /* Cambiado de fixed a relative para que se posicione en relación con el contenedor del navbar */
      }

      .dropdown-button {
        background-color: #007BFF;
        color: white;
        border: none;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        z-index: 1000; /* Asegura que el botón esté encima del contenido del dropdown */
      }

      .dropdown-content {
        display: none;
        position: absolute;
        top: 100%; /* Coloca el dropdown justo debajo del botón */
        right: 0; /* Alinea el contenido con el lado derecho del botón */
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        width: 200px;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
      }

      .dropdown-container.show .dropdown-content {
        display: block;
      }

      .nombre_user {
        color: #333;
        font-size: 23px;
      }

      .logout-button {
        background-color: #007BFF;
        color: white;
        border: none;
        padding: 10px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 5px;
        width: 100%; /* Botón ocupa todo el ancho del contenedor */
        box-sizing: border-box;
        margin-top: 10px; /* Espacio superior para separar del texto */
      }

      /* Media queries for responsive design */
      @media (max-width: 300px) {
        .dropdown-container {
          padding: 5px;
          justify-content: center;
        }

        .dropdown-button {
          font-size: 12px;
          padding: 6px 10px;
        }

        .dropdown-content {
          width: 100%;
          position: fixed;
          top: 0;
          right: 0;
          height: 100vh;
          overflow-y: auto;
          padding: 15px;
          box-shadow: none;
          border: none;
          background-color: #f9f9f9;
        }

        .dropdown-container.show .dropdown-content {
          display: block;
        }

        .logout-button {
          font-size: 12px;
          padding: 6px;
        }
      }