:root {
    /* Colores corporativos DG - Combinación Blanco/Gris con acentos en ROJO */
    --logo-azul: #ffffff;
    /* White (Fondo principal) */
    --logo-azul-claro: #f3f4f6;
    /* Light Gray (Fondos secundarios) */
    --logo-amarillo: #D32F2F;
    /* Rojo vibrante (Accent principal) */
    --logo-amarillo-oscuro: #B71C1C;
    /* Rojo oscuro (Hover y sombras) */

    --main-c-headtable: var(--logo-azul);
    --main-l-headtable: #000000be;
    /* Texto negro para contrastar con el fondo blanco */

    --main-c-botontable: #f5f7fb;
    --main-l-botontable: #000000;
    /* Texto negro */
    --main-h-botontable: var(--logo-amarillo);
    /* Hover a rojo */
    --main-hl-botontable: #ffffff;
    /* Texto blanco en hover */

    --main-c-botonnormal: var(--logo-azul);
    --main-l-botonnormal: #000000;
    /* Texto negro */
    --main-h-botonnormal: var(--logo-amarillo);
    /* Hover a rojo */
    --main-hl-botonnormal: #ffffff;
    /* Texto blanco en hover */

    --main-c-botonconfirmar: var(--logo-amarillo);
    /* Fondo rojo */
    --main-l-botonconfirmar: #ffffff;
    /* Texto blanco */
    --main-h-botonconfirmar: var(--logo-amarillo-oscuro);
    /* Hover a rojo oscuro */
    --main-hl-botonconfirmar: #ffffff;

    --main-c-resaltar: var(--logo-amarillo);
    /* Fondo rojo */
    --main-l-resaltar: #ffffff;
    /* Texto blanco */

    --main-c-alcabala: var(--logo-azul-claro);
    --main-l-alcabala: #000000;
    /* Texto negro */

    --main-l-dolar: #2E7D32;
    /* Verde más accesible */

    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.05);
    --transition-fast: all 0.2s ease-out;
}

/* --------------------------------
 * CARDS E INFO BOXES
 * -------------------------------- */

.box-1 {
    background-color: #fff0f0 !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid #ffcccc !important;
    box-shadow: var(--shadow-soft);
}

.info-box-1,
.info-box-2,
.info-box-3,
.info-box-4 {
    color: #000000 !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    transition: var(--transition-fast);
}

.info-box-1 {
    background: linear-gradient(135deg, #EF5350, #D32F2F) !important;
    border-color: #B71C1C !important;
    color: #ffffff !important;
}

.info-box-2 {
    /* Fondo cambiado a Negro para mayor contraste */
    background: linear-gradient(135deg, #1b1a1ad0, #00000083) !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    /* Texto blanco sobre negro */
}

.info-box-3 {
    background: linear-gradient(135deg, #ff6666, #cc0000) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
}

.info-box-4 {
    background: linear-gradient(135deg, #B71C1C, #7F0000) !important;
    border-color: #7F0000 !important;
    color: #ffffff !important;
}

.info-box-1:hover,
.info-box-2:hover,
.info-box-3:hover,
.info-box-4:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(204, 0, 0, 0.15);
}

.info-box-icon-1,
.info-box-icon-2,
.info-box-icon-3,
.info-box-icon-4 {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 18px;
    min-width: 64px;
    font-size: 50px;
    color: #ffffff;
    margin-right: -90px;
}

.info-box-icon-1 {
    background: var(--logo-amarillo-oscuro) !important;
    color: #ffffff !important;
}

.info-box-icon-2 {
    /* Icono con fondo negro absoluto y figura roja */
    background: #000000 !important;
    color: var(--logo-amarillo) !important;
}

.info-box-icon-3 {
    background: #990000 !important;
    color: #ffffff !important;
}

.info-box-icon-4 {
    background: var(--logo-amarillo-oscuro) !important;
    color: #ffffff !important;
}

.info-box-10,
.info-box-20,
.info-box-30 {
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-card);
    transition: var(--transition-fast);
}

.info-box-10 {
    background-color: #ffe5e5 !important;
    border-color: rgba(204, 0, 0, 0.2) !important;
}

.info-box-20 {
    background-color: #f4f4f4 !important;
    border-color: #E5E7EB !important;
}

.info-box-30 {
    background-color: var(--logo-azul-claro) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.info-box-10:hover,
.info-box-20:hover,
.info-box-30:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}

.info-box-icon-10,
.info-box-icon-20,
.info-box-icon-30 {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    padding: 10px 14px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.info-box-icon-10 {
    background-color: var(--logo-amarillo) !important;
    color: #ffffff !important;
}

.info-box-icon-20 {
    background-color: var(--logo-azul-claro) !important;
    color: #000000 !important;
}

.info-box-icon-30 {
    background-color: var(--logo-azul) !important;
    color: #000000 !important;
}

.info-box-content-10,
.info-box-content-20,
.info-box-content-30 {
    color: #ffffff !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.info-box-content-10 {
    background-color: var(--logo-amarillo-oscuro) !important;
    color: #ffffff !important;
}

.info-box-content-20 {
    background-color: var(--logo-azul-claro) !important;
    color: #000000 !important;
}

.info-box-content-30 {
    background-color: var(--logo-azul) !important;
    color: #000000 !important;
}

.small-box-1,
.small-box-2,
.small-box-3,
.small-box-4 {
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-shadow: var(--shadow-card);
    transition: var(--transition-fast);
}

.small-box-1 {
    background-color: var(--logo-amarillo) !important;
    color: #ffffff !important;
}

.small-box-2 {
    /* Caja pequeña en Negro puro */
    background-color: #000000 !important;
    color: #ffffff !important;
}

.small-box-3 {
    background-color: var(--logo-azul) !important;
    color: #000000 !important;
}

.small-box-4 {
    background-color: var(--logo-amarillo-oscuro) !important;
    color: #ffffff !important;
}

.small-box-1:hover,
.small-box-2:hover,
.small-box-3:hover,
.small-box-4:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

/* --------------------------------
 * MODALES Y TABLAS
 * -------------------------------- */

.modal-content {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-soft);
    border: none;
}

.modal-header {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    /* Header de modal en negro con borde rojo sutil */
    background-color: #000000;
    color: #ffffff;
    border-bottom: 2px solid #cc0000;
}

.sticky {
    position: sticky;
    left: 0;
}

.table tbody tr .sticky {
    background: #ffffff;
}

.table th .sticky {
    background: var(--main-c-headtable) !important;
    color: var(--main-l-headtable) !important;
}

.table tbody tr:nth-child(2n) .sticky {
    background: #fff5f5;
}

/* --------------------------------
 * SKIN / LAYOUT
 * -------------------------------- */

.skin-blue .main-header .navbar {
    /* Navbar superior cambiada a Negro */
    background-color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.skin-blue .main-header .navbar .nav>li>a {
    color: #000000;
    /* Letras blancas sobre negro */
    transition: var(--transition-fast);
}

.skin-blue .main-header .navbar .nav>li>a:hover,
.skin-blue .main-header .navbar .nav>li>a:active,
.skin-blue .main-header .navbar .nav>li>a:focus,
.skin-blue .main-header .navbar .nav .open>a,
.skin-blue .main-header .navbar .nav .open>a:hover,
.skin-blue .main-header .navbar .nav .open>a:focus {
    background: rgba(255, 255, 255, 0.1);
    /* Overlay sutil */
    color: var(--logo-amarillo);
}

.skin-blue .main-header .navbar .navbar-custom-menu>.nav {
    margin-right: 10px;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: #ffffff;
    /* Ícono hamburguesa blanco */
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    color: var(--logo-amarillo);
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767px) {
    .skin-blue .main-header .navbar .dropdown-menu li.divider {
        background-color: rgba(204, 0, 0, 0.08);
    }

    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #330000;
    }

    .skin-blue .main-header .navbar .dropdown-menu li a:hover {
        background: #ffe6e6;
        color: var(--logo-amarillo);
    }
}

.skin-blue .main-header .logo {
    background: #cc0000;
    color: #ffffff;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin-blue .main-header .logo>a {
    color: #ffffff;
    background-color: transparent;
}

.skin-blue .main-header .logo:hover {
    background: #990000;
}

.skin-blue .main-header li.user-header {
    /* Fondo del perfil del usuario en Negro */
    background: #ffffff;
    color: #000000;
}

.skin-blue .content-header {
    background: transparent;
}

.skin-blue .sidebar-menu>li.header {
    color: #cc0000;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: bold;
}

.skin-blue .sidebar-menu>li>a {
    border-left: 3px solid transparent;
    margin-right: 1px;
    border-radius: 0 999px 999px 0;
    padding: 10px 12px;
    transition: var(--transition-fast);
    color: #333333;
}

/* badges y estados */
.colorPromDias {
    color: #FFFFFF !important;
    background-color: var(--logo-amarillo-oscuro) !important;
    border-radius: 999px !important;
    padding: 3px 10px;
}

.colorVip {
    color: #ffffff !important;
    background-color: #D32F2F !important;
    border-radius: 999px !important;
    padding: 3px 10px;
}

.colorVip2 {
    color: #ffffff !important;
    background: #EF5350 !important;
    border-radius: 999px !important;
    padding: 3px 10px;
}

.skin-blue .sidebar-menu>li>a:hover,
.skin-blue .sidebar-menu>li.active>a {
    color: #ffffff;
    background: linear-gradient(90deg, var(--logo-amarillo) 0%, var(--logo-amarillo-oscuro) 60%);
    border-left-color: #7F0000;
}

.skin-blue .sidebar-menu>li>a:hover {
    width: 230px;
}

/* Fondo del submenú */
.skin-blue .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: linear-gradient(180deg, #fffafa 0%, #fff0f0 100%);
}

.skin-blue .sidebar-menu>li.treeview:hover>a,
.skin-blue .sidebar-menu>li.treeview.menu-open>a,
.skin-blue .sidebar-menu>li.treeview.active>a {
    color: #ffffff !important;
    width: 230px;
    background: linear-gradient(90deg, var(--logo-amarillo) 0%, var(--logo-amarillo-oscuro) 60%) !important;
    border-left: 3px solid #7F0000 !important;
}

/* Enlaces del submenú */
.skin-blue .treeview-menu>li>a {
    color: #333333;
    padding-left: 30px;
    font-size: 13px;
}

/* Hover + activo del submenú */
.skin-blue .treeview-menu>li>a:hover,
.skin-blue .treeview-menu>li.active>a {
    color: var(--logo-amarillo) !important;
    background: rgba(204, 0, 0, 0.08);
}

.title {
    color: #1A1A1A !important;
    background: #ffffff !important;
    border-radius: var(--radius-md);
}

.btnmenuvertical {
    /* Botones del menú vertical en Negro */
    color: #000000 !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    border: 1px solid #ffffff;
    padding: 6px 14px;
    font-size: 12px;
    transition: var(--transition-fast);
}

.btnmenuvertical:hover {
    color: var(--logo-amarillo) !important;
    /* Negro un poco más claro al pasar el mouse */
    background: #1a1a1a !important;
    border-color: #000000;
}

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background: linear-gradient(180deg, #ffffff 0%, #fff0f0 100%);
}

.skin-blue .sidebar a {
    color: #333333;
}

.skin-blue .sidebar a:hover {
    text-decoration: none;
}

.skin-blue .sidebar-form {
    border-radius: 999px;
    border: 1px solid rgba(204, 0, 0, 0.2);
    margin: 10px 10px;
    overflow: hidden;
}

.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
    box-shadow: none;
    background-color: rgba(204, 0, 0, 0.05);
    border: 1px solid transparent;
    height: 35px;
    transition: var(--transition-fast);
}

.skin-blue .sidebar-form input[type="text"] {
    color: #333333;
    border-radius: 999px 0 0 999px !important;
}

.skin-blue .sidebar-form input[type="text"]:focus,
.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
    background-color: #ffffff;
    color: #000000;
}

.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
    border-left-color: var(--logo-amarillo);
}

.skin-blue .sidebar-form .btn {
    color: #333333;
    border-radius: 0 999px 999px 0 !important;
}

.skin-blue.layout-top-nav .main-header>.logo {
    background-color: #cc0000;
    color: #ffffff;
    border-bottom: 0;
}

.skin-blue.layout-top-nav .main-header>.logo>a {
    color: #ffffff;
}

.skin-blue.layout-top-nav .main-header>.logo:hover {
    background: #990000;
}

/* --------------------------------
 * COLORES GENERALES
 * -------------------------------- */

.ColorDolar {
    color: var(--main-l-dolar) !important;
}

.colorTitulo {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.colorResaltado {
    background-color: var(--main-c-resaltar) !important;
    border: var(--main-c-resaltar) solid 1px !important;
    color: var(--main-l-resaltar) !important;
    border-radius: 999px;
    padding: 4px 12px;
}

.colorAlcabala {
    background-color: var(--main-c-alcabala) !important;
    border: var(--main-c-alcabala) solid 1px !important;
    color: var(--main-l-alcabala) !important;
}

/* --------------------------------
 * BOTONES
 * -------------------------------- */

.btn-pedido,
.btn-buscar,
.btn-peqbuscar,
.btn-catalogo,
.btn-catalogoX,
.btn-confirmar,
.btn-normal {
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: var(--transition-fast);
}

.btn-pedido {
    color: var(--main-l-botontable) !important;
    background-color: var(--main-c-botontable);
    border-color: transparent;
    width: 40px;
}

.btn-pedido:hover {
    color: var(--main-hl-botontable) !important;
    background-color: var(--main-h-botontable) !important;
    border-color: var(--main-h-botontable);
    transform: translateY(-1px);
}

.btn-buscar {
    color: var(--main-l-botonnormal) !important;
    background-color: var(--main-c-botonnormal) !important;
    width: 40px;
}

.btn-buscar:hover {
    color: var(--main-hl-botonnormal) !important;
    background-color: var(--main-h-botonnormal) !important;
    border-color: var(--main-h-botonnormal);
    transform: translateY(-1px);
}

.btn-peqbuscar {
    color: var(--main-l-botonnormal) !important;
    background-color: var(--main-c-botonnormal) !important;
    height: 30px;
    width: 40px;
}

.btn-peqbuscar:hover {
    color: var(--main-hl-botonnormal) !important;
    background-color: var(--main-h-botonnormal) !important;
    border-color: var(--main-h-botonnormal);
    transform: translateY(-1px);
}

.btn-catalogo {
    color: var(--main-l-botonnormal) !important;
    background-color: var(--main-c-botonnormal) !important;
    height: 34px;
    width: 95px;
}

.btn-catalogo:hover {
    color: var(--main-hl-botonnormal) !important;
    background-color: var(--main-h-botonnormal) !important;
    border-color: var(--main-h-botonnormal);
    transform: translateY(-1px);
}

.btn-catalogoX {
    color: var(--main-hl-botonnormal) !important;
    background-color: var(--main-h-botonnormal) !important;
    height: 34px;
    width: 95px;
}

.btn-confirmar {
    color: var(--main-l-botonconfirmar) !important;
    background-color: var(--main-c-botonconfirmar) !important;
    width: 95px;
    height: 34px;
}

.btn-confirmar:hover {
    color: var(--main-hl-botonconfirmar) !important;
    background-color: var(--main-h-botonconfirmar) !important;
    border-color: var(--main-h-botonconfirmar);
    transform: translateY(-1px);
}

.btn-normal {
    color: var(--main-l-botonnormal) !important;
    background-color: var(--main-c-botonnormal) !important;
    height: 34px;
    width: 95px;
}

.btn-normal:hover {
    color: var(--main-hl-botonnormal) !important;
    background-color: var(--main-h-botonnormal) !important;
    border-color: var(--main-h-botonnormal);
    transform: translateY(-1px);
}

/* --------------------------------
 * LOGOS
 * -------------------------------- */

.tamLogoMenu {
    width: 60%;
    margin-top: 10px;
    /* Fondo cambiado a Negro puro */
    background-color: #ffffff;
    border-radius: 50%;
}

.tamLogoLogin {
    padding-top: 15px;
    padding-bottom: 15px;
    width: 250px;
}

tbody:before,
tbody:after {
    display: none !important;
}

/* --------------------------------
 * MODAL FULLSCREEN
 * -------------------------------- */

.fullscreen-modal .modal-dialog {
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .fullscreen-modal .modal-dialog {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .fullscreen-modal .modal-dialog {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .fullscreen-modal .modal-dialog {
        width: 1170px;
    }
}

.hide_block {
    display: none !important;
}

.display_block {
    display: block !important;
}

ul.nav-tabs li.active {
    background-color: var(--logo-amarillo);
    color: #ffffff;
}

/*----------------------------*\
  PRODUCT
\*----------------------------*/

.product {
    position: relative;
    margin: 15px 0;
    box-shadow: 0 0 0 1px #ffcccc;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    overflow: hidden;
    transition: var(--transition-fast);
}

.product:hover {
    box-shadow: 0 14px 30px rgba(204, 0, 0, 0.15);
    transform: translateY(-3px);
    border-color: var(--logo-amarillo);
}

.product .product-img {
    position: relative;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    border: none;
    overflow: hidden;
}

.product .product-img>img {
    width: 100%;
    display: block;
    transition: transform 0.25s ease-out;
}

.product:hover .product-img>img {
    transform: scale(1.03);
}

.product .product-img .product-label {
    position: absolute;
    top: 12px;
    right: 12px;
}

.product .product-img .product-label>span {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.product .product-img .product-label>span.sale {
    /* Etiqueta SALE ahora en Negro con letras blancas */
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.product .product-img .product-label>span.new {
    background-color: var(--logo-amarillo);
    border-color: var(--logo-amarillo);
    color: #FFF;
}

.product .product-body {
    position: relative;
    padding: 14px 14px 16px;
    background-color: #fffafa;
    text-align: left;
    z-index: 20;
}

.product .product-body .product-category {
    text-transform: uppercase;
    font-size: 11px;
    color: #cc6666;
    letter-spacing: 0.08em;
}

.product .product-body .product-name {
    text-transform: none;
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.product .product-body .product-name>a {
    font-weight: 600;
    color: #330000;
}

.product .product-body .product-name>a:hover,
.product .product-body .product-name>a:focus {
    color: var(--logo-amarillo);
}

.product .product-body .product-price {
    color: var(--logo-amarillo);
    font-size: 18px;
    font-weight: 700;
}

.product .product-body .product-price .product-old-price {
    font-size: 12px;
    font-weight: 400;
    color: #ff9999;
    text-decoration: line-through;
    margin-left: 6px;
}

.product .product-body .product-rating {
    position: relative;
    margin: 10px 0 6px;
    height: 20px;
}

.product .product-body .product-rating>i {
    position: relative;
    width: 14px;
    margin-right: -4px;
    background: transparent;
    color: #ffe6e6;
    z-index: 10;
}

.product .product-body .product-rating>i.fa-star {
    color: var(--logo-amarillo);
}

.product .product-body .product-rating:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 1px;
    background-color: #ffe6e6;
}

.product .product-body .product-btns>button {
    position: relative;
    width: 36px;
    height: 36px;
    line-height: 36px;
    background: transparent;
    border: none;
    border-radius: 999px;
    transition: var(--transition-fast);
}

.product .product-body .product-btns>button:hover {
    /* Al hacer hover en botones del producto cambian a Negro */
    background-color: #000000;
    color: #ffffff;
}

.product .product-body .product-btns>button .tooltipp {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -15px);
    width: 150px;
    padding: 8px;
    font-size: 11px;
    line-height: 10px;
    background: var(--logo-amarillo);
    color: #FFF;
    text-transform: uppercase;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    border-radius: 999px;
}

.product .product-body .product-btns>button:hover .tooltipp {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -5px);
}

.product .add-to-cart {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    padding: 12px 15px;
    background: #fffafa;
    text-align: center;
    transform: translateY(0%);
    transition: var(--transition-fast);
    z-index: 2;
    border-top: 1px solid #ffcccc;
}

.product:hover .add-to-cart {
    transform: translateY(100%);
}

.product .add-to-cart .add-to-cart-btn {
    position: relative;
    border: 2px solid transparent;
    height: 40px;
    padding: 0 30px;
    background-color: var(--logo-amarillo);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    transition: var(--transition-fast);
}

.product .add-to-cart .add-to-cart-btn>i {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 38px;
    color: #ffffff;
    opacity: 0;
    visibility: hidden;
}

.product .add-to-cart .add-to-cart-btn:hover {
    /* Botón principal del carrito a Negro en el Hover */
    background-color: #000000;
    color: var(--logo-amarillo);
    border-color: #000000;
    padding: 0 30px 0 50px;
}

.product .add-to-cart .add-to-cart-btn:hover>i {
    opacity: 1;
    visibility: visible;
    color: var(--logo-amarillo);
}

/*----------------------------*\
  PRODUCT WIDGET
\*----------------------------*/

.product-widget {
    position: relative;
}

.product-widget+.product-widget {
    margin: 30px 0;
}

.product-widget .product-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
}

.product-widget .product-img>img {
    width: 100%;
}

.product-widget .product-body {
    padding-left: 75px;
    min-height: 60px;
}

.product-widget .product-body .product-category {
    text-transform: uppercase;
    font-size: 10px;
    color: #cc6666;
}

.product-widget .product-body .product-name {
    text-transform: none;
    font-size: 12px;
}

.product-widget .product-body .product-name>a {
    font-weight: 600;
    color: #330000;
}

.product-widget .product-body .product-name>a:hover,
.product-widget .product-body .product-name>a:focus {
    color: var(--logo-amarillo);
}

.product-widget .product-body .product-price {
    font-size: 14px;
    color: var(--logo-amarillo);
}

.product-widget .product-body .product-price .product-old-price {
    font-size: 70%;
    font-weight: 400;
    color: #ff9999;
}

.product-widget .product-body .product-price .qty {
    font-weight: 400;
    margin-right: 10px;
}

.product-widget .delete {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    text-align: center;
    font-size: 10px;
    padding: 0;
    background: var(--logo-amarillo);
    border: none;
    color: #FFF;
}

/*----------------------------*\
  PRODUCTS SLICK
\*----------------------------*/

.products-slick .slick-list {
    padding-bottom: 60px;
    margin-bottom: -60px;
    z-index: 2;
}

.products-slick .product.slick-slide {
    margin: 15px;
}

.products-tabs>.tab-pane {
    display: block;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: hidden;
    padding-bottom: 60px;
    margin-bottom: -60px;
}

.products-tabs>.tab-pane.active {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.products-slick-nav {
    position: absolute;
    right: 15px;
    z-index: 10;
}

.products-slick-nav .slick-prev,
.products-slick-nav .slick-next {
    position: static;
    transform: none;
    display: inline-block !important;
    margin: 0 10px;
}

.products-slick-nav .slick-prev:before,
.products-slick-nav .slick-next:before {
    font-size: 14px;
}

/* efecto blink */
blink {
    -webkit-animation: 2s linear infinite condemned_blink_effect;
    animation: 2s linear infinite condemned_blink_effect;
}

@-webkit-keyframes condemned_blink_effect {
    0% {
        visibility: hidden;
    }

    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

@keyframes condemned_blink_effect {
    0% {
        visibility: hidden;
    }

    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

/*=========================================================
  07 -> PRODUCTS PAGE
===========================================================*/

.filter-sidebar {
    position: sticky;
    top: 10px;
}

.filter-group {
    margin-bottom: 15px;
}

.filter-title {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.sidebar-hidden {
    display: none;
}

.dropdown-menu>li>a {
    padding: 6px 15px;
}

.dropdown-menu>li>a .fa {
    margin-right: 6px;
}

#btnExportExcel.disabled {
    pointer-events: none;
    opacity: 0.7;
}