/* =========================================
   [10] ESTILOS PARA EL SELECT DE CATEGORÍAS
   --------------------------------------------
   Mejora la apariencia del filtro por categoría
   y lo adapta al estilo visual tipo Amazon.
============================================ */

/* Estilo principal del select dentro del contenedor filtro */
.alcansan-filtro-categorias select {
  width: 100%; /* Ocupa todo el ancho del contenedor padre */
  padding: 10px 14px; /* Espaciado interno cómodo para texto */
  font-size: 16px; /* Tamaño de letra legible */
  border-radius: 8px; /* Bordes redondeados para estilo moderno */
  border: 2px solid #ccc; /* Borde gris claro por defecto */
  
  /* Fondo blanco con ícono SVG de flecha hacia abajo alineada a la derecha */
  background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat right 12px center;
  background-size: 12px 7px; /* Tamaño del icono */
  
  cursor: pointer; /* Cursor de mano para indicar que es interactivo */
  
  /* Transiciones suaves para el cambio de borde y sombra */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  
  /* Quita estilos nativos de select en distintos navegadores */
  -webkit-appearance: none; 
  -moz-appearance: none;
  appearance: none;
  
  outline: none; /* Quita el contorno por defecto al enfocar */
}

/* Cambios visuales al pasar el mouse o cuando el select está enfocado */
.alcansan-filtro-categorias select:hover,
.alcansan-filtro-categorias select:focus {
  border-color: #0073aa; /* Cambia el borde a azul para resaltar */
  box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); /* Añade sombra azul suave */
}

/* Estilos especiales para dispositivos táctiles o sin hover */
/* Se elimina la imagen de fondo (icono SVG) y se suaviza el borde */
@media (hover: none) {
  .alcansan-filtro-categorias select {
    background-image: none; /* Sin icono, para evitar problemas en móviles */
    border-color: #bbb;     /* Borde más claro y discreto */
  }
}

/* Contenedor padre del select */
/* Limita el ancho máximo y da un margen inferior para separación */
.alcansan-filtro-categorias {
  max-width: 320px;   /* Ancho máximo fijo para buen tamaño en desktop */
  margin-bottom: 25px; /* Espacio abajo para separar de otros elementos */
}