:root{
  /* Paleta MLG — branco, azul-marinho e laranja da logo (#173D50 / #E1683D).
     Mantidos os NOMES das variáveis do design system original (--amber,
     --emerald, --coral, --violet, --teal) pra não precisar tocar nas ~200
     referências espalhadas pelo resto deste arquivo — só os VALORES mudaram,
     todos remapeados pra dentro da família branco/laranja/azul. */
  --bg:#F4F6F9;
  --bg-alt:#EAEFF3;
  --surface:#FFFFFF;
  --surface-2:#E4ECF2;
  --paper:#E9E7DD;
  --ink:#20283A;
  --emerald:#1D5C82;
  --emerald-dim:rgba(29,92,130,0.12);
  --amber:#E1683D;
  --amber-dim:rgba(225,104,61,0.14);
  --coral:#B23B22;
  --coral-dim:rgba(178,59,34,0.12);
  --teal:#173D50;
  --violet:#2E6E93;
  --violet-dim:rgba(46,110,147,0.14);
  --text:#173D50;
  --text-muted:#6B7A88;
  --hair:rgba(23,61,80,0.13);
  --radius:18px;
  --shadow:0 20px 50px -25px rgba(23,61,80,0.22);
  --rail-w:76px;
  --sidebar-w:256px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(225,104,61,0.08), transparent 60%),
    radial-gradient(900px 500px at 5% 10%, rgba(23,61,80,0.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
::selection{background:var(--amber-dim);}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:4px;}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Fraunces',serif;}
code{background:rgba(255,255,255,0.06); border:1px solid var(--hair); border-radius:4px; padding:1px 5px; font-family:'IBM Plex Mono',monospace; font-size:0.92em;}

/* ---------- Auth overlay ----------
   Tela dividida: painel com o degradê da marca de um lado (logo grande +
   frase + o que o sistema faz), formulário do outro — mesma linguagem
   visual já usada no cabeçalho da sidebar e das páginas internas. */
#authOverlay{position:fixed; inset:0; z-index:100; display:flex; background:var(--surface);}

.auth-visual{
  flex:1 1 45%; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  padding:48px; color:#fff;
  background:linear-gradient(155deg, var(--teal) 0%, var(--teal) 58%, var(--amber) 150%);
}
.auth-visual-glow{
  position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(480px 480px at 12% 10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(560px 560px at 90% 95%, rgba(225,104,61,.35), transparent 60%);
}
.auth-visual-inner{position:relative; max-width:340px; text-align:center; animation:riseIn .6s ease both;}
.auth-visual .auth-logo{display:flex; justify-content:center; margin-bottom:18px;}
.auth-visual .auth-logo img{width:76px; height:76px; object-fit:contain; border-radius:18px; background:#fff; padding:10px; box-shadow:0 10px 26px -12px rgba(0,0,0,.45);}
.auth-visual-name{font-size:26px; font-weight:600; letter-spacing:-.01em;}
.auth-visual-tag{font-family:'Raleway',sans-serif; font-weight:400; font-size:12.5px; color:rgba(255,255,255,.75); letter-spacing:.14em; text-transform:uppercase; margin-top:4px;}
.auth-visual-quote{font-family:'Fraunces',serif; font-size:19px; line-height:1.5; font-weight:500; margin:26px 0 28px; color:rgba(255,255,255,.96);}
.auth-visual-list{list-style:none; margin:0; padding:0; text-align:left; display:inline-flex; flex-direction:column; gap:11px;}
.auth-visual-list li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.9);}
.auth-visual-list svg{flex-shrink:0; width:20px; height:20px; padding:3px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;}

.auth-panel{
  flex:1 1 55%; display:flex; align-items:center; justify-content:center; padding:24px; min-width:0;
  background:radial-gradient(900px 500px at 90% 100%, rgba(23,61,80,.05), transparent 55%);
}
.auth-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--hair); border-radius:22px; padding:34px 32px; box-shadow:var(--shadow); animation:riseIn .5s ease both;}
.auth-card-title{font-size:21px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em;}
.auth-card-subtitle{margin:0 0 20px; color:var(--text-muted); font-size:13px; line-height:1.5;}
.auth-tabs{display:flex; background:var(--bg-alt); border-radius:12px; padding:4px; margin-bottom:22px; border:1px solid var(--hair);}
.auth-tab{flex:1; text-align:center; padding:9px 0; font-size:13.5px; font-weight:600; color:var(--text-muted); cursor:pointer; border-radius:9px; transition:all .2s ease;}
/* Fundo branco + sombra em vez de --surface-2 (quase idêntico ao --bg-alt
   do trilho — dava pra confundir qual dos dois estava selecionado). */
.auth-tab.active{background:#fff; color:var(--text); box-shadow:0 2px 7px -1px rgba(23,61,80,.22);}
.auth-form{display:none;}
.auth-form.active{display:block; animation:riseIn .3s ease both;}
.auth-error{background:var(--coral-dim); color:#8a331f; font-size:12.5px; padding:10px 12px; border-radius:10px; margin-top:14px; display:none;}
.auth-error.show{display:block;}
.auth-note{font-size:11.5px; color:var(--text-muted); margin-top:18px; text-align:center; line-height:1.5;}
.link-btn{background:none; border:none; padding:0; color:var(--amber); font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.link-btn:hover{color:var(--text);}

.auth-hint{
  display:flex; gap:10px; align-items:flex-start; background:var(--bg-alt); border:1px solid var(--hair);
  border-radius:12px; padding:13px 15px; margin:0 0 20px; font-size:13px; color:var(--text-muted); line-height:1.55;
}
.auth-hint .ico{font-size:17px; line-height:1.3; flex-shrink:0;}
.auth-hint b{color:var(--text); font-weight:600;}

.auth-success{text-align:center; padding:10px 4px 22px;}
.auth-success .ico{font-size:44px; line-height:1; margin-bottom:14px; animation:stampIn .4s ease both;}
.auth-success .title{font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin:0 0 10px; color:var(--text);}
.auth-success .desc{font-size:13.5px; color:var(--text-muted); line-height:1.6; margin:0;}

.btn-spinner{display:inline-block; flex-shrink:0; vertical-align:-3px; animation:spin .8s linear infinite;}
@media (prefers-reduced-motion:reduce){.btn-spinner{animation-duration:2.4s;}}
@keyframes spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}

@media (max-width:860px){
  /* Sem largura pra dividir em duas colunas — o painel de marca vira uma
     faixa curta no topo, formulário embaixo, tela toda rolável. */
  #authOverlay{flex-direction:column; overflow-y:auto; height:100dvh;}
  .auth-visual{flex:0 0 auto; padding:32px 28px;}
  .auth-visual-quote{font-size:16.5px; margin:18px 0 20px;}
  .auth-visual-list{display:none;}
  .auth-panel{flex:1 1 auto; padding:28px 20px 40px;}
}

/* ---------- App shell ----------
   A sidebar fica fixa por cima do conteúdo (position:fixed) como uma
   trilha fina — só a logo e os ícones do menu aparecem (--rail-w). Passar
   o mouse (ou focar por teclado) expande ela por cima do conteúdo, sem
   empurrar nada (:hover/:focus-within, puramente CSS). O botão de pino
   (side-brand) é o único bit com estado JS: fixa a sidebar expandida pra
   quem preferir ela sempre aberta. */
.shell{display:none;}
.shell.visible{display:block;}
.app-shell{min-height:100vh; padding-left:var(--rail-w); visibility:hidden; transition:padding-left .26s cubic-bezier(.4,0,.2,1);}
.app-shell.ready{visibility:visible;}
/* Fixada (pino), a sidebar deixa de ser só um overlay por cima do
   conteúdo — o conteúdo abre espaço de verdade pra largura cheia, senão
   ela fica cobrindo/cortando a tela pra sempre (só faz sentido flutuar por
   cima no hover passageiro). */
.app-shell.sidebar-pinned{padding-left:var(--sidebar-w);}
.sidebar{
  width:var(--rail-w); border-right:1px solid var(--hair); padding:26px 10px; display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh; z-index:30; overflow:hidden;
  background:var(--bg);
  transition:width .26s cubic-bezier(.4,0,.2,1), box-shadow .26s ease, padding .26s cubic-bezier(.4,0,.2,1);
}
.sidebar:hover, .sidebar:focus-within, .sidebar.pinned{
  width:var(--sidebar-w); padding:26px 16px; overflow-y:auto; box-shadow:0 20px 60px -22px rgba(23,61,80,.35);
}
.sidebar, .sidebar *{white-space:nowrap;}

/* Tudo que só cabe/faz sentido com a sidebar expandida (rótulos, textos,
   o pino) — invisível e fora do fluxo de clique na trilha recolhida. Usa
   max-width:0 (não só opacity:0): sem isso o texto escondido continuava
   ocupando espaço e empurrava/cortava o ícone ao lado dele na trilha
   estreita, com justify-content:center centralizando um bloco maior que
   a trilha. */
.sb-expanded{display:inline-block; max-width:0; overflow:hidden; opacity:0; pointer-events:none; vertical-align:middle; flex-shrink:0; transition:opacity .12s ease, max-width .22s cubic-bezier(.4,0,.2,1);}
.sidebar:hover .sb-expanded, .sidebar:focus-within .sb-expanded, .sidebar.pinned .sb-expanded{
  max-width:220px; opacity:1; pointer-events:auto; transition:opacity .18s ease .08s, max-width .26s cubic-bezier(.4,0,.2,1);
}
/* .logout-btn e .dev-credit não são item de flex-row (ficam soltos dentro
   de .side-user, que é bloco normal) — como inline-block eles tentavam
   ficar lado a lado na mesma linha (e o white-space:nowrap do trilho
   impedia a quebra), vazando um pedaço do texto pra fora cortado. Bloco
   cheio resolve, sem perder a transição de largura/opacidade. */
.logout-btn.sb-expanded, .dev-credit.sb-expanded{display:block; width:100%;}

.sidebar-pin-btn{
  margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.14); color:#fff; align-items:center; justify-content:center; display:flex;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.sidebar-pin-btn:hover{background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.5);}
.sidebar-pin-btn.active{color:var(--teal); background:#fff; border-color:transparent;}

/* Cabeçalho com degradê da marca (navy → laranja) — na trilha recolhida
   (76px) só a fatia inicial do degradê aparece atrás da logo; ao expandir,
   o resto do degradê "revela", reforçando o gesto de abrir o menu. */
.side-brand{
  display:flex; align-items:center; gap:12px; padding:14px 10px; margin:-26px -10px 16px;
  border-radius:0 0 18px 18px;
  background:linear-gradient(120deg, var(--teal) 0%, var(--teal) 45%, var(--amber) 130%);
  box-shadow:0 10px 24px -14px rgba(23,61,80,.55);
  transition:margin .26s cubic-bezier(.4,0,.2,1), padding .26s cubic-bezier(.4,0,.2,1);
}
.sidebar:hover .side-brand, .sidebar:focus-within .side-brand, .sidebar.pinned .side-brand{margin:-26px -16px 18px; padding:16px;}
.logo-slot{width:44px; height:44px; border-radius:12px; background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; overflow:hidden; position:relative; text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,.22); transition:transform .2s ease;}
.logo-slot:hover{transform:scale(1.05);}
.logo-slot img{width:100%; height:100%; object-fit:cover;}
.brand-name{font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:#fff;}
.brand-tag{color:rgba(255,255,255,.72); font-size:11px; margin-top:2px;}

.nav-section-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:14px 12px 6px;}
.side-nav{display:flex; flex-direction:column; gap:3px;}
.nav-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; border:none; background:transparent; color:var(--text-muted); font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; cursor:pointer; text-align:left; width:100%; transition:background .15s ease, color .15s ease; text-decoration:none;}
.sidebar:not(:hover):not(:focus-within):not(.pinned) .nav-item{justify-content:center; padding-left:0; padding-right:0;}
.nav-item svg{flex-shrink:0; opacity:.85;}
.nav-item:hover:not(.disabled){background:var(--surface); color:var(--text);}
.nav-item.active{background:var(--surface-2); color:var(--text); font-weight:600; box-shadow:inset 3px 0 0 var(--amber);}
.sidebar:not(:hover):not(:focus-within):not(.pinned) .nav-item.active{box-shadow:none; background:var(--amber-dim); color:var(--amber);}
.nav-item.disabled{opacity:.4; cursor:default;}
.nav-soon{margin-left:auto; font-size:9px; text-transform:uppercase; letter-spacing:.05em; background:var(--hair); padding:2px 6px; border-radius:100px;}
.nav-spacer{flex:0 0 28px;}

.side-user{border-top:1px solid var(--hair); padding-top:14px; margin-top:10px;}
.user-badge{display:flex; align-items:center; gap:10px; padding:4px 4px 12px;}
.sidebar:not(:hover):not(:focus-within):not(.pinned) .user-badge{justify-content:center;}
.user-avatar{width:32px; height:32px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
.user-meta{min-width:0;}
.user-meta .n{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-meta .t{font-size:11px; color:var(--text-muted);}
.logout-btn{width:100%; background:transparent; border:1px solid var(--hair); color:var(--text-muted); cursor:pointer; font-size:12.5px; padding:9px; border-radius:10px; font-weight:600;}
.logout-btn:hover{color:var(--coral); border-color:var(--coral); background:var(--coral-dim);}
.dev-credit{font-size:10.5px; color:var(--text-muted); margin-top:12px; letter-spacing:.02em;}

/* Piso de 1184px (mesma largura de sempre em notebook — 80vw fica abaixo
   disso em telas até ~1480px de largura, então o clamp() nem entra em ação
   aí) e teto de 1800px pra não esticar linhas de leitura/tabela ao infinito
   num monitor ultra largo. Entre os dois, cresce com a tela. */
.content{padding:30px 36px 80px; min-width:0; max-width:clamp(1184px, 80vw, 1800px); margin:0 auto;}
.page{display:none;}
.page.active{display:block; animation:riseIn .4s ease both;}
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--hair); position:relative;
}
.page-head::after{content:''; position:absolute; left:0; bottom:-1px; width:130px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--amber) 0%, var(--teal) 55%, transparent 100%); animation:pageHeadSweep 3.4s ease-in-out infinite;}
@keyframes pageHeadSweep{0%, 100%{left:0;} 50%{left:calc(100% - 130px);}}
@media (prefers-reduced-motion:reduce){.page-head::after{animation:none;}}
.page-head-row{display:flex; align-items:flex-start; gap:14px;}
.page-head-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; margin-top:1px; color:#fff;
  background:linear-gradient(135deg, var(--teal), var(--amber));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -9px rgba(23,61,80,.55);
  transition:transform .2s ease;
}
.page-head:hover .page-head-icon{transform:scale(1.06) rotate(-2deg);}
.page-head h1{font-size:26px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em;}
.page-head p{margin:0; color:var(--text-muted); font-size:13.5px; max-width:58ch; line-height:1.55;}
.today-pill{
  font-size:12px; color:var(--text-muted); padding:8px 14px 8px 12px; border:1px solid var(--hair);
  border-radius:100px; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); box-shadow:0 1px 3px rgba(23,61,80,.05); margin-bottom:2px;
}
.today-pill svg{opacity:.65; flex-shrink:0;}
.today-pill-dot{width:6px; height:6px; border-radius:50%; background:var(--emerald); flex-shrink:0; position:relative;}
.today-pill-dot::after{content:''; position:absolute; inset:-3px; border-radius:50%; background:var(--emerald); opacity:.35; animation:pillPulse 2.2s ease-in-out infinite;}
@keyframes pillPulse{0%,100%{transform:scale(1); opacity:.35;} 50%{transform:scale(1.8); opacity:0;}}

@media (max-width:960px){
  /* Abaixo do notebook o menu já vira uma barra horizontal — sem trilha,
     sem hover-pra-expandir, sem pino: fica sempre visível por completo,
     igual sempre foi. */
  .app-shell, .app-shell.sidebar-pinned{padding-left:0;}
  .sidebar, .sidebar:hover, .sidebar:focus-within, .sidebar.pinned{
    position:relative; top:auto; left:auto; width:auto; height:auto; box-shadow:none;
    flex-direction:row; align-items:center; padding:14px 16px; overflow-x:auto; overflow-y:visible; gap:14px;
  }
  .side-brand{margin:0; padding:6px 10px; border-radius:12px; box-shadow:none; flex-shrink:0;}
  .nav-section-label{display:none;}
  .side-nav{flex-direction:row; flex:0;}
  .nav-item, .sidebar:not(:hover) .nav-item{white-space:nowrap; justify-content:flex-start; padding:10px 12px;}
  .nav-spacer{display:none;}
  .side-user{border-top:none; margin-top:0; padding-top:0; display:flex; align-items:center; flex-shrink:0;}
  .logout-btn{width:auto; padding:9px 12px;}
  .content{padding:22px 18px 60px;}
  .sb-expanded, .sidebar .sb-expanded{opacity:1 !important; pointer-events:auto !important;}
  .sidebar-pin-btn{display:none;}
}

/* ---------- Dashboard (Início) ----------
   Mesma linguagem do login/sidebar (degradê navy→laranja) aplicada na
   tela de entrada do sistema — o hero é o único lugar fora do login que
   usa o degradê em área grande, pra marcar que é a "porta de entrada". */
.dash-hero{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:32px 34px; margin-bottom:26px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  color:#fff; background:linear-gradient(120deg, var(--teal) 0%, var(--teal) 60%, var(--amber) 160%);
  box-shadow:0 18px 40px -22px rgba(23,61,80,.55);
}
.dash-hero-glow{
  position:absolute; inset:-30%; pointer-events:none;
  background:
    radial-gradient(420px 420px at 8% 15%, rgba(255,255,255,.13), transparent 60%),
    radial-gradient(480px 480px at 96% 100%, rgba(225,104,61,.4), transparent 60%);
}
.dash-hero-text{position:relative; min-width:0;}
.dash-hero-pill{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.92); margin-bottom:14px;}
.dash-hero-pill svg{opacity:.85;}
.dash-hero-pill .today-pill-dot{background:#fff;}
.dash-hero-pill .today-pill-dot::after{background:#fff;}
.dash-hero-text h1{font-size:28px; margin:0 0 6px; letter-spacing:-.01em;}
.dash-hero-text p{margin:0; color:rgba(255,255,255,.85); font-size:14px; max-width:52ch;}
.dash-hero-actions{position:relative; display:flex; gap:12px; flex-wrap:wrap;}
.dash-hero-btn{
  display:inline-flex; align-items:center; gap:10px; padding:9px 20px 9px 9px; border-radius:100px; font-size:14px; font-weight:700;
  text-decoration:none; background:#fff; color:var(--teal); box-shadow:0 12px 26px -14px rgba(8,20,28,.6);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.dash-hero-btn-icon{width:26px; height:26px; border-radius:50%; background:var(--amber-dim); color:var(--amber); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.dash-hero-btn:hover{transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(8,20,28,.7);}
.dash-hero-btn.ghost{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none;}
.dash-hero-btn.ghost .dash-hero-btn-icon{background:rgba(255,255,255,.18); color:#fff;}
.dash-hero-btn.ghost:hover{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6);}
@media (max-width:640px){ .dash-hero{padding:26px 22px;} .dash-hero-text h1{font-size:24px;} }

/* Painéis do dashboard: largura igual pra qualquer um poder ocupar
   qualquer posição ao ser arrastado (ver .drag-handle/makeSortable em
   ui.js) — quem tem mais linhas (Próximos vencimentos) só fica mais alto,
   sem precisar de tratamento especial de coluna. */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:22px; align-items:start;}
.dash-hint{display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:12.5px; margin:0 0 16px;}
.dash-hint svg{opacity:.6;}

.mini-progress{height:5px; border-radius:3px; background:var(--bg-alt); margin-top:8px; overflow:hidden;}
.mini-progress-fill{height:100%; border-radius:3px; background:linear-gradient(90deg, var(--teal), var(--amber));}

/* ---------- Arrastar para reorganizar (dashboard) ---------- */
.drag-handle{
  position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  background:var(--bg-alt); cursor:grab; touch-action:none; z-index:2;
  transition:background .15s ease, color .15s ease;
}
.drag-handle:hover{background:var(--surface-2); color:var(--text);}
.drag-handle:active{cursor:grabbing;}
[data-widget-id]{position:relative;}
.stat-card .drag-handle{background:rgba(255,255,255,.6); backdrop-filter:blur(2px);}
[data-widget-id].dragging{
  position:fixed; z-index:999; pointer-events:none; cursor:grabbing;
  box-shadow:0 24px 48px -18px rgba(23,61,80,.5); transform:rotate(-1.5deg); opacity:.97;
}
.drag-placeholder{border:2px dashed var(--amber); border-radius:var(--radius); background:var(--amber-dim); opacity:.5;}

/* ---------- Cards / stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;}
.stat-card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:18px 20px; position:relative; overflow:hidden;}
.stat-card::after{content:''; position:absolute; left:20px; right:20px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--bar,var(--amber));}
.stat-card-link{display:block; text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease;}
.stat-card-link:hover{transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(23,61,80,.35);}
.stat-card-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--bar,var(--amber)); margin-bottom:12px; box-shadow:0 6px 14px -7px rgba(23,61,80,.5); transition:transform .18s ease;}
.stat-card-link:hover .stat-card-icon{transform:scale(1.07) rotate(-3deg);}
.stat-label{font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;}
.stat-value{font-size:23px; font-weight:600; letter-spacing:-.01em;}
.stat-sub{font-size:12px; color:var(--text-muted); margin-top:6px;}
@media (max-width:640px){ .stats{grid-template-columns:repeat(2,1fr);} }
.stats3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px;}
@media (max-width:640px){ .stats3{grid-template-columns:1fr;} }

.card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);}
.card h2{margin:0 0 4px; font-size:19px; font-weight:600; display:flex; align-items:center; gap:9px;}
.panel-icon{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.panel-icon-teal{background:var(--teal);}
.panel-icon-violet{background:var(--violet);}
.panel-icon-blue{background:var(--emerald);}
.card .hint{color:var(--text-muted); font-size:13px; margin:0 0 20px;}

/* ---------- Forms ---------- */
/* Formulário um pouco mais largo (era 400px fixo, apertava linhas com
   vários campos lado a lado, como os contatos do cliente); a lista ao lado
   ganha o espaço restante mas com teto (max-width no filho) pra não esticar
   feio em telas bem largas. */
.cad-grid{display:grid; grid-template-columns:460px 1fr; gap:22px; align-items:start;}
.cad-grid > .card:not(.form-card){max-width:640px;}
@media (max-width:960px){ .cad-grid{grid-template-columns:1fr;} .cad-grid > .card:not(.form-card){max-width:none;} }

/* Cada contato do cliente vira um bloco próprio — nome em cima (linha
   inteira, nomes longos cabem), telefone/cargo embaixo lado a lado. Antes
   os três campos disputavam uma única linha de ~400px e ficavam
   ilegíveis. */
.cli-contato-row{border:1px solid var(--hair); background:var(--bg-alt); border-radius:12px; padding:12px 14px 14px; margin-bottom:10px;}
.cli-contato-row-top{display:flex; align-items:flex-end; gap:10px;}
.cli-contato-row-top > div{flex:1; min-width:0;}
.cli-contato-row-top .cc-remove{flex-shrink:0; padding:11px 12px;}
.cli-contato-row .row-2{margin-top:12px;}
label{display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:6px; margin-top:16px;}
label:first-of-type{margin-top:0;}
input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], select, textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--hair); color:var(--text);
  padding:11px 12px; border-radius:10px; font-size:14.5px; font-family:'Inter',sans-serif; appearance:none;
}
textarea{resize:vertical; min-height:70px; line-height:1.5;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7A88' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;}
input:focus, select:focus, textarea:focus{border-color:var(--amber);}
input.input-invalid{border-color:var(--coral);}
.password-field{position:relative;}
.password-field input{padding-right:42px;}
.password-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text-muted); cursor:pointer; border-radius:7px; padding:0;
  transition:color .15s ease, background .15s ease;
}
.password-toggle:hover{color:var(--amber); background:var(--amber-dim);}
.field-error-msg{font-size:12px; color:var(--coral); margin-top:6px; display:none;}
.field-error-msg.show{display:block;}
.required-mark{color:var(--coral); margin-left:2px;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.filtros-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:14px; align-items:end;}
.filtros-grid label{margin-top:0;}
.filtros-grid input, .filtros-grid select{width:100%;}
@media (max-width:900px){ .filtros-grid{grid-template-columns:1fr 1fr;} }
.check-row{display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px 14px; background:var(--bg-alt); border:1px solid var(--hair); border-radius:12px;}
.check-row input[type=checkbox]{width:17px; height:17px; accent-color:var(--amber); margin:0;}
.check-row label{margin:0; font-size:13.5px; color:var(--text); cursor:pointer;}
.sub-fields{display:none; margin-top:12px; padding:14px; border-left:2px solid var(--amber); background:rgba(231,185,92,0.05); border-radius:0 12px 12px 0;}
.sub-fields.show{display:block;}

.btn{appearance:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; border-radius:10px; padding:13px 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s ease, filter .15s ease;}
.btn:active{transform:scale(.98);}
.btn-primary{background:linear-gradient(135deg, var(--amber), #c2502a); color:#fff; width:100%; margin-top:22px;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-emerald{background:linear-gradient(135deg, var(--emerald), #133f5a); color:#fff;}
.btn-emerald:hover{filter:brightness(1.08);}
.btn-coral{background:transparent; border:1px solid var(--coral); color:var(--coral);}
.btn-coral:hover{background:var(--coral-dim);}
/* Usado em ~19 lugares (editar, cancelar edição, ações secundárias) mas nunca
   tinha estilo próprio — caía no botão branco padrão do navegador. */
.btn-ghost{background:var(--surface-2); border:1px solid var(--hair); color:var(--text);}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber); background:var(--amber-dim);}
.btn-danger{background:var(--coral); color:#fff;}
.btn-danger:hover{background:#96311c;}
.btn-sm{padding:8px 12px; font-size:12.5px; width:auto; margin-top:0;}

/* ---------- Modal de confirmação (substitui o confirm() nativo do navegador) ---------- */
.confirm-overlay{display:none; position:fixed; inset:0; background:rgba(12,26,36,0.6); backdrop-filter:blur(3px); z-index:1100; align-items:center; justify-content:center; padding:24px;}
.confirm-card{width:100%; max-width:420px; background:var(--surface); border-radius:22px; box-shadow:0 30px 70px -20px rgba(12,26,36,0.5); padding:34px 32px; animation:modalPop .28s cubic-bezier(.2,.9,.3,1.2) both; text-align:center;}
.confirm-icon{width:56px; height:56px; border-radius:50%; background:var(--amber); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 8px 20px -6px rgba(225,104,61,0.55);}

/* Tabela "de relatório" pra parcelas/despesas — cada linha discriminada
   em colunas (nem uma parcela única vira uma linha vaga de texto corrido),
   mesma ideia do preview de "Aprovar orçamento?" só que com mais
   respiro e uma coluna de ações. */
.parcelas-table{width:100%; table-layout:fixed; border-collapse:collapse; font-size:13.5px;}
.parcelas-table th{text-align:left; padding:8px 10px; color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; border-bottom:1.5px solid var(--hair); white-space:nowrap;}
.parcelas-table td{padding:12px 10px; border-bottom:1px solid var(--hair); vertical-align:middle; overflow:hidden;}
.parcelas-table tbody tr:last-child td{border-bottom:none;}
.parcelas-table tbody tr:hover td{background:var(--bg-alt);}
/* Larguras fixas por coluna (Item/Parcela | Valor | Vencimento | Status |
   Ações), sempre nessa ordem nas duas telas — evita que um nome de
   indicador/prestador comprido esprema a coluna e quebre em 3 linhas. */
.parcelas-table th:nth-child(1), .parcelas-table td:nth-child(1){width:30%;}
.parcelas-table th:nth-child(2), .parcelas-table td:nth-child(2){width:15%;}
.parcelas-table th:nth-child(3), .parcelas-table td:nth-child(3){width:19%;}
.parcelas-table th:nth-child(4), .parcelas-table td:nth-child(4){width:14%;}
.parcelas-table th:nth-child(5), .parcelas-table td:nth-child(5){width:22%;}
.parcelas-table .col-acoes{text-align:right; white-space:nowrap;}
.parcelas-table .col-acoes .btn{margin-left:8px;}
@media (max-width:960px){ .parcelas-table{table-layout:auto;} }
.despesa-grupo{margin-bottom:22px;}
.despesa-grupo:last-child{margin-bottom:0;}
.despesa-grupo-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; background:var(--bg-alt); border:1px solid var(--hair); border-bottom:none; border-radius:12px 12px 0 0; padding:12px 14px;}
.badge-parcelas{display:inline-flex; align-items:center; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:100px; background:var(--violet-dim); color:var(--violet); vertical-align:middle; margin-left:2px;}
.despesa-grupo-head + .parcelas-table{border:1px solid var(--hair); border-top:none; border-radius:0 0 12px 12px;}
.despesa-grupo-head + .parcelas-table th{padding-left:24px;}
.despesa-grupo-head + .parcelas-table td:first-child{padding-left:24px; color:var(--text-muted);}
.confirm-titulo{font-family:'Fraunces',serif; font-size:21px; font-weight:600; margin-bottom:10px;}
.confirm-mensagem{font-size:13.5px; color:var(--text-muted); line-height:1.6; margin-bottom:26px;}
.confirm-mensagem:empty{display:none;}

/* Lista de campos do modal de "Detalhes" (parcela/despesa) — label à
   esquerda, valor à direita, uma linha por informação. Bem mais organizado
   que o texto corrido que existia antes dentro da própria linha da lista. */
.detalhe-lista{text-align:left; margin-bottom:22px; border:1px solid var(--hair); border-radius:12px; padding:4px 16px; background:var(--bg-alt);}
.detalhe-linha{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--hair);}
.detalhe-linha:last-child{border-bottom:none;}
.detalhe-label{color:var(--text-muted); font-size:12.5px; flex-shrink:0; padding-top:1px;}
.detalhe-valor{font-weight:600; font-size:13.5px; text-align:right; overflow-wrap:break-word; min-width:0;}
.confirm-acoes{display:flex; gap:10px; justify-content:center;}
.confirm-acoes .btn{flex:1;}
@keyframes modalPop{from{opacity:0; transform:translateY(8px) scale(.94);} to{opacity:1; transform:translateY(0) scale(1);}}

/* ---------- Toast (substitui o alert() nativo) ---------- */
.toast-host{position:fixed; bottom:24px; right:24px; z-index:1300; display:flex; flex-direction:column-reverse; gap:10px; max-width:min(380px, calc(100vw - 48px));}
.toast{
  display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--hair); border-left:4px solid var(--coral);
  border-radius:12px; padding:14px 14px 14px 16px; box-shadow:0 18px 44px -16px rgba(23,61,80,.45);
  font-size:13.5px; color:var(--text); line-height:1.5;
  opacity:0; transform:translateY(10px) scale(.97); transition:opacity .2s ease, transform .2s ease;
}
.toast.show{opacity:1; transform:translateY(0) scale(1);}
.toast-icon{color:var(--coral); flex-shrink:0; margin-top:1px;}
.toast-success{border-left-color:var(--emerald);}
.toast-success .toast-icon{color:var(--emerald);}
.toast-msg{flex:1; overflow-wrap:break-word;}
.toast-close{background:none; border:none; color:var(--text-muted); cursor:pointer; padding:0 0 0 4px; font-size:12px; flex-shrink:0; line-height:1.5;}
.toast-close:hover{color:var(--text);}
@media (max-width:640px){ .toast-host{left:16px; right:16px; max-width:none;} }

.preview-line{margin-top:20px; padding:14px 16px; background:var(--bg-alt); border-radius:12px; border:1px solid var(--hair); font-size:13px; color:var(--text-muted); overflow-wrap:break-word;}
.preview-line b{color:var(--text); font-family:'IBM Plex Mono',monospace; font-weight:500; overflow-wrap:break-word;}

/* ---------- Simple record list (cadastros) ---------- */
.record-list{display:flex; flex-direction:column; gap:4px;}
.record-row{display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid var(--hair);}
.record-row:last-child{border-bottom:none;}
a.record-row{transition:background .15s ease; border-radius:8px;}
a.record-row:hover{background:var(--bg-alt);}

/* Linha de parcela/despesa em edição — antes era um form solto dentro da
   linha, sem nenhuma diferença visual do resto da lista (confuso, some no
   meio das outras). Agora vira um bloco destacado, com cara de "isso é um
   formulário temporário", não de mais uma linha da lista. */
.record-editing{
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
  background:var(--amber-dim); border:1.5px solid rgba(225,104,61,.4); border-radius:14px;
  padding:16px 18px; margin:6px 0;
}
.record-editing-head{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text); font-size:14px;}
.record-editing-head svg{color:var(--amber); flex-shrink:0;}
.record-editing input[type=date]{max-width:230px;}
.record-avatar{width:36px; height:36px; border-radius:10px; background:var(--bg-alt); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--amber); flex-shrink:0;}
.record-main{flex:1; min-width:0;}
.record-name{font-size:14.5px; font-weight:600; overflow-wrap:break-word;}
.record-meta{font-size:12px; color:var(--text-muted); margin-top:2px; overflow-wrap:break-word;}
.record-actions{display:flex; gap:4px; flex-shrink:0;}
.record-edit{background:transparent; border:none; color:var(--text-muted); cursor:pointer; padding:6px; border-radius:8px;}
.record-edit:hover{color:var(--amber); background:var(--amber-dim);}
.record-del{background:transparent; border:none; color:var(--text-muted); cursor:pointer; padding:6px; border-radius:8px; flex-shrink:0;}
.record-del:hover{color:var(--coral); background:var(--coral-dim);}
.empty-state{border:1.5px dashed var(--hair); border-radius:var(--radius); padding:50px 30px; text-align:center; color:var(--text-muted);}
.empty-state::before{
  content:''; display:block; width:38px; height:38px; margin:0 auto 14px; opacity:.5;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
.empty-state .display{font-size:20px; color:var(--text); margin-bottom:8px;}
.empty-mini{color:var(--text-muted); font-size:13px; padding:20px 4px; text-align:center;}

/* ---------- Filter bar ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:22px; background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:12px 14px;}
.filter-bar input[type=text]{max-width:220px;}
.filter-bar select{max-width:200px;}
.chip{padding:8px 14px; border-radius:100px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--hair); color:var(--text-muted); background:transparent; transition:all .15s ease;}
.chip.active{background:var(--amber-dim); color:var(--amber); border-color:var(--amber);}
.filter-count{margin-left:auto; font-size:12px; color:var(--text-muted);}

/* ---------- Chips removíveis (cidades atendidas da transportadora) ---------- */
.chips-wrap{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.city-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 14px; border-radius:100px; font-size:12.5px; font-weight:600; color:var(--amber); background:var(--amber-dim); border:1px solid transparent;}
.city-chip-remove{display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:none; background:transparent; color:inherit; font-size:15px; line-height:1; cursor:pointer; opacity:.7;}
.city-chip-remove:hover{opacity:1; background:rgba(0,0,0,.08); color:var(--coral);}

.list-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.list-head h2{font-size:19px; font-weight:600; margin:0; display:flex; align-items:center; gap:9px;}
.list-head span{color:var(--text-muted); font-size:13px;}

.input-search-wrap{position:relative;}
.input-search-wrap svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none;}
.input-search-wrap input{padding-left:38px;}

/* ---------- Orçamentos ---------- */
.orc-card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); margin-bottom:14px; padding:18px 22px;}
.orc-top{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.orc-idx{width:38px; height:38px; border-radius:10px; background:var(--bg-alt); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--amber); flex-shrink:0;}
.orc-main{flex:1; min-width:180px;}
.orc-client{font-weight:600; font-size:15px;}
.orc-meta{font-size:12px; color:var(--text-muted); margin-top:3px;}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 10px 4px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.badge::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0;}
.badge-pendente{background:var(--amber-dim); color:#c99a3d;}
.badge-aprovado{background:var(--emerald-dim); color:#1c7a58;}
.badge-reprovado{background:var(--coral-dim); color:#a63c2a;}
.tag-rt{background:var(--violet-dim); color:var(--violet); font-size:10.5px; padding:3px 9px; border-radius:100px; font-weight:600;}
.tag-frete{background:rgba(52,194,143,0.14); color:var(--emerald); font-size:10.5px; padding:3px 9px; border-radius:100px; font-weight:600;}
.orc-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.orc-figs{display:flex; gap:22px; align-items:center;}
.orc-fig{text-align:right;}
.orc-fig .l{font-size:10.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;}
.orc-fig .v{font-family:'IBM Plex Mono',monospace; font-size:14px; margin-top:2px;}
.orc-actions{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.orc-actions-main{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.orc-actions-main .btn{width:auto; margin-top:0; transition:transform .18s cubic-bezier(.2,.8,.3,1.3), box-shadow .18s ease, background .18s ease, color .18s ease, filter .15s ease;}
.orc-actions-main .btn-emerald{box-shadow:0 10px 22px -12px rgba(23,61,80,.5);}
.orc-actions-main .btn-emerald:hover{transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(23,61,80,.6);}
.orc-actions-main .btn-emerald:active{transform:translateY(0) scale(.98);}
.orc-actions-main .btn-coral:hover{background:var(--coral); color:#fff; transform:translateY(-2px); box-shadow:0 12px 24px -14px rgba(178,59,34,.5);}
.orc-actions-main .btn-coral:active{transform:translateY(0) scale(.98);}
.orc-actions-excluir{margin-left:auto; color:var(--text-muted);}
.orc-actions-excluir:hover{border-color:var(--coral); color:var(--coral); background:var(--coral-dim);}

.action-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px;}
.action-tile{
  display:flex; align-items:center; gap:14px; padding:18px; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--radius); text-decoration:none; color:var(--text); transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.action-tile:hover{transform:translateY(-2px); background:var(--surface-2);}
.action-tile-icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.action-tile-label{font-size:14px; font-weight:600; line-height:1.3;}
.action-tile.amber .action-tile-icon{background:var(--amber-dim); color:var(--amber);}
.action-tile.amber:hover{border-color:var(--amber);}
.action-tile.coral .action-tile-icon{background:var(--coral-dim); color:var(--coral);}
.action-tile.coral:hover{border-color:var(--coral);}
.action-tile.emerald .action-tile-icon{background:var(--emerald-dim); color:var(--emerald);}
.action-tile.emerald:hover{border-color:var(--emerald);}
.action-tile.violet .action-tile-icon{background:var(--violet-dim); color:var(--violet);}
.action-tile.violet:hover{border-color:var(--violet);}

/* ---------- Sales list / carnê ---------- */
.sale-card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); margin-bottom:16px; overflow:hidden;}
.sale-head{display:flex; align-items:center; gap:16px; padding:18px 22px; cursor:pointer;}
.sale-head:hover{background:var(--surface-2);}
.sale-idx{width:38px; height:38px; border-radius:10px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--amber); flex-shrink:0; border:1px solid var(--hair);}
.sale-main{flex:1; min-width:0;}
.sale-client{font-weight:600; font-size:15.5px;}
.sale-meta{font-size:12.5px; color:var(--text-muted); margin-top:3px;}
.sale-owner{display:inline-block; font-size:10.5px; color:var(--teal); background:rgba(52,194,143,0.1); padding:2px 7px; border-radius:100px; margin-left:8px; vertical-align:middle;}
.sale-figures{display:flex; gap:26px; align-items:center;}
.sale-fig{text-align:right;}
.sale-fig .l{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em;}
.sale-fig .v{font-family:'IBM Plex Mono',monospace; font-size:15px; margin-top:2px;}
.sale-progress{width:64px; height:6px; border-radius:6px; background:var(--bg-alt); overflow:hidden; border:1px solid var(--hair);}
.sale-progress i{display:block; height:100%; background:var(--emerald);}
.chevron{transition:transform .25s ease; color:var(--text-muted); flex-shrink:0;}
.sale-card.open .chevron{transform:rotate(180deg);}
.del-btn{background:transparent; border:none; color:var(--text-muted); cursor:pointer; padding:6px; border-radius:8px; flex-shrink:0;}
.del-btn:hover{color:var(--coral); background:var(--coral-dim);}
.carnet{max-height:0; overflow:hidden; transition:max-height .4s ease; border-top:1px solid var(--hair); background:var(--bg-alt);}
.sale-card.open .carnet{max-height:2000px;}
.carnet-inner{padding:20px 22px 22px;}
.carnet-title{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:14px;}
.stub{background:var(--paper); color:var(--ink); border-radius:10px; position:relative; display:grid; grid-template-columns:44px 1fr auto auto; gap:16px; align-items:center; padding:14px 18px;}
.stub:not(:last-child){margin-bottom:14px;}
.stub::before, .stub::after{content:''; position:absolute; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:var(--bg-alt);}
.stub::before{left:-8px;} .stub::after{right:-8px;}
.stub-num{width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;}
.stub-mid{min-width:0;}
.stub-due{font-size:12px; color:#5b5745; text-transform:uppercase; letter-spacing:.04em;}
.stub-client-val{font-family:'IBM Plex Mono',monospace; font-size:13.5px; margin-top:3px;}
.stub-comm{text-align:right;}
.stub-comm .l{font-size:10.5px; color:#5b5745; text-transform:uppercase; letter-spacing:.05em;}
.stub-comm .v{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600; margin-top:2px;}
.stub-status{display:flex; align-items:center; gap:10px;}
.status-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:5px 10px 5px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.status-pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}
.status-pendente{background:var(--amber-dim); color:#8a6417;}
.status-atrasado{background:var(--coral-dim); color:#a63c2a;}
.status-recebido{background:var(--emerald-dim); color:#1c7a58;}
.toggle{position:relative; width:42px; height:24px; border-radius:100px; background:#d8d4c4; border:none; cursor:pointer; flex-shrink:0; transition:background .2s ease;}
.toggle::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.toggle.on{background:var(--emerald);}
.toggle.on::after{transform:translateX(18px);}
.stamp{position:absolute; right:14px; top:-10px; font-family:'Fraunces',serif; font-weight:700; font-size:13px; color:var(--emerald); border:2px solid var(--emerald); border-radius:6px; padding:2px 8px; transform:rotate(-8deg); background:rgba(52,194,143,0.06); animation:stampIn .25s ease;}
@media (max-width:640px){
  .stub{grid-template-columns:36px 1fr; grid-template-areas:"num mid" "num status";}
  .stub-num{grid-area:num;} .stub-mid{grid-area:mid;}
  .stub-comm{grid-area:mid; text-align:left; margin-top:6px;}
  .stub-status{grid-area:status; margin-top:8px;}
  .sale-figures{display:none;}
}

/* ---------- Reports ---------- */
.report-groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:24px;}
.report-group-card{background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:16px 18px;}
.report-group-card .n{font-size:13.5px; font-weight:600; margin-bottom:8px;}
.report-group-card .v{font-family:'IBM Plex Mono',monospace; font-size:18px;}
.report-group-card .s{font-size:11.5px; color:var(--text-muted); margin-top:4px;}
.report-row{display:grid; grid-template-columns:1fr auto auto auto; gap:14px; align-items:center; padding:14px 18px; background:var(--surface); border:1px solid var(--hair); border-radius:14px; margin-bottom:10px;}
.notif-item{margin-bottom:10px;}
.notif-item .report-row{margin-bottom:0;}
.email-preview{display:none; margin-top:8px; padding:14px; background:var(--surface); border:1px solid var(--hair); border-radius:14px;}
.email-preview.show{display:block;}
.email-preview iframe{width:100%; height:380px; border:1px solid var(--hair); border-radius:10px; background:#fff;}
.email-preview-actions{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;}
.copy-feedback{font-size:12px; color:var(--emerald);}
.report-row .who{font-size:14px; font-weight:600;}
.report-row .sub{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.report-row .val{font-family:'IBM Plex Mono',monospace; font-size:14px; text-align:right;}
@media (max-width:760px){ .report-row{grid-template-columns:1fr; text-align:left;} .report-row .val{text-align:left;} }

/* Tela de Auditoria (auditoria.html) — snapshot em campo/valor legível (pra
   inclusão/exclusão) e comparativo antes/agora (pra alteração), em vez de
   JSON cru. */
.log-campos{display:grid; grid-template-columns:180px 1fr; gap:8px 14px; margin:0; font-size:13px;}
.log-campos dt{color:var(--text-muted); font-weight:600;}
.log-campos dd{margin:0; word-break:break-word;}
.log-nested{margin:14px 0 4px; padding:14px 16px; border-left:2px solid var(--amber); background:rgba(225,104,61,0.05); border-radius:0 12px 12px 0;}
.log-nested-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:10px;}
.log-nested-item{margin-bottom:14px;}
.log-nested-item:last-child{margin-bottom:0;}
.log-nested-item-titulo{font-size:12.5px; font-weight:600; margin-bottom:6px;}
@media (max-width:760px){ .log-campos{grid-template-columns:1fr;} .log-campos dd{margin-bottom:4px;} }

.log-diff{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:4px;}
.log-diff th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:700; padding:0 10px 6px;}
.log-diff td{padding:7px 10px; border-top:1px solid var(--hair); vertical-align:top; word-break:break-word;}
.log-diff-campo{color:var(--text-muted); font-weight:600; white-space:nowrap; width:160px;}
.log-diff-antes{color:var(--text-muted); text-decoration:line-through; text-decoration-color:var(--coral); text-decoration-thickness:1.5px;}
.log-diff-depois{color:var(--text); font-weight:600;}
@media (max-width:760px){
  .log-diff thead{display:none;}
  .log-diff, .log-diff tbody, .log-diff tr, .log-diff td{display:block; width:auto;}
  .log-diff tr{padding:8px 0; border-top:1px solid var(--hair);}
  .log-diff td{border-top:none; padding:2px 0;}
  .log-diff-campo{width:auto;}
  .log-diff-antes::before{content:"Antes: ";}
  .log-diff-depois::before{content:"Agora: ";}
}

.chart-card{margin-top:22px;}
.chart-title{font-size:15px; font-weight:600; margin-bottom:2px;}
.chart-sub{font-size:12.5px; color:var(--text-muted); margin-bottom:18px;}

/* ---------- Acompanhamento de obra: etapas ---------- */
.etapa-add-row{display:flex; flex-direction:column; gap:10px; margin-bottom:8px;}
.etapa-add-row-buttons{display:flex; gap:10px; flex-wrap:wrap;}
.mic-btn{
  background:var(--surface-2); border:1px solid var(--hair); color:var(--text); cursor:pointer;
  padding:11px 16px; border-radius:10px; font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.mic-btn:hover:not(:disabled){border-color:var(--amber);}
.mic-btn:disabled{opacity:.5; cursor:not-allowed;}
.mic-btn.recording{background:var(--coral-dim); border-color:var(--coral); color:var(--coral); animation:pulseRec 1.4s ease infinite;}
@keyframes pulseRec{0%,100%{opacity:1;} 50%{opacity:.6;}}
.gravacao-status{font-size:12.5px; color:var(--text-muted); min-height:18px; margin:8px 0 4px;}

.candidatos-panel{margin-top:12px; padding:14px; background:var(--bg-alt); border:1px solid var(--hair); border-radius:12px;}
.candidatos-title{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:10px;}
.etapa-candidate{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--hair);}
.etapa-candidate:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.etapa-candidate-row{display:flex; gap:8px; align-items:flex-start;}
.etapa-candidate-row textarea{flex:1; min-height:50px;}
.candidatos-actions{display:flex; gap:10px; margin-top:10px;}

.etapa-item{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center;
  padding:14px 16px; background:var(--surface); border:1px solid var(--hair); border-radius:12px; margin-bottom:8px;
}
.etapa-item.done{border-color:rgba(52,194,143,0.3); background:rgba(52,194,143,0.05);}
.etapa-check{
  width:26px; height:26px; border-radius:8px; border:2px solid var(--hair); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s ease;
}
.etapa-item.done .etapa-check{background:var(--emerald); border-color:var(--emerald);}
.etapa-check.sending{cursor:wait; opacity:.6;}
.etapa-titulo{font-size:14.5px; font-weight:700;}
.etapa-item.done .etapa-titulo{text-decoration:line-through; color:var(--text-muted);}
.etapa-desc{font-size:13.5px; color:var(--text-muted); white-space:pre-wrap; line-height:1.5; margin-top:3px;}
.etapa-meta{font-size:12px; color:var(--text-muted); margin-top:6px;}
.etapa-email-sending{animation:pulseSending 1.1s ease-in-out infinite;}
@keyframes pulseSending{0%,100%{opacity:1;} 50%{opacity:.5;}}
@media (max-width:640px){ .etapa-item{grid-template-columns:auto 1fr; grid-template-areas:"check desc" "check meta" "check email" "check del";} }

@keyframes riseIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@keyframes stampIn{from{opacity:0; transform:rotate(-8deg) scale(1.4);} to{opacity:1; transform:rotate(-8deg) scale(1);}}