.bg-1 {
    background-color: green; /* Cambia el color de fondo a verde */
}

.dot-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Contador de notificaciones */
.notification-icon {
    position: relative;
    display: inline-block;
}

.notification-icon .la-bell {
    font-size: 24px;
    color: black;
}

.notification-count {
    position: absolute;
    top: -10px;  /* Ajusta la posición vertical */
    right: -10px; /* Ajusta la posición horizontal */
    /* background-color: red; */
    color: rgb(239, 14, 14);
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    display: inline-block;
}

.notification-bell {
    color: #000; /* Negro en modo claro */
}

.dark-theme .notification-bell {
    color: #fff; /* Blanco en modo oscuro */
}

/* Por defecto ocultamos el menú para pantallas grandes */
.off-canvas-menu-toggle {
    display: none;
}

/* Mostramos el botón solo cuando la pantalla es pequeña (menor o igual a 768px) */
@media (max-width: 768px) {
    .off-canvas-menu-toggle {
        display: block;
    }
}


/* view/frontend/body/header  */


    /* Estilos generales para el formulario de búsqueda */
.search-form {
    position: relative;
}

.form-group {
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 24px; /* Ajusta el tamaño del ícono */
}

/* Mostrar todo en pantallas grandes */
.search-form input {
    display: block;
    width: 100%;
    padding: 10px 40px 10px 15px;
}

/* Solo mostrar el ícono en pantallas móviles */
@media (max-width: 768px) {
    .search-form input {
        display: none; /* Ocultar el campo de entrada */
    }

    .search-icon {
        font-size: 24px; /* Tamaño del ícono en móviles */
        display: block;
    }
}

/* ////////////para los menus sub menus en dispositivos mobiles /////////////////// */

/* Ocultar submenús por defecto */
ul.sub-menu {
    display: none; /* Ocultar por defecto */
    padding-left: 20px; /* Espacio a la izquierda */
    list-style: none;
    background-color: #fff; /* Color de fondo blanco para los submenús */
    position: relative; /* Posicionamiento relativo al elemento padre */
    z-index: 1;
}

/* Mostrar submenú cuando el elemento padre tiene la clase 'open' */
.menu-item-has-children.open > ul.sub-menu {
    display: block; /* Mostrar el submenú */
}

/* Estilos para los enlaces dentro de los menús */
/* se comento porque afecto a pie de pagina */
/* ul.generic-list-item li a {
    text-decoration: none;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
} */

/* Cambiar color del enlace al hacer hover */
ul.generic-list-item li a:hover {
    color: #007bff;
}

/* Rotar la flecha cuando el submenú está abierto */
.toggle-arrow {
    transition: transform 0.3s ease;
}

.menu-item-has-children.open .toggle-arrow {
    transform: rotate(180deg);
}

/* Añadir un estilo mínimo para evitar que el submenú aparezca fuera del área visible */
.off-canvas-menu {
    overflow-y: auto; /* Permitir que el menú sea desplazable si es necesario */
    max-height: 100vh; /* Evitar que el menú se desborde del viewport */
}
/* /////////// end dispositivos mobiles menus //////////////// */