/* ==========================================================================
   AnySolve Emprego, candidato para colaborador
   Carregar depois de paginas.css, que já traz marca.css atrás.

   Duas coisas, e nada mais: o botão que vai no fim do cartão do especialista
   e o ecrã de confirmação que abre no endereço do currículo.

   Desenho: o ecrã é uma folha branca com filete fino, irmã do cartão do
   curriculos-lista.css, com uma barra vermelha em cima para se ver logo que
   é uma acção e não mais um pedaço do perfil.

   Especificidade: tudo entra por `.as-site .as-contratar*`, que fica em
   0,2,0. Chega para passar à frente dos selectores de elemento do BuddyX sem
   um único !important.

   Telemóvel primeiro: escrito para 360px e cresce a partir daí. Tudo o que
   se toca tem 44px de altura, que é a regra do site.

   Não há aqui bloco nenhum para o tema escuro, e é de propósito: as fichas
   de cor do marca.css já trocam sozinhas, e um bloco só de
   prefers-color-scheme escrito aqui passava por cima de quem escolheu o tema
   claro à mão.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. O botão do cartão
   -------------------------------------------------------------------------- */

/*
 * O cartão tem agora dois botões, e eles ficam um por cima do outro no
 * telemóvel: numa coluna de 360px, dois botões lado a lado ficam com o texto
 * partido a meio da palavra.
 */
.as-site .as-esp-cartao__fim {
  flex-wrap: wrap;
  gap: var(--as-e-2);
}

.as-site .as-esp-cartao__contratar {
  width: 100%;
  min-height: var(--as-toque);
}

/* --------------------------------------------------------------------------
   2. A moldura do ecrã
   -------------------------------------------------------------------------- */
.as-site .as-contratar {
  margin: 0 0 var(--as-e-8);
  padding: var(--as-e-5) var(--as-e-4) var(--as-e-6);
  border: 1px solid var(--as-borda);
  border-top: var(--as-espinha) solid var(--as-marca);
  border-radius: var(--as-r-papel);
  background-color: var(--as-superficie);
  color: var(--as-texto);
}

.as-site .as-contratar:focus {
  outline: none;
}

.as-site .as-contratar__interior {
  max-width: var(--as-larg-texto);
}

.as-site .as-contratar__titulo {
  margin: var(--as-e-2) 0 0;
  font-size: var(--as-t-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--as-texto);
}

.as-site .as-contratar__subtitulo {
  margin: var(--as-e-6) 0 var(--as-e-2);
  font-size: var(--as-t-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--as-texto);
}

.as-site .as-contratar__texto {
  margin: var(--as-e-4) 0 0;
  font-size: var(--as-t-base);
  line-height: 1.55;
  color: var(--as-texto-suave);
}

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

@media (min-width: 768px) {
  .as-site .as-contratar {
    padding: var(--as-e-8) var(--as-e-8) var(--as-e-10);
  }
  .as-site .as-contratar__titulo {
    font-size: var(--as-t-xl);
  }
}

/* --------------------------------------------------------------------------
   3. O que vai, campo a campo
   -------------------------------------------------------------------------- */
.as-site .as-contratar__campos {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--as-borda);
}

.as-site .as-contratar__par {
  display: flex;
  flex-direction: column;
  gap: var(--as-e-1);
  padding: var(--as-e-3) 0;
  border-bottom: 1px solid var(--as-borda);
}

.as-site .as-contratar__chave {
  margin: 0;
  font-size: var(--as-t-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--as-texto-fraco);
}

.as-site .as-contratar__valor {
  margin: 0;
  font-size: var(--as-t-base);
  line-height: 1.45;
  color: var(--as-texto);
  overflow-wrap: anywhere;
}

.as-site .as-contratar__valor--vazio {
  font-style: italic;
  color: var(--as-texto-fraco);
}

@media (min-width: 560px) {
  .as-site .as-contratar__par {
    flex-direction: row;
    align-items: baseline;
    gap: var(--as-e-4);
  }
  .as-site .as-contratar__chave {
    flex: 0 0 11rem;
  }
  .as-site .as-contratar__valor {
    flex: 1 1 auto;
  }
}

/* --------------------------------------------------------------------------
   4. O que não serve, e o que fica por preencher
   -------------------------------------------------------------------------- */
.as-site .as-contratar__reparos,
.as-site .as-contratar__lista {
  margin: var(--as-e-3) 0 0;
  padding-left: var(--as-e-5);
  font-size: var(--as-t-meta);
  line-height: 1.55;
  color: var(--as-texto-suave);
}

.as-site .as-contratar__reparos {
  color: var(--as-marca-tinta);
}

.as-site .as-contratar__reparos > li,
.as-site .as-contratar__lista > li {
  margin: var(--as-e-1) 0 0;
}

.as-site .as-contratar__falta {
  margin-top: var(--as-e-6);
  padding: var(--as-e-4);
  border: 1px solid var(--as-borda);
  border-radius: var(--as-r-papel);
  background-color: var(--as-superficie-2);
}

.as-site .as-contratar__falta .as-contratar__subtitulo {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   5. O formulário
   -------------------------------------------------------------------------- */
.as-site .as-contratar__forma {
  margin-top: var(--as-e-6);
}

.as-site .as-contratar__campo {
  margin-top: var(--as-e-4);
}

.as-site .as-contratar__rotulo {
  display: block;
  margin-bottom: var(--as-e-1);
  font-size: var(--as-t-meta);
  font-weight: 700;
  color: var(--as-texto);
}

.as-site .as-contratar__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-contratar__entrada {
  width: 100%;
  min-height: var(--as-toque);
  padding: var(--as-e-2) var(--as-e-3);
  border: 1px solid var(--as-borda-forte);
  border-radius: var(--as-r-toque);
  background-color: var(--as-superficie);
  font-family: var(--as-letra);
  font-size: var(--as-t-base);
  color: var(--as-texto);
}

.as-site .as-contratar__entrada:focus-visible {
  outline: 2px solid var(--as-foco);
  outline-offset: 2px;
}

@media (min-width: 560px) {
  .as-site .as-contratar__entrada--estreita {
    max-width: 16rem;
  }
}

.as-site .as-contratar__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-3);
  margin-top: var(--as-e-6);
}

.as-site .as-contratar__erro {
  margin: var(--as-e-4) 0 0;
  font-size: var(--as-t-meta);
  font-weight: 600;
  color: var(--as-marca-tinta);
}

/* --------------------------------------------------------------------------
   6. Avisos
   -------------------------------------------------------------------------- */
.as-site .as-contratar__aviso {
  margin-top: var(--as-e-4);
  padding: var(--as-e-3) var(--as-e-4);
  border: 1px solid var(--as-borda);
  border-left: var(--as-espinha) solid var(--as-borda-forte);
  border-radius: var(--as-r-papel);
  background-color: var(--as-superficie-2);
}

.as-site .as-contratar__aviso--bem {
  border-left-color: var(--as-estado-zap);
  background-color: var(--as-estado-zap-tenue);
}

.as-site .as-contratar__aviso--aviso {
  border-left-color: var(--as-gres-300);
}

.as-site .as-contratar__aviso--erro {
  border-left-color: var(--as-marca);
  background-color: var(--as-marca-tenue);
}

.as-site .as-contratar__aviso-titulo {
  margin: 0;
  font-size: var(--as-t-base);
  font-weight: 700;
  color: var(--as-texto);
}

.as-site .as-contratar__aviso-nota {
  margin: var(--as-e-2) 0 0;
  font-size: var(--as-t-meta);
  line-height: 1.5;
  color: var(--as-texto-suave);
}

.as-site .as-contratar__ja {
  margin-top: var(--as-e-4);
}

/* --------------------------------------------------------------------------
   7. Impressão: um ecrã de acção não se imprime
   -------------------------------------------------------------------------- */
@media print {
  .as-site .as-contratar,
  .as-site .as-esp-cartao__contratar {
    display: none;
  }
}