body {
  display: flex;
  font-family: 'Roboto', sans-serif;
  min-height: 100vh;
  flex-direction: column;
  background:#fff !important;            /* evita fonditos del tema */
}

main {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

ul.social-list {
  display: flex;
  gap: 10px;
  list-style: none;
  color:#fff;
}

.footer-copyright {
  background-color: #263238  !important; 
  color: #080808;
}

.page-footer{
  background-color: #455a64 !important;
}

.img-small {
   width: 20px;
   height: 20px;
   object-fit: cover;
   display: block;
   margin: 0 auto;
}

.img-modal {
  max-height: 300px; 
  border-radius: 8px;
}

.line-modal {
  margin: 10px 0 20px 0;
}

.nav-style {
  background: white; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.nav-posicion {
  position: relative;
}

.style-hamburguesa {
  line-height: 56px; 
  color: #000;
}

.style-logo {
  display: flex !important; 
  align-items: center !important; 
  height: 56px !important;
}

.style-img-logo {
  height: 55px;
}

.style-menu-desktop {
  line-height: 56px;
}

.custom-hamburguesa {
  display: block !important;
}

@media (min-width: 1024px) {
  .custom-hamburguesa {
    display: none !important;
  }
} 

.custom-menu-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .custom-menu-desktop {
    display: flex;
  }
}

.brand-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 1024px) {
  .brand-logo {
    position: relative;
    left: 0;
    transform: none;
  }
}

.style-sidenav li {
  margin: 15px !important;
  padding: 5px !important;
}

.main-content {
  width: 100%;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  margin-top: 5px;
  margin-bottom:5px;
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.6s ease;
}

html, body, header { margin:0; padding:0; }

/* El contenedor fijo de Materialize no necesita offset manual */
.navbar-fixed,
.navbar-fixed nav { margin:0 !important; }

/* Evitar fondos/bordes indeseados */
.nav-style {
  background: #fff !important;
  border: none !important;      
  box-shadow: none !important;  
}

.main-content.mostrar {
 opacity: 1;
 transform: translateX(0);
}

.custom-menu-desktop a.active {
  position: relative;
  color: #2196F3; 
}

.custom-menu-desktop a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  background-color: #2196F3;
  border-radius: 2px;
}

/* === BLOQUEO NAVBAR ARRIBA (pegado al tope) === */
html, body { margin:0 !important; padding:0 !important; }

.navbar-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 1002;               
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-fixed nav {
  position: static !important; 
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

/* elimina pseudoelementos/separadores */
.navbar-fixed::before, .navbar-fixed::after,
.nav-style::before, .nav-style::after {
  content:none !important; display:none !important;
}

/* Alturas compactas de tus filas */
.nav-posicion { padding: 8px 0 !important; }
.nav-bottom {
  border-top: none !important;   
  box-shadow: none !important;   
}

/* Spacer para que el contenido no quede tapado por el nav fijo */
#nav-spacer { height: 76px; }  
@media (max-width: 992px) { #nav-spacer { height: 90px; } }

/* ===== Buscador general ===== */
.nav-search-form {
  background:#fff !important;   
  border-radius: 12px;
  padding: 0;                
  box-shadow: 0 6px 18px rgba(0,0,0,.08);  
  position:relative;
  display:flex;
  align-items:center;
  height:40px;
  width:100%;                 
  max-width:100%;             
  margin:0;

}
.nav-search-form input[type="search"] {
  width:100%;
  height:100%;
  padding-left:10px;
  padding-right:80px;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:#fff !important;
  border-radius:12px;
}
.nav-search-form .search-actions {
  position:absolute; 
  right:5px; 
  top:0; 
  bottom:0;
  display:flex; 
  align-items:center; 
  gap:6px;
}
.nav-search-form button,
.nav-search-form .dropdown-trigger {
  background:transparent; 
  border:0; 
  outline:none; 
  box-shadow:none;
  height:100%; 
  display:flex; 
  align-items:center;
  cursor:pointer;
}
.nav-search-form input[type="search"]::placeholder {
  padding-left: 10px;  
}

/* Fila inferior con fondo blanco (solo escritorio) */
.nav-bottom {
  background-color: #fff !important;
  padding: 0 20px;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}

/* Ocultar por completo la fila inferior (categorías) en móviles y tablets */
@media (max-width: 1023.98px) {
  .navbar-fixed .nav-bottom {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ===== Fila superior ===== */
.top-row {
  display:flex;
  align-items:center;
  gap:12px;
}

/* Logo fijo a la izquierda */
@media (min-width:992px){
  .brand-logo{ 
    position:relative; 
    left:0; 
    transform:none; 
    margin:0; 
  }
}

/* Grupo derecho: buscador + carrito */
.right-group {
  display:flex;
  align-items:center;
  gap:12px;           
  margin-left:auto;   
}

/* Desktop: buscador visible en la fila superior, móvil oculto */
.search-desktop{ display:none; }
.search-mobile{ display:block; padding:10px 0; }

/* ====== Anchos responsivos ====== */
@media (min-width:768px){        
  .nav-search-form{ max-width:520px; }  
}
@media (min-width:1200px){       
  .nav-search-form{ max-width:680px; }  
}

@media (min-width:992px){
  .search-desktop{ display:flex !important; }
  .search-mobile{ display:none !important; }
}

/* Mobile: logo centrado, carrito a la derecha, buscador abajo */
@media (max-width:991px){
  .top-row{ justify-content:space-between; }
  .brand-logo{ margin:0 auto; }
}

/* El grupo derecho puede crecer y alinea a la derecha */
@media (min-width: 992px){
  .right-group{
    flex: 1;
    justify-content: flex-end;
    gap: 14px;
  }
}

@media (min-width:1200px){
  .search-desktop{ flex: 0 1 70%; }   
  .nav-search-form{ max-width: 460px; }  
}


/* === Ajustes especiales para móvil: ocupar todo el ancho sin huecos === */
@media (max-width: 991px){
  .search-mobile{
    background:#fff !important;     /* bloque sólido detrás */
    padding:0;                      /* sin espacios */
  }
  .search-mobile .nav-search-form{
    width:100% !important;
    margin:0 !important;
    background:#fff !important;     /* barra sólida */
    border-radius:0;                /* recta de lado a lado */
    border-left:0; border-right:0;
    box-shadow:none !important;     /* sin sombra que deje ver atrás */
  }
  .search-mobile .nav-search-form input[type="search"]{
    background:#fff !important;
    border-radius:0;
  }
}

/* === Estilos para botones Cotizar / Agregar en modales de producto === */
/* Botón WhatsApp tipo 'pill' (más compacto, con fallback SVG si falta el icono de Material Icons) */
.btn-wsp {
  background: linear-gradient(180deg,#27d66b,#1aa64f);
  color: #fff;
  border: none;
  padding: 8px 12px; /* menos ancho para que no se alargue */
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(37,214,107,0.14);
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 0;
}
/* Si Material Icons existe, oculta su texto (evita mostrar la palabra 'whatsapp' si falta el glifo)
   y usamos un ::before con SVG como fallback visible siempre. */
.btn-wsp i.material-icons { display: none; }
.btn-wsp:hover { filter: brightness(0.95); }

/* Preferir el SVG inline dentro del botón. Si el markup incluye <svg> lo estilizamos aquí. */
.btn-wsp svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin-right: 6px !important;
  display: inline-block !important;
}

/* Hacer que el modal sea column-flex para poder fijar el footer dentro del contenedor del modal */
.modal {
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.modal .modal-content {
  overflow: auto;
  flex: 1 1 auto; /* ocupa el espacio restante y permite scroll interno */
  position: relative;
}

/* Footer de acciones del modal: reproduzco layout (btn a la izquierda/centro y Agregar a la derecha)
   y lo hago sticky para que permanezca visible cuando el contenido se desplace. */
.custom-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fff; /* fondo para separarlo del contenido al hacer scroll */
  position: sticky;
  bottom: 0;
  z-index: 12;
  box-shadow: 0 -6px 10px rgba(0,0,0,0.04);
}
.custom-modal-actions .left { flex: 1 1 auto; display: flex; justify-content: flex-start; }
.custom-modal-actions .right { flex: 0 0 auto; display: flex; justify-content: flex-end; }

/* Botón Agregar con bordes semiredondos */
.custom-modal-actions .right .btn,
.custom-modal-actions .right .prod-add-btn {
  border-radius: 8px;
}

@media (max-width: 420px) {
  .custom-modal-actions { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .custom-modal-actions .left, .custom-modal-actions .right { justify-content: center; }
  .btn-wsp { justify-content: center; }
}

/* Fin: Estilos Cotizar/Agregar */

/* Acciones del producto justo debajo de la imagen (visibles al abrir el modal) */
.product-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
}
.product-actions .btn-wsp { padding: 8px 12px; }
.product-actions .btn { border-radius: 8px; }
@media (max-width: 420px) {
  .product-actions { flex-direction: column; gap: 10px; }
  .product-actions .btn { width: 100%; justify-content: center; }
}

/* Estilo 'outline' para el botón Agregar dentro de los modales (tanto en product-actions como en modal-footer) */
.custom-modal-actions .right .btn,
.product-actions .prod-add-btn {
  background: transparent !important;
  color: #1e88e5 !important; /* azul para texto */
  border: 1.5px solid rgba(30,136,229,0.18) !important; /* borde sutil */
  box-shadow: none !important;
  padding: 8px 12px !important;
}
.custom-modal-actions .right .btn i,
.product-actions .prod-add-btn i {
  color: #1e88e5 !important;
}
.custom-modal-actions .right .btn:hover,
.product-actions .prod-add-btn:hover {
  background: rgba(30,136,229,0.06) !important;
}

/* Igualar tamaño y comportamiento de ambos botones en .product-actions */
.product-actions .btn,
.product-actions .prod-add-btn,
.product-actions .btn-wsp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 140px !important; /* asegurar ancho consistente */
  height: 40px !important;     /* asegurar altura consistente */
  padding: 0 14px !important;  /* padding horizontal consistente */
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.product-actions .prod-add-btn { background: transparent !important; }
.product-actions .btn-wsp { border-radius: 999px !important; }

@media (max-width: 420px) {
  .product-actions .btn,
  .product-actions .prod-add-btn,
  .product-actions .btn-wsp {
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
  }
}

/* Asegurar que sólo el icono inline SVG se muestre (no usar material-icons dentro de .btn-wsp) */
.btn-wsp i.material-icons { display: none; }

/* Reglas para el SVG dentro del botón por si alguna plantilla lo inserta como <svg> */
.btn-wsp svg { background: transparent; }