/* PCTEC - Cabezal y pie en el estilo oscuro de la Alternativa 2.
   Pegar en: Diseño > Avanzado > Hoja de estilo en cascada (CSS), con el interruptor activado. */

/* Colores del tema: el sitio los usa en cabezal, pie y botones */
:root{
  --bs-header-bg:#060c1d;
  --bs-header-text:#cfdcff;
  --bs-footer-bg:#060c1d;
  --bs-footer-text:#cfdcff;
  --bs-body-bg:#060c1d;
}
body{background:#060c1d}

/* ===== CABEZAL ===== */
#ss-header,
#ss-header .header-row,
#ss-header .ss-desktop,
#ss-header .ss-mobile{background:#060c1d!important}
#ss-header{box-shadow:0 1px 0 #22345f,0 10px 30px rgba(0,0,0,.45)!important}
#ss-header .header-row{border:0!important}

/* VERSION CON LOGO NUEVO PARA FONDO OSCURO: usar solo despues de cambiar el logo en el panel */
#ss-header .logo-header{max-height:60px;width:auto}

/* menu, iconos y enlaces */
#ss-header a,
#ss-header i,
#ss-header .ss-menu-item,
#ss-header button,
#ss-header .navbar-toggler{color:#cfdcff!important}
#ss-menu .ss-menu-item{font-weight:600;letter-spacing:.01em;border-radius:10px!important;transition:color .15s,background .15s!important}
#ss-menu .ss-menu-item:hover{color:#ff7a2e!important;background:rgba(47,125,255,.12)!important}
#ss-header a:hover i,
#ss-header a:hover{color:#ff7a2e!important}

/* menu desplegable del usuario: queda claro y legible */
#ss-header .dropdown-menu{background:#0e1a3a!important;border:1px solid #22345f!important}
#ss-header .dropdown-menu a,
#ss-header .dropdown-item{color:#e8eefc!important}
#ss-header .dropdown-item:hover{background:#13224a!important;color:#ff7a2e!important}

/* ===== PIE ===== */
footer #ss-footer,
footer .footer-row,
footer #ss-footnote-footer{background:#060c1d!important;color:#cfdcff!important}
footer .footer-row + .footer-row{border-top:1px solid #22345f}
footer a,
footer i,
footer .subtitle,
footer .text-container{color:#cfdcff!important}
footer a:hover,
footer a:hover i{color:#ff7a2e!important}
/* medios de envio y de cobro: sus logos necesitan fondo claro */
footer #ss-footer-row-2,
footer #ss-footer-row-3{background:#f1f4f8!important;color:#101720!important}
footer #ss-footer-row-2 *,
footer #ss-footer-row-3 *{color:#101720!important}

/* menu en una sola linea en pantallas grandes */
@media (min-width:992px){
  #ss-menu-list{flex-wrap:nowrap!important}
  #ss-menu .ss-menu-item{white-space:nowrap}
  #ss-header .header-row-content{flex-wrap:nowrap}
}

/* Data Fiscal y otras imagenes con fondo blanco: el blanco se funde con la franja clara (sin recuadro blanco) */
footer #ss-footer-row-2 img,
footer #ss-footer-row-3 img{mix-blend-mode:multiply}


/* PCTEC - Tienda en tema oscuro (prueba). Va en Diseño > Avanzado > CSS, junto al CSS del cabezal y pie.
   Solo cambia colores; no toca la estructura del modulo de tienda. */
.product-grids.section{background:#060c1d !important;color:#e8eefc}
.product-grids .text-444,.product-grids .breadcrumb-catalogo a,.product-grids .fw-light{color:#9fb0d4 !important}
.product-grids .container-category,
.product-grids .container-search,
.product-grids .bg-white{background:#0e1a3a !important;color:#e8eefc !important;border-color:#22345f !important}
.product-grids .container-category{box-shadow:none !important;border:1px solid #22345f;border-radius:10px;overflow:hidden}
.product-grids .title-filter,.product-grids .subtitle-filter,.product-grids .container-category a{color:#cfdcff !important}
.product-grids .subtitle-filter:hover,.product-grids .container-category a:hover{color:#fff !important}
.product-grids .form-control,.product-grids .form-select,.product-grids .form-control-sm{background:#0a1330 !important;color:#e8eefc !important;border:1px solid #22345f !important}
.product-grids .form-control::placeholder{color:#8fb4ff;opacity:1}
.product-grids .container-search .form-control{background:#13224a !important;border:1px solid #2f7dff !important;color:#fff !important}
.product-grids .container-search .form-control:focus{box-shadow:0 0 0 3px rgba(47,125,255,.3) !important;outline:none}
.product-grids .form-select option{background:#0a1330;color:#e8eefc}
.product-grids .btn-primary,.product-grids .addcart{background:#2f7dff !important;border-color:#2f7dff !important;color:#fff !important}
.product-grids .btn-primary:hover,.product-grids .addcart:hover{background:#4a91ff !important}
.product-grids .btn-outline-primary{color:#6fa8ff !important;border-color:#2f7dff !important;background:transparent !important}
.product-grids .btn-outline-primary:hover,.product-grids .btn-outline-primary.active{background:#2f7dff !important;color:#fff !important}
.product-grids .single-product{background:#0e1a3a !important;border:1px solid #22345f;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s,border-color .15s}
.product-grids .single-product:hover{transform:translateY(-3px);border-color:#2f7dff}
.product-grids .single-product .title,.product-grids .single-product h4{color:#e8eefc !important}
.product-grids .single-product .price{color:#fff !important;font-weight:700}
.product-grids .single-product a,.product-grids .single-product .text-gray,.product-grids .breadcrumb-catalogo,.product-grids .breadcrumb-catalogo a{color:#e8eefc !important}
.product-grids .breadcrumb-catalogo,.product-grids .breadcrumb-catalogo a{color:#9fb0d4 !important}
.product-grids .single-product .product-image{background:#fff;border-radius:10px;padding:6px}
.product-grids .badge{background:#FA5A00 !important;color:#fff !important}
.product-grids .nav-link,.product-grids .nav-link.active{background:#0a1330 !important;color:#e8eefc !important}
.cart-product-modal .modal-content,.modal-content{background:#0e1a3a;color:#e8eefc;border:1px solid #22345f}
.modal-header,.modal-footer{border-color:#22345f}
.btn-close{filter:invert(1)}
/* El titulo del producto tiene un color fijo que gana a cualquier regla "color": se pisa con text-fill */
.product-grids .single-product .title{-webkit-text-fill-color:#e8eefc}
.product-grids .breadcrumb-catalogo,.product-grids .breadcrumb-catalogo a,.product-grids a.text-444{color:#9fb0d4 !important}
/* Oculta el filtro de Precios (Hasta / De ... a / Min-Max), en escritorio y en el filtro del celular */
.product-grids .shadow-sm:has(input[placeholder="Min"]){display:none !important}

/* ---------- Ficha de producto ---------- */
.item-details.section{background:#060c1d !important;color:#e8eefc}
.item-details .breadcrumb-catalogo,.item-details .breadcrumb-catalogo a,.item-details a.text-444{color:#9fb0d4 !important}
.item-details .breadcrumb-catalogo .fw-bolder,.item-details .breadcrumb-catalogo strong{color:#fff !important}
.item-details .top-area,.item-details .bg-white,.item-details .card,.item-details .card-body,.item-details .tab-content,.item-details .bg-body{background:#0e1a3a !important;color:#e8eefc !important;border-color:#22345f !important}
.item-details .top-area{border:1px solid #22345f;border-radius:12px}
.item-details .swiper-slide,.item-details .tns-item{background:#fff !important;border-radius:10px}
.item-details .btn-return{color:#6fa8ff !important}
.item-details .product-info,.item-details .product-info p,.item-details .product-info span,.item-details .text-444{color:#cfdcff !important}
.item-details h1.title{color:#fff !important;-webkit-text-fill-color:#fff}
.item-details h3.price{color:#fff !important;font-weight:800}
.item-details .text-muted,.item-details .small.text-muted{color:#9fb0d4 !important}
.item-details h4,.item-details h5,.item-details h6,.item-details label,.item-details .form-label{color:#e8eefc !important}
.item-details .form-control,.item-details textarea{background:#0a1330 !important;color:#e8eefc !important;border:1px solid #22345f !important}
.item-details .form-control.border-primary{border-color:#2f7dff !important}
.item-details .btn-primary{background:#2f7dff !important;border-color:#2f7dff !important;color:#fff !important}
.item-details .btn-outline-primary,.item-details .btn-outline-dark{color:#6fa8ff !important;border-color:#2f7dff !important;background:transparent !important}
.item-details .btn-outline-primary:hover,.item-details .btn-outline-dark:hover{background:#2f7dff !important;color:#fff !important}
.item-details .btn-dark{background:#2f7dff !important;border-color:#2f7dff !important;color:#fff !important}
.item-details .nav-tabs{border-color:#22345f !important}
.item-details .nav-tabs .nav-link{background:#0a1330 !important;color:#9fb0d4 !important;border-color:#22345f !important}
.item-details .nav-tabs .nav-link.active{background:#0e1a3a !important;color:#fff !important;border-bottom-color:#0e1a3a !important}
.item-details .nav-tabs .nav-link h6{color:inherit !important}
.item-details .tab-content *{color:#e8eefc}
.item-details .tab-content .text-muted{color:#9fb0d4 !important}
.item-details .tab-content a{color:#6fa8ff}
.item-details hr{border-color:#22345f;opacity:1}

/* ---------- Checkout (/checkout): cabezal oscuro para que se vea el logo, formulario y resumen oscuros ---------- */
body:has(.breadcrumb-item) main{background:#060c1d !important;color:#e8eefc}
body:has(.breadcrumb-item) nav.navbar{background:#060c1d !important;border-bottom:1px solid #22345f;box-shadow:none !important}
body:has(.breadcrumb-item) .header-custom-text-color{color:#e8eefc !important}
body:has(.breadcrumb-item) main .bg-white,body:has(.breadcrumb-item) main .accordion,body:has(.breadcrumb-item) main .accordion-item,body:has(.breadcrumb-item) main .accordion-button,body:has(.breadcrumb-item) .bg_loader{background:#0e1a3a !important;color:#e8eefc !important;border-color:#22345f !important}
body:has(.breadcrumb-item) main .accordion-button::after{filter:none !important;background-color:transparent !important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236fa8ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important}
body:has(.breadcrumb-item) main .form-control,body:has(.breadcrumb-item) main select{background:#0a1330 !important;color:#e8eefc !important;border:1px solid #22345f !important}
body:has(.breadcrumb-item) main .breadcrumb-item.active{color:#9fb0d4 !important}
body:has(.breadcrumb-item) main .breadcrumb-item.fw-bold{color:#fff !important}
body:has(.breadcrumb-item) main a:not(.btn){color:#6fa8ff}
body:has(.breadcrumb-item) main .btn-primary{background:#2f7dff !important;border-color:#2f7dff !important}
/* Ventana del carrito (Resumen) en todo el sitio */
.modal-content{background:#0e1a3a !important;color:#e8eefc !important;border:1px solid #22345f}
.modal-header,.modal-footer{border-color:#22345f !important}
/* El nombre "PCTEC SAS" repite al logo: se oculta y el logo se agranda un poco */
body:has(.breadcrumb-item) nav.navbar .header-custom-text-color{display:none !important}
body:has(.breadcrumb-item) nav.navbar .logo-header{width:150px !important;height:auto !important;max-height:none !important}
/* Checkout: sin barras de desplazamiento internas (el formulario y el resumen muestran todo, la pagina scrollea normal) */
.checkout-scroll-container,.checkout-scroll-container-resume{max-height:none !important;overflow:visible !important;padding-right:0 !important}

/* Tienda: al pasar el mouse, la capa con los botones cubre solo la foto (la plataforma la estiraba sobre toda la tarjeta, que ahora es mas alta por las cuotas y el IVA) */
@media (min-width:768px){
#catalogPage .single-product .product-btn,#catalogPage .single-product:hover .product-btn{top:16px !important;left:16px !important;width:calc(100% - 32px) !important;height:240px !important;border-radius:10px}
#catalogPage .single-product:hover .product-btn{background-color:rgba(6,12,29,.74) !important}
#catalogPage .single-product .product-btn .btn-outline-primary{background:#0a1330 !important}
}