/* 1. Tipografía: Archivo sola, tabular nums, sin mayúsculas forzadas */

:root {
  --font-display: 'Archivo', sans-serif !important;
  --font-body: 'Archivo', sans-serif !important;
  --font-mono: 'Archivo', sans-serif !important;
  
  --radius-xs: 2px !important;
  --radius-sm: 2px !important;
  --radius-md: 2px !important;

  --shadow-card: none !important;
}

* {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

h1, .hero-titulo, .categoria-titulo, .titulo-producto-principal {
  letter-spacing: -0.01em !important;
}

.precio-actual, .precio-regular, .precio-gigante, .drawer-item-precio, 
.carrito-item-precio, .precio-combo, .precio-total-combo {
  font-variant-numeric: tabular-nums !important;
  font-weight: 700 !important;
}

/* 2. Escala tipográfica estricta (12, 14, 16, 20, 26, 34) */

/* 12px */
.sku-etiqueta, .pastilla-badge, .badge-ahorro, .precio-iva-nota, 
.leyenda-actualizacion-stock, .tarjeta-msi-nota, .topbar-onofre, 
.selector-ubicacion-etiqueta, .migas-pan, .migas-de-pan, .meta-tecnica-r4, 
.texto-recoge-r4, .cat-garantia-badge, .hero-badge-cobertura, .badge-ahorro-flotante,
.badge-marca-visor, .badge-zoom-hint, .tag-obra, .tag-asesoria, .badge-recoge-gratis,
.hero-accesos-label, .caja-msi-mercadopago {
  font-size: 12px !important;
}

/* 14px */
body, .tarjeta-titulo, .bajada-producto-desc, .subtitulo-seccion, 
.fila-detalles-nombre, .item-disponibilidad-linea, .tarjeta-cat-subs, 
.nombre-combo, .tickets-combo, .tarjeta-sucursal-dir, .tarjeta-sucursal-horario,
.btn-agregar-tarjeta, .btn-secundario, .pastilla-btn, .selector-ubicacion-valor,
.selector-ubicacion-cambiar, .tabla-atributos-tecnicos, .texto-recoge-r4 {
  font-size: 14px !important;
}

/* 16px */
.btn-comprar, .btn-agregar-carro-principal, .buscador-input, 
.precio-regular, .nav-item-enlace, .pastilla-rotulo, .btn-whatsapp,
.btn-whatsapp-mostrador, .btn-pestana, .fila-precio-valor {
  font-size: 16px !important;
}

/* 20px */
h2, .precio-actual, .modal-stock-titulo, .drawer-titulo, 
.panel-compra-titulo, .cero-resultados-titulo, .tarjeta-sucursal-nombre, 
.precio-combo, .modal-cp-titulo {
  font-size: 20px !important;
}

/* 26px */
h1, .hero-titulo, .categoria-titulo, .titulo-producto-principal, 
.precio-total-combo {
  font-size: 26px !important;
}

/* 34px - Escala máxima en PC */
@media (min-width: 769px) {
  .hero-titulo, .categoria-titulo, .titulo-producto-principal, .precio-gigante {
    font-size: 34px !important;
  }
}
@media (max-width: 768px) {
  /* Tope a 28px en celular */
  .hero-titulo, .categoria-titulo, .titulo-producto-principal, .precio-gigante {
    font-size: 28px !important;
  }
}

/* 3. Encabezados Claros y Limpios */
.hero-principal, .categoria-encabezado {
  background: #F4F5F6 !important;
  border-bottom: 3px solid var(--rojo-onofre) !important;
  position: relative;
}

.hero-principal *, .categoria-encabezado * {
  color: #232220 !important; 
}
.migas-pan a, .migas-pan span, .migas-pan strong, .hero-bajada, .categoria-resumen {
  color: #6B6963 !important;
}
.migas-pan a:hover, .hero-principal a:hover, .categoria-encabezado a:hover,
.migas-de-pan a:hover {
  color: var(--rojo-onofre) !important;
}

/* Proteger colores de botones que sí deben resaltar en la cabecera */
.hero-btn-cta, .hero-btn-cta *, .hero-chip-destacado, .hero-chip-destacado * {
  color: #FFFFFF !important;
}

/* 4. Erradicación de cajitas en tarjetas y UI */
.hero-badge-cobertura, .cat-garantia-badge {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-block !important;
}

.semaforo-stock {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 4px 0 !important;
  color: #232220 !important;
}
.semaforo-punto {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.semaforo-stock.disponible .semaforo-punto { background-color: var(--verde-stock) !important; }
.semaforo-stock.alerta .semaforo-punto { background-color: var(--ambar-alerta) !important; }
.semaforo-stock.agotado .semaforo-punto { background-color: var(--gris-onofre-medio) !important; }

/* Eliminar pastillas de medidas/tipos, volverlas texto plano con viñeta */
.fila-medida-pill {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #6B6963 !important;
  font-weight: 500 !important;
}
.fila-medida-pill:not(:last-child)::after {
  content: " · ";
}

.badge-ahorro-flotante {
  box-shadow: none !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 2px !important;
}

/* Pastillas de filtro sobrias */
.pastilla-btn {
  background-color: transparent !important;
  border: 1px solid var(--gris-borde) !important;
  box-shadow: none !important;
}
.pastilla-btn.activo {
  border-color: #232220 !important;
  background-color: transparent !important;
  color: #232220 !important;
}
.pastilla-badge {
  background-color: transparent !important;
  color: #6B6963 !important;
}
.pastilla-badge::before { content: "("; }
.pastilla-badge::after { content: ")"; }

/* 5. Regla de los Tres Roles Visuales */
/* Azul de MercadoPago solo ícono, texto en gris oscuro */
.caja-msi-destacada, .tarjeta-msi-nota, .caja-msi-mercadopago, #drawerNotaMsiPie {
  color: #232220 !important;
}

/* 6. Sin barras izquierdas gruesas */
.caja-comercial-precio, .banner-obra-whatsapp, .toast-aviso, .caja-aviso-solo-local, .aviso-solo-local {
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-left-color: var(--gris-borde) !important;
}
.toast-aviso { border-color: #3D3C38 !important; }

/* 7. Sin flotación en Hover y Radios a 2px */
.tarjeta-producto:hover, .tarjeta-cat-item:hover, .fila-producto-tecnica:hover,
.btn-comprar:active, .btn-agregar-tarjeta:active, .btn-agregar-carro-principal:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.tarjeta-producto:hover, .tarjeta-cat-item:hover, .fila-producto-tecnica:hover {
  border-color: #3D3C38 !important;
  background-color: #F8F9FA !important;
}
.tarjeta-producto, .tarjeta-cat-item {
  box-shadow: none !important;
  border-radius: 2px !important;
}

.btn-comprar, .btn-agregar-tarjeta, .btn-agregar-carro-principal, .btn-secundario, 
.btn-whatsapp, .btn-whatsapp-mostrador, .hero-btn-cta {
  border-radius: 2px !important;
}

/* 8. Reintegración Módulo "Lo que más se lleva" */
.tarjeta-resumen-combo {
  background-color: transparent !important;
  border: none !important;
  border-top: 1px solid var(--gris-borde) !important;
  border-radius: 0 !important;
  padding: 16px 0 0 0 !important;
  text-align: left !important;
}
.layout-combo-compra {
  align-items: flex-start !important;
}

/* 9. Ocultar Íconos Decorativos */
.item-disponibilidad-linea svg,
.cat-garantia-badge svg,
.hero-badge-cobertura svg,
.topbar-item svg,
.caja-msi-mercadopago svg,
.tarjeta-msi-nota svg,
.metodos-pago-iconos svg {
  display: none !important;
}

/* Recuperar íconos estrictamente funcionales */
.btn-carrito-cabecera svg,
.buscador-btn svg,
.selector-ubicacion-icono,
.btn-whatsapp svg,
.btn-cotizar-wa svg,
.btn-abrir-filtros-movil svg,
.modal-cp-cerrar svg,
.btn-cerrar-filtros-movil svg,
.btn-vista svg,
.topbar-item a[href*="wa.me"] svg {
  display: inline-block !important;
}

/* 10. Sombras solo en capas flotantes */
.buscador-sugerencias-panel, .drawer-carrito, .carrito-drawer, 
.modal-cp-caja, .modal-stock-caja, .modal-contenedor-stock, 
.toast-aviso, .barra-fija-movil {
  box-shadow: 0 12px 28px rgba(35, 34, 32, 0.18) !important;
}

/* 11. Ajustes del equipo técnico tras revisar las capturas */
/* Sin amarillo: donde se usaba sobre fondo oscuro (barra superior, menú, pie) pasa a blanco */
:root { --amarillo-acento: #FFFFFF !important; }
.topbar-item strong, .nav-item-enlace.destacado { color: #FFFFFF !important; font-weight: 700 !important; }
/* La sección de departamentos había perdido el margen lateral (padding: 28px 0 pisaba al .contenedor) */
.seccion-departamentos { padding-left: 16px !important; padding-right: 16px !important; }
/* Bloque de WhatsApp: etiqueta y ejemplos como texto, sin cajitas */
.tag-asesoria { background: transparent !important; color: var(--gris-onofre-medio) !important; padding: 0 !important; font-weight: 600 !important; }
.etiquetas-obra-chips { display: block !important; color: var(--gris-onofre-medio) !important; }
.tag-obra { background: transparent !important; border: 0 !important; padding: 0 !important; display: inline !important; }
.tag-obra:not(:last-child)::after { content: " · "; }
/* La línea de existencia de las tarjetas no se parte en columnas */
.semaforo-stock { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 2px 6px !important; }
.semaforo-stock > span { white-space: nowrap; }

/* 12. Panel de sugerencias del buscador: cerrado hasta que se escribe (faltaba en las páginas nuevas) */
.buscador-sugerencias-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--blanco);
  border: 2px solid var(--gris-onofre);
  border-top: none;
  box-shadow: var(--shadow-modal);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  z-index: 500;
  display: none;
  max-height: 440px;
  overflow-y: auto;
}
.buscador-sugerencias-panel.abierto {
  display: block;
}
.panel-sug-seccion { padding: 8px 12px; }

/* 13. Panel de filtros en computadora: se queda fijo al bajar, pero con su propio desplazamiento
   para que siempre se alcancen todos los filtros (antes se cortaba si era más alto que la pantalla). */
@media (min-width: 769px) {
  .panel-filtros-lateral {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
/* Sin desplazamiento dentro de cada lista: se mueve el panel completo */
.panel-filtros-lateral .filtro-opciones-lista { max-height: none !important; overflow: visible !important; }

/* 14. Promoción de proveedor (partes/promociones.php): etiqueta de la ficha */
.nota-promocion-ficha { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--rojo-onofre-suave); border: 1px solid var(--rojo-onofre-borde); color: var(--gris-onofre-oscuro); font-size: 13px; text-decoration: none; }
.nota-promocion-ficha strong { color: var(--rojo-onofre-hover); }
.nota-promocion-ficha:hover { border-color: var(--rojo-onofre); }
/* Sección de promoción en la portada: imagen del proveedor a 1/4 y la tira a la derecha */
.promo-cuerpo.con-imagen { display: grid; grid-template-columns: 356px minmax(0, 1fr); gap: 12px; align-items: start; }
/* 356 px de ancho = el alto de una tarjeta con la imagen 4:5; nunca se recorta (la vigencia impresa debe verse completa) */
.promo-imagen { display: block; border-radius: var(--radius-md); overflow: hidden; }
.promo-img { display: block; width: 100%; height: auto; transition: transform .25s ease, opacity .25s ease; }
.promo-imagen:hover .promo-img { transform: scale(1.02); opacity: .95; }
.promo-imagen-tira { display: none; }
.promo-cuerpo.con-imagen .tira-ofertas-r4 { min-width: 0; }
@media (max-width: 1024px) { .promo-cuerpo.con-imagen { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 768px) {
  .promo-cuerpo.con-imagen { grid-template-columns: minmax(0, 1fr); }
  .promo-imagen-columna { display: none; }
  .promo-imagen-tira { display: flex; align-items: center; background: #ebe3d8; } /* tono del mármol del banner, por si la tarjeta es más alta */
}
@media (max-width: 768px) { .promo-encabezado.con-imagen .categoria-resumen { display: none; } } /* el banner ya trae la vigencia */
/* Página de la promoción: la imagen horizontal a la derecha del título (abajo en celular) */
.promo-encabezado.con-imagen { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: center; }
.promo-encabezado-img { border-radius: var(--radius-md); overflow: hidden; }
.promo-encabezado-img .promo-img { height: auto; }
@media (max-width: 900px) { .promo-encabezado.con-imagen { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* Varias promociones a la vez: pestañas con barra roja abajo, como el menú principal (Gemini, 3-nov:
   las píldoras negras "se veían de IA" y no eran del sistema del sitio) */
.promo-encabezado-pestanas { align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--gris-borde); margin-bottom: 0; }
.promo-encabezado-pestanas h2, .promo-encabezado-pestanas > .ver-todos-seccion { padding-bottom: 8px; }
.promo-encabezado-pestanas > .ver-todos-seccion { margin-left: auto; }
.promo-pestanas { display: flex; align-items: flex-end; gap: 4px; margin-bottom: -1px; }
.promo-pestana { appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--gris-onofre-medio); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
  font-family: var(--font-display), sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .01em; padding: 8px 12px 6px;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.promo-pestana span { font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: var(--radius-sm);
  background: var(--blanco); border: 1px solid var(--gris-borde); color: var(--gris-onofre-medio); transition: all .15s ease; }
.promo-pestana:hover { color: var(--gris-onofre-oscuro); background: rgba(0, 0, 0, .03); border-bottom-color: var(--gris-borde-fuerte); }
.promo-pestana:hover span { color: var(--gris-onofre-oscuro); border-color: var(--gris-borde-fuerte); }
.promo-pestana:focus-visible { outline: 2px solid var(--rojo-onofre); outline-offset: -2px; }
.promo-pestana[aria-selected="true"] { color: var(--gris-onofre-oscuro); background: transparent; border-bottom-color: var(--rojo-onofre); }
.promo-pestana[aria-selected="true"] span { background: rgba(255, 8, 0, .08); border-color: rgba(255, 8, 0, .3); color: var(--rojo-onofre); }
.promo-panel-nota { margin: 0 0 12px; padding: 8px 0 0; font-size: 13px; color: var(--gris-onofre-medio); }
.promo-panel-nota a { color: var(--rojo-onofre); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.promo-panel-nota a:hover { color: var(--gris-onofre-oscuro); }
@media (max-width: 768px) {
  .promo-encabezado-pestanas { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 0; border-bottom: 0; }
  .promo-encabezado-pestanas h2, .promo-encabezado-pestanas > .ver-todos-seccion { padding-bottom: 0; }
  .promo-pestanas { order: 3; width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--gris-borde); margin-bottom: 0; }
  .promo-pestanas::-webkit-scrollbar { display: none; }
  .promo-pestana { font-size: 15px; padding: 8px 10px 6px; }
  .promo-panel-nota { font-size: 12px; padding-top: 6px; margin-bottom: 8px; }
}
/* Página /promociones/ */
.lista-promociones { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; padding-top: 24px; padding-bottom: 40px; align-items: start; }
.promo-tarjeta:not(.con-imagen) { border-top: 4px solid var(--rojo-onofre); }
.promo-tarjeta { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--gris-onofre-oscuro); }
.promo-tarjeta:hover { border-color: var(--gris-borde-fuerte); box-shadow: var(--shadow-card); }
.promo-tarjeta-img .promo-img { height: auto; }
.promo-tarjeta-texto { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.promo-tarjeta-nombre { font-size: 18px; }
.promo-tarjeta-pct { font-weight: 600; color: var(--rojo-onofre-hover); }
.promo-tarjeta-fin { font-size: 13px; color: var(--gris-onofre-medio); }
.promo-tarjeta-cta { margin-top: 6px; font-weight: 600; color: var(--rojo-onofre); }
@media (max-width: 400px) { .lista-promociones { grid-template-columns: minmax(0, 1fr); } }