/* ===================================================================== tema
   O tema escuro é o padrão e vive no :root. O claro só REDEFINE as variáveis
   abaixo — nenhuma regra do arquivo precisa saber qual tema está ativo.
   Por isso não existe cor fixa fora daqui: uma cor "chumbada" numa regra
   ficaria ilegível quando o fundo trocasse.                                */
:root{
  color-scheme:dark;
  --bg:#0e1116; --painel:#161b23; --painel2:#1c222c; --painel3:#242c38;
  --borda:#262e3a; --linha-hover:#1a212b;
  --texto:#e6eaf1; --suave:#96a1b3;
  --marca:#ed145b; --marca2:#f1487f; --marca-rgb:237,20,91; --sobre-marca:#fff;
  /* O leão tem cor própria: no escuro ele é o rosa da marca. */
  --logo:#ed145b;
  --ok:#22c55e; --aviso:#f59e0b; --erro:#ef4444; --info:#38bdf8;
  /* Texto das tags e alertas: no escuro é a versão clara da cor de estado. */
  --ok-texto:#4ade80; --aviso-texto:#fbbf24; --erro-texto:#f87171;
  --info-texto:#7dd3fc; --neutro-texto:#cbd5e1;
  --alerta-ok-texto:#86efac; --alerta-erro-texto:#fca5a5; --alerta-aviso-texto:#fcd34d;
  --sombra-barra:rgba(0,0,0,.45);
  /* Texto sobre o verde: o verde do escuro é claro, então pede tinta escura. */
  --sobre-ok:#08130c;
  --raio:10px;
}

/* --------------------------------------------------------------- tema claro */
:root[data-tema="claro"]{
  color-scheme:light;
  --bg:#f4f6fa; --painel:#ffffff; --painel2:#f2f5f9; --painel3:#e7ecf4;
  --borda:#dde4ee; --linha-hover:#f7f9fc;
  --texto:#141b26; --suave:#5c6879;
  /* A marca clareia demais sobre branco: o tom de link/realce escurece. */
  --marca:#e01055; --marca2:#c40f4a;
  /* Sobre fundo claro o leão vai a preto - é a versão monocromática da marca. */
  --logo:#000;
  --ok:#15a34a; --aviso:#b45309; --erro:#dc2626; --info:#0369a1;
  --ok-texto:#15803d; --aviso-texto:#a16207; --erro-texto:#b91c1c;
  --info-texto:#0369a1; --neutro-texto:#475569;
  --alerta-ok-texto:#166534; --alerta-erro-texto:#991b1b; --alerta-aviso-texto:#92400e;
  --sombra-barra:rgba(0,0,0,.28);
  /* No claro o verde é escuro: aqui a tinta é que precisa ser clara. */
  --sobre-ok:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--marca2);text-decoration:none}
a:hover{text-decoration:underline}

/* O NOME DA LINHA NAO E UM LINK ROSA.
 *
 * Nas listas, o nome do cliente e o ASSUNTO da linha - e o que se le para
 * saber de quem ela e. Pintado da cor da marca, ele competia com tudo o que de
 * fato pede atencao (a tag de atraso, o botao de acao) e ainda deixava a
 * listagem com uma coluna inteira em rosa, onde o olho nao tem onde descansar.
 *
 * E incoerente tambem: na MESMA lista, o nome do lead e texto normal em preto.
 * Dois nomes, dois tratamentos, so porque um deles por acaso e clicavel.
 *
 * Entao aqui o nome fica com a cor do texto, em negrito, e so avisa que e
 * clicavel no hover - que e quando a pergunta "da para clicar?" aparece.
 *
 * NAO E REGRA NOVA: .titulo-tarefa, .card-titulo e .ranking-item ja faziam
 * exatamente isto, cada um por conta propria. As listas de clientes e de leads
 * eram as que tinham ficado de fora. Esta classe e o nome dessa regra, para a
 * proxima lista nao precisar redescobri-la.
 */
.nome-linha{color:var(--texto);font-weight:600}
.nome-linha:hover{color:var(--marca2);text-decoration:underline}

/* ---------------------------------------------------------------- layout */
.app{display:flex;min-height:100vh}
.lateral{
  width:250px;flex:0 0 250px;background:var(--painel);
  border-right:1px solid var(--borda);display:flex;flex-direction:column;padding:18px 14px;
}
.marca{display:flex;gap:10px;align-items:center;padding:6px 8px 18px}
/* Com duas marcas ao lado sobra pouco espaço para o nome, e vários clientes têm
   razão social longa: ele corta com reticências em vez de quebrar a barra. */
.marca > div{min-width:0}
.marca strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca small{color:var(--suave);font-size:11.5px}
/* Leão da Criattus: o SVG usa fill="currentColor", então pintamos por máscara
   e a cor acompanha a variável da marca. */
.logo{
  width:36px;height:36px;flex:0 0 36px;background-color:var(--logo);
  -webkit-mask:url(logo-criattus.svg) center/contain no-repeat;
          mask:url(logo-criattus.svg) center/contain no-repeat;
}
/* Marca da Criattus + logo do cliente, lado a lado. O conjunto inteiro é o
   link que leva à troca da logo — alvo de clique maior do que só o ícone. */
.marca-logos{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.marca-logos:hover{text-decoration:none}
.logo-divisor{width:1px;height:20px;background:var(--borda);flex:0 0 1px}
.logo-cliente{
  width:34px;height:34px;flex:0 0 34px;border-radius:8px;
  object-fit:contain;background:var(--painel2);padding:3px;
}
/* Sem logo enviada: as iniciais do cliente fazem as vezes do ícone de perfil.
   A borda tracejada é o que diz "falta algo aqui, clique". */
.logo-cliente.vazia{
  display:grid;place-items:center;padding:0;background:transparent;
  border:1px dashed var(--borda);color:var(--suave);
  font-size:12px;font-weight:700;letter-spacing:.5px;
}
.marca-logos:hover .logo-cliente.vazia{border-color:var(--marca);color:var(--marca2)}
.marca-logos:hover .logo-cliente{background:var(--painel3)}

/* Mesma dupla, em tamanho maior, na tela de envio da logo. */
.logo-previa{display:flex;align-items:center;gap:12px}
.logo-previa .logo{width:46px;height:46px;flex:0 0 46px}
.logo-previa .logo-divisor{height:28px}
.logo-previa .logo-cliente{width:46px;height:46px;flex:0 0 46px;border-radius:10px}
.logo-previa .logo-cliente.vazia{font-size:16px}
.logo-previa strong{display:block;font-size:15px}
.logo-previa small{color:var(--suave);font-size:11.5px}

.lateral nav{display:flex;flex-direction:column;gap:3px}
.lateral nav a{text-decoration:none}
.menu-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  color:var(--suave);font-size:13.5px;line-height:1.25;
}
.menu-item:hover{background:var(--painel2);color:var(--texto);text-decoration:none}
.menu-item.ativo{
  background:var(--marca);color:var(--sobre-marca);font-weight:600;
  box-shadow:0 2px 10px rgba(var(--marca-rgb),.35);
}
.menu-item.ativo .icone{opacity:1}
/* O SVG toma a cor do link (stroke=currentColor), então o estado ativo,
   o sobrevoo e o repouso não precisam de uma regra por ícone. */
.icone{display:inline-flex;width:18px;height:18px;flex:0 0 18px;opacity:.9}
.icone-menu{display:block}
.rodape-lateral{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--borda);font-size:13px}
.usuario{color:var(--suave);margin-bottom:4px}
.sair{color:var(--suave)}
/* Troca de tema: parece um link do rodapé, não um botão de formulário. */
.trocar-tema{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:4px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--suave);font:inherit;font-size:13px;text-align:left}
.trocar-tema:hover{color:var(--texto)}
/* Sol no escuro ("vá para o claro"), lua no claro. Quem escolhe é o data-tema
   do <html>, e não o script: trocar por JavaScript deixaria o ícone errado no
   instante entre a página pintar e o script rodar. */
.tema-icone{display:none;width:16px;height:16px;flex:0 0 16px;opacity:.85}
.tema-sol{display:inline-flex}
:root[data-tema="claro"] .tema-sol{display:none}
:root[data-tema="claro"] .tema-lua{display:inline-flex}
main{flex:1;padding:26px 30px;max-width:1500px;min-width:0}

/* ---------------------------------------------------------------- topo */
.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:26px 0 12px}
.subtitulo{color:var(--suave);font-size:13.5px;margin:0}

/* ---------------------------------------------------------------- cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.card{background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);padding:16px}
.card .rotulo{color:var(--suave);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.card .valor{font-size:26px;font-weight:650;margin-top:6px}
.card .nota{color:var(--suave);font-size:12px;margin-top:4px}
/* ------------------------------------------------------------------- crm */
/* Listagem: cada coluna em uma linha so; o que for longo ganha reticencias
   (com o texto inteiro no title) em vez de esticar a tabela. */
td.nowrap, th.nowrap{white-space:nowrap}
.cortado{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A tabela do CRM tem que caber na tela SEM rolagem lateral.
   table-layout:fixed faz o navegador respeitar a largura declarada em cada
   coluna em vez de esticar conforme o conteudo; o texto que nao cabe ganha
   reticencias dentro da propria celula (o valor inteiro fica no title). */
.tabela-crm{table-layout:fixed;width:100%;min-width:0;font-size:14px}
.tabela-crm th, .tabela-crm td{padding:10px;overflow:hidden}
.tabela-crm .tag{font-size:11px;padding:2px 7px}
/* Em tela estreita (celular) o .tabela-wrap ja rola sozinho - ali nao ha o
   que fazer com 8 colunas. */
/* O nome tambem corta com reticencias: sem isto a celula clipa no meio da
   palavra, sem aviso nenhum de que faltou texto. */
.destaque-nome{color:var(--marca2);font-weight:650;display:block;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acoes-linha{display:flex;gap:5px;flex-wrap:wrap}
/* Botoes enxutos: a coluna de acoes e a que menos pode crescer. */
.acoes-linha .botao{white-space:nowrap;padding:5px 9px;font-size:12px}
/* Proposta ja publicada: o ponto verde diz "no ar" sem gastar uma coluna. */
.botao.publicada{background:var(--ok);color:var(--sobre-ok)}
.botao.publicada:hover{filter:brightness(1.1)}

/* A coluna de acoes nao precisa mais ficar grudada na direita: com a tabela
   cabendo inteira, ela ja esta sempre visivel. */

/* Cartao clicavel (filtros do CRM): nao pode herdar a cor de link. */
a.card{color:inherit;display:block;transition:border-color .12s}
a.card:hover{text-decoration:none;border-color:var(--marca)}
.card.destaque-erro .valor{color:var(--erro)}
.card.destaque-aviso .valor{color:var(--aviso)}
.card.destaque-ok .valor{color:var(--ok)}

.bloco{background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);padding:18px;margin-bottom:20px}
.bloco h2{margin-top:0}

/* ---------------------------------------------------------------- tabela */
.tabela-wrap{overflow-x:auto;background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--borda);vertical-align:middle}
th{color:var(--suave);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
/* Zebra: a linha par ganha um fundo levemente diferente. Numa tabela larga o
   olho perde a linha no meio do caminho entre a descricao e o valor - a faixa
   e o que segura a leitura ate a outra ponta. Muito discreta de proposito: ela
   guia, e nao compete com as cores de estado (paga, vencida) que vem depois e
   precisam ganhar dela. */
tbody tr:nth-child(even){background:rgba(148,163,184,.045)}
:root[data-tema="claro"] tbody tr:nth-child(even){background:rgba(100,116,139,.045)}
tbody tr:hover{background:var(--linha-hover)}
tbody tr:last-child td{border-bottom:none}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vazio{padding:34px;text-align:center;color:var(--suave)}

/* ---------------------------------------------------------------- tags */
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag-ok{background:rgba(34,197,94,.14);color:var(--ok-texto)}
.tag-baixo{background:rgba(245,158,11,.16);color:var(--aviso-texto)}
.tag-zerado{background:rgba(239,68,68,.16);color:var(--erro-texto)}
.tag-erro{background:rgba(239,68,68,.16);color:var(--erro-texto)}
.tag-neutro{background:rgba(148,163,184,.15);color:var(--neutro-texto)}
.tag-info{background:rgba(56,189,248,.15);color:var(--info-texto)}
.tag-pago{background:rgba(var(--marca-rgb),.16);color:var(--marca2)}
/* Despesa que se repete: roxo para a de valor fixo, ambar para a de valor que
   muda. Cor propria porque a pergunta que ela responde e outra - as demais
   etiquetas dizem O QUE a conta e (categoria, fornecedor), e esta diz se ela
   volta no mes que vem. */
.tag-fixa{background:rgba(168,85,247,.16);color:#c084fc}
.tag-variavel{background:rgba(245,158,11,.16);color:var(--aviso-texto)}
:root[data-tema="claro"] .tag-fixa{background:rgba(147,51,234,.12);color:#7e22ce}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:14px;max-width:780px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
label{display:block;font-size:12.5px;color:var(--suave);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=file],select,textarea{
  width:100%;padding:9px 11px;background:var(--painel2);border:1px solid var(--borda);
  border-radius:8px;color:var(--texto);font:inherit;font-size:14px
}
/* O botão "Escolher arquivo" é desenhado pelo navegador; sem isto ele sai com
   as cores do sistema e destoa dos dois temas. */
input[type=file]::file-selector-button{
  margin:-2px 10px -2px -4px;padding:6px 12px;border-radius:6px;
  border:1px solid var(--borda);background:var(--painel3);color:var(--texto);
  font:inherit;font-size:13px;cursor:pointer
}
input[type=file]::file-selector-button:hover{border-color:var(--marca)}
textarea{min-height:170px;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 2px rgba(var(--marca-rgb),.15)}

/* ------------------------------------------------------------ filtros
   Os campos de filtro (Situação, Categoria, Buscar) estavam apagados: rótulo
   fino e cinza, campo do mesmo tom do painel atrás dele. Numa tela cheia de
   número e etiqueta colorida, eles sumiam — e são o primeiro lugar em que a
   mão vai.

   O reforço é só contraste: rótulo com peso e tinta mais forte, campo com
   fundo e borda que se separam do bloco. Nada de cor de marca, que aqui
   competiria com os cartões e as etiquetas de situação. Vale para o painel
   inteiro, porque todo filtro do sistema usa .filtros. */
.filtros label{color:var(--texto);font-weight:600;font-size:12px;letter-spacing:.2px;text-transform:uppercase;opacity:.75}
.filtros input[type=text],.filtros input[type=date],.filtros input[type=number],.filtros select{
  background:var(--painel3);border-color:var(--borda);font-weight:500
}
.filtros input[type=text]:hover,.filtros input[type=date]:hover,
.filtros input[type=number]:hover,.filtros select:hover{border-color:var(--suave)}
/* Filtro em uso fica marcado: numa tela filtrada, o que explica a lista curta
   é o campo preenchido lá em cima, e ele precisa dizer isso sozinho. */
.filtros .em-uso input,.filtros .em-uso select{border-color:var(--marca);background:rgba(var(--marca-rgb),.06)}
.filtros .em-uso label{opacity:1;color:var(--marca2)}

/* ------------------------------------------------------- fatias (gráfico)
   Uma barra só, de 100%, dividida por cor — e a legenda embaixo com o nome, o
   percentual e o valor.

   Barra e não pizza: responde a mesma pergunta ("quanto de cada") ocupando
   uma faixa de 10px em vez de um quadrado, e a tela do dinheiro já tem cinco
   cartões e uma tabela disputando altura. Pizza também obriga a comparar
   ângulos, que é a leitura mais difícil que existe num gráfico.

   A largura de cada pedaço vem de flex-grow com o VALOR, e não do percentual
   arredondado: sete fatias de uma casa decimal somam 100,1% e sobraria (ou
   faltaria) um fio no fim da barra. */
.fatias{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--painel3);gap:1px}
.fatias > i{display:block;min-width:2px}
.fatias-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.fatias-legenda > span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--suave);white-space:nowrap}
.fatias-legenda b{color:var(--texto);font-weight:600}
.fatias-legenda i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
/* Sete cores que se distinguem nos dois temas e não brigam com o rosa da
   marca — ele é do painel, não do dado. A última é cinza de propósito: é
   sempre a fatia "Outras", e cinza diz "resto" sem precisar de legenda. */
/* Cada categoria tem uma MATIZ, e cada lancamento dentro dela um TOM dessa
   matiz. "Equipe" e azul; Sergio e um azul, Weber e outro - e olhando a barra
   da para ver que os dois sao equipe antes de ler qualquer legenda.

   Por isso a cor vira hsl() em vez de um hexadecimal fixo: com o matiz numa
   variavel, o tom sai de uma conta, e nao de sete cores escritas a mao que
   acabariam no oitavo lancamento. O --tom vai inline, calculado por linha. */

/* Sem --tom (o caso de uma fatia por categoria, sem detalhe) vale 55%, que e
   a cor cheia de sempre. A saturacao cai na fatia 7, o cinza do "Outras". */
.fatias > i, .fatias-legenda i{
  background:hsl(var(--matiz, 215) var(--sat, 72%) var(--tom, 55%));
}

/* ------------------------------------------------ tabelas do dinheiro
   Contas a pagar e a receber mostram muita linha e cada uma carrega descrição,
   categoria, fornecedor e três botões. Apertar a fonte aqui — e só aqui, não
   no painel inteiro — faz caber mais mês na tela sem mudar o resto.

   A coluna do resumo é a que mais ganha: o texto principal cai de 13,5 para
   13, e as etiquetas embaixo dele ficam bem menores, porque são referência e
   não leitura — quem corre a lista lê a descrição e o valor, e só olha a
   categoria quando parou numa linha. */
.tabela-dinheiro table{font-size:13px}
.tabela-dinheiro td{padding-top:9px;padding-bottom:9px}
.tabela-dinheiro .resumo-linha strong{font-size:13px;font-weight:650;line-height:1.35}
.tabela-dinheiro .resumo-linha .tag{padding:1px 7px;font-size:10.5px;font-weight:600}
/* As etiquetas do resumo cabem numa linha so. Quebrando, a terceira ("fixa")
   caia sozinha embaixo e a linha da tabela crescia so por causa dela - com
   cinquenta contas na tela, isso e meia tela de altura gasta em etiqueta.
   O que nao couber e cortado com reticencias; o nome inteiro fica no title. */
.tabela-dinheiro .resumo-linha{gap:4px;margin-top:3px;flex-wrap:nowrap;overflow:hidden}
.tabela-dinheiro .resumo-linha .tag{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Conta paga: a linha inteira num verde muito claro.
   Claro de proposito - o botao "ok" verde que fica dentro dela precisa
   continuar se destacando, e um fundo forte o faria sumir. No tema escuro a
   mesma ideia com opacidade menor, senao vira uma faixa fluorescente. */
.tabela-dinheiro tr.paga{background:rgba(34,197,94,.055)}
.tabela-dinheiro tr.paga:hover{background:rgba(34,197,94,.1)}
:root[data-tema="claro"] .tabela-dinheiro tr.paga{background:rgba(21,163,74,.07)}
:root[data-tema="claro"] .tabela-dinheiro tr.paga:hover{background:rgba(21,163,74,.12)}

/* Vencida: a mesma ideia do outro lado. Vermelho igualmente claro - a linha
   avisa, nao grita, e a etiqueta "vencido" continua sendo o que se le. */
.tabela-dinheiro tr.vencida{background:rgba(239,68,68,.06)}
.tabela-dinheiro tr.vencida:hover{background:rgba(239,68,68,.11)}
:root[data-tema="claro"] .tabela-dinheiro tr.vencida{background:rgba(220,38,38,.06)}
:root[data-tema="claro"] .tabela-dinheiro tr.vencida:hover{background:rgba(220,38,38,.11)}

/* Botao de confirmar o dinheiro que entrou ou saiu: verde, e nao rosa da
   marca. Confirmar pagamento e a acao que fecha a conta - a cor de "deu certo"
   diz isso antes de a pessoa ler o texto, e e a mesma da etiqueta "ok" que
   aparece na linha logo depois. */
.botao.ok{background:var(--ok);color:var(--sobre-ok);border-color:transparent}
.botao.ok:hover{background:var(--ok);filter:brightness(1.08)}

/* O icone sozinho do botao vermelho estava ilegivel: o .perigo desenha borda
   vermelha sobre fundo do painel, e um traco fino vermelho sobre isso some.
   Aqui ele ganha fundo proprio e tinta clara - continua sendo o botao
   destrutivo, agora visivel. */
.botao.perigo.so-icone{background:var(--erro);border-color:var(--erro);color:#fff}
.botao.perigo.so-icone:hover{filter:brightness(1.1)}
.botao.perigo.so-icone svg{stroke:#fff}

/* Cancelada continua apagada, e nao verde: ela nao foi paga - deixou de existir. */
.tabela-dinheiro tr.cancelada{opacity:.6}
/* O documento embaixo das etiquetas: menor ainda, é conferência. */
.tabela-dinheiro .resumo-linha + .mono{font-size:11px}

/* Botao que e so o icone: quadrado, sem o espaco que o texto ocupava. Usado
   no "cancelar" das duas telas do dinheiro, onde escrever a palavra fazia o
   botao mais largo da linha ser o menos usado dos tres. */
.botao.so-icone{padding:5px 7px;line-height:0}
.botao.so-icone svg{margin:0;vertical-align:middle}

/* --------------------------------------------- acoes na mesma linha
   Pagar, Editar e Cancelar lado a lado. O formulário de pagamento mora num
   <details> que, FECHADO, é só mais um botão da fila; ABERTO, toma a linha
   inteira e empurra os outros para baixo — sem isso o botão Pagar ficava numa
   linha e os outros dois na de baixo, desalinhados. */
.acoes-linha{align-items:center}
.acoes-linha details{margin:0}
.acoes-linha details[open]{flex:1 0 100%;order:9;margin-top:6px}
.acoes-linha form{margin:0}
/* O icone dentro do botao: quem o separa do texto e o gap do flex, nao margem.
   flex-shrink:0 impede que ele seja esmagado quando o botao fica apertado. */
.botao svg{flex:0 0 auto}
.ajuda{color:var(--suave);font-size:12px;margin-top:5px}
.linha-check{display:flex;align-items:center;gap:8px;color:var(--texto);font-size:14px}
.linha-check input{width:auto}

/* inline-flex, e nao inline-block: com block o <svg> do icone virava uma linha
   propria e o desenho aparecia EM CIMA do texto. O flex os poe lado a lado, o
   icone a esquerda, e centrados na vertical sem calculo de margem. */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:8px;border:1px solid transparent;
  background:var(--marca);color:var(--sobre-marca);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  white-space:nowrap
}
/* O <summary> que faz papel de botao (o "Pagar" que abre o formulario) precisa
   do mesmo tratamento: ele nao e <button>, mas veste .botao. */
summary.botao{list-style:none}
summary.botao::-webkit-details-marker{display:none}
.botao:hover{background:var(--marca2);text-decoration:none}
.botao.secundario{background:var(--painel2);border-color:var(--borda);color:var(--texto)}
.botao.secundario:hover{background:var(--painel3)}
.botao.perigo{background:transparent;border-color:rgba(239,68,68,.5);color:var(--erro-texto)}
.botao.perigo:hover{background:rgba(239,68,68,.12)}
.botao.mini{padding:5px 10px;font-size:12.5px;font-weight:500}
.acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
/* Busca ao vivo: enquanto a resposta nao chega, a tabela esmaece de leve. Sem
   sinal nenhum, uma busca que demora 300ms parece uma tela travada; com um
   spinner no meio, parece que a lista sumiu. */
form.buscando ~ .tabela-wrap{opacity:.55;transition:opacity .12s}
form.buscando input[name="busca"]{background-image:linear-gradient(90deg,transparent,rgba(var(--marca-rgb),.18),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:busca-indo 900ms linear infinite}
@keyframes busca-indo{from{background-position:-40% 0}to{background-position:140% 0}}
/* A busca falhou (servidor fora, rede caida): a borda avisa, e o botao
   Filtrar continua ali para o caminho que nao depende de JavaScript. */
form.busca-falhou input[name="busca"]{border-color:var(--erro)}
.filtros > div{min-width:150px}

/* ---------------------------------------------------------------- alertas */
.alerta{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px;border:1px solid}
.alerta-ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35);color:var(--alerta-ok-texto)}
.alerta-erro{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:var(--alerta-erro-texto)}
.alerta-aviso{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);color:var(--alerta-aviso-texto)}
.alerta-info{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.3);color:var(--info-texto)}

/* ---------------------------------------------------------------- login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-caixa{width:100%;max-width:370px;background:var(--painel);border:1px solid var(--borda);border-radius:14px;padding:30px}
.login-caixa h1{text-align:center;font-size:19px;margin-bottom:6px}
.login-caixa p{text-align:center;color:var(--suave);font-size:13px;margin:0 0 22px}
.login-caixa .botao{width:100%;text-align:center}
.login-logo{width:64px;height:64px;margin:0 auto 18px;background-color:var(--logo);
  -webkit-mask:url(logo-criattus.svg) center/contain no-repeat;
          mask:url(logo-criattus.svg) center/contain no-repeat}

/* ---------------------------------------------------------------- ajuda */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.passo{display:flex;gap:12px;align-items:flex-start}
.passo-num{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--marca);color:var(--sobre-marca);font-size:13px;font-weight:700
}
.passo strong{display:block;font-size:14px;margin-bottom:3px}
.passo p{margin:0;color:var(--suave);font-size:13px;line-height:1.45}
.lista-numerada{margin:0;padding-left:22px;font-size:14px;line-height:1.75}
.lista-numerada li{margin-bottom:4px}
details.faq{border-top:1px solid var(--borda);padding:12px 0}
details.faq:first-of-type{border-top:none;padding-top:0}
details.faq summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none}
details.faq summary::before{content:'+ ';color:var(--marca)}
details.faq[open] summary::before{content:'– '}
details.faq p{color:var(--suave);font-size:13.5px;line-height:1.6;margin:10px 0 0 16px}

/* Cartao de primeiros passos do dashboard */
.onboarding{border:1px solid rgba(var(--marca-rgb),.35);background:rgba(var(--marca-rgb),.06)}
.onboarding ol{margin:6px 0 0;padding-left:22px;font-size:14px;line-height:1.9}
.onboarding .feito{color:var(--suave);text-decoration:line-through}
.onboarding .feito::marker{color:var(--ok)}

/* ---------------------------------------------------------------- diversos */
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.copiavel{display:flex;gap:8px;align-items:center}
.copiavel input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.paginacao{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.paginacao a,.paginacao span{padding:6px 11px;border-radius:7px;border:1px solid var(--borda);font-size:13px;color:var(--suave)}
.paginacao .atual{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.barra{height:6px;border-radius:4px;background:var(--painel2);overflow:hidden;min-width:70px}
.barra i{display:block;height:100%;background:var(--marca)}
details.detalhe summary{cursor:pointer;color:var(--suave);font-size:12.5px}

/* Secao dobravel da ficha do cliente.
   A ficha tem oito assuntos e quase ninguem mexe em mais de dois na mesma
   visita: um cliente so do financeiro nunca abre "Trafego pago", e um so de
   trafego nunca abre "Fiscal". Com tudo aberto de uma vez eram quatrocentas
   linhas de formulario para achar o campo de sempre.
   O <summary> imita o <h2> do bloco de proposito - fechada, a secao tem de
   parecer um titulo, e nao um link escondido. */
details.secao{border-top:1px solid var(--borda);margin-top:4px}
details.secao:first-of-type{border-top:none}
details.secao > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  padding:14px 0;font-size:15px;font-weight:600;color:var(--texto)
}
details.secao > summary::-webkit-details-marker{display:none}
details.secao > summary::after{
  content:'\25B8';margin-left:auto;color:var(--suave);font-size:12px;
  transition:transform .15s
}
details.secao[open] > summary::after{transform:rotate(90deg)}
details.secao > summary:hover{color:var(--marca)}
/* O resumo do que esta dentro: fechada, a secao ainda informa. "Sem endereco"
   vale mais do que o titulo sozinho, porque diz se vale a pena abrir. */
details.secao > summary .resumo{
  font-weight:400;font-size:12.5px;color:var(--suave);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%
}
details.secao .corpo{padding:2px 0 18px}
details.detalhe pre{background:var(--bg);padding:12px;border-radius:8px;overflow:auto;font-size:12px;max-height:320px}
.previa{white-space:pre-wrap;background:var(--bg);border:1px solid var(--borda);border-radius:8px;padding:14px;font-size:13.5px}

/* ========================================================= responsividade */
/* O botao do menu so existe no celular. */
.menu-botao{display:none}

/* --- tablet e celular: menu vira sanfona no topo ------------------------- */
@media (max-width:900px){
  .app{flex-direction:column}
  .lateral{
    width:100%;flex:none;display:block;padding:10px 14px;
    border-right:none;border-bottom:1px solid var(--borda);
    position:sticky;top:0;z-index:30;
  }
  .marca{padding:2px 0;gap:12px}
  .marca > div{min-width:0}
  .marca strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-botao{
    display:grid;place-items:center;margin-left:auto;flex:0 0 auto;
    width:44px;height:44px;border-radius:8px;border:1px solid var(--borda);
    background:var(--painel2);color:var(--texto);font-size:19px;cursor:pointer;
    user-select:none;
  }
  /* Fechado por padrao; a caixinha escondida controla a abertura. */
  .lateral nav,.lateral .rodape-lateral{display:none}
  .menu-check:checked ~ nav{display:flex;flex-direction:column;gap:2px;margin-top:10px}
  .menu-check:checked ~ .rodape-lateral{display:block;margin-top:10px;padding:10px 10px 2px}
  /* Alvo de toque confortavel (o dedo nao acerta 32px). */
  .menu-item{padding:12px 10px;font-size:15px}
  /* O cabecalho da categoria e um botao: no celular precisa do mesmo alvo que
     um item, senao recolher vira uma disputa com o dedo. */
  .menu-grupo{padding:12px 10px;font-size:12px}
  /* A tela e estreita: o trilho encolhe para o texto do item nao quebrar. */
  .menu-filhos{margin-left:14px;padding-left:12px}
  main{padding:18px 14px}
  .topo{align-items:flex-start}
}

/* --- celular: tabela vira lista de cartoes ------------------------------- */
/* Oito colunas nao cabem em 390px de jeito nenhum, e rolar de lado para ler
   uma linha e o oposto de "usual". Cada linha vira um cartao com
   "rotulo: valor", usando o data-rotulo que o layout.php copia do <thead>. */
@media (max-width:700px){
  .tabela-wrap{overflow-x:visible;background:none;border:none;border-radius:0}
  table,.tabela-crm{display:block;min-width:0;width:100%;table-layout:auto;font-size:14px}
  thead{display:none}
  tbody,tr,td{display:block;width:auto}
  tbody tr{
    background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);
    margin-bottom:10px;padding:4px 0;
  }
  tbody tr:hover{background:var(--painel)}
  td,.tabela-crm td{
    display:flex;gap:8px 14px;align-items:center;justify-content:space-between;
    padding:9px 14px;border-bottom:1px solid var(--borda);text-align:right;overflow:visible;
    /* Valor longo (URL de webhook, token, endereco do Chatwoot) precisa poder
       quebrar: sem isto ele passa da borda do cartao e sai da tela. */
    flex-wrap:wrap;overflow-wrap:anywhere;
  }
  td > *{min-width:0;max-width:100%}
  tbody tr td:last-child{border-bottom:none}
  td[data-rotulo]::before{
    content:attr(data-rotulo);flex:0 0 40%;text-align:left;
    color:var(--suave);font-size:11px;text-transform:uppercase;letter-spacing:.4px;
    font-weight:600;
  }
  td.num{text-align:right}
  /* Sem coluna estreita, nada precisa de reticencias. */
  .cortado,.destaque-nome{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;display:inline}
  .destaque-nome{font-size:15px}
  .acoes-linha{justify-content:flex-end}
  .acoes-linha .botao{padding:9px 14px;font-size:13px}
  .vazio{padding:22px}
  .paginacao{justify-content:center}

  /* Celula que contem campo editavel (itens da proposta, qualificacao de lead
     no portal): rotulo em cima e campo na largura toda - digitar em 40% da
     tela e sofrido. Navegador sem :has() apenas mantem o formato lado a lado,
     que continua utilizavel. */
  td:has(input:not([type=checkbox])),td:has(select),td:has(textarea){
    display:block;text-align:left;
  }
  td:has(input:not([type=checkbox]))::before,
  td:has(select)::before,
  td:has(textarea)::before{display:block;flex:none;margin-bottom:6px}
  td .campo-mini{width:100%}
}

/* --- celular: formularios, filtros e cabecalho -------------------------- */
@media (max-width:640px){
  .filtros{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .filtros > div{min-width:0}
  /* Busca e o botao ocupam a linha inteira. */
  .filtros > div:nth-last-child(2),.filtros > div:last-child{grid-column:1 / -1}
  .filtros .botao{width:100%}
  .form-grid{grid-template-columns:1fr}
  .topo{flex-direction:column;align-items:stretch;gap:12px}
  .topo .acoes{width:100%}
  .topo .acoes .botao{flex:1;text-align:center}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card .valor{font-size:22px}
  .bloco{padding:14px}
  /* O campo nao pode empurrar o botao Copiar para fora da tela. */
  .copiavel{flex-wrap:wrap}
  .copiavel input{min-width:0;flex:1 1 100%}
  h1{font-size:20px}
  textarea{min-height:130px}
}
/* Ranking em barras horizontais (clientes e origens na tela de Leads).
   Horizontal, e não em colunas: nome de cliente é longo e em barra vertical
   viraria texto de lado ou reticências. Cada linha é um link que filtra. */
.ranking{display:grid;gap:9px}
.ranking-item{
  display:grid;grid-template-columns:minmax(90px,1.4fr) minmax(60px,2fr) auto 38px;
  gap:10px;align-items:center;color:var(--texto);font-size:13.5px;
  padding:3px 4px;border-radius:7px;
}
.ranking-item:hover{background:var(--painel2);text-decoration:none}
.ranking-nome{display:flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-item .barra{min-width:0;height:8px}
.ranking-qtd{font-variant-numeric:tabular-nums;text-align:right;font-size:14px}
.ranking-fatia{color:var(--suave);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
/* No celular a linha vira duas: nome em cima, barra e números embaixo. */
@media (max-width:640px){
  .ranking-item{grid-template-columns:1fr auto 38px;row-gap:4px}
  .ranking-nome{grid-column:1 / -1}
}

.previa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-bottom:22px}
.dois-blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;margin-bottom:22px}
/* Sinais de ligado/desligado das listagens (avisos do cliente, aviso da conta).
   Mesmo tamanho para todos, ligado ou não: é o que deixa a coluna virar uma
   fileira alinhada, em que o olho acha o buraco sem ler nada. */
.avisos{white-space:nowrap}
.sinal{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  font-size:11px;font-weight:700;line-height:1;margin-right:3px;cursor:default;
  border:1px solid transparent}
.sinal-on{background:rgba(34,197,94,.16);color:var(--ok-texto);border-color:rgba(34,197,94,.28)}
.sinal-off{background:transparent;color:var(--suave);border-color:var(--borda);opacity:.55}
.sinal-off:hover{opacity:1}

/* Medidor de carregamento: discreto, no fim do conteúdo. É ferramenta de
   diagnóstico, não informação de trabalho — não pode competir com a tela. */
.medidor{margin:26px 0 4px;text-align:right;color:var(--suave);font-size:11px;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.6}
.medidor:hover{opacity:1}

/* Hora do resumo diário, dentro da célula da tabela: o select cheio de 100%
   com padding de formulário engoliria a coluna. Aqui ele é só um seletor de
   apoio embaixo da caixinha. */
.hora-diario{width:auto;min-width:76px;margin-top:6px;padding:3px 6px;font-size:11.5px;border-radius:6px}
.marcar{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;text-transform:none;letter-spacing:0;font-weight:400;margin:4px 0 0}
.marcar input{width:auto;margin:0}
td input[type=checkbox],th input[type=checkbox]{width:17px;height:17px;accent-color:var(--marca);cursor:pointer}

/* ---------------------------------------------------------------- portal */
.periodo{background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:12px 14px;margin-bottom:20px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.periodo-atalhos{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:99px;border:1px solid var(--borda);background:var(--painel2);
  color:var(--suave);font-size:13px}
.chip:hover{color:var(--texto);text-decoration:none;background:var(--painel3)}
.chip.ativo{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.periodo-datas{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.periodo-datas label{margin:0;font-size:12.5px}
.periodo-datas input[type=date]{width:auto;padding:6px 9px;font-size:13px}

.campo-mini{padding:6px 9px;font-size:13px}
.barra-salvar{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 60%,transparent);
  padding:14px 0 4px;margin-top:8px}

.grafico{display:flex;align-items:flex-end;gap:3px;height:130px;padding:8px 0 0}
.barra-dia{flex:1;height:100%;display:flex;align-items:flex-end;min-width:4px}
.barra-col{width:100%;background:var(--marca);border-radius:3px 3px 0 0;position:relative;
  display:flex;align-items:flex-end;transition:opacity .15s}
.barra-dia:hover .barra-col{opacity:.75}
.barra-conv{width:100%;background:var(--ok);border-radius:0 0 3px 3px}

/* Grafico com o numero dentro da barra e o dia embaixo: a leitura deixa de
   depender do mouse (que nem existe no celular). */
.grafico.com-numeros{height:170px;align-items:stretch;gap:5px}
.grafico.com-numeros .barra-dia{flex-direction:column;justify-content:flex-end;gap:5px}
.grafico.com-numeros .barra-col{flex:none}
.barra-valor{position:absolute;left:0;right:0;top:3px;text-align:center;
  font-size:11px;font-weight:700;color:var(--sobre-marca);text-shadow:0 1px 2px var(--sombra-barra);
  pointer-events:none}
/* Barra baixa demais para o numero caber dentro: joga acima dela. */
.barra-col[style*="height:2%"] .barra-valor,
.barra-col[style*="height:3%"] .barra-valor,
.barra-col[style*="height:4%"] .barra-valor,
.barra-col[style*="height:5%"] .barra-valor,
.barra-col[style*="height:6%"] .barra-valor,
.barra-col[style*="height:7%"] .barra-valor,
.barra-col[style*="height:8%"] .barra-valor,
.barra-col[style*="height:9%"] .barra-valor{top:-15px;color:var(--suave);text-shadow:none}
.barra-dia-rotulo{font-size:10px;color:var(--suave);text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* Caixa "Canal" na tela de Resultados */
.card .valor.destaque-marca{color:var(--marca2)}
.canais{display:grid;gap:7px;margin-top:8px}
.canal{display:flex;align-items:center;gap:8px;font-size:13.5px}
.canal-nome{color:var(--suave);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canal-qtd{font-size:16px;font-weight:650}
.icone-svg{flex:0 0 auto;vertical-align:-3px}

/* Origem do lead: icones + texto na mesma linha */
.icones-origem{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.origem-celula{display:inline-flex;align-items:center;gap:7px;max-width:100%}
.origem-celula .cortado{max-width:none;flex:1 1 auto}
/* Botão de ouvir a gravação: alvo redondo, sem cara de link. */
.ouvir{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:5px;padding:2px;border:0;border-radius:50%;
  background:none;cursor:pointer;vertical-align:-4px;
  transition:transform .12s,background .12s;
}
.ouvir:hover{background:var(--painel3);transform:scale(1.12)}
.ouvir .icone-svg{display:block}
/* Tocando: o botão pulsa de leve, para achar a linha na lista. */
.ouvir.tocando{background:rgba(var(--marca-rgb),.18)}
.ouvir.tocando .icone-svg{animation:pulso-ouvir 1.4s ease-in-out infinite}
@keyframes pulso-ouvir{0%,100%{opacity:1}50%{opacity:.45}}

/* ------------------------------------------------------- tocador fixo */
/* Fixo no rodapé: ouvir a ligação não pode custar sair da listagem e perder o
   filtro, a página e o que já estava marcado. */
.tocador{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;background:var(--painel);
  border-top:1px solid var(--borda);box-shadow:0 -6px 18px var(--sombra-barra);
}
.tocador[hidden]{display:none}
.tocador-info{min-width:0;flex:0 1 260px}
.tocador-info strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tocador-info small{color:var(--suave);font-size:11.5px}
.tocador audio{flex:1 1 auto;min-width:0;height:38px}
.tocador-link{font-size:13px;color:var(--marca2);white-space:nowrap}
.tocador-fechar{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--borda);background:var(--painel2);color:var(--texto);
  font-size:17px;line-height:1;cursor:pointer;
}
.tocador-fechar:hover{border-color:var(--marca)}
/* O tocador cobre o rodapé da lista; este respiro evita que a última linha e o
   botão de salvar fiquem embaixo dele. Navegador sem :has() apenas mostra a
   barra por cima — a lista continua rolável. */
body:has(.tocador:not([hidden])) main{padding-bottom:86px}

@media (max-width:640px){
  .tocador{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .tocador-info{flex:1 1 100%}
  .tocador audio{flex:1 1 100%;order:3}
}

/* Status da ligação + play, lado a lado e sem quebrar a linha. */
.status-ligacao{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;max-width:100%}
.status-ligacao .tag{overflow:hidden;text-overflow:ellipsis}

/* Campos próprios do formulário do cliente na listagem. Menor e mais discreto
   que o resto da linha: é apoio para qualificar, não a informação principal. */
.do-formulario{font-size:12.5px;color:var(--suave)}
.vazio-celula{color:var(--borda)}

/* Listagem do portal: mesma regra de largura fixa da tabela do CRM */
.tabela-portal-leads{table-layout:fixed;width:100%;min-width:0;font-size:14px}
.tabela-portal-leads th,.tabela-portal-leads td{padding:10px;overflow:hidden}
.tabela-portal-leads .tag{font-size:11px;padding:2px 7px}
.tabela-portal-leads .campo-mini{width:100%}

/* "Deu resultado?": duas opcoes, uma escolha. A caixa do radio some e o
   proprio rotulo vira o botao - alvo maior e leitura imediata pela cor. */
.sim-nao{display:flex;gap:6px}
.sim-nao label{display:inline-flex;align-items:center;gap:5px;margin:0;cursor:pointer;
  padding:5px 9px;border-radius:8px;border:1px solid var(--borda);background:var(--painel2);
  font-size:12.5px;color:var(--suave);transition:border-color .12s,color .12s,background .12s}
.sim-nao input{position:absolute;opacity:0;width:0;height:0}
.sim-nao label:hover{color:var(--texto)}
.sim-nao .opcao-sim.marcada{border-color:var(--ok);color:var(--alerta-ok-texto);background:rgba(34,197,94,.12)}
.sim-nao .opcao-nao.marcada{border-color:var(--erro);color:var(--alerta-erro-texto);background:rgba(239,68,68,.12)}
/* :has() confirma a marcacao sem recarregar; a classe "marcada" cobre o
   estado que veio do servidor e navegadores sem :has(). */
.sim-nao label:has(input:checked).opcao-sim{border-color:var(--ok);color:var(--alerta-ok-texto);background:rgba(34,197,94,.12)}
.sim-nao label:has(input:checked).opcao-nao{border-color:var(--erro);color:var(--alerta-erro-texto);background:rgba(239,68,68,.12)}
.sim-nao label:not(:has(input:checked)){border-color:var(--borda);background:var(--painel2)}

/* Rodape da lista: paginacao a esquerda, "mostrar N por pagina" a direita */
.rodape-lista{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-top:16px}
.rodape-lista .paginacao{margin:0}
.por-pagina{display:flex;align-items:center;gap:6px}
.por-pagina a,.por-pagina .atual{padding:5px 10px;border-radius:7px;border:1px solid var(--borda);
  font-size:13px;color:var(--suave)}
.por-pagina .atual{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
pre.saida{background:var(--bg);border:1px solid var(--borda);border-radius:8px;padding:14px;
  overflow:auto;max-height:420px;font-size:12.5px;line-height:1.6;white-space:pre;margin:0}


/* ------------------------------------------------------------------- menu */
/* A categoria é o andar de cima do menu e precisa parecer isso. Antes era um
   rótulo cinza de 11px com uma setinha: no meio de dezoito links do mesmo
   tamanho, ele desaparecia, e a barra virava uma lista só. Agora cada
   categoria tem emblema, nome em caixa alta e peso — e o bloco inteiro da
   categoria em que você está fica marcado, do cabeçalho ao último item. */
.menu-grupo{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;font-weight:700;
  color:var(--suave);padding:9px 10px;border-radius:9px;
  cursor:pointer;list-style:none;user-select:none;
}
.menu-grupo::-webkit-details-marker{display:none}
.menu-grupo:hover{color:var(--texto);background:var(--painel2);text-decoration:none}
.menu-grupo:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}
.menu-nome{flex:1 1 auto;min-width:0}

/* O emblema: quadradinho com o desenho da categoria. É o que dá o "impacto
   visual" sem precisar de cor berrante — a forma sustenta sozinha. */
.menu-emblema{
  display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;
  background:var(--painel2);border:1px solid var(--borda);color:var(--suave);
  transition:background .14s,color .14s,border-color .14s;
}
.menu-grupo:hover .menu-emblema{color:var(--texto)}

/* Você está aqui: emblema na cor da marca, nome em tinta cheia e um trilho
   vertical que desce por toda a categoria. É a "marcação" — dá para saber em
   que módulo se está sem ler uma palavra. */
.menu-bloco.aqui,.menu-grupo-link.aqui{
  background:color-mix(in srgb, var(--marca) 7%, transparent);
  border-radius:10px;
}
.menu-bloco.aqui{box-shadow:inset 2px 0 0 var(--marca)}
.menu-grupo-link.aqui{box-shadow:inset 2px 0 0 var(--marca)}
.menu-bloco.aqui > .menu-grupo,.menu-grupo-link.aqui{color:var(--texto)}
.menu-bloco.aqui .menu-emblema,.menu-grupo-link.aqui .menu-emblema{
  background:var(--marca);border-color:var(--marca);color:var(--sobre-marca);
}

/* Quantos itens a categoria guarda. Some com ela aberta: os itens estão à
   vista e a contagem viraria enfeite. */
.menu-qtd{
  font-size:10.5px;font-weight:600;letter-spacing:0;color:var(--suave);
  background:var(--painel2);border-radius:20px;padding:1px 7px;
}
.menu-bloco[open] .menu-qtd{display:none}
.menu-seta{display:inline-flex;color:var(--suave);transition:transform .18s ease}
.menu-bloco[open] > .menu-grupo .menu-seta{transform:rotate(180deg)}

/* O trilho à esquerda dos filhos: é ele que diz, sem palavra nenhuma, que
   estes itens pertencem à categoria de cima. */
.menu-filhos{
  display:flex;flex-direction:column;gap:2px;
  margin:2px 0 6px 22px;padding-left:11px;border-left:1px solid var(--borda);
}
.menu-bloco.aqui .menu-filhos{border-left-color:color-mix(in srgb, var(--marca) 45%, transparent)}
.menu-bloco{display:block;padding:1px 0}
.menu-grupo-link{display:flex}
@media (prefers-reduced-motion: reduce){
  .menu-seta,.menu-emblema{transition:none}
}

@media (prefers-reduced-motion: reduce){ .menu-seta{transition:none} }

/* O aviso de atraso no menu.
   Pulsa em vez de piscar. Piscar (ligar e desligar) some com o numero metade
   do tempo, e um numero que some nao se le de relance; alem disso, piscada
   dura e o que a WCAG 2.3.1 trata como risco. O pulso muda so a auréola: o
   emblema fica legivel o tempo inteiro e continua puxando o olho.
   Fica no menu porque quem precisa do aviso e justamente quem NAO esta em
   Tarefas -- quem esta la ve o atraso nos cartoes. */
.menu-alerta{
  font-size:10.5px;font-weight:800;line-height:1;
  min-width:18px;padding:3px 6px;border-radius:20px;text-align:center;
  background:var(--erro);color:#fff;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--erro) 70%, transparent);
  animation:alerta-pulso 2s ease-out infinite;
}
@keyframes alerta-pulso{
  0%   {box-shadow:0 0 0 0    color-mix(in srgb, var(--erro) 70%, transparent)}
  70%  {box-shadow:0 0 0 7px  color-mix(in srgb, var(--erro)  0%, transparent)}
  100% {box-shadow:0 0 0 0    color-mix(in srgb, var(--erro)  0%, transparent)}
}
/* Aberto o grupo, o numero de itens some -- o alerta NAO: ele nao conta
   itens, avisa de atraso, e o atraso continua de pe com o grupo aberto. */
.menu-bloco[open] .menu-alerta{display:inline-block}

/* Cartao e linha em atraso.
   A borda vermelha e PERMANENTE e a etiqueta e que pulsa. Com trinta cartoes
   na tela, trinta piscando ao mesmo tempo nao destacam nada -- viram fundo.
   A borda separa os atrasados num relance; o pulso, discreto, diz que aquilo
   nao esta parado esperando ser lido. */
.kanban-card.atrasada{border-color:var(--erro);box-shadow:inset 3px 0 0 var(--erro)}
.tarefas-tabela tr.atrasada td:first-child{box-shadow:inset 3px 0 0 var(--erro)}
.tag.tag-zerado.pulsando{animation:tag-pulso 2s ease-in-out infinite}
@keyframes tag-pulso{
  0%,100%{background:rgba(239,68,68,.16)}
  50%    {background:rgba(239,68,68,.42)}
}

/* Quem pediu menos movimento nao perde o aviso -- perde o movimento. A cor,
   a borda e o numero continuam todos la. */
@media (prefers-reduced-motion: reduce){
  .menu-alerta{animation:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--erro) 30%, transparent)}
  .tag.tag-zerado.pulsando{animation:none;background:rgba(239,68,68,.42)}
}

/* ----------------------------------------------------------------- tarefas */
.tarefas-tabela td{font-size:15px;padding:11px 12px;vertical-align:middle}
.tarefas-tabela .titulo-tarefa{font-size:15.5px;font-weight:600;line-height:1.35;
  color:var(--texto);text-decoration:none}
.tarefas-tabela .titulo-tarefa:hover{color:var(--marca)}
.tarefas-tabela .meta-tarefa{font-size:13px;color:var(--suave);margin-top:3px}
.tarefas-tabela .tag{font-size:12.5px;padding:2px 8px}

/* Pendências que o painel encontrou: uma linha quando fechado.
   O painel acha pendência quase todo dia, e o bloco alto de antes empurrava o
   quadro para fora da tela justamente quando havia mais o que ver. Abre sozinho
   só quando alguma é urgente — aí a interrupção se paga. */
.pendencias{border:1px solid var(--borda);border-left:3px solid var(--marca);
  border-radius:var(--raio);background:var(--painel);margin:0 0 14px}
.pendencias>summary{cursor:pointer;padding:9px 14px;font-size:13.5px;color:var(--suave);
  display:flex;align-items:center;gap:8px;list-style:none;user-select:none}
.pendencias>summary::-webkit-details-marker{display:none}
.pendencias>summary::after{content:'▸';margin-left:auto;color:var(--suave);
  transition:transform .15s}
.pendencias[open]>summary::after{transform:rotate(90deg)}
.pendencias>summary:hover{color:var(--texto)}
.pend-bolha{background:var(--marca);color:var(--sobre-marca);border-radius:20px;
  padding:1px 9px;font-size:12.5px;font-weight:600}
.pend-lista{list-style:none;margin:0;padding:0 14px 10px}
.pend-lista li{display:flex;align-items:center;gap:9px;padding:7px 0;
  border-top:1px solid var(--borda);font-size:13.5px}
.pend-lista form{display:flex;gap:5px;margin-left:auto;flex:0 0 auto}
.pend-texto{min-width:0}
.pend-texto em{color:var(--suave);font-style:normal;font-size:12.5px;display:block}
.pend-ponto{width:7px;height:7px;border-radius:50%;background:var(--borda);flex:0 0 auto}
.pend-ponto.urgente{background:var(--erro)}
@media (max-width:640px){
  .pend-lista li{flex-wrap:wrap}
  .pend-lista form{margin-left:16px}
}

/* Botão de concluir: alvo grande e redondo, que se acerta sem mirar. O ✓ solto
   de antes era pequeno demais e não parecia clicável. */
.check-tarefa{width:38px;height:38px;border-radius:50%;border:2px solid var(--borda);
  background:var(--painel);cursor:pointer;font-size:19px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--suave);transition:background .12s,border-color .12s,color .12s;padding:0}
.check-tarefa:hover{border-color:var(--ok);color:var(--ok);background:var(--painel2)}
.check-tarefa.feito{background:var(--ok);border-color:var(--ok);color:#fff}
.check-tarefa.fazendo{border-color:var(--info);color:var(--info)}

/* ------------------------------------------------------------------ kanban */
/* Denso de propósito: o valor do quadro é ver TODO o trabalho de uma vez, e
   cada linha de altura a mais em cada cartão custa uma tarefa a menos na tela.
   Daí a fonte menor, o padding curto e o título numa linha só. */
.kanban{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:12px;align-items:start}
.kanban-coluna{border:1px solid var(--borda);border-radius:12px;padding:10px;min-height:120px}
/* Cor por etapa: branco parado, azul em andamento, verde pronto. Dá para ler
   o quadro de longe sem precisar do rótulo. */
.kanban-coluna[data-col="a_fazer"]{background:var(--painel)}
.kanban-coluna[data-col="fazendo"]{background:color-mix(in srgb, var(--info) 9%, var(--painel))}
.kanban-coluna[data-col="feito"]{background:color-mix(in srgb, var(--ok) 9%, var(--painel))}
.kanban-coluna h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--suave);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.kanban-qtd{background:var(--painel2);border-radius:20px;padding:1px 8px;font-size:12px}
.kanban-card{background:var(--painel);border:1px solid var(--borda);border-radius:8px;
  padding:8px 10px;margin-bottom:7px;cursor:grab}
.kanban-card:active{cursor:grabbing}
.kanban-rodape{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px}
.kanban-coluna[data-col="feito"] .kanban-card{opacity:.8}
/* Enquanto arrasta: o card fica translúcido e a coluna de destino se acende. */
.kanban-card.arrastando{opacity:.4}
.kanban-coluna.alvo{outline:2px dashed var(--marca);outline-offset:-4px}
.kanban-dica{font-size:12.5px;color:var(--suave);margin:2px 0 10px}
/* CABE, e nao rola de lado. Antes as tres colunas mantinham 230px e o quadro
   passava a rolar - e rolar de lado esconde a coluna "feito", que e a que diz
   se o dia rendeu. minmax(0,1fr) deixa as tres encolherem juntas; abaixo de
   560px elas viram uma so, empilhadas, que ainda e o quadro inteiro. */
@media (max-width:820px){
  .kanban{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kanban-coluna{padding:8px 6px}
  .kanban-dica{display:none}
}
@media (max-width:560px){
  .kanban{grid-template-columns:1fr}
}

/* A marca do cliente junto do título. Num quadro com trinta cartões a imagem
   separa muito mais rápido que o nome escrito — e ainda devolve ao título a
   largura que o nome ocupava. Sem logo cadastrada, as iniciais. */
.card-linha{display:flex;align-items:center;gap:7px;min-width:0}
.card-logo{width:20px;height:20px;flex:0 0 auto;border-radius:5px;object-fit:contain;
  background:var(--painel2)}
.card-logo.iniciais{display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--suave);
  border:1px solid var(--borda)}
/* Uma linha só, com reticências: título comprido fazia o cartão crescer e
   empurrava os outros para fora da tela. O texto inteiro fica no atributo
   title e, sobretudo, no cartão aberto. */
.card-titulo{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--texto);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1 1 auto}
.card-titulo:hover{color:var(--marca)}
.card-marcas{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.kanban-card .tag{font-size:11px;padding:1px 7px}
/* Selo de anotação e de anexo: é o que faz alguém lembrar de abrir o cartão. */
.card-selo{font-size:11px;color:var(--suave);white-space:nowrap}

/* -------------------------------------------------------------- cartão aberto */
/* Três faixas empilhadas: topo, fio e o campo de escrever. Só a do meio rola.
   Com o cartão inteiro rolando, escrever uma anotação empurrava o título para
   fora da tela e o campo de escrever ficava sempre embaixo do que já havia —
   quanto mais histórico, mais longe o lugar de escrever. */
.cartao{border:1px solid var(--borda);border-radius:14px;background:var(--painel);
  color:var(--texto);padding:0;width:min(720px,94vw);max-height:88vh;overflow:hidden;
  box-shadow:0 24px 60px var(--sombra-barra)}
.cartao[open]{display:flex}
.cartao::backdrop{background:rgba(0,0,0,.55)}
#cartao-conteudo{display:flex;flex-direction:column;width:100%;min-height:0;max-height:88vh}

.cartao-topo{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--borda);flex:0 0 auto}
.cartao-campos{flex:1 1 auto;min-width:0}
.cartao-logo{width:38px;height:38px;flex:0 0 38px;border-radius:9px;overflow:hidden;
  background:var(--painel2);display:grid;place-items:center}
.cartao-logo img{width:100%;height:100%;object-fit:contain;display:block}
.cartao-logo.iniciais{font-size:14px;font-weight:700;color:var(--suave);
  border:1px solid var(--borda);background:transparent}

/* O título é o campo, e não um rótulo com um campo embaixo: uma linha a menos
   e o texto no tamanho em que ele é lido no quadro. */
.cartao-titulo{width:100%;font-size:17px;font-weight:650;line-height:1.3;
  background:transparent;border:1px solid transparent;border-radius:8px;
  padding:5px 8px;margin:-5px -8px 0;color:var(--texto)}
.cartao-titulo:hover{border-color:var(--borda)}
.cartao-titulo:focus{border-color:var(--marca);background:var(--painel2);outline:none}

.cartao-sub{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:6px 0 0;font-size:12.5px;color:var(--suave)}
.cartao-cliente{font-weight:600;color:var(--texto)}
.cartao-cliente:empty{display:none}
.cartao-prazo{display:inline-flex;align-items:center;gap:6px}
.cartao-prazo input{padding:3px 7px;font-size:12.5px;width:auto}
/* "salvando… / salvo": discreto por padrão, porque o normal é dar certo. */
.cartao-estado{margin-left:auto;font-size:11.5px;color:var(--suave);opacity:.85}
.cartao-estado.ruim{color:var(--erro-texto);opacity:1;font-weight:600}
.cartao-selos{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:7px}
.cartao-detalhe{font-size:12.5px;color:var(--suave)}
.cartao-fechar{background:none;border:0;color:var(--suave);font-size:26px;line-height:1;
  cursor:pointer;padding:0 4px;flex:0 0 auto}
.cartao-fechar:hover{color:var(--texto)}

.cartao-barra{display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:0 0 auto;
  padding:8px 16px;border-bottom:1px solid var(--borda);background:var(--painel2)}
.cartao-barra .botao.perigo{margin-left:auto}
.cartao-coluna{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;
  color:var(--marca);background:color-mix(in srgb, var(--marca) 12%, transparent);
  border-radius:20px;padding:3px 10px}

.cartao-fio{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px}
.fio-vazio{margin:0;font-size:13px;color:var(--suave);line-height:1.6}

/* Nova tarefa: as mesmas duas linhas do cartão, para a tela ensinar uma regra
   só — o cliente sai do título aqui e lá. */
.form-nova{display:flex;align-items:flex-start;gap:12px;max-width:640px}
.nova-campos{flex:1 1 auto;min-width:0}
.form-nova .cartao-titulo{border-color:var(--borda);background:var(--painel2);margin:0}

/* O fio de anotações: uma conversa, e não um campo de texto grande. Cada passo
   fica com data, autor e os arquivos daquele momento. */
.fio{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fio-item{border:1px solid var(--borda);border-radius:10px;padding:10px 12px;
  background:var(--painel2)}
.fio-cabeca{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--suave)}
.fio-quem{font-weight:600;color:var(--texto)}
.fio-cabeca form{margin-left:auto}
.fio-remover{background:none;border:0;color:var(--suave);cursor:pointer;font-size:16px;
  line-height:1;padding:0 2px;opacity:0;transition:opacity .12s}
.fio-item:hover .fio-remover,.fio-remover:focus{opacity:1}
.fio-remover:hover{color:var(--erro-texto)}
.fio-texto{margin-top:6px;font-size:14px;line-height:1.55;word-break:break-word}
.fio-texto a{color:var(--marca)}
.fio-anexos{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.anexo-img{display:block;border:1px solid var(--borda);border-radius:8px;overflow:hidden;
  line-height:0;background:var(--painel)}
.anexo-img img{width:120px;height:88px;object-fit:cover;display:block}
.anexo-img:hover{border-color:var(--marca)}
.anexo-arq{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  border:1px solid var(--borda);border-radius:8px;padding:6px 10px;background:var(--painel);
  color:var(--texto);text-decoration:none;font-size:12.5px}
.anexo-arq:hover{border-color:var(--marca)}
.anexo-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.anexo-peso{color:var(--suave);flex:0 0 auto}

/* O campo de escrever fica parado no pé do cartão: o lugar de anotar não pode
   depender de quanto histórico existe acima. */
.fio-novo{flex:0 0 auto;display:grid;gap:7px;padding:12px 16px 14px;
  border-top:1px solid var(--borda);background:var(--painel2)}
.fio-novo .fio-anexos{margin:0}
.fio-caixa{display:flex;align-items:flex-end;gap:8px;
  border:1px solid var(--borda);border-radius:10px;background:var(--painel);padding:6px 8px}
.fio-caixa:focus-within{border-color:var(--marca)}
.fio-caixa textarea{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:4px 2px;
  resize:none;font:inherit;font-size:13.5px;line-height:1.5;color:var(--texto);max-height:150px}
.fio-caixa textarea:focus{outline:none}
.fio-dica{margin:0;font-size:11px;color:var(--suave)}
/* O <input type=file> nativo não aceita estilo; o rótulo é que vira o botão. */
.fio-clipe{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;cursor:pointer;border-radius:8px;color:var(--suave)}
.fio-clipe:hover{color:var(--marca);background:var(--painel2)}
.fio-clipe input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0)}
/* Texto que só o leitor de tela recebe. */
.sr-apenas{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:560px){
  .cartao{width:100vw;max-height:100vh;border-radius:0}
  #cartao-conteudo{max-height:100vh}
  .cartao-sub{gap:8px}
  .cartao-estado{margin-left:0}
}

/* Coluna Integrações: etiquetas pequenas que quebram linha em vez de esticar
   a tabela para fora da tela. */
.integracoes{display:flex;flex-wrap:wrap;gap:4px;max-width:230px}
.integracoes .tag{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;padding:2px 7px}

/* -------------------------------------------------------------- financeiro */
/* As telas do dinheiro reaproveitam o que já existe (.cards, .periodo, .chip,
   .tag, .grafico, .tabela-wrap). Sobrou uma coisa só, e é um conserto:

   a baixa da fatura abre um <details> na PRÓPRIA linha da tabela — sem modal,
   como o resto do painel — e o gatilho dele é um <summary class="botao mini">.
   Duas coisas quebravam ali:

   1. `details.detalhe summary` (a regra dos blocos de depuração, mais acima)
      pinta o texto de cinza e vence `.botao` na especificidade — o botão saía
      rosa com a letra apagada, ilegível nos dois temas;
   2. o triângulo do <summary> aparecia DENTRO do botão. O list-style:none que
      a view já traz resolve no Firefox e no Chrome, mas o Safari só esconde o
      marcador pela pseudo-classe própria.

   Nada de cor fixa aqui: --sobre-marca e --texto já existem nos dois temas. */
details.detalhe summary.botao{color:var(--sobre-marca);font-size:12.5px;list-style:none;cursor:pointer}
details.detalhe summary.botao.secundario{color:var(--texto)}
summary.botao::-webkit-details-marker{display:none}

/* Contas a pagar, contas a receber e notas fiscais entraram sem nenhuma cor
   nova, e isso é de propósito: os cartões coloridos dos totais já existiam.
   Antes de acrescentar classe aqui, procure estas, que estão mais acima e já
   funcionam nos dois temas:

     .card.destaque-ok    .valor  -> verde  (Recebidos, Pagos, Receitas)
     .card.destaque-erro  .valor  -> vermelho (Vencidos, Despesas, Com falha)
     .card.destaque-aviso .valor  -> âmbar  (Vencem hoje)
     .card .valor.destaque-marca  -> a cor da marca (Total do período, MRR)

   Uma armadilha guardada aqui porque é onde se procura: destaque-erro e
   destaque-marca têm a MESMA especificidade e a segunda vem depois no arquivo.
   No mesmo cartão, ela vence — e o mês em que a agência perdeu dinheiro sairia
   pintado de rosa. É uma OU a outra, nunca as duas. */

/* A fileira passou de três para CINCO cartões nas duas telas de contas
   ([Vencidos] [Vencem hoje] [A vencer] [Pagos/Recebidos] [Total do período]),
   e a de MRR já tinha seis. Com auto-fit em minmax(180px,1fr), cada coluna cai
   para pouco menos de 190px: "R$ 123.456,78" a 26px pede quase 180px só de
   dígitos e passava por cima da borda do cartão.

   Encolher o número é melhor do que deixá-lo quebrar em duas linhas — meio
   valor em cima e meio embaixo é o tipo de número que alguém copia errado para
   a reunião.

   O :has() limita o ajuste às fileiras de cinco ou mais: onde há três ou
   quatro cartões (dashboard, contratos, importação) nada muda. Navegador sem
   :has() apenas mantém os 26px que já estavam no ar — nenhuma tela quebra por
   causa disso, e :has() já é usado mais acima, no celular. */
.cards:has(> :nth-child(5)) .card .valor{font-size:21px}
.cards:has(> :nth-child(5)) .card .rotulo{font-size:11.5px}
/* O total do contrato, em destaque no fim da ficha.
   E o numero que se confere antes de salvar, e ele estava do mesmo tamanho de
   tudo o mais na tela - perdido entre dez campos. */
/* Verde, e nao o rosa da marca: este numero e DINHEIRO QUE ENTRA. O rosa e a
   cor de acao do painel e, num numero, foi lido como alerta - o mesmo tom das
   contas vencidas na tela ao lado. Verde e a cor que o resto do financeiro ja
   usa para o que entrou. */
.total-contrato{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.05)}
.total-contrato .rotulo{color:var(--suave);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.total-contrato .valor{font-size:30px;font-weight:700;color:var(--ok-texto);line-height:1.1;margin-left:auto}
.total-contrato .quando{color:var(--suave);font-size:12.5px}
/* O valor cheio riscado ao lado do desconto: mostra o que foi combinado antes,
   que e o que o cliente pergunta quando ve a fatura. */
.total-contrato .antes{display:block;color:var(--suave);font-size:13px;text-decoration:line-through;margin-top:4px}
.total-contrato .desconto{display:block;color:var(--ok-texto);font-size:13px;font-weight:600}

/* ------------------------------------------------------------ ficha do cliente */

/* Duas colunas no computador: a ficha e, ao lado, o cupom.
   Grid e nao float porque as duas colunas precisam comecar na mesma altura, e
   o cupom gruda com sticky enquanto a ficha rola - ele responde "quanto este
   cliente paga" a qualquer altura do formulario, que e quando a pergunta
   aparece. */
/* UMA coluna por padrao, e duas quando HOUVER ESPACO - medido pelo espaco que
   sobra de verdade, e nao pela largura da janela.

   A primeira versao usava @media (min-width:1100px), e errava: a janela tem
   1366, mas o menu come 250 e o padding come 60 - o que sobra para a ficha sao
   1056. Pior, dentro de um painel de previa estreito a janela continua larga e
   o espaco nao existe. Medir a janela para decidir sobre uma caixa que nao e a
   janela e o erro; @container mede a caixa. */
main{container-type:inline-size;container-name:conteudo}

.ficha-cliente{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.ficha-cliente > form{min-width:0}
/* Sem espaco para as duas colunas, o cupom vai para CIMA da ficha: e leitura
   rapida, e enterrado no fim de um formulario longo ninguem veria. */
.ficha-cliente > .cupom{order:-1}

@container conteudo (min-width: 840px){
  .ficha-cliente{grid-template-columns:minmax(0,1fr) 290px}
  .ficha-cliente > .cupom{order:0}
}
/* Navegador sem @container (raro hoje) fica com uma coluna e o cupom no topo -
   que e o pior caso aceitavel: aparece, so nao ao lado. */

/* Os grupos dentro de Dados gerais. Uma linha fina e um rotulo pequeno bastam
   para separar contato de endereco - eram tres sanfonas, e abrir tres coisas
   para digitar o que e um assunto so era o problema. */
.grupo-campos{margin-top:18px;padding-top:14px;border-top:1px solid var(--borda)}
.grupo-titulo{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--suave);margin-bottom:10px;
}

/* Campo de duas letras nao precisa de um terco da linha. */
.form-grid.endereco{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.form-grid.endereco .curto{max-width:150px}
.form-grid.endereco .largo{grid-column:span 2}
@media (max-width:640px){
  .form-grid.endereco .curto{max-width:none}
  .form-grid.endereco .largo{grid-column:auto}
}

/* ------------------------------------------------------------------- o cupom */

/* Papel de caixa: valor grande em cima, o que foi comprado no meio, historico
   embaixo. O formato nao e enfeite - e o desenho que todo mundo ja sabe ler
   sem legenda, e por isso o numero chega antes da explicacao. */
.cupom{
  position:sticky;top:16px;
  background:var(--painel);border:1px solid var(--borda);border-radius:10px;
  padding:16px 18px 14px;font-size:13px;
  /* O recorte de serrilha do papel, discreto. */
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.cupom-topo{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px dashed var(--borda);
}
.cupom-marca{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--suave)}
.cupom-cliente{font-size:12px;font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cupom-rotulo{
  display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--suave);margin-bottom:4px;
}
.cupom-valor{text-align:center;padding:6px 0 12px}
.cupom-valor strong{display:block;font-size:30px;line-height:1.1;letter-spacing:-.5px}
.cupom-venc{display:block;margin-top:5px;font-size:12px;color:var(--suave)}

.cupom-itens{
  padding:11px 0;border-top:1px dashed var(--borda);border-bottom:1px dashed var(--borda);
  display:flex;flex-direction:column;gap:5px;
}
.cupom-item{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.cupom-item > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cupom-item-valor{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--suave)}

.cupom-atraso{
  margin-top:11px;padding:9px 11px;border-radius:7px;
  background:rgba(239,68,68,.12);color:var(--erro-texto);
  display:flex;flex-direction:column;gap:2px;
}
.cupom-atraso strong{font-size:13px}
.cupom-atraso span{font-size:11.5px;opacity:.9}

.cupom-historico{margin-top:13px}
.cupom-linha{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;
  padding:4px 0;font-size:12px;
}
.cupom-linha + .cupom-linha{border-top:1px solid var(--borda)}
/* O ponto colorido faz a coluna ser lida de relance, sem comparar textos. */
.cupom-marca-pg{font-size:11px;white-space:nowrap}
.cupom-marca-pg.paga{color:var(--ok-texto)}
.cupom-marca-pg.atrasada{color:var(--erro-texto)}
.cupom-marca-pg.aberta{color:var(--suave)}

.cupom-link{
  display:block;margin-top:13px;padding-top:11px;
  border-top:1px dashed var(--borda);
  text-align:center;font-size:12px;
}

/* O lancamento dentro da categoria, na legenda. Menor e mais apagado que o
   pai: a hierarquia tem de ser visivel sem ninguem explicar qual e qual. */
.fatias-legenda .fatia-filha{font-size:11.5px;opacity:.82;padding-left:9px}
.fatias-legenda .fatia-filha i{width:7px;height:7px}

/* ------------------------------------------- o resumo do que o filtro achou */

/* Fica colado no topo da tabela, como um cabecalho que responde antes de
   alguem percorrer as linhas. Numeros tabulares para as colunas nao dancarem
   entre um filtro e outro. */
.totais-filtro{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  padding:10px 14px;margin-bottom:-1px;
  background:var(--painel2);border:1px solid var(--borda);
  border-radius:10px 10px 0 0;font-size:12.5px;color:var(--suave);
}
.totais-conta{font-size:13px;color:var(--texto)}
.totais-conta strong{font-size:15px}
.totais-item b{
  margin-left:5px;color:var(--texto);font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* O total do periodo em destaque; pago em verde e vencido em vermelho, as
   mesmas cores que as linhas da tabela ja usam - a leitura e a mesma. */
.totais-item.forte b{font-size:14.5px}
.totais-item.ok b{color:var(--ok-texto)}
.totais-item.erro b{color:var(--erro-texto)}
@media (max-width:640px){
  .totais-filtro{gap:4px 14px;padding:9px 11px}
}
/* Filtro sem resultado: a barra continua no HTML (a busca ao vivo troca este
   bloco pelo id e precisa achá-lo), mas nao ocupa espaco nenhum. */
.totais-filtro.vazia{display:none}

/* ------------------------------------------- o alerta de tarefa na hora */

/* Um <dialog> nativo: ele ja vem com fundo escuro, foco preso dentro e Esc
   funcionando - tres coisas que um div com position:fixed nao tem de graca. */
.alerta-tarefa{
  border:none;border-radius:14px;padding:22px 24px;max-width:420px;width:calc(100% - 32px);
  background:var(--painel);color:var(--texto);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.alerta-tarefa::backdrop{background:rgba(6,9,14,.62)}
.alerta-tarefa-topo{display:flex;gap:13px;align-items:flex-start;margin-bottom:10px}
.alerta-tarefa-rotulo{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--suave);margin-bottom:3px;
}
.alerta-tarefa-topo strong{font-size:17px;line-height:1.3;display:block}
/* O icone num circulo, como no menu: e a mesma linguagem visual, e faz o
   assunto ser reconhecido antes de o titulo ser lido. */
.alerta-tarefa-icone{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  background:var(--marca);color:var(--sobre-marca);
}
.icone-molde{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:var(--painel2);color:var(--suave);
}

/* --------------------------------- a etiqueta de categoria, na cor do grafico */

/* A MESMA matiz que a fatia do grafico usa. E o que faz achar "qual linha e
   de qual categoria" sem ler: a etiqueta azul da tabela e o pedaco azul da
   barra sao a mesma coisa.

   O fundo e a matiz bem apagada e o texto e ela clara: cor cheia numa
   etiqueta de 11px deixa o texto ilegivel, e a etiqueta existe para ser
   lida. */
.tag-categoria{
  background:hsl(var(--matiz, 215) 62% 55% / .18);
  color:hsl(var(--matiz, 215) 70% 72%);
}
:root[data-tema="claro"] .tag-categoria{
  background:hsl(var(--matiz, 215) 62% 45% / .14);
  color:hsl(var(--matiz, 215) 65% 34%);
}

/* ----------------------------------- as etiquetas embaixo da descricao */

/* UMA LINHA SO. Antes era flex-wrap:wrap com max-width, e um fornecedor de
   nome longo ("Bom Controle.Com Locacao De Software Ltda") empurrava cada
   etiqueta para a linha de baixo - tres linhas por conta, e a tabela virava
   uma escada.
   Nao quebrar sozinho e so metade: alguma coisa tem de ceder, e quem cede e a
   etiqueta MAIOR (o fornecedor), cortada com reticencias. O nome inteiro fica
   no title. */
.resumo-linha{
  display:flex;flex-wrap:nowrap;align-items:center;gap:5px;
  max-width:420px;min-width:0;overflow:hidden;
}
.resumo-linha > .tag{flex:0 0 auto}
/* A que pode encolher e ser cortada. */
.resumo-linha > .tag-cortada{
  flex:0 1 auto;min-width:54px;
  overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:900px){
  .resumo-linha{max-width:none}
}

/* ------------------------------------------------ o ponto de cor da linha */

/* O elo entre a barra do grafico e a linha da tabela. Na tela de contas a
   receber o "assunto" da linha e o CLIENTE, e o nome dele ja e o titulo da
   celula - por isso aqui e um ponto, e nao uma etiqueta: repintar o nome
   inteiro competiria com o valor, que e o que se le nesta tabela. */
.ponto-cor{
  display:inline-block;flex:0 0 auto;
  width:9px;height:9px;border-radius:50%;
  background:hsl(var(--matiz, 215) var(--sat, 72%) var(--tom, 55%));
}
.resumo-linha > strong{min-width:0}

/* --------------------------------------------------------- os anexos */

/* Fechado e um clipe. A caixa so existe depois do clique: comprovante e
   documento de conferencia, nao de leitura diaria, e uma lista de arquivos
   aberta em toda linha empurraria o vencimento e o valor para fora da tela. */
.anexos-caixa{
  margin-top:10px;text-align:left;
  border:1px solid var(--borda);border-radius:8px;padding:10px;
  background:var(--painel2);
  min-width:260px;
}
.anexos-lista{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.anexos-lista li{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;min-width:0;
}
.anexos-lista li a{
  display:flex;align-items:center;gap:5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.anexos-lista li .ajuda{margin:0;flex:0 0 auto;font-size:11px}
.anexos-lista li form{margin-left:auto}
.anexos-envio{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.anexos-envio > div{flex:1 1 130px;min-width:0}

/* Texto so para leitor de tela: o clipe sozinho nao diz nada em voz alta. */
.so-leitor{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------- o recibo */

/* Meia folha de papel na tela, para o Ctrl+P sair igual ao que se ve. O painel
   NAO gera PDF (nao ha biblioteca de PDF aqui, e nao ha Composer); quem gera e
   o "Salvar como PDF" do navegador - e a tela diz isso. */
.recibo{
  max-width:760px;margin:0 auto;
  border:1px solid var(--borda);border-radius:12px;
  padding:28px 32px;background:var(--painel);
}
.recibo-cabecalho{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--borda);
  font-size:13px;line-height:1.5;
}
.recibo-numero{text-align:right;line-height:1.3}
.recibo-numero span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--suave)}
.recibo-numero strong{font-size:16px}
/* O valor em numero grande e a primeira coisa que se confere num recibo. */
.recibo-valor{
  font-size:30px;font-weight:700;letter-spacing:-.02em;
  margin:20px 0 6px;
}
.recibo-texto{font-size:14.5px;line-height:1.75;margin:0 0 22px}
.recibo-linhas{
  display:flex;gap:28px;flex-wrap:wrap;
  padding:12px 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  font-size:13px;
}
.recibo-linhas > div{display:flex;flex-direction:column;gap:2px}
.recibo-linhas span{font-size:11px;color:var(--suave)}
.recibo-assinatura{margin-top:44px;text-align:center;font-size:13px}
.recibo-local{margin-bottom:42px;color:var(--suave)}
.recibo-linha-assinatura{
  width:min(320px, 100%);margin:0 auto 6px;
  border-top:1px solid var(--texto);
}

@media print{
  /* Some tudo o que e navegacao: o papel nao tem menu, nem botao, nem aviso.
     O que sobra e o recibo. */
  .esconder-impressao, .lateral, .alerta, .menu-botao{display:none !important}
  body, main{background:#fff;color:#000;margin:0;padding:0}
  .recibo{
    border:0;border-radius:0;background:#fff;color:#000;
    max-width:none;padding:0;
  }
  .recibo-cabecalho, .recibo-linhas{border-color:#999}
  .recibo-linha-assinatura{border-top-color:#000}
  .recibo-numero span, .recibo-linhas span, .recibo-local{color:#333}
}

/* ------------------------------------------- o desafio e o confiar no login */

.desafio-linha{
  display:flex;align-items:center;gap:10px;
  margin:6px 0 8px;
}
.desafio-imagem{
  display:block;border:1px solid var(--borda);border-radius:8px;
  /* A imagem tem tamanho fixo e nao pode esticar: esticada, a letra borra e o
     desafio passa a reprovar quem acertou. */
  max-width:100%;height:auto;
}

/* "Confiar neste dispositivo" e uma decisao, nao uma opcao escondida: ela tem
   caixa propria, o texto explica o que acontece e o que nao fazer. Caixinha
   solta com duas palavras ao lado e marcada sem ler. */
.confiar{
  display:flex;gap:10px;align-items:flex-start;
  text-align:left;margin:0 0 18px;cursor:pointer;
  padding:11px 12px;border:1px solid var(--borda);border-radius:10px;
  background:var(--painel2);
}
.confiar input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--marca)}
.confiar strong{display:block;font-size:13.5px;font-weight:600}
.confiar small{display:block;margin-top:3px;color:var(--suave);font-size:11.5px;line-height:1.5}

/* O contador de lançamentos de uma fatia, na legenda do gráfico. Discreto
   de propósito: quem lê a legenda procura o percentual, e o número entra
   como apoio - "11,8%" com um "74" do mesmo tamanho ao lado viram dois
   números disputando a mesma pergunta. */
.fatia-quantos{
  display:inline-block;margin-left:3px;padding:0 5px;
  border-radius:999px;background:var(--painel3);
  color:var(--suave);font-size:10.5px;font-weight:600;
}