/* ===========================================================================
   cobranca.css — SÓ o que a biblioteca não tem.

   Antes de escrever qualquer regra aqui, a peça foi procurada em
   hub/v1/hub-ui.css (`grep "^\." app/hub/v1/hub-ui.css`). O que está usado de
   lá, sem cópia: .cartao .btn .campo .selo .aviso .abas .aba .pagina
   .barra-pagina .filtros .vazio .modal .modal-fundo .recado .indicadores
   .tabela-cx .tabela .dica .recolhe .selo-ok/-vez/-atraso/-espera/-roxo.

   COR: nenhuma cor nova. As cinco gavetas usam os tons de status que os
   irmãos já usam, e as faixas de atraso usam a rampa --a1/--a2/--a3 que já
   existe na paleta (âmbar -> laranja -> vinho). Cor é decisão do Sidney.
   =========================================================================== */

/* ── a missão do dia é uma FILA DE CARTÕES, não uma tabela ────────────────
   Tabela compara; fila se percorre. A Amanda faz uma linha, tica, vai para a
   próxima -- e faz isso no celular, com o polegar. Numa tabela de 8 colunas
   ela rolaria de lado para achar o botão. */
.fila{ display:grid; gap:10px; }

.linha-cliente{ background:var(--papel); border:1px solid var(--borda);
  border-left:3px solid var(--inerte); border-radius:var(--raio-cx);
  padding:13px 15px; display:grid; gap:9px; }
.linha-cliente.g1{ border-left-color:var(--a3); }   /* promessa quebrada */
.linha-cliente.g2{ border-left-color:var(--a2); }   /* retorno vencido  */
.linha-cliente.g3{ border-left-color:var(--vez); }  /* nunca contatado  */
.linha-cliente.g4{ border-left-color:var(--borda); }
.linha-cliente.fora-do-dia{ border-left-color:var(--inerte); background:var(--fundo); }

.lc-topo{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.lc-nome{ font:600 var(--letra-g)/1.3 Sora,Inter,sans-serif; flex:1; min-width:150px;
  overflow-wrap:anywhere; }
.lc-valor{ font:600 var(--letra-num)/1 Sora,Inter,sans-serif; color:var(--texto);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.lc-sub{ font-size:var(--letra-m); color:var(--texto-2); display:flex; gap:5px 14px;
  flex-wrap:wrap; align-items:center; }
.lc-selos{ display:flex; gap:6px; flex-wrap:wrap; }
.lc-acoes{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.lc-acoes .btn{ flex:0 0 auto; }
@media (max-width:560px){
  .lc-acoes .btn-principal{ flex:1 1 100%; }
  .lc-valor{ font-size:21px; }
}

/* as parcelas dentro do cartão do cliente */
.parcelas{ display:grid; gap:3px; font-size:var(--letra-m); color:var(--texto-2);
  border-top:1px solid var(--borda); padding-top:8px; }
.parcelas div{ display:flex; gap:10px; justify-content:space-between; }
.parcelas b{ font-variant-numeric:tabular-nums; font-weight:var(--peso-medio); color:var(--texto); }

/* ── o resumo do topo, pensado para o celular do Sidney ───────────────── */
.resumo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(128px,1fr)); gap:1px;
  background:var(--borda); border:1px solid var(--borda); border-radius:var(--raio-cx);
  overflow:hidden; margin-bottom:var(--esp-g); }
.resumo > div{ background:var(--papel); padding:11px 13px; }
.resumo .n{ font:700 var(--letra-num)/1.1 Sora,Inter,sans-serif; font-variant-numeric:tabular-nums; }
.resumo .r{ font-size:var(--letra-p); color:var(--texto-3); margin-top:2px; }
.resumo .n.alerta{ color:var(--a3); }
.resumo .n.bom{ color:var(--ok); }

/* ── as barras por faixa de atraso ───────────────────────────────────── */
.faixas{ display:grid; gap:5px; }
.faixa{ display:grid; grid-template-columns:72px 1fr auto; gap:9px; align-items:center;
  font-size:var(--letra-p); color:var(--texto-2); }
.faixa .barra{ height:9px; border-radius:5px; background:var(--inerte-bg); overflow:hidden; }
.faixa .barra i{ display:block; height:100%; border-radius:5px; background:var(--inerte); }
.faixa .n{ font-variant-numeric:tabular-nums; color:var(--texto); font-weight:var(--peso-medio);
  min-width:96px; text-align:right; }
/* a rampa que já existe na paleta: escurece conforme piora, então continua
   legível para quem enxerga cor de outro jeito */
.faixa.f1 .barra i,.faixa.f2 .barra i{ background:var(--a1); }
.faixa.f3 .barra i,.faixa.f4 .barra i{ background:var(--a2); }
.faixa.f5 .barra i,.faixa.f6 .barra i,.faixa.f7 .barra i,.faixa.f8 .barra i{ background:var(--a3); }

/* o aviso das perguntas se destaca mesmo recolhido: é decisão esperando */
#recolhePerguntas > summary{ border-left:3px solid var(--espera); background:var(--espera-bg); }
#recolhePerguntas[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* ── a pergunta: o sistema pergunta, a pessoa decide ────────────────── */
.pergunta{ border:1px solid var(--espera); border-left:3px solid var(--espera);
  background:var(--espera-bg); border-radius:var(--raio-cx); padding:13px 15px;
  display:grid; gap:9px; }
.pergunta h3{ font:600 var(--letra-g) Sora,Inter,sans-serif; color:var(--espera); }
/* O BOTÃO PRINCIPAL DA PERGUNTA CONTINUA ROXO. A primeira versão pintava
   TODO botão de dentro da pergunta com o fundo do papel, para eles se
   separarem do amarelo -- e o `.btn-principal`, que tem texto branco, ficou
   branco no branco. Visível na captura, invisível em qualquer medição: o
   botão estava lá, com o texto certo, clicável, e ninguém conseguia lê-lo.
   Só o botão CALMO precisa do fundo de papel. */
.pergunta .btn-calmo{ background:var(--papel); }

/* ── os treze desfechos, em botões grandes o bastante para o polegar ─── */
.desfechos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.desfecho{ appearance:none; text-align:left; cursor:pointer; background:var(--papel);
  border:1px solid var(--borda); border-radius:var(--raio); padding:11px 13px;
  font:var(--peso-medio) var(--letra-bt)/1.35 Inter,sans-serif; color:var(--texto);
  min-height:52px; display:grid; gap:2px; }
.desfecho:hover{ border-color:var(--roxo-suave); background:var(--roxo-tenue); }
.desfecho small{ font-weight:var(--peso-normal); font-size:var(--letra-p); color:var(--texto-3); }
.desfecho[aria-pressed="true"]{ border-color:var(--roxo); background:var(--roxo-tenue); }

/* ── a mensagem pronta, editável antes de abrir o WhatsApp ───────────── */
.mensagem{ width:100%; min-height:210px; font:400 var(--letra-m)/1.5 Inter,sans-serif;
  border:1px solid var(--borda); border-radius:var(--raio); padding:11px 13px;
  resize:vertical; background:var(--papel); color:var(--texto); }
.mensagem:focus{ outline:none; box-shadow:var(--sombra-foco); }

/* ── a linha do tempo da ficha ───────────────────────────────────────── */
.tempo{ display:grid; gap:0; }
.tempo .ev{ display:grid; grid-template-columns:78px 1fr; gap:11px; padding:8px 0;
  border-top:1px solid var(--borda); font-size:var(--letra-m); }
.tempo .ev:first-child{ border-top:0; }
.tempo .qd{ color:var(--texto-3); font-variant-numeric:tabular-nums; }
.tempo .qm{ color:var(--texto-3); font-size:var(--letra-p); }
.tempo .ev.anotado{ background:var(--roxo-tenue); margin:0 -8px; padding-left:8px; padding-right:8px; }

/* ── a descrição original do Conta Azul, sempre visível ─────────────── */
.original{ font:400 var(--letra-p)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--texto-2); background:var(--fundo); border:1px solid var(--borda);
  border-radius:var(--raio); padding:8px 10px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ── a fita da importação ────────────────────────────────────────────── */
.fita{ font-size:var(--letra-m); color:var(--texto-2); display:grid; gap:4px; }
.fita b{ color:var(--texto); font-variant-numeric:tabular-nums; }

.solta{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.a-direita{ margin-left:auto; }
.num{ font-variant-numeric:tabular-nums; }
.fraco{ color:var(--texto-3); }
.quebra{ overflow-wrap:anywhere; }
.esconde{ display:none; }

/* alvo de toque de 24px em qualquer coisa clicável pequena, aumentando a
   ÁREA e não o desenho */
.toque{ position:relative; }
.toque::after{ content:""; position:absolute; inset:-8px; }

/* ═══════════════════ O CELULAR, QUE É ONDE A AMANDA TRABALHA ═══════════════
   Medido no iPhone 13 (390px) com a planilha real: antes destes ajustes, a
   primeira linha da missão ficava a uma tela e meia de rolagem -- o título, a
   linha de apoio, três botões empilhados e seis caixas de resumo vinham antes.
   O sistema é uma fila de tarefas: a primeira tarefa tem de estar à mão. */
@media (max-width: 760px) {
  /* os botões de cima viram uma fileira, não uma pilha */
  .barra-pagina .acoes { gap: 7px; }
  .barra-pagina .acoes .btn {
    flex: 1 1 auto; min-width: 0; font-size: var(--letra-m);
    padding-left: 11px; padding-right: 11px;
  }
  .barra-pagina .sub { display: none; }   /* o título já diz; a linha de apoio custa uma tela */

  /* OS FILTROS EM UMA LINHA SÓ. Empilhados, "Buscar cliente" e "Ordenar"
     custavam 180px de rolagem antes da primeira tarefa -- e nenhum dos dois é
     o que a pessoa veio fazer. Eles continuam lá, do tamanho que merecem. */
  .filtros { display: grid; grid-template-columns: minmax(0,1fr) 122px; gap: 8px; }
  .filtros .campo { min-width: 0; }
  .filtros .campo > span { font-size: var(--letra-p); }
  /* a biblioteca dá min-width aos campos de filtro, pensando em tela larga.
     Numa coluna de 122px isso empurra o select para fora da página, e o
     "Ordem da fila" aparecia cortado na borda direita. */
  .filtros input, .filtros select { min-width: 0; width: 100%; }
  .resumo { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
  .resumo > div { padding: 9px 11px; }
  .resumo .n { font-size: 19px; }
  .filtros { margin-top: 10px; }
}

/* O NÚMERO GRANDE NÃO PODE QUEBRAR EM DUAS LINHAS. "R$ 66.749,15" a 26px não
   cabia na coluna de 128px e virava "R$" numa linha e o valor noutra -- o
   olho lê duas coisas onde há uma. */
.resumo .n {
  overflow-wrap: normal; white-space: nowrap;
  font-size: clamp(17px, 4.2vw, var(--letra-num));
}
.resumo > div:first-child .n { font-size: clamp(16px, 3.6vw, 23px); }

/* o sumário do resumo carrega o essencial quando ele está fechado */
#resumoLinha .conta { margin-left: 6px; }

/* ── a sugestão do leitor de anotações ───────────────────────────────────
   Roxo e não âmbar: não é alarme nem pendência, é um palpite que a pessoa
   confirma ou dispensa. Alarme que grita por um palpite ensina a ignorar o
   alarme de verdade. */
.sugestao{ border:1px solid var(--roxo-tenue); background:var(--roxo-tenue);
  border-left:3px solid var(--roxo-suave); border-radius:var(--raio);
  padding:10px 12px; display:grid; gap:8px; font-size:var(--letra-m); }
.sugestao b{ color:var(--roxo); }
.sugestao .original{ background:var(--papel); }

/* ── como o texto chega no WhatsApp ──────────────────────────────────────
   A bolha usa as medidas do WhatsApp (14,2px/19px e `pre-wrap`), porque o
   que se quer ver aqui é exatamente o que a falta de respiro faz com o
   texto — e isso depende de como as quebras de linha são desenhadas. */
.bolha{ background:#efe7de; border-radius:var(--raio); padding:12px 10px; margin-top:6px; }
.bolha-msg{ background:#d9fdd3; color:#111b21; border-radius:8px 0 8px 8px;
  padding:8px 10px; max-width:88%; margin-left:auto;
  font:400 14.2px/19px -apple-system,"Helvetica Neue",Inter,sans-serif;
  white-space:pre-wrap; overflow-wrap:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.13); }