@charset "utf-8";

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Asume que la altura de la barra de arriba es de 30px */
.main-content {
  margin-top: 120px;
  transition: margin-top 0.5s ease-in-out;
}

/* BARRA ARRIBA (la azul) */
.barra-arriba {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #24499e !important;
  transition: top 0.5s ease-in-out;
  display: flex;
  /* Flexbox para poder controlar el centrado después */
}

a.text-white:hover {
  color: red !important;
}

/* Estilos generales del navbar */
.navbar {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  height: 116px;
  z-index: 999;
  transition: top 0.5s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.container-fluid {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: var(--bs-navbar-padding-x);
  padding-right: var(--bs-navbar-padding-x);
}

.container-fluid>div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 10%;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 114px;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand img {
  margin-top: 0px;
  width: 95px;
  height: 110px;
  flex-shrink: 0;
  transform: translateY(-7px) !important;
}

/****BARRA BUSCADOR*****/
.input-group {
  flex-grow: 0;
  width: 100%;
  max-width: 750px;
  margin: auto 0 auto;
  transform: translateY(0px) !important;
}

/* Para el desplazamiento horizontal del texto en el input */
#buscador {
  overflow: hidden;
  white-space: nowrap;
}

#buscador {
  color: #a5a5a5;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 10000 !important;
}

#navbarNavSecondary {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0px;
  margin-bottom: 0px;
}

.navbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item {
  margin: 0 5px;
}

.nav-link {
  color: black;
  text-decoration: none;
  padding: 5px 15px;
  display: block;
}

.dropdown-menu {
  margin-top: 2px;
  font-size: 14px;
}

/* Oculto por defecto: NO repetir otra regla display que lo sobreescriba */
.contenedor-categorias {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -105px;
  width: 500px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  padding: 16px;
  z-index: 999999 !important;
  box-sizing: border-box;
}

/* Clase que muestra el contenedor como GRID (tres columnas) */
.contenedor-categorias.open {
  display: block !important;
  z-index: 999999 !important;
}

/* Estilos de los hijos */
.hijo {
  max-height: 480px;
  overflow-y: auto;
}

.contenedor-categorias .hijo {
  width: 100%;
  max-height: 480px;
  overflow-y: auto;
  padding: 0;
}

.hijo h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.hijo ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
}

.hijo li {
  padding: 6px 0;
  cursor: pointer;
}

.hijo li:hover {
  color: #007bff;
}

/* Animación del placeholder del buscador*/
#buscador::placeholder {
  color: #808080;
  opacity: 1;
  animation: mover 3s linear infinite alternate;
}

@keyframes mover {
  0% {
    text-indent: 0;
  }

  100% {
    text-indent: 30px;
  }
}

/***configuración del contenedor de boton input del buscador*******/
.buscador-container {
  position: relative;
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
}

#search-results-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  display: none;
}

.search-result-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-size: 11px;
  color: #333;
}

.resaltado-amarillo {
  background-color: yellow;
  font-weight: bold;
}

.search-result-item:hover {
  background-color: #94d8f8;
  /* Un azul claro */
}

.btn.btn-secondary {
  border-top-left-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
  background-color: #e0e0e0 !important;
  border-color: #b0afaf !important;
  color: #333 !important;
  transition: all 0.2s ease-in-out;
  /* Opcional */
  height: 40px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

/* 1. Estilo para el botón cuando el menú desplegable está ACTIVO (clase .show) */
.dropdown-categorias .dropdown-toggle.show {
  background-color: #d1d1d1 !important;
  border-color: #a0a0a0 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  color: #000 !important;
}

/* 2. Estilo para cuando el ratón está encima o el botón tiene FOCO */
.dropdown-categorias .dropdown-toggle:hover,
.dropdown-categorias .dropdown-toggle:focus {
  background-color: #d1d1d1 !important;
  border-color: #a0a0a0 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  color: #000 !important;
  outline: 0;
}

/* 3. Estilo para el botón al ser presionado (por si acaso) */
.dropdown-categorias .dropdown-toggle:active {
  background-color: #d1d1d1 !important;
  border-color: #a0a0a0 !important;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.btn-primary {
  width: 70px;
  height: 40px;
  border-top-right-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
  background-color: blue !important;
  border-color: blue !important;
  font-size: 20px;
}

.btn.btn-primary:hover {
  color: wheat;
}

.form-select,
.form-control,
.btn {
  font-size: 14.5px;
}

.form-control {
  margin-top: 0.1px;
  height: 40px;
  font-size: 14.5px;
}

.form-control:focus {
  margin-top: 0.1px;
  height: 40px;
  border: 1.1px solid #007bff;
  outline: none;
  box-shadow: none;
}

/* ======================================================= */
/* BANNER DEL SLOGAN (BOX-SHADOW AZUL TENUE APLICADO) */
/* ======================================================= */
.header-slogan-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 42px;
  background-color: #004488;
  color: white;
  border-radius: 22.5px;
  font-size: 13px;
  font-weight: bold;
  font-style: italic;
  position: absolute !important;
  top: -40px !important;
  right: -180px !important;
  z-index: 2000;
  box-shadow: 0 0 15px 0 rgba(0, 68, 136, 0.6);
  animation: bannerEntrance 1s ease-out forwards,
    bannerPulse 3s ease-in-out infinite 1s;
  opacity: 0;
  transform-origin: center;
}

/* NUEVO SELECTOR: Ajuste del interlineado para el texto de dos líneas (SE MANTIENE) */
.header-slogan-banner span {
  text-align: center;
  line-height: 1.1;
  padding-top: 1px;
}

/* ======================================================= */
/* ANIMACIONES PARA EL BANNER (Se mantienen sin cambios) */
/* ======================================================= */
@keyframes bannerEntrance {
  from {
    opacity: 0;
    transform: translateY(-20px) translateX(50%);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateX(50%);
  }
}

/* Animación de pulso continuo */
@keyframes bannerPulse {
  0% {
    transform: scale(1) translateX(50%);
  }

  50% {
    transform: scale(1.02) translateX(50%);
  }

  100% {
    transform: scale(1) translateX(50%);
  }
}

/* ======================================================= */
/* LIMPIEZA DEL SLOGAN ANTERIOR (Se mantiene) */
/* ======================================================= */
.d-flex.align-items-center.w-100.justify-content-between::before {
  content: none !important;
  animation: none !important;
  display: none !important;
}

/***** BARRA DE MENÚ PRINCIPAL ******/
/* 🟢 AJUSTE CLAVE 1: Posicionamiento del contenedor NAV */
.navbar-nav {
  display: flex;
  width: 740px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  height: 100%;
  transform: translateY(0px) !important;
  position: relative;
  z-index: 10 !important;
}

/* Contenedor principal del menú: Usamos FLEX para centrar el contenido */
#navbarNavSecondary {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  background: none;
}

/* CRÍTICO: Anular margin/padding de Bootstrap y definir fondo */
.navbar-menu .navbar-nav,
.navbar-menu .nav-item {
  margin-left: -6px !important;
  margin: 0 auto;
}

/* 🟢 MODIFICACIÓN CLAVE 3: Espacio entre opciones (Separación de 40px FORZADA) */
.navbar-nav .nav-item {
  margin: 0px 15px 0px 0px !important;
}

/* Eliminar el margen derecho de la ÚLTIMA opción */
.navbar-nav .nav-item:last-child {
  margin-right: 0 !important;
}

/* 🟢 MODIFICACIÓN CLAVE 4: Estilo del enlace base (Padding vertical reducido) */
.nav-link {
  color: black;
  text-decoration: none;
  display: block;
  padding: 5px 0px 1px 20px;
}

.dropdown-menu {
  font-size: 14px;
}

/* --- Línea animada debajo de las opciones del menú --- */
.navbar-menu .navbar-nav .nav-item .nav-link span {
  position: relative;
  z-index: 1;
}

.navbar-menu .navbar-nav .nav-item .nav-link span::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background-color: #004488;
  width: 0 !important;
  transition: width 0.3s ease-out;
}

.navbar-menu .navbar-nav .nav-item .nav-link:hover span::before,
.navbar-menu .navbar-nav .nav-item.dropdown:hover>.nav-link span::before,
.navbar-menu .navbar-nav .nav-item.active .nav-link span::before {
  width: 100% !important;
}

.navbar-menu .navbar-nav .nav-item.dropdown:hover>.nav-link span::before {
  width: 100%;
  left: 0;
  right: 0;
}

/* --- ESTILOS PARA DROPDOWN (SUBMENÚ) --- */
.nav-item.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0;
  margin-top: -1px;
  display: none;
  position: absolute;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

/* Sobrescribe el estilo de los ítems del menú desplegable al pasar el ratón */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Opcional: Esto asegura que las opciones deshabilitadas mantengan su estilo (si tienes alguna) */
.dropdown-item.disabled:hover,
.dropdown-item:disabled:hover {
  background-color: transparent !important;
  color: #6c757d !important;
}

/* -------------------------------------------------------------------------------------------------- */
/* 🟢 ESTILOS DEL BOTÓN "INFORMACIÓN" (Botón Verde Compacto) */
/* -------------------------------------------------------------------------------------------------- */

.noticias-link {
  background-color: #1b9848 !important;
  color: white !important;
  border-radius: 5px !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  border-bottom: none !important;
  opacity: 1 !important;
  transition: background-color 0.3s ease;
}

.noticias-link span::before {
  content: none !important;
  height: 0 !important;
}

.noticias-link:hover {
  background-color: #4cae4c !important;
  color: white !important;
}

.news-dropdown {
  position: absolute;
  top: 118px;
  left: 68%;
  transform: translateX(-50%);
  width: 300px;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 15px;
  border-radius: 5px;
}

.btn-cerrar-personalizado {
  margin-top: -5px;
  margin-right: 10px;
  background-color: #6c757d !important;
  color: white;
  border: 1px solid #6c757d !important;
  padding: 6px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 22px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-cerrar-personalizado:hover {
  background-color: #5a6268;
  transform: scale(1.05);
}

.btn-finalizar-compra-personalizado {
  margin-top: -5px;
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
  padding: 6px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-finalizar-compra-personalizado:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

/*******MODAL LISTA DESEOS******/
#listaDeseosContenido {
  max-height: 400px;
  overflow-y: auto;
}

#listaDeseosContenido table {
  font-size: 12px;
}

.columna-descripcion {
  width: 800px;
  white-space: normal;
}

/* Para un tamaño un poco más grande y asegurar el color negro */
a.mover-a-carrito i.bi-cart-plus-fill,
a.eliminar-de-deseos i.bi-trash-fill {
  font-size: 22px !important;
  margin-left: 5px;
  color: rgb(141, 141, 141) !important;
}

/* Eliminar completamente cualquier rastro de sombra o fondo en los enlaces de los iconos */
a.mover-a-carrito,
a.eliminar-de-deseos {
  background-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Eliminar cualquier sombra, fondo o color al pasar el ratón (hover) */
a.mover-a-carrito i.bi-cart-plus-fill:hover,
a.eliminar-de-deseos i.bi-trash-fill:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: #343a40 !important;
}

/* Esto agrega un margen de 5px a la derecha del ícono */
a.mover-a-carrito {
  margin-right: 10px;
}

.form-control::placeholder {
  color: #a9a9a9 !important;
}

/* Contenedor de los iconos (persona y carrito) */
.contenedoriconos {
  display: flex;

  justify-content: center;
  align-items: center;
  height: 40px;
  gap: 5px;
  transform: translateY(30px) !important;
}

/* Estilos para ambos iconos */
.bi-cart4 {
  font-size: 30px;
  border-radius: 4px;
  padding: 0px 6px;
  transition: background-color 0.3s ease, border-radius 0.3s ease;
}

/*****ICONO PERSONA Y PERSONA FILL SIN CONTORNO*****/
#loginButtonModal,
#userDropdownButton {
  font-size: 34px;
  outline: none !important;
  border: none !important;
}

/****ICONOS FILL SIN CONTORNO******/
#userDropdownButton:focus,
#userDropdownButton:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.bi-person-circle {
  color: gray;
}

/* Definimos una transición suave para todos los botones de la cabecera
   para que el cambio de color NO sea brusco. */
.btn {
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* EFECTO HOVER: Color y Transformación */
/* Aplicamos el cambio de color al pasar el mouse por encima del botón */
.btn:hover {
  color: #0000ff;
  cursor: pointer;
  transform: translateY(-1px);
}

/* Hover específico para el Carrito (Opcional) */
.bi-cart4:hover {
  color: orangered;
  transform: scale(-1px);
}

/* Asegurar que el color inicial de los íconos sea coherente con su diseño */
/* (Puede ser negro, gris oscuro, o el color por defecto de Bootstrap) */
.bi-person,
.bi-cart4 {
  color: #333;
}

.dropdown-menu.dropdown-menu-end {
  margin-left: -50px;
}


/* REPARACIÓN DE CLIC EN EL MENÚ */
form.d-flex.flex-grow-1.flex-column.align-items-center {
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%) !important;
  top: 55px;
  width: 100%;
  max-width: 750px;
  z-index: 2000 !important;
  overflow: visible !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}

/* 🟢 RE-ACTIVAR CLIC: Solo para los elementos internos del buscador */
form.d-flex.flex-grow-1.flex-column.align-items-center .input-group,
form.d-flex.flex-grow-1.flex-column.align-items-center .contenedor-categorias {
  pointer-events: auto;
}

/* Ajuste para que todos los dropdowns sean compactos e iguales */
.dropdown-menu {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.dropdown-menu .dropdown-item {
  padding: 6px 15px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}


.dropdown-divider {
  margin: 4px 0 !important;
  border-top: 1px solid #e9ecef;
}



































/* ==/******************* PC mediana/GRANDE ****************/
@media screen and (min-width: 1200px) and (max-width: 1399px) {

  /* 1. Forzamos al FORM a mantener su altura 0 para que no empuje nada hacia abajo */
  form.d-flex.flex-grow-1.flex-column.align-items-center {
    position: absolute !important;
    top: 15px !important;
    /* Ajuste para que suba y quede alineado con el logo */
    left: 50%;
    transform: translateX(-50%) !important;
    height: 0 !important;
    z-index: 2000 !important;
  }

  /* 2. Ajuste fino del input-group para que no se vea "caído" */
  .input-group {
    max-width: 620px !important;
    /* Un poco más corto para dar aire a los iconos */
    margin-top: 0 !important;
    /* Quitamos cualquier margen que lo baje */
    display: flex !important;
  }

  /* 3. El Slogan: Lo movemos para que no choque con el buscador ahora que subió */
  .header-slogan-banner {
    right: -100px !important;
    top: 0px !important;
    /* Lo subimos un poco más */

  }

  /* 4. Alineación de los iconos (Carrito/User) */
  .contenedoriconos {
    transform: translateY(22px) !important;
    /* Ajuste para que queden alineados horizontalmente con el buscador */
  }
}













/******************* PC CHICA / LAPTOP (992px - 1199px) ****************/
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .barra-arriba {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* Cambiamos 100vw por 100% para evitar saltos de scroll */
    height: 35px !important;
    /* Un poco más de altura para legibilidad */
    background-color: #004488 !important;
    /* Aseguramos tu azul corporativo */
    transition: top 0.5s ease-in-out !important;
    z-index: 1050 !important;
    /* Para que esté siempre por encima del banner */
  }

  /* 2. Contenedor con márgenes para que no se pegue al borde */
  .barra-arriba .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    /* Más espacio lateral que en tablet */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100% !important;
  }

  /* 3. Ajuste de los textos e iconos arriba */
  .barra-arriba a,
  .barra-arriba span {
    font-size: 13px !important;
    /* Tamaño intermedio ideal */
    font-weight: 500 !important;
  }





  /* 4. Evitar desbordes */
  html,
  body {
    overflow-x: hidden !important;
  }
}




























/******************* PC CHICA / LAPTOP (992px - 1199px) ****************/
@media screen and (min-width: 992px) and (max-width: 1199px) {

  /* 1. BUSCADOR: Posicionamiento absoluto para subirlo al nivel del logo */
  form.d-flex.flex-grow-1 {
    position: absolute !important;
    top: 55px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 550px !important;
    height: auto !important;
    z-index: 1000 !important;
  }

  /* 2. MENÚ: Ajuste de espaciado y tamaño de fuente */
  #navbarNavSecondary {
    margin-top: 5px !important;
  }

  .navbar-nav {
    font-size: 12px !important;
    gap: 2px !important;
  }

  /* 3. ICONOS (Persona y Carrito): Alineación a la derecha del menú */
  .contenedoriconos {
    display: flex !important;
    position: absolute !important;
    right: 20px !important;
    top: 74px !important;
    gap: 12px !important;
    transform: none !important;
  }

  #loginButtonModal,
  #btnCarrito {
    font-size: 28px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
  }

  /* 4. LOGO: Más compacto para laptops */
  .navbar-brand img {
    width: 85px !important;
    transform: translateY(-8px) !important;
  }

  /* 5. SLOGAN: Solo ajustamos posición y tamaño (lo demás se hereda de PC) */
  .header-slogan-banner {
    width: 175px !important;
    /* Un poco más pequeño */
    height: 38px !important;
    font-size: 11px !important;
    /* Fuente reducida */
    top: -38px !important;
    /* Ajuste de altura */
    right: -115px !important;
    /* Ajuste lateral según tu foto */
  }

  /* El span del slogan solo necesita el ajuste de línea si cambió el tamaño de fuente */
  .header-slogan-banner span {
    line-height: 1.0 !important;
  }
}












/******************* @MEDIA PARA TABLET ****************/
@media screen and (min-width: 768px) and (max-width: 991px) {

  .barra-arriba {
    /* Mantenemos position fixed para que pueda subir y bajar */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 30px !important;
    transition: top 0.5s ease-in-out !important;

    /* LA CLAVE: La transición debe estar aquí para que sea lenta */

  }

  /* 2. El contenedor (para quitar el hueco de 20px) */
  .barra-arriba .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* 3. Aseguramos que el body no tenga scroll lateral */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
  }
}











/******************* @MEDIA PARA TABLET (Alineación Final) ****************/
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* 1. EL BUSCADOR: Lo movemos a la derecha y le damos aire */
  .input-group {
    margin-top: 18px !important;
    padding-left: 70px !important;
    /* Lo empuja a la derecha para no chocar con el logo */
    padding-right: 20px !important;
    width: 95% !important;
  }

  /* 2. ICONOS (Persona y Carrito): Los subimos al nivel del logo */
  /* 1. CONTENEDOR DE ICONOS: Los hacemos visibles y flotantes */
  .contenedoriconos {
    display: flex !important;
    position: absolute !important;
    z-index: 4000 !important;
    top: -5px !important;
    /* Ajusta para subir/bajar (Persona y Carrito) */
    right: 90px !important;
    /* Ajusta para mover a la izquierda/derecha */
    gap: 25px !important;
    /* Espacio entre ellos */
    width: auto !important;
  }

  .contenedoriconos i,
  .contenedoriconos svg {
    font-size: 26px !important;
    color: #333 !important;
    /* O el color que prefieras */
  }

  /* 3. MENÚ HAMBURGUESA: Lo rescatamos y posicionamos a la derecha */
  .navbar-toggler {
    display: block !important;
    position: absolute !important;
    top: 25px !important;
    /* Alineado con los iconos */
    right: 15px !important;
    z-index: 5000 !important;
    border: none !important;
    background: transparent !important;
  }


  /* 1. Dibujo de la X cuando el menú está ABIERTO */
  /* Bootstrap quita la clase .collapsed al botón cuando el menú se muestra */
  .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(36, 73, 158, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M6 6l18 18M6 24L24 6'/%3e%3c/svg%3e") !important;
    transition: transform 0.3s ease-in-out !important;
  }

  /* 2. Opcional: Un pequeño efecto de rotación para que se vea profesional */
  .navbar-toggler:not(.collapsed) {
    transform: rotate(90deg) !important;
    transition: transform 0.3s ease-in-out !important;
  }

  /* 3. Aseguramos que las tres rayas vuelvan al cerrar (si Bootstrap no las pone) */
  .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }


  /* 4. EL LOGO: Ajuste de tamaño para tablet */
  .navbar-brand {
    margin-top: -30px !important;
    position: absolute !important;
    left: 10px !important;
  }

  .navbar-brand img {
    width: 98px !important;
  }
}














/******************* @MEDIA PARA TABLET (BLOQUE 3) ****************/
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* 1. ESTADO CERRADO */
  .navbar-collapse {
    display: none !important;
  }

  /* 2. CONTENEDOR DE LA CORTINA (EL CUADRO BLANCO) */
  #navbarNavSecondary.navbar-collapse.show {
    display: block !important;
    position: absolute !important;
    top: 75px !important;
    left: 1% !important;
    width: 98% !important;
    z-index: 4000 !important;
    padding: 10px 0 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    border: none !important;
    background-color: #f8f9fa !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
  }

  /* 3. LIMPIEZA TOTAL DEL PADRE */
  #navbarNavSecondary .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    /* CRUCIAL: Quita el espacio que empuja a la izquierda */
    margin: 0 !important;
  }

  /* 4. ITEMS Y LÍNEAS (Ahora sí centradas) */
  #navbarNavSecondary .nav-item {
    width: 98% !important;
    display: flex !important;
    flex-direction: column !important;
    /* Permite que el submenú baje centrado */
    align-items: center !important;
    border-bottom: 2px solid #e9ecef !important;
  }

  /* 5. TEXTOS E ICONOS */
  #navbarNavSecondary .nav-link {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    color: #24499e !important;
    padding: 14px 0 !important;
    margin: 0 !important;
  }

  /* 6. SUBMENÚS (ELIMINAMOS EL DESPLAZAMIENTO) */
  #navbarNavSecondary .dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    background-color: #f1f1f1 !important;
    border: none !important;
    padding: 0 !important;
    /* CRUCIAL: Bootstrap suele poner padding aquí */
    margin: 0 !important;
    text-align: center !important;
  }

  #navbarNavSecondary .dropdown-menu.show {
    display: flex !important;
    /* Cambiado a flex para centrar hijos */
    flex-direction: column !important;
    align-items: center !important;
  }

  #navbarNavSecondary .dropdown-item {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    margin: 0 !important;
  }


  /* ESTA ES LA REGLA QUE QUITA LA LÍNEA AL ÚLTIMO ITEM (SERVICIOS) */
  #navbarNavSecondary .nav-item:last-of-type {
    border-bottom: none !important;
    height: 52px;
  }


  /* 7. BOTÓN VERDE (RECORTE Y CENTRADO DEFINITIVO) */
  #navbarNavSecondary .noticias-link {
    display: flex !important;
    width: 200px !important;
    /* El recorte que querías */
    height: 40px !important;

    /* EL CAMBIO: margin-left y margin-right en auto fuerzan el centrado horizontal */
    margin: 11px auto !important;

    justify-content: center !important;
    align-items: center !important;
    background-color: #1b9848 !important;
    color: white !important;
    border-radius: 8px !important;

    /* Evitamos cualquier estiramiento de flexbox o Bootstrap */
    flex: none !important;
    text-decoration: none !important;
  }
}











/*******************@MEDIA PARA CELULAR****************/
@media (max-width: 768px) {

  /* 1. Aseguramos que la barra azul no mida más que el cristal del iPhone */
  .barra-arriba {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    overflow: hidden !important;
    transition: top 0.5s ease-in-out !important;
  }

  /* 2. El contenedor interno debe expandirse a los bordes */
  .barra-arriba .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 15px !important;
    margin: 0 !important;
  }

  /* 3. BORRAMOS EL TEXTO PERO NO EL ICONO */
  /* Primero: escondemos todos los textos dentro de la barra azul */
  .barra-arriba span,
  .barra-arriba a {
    font-size: 0 !important;
    text-decoration: none !important;
  }

  /* Segundo: Forzamos a que el ICONO de Twitter (y los otros) sí se vean */
  .barra-arriba i {
    display: inline-block !important;
    font-size: 18px !important;
    color: white !important;
    visibility: visible !important;
    width: auto !important;
  }

  /* 4. ASEGURAMOS QUE EL BLOQUE DE TWITTER SE VAYA A LA DERECHA */
  /* Buscamos el div que contiene a Twitter y lo mandamos al final */
  .barra-arriba .d-flex.align-items-center:last-child {
    margin-left: auto !important;
    display: flex !important;
  }

  /* 5. ELIMINAMOS EL DESBORDE DE ABAJO (Lo que estira la página) */
  .navbar .container-fluid>div:first-child {
    max-width: 100vw !important;
    width: 100% !important;
  }
}




@media (max-width: 768px) {

  /* 1. RESET DEL BODY (Para que nada se mueva a los lados) */
  html,
  body {
    overflow-x: hidden !important;
    position: relative !important;
    width: 100% !important;
  }

  /* 3. AJUSTE AL CONTENEDOR FLUID (El que rodea al amarillo) */
  .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
    /* Alineamos al inicio, no al centro */
  }

  /* 2. ALINEACIÓN DEL LOGO */
  .navbar-brand {
    margin-top: -85px;
    padding-left: 10px !important;
  }

  .navbar-brand img {
    width: 65px !important;
    height: auto !important;
    transform: none !important;
  }


  /* 3. MENÚ HAMBURGUESA: Lo rescatamos y posicionamos a la derecha */
  .navbar-toggler {
    display: block !important;
    position: absolute !important;
    margin-top: 18px !important;
    /* Alineado con los iconos */
    right: 15px !important;
    z-index: 5000 !important;
    border: none !important;
    background: transparent !important;
  }

  /* 1. Dibujo de la X cuando el menú está ABIERTO */
  /* Bootstrap quita la clase .collapsed al botón cuando el menú se muestra */
  .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(36, 73, 158, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M6 6l18 18M6 24L24 6'/%3e%3c/svg%3e") !important;
    transition: transform 0.3s ease-in-out !important;
  }

  /* 2. Opcional: Un pequeño efecto de rotación para que se vea profesional */
  .navbar-toggler:not(.collapsed) {
    transform: rotate(90deg) !important;
    transition: transform 0.3s ease-in-out !important;
  }

  /* 3. Aseguramos que las tres rayas vuelvan al cerrar (si Bootstrap no las pone) */
  .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }



  /* 4. ICONOS (Persona y Carrito) */
  /* Si quieres que los iconos queden debajo del buscador o al lado del logo */
  .contenedoriconos {
    display: flex !important;
    justify-content: center !important;
    width: 30% !important;
    gap: 15px !important;
    margin-top: -140px !important;
    margin-right: 80px;

  }
}








@media (max-width: 768px) {

  /* 1. HUNDIMOS EL BUSCADOR */
  .input-group {
    margin-top: 10px !important;
    padding: 10px 5px !important;
    position: relative !important;
    z-index: 1 !important;
    /* Prioridad mínima */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
  }

  /* 2. SUBIMOS EL CONTENEDOR DE ICONOS (Persona y Carrito) */
  .contenedoriconos {
    position: relative !important;
    z-index: 9999 !important;
    /* Prioridad máxima sobre el buscador */
  }

  /* 3. EL MENÚ DESPLEGABLE */
  #userDropdownMenu {
    position: absolute !important;
    z-index: 10000 !important;
    top: 100% !important;
    /* Que caiga justo debajo del icono */
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.2) !important;
  }

  /* 4. BOTÓN DE LUPA (AZUL) */
  .input-group .btn-primary {
    width: 50px !important;
    border-radius: 0 20px 20px 0 !important;
    z-index: 1 !important;
  }

  /* 5. INPUT BUSCADOR */
  .input-group input#buscador {
    font-size: 13px !important;
    height: 40px !important;
  }

  /* Mantén tus reglas de navbar-toggler aquí abajo igual que las tenías... */
}












@media (max-width: 768px) {

  /* 1. HAMBURGUESA A LA DERECHA */
  .navbar-toggler {
    display: block !important;
    position: absolute !important;
    top: 5px !important;
    right: 10px !important;
    z-index: 5000 !important;
    border: none !important;
    background: transparent !important;
  }

  /* 2. MENÚ DESPLEGABLE PRINCIPAL */
  .navbar-collapse {
    display: none !important;
  }

  .navbar-collapse.show {
    display: block !important;
    position: absolute !important;
    top: 72px !important;
    left: 4px !important;
    width: 98% !important;
    z-index: 4000 !important;
    padding: 5px 0 !important;
    overflow: hidden !important;
    border-radius: 0 0 8px 8px !important;
    background-color: #f8f9fa !important;
  }

  /* 3. LÓGICA DEL SUBMENÚ (ABRIR Y CERRAR AL CLIC) */
  /* Forzamos que esté oculto por defecto */
  .navbar-nav .dropdown-menu {
    display: none !important;
    position: static !important;
    /* Para que empuje el contenido al expandirse */
    width: 100% !important;
    background-color: #f1f1f1 !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Cuando Bootstrap añade .show al dar clic, se muestra */
  /* Al dar otro clic, Bootstrap quita .show y se vuelve a ocultar (se cierra) */
  .navbar-nav .dropdown-menu.show {
    display: block !important;
  }

  /* 4. ESTILO DE LOS LINKS */
  .navbar-nav {
    flex-direction: column !important;
  }

  .nav-item {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 2px solid #f0f0f0 !important;
  }

  .nav-item:last-child {
    border-bottom: none !important;
  }

  .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 14px 10px 14px 30px !important;
    width: 100% !important;
    color: #24499e !important;
    font-size: 16px !important;
    line-height: normal !important;
  }

  /* Estilo para los items dentro del submenú */
  .dropdown-item {
    padding: 12px 10px 12px 50px !important;
    /* Más sangría para sub-items */

    width: 100% !important;
    display: block !important;
  }

  /* 5. BOTÓN INFORMACIÓN */
  .noticias-link {
    width: 130px !important;
    background-color: #1b9848 !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 4px 8px !important;
    margin: 5px 0 5px 30px !important;
    border-bottom: none !important;
  }

  .noticias-link span::before {
    content: none !important;
  }
}







@media (max-width: 768px) {

  /* CONTENEDOR PRINCIPAL (El blanco) */
  .contenedor-categorias {
    position: fixed !important;
    top: 65px !important;
    /* Ajuste para que no tape tu buscador */
    left: 5% !important;
    width: 90% !important;
    /* Mismo ancho */
    height: auto !important;
    max-height: 75vh !important;
    /* Altura máxima controlada */
    overflow-y: auto !important;
    /* Único scroll permitido */
    padding: 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  }

  /* SEGUNDO CONTENEDOR (El de las categorías / .hijo) */
  .contenedor-categorias .hijo,
  .hijo {
    width: 100% !important;
    /* Mismo tamaño que el principal */
    height: 100% !important;
    max-height: none !important;
    /* ELIMINAMOS el límite interno */
    overflow: visible !important;
    /* ELIMINAMOS el scroll interno que aparecía a la mitad */
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Aseguramos que los elementos internos no se salgan */
  .hijo ul {
    width: 100% !important;
    padding: 0 !important;
  }

  .hijo li {
    width: 100% !important;
    font-size: 14px !important;
    /* Mejor legibilidad en celular */
    padding: 10px 0 !important;
    /* Área de clic más cómoda */
    border-bottom: 1px solid #f0f0f0;
  }
}