:root{
  --dux-red:#ED1C24;
  --dux-red-dark:#b3000f;
  --dux-orange:#F08000;
  --ink:#e8eaed;
  --muted:#9aa0aa;
  --line:#2b2e38;
  --bg:#121319;
  --card:#1c1e26;
  --surface-2:#262934;
  --input-bg:#15171d;
  --topbar:#0e0f14;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px}
a{color:var(--dux-red);text-decoration:none}
.btn{display:inline-block;background:var(--dux-red);color:#fff;border:0;border-radius:8px;
  padding:10px 18px;font-weight:600;cursor:pointer;font-size:14px}
.btn:hover{background:var(--dux-red-dark)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;width:100%;background:var(--input-bg);color:var(--ink)}
option{background:var(--card);color:var(--ink)}
label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a1b1f 0%,#2a2b30 55%,#3a0307 100%)}
.login-card{background:var(--card);width:360px;max-width:92vw;border-radius:16px;padding:34px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-card img{height:54px;display:block;margin:0 auto 6px}
.login-card .sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 22px}
.login-card .field{margin-bottom:14px}
.login-card .btn{width:100%;margin-top:6px;padding:12px}
.erro{background:rgba(237,28,36,.15);color:#ff6b6b;border:1px solid rgba(237,28,36,.4);border-radius:8px;
  padding:9px 12px;font-size:13px;margin-bottom:14px;text-align:center}
.login-foot{text-align:center;color:#9aa0a6;font-size:11px;margin-top:18px}

/* ===== APP SHELL ===== */
.topbar{background:var(--topbar);color:#fff;display:flex;align-items:center;gap:18px;
  padding:0 22px;height:58px;position:sticky;top:0;z-index:10}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.topbar .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--dux-red)}
.topbar nav{display:flex;gap:4px;margin-left:10px}
.topbar nav a{color:#cfd2d6;padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px}
.topbar nav a.active,.topbar nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar .spacer{flex:1}
.topbar .who{color:#cfd2d6;font-size:13px}
.container{max-width:1080px;margin:26px auto;padding:0 20px}
h1{font-size:22px;margin:0 0 4px}
.page-sub{color:var(--muted);margin:0 0 22px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card .big{font-size:30px;font-weight:800}
.card .lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.card.accent{border-top:3px solid var(--dux-red)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}
.panel h2{font-size:15px;margin:0 0 14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
th{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
tr:hover td{background:var(--surface-2)}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;
  background:var(--surface-2);color:var(--muted);text-transform:capitalize}
.badge.novo{background:#e7f0ff;color:#1a56db}
.badge.em_contato{background:#fff3da;color:#9a6700}
.badge.qualificado{background:#e6f6ed;color:#0a7a3d}
.badge.proposta{background:#efe7ff;color:#6b21a8}
.badge.ganho{background:#dcfce7;color:#15803d}
.badge.perdido{background:#fde8e8;color:#b3000f}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar form{display:flex;gap:8px;align-items:center}
.toolbar input,.toolbar select{width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msg-ok{background:rgba(22,163,74,.15);color:#4ade80;border:1px solid rgba(22,163,74,.4);border-radius:8px;padding:10px 14px;margin-bottom:16px}
.empty{color:var(--muted);text-align:center;padding:30px}
details>summary{cursor:pointer;font-weight:600;color:var(--dux-red);margin-bottom:12px}
.insight{border-left:3px solid var(--dux-orange);padding:8px 0 8px 14px;margin-bottom:14px}
.insight .t{font-weight:700}
.insight .m{color:var(--muted);font-size:12px}

/* Notas de aderência (esteira de pesquisa de leads) */
.nota{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
  font-weight:600;font-size:12.5px;line-height:1.5;background:rgba(156,163,175,.18);color:#cbd0d6}
.nota::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.nota.big{font-size:17px;padding:5px 14px;gap:8px}
.nota.big::before{width:9px;height:9px}
.nota.n0,.nota.n1,.nota.n2,.nota.n3{color:#f87171;background:rgba(220,38,38,.16)}   /* baixa */
.nota.n4,.nota.n5,.nota.n6{color:#fbbf24;background:rgba(245,158,11,.16)}          /* média */
.nota.n7,.nota.n8{color:#4ade80;background:rgba(22,163,74,.18)}                    /* boa */
.nota.n9,.nota.n10{color:#34d399;background:rgba(16,185,129,.22)}                  /* ótima */

/* Botão de ação destacado (estilo do projeto cartório) */
.btn.accent{background:var(--dux-orange)}
.btn.accent:hover{background:#d9760f}

/* Menu lateral (drawer) + sanduiche — padrao do projeto cartorio */
.hamburger{flex:0 0 auto;width:38px;height:38px;display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;background:none;border:none;cursor:pointer;border-radius:9px;transition:background .15s}
.hamburger:hover{background:rgba(255,255,255,.16)}
.hamburger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
.crm-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:84vw;background:var(--card);
  box-shadow:0 0 40px rgba(17,20,24,.25);transform:translateX(-100%);transition:transform .22s ease;
  z-index:200;display:flex;flex-direction:column}
.crm-sidebar.open{transform:translateX(0)}
.crm-sidebar .sidebar-head{flex:0 0 auto;height:58px;display:flex;align-items:center;gap:10px;padding:0 16px;
  background:var(--topbar);color:#fff;font-weight:700;font-size:16px}
.crm-sidebar .sidebar-close{background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;
  width:36px;height:36px;border-radius:9px;transition:background .15s}
.crm-sidebar .sidebar-close:hover{background:rgba(255,255,255,.18)}
.sidebar-nav{flex:1 1 auto;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:2px}
.side-item{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:9px;font-weight:600;
  font-size:14px;color:var(--ink);text-decoration:none}
.side-item svg{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.side-item:hover{background:rgba(237,28,36,.16);color:#fff;text-decoration:none}
.side-item.active{background:rgba(237,28,36,.18);color:#fff}
.side-item:hover svg,.side-item.active svg{color:var(--dux-red)}
.crm-backdrop{position:fixed;inset:0;background:rgba(17,20,24,.38);opacity:0;visibility:hidden;
  transition:opacity .2s;z-index:150}
.crm-backdrop.open{opacity:1;visibility:visible}

/* Embedado em aba (iframe): some o chrome da propria pagina */
html.embedded .topbar,html.embedded .crm-sidebar,html.embedded .crm-backdrop{display:none!important}
html.embedded .container{margin:0;max-width:none;padding:18px 20px}

/* Shell MDI por abas (igual cartorio) */
body.shell-body{margin:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.shell-tabsbar{display:flex;gap:6px;flex:1;align-items:center;overflow-x:auto;overflow-y:hidden;padding:0 6px;min-width:0}
.shell-tabsbar::-webkit-scrollbar{height:5px}
.shell-tabsbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}
.shell-tab{display:inline-flex;align-items:center;gap:8px;max-width:220px;padding:7px 10px 7px 13px;
  border-radius:9px;background:rgba(255,255,255,.16);color:#fff;font-weight:600;font-size:13px;
  white-space:nowrap;cursor:pointer;flex:0 0 auto;transition:background .12s,color .12s}
.shell-tab:hover{background:rgba(255,255,255,.28)}
.shell-tab.active{background:#fff;color:var(--dux-red)}
.shell-tab .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.shell-tab .tx{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;font-size:14px;line-height:1;flex:0 0 auto;color:inherit;opacity:.8}
.shell-tab .tx:hover{background:rgba(0,0,0,.15);opacity:1}
.shell-tab.active .tx:hover{background:rgba(237,28,36,.15)}
.shell-frames{position:relative;flex:1 1 auto;background:var(--bg)}
.shell-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.shell-frame.active{display:block}

/* Botao "fixar" do menu lateral + modo fixado (empurra o conteudo) */
.sidebar-pin{background:none;border:none;color:#fff;cursor:pointer;width:34px;height:34px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;opacity:.75;transition:background .15s,opacity .15s}
.sidebar-pin:hover{background:rgba(255,255,255,.18);opacity:1}
.sidebar-pin.on{opacity:1;background:rgba(255,255,255,.22)}
.sidebar-pin svg{width:18px;height:18px;transform:rotate(40deg);transition:transform .15s}
.sidebar-pin.on svg{transform:rotate(0)}
body.menu-fixo .crm-sidebar{transform:none!important}
body.menu-fixo .crm-backdrop{display:none!important}
body.menu-fixo .topbar{margin-left:280px}
body.menu-fixo .shell-frames{margin-left:280px}
body.menu-fixo .container{margin-left:300px;max-width:none}

/* Checkbox no estilo slider (toggle) — aplicado a todos os checks */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:40px;height:22px;flex:0 0 auto;border:none;border-radius:999px;background:#3a3e4a;
  position:relative;cursor:pointer;vertical-align:middle;margin:0;transition:background .18s}
input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .18s}
input[type=checkbox]:checked{background:var(--dux-red)}
input[type=checkbox]:checked::after{left:20px}
input[type=checkbox]:focus-visible{outline:2px solid var(--dux-red);outline-offset:2px}

/* Grades de formulário (estilo protocolo do cartório) */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid4 label,.grid3 label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
.grid4 input:not([type=checkbox]),.grid4 select,.grid3 input:not([type=checkbox]),.grid3 select{width:100%}
@media(max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid3,.grid4{grid-template-columns:1fr}}

/* Refino visual dos campos de formulário (padrão cartório) */
input:not([type=checkbox]),select,textarea{border-radius:9px;padding:10px 12px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):hover,select:hover,textarea:hover{border-color:#3a3e4a}
input:not([type=checkbox]):focus,select:focus,textarea:focus{outline:none;border-color:var(--dux-red);
  box-shadow:0 0 0 3px rgba(237,28,36,.12)}
input:disabled,input[readonly],select:disabled,textarea:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
textarea{min-height:64px;resize:vertical}
.grid4 label,.grid3 label{margin-bottom:5px}
.grid4>div,.grid3>div{min-width:0}

/* Grade de leads — estilo AG Grid (quartz dark) */
#leads-table{border-collapse:separate;border-spacing:0}
#leads-table thead th{position:sticky;top:0;z-index:1;background:#20232c;color:var(--muted);
  font-weight:600;font-size:11px;letter-spacing:.04em;padding:11px 14px;
  border-bottom:1px solid var(--line);white-space:nowrap}
#leads-table tbody td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:13.5px;vertical-align:middle}
#leads-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
#leads-table tbody tr:hover td{background:rgba(237,28,36,.07)}
#leads-table tbody tr:last-child td{border-bottom:none}
#leads-table td[data-col="nome"] a{color:var(--dux-red);font-weight:600}
#leads-table td[data-col="nome"] a:hover{text-decoration:underline}

/* Linha de filtro por coluna (floating filter estilo AG Grid) */
#leads-table thead tr.fltrow th{top:38px;background:var(--card);padding:5px 8px;border-bottom:1px solid var(--line)}
#leads-table .fcol{width:100%;padding:5px 8px;font-size:12px;border:1px solid var(--line);border-radius:6px;
  background:var(--input-bg);color:var(--ink);font-weight:400;text-transform:none;letter-spacing:0}
#leads-table .fcol::placeholder{color:#5b6470}

/* Abas de formulário (ERP: Contratos) */
.ftabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto}
.ftab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:9px 14px;cursor:pointer;
  font-size:13px;font-weight:600;white-space:nowrap}
.ftab:hover{color:var(--ink)}
.ftab.on{color:var(--ink);border-bottom-color:var(--dux-red)}
.fpane[hidden]{display:none}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer;text-transform:none!important;font-size:14px!important;color:var(--ink)!important;letter-spacing:0!important;padding-top:8px}
tr.linha-click{cursor:pointer}
tr.linha-click:hover td{background:rgba(255,255,255,.04)}
td.num,th.num{text-align:right;white-space:nowrap}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.tag.ok{background:rgba(22,163,74,.18);color:#4ade80}
.tag.off{background:rgba(148,163,184,.15);color:#94a3b8}
.tag.warn{background:rgba(234,179,8,.15);color:#facc15}

/* Menu lateral em árvore (grupos em acordeão — mesmo padrão do cartório) */
.side-group{margin-bottom:2px}
.side-group-head{display:flex;align-items:center;gap:11px;width:100%;padding:10px 14px;border:none;background:none;
  cursor:pointer;border-radius:9px;font:inherit;font-weight:700;font-size:13.5px;color:var(--ink);text-align:left}
.side-group-head:hover{background:rgba(237,28,36,.16);color:#fff}
.side-group-head .sg-label,.side-item .sg-label{flex:1}
.sg-chev{margin-left:auto;color:var(--muted);font-size:18px;line-height:1;transition:transform .2s ease}
.side-group.open .sg-chev{transform:rotate(90deg)}
.side-group-items{overflow:hidden;max-height:0;transition:max-height .24s ease}
.side-group.open .side-group-items{max-height:640px}
.side-group-items .side-item{padding:9px 14px 9px 34px;font-size:13px}
.si-ico{width:18px;height:18px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.si-ico svg{width:18px;height:18px}
.side-item:hover .si-ico,.side-item.active .si-ico,.side-group-head:hover .si-ico{color:var(--dux-red)}

/* ===== Grade padrão (static/grade.js): ordenar pelo título + filtro por coluna ===== */
table.dg{border-collapse:separate;border-spacing:0;width:100%}
table.dg thead th{position:sticky;top:0;z-index:1;background:#20232c;color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
table.dg thead th.num{text-align:right}
table.dg thead tr.fltrow th{top:37px;background:var(--card);padding:5px 6px;border-bottom:1px solid var(--line)}
table.dg .fcol{width:100%;min-width:60px;padding:5px 8px;font-size:12px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--ink);text-transform:none;letter-spacing:0;font-weight:400}
table.dg .fcol::placeholder{color:#5b6470}
table.dg tbody td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
table.dg tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
table.dg tbody tr:hover td{background:rgba(237,28,36,.07)}
table.dg th.dg-ord{cursor:pointer;user-select:none}
table.dg th.dg-ord:hover{color:var(--ink)}
table.dg th.dg-ord::after{content:"↕";opacity:.25;margin-left:5px;font-size:10px}
table.dg th.dg-asc::after{content:"▲";opacity:1;color:var(--dux-red)}
table.dg th.dg-desc::after{content:"▼";opacity:1;color:var(--dux-red)}
table.dg tr.dg-oculta{display:none}
.dg-contador{color:var(--muted);font-size:12px;margin-top:8px}

/* ===== Campo de pesquisa (static/pesquisa.js) — <select data-pesquisa> ===== */
.pq{position:relative;width:100%}
.pq .pq-inp{width:100%;padding-right:30px}
.pq .pq-sel{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none}
.pq .pq-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);
  font-size:18px;cursor:pointer;padding:2px 6px;line-height:1}
.pq .pq-x:hover{color:var(--ink)}
.pq-lista{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 4px);max-height:300px;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.45);padding:4px}
.pq-item{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--ink)}
.pq-item small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.pq-item.on,.pq-item:hover{background:rgba(237,28,36,.16)}
.pq-item.sel{font-weight:700}
.pq-vazio{padding:8px 10px;color:var(--muted);font-size:13px}
td .pq{min-width:200px}

/* Financeiro da nota: 1 linha por financeiro */
.fin-tab{width:100%;max-width:980px}
.fin-tab td,.fin-tab th{padding:7px 8px}
.fin-tab select,.fin-tab input{margin:0}
.fin-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.fin-barra .fin-dica{margin-left:auto;font-size:12px}

/* ===== Árvore (Naturezas) ===== */
.nt-wrap{display:grid;grid-template-columns:minmax(360px,1.2fr) 1fr;gap:18px;align-items:start}
@media(max-width:900px){.nt-wrap{grid-template-columns:1fr}}
.nt-arvore{max-height:calc(100vh - 170px);overflow:auto}
.nt-form{position:sticky;top:12px}
.nt-raiz,.nt-raiz ul{list-style:none;margin:0;padding:0}
.nt-raiz ul{padding-left:20px;border-left:1px dashed rgba(255,255,255,.08);margin-left:11px;display:none}
.nt.aberto>ul{display:block}
.nt-linha{display:flex;align-items:center;gap:4px;border-radius:8px;padding:2px 4px}
.nt-linha:hover{background:rgba(255,255,255,.04)}
.nt-linha.sel{background:rgba(237,28,36,.16)}
.nt-linha.inativa .nt-nome{opacity:.5}
.nt-tg{width:22px;height:22px;flex:0 0 22px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;transition:transform .15s;padding:0}
.nt.aberto>.nt-linha .nt-tg{transform:rotate(90deg)}
.nt-tg.vazio{cursor:default}
.nt-nome{flex:1;color:var(--ink);text-decoration:none;padding:5px 2px;font-size:14px}
.nt-nome:hover{text-decoration:none;color:#fff}
.nt-cod{color:var(--muted);font-family:ui-monospace,monospace;font-size:12px;margin-right:6px}
.nt-tag{font-size:10px;padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--muted);margin-left:6px;text-transform:uppercase;letter-spacing:.03em}
.nt-tag.off{background:rgba(148,163,184,.15)}
.nt-add{opacity:0;color:var(--muted);text-decoration:none;font-size:17px;padding:0 7px;border-radius:6px}
.nt-linha:hover .nt-add{opacity:1}
.nt-add:hover{background:rgba(237,28,36,.2);color:#fff;text-decoration:none}
.nt.nt-oculta{display:none}
.nt.nt-achou>.nt-linha .nt-nome{color:var(--dux-red)}

/* Avisos flutuantes (base.html) */
#toasts{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:min(460px,92vw)}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.35;
  box-shadow:0 12px 32px rgba(0,0,0,.45);animation:toastIn .25s ease;transition:opacity .4s,transform .4s}
.toast.erro{background:#3b1013;color:#ffd5d6;border:1px solid rgba(237,28,36,.7)}
.toast.ok{background:#0f2a1b;color:#c9f7d8;border:1px solid rgba(34,197,94,.6)}
.toast span{flex:1}
.toast button{background:none;border:0;color:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.7;padding:0 2px}
.toast button:hover{opacity:1}
.toast.saindo{opacity:0;transform:translateX(20px)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

.pq-grupo{padding:7px 10px 3px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;cursor:default}

/* Grade de serviços da nota: colunas fixas, campos ocupam a coluna, números à direita alinhados ao título */
.itens-tab{table-layout:fixed;width:100%;min-width:900px}
.itens-tab th,.itens-tab td{padding:7px 6px}
.itens-tab td input,.itens-tab td .pq{width:100%;min-width:0}
.itens-tab .num-inp{text-align:right}
.itens-tab td.tot{text-align:right;font-weight:600;padding-right:10px}
.itens-tab th.num{text-align:right;padding-right:10px}

/* ===================== Tela da Nota (layout ERP) ===================== */
.nf-barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:-18px -20px 16px;padding:14px 20px;background:rgba(18,19,25,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nf-voltar{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:18px}
.nf-voltar:hover{background:rgba(255,255,255,.06);text-decoration:none}
.nf-ident{display:flex;flex-direction:column;gap:4px;min-width:0}
.nf-titulo{font-size:20px;font-weight:700;color:#fff;display:flex;align-items:baseline;gap:10px}
.nf-numero{font-size:13px;font-weight:600;color:var(--muted)}
.nf-chips{display:flex;gap:6px;flex-wrap:wrap}
.nf-total{margin-left:auto;text-align:right;padding:6px 16px;border-radius:12px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25)}
.nf-total span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.nf-total b{font-size:22px;color:#4ade80;font-variant-numeric:tabular-nums}
.nf-acoes{display:flex;gap:8px;flex-wrap:wrap}
.nf-acoes form{margin:0}
.nf-aviso{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:rgba(234,179,8,.10);color:#facc15;border:1px solid rgba(234,179,8,.35);font-size:13px}

.nf-form fieldset.nf-grid{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media(max-width:1250px){.nf-form fieldset.nf-grid{grid-template-columns:1fr}}
.nf-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.nf-lado{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
@media(max-width:1250px){.nf-lado{position:static}}
.nf-card{margin:0;padding:16px 18px}
.nf-tit{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nf-tit h2{margin:0;font-size:13px;letter-spacing:.06em;color:#e5e7eb}
.nf-tit svg{width:17px;height:17px;color:var(--dux-red);flex:0 0 auto}
.nf-num{width:22px;height:22px;border-radius:50%;background:rgba(237,28,36,.15);color:var(--dux-red);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.nf-num:empty{display:none}
.nf-tit-btn{margin-left:auto;padding:6px 12px}
.nf-tit-dica{margin-left:auto;font-size:12px;color:var(--muted)}
.nf-campos{display:grid;gap:12px 14px}
.nf-campos.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nf-campos.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nf-campos.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.nf-campos.c5{grid-template-columns:repeat(7,minmax(0,1fr))}
.nf-campos .span2{grid-column:span 2}
.nf-campos .span3{grid-column:span 3}
@media(max-width:1000px){.nf-campos.c4,.nf-campos.c5{grid-template-columns:repeat(2,minmax(0,1fr))}.nf-campos .span3{grid-column:span 2}}
.nf-campos label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.nf-campos label.chk{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
.nf-form input:not([type=checkbox]):not([type=radio]),.nf-form select,.nf-form .pq-inp{height:40px;width:100%;box-sizing:border-box}
.nf-form textarea{min-height:90px}
.nf-dica{font-size:12px;color:var(--muted);margin-top:4px}
.nf-dica a{font-size:12px}
.nf-sub{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 0 8px}
.nf-totais{width:100%}
.nf-totais td{padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.nf-totais td.num,.nf-totais td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.nf-totais tr:last-child td{border-bottom:0;font-size:16px;color:#4ade80;padding-top:10px}
.nf-auditoria{font-size:11px;color:var(--muted);line-height:1.6;padding:0 4px}
.nf-card .fin-tab{max-width:none}

.fin-tab{table-layout:fixed;width:100%}
.fin-tab td input,.fin-tab td select{width:100%;min-width:0}
.fin-tab td input[name=parc_valor]{text-align:right}
.fin-tab th.num{text-align:right}

/* campo obrigatório que faltou (base.html) */
.campo-invalido,.campo-invalido.pq .pq-inp,select.campo-invalido,input.campo-invalido{border-color:#ef4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.18) !important}
/* NFS-e autorizada: faixa com número/chave + diálogo de cancelamento */
.nf-nfse{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.30);font-size:13px}
.nf-nfse div{display:flex;flex-direction:column;gap:2px}
.nf-nfse span{color:var(--muted,#9aa0aa);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.nf-nfse code{font-size:12px;user-select:all}
.nf-nfse .txt-erro{color:#f87171}
.nf-dlg{border:1px solid var(--borda,#2a2d38);border-radius:12px;background:var(--card,#1b1d25);color:inherit;padding:18px 20px;width:min(460px,92vw)}
.nf-dlg::backdrop{background:rgba(0,0,0,.55)}
.nf-dlg h3{margin:0 0 12px}
.nf-dlg label{display:block;margin:10px 0 4px;font-size:12px}
.nf-dlg select,.nf-dlg textarea{width:100%;box-sizing:border-box}
.nf-dlg-acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
/* Controle de Numeração (popup da TOP) */
.num-dlg{border:1px solid var(--borda,#2a2d38);border-radius:12px;background:var(--card,#1b1d25);color:inherit;padding:18px 20px;width:min(980px,96vw)}
.num-dlg::backdrop{background:rgba(0,0,0,.55)}
.num-cab{display:flex;justify-content:space-between;align-items:center;gap:12px}
.num-cab h3{margin:0}
.num-dica{font-size:13px;color:var(--muted);margin:8px 0 12px}
.num-tab{width:100%;border-collapse:collapse;font-size:13px}
.num-tab th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--muted);padding:6px;border-bottom:1px solid var(--borda,#2a2d38)}
.num-tab td{padding:6px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.num-tab .num{text-align:right}
.num-tab tfoot td{border-bottom:0;padding-top:12px}
.num-obs{font-size:11px;color:var(--muted)}
/* Grade de notas: botões de impressão (NFS-e / boleto) */
.imp-cel{white-space:nowrap}
.imp-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;margin:1px 2px;border:1px solid var(--borda,#2a2d38);border-radius:6px;font-size:12px;color:inherit;text-decoration:none}
.imp-btn:hover{border-color:#ED1C24;color:#fff}
.imp-btn svg{width:14px;height:14px}
/* Financeiro: tipo receita/despesa */
.tag.desp{background:rgba(237,28,36,.16);color:#ff8a8f}
.sel-tipo{font-weight:600}
/* Conciliação bancária */
.conc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px}
.conc-card{background:var(--card,#1b1d25);border:1px solid var(--borda,#2a2d38);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.conc-card span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.conc-card b{font-size:20px}
.conc-card small{font-size:12px;color:var(--muted)}
.conc-card.ok{border-color:rgba(34,197,94,.5)} .conc-card.ok b{color:#4ade80}
.conc-card.alerta{border-color:rgba(237,28,36,.5)} .conc-card.alerta b{color:#ff8a8f}
.conc-acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.conc-ini summary{cursor:pointer;font-size:13px;color:var(--muted)}
.conc-tab{width:100%;border-collapse:collapse;font-size:13px}
.conc-tab th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--muted);padding:6px;border-bottom:1px solid var(--borda,#2a2d38)}
.conc-tab td{padding:6px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.conc-tab .num{text-align:right;white-space:nowrap}
.conc-sub{font-size:12px;color:var(--muted)}
.btn.bp{padding:3px 9px;font-size:12px}
.nf-dlg input,.nf-dlg select{width:100%;box-sizing:border-box}
/* Aviso "processando" (formulários POST) */
#processando{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(1px)}
#processando.on{display:flex}
.proc-box{display:flex;align-items:center;gap:14px;background:var(--card,#1b1d25);border:1px solid var(--borda,#2a2d38);border-radius:12px;padding:16px 20px;max-width:min(460px,90vw);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.proc-spin{width:26px;height:26px;flex:none;border:3px solid rgba(255,255,255,.15);border-top-color:#ED1C24;border-radius:50%;animation:procgira .8s linear infinite}
.proc-txt{font-size:14px;line-height:1.35}
@keyframes procgira{to{transform:rotate(360deg)}}
/* TOP: chips de restrição/exceção */
.rest-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--borda,#2a2d38);border-radius:16px;font-size:12px}
.rest-chip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.rest-chip button:hover{color:#ff6b6b}
/* Campo cidade (cadastro de Cidades) */
.cid-lista{display:none;position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--card,#1b1d25);border:1px solid var(--borda,#2a2d38);border-radius:8px;max-height:260px;overflow:auto;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cid-op{padding:7px 10px;cursor:pointer;font-size:13px}
.cid-op:hover{background:rgba(237,28,36,.15)}
.cid-ibge{font-size:11px;color:var(--muted);margin-top:3px;min-height:14px}
/* Campo de vários e-mails (etiquetas) */
.em-box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px;padding:5px 8px;border:1px solid var(--borda,#2a2d38);border-radius:8px;background:var(--input-bg,rgba(255,255,255,.03));cursor:text}
.em-box:focus-within{border-color:#ED1C24}
.em-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:14px;background:rgba(255,255,255,.08);font-size:13px}
.em-chip.em-1{background:rgba(237,28,36,.16)}
.em-chip.em-ruim{background:rgba(237,28,36,.35);text-decoration:wavy underline}
.em-chip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.em-chip button:hover{color:#ff6b6b}
.em-inp{flex:1;min-width:220px;border:0!important;background:transparent!important;outline:none;padding:4px!important;box-shadow:none!important}
/* Usuário no topo: avatar com iniciais + menu */
.usr{position:relative;margin-left:auto;flex:none}
.usr-av{width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:var(--dux-red,#ED1C24);color:#fff;font-weight:700;font-size:14px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.usr-av:hover{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.usr-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:200;min-width:220px;background:var(--card,#1b1d25);border:1px solid var(--borda,#2a2d38);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.usr.aberto .usr-menu{display:block}
.usr-nome{font-weight:700;font-size:14px;color:#fff}
.usr-info{font-size:12px;color:var(--muted,#9aa0aa);margin:2px 0 10px}
.usr-sair{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:#ff8a8f!important;font-weight:600;font-size:14px;text-decoration:none}
.usr-sair:hover{background:rgba(237,28,36,.12)}
.usr-sair svg{width:18px;height:18px}
@media(max-width:640px){.topbar .brand-txt{display:none}.topbar{gap:10px}}
/* Grade no celular: cartões (≤720px) — rótulo da coluna à esquerda, valor à direita; busca única + ordenar */
.dg-mob{display:none}
@media(max-width:720px){
  .dg-mob{display:flex;gap:8px;margin:0 0 10px}
  .dg-mob .dg-busca{flex:1;min-width:0}
  .dg-mob .dg-ordsel{flex:none;max-width:45%}
  table.dg,table.dg tbody,table.dg tr,table.dg td{display:block;width:100%}
  table.dg thead{display:none}
  table.dg tbody tr{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:6px 12px}
  table.dg tbody tr.dg-oculta{display:none}
  table.dg tbody tr:nth-child(even) td,table.dg tbody tr:hover td{background:transparent}
  table.dg tbody td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);text-align:right!important;white-space:normal!important}
  table.dg tbody td:last-child{border-bottom:0}
  table.dg tbody td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
  table.dg tbody td:not([data-label])::before,table.dg tbody td[data-label=""]::before{content:none}
  table.dg tbody td:not([data-label]),table.dg tbody td[data-label=""]{justify-content:flex-end}
  table.dg tbody td:empty{display:none}
  table.dg tbody td:first-child{font-size:15px;font-weight:700}
  .panel:has(> table.dg){overflow-x:visible!important}
}

/* ===== cadastro do contrato (produtos/adicionais) + correções de formulário no celular ===== */
.ct-chks{display:flex;gap:28px;flex-wrap:wrap}
.ct-item{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.ct-item-cab{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ct-item-cab>div{flex:1;min-width:0}
.ct-item-corpo{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;align-items:flex-start}
.ct-precos{width:auto;min-width:300px}
.ct-remove{margin-left:auto}
.ct-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ct-form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.ct-novo{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.ct-valor{width:140px}.ct-largo{flex:1;min-width:220px}
@media(max-width:820px){
  /* campo que ocupa 2+ colunas no computador criava uma 2ª coluna "fantasma" no celular e espremia os outros */
  .grid3>div,.grid4>div{grid-column:auto!important}
  .ct-chks{flex-direction:column;gap:6px}
  .ct-item{padding:10px}
  .ct-precos{min-width:0;width:100%}
  .ct-item-corpo{gap:12px}
  .ct-form{width:100%}
  .ct-form>div{flex:1 1 140px;min-width:0;width:auto}
  .ct-form>div.ct-largo{flex-basis:100%}
  .ct-form input,.ct-form select{width:100%}
  .ct-form>button{flex:1 1 100%}
  .ct-remove{margin-left:0;width:100%}.ct-remove .btn{width:100%}
  .tab-cartao thead{display:none}
  .tab-cartao,.tab-cartao tbody,.tab-cartao tr,.tab-cartao td{display:block;width:100%}
  .tab-cartao tr{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px;position:relative}
  .tab-cartao td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:right}
  .tab-cartao td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:12px;text-align:left}
  .tab-cartao td:not([data-label]){justify-content:flex-end}
  .tab-cartao td[colspan]{justify-content:flex-start;text-align:left}
}

/* rateio da nota */
.rat-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nf-dlg.nf-dlg-rat{width:min(960px,96vw)}
.rat-topo{display:flex;align-items:center;justify-content:space-between}
.rat-topo h3{margin:0 0 8px}
.rat-x{font-size:24px;line-height:1;color:var(--muted);text-decoration:none;padding:0 4px}
#ratInfo{flex:1 1 100%}
.rat-cab label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0}
.rat-cab select{width:auto;min-width:260px}
.rat-tab{width:100%;margin-top:10px;table-layout:fixed}
.rat-tab th:nth-child(1),.rat-tab td:nth-child(1){width:34%}.rat-tab th:nth-child(2),.rat-tab td:nth-child(2){width:26%}
.rat-tab th:nth-child(4),.rat-tab td:nth-child(4){width:100px}.rat-tab th:nth-child(5),.rat-tab td:nth-child(5){width:120px}
.rat-tab th:nth-child(6),.rat-tab td:nth-child(6){width:44px}
.rat-tab select,.rat-tab input{width:100%}
#ratAdd{margin-top:8px}
@media(max-width:820px){
  .rat-cab select{min-width:0;flex:1 1 100%}
  .rat-tab{table-layout:auto}
  .rat-tab thead{display:none}
  .rat-tab,.rat-tab tbody,.rat-tab tfoot,.rat-tab tr,.rat-tab td{display:block;width:100%!important}
  .rat-tab tbody tr{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px}
  .rat-tab td{border:0;padding:3px 0}
  .rat-tab tfoot tr{display:flex;justify-content:space-between}.rat-tab tfoot td{width:auto!important}
}
/* nota no celular: serviços e financeiro em cartões (as tabelas de inputs estouravam a largura) */
@media(max-width:820px){
  .itens-tab{min-width:0}
  .itens-tab colgroup,.fin-tab colgroup,.itens-tab thead,.fin-tab thead{display:none}
  .itens-tab,.itens-tab tbody,.itens-tab tr,.itens-tab td,.fin-tab,.fin-tab tbody,.fin-tab tr,.fin-tab td{display:block;width:100%!important}
  .itens-tab tbody tr,.fin-tab tbody tr{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:10px;position:relative}
  .itens-tab td,.fin-tab td{border:0;padding:3px 0}
  .itens-tab td[data-label]::before,.fin-tab td[data-label]::before{content:attr(data-label);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
  .itens-tab td.tot{display:flex;justify-content:space-between;font-weight:700}
  .itens-tab td.tot::before{margin:0}
  .itens-tab td:last-child,.fin-tab td:last-child{position:absolute;top:6px;right:8px;width:auto!important}
  .fin-tab td.pn::before{display:inline;margin-right:6px}
  .fin-tab tfoot,.fin-tab tfoot tr{display:block}.fin-tab tfoot tr{display:flex;flex-wrap:wrap;gap:8px}.fin-tab tfoot td{width:auto!important;padding:2px 0}
}

.rat-resumo{display:flex;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.rat-resumo div{flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.rat-resumo span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.rat-resumo b{font-size:16px}.rat-resumo b.falta{color:#ff8a8f}.rat-resumo b.ok{color:#4ade80}
.nf-dlg.nf-dlg-rat{width:min(1100px,96vw)}