/* ==========================================================================
   CAIXA DE MOVIMENTAÇÕES — as peças `.cai*`, e SÓ elas.

   ⚠ NADA AQUI REDECLARA PEÇA COMPARTILHADA. A tela usa `.chapa`, `.cab`,
   `.ends--zb`, `.fer`, `.fer__chips`, `.fchip`, `.fpan`, `.chip--sel`, `.const`,
   `.tb-env`, `.pag`, `.vazio`, `.bt`, `.trunc` e `.dono` como elas são — o que
   nasce aqui é só o que não existia: os três níveis do feed e o par de datas.

   ⚠ NENHUMA COR, SOMBRA, RAIO OU DURAÇÃO SE DIGITA. Toda medida desenhada sai
   do token em execução: é a lei de *nenhuma cota falsa*, e é ela que faz a
   densidade (`--lh`) e a política de movimento (`--mo`) alcançarem esta tela sem
   uma linha a respeito.

   ⚠ O PREFIXO `.cai` FOI CONFERIDO NOS DOIS SENTIDOS DO DIFF antes da primeira
   linha, e é lei desde a colisão do `.trj*` com `css/trajeto.css`: `cai` não
   aparece em nenhuma outra folha do MVP. E a FOLHA não se chama
   `movimentacoes.css` de propósito — `css/movimento.css` já existe e é a política
   de movimento; dois arquivos com nomes quase iguais e assuntos opostos são a
   próxima colisão esperando acontecer.

   A ANATOMIA, e ela é a do Acervo com um nível a mais:

     .tb-env                      o instrumento — borda, raio, --sup, sh1
       .cai__coleta               nível 1 · a coleta que trouxe   (--sup2)
       .cai__auto                 nível 2 · o auto-dia
         .cai__cab                  a identidade, UMA vez
         .cai__mov                  nível 3 · uma movimentação
       .pag                       o rodapé

   ⚠ É UMA LISTA DENTRO DO ENVELOPE, NÃO UMA TABELA, e por isso não há `.tb-rol`
   nem `--tbmin`: nada aqui é colunar — é hierarquia —, e uma tabela com cabeçalho
   de grupo por `colspan` é frágil e mente para o leitor de tela. O precedente é o
   `.lcart`, que `lista.pinta()` já põe dentro do mesmo `.tb-env`. Consequência
   boa: **não existe estouro horizontal a conter**, por construção.
   ========================================================================== */

/* A CALHA DA MARCA. Ela é a única coluna do feed que não carrega texto, e é o que
   desenha a hierarquia entre o auto e as movimentações dele: tudo alinha na
   mesma sangria, e só o ponto de não lido vive à esquerda dela. */
.cai__auto {
  --cai-marca: 7px;
  --cai-calha: calc(var(--e5) + var(--cai-marca) + var(--e3));
  padding: 0 var(--e5) 0 var(--cai-calha);
}
.cai__auto + .cai__auto { border-top: 1px solid var(--lin); }

/* -------------------------------------------------- nível 1 · a coleta ----
   Ela recua um degrau — `--sup2`, o mesmo que a barra de ferramentas usa dentro
   da chapa —, e é isso que a faz ler como divisória e não como conteúdo. O
   rótulo é `.rot`: mono, caixa alta, `--fg3`, que é o idioma de legenda do DS. */
.cai__coleta {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: 7px var(--e5); background: var(--sup2);
  border-bottom: 1px solid var(--lin);
}
.cai__coleta + * { border-top: none; }
.cai__coleta .rot { min-width: 0; }
.cai__coleta .bt { margin-left: auto; }

/* --------------------------------------------- nível 2 · a identidade ----
   ⚠ ELA APARECE UMA VEZ POR BLOCO. Repetir nº, placa e empresa em oito linhas do
   mesmo dia é ruído — medido: 120 auto-dias na G2L e 146 na GERDAU têm mais de um
   evento no mesmo dia.

   ⚠ A ALTURA SAI DE `--lh`, NUNCA DE UM NÚMERO. `--lh` é 48 ou 56 conforme a
   densidade, e uma altura fixa aqui ignoraria o dial — que é a cota falsa que a
   lei proíbe. */
.cai__cab {
  display: flex; align-items: center; gap: var(--e3);
  height: var(--lh); min-width: 0;
}
.cai__cab > b { font-family: var(--fm); font-size: 12px; font-weight: 500; flex: none; }
.cai__emp { font-size: 12px; color: var(--fg2); min-width: 0; }
.cai__data { margin-left: auto; font-size: 12px; color: var(--fg3); flex: none; }

/* ⚠ O NÓ DO STATUS VEM JUNTO DO NOME DO AUTO, e nunca como um segundo ponto na
   margem: dois pontos lado a lado obrigam a decorar qual é qual. `bola.dono()`
   já traz nó E rótulo numa peça só, que é o que `bola.js` exige — marca de 9 px
   sem rótulo não se discrimina. */
.cai__cab .dono { flex: none; }

/* ------------------------------------------ nível 3 · a movimentação ----
   ⚠ MAIS BAIXA QUE A DO AUTO, E O DEGRAU DERIVA DO MESMO TOKEN. Ela é sub-item;
   a subtração de 12 px acompanha o dial de densidade sozinha. */
.cai__mov {
  position: relative;
  display: flex; align-items: center; gap: var(--e3);
  height: calc(var(--lh) - 12px); min-width: 0;
  width: 100%; text-align: left;
  color: var(--fg);
  transition: color calc(var(--t1) * var(--mo)) var(--suave),
              background calc(var(--t1) * var(--mo)) var(--suave);
}
.cai__mov + .cai__mov { border-top: 1px solid var(--lin); }
/* O RÓTULO É BOTÃO DE VERDADE — é ele que abre o auto pelo teclado. Herda a cor
   da linha (`color: inherit` do reset em `base.css:333`), então o recuo da linha
   lida o alcança sozinho, sem uma segunda regra que pudesse divergir. */
.cai__rot {
  font-size: 12.5px; font-weight: 550; min-width: 0; text-align: left;
  padding: 0; border-radius: var(--r-xs);
}
.cai__nat { font-size: 11.5px; color: var(--fg3); flex: none; }

/* ⚠ A LINHA LIDA RECUA DE COR, E NUNCA DE `opacity`. Existe o precedente
   `.tb tbody tr.decidido { opacity: .5 }`, e ele não serve aqui: com o filtro em
   *Lidas* a lista INTEIRA ficaria a 50%, e opacidade multiplica o contraste de
   tudo junto — texto, nó e marca — sem ninguém medir o resultado.

   ⚠ `--fg2` E NUNCA `--fg3`/`--fg4`. O `--fg4` é token GRÁFICO (piso de 3:1) e
   reprova AA como texto; o `base.css` diz isso com todas as letras. A linha lida
   continua legível — ela recua, não desaparece. */
.cai__mov--lida { color: var(--fg2); }
.cai__mov--lida .cai__rot { font-weight: 400; }

/* A MARCA DE NÃO LIDO — uma, na calha, e some quando a linha é marcada.

   ⚠ `--b600` E NÃO UMA COR NOVA: é a cor que o DS já usa para *aceso* em
   `.fer__busca--on .ico` e em `.chip.on b`. Vermelho, âmbar e verde pertencem
   EXCLUSIVAMENTE ao prazo, e lime é fim de trajeto — nenhum dos quatro entra
   aqui, e é por isso que a marca é a cor da marca. */
.cai__marca {
  position: absolute; left: calc(-1 * (var(--cai-marca) + var(--e3)));
  width: var(--cai-marca); height: var(--cai-marca);
  border-radius: var(--pill); background: var(--b600);
  transition: opacity calc(var(--t1) * var(--mo)) var(--suave);
}
.cai__mov--lida .cai__marca { opacity: 0; }

/* O BOTÃO DE LER encosta na borda direita do bloco e some do fluxo do texto. Ele
   fica visível SEMPRE — não aparece só no hover: o dedo não tem hover, e um
   controle que só existe com o cursor em cima não existe no telefone. */
.cai__ler { margin-left: auto; flex: none; }

@media (hover: hover) {
  /* ⚠ SEM ASSIMETRIA — mesma regra da linha de tabela e do `.lcart__i`: quem
     varre move o cursor rápido, e fundo que atrasa lê como travamento. */
  .cai__mov:hover { background: var(--sup2); cursor: pointer; }
}

/* ⚠ O PAR DE DATAS MUDOU DE NOME E DE CASA EM 20/08/2026 — ele e `.fpan__per`,
   em `telas.css`, porque o Acervo e a Analise passaram a usa-lo tambem. Ele
   nasceu aqui como `.cai__per` quando a caixa era a unica tela com periodo;
   deixa-lo aqui e emitir um segundo nome la seriam DOIS blocos de regra para um
   controle so, divergindo no primeiro ajuste. Nao ha copia: a peca se mudou. */

/* ==========================================================================
   OS BLOCOS `@media` VÃO NO FIM DO ARQUIVO, SEMPRE — media query NÃO acrescenta
   especificidade, e foi assim que um alvo de toque já ficou em 34 px neste
   repositório COM a correção presente no arquivo, 200 linhas acima.
   ========================================================================== */

/* ALVO DE 44 px NO DEDO, com 8 px entre alvos vizinhos. A linha inteira já é o
   segundo alvo (ela abre o card), e é por isso que o botão precisa de área
   própria: dois alvos colados de 26 px viram um só para o polegar. */
@media (pointer: coarse) {
  .cai__ler { min-width: 44px; height: 44px; margin-left: auto; }
  .cai__mov { gap: var(--e4); }
}

/* ABAIXO DE 768 px A LINHA VIRA CARTÃO — sem JS de resize, como
   `lista-cartao.css` faz com a tabela. A identidade e a movimentação refluem
   para coluna, e a data e a natureza descem para a segunda linha. A calha e a
   marca ficam: é ela que responde *o que ainda não vi* com o polegar. */
@media (max-width: 768px) {
  .cai__auto { padding-right: var(--e4); }
  .cai__cab {
    height: auto; padding: 10px 0 6px; flex-wrap: wrap; gap: var(--e2) var(--e3);
  }
  .cai__data { margin-left: 0; width: 100%; }
  .cai__mov {
    height: auto; padding: 9px 0; flex-wrap: wrap; gap: 2px var(--e3);
  }
  .cai__rot { flex: 1 1 100%; }
  .cai__coleta { padding: 7px var(--e4); }
}