/* Fregu — painel. Tokens, botões, abas, campos, cartões e diálogos vêm de base.css; aqui fica só o que é da tela. */

.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }

/* ---------- Menu ---------- */
.menu { background: var(--fundo-2); border-right: 1px solid var(--linha); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.menu .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; padding: 0 10px 18px; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--texto-2); text-decoration: none; font-weight: 500; }
.item:hover { background: var(--linha); color: var(--texto); }
.item.ativo { background: var(--fundo-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }
.item .ico { width: 22px; text-align: center; }
.item em { margin-left: auto; font-style: normal; font-size: .75rem; color: var(--texto-3); border: 1px solid var(--linha); padding: 1px 7px; border-radius: 99px; }
.item.breve { opacity: .75; }
.zap { margin-top: auto; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--r-card); padding: 14px; font-size: .85rem; }
.zap strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; }
.zap p { color: var(--texto-3); margin: 6px 0 0; line-height: 1.45; }

/* ---------- Painel ---------- */
.painel { padding: 22px clamp(16px, 4vw, 40px) 60px; max-width: 760px; width: 100%; min-width: 0; margin: 0 auto; }
.redondo { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--cartao); display: grid; place-items: center; cursor: pointer; }
.redondo:hover { background: var(--fundo-3); }

/* Faixa de dias */
.semana { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; }
.semana::-webkit-scrollbar { display: none; }
.dia { flex: 1 0 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 10px; border: 0; background: none; border-radius: 26px; cursor: pointer; color: var(--texto-2); }
.dia small { font-size: .78rem; }
.dia:hover { background: var(--linha); }
.dia.sel { background: #fafafa; color: #09090b; }
.dia.sel .anel b { color: #09090b !important; }
.dia.futuro { opacity: .45; }
.anel { position: relative; width: 34px; height: 34px; }
.anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anel b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: var(--texto); }
.dia.sel .anel b { color: #fff; }

/* Grupos e hábitos */
.lista { display: grid; gap: 14px; }
.grupo { border: 1px solid var(--linha); background: var(--fundo-2); border-radius: 16px; padding: 4px 6px 6px; }
.grupo-topo { display: flex; align-items: center; gap: 12px; padding: 12px 10px 8px; }
.g-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: none; }
.grupo-topo h2 { display: flex; align-items: baseline; gap: 8px; flex: 1; margin: 0; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; cursor: pointer; }
.grupo-topo .contagem { color: var(--texto-3); font-size: .8rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.g-prog { width: 64px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.g-prog i { display: block; height: 100%; border-radius: inherit; background: var(--cor); }
.seta { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; transition: transform .2s, background .15s, color .15s; }
.seta:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }
.grupo.fechado .seta { transform: rotate(180deg); }
.grupo.fechado .habitos { display: none; }
.habitos { display: grid; }

.habito { --cor: #5b6cf0; position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.habito + .habito::before { content: ""; position: absolute; top: 0; left: 68px; right: 10px; height: 1px; background: var(--linha); }
.habito:hover { background: rgba(255, 255, 255, .03); }
.h-tile { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; color: color-mix(in srgb, var(--cor) 55%, #fff); background: color-mix(in srgb, var(--cor) 22%, var(--fundo)); border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); transition: opacity .2s; }
.h-tile .i { width: 22px; height: 22px; }
.h-emo { font-size: 1.3rem; line-height: 1; }
.habito .info { flex: 1; min-width: 0; }
.habito strong { display: block; font-size: .96rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.habito .sub { font-size: .8rem; color: var(--texto-3); }
.habito.feito strong { color: var(--texto-2); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.habito.feito .h-tile { opacity: .7; }

.hist { display: flex; align-items: center; gap: 5px; }
.hist i { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--linha-2); }
.hist i.ok { background: var(--cor); border-color: var(--cor); }
.hist i.falhou { border-color: rgba(255, 93, 93, .55); }
.hist i.hoje { border-color: var(--texto-2); }
.hist i.off { height: 2px; border: 0; border-radius: 1px; background: var(--linha-2); }
.seq { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: .78rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seq.pos { color: #ffb44d; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); }
.seq.neg { color: #ff9a9a; background: rgba(255, 93, 93, .1); border: 1px solid rgba(255, 93, 93, .28); }
.seq .i { width: 13px; height: 13px; }

.marcar { position: relative; width: 46px; height: 46px; flex: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; color: color-mix(in srgb, var(--cor, #ff6d29) 55%, #fff); transition: transform .15s; }
.marcar .aro { position: absolute; inset: 0; display: block; }
.marcar .aro svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.marcar::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: color-mix(in srgb, var(--cor, #ff6d29) 14%, transparent); transition: background .18s, inset .18s; }
.marcar .simbolo { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.marcar .simbolo .i { width: 18px; height: 18px; stroke-width: 2.4; }
.marcar:hover:not([disabled])::before { background: color-mix(in srgb, var(--cor, #ff6d29) 28%, transparent); inset: 4px; }
.marcar.ok { color: #fff; }
.marcar.ok::before { background: var(--cor); inset: 4px; }
.marcar.ok .simbolo .i { width: 20px; height: 20px; stroke-width: 2.8; }
.marcar[disabled] { opacity: .4; cursor: default; }
.marcar:active:not([disabled]) { transform: scale(.92); }
.marcar:focus-visible, .dia:focus-visible, .habito:focus-visible { outline: 2px solid var(--marca-clara); outline-offset: 2px; }

.hab-resumo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 14px; padding: 18px 20px; }
.hr-anel { position: relative; width: 76px; height: 76px; }
.hr-anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hr-anel b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.hr-txt { display: grid; gap: 2px; }
.hr-txt strong { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.hr-txt small { color: var(--texto-2); font-size: .88rem; }
.hr-nums { display: flex; gap: 22px; margin: 0; }
.hr-nums dt { color: var(--texto-3); font-size: .76rem; }
.hr-nums dd { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.hr-nums dd .i { width: 15px; height: 15px; color: #ffb44d; }
.hr-nums .hr-quem { margin: 0; color: var(--texto-3); font-size: .78rem; font-weight: 400; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sug-habitos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 14px; }
.sug-habitos button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linha-2); border-radius: 100vw; background: var(--fundo-2); color: var(--texto); font: inherit; font-size: .9rem; cursor: pointer; transition: border-color var(--t), background var(--t); }
.sug-habitos button:hover { border-color: #3a3a42; background: var(--fundo-3); }
.sug-habitos .i { width: 18px; height: 18px; }
.vazio .btn { margin-top: 4px; }

@media (max-width: 720px) {
  .hab-resumo { grid-template-columns: auto minmax(0, 1fr); }
  .hr-nums { grid-column: 1 / -1; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--linha); }
}
@media (max-width: 560px) { .hist { display: none; } .habito + .habito::before { left: 70px; } }

/* ---------- Modal ---------- */
.modal input.emoji { font-size: 1.2rem; text-align: center; }
.modal fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.modal legend { font-size: .82rem; color: var(--texto-2); font-weight: 500; margin-bottom: 8px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cores label { display: block; }
.cores input { position: absolute; opacity: 0; pointer-events: none; }
.cores span { display: block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.cores input:checked + span { border-color: #fff; }
.cores input:focus-visible + span { outline: 2px solid var(--marca-clara); outline-offset: 2px; }
.opcoes, .dias { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex !important; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 100vw; border: 1px solid var(--linha-2); background: var(--fundo-3); cursor: pointer; color: var(--texto-2) !important; font-weight: 400; transition: border-color var(--t), color var(--t), background var(--t); }
.chip:hover { color: var(--texto) !important; }
.chip:has(input:checked) { border-color: var(--texto); background: rgba(255, 255, 255, .06); color: var(--texto) !important; }
.chip input { accent-color: var(--marca); margin: 0; }
.dias .chip { padding: 6px 10px; }
.aviso { position: fixed; left: 50%; bottom: 24px; translate: -50% 16px; opacity: 0; pointer-events: none; background: var(--cartao); border: 1px solid var(--linha-2); padding: 10px 18px; border-radius: 100vw; font-size: .9rem; font-weight: 500; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); transition: opacity var(--t) var(--curva), translate var(--t) var(--curva); z-index: 60; }
.aviso.ver { opacity: 1; translate: -50% 0; }

/* ---------- Celular: menu vira barra embaixo ---------- */
.item-mais { display: none; }
@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; inset: auto 0 0 0; top: auto; height: auto; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--linha); background: rgba(9, 9, 11, .92); backdrop-filter: blur(12px); z-index: 5; }
  .menu .marca, .zap, .item em, .item.so-mais { display: none; }
  .item, .item-mais { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; font-weight: 500; padding: 6px 2px 4px; flex: 1; text-align: center; min-width: 0; border: 0; background: none; color: var(--texto-3); border-radius: 12px; }
  .item.ativo, .item-mais.ativo { background: none; box-shadow: none; color: var(--texto); }
  .item .ico, .item-mais .ico { display: grid; place-items: center; width: 44px; height: 28px; border-radius: 100vw; transition: background var(--t); }
  .item.ativo .ico, .item-mais.ativo .ico { background: var(--fundo-3); }
  .painel { padding-bottom: 104px; }
}
/* folha "Mais" no celular: sobe de baixo com as áreas que não cabem na barra */
.folha { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-dlg) var(--r-dlg) 0 0; border-bottom: 0; }
.folha[open] { animation: folha-sobe .26s var(--curva); }
@keyframes folha-sobe { from { transform: translateY(24px); opacity: 0; } }
.folha-corpo { display: grid; gap: 4px; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); }
.folha-corpo h2 { padding: 8px 10px 6px; font-size: .78rem; font-weight: 500; color: var(--texto-3); letter-spacing: 0; }
.folha-corpo .item, .folha-corpo .item.ativo { flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px; font-size: .98rem; text-align: left; color: var(--texto); border-radius: var(--r-ctl); }
.folha-corpo .item.ativo { background: var(--fundo-3); box-shadow: none; }
.folha-corpo .item .ico, .folha-corpo .item.ativo .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--fundo-3); color: var(--texto-2); }
.folha-corpo .item.ativo .ico { background: var(--cartao); color: var(--texto); }
.folha-puxa { width: 36px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--linha-2); }
@media (max-width: 420px) {
  .dupla { grid-template-columns: 1fr; }
  .habito { padding: 16px 10px 16px 12px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Finanças ---------- */
.item .ico { display: grid; place-items: center; }
.painel.largo { max-width: 1040px; }
.fin-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }

/* resumo */
.fin-resumo { padding: 24px; }
.res-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.saldo { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.saldo.neg { color: #ff8a8a; }
.res-delta { font-size: .85rem; }
.delta { font-weight: 500; }
.delta.baixa { color: #4ade80; }
.delta.alta { color: #ffb44d; }
.delta-txt { color: var(--texto-3); }
.res-barra { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin: 20px 0 16px; overflow: hidden; }
.res-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); transition: width .5s; }
.res-barra.estourou i { background: #ef4444; }
.res-leg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.res-leg dt { color: var(--texto-3); font-size: .78rem; }
.res-leg dd { margin: 2px 0 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.res-leg small { color: var(--texto-3); font-weight: 400; }

.cat-info { flex: 1; min-width: 0; display: grid; text-align: left; line-height: 1.3; }
.cat-info strong { font-size: .95rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-info small { color: var(--texto-3); font-size: .8rem; }
.cat-val { font-variant-numeric: tabular-nums; font-weight: 500; font-size: .95rem; white-space: nowrap; }

/* categorias */
.cat { padding: 10px 0 12px; border-bottom: 1px solid var(--linha); }
.cat:last-child { border-bottom: 0; }
.cat-b { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 12px; }
.cat-b:hover { background: rgba(255, 255, 255, .03); }
.cat.sel .cat-b { background: rgba(255, 255, 255, .06); }
.cat-barra { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin: 8px 4px 0; overflow: hidden; }
.cat-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); }
.cat.perto .cat-barra i { background: #f59e0b; }
.cat.estouro .cat-barra i { background: #ef4444; }
.cat.livre .cat-barra i { background: rgba(255, 109, 41, .55); }
.cat.perto .cat-info small { color: #ffb44d; }
.cat.estouro .cat-info small { color: #ff8a8a; }
.cat .link-btn.mini { margin-left: 4px; }

/* gastos por dia */
.dias-chart { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; align-items: end; height: 150px; }
.dias-chart span { height: var(--h); min-height: 3px; border-radius: 4px 4px 1px 1px; background: rgba(255, 109, 41, .6); transition: height .4s; }
.dias-chart span.hoje { background: #ff8247; }
.dias-chart span.zero { background: rgba(255, 255, 255, .12); }
.dias-chart span.futuro { background: none; border-top: 1.5px dashed var(--linha); border-radius: 0; }
.dias-eixo { display: flex; justify-content: space-between; color: var(--texto-3); font-size: .75rem; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* contas */
.conta { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.conta:last-child { border-bottom: 0; }
.conta.perto .cat-info small { color: #ffb44d; }
.conta.atrasada .cat-info small { color: #ff8a8a; }
.conta.paga { opacity: .6; }
.conta .btn-peq { margin-left: 4px; }

/* metas */
.meta { display: grid; gap: 8px; width: 100%; padding: 12px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.meta:hover { border-color: var(--linha-2); }
.meta-topo { display: flex; justify-content: space-between; font-size: .95rem; }
.meta-topo span { color: var(--texto-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.meta-barra { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meta-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); }
.meta small { color: var(--texto-3); }

/* lançamentos */
.chip-f { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; margin-bottom: 10px; border: 1px solid var(--texto); border-radius: 100vw; background: rgba(255, 255, 255, .06); color: var(--texto); font: inherit; font-size: .82rem; cursor: pointer; }
.dia-cab { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 4px; color: var(--texto-3); font-size: .82rem; }
.dia-cab h3 { margin: 0; font-size: .82rem; font-weight: 500; }
.dia-cab span { font-variant-numeric: tabular-nums; }
.lanc { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lanc:hover { background: rgba(255, 255, 255, .04); }
.lanc-val { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.lanc-val.entrada { color: var(--marca-clara); }
.via { display: inline-flex; align-items: center; gap: 4px; }
.via .i { width: 12px; height: 12px; }

/* formulário */
.segmento { display: flex; gap: 8px; }
.erro-form { min-height: 1.2em; margin: 0; color: #ff9a9a; font-size: .85rem; }
.modal .dica { margin: -4px 0 0; }

@media (max-width: 1180px) {
  .fin-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .res-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .mes-nav strong { min-width: 110px; }
  .topo { flex-wrap: wrap; }
  .topo h1 { flex-basis: 100%; }
}

.aguarde { color: var(--texto-3); }
.conta { flex-wrap: wrap; }
.conta .cat-info { min-width: 120px; }
.conta .cat-info strong { white-space: normal; }

/* ---------- Tarefas ---------- */
.i.mini { width: 14px; height: 14px; }
.rapido { position: relative; display: flex; }
.rapido input { flex: 1; min-width: 0; min-height: 52px; padding: 0 60px 0 20px; border: 1px solid var(--linha-2); border-radius: 100vw; background: var(--fundo-2); color: var(--texto); font: inherit; font-size: .98rem; transition: border-color var(--t), box-shadow var(--t); }
.rapido input::placeholder { color: var(--texto-3); }
.rapido input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 109, 41, .22); }
.rapido-ir { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--marca); color: #fff; cursor: pointer; transition: background var(--t), transform var(--t) var(--curva); }
.rapido-ir:hover { background: #e85a18; }
.rapido-ir:active { transform: scale(.94); }
.rapido-ir .i { width: 18px; height: 18px; stroke-width: 2; }
.rapido-prev { min-height: 1.4em; margin: 8px 20px 14px; color: var(--texto-2); font-size: .85rem; }
.rapido-prev strong { color: var(--texto); font-weight: 500; }
.tar-resumo { padding: 18px 20px; margin-bottom: 14px; }
.tar-res-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tar-res-n { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.tar-resumo .res-barra { margin: 14px 0 0; }
.chip-atraso, .chip-ok { padding: 6px 12px; border-radius: 99px; font-size: .8rem; font-weight: 500; }
.chip-atraso { background: rgba(239, 68, 68, .14); color: var(--perigo-claro); }
.chip-ok { border: 1px solid var(--linha-2); color: var(--texto-2); }
.abas-tar { display: flex; width: 100%; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.abas-tar button { flex: 1; white-space: nowrap; }
.abas-tar span { margin-left: 4px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.abas-tar button[aria-pressed=true] span { color: rgba(9, 9, 11, .6); }
.tar-grupo h3 { display: flex; align-items: center; gap: 8px; margin: 20px 0 6px; font-size: .82rem; font-weight: 500; color: var(--texto-3); }
.tar-grupo h3 span { font-variant-numeric: tabular-nums; }
.tar-grupo.atrasada h3 { color: #ff9a9a; }
.tarefa { display: flex; align-items: flex-start; gap: 6px; border-bottom: 1px solid var(--linha); }
.check { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px; border: 0; background: none; cursor: pointer; padding: 0; }
.check::before { content: ""; position: absolute; }
.check { position: relative; }
.check::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #52525b; background: transparent; position: absolute; transition: background var(--t), border-color var(--t), transform var(--t) var(--curva); }
.check:hover::after { border-color: var(--texto-2); }
.check:active::after { transform: scale(.9); }
.check.ok::after { background: var(--texto); border-color: var(--texto); }
.check .i { position: relative; z-index: 1; width: 14px; height: 14px; stroke: var(--fundo); stroke-width: 2.6; }
.tar-corpo { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 11px 6px 12px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.tar-corpo:hover strong { color: #fff; }
.tar-corpo strong { font-size: .98rem; font-weight: 500; }
.tarefa.feita .tar-corpo strong { color: var(--texto-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.tar-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--texto-3); font-size: .8rem; }
.tar-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.lista-tag i { width: 8px; height: 8px; border-radius: 50%; }
.atraso { color: #ff9a9a; }
.lembrete { color: var(--texto-3); }

/* ---------- Estudos ---------- */
.est-topo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.sem-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 120px; margin-top: 4px; }
.sem-chart span { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 6px; height: 100%; }
.sem-chart i { align-self: end; width: 70%; max-width: 38px; height: var(--h); min-height: 3px; border-radius: 6px 6px 2px 2px; background: rgba(255, 109, 41, .6); transition: height .4s; }
.sem-chart .hoje i { background: #ff8247; }
.sem-chart .futuro i { background: none; border-top: 1.5px dashed var(--linha); border-radius: 0; }
.sem-chart small { color: var(--texto-3); font-size: .75rem; }
.sem-chart .hoje small { color: var(--texto); }
.est-foco { display: grid; gap: 14px; align-content: start; }
.est-foco h2 { margin-bottom: 0; }
.est-foco select { width: 100%; min-height: 44px; padding: 0 12px; background: var(--cartao); color: var(--texto); border: 1px solid var(--linha); border-radius: 12px; font: inherit; }
.foco-tempo { text-align: center; font-size: 3.2rem; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; padding: 6px 0; }
.foco-pre { display: flex; justify-content: center; gap: 6px; }
.foco-pre button { min-height: 36px; padding: 0 14px; border: 1px solid var(--linha-2); border-radius: 100vw; background: none; color: var(--texto-2); font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.foco-pre button[aria-pressed=true] { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.foco-pre button:disabled { opacity: .5; cursor: default; }
.foco-acoes { display: flex; gap: 10px; justify-content: center; }
.foco-acoes .btn { flex: 1; }
.materias { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.materia { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-3); transition: border-color var(--t); }
.materia:hover { border-color: var(--linha-2); }
.mat-topo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.mat-topo i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: none; }
.mat-topo strong { flex: 1; font-weight: 500; }
.mat-topo span { color: var(--texto-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.materia .meta-barra i { background: var(--cor); }
.materia small { color: var(--texto-2); font-size: .8rem; }
.materia .btn-peq { justify-self: start; }
.prova { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--linha); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.prova:last-child { border-bottom: 0; }
.prova-d { font-size: .82rem; color: var(--texto-2); white-space: nowrap; }
.prova.perto .prova-d { color: #ffb44d; font-weight: 500; }

/* formulários extras */
.marca-linha { display: flex !important; align-items: center; gap: 10px; color: var(--texto) !important; font-size: .9rem !important; }
.marca-linha[hidden] { display: none !important; }
.marca-linha input { width: 20px; height: 20px; accent-color: var(--marca); margin: 0; }

@media (max-width: 1180px) { .est-topo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .foco-tempo { font-size: 2.8rem; } }

/* ---------- Hoje ---------- */
.topo-hoje { align-items: flex-start; }
.topo-txt h1 { margin: 0; }
.sub-topo { margin: 2px 0 0; color: var(--texto-3); font-size: .9rem; }
.topo-txt { margin-right: auto; }
.busca-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 16px; border: 1px solid var(--linha); border-radius: 100vw; background: var(--fundo-2); color: var(--texto-2); font: inherit; font-size: .88rem; cursor: pointer; transition: border-color var(--t), color var(--t); }
.busca-btn:hover { border-color: var(--linha-2); color: var(--texto); }
.busca-btn .i { width: 16px; height: 16px; }
kbd { padding: 2px 7px; border: 1px solid var(--linha); border-radius: 6px; background: var(--cartao); color: var(--texto-3); font: inherit; font-size: .75rem; }
.hoje-grade { display: grid; gap: 12px; margin-bottom: 16px; }
.hoje-lider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: end; padding: 22px 24px; color: inherit; text-decoration: none; transition: border-color var(--t); }
.hoje-lider:hover { border-color: var(--linha-2); }
.hoje-lider .rot { margin: 0; }
.hoje-lider strong { grid-row: 2; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hoje-lider strong.neg { color: #ff8a8a; }
.hoje-lider .r-barra { grid-column: 1 / -1; grid-row: 3; display: block; position: relative; height: 6px; margin: 12px 0 6px; border-radius: 100vw; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hoje-lider .r-barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--marca); }
.hoje-lider small { grid-column: 1 / -1; color: var(--texto-3); font-size: .84rem; }
.hoje-lider .lider-hoje { grid-column: 2; grid-row: 1 / 3; display: grid; justify-items: end; align-content: end; gap: 2px; text-align: right; }
.hoje-lider .lider-hoje b { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hoje-lider .lider-hoje span { color: var(--texto-3); font-size: .78rem; }
.hoje-lider .lider-hoje .estouro { color: var(--aviso); }
@media (max-width: 520px) { .hoje-lider { grid-template-columns: 1fr; padding: 18px; } .hoje-lider .lider-hoje { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; margin-top: 4px; } }
.comeco { margin-bottom: 16px; padding: 26px; }
.comeco h2 { font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; color: var(--texto); margin: 0 0 8px; }
.comeco p { margin: 0; color: var(--texto-2); max-width: 46ch; }
.exemplos { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.exemplos button { min-height: 44px; padding: 0 18px; border: 1px solid var(--linha-2); border-radius: 100vw; background: var(--fundo-3); color: var(--texto); font: inherit; font-size: .92rem; cursor: pointer; transition: border-color var(--t), background var(--t); }
.exemplos button:hover { border-color: #3a3a42; background: var(--cartao); }
.comeco .comeco-dica { font-size: .85rem; color: var(--texto-3); max-width: none; }
.h-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); color: inherit; text-decoration: none; }
.h-linha:last-child { border-bottom: 0; }
.h-txt { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.h-txt strong { font-size: .95rem; font-weight: 500; }
.h-txt small { color: var(--texto-3); font-size: .8rem; }
.h-txt small.atraso { color: #ff9a9a; }
.h-txt small.perto-t { color: #ffb44d; }
.h-hab i { width: 4px; align-self: stretch; border-radius: 2px; background: var(--cor); }
.h-hab.ok .h-txt strong { color: var(--texto-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.h-hab .i { color: var(--marca-clara); }
.cont-q { color: var(--texto-3); font-weight: 400; margin-left: 6px; }
.conquistas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.conquistas li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--linha); border-radius: 14px; background: transparent; opacity: .6; }
.conquistas li.ok { opacity: 1; border-color: var(--linha-2); background: var(--fundo-3); }
.conquistas li > span:last-child { display: grid; line-height: 1.3; }
.conquistas strong { font-size: .88rem; font-weight: 500; }
.conquistas small { color: var(--texto-3); font-size: .76rem; }
.q-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--texto-3); flex: none; }
.conquistas li.ok .q-ico { background: var(--marca); color: #fff; }

/* ---------- Calendário ---------- */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cal-sem, .cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-sem span { text-align: center; color: var(--texto-3); font-size: .75rem; padding-bottom: 8px; }
.cal-dia { display: grid; align-content: start; justify-items: center; gap: 6px; min-height: 64px; padding: 8px 2px 6px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--texto); font: inherit; cursor: pointer; }
.cal-dia:hover { background: rgba(255, 255, 255, .04); }
.cal-dia b { font-weight: 500; font-size: .9rem; font-variant-numeric: tabular-nums; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.cal-dia.fora { opacity: .35; }
.cal-dia.hoje b { background: var(--marca); color: #fff; }
.cal-dia.sel { border-color: var(--texto); background: rgba(255, 255, 255, .04); }
.pontos { display: flex; gap: 3px; min-height: 6px; }
.pontos i { width: 6px; height: 6px; border-radius: 50%; }
.cal-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 14px 0 0; padding: 0; color: var(--texto-3); font-size: .78rem; }
.cal-leg li { display: inline-flex; align-items: center; gap: 6px; }
.cal-leg i { width: 8px; height: 8px; border-radius: 50%; }
.cal-tit { font-size: 1rem !important; color: var(--texto) !important; }
.cal-dia ~ h3, #cal-dia h3 { margin: 16px 0 4px; font-size: .78rem; font-weight: 500; color: var(--texto-3); }
.cal-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); color: inherit; text-decoration: none; }
.cal-item i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cal-item > span { display: grid; line-height: 1.3; min-width: 0; }
.cal-item strong { font-size: .92rem; font-weight: 500; }
.cal-item small { color: var(--texto-3); font-size: .78rem; }
.cal-item.feita strong { color: var(--texto-3); text-decoration: line-through; }
.cal-add { margin-top: 16px; width: 100%; }
@media (max-width: 1180px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cal-dia { min-height: 54px; } }

/* ---------- Ajustes ---------- */
.aj { margin-bottom: 14px; }
.aj-linha { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.aj-linha:last-child { border-bottom: 0; }
.aj-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cartao); color: var(--texto-2); flex: none; }
.aj-ico.perigo { color: #ff8a8a; }
.aj-txt { flex: 1; min-width: 180px; display: grid; line-height: 1.35; }
.aj-txt strong { font-weight: 500; font-size: .95rem; }
.aj-txt small { color: var(--texto-3); font-size: .82rem; }
.aj-sub { margin: 18px 0 2px; font-size: .8rem; font-weight: 500; color: var(--texto-3); }
.aj-linha input[type=time], .aj-linha select { min-height: 40px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--cartao); color: var(--texto); font: inherit; font-size: .88rem; }
.codigo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin: 4px 0; border: 1px dashed var(--linha-2); border-radius: 14px; background: var(--fundo-3); }
.codigo strong { font-size: 1.6rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; font-weight: 500; }
.codigo.grande { justify-content: center; padding: 22px; }
.codigo.grande strong { font-size: 2.2rem; }
.aj-links { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 10px; }
.aj-links a, .aj-links .link-btn { color: var(--texto-2); font-size: .88rem; padding: 10px 0; }
.aj-links a:hover { color: var(--texto); }
.arq { cursor: pointer; }
.arq input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.arq:focus-within { outline: 2px solid var(--marca-clara); outline-offset: 2px; }
.perigo-b { color: #ff9a9a; border-color: rgba(239, 68, 68, .4); }

/* ---------- Busca (Ctrl+K) ---------- */
.paleta { width: min(620px, calc(100vw - 24px)); max-height: min(560px, 80dvh); margin: 12vh auto auto; overflow: hidden; }
.paleta[open] { display: flex; flex-direction: column; animation: dlg-entra .22s var(--curva); }
.pal-campo { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--linha); color: var(--texto-3); }
.pal-campo input { flex: 1; min-height: 58px; border: 0; background: none; color: var(--texto); font: inherit; font-size: 1rem; }
.pal-campo input:focus { outline: none; }
#busca-lista { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.pal-grupo { padding: 10px 10px 4px; color: var(--texto-3); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; }
.pal-item.ativo { background: var(--fundo-3); }
.pal-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--texto-2); flex: none; }
.pal-item.ativo .pal-ic { background: var(--texto); color: var(--fundo); }
.pal-txt { display: grid; line-height: 1.3; min-width: 0; }
.pal-txt strong { font-weight: 500; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-txt small { color: var(--texto-3); font-size: .78rem; }
.pal-vazio { padding: 22px; text-align: center; color: var(--texto-3); }
.pal-dica { margin: 0; padding: 10px 16px; border-top: 1px solid var(--linha); color: var(--texto-3); font-size: .75rem; }

/* ---------- Introdução ---------- */
.onboarding { width: min(520px, calc(100vw - 24px)); }
.onboarding > div { padding: 26px; display: grid; gap: 14px; }
.ob-pontos { display: flex; gap: 6px; }
.ob-pontos i { width: 28px; height: 4px; border-radius: 2px; background: var(--linha-2); }
.ob-pontos i.ativo { background: var(--marca); }
.ob-p { margin: 0; color: var(--texto-2); font-size: .95rem; }
.ob-areas { display: grid; gap: 8px; }
.ob-area { display: flex !important; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo-3); cursor: pointer; color: var(--texto) !important; transition: border-color var(--t); }
.ob-area:has(input:checked) { border-color: var(--texto); }
.ob-area input { width: 20px; height: 20px; accent-color: var(--marca); margin: 0; }
.ob-area span { display: grid; line-height: 1.3; }
.ob-area strong { font-weight: 500; }
.ob-area small { color: var(--texto-3); font-size: .8rem; }
.ob-input { width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid var(--linha-2); border-radius: 100vw; background: var(--fundo-3); color: var(--texto); font: inherit; font-size: 1rem; }
.ob-input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 109, 41, .22); }
.ob-prev { margin: 0; min-height: 1.4em; color: var(--texto-2); font-size: .85rem; }
.acoes .link-btn { padding: 10px 4px; }
@media (max-width: 820px) {
  .item-aj { margin-top: 0; }
  .topo-hoje { flex-wrap: wrap; }
  .busca-btn span { display: none; }
  .busca-btn kbd { display: none; }
}

/* ---------- Finanças: contas, orçamento, fixos, importar, relatório ---------- */
.sub-h { margin: 18px 0 6px; font-size: .8rem; font-weight: 500; color: var(--texto-3); }
.bancos-total { display: grid; gap: 2px; margin-bottom: 10px; }
.bancos-total strong { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bancos-total small { color: var(--texto-3); font-size: .8rem; }
.banco { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; border-top: 1px solid var(--linha); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.banco:hover { background: rgba(255, 255, 255, .03); }
.banco .tile { --cor: var(--cor); }
.banco-val { display: grid; justify-items: end; line-height: 1.2; }
.sub-val { color: var(--texto-3); font-size: .75rem; }
.cat-val.neg { color: #ff8a8a; }
.orc { padding: 10px 0 12px; border-bottom: 1px solid var(--linha); }
.orc:last-of-type { border-bottom: 0; }
.orc-topo { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .92rem; }
.orc-topo span { font-variant-numeric: tabular-nums; font-weight: 500; }
.orc-topo small { color: var(--texto-3); font-weight: 400; }
.orc-barra { position: relative; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin-bottom: 6px; }
.orc-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); }
.orc.alerta .orc-barra i { background: #f59e0b; }
.orc-barra b { position: absolute; top: -3px; width: 2px; height: 14px; background: #fff; border-radius: 1px; opacity: .8; }
.orc small { color: var(--texto-3); font-size: .78rem; }
.orc.alerta small:first-of-type { color: #ffb44d; }
.sel-filtro { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 0 38px 0 14px; margin: 0; border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a1a1aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--texto); font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; max-width: 100%; }
.sel-filtro:hover { border-color: var(--texto-3); }
.sel-filtro:focus-visible { outline: 2px solid var(--marca-clara); outline-offset: 1px; }

/* diálogos criados por código */
.dlg-corpo { display: grid; gap: 14px; padding: 22px; }
.modal .dlg-corpo h2 { margin: 0; }
.lista-cats { display: grid; max-height: 46dvh; overflow-y: auto; }
.icones { display: flex; flex-wrap: wrap; gap: 6px; }
.icones label { display: block; }
.icones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.icones span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto-2); cursor: pointer; }
.icones input:checked + span { border-color: var(--texto); background: rgba(255, 255, 255, .08); color: #fff; }
.icones input:focus-visible + span { outline: 2px solid var(--marca-clara); outline-offset: 2px; }
#dlg-imp, #dlg-rel { width: min(720px, calc(100vw - 24px)); }
.imp-info { color: var(--texto-2); font-size: .88rem; }
.imp-tabela { max-height: 38dvh; overflow-y: auto; border: 1px solid var(--linha); border-radius: 12px; }
.imp-linha { display: grid !important; grid-template-columns: auto 52px minmax(0, 1fr) 130px auto; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--linha); font-size: .85rem; color: var(--texto) !important; }
.imp-linha:last-child { border-bottom: 0; }
.imp-linha.dup { opacity: .55; }
.imp-linha input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--marca); margin: 0; }
.imp-linha select { min-height: 34px; padding: 0 6px; border: 1px solid var(--linha); border-radius: 8px; background: var(--cartao); color: var(--texto); font: inherit; font-size: .8rem; width: 100%; }
.imp-d { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.imp-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-v { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.imp-v.entrada { color: var(--marca-clara); }
@media (max-width: 560px) { .imp-linha { grid-template-columns: auto minmax(0, 1fr) auto; } .imp-d, .imp-linha select, .imp-c { display: none; } }
.rel-tab { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rel-tab th { text-align: left; color: var(--texto-3); font-weight: 500; font-size: .76rem; padding: 4px 0; }
.rel-tab td { padding: 7px 0; border-top: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.rel-tab td:not(:first-child), .rel-tab th:not(:first-child) { text-align: right; }

@media print {
  body > *:not(#dlg-rel):not(#dlg-fech) { display: none !important; }
  #dlg-rel, #dlg-fech { position: static; display: block; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: #fff; color: #111; overflow: visible; max-height: none; }
  #dlg-rel::backdrop, #dlg-fech::backdrop { display: none; }
  #dlg-rel *, #dlg-fech * { color: #111 !important; border-color: #ccc !important; background: transparent !important; }
  .nao-imprimir { display: none !important; }
  .dlg-corpo { padding: 0; }
}

/* tarefas: linha, subtarefas */
.tarefa { display: block; border-bottom: 1px solid var(--linha); }
.tar-linha { display: flex; align-items: flex-start; gap: 6px; }
.subs-mini { display: grid; gap: 2px; padding: 0 0 10px 50px; }
.sub-linha { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--texto-2); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; }
.sub-linha i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #52525b; flex: none; }
.sub-linha.ok { color: var(--texto-3); text-decoration: line-through; }
.sub-linha.ok i { background: var(--marca); border-color: var(--marca); }
.sub-linha:hover i { border-color: var(--marca-clara); }
.subs { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.subs legend { font-size: .82rem; color: var(--texto-2); font-weight: 500; margin-bottom: 6px; }
.subs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.subs-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-edit { display: flex !important; align-items: center; gap: 10px; flex: 1; color: var(--texto) !important; }
.sub-edit input { width: 18px; height: 18px; accent-color: var(--marca); margin: 0; }
.sub-add { display: flex; gap: 8px; }
.sub-add input { flex: 1; }

/* estudos: plano e flashcards */
.plano-t { color: var(--marca-clara) !important; }
.fc-resumo { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.fc-resumo > div { display: grid; line-height: 1.3; }
.fc-n { font-size: 2rem; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.fc-resumo span { color: var(--texto-2); }
.fc-resumo small { color: var(--texto-3); }
.fc-mats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.fc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--cor) 14%, var(--fundo)); font-size: .8rem; }
.fc-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); }
.fc-chip b { font-weight: 500; }
.fc-topo { display: flex; justify-content: space-between; align-items: center; }
.fc-carta { display: grid; align-content: center; gap: 14px; min-height: 180px; padding: 26px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao); text-align: center; }
.fc-frente { margin: 0; font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.fc-verso { margin: 0; font-size: 1.1rem; color: var(--marca-clara); }
.fc-carta hr { width: 40%; margin: 0 auto; border: 0; border-top: 1px solid var(--linha); }
.fc-notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fc-notas .btn { flex-direction: column; gap: 0; padding: 8px 4px; min-height: 52px; }
.fc-notas small { font-size: .75rem; opacity: .75; font-weight: 400; }
.fc-fim .ob-p { font-size: 1rem; }
@media (max-width: 480px) { .fc-notas { grid-template-columns: repeat(2, 1fr); } }

.imp-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* cabeçalhos com muitos botões quebram em duas linhas em vez de cortar */
.painel .topo { flex-wrap: wrap; row-gap: 10px; }
.painel .topo h1 { margin-right: auto; }
.topo .btn { white-space: nowrap; }

/* ---------- celular: cabeçalhos em duas linhas, ícones sem rótulo, "Agenda" ---------- */
.lbl-curto { display: none; }
@media (max-width: 820px) {
  .lbl-longo { display: none; }
  .lbl-curto { display: inline; }
  .painel .topo h1 { flex-basis: auto; }
  .topo .btn:not(.sec) { order: 2; }
  .topo .mes-nav { order: 3; }
  .topo .btn.sec { order: 4; }
  .topo .btn.sec .rt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topo .btn.sec:has(.rt) { width: 44px; padding: 0; }
  .topo .btn.sec .i { margin: 0; }
  .mes-nav strong { min-width: 96px; }
}

/* ---------- Finanças: abas (Insights, Comparar meses, Guardado) ---------- */
.fin-abas { display: flex; width: fit-content; margin: 0 0 16px; }

.fa-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.fa-topo h2 { margin: 0; color: var(--texto); font-size: 1.1rem; letter-spacing: -.02em; }
.fa-chip { padding: 5px 12px; border: 1px solid var(--linha); border-radius: 99px; color: var(--texto-2); font-size: .8rem; }
.fa-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 18px 0 0; }
.fa-nums.fa-nums-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-nums dt { color: var(--texto-3); font-size: .78rem; }
.fa-nums dd { margin: 3px 0 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fa-resumo { margin: 4px 0 0; color: var(--texto-2); font-size: .92rem; }
.fa-resumo strong { color: var(--texto); font-weight: 500; }
.fa-aviso { margin: 0 0 12px; }

.insights { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.insight { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--linha); border-radius: 16px; background: var(--fundo-2); }
.insight:first-child { grid-column: 1 / -1; padding: 20px; }
.insight:first-child strong { font-size: 1.15rem; letter-spacing: -.02em; }
.insight strong { display: block; font-size: 1rem; font-weight: 500; line-height: 1.3; }
.insight p { margin: 5px 0 0; color: var(--texto-2); font-size: .9rem; line-height: 1.45; }
.insight.tom-alerta { border-color: rgba(245, 158, 11, .35); }

.mm-lista, .cp-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cp-lista { gap: 0; }
.mm { padding: 14px 16px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); }
.mm.sel { border-color: var(--linha-2); background: var(--fundo-3); }
.mm-topo { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mm-topo strong { font-weight: 500; text-transform: capitalize; }
.mm-topo small { color: var(--texto-3); font-weight: 400; }
.mm-tag { padding: 1px 9px; border: 1px solid var(--linha); border-radius: 99px; color: var(--texto-3); font-size: .76rem; }
.mm-sobra { margin-left: auto; color: var(--texto-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.mm-sobra.pos { color: #4ade80; }
.mm-sobra.neg { color: #ff8a8a; }
.mm-b { display: grid; grid-template-columns: minmax(0, 1fr) 9.5em; align-items: center; gap: 12px; margin-top: 6px; font-size: .82rem; }
.mm-b .trilho { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mm-b .trilho i { display: block; height: 100%; border-radius: inherit; }
.mm-b.entrou .trilho i { background: rgba(255, 255, 255, .5); }
.mm-b.saiu .trilho i, .mm-b.sobrou .trilho i { background: var(--marca); }
.mm-b.faltou .trilho i { background: #ef4444; }
.mm-b.parcial .trilho i { background: rgba(255, 255, 255, .35); }
.mm-b em { font-style: normal; color: var(--texto-2); font-variant-numeric: tabular-nums; text-align: right; }
.mm-nota { margin: 8px 0 0; color: var(--texto-3); font-size: .8rem; }

.cp { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.cp:last-child { border-bottom: 0; }
.cp-topo { display: flex; align-items: center; gap: 12px; }
.cp-val { display: grid; justify-items: end; gap: 2px; }
.cp-delta { color: var(--texto-3); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-delta.alta { color: #ffb44d; }
.cp-delta.baixa { color: #4ade80; }
.cp-barras { display: grid; gap: 4px; margin: 8px 0 0 52px; }
.cp-barras span { display: block; height: 6px; border-radius: 99px; min-width: 2px; }
.cp-barras .atual, .lg.atual { background: var(--marca); }
.cp-barras .ref, .lg.ref { background: rgba(255, 255, 255, .3); }
.fa-legenda { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.lg { display: inline-block; width: 18px; height: 6px; border-radius: 99px; margin-left: 8px; }
.lg:first-child { margin-left: 0; }

.gd-hero .res-barra { margin: 18px 0 12px; }

@media (max-width: 480px) { .fin-abas button { padding: 0 11px; font-size: .84rem; } }
@media (max-width: 720px) {
  .insights { grid-template-columns: minmax(0, 1fr); }
  .fa-nums { gap: 10px; }
  .fa-nums dd { font-size: 1.1rem; }
  .mm-b { grid-template-columns: minmax(0, 1fr) 8.6em; }
  .cp-barras { margin-left: 0; }
  .fin-abas { width: 100%; }
}

/* ---------- Espaço PJ ---------- */
.fin-linha-abas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-linha-abas .fin-abas { margin: 0; }
.txt-alerta { color: #ff8a8a; }
.saldo.pj-imp { display: block; margin: 2px 0 8px; font-size: 1.8rem; }
.btn.mini { min-height: 36px; padding: 0 14px; font-size: .82rem; }
.acoes-linha { display: flex; justify-content: flex-end; margin-top: 12px; }
.area-msg { width: 100%; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao); color: var(--texto); font: inherit; font-size: .92rem; line-height: 1.5; resize: vertical; }
.area-msg:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 109, 41, .25); }

.pj-comeco { padding: 26px; }
.pj-comeco h2 { font-size: 1.35rem; letter-spacing: -.02em; color: var(--texto); margin: 0 0 8px; }
.pj-comeco > p { margin: 0; color: var(--texto-2); max-width: 52ch; }
.pj-passos { list-style: none; counter-reset: p; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.pj-passos li { counter-increment: p; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; align-items: start; color: var(--texto-2); font-size: .92rem; }
.pj-passos li::before { content: counter(p); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha-2); color: var(--texto); font-size: .85rem; font-variant-numeric: tabular-nums; }
.pj-passos li strong { display: block; color: var(--texto); font-weight: 500; }
.pj-passos li .btn { grid-column: 2; justify-self: start; margin-top: 8px; }

.cob-lista, .cli-lista, .sug-lista, .banco-lista, .mist-lista { list-style: none; margin: 0; padding: 0; }
.cob { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.cob:last-child { border-bottom: 0; }
.cob .cat-info { flex: 1 1 160px; }
.cob-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cob.paga .cat-info strong { color: var(--texto-2); }

.cliente { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cliente:hover { background: rgba(255, 255, 255, .03); }
.cliente.inativo { opacity: .55; }
.cli-ini { font-weight: 500; font-size: 1rem; }
.cli-rec { display: grid; justify-items: end; line-height: 1.3; }
.cli-rec small { color: var(--texto-3); font-size: .76rem; }
.cli-rec b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sug { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--linha); cursor: pointer; }
.sug input { width: 20px; height: 20px; accent-color: var(--marca); flex: none; }
.sug b { font-weight: 500; font-variant-numeric: tabular-nums; }
.pj-sug { border-color: var(--linha-2); }

.banco-esp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.banco-esp:last-child { border-bottom: 0; }
.mist-lista li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.mist-lista li:last-child { border-bottom: 0; }
.mist-lista span { display: grid; line-height: 1.35; }
.mist-lista small { color: var(--texto-3); font-size: .82rem; }
.mist-lista b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rev { border-bottom: 1px solid var(--linha); }
.rev:last-child { border-bottom: 0; }
.rev summary { display: flex; align-items: center; gap: 12px; padding: 12px 4px; cursor: pointer; list-style: none; }
.rev summary::-webkit-details-marker { display: none; }
.rev summary .cat-info { flex: 1; }
.rev summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--texto-3); border-bottom: 1.5px solid var(--texto-3); rotate: -45deg; transition: rotate .2s; }
.rev[open] summary::before { rotate: 45deg; }
.rev-itens { list-style: none; margin: 0 0 8px; padding: 0 0 0 20px; }
.rev-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.rev-item .cat-info { flex: 1 1 140px; }
.rev-item.marcado .cat-info strong { color: var(--marca-clara); }

@media (max-width: 720px) {
  .cob-acoes { margin-left: 0; width: 100%; }
  .fin-linha-abas { gap: 10px; }
}

/* ---------- Menu lateral: cada ícone tem o seu movimento ---------- */
.item .ico svg { transform-origin: 50% 50%; }
@keyframes ic-sol { to { transform: rotate(180deg); } }
@keyframes ic-carteira { 20% { transform: rotate(-12deg) translateY(-1px); } 50% { transform: rotate(10deg); } 80% { transform: rotate(-5deg); } }
@keyframes ic-pasta { 30% { transform: translateY(-4px); } 55% { transform: translateY(0); } 75% { transform: translateY(-2px); } }
@keyframes ic-visto { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes ic-lista { 30% { transform: translateX(3px); } 60% { transform: translateX(-2px); } }
@keyframes ic-livro { 0% { transform: perspective(60px) rotateY(0); } 50% { transform: perspective(60px) rotateY(180deg); } 100% { transform: perspective(60px) rotateY(360deg); } }
@keyframes ic-agenda { 0% { transform: perspective(60px) rotateX(0); } 50% { transform: perspective(60px) rotateX(-70deg); } 100% { transform: perspective(60px) rotateX(0); } }
@keyframes ic-engrenagem { to { transform: rotate(180deg); } }
@media (prefers-reduced-motion: no-preference) {
  .item:hover[data-vista=hoje] .ico svg, .item:focus-visible[data-vista=hoje] .ico svg, .item.ativo[data-vista=hoje] .ico svg { animation: ic-sol .9s cubic-bezier(.4, 0, .2, 1); }
  .item:hover[data-vista=financas] .ico svg, .item:focus-visible[data-vista=financas] .ico svg, .item.ativo[data-vista=financas] .ico svg { animation: ic-carteira .7s ease-in-out; }
  .item:hover[data-vista=pj] .ico svg, .item:focus-visible[data-vista=pj] .ico svg, .item.ativo[data-vista=pj] .ico svg { animation: ic-pasta .7s ease-out; }
  .item:hover[data-vista=habitos] .ico svg, .item:focus-visible[data-vista=habitos] .ico svg, .item.ativo[data-vista=habitos] .ico svg { animation: ic-visto .5s ease-out; }
  .item:hover[data-vista=tarefas] .ico svg, .item:focus-visible[data-vista=tarefas] .ico svg, .item.ativo[data-vista=tarefas] .ico svg { animation: ic-lista .6s ease-in-out; }
  .item:hover[data-vista=estudos] .ico svg, .item:focus-visible[data-vista=estudos] .ico svg, .item.ativo[data-vista=estudos] .ico svg { animation: ic-livro .9s ease-in-out; }
  .item:hover[data-vista=calendario] .ico svg, .item:focus-visible[data-vista=calendario] .ico svg, .item.ativo[data-vista=calendario] .ico svg { animation: ic-agenda .7s ease-in-out; }
  .item:hover[data-vista=ajustes] .ico svg, .item:focus-visible[data-vista=ajustes] .ico svg, .item.ativo[data-vista=ajustes] .ico svg { animation: ic-engrenagem .9s cubic-bezier(.4, 0, .2, 1); }
}

/* ---------- Gráficos animados (js/graficos.js liga body.anima-graficos) ---------- */
@keyframes g-largura { from { transform: scaleX(0); } }
@keyframes g-altura { from { transform: scaleY(0); } }
@keyframes g-anel { from { stroke-dashoffset: var(--c); } }
body.anima-graficos :is(.hc-barra i, .res-barra i, .cat-barra i, .meta-barra i, .orc-barra i, .cp-barras span, .mm-b .trilho i) { transform-origin: left center; animation: g-largura .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
body.anima-graficos .hoje-lider .r-barra::after { transform-origin: left center; animation: g-largura .9s cubic-bezier(.16, 1, .3, 1) both; }
body.anima-graficos :is(.dias-chart span, .sem-chart i, .hc-col i) { transform-origin: center bottom; animation: g-altura .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
body.anima-graficos .anel circle:last-child { animation: g-anel 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }

.h-linha .tile { width: 36px; height: 36px; border-radius: 10px; }
.h-linha .tile .i { width: 18px; height: 18px; }

.imp-novos { display: block; margin: 8px 0; }
.imp-novos strong { color: var(--texto); font-weight: 500; }
.imp-novos ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.imp-c { color: var(--texto-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-t small.imp-conta { display: block; color: var(--texto-3); font-size: .74rem; }
.btn[disabled] { opacity: .5; cursor: default; }

.fech-sub { margin: -6px 0 10px; color: var(--texto-3); font-size: .86rem; }
.fech-nota { margin: 10px 0 0; color: var(--texto-2); font-size: .9rem; }
.fech-pend { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--texto-2); font-size: .88rem; }
.fech-lanc td:nth-child(-n+4), .fech-lanc th:nth-child(-n+4), .fech-notas td:nth-child(-n+4), .fech-notas th:nth-child(-n+4) { text-align: left; }
.fech-fonte td:nth-child(2), .fech-fonte th:nth-child(2) { text-align: left; }
.txt-suave { color: var(--texto-3); font-size: .8rem; font-weight: 400; }
.relatorio .abas { margin: 6px 0 12px; }
@media print { .fech-lanc { font-size: 10px; } }

.rel-tab td:not(:first-child), .rel-tab th:not(:first-child) { padding-left: 14px; white-space: nowrap; }
.fech-lanc td:nth-child(2) { white-space: normal; }
.fech-fonte td:first-child, .fech-lanc td:nth-child(2), .fech-notas td:nth-child(3) { white-space: normal; }

.rel-rolagem { overflow-x: auto; max-width: 100%; }
.dlg-corpo.relatorio { min-width: 0; }
@media (max-width: 720px) { .relatorio .res-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { #pj-abas button { padding: 0 9px; } }
@media print { .rel-rolagem { overflow: visible; } }
.relatorio .abas { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

/* ---------- Hábitos: telinha de carregamento ---------- */
#vista-habitos { position: relative; }
.hab-carregando { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; min-height: 70dvh; padding: 24px; background: var(--fundo); transition: opacity .25s; }
.hab-carregando[hidden] { display: none !important; }
.hab-carregando.saindo { opacity: 0; pointer-events: none; }
.car-miolo { display: grid; justify-items: center; gap: 14px; max-width: 34ch; text-align: center; }
.car-anel { animation: car-gira 1.1s linear infinite; }
@keyframes car-gira { to { transform: rotate(360deg); } }
.car-titulo { margin: 4px 0 0; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; color: var(--texto); }
.car-frase { margin: 0; color: var(--texto-2); font-size: .98rem; line-height: 1.5; animation: car-entra .5s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes car-entra { from { opacity: 0; transform: translateY(8px); } }
#vista-habitos.carregando > :not(.hab-carregando) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .car-anel { animation: none; } .car-frase { animation: none; } }

/* ---------- Hábitos: aba Conquistas ---------- */
.hc-controles { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hc-controles .mes-nav button[disabled] { opacity: .35; cursor: default; }
.hc-hero { margin-bottom: 14px; }
.hc-sobe { color: #4ade80; }
.hc-desce { color: #ffb44d; }
.hc-de { color: var(--texto-3); font-weight: 400; }
.hc-grade { display: grid; gap: 14px; }
.hc-grade + .card, .hc-grade ~ .card { margin-top: 14px; }

.hc-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.hc-dia { display: grid; justify-items: center; gap: 6px; padding: 10px 0 8px; border-radius: 14px; color: var(--texto-2); }
.hc-dia small { font-size: .78rem; }
.hc-dia em { font-style: normal; font-size: .76rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.hc-dia.perfeito { background: rgba(255, 109, 41, .12); }
.hc-dia.futuro { opacity: .4; }
.hc-anel { position: relative; width: 44px; height: 44px; }
.hc-anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hc-anel b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .82rem; font-weight: 500; color: var(--texto); }

.hc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.hc-cal small { text-align: center; color: var(--texto-3); font-size: .74rem; padding-bottom: 2px; }
.hc-cal i { display: grid; place-items: center; aspect-ratio: 1.3; border-radius: 9px; font-style: normal; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--texto-2); background: rgba(255, 255, 255, .05); }
.hc-cal i.vaz { background: none; }
.hc-cal i.futuro, .hc-cal i.nada { background: none; color: var(--texto-3); border: 1px dashed var(--linha); opacity: .7; }
.hc-cal i.n0, .hc-legenda i.n0 { background: rgba(255, 255, 255, .06); }
.hc-cal i.n1, .hc-legenda i.n1 { background: rgba(255, 109, 41, .26); color: #fff; }
.hc-cal i.n2, .hc-legenda i.n2 { background: rgba(255, 109, 41, .46); color: #fff; }
.hc-cal i.n3, .hc-legenda i.n3 { background: rgba(255, 109, 41, .7); color: #fff; }
.hc-cal i.n4, .hc-legenda i.n4 { background: #ff6d29; color: #fff; font-weight: 600; }
.hc-legenda { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.hc-legenda i { display: block; width: 14px; height: 14px; border-radius: 4px; }
.hc-legenda span { color: var(--texto-3); margin: 0 4px; }

.hc-lista, .hc-marcos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.hc-lista li, .hc-marcos li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linha); }
.hc-lista li:first-child, .hc-marcos li:first-child { border-top: 0; }
.hc-info { flex: 1; min-width: 0; display: grid; gap: 6px; }
.hc-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hc-linha strong { font-size: .95rem; font-weight: 500; }
.hc-info small { color: var(--texto-3); font-size: .8rem; }
.hc-barra { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hc-barra i { display: block; height: 100%; border-radius: inherit; background: var(--cor, var(--marca)); }
.hc-pct { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.hc-tag { padding: 2px 9px; border-radius: 99px; font-size: .72rem; border: 1px solid var(--linha); color: var(--texto-2); }
.hc-tag.bom { color: #4ade80; border-color: rgba(74, 222, 128, .35); }
.hc-tag.atencao { color: #ffb44d; border-color: rgba(245, 158, 11, .4); }

.hc-cols { display: flex; align-items: flex-end; gap: 8px; height: 170px; margin-top: 8px; }
.hc-col { flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; height: 100%; padding: 6px 0; border: 0; border-radius: 12px; background: none; color: var(--texto-2); font: inherit; cursor: pointer; }
.hc-col:hover { background: rgba(255, 255, 255, .03); }
.hc-col.sel { background: rgba(255, 109, 41, .12); }
.hc-col b { font-size: .78rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.hc-col small { font-size: .76rem; color: var(--texto-3); }
.hc-tr { display: flex; align-items: flex-end; width: 100%; max-width: 34px; height: 100%; }
.hc-tr i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: rgba(255, 109, 41, .6); }
.hc-col.sel .hc-tr i { background: #ff8247; }

.hc-m-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 109, 41, .16); border: 1px solid rgba(255, 109, 41, .4); color: var(--marca-clara); }
.hc-m-ico .i { width: 20px; height: 20px; }
.hc-m-valor { font-weight: 500; font-variant-numeric: tabular-nums; }
.hc-m-valor small { color: var(--texto-3); font-weight: 400; margin-left: 4px; }
.hc-selos { display: flex; flex-wrap: wrap; gap: 5px; }
.hc-selos span { min-width: 34px; padding: 2px 8px; border-radius: 99px; border: 1px dashed var(--linha); color: var(--texto-3); font-size: .74rem; text-align: center; font-variant-numeric: tabular-nums; }
.hc-selos span.ok { border: 1px solid rgba(255, 109, 41, .55); background: rgba(255, 109, 41, .18); color: #fff; }

@media (max-width: 560px) { .hc-cols { gap: 4px; } .hc-linha { align-items: flex-start; } }

/* ---------- gastos por cartão e conta ---------- */
.fin-porconta { margin-top: 16px; }
.fin-porconta .pc-total { color: var(--texto-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.pc-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin: 0 -2px; scrollbar-width: thin; }
.pc-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 99px; background: transparent; color: var(--texto-2); font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap; }
.pc-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--cor, var(--texto-3)); }
.pc-chip[data-pconta=""] i { display: none; }
.pc-chip[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: #09090b; }
.pc-chip:hover:not([aria-pressed="true"]) { border-color: var(--texto-3); color: var(--texto); }
.pc-barra { display: flex; gap: 3px; height: 10px; margin-bottom: 16px; }
.pc-barra i { min-width: 6px; border-radius: 99px; background: var(--cor); }
.pc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pc-item { display: grid; gap: 8px; text-align: left; width: 100%; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 16px; background: var(--fundo-2); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.pc-item:hover { border-color: var(--cor, var(--marca)); }
.pc-item.sel { border-color: var(--cor, var(--marca)); background: color-mix(in srgb, var(--cor, var(--marca)) 12%, var(--fundo-2)); }
.pc-topo { display: flex; align-items: center; gap: 12px; }
.pc-nome { flex: 1; min-width: 0; display: grid; }
.pc-nome strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-nome small { color: var(--texto-3); font-size: .78rem; }
.pc-val { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pc-fio { display: block; height: 6px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.pc-fio i { display: block; height: 100%; background: var(--cor); border-radius: 99px; }
.pc-meta { color: var(--texto-2); font-size: .82rem; }
.pc-cats { display: grid; gap: 4px; font-size: .8rem; color: var(--texto-2); }
.pc-cats span { display: flex; align-items: center; gap: 8px; }
.pc-cats i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pc-cats b { margin-left: auto; font-weight: 500; color: var(--texto); font-variant-numeric: tabular-nums; }
.pc-fatura { padding-top: 8px; border-top: 1px dashed var(--linha); color: var(--texto-2); font-size: .82rem; }
.pc-fatura b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .pc-grade { grid-template-columns: 1fr; } }

/* ---------- Finanças simples: "Para onde foi o dinheiro" + mais detalhes ---------- */
.fin-onde { margin-top: 16px; }
.fin-onde .card-topo { gap: 12px; flex-wrap: wrap; }
.fin-onde .onde-dica { margin: 0 0 12px; color: var(--texto-3); font-size: .84rem; }
.fin-onde .onde-rodape { margin-top: 10px; }
#fin-lista, #fin-porconta { min-width: 0; }
.fin-porconta { margin-top: 0; }
.fin-mais { margin-top: 16px; padding: 0; }
.fin-mais > summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex; align-items: center; gap: 12px; }
.fin-mais > summary::-webkit-details-marker { display: none; }
.fin-mais > summary span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.fin-mais > summary small { color: var(--texto-3); font-size: .8rem; }
.fin-mais > summary::after, .fin-lanc > summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha); background: var(--fundo-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fafafa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; transition: transform .2s; align-self: center; }
.fin-mais[open] > summary::after, .fin-lanc[open] > summary::after { transform: rotate(180deg); }
.fin-mais > summary:hover::after, .fin-lanc > summary:hover::after { border-color: var(--linha-2); background-color: var(--fundo-3); }
.fin-mais[open] > summary { border-bottom: 1px solid var(--linha); }
.fin-mais-corpo { padding: 16px; display: grid; gap: 16px; }
.fin-mais-corpo .fin-cols { margin: 0; }
.fin-mais-corpo .card { background: var(--fundo-2); }

.detalhe { display: grid; gap: 14px; max-height: min(82vh, 760px); overflow-y: auto; }
.det-topo { display: flex; align-items: center; gap: 14px; }
.det-topo h2 { margin: 0; font-size: 1.3rem; }
.det-topo small { color: var(--texto-3); }
.det-mes { display: flex; align-items: center; justify-content: center; gap: 6px; }
.det-mes strong { min-width: 160px; text-align: center; font-weight: 500; }
.det-mes .btn-ic { width: 36px; height: 36px; }
.det-total { display: grid; gap: 2px; }
.det-total strong { font-size: 2rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.det-total span { color: var(--texto-2); font-size: .86rem; }
.det-partes { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .82rem; color: var(--texto-2); padding: 12px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo-2); }
.det-partes span { display: inline-flex; align-items: center; gap: 7px; }
.det-partes i { width: 8px; height: 8px; border-radius: 50%; }
.det-partes b { color: var(--texto); font-weight: 500; }
.det-lista { display: grid; gap: 4px; }

/* ---------- pizza (rosca) + legenda ---------- */
.onde-grade { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: center; }
.rosca { position: relative; width: 230px; height: 230px; }
.rosca svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rosca .fatia { cursor: pointer; transition: opacity .15s, stroke-width .15s; outline: none; }
.rosca:hover .fatia { opacity: .55; }
.rosca .fatia:hover, .rosca .fatia:focus-visible { opacity: 1; stroke-width: 38; }
.rosca-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 0 52px; }
.rosca-centro small { color: var(--texto-3); font-size: .76rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-centro strong { font-size: 1.35rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.legenda { display: grid; gap: 2px; min-width: 0; }
.leg-item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.leg-item:hover, .leg-item:focus-visible { background: rgba(255, 255, 255, .05); outline: none; }
.leg-cor { width: 12px; height: 12px; border-radius: 50%; }
.leg-nome { min-width: 0; display: grid; }
.leg-nome strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-nome .lim { font-size: .72rem; }
.leg-nome .lim.estouro { color: var(--perigo); } .leg-nome .lim.perto { color: #f5b84a; }
.leg-pct { color: var(--texto-3); font-size: .82rem; font-variant-numeric: tabular-nums; width: 38px; text-align: right; }
.leg-val { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.fin-onde .pc-grade { grid-template-columns: 1fr; gap: 8px; }
.fin-onde .pc-barra { display: none; }

/* lançamentos fechados por padrão */
.fin-lanc { margin-top: 16px; padding: 0; }
.fin-lanc > summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fin-lanc > summary::-webkit-details-marker { display: none; }
.fin-lanc > summary h2 { margin: 0; }
.fin-lanc > summary small { color: var(--texto-3); font-size: .82rem; flex: 1; min-width: 0; }
.fin-lanc[open] > summary { border-bottom: 1px solid var(--linha); }
.fin-lanc-corpo { padding: 16px 20px 20px; display: grid; gap: 12px; }
@media (max-width: 720px) { .onde-grade { grid-template-columns: 1fr; justify-items: center; } .rosca { width: min(250px, 100%); height: auto; aspect-ratio: 1; } .legenda, .fin-onde .pc-grade { width: 100%; } .fin-onde .pc-grade { justify-items: stretch; } }

/* lançamentos: título + filtros numa linha limpa */
.fin-lanc > summary, .fin-mais > summary { list-style: none; }
.fin-lanc > summary::marker, .fin-mais > summary::marker { content: ""; }
.fin-lanc > summary h2 { display: block; font-size: 1.05rem; }
.fin-lanc > summary { align-items: center; }
.lanc-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.lanc-filtros #fin-filtro-cat { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.lanc-filtros .chip-f { margin: 0; }
@media (max-width: 520px) { .lanc-filtros { align-items: stretch; } .lanc-filtros .abas { width: 100%; } .lanc-filtros .abas button { flex: 1; padding: 0 6px; } .lanc-filtros #fin-filtro-cat, .lanc-filtros .sel-filtro { width: 100%; } }

.fin-lanc > summary small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ícone do painel do dono (só aparece para o dono) */
.item-dono { color: var(--texto-2); }
@media (max-width: 820px) { #menu-dono { display: none !important; } }
a.aj-linha { color: inherit; text-decoration: none; } a.aj-linha:hover { background: rgba(255, 255, 255, .03); }

/* ---------- Trabalho (só o dono) ---------- */
.fin-abas span:empty { display: none; }
.fin-abas button span { margin-left: 5px; color: var(--texto-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.fin-abas button[aria-selected=true] span { color: rgba(9, 9, 11, .55); }
.trab-barra { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.trab-barra input { flex: 1 1 240px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linha-2); border-radius: 100vw; background: var(--fundo-2); color: var(--texto); font-size: .92rem; }
.trab-barra input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 109, 41, .22); }
:root { --trab-c: var(--fundo-2); }
.trab-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.trab-card { position: relative; display: grid; gap: 8px; width: 100%; min-height: 76px; align-content: start; padding: 14px 16px; border: 1px solid var(--linha-2); border-radius: var(--r-card); background: var(--fundo-2); color: var(--texto); text-align: left; transition: border-color var(--t), transform var(--t) var(--curva); }
.trab-card:hover { border-color: #4a4a54; transform: translateY(-1px); }
.trab-card.colorido { background: var(--c); border-color: color-mix(in srgb, var(--c) 60%, #fff 12%); }
.trab-card strong { font-weight: 500; font-size: 1.02rem; line-height: 1.3; padding-right: 18px; overflow-wrap: anywhere; }
.trab-fixo { position: absolute; top: 12px; right: 12px; fill: currentColor; color: var(--texto-2); width: 13px; height: 13px; }
.trab-st { justify-self: start; padding: 1px 9px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 100vw; font-style: normal; font-size: .72rem; font-weight: 500; color: var(--texto-2); }
.trab-st.fz { color: #fff; border-color: rgba(255, 255, 255, .5); }
.trab-st.ok { color: var(--ok); border-color: rgba(74, 222, 128, .4); }
.trab-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.trab-tags span { padding: 1px 9px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 100vw; font-size: .72rem; color: var(--texto-2); }
.trab-ver { gap: 12px; }
#dlg-trab-ver.colorido { background: var(--c); border-color: color-mix(in srgb, var(--c) 60%, #fff 12%); }
.trab-meta { margin: 0; color: var(--texto-2); font-size: .88rem; }
.trab-url { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--texto); font-size: .9rem; text-underline-offset: 3px; }
.trab-texto { max-height: 52dvh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: .95rem; color: var(--texto); }
.trab-texto a { color: var(--texto); text-underline-offset: 3px; }
.trab-cores span.sem { background: var(--fundo-3); border: 1px dashed var(--linha-2); }
.trab-cores input:checked + span.sem { border: 3px solid #fff; }
@media (max-width: 560px) { .trab-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.trab-cores .outra { position: relative; display: block; }
.trab-cores .outra > span { background: conic-gradient(#ef4444, #f59e0b, #84cc16, #14b8a6, #3b82f6, #22d3ee, #ec4899, #ef4444); }
.trab-cores .outra input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.trab-cores .outra:focus-within > span { outline: 2px solid var(--marca-clara); outline-offset: 2px; }
.trab-card.claro, #dlg-trab-ver.claro { color: #09090b; }
.trab-card.claro .trab-st, .trab-card.claro .trab-tags span { color: #09090b; border-color: rgba(0, 0, 0, .3); }
.trab-card.claro .trab-fixo { color: #09090b; }
#dlg-trab-ver.claro .trab-meta, #dlg-trab-ver.claro .trab-texto, #dlg-trab-ver.claro .trab-texto a, #dlg-trab-ver.claro .trab-url, #dlg-trab-ver.claro h2 { color: #09090b; }
#dlg-trab-ver.claro .trab-tags span { color: #09090b; border-color: rgba(0, 0, 0, .3); }
#dlg-trab-ver.claro .link { color: #09090b; }

/* ---------- vazio com prévia: linhas-fantasma de como a tela vai ficar ---------- */
.painel .vazio::before { content: ""; display: block; width: min(300px, 100%); height: 104px; margin: 0 auto 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='104' viewBox='0 0 300 104'%3E%3Cg fill='%23fff'%3E%3Cg fill-opacity='.09'%3E%3Crect y='1' width='30' height='30' rx='9'/%3E%3Crect y='37' width='30' height='30' rx='9'/%3E%3Crect y='73' width='30' height='30' rx='9'/%3E%3C/g%3E%3Cg fill-opacity='.07'%3E%3Crect x='42' y='7' width='140' height='8' rx='4'/%3E%3Crect x='42' y='43' width='112' height='8' rx='4'/%3E%3Crect x='42' y='79' width='128' height='8' rx='4'/%3E%3Crect x='250' y='9' width='50' height='8' rx='4'/%3E%3Crect x='258' y='45' width='42' height='8' rx='4'/%3E%3Crect x='246' y='81' width='54' height='8' rx='4'/%3E%3C/g%3E%3Cg fill-opacity='.045'%3E%3Crect x='42' y='20' width='84' height='6' rx='3'/%3E%3Crect x='42' y='56' width='66' height='6' rx='3'/%3E%3Crect x='42' y='92' width='92' height='6' rx='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }

/* ---------- recompensas: concluir e marcar têm um retorno, sem confete ---------- */
.mudou-num { animation: mudou-num 1.2s ease-out; }
@keyframes mudou-num { from { color: var(--marca-clara); } }
.tarefa.acabou .check::after { animation: check-pop .45s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes check-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } }
.tarefa.acabou .tar-corpo strong { text-decoration-color: transparent; background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px; animation: risca .5s ease-out .12s forwards; }
@keyframes risca { to { background-size: 100% 1.5px; } }
.habito.acabou .marcar.ok::before { animation: marcar-pop .5s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes marcar-pop { 0% { inset: 10px; } 60% { inset: 1px; } }
.habito.acabou .marcar::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--cor); border-radius: 50%; pointer-events: none; animation: onda .7s ease-out forwards; }
@keyframes onda { from { transform: scale(.85); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.hab-resumo.completo .hr-anel { animation: anel-festa .9s cubic-bezier(.34, 1.4, .64, 1); }
.hab-resumo.completo .hr-anel::after { content: ""; position: absolute; inset: -6px; border: 2px solid #ff8247; border-radius: 50%; animation: onda 1s ease-out forwards; }
@keyframes anel-festa { 40% { transform: scale(1.1); } }

/* Casa (plano Família) */
#vista-casa .card + .card, #vista-casa .casa-aviso + .card { margin-top: 14px; }
.casa-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.casa-linha input { flex: 1; min-width: 180px; }
.casa-resumo { text-align: center; }
.casa-resumo .casa-linha { justify-content: center; }
.casa-mes { text-transform: capitalize; min-width: 150px; }
.casa-total { font-size: 2rem; font-weight: 700; margin: 10px 0 0; }
.casa-sub { color: var(--texto-3); margin: 2px 0 0; font-size: .86rem; }
.casa-membros, .casa-lista-lanc, .casa-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.casa-lista { list-style: disc; padding-left: 20px; gap: 4px; }
.casa-membros li, .casa-lista-lanc li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo-2); }
.casa-lista-lanc li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.casa-lista-lanc strong { overflow-wrap: anywhere; }
.casa-lista-lanc small, .casa-membros small { color: var(--texto-3); }
.casa-venc { color: #f87171 !important; }
.casa-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.casa-campos input, .casa-campos select, .casa-linha input { min-height: 42px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo-2); color: var(--texto); font: inherit; }
.casa-convite { margin: 12px 0; display: grid; gap: 8px; justify-items: start; }
.casa-convite code { font-size: 1.3rem; letter-spacing: .12em; padding: 6px 12px; border-radius: 10px; background: var(--fundo-2); border: 1px solid var(--linha); }
.casa-perigo { margin-top: 12px; }
.casa-aviso { padding: 12px 14px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--linha); margin: 0 0 14px; }
.casa-alerta { border-color: #f87171; }

/* ---------- Treino (uso pessoal) ---------- */
.pe-sub { margin: 0; color: var(--texto-2); font-size: .9rem; line-height: 1.5; }
.pe-meta { margin: 0; color: var(--texto-3); font-size: .84rem; }
.pe-mini { color: var(--texto-3); font-size: .78rem; line-height: 1.4; }
.pe-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.pe-barra > span { flex: 1; }
.pe-barra .pe-sub { flex: 1 1 260px; }
.pe-barra .abas.pequenas { max-width: 100%; }

.pe-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pe-linha { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: 10px; background: none; color: var(--texto); text-align: left; cursor: pointer; }
.pe-linha:hover { background: var(--fundo-3); }
.pe-linha strong { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.pe-linha span { flex: 1; min-width: 0; color: var(--texto-2); font-size: .88rem; }
.pe-linha.feita strong, .pe-linha.feita span { color: var(--texto-3); }

.pe-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pe-cartao { display: grid; gap: 6px; align-content: start; width: 100%; height: 100%; padding: 14px 16px; border: 1px solid var(--linha-2); border-radius: var(--r-card); background: var(--fundo-2); color: var(--texto); text-align: left; cursor: pointer; transition: border-color var(--t), transform var(--t) var(--curva); }
.pe-cartao:hover { border-color: var(--marca); transform: translateY(-1px); }
.pe-cartao strong { font-weight: 500; font-size: 1rem; line-height: 1.3; }
.pe-cartao small { color: var(--texto-2); font-size: .82rem; }

/* diálogos largos: ficha, dieta, modelos */
dialog.modal.pe-largo { width: min(860px, calc(100vw - 24px)); }
.pe-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pe-campos > label { display: grid; gap: 6px; min-width: 0; }
.pe-campos .pe-cheia, .pe-campos > label:has(textarea) { grid-column: 1 / -1; }
@media (max-width: 520px) { .pe-campos { grid-template-columns: 1fr; } }
.pe-dia, .pe-ref { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--r-ctl); background: var(--fundo); }
.pe-dia-topo { display: flex; gap: 8px; align-items: center; }
.pe-dia-topo input[name=dnome], .pe-dia-topo input[name=rnome] { flex: 1; font-weight: 500; }
.pe-dia-topo input[name=rhora] { flex: 0 0 120px; }
.pe-dia-topo .link { flex: none; }
.modal .pe-item input { min-height: 38px; padding: 6px 10px; font-size: .88rem; }
.pe-item { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 36px; gap: 6px; align-items: center; }
.pe-item output { color: var(--texto-3); font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; }
.pe-ref-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-ref-tot { color: var(--texto-3); font-size: .8rem; }
.pe-total { margin: 0; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--fundo-3); color: var(--texto-2); font-size: .88rem; }
.pe-total strong { color: var(--marca-clara); font-size: 1.05rem; font-weight: 600; }

/* calculadoras */
.pe-calc-abas { margin-bottom: 14px; }
.pe-calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 760px) { .pe-calc { grid-template-columns: 1fr; } }
.pe-calc-form { display: grid; gap: 12px; }
.pe-calc-form > label { display: grid; gap: 6px; }
.pe-calc-form select, .pe-calc-form input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--linha-2); border-radius: var(--r-ctl); background: var(--fundo-3); color: var(--texto); font-size: .95rem; }
.pe-dobras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pe-dobras > label { display: grid; gap: 6px; }
.pe-calc-res { display: grid; gap: 4px; position: sticky; top: 16px; }
.pe-res-l { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.pe-res-l span { color: var(--texto-2); font-size: .88rem; }
.pe-res-l strong { font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pe-res-l small { grid-column: 1 / -1; color: var(--texto-3); font-size: .78rem; }
.pe-tab { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 6px; }
.pe-tab th, .pe-tab td { padding: 8px 6px; border-bottom: 1px solid var(--linha); text-align: left; }
.pe-tab th { color: var(--texto-3); font-weight: 500; font-size: .76rem; }
.pe-tab .n { text-align: right; font-variant-numeric: tabular-nums; }
.pe-desce { color: var(--ok); } .pe-sobe { color: var(--marca-clara); }

/* evolução */
.pe-evo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pe-evo .pe-cheia { grid-column: 1 / -1; }
@media (max-width: 760px) { .pe-evo { grid-template-columns: 1fr; } }
.pe-graf { width: 100%; height: auto; display: block; }
.pe-graf text { fill: var(--texto-2); font-size: 12px; font-family: inherit; }
.pe-graf text.eixo { fill: var(--texto-3); font-size: 11px; }

/* quem pode usar */
.pe-massa-l { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--linha); }
.pe-massa-l small { color: var(--texto-3); }
.pe-add-acesso { display: flex; gap: 8px; }
.pe-add-acesso input { flex: 1; }
.pe-campos > label, .pe-calc-form > label, .pe-dobras > label { font-size: .82rem; font-weight: 500; color: var(--texto-2); }

/* como fazer: duas fotos alternando, como um GIF */
@keyframes pe-gif { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
.pe-gif { position: relative; display: block; flex: none; width: 54px; height: 38px; padding: 0; border: 1px solid var(--linha-2); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.pe-gif img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-gif img:first-child { z-index: 1; animation: pe-gif 1.6s steps(1, end) infinite; }
.pe-gif.vazio { display: grid; place-items: center; background: var(--fundo-3); color: var(--texto-3); font-size: .85rem; }
.pe-gif.grande { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--r-ctl); cursor: default; }
.pe-gif.grande img:first-child { animation-duration: 1.8s; }
@media (prefers-reduced-motion: reduce) { .pe-gif img:first-child { animation: none; } }
.pe-ia-op { cursor: default; }
.pe-ia-op:hover { transform: none; border-color: var(--linha-2); }
.pe-ia-dia { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--linha); }
.pe-ia-dia b { font-weight: 500; font-size: .88rem; }
.pe-ia-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pe-ia-ex li { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.pe-ia-ex small { color: var(--texto-3); }
.pe-ia-op .btn { justify-self: start; margin-top: 4px; }

/* exercício da ficha: cartão com foto, nome e os números com rótulo */
.pe-exs { display: grid; gap: 8px; }
.pe-ex { display: grid; grid-template-columns: 76px minmax(0, 1fr) 36px; grid-template-areas: "foto nome tirar" "foto nums nums"; gap: 8px 10px; align-items: center; padding: 10px; border: 1px solid var(--linha); border-radius: var(--r-ctl); background: var(--fundo-2); }
.pe-ex .pe-gif-vaga { grid-area: foto; align-self: stretch; }
.pe-ex .pe-gif { width: 76px; height: 100%; min-height: 64px; border-radius: 10px; }
.pe-ex .pe-ex-nome { grid-area: nome; }
.pe-ex .pe-ex-tirar { grid-area: tirar; }
.pe-ex-nums { grid-area: nums; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pe-ex-c { display: grid; gap: 2px; font-size: .7rem !important; font-weight: 500; color: var(--texto-3) !important; }
.pe-ex-c small { font-size: inherit; padding-left: 2px; }
.modal .pe-ex input { min-height: 36px; padding: 5px 9px; font-size: .88rem; }
.modal .pe-ex .pe-ex-nome { min-height: 40px; font-weight: 500; background: transparent; border-color: transparent; padding-left: 4px; font-size: .98rem; }
.modal .pe-ex .pe-ex-nome:hover { border-color: var(--linha-2); }
.modal .pe-ex .pe-ex-nome:focus { background: var(--fundo-3); }
@media (min-width: 761px) {
  .pe-ex { grid-template-columns: 76px minmax(0, 1.4fr) minmax(0, 2fr) 36px; grid-template-areas: "foto nome nums tirar"; }
  .pe-ex .pe-gif { height: 54px; }
}
@media (max-width: 420px) { .pe-ex { grid-template-columns: 60px minmax(0, 1fr) 36px; } .pe-ex .pe-gif { width: 60px; } .pe-ex-nums { gap: 4px; } }

/* ver treino / dieta (modo de uso) */
.pe-ver { gap: 14px; }
.pe-ver-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pe-ver-topo h2 { font-size: 1.3rem; }
.pe-ver-prog { display: grid; gap: 6px; font-size: .86rem; color: var(--texto-2); }
.pe-ver-prog i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--marca) calc(var(--p) * 100%), var(--fundo-3) 0); transition: background .3s; }
.pe-ver-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pe-ver-lista li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo); transition: opacity .2s, border-color .2s; }
.pe-ver-lista .pe-gif { width: 96px; height: 72px; border-radius: 10px; }
.pe-ver-txt { display: grid; gap: 3px; min-width: 0; }
.pe-ver-txt strong { font-weight: 500; font-size: 1.02rem; line-height: 1.25; }
.pe-ver-num { color: var(--texto-2); font-size: .92rem; }
.pe-ver-num b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.pe-ver-ok { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linha-2); background: none; color: transparent; cursor: pointer; }
.pe-ver-ok:hover { border-color: var(--marca); color: var(--texto-3); }
.pe-ver-lista li.feito { opacity: .55; border-color: rgba(255, 109, 41, .35); }
.pe-ver-lista li.feito strong { text-decoration: line-through; }
.pe-ver-lista li.feito .pe-ver-ok { background: var(--marca); border-color: var(--marca); color: #161316; }
.pe-ver-obs { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--fundo-3); }
.pe-ver-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pe-ver-macros span { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--fundo-3); }
.pe-ver-macros small { color: var(--texto-3); font-size: .74rem; }
.pe-ver-macros b { font-weight: 500; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pe-ver-macros em { font-style: normal; color: var(--texto-3); font-size: .74rem; }
.pe-ver-ref { padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo); }
.pe-ver-ref-topo { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.pe-ver-ref-topo strong { font-weight: 500; flex: 1; }
.pe-ver-ref ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pe-ver-ref li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linha); font-size: .92rem; color: var(--texto-2); }
.pe-ver-ref li b { color: var(--texto); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .pe-ver-lista li { grid-template-columns: 80px minmax(0, 1fr) 44px; gap: 10px; } .pe-ver-lista .pe-gif { width: 80px; height: 60px; } .pe-ver-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* questionário da dieta */
.pe-q { min-height: 420px; align-content: start; }
.pe-q-prog { display: grid; gap: 6px; color: var(--texto-3); font-size: .78rem; }
.pe-q-prog i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--marca) calc(var(--p) * 100%), var(--fundo-3) 0); }
.pe-q h2 { font-size: 1.35rem !important; margin-top: 6px !important; }
.pe-q-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pe-q-op { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--linha-2); border-radius: var(--r-card); background: var(--fundo); color: var(--texto); text-align: left; cursor: pointer; transition: border-color var(--t), background var(--t); }
.pe-q-op:hover { border-color: var(--texto-3); }
.pe-q-op b { font-weight: 500; font-size: 1rem; }
.pe-q-op small { color: var(--texto-3); font-size: .8rem; }
.pe-q-op[aria-pressed=true] { border-color: var(--marca); background: rgba(255, 109, 41, .1); }
.pe-q-rot { margin: 4px 0 -4px; color: var(--texto-2); font-size: .82rem; font-weight: 500; }
.pe-q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-q-chip { padding: 9px 14px; border: 1px solid var(--linha-2); border-radius: 100vw; background: none; color: var(--texto-2); font-size: .88rem; cursor: pointer; }
.pe-q-chip[aria-pressed=true] { border-color: var(--marca); background: rgba(255, 109, 41, .12); color: var(--texto); }
.pe-q-resumo { margin: 0; display: grid; border: 1px solid var(--linha); border-radius: var(--r-card); overflow: hidden; }
.pe-q-resumo div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--linha); font-size: .9rem; }
.pe-q-resumo div:first-child { border-top: 0; }
.pe-q-resumo dt { color: var(--texto-3); }
.pe-q-resumo dd { margin: 0; color: var(--texto); }

/* ---------- Trabalho: jobs, ClickUp e prospecção ---------- */
.tb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tb-kpi { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-2); }
.tb-kpi small { color: var(--texto-3); font-size: .78rem; }
.tb-kpi strong { font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tb-kpi em { font-style: normal; color: var(--texto-3); font-size: .78rem; }
.tb-kpi.ruim strong { color: var(--perigo); }
.tb-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tb-barra > span { flex: 1; }
.tb-barra .abas { max-width: 100%; }
.tb-barra .abas button span { margin-left: 4px; opacity: .6; font-variant-numeric: tabular-nums; }
.tb-meta { margin: 0; color: var(--texto-3); font-size: .84rem; }
.tb-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tb-item { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-2); }
.tb-item:hover { border-color: var(--linha-2); }
.tb-item-corpo { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 10px 12px; border: 0; background: none; color: var(--texto); text-align: left; text-decoration: none; cursor: pointer; }
.tb-item-corpo strong { font-weight: 500; font-size: 1rem; }
.tb-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tb-tags em { font-style: normal; }
.tb-acoes { display: flex; gap: 6px; flex: none; }
.tb-st-producao, .tb-st-revisao { border-color: rgba(255, 109, 41, .45) !important; color: var(--marca-clara) !important; }
.tb-st-entregue { border-color: rgba(245, 184, 74, .4) !important; color: var(--aviso) !important; }
.tb-st-pago { border-color: rgba(74, 222, 128, .35) !important; color: var(--ok) !important; }
@media (max-width: 560px) { .tb-item { flex-wrap: wrap; padding: 4px 4px 10px; } .tb-item > .btn, .tb-acoes { margin-left: 12px; } }
.tb-item.aberto { flex-wrap: wrap; border-color: var(--linha-2); }
.tb-desc { color: var(--texto-2); font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-resumo { flex-basis: 100%; margin: 0 8px 10px 12px; padding: 14px 16px; border-top: 1px solid var(--linha); display: grid; gap: 8px; font-size: .93rem; line-height: 1.5; }
.tb-resumo p { margin: 0; }
.tb-resumo h4 { margin: 6px 0 0; font-size: .76rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.tb-resumo ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.tb-resumo .btn { justify-self: start; margin-top: 4px; }
.tb-avisos { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; }
.tb-avisos.ok .i { color: var(--ok); }
.tb-funil { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.tb-funil div { display: grid; gap: 2px; padding: 12px; border-radius: var(--r-ctl); background: var(--fundo-2); border: 1px solid var(--linha); text-align: center; }
.tb-funil strong { font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tb-funil small { color: var(--texto-3); font-size: .74rem; }
.tb-funil div:nth-child(5) strong { color: var(--ok); }
@media (max-width: 560px) { .tb-funil { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tb-voltar { margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(255, 109, 41, .4); border-radius: var(--r-card); background: rgba(255, 109, 41, .07); }
.tb-voltar h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .9rem; font-weight: 500; color: var(--marca-clara); }
.tb-voltar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tb-voltar li { display: flex; gap: 10px; align-items: baseline; }
.tb-voltar button { padding: 0; border: 0; background: none; color: var(--texto); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tb-voltar small { color: var(--texto-3); }
.tb-grupo { margin-bottom: 16px; }
.tb-grupo h3 { margin: 0 0 8px; font-size: .86rem; font-weight: 500; color: var(--texto-2); }
.tb-grupo h3 span { color: var(--texto-3); font-weight: 400; }

/* Trabalho › Prospecção › agentes (trabalho-agentes.js) */
.tb-modos { margin-bottom: 14px; }
.ag-status { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-2); }
.ag-status > div { flex: 1; display: grid; gap: 2px; }
.ag-status strong { font-weight: 500; }
.ag-status small { color: var(--texto-3); font-size: .82rem; line-height: 1.4; }
.ag-status.on { border-color: rgba(255, 109, 41, .4); }
.ag-status .interruptor[aria-checked=true]::after { translate: 18px 0; }
.ag-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-kpis strong span { font-size: .9rem; color: var(--texto-3); }
.tb-kpi.bom strong { color: var(--ok); }
.ag-cab { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 6px; padding: 0 2px; }
.ag-cab h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.ag-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-2); overflow: hidden; }
.ag-lista li + li { border-top: 1px solid var(--linha); }
.ag-linha { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; color: var(--texto); text-align: left; cursor: pointer; }
.ag-linha:hover { background: var(--fundo-3); }
.ag-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ag-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ag-nome strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-nome em { flex: none; max-width: 45%; padding: 1px 8px; border-radius: 6px; background: var(--fundo-3); color: var(--texto-3); font-style: normal; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ultima { color: var(--texto-2); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-linha time { flex: none; align-self: flex-start; color: var(--texto-3); font-size: .78rem; }
@media (max-width: 560px) { .ag-nome em { display: none; } }

/* os bichinhos: formas felpudas com dois olhos */
.ag-av { position: relative; flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .22), inset 0 4px 8px rgba(255, 255, 255, .28); }
.ag-av b { width: 6px; height: 11px; border-radius: 4px; background: #fbf4ea; box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.ag-vendas { border-radius: 12px; background: radial-gradient(circle at 35% 30%, #ff7a5c, #e2452f 70%); }
.ag-redator { width: 46px; border-radius: 10px; background: radial-gradient(circle at 40% 35%, #ff8fd6, #d9469e 72%); clip-path: polygon(50% 0, 100% 36%, 84% 100%, 16% 100%, 0 36%); box-shadow: none; padding-top: 6px; }
.ag-pesquisador { border-radius: 12px; background: radial-gradient(circle at 35% 30%, #6fb6ff, #2f73e0 72%); }
.ag-pesquisador b { width: 8px; height: 14px; }
.ag-diretor { height: 30px; border-radius: 100vw; background: radial-gradient(circle at 40% 30%, #ff8fd6, #c93f93 72%); }
.ag-diretor b { width: 9px; height: 9px; border-radius: 50%; }
.ag-canal { display: grid; grid-template: 1fr 1fr / 1fr 1fr; place-items: stretch; gap: 3px; box-shadow: none; }
.ag-canal i { border-radius: 6px; box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .22); }
.ag-canal i:nth-child(1) { background: #e95fb7; } .ag-canal i:nth-child(2) { background: #3d86f0; } .ag-canal i:nth-child(3) { background: #d9469e; border-radius: 40% 40% 6px 6px; } .ag-canal i:nth-child(4) { background: #e2452f; }

/* conversa de um agente */
.ag-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ag-topo > div { display: grid; gap: 1px; min-width: 0; }
.ag-topo strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-topo small { color: var(--texto-3); font-size: .82rem; }
.ag-topo .ag-espaco { flex: 1; }
.ag-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-feed li { display: flex; gap: 10px; align-items: flex-start; }
.ag-feed li .ag-av { width: 32px; height: 32px; gap: 4px; }
.ag-feed li .ag-av b { width: 4px; height: 8px; }
.ag-feed li .ag-diretor { height: 22px; }
.ag-feed li > div { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--fundo-2); border: 1px solid var(--linha); }
.ag-feed b { display: block; margin-bottom: 2px; font-weight: 500; font-size: .84rem; color: var(--marca-clara); }
.ag-feed p { margin: 0; font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; }
.ag-feed time { display: block; margin-top: 4px; color: var(--texto-3); font-size: .74rem; }
.ag-resp { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--linha-2); border-radius: 12px; background: var(--fundo-3); color: var(--texto); font: inherit; resize: vertical; }
.ag-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ag-denovo { margin-top: 10px; }

/* Prospecção: abas das frentes, sugestões, estratégia e conversa com a empresa */
.pf-abas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; padding-bottom: 2px; }
.pf-abas::-webkit-scrollbar { display: none; }
.pf-abas button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 100vw; background: var(--fundo-2); color: var(--texto-2); font: inherit; font-size: .9rem; cursor: pointer; }
.pf-abas button[aria-selected=true] { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.pf-abas button span { min-width: 18px; padding: 0 5px; border-radius: 100vw; background: var(--marca); color: #161316; font-size: .74rem; font-weight: 500; }
.pf-luz { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); opacity: .5; }
.pf-luz.on { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.pf-mais { border-style: dashed !important; }
.pf-sugestoes { margin: -2px 0 14px; padding: 12px 14px; border: 1px dashed var(--linha-2); border-radius: var(--r-card); }
.pf-sugestoes > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ag-estrategia { margin: 4px 0 6px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-2); }
.ag-estrategia summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: .92rem; }
.ag-estrategia summary::-webkit-details-marker { display: none; }
.ag-estrategia summary .ag-av { width: 30px; height: 20px; gap: 4px; }
.ag-estrategia summary .ag-av b { width: 6px; height: 6px; }
.ag-estrategia p { margin: 0; padding: 0 16px 10px; color: var(--texto-2); font-size: .9rem; line-height: 1.55; }
.ag-estrategia .btn { margin: 0 16px 12px; }
.pf-perfil summary { cursor: pointer; color: var(--texto-3); font-size: .84rem; }
.pf-perfil p { margin: 6px 0 0; color: var(--texto-2); font-size: .86rem; }
.pf-chat { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.pf-chat li { max-width: 84%; display: grid; gap: 2px; }
.pf-chat li p { margin: 0; padding: 8px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.pf-chat li small { padding: 0 6px; color: var(--texto-3); font-size: .72rem; }
.pf-chat .eles { justify-self: start; }
.pf-chat .eles p { background: var(--fundo-3); border-top-left-radius: 4px; }
.pf-chat .nos { justify-self: end; text-align: right; }
.pf-chat .nos p { background: rgba(255, 109, 41, .16); border-top-right-radius: 4px; text-align: left; }
.pf-chat .fila p { background: none; border: 1px dashed var(--linha-2); }

/* Prospecção: cartões das frentes na tela e o pop-up de cada uma */
.pf-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pf-cartao { position: relative; display: grid; align-content: start; gap: 6px; min-height: 150px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--r-card); background: var(--fundo-2); color: var(--texto); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color var(--t), transform var(--t) var(--curva); }
.pf-cartao:hover { border-color: var(--linha-2); transform: translateY(-1px); }
.pf-cartao.on { border-color: rgba(255, 109, 41, .45); background: linear-gradient(160deg, rgba(255, 109, 41, .09), var(--fundo-2) 55%); }
.pf-cartao strong { font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; }
.pf-cartao-topo { display: flex; align-items: center; gap: 7px; color: var(--texto-3); font-size: .76rem; }
.pf-cartao-topo em { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 100vw; background: var(--marca); color: #161316; font-style: normal; font-weight: 500; text-align: center; }
.pf-cartao-num { color: var(--texto-2); font-size: .86rem; }
.pf-cartao-ultima { color: var(--texto-3); font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-cartao-equipe { display: flex; gap: 4px; margin-top: auto; padding-top: 6px; }
.pf-cartao-equipe .ag-av { width: 22px; height: 22px; gap: 3px; border-radius: 7px; }
.pf-cartao-equipe .ag-av b { width: 3px; height: 6px; }
.pf-cartao-equipe .ag-diretor { height: 16px; align-self: center; }
.pf-cartao-equipe .ag-diretor b { width: 4px; height: 4px; }
.pf-cartao.sugestao { min-height: 120px; border-style: dashed; background: none; }
.pf-cartao.sugestao strong { color: var(--texto-2); }
.pf-cartao.sugestao:hover strong { color: var(--texto); }
.pf-cartao.sugestao .i { width: 14px; height: 14px; }
@media (max-width: 560px) { .pf-grade { grid-template-columns: 1fr 1fr; } .pf-cartao { min-height: 130px; padding: 12px; } .pf-cartao-ultima { display: none; } }

dialog.pf-modal { width: min(760px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px)); max-height: none; display: none; overflow: hidden; }
dialog.pf-modal[open] { display: flex; flex-direction: column; }
.pf-modal-cab { display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.pf-modal-cab h2 { margin: 0; font-size: 1.25rem; font-weight: 500; }
.pf-modal-abas { margin: 6px 20px 10px; align-self: flex-start; }
.pf-modal-abas span { margin-left: 4px; padding: 0 6px; border-radius: 100vw; background: var(--marca); color: #161316; font-size: .74rem; }
.pf-modal-corpo { flex: 1; overflow-y: auto; padding: 0 20px 20px; overscroll-behavior: contain; }
@media (max-width: 560px) { dialog.pf-modal { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; border: 0; } }
.pf-modal-cab .ag-espaco { flex: 1; }
.pf-modal-abas button span { display: inline-block; min-width: 18px; line-height: 18px; text-align: center; opacity: 1 !important; }
.ag-instagram { border-radius: 14px; background: radial-gradient(circle at 30% 110%, #ffd36b, #f7743a 35%, #d9469e 65%, #7b4fd6 100%); }
.pf-cartao-equipe .ag-instagram { border-radius: 8px; }
.pf-ig { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px 14px; border: 1px dashed var(--linha-2); border-radius: var(--r-card); }
.pf-ig .btn { justify-self: start; }
.pf-sim { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px 16px; border: 1px solid rgba(255, 109, 41, .4); border-radius: var(--r-card); background: rgba(255, 109, 41, .07); }
.pf-sim > div { flex: 1; display: grid; gap: 2px; }
.pf-sim strong { font-weight: 500; }
.pf-sim small { color: var(--texto-2); font-size: .84rem; line-height: 1.4; }
@media (max-width: 560px) { .pf-sim { flex-direction: column; align-items: stretch; } }
.pf-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }