/* ==========================================================================
   AnySolve Especialistas, o formulário do próprio currículo

   Carregar depois de paginas.css. Só símbolos de marca.css: nenhuma cor,
   nenhum espaço e nenhum tamanho de letra nasce aqui.

   Duas ideias mandam nesta folha:

   1. Telemóvel primeiro, a sério. Este formulário vai ser preenchido, na
      esmagadora maioria das vezes, num telefone de 390 pixéis, de pé, numa
      paragem de chapa. Uma coluna só, campos largos, alvos de toque de 44px
      e nada, em ponto nenhum, que empurre a página para o lado.

   2. Peso baixo. Os selectores do plugin vão dentro de :where(), com o
      contexto (.as-site .as-cvf) por fora, que é a mesma conta que marca.css
      já faz nos botões. Assim o tema BuddyX pode continuar a mandar onde tem
      de mandar, e não é preciso um !important em lado nenhum.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. A coluna

   46rem é a mesma largura de leitura dos guias. Mais largo do que isto, num
   portátil, e os campos ficam faixas de dois palmos onde se escreve um nome.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__interior) {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: var(--as-e-10) var(--as-e-16);
}

.as-site .as-cvf :where(.as-sec__cabeca) {
  margin-bottom: var(--as-e-8);
}

.as-site .as-cvf :where(.as-cvf__nota) {
  margin: 0 0 var(--as-e-5);
  font-size: var(--as-t-meta);
  line-height: 1.55;
  color: var(--as-texto-fraco);
}

/* --------------------------------------------------------------------------
   2. Avisos

   O bloco que diz se gravou ou não. Leva role="alert" no HTML, por isso o
   leitor de ecrã já o anuncia; aqui só se trata de o olho o encontrar sem o
   procurar. A cor nunca vai sozinha: há sempre o texto e o filete.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__aviso) {
  margin: 0 0 var(--as-e-6);
  padding: var(--as-e-4) var(--as-e-5);
  background-color: var(--as-papel-fundo);
  border: 1px solid var(--as-borda);
  border-left: 3px solid var(--as-borda-forte);
  border-radius: var(--as-r-papel);
  font-size: var(--as-t-meta);
  line-height: 1.55;
}

.as-site .as-cvf :where(.as-cvf__aviso--bem) {
  background-color: var(--as-estado-zap-tenue);
  border-color: var(--as-estado-zap-borda);
  border-left-color: var(--as-estado-zap);
}

.as-site .as-cvf :where(.as-cvf__aviso--erro) {
  background-color: var(--as-marca-tenue);
  border-color: var(--as-marca-borda);
  border-left-color: var(--as-marca);
}

.as-site .as-cvf :where(.as-cvf__aviso-titulo) {
  margin: 0;
  font-weight: 700;
  color: var(--as-texto);
}

.as-site .as-cvf :where(.as-cvf__aviso-lista) {
  margin: var(--as-e-2) 0 0;
  padding-left: var(--as-e-5);
  color: var(--as-texto-suave);
}

.as-site .as-cvf :where(.as-cvf__aviso-lista li) {
  margin-bottom: var(--as-e-1);
}

.as-site .as-cvf :where(.as-cvf__aviso-nota) {
  margin: var(--as-e-3) 0 0;
  color: var(--as-texto-fraco);
}

/* O aviso recebe o foco depois do salto da âncora, e não pisca contorno. */
.as-site .as-cvf :where(.as-cvf__aviso:focus) {
  outline: none;
}

/* --------------------------------------------------------------------------
   3. Estado da visibilidade

   Cartão igual aos das vagas: papel, filete fino e uma linha de 2px em cima
   que acende a vermelho quando o perfil está mesmo na lista.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__estado) {
  position: relative;
  margin: 0 0 var(--as-e-8);
  padding: var(--as-e-5);
  background-color: var(--as-superficie);
  border: 1px solid var(--as-borda);
  border-radius: var(--as-r-papel);
}

.as-site .as-cvf :where(.as-cvf__estado)::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  height: var(--as-espinha);
  background-color: var(--as-borda-forte);
  border-radius: var(--as-r-papel) var(--as-r-papel) 0 0;
}

.as-site .as-cvf :where(.as-cvf__estado--activo)::before {
  background-color: var(--as-marca);
}

.as-site .as-cvf :where(.as-cvf__estado-linha) {
  margin: 0 0 var(--as-e-3);
}

.as-site .as-cvf :where(.as-cvf__estado-texto) {
  margin: 0;
  font-size: var(--as-t-meta);
  line-height: 1.55;
  color: var(--as-texto-suave);
}

.as-site .as-cvf :where(.as-cvf__estado-prazo) {
  margin: var(--as-e-2) 0 0;
  font-size: var(--as-t-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--as-texto);
}

.as-site .as-cvf :where(.as-cvf__estado-ver) {
  margin: var(--as-e-3) 0 0;
  font-size: var(--as-t-meta);
}

/* --------------------------------------------------------------------------
   4. Grupos de campos

   O <fieldset> tem margens e contorno de origem que variam de navegador para
   navegador. Zeramos e desenhamos nós, com uma linha em cima a separar os
   grupos, que é mais leve do que uma caixa à volta de cada um.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__grupo) {
  margin: 0 0 var(--as-e-8);
  padding: var(--as-e-6) 0 0;
  border: 0;
  border-top: 2px solid var(--as-borda-forte);
  min-inline-size: 0;
}

.as-site .as-cvf :where(.as-cvf__legenda) {
  padding: 0;
  margin-bottom: var(--as-e-4);
  font-size: var(--as-t-rotulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--as-marca-tinta);
}

/* --------------------------------------------------------------------------
   5. Campos

   Rótulo por cima, ajuda por baixo do rótulo, erro a seguir e só depois o
   campo. Esta ordem é de propósito: quem usa leitor de ecrã ouve o que
   correu mal ANTES de chegar à caixa onde vai corrigir, e quem lê com os
   olhos vê a explicação onde ela serve, e não depois de já ter escrito.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__campo) {
  margin-bottom: var(--as-e-5);
}

.as-site .as-cvf :where(.as-cvf__rotulo) {
  display: block;
  margin-bottom: var(--as-e-1);
  font-size: var(--as-t-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--as-texto);
}

.as-site .as-cvf :where(.as-cvf__ajuda) {
  margin: 0 0 var(--as-e-2);
  font-size: var(--as-t-meta);
  line-height: 1.5;
  color: var(--as-texto-fraco);
}

.as-site .as-cvf :where(.as-cvf__erro) {
  margin: 0 0 var(--as-e-2);
  padding-left: var(--as-e-3);
  font-size: var(--as-t-meta);
  font-weight: 700;
  line-height: 1.5;
  color: var(--as-marca-tinta);
  border-left: 3px solid var(--as-marca);
}

.as-site .as-cvf :where(.as-cvf__entrada) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--as-toque);
  padding: var(--as-e-3) var(--as-e-4);
  background-color: var(--as-superficie);
  border: 1px solid var(--as-borda-forte);
  border-radius: var(--as-r-toque);
  color: var(--as-texto);
  font-family: inherit;
  /*
   * 16px cravados. Abaixo disto o Safari do iPhone dá um salto de zoom ao
   * tocar no campo, e a pessoa fica com metade do formulário fora do ecrã
   * sem perceber porquê.
   */
  font-size: var(--as-t-base);
  line-height: 1.45;
}

.as-site .as-cvf :where(.as-cvf__entrada:hover) {
  border-color: var(--as-texto-fraco);
}

.as-site .as-cvf :where(.as-cvf__entrada[aria-invalid="true"]) {
  border-color: var(--as-marca);
}

.as-site .as-cvf :where(.as-cvf__entrada::placeholder) {
  color: var(--as-texto-fraco);
  opacity: 1;
}

.as-site .as-cvf :where(.as-cvf__area) {
  min-height: 7rem;
  resize: vertical;
}

.as-site .as-cvf :where(.as-cvf__lista) {
  /* A seta do sistema fica: é a que o Android e o iOS já sabem desenhar. */
  padding-inline-end: var(--as-e-3);
}

/* O campo dos anos não precisa da largura toda, e assim lê-se como número. */
.as-site .as-cvf :where(.as-cvf__campo--estreito .as-cvf__entrada) {
  max-width: 9rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6. O ficheiro

   O <input type="file"> nativo é feio mas é o que toda a gente reconhece, e
   o botão dele é desenhado pelo sistema. Damos-lhe altura de toque e deixamos
   o resto quieto. O nome do ficheiro pode ser comprido: parte a linha, para
   não empurrar a página de lado.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__ficheiro) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--as-toque);
  padding: var(--as-e-3);
  background-color: var(--as-superficie);
  border: 1px dashed var(--as-borda-forte);
  border-radius: var(--as-r-toque);
  color: var(--as-texto-suave);
  font-family: inherit;
  font-size: var(--as-t-meta);
  line-height: 1.4;
}

.as-site .as-cvf :where(.as-cvf__ficheiro-actual) {
  margin: 0 0 var(--as-e-3);
  font-size: var(--as-t-meta);
  color: var(--as-texto-suave);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7. Caixas de marcar

   Alvo de 44px: a caixa em si tem 22px, mas a etiqueta ao lado é clicável e
   a linha toda tem altura de dedo. Ninguém deve ter de acertar num quadrado
   de 13px para dizer que autoriza.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__caixa) {
  display: flex;
  align-items: flex-start;
  gap: var(--as-e-3);
  min-height: var(--as-toque);
  padding: var(--as-e-2) 0;
  margin-bottom: var(--as-e-3);
}

.as-site .as-cvf :where(.as-cvf__marca) {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--as-marca);
}

.as-site .as-cvf :where(.as-cvf__marca-texto) {
  font-size: var(--as-t-base);
  line-height: 1.45;
  color: var(--as-texto);
  cursor: pointer;
}

/* A autorização é a decisão mais séria da página, e mostra-se como tal. */
.as-site .as-cvf :where(.as-cvf__caixa--forte) {
  padding: var(--as-e-4);
  margin-bottom: var(--as-e-4);
  background-color: var(--as-marca-tenue);
  border: 1px solid var(--as-marca-borda);
  border-radius: var(--as-r-papel);
}

.as-site .as-cvf :where(.as-cvf__caixa--forte .as-cvf__marca-texto) {
  font-weight: 700;
}

.as-site .as-cvf :where(.as-cvf__explica) {
  padding: var(--as-e-4) var(--as-e-5);
  background-color: var(--as-papel-fundo);
  border: 1px solid var(--as-borda);
  border-radius: var(--as-r-papel);
  font-size: var(--as-t-meta);
  line-height: 1.6;
  color: var(--as-texto-suave);
}

.as-site .as-cvf :where(.as-cvf__explica p) {
  margin: 0;
}

.as-site .as-cvf :where(.as-cvf__explica-lista) {
  margin: var(--as-e-2) 0 0;
  padding-left: var(--as-e-5);
}

.as-site .as-cvf :where(.as-cvf__explica-lista li) {
  margin-bottom: var(--as-e-2);
}

.as-site .as-cvf :where(.as-cvf__explica-nota) {
  margin-top: var(--as-e-3);
  color: var(--as-texto-fraco);
}

/* --------------------------------------------------------------------------
   8. Acções
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__accoes) {
  margin-top: var(--as-e-8);
}

/* --------------------------------------------------------------------------
   9. Apagar

   Fechado dentro de um <details>, longe do dedo distraído, e separado do
   resto por uma linha. O botão é de contorno, não é vermelho cheio: apagar
   não se convida, só se permite.
   -------------------------------------------------------------------------- */
.as-site .as-cvf :where(.as-cvf__apagar) {
  margin-top: var(--as-e-12);
  padding-top: var(--as-e-6);
  border-top: 1px solid var(--as-borda);
}

.as-site .as-cvf :where(.as-cvf__apagar-abrir) {
  display: flex;
  align-items: center;
  min-height: var(--as-toque);
  font-size: var(--as-t-meta);
  font-weight: 700;
  color: var(--as-texto-fraco);
  cursor: pointer;
}

.as-site .as-cvf :where(.as-cvf__apagar-abrir:hover) {
  color: var(--as-marca-tinta);
}

.as-site .as-cvf :where(.as-cvf__apagar-corpo) {
  padding-top: var(--as-e-4);
}

.as-site .as-cvf :where(.as-cvf__apagar-texto) {
  margin: 0 0 var(--as-e-3);
  font-size: var(--as-t-meta);
  line-height: 1.55;
  color: var(--as-texto-suave);
}

.as-site .as-cvf :where(.as-cvf__apagar-botao) {
  margin-top: var(--as-e-2);
  border-color: var(--as-marca-borda);
  color: var(--as-marca-tinta);
}

.as-site .as-cvf :where(.as-cvf__apagar-botao:hover) {
  border-color: var(--as-marca);
  background-color: var(--as-marca-tenue);
}

/* --------------------------------------------------------------------------
   10. A partir do tablet

   Muda uma coisa só: a coluna ganha ar em cima e em baixo, e o botão de
   gravar deixa de ocupar a largura toda (isso já vem do as-btn--largo de
   marca.css). Tudo o resto continua igual, porque já estava bem a 390
   pixéis.
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) {
  .as-site .as-cvf :where(.as-cvf__interior) {
    padding-block: var(--as-e-12) var(--as-e-22);
  }
}

/* --------------------------------------------------------------------------
   11. Impressão

   Alguém vai imprimir isto para levar a uma entrevista. As caixas de marcar
   e o bloco de apagar não fazem sentido no papel.
   -------------------------------------------------------------------------- */
@media print {
  .as-site .as-cvf :where(.as-cvf__apagar, .as-cvf__accoes) {
    display: none;
  }

  .as-site .as-cvf :where(.as-cvf__entrada) {
    border-color: var(--as-impressao-linha);
  }
}