/* Contenedor principal */
.select-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Label */
.select-label {
  color: var(--gray-2);
  /* Gris 2 */
  display: block;
  margin-bottom: 4px;
}

/* Select estilizado sin borde, solo línea inferior */
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--gray-4);
  /* Gris 4 */
  padding: 8px 12px 7px;
  background: transparent;
  cursor: pointer;

  .placeholder-text {
    color: var(--black-2);
  }
}

/* Placeholder */
.placeholder-text {
  color: var(--gray-3);
  /* Gris 3 */
}

/* Icono del dropdown */
.icon-dropdown {
  font-family: "Material Symbols Rounded";
  font-size: 18px;
  color: var(--gray-3);
  /* Gris 3 */
  position: absolute;
  right: 12px;
  transition: transform 0.3s ease;
}

/* Cambiar color cuando está abierto */
.select-container.open .icon-dropdown {
  color: var(--orange-infolaft);
  /* Naranja inolfat */
  transform: rotate(180deg);
}

/* Hover: cambia el color del borde */
.select-wrapper:hover {
  border-color: var(--orange-infolaft);
  /* Naranja inolfat */
}

/* Cuando se abre el select */
.select-container.open .select-wrapper {
  border-color: var(--orange-infolaft);
  ;
  /* Naranja inolfat */
}


/* Opciones desplegadas */
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--white);
  /* Blanco */
  border: 1px solid var(--gray-4);
  /* Gris 4 */
  border-top: none;
  border-radius: 4px;
  box-shadow: 0px 3px 6px #00000029;
  z-index: 10;
  display: none;
}

.select-container.open .select-options {
  display: block;
}

/* Opción del select */
.select-options div {
  color: var(--black-2);
  padding-left: 10px;
  padding-top: 11px;
  padding-bottom: 7px;
  cursor: pointer;
}

/* Hover sobre opciones */
.select-options div:hover {
  background-color: var(--input-press);
}