/* ==========================================================================
   ANOVA — os cards de documento da area do cliente.
   --------------------------------------------------------------------------
   (03/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-*.

   O QUE MUDA: os cards deixam de ser blocos empilhados e viram LINHAS — icone,
   titulo e detalhe a esquerda; o botao e a etiqueta de estado a direita. O
   js/app.js e servido as duas lojas e esta congelado.

   (09/09) AS MEDIDAS SAO AS DA REFERENCIA, lidas do componentes.css dela e nao
   estimadas por print: item 13px 15px, icone 36, titulo 13px, detalhe 11,5px,
   botao 7px 13px, pilula 4px 10px em 10px.

   (09/09) TRES COISAS QUE A REFERENCIA NAO TEM somem daqui: a caixa "Escolher
   arquivo" nativa, o paragrafo de instrucao e a segunda linha com "Abrir
   documento salvo / Excluir documento".

   ⚠️ O QUE ESCONDE A CAIXA DE ARQUIVO SO VALE SOB `.anova-doc`, e essa classe so
   e posta pelo js/anova-documentos.js. E ele quem faz o botao "Anexar" abrir o
   seletor — sem isso, o app.js:4868 exige um arquivo ja escolhido na caixa que
   este CSS acabou de esconder, e o envio fica IMPOSSIVEL. Presa a classe, uma
   falha do JS devolve a tela de hoje, que funciona. Nao troque `.anova-doc` por
   um seletor solto aqui.

   O CARD DE RECEITA FICA DE FORA da grade: ele nao e um documento so, e sim uma
   LISTA de receitas, cada uma com nome, estado e botoes proprios. Forcar a lista
   dentro de uma linha de quatro colunas embaralharia os itens. Ele recebe a
   mesma casca (borda, raio, respiro) e mantem o miolo dele — mas perde a caixa
   de arquivo igual aos outros, porque o botao dele tambem passa a abrir o
   seletor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A casca, comum a todos
   -------------------------------------------------------------------------- */

.client-doc-card {
  padding: 13px 15px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio);
  background: var(--anova-branco);
  box-shadow: none;
}

/* O app.css:5171 levanta o card 2px e joga sombra no hover. Numa lista de
   linhas isso e ruido: cada passada do mouse empurra a linha para cima e as
   vizinhas parecem tremer. A referencia nao tem hover nenhum na .doc-item. */
.client-doc-card.anova-doc:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--anova-linha-n);
}

/* --------------------------------------------------------------------------
   A linha
   --------------------------------------------------------------------------
   `display: contents` no cabecalho e o que permite isto sem tocar na marcacao:
   ele deixa de gerar caixa propria e o icone e o titulo, que estao DENTRO dele,
   passam a ser itens da grade do card. Sem isso, icone e titulo estariam presos
   juntos numa unica celula e nao daria para o icone atravessar as duas linhas.

   Cada filho conhecido tem posicao declarada. O que nao for conhecido cai na
   regra final e ocupa a largura toda, numa linha propria — e como o motivo de
   rejeicao e o aviso de erro aparecem inteiros em vez de espremidos numa coluna.
   -------------------------------------------------------------------------- */

.client-doc-card:not([data-doc-card="receitas"]) {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 13px;
  row-gap: 3px;
}

.client-doc-card:not([data-doc-card="receitas"]) .client-doc-head {
  display: contents;
}

.client-doc-card:not([data-doc-card="receitas"]) .client-doc-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: var(--anova-raio-p);
  background: var(--green-soft);
  border: 1px solid var(--anova-linha-n);
  color: var(--anova-verde-700);
  /* O app.css:5177 poe gradiente verde escuro e sombra. A referencia usa fundo
     claro com o traco verde, e o icone e desenho, nao botao. */
  box-shadow: none;
}

.client-doc-card:not([data-doc-card="receitas"]) .client-doc-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.client-doc-card:not([data-doc-card="receitas"]) .client-doc-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--anova-tinta);
  text-align: left;
}

/* A LINHA DE DETALHE. Na referencia (conta.js:760) traz nome do arquivo, data de
   envio e validade. A loja guarda a URL, nao esses campos — entao ela recebe o
   que existe: o link do documento salvo, o nome do arquivo recem-escolhido, ou
   "falta enviar". Quem cria a div e o js/anova-documentos.js. */
.client-doc-card:not([data-doc-card="receitas"]) .anova-doc-linha {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 12px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--anova-tinta-2);
  text-align: left;
}

/* Linha vazia nao pode abrir buraco: sem isto o titulo sobe e desce conforme o
   documento tenha ou nao detalhe a mostrar, e a lista fica desalinhada. */
.client-doc-card .anova-doc-linha:empty { display: none; }

/* O link "Abrir documento salvo" carrega `.client-doc-text` (app.js:4190) — a
   MESMA classe do paragrafo de instrucao. Aqui ele e um link pequeno. */
.client-doc-card .anova-doc-linha .client-doc-text {
  max-width: none;
  font-size: 11.5px;
  color: var(--anova-verde-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.anova-doc-falta {
  color: #b4453c;
  font-weight: 600;
}

/* O nome do arquivo recem-escolhido pode ser longo; corta com reticencias em vez
   de empurrar o botao para fora da linha. */
.anova-doc-escolhido {
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--anova-tinta);
}

/* --------------------------------------------------------------------------
   O que a referencia nao tem
   --------------------------------------------------------------------------
   ⚠️ As tres regras abaixo dependem de `.anova-doc`, posta pelo JS. Ver o aviso
   do topo: sem a classe, esconder a caixa de arquivo deixa o envio impossivel.
   -------------------------------------------------------------------------- */

/* A caixa "Escolher arquivo". Quem abre o seletor passa a ser o proprio botao. */
.client-doc-card.anova-doc .client-doc-file-input { display: none; }

/* O paragrafo de instrucao. Nao some do produto: o JS o move para o balao do
   (i), que ja existe ao lado do titulo. Filho DIRETO so — o link do documento
   salvo tem a mesma classe e mora dentro da linha de detalhe. */
.client-doc-card.anova-doc:not([data-doc-card="receitas"]) > .client-doc-text {
  display: none;
}

/* A caixa de acoes salvas, agora vazia: o JS moveu o link para a linha de
   detalhe e o "Excluir documento" para junto do "Anexar". O atributo so existe
   depois que a mudanca deu certo. */
.client-doc-card.anova-doc .client-doc-saved-actions[data-anova-movido="1"] {
  display: none;
}

.client-doc-card:not([data-doc-card="receitas"]) .client-doc-upload-area {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* O app.css:5362 poe `padding-top: 14px` e `border-top` na area de envio —
     faz sentido quando ela e o rodape de um card empilhado, mas aqui ela e uma
     COLUNA: a borda vira um risco vertical solto no meio da linha. Zerar os dois
     e obrigatorio; zerar so a borda deixaria o botao 14px abaixo do centro. */
  padding: 0;
  border-top: 0;
}

/* (13/10) O ACEITE DO COMPROVANTE MORA DENTRO DA AREA DE ENVIO (app.js:4584), e
   nao solto no card como a regra "tudo que nao foi previsto" mais abaixo supunha.
   Na coluna `auto` acima, o paragrafo de ~400 caracteres vira a largura da coluna
   e esmaga o titulo: "Comprovante de residencia" quebrado letra a letra e o
   "Anexar" por cima dele. Caso real: todo paciente novo da ANOVA sem comprovante,
   desde a grade de 03/09.
   A saida e so de layout, com `display: contents` na area (o mesmo truque do
   cabecalho, acima): o botao volta para a coluna 3, na mesma linha dos outros
   cards, e o aceite e a mensagem descem para linhas proprias sob o titulo. No
   celular nao precisa — la a area ja ocupa a largura toda.
   ⚠️ COMPLIANCE: NAO tirar o aceite de dentro da area por JS. A trava do
   app.js:5044 procura o checkbox a partir do botao, DENTRO da area; fora dela o
   checkbox nao e encontrado e o comprovante passa SEM o aceite, sem erro. O
   `display: contents` so muda a caixa desenhada — no DOM o aceite continua la. */
@media (min-width: 721px) {
  .client-doc-card:not([data-doc-card="receitas"]) .client-doc-upload-area:has(.client-doc-termos-aceite) {
    display: contents;
  }

  .client-doc-card:not([data-doc-card="receitas"]) .client-doc-upload-area:has(.client-doc-termos-aceite) > .client-doc-upload-btn {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .client-doc-card:not([data-doc-card="receitas"]) .client-doc-upload-area:has(.client-doc-termos-aceite) > .client-doc-termos-aceite {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  .client-doc-card:not([data-doc-card="receitas"]) .client-doc-upload-area:has(.client-doc-termos-aceite) > .client-doc-upload-message {
    grid-column: 2 / -1;
    grid-row: 4;
  }
}

.client-doc-card:not([data-doc-card="receitas"]) .client-doc-status {
  grid-column: 4;
  grid-row: 1 / span 2;
  margin: 0;
}

/* Tudo que nao foi previsto ocupa a largura inteira, numa linha propria: o
   motivo da rejeicao, o aviso de erro do envio e o aceite do comprovante sao
   textos longos e ficariam ilegiveis espremidos numa coluna.

   A linha de detalhe e a caixa de acoes salvas ficam de fora da regra: a
   primeira tem posicao propria na coluna 2, e a segunda esta escondida. Sem
   estas duas excecoes o "Abrir documento salvo" volta a abrir a segunda linha
   que a referencia nao tem. */
.client-doc-card:not([data-doc-card="receitas"]) > *:not(.client-doc-head):not(.client-doc-text):not(.client-doc-status):not(.client-doc-upload-area):not(.anova-doc-linha):not(.client-doc-saved-actions) {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   A etiqueta de estado
   --------------------------------------------------------------------------
   As cores vem das classes que o app.js JA poe. Nao inventamos estado novo: so
   pintamos o que ele diz.

   ATENCAO: "Aguardando envio" e "Documento enviado" saem com a MESMA classe, sem
   modificador. Por isso o neutro e cinza e nao vermelho — pintar de vermelho
   pintaria tambem o documento que ja foi enviado e so nao passou pela validacao,
   dizendo ao associado que falta algo que nao falta.
   -------------------------------------------------------------------------- */

.client-doc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-neutro);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--anova-tinta-2);
}

/* O app.css poe um ponto colorido antes do rotulo (:5299) e uma borda por
   estado (:5309-5312). A `.doc-estado` da referencia nao tem nem um nem outro —
   a cor do fundo ja diz o estado, e a 10px o ponto vira sujeira.

   Estes dois seletores sao (0,3,x) de proposito: as regras por estado do app.css
   sao (0,2,0) e venceriam um `.client-doc-status` solto. */
.client-doc-card.anova-doc .client-doc-status { border: 0; }
.client-doc-card.anova-doc .client-doc-status::before { display: none; }

.client-doc-status.is-aprovado {
  background: var(--green-soft);
  color: var(--anova-verde-800);
}

/* Ouro ESCURECIDO nos dois avisos: o #b98f41 da marca sobre o creme claro nao
   passa no contraste de texto, e aqui e etiqueta de 9,5px em caixa alta — o
   corpo mais dificil de ler que existe nesta tela. */
.client-doc-status.is-analise,
.client-doc-status.is-atencao {
  background: var(--anova-creme-2);
  color: #7a5b1f;
}

.client-doc-status.is-rejeitado {
  background: rgba(180, 69, 60, 0.10);
  color: #8c3229;
}

/* --------------------------------------------------------------------------
   O CARD PENDENTE

   Tracejado, como a caixa do laudo que ainda nao existe na referencia: mesma
   gramatica para "isto esta previsto e ainda nao chegou". A cor vem do
   `--alerta` de la (#b4453c).

   A classe e posta pelo js/anova-documentos.js, e nao por CSS: o app.js usa a
   MESMA classe para "Aguardando envio" e "Documento enviado" (app.js:4144 e
   4154), entao daqui os dois sao indistinguiveis.
   -------------------------------------------------------------------------- */

.client-doc-card.anova-doc-pendente {
  border-style: dashed;
  border-color: rgba(180, 69, 60, 0.26);
}

.client-doc-card.anova-doc-pendente .client-doc-icon {
  background: rgba(180, 69, 60, 0.07);
  border-color: rgba(180, 69, 60, 0.26);
  color: #b4453c;
}

/* O botao do card pendente e o unico preenchido da lista: e a acao que
   desbloqueia o cadastro. Nos demais, anexar e substituir algo que ja esta la —
   util, mas nao urgente. */
.client-doc-card.anova-doc-pendente .client-doc-upload-btn {
  background: #b4453c;
  border-color: #b4453c;
  color: #ffffff;
}

.client-doc-card.anova-doc-pendente .client-doc-upload-btn:hover {
  background: #9d3a32;
  border-color: #9d3a32;
  color: #ffffff;
}

/* Pendente e o unico estado sem modificador que precisa de cor propria. O
   seletor alcanca so a pilula que NAO tem modificador — as outras cinco
   continuam com a sua. */
.client-doc-card.anova-doc-pendente .client-doc-status:not([class*="is-"]) {
  background: rgba(180, 69, 60, 0.10);
  color: #8c3229;
}

/* --------------------------------------------------------------------------
   O asterisco de obrigatorio

   Dourado e colado no rotulo, para se ler como marca e nao como parte da
   palavra. So aparece em termo associativo e ANVISA — ver o porque no
   js/anova-documentos.js.
   -------------------------------------------------------------------------- */

.anova-doc-obrig {
  margin-left: 3px;
  font-weight: 700;
  color: #b4453c;
}

/* A palavra que so o leitor de tela ouve. O asterisco sozinho e simbolo: quem
   navega por audio nao tem como saber que ele significa "obrigatorio". */
.anova-doc-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Os botoes
   -------------------------------------------------------------------------- */

/* O "Excluir documento" entra na lista porque o JS o move para dentro da
   `.client-doc-upload-area`, ao lado do "Anexar" — na referencia nao ha segunda
   linha de acoes. */
.client-doc-upload-btn,
.client-doc-sign-btn,
.client-doc-saibamais-btn,
.client-doc-card.anova-doc .client-doc-delete-btn {
  width: auto;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-branco);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--anova-tinta-2);
  cursor: pointer;
  transition: border-color var(--anova-transicao-r), color var(--anova-transicao-r);
}

/* O app.css:5377 da `padding: 13px 22px` aos botoes DENTRO da area de envio, e
   o seletor de la e (0,2,0) — o meu acima e (0,1,0) e perderia. Este e (0,3,0)
   e devolve a medida da referencia. Sem ele o botao fica com o dobro da altura
   da pilula ao lado. */
.client-doc-card.anova-doc .client-doc-upload-area .client-doc-upload-btn,
.client-doc-card.anova-doc .client-doc-upload-area .client-doc-sign-btn,
.client-doc-card.anova-doc .client-doc-upload-area .client-doc-saibamais-btn,
.client-doc-card.anova-doc .client-doc-upload-area .client-doc-delete-btn {
  padding: 7px 13px;
  font-size: 11.5px;
}

.client-doc-upload-btn:hover,
.client-doc-sign-btn:hover,
.client-doc-saibamais-btn:hover,
.client-doc-card.anova-doc .client-doc-delete-btn:hover {
  border-color: var(--anova-verde-600);
  color: var(--anova-verde-800);
}

.client-doc-upload-btn:focus-visible,
.client-doc-sign-btn:focus-visible,
.client-doc-saibamais-btn:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
  /* O tema tem `button:focus-visible { border-radius: 6px }`, que e (0,1,1) e
     venceria o (0,1,0) da regra base. Este seletor e (0,2,0) e devolve a
     pilula — senao o botao trocaria de forma a cada Tab. */
  border-radius: var(--anova-raio-pilula);
}

/* "Assinar" e a acao principal do termo: e ela que resolve o documento sem a
   pessoa ter de sair, imprimir e escanear. Por isso e a unica cheia. */
.client-doc-sign-btn {
  border-color: var(--anova-verde-800);
  background: var(--anova-verde-800);
  color: var(--anova-branco);
}

.client-doc-sign-btn:hover {
  border-color: var(--anova-verde-700);
  background: var(--anova-verde-700);
  color: var(--anova-branco);
}

/* --------------------------------------------------------------------------
   Mensagens dentro do card
   -------------------------------------------------------------------------- */

.client-doc-upload-message {
  font-size: 11px;
  line-height: 1.5;
  color: var(--anova-tinta-2);
  text-align: left;
}

.client-doc-upload-message.error { color: #8c3229; }

.client-doc-motivo {
  padding: 11px 13px;
  border-radius: var(--anova-raio-p);
  background: rgba(180, 69, 60, 0.06);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--anova-tinta-2);
  text-align: left;
}

.client-doc-motivo a { color: var(--anova-verde-700); }

/* --------------------------------------------------------------------------
   O card de receita mantem o miolo, so ganha a casca
   -------------------------------------------------------------------------- */

.client-doc-card[data-doc-card="receitas"] .client-doc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.client-doc-card[data-doc-card="receitas"] .client-doc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--anova-raio-p);
  background: var(--green-soft);
  color: var(--anova-verde-700);
}

/* --------------------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------------------
   Quatro colunas num celular dariam cerca de 70px para o botao e para a
   etiqueta — nao cabe "Anexar documento" nem "EM ANALISE" sem quebrar no meio da
   palavra. Duas colunas: o icone e a coluna de texto em cima; a etiqueta e o
   botao descem, cada um na sua linha, alinhados a esquerda.

   A etiqueta vem ANTES do botao aqui, ao contrario do desktop: empilhado, a
   ordem de leitura passa a ser de cima para baixo, e saber o estado antes de
   decidir a acao e o que faz sentido nessa ordem.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .client-doc-card:not([data-doc-card="receitas"]) {
    grid-template-columns: 36px minmax(0, 1fr);
    row-gap: 12px;
  }

  .client-doc-card:not([data-doc-card="receitas"]) .client-doc-status {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
  }

  .client-doc-card:not([data-doc-card="receitas"]) .client-doc-upload-area {
    grid-column: 1 / -1;
    grid-row: 4;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-doc-upload-btn,
  .client-doc-sign-btn,
  .client-doc-saibamais-btn,
  .client-doc-card.anova-doc .client-doc-delete-btn {
    transition-duration: 0.01ms;
  }
}