:root{
  --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --brand:#0f766e; --brand2:#0d9488; --ok:#16a34a; --okbg:#dcfce7;
  --wait:#b45309; --waitbg:#fef3c7; --danger:#dc2626; --shadow:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
/* nada pode estourar a largura da tela (matava o layout no celular com barra
   de rolagem horizontal e a página "solta"). Usamos `clip` (não `hidden`):
   clip corta o transbordo horizontal SEM virar contêiner de rolagem — o que
   preservaria e é o que faz o position:sticky dos cabeçalhos de mês funcionar. */
html,body{overflow-x:clip;max-width:100%}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
h1{font-size:1.4rem;margin:0}
h3{margin:0 0 .6rem}
small{color:var(--muted)}
a{color:var(--brand)}

/* sidebar */
.sidebar{position:fixed;top:0;left:0;height:100vh;width:236px;background:linear-gradient(180deg,#0e6f68 0%,#0a4f49 100%);color:#fff;display:flex;flex-direction:column;padding:1.1rem .8rem 1rem;overflow-y:auto;z-index:40;transition:transform .25s ease;box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:.7rem;padding:.1rem .3rem 1rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:1rem}
.brand strong{display:block;line-height:1.15;color:#fff;font-size:1rem;letter-spacing:.01em}
.logo{background:linear-gradient(135deg,#2dd4bf 0%,#0d9488 55%,#0f766e 100%);border-radius:12px;width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.3)}
.logo svg{width:22px;height:22px}
.badge{font-size:.62rem;padding:.12rem .45rem;border-radius:999px;vertical-align:middle;font-weight:700;letter-spacing:.02em}
.badge-local{background:rgba(255,255,255,.22)}
.badge-cloud{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.45)}
.side-nav{display:flex;flex-direction:column;gap:1.15rem}
.nav-group{display:flex;flex-direction:column;gap:.2rem}
.nav-group-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:#99f6e4;padding:.2rem .75rem .35rem;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.tab{display:flex;align-items:center;gap:.65rem;background:transparent;color:rgba(255,255,255,.8);border:0;padding:.6rem .75rem;border-radius:10px;font-size:.9rem;cursor:pointer;text-align:left;width:100%;transition:background .15s,color .15s}
.tab:hover{background:rgba(255,255,255,.09);color:#fff}
.tab.active{background:#fff;color:#0d5f58;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.nav-ic{width:1.4rem;text-align:center;flex:0 0 auto;display:inline-grid;place-items:center;opacity:.9}
.tab.active .nav-ic{opacity:1}
.tab-badge{margin-left:auto;background:#ef4444;color:#fff;font-size:.68rem;font-weight:700;line-height:1;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex:0 0 auto}

.nav-toggle{display:none;position:fixed;top:.6rem;left:.6rem;z-index:50;background:var(--brand);color:#fff;border:0;width:44px;height:44px;border-radius:12px;font-size:1.3rem;cursor:pointer;box-shadow:var(--shadow)}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}

main{max-width:1600px;padding:1rem 1.5rem 1rem;margin-left:236px}
/* só o Dashboard ocupa a página inteira; as demais telas usam uma largura de
   leitura confortável para as colunas não ficarem esparramadas */
.screen{display:none;animation:fade .2s;max-width:1160px}
#screen-dashboard{max-width:none}
.screen.active{display:block}
/* só opacidade: um transform aqui viraria o pai da topbar e quebraria o
   position:fixed dela durante a troca de aba (ela "descia e voltava") */
@keyframes fade{from{opacity:0}to{opacity:1}}

/* cabeçalho de tela = topbar (título + descrição + ações compactas à direita) */
.screen-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.head-titles{flex:1;min-width:0}
.head-titles h1{line-height:1.1}
.head-sub{color:var(--muted);font-size:.85rem;margin:.15rem 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* filtro "Ano" embutido na topbar do Dashboard (canto direito) */
.head-ano{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.head-ano select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;font-size:.9rem;font-weight:600;color:var(--ink);background:#fff;cursor:pointer}

/* ===== sino de notificações (fica no canto direito do cabeçalho da tela ativa) ===== */
.notif-wrap{position:relative;flex:0 0 auto;display:flex;align-items:center}
.notif-btn{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;color:var(--muted);box-shadow:var(--shadow)}
.notif-btn:hover{color:var(--ink);border-color:var(--brand2)}
.notif-btn svg{width:20px;height:20px}
.notif-btn.has-notif{color:var(--brand);border-color:var(--brand2)}
.notif-badge{position:absolute;top:-.35rem;right:-.35rem;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.notif-badge[hidden]{display:none} /* o display:flex acima venceria o atributo hidden */
.notif-dropdown{position:absolute;top:calc(100% + .5rem);right:0;width:min(340px,86vw);max-height:70vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 34px rgba(15,40,60,.18);z-index:60}
.notif-head{padding:.7rem .85rem;font-weight:700;font-size:.9rem;border-bottom:1px solid var(--line)}
.notif-empty{padding:1.6rem .9rem;text-align:center;color:var(--muted);font-size:.85rem}
.notif-item{width:100%;display:flex;align-items:flex-start;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.notif-item:last-child{border-bottom:0}
.notif-item-main{flex:1 1 auto;min-width:0;text-align:left;display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .85rem;background:none;border:0;cursor:pointer}
.notif-item-main:hover{background:rgba(13,148,136,.07)}
.notif-dismiss{flex:0 0 auto;width:22px;height:22px;margin:.5rem .5rem 0 0;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.notif-dismiss:hover{background:rgba(148,163,184,.28);color:var(--ink)}
.notif-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#f1f5f9;color:var(--muted)}
.notif-ic svg{width:16px;height:16px}
.notif-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.notif-body b{font-size:.85rem;color:var(--ink)}
.notif-body>span{font-size:.78rem;color:var(--muted);line-height:1.35}
.notif-item.n-alerta{border-left-color:var(--danger)}
.notif-item.n-alerta .notif-ic{background:#fee2e2;color:#dc2626}
.notif-item.n-aviso{border-left-color:var(--wait)}
.notif-item.n-aviso .notif-ic{background:var(--waitbg);color:var(--wait)}
.notif-item.n-info{border-left-color:var(--brand2)}
.notif-item.n-info .notif-ic{background:#ccfbf1;color:var(--brand)}
.hint{color:var(--muted);font-size:.85rem;margin:.2rem 0 1rem}
/* link inline dentro de um hint curto (ex.: "Saiba mais" → Ajuda) */
.link-btn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--brand2);cursor:pointer;text-decoration:underline}
.help-q{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;min-width:26px;border-radius:50%;border:1px solid var(--brand2);background:none;color:var(--brand2);font-size:.68rem;font-weight:700;line-height:1;padding:0;cursor:pointer;vertical-align:middle;margin-left:.35rem}
.help-q:hover{background:var(--brand2);color:#fff}

/* buttons */
.btn{background:#fff;border:1px solid var(--line);padding:.55rem .9rem;border-radius:10px;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink)}
.btn:hover{border-color:var(--brand)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
/* ação secundária (ex.: "Registrar/editar individual" ao lado da ação principal do grupo) —
   sem preenchimento, só a borda tingida, pra diferenciar sem competir com o botão principal */
.btn-tint{background:transparent;border-color:rgba(13,148,136,.35);color:var(--brand2)}
.btn-tint:hover{background:rgba(13,148,136,.10);border-color:var(--brand2)}
/* "Editar" do grupo (ação principal já registrada) — borda na cor do "Registrar tudo",
   sem preenchimento (o preenchimento é exclusivo de quem ainda falta registrar) */
.btn-outline-brand{border-color:var(--brand)}
.btn-outline-brand:hover{border-color:var(--brand2)}
.row-btns{display:flex;gap:.5rem;flex-wrap:wrap}

/* filters */
.filters{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.1rem}
.filters label,.modal-body label{display:flex;flex-direction:column;font-size:.75rem;color:var(--muted);gap:.25rem;font-weight:600}
.filters input,.filters select{padding:.45rem .5rem;border:1px solid var(--line);border-radius:8px;font-size:.9rem;background:#fff}

/* cards */
.card{background:var(--card);border-radius:14px;padding:.85rem;box-shadow:var(--shadow);margin-bottom:1rem}
.card.danger{border:1px solid #fecaca}
/* dashboard em página única: 2 gráficos + cards, com "Próximos recebimentos" como coluna alta à direita */
.dash-grid{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"rail bars line" "rail comp dest";gap:.8rem;align-items:start;margin-bottom:.8rem}
.dash-grid .card{margin-bottom:0}
.ga-bars{grid-area:bars}.ga-line{grid-area:line}.ga-rail{grid-area:rail}.ga-comp{grid-area:comp}.ga-dest{grid-area:dest}
.ga-rail{max-height:660px;overflow:auto}
.dash-dica{display:flex;gap:.5rem;align-items:baseline;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:12px;padding:.7rem 1rem;font-size:.85rem;margin:0}
.dash-dica b{color:#166534}
.legenda-card{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:.75rem .95rem;margin-bottom:.9rem}
.legenda-txt{flex:1 1 260px;min-width:0}
.legenda-txt b{color:#166534}
.legenda-txt p{margin:.3rem 0 0;font-size:.83rem;color:#166534;line-height:1.5}
.legenda-card .btn{flex:0 0 auto}
@media(max-width:1024px){.dash-grid{grid-template-columns:1fr 1fr;grid-template-areas:"rail rail" "bars line" "comp dest"}.ga-rail{max-height:none}}
@media(max-width:600px){.dash-grid{grid-template-columns:1fr;grid-template-areas:"rail" "bars" "line" "comp" "dest"}.kpis{grid-template-columns:1fr}}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:.8rem}
.kpi{background:var(--card);border-radius:14px;padding:.9rem 1rem;box-shadow:var(--shadow);display:flex;align-items:flex-start;gap:.75rem}
.kpi-ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff}
.kpi-ic svg{width:22px;height:22px}
.kpi-body{display:flex;flex-direction:column;gap:.12rem;min-width:0;flex:1}
.kt{font-size:.75rem;color:var(--muted);font-weight:600}
.kv{font-size:1.3rem;font-weight:800;color:var(--brand);line-height:1.15;overflow-wrap:anywhere}
.ks{font-size:.7rem;color:var(--muted)}
/* tons dos KPIs */
.kpi-green .kpi-ic{background:var(--ok)} .kpi-green .kv{color:var(--ok)}
.kpi-amber .kpi-ic{background:#f59e0b} .kpi-amber .kv{color:#d97706}
.kpi-blue .kpi-ic{background:#2563eb} .kpi-blue .kv{color:#2563eb}
.kpi-purple .kpi-ic{background:#7c3aed} .kpi-purple .kv{color:#7c3aed}
/* barra de meta */
.kpi-metatxt{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin-top:.25rem}
.kpi-bar{height:7px;border-radius:99px;background:#e5e7eb;overflow:hidden;margin-top:.15rem}
.kpi-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#2563eb)}
.kpi-editmeta,.kpi-setmeta{background:none;border:0;color:var(--brand);font-size:.7rem;font-weight:600;cursor:pointer;padding:.25rem 0 0;text-align:left}
.kpi-setmeta{color:#2563eb}
/* destaques do mês */
.destaques{display:flex;flex-direction:column;gap:.2rem}
.dst{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.dst:last-child{border-bottom:0}
.dst-ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff}
.dst-ic svg{width:20px;height:20px}
.dst-info{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.dst-t{font-weight:700;font-size:.9rem}
.dst-sub{font-size:.76rem;color:var(--muted)}
.dst-v{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.dst-pos .dst-ic{background:var(--ok)} .dst-pos .dst-v{color:var(--ok)}
.dst-neg .dst-ic{background:var(--danger)} .dst-neg .dst-v{color:var(--danger)}
.dst-neu .dst-ic{background:#2563eb}

/* bar chart */
.chart-legend{display:flex;gap:1rem;font-size:.72rem;color:var(--muted);margin-bottom:.6rem}
.chart-legend span{display:flex;align-items:center;gap:.35rem}
.chart-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.chart-legend .lg-rec{background:var(--brand2)}
.chart-legend .lg-prev{background:repeating-linear-gradient(45deg,#f59e0b,#f59e0b 4px,#fbbf24 4px,#fbbf24 8px)}
.chart-legend .lg-prevano{background:#f59e0b}
.chart-bars{display:flex;flex-direction:column;gap:.35rem}
.barrow{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:.5rem;font-size:.8rem}
.bl{color:var(--muted);font-weight:600}
.bt{background:#eef2f7;border-radius:6px;height:16px;overflow:hidden;display:flex}
.bf{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.bf.prev{background:repeating-linear-gradient(45deg,#f59e0b,#f59e0b 5px,#fbbf24 5px,#fbbf24 10px);cursor:pointer}
.bv{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;font-size:.75rem}
.barrow.now .bl{color:var(--brand);font-weight:800}
/* charts SVG (barras verticais + linha) */
.linechart{width:100%;height:auto;display:block;max-height:230px}
.vb-rec{fill:var(--brand2)}
.vb-prev{fill:#f59e0b;cursor:pointer}
.vb-lab{fill:var(--muted);font-size:9px;text-anchor:middle;font-weight:600}
.vb-lab.now,.lc-xlab.now{fill:var(--brand);font-weight:800}
.lc-grid{stroke:var(--line);stroke-width:1}
.lc-ylab{fill:var(--muted);font-size:9px;text-anchor:end}
.lc-xlab{fill:var(--muted);font-size:9px;text-anchor:middle}
.lc-area{fill:rgba(15,118,110,.10);stroke:none}
.lc-line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.lc-dot{fill:var(--brand);stroke:#fff;stroke-width:1.5;pointer-events:none}
.lc-hit{fill:transparent;cursor:pointer}
.lc-cur rect{fill:var(--brand)}
.lc-cur text{fill:#fff;font-size:9px;font-weight:700}
.lc-line-prev{fill:none;stroke:#f59e0b;stroke-width:1.8;stroke-dasharray:4 3}
.barrow.now .bl:after{content:" •"}

/* composição */
.comporow{margin-bottom:.7rem}
.compohead{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.2rem}
.compobar{background:#eef2f7;border-radius:6px;height:10px;overflow:hidden}
.compobar span{display:block;height:100%;background:linear-gradient(90deg,#12a594,#0e6f68)}

/* a receber */
.areceber .arrow{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--line)}
.arrow.atrasado strong{color:var(--danger)}
/* Próximos recebimentos (blocos por urgência) */
.areceber{display:flex;flex-direction:column;gap:.8rem}
.rc-sec{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rc-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.55rem .85rem;font-weight:700;font-size:.9rem}
.rc-badge{display:inline-flex;align-items:center;gap:.5rem}
.rc-badge::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.rc-tot{font-variant-numeric:tabular-nums;opacity:.85}
.rc-item{display:flex;justify-content:space-between;align-items:center;gap:.7rem;padding:.6rem .85rem;border-top:1px dashed var(--line);background:#fff}
.rc-info{display:flex;flex-direction:column;line-height:1.35}
.rc-sub{font-size:.76rem;color:var(--muted)}
.rc-val{font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-atr .rc-head{background:#fef2f2;color:var(--danger)}
.rc-atr .rc-val{color:var(--danger)}
.rc-soon .rc-head{background:var(--waitbg);color:var(--wait)}
.rc-far .rc-head{background:var(--okbg);color:var(--ok)}
.rc-all{width:100%;margin-top:.1rem;text-align:center}

/* resumo lista */
.resumo-lista{display:flex;gap:1.2rem;flex-wrap:wrap;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:.6rem .9rem;margin-bottom:.8rem;font-size:.85rem}

/* ============ Lançamentos: toolbar fixa, lista em cartões ============ */
/* barra de ferramentas: busca + Filtros + abas de status */
/* grudada no topo ao rolar (desktop e celular — no celular ajustada para
   ficar logo abaixo da topbar fixa, não atrás dela, ver media query embaixo) */
.lanc-tools{background:var(--bg);display:flex;flex-direction:column;gap:.55rem;padding:.55rem 0 .7rem;margin-bottom:.3rem;position:sticky;top:0;z-index:20}
.tool-row{display:flex;gap:.5rem;align-items:center}
/* seletor de ano inline dos Lançamentos (substitui a antiga barra de busca) */
.lanc-ano{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.lanc-ano select{padding:.5rem .55rem;border:1px solid var(--line);border-radius:11px;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--card);box-shadow:var(--shadow);cursor:pointer}
.tool-row .btn-filtros{margin-left:auto}
.searchbox{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:0 .75rem;box-shadow:var(--shadow)}
.searchbox .s-ic{display:inline-grid;place-items:center;color:var(--muted);flex:0 0 auto}
.searchbox .s-ic svg{width:16px;height:16px}
.searchbox input{flex:1;border:0;background:none;outline:none;color:var(--ink);font-size:.9rem;padding:.6rem 0;min-width:0}
.btn-filtros{position:relative;display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto}
.btn-filtros .bic{margin:0}
.filtros-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--brand2);box-shadow:0 0 0 2px var(--bg)}
.seg-tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;box-shadow:var(--shadow)}
.seg-tab{flex:1;border:0;background:none;color:var(--muted);font-weight:600;font-size:.82rem;padding:.5rem .3rem;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.seg-tab.on{background:var(--brand);color:#fff;box-shadow:0 1px 4px rgba(15,118,110,.35)}

/* chips dos filtros ativos (Mês/Tipo/Modalidade/Situação) — cada um remove só o seu */
.filtros-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.fchip{display:inline-flex;align-items:center;gap:.3rem;background:var(--okbg);color:var(--ok);font-size:.78rem;font-weight:600;padding:.25rem .3rem .25rem .6rem;border-radius:999px}
.fchip button{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;font-size:.85rem;font-weight:800;line-height:1;padding:0}
.fchip button:hover{background:rgba(0,0,0,.12)}

.lanc-list{display:flex;flex-direction:column;gap:.5rem}
/* card: coluna esquerda empilhada (status → título → detalhes) + valor/status à direita, alinhados ao topo */
.lanc-row{display:grid;grid-template-columns:1fr auto;gap:.7rem;align-items:start;background:var(--card);
  border:1px solid var(--line);border-radius:13px;padding:.7rem .8rem;box-shadow:var(--shadow);cursor:pointer;
  transition:border-color .15s,transform .05s}
.lanc-row:hover{border-color:var(--brand2)}
.lanc-row:active{transform:scale(.995)}
.lanc-row:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.lr-main{min-width:0;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.lr-sitrow{display:flex;align-items:center;gap:.45rem}
.lr-sitrow .sit-sel{width:auto}
.lr-title{font-weight:700;font-size:.95rem;line-height:1.2}
.lr-sub{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.lr-right{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.lr-money{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.lanc-row.excl .lr-title,.lanc-row.excl .lr-money{text-decoration:line-through}
.lanc-row.excl{opacity:.7}
.empty-card{text-align:center;color:var(--muted);padding:2.5rem 1rem;background:var(--card);border:1px dashed var(--line);border-radius:13px}

/* detalhe do lançamento (popup descritivo) */
.det-list{display:flex;flex-direction:column}
.det-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.det-row:last-child{border-bottom:0}
.det-k{color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto}
.det-v{text-align:right;font-weight:600;font-size:.9rem}
.det-toggle{margin-top:.3rem;width:100%;justify-content:center}
/* linhas de tabela tocáveis (Salário, Conferência, Valores): mesma linguagem do
   cartão de Atividades — a linha inteira abre o detalhe, sem ícones minúsculos. */
.row-tap{cursor:pointer}
.row-tap:hover{background:#f8fafc}
.row-tap:focus-visible{outline:2px solid var(--brand2);outline-offset:-2px}
.row-tap td:last-child{color:var(--muted);width:24px}
.row-tap .row-chev{display:inline-flex;width:1.1em;height:1.1em;vertical-align:middle}
.row-tap .row-chev svg{width:100%;height:100%}
.det-obs{font-weight:400;white-space:pre-wrap}
.pill.sit-pill.sit-realizada{background:var(--okbg);color:var(--ok)}
.pill.sit-pill.sit-agendado{background:var(--waitbg);color:var(--wait)}
.pill.sit-pill.sit-exclusao{background:#f1f5f9;color:var(--muted)}

/* botão flutuante (novo lançamento) — só no celular */
.fab{display:none;position:fixed;right:calc(1rem + env(safe-area-inset-right));bottom:calc(1.1rem + env(safe-area-inset-bottom));
  z-index:45;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#2dd4bf 0%,#0d9488 55%,#0f766e 100%);
  box-shadow:0 8px 20px rgba(13,148,136,.5),inset 0 1px 0 rgba(255,255,255,.3);align-items:center;justify-content:center}
.fab span{display:inline-grid;place-items:center}
.fab svg{width:26px;height:26px}
.fab:active{transform:scale(.93)}
/* ações compactas do cabeçalho: ícone (busca) e círculo (adicionar) */
.tb-icon{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);background:var(--card);border-radius:11px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.tb-icon svg{width:18px;height:18px}
.tb-add{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#2dd4bf 0%,#0d9488 55%,#0f766e 100%);box-shadow:0 4px 12px rgba(13,148,136,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.tb-add svg{width:23px;height:23px}
.tb-icon span,.tb-add span,.fab span{display:inline-grid;place-items:center}
/* Botões "+" aposentados no celular: o + da barra inferior cobre tudo
   (contextual: cria preço na Tabela de preços, atividade nas demais).
   Depois das regras base para vencer na ordem do arquivo. */
@media(max-width:760px){
  .fab{display:none}
  .tb-add{display:none}
}

/* ícone de observação (clicável), na mesma linha do status */
.obs-btn{border:0;background:none;padding:.45rem;cursor:pointer;display:inline-grid;place-items:center;color:var(--brand2)}
.obs-btn svg{width:18px;height:18px}

/* ===== topbar FIXA no celular (todas as telas), com barra verde separando =====
   altura FIXA (min-height) para não "crescer e recolher" e para ficar da mesma
   altura da topbar do Locaria (a antiga estava mais fina). */
@media(max-width:760px){
  .screen-head{position:fixed;top:0;left:0;right:0;z-index:30;margin:0;display:flex;align-items:center;
    min-height:calc(4.7rem + env(safe-area-inset-top));
    padding:calc(env(safe-area-inset-top) + .2rem) .9rem .3rem calc(.9rem + env(safe-area-inset-left));
    background:var(--bg);border-bottom:3px solid var(--brand);box-shadow:0 3px 10px rgba(15,40,60,.08)}
  .screen-head h1{font-size:1.5rem}
  .head-sub{font-size:.85rem;margin-top:.15rem}
  /* gruda logo abaixo da topbar fixa, não atrás dela */
  .pgmonth-head{top:calc(4.7rem + env(safe-area-inset-top))}
  .lanc-tools{top:calc(4.7rem + env(safe-area-inset-top))}
  /* o cabeçalho é fixo mas seu conteúdo muda por tela (algumas têm +, ANO,
     busca...), então o sino não fica sempre no mesmo x. Ancorar o dropdown na
     viewport (não mais no botão) evita que ele "pule" de lugar por aba. */
  .notif-dropdown{position:fixed;top:calc(4.7rem + env(safe-area-inset-top) + .4rem);right:calc(.9rem + env(safe-area-inset-right));left:auto}
}

/* tables */
.table-wrap{overflow-x:auto;background:var(--card);border-radius:14px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#f8fafc;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--muted);padding:2rem}
.acts{display:flex;gap:.2rem;justify-content:flex-end}
.ic{background:#f1f5f9;border:0;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:.9rem}
.ic:hover{background:#e2e8f0}
.ic.danger:hover{background:#fee2e2}
/* grupos recolhíveis (tabela de Valores) */
tr.grp-head td{background:#f1f5f9;cursor:pointer;user-select:none;white-space:normal}
tr.grp-head td>*{vertical-align:middle}
tr.grp-head .chev{display:inline-flex;width:1.1em;height:1.1em;color:var(--muted);transition:transform .15s;transform:rotate(90deg)}
tbody.grp.collapsed tr.grp-head .chev{transform:rotate(0deg)}
tr.grp-head .chev svg{width:100%;height:100%}
tr.grp-head b{margin-left:.3rem;font-size:.9rem}
tr.grp-head .grp-count{color:var(--muted);font-weight:600;font-size:.72rem;margin-left:.5rem;text-transform:none;letter-spacing:0}
tbody.grp.collapsed tr.p-row{display:none}

/* busca por texto (Atividades) */
.busca-row{margin-top:.5rem}
.busca-row input{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;font-size:.9rem;background:#fff;color:var(--ink)}
#btnBusca.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* rodapé de versão + passos de instalação */
.app-version{text-align:center;color:var(--muted);font-size:.78rem;margin:1.2rem 0 .3rem}
.install-steps{margin:0 0 .6rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.55rem;line-height:1.4}
.install-steps li{padding-left:.2rem}

/* ============ Ajuda (Centro de Ajuda: busca + categorias em acordeão) ============ */
.ajuda-search{margin-bottom:1rem}
.searchbox:focus-within{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(13,148,136,.15)}
.ajuda-cats{display:flex;flex-direction:column;gap:.7rem}
.ajuda-empty{margin-top:0}

/* categoria: card elevado com cabeçalho clicável (ícone + título + contagem + seta) */
.ajuda-cat{background:var(--card);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.ajuda-cat-head{width:100%;display:flex;align-items:center;gap:.7rem;background:none;border:0;padding:.85rem 1rem;text-align:left;cursor:pointer}
.ajuda-cat-head:hover{background:#f8fafc}
.ajuda-cat-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#e0f2f1;color:var(--brand);display:grid;place-items:center}
.ajuda-cat-ic svg{width:17px;height:17px}
.ajuda-cat-title{flex:1;font-size:.96rem;font-weight:800;color:var(--ink);min-width:0}
.ajuda-cat-count{flex:0 0 auto;font-size:.68rem;font-weight:700;color:var(--muted);background:#f1f5f9;border-radius:999px;padding:.15rem .55rem}
.ajuda-cat-chev{flex:0 0 auto;width:1.1em;height:1.1em;color:var(--muted);transition:transform .18s;transform:rotate(90deg)}
.ajuda-cat-chev svg{width:100%;height:100%}
.ajuda-cat.collapsed .ajuda-cat-chev{transform:rotate(0deg)}
.ajuda-cat-body{border-top:1px solid var(--line);padding:.2rem .3rem .4rem}
.ajuda-cat.collapsed .ajuda-cat-body{display:none}

/* pergunta: acordeão mais simples, aninhado dentro da categoria */
.ajuda-item+.ajuda-item{border-top:1px solid var(--line)}
.ajuda-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:none;border:0;padding:.75rem .7rem;text-align:left;font-size:.87rem;font-weight:650;color:var(--ink);cursor:pointer;border-radius:8px}
.ajuda-q:hover{color:var(--brand)}
.ajuda-chev{display:inline-flex;width:1em;height:1em;color:var(--muted);transition:transform .15s;flex-shrink:0}
.ajuda-chev svg{width:100%;height:100%}
.ajuda-item.open .ajuda-chev{transform:rotate(90deg)}
.ajuda-a{padding:0 .7rem .9rem;font-size:.86rem;line-height:1.6;color:var(--ink)}
.ajuda-a>p{margin:0 0 .5rem}
.ajuda-a>p:last-child{margin-bottom:0}
.ajuda-ul{margin:.15rem 0 .6rem;padding-left:1.1rem;display:flex;flex-direction:column;gap:.32rem}
.ajuda-ul:last-child{margin-bottom:0}

/* passo a passo numerado (só usado onde a ordem realmente importa: "por onde eu começo?") */
.ajuda-steps{list-style:none;counter-reset:ajstep;margin:.15rem 0 .6rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
/* posição absoluta (não flex) no <li>: o conteúdo tem texto solto + <b> misturados,
   e display:flex no <li> transformaria cada nó de texto num item de flex separado,
   fragmentando a frase em pedaços soltos. */
.ajuda-steps li{counter-increment:ajstep;position:relative;padding-left:2rem;line-height:1.5}
.ajuda-steps li::before{content:counter(ajstep);position:absolute;left:0;top:.05em;width:1.35em;height:1.35em;border-radius:50%;background:var(--brand);color:#fff;font-size:.66rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}

/* observação de atenção (âmbar) — a positiva reaproveita .dash-dica */
.ajuda-note{background:var(--waitbg);color:var(--wait);border-radius:9px;padding:.5rem .7rem;font-size:.82rem;line-height:1.5;margin:.3rem 0 0}
.ajuda-note b{color:inherit}

/* onboarding do primeiro acesso (dashboard vazio) */
.onboard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1.2rem 1.1rem}
.onboard h2{margin:0 0 .2rem}
.onboard-sub{color:var(--muted);margin:0 0 1rem}
.onboard-steps{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:1rem}
.onboard-steps li{display:flex;gap:.8rem;align-items:flex-start}
.ob-ic{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center}
.ob-ic svg{width:20px;height:20px}
.onboard-steps li>div:last-child{display:flex;flex-direction:column;gap:.2rem}
.onboard-steps b{font-size:.95rem}
.onboard-steps span{color:var(--muted);font-size:.85rem;line-height:1.4}
.onboard-steps .btn{align-self:flex-start;margin-top:.35rem}

/* checklist compacto: persiste acima do Dashboard normal até os 3 passos
   estarem feitos (o onboarding cheio só aparece com tudo vazio). */
.onboard-mini{padding:.8rem 1rem;margin-bottom:1rem}
.onboard-mini-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.55rem}
.onboard-mini-head b{font-size:.9rem}
.onboard-mini-head span{color:var(--muted);font-size:.78rem;font-weight:700}
.onboard-mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.onboard-mini-list li{display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.onboard-mini-list .ob-check{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.onboard-mini-list li.done .ob-check{border-color:var(--ok);background:var(--okbg);color:var(--ok)}
.onboard-mini-list li.done span{color:var(--muted);text-decoration:line-through}
.onboard-mini-list .ob-check svg{width:12px;height:12px}
.onboard-mini-list li>span:not(.ob-check){flex:1}
.onboard-mini-list .btn{flex:0 0 auto}

.pill{font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.wait{background:var(--waitbg);color:var(--wait)}
.pill.part{background:#e0e7ff;color:#3730a3}
.pill.off{background:#f1f5f9;color:var(--muted)}

/* situação inline + linha excluída */
.sit-sel{border:1px solid var(--line);border-radius:8px;padding:.25rem .4rem;font-size:.78rem;font-weight:700;background:#fff;cursor:pointer}
.sit-sel.sit-realizada{color:var(--ok);border-color:#86efac;background:var(--okbg)}
.sit-sel.sit-agendado{color:var(--wait);border-color:#fcd34d;background:var(--waitbg)}
.sit-sel.sit-exclusao{color:var(--muted);background:#f1f5f9}
tr.row-excl td{opacity:.55}
tr.row-excl td[data-l="Tipo"],tr.row-excl td[data-l="Modalidade"],tr.row-excl td[data-l="Valor"]{text-decoration:line-through}
.num.dif-bad{color:var(--danger);font-weight:700}
small.late{color:var(--danger);font-weight:700}
#modalForm [name="obs"],#obsText{text-transform:uppercase}

.hidden{display:none}
.btn-small{padding:.35rem .7rem;font-size:.8rem}

/* pagamentos */
/* sem overflow:hidden aqui: quebraria o position:sticky do cabeçalho do mês */
.pgmonth{background:var(--card);border-radius:14px;box-shadow:var(--shadow);margin-bottom:1rem}
/* cabeçalho do mês GRUDA no topo enquanto os lançamentos daquele mês rolam */
.pgmonth-head{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.8rem 1rem;background:#f8fafc;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;cursor:pointer;user-select:none}
.pgmonth-head h3{margin:0}
.pgm-left{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
.pgmonth-head .chev{display:inline-flex;width:1.1em;height:1.1em;color:var(--muted);transition:transform .15s;transform:rotate(90deg)}
.pgmonth-head .chev svg{width:100%;height:100%}
.pgmonth.collapsed .pgmonth-head{border-bottom:0;border-radius:14px}
.pgmonth.collapsed .pgmonth-head .chev{transform:rotate(0deg)}
.pgmonth.collapsed .table-wrap{display:none}
.pgtotals{display:flex;gap:.4rem;flex-wrap:wrap}
.pgmonth .table-wrap{box-shadow:none;border-radius:0 0 14px 14px}
/* registro item a item: expande um grupo (tipo+competência com mais de 1
   serviço) para registrar/editar cada um separado, sem forçar o lote inteiro */
.pg-sub-row td{background:#f8fafc;padding:.4rem .7rem .6rem;white-space:normal}
.pg-itens{display:flex;flex-direction:column;gap:.4rem}
.pg-item{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.82rem;padding:.4rem .6rem;border-left:2px solid var(--line);background:var(--card);border-radius:8px}
.pg-item-nome{flex:1 1 auto;min-width:120px;font-weight:600}
.pg-item-nome small{color:var(--muted);font-weight:400}
.pg-item-val{font-variant-numeric:tabular-nums}
/* larguras fixas (só no desktop): alinha as colunas entre um mês e outro.
   No celular as tabelas viram cartões empilhados, então estas regras não valem. */
@media(min-width:761px){
  .pgmonth table{table-layout:fixed}
  .pgmonth th:nth-child(1),.pgmonth td:nth-child(1){width:28%;white-space:normal}
  .pgmonth th:nth-child(2),.pgmonth td:nth-child(2){width:12%}
  .pgmonth th:nth-child(3),.pgmonth td:nth-child(3){width:14%;text-align:center}
  .pgmonth th:nth-child(4),.pgmonth td:nth-child(4){width:20%;white-space:normal}
  .pgmonth th:nth-child(5),.pgmonth td:nth-child(5){width:12%}
  .pgmonth th:nth-child(6),.pgmonth td:nth-child(6){width:14%}
  /* a célula de ação NÃO pode ser flex aqui: display:flex tira o td do modelo de
     tabela e quebra as larguras fixas. Mantém como table-cell e alinha à direita. */
  .pgmonth td.acts{display:table-cell;text-align:right}
  /* "Registrar/editar individual" fica encostado à esquerda da célula, longe do
     botão principal — evita confundir os dois quando ficam colados. */
  .pgmonth td.acts .btn-tint{float:left}
}

/* pagamentos: bloco "fantasma" — agendados do mês, ainda sem cobrança gerada */
.pg-ghost{border-top:1px dashed var(--line);padding:.7rem 1rem}
.pg-ghost-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:.76rem;color:var(--muted);margin-bottom:.4rem}
.pg-ghost-head b{color:var(--wait)}
.pg-ghost-row{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem 0;border-top:1px dashed var(--line);font-size:.85rem;color:var(--muted)}
.pg-ghost-row:first-of-type{border-top:0}
.pg-ghost-row .pgg-tipo{color:var(--ink);opacity:.7}
.pg-ghost-cta{margin-top:.5rem;font-size:.78rem;background:none;border:0;color:var(--brand2);font-weight:700;cursor:pointer;padding:0}

/* salário / descontos */
.subh{margin:.9rem 0 .4rem;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.desc-grp{margin:.6rem 0 .2rem;font-size:.95rem;color:var(--brand);border-bottom:2px solid var(--line);padding-bottom:.3rem}
.desc-grp.desc-13{margin-top:1.4rem;color:#3730a3;border-bottom-color:#c7d2fe}
.desc-grp.desc-bonif{margin-top:1.4rem;color:#166534;border-bottom-color:#bbf7d0}
#descontosResumo .arrow{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px dashed var(--line)}

/* lags */
.lags{display:flex;flex-direction:column;gap:.5rem}
.lagrow{display:flex;align-items:center;gap:.6rem;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:.4rem .7rem;font-weight:600;font-size:.85rem}
.lagrow>span{flex:1}
.lagrow input{width:56px;padding:.3rem;border:1px solid var(--line);border-radius:6px;text-align:center}
.lagrow .unit{flex:none;color:var(--muted);font-weight:400}

/* modal */
/* padding inclui as safe areas do iOS: no PWA a faixa do topo é pintada por
   body::before (z-index:70, acima do modal) e cortaria o título se o modal
   entrasse nela. Ver memória ios-pwa e "popup fora da tela". */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:50;
  padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom))}
.modal-overlay[hidden]{display:none}
/* confirmação sempre à frente dos outros modais (ex.: excluir a partir do detalhe) */
#confirmOverlay{z-index:55}
/* As instruções de instalação são abertas a partir da TELA DE LOGIN (#loginScreen,
   z-index:95). Precisam ficar ACIMA dela, senão o overlay abre escondido atrás do
   portão de login (no iPhone é sempre este caminho — não há instalação automática). */
#installOverlay{z-index:110}
.modal{background:#fff;border-radius:16px;width:100%;max-width:440px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:1.1rem}
.modal-close{background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--muted);line-height:1}
.modal-body{padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem}
.modal-body input,.modal-body select{padding:.55rem;border:1px solid var(--line);border-radius:8px;font-size:1rem;background:#fff}
.modal-body label{font-size:.78rem}
/* erro de validação junto ao campo (não só no toast, que some sozinho) */
.modal-body input.field-invalid,.modal-body select.field-invalid,.modal-body textarea.field-invalid{border-color:var(--danger)}
.modal-body .field-err{color:var(--danger);font-size:.74rem;font-weight:600;margin-top:-.35rem}
.modal-body .chk{flex-direction:row;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink)}
.modal-body .chk input{width:auto}
/* Checkbox de segurança na tela Config (fora de modal): mesma linha do rótulo */
.chk-seg{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink);cursor:pointer}
.chk-seg input{width:auto;margin:0}
.seg-actions{margin-top:1rem;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
/* Nota de arredondamento na diferença da conferência (ex.: aula) */
.dif-note{opacity:.7;font-weight:400;white-space:nowrap}
/* linha com dois campos lado a lado (Quantidade | Valor no lançamento de aula) */
.form-row{display:flex;gap:.7rem}
.form-row>label{flex:1;min-width:0}
.info-pag{background:#ecfeff;border:1px solid #a5f3fc;border-radius:8px;padding:.5rem .7rem;font-size:.8rem;color:#155e75}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem;border-top:1px solid var(--line)}

/* toast */
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:999px;font-size:.85rem;z-index:60;box-shadow:0 4px 12px rgba(0,0,0,.2)}

/* sidebar: fixa no desktop, retrátil no celular */
@media(min-width:761px){
  .sidebar-overlay{display:none}
}
@media(max-width:760px){
  /* app-shell: body é uma coluna flex de altura cheia — <main> rola por dentro
     e a barra inferior fica NO FLUXO como rodapé da coluna (position:fixed no
     iOS descolava com zoom/teclado/visual viewport; no fluxo é impossível).
     overscroll:none também mata o pull-to-refresh do Android, que recarregava
     a página e devolvia o usuário ao portão de login sem querer. */
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  /* 100dvh = viewport dinâmico de layout: certo no Safari (barra de URL) e no
     PWA instalado (o innerHeight do boot standalone mente e não re-dispara
     resize — por isso o --vhx via JS deixava faixa morta abaixo da barra).
     --vhx (core.js) fica só como fallback de navegador sem dvh. */
  body{display:flex;flex-direction:column;height:var(--vhx,100%);height:100dvh}
  main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
  /* celular usa a barra inferior: sidebar e hambúrguer saem de cena */
  .sidebar{display:none}
  .sidebar-overlay{display:none}
  .nav-toggle{display:none}
  /* topo reserva a topbar fixa (.screen-head, 4.7rem); a barra inferior está
     no fluxo, então o rodapé só precisa de um respiro. O recuo vertical fica
     na SEÇÃO, não no main: o main é o scroller e o WebKit soma o padding do
     scroller ao top do position:sticky (.lanc-tools/.pgmonth-head descolavam
     ~150px da topbar no iPhone). */
  main{margin-left:0;padding:0 1rem}
  .screen{padding-top:5.6rem;padding-bottom:1.2rem}
  /* toast sobe para não ficar atrás da barra */
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* PWA instalado no iOS: o viewport pequeno/dinâmico desconta a status bar mas
   fica ancorado no TOPO — sobra faixa morta de exatamente safe-area-top na
   base (medido: inner/dvh/svh=812, lvh=874 no iPhone; 874-812=62=safe-top).
   Sem chrome que recolhe no standalone, 100lvh é seguro e alcança a borda
   real da tela. No Safari fica o 100dvh (lvh esconderia a barra na toolbar). */
@media(max-width:760px) and (display-mode: standalone){
  html,body{height:100lvh}
}

/* responsivo */
@media(max-width:760px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen-head h1{font-size:1.2rem}
  /* tabelas viram cartões: cada registro é um cartão branco com uma faixa
     colorida à esquerda, que marca a divisão entre um lançamento e outro */
  table,thead,tbody,th,td,tr{display:block}
  tr[hidden]{display:none} /* tr vira display:block acima, o que vence o [hidden] padrão do navegador */
  thead{display:none}
  tr{background:#fff;border-left:4px solid var(--brand2);border-radius:12px;margin-bottom:.85rem;box-shadow:0 2px 6px rgba(0,0,0,.14);padding:.4rem .2rem}
  td{border:none;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;white-space:normal;gap:1rem}
  td:last-child{border-bottom:0}
  td[data-l]:before{content:attr(data-l);color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase}
  td.num{text-align:right}
  .acts{justify-content:flex-end}
  /* "Registrar/editar individual" encostado à esquerda, separado do botão principal. */
  .acts .btn-tint{margin-right:auto}
  .empty{display:block}
}

/* ============ ícones SVG (nav e botões) ============ */
.nav-ic svg{width:18px;height:18px;display:block;margin:0 auto}
.ic{display:inline-grid;place-items:center}
.ic svg{width:15px;height:15px;pointer-events:none}
.ic.danger{color:var(--danger)}
.bic{display:inline-flex;vertical-align:-2px;margin-right:.4rem}
.bic svg{width:15px;height:15px}

/* ============ rodapé da sidebar: usuário logado / entrar ============ */
.side-foot{margin-top:auto;padding:.8rem .2rem 0;border-top:1px solid rgba(255,255,255,.12)}
.user-chip{display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.14);border-radius:10px;padding:.5rem .65rem;color:#fff;font-size:.85rem;font-weight:600}
.user-chip .dot{width:9px;height:9px;border-radius:50%;background:#4ade80;flex:none;box-shadow:0 0 6px rgba(74,222,128,.8)}
.user-chip .dot.off{background:#fbbf24;box-shadow:none}
.user-chip .user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip.chip-re{cursor:pointer}
.chip-out{background:transparent;border:0;color:rgba(255,255,255,.75);cursor:pointer;display:inline-grid;place-items:center;padding:.2rem;border-radius:6px}
.chip-out:hover{background:rgba(255,255,255,.15);color:#fff}
.chip-out svg{width:15px;height:15px}
.btn-side-login{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:rgba(255,255,255,.14);border:0;border-radius:10px;padding:.55rem .7rem;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer}
.btn-side-login:hover{background:rgba(255,255,255,.22)}
.btn-side-login svg{width:16px;height:16px}

/* ============ barra de navegação inferior (só celular) ============ */
/* nada de seleção de texto nem callout de copiar na barra: o toque longo no "+"
   é um gesto do app (abre a lista de atividades), não uma seleção. */
.bottom-nav{display:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:760px){
  .bottom-nav{
    flex:0 0 auto; /* rodapé da coluna flex do body — nunca descola */
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(15,23,42,.08);
    padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom));
  }
  .bn-item{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:0;
    background:none;border:0;cursor:pointer;padding:.25rem 0;
    color:var(--muted);font-family:inherit;font-size:.6rem;font-weight:600;letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
  }
  .bn-ic{display:grid;place-items:center}
  .bn-ic svg{width:23px;height:23px}
  .bn-item.ativo{color:var(--brand)}
  .bn-item.ativo::before{content:"";position:absolute;top:-.3rem;left:50%;transform:translateX(-50%);width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--brand2)}
  .bn-lab{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* ação central destacada: Lançar (círculo teal elevado) */
  .bn-item.bn-acao .bn-ic{
    width:46px;height:46px;margin-top:-18px;border-radius:50%;
    background:linear-gradient(135deg,#2dd4bf 0%,#0d9488 55%,#0f766e 100%);
    color:#fff;box-shadow:0 6px 14px rgba(13,148,136,.45),inset 0 1px 0 rgba(255,255,255,.3);
  }
  .bn-item.bn-acao .bn-ic svg{width:24px;height:24px}
  .bn-item.bn-acao::before{display:none}
  .bn-badge{
    position:absolute;top:-.1rem;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;
    border-radius:999px;background:var(--danger);color:#fff;font-size:.62rem;font-weight:800;
    display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--card);
  }
}

/* ============ tela "Mais" (menu do celular) ============ */
.mais-grupo{margin-bottom:1.1rem}
.mais-titulo{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 .45rem .2rem;font-weight:800}
.mais-item{
  width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;cursor:pointer;
  background:var(--card);border:0;border-bottom:1px solid var(--line);padding:.75rem .85rem;
  font-family:inherit;color:var(--ink);
}
.mais-grupo .mais-item:first-of-type{border-radius:14px 14px 0 0}
.mais-grupo .mais-item:last-of-type{border-radius:0 0 14px 14px;border-bottom:0}
.mais-grupo .mais-item:only-of-type{border-radius:14px}
.mais-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#ccfbf1;color:var(--brand)}
.mais-ic svg{width:18px;height:18px}
.mais-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.mais-tx b{font-size:.92rem}
.mais-tx small{color:var(--muted);font-size:.74rem}
.mais-chev{color:var(--muted);display:grid;place-items:center}
.mais-chev svg{width:16px;height:16px}

/* ============ avatar do usuário no cabeçalho (só celular) ============ */
.avatar-wrap{display:none}
@media(max-width:760px){
  .avatar-wrap{display:flex;align-items:center;flex:0 0 auto}
  .avatar-btn{
    width:38px;height:38px;border-radius:50%;padding:0;cursor:pointer;overflow:hidden;
    border:2px solid #22c55e;background:linear-gradient(135deg,#2dd4bf,#0f766e);
    display:grid;place-items:center;box-shadow:var(--shadow);
  }
  .avatar-btn[hidden]{display:none} /* o display:grid acima venceria o atributo hidden */
  .avatar-btn.sync-off{border-color:#fbbf24}
  .avatar-btn img{width:100%;height:100%;object-fit:cover;display:block}
  .avatar-ini{color:#fff;font-size:.85rem;font-weight:800}
}

/* ============ sheet de conta (abre pelo avatar) ============ */
.conta-overlay{align-items:flex-end;display:flex;padding:0}
.conta-overlay[hidden]{display:none} /* o display:flex acima venceria o atributo hidden */
.conta-sheet{
  width:100%;max-width:480px;margin:0 auto;background:var(--card);border-radius:22px 22px 0 0;
  padding:.4rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(0,0,0,.35);
}
.conta-alca{width:38px;height:5px;border-radius:3px;background:var(--line);margin:.4rem auto .9rem}
.conta-id{display:flex;align-items:center;gap:.8rem;padding-bottom:.9rem}
.conta-foto{width:54px;height:54px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(135deg,#2dd4bf,#0f766e)}
.conta-foto img{width:100%;height:100%;object-fit:cover;display:block}
.conta-foto .avatar-ini{font-size:1.15rem}
.conta-quem{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.conta-quem b{font-size:1rem}
.conta-quem small{color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis}
.conta-sync{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted);background:var(--bg);border-radius:10px;padding:.55rem .7rem;margin-bottom:.9rem}
.conta-sync .led{width:9px;height:9px;border-radius:50%;background:#22c55e;flex:0 0 auto;box-shadow:0 0 6px rgba(34,197,94,.6)}
.conta-sync .led.off{background:#fbbf24;box-shadow:none}
.conta-sync b{color:var(--ink)}
.btn-sair{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:12px;padding:.7rem;font-weight:700}
.conta-nota{text-align:center;color:var(--muted);font-size:.7rem;margin:.6rem 0 0}

/* ============ card "Pendentes de confirmação" (Dashboard) ============ */
.pend-card{border-left:4px solid var(--wait)}
.pend-hint{margin:.2rem 0 .6rem}
.pend-item{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-top:1px dashed var(--line)}
.pend-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.pend-info b{font-size:.88rem}
.pend-info small{color:var(--muted);font-size:.72rem}
.pend-acts{display:flex;gap:.4rem;flex:0 0 auto}

/* ações de um serviço agendado no popup do dia (Agenda) */
.dia-acts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.dia-acts[hidden]{display:none} /* display:flex vence o [hidden] do navegador */
.dia-acts .btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem}
.dia-acts .btn svg{width:14px;height:14px}
.dia-naofui{color:var(--danger);border-color:var(--danger)}
/* motivo do "não fui": pedido inline pra não empilhar overlay sobre o popup do dia */
.dia-motivo{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.dia-motivo-in{width:100%;font-size:.8rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.dia-motivo-acts{display:flex;gap:.35rem}
.dia-motivo-acts .btn{font-size:.78rem}

/* ============ acessibilidade: foco visível no teclado ============ */
:where(button,select,input,textarea,a):focus-visible{outline:2px solid var(--brand2);outline-offset:2px}

/* ============ splash de carregamento (boot) ============ */
#boot{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:100;transition:opacity .3s}
#boot.done{opacity:0;pointer-events:none}
.boot-box{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.boot-spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ modal de confirmação ============ */
.confirm-msg{margin:0;font-size:.95rem;line-height:1.5}

/* ============ pop-up de atualização de valores ============ */
.precos-diff{margin:.5rem 0;padding-left:1.2rem}
.precos-diff li{margin:.25rem 0;line-height:1.4}
.precos-novos{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0}
.preco-novo{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.preco-novo input{width:auto;margin:0;flex:none}

/* ============ utilitárias (CSP sem estilo inline) ============ */
.m0{margin:0}
.mt1{margin-top:1rem}
.obs-meta{margin:0 0 .5rem}
.pre-wrap{white-space:pre-wrap;margin:0}
.btn-addlag{align-self:flex-start;margin-top:.3rem}
.txt-ok{color:var(--ok);font-weight:700}
.txt-bad{color:var(--danger);font-weight:700}

/* ============ Agenda (calendário mensal) ============ */
.agenda-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.agenda-mes{flex:1;text-align:center;font-size:1.1rem;margin:0;text-transform:capitalize}
.ag-nav{min-width:2.4rem;font-size:1.2rem;line-height:1;padding:.4rem .6rem}
.agenda-legend{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.85rem;font-size:.75rem;color:var(--muted)}
.agenda-legend span{display:inline-flex;align-items:center;gap:.35rem}
.lgdot{width:12px;height:12px;border-radius:4px;display:inline-block}
.d-ag{background:var(--wait)}.d-fe{background:var(--ok)}.d-ex{background:var(--muted)}.d-rc{background:#4f46e5}
.agenda-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.ag-dow{text-align:center;font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;padding:.2rem 0}
.ag-day{min-height:62px;border:1px solid var(--line);border-radius:10px;padding:.3rem;display:flex;flex-direction:column;gap:.2rem;background:var(--card);overflow:hidden}
.ag-out{border-color:transparent;background:transparent}
.ag-num{font-size:.78rem;color:var(--muted);font-weight:600}
.ag-today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.ag-today .ag-num{color:var(--brand)}
/* todo dia é clicável (mesmo vazio) — o popup do dia é onde se cria uma atividade nova */
.ag-day[data-dia]{cursor:pointer}
.ag-day[data-dia]:hover{border-color:var(--brand)}
.dia-add{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:.8rem}
.dia-add svg{width:16px;height:16px}
.ag-pills{display:flex;flex-wrap:wrap;gap:.2rem;margin-top:auto}
.ag-pills .pill{font-size:.66rem;padding:.05rem .32rem}

/* modo "Selecionar dias": lançar o mesmo serviço em vários dias de uma vez */
.agenda-tools{display:flex;justify-content:flex-end;margin:-.4rem 0 .7rem}
.agenda-tools .btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.ag-day.ag-selecting::after{content:"";position:absolute;top:.3rem;right:.3rem;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.ag-day.ag-selecting{position:relative}
.ag-day.ag-picked{border-color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand);background:#ecfdf9}
.ag-day.ag-picked::after{content:"✓";background:var(--brand);border-color:var(--brand);color:#fff;display:grid;place-items:center;font-size:.6rem;font-weight:900}
.selbar{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;
  background:var(--ink);color:#fff;border-radius:14px;padding:.7rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  box-shadow:0 8px 22px rgba(0,0,0,.35);z-index:55}
.selbar[hidden]{display:none}
.selbar-actions{display:flex;gap:.4rem;flex:0 0 auto}
.selbar .btn{padding:.4rem .7rem;font-size:.8rem}
.selbar .btn:not(.btn-primary){background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.selbar .btn:disabled{opacity:.5;cursor:default}
.dates-chip-row{display:flex;flex-wrap:wrap;gap:.3rem;margin:-.3rem 0 .9rem}
.date-chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;font-size:.72rem;font-weight:700;color:var(--ink)}
.dia-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:.9rem 0 .3rem;font-weight:700}
.dia-h:first-child{margin-top:0}
.dia-item{display:flex;gap:.6rem;justify-content:space-between;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--line)}
.dia-item-main{min-width:0}
.dia-item-t{font-weight:600;font-size:.88rem}
.dia-item-s{display:flex;gap:.3rem;margin-top:.25rem;flex-wrap:wrap}
.dia-obs{font-size:.8rem;color:var(--muted);margin-top:.3rem;font-style:italic}
.dia-item-v{font-weight:700;white-space:nowrap}
.dia-rec{color:var(--ok)}
.dia-tot{text-align:right;font-size:.85rem;margin-top:.45rem;color:var(--muted)}
/* Recebido no dia: grupos por categoria (clicáveis) e detalhe dos dias realizados */
.dia-group{cursor:pointer}
.dia-group:hover{background:rgba(13,148,136,.05)}
.dia-qtd{color:var(--muted);font-weight:700;font-size:.78rem}
.dia-grp-right{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
.dia-exp{color:var(--muted);display:inline-flex}
.dia-exp svg{width:16px;height:16px;transition:transform .15s ease}
.dia-group.open .dia-exp svg{transform:rotate(180deg)}
.dia-sub{padding:.1rem 0 .35rem}
.dia-subitem{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem;color:var(--muted);padding:.28rem 0 .28rem .6rem;border-left:2px solid var(--line);margin-left:.1rem}
.dia-subitem+.dia-subitem{margin-top:.15rem}

/* ============ Relatórios ============ */
.rel-menu{margin-bottom:1rem}
.rel-sec{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin:1rem 0 .5rem}
.rel-sec:first-child{margin-top:0}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.rel-custom input{padding:.35rem}
.rel-custom[hidden]{display:none} /* .rel-ano-l tem display:flex, que venceria o [hidden] */
.rel-card{display:flex;gap:.7rem;align-items:flex-start;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem;cursor:pointer;box-shadow:var(--shadow);color:inherit}
.rel-card:hover{border-color:var(--brand)}
.rel-ic{color:var(--brand);flex-shrink:0;display:inline-grid;place-items:center}
.rel-ic svg{width:22px;height:22px}
.rel-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.rel-txt strong{font-size:.9rem}
.rel-txt small{font-size:.75rem;color:var(--muted);line-height:1.3}
.rel-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.rel-ano-l{display:flex;flex-direction:column;font-size:.75rem;color:var(--muted);font-weight:600;gap:.2rem}
.rel-kpi{background:var(--okbg);color:var(--ok);border-radius:10px;padding:.5rem .8rem;font-size:.9rem;margin-bottom:.8rem}
.modal-rel{max-width:720px}
.rel-modal-sub{font-size:.8rem;color:var(--muted);margin:0 0 .2rem}
.rel-tipo-filtro{margin:0 0 .7rem}
/* flex-direction:row explícito: ".modal-body label" (regra genérica de
   formulário, empata em especificidade e vem depois no arquivo) poria
   label/select um embaixo do outro sem isso — aqui é rótulo + seletor lado
   a lado, estreito, sem esticar. */
.rel-tipo-filtro label{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);font-weight:600}
.rel-tipo-filtro select{width:auto;padding:.4rem .5rem;border:1px solid var(--line);border-radius:9px;font-size:.83rem;font-weight:600;color:var(--ink);background:var(--card)}
/* Faixa Período (só leitura — já foi escolhido na tela-lista) + Tipo, e logo
   abaixo as abas (Mês a mês/Por fonte/Ano a ano), tudo fixado (sticky) no topo
   do popup — mesma ideia do .lanc-tools em Atividades. Gruda contra o scroll do
   próprio #relModalBody, não da página, então não precisa do ajuste do celular. */
/* margin negativo também no topo: o .modal-body tem padding-top próprio, e
   como #relModalBody é o próprio scroller, esse padding NÃO barra o conteúdo
   rolando por trás — o conteúdo aparecia "vazando" acima da faixa sticky
   (bug visto no Safari do iPhone). Cobrindo com margin negativo + padding-top
   equivalente, a faixa fica opaca rente ao topo real do popup, sem gap. O
   translateZ força camada própria de composição — evita o mesmo vazamento
   durante o momentum-scroll do iOS dentro de um pai com overflow:hidden. */
.rel-sticky-bar{position:-webkit-sticky;position:sticky;top:-1rem;z-index:5;background:#fff;margin:-1rem -1rem 0;padding:1.7rem 1rem .2rem;border-bottom:1px solid var(--line);transform:translateZ(0)}
.rel-periodo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem}
.rel-sticky-bar .rel-modal-sub{margin:0}
.rel-sticky-bar .rel-tipo-filtro{margin:0}
.rel-sticky-bar .rel-views{margin:.6rem 0 .55rem}

/* ===== Relatórios v2: home, mini-painel (hero + gráfico + tabela), sheet mobile ===== */
/* Home: indicadores de entrada da aba */
.rel-home{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.1rem}
.rel-ins{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.7rem .8rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.rel-ins-k{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.rel-ins-v{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.rel-ins-d{font-size:.7rem;display:inline-flex;align-items:center;gap:.25rem}
.rel-delta.up{color:var(--ok)} .rel-delta.down{color:var(--danger)} .rel-delta.flat{color:var(--muted)}

/* Hero (número-herói do relatório aberto) */
.rel-hero{border-radius:12px;padding:.85rem 1rem;margin-bottom:.8rem;text-align:center;background:var(--okbg)}
.rel-hero-lab{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--ok)}
.rel-hero-val{display:block;font-size:1.9rem;font-weight:850;letter-spacing:-.02em;color:var(--ink);line-height:1.1;margin-top:.1rem;font-variant-numeric:tabular-nums}
.rel-hero-sub{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}
.rel-hero.warn{background:var(--waitbg)} .rel-hero.warn .rel-hero-lab{color:var(--wait)}
.rel-hero.neutral{background:#eef2f7} .rel-hero.neutral .rel-hero-lab{color:var(--brand)}

/* Views (segmentos dentro do relatório) */
/* O modal-body é flex-column com overflow: sem isto os filhos encolhem
   (flex-shrink) e o segmento — que tem overflow próprio — colapsa a ~10px
   no celular, sumindo com os rótulos. Filhos mantêm a altura natural. */
#relModalBody>*{flex-shrink:0}
.rel-views{display:flex;gap:.3rem;background:#eef2f7;border-radius:10px;padding:.25rem;margin-bottom:.8rem;overflow-x:auto}
.rel-view{flex:1 1 auto;white-space:nowrap;border:0;background:none;border-radius:8px;padding:.45rem .6rem;font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer}
.rel-view.active{background:var(--card);color:var(--brand);box-shadow:var(--shadow)}

/* Cartão de gráfico + blocos de tabela */
.rel-chart{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.9rem;margin-bottom:.8rem}
.rel-block{margin-bottom:.8rem}
.rel-block-title{font-size:.82rem;font-weight:750;margin:0 0 .4rem;color:var(--ink)}

/* Donut + legenda — empilhados (donut em cima, legenda embaixo com largura
   cheia) para o nome do tipo nunca ficar espremido/cortado ("SA..."). */
.rel-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.rel-donut{width:132px;height:132px;flex:0 0 auto}
.donut-seg{fill:none;stroke:var(--rc);stroke-width:5}
.rel-donut-c1{fill:var(--ink);font-size:5px;font-weight:800;text-anchor:middle;font-family:inherit}
.rel-donut-c2{fill:var(--muted);font-size:2.6px;text-anchor:middle;text-transform:uppercase;letter-spacing:.1px}
.rel-leg{width:100%;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.rleg{display:flex;align-items:center;gap:.5rem;font-size:.82rem;width:100%}
.rleg-sw{width:11px;height:11px;border-radius:3px;background:var(--rc);flex:0 0 auto}
.rleg-nm{font-weight:600;white-space:normal;overflow-wrap:anywhere;flex:1 1 auto;min-width:0}
.rleg-val{margin-left:auto;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}

/* Gráficos SVG (barras / linha) — traço fino, grade recuada */
.rel-svg{width:100%;height:auto;display:block;overflow:visible}
.rel-svg .gax{stroke:var(--line);stroke-width:1}
.rel-svg .glab{fill:var(--muted);font-size:8px;font-family:inherit}
.bar-fill{fill:var(--rc)}
.bar-rec{fill:var(--brand2)} .bar-prev{fill:#cbd5e1}
.rel-line{fill:none;stroke:var(--brand2);stroke-width:2}
.rel-area{fill:var(--brand2);opacity:.12}
.rel-dot{fill:var(--brand2)}

/* Paleta categórica (validada p/ daltonismo; rótulos diretos garantem contraste) */
.rs-1{--rc:#1baf7a}.rs-2{--rc:#2a78d6}.rs-3{--rc:#eda100}.rs-4{--rc:#4a3aa7}.rs-5{--rc:#eb6834}.rs-6{--rc:#e87ba4}.rs-7{--rc:#94a3b8}

@media(max-width:640px){ .rel-home{grid-template-columns:repeat(2,1fr)} }
/* No celular o relatório abre como folha de tela cheia */
@media(max-width:760px){
  #relOverlay{padding:0}
  #relOverlay .modal-rel{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0}
  #relOverlay .modal-head{padding-top:calc(1rem + env(safe-area-inset-top))}
  #relOverlay .modal-foot{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .rel-hero-val{font-size:1.7rem}
}
/* grupos por mês nos relatórios (cabeçalho: título à esquerda, subtotal à direita).
   Escopado a #relModalBody para não afetar a tela Valores. */
#relModalBody tr.grp-head td{display:flex;justify-content:space-between;align-items:center;gap:.35rem .9rem;flex-wrap:wrap}
#relModalBody tr.grp-head .rel-grp-l{display:inline-flex;align-items:center;gap:.1rem;flex:1 1 auto;min-width:0}
#relModalBody tr.grp-head .rel-grp-tot{margin-left:auto;flex:none;font-size:.85rem;white-space:nowrap;color:var(--ink)}
#relModalBody tbody.grp.collapsed tr:not(.grp-head){display:none}
#relModalBody .rc-mod{color:var(--muted);font-weight:400}

/* ============ tela de login (portão de entrada) ============ */
#loginScreen{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(900px 500px at 50% 18%,#0d4f49 0%,#072e2a 45%,#04201d 100%)}
#loginScreen[hidden]{display:none} /* o display:grid acima venceria o atributo hidden */
.login-box{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:400px}
.login-logo{width:64px;height:64px;border-radius:18px;box-shadow:0 0 44px rgba(45,212,191,.45),0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.login-logo svg{width:32px;height:32px}
.login-title{color:#fff;font-size:1.9rem;margin:.9rem 0 .15rem;letter-spacing:.01em}
.login-sub{color:rgba(255,255,255,.55);font-size:.85rem;margin:0 0 1.4rem}
.login-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.3rem 1.2rem;width:100%;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.login-card[hidden]{display:none}
.login-txt{color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.55;margin:0 0 1rem}
.login-txt b{color:#5eead4}
.btn-google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;background:#fff;color:#1f2937;border:0;border-radius:10px;padding:.75rem 1rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn-google:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn-google:disabled{opacity:.6;cursor:wait;transform:none}
.btn-google svg{width:19px;height:19px;flex:0 0 auto}
.login-note{color:rgba(255,255,255,.45);font-size:.75rem;margin:.9rem 0 0}
.onboarding-card h2{color:#fff;font-size:1.12rem;line-height:1.3;margin:0 0 .65rem;letter-spacing:0}
.onboarding-card .login-txt{margin-bottom:1.1rem}
.onboarding-action:empty{display:none}
.onboarding-status{min-height:1.2rem;color:rgba(255,255,255,.72);line-height:1.45}
.onboarding-exit{margin-top:.9rem;border:0;background:transparent;color:rgba(255,255,255,.72);font:inherit;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.onboarding-exit:hover{color:#fff}
.login-install{margin-top:1.1rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#fff;padding:.65rem 1.1rem;border-radius:10px;cursor:pointer;font-size:.9rem;font-weight:600}
.login-install:hover{background:rgba(255,255,255,.16)}
.login-install .bic{width:1.05em;height:1.05em;display:inline-flex}
.login-install[hidden]{display:none} /* display acima venceria o atributo hidden */

/* botão Restaurar valores padrão (fim da tela Valores) */
.precos-restore{margin-top:1.3rem;display:flex;flex-direction:column;gap:.4rem;align-items:center;text-align:center}
.precos-restore .btn-danger{width:auto}

/* ============ mobile/iOS: viewport dinâmico e safe areas ============ */
.sidebar{height:100dvh} /* navegadores antigos ignoram e ficam com o 100vh acima */
.modal{max-height:calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(max-width:760px){
  /* fonte >=16px evita o zoom automático do iOS ao focar campos */
  input,select,textarea{font-size:16px}
  .filters input,.filters select{font-size:16px}
  /* recorte da Dynamic Island (viewport-fit=cover): o topo reserva a topbar
     fixa; a barra inferior está no fluxo e cuida da própria safe-area.
     Recuo na SEÇÃO (não no main): padding no scroller desloca o sticky no iOS */
  .screen{padding-top:calc(5.6rem + env(safe-area-inset-top));padding-bottom:1.2rem}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  .selbar{bottom:calc(76px + env(safe-area-inset-bottom))}
  /* selects da topbar/listas com 16px: abaixo disso o iOS dá zoom automático ao
     focar — e a página fica com zoom preso, deslocando o que é fixo */
  .head-ano select,.lanc-ano select,.rel-ano-l select,.rel-ano-l input{font-size:16px}
  /* com status-bar-style=black-translucent o conteúdo vai até o topo; pintamos
     a área do relógio de verde (a "faixa até o relógio" pedida) em vez de branco */
  body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--brand);z-index:70}
  /* no celular o ícone vai ACIMA do texto (como o Locaria): o valor ganha a
     largura inteira do cartão e não quebra no meio do número */
  .kpi{flex-direction:column;gap:.5rem;padding:.85rem}
  .kpi-ic{width:38px;height:38px}
  .kpi-ic svg{width:19px;height:19px}
  .kv{font-size:1.25rem}
}

/* ============ tema escuro ============
   Dirigido por data-theme no <html> (js/theme.js): "auto" segue o sistema e
   resolve para light/dark; o botão em Config força claro ou escuro. */
:root[data-theme="dark"]{
    --bg:#0b1220; --card:#111a2c; --ink:#e2e8f0; --muted:#8fa3bd; --line:#243147;
    --brand:#0f766e; --brand2:#14b8a6; --ok:#34d399; --okbg:#0b3524;
    --wait:#fbbf24; --waitbg:#3b2a08; --danger:#f87171; --shadow:0 1px 3px rgba(0,0,0,.5);
  }
  :root[data-theme="dark"] .filters input,:root[data-theme="dark"] .filters select,:root[data-theme="dark"] .modal-body input,:root[data-theme="dark"] .modal-body select,:root[data-theme="dark"] .modal-body textarea,:root[data-theme="dark"] .lagrow input,:root[data-theme="dark"] .head-ano select,:root[data-theme="dark"] .lanc-ano select,:root[data-theme="dark"] .rel-tipo-filtro select,:root[data-theme="dark"] .dia-motivo-in{background:#0e1626;color:var(--ink);border-color:var(--line)}
  :root[data-theme="dark"] .btn{background:#16233a;color:var(--ink)}
  :root[data-theme="dark"] .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
  :root[data-theme="dark"] .btn-danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
  :root[data-theme="dark"] th{background:#0e1626}
  :root[data-theme="dark"] tr.grp-head td{background:#0e1626}
  :root[data-theme="dark"] .pgmonth-head{background:#0e1626}
  :root[data-theme="dark"] .pg-ghost,:root[data-theme="dark"] .pg-ghost-row{border-color:#1c2a44}
  :root[data-theme="dark"] .pg-sub-row td{background:#0e1626}
  :root[data-theme="dark"] .pg-item{border-color:#243147}
  :root[data-theme="dark"] .row-tap:hover{background:#0e1626}
  :root[data-theme="dark"] .fchip button:hover{background:rgba(255,255,255,.14)}
  :root[data-theme="dark"] .lagrow{background:#0e1626}
  :root[data-theme="dark"] .ic{background:#1c2a44;color:var(--ink)}
  :root[data-theme="dark"] .ic:hover{background:#27395c}
  :root[data-theme="dark"] .ic.danger{color:var(--danger)}
  :root[data-theme="dark"] .ic.danger:hover{background:#4c1d1d}
  :root[data-theme="dark"] .bt,:root[data-theme="dark"] .compobar,:root[data-theme="dark"] .kpi-bar{background:#1c2a44}
  :root[data-theme="dark"] .resumo-lista{background:#0b2b22;border-color:#155e4c}
  :root[data-theme="dark"] .dash-dica{background:#0b2b16;border-color:#14532d;color:#86efac}
  :root[data-theme="dark"] .dash-dica b{color:#86efac}
  :root[data-theme="dark"] .legenda-card{background:#0b2b16;border-color:#14532d}
  :root[data-theme="dark"] .legenda-txt,:root[data-theme="dark"] .legenda-txt b,:root[data-theme="dark"] .legenda-txt p{color:#86efac}
  :root[data-theme="dark"] .rc-item{background:var(--card)}
  :root[data-theme="dark"] .rc-atr .rc-head{background:#3b0d0d}
  :root[data-theme="dark"] .pill.part{background:#26264f;color:#a5b4fc}
  :root[data-theme="dark"] .pill.off{background:#1c2a44;color:var(--muted)}
  :root[data-theme="dark"] .sit-sel{background:#0e1626;color:var(--ink)}
  :root[data-theme="dark"] .sit-sel.sit-realizada{background:var(--okbg);border-color:#166534}
  :root[data-theme="dark"] .sit-sel.sit-agendado{background:var(--waitbg);border-color:#92600a}
  :root[data-theme="dark"] .sit-sel.sit-exclusao{background:#1c2a44;color:var(--muted)}
  :root[data-theme="dark"] .pill.sit-pill.sit-exclusao{background:#1c2a44;color:var(--muted)}
  :root[data-theme="dark"] .searchbox{background:#0e1626}
  :root[data-theme="dark"] .busca-row input{background:#0e1626;color:var(--ink);border-color:var(--line)}
  :root[data-theme="dark"] .ajuda-cat-head:hover{background:#0e1626}
  :root[data-theme="dark"] .ajuda-cat-ic{background:#0b2b28}
  :root[data-theme="dark"] .mais-ic{background:#0b2b28}
  :root[data-theme="dark"] .btn-sair{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.35);color:var(--danger)}
  :root[data-theme="dark"] .ajuda-cat-count{background:#1c2a44}
  :root[data-theme="dark"] .rel-hero.neutral{background:#0e1626}
  :root[data-theme="dark"] .rel-views{background:#0e1626}
  :root[data-theme="dark"] .rel-sticky-bar{background:var(--card)}
  :root[data-theme="dark"] .bar-prev{fill:#334155}
  :root[data-theme="dark"] .rs-1{--rc:#199e70}
  :root[data-theme="dark"] .rs-2{--rc:#3987e5}
  :root[data-theme="dark"] .rs-3{--rc:#c98500}
  :root[data-theme="dark"] .rs-4{--rc:#9085e9}
  :root[data-theme="dark"] .rs-5{--rc:#d95926}
  :root[data-theme="dark"] .rs-6{--rc:#d55181}
  :root[data-theme="dark"] .empty-card{background:var(--card);border-color:var(--line)}
  :root[data-theme="dark"] .modal{background:var(--card)}
  :root[data-theme="dark"] .info-pag{background:#082f3a;border-color:#0e5e75;color:#7dd3fc}
  :root[data-theme="dark"] .ag-day.ag-picked{background:#0d2b28}
  :root[data-theme="dark"] .toast{background:#334155;color:#fff}
  :root[data-theme="dark"] .card.danger{border-color:#7f1d1d}
  :root[data-theme="dark"] .kpi-amber .kv{color:#fbbf24}
  :root[data-theme="dark"] .kpi-blue .kv{color:#60a5fa}
  :root[data-theme="dark"] .notif-ic{background:#1c2a44}
  :root[data-theme="dark"] .notif-item.n-alerta .notif-ic{background:#3b0d0d;color:#f87171}
  :root[data-theme="dark"] .notif-item.n-info .notif-ic{background:#0b2b22;color:#2dd4bf}
  :root[data-theme="dark"] .notif-item-main:hover{background:rgba(45,212,191,.08)}
  :root[data-theme="dark"] .notif-dismiss:hover{background:rgba(148,163,184,.2)}
  :root[data-theme="dark"] .kpi-purple .kv{color:#a78bfa}
  :root[data-theme="dark"] .desc-grp.desc-13{color:#a5b4fc;border-bottom-color:#26264f}
  :root[data-theme="dark"] .desc-grp.desc-bonif{color:#86efac;border-bottom-color:#14532d}
  @media(max-width:760px){
    :root[data-theme="dark"] tr{background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,.5)}
  }

/* Aviso do preview em modo servidor (Fase 2B.1): gravação na nuvem desligada.
   Só existe em MODO_NUVEM="servidor" (main.js); cores por token (tema escuro incluso). */
.banner-teste{position:sticky;top:0;z-index:90;margin-left:236px;max-width:calc(100% - 236px);background:var(--waitbg);color:var(--wait);font-weight:600;font-size:.82rem;line-height:1.35;text-align:center;padding:.45rem 16px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
@media(max-width:760px){
  .banner-teste{position:relative;top:calc(4.7rem + env(safe-area-inset-top));margin-left:0;max-width:100%;flex:0 0 auto}
}