/* ---------------------------------------------------------------
   Grafenix ERP — sistema de design
   Paleta tirada da marca: azul-noite do selo, azul e laranja do "G".
   O laranja e reservado para uma coisa so: o valor que importa agora.
   --------------------------------------------------------------- */

/* Mesma paleta do Grafenix Restaurante, para os sistemas da casa terem a
   mesma cara no claro e no escuro. */
:root {
  --noite: #0b1a2e;          /* cartão de destaque */
  --noite-claro: #14263f;
  --superficie: #e9eef5;     /* fundo da página */
  --cartao: #ffffff;
  --tinta: #0e1d31;
  --tinta-suave: #5b6c85;
  --linha: #d3dce9;
  --azul: #1d6fe8;
  --azul-fraco: #e4edfc;
  --laranja: #f97316;
  --verde: #15803d;
  --vermelho: #b91c1c;
  --raio: 14px;
  --raio-pequeno: 10px;
  --sombra: 0 1px 2px rgba(13, 30, 52, 0.07), 0 6px 18px -8px rgba(13, 30, 52, 0.16);

  /* Barra lateral */
  --barra: #0b1a2e;
  --barra-2: #14263f;
  --barra-texto: #9db2ce;
  --largura-barra: 92px;

  /* Cores que mudam entre o tema claro e o escuro. */
  --link: #1d6fe8;
  --campo: #ffffff;
  --faixa: #f5f8fc;
  --realce: #f5f8fc;
  --borda-forte: #b9c6d8;
  --total: #fdebdc;
  --alerta-fundo: #fbefd9;  --alerta-texto: #b45309;
  --ok-fundo: #e1f3e8;
  --neutra-fundo: #dfe6f0;
  --sucesso-fundo: #e1f3e8; --sucesso-borda: #b9dfc7; --sucesso-texto: #15803d;
  --erro-fundo: #fae6e6;    --erro-borda: #efc4c4;    --erro-texto: #b91c1c;
  --aviso-fundo: #fbefd9;   --aviso-borda: #efd9ad;   --aviso-texto: #92400e;
  --info-borda: #c3d7f7;    --info-texto: #14508f;
  color-scheme: light;
}

/* --- Tema escuro --------------------------------------------------
   Igual ao Restaurante: o sistema acompanha o tema do computador ou do
   celular, e o botão "Tema" no topo troca na mão. A escolha fica gravada
   no navegador (ver templates/_tema.html). Só as variáveis mudam. */
:root[data-theme="dark"] {
  --noite: #050b14;
  --noite-claro: #101e33;
  --superficie: #060d18;
  --cartao: #0e1927;
  --tinta: #e7eef8;
  --tinta-suave: #94a6c0;
  --linha: #22314a;
  --azul-fraco: #132744;
  --verde: #4ade80;
  --vermelho: #f87171;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6);

  --barra: #050b14;
  --barra-2: #101e33;

  --link: #8fbdff;
  --campo: #0a1320;
  --faixa: #141f31;
  --realce: #141f31;
  --borda-forte: #3a4f70;
  --total: #33200e;
  --alerta-fundo: #2e2110;  --alerta-texto: #f5b866;
  --ok-fundo: #10281b;
  --neutra-fundo: #1a2739;
  --sucesso-fundo: #10281b; --sucesso-borda: #1d4a31; --sucesso-texto: #7fd4a0;
  --erro-fundo: #2e1414;    --erro-borda: #5c2626;    --erro-texto: #fca5a5;
  --aviso-fundo: #2e2110;   --aviso-borda: #5a4016;   --aviso-texto: #f5c57a;
  --info-borda: #24406b;    --info-texto: #a9cbff;
  color-scheme: dark;
}

/* Gráficos desenhados no servidor trazem as cores do tema claro embutidas. */
:root[data-theme="dark"] .pagina svg text { fill: var(--tinta-suave); }
:root[data-theme="dark"] .pagina svg text[font-weight="600"] { fill: var(--tinta); }
:root[data-theme="dark"] .pagina svg [stroke="#fff"] { stroke: var(--cartao); }
:root[data-theme="dark"] .pagina svg [stroke="#e1e7ef"],
:root[data-theme="dark"] .pagina svg [stroke="#d0d7e2"] { stroke: var(--linha); }
:root[data-theme="dark"] .botao.perigo { color: #fff; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--superficie);
  color: var(--tinta);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

/* --- Estrutura -------------------------------------------------
   Mesmo desenho do Grafenix Restaurante: uma faixa estreita de ícones à
   esquerda, com o nome curto embaixo de cada um, e no topo quem está
   usando, o botão de tema e o de sair. */

.app { display: flex; min-height: 100vh; }

.barra-lateral {
  width: var(--largura-barra);
  flex: 0 0 var(--largura-barra);
  background: var(--barra);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: clamp(8px, 1.6vh, 16px) 0 clamp(6px, 1.2vh, 12px);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Rolagem fina e visível: com a barra escondida, ninguém sabia que havia
     mais itens embaixo (e a saída era dar zoom para trás). */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  /* Sombra no alto e no pé enquanto houver o que rolar: o "local" faz a
     cobertura andar com o conteúdo e esconder a sombra quando chega na
     ponta. */
  background:
    linear-gradient(var(--barra) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--barra) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.55), transparent) top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.55), transparent) bottom / 100% 14px no-repeat scroll,
    var(--barra);
}
.barra-lateral::-webkit-scrollbar { width: 5px; }
.barra-lateral::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 99px; }
.barra-lateral::-webkit-scrollbar-track { background: transparent; }

/* O menu ocupa a altura inteira da janela (v43). Cada item cresce para
   dividir o espaço por igual — com um teto, para não ficar desengonçado em
   monitor alto — e o ícone e o nome acompanham a altura da janela. Em
   janela baixa demais para todos, cada item para no tamanho mínimo e a
   barra rola (com a sombra indicando que há mais). */
.barra-lateral .marca {
  width: clamp(38px, 5.2vh, 50px);
  height: clamp(38px, 5.2vh, 50px);
  margin-bottom: clamp(6px, 1.4vh, 16px);
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px;
  display: block;
}
.barra-lateral .marca img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; display: block; }

.aba {
  position: relative;
  width: calc(var(--largura-barra) - 12px);
  flex: 1 1 0;
  min-height: 42px;
  max-height: 68px;
  padding: 4px 0;
  border-radius: 12px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(2px, 0.5vh, 5px);
  color: var(--barra-texto);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.aba svg {
  width: clamp(19px, 2.55vh, 25px);
  height: clamp(19px, 2.55vh, 25px);
  stroke-width: 1.7;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aba small {
  font-size: clamp(10px, 1.2vh, 11.5px);
  font-weight: 600; line-height: 1.25; white-space: nowrap; letter-spacing: .01em;
}
.aba:hover { background: var(--barra-2); color: #cfddf0; text-decoration: none; }
.aba.ativo { background: var(--azul); color: #fff; box-shadow: 0 6px 16px -8px rgba(29, 111, 232, .9); }

/* Janela muito baixa: o mínimo de cada item diminui um pouco antes de a
   barra precisar rolar. */
@media (min-width: 621px) and (max-height: 760px) {
  .aba { min-height: 36px; padding: 2px 0; }
  .barra-lateral { padding: 8px 0 6px; gap: 1px; }
}

/* --- Conteudo -------------------------------------------------- */

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  height: 62px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--cartao);
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topo .quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topo .avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--laranja);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex: none;
  text-transform: uppercase;
}
.topo .quem b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topo .quem span span { font-size: 12px; color: var(--tinta-suave); }
.topo .espaco { flex: 1; }
.topo form { margin: 0; }

.fantasma {
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--linha);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta-suave);
  background: var(--cartao);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.fantasma:hover { background: var(--realce); color: var(--tinta); text-decoration: none; }

/* Troca de perfil de quem também sai para entregar. No computador o rótulo
   é inteiro; no celular encolhe (ver a regra na faixa estreita). */
.troca-perfil .curto { display: none; }

.pagina { padding: 20px 20px 48px; }

/* Título da tela, com as ações à direita. */
.cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cabeca h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.cabeca p { margin: 2px 0 0; color: var(--tinta-suave); font-size: 13.5px; }
.cabeca .acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Cartoes de indicador -------------------------------------- */

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.indicador {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}

.indicador .rotulo { color: var(--tinta-suave); font-size: 13px; margin-bottom: 6px; }

.indicador .valor {
  font-size: 24px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.indicador .nota { font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; }

/* Os cartões do painel são atalhos para a área que resumem. */
a.indicador { display: block; color: inherit; text-decoration: none; }
a.indicador:hover { border-color: var(--borda-forte); text-decoration: none; }
a.indicador.destaque:hover { border-color: var(--noite-claro); background: var(--noite-claro); }

.negativo { color: var(--vermelho); }

.indicador.destaque {
  background: var(--noite);
  border-color: var(--noite);
  color: #fff;
}
.indicador.destaque .rotulo { color: #9db1c8; }
.indicador.destaque .valor { color: var(--laranja); }
.indicador.destaque .nota { color: #9db1c8; }

/* --- Blocos e tabelas ------------------------------------------ */

.bloco {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
  overflow: hidden;
}

.bloco-topo {
  padding: 14px 18px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bloco-topo h2 { font-size: 15.5px; font-weight: 620; margin: 0; }
.bloco-corpo { padding: 18px; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabela th {
  text-align: left;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--tinta-suave);
  padding: 10px 18px;
  background: var(--faixa);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela td { padding: 11px 18px; border-bottom: 1px solid var(--linha); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--faixa); }

.tabela .linha-total td { font-weight: 650; border-top: 2px solid var(--linha); }

/* Dois blocos lado a lado em tela larga; um embaixo do outro em tela estreita. */
.grade-dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  align-items: start;
}
.grade-dupla > .bloco { min-width: 0; }

.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* O seletor .tabela th tem precedência maior que .numero sozinho, então o
   cabeçalho das colunas de valor ficava à esquerda e o conteúdo à direita.
   Esta regra alinha os dois. */
.tabela th.numero { text-align: right; }

/* Títulos e valores centralizados: o título da coluna fica exatamente em
   cima do que ela mostra, em todas as tabelas do sistema. */
.tabela th.numero, .tabela td.numero { text-align: center; }

/* Contador de linhas das tabelas de itens. É o próprio navegador que
   numera (01, 02, 03...), então acompanha sozinho as linhas acrescentadas
   ou removidas e não existe campo para alguém alterar. */
.tabela tbody { counter-reset: linha; }
.tabela tr.linha-item { counter-increment: linha; }
.tabela th.contador, .tabela td.contador {
  text-align: center;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  user-select: none;
}
.tabela td.contador::before { content: counter(linha, decimal-leading-zero); }
/* Mesma altura do campo ao lado, para o número ficar no meio da linha. */
.tabela td.contador { line-height: 34px; }

.tabela-rolavel { overflow-x: auto; }

/* --- Etiquetas -------------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 550;
  background: var(--azul-fraco);
  color: var(--link);
}

.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.ok { background: var(--ok-fundo); color: var(--verde); }
.etiqueta.info { background: var(--azul-fraco); color: var(--info-texto); }
.etiqueta.neutra { background: var(--neutra-fundo); color: var(--tinta-suave); }

/* --- Botoes ----------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--raio-pequeno);
  border: 1px solid transparent;
  background: var(--azul);
  color: #fff;
  font-size: 14px;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}

.botao:hover { background: #1a60c9; text-decoration: none; color: #fff; }

.botao.secundario {
  background: var(--cartao);
  color: var(--tinta);
  border-color: var(--linha);
}
.botao.secundario:hover { background: var(--realce); color: var(--tinta); }

.botao.perigo { background: var(--vermelho); }
.botao.perigo:hover { background: #bd3535; }

.botao.pequeno { padding: 5px 11px; font-size: 13px; }

/* --- Formularios ------------------------------------------------ */

.formulario { display: grid; gap: 16px; max-width: 720px; }
.formulario.duas-colunas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.campo-largo { grid-column: 1 / -1; }

.campo label {
  display: block;
  font-size: 13.5px;
  font-weight: 550;
  margin-bottom: 5px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="url"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="password"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 14px;
  background: var(--campo);
  color: var(--tinta);
}

.campo textarea { min-height: 88px; resize: vertical; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.12);
}

.campo .ajuda { font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; }

/* O asterisco marca o que o formulário não aceita em branco. */
.obrigatorio { color: var(--vermelho); font-weight: 700; }

.legenda-obrigatorio {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--tinta-suave);
  margin-bottom: 2px;
}
.campo .erro { font-size: 12.5px; color: var(--vermelho); margin-top: 4px; }

/* A caixa e o rótulo ficam na mesma linha; a explicação vai embaixo, alinhada
   com o rótulo, em vez de espremida ao lado. */
.campo-checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
/* Campo escondido por quem não faz sentido naquele contexto. Precisa vir
   com peso maior que o display:flex acima, senão o atributo hidden não
   esconde nada. */
.campo[hidden] { display: none; }
.campo-checkbox label { margin: 0; }
.campo-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; }
.campo-checkbox .ajuda,
.campo-checkbox .erro { flex-basis: 100%; margin-top: 0; padding-left: 24px; }

/* --- Campos dentro de tabela (itens de orçamento, venda e compra) ---------
   Cada campo ocupa a coluna inteira, então começa e termina exatamente onde
   o título da coluna começa e termina. Valores ficam à direita, como o
   título deles. */
.tabela td input[type="text"],
.tabela td input[type="number"],
.tabela td input[type="url"],
.tabela td input[type="date"],
.tabela td select {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 14px;
  background: var(--campo);
  color: var(--tinta);
}
.tabela td input[inputmode="decimal"] {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tabela td input:focus,
.tabela td select:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.12);
}
.tabela td .ajuda { font-size: 12px; color: var(--tinta-suave); margin-top: 3px; text-align: center; white-space: nowrap; }
.tabela td .erro { font-size: 12.5px; color: var(--vermelho); margin-top: 3px; }
tr.linha-item td { vertical-align: top; }
tr.linha-item td.total-linha { padding-top: 18px; }
tr.linha-item:hover { background: none; }

.acoes-formulario {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--linha);
  margin-top: 4px;
}

/* --- Busca ------------------------------------------------------ */

.busca { display: flex; gap: 8px; }

.busca input,
.busca select {
  padding: 7px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 14px;
  min-width: 230px;
  background: var(--campo);
  color: var(--tinta);
}

/* --- Avisos ----------------------------------------------------- */

.avisos { padding: 0 20px; margin-top: 16px; }

.aviso {
  padding: 11px 15px;
  border-radius: var(--raio-pequeno);
  margin-bottom: 10px;
  font-size: 14px;
  border: 1px solid;
}

.aviso.success { background: var(--sucesso-fundo); border-color: var(--sucesso-borda); color: var(--sucesso-texto); }
.aviso.error { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro-texto); }
.aviso.warning { background: var(--aviso-fundo); border-color: var(--aviso-borda); color: var(--aviso-texto); }
.aviso.info { background: var(--azul-fraco); border-color: var(--info-borda); color: var(--info-texto); }

.vazio { padding: 34px 18px; text-align: center; color: var(--tinta-suave); }
.vazio p { margin: 0 0 12px; }

/* --- Paginacao -------------------------------------------------- */

.paginacao {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--linha);
  font-size: 13.5px;
  color: var(--tinta-suave);
}

/* --- Login ------------------------------------------------------ */

.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--noite);
  padding: 24px;
}

.cartao-login {
  background: var(--cartao);
  border-radius: 14px;
  padding: 34px;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.cartao-login .marca-login {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
}

.cartao-login .marca-login img { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; }
.cartao-login h1 { font-size: 19px; margin: 0; font-weight: 650; }
.cartao-login .subtitulo { color: var(--tinta-suave); font-size: 13.5px; margin: 2px 0 0; }

/* --- Responsivo -------------------------------------------------- */

@media (max-width: 880px) {
  .grade-dupla { grid-template-columns: 1fr; }
}

/* No celular a barra desce para o pé da tela e rola de lado, como no
   Restaurante. */
@media (max-width: 620px) {
  .app { flex-direction: column; }
  .conteudo { order: 1; padding-bottom: 66px; }
  .barra-lateral {
    order: 2;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 30;
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    /* No pé da tela a rolagem é de lado: sem as sombras de cima e de baixo. */
    background: var(--barra);
    scrollbar-width: none;
  }
  .barra-lateral::-webkit-scrollbar { display: none; }
  .barra-lateral .marca { display: none; }
  /* No pé da tela cada item tem tamanho fixo (a barra rola de lado). */
  .aba { width: 72px; flex: none; min-height: 0; max-height: none; padding: 7px 0 5px; }
  .aba svg { width: 21px; height: 21px; }
  .aba small { font-size: 10px; }
  .pagina { padding: 14px 14px 32px; }
  .avisos { padding-left: 14px; padding-right: 14px; }
  .topo { padding: 0 12px; gap: 8px; }
  .topo .fantasma { padding: 7px 10px; }
  .topo .so-desktop { display: none; }
  /* No celular o cabeçalho é disputado: "Trocar de perfil" vira só "Perfil"
     para não empurrar o nome de quem está logado para fora da tela. */
  .troca-perfil .longo { display: none; }
  .troca-perfil .curto { display: inline; }
  .cabeca h1 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- Impressao --------------------------------------------------- */

@media print {
  .barra-lateral, .topo, .avisos, .acoes-formulario, .busca, .cabeca .acoes { display: none !important; }
  body { background: #fff; }
  .bloco { border: none; box-shadow: none; }
}

/* --- Itens de orçamento: remover linha e rodapé da tabela ------------ */

.remover-linha {
  width: 30px;
  height: 30px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--cartao);
  color: var(--tinta-suave);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.remover-linha:hover { color: var(--vermelho); border-color: var(--vermelho); }

.rodape-itens {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  color: var(--tinta-suave);
}

/* --- Escolha entre poucas opções, em botões (ex.: fornecedor local ou
   pela internet). O botão marcado fica azul; os outros, neutros. */
.campo-escolha > div { display: flex; flex-wrap: wrap; gap: 8px; }
.campo-escolha > div > div { margin: 0; }
.campo-escolha > div label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--campo);
  color: var(--tinta);
  font-weight: 550;
  cursor: pointer;
  user-select: none;
}
.campo-escolha > div label:hover { border-color: var(--borda-forte); }
.campo-escolha input[type="radio"],
.campo-escolha input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.campo-escolha > div label:has(input:checked) {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.campo-escolha > div label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.25); }

/* --- Cabeçalho fixo nas tabelas de itens ---------------------------------
   Num orçamento comprido os títulos das colunas (Qtd, Custo, Preço...) saíam
   da tela ao rolar, e ficava difícil saber o que era cada número. Agora eles
   acompanham a rolagem.

   Em tela larga o cabeçalho gruda logo abaixo da barra do topo, rolando a
   página normalmente. Em tela estreita a tabela precisa rolar para os lados,
   então ela ganha altura máxima e rola por dentro, com o cabeçalho preso em
   cima. */
.cabecalho-fixo thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  /* A borda de baixo some em cabeçalho fixo com bordas unidas; a sombra a repõe. */
  box-shadow: inset 0 -1px 0 var(--linha), 0 2px 4px rgba(11, 26, 46, 0.06);
}
@media (min-width: 1280px) {
  .bloco.bloco-itens { overflow: visible; }
  .bloco.bloco-itens > .bloco-topo { border-radius: var(--raio) var(--raio) 0 0; }
  .bloco.bloco-itens > :last-child { border-radius: 0 0 var(--raio) var(--raio); }
  .tabela-rolavel.cabecalho-fixo { overflow: visible; }
  .cabecalho-fixo thead th { top: 62px; }   /* altura da barra do topo */
}
@media (max-width: 1279.98px) {
  .tabela-rolavel.cabecalho-fixo { max-height: 72vh; overflow: auto; }
}
/* Tela do orçamento (v43): o título do bloco, com "Alterar itens e
   desconto", também gruda, e os nomes das colunas logo abaixo dele. */
@media (min-width: 1280px) {
  .bloco-itens.topo-fixo > .bloco-topo {
    position: sticky; top: 62px; z-index: 6; background: var(--cartao);
  }
  .bloco-itens.topo-fixo .cabecalho-fixo thead th { top: calc(62px + var(--altura-topo-itens, 58px)); }
}
@media print {
  .bloco-itens.topo-fixo > .bloco-topo { position: static; }
}
@media print {
  .cabecalho-fixo thead th { position: static; box-shadow: none; }
}

/* Segunda linha do título da coluna: diz que o valor é de UMA unidade. */
.tabela th .por-unidade {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.8;
  margin-top: 1px;
}
/* "Mercado Local" precisa caber inteiro no seletor. */
.tabela td select[name$="-origem"] { min-width: 158px; }

/* --- Arrastar linhas do orçamento -----------------------------------------
   O pegador fica ao lado do número da linha. Só ele inicia o arrasto, para
   os campos continuarem aceitando clique e seleção de texto normalmente. */
.tabela td.contador { white-space: nowrap; }
.pegador {
  border: 0;
  background: none;
  padding: 2px 3px;
  margin-left: 4px;
  font-size: 15px;
  line-height: 1;
  color: var(--tinta-suave);
  opacity: 0.55;
  cursor: grab;
  touch-action: none;      /* no celular, arrastar o pegador não rola a tela */
  border-radius: 6px;
  vertical-align: middle;
}
.pegador:hover, .pegador:focus-visible { opacity: 1; background: var(--realce); }
tr.linha-item.arrastando {
  background: var(--azul-fraco) !important;
  box-shadow: inset 3px 0 0 var(--azul);
}
tr.linha-item.arrastando td { opacity: 0.85; }
body.arrastando-linha, body.arrastando-linha * { cursor: grabbing !important; user-select: none; }

/* A célula inteira do número serve de pegador, não só os pontinhos. */
.tabela tr.linha-item td.contador { cursor: grab; touch-action: none; }
.tabela tr.linha-item td.contador:hover .pegador { opacity: 1; background: var(--realce); }
.pegador { pointer-events: none; }   /* o clique vai para a célula */
tr.linha-item.arrastando td { opacity: 1; }
tr.linha-item.arrastando { outline: 2px solid var(--azul); outline-offset: -2px; }
@keyframes piscar-linha { from { background: var(--azul-fraco); } to { background: transparent; } }
tr.linha-item.acabou-de-mover { animation: piscar-linha 1.2s ease-out; }

/* --- Acompanhamento pelo cliente (tela do orçamento) ------------------------ */
.acesso-cliente { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.acesso-cliente .qr { width: 132px; height: 132px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-pequeno); padding: 6px; flex: none; }
.acesso-cliente .dados { flex: 1; min-width: 260px; }

.foto-do-item { display: flex; align-items: center; gap: 6px; margin: 0; }
.foto-do-item img, .foto-do-item .sem-foto {
  width: 44px; height: 44px; border-radius: 9px; object-fit: contain; display: block;
  background: #fff; border: 1px solid var(--linha); padding: 2px; box-sizing: border-box;
}
.foto-do-item .sem-foto { background: var(--faixa); padding: 0; }
.foto-do-item .sem-foto { display: grid; place-items: center; font-size: 9.5px; line-height: 1.1; text-align: center; color: var(--tinta-suave); }
.foto-do-item .trocar {
  font: inherit; font-size: 12px; color: var(--link); background: none; border: 0; padding: 2px 3px; cursor: pointer; border-radius: 5px;
}
.foto-do-item .trocar:hover { background: var(--realce); }
.foto-do-item input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media print { .foto-do-item .trocar { display: none; } }

/* --- Aprovação do cliente (tela do orçamento) -------------------------------- */
.comprovantes { display: grid; gap: 10px; }
.comprovante {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-pequeno);
  background: var(--faixa);
}
.comprovante.antigo { opacity: .72; }
.comprovante .icone {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--ok-fundo); color: var(--verde); font-weight: 700;
}
.comprovante .texto { flex: 1; min-width: 240px; }
.comprovante .texto .etiqueta { margin-left: 6px; }
.comprovante .linha { margin-top: 2px; font-size: 14px; }
.comprovante .linha.miudo { font-size: 12.5px; color: var(--tinta-suave); }
.comprovante .codigo { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 600; color: var(--tinta); }
.comprovante .acoes { display: flex; gap: 6px; flex-wrap: wrap; }
details.anexar { margin-top: 14px; border: 1px dashed var(--linha); border-radius: var(--raio-pequeno); padding: 10px 14px; }
details.anexar summary { cursor: pointer; font-weight: 600; color: var(--link); }
details.anexar[open] summary { margin-bottom: 10px; }
.titulo-historico { font-size: 14px; margin: 22px 0 8px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; }
.alteracao { border-left: 3px solid var(--azul); padding: 4px 0 4px 14px; margin-bottom: 14px; }
.alteracao .cabeca { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; }
.alteracao .cabeca span { color: var(--tinta-suave); font-size: 13px; }
.alteracao .cabeca .valores { margin-left: auto; font-variant-numeric: tabular-nums; }
.alteracao .cabeca .valores strong { color: var(--tinta); }
.alteracao .motivo { margin: 4px 0; font-style: italic; }
.alteracao ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.alteracao li { padding: 2px 0; }
.alteracao .sinal { display: inline-block; width: 18px; font-weight: 700; color: var(--tinta-suave); }
.alteracao li.novo .sinal { color: var(--verde); }
.alteracao li.retirado .sinal { color: var(--erro-texto); }
.linha-atendida { font-size: 13px; color: var(--tinta-suave); margin-top: 8px; }

/* --- Galeria de fotos do item (tela do orçamento) ---------------------------- */
details.fotos-do-item { position: relative; }
details.fotos-do-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  border-radius: 9px; padding: 2px;
}
details.fotos-do-item > summary::-webkit-details-marker { display: none; }
details.fotos-do-item > summary:hover, details.fotos-do-item[open] > summary { background: var(--realce); }
/* Foto inteira, sem cortar: produto em pé ou deitado cabe no quadrinho,
   sobre fundo branco (o da maioria das fotos de fabricante). */
details.fotos-do-item > summary img, details.fotos-do-item > summary .sem-foto {
  width: 44px; height: 44px; border-radius: 9px; object-fit: contain; display: block; flex: none;
  background: #fff; border: 1px solid var(--linha); padding: 2px; box-sizing: border-box;
}
details.fotos-do-item > summary .sem-foto { background: var(--faixa); padding: 0; }
details.fotos-do-item > summary .sem-foto { display: grid; place-items: center; font-size: 9.5px; line-height: 1.1; text-align: center; color: var(--tinta-suave); }
details.fotos-do-item .quantas { font-size: 12px; color: var(--link); white-space: nowrap; }
details.fotos-do-item .painel {
  /* Janela no meio da tela: a tabela tem rolagem própria e cortaria um
     painel preso à célula. A sombra larga faz o fundo escurecido. */
  position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw); max-height: 86vh; overflow: auto;
  background: var(--cartao, #fff); border: 1px solid var(--linha); border-radius: var(--raio-pequeno);
  box-shadow: 0 0 0 100vmax rgba(8, 18, 31, .5), 0 24px 60px -20px rgba(0, 0, 0, .5);
  padding: 18px; text-align: left; white-space: normal;
}
details.fotos-do-item .painel p { margin: 4px 0 10px; font-size: 12.5px; color: var(--tinta-suave); }
details.fotos-do-item .miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
details.fotos-do-item .miniatura { position: relative; margin: 0; border-radius: 9px; overflow: hidden; border: 1px solid var(--linha); background: #fff; transition: opacity .15s, box-shadow .15s; }
details.fotos-do-item .miniatura.principal { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
details.fotos-do-item .miniatura img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6px; box-sizing: border-box; display: block; }
details.fotos-do-item .miniatura .selo-principal,
details.fotos-do-item .miniatura .selo-remover,
details.fotos-do-item .miniatura .selo-nova {
  position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-weight: 700; color: #fff;
  padding: 1px 7px; border-radius: 99px; display: none; pointer-events: none;
}
details.fotos-do-item .miniatura .selo-principal { background: var(--azul); }
details.fotos-do-item .miniatura.principal .selo-principal { display: inline-block; }
details.fotos-do-item .miniatura .selo-nova { background: var(--verde); left: auto; right: 4px; top: auto; bottom: 4px; display: inline-block; }
/* Marcada para remover: apagada e riscada até o Salvar. Clicar no × de
   novo desfaz. */
details.fotos-do-item .miniatura.removendo { border-color: var(--erro-texto, #b42318); box-shadow: 0 0 0 1px var(--erro-texto, #b42318); }
details.fotos-do-item .miniatura.removendo img { opacity: .3; filter: grayscale(1); }
details.fotos-do-item .miniatura.removendo .selo-principal { display: none; }
details.fotos-do-item .miniatura.removendo .selo-remover { display: inline-block; background: var(--erro-texto, #b42318); }
details.fotos-do-item .miniatura.removendo [data-fotos-remover] { background: var(--erro-texto, #b42318); }
details.fotos-do-item .miniatura.nova { border-style: dashed; border-color: var(--verde); }
details.fotos-do-item .botoes { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; }
details.fotos-do-item .botoes button {
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer; font-size: 14px; line-height: 1;
  background: rgba(11, 26, 46, .78); color: #fff;
}
details.fotos-do-item .botoes button:hover { background: #0b1a2e; }
details.fotos-do-item .adicionar { position: relative; overflow: hidden; cursor: pointer; }
details.fotos-do-item .adicionar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
details.fotos-do-item .dica { font-size: 12px; color: var(--tinta-suave); margin-left: 8px; }
details.fotos-do-item .linha-adicionar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
details.fotos-do-item .por-link textarea { width: 100%; box-sizing: border-box; }
/* Rodapé fixo da janela: o que vai ser salvo, Cancelar e Salvar. */
details.fotos-do-item .rodape-fotos {
  position: sticky; bottom: -18px; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  margin: 16px -18px -18px; padding: 12px 18px;
  background: var(--cartao, #fff); border-top: 1px solid var(--linha);
  border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
}
details.fotos-do-item .rodape-fotos .pendente { margin-right: auto; font-size: 12.5px; color: var(--tinta-suave); }
details.fotos-do-item[data-alterada="1"] .rodape-fotos .pendente { color: var(--tinta); font-weight: 600; }
details.fotos-do-item .rodape-fotos [data-fotos-salvar]:disabled { cursor: not-allowed; }
@media (max-width: 520px) {
  details.fotos-do-item .rodape-fotos .pendente { flex-basis: 100%; }
  details.fotos-do-item .rodape-fotos .botao { flex: 1; }
}
@media print { details.fotos-do-item .quantas { display: none; } }
details.fotos-do-item .fechar { float: right; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--tinta-suave); padding: 0 4px; }
.grade-de-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.foto-do-produto { border: 1px solid var(--linha); border-radius: var(--raio-pequeno); padding: 6px; background: var(--faixa); font-size: 12.5px; }
.foto-do-produto img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; padding: 4px; box-sizing: border-box; border-radius: 7px; display: block; margin-bottom: 4px; }
.foto-do-produto label { display: flex; align-items: center; gap: 5px; font-weight: 400; margin: 2px 0 0; cursor: pointer; }
.foto-do-produto input { width: auto; margin: 0; }
details.fotos-do-item .avisos-das-fotos .aviso { margin: 8px 0 0; padding: 8px 11px; font-size: 13px; }
details.fotos-do-item .por-link { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }
details.fotos-do-item .por-link label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
details.fotos-do-item .por-link .linha { display: flex; gap: 8px; align-items: flex-start; }
details.fotos-do-item .por-link textarea { flex: 1; min-height: 38px; resize: vertical; font: inherit; font-size: 13.5px; padding: 8px 10px; }
details.fotos-do-item .por-link .dica { display: block; margin: 6px 0 0; }
details.fotos-do-item button:disabled { opacity: .55; cursor: progress; }

/* A chave da partilha dos lucros, na venda e no orçamento: um recado e um
   botão, lado a lado no computador e empilhados no celular. */
.linha-partilha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.linha-partilha > div:first-child { flex: 1 1 280px; }
.linha-partilha b { display: block; font-size: 15px; }
.linha-partilha span { display: block; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.45; }
.linha-partilha form { margin: 0; }
@media (max-width: 640px) {
  .linha-partilha .botao, .linha-partilha .botao.secundario { width: 100%; justify-content: center; }
  .linha-partilha form { flex: 1 1 100%; }
}

/* --- Situação de entrega por item (orçamento) ----------------------------
   Barrinha em três partes: verde = entregue, azul = separado esperando o
   entregador, cinza (o fundo) = ainda aguardando o fornecedor. */
.barra-entrega {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--neutra-fundo); min-width: 120px; margin-bottom: 6px;
}
.barra-entrega span { display: block; height: 100%; }
.parte-entregue { background: var(--verde); }
.parte-separada { background: var(--azul); }
.parte-aguardando { background: var(--neutra-fundo); border: 1px solid var(--linha); }
.estado-entrega { display: flex; flex-wrap: wrap; gap: 4px; }
.legenda-itens {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 14px 18px; border-top: 1px solid var(--linha);
  font-size: 12.5px; color: var(--tinta-suave);
}
.legenda-itens b { color: var(--tinta); }
.legenda-itens > span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-quebra { flex-basis: 100%; height: 0; }
.amostra { display: inline-block; width: 18px; height: 8px; border-radius: 999px; }

/* Atalho "+ Fulano" para incluir alguém da equipe como entregador. */
.tambem-entrega {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--linha);
  font-size: 13.5px; color: var(--tinta-suave);
}
.tambem-entrega .ajuda { flex-basis: 100%; }

/* --- Orçamento "Só meu" (v45) ----------------------------------------------
   A chave de quem vê o orçamento. "Equipe" é discreta (o normal);
   "Só meu" é escura, com cadeado, para não passar despercebida. */
.form-chave-exclusivo { margin: 0; display: inline; }
.chave-exclusivo {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 6px 11px 6px 9px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta-suave);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.chave-exclusivo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chave-exclusivo.equipe:hover { border-color: var(--barra); color: var(--tinta); }
.chave-exclusivo.so-meu { background: var(--barra); border-color: var(--barra); color: #fff; box-shadow: 0 4px 12px -6px rgba(11, 26, 46, .7); }
.chave-exclusivo.so-meu svg { color: #ffb36b; }
.chave-exclusivo.so-meu:hover { background: var(--barra-2); }
:root[data-theme="dark"] .chave-exclusivo.so-meu { border-color: #ffb36b55; }

.faixa-exclusivo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 20px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--cartao);
}
.faixa-exclusivo .icone {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--faixa); color: var(--tinta-suave);
}
.faixa-exclusivo .icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faixa-exclusivo .texto { flex: 1; min-width: 240px; font-size: 14px; color: var(--tinta-suave); }
.faixa-exclusivo .texto b { display: block; color: var(--tinta); font-size: 15px; }
.faixa-exclusivo.ligada { background: var(--barra); border-color: var(--barra); }
.faixa-exclusivo.ligada .texto { color: #b8c7da; }
.faixa-exclusivo.ligada .texto b { color: #fff; }
.faixa-exclusivo.ligada .icone { background: rgba(255, 179, 107, .14); color: #ffb36b; }
.faixa-exclusivo.ligada .chave-exclusivo.so-meu { background: #fff; color: var(--barra); border-color: #fff; }
.faixa-exclusivo.ligada .chave-exclusivo.so-meu svg { color: var(--barra); }
.etiqueta.so-meu { background: var(--barra); color: #fff; }

/* --- Preço de promoção no orçamento (v47) --------------------------------- */
.nota-promo { margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: var(--tinta-suave); text-align: right; white-space: nowrap; }
.nota-promo[hidden] { display: none; }
.nota-promo span { display: inline-block; padding: 0 6px; border-radius: 99px; background: var(--ok-fundo); color: var(--verde); font-weight: 700; }
.nota-promo s { color: #c0392b; }

/* --- Cabeçalho das tabelas travado em todo o sistema (v47) -----------------
   O nome das colunas acompanha a rolagem. js/tabelas.js decide, tabela por
   tabela, se ela rola com a página (cabe na largura) ou por dentro (larga).
   :where() deixa estas regras fracas de propósito: as telas que já têm a
   sua (.cabecalho-fixo, nos formulários de itens) continuam mandando. */
.bloco { overflow: hidden; overflow: clip; }   /* "clip" corta os cantos sem virar caixa de rolagem */
:where(.tabela) thead th {
  position: sticky; top: 62px; z-index: 4;
  box-shadow: inset 0 -1px 0 var(--linha), 0 2px 4px rgba(11, 26, 46, .05);
}
.tabela-rolavel.cabe { overflow: visible; }
.tabela-rolavel.rola-por-dentro { overflow: auto; max-height: calc(100vh - 150px); }
.tabela-rolavel.rola-por-dentro thead th { top: 0; }
/* Painel que abre de dentro de uma linha perto do fim da tabela abre para cima,
   para não ser cortado pela borda do bloco. */
.tabela tbody tr:nth-last-child(-n+2):not(:only-child) .painel-promocao { top: auto; bottom: calc(100% + 6px); }
@media print {
  :where(.tabela) thead th { position: static; box-shadow: none; }
  .tabela-rolavel.rola-por-dentro { max-height: none; overflow: visible; }
}