: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: #dfb3d2;
    --secondary-color: #864192;
    --tertiary-color: white;
    --font-base: 16px;
    --font-primary-color: gray;
    --loading-desde-color: #dfb3d2;
    --loading-hasta-color: #dfb3d2;
}
 
 
body {
}
 
/*Index*/
#Index .BloqueComponente {
    gap: 40px;
}
/*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 button.form-group {
    color: #fff;
    background-color: #dfb3d2;
}
 
    #LoginWEB button.form-group:hover {
        background-color: darkgoldenrod;
    }
 
#LoginWEB .logo .Imagen {
    height: 80px;
    max-width:95vw;
}
/*Nav-MenuTop_BB*/
 
#Nav-MenuTop_BB .nav-superior {
    background-color: #dfb3d2;
}
 
#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-MenuTop_BB .search-bar-button {
    background-color: white;
    color: #864192;
}
 
 
/*Nav-MenuTopM_BB*/
#Nav-MenuTopM_BB .nav-superior {
    background-color: #dfb3d2;
}
 
#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 .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 .perfil-menu {
    background-color: white;
}
 
/*MegaMenu*/
#MegaMenu .MegaMenu-container {
    background: #fff;
}
 
#MegaMenu
/*NavMenuCategoriasButtom_BB*/
#NavMenuCategoriasButtom_BB .logo {
    width: 40px;
}
 
 
/*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 .marca {
    font-size: 10px;
    color: #666;
}
 
#CTarjetaISimple_STD .precio {
    font-size: 14px;
    color: blue;
    font-weight: 600;
}
 
 
/*CTarjetaISimple_DREAM*/
 
#CTarjetaISimple_DREAM .tarjeta {
    background-color: white;
    width: 100%;
    height: 300px;
}
 
#CTarjetaISimple_DREAM .imagen {
    width: 100%;
    height: auto;
}
 
#CTarjetaISimple_DREAM .etiqueta-nuevo {
    background-color: #efff5e;
}
 
#CTarjetaISimple_DREAM .nombre-modelo {
}
 
#CTarjetaISimple_DREAM .info {
    background-color: white;
}
 
#CTarjetaISimple_DREAM .marca {
    font-size: 10px;
    color: #666;
}
 
#CTarjetaISimple_DREAM .precio {
    font-size: 14px;
    color: blue;
    font-weight: 600;
}
 
/*MenuRectangulos_BB*/
#MenuRectangulos_BB .texto-superpuesto {
    text-shadow: 1px 1px 4px var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
    color: #000000;
}
 
/*NavMenuCategoriasComponent*/
#NavMenuCategoriasComponent .logo img {
    height: 50px;
}
 
#NavMenuCategoriasComponent .menu-nav .menu-container .logo {
    padding-block: 5px;
}