/* Layout: painel com barra lateral (desktop), trilho de ícones (tablet) e navegação inferior (celular),
   decidido por container query na largura do aplicativo, para que a prévia por dispositivo seja fiel. */
:root{
  --bg:#F6F4F3; --surface:#FFFFFF; --surface-2:#F1EDEB; --line:#E3DDDA; --line-2:#D2C9C5;
  --ink:#23252A; --ink-2:#4A4C53; --muted:#6F6866;
  --brand:#8E2929; --brand-hover:#771F1F; --brand-ink:#FFFFFF; --brand-soft:#F6E8E7; --brand-text:#8E2929;
  --ok:#1E6B45; --ok-soft:#E2F1E8; --warn:#8A5600; --warn-soft:#FAEFD8; --bad:#B3261E; --bad-soft:#FBE6E3; --info:#2C5A86; --info-soft:#E3ECF5;
  --c-in:#33363D; --c-out:#C99D99; --c-proj:#A6ADB6; --c-line:#8E2929; --grid:#ECE6E3;
  --f-ui:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-display:"Spectral", Georgia, "Times New Roman", serif;
  --r:10px; --r-sm:6px;
  --shadow:0 1px 2px rgba(40,18,18,.06), 0 6px 20px rgba(40,18,18,.05);
  --focus:0 0 0 3px rgba(142,41,41,.35);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#141416; --surface:#1C1C1F; --surface-2:#242428; --line:#333238; --line-2:#45434A;
  --ink:#ECEAE8; --ink-2:#C9C4C2; --muted:#9C9593;
  --brand:#A63633; --brand-hover:#BA4440; --brand-ink:#FFFFFF; --brand-soft:#3A2222; --brand-text:#EC8F89;
  --ok:#67C795; --ok-soft:#173023; --warn:#E6AE52; --warn-soft:#33280F; --bad:#F2897F; --bad-soft:#3B1D1B; --info:#86B5E3; --info-soft:#18283A;
  --c-in:#D8D4D0; --c-out:#9A6461; --c-proj:#6E7782; --c-line:#EC8F89; --grid:#2A292E;
  --shadow:0 1px 2px rgba(0,0,0,.4); --focus:0 0 0 3px rgba(236,143,137,.45); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#141416; --surface:#1C1C1F; --surface-2:#242428; --line:#333238; --line-2:#45434A;
  --ink:#ECEAE8; --ink-2:#C9C4C2; --muted:#9C9593;
  --brand:#A63633; --brand-hover:#BA4440; --brand-ink:#FFFFFF; --brand-soft:#3A2222; --brand-text:#EC8F89;
  --ok:#67C795; --ok-soft:#173023; --warn:#E6AE52; --warn-soft:#33280F; --bad:#F2897F; --bad-soft:#3B1D1B; --info:#86B5E3; --info-soft:#18283A;
  --c-in:#D8D4D0; --c-out:#9A6461; --c-proj:#6E7782; --c-line:#EC8F89; --grid:#2A292E;
  --shadow:0 1px 2px rgba(0,0,0,.4); --focus:0 0 0 3px rgba(236,143,137,.45); color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:15px; line-height:1.45}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--surface)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:4px}
h1,h2,h3,h4{margin:0; text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.card,.kanban,.tbl-wrap,.tabs,.k-card,.toolbar,.ask,.mv,.field{position:relative}

/* faixa de demonstração */
.demo-bar{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between;
  padding-block:8px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
  background:var(--warn-soft); color:var(--ink); font-size:13px; border-bottom:1px solid var(--line)}
.demo-bar strong{color:var(--warn)}
.demo-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--surface)}
.seg button{border:0; background:transparent; padding:5px 10px; cursor:pointer; font-size:13px}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.link-btn{background:none; border:0; padding:0; color:var(--brand-text); text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-size:13px}

/* palco e prévia por dispositivo */
.stage{padding-block:0}
.stage.framed{padding-block:20px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.app{container-type:inline-size; container-name:app; margin:0 auto; background:var(--bg)}
.stage.framed .app{border:1px solid var(--line-2); border-radius:18px; box-shadow:var(--shadow); overflow:auto; height:min(860px, calc(100vh - 120px))}
.app[data-frame="tablet"]{max-width:820px}
.app[data-frame="celular"]{max-width:390px}

.shell{display:grid; grid-template-columns:1fr; min-height:100%}
.side{display:none}
.main{min-width:0; display:flex; flex-direction:column; min-height:100vh}
.stage.framed .main{min-height:100%}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; display:flex; align-items:center; gap:12px;
  background:var(--surface); border-bottom:1px solid var(--line); padding:10px 16px; min-height:58px}
.top .mark-sm{display:flex}
.top-title{font-weight:600; font-size:16px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-actions{display:flex; gap:6px; align-items:center}
.company{display:none; font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 10px; white-space:nowrap}
.icon-btn{position:relative; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink-2)}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .dot{position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--brand); color:var(--brand-ink); font-size:10px; font-weight:700; line-height:16px}
svg.i{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}

#view{padding:16px; display:flex; flex-direction:column; gap:16px; flex:1; outline:none}
.sig{padding:14px 16px 18px; color:var(--muted); font-size:12px; display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:space-between; border-top:1px solid var(--line)}
.sig b{font-weight:600; color:var(--ink-2)}

.bottom{position:sticky; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.bottom button{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 9px; border:0; background:none; font-size:11.5px; color:var(--muted); cursor:pointer}
.bottom button[aria-current="page"]{color:var(--brand-text); font-weight:600}

/* marca do produto */
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.mark svg{width:34px; height:34px; flex:none}
.mark-name{font-family:var(--f-display); font-weight:600; font-size:20px; letter-spacing:.01em; line-height:1}
.mark-name small{display:block; font-family:var(--f-ui); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px}

/* navegação lateral */
.nav{display:flex; flex-direction:column; gap:2px; padding:8px}
.nav-label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:14px 10px 6px}
.nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--ink-2); text-decoration:none; font-weight:500; font-size:14.5px; cursor:pointer}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current="page"]{background:var(--brand-soft); color:var(--brand-text)}
.nav a .tag{margin-left:auto; white-space:nowrap; flex:none; font-size:10.5px; font-weight:600; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:1px 7px}
.side-foot{margin-top:auto; padding:14px 16px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:3px}
.side-foot b{color:var(--ink); font-weight:600; font-size:13px}

@container app (min-width:720px){
  .shell{grid-template-columns:76px minmax(0,1fr)}
  .side{display:flex; flex-direction:column; position:sticky; top:env(safe-area-inset-top,0px); height:100vh; background:var(--surface); border-right:1px solid var(--line)}
  .stage.framed .side{height:auto; min-height:100%}
  .side .mark{justify-content:center; padding:14px 0}
  .side .mark-name,.nav-label,.nav a .lbl,.nav a .tag,.side-foot{display:none}
  .nav a{justify-content:center; padding:11px 0}
  .bottom{display:none}
  .top .mark-sm{display:none}
  #view{padding:22px}
  .company{display:inline-block}
}
@container app (min-width:1100px){
  .shell{grid-template-columns:250px minmax(0,1fr)}
  .side .mark{justify-content:flex-start; padding:18px 18px 10px}
  .side .mark-name,.nav-label{display:block} .side-foot{display:flex}
  .nav a .lbl{display:inline}
  .nav a .tag{display:inline-block}
  .nav a{justify-content:flex-start; padding:9px 10px}
  #view{padding:26px 30px}
}

/* blocos de página */
.head{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:flex-end; justify-content:space-between}
.head h1{font-family:var(--f-display); font-weight:600; font-size:28px; letter-spacing:-.005em}
.head p{color:var(--muted); margin-top:4px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; min-width:0}
.card h2{font-size:15.5px; font-weight:600}
.card-h{display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.card-h .sub{font-size:12.5px; color:var(--muted)}
.grid{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
@container app (min-width:900px){ .g-2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} .g-2e{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} }

.btn{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); cursor:pointer; font-weight:500; font-size:14px; white-space:nowrap; text-decoration:none; color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.danger{color:var(--bad); border-color:var(--bad)}
.btn.sm{padding:5px 9px; font-size:13px}
.btn.ghost{border-color:transparent; background:transparent}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn svg.i{width:17px; height:17px}
.quick{display:flex; gap:8px; flex-wrap:wrap}

/* indicadores */
.kpis{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@container app (min-width:900px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container app (min-width:1250px){ .kpis{grid-template-columns:repeat(6,minmax(0,1fr))} }
.kpi{text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; cursor:pointer; display:flex; flex-direction:column; gap:4px; min-width:0}
.kpi:hover{border-color:var(--line-2); background:var(--surface-2)}
.kpi .k-l{font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:6px}
.kpi .k-v{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; overflow-wrap:anywhere}
.kpi .k-s{font-size:12px; color:var(--muted)}
.kpi.pos .k-v{color:var(--ok)} .kpi.neg .k-v{color:var(--bad)}

/* chips de situação */
.chip{display:inline-flex; align-self:flex-start; height:fit-content; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; background:var(--surface-2); color:var(--ink-2)}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.ok{background:var(--ok-soft); color:var(--ok)} .chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.bad{background:var(--bad-soft); color:var(--bad)} .chip.info{background:var(--info-soft); color:var(--info)}
.chip.brand{background:var(--brand-soft); color:var(--brand-text)}

/* tabelas */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{text-align:left; font-size:12px; font-weight:600; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .t-main{font-weight:600} .tbl .t-sub{font-size:12.5px; color:var(--muted)}
.row-act{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.empty{padding:28px 12px; text-align:center; color:var(--muted)}
@container app (max-width:719px){
  table.tbl.stack thead{display:none}
  table.tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td{display:block; width:100%}
  .tbl.stack tr{border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 4px; margin-bottom:10px; background:var(--surface)}
  .tbl.stack td{border:0; padding:5px 10px; display:flex; justify-content:space-between; gap:12px; text-align:right}
  .tbl.stack td::before{content:attr(data-l); font-size:12px; color:var(--muted); text-align:left}
  .tbl.stack td.first{display:block; text-align:left} .tbl.stack td.first::before{display:none}
  .tbl.stack td.acts::before{display:none}
}

/* filtros e abas */
.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.toolbar .grow{flex:1 1 200px; min-width:0}
.input,.select,textarea.input{width:100%; padding:8px 10px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); min-height:38px}
.select{width:auto}
.check{display:inline-flex; gap:6px; align-items:center; font-size:13.5px}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:thin}
.tabs button{border:0; background:none; padding:10px 12px; cursor:pointer; color:var(--muted); font-weight:500; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--brand-text); border-bottom-color:var(--brand); font-weight:600}

/* limite MEI */
.limit-figure{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.limit-figure .big{font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.meter{position:relative; height:14px; border-radius:7px; background:var(--surface-2); margin:14px 0 26px; border:1px solid var(--line)}
.meter .fill{position:absolute; inset:0 auto 0 0; border-radius:7px; background:var(--brand)}
.meter .tick{position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--ink-2)}
.meter .tick span{position:absolute; top:22px; transform:translateX(-50%); font-size:11px; color:var(--muted); white-space:nowrap}
.meter .tick.t120 span{transform:translateX(-100%)}
.facts{display:grid; gap:6px; font-size:13.5px}
.facts div{display:flex; justify-content:space-between; gap:12px} .facts dt{color:var(--muted)}
.facts span:last-child{font-variant-numeric:tabular-nums; font-weight:500; text-align:right}

/* alertas e listas */
.alerts{display:flex; flex-direction:column; gap:8px; list-style:none; margin:0; padding:0}
.alert{display:grid; grid-template-columns:4px minmax(0,1fr); gap:10px; padding:9px 10px 9px 0; border-radius:8px; background:var(--surface-2)}
.alert::before{content:""; border-radius:4px 0 0 4px; background:var(--muted)}
.alert.warn::before{background:var(--warn)} .alert.bad::before{background:var(--bad)} .alert.info::before{background:var(--info)} .alert.ok::before{background:var(--ok)}
.alert b{display:block; font-size:13.5px} .alert span{font-size:12.5px; color:var(--muted)}
.alert button{justify-self:start; margin-top:4px}
.feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.feed li{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.feed li:last-child{border-bottom:0}
.feed time{color:var(--muted); font-size:12px; white-space:nowrap; min-width:72px; font-variant-numeric:tabular-nums}

/* gráficos */
.chart-wrap{overflow-x:auto; position:relative}
.chart{width:100%; height:auto; display:block}
@container app (max-width:719px){ .chart{min-width:560px} }
.chart text{fill:var(--muted); font-size:11px; font-family:var(--f-ui)}
.chart .gl{stroke:var(--grid); stroke-width:1}
.chart .b-in{fill:var(--c-in)} .chart .b-out{fill:var(--c-out)} .chart .b-proj{fill:var(--c-proj)} .chart .b-proj-in{fill:var(--c-in); opacity:.38} .chart .b-proj-out{fill:var(--c-out); opacity:.45}
.chart .hit{fill:transparent; cursor:pointer}
.chart .hit:hover,.chart .hit:focus-visible{fill:var(--brand-soft); opacity:.6; outline:none}
.chart .ln{fill:none; stroke:var(--c-line); stroke-width:2.2}
.chart .ln-ink{fill:none; stroke:var(--c-in); stroke-width:2}
.chart .lim{stroke:var(--bad); stroke-width:1.5; stroke-dasharray:5 4}
.chart .lim2{stroke:var(--warn); stroke-width:1.5; stroke-dasharray:2 4}
.chart .dot{fill:var(--c-line)}
.chart .area{fill:var(--brand-soft)}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--muted); margin-top:8px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px}

/* assistente */
.assist-log{display:flex; flex-direction:column; gap:10px; max-height:340px; overflow:auto; padding:2px}
.msg{padding:10px 12px; border-radius:10px; font-size:14px; max-width:92%}
.msg.q{align-self:flex-end; background:var(--ink); color:var(--surface)}
.msg.a{align-self:flex-start; background:var(--surface-2)}
.msg .base{display:block; margin-top:6px; font-size:12px; color:var(--muted)}
.msg ul{margin:6px 0 0; padding-left:18px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.chips button{border:1px solid var(--line-2); background:var(--surface); border-radius:999px; padding:5px 10px; font-size:13px; cursor:pointer}
.chips button:hover{border-color:var(--brand); color:var(--brand-text)}
.ask{display:flex; gap:8px}

/* kanban */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:12px; overflow-x:auto; padding-bottom:6px}
.k-col{background:var(--surface-2); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:8px; min-height:200px; border:2px dashed transparent}
.k-col.over{border-color:var(--brand)}
.k-col header{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:2px 4px}
.k-col header b{font-size:13.5px} .k-col header span{font-size:12px; color:var(--muted)}
.k-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px; cursor:grab; display:flex; flex-direction:column; gap:6px}
.k-card.dragging{opacity:.5}
.k-card .t{font-weight:600; font-size:14px} .k-card .c{font-size:12.5px; color:var(--muted)}
.k-card .v{font-variant-numeric:tabular-nums; font-weight:600}
.k-card .mv{display:flex; gap:6px; align-items:center}
.k-card .mv select{flex:1; min-width:0; padding:4px 6px; border-radius:6px; border:1px solid var(--line-2); background:var(--surface); font-size:12.5px}

/* sobreposições: modal, painel lateral, folha */
#overlay{position:fixed; inset:0; z-index:50; background:rgba(20,16,16,.45); display:flex; justify-content:center; align-items:flex-start;
  padding:max(24px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) 24px max(16px, env(safe-area-inset-left,0px)); overflow:auto}
#overlay.drawer{justify-content:flex-end; align-items:stretch; padding:0}
.modal{background:var(--surface); color:var(--ink); border-radius:14px; width:min(620px,100%); box-shadow:0 20px 60px rgba(0,0,0,.25); display:flex; flex-direction:column; max-height:none}
.modal.wide{width:min(900px,100%)}
#overlay.drawer .modal{border-radius:0; width:min(520px,100%); min-height:100%; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.modal form{display:flex; flex-direction:column; min-height:100%}
.m-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.m-h h2{font-size:17px; font-weight:600}
.m-b{padding:16px; display:flex; flex-direction:column; gap:14px; flex:1}
.m-f{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface)}
.m-err{color:var(--bad); font-size:13.5px; font-weight:500}
.fields{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
.fields .full{grid-column:1/-1}
@media (max-width:560px){ .fields{grid-template-columns:minmax(0,1fr)} }
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label,.field .lbl{font-size:13px; font-weight:600; color:var(--ink-2)}
.field small{font-size:12px; color:var(--muted)}
.note{font-size:13px; color:var(--muted); background:var(--surface-2); border-radius:8px; padding:10px 12px}
.note.warn{background:var(--warn-soft); color:var(--ink)} .note.info{background:var(--info-soft); color:var(--ink)}
.items{display:flex; flex-direction:column; gap:8px}
.item-row{display:grid; grid-template-columns:minmax(0,1fr) 70px 120px 34px; gap:6px; align-items:center}
@media (max-width:560px){ .item-row{grid-template-columns:minmax(0,1fr) 60px 100px 34px} }
.total-line{display:flex; justify-content:flex-end; gap:12px; font-weight:600; font-size:16px}
.pwd{position:relative}

/* documento (orçamento) */
.doc{background:#FFFFFF; color:#23252A; border:1px solid #E3DDDA; border-radius:4px; padding:28px; font-size:13px; overflow-x:auto}
.doc h3{font-family:var(--f-display); font-size:22px; color:#8E2929}
.doc table{width:100%; border-collapse:collapse; margin:14px 0}
.doc th,.doc td{border-bottom:1px solid #E3DDDA; padding:6px 4px; text-align:left}
.doc .r{text-align:right}
.doc .wm{margin-top:16px; font-size:11.5px; color:#6F6866}

#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:60; background:var(--ink); color:var(--surface);
  padding:10px 16px; border-radius:8px; font-size:14px; box-shadow:var(--shadow); max-width:calc(100% - 32px)}
.sheet-list{display:flex; flex-direction:column; gap:2px}
.sheet-list a{display:flex; gap:10px; align-items:center; padding:12px 6px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; cursor:pointer}
.sheet-list a .tag{margin-left:auto; font-size:11px; color:var(--muted)}
.about-logo{border-radius:8px; width:100%; max-width:280px; height:auto; display:block}
.mt-test li{margin:4px 0}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* ===== Versão 1.0.0: base da página, login, impressão, configurações e master ===== */
:root{ color-scheme:light; --on-brand:#FFFFFF; --brand-band:#8E2929; }
html,body{margin:0;padding:0}
[hidden]{display:none!important}
img{max-width:100%}
.auth{min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .auth{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} }
.auth-brand{background:var(--brand-band); color:var(--on-brand); display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  padding-block:28px; padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
.auth-brand .mark-name small{color:rgba(255,255,255,.75)}
.auth-brand h1{font-family:var(--f-display); font-weight:600; font-size:clamp(26px,3.2vw,38px); line-height:1.15; max-width:22ch}
.auth-brand p{max-width:44ch; color:rgba(255,255,255,.85)}
.auth-brand .foot{font-size:12.5px; color:rgba(255,255,255,.75)}
.auth-brand ul{margin:0; padding-left:18px; display:grid; gap:6px; color:rgba(255,255,255,.9); font-size:14px}
.auth-main{display:flex; align-items:center; justify-content:center; padding-block:32px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); background:var(--bg)}
.auth-card{width:min(440px,100%); display:flex; flex-direction:column; gap:14px}
.auth-card h2{font-family:var(--f-display); font-size:26px; font-weight:600}
.auth-card .alt{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px}
.auth-msg{padding:10px 12px; border-radius:8px; font-size:14px}
.auth-msg.ok{background:var(--ok-soft); color:var(--ink)} .auth-msg.bad{background:var(--bad-soft); color:var(--ink)} .auth-msg.info{background:var(--info-soft); color:var(--ink)}
.btn.block{width:100%; justify-content:center; padding:11px 14px}
.pwd input{padding-right:46px}
.eye{position:absolute; right:3px; top:50%; transform:translateY(-50%); width:38px; height:34px; border:0; background:none; cursor:pointer; color:var(--muted); display:grid; place-items:center; border-radius:6px}
.eye:hover{color:var(--ink); background:var(--surface-2)}
.eye[aria-pressed="true"]{color:var(--brand-text)}
.cfg-form{display:grid; gap:12px; max-width:640px}
.cfg-row{display:grid; grid-template-columns:minmax(0,1fr) 160px auto; gap:8px; align-items:end}
@media (max-width:560px){ .cfg-row{grid-template-columns:minmax(0,1fr)} }
a.btn{color:var(--ink)}
.m-f .btn[disabled]{opacity:.6}
.loading{padding:48px 16px; text-align:center; color:var(--muted)}
@media print{
  body.imprimindo .stage, body.imprimindo #auth, body.imprimindo #toast, body.imprimindo .m-h, body.imprimindo .m-f, body.imprimindo .m-b > :not(.doc){display:none!important}
  body.imprimindo #overlay{position:static; background:none; padding:0; display:block}
  body.imprimindo .modal{box-shadow:none; width:100%}
  body.imprimindo .doc{border:0; padding:0}
}