/* ==========================================================
   As medidas dos campos — as MESMAS na ficha de Utilizadores
   e no "O meu perfil".

   Estavam escritas duas vezes, com números diferentes: a ficha
   com caixas de 40px e letra de 14px, o perfil com 52px e 16px.
   Ao lado uma da outra pareciam duas aplicações.

   Agora os números vivem aqui, uma vez só. Quem os quiser
   mudar muda-os neste sítio e as duas páginas acompanham.
   ========================================================== */

:root {
  --campo-altura: 40px;          /* altura da caixa de um valor */
  --campo-espaco: 9px 10px;      /* o que respira por dentro */
  --campo-canto: 7px;
  --campo-letra: 14px;
  --campo-linha: 22px;
  --campo-fundo: #F0F2FA;        /* a ver */
  --campo-fundo-editar: #EBEEF4; /* a escrever */
  --campo-fundo-foco: #E4E9F2;
  --campo-contorno-foco: #BAC6DE;
  --campo-texto: #20283B;

  --etiqueta-letra: 12px;        /* o nome do campo, por cima */
  --etiqueta-linha: 18px;
  --etiqueta-cor: #727B8E;
  --etiqueta-espaco: 6px;

  --campo-alto: 88px;            /* caixas de texto comprido */
}

/* ----------------------------------------------------------
   "O meu perfil" (.definicoes): segue as mesmas medidas.
   Fica aqui, e não nas regras gerais de .campo, porque essas
   também servem o ecrã de entrar e o criar conta — ali os
   campos são altos de propósito ("usa-se com luvas").
   ---------------------------------------------------------- */

.definicoes .campo label,
.definicoes .campo > label {
  display: block;
  margin-bottom: var(--etiqueta-espaco);
  font-size: var(--etiqueta-letra);
  line-height: var(--etiqueta-linha);
  font-weight: 500;
  color: var(--etiqueta-cor);
}

.definicoes .campo input,
.definicoes .opcao-dentro select,
.definicoes .opcao-dentro .campo-livre,
.definicoes .ficha select,
.definicoes .ficha .campo-livre {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--campo-altura);
  height: var(--campo-altura);
  padding: var(--campo-espaco);
  border: 0;
  border-radius: var(--campo-canto);
  background: var(--campo-fundo-editar);
  color: var(--campo-texto);
  font-family: inherit;
  font-size: var(--campo-letra);
  font-weight: 500;
  line-height: var(--campo-linha);
  box-shadow: none;
  transition: background .15s, outline-color .15s;
}

/* os textos compridos (Sobre, formações, entregas) são mais altos */
.definicoes .opcao-dentro textarea.campo-livre,
.definicoes .ficha textarea.campo-livre,
.definicoes textarea.campo-livre {
  height: var(--campo-alto);
  min-height: var(--campo-alto);
  overflow: auto;
  resize: none;
}

.definicoes .campo input::placeholder,
.definicoes .campo-livre::placeholder { color: #A0A6B8; font-weight: 400; }

.definicoes .campo input:hover,
.definicoes .opcao-dentro select:hover,
.definicoes .opcao-dentro .campo-livre:hover { border-color: transparent; }

.definicoes .campo input:focus,
.definicoes .opcao-dentro select:focus,
.definicoes .opcao-dentro .campo-livre:focus,
.definicoes .ficha select:focus,
.definicoes .ficha .campo-livre:focus {
  background: var(--campo-fundo-foco);
  border: 0;
  outline: 2px solid var(--campo-contorno-foco);
  outline-offset: 1px;
  box-shadow: none;
}

/* o espaço entre campos, como na ficha */
.definicoes .linha-campos { gap: 16px 20px; }
.definicoes .opcao-dentro .campo { margin-bottom: 16px; }
.definicoes .opcao-dentro .campo:last-of-type { margin-bottom: 0; }

/* o Guardar de cada secção: o mesmo que os Guardar do resto do site */
.definicoes .opcao-dentro .botao-app {
  width: auto; min-width: 160px; min-height: 44px;
  padding: 0 24px; margin-top: 18px;
  border-radius: 10px; font-size: 15px; font-weight: 700;
}

/* a etiqueta "quem vê" ao lado do nome do campo */
.definicoes .campo label .quem-ve { margin-left: 8px; font-weight: 500; }

/* ----------------------------------------------------------
   O resto do site: Calendário, O meu dia, Lembretes, Obras,
   Manutenções e Assistências.

   Cada um destes ecrãs tinha as suas medidas: 38px aqui, 40px
   ali, cantos de 10px, uns com fundo branco e contorno, outros
   com fundo liso. Passam todos a seguir os mesmos tokens.

   Enumeram-se os sítios onde há campos, em vez de se mexer nas
   dezenas de regras espalhadas pelo estilos.css: assim vê-se
   num sítio só o que está a mandar, e desfaz-se tirando isto.

   FICAM DE FORA, de propósito:
    · o ecrã de entrar, o criar conta e o registar — os campos
      são altos para se usarem com luvas (está escrito no
      estilos.css, ao lado da altura);
    · o .ev-titulo — é o título de uma marcação nova, desenhado
      para ser grande, e não uma caixa de valor.
   ---------------------------------------------------------- */

.ecra-app :is(.ev-linha, .obra-linha, .obra-campo, .manut-nova, .material-form,
               .progresso-nova, .progresso-editar, .resumo-novo, .partilha-procura,
               .obra-sec-editar)
  :is(input:not([type="checkbox"]):not([type="radio"]):not(.ev-titulo), select, textarea) {
  box-sizing: border-box;
  min-height: var(--campo-altura);
  height: var(--campo-altura);
  padding: var(--campo-espaco);
  border: 0;
  border-radius: var(--campo-canto);
  background: var(--campo-fundo-editar);
  color: var(--campo-texto);
  font-family: inherit;
  font-size: var(--campo-letra);
  font-weight: 500;
  line-height: var(--campo-linha);
  box-shadow: none;
}

/* as caixas de texto comprido crescem, não ficam com 40px */
.ecra-app :is(.ev-linha, .obra-linha, .obra-campo, .manut-nova, .material-form,
               .progresso-nova, .progresso-editar, .obra-sec-editar) textarea {
  height: var(--campo-alto);
  min-height: var(--campo-alto);
  overflow: auto;
  resize: none;
}

.ecra-app :is(.ev-linha, .obra-linha, .obra-campo, .manut-nova, .material-form,
               .progresso-nova, .progresso-editar, .resumo-novo, .partilha-procura,
               .obra-sec-editar)
  :is(input, select, textarea):focus {
  background: var(--campo-fundo-foco);
  border: 0;
  outline: 2px solid var(--campo-contorno-foco);
  outline-offset: 1px;
  box-shadow: none;
}

.ecra-app :is(.ev-linha, .obra-linha, .obra-campo, .manut-nova, .material-form,
               .progresso-nova, .progresso-editar, .resumo-novo, .partilha-procura)
  :is(input, textarea)::placeholder { color: #A0A6B8; font-weight: 400; }

/* o Dia e a Hora do Calendário tinham uma regra mais forte, com outro fundo */
.ecra-app .cal-novo-dentro .ev-linha :is(input[type="date"], input[type="time"]) {
  background: var(--campo-fundo-editar);
}