:root{
  --azul:#1463B4; --azul-fundo:#0B3F7A; --vermelho:#C8202A; --vermelho-escuro:#A3161F;
  --bg:#EEF2F7; --surface:#FFFFFF; --surface-2:#F5F7FA; --ink:#15202E; --ink-2:#4A5668; --ink-3:#7C8797;
  --line:#DCE3EC; --ok:#1B7F4B; --ok-bg:#E3F4EA; --warn:#9A6200; --warn-bg:#FFF3D6; --bad:#B3141D; --bad-bg:#FCE6E7;
  --destaque:#1463B4; --focus:#1463B4;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --display:"Saira","Arial Narrow",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1520; --surface:#16212F; --surface-2:#1C2939; --ink:#E8EEF6; --ink-2:#AAB6C6; --ink-3:#7D8A9C;
    --line:#26354A; --ok:#5FD49A; --ok-bg:#12321F; --warn:#F2C35E; --warn-bg:#3A2C0C; --bad:#FF8A8F; --bad-bg:#3A1418;
    --destaque:#7FB2F0; --focus:#7FB2F0; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1520; --surface:#16212F; --surface-2:#1C2939; --ink:#E8EEF6; --ink-2:#AAB6C6; --ink-3:#7D8A9C;
  --line:#26354A; --ok:#5FD49A; --ok-bg:#12321F; --warn:#F2C35E; --warn-bg:#3A2C0C; --bad:#FF8A8F; --bad-bg:#3A1418;
  --destaque:#7FB2F0; --focus:#7FB2F0; color-scheme:dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.num{ font-variant-numeric:tabular-nums; }
h1,h2,h3{ font-family:var(--display); line-height:1.15; margin:0; }
h2{ font-size:22px; font-weight:700; }
h3{ font-size:17px; font-weight:700; }
.muted{ color:var(--ink-2); }
.small{ font-size:14px; }

/* Topo */
.topbar{ position:relative; background:var(--azul); color:#fff; }
.topbar-in{ max-width:1180px; margin:0 auto; padding:14px 20px 26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.topbar img.logo{ height:30px; width:auto; display:block; }
.topbar .app-name{ font-family:var(--display); font-weight:600; font-size:15px; opacity:.85; padding-left:14px; border-left:1px solid rgba(255,255,255,.35); line-height:1.2; }
.topbar .spacer{ flex:1; }
.swoosh{ position:absolute; left:0; right:0; bottom:-1px; height:22px; display:block; width:100%; }
.user-btn{ display:flex; align-items:center; gap:8px; font-size:14px; background:rgba(0,0,0,.18); border:0; color:#fff; border-radius:999px; padding:4px 12px 4px 4px; font-weight:600; }
.avatar{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--azul-fundo); font-weight:800; font-size:13px; font-family:var(--display); }
main{ max-width:1180px; margin:0 auto; padding:18px 20px 120px; }

/* Botões */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:var(--r-md); padding:12px 18px; font-weight:700; font-size:15px; min-height:46px; text-decoration:none; transition:transform .08s, background .15s; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--vermelho); color:#fff; }
.btn-primary:hover{ background:var(--vermelho-escuro); }
.btn-blue{ background:var(--azul); color:#fff; }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:transparent; color:var(--bad); border:1px solid currentColor; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-link{ background:none; border:0; color:var(--destaque); font-weight:700; padding:6px 0; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-sm{ min-height:34px; padding:6px 12px; font-size:14px; border-radius:var(--r-sm); }
.btn-block{ width:100%; }
.icon-btn{ border:1px solid var(--line); background:var(--surface); width:42px; height:42px; border-radius:50%; display:inline-grid; place-items:center; flex:none; }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn[disabled]{ opacity:.35; cursor:default; }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.chip{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.chip svg{ width:14px; height:14px; }
.st-pendente{ background:var(--warn-bg); color:var(--warn); }
.st-pago{ background:var(--ok-bg); color:var(--ok); }
.st-recusada{ background:var(--bad-bg); color:var(--bad); }
.st-neutro{ background:var(--surface-2); color:var(--ink-2); }

.cat-ico{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff; }
.cat-ico svg{ width:21px; height:21px; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }

.monthnav{ display:flex; align-items:center; gap:10px; }
.monthnav .label{ font-family:var(--display); font-weight:700; font-size:20px; min-width:150px; text-align:center; }

.banner{ border-radius:var(--r-md); padding:12px 14px; font-size:14.5px; display:flex; gap:10px; align-items:flex-start; margin-top:12px; }
.banner svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.banner-ok{ background:var(--ok-bg); color:var(--ok); }
.banner-warn{ background:var(--warn-bg); color:var(--warn); }
.banner-bad{ background:var(--bad-bg); color:var(--bad); }

/* Supervisor */
.sup-hero{ display:grid; gap:16px; padding:20px; margin-top:-8px; }
.bigtotal{ font-family:var(--display); font-weight:800; font-style:italic; font-size:44px; letter-spacing:-.5px; line-height:1; color:var(--destaque); }
.catbar{ display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--surface-2); }
.catbar span{ display:block; height:100%; }
.catlegend{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; }
.catlegend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }
.list{ margin-top:18px; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.day-label{ font-size:13.5px; font-weight:700; color:var(--ink-3); margin:14px 4px 2px; }
.day-label::first-letter{ text-transform:uppercase; }
.item{ display:flex; gap:12px; align-items:center; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); text-align:left; width:100%; }
.item:hover{ border-color:var(--ink-3); }
.item .grow{ flex:1; min-width:0; }
.item .title{ display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item .sub{ font-size:13.5px; color:var(--ink-2); }
.item .val{ font-family:var(--display); font-weight:700; font-size:18px; text-align:right; }
.empty{ text-align:center; padding:40px 20px; color:var(--ink-2); }
.empty svg{ width:56px; height:56px; color:var(--ink-3); }
.fab-wrap{ position:fixed; left:0; right:0; bottom:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top, var(--bg) 60%, transparent); z-index:20; }
.fab-wrap .btn{ width:100%; max-width:560px; margin:0 auto; display:flex; font-size:17px; min-height:56px; border-radius:16px; box-shadow:0 8px 24px -8px rgba(200,32,42,.6); }
.fab-wrap .btn svg{ width:22px; height:22px; }

/* Financeiro */
.fin-head{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-top:-8px; padding:16px 18px; }
.fin-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-top:14px; }
.kpi{ padding:16px 18px; }
.kpi .k{ font-size:13.5px; color:var(--ink-2); font-weight:600; }
.kpi .v{ font-family:var(--display); font-weight:700; font-size:26px; margin-top:4px; }
.kpi.main{ background:var(--azul); color:#fff; border-color:var(--azul); }
.kpi.main .k{ color:rgba(255,255,255,.8); }
.kpi.main .v{ font-style:italic; font-weight:800; font-size:30px; }
.kpi .bar{ height:4px; border-radius:2px; margin-top:10px; background:var(--surface-2); overflow:hidden; }
.kpi .bar span{ display:block; height:100%; }
.tabs{ display:flex; gap:4px; margin:22px 0 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tabs button{ border:0; background:transparent; padding:10px 14px; font-weight:700; color:var(--ink-2); border-bottom:3px solid transparent; margin-bottom:-1px; }
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--vermelho); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.filters select, .filters input{ padding:8px 10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); min-height:40px; }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:14.5px; }
th{ text-align:left; font-size:13px; color:var(--ink-3); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{ border-bottom:0; }
td.r, th.r{ text-align:right; }
.sup-row{ padding:0; overflow:hidden; margin-bottom:10px; }
.sup-row summary{ list-style:none; display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:14px 16px; cursor:pointer; align-items:center; }
.sup-row summary::-webkit-details-marker{ display:none; }
.sup-row .nm{ font-weight:700; font-size:16px; }
.sup-row .pix{ font-size:13.5px; color:var(--ink-2); }
.sup-row .tot{ font-family:var(--display); font-weight:800; font-style:italic; font-size:22px; text-align:right; }
.sup-row .mini{ display:flex; gap:14px; font-size:13px; color:var(--ink-2); flex-wrap:wrap; }
.sup-row[open] summary{ border-bottom:1px solid var(--line); background:var(--surface-2); }

/* Folhas / modais */
.overlay{ position:fixed; inset:0; background:rgba(8,18,32,.55); z-index:50; display:flex; align-items:flex-end; justify-content:center; animation:fade .15s ease-out; }
@media (min-width:720px){ .overlay{ align-items:center; padding:24px; } }
.sheet{ background:var(--surface); width:100%; max-width:560px; max-height:calc(100% - env(safe-area-inset-top,0px) - 12px); overflow:auto; border-radius:22px 22px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px)); animation:rise .2s ease-out; }
.sheet.wide{ max-width:760px; }
@media (min-width:720px){ .sheet{ border-radius:22px; } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
@keyframes fade{ from{opacity:0} }
@keyframes rise{ from{ transform:translateY(24px); opacity:.6 } }
@media (prefers-reduced-motion: reduce){ .overlay,.sheet{ animation:none; } .btn{ transition:none; } }

.field{ display:grid; gap:6px; margin-bottom:16px; }
.field > label, .field > .lbl{ font-weight:700; font-size:14.5px; }
.field .hint{ font-size:13px; color:var(--ink-3); }
.input{ width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--r-md); padding:12px 14px; font-size:16px; min-height:48px; }
.input:focus{ border-color:var(--azul); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--azul) 25%, transparent); }
textarea.input{ min-height:76px; resize:vertical; }
select.input{ appearance:auto; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check{ display:flex; gap:10px; align-items:flex-start; font-weight:600; margin-bottom:16px; }
.check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--azul); }
.money{ position:relative; }
.money span{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-weight:700; }
.money .input{ padding-left:44px; font-family:var(--display); font-weight:700; font-size:20px; }
.cats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.cat-opt{ border:2px solid var(--line); background:var(--surface); border-radius:var(--r-md); padding:14px 2px 12px; display:grid; justify-items:center; gap:8px; font-weight:700; font-size:clamp(12px,3.3vw,14px); min-width:0; }
.cat-opt .cat-ico{ width:44px; height:44px; }
.cat-opt[aria-checked="true"]{ border-color:var(--c); background:color-mix(in srgb, var(--c) 10%, var(--surface)); }
.photo-drop{ border:2px dashed var(--line); border-radius:var(--r-md); padding:22px; text-align:center; display:grid; gap:8px; justify-items:center; background:var(--surface-2); color:var(--ink-2); width:100%; }
.photo-drop svg{ width:36px; height:36px; color:var(--destaque); }
.photo-prev{ position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:#000; }
.photo-prev img{ display:block; width:100%; max-height:320px; object-fit:contain; }
.photo-prev .btn{ position:absolute; right:10px; bottom:10px; }
.pdf-prev{ display:flex; gap:12px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); }
.receipt{ display:block; width:100%; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2); min-height:120px; object-fit:contain; max-height:70vh; }
iframe.receipt{ height:70vh; }
.dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:15px; margin:0 0 16px; }
.dl dt{ color:var(--ink-3); font-weight:600; }
.dl dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.err{ color:var(--bad); font-size:14px; font-weight:600; margin:0 0 12px; }
.ok-msg{ color:var(--ok); font-size:14px; font-weight:600; margin:0 0 12px; }
.toast{ position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:12px; font-weight:600; font-size:15px; z-index:80; max-width:calc(100% - 40px); box-shadow:0 10px 30px -10px rgba(0,0,0,.5); }
.offline{ position:sticky; top:0; z-index:40; background:var(--warn-bg); color:var(--warn); text-align:center; font-weight:700; font-size:14px; padding:6px 12px; }

/* Login */
.auth-wrap{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px 18px; background:
  radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--azul) 22%, transparent), transparent 60%), var(--bg); }
.auth-card{ width:100%; max-width:420px; padding:30px 24px 24px; }
.auth-card .brand{ display:block; width:230px; margin:0 auto 6px; }
.auth-card .arc{ display:block; width:100%; height:18px; margin:6px 0 18px; }
.auth-card h1{ font-size:24px; text-align:center; margin-bottom:4px; }
.auth-card .sub{ text-align:center; color:var(--ink-2); margin:0 0 22px; font-size:15px; }
.pass-wrap{ position:relative; }
.pass-wrap .input{ padding-right:84px; }
.pass-wrap button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--destaque); font-weight:700; font-size:14px; padding:8px 10px; }

.spinner{ width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--azul); border-radius:50%; animation:spin .8s linear infinite; margin:30px auto; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Menu do usuário */
.menu-list{ display:grid; gap:8px; }
.menu-list .btn{ justify-content:flex-start; }

@media (max-width:560px){
  .topbar .app-name{ display:none; }
  .topbar img.logo{ height:24px; }
  .bigtotal{ font-size:38px; }
  .monthnav .label{ min-width:120px; font-size:18px; }
  .hide-sm{ display:none; }
  .row2{ gap:10px; }
}

/* Dados bancários */
.bank-box, .bank-box *{ box-sizing:border-box; }
.bank-box{ border:1px solid var(--line, #DCE3EC); border-radius:14px; padding:14px; margin:6px 0 14px; display:grid; gap:4px; }
.bank-title{ font-weight:800; font-size:15px; margin-bottom:6px; }
.bank-info{ font-size:13.5px; color:var(--ink-2); word-break:break-word; }

/* Perfil de quem está logado, no topo */
.role-chip{ font-size:11.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:#fff; color:#1463B4; margin-left:4px; }
.role-chip.role-financeiro{ color:#0B7A43; }
.role-chip.role-admin{ color:#C8202A; }

/* Pagamentos (financeiro) */
.pay-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; background:var(--surface-2); border-top:1px solid var(--line); }
.pay-list{ display:grid; border-top:1px solid var(--line); }
.pay-item{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--line); font-size:14px; }
.pay-item .grow{ flex:1; min-width:200px; }
.pay-dest{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:16px; background:var(--surface-2); }
.pay-sel{ display:grid; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.pay-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14.5px; }
.pay-row:last-child{ border-bottom:0; }
.pay-row input{ width:20px; height:20px; flex:none; accent-color:var(--azul); }
.pay-row .grow{ flex:1; min-width:0; overflow-wrap:anywhere; }
.pay-total{ display:flex; justify-content:space-between; align-items:baseline; padding:4px 2px 16px; font-weight:700; }
.pay-total b{ font-family:var(--display); font-size:24px; }
.warn-txt{ color:var(--warn); }

/* Janela de relatórios */
.rel-grupo{ font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-3); margin:14px 0 8px; }
.rel-card{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:8px; }
.rel-card .grow{ flex:1; min-width:220px; }
.rel-acao{ display:flex; gap:8px; align-items:center; }
.rel-acao .input{ min-height:38px; padding:6px 10px; font-size:14.5px; width:auto; max-width:220px; }

/* Instalar app (PWA) */
.inst-btn{ position:relative; display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:14px; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.45); border-radius:999px; padding:6px 13px 6px 10px; cursor:pointer; }
.inst-btn svg{ width:19px; height:19px; }
.inst-btn:hover{ background:rgba(255,255,255,.24); }
.inst-dot{ position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:var(--vermelho); border:2px solid var(--azul); animation:inst-pulso 1.8s ease-out infinite; }
@keyframes inst-pulso{ 0%{ box-shadow:0 0 0 0 rgba(200,32,42,.7); } 70%{ box-shadow:0 0 0 9px rgba(200,32,42,0); } 100%{ box-shadow:0 0 0 0 rgba(200,32,42,0); } }
@media (prefers-reduced-motion: reduce){ .inst-dot{ animation:none; } }
@media (max-width:520px){ .inst-btn span{ display:none; } .inst-btn{ padding:7px; } }
.inst-login{ margin-top:16px; width:100%; display:flex; align-items:center; gap:12px; text-align:left; font:inherit; color:var(--ink); background:var(--surface-2); border:1.5px dashed var(--line); border-radius:var(--r-md); padding:12px 14px; cursor:pointer; }
.inst-login svg{ width:30px; height:30px; color:var(--destaque); flex:none; }
.inst-login span{ display:grid; gap:2px; }
.inst-login small{ color:var(--ink-3); font-size:13px; }
.inst-card{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface); border:1.5px solid color-mix(in srgb, var(--azul) 35%, var(--line)); border-radius:var(--r-lg); padding:14px 16px; margin:14px 0; }
.inst-card .grow{ flex:1 1 220px; display:grid; gap:3px; }
.inst-card .grow span{ color:var(--ink-2); font-size:14px; }
.inst-ico{ width:46px; height:46px; border-radius:12px; background:var(--azul); color:#fff; display:grid; place-items:center; flex:none; }
.inst-ico svg{ width:26px; height:26px; }
.inst-acoes{ display:flex; align-items:center; gap:12px; }
.inst-passos{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:12px; }
.inst-passos li{ display:flex; gap:12px; align-items:flex-start; line-height:1.45; }
.inst-n{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--azul); color:#fff; font-weight:800; display:grid; place-items:center; }
.inst-chip{ display:inline-grid; place-items:center; width:26px; height:26px; vertical-align:middle; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--destaque); }
.inst-chip svg{ width:17px; height:17px; }
/* Topo no celular: tudo numa linha só */
@media (max-width:520px){
  .topbar-in{ flex-wrap:nowrap; gap:10px; }
  .topbar .logo{ height:auto; width:min(38vw, 150px); min-width:0; }
  .role-chip{ font-size:10px; padding:3px 6px; letter-spacing:.2px; }
  .user-btn{ padding:3px 8px 3px 3px; flex:none; }
  .inst-btn{ flex:none; }
}