:root {
    --font-base: 16px;
    --font-title: 24px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --text-NavMenu: #FFFFFF;
    --text-sub-NavMenu: #FFFFFF;
    --bg-NavMenu: #000000;
    --font-family: 'Quicksand', 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --letter-spacing: 1.5px;
    --primary-color: #44AF92;
    --secondary-color: white;
    --tertiary-color: brown;
    --font-base: 16px;
    --font-primary-color: #44AF92;
    --loading-desde-color: #9fedd4;
    --loading-hasta-color: #23A455;
    --AnchoAlerta: 90%;
}


body {
}

#Index .BloqueComponente {
    gap: 80px;
}

/*LoginWEB*/
#LoginWEB .forgot-password-btn {
    background: none;
    color: #007bff;
}

    #LoginWEB .forgot-password-btn:hover {
        color: #0056b3;
    }

#LoginWEB .login-container {
    background: #f8f9fa;
}

#LoginWEB .register-link {
    color: #007bff;
}

    #LoginWEB .register-link:hover {
        /* El color se mantiene, solo cambia el subrayado */
    }

#LoginWEB .texto-terminos {
    /* Solo tiene font-size y text-align, no aplica color o background */
}

#LoginWEB .login-container {
    background: #f8f9fa;
}

#LoginWEB .logo .Imagen {
    height: 80px;
}

#LoginWEB button.form-group {
    color: #fff;
    background-color: var(--primary-color);
}

    #LoginWEB button.form-group:hover {
        background-color: darkgoldenrod;
    }
/*Nav-MenuTop_BB*/

#Nav-MenuTop_BB .nav-superior {
    background-color: var(--primary-color);
}

#Nav-MenuTop_BB .logo img {
    height: 40px; /*Altura del logo*/
}

#Nav-MenuTop_BB .icon-usuario-activo {
    color: limegreen;
}

#Nav-MenuTop_BB .user-icon {
    color: #fff;
}

#Nav-MenuTop_BB .user-name {
    color: white;
}

#Nav-MenuTop_BB .nav-submenu-user {
    background: #fff;
}

/* ✅ Estilos del submenú */
#Nav-MenuTop_BB .nav-submenu-user {
    background: #fff;
}

    #Nav-MenuTop_BB .nav-submenu-user li:hover {
        background: #f0f0f0;
    }

    #Nav-MenuTop_BB .nav-submenu-user li a {
        color: #333;
    }

        #Nav-MenuTop_BB .nav-submenu-user li a:hover {
            background: #f0f0f0;
        }



/*Nav-MenuTopM_BB*/

#Nav-MenuTopM_BB .nav-superior {
    background-color: var(--primary-color);
}

#Nav-MenuTopM_BB .logo img {
    height: 40px; /*Altura del logo*/
}

#Nav-MenuTopM_BB .icon-usuario-activo {
    color: limegreen;
}

#Nav-MenuTopM_BB .user-icon {
    color: #fff;
}
#Nav-MenuTopM_BB .icon-usuario-activo {
    color: limegreen;
}

#Nav-MenuTopM_BB .user-name {
    color: white;
}

#Nav-MenuTopM_BB .nav-submenu-user {
    background: #fff;
}

/* ✅ Estilos del submenú */
#Nav-MenuTopM_BB .nav-submenu-user {
    background: #fff;
}

    #Nav-MenuTopM_BB .nav-submenu-user li:hover {
        background: #f0f0f0;
    }

    #Nav-MenuTopM_BB .nav-submenu-user li a {
        color: #333;
    }

        #Nav-MenuTopM_BB .nav-submenu-user li a:hover {
            background: #f0f0f0;
        }

#Nav-MenuTopM_BB .movil-search-bar-icons {
    background-color: white;
}

#Nav-MenuTopM_BB .perfil-menu {
    background-color: white;
}

/*MegaMenu*/

#MegaMenu {
    background-color: #016367;
}

#MegaMenu .MegaMenu-container {
    background-color: #016367;
}

#MegaMenu .menu li > a {
    color: #9FEDD4;
}

#MegaMenu .menu li:hover > a {
    background-color: #9FEDD4;
    color: #016367;
}

#MegaMenu .submenu {
    background: var(--primary-color);
    font-size: 0.90rem;
}

    #MegaMenu .submenu li > a {
        color: #9FEDD4;
        background: #44AF92;
    }

    #MegaMenu .submenu li:hover > a {
        background: ##9FEDD4;
    }

/*NavMenuCategoriasButtom_BB*/
#NavMenuCategoriasButtom_BB .logo {
}


/*CTarjetaISimple_STD*/
#CTarjetaISimple_STD .tarjeta {
    background-color: white;
    width: 100%;
    height: 100%;
}

#CTarjetaISimple_STD .imagen {
    width: 100%;
    height: auto;
}

#CTarjetaISimple_STD .etiqueta-nuevo {
    background-color: #efff5e;
}

#CTarjetaISimple_STD .nombre-modelo {
}

    #CTarjetaISimple_STD .nombre-modelo span {
        color: black;
    }

#CTarjetaISimple_STD .marca {
    font-size: 10px;
    color: #666;
}

#CTarjetaISimple_STD .precio {
    font-size: 14px;
    color: blue;
    font-weight: 600;
}

/*MenuRectangulos_BB*/
#MenuRectangulos_BB .texto-superpuesto {
    text-shadow: 1px 1px 4px darkgreen;
    font-weight: bold;
    font-size: 1.2rem;
    color: #000000;
}

/*NavMenuCategoriasComponent*/
#NavMenuCategoriasComponent .logo img {
    height: 50px;
}