/* ============================================================================
   A la Venta de Todo Identity System - Override de capa visual
   Fuente de verdad: docs/design.md
   SOLO capa visual (colores, tipografia, bordes, sombras). No toca logica.
   Se carga al final de la cadena de CSS en plantilla.php.
   ============================================================================ */

:root {
  --avt-primary: #FF6B00;      /* CTAs, ofertas, precios, iconos de accion */
  --avt-secondary: #114B5F;    /* estructura, titulos, iconos estructurales */
  --avt-surface: #F9F9F9;      /* fondo general */
  --avt-surface-bright: #FFFFFF; /* cards y contenedores */
  --avt-outline: #DADADA;      /* bordes y separadores */
  --avt-on-primary: #FFFFFF;
  --avt-on-secondary: #FFFFFF;
  --avt-text-primary: #114B5F; /* titulos */
  --avt-text-body: #333333;    /* cuerpo */
  --avt-text-accent: #FF6B00;  /* precios y ofertas */
  --avt-radius: 8px;
  --avt-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ============================================================================
   1. Superficie general
   (html body vence al <style> interno de destacados-V2.php en la home)
   ============================================================================ */
html body {
  background-color: var(--avt-surface) !important;
}

/* ============================================================================
   2. Tipografia Poppins unificada
   (override de Open Sans / Arial en titulos, cards y flechas del carousel)
   ============================================================================ */
body, .productos, .tituloDestacado, h1, h2, h3, h4, h5, h6,
.liGrid0 *, .tarjeta-grid *, .carousel-cartilla-ofertas *,
.carousel-cartilla-marcas *, .figureNuevoDisenio *,
.flecha-retroceder, .flecha-avanzar, #resultadosBuscador *,
.nav-categorias *, #globalV2 *, .swiper-container-slide * {
  font-family: var(--avt-font, 'Poppins'), sans-serif !important;
}

/* ============================================================================
   3. Precios y ofertas -> text-accent (#FF6B00)
   ============================================================================ */
.ultimoParrafo, .precio, .precio1Pago, .price, .montoCuotas, .montoCuota,
#precioProducto, [class*="precio"], .precioRegular, .precioOferta,
.EstoEsNuevo, .labelOff, .monto {
  color: var(--avt-text-accent) !important;
}

/* ============================================================================
   4. Titulos -> text-primary (#114B5F)
   ============================================================================ */
h1, h2, h3, .tituloDestacado, h4, h5, .panel-title, .card-title,
.marca-producto h5, .nombre-producto {
  color: var(--avt-text-primary) !important;
}

/* ============================================================================
   5. Cards -> fondo blanco, radio 8px, sombra suave, borde outline
   ============================================================================ */
.liGrid0, .tarjeta-grid, .carousel-cartilla-ofertas,
.carousel-cartilla-marcas, .tarjeta-item, .cartillaInfoProducto,
.figureNuevoDisenio, .card, .figureGrid0, .contendorProducto,
.tarjetaDestacado, .recuadro-producto {
  background-color: var(--avt-surface-bright) !important;
  border: 1px solid var(--avt-outline) !important;
  border-radius: var(--avt-radius) !important;
  box-shadow: var(--avt-shadow-soft) !important;
}

/* Hover de cards: misma sombra suave, sin resplandor fuerte */
.liGrid0:hover, .tarjeta-grid:hover, .carousel-cartilla-ofertas:hover,
.carousel-cartilla-marcas:hover, .tarjeta-item:hover, .figureNuevoDisenio:hover {
  border-color: var(--avt-secondary) !important;
  box-shadow: 0 4px 12px rgba(17, 75, 95, 0.15) !important;
}

/* ============================================================================
   6. Botones primary -> naranja (#FF6B00)
   (NO toca el boton de WhatsApp, que es canal de conversion propio)
   ============================================================================ */
.btn-default.backColor, .btn-primary, .boton-comprar, .btn-comprar,
#botonBuscador, .ver-mas, .carousel-button-prev, .carousel-button-next,
.btn-agregar-carrito, .btn-ver-mas, .boton-cta {
  background-color: var(--avt-primary) !important;
  color: var(--avt-on-primary) !important;
  border: none !important;
  border-radius: var(--avt-radius) !important;
}

.btn-default.backColor:hover, .btn-primary:hover, .boton-comprar:hover,
.btn-comprar:hover, #botonBuscador:hover, .ver-mas:hover,
.carousel-button-prev:hover, .carousel-button-next:hover {
  background-color: var(--avt-primary) !important;
  filter: brightness(0.9);
  color: var(--avt-on-primary) !important;
}

/* ============================================================================
   7. Botones secondary -> outline azul petroleo
   ============================================================================ */
.btn-secondary-outline, .boton-secundario, .btn-secundario, .btn-outline {
  border: 1px solid var(--avt-secondary) !important;
  color: var(--avt-secondary) !important;
  background-color: transparent !important;
  border-radius: var(--avt-radius) !important;
}

/* ============================================================================
   8. Iconos -> #FF6B00 (accion) y #114B5F (estructurales)
   ============================================================================ */
i.fa.fa-cart-plus, i.fa.fa-search, .icono-accion, .fa-shopping-cart,
.icono-cta, .btn-buscar i {
  color: var(--avt-primary) !important;
}

.qty-btn, .icon-badge, .flecha-retroceder, .flecha-avanzar,
.icono-estructural, .fa-chevron-left, .fa-chevron-right,
.swiper-pagination-bullet-active {
  color: var(--avt-secondary) !important;
}

/* ============================================================================
   9. Inputs, selectores y separadores -> outline
   ============================================================================ */
input, select, textarea {
  border-color: var(--avt-outline) !important;
  border-radius: var(--avt-radius) !important;
}

hr.separadores, .separadores, hr {
  border-color: var(--avt-outline) !important;
}

/* ============================================================================
   10. Paginacion activa -> secondary
   ============================================================================ */
.pagination .page-item.active .page-link {
  background-color: var(--avt-secondary) !important;
  border-color: var(--avt-secondary) !important;
  color: var(--avt-on-secondary) !important;
}

/* ============================================================================
   11. Cabezote / Header -> Identity System
   (barra superior, iconos estructurales, buscador, menu de categorias)
   ============================================================================ */

/* Barra superior: azul petroleo (#114B5F) con texto blanco */
.barraSuperior {
  background-color: var(--avt-secondary) !important;
}

.barraSuperior a,
.barraSuperior ul li {
  color: var(--avt-on-secondary) !important;
}

/* Watermark del logotipo en la barra superior: blanco translucido sobre azul */
.barraSuperior .logo-img {
  filter: brightness(0) invert(1) opacity(0.18) !important;
}

/* Menu de la barra superior: Poppins Medium, blanco sobre azul petroleo */
.menuBarraSuperior ul li a {
  font-family: var(--avt-font, 'Poppins'), sans-serif !important;
  font-weight: 500 !important;
  color: var(--avt-on-secondary) !important;
  letter-spacing: 0.3px !important;
}

.menuBarraSuperior ul li a i {
  font-size: 1.3rem;
  margin: 0 1px;
  color: var(--avt-on-secondary) !important;
}

.menuBarraSuperior ul li a:hover,
.menuBarraSuperior ul li a:hover i {
  color: var(--avt-primary) !important;
}

/* Iconos estructurales (Mi Cuenta, Carrito): azul petroleo, hover naranja */
#miCuenta,
#carritoCompras {
  color: var(--avt-secondary) !important;
}

#miCuenta:hover,
#carritoCompras:hover {
  color: var(--avt-primary) !important;
}

/* Buscador: borde outline, focus naranja */
header #buscador input {
  border-color: var(--avt-outline) !important;
}

header #buscador input:focus {
  border-color: var(--avt-primary) !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12) !important;
}

/* Icono de la lupa dentro del boton primario: blanco (on-primary) */
#botonBuscador i {
  color: var(--avt-on-primary) !important;
}

/* Menu de categorias: texto azul petroleo, hover y subrayado naranja */
.flex-container div > a {
  color: var(--avt-secondary) !important;
}

.flex-container div > a::after {
  background-color: var(--avt-primary) !important;
}

.flex-container div > a:hover {
  color: var(--avt-primary) !important;
}

.flex-container div > a.categoriaActiva {
  color: var(--avt-primary) !important;
}

/* Clase legado del cabezote alineada a la marca */
.backColorCabezote {
  background-color: var(--avt-primary) !important;
}

/* ============================================================================
   12. Fondo de superficie uniforme en secciones legacy
   ============================================================================ */
.productos,
.productosDestacados,
.tituloDestacado,
.barraProductos,
.contenedorGeneral {
  background-color: var(--avt-surface) !important;
}

/* ============================================================================
   13. Cards que faltaban: masvendidos, vistos y thumbnails de sugeridos
   ============================================================================ */
.carousel-cartilla-masvendidos,
.carousel-cartilla-vistos,
.thumbnail.productos {
  background-color: var(--avt-surface-bright) !important;
  border: 1px solid var(--avt-outline) !important;
  border-radius: var(--avt-radius) !important;
  box-shadow: var(--avt-shadow-soft) !important;
}

.carousel-cartilla-masvendidos:hover,
.carousel-cartilla-vistos:hover {
  border-color: var(--avt-secondary) !important;
  box-shadow: 0 4px 12px rgba(17, 75, 95, 0.15) !important;
}

/* ============================================================================
   14. Titulos de productos en cards y circulos de categorias
   ============================================================================ */
html .productos ul li div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto,
html .carousel-item-masvendidos div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto,
html .carousel-item-vistos div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto,
html .carousel-item-ofertas div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto {
  color: var(--avt-text-primary) !important;
}

html .productos ul li div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto:hover,
html .carousel-item-masvendidos div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto:hover,
html .carousel-item-vistos div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto:hover,
html .carousel-item-ofertas div.informacionCartilla div.cadenaDescripcion h4 a.pixelProducto:hover {
  color: var(--avt-primary) !important;
}

.title-item a {
  color: var(--avt-text-primary) !important;
}

.title-item a:hover {
  color: var(--avt-primary) !important;
}

.tituloCategoria {
  color: var(--avt-secondary) !important;
}

/* ============================================================================
   15. Texto de cuotas y precios
   ============================================================================ */
html .productos ul li div.informacionCartilla div.ultimoParrafo p.cadenaCuotas,
html .productos ul li div.informacionCartilla div.ultimoParrafo.EstoEsNuevo p.cadenaCuotas,
html .carousel-item-ofertas div.informacionCartilla div.ultimoParrafo p.cadenaCuotas,
html .carousel-item-masvendidos div.informacionCartilla div.ultimoParrafo p.cadenaCuotas,
html .carousel-item-vistos div.informacionCartilla div.ultimoParrafo p.cadenaCuotas {
  color: var(--avt-secondary) !important;
}

.leyenda1Pago {
  color: var(--avt-text-body) !important;
}

.destacados-php {
  color: var(--avt-text-body) !important;
}

/* ============================================================================
   16. Menu desplegable de categorias (#globalV2 generado por JS)
   ============================================================================ */
#globalV2 {
  border-color: var(--avt-outline) !important;
}

#globalV2 ul li a.pixelSubCategorias {
  color: var(--avt-secondary) !important;
}

#globalV2 ul li a.pixelSubCategorias:hover {
  color: var(--avt-primary) !important;
}

#globalV2 ul.subCategoria ul.productos-menu li a.pixelProducto {
  color: var(--avt-text-body) !important;
}

#globalV2 ul.subCategoria ul.productos-menu li a.pixelProducto:hover {
  color: var(--avt-primary) !important;
}

/* ============================================================================
   17. Panel de filtros y botones asociados
   ============================================================================ */
.contenedor-filtros-responsivo .panel-heading {
  background-color: var(--avt-secondary) !important;
  border: none !important;
}

.contenedor-filtros-responsivo .panel-title {
  color: var(--avt-on-secondary) !important;
}

.contenedor-filtros-responsivo .btn-cerrar-filtro {
  color: var(--avt-on-secondary) !important;
  opacity: 0.85 !important;
}

.btn-filtrar-movil {
  background-color: var(--avt-surface-bright) !important;
  border-color: var(--avt-secondary) !important;
  color: var(--avt-secondary) !important;
  border-radius: var(--avt-radius) !important;
}

.btn-filtrar-movil i {
  color: var(--avt-secondary) !important;
}

.contenedor-filtros-responsivo .btn-danger {
  background-color: transparent !important;
  border: 1px solid var(--avt-secondary) !important;
  color: var(--avt-secondary) !important;
  border-radius: var(--avt-radius) !important;
}

.contenedor-filtros-responsivo .btn-danger:hover {
  background-color: var(--avt-secondary) !important;
  color: var(--avt-on-secondary) !important;
}

.custom-filter-checkbox .checkbox-box {
  border-color: var(--avt-outline) !important;
}

.custom-filter-checkbox:hover .checkbox-box,
.custom-filter-checkbox.active .checkbox-box {
  border-color: var(--avt-primary) !important;
}

.custom-filter-checkbox.active .checkbox-box {
  background-color: var(--avt-primary) !important;
}

.filter-header-toggle:hover,
.filter-header-toggle:focus {
  color: var(--avt-primary) !important;
}

.active-filter-pill {
  border-color: var(--avt-outline) !important;
}

.active-filter-pill:hover {
  border-color: var(--avt-primary) !important;
}

.active-filter-pill:hover i.fa-times {
  color: var(--avt-primary) !important;
}

/* ============================================================================
   18. Botones de carrusel, VER MAS (secundarios) y productos sugeridos
   ============================================================================ */
.carousel-button:hover,
.carousel-button-ofertas:hover,
.carousel-button-masvendidos:hover,
.carousel-button-vistos:hover,
.carousel-marcas-button:hover,
.carousel-button-nuevo-disenio:hover {
  color: var(--avt-primary) !important;
  border-color: var(--avt-primary) !important;
  box-shadow: 0px 0px 7px 1px rgba(255, 107, 0, 0.4) !important;
}

.ver-mas {
  background-color: transparent !important;
  border: 1px solid var(--avt-secondary) !important;
  color: var(--avt-secondary) !important;
  border-radius: var(--avt-radius) !important;
}

.ver-mas:hover {
  background-color: var(--avt-secondary) !important;
  color: var(--avt-on-secondary) !important;
}

.carrusel-btn-prev,
.carrusel-btn-next {
  background-color: var(--avt-primary) !important;
  color: var(--avt-on-primary) !important;
}

.carrusel-btn-prev:hover,
.carrusel-btn-next:hover {
  background-color: var(--avt-primary) !important;
  filter: brightness(0.9);
}

.carrusel-indicators .indicator.active {
  background-color: var(--avt-secondary) !important;
}

.precio-box h4 {
  color: var(--avt-text-accent) !important;
}

.badge-origen {
  color: var(--avt-secondary) !important;
  background-color: rgba(17, 75, 95, 0.08) !important;
}

.marca-agua-icono {
  color: var(--avt-secondary) !important;
}

.icon-badge i {
  color: var(--avt-secondary) !important;
}

.icon-card::before {
  background: linear-gradient(180deg, var(--avt-secondary) 0%, var(--avt-primary) 100%) !important;
}

.icon-card:hover {
  background: rgba(255, 107, 0, 0.04) !important;
  border-color: rgba(255, 107, 0, 0.25) !important;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.12) !important;
}

.icon-card:hover .icon-badge i {
  color: var(--avt-primary) !important;
}

.icon-card:hover .icon-label {
  color: var(--avt-secondary) !important;
}

.icon-card:hover .icon-value {
  color: var(--avt-text-primary) !important;
}

/* ============================================================================
   19. Pagina de producto (infoProducto)
   ============================================================================ */
a:hover.enlaceRegresar {
  color: var(--avt-primary) !important;
}

.cartillaInfoProducto .cadenaCuotas,
.cartillaInfoProducto .letrasVedesPequenias,
.cartillaInfoProducto .cadenaFinanzas {
  color: var(--avt-secondary) !important;
}

.cartillaInfoProducto .montoUnSoloPago,
.cartillaInfoProducto .montoUnSoloPago strong {
  color: var(--avt-text-accent) !important;
}

.custom-badge,
.custom-badge-infoProducto {
  background-color: var(--avt-primary) !important;
  color: var(--avt-on-primary) !important;
  border-radius: var(--avt-radius) !important;
}

.contenedor-cuotas {
  background-color: var(--avt-primary) !important;
}

.infoproducto span.cadenaDescuento {
  font-family: var(--avt-font, 'Poppins'), sans-serif !important;
}

.qty-btn:hover {
  background-color: var(--avt-secondary) !important;
  color: var(--avt-on-secondary) !important;
}

/* ============================================================================
   20. Circulos de categorias y recuadros de marcas
   ============================================================================ */
.circle,
.recuadro-marcas {
  border-color: var(--avt-outline) !important;
}

.marca-nombre-texto {
  color: var(--avt-secondary) !important;
}

/* ============================================================================
   21. Titulos de secciones de la home -> text-primary
   ============================================================================ */
.carousel-container-ofertas h1 span,
.carousel-container-masvendidos h1 span,
.carousel-container-vistos h1 span {
  color: var(--avt-text-primary) !important;
}

/* ============================================================================
   22. Inputs, migas de pan y autocomplete
   ============================================================================ */
.form-control:focus {
  border-color: var(--avt-primary) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(255, 107, 0, 0.12) !important;
}

ol.breadcrumb a {
  color: var(--avt-secondary) !important;
}

.paginaActiva {
  color: var(--avt-text-primary) !important;
}

#resultadosBuscador {
  border-color: var(--avt-outline) !important;
}

.tituloSugerencia {
  color: var(--avt-text-body) !important;
}