:root{color-scheme:light}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found]){display:none!important}

/* ============================================================
   Guia-C v7 — o sistema inteiro, no desenho aprovado no v5.
   Tokens, tipografia (Inter) e acento (azul de sistema) vem do v5
   sem alteracao: este arquivo estende a direcao, nao a redefine.
   Navegacao conforme R21.1; papeis conforme R2.2.
   Dados sao FICTICIOS (exemplo de demonstracao). A unica tabela
   com fonte real e a de modelos/cores de iPhone (Apple pt-BR).
   ============================================================ */

:root{
  --font: 'Inter', system-ui, sans-serif;
  --bg:        #f5f5f7;
  --surface:   #fbfbfd;
  --surface-2: #f0f0f2;
  --text:      #1d1d1f;
  --text-2:    #6e6e73;
  --text-3:    #a1a1a6;
  --line:      #d2d2d7;
  --line-soft: #e8e8ed;
  --accent:      #0071e3;
  --accent-soft: #e8f1fd;
  --accent-hover:#0077ed;
  --accent-press:#006bd6;
  --ok:        #1d7a45;
  --ok-soft:   #e6f4ec;
  --warn:      #9a6400;
  --warn-soft: #fdf3e0;
  --bad:       #b3261e;
  --bad-soft:  #fdeceb;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,.06), 0 0 0 .5px rgba(0,0,0,.05);

  --ease: cubic-bezier(.25,.1,.25,1);
  --dur: 220ms;

  --bar-h: 58px;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss03' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.47;
  font-size: 15px;
  padding-bottom: calc(var(--bar-h) + 28px + env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

button{font:inherit; color:inherit; cursor:pointer; background:none; border:none;}
a{color:var(--accent); text-decoration:none;}

/* ============ Barra superior ============ */
.appbar{
  position:sticky; top:0; z-index:30;
  background:rgba(245,245,247,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.appbar-in{
  max-width:1080px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:14px;
}
.brand{display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0;}
.brand-mark{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:var(--text); color:#fff;
  display:grid; place-items:center;
  font-size:13px; font-weight:600; letter-spacing:-.02em;
  object-fit:cover; display:block;
}
.brand-name{font-size:15px; font-weight:600; letter-spacing:-.014em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-sub{font-size:12px; color:var(--text-3); white-space:nowrap;}

/* Seletor de papel: SO EXISTE NO MOCKUP, para tornar a R2.2 visivel na
   pratica. No sistema real o papel vem do login e nao e trocavel (R2.9). */
.rolewrap{display:flex; flex-direction:column; align-items:flex-end; gap:3px;}
.demo-flag{
  font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-3);
}
.role{
  display:flex; align-items:center;
  background:var(--surface-2); border:.5px solid var(--line);
  border-radius:999px; padding:2px;
}
.role button{
  font-size:12.5px; font-weight:500; color:var(--text-2);
  padding:6px 12px; border-radius:999px; min-height:32px;
  transition:all var(--dur) var(--ease);
  white-space:nowrap;
}
.role button[aria-pressed="true"]{background:#fff; color:var(--text); box-shadow:var(--shadow-1);}

/* ============ Barra inferior — as 5 secoes da R21.1 ============ */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:rgba(251,251,253,.86);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--bar-h); padding:6px 4px;
  font-size:10.5px; font-weight:500; letter-spacing:0;
  color:var(--text-3);
  transition:color 140ms var(--ease);
}
.tabbar .tab svg{width:23px; height:23px;}
.tabbar .tab[aria-current="page"]{color:var(--accent);}
.tabbar .tab:focus-visible{outline:2px solid var(--accent); outline-offset:-3px; border-radius:8px;}

/* ============ Telas ============ */
.screen{display:none;}
.screen.on{display:block;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}

.head{padding:26px 0 18px;}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:8px;
}
h1{font-size:30px; font-weight:600; letter-spacing:-.022em; line-height:1.1; text-wrap:balance;}
.sub{margin-top:8px; font-size:15.5px; color:var(--text-2); max-width:56ch; letter-spacing:-.008em;}

h2{font-size:19px; font-weight:600; letter-spacing:-.014em;}
.section{margin-top:30px;}
.section-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px;}
.section-head .more{margin-left:auto; font-size:13.5px; font-weight:500; color:var(--accent);}

.back{
  display:inline-flex; align-items:center; gap:5px;
  font-size:14.5px; font-weight:500; color:var(--accent);
  min-height:44px; margin-left:-4px;
}

/* ============ Cartoes e listas ============ */
.card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-2); overflow:hidden;}
.card-pad{padding:20px;}

.list{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-2); overflow:hidden;}
.item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:14px 18px; min-height:60px;
  border-bottom:.5px solid var(--line-soft);
  transition:background 140ms var(--ease);
}
.item:last-child{border-bottom:0;}
/* Item com blocos internos (acoes, status, formulario): em 375px a linha unica
   estourava. O principal e o lado ficam na 1a linha; cada bloco ocupa a sua. */
.item.item-bloco{flex-wrap:wrap;}
.item-bloco > .row, .item-bloco > .field-status, .item-bloco > .card{flex:0 0 100%; min-width:0;}
.item:hover{background:var(--surface-2);}
.item-main{min-width:0; flex:1;}
.item-t{font-size:15px; font-weight:500; letter-spacing:-.008em;}
.item-d{font-size:13px; color:var(--text-2); margin-top:2px;}
.item-side{text-align:right; flex-shrink:0;}
.item-v{font-size:15px; font-weight:500;}
.item-s{font-size:12.5px; color:var(--text-3); margin-top:2px;}

.avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-size:14px; font-weight:600; letter-spacing:0;
}
.thumb{
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  background:var(--surface-2); border:.5px solid var(--line-soft);
  display:grid; place-items:center;
}
.thumb i{width:16px; height:16px; border-radius:50%; background:var(--cor,#c9c9ce); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14);}

/* ============ KPIs ============ */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.kpi{
  background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-1);
  padding:16px 16px 15px;
}
.kpi-k{font-size:12.5px; color:var(--text-2); letter-spacing:-.004em;}
.kpi-v{font-size:24px; font-weight:600; letter-spacing:-.02em; margin-top:5px;}
.kpi-v small{font-size:14px; font-weight:500; color:var(--text-2); letter-spacing:-.01em;}
.kpi-t{font-size:12px; margin-top:5px; color:var(--text-3);}
.kpi-t.up{color:var(--ok);}
.kpi-t.down{color:var(--bad);}

/* ============ Etiquetas de estado ============ */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; letter-spacing:0;
  padding:3px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--text-2);
}
.tag.ok{background:var(--ok-soft); color:var(--ok);}
.tag.warn{background:var(--warn-soft); color:var(--warn);}
.tag.bad{background:var(--bad-soft); color:var(--bad);}
.tag.info{background:var(--accent-soft); color:var(--accent);}

/* ============ Acoes rapidas (R21.2) ============ */
.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.q{
  background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-1);
  padding:14px 12px; min-height:84px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  font-size:13.5px; font-weight:500; letter-spacing:-.006em; text-align:left;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.q:hover{transform:translateY(-1px); box-shadow:var(--shadow-2);}
.q svg{color:var(--accent);}

/* ============ Caixa da IA (R19) ============ */
.ai{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:18px 18px 16px;}
.ai-q{display:flex; gap:10px; align-items:center;}
.ai-q input{
  flex:1; font:inherit; font-size:16px; color:var(--text);
  padding:12px 14px; background:#fff;
  border:.5px solid var(--line); border-radius:var(--r); outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ai-q input:focus{border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft);}
.ai-send{
  background:var(--accent); color:#fff; border-radius:999px;
  min-width:48px; min-height:48px; display:grid; place-items:center;
  transition:background var(--dur) var(--ease);
}
.ai-send:hover{background:var(--accent-hover);}
.ai-sugs{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.ai-sug{
  font-size:13px; font-weight:500; color:var(--text-2);
  padding:8px 14px; min-height:40px; border-radius:999px;
  background:var(--surface-2); border:.5px solid var(--line-soft);
  transition:all var(--dur) var(--ease);
}
.ai-sug:hover{color:var(--text); border-color:var(--line);}
.ai-answer{
  margin-top:14px; padding:14px 16px;
  background:var(--accent-soft); border-radius:var(--r);
  font-size:14.5px; letter-spacing:-.006em;
}
.ai-answer b{font-weight:600;}
.ai-src{margin-top:9px; font-size:12px; color:var(--text-2);}
.ia-cartao{margin-top:12px; padding:16px;}
.ia-acoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.ia-edicao{display:grid; gap:10px; margin-top:12px;}
.ia-edicao label{display:grid; gap:4px; font-size:12px; color:var(--text-2); text-transform:capitalize;}
.ia-edicao input{font:inherit; font-size:16px; color:var(--text); padding:10px 12px; background:#fff; border:.5px solid var(--line); border-radius:var(--r);}
.ia-anexos{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.ia-anexos-barra{margin-top:12px;}

/* ============ Aging de estoque (R18.3) ============ */
.aging{display:grid; grid-template-columns:repeat(5,1fr); gap:8px;}
.age{
  background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-1);
  padding:13px 12px; text-align:left; min-height:44px;
  transition:all var(--dur) var(--ease);
}
.age:hover{box-shadow:var(--shadow-2);}
.age[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent), var(--shadow-1);}
.age-n{font-size:21px; font-weight:600; letter-spacing:-.02em;}
.age-k{font-size:11.5px; color:var(--text-2); margin-top:3px;}
.age-bar{height:3px; border-radius:2px; margin-top:9px; background:var(--line-soft); overflow:hidden;}
.age-bar i{display:block; height:100%; background:var(--accent);}
.age[data-heat="warn"] .age-bar i{background:#c58a1a;}
.age[data-heat="bad"]  .age-bar i{background:var(--bad);}

/* ============ Segmentado ============ */
.seg{display:inline-flex; background:var(--surface-2); border:.5px solid var(--line); border-radius:999px; padding:2px;}
.seg button{
  font-size:13.5px; font-weight:500; color:var(--text-2);
  padding:8px 18px; min-height:40px; border-radius:999px;
  transition:all var(--dur) var(--ease);
}
.seg button[aria-pressed="true"]{background:#fff; color:var(--text); box-shadow:var(--shadow-1);}

/* ============ Busca ============ */
.search{position:relative; margin-bottom:14px;}
.search input{
  width:100%; font:inherit; font-size:16px; color:var(--text);
  padding:12px 14px 12px 40px; min-height:46px;
  background:#fff; border:.5px solid var(--line); border-radius:var(--r); outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search input:focus{border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft);}
.search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-3);}

/* ============ Formularios ============ */
.field{margin-bottom:20px;}
.field:last-child{margin-bottom:0;}
label{display:block; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:7px; letter-spacing:-.004em;}
.hint{font-weight:400; color:var(--text-3);}
input[type="text"], input[type="date"], select, textarea{
  font:inherit; font-size:16px; color:var(--text);
  width:100%; padding:12px 14px; min-height:46px;
  background:#fff; border:.5px solid var(--line); border-radius:var(--r); outline:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance:none; -webkit-appearance:none;
}
input::placeholder{color:var(--text-3);}
input:hover, select:hover{border-color:#b8b8bf;}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft);}
select{
  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 6 6.5 11 1.5' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px; cursor:pointer;
}
textarea{min-height:96px; resize:vertical;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-size:14px; font-weight:500;
  padding:11px 18px; min-height:44px; border-radius:999px;
  background:#fff; border:.5px solid var(--line); color:var(--text-2);
  transition:all var(--dur) var(--ease);
}
.chip:hover{border-color:#b8b8bf; color:var(--text);}
.chip[aria-pressed="true"]{background:var(--text); border-color:var(--text); color:#fff;}
.field-status{font-size:13px; color:var(--ok); margin-top:7px; display:none;}
.field-status.on{display:block;}

/* Escolha exclusiva: duas opcoes sempre visiveis, uma sempre marcada.
   Nunca lista suspensa nem alternador — decisao dela em 09/09/2026. */
.escolha{border:.5px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff;}
.escolha label{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; cursor:pointer;
  min-height:60px; border-bottom:.5px solid var(--line-soft);
  transition:background 140ms var(--ease);
}
.escolha label:last-child{border-bottom:0;}
.escolha input{
  appearance:none; -webkit-appearance:none; margin:2px 0 0;
  width:21px; height:21px; flex:0 0 21px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; padding:0; min-height:0;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.escolha input:checked{border-color:var(--accent);
  box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 12px var(--accent);}
.escolha input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.escolha .txt{flex:1 1 auto; min-width:0;}
.escolha .t{display:block; font-size:15px; font-weight:500; letter-spacing:-.008em;}
.escolha input:checked ~ .txt .t{font-weight:600;}
.escolha .d{display:block; font-size:13px; color:var(--text-2); margin-top:2px;}
.escolha label:has(input:checked){background:var(--accent-soft);}

/* Chave liga/desliga: decisao de sim ou nao, com o que ela revela logo abaixo */
.chave{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  padding:14px 16px; min-height:60px; background:#fff;
  border:.5px solid var(--line); border-radius:var(--r);
}
.chave input{
  appearance:none; -webkit-appearance:none; margin:0; padding:0; flex:0 0 46px;
  width:46px; height:28px; min-height:0; border-radius:999px;
  background:var(--line); border:0; position:relative;
  transition:background var(--dur) var(--ease);
}
.chave input::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease);
}
.chave input:checked{background:var(--accent);}
.chave input:checked::after{transform:translateX(18px);}
.chave input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.chave .t{display:block; font-size:15px; font-weight:500; letter-spacing:-.008em;}
.chave .d{display:block; font-size:13px; color:var(--text-2); margin-top:2px;}
.rot-solto{display:block; font-size:13px; font-weight:500; color:var(--text-2); margin:14px 0 7px;}
.revela > .rot-solto:first-child{margin-top:0;}

/* Previa do recibo: a folha em miniatura, ao lado do que fazer com ela */
.previa{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:12px 14px; background:#fff; border:.5px solid var(--line);
  border-radius:var(--r); cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background var(--dur) var(--ease);
}
.previa:active{background:var(--surface-2);}
.previa .mini{
  flex:0 0 64px; width:64px; height:88px; background:#fff; border:.5px solid var(--line);
  border-radius:4px; box-shadow:var(--shadow-1); padding:6px 5px; overflow:hidden;
}
.previa .mini i{display:block; height:2px; border-radius:1px; background:var(--line); margin-bottom:3px;}
.previa .mini i.tit{height:3px; width:70%; background:var(--text-2); margin-bottom:5px;}
.previa .mini i.cab{width:85%; background:var(--text-3, #b9b9be);}
.previa .mini i.curta{width:45%;}
.previa .mini i.fim{width:60%; margin-top:6px;}
.previa .t{display:block; font-size:15px; font-weight:500; letter-spacing:-.008em;}
.previa .d{display:block; font-size:13px; color:var(--text-2); margin-top:3px;}

/* Os tres layouts, escolhidos pela cara da folha e nao pelo nome */
.layouts{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.layouts label{display:block; cursor:pointer; text-align:center;}
.layouts input{position:absolute; opacity:0; width:0; height:0;}
.layouts .papel{
  display:block; height:104px; background:#fff; border:.5px solid var(--line);
  border-radius:6px; box-shadow:var(--shadow-1); padding:8px 7px; overflow:hidden;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.layouts .papel.bobina{width:52%; margin:0 auto; padding:6px 4px; border-radius:3px;}
.layouts .papel.limpo{padding:12px 14px;}
.layouts .faixa{
  display:block; height:15px; margin:-8px -7px 7px; background:#e8e8ed;
  border-bottom:.5px solid var(--line); border-radius:5px 5px 0 0;
  padding:4px 7px 0;
}
.layouts .faixa i{background:#9a9aa2; margin-bottom:2px;}
.layouts .faixa i.curta{width:38%;}
.layouts .papel.bobina .faixa{margin:-6px -4px 6px; height:13px; padding:3px 4px 0;}
.layouts .caixa{display:block; border:.5px solid var(--line); border-radius:3px; padding:5px 4px; margin-top:5px;}
.layouts input:checked + .papel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent);}
.layouts input:focus-visible + .papel{outline:2px solid var(--accent); outline-offset:3px;}
.layouts .nome{display:block; font-size:12.5px; color:var(--text-2); margin-top:7px;}
.layouts input:checked ~ .nome{color:var(--text); font-weight:500;}
.layouts i{display:block; height:2px; border-radius:1px; background:var(--line); margin-bottom:3px;}
.layouts i.tit{height:3px; width:70%; background:var(--text-2); margin:0 auto 5px;}
.layouts i.cab{width:85%; background:#c9c9ce;}
.layouts i.curta{width:45%;}
.layouts i.fim{width:60%; margin-top:5px;}
.layouts .centro i{margin-left:auto; margin-right:auto;}
.layouts .risco{height:1px; background:var(--line); margin:5px 0 6px;}

/* O que so aparece com a chave ligada */
.revela{display:none; margin-top:12px;}
.revela.on{display:block;}

/* Marcar varias: mesma moldura, caixa quadrada em vez de circulo */
.escolha.multi input{border-radius:6px;}
.escolha.multi input:checked{
  border-color:var(--accent); background:var(--accent);
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 12px var(--accent);
}

/* Folha do documento em pre-visualizacao */
.folha{
  background:#fff; border:.5px solid var(--line); border-radius:var(--r);
  padding:26px 24px; box-shadow:var(--shadow-1); font-size:14px; line-height:1.6;
}
.folha .cabecalho{display:flex; align-items:flex-start; gap:11px;
  border-bottom:.5px solid var(--line-soft); padding-bottom:14px; margin-bottom:16px;}
.folha .logo{flex:0 0 auto; width:54px; height:54px; display:block;}
.folha .logo svg, .folha .logo img{display:block; width:100%; height:100%;
  object-fit:contain; border-radius:8px;}
    
.folha .cabecalho .rz{font-size:15px; font-weight:600; line-height:1.3;}
.folha .cabecalho .logo{margin-top:1px;}
.folha .cabecalho .dd{font-size:12.5px; color:var(--text-2); margin-top:3px;}
.folha h2{font-size:15px; font-weight:600; margin:0 0 12px;}
.folha p{margin:0 0 12px;}
.folha .titulo{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:14px;}
.folha .titulo h2{margin:0;}
.folha .selo{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:#8a6d1f;
  background:#fdf3d7; border:.5px solid #e8d69a; border-radius:4px; padding:3px 7px; white-space:nowrap;}
.folha .partes{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; font-size:12.5px; line-height:1.5;
  border:.5px solid var(--line-soft); border-radius:6px; padding:11px 12px; margin-bottom:16px;}
.folha .rot{display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:4px;}
.folha .rot-bloco{display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-2); margin:16px 0 6px;}
.folha .rol{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.folha .rol .tab{min-width:430px;}
.folha .tab{width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; table-layout:fixed;}
.folha .tab-prod col.c1{width:18%;} .folha .tab-prod col.c2{width:46%;}
.folha .tab-prod col.c4{width:8%;}
.folha .tab-prod col.c5{width:14%;} .folha .tab-prod col.c6{width:14%;}
.folha .tab td, .folha .tab th{overflow-wrap:anywhere;}
.folha .tab th{text-align:left; font-weight:500; color:var(--text-2); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; padding:0 6px 5px 0; border-bottom:.5px solid var(--line);}
.folha .tab td{padding:7px 6px 7px 0; border-bottom:.5px solid var(--line-soft); vertical-align:top;}
.folha .tab th:last-child, .folha .tab td:last-child{padding-right:0;}
.folha .tab .n{text-align:right; white-space:nowrap;}
.folha .tab .sub2{display:block; font-size:10.5px; color:var(--text-2); margin-top:2px;}
.folha .parcelas td{border-bottom:0; padding:3px 6px 3px 0;}
.folha .parcelas .mk{font-weight:600;}
.folha .parcelas .acr{text-align:right; color:var(--text-2); font-size:11px;}
.folha .resumo{margin-top:12px; margin-left:auto; width:min(260px,100%); font-size:12.5px;
  font-variant-numeric:tabular-nums;}
.folha .resumo div{display:flex; justify-content:space-between; gap:12px; padding:4px 0;}
.folha .resumo .tot{border-top:.5px solid var(--line); margin-top:4px; padding-top:7px; font-size:14px;}
.folha .obs{font-size:12px; line-height:1.55; margin:6px 0 0;}
.folha .assinaturas{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px;
  font-size:11.5px; color:var(--text-2); text-align:center;}
.folha .assinaturas .linha{display:block; border-top:.5px solid var(--text-2); margin-bottom:5px;}
.folha .assinaturas .rubrica{display:block; height:30px; line-height:30px; color:var(--text);
  font-family:"Segoe Script","Bradley Hand",cursive; font-size:17px;}
.folha .assinaturas .rubrica.vazia{color:transparent;}
.folha .assinaturas .obs2{display:block; font-size:10px; margin-top:2px; color:var(--text-2);}
.folha .rodape{border-top:.5px solid var(--line-soft); padding-top:14px; margin-top:18px;
  font-size:12.5px; color:var(--text-2);}

/* Os tres layouts aplicados na folha de verdade */
.folha.lay-cupom{
  max-width:302px; margin:0 auto; padding:16px 14px; font-size:12px; line-height:1.5;
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  border-radius:2px; box-shadow:none; border:.5px dashed var(--line);
}
.folha.lay-cupom .cabecalho{text-align:center; border-bottom-style:dashed;}
.folha.lay-cupom .cabecalho .rz{font-size:12.5px;}
.folha.lay-cupom .cabecalho .dd{font-size:10.5px;}
.folha.lay-cupom h2{font-size:12.5px; text-align:center; text-transform:uppercase; letter-spacing:.04em;}
.folha.lay-cupom .rodape{border-top-style:dashed; font-size:10.5px;}

@media (max-width:560px){
  .folha .rol{overflow:visible;}
  .folha .rol .tab{min-width:0;}
  .folha .tab{table-layout:auto;}
  .folha .tab colgroup{display:none;}
  .folha .tab td{width:auto !important;}
  .folha .tab thead{display:none;}
  .folha .tab tbody tr{display:block; padding:7px 0; border-bottom:.5px solid var(--line-soft);}
  .folha .tab td{display:flex; justify-content:space-between; gap:10px;
    border:0; padding:1px 0; text-align:right;}
  .folha .tab td::before{content:attr(data-r); color:var(--text-2); text-align:left; flex:1 1 auto;}
  .folha .tab td .sub2{display:inline; margin:0;}
  .folha .tab-prod td:nth-child(2), .folha .tab-troca td:nth-child(1){
    display:block; text-align:left; font-weight:600; margin-bottom:3px;}
  .folha .tab-prod td:nth-child(2) .sub2, .folha .tab-troca td:nth-child(1) .sub2{
    display:block; font-weight:400;}
  .folha .tab .n{text-align:left;}
  .folha .parcelas tbody tr{border-bottom:0; padding:2px 0;}
  .folha .parcelas .acr{text-align:right;}
}
.folha.lay-cupom .titulo{display:block; text-align:center;}
.folha.lay-cupom .selo{display:inline-block; margin-top:6px;}
.folha.lay-cupom .partes{grid-template-columns:1fr; border:0; border-bottom:.5px dashed var(--line);
  border-radius:0; padding:0 0 10px; gap:8px; font-size:11px;}
.folha.lay-cupom .rol{overflow:visible;}
.folha.lay-cupom .rol .tab{min-width:0;}
.folha.lay-cupom .tab{font-size:11px;}
.folha.lay-cupom .tab{table-layout:auto;}
.folha.lay-cupom .tab colgroup{display:none;}
.folha.lay-cupom .tab td{width:auto !important;}
.folha.lay-cupom .tab thead{display:none;}
.folha.lay-cupom .tab td{display:flex; justify-content:space-between; gap:10px;
  border:0; padding:1px 0; text-align:right;}
.folha.lay-cupom .tab td::before{content:attr(data-r); color:#666; text-align:left; flex:1 1 auto;}
.folha.lay-cupom .tab td .sub2{display:inline; margin:0; font-size:10px;}
.folha.lay-cupom .tab-prod td:nth-child(2), .folha.lay-cupom .tab-troca td:nth-child(1){
  display:block; text-align:left; font-weight:600; margin-bottom:3px;}
.folha.lay-cupom .tab-prod td:nth-child(2) .sub2, .folha.lay-cupom .tab-troca td:nth-child(1) .sub2{
  display:block; font-weight:400;}
.folha.lay-cupom .tab tbody tr{display:block; padding:6px 0; border-bottom:.5px dashed var(--line);}
.folha.lay-cupom .tab .n{text-align:left;}
.folha.lay-cupom .parcelas tbody tr{border-bottom:0; padding:3px 0;}
.folha.lay-cupom .resumo{width:100%; font-size:11.5px;}
.folha.lay-cupom .assinaturas{grid-template-columns:1fr; gap:26px; margin-top:24px;}
.folha.lay-cupom .cabecalho{display:block;}
.folha.lay-cupom .logo{margin:0 auto 7px;}
.folha.lay-min{
  border:0; box-shadow:none; background:transparent; padding:8px 0;
}
.folha.lay-min .cabecalho{border-bottom:0; padding-bottom:0; margin-bottom:22px;}
.folha.lay-min .cabecalho .dd{display:none;}
.folha.lay-min h2{font-size:19px; font-weight:600; letter-spacing:-.015em; margin-bottom:16px;}
.folha.lay-min .rodape{border-top:0; padding-top:0; margin-top:24px;}
.folha.lay-min .selo{display:none;}
.folha.lay-min .partes{border:0; border-radius:0; padding:0; margin-bottom:24px;}
.folha.lay-min .logo{width:42px; height:42px;}
.folha.lay-min .tab th{border-bottom-color:var(--text-2);}
.folha.lay-min .tab td{border-bottom:0;}
.folha.lay-min .rot-bloco{margin-top:24px;}

/* Barra de formato dentro da tela do documento */
.lay-bar{display:flex; gap:8px; margin:0 0 14px;}
.lay-bar button{
  flex:1 1 0; min-height:38px; font:inherit; font-size:13px; cursor:pointer;
  background:#fff; color:var(--text); border:.5px solid var(--line);
  border-radius:999px; padding:8px 10px;
}
.lay-bar button[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500;
}

/* Ctrl+P: sai a folha, nada mais */
@media print{
  body{background:#fff;}
  .topbar, .tabbar, .formbar, .head, .lay-bar, .demo-note, .back{display:none !important;}
  .screen{padding:0 !important;}
  .wrap{max-width:none; padding:0;}
  .folha{border:0; box-shadow:none; padding:0;}
}

/* Paineis das abas da tela de Documentos */
.pane{display:none;}
.pane.on{display:block;}
.editor-bar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.editor-bar button{
  min-width:44px; min-height:40px; padding:0 12px; font-size:14px; font-weight:600;
  background:#fff; border:.5px solid var(--line); border-radius:var(--r-sm); color:var(--text-2);
}

/* Cores como bolinhas de 44px — decisao dela no v5 */
.colors{display:flex; flex-wrap:wrap; gap:14px;}
.swatch{
  width:44px; height:44px; border-radius:50%; position:relative;
  border:.5px solid rgba(0,0,0,.14); background:var(--c,#ccc);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--accent);}
.color-chosen{margin-top:12px; font-size:13.5px; color:var(--text-2);}

/* ============ Botoes ============ */
.btn{
  font-size:15px; font-weight:500;
  padding:12px 22px; min-height:46px; border-radius:999px;
  border:.5px solid transparent; transition:all var(--dur) var(--ease);
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-primary:active{background:var(--accent-press);}
.btn-ghost{background:transparent; color:var(--accent);}
.btn-ghost:hover{background:var(--accent-soft);}
.btn-line{background:#fff; border-color:var(--line); color:var(--text);}
.btn-line:hover{border-color:#b8b8bf;}

/* Barra de acao fixa das telas de formulario — acima da tab bar */
.formbar{
  position:fixed; left:0; right:0; bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  z-index:35; display:flex; flex-wrap:wrap; gap:12px; padding:12px 20px;
  background:rgba(251,251,253,.9);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--line);
}
.formbar .btn{flex:1 1 120px; min-height:48px; font-size:16px; padding:12px 10px; white-space:nowrap;}
.screen.has-formbar{padding-bottom:88px;}

/* ============ Tabelas: rolam sozinhas, a pagina nunca ============ */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg); box-shadow:var(--shadow-2); background:var(--surface);}
table{border-collapse:collapse; width:100%; min-width:580px;}
th, td{padding:12px 16px; text-align:left; font-size:13.5px; border-bottom:.5px solid var(--line-soft); white-space:nowrap;}
th{font-size:12px; font-weight:600; color:var(--text-2); letter-spacing:.02em; text-transform:uppercase;}
tr:last-child td{border-bottom:0;}
td.num, th.num{text-align:right;}

/* ============ Papeis (R2.1) ============
   Master   = Administrador Master, ve todas as lojas (R2.7)
   Admin    = Administrador da loja, ve so a propria loja
   Vendedor = nao ve custo, margem nem lucro global (R2.2)            */
body[data-role="vendedor"] .only-admin{display:none !important;}
body[data-role="vendedor"] .kpis{grid-template-columns:repeat(2,1fr);}
/* R20.12 (decisao 33): o vendedor nunca ve valor de venda; no lugar, R$ ***** com o olho cortado, sem revelar */
.only-vendedor{display:none !important;}
body[data-role="vendedor"] .only-vendedor{display:inline-flex !important;}
body[data-role="vendedor"] tr.only-vendedor{display:table-row !important;}
.valor-oculto{align-items:center; gap:6px; color:var(--text-3); letter-spacing:.06em; white-space:nowrap;}
.only-master{display:none;}
body[data-role="master"] .only-master{display:block;}
.master-note{
  margin-top:14px; font-size:13px; padding:10px 14px; border-radius:var(--r);
  background:rgba(0,113,227,.10); color:var(--accent);
}
.tenantbar{
  display:none; background:var(--text); color:#fff;
  padding:8px 16px; font-size:12.5px; font-weight:500;
}
body[data-role="master"] .tenantbar,
body[data-escolher-loja] .tenantbar{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;}
.tenantbar select{
  font-size:16px; font-family:inherit; border:0; border-radius:8px;
  padding:6px 10px; min-height:34px; background:rgba(255,255,255,.18); color:#fff;
}
.role-note{
  display:none; margin-top:14px; font-size:13px;
  background:var(--warn-soft); color:var(--warn);
  padding:10px 14px; border-radius:var(--r);
}
body[data-role="vendedor"] .role-note{display:block;}

/* ============ Menu "Mais" ============ */
.menu-group{margin-top:22px;}
.menu-title{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); margin:0 4px 8px;}

.demo-note{
  margin:26px 0 0; font-size:12.5px; color:var(--text-3);
  line-height:1.6; border-top:.5px solid var(--line-soft); padding-top:14px;
}

@media (max-width: 900px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .quick{grid-template-columns:repeat(2,1fr);}
  .aging{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 600px){
  .wrap{padding:0 16px;}
  .head{padding:20px 0 14px;}
  h1{font-size:26px;}
  .sub{font-size:15px;}
  .row{grid-template-columns:1fr;}
  .brand-sub{display:none;}
  .role button{padding:6px 10px; font-size:12px;}
  .aging{grid-template-columns:repeat(2,1fr);}
  .card{border-radius:var(--r-lg);}
  .swatch:hover{transform:none;}
}
/* No notebook a navegacao NAO vira lateral: uma gramatica so para o
   sistema inteiro, com o celular como caso base. */
@media (min-width: 901px){
  .tabbar{max-width:560px; margin:0 auto; border-radius:var(--r-lg) var(--r-lg) 0 0; border:.5px solid var(--line); border-bottom:0;}
  .tabbar .tab{font-size:11px;}
}

/* ============ Foco de teclado (R24.5) ============ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline-offset:0;}
.swatch:focus-visible{outline-offset:4px; border-radius:50%;}
.tabbar .tab:focus-visible{outline-offset:-3px; border-radius:8px;}

/* ============ Retorno ao toque (R24.6) ============ */
.item:active, .card[data-go]:active, .quick a:active, .quick button:active,
.menu-item:active{background:var(--surface-2);}
.chip:active{transform:scale(.97);}
.btn-line:active, .btn-ghost:active{background:var(--surface-2);}
.item, .chip, .btn{-webkit-tap-highlight-color:transparent;}

/* ============ Estado vazio (R24.1 / R24.2) ============ */
.empty{
  display:none; text-align:center; padding:44px 24px;
  background:var(--surface); border:.5px solid var(--line-soft); border-radius:var(--r-lg);
}
.empty.on{display:block;}
.empty-ico{
  width:46px; height:46px; margin:0 auto 14px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.empty-t{font-size:16.5px; font-weight:600; letter-spacing:-.012em;}
.empty-d{margin-top:6px; font-size:14.5px; color:var(--text-2); max-width:34ch; margin-inline:auto;}
.empty .btn{margin-top:18px;}

/* ============ Carregando (R24.4) ============ */
.skel{display:none;}
.skel.on{display:block;}
.skel-row{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px; border-bottom:.5px solid var(--line-soft);
}
.skel-b{
  background:linear-gradient(90deg, var(--surface-2) 25%, #e9e9ee 37%, var(--surface-2) 63%);
  background-size:400% 100%; border-radius:6px; height:12px;
  animation:shimmer 1.4s var(--ease) infinite;
}
.skel-c{width:38px; height:38px; border-radius:50%; flex:none;}
@keyframes shimmer{from{background-position:100% 0;} to{background-position:0 0;}}

/* ============ Confirmacao de acao (R24.3) ============ */
.toast-zona{
  position:fixed; left:0; right:0; z-index:60;
  bottom:calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
  display:flex; justify-content:center; padding:0 20px; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:10px;
  max-width:420px; padding:13px 18px; border-radius:999px;
  background:rgba(29,29,31,.94); color:#fff;
  font-size:14.5px; font-weight:500; letter-spacing:-.006em;
  box-shadow:var(--shadow-2);
  opacity:0; transform:translateY(10px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.on{opacity:1; transform:translateY(0);}
.toast svg{flex:none; color:#6ee7a0;}

/* ============ Cancelamento de venda (R25) ============ */
.btn-danger{background:#b3261e; color:#fff; border-color:#b3261e;}
.btn-mini{
  font-size:13px; font-weight:500; color:#b3261e;
  padding:8px 12px; min-height:36px; border-radius:999px;
  border:.5px solid var(--line); background:#fff; white-space:nowrap; cursor:pointer;
}
tr[data-cancelada] td{color:#86868b;}
tr[data-cancelada] td.num{text-decoration:line-through;}
.aviso{
  margin-top:18px; padding:14px 16px; border-radius:14px;
  background:#fff4e5; color:#8a5300; font-size:14px; line-height:1.5;
}
/* P1-2 (revisão): somente_leitura é bloqueio de verdade, não tolerância —
   precisa da cor de alerta (--bad/--bad-soft), não do âmbar de .aviso puro. */
.aviso.bad{background:var(--bad-soft); color:var(--bad);}