@font-face { font-family: 'DM Sans'; src: url(../pdv/fonts/dm-sans-latin.woff2) format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(../pdv/fonts/manrope-latin.woff2) format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root {
  --f-sans: 'DM Sans', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --f-display: 'Manrope', 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg: #e3e7ee; --superficie: #ffffff; --tinta: #111827; --suave: #4b5565; --linha: #cdd3dd; --linha-forte: #8f9aab;
  --destaque: #d1531a; --destaque-tinta: #ffffff; --destaque-fundo: #fdeee6;
  --perigo: #d92d20; --perigo-fundo: #fdecea; --aviso: #b45309; --aviso-fundo: #fef3e2; --ok: #15803d; --ok-fundo: #e7f6ec;
  --barra: #e08a5c; --grade: #dfe3ea; --neutro-fundo: #e6eaf0;
  --sombra: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .10);
  --sombra-alta: 0 12px 32px rgba(16, 24, 40, .18);
}
:root[data-tema="escuro"] {
  --bg: #12151a; --superficie: #1b1f27; --tinta: #e7e9ee; --suave: #9aa3b2; --linha: #2a303b; --linha-forte: #3a4250;
  --destaque: #f08a56; --destaque-tinta: #1d1209; --destaque-fundo: #2c221c;
  --perigo: #f48b84; --perigo-fundo: #3a2321; --aviso: #e0b050; --aviso-fundo: #33291a; --ok: #5fcf8a; --ok-fundo: #1d3226;
  --barra: #c4703f; --grade: #262c36; --neutro-fundo: #252b35;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3); --sombra-alta: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 var(--f-sans); background: var(--bg); color: var(--tinta); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.suave { color: var(--suave); }
.num { text-align: right; white-space: nowrap; }
.perigo { color: var(--perigo); }
.alerta { color: var(--aviso); }
.ok { color: var(--ok); }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 16px; color: var(--tinta); margin: 28px 0 10px; display: flex; align-items: center; gap: 8px; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
h2 .ic { color: var(--suave); }

/* entrada */
.entrada { min-height: 100%; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.painel { width: 100%; max-width: 380px; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-alta); padding: 32px; }
.painel h1 { font-size: 20px; letter-spacing: .06em; margin-bottom: 20px; color: var(--destaque); }
.painel label { display: block; margin-top: 14px; font-size: 12px; color: var(--suave); }
.painel input { margin-top: 4px; }
.painel .btn { width: 100%; margin-top: 22px; padding: 10px; }

/* Shell no estilo da referência (docs/tema-pdv/74d6edbe-…): barra lateral de ícones, cabeçalho "varejoo. retaguarda" e conteúdo de até 1400 px */
#rail { position: fixed; inset: 0 auto 0 0; width: 76px; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0; background: var(--superficie); border-right: 1px solid var(--linha); }
#rail .logo { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 8px; background: var(--destaque); color: var(--destaque-tinta); font-family: var(--f-display); font-size: 18px; font-weight: 800; }
#rail .logo:hover { text-decoration: none; }
#menu { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.mi { position: relative; width: 56px; }
.mi > a, .mi > button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 8px 0; border: 0; background: none; border-radius: 8px; color: var(--suave); cursor: pointer; font-size: 10px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.mi > a:hover, .mi > button:hover, .mi.aberto > button { background: var(--bg); color: var(--tinta); text-decoration: none; }
.mi.ativo > a, .mi.ativo > button { background: var(--destaque-fundo); color: var(--destaque); }
.mi .ic { width: 21px; height: 21px; }
#menu .sub { display: none; position: absolute; left: calc(100% + 14px); top: 0; z-index: 30; min-width: 230px; padding: 6px; background: var(--superficie); border-radius: 8px; box-shadow: var(--sombra-alta); border: 1px solid var(--linha); }
#menu .sub::before { content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; }
#menu .mi:hover > .sub, #menu .mi.aberto > .sub { display: block; }
#menu .sub a { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 6px; color: var(--tinta); font-size: 14px; }
#menu .sub a:hover { background: var(--bg); text-decoration: none; }
#menu .sub a.ativo { background: var(--destaque-fundo); color: var(--destaque); font-weight: 600; }
#menu .sub a.externo::after { content: "↗"; color: var(--suave); }
#corpo { margin-left: 76px; min-width: 0; }
#barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 30px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
#barra .marca { min-width: 0; }
#barra .marca p { margin: 0; }
#barra .marca-n { font-family: var(--f-display); font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--destaque); }
#barra .marca-n span { color: var(--tinta); }
#barra .marca-n small { margin-left: 4px; font-family: var(--f-sans); font-size: 14px; font-weight: 500; color: var(--suave); }
#sub-barra { font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#direita { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.btn-icone { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--suave); }
.btn-icone:hover { background: var(--bg); color: var(--tinta); }
.btn-icone .ic { width: 19px; height: 19px; }
#usuario { display: flex; align-items: center; gap: 10px; }
#usuario .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--destaque-fundo); color: var(--destaque); display: grid; place-items: center; font-weight: 700; }
#usuario .quem { line-height: 1.2; font-size: 14px; font-weight: 600; }
#usuario .quem span { display: block; color: var(--suave); font-size: 12px; font-weight: 400; }
#btn-menu { display: none; }
main { min-width: 0; padding: 0 30px 48px; }
#topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 8px; flex-wrap: wrap; }
#topo h1 { font-family: var(--f-display); font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
#topo h1 .ic { width: 21px; height: 21px; color: var(--destaque); }
#acoes-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#conteudo { padding-top: 6px; }

/* controles */
input, select, textarea { padding: 8px 11px; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 8px; outline: none; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-fundo); }
input[type=checkbox], input[type=radio] { width: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 8px; cursor: pointer; white-space: nowrap; font-weight: 500; }
.btn:hover { border-color: var(--tinta); text-decoration: none; }
.btn .ic { width: 16px; height: 16px; }
.btn.primario { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-tinta); font-weight: 600; }
.btn.primario:hover { filter: brightness(1.06); }
.btn.perigo { color: var(--perigo); border-color: var(--perigo); }
.btn[disabled] { opacity: .5; cursor: default; }
td .btn, .tabela .btn { padding: 4px 10px; font-size: 13px; border-radius: 6px; }
.barra { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 16px 0 14px; padding: 14px 16px; background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); border: 1px solid var(--linha); }
.barra label { font-size: 12px; color: var(--suave); display: block; margin-bottom: 3px; }
.barra .campo { min-width: 140px; }
.barra .grande { flex: 1; min-width: 220px; }
.erro { color: var(--perigo); font-size: 13px; min-height: 18px; margin-top: 10px; }

/* tabelas: cada tabela é um cartão */
.tabela { overflow-x: auto; background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); border: 1px solid var(--linha); }
td select { min-width: 150px; width: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; padding: 14px 16px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th.num { text-align: right; }
td { padding: 12px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr[data-id]:hover, tbody tr.clicavel:hover { background: var(--bg); cursor: pointer; }
tfoot td { font-weight: 600; border-top: 1px solid var(--linha-forte); border-bottom: 0; background: var(--bg); }
.vazio { padding: 32px 16px; color: var(--suave); text-align: center; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--neutro-fundo); color: var(--suave); white-space: nowrap; border: 0; }
.tag.ok { background: var(--ok-fundo); color: var(--ok); }
.tag.ruim { background: var(--perigo-fundo); color: var(--perigo); }
.tag.atencao { background: var(--aviso-fundo); color: var(--aviso); }
.paginacao { display: flex; gap: 12px; align-items: center; padding: 14px 0; color: var(--suave); }

/* painel: indicadores = número grande colorido + rótulo, como cartões de resumo */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 14px; }
.indicador { display: flex; flex-direction: column; padding: 18px 20px; border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); border: 1px solid var(--linha); }
.indicador .valor { order: 1; font-size: 26px; font-weight: 700; line-height: 1.15; }
.indicador .rotulo { order: 2; font-size: 13px; color: var(--tinta); margin-top: 4px; }
.indicador .nota { order: 3; font-size: 12px; color: var(--suave); margin-top: 2px; }
.indicador.ok .valor { color: var(--ok); }
.indicador.ruim .valor { color: var(--perigo); }
.indicador.atencao .valor { color: var(--aviso); }
a.indicador { color: inherit; }
a.indicador:hover { text-decoration: none; box-shadow: var(--sombra), 0 0 0 1px var(--destaque); }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 40px; }
.chave-valor { width: 100%; }
.chave-valor td { padding: 8px 0; }
.chave-valor td:last-child { text-align: right; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-top: 14px; }
.cartao { border: 1px solid var(--linha); background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); padding: 18px 20px; min-width: 0; }
.cartao h2 { margin: 0 0 12px; font-size: 15px; }
.cartao .vazio { padding: 12px 0; }
.cartao .tabela { box-shadow: none; border: 0; border-radius: 0; background: none; }
.cartao th, .cartao td { padding-left: 0; padding-right: 8px; }
.cartao th:last-child, .cartao td:last-child { padding-right: 0; }
.atalhos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pref { display: flex; gap: 16px; align-items: center; }
.pref label { display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* gráficos */
.grafico { position: relative; margin-top: 4px; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo { stroke: var(--grade); stroke-width: 1; }
.grafico .rot { fill: var(--suave); font-size: 11px; }
.grafico .barra-d { fill: var(--barra); }
.grafico .barra-d:hover, .grafico .barra-d.foco { fill: var(--destaque); }
.grafico .linha-d { fill: none; stroke: var(--barra); stroke-width: 2; }
.grafico .ref { stroke: var(--linha-forte); stroke-width: 1; }
#dica { position: fixed; z-index: 60; pointer-events: none; background: var(--tinta); color: var(--bg); padding: 5px 9px; font-size: 12px; border-radius: 6px; white-space: pre; }
details.tabela-alt { margin-top: 6px; font-size: 13px; }
details.tabela-alt summary { cursor: pointer; color: var(--suave); }

/* janelas modais */
#veu { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: grid; place-items: center; padding: 16px; overflow: hidden; z-index: 50; }
#janela { background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta); width: 100%; max-width: 640px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
#janela.larga { max-width: 1120px; }
.jan-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--linha); }
.jan-topo h3 { font-size: 17px; flex: 1; min-width: 0; }
.jan-icone { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--destaque-fundo); color: var(--destaque); }
.jan-icone .ic { width: 17px; height: 17px; }
.jan-corpo { padding: 12px 22px 22px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.jan-corpo::-webkit-scrollbar { display: none; }
.rodape-janela { position: sticky; bottom: -22px; z-index: 2; }
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.form .cheio { grid-column: 1 / -1; }
.form label { font-size: 12px; color: var(--suave); display: block; font-weight: 500; }
.form label input, .form label select, .form label textarea { margin-top: 4px; color: var(--tinta); font-size: 14px; }
.form .secao { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--tinta); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }
.form.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.form.g6 > label { grid-column: span 3; }
.form.g6 > .cheio, .form.g6 > .secao, .form.g6 > .html-bloco { grid-column: 1 / -1; }
.form .secao { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--suave); margin-top: 6px; }
.aba-painel > .secao:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
label.check { display: flex; align-items: flex-start; align-self: end; gap: 10px; font-size: 14px; color: var(--tinta); padding: 6px 0 8px; cursor: pointer; }
label.check input { margin-top: 3px; }
.ajuda { display: block; font-size: 11.5px; color: var(--suave); margin-top: 4px; font-weight: 400; }
.ficha-topo { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 8px 16px; margin-bottom: 12px; background: var(--bg); border-radius: 12px; border: 1px solid var(--linha); }
.ficha-topo .ident { flex: 1; min-width: 220px; }
.ficha-topo .nome { font-size: 16px; font-weight: 700; line-height: 1.25; }
.ficha-topo .sub { font-size: 12px; color: var(--suave); margin-top: 3px; }
.ficha-topo .valor { text-align: right; }
.ficha-topo .valor .v { font-size: 20px; font-weight: 700; }
.ficha-topo .valor .r { font-size: 11.5px; color: var(--suave); }
.kpis-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi-mini { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 14px; background: var(--superficie); }
.kpi-mini .v { font-size: 20px; font-weight: 700; }
.kpi-mini .r { font-size: 12px; color: var(--suave); }
.kpi-mini.ok .v { color: var(--ok); }
.kpi-mini.ruim .v { color: var(--perigo); }
.cel-produto { line-height: 1.3; }
.cel-produto b { font-weight: 600; }
.cel-produto .sub { display: block; font-size: 12px; color: var(--suave); }
.abas { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin: -2px 0 12px; }
.aba { padding: 10px 18px; border: 0; background: none; cursor: pointer; font-weight: 500; color: var(--suave); white-space: nowrap; border-radius: 8px 8px 0 0; transition: color .15s, background-color .15s; }
.aba:hover { color: var(--tinta); background: var(--bg); }
.aba:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
.aba.ativa { color: var(--destaque); font-weight: 600; background: none; }
.aba-indicador { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--destaque); border-radius: 2px; transition: transform .24s cubic-bezier(.4, 0, .2, 1), width .24s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
@media (max-width: 760px) { .abas { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .abas::-webkit-scrollbar { display: none; } }
.aba.com-erro::after { content: " •"; color: var(--perigo); }
.aba-painel.boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.box { grid-column: 1 / -1; background: var(--bg); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 16px 14px; min-width: 0; }
.box.meia { grid-column: span 1; }
.box-t { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.box .form { gap: 8px 14px; }
.box input:not([type=checkbox]), .box select { padding: 6px 10px; }
.box .form label input, .box .form label select { margin-top: 3px; }
.box .kpi-mini { padding: 7px 12px; }
.box .kpi-mini .v { font-size: 17px; }
.box .form.g6 > .html-bloco { margin: 0; }
.box .kpi-mini { background: var(--superficie); }
.item-cards { display: flex; flex-direction: column; gap: 6px; }
.item-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--linha); border-radius: 10px; }
.item-card.ruim { border-left-color: var(--perigo); }
.item-card .ic-e { min-width: 0; }
.item-card .ic-t { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-card .ic-s { font-size: 11.5px; color: var(--suave); }
.item-card .ic-d { text-align: right; flex: none; }
.item-card .ic-v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-card.ruim .ic-d .ic-s { color: var(--perigo); font-weight: 600; }
/* Relatórios: tabelas chave-valor dentro de boxes e cartões viram uma pilha de cartões (uma linha = um cartão) */
:is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas), :is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas) tbody { display: block; }
:is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas) tbody { display: flex; flex-direction: column; gap: 6px; }
:is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas) tr { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; }
:is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas) td { padding: 0; min-width: 0; border: 0; }
:is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas) td:last-child { white-space: nowrap; }
:is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas) td:not([style*="width"]) { flex: 1 1 0; }
:is(.box, .cartao) .chave-valor:not(.sim-curva):not(.doc-parcelas) td:last-child:nth-child(2) { flex: 0 0 auto; }
:is(.box, .cartao) .chave-valor tr.cab { background: none; border: 0; padding: 0 12px 0; font-size: 12px; color: var(--suave); }
:is(.box, .cartao) .chave-valor tr.cab td { padding: 0; border: 0; }
@media (max-width: 760px) { .box.meia { grid-column: 1 / -1; } }
#veu-sobre { position: fixed; inset: 0; z-index: 65; background: rgba(15, 23, 42, .45); display: grid; place-items: center; padding: 16px; }
#veu-sobre .caixa { background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta); padding: 28px 28px 0; width: 100%; max-width: 460px; overflow: hidden; animation: janela-entra .2s cubic-bezier(.2, .8, .2, 1); }
#janela.compacta { max-width: 460px; }
#janela.compacta .jan-corpo { padding: 28px 28px 0; }
/* confirmações (padrão único): ícone, mensagem, rodapé de botões */
.confirma { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 26px; }
.confirma p { margin: 0; font-size: 15px; line-height: 1.5; padding-top: 6px; }
.confirma-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--destaque-fundo); color: var(--destaque); }
.confirma-ic.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.confirma-ic .ic { width: 24px; height: 24px; }
#veu-sobre .rodape-janela, #janela.compacta .rodape-janela { margin: 0 -28px; padding: 14px 28px; position: static; }
.rodape-janela { display: flex; justify-content: flex-end; gap: 8px; margin: 16px -22px -22px; padding: 10px 22px; background: var(--bg); border-top: 1px solid var(--linha); align-items: center; }
.rodape-janela .esq { margin-right: auto; }
#aviso { position: fixed; right: 20px; bottom: 20px; background: var(--tinta); color: var(--bg); padding: 11px 16px; z-index: 70; max-width: 420px; border-radius: 10px; box-shadow: var(--sombra-alta); }
#aviso.erro-aviso { background: var(--perigo); color: #fff; }

@media (max-width: 1240px) {
  #btn-menu { display: grid; }
  #barra { padding: 0 14px; }
  #corpo { margin-left: 0; }
  #rail { display: none; }
  #rail:has(#menu.aberto) { display: flex; inset: 76px 0 auto 0; width: auto; align-items: stretch; gap: 0; padding: 8px 12px 14px; max-height: calc(100vh - 76px); overflow: auto; border-right: 0; box-shadow: var(--sombra-alta); }
  #rail .logo { display: none; }
  #menu { align-items: stretch; }
  .mi { width: 100%; }
  .mi > a, .mi > button { flex-direction: row; gap: 10px; padding: 10px 12px; font-size: 14px; }
  #menu .sub { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 6px 34px; min-width: 0; }
  #menu .sub::before { display: none; }
  #usuario .quem { display: none; }
}
@media (max-width: 960px) {
  main { padding: 0 14px 40px; }
  .form { grid-template-columns: 1fr; }
  .cartoes { grid-template-columns: 1fr; }
}

/* análise de produto */
.barra-h { height: 8px; background: var(--neutro-fundo); border-radius: 999px; overflow: hidden; }
.barra-h span { display: block; height: 100%; background: var(--barra); border-radius: 999px; }
.barras-dia { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.barras-dia i { flex: 1; min-width: 2px; background: var(--barra); border-radius: 2px 2px 0 0; cursor: default; }
.barras-dia i:hover { background: var(--destaque); }
.barras-dia i.zero { background: var(--linha-forte); }
.eixo-dias { display: flex; justify-content: space-between; font-size: 11px; color: var(--suave); margin-top: 3px; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font-size: 13px; }
@media (max-width: 760px) { .duas-col { grid-template-columns: 1fr; } }

/* comportamento: transições e microinterações */
@keyframes veu-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes veu-sai { to { opacity: 0; } }
@keyframes janela-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes janela-sai { to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes painel-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulso { from { opacity: .45; } to { opacity: 1; } }
#veu { animation: veu-entra .16s ease-out; }
#janela { animation: janela-entra .22s cubic-bezier(.2, .8, .2, 1); }
#veu.saindo { animation: veu-sai .14s ease-in forwards; pointer-events: none; }
#veu.saindo #janela { animation: janela-sai .14s ease-in forwards; }
.aba-painel { animation: painel-entra .2s ease-out; }
#aviso { animation: aviso-entra .2s ease-out; }
.btn, input, select, textarea, .box, .indicador, .cartao { transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn.primario .atalho { margin-left: 8px; font-size: 11px; font-weight: 500; opacity: .75; border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; }
.sujo-ind { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-size: 12.5px; color: var(--aviso); font-weight: 500; }
.sujo-ind i { width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); animation: pulso .9s ease-in-out infinite alternate; }
.form input:user-invalid, .form select:user-invalid, .form textarea:user-invalid { border-color: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-fundo); }
.skel { height: 14px; border-radius: 6px; background: var(--neutro-fundo); margin: 9px 0; animation: pulso 1s ease-in-out infinite alternate; }
.skel.m { width: 70%; } .skel.p { width: 40%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.duas-col .chave-valor td { padding: 3px 0; }

/* detalhe de documento (venda / NFC-e) */
.dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 14px; }
.dl .k, .chave-box .k, .obs-fiscal .k { font-size: 11.5px; color: var(--suave); }
.dl .v { font-size: 14px; margin-top: 2px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; }
.chave-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 6px 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; }
.chave-box .mono { font-size: 13px; word-break: break-all; margin-top: 2px; }
.obs-fiscal { margin-top: 8px; padding: 6px 12px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--linha); font-size: 13px; }
.obs-fiscal .k { margin-right: 6px; font-weight: 600; }
.obs-fiscal.ruim { border-color: var(--perigo); background: var(--perigo-fundo); color: var(--perigo); }
.links-fiscais { margin-top: 8px; font-size: 13px; }
.linha-v { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.linha-v:last-of-type { border-bottom: 0; }
.linha-v.destaque { font-size: 16px; }
.box .tabela { border: 0; box-shadow: none; background: none; border-radius: 0; }
.box .tabela th { padding: 6px 10px; }
.box .tabela td { padding: 5px 10px; }
.box .tabela th:first-child, .box .tabela td:first-child { padding-left: 0; }
.box .tabela th:last-child, .box .tabela td:last-child { padding-right: 0; }
@media (max-width: 900px) { .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* gráfico mensal grande (valor sobre cada barra) */
.barras-grandes { display: flex; align-items: stretch; gap: 8px; height: 190px; margin-top: 14px; padding-top: 18px; border-bottom: 1px solid var(--linha); }
.barras-grandes .col { position: relative; flex: 1; cursor: default; }
.barras-grandes .col i { position: absolute; left: 12%; right: 12%; bottom: 0; height: var(--h); background: var(--barra); border-radius: 4px 4px 0 0; transition: background-color .15s; }
.barras-grandes .col i.zero { background: var(--linha-forte); }
.barras-grandes .col:hover i { background: var(--destaque); }
.barras-grandes .vl { position: absolute; left: -4px; right: -4px; bottom: calc(var(--h) + 3px); text-align: center; font-size: 10.5px; color: var(--suave); white-space: nowrap; }
.eixo-meses { display: flex; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--suave); }
.eixo-meses span { flex: 1; text-align: center; }
.eixo-meses small { display: block; font-size: 10px; opacity: .7; }

/* financeiro: formas em botões, atalhos de valor, resultado da baixa */
.chips-forma { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-forma { padding: 8px 16px; border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--superficie); cursor: pointer; font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; }
.chip-forma:hover { border-color: var(--destaque); }
.chip-forma.sel { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-tinta); font-weight: 600; }
.atalhos-valor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-baixa { margin-top: 8px; font-size: 13.5px; }
.html-bloco#bx-valor { align-self: end; }

/* relatórios: seletor lateral, barra de filtros, tabela ordenável */
.rel { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; margin-top: 14px; align-items: start; }
.rel-menu { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
.rel-gt { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); margin-bottom: 6px; }
.rel-item { display: block; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); color: var(--tinta); margin-bottom: 6px; transition: border-color .15s, background-color .15s; }
.rel-item:hover { border-color: var(--destaque); text-decoration: none; }
.rel-item b { display: block; font-size: 13.5px; }
.rel-item span { display: block; font-size: 11.5px; color: var(--suave); line-height: 1.3; margin-top: 2px; }
.rel-item.ativo { border-color: var(--destaque); background: var(--destaque-fundo); }
.rel-item.ativo b { color: var(--destaque); }
.rel-barra { margin-top: 0; flex-direction: column; align-items: stretch; gap: 10px; }
.rel-tit h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.rel-campos { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets .chip-forma { padding: 5px 12px; font-size: 12.5px; }
.rel-tab { margin-top: 14px; padding: 0; overflow: hidden; }
.rel-tab-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.rel-tab-topo .campo { width: 240px; }
.rel-tab .tabela { border: 0; box-shadow: none; border-radius: 0; }
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--tinta); }
.seta-ord { color: var(--destaque); font-size: 10px; }
@media (max-width: 1100px) { .rel { grid-template-columns: 1fr; } .rel-menu { position: static; flex-direction: row; overflow-x: auto; } .rel-grupo { min-width: 240px; } }

/* tabela de relatório dentro do cartão sem margem interna: o respiro vem das próprias células */
.cartao.rel-tab th, .cartao.rel-tab td { padding-left: 16px; padding-right: 16px; }
.cartao.rel-tab th:first-child, .cartao.rel-tab td:first-child { padding-left: 20px; }
.cartao.rel-tab th:last-child, .cartao.rel-tab td:last-child { padding-right: 20px; }
.cartao.rel-tab td { padding-top: 11px; padding-bottom: 11px; }

/* monitor de sincronização */
.sy-pdvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.sy-pdv.off { opacity: .7; }
.sy-pdv-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.sy-ativo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pbar-r { height: 8px; background: var(--neutro-fundo); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.pbar-r i { display: block; height: 100%; width: 0; background: var(--destaque); border-radius: 999px; transition: width .6s ease-out; }
.pbar-r.indet i { width: 35%; animation: indet-r 1.1s ease-in-out infinite; }
@keyframes indet-r { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes giro-r { to { transform: rotate(360deg); } }
.spin-r { width: 14px; height: 14px; border: 2px solid var(--linha-forte); border-top-color: var(--destaque); border-radius: 50%; animation: giro-r .8s linear infinite; flex: none; }
.sy-pdv-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 8px; }
.sy-pdv-grade div { background: var(--bg); border-radius: 8px; padding: 6px 10px; }
.sy-pdv-grade span { display: block; font-size: 11px; color: var(--suave); }
.sy-pdv-grade b { font-size: 15px; }

/* Caixa: sessões abertas agora */
.cx-abertos { display: flex; flex-wrap: wrap; gap: 10px; }
.cx-aberto { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 14px; border: 1px solid var(--linha-forte); border-left: 3px solid var(--ok); border-radius: 8px; background: var(--superficie); color: inherit; font: inherit; cursor: pointer; }
.cx-aberto:hover { border-color: var(--destaque); }
.cx-aberto span { font-size: 12.5px; }

/* Turnos */
.turnos-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.turno-card { padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); }
.turno-card.forte { border-color: var(--destaque); }
.turno-nome { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.turno-nome span { font-size: 12px; }
.turno-valor { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.turno-card .linha-v { font-size: 12.5px; padding: 2px 0; }
.barras-grandes .col.turno-madrugada i { opacity: .55; }
.barras-grandes .col.turno-manha i { opacity: .8; }
.calor { width: 100%; border-collapse: collapse; font-size: 13px; }
.calor th, .calor td { padding: 7px 10px; text-align: right; border: 1px solid var(--linha); }
.calor thead th { background: var(--bg); font-weight: 600; }
.calor tbody th { text-align: left; font-weight: 500; background: var(--bg); }
@media (max-width: 900px) { .turnos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* documento fiscal (NF-e / NFC-e): cabeçalho, etapas, grade de cartões e histórico */
.doc-topo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 22px; margin: 12px 0 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); }
.doc-topo .ident { flex: 1; min-width: 260px; }
.doc-topo .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.doc-topo .titulo { font-size: 22px; font-weight: 700; line-height: 1.2; }
.doc-topo .sub { font-size: 13px; color: var(--suave); margin-top: 4px; }
.doc-topo .total { text-align: right; padding-left: 24px; border-left: 1px solid var(--linha); }
.doc-topo .total .v { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.doc-topo .total .r { font-size: 12px; color: var(--suave); margin-top: 2px; }
.etapas { display: flex; margin: 0 0 14px; padding: 12px 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; }
.etapas { align-items: center; }
.etapas .et { display: flex; align-items: center; gap: 10px; min-width: 0; }
.etapas .lig { flex: 1; height: 2px; background: var(--linha); margin: 0 14px; min-width: 20px; }
.etapas .lig.feita { background: var(--ok); }
.etapas .bola { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--neutro-fundo); color: var(--suave); border: 2px solid var(--linha); z-index: 1; }
.etapas .et.feita .bola { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok); }
.etapas .et.atual .bola { background: var(--destaque-fundo); color: var(--destaque); border-color: var(--destaque); }
.etapas .et.ruim .bola { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo); }
.etapas .tx { min-width: 0; }
.etapas .tx b { display: block; font-size: 13px; }
.etapas .tx span { display: block; font-size: 11.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.doc-grade.tres { grid-template-columns: 2fr 1fr; }
.doc-grade > .box, .doc-grade > div > .box { margin: 0; grid-column: auto; }
.box.cheio { grid-column: 1 / -1; }
.dl.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-acoes .btn { flex: 1 1 auto; justify-content: center; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 4px; }
.linha-tempo li { position: relative; padding: 0 0 12px 22px; border-left: 2px solid var(--linha); margin-left: 5px; }
.linha-tempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--suave); }
.linha-tempo li.ok::before { border-color: var(--ok); background: var(--ok-fundo); }
.linha-tempo li.ruim::before { border-color: var(--perigo); background: var(--perigo-fundo); }
.linha-tempo .q { font-size: 11.5px; color: var(--suave); }
.linha-tempo .t { font-size: 14px; font-weight: 600; }
.linha-tempo .d { font-size: 12px; color: var(--suave); margin-top: 1px; word-break: break-word; }
.num-t { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .doc-grade, .doc-grade.tres { grid-template-columns: 1fr; } .doc-topo .total { border-left: 0; padding-left: 0; text-align: left; } .etapas { flex-wrap: wrap; gap: 10px; } .etapas .lig { display: none; } }

.abas-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); font: inherit; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--destaque); }
.chip.ativo { background: var(--destaque-fundo); border-color: var(--destaque); color: var(--destaque); font-weight: 600; }
.chip .n { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--neutro-fundo); color: var(--suave); }
.chip.ativo .n { background: var(--superficie); color: var(--destaque); }

/* andamento da NF recebida (lista) */
.andamento { display: inline-flex; gap: 5px; align-items: center; }
.andamento .pt { width: 11px; height: 11px; border-radius: 50%; background: var(--neutro-fundo); border: 2px solid var(--linha); display: inline-block; }
.andamento .pt.ok { background: var(--ok); border-color: var(--ok); }
.andamento .pt.atual { background: var(--superficie); border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-fundo); }
.andamento .pt.alerta { background: var(--perigo); border-color: var(--perigo); }
.andamento .pt.na { background: transparent; border-style: dashed; }
.andamento .pt.cancelada { background: var(--linha); border-color: var(--linha); }

/* Relatórios: leitura do período */
.leitura { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--linha); border-left: 3px solid var(--destaque); border-radius: 8px; background: var(--superficie); }
.leitura p { margin: 2px 0; font-size: 13.5px; }

/* Configurações: menu lateral por assunto, cartões, interruptores e barra de salvar fixa */
.cfg { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 14px; }
.cfg-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra); }
.cfg-grupo { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); padding: 12px 10px 4px; }
.cfg-grupo:first-child { padding-top: 4px; }
.cfg-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-left: 3px solid transparent; border-radius: 8px; background: none; cursor: pointer; color: var(--tinta); font: inherit; }
.cfg-item b { display: block; font-size: 14px; font-weight: 600; }
.cfg-item small { display: block; font-size: 12px; color: var(--suave); margin-top: 1px; }
.cfg-item:hover { background: var(--bg); }
.cfg-item.ativa { background: var(--destaque-fundo); border-left-color: var(--destaque); }
.cfg-item.ativa b { color: var(--destaque); }
.cfg-conteudo { min-width: 0; max-width: 860px; }
.cfg-titulo h2 { margin: 0 0 12px; font-size: 20px; }
.cfg-cartao { margin-bottom: 16px; padding: 0; overflow: hidden; }
.cfg-cartao > header { padding: 16px 20px 12px; border-bottom: 1px solid var(--linha); }
.cfg-cartao > header h2 { margin: 0; font-size: 15px; }
.cfg-cartao > header p { margin: 4px 0 0; font-size: 13px; color: var(--suave); max-width: 70ch; }
.cfg-cartao > .form, .cfg-cartao > .cfg-logo, .cfg-cartao > :not(header):not(.cfg-opcao) { margin: 18px 20px; }
.cfg-cartao > .cfg-opcao { margin: 0 20px; }
.cfg-cartao > .form + .cfg-opcao { margin-top: 0; border-top: 1px solid var(--linha); }
.cfg-cartao .ajuda { display: block; margin-top: 4px; font-size: 11.5px; color: var(--suave); font-weight: 400; }
.cfg-opcao { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; cursor: pointer; }
.cfg-opcao + .cfg-opcao { border-top: 1px solid var(--linha); }
.cfg-opcao span { min-width: 0; }
.cfg-opcao b { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); }
.cfg-opcao small { display: block; font-size: 12.5px; color: var(--suave); margin-top: 2px; }
input.chave { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; padding: 0; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--linha-forte); position: relative; cursor: pointer; transition: background .15s, border-color .15s; }
input.chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .3); transition: transform .15s; }
input.chave:checked { background: var(--destaque); border-color: var(--destaque); }
input.chave:checked::after { transform: translateX(16px); }
input.chave:focus-visible { box-shadow: 0 0 0 3px var(--destaque-fundo); }
.cfg-cartao.cfg-detalhe { padding: 0; }
.cfg-detalhe summary { cursor: pointer; padding: 14px 20px; font-weight: 600; font-size: 14px; }
.cfg-detalhe p { margin: 0 20px 14px; font-size: 13px; color: var(--suave); }
.cfg-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cfg-status > div { padding: 12px 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra); }
.cfg-status span:first-child { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); margin-bottom: 4px; }
.cfg-status b { font-size: 15px; }
.cfg-logo { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
#cf-logo-prev { width: 200px; height: 90px; border: 1px dashed var(--linha-forte); border-radius: 10px; display: grid; place-items: center; color: var(--suave); font-size: 12px; overflow: hidden; background: var(--bg); }
.cfg-logo input[type=file] { width: auto; border: 0; padding: 0; background: none; }
.cfg-barra { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; margin-top: 4px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-alta); }
.cfg-barra .erro { margin-right: auto; }
@media (max-width: 900px) {
  .cfg { grid-template-columns: 1fr; gap: 14px; }
  .cfg-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .cfg-grupo { display: none; }
  .cfg-item { width: auto; flex: none; border-left: 0; border-bottom: 3px solid transparent; }
  .cfg-item small { display: none; }
  .cfg-item.ativa { border-bottom-color: var(--destaque); }
}
.cfg-barra .erro { margin-top: 0; }

/* Janelas com muitas abas (produto): abas compactas para caber sem rolagem horizontal */
.abas.densa { gap: 0; }
.abas.densa .aba { padding: 10px 11px; font-size: 13.5px; }
.abas.densa.muito .aba { padding: 10px 8px; font-size: 13px; }

/* Recebimento: dados da nota, indicadores, parcelas */
.doc-topo { position: relative; }
.doc-topo .doc-meta { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--linha); }
.doc-meta > div { min-width: 0; }
.doc-meta span { display: block; font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.doc-meta b { font-size: 13.5px; font-weight: 600; }
.doc-meta .larga { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-meta .larga span { flex: none; }
.doc-meta .chave { font-weight: 500; font-size: 12.5px; letter-spacing: .02em; word-break: break-all; }
.doc-kpis { margin: 0 0 14px; }
.doc-parcelas { width: 100%; }
.doc-parcelas th { text-align: left; font-size: 11.5px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px 6px 0; }
.doc-parcelas td { padding: 7px 8px 7px 0; border-top: 1px solid var(--linha); }
.doc-parcelas .num { text-align: right; }
.tabela tfoot td { border-top: 2px solid var(--linha-forte); padding-top: 10px; }
@media (max-width: 900px) { .doc-topo .doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Configurações: alíquotas padrão */
.aliq-form { max-width: 980px; }
.aliq-situacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.aliq-situacao > div { padding: 10px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.aliq-situacao span { display: block; font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.aliq-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.aliq-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.aliq-tab th { text-align: left; font-size: 11.5px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 6px 6px 0; }
.aliq-tab td { padding: 3px 6px 3px 0; border-top: 1px solid var(--linha); }
.aliq-tab input { width: 100%; padding: 5px 8px; text-align: right; }
.aliq-tab tr.minha-uf td { background: var(--destaque-fundo); }
@media (max-width: 900px) { .aliq-grade, .aliq-situacao { grid-template-columns: 1fr; } }
.cfg-wh { display: grid; gap: 14px; }
.cfg-wh code { font-size: 13px; background: var(--bg); padding: 2px 8px; border-radius: 6px; }

/* Configurações: visão geral (saúde) */
.cfg-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.cfg-cartao > .cfg-saude { width: calc(100% - 40px); table-layout: fixed; border-collapse: collapse; font-size: 13.5px; }
.cfg-saude td { padding: 9px 10px 9px 0; border-top: 1px solid var(--linha); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.cfg-saude tr:first-child td { border-top: 0; }
.cfg-saude td.rot { width: 28%; }
.cfg-saude td.est { width: 130px; white-space: nowrap; }
.cfg-saude td.det { color: var(--suave); }
.cfg-saude tr[data-ir] { cursor: pointer; }
.cfg-saude tr[data-ir]:hover td { background: var(--bg); }
@media (max-width: 900px) { .cfg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cfg-bal th { text-align: left; font-size: 11.5px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 6px 0; }
.cfg-bal td { white-space: nowrap; }
.cfg-bal td.rot { white-space: normal; width: 30%; }
.cfg-cartao > .cfg-saude.cfg-bal { table-layout: auto; }
.cfg-bal th, .cfg-bal td { padding-right: 14px; }
.cfg-bal td.rot { min-width: 170px; }

/* Etiquetas de gôndola */
.et-rodape { margin-top: 12px; }

/* Recebimento de NF: auditoria de preços */
.aud-topo { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.aud-massa { display: flex; gap: 8px; align-items: flex-end; }
.aud-massa label { margin: 0; font-size: 12px; color: var(--suave); }
.aud-prog { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.aud-barra { flex: 1; max-width: 360px; height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.aud-barra span { display: block; height: 100%; background: var(--destaque); border-radius: 999px; transition: width .2s; }
.aud-rodape { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Recebimento de NF: detalhe em duas colunas (itens à esquerda, andamento e resumo à direita) */
.rc-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 14px; }
.rc-main, .rc-lateral { display: grid; gap: 14px; min-width: 0; align-content: start; }
.rc-main > .box, .rc-lateral > .box { margin: 0; }
.rc-fixo { position: sticky; top: 76px; }
@media (max-width: 1180px) { .rc-grade { grid-template-columns: 1fr; } .rc-fixo { position: static; } }
.rc-itens-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-dica { font-size: 13px; margin: 0 0 12px; max-width: 78ch; }
.rc-tab table th { white-space: nowrap; }
.rc-tab tbody tr:hover td { background: var(--bg); }
.rc-lin { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 13.5px; }
.rc-lin span { color: var(--suave); }
.rc-lin.atencao b { color: var(--aviso); }
.rc-lin.ok b { color: var(--ok); }
.rc-prog { margin-bottom: 12px; }
.rc-prog-n { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; color: var(--suave); font-size: 13px; }
.rc-prog-n b { font-size: 30px; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.rc-resumo .aud-barra { max-width: none; height: 10px; }
.rc-prev { margin: 0 0 12px; padding: 4px 12px; background: var(--bg); border-radius: 10px; font-size: 13px; }
.rc-prev .rc-lin { border-top: 0; padding: 6px 0; }
.rc-prev .rc-lin + .rc-lin { border-top: 1px solid var(--linha); }
.rc-prev .suave { display: block; padding: 6px 0; }
.rc-acoes { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.rc-acoes .btn { width: 100%; justify-content: center; padding: 10px 16px; }
.rc-falta { font-size: 12.5px; text-align: center; }
.rc-prod { min-width: 230px; }
.rc-ref { white-space: nowrap; font-size: 13px; }
.rc-ref .btn { padding: 4px 10px; font-size: 12.5px; margin-top: 4px; }
.rc-preco { white-space: nowrap; }
.rc-mg { font-size: 12px; margin-top: 3px; }
.rc-tab td { vertical-align: middle; }
.rc-aviso { background: transparent; border: 1px solid var(--linha); color: var(--suave); font-weight: 500; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-edit { font-size: 12px; white-space: nowrap; }

/* Recebimento: só o card de andamento fica fixo (coluna da direita); o resto flui na coluna principal */
.rc-lateral { align-content: start; }
.rc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rc-duo > .box { margin: 0; }
@media (max-width: 760px) { .rc-duo { grid-template-columns: 1fr; } }
.rc-tempo { list-style: none; margin: 4px 0 0; padding: 0; }
.rc-tempo li { position: relative; display: grid; grid-template-columns: 148px 20px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.rc-tempo li::before { content: ""; position: absolute; left: calc(148px + 12px + 9px); top: 16px; bottom: -2px; width: 2px; background: var(--linha); }
.rc-tempo li:last-child { padding-bottom: 0; }
.rc-tempo li:last-child::before { display: none; }
.rc-tempo .q { text-align: right; font-size: 12.5px; color: var(--suave); line-height: 1.35; padding-top: 1px; }
.rc-tempo .q span { display: block; font-size: 12px; opacity: .85; }
.rc-tempo .pt { position: relative; z-index: 1; width: 12px; height: 12px; margin: 4px 0 0 4px; border-radius: 50%; border: 2px solid var(--linha-forte); background: var(--superficie); box-sizing: border-box; }
.rc-tempo li.ok .pt { border-color: var(--ok); background: var(--ok-fundo); }
.rc-tempo li.ruim .pt { border-color: var(--perigo); background: var(--perigo-fundo); }
.rc-tempo .t { font-weight: 600; font-size: 14px; line-height: 1.35; }
.rc-tempo li.ok .t { color: var(--ok); }
.rc-tempo li.ruim .t { color: var(--perigo); }
.rc-tempo .d { font-size: 13px; color: var(--suave); margin-top: 2px; word-break: break-word; }
@media (max-width: 760px) { .rc-tempo li { grid-template-columns: 20px minmax(0, 1fr); } .rc-tempo li::before { left: 9px; } .rc-tempo .q { grid-column: 2; text-align: left; order: 2; } .rc-tempo .pt { grid-row: 1; } }
.rc-duo > .box, .rc-main > .box, .rc-lateral > .box { grid-column: auto; }
.rc-prod { min-width: 190px; }
.rc-ref { white-space: normal; max-width: 168px; }
.rc-tab td, .rc-tab th { padding-left: 8px; padding-right: 8px; }
.rc-tab input[data-k] { width: 60px !important; }
.rc-tab input[data-p] { width: 86px !important; }
.aud-massa { flex-wrap: wrap; justify-content: flex-end; }
.aud-massa select { width: auto; min-width: 170px; padding: 6px 10px; }
.rc-cima { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.rc-cima input { margin: 0; }
.rc-itens, .rc-card { background: var(--superficie); }

/* Recebimento: tabela de precificação mais limpa */
.rc-itens-topo { margin-bottom: 4px; }
.rc-ferr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 9px 14px; background: var(--bg); border: 1px solid var(--linha); border-radius: 10px; }
.rc-ferr label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--suave); font-weight: 500; }
.rc-ferr select { width: auto; min-width: 168px; padding: 6px 10px; margin: 0; }
.rc-ferr input[type=text], .rc-ferr input:not([type]) { margin: 0; padding: 6px 8px; }
.rc-sep { flex: 1; min-width: 12px; }
.rc-tab table { border-collapse: separate; border-spacing: 0; }
.rc-tab th { font-size: 11px; letter-spacing: .06em; padding: 10px 10px; border-bottom: 1px solid var(--linha-forte); }
.rc-tab td { padding: 14px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.rc-tab tbody tr:last-child td { border-bottom: 0; }
.rc-tab tfoot td { padding: 10px; border-top: 1px solid var(--linha-forte); border-bottom: 0; background: transparent; font-size: 13px; }
.rc-prod { min-width: 210px; }
.rc-nome { font-weight: 600; font-size: 14px; line-height: 1.3; }
.rc-novo { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; background: var(--aviso-fundo); color: var(--aviso); vertical-align: 1px; }
.rc-cod { margin-top: 3px; font-size: 12px; color: var(--suave); }
.rc-var { margin-top: 2px; font-size: 11.5px; font-weight: 600; }
.rc-atual { color: var(--tinta); }
.rc-tab input[data-k] { width: 62px !important; text-align: right; }
.rc-preco-in { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.rc-tab input[data-p] { width: 90px !important; text-align: right; font-weight: 600; }
.rc-usar { display: block; margin-top: 4px; font-size: 12px; text-align: right; white-space: nowrap; }
.rc-margem b { font-size: 13.5px; }
.rc-ref, .rc-mg { display: none; }
.rc-ferr { gap: 10px 12px; padding: 8px 12px; }
.rc-ferr select { min-width: 150px; }
.rc-ferr .btn { padding: 6px 12px; }
.rc-tab th, .rc-tab td { padding-left: 7px; padding-right: 7px; }
.rc-tab th:first-child, .rc-tab td:first-child { padding-left: 4px; }
.rc-prod { min-width: 205px; }
.rc-itens { overflow-x: auto; }
.rc-tab input[data-p] { width: 82px !important; }
.rc-tab input[data-k] { width: 56px !important; }
.rc-tab .tag { white-space: nowrap; }
/* Linha do tempo na largura inteira, abaixo das duas colunas */
.rc-tempo-linha { margin-top: 14px; }
.rc-tempo-linha > .box { margin: 0; }
.rc-tempo-linha .rc-tempo li { grid-template-columns: 170px 20px minmax(0, 1fr); }
.rc-tempo-linha .rc-tempo li::before { left: calc(170px + 12px + 9px); }
@media (max-width: 760px) { .rc-tempo-linha .rc-tempo li { grid-template-columns: 20px minmax(0, 1fr); } .rc-tempo-linha .rc-tempo li::before { left: 9px; } }

/* Explicação de rejeição da SEFAZ */
.rej-ajuda { margin: 0 0 14px; padding: 14px 18px; border: 1px solid var(--linha); border-left: 3px solid var(--perigo); border-radius: 8px; background: var(--superficie); }
.rej-ajuda h4 { margin: 0 0 6px; font-size: 14.5px; }
.rej-ajuda p { margin: 0 0 8px; font-size: 13.5px; }
.rej-ajuda .suave { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.rej-ajuda ul, .rej-ajuda ol { margin: 4px 0 6px; padding-left: 20px; font-size: 13.5px; }
.rej-ajuda li { margin: 2px 0; }

/* Páginas no estilo da nova referência (docs/tema-pdv/74d6edbe-…): classe .pg-novo no contêiner da rota.
   Indicadores com barra lateral colorida, cartões de 8 px, linhas de tabela tracejadas e selos em pílula. */
.pg-novo .indicador { position: relative; overflow: hidden; border-radius: 8px; padding: 16px 16px 16px 20px; box-shadow: 0 2px 5px rgba(20, 25, 35, .03); }
.pg-novo .indicador::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--linha-forte); }
.pg-novo .indicador.ok::before { background: var(--ok); }
.pg-novo .indicador.atencao::before { background: var(--destaque); }
.pg-novo .indicador.ruim::before { background: var(--perigo); }
.pg-novo .indicador.atencao .valor { color: var(--destaque); }
.pg-novo .indicador .valor { font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pg-novo .indicador .rotulo { font-weight: 500; }
.pg-novo .indicador .nota { font-variant-numeric: tabular-nums; }
.pg-novo .cartao, .pg-novo .barra, .pg-novo .tabela { border-radius: 8px; box-shadow: 0 2px 5px rgba(20, 25, 35, .03); }
.pg-novo .cartao h2 { font-weight: 800; }
.pg-novo th { font-size: 11px; letter-spacing: .08em; }
.pg-novo td { border-bottom: 1px dashed var(--linha); padding-block: 16px; }
.pg-novo tbody tr:last-child td { border-bottom: 0; }
.pg-novo .cartao td { padding-block: 10px; }
.pg-novo td b { font-weight: 700; }
.pg-novo .tag { font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-novo .paginacao { padding: 6px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Janelas da retaguarda no estilo da nova referência: filete terracota no topo (pseudo-elemento, não altera a altura), cantos de 8 px, cabeçalho em destaque,
   boxes brancos com título em caixa alta e indicadores com barra lateral. A janela do produto (.jan-novo) usa o mesmo estilo, com a borda real e boxes mais compactos.
   Nada aqui aumenta a altura das janelas (regra: modais não rolam). */
#janela { position: relative; border-radius: 8px; }
#janela::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--destaque); z-index: 3; pointer-events: none; }
#janela.jan-novo::before { display: none; }
#janela.jan-novo { border-top: 3px solid var(--destaque); }
#janela .jan-topo h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
#janela .ficha-topo { position: relative; overflow: hidden; border-radius: 8px; padding-left: 20px; }
#janela .ficha-topo::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--destaque); }
#janela .ficha-topo .nome { font-weight: 800; }
#janela .ficha-topo .valor .v { font-weight: 800; font-variant-numeric: tabular-nums; }
#janela .box { background: var(--superficie); border-radius: 8px; box-shadow: 0 2px 5px rgba(20, 25, 35, .03); }
#janela .box-t { font-size: 11px; letter-spacing: .08em; }
#janela .box input:not([type=checkbox]), #janela .box select, #janela .box textarea { background: var(--bg); border-color: var(--linha); border-radius: 6px; }
#janela .box input:focus, #janela .box select:focus, #janela .box textarea:focus { background: var(--superficie); border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-fundo); }
#janela .kpi-mini { position: relative; overflow: hidden; border-radius: 8px; padding-left: 16px; }
#janela .kpi-mini::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--linha-forte); }
#janela .kpi-mini.ok::before { background: var(--ok); } #janela .kpi-mini.ruim::before { background: var(--perigo); }
#janela .kpi-mini .v { font-weight: 800; font-variant-numeric: tabular-nums; }
#janela td { border-bottom: 1px dashed var(--linha); } #janela tbody tr:last-child td { border-bottom: 0; }
#janela .rodape-janela { background: var(--bg); }
#janela .tag { font-weight: 700; }
#janela.jan-novo .barras-dia { height: 40px; }
#janela.jan-novo .box { padding: 10px 16px 12px; }

/* Tipografia da referência: Manrope nos títulos e números de destaque, DM Sans no texto */
h1, h2, h3, h4, .indicador .valor, .jan-topo h3, .box-t, .kpi-mini .v { font-family: var(--f-display); }

a.chip:hover { text-decoration: none; }


/* aba Margem do produto */
.pr-comp { display: grid; gap: 9px; }
.pr-comp h5 { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.pr-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-topo .btn { margin-left: auto; padding: 3px 12px; font-size: 12.5px; }
.pr-sit { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: var(--neutro-fundo); color: var(--suave); }
.pr-sit.ok { background: var(--ok-fundo); color: var(--ok); } .pr-sit.alerta { background: var(--aviso-fundo); color: var(--aviso); } .pr-sit.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.pr-kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-kpis4 .kpi-mini { padding: 6px 12px; } .pr-kpis4 .kpi-mini .v { font-size: 17px; } .pr-kpis4 .kpi-mini .r span { color: var(--tinta); font-weight: 600; }
.pr-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.pr-barra { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--neutro-fundo); }
.pr-barra i { display: block; height: 100%; } .pr-barra i + i { border-left: 2px solid var(--superficie); }
.pr-c1 { background: #8a93a3; } .pr-c2 { background: #aab2bf; } .pr-c3 { background: #c5cbd5; } .pr-c4 { background: #dde1e8; } .pr-cl { background: var(--ok); } .pr-cn { background: var(--perigo); }
.pr-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-top: 9px; font-size: 12.5px; }
.pr-leg span { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .pr-leg b { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.pr-leg em { font-style: normal; font-weight: 600; margin-left: auto; } .pr-leg small { color: var(--suave); min-width: 40px; text-align: right; }
.pr-esc { padding-top: 6px; }
.pr-trilho { position: relative; height: 10px; border-radius: 5px; background: var(--neutro-fundo); margin: 6px 0 12px; }
.pr-trilho i { position: absolute; top: 0; height: 100%; }
.pr-z-perda { background: var(--perigo-fundo); border-radius: 5px 0 0 5px; } .pr-z-baixa { background: var(--aviso-fundo); } .pr-z-ok1 { background: var(--neutro-fundo); } .pr-z-meta { background: var(--ok-fundo); border-radius: 0 5px 5px 0; }
.pr-trilho u { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; background: var(--suave); border-radius: 1px; }
.pr-trilho u.atual { width: 4px; margin-left: -2px; top: -6px; height: 22px; background: var(--tinta); border-radius: 2px; } .pr-trilho u.conc { background: var(--destaque); }
.pr-pts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--suave); } .pr-pts b { color: var(--tinta); font-weight: 600; } .pr-pts .atual b { color: var(--destaque); }
.pr-ent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding-top: 7px; border-top: 1px dashed var(--linha-forte); font-size: 12.5px; }
.pr-ent h5 { margin: 0; } .pr-ent b { font-weight: 600; }
.pr-falta { font-size: 12px; color: var(--suave); margin-top: -3px; }

/* sessão vencida: senha por cima da tela, que fica desfocada e intacta */
.veu-sessao { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(20, 24, 31, .45); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 16px; }
.card-sessao { width: 100%; max-width: 380px; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-alta); padding: 22px 24px 18px; border-top: 3px solid var(--destaque); }
.card-sessao h3 { font-size: 17px; margin: 0; }

/* preenchimento rápido do perfil de custos */
.pf-rapido { border-left: 3px solid var(--destaque) !important; }
.pf-rap-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .pf-rap-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-rap-t { font-size: 12px; font-weight: 700; color: var(--destaque); margin-bottom: 6px; }
.pf-rap-out { font-size: 13px; margin-top: 4px; min-height: 18px; }
.pf-rap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pf-rapido .campo { display: block; margin: 0 0 10px; } .pf-rapido .campo label { display: block; font-size: 12.5px; } .pf-rapido .campo input { display: block; margin-top: 4px; }

/* Precificação: passos, simulador e análise */
.prc-passos { margin-top: 12px; } .prc-passos-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.prc-passo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.prc-passo .btn { margin-top: 6px; padding: 3px 12px; font-size: 12.5px; }
.prc-passo-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--destaque-fundo); color: var(--destaque); }
.prc-passo.ok .prc-passo-n { background: var(--ok-fundo); color: var(--ok); } .prc-passo.ok { opacity: .8; }
@media (max-width: 1000px) { .prc-passos-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sim-grade { display: grid; grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
@media (max-width: 1000px) { .sim-grade { grid-template-columns: 1fr; } }
.sim-entrada { position: sticky; top: 8px; } .sim-entrada .campo { display: block; margin: 0 0 10px; } .sim-entrada .campo label { display: block; font-size: 12.5px; } .sim-entrada .campo input { display: block; width: 100%; margin-top: 4px; }
.sim-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-lista { display: grid; gap: 4px; margin-top: 6px; } .sim-opt { text-align: left; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); padding: 6px 10px; cursor: pointer; display: grid; font-size: 13px; } .sim-opt:hover { border-color: var(--destaque); } .sim-opt span { color: var(--suave); font-size: 12px; }
.sim-pcs { margin-top: 4px; font-size: 13px; } .sim-pcs summary { cursor: pointer; color: var(--suave); } .sim-pcs-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.sim-pc { display: block; font-size: 12px; color: var(--suave); } .sim-pc input { display: block; width: 100%; margin-top: 3px; }
.sim-atual td { background: var(--destaque-fundo); }
.sim-ese { display: grid; gap: 14px; } .sim-ese-t { font-size: 13px; font-weight: 600; margin-bottom: 4px; } .sim-ese input[type=range] { width: 70%; vertical-align: middle; accent-color: var(--destaque); } .sim-ese-o { font-size: 13px; margin-top: 6px; min-height: 36px; }
.sim-curva th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600; text-align: left; } .sim-curva td, .sim-curva th { padding: 5px 8px; }
.sim-grade > .box { grid-column: auto; } #sm-res-tudo { min-width: 0; } #sm-res-tudo > .box { margin-top: 12px; } #sm-res-tudo > .box:first-of-type { margin-top: 0; }
#sm-res-tudo .tabela td, #sm-res-tudo .tabela th { padding: 7px 8px; font-size: 13px; white-space: nowrap; } #sm-res-tudo .pr-leg { grid-template-columns: 1fr; }

/* Promoções e atacado */
.pe-topo { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; }
.pe-como { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1 1 640px; }
.pe-como-c { border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); padding: 9px 12px; font-size: 12.5px; } .pe-como-c b { display: block; font-size: 13px; margin-bottom: 2px; } .pe-como-c span { color: var(--suave); }
@media (max-width: 900px) { .pe-como { grid-template-columns: 1fr; } }
.pe-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-faixa { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pe-st { border: 1px solid var(--linha); background: var(--superficie); border-radius: 999px; padding: 4px 14px; font-size: 13px; cursor: pointer; color: var(--tinta); } .pe-st b { font-weight: 700; margin-right: 3px; }
.pe-st.ok b { color: var(--ok); } .pe-st.ruim { border-color: var(--perigo); color: var(--perigo); } .pe-st:hover { border-color: var(--destaque); }
.pe-filtros { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; margin-top: 14px; } .pe-busca { flex: 1 1 240px; max-width: 360px; }
.pe-regra b { font-weight: 600; } .pe-regra .sub { font-size: 12px; color: var(--suave); }
.pe-preco { display: grid; justify-items: end; line-height: 1.25; } .pe-preco span { font-size: 12px; color: var(--suave); } .pe-preco em { font-style: normal; color: var(--ok); font-weight: 600; }
.pe-botoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .pe-botoes .btn { padding: 3px 10px; font-size: 12.5px; }
.pe-comeco { margin-top: 12px; } .pe-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 900px) { .pe-modelos { grid-template-columns: 1fr; } }
.pe-modelo { text-align: left; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--superficie); padding: 12px 14px; cursor: pointer; display: grid; gap: 4px; } .pe-modelo:hover { border-color: var(--destaque); background: var(--destaque-fundo); } .pe-modelo span { font-size: 12.5px; color: var(--suave); }
.rg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .rg-grade .campo { display: block; margin: 0; } .rg-grade .campo label { display: block; font-size: 12.5px; margin-bottom: 4px; } .rg-cheio { grid-column: 1 / -1; }
.rg-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .rg-chips input[type=date] { width: auto; }
.rg-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rg-tipo { text-align: left; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--superficie); padding: 9px 14px; cursor: pointer; display: grid; gap: 1px; } .rg-tipo span { font-size: 12.5px; color: var(--suave); } .rg-tipo.sel { border-color: var(--destaque); background: var(--destaque-fundo); box-shadow: inset 0 0 0 1px var(--destaque); }
.pe-lote { display: grid; gap: 14px; margin-top: 12px; } .pe-lote .box { grid-column: auto; }

/* central de relatórios e cabeçalho de cada relatório */
.rel-sel { display: none; width: 100%; margin-bottom: 10px; }
.rel-cab { margin-bottom: 12px; } .rel-volta { font-size: 12.5px; color: var(--suave); } .rel-volta:hover { color: var(--destaque); text-decoration: none; }
.rel-h { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 4px 0 2px; }
.rel-perg { font-size: 14.5px; color: var(--suave); }
.rel-ajuda { margin-top: 8px; font-size: 13px; } .rel-ajuda summary { cursor: pointer; color: var(--destaque); width: fit-content; } .rel-ajuda p { margin: 6px 0 0; max-width: 760px; color: var(--suave); } .rel-ajuda b { color: var(--tinta); }
@media (max-width: 1100px) { .rel-menu { display: none !important; } .rel-sel { display: block; } }
.rel-comeco { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: 14px; }
.rel-comeco-t { align-self: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); padding-right: 6px; }
.rel-comeco-c { display: grid; gap: 2px; border: 1px solid var(--destaque); background: var(--destaque-fundo); border-radius: 12px; padding: 12px 14px; color: var(--tinta); } .rel-comeco-c:hover { text-decoration: none; box-shadow: var(--sombra); } .rel-comeco-c b { color: var(--destaque); font-size: 14px; } .rel-comeco-c span { font-size: 13px; }
@media (max-width: 900px) { .rel-comeco { grid-template-columns: 1fr; } }
.rel-hub-grupo { margin-top: 22px; } .rel-hub-grupo h3 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); margin: 0 0 8px; }
.rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.rel-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--linha); background: var(--superficie); border-radius: 12px; padding: 12px 14px; color: var(--tinta); transition: border-color .15s, box-shadow .15s; }
.rel-card:hover { border-color: var(--destaque); box-shadow: var(--sombra); text-decoration: none; }
.rel-card-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--neutro-fundo); color: var(--suave); } .rel-card:hover .rel-card-ic { background: var(--destaque-fundo); color: var(--destaque); }
.rel-card-t b { display: block; font-size: 14px; } .rel-card-t span { display: block; font-size: 12px; color: var(--suave); line-height: 1.3; margin-top: 2px; } .rel-card-ir { font-size: 12.5px; color: var(--destaque); font-weight: 600; }

/* painel (início) */
.pn-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 6px 0 12px; } .pn-saud { font-size: 22px; margin: 0; } .pn-frase { color: var(--suave); font-size: 14.5px; margin-top: 2px; max-width: 820px; }
.pn-atencao { border: 1px solid var(--linha); border-left: 3px solid var(--perigo); border-radius: 12px; background: var(--superficie); padding: 12px 16px; margin-bottom: 12px; }
.pn-atencao.ok { border-left-color: var(--ok); } .pn-at-t { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pn-at { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linha); } .pn-at:first-of-type { border-top: 0; } .pn-at-tx { flex: 1; font-size: 14px; } .pn-at .btn { padding: 3px 12px; font-size: 12.5px; }
.pn-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--aviso); flex: none; } .pn-at.perigo .pn-ponto { background: var(--perigo); }
.pn-mais summary { cursor: pointer; color: var(--destaque); font-size: 13px; padding: 6px 0; width: fit-content; }
.pn-passos { border: 1px solid var(--linha); border-left: 3px solid var(--destaque); border-radius: 12px; background: var(--superficie); padding: 12px 16px; margin-bottom: 12px; }
.pn-passos-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 1000px) { .pn-passos-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .pn-passos-g { grid-template-columns: 1fr; } }
.pn-passo { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; } .pn-passo .btn { margin-top: 5px; padding: 2px 12px; font-size: 12.5px; } .pn-passo.ok { opacity: .7; }
.pn-passo-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--destaque-fundo); color: var(--destaque); } .pn-passo.ok .pn-passo-n { background: var(--ok-fundo); color: var(--ok); }
.pn-kpis { margin-top: 0; }
.pn-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.pn-chip { display: grid; gap: 1px; border: 1px solid var(--linha); background: var(--superficie); border-radius: 10px; padding: 8px 14px; min-width: 170px; color: var(--tinta); } .pn-chip:hover { border-color: var(--destaque); text-decoration: none; }
.pn-chip span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); } .pn-chip b { font-size: 16px; } .pn-chip small { font-size: 12px; color: var(--suave); }
.pn-chip.ruim { border-color: var(--perigo); } .pn-chip.ruim small { color: var(--perigo); } .pn-chip.atencao small { color: var(--aviso); }
.pn-atalhos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .pn-atalhos .btn { display: inline-flex; align-items: center; gap: 6px; }

/* usuários */
.us-papeis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } @media (max-width: 900px) { .us-papeis { grid-template-columns: 1fr; } }
.us-papel-c { border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); padding: 9px 12px; display: grid; gap: 1px; font-size: 12.5px; } .us-papel-c b { font-size: 13.5px; } .us-papel-c small { color: var(--destaque); font-weight: 600; } .us-papel-c span { color: var(--suave); margin-top: 3px; }
.us-escolha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .us-escolha .rg-tipo { align-content: start; } .us-escolha .rg-tipo span { font-size: 12px; }
.fn-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* "+ Novo" ao lado do rótulo de um seletor (cria categoria/marca sem sair do formulário) */
.btn-novo { float: right; padding: 0 8px; margin: -2px 0 0; border: 1px solid var(--linha-forte); border-radius: 6px; background: var(--superficie); color: var(--destaque); font-size: 12px; font-weight: 600; line-height: 20px; cursor: pointer; }
.btn-novo:hover { background: var(--destaque-fundo); }

/* Janela "Tributo do produto": cartões por tributo, cadastro fiscal e resumo */
.tb-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }
.tb-nome { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-base { text-align: right; flex: none; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.tb-base .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-base .r, .tb-card .r { font-size: 11.5px; color: var(--suave); }
.tb-aviso { border: 1px solid var(--linha); border-left: 4px solid var(--linha-forte); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: var(--superficie); font-size: 13px; }
.tb-aviso.ruim { border-left-color: var(--perigo); }
.tb-aviso.ok { border-left-color: var(--ok); }
.tb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tb-card { border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte); border-radius: 10px; padding: 8px 12px; background: var(--superficie); }
.tb-card.dest { border-left-color: var(--destaque); }
.tb-card .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-card.zero .v { color: var(--suave); }
.tb-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-bloco { border: 1px solid var(--linha); border-radius: 12px; padding: 8px 14px 10px; background: var(--superficie); }
.tb-bloco h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.tb-lin { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--linha); font-size: 13px; }
.tb-lin:last-child { border-bottom: 0; }
.tb-total { font-size: 15px; font-variant-numeric: tabular-nums; }
.tb-fundo { background: var(--bg); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; }
.tb-fundo .tb-base, .tb-fundo .tb-aviso, .tb-fundo .tb-card, .tb-fundo .tb-bloco { box-shadow: var(--sombra); }
.tb-fundo .tb-topo { margin-bottom: 10px; }
.tb-fundo .tb-nome { font-size: 17px; }
.tb-fundo .tb-grid, .tb-fundo .tb-aviso { margin-bottom: 8px; }
.tb-pend { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.tb-pend li { background: var(--perigo-fundo); color: var(--perigo); border-radius: 8px; padding: 4px 10px; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.tb-fundo .item-card, .tb-fundo input { background: var(--superficie); }

/* Campo preenchido sozinho por tabela oficial (NCM→TIPI): destaque até o usuário digitar */
.auto-preenchido{background:color-mix(in srgb,var(--destaque) 12%,var(--superficie));border-color:var(--destaque)!important}
.selo-auto{display:inline-block;padding:0 8px;border-radius:999px;border:1px solid var(--destaque);color:var(--destaque);font-size:11px;font-weight:600;line-height:14px;margin:-2px 4px -2px 6px;vertical-align:middle}
.selo-origem{display:inline-block;padding:0 7px;border-radius:999px;border:1px solid var(--linha-forte);color:var(--suave,#667);font-size:10.5px;font-weight:600;line-height:13px;margin:-2px 0 -2px 6px;vertical-align:middle}

/* Conferência fiscal da nota: cartões por item (sem rolagem lateral) e triagem do contador */
.cf-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.cf-chips, .cf-vistas { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-itens, .cf-grupos { display: flex; flex-direction: column; gap: 8px; }
.cf-item, .cf-grupo { padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--linha); border-radius: 10px; }
.cf-item.ruim, .cf-grupo.ruim { border-left-color: var(--perigo); }
.cf-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.cf-nome { flex: 1; min-width: 0; font-size: 14px; }
.cf-acoes { flex: none; display: flex; align-items: center; gap: 6px; }
.cf-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.cf-c { padding: 6px 8px; border-radius: 8px; background: var(--bg); font-size: 12.5px; min-width: 0; }
.cf-c.dif { background: var(--perigo-fundo); }
.cf-r { display: block; font-size: 11px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.cf-n { color: var(--suave); }
.cf-p b { font-size: 13.5px; }
.cf-desc { font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-av { margin-top: 8px; font-size: 12.5px; }
.cf-av summary { cursor: pointer; color: var(--suave); }
.cf-av ul { margin: 4px 0 0; padding-left: 18px; }
.cf-info { font-size: 12px; margin-top: 6px; }
.cf-gt { margin-bottom: 6px; }
.cf-gi { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-gi-i { padding: 3px 10px; border-radius: 999px; background: var(--bg); font-size: 12.5px; }

/* Pré-venda: editor em duas colunas (itens à esquerda, resumo e ações à direita) */
.pv-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.pv-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv-col > .box, .pv-lado > .box { grid-column: auto; }
.pv-lado { position: sticky; top: 12px; }
.pv-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pv-acoes .btn { justify-content: center; }
.pv-acoes .btn .suave { color: inherit; opacity: .75; margin-left: 4px; }
@media (max-width: 900px) { .pv-grade { grid-template-columns: 1fr; } .pv-lado { position: static; } }
.pv-col > .box.pv-branco { background: var(--superficie); }
/* Pré-venda: resumo com desconto, preço final em destaque e forma de pagamento prevista */
.pv-bloco { margin-top: 14px; }
.pv-rot { font-size: 12px; color: var(--suave); font-weight: 600; margin-bottom: 6px; }
.pv-desc-linha { display: flex; gap: 8px; align-items: center; }
.pv-seg { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 8px; overflow: hidden; flex: none; }
.pv-seg button { padding: 7px 13px; background: var(--superficie); border: 0; cursor: pointer; font-weight: 600; color: var(--tinta); font-family: inherit; }
.pv-seg button.sel { background: var(--destaque); color: var(--destaque-tinta); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pv-chips .chip-forma { padding: 5px 12px; font-size: 12.5px; }
.pv-final { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--destaque-fundo); border-left: 4px solid var(--destaque); }
.pv-final.erro { border-left-color: var(--perigo); }
.pv-final-rot { font-size: 11.5px; letter-spacing: .08em; font-weight: 700; color: var(--destaque); }
.pv-final-val { font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
.pv-final-val small { font-size: 18px; font-weight: 700; margin-right: 2px; }
.pv-final-eco { font-size: 13px; color: var(--ok); font-weight: 600; margin-top: 2px; }
.pv-final-nota { font-size: 11.5px; color: var(--suave); margin-top: 6px; }
/* Pré-venda: barra fixa no rodapé com o valor a pagar e as ações */
.pv-grade { padding-bottom: 8px; }
.pv-rodape { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px -4px -4px; padding: 12px 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px 12px 0 0; box-shadow: 0 -6px 18px rgba(20, 25, 40, .10); }
.pv-rod-info { font-size: 12.5px; color: var(--suave); line-height: 1.45; min-width: 0; }
.pv-rod-info b { color: var(--tinta); }
.pv-rod-total { margin-left: auto; text-align: right; line-height: 1.05; }
.pv-rod-total span { display: block; font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--destaque); }
.pv-rod-total b { font-family: var(--f-display); font-size: 32px; font-weight: 800; }
.pv-rod-total small { font-size: 15px; font-weight: 700; margin-right: 2px; }
.pv-rod-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) { .pv-rod-total { margin-left: 0; text-align: left; } .pv-rod-acoes { width: 100%; } .pv-rod-acoes .btn { flex: 1; justify-content: center; } }
.pv-auto { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; }
.pv-auto label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pv-auto select { padding: 4px 8px; }
/* o total a pagar agora só aparece na barra do rodapé: ganha o destaque que tinha no resumo */
.pv-rod-total { padding: 6px 16px; background: var(--destaque-fundo); border-left: 4px solid var(--destaque); border-radius: 10px; }
.pv-rod-total b { font-size: 36px; }
/* barra do rodapé em uma linha só em telas largas: a informação cede espaço ao total e aos botões */
@media (min-width: 900px) {
  .pv-rodape { flex-wrap: nowrap; gap: 14px; }
  .pv-rod-info { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-rod-total, .pv-rod-acoes { flex: none; }
  .pv-rod-acoes { flex-wrap: nowrap; gap: 6px; }
}

/* Guia "Compras x Recebimento": quadro informativo que diferencia as duas telas de NF-e de compra */
.guia-nf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; max-width: 980px; }
.guia-nf > div { background: var(--superficie); border-left: 3px solid var(--destaque); border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.guia-nf > div.outra { border-left-color: var(--suave); }
.guia-nf h5 { margin: 0 0 4px; font-size: 13px; }
.guia-nf p { margin: 0; color: var(--suave); }
.guia-nf a { font-weight: 600; }
@media (max-width: 760px) { .guia-nf { grid-template-columns: 1fr; } }
.conv-pacote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 12.5px; }
.conv-pacote input { margin: 0; }
.pr-desc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding-top: 7px; margin-top: 8px; border-top: 1px dashed var(--linha-forte); font-size: 12.5px; }
.pr-desc h5 { margin: 0; } .pr-desc b { font-weight: 600; } .pr-desc small { color: var(--suave); }
.mv-painel { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.mv-painel .kpi-mini { padding: 8px 12px; }
.mv-painel .kpi-mini .v { font-size: 17px; }
.pr-desc-lim { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--linha-forte); font-size: 12.5px; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.pr-desc-lim span:nth-child(odd) { color: var(--suave); }
.prc-intro { margin: 10px 0 0; max-width: 900px; font-size: 13.5px; }
.prc-formula { display: block; margin-top: 2px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; opacity: .85; }
.prc-pend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--linha-forte); border-left: 4px solid var(--aviso); background: var(--aviso-fundo); font-size: 13px; }
.prc-pend .btn { white-space: nowrap; }
.cel-dupla { line-height: 1.3; display: grid; justify-items: end; }
.cel-dupla .sub { font-size: 11.5px; color: var(--suave); }
.prc-acoes { display: flex; gap: 6px; justify-content: flex-end; }
.prc-acoes .btn { padding: 6px 12px; font-size: 13px; }
@media (max-width: 760px) { .prc-pend { flex-wrap: wrap; } }
.sim-opt.ativo, .sim-opt:hover { border-color: var(--destaque); background: var(--bg); }
.sim-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--linha-forte); border-left: 4px solid var(--destaque); border-radius: 10px; background: var(--superficie); }
.sim-chip b { display: block; font-size: 13.5px; } .sim-chip span { font-size: 12px; color: var(--suave); }
.sim-chip .btn { padding: 5px 12px; font-size: 13px; white-space: nowrap; }

/* Cenário fiscal do produto (janela por cima do cadastro) */
#veu-cenario { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .5); display: grid; place-items: center; padding: 16px; animation: veu-entra .16s ease-out; }
.cf-caixa { background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta); width: 100%; max-width: 980px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: janela-entra .22s cubic-bezier(.2, .8, .2, 1); }
.cf-topo { display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--linha); }
.cf-topo h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.cf-sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-base { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.cf-base label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--suave); }
.cf-base input { width: 92px; padding: 5px 8px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.cf-base input#cf-qtd { width: 60px; }
.cf-corpo { padding: 12px 22px 14px; flex: 1; min-height: 0; overflow: hidden; }
.cf-rodape { display: flex; align-items: center; gap: 8px; padding: 10px 22px; background: var(--bg); border-top: 1px solid var(--linha); }
.cf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.cf-barra { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 8px; }
.cf-op { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--suave); flex: 1; max-width: 380px; }
.cf-op select { font-size: 13.5px; }
.cf-seg { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 10px; overflow: hidden; }
.cf-seg button { border: 0; background: var(--superficie); padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--tinta); }
.cf-seg button + button { border-left: 1px solid var(--linha-forte); }
.cf-seg button.ativo { background: var(--destaque); color: #fff; font-weight: 600; }
.cf-cfop { display: flex; align-items: center; gap: 16px; border: 1px solid var(--linha); border-left: 4px solid var(--destaque); border-radius: 10px; padding: 8px 14px; margin-bottom: 8px; background: var(--superficie); }
.cf-cod { font-family: var(--f-display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cf-desc { flex: 1; min-width: 0; font-size: 13px; }
.cf-campos { max-height: 300px; }
.cf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.cf-cards .tb-card { padding: 6px 10px; } .cf-cards .tb-card .v { font-size: 15px; }
.cf-orig { font-size: 10.5px; padding: 0 7px; margin-left: 4px; }
.cf-pag { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }

/* Contas a receber: cartões por cliente, ações da linha, janela de recebimento por Pix */
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.cli-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.cli-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte); border-radius: 10px; }
.cli-card.ruim { border-left-color: var(--perigo); }
.cli-card header { display: flex; align-items: center; gap: 8px; }
.cli-pos { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--linha); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cli-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-valor { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cli-pct { font-size: 11.5px; }
.cli-meta { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--linha); }
.cli-meta small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.cli-meta b { font-size: 13px; font-variant-numeric: tabular-nums; }
.cli-card footer { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.pix-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pix-op { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--superficie); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pix-op span { font-size: 12px; color: var(--suave); }
.pix-op:hover { border-color: var(--destaque); }
.pix-op.sel { border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque) inset; }
.px-grade { display: grid; grid-template-columns: 292px 1fr; gap: 12px; }
.px-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.px-qr #px-qr { width: 252px; height: 252px; display: grid; place-items: center; background: #fff; border-radius: 8px; padding: 6px; }
.px-qr #px-qr svg { width: 100%; height: 100%; }
.px-barra { width: 252px; height: 5px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.px-barra i { display: block; height: 100%; background: var(--destaque); transition: width 1s linear; }
.px-ok { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #15803d; text-align: center; }
.px-ok b { font-size: 64px; line-height: 1; }
.px-ok span { font-weight: 700; font-size: 16px; }
.px-ok small { color: var(--suave); }
.px-ok.ruim { color: var(--perigo); }
.px-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.px-nota { font-size: 12px; margin-top: 10px; }
.enc-baixa { margin-top: 2px; padding: 10px 12px; border: 1px solid var(--linha-forte); border-left: 3px solid var(--perigo); border-radius: 10px; background: var(--superficie); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.enc-baixa.dispensa { border-left-color: var(--linha-forte); opacity: .8; }
.enc-linhas { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.enc-linhas b { margin-left: auto; font-size: 14px; }

/* Janela Receber: extrato do recebimento */
.resumo-baixa { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.rb-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rb-l span { color: var(--texto); }
.rb-l span i { font-style: normal; color: var(--suave); font-size: 12px; margin-left: 4px; }
.rb-l b { font-variant-numeric: tabular-nums; font-weight: 600; }
.rb-enc { margin: 2px 0; padding: 7px 10px; border: 1px solid var(--linha); border-left: 3px solid var(--perigo); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; }
.rb-enc.dispensa { border-left-color: var(--linha-forte); }
.rb-enc.dispensa .rb-l { opacity: .55; text-decoration: line-through; }
.rb-cobrar { display: flex; align-items: center; gap: 8px; margin-top: 3px; cursor: pointer; font-size: 13px; }
.rb-tot { padding-top: 5px; border-top: 1px solid var(--linha-forte); font-size: 14.5px; }
.rb-tot b { font-size: 15px; }
.rb-sep { height: 1px; background: var(--linha); margin: 3px 0; }
.rb-sub { padding-left: 12px; font-size: 12.5px; }
.rb-sub span { color: var(--suave); }
.rb-fim { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--linha); font-weight: 600; }
.rb-fim b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rb-fim.ok { background: #e3f4e8; color: #15803d; }
.rb-fim.ruim { background: #fbe6e3; color: var(--perigo); }
:root[data-theme="dark"] .rb-fim.ok { background: #14301f; color: #6ee7a0; }
:root[data-theme="dark"] .rb-fim.ruim { background: #3a1a17; }
.rb-regra { margin-top: 3px; font-size: 11.5px; color: var(--suave); }
.rb-fim span i { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; opacity: .85; }
.px-grade > .box { grid-column: auto; }
.px-qr #px-qr { width: 244px; height: 244px; }
.px-qr .px-barra { width: 244px; }
.px-qr > .btn { margin-top: 4px; width: 244px; }
.px-grade > .box:last-child .form { margin-bottom: 4px; }
.px-nota { line-height: 1.45; }
button.acao-prot { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.acao-prot:hover:not(:disabled) { border-color: var(--destaque); }
button.acao-prot:disabled { opacity: .55; cursor: not-allowed; }