/* =========================================================================
   TreeHeptac Gestão — tema v2 (repaginação)
   Carregado DEPOIS de style.css e app.css: refina tokens e componentes sem
   mudar a identidade (tinta escura + latão). Tudo que é novo mora aqui.
   ========================================================================= */

:root{
  --ink:#0c0e10; --ink-2:#14171a; --ink-3:#1b1f23; --ink-4:#23282d;
  --line:#2a3036; --line-soft:#20252a;
  --brass:#c89b3c; --brass-bright:#e4b95a; --brass-soft:rgba(200,155,60,.12); --brass-line:rgba(200,155,60,.35);
  --teal:#3f8f80; --ok:#5fb07c; --danger:#d9694e; --warn:#e3a23b; --info:#6ea8cf;
  --ok-soft:rgba(95,176,124,.13); --danger-soft:rgba(217,105,78,.13); --warn-soft:rgba(227,162,59,.13); --info-soft:rgba(110,168,207,.13);
  --text:#f2efe8; --text-soft:rgba(242,239,232,.74); --text-faint:rgba(242,239,232,.47);
  --radius:14px; --radius-sm:10px; --radius-xs:7px;
  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.25);
  --shadow-2:0 18px 40px -18px rgba(0,0,0,.6);
  --focus:0 0 0 3px rgba(228,185,90,.28);
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
html.tema-claro{
  --ink:#f7f5f0; --ink-2:#ffffff; --ink-3:#f1eee7; --ink-4:#e8e4da;
  --line:#e0dacd; --line-soft:#ece7dc;
  --brass:#a47719; --brass-bright:#8a6312; --brass-soft:rgba(164,119,25,.10); --brass-line:rgba(164,119,25,.35);
  --teal:#1f6b5d; --ok:#2e8a4f; --danger:#b8472d; --warn:#b77a12; --info:#2f6f98;
  --ok-soft:rgba(46,138,79,.10); --danger-soft:rgba(184,71,45,.10); --warn-soft:rgba(183,122,18,.12); --info-soft:rgba(47,111,152,.10);
  --text:#1a1612; --text-soft:rgba(26,22,18,.76); --text-faint:rgba(26,22,18,.5);
  --shadow-1:0 1px 2px rgba(40,30,10,.06); --shadow-2:0 18px 40px -20px rgba(40,30,10,.25);
}

body{background:var(--ink);font-feature-settings:"cv11","ss01";}
::selection{background:rgba(228,185,90,.35);}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.num{text-align:right;white-space:nowrap;}
.muted{color:var(--text-faint);} .soft{color:var(--text-soft);}
.pos{color:var(--ok);} .neg{color:var(--danger);}
.small{font-size:.8rem;} .xsmall{font-size:.72rem;}
.nowrap{white-space:nowrap;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- controles de formulário (inclui data/select que estavam sem estilo) ---------- */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],
input[type=search],input[type=url],input[type=month],input[type=color],select,textarea{
  background:var(--ink-3);border:1px solid var(--line);color:var(--text);border-radius:var(--radius-xs);
  font-family:var(--font-body);transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input[type=date],input[type=month],input[type=search],input[type=url]{width:100%;padding:11px 13px;font-size:.9rem;margin-bottom:16px;}
input[type=color]{width:46px;height:40px;padding:3px;margin-bottom:16px;cursor:pointer;}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb, var(--line) 50%, var(--text-faint));}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);box-shadow:var(--focus);}
input::placeholder,textarea::placeholder{color:var(--text-faint);}
select{appearance:none;-webkit-appearance:none;padding-right:34px !important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b5ab96' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;}
select[multiple]{background-image:none;padding-right:13px !important;}
html:not(.tema-claro) input[type=date]::-webkit-calendar-picker-indicator,
html:not(.tema-claro) input[type=month]::-webkit-calendar-picker-indicator{filter:invert(.8);}
input[type=checkbox],input[type=radio]{accent-color:var(--brass);width:16px;height:16px;vertical-align:-3px;cursor:pointer;}
input[type=file]{font-size:.84rem;color:var(--text-soft);width:100%;margin-bottom:12px;}
input[type=file]::file-selector-button{
  font-family:var(--font-display);font-weight:600;font-size:.8rem;margin-right:12px;
  background:var(--ink-4);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;
}
input[type=file]::file-selector-button:hover{border-color:var(--brass);color:var(--brass-bright);}
label{color:var(--text-soft);font-size:.8rem;letter-spacing:.01em;}
.hint{font-size:.76rem;color:var(--text-faint);line-height:1.5;margin:-10px 0 14px;}

/* ---------- botões ---------- */
.btn{letter-spacing:.005em;}
.btn:focus-visible{outline:none;box-shadow:var(--focus);}
.btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.18) inset;}
.btn-ghost{background:var(--ink-2);}
.btn-ghost:hover{background:var(--ink-3);}
.btn-soft{background:var(--brass-soft);color:var(--brass-bright);border-color:var(--brass-line);}
.btn-soft:hover{background:rgba(200,155,60,.2);}
.btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent);}
.btn-danger:hover{background:var(--danger-soft);}
.btn-sm{width:auto;padding:8px 15px;font-size:.84rem;}
.btn-xs{width:auto;padding:5px 11px;font-size:.76rem;gap:5px;}
.btn-icon{width:32px;height:32px;padding:0;border-radius:9px;}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none;}
.btn .ic svg{width:1em;height:1em;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.link{color:var(--brass-bright);text-decoration:none;}
.link:hover{text-decoration:underline;}

/* ---------- cabeçalho de página ---------- */
.page-head{margin-bottom:22px;align-items:flex-end;}
.page-head h1{font-size:1.6rem;letter-spacing:-.015em;line-height:1.15;}
.page-kicker{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.page-kicker a{color:inherit;text-decoration:none;opacity:.8;} .page-kicker a:hover{opacity:1;}
.page-sub{color:var(--text-faint);font-size:.88rem;margin:6px 0 0;max-width:680px;line-height:1.5;}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.section-title{font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin:28px 0 12px;display:flex;align-items:center;gap:10px;}
.section-title .count{font-family:var(--font-mono);font-size:.72rem;color:var(--text-faint);font-weight:500;}
.section-title .right{margin-left:auto;display:flex;gap:8px;}

/* ---------- painéis / cards ---------- */
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);}
.panel-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line-soft);}
.panel-head h3,.panel-head h4{margin:0;font-family:var(--font-display);font-size:.98rem;font-weight:600;}
.panel-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.panel-body{padding:20px;}
.panel-body.tight{padding:12px 16px;}
.panel + .panel{margin-top:18px;}
.table-card{box-shadow:var(--shadow-1);}
.form-card{box-shadow:var(--shadow-1);}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;}
.grid-main > .panel + .panel,.grid-2 > .panel + .panel,.stack > .panel + .panel{margin-top:0;}
.stack{display:flex;flex-direction:column;gap:18px;}
.stack > *,.grid-main > *{min-width:0;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px;}
.form-grid .full{grid-column:1/-1;}
.divider{height:1px;background:var(--line-soft);margin:18px 0;}

/* ---------- KPIs ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px;}
.kpi{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-1);overflow:hidden;}
.kpi .label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.kpi .value{font-family:var(--font-display);font-weight:600;font-size:1.45rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.kpi .foot{font-size:.76rem;color:var(--text-faint);margin-top:6px;}
.kpi.accent{border-color:var(--brass-line);background:linear-gradient(160deg, rgba(200,155,60,.10), transparent 60%), var(--ink-2);}
.kpi.accent .value{color:var(--brass-bright);}
.kpi.danger .value{color:var(--danger);} .kpi.ok .value{color:var(--ok);}
.kpi a.stretched::after{content:"";position:absolute;inset:0;}
.kpi:has(a.stretched):hover{border-color:var(--brass-line);}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-family:var(--font-display);
  font-size:.7rem;font-weight:600;line-height:1.6;white-space:nowrap;background:var(--ink-4);color:var(--text-soft);}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.b-ok{background:var(--ok-soft);color:var(--ok);} .b-danger{background:var(--danger-soft);color:var(--danger);}
.b-warn{background:var(--warn-soft);color:var(--warn);} .b-info{background:var(--info-soft);color:var(--info);}
.b-brass{background:var(--brass-soft);color:var(--brass-bright);} .b-muted{background:var(--ink-4);color:var(--text-faint);}
.tag{font-size:.7rem;}

/* ---------- tabelas ---------- */
.data-table th{background:color-mix(in srgb, var(--ink-2) 70%, var(--ink-3));font-size:.66rem;padding:11px 16px;position:sticky;top:0;z-index:1;}
.data-table td{padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:.87rem;vertical-align:middle;}
.data-table tbody tr{transition:background .12s ease;}
.data-table tbody tr:hover{background:color-mix(in srgb, var(--ink-3) 60%, transparent);}
.data-table th.num,.data-table td.num{text-align:right;}
.data-table tr.row-late td:first-child{box-shadow:inset 3px 0 0 var(--danger);}
.data-table tr.row-today td:first-child{box-shadow:inset 3px 0 0 var(--warn);}
.data-table tr.row-selected{background:var(--brass-soft) !important;}
.data-table tfoot td{font-weight:600;border-top:1px solid var(--line);background:var(--ink-3);}
.data-table .sub{display:block;font-size:.74rem;color:var(--text-faint);margin-top:2px;}
.data-table td.actions{white-space:nowrap;text-align:right;}
.data-table td.actions form{display:inline;}
.data-table.compact td{padding:8px 14px;}
.data-table a.row-link{color:var(--text);font-size:inherit;font-weight:500;}
.data-table a.row-link:hover{color:var(--brass-bright);}
.table-scroll{overflow-x:auto;}
.table-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--ink-2);}
.bulk-bar{display:none;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:var(--brass-soft);border-bottom:1px solid var(--brass-line);font-size:.85rem;}
.bulk-bar.on{display:flex;}
.bulk-bar select,.bulk-bar input{margin:0;padding:6px 10px;font-size:.8rem;width:auto;}

/* ---------- abas / segmentado / chips ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none;}
.tabs a,.tabs button{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-faint);padding:10px 14px;
  font-family:var(--font-display);font-weight:600;font-size:.86rem;text-decoration:none;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px;margin-bottom:-1px;}
.tabs a:hover,.tabs button:hover{color:var(--text);}
.tabs a.active,.tabs button.active{color:var(--brass-bright);border-bottom-color:var(--brass);}
.tabs .badge{font-size:.64rem;padding:0 7px;}
.seg{display:inline-flex;background:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;}
.seg a,.seg button,.seg label{padding:6px 13px;border-radius:999px;font-size:.8rem;color:var(--text-soft);text-decoration:none;cursor:pointer;
  font-family:var(--font-display);font-weight:600;border:none;background:none;margin:0;white-space:nowrap;}
.seg a.active,.seg button.active,.seg input:checked + label{background:var(--ink-2);color:var(--brass-bright);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.seg input{display:none;}
@media(max-width:560px){.seg{flex-wrap:wrap;border-radius:16px;max-width:100%;}}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--ink-2);
  font-size:.78rem;color:var(--text-soft);text-decoration:none;cursor:pointer;}
.chip:hover{border-color:var(--brass-line);color:var(--text);}
.chip.active{border-color:var(--brass);color:var(--brass-bright);background:var(--brass-soft);}
.chip input{display:none;}
.chip .sw{width:9px;height:9px;border-radius:3px;}

/* ---------- barra de filtros ---------- */
.filterbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px;}
.filterbar .f{display:flex;flex-direction:column;gap:5px;min-width:130px;}
.filterbar .f.grow{flex:1;min-width:200px;}
.filterbar label{font-size:.7rem;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:0;}
.filterbar input,.filterbar select{margin:0;padding:9px 12px;font-size:.85rem;}
.filterbar select{padding-right:32px !important;}

/* ---------- estado vazio ---------- */
.empty{padding:40px 20px;text-align:center;color:var(--text-faint);font-size:.9rem;}
.empty .ico{width:46px;height:46px;border-radius:14px;background:var(--brass-soft);color:var(--brass);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.empty .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.empty strong{display:block;color:var(--text);font-family:var(--font-display);margin-bottom:4px;font-size:.98rem;}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:400;background:rgba(6,8,9,.66);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:18px;}
.modal-overlay.open{display:flex;animation:th-fade-in .18s ease;}
.modal{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;width:100%;max-width:520px;max-height:92vh;overflow:auto;box-shadow:var(--shadow-2);}
.modal.wide{max-width:780px;}
.modal-head{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--ink-2);z-index:2;}
.modal-head h3{margin:0;font-family:var(--font-display);font-size:1.05rem;}
.modal-close{margin-left:auto;background:none;border:none;color:var(--text-faint);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px 22px;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line-soft);background:var(--ink-2);position:sticky;bottom:0;}

/* ---------- cards de conta bancária ---------- */
.bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.bank-card{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;
  text-decoration:none;color:inherit;display:block;overflow:hidden;box-shadow:var(--shadow-1);transition:border-color .15s ease, transform .15s ease;}
.bank-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc, var(--brass));}
.bank-card:hover{border-color:var(--brass-line);transform:translateY(-1px);}
.bank-card .bc-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.bc-ico{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb, var(--acc, var(--brass)) 18%, transparent);color:var(--acc, var(--brass));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.85rem;flex-shrink:0;}
.bank-card .bc-name{font-family:var(--font-display);font-weight:600;font-size:.98rem;line-height:1.2;}
.bank-card .bc-meta{font-size:.74rem;color:var(--text-faint);}
.bank-card .bc-saldo{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.bank-card .bc-rows{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:.78rem;color:var(--text-faint);}
.bank-card .bc-rows b{display:block;font-family:var(--font-mono);font-weight:500;color:var(--text-soft);font-size:.82rem;}
.bank-card.add{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border-style:dashed;color:var(--text-faint);min-height:170px;cursor:pointer;background:transparent;}
.bank-card.add::before{display:none;}
.bank-card.add:hover{color:var(--brass-bright);}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--acc, var(--brass));vertical-align:0;margin-right:6px;}

.saldo-compare{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;}
.saldo-compare .op{color:var(--text-faint);font-family:var(--font-mono);}
.saldo-compare .cell .l{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);}
.saldo-compare .cell .v{font-family:var(--font-display);font-weight:600;font-size:1.3rem;font-variant-numeric:tabular-nums;margin-top:4px;}
.saldo-compare .cell .s{font-size:.72rem;color:var(--text-faint);margin-top:2px;}

/* ---------- lista de vencimentos ---------- */
.due-list{display:flex;flex-direction:column;}
.due-item{display:grid;grid-template-columns:54px 1fr auto auto;gap:14px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line-soft);}
.due-item:last-child{border-bottom:none;}
.due-date{text-align:center;border-radius:10px;background:var(--ink-3);padding:5px 0;line-height:1.1;}
.due-date .d{font-family:var(--font-display);font-weight:700;font-size:1.05rem;}
.due-date .m{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
.due-item.late .due-date{background:var(--danger-soft);color:var(--danger);}
.due-item.today .due-date{background:var(--warn-soft);color:var(--warn);}
.due-title{font-weight:500;font-size:.9rem;line-height:1.3;}
.due-title a{color:inherit;text-decoration:none;} .due-title a:hover{color:var(--brass-bright);}
.due-sub{font-size:.74rem;color:var(--text-faint);margin-top:2px;}
.due-val{font-family:var(--font-mono);font-size:.9rem;white-space:nowrap;}

/* ---------- gráfico (SVG gerado no servidor) ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible;}
.chart .grid-zero{stroke:var(--line);stroke-dasharray:3 4;}
.chart .area{fill:url(#gArea);}
.chart .line{fill:none;stroke:var(--brass-bright);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.chart .bar-ent{fill:var(--ok);opacity:.55;} .chart .bar-sai{fill:var(--danger);opacity:.5;}
.chart .tick{fill:var(--text-faint);font-family:var(--font-mono);font-size:10px;}
.chart .pt{fill:transparent;cursor:crosshair;} .chart .pt:hover{fill:var(--brass-bright);}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--text-faint);}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;}

/* ---------- barras horizontais (extrato por natureza) ---------- */
.hbar{height:6px;border-radius:6px;background:var(--ink-4);overflow:hidden;margin-top:6px;}
.hbar > span{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-bright));border-radius:6px;}
.hbar.neg > span{background:linear-gradient(90deg,#b9553d,var(--danger));}
.matrix td.cell{cursor:pointer;}
.matrix td.cell:hover{background:var(--brass-soft);}
.matrix td.zero{color:var(--text-faint);opacity:.5;}
.matrix th .swatch{margin-right:5px;}

/* ---------- avisos inline ---------- */
.callout{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--ink-2);font-size:.86rem;line-height:1.5;margin-bottom:16px;}
.callout .ci{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.callout .ci svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.callout.info{border-color:color-mix(in srgb, var(--info) 35%, transparent);background:var(--info-soft);} .callout.info .ci{color:var(--info);}
.callout.warn{border-color:color-mix(in srgb, var(--warn) 35%, transparent);background:var(--warn-soft);} .callout.warn .ci{color:var(--warn);}
.callout.ok{border-color:color-mix(in srgb, var(--ok) 35%, transparent);background:var(--ok-soft);} .callout.ok .ci{color:var(--ok);}
.callout.danger{border-color:color-mix(in srgb, var(--danger) 35%, transparent);background:var(--danger-soft);} .callout.danger .ci{color:var(--danger);}
.callout b{color:var(--text);}

/* ---------- conciliação ---------- */
.rec-row .sug{display:flex;flex-direction:column;gap:3px;min-width:220px;}
.rec-row .sug select{margin:0;padding:6px 30px 6px 10px;font-size:.8rem;}
.rec-row .sug .score{font-family:var(--font-mono);font-size:.66rem;color:var(--text-faint);}
.rec-row .memo{max-width:340px;}
.rec-accounts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.rec-acc{display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2);text-decoration:none;color:var(--text-soft);font-size:.85rem;}
.rec-acc:hover{border-color:var(--brass-line);color:var(--text);}
.rec-acc.active{border-color:var(--brass);color:var(--text);background:var(--brass-soft);}
.rec-acc .n{font-family:var(--font-mono);font-size:.72rem;padding:1px 7px;border-radius:999px;background:var(--warn-soft);color:var(--warn);}
.rec-acc .n.zero{background:var(--ok-soft);color:var(--ok);}

/* ---------- boleto / leitor ---------- */
.boleto-box{display:flex;gap:8px;align-items:stretch;}
.boleto-box input{margin:0;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;}
.boleto-msg{font-size:.78rem;margin:6px 0 14px;min-height:1em;}
.boleto-msg.ok{color:var(--ok);} .boleto-msg.err{color:var(--danger);}

/* ---------- disclosure (mais opções) ---------- */
details.more{border:1px dashed var(--line);border-radius:var(--radius-sm);padding:0 14px;margin-bottom:16px;}
details.more > summary{cursor:pointer;list-style:none;padding:11px 0;font-size:.84rem;color:var(--text-soft);font-family:var(--font-display);font-weight:600;display:flex;align-items:center;gap:8px;}
details.more > summary::-webkit-details-marker{display:none;}
details.more > summary::before{content:"+";font-family:var(--font-mono);color:var(--brass);width:12px;}
details.more[open] > summary::before{content:"−";}
details.more[open]{padding-bottom:4px;}

/* ---------- paginação ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--text-faint);}
.pager .btn-row a{min-width:34px;text-align:center;}

/* =========================================================================
   SHELL: menu lateral + barra superior + paleta de comandos
   ========================================================================= */
.sidebar{background:linear-gradient(180deg, var(--ink-2), color-mix(in srgb, var(--ink-2) 80%, var(--ink)));border-right-color:var(--line-soft);}
.sidebar nav a,.nav-group summary{font-size:.875rem;padding:9px 12px;position:relative;}
.sidebar nav a.active{background:var(--brass-soft);}
.sidebar nav > a.active::before{content:"";position:absolute;left:-18px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brass);}
.sidebar.collapsed nav > a.active::before{left:-12px;}
.nav-subitems{border-left:1px solid var(--line-soft);margin-left:22px;padding-left:10px;}
.nav-subitems a{font-size:.82rem;padding:7px 10px;}
.nav-subitems a.active{background:var(--brass-soft);}
.sidebar-divider{margin:20px 12px 6px;font-size:.62rem;}

.app-topbar{display:flex;align-items:center;gap:12px;margin:-10px 0 24px;min-height:40px;}
.topbar-crumb{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:8px;min-width:0;}
.topbar-crumb .tenant{color:var(--text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;}
.topbar-search{margin-left:auto;display:flex;align-items:center;gap:10px;width:min(360px, 40vw);padding:8px 12px;border-radius:10px;background:var(--ink-2);
  border:1px solid var(--line);color:var(--text-faint);font-size:.84rem;cursor:pointer;font-family:var(--font-body);text-align:left;}
.topbar-search:hover{border-color:var(--brass-line);color:var(--text-soft);}
.topbar-search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex-shrink:0;}
.topbar-search .grow{flex:1;}
kbd,.kbd{font-family:var(--font-mono);font-size:.68rem;padding:2px 6px;border-radius:5px;border:1px solid var(--line);background:var(--ink-3);color:var(--text-faint);}
.topbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 13px;border-radius:10px;border:1px solid var(--line);background:var(--ink-2);
  color:var(--text-soft);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;}
.topbar-btn:hover{border-color:var(--brass-line);color:var(--brass-bright);}
.topbar-btn.primary{background:var(--brass);border-color:var(--brass);color:#1c1400;}
.topbar-btn.primary:hover{background:var(--brass-bright);color:#1c1400;}
.topbar-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.topbar-user{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--ink-2);font-size:.8rem;color:var(--text-soft);}
.topbar-user .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,var(--brass-bright),var(--brass));color:#1c1400;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.8rem;}
body.pdv-page .app-topbar{display:none;}

.cmdk-overlay{position:fixed;inset:0;z-index:500;background:rgba(6,8,9,.6);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;}
.cmdk-overlay.open{display:flex;}
.cmdk{width:100%;max-width:560px;background:var(--ink-2);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2);overflow:hidden;}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft);}
.cmdk-input svg{width:18px;height:18px;fill:none;stroke:var(--text-faint);stroke-width:2;stroke-linecap:round;}
.cmdk-input input{margin:0;border:none;background:none;box-shadow:none !important;padding:4px 0;font-size:1rem;}
.cmdk-list{max-height:52vh;overflow:auto;padding:6px;}
.cmdk-group{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:10px 12px 4px;}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text-soft);text-decoration:none;font-size:.9rem;cursor:pointer;}
.cmdk-item .hint2{margin-left:auto;font-size:.72rem;color:var(--text-faint);}
.cmdk-item.sel{background:var(--brass-soft);color:var(--text);}
.cmdk-empty{padding:26px;text-align:center;color:var(--text-faint);font-size:.88rem;}
.cmdk-foot{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--line-soft);font-size:.72rem;color:var(--text-faint);}

/* ---------- toasts e confirmação no tema novo ---------- */
.th-toast{border-radius:12px;box-shadow:var(--shadow-2);}
.th-confirm-box{border-radius:16px;box-shadow:var(--shadow-2);}

/* ---------- responsivo ---------- */
@media (max-width:1200px){
  .grid-main{grid-template-columns:minmax(0,1fr);}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1024px){
  .app-topbar{margin:-6px 0 20px;padding-left:52px;}
  .topbar-crumb{display:none;}
  .topbar-search{width:auto;flex:1;}
}
@media (max-width:760px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .saldo-compare{grid-template-columns:1fr;text-align:left;}
  .saldo-compare .op{display:none;}
  .due-item{grid-template-columns:46px 1fr auto;}
  .due-item .due-actions{grid-column:2/-1;justify-self:start;}
  .page-head h1{font-size:1.3rem;}
  .kpi .value{font-size:1.2rem;}
}
@media (max-width:640px){
  .app-topbar{margin-top:-58px;padding-left:54px;min-height:42px;}
  .topbar-search .grow,.topbar-search kbd{display:none;}
  .topbar-search{flex:0 0 auto;width:40px;height:40px;justify-content:center;padding:0;margin-left:auto;}
  .topbar-user{display:none;}
  .topbar-btn .lbl{display:none;}
  .topbar-btn{width:40px;height:40px;padding:0;}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .filterbar .f{min-width:calc(50% - 5px);flex:1;}
  .modal-overlay{align-items:flex-end;padding:0;}
  .modal{border-radius:18px 18px 0 0;max-height:94vh;}
  .bank-grid{grid-template-columns:1fr;}
}
@media (max-width:420px){ .kpi-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} }

/* ícones SVG soltos dentro de rótulos/títulos ficam do tamanho do texto */
.kpi .label svg,.section-title svg,.panel-head svg,.badge svg,.page-kicker svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.badge .ic svg{width:11px;height:11px;}
/* gráfico: quando a projeção fica negativa, linha/área viram alerta */
.chart.neg .line{stroke:var(--danger);}
.chart.neg .area{fill:url(#gAreaNeg);}
.chart .grid-base{stroke:var(--line-soft);}
.chart .grid-zero{stroke:var(--danger);opacity:.45;}
.filterbar label.chip{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:.8rem;color:var(--text-soft);margin:0;}
.filterbar label.chip.active{color:var(--brass-bright);}
.bank-card .bc-rows > div{min-width:0;}
.bank-card .bc-rows b{white-space:nowrap;font-size:.78rem;}

/* checklist de primeiros passos */
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;}
.check-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);font-size:.85rem;background:var(--ink-3);}
.check-item:hover{border-color:var(--brass-line);}
.check-item .ck{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono);font-size:.7rem;background:var(--ink-4);color:var(--text-soft);}
.check-item.done{opacity:.6;background:transparent;}
.check-item.done .ck{background:var(--ok-soft);color:var(--ok);}
.check-item.done span:nth-child(2){text-decoration:line-through;}
.check-item .go{margin-left:auto;color:var(--brass);}
/* mapa de calor de horários */
.heat{display:grid;grid-template-columns:44px repeat(24,minmax(22px,1fr));gap:3px;font-size:.66rem;}
.heat .h{font-family:var(--font-mono);color:var(--text-faint);text-align:center;}
.heat .d{font-family:var(--font-display);font-weight:600;color:var(--text-soft);display:flex;align-items:center;}
.heat .c{aspect-ratio:1;border-radius:4px;background:color-mix(in srgb, var(--brass) calc(var(--v) * 100%), var(--ink-3));min-height:18px;}
.heat .c:hover{outline:1px solid var(--brass-bright);}

/* sininho */
.bell-wrap{position:relative;}
.bell-btn{width:38px;padding:0;position:relative;}
.bell-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--warn);color:#1c1400;font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--font-mono);}
.bell-count.danger{background:var(--danger);color:#fff;}
.bell-pop{display:none;position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-2);z-index:120;}
.bell-pop.open{display:block;animation:th-fade-in .15s ease;}
.bell-head{padding:12px 16px;border-bottom:1px solid var(--line-soft);font-family:var(--font-display);font-weight:600;font-size:.9rem;display:flex;gap:8px;align-items:center;}
.bell-item{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--text);}
.bell-item:hover{background:var(--ink-3);}
.bell-item b{display:block;font-weight:500;font-size:.86rem;line-height:1.3;}
.bell-item small{display:block;color:var(--text-faint);font-size:.74rem;margin-top:2px;}
.bell-item .bi-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--info);}
.bell-item.danger .bi-dot{background:var(--danger);} .bell-item.warn .bi-dot{background:var(--warn);}
.bell-empty{padding:22px 16px;color:var(--text-faint);font-size:.85rem;text-align:center;}
@media (max-width:640px){ .bell-btn{width:40px;height:40px;} .bell-pop{position:fixed;left:12px;right:12px;top:64px;width:auto;} }

/* botão "instalar como app" (PWA) no rodapé do menu */
.install-app-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:10px;padding:8px 10px;
  border:1px dashed var(--line-strong,var(--line));border-radius:10px;background:transparent;color:var(--text-2,var(--muted));font:inherit;font-size:.78rem;cursor:pointer}
.install-app-btn:hover{color:var(--gold,var(--accent));border-color:var(--gold,var(--accent))}
.install-app-btn[hidden]{display:none}
.sidebar.collapsed .install-app-btn .nav-label,body.sidebar-collapsed .install-app-btn .nav-label{display:none}
@media (max-width:640px){
  .panel-head{flex-wrap:wrap;row-gap:6px;}
}

/* avisos em bloco dentro das páginas */
.alert{border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:12px;padding:13px 16px;font-size:.9rem;background:var(--ink-2);color:var(--text)}
.alert a{color:var(--brass-bright)}
.alert-danger{border-left-color:var(--danger);background:color-mix(in srgb, var(--danger) 7%, var(--ink-2))}
.alert-warn{border-left-color:var(--warn)}
.alert-info{border-left-color:#6ea8d8}

/* ---------- menu por setor: mais respiro e leitura ---------- */
.sidebar-divider{display:flex;align-items:center;gap:10px;margin:22px 12px 8px;font-size:.6rem;letter-spacing:.14em;color:var(--text-faint);}
.sidebar-divider::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.sidebar.collapsed .sidebar-divider::after{display:none;}
.sidebar-scroll{padding-bottom:22px;}
.sidebar-footer{border-top:1px solid var(--line-soft);padding-top:10px;background:var(--ink-2);}
.nav-group[open] > summary{color:var(--text);}
.nav-group[open] > summary .nav-icon{color:var(--brass-bright);}
.nav-subitems{margin-top:2px;margin-bottom:8px;}
.nav-sub-title{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);padding:9px 10px 3px;opacity:.8;}
/* menu recolhido: nome da tela ao passar o mouse, e grupo com item ativo marcado */
.sidebar.collapsed nav > a, .sidebar.collapsed .nav-group summary{position:relative;}
.sidebar.collapsed{overflow:visible;}
.sidebar.collapsed nav > a[title]:hover::after, .sidebar.collapsed .nav-group summary[title]:hover::after{
  content:attr(title);position:fixed;left:74px;transform:translateY(-2px);z-index:400;white-space:nowrap;pointer-events:none;
  background:var(--ink-3);border:1px solid var(--line);color:var(--text);font-size:.78rem;font-weight:500;padding:6px 11px;border-radius:8px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);}
.sidebar.collapsed .nav-group:has(a.active) summary{background:var(--brass-soft);color:var(--brass-bright);}