/* Estilo del menú desplegable */
.right-side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #1A251A; /* Fondo del panel */
    overflow-y: auto; /* Permite el desplazamiento vertical si es necesario */
    padding-top: 60px;
    transform: translateX(100%); /* Inicialmente fuera de la vista */
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.5s ease; /* Transición de opacidad */
    z-index: 1001; /* Asegura que el menú esté sobre otros elementos */
}

/* Animación para el menú deslizándose y apareciendo */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animación para el menú deslizándose y desapareciendo */
@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Mostrar el menú cuando está activo */
.right-side-menu.open {
    animation: slideIn 0.5s forwards; /* Aplica la animación de entrada */
}

/* Ocultar el menú cuando está cerrado */
.right-side-menu.close {
    animation: slideOut 0.5s forwards; /* Aplica la animación de salida */
}

/* Estilo del botón de cerrar */
.close-menu-button {
    position: absolute;
    top: 20px;
    left: 20px; /* Ajusta la posición para que esté más centrado */
    background: #f1f1f1; /* Fondo gris claro para el botón de cerrar */
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%; /* Hace el botón redondo */
}

.close-menu-button img {
    width: 30px; /* Tamaño del icono */
    height: 30px;
}

/* Estilo de los enlaces del menú desplegable */
.right-side-menu a {
    padding: 15px 20px; /* Aumenta el espaciado para mayor comodidad */
    text-decoration: none;
    font-size: 18px; /* Ajusta el tamaño de la fuente */
    color: #ffffff; /* Color blanco para el texto */
    display: block;
    background-color: #00594d; /* Fondo verde oscuro para los cuadros */
    border-bottom: 1px solid #fff; /* Línea divisoria verde claro */
    transition: background-color 0.3s;
}

/* Estilo del enlace al pasar el mouse */
.right-side-menu a:hover {
    background-color: #003731; /* Fondo verde intermedio al pasar el mouse */
}

/* Estilo de los botones del menú */
.icon-button {
    width: 30px; /* Tamaño del botón */
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

/* Estilo del overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    display: none; /* Inicialmente oculto */
    z-index: 1000; /* Debe estar debajo del menú */
}

/* Hacer visible el overlay */
.overlay.show {
    display: block;
}