/* ==========================================================================
   ANOVA — a tela "Meus dados" da area do cliente.
   --------------------------------------------------------------------------
   (09/09) Arquivo NOVO, so da ANOVA. Nasceu separado porque o
   css/tema-anova-cliente.css ja estava em 360 linhas e o CONVENCOES.md manda
   dividir acima de 400.

   DEPENDE de css/tema-anova.css pelos tokens --anova-*.

   MEDIDAS LIDAS DO componentes.css DA REFERENCIA, nao estimadas por print:

     .conta-subtitulo   10,5px / 600 / letter-spacing .14em / verde / mb 12px
     .campo-rotulo      11px   / 600 / letter-spacing .1em  / cinza / mb 7px
     .campo input       padding 12px 15px, borda 1px, raio p, 13,5px
     .conta-campos      grid 2 colunas, gap 12px 14px, 1 coluna abaixo de 620px

   A MUDANCA QUE SALTA e o valor virar CAIXA. Hoje ele e texto solto de 15px
   (app.css:7775); na referencia e um campo com borda, do mesmo tamanho dos
   campos editaveis. E o que faz a tela parecer cadastro e nao recibo.

   TUDO DEPENDE DE `.anova-dados`, que o js/anova-dados.js poe no
   #clientAccountViewWrap. Se o JS falhar, a tela volta a de hoje inteira, em vez
   de ficar meio redesenhada.

   O CARD SOME. A referencia nao tem card em volta dos campos: eles ficam direto
   no painel, separados so pelo rotulo da secao. Manter a borda e a sombra do
   app.css:7743 poria uma moldura que la nao existe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O card deixa de ser card
   -------------------------------------------------------------------------- */

.anova-dados {
  gap: 0;
}

.anova-dados .client-view-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   O rotulo da secao

   Verde e nao dourado, como na referencia: e titulo de estrutura dentro do
   painel. O dourado da marca esta reservado para kicker e acento.

   O `:first-child` zera o respiro de cima so no primeiro: entre uma secao e a
   seguinte os 26px sao o que separa "Dados pessoais" de "Endereco principal".
   -------------------------------------------------------------------------- */

.anova-dados .client-view-kicker {
  margin: 26px 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anova-verde-700);
}

.anova-dados .client-view-card:first-child .client-view-kicker {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   A grade
   --------------------------------------------------------------------------
   O app.css:7807 vira uma coluna em 640px; a referencia vira em 620px. Este
   seletor e (0,2,0) contra o (0,1,0) de la e vence em QUALQUER largura — media
   query nao soma especificidade. Entao a faixa de 620 a 640px fica com duas
   colunas por decisao, nao por acidente: e a medida da referencia.
   -------------------------------------------------------------------------- */

.anova-dados .client-view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

@media (max-width: 620px) {
  .anova-dados .client-view-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   O campo
   --------------------------------------------------------------------------
   O app.css:7766 usa peso 900 e verde no rotulo. Na referencia o rotulo e
   discreto — 600 e cinza — porque quem tem de saltar e o VALOR. Com o rotulo
   verde e preto o olho bate primeiro no nome do campo, que a pessoa ja sabe.
   -------------------------------------------------------------------------- */

.anova-dados .client-view-label {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anova-tinta-2);
}

/* O valor vira caixa. `min-height` acompanha a altura de um campo de uma linha:
   sem ele, um campo vazio (o "—") encolhe e a linha da grade desalinha. */
.anova-dados .client-view-value {
  min-height: 44px;
  padding: 12px 15px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-p);
  background: var(--anova-branco);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--anova-tinta);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   O botao de editar

   Ele fica no fim de cada card. Sem o card, precisa do proprio respiro — senao
   encosta no ultimo campo.
   -------------------------------------------------------------------------- */

.anova-dados .client-view-footer {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}