/* Design unico do painel (ADM e cliente): tokens, campos, botoes, cartoes, tabelas, status.
   Carregado por ultimo em cada pagina, por isso sobrescreve o <style> interno e o tema futuro
   (mesma identidade nos dois). A cor da marca entra por --ac (inline no html); o resto deriva dela. */

/* ---------- tokens (claro) ---------- */
:root{
  --bg:#f4f6f8;--card:#ffffff;--tx:#0f172a;--mu:#5b6b82;--bd:#e2e8f0;--bd-in:#cbd5e1;--in:#ffffff;
  --ac:#2563eb;--ac-h:color-mix(in srgb,var(--ac) 86%,#000);--ac-s:color-mix(in srgb,var(--ac) 12%,transparent);
  --ac-tx:#ffffff;--ac2:#7c3aed;
  --ok:#15803d;--wa:#a16207;--er:#b91c1c;--in-c:#1d4ed8;
  --okb:#dcfce7;--wab:#fef3c7;--erb:#fee2e2;--inb:#e0e7ff;
  --focus:0 0 0 3px color-mix(in srgb,var(--ac) 35%,transparent);
  --sh:0 1px 2px rgba(15,23,42,.06),0 6px 18px -12px rgba(15,23,42,.18);
  --r:14px;--r-s:10px;--r-xs:8px;--r-pill:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --fs-xs:12px;--fs-s:13px;--fs-b:15px;--fs-l:16px;--fs-h:18px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
/* ---------- tokens (escuro): sistema, ou escolha explicita, ou tema futuro ---------- */
@media(prefers-color-scheme:dark){:root:not([data-tema=claro]){
  --bg:#0b1220;--card:#131c2e;--tx:#e5e9f0;--mu:#94a3b8;--bd:#25314a;--bd-in:#3a4a6b;--in:#0b1220;
  --ac:#60a5fa;--ac-tx:#0b1220;--ac2:#a78bfa;--ok:#4ade80;--wa:#facc15;--er:#f87171;--in-c:#93c5fd;
  --okb:#12351f;--wab:#3b3410;--erb:#42181b;--inb:#1e2a52;
  --sh:0 1px 2px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-tema=escuro],:root.futuro{
  --bg:#0b1220;--card:#131c2e;--tx:#e5e9f0;--mu:#94a3b8;--bd:#25314a;--bd-in:#3a4a6b;--in:#0b1220;
  --ac:#60a5fa;--ac-tx:#0b1220;--ac2:#a78bfa;--ok:#4ade80;--wa:#facc15;--er:#f87171;--in-c:#93c5fd;
  --okb:#12351f;--wab:#3b3410;--erb:#42181b;--inb:#1e2a52;
  --sh:0 1px 2px rgba(0,0,0,.35);color-scheme:dark}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;max-width:100%;overflow-x:hidden}
body,:root.futuro body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:var(--fs-b);line-height:1.5;letter-spacing:0;margin:0;max-width:100%;overflow-x:hidden}
:root.futuro body:not(.tela-login):not(.tela-fundo){background:var(--bg)}
:root.futuro[data-orbita=suave]{background:var(--bg)}
:root.futuro[data-orbita=suave] body{background:var(--bg)}
:root.futuro main{perspective:none}
:root.futuro main .card.t3d,:root.futuro main .card{transform:none!important}
:root.futuro main .card.t3d::after,:root.futuro .card::before{display:none}
:root.futuro header img,:root.futuro h2::before,:root.futuro .dot.vermelho{animation:none;box-shadow:none;filter:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
img,canvas,svg,video,iframe{max-width:100%}
h1,h2,h3{color:var(--tx);line-height:1.25}
:root.futuro h2,:root.futuro .card h3{font-size:var(--fs-s);letter-spacing:.04em;text-transform:uppercase;color:var(--mu);font-weight:600;background:none;-webkit-text-fill-color:currentColor}
:root.futuro h2::before{content:none}
:root.futuro header h1{font-size:var(--fs-h);text-transform:none;letter-spacing:0;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--tx);color:var(--tx);font-weight:700}
:root.futuro .big{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--tx);color:var(--tx);text-shadow:none;font-weight:700}
::selection{background:var(--ac-s)}
a{color:var(--ac);text-underline-offset:2px}
p{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--r-xs)}
:root.futuro input:focus,:root.futuro select:focus,:root.futuro textarea:focus{box-shadow:var(--focus)!important}

/* ---------- cabecalho, navegacao ---------- */
:root.futuro header{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--bd);border-image:none;padding:var(--s3) var(--s4);box-shadow:var(--sh)}
header small,:root.futuro header small,:root.futuro header h1 small{color:var(--mu);font-size:var(--fs-xs);font-weight:500;-webkit-text-fill-color:var(--mu);text-transform:none;letter-spacing:0}
:root.futuro nav{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--bd)}
:root.futuro nav button{letter-spacing:0;text-shadow:none}
:root.futuro nav button.on{color:var(--ac);text-shadow:none;background:var(--ac-s);border-color:transparent}
:root.futuro nav button.on svg{filter:none}
@media(min-width:700px){
  :root.futuro nav{background:none;border:0}
  :root.futuro nav button{border-radius:var(--r-s);border:1px solid var(--bd);background:var(--card)}
  :root.futuro nav button.on{background:var(--ac-s);border-color:transparent;box-shadow:none}
}

/* ---------- campos: input, select, textarea, label ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]),
select,textarea,:root.futuro input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]),:root.futuro select,:root.futuro textarea{
  font:inherit;font-size:var(--fs-l);color:var(--tx);background:var(--in)!important;border:1px solid var(--bd-in)!important;
  border-radius:var(--r-s);padding:10px 12px;min-height:44px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;box-shadow:none}
textarea{min-height:96px;line-height:1.45;resize:vertical}
select{appearance:auto}
input::placeholder,textarea::placeholder{color:var(--mu);opacity:.8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)!important;box-shadow:var(--focus)!important}
input:disabled,select:disabled,textarea:disabled,[readonly]{opacity:.7}
input[type=color]{min-height:44px;padding:4px;width:100%;border-radius:var(--r-s);border:1px solid var(--bd-in);background:var(--in)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-width:18px;min-height:18px;accent-color:var(--ac);margin:0;flex:none;cursor:pointer}
input[type=file]{font-size:var(--fs-s);color:var(--mu);max-width:100%}
label{color:var(--mu);font-size:var(--fs-s);font-weight:600;cursor:default}
label:not(.ck):not(.lin):not(:has(input[type=checkbox])):not(:has(input[type=radio])){display:block;margin:var(--s3) 0 var(--s1)}
label.ck,label:has(input[type=checkbox]){display:flex;gap:var(--s2);align-items:flex-start;color:var(--tx);font-weight:400;font-size:var(--fs-b);cursor:pointer}
.mdl label,#s-marca label,#s-atd label{display:block;margin:var(--s3) 0 var(--s1)}
.mdl .par{gap:var(--s2)}
.wa-sel,.atd-lista input,.atd-env input{font-size:var(--fs-l)}
.seg input{display:none}
.msg,#m{font-size:var(--fs-s)}

/* ---------- botoes ---------- */
button,.btn{font:inherit;font-size:var(--fs-b);font-weight:600;line-height:1.2;color:var(--tx);background:var(--card);border:1px solid var(--bd-in);border-radius:var(--r-s);padding:10px 16px;min-height:44px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .05s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.p,form>button,.cx0>button,body.tela-login button,:root.futuro .btn.p,:root.futuro #btUser,:root.futuro body.tela-login button{background:var(--ac);border-color:var(--ac);color:var(--ac-tx);font-weight:700;box-shadow:0 1px 2px rgba(15,23,42,.12)}
.btn.p:hover:not(:disabled),form>button:hover:not(:disabled),.cx0>button:hover:not(:disabled){background:var(--ac-h);border-color:var(--ac-h);color:var(--ac-tx)}
form>button,.cx0>button,body.tela-login button{width:100%;margin-top:var(--s3)}
.btn.d,:root.futuro .btn.d{border-color:var(--er);color:var(--er);background:var(--card)}
.btn.d:hover:not(:disabled){background:var(--erb);color:var(--er)}
:root.futuro .btn,:root.futuro .btn:hover:not(:disabled){box-shadow:none}
:root.futuro .btn:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
:root.futuro .btn.p:hover:not(:disabled){filter:none}
.ib{border-radius:var(--r-s);border-color:var(--bd-in);min-width:44px}
.sw button,.seg button{font-size:var(--fs-s);padding:8px 12px;min-height:40px;border-radius:var(--r-pill);background:var(--card)}
.sw button.on,.seg button.on,:root.futuro .sw button.on,:root.futuro .seg button.on{background:var(--ac);color:var(--ac-tx);border-color:var(--ac)}
.seg{border-radius:var(--r-s)}
.seg button{border-radius:0;min-height:40px}
.btns{gap:var(--s2)}

/* ---------- cartoes, modais, listas ---------- */
.card,.mdl,.cx0,form,#menuU,:root.futuro .card,:root.futuro .mdl,:root.futuro #menuU,:root.futuro body.tela-login form,:root.futuro body.tela-login .cx0,:root.futuro body.tela-fundo .card,:root.futuro body.tela-fundo form{
  background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);transform:none}
.card{padding:var(--s4);min-width:0}
:root.futuro .card:hover{border-color:var(--bd);box-shadow:var(--sh)}
.card:hover{transform:none}
.ov{padding:var(--s4);background:rgba(15,23,42,.55)}
:root.futuro .ov{background:rgba(2,6,23,.6);backdrop-filter:none}
.mdl{padding:var(--s5) var(--s4)}
.mdl h3{font-size:var(--fs-h);color:var(--tx);text-transform:none;letter-spacing:0}
.row{border-color:var(--bd);gap:var(--s3)}
:root.futuro .row{border-color:var(--bd)}
:root.futuro .al{backdrop-filter:none;border:0}
#toast,:root.futuro #toast{background:var(--tx);color:var(--bg);border:0;box-shadow:var(--sh);border-radius:var(--r-s)}
.card h3,:root.futuro .card h3{margin-bottom:var(--s2)}

/* ---------- tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
th,td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--bd);vertical-align:top;overflow-wrap:anywhere}
th{color:var(--mu);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
tr:hover td{background:var(--ac-s)}
@media(max-width:700px){
  .tabela-scroll,.card:has(>table){overflow-x:auto}
}

/* ---------- status: tags e alertas ---------- */
.tag{font-size:var(--fs-xs);font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--inb);color:var(--in-c);border:1px solid transparent;line-height:1.3}
.t-ok{background:var(--okb);color:var(--ok)}
.t-wa{background:var(--wab);color:var(--wa)}
.t-er{background:var(--erb);color:var(--er)}
:root.futuro .tag,:root.futuro .t-ok,:root.futuro .t-wa,:root.futuro .t-er{border:1px solid transparent}
.al{border-radius:var(--r-s);padding:var(--s3);font-size:var(--fs-s);border:1px solid transparent}
.al.erro{background:var(--erb);color:var(--er)}
.al.aviso{background:var(--wab);color:var(--wa)}
.al.info{background:var(--inb);color:var(--in-c)}
.al.ok{background:var(--okb);color:var(--ok)}
.cx{border-radius:var(--r-s)}
.cx.ok{border-color:var(--ok)}.cx.aviso{border-color:var(--wa)}.cx.erro{border-color:var(--er)}
.dot.verde,:root.futuro .dot.verde{background:var(--ok)}
.dot.amarelo,:root.futuro .dot.amarelo{background:var(--wa)}
.dot.vermelho,:root.futuro .dot.vermelho{background:var(--er)}
.bar,:root.futuro .bar{background:var(--bd);height:8px}
.bar i,:root.futuro .bar i{background:var(--ac);box-shadow:none}

/* ---------- layout e responsivo (gutter 16px, sem rolagem horizontal) ---------- */
main{padding:var(--s4);max-width:1100px;margin:0 auto;box-sizing:border-box}
.grid,.g2{gap:var(--s3)}
.grid>*,.g2>*,section>*,.card,.mdl,form,.cx0{min-width:0;max-width:100%}
.ov{padding:var(--s4)}
.mdl .btns{justify-content:flex-end}
.inlog,.cx-cmd,.cb-cmd,.pre{max-width:100%;overflow-x:auto}
.mu,small.mu{color:var(--mu)}
.big{font-size:28px;font-weight:700}
@media(max-width:480px){
  header{padding:var(--s2) var(--s4)}
  .card{padding:var(--s3)}
  .mdl{padding:var(--s4)}
  .mdl .par{grid-template-columns:1fr}
  .btns{flex-direction:row;flex-wrap:wrap}
  .btns>button,.btns>.btn{flex:1 1 auto}
}
@media(max-width:360px){
  main,.cx0,form{padding-left:var(--s3);padding-right:var(--s3)}
}
body.tela-login{padding:var(--s4)}

/* Navegação lateral do dashboard em telas de computador; tablet e celular mantêm a barra horizontal. */
@media (min-width: 901px) {
  :root:not(.orbita) body>header:has(+ nav#nav) {
    height: 62px;
    min-height: 62px;
    box-sizing: border-box;
  }
  :root:not(.orbita) body>nav#nav {
    position: fixed !important;
    z-index: 7;
    top: 62px !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 226px;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 !important;
    padding: 18px 12px 24px;
    transform: none !important;
    border-top: 0;
    border-right: 1px solid var(--bd);
    background: var(--card);
  }
  :root:not(.orbita) body>nav#nav button {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--mu);
    text-align: left;
    font-size: 13px;
  }
  :root:not(.orbita) body>nav#nav button svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }
  :root:not(.orbita) body>nav#nav button:hover {
    background: color-mix(in srgb, var(--ac) 9%, var(--card));
    color: var(--tx);
  }
  :root:not(.orbita) body>nav#nav button.on {
    border-color: color-mix(in srgb, var(--ac) 30%, var(--bd));
    background: color-mix(in srgb, var(--ac) 11%, var(--card));
    color: var(--ac);
    font-weight: 650;
    box-shadow: inset 3px 0 var(--ac);
  }
  :root:not(.orbita) body>nav#nav~main {
    width: calc(100% - 226px);
    max-width: none;
    margin: 0 0 0 226px;
    padding: 26px clamp(18px, 3vw, 42px) 54px;
  }
}

/* Navegação móvel fixa à esquerda, recolhida em ícones e expansível sob toque. */
.nav-toggle{display:none!important}
@media(max-width:900px){
  :root:not(.orbita) body{padding-bottom:0}
  :root:not(.orbita) body>header:has(+ nav#nav){position:sticky;top:0;z-index:35;height:58px;min-height:58px;box-sizing:border-box}
  :root:not(.orbita) body>nav#nav{
    position:fixed!important;z-index:30;top:58px!important;right:auto!important;bottom:0!important;left:0!important;
    width:62px;max-width:none;height:auto;max-height:none;box-sizing:border-box;display:flex;flex-direction:column;
    align-items:stretch;gap:6px;overflow-x:hidden;overflow-y:auto;margin:0!important;padding:10px 5px max(12px,env(safe-area-inset-bottom));
    transform:none!important;border-top:0;border-right:1px solid var(--bd);background:var(--card);box-shadow:2px 0 18px rgba(0,0,0,.12)
  }
  :root:not(.orbita) body.nav-open>nav#nav{width:224px;box-shadow:8px 0 30px rgba(0,0,0,.28)}
  :root:not(.orbita) body>nav#nav .nav-toggle{display:flex!important;flex:0 0 50px;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-width:0;min-height:50px;margin:0;padding:7px 3px;border:1px solid var(--bd);border-radius:10px;background:var(--card);color:var(--tx)}
  :root:not(.orbita) body>nav#nav .nav-toggle svg{width:20px;height:20px;flex:none}
  :root:not(.orbita) body>nav#nav .nav-toggle-label{display:none}
  :root:not(.orbita) body.nav-open>nav#nav .nav-toggle{flex-direction:row;justify-content:flex-start;gap:10px;padding:8px 12px;text-align:left}
  :root:not(.orbita) body.nav-open>nav#nav .nav-toggle-label{display:inline}
  :root:not(.orbita) body>nav#nav button:not(#navToggle){flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-width:0;min-height:52px;margin:0;padding:6px 3px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--mu);font-size:9px;text-align:center}
  :root:not(.orbita) body>nav#nav button:not(#navToggle) svg{flex:none;width:20px;height:20px}
  :root:not(.orbita) body>nav#nav button:not(#navToggle)>span{display:none}
  :root:not(.orbita) body.nav-open>nav#nav button:not(#navToggle){flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:9px 12px;font-size:13px;text-align:left}
  :root:not(.orbita) body.nav-open>nav#nav button:not(#navToggle)>span{display:inline}
  :root:not(.orbita) body>nav#nav button.on{border-color:color-mix(in srgb,var(--ac) 30%,var(--bd));background:color-mix(in srgb,var(--ac) 11%,var(--card));color:var(--ac);font-weight:650;box-shadow:inset 3px 0 var(--ac)}
  :root:not(.orbita) body>nav#nav~main{width:calc(100% - 62px);max-width:none;margin:0 0 0 62px;padding:16px 12px 28px}
}