/* Eliminar el borde de validación de Bootstrap o del navegador */


/* Mejora el diseño de los ítems de resultado */
.search-results div {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.2s;
}

.search-results div:hover {
    background-color: #f8f9fa !important;
    color: #28a745; /* Color verde corporativo */
}
/* Asegura que el contenedor de resultados sea fluido */


#resultados-escritorio {
    width: 500px !important; /* El ancho que definiste */
}
/* Estilos para ocultar texto en móvil y dejar solo iconos */
@media (max-width: 767px) {
  /* Oculta los textos en el menú, dejando solo los iconos visibles */
  .d-flex.align-items-center.ms-auto .me-3,
  .d-flex.align-items-center.ms-auto .text-muted,
  .d-flex.align-items-center.ms-auto b,
  .header-icon-text { /* Asegúrate de que tus textos tengan una clase */
    display: none !important;
  }

  /* Ajustes para el contenedor de iconos si es necesario */
  .d-flex.align-items-center.ms-auto {
    justify-content: space-around; /* Distribuye los iconos uniformemente */
    width: auto;
  }

  /* Asegura que el buscador tenga espacio */
  form.d-flex.mb-3 {
    width: 100%; /* Ocupa todo el ancho */
    margin-top: 10px;
  }

  /* Ajustes para los resultados de búsqueda en móvil */
  #resultados-movil {
    width: 100% !important;
    left: 0 !important;
    top: 100% !important; /* Posiciona justo debajo del formulario */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
}
/* Esto hace que el buscador flote sobre todo, sin mover el menú ni el carrito */
.search-results {
   position: absolute !important; 
    top: 100% !important; /* Se coloca justo debajo de la barra */
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important; /* Muy importante: esto lo pone arriba de cualquier menú */
    background-color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
}
form.d-flex {
    position: relative !important;
}

/* Ajuste específico para móvil */
@media (max-width: 767px) {
   .search-results {
        width: 95vw !important; /* Un poco menos del ancho total */
        left: 2.5vw !important; /* Centrado */
    }
}