/* Mavi: visual escuro, feito para o celular na mão. */
:root{
  --fundo:#0b1220;--cartao:#121c2e;--linha:#1e2a40;--tinta:#e8edf6;--suave:#8b9ab3;
  --cor:#2563eb;--ok:#22c55e;--neg:#f97066;--raio:18px;
}
*{box-sizing:border-box}
/* A faixa do sistema embaixo (indicador de home) é pintada pelo elemento raiz.
   Sem isso ela herda o cinza do body e a barra parece descolada do fundo. */
html{background:var(--cartao)}
body{margin:0;min-height:100dvh;background:var(--fundo);color:var(--tinta);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
h1,h2{margin:0;font-weight:700;letter-spacing:-.02em}
.marca{font-size:26px}
.suave{color:var(--suave);font-size:13.5px;margin:2px 0}
.erro{color:var(--neg);font-size:14px}

/* Tela de entrada. Nada de place-items:center aqui: numa grade isso faz a caixa
   encolher ate o menor conteudo, e no celular o PIN virava um quadradinho. */
.centro{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:28px 24px calc(28px + env(safe-area-inset-bottom))}
.caixa{width:100%;max-width:340px;margin:0 auto;text-align:center}
.caixa .marca{font-size:34px;margin-bottom:6px}
.caixa .suave{font-size:15px;line-height:1.45}
.pin{width:100%;margin:20px 0 12px;padding:18px 16px;border-radius:16px;border:1px solid var(--linha);
  background:var(--cartao);color:var(--tinta);font-size:26px;text-align:center;letter-spacing:.35em;
  font-weight:700;-webkit-appearance:none}
.pin:focus{outline:none;border-color:var(--cor)}
.botao{display:block;width:100%;padding:16px 18px;border:0;border-radius:16px;background:var(--cor);
  color:#fff;font-size:16px;font-weight:700;text-decoration:none;text-align:center;white-space:nowrap}

.topo{display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 18px) 18px 10px}
.dia{color:var(--suave);font-size:13px}
.icone{width:42px;height:42px;border-radius:50%;border:1px solid var(--linha);background:var(--cartao);
  color:var(--tinta);font-size:19px}
.icone.girando{animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.painel{padding:8px 14px 28px;display:flex;flex-direction:column;gap:12px}
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:16px}
.cartao h2{font-size:14px;color:var(--suave);text-transform:uppercase;letter-spacing:.06em}
.cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.selo{background:#1b2740;border-radius:999px;padding:4px 11px;font-size:13px;font-weight:700}
.barra{height:6px;background:#1b2740;border-radius:999px;overflow:hidden;margin-bottom:12px}
.barra i{display:block;height:100%;background:var(--ok);border-radius:999px}
.lista{list-style:none;margin:0;padding:0}
.lista li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:9px 0;border-top:1px solid var(--linha)}
.lista li:first-child{border-top:0}
.nome{font-weight:600;font-size:15px}
.num{font-weight:800;font-size:16px}
.num small{color:var(--suave);font-weight:600}
.lista .suave{min-width:62px;text-align:right}
.rodape{margin:12px 0 0;color:var(--suave);font-size:13px}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grande{margin:6px 0 0;font-size:30px;font-weight:800;letter-spacing:-.03em}
.grande.neg{color:var(--neg)}
.atualizado{text-align:center;color:var(--suave);font-size:12.5px;margin:4px 0 0}

.alerta{color:#f97066;font-weight:600}

/* Abas, cartões clicáveis e listas de cliente */
a.cartao{display:block;text-decoration:none;color:inherit}
.seta{float:right;color:var(--suave)}
.voltar{display:inline-block;color:var(--suave);text-decoration:none;font-size:14px;margin:0 0 4px}
.lista li a{display:block;text-decoration:none;color:inherit}
.cli .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#1b2740;color:var(--suave)}
.tag.aprov{background:#3a2a16;color:#f6c177}
.tag.ok{background:#10301d;color:#49d08b}
.tag.paga{background:#1c2540;color:#9db4e8}
.lista li.cli{display:block}
.materias li a{padding:2px 0}
.materias .nome{display:block;font-size:14.5px;line-height:1.3}
.num.alerta{color:#f97066}
.botao.escuro{background:#1b2740;margin-top:14px}

/* Fase 2: entrada rápida, tarefas e cronômetro */
.recado{margin:0 14px 8px;padding:11px 14px;border-radius:12px;background:#10301d;color:#49d08b;font-size:14px;font-weight:600}
.filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 15px;border-radius:999px;background:var(--cartao);border:1px solid var(--linha);
  color:var(--suave);text-decoration:none;font-size:13.5px;font-weight:700}
.chip.ativo{background:var(--cor);border-color:var(--cor);color:#fff}
.cartao.rodando{border-color:var(--cor)}
.grande-nome{margin:6px 0 0;font-size:17px;font-weight:700;line-height:1.3}
.cronometro{margin:6px 0 0;font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.acoes{display:flex;gap:8px;margin-top:12px}
.botao.pequeno{padding:11px 16px;font-size:14px;width:auto;flex:1}
.tl{min-width:0}
.tb{display:flex;gap:6px}
.mini{width:38px;height:38px;border-radius:12px;background:#1b2740;color:var(--tinta);display:grid;place-items:center;
  text-decoration:none;font-size:14px}
.mini.ok{background:#10301d;color:#49d08b}
.tag.b-work{background:#1c2540;color:#9db4e8}
.tag.b-imagine{background:#1c2540;color:#9db4e8}
.tag.b-pessoal{background:#1b2a24;color:#7fd3a8}
.cartao.briefing{border-color:#243busy}
.cartao.briefing{border-color:#2a3550;background:#111a2b}
.texto-briefing{font-size:14.5px;line-height:1.55;color:#cdd7e8;margin-top:8px}
.lista.agenda li{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start}
.hora{font-weight:800;font-size:14px;color:var(--suave);padding-top:1px;font-variant-numeric:tabular-nums}
.lista.agenda li.agora .hora{color:var(--cor)}
.lista.agenda li.agora .nome{color:var(--tinta)}
.lista.agenda li.passou{opacity:.45}

/* Barra de baixo, no padrão do app do Imagine Ads */
/* A casca nao rola: quem rola e so o miolo (.rolagem). Com isso a barra de baixo
   fica no fluxo normal, encostada no fim da tela, e nao depende mais de position:fixed,
   que no Safari em tela cheia era recalculado contra outra viewport e descolava. */
/* A altura vem do --vh, que o JS tira da area realmente visivel (visualViewport).
   Com o teclado aberto o iPhone encolhe essa area e empurra o documento para cima,
   e era isso que levantava a barra do fim da tela. O fundo da casca e a cor da
   propria barra, então qualquer faixa que sobre embaixo sai da mesma cor. */
body.com-barra{display:flex;flex-direction:column;height:100vh;height:100dvh;height:var(--vh,100dvh);
  min-height:0;overflow:hidden;padding-bottom:0;background:var(--cartao)}
body.com-barra>.cabecalho{flex:0 0 auto}
.rolagem{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--fundo);
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.cabecalho{display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 18px 6px}
.marca-peq{font-weight:800;font-size:17px;letter-spacing:-.02em}
.voltar-topo{color:var(--suave);text-decoration:none;font-size:14px}
/* Barra de baixo, agora no fluxo (ultimo filho da coluna flexivel da casca).
   Sem position:fixed, sem backdrop-filter e sem transform: eram eles que faziam
   a barra tremer e descolar do fundo no iPhone. O html pintado de --cartao
   cobre a faixa do indicador de home. */
/* Barra baixa de proposito. A faixa do indicador de home entra com 70% do valor
   do sistema: respeita o gesto sem roubar tanta altura da tela. */
/* Parte da área segura entra como folga em cima também, senão o ícone fica
   grudado na borda de cima da barra em vez de centralizado. */
.navegacao{flex:0 0 auto;min-height:44px;position:relative;z-index:900;display:flex;align-items:center;
  padding:calc(4px + env(safe-area-inset-bottom) * .20) 6px calc(2px + env(safe-area-inset-bottom) * .34);
  background:var(--cartao);border-top:1px solid var(--linha)}
.navegacao .item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:none;border:0;padding:0;color:var(--suave);font-size:10px;line-height:1.1;font-weight:700;
  text-decoration:none;-webkit-tap-highlight-color:transparent}
/* flex:0 0 auto porque dentro de coluna flexivel o svg encolhia para zero */
/* A aba ativa ganha uma pílula atrás do ícone, que é o que marca onde você está. */
.navegacao .item svg{width:23px;height:23px;flex:0 0 auto;padding:3px 14px;border-radius:999px;
  box-sizing:content-box;transition:background .15s ease}
.navegacao .item.ativo svg,.navegacao .item.ativo .marca-icone{background-color:rgba(37,99,235,.14)}
:root[data-tema="claro"] .navegacao .item.ativo svg,
:root[data-tema="claro"] .navegacao .item.ativo .marca-icone{background-color:rgba(37,99,235,.12)}
.navegacao .item span{letter-spacing:.01em;padding-bottom:1px}
.navegacao .item:active{opacity:.6}
.navegacao .item.ativo{color:var(--cor)}
.navegacao .central{flex:0 0 64px}
.mais{z-index:1;display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:-27px;
  border-radius:50%;background:var(--cor);color:#fff;
  box-shadow:0 8px 22px rgba(37,99,235,.45),0 0 0 5px var(--fundo)}
.mais svg{width:26px;height:26px;flex:0 0 auto}

/* Folha de anotação que o botão central abre */
/* O display:flex anula o atributo hidden, por isso a regra explicita abaixo. */
.folha-fundo{position:fixed;left:0;right:0;top:var(--vtop,0);height:var(--vh,100%);z-index:1200;background:rgba(0,0,0,.5);display:flex;align-items:flex-end}
.folha-fundo[hidden]{display:none}
.folha{width:100%;background:var(--cartao);border-radius:22px 22px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  animation:sobe .25s ease}
@keyframes sobe{from{transform:translateY(100%)}to{transform:translateY(0)}}
.folha-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.folha-topo strong{font-size:16px}
.fechar{width:34px;height:34px;border:0;border-radius:50%;background:#1b2740;color:var(--tinta);font-size:20px;line-height:1}
.folha input{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:16px}
.exemplos{font-size:12px;margin:10px 2px 14px;line-height:1.5}
.grade.tres{grid-template-columns:repeat(3,1fr)}
.mini-card{padding:13px 12px}
.mini-card h2{font-size:11px}
.mini-card .grande{font-size:24px;margin-top:4px}
.grande.peq{font-size:16px;letter-spacing:0}

/* ---------- tema claro ----------
   O app abre no tema do aparelho e o leitor escolhe no perfil: automático, claro ou escuro. */
:root[data-tema="claro"]{
  --fundo:#f2f4f8;--cartao:#ffffff;--linha:#e2e7ef;--tinta:#111827;--suave:#667085;
  --sombra:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
}
:root[data-tema="claro"] .navegacao{background:#ffffff}
:root[data-tema="claro"]{background:#ffffff}
:root[data-tema="claro"] .mais{box-shadow:0 8px 22px rgba(37,99,235,.32),0 0 0 5px #f2f4f8}
:root[data-tema="claro"] .barra{background:#e6eaf2}
:root[data-tema="claro"] .selo,
:root[data-tema="claro"] .tag,
:root[data-tema="claro"] .mini,
:root[data-tema="claro"] .fechar,
:root[data-tema="claro"] .botao.escuro{background:#eef1f6;color:var(--suave)}
:root[data-tema="claro"] .mini.ok{background:#e7f6ee;color:#0f8a4d}
:root[data-tema="claro"] .tag.aprov{background:#fdf2e3;color:#b26a00}
:root[data-tema="claro"] .tag.ok{background:#e7f6ee;color:#0f8a4d}
:root[data-tema="claro"] .tag.paga,
:root[data-tema="claro"] .tag.b-work{background:#eaf0fd;color:#2a53b8}
:root[data-tema="claro"] .tag.b-imagine{background:#fdecef;color:#b3243a}
:root[data-tema="claro"] .tag.b-pessoal{background:#e8f6f0;color:#13795a}
:root[data-tema="claro"] .cartao.briefing{background:#f7f9fd;border-color:#dde5f2}
:root[data-tema="claro"] .texto-briefing{color:#394353}
:root[data-tema="claro"] .recado{background:#e7f6ee;color:#0f8a4d}
:root[data-tema="claro"] .grande.neg,
:root[data-tema="claro"] .num.alerta,
:root[data-tema="claro"] .alerta{color:#c0392b}
:root[data-tema="claro"] .folha-fundo{background:rgba(17,24,39,.35)}
:root[data-tema="claro"] .folha input{background:#f7f9fd}

/* Seletor de tema no perfil */
.temas{display:flex;gap:8px;margin-top:10px}
.tema-op{flex:1;padding:11px 0;border-radius:12px;border:1px solid var(--linha);background:var(--fundo);
  color:var(--suave);font-size:13.5px;font-weight:700;text-align:center;cursor:pointer}
.tema-op.ativo{background:var(--cor);border-color:var(--cor);color:#fff}

/* Tarefas com caixa de marcar */
.cab-pagina{display:flex;align-items:baseline;justify-content:space-between;margin:2px 2px 10px}
.cab-pagina h1{font-size:26px;letter-spacing:-.03em}
.link-topo{color:var(--suave);text-decoration:none;font-size:13.5px;font-weight:700}
.lista.afazer li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 0}
.lista.afazer li:first-child{border-top:0}
.marcar{display:flex;margin:0;padding-top:1px}
.marcador{width:24px;height:24px;border-radius:50%;border:2px solid var(--linha);background:transparent;
  color:#fff;font-size:12px;line-height:1;display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s,background .12s}
.marcador:active{transform:scale(.85)}
.marcador.marcada{background:var(--ok);border-color:var(--ok)}
.lista.afazer .nome{display:block;font-size:15.5px;line-height:1.35;font-weight:600}
.lista.afazer .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
li.pronta .nome{color:var(--suave);text-decoration:line-through;text-decoration-color:var(--linha)}
.selo.ok{background:#10301d;color:#49d08b}
.cartao.vazio{text-align:center;padding:26px 18px}
.cartao.vazio .suave{margin:4px 0}
.cartao.rodando .cronometro{font-size:17px;font-weight:800;color:var(--cor);margin:0}
.lista.afazer .mini{width:34px;height:34px;font-size:12px}
:root[data-tema="claro"] .marcador{border-color:#cfd6e4}
:root[data-tema="claro"] .marcador.marcada{background:#0f8a4d;border-color:#0f8a4d}
:root[data-tema="claro"] .selo.ok{background:#e7f6ee;color:#0f8a4d}
.lista.agenda.com-caixa li{grid-template-columns:44px 1fr auto}
.lista.agenda li.pronta .nome{color:var(--suave);text-decoration:line-through;text-decoration-color:var(--linha)}
.lista.agenda li.pronta{opacity:1}

/* Cliente: filtros de período, gráfico de barras e grade de publicações */
.filtros.periodos{margin-top:-4px}
.chip.peq{padding:6px 12px;font-size:12.5px}
.datas{display:flex;gap:8px;margin:10px 0 2px}
.datas input{flex:1;min-width:0;padding:11px 12px;border-radius:12px;border:1px solid var(--linha);
  background:var(--cartao);color:var(--tinta);font-size:15px}
.datas .botao{width:auto;flex:0 0 auto;padding:11px 16px}
.periodo-txt{color:var(--suave);font-size:12.5px;margin:8px 2px 2px}
.destaque-num .enorme{margin:4px 0 0;font-size:44px;font-weight:800;letter-spacing:-.04em}
.barras{display:flex;align-items:flex-end;gap:2px;height:64px;margin-top:14px}
.barras i{flex:1;background:linear-gradient(180deg,#5b94f5,var(--cor));border-radius:3px 3px 0 0;min-width:2px}
.barras i.baixa{background:var(--suave);opacity:.55}
/* Cada série do painel tem a sua cor, para o gráfico não virar um bloco vermelho só. */
.barras.tom-azul i{background:linear-gradient(180deg,#6aa6ff,#2f6bdc)}
.barras.tom-verde i{background:linear-gradient(180deg,#5de39a,#16a34a)}
.barras.tom-laranja i{background:linear-gradient(180deg,#fbbf24,#f97316)}
.barras.tom-roxo i{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.barras.tom-ciano i{background:linear-gradient(180deg,#5fd0f0,#0ea5e9)}
.lista.colorida .trilho i{background:var(--c,var(--cor));opacity:1}
.lista.colorida .num{color:var(--c,var(--tinta));font-weight:800}
.eixo{display:flex;justify-content:space-between;font-size:11px;margin:6px 0 0}
.posts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.post{display:block;text-decoration:none;color:inherit;background:var(--fundo);border-radius:14px;overflow:hidden;
  border:1px solid var(--linha)}
.post img,.post .sem-foto{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--linha)}
/* Matéria de portal é 16:9. Antes eu cortava em quadrado e sumia com metade da arte:
   agora a foto ocupa a largura toda, na proporção original. */
.posts.largas{grid-template-columns:1fr;gap:12px}
.posts.largas .post img,.posts.largas .post .sem-foto{aspect-ratio:16/9;width:100%;height:auto}
.posts.largas .post-dados{font-size:13px;padding:11px 12px 12px}
.posts.largas .post-dados b{font-size:14px;line-height:1.3;display:block}
.post-dados{display:block;padding:9px 10px;font-size:11.5px;line-height:1.45}
.post-dados b{font-weight:800}
.lista .nome small{font-weight:500}
.perfil-topo{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--linha);background:var(--cartao);color:var(--suave)}
.perfil-topo svg{width:20px;height:20px}
.perfil-topo.ativo{border-color:var(--cor);color:var(--cor)}
.lista.gastos li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.trilho{display:block;height:5px;border-radius:999px;background:var(--linha);margin-top:7px;overflow:hidden}
.trilho i{display:block;height:100%;background:var(--cor);border-radius:999px;opacity:.85}
.num.pos{color:var(--ok)}
.destaque-num .lista{margin-top:12px}
.materias-img li a{display:grid;grid-template-columns:62px 1fr;gap:11px;align-items:center;text-decoration:none;color:inherit}
.materias-img img{width:62px;height:62px;border-radius:10px;object-fit:cover;background:var(--linha)}
.materias-img .nome{display:block;font-size:14.5px;line-height:1.3}
.grande small{font-size:16px;color:var(--suave);font-weight:700}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--linha);flex:0 0 auto;
  display:inline-grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:var(--suave)}
.cli-nome{display:flex;align-items:center;gap:10px}
.grande-avatar{width:54px;height:54px;font-size:22px}
.cab-pagina.com-foto{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.cab-pagina.com-foto h1{font-size:20px;line-height:1.2}
.perfil-topo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.perfil-topo{overflow:hidden;padding:0}
.foto-perfil{display:flex;align-items:center;gap:14px;margin-top:10px}
.foto-perfil .botao{width:auto;flex:0 0 auto;cursor:pointer}

.avisos{margin-top:12px;border-top:1px solid var(--linha);padding-top:10px}
.aviso{margin:0 0 7px;font-size:12.5px;line-height:1.4;color:var(--suave)}
.aviso span{display:inline-block;min-width:42px;font-weight:800;color:var(--tinta)}
.aviso.erro{color:var(--neg)}
.selo.alerta-selo{background:#3a1a1e;color:#f97066}
:root[data-tema="claro"] .selo.alerta-selo{background:#fdecef;color:#c0392b}
.topo-dir{display:flex;gap:8px;align-items:center}
.navegacao .central .mais svg{width:25px;height:25px;padding:0;background:none}
.navegacao .central.ativo .mais{background:var(--cor)}

/* Semana de treino e formulários de meta */
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0 4px}
.dia-semana{display:flex;flex-direction:column;align-items:center;gap:5px}
.dsm{font-size:11px;font-weight:700;color:var(--suave);text-transform:lowercase}
.bolha{width:34px;height:34px;border-radius:50%;border:2px solid var(--linha);display:grid;place-items:center;
  font-size:14px;color:var(--suave)}
.dia-semana.treinou .bolha{background:var(--ok);border-color:var(--ok);color:#fff}
.dia-semana.hoje .dsm{color:var(--cor)}
.dia-semana.hoje .bolha{border-color:var(--cor)}
.dia-semana.futuro{opacity:.4}
.dmin{font-size:10px;color:var(--suave);font-weight:700}
.acoes input{flex:1;min-width:0;padding:12px;border-radius:12px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:16px}
.acoes input[name=minutos]{flex:0 0 74px}
.metas{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.metas label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;font-weight:600}
.metas input{width:110px;padding:11px 12px;border-radius:12px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:16px;text-align:center}

/* Dinheiro em cartão de um terço de largura não pode quebrar no meio do número. */
.mini-card .grande.peq{font-size:15px;white-space:nowrap}
.mini-card h2{font-size:10.5px;letter-spacing:.03em}

/* Rótulo em cima de cada gráfico, quando o cartão tem mais de uma série. */
.rotulo-graf{margin:16px 0 0;font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.filtros.contas{margin-top:-2px}
.mini-card small.suave{display:block;font-size:11.5px;margin-top:2px}
.aviso-pdf{margin:0 2px 4px;font-size:12.5px;line-height:1.45}
.cartao .botao.pequeno{margin-top:10px;display:inline-block;width:auto;padding:10px 16px}

/* Menu do "mais": três quadrados grandes, no lugar da antiga aba Carteira. */
.quadros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:4px}
.quadro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:18px 8px;border-radius:16px;background:var(--fundo);border:1px solid var(--linha);
  color:var(--tinta);text-decoration:none;font-size:12px;font-weight:700;text-align:center;line-height:1.25}
.quadro svg{width:26px;height:26px;flex:0 0 auto;color:var(--cor)}
.quadro.ativo{border-color:var(--cor);background:rgba(37,99,235,.12)}
:root[data-tema="claro"] .quadro{background:#f7f9fd}

/* Linha rápida de uma entrada só (lista de compras). */
.formulario.linha-rapida{display:flex;gap:8px;align-items:center}
.formulario.linha-rapida input{flex:1;min-width:0;padding:13px 14px;border-radius:13px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:15px}
.formulario.linha-rapida .botao{width:auto;white-space:nowrap;padding:13px 15px;margin:0}
:root[data-tema="claro"] .formulario.linha-rapida input{background:#f7f9fd}

/* Formulário de medidas. */
.formulario .campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px}
.formulario .campos label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--suave)}
/* display:flex ganha do atributo hidden; sem isto o campo Parcelas aparecia sempre. */
.formulario .campos label[hidden]{display:none}
.formulario .campos input{padding:12px 13px;border-radius:12px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:16px;font-weight:700;width:100%}
:root[data-tema="claro"] .formulario .campos input{background:#f7f9fd}
.formulario .filtros{margin:4px 0 12px}
.formulario .chip{cursor:pointer}

.apagar{color:var(--suave);text-decoration:none;font-size:22px;line-height:1;padding:0 2px 4px}
.riscado{text-decoration:line-through;text-decoration-color:var(--linha);color:var(--suave)}
.botao-config{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.botao-config svg{width:17px;height:17px;flex:0 0 auto}
.lista.afazer li .apagar{justify-self:end}

/* Avaliação do dia: cada meta com a sua barra. */
.avaliacao .lista.metas{margin-top:12px}
.avaliacao .lista.metas li{padding:9px 0}
.avaliacao .lista.metas .num{font-size:15px}
.agua-rapida{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.agua-rapida .botao.pequeno{width:auto;margin:0;padding:9px 12px;font-size:13px}
.agua-rapida .suave{font-size:13px}

/* Quatro quadrados cabem em duas colunas, para o nome não quebrar feio. */
.quadros.quatro{grid-template-columns:repeat(2,1fr)}

/* Calendário da evolução: um quadradinho por dia, pintado pela nota. */
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:12px}
.cab-dia{text-align:center;font-size:10.5px;font-weight:800;color:var(--suave);padding-bottom:2px}
.dia-cal{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;background:var(--fundo);border:1px solid var(--linha);font-size:12px;font-weight:700;color:var(--suave)}
.dia-cal b{font-weight:800}
.dia-cal i{font-style:normal;font-size:9.5px;opacity:.85}
.dia-cal.fora{background:none;border:0}
.dia-cal.bom{background:rgba(22,163,74,.22);border-color:rgba(22,163,74,.45);color:#2fbf6a}
.dia-cal.medio{background:rgba(245,158,11,.20);border-color:rgba(245,158,11,.45);color:#e9a13b}
.dia-cal.fraco{background:rgba(225,29,46,.18);border-color:rgba(225,29,46,.45);color:#f0616f}
.dia-cal.futuro{opacity:.35}
.dia-cal.hoje{outline:2px solid var(--cor);outline-offset:1px}
.legenda{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:11.5px;color:var(--suave);font-weight:600}
.legenda span{display:flex;align-items:center;gap:5px}
.ponto{width:10px;height:10px;border-radius:4px;display:inline-block;background:var(--linha)}
.ponto.bom{background:#16a34a}.ponto.medio{background:#f59e0b}.ponto.fraco{background:#e11d2e}
.seta-mes{color:var(--suave);text-decoration:none;font-size:20px;font-weight:800;padding:0 8px;line-height:1}
.seta-mes.vazia{opacity:.25}
.cartao .cab{gap:8px}
.nota-bom{color:#2fbf6a}.nota-medio{color:#e9a13b}.nota-fraco{color:#f0616f}
:root[data-tema="claro"] .dia-cal{background:#f7f9fd}
:root[data-tema="claro"] .dia-cal.bom{color:#0f8a4d}
:root[data-tema="claro"] .dia-cal.medio{color:#b26a00}
:root[data-tema="claro"] .dia-cal.fraco{color:#c0392b}

/* Carteira: lançamento em lista, com marcador de pago à esquerda. */
/* Duas linhas: em cima marcador, descrição e valor; embaixo as etiquetas. */
.lista.lancamentos li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;
  grid-template-areas:"marca nome valor editar" ". etiquetas etiquetas etiquetas";
  gap:5px 10px;align-items:center}
.lista.lancamentos .marcar{grid-area:marca}
.lista.lancamentos .tl{grid-area:nome;display:contents}
.lista.lancamentos .nome{grid-area:nome;font-weight:700;line-height:1.3}
.lista.lancamentos .tags{grid-area:etiquetas;display:flex;flex-wrap:wrap;gap:6px}
.lista.lancamentos .num{grid-area:valor;font-size:15px;font-weight:800;white-space:nowrap}
.lista.lancamentos .apagar{grid-area:editar;font-size:16px}
.formulario .campos label.largo{grid-column:1 / -1}
.formulario .campos select{padding:12px 13px;border-radius:12px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:15px;font-weight:700;width:100%}
:root[data-tema="claro"] .formulario .campos select{background:#f7f9fd}
.formulario .busca{width:100%;padding:12px 14px;border-radius:13px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:15px;margin-bottom:10px}
:root[data-tema="claro"] .formulario .busca{background:#f7f9fd}
.marcar-linha{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--suave);margin:4px 0 12px}
.marcar-linha input{width:18px;height:18px;accent-color:var(--cor)}
.formulario .acoes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.formulario .acoes .botao{width:auto;margin:0}
.dia-cal.dinheiro i{font-size:9px;font-weight:800}
.num.pos{color:#2fbf6a}

/* Folha de lançamento: rola por dentro e nunca passa da altura visível. */
.folha{max-height:calc(var(--vh,100dvh) - 54px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.folha.formulario{padding-top:14px}
.folha.formulario .campos{margin-top:4px}
.abrir-lancamento{margin:2px 0 2px}

/* Lista de compras: caixinha quadrada, nome, etiqueta e o x de tirar. */
.lista.compras li{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:10px;align-items:center}
.lista.compras .nome{font-weight:700;line-height:1.3}
.quadradinho{width:24px;height:24px;border-radius:8px;border:2px solid var(--linha);background:none;
  display:grid;place-items:center;color:#fff;font-size:13px;line-height:1;padding:0;cursor:pointer}
.quadradinho.marcada{background:#16a34a;border-color:#16a34a}
.tag.trocavel{text-decoration:none;white-space:nowrap}
.tag.b-imagine{background:#2a1a20;color:#f49aa4}
.tag.b-pessoal{background:#1b2a24;color:#7fd3a8}
.nova-compra input{width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:15px}
.escolha-tag{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.escolha-tag .chip{cursor:pointer}
.escolha-tag .botao{width:auto;margin:0 0 0 auto;padding:11px 14px}
.selo.peq{font-size:10.5px;padding:1px 6px;margin-left:5px;font-style:normal}
:root[data-tema="claro"] .nova-compra input{background:#f7f9fd}
:root[data-tema="claro"] .quadradinho{border-color:#cfd6e4}

/* A folha de item: campo largo e etiquetas embaixo, sem apertar o botão. */
.folha.nova-compra .escolha-tag{margin:12px 0 14px}
.folha.nova-compra .escolha-tag .botao{display:none}
.folha.nova-compra input{width:100%}

/* Marca da Imagine na barra: o PNG serve de máscara, então a cor vem do texto,
   cinza claro quando a aba está parada e azul quando está ativa. */
.marca-icone{display:block;width:23px;height:23px;flex:0 0 auto;padding:3px 14px;border-radius:999px;
  box-sizing:content-box;background-color:transparent;transition:background-color .15s ease}
.marca-icone::before{content:"";display:block;width:23px;height:23px;background-color:currentColor;
  -webkit-mask:url(/assets/marca-imagine.png) center/contain no-repeat;
  mask:url(/assets/marca-imagine.png) center/contain no-repeat}
.marca-peq{text-decoration:none;color:inherit}
.marca-peq.aqui{color:var(--cor)}

/* Entrada do app: o copo grande de água e a fileira de copos. */
.cartao.agua .copo-grande{display:flex;align-items:center;gap:12px;margin-top:12px}
/* A lixeira fica na ponta, discreta: cada toque tira um copo de 250 ml. */
.apagar-gole{margin-left:auto;background:none;border:0;padding:0;width:34px;height:34px;cursor:pointer}
/* Sem nada para apagar ela continua à vista, só apagada: assim você sabe que existe. */
.apagar-gole.sem-uso{opacity:.22;cursor:default}
.apagar-gole svg{width:18px;height:18px}
.copo{display:flex;align-items:center;gap:9px;padding:14px 18px;border:0;border-radius:16px;
  background:var(--cor);color:#fff;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap}
.copo svg{width:22px;height:22px;flex:0 0 auto}
.copo:active{opacity:.75}
.copos{display:flex;flex-wrap:wrap;gap:5px;align-content:center}
.copos i{width:11px;height:16px;border-radius:3px 3px 5px 5px;border:1.5px solid var(--linha);display:block}
.copos i.cheio{background:var(--cor);border-color:var(--cor)}
.mini-card .barra{margin:8px 0 6px}
.cartao.urgente{border-color:rgba(249,112,102,.45)}
.lista li a{display:block}

/* Ações da tarefa: play redondo de verdade e lixeira discreta. */
.acoes-tarefa{display:flex;align-items:center;gap:6px}
/* Prefixo com .acoes-tarefa porque `.lista li a{display:block}` tem mais peso
   que `.play` sozinho, e o ícone ficava encostado no canto em vez de centralizado. */
.acoes-tarefa .play{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  background:rgba(37,99,235,.12);color:var(--cor)}
.play svg{width:16px;height:16px;margin-left:1px}
.play.rodando{background:var(--cor);color:#fff}
.play.rodando svg{margin-left:0}
.play:active{opacity:.7}
.acoes-tarefa .lixeira{width:30px;height:34px;display:grid;place-items:center;text-decoration:none;color:var(--suave);opacity:.65}
/* A mesma lixeira como botão de formulário (água), que não é link. */
button.lixeira{display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--suave);opacity:.65}
.lixeira svg{width:17px;height:17px}
.lixeira:active{opacity:1;color:var(--neg)}
.lista.afazer li.rodando-linha{background:rgba(37,99,235,.06);border-radius:12px}
:root[data-tema="claro"] .play{background:rgba(37,99,235,.10)}

/* Folha de tarefa: campos respirando, em vez de grade apertada. */
.folha.nova-tarefa .campo{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--suave);margin-bottom:10px}
/* min-width:0 nos dois lados: o campo de data e o de hora do iOS têm largura
   própria maior que a coluna e vazavam para fora da folha. */
.folha.nova-tarefa .campo{min-width:0}
.folha.nova-tarefa .campo input,.folha.nova-tarefa .campo select{padding:13px 12px;border-radius:13px;
  border:1px solid var(--linha);background:var(--fundo);color:var(--tinta);font-size:16px;font-weight:700;
  width:100%;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
.folha.nova-tarefa .campo input[type=date],.folha.nova-tarefa .campo input[type=time]{text-align:center}
.folha.nova-tarefa .campo select{-webkit-appearance:menulist;appearance:menulist}
.folha.nova-tarefa .dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.folha.nova-tarefa .dia-escolhido{max-width:180px;margin-top:10px}
.rotulo-campo{margin:4px 0 8px;font-size:12px;font-weight:800;color:var(--suave);text-transform:uppercase;letter-spacing:.03em}
/* Aqui o chip quebra linha em vez de rolar de lado: escolher dia é coisa de olhar tudo junto. */
.filtros.repeticao,.escolha-dias .filtros{flex-wrap:wrap;overflow:visible}
.filtros.repeticao{margin-bottom:10px}
.escolha-dias{margin:2px 0 12px}
.escolha-dias p.suave{margin:0 0 7px}
.escolha-dias .dica{margin-top:7px;font-size:12px}
.escolha-dias[hidden]{display:none}
.lista li.pausada{opacity:.5}
:root[data-tema="claro"] .folha.nova-tarefa .campo input,
:root[data-tema="claro"] .folha.nova-tarefa .campo select{background:#f7f9fd}

/* Linha com lixeira: uma coluna a mais, sem apertar o número. */
.lista li.com-lixeira{grid-template-columns:minmax(0,1fr) auto auto}
.lista li.com-lixeira .lixeira{width:28px;height:30px;display:grid;place-items:center;color:var(--suave);opacity:.6;text-decoration:none}
.lista li.com-lixeira .lixeira svg{width:16px;height:16px}
.lista li.com-lixeira .lixeira:active{opacity:1;color:var(--neg)}

/* Alavanca de dois lados: treino ou alimentação. */
.alavanca{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;
  background:var(--cartao);border:1px solid var(--linha)}
.alavanca .lado{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border-radius:12px;
  text-decoration:none;color:var(--suave);font-size:13.5px;font-weight:800}
.alavanca .lado svg{width:18px;height:18px;flex:0 0 auto}
.alavanca .lado.ativo{background:var(--cor);color:#fff}

/* Metas: o plano do dia em três pedaços e o bloco de ajustes escondido. */
.cartao.meta.pausada{opacity:.55}
.cartao.meta .plano{margin-top:12px}
.pedaco{text-align:center;padding:10px 6px;border-radius:14px;background:var(--fundo);border:1px solid var(--linha)}
.pedaco b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.pedaco span{display:block;font-size:11px;color:var(--suave);font-weight:700;margin-top:2px}
:root[data-tema="claro"] .pedaco{background:#f7f9fd}
.aviso-plano{margin:10px 0 2px;font-size:12.5px;line-height:1.45;color:#e9a13b}
.mais-meta{margin-top:12px;border-top:1px solid var(--linha);padding-top:10px}
.mais-meta summary{font-size:12.5px;font-weight:700;color:var(--suave);cursor:pointer;list-style:none}
.mais-meta summary::-webkit-details-marker{display:none}
.mais-meta .formulario{padding:0;background:none;border:0;margin-top:10px}
.mais-meta .acoes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mais-meta .acoes .botao{width:auto;margin:0}
.num.peq{font-size:12.5px;font-weight:700;text-align:right;max-width:62%;line-height:1.35}

/* Somar progresso na meta: botões rápidos e um campo para qualquer número. */
.somar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.somar-botao{border:1px solid var(--linha);background:var(--fundo);color:var(--cor);font-weight:800;cursor:pointer}
.somar-botao.enviar{color:#fff;background:var(--cor);border-color:var(--cor)}
.somar-campo{width:86px;padding:7px 10px;border-radius:999px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--tinta);font-size:13px;font-weight:700}
:root[data-tema="claro"] .somar-botao,:root[data-tema="claro"] .somar-campo{background:#f7f9fd}
:root[data-tema="claro"] .somar-botao.enviar{background:var(--cor)}
.dica-tipo{margin:-4px 0 12px;font-size:12.5px}
#campos-manual[hidden]{display:none}

/* ---------- Computador: a barra de baixo vira barra lateral ----------
   No celular nada muda. A partir de 900px a casca vira grade de duas colunas:
   navegação fixa à esquerda, cabeçalho e conteúdo à direita. */
.so-computador{display:none}
.marca-lateral,.lateral-extra{display:none}

@media (min-width: 900px) {
  body.com-barra{display:grid;grid-template-columns:252px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;height:var(--vh,100dvh)}

  .navegacao{grid-column:1;grid-row:1 / span 2;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:3px;min-height:0;padding:18px 12px 18px;border-top:0;border-right:1px solid var(--linha);overflow-y:auto}

  .marca-lateral{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;color:var(--tinta);
    text-decoration:none;font-size:19px;letter-spacing:-.02em}
  .marca-lateral .marca-icone{padding:0;width:26px;height:26px;color:var(--cor)}
  .marca-lateral .marca-icone::before{width:26px;height:26px}

  .navegacao .item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:11px;
    padding:11px 12px;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--suave);letter-spacing:0}
  .navegacao .item svg{width:20px;height:20px;padding:0;border-radius:0;background:none}
  /* A marca da Imagine é cheia e os outros ícones são de traço: um pouco menor
     e com menos peso, ela fica do mesmo tamanho visual dos vizinhos. */
  .navegacao .item .marca-icone{width:20px;height:20px;padding:0;border-radius:0;background:none;
    display:grid;place-items:center;opacity:.9}
  .navegacao .item .marca-icone::before{width:17px;height:17px}
  .navegacao .item.ativo .marca-icone{opacity:1}
  /* Fit sobe para o grupo Pessoal no computador. */
  .navegacao .item.so-celular{display:none}
  .navegacao .item:hover{background:var(--fundo);color:var(--tinta)}
  .navegacao .item.ativo{background:rgba(37,99,235,.12);color:var(--cor)}
  .navegacao .item.ativo svg,.navegacao .item.ativo .marca-icone{background:none}
  .navegacao .item span{font-size:14.5px}

  /* O botão redondo do meio vira um item igual aos outros. */
  .navegacao .central{flex:0 0 auto;order:0}
  .navegacao .central .mais{width:20px;height:20px;margin:0;border-radius:0;background:none;box-shadow:none;color:inherit}
  .navegacao .central .mais svg{width:20px;height:20px}
  .so-computador{display:inline}

  .lateral-extra{display:flex;flex-direction:column;gap:3px;margin-top:14px;padding-top:12px;border-top:1px solid var(--linha)}
  .lateral-titulo{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--suave);padding:2px 12px 7px}
  #abrir-menu{display:none}

  .cabecalho{grid-column:2;grid-row:1;padding:16px 28px 10px;border-bottom:1px solid var(--linha);background:var(--cartao)}
  .marca-peq{display:none}
  .topo-dir{margin-left:auto}
  .rolagem{grid-column:2;grid-row:2}

  .painel{max-width:1060px;margin:0 auto;width:100%;padding:18px 28px 48px;gap:16px}
  .cab-pagina h1{font-size:30px}
  /* Mantém 2 e 3 colunas: com 4 colunas sobrava buraco à direita, porque
     esses blocos têm sempre dois ou três cartões. O ganho aqui é a largura. */
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .posts{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* No computador a matéria larga cabe em duas colunas: uma só deixava a foto enorme. */
  .posts.largas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quadros.quatro{grid-template-columns:repeat(4,1fr)}

  /* Folha deixa de subir de baixo e vira caixa no meio da tela. */
  .folha-fundo{align-items:center;justify-content:center;padding:24px}
  .folha{max-width:540px;border-radius:20px;max-height:calc(var(--vh,100dvh) - 90px)}
  .folha.formulario .dupla{gap:14px}

  .lista li{padding:12px 0}
  .cartao{padding:18px}
}

/* Tela bem larga: mais respiro, sem esticar o conteúdo até a borda. */
@media (min-width: 1500px) {
  .painel{max-width:1240px}
}

/* Comercial: funil em degraus, grupos na lista e corpo de e-mail legível. */
.lista.funil li{padding:11px 0}
.lista.funil .num{font-size:17px;font-weight:800}
.lista li.cabeca-grupo{border-top:0;padding:12px 0 4px}
.lista li.cabeca-grupo .nome{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.lista.emails li{grid-template-columns:minmax(0,1fr) auto}
.lista.emails li a{text-decoration:none;color:inherit}
.texto-email{font-size:14.5px;line-height:1.6;margin:8px 0 12px;white-space:normal;word-break:break-word}
.texto-email p{margin:0 0 10px}
.corpo-email .suave{font-size:12px}

/* Lista de contas de e-mail: endereço comprido não pode empurrar a etiqueta para fora. */
.lista.contas li{grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.lista.contas .nome{overflow-wrap:anywhere;font-size:13.5px}
.lista.contas .tag{white-space:nowrap}
.lista.contas .num{white-space:nowrap}

/* A logo entra no lugar do texto quando o arquivo existe. Duas versões:
   a escura para o tema claro e a clara para o tema escuro. */
.marca-peq.com-logo{display:flex;align-items:center;padding:0}
.marca-peq img,.marca-lateral img{height:26px;width:auto;display:block}
.marca-lateral img{height:30px}
/* Estas precisam de peso igual ao das regras acima, senão o display:block vence
   e as duas logos aparecem ao mesmo tempo. */
.marca-peq .logo-clara,.marca-lateral .logo-clara{display:none}
:root[data-tema="escuro"] .marca-peq .logo-escura,
:root[data-tema="escuro"] .marca-lateral .logo-escura{display:none}
:root[data-tema="escuro"] .marca-peq .logo-clara,
:root[data-tema="escuro"] .marca-lateral .logo-clara{display:block}
@media (min-width: 900px) {
  .marca-lateral{padding:2px 8px 18px}
  .marca-lateral img{height:34px}
}

/* Amostra de cada peça da marca, no fundo em que ela vai viver. */
.amostra-caixa{margin:10px 0 4px;padding:14px;border-radius:14px;background:var(--fundo);
  border:1px solid var(--linha);display:grid;place-items:center}
.amostra-caixa.escura{background:#0b1220}
.amostra-caixa img{max-height:72px;max-width:100%;width:auto;display:block}
:root[data-tema="claro"] .amostra-caixa{background:#f7f9fd}
.envio-peca{padding:0;background:none;border:0;margin-top:10px}
.envio-peca input[type=file]{width:100%;padding:11px;border-radius:12px;border:1px dashed var(--linha);
  background:var(--fundo);color:var(--suave);font-size:13px;font-weight:600}
:root[data-tema="claro"] .envio-peca input[type=file]{background:#f7f9fd}
.envio-peca .acoes{display:flex;gap:8px;margin-top:4px}
.envio-peca .acoes .botao{width:auto;margin:0}

/* Lista que recolhe: o resumo fica sempre à vista, o detalhe abre quando quiser. */
.recolhe{margin-top:4px}
.recolhe > summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:800;color:var(--cor);
  padding:8px 0 4px;display:flex;align-items:center;gap:6px}
.recolhe > summary::-webkit-details-marker{display:none}
.recolhe > summary::after{content:"▾";font-size:11px;opacity:.7}
.recolhe[open] > summary::after{content:"▴"}
.cartao.modelo .grande-nome{margin:6px 0 0;font-size:16px;line-height:1.35}

/* ---------- Cartão que dobra ----------
   Mesmo visual do cartão normal, com a setinha discreta no canto oposto ao título.
   Nada de botão colorido: o toque é no cabeçalho inteiro. */
.cartao.dobra{padding:0;overflow:hidden}
.cartao.dobra > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:16px 18px;position:relative}
.cartao.dobra > summary::-webkit-details-marker{display:none}
.cartao.dobra > summary h2{margin:0;flex:1;min-width:0}
.cartao.dobra > summary .selo{margin-right:20px}
.cartao.dobra > summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);
  transform:rotate(45deg);transition:transform .18s ease;opacity:.75}
.cartao.dobra[open] > summary::after{transform:rotate(225deg);margin-top:-2px}
.cartao.dobra > summary:active{opacity:.7}
.cartao.dobra > *:not(summary){padding-left:18px;padding-right:18px}
.cartao.dobra > *:last-child{padding-bottom:16px}
.cartao.dobra .lista{margin-top:-4px}

/* Passo da cadência dentro da cadência, com a prévia do e-mail. */
.passo-email{border-top:1px solid var(--linha)}
.passo-email > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:10px;align-items:center;padding:12px 24px 12px 0;position:relative}
.passo-email > summary::-webkit-details-marker{display:none}
.passo-email > summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:rotate(45deg);opacity:.7}
.passo-email[open] > summary::after{transform:rotate(225deg);margin-top:-2px}
.passo-email .num{text-align:right;font-weight:800}

/* O quadro da prévia: o HTML do SDR renderizado como o leitor vê. */
.email-quadro{border:1px solid var(--linha);border-radius:14px;overflow:hidden;margin:4px 0 10px;background:#eef1f5}
.email-real{display:block;width:100%;height:720px;border:0;background:#eef1f5}

/* A prévia antiga, montada à mão, ainda serve de reserva. */
.email-previa{border:1px solid var(--linha);border-radius:14px;overflow:hidden;margin:4px 0 10px;background:#fff}
.email-topo{padding:12px 14px;border-bottom:1px solid #e8ecf3;background:#f7f9fd}
.email-topo .de{display:block;font-size:11px;font-weight:700;color:#667085;margin-bottom:3px}
.email-topo .assunto{display:block;font-size:14.5px;color:#111827;line-height:1.35}
.email-banner{display:block;width:100%;height:auto}
.email-corpo{padding:14px;color:#1f2937;font-size:14px;line-height:1.6}
.email-corpo p{margin:0 0 11px}
.email-corpo p:last-child{margin-bottom:0}
.email-botao{display:inline-block;margin:0 14px 16px;padding:11px 18px;border-radius:10px;
  background:var(--cor);color:#fff;font-size:13.5px;font-weight:800}

/* Botão de tema na lateral do computador e logo maior e centralizada. */
.navegacao .troca-tema{display:none}
.troca-tema .icone-lua{display:none}
.troca-tema.no-escuro .icone-sol{display:none}
.troca-tema.no-escuro .icone-lua{display:block}
@media (min-width: 900px) {
  /* No computador a logo já está na lateral: no cabeçalho ela ficava repetida. */
  .cabecalho .marca-peq{display:none}
  .marca-lateral{justify-content:center;padding:6px 10px 20px}
  .marca-lateral img{height:42px}
  .navegacao .troca-tema{display:flex;margin-top:auto}
  .troca-tema svg{width:20px;height:20px;flex:0 0 auto}
}


/* Entrada com mais de uma pessoa: primeiro se escolhe quem é. */
.escolher-pessoa{display:flex;gap:14px;justify-content:center;margin:14px 0 4px;flex-wrap:wrap}
.escolher-pessoa .pessoa{display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:inherit;padding:10px 14px;border-radius:16px;border:1px solid var(--linha);
  background:var(--cartao);min-width:112px}
.escolher-pessoa .pessoa:active{transform:scale(.97)}
.escolher-pessoa .pessoa img,.escolher-pessoa .inicial{width:62px;height:62px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--c,#2563eb);color:#fff;font-size:24px;font-weight:800}
.escolher-pessoa .pessoa b{font-size:14px}
.escolher-pessoa .pessoa img{border:3px solid var(--c,#2563eb)}
/* A foto de quem está digitando o PIN. */
.quem-entra{display:grid;place-items:center;margin:4px 0 10px}
.quem-entra img,.quem-entra .inicial{width:86px;height:86px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--c,#2563eb);color:#fff;font-size:32px;font-weight:800;
  border:3px solid var(--c,#2563eb)}

/* Quem lançou, na carteira e na lista de compras. */
.de-quem{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:1px 7px;
  border-radius:999px;background:color-mix(in srgb, var(--c,#2563eb) 16%, transparent);color:var(--c,#2563eb);
  vertical-align:middle;margin-left:6px}

/* Lista do trabalho dela. */
.lista.atendimentos .num{text-align:right;white-space:nowrap}
.lista.atendimentos .marcar-pago{display:block;margin-top:3px}
.lista.atendimentos .marcar-pago .tag{border:0;cursor:pointer;font-family:inherit}


/* ======================================================================
   Leitor de código de barras dos alimentos (tela cheia, estilo Yazio)
   ====================================================================== */
.scanner{position:fixed;inset:0;background:#000;overflow:hidden;z-index:50}
.scan-camera{position:absolute;inset:0}
.scan-camera video{width:100%!important;height:100%!important;object-fit:cover}
/* A moldura que a biblioteca desenha sai de cena: a máscara abaixo é a nossa. */
.scan-camera #leitor__scan_region img,.scan-camera #qr-shaded-region{display:none!important}
.scan-camera #qr-shaded-region{border:0!important}

/* A máscara: um retângulo claro no meio e o resto escuro, feito com uma
   sombra gigante em volta do alvo. */
.scan-mascara{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.scan-alvo{width:min(82vw,330px);aspect-ratio:1.6/1;max-height:200px;border-radius:18px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.62);position:relative;overflow:hidden}
.scan-alvo::before,.scan-alvo::after{content:"";position:absolute;width:30px;height:30px;
  border:3px solid #00d06c;border-radius:10px}
.scan-alvo::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.scan-alvo::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.scan-linha{position:absolute;left:8%;right:8%;height:2px;border-radius:2px;background:#00d06c;
  box-shadow:0 0 12px 2px rgba(0,208,108,.75);animation:varrer 2.1s ease-in-out infinite}
@keyframes varrer{0%{top:12%}50%{top:86%}100%{top:12%}}

.scan-topo{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px;color:#fff;
  background:linear-gradient(rgba(0,0,0,.55),transparent)}
.scan-topo strong{flex:1;text-align:center;font-size:15px}
.scan-botao{width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.18);color:#fff;cursor:pointer}
.scan-botao svg{width:20px;height:20px}
.scan-botao.ativa{background:#00d06c;color:#06261a}

.scan-dica{position:absolute;left:0;right:0;top:calc(50% + min(41vw,110px));text-align:center;
  color:rgba(255,255,255,.92);font-size:13.5px;padding:0 24px;margin:18px 0 0}
.scan-dica.erro-dica{color:#ffd4d4}
.scanner.sem-camera .scan-mascara,.scanner.sem-camera .scan-linha{display:none}

.scan-base{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;justify-content:center;
  padding:16px 14px calc(env(safe-area-inset-bottom,0px) + 18px);
  background:linear-gradient(transparent,rgba(0,0,0,.65))}
.scan-link{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;
  padding:9px 14px;border-radius:999px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
  display:inline-block;line-height:1.2}
.scan-base label.scan-link{text-align:center}

/* A folha do resultado sobe de baixo, e fica por cima da câmera. */
.folha-alimento{z-index:60}
.folha-alimento .folha{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
.al-cabeca{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.al-cabeca img{width:54px;height:54px;border-radius:12px;object-fit:cover;background:var(--linha)}
.al-cabeca b{font-size:16px;line-height:1.25;display:block}
.al-kcal{margin:6px 0 0;font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1}
.al-kcal small{font-size:16px;font-weight:700;color:var(--suave);margin-left:6px}
.al-por{margin:2px 0 14px;font-size:12.5px}
.al-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.al-macro{background:var(--fundo);border-radius:12px;padding:10px}
.al-m-nome{display:block;font-size:11px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.03em}
.al-trilho{display:block;height:5px;border-radius:3px;background:var(--linha);margin:7px 0 6px;overflow:hidden}
.al-trilho i{display:block;height:100%;border-radius:3px;transition:width .2s}
.al-macro.prot .al-trilho i{background:#2563eb}
.al-macro.carb .al-trilho i{background:#f59e0b}
.al-macro.gord .al-trilho i{background:#ec4899}
.al-macro b{font-size:14px}
.al-porcao{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.al-porcao label{flex:0 0 110px}
.al-unidade{padding-bottom:12px;font-weight:700;color:var(--suave)}
.al-atalhos{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:6px}
.al-atalhos .chip{cursor:pointer;border:1px solid var(--linha);background:var(--cartao)}
.al-momento{display:block;margin-bottom:14px}
.al-momento span{display:block;font-size:12px;font-weight:700;color:var(--suave);margin-bottom:5px}
.al-momento select{width:100%;padding:11px 12px;border:1px solid var(--linha);border-radius:12px;
  background:var(--cartao);color:var(--texto);font-family:inherit;font-size:15px}
.al-erro{color:var(--neg);font-size:13px;margin:0 0 10px}
.lista.alimentos li{cursor:pointer}

/* Os dois caminhos da refeição: escanear ou anotar na mão. */
.dois-botoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.dois-botoes .botao{margin:0}
.botao.escanear{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.botao.escanear svg{width:19px;height:19px}
.al-macros.dia{margin:12px 0 0}
.al-macros.dia .al-macro{text-align:center}

/* Passos do dia, no alto do Treino. */
.cartao.passos .enorme{margin:2px 0 8px}
.link-fino{border:0;background:none;color:var(--cor);font-weight:700;font-family:inherit;
  font-size:12.5px;cursor:pointer;padding:0 0 0 6px;text-decoration:underline}

/* Caminhada e corrida medidas no aparelho. */
.atividade .ativ-principal{text-align:center}
.atividade .enorme small{font-size:17px;font-weight:700;color:var(--suave);margin-left:6px}
.ativ-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px}
.ativ-numeros .rot{display:block;font-size:11px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.03em}
.ativ-numeros b{font-size:20px;font-variant-numeric:tabular-nums}
.ativ-botoes{display:grid;gap:8px;margin:14px 0 8px}
/* A regra do .botao tem mais peso que o [hidden] do HTML: sem isto os botões de
   pausar e encerrar aparecem antes de começar. */
.ativ-botoes .botao[hidden]{display:none}
.botao.grande{padding:17px;font-size:16px}
.ativ-aviso{font-size:12.5px;line-height:1.45;text-align:center;padding:0 6px}
.botao.medir{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.botao.medir svg{width:18px;height:18px}

/* A chave do atalho do celular, no perfil. */
.chave-atalho{display:flex;gap:8px;align-items:center;margin:10px 0 4px;flex-wrap:wrap}
.chave-atalho code{flex:1;min-width:180px;background:var(--fundo);border:1px solid var(--linha);
  border-radius:10px;padding:10px 12px;font-size:12.5px;word-break:break-all;font-family:ui-monospace,monospace}
.botao.pequeno{padding:10px 14px;font-size:13px;margin:0;width:auto}

.aviso-carteira{font-size:12.5px;line-height:1.45;margin:8px 2px 0}