/* COLORS */
/*FONTS*/
/*$font-family: 'Space Mono', monospace;
$accent-font-family: 'Space Grotesk', monospace;*/
/*input {
    padding-top: 3px;
}*/
.form__div {
  position: relative;
  height: 100%;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .form__div {
    /*height: 50px;*/
    margin-bottom: 0.4rem;
  }
}

.form__input, .form__dropdown {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  font-size: 1rem;
  border: 1px solid lightgrey;
  border-radius: 0.5rem;
  outline: none;
  padding: 1rem;
  background: none;
  z-index: 1;
}
/*@media (max-width: 768px) {
  .form__input, .form__dropdown {
    height: 45px;
  }
}*/

.form__textarea {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  font-size: 1rem;
  border: 1px solid lightgrey;
  border-radius: 0.5rem;
  outline: none;
  padding: 1rem;
  background: none;
  z-index: 1;
}
@media (max-width: 768px) {
  /*.form__textarea {
    height: 65px;
  }*/
}

.form__label {
  position: absolute;
  left: 1rem;
  top: 10px;
  padding: 0 0.25rem;
  background-color: #fff;
  color: darkgrey;
  font-size: 1.1rem;
  transition: 0.3s;
}
.form__checkbox{
    margin-right:10px;
}
.form__dropdown + .form__label {
  top: -0.7rem;
  left: 1rem;
  color: #1995d2;
  font-size: 16px;
  font-weight: 500;
  z-index: 10;
  /*width: 12%;*/
  padding-left: 10px;
}

.form__dropdown:focus + .form__label {
    color: #1995d2;
    font-size: 12px;
    font-weight: 500;
}

/* Cuando el dropdown pierde el foco, el label vuelve a gris */
.form__dropdown:not(:focus) + .form__label {
  color: darkgrey;
    font-weight: 700;
}

/*Input focus move up label*/
.form__input:focus + .form__label, .form__textarea:focus + .form__label {
  top: -0.3rem;
  left: 0.8rem;
  color: #1995d2;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
}

/*Input focus sticky top label*/
.form__input:not(:placeholder-shown).form__input:not(:focus) + .form__label {
  top: -0.5rem;
  left: 0.8rem;
  font-size: 15px;
  font-weight: 700;
  z-index: 10;
}

/*Input focus*/
.form__input:focus, .form__textarea:focus, .form__dropdown:focus {
  border: 2px solid #1995d2;
}

/*.form__dropdown {
    border: 2px solid $primary-color !important;
}*/

/* ======= FIX label float SOLO para intl-tel-input ======= */
.form__div .iti ~ .form__label {
    left: 3.2rem; /* ajusta */
}

/* Cuando el plugin envuelve el input (tel), usamos focus-within */
.form__div:has(.iti):focus-within > .form__label {
    top: -0.3rem;
    left: 0.8rem;
    color: #1995d2;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
}

/* Cuando el tel tiene contenido (placeholder-shown no vale siempre en tel),
   usamos :has(input[value]) + fallback con clase .has-value (opcional abajo) */
.form__div:has(.iti input.iti__tel-input[value]:not([value=""])) > .form__label {
    top: -0.5rem;
    left: 0.8rem;
    font-size: 15px;
    font-weight: 700;
    z-index: 10;
}

/* Borde azul cuando el input tel está en foco */
.form__div:has(.iti):focus-within .iti__tel-input {
    border: 2px solid #1995d2;
}
input:-webkit-autofill + .form__label{
    top: -0.5rem;
    left: 0.8rem;
    font-size: 15px;
    font-weight: 700;
    z-index: 10;
}

.form__div:has(input[type="tel"]:not(:placeholder-shown):not(:focus)) > .form__label {
    top: -0.5rem;
    left: 0.8rem;
    font-size: 15px;
    font-weight: 700;
}

.form__textarea:not(:placeholder-shown):not(:focus) + .form__label {
    top: -0.5rem;
    left: 0.8rem;
    font-size: 15px;
    font-weight: 700;
    z-index: 10;
}

input.form-control:focus,
input.form-control:active,
input.form-control:-webkit-autofill {
    background-color: #fff !important;
    box-shadow: none !important;
}
input.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #212529 !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #212529 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.form__listbox {
    position: relative;
    width: 100%;
    font-size: 1rem;
    border: 1px solid lightgrey;
    border-radius: 0.5rem;
    outline: none;
    padding: 1rem;
    background: none;
    z-index: 1;
    min-height: 120px; /* Ajusta según el tamaño que desees */
    box-sizing: border-box;
}

.form__listbox:focus {
    border: 2px solid #1995d2;
}

.form__listbox + .form__label {
    top: -0.7rem;
    left: 1rem;
    color: #1995d2;
    font-size: 16px;
    font-weight: 500;
    z-index: 10;
    padding-left: 10px;
}

.form__checkboxList {
    display: flex;
    flex-direction: column;
    gap: 0.7rem; /* Espacio entre opciones */
    margin-top: 1.5rem; /* Espacio entre label y opciones */
}

.form__checkboxList label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.form__checkboxList input[type="checkbox"] {
    margin-right: 8px;
}

.form__checkboxList + .form__label {
    top: -1.5rem;
    left: -0.3rem;
    color: #1995d2;
    font-size: 16px;
    font-weight: 500;
    z-index: 10;
   /* padding-left: 10px;*/
}

.form__radio {
    margin-right:10px;
}

.form__radioList {
    display: flex;
    flex-direction: column;
    gap: 0.7rem; /* Espacio entre opciones */
    margin-top: 1.5rem; /* Espacio entre label y opciones */
}

.form__radioList label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.form__radioList input[type="radio"] {
    margin-right: 8px;
}

.form__radioList + .form__label {
    top: -1.5rem;
    left: -0.3rem;
    color: #1995d2;
    font-size: 16px;
    font-weight: 500;
    z-index: 10;
    padding-left: 10px;
}

.iti .invalid-feedback {
    display: block;
}
/* Custom file input styles */

.form__file + .form__label {
    top: -1.5rem;
    left: -0.3rem;
    color: #1995d2;
    font-size: 16px;
    font-weight: 500;
    z-index: 10;
    padding-left: 10px;
}
.input-width {
    width: 100% !important;
}

@media (max-width: 768px) {
    .input-width {
        width: 200px !important;
    }
}