/* ======================================================================
   Plataforma Marca Integral — a mesma casa do CRM (11/09/2026).

   O Mateus quer UMA plataforma: um endereço, um menu, uma cara. Esta folha
   segue o sistema do CRM (DESIGN.md dele): preto em três alturas, UM ciano
   só para ação e estado vivo, âmbar e vermelho só para alerta, Manrope em
   tudo, números em coluna tabulares.

   ⚠ Os nomes antigos das cores (--preto, --card, --cinza...) continuam
   valendo como apelidos: telas escritas com eles não precisam mudar.
   ⚠ Aqui .botao é o botão PRINCIPAL (ciano) e .botao.fantasma o secundário —
   é o sentido que as telas da plataforma sempre usaram.

   TEMA CLARO E ESCURO (16/10/2026, Reserva Integral)
   Toda cor mora num token aqui em cima, e o tema só troca os tokens. Sem
   escolha guardada, segue o aparelho (prefers-color-scheme); escolhendo no
   botão de sol/lua, o _tema.html grava em localStorage e põe
   data-tema="claro"|"escuro" no <html> ANTES da folha pintar (sem piscar).
   ⚠ O bloco do claro existe DUAS vezes (pelo aparelho e pela escolha): mudou
     um, mude o outro. ⚠ Cor nova numa tela = token novo aqui, nunca #hex solto:
     é o #hex solto que deixa mancha preta no tema claro.
   ====================================================================== */
:root{
  color-scheme:dark;
  --fundo:#0A0D10; --painel:#10151A; --cartao:#151B21; --cartao-2:#1A2129;
  --linha:#232B33; --linha-forte:#2E3842;
  /* texto-3 era #6E7C89: dava 4,0:1 sobre o cartão, abaixo do 4,5:1 */
  --texto:#EEF3F6; --texto-2:#A6B2BD; --texto-3:#7D8A97;
  --ciano:#25D6E8; --ciano-forte:#5FE4F0; --ciano-tinta:#04161A;
  --ciano-10:rgba(37,214,232,.10); --ciano-18:rgba(37,214,232,.18);
  --ciano-35:rgba(37,214,232,.35);
  --verde:#3DD68C; --verde-10:rgba(61,214,140,.12);
  --ambar:#F5A623; --ambar-10:rgba(245,166,35,.12);
  --vermelho:#FF5F66; --vermelho-10:rgba(255,95,102,.12);
  --sobre-verde:#04231A; --sobre-ambar:#231502; --sobre-vermelho:#2A0206;
  --ouro:#F5C442; --prata:#C9D2DA; --bronze:#D9904A;
  --raio:14px; --raio-p:9px;
  --sombra:0 12px 32px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --sombra-p:inset 0 1px 0 rgba(255,255,255,.03);   /* no escuro, so um fio de luz na borda de cima */
  /* as superficies que nao sao "cartao": a barra de cima (vidro), o campo,
     o botao secundario, o codigo, o veu do dialogo e o vidro da porta */
  --topo:rgba(12,16,20,.82); --campo:#0C1014; --fantasma:var(--cartao-2);
  --fantasma-hover:#222B34; --fantasma-borda-hover:#3A4550;
  --codigo:#070A0D; --veu:rgba(4,7,10,.72); --vidro:rgba(21,27,33,.86);
  --aurora-mistura:screen;
  --seta:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6B2BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --capa-fundo:radial-gradient(120% 150% at 88% -30%,rgba(37,214,232,.26),transparent 55%),
    radial-gradient(80% 120% at -10% 130%,rgba(37,214,232,.10),transparent 60%),
    linear-gradient(160deg,#0E2A33 0%,#0B1A22 48%,var(--painel) 100%);
  --capa-ambar:#FFC566; --capa-vermelho:#FF9DA1; --capa-veu:rgba(10,13,16,.6);
  /* o botao do tema mostra o sol no escuro (clicar = clarear) e a lua no claro */
  --tema-sol:block; --tema-lua:none;
  --fonte:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --lateral:232px; --largura:1320px;
  --mola:cubic-bezier(.2,.8,.2,1);
  /* apelidos das telas antigas */
  --preto:var(--fundo); --carvao:var(--painel); --card:var(--cartao);
  --branco:var(--texto); --cinza:var(--texto-2); --cinza2:var(--texto-3);
  --ciano-fundo:var(--ciano-10);
}
/* o claro, quando o aparelho pede e ninguem escolheu o escuro no botao */
@media (prefers-color-scheme:light){
  :root:not([data-tema="escuro"]){
    color-scheme:light;
    --fundo:#F3F5F7; --painel:#F8FAFB; --cartao:#FFFFFF; --cartao-2:#EFF3F6;
    --linha:#E3E8ED; --linha-forte:#CED6DE;
    --texto:#0E1A22; --texto-2:#4B5A67; --texto-3:#5E6B77;
    --ciano:#0B7A8B; --ciano-forte:#0A6A78; --ciano-tinta:#FFFFFF;
    --ciano-10:rgba(11,122,139,.09); --ciano-18:rgba(11,122,139,.18); --ciano-35:rgba(11,122,139,.35);
    --verde:#0B6E3E; --verde-10:rgba(18,128,75,.10);
    --ambar:#8A4A00; --ambar-10:rgba(196,110,0,.11);
    --vermelho:#B42330; --vermelho-10:rgba(204,43,54,.09);
    --sobre-verde:#FFFFFF; --sobre-ambar:#FFFFFF; --sobre-vermelho:#FFFFFF;
    --ouro:#8A6A00; --prata:#5B6874; --bronze:#95541A;
    --sombra:0 18px 40px -18px rgba(16,32,48,.28), 0 2px 6px -2px rgba(16,32,48,.08);
    --sombra-p:0 1px 2px rgba(16,32,48,.05), 0 1px 1px rgba(16,32,48,.03);
    --topo:rgba(255,255,255,.86); --campo:#FFFFFF; --fantasma:#FFFFFF;
    --fantasma-hover:#F1F4F7; --fantasma-borda-hover:#B5C0CA;
    --codigo:#F1F4F6; --veu:rgba(14,26,34,.38); --vidro:rgba(255,255,255,.9);
    --aurora-mistura:multiply;
    --seta:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    --capa-fundo:radial-gradient(120% 150% at 88% -30%,rgba(37,214,232,.22),transparent 55%),
      linear-gradient(160deg,#E2F4F7 0%,#EEF7F9 48%,var(--cartao) 100%);
    --capa-ambar:#8A4A00; --capa-vermelho:#B42330; --capa-veu:rgba(255,255,255,.7);
    --tema-sol:none; --tema-lua:block;
  }
}
/* o claro escolhido no botao (vale com o aparelho em qualquer modo) */
:root[data-tema="claro"]{
  color-scheme:light;
  --fundo:#F3F5F7; --painel:#F8FAFB; --cartao:#FFFFFF; --cartao-2:#EFF3F6;
  --linha:#E3E8ED; --linha-forte:#CED6DE;
  --texto:#0E1A22; --texto-2:#4B5A67; --texto-3:#5E6B77;
  --ciano:#0B7A8B; --ciano-forte:#0A6A78; --ciano-tinta:#FFFFFF;
  --ciano-10:rgba(11,122,139,.09); --ciano-18:rgba(11,122,139,.18); --ciano-35:rgba(11,122,139,.35);
  --verde:#0B6E3E; --verde-10:rgba(18,128,75,.10);
  --ambar:#8A4A00; --ambar-10:rgba(196,110,0,.11);
  --vermelho:#B42330; --vermelho-10:rgba(204,43,54,.09);
  --sobre-verde:#FFFFFF; --sobre-ambar:#FFFFFF; --sobre-vermelho:#FFFFFF;
  --ouro:#8A6A00; --prata:#5B6874; --bronze:#95541A;
  --sombra:0 18px 40px -18px rgba(16,32,48,.28), 0 2px 6px -2px rgba(16,32,48,.08);
  --sombra-p:0 1px 2px rgba(16,32,48,.05), 0 1px 1px rgba(16,32,48,.03);
  --topo:rgba(255,255,255,.86); --campo:#FFFFFF; --fantasma:#FFFFFF;
  --fantasma-hover:#F1F4F7; --fantasma-borda-hover:#B5C0CA;
  --codigo:#F1F4F6; --veu:rgba(14,26,34,.38); --vidro:rgba(255,255,255,.9);
  --aurora-mistura:multiply;
  --seta:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --capa-fundo:radial-gradient(120% 150% at 88% -30%,rgba(37,214,232,.22),transparent 55%),
    linear-gradient(160deg,#E2F4F7 0%,#EEF7F9 48%,var(--cartao) 100%);
  --capa-ambar:#8A4A00; --capa-vermelho:#B42330; --capa-veu:rgba(255,255,255,.7);
  --tema-sol:none; --tema-lua:block;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;background:var(--fundo);color:var(--texto);
  font:14px/1.5 var(--fonte);font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--ciano-35);color:var(--texto)}
/* o anel de foco nao muda o raio do botao (era border-radius:6px em tudo) */
:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
a:focus-visible{border-radius:4px}
*{scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:10px;
  border:3px solid var(--fundo)}
a{color:var(--ciano);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
h1{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  margin:0 0 6px;text-wrap:balance}
h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:28px 0 12px}
h3{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);margin:18px 0 8px}
b,strong{font-weight:700}
.sub{color:var(--texto-2);font-size:13.5px;margin:0 0 20px;max-width:72ch}
[hidden]{display:none!important}
.lateral svg,svg.ic{display:inline-block;width:20px;height:20px;fill:none;
  stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============================================================ a casca
   (16/10/2026) A lateral virou BARRA DE CIMA também no computador. Dentro de
   uma empresa ela só tinha o nome (o menu de verdade são as abas) e comia
   232 px: a lista de reservas escondia a coluna Pagamento atrás da rolagem e
   as abas Integrações e Equipe ficavam fora da tela. O <aside class="lateral">
   e os nomes de classe ficaram -- no celular ela já era barra de cima. */
.app{display:flex;flex-direction:column;min-height:100vh}
.lateral{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;min-height:62px;
  /* as bordas da barra alinham com as do miolo, que fica centralizado */
  padding:10px max(32px,calc((100% - var(--largura))/2 + 32px));
  background:var(--topo);border-bottom:1px solid var(--linha);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
}
.marca{display:block;flex:none;font-weight:800;letter-spacing:.14em;font-size:12.5px;
  color:var(--texto);white-space:nowrap;padding:6px 18px 6px 0}
.marca b{color:var(--ciano)}
.marca:hover{text-decoration:none}
/* o nome da empresa já é o título da página, logo embaixo */
.lateral-empresa{display:none}
.lateral-empresa-nome{font-weight:800;font-size:13px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral-empresa-sub{font-size:11.5px;color:var(--texto-3);margin-top:2px}
/* o menu encolhe e rola por dentro antes de encostar no sol/lua e na conta */
.lateral-nav{display:flex;align-items:center;gap:2px;min-width:0;flex:0 1 auto;overflow-x:auto;
  scrollbar-width:none}
.lateral-nav::-webkit-scrollbar{display:none}
.lateral-nav a:focus-visible{outline-offset:-2px}
.lateral-nav a{
  display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:var(--raio-p);
  color:var(--texto-2);font-weight:600;font-size:13.5px;position:relative;white-space:nowrap;
  transition:background .15s,color .15s;
}
.lateral-nav a svg{width:18px;height:18px;color:var(--texto-3);transition:color .15s}
.lateral-nav a:hover{background:var(--cartao-2);color:var(--texto);text-decoration:none}
.lateral-nav a:hover svg{color:var(--texto-2)}
.lateral-nav a.on{background:var(--ciano-10);color:var(--ciano-forte)}
.lateral-nav a.on svg{color:var(--ciano)}
/* na barra, o rótulo do grupo ("Marca Integral") vira um traço que separa os
   grupos; o texto continua lá para quem lê a tela em voz alta */
.lateral-rotulo{flex:none;width:1px;height:20px;margin:0 8px;background:var(--linha-forte);
  font-size:0;overflow:hidden;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3)}
.lateral-nav > .lateral-rotulo:first-child{display:none}
.lateral-quem{display:flex;align-items:center;gap:10px;flex:none;margin-left:6px;padding-left:12px;
  border-left:1px solid var(--linha)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ciano-18);
  color:var(--ciano-forte);font-weight:800;display:flex;align-items:center;
  justify-content:center;font-size:13px;flex:none}
.lateral-quem-texto{min-width:0;max-width:200px;line-height:1.25;display:flex;flex-direction:column;justify-content:center}
.lateral-quem-texto b{display:block;font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lateral-quem-texto span{display:block;font-size:11px;color:var(--texto-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sair{color:var(--texto-3);padding:8px;border-radius:9px;display:inline-flex}
.sair:hover{color:var(--texto);background:var(--cartao-2);text-decoration:none}
.sair svg{width:18px;height:18px}

/* o botão de sol/lua: mostra o sol no escuro (clicar = clarear) e a lua no claro */
.tema-botao{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-left:auto;padding:0;border:1px solid var(--linha);border-radius:10px;
  background:transparent;color:var(--texto-2);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.tema-botao:hover{background:var(--cartao-2);color:var(--texto);border-color:var(--linha-forte)}
.tema-botao svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.tema-botao .sol{display:var(--tema-sol)}
.tema-botao .lua{display:var(--tema-lua)}

/* notebook estreito (901-1240 px): o menu da agencia perde os icones e a conta
   so o nome -- medido a 1024 px, a barra cheia passava por cima do sol/lua */
@media(min-width:901px) and (max-width:1240px){
  .lateral-nav a svg{display:none}
  .lateral-quem-texto span{display:none}
}

.miolo{width:100%;min-width:0;max-width:var(--largura);margin:0 auto;padding:28px 32px 72px;
  animation:entrar .35s var(--mola) both}
@keyframes entrar{from{opacity:.3;transform:translateY(6px)}}
.rodape{color:var(--texto-3);font-size:12px;padding:30px 0 0;margin:0}

/* ============================================================== avisos */
.aviso{padding:12px 16px 12px 42px;border-radius:12px;margin-bottom:16px;
  font-size:13.5px;line-height:1.55;position:relative;border:1px solid transparent;max-width:900px;
  color:var(--texto)}
.aviso::before{content:"";position:absolute;left:16px;top:15px;width:12px;height:12px;
  border-radius:50%;background:var(--ciano);box-shadow:0 0 0 4px var(--ciano-18)}
.aviso.ok{background:var(--verde-10);border-color:rgba(61,214,140,.3);color:var(--texto)}
.aviso.ok::before{background:var(--verde);box-shadow:0 0 0 4px var(--verde-10)}
.aviso.erro{background:var(--vermelho-10);border-color:rgba(255,95,102,.35);color:var(--texto)}
.aviso.erro::before{background:var(--vermelho);box-shadow:0 0 0 4px var(--vermelho-10)}
.aviso.atencao{background:var(--ambar-10);border-color:rgba(245,166,35,.35)}
.aviso.atencao::before{background:var(--ambar);box-shadow:0 0 0 4px var(--ambar-10)}

/* =============================================================== selos */
.selo{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;background:var(--ciano-10);
  color:var(--ciano-forte);white-space:nowrap;line-height:1.55}
.selo.cinza{background:var(--cartao-2);color:var(--texto-2)}
.selo.alerta{background:var(--vermelho-10);color:var(--vermelho)}
.selo.etiqueta{background:var(--ambar-10);color:var(--ambar)}
.bom{color:var(--verde)} .ruim{color:var(--vermelho)} .atencao{color:var(--ambar)}
.destaque{color:var(--ciano-forte)}
.vazio{color:var(--texto-3)}
.calculado{color:var(--texto-2)}

/* ====================================================== caixas e grade */
.cartao{background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--raio);padding:20px 22px;box-shadow:var(--sombra-p)}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.numero{background:var(--cartao);border:1px solid var(--linha);box-shadow:var(--sombra-p);
  border-radius:var(--raio);padding:16px 18px 14px;transition:border-color .15s}
.numero:hover{border-color:var(--linha-forte)}
.numero .rot{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:6px}
.numero .val{font-size:24px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.numero .val.bom{color:var(--verde)}
.numero .val.ruim{color:var(--vermelho)}
.numero .obs{font-size:12px;color:var(--texto-2);margin-top:6px;min-height:18px}
/* a variacao vira etiqueta: o olho acha na hora se subiu ou desceu */
.numero .obs .var,.capa-linha .var{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;
  border-radius:20px;font-weight:800;font-size:11.5px;font-variant-numeric:tabular-nums}
.numero .obs .var.bom,.capa-linha .var.bom{background:var(--verde-10);color:var(--verde)}
.numero .obs .var.ruim,.capa-linha .var.ruim{background:var(--vermelho-10);color:var(--vermelho)}
.numero .obs .contra{color:var(--texto-3);font-size:11.5px}

.cartoes-resultado .numero{padding:16px 18px 14px}
.cartoes-resultado .val{font-size:26px;letter-spacing:-.03em}
.cartoes-resultado .obs{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
@media(min-width:901px){
  .cartoes-resultado{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cartoes-resultado .val{font-size:22px}
}
@media(min-width:601px) and (max-width:900px){
  .cartoes-resultado{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============================================================= tabelas */
.rolagem{overflow-x:auto;border-radius:var(--raio);border:1px solid var(--linha);box-shadow:var(--sombra-p);
  background:var(--cartao)}
table{border-collapse:collapse;width:100%;background:var(--cartao);font-size:13px;
  font-variant-numeric:tabular-nums}
th,td{padding:11px 14px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--linha);vertical-align:middle}
/* a 1a coluna fica presa: a folha rola de lado e o nome da linha nao some */
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--cartao)}
thead th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3);font-weight:700;background:var(--painel)}
thead th:first-child{background:var(--painel)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td,tbody tr:hover td:first-child{background:var(--cartao-2)}
tr.total td,tr.total td:first-child{font-weight:800;background:var(--painel);
  border-top:1px solid var(--linha-forte)}
tr.branca td{color:var(--texto-3)}
.faixa td,.faixa td:first-child{background:var(--fundo);color:var(--ciano-forte);
  font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase}

/* ========================================================= formulários */
input,select,textarea{
  background:var(--campo);border:1px solid var(--linha-forte);color:var(--texto);
  border-radius:var(--raio-p);padding:9px 12px;font:inherit;font-size:13.5px;
  width:100%;transition:border-color .15s,box-shadow .15s;
}
input:hover,select:hover,textarea:hover{border-color:var(--fantasma-borda-hover)}
input::placeholder,textarea::placeholder{color:var(--texto-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ciano);
  box-shadow:0 0 0 3px var(--ciano-18)}
select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:var(--seta);
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
/* (16/10/2026) a data e a hora seguem o tema pelo color-scheme do :root -- aqui
   havia um color-scheme:dark cravado, que pintava o calendario de preto no claro */
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--ciano);margin:0}
input[type="file"]{padding:6px;cursor:pointer;color:var(--texto-2);font-size:12.5px}
input[type="file"]::file-selector-button{font:inherit;font-weight:600;margin-right:10px;padding:6px 12px;
  border-radius:7px;border:1px solid var(--linha-forte);background:var(--fantasma);color:var(--texto);cursor:pointer}
input[type="file"]::file-selector-button:hover{background:var(--fantasma-hover)}
input[readonly]{background:var(--painel);color:var(--texto-3)}
td input{padding:5px 8px;text-align:right;min-width:88px;font-size:13px}
label{display:block;font-size:12px;font-weight:600;color:var(--texto-2);margin:0 0 5px}
.campo{margin-bottom:16px}
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ciano);border:1px solid var(--ciano);color:var(--ciano-tinta);
  border-radius:var(--raio-p);padding:9px 16px;font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.3;width:auto;min-height:38px;
  box-shadow:var(--sombra-p);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;
}
.botao:hover{background:var(--ciano-forte);border-color:var(--ciano-forte);text-decoration:none}
.botao:active{transform:translateY(1px)}
.botao:disabled{opacity:.55;cursor:default}
.botao.fantasma{background:var(--fantasma);border-color:var(--linha-forte);color:var(--texto);
  font-weight:600}
.botao.fantasma:hover{background:var(--fantasma-hover);border-color:var(--fantasma-borda-hover)}
.barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
/* (16/10/2026) um grupo de botões: os que moram em <form> (Pausar, Apagar)
   ficam na mesma linha do link (Editar) -- antes o form quebrava a linha */
.acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acoes > form{display:contents}
/* cartões soltos um embaixo do outro respiram (antes encostavam) */
.miolo > .cartao + .cartao{margin-top:16px}
.cartao > .acoes:not(:last-child){margin-bottom:16px}
/* a tela de erro (não achou, sem permissão) vira um estado vazio no centro */
.vazio-grande{max-width:460px;margin:7vh auto 0;padding:36px 28px 32px;text-align:center;
  background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra-p)}
.vazio-grande h1{font-size:21px}
.vazio-grande .sub{margin:6px auto 22px}
.vazio-icone{width:52px;height:52px;margin:0 auto 16px;border-radius:15px;display:grid;place-items:center;
  background:var(--ciano-10);color:var(--ciano)}
.vazio-icone .ic{width:24px;height:24px}
.barra select{width:auto;min-width:130px}
.direita{margin-left:auto}

/* ============================================ o cabeçalho do cliente */
.cabeca{margin-bottom:20px}
.cabeca .titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cabeca h1{margin:0}

/* ========================================================== barra de meta */
.trilho{height:8px;background:var(--fundo);border-radius:20px;overflow:hidden;margin:10px 0 6px}
.trilho i{display:block;height:100%;background:var(--ciano);border-radius:20px;
  transform-origin:left;animation:crescer .9s var(--mola) both}
.trilho i.bateu{background:var(--verde)}
.trilho i.longe{background:var(--ambar)}
@keyframes crescer{from{transform:scaleX(.05)}}
/* a verba do mes (05/10/2026): o traco branco e onde o gasto deveria estar hoje */
.trilho.ritmo{position:relative}
.trilho.ritmo .traco{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--texto)}
.ritmo-linha{display:flex;align-items:center;gap:8px}
.ritmo-linha .trilho{flex:1;min-width:110px;margin:0}
/* a aba Verba do mes: selo e verba a esquerda, que e onde o lapis abre */
.tabela-verba th:nth-child(-n+3),.tabela-verba td:nth-child(-n+3){text-align:left}
.tabela-verba .liberar summary b{color:var(--texto);font-size:13px}
.investimento-mes{margin:14px 0}
.investimento-mes h2{margin:0 0 8px}
.investimento-mes p{margin:6px 0}
.investimento-mes .quanto{font-size:15px;color:var(--texto-2)}
.investimento-mes .quanto b{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--texto)}
.selo.ouro{background:rgba(245,196,66,.14);color:var(--ouro)}
.selo.prata{background:rgba(150,165,180,.16);color:var(--prata)}
.selo.bronze{background:rgba(205,127,50,.14);color:var(--bronze)}
/* as dez perguntas do selo: a pergunta, o porquê em letra miúda e a resposta */
.liberar-caixa.caixa-selo{width:min(420px,80vw)}
.pergunta-selo{display:flex;flex-direction:column;gap:3px;padding:7px 0;border-top:1px solid var(--linha)}
.pergunta-selo label{font-size:12px;color:var(--texto)}
.pergunta-selo .vazio{font-size:11px}

/* ================================================================ passos */
.passos{list-style:none;padding:0;margin:0}
.passos li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--linha)}
.passos li:last-child{border-bottom:0}
.bolinha{width:22px;height:22px;border-radius:50%;flex:0 0 22px;margin-top:1px;
  border:2px solid var(--linha-forte);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;color:var(--texto-3)}
.passos li.feito .bolinha{background:var(--verde);border-color:var(--verde);color:var(--sobre-verde)}
.passos li.agora .bolinha{border-color:var(--ciano);color:var(--ciano);
  box-shadow:0 0 0 4px var(--ciano-10)}
.passos li.agora .nome{color:var(--ciano-forte);font-weight:700}
.passos .nome{font-weight:600}
.passos .quando{font-size:12px;color:var(--texto-3);font-variant-numeric:tabular-nums}

/* ================================================================ entrar */
/* a porta: o preto da casa, um brilho que respira e tres ondas de ciano
   correndo em velocidades diferentes (o caminho repete a cada 720, entao
   andar metade da largura fecha o laco sem emenda) */
.porta{position:relative;min-height:100vh;display:grid;place-items:center;padding:24px;overflow:hidden;
  background:radial-gradient(900px 520px at 50% -8%,rgba(37,214,232,.14),transparent 62%),var(--fundo)}
.porta .brilho{position:absolute;width:560px;height:560px;left:50%;top:40%;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(37,214,232,.11),transparent 65%);animation:respirar 7s ease-in-out infinite}
@keyframes respirar{50%{transform:translate(-50%,-50%) scale(1.14);opacity:.7}}
/* a grade em perspectiva: o horizonte da casa, correndo devagar */
.malha{position:absolute;left:-25%;right:-25%;bottom:0;height:46vh;min-height:230px;overflow:hidden;
  pointer-events:none;perspective:280px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(to top,#000 12%,transparent 92%);
  mask-image:linear-gradient(to top,#000 12%,transparent 92%)}
.malha i{position:absolute;inset:-60% 0 -10%;transform:rotateX(74deg);transform-origin:50% 100%;
  background-image:
    repeating-linear-gradient(to right,rgba(37,214,232,.09) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(to bottom,rgba(37,214,232,.09) 0 1px,transparent 1px 96px);
  animation:vir 6s linear infinite}
@keyframes vir{to{background-position:0 96px,0 96px}}

/* a aurora: tres massas de luz subindo devagar, uma atras da outra. Nada de
   linha nem de grafico -- luz e profundidade, so isso. */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(76px);mix-blend-mode:var(--aurora-mistura)}
.aurora i:nth-child(1){left:2%;bottom:-30%;width:58vw;height:58vw;opacity:.55;
  background:radial-gradient(circle,rgba(37,214,232,.30),transparent 66%);
  animation:subir-luz 30s ease-in-out infinite}
.aurora i:nth-child(2){right:-6%;bottom:-38%;width:66vw;height:66vw;opacity:.42;
  background:radial-gradient(circle,rgba(61,214,140,.20),transparent 68%);
  animation:subir-luz 42s ease-in-out -14s infinite}
.aurora i:nth-child(3){left:28%;bottom:-46%;width:74vw;height:74vw;opacity:.34;
  background:radial-gradient(circle,rgba(95,228,240,.24),transparent 70%);
  animation:subir-luz 36s ease-in-out -22s infinite}
@keyframes subir-luz{
  50%{transform:translate3d(2%,-16%,0) scale(1.1)}
}

/* poeira de dados subindo, bem discreta */
.poeira{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.poeira i{position:absolute;bottom:-10px;width:2px;height:2px;border-radius:50%;
  background:var(--ciano);opacity:.35;animation:subir linear infinite}
.poeira i:nth-child(1){left:12%;animation-duration:19s}
.poeira i:nth-child(2){left:27%;animation-duration:26s;animation-delay:-6s}
.poeira i:nth-child(3){left:44%;animation-duration:22s;animation-delay:-12s;width:3px;height:3px}
.poeira i:nth-child(4){left:63%;animation-duration:30s;animation-delay:-3s}
.poeira i:nth-child(5){left:78%;animation-duration:17s;animation-delay:-9s}
.poeira i:nth-child(6){left:90%;animation-duration:24s;animation-delay:-15s;width:3px;height:3px}
@keyframes subir{to{transform:translateY(-105vh);opacity:0}}
.porta-miolo{position:relative;z-index:1;width:100%;max-width:390px;animation:entrar .55s var(--mola) both}
.porta .marca{text-align:center;font-size:16px;padding:0 0 6px}
.porta .frase{text-align:center;color:var(--texto-2);font-size:13.5px;margin:0 0 20px}
.porta .cartao{padding:28px 28px 30px;box-shadow:var(--sombra);background:var(--vidro);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.porta > .cartao{width:100%;max-width:380px;position:relative;z-index:1}
.porta h1{font-size:18px;margin:0 0 18px}
.porta .botao{width:100%;margin-top:4px;padding:11px;display:flex}
.porta .esqueci{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--texto-2)}
.porta .esqueci:hover{color:var(--ciano-forte)}
/* o sol/lua da porta, no canto de cima */
.porta > .tema-botao{position:absolute;top:18px;right:18px;z-index:2;margin:0;background:var(--vidro);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* o "ver como" da diretoria, no canto de cima */
.ver-como{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:-8px 0 14px}
.ver-como label{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3)}
.ver-como select{width:auto;max-width:280px;border-radius:20px;padding:6px 30px 6px 12px;font-size:12.5px;
  font-weight:600;background-color:var(--painel)}
a.lateral-quem-texto{color:var(--texto);text-decoration:none}
a.lateral-quem-texto:hover b{color:var(--ciano-forte)}

/* =========================================================== o celular */
@media(max-width:900px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .lateral{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;
    padding:6px 8px;gap:4px;overflow:visible;min-width:0;min-height:52px;
    border-right:0;border-bottom:1px solid var(--linha);z-index:20}
  .tema-botao{width:36px;height:36px}
  .marca{padding:6px 6px;font-size:11px;flex:none}
  .lateral-empresa,.lateral-rotulo{display:none}
  .lateral-nav{flex-direction:row;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);
    mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .lateral-nav::-webkit-scrollbar{display:none}
  .lateral-nav a{padding:8px 10px;gap:7px;flex:none;white-space:nowrap;font-size:13px}
  .lateral-nav a svg{width:17px;height:17px}
  .lateral-quem{flex:none;margin-top:0;margin-left:2px;padding:0 0 0 4px;border-top:0;border-left:0}
  .lateral-quem-texto{display:none}
  .avatar{width:28px;height:28px;font-size:12px}
  .miolo{padding:16px 14px 48px}
  h1{font-size:21px}
  table{font-size:12px}
  th,td{padding:8px 9px}
  td input{min-width:74px;padding:4px 6px}
  .barra select,.barra .botao{flex:1 1 auto;min-width:0}
  .direita{margin-left:0}
}
@media(max-width:600px){
  .cartoes-resultado{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cartoes-resultado .numero{padding:13px 14px}
  .cartoes-resultado .val{font-size:19px}
}
/* ===================================================== a casa nova (11/09) */
.olho{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3)}
.cartao-cab{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cartao-cab h2{margin:0}
.lado{display:grid;gap:14px;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.pilha{display:flex;flex-direction:column;gap:14px}
.aviso.info{background:var(--ciano-10);border-color:var(--ciano-35);color:var(--texto)}
.lista-acao{list-style:none;margin:0;padding:0}
.lista-acao li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--linha)}
.lista-acao li:first-child{padding-top:2px}
.lista-acao li:last-child{border-bottom:0;padding-bottom:0}
.lista-acao b{display:block;font-size:13.5px;line-height:1.35}
/* o negrito no meio da frase ("A pagar: R$ 240,00") fica na linha dele */
.lista-acao p b{display:inline;font-size:inherit}
.lista-acao p{margin:3px 0 0;font-size:12.5px;color:var(--texto-2)}
.linha-extra{display:flex;gap:10px;margin-top:6px;font-size:12.5px}
.acao-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.acao-linha select{width:auto;min-width:150px;font-size:12.5px;padding:6px 28px 6px 10px}
.acao-linha .botao{padding:7px 12px;font-size:12.5px}
.bola{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--cartao-2);color:var(--texto-2)}
.bola.c{background:var(--ciano-10);color:var(--ciano)}
.bola.a{background:var(--ambar-10);color:var(--ambar)}
.bola.r{background:var(--vermelho-10);color:var(--vermelho)}
.bola .ic{width:18px;height:18px}
ul.dados{list-style:none;margin:0;padding:0}
ul.dados li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--linha);font-size:13px;color:var(--texto-2)}
ul.dados li:last-child{border-bottom:0}
ul.dados li b{color:var(--texto);font-size:14px;font-variant-numeric:tabular-nums}
ul.dados li.total b{font-size:22px;font-weight:800;letter-spacing:-.02em}

/* a esteira: um ponto por etapa numa escada de cinza, e so a ultima em ciano */
.esteira{display:grid;grid-template-columns:repeat(6,minmax(160px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.coluna{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:12px;
  display:flex;flex-direction:column;gap:8px;min-height:140px}
.coluna header{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.coluna header small{margin-left:auto;background:var(--fundo);color:var(--texto-2);border-radius:20px;
  padding:1px 8px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.ponto{width:8px;height:8px;border-radius:50%;flex:none;background:var(--linha-forte)}
.esteira .coluna:nth-child(2) .ponto{background:var(--texto-3)}
.esteira .coluna:nth-child(3) .ponto,.esteira .coluna:nth-child(4) .ponto{background:var(--texto-2)}
.esteira .coluna:nth-child(5) .ponto{background:var(--texto)}
.esteira .coluna:last-child .ponto{background:var(--ciano)}
.ficha{display:block;background:var(--cartao);border:1px solid var(--linha);border-radius:10px;
  padding:10px 12px;color:var(--texto);transition:border-color .15s}
.ficha:hover{border-color:var(--linha-forte);text-decoration:none}
.ficha b{display:block;font-size:13px}
.ficha span{font-size:11.5px;color:var(--texto-3)}
.muitos{font-size:12.5px;color:var(--texto-2);padding:10px 12px;border:1px dashed var(--linha-forte);border-radius:10px}
.muitos b{color:var(--ciano-forte);font-size:22px;font-weight:800;display:block;line-height:1.1}
.nada{margin:0;font-size:12px}

/* os resultados */
.segmento{display:inline-flex;gap:3px;padding:3px;background:var(--painel);border:1px solid var(--linha);border-radius:10px}
.segmento a{color:var(--texto-2);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:7px;transition:all .15s}
.segmento a:hover{color:var(--texto);text-decoration:none}
.segmento a.on{background:var(--cartao-2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linha-forte)}
.datas{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--texto-3);margin:0}
.datas input{width:auto;padding:5px 8px;font-size:12.5px}
.datas .botao{padding:6px 12px;font-size:12.5px}
.ao-vivo{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--texto-2);
  background:var(--cartao);border:1px solid var(--linha);border-radius:20px;padding:5px 12px 5px 10px}
.ao-vivo i{width:7px;height:7px;border-radius:50%;background:var(--ciano);position:relative}
.ao-vivo i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ciano);
  animation:pulso 2s infinite}
@keyframes pulso{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.kpis{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.numero .obs .var.neutro,.capa-linha .var.neutro{background:var(--cartao-2);color:var(--texto-2)}
.grafico svg{width:100%;height:auto;display:block;overflow:visible}
.grafico .gl{stroke:var(--linha);stroke-width:1}
.grafico .gt{fill:var(--texto-3);font-size:11px;font-family:var(--fonte);font-variant-numeric:tabular-nums}
/* a linha se desenha na entrada; parada (ou sem animacao) ela ja esta inteira */
.grafico .linha{fill:none;stroke:var(--ciano);stroke-width:2.25;stroke-linejoin:round;
  stroke-linecap:round;stroke-dasharray:1;animation:desenhar 1.1s var(--mola) both}
@keyframes desenhar{from{stroke-dashoffset:1}}
.grafico .area{animation:entrar .9s .3s both}
.grafico .fim{fill:var(--ciano)}
.grafico .halo{fill:var(--ciano-18)}
.grafico .alvo{fill:transparent;cursor:crosshair}
.grafico .alvo:hover{fill:var(--ciano-35)}
/* (12/10/2026) o dia de hoje no "Este mês": ainda entrando, então tracejado,
   oco e escrito "hoje, parcial" -- fora da área e da linha cheia, que vão
   até ontem como os números da capa */
.grafico .linha.parcial{stroke-dasharray:5 5;animation:none;opacity:.8}
.grafico .fim.parcial{fill:var(--cartao);stroke:var(--ciano);stroke-width:2}
.grafico .gt.parcial{fill:var(--texto-2);font-weight:700}

/* a vitrine */
.vitrine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.servico{display:flex;flex-direction:column;gap:14px;transition:border-color .2s}
.servico:hover{border-color:var(--linha-forte)}
.servico.tem{border-color:var(--ciano-35);
  background:linear-gradient(180deg,var(--ciano-10),transparent 55%),var(--cartao)}
.servico .cab{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.servico .cab h2{font-size:16px;margin:0}
.servico .cab p{margin:3px 0 0;font-size:12.5px;color:var(--texto-2)}
.preco{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.preco b{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preco span{font-size:12.5px;color:var(--texto-3)}
.incluso{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--texto-2)}
.incluso li{display:flex;gap:8px;align-items:flex-start}
.incluso .ic{width:16px;height:16px;color:var(--ciano);margin-top:2px}
.servico footer{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;
  border-top:1px solid var(--linha);flex-wrap:wrap;font-size:12.5px}
dialog{background:var(--cartao);color:var(--texto);border:1px solid var(--linha-forte);border-radius:14px;
  padding:22px 24px 24px;width:calc(100% - 32px);max-width:560px;box-shadow:var(--sombra)}
dialog[open]{animation:entrar .22s var(--mola)}
dialog::backdrop{background:var(--veu);backdrop-filter:blur(3px)}
.dlg > header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.dlg > header h2{font-size:18px;margin:3px 0 0}
.fechar{margin-left:auto;border:0;background:var(--cartao-2);color:var(--texto-2);width:30px;height:30px;
  border-radius:8px;cursor:pointer;font-size:18px;line-height:1}
.fechar:hover{color:var(--texto)}
.resumo{display:flex;align-items:baseline;gap:8px;padding:12px 14px;background:var(--fundo);
  border:1px solid var(--linha);border-radius:10px;margin-bottom:16px}
.resumo b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.resumo span{color:var(--texto-3);font-size:12.5px}
.passos-pix{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:14px;font-size:13px}
.passos-pix b{font-size:13.5px}
.passos-pix p{margin:2px 0 8px;color:var(--texto-2);font-size:12.5px}
.pix{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.qr{background:#fff;border-radius:10px;padding:6px;line-height:0;flex:none}
.pix .copia{flex:1;min-width:190px;display:flex;flex-direction:column;gap:8px}
.pix code,.codigo{display:block;background:var(--codigo);border:1px solid var(--linha);border-radius:8px;
  padding:8px 10px;font:12px/1.45 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--texto-2);word-break:break-all}
textarea.codigo{width:100%;resize:vertical;white-space:pre;word-break:normal}
.lista{margin:0 0 14px;padding-left:20px;font-size:13.5px;color:var(--texto-2)}
.lista li{margin:6px 0}
.lista b{color:var(--texto)}
label.marcar{display:flex;align-items:center;gap:8px;color:var(--texto);font-size:13px;font-weight:500;
  margin:0;cursor:pointer}
label.marcar input{width:auto}
/* a projecao de metas: cartao que se ajusta ao numero, nunca sai da tela */
.metas-grade{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.metas-grade .cartao{min-width:0}
.metas-linhas{margin-top:12px}
.metas-linhas li{font-size:12.5px}
.metas-linhas li b{font-size:13px;text-align:right;overflow-wrap:anywhere;min-width:0}

/* ============================================ o termometro da carteira (12/09)
   Era uma janela colada dentro da plataforma; agora e tela da casa. O verde, o
   ambar e o vermelho aqui NAO sao enfeite: sao o estado do cliente. */
.term-hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(230px,1.05fr);gap:26px;align-items:center}
.term-num{display:flex;align-items:center;gap:14px}
.term-num .val{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.term-num .rot{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.term-num .obs{font-size:12.5px;color:var(--texto-2);margin-top:6px}
.term-num .obs .var{display:inline-flex;padding:2px 7px;border-radius:20px;font-weight:800;font-size:11.5px}
.term-num .obs .var.bom{background:var(--verde-10);color:var(--verde)}
.term-num .obs .var.ruim{background:var(--vermelho-10);color:var(--vermelho)}
.term-num .obs .var.neutro{background:var(--cartao-2);color:var(--texto-2)}
.tubo{position:relative;width:13px;height:88px;flex:none;border-radius:12px;background:var(--fundo);
  border:1px solid var(--linha-forte);overflow:hidden}
.tubo i{position:absolute;left:0;right:0;bottom:0;border-radius:12px}
.tubo .corte{position:absolute;left:0;right:0;height:1px;background:var(--linha-forte)}
.cor-verde{color:var(--verde)} .cor-amarelo{color:var(--ambar)} .cor-vermelho{color:var(--vermelho)}
.fundo-verde{background:var(--verde)} .fundo-amarelo{background:var(--ambar)} .fundo-vermelho{background:var(--vermelho)}
.selo.verde{background:var(--verde-10);color:var(--verde)}
.selo.amarelo{background:var(--ambar-10);color:var(--ambar)}
.selo.vermelho{background:var(--vermelho-10);color:var(--vermelho)}
.cores{display:flex;gap:10px;flex-wrap:wrap}
.cores > div{flex:1;min-width:88px;background:var(--painel);border:1px solid var(--linha);
  border-radius:10px;padding:10px 12px}
.cores span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.cores b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px}
.pino{width:8px;height:8px;border-radius:50%;flex:none;background:var(--linha-forte);display:inline-block}
.pino.verde{background:var(--verde)} .pino.amarelo{background:var(--ambar)} .pino.vermelho{background:var(--vermelho)}
.term-semana b{display:block;font-size:14px}
.term-semana .botao{margin-top:10px}
.legenda{display:flex;gap:14px;font-size:12px;color:var(--texto-2);margin-top:10px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.grafico .corte-v,.grafico .corte-a{stroke-width:1;stroke-dasharray:3 4;opacity:.55}
.grafico .corte-v{stroke:var(--verde)} .grafico .corte-a{stroke:var(--ambar)}
.grafico .ponto-t{fill:var(--fundo);stroke:var(--ciano);stroke-width:2}
.grafico .b-verde{fill:var(--verde)} .grafico .b-amarelo{fill:var(--ambar)} .grafico .b-vermelho{fill:var(--vermelho)}
.grafico figcaption.rot{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:10px}
table.evo th.q,table.evo td.q{text-align:center;min-width:50px}
table.evo td.q{font-weight:700}
table.evo td.q.vazia{color:var(--texto-3)}

/* a reuniao: a fila de um lado, a ficha do cliente do outro */
.reuniao{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start}
.fila{padding:14px 10px;position:sticky;top:16px}
.fila h2{font-size:12.5px;margin:0 8px 8px;color:var(--texto-3);letter-spacing:.06em;text-transform:uppercase}
.fila ol{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
.fila a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  color:var(--texto-2);font-size:13px}
.fila a:hover{background:var(--cartao-2);color:var(--texto);text-decoration:none}
.fila a[aria-current="true"]{background:var(--ciano-10);color:var(--texto);
  box-shadow:inset 0 0 0 1px var(--ciano-35)}
.fila .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .nota{font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;color:var(--texto-3)}
.trazer{display:flex;flex-direction:column;gap:8px;margin:12px 8px 2px;padding-top:12px;
  border-top:1px solid var(--linha)}
.ajustar-reuniao{margin-bottom:14px;padding:14px 18px}
.ajustar-reuniao summary{cursor:pointer;font-size:13px;color:var(--texto-2)}
.ficha-cab{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
  flex-wrap:wrap;margin-bottom:6px}
.ficha-cab h2{margin:0 0 8px}
.criterio{display:grid;grid-template-columns:minmax(140px,190px) auto minmax(0,1fr);gap:8px 16px;
  align-items:center;padding:13px 0;border-top:1px solid var(--linha)}
.criterio .nome-c b{display:block;font-size:13.5px}
.criterio .nome-c span{font-size:11.5px;color:var(--texto-3)}
.criterio .regua{margin:0;font-size:12.5px;color:var(--texto-2)}
.escala{display:inline-flex;gap:4px}
.escala label{margin:0;cursor:pointer;position:relative}
.escala input{position:absolute;opacity:0;width:1px;height:1px}
.escala span{display:grid;place-items:center;width:38px;height:36px;border-radius:8px;
  background:var(--painel);border:1px solid var(--linha-forte);font-weight:800;font-size:14px;
  color:var(--texto-2);transition:background .15s,border-color .15s,color .15s}
.escala label:hover span{border-color:var(--texto-3);color:var(--texto)}
.escala input:focus-visible + span{box-shadow:0 0 0 3px var(--ciano-18)}
/* a cor da nota escolhida diz na hora se aquilo e bom ou ruim */
.escala .v1 input:checked + span,.escala .v2 input:checked + span{background:var(--vermelho);
  border-color:var(--vermelho);color:var(--sobre-vermelho)}
.escala .v3 input:checked + span{background:var(--ambar);border-color:var(--ambar);color:var(--sobre-ambar)}
.escala .v4 input:checked + span,.escala .v5 input:checked + span{background:var(--verde);
  border-color:var(--verde);color:var(--sobre-verde)}
.escala .limpar span{width:32px;font-weight:600;color:var(--texto-3)}
.escala .limpar input:checked + span{background:var(--cartao-2);color:var(--texto-2)}
.ficha-term textarea{min-height:92px;resize:vertical}
.historico{margin-top:20px;padding-top:4px;border-top:1px solid var(--linha)}
.historico h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);margin:14px 0 0}
.historico ul.dados li{display:block}
@media(max-width:900px){
  .term-hero{grid-template-columns:minmax(0,1fr)}
  .reuniao{grid-template-columns:minmax(0,1fr)}
  .fila{position:static}
  .fila ol{max-height:none}
  .criterio{grid-template-columns:minmax(0,1fr)}
}

/* as respostas do formulario, na ficha */
dl.respostas{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
dl.respostas dt{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--texto-3);margin-top:10px}
dl.respostas dd{margin:0;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}

/* o formulario da casa: largo, em passos */
.porta-miolo.largo{max-width:720px}
.passo-barra{height:4px;background:var(--linha);border-radius:4px;overflow:hidden;margin:0 0 18px}
.passo-barra i{display:block;height:100%;background:var(--ciano);transform-origin:left;transform:scaleX(.25);transition:transform .35s var(--mola)}
.passo{border:0;padding:0;margin:0;min-width:0}
.passo legend{font-size:18px;font-weight:800;margin:0 0 4px;padding:0}
.passo .conta-passo{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3)}
.passo .campo small{display:block;color:var(--texto-3);font-size:11.5px;margin-top:4px}
.passo textarea{min-height:84px;resize:vertical}
.passo .obrig{color:var(--ciano)}
.simnao{display:flex;gap:8px}
.simnao label{display:flex;align-items:center;gap:6px;margin:0;padding:8px 14px;border:1px solid var(--linha-forte);
  border-radius:20px;cursor:pointer;color:var(--texto);font-weight:600}
.simnao label:has(input:checked){background:var(--ciano-10);border-color:var(--ciano-35);color:var(--ciano-forte)}
.simnao input{width:auto}
.passo-botoes{display:flex;gap:10px;justify-content:space-between;margin-top:18px}
.passo-botoes .botao{width:auto}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:900px){
  .lado,.vitrine{grid-template-columns:minmax(0,1fr)}
  .lista-acao li{grid-template-columns:36px minmax(0,1fr)}
  .lista-acao li > :last-child{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ler o relatório sem sair da lista (12/09/2026) */
.ler-relatorio{margin-top:6px}
.ler-relatorio summary{cursor:pointer;font-size:12.5px;color:var(--ciano);list-style:none;width:max-content}
.ler-relatorio summary:hover{text-decoration:underline}
.texto-relatorio{margin-top:8px;padding:12px 14px;background:var(--fundo);border:1px solid var(--linha);
  border-radius:10px;white-space:pre-wrap;font-size:13px;line-height:1.55;max-height:340px;overflow:auto}

/* liberar o acesso do cliente sem sair da Carteira (12/09/2026) */
.liberar summary{cursor:pointer;font-size:12.5px;color:var(--ciano);list-style:none;width:max-content}
.liberar summary:hover{text-decoration:underline}
.liberar-caixa{display:flex;flex-direction:column;gap:6px;width:min(300px,60vw);margin-top:8px;
  padding:12px;background:var(--painel);border:1px solid var(--linha);border-radius:10px;
  white-space:normal;text-align:left}
.liberar-caixa label{margin:0;font-size:11.5px}

/* ================================================ o celular, de verdade (14/09) */
/* Medido a 375 px: dentro do cliente a barra somava as áreas dele E a agência,
   e a agência não encolhia — a página ia a 1.276 px e o celular diminuía tudo.
   Agora a agência mora no Menu; as áreas do cliente viram a 2ª linha. */
.menu-celular{display:none}
@media(max-width:900px){
  .lateral{flex-wrap:wrap;row-gap:0}
  .menu-celular{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;
    background:transparent;border:1px solid var(--linha);color:var(--texto);border-radius:10px;
    padding:6px 11px;font:600 13px var(--fonte);cursor:pointer;min-height:36px}
  .menu-celular svg{width:18px;height:18px}
  .lateral > .lateral-nav[aria-label="Agência"]{display:none}
  .lateral-quem{margin-left:0}
  .lateral > .lateral-nav[aria-label="Áreas do cliente"]{order:5;flex:1 1 100%;
    margin:4px -8px -6px;padding:4px 8px;border-top:1px solid var(--linha)}
  /* o sol/lua: sem Menu (dentro de uma empresa) fica na barra; com Menu, mora
     dentro dele -- na barra da agência a 375 px não sobra lugar */
  .lateral:has(.menu-celular):not(.aberta) > .tema-botao{display:none}
  /* empresa sem atalho para o painel: a 2a linha da barra ficava so com o traco */
  .lateral > .lateral-nav[aria-label="Áreas do cliente"]:not(:has(a:not(.lateral-voltar))){display:none}

  /* menu aberto: a lateral vira tela cheia, tudo em lista, com dedo grande */
  .lateral.aberta{position:fixed;inset:0;height:100vh;height:100dvh;flex-direction:column;
    flex-wrap:nowrap;align-items:stretch;overflow-y:auto;padding:14px 16px 22px;gap:4px;z-index:50;
    background:var(--fundo)}
  .lateral.aberta > .tema-botao{align-self:flex-start;margin:auto 0 0 6px}
  .lateral.aberta .marca{padding:10px 6px 14px;font-size:12.5px}
  .lateral.aberta .menu-celular{position:absolute;top:12px;right:14px}
  .lateral.aberta .lateral-nav{display:flex;flex-direction:column;align-items:stretch;flex:none;order:0;overflow:visible;
    -webkit-mask-image:none;mask-image:none;margin:0;padding:0;border:0}
  .lateral.aberta .lateral-nav a{padding:12px;font-size:15px;white-space:normal}
  .lateral.aberta .lateral-nav a svg{width:20px;height:20px}
  .lateral.aberta .lateral-empresa,.lateral.aberta .lateral-rotulo{display:block}
  .lateral.aberta .lateral-rotulo{width:auto;height:auto;margin:0;padding:12px 10px 4px;
    background:none;font-size:10.5px}
  .lateral.aberta .lateral-quem{margin-top:auto;padding:14px 4px 0;border-top:1px solid var(--linha)}
  .lateral.aberta > .tema-botao + .lateral-quem{margin-top:14px}
  .lateral.aberta .lateral-quem-texto{display:block}
  body.sem-rolar{overflow:hidden}

  /* números dos cartões cabem sem quebrar "R$ 3.070,35" em duas linhas */
  .cartoes-resultado .val{font-size:18px;white-space:nowrap}
  .numero .val{overflow-wrap:anywhere}
}
@media(max-width:380px){
  .cartoes-resultado{grid-template-columns:minmax(0,1fr)}
}

/* relatórios do cliente: a lista ao lado da leitura no computador, uma embaixo
   da outra no celular (a coluna fixa de 220 px empurrava a leitura para fora) */
.lista-e-leitura{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}
@media(max-width:900px){
  .lista-e-leitura{grid-template-columns:minmax(0,1fr)}
  .datas{flex-wrap:wrap}
}

/* a seta de voltar, só no celular (14/09): lá a lateral mora no Menu e ninguém
   achava o caminho de volta */
.voltar-celular{display:none}
@media(max-width:900px){
  .voltar-celular{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:36px;height:36px;margin-right:2px;border-radius:10px;color:var(--texto);
    border:1px solid var(--linha)}
  .voltar-celular:hover{background:var(--cartao);text-decoration:none}
  .voltar-celular svg{width:18px;height:18px}
  .lateral.aberta .voltar-celular{display:none}
}

/* ================================== Google Meu Negócio (14/09/2026) */
.escondido{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.estrelas{color:var(--ambar);letter-spacing:1px}
.saude{display:inline-flex;align-items:center;gap:8px;min-width:130px;justify-content:flex-end}
.saude b{min-width:24px;text-align:right}
.saude .trilho{flex:1;margin:0;min-width:70px}
.tabela-gmn td:first-child{white-space:normal;min-width:240px;max-width:340px}
.tabela-gmn td:first-child .selo{margin-left:6px}
.tabela-gmn td:nth-child(2),.tabela-gmn th:nth-child(2){text-align:left}
.gmn-aprovar{align-items:start!important}
.citacao{margin:10px 0 0;padding:8px 12px;border-left:2px solid var(--linha-forte);color:var(--texto-2);font-size:13px;max-width:72ch}
.gmn-aprovar textarea{margin-top:10px;min-height:76px;resize:vertical;line-height:1.5}
.gmn-aprovar .acao-linha{flex-direction:column;align-items:stretch;padding-top:2px}
ul.avaliacoes{list-style:none;margin:0;padding:0}
ul.avaliacoes li{padding:14px 0;border-bottom:1px solid var(--linha)}
ul.avaliacoes li:first-child{padding-top:2px}
ul.avaliacoes li:last-child{border-bottom:0;padding-bottom:0}
.avaliacao-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px}
ul.avaliacoes p{margin:6px 0 0;font-size:13.5px;color:var(--texto);max-width:72ch}
.resposta{margin-top:10px;padding:10px 12px;border-left:2px solid var(--ciano-35);background:var(--painel);
  border-radius:0 var(--raio-p) var(--raio-p) 0;font-size:13px;color:var(--texto-2)}
.resposta .olho{display:block;margin-bottom:3px}
.resposta.sem{border-left-color:var(--ambar);padding:6px 12px}
.resposta.sem .olho{color:var(--ambar);margin:0}
.porta-miolo.larga{max-width:760px}
.texto-legal h1{font-size:22px}
.texto-legal h2{margin:22px 0 6px}
.texto-legal p{color:var(--texto-2);margin:0 0 10px;line-height:1.65}
@media(max-width:900px){
  .gmn-aprovar{grid-template-columns:36px minmax(0,1fr)!important}
  .gmn-aprovar .acao-linha{grid-column:2;flex-direction:row}
}

/* ============================== a cara C, "cartão-postal" (01/10/2026) */
/* A tela que o cliente mais abre: uma capa com o número grande por cima e a
   comparação em palavras. A capa é o degradê da marca enquanto o sistema não
   tiver a foto do destino de cada cliente (nunca imagem gerada por IA). */
.capa{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:18px 28px;align-items:end;padding:24px 28px 34px;border:1px solid var(--linha);
  border-radius:var(--raio);
  background:var(--capa-fundo)}
/* a onda no pé da capa, como no esboço */
.capa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 58 C 300 34, 520 76, 760 52 S 1180 30, 1440 52' stroke='rgba(37,214,232,.35)' fill='none' stroke-width='1.5' vector-effect='non-scaling-stroke'/></svg>") no-repeat center bottom/100% 100%}
.capa-texto,.capa-lado{position:relative;z-index:1;min-width:0}
.capa-topo{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.capa h1{margin:0;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  overflow-wrap:anywhere}
.capa-periodo{font-size:12.5px;font-weight:600;color:var(--texto-2);font-variant-numeric:tabular-nums}
.capa-periodo::before{content:"· "}
.capa-selo{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:12px;font-weight:700;color:var(--capa-ambar);background:rgba(245,166,35,.16);
  border:1px solid rgba(245,166,35,.45)}
.capa-selo.grave{color:var(--capa-vermelho);background:rgba(255,95,102,.15);border-color:rgba(255,95,102,.45)}
.capa-num{margin:12px 0 6px;font-size:19px;font-weight:700;color:var(--texto-2);line-height:1}
.capa-num .val{font-size:64px;font-weight:800;letter-spacing:-.035em;color:var(--texto);
  margin-right:6px;font-variant-numeric:tabular-nums}
.capa-linha{margin:0;font-size:14px;color:var(--texto-2);line-height:1.7}
.capa-linha .var{margin-left:6px;white-space:nowrap}
/* o valor nao quebra no meio: no tablet saia "R$" numa linha e "2.857,46" na outra */
.capa-linha > span{white-space:nowrap}
.capa-lado{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.capa-botoes{display:flex;gap:8px}
.capa .segmento{background:var(--capa-veu)}
.capa .ao-vivo{background:var(--capa-veu)}
.outro-periodo summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ciano);
  list-style:none;text-align:right}
.outro-periodo summary::-webkit-details-marker{display:none}
.outro-periodo[open] .datas{margin-top:8px}
.aviso.saldo{max-width:none;margin:14px 0 0}
.aviso.saldo b{display:block}
.aviso.saldo p{margin:2px 0 0;color:var(--texto-2)}
/* a hora da leitura na cor do texto, e nao no cinza de .vazio: sobre o fundo
   ambar/vermelho do aviso o cinza dava 3,8:1, abaixo do minimo de 4,5:1 -- e
   a hora e o que diz se o aviso ainda vale */
.aviso.saldo .lido{white-space:nowrap}
.kpis-c{margin-top:14px}
.kpis-c .numero .obs{min-height:0}
/* periodo sem numero nenhum: a frase no lugar do numero grande, e quem cuida */
.capa-num.capa-sem{font-size:24px;font-weight:800;color:var(--texto);line-height:1.25;
  letter-spacing:-.01em;max-width:24ch}
.sem-numero h2{margin:0 0 6px}
.sem-numero p{margin:6px 0 0;color:var(--texto-2);line-height:1.6}

/* o nome curto das áreas do cliente só aparece na barra de baixo do celular */
.lateral-nav .curto,.so-cel{display:none}

/* ===================== o celular vira aplicativo (01/10/2026, Passo 2) */
/* Abaixo de 760 px: uma coluna, dedo grande (44 px, o mínimo de toque) e, para
   o CLIENTE, as áreas dele numa barra fixa embaixo, como num aplicativo. A
   agência continua com o Menu de cima: a barra é só de quem não tem o Menu. */
@media(max-width:760px){
  .botao,.segmento a,.outro-periodo summary,.menu-celular,.lateral-nav a,
  select,input:not([type=checkbox]):not([type=radio]){min-height:44px}
  /* ⚠ a marca cresce pelo respiro, e NAO virando flex: em flex o espaco entre
     "MARCA" e <b>INTEGRAL</b> some ("MARCAINTEGRAL") e a porta deixa de
     centralizar a marca -- as duas coisas sairam na foto */
  .marca{padding-top:9px;padding-bottom:9px}
  /* ⚠ a seta de voltar e o Sair ganham os 44 px no ALVO (::after), nao na
     caixa: com a caixa maior a barra da agencia passava de 390 px e quebrava
     em duas linhas, com o Sair sozinho embaixo */
  .voltar-celular,.sair{position:relative}
  .voltar-celular::after,.sair::after{content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .segmento a{display:inline-flex;align-items:center}
  .acao-linha .botao{padding:9px 14px;font-size:13.5px}

  .capa{grid-template-columns:minmax(0,1fr);margin:-16px -14px 0;padding:20px 16px 34px;
    border-radius:0;border-width:0 0 1px}
  .capa h1{flex-basis:100%}
  .capa-periodo::before{content:none}
  .capa-num .val{font-size:52px}
  .capa-lado{align-items:stretch}
  .capa-botoes{display:grid;grid-template-columns:1fr 1fr}
  /* os cinco periodos cabem sem rolar: 3 em cima, 2 embaixo */
  .capa-periodos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .capa-periodos a{grid-column:span 2;justify-content:center;padding:0 6px}
  .capa-periodos a:nth-child(n+4){grid-column:span 3}
  .outro-periodo summary{display:flex;align-items:center;text-align:left}
  .capa .ao-vivo{align-self:flex-start}
  .kpis-c{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpis-c > :last-child:nth-child(odd){grid-column:1/-1}
  .kpis-c .numero{padding:13px 14px}
  .kpis-c .numero .val{font-size:20px;white-space:nowrap}
  .so-pc{display:none} .so-cel{display:block}
  .cartao{padding:16px}

  .com-barra .lateral > .lateral-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:4px 4px;gap:0;
    background:var(--painel);border-top:1px solid var(--linha);
    -webkit-mask-image:none;mask-image:none}
  /* ⚠ os seis cabem de 360 px para cima, cada um com 44 de largura no minimo:
     com "flex:1 0 auto" e minimo de 56 a barra pedia 382 px, e no iPhone mini
     (375) e nos Android de 360 o "Serviços" ficava cortado fora da tela */
  .com-barra .lateral > .lateral-nav a{
    flex:1 1 auto;min-width:44px;min-height:54px;flex-direction:column;justify-content:center;
    gap:3px;padding:6px 2px;font-size:10.5px;font-weight:700}
  .com-barra .lateral > .lateral-nav a svg{width:20px;height:20px}
  .com-barra .lateral > .lateral-nav .longo{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .com-barra .lateral > .lateral-nav .curto{display:block;max-width:100%;overflow:hidden;
    text-overflow:ellipsis}
  .com-barra .miolo{padding-bottom:96px}

  /* o Hoje da diretoria vira a mesa de decisão: uma coluna, cada linha com a
     ação logo embaixo dela, e o total do mês sem quebrar o número em dois */
  .lista-acao li{grid-template-columns:32px minmax(0,1fr);gap:4px 12px;padding:14px 0}
  .lista-acao .bola{width:32px;height:32px}
  .lista-acao li > :last-child{grid-column:2;margin-top:8px}
  .lista-acao li > .botao{justify-self:start}
  ul.dados li.total{flex-direction:column;align-items:flex-start;gap:2px}
  /* os links soltos dos cartoes ("abrir o quadro", "ver a carteira") tinham
     17-19 px de altura: no dedo, o alvo cresce sem a letra mudar */
  .cartao-cab > a,.muitos a{display:inline-flex;align-items:center;min-height:44px}
}

/* ======================= Comercial › Crescimento (obra 4, 05/10/2026) */
/* ⚠ as nove colunas do "mês a mês" só cabem em 1280 px com o menu se o
   CABEÇALHO quebrar a linha ("Custo por cliente novo" em uma linha só
   empurrava o custo para trás da rolagem). O número nunca quebra. */
table.cab-quebra thead th{white-space:normal;vertical-align:bottom;min-width:64px}
/* ⚠ o gráfico de entradas e saídas tem 560 de largura e encolhe no celular:
   com 11 o "+3" e o mês saíam com uns 6 px -- e são eles que substituem a cor
   para quem não distingue verde de vermelho */
@media(max-width:600px){.grafico.entra-sai .gt{font-size:20px}}

/* ======================================================================
   AS SEIS PEÇAS — o contrato (obra 4 do esboço 3.0, 13/10/2026)
   O MESMO bloco no painel e no CRM, com os mesmos nomes de classe: copie
   inteiro, não adapte. Toda tela NOVA usa só estas peças; as antigas passam
   para elas quando a obra delas chegar (não é para refazer tudo de uma vez:
   eram 458 estilos soltos nos templates).
   · A cor tem significado fixo: verde = feito · ciano = pronto ou para agir ·
     âmbar = atenção · vermelho = problema. Vermelho NUNCA marca coisa boa.
   · Todo alvo de toque destas peças tem 40 px no mínimo.
   · Nada aqui faz a página rolar de lado no celular.
   · Número: algarismos da mesma largura; o que falta é "—"; dinheiro pela
     regra única (saldo.dinheiro no painel, nucleo.dinheiro no CRM).
   1 aba ...... <nav class="abas"><a class="on" aria-current="page">Ativos · 11</a>
                no celular ela rola para o lado DENTRO dela, sem empurrar a página
   2 selo ..... <span class="selo feito|agir|atencao|problema"> (a base .selo
                já existe nos dois sistemas; .selo.cinza é o neutro)
   3 linha .... <ul class="linhas"><li><div class="linha-texto"><b>…</b><p>…</p>
                </div><div class="linha-acao">botões</div></li></ul>
   4 número ... <div class="cartao-numero"><div class="rot">…</div><div class="val">…</div>
                <div class="compara">contra 1 a 7 de setembro</div>
                <div class="lido">lido às 13:21</div></div> · .parcial = o dia em
                andamento: tracejado, e a palavra "parcial" escrita no .compara
   5 tabela ... <div class="rolagem"><table class="tabela"> · td.num = número,
                à direita; td.quebra = texto que pode quebrar
   6 tabela que vira cartão abaixo de 760 px: <table class="tabela vira-cartao">,
                cada <td data-rot="Mensalidade">; a 1ª coluna é o título do
                cartão, e td.largo ocupa a largura inteira dele
   ====================================================================== */
/* 1 · aba */
.abas{display:flex;gap:3px;width:max-content;max-width:100%;margin:0 0 16px;padding:3px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  background:var(--painel);border:1px solid var(--linha);border-radius:10px}
.abas::-webkit-scrollbar{display:none}
.abas a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;
  border-radius:7px;color:var(--texto-2);font-size:13px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.abas a:hover{color:var(--texto);text-decoration:none}
.abas a.on,.abas a[aria-current="page"]{background:var(--cartao-2);color:var(--texto);
  box-shadow:inset 0 0 0 1px var(--linha-forte)}
/* 2 · selo: o significado fixo das cores */
.selo.feito{background:var(--verde-10);color:var(--verde)}
.selo.agir{background:var(--ciano-10);color:var(--ciano-forte)}
.selo.atencao{background:var(--ambar-10);color:var(--ambar)}
.selo.problema{background:var(--vermelho-10);color:var(--vermelho)}
/* selo que é link: 40 px de alvo sem a etiqueta crescer */
a.selo{position:relative}
a.selo::after{content:"";position:absolute;left:0;right:0;top:50%;height:40px;transform:translateY(-50%)}
a.selo:hover{text-decoration:none;filter:brightness(1.2)}
/* 3 · linha de lista com a ação à direita */
.linhas{list-style:none;margin:0;padding:0}
.linhas > li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:12px 0;
  border-bottom:1px solid var(--linha)}
.linhas > li:first-child{padding-top:2px}
.linhas > li:last-child{border-bottom:0;padding-bottom:0}
.linha-texto{flex:1 1 240px;min-width:0}
.linha-texto b{display:block;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.linha-texto p{margin:3px 0 0;font-size:12.5px;color:var(--texto-2);overflow-wrap:anywhere}
.linha-acao{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 0 auto}
.linha-acao .botao,.linha-acao > a{min-height:40px}
.linha-acao > a:not(.botao){display:inline-flex;align-items:center}
/* 4 · cartão de número */
.cartao-numero{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 16px 12px;min-width:0}
.cartao-numero .rot{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3)}
.cartao-numero .val{margin-top:6px;font-size:26px;font-weight:800;letter-spacing:-.02em;
  line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cartao-numero .compara{margin-top:6px;font-size:12px;color:var(--texto-2)}
.cartao-numero .lido{margin-top:4px;font-size:11.5px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.cartao-numero.parcial{border-style:dashed}
/* 5 · tabela */
.tabela{width:100%;border-collapse:collapse;background:var(--cartao);font-size:13px;
  font-variant-numeric:tabular-nums}
.tabela th,.tabela td{padding:10px 12px;text-align:left;white-space:nowrap;vertical-align:middle;
  border-bottom:1px solid var(--linha)}
.tabela th.num,.tabela td.num{text-align:right}
.tabela td.quebra{white-space:normal}
.tabela thead th{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto-3);background:var(--painel)}
.tabela tbody tr:last-child td{border-bottom:0}
/* a 1ª coluna fica presa: a tabela rola de lado e o nome da linha não some */
.tabela th:first-child,.tabela td:first-child{position:sticky;left:0;z-index:1}
.tabela td:first-child{background:var(--cartao)}
.tabela tbody tr:hover td{background:var(--cartao-2)}
/* 6 · a tabela vira cartão abaixo de 760 px */
@media(max-width:760px){
  .rolagem:has(> .tabela.vira-cartao){overflow:visible;border:0;border-radius:0}
  .tabela.vira-cartao,.tabela.vira-cartao tbody{display:block;background:none}
  .tabela.vira-cartao thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabela.vira-cartao tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;
    margin:0 0 10px;padding:12px 16px 14px;background:var(--cartao);border:1px solid var(--linha);
    border-radius:var(--raio)}
  .tabela.vira-cartao td{display:block;min-width:0;padding:0;border:0;white-space:normal;
    text-align:left;position:static;background:none}
  .tabela.vira-cartao td:first-child,.tabela.vira-cartao td.largo{grid-column:1/-1}
  .tabela.vira-cartao td[data-rot]::before{content:attr(data-rot);display:block;margin-bottom:2px;
    font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3)}
  .tabela.vira-cartao tbody tr:hover td{background:none}
  .tabela.vira-cartao .selo{white-space:normal}
  .tabela.vira-cartao a:not(.selo),.tabela.vira-cartao summary{display:inline-flex;align-items:center;
    min-height:40px}
}

/* ================================== a moldura (13/10/2026, obra 4) */
.marca-simbolo{width:26px;height:26px;vertical-align:-8px;margin-right:6px}
/* (16/10/2026) o pé preso da lateral (13/10) saiu junto com a lateral: na
   barra de cima "Minha conta" e "Sair" estão sempre à vista */
@media(min-width:901px){
  .lateral-nav a{min-height:40px}
}
/* "Diretoria · Minha conta" é link: 40 px de alvo também no menu do celular */
a.lateral-quem-texto{min-height:40px;padding:4px 0}
/* "← Carteira", a primeira linha das áreas do cliente */
.lateral-nav a.lateral-voltar{color:var(--texto-3)}
.lateral-nav a.lateral-voltar:hover{color:var(--texto)}
@media(max-width:900px){.lateral-nav a.lateral-voltar{display:none}}   /* lá, a seta de voltar */

/* a Carteira (13/10/2026, obra 4): abre direto na tabela */
.carteira-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;
  flex-wrap:wrap;margin-bottom:16px}
.carteira-topo h1{margin:0 0 4px}
.carteira-topo .sub{margin:0}
.carteira-acoes{display:flex;gap:8px;flex-wrap:wrap}
.carteira-acoes .botao{min-height:40px}
/* os selos numa linha própria embaixo do nome (a 1ª coluna quebra a linha) */
.carteira-cliente{min-width:150px}
.carteira-selos{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.busca{max-width:340px;margin:0 0 14px}
.busca input{min-height:40px}