/* ============================================================
    📘 BuscoTec - Estilos limpios y funcionales (versión 2025)
    SOLUCIÓN FINAL CONSOLIDADA (Móvil y Escritorio)
    ============================================================ */

/* --- Reset General y FIX de Fondo Continuo --- */
html, body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Fondo principal es azul (mismo que el navbar) para eliminar la franja blanca */
  background-color: #1877f2 !important; 
  color: #1c1e21;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- Navbar superior fijo (FIX: Línea delgada) --- */
.navbar.fixed-top {
  background-color: #1877f2 !important;
  /* FIX: Elimina la línea sutil bajo el navbar */
  border: none !important; 
  box-shadow: none !important; 
  
  position: fixed;
  top: 0;
  width: 100%;
  /* Alto z-index para estar sobre todo el contenido */
  z-index: 1050; 
  /* Altura aproximada del navbar en tu diseño */
  height: 65px; 
}

/* --- FIX Z-INDEX: Menús y Desplegables --- */
/* Eleva el menú colapsable (hamburguesa) por encima del navbar */
.navbar-collapse {
  z-index: 1060 !important; 
  /* Asegura que el menú colapsado tenga un fondo en móvil */
  background-color: #1877f2; 
}

/* Eleva cualquier submenú dropdown */
.dropdown-menu {
  z-index: 1070 !important; 
}

/* --- Ajuste del body --- */
body {
  /* Se elimina el padding-top. El Hero maneja su posición. */
  padding-top: 0 !important; 
  padding-bottom: 70px; /* espacio para la barra inferior en móvil */
  margin: 0 !important;
  background-color: #f8f9fa; 
}

/* --- Hero principal (FIX de Superposición) --- */
.hero-bg {
  flex: 1 0 auto;
  /* FIX: Margen superior para desplazar el contenido bajo el navbar (65px) */
  margin-top: 65px !important; 
  background: linear-gradient(135deg, #1877f2 0%, #145dbf 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  /* Altura total - Altura navbar (65px) - Altura barra inferior (70px) */
  min-height: calc(100vh - 135px); 
  width: 100%;
  box-sizing: border-box; 
}

.hero-panel {
  width: 100%;
  max-width: 720px;
  background: #ffffff !important;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  padding: 1.5rem;
  text-align: center;
}

.hero-title {
  font-weight: 700;
  margin-bottom: .5rem;
  color: #1877f2;
}

.hero-sub {
  margin-bottom: 1rem;
  color: #3b5998;
}

/* --- Buscador --- */
#buscadorCategoria::placeholder {
  color: #adb5bd;
  font-style: italic;
}

#sugerenciasLista li:hover {
  background-color: #e9f3ff;
  color: #0d6efd;
  font-weight: 500;
}

/* --- Barra inferior (solo móvil) --- */
.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1877f2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
  z-index: 1040;
}

.nav-bottom .nav-link {
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
}

.nav-bottom i {
  display: block;
  font-size: 1.3rem;
}

.nav-bottom .nav-link:hover {
  color: #dbe9ff;
}

/* --- Footer --- */
footer {
  background: linear-gradient(90deg, #1877f2, #0d47a1);
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  padding: 10px 0;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Webpushr (eliminado totalmente) --- */
#webpushr-subscription-button,
div[id^="webpushr-iframe-wrapper"],
iframe[id^="webpushr-iframe"],
div[id*="webpushr"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -9999 !important;
}

/* ============================================================
    ✅ FIX MOVIL FINAL: Centrado del Menú Desplegado y Responsividad
    ============================================================ */

/* Ajustes específicos para móviles y tablets (hasta 991px) */
@media (max-width: 991px) {
    
    /* 1. Contenedor del menú desplegable */
    .navbar-collapse {
        /* Fuerza a ser un Flexbox para facilitar el centrado */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra los elementos de la lista horizontalmente */
        padding: 15px 0; /* Añade un padding superior e inferior para aire */
    }

    /* 2. Lista de navegación dentro del colapsable */
    .navbar-collapse .navbar-nav {
        width: 100%;
        text-align: center; /* Centra el texto de los enlaces */
    }
    
    /* 3. Enlaces individuales */
    .navbar-collapse .nav-item {
        margin: 5px 0; /* Añade espacio vertical entre las opciones */
    }

    .navbar-collapse .nav-link {
        text-align: center; /* Asegura el centrado del texto */
        width: 100%; /* Ocupa todo el ancho disponible */
        display: block;
    }
}

/* Escritorio/Tablet Grande (>= 992px) */
@media (min-width: 992px) {
  body {
    padding-bottom: 0 !important; /* No hay barra inferior, no necesita espacio */
  }
  .hero-bg {
    /* Hero ocupa toda la pantalla menos el navbar (65px) */
    min-height: calc(100vh - 65px) !important; 
  }
  .nav-bottom {
    display: none !important; /* Ocultar barra inferior en escritorio */
  }
}
/* === Mantener el espacio original del botón Home eliminado === */
.nav-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  padding: 6px 20px;
}

/* Cada botón ocupa el mismo ancho que antes */
.nav-bottom .nav-link {
  flex-basis: 33.33%;
  text-align: center;
  color: #fff;
  font-weight: 500;
}

.nav-bottom .nav-link i {
  display: block;
  font-size: 1.4rem;
}

.nav-bottom .nav-link span {
  display: block;
  font-size: 0.8rem;
}
/* === FIX DEFINITIVO PARA MAC/ESCRITORIO === */
@media (min-width: 992px) {

  /* 1. Unificar color de fondo real */
  html, body {
    background-color: #f8f9fa !important; /* gris real */
  }

  /* 2. Eliminar cualquier resto azul del body */
  body {
    background-image: none !important;
  }

  /* 3. Asegurar que NO aparezca barra inferior */
  .nav-bottom {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. Hero ocupa el espacio correcto sin dejar bandas */
  .hero-bg {
    min-height: calc(100vh - 65px) !important;
    padding-bottom: 0 !important;
  }
}