/* ARI Precificação - visual com as cores da logo da ARI Sistemas
   Azul-marinho (#0e4f73) nos botões, barras e textos; ciano (#12d5f1) nos destaques e no botão de gravar.
   O amarelo ficou só na etiqueta do preço novo, para o preço alterado saltar aos olhos. */
:root {
  --fundo: #f0f5f8;
  --sup: #ffffff;
  --sup-2: #f5f9fb;
  --tinta: #0b2c40;
  --tinta-2: #3b5567;
  --mudo: #657c8b;
  --linha: #dde7ed;
  --linha-forte: #c3d2dc;
  --primaria: #0e4f73;
  --primaria-escura: #0a3d5a;
  --primaria-suave: #e1f7fc;
  --acento: #12d5f1;          /* ciano da logo */
  --acento-escuro: #0a9dbb;
  --etiqueta: #ffd84a;
  --etiqueta-borda: #dcae06;
  --ruim: #c93636;
  --ruim-fundo: #fdecec;
  --bom: #157a4b;
  --bom-fundo: #e4f5eb;
  --alerta: #8f5b00;
  --alerta-fundo: #fff4d2;
  --raio: 14px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(23, 33, 43, .06), 0 1px 1px rgba(23, 33, 43, .03);
  --sombra-alta: 0 12px 32px rgba(23, 33, 43, .16), 0 2px 6px rgba(23, 33, 43, .08);
  --texto: Manrope, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@font-face { font-family: Manrope; src: url("fontes/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 500 15px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
h1 { font-size: 1.65rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .75rem; }
a { color: var(--primaria-escura); }
b { font-weight: 700; }
small { display: block; color: var(--mudo); font-size: .8rem; line-height: 1.35; font-weight: 500; }
small > span + span { margin-left: .75em; }
.mudo { color: var(--mudo); }
.digitos { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
:focus-visible { outline: 3px solid rgba(18, 213, 241, .7); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- barra do topo */
.barra { display: flex; align-items: center; gap: .75rem 2rem; flex-wrap: wrap; background: var(--sup); border-bottom: 1px solid var(--linha); padding: .6rem 1.5rem; }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--tinta); text-decoration: none; }
.logo { display: block; width: 38px; height: 38px; border-radius: 9px; background: #fff; }
.barra-master .logo { padding: 2px; }
.barra nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.barra nav a { display: flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: .92rem; }
.barra nav a:hover { background: var(--fundo); color: var(--tinta); }
.barra nav a[aria-current] { background: var(--primaria-suave); color: var(--primaria-escura); box-shadow: inset 0 -2px 0 var(--acento); }
.barra-fim { margin-left: auto; display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.quem { display: flex; align-items: center; gap: .55rem; }
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.quem-texto { line-height: 1.2; }
.empresa { display: block; font-size: .9rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sair { color: var(--tinta-2); font-weight: 600; font-size: .9rem; text-decoration: none; padding: .4rem .7rem; border-radius: 999px; }
.sair:hover { background: var(--fundo); color: var(--tinta); }
.barra-suporte { background: var(--acento); color: var(--tinta); padding: .35rem .8rem; border-radius: 999px; font-size: .86rem; font-weight: 700; text-decoration: none; }
.barra-master { background: var(--tinta); border-bottom-color: var(--tinta); }
.barra-master .marca, .barra-master .empresa { color: #fff; }
.barra-master nav a, .barra-master .sair { color: #c4ced7; }
.barra-master nav a[aria-current] { background: rgba(255, 255, 255, .12); color: #fff; }
.barra-master nav a:hover, .barra-master .sair:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.barra-master .avatar { background: var(--acento); color: var(--tinta); }
.barra-master nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--acento); }
.barra-master small { color: #9fb0bd; }

.pagina { max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.5rem 7rem; }
.pagina-estreita { max-width: 780px; }
.pagina-media { max-width: 980px; }
.pagina-larga { max-width: 1500px; }

/* ---------- avisos */
.aviso { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--sup); font-weight: 600; }
.aviso-ok { border-color: #b9e2cb; background: var(--bom-fundo); color: #0e5a36; }
.aviso-erro { border-color: #f3c2c2; background: var(--ruim-fundo); color: #8f2020; }
.aviso-atencao { border-color: #f0d98a; background: var(--alerta-fundo); color: #6e4600; }
.vazio { background: var(--sup); border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 2.2rem; max-width: 62ch; }
.vazio p { margin: 0 0 .4rem; }
.vazio-pequeno { margin: 0 0 1rem; padding: .9rem 1rem; background: var(--sup-2); border-radius: var(--raio-p); color: var(--tinta-2); }

/* ---------- campos e botões */
input, select, button { font: inherit; color: inherit; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=date], input[type=search], input:not([type]), select {
  height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: var(--sup); min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus { outline: none; border-color: var(--acento-escuro); box-shadow: 0 0 0 3px rgba(18, 213, 241, .35); }
input::placeholder { color: #9aa7b3; font-weight: 500; }
input:disabled { background: var(--sup-2); color: var(--mudo); }
label { font-size: .84rem; font-weight: 600; color: var(--tinta-2); }
label > input, label > select, label > .com-sufixo { display: block; margin-top: .3rem; }
label > input[type=checkbox], label > input[type=radio] { display: inline-block; vertical-align: -2px; margin: 0 .35rem 0 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--primaria); width: 1.05rem; height: 1.05rem; }
.com-sufixo { display: flex !important; align-items: center; }
.com-sufixo input { width: 5.2rem; border-radius: var(--raio-p) 0 0 var(--raio-p); text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.com-sufixo i { font-style: normal; height: 2.5rem; padding: 0 .65rem; display: flex; align-items: center; border: 1px solid var(--linha-forte); border-left: 0; border-radius: 0 var(--raio-p) var(--raio-p) 0; background: var(--sup-2); color: var(--mudo); font-weight: 700; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.5rem; padding: 0 1.05rem; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: var(--sup); color: var(--tinta); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: .9rem; font-weight: 700; transition: background-color .12s, border-color .12s; }
.botao:hover { background: var(--fundo); border-color: #b5c0ca; }
.botao-forte { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.botao-forte:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); }
.botao-gravar { background: var(--acento); border-color: var(--acento-escuro); color: var(--tinta); }
.botao-gravar:hover { background: #5fe3f6; border-color: var(--acento-escuro); }
.botao-perigo { border-color: #efbcbc; color: var(--ruim); }
.botao-perigo:hover { background: var(--ruim-fundo); border-color: #e59c9c; }
.botao-grande { height: 2.9rem; font-size: 1rem; }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.elo { background: none; border: 0; padding: .2rem .55rem; border-radius: 999px; color: var(--primaria-escura); font-weight: 700; cursor: pointer; }
.elo:hover { background: var(--primaria-suave); }
.voltar { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .9rem; font-size: .88rem; font-weight: 700; text-decoration: none; }
.voltar::before { content: "\2190"; }
.voltar:hover { text-decoration: underline; }

/* ---------- tabelas e cartões */
.rolagem { overflow-x: auto; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.rolagem-interna { box-shadow: none; margin-bottom: 1.1rem; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: .76rem; font-weight: 700; color: var(--mudo); background: var(--sup-2); padding: .7rem .85rem; white-space: nowrap; border-bottom: 1px solid var(--linha); }
.tabela td { padding: .7rem .85rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:not(.detalhe):hover > td { background: #fbfcfd; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela td.digitos, .tabela td .digitos { font-weight: 600; }
.tabela td > b + .mudo { white-space: nowrap; }
.selo { display: inline-block; font-size: .76rem; font-weight: 700; padding: .14rem .6rem; border-radius: 999px; background: var(--fundo); color: var(--tinta-2); white-space: nowrap; }
.selo-ok, .selo-e, .selo-o, .selo-v { background: var(--bom-fundo); color: var(--bom); }
.selo-c, .selo-x, .selo-i { background: var(--ruim-fundo); color: var(--ruim); }
.selo-r, .selo-z, .selo-bon { background: var(--alerta-fundo); color: var(--alerta); }
.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.3rem 1.4rem 1.4rem; margin-top: 1.5rem; }
.cartao .titulo-linha { margin-bottom: 1rem; }

/* ---------- painel master */
.titulo-linha { display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1.25rem; }
.titulo-linha h1, .titulo-linha h2 { margin-bottom: .15rem; }
.titulo-linha p { margin: 0; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem; margin: 0 0 1.5rem; }
.numeros > div { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: .9rem 1.1rem; }
.numeros dt { font-size: .8rem; font-weight: 600; color: var(--mudo); }
.numeros dd { margin: .1rem 0 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.numeros .numero-alerta dd { color: var(--ruim); }
.acoes-linha { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.acoes-linha .botao { height: 2.1rem; padding: 0 .75rem; font-size: .84rem; }
.troca-senha { display: flex; gap: .4rem; }
.troca-senha input { height: 2.1rem; width: 9rem; font-size: .86rem; }
.novo-usuario { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.novo-usuario .cresce { flex: 1 1 13rem; }
.novo-usuario .cresce input { width: 100%; }
.recolhido { margin-top: 1.6rem; }
.recolhido .filtros { margin: .8rem 0 0; }
.rodape-links { margin-top: 1.2rem; font-size: .9rem; }
.campo-cnpj { width: 13rem; }
.linha-campos .cresce { flex: 1 1 14rem; }
.linha-campos .cresce input { width: 100%; }
.cz-dica-form { margin: .8rem 0 0; font-size: .82rem; color: var(--mudo); }
.origem-notas { margin: -.4rem 0 .9rem; font-size: .9rem; }
.situacao-lote { margin: 0 0 .5rem; font-size: .92rem; font-weight: 500; }

/* ---------- notas de entrada */
.filtros { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; margin-bottom: 1.25rem; padding: 1rem 1.1rem; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.recolhido .filtros { box-shadow: none; }
.filtros input[name=numero] { width: 9rem; }
.marca-linha { display: flex; align-items: center; gap: .4rem; height: 2.5rem; }
.busca-rapida { display: block; margin-bottom: .9rem; max-width: 22rem; }
.busca-rapida input { width: 100%; }
.paginas { display: flex; gap: .75rem; margin-top: 1rem; }

/* ---------- cabeçalho da nota */
.nota-cabeca { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding: 1.1rem 1.3rem; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.nota-cabeca h1 { margin-bottom: .15rem; font-size: 1.4rem; }
.nota-cabeca p { margin: 0; font-size: .9rem; }
.nota-dados { display: flex; flex-wrap: wrap; gap: .6rem 0; margin: 0; }
.nota-dados > div { padding: 0 1.4rem; border-left: 1px solid var(--linha); }
.nota-dados > div:first-child { border-left: 0; padding-left: 0; }
.nota-dados dt { font-size: .76rem; font-weight: 600; color: var(--mudo); }
.nota-dados dd { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.nota-dados dd small { display: inline; font-size: .78rem; }

/* ---------- barra de ferramentas da precificação */
.ferramentas { position: sticky; top: .6rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; padding: .9rem 1.1rem; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 6px 18px rgba(23, 33, 43, .08); }
.ferramentas select { max-width: 15rem; }
.marcar { display: flex; gap: .15rem; align-items: center; height: 2.5rem; margin-left: auto; font-size: .86rem; color: var(--mudo); font-weight: 600; flex-wrap: wrap; }
.marcar > span { margin-right: .3rem; }
.paginador { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; margin: .8rem 0; font-size: .9rem; color: var(--tinta-2); font-weight: 600; }
.paginador-fim { margin-top: .9rem; }
.pg-botoes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pg-botoes .botao { height: 2.2rem; }
.pg-botoes label { display: flex; align-items: center; gap: .4rem; margin-left: .6rem; }
.pg-botoes label select { margin-top: 0; height: 2.2rem; }
.progresso { min-height: 1.4rem; margin: .8rem 0 .6rem; font-size: .9rem; color: var(--tinta-2); }
.progresso.ruim { color: var(--ruim); }

/* ---------- grade de preços */
.tabela-precos td { vertical-align: middle; }
.col-marca { width: 2.6rem; text-align: center; }
.col-produto { min-width: 16rem; }
.col-produto b { font-weight: 700; }
.custo { background: none; border: 0; border-bottom: 1px dashed var(--linha-forte); padding: 0; cursor: pointer; font-weight: 700; font-variant-numeric: tabular-nums; }
.custo:hover { border-bottom-color: var(--primaria); color: var(--primaria-escura); }
.custo-difere { background: var(--alerta-fundo); border-bottom: 1px solid var(--etiqueta-borda); padding: 0 .3rem; border-radius: 4px 4px 0 0; }
.custo-difere + small { color: var(--alerta); }
.campo-pct, .campo-acr { width: 4.7rem; height: 2.2rem !important; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.campo-acr { width: 4.3rem; }
.campo-acr:not(:placeholder-shown) { border-color: var(--etiqueta-borda); background: var(--alerta-fundo); }
.campo-acrescimo { display: block; margin-top: 1rem; }
.c-pct-atual.ruim { color: var(--ruim); font-weight: 800; }
.c-var.sobe { color: var(--bom); }
.c-var.desce { color: var(--ruim); }
.c-estado { font-size: .84rem; color: var(--mudo); min-width: 9rem; font-weight: 600; }
.c-estado.bom { color: var(--bom); }
.c-estado.ruim { color: var(--ruim); }
.c-estado.alerta { color: var(--alerta); }

/* a etiqueta: o preço novo é o único lugar da tela com amarelo cheio */
.etiqueta { display: inline-flex; align-items: baseline; gap: .3rem; padding: .2rem .6rem; background: var(--sup-2); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); color: var(--tinta); transition: background-color .15s, border-color .15s; }
.etiqueta span { font-size: .7rem; font-weight: 800; color: var(--mudo); }
.etiqueta input { width: 5.4rem; height: 1.9rem !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: right; font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.etiqueta:focus-within { border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(18, 213, 241, .35); }
tr.mudou .etiqueta { background: var(--etiqueta); border-color: var(--etiqueta-borda); box-shadow: 0 2px 0 rgba(220, 174, 6, .35); }
tr.mudou .etiqueta span { color: var(--tinta); }
tr.prejuizo .etiqueta { background: var(--ruim-fundo); border-color: var(--ruim); box-shadow: none; }
tr.prejuizo .etiqueta input { color: var(--ruim); }
tr.mudou > td:first-child { box-shadow: inset 4px 0 0 var(--etiqueta); }
tr.prejuizo > td:first-child { box-shadow: inset 4px 0 0 var(--ruim); }

/* detalhe do custo */
tr.detalhe > td { background: var(--sup-2); padding: 1rem 1.3rem 1.2rem 3.2rem; }
.detalhe-caixa { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: flex-start; }
.conta { min-width: 22rem; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .7rem 1rem; }
.conta p { display: flex; justify-content: space-between; gap: 2rem; margin: 0; padding: .28rem 0; border-bottom: 1px solid var(--linha); font-size: .92rem; }
.conta p.fora { color: var(--mudo); }
.conta p.resultado { border-bottom: 0; border-top: 1px solid var(--tinta); margin-top: .2rem; font-weight: 700; }
.conta p.resultado + p.resultado { border-top: 0; margin-top: 0; }
.conta p:last-of-type { border-bottom: 0; }
.escolha-custo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; font-size: .86rem; color: var(--tinta-2); font-weight: 600; }
.escolha-custo .botao { height: 2.1rem; font-size: .84rem; }
.escolha-custo .botao[aria-pressed=true] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
details summary { cursor: pointer; font-size: .88rem; color: var(--tinta-2); font-weight: 600; }
details pre { max-height: 16rem; max-width: 46rem; overflow: auto; margin: .5rem 0 0; padding: .7rem; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-p); font-size: .76rem; }

/* ---------- barra flutuante de gravar */
.rodape-fixo { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 6; width: min(1452px, calc(100% - 2rem)); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center; padding: .7rem .8rem .7rem 1.2rem; background: var(--tinta); color: #fff; border-radius: 16px; box-shadow: var(--sombra-alta); }
.rodape-fixo p { margin: 0; font-weight: 600; }
.rodape-fixo div { display: flex; gap: .5rem; flex-wrap: wrap; }
.rodape-fixo .botao { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.rodape-fixo .botao:hover { background: rgba(255, 255, 255, .18); }
.rodape-fixo .botao-gravar { height: 2.7rem; padding: 0 1.4rem; font-size: .98rem; background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.rodape-fixo .botao-gravar:hover { background: #5fe3f6; }
.rodape-fixo .botao-gravar:disabled { background: rgba(18, 213, 241, .3); border-color: transparent; color: rgba(255, 255, 255, .75); opacity: 1; }

dialog { border: 0; border-radius: 18px; padding: 1.6rem; max-width: 35rem; width: calc(100% - 2rem); color: var(--tinta); box-shadow: var(--sombra-alta); }
dialog::backdrop { background: rgba(23, 33, 43, .5); }
dialog h2 { font-size: 1.25rem; font-weight: 800; }
.grupo { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.grupo legend { font-size: .9rem; font-weight: 800; padding: 0; margin-bottom: .4rem; }
.grupo label { font-size: .94rem; font-weight: 500; color: var(--tinta); display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.grupo label:has(input:disabled) { color: var(--mudo); }
.campo-curto { width: 6.5rem !important; }
.grupo .campo-curto { height: 2.1rem; margin-left: .5rem; text-align: right; }
.bloco { margin-bottom: 2rem; }
.lista-conf { list-style: none; margin: 0 0 .75rem; padding: 0; }
.lista-conf li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .35rem 0; border-bottom: 1px solid var(--linha); font-size: .92rem; }
.lista-conf b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.acoes { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }

/* ---------- formulários em cartão */
.ficha fieldset { border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); background: var(--sup); padding: 1.1rem 1.3rem 1.3rem; margin: 0 0 1.1rem; min-width: 0; }
.ficha legend { font-size: 1rem; font-weight: 800; padding: 0 .5rem; margin-left: -.5rem; }
.ficha fieldset > label { display: block; margin-bottom: 1rem; }
.ficha fieldset > label:last-child { margin-bottom: 0; }
.ficha fieldset > label > input:not([type=checkbox]):not([type=radio]):not([type=date]), .ficha fieldset > label > select { width: 100%; }
.ficha fieldset > label.opcao-unica { display: flex; margin-bottom: 1rem; }
.ficha small { margin-top: .3rem; }
.linha-campos { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.opcao { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); cursor: pointer; font-size: .94rem; font-weight: 500; color: var(--tinta); }
.opcao:has(input:checked) { border-color: var(--acento-escuro); background: var(--primaria-suave); box-shadow: 0 0 0 1px var(--acento-escuro); }
.opcao input { margin-top: .2rem !important; flex: none; }
.opcao small { margin-top: .1rem; }
.rotulo { margin: 0 0 .35rem; font-size: .84rem; font-weight: 600; color: var(--tinta-2); }
.marcas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.marcas label { font-size: .9rem; font-weight: 600; color: var(--tinta); padding: .35rem .75rem; border: 1px solid var(--linha-forte); border-radius: 999px; cursor: pointer; }
.marcas label:has(input:checked) { border-color: var(--acento-escuro); background: var(--primaria-suave); color: var(--primaria-escura); }

/* ---------- entrada */
.tela-acesso { background: var(--sup); }
.acesso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.acesso > .aviso { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 10; width: min(26rem, calc(100% - 2.4rem)); box-shadow: var(--sombra-alta); }
.acesso-lado { background: var(--primaria); color: #fff; padding: 2.5rem clamp(1.5rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.acesso-logo { align-self: flex-start; background: #fff; border-radius: 18px; padding: 1rem 1.3rem; }
.acesso-logo img { display: block; width: 9.5rem; height: auto; }
.acesso-produto { margin: 0 0 1.4rem; font-weight: 800; font-size: .95rem; color: var(--primaria); letter-spacing: .01em; }
.acesso-exemplo { align-self: flex-start; width: min(19rem, 100%); }
.ex-linha { display: flex; justify-content: space-between; margin: 0; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .22); color: #bfe9f5; font-weight: 600; }
.ex-linha b { color: #fff; font-variant-numeric: tabular-nums; }
.ex-etiqueta { display: flex; align-items: baseline; justify-content: space-between; margin: 1rem 0 0; padding: .7rem 1.1rem; background: var(--etiqueta); color: var(--tinta); border-radius: 14px; box-shadow: 0 4px 0 rgba(220, 174, 6, .6); }
.ex-etiqueta span { font-weight: 800; }
.ex-etiqueta b { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.acesso-frase { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; max-width: 22ch; }
.acesso-form { display: grid; place-items: center; padding: 2rem 1.25rem; }
.acesso-caixa { width: 100%; max-width: 23rem; }
.acesso-caixa h1 { font-size: 1.9rem; margin-bottom: .35rem; }
.acesso-caixa > .mudo { margin: 0; }
.pilha { display: grid; gap: 1rem; margin-top: 1.5rem; }
.pilha input { width: 100%; height: 2.8rem; }
.acesso-rodape { margin: 1.3rem 0 0; font-size: .86rem; color: var(--mudo); }

/* ---------- histórico: seleção e relatório para imprimir ou salvar em PDF */
.hist-acoes { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 .8rem; }
.hist-acoes p { margin: 0; font-weight: 600; color: var(--tinta-2); font-size: .92rem; }
.hist-acoes div { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.col-sel { width: 2.6rem; text-align: center; }
#hist tr.marcada > td { background: var(--primaria-suave); }
.so-impressao { display: none; }
.rel-cabeca h1 { font-size: 16pt; margin: 0 0 2pt; }
.rel-cabeca p { margin: 0 0 2pt; font-size: 10pt; }
.rel-cabeca { margin-bottom: 10pt; padding-bottom: 6pt; border-bottom: 1.5pt solid #000; }
@media print {
  body.imprimir-hist { background: #fff; color: #000; font-size: 9.5pt; }
  body.imprimir-hist .barra, body.imprimir-hist .so-tela, body.imprimir-hist .aviso { display: none !important; }
  body.imprimir-hist .so-impressao { display: block; }
  body.imprimir-hist .pagina { max-width: none; padding: 0; margin: 0; }
  body.imprimir-hist .rolagem { border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
  body.imprimir-hist #hist tbody tr:not(.marcada), body.imprimir-hist #hist .col-sel { display: none; }
  body.imprimir-hist #hist tbody tr.marcada[hidden] { display: table-row !important; }   /* marcada e escondida pelo filtro: sai no PDF */
  body.imprimir-hist #hist thead { display: table-header-group; }
  body.imprimir-hist #hist tr { break-inside: avoid; }
  body.imprimir-hist #hist th { background: #e9e9e9 !important; color: #000; border-bottom: 1pt solid #000; padding: 4pt 5pt; font-size: 8.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimir-hist #hist td { background: #fff !important; padding: 3.5pt 5pt; border-bottom: .5pt solid #bbb; }
  body.imprimir-hist #hist small { font-size: 7.5pt; color: #444; }
  body.imprimir-hist a { color: inherit; text-decoration: none; }
  body.imprimir-hist .selo { background: none !important; color: #000 !important; padding: 0; font-weight: 700; }
}

@media (max-width: 820px) {
  .acesso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acesso-lado { padding: 1.1rem 1.25rem; gap: 1rem; align-items: center; }
  .acesso-logo { align-self: center; padding: .7rem 1rem; }
  .acesso-logo img { width: 6.2rem; }
  .acesso-exemplo, .acesso-frase { display: none; }
  .acesso-form { place-items: start center; padding-top: 1.6rem; }
}
@media (max-width: 720px) {
  .pagina { padding: 1rem .8rem 9rem; }
  .barra { gap: .5rem 1rem; padding: .6rem .8rem; }
  .barra-fim { margin-left: 0; }
  .ferramentas { position: static; }
  .marcar { margin-left: 0; height: auto; }
  .nota-dados > div { padding: 0 1rem 0 0; border-left: 0; }
  tr.detalhe > td { padding-left: 1rem; }
  .conta { min-width: 0; width: 100%; }
  .troca-senha input { width: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- celular: tudo em uma coluna, tabelas viram cartões e os campos ficam do tamanho do dedo */
@media screen and (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }      /* abaixo de 16px o iPhone dá zoom sozinho ao tocar no campo */
  h1 { font-size: 1.35rem; }
  .barra { padding: .5rem .8rem; gap: .35rem .8rem; }
  .barra nav { order: 3; width: 100%; flex-wrap: nowrap; gap: .15rem; }
  .barra nav a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: .15rem; justify-content: center; text-align: center; white-space: nowrap; padding: .4rem .2rem; border-radius: 12px; font-size: .74rem; }
  .barra-master nav a { flex: none; flex-direction: row; gap: .45rem; padding: .45rem .8rem; font-size: .9rem; }
  .so-largo { display: none; }
  .barra-fim { margin-left: auto; gap: .3rem; flex-wrap: nowrap; min-width: 0; }
  .quem { min-width: 0; }
  .quem .avatar { display: none; }
  .quem-texto { min-width: 0; text-align: right; }
  .empresa, .quem-texto small { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-suporte { font-size: .76rem; padding: .3rem .6rem; }
  .marca span { font-size: .98rem; }

  .titulo-linha > .botao { width: 100%; }
  .numeros { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .numeros dd { font-size: 1.35rem; }
  .filtros { padding: .8rem; gap: .7rem; }
  .filtros > label { flex: 1 1 8.5rem; }
  .filtros > label:not(.marca-linha) > input, .filtros > label > select { width: 100%; }
  .filtros > .botao, .filtros > .marca-linha { flex: 1 1 100%; }
  .filtros > .marca-linha { height: auto; justify-content: flex-start; }
  .filtros input[name=numero] { width: 100%; }
  .busca-rapida { max-width: none; }
  .cartao { padding: 1rem; }
  .ficha fieldset { padding: .9rem 1rem 1.1rem; }
  .linha-campos > label { flex: 1 1 100%; }
  .linha-campos > label > input, .linha-campos > label > select, .campo-cnpj { width: 100%; }
  .acoes { flex-wrap: wrap; }
  .acoes .botao { flex: 1 1 auto; }
  .novo-usuario > label, .novo-usuario > .botao { flex: 1 1 100%; }
  .novo-usuario input { width: 100%; }
  .troca-senha { flex-wrap: wrap; width: 100%; }
  .troca-senha input { flex: 1 1 8rem; width: auto; }
  .hist-acoes div, .hist-acoes .botao { width: 100%; }

  /* tabelas em cartões: cada linha vira um bloco e o nome da coluna aparece acima do valor */
  .rolagem { overflow: visible; }
  table.cartoes, table.cartoes tbody { display: block; }
  table.cartoes thead { display: none; }
  table.cartoes tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; padding: .9rem; border-bottom: 1px solid var(--linha); }
  table.cartoes tr.detalhe { display: block; padding: 0; }
  table.cartoes tbody tr:last-child { border-bottom: 0; }
  table.cartoes td { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal !important; min-width: 0; }
  table.cartoes td[data-r]::before { content: attr(data-r); display: block; font-size: .72rem; font-weight: 600; color: var(--mudo); margin-bottom: .1rem; }
  table.cartoes td.larga { grid-column: 1 / -1; }
  table.cartoes td.larga[data-r]::before { display: none; }
  table.cartoes td:empty { display: none; }
  table.cartoes .acoes-linha { justify-content: flex-start; }
  table.cartoes td.larga > .botao { width: 100%; height: 2.6rem; }
  table.cartoes tbody tr:not(.detalhe):hover > td { background: none; }
  table.cartoes td.col-marca, table.cartoes td.col-sel { position: absolute; right: .8rem; top: .8rem; width: auto; z-index: 1; }
  table.cartoes td.col-marca::before, table.cartoes td.col-sel::before { display: none; }
  .col-marca input, .col-sel input { width: 1.45rem; height: 1.45rem; }
  #hist tr.marcada { background: var(--primaria-suave); }
  #hist tr.marcada > td { background: none; }
  #hist td.larga { padding-right: 2.4rem; }

  /* nota: cabeçalho, ferramentas e a grade de preços */
  .nota-cabeca { padding: .9rem; gap: .7rem; }
  .nota-cabeca h1 { font-size: 1.12rem; }
  .nota-dados { gap: .5rem 1.2rem; }
  .nota-dados > div { padding: 0; border-left: 0; }
  .nota-dados dd { font-size: 1.02rem; }
  .ferramentas { position: static; padding: .8rem; }
  .ferramentas > label { flex: 1 1 8rem; }
  .ferramentas > label > select { max-width: none; width: 100%; }
  .ferramentas .com-sufixo input { flex: 1 1 auto; width: 100%; }
  .ferramentas > .botao { flex: 1 1 100%; height: 2.7rem; }
  .marcar { margin-left: 0; height: auto; width: 100%; }
  .paginador { gap: .5rem; }
  .pg-botoes { width: 100%; }
  .pg-botoes .botao { flex: 1 1 auto; }
  .pg-botoes label { margin-left: 0; }
  table.tabela-precos tr { grid-template-columns: 1fr 1fr 1fr; }
  table.tabela-precos td.col-produto { grid-column: 1 / -1; padding-right: 2.5rem; min-width: 0; }
  table.tabela-precos td.col-produto::before { display: none; }
  table.tabela-precos td.c-estado { grid-column: 1 / -1; min-width: 0; }
  table.tabela-precos td.c-estado::before { display: none; }
  .tabela-precos .campo-pct, .tabela-precos .campo-acr { width: 100%; height: 2.5rem !important; }
  .tabela-precos .etiqueta { display: flex; }
  .tabela-precos .etiqueta input { width: 100%; height: 2.2rem !important; font-size: 1.15rem !important; }
  tr.mudou > td:first-child, tr.prejuizo > td:first-child { box-shadow: none; }
  table.cartoes tr.mudou { box-shadow: inset 4px 0 0 var(--etiqueta); }
  table.cartoes tr.prejuizo { box-shadow: inset 4px 0 0 var(--ruim); }
  tr.detalhe > td { padding: .8rem .9rem 1rem; }
  .conta { min-width: 0; width: 100%; }

  /* barra de gravar encostada no pé da tela */
  .rodape-fixo { left: 0; transform: none; bottom: 0; width: 100%; border-radius: 16px 16px 0 0; padding: .65rem .7rem calc(.65rem + env(safe-area-inset-bottom)); gap: .5rem; }
  .rodape-fixo p { width: 100%; font-size: .84rem; }
  .rodape-fixo div { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
  .rodape-fixo .botao { padding: 0 .4rem; font-size: .8rem; height: 2.4rem; white-space: normal; line-height: 1.1; }
  .rodape-fixo .botao-gravar { grid-column: 1 / -1; order: -1; height: 2.8rem; font-size: .95rem; }
  .pagina-larga { padding-bottom: 13rem; }
  dialog { padding: 1.1rem; }
  dialog .acoes .botao { flex: 1 1 100%; }
}