/* Portal de Tabelas de Precos — Alfa Mare

   SISTEMA VISUAL (set/2026): uma familia (IBM Plex Sans), cinco tamanhos de
   letra (--fs-*), cantos de 2 px (--raio) e linhas de 1 px separando as areas.
   Cor de destaque: o azul-marinho da marca Alfa Mare. Verde so no preco de
   venda. Nenhum tamanho de letra ou raio fora das variaveis abaixo.

   TEMA: nenhuma cor e escrita direto nas regras — tudo sai das variaveis do
   bloco abaixo. Trocar de tema e trocar o valor das variaveis, nada mais. O
   tema fica em <html data-tema="claro|escuro|auto">; "auto" segue o sistema.
   A paleta escura daqui e provisoria, so para o seletor nao ficar sem efeito;
   o desenho definitivo vem do Claude Design. */

:root {
  --fonte: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-legenda: 12px;   /* rotulos, cabecalho de grade, notas */
  --fs-pequeno: 13px;   /* celulas da grade, botoes, campos compactos */
  --fs-base: 14px;      /* texto corrido, campos, menu */
  --fs-secao: 18px;     /* titulo de secao, busca em destaque */
  --fs-titulo: 24px;    /* titulo da pagina */
  --raio: 2px;
  --alt-linha: 36px;    /* linha da grade — a virtualizacao depende dela */
  --alt-visib: 40px;    /* faixa "Quem vê" acima do cabecalho */
}

:root,
:root[data-tema="claro"] {
  --bg: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #f4f5f7;   /* cabecalho de grade, thead */
  --superficie-3: #fafbfc;   /* faixas neutras, fundo de logo */
  --linha-par: #fbfbfc;
  --realce: #eef2fa;         /* hover de linha */
  --borda: #dfe3ea;
  --borda-forte: #c5ccd8;
  --linha-grade: #eceff3;

  --texto: #172033;
  --texto-fraco: #5b6678;
  --texto-cabecalho: #4a5568;
  --texto-apagado: #6b7587;  /* placeholder */

  --azul: #2b4a94;           /* azul-marinho da marca */
  --azul-escuro: #1f3673;
  --azul-claro: #eef2fa;
  --azul-borda: #c3cfe8;
  --verde: #237a35;
  --verde-claro: #edf6ef;
  --verde-borda: #bfdcc5;
  --ambar: #9a4a08;
  --ambar-claro: #fdf6e7;
  --ambar-borda: #ecd9b0;
  --vermelho: #a52a1f;
  --vermelho-claro: #fbf0ef;
  --vermelho-borda: #efcac6;
  --roxo: #5b3a92;
  --roxo-claro: #f1ecf8;

  --calc-fundo: #f5faf6;
  --calc-hover: #e3f0e6;
  --pendente-texto: #a8483f;
  --pendente-fundo: #fbf2f1;
  --pendente-hover: #f6e4e2;
  --marca-texto: #ffe9a3;
  --selecionada: #fff8e1;

  --balao-fundo: #172033;
  --balao-texto: #ffffff;
  --balao-fraco: #aab4c3;

  --sombra: none;
  --sombra-alta: 0 8px 24px rgba(23, 32, 51, .14);
  --veu: rgba(23, 32, 51, .45);
}

:root[data-tema="escuro"] {
  --bg: #0f1620;
  --superficie: #16202c;
  --superficie-2: #1c2836;
  --superficie-3: #131c26;
  --linha-par: #131c26;
  --realce: #1b3145;
  --borda: #2a3849;
  --borda-forte: #3a4b5f;
  --linha-grade: #222f3e;

  --texto: #e6edf5;
  --texto-fraco: #93a3b5;
  --texto-cabecalho: #aebbc9;

  --azul: #93aae8;
  --azul-escuro: #b1c3f1;
  --azul-claro: #1b2744;
  --azul-borda: #34476f;
  --verde: #56c48f;
  --verde-claro: #12352a;
  --verde-borda: #24614a;
  --ambar: #e0a75a;
  --ambar-claro: #33270f;
  --ambar-borda: #5c471c;
  --vermelho: #ef8175;
  --vermelho-claro: #351d1c;
  --vermelho-borda: #5e3231;
  --roxo: #b294e3;
  --roxo-claro: #2a2140;

  --calc-fundo: #142720;
  --calc-hover: #1c3a2e;
  --pendente-texto: #e09a92;
  --pendente-fundo: #33201f;
  --pendente-hover: #452a28;
  --marca-texto: #6b5a12;
  --selecionada: #2f2a15;

  --balao-fundo: #04090f;
  --balao-texto: #eef3f8;
  --balao-fraco: #8fa0b1;

  --sombra: none;
  --texto-apagado: #8190a3;
  --sombra-alta: 0 10px 30px rgba(0,0,0,.55);
  --veu: rgba(3,8,13,.6);
}

@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --bg: #0f1620;
    --superficie: #16202c;
    --superficie-2: #1c2836;
    --superficie-3: #131c26;
    --linha-par: #131c26;
    --realce: #1b3145;
    --borda: #2a3849;
    --borda-forte: #3a4b5f;
    --linha-grade: #222f3e;
    --texto: #e6edf5;
    --texto-fraco: #93a3b5;
    --texto-cabecalho: #aebbc9;
    --azul: #93aae8;
    --azul-escuro: #b1c3f1;
    --azul-claro: #1b2744;
    --azul-borda: #34476f;
    --verde: #56c48f;
    --verde-claro: #12352a;
    --verde-borda: #24614a;
    --ambar: #e0a75a;
    --ambar-claro: #33270f;
    --ambar-borda: #5c471c;
    --vermelho: #ef8175;
    --vermelho-claro: #351d1c;
    --vermelho-borda: #5e3231;
    --roxo: #b294e3;
    --roxo-claro: #2a2140;
    --calc-fundo: #142720;
    --calc-hover: #1c3a2e;
    --pendente-texto: #e09a92;
    --pendente-fundo: #33201f;
    --pendente-hover: #452a28;
    --marca-texto: #6b5a12;
    --selecionada: #2f2a15;
    --balao-fundo: #04090f;
    --balao-texto: #eef3f8;
    --balao-fraco: #8fa0b1;
    --sombra: none;
  --texto-apagado: #8190a3;
    --sombra-alta: 0 10px 30px rgba(0,0,0,.55);
    --veu: rgba(3,8,13,.6);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 400 var(--fs-base)/1.5 var(--fonte);
  background: var(--bg);
  color: var(--texto);
  display: flex;
  flex-direction: column;
}
#app { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }
h1, h2, h3 { font-weight: 600; }
::placeholder { color: var(--texto-apagado); }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.icone {
  width: 16px; height: 16px; flex: 0 0 auto; display: block;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square;
}

/* as logos dos parceiros sao PNG com fundo claro; no tema escuro elas ganham
   uma base clara para nao virarem borrao */
:root[data-tema="escuro"] .marca img,
:root[data-tema="escuro"] .logo-fav img,
:root[data-tema="escuro"] .logo-titulo,
:root[data-tema="escuro"] .faixa-logo img {
  background: #fff; padding: 2px;
}

/* previa da logo no modal de trocar logo */
.faixa-logo {
  height: 96px; display: flex; align-items: center; justify-content: center;
  background: var(--superficie-3); border: 1px solid var(--borda); padding: 12px;
}
.faixa-logo img { max-height: 64px; max-width: 80%; object-fit: contain; }

/* ---------- topo ----------
   Uma faixa so: logo, menu, quem entrou, sair. A aba atual e sublinhada. */
header.topo {
  flex: 0 0 auto; z-index: 5;
  height: 56px; display: flex; align-items: center; gap: 40px;
  padding: 0 32px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; flex: 0 0 auto; }
.marca img { display: block; width: auto; }
.marca .logo-alfamare { height: 24px; }
.espaco { flex: 1 1 auto; }

nav.menu { display: flex; align-self: stretch; gap: 28px; }
nav.menu a {
  display: flex; align-items: center; padding-top: 2px;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-base); font-weight: 500; color: var(--texto-cabecalho);
  text-decoration: none; white-space: nowrap;
}
nav.menu a:hover { color: var(--texto); border-bottom-color: var(--borda-forte); }
nav.menu a.atual { color: var(--texto); font-weight: 600; border-bottom-color: var(--azul); }

/* usuario logado */
.usuario { display: flex; align-items: center; gap: 16px; }
.usuario .quem { text-align: right; line-height: 1.3; }
.usuario .quem .nome { font-weight: 600; font-size: var(--fs-base); }
.usuario .quem .perfil { font-size: var(--fs-legenda); color: var(--texto-fraco); }
.usuario select.ver-como { max-width: 170px; }
.usuario select.ver-como.simulando { border-color: var(--azul); color: var(--azul); font-weight: 600; }
.usuario .quem .nome, .usuario .quem .perfil { white-space: nowrap; }

/* com o "ver como" no cabecalho, o menu cede espaco e rola antes de empurrar a pagina */
@media (max-width: 1180px) {
  header.topo { gap: 24px; }
  nav.menu { gap: 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  nav.menu a { white-space: nowrap; }
  header.topo .usuario .quem { display: none; }  /* o perfil continua visivel na faixa e no "ver como" */
}
.avatar {
  width: 32px; height: 32px; border-radius: var(--raio); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-claro); color: var(--azul); font-weight: 600; font-size: var(--fs-legenda);
}
.selo {
  font-size: var(--fs-legenda); font-weight: 600; line-height: 18px;
  padding: 0 6px; border-radius: var(--raio); white-space: nowrap;
}
.selo.administrador { background: var(--roxo-claro); color: var(--roxo); }
.selo.supervisao { background: var(--azul-claro); color: var(--azul); }
.selo.compras { background: var(--ambar-claro); color: var(--ambar); }
.selo.vendedor { background: var(--verde-claro); color: var(--verde); }
.selo.atualizador { background: var(--roxo-claro); color: var(--roxo); }
.selo.neutro { background: var(--superficie-2); color: var(--texto-cabecalho); }

/* aviso de acesso rastreado: no pe da pagina, e no pe do painel da tabela */
.restrito { margin: 32px 0 0; font-size: var(--fs-legenda); color: var(--texto-fraco); }
.restrito.no-painel { margin: 0; padding: 12px 24px 16px; }

/* ---------- botoes ---------- */
button, .botao {
  font: inherit; cursor: pointer; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie);
  height: 32px; padding: 0 12px; color: var(--texto); font-weight: 500; font-size: var(--fs-pequeno);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
}
button:hover, .botao:hover { background: var(--superficie-3); border-color: var(--borda-forte); color: var(--texto); }
button:disabled, .botao.desativado { opacity: .5; cursor: not-allowed; }
button:focus-visible, .botao:focus-visible, a:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px;
}
button.primario, .botao.primario {
  background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600;
}
:root[data-tema="escuro"] button.primario,
:root[data-tema="escuro"] .botao.primario { color: #0d1526; }
button.primario:hover, .botao.primario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); color: #fff; }
button.perigo { color: var(--vermelho); border-color: var(--vermelho-borda); background: var(--superficie); }
button.perigo:hover { background: var(--vermelho-claro); border-color: var(--vermelho-borda); }
button.acao {
  height: 28px; padding: 0 8px; font-size: var(--fs-legenda);
  color: var(--azul); font-weight: 500;
}
button.acao:hover { background: var(--azul-claro); border-color: var(--azul-borda); }
button.acao.perigo { color: var(--vermelho); border-color: var(--vermelho-borda); background: var(--superficie); }
button.discreto { border-color: transparent; background: transparent; color: var(--texto-fraco); }
button.discreto:hover { background: var(--superficie-2); border-color: transparent; color: var(--texto); }
button.link {
  height: auto; padding: 0; border: 0; background: transparent;
  color: var(--azul); font-size: var(--fs-legenda); font-weight: 500;
}
button.link:hover { background: transparent; text-decoration: underline; }
button.so-icone { width: 32px; padding: 0; }
button.perigo-leve { color: var(--vermelho); }
button.perigo-leve:hover { background: var(--vermelho-claro); border-color: var(--vermelho-borda); color: var(--vermelho); }

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: var(--fs-legenda); color: var(--texto-fraco); font-weight: 500; }
.campo label.forte { font-weight: 600; color: var(--texto); }
.campo .dica-campo { font-size: var(--fs-legenda); color: var(--texto-fraco); }
.campo-linha { display: flex; align-items: center; gap: 8px; }
.campo-linha label { font-size: var(--fs-pequeno); color: var(--texto-fraco); }
.campo-linha select { width: auto; height: 40px; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  font: inherit; font-size: var(--fs-base); padding: 0 10px; height: 36px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto); width: 100%;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul);
}
input[type=checkbox] { accent-color: var(--azul); width: 16px; height: 16px; }
input.erro, select.erro { border-color: var(--vermelho-borda); background: var(--vermelho-claro); }
.ajuda { font-size: var(--fs-legenda); color: var(--texto-fraco); }
.erro-texto { color: var(--vermelho); font-size: var(--fs-pequeno); font-weight: 600; }

/* caixa de busca com lupa: .media nas listas, .grande onde a busca e o
   principal da tela */
.caixa-busca {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 0 12px; height: 40px;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio);
  color: var(--texto-fraco);
}
.caixa-busca input {
  flex: 1 1 auto; height: 100%; border: 0; padding: 0; background: transparent; min-width: 0;
}
.caixa-busca input:focus { outline: none; }
.caixa-busca:focus-within { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.caixa-busca.media { width: 380px; max-width: 100%; }
.caixa-busca.grande { height: 52px; padding: 0 16px; gap: 12px; border-color: var(--azul); color: var(--azul); }
.caixa-busca.grande .icone { width: 20px; height: 20px; }
.caixa-busca.grande input { font-size: var(--fs-secao); color: var(--texto); }

/* ---------- combo com busca ---------- */
.combo { position: relative; }
.combo input { padding-right: 46px; text-overflow: ellipsis; }
.combo.escolhido input { font-weight: 600; }
.combo .botoes {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 2px;
}
.combo .botoes button {
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
  color: var(--texto-fraco); font-size: var(--fs-pequeno); line-height: 1; border-radius: var(--raio);
}
.combo .botoes button:hover { background: var(--azul-claro); color: var(--azul); }
.combo .limpa { display: none; font-size: var(--fs-base); }
.combo.escolhido .limpa { display: block; }
.combo .seta-combo { font-size: var(--fs-legenda); }
.opcoes {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 20;
  max-height: 300px; overflow-y: auto; margin: 0; padding: 4px;
  list-style: none; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.opcoes li {
  padding: 6px 9px; border-radius: var(--raio); cursor: pointer; font-size: var(--fs-pequeno);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: baseline; gap: 8px;
}
.opcoes li .qtd { margin-left: auto; font-size: var(--fs-legenda); color: var(--texto-fraco); }
.opcoes li:hover, .opcoes li.ativo { background: var(--azul-claro); }
.opcoes li.ativo { font-weight: 600; }
.opcoes li mark { background: var(--marca-texto); color: inherit; padding: 0; border-radius: var(--raio); }
.opcoes li.nada { color: var(--texto-fraco); cursor: default; font-style: italic; }
.opcoes li.nada:hover { background: transparent; }

/* ---------- cartoes de indicador (PTAX, markup) ---------- */
.cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cartao { min-width: 0; }
.cartao .rotulo {
  font-size: var(--fs-legenda); color: var(--texto-fraco); font-weight: 500;
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.cartao .valor { font-size: var(--fs-secao); font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao .nota { font-size: var(--fs-legenda); color: var(--texto-fraco); font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.35; }
.cartao input {
  height: 32px; font-size: var(--fs-pequeno); font-weight: 600;
  font-variant-numeric: tabular-nums; border-color: var(--borda);
}
.editavel { display: flex; align-items: center; gap: 6px; }
.lapis { width: 12px; height: 12px; flex: 0 0 auto; fill: var(--texto-fraco); }
.cartao:hover .lapis { fill: var(--azul); }
.cartao.pendente .rotulo, .cartao.pendente .nota { color: var(--vermelho); }
.cartao.pendente input { border-color: var(--vermelho-borda); background: var(--vermelho-claro); color: var(--vermelho); }
.cartao.pendente input::placeholder { color: var(--vermelho); opacity: .6; }
.nota.personalizada { color: var(--ambar); font-weight: 600; }

/* ---------- login ---------- */
.tela-login {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.caixa-login {
  width: 100%; max-width: 380px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta);
  padding: 26px 26px 22px;
}
.caixa-login .marca { justify-content: center; margin-bottom: 18px; }
.caixa-login h1 { font-size: var(--fs-secao); margin: 0 0 2px; text-align: center; font-weight: 600; }
.caixa-login .sub { text-align: center; color: var(--texto-fraco); font-size: var(--fs-pequeno); margin: 0 0 20px; }
.caixa-login .campo { margin-bottom: 12px; }
.caixa-login button[type=submit] { width: 100%; justify-content: center; margin-top: 6px; }
/* entrada pela Microsoft */
.botao-microsoft { width: 100%; height: 44px; justify-content: center; gap: 10px; font-size: var(--fs-base); }
.botao-microsoft .logo-ms { width: 18px; height: 18px; flex: 0 0 auto; }
.nota-login { margin: 16px 0 0; text-align: center; }
.caixa-login .faixa-aviso { text-align: left; }
.botoes-login { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.botoes-login button { width: 100%; justify-content: center; height: 40px; }
.mensagem-crua {
  margin: 0; padding: 10px 12px; max-height: 160px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-size: var(--fs-legenda); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio);
}

/* ---------- pagina ---------- */
.pagina { flex: 1 1 auto; overflow: auto; padding: 40px 32px 32px; }
/* o conteudo ocupa a largura toda da janela (pedido de 22/09/2026) */
.pagina .miolo { width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.pagina .miolo > * { min-width: 0; }
.pagina .miolo > .restrito { margin-top: 0; }
.pagina .miolo > .bloco, .pagina .miolo > .faixa-aviso { margin-bottom: 0; }
.pagina.cheia { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cabeca-pagina { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabeca-pagina h1, .cabeca-pagina h2 { margin: 0; font-size: var(--fs-titulo); line-height: 32px; font-weight: 600; }
.cabeca-pagina p { margin: 4px 0 0; color: var(--texto-fraco); font-size: var(--fs-pequeno); }
.rotulo-secao {
  font-size: var(--fs-legenda); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.topo-secao { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.topo-secao h2 { margin: 0; font-size: var(--fs-secao); }
.topo-secao a { font-size: var(--fs-pequeno); font-weight: 500; text-decoration: none; }

/* ---------- inicio: busca, recado, favoritas ---------- */
.busca-inicio { display: flex; flex-direction: column; gap: 8px; }
.campo-busca-grande { display: flex; align-items: stretch; }
.campo-busca-grande .caixa-busca { flex: 1 1 auto; border-radius: var(--raio) 0 0 var(--raio); border-right: 0; }
.campo-busca-grande > button { height: auto; padding: 0 28px; border-radius: 0 var(--raio) var(--raio) 0; font-size: var(--fs-base); }
.resultado-busca:empty { display: none; }

.recado { background: var(--superficie); border: 1px solid var(--borda); }
.topo-recado {
  height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 24px;
  border-bottom: 1px solid var(--borda);
}
.topo-recado h2 {
  margin: 0; font-size: var(--fs-legenda); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--azul);
}
.topo-recado button .icone { width: 14px; height: 14px; }
.corpo-recado { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.corpo-recado > p { margin: 0; }
.texto-recado {
  font-size: var(--fs-secao); line-height: 1.55; white-space: pre-line;
  text-wrap: pretty; max-width: 900px;
}
.rotulo-recado { font-size: var(--fs-pequeno); color: var(--texto-cabecalho); }
.rodape-recado { display: flex; align-items: center; gap: 8px; }

/* quantas couberem: 5 lado a lado a partir de ~1280 px de janela, mais nas maiores */
.grade-favoritas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cartao-fav {
  position: relative; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borda);
}
.cartao-fav:hover { border-color: var(--azul-borda); }
.logo-fav {
  height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 12px 0 20px; border-bottom: 1px solid var(--linha-grade);
}
.logo-fav img { max-height: 56px; max-width: 70%; object-fit: contain; display: block; }
.corpo-fav { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.nome-fav {
  font-size: var(--fs-secao); font-weight: 600; line-height: 1.35;
  color: var(--texto); text-decoration: none;
}
.nome-fav::after { content: ''; position: absolute; inset: 0; }   /* o cartao inteiro clica */
.nome-fav:hover { color: var(--azul); }
.meta-fav { font-size: var(--fs-pequeno); color: var(--texto-fraco); }
.rodape-fav {
  margin-top: auto; height: 40px; display: flex; align-items: center; gap: 16px; padding: 0 20px;
  border-top: 1px solid var(--linha-grade); font-size: var(--fs-legenda); color: var(--texto-fraco);
}
.rodape-fav b { color: var(--texto); font-weight: 600; }
.dica-favorita {
  border: 1px dashed var(--borda-forte); display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; min-height: 180px;
}
.dica-favorita p { margin: 0; max-width: 240px; font-size: var(--fs-pequeno); color: var(--texto-fraco); }
.corpo-fav .pilulas-tag { margin-top: 8px; }

/* tags das tabelas */
.pilulas-tag { display: flex; flex-wrap: wrap; gap: 4px; }
.pilula-tag {
  display: inline-block; padding: 1px 8px; border: 1px solid var(--azul-borda); border-radius: 999px;
  background: var(--azul-claro); color: var(--azul); font-size: var(--fs-legenda); font-weight: 500;
  line-height: 18px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.lin-tab > span { min-width: 0; }
/* filtro de tags: botao que abre um menu com caixas de selecao */
.menu-tags { position: relative; }
.botao-menu-tags {
  height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  max-width: 260px; background: var(--superficie); font-weight: 500;
}
.botao-menu-tags .rotulo-menu-tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-menu-tags .icone { width: 16px; height: 16px; stroke-width: 1.5; }
.botao-menu-tags .seta-menu-tags .icone { width: 14px; height: 14px; }
.botao-menu-tags.ativo { border-color: var(--azul); color: var(--azul); background: var(--azul-claro); }
.painel-tags {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; width: 300px;
  max-height: 60vh; overflow: auto; padding: 8px 0;
  background: var(--superficie); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-alta);
}
.painel-tags[hidden] { display: none; }
.topo-painel-tags {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 12px 8px; border-bottom: 1px solid var(--linha-grade); margin-bottom: 4px;
  font-size: var(--fs-legenda); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.opcao-menu-tag {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; cursor: pointer;
  font-size: var(--fs-base);
}
.opcao-menu-tag:hover { background: var(--realce); }
.opcao-menu-tag > span:nth-of-type(1) { flex: 1 1 auto; }
.opcao-menu-tag .num { color: var(--texto-fraco); font-size: var(--fs-legenda); font-variant-numeric: tabular-nums; }
.opcao-menu-tag.vazia > span { color: var(--texto-apagado); }
.limpar-tags {
  height: auto; padding: 0; border: 0; background: transparent; color: var(--azul);
  font-size: var(--fs-legenda); font-weight: 500; text-transform: none; letter-spacing: 0;
}
.limpar-tags[hidden] { display: none; }
.escolha-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.opcao-tag { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); cursor: pointer; }
.nova-tag { display: flex; gap: 8px; }
.nova-tag input { flex: 1 1 auto; }

.sem-logo { font-size: var(--fs-secao); font-weight: 600; color: var(--texto-fraco); letter-spacing: .04em; }

/* estrela de favorita: vazia em cinza, cheia no azul da marca */
.estrela-fav {
  position: relative; z-index: 1;
  width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #8a93a3;
}
.estrela-fav:hover { background: var(--azul-claro); color: var(--azul); }
.estrela-fav .icone { width: 20px; height: 20px; stroke-width: 1.5; stroke-linejoin: miter; }
.estrela-fav.favorita { color: var(--azul); }
.estrela-fav.favorita .icone { fill: currentColor; }

/* ---------- tabelas: lista completa ---------- */
.ferramentas-tabelas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.segmentado {
  display: flex; height: 40px; border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie); overflow: hidden;
}
.segmentado button {
  height: 100%; border: 0; border-radius: 0; padding: 0 14px;
  font-weight: 600; color: var(--texto-cabecalho); background: transparent;
}
.segmentado button + button { border-left: 1px solid var(--borda-forte); }
.segmentado button .icone { width: 14px; height: 14px; stroke-width: 1.5; }
.segmentado button.ativo { background: var(--azul); color: #fff; }
.segmentado button.ativo .icone { fill: currentColor; }
.segmentado .num { opacity: .8; font-variant-numeric: tabular-nums; }

.lista-tabelas-pagina {
  position: relative; display: grid; column-gap: 12px; overflow-x: auto;
  background: var(--superficie); border: 1px solid var(--borda);
}
.corpo-lista-tabelas, .lin-tab { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.corpo-lista-tabelas > .vazio { grid-column: 1 / -1; }
.lin-tab {
  align-items: center; min-height: 64px;
  border-bottom: 1px solid var(--linha-grade); font-size: var(--fs-base);
}
.lin-tab:last-child { border-bottom: 0; }
.lin-tab:not(.cab-tab):hover { background: var(--superficie-3); }
.cab-tab {
  min-height: 40px; background: var(--superficie-2); border-bottom-color: var(--borda);
  font-size: var(--fs-legenda); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.cel-estrela { display: flex; justify-content: center; }
.nome-tab-pagina {
  display: flex; align-items: center; gap: 16px; min-width: 0;
  color: var(--texto); text-decoration: none; font-weight: 600;
}
.nome-tab-pagina:hover { color: var(--azul); }
.nome-tab-pagina .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-tab-pagina {
  width: 72px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha-grade); background: #fff;
}
.logo-tab-pagina img { max-width: 60px; max-height: 32px; display: block; }
.logo-tab-pagina .sem-logo { font-size: var(--fs-legenda); }
.fraco { color: var(--texto-cabecalho); }
.acoes-linha-tab { display: flex; gap: 4px; justify-content: flex-end; padding-right: 12px; white-space: nowrap; }
.corpo-lista-tabelas .vazio { padding: 32px 20px; }

/* ---------- busca global de produtos: resultados ---------- */
.achados {
  border: 1px solid var(--borda); background: var(--superficie);
  max-height: 380px; overflow-y: auto;
}
.achado {
  display: flex; width: 100%; height: auto; gap: 12px; align-items: center; justify-content: flex-start;
  text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--linha-grade);
  border-radius: 0; background: transparent; font-weight: 400; font-size: var(--fs-pequeno);
}
.achado:last-child { border-bottom: 0; }
.achado:hover { background: var(--realce); }
.achado .titulo-achado { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achado .selo { flex: 0 0 auto; }
.achado-recado {
  padding: 8px 12px; font-size: var(--fs-legenda); color: var(--texto-fraco);
  background: var(--superficie-3); border-bottom: 1px solid var(--linha-grade);
}

/* linha aberta a partir da busca: pisca para a pessoa achar onde parou */
.corpo .lin.destacada { background: var(--ambar-claro); }

/* ---------- painel lateral ----------
   Busca, tabelas e filtros moram numa coluna fixa a esquerda; a grade fica com
   toda a altura da tela, sem faixas empilhadas em cima dela. No celular o mesmo
   painel vira gaveta encostada na base (ver o bloco @media la embaixo). */
.corpo-lateral { flex: 1 1 auto; display: flex; min-height: 0; }
.area-grade {
  flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.lateral {
  flex: 0 0 264px; width: 264px;
  background: var(--superficie); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
.lateral .pega-gaveta { display: none; }
.secao-lateral { padding: 20px 24px; border-bottom: 1px solid var(--linha-grade); }
.secao-lateral:first-of-type { padding: 20px 16px 16px; }
.secao-lateral:first-of-type .tit-lateral { padding: 0 8px; }
.tit-lateral {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
  font-size: var(--fs-legenda); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.tit-lateral button { text-transform: none; letter-spacing: 0; }
.rodape-lateral {
  margin-top: auto; padding: 16px 24px 12px; border-top: 1px solid var(--linha-grade);
  background: var(--superficie);
}

.lista-tabelas { display: flex; flex-direction: column; }
.lista-tabelas a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 8px;
  text-decoration: none; color: var(--texto); font-size: var(--fs-base);
}
.lista-tabelas a:hover { background: var(--superficie-2); color: var(--texto); }
.lista-tabelas a.atual { background: var(--azul-claro); color: var(--azul-escuro); font-weight: 600; }
.lista-tabelas .logo-tab {
  width: 40px; height: 24px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--borda);
}
.lista-tabelas img { max-width: 32px; max-height: 20px; object-fit: contain; display: block; }
.lista-tabelas .sigla { font-size: var(--fs-legenda); font-weight: 600; color: var(--texto-fraco); }
.lista-tabelas .nome-tab { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.veu-gaveta { display: none; }
.abre-gaveta { display: none; }

/* ---------- filtros (empilhados no painel, discretos: quem manda e a busca) ---------- */
.filtros { display: flex; flex-direction: column; gap: 16px; }
.filtros .campo { gap: 4px; }
.filtros .campo label { font-size: var(--fs-legenda); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filtros .campo label.forte { font-weight: 500; color: var(--texto-fraco); }
.filtros input, .filtros select { height: 32px; padding: 0 8px; font-size: var(--fs-pequeno); border-color: var(--borda); }
.filtros .combo input { padding-right: 42px; }

/* ---------- topo da tabela: titulo, busca em destaque, filtros ativos ---------- */
.topo-tabela {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px;
  padding: 24px 32px 16px;
}
.titulo-tabela { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.titulo-tabela .acoes-tabela { margin-left: auto; }
.logo-titulo { height: 32px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.nome-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.nome-titulo h1 { margin: 0; font-size: var(--fs-titulo); line-height: 32px; }
.nome-titulo span { font-size: var(--fs-pequeno); color: var(--texto-fraco); }
.nome-titulo .comentario-tabela {
  color: var(--texto-cabecalho); padding-left: 12px; border-left: 1px solid var(--borda-forte);
  max-width: 70ch;
}
select.ver-como { width: auto; height: 32px; font-size: var(--fs-pequeno); border-color: var(--borda); }
.contagem-busca { flex: 0 0 auto; font-size: var(--fs-pequeno); color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

.status {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  min-height: 28px; font-size: var(--fs-pequeno);
}
.status.sem-conteudo { display: none; }
.status b { font-variant-numeric: tabular-nums; }
.chips-filtro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rotulo-chips { color: var(--texto-fraco); }
.chip-filtro { height: 28px; padding: 0 8px 0 10px; font-weight: 400; }
.chip-filtro .icone { width: 12px; height: 12px; stroke-width: 2.5; color: var(--texto-fraco); }
.info-status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; color: var(--texto-fraco); font-size: var(--fs-legenda); }
.acoes-tabela { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.formula-lateral { font-size: var(--fs-legenda); margin-bottom: 8px; }
.formula-lateral:last-child { margin-bottom: 0; }
.formula-lateral .tit-formula { display: block; font-weight: 600; color: var(--verde); }
.formula-lateral code { font-family: inherit; font-size: var(--fs-legenda); color: var(--texto-fraco); word-break: break-word; }
.aviso { color: var(--ambar); }

.faixa-simulacao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 32px; background: var(--ambar-claro); border-bottom: 1px solid var(--ambar-borda);
  font-size: var(--fs-pequeno); color: var(--ambar);
}
.faixa-simulacao b { color: var(--texto); font-weight: 600; }

/* ---------- grade ----------
   Uma fonte e um tamanho em toda a grade: codigos, textos e numeros em
   --fs-pequeno, numeros com algarismos de largura igual. */
.rolagem {
  flex: 1 1 auto; overflow: auto; background: var(--superficie);
  margin: 0 32px 24px; border: 1px solid var(--borda);
}
.grade { display: inline-block; min-width: 100%; font-size: var(--fs-pequeno); }
.lin { display: grid; align-items: center; border-bottom: 1px solid var(--linha-grade); }
.cabecalho {
  position: sticky; z-index: 3; background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  font-size: var(--fs-legenda); font-weight: 600; color: var(--texto-cabecalho);
}
.cabecalho > div {
  height: 36px; padding: 0 12px; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 4px; position: relative;
  white-space: nowrap;
}
.cabecalho > div > span:first-child, .cabecalho .titulo-col { overflow: hidden; text-overflow: ellipsis; }
/* "i" de orientacao da coluna: circulo vermelho, so em colunas com comentario */
.info-coluna {
  flex: 0 0 auto; width: 16px; height: 16px; padding: 0; margin-right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--vermelho); border-radius: 50%; background: transparent;
  color: var(--vermelho); font: 700 11px/1 Georgia, "Times New Roman", serif; font-style: italic;
  text-transform: none; letter-spacing: 0; cursor: help;
}
.info-coluna:hover, .info-coluna:focus-visible { background: var(--vermelho); color: #fff; }
.cabecalho > div.centro { justify-content: center; text-align: center; }
.cabecalho > div:hover { background: var(--realce); }
.cabecalho .col-calc { color: var(--verde); }
.cabecalho .col-calc:hover { background: var(--calc-hover); }
.seta { color: var(--azul); font-size: var(--fs-legenda); line-height: 1; }

/* alca de largura: fica na divisa direita de cada cabecalho */
.pega-largura {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 6; background: transparent; touch-action: none;
}
.pega-largura::after {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 3px;
  width: 1px; background: transparent;
}
.pega-largura:hover::after, .pega-largura.ativa::after { background: var(--azul); width: 2px; }
body.redimensionando { cursor: col-resize; user-select: none; }
body.redimensionando * { cursor: col-resize !important; }

/* linha "Quem vê": uma caixa por coluna, iniciais numa cor so */
.faixa-visibilidade {
  position: sticky; z-index: 4; background: var(--superficie-3);
  border-bottom: 1px solid var(--linha-grade); height: var(--alt-visib);
}
.faixa-visibilidade > div { padding: 0 8px; display: flex; align-items: center; min-width: 0; }
.faixa-visibilidade .rotulo-visib {
  padding: 0 4px; justify-content: center; font-size: var(--fs-legenda); font-weight: 600;
  color: var(--texto-fraco); white-space: nowrap;
}
.seletor-perfis {
  width: 100%; min-width: 0; height: 28px; padding: 0 8px; justify-content: space-between; gap: 6px;
  border-color: var(--borda); font-weight: 600;
}
.seletor-perfis:hover, .seletor-perfis.aberto { border-color: var(--azul); background: var(--superficie); }
.letras-perfil {
  font-size: var(--fs-legenda); letter-spacing: .14em; color: var(--azul);
  overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.seta-seletor svg {
  width: 10px; height: 10px; display: block;
  fill: none; stroke: var(--texto-fraco); stroke-width: 3; stroke-linecap: square;
}
.painel-perfis {
  position: fixed; z-index: 95; width: 216px; padding: 4px 0;
  background: var(--superficie); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-alta);
}
.tit-painel-perfis {
  padding: 8px 12px 6px; font-size: var(--fs-legenda); color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opcao-perfil {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px;
  font-size: var(--fs-pequeno); cursor: pointer;
}
.opcao-perfil:hover { background: var(--realce); }
.opcao-perfil input { margin: 0; }
.opcao-perfil span { flex: 1 1 auto; }
.opcao-perfil b { font-size: var(--fs-legenda); font-weight: 600; color: var(--azul); }

.corpo { position: relative; }
.corpo .lin { position: absolute; left: 0; right: 0; height: var(--alt-linha); }
.corpo .lin.par { background: var(--linha-par); }
.corpo .lin:hover, .corpo .lin.par:hover { background: var(--realce); }
.corpo .lin.marcada { background: var(--selecionada); }
.corpo .lin > div {
  padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
.cod { font-family: inherit; font-size: inherit; font-weight: 500; font-variant-numeric: tabular-nums; }
/* o ID Alfa Mare aparece, mas nao disputa atencao com o codigo de verdade */
.discreto { color: var(--texto-fraco); }
.calc {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--verde); background: var(--calc-fundo);
}
.corpo .lin:hover .calc { background: var(--calc-hover); }
/* coluna marcada como Destaque na Estrutura */
.corpo .lin > div.destaque { font-weight: 600; color: var(--texto); }
.calc.pendente { color: var(--pendente-texto); background: var(--pendente-fundo); font-size: var(--fs-legenda); font-weight: 600; text-align: center; }
.corpo .lin:hover .calc.pendente { background: var(--pendente-hover); }
.cabecalho .col-calc.pendente { background: var(--vermelho-claro); color: var(--vermelho); }
.vazio { padding: 40px 20px; text-align: center; color: var(--texto-fraco); }
.cel-editavel { cursor: text; }
/* modo de edicao ("Atualizar"): o que da para alterar ganha um fundo azul
   claro; o que ja foi alterado e ainda nao foi salvo fica ambar */
.corpo .lin > div.cel-editavel { background: var(--azul-claro); }
.corpo .lin > div.cel-alterada {
  background: var(--ambar-claro); box-shadow: inset 3px 0 0 var(--ambar); font-weight: 600;
}
.cel-editavel:hover { box-shadow: inset 0 0 0 1px var(--azul-borda); }
.cel-editavel input, .cel-editavel select {
  width: 100%; height: 28px; padding: 0 6px; font-size: var(--fs-pequeno); text-align: inherit;
}
.marca-personalizado {
  font-size: var(--fs-legenda); font-weight: 600;
  color: var(--ambar); background: var(--ambar-claro); border: 1px solid var(--ambar-borda);
  border-radius: var(--raio); padding: 0 6px;
}
.cel-selecao { display: flex; align-items: center; justify-content: center; gap: 3px; }
.cel-selecao input[type=checkbox] { margin: 0; }
.tira-linha {
  width: 20px; height: 20px; padding: 0; line-height: 1;
  font-size: var(--fs-base); font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; color: var(--vermelho); border-color: transparent;
  background: transparent; opacity: .35;
}
.corpo .lin:hover .tira-linha { opacity: 1; }
.tira-linha:hover { background: var(--vermelho-claro); border-color: var(--vermelho-borda); }

/* linha final com o + de incluir produto */
.linha-mais {
  padding: 8px 12px; border-top: 1px solid var(--linha-grade);
  background: var(--superficie-3);
}
.linha-mais button { position: sticky; left: 10px; }
.link-cel { color: var(--azul); text-decoration: none; }
.link-cel:hover { text-decoration: underline; }

.grade.calc-fixa .lin > div:last-child {
  position: sticky; right: 0; z-index: 2;
  box-shadow: -6px 0 8px -6px var(--veu);
}
.grade.calc-fixa .cabecalho > div:last-child { z-index: 4; background: var(--superficie-2); }
.grade.calc-fixa .faixa-visibilidade > div:last-child { background: var(--superficie-3); }

/* ---------- contador de selecao com resumo ---------- */
.selecao-topo { position: relative; }
.resumo-selecao {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 380px; max-width: 92vw;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-alta); overflow: hidden;
}
.resumo-selecao .topo-resumo {
  padding: 9px 12px; background: var(--superficie-2); border-bottom: 1px solid var(--borda);
  font-size: var(--fs-legenda); font-weight: 600; display: flex; gap: 8px; align-items: center;
}
.resumo-selecao .lista-resumo { max-height: 320px; overflow-y: auto; }
.resumo-selecao .grupo-resumo {
  padding: 6px 12px; font-size: var(--fs-legenda); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-fraco); background: var(--superficie-3);
  position: sticky; top: 0;
}
.resumo-selecao .item-resumo {
  padding: 5px 12px; font-size: var(--fs-legenda); display: flex; gap: 8px; align-items: baseline;
  border-bottom: 1px solid var(--linha-grade);
}
.resumo-selecao .item-resumo .cod { flex: 0 0 auto; color: var(--texto-fraco); font-size: var(--fs-legenda); }
.resumo-selecao .item-resumo .txt {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resumo-selecao .rodape-resumo {
  padding: 8px 12px; border-top: 1px solid var(--borda); background: var(--superficie-3);
  font-size: var(--fs-legenda); color: var(--texto-fraco); display: flex; gap: 8px; align-items: center;
}

/* ---------- blocos de resumo (previa) ---------- */
.blocos-resumo { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bloco-resumo {
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
  padding: 10px 14px; min-width: 190px; box-shadow: var(--sombra);
}
.bloco-resumo.total { background: var(--verde-claro); border-color: var(--verde-borda); }
.bloco-resumo .fonte {
  font-size: var(--fs-legenda); text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-fraco); font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.bloco-resumo .fonte img { height: 15px; width: auto; max-width: 54px; object-fit: contain; }
.bloco-resumo .qtd-itens { font-size: var(--fs-legenda); color: var(--texto-fraco); margin-top: 2px; }
.bloco-resumo .valor-total {
  font-size: var(--fs-secao); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* ---------- modal ---------- */
.fundo-modal {
  position: fixed; inset: 0; background: var(--veu); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-alta);
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
}
.modal.largo { max-width: 900px; }
.modal .topo-modal {
  padding: 14px 18px; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 10px;
}
.modal .topo-modal h3 { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.modal .corpo-modal { padding: 18px; overflow: auto; }
.modal .rodape-modal {
  padding: 12px 18px; border-top: 1px solid var(--borda);
  display: flex; gap: 8px; justify-content: flex-end; background: var(--superficie-3);
  border-radius: 0;
}
.modal .rodape-modal .espaco { flex: 1 1 auto; }

/* ---------- formulario ---------- */
.linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra); }
.bloco > h3 { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 600; }
.bloco > .ajuda { margin-bottom: 14px; }

/* ---------- tabela simples ---------- */
table.lista { width: 100%; border-collapse: collapse; font-size: var(--fs-pequeno); }
table.lista th {
  text-align: left; font-size: var(--fs-legenda); text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-fraco); font-weight: 600; padding: 7px 10px;
  border-bottom: 1px solid var(--borda); background: var(--superficie-3); white-space: nowrap;
}
table.lista td { padding: 7px 10px; border-bottom: 1px solid var(--linha-grade); vertical-align: middle; }
table.lista tr:hover td { background: var(--linha-par); }
table.lista td.acoes { text-align: right; white-space: nowrap; }
table.lista td.num, table.lista th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lista select, table.lista input[type=text], table.lista input[type=number] { padding: 4px 7px; font-size: var(--fs-pequeno); }
table.lista td.arrasta { cursor: grab; color: var(--texto-fraco); user-select: none; width: 22px; text-align: center; }
table.lista tr.arrastando { opacity: .4; }
table.lista tfoot td {
  font-weight: 600; background: var(--superficie-2); border-top: 2px solid var(--borda);
}

/* prévia de orçamento: uma linha por produto, rolagem lateral */
.rolagem-previa { overflow-x: auto; border: 1px solid var(--linha-grade); scrollbar-width: thin; }
.rolagem-previa:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
table.lista.previa { width: max-content; min-width: 100%; }
table.lista.previa td { white-space: nowrap; }
table.lista.previa td:first-child, table.lista.previa th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--superficie);
  box-shadow: 1px 0 0 var(--linha-grade);
}
table.lista.previa th:first-child { background: var(--superficie-3); }
table.lista.previa tfoot td:first-child { background: var(--superficie-2); }
table.lista.previa tr:hover td:first-child { background: var(--linha-par); }

/* ---------- avisos ---------- */
.faixa-aviso {
  border-radius: var(--raio); padding: 10px 13px; font-size: var(--fs-pequeno); margin-bottom: 14px;
  border: 1px solid; display: flex; gap: 9px; align-items: flex-start;
}
.faixa-aviso.info { background: var(--azul-claro); border-color: var(--azul-borda); color: var(--texto); }
.faixa-aviso.alerta { background: var(--ambar-claro); border-color: var(--ambar-borda); color: var(--texto); }
.faixa-aviso.erro { background: var(--vermelho-claro); border-color: var(--vermelho-borda); color: var(--texto); }
.faixa-aviso.ok { background: var(--verde-claro); border-color: var(--verde-borda); color: var(--texto); }

#avisos { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.torrada {
  background: var(--balao-fundo); color: var(--balao-texto); padding: 10px 14px; border-radius: var(--raio);
  box-shadow: var(--sombra-alta); font-size: var(--fs-pequeno); max-width: 340px;
  animation: entra .16s ease-out;
}
.torrada.ok { background: var(--verde); color: #fff; }
.torrada.erro { background: var(--vermelho); color: #fff; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* ---------- balao ---------- */
#balao {
  position: fixed; z-index: 90; max-width: 460px;
  background: var(--balao-fundo); color: var(--balao-texto); padding: 9px 12px; border-radius: var(--raio);
  font-size: var(--fs-pequeno); line-height: 1.4; box-shadow: var(--sombra-alta);
  pointer-events: none; opacity: 0; transition: opacity .1s;
}
#balao.aberto { opacity: 1; }
#balao .pt { display: block; font-weight: 600; white-space: normal; }
#balao .original {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--borda);
  color: var(--balao-fraco); font-size: var(--fs-legenda); white-space: normal;
}

footer.rodape {
  flex: 0 0 auto; padding: 6px 20px; font-size: var(--fs-legenda); color: var(--texto-fraco);
  background: var(--superficie); border-top: 1px solid var(--borda);
  display: flex; gap: 16px; flex-wrap: wrap;
}

.carregando { padding: 60px 20px; text-align: center; color: var(--texto-fraco); }
.oculto { display: none !important; }

/* ---------- celular: a mesma tabela vira lista de duas linhas ---------- */
.grade.modo-lista { display: block; min-width: 0; width: 100%; }
.corpo .lin.item-lista {
  display: flex; align-items: center; gap: 11px; height: 62px; padding: 0 14px;
}
.item-lista > input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.corpo .lin.item-lista > div { padding: 0; white-space: normal; }
.texto-item { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nome-item {
  font-size: var(--fs-base); line-height: 1.3; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.apoio-item { display: flex; gap: 8px; font-size: var(--fs-legenda); color: var(--texto-fraco); margin-top: 2px; }
.apoio-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preco-item {
  flex: 0 0 auto; text-align: right; font-size: var(--fs-base); font-weight: 600;
  color: var(--verde); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.preco-item.pendente {
  color: var(--pendente-texto); font-size: var(--fs-legenda); font-weight: 600;
  white-space: normal; max-width: 96px; line-height: 1.25;
}
.item-lista .tira-linha { opacity: 1; flex: 0 0 auto; }

@media (max-width: 900px) {
  header.topo { gap: 20px; padding: 0 16px; }
  nav.menu { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .pagina { padding: 24px 16px; }
  .grade-favoritas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topo-tabela { padding: 16px 16px 12px; gap: 12px; }
  .rolagem { margin: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .faixa-simulacao { padding: 8px 16px; }

  /* a gaveta: o painel inteiro sobe pela base, ao alcance do polegar */
  .lateral {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    flex: 0 0 auto; z-index: 60; max-height: 84vh;
    border-right: 0; border-top: 1px solid var(--borda);
    box-shadow: 0 -8px 30px rgba(23, 32, 51, .18);
    /* sem transicao de proposito: a gaveta abre e fecha na hora. Depender de
       animacao para a coisa aparecer no lugar certo e pedir para travar. */
    transform: translateY(102%); visibility: hidden;
    overscroll-behavior: contain;
  }
  body.gaveta-aberta .lateral { transform: none; visibility: visible; }
  .lateral .pega-gaveta {
    display: flex; justify-content: center; padding: 10px 0 6px; cursor: pointer;
    position: sticky; top: 0; background: var(--superficie); z-index: 2;
  }
  .lateral .pega-gaveta span { display: block; width: 40px; height: 4px; background: var(--borda-forte); }
  .veu-gaveta { position: fixed; inset: 0; background: var(--veu); z-index: 55; }
  body.gaveta-aberta .veu-gaveta { display: block; }

  .abre-gaveta { display: inline-flex; position: relative; border-color: var(--azul-borda); color: var(--azul); }
  .abre-gaveta .bolha {
    position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px;
    padding: 0 4px; background: var(--azul); color: #fff;
    font-size: var(--fs-legenda); font-weight: 600; display: flex; align-items: center; justify-content: center;
  }
  .secao-lateral .acoes-tabela { flex-direction: column; align-items: stretch; }
  .secao-lateral .acoes-tabela button { height: 40px; }
}

/* Celular: o cabecalho fica com o essencial e a busca continua em destaque. */
@media (max-width: 760px) {
  /* duas faixas: logo e botoes em cima, o menu inteiro embaixo */
  header.topo { height: auto; flex-wrap: wrap; row-gap: 0; column-gap: 12px; padding: 0 16px; }
  header.topo > .marca, header.topo > .usuario { height: 52px; }
  header.topo > .espaco { display: none; }
  header.topo > .usuario { flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: 6px; }
  header.topo > nav.menu { order: 3; flex: 1 0 100%; height: 40px; border-top: 1px solid var(--linha-grade); }
  .usuario .selecao-topo .botao, .usuario > button { padding: 0 10px; }
  .usuario select.ver-como { flex: 0 1 120px; min-width: 0; }
  .usuario .quem { display: none; }
  .marca .logo-alfamare { height: 20px; }
  .grade-favoritas { grid-template-columns: minmax(0, 1fr); }
  .campo-busca-grande > button { padding: 0 16px; }
  .caixa-busca.grande { height: 48px; }
  .caixa-busca.grande input { font-size: var(--fs-base); }
  .caixa-busca.media { width: 100%; }
  .contagem-busca { display: none; }
  .nome-titulo h1 { font-size: var(--fs-secao); line-height: 1.3; }
  .logo-titulo { height: 24px; }
  .status .secundario { display: none; }
  .item-lista .cel-editavel { cursor: default; }
}

/* ---------- Ploomes: coluna fixa no fim da grade ---------- */
.corpo .lin { background: var(--superficie); }
.cel-ploomes { display: flex; align-items: center; justify-content: center; padding: 0 !important; }
.grade.com-ploomes .lin > div.cel-ploomes {
  position: sticky; right: 0; z-index: 2; background: inherit;
}
.grade.com-ploomes .cabecalho > div.cab-ploomes { z-index: 4; background: var(--superficie-2); cursor: default; }
.grade.com-ploomes .faixa-visibilidade > div.cel-ploomes { background: var(--superficie-3); }
.grade.com-ploomes:not(.calc-fixa) .lin > div.cel-ploomes { box-shadow: -6px 0 8px -6px var(--veu); }
/* com o preco preso a direita, ele fica logo antes do Ploomes */
.grade.com-ploomes.calc-fixa .lin > div:last-child { box-shadow: none; }
.grade.com-ploomes.calc-fixa .lin > div:nth-last-child(2) {
  position: sticky; right: 48px; z-index: 2; box-shadow: -6px 0 8px -6px var(--veu);
}
.grade.com-ploomes.calc-fixa .cabecalho > div:nth-last-child(2) { z-index: 4; background: var(--superficie-2); }
.cab-ploomes img { width: 16px; height: 16px; opacity: .7; }
.marca-ploomes { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--raio); }
.marca-ploomes img { width: 18px; height: 18px; display: block; }
.marca-ploomes:hover, .marca-ploomes:focus-visible { background: var(--realce); }
.balao-ploomes { display: grid; gap: 3px; max-width: 320px; }
.balao-ploomes b { font-weight: 600; }
.balao-ploomes .rotulo-balao { color: var(--balao-fraco); }
.balao-ploomes .rodape-balao { color: var(--balao-fraco); font-size: var(--fs-legenda); margin-top: 3px; }

/* ---------- Cadastro Ploomes ---------- */
.lista-cadastros td { vertical-align: middle; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover, .linha-clicavel:focus-visible { background: var(--realce); outline: none; }
.miniatura-cadastro { width: 44px; height: 44px; object-fit: contain; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha-grade); background: #fff; color: var(--texto-fraco); }
.selo.status-pendente, .selo.status-enviando { background: var(--ambar-claro); color: var(--ambar); }
.selo.status-aprovado { background: var(--verde-claro); color: var(--verde); }
.selo.status-reprovado { background: var(--vermelho-claro); color: var(--vermelho); font-weight: 600; }
.status-com-info { display: inline-flex; align-items: center; gap: 6px; }
.botao-info {
  width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: var(--raio); display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--fonte); font-style: italic; color: var(--texto-fraco); background: var(--superficie); border: 1px solid var(--borda-forte);
}
/* produto que tinha ID do Ploomes e sumiu de la (excluido): so o "i" */
.sem-crm { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-fraco); }
.link-ploomes { font-variant-numeric: tabular-nums; font-weight: 500; }
.corpo-cadastro { display: flex; flex-direction: column; gap: 14px; }
.form-cadastro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; align-items: stretch; }
/* o rotulo ocupa a sobra: com texto orientativo de alturas diferentes, as
   caixas da mesma linha continuam alinhadas embaixo */
.form-cadastro .campo { margin: 0; display: flex; flex-direction: column; }
.form-cadastro .campo > label { flex: 1 0 auto; }
.form-cadastro .campo.inteiro { grid-column: 1 / -1; }
.form-cadastro textarea { width: 100%; resize: vertical; }
.fotos-cadastro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.espaco-foto { display: flex; flex-direction: column; gap: 6px; }
.rotulo-foto { font-size: var(--fs-legenda); color: var(--texto-fraco); }
.vista-foto { height: 130px; border: 1px solid var(--borda); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vista-foto img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.vista-foto.vazia { background: var(--superficie-3); color: var(--texto-fraco); font-size: var(--fs-pequeno); border-style: dashed; }
.botoes-foto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.decisao-cadastro { display: flex; gap: 8px; margin-right: 8px; }
@media (max-width: 760px) {
  .form-cadastro, .fotos-cadastro { grid-template-columns: minmax(0, 1fr); }
}
/* texto orientativo ao lado do nome do campo (definido pelo administrador) */
.dica-campo { margin-left: 8px; font-weight: 400; font-size: var(--fs-legenda); color: var(--texto-fraco); font-style: italic; }
.caneta-formulario { padding: 6px; margin-right: 4px; }
.caneta-formulario .icone { width: 16px; height: 16px; }
.config-formulario td { vertical-align: middle; }
.config-formulario td:last-child { width: 60%; }
.config-formulario input[type="text"] { width: 100%; }
.marca-obrigatorio { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
/* editor de texto do Cadastro Ploomes: negrito, sublinhado e listas */
.caixa-editor { border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); }
.caixa-editor:focus-within { outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul); }
.barra-formato { display: flex; gap: 4px; padding: 4px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); flex-wrap: wrap; }
.botao-formato { min-height: 0; padding: 3px 8px; font-size: var(--fs-legenda); border-radius: var(--raio); background: transparent; border: 1px solid transparent; color: var(--texto); }
.botao-formato:hover { background: var(--superficie); border-color: var(--borda); }
.botao-formato.ativo { background: var(--realce); border-color: var(--borda-forte); }
.editor-texto { padding: 8px 10px; overflow: auto; resize: vertical; max-height: 420px; outline: none; line-height: 1.5; }
.editor-texto p { margin: 0; }
.editor-texto ul, .editor-texto ol { margin: 2px 0; padding-left: 24px; }
.editor-texto.somente-leitura { background: var(--superficie-2); color: var(--texto-fraco); }
.caixa-editor:has(.somente-leitura) { background: var(--superficie-2); }