/* conta.css — telas da conta (entrar.html e app.html).
   Mesma paleta e mesmas fontes da página de vendas, para a pessoa não sentir que mudou
   de site. Preto, branco e cinza, com o verde só como destaque (16/10/2026): ações em
   branco (escuro) ou preto (claro), seleções em cinza, e verde para o que é bom (pago,
   recebido, liberado, dias de teste, o que entra). Celular primeiro.
   DOIS TEMAS: escuro (o padrão, igual à página de vendas) e claro, que a pessoa escolhe em
   Configurações > Aparência. Toda cor mora numa variável aqui em cima; o tema claro, no
   fim do bloco, só troca as variáveis. Cor nova? Crie a variável nos dois temas. */
:root{
  --bg:#0a0a0a; --bg-out:#050505; --surface:#141414; --surface-2:#1a1a1a; --line:#262626; --line-2:#363636;
  --fg:#f5f5f5; --muted:#a3a3a3; --muted-2:#7a7a7a;
  --green:#1f9d55; --green-2:#2fb36a; --green-3:#5fd391; --green-deep:#13261b;
  --acento:#f5f5f5; --acento-hover:#ffffff; --acento-texto:#0a0a0a;
  --selecao-bg:rgba(255,255,255,.08); --foco:#f5f5f5; --anel-foco:rgba(255,255,255,.14);
  --erro:#f08a7e; --white:#fff; --perigo:#c4473b;
  --brilho:rgba(255,255,255,.035); --lateral-bg:#0d0d0d; --hover:rgba(255,255,255,.05);
  --campo-bg:#0f0f0f; --campo-ro-bg:#0c0c0c; --placeholder:#666666;
  --chip-bg:rgba(20,20,20,.8); --barra-topo:rgba(10,10,10,.88);
  --aviso-erro-bg:rgba(208,87,74,.12); --aviso-erro-borda:rgba(208,87,74,.4); --aviso-erro-texto:#ffc9c1;
  --aviso-ok-bg:rgba(47,179,106,.12); --aviso-ok-borda:rgba(47,179,106,.4); --aviso-ok-texto:#c8f0d8;
  --demo-bg:#2b2410; --demo-borda:#4a3d16; --demo-texto:#f1d58a; --demo-forte:#ffe7a3; --demo-tracejado:#a88a3a;
  --sombra-cartao:0 30px 70px rgba(0,0,0,.45); --sombra-gaveta:20px 0 60px rgba(0,0,0,.5);
  --display:"Montserrat","Arial Black",Arial,sans-serif;
  --body:"Manrope","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
/* ---------- tema claro: fundo branco, texto preto, cinzas neutros e o verde de destaque ---------- */
[data-tema="claro"]{
  --bg:#ffffff; --bg-out:#f5f5f5; --surface:#ffffff; --surface-2:#ffffff; --line:#e5e5e5; --line-2:#d4d4d4;
  --fg:#0a0a0a; --muted:#525252; --muted-2:#737373;
  --green:#1f8a4c; --green-2:#1f8a4c; --green-3:#157a3f; --green-deep:#e8f5ec;
  --acento:#0a0a0a; --acento-hover:#262626; --acento-texto:#ffffff;
  --selecao-bg:rgba(0,0,0,.06); --foco:#0a0a0a; --anel-foco:rgba(0,0,0,.12);
  --erro:#c23b2e; --perigo:#c23b2e;
  --brilho:rgba(0,0,0,0); --lateral-bg:#ffffff; --hover:rgba(0,0,0,.04);
  --campo-bg:#ffffff; --campo-ro-bg:#f5f5f5; --placeholder:#a3a3a3;
  --chip-bg:#ffffff; --barra-topo:rgba(255,255,255,.9);
  --aviso-erro-bg:#fdeeec; --aviso-erro-borda:#f2c4be; --aviso-erro-texto:#8e2a20;
  --aviso-ok-bg:#ecf7f0; --aviso-ok-borda:#bfe3cd; --aviso-ok-texto:#1d5c36;
  --demo-bg:#fff7e1; --demo-borda:#efd9a0; --demo-texto:#6f5200; --demo-forte:#4d3900; --demo-tracejado:#c9a64a;
  --sombra-cartao:0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.07); --sombra-gaveta:12px 0 40px rgba(0,0,0,.18);
  color-scheme:light;
}
/* a logo tem um "F" branco: no tema claro entra a versão com o "F" escuro */
.logo-claro{display:none !important}
[data-tema="claro"] .logo-escuro{display:none !important}
[data-tema="claro"] .logo-claro{display:block !important}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; min-height:100dvh; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.55}
body::before{content:""; position:fixed; inset:0 0 auto; height:420px; pointer-events:none; background:radial-gradient(60% 70% at 50% 0%, var(--brilho), transparent 70%)}
a{color:var(--fg)}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--foco); outline-offset:3px}

/* aviso do modo demonstração */
.demo{position:relative; z-index:1; margin:0; padding:10px 16px; background:var(--demo-bg); border-bottom:1px solid var(--demo-borda); color:var(--demo-texto); font-size:.86rem; text-align:center}
.demo b{color:var(--demo-forte)}

/* topo com a marca */
.topo{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1040px; margin:0 auto; padding:18px max(16px, env(safe-area-inset-left,0px))}
.marca{display:inline-flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-family:var(--display); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.92rem}
.marca img{width:34px; height:auto}
.marca b{color:var(--green-2)}
.voltar{display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--muted); font-size:.9rem; font-weight:600; text-decoration:none}
.voltar:hover{color:var(--fg)}
.voltar{white-space:nowrap}
@media (max-width:479px){ .voltar .longo{display:none} }
/* nos celulares mais estreitos (320 a 359 px) o nome encolhe para caber ao lado do botão */
@media (max-width:359px){ .marca{font-size:.8rem; gap:8px} .marca img{width:28px} }

/* cartão central das telas de entrada */
.palco{position:relative; z-index:1; display:grid; place-items:start center; padding:8px 16px 48px}
/* overflow-wrap:anywhere: um e-mail enorme no texto quebra em vez de alargar o cartão */
.cartao{width:100%; max-width:430px; overflow-wrap:anywhere; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line-2); border-radius:20px; padding:28px 24px; box-shadow:var(--sombra-cartao)}
@media (max-width:420px){ .cartao{padding:24px 18px} }
.cartao h1{margin:0; font-family:var(--display); font-weight:800; font-size:1.55rem; line-height:1.15; letter-spacing:-.01em}
.sub{margin:8px 0 0; color:var(--muted); font-size:.95rem}
.sub b{color:var(--fg)}

.btn{display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:10px; width:100%; min-height:50px; padding:12px 18px; border-radius:12px; border:1px solid transparent; font:700 1rem/1.2 var(--body); cursor:pointer; text-decoration:none; transition:transform .15s var(--ease), background .2s, border-color .2s, opacity .2s}
.btn:active{transform:scale(.98)}
.btn-primario{background:var(--acento); color:var(--acento-texto); box-shadow:none}
.btn-primario:hover{background:var(--acento-hover)}
.btn-google{background:var(--white); color:#1f1f1f; border-color:#dadce0}
.btn-google:hover{background:#f3f4f4}
.btn-claro{background:transparent; color:var(--fg); border-color:var(--line-2)}
.btn-claro:hover{border-color:var(--fg)}
.btn[disabled]{opacity:.6; cursor:progress}
.btn .gira{width:18px; height:18px; border-radius:50%; border:2px solid rgba(128,128,128,.35); border-top-color:currentColor; animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.ou-google{margin-top:22px}
.cartao > section > .aviso{margin-top:16px}
.ou{display:flex; align-items:center; gap:12px; margin:18px 0 0; color:var(--muted-2); font-size:.82rem}
.ou + form{margin-top:14px}
.ou::before, .ou::after{content:""; flex:1; height:1px; background:var(--line)}

form{display:grid; gap:14px; margin-top:20px}
.campo{display:grid; gap:6px}
.campo label{font-size:.88rem; font-weight:700}
.campo input{width:100%; min-height:48px; padding:12px 14px; border-radius:12px; border:1px solid var(--line-2); background:var(--campo-bg); color:var(--fg); font:500 1rem/1.3 var(--body); transition:border-color .2s, box-shadow .2s}
.campo input::placeholder{color:var(--placeholder)}
.campo input:focus{outline:none; border-color:var(--fg); box-shadow:0 0 0 3px var(--anel-foco)}
.campo input[aria-invalid="true"]{border-color:var(--erro)}
.campo .dica{font-size:.8rem; color:var(--muted-2)}
.campo .erro{font-size:.82rem; color:var(--erro)}
.senha{position:relative}
.senha input{padding-right:84px}
.senha button{position:absolute; right:6px; top:50%; transform:translateY(-50%); min-height:36px; padding:6px 10px; border:0; border-radius:8px; background:transparent; color:var(--fg); font:700 .82rem/1 var(--body); cursor:pointer}
.aviso{margin:0; padding:12px 14px; border-radius:12px; font-size:.9rem}
.aviso.erro{background:var(--aviso-erro-bg); border:1px solid var(--aviso-erro-borda); color:var(--aviso-erro-texto)}
.aviso.ok{background:var(--aviso-ok-bg); border:1px solid var(--aviso-ok-borda); color:var(--aviso-ok-texto)}
.miudo{margin:14px 0 0; color:var(--muted-2); font-size:.82rem; text-align:center}
.troca{margin:20px 0 0; text-align:center; font-size:.92rem; color:var(--muted)}
.troca a, .link{color:var(--fg); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.troca a:hover, .link:hover{text-decoration:underline; text-underline-offset:3px}
.link-linha{display:flex; justify-content:flex-end; margin-top:-4px}
.link-linha a{display:inline-flex; align-items:center; min-height:44px; font-size:.86rem}
.btn-demo{margin-top:20px; background:var(--demo-bg); border:1px dashed var(--demo-tracejado); color:var(--demo-texto)}
.btn-demo:hover{border-style:solid}
.reenvio{display:grid; gap:12px; margin-top:20px}
.btn[disabled].btn-claro{cursor:default}
.icone-ok{display:grid; place-items:center; width:56px; height:56px; margin-bottom:16px; border-radius:50%; background:rgba(47,179,106,.15); color:var(--green-3)}

/* ---------- área do cliente ---------- */
.area{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:8px 16px 56px}
.ola h1{margin:0; overflow-wrap:anywhere; font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,4.6vw,2.2rem); line-height:1.15}
.ola p{margin:8px 0 0; color:var(--muted)}
#conteudo > .aviso, .vista > .aviso{margin-top:16px}
/* selo do teste grátis, no canto superior direito da Página inicial */
.inicio-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.inicio-topo .ola{min-width:0}
.teste-chip{flex:none; display:inline-flex; align-items:center; gap:10px; margin-top:4px; padding:5px 14px 5px 5px; border-radius:999px; border:1px solid var(--line-2); background:var(--chip-bg); color:var(--fg); text-decoration:none; transition:border-color .2s}
.teste-chip:hover{border-color:var(--fg)}
.anel{position:relative; flex:none; width:36px; height:36px}
.anel svg{display:block; width:100%; height:100%; transform:rotate(-90deg)}
.anel circle{fill:none; stroke-width:3}
.anel-fundo{stroke:var(--line)}
.anel-progresso{stroke:var(--green-2); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0; transition:stroke-dashoffset .6s var(--ease)}
.anel b{position:absolute; inset:0; display:grid; place-items:center; color:var(--green-3); font:800 .8rem/1 var(--display)}
.chip-texto{display:grid; line-height:1.25}
.chip-texto b{font-size:.84rem}
.chip-texto span{color:var(--muted); font-size:.74rem; white-space:nowrap}
.teste-chip.fim .anel-progresso{stroke:var(--erro)}
.teste-chip.fim .anel b{color:var(--erro)}
/* celular: o selo fica no alto, à direita, e o "Olá" logo abaixo */
@media (max-width:599px){ .inicio-topo{flex-direction:column-reverse; align-items:stretch; gap:14px} .teste-chip{align-self:flex-end; margin-top:0} }
.teste-barra{height:6px; margin-top:12px; border-radius:999px; background:var(--line); overflow:hidden}
.teste-barra i{display:block; height:100%; border-radius:999px; background:var(--green-2)}
.completar{margin-top:16px; padding:18px 20px; border-radius:16px; border:1px dashed var(--line-2); background:var(--selecao-bg)}
.completar h2{margin:0; font-size:1.02rem}
.completar p{margin:6px 0 0; color:var(--muted); font-size:.9rem}
.completar form{grid-template-columns:1fr; margin-top:12px}
@media (min-width:620px){ .completar form{grid-template-columns:1fr auto; align-items:end} .completar .btn{width:auto} }
.blocos{display:grid; gap:14px; margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.bloco{min-width:0; padding:20px; border-radius:16px; border:1px solid var(--line); background:var(--surface); display:grid; gap:8px; align-content:start}
.bloco.chefe{border-color:var(--muted-2); background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.bloco h3{margin:0; font-size:1.02rem}
.bloco p{margin:0; color:var(--muted); font-size:.9rem}
.selo{justify-self:start; padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.bloco.chefe .selo:first-child{border-color:var(--fg); color:var(--fg)}
.rodape{margin-top:28px; color:var(--muted-2); font-size:.86rem; overflow-wrap:anywhere}
.sair{min-height:44px; padding:8px 14px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--fg); font:700 .88rem/1 var(--body); cursor:pointer}
.sair:hover{border-color:var(--fg)}
.carregando{display:grid; place-items:center; min-height:50vh; color:var(--muted)}

/* ---------- painel da área do cliente: coluna de páginas + conteúdo ---------- */
/* computador (900 px ou mais): a coluna fica fixa à esquerda, com a página ao lado.
   celular: a coluna vira gaveta, aberta pelo botão da barra do topo */
.painel{position:relative; z-index:1; display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; min-height:100dvh}
.lateral{position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; gap:6px; padding:18px 14px 16px; background:var(--lateral-bg); border-right:1px solid var(--line); overflow-y:auto}
.lateral-topo{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 6px 18px}
.lateral .marca, .topo-movel .marca{font-size:.86rem; gap:9px}
.lateral .marca img, .topo-movel .marca img{width:30px}
.menu-titulo{margin:6px 0 6px; padding:0 12px; color:var(--muted-2); font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase}
.menu-paginas{display:grid; gap:4px; margin:0; padding:0; list-style:none}
.menu-item{display:flex; align-items:center; gap:11px; width:100%; min-height:44px; padding:0 12px; border:0; border-radius:10px; background:transparent; color:var(--muted); font:600 .93rem/1.2 var(--body); text-align:left; text-decoration:none; cursor:pointer; transition:background .15s, color .15s}
.menu-item svg{flex:none; opacity:.85}
.menu-item:hover{background:var(--hover); color:var(--fg)}
.menu-item[aria-current="page"]{background:var(--selecao-bg); color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-2)}
.menu-item[aria-current="page"] svg{color:var(--fg); opacity:1}
/* a página exclusiva de ADM (Clientes da Comunidade): borda dourada e selo "ADM", para quem é
   administrador saber de relance que ela é só dele (16/10/2026). Dourado, não verde: o verde é
   "positivo" no sistema */
:root{ --adm:#d4a63a; --adm-texto:#e5c07b; --adm-selo:#3a2e12; --adm-aberta:#2a2312; }
[data-tema="claro"]{ --adm:#c9971f; --adm-texto:#8a6410; --adm-selo:#fbf1d9; --adm-aberta:#fdf6e3; }
.menu-adm{margin-top:6px; box-shadow:inset 0 0 0 1.5px var(--adm); color:var(--adm-texto)}
.menu-adm:hover{background:var(--adm-aberta); color:var(--adm-texto)}
.menu-adm-nome{flex:1; min-width:0}
.menu-adm[aria-current="page"]{background:var(--adm-aberta); color:var(--fg); box-shadow:inset 0 0 0 1.5px var(--adm)}
.menu-adm[aria-current="page"] svg{color:var(--adm-texto)}
.selo-adm{flex:none; padding:2px 7px; border-radius:999px; background:var(--adm-selo); color:var(--adm-texto); font:800 .66rem/1.3 var(--body); letter-spacing:.04em}
.selo-adm-titulo{display:inline-block; margin-left:6px; padding:3px 9px; border:1px solid var(--adm); background:transparent; font-size:.72rem; vertical-align:middle; letter-spacing:0}
.lateral-pe{margin-top:auto; display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--line)}
.usuario{display:flex; align-items:center; gap:10px; min-width:0; padding:6px 4px 0 8px}
.avatar{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--line-2); color:var(--fg); font:800 .9rem/1 var(--display)}
.quem{display:grid; min-width:0; line-height:1.3}
.quem b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem}
.quem span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-2); font-size:.78rem}
.icone-btn{flex:none; display:inline-grid; place-items:center; width:40px; height:40px; margin-left:auto; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer}
.icone-btn:hover{border-color:var(--line-2); color:var(--fg)}
.topo-movel{display:none}
.lateral .lateral-fechar{display:none}
.selos{display:flex; flex-wrap:wrap; gap:6px}
.lateral-fundo{display:none}
.painel .area{width:100%; max-width:1120px; margin:0 auto; padding:36px clamp(16px,4vw,48px) 56px}
.painel .demo{margin:0 0 20px; border:1px solid var(--demo-borda); border-radius:12px}
/* blocos sem sobrar um sozinho na última linha: 1 coluna no celular, 2 até 1199 px, 4 daí em diante */
.painel .blocos{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .painel .blocos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1200px){ .painel .blocos{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* foto no círculo (coluna, barra do topo e Configurações): corta para caber, sem distorcer */
.avatar img, .foto-circulo img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.avatar{overflow:hidden}

/* ---------- Dashboard ---------- */
.indicadores{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px}
@media (min-width:1200px){ .indicadores{grid-template-columns:repeat(4,minmax(0,1fr))} }
.indicador{display:grid; gap:4px; min-width:0; padding:16px 18px; border-radius:14px; border:1px solid var(--line); background:var(--surface)}
.indicador-nome{color:var(--muted); font-size:.84rem; font-weight:600}
.indicador-valor{font:800 1.6rem/1.2 var(--display); color:var(--fg)}
.indicador-nota{color:var(--muted-2); font-size:.76rem}
.dash-vazio{display:grid; justify-items:center; gap:8px; margin-top:16px; padding:36px 24px; border-radius:16px; border:1px dashed var(--line-2); text-align:center}
.dash-vazio-icone{display:grid; place-items:center; width:52px; height:52px; margin-bottom:4px; border-radius:50%; background:var(--selecao-bg); color:var(--fg)}
.dash-vazio h2{margin:0; font-size:1.05rem}
.dash-vazio p{max-width:46ch; margin:0; color:var(--muted); font-size:.9rem}


/* ---------- Dashboard: gráficos ----------
   Cores das séries validadas (daltonismo e contraste) nos dois temas: verde = entra,
   azul = sai. Texto nunca usa a cor da série: a identidade vem da chave ao lado. */
/* gráfico: entradas em verde forte, saídas em vermelho forte (Matheus, 16/10/2026) */
:root{ --serie-entra:#22c55e; --serie-sai:#ff3b30; --status-bom:#22c55e; --status-ruim:#ff3b30; --grade:#232323; }
[data-tema="claro"]{ --serie-entra:#16a34a; --serie-sai:#dc2626; --status-bom:#16a34a; --status-ruim:#dc2626; --grade:#efefef; }
.dash-topo{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px}
.selo-exemplo{padding:4px 10px; border-radius:999px; border:1px dashed var(--demo-tracejado); background:var(--demo-bg); color:var(--demo-texto); font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.indicadores{margin-top:14px}
.indicador{position:relative}
/* no celular os quatro números dividem a tela em dois: o valor encolhe para caber numa linha */
.indicadores .indicador-valor{font-size:clamp(1.05rem, 4.4vw, 1.6rem); white-space:nowrap}
@media (min-width:600px){ .indicadores .indicador-valor{font-size:1.6rem} }
.indicador-delta{display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.78rem}
.indicador-delta svg{fill:currentColor}
.indicador-delta.bom svg{color:var(--status-bom)}
.indicador-delta.ruim svg{color:var(--status-ruim)}
.mini-linha{width:100%; height:30px; margin-top:6px}
.mini-traco{fill:none; stroke:var(--muted-2); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; opacity:.6}
.mini-ponto{fill:var(--serie-entra); stroke:var(--surface); stroke-width:2}
.grafico-cartao{min-width:0; margin-top:14px; padding:18px 18px 12px; border-radius:16px; border:1px solid var(--line); background:var(--surface)}
[data-tema="claro"] .grafico-cartao{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05)}
.grafico-cabeca{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.grafico-cabeca h2{margin:0; font-size:1rem}
.grafico-cabeca p{margin:3px 0 0; color:var(--muted-2); font-size:.82rem}
.legenda{display:flex; gap:14px; color:var(--muted); font-size:.82rem}
.legenda span{display:inline-flex; align-items:center; gap:6px}
.chave{display:inline-block; width:10px; height:10px; border-radius:3px}
.chave.entra{background:var(--serie-entra)}
.chave.sai{background:var(--serie-sai)}
.grafico{margin-top:10px; min-width:0}
.grafico svg{display:block; width:100%; height:auto; overflow:visible}
.grafico .grade{stroke:var(--grade); stroke-width:1}
.grafico .base{stroke:var(--line-2); stroke-width:1}
.grafico .eixo{fill:var(--muted-2); font:600 11px var(--body); font-variant-numeric:tabular-nums}
.grafico .rotulo{fill:var(--fg); font:700 12px var(--body)}
/* ondas: linha de 2 px e, embaixo, a cor da série em degradê bem leve */
.grafico .onda-linha{fill:none; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round}
.grafico .onda-linha.entra{stroke:var(--serie-entra)}
.grafico .onda-linha.sai{stroke:var(--serie-sai)}
.grafico .onda-topo.entra, .grafico .onda-base.entra{stop-color:var(--serie-entra)}
.grafico .onda-topo.sai, .grafico .onda-base.sai{stop-color:var(--serie-sai)}
.grafico .onda-topo{stop-opacity:.16}
.grafico .onda-base{stop-opacity:0}
[data-tema="claro"] .grafico .onda-topo{stop-opacity:.12}
.grafico .alvo{fill:transparent}
.grafico .ponto{stroke:var(--surface); stroke-width:2}
.grafico .ponto.entra{fill:var(--serie-entra)}
.grafico .ponto.sai{fill:var(--serie-sai)}
.grafico .guia{stroke:var(--line-2); stroke-width:1}
.graficos-dupla{display:grid; grid-template-columns:minmax(0,1fr); gap:0 14px}
@media (min-width:1100px){ .graficos-dupla{grid-template-columns:repeat(2,minmax(0,1fr))} }
.barras-h{display:grid; gap:12px; margin-top:16px; padding-bottom:6px}
.barra-linha{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nome valor" "trilho trilho"; gap:5px 10px; align-items:center}
.barra-nome{grid-area:nome; min-width:0; font-size:.86rem; font-weight:600; line-height:1.3}   /* nome longo quebra a linha; nunca é cortado */
.barra-valor{grid-area:valor; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.barra-trilho{grid-area:trilho; display:block; height:10px}
.barra-trilho i{display:block; height:100%; border-radius:0 4px 4px 0; background:var(--serie-sai)}
.ver-tabela{margin-top:6px}
.ver-tabela summary{display:inline-flex; min-height:36px; align-items:center; color:var(--fg); font-size:.84rem; font-weight:700; cursor:pointer}
.ver-tabela table{width:100%; margin:4px 0 8px; border-collapse:collapse; font-size:.84rem; font-variant-numeric:tabular-nums}
.ver-tabela th, .ver-tabela td{padding:7px 8px; border-bottom:1px solid var(--line); text-align:right}
.ver-tabela th:first-child, .ver-tabela td:first-child{text-align:left}
.ver-tabela th{color:var(--muted); font-weight:700}
.dash-nota{margin:16px 0 0; color:var(--muted-2); font-size:.8rem}
.dash-dica{position:fixed; z-index:65; display:grid; gap:3px; padding:9px 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--fg); font-size:.8rem; box-shadow:0 10px 30px rgba(0,0,0,.35); pointer-events:none}
[data-tema="claro"] .dash-dica{box-shadow:0 10px 30px rgba(0,0,0,.15)}
.dash-dica b{text-transform:capitalize}
.dash-dica span{display:flex; align-items:center; gap:6px; color:var(--muted)}


/* ---------- Despesas ---------- */
:root{ --status-pago:#2fb36a; --status-apagar:#e3a008; }
[data-tema="claro"]{ --status-pago:#1f8a4c; --status-apagar:#b7791f; }
.pagina-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.btn-nova{width:auto; min-height:46px; padding:0 18px; flex:none}
.desp-barra{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px}
.desp-resumo{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px}
.resumo-item{display:grid; gap:4px; min-width:0; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface)}
.resumo-item span{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.8rem; font-weight:600}
.resumo-item b{font:800 clamp(1rem,3.8vw,1.3rem)/1.2 var(--display); overflow-wrap:anywhere}   /* valor enorme quebra depois do R$; nunca é cortado */
.status-ponto{display:inline-block; width:8px; height:8px; border-radius:50%; flex:none}
.status-ponto.pago{background:var(--status-pago)}
.status-ponto.apagar{background:var(--status-apagar)}
.chips{display:flex; gap:8px; margin-top:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--muted); font:600 .84rem/1 var(--body); cursor:pointer; white-space:nowrap}
.chip[aria-pressed="true"]{border-color:var(--fg); background:var(--selecao-bg); color:var(--fg)}
.desp-lista{margin-top:12px; border-radius:16px; border:1px solid var(--line); background:var(--surface); overflow:hidden}
[data-tema="claro"] .desp-lista, [data-tema="claro"] .resumo-item{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05)}
.so-leitor{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.desp-tabela{width:100%; border-collapse:collapse; table-layout:fixed}
.desp-tabela th{padding:12px 18px; color:var(--muted-2); font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:left; border-bottom:1px solid var(--line)}
.desp-tabela th:nth-child(1){width:76px} .desp-tabela th:nth-child(4){width:150px} .desp-tabela th:nth-child(5){width:130px} .desp-tabela th:nth-child(6){width:124px}
.desp-tabela td{padding:12px 18px; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:middle}
.desp-tabela tr:last-child td{border-bottom:0}
.desp-linha{cursor:pointer}
.desp-linha:hover td{background:var(--hover)}
.desp-tabela .num{text-align:right}
.num{text-align:right; font-variant-numeric:tabular-nums}
.c-data{color:var(--muted); font-variant-numeric:tabular-nums}
.c-desc{min-width:0}
.desp-abrir{display:block; max-width:100%; padding:0; border:0; background:none; color:var(--fg); font:700 .92rem/1.35 var(--body); text-align:left; overflow-wrap:anywhere; cursor:pointer}
.desp-abrir:focus-visible, .status-btn:focus-visible{outline:2px solid var(--foco); outline-offset:3px; border-radius:6px}
.c-tipo{color:var(--muted); font-size:.84rem}
.tipo-fixa{display:inline-flex; align-items:center; gap:6px; color:var(--fg)}
.tipo-fixa svg{color:var(--muted); flex:none}
.c-valor{font-weight:700}
.tag{display:inline-block; max-width:100%; padding:3px 9px; border-radius:10px; background:var(--hover); color:var(--muted); font-size:.76rem; font-weight:600; line-height:1.35; vertical-align:middle}   /* nome longo quebra a linha; nunca é cortado */
.tag-repete{display:none}
.status-btn{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 10px; margin:-6px -10px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font:600 .82rem/1 var(--body); cursor:pointer}
.status-btn:hover{border-color:var(--line-2); color:var(--fg)}
.desp-vazio{display:grid; gap:4px; padding:34px 18px; text-align:center}
.desp-vazio b{font-size:.95rem}
.desp-vazio span{color:var(--muted-2); font-size:.86rem}
.vista > .aviso.lanc-erro{margin-top:12px}
/* entradas sem canais de venda: o caminho para Configurações */
.sem-canais{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; padding:14px 16px; border-radius:14px; border:1px dashed var(--line-2); background:var(--selecao-bg)}
.sem-canais p{margin:0; color:var(--muted); font-size:.9rem}
.sem-canais b{color:var(--fg)}
.sem-canais .btn-mini{display:inline-flex; align-items:center; text-decoration:none}
.barras-h.entra .barra-trilho i{background:var(--serie-entra)}
/* fim da avaliação grátis: a faixa no alto, a janela e o "só para ver" */
.aviso-fim{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin:0 0 20px; padding:12px 14px; border-radius:12px; border:1px solid var(--status-apagar); background:var(--surface); color:var(--muted); font-size:.9rem}
.aviso-fim b{color:var(--fg)}
.aviso-fim span{min-width:0; flex:1 1 260px}
.aviso-fim .btn-mini{display:inline-flex; align-items:center; gap:7px; text-decoration:none; flex:none}
.fim-cartao{max-width:440px; text-align:center}
.fim-icone{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 14px; border-radius:16px; background:var(--selecao-bg); color:var(--fg)}
[data-tema="claro"] .fim-icone{color:var(--fg)}
.escolha-cartao.fim-cartao h2{font-size:1.25rem}
.fim-nota{margin:10px 0 0; color:var(--muted-2); font-size:.84rem}
.fim-cartao .btn{margin-top:18px}
.fim-cartao .btn + .btn{margin-top:10px}
.so-ver .desp-form-acoes{grid-template-columns:minmax(0,1fr)}
.btn-nova[disabled]{cursor:not-allowed; box-shadow:none}
.status-btn[disabled]{cursor:default}
.status-btn[disabled]:hover{border-color:transparent; color:var(--muted)}
/* os canais na janela de entrada: sempre à mostra, para marcar */
.l-canais{margin-top:4px}
.canais.l-canais{grid-template-columns:repeat(2,minmax(0,1fr))}   /* na janela, duas colunas: o nome do canal cabe sem quebrar no meio */
.l-canais .canal b{overflow-wrap:break-word}
.canal-todos{grid-column:1 / -1}
.canal-todos > span{font-weight:700}
.l-canais .canal input:checked + span::after{content:""; flex:none; width:16px; height:16px; margin-left:auto; border-radius:50%; background:var(--green-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
@media (min-width:1100px){ .c-cat .tag{margin:2px 4px 2px 0} }   /* várias etiquetas na célula: espaço entre elas */
/* confirmação curta, embaixo, que some sozinha */
.desp-feito{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:60; max-width:calc(100vw - 32px); margin:0; padding:10px 16px; border-radius:12px; border:1px solid var(--aviso-ok-borda); background:var(--surface); color:var(--fg); font-size:.88rem; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0; transform:translate(-50%,12px); transition:opacity .2s, transform .2s var(--ease); pointer-events:none}
[data-tema="claro"] .desp-feito{box-shadow:0 10px 30px rgba(0,0,0,.15)}
.desp-feito.visivel{opacity:1; transform:translate(-50%,0)}
.selo-mini{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; border:1px dashed var(--demo-tracejado); background:var(--demo-bg); color:var(--demo-texto); font:700 .64rem/1.5 var(--body); letter-spacing:.04em; text-transform:uppercase; vertical-align:2px}
.grafico-vazio{margin:18px 0 8px; color:var(--muted-2); font-size:.88rem}
/* celular e telas médias: cada despesa vira um cartão de duas linhas */
@media (max-width:1099px){
  .desp-tabela thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .desp-tabela, .desp-tabela tbody{display:block}
  .desp-linha{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"desc valor" "meta status"; gap:8px 12px; padding:14px 16px; border-bottom:1px solid var(--line)}
  .desp-linha:last-child{border-bottom:0}
  .desp-linha:hover{background:var(--hover)}
  .desp-linha:hover td{background:none}
  .desp-tabela td{display:block; padding:0; border:0}
  .c-desc{grid-area:desc}
  .c-valor{grid-area:valor}
  .c-status{grid-area:status; justify-self:end; align-self:center}
  .c-cat{grid-area:meta; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
  .c-data, .c-tipo{display:none !important}
  .tag-repete{display:inline-flex; align-items:center; padding:3px 9px; border-radius:10px; border:1px solid var(--line-2); color:var(--muted); font-size:.74rem; font-weight:600; line-height:1.35}
  .tag-repete::before{content:"↻"; margin-right:4px; color:var(--muted)}
}
@media (max-width:599px){
  .desp-resumo{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}   /* total em cima; pagas e a pagar embaixo */
  .desp-resumo .resumo-item:first-child{grid-column:1 / -1}
  .resumo-item{padding:12px}
  .btn-nova{width:100%}
  .desp-barra{justify-content:center}
}
/* janela da despesa (usa a mesma moldura da escolha de aparência) */
.desp-form-cartao{max-width:560px}
.desp-form-cartao .campo{align-content:start}   /* a dica embaixo da data não empurra o campo do lado */
.desp-form-cartao h2{margin-bottom:4px; overflow-wrap:anywhere}
.desp-form-cartao h2:focus{outline:none}
.desp-regra{display:inline-flex; margin:10px 0 0; padding:5px 11px; border-radius:999px; background:var(--selecao-bg); color:var(--fg); font-size:.82rem; font-weight:600}
.campo select{width:100%; min-height:48px; padding:12px 14px; border-radius:12px; border:1px solid var(--line-2); background:var(--campo-bg); color:var(--fg); font:500 1rem/1.3 var(--body)}
.campo select:focus{outline:none; border-color:var(--fg); box-shadow:0 0 0 3px var(--anel-foco)}
.campo-moeda{position:relative}
.campo-moeda span{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:700}
.campo-moeda input{padding-left:44px; font-variant-numeric:tabular-nums}
.rotulo-campo{font-size:.88rem; font-weight:700}
.tipo-escolha{display:flex; width:100%}
.tipo-escolha label{flex:1; position:relative; min-width:0}
.tipo-escolha input{position:absolute; opacity:0; pointer-events:none}
.tipo-escolha span{display:grid; place-items:center; min-height:38px; padding:0 4px; border-radius:8px; color:var(--muted); font:700 .86rem/1.1 var(--body); text-align:center; cursor:pointer}
.tipo-escolha input:checked + span{background:var(--acento); color:var(--acento-texto)}
.tipo-escolha input:focus-visible + span{outline:2px solid var(--foco); outline-offset:2px}
.repete-escolha{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:359px){ .repete-escolha{grid-template-columns:repeat(2,minmax(0,1fr))} }   /* só nos menores: de 360 px para cima cabem os quatro */
.caixa{display:flex; align-items:center; gap:10px; min-height:44px; font-weight:600}
.caixa input{width:20px; height:20px; flex:none; accent-color:var(--fg)}
.desp-form-acoes{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px}
.desp-form-cartao .desp-form-acoes .btn{margin-top:0}
.btn-excluir{justify-self:center; min-height:44px; padding:0 14px; border:0; border-radius:10px; background:transparent; color:var(--erro); font:700 .9rem/1 var(--body); cursor:pointer}
.btn-excluir:hover{background:var(--aviso-erro-bg)}
.btn-perigo{background:var(--perigo); color:var(--white)}
.btn-perigo:hover{filter:brightness(1.08)}
/* o passo "de quais meses?" */
.desp-alcance-texto{margin:8px 0 0; color:var(--muted); font-size:.92rem}
.alcances{display:grid; gap:8px; margin-top:16px}
.alcance{position:relative; display:block; cursor:pointer}
.alcance input{position:absolute; top:18px; left:16px; width:18px; height:18px; margin:0; accent-color:var(--fg)}
.alcance > span{display:grid; gap:3px; padding:13px 14px 13px 46px; border-radius:12px; border:1px solid var(--line-2); background:var(--campo-bg); transition:border-color .2s, background .2s}
.alcance b{font-size:.94rem}
.alcance small{color:var(--muted-2); font-size:.82rem; line-height:1.35}
.alcance input:checked + span{border-color:var(--fg); background:var(--selecao-bg)}
.alcance input:focus-visible + span{outline:2px solid var(--foco); outline-offset:2px}
.passo-alcance .aviso{margin-top:14px}
.passo-alcance .desp-form-acoes{margin-top:18px}


/* ---------- Canais de venda (Configurações) ---------- */
.canais-pergunta{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; font-size:.92rem; font-weight:700}
.canais-pergunta .dica-mini{font-weight:500}
.canais-onde{margin-top:18px}
.canal input{position:absolute; opacity:0; pointer-events:none}
.canal:has(input:focus-visible){outline:2px solid var(--foco); outline-offset:3px}
.canais-grupo{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.canais{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px}
.canal{position:relative; min-width:0; cursor:pointer}
.canal > span{display:flex; align-items:center; gap:9px; min-height:46px; padding:8px 12px; border-radius:12px; border:1px solid var(--line-2); background:var(--campo-bg); color:var(--muted); transition:border-color .2s, background .2s, color .2s}
.canal > span svg{flex:none}
.canal b{font-size:.88rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere}
.canal:hover > span{border-color:var(--fg)}
.canal input:checked + span{border-color:var(--fg); background:var(--selecao-bg); color:var(--fg)}
.canal input:checked + span svg{color:var(--fg)}
.canal-outra{margin-top:10px; max-width:360px}
.fontes{margin-top:18px; padding:14px 16px; border-radius:14px; border:1px dashed var(--line-2)}
.fontes-n{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--fg); color:var(--bg); font-size:.74rem}
.fontes-lista{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none}
.canais-erro{margin:10px 0 0; color:var(--erro); font-size:.84rem; font-weight:600}
.fontes-lista li{display:inline-flex; align-items:center; gap:6px; min-width:0; padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); font-size:.84rem; font-weight:600; overflow-wrap:anywhere}
#fontes-vazio{margin-top:8px}
#canais-ok{margin-top:14px}
@media (max-width:599px){
  .canais{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Configurações ---------- */
.ola h1:focus{outline:none}
.config{display:grid; gap:16px; max-width:760px; margin-top:24px}
.cartao-config{scroll-margin-top:76px; min-width:0; padding:22px 22px 24px; border-radius:16px; border:1px solid var(--line); background:var(--surface)}
[data-tema="claro"] .cartao-config, [data-tema="claro"] .bloco, [data-tema="claro"] .teste-chip, [data-tema="claro"] .indicador{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05)}
.cartao-config h2{margin:0; font-size:1.05rem}
.cartao-sub{margin:6px 0 0; color:var(--muted); font-size:.9rem}
.foto-linha{display:flex; align-items:center; gap:18px; margin-top:18px}
.foto{position:relative; flex:none; width:88px; height:88px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer}
.foto-circulo{display:grid; place-items:center; width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--line-2); color:var(--fg); font:800 2rem/1 var(--display); box-shadow:0 0 0 2px var(--line-2)}
.foto:hover .foto-circulo{box-shadow:0 0 0 2px var(--fg)}
.foto-camera{position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--acento); color:var(--acento-texto); box-shadow:0 0 0 3px var(--surface)}
.foto-acoes{display:grid; gap:6px; min-width:0}
.foto-botoes{display:flex; flex-wrap:wrap; gap:8px}
.btn-mini{min-height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--line-2); background:var(--selecao-bg); color:var(--fg); font:700 .86rem/1 var(--body); cursor:pointer}
.btn-mini.claro{border-color:var(--line-2); background:transparent; color:var(--muted)}
.btn-mini:hover{border-color:var(--fg)}
.btn-mini[disabled]{opacity:.6; cursor:progress}
.dica-mini{margin:0; color:var(--muted-2); font-size:.8rem}
.foto-acoes .erro{margin:0; color:var(--erro); font-size:.82rem}
.config-campos{grid-template-columns:minmax(0,1fr); margin-top:18px}
@media (min-width:600px){ .config-campos{grid-template-columns:repeat(2,minmax(0,1fr))} .config-campos .inteiro{grid-column:1 / -1} }
.campo input[readonly]{color:var(--muted); background:var(--campo-ro-bg); cursor:default}
.config-acao{display:flex; justify-content:flex-start; margin-top:16px}
.config-campos .config-acao{margin-top:2px}
.config-acao .btn{width:auto; min-width:180px}
.config-acao-dupla{flex-wrap:wrap; gap:10px}
.plano-topo{display:flex; align-items:center; justify-content:space-between; gap:12px}
.plano-nome{margin:12px 0 0; font-family:var(--display); font-weight:800; font-size:1.2rem}
.cartao-config .teste-barra{margin-top:10px}
/* Aparência: dois cartões de escolha, cada um com uma miniatura do tema */
.temas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 0; padding:0; border:0}
.tema-opcao{position:relative; display:grid; gap:10px; padding:10px 10px 12px; border-radius:14px; border:1px solid var(--line-2); background:var(--surface); cursor:pointer; transition:border-color .2s, box-shadow .2s}
.tema-opcao:hover{border-color:var(--fg)}
.tema-opcao input{position:absolute; opacity:0; pointer-events:none}
.tema-opcao:has(input:checked){border-color:var(--fg); box-shadow:0 0 0 2px var(--fg)}
.tema-opcao:has(input:focus-visible){outline:2px solid var(--foco); outline-offset:3px}
.tema-nome{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px; font-weight:700; font-size:.92rem}
.tema-check{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2)}
.tema-opcao:has(input:checked) .tema-check{border-color:var(--fg); background:var(--fg); box-shadow:inset 0 0 0 3px var(--surface)}
/* miniatura: coluna + conteúdo, nas cores fixas de cada tema (não mudam com o tema atual) */
.mini{display:grid; grid-template-columns:28% 1fr; height:84px; border-radius:10px; overflow:hidden; border:1px solid rgba(128,128,128,.35)}
.mini i{display:block}
.mini-lateral{padding:8px 6px; display:grid; align-content:start; gap:5px}
.mini-conteudo{padding:9px 9px; display:grid; align-content:start; gap:6px}
.mini b{display:block; height:6px; border-radius:3px}
.mini b.curto{width:55%}
.mini .cartao-mini{display:block; height:22px; border-radius:5px}
.mini.escuro .mini-lateral{background:#0d0d0d}
.mini.escuro .mini-conteudo{background:#0a0a0a}
.mini.escuro b{background:#363636}
.mini.escuro b.ativo{background:#e5e5e5}
.mini.escuro .cartao-mini{background:#1a1a1a; border:1px solid #363636}
.mini.claro .mini-lateral{background:#ffffff; border-right:1px solid #e5e5e5}
.mini.claro .mini-conteudo{background:#ffffff}
.mini.claro b{background:#d4d4d4}
.mini.claro b.ativo{background:#0a0a0a}
.mini.claro .cartao-mini{background:#ffffff; border:1px solid #e5e5e5}
/* janela da primeira escolha: centro no computador, folha de baixo no celular */
.escolha-tema{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:escolhaFundo .25s var(--ease)}
[data-tema="claro"] .escolha-tema{background:rgba(0,0,0,.32)}
.escolha-cartao{width:100%; max-width:520px; max-height:calc(100dvh - 32px); overflow-y:auto; padding:28px 24px 24px; border-radius:20px; border:1px solid var(--line-2); background:var(--surface); box-shadow:0 30px 80px rgba(0,0,0,.45); animation:escolhaCartao .3s var(--ease)}
[data-tema="claro"] .escolha-cartao{box-shadow:0 24px 60px rgba(0,0,0,.18)}
.escolha-logo{width:40px; height:auto; margin-bottom:14px}
.escolha-cartao > .escolha-ola{margin:0 0 6px; color:var(--green-2); font-weight:800; font-size:.95rem}   /* mais forte que o .escolha-cartao > p (cinza) */
.escolha-cartao h2{margin:0; font:800 1.35rem/1.2 var(--display)}
.escolha-cartao > p{margin:8px 0 0; color:var(--muted); font-size:.92rem}
.temas-grandes{margin-top:20px}
.temas-grandes .mini{height:116px}
.escolha-cartao .btn{margin-top:20px}
@keyframes escolhaFundo{from{opacity:0}}
@keyframes escolhaCartao{from{opacity:0; transform:translateY(12px) scale(.98)}}
@media (max-width:599px){
  .escolha-tema{place-items:end stretch; padding:0}
  .escolha-cartao{max-width:none; max-height:92dvh; border-radius:22px 22px 0 0; border-bottom:0; padding:24px 18px calc(20px + env(safe-area-inset-bottom,0px))}
  .temas-grandes .mini{height:96px}
}
.miudo-esq{margin:14px 0 0; color:var(--muted-2); font-size:.82rem}
@media (max-width:599px){ .config-acao .btn{width:100%} }

@media (max-width:899px){
  .painel{grid-template-columns:minmax(0,1fr)}
  .topo-movel{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; padding:10px max(12px, env(safe-area-inset-left,0px)); background:var(--barra-topo); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
  .topo-movel .icone-btn{margin-left:0}
  .topo-movel .avatar{margin-left:auto; width:32px; height:32px}
  .lateral{position:fixed; inset:0 auto 0 0; z-index:50; width:min(86vw,300px); transform:translateX(-102%); visibility:hidden; transition:transform .25s var(--ease), visibility 0s linear .25s; box-shadow:var(--sombra-gaveta)}
  .lateral.aberta{transform:none; visibility:visible; transition:transform .25s var(--ease)}
  .lateral .lateral-fechar{display:inline-grid}
  .lateral-fundo{display:block; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55)}
  .lateral-fundo[hidden]{display:none}
  .painel .area{padding-top:22px}
}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ---------- Clientes (só ADM, 009_adm.sql) ---------- */
.cli-lista{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
.cli-card{display:grid; gap:12px; min-width:0; padding:16px 18px; border-radius:14px; border:1px solid var(--line); background:var(--surface)}
.cli-topo{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px 14px}
.cli-topo > div{display:grid; gap:2px; min-width:0}
.cli-nome{font-size:1rem; overflow-wrap:anywhere}
.cli-email{color:var(--muted); font-size:.86rem; overflow-wrap:anywhere}
.cli-dados{display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--muted); font-size:.86rem}
.cli-dados a{color:var(--fg)}
.tag.tag-liberado{background:var(--green-deep); color:var(--fg)}
.tag.tag-teste{color:var(--fg)}
.tag.tag-sem{color:var(--erro)}
.cli-acao{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.cli-acao input[type="date"]{min-height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--line-2); background:var(--campo-bg); color:var(--fg); font:600 .9rem var(--body)}
.cli-acao input[type="date"]:focus{outline:none; border-color:var(--fg); box-shadow:0 0 0 3px var(--anel-foco)}
.cli-card > .aviso{margin:0}

/* ---------- calendário de mês e ano (Entradas e Despesas, 16/10/2026) ----------
   O mês atual em verde (contorno e texto); o escolhido com o fundo de ação. */
.mes-escolha{position:relative}
.mes-botao{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--fg); font:700 .92rem/1 var(--body); cursor:pointer}
.mes-botao:hover, .mes-botao[aria-expanded="true"]{border-color:var(--fg)}
.mes-botao .mes-seta{color:var(--muted); transition:transform .2s var(--ease)}
.mes-botao[aria-expanded="true"] .mes-seta{transform:rotate(180deg)}
.mes-pop{position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:320px; max-width:calc(100vw - 32px); padding:14px; border-radius:14px; border:1px solid var(--line-2); background:var(--surface); box-shadow:var(--sombra-cartao)}
.mes-pop-titulo{margin:0 0 8px; color:var(--muted); font-size:.8rem; font-weight:700}
.mes-anos{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.mes-ano, .mes-mes{min-height:42px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--fg); font:700 .88rem/1 var(--body); cursor:pointer}
.mes-ano{flex:1 0 58px; padding:0 8px}
.mes-grade{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.mes-ano:hover, .mes-mes:hover{border-color:var(--fg)}
.mes-ano.atual, .mes-mes.atual{border-color:var(--green-2); color:var(--green-3); box-shadow:inset 0 0 0 1px var(--green-2)}
.mes-ano[aria-pressed="true"], .mes-mes[aria-pressed="true"]{background:var(--acento); border-color:var(--acento); color:var(--acento-texto); box-shadow:none}
.mes-mes.atual[aria-pressed="true"], .mes-ano.atual[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--green-2)}
.mes-mes[disabled]{opacity:.35; cursor:default}
.mes-mes[disabled]:hover{border-color:var(--line-2)}
.mes-ano:focus-visible, .mes-mes:focus-visible, .mes-botao:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
.mes-pop-pe{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px}
.mes-legenda{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:.8rem}
.mes-legenda i{width:12px; height:12px; border-radius:4px; border:2px solid var(--green-2)}
/* celular (até 599 px): o calendário ocupa a largura da barra, abaixo do botão.
   Fica depois das regras acima de propósito: a última regra vence */
.dash-filtros{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* ---------- campo de data com o calendário padrão (janela de lançamento, 16/10/2026) ---------- */
.data-botao{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2); background:var(--campo-bg); color:var(--fg); font:600 .95rem/1.2 var(--body); text-align:left; cursor:pointer}
.data-botao .data-texto{flex:1; min-width:0}
.data-botao .mes-seta{color:var(--muted); transition:transform .2s var(--ease)}
.data-botao[aria-expanded="true"] .mes-seta{transform:rotate(180deg)}
.data-botao:hover, .data-botao[aria-expanded="true"]{border-color:var(--fg)}
.data-botao[aria-invalid="true"]{border-color:var(--erro)}
.data-botao[aria-readonly="true"], .data-botao[disabled]{color:var(--muted); background:var(--campo-ro-bg); border-color:var(--line-2); cursor:default}
.data-botao[aria-readonly="true"] .mes-seta, .data-botao[disabled] .mes-seta{display:none}
.data-botao:focus-visible, .data-voltar:focus-visible, .data-dia:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
.data-pop{padding:14px; border-radius:14px; border:1px solid var(--line-2); background:var(--surface-2)}
.data-cabeca{margin-bottom:10px}
.data-voltar{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--fg); font:700 .92rem/1 var(--body); cursor:pointer}
.data-voltar:hover{border-color:var(--fg)}
.data-voltar .mes-seta{color:var(--muted)}
.data-semana, .data-dias{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.data-semana{margin-bottom:6px; color:var(--muted); font-size:.75rem; font-weight:700; text-align:center}
.data-dia{min-width:0; min-height:40px; padding:0; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--fg); font:700 .88rem/1 var(--body); cursor:pointer}
.data-dia:hover{border-color:var(--fg)}
.data-dia.atual{border-color:var(--green-2); color:var(--green-3); box-shadow:inset 0 0 0 1px var(--green-2)}
.data-dia[aria-pressed="true"]{background:var(--acento); border-color:var(--acento); color:var(--acento-texto); box-shadow:none}
.data-dia.atual[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--green-2)}
.data-dia[disabled]{opacity:.3; cursor:default}
.data-dia[disabled]:hover{border-color:var(--line-2)}
/* na página Clientes: a data ao lado de "Liberar até a data" */
.cli-acao .data-botao{width:auto; flex:1 1 210px; min-height:42px}
/* o lançamento que acabou de ser salvo: destaque por alguns segundos (16/10/2026) */
.desp-linha td{transition:background-color .6s var(--ease)}
.desp-linha.recem td{background-color:rgba(47,179,106,.16)}
/* ---------- Política de privacidade e termos de uso (16/10/2026) ---------- */
.opcional{color:var(--muted-2); font-weight:500}
.documento{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:8px max(16px, env(safe-area-inset-left,0px)) 56px; color:var(--fg); font-size:.98rem; line-height:1.65; overflow-wrap:anywhere}
.documento h1{margin:8px 0 6px; font-family:var(--display); font-size:clamp(1.6rem, 5vw, 2.1rem); line-height:1.15}
.documento h2{margin:34px 0 8px; font-size:1.12rem}
.documento p{margin:10px 0}
.documento ul{margin:10px 0; padding-left:22px}
.documento li{margin:5px 0}
.documento .doc-data{color:var(--muted); font-size:.88rem}
.tabela-rolar{margin:14px 0; overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.tabela-rolar table{width:100%; min-width:520px; border-collapse:collapse; font-size:.88rem; line-height:1.45}
.tabela-rolar th, .tabela-rolar td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.tabela-rolar th{background:var(--surface); font-weight:700}
.tabela-rolar tr:last-child td{border-bottom:0}
@media (max-width:599px){
  /* no celular a tabela vira blocos: cada linha um cartão, com o nome da coluna antes do valor */
  .tabela-rolar{overflow:visible; border:0}
  .tabela-rolar table{min-width:0}
  .tabela-rolar thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tabela-rolar tr{display:block; margin:0 0 10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px}
  .tabela-rolar td{display:block; padding:3px 0; border:0}
  .tabela-rolar td::before{content:attr(data-rotulo); display:block; color:var(--muted-2); font-size:.76rem; font-weight:700}
}
.doc-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin:28px 0 0; color:var(--muted-2); font-size:.86rem}
/* ---------- Categorias (010_categorias.sql, 16/10/2026) ---------- */
.emoji{display:inline-block; flex:none; width:36px; height:36px; vertical-align:middle}
.emoji svg{display:block; width:100%; height:100%}
.emoji-mini{width:18px; height:18px; margin:-2px 6px 0 -3px}
.tag .emoji-mini{width:16px; height:16px; margin:-2px 5px 0 -5px}
.cat-conta{align-self:center; padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); font-size:.82rem; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.cat-lista{list-style:none; margin:18px 0 0; padding:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden}
.cat-item{display:grid; grid-template-columns:36px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line)}
.cat-item:first-child{border-top:0}
.cat-texto{display:grid; gap:2px; min-width:0}
.cat-texto b{font-size:.95rem; overflow-wrap:anywhere}
.cat-texto span{color:var(--muted-2); font-size:.8rem}
.cat-item .icone-btn{margin-left:0}
.cat-espaco{width:40px}
.cat-item.editando, .cat-item.removendo{background:var(--selecao-bg)}
.cat-item.editando{grid-template-columns:minmax(0,1fr)}
.cat-item.removendo{grid-template-columns:36px minmax(0,1fr) auto}
.cat-ed{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; min-width:0}   /* sem a coluna, a grade de emojis estica a linha além da tela */
.cat-ed-linha{display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:start; gap:10px 12px}
.cat-ed-emoji{display:block; padding-top:3px}
.cat-ed .campo input{min-height:42px; padding:9px 12px}
.cat-ed-botoes, .cat-rm-botoes{display:flex; gap:8px; flex-wrap:wrap}
.btn-mini.perigo{border-color:var(--perigo); background:var(--perigo); color:var(--white)}
.emoji-titulo{margin:0 0 8px; color:var(--muted); font-size:.82rem; font-weight:600}
.emoji-grade{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; max-width:560px; padding-top:6px}
/* cada emoji no seu quadradinho, com o nome embaixo; o escolhido tem a borda forte e o selo verde
   (desenho aprovado pelo Matheus em 16/10/2026) */
.emoji-opcao{position:relative; display:grid; justify-items:center; align-content:center; gap:4px; min-width:0; min-height:64px; padding:10px 4px 8px; border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--muted); font:600 .7rem/1.1 var(--body); cursor:pointer; transition:border-color .15s, background .15s}
.emoji-opcao:hover{border-color:var(--line-2); background:var(--surface-2)}
.emoji-opcao .emoji{width:34px; height:34px}
.emoji-nome{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.emoji-opcao[aria-checked="true"]{border:2px solid var(--fg); padding:9px 3px 7px; background:var(--selecao-bg); color:var(--fg)}
.emoji-check{display:none; position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px var(--surface); place-items:center}
.emoji-opcao[aria-checked="true"] .emoji-check{display:grid}
.emoji-opcao:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
/* no celular, menos colunas, para o nome inteiro caber ("Alimentação" pede uns 64 px) */
@media (max-width:599px){ .emoji-grade{grid-template-columns:repeat(4, minmax(0,1fr))} }
@media (max-width:419px){ .emoji-grade{grid-template-columns:repeat(3, minmax(0,1fr))} }
.cat-nova{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:14px; padding:14px; border-radius:16px; border:1px dashed var(--line-2)}
.cat-nova[hidden]{display:none}
.cat-nova-linha{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:start; gap:10px 12px}
.cat-emoji-btn{width:44px; height:44px; padding:3px; border:1px solid var(--line-2); border-radius:14px; background:transparent; cursor:pointer}
.cat-emoji-btn .emoji{width:100%; height:100%}
.cat-emoji-btn[aria-expanded="true"]{border-color:var(--fg)}
.cat-emoji-btn[disabled]{opacity:.5; cursor:default}
.cat-nova .campo input{min-height:44px; padding:10px 12px}
.cat-nova .btn{width:auto; min-height:44px; padding:10px 16px}
.cat-nova .btn[disabled]{opacity:.5; cursor:default}
@media (max-width:599px){
  .cat-nova-linha{grid-template-columns:44px minmax(0,1fr)}
  .cat-nova .btn{grid-column:1 / -1; width:100%}
  .cat-ed-linha{grid-template-columns:36px minmax(0,1fr)}
  .cat-ed-botoes{grid-column:1 / -1; justify-content:flex-end}
  .cat-item.removendo{grid-template-columns:36px minmax(0,1fr)}
  .cat-rm-botoes{grid-column:1 / -1; justify-content:flex-end}
}
/* aviso de versão nova (conta.js, 16/10/2026): pequeno, no alto, por cima de tudo */
.aviso-versao{position:fixed; top:calc(10px + env(safe-area-inset-top,0px)); left:50%; z-index:90; display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100vw - 24px); padding:5px 5px 5px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--fg); font:600 .82rem/1.25 var(--body); box-shadow:var(--sombra-cartao); transform:translateX(-50%); animation:avisoVersao .3s var(--ease)}
.aviso-versao-btn{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:6px 12px; border:0; border-radius:999px; background:var(--acento); color:var(--acento-texto); font:700 .8rem/1 var(--body); cursor:pointer; white-space:nowrap}
.aviso-versao-btn:hover{background:var(--acento-hover)}
.aviso-versao-btn:focus-visible{outline:2px solid var(--foco); outline-offset:2px}
.aviso-versao-btn[disabled]{opacity:.7; cursor:default}
@keyframes avisoVersao{from{opacity:0; transform:translate(-50%,-12px)} to{opacity:1; transform:translate(-50%,0)}}
@media (max-width:599px){
  .desp-barra, .dash-filtros{position:relative}
  .dash-filtros{width:100%}
  .mes-escolha{position:static}
  .mes-pop{left:0; right:0; width:auto; max-width:none}
}