/* ==================================================
   FORMULARIOS - PANEL CONTROL
================================================== */

.form-control {
  max-width: 640px;
  margin: 32px auto;
  padding: 24px;
}

.form-control h2 {
  margin-bottom: 20px;
  font-size: 20px;
  color: var(--azul);
}

.form-control label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--azul);
}

.form-control input,
.form-control select,
.form-control textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 2px solid var(--azul);
  border-radius: 4px;
  font-size: 14px;
  background-color: #ffffff;
  color: var(--azul);
}

.form-control textarea {
  resize: vertical;
  min-height: 100px;
}

.form-control input:focus,
.form-control select:focus,
.form-control textarea:focus {
  outline: none;
  border-color: var(--azul);
}

.form-control button {
  background-color: var(--rojo);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.form-control button:hover {
  opacity: 0.9;
}
/* =========================
   SELECTS
========================= */

.form-control select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #ffffff;
  border: 2px solid var(--azul);
  border-radius: 4px;
  padding: 10px 40px 10px 12px;
  font-size: 14px;
  color: var(--azul);
  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.form-control select:focus {
  outline: none;
  border-color: var(--azul);
}

.form-control select option {
  color: #000;
}