/* Precificador — sem fonte externa (a CSP bloqueia) e sem JavaScript. */
:root {
  --fundo: #f4f6f8; --superficie: #ffffff; --tinta: #16191e; --apagado: #5b6573;
  --linha: #dce1e7; --acento: #1f5c4a; --acento-tinta: #ffffff;
  --perigo: #a1261c; --perigo-fundo: #fbeceb; --alerta: #8a5a0b; --alerta-fundo: #fcf3e3;
  --ok: #1f6b4a; --ok-fundo: #e6f2ec; --trilho: #e3e7ec; --raio: 8px;
  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1216; --superficie: #171b21; --tinta: #e7eaee; --apagado: #98a2af;
    --linha: #283039; --acento: #4db38a; --acento-tinta: #0f1216;
    --perigo: #f07b6e; --perigo-fundo: #2c1614; --alerta: #e0a84a; --alerta-fundo: #2a2011;
    --ok: #5cc592; --ok-fundo: #132a1f; --trilho: #2a313b;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.55 var(--fonte); }
a { color: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.tela-simples { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.cartao-simples { width: 100%; max-width: 24rem; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 2rem; }
.marca { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); margin: 0 0 .75rem; }
.cartao-simples h1 { font-size: 1.25rem; margin: 0 0 1.25rem; text-wrap: balance; }

.topo { background: var(--superficie); border-bottom: 1px solid var(--linha); }
.topo-dentro { max-width: 68rem; margin: 0 auto; padding: .75rem 1.25rem; display: flex;
  align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topo nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.topo nav a { color: var(--tinta); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.topo nav a[aria-current="page"] { border-color: var(--acento); }
.quem { color: var(--apagado); font-size: .875rem; display: flex; align-items: center; gap: .75rem; }
.conteudo { max-width: 68rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; display: grid; gap: 1.5rem; }
h1.titulo { font-size: 1.5rem; margin: 0; text-wrap: balance; }
.nota { color: var(--apagado); margin: -.75rem 0 0; max-width: 62ch; }
.bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem; }
.bloco h2 { font-size: 1rem; margin: 0 0 1rem; }

form.campos { display: grid; gap: 1rem; }
.campo { display: grid; gap: .35rem; }
.campo label, legend { font-size: .8rem; font-weight: 600; color: var(--apagado); }
input[type=text], input[type=search], input[type=password], select { font: inherit; color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--linha); border-radius: 6px; padding: .55rem .7rem; width: 100%; }
fieldset { border: 1px solid var(--linha); border-radius: 6px; padding: .75rem 1rem; margin: 0; }
legend { padding: 0 .35rem; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.opcoes label { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: var(--tinta); font-weight: 400; }
.linha-botoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
button { font: inherit; font-weight: 600; border-radius: 6px; padding: .55rem 1rem; cursor: pointer;
  border: 1px solid var(--acento); background: var(--acento); color: var(--acento-tinta); }
button.secundario { background: transparent; color: var(--acento); }
button.perigo { background: transparent; color: var(--perigo); border-color: var(--perigo); }
button.link { background: none; border: 0; color: var(--apagado); padding: 0; font-weight: 400; text-decoration: underline; }
form.inline { display: inline; }

.mensagem { border-radius: 6px; padding: .7rem .9rem; font-size: .9rem; margin: 0; }
.mensagem.erro { background: var(--perigo-fundo); color: var(--perigo); }
.mensagem.ok { background: var(--ok-fundo); color: var(--ok); }
.mensagem.alerta { background: var(--alerta-fundo); color: var(--alerta); }

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
.mono { font-family: var(--mono); font-size: .85em; }
.etiqueta { display: inline-block; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .1rem .55rem; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.inativo { color: var(--apagado); border: 1px solid var(--linha); }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta); }

.senha-exibida { font-family: var(--mono); font-size: 1.35rem; letter-spacing: .04em; background: var(--fundo);
  border: 1px dashed var(--acento); border-radius: 6px; padding: .9rem 1rem; user-select: all; overflow-wrap: anywhere; }

/* --- Precos e margens --- */
.botao { display: inline-block; font-weight: 600; border-radius: 6px; padding: .55rem 1rem; text-decoration: none;
  border: 1px solid var(--acento); background: var(--acento); color: var(--acento-tinta); }
.botao.secundario { background: transparent; color: var(--acento); }
.mensagem.info { background: var(--superficie); border: 1px solid var(--linha); color: var(--apagado); }
.cabeca-precos { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.cabeca-precos .titulo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.acoes-cabeca { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
/* seletor "Loja / Canal" sem JavaScript (Nath, 06/11): <details> com links — o clique na conta ja troca */
.seletor-conta { display: flex; align-items: center; gap: .5rem; margin: 0; }
.seletor-conta .rotulo { font-size: .8rem; font-weight: 600; color: var(--apagado); white-space: nowrap; }
.seletor-conta details { position: relative; }
.seletor-conta summary { list-style: none; cursor: pointer; min-width: 14rem; padding: .55rem 2.2rem .55rem .7rem;
  border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); position: relative; }
.seletor-conta summary::-webkit-details-marker { display: none; }
.seletor-conta summary::after { content: "▾"; position: absolute; right: .75rem; color: var(--apagado); }
.seletor-conta details[open] summary { border-color: var(--acento); }
.seletor-conta summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.seletor-conta ul { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20; margin: 0; padding: .3rem 0;
  list-style: none; min-width: 100%; max-height: 70vh; overflow-y: auto; white-space: nowrap;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
.seletor-conta li a, .seletor-conta li .indisponivel { display: block; padding: .4rem .9rem; }
.seletor-conta li a { color: var(--tinta); text-decoration: none; }
.seletor-conta li a:hover, .seletor-conta li a:focus-visible { background: var(--fundo); color: var(--acento); }
.seletor-conta li a[aria-current] { font-weight: 600; color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); }
.seletor-conta li .indisponivel { color: var(--apagado); font-size: .85rem; }
.empresa { font-size: .8rem; font-weight: 600; border: 1px solid var(--linha); background: var(--superficie);
  border-radius: 999px; padding: .1rem .6rem; }
.nota-precos { color: var(--apagado); font-size: .875rem; margin: .25rem 0 0; }
.voltar { margin: 0; font-size: .875rem; }
.baldes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.balde { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .7rem .9rem; display: grid; gap: .1rem; text-decoration: none; color: var(--tinta); }
.balde strong { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.balde span { font-size: .8rem; color: var(--apagado); }
.balde.perigo strong { color: var(--perigo); }
.balde.alerta strong { color: var(--alerta); }
.balde.atual { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
form.filtros { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .9rem; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; }
form.filtros .campo { min-width: 12rem; }
form.filtros .campo:first-child { flex: 1 1 16rem; }
.marcar { display: flex; gap: .45rem; align-items: center; font-size: .9rem; }
.tabela-precos td { font-variant-numeric: tabular-nums; }
th.d, td.d { text-align: right; }
tr.abaixo td:first-child { box-shadow: inset 3px 0 0 var(--perigo); }
tr.sem_calculo td:first-child, tr.pendente td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.titulo-anuncio { font-weight: 600; color: var(--tinta); text-decoration: none; display: block; min-width: 14rem; }
.titulo-anuncio:hover { text-decoration: underline; }
.sub { font-size: .78rem; color: var(--apagado); display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .15rem 0 0; }
.etiqueta.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.etiqueta.neutra { color: var(--apagado); border: 1px solid var(--linha); }
.falta { color: var(--perigo); font-weight: 600; white-space: nowrap; }
.sobra { color: var(--ok); white-space: nowrap; }
.riscado { text-decoration: line-through; color: var(--apagado); font-size: .8rem; }
.apagado { color: var(--apagado); }
.escala { display: block; font-size: .65rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.medidor { width: 7.5rem; height: .75rem; display: block; margin-top: .3rem; }
.medidor .trilho { fill: var(--trilho); }
.medidor .vao-falta { fill: var(--perigo); opacity: .55; }
.medidor .vao-folga { fill: var(--ok); opacity: .45; }
.medidor .alvo { stroke: var(--tinta); stroke-width: 1.4; }
.medidor .ponto { fill: var(--tinta); }
.paginacao { display: flex; gap: 1rem; align-items: center; justify-content: center; font-size: .9rem; }
.detalhe-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.lado { display: grid; gap: 1rem; }
.conta { font-size: .9rem; }
.conta td { border-bottom: 1px dashed var(--linha); padding: .45rem .2rem; }
.conta td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conta tr.total td { border-top: 1px solid var(--tinta); border-bottom: 0; font-weight: 700; }
.aparte { display: block; font-size: .78rem; color: var(--apagado); }
.resumo-margem { margin: .75rem 0 .25rem; font-variant-numeric: tabular-nums; }
.sugerido { border: 1px solid var(--acento); border-radius: var(--raio); padding: .9rem 1rem; background: var(--superficie); }
.sugerido .rotulo { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.sugerido strong { display: block; font-size: 1.9rem; line-height: 1.15; color: var(--acento); font-variant-numeric: tabular-nums; }
.sugerido p { margin: .3rem 0 0; font-size: .875rem; color: var(--apagado); }
.caixa { border-radius: 6px; padding: .6rem .8rem; font-size: .875rem; margin: .5rem 0 0; }
.caixa.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.caixa.neutra { border: 1px dashed var(--linha); color: var(--apagado); }
.acoes { display: grid; gap: .75rem; }
.acoes h2 { margin: 0; }
@media (max-width: 760px) {
  .baldes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detalhe-grade { grid-template-columns: minmax(0, 1fr); }
}

/* Lista de preços mais larga (pedido da Nath, 2026-10-15): a tabela tem 11 colunas */
.conteudo.larga { max-width: 112rem; }
/* Reconsulta em massa */
.barra-lote { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.barra-lote .nota-precos { margin: 0 auto 0 0; }
.marcar-col { width: 2rem; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Anuncio com variacoes (Nath, 2026-10-15): cabecalho do anuncio e as variacoes embaixo, como no Bling */
.tabela-precos tr.grupo-variacoes td { background: var(--fundo, #f6f7f8); padding-top: .6rem; padding-bottom: .4rem; }
.tabela-precos tr.variacao td:nth-child(2) { border-left: 3px solid #2e9e5b; padding-left: 1.4rem; }
.variacao-atual { margin: .25rem 0 0; color: var(--apagado); }
.variacao-atual a { margin-left: .35rem; }

/* Oportunidade de faixa (Nath, 2026-10-16) */
.oportunidade { color: #1f7a45; font-weight: 600; font-size: .85em; }
.caixa.oportunidade { background: #e9f6ee; border: 1px solid #9fd6b3; color: #1f5f3a; font-weight: 400; font-size: 1em; }

/* Simulador (Nath, 2026-10-28): linhas baixas (o anuncio em duas linhas, os numeros em uma) e a linha com o preco
   praticado ABAIXO do sugerido sombreada */
.tabela-simulador th, .tabela-simulador td { padding: .3rem .6rem; line-height: 1.3; }
.tabela-simulador td.d, .tabela-simulador td:nth-child(3) { white-space: nowrap; }
.tabela-simulador .sub { margin: 0; }
.tabela-simulador tr.preco-abaixo td { background: var(--perigo-fundo); }
.tabela-simulador tr.preco-abaixo td:first-child { box-shadow: inset 3px 0 0 var(--perigo); }

/* titulo de coluna que ordena (Nath, 2026-10-28) */
th a.ordenar { color: inherit; text-decoration: none; }
th a.ordenar:hover { text-decoration: underline; }
th a.ordenar.atual { color: var(--acento); }
form.filtros .campo.campo-curto { min-width: 8rem; }

/* Simulador em todas as contas (Nath, 06/11): um bloco por conta */
.titulo-conta { font-size: 1rem; margin: 1.5rem 0 .5rem; display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: .35rem; border-bottom: 2px solid var(--acento); }
.titulo-conta .apagado { font-size: .8rem; font-weight: 400; }