/* --- Estilo para el Menú Desplegable de Portfolio (VERSION MEJORADA) --- */

/* Contenedor principal del dropdown */
.portfolio-types-dropdown {
  position: relative;
  width: 100%;
  /* Ocupa todo el ancho de su columna */
  max-width: 400px;
  /* Ajusta este valor si quieres un ancho máximo específico */
  margin: 0 auto;
  /* Para centrarlo si usas max-width y su contenedor es más grande */
}

/* Estilo principal del <select> */
.portfolio-types-dropdown select {
  /* --- Apariencia y espaciado --- */
  width: 100%;
  padding: 18px 45px 18px 25px;
  /* Ajuste del padding: arriba/abajo, derecha (para la flecha), izquierda */
  font-size: 20px;
  /* Tamaño de fuente */
  line-height: 1.5;
  /* Altura de línea para mejor legibilidad */
  border-radius: 8px;
  /* Bordes redondeados más pronunciados */
  cursor: pointer;

  /* --- Colores y borde (como en la imagen de referencia) --- */
  background-color: #ffffff;
  /* Fondo blanco */
  color: #333333;
  /* Texto gris oscuro */
  border: 1px solid #e0e0e0;
  /* Borde gris muy claro y sutil */

  /* --- Quitar la flecha por defecto del navegador --- */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* --- Añadir una flecha personalizada (SVG más estilizada, como en la imagen) --- */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  /* Posiciona la flecha un poco más centrada verticalmente */
  background-size: 18px auto;
  /* Tamaño de la flecha */

  /* --- Sombra sutil para el efecto de "elevación" --- */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  /* Sombra muy ligera */

  /* --- Transición suave para los efectos --- */
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

/* Efecto al pasar el ratón por encima (hover) */
.portfolio-types-dropdown select:hover {
  border-color: #c0c0c0;
  /* Borde un poco más oscuro al pasar el ratón */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  /* Sombra un poco más pronunciada */
}

/* Efecto al hacer clic (focus) */
.portfolio-types-dropdown select:focus {
  outline: none;
  /* Quita el borde por defecto */
  border-color: #007bff;
  /* Un color azul estándar para el foco, puedes cambiarlo */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  /* Resplandor azul suave */
}