/* === FONTES DA CASA, SERVIDAS POR NOS MESMOS =========================
   Os cinco arquivos moram em /assets/fonts (82 KB, woff2, subconjunto
   latino — o mesmo que o Google entregava). Antes cada tela pedia a
   fonte ao Google, e o IP de quem abre ia junto. Nas telas publicas
   (orcamento, fatura, formulario) quem paga essa conta e o cliente do
   nosso cliente, que nao tem nada a ver com isso.
   font-display:swap mantem o texto legivel enquanto a fonte chega; as
   faces "Fallback" existem para o instante da troca, com as medidas
   calculadas a partir da largura real de uma frase de verdade — sem
   elas a troca empurra a pagina.
   ==================================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/roboto-300.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/roboto-400.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/roboto-500.woff2') format('woff2')}
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:111.4%;ascent-override:94.2%;descent-override:31.4%;line-gap-override:9.0%}
@font-face{font-family:'Roboto Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:99.4%;ascent-override:93.4%;descent-override:24.6%;line-gap-override:0%}

/* REGRA Pilot — protótipo navegável do sistema completo. Cores do logo oficial. */
/* O PESO, DE NOVO — AGORA EM TODA PARTE.
   O ajuste dos titulos parou nos titulos: etiquetas, numeros grandes,
   cabecalhos de tabela, abas e botoes continuavam em 600 e 700. Numa
   tela cheia, o que pesa nao e um titulo isolado — e a soma. 500 passa
   a ser o unico peso de destaque da casa: separa do texto corrido sem
   engrossar. Nada acima de 500.
   O <b>, o <strong> e o <th> entram na regra: sem isso eles herdam o
   700 do navegador e reabrem pela porta dos fundos o peso que acabou
   de sair pela frente.
   E como 600 e 700 sairam do CSS, saem tambem do pedido ao Google
   Fonts: duas fontes a menos para baixar em cada pagina. */
b,strong,th{font-weight:500}
:root{
  --navy:#001B33; --navy-700:#0A2A45; --navy-600:#12395A; --navy-500:#1D4A70;
  --gold:#E8B118; --gold-deep:#D0821C; --gold-text:#96690C;
  --gold-grad:linear-gradient(135deg,#E8B118,#D0821C);
  --white:#fff; --paper:#F5F8FA; --paper-2:#EBF1F6;
  --text:#12283C; --muted:#4E6478; --faint:#8299AB;
  --line:#E2EAF0; --line-2:#CFDDE7;
  --ok:#1B9E5A; --warn:#D97706; --danger:#DC2626; --info:#2563EB;
  /* UM ARREDONDAMENTO SO, 5px, no painel e no site (27/09/2026).
     Antes havia 10px nos botoes e 14px nos cartoes, mais uma duzia de
     valores soltos (9, 8, 7, 6, 4) que nasceram um de cada vez. De
     longe isso nao parece defeito; de perto e o que faz uma tela
     parecer montada por duas pessoas diferentes. --r-lg continua a
     existir e vale o mesmo: e o lugar unico para mudar a curva dos
     cartoes se um dia ela quiser diferente dos botoes de novo. Comecou
     em 10px e foi para 5px no mesmo dia — duas linhas, e a tela
     inteira acompanhou. E exatamente para isso que o token existe.
     O QUE NAO ENTRA NESTA REGRA, de proposito: o que e redondo por
     natureza — pastilha (99px), chave de liga-desliga, retrato
     (50%) — e os quadradinhos de 11px que so mostram uma cor, que com
     10px virariam bolinhas. */
  --r:5px; --r-lg:5px;
  --sh:0 1px 3px rgba(0,27,51,.06); --sh-2:0 10px 30px rgba(0,27,51,.10);
  --fh:'Poppins','Poppins Fallback',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --fb:'Roboto','Roboto Fallback',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.68,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--fb);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* O PESO DOS TITULOS.
   Esta regra nao declarava font-weight, entao todo titulo do painel
   herdava o padrao do navegador: 700. Poppins em 700 e pesada — numa
   tela cheia de cartoes, cada cabecalho grita e a leitura cansa.
   500 e o peso de titulo desta familia: ainda separa titulo de texto,
   sem empastar. E como peso mais leve perde presenca, o tamanho sobe
   um pouco para compensar — a troca que ela pediu.
   O espacamento negativo tambem sai: apertar letra e recurso de peso
   alto. Em 500 ele fecha os contornos e piora justamente o que o peso
   mais leve veio melhorar. */
h1,h2,h3,h4{font-family:var(--fh);margin:0;line-height:1.22;color:var(--navy);
  font-weight:500;letter-spacing:0}
p{margin:0}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}

/* ---------------- layout ---------------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

/* ---------------- sidebar ---------------- */
.side{background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-top{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.side-top img{height:22px;width:auto}
.side-top .sub{margin-top:9px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-family:var(--fh);font-weight:500}
.tenant{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.tenant label{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:7px;font-family:var(--fh)}
/* A etiqueta e o nome da pessoa na MESMA linha.
   flex-wrap deixa o nome cair para a linha de baixo quando nao couber —
   preferivel a cortar o nome de alguem. Quando cai, o ellipsis so age se
   ainda assim estourar. min-width:0 e o que permite ao ellipsis funcionar
   dentro de um flex; sem ele o texto empurra a caixa e vaza. */
.tenant-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.tenant-top label{margin-bottom:0}
.tenant-who{flex:1;min-width:0;font-size:12.5px;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-biz{font-family:var(--fh);font-weight:500;font-size:14px}
.tenant select{
  width:100%;padding:9px 11px;border-radius:var(--r);border:1px solid rgba(255,255,255,.18);
  background:var(--navy-700);color:#fff;font-family:var(--fh);font-size:13.5px;font-weight:500;
}
.nav{padding:14px 12px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 12px;margin-bottom:3px;border:none;border-radius:var(--r);
  background:none;color:rgba(255,255,255,.72);font-family:var(--fh);font-size:14px;font-weight:500;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-item svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.on{background:var(--gold-grad);color:#20160A;font-weight:500}
.nav-item .count{
  margin-left:auto;font-size:11.5px;padding:1px 8px;border-radius:var(--r);
  background:rgba(255,255,255,.14);color:#fff;font-weight:500;
}
.nav-item.on .count{background:rgba(0,27,51,.18);color:#20160A}
.nav-sep{margin:14px 12px 8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:var(--fh)}
.side-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.42)}

/* ---------------- main ---------------- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  background:#fff;border-bottom:1px solid var(--line);padding:0 30px;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:10;
}
.topbar h1{font-size:20.5px}
.topbar .sub{font-size:12.5px;color:var(--faint);margin-top:1px}
.top-actions{display:flex;align-items:center;gap:10px}
.view{padding:26px 30px 60px}
.view[hidden]{display:none}

/* ---------------- componentes ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--r);
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font-family:var(--fh);font-size:13.5px;font-weight:500;text-decoration:none;
  transition:all .2s var(--ease);
}
.btn:hover{border-color:var(--gold);color:var(--gold-text);box-shadow:var(--sh)}
.btn-gold{background:var(--gold-grad);border-color:transparent;color:#20160A}
.btn-gold:hover{color:#20160A;transform:translateY(-1px);box-shadow:0 6px 16px rgba(208,130,28,.3)}
.btn-navy{background:var(--navy);border-color:transparent;color:#fff}
.btn-navy:hover{color:#fff;background:var(--navy-700)}
.btn-sm{padding:6px 12px;font-size:12.5px}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.card-head{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}
.card-head h3{font-size:16.5px}
.card-body{padding:20px}

.grid{display:grid;gap:18px}
.g1{grid-template-columns:1fr}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Um cartao que ocupa a faixa inteira dentro de uma grade de colunas.
   Serve para o que e largo por natureza — um endereco de link, por
   exemplo — e para nao deixar a grade esticar uma celula curta ate a
   altura da vizinha comprida. */
.span-tudo{grid-column:1/-1}

.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh)}
.stat .lbl{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-family:var(--fh);font-weight:500}
.stat .val{font-family:var(--fh);font-size:29px;font-weight:500;color:var(--navy);margin-top:7px;line-height:1}
.stat .delta{font-size:12.5px;margin-top:7px;color:var(--muted)}
.stat .delta.up{color:var(--ok)} .stat .delta.down{color:var(--danger)}

/* ETIQUETA. Era uma pilula redonda com o texto em minusculas, do jeito
   que vem do banco ("won", "draft"). Duas coisas mudaram a pedido da
   dona: MAIUSCULAS, e o mesmo arredondamento dos botoes (var(--r), 10px)
   em vez do 99px que fazia uma capsula. Assim a etiqueta e o botao ao
   lado dela pertencem ao mesmo desenho, e o texto curto de status para
   de parecer uma palavra solta no meio da linha. */
.badge{display:inline-block;padding:4px 10px;border-radius:var(--r);
  font-size:11px;font-family:var(--fh);font-weight:500;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.45}
.b-new{background:#FEF3D0;color:#8A5F0A}
.b-contacted{background:#DBEAFE;color:#1E40AF}
/* O estado novo nascera SEM COR: a etiqueta some e vira texto preto
   solto no meio de uma coluna de pilulas coloridas. Teal, entre o azul
   de "contactado" e o roxo de "agendado" — a mesma distancia que os
   dois tem na fila. */
.b-estimate{background:#CCFBF1;color:#115E59}
.b-booked{background:#EDE9FE;color:#5B21B6}
.b-won{background:#D1FAE5;color:#065F46}
.b-lost{background:#F1F5F9;color:#64748B}
.b-ok{background:#D1FAE5;color:#065F46}
.b-due{background:#FEE2E2;color:#991B1B}
.b-pend{background:#FEF3D0;color:#8A5F0A}
.b-ai{background:var(--navy);color:var(--gold)}

.table{width:100%;border-collapse:collapse}
.table th{
  text-align:left;font-family:var(--fh);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:11px 20px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background .15s var(--ease)}
.table tbody tr:hover{background:var(--paper)}
.table .who{font-family:var(--fh);font-weight:500;color:var(--navy)}
.table .sm{font-size:12.5px;color:var(--faint)}
/* TRES LINHAS NA MESMA CELULA, E NENHUMA ROTULADA.
   Enquanto empresa e endereco eram as duas .sm, ficavam duas linhas
   cinzas identicas: a dona olhou a lista de orcamentos e nao soube
   dizer qual era qual (30/09/2026). Entao a do meio ficou um tom mais
   escura e um pouco mais firme, e o endereco continua sendo o mais
   apagado da celula. Sem etiqueta, sem icone — so a hierarquia, que e
   o que a leitura de relance usa.
   EM 03/10/2026 A ORDEM VIROU: a empresa subiu para a primeira linha
   (ver src/model.js, nomeCliente) e a pessoa desceu para a segunda.
   O estilo do meio nao mudou, so o que mora nele — dai .pes ao lado de
   .co: quem le o HTML precisa saber qual das duas esta ali, e um nome
   de classe que mente custa caro na proxima vez. */
.table .co,.pes{font-size:12.5px;color:var(--muted);font-weight:500}
/* No cartao do funil a pessoa fica logo abaixo do nome da empresa, e
   sem esse respiro as duas linhas se grudam — o cartao e apertado. */
.deal .pes{margin-top:2px}

/* ---------- O TELEFONE CLICAVEL ----------
   O numero e um link para o discador; ao lado dele, dois alvos de toque
   de 30px — ligar e WhatsApp. 30px porque dedo nao acerta 16px, e esta
   e uma tela que ela usa no celular, em pe, na rua. */
.fone{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line-2)}
.fone:hover{border-bottom-color:var(--gold)}
.fone-ac{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.fone-ac a{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--r);border:1px solid var(--line-2);
  background:#fff;color:var(--muted);transition:all .18s var(--ease)}
.fone-ac a:hover{color:var(--navy);border-color:var(--gold);background:var(--paper-2)}
.fone-ac svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Debaixo de um campo de formulario os botoes ganham um respiro e
   perdem a margem da esquerda, que so faz sentido ao lado do numero. */
.fone-linha{display:inline-flex;margin-top:6px}
.fone-linha .fone-ac{margin-left:0}
.tw{overflow-x:auto}

/* DE ONDE VEIO O PEDIDO. Antes era um quadradinho colorido de 22px com
   a sigla do canal dentro, seguido do nome por extenso: "REF referral".
   Dois problemas.
   O primeiro e visivel: 22px nao cabem tres letras a 11px em negrito, e
   REF, WEB, WLK e SMS apareciam CORTADOS dentro do quadrado.
   O segundo e de leitura: a sigla e o nome diziam a mesma coisa, e a cor
   forte do quadrado disputava atencao com a cor da etiqueta de STATUS na
   coluna do lado. Na tabela, cor tem um trabalho — dizer em que pe esta
   o negocio. Quando a origem tambem e colorida, nenhuma das duas salta.
   Agora a origem e uma etiqueta neutra, no mesmo desenho da de status:
   maiuscula, com fundo, arredondamento de botao. A cor ficou so onde
   decide alguma coisa. */
.chan{display:inline-block;padding:4px 10px;border-radius:var(--r);
  background:var(--paper-2);color:var(--muted);border:1px solid var(--line);
  font-family:var(--fh);font-size:11px;font-weight:500;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.45}
/* O CANAL QUE PRECISA DE REVISAO (05/10/2026): Phone, Text e Email
   respondiam "por onde ela te procurou" e ficaram no campo que agora
   responde "como ela te achou". Borda dourada tracejada — pede
   atencao sem gritar como erro, porque nao e erro: e uma resposta
   dada para outra pergunta. Nao e so a cor que diferencia: o
   tracejado se ve em tela preto e branco e para quem nao distingue
   bem as cores. */
.chan-rever{border-style:dashed;border-color:var(--gold);color:var(--gold-text)}

/* ====================================================================
   O MENU "COLUMN" DO QUADRO (05/10/2026)

   BOTAO NA FRENTE, CAIXA ATRAS, UMA LINHA SO. Renomear e mover eram
   tres linhas cada um — rotulo, caixa larga, botao embaixo — e numa
   coluna de 240px isso empurrava metade do menu para fora da tela.
   O botao vem primeiro porque ele tem a largura da palavra e nao
   muda; a caixa fica com o que sobrar. Ao contrario, com a caixa
   primeiro, cada coluna poria o botao num lugar diferente conforme o
   nome que estivesse escrito nela.
   `min-width:0` NAO E ENFEITE: sem ele um item flex se recusa a
   encolher abaixo do proprio conteudo, e um nome de projeto comprido
   ("BRAZILIAN WAXING BY SISTERS") estica a coluna inteira em vez de
   ser cortado. */
.col-linha{display:flex;gap:6px;align-items:center}
/* AS DUAS LINHAS ALINHAM A CAIXA NO MESMO X. Nao basta um min-width:
   "Rename" e mais largo que "Move", entao cada botao parava num
   tamanho e as caixas comecavam em x diferentes — o oposto de "mais
   organizado". Com base fixa (flex:0 0), os dois ocupam a mesma
   fatia independentemente da palavra que esteja escrita neles, e a
   medida do teste do navegador cobra isso. */
.col-linha > button{flex:0 0 84px;white-space:nowrap}
/* A LINHA DO "MOVER" INVERTE A ORDEM, e so ela (06/10/2026). Nas
   outras o botao vem primeiro; aqui vir primeiro e um convite — a mao
   cai nele antes de passar pelo seletor, e o que esta do outro lado
   do clique e a coluna inteira mudando de cliente. Lendo da esquerda
   para a direita: escolha o projeto, depois mova.
   A ORDEM E A DO HTML, e nao um `order` de CSS: quem navega pelo
   teclado segue a ordem do documento, e as duas nao podem discordar —
   por isso nao ha regra nenhuma aqui, so a classe no HTML para quem
   procurar entender por que esta linha e diferente das outras. */
.col-linha input,.col-linha select{flex:1;min-width:0;margin:0;font-size:12px;padding:6px 8px}

/* A COR DIZ O ESTADO, E NAO O QUE O BOTAO FAZ.
   Dourado cheio = o cliente le esta coluna. E a mesma tinta da
   pastilha "client" no cabecalho da coluna, de proposito: a mesma
   ideia nao pode ter duas cores na mesma tela.
   O cinza do outro estado nao e o branco dos vizinhos (Rename, Put
   away): assim o par liga/desliga se le como UM controle, e nao como
   mais um botao solto no meio dos outros.
   A cor nunca anda sozinha — o texto do botao muda e a frase embaixo
   repete em palavras. */
.btn-sm.btn-ve-on{background:var(--gold);border-color:var(--gold-deep);color:#20160A;font-weight:500}
.btn-sm.btn-ve-on:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
/* DESLIGADO E CONTORNO, NAO CINZA APAGADO. A primeira versao usava um
   cinza mais claro que o dos vizinhos e o botao passava a parecer
   DESABILITADO — justo o que nao pode, porque e nele que se clica para
   publicar. Mantendo o dourado na borda, o par liga/desliga se le como
   um controle so, e o que muda de estado e o PREENCHIMENTO: cheio =
   o cliente le, contorno = nao le. Preenchimento e forma, nao cor:
   funciona em tela preto e branco. */
.btn-sm.btn-ve-off{background:#fff;border-color:var(--gold);color:var(--gold-text);font-weight:500}
.btn-sm.btn-ve-off:hover{background:#FFFBF0}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{
  padding:7px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:#fff;
  font-family:var(--fh);font-size:13px;font-weight:500;color:var(--muted);transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--gold);color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .n{opacity:.6;margin-left:5px}

/* radar */
.attn{display:flex;gap:14px;padding:15px 20px;border-bottom:1px solid var(--line);align-items:flex-start;transition:background .15s var(--ease)}
.attn:last-child{border-bottom:none}
.attn:hover{background:var(--paper)}
.attn-ico{width:34px;height:34px;border-radius:var(--r);flex:none;display:grid;place-items:center;font-size:15px}
.a-red{background:#FEE2E2} .a-amber{background:#FEF3D0} .a-blue{background:#DBEAFE}
/* Com os titulos em 500, este <b> a 700 passou a pesar MAIS que o
   cabecalho do cartao logo acima — a hierarquia invertida. O item do
   radar e conteudo, nao titulo de secao. */
.attn b{display:block;font-family:var(--fh);font-weight:500;font-size:14.5px;color:var(--navy)}
.attn span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.attn .act{margin-left:auto;flex:none}

/* pipeline */
/* AS COLUNAS NAO CABEM MAIS EM CINCO.
   Isto era repeat(5, ...) escrito a mao, e no dia em que nasceu a etapa
   "Estimate sent" a sexta coluna caiu para a linha de baixo — sozinha,
   parecendo defeito. Com auto-flow em coluna o numero deixa de estar
   no CSS: entram sete etapas amanha e continuam numa linha so, com
   rolagem lateral quando a tela nao der conta, que e o certo para um
   quadro. */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--paper-2);border-radius:var(--r-lg);padding:12px;min-height:340px}
.col-h{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px}
.col-h b{font-family:var(--fh);font-weight:500;font-size:13.5px;color:var(--navy)}
.col-h .n{font-size:11.5px;background:#fff;border-radius:var(--r);padding:1px 9px;color:var(--muted);font-weight:500}
.deal{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:9px;box-shadow:var(--sh);transition:all .2s var(--ease);cursor:default}
.deal:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.deal b{display:block;font-family:var(--fh);font-size:13.5px;color:var(--navy)}
.deal .svc{font-size:12px;color:var(--faint);margin-top:2px}
.deal .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.deal .val{font-family:var(--fh);font-weight:500;font-size:13px;color:var(--navy)}

/* conversa */
.conv{display:grid;grid-template-columns:290px 1fr;gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--sh)}
.conv-list{border-right:1px solid var(--line);max-height:600px;overflow-y:auto}
.conv-item{padding:14px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left;background:none;border-left:3px solid transparent;transition:background .15s var(--ease)}
.conv-item:hover{background:var(--paper)}
.conv-item.on{background:var(--paper);border-left-color:var(--gold)}
.conv-item b{display:block;font-family:var(--fh);font-size:13.5px;color:var(--navy)}
.conv-item .prev{font-size:12.5px;color:var(--faint);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-item .meta{display:flex;align-items:center;gap:8px;margin-top:7px}
.thread{padding:20px;max-height:600px;overflow-y:auto;background:var(--paper)}
.msg{max-width:76%;margin-bottom:14px;padding:12px 15px;border-radius:var(--r);font-size:14px;line-height:1.55}
.msg.them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.us{background:var(--navy);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg .t{display:block;font-size:11px;margin-top:6px;opacity:.55}
.ai-box{margin:18px 20px 20px;border:1.5px solid var(--gold);border-radius:var(--r-lg);background:#FFFDF6;padding:16px}
.ai-box .h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.ai-box .h b{font-family:var(--fh);font-size:13.5px;color:var(--navy)}
.ai-box p{font-size:14px;color:var(--text)}
.ai-box .acts{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}

/* agenda */
.week{display:grid;grid-template-columns:64px repeat(6,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.week .hd{background:var(--paper);padding:11px 8px;text-align:center;font-family:var(--fh);font-size:12px;font-weight:500;color:var(--navy);border-bottom:1px solid var(--line)}
.week .hd span{display:block;font-size:11px;color:var(--faint);font-weight:400}
.week .hr{padding:8px;font-size:11.5px;color:var(--faint);text-align:right;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.week .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:52px;padding:4px}
.appt{border-radius:var(--r);padding:6px 8px;font-size:11.5px;line-height:1.35;height:100%;border-left:3px solid}
.appt b{display:block;font-family:var(--fh);font-size:12px}
.ap-w{background:#FEF3D0;border-color:var(--gold);color:#7A5309}
.ap-l{background:#D1FAE5;border-color:var(--ok);color:#065F46}
.ap-c{background:#DBEAFE;border-color:var(--info);color:#1E40AF}

/* automações */
.auto{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}
.auto:last-child{border-bottom:none}
.auto b{display:block;font-family:var(--fh);font-size:14px;color:var(--navy)}
.auto span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.sw{margin-left:auto;flex:none;width:44px;height:25px;border-radius:99px;background:var(--line-2);position:relative;border:none;transition:background .25s var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.sw.on{background:var(--ok)}
.sw.on::after{transform:translateX(19px)}

/* aviso de protótipo */
.proto{
  background:var(--navy);color:#fff;padding:11px 30px;font-size:13px;
  display:flex;align-items:center;gap:11px;justify-content:center;text-align:center;
}
.proto b{color:var(--gold);font-family:var(--fh)}
.tag-demo{background:var(--gold);color:#20160A;font-family:var(--fh);font-weight:500;font-size:10px;letter-spacing:.1em;padding:2px 7px;border-radius:var(--r)}

.empty{padding:50px 20px;text-align:center;color:var(--faint)}
.empty b{display:block;font-family:var(--fh);color:var(--navy);font-size:15px;margin-bottom:6px}

@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr} .conv{grid-template-columns:1fr} .conv-list{max-height:220px;border-right:none;border-bottom:1px solid var(--line)} }
/* ---------------- no celular ----------------
   A barra lateral nao virava menu: ela so perdia a coluna e caia INTEIRA
   em cima do conteudo. Num telefone de 844px de altura, o titulo da tela
   comecava em 425px — metade da primeira tela era marca, "signed in as",
   navegacao, conta, botao de sair e tres links de rodape. Ninguem abre o
   app para clicar em "Terms of Use".

   O conserto nao esconde nada: reordena. Em cima fica so o que serve para
   navegar (marca, quem esta logado, as telas). Conta, sair e os links vao
   para DEPOIS do conteudo, que e onde rodape mora.

   Como: `display:contents` faz a barra deixar de ser uma caixa — os
   filhos dela passam a ser irmaos do conteudo, e ai da para ordenar em
   volta dele. O preco e que o fundo azul, que era da barra, precisa ser
   pintado em cada pedaco; sem isso eles ficariam transparentes. */
@media (max-width:820px){
  .app{display:flex;flex-direction:column}
  .side{display:contents}
  .side-top{order:1} .tenant{order:2} .nav{order:3}
  .main{order:4;flex:1;min-width:0}
  .nav-tail{order:5} .side-foot{order:6}
  .side-top,.tenant,.nav,.nav-tail,.side-foot{background:var(--navy);color:#fff}
  /* .side-top.band continua branca: dois nomes de classe ganham de um */
  .nav{display:flex;overflow-x:auto;padding:10px;scroll-padding-inline:10px}
  .nav-item{white-space:nowrap}
  /* Um respiro no fim da tira. Sem ele o ultimo botao encosta na borda e
     parece cortado mesmo quando a rolagem chegou ao fim. */
  .nav::after{content:"";flex:0 0 6px}
  .nav-sep{display:none}
  /* "Signed in as" mais apertado: no celular ele e uma etiqueta, nao um
     cabecalho. */
  .tenant{padding:9px 16px 11px}
  .tenant label{margin-bottom:3px}
  .nav-tail{margin-top:0;border-top:1px solid rgba(255,255,255,.1)}
  .g2,.g4{grid-template-columns:1fr}
  .view{padding:20px 16px 50px}

  /* O CABECALHO DA PAGINA TINHA ALTURA FIXA DE 66px.
     Numa tela de celular o subtitulo quebra em quatro linhas, porque os
     botoes de acao comem metade da largura. O bloco de texto fica com
     uns 103px — mais alto que a caixa que o guarda. Como o alinhamento
     e ao centro, ele transbordava PARA OS DOIS LADOS: o titulo
     "Customers" saia por cima e ficava escondido atras do menu, e o
     subtitulo escorria por baixo, por cima do conteudo da tela.
     Altura fixa so funciona enquanto o texto couber nela. Aqui ela
     passa a ser um MINIMO, e a caixa cresce com o que tem dentro. */
  .topbar{height:auto;min-height:60px;padding:14px 16px;
    align-items:flex-start;flex-wrap:wrap;gap:10px}
  /* E deixa de grudar no topo. Grudado, ele subia por cima do menu (que
     nao gruda) e os dois ficavam um em cima do outro. */
  .topbar{position:static}
  .topbar h1{font-size:19px}
  /* Titulo e subtitulo ficam com a largura inteira; os botoes descem
     para a linha de baixo em vez de espremer o texto em 138px. */
  .topbar > div:first-child{flex:1 1 100%;min-width:0}
  .top-actions{flex:1 1 100%;flex-wrap:wrap}

  /* A FAIXA DOS DOIS LOGOS ocupava a largura toda da tela, e o logo do
     cliente — que e centralizado dentro do espaco que sobra — ficava
     boiando no meio, longe da divisoria. Na barra lateral do computador
     isso nao aparecia porque la o espaco e estreito. */
  .side-top.band{margin:10px 16px;padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------- ajustes do painel real ---------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
label{display:block;margin:0 0 16px;font-family:var(--fh);font-size:13px;font-weight:500;color:var(--muted)}
input,select,textarea{
  width:100%;margin-top:6px;padding:10px 12px;font-family:var(--fb);font-size:14.5px;color:var(--text);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,177,24,.16)}
textarea{resize:vertical}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.form-actions .right{margin-left:auto}
/* AS PARCELAS, COM CAMPO DE VALOR.
   Mesmo desenho das linhas do orcamento — texto largo, valor estreito e
   alinhado a direita, e o mesmo x de remover — para que uma coisa que
   se preenche do mesmo jeito tambem se pareca. */
.qstage-ed{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 16px;margin:0 0 16px}
.qstage-ed legend{font-family:var(--fh);font-weight:500;font-size:13px;color:var(--navy);padding:0 6px}
.ptline{display:grid;grid-template-columns:1fr 130px 34px;gap:10px;align-items:center;margin-bottom:10px}
.ptline input{margin:0}
.ptline .qn{text-align:right}
@media(max-width:760px){ .ptline{grid-template-columns:1fr 34px}
  .ptline .qn{grid-column:1} .ptline .qdel{grid-row:1;grid-column:2} }
.alert{background:#FEE2E2;border:1px solid #FCA5A5;color:#991B1B;padding:11px 14px;border-radius:var(--r);margin-bottom:16px;font-size:14px}
.ok-msg{background:#D1FAE5;border:1px solid #6EE7B7;color:#065F46;padding:11px 14px;border-radius:var(--r);margin-bottom:16px;font-size:14px}
.auth{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:20px;padding:40px 20px;background:var(--navy)}
.auth .box{background:#fff;border-radius:var(--r-lg);padding:30px;width:min(430px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth img{height:26px}
.auth h1{font-size:23.5px;margin-bottom:16px}
.auth .hint{font-size:13px;color:var(--faint);margin-bottom:16px}
/* A TELA DE CADASTRO. Mais campos que a de entrar, entao um pouco mais
   larga — mas com a mesma cara, porque e a mesma porta. */
.auth-wide .box{width:min(480px,92vw)}
.auth .sub{font-size:14px;color:var(--faint);margin:-8px 0 18px}
.auth .alt{color:#fff;font-size:13.5px;text-align:center;margin-top:16px;opacity:.85}
.auth .alt a{color:#fff;text-decoration:underline}
.auth .btn.wide{width:100%;justify-content:center;margin-top:4px}
/* OS DOIS PRECOS COMO CARTOES, nao como radio solto numa lista. O que
   a pessoa escolhe aqui e quanto vai pagar; merece area de clique de
   verdade e o preco em tamanho de preco. */
.planpick{border:0;padding:0;margin:6px 0 16px;display:grid;gap:10px}
.planpick legend{font-family:var(--fh);font-weight:500;font-size:13px;color:var(--navy);
  padding:0;margin-bottom:8px}
.planopt{display:flex;align-items:center;gap:11px;margin:0;padding:13px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.planopt input{width:auto;flex:none;margin:0}
.planopt span{display:flex;flex-direction:column;gap:2px}
.planopt strong{font-family:var(--fh);font-size:16px;color:var(--navy)}
.planopt em{font-style:normal;font-size:12.5px;color:var(--faint)}
.planopt:has(input:checked){border-color:var(--gold);background:#FFFBEB}
/* Caixinha "manter conectado". O input generico do painel ocupa a largura
   toda; aqui ele precisa ser so a caixinha, ao lado do texto. */
.auth .check{display:flex;align-items:flex-start;gap:9px;margin:2px 0 8px;
  font-size:13.5px;color:var(--ink);cursor:pointer;line-height:1.45}
.auth .check input{width:auto;flex:none;margin:2px 0 0}
/* "ou" com um fio de cada lado, separando senha de digital/rosto */
.auth .or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--faint);font-size:12.5px}
.auth .or:before,.auth .or:after{content:"";flex:1;height:1px;background:var(--line)}
.auth .btn svg{flex:none}
/* LINK NAO NASCE SUBLINHADO (27/09/2026).
   O sublinhado do navegador aparecia em toda parte onde o componente
   esquecia de desliga-lo — dentro das pastilhas de filtro, por exemplo,
   onde "Draft 0" vinha riscado por baixo como se fosse texto corrido.
   Agora o padrao e sem, e quem QUER o sublinhado pede: a classe .plain
   existe justamente para o link que mora no meio de uma frase, onde a
   cor sozinha nao basta para avisar que aquilo e clicavel. */
a{text-decoration:none}
a.plain{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.soon-box{max-width:620px}
.soon-box .why{margin-top:14px;color:var(--muted)}
.soon-box .mean{margin-top:16px;padding:16px 18px;border-left:3px solid var(--gold);background:var(--paper-2);border-radius:0 var(--r) var(--r) 0;font-size:14.5px}
.nav-item.dim{opacity:.5}
.link-row{display:flex;gap:8px;align-items:center}
.mini{font-size:12px;color:var(--faint)}
.day-col{min-width:0}
.day-h{font-family:var(--fh);font-size:12.5px;font-weight:500;color:var(--navy);padding:10px;background:var(--paper);border-bottom:1px solid var(--line);text-align:center}
.day-h span{display:block;font-size:11px;color:var(--faint);font-weight:400}
.day-body{padding:8px;min-height:130px;border-right:1px solid var(--line)}
.week7{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.ev{display:block;border-radius:var(--r);padding:7px 9px;font-size:11.5px;line-height:1.35;margin-bottom:6px;border-left:3px solid;text-decoration:none}
.ev b{display:block;font-family:var(--fh);font-size:12px}
.ev-unconfirmed{background:#DBEAFE;border-color:var(--info);color:#1E40AF}
.ev-confirmed{background:#FEF3D0;border-color:var(--gold);color:#7A5309}
.ev-done{background:#D1FAE5;border-color:var(--ok);color:#065F46}
.ev-noshow{background:#FEE2E2;border-color:var(--danger);color:#991B1B}
.ev-cancelled{background:#F1F5F9;border-color:#94A3B8;color:#64748B;text-decoration:line-through}
/* Tempo bloqueado. As listras existem para ele ser reconhecido de longe,
   sem ler: numa semana cheia, cor sozinha nao basta — e a listra tambem
   funciona para quem nao distingue bem as cores. Cinza, e nao vermelho:
   bloquear a agenda nao e erro nem problema. */
.ev-block{border-color:#94A3B8;color:#475569;
  background:repeating-linear-gradient(-45deg,#F1F5F9,#F1F5F9 7px,#E2E8F0 7px,#E2E8F0 14px)}
.ev-block b{color:#334155}

/* correcao: itens de menu e links de tabela sem sublinhado */
.nav-item,.side a,.table a.who,.deal a{text-decoration:none}
.table a.who:hover,.deal a:hover b{color:var(--gold-text)}

/* --- administracao (clientes e usuarios) --- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 18px}
/* ALINHAMENTO DE COLUNA — E A TERCEIRA VEZ QUE A ESPECIFICIDADE MORDE.
   `.table th` tem uma classe e um elemento; `.ta-r` tem so uma classe.
   Resultado: o alinhamento nunca valeu para CABECALHO nenhum. O titulo
   TOTAL ficava a esquerda enquanto os valores embaixo iam para a
   direita, e ninguem tinha reparado.
   Nas celulas funcionava por acidente: `.table td` nao declara
   text-align, entao nao havia com quem competir.
   Os dois seletores abaixo levam o pai junto e ganham por
   especificidade — nao por ordem de arquivo, que e frageil. */
.ta-r{text-align:right}
.ta-c{text-align:center}
.table th.ta-r,.table td.ta-r{text-align:right}
.table th.ta-c,.table td.ta-c{text-align:center}
.badge.b-gold{background:#FDF3D7;color:var(--gold-text);border:1px solid #F2D68A}
.badge.b-mute{background:var(--paper-2);color:var(--muted);border:1px solid var(--line)}
.table .link-row form{margin:0}
.table .link-row input[type=password]{padding:7px 10px;font-size:13px}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
.badge.b-bad{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
/* historico: tabela larga rola dentro do card, sem espremer colunas */
.log-wrap{overflow-x:auto}
.log-wrap .table{min-width:940px}
.log-wrap .table td.cli{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-wrap .table td.det{max-width:260px}

/* --- tela do formulario do site --- */
.snip{display:flex;gap:10px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 13px}
.snip.col{flex-direction:column}
.snip code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--navy);
  white-space:pre-wrap;word-break:break-all;flex:1;line-height:1.55}
.snip .btn.ok{background:#D1FAE5;border-color:#6EE7B7;color:#065F46}
.statline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.statline strong{font-family:var(--fh);color:var(--navy);font-size:16px}
/* A segunda lista do menu (Account) nao pode disputar altura com a primeira:
   com flex:1 nas duas, os itens do fim sumiam. */
.nav-tail{flex:none;padding-top:0;border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
/* origem do lead vinda do site */
.origin{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:12px 15px;margin-bottom:20px;font-size:13px}
.origin-t{display:block;font-family:var(--fh);font-weight:500;color:var(--navy);font-size:12.5px;margin-bottom:5px}
.origin a{display:block;color:var(--gold-text);word-break:break-all;margin-bottom:3px}

/* --- pedidos esperando resposta --- */
.waitcard{margin-bottom:20px;border-color:#F2D68A}
.waitcard .card-head{background:#FFFBF0;border-bottom-color:#F2D68A}
.clock{font-family:var(--fh);font-size:12.5px;font-weight:500;color:var(--muted);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:4px 11px}
.clock.warn{background:#FDF3D7;border-color:#F2D68A;color:var(--gold-text)}
.clock.bad{background:#FEE2E2;border-color:#FCA5A5;color:#991B1B}
.logobox{display:flex;align-items:center;gap:12px;margin:-6px 0 16px;min-height:8px}
.logobox img{max-height:46px;max-width:170px;object-fit:contain;border:1px solid var(--line);
  border-radius:var(--r);padding:6px;background:#fff}

/* --- catalogo de precos --- */
.priceline{display:grid;grid-template-columns:1fr 150px 150px auto;gap:12px;align-items:end}
.priceline .btn{height:42px}
.table tr.off{opacity:.5}
.inlinechk{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px;
  font-family:var(--fb);font-weight:400;color:var(--muted);white-space:nowrap}
.inlinechk input{width:auto;margin:0}
@media(max-width:760px){.priceline{grid-template-columns:1fr}}

/* --- montar orcamento --- */
.qbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.badge.b-good{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7}
.qhead,.qline{display:grid;grid-template-columns:1fr 90px 120px 110px 110px 34px;gap:10px;align-items:center}
.qhead{font-family:var(--fh);font-size:11.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;color:var(--faint);padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:12px}
.qline{margin-bottom:10px}
.qline input,.qline select{margin:0}
.qline .qn{text-align:right}
.qamt{text-align:right;font-family:var(--fh);font-weight:500;font-size:14px;color:var(--navy)}
.qdel{border:1px solid var(--line);background:#fff;border-radius:var(--r);width:34px;height:38px;cursor:pointer;
  color:var(--faint);font-size:19px;line-height:1;transition:all .15s}
.qdel:hover{border-color:#FCA5A5;color:var(--danger);background:#FEF2F2}
.qtot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);max-width:340px;margin-left:auto}
.qtot div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:5px 0;
  font-size:14px;color:var(--muted)}
.qtot strong{font-family:var(--fh);color:var(--navy)}
.qtot .big{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:16px}
.qtot .big strong{font-size:21px}
.qtax{width:62px;margin:0 0 0 6px;padding:5px 8px;text-align:right;font-size:13px;display:inline-block}
.form-actions .right{margin-left:auto}
@media(max-width:760px){
  .qhead{display:none}
  .qline{grid-template-columns:1fr 34px;gap:8px;padding:12px;border:1px solid var(--line);
    border-radius:var(--r);background:var(--paper)}
  .qline [name=i_desc]{grid-column:1}
  .qline .qdel{grid-row:1;grid-column:2}
  .qline [name=i_qty],.qline [name=i_unit],.qline [name=i_price]{grid-column:1}
  .qamt{grid-column:1;text-align:left}
  .qtot{max-width:none}
}
.colorrow{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.colorrow input[type=color]{width:46px;height:40px;padding:3px;margin:0;cursor:pointer;flex:none}
.colorrow input[type=text]{width:120px;margin:0;font-family:ui-monospace,Menlo,monospace}
.colorrow .mini{flex:1;min-width:180px}

/* ---------------- Projects (quadros) ---------------- */
.bd-wrap{overflow-x:auto;padding-bottom:10px}
.bd{display:flex;gap:14px;align-items:flex-start;min-height:220px}
.bd-col{flex:0 0 272px;background:var(--paper-2);border-radius:var(--r-lg);padding:10px;transition:background .15s var(--ease)}
.bd-col.over{background:#FDF3D6;outline:2px dashed var(--gold)}
.bd-col-h{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 4px 10px}
.bd-col-h b{font-family:var(--fh);font-size:13px;color:var(--navy)}
.bd-col-h .n{font-size:11px;background:#fff;border-radius:var(--r);padding:1px 8px;color:var(--muted);font-weight:500}
.bd-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;margin-bottom:8px;
  box-shadow:var(--sh);cursor:grab;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.bd-card:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.bd-card.dragging{opacity:.45}
.bd-card a.t{display:block;font-family:var(--fh);font-size:13.5px;color:var(--navy);text-decoration:none;line-height:1.35}
.bd-card .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:11.5px;color:var(--muted)}
.bd-card.done a.t{text-decoration:line-through;color:var(--faint)}
.lb{display:inline-block;height:8px;min-width:34px;border-radius:var(--r);margin:0 4px 4px 0}
.lb-t{display:inline-flex;align-items:center;gap:5px;font-size:11px;border-radius:var(--r);padding:2px 9px;color:#20160A;font-weight:500}
.lb-slate{background:#94A3B8}.lb-green{background:#4CC38A}.lb-yellow{background:#F2CB4E}
.lb-orange{background:#F0913E}.lb-red{background:#E4636B}.lb-purple{background:#A78BE0}
.lb-blue{background:#5B8DEF}.lb-sky{background:#4FC3E8}.lb-lime{background:#A6D45B}
.lb-pink{background:#EE7BB4}.lb-black{background:#3B4A57;color:#fff}

/* A PASTILHA DE ETIQUETA COM O X DENTRO (tela do quadro > Labels).
   Ela herda a cor pelas classes lb-<cor> de cima — uma cor em um lugar
   so. O x nao ganha fundo proprio: fundo dentro de fundo fazia parecer
   um segundo botao, e era justamente disso que a tela sofria. */
.lb-lista{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lb-chip{display:inline-flex;align-items:center;border-radius:var(--r);font-size:11.5px;
  color:#20160A;font-weight:500;padding:0 3px 0 0;max-width:100%}
.lb-chip .lb-ed{display:inline-block}
.lb-chip summary{list-style:none;cursor:pointer;padding:4px 4px 4px 12px;outline-offset:-2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.lb-chip summary::-webkit-details-marker{display:none}
.lb-chip summary:hover{text-decoration:underline}
/* Sugestao nossa, nao nome dela: o italico diz isso sem uma palavra a mais. */
.lb-chip summary.lb-sug{font-style:italic}
.lb-del{display:inline-flex;margin:0}
/* 26px de alvo com a area de toque esticada pelo padding da pastilha:
   pequeno na tela, grande para o dedo. */
.lb-x{border:0;background:transparent;color:inherit;font-size:15px;line-height:1;
  padding:4px 8px;border-radius:var(--r);cursor:pointer;opacity:.75}
.lb-x:hover{opacity:1;background:rgba(0,0,0,.14)}
/* O formulario de renomear cai POR BAIXO da pastilha, sem empurrar a
   fila: aberto dentro dela, ele esticaria a pastilha e a cor viraria
   uma faixa. */
.lb-ed[open]{position:relative}
.lb-form{position:absolute;z-index:5;top:calc(100% + 6px);left:0;display:flex;gap:6px;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:8px;
  box-shadow:0 8px 24px rgba(11,37,69,.14)}
.lb-form input[type=text]{margin:0;font-size:12.5px;padding:6px 8px;width:190px}
.lb-form button{white-space:nowrap}
/* O formulario de criar etiqueta: nome, cor e o botao numa fila so —
   e, no celular, cada um na sua linha. Espremido em 390px o campo do
   nome ficava com uma letra de largura, que e pior do que uma linha a
   mais. */
.lb-add{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.lb-add label{margin:0;flex:1 1 150px}
.lb-add .lb-cor{flex:0 1 170px}
.lb-add select{width:100%}
@media (max-width:560px){
  .lb-add label{flex:1 1 100%}
  .lb-add button{width:100%}
}
.due{border-radius:var(--r);padding:1px 7px;font-weight:500}
.due-late{background:#FEE2E2;color:#B91C1C}.due-soon{background:#FEF3D0;color:#7A5309}
.due-ok{background:var(--paper-2);color:var(--muted)}
.bd-add{width:100%;border:1px dashed var(--line-2);background:transparent;border-radius:var(--r);
  padding:9px;color:var(--muted);font-size:12.5px;cursor:pointer}
.bd-add:hover{border-color:var(--gold);color:var(--gold-text)}
.bd-newcol{flex:0 0 240px;background:rgba(255,255,255,.6);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:12px}

.note{background:#FFFDF6;border:1px solid var(--gold);border-radius:var(--r);padding:11px 14px;font-size:13px;color:#7A5309}
/* O "Move" fica pequeno e fechado: o cartao precisa caber a leitura, nao
   o comando. Continua sendo <details>, ou seja, abre com teclado e com o
   dedo — nao depende de arrastar. */
.bd-card .mv{margin-top:7px}
.bd-card .mv>summary{list-style:none;cursor:pointer;display:inline-block;font-size:11px;color:var(--faint);
  border:1px solid var(--line);border-radius:var(--r);padding:1px 9px}
.bd-card .mv>summary::-webkit-details-marker{display:none}
.bd-card .mv>summary:hover{border-color:var(--gold);color:var(--gold-text)}
.bd-card .mv[open]>summary{color:var(--navy)}
.bd-card .mv select{margin:6px 0 0;padding:5px 7px;font-size:12px}

/* ---- campo que abre com seta (escolher modulos de um cliente) ---- */
.picker{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.picker>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:11px 14px;font-family:var(--fh);font-weight:500;font-size:13.5px;color:var(--navy)}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary:hover{color:var(--gold-text)}
.pick-arrow{width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .15s var(--ease);flex:none}
.picker[open]>summary{border-bottom:1px solid var(--line)}
.picker[open] .pick-arrow{transform:rotate(90deg)}
.picker>summary .mini{font-weight:400}
.pick-body{padding:14px}

/* ---- observação de rodapé: um item por linha ---- */
.notelist{list-style:none;margin:0;padding:0}
.notelist li{position:relative;padding:0 0 9px 15px;font-size:13px;line-height:1.6;color:var(--muted)}
.notelist li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--line-2)}
.notelist li strong{color:var(--navy)}
.foot-note{background:var(--paper)}
.nav-item.ask{font-size:12.5px;color:var(--gold);padding-left:14px}
.nav-item.ask:hover{color:#fff}
/* Com os modulos trancados na lista, a barra ficou mais alta que a tela e
   o ultimo item era cortado. Agora a barra INTEIRA rola, em vez de so o
   miolo: assim nenhum item fica escondido atras da secao de baixo. */
.side{overflow-y:auto}
.nav{overflow-y:visible;padding-bottom:6px}
.nav-tail{overflow-y:visible}

/* ---- seletor de plano dentro da linha do cliente, em formato reduzido ----
   Fechado, e so um campo pequeno com o nome do plano e a contagem. Aberto,
   vira um painel flutuante ancorado na celula: nao empurra a tabela nem
   estica a linha, que era o que deixava a tela feia quando o bloco de
   modulos vivia num card separado la embaixo. */
.plan-cell{position:relative}
.picker-sm{border:1px solid var(--line);border-radius:var(--r);background:#fff;display:inline-block}
.picker-sm>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:5px 12px;font-family:var(--fh);font-weight:500;font-size:12.5px;color:var(--navy);
  white-space:nowrap}
.picker-sm>summary::-webkit-details-marker{display:none}
.picker-sm>summary:hover{border-color:var(--gold)}
.picker-sm[open]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,177,24,.16)}
.picker-sm[open]>summary{border-bottom:none}
.pick-count{font-weight:400;font-size:11.5px;color:var(--faint)}
.picker-sm .pick-body{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:400px;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:14px}
.pick-plans{display:flex;gap:6px;margin-bottom:12px}
.pick-plans .btn{flex:1;padding:5px 0;font-size:12px}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.pick-grid label{display:flex;align-items:center;gap:8px;margin:0;font-weight:400;
  font-size:13px;color:var(--text);cursor:pointer}
.pick-grid input{width:auto;margin:0;flex:none}
.pick-save{margin-top:14px;width:100%}
/* perto da borda direita, o painel abre para a esquerda para nao sair da tela */
.table td:nth-last-child(-n+3) .picker-sm .pick-body{left:auto;right:0}
@media (max-width:900px){ .picker-sm .pick-body{width:300px} .pick-grid{grid-template-columns:1fr} }
.pick-plans .btn{text-align:center;justify-content:center}

/* ---- logo do cliente ao lado do logo do Pilot ---- */
/* As duas marcas na MESMA linha: REGRA Pilot a esquerda, o logo do cliente
   a direita. A barra tem 250px e sobram 210px uteis; o logo da REGRA ocupa
   70px, entao a plaquinha fica com o resto. A imagem do cliente e limitada
   pela ALTURA (40px) e encolhe pela largura so quando o logo dele for muito
   comprido — assim um logo quadrado aparece grande e um comprido aparece
   inteiro, sem cortar nem distorcer. */
.side-top{display:flex;align-items:center;gap:10px}
.b-pilot{height:26px;width:auto;flex:none}
/* A faixa unica. Ela so existe quando ha logo do cliente — ver o
   comentario no head.ejs. O padding e maior em baixo do que em cima
   porque quase todo logo comercial ja vem com uma sobra em cima; sem
   isso a faixa parece torta mesmo estando certa. */
.side-top.band{background:#fff;border-radius:var(--r);padding:9px 11px;gap:11px;
  box-shadow:0 2px 8px rgba(0,0,0,.30)}
.side-top.band .b-pilot{height:24px}
.b-div{width:1px;align-self:stretch;background:#E3E7EE;flex:none;margin:2px 0}
/* Encostado na divisoria, e nao centralizado no que sobrar: numa faixa
   larga o logo centralizado parecia solto no meio do nada. */
/* Encostado na divisoria, e nao centralizado no que sobrar. Na barra
   lateral do computador a diferenca some, porque ali o espaco e
   estreito; no celular a faixa pega a tela toda e o logo do cliente
   ficava boiando no meio dela, a 64px da divisoria. */
.b-plate{display:flex;align-items:center;justify-content:flex-start;flex:1;min-width:0}
.b-plate img{height:38px;width:auto;max-width:100%;object-fit:contain;display:block}

/* ---- fita azul no topo de todo quadro ----
   Feita com ::before em vez de border-top para nao brigar com o
   arredondamento do canto. E NAO uso overflow:hidden no .card de proposito:
   o seletor de plano abre um painel flutuante de dentro de um card, e
   overflow:hidden cortaria ele fora. */
.card, .stat{position:relative}
/* A fita azul dos quadros. Antes ela era uma barra reta que comecava
   DEPOIS da curva, e os dois cantos de cima ficavam sem cor. Agora ela e a
   borda de cima do proprio quadro: mesmo raio, entao o azul entra na
   curva e contorna os dois cantos superiores.

   O truque das laterais transparentes: com border-radius, o navegador
   mistura a cor da borda de cima com a das laterais ao longo do arco. Com
   as laterais transparentes, o azul vai sumindo sozinho na descida do
   canto — e o afinamento nas pontas, que antes era um degrade, sai de
   graca e acompanha o arredondamento de verdade. */
/* 4px, e nao mais 3: e a espessura da referencia que ela mandou em
   19/09/2026 (um cartao com a borda grossa entrando na curva do canto),
   e a mesma do site — os dois usam agora a mesma fita.

   A COR: ela se chamava "fita azul" desde o primeiro dia e era
   `--navy` (#001B33), que em 4px sobre branco nao se le como azul — se
   le como PRETO. Em 06/10/2026 a dona disse o que o comentario aqui ja
   dizia: "as faixas dos titulos podem ficar na cor marinho". Entao a
   fita passou a `--navy-600`, que e da mesma familia da barra lateral e
   se enxerga azul numa tira fina. O token proprio existe para a fita
   ter UM lugar: ela aparece em todo cartao e em toda faixa de numero
   do app, e procurar isso em dois lugares diferentes e como a fita
   acaba com duas cores. */
:root{ --fita:var(--navy-600) }
.card::before, .stat::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border-radius:var(--r-lg);
  border:4px solid transparent; border-bottom:0;
  border-top-color:var(--fita)}
/* Um quadro pode pedir para nao ter a fita — o cabecalho colorido de uma
   tela publica, por exemplo, onde ela brigaria com a cor do cliente. */
.card.no-bar::before, .stat.no-bar::before{display:none}

/* ------------------------------ graficos ------------------------------
   Desenhados em SVG pelo servidor, sem biblioteca e sem JavaScript no
   navegador: o grafico aparece junto com a pagina, inclusive impresso. */
/* O TEXTO DO GRAFICO NAO ACOMPANHA MAIS O TAMANHO DO GRAFICO.
   O desenho e um SVG com viewBox de 720 de largura esticado para caber
   no cartao. Tudo dentro dele e medido em unidades da viewBox — e o
   texto tambem. Num monitor largo o cartao da 1088px, a escala vira
   1,51 e o rotulo de 11px aparece com 17. Em telas maiores, pior: era
   isso que deixava "referral" do tamanho de um titulo.
   E o defeito tem o outro lado, que ninguem tinha visto: no celular a
   escala cai para 0,5 e o MESMO rotulo aparece com 5,7px, pequeno
   demais para ler.
   A correcao e --ts, calculado por JS a cada mudanca de largura: e o
   inverso da escala, entao 11px * --ts sai sempre com 11px na tela.
   Sem JS, --ts vale 1 e o comportamento e o de antes. */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .b1{fill:var(--navy)}
.chart .b2{fill:var(--gold)}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart .ax.dash{stroke-dasharray:3 4}
.chart .lt{font-family:var(--fh);font-size:calc(11px * var(--ts,1));fill:var(--faint);text-anchor:middle}
.chart .vt{font-family:var(--fh);font-size:calc(11.5px * var(--ts,1));font-weight:500;fill:var(--navy);text-anchor:middle}
/* O valor em cima de CADA coluna. Menor que o .vt porque sao ate 24
   deles lado a lado, e cinza porque quem manda no olho e a barra — o
   numero esta ali para conferir, nao para gritar.
   EM PE, lido de baixo para cima: deitado ele nao cabe entre duas
   colunas vizinhas (ver o comentario no barsSVG). text-anchor:start
   porque o desenho gira o rotulo em torno do ponto de partida dele, e
   assim o texto sobe a partir desse ponto em vez de descer sobre a
   coluna.
   --vp e o tamanho que o rotulo PODE ter sem encostar no vizinho:
   9,5px quando ha folga, menos quando o ano enche de numero. Quem
   calcula e o foot.ejs, que sabe quantos rotulos ha e quanto o desenho
   encolheu; sem JS vale 9,5px, que e o certo para o desenho inteiro. */
.chart .vb{font-family:var(--fh);font-size:calc(var(--vp,9.5px) * var(--ts,1));font-weight:500;
  fill:var(--muted);text-anchor:start}
/* Quando nao sobra ceu, o rotulo entra na coluna — e ai a cor inverte,
   senao e cinza sobre azul-marinho. */
/* ============== ABAS DE CSS PURO (02/10/2026) ==============
   A tela "Your business" tem quatro assuntos e sessenta campos. Em
   quatro cartoes na mesma pagina, quem vem mexer no rodape da fatura
   passa por cima de todos os outros — foi o que ela chamou de "ainda
   esta confuso".
   SEM JAVASCRIPT, de proposito: quatro radios escondidos e :checked.
   O painel inteiro continua no DOM (so escondido), e e isso que
   permite um Salvar so gravar as quatro abas de uma vez. Se o CSS
   nao carregar, os quatro paineis aparecem empilhados — que e a tela
   de ontem, e nao uma tela quebrada. */
.abas-cx > .aba-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.abas-nav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:20px}
.abas-nav label{font-family:var(--fh);font-size:14px;font-weight:500;color:var(--muted);
  padding:10px 14px;cursor:pointer;border-radius:var(--r) var(--r) 0 0;
  border:1px solid transparent;border-bottom:none;margin-bottom:-1px;white-space:nowrap}
.abas-nav label:hover{color:var(--navy);background:var(--paper)}
/* A aba aberta: fundo branco e a borda abrindo para o painel. */
#ab1:checked ~ .abas-nav label[for=ab1],
#ab2:checked ~ .abas-nav label[for=ab2],
#ab3:checked ~ .abas-nav label[for=ab3],
#ab4:checked ~ .abas-nav label[for=ab4]{color:var(--navy);background:var(--white);
  border-color:var(--line);border-bottom:1px solid var(--white)}
/* Teclado: o radio esta escondido, entao o foco tem de aparecer no
   rotulo — senao quem navega por Tab nao sabe onde esta. */
#ab1:focus-visible ~ .abas-nav label[for=ab1],
#ab2:focus-visible ~ .abas-nav label[for=ab2],
#ab3:focus-visible ~ .abas-nav label[for=ab3],
#ab4:focus-visible ~ .abas-nav label[for=ab4]{outline:2px solid var(--navy);outline-offset:-2px}
.aba-p{display:none}
#ab1:checked ~ .p1, #ab2:checked ~ .p2,
#ab3:checked ~ .p3, #ab4:checked ~ .p4{display:block}
.abas-fim{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
/* No celular as quatro abas nao cabem numa fila: rolam de lado dentro
   da propria fila, e so ela — a pagina nao arrasta junto. */
@media (max-width: 560px){
  .abas-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .abas-nav label{padding:10px 11px;font-size:13px}
}

/* "NAO CHEGOU" nas listas. Vermelho porque e a unica linha da coluna
   que pede acao: as outras tres contam historia, esta cobra uma. */
.ret-nao{color:var(--danger);font-weight:600}
.chart .vb.dentro.vb1{fill:var(--white)}
.chart .vb.dentro.vb2{fill:var(--navy)}
.chart .ta-s{text-anchor:start}
.chart .ta-e{text-anchor:end}
/* desconto nao e servico que rendeu menos — e dinheiro que saiu */
.chart .vt.neg{fill:var(--danger)}
.legend{display:flex;gap:16px;align-items:center;margin-top:10px;font-size:12px;color:var(--muted)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.legend .k1{background:var(--navy)} .legend .k2{background:var(--gold)}
.ask-q{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.ask-q b{color:var(--navy);font-family:var(--fh);font-weight:500;font-size:13.5px}
/* etiqueta de pessoa: lead, cliente, antigo */
.b-lead{background:#EEF2F7;color:#334155}
.b-customer{background:#DCFCE7;color:#166534}
/* Concluido e um fim BOM: verde, mas o verde calmo, nao o de
   "fechou agora". Cliente ativo continua sendo o verde forte; o
   trabalho terminado e um tom abaixo, porque ja nao pede acao. */
.b-done{background:#E6F4EA;color:#1E4620;border:1px solid #CDE8D5}
.b-past{background:#FEF3C7;color:#92400E}
/* Perdido tambem nao usa vermelho: ninguem errou, o cliente disse nao —
   e um fim de caminho normal do negocio. Rosa apagado, sem risco em cima
   do nome: a pessoa continua existindo, so nao esta em jogo agora. */
.b-lost{background:#FDE8E8;color:#9B2C2C}
/* Spam nao usa vermelho de erro: nao houve erro nenhum, houve uma
   decisao de quem atende. Cinza fechado, discreto, para nao competir
   com o que importa na tela. */
.b-spam{background:#E5E7EB;color:#4B5563;border:1px solid #D1D5DB;text-decoration:line-through}
/* As unidades que a casa acrescentou: chips com um x. Nao sao botoes de
   acao principal — sao uma lista que se edita de vez em quando. */
.uni-suas{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.uni-chip{display:inline-flex;align-items:center;gap:6px;margin:0;
  background:var(--wash,#F8FAFC);border:1px solid var(--line);border-radius:var(--r);
  padding:4px 6px 4px 11px;font-size:13px}
.uni-chip button{border:none;background:none;cursor:pointer;color:var(--muted);
  font-size:15px;line-height:1;padding:2px 5px;border-radius:var(--r)}
.uni-chip button:hover{background:#FEE2E2;color:var(--danger)}
/* A explicacao de por que a ficha ainda nao esta concluida. Nao e erro
   nem aviso: e a conta do sistema, mostrada. Por isso neutra. */
.porque{background:var(--wash,#F8FAFC);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin-bottom:16px}
.porque .notelist{margin:6px 0}
.porque p.mini{margin:0}
/* O PROJETO CONCLUIDO. Verde calmo, do mesmo tom da etiqueta "Done" da
   pessoa — as duas coisas dizem a mesma coisa em telas diferentes. */
.proj-fim{font-size:12.5px;font-weight:500;color:#1E4620;background:#E6F4EA;
  border:1px solid #CDE8D5;border-radius:var(--r);padding:4px 9px;display:inline-block;margin-top:10px}
/* Os dois botoes do card lado a lado: o fato do negocio e a arrumacao
   da tela. Separados no codigo e separados no olho. */
.proj-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.proj-acoes form{margin:0}
/* Os documentos ligados ao projeto, no card da lista. */
.doc-liga a{color:var(--gold-text);text-decoration:none;font-weight:500}
.doc-liga a:hover{text-decoration:underline}
.doc-liga .sep{color:var(--faint);margin:0 5px}
/* Os dois seletores de vinculo, lado a lado quando ha espaco. */
.vinc{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:4px}
@media (max-width:700px){.vinc{grid-template-columns:1fr}}
/* Parcialmente paga: nem o verde de quitada, nem o cinza de rascunho.
   Ambar, que e a cor de "comecou e nao terminou" nesta folha. */
.b-part{background:#FEF3C7;color:#92400E}
/* O topo do bloco de recebimentos: fatura, recebido, saldo. Tres numeros
   lado a lado porque a pergunta e sempre a comparacao entre eles. */
.receb-topo{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:14px}
.receb-topo > div{display:flex;flex-direction:column;gap:2px}
.receb-topo strong{font-family:var(--fh);font-size:18px;color:var(--navy)}
.receb-topo .falta strong{color:var(--danger)}
.receb-topo .quitado strong{color:var(--ok)}
.table.receb td{vertical-align:middle}
.dupe-grp{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.dupe-grp h4{font-size:13.5px;margin-bottom:8px}

/* ---- conversa de um chamado de suporte ----
   Os dois lados sao visualmente diferentes de proposito: numa conversa
   longa, quem le precisa saber de relance quem falou sem ler o nome. */
.tmsg{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.tmsg:last-child{margin-bottom:0}
.tmsg-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:7px}
.tmsg-h strong{font-family:var(--fh);font-size:13.5px;color:var(--navy)}
.tmsg-h span{font-size:11.5px;color:var(--faint)}
.tmsg-b{font-size:14px;line-height:1.65;color:var(--text);white-space:pre-wrap;word-break:break-word}
.from-regra{background:var(--paper-2);border-color:var(--line-2)}
.from-regra .tmsg-h strong{color:var(--gold-text)}
.from-client{background:#fff}
/* estados de um chamado */
.b-open{background:#FEF3C7;color:#92400E}
.b-answered{background:#DBEAFE;color:#1E40AF}
.b-closed{background:#EEF2F7;color:#475569}

/* Linha que explica do que trata o cartao, logo abaixo do titulo. Com a
   tela de configuracao dividida em dois, o titulo sozinho ("The request
   form", "The estimate") nao diz onde cada coisa aparece — e era
   justamente essa duvida que fazia procurar no cartao errado. */
.secnote{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--muted)}

/* BOTAO DE ACAO CONCLUIDA, na lista de orcamentos.
   Verde enquanto ha o que fazer (gerar a fatura), apagado depois. O
   apagado continua sendo um link — leva para a fatura que saiu dali —
   mas nao se parece com um botao que pede clique. Sumir com ele seria
   pior: a pergunta "sera que ja faturei este?" voltaria a cada visita. */
.btn.btn-go{background:#0F766E;border-color:#0F766E;color:#fff}
.btn.btn-go:hover{background:#0B5E57;border-color:#0B5E57;color:#fff;box-shadow:var(--sh)}
.btn.btn-done{background:var(--paper-2);border-color:var(--line);color:var(--faint);
  font-weight:500;cursor:default}
.btn.btn-done:hover{background:var(--paper-2);border-color:var(--line);color:var(--faint);box-shadow:none}

/* ============================ ANEL (DONUT) ============================
   Anel a esquerda, legenda a direita — e a legenda carrega o numero de
   cada fatia. Duas fatias de tamanho parecido sao indistinguiveis no
   angulo; o numero escrito e o que faz o grafico responder. */
.anel-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.anel{width:140px;height:140px;flex:none;overflow:visible}
.an-fatia{transition:opacity .2s ease}
.anel:hover .an-fatia{opacity:.45}
.anel .an-fatia:hover{opacity:1}
/* O numero do meio e a manchete: e ele que se le primeiro. */
.an-total{text-anchor:middle;dominant-baseline:middle;font-family:var(--fh);
  font-weight:500;font-size:26px;fill:var(--navy)}
.an-rot{text-anchor:middle;font-family:var(--fh);font-weight:500;font-size:8.5px;
  letter-spacing:.12em;fill:var(--faint)}

.an-leg{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1;min-width:150px}
.an-leg li{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.2}
.an-dot{width:11px;height:11px;border-radius:3px;flex:none}
/* O texto veste cor de TEXTO, nunca a cor da serie: quem carrega a
   identidade e a bolinha ao lado. Rotulo colorido vira ruido e, em
   cinza claro sobre branco, some. */
.an-k{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-v{font-family:var(--fh);font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .anel-wrap{gap:18px}
  .anel{width:116px;height:116px}
}

/* ============================== A LUPA ==============================
   Uma caixa de busca so, para a pagina inteira. Ela fica grudada no
   alto ao rolar: numa lista de trinta clientes, ter de subir ate o topo
   para corrigir o que se digitou e o que faz a pessoa desistir. */
.buscador{position:sticky;top:12px;z-index:20}
.busca-linha{display:flex;align-items:center;gap:12px;padding:14px 18px}
.busca-lupa{width:19px;height:19px;flex:none;fill:none;stroke:var(--faint);
  stroke-width:2;stroke-linecap:round}
.busca-linha input[type=search]{margin:0;flex:1;min-width:0;border:0;background:transparent;
  padding:4px 0;font-size:15.5px}
.busca-linha input[type=search]:focus{outline:none;box-shadow:none}
/* O X nativo do Chrome some: ha um botao Clear proprio, que tambem diz
   quantos resultados ficaram. Dois jeitos de limpar confundem. */
.busca-linha input[type=search]::-webkit-search-cancel-button{display:none}
.busca-linha .mini{flex:none;font-variant-numeric:tabular-nums}
.buscador:focus-within{box-shadow:0 6px 22px rgba(0,27,51,.12);border-color:var(--gold)}
@media(max-width:560px){
  .buscador{position:static}
  .busca-linha{flex-wrap:wrap;gap:9px}
  .busca-linha input[type=search]{flex:1 1 100%;order:-1}
}

/* O bloco de idiomas do formulario: dobrado, porque a maioria dos donos
   nunca vai abrir. Aberto por padrao ele empurraria para baixo tudo o
   que todo mundo usa. */
.lingua{border:1px solid var(--line);border-radius:var(--r);padding:0 16px;margin:6px 0 16px}
.lingua summary{cursor:pointer;padding:14px 0;font-family:var(--fh);font-weight:500;
  color:var(--navy);display:flex;align-items:center;gap:10px}
.lingua[open] summary{border-bottom:1px solid var(--line);margin-bottom:14px}
.lingua > label:last-of-type{margin-bottom:16px}
.lingua code{background:var(--paper-2);padding:1px 5px;border-radius:var(--r);
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px}

/* ---------------- o seletor de etapa, encolhido ----------------
   Ele ocupava a largura inteira do cartao e repetia "Move to ..." em
   cada um — num quadro com vinte cartoes, vinte vezes a mesma frase.
   Agora e um botao estreito ao lado do nome, que abre ao ser tocado.
   A LISTA continua do tamanho do conteudo: quem desenha o menu aberto
   e o navegador, nao nos. */
.deal-top{display:flex;align-items:flex-start;gap:8px}
.deal-top .who{flex:1;min-width:0}
.deal-move{margin:0;flex:none}
.mv{width:32px;margin:0;padding:4px 2px 4px 7px;font-size:12.5px;
  border-radius:var(--r);cursor:pointer;transition:width .18s var(--ease)}
.mv:hover,.mv:focus{width:136px}
/* No toque nao existe hover, e 32px e alvo pequeno demais para o dedo:
   no celular ele ja nasce largo o bastante para acertar. */
@media(hover:none){ .mv{width:46px} .mv:focus{width:136px} }

/* O nome no cartao do quadro tambem sai do 700. Com os titulos em 500,
   um <b> solto aqui pesava mais que o nome da coluna acima dele. */
.deal .who b{font-weight:500;font-size:14.5px}

/* O LINK DE ASSINATURA: campos do tamanho do que cabe neles.
   Os dois select cresciam ate ocupar a tela inteira porque nada os
   segurava — e o de plano, que so diz "Monthly", ficava do mesmo
   tamanho do de cliente, que carrega "REGRA Digital Business LLC".
   Campo largo demais para o conteudo faz a pessoa procurar o que
   escrever ali. O de cliente leva a folga; o de plano so o que precisa;
   o botao fica do tamanho do texto dele. */
.sub-new{flex-wrap:wrap}
.sub-new select[name=tenant_id]{flex:1 1 260px;max-width:380px;margin:0}
.sub-new select[name=plano]{flex:0 1 170px;margin:0}
.sub-new button{flex:none;white-space:nowrap}
@media(max-width:620px){
  .sub-new select[name=tenant_id],.sub-new select[name=plano]{flex:1 1 100%;max-width:none}
}

/* ===================== FINANCAS (modulo fora de plano) =====================
   Este modulo tem cabecalho proprio — mes, cotacao, moeda e cinco telas —
   porque a pergunta dele e sempre "qual mes?", e nenhuma outra parte do
   app e organizada assim. */
.fin-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;margin-bottom:14px}
/* OS MESES E OS ANOS USAM .chip, o componente que o app ja tem.
   Eu havia inventado .fin-mes, com dourado no selecionado — e ficou o
   unico lugar do painel com um arredondamento e uma cor proprios. Os
   filtros de periodo dos Relatorios sempre foram .chip, com navy no
   selecionado. Componente novo para um problema resolvido e divida, e
   quem paga e a coerencia da tela. */
/* OS CONTROLES DO MODULO SAO .btn, COMO OS DO RESTO DO APP.
   Passaram por tres formas ate chegar aqui: pastilha inventada por mim
   (dourada), depois .chip (pastilha do app, navy), e agora .btn — que
   e o que ela pediu duas vezes. Mesmo raio (var(--r)), mesma borda,
   mesmas cores.
   A REGRA DE COR segue a do app: DOURADO e "voce esta aqui" na
   navegacao (como o item aceso da barra lateral), NAVY e "este filtro
   esta ligado". Entao as abas acendem em dourado e os meses, os anos e
   a moeda acendem em navy. */
.fin-meses{display:flex;flex-wrap:wrap;gap:8px}
.fin-dir{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fin-anos{display:flex;gap:8px}
.fin-cot{display:flex;align-items:center;gap:8px}
.fin-cot label{font-size:13px;color:var(--muted);font-family:var(--fh)}
/* o campo acompanha o raio dos botoes (--r), e nao um numero solto */
.fin-cot input{width:96px;padding:8px 11px;border:1px solid var(--line-2);border-radius:var(--r);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;margin:0}
/* a chave de moeda: dois .chip colados, navy no ligado, como .chip.on */
.fin-moeda{display:inline-flex;gap:6px}

.fin-abas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}

/* ====================================================================
 * NO TABLET, OS BOTOES TAMBEM FICAM DO MESMO TAMANHO.
 *
 * A regra do celular (a grade de 3 colunas, la no bloco de 720px) so
 * valia ate 720px de tela. Acima disso os botoes voltavam ao tamanho do
 * proprio nome — e de 768 a 1280px, que e todo tablet e notebook pequeno,
 * os doze meses nao cabiam numa fila: quebravam em 9 + 3, com "May" de
 * 51px ao lado de "September" de 100px, e as abas iam de 56 a 158px. Ela
 * mandou a foto disso em 19/09/2026. So a partir de 1440px os meses
 * cabem numa fila so, e ai o tamanho natural le bem.
 *
 * POR QUE @container, E NAO MAIS UM @media.
 * O que decide se os meses cabem e a largura DO CONTEUDO, e ela nao anda
 * junto com a da tela: a 820px de tela nao ha barra lateral e o conteudo
 * tem 788px; a 900px a barra de 250px aparece e o conteudo CAI para 650.
 * Um @media por largura de tela acertaria um desses e erraria o outro. A
 * .view e o conteudo inteiro de toda tela, e e ela que a regra consulta.
 *
 * O @media em volta separa este trecho do celular: abaixo de 721px de
 * tela quem manda e a regra de 3 colunas, que ja foi testada la.
 *
 * DOZE DIVIDE POR 4 E POR 6, e e por isso que sao essas as contagens:
 * fila completa sempre, nenhum mes sobrando sozinho na ultima fila.
 *   conteudo de 760 a 1179px -> 6 colunas, duas filas de seis
 *   conteudo abaixo de 760px  -> 4 colunas, tres filas de quatro
 * Com 6 colunas em 760px cada botao tem 120px — "September" cabe com
 * folga. Em 4 colunas, no conteudo mais estreito do tablet (590px), 141.
 *
 * AS ABAS seguem o mesmo raciocinio: 2026, Entries, Cards e Accounts em
 * quatro colunas iguais, e o "Import spreadsheet" atravessando a largura
 * por baixo — a mesma decisao do celular, onde ela ja aprovou. */
.view{container-type:inline-size;container-name:tela}
@media (min-width:721px){
  /* 1099, E NAO 1179. A consulta mede a largura DE DENTRO da .view, ja
     sem os 30px de padding de cada lado. Com 1179, a 1440px de tela (1130
     de conteudo) a regra entrava e quebrava em duas filas os meses que ali
     cabiam numa so — a primeira medicao mostrou isso. A 1280px o
     conteudo tem 970 e os meses nao cabem; a 1440, 1130, e cabem: o corte
     fica entre os dois. */
  @container tela (max-width:1099px){
    .fin-meses{width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
    .fin-meses .btn{width:100%;justify-content:center;text-align:center;
      padding-left:6px;padding-right:6px}
    .fin-abas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
    .fin-abas .btn{width:100%;justify-content:center;text-align:center}
    
  }
  @container tela (max-width:759px){
    .fin-meses{grid-template-columns:repeat(4,1fr)}
  }
}

.fin-tabs{display:flex;gap:18px}
.fin-tabs a{text-decoration:none;color:var(--muted);font-family:var(--fh);font-weight:500;
  padding-bottom:4px;border-bottom:2px solid transparent}
.fin-tabs a.on{color:var(--text);border-bottom-color:var(--gold-deep)}

/* etiqueta pequena: "fixed" e "day 17" */
.tag-fixo,.tag-dia{display:inline-block;padding:2px 8px;border-radius:var(--r);font-size:11px;
  font-family:var(--fh);font-weight:500;vertical-align:middle;margin-left:6px}
.tag-fixo{background:#FBF3DC;color:var(--gold-text)}
.inl{display:inline}
/* no Admin: a caixa de um modulo que nao vem do plano */
.pick-grid label.fora span i{font-style:normal;font-size:11px;color:var(--gold-text);
  background:#FBF3DC;padding:1px 7px;border-radius:var(--r);margin-left:5px}
button.tag-fixo{border:1px solid transparent;cursor:pointer;font-size:11px;padding:2px 8px}
button.tag-fixo:hover{border-color:var(--gold-deep)}
/* nao marcado: quase invisivel ate o mouse passar — a lista nao pode
   virar um campo de botoes cinzentos */
button.tag-fixo.off{background:transparent;color:var(--line-2)}
button.tag-fixo.off:hover{background:var(--paper-2);color:var(--muted);border-color:var(--line-2)}
.tag-dia{background:var(--paper-2);color:var(--muted)}

/* O VALOR QUE NAO FOI DIGITADO.
   Ele esta gravado — nao e calculado agora — mas e a CONVERSAO, e nao o
   original. Estava em --faint (#8299AB) e ainda competia com a coluna
   que importa; agora e bem mais claro, de leitura confortavel so quando
   se procura por ele. */
.fraco{color:#AEC0CE}

/* nao quebrar linha: "day 15" e "US$ 1.000,00" nao sao duas linhas */
.nw{white-space:nowrap}

/* AS COLUNAS DA TABELA DE CARTOES.
   Quem estica e o NOME, a unica coluna cujo conteudo varia de tamanho.
   As de dinheiro ficam encostadas uma na outra, que e onde o olho
   compara saldo com limite. */
/* a tabela do ano: o mes e estreito e as quatro colunas de dinheiro
   dividem o resto em partes iguais — comparar coluna com coluna e a
   unica coisa que se faz nessa tabela */
.tab-ano{table-layout:fixed;width:100%}
.tab-ano .c-mes{width:130px}
@media(max-width:820px){ .tab-ano{table-layout:auto;min-width:620px} }

.tab-cart{table-layout:fixed;width:100%}
.tab-cart .c-due{width:78px}
.tab-cart .c-din{width:140px}
.tab-cart .c-uso{width:186px}
@media(max-width:900px){
  .tab-cart{table-layout:auto;min-width:640px}
}

/* a barra e o percentual na MESMA linha */
.uso{display:flex;align-items:center;gap:10px}
.uso .barra{max-width:none;flex:1 1 auto}
.uso .pct{margin-left:0;flex:none}

/* cabecalho que ordena */
.ord{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:inherit}
.ord:hover{color:var(--navy)}
.ord i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:0;transition:opacity .15s var(--ease)}
.ord:hover i{opacity:.35}
.ord.on{color:var(--navy)}
.ord.on i{opacity:1}
/* a seta aponta para onde a lista vai: asc sobe */
th .ord.on.asc i{border-top:0;border-bottom:5px solid currentColor}

/* a barra de uso do cartao */
.barra{display:inline-block;width:100%;max-width:110px;height:6px;border-radius:999px;
  background:var(--line);overflow:hidden;vertical-align:middle}
.barra i{display:block;height:100%;border-radius:999px}
.barra i.g{background:var(--ok)} .barra i.a{background:var(--gold-deep)} .barra i.r{background:#B02A44}
.pct{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:var(--r);font-size:12px;font-weight:500;
  font-family:var(--fh)}
.pct.g{background:#E3F4EC;color:#17663D} .pct.a{background:#FBF0DA;color:var(--gold-text)}
.pct.r{background:#FDE2E7;color:#B02A44}

tr.aceso td{background:#FAFCFD;font-weight:500}

/* apagar uma linha: discreto ate a hora de usar */
.x{border:0;background:none;color:var(--faint);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.x:hover{color:#B02A44}

/* as metas */
.meta{padding:16px 0;border-bottom:1px solid var(--line)}
.meta:last-of-type{border-bottom:0}
.meta-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.meta-nome{flex:1 1 200px;max-width:340px;border:1px solid transparent;border-radius:var(--r);padding:6px 10px;margin:0;
  font-family:var(--fh);font-weight:500;font-size:17px;background:transparent}
.meta-nome:hover{border-color:var(--line)} .meta-nome:focus{border-color:var(--gold-deep);background:var(--white)}
.meta-pct{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-family:var(--fh)}
.meta-pct input{width:60px;padding:6px 9px;border:1px solid var(--line-2);border-radius:var(--r);margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right}
.meta-val{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:500}
.meta-barra{display:block;height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:12px}
.meta-barra i{display:block;height:100%;background:#4A3AA7;border-radius:999px}
.meta-sobra{border-top:1px solid var(--line);padding-top:18px}

/* A LINHA DE ACRESCENTAR.
   Fica em cima da lista, e nao atras de um botao "+ novo": o mes que
   esta acontecendo e escrito varias vezes por semana, e um passo a
   menos por lancamento vira muitos passos no fim do mes. */
.novo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:20px;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.novo label{display:flex;flex-direction:column;gap:5px;margin:0;font-size:12px;color:var(--muted);
  font-family:var(--fh);font-weight:500}
.novo input,.novo select{margin:0;padding:8px 11px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:14px;font-family:var(--fb)}
.novo .n-dia{width:76px} .novo .n-val{width:130px} .novo .n-moeda{width:150px}
.novo .n-nome{flex:1 1 200px;min-width:170px}
.novo .n-fixo{flex-direction:row;align-items:center;gap:7px;padding-bottom:9px}
.novo .n-fixo input{width:auto;padding:0}
.novo button{margin-bottom:0}

/* campo de dinheiro dentro da tabela: parece texto ate o mouse chegar */
.i-din{width:112px;margin:0;padding:6px 9px;text-align:right;border:1px solid transparent;
  border-radius:var(--r);background:transparent;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;transition:all .15s var(--ease)}
.i-din:hover{border-color:var(--line)}
.i-din:focus{border-color:var(--gold-deep);background:#fff}
.i-fraco{color:#AEC0CE;font-size:13px;width:104px}
.i-dia{width:46px;margin:0;padding:6px 8px;border:1px solid transparent;border-radius:var(--r);
  background:transparent;font-size:13px;color:var(--faint)}
.i-dia:hover{border-color:var(--line)}
.i-dia:focus{border-color:var(--gold-deep);background:#fff;color:var(--text)}
.pre{font-size:13px;color:var(--faint);margin-right:2px}

/* as doze cotacoes na tela de importacao */
.fin-cots{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.fin-cot1{display:flex;flex-direction:column;gap:4px}
.fin-cot1 span{font-size:12px;color:var(--muted);font-family:var(--fh);letter-spacing:.04em;text-transform:uppercase}
.fin-cot1 input{padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* a linha do tempo */
.chart .ll{fill:none;stroke:#4A3AA7;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.chart .lf{fill:rgba(74,58,167,.10);stroke:none}
.chart .lp{fill:var(--white);stroke:#4A3AA7;stroke-width:2.2}
.chart .lp.last{fill:#4A3AA7}

@media(max-width:720px){
  .fin-bar{gap:10px}
  .fin-dir{width:100%;justify-content:space-between}
  .meta-val{width:100%;margin-left:0;text-align:right}

  /* NO CELULAR, OS BOTOES VIRAM GRADE — E A RAZAO E A ULTIMA FILA.
     Em flex-wrap os doze meses quebravam em 5 + 5 + 2, e as duas
     sobrando ficavam encostadas na esquerda com um vao enorme ao lado.
     Pior: cada botao tinha a largura do proprio nome, entao "May" era
     metade de "September" e as filas nao se alinhavam com nada.

     Doze dividido por tres da quatro filas exatas. Nao ha fila
     incompleta para sobrar torta, e 1fr faz cada celula ter a mesma
     largura independentemente do tamanho do nome do mes. */
  .fin-meses{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  /* justify-content, e nao text-align: o .btn e inline-flex, entao
     quem manda no alinhamento horizontal e o flex, e text-align sozinho
     nao movia nada — os nomes ficavam encostados na esquerda dentro de
     caixas do mesmo tamanho, que e quase pior que caixas tortas. */
  .fin-meses .btn{width:100%;justify-content:center;text-align:center;
    padding-left:6px;padding-right:6px}

  /* AS ABAS SEGUEM A MESMA REGRA, em duas colunas: 2026 | Entries,
     Cards | Accounts. Sao quatro, entao tambem fecham filas exatas.
     O "Import spreadsheet" e o quinto e nao tem par — em vez de ficar
     sozinho na esquerda, atravessa a largura inteira. Largura cheia se
     le como decisao; meia largura com um vao do lado se le como erro.
     E o margin-left:auto do desktop, que o empurrava para a direita,
     nao vale aqui: em grade ele so criaria uma coluna fantasma. */
  .fin-abas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .fin-abas .btn{width:100%;justify-content:center;text-align:center}

  /* A TABELA DE LANCAMENTOS NAO CABE NUM CELULAR — E NAO HA COMO FAZER CABER.
     Em Finances a linha tem seis colunas: dia, destino, R$, US$, cotacao
     usada e o botao de apagar. Numa tela de 390px isso da menos de 60px
     por coluna. O que acontecia: o .tw rolava de lado, e como nada na
     tela avisa que ela rola, o que se via era R$ 8.024,32 completo e
     "$1,558" cortado no meio, sem o resto do numero e sem a cotacao.
     Um valor cortado nao e um valor apertado: e um valor errado para
     quem esta lendo.

     Entao no celular a linha para de ser linha de tabela e vira ficha,
     em tres andares:

         12   Google Pay  [fixed]                             x
                                        R$ 66,90   $12,50  @ 5.3520
         Projeto Faria Lima  [subscription]

     O dinheiro fica junto e alinhado a direita, porque o que se compara
     entre duas fichas e o valor — e numero alinhado a direita se compara
     de olho, numero alinhado a esquerda nao.

     O cabecalho da tabela sai de cena de proposito: cada valor ja
     carrega o proprio simbolo (R$, $), entao rotulo seria repeticao
     ocupando altura. A cotacao e a unica que precisava de rotulo — sem
     ele, 5.3520 parece dinheiro. Ganhou o "@". */
  .tb-lanc thead{display:none}
  .tb-lanc,.tb-lanc tbody,.tb-lanc tfoot,.tb-lanc tr,.tb-lanc td,.tb-lanc th{display:block}
  .tb-lanc tbody tr,.tb-lanc tfoot tr{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tb-lanc tbody td,.tb-lanc tfoot th{padding:0;border:none;text-align:left}
  .tb-lanc tbody tr:last-child{border-bottom:none}

  /* A ORDEM NA TELA NAO E A ORDEM NO HTML, e tem de ser assim.
     No HTML o vinculo (For) vem antes dos valores, porque no desktop ele
     e a terceira coluna. Aqui ele desce para o terceiro andar, e o botao
     de apagar sobe para o primeiro. Mexer no HTML para conseguir isso
     estragaria o desktop; order resolve so na vista estreita. */
  .tb-lanc .c-dia{order:1;flex:0 0 22px;font-size:12.5px;color:var(--faint)}
  /* A base do destino e a linha inteira menos o dia, menos o botao e
     menos os vaos. Assim o primeiro andar fecha exato e os valores
     quebram SEMPRE para o segundo — e nao "quando o nome for comprido",
     que deixaria cada ficha com um desenho diferente da vizinha. */
  .tb-lanc .c-quem{order:2;flex:1 1 calc(100% - 72px);min-width:0}
  .tb-lanc .c-acao{order:3;flex:0 0 30px;text-align:right}
  .tb-lanc .c-cur{order:4}
  .tb-lanc .c-usd{order:5}
  .tb-lanc .c-taxa{order:6}
  /* margin-left:auto empurra o grupo do dinheiro para a direita. Quem
     recebe o empurrao e o primeiro valor que existir: em Finances e o
     R$, e no Cash flow de uma moeda so, onde a coluna R$ nem e emitida,
     e o proprio US$. O seletor irmao desfaz o auto do segundo, senao os
     dois se empurrariam e o R$ ficaria sozinho na esquerda. */
  .tb-lanc .c-cur,.tb-lanc .c-usd{margin-left:auto}
  .tb-lanc .c-cur + .c-usd{margin-left:0}
  .tb-lanc .c-taxa::before{content:'@ ';color:var(--faint)}
  .tb-lanc .c-liga{order:7;flex:0 0 100%;margin-left:32px;font-size:12.5px}

  /* O TOTAL: as celulas vazias do rodape sao seis, e como bloco cada uma
     ocuparia altura e vao. Somem, e sobra "Total" com o dinheiro do lado. */
  .tb-lanc tfoot tr{border-bottom:none;border-top:2px solid var(--line)}
  .tb-lanc tfoot .c-dia,.tb-lanc tfoot .c-liga,
  .tb-lanc tfoot .c-taxa,.tb-lanc tfoot .c-acao{display:none}
  .tb-lanc tfoot .c-quem{flex:0 0 auto}

  /* O CABECALHO DO CARTAO QUEBRA, PORQUE A ETIQUETA NAO QUEBRAVA.
     .card-head e flex com space-between, e a .badge nasce com
     white-space:nowrap. Numa tela estreita a etiqueta "balances for
     September, always in dollars" nao tinha como encolher: empurrava o
     cartao a 401px dentro de uma caixa de 356, o cartao empurrava a
     pagina, e a PAGINA INTEIRA passava a rolar de lado — em /finances/cards
     o documento media 418px numa tela de 390. Rolagem lateral na pagina
     nao e um detalhe: ela desalinha tudo o que esta abaixo e faz o
     dedo arrastar a tela quando queria so descer. */
  .card-head{flex-wrap:wrap;gap:8px}
  .card-head .badge{white-space:normal}

  /* MENOS RESPIRO NAS TABELAS QUE CONTINUAM SENDO TABELAS.
     20px de cada lado por celula e bom no desktop; em 390px sao 40px
     por coluna gastos em ar. Com 10px, a tabela do ano e a de clientes
     passam a caber quase sempre, e quando nao cabem rolam menos. */
  .table th,.table td{padding-left:10px;padding-right:10px}

  /* QUANDO A TABELA PRECISA ROLAR MESMO, ELA TEM DE DIZER QUE ROLA.
     A do ano tem cinco colunas de dinheiro (mes, entrou, saiu, sobrou,
     nos cartoes) e comparar meses e exatamente o servico dela — virar
     ficha empilhada como os lancamentos destruiria a comparacao. Então
     ela continua rolando; o que muda e que agora aparece uma sombra na
     borda que ainda tem conteudo escondido.

     background-attachment:local nas duas primeiras camadas e o truque:
     elas rolam COM o conteudo e cobrem a sombra quando a ponta chega ao
     fim. As duas camadas de sombra ficam fixas no quadro. Resultado: a
     sombra da esquerda aparece so depois de rolar, e a da direita
     desaparece ao chegar no fim. Nenhum JavaScript, e some sozinha nas
     tabelas que passaram a caber — como a de lancamentos aqui em cima. */
  .tw{
    background:
      linear-gradient(to right, var(--white) 40%, rgba(255,255,255,0)),
      linear-gradient(to left,  var(--white) 40%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,27,51,.14), rgba(0,27,51,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,27,51,.14), rgba(0,27,51,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}

/* O vinculo do lancamento: de quem e aquele dinheiro. */
.n-liga{min-width:150px}
.n-liga select{width:100%}
.tag-auto{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r);
  background:var(--paper-2);color:var(--muted);font-family:var(--fh);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* Os avisos do PayPal: a frase manda, o codigo fica de apoio. */
.pp-frase{display:block;font-family:var(--fh);font-size:14px;color:var(--navy)}
.pp-frase.pp-ok{color:var(--ok)}
.pp-frase.pp-warn{color:var(--warn)}
.pp-frase.pp-bad{color:var(--danger)}
.pp-cod{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--faint);letter-spacing:.02em}

/* ===================== O CARTAO QUE SE REPETE =====================
   Tres linhas de frequencia, uma escolhida pelo radio, e a lista de
   quadros que recebem a copia. Tudo em formulario comum: sem script, a
   tela continua inteira. */
.rep-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rep-op{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13.5px;
  white-space:nowrap}
 /* A CAIXINHA TEM DE SER UMA CAIXINHA.
   A folha do painel da width:100% em input dentro de label — o que esta
   certo para um campo de texto e desastroso para um radio: ele vira uma
   barra de 294px e empurra o texto da opcao para fora da tela. Um
   telefone mostra a frase cortada e ninguem entende por que. */
.rep-op input{margin:0;width:auto;flex:none}
/* 64px cabe "365" e o dedo, sem virar uma caixa de texto longa que
   sugere que se pode escrever qualquer coisa ali. */
.rep-num{width:auto;min-width:64px;max-width:160px;margin:0;padding:5px 8px;font-size:13.5px}
.rep-alvos{display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r);padding:8px}
.rep-dono{font-weight:600;color:var(--navy);margin:6px 0 2px}
.rep-dono:first-child{margin-top:0}
.rep-quadro{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;
  padding:3px 2px;cursor:pointer}
.rep-quadro input{margin:0;width:auto;flex:none}
/* O sinal na fila do quadro: discreto, mas com titulo que explica. */
.rep-sinal{cursor:help}

/* ====================================================================
   O QUADRO QUE O CLIENTE LE (05/10/2026)

   DUAS PASTILHAS, E ELAS SAO OPOSTAS DE PROPOSITO. A dourada diz "isto
   sai daqui" e a cinza riscada diz "isto nao sai". Cor sozinha nao
   bastaria — quem nao distingue bem as cores le as duas palavras, e e
   por isso que elas sao palavras e nao bolinhas.
   A dourada e a mesma familia do botao de acao da casa: publicar e a
   coisa mais consequente que se faz num quadro, e merece o dourado. */
.bd-ve{font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;
  background:var(--gold);color:#20160A;border-radius:var(--r);padding:2px 7px;flex:none}
.bd-oculto{font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;
  background:#E2E8F0;color:#475569;border-radius:var(--r);padding:1px 6px}

/* A agenda da duplicacao mora dentro de um <details> para nao encher a
   tela de quem so quer o botao "Duplicar agora" — que e o caso comum. */
.dup-agenda > summary{cursor:pointer;font-family:var(--fh);font-size:13.5px;font-weight:500;
  color:var(--navy);list-style:none;display:inline-flex;align-items:center;gap:7px}
.dup-agenda > summary::-webkit-details-marker{display:none}
.dup-agenda > summary::before{content:"+";font-size:15px;color:var(--gold-text);line-height:1}
.dup-agenda[open] > summary::before{content:"–"}
.dup-agenda > summary:hover{color:var(--gold-text)}

/* A caixinha do /rescue: quem chega la quase sempre chega por causa
   dela, entao ela nao pode parecer nota de rodape. */
.resgate-owner{display:flex;gap:10px;align-items:flex-start;font-weight:400;
  border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;
  background:var(--paper);margin-bottom:14px}
.resgate-owner input{width:auto;margin:2px 0 0;flex:none}
.resgate-owner strong{color:var(--text)}