/* =====================================================================
   Skin de la tienda: paleta Naranja + Negro (aprobado para TODO el
   frontend el 2026-08-29; antes era una demo solo para la home).

   Se activa poniendo la clase "orange-black-demo" en #wrapper de forma
   permanente (ver themes/default/shop/views/header.php), reemplazando
   al antiguo skin "blue". El panel admin NO usa este skin.

   Sigue el mismo patrón de selectores que ya usa el theme para sus
   skins (.blue, .orange, .black, etc. en
   themes/default/shop/assets/sass/_color.scss), solo que combinando
   negro para las barras de navegación y el naranja de marca (el mismo
   que ya usan el sidebar del carrito y la landing) para los acentos.

   El nombre de la clase conserva el sufijo "-demo" solo para no tener
   que renombrar el archivo y todos los selectores; ya no es una demo.
   ===================================================================== */

#wrapper.orange-black-demo,
#wrapper.orange-black-demo .theme {
    background-color: #F97316 !important;
}

/* Botones "tema" (ej. flechas del carrusel) */
#wrapper.orange-black-demo .btn-theme {
    color: #fff;
    background-color: #F97316;
    border-color: #EA580C;
}
#wrapper.orange-black-demo .btn-theme:focus,
#wrapper.orange-black-demo .btn-theme:hover,
#wrapper.orange-black-demo .btn-theme:active:hover {
    color: #fff;
    background-color: #EA580C;
    border-color: #C2410C;
}
#wrapper.orange-black-demo .btn-theme:active {
    background-image: none;
}
#wrapper.orange-black-demo .btn-theme .badge {
    color: #F97316;
    background-color: #fff;
}

#wrapper.orange-black-demo a {
    color: #F97316;
}
#wrapper.orange-black-demo a:hover,
#wrapper.orange-black-demo a:focus,
#wrapper.orange-black-demo a:active {
    color: #C2410C;
}
#wrapper.orange-black-demo a.btn-primary,
#wrapper.orange-black-demo a.btn-info,
#wrapper.orange-black-demo a.btn-danger {
    color: #fff !important;
}

/* Botones .btn-primary / .btn-info de Bootstrap (checkout, "Realizar
   compra", "Seguir comprando", login, direcciones, buscar…): el skin
   azul los dejaba en #2196f3 / #00bcd4. Se llevan a la paleta naranja,
   igual que .btn-theme. NOTA: .add-to-wishlist también es .btn-info y
   comparte especificidad con esto — su regla propia va más abajo en el
   archivo, así que gana y el corazón sigue en negro. */
#wrapper.orange-black-demo .btn-primary,
#wrapper.orange-black-demo .btn-info {
    color: #fff;
    background-color: #F97316;
    border-color: #EA580C;
}
#wrapper.orange-black-demo .btn-primary:hover,
#wrapper.orange-black-demo .btn-primary:focus,
#wrapper.orange-black-demo .btn-primary:active,
#wrapper.orange-black-demo .btn-primary.active,
#wrapper.orange-black-demo .btn-info:hover,
#wrapper.orange-black-demo .btn-info:focus,
#wrapper.orange-black-demo .btn-info:active,
#wrapper.orange-black-demo .btn-info.active,
#wrapper.orange-black-demo .open > .btn-primary.dropdown-toggle,
#wrapper.orange-black-demo .open > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #EA580C;
    border-color: #C2410C;
}
#wrapper.orange-black-demo .btn-primary .badge,
#wrapper.orange-black-demo .btn-info .badge {
    color: #F97316;
    background-color: #fff;
}

#wrapper.orange-black-demo .form-control:focus {
    border-color: #F97316;
}

/* Página de login / registro: el botón "Iniciar sesión" venía en verde
   (.btn-success de Bootstrap). Ahora usa .btn-primary (naranja). Además
   se redondean inputs y botones del formulario y se pasan a la paleta
   los enlaces que quedaban en celeste (.text-blue). */
#wrapper.orange-black-demo .auth-page .form-control {
    border-radius: 8px;
}
#wrapper.orange-black-demo .auth-page .btn,
#wrapper.orange-black-demo .auth-page .input-group-addon {
    border-radius: 8px;
}
#wrapper.orange-black-demo .auth-page .input-group .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#wrapper.orange-black-demo .auth-page .input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#wrapper.orange-black-demo .auth-page .text-blue {
    color: #C2410C;
}
#wrapper.orange-black-demo .auth-page .text-blue:hover,
#wrapper.orange-black-demo .auth-page .text-blue:focus {
    color: #F97316;
}
#wrapper.orange-black-demo input[type=radio]:checked + span::before,
#wrapper.orange-black-demo input[type=checkbox]:checked + span::before {
    color: #F97316;
}
#wrapper.orange-black-demo .bootstrap-select .dropdown-toggle:focus,
#wrapper.orange-black-demo .bootstrap-select.open .dropdown-toggle,
#wrapper.orange-black-demo .bootstrap-select.open .dropdown-toggle:hover {
    border-color: #F97316;
}
/* Aviso informativo (ej. banner "Disfruta de grandes descuentos…"):
   Bootstrap lo deja en celeste; se pasa a un tono cálido de la paleta. */
#wrapper.orange-black-demo .alert-info {
    background-color: #FFF7ED;
    border-color: #FED7AA;
    color: #9A3412;
}
#wrapper.orange-black-demo .alert-info a {
    color: #C2410C;
}
#wrapper.orange-black-demo .title {
    border-bottom: 3px solid #EA580C;
}
#wrapper.orange-black-demo .title span {
    border-bottom: 3px solid #EA580C;
}
#wrapper.orange-black-demo .img-thumbnail:hover {
    border-color: #F97316;
}

/* ---------------------------------------------------------------
   Header fijo al hacer scroll (barra superior + navbar con el logo),
   en desktop y mobile. `sticky` en vez de `fixed`: no hay que compensar
   con padding en el body ni sacar el header del flujo. z-index 1030:
   por encima del contenido de la página, pero por debajo de overlays,
   modales y paneles laterales (carrito y drawer van en 1050, sus
   overlays en 1040) para que esos sigan tapándolo al abrirse.
   El header es hijo directo de #wrapper y ni #wrapper/body/html
   recortan overflow, así que sticky se pega al scroll del documento.
   --------------------------------------------------------------- */
#wrapper.orange-black-demo > header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* ---------------------------------------------------------------
   Barra superior + navbar: fondo negro, texto claro, acentos naranja
   --------------------------------------------------------------- */

/* Barra superior en naranja sólido con texto negro, para que contraste
   con el navbar principal (negro, #14110d) en vez de repetir su tono */
#wrapper.orange-black-demo .top-header {
    background-color: #F97316;
}
#wrapper.orange-black-demo .top-header ul.list-inline > li > a {
    color: #fff;
    text-shadow: none;
}
#wrapper.orange-black-demo .top-header ul.list-inline > li > a:hover,
#wrapper.orange-black-demo .top-header ul.list-inline > li:hover {
    background-color: #EA580C;
    color: #fff;
}
#wrapper.orange-black-demo .top-header ul.list-inline > li .dropdown.open > .dropdown-toggle {
    background-color: #EA580C;
    color: #fff;
}

#wrapper.orange-black-demo .main-header .btn-search {
    background-color: #F97316;
    border-color: transparent;
    color: #fff;
}
#wrapper.orange-black-demo .main-header .btn-search:focus {
    background-color: #EA580C;
    border-color: transparent;
    color: #fff;
    outline: 0;
}
#wrapper.orange-black-demo .main-header .cart-btn > button:hover {
    border-color: #F97316;
}
#wrapper.orange-black-demo .main-header .cart-btn.open > button {
    border-color: #F97316 !important;
}

#wrapper.orange-black-demo .navbar-default {
    background-color: #14110d;
    border-color: #14110d;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* ---- Logo / menú / iconos en una sola fila ordenada (solo escritorio;
   en mobile sigue mandando el drawer ya construido en shop.css) ---- */
@media (min-width: 768px) {
    #wrapper.orange-black-demo .navbar-default {
        padding: 0;
    }
    #wrapper.orange-black-demo .navbar-default .container {
        display: flex;
        align-items: center;
    }
    #wrapper.orange-black-demo .navbar-header {
        float: none;
    }
    #wrapper.orange-black-demo .navbar-brand {
        display: flex;
        align-items: center;
        height: auto;
        padding: 8px 15px 8px 0;
    }
    #wrapper.orange-black-demo .navbar-brand img {
        max-height: 44px;
        width: auto;
    }
    #wrapper.orange-black-demo .navbar-collapse {
        display: flex !important;
        align-items: center;
        flex: 1;
    }
    /* Grupo de enlaces (Inicio, Productos, Categorías, Marcas, Carrito...) */
    #wrapper.orange-black-demo .navbar-collapse > .navbar-nav:first-of-type {
        display: flex;
        align-items: center;
        float: none;
        margin: 0 0 0 20px;
        gap: 4px;
    }
    /* Grupo de iconos (buscar, carrito, cuenta), separado a la derecha */
    #wrapper.orange-black-demo .navbar-collapse > .navbar-nav.navbar-right {
        display: flex;
        align-items: center;
        float: none;
        margin: 0 0 0 auto !important;
        padding-left: 20px;
        border-left: 1px solid #2a221b;
        gap: 12px;
    }
    #wrapper.orange-black-demo .navbar-collapse > .navbar-nav.navbar-right > li {
        margin: 0 !important;
    }
}

#wrapper.orange-black-demo .navbar .navbar-nav > li > a {
    color: #f2ece7;
    padding: 10px 18px;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}
#wrapper.orange-black-demo .navbar .navbar-nav > li > a:hover,
#wrapper.orange-black-demo .navbar .navbar-nav > li > a:focus,
#wrapper.orange-black-demo .navbar .navbar-nav > li.dropdown.open > a {
    background-color: rgba(249, 115, 22, .15) !important;
    color: #F97316 !important;
}
/* Menú activo: fondo naranja sólido y texto blanco en negrita */
#wrapper.orange-black-demo .navbar .navbar-nav > li.active > a,
#wrapper.orange-black-demo .navbar .navbar-nav > li.active > a:hover,
#wrapper.orange-black-demo .navbar .navbar-nav > li.active > a:focus {
    background-color: #F97316 !important;
    color: #fff !important;
    font-weight: 700;
}
#wrapper.orange-black-demo .navbar .navbar-toggle {
    background-color: transparent;
    border: 1px solid #3a322a;
}
#wrapper.orange-black-demo .navbar .navbar-toggle:hover {
    border-color: #F97316;
}
#wrapper.orange-black-demo .navbar .navbar-toggle .icon-bar {
    background-color: #f2ece7;
}
/* Iconos del navbar-header en MOBILE (buscar / carrito / cuenta).
   shop.css los deja en gris pizarra (#4b5563) con hover azul del skin
   viejo; se igualan al desktop: buscar y cuenta en oscuro con hover
   naranja, y el carrito en naranja sólido (como el .btn-theme de
   escritorio). Todos llevan .btn-circle-xs. */
#wrapper.orange-black-demo .navbar .btn-circle-xs {
    background-color: #2a2927;
    border: 1px solid #3a322a;
    color: #f2ece7;
}
#wrapper.orange-black-demo .navbar .btn-circle-xs:hover,
#wrapper.orange-black-demo .navbar .btn-circle-xs:focus {
    background-color: #F97316;
    border-color: #F97316;
    color: #fff;
}
#wrapper.orange-black-demo .navbar .btn-circle-xs.btn-cart-xs {
    background-color: #F97316;
    border-color: #EA580C;
    color: #fff;
}
#wrapper.orange-black-demo .navbar .btn-circle-xs.btn-cart-xs:hover,
#wrapper.orange-black-demo .navbar .btn-circle-xs.btn-cart-xs:focus {
    background-color: #EA580C;
    border-color: #C2410C;
    color: #fff;
}

/* Botones circulares de la zona de iconos: buscar / carrito / cuenta */
#wrapper.orange-black-demo .navbar-nav.navbar-right .btn-default.btn-circle {
    background-color: #2a2927;
    border: 1px solid #3a322a;
    color: #f2ece7;
}
#wrapper.orange-black-demo .navbar-nav.navbar-right .btn-default.btn-circle:hover,
#wrapper.orange-black-demo .navbar-nav.navbar-right .btn-default.btn-circle:focus {
    background-color: #F97316;
    border-color: #F97316;
    color: #fff;
}
/* Badge con el número de items del carrito. Bootstrap lo pinta con
   .label-primary azul (#2196f3); en desktop ya se corregía, pero el
   botón de carrito en mobile (dentro de .navbar-header) se quedaba
   azul. Se cubre en cualquier posición: blanco con número naranja
   sobre el botón naranja del carrito. */
#wrapper.orange-black-demo .cart-total-items-number.label-primary,
#wrapper.orange-black-demo .cart-total-items-number {
    background-color: #fff;
    color: #C2410C;
}
/* Resto de .label-primary sueltos → naranja de marca en vez de azul. */
#wrapper.orange-black-demo .label-primary {
    background-color: #F97316;
}

/* Menús desplegables de Categorías / Marcas (desktop) */
#wrapper.orange-black-demo .navbar .dropdown-menu {
    background-color: #1c1712;
    border: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
#wrapper.orange-black-demo .navbar .dropdown-menu > li > a {
    color: #e9e2da;
}
#wrapper.orange-black-demo .navbar .dropdown-menu > li > a:hover,
#wrapper.orange-black-demo .navbar .dropdown-menu > li > a:focus {
    background-color: #2a221b;
    color: #F97316;
}
#wrapper.orange-black-demo .navbar .dropdown-menu .divider {
    background-color: #332b23;
}
#wrapper.orange-black-demo .navbar .dropdown-menu-content ul {
    border-right-color: rgba(255, 255, 255, .08);
}

#wrapper.orange-black-demo .breadcrumb-container .breadcrumb > li > a {
    color: #F97316;
}

/* ---------------------------------------------------------------
   Productos destacados (home)
   --------------------------------------------------------------- */

#wrapper.orange-black-demo .featured-products .product .btn:hover,
#wrapper.orange-black-demo .featured-products .product .stats-container .product_price {
    color: #F97316 !important;
}
#wrapper.orange-black-demo .featured-products .product .image_overlay {
    background: #14110d !important;
}

/* Paginación (/shop/products, pedidos, cotizaciones, descargas): el theme
   base la deja pegada, cuadrada y chica. Se agranda un poco y cada ítem
   pasa a ser una "tecla" redondeada con separación, en línea con el resto
   del rebrand (inputs y botones redondeados). */
#wrapper.orange-black-demo .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
#wrapper.orange-black-demo .pagination > li {
    display: inline-flex;
}
#wrapper.orange-black-demo .pagination > li > a,
#wrapper.orange-black-demo .pagination > li > span {
    float: none;
    margin: 0;
    min-width: 40px;
    height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e0da;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1;
    color: #14110d;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#wrapper.orange-black-demo .pagination > li > a:hover,
#wrapper.orange-black-demo .pagination > li > a:focus {
    background-color: #FFEDD5;
    border-color: #FDBA8C;
    color: #C2410C;
}
#wrapper.orange-black-demo .pagination > .disabled > a,
#wrapper.orange-black-demo .pagination > .disabled > span {
    opacity: .45;
}

#wrapper.orange-black-demo .pagination > .active > a,
#wrapper.orange-black-demo .pagination > .active > a:focus,
#wrapper.orange-black-demo .pagination > .active > span {
    background-color: #F97316;
    border-color: #F97316;
    /* el color de enlace del theme (naranja) hacía el número invisible sobre
       el fondo naranja de la página activa */
    color: #fff;
}
#wrapper.orange-black-demo .pagination > .active > a:hover,
#wrapper.orange-black-demo .pagination > .active > span:hover {
    background-color: #EA580C;
    border-color: #EA580C;
    color: #fff;
}

/* Flechas del carrusel de destacados */
#wrapper.orange-black-demo .controls .btn-default {
    background-color: #14110d;
    border-color: #14110d;
    color: #fff;
}
#wrapper.orange-black-demo .controls .btn-default:hover {
    background-color: #F97316;
    border-color: #F97316;
    color: #fff;
}

/* Slider principal: indicadores */
#wrapper.orange-black-demo .carousel-indicators li {
    border-color: #F97316;
}
#wrapper.orange-black-demo .carousel-indicators .active {
    background-color: #F97316;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

/* Un escalón más claro que el navbar (#14110d) para no repetir el
   mismo negro arriba y abajo; footer-bottom vuelve al negro del
   navbar para "cerrar" la página con el mismo tono más oscuro. */
#wrapper.orange-black-demo .footer {
    background-color: #1c1712;
}
#wrapper.orange-black-demo .footer .footer-bottom {
    background-color: #14110d;
}

#wrapper.orange-black-demo .footer a {
    color: #F97316;
}
#wrapper.orange-black-demo .footer a:hover {
    color: #EA580C;
}
/* Íconos de redes con fondo circular negro más claro (se diferencia
   del fondo del footer) y blanco por defecto, para que combinen con
   el ícono de TikTok (imagen blanca fija, sin texto que recolorear);
   al pasar el mouse se llenan de naranja. */
#wrapper.orange-black-demo .footer .follow-us li a {
    background-color: #2a2927;
    color: #fff;
    margin-right: 6px;
}
#wrapper.orange-black-demo .footer .follow-us li a:hover {
    background-color: #F97316;
    color: #fff;
}
#wrapper.orange-black-demo .title-footer {
    border-bottom-color: rgba(249, 115, 22, .35);
}

/* ---------------------------------------------------------------
   Flechas de "Productos destacados" (junto al título)
   --------------------------------------------------------------- */
#wrapper.orange-black-demo .home-featured-nav {
    background-color: #14110d;
    border-color: #14110d;
    color: #fff;
}
#wrapper.orange-black-demo .home-featured-nav:hover {
    background-color: #F97316;
    border-color: #F97316;
    color: #fff;
}
#wrapper.orange-black-demo .home-featured-nav[disabled] {
    opacity: .25;
}

/* Cuadros de colecciones del home: placeholder oscuro mientras carga la
   imagen, y sombra naranja al hover para combinar con la paleta. */
#wrapper.orange-black-demo .home-collection {
    background: #1c1712;
}
#wrapper.orange-black-demo .home-collection:hover {
    box-shadow: 0 8px 20px rgba(249, 115, 22, .25);
}

/* ---------------------------------------------------------------
   Tarjeta de producto (gen_html): el precio usa .text-primary y el
   botón de wishlist usa .btn-info, ambos clases genéricas de Bootstrap
   en azul por defecto — se recolorean a la paleta naranja/negro.
   --------------------------------------------------------------- */
#wrapper.orange-black-demo .price-products .text-primary.price {
    color: #EA580C;
}
#wrapper.orange-black-demo .discount-badge {
    background-color: #14110d;
}
#wrapper.orange-black-demo .caption-badge {
    color: #14110d;
}
/* Botón de favoritos: fondo negro de marca y corazón en línea blanca
   (el icono es .fa-heart-o, sólo contorno), para que resalte junto al
   naranja del botón "Añadir" en vez de perderse en blanco/gris. */
#wrapper.orange-black-demo .add-to-wishlist {
    background-color: #14110d;
    border: 1px solid #14110d;
    color: #fff;
}
#wrapper.orange-black-demo .add-to-wishlist:hover,
#wrapper.orange-black-demo .add-to-wishlist:focus {
    background-color: #F97316;
    border-color: #F97316;
    color: #fff;
}
#wrapper.orange-black-demo .pretty-check input:checked + .checkmark {
    background: #F97316;
    border-color: #F97316;
}
#wrapper.orange-black-demo .quantity-input:focus,
#wrapper.orange-black-demo .select-redondo:focus {
    border-color: #F97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, .3);
}

/* ---------------------------------------------------------------
   page/contact: botón "ENVIAR CORREO" + modal de contacto (SweetAlert2)
   --------------------------------------------------------------- */

/* El botón que abre el modal (ya es .btn-primary => naranja): solo
   redondear los bordes. */
#wrapper.orange-black-demo .email-modal {
    border-radius: 8px;
}

/* El modal de SweetAlert2 se monta en <body>, FUERA de #wrapper, por eso
   estas reglas no pueden llevar el prefijo #wrapper.orange-black-demo.
   El formulario usa inputs .form-control de Bootstrap (no .swal2-input). */
.swal2-modal #message-form .form-control {
    border-radius: 8px;
}
.swal2-modal #message-form .form-control:focus {
    border-color: #F97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, .3);
}
/* SweetAlert2 pinta el botón de confirmar con un background inline azul
   (#3085d6): se fuerza al naranja de marca. */
.swal2-modal .swal2-confirm.swal2-styled {
    background-color: #F97316 !important;
    border-radius: 8px;
}
.swal2-modal .swal2-confirm.swal2-styled:hover,
.swal2-modal .swal2-confirm.swal2-styled:focus,
.swal2-modal .swal2-confirm.swal2-styled:active {
    background-color: #EA580C !important;
}
.swal2-modal .swal2-cancel.swal2-styled {
    border-radius: 8px;
}