:root {
  --fundo: #f5f4f0;
  --superficie: #ffffff;
  --superficie-2: #f0eee8;
  --borda: #e2dfd6;
  --texto: #1d1c1a;
  --texto-2: #5f5c55;
  --texto-3: #8b877e;
  --destaque: #2f6b3f;
  --destaque-suave: #e3efe5;
  --barra: #2f6b3f;
  --barra-fora: #c9c5ba;
  --barra-antiga: #4f7fb3;
  --barra-antiga-fora: #a9c0dc;
  --antigo: #2c5a8a;
  --antigo-fundo: #e3ecf6;
  --sim: #1f7a3d;
  --sim-fundo: #e2f3e7;
  --nao: #9a3b1f;
  --nao-fundo: #fbe9e2;
  --alerta: #8a6200;
  --alerta-fundo: #fbf1d6;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #171715;
    --superficie: #21211e;
    --superficie-2: #2a2a26;
    --borda: #393833;
    --texto: #eeece6;
    --texto-2: #b6b2a8;
    --texto-3: #8a867c;
    --destaque: #7cc48f;
    --destaque-suave: #24382a;
    --barra: #6fb782;
    --barra-fora: #4a4842;
    --barra-antiga: #7aa3d6;
    --barra-antiga-fora: #44566e;
    --antigo: #8ab4e6;
    --antigo-fundo: #1f2b3a;
    --sim: #7fd197;
    --sim-fundo: #1e3326;
    --nao: #f0a080;
    --nao-fundo: #3a241c;
    --alerta: #e8c062;
    --alerta-fundo: #352c15;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--destaque); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; color: var(--texto-2); font-weight: 600; }

/* ---------- topo ---------- */
.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.topo-linha { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 1.05rem; color: var(--texto); text-decoration: none; white-space: nowrap; }
.marca span { color: var(--destaque); }
.menu { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a, .menu .em-breve { padding: 6px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap; font-size: .9rem; }
.menu a { color: var(--texto-2); }
.menu a.ativo { background: var(--destaque-suave); color: var(--destaque); font-weight: 600; }
.menu .em-breve { color: var(--texto-3); opacity: .6; cursor: default; }
.linha-avisos { max-width: 1100px; margin: 0 auto; padding: 0 16px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.aviso-automatico { max-width: 1100px; margin: 0 auto 8px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; border-radius: 8px; font-size: .88rem; }
.aviso-automatico[hidden] { display: none; }
.aviso-automatico span { flex: 1; min-width: 0; }
.aviso-automatico.ok { background: var(--sim-fundo); color: var(--sim); }
.aviso-automatico.alerta, .aviso-automatico.pedir { background: var(--alerta-fundo); color: var(--alerta); }
.aviso-automatico.discreto { background: var(--superficie-2); color: var(--texto-2); }
.aviso-automatico .fechar-aviso { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 2px 6px; }
@media (max-width: 1132px) { .aviso-automatico { margin-left: 16px; margin-right: 16px; } }
.aviso-importacao { font-size: .82rem; color: var(--texto-2); }
.base-em-uso { font-size: .78rem; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-2); }
.base-em-uso.historico { background: var(--antigo-fundo); color: var(--antigo); }
.aviso-importacao.velho { color: var(--alerta); font-weight: 600; }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------- elementos comuns ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }
.discreto { color: var(--texto-2); font-size: .88rem; }
.vazio { text-align: center; padding: 40px 16px; color: var(--texto-2); }
.botao { display: inline-block; background: var(--destaque); color: var(--superficie); border: 0; border-radius: 8px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.botao.secundario { background: var(--superficie-2); color: var(--texto); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; color: var(--texto-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
td { padding: 7px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.rolagem { overflow-x: auto; }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--superficie-2); color: var(--texto-2); }
.etiqueta.falta { background: var(--nao-fundo); color: var(--nao); }
.etiqueta.baixa { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.critica { background: var(--nao-fundo); color: var(--nao); }
.etiqueta.recente { background: var(--sim-fundo); color: var(--sim); }
.etiqueta.media { background: var(--sim-fundo); color: var(--sim); }
.etiqueta.acima, .etiqueta.semSaida, .etiqueta.nunca { background: var(--nao-fundo); color: var(--nao); }

/* ---------- importar ---------- */
.area-soltar { display: block; border: 2px dashed var(--borda); border-radius: var(--raio); background: var(--superficie); padding: 34px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.area-soltar.sobre { border-color: var(--destaque); background: var(--destaque-suave); }
.area-soltar strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.lista-relatorios { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 16px; }
.relatorio h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.numeros { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .9rem; }
.numeros dt { color: var(--texto-2); }
.numeros dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ok { color: var(--sim); }
.erro { color: var(--nao); }
.progresso { margin-top: 12px; font-size: .9rem; }
details summary { cursor: pointer; color: var(--destaque); font-size: .9rem; margin-top: 10px; }

/* ---------- consultar ---------- */
.busca { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); }
.busca:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }
.resultados { list-style: none; margin: 10px 0 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.resultados li a { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 14px; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borda); }
.resultados li:last-child a { border-bottom: 0; }
.resultados li a:hover { background: var(--superficie-2); }
.resultados .ref { font-weight: 700; font-size: .9rem; }
.resultados .desc { color: var(--texto-2); font-size: .88rem; }
.resultados .lado { text-align: right; flex-shrink: 0; font-size: .85rem; }

.cabeca-peca { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin: 16px 0 12px; }
.cabeca-peca .ref { font-size: .85rem; color: var(--texto-2); font-weight: 600; letter-spacing: .02em; }
.voltar { font-size: .9rem; }

.resposta { border-radius: var(--raio); padding: 16px; margin-bottom: 14px; border: 1px solid transparent; }
.resposta .pergunta { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; opacity: .8; }
.resposta .titulo { font-size: 1.45rem; font-weight: 750; margin: 2px 0 4px; }
.resposta.sim { background: var(--sim-fundo); color: var(--sim); }
.resposta.nao { background: var(--nao-fundo); color: var(--nao); }
.resposta.encomenda { background: var(--alerta-fundo); color: var(--alerta); }
.resposta p { margin: 0; color: var(--texto); }

.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; min-width: 0; }
.indicador .rotulo { font-size: .78rem; color: var(--texto-2); }
.indicador .valor { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.indicador .extra { font-size: .78rem; color: var(--texto-3); }

.grafico svg { width: 100%; height: auto; display: block; }
.grafico .barra { fill: var(--barra); }
.grafico .barra.fora { fill: var(--barra-fora); }
.grafico .barra.antiga { fill: var(--barra-antiga); }
.grafico .barra.antiga.fora { fill: var(--barra-antiga-fora); }
.etiqueta.antigo { background: var(--antigo-fundo); color: var(--antigo); }
.grafico text { fill: var(--texto-2); font-size: 11px; font-family: inherit; }
.grafico .eixo { stroke: var(--borda); }
.legenda { display: flex; gap: 14px; font-size: .8rem; color: var(--texto-2); margin-top: 6px; flex-wrap: wrap; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legenda .cor-barra { background: var(--barra); }
.legenda .cor-barra-antiga { background: var(--barra-antiga); }
.legenda .cor-barra-fora { background: var(--barra-fora); }
.legenda .cor-barra-antiga-fora { background: var(--barra-antiga-fora); }
.espaco-topo { margin-top: 12px; }

.parametros { font-size: .82rem; color: var(--texto-3); margin-top: 8px; }

/* ---------- painel de filtros ---------- */
.painel-filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin: 0 0 12px; }
.painel-cabeca { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 8px 12px; }
.painel-alternar { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--texto); cursor: pointer; white-space: nowrap; }
.painel-alternar .seta { display: inline-block; width: 12px; color: var(--texto-2); }
.painel-resumo { flex: 1; min-width: 200px; font-size: .82rem; color: var(--texto-2); }
.botao.pequeno { padding: 5px 10px; font-size: .82rem; }
.painel-corpo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; padding: 12px; border-top: 1px solid var(--borda); }
.campo-filtro { display: flex; flex-direction: column; gap: 5px; }
.campo-filtro.largo { grid-column: span 2; }
.campo-filtro .rotulo { font-size: .78rem; font-weight: 600; color: var(--texto-2); }
.campo-filtro .entrada { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--texto-2); }
.campo-filtro input[type="text"] { width: 72px; font: inherit; color: var(--texto); padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); text-align: right; }
.campo-filtro input[type="month"] { font: inherit; font-size: .88rem; color: var(--texto); padding: 5px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); }
.campo-filtro input.invalido { border-color: var(--nao); outline: 1px solid var(--nao); }
.segmentos { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--superficie-2); border-radius: 9px; width: fit-content; max-width: 100%; }
.segmentos button { border: 0; background: none; font: inherit; font-size: .85rem; padding: 5px 10px; border-radius: 7px; color: var(--texto-2); cursor: pointer; }
.segmentos button.ativo { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }
.intervalo { display: flex; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--texto-2); }
.intervalo label { display: flex; align-items: center; gap: 6px; }
.dica { margin: 0; font-size: .78rem; color: var(--alerta); }
.dica:empty { display: none; }
@media (max-width: 720px) {
  .painel-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-filtro.largo { grid-column: 1 / -1; }
}

/* ---------- saídas da semana ---------- */
.filtros-saidas { border-top: 0; }
.periodo-datas { margin: 0; }
.aviso-periodo { margin: 0 0 12px; }
.barra-saidas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.filtro-texto { flex: 1; min-width: 220px; font-size: .95rem; padding: 8px 12px; }
.ordem { font-size: .85rem; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.ordem select { font: inherit; color: var(--texto); padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); }
.tabela-saidas table { min-width: 820px; }
.aviso-intervalo { background: var(--destaque-suave); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 14px; }
.aviso-intervalo.alerta { background: var(--alerta-fundo); color: var(--texto); }
.aviso-intervalo .intervalo-coberto { font-size: 1.1rem; margin-bottom: 2px; }
.aviso-intervalo .dica { margin-top: 6px; }
.indicador.destaque-estorno { background: var(--nao-fundo); border-color: transparent; }
.indicador.destaque-estorno .valor { color: var(--nao); }
.cartao-estornos { border-color: var(--nao); }
.cartao-estornos h2 { color: var(--nao); }
.cartao-trocas { border-left: 4px solid var(--texto-3); }
.quadro > summary.quadro-cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--texto); list-style: none; }
.quadro > summary.quadro-cabecalho::-webkit-details-marker { display: none; }
.quadro > summary.quadro-cabecalho h2 { margin: 0; }
.quadro > summary.quadro-cabecalho h2::before { content: '▸'; display: inline-block; width: 1.1em; transition: transform .15s; }
.quadro[open] > summary.quadro-cabecalho h2::before { transform: rotate(90deg); }
.quadro-resumo { color: var(--texto-3); font-size: .85rem; }
.quadro-acao { margin-left: auto; color: var(--destaque); font-size: .85rem; }
.quadro[open] .quando-fechado, .quadro:not([open]) .quando-aberto { display: none; }
.quadro[open] > summary.quadro-cabecalho { margin-bottom: 10px; }
.linha-estorno td { color: var(--nao); }
.tabela-comprar table { min-width: 1000px; }
.filtro-situacao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 12px; }
.filtro-situacao .rotulo { font-size: .78rem; font-weight: 600; color: var(--texto-2); }
.lista-documentos { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; margin-bottom: 8px; }
.documento { border-bottom: 1px solid var(--borda); }
.documento:last-child { border-bottom: 0; }
.documento summary { display: grid; grid-template-columns: 130px 90px 1fr auto auto; gap: 4px 14px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--texto); font-size: .9rem; margin: 0; }
.documento summary::-webkit-details-marker { display: none; }
.documento summary:hover { background: var(--superficie-2); }
.documento[open] summary { background: var(--superficie-2); }
.doc-nome { font-weight: 700; }
.doc-data, .doc-total { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.doc-total { text-align: right; white-space: nowrap; }
.documento table { margin: 4px 0 8px; }
.documento td { padding: 5px 14px; }
@media (max-width: 720px) {
  .documento summary { grid-template-columns: 1fr auto; }
  .doc-cliente { grid-column: 1 / -1; color: var(--texto-2); }
  .documento tr { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "ref qtd valor" "desc desc desc"; padding: 6px 14px; border-bottom: 1px solid var(--borda); }
  .documento tr:last-child { border-bottom: 0; }
  .documento td { border: 0; padding: 0 0 0 10px; }
  .documento .item-ref { grid-area: ref; padding-left: 0; }
  .documento .item-qtd { grid-area: qtd; }
  .documento .item-valor { grid-area: valor; }
  .documento .item-desc { grid-area: desc; padding: 2px 0 0; color: var(--texto-2); font-size: .82rem; }
}

/* ---------- destaque da linha ao voltar do detalhe de uma peça ---------- */
@keyframes linha-destacada {
  0%, 55% { background-color: var(--alerta-fundo); }
  100% { background-color: transparent; }
}
@keyframes marca-destacada {
  0%, 55% { box-shadow: inset 4px 0 0 var(--alerta); }
  100% { box-shadow: inset 4px 0 0 transparent; }
}
tr.destacada > td { animation: linha-destacada 3.5s ease-out; }
tr.destacada > td:first-child, li.destacada > a { animation: linha-destacada 3.5s ease-out, marca-destacada 3.5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  tr.destacada > td, li.destacada > a { animation: none; background-color: var(--alerta-fundo); }
}

/* ---------- painel ---------- */
.indicador.destaque-parado { background: var(--nao-fundo); border-color: transparent; }
.indicador.destaque-parado .valor { color: var(--nao); }
.indicador.destaque-velho { background: var(--alerta-fundo); border-color: transparent; }
.indicador.destaque-velho .extra { color: var(--alerta); font-weight: 600; }
.barras-parado { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.barra-linha { display: grid; grid-template-columns: 170px 1fr 120px; gap: 12px; align-items: center; }
.barra-rotulo { font-size: .9rem; font-weight: 600; display: flex; flex-direction: column; }
.barra-rotulo span, .barra-numero span { font-size: .78rem; font-weight: 400; color: var(--texto-2); }
.barra-trilho { height: 16px; background: var(--superficie-2); border-radius: 0 4px 4px 0; }
.barra-valor { height: 100%; background: var(--nao); border-radius: 0 4px 4px 0; }
.barra-numero { display: flex; flex-direction: column; text-align: right; font-variant-numeric: tabular-nums; }
.tabela-situacao tfoot td { border-top: 2px solid var(--borda); border-bottom: 0; }
@media (max-width: 720px) {
  .barra-linha { grid-template-columns: 1fr auto; }
  .barra-trilho { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- estoque parado ---------- */
.quem { margin: -4px 0 12px; }
.link-botao { border: 0; background: none; padding: 0; margin-left: 6px; font: inherit; color: var(--destaque); text-decoration: underline; cursor: pointer; }
.pedir-nome .rotulo { display: block; font-size: .85rem; font-weight: 600; color: var(--texto-2); margin-bottom: 6px; }
.pedir-nome input { width: 220px; font-size: 1rem; text-align: left; }
.progresso-acoes { margin: -4px 0 12px; }
.tabela-parado table { min-width: 1180px; }
.tabela-parado select.acao { font: inherit; font-size: .85rem; color: var(--texto); padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); max-width: 210px; }
.tabela-parado select.acao.marcada { background: var(--destaque-suave); border-color: var(--destaque); color: var(--destaque); font-weight: 600; }
.tabela-parado .marcado-por { font-size: .82rem; white-space: nowrap; }
.tabela-parado .marcado-por span { display: block; color: var(--texto-3); font-size: .75rem; }
.acao-marcada { margin: -4px 0 14px; padding: 8px 12px; border-radius: 8px; background: var(--destaque-suave); font-size: .9rem; }
.aviso-negativo { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--alerta-fundo); color: var(--alerta); font-size: .9rem; font-weight: 600; }

/* ---------- cotação ---------- */
.menu .contagem:not(:empty) { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--destaque); color: var(--superficie); font-size: .72rem; font-weight: 700; text-align: center; line-height: 18px; }
.botao:disabled { opacity: .45; cursor: default; }
.botao.perigo { color: var(--nao); }
.bloco-cotacao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 14px; }
.form-cotacao .rotulo { display: block; font-size: .85rem; font-weight: 600; color: var(--texto-2); margin-bottom: 6px; }
.linha-qtd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha-qtd input, .tabela-cotacao input { font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); }
.linha-qtd input { width: 120px; font-size: 1.1rem; text-align: right; }
.linha-qtd input.invalido, .tabela-cotacao input.invalido { border-color: var(--nao); outline: 1px solid var(--nao); }
.previa-linha { margin: 12px 0 8px; }
.previa-alerta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; font-size: .9rem; }
.previa-alerta span { color: var(--texto); }
.previa-alerta.resposta-sim { background: var(--sim-fundo); color: var(--sim); }
.previa-alerta.resposta-nao { background: var(--nao-fundo); color: var(--nao); }
.previa-alerta.resposta-encomenda { background: var(--alerta-fundo); color: var(--alerta); }
.form-cotacao .acoes { margin-bottom: 0; }
.acoes-cotacao { align-items: center; flex-wrap: wrap; margin-top: 0; }
.tabela-cotacao table { min-width: 960px; }
.tabela-cotacao td { vertical-align: middle; }
.tabela-cotacao input.qtd { width: 90px; text-align: right; }
.tabela-cotacao input.obs { width: 100%; min-width: 180px; }
.tabela-cotacao .depois { white-space: nowrap; }
.revisao-pedido .tabela-lista { margin: 10px 0; border: 1px solid var(--borda); border-radius: var(--raio); }
.revisao-pedido table { min-width: 640px; }
.revisao-pedido td { vertical-align: middle; }
.revisao-pedido input.qtd { font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); width: 90px; text-align: right; }
.revisao-pedido input.qtd.invalido { border-color: var(--nao); outline: 1px solid var(--nao); }
.acima-sugestao { color: var(--nao); font-weight: 600; }
.abaixo-sugestao { color: var(--alerta); font-weight: 600; }
.ultimo-pedido { font-size: .85rem; margin: 6px 0 0; color: var(--texto-2); }
.aviso-registro { margin: 0 0 12px; }
.filtros-pedidos { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 16px; }
.filtros-pedidos .intervalo[hidden] { display: none; }
.tabela-pedidos table { min-width: 760px; }
.tabela-pedidos tr.clicavel { cursor: pointer; }
.nome-pedido { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; max-width: 520px; }
.cabeca-pedido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cabeca-pedido .acoes { margin: 0; }
.tabela-pedidos tr.tirada td { opacity: .45; text-decoration: line-through; }
.tabela-pedidos tr.tirada td:last-child { opacity: 1; text-decoration: none; }
.tabela-pedidos input.qtd { font: inherit; color: var(--texto); padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); width: 90px; text-align: right; }
.tabela-pedidos input.qtd.invalido { border-color: var(--nao); outline: 1px solid var(--nao); }
.tabela-pedidos tr.nova td { background: var(--destaque-suave); }
.sinal-baixo { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; font-size: .74rem; font-weight: 600; white-space: nowrap; background: var(--alerta-fundo); color: var(--alerta); }
.sinal-baixo.falta { background: var(--nao-fundo); color: var(--nao); }
.disp-sinal { margin-left: 6px; white-space: nowrap; }
.linha-adicionar { display: flex; flex-wrap: wrap; gap: 8px; }
.linha-adicionar input { font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); }
.linha-adicionar #nova-ref { flex: 1 1 200px; min-width: 0; }
.linha-adicionar #nova-qtd { width: 90px; text-align: right; }
#resultado-adicionar p { margin: 8px 0 0; }
.nome-pedido input { font: inherit; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); }
.tabela-pedidos td:first-child { white-space: nowrap; }
#copia-seguranca label.botao { cursor: pointer; }
.tabela-cotacao .num-depois { display: inline-block; min-width: 36px; text-align: right; margin-right: 6px; font-variant-numeric: tabular-nums; }
.tabela-cotacao .remover { border: 0; background: none; color: var(--texto-3); font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.tabela-cotacao .remover:hover { background: var(--nao-fundo); color: var(--nao); }

/* ---------- abas da consulta e lista de várias peças ---------- */
.abas { display: inline-flex; gap: 2px; padding: 3px; background: var(--superficie-2); border-radius: 10px; margin-bottom: 12px; }
.abas a { padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--texto-2); font-size: .9rem; font-weight: 600; }
.abas a.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
label[for="lista-refs"] { display: block; }
.lista-refs { display: block; margin-top: 6px; font-family: ui-monospace, Menlo, monospace; font-size: .95rem; resize: vertical; }
.acoes { display: flex; gap: 8px; margin: 10px 0 14px; }
code { font-family: ui-monospace, Menlo, monospace; background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; }

.tabela-lista { padding: 0; overflow: hidden; }
.conteudo.largo { max-width: 1320px; }
.tabela-lista table { min-width: 980px; }
.tabela-lista th { background: var(--superficie); vertical-align: bottom; }
.tabela-lista th.num { text-align: right; white-space: normal; min-width: 64px; }
.tabela-lista td { vertical-align: middle; }
.tabela-lista td.num, .tabela-lista th.num { padding-left: 4px; padding-right: 8px; }
.tabela-lista .fixa { position: sticky; left: 0; background: var(--superficie); z-index: 1; white-space: nowrap; font-weight: 700; }
.tabela-lista .descricao { min-width: 180px; max-width: 230px; }
.tabela-lista .avaliacao { min-width: 195px; }
.tabela-lista .avaliacao .discreto { font-size: .8rem; margin-top: 2px; }
.tabela-lista tr.clicavel { cursor: pointer; }
.tabela-lista tr.clicavel:hover td { background: var(--superficie-2); }
.tabela-lista .totais { margin: 0; padding: 10px 12px; border-top: 1px solid var(--borda); font-size: .9rem; }
.etiqueta.resposta-sim { background: var(--sim-fundo); color: var(--sim); }
.etiqueta.resposta-nao { background: var(--nao-fundo); color: var(--nao); }
.etiqueta.resposta-encomenda { background: var(--alerta-fundo); color: var(--alerta); }
.nao-encontrados { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.tabela-lista .como { white-space: nowrap; font-size: .85rem; }
.tabela-lista .como .discreto { font-size: .78rem; margin-top: 2px; }
.etiqueta.como-parteReferencia, .etiqueta.como-descricao { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.varias-encontradas { background: var(--nao-fundo); color: var(--nao); }
.tabela-lista tr.varias td { background: var(--alerta-fundo); vertical-align: top; }
.opcoes-peca { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.opcao-peca { font: inherit; font-size: .85rem; text-align: left; cursor: pointer; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); max-width: 480px; }
.opcao-peca:hover { border-color: var(--texto-2); }
.varias-conteudo { position: sticky; left: 12px; max-width: min(640px, calc(100vw - 64px)); }
.opcao-peca { max-width: 100%; }
button.link { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 720px) {
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicador .valor { font-size: 1.05rem; overflow-wrap: anywhere; }
  .topo-linha { gap: 8px; }
  .menu { flex-basis: 100%; }
  .resposta .titulo { font-size: 1.25rem; }
  .tabela-docs thead { display: none; }
  .tabela-docs tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; border-bottom: 1px solid var(--borda); }
  .tabela-docs td { border: 0; padding: 1px 0; }
  .tabela-docs td.cliente { grid-column: 1 / -1; color: var(--texto-2); }
  .tabela-docs td.num { text-align: left; }
  .tabela-docs td.status { text-align: right; color: var(--texto-2); }
}

/* ---------- evolução do Painel ---------- */
a.indicador.clicavel, a.barra-linha.clicavel { color: inherit; text-decoration: none; cursor: pointer; }
a.indicador.clicavel:hover { border-color: var(--texto-3); }
a.indicador.destaque-parado.clicavel:hover { border-color: var(--nao); }
a.barra-linha.clicavel { border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
a.barra-linha.clicavel:hover { background: var(--superficie-2); }
.tabela-situacao tr.clicavel { cursor: pointer; }
.tabela-situacao tr.clicavel:hover td { background: var(--superficie-2); }
.tabela-situacao tr.clicavel a { text-decoration: none; }
.variacao { font-size: .78rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.variacao.melhor, .evolucao-variacao.melhor { color: var(--sim); }
.variacao.pior, .evolucao-variacao.pior { color: var(--nao); }
.variacao.neutra, .evolucao-variacao.neutra { color: var(--texto-3); }
.indicador .rotulo .variacao { margin-left: 4px; }
.evolucao { margin-bottom: 14px; }
.evolucao-cabeca { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.evolucao .rotulo { font-size: .85rem; color: var(--texto-2); }
.valor-destaque { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.evolucao-variacoes { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.evolucao-variacao { font-size: 1rem; }
.evolucao-variacao .seta { font-size: .9rem; }
.evolucao-variacao .discreto { font-size: .78rem; font-weight: 400; }
.grafico-area { position: relative; }
.grafico-linha { width: 100%; height: auto; display: block; touch-action: pan-y; }
.grafico-linha:focus { outline: none; }
.grafico-linha:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: 4px; }
.grafico-linha .grade { stroke: var(--borda); stroke-width: 1; }
.grafico-linha .eixo-texto { fill: var(--texto-3); font-size: 11px; font-family: inherit; }
/* Linha e pontos em tinta neutra: verde e vermelho ficam reservados para "melhorou" e "piorou". */
.grafico-linha .linha { fill: none; stroke: var(--texto-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linha .marca { fill: var(--texto-2); stroke: var(--superficie); stroke-width: 2; }
.grafico-linha .partida { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 5 4; }
.grafico-linha .guia { stroke: var(--texto-3); stroke-width: 1; display: none; }
.grafico-linha .foco { fill: var(--texto); stroke: var(--superficie); stroke-width: 2; display: none; }
.grafico-area.com-selecao .guia, .grafico-area.com-selecao .foco { display: inline; }
.chave-partida { width: 18px !important; height: 0 !important; border-radius: 0 !important; border-top: 1px dashed var(--texto-3); vertical-align: middle !important; }
.balao { position: absolute; display: none; z-index: 2; width: max-content; max-width: min(280px, 100%); pointer-events: none;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .14); padding: 8px 10px; font-size: .82rem; }
.grafico-area.com-selecao .balao { display: block; }
.balao-valor { font-size: 1rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.balao .discreto { font-size: .78rem; font-weight: 400; }
.balao .evolucao-variacao { font-size: .82rem; margin-top: 3px; }
.balao .evolucao-variacao .seta { font-size: .72rem; }

.ultima-saida { font-size: .78rem; white-space: nowrap; margin-top: 2px; }

/* ---------- login e acesso (Etapa 1) ---------- */
/* Enquanto a pessoa não entra, só a tela de acesso aparece. */
body.sem-acesso .topo, body.sem-acesso .conteudo { display: none; }
.acesso[hidden] { display: none; }
.acesso { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.acesso-caixa { width: 100%; max-width: 400px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px 20px; box-shadow: var(--sombra); }
.acesso-marca { font-weight: 700; font-size: 1.15rem; margin-bottom: 14px; }
.acesso-marca span { color: var(--destaque); }
.acesso h1 { font-size: 1.3rem; margin: 0 0 8px; }
.acesso-form { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.acesso-form .rotulo { font-size: .85rem; font-weight: 600; color: var(--texto-2); margin-top: 6px; }
.acesso-form input { font: inherit; font-size: 16px; color: var(--texto); padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); width: 100%; }
.acesso-form input:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }
.acesso-form .botao { margin-top: 10px; padding: 11px 14px; }
.acesso-erro { min-height: 1.2em; margin: 4px 0 0; font-size: .9rem; }
.acesso-passos { padding-left: 20px; font-size: .9rem; color: var(--texto-2); }
.acesso-qr { display: flex; justify-content: center; padding: 10px; background: #fff; border-radius: 8px; margin: 8px 0; }
.acesso-qr img { width: 200px; height: 200px; }
.acesso-segredo { word-break: break-all; font-size: .85rem; }
.acesso .link-botao { margin-left: 0; }

/* Quem entrou, no topo */
.quem-entrou { display: flex; align-items: center; gap: 4px 10px; font-size: .85rem; color: var(--texto-2); white-space: nowrap; }
.quem-entrou .link-botao { margin-left: 0; font-size: .85rem; }
.menu a[hidden], .quem-entrou [hidden] { display: none; }

/* Tela de usuários */
.lista-usuarios { display: grid; gap: 12px; }
.usuario.aguardando { border-color: var(--alerta); border-width: 2px; }
.usuario-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.etiqueta.aguardando { background: var(--alerta-fundo); color: var(--alerta); white-space: normal; }
.etiqueta.ativo { background: var(--sim-fundo); color: var(--sim); }
.usuario-editar { display: grid; gap: 8px; margin: 12px 0; }
.usuario-editar .rotulo, .form-senha .rotulo { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.usuario-editar input, .usuario-editar select, .form-senha input { font: inherit; font-size: 16px; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); width: 100%; max-width: 100%; }
.usuario .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.form-senha { margin-top: 12px; display: grid; gap: 8px; }
.form-senha[hidden] { display: none; }
.carregando { padding: 24px 0; }