/*
 * CAMPOS EDITABLES DE COSTOS MENSUALES
 *
 * La calculadora aparece tanto dentro de /model como en /mortage y /mortgage.
 * Las reglas viven juntas y quedan acotadas a #mortageapp para que ningun otro
 * formulario del sitio cambie de aspecto.
 * El pill replica los valores de `.buscador-box2` en templates/footer.php para
 * que buscador y calculadora pertenezcan al mismo lenguaje visual.
 */
#mortageapp .ctrl input[type="text"],
#mortageapp .ctrl select {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0 0.875rem;
  border: 1px solid #e5d5d5;
  border-radius: 999px;
  background-color: #fff;
  color: #000;
  -webkit-text-fill-color: #000;
  caret-color: #000;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#mortageapp .ctrl input[type="text"]::placeholder {
  color: #999;
  opacity: 1;
}

#mortageapp .ctrl input[type="text"] {
  cursor: text;
}

#mortageapp .ctrl select {
  padding-right: 2.75rem !important;
  cursor: pointer;
}

/*
 * El ancho comunica tambien que clase de dato se espera. Los importes y el
 * plazo admiten textos medianos; porcentaje y tasa solo necesitan unos pocos
 * caracteres. width:100% permite que todos se encojan si el espacio movil es
 * menor que su maximo.
 */
#mortageapp .monthly-costs-field {
  width: 100%;
}

#mortageapp .monthly-costs-field--amount,
#mortageapp .monthly-costs-field--term {
  max-width: 15rem;
}

#mortageapp .monthly-costs-field--short {
  max-width: 9rem;
}

/* La ficha de modelo tenia dos columnas elasticas que estiraban de nuevo los
   campos. Se compactan las columnas, no el panel ni el resumen de resultados. */
#mortageapp .mortage-form-grid {
  grid-template-columns: repeat(2, minmax(0, 15rem));
  column-gap: 1.5rem;
}

#mortageapp .ctrl input[type="text"]:hover,
#mortageapp .ctrl select:hover {
  border-color: #c9b7b7;
  background-color: #fff;
}

#mortageapp .ctrl input[type="text"]:focus,
#mortageapp .ctrl select:focus {
  border-color: #8b7474;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(229, 213, 213, 0.55);
}

#mortageapp .ctrl input[type="text"].invalid,
#mortageapp .ctrl select.invalid {
  border-color: #c6283d;
  box-shadow: 0 0 0 3px rgba(198, 40, 61, 0.14);
}

/* El icono queda dentro del nuevo contorno en las dos variantes del bloque. */
#mortageapp .ctrl .ctrl-arrow {
  top: 50%;
  right: 0.875rem;
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  #mortageapp .ctrl input[type="text"],
  #mortageapp .ctrl select {
    transition: none;
  }
}

@media (max-width: 768px) {
  #mortageapp .mortage-form-grid {
    grid-template-columns: minmax(0, 15rem);
  }
}