/* ==========================================================================
   SIALF Derivada · Tema V7.0
   Carregado por ÚLTIMO (depois de todos os estilos): unifica a identidade visual,
   corrige desalinhamentos e dá acabamento a botões, formulários, tabelas, abas,
   modais, login e menu. Claro e escuro. Remover este arquivo devolve o visual anterior.
   ========================================================================== */
:root{
  --bg:#06080c;--bg2:#0a0e14;--panel:#0e141b;--panel2:#131a23;--panel3:#19222c;
  --line:#212c37;--line2:#2e3b48;--text:#f4f7fa;--muted:#8d9aa8;
  --r-card:18px;--r-ctl:11px;--h-ctl:40px;
  --glow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent),0 10px 30px color-mix(in srgb,var(--accent) 16%,transparent);
  --sheen:linear-gradient(180deg,color-mix(in srgb,#fff 5%,transparent),transparent 42%);
}
body.light{
  --bg:#edf0f4;--bg2:#f5f7fa;--panel:#ffffff;--panel2:#f6f8fb;--panel3:#eceff4;
  --line:#dbe1e8;--line2:#c8d1db;--text:#18202a;--muted:#5d6b79;
  --sheen:linear-gradient(180deg,rgba(255,255,255,.9),transparent 45%);
}
body{font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}

/* ---------- cartões: borda superior com brilho sutil ---------- */
.card{position:relative;border-radius:var(--r-card)!important;border-color:var(--line)!important;
  background:var(--sheen),linear-gradient(150deg,var(--panel),var(--panel2))!important}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--r-card) var(--r-card) 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 42%,transparent),transparent);opacity:.55}
.card:hover::before{opacity:.95}
.section-kicker{display:flex;align-items:center;gap:8px;font-size:10.5px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--accent)}
.section-title{letter-spacing:-.02em}

/* ---------- cabeçalho de página: título à esquerda, ações à direita, alinhados ----------
   (substitui remendos antigos que empurravam o botão com margin-top:88px e min-height:138px) */
.main>.top,.main>.top:has(>.btn.primary){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;flex-wrap:wrap!important;
  padding:0 96px 0 0!important;min-height:0!important;margin:0 0 22px!important}
.main>.top>.title{min-width:0;flex:1 1 280px}
.main>.top>.btn,.main>.top>.btn.primary,.main>.top>.row-actions,.main>.top>.actions,.main>.top>.new-quote-top{margin:0!important;flex:0 0 auto!important;position:static!important}
.main>.top>.title h1{margin:0 0 4px!important}
.new-quote-top{margin:0!important}
.utility-controls-fixed{top:10px!important;right:18px!important;padding:3px!important;border-radius:14px!important}
.title h1{font-size:clamp(24px,2.6vw,32px)!important;letter-spacing:-.035em!important;line-height:1.1}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:9px 16px;border-radius:var(--r-ctl)!important;
  font-weight:700;letter-spacing:-.005em;line-height:1.2;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .2s,border-color .2s,background .2s,color .2s}
.btn:not(.primary):not(.good):not(.bad):not(.warn):not(.danger){background:var(--panel2);border:1px solid var(--line2);color:var(--text)}
.btn:not(.primary):hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line2));transform:translateY(-1px)}
.btn.primary{border:0!important;color:#1b1300!important;background:linear-gradient(135deg,var(--accent2),var(--accent) 55%,var(--accent3))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 34px color-mix(in srgb,var(--accent) 42%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border-radius:var(--r-ctl);cursor:pointer;
  background:var(--panel2);border:1px solid var(--line2);color:var(--muted);font-size:15px;transition:.18s}
.icon-btn:hover{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel2))}
.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- formulários ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select,textarea{
  min-height:var(--h-ctl);border-radius:var(--r-ctl)!important;background:var(--bg2)!important;border:1px solid var(--line2)!important;color:var(--text)!important;
  transition:border-color .18s,box-shadow .18s,background .18s}
textarea{min-height:84px}
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{min-height:var(--h-ctl);padding-top:0;padding-bottom:0;color-scheme:dark}
body.light input[type=date],body.light input[type=month],body.light input[type=time],body.light input[type=datetime-local]{color-scheme:light}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 72%,transparent)}
input:hover:not(:focus):not([disabled]),select:hover:not(:focus),textarea:hover:not(:focus){border-color:color-mix(in srgb,var(--accent) 38%,var(--line2))!important}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;outline:none}
select{appearance:none;-webkit-appearance:none;padding-right:34px!important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%238d9aa8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 13px center!important}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.field label{font-size:10.5px!important;font-weight:800!important;letter-spacing:.12em!important}

/* ---------- abas ---------- */
.tabs{padding:5px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 80%,transparent);gap:4px!important;width:fit-content;max-width:100%}
.tab{border-radius:10px!important;border-color:transparent!important;background:transparent!important;font-weight:700;padding:9px 15px}
.tab:hover{color:var(--text)!important;background:var(--panel3)!important}
.tab.active,.tab.on,.tab[aria-selected=true]{color:var(--accent2)!important;background:color-mix(in srgb,var(--accent) 14%,var(--panel2))!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent) inset}

/* ---------- tabelas ---------- */
table{border-collapse:separate;border-spacing:0;width:100%}
th{font-size:10.5px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--muted)!important;text-align:left}
th,td{padding:13px 14px}
tbody tr{transition:background .15s}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
td{border-top:1px solid var(--line)}
td.num,td[data-num],th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- selos / status ---------- */
.badge,.pill,.status,.chip{border-radius:999px!important;font-weight:800;letter-spacing:.02em}

/* ---------- listas de orçamento e faixas de números ---------- */
.quote-stats-centered{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;justify-content:stretch!important;margin:0 0 16px}
.quote-stat{display:flex;flex-direction:column;align-items:flex-start!important;gap:4px;min-width:0;padding:15px 18px!important;border-radius:15px!important;
  background:var(--sheen),var(--panel)!important;border:1px solid var(--line)!important;text-align:left!important}
.quote-stat b{font-family:var(--font-num);font-size:26px!important;letter-spacing:-.03em;line-height:1}
.quote-stat span{font-size:10.5px!important;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.quote-row{border-radius:12px;transition:background .15s}
.quote-row:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
@media(max-width:760px){.quote-stats-centered{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.main>.top,.main>.top:has(>.btn.primary){padding-right:112px!important}}
@media(max-width:480px){.main>.top,.main>.top:has(>.btn.primary){padding:48px 0 0!important}}

/* ---------- Open Finance: bloco de abertura alinhado ---------- */
.fin-hero{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:44px 24px!important}
.fin-hero .section-kicker{justify-content:center}
.fin-hero .actions{display:flex;justify-content:center!important;flex-wrap:wrap;gap:10px;margin:6px 0 0!important}

/* ---------- Painel de Controle ---------- */
.dx-kpi-label{min-height:2.6em;display:flex;align-items:flex-end;line-height:1.25}
.dx-kpi-value{font-family:var(--font-num);letter-spacing:-.04em}
.dx-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.dx-legend>span:last-child{margin-left:auto;min-width:0;text-align:right}
@media(max-width:700px){.dx-legend>span:last-child{margin-left:0;flex-basis:100%;text-align:left}}
.dx-donut-legend{min-width:0!important}
.dx-lg{min-width:0;gap:8px!important;padding:9px 8px!important}
.dx-lg span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-lg small{min-width:30px!important;flex:0 0 auto}
.dx-lg strong{flex:0 0 auto}
.dx-actions{gap:8px}
body:not(:has(.dx-fit)) .dx-donut{width:clamp(112px,9vw,150px)!important;height:clamp(112px,9vw,150px)!important}
.dx-fit .dx-donut{--d:clamp(64px,min(33cqw,calc(100cqh - 112px)),240px)}
body:not(:has(.dx-fit)) .dx-donut-c b{font-size:clamp(22px,2vw,28px)}
body:not(:has(.dx-fit)) .dx-donut-c small{font-size:8.5px;letter-spacing:.08em}
.dx-card:has(>.dx-donut-wrap){display:flex;flex-direction:column}
.dx-card>.dx-donut-wrap{flex:1 1 auto;align-items:center;align-content:center}

/* ---------- menu lateral ---------- */
.side{box-shadow:1px 0 0 var(--line),24px 0 60px rgba(0,0,0,.18)}
body.light .side{box-shadow:1px 0 0 var(--line),10px 0 36px rgba(15,23,42,.05)}
.nav button{border-radius:12px!important;font-weight:700;letter-spacing:-.005em;transition:background .18s,color .18s,transform .18s var(--ease)}
.nav button:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)!important;color:var(--text)!important}
.nav button.active,.nav button.on,.nav button[aria-current=page]{color:var(--accent2)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--accent) 5%,transparent))!important;
  border-color:color-mix(in srgb,var(--accent) 38%,transparent)!important;transform:none!important}
.side-footer{gap:2px}
.footer-system{font-family:var(--font-num);font-size:13px!important;font-weight:700;letter-spacing:.02em}
.footer-sub{margin-top:3px;font-size:9.5px;line-height:1.4;color:var(--muted);max-width:210px}
.footer-developer{opacity:.9}

/* ---------- modais e avisos ---------- */
.modalbox,.modal-card{border-radius:22px!important;border:1px solid var(--line2)!important;box-shadow:0 40px 100px rgba(0,0,0,.55)!important}
.overlay-fixed,.modal-overlay,.overlay{backdrop-filter:blur(8px) saturate(1.1)}

/* ---------- login ---------- */
.login-card{box-sizing:border-box;width:100%;max-width:432px;border-radius:28px!important;padding:42px 38px 32px!important}
.login-card::before{height:3px!important;background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent)!important}
.login-logo{gap:12px!important}
.login-logo-mark{width:44px!important;height:44px!important;border-radius:14px!important;font-size:20px!important;color:#1b1300;
  background:linear-gradient(140deg,var(--accent2),var(--accent) 55%,var(--accent3))!important;border:0!important;
  box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 40%,transparent),0 1px 0 rgba(255,255,255,.4) inset!important}
.login-logo .login-brand{font-family:var(--font-num);font-size:38px!important;font-weight:700;letter-spacing:-.05em!important;line-height:1}
.login-sub{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px 0 26px!important;text-align:center}
.login-service{display:inline-block;padding:4px 12px;border-radius:999px;font-size:10.5px!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent2);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.login-system{max-width:340px;text-wrap:balance;font-size:11.5px!important;line-height:1.45;color:var(--muted)}
.login-submit{min-height:46px;border-radius:13px!important}
.login-version{margin-top:18px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.8}

/* ---------- detalhes finais ---------- */
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
a{color:var(--accent2)}
hr{border:0;border-top:1px solid var(--line)}
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.side,.nx-mobilebar,.nx-scrim{display:none!important}.main{margin:0!important}.card::before{display:none}}

/* ---------- celular: o menu volta a ser gaveta ----------
   Correção de bug: uma regra antiga (≤720px) forçava o menu em fluxo normal (position:relative; height:auto),
   o que empurrava todo o conteúdo ~420px para baixo e deixava um vão vazio no topo. */
@media(max-width:900px){
  .side{position:fixed!important;inset:0 auto 0 0!important;height:100vh!important;height:100dvh!important;width:min(82vw,300px)!important;
    border-right:1px solid var(--line)!important;border-bottom:0!important;padding:20px 14px!important;overflow-y:auto!important;transform:translateX(-105%)}
  body.nx-menu-open .side{transform:none!important}
  .side .nav{max-height:none!important}
  .main{padding:16px!important;padding-top:80px!important}
}
@media(max-width:560px){.main{padding:12px!important;padding-top:78px!important}}

@media(max-width:480px){.login-card{padding:32px 22px 26px!important;border-radius:24px!important}.login-logo .login-brand{font-size:34px!important}}

/* login: a coluna da grade crescia com o conteúdo e o cartão ultrapassava a borda direita no celular */
.login-shell{grid-template-columns:minmax(0,1fr)!important;justify-items:center}
.login-shell>.login-card{justify-self:center;min-width:0}
@media(max-width:480px){.login-shell>.login-card{width:100%!important;max-width:100%!important}}