form fieldset {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
}

input, select, textarea {
    margin-bottom: 0.5em;
}

form input,
form select,
form textarea {
  box-sizing: border-box;
  max-width: clamp(20ch, 50%, 47ch);
}

form textarea {
    height: 100%;
    resize: vertical;
}

form input:not(:focus):not(:valid),
form textarea:not(:focus):not(:valid),
form select:not(:focus):not(:valid) {
  background-color: var(--primario);
  border: 2px solid transparent;
  box-shadow: none;
  outline: none;
}

form input:focus:not(:valid),
form textarea:focus:not(:valid),
form select:focus:not(:valid) {
  color: var(--terciario);
  outline: none;
  border: 2px solid var(--primario);
  box-shadow: none;
}

form input:valid,
form textarea:valid,
form select:valid {
  background-color: var(--terciario);
  color: #595959;
  border: none;
  outline: none;
  box-shadow: none;
  caret-color: var(--primario);
}

/* Elimina decoración de los select ya validados */
form select:valid {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
}
