:root{
  --bg:#F4F5EF;
  --surface:#FFFFFF;
  --line:#DCD9CC;
  --ink:#182524;
  --ink-soft:#5B6B66;
  --accent:#0F6B5C;
  --accent-soft:#E4EEE9;
  --gold:#B5762C;
  --gold-soft:#F5E9D8;
  --danger:#A23E2C;
  --danger-soft:#F5E1DA;
  --radius:10px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
::selection{background:var(--gold-soft);}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;margin:0;}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
img,svg{max-width:100%;height:auto;display:block;}

/* ---------- Shell ---------- */
/* min-height:100vh como base; dvh (dynamic viewport height) corrige o salto
   visual causado pela barra de endereço do Safari/Chrome mobile ao rolar. */
.shell{display:flex;min-height:100vh;min-height:100dvh;}
.sidebar{
  width:236px;flex-shrink:0;background:var(--ink);color:#EDEEE6;
  padding:28px 18px;display:flex;flex-direction:column;gap:28px;
  position:sticky;top:0;height:100vh;height:100dvh;
  padding-left:max(18px, env(safe-area-inset-left));
}
.brand{display:flex;flex-direction:column;gap:2px;padding:0 6px;position:relative;}
.stamp{
  width:44px;height:44px;border:2px solid #C98A44;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:700;font-size:15px;color:#C98A44;
  transform:rotate(-8deg);flex-shrink:0;
}
.brand .stamp{margin-bottom:10px;}
.brand h1{font-size:18px;line-height:1.25;color:#F4F5EF;}
.brand .brand-subtitle{font-size:11.5px;color:#9AAAA4;letter-spacing:.02em;margin-top:4px;}
nav{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
nav button{
  all:unset;cursor:pointer;padding:10px 12px;border-radius:8px;font-size:14px;
  color:#C7D2CC;display:flex;align-items:center;gap:10px;transition:background .15s,color .15s;
  min-height:44px;
}
/* Botão hambúrguer: só existe visualmente abaixo de 640px (ver media query). */
.hamburger-btn{
  all:unset;display:none;cursor:pointer;position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:8px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamburger-btn:hover, .hamburger-btn:focus-visible{background:#22322F;}
.hamburger-btn span{width:20px;height:2px;background:#EDEEE6;border-radius:2px;transition:transform .18s,opacity .18s;}
.hamburger-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
nav button .dot{width:6px;height:6px;border-radius:50%;background:#5B6B66;flex-shrink:0;}
nav button:hover{background:#22322F;color:#fff;}
nav button.active{background:#22322F;color:#fff;}
nav button.active .dot{background:#C98A44;}
.sidebar-foot{margin-top:auto;font-size:11px;color:#7C8C86;padding:0 6px;line-height:1.5;}
.sidebar-foot button{all:unset;cursor:pointer;color:#9AAAA4;text-decoration:underline;text-underline-offset:2px;font-size:11px;}
.sidebar-foot button:hover{color:#fff;}

main{flex:1;min-width:0;padding:32px 40px 60px;max-width:1180px;padding-right:max(40px, env(safe-area-inset-right));}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;gap:20px;flex-wrap:wrap;}
.topbar h2{font-size:clamp(19px, 3vw, 24px);}
.topbar p{margin:6px 0 0;color:var(--ink-soft);font-size:13.5px;}
.today{font-size:12px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;border:1px solid var(--line);padding:6px 12px;border-radius:999px;background:var(--surface);}

.view{display:none;}
.view.active{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:26px;}
/* cards-2/cards-4: quantidade de colunas "ideal" em telas largas, mas sempre
   com fallback progressivo — nunca ficam espremidos em telas pequenas. */
.cards-2{grid-template-columns:repeat(2,1fr);}
.cards-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:960px){ .cards-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .cards-2,.cards-4{grid-template-columns:1fr;} }
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;min-width:0;}
.card .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.card .value{font-size:clamp(18px, 4vw, 22px);margin-top:8px;font-weight:600;word-break:break-word;}
.card .sub{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.card.accent{background:var(--accent);border-color:var(--accent);}
.card.accent .label{color:#CFE6DC;}
.card.accent .value{color:#fff;}
.card.accent .sub{color:#B9DACC;}

.panels{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:26px;align-items:stretch;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;min-width:0;}
.panel h3{font-size:15px;margin-bottom:14px;}
.panel-sub{font-size:12px;color:var(--ink-soft);margin:-10px 0 16px;}

.legend-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px dashed var(--line);font-size:13px;border-radius:6px;cursor:pointer;transition:background .12s;}
.legend-row:hover{background:var(--accent-soft);}
.legend-row:last-child{border-bottom:none;}
.swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;}
.legend-row .name{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.legend-row .pct{color:var(--ink-soft);width:52px;flex-shrink:0;text-align:right;}
.legend-row .val{width:110px;flex-shrink:0;text-align:right;font-weight:600;}
@media(max-width:400px){
  .legend-row .pct{width:36px;}
  .legend-row .val{width:84px;font-size:12.5px;}
}

/* Estratégia de responsividade das tabelas: rolagem horizontal CONTIDA no
   próprio container, nunca na página. Os dados ficam tabulares (importante
   para comparar valores financeiros lado a lado), só o container rola. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.led{width:100%;min-width:520px;border-collapse:collapse;font-size:13.5px;}
table.led th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:8px 10px;border-bottom:1px solid var(--line);}
table.led td{padding:9px 10px;border-bottom:1px dashed var(--line);vertical-align:middle;}
table.led tr:last-child td{border-bottom:none;}
table.led td.right, table.led th.right{text-align:right;}
.seq{font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);font-size:12px;}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:600;}
.tag .swatch{width:7px;height:7px;}
.tag.clickable{cursor:pointer;transition:filter .12s,transform .12s;}
.tag.clickable:hover{filter:brightness(0.94);transform:translateY(-1px);}
tr.clickable-row{cursor:pointer;transition:background .12s;}
tr.clickable-row:hover{background:var(--accent-soft);}
.status-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 9px;border-radius:999px;font-weight:600;}
.status-tag.pendente{background:var(--gold-soft);color:var(--gold);}
.status-tag.pago{background:var(--accent-soft);color:var(--accent);}
.status-tag .dot2{width:6px;height:6px;border-radius:50%;background:currentColor;}
@media print{
  .sidebar, .no-print{display:none !important;}
  main{padding:0 10px;max-width:none;}
  body{background:#fff;}
  .card.accent{background:#fff !important;border:1px solid var(--line) !important;}
  .card.accent .label, .card.accent .sub{color:var(--ink-soft) !important;}
  .card.accent .value{color:var(--ink) !important;}
  .print-only{display:block !important;}
  #view-despesas .list-wrap{padding:0;border:none;}
  #view-despesas table.led{font-size:10.5px;}
  #view-despesas table.led th{padding:4px 6px;font-size:8.5px;}
  #view-despesas table.led td{padding:3px 6px;}
  #view-despesas .seq{font-size:9.5px;}
  #view-despesas .tag{padding:1px 6px;font-size:9.5px;}
  #view-despesas .tag .swatch{width:6px;height:6px;}
}
.print-only{display:none;}

/* ---------- Login ---------- */
.login-bg{
  position:fixed;inset:0;z-index:100;padding:24px;
  padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:center;
  overflow-y:auto;
  background:
    radial-gradient(680px 420px at 14% 12%, rgba(201,138,68,.16), transparent 60%),
    radial-gradient(620px 480px at 88% 90%, rgba(15,107,92,.28), transparent 55%),
    var(--ink);
}
.login-shell{
  display:flex;width:840px;max-width:100%;min-height:480px;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  margin:auto;
}
/* Telas baixas (celular deitado): a altura mínima fixa do card não cabe —
   deixa a altura fluir com o conteúdo em vez de forçar 480px. */
@media(max-height:640px){
  .login-shell{min-height:0;}
}
.login-side{
  flex:1 1 320px;background:#132321;color:#EDEEE6;padding:40px 36px;
  display:flex;flex-direction:column;justify-content:space-between;
  background-image:radial-gradient(420px 300px at 100% 0%, rgba(201,138,68,.14), transparent 60%);
}
.login-side .stamp{width:52px;height:52px;font-size:18px;margin-bottom:0;}
.login-side h1{font-size:clamp(19px, 4vw, 22px);color:#F4F5EF;margin-top:18px;line-height:1.3;}
.login-side p{font-size:13.5px;color:#9AAAA4;margin-top:10px;line-height:1.6;max-width:320px;}
.login-features{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.login-features li{display:flex;align-items:center;gap:10px;font-size:13px;color:#C7D2CC;}
.login-features li .chk{
  width:18px;height:18px;border-radius:5px;background:rgba(201,138,68,.18);color:#C98A44;
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;
}
.login-side .foot{font-size:11px;color:#6E7E79;margin-top:24px;}
.login-form-side{
  flex:1 1 360px;background:var(--surface);padding:44px 40px;display:flex;flex-direction:column;justify-content:center;
}
.login-form-side h2{font-size:20px;margin-bottom:6px;}
.login-form-side .lead{font-size:13.5px;color:var(--ink-soft);margin-bottom:26px;}
.login-form-side .field{margin-bottom:16px;}
.login-form-side label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.login-form-side input{padding:11px 13px;font-size:14.5px;}
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:70px;}
.pass-toggle{
  all:unset;position:absolute;right:4px;top:4px;bottom:4px;padding:0 12px;display:flex;align-items:center;
  font-size:11.5px;color:var(--ink-soft);cursor:pointer;border-radius:5px;
}
.pass-toggle:hover{background:var(--accent-soft);color:var(--accent);}
.login-form-side button[type=submit]{width:100%;text-align:center;padding:12px;font-size:14.5px;margin-top:6px;}
.login-error{
  display:none;align-items:center;gap:8px;background:var(--danger-soft);color:var(--danger);
  font-size:12.5px;padding:10px 12px;border-radius:7px;margin-bottom:16px;
}
.login-form-side .foot-note{font-size:11.5px;color:var(--ink-soft);margin-top:20px;text-align:center;}
@media(max-width:720px){
  .login-side{display:none;}
  .login-shell{width:420px;min-height:0;box-shadow:0 20px 60px rgba(0,0,0,.4);}
  .login-form-side{padding:38px 28px;}
}
@media(max-width:400px){
  .login-form-side{padding:30px 20px;}
}
.user-badge{display:flex;align-items:center;gap:10px;padding:10px 6px;border-top:1px solid #2A3A37;margin-bottom:4px;}
.user-badge .initials{
  width:32px;height:32px;border-radius:50%;background:#22322F;color:#EDEEE6;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;flex-shrink:0;
}
.user-badge .info{overflow:hidden;}
.user-badge .info .name{font-size:12.5px;color:#EDEEE6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-badge .info .role{font-size:11px;color:#9AAAA4;}
.role-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-weight:600;}
.role-badge.admin{background:var(--accent-soft);color:var(--accent);}

/* ---------- Form (Lançar) ---------- */
.form-wrap{max-width:640px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;}
.form-wrap h3{font-size:17px;margin-bottom:4px;}
.form-wrap .hint{font-size:13px;color:var(--ink-soft);margin-bottom:20px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field .helper{font-size:11.5px;color:var(--ink-soft);margin-top:5px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
input[type=text], input[type=number], input[type=date], select, textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;
  font-family:'Inter',sans-serif;font-size:14px;background:#FCFCFA;color:var(--ink);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.valor-wrap{position:relative;}
.valor-wrap span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:14px;}
.valor-wrap input{padding-left:34px;font-family:'IBM Plex Mono',monospace;}
.actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
button.primary{
  all:unset;cursor:pointer;background:var(--accent);color:#fff;padding:11px 20px;border-radius:7px;
  font-size:14px;font-weight:600;text-align:center;
}
button.primary:hover{background:#0C5548;}
button.primary:disabled{opacity:.6;cursor:not-allowed;}
button.ghost{
  all:unset;cursor:pointer;background:transparent;color:var(--ink-soft);padding:11px 16px;border-radius:7px;
  font-size:13.5px;border:1px solid var(--line);
}
button.ghost:hover{background:var(--accent-soft);color:var(--accent);}
.msg{font-size:13px;padding:10px 14px;border-radius:7px;margin-bottom:18px;display:none;}
.msg.ok{display:block;background:var(--accent-soft);color:var(--accent);}

/* ---------- Despesas view ---------- */
.filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.filters select, .filters input{width:auto;min-width:170px;}
.filters .search{flex:1;min-width:220px;}
@media(max-width:480px){
  .filters select, .filters input, .filters .search{min-width:0;width:100%;}
  .filters .field{width:100%;}
}
.count-note{font-size:12px;color:var(--ink-soft);margin-left:auto;}
.filter-summary{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-bottom:14px;padding:10px 16px;background:var(--accent-soft);border:1px solid #CFE1D9;border-radius:8px;font-size:12.5px;color:var(--accent);}
.filter-summary .fs-total{font-size:13.5px;}
.filter-summary .fs-total strong{font-size:15px;}
.list-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px 22px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.icon-btn{all:unset;cursor:pointer;font-size:12px;color:var(--ink-soft);padding:8px 10px;border-radius:5px;min-height:34px;display:inline-flex;align-items:center;}
.icon-btn:hover{background:var(--accent-soft);color:var(--accent);}
.icon-btn.danger:hover{background:var(--danger-soft);color:var(--danger);}
.empty{padding:40px 10px;text-align:center;color:var(--ink-soft);font-size:13.5px;}

.modal-bg{position:fixed;inset:0;background:rgba(24,37,36,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-bg.active{display:flex;}
.modal{background:var(--surface);border-radius:12px;padding:26px 28px;width:420px;max-width:100%;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;}
.modal h3{font-size:16px;margin-bottom:8px;}
.modal p{font-size:13.5px;color:var(--ink-soft);margin:0 0 20px;}
.modal .actions{margin-top:0;}

canvas{max-width:100%;}
.chart-wrap{position:relative;width:100%;height:clamp(200px, 42vw, 280px);}
.chart-wrap-pie{height:clamp(200px, 38vw, 260px);}
.chart-wrap canvas{width:100% !important;height:100% !important;}
@media(max-width:640px){
  .chart-wrap{height:clamp(200px, 62vw, 260px);}
  .chart-wrap-pie{height:clamp(200px, 62vw, 260px);}
}

/* Tablet/notebook estreito (≈641–880px): sidebar vira barra horizontal no
   topo, com os itens de navegação em linha (rolagem horizontal contida se
   não couberem todos). */
@media(max-width:880px){
  .shell{flex-direction:column;}
  .sidebar{
    width:100%;height:auto;position:relative;flex-direction:row;align-items:center;
    padding:14px 18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-top:max(14px, env(safe-area-inset-top));
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right));
  }
  .brand{flex-direction:row;align-items:center;gap:10px;flex-shrink:0;}
  .brand .stamp{margin-bottom:0;}
  .brand .brand-subtitle{display:none;}
  nav{flex-direction:row;margin-top:0;flex-shrink:0;}
  nav button{white-space:nowrap;}
  .sidebar-foot{display:flex;align-items:center;gap:10px;margin-top:0;margin-left:auto;white-space:nowrap;flex-shrink:0;}
  .sidebar-foot br, .sidebar-foot .user-badge{display:none;}
  #logoutBtn{display:inline;}
  main{padding:22px 18px 50px;padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right));}
  .cards{grid-template-columns:1fr 1fr;}
  .panels{grid-template-columns:1fr;}
  .row2{grid-template-columns:1fr;}
}

/* Smartphone (≤640px): navegação vira menu hambúrguer em dropdown — 8 itens
   em barra horizontal rolável ficavam ruins de usar de verdade no polegar. */
@media(max-width:640px){
  .sidebar{overflow:visible;flex-wrap:wrap;}
  .brand{flex:1;min-width:0;}
  .hamburger-btn{display:flex;}
  .sidebar-foot .sidebar-note{display:none;}
  nav{
    display:none;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;margin-top:0;
    background:var(--ink);padding:8px 14px 18px;z-index:40;
    box-shadow:0 16px 28px rgba(0,0,0,.35);
    max-height:calc(100dvh - 76px);overflow-y:auto;
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }
  .sidebar.mobile-nav-open nav{display:flex;}
  nav button{padding:13px 14px;font-size:15px;white-space:normal;}
  main{padding:18px 16px 44px;padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));}
  .cards{grid-template-columns:1fr;}
  .topbar{gap:12px;}
  .form-wrap, .panel{padding:18px 16px;}
  .list-wrap{padding:6px 14px;}
}

/* Áreas de toque maiores em telas pequenas / dispositivos sem mouse. */
@media(max-width:640px), (pointer:coarse){
  .icon-btn{min-height:40px;padding:9px 12px;font-size:12.5px;}
  input[type=checkbox]{width:19px;height:19px;}
  .baixa-check, #baixaSelectAll{width:19px;height:19px;}
  .pass-toggle{min-width:44px;}
}

/* Telas muito grandes (ultrawide): dá um respiro extra sem esticar o
   conteúdo — o layout já é limitado por max-width em `main`. */
@media(min-width:1920px){
  .sidebar{width:260px;}
}