/* ==========================================================================
   Tema Next ERP.

   A identidade antiga (Uniplus) era vermelha -- o flamingo #eb575a herdado de
   login_files/styles.ec41ca96b6a4810b.css. A marca passou a ser Next ERP, azul.

   A troca acontece SO aqui: nao existem `.bg-red`, `.navbar` ou classes com cor
   fixa espalhadas pela folha. Tudo o que era vermelho lia `var(--up-flamingo*)`,
   token que virou `--up-primaria*` -- nome semantico, para que a proxima
   mudanca de marca continue sendo so estas quatro linhas. Quem consome:
   .btn-primary (Bootstrap), .item-menu:hover, .modulo.aberto, .aba-interna.ativa,
   .chip-filtro, o realce de linha do AG Grid e os cabecalhos de seccao.

   Medidas e neutros seguem os do sistema real:
     .navbar-white -> 1.4px #cfd8dc      .text-cinza-chumbo -> #57525a
     .card-shadow  -> 0 -1px 6px #00060c33
     fonte         -> "FS Truman", Calibri
   ========================================================================== */

:root {
  /* Marca Next ERP. O tom primario e o mesmo azul do botao ENTRAR da tela de
     login e da seta clara do logotipo. */
  --up-primaria: #2e2edb;
  --up-primaria-escuro: #2424b0; /* hover/ativo */
  --up-primaria-claro: #b9baf0;  /* desabilitado e borda de campo em foco */
  --up-primaria-fundo: #eeeffe;  /* realce suave: chips, hover de linha/menu */

  /* Azul escuro da marca: a seta cheia do logotipo e os titulos fortes. */
  --up-marca-escura: #151a3d;

  /* Azuis de apoio, herdados do sistema (links, linha selecionada na grade).
     Sao outra familia: nao confundir com --up-primaria. */
  --up-azul: #0032a0e6;
  --up-azul-escuro: #004664;
  --up-azul-sky: #36a9e1;
  --up-azul-royal: #0050a0; /* --azul-royal-01 */

  /* Neutros */
  --up-cinza-chumbo: #57525a;
  --up-borda: #cfd8dc;
  --up-borda-suave: #e3e7ea;
  --up-cinza-frio: #f5f5f5;
  --up-texto: #2f3438;
  --up-texto-suave: #7b8085;

  /* Indigo da marca. Era o papel de parede da area de trabalho (hoje ela usa
     o mesmo fundo claro do login); segue como cor da barrinha de navegacao. */
  --up-desktop: #4d58b8;

  /* Intervencao administrativa: alguem com mais poder desfez o que outra
     pessoa estava fazendo. Hoje so a liberacao da trava de edicao por um
     supervisor, na Rastreabilidade (.evento-edicao_liberada). Ambar de
     proposito -- nao e erro (vermelho) nem conclusao (verde), e um aviso de
     que houve mao humana por cima. */
  --up-intervencao: #b07d2b;

  /* Estrela da pauta FAVORITA (Painel Admin > Usuarios): o dourado pedido
     pelo usuario para "a pauta que abre no pedido". E vizinho do
     --up-intervencao, mas nao e o mesmo tom nem o mesmo sentido: aquele avisa
     que alguem interveio, este marca uma escolha preferida. */
  --up-favorita: #e0a516;

  /* "So com autorizacao": hoje o cadeado FECHADO do seletor de pautas
     (Painel Admin > Usuarios) e a contagem dele no resumo da celula -- a
     pauta aparece para o vendedor, mas so entra no pedido com a senha de um
     supervisor. Nao e erro nem recusa de uma acao, mas divide com elas o
     vermelho que ja existia solto na folha (#c0392b do
     .acesso-desenvolvedor-erro), agora com nome. */
  --up-restrito: #c0392b;

  /* Base do papel de parede (fundo-login.svg), usada pelas DUAS telas que o
     exibem: .pagina-login e .app-uniplus. E o que aparece enquanto o SVG nao
     carregou e nas sobras do `cover`, entao precisa acompanhar o tom do
     desenho -- por isso token, e nao o hex repetido nos dois lugares. */
  --up-papel-parede: #f4f7fd;

  /* Confirmacao/descarte dos dialogos. Eram laranja fixo (#e47646/#d4622b) da
     folha antiga -- viraram token para acompanharem a marca. */
  --up-confirmar: #2e2edb;
  --up-confirmar-escuro: #2424b0;
  /* "Gerar PDF" da confirmacao de gravacao: o mesmo verde do Gerar PDF da
     janela Imprimir da listagem (.botao-gravar), para o operador reconhecer
     a acao nas duas telas */
  --up-gerar-pdf: #55a459;
  --up-gerar-pdf-escuro: #468f4a;

  /* Sombras e medidas */
  --up-sombra-card: 0 -1px 6px #00060c33;
  --up-sombra-menu: 0 6px 14px rgba(0, 6, 12, 0.18);
  --up-sombra-login: 0 6px 26px rgba(0, 6, 12, 0.16);
  /* Cabecalho global enxuto: cada pixel aqui e area util a mais nas telas de
     lancamento. As tres barras (saudacao + modulos + abas) somavam 146px e
     agora somam ~96px. */
  --up-header-altura: 44px;

  /* A folha original usa "FS Truman"; o arquivo da fonte nao acompanha a
     pagina salva, entao Calibri (o proprio fallback deles) assume. */
  --up-fonte: "FS Truman", Calibri, "Segoe UI", system-ui, sans-serif;
}

body {
  font-family: var(--up-fonte);
  font-size: 13px;
  color: var(--up-texto);
  background-color: #fff;
}

/* --- Icones --------------------------------------------------------------- */

/* Todo icone sai de partials/icones.html com class="icone". O TAMANHO continua
   vindo do atributo width/height que cada chamada passa (`ico.pessoa(15)`),
   e nao daqui: os tamanhos ja estao afinados tela a tela, de 13px no lapis da
   grade a 22px no envio de arquivo do admin. Pisar neles com um `width` fixo
   no CSS quebraria esses ajustes.
   Logo, esta classe cuida so do que o atributo nao resolve: */
.icone {
  /* nunca espremer o icone quando o texto ao lado e longo */
  flex: 0 0 auto;
  /* alinha com a linha de base do texto quando o pai NAO e flex */
  vertical-align: -0.14em;
}

/* A COR e o ESPACO nao ficam aqui de proposito:
   - cor: e contextual. O icone herda `currentColor`, entao segue a cor do item
     (.item-menu svg -> azul, .botao-acao svg -> branco, .modulo svg -> grafite).
     Fixar um cinza nesta classe atropelaria todos esses casos.
   - espaco: os menus e botoes sao flex e ja separam icone e texto com `gap`
     (.item-menu 0.45rem, .modulo 0.4rem, .grupo-titulo 0.5rem). Um
     `margin-right` aqui SOMARIA ao gap e o respiro sairia dobrado. */

/* --- Logotipo ------------------------------------------------------------- */

.marca-lockup {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1.1;
}

.marca {
  display: block;
  height: 2.4rem;
  width: auto;
}

/* ==========================================================================
   Componentes do Bootstrap alinhados ao tema
   ========================================================================== */

.btn {
  font-family: var(--up-fonte);
}

.btn-primary {
  --bs-btn-bg: var(--up-primaria);
  --bs-btn-border-color: var(--up-primaria);
  --bs-btn-hover-bg: var(--up-primaria-escuro);
  --bs-btn-hover-border-color: var(--up-primaria-escuro);
  --bs-btn-active-bg: #b74c51;
  --bs-btn-active-border-color: #b74c51;
  --bs-btn-disabled-bg: var(--up-primaria-claro);
  --bs-btn-disabled-border-color: var(--up-primaria-claro);
  --bs-btn-focus-shadow-rgb: 235, 87, 90;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--up-primaria-claro);
  box-shadow: 0 0 0 0.2rem rgba(235, 87, 90, 0.18);
}

.spinner-border {
  color: var(--up-primaria);
}

.card {
  --bs-card-border-color: var(--up-borda-suave);
}

.card-header {
  background-color: var(--up-cinza-frio);
  border-bottom-color: var(--up-borda-suave);
  color: var(--up-azul);
  font-weight: 600;
}

/* ==========================================================================
   Tela de login (Next ERP)

   Escrita sem Bootstrap: o login.html carrega SO esta folha, entao tudo o que
   a tela usa -- inclusive .visually-hidden, que antes vinha do framework --
   precisa estar aqui. As demais telas continuam com o Bootstrap carregado
   antes do app.css; a redeclaracao abaixo e identica a dele e nao muda nada la.
   ========================================================================== */

/* Mesma regra do Bootstrap: some da tela, continua no leitor de tela. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* A pagina de login e a unica que rola livremente -- .app-uniplus (o corpo do
   sistema) trava em 100vh. Por isso a casca aqui e um corpo proprio. */
.corpo-login {
  margin: 0;
  min-height: 100vh;
}

/* Grade de 3 faixas: logo | cartao | rodape. As faixas de cima e de baixo
   dividem a sobra por igual, entao e o CARTAO que fica no centro vertical
   da tela (e nao o conjunto logo + cartao). Quando a janela e baixa, a faixa
   de baixo cede ate o tamanho do rodape e o cartao sobe o necessario para
   caber -- o minimo deixou de ser 0 quando o rodape entrou ali, senao a faixa
   colapsava e a assinatura passava por cima do cartao.

   `border-box`: sem ele o padding somava aos 100vh e a pagina sempre ganhava
   uma barra de rolagem. So rola se a janela for menor que logo + cartao. */
.pagina-login {
  box-sizing: border-box;
  /* altura DEFINIDA (e nao min-height): com min-height a grade reservava para
     a faixa de baixo o mesmo tamanho do logo e gerava rolagem em tela baixa.
     Se a janela for menor que logo + cartao, o conteudo passa da altura e o
     proprio corpo rola, como deve. */
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  justify-items: center;
  padding: 1rem;

  /* fundo-login.svg traz o degrade e as setas; `cover` mantem a decoracao nos
     cantos em qualquer proporcao de janela (ver o comentario no proprio SVG) */
  background-color: var(--up-papel-parede);
  background-image: url("/static/img/fundo-login.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.login-logo {
  display: block;
  align-self: end;
  width: auto;
  height: 6.5rem;
  max-width: min(22rem, 80vw);
  margin-bottom: 2.5rem;
}

/* --- Cartao --------------------------------------------------------------- */

.cartao-login {
  width: 100%;
  max-width: 26rem;
  padding: 2rem 1.9rem 1.6rem;
  background-color: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 18px 44px rgba(20, 30, 70, 0.12), 0 2px 6px rgba(20, 30, 70, 0.06);
}

/* --- Campos --------------------------------------------------------------- */

/* Um unico retangulo arredondado com o icone dentro, e nao input-group com
   caixas emendadas: e assim que a referencia desenha o campo. A borda vive no
   .campo-login (o pai), o <input> entra sem borda nenhuma -- por isso o foco
   precisa ser :focus-within e nao :focus. */
.campo-login {
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem;
  border: 1.5px solid var(--up-borda);
  border-radius: 0.55rem;
  background-color: #fff;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.campo-login:focus-within {
  border-color: var(--up-primaria-claro);
  background-color: var(--up-primaria-fundo);
  box-shadow: 0 0 0 3px rgba(46, 46, 219, 0.08);
}

.campo-login-icone {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.7rem 0 0.85rem;
  color: var(--up-cinza-chumbo);
}

.campo-login:focus-within .campo-login-icone {
  color: var(--up-primaria);
}

.campo-login-entrada {
  flex: 1 1 auto;
  /* largura minima zero: sem isso o input impoe o tamanho padrao dele e
     estoura o cartao em telas estreitas */
  min-width: 0;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border: 0;
  background: none;
  font-family: var(--up-fonte);
  font-size: 0.95rem;
  color: var(--up-texto);
}

.campo-login-entrada::placeholder {
  color: var(--up-texto-suave);
}

.campo-login-entrada:focus {
  outline: none; /* o realce e a borda do .campo-login inteiro */
}

/* Autofill do Chrome pinta o input de amarelo e ignora background-color;
   a sombra interna e a unica forma de cobrir. */
.campo-login-entrada:-webkit-autofill,
.campo-login-entrada:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40rem #fff inset;
  -webkit-text-fill-color: var(--up-texto);
}

/* --- Campo com problema ---------------------------------------------------- */

/* Borda e icone em vermelho; o aviso logo abaixo diz o que falta. A classe
   `tremer` e posta pelo login.js a cada tentativa recusada -- um balanco
   curto, so para puxar o olho para o campo certo. */
.campo-login.invalido,
.campo-login.invalido:focus-within {
  border-color: #e0898b;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.1);
}

.campo-login.invalido .campo-login-icone {
  color: #c9423f;
}

.campo-login.tremer {
  animation: tremer-campo-login 0.32s ease-in-out;
}

@keyframes tremer-campo-login {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* O aviso encosta no campo (margem negativa come o respiro do .campo-login)
   e entra deslizando de leve. */
.aviso-campo-login {
  margin: -0.35rem 0 0.7rem 0.2rem;
  font-size: 0.82rem;
  color: #b53a37;
  animation: surgir-aviso-login 0.2s ease-out;
}

.aviso-campo-login[hidden] {
  display: none;
}

@keyframes surgir-aviso-login {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.campo-login-olho {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.85rem;
  border: 0;
  background: none;
  color: var(--up-texto-suave);
}

.campo-login-olho:hover {
  color: var(--up-primaria);
}

.campo-login-olho:focus-visible {
  outline: 2px solid var(--up-primaria-claro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Um olho de cada vez: `aria-pressed` ja diz qual estado e, entao o CSS
   apenas segue o mesmo atributo em vez de uma classe paralela. */
.campo-login-olho .olho-aberto,
.campo-login-olho[aria-pressed="true"] .olho-fechado {
  display: none;
}

.campo-login-olho[aria-pressed="true"] .olho-aberto {
  display: block;
}

/* --- Manter conectado ---------------------------------------------------- */

.opcoes-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.2rem;
  font-size: 0.85rem;
}

.lembrar-login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--up-texto);
}

.lembrar-login input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--up-primaria);
}

/* --- Botao ---------------------------------------------------------------- */

.botao-entrar {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0.55rem;
  background-color: var(--up-primaria);
  font-family: var(--up-fonte);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.15s;
}

.botao-entrar:hover {
  background-color: var(--up-primaria-escuro);
}

.botao-entrar:focus-visible {
  outline: 2px solid var(--up-primaria-escuro);
  outline-offset: 2px;
}

/* Enquanto o login.js espera a resposta: evita o duplo clique. */
.botao-entrar:disabled {
  background-color: var(--up-primaria-claro);
}

@media (prefers-reduced-motion: reduce) {
  .campo-login,
  .botao-entrar {
    transition: none;
  }

  .campo-login.tremer,
  .aviso-campo-login {
    animation: none;
  }
}

/* --- Rodape: versao da build + direitos autorais -------------------------- */

/* Mora na terceira faixa da grade e encosta na base da janela (`align-self:
   end`). Discreto de proposito: e assinatura e conferencia de versao, nao
   informacao de uso. */
.rodape-login {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.5rem;
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  color: var(--up-texto-suave);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.rodape-login-versao {
  font-weight: 600;
  color: var(--up-cinza-chumbo);
}

/* Some junto com a quebra de linha: empilhado, o ponto separador vira sujeira
   no meio da coluna. */
.rodape-login-separador {
  color: var(--up-primaria-claro);
}

@media (max-width: 575.98px) {
  .pagina-login {
    padding: 1rem;
    /* `fixed` custa caro em rolagem no iOS e nem sempre e respeitado */
    background-attachment: scroll;
  }

  .login-logo {
    height: 4.4rem;
    margin-bottom: 1.75rem;
  }

  .cartao-login {
    padding: 1.6rem 1.25rem 1.25rem;
  }

  .rodape-login {
    flex-direction: column;
    margin-top: 1.25rem;
    font-size: 0.72rem;
  }

  .rodape-login-separador {
    display: none;
  }
}

/* ==========================================================================
   Casca do sistema: cabecalho + barra de modulos + area de trabalho
   ========================================================================== */

.app-uniplus {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Papel de parede: o MESMO da tela de login (fundo-login.svg). Antes era o
     indigo com a ilustracao de cidade no rodape (fundo-sistema.svg) -- trocado
     para o sistema abrir na mesma identidade clara em que o usuario entrou.
     `cover` + `fixed` repetem o enquadramento da .pagina-login: a decoracao
     fica nos cantos de baixo e o miolo continua limpo atras do painel. */
  background-color: var(--up-papel-parede);
  background-image: url("/static/img/fundo-login.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* --- Cabecalho (app-header + navbar-white do sistema) --------------------- */

.topo {
  flex: 0 0 var(--up-header-altura);
  height: var(--up-header-altura);
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid var(--up-borda);
  padding-left: 0.9rem;
}

.topo-marca {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* no cabecalho a logo cede altura para o nome do sistema caber embaixo */
.topo-marca .marca {
  height: 1.55rem;
}

.topo-usuario {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding-inline: 1rem;
  color: var(--up-texto);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
}

.topo-nome {
  color: var(--up-azul-royal);
}

/* Nome clicavel: abre o menu do usuario (Meus Dados, Minha Senha, Minhas
   Notificacoes -- base.html + js/menu_usuario.js). Mesmo desenho do botao da
   filial logo ao lado: sem moldura, so o fundo claro no hover. */
.topo-nome-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  color: var(--up-azul-royal);
}

.topo-nome-menu:hover,
.topo-nome-menu:focus-visible,
.topo-nome-menu[aria-expanded="true"] {
  background-color: var(--up-primaria-fundo);
  outline: none;
}

/* O painel reaproveita o .menu-opcoes (itens, hover, "Em breve") numa coluna
   so. `fixed` e nao `absolute`: fica fora do cabecalho, cujo .topo-usuario
   corta o que passa da borda -- o menu_usuario.js o poe sob o nome. */
.menu-opcoes.menu-usuario {
  position: fixed;
  top: 0;
  right: auto;
  grid-template-columns: minmax(13rem, auto);
  gap: 0.15rem;
  padding: 0.4rem;
  z-index: 1060;
}

.topo-aceno {
  font-size: 1.05em;
}

/* --- Local de trabalho no cabecalho --------------------------------------- */
/* Nome da filial + CNPJ ao lado do usuario; clicar abre o modal de troca. */

.topo-local {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  /* Respiro entre o aceno e o nome da empresa. Vai aqui, e nao no `gap` do
     .topo-usuario, porque aquele gap vale entre TODOS os itens da saudacao --
     aumentar la afastaria tambem "Bem-vindo," do nome do usuario. Antes quem
     separava esses dois blocos era a logo que havia dentro do botao. */
  margin-left: 0.4rem;
  padding: 0.15rem 0.5rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--up-primaria);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.topo-local:hover,
.topo-local:focus-visible {
  background-color: var(--up-primaria-fundo);
}

.topo-local-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  /* em tela estreita o nome da filial cede espaco ao resto do cabecalho */
  .topo-local-texto {
    max-width: 12rem;
  }
}

/* --- Ferramentas > Modelo de impressao ------------------------------------ */

.texto-apoio {
  margin-bottom: 1.1rem;
  font-size: 13px;
  color: var(--up-texto-suave);
}

.bloco-modelos {
  margin-bottom: 1.4rem;
}

/* usado tambem em Painel Admin > Vendas ("Situacao padrao das listagens") */
.bloco-modelos-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.bloco-modelos-topo .bloco-titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* --- Ferramentas > Modelo de Impressao ------------------------------------ */

/* texto de apoio na mesma linha do Incluir, empurrando o botao para a direita */
.barra-apoio {
  flex: 1 1 auto;
  margin: 0;
  font-size: 12.5px;
}

.bloco-modelos-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bloco-modelos-contagem {
  min-width: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 10px;
  background-color: #e3eef8;
  font-size: 11px;
  line-height: 1.35rem;
  text-align: center;
  color: var(--up-azul-royal);
}

/* Layout fixo + <colgroup>: as colunas das duas tabelas (Pedido e Orcamento)
   ficam na mesma posicao, e cabecalho e conteudo alinham pelo mesmo lado. */
.tabela-modelos {
  width: 100%;
  table-layout: fixed;
}

.tabela-modelos .col-arquivos { width: 7rem; }
.tabela-modelos .col-situacao { width: 9rem; }
/* dois botoes de 26px + o espaco entre eles + o respiro da celula */
.tabela-modelos .col-acao { width: 6rem; }

/* renomear + excluir lado a lado, como as acoes do Cadastro de Impressoras */
.acoes-modelo {
  display: inline-flex;
  gap: 0.3rem;
}

/* Caixa de renomear: um campo so, no mesmo respiro das etapas do assistente
   (ver .assistente-etapa) -- sem os 3 passos, que so o Incluir precisa. */
.renomear-corpo {
  padding: 1.25rem 1.25rem 0.9rem;
}

.renomear-corpo .assistente-apoio {
  margin: 0.35rem 0 0;
}

.tabela-modelos .centro {
  text-align: center;
}

.tabela-modelos td.destaque {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabela-modelos td {
  vertical-align: middle;
}

.modelos-vazio {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--up-borda);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--up-texto-suave);
}

/* --- Assistente de inclusao ------------------------------------------------ */

/* overflow-x: a etapa entra deslizando 10px da direita, e sem isto o dialogo
   ganhava uma barra de rolagem horizontal durante a animacao */
.dialogo-assistente {
  width: min(36rem, calc(100vw - 2rem));
  overflow-x: hidden;
}

.assistente-passos {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  list-style: none;
  border-bottom: 1px solid var(--up-borda-suave);
  background-color: var(--up-cinza-frio);
}

.assistente-passo {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--up-texto-suave);
}

.assistente-passo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1.5px solid var(--up-borda);
  border-radius: 50%;
  background-color: #fff;
  font-size: 11px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.assistente-passo.atual {
  color: var(--up-texto);
}

.assistente-passo.atual span {
  border-color: var(--up-azul-royal);
  background-color: var(--up-azul-royal);
  color: #fff;
}

.assistente-passo.feito span {
  border-color: #3d7a42;
  background-color: #e3f1e4;
  color: #3d7a42;
}

.assistente-corpo {
  margin: 0;
}

.assistente-etapa {
  min-height: 13.5rem;
  margin: 0;
  padding: 1.25rem 1.25rem 0.75rem;
  border: 0;
  animation: assistente-entrada 0.2s ease-out;
}

.assistente-etapa[hidden] {
  display: none;
}

@keyframes assistente-entrada {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .assistente-etapa {
    animation: none;
  }
}

/* <legend> flutuando (o mesmo truque do Bootstrap): sem o float o navegador
   desenha a legenda EM CIMA da borda do fieldset, ignorando o padding -- a
   pergunta colava na barra de etapas */
.assistente-pergunta {
  float: left;
  width: 100%;
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--up-texto);
}

.assistente-pergunta + * {
  clear: left;
}

.assistente-apoio {
  margin: 0 0 1rem;
  font-size: 12.5px;
  color: var(--up-texto-suave);
}

.assistente-etapa .campo input[type="text"] {
  padding: 0.55rem 0.75rem;
  font-size: 14px;
}

.opcoes-documento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.opcao-documento {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--up-borda);
  border-radius: 6px;
  background-color: #fff;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.opcao-documento:hover {
  border-color: var(--up-azul-sky);
}

/* o radio fica acessivel (teclado/leitor de tela), mas quem aparece e o cartao */
.opcao-documento input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcao-documento:has(input:checked) {
  border-color: var(--up-azul-royal);
  background-color: #eef5fc;
  box-shadow: 0 0 0 3px rgba(0, 80, 160, 0.12);
}

.opcao-documento:has(input:focus-visible) {
  outline: 2px solid var(--up-azul-sky);
  outline-offset: 2px;
}

.opcao-documento-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #dceefb;
  color: var(--up-azul-royal);
}

.opcao-documento-texto {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.opcao-documento-texto strong {
  font-size: 13.5px;
}

.opcao-documento-texto small {
  font-size: 11.5px;
  color: var(--up-texto-suave);
}

.dialogo-assistente .zona-envio {
  padding: 1.5rem 1rem;
}

.dialogo-assistente .zona-envio[hidden],
.dialogo-assistente .zona-envio-arquivo[hidden] {
  display: none;
}

.assistente-resumo {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--up-azul-royal);
  border-radius: 3px;
  background-color: #eef5fc;
  font-size: 12.5px;
  color: var(--up-texto);
}

.assistente-rodape {
  align-items: center;
  gap: 0.4rem;
}

.assistente-rodape .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
}

.assistente-rodape .botao-acao[hidden] {
  display: none;
}

.assistente-espaco {
  flex: 1 1 auto;
}

/* --- Dialogo Imprimir (listagens de Pedido/Orcamento) --------------------- */

.dialogo-imprimir {
  width: min(34rem, calc(100vw - 2rem));
}

/* "· Pedido nº 318455" ao lado do titulo, mais leve que ele */
.imprimir-documento {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--up-texto-suave);
}

.imprimir-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem;
}

.imprimir-corpo .campo[hidden],
.imprimir-corpo .modelos-vazio[hidden],
.imprimir-corpo .destino-impressao[hidden] {
  display: none;
}

.imprimir-corpo .campo select {
  padding: 0.5rem 0.65rem;
  font-size: 14px;
}

/* Para onde o Imprimir vai mandar: so informa, no mesmo desenho do resumo do
   assistente. Verde quando ha impressora, ambar quando falta algo. */
.destino-impressao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--up-borda);
  border-radius: 3px;
  background-color: var(--up-cinza-frio);
  font-size: 12.5px;
  color: var(--up-texto-suave);
}

.destino-impressao[data-estado="ok"] {
  border-left-color: #55a459;
  background-color: #eef7ee;
  color: #2f6a33;
}

.destino-impressao[data-estado="aviso"] {
  border-left-color: #e0a526;
  background-color: #fdf6e7;
  color: #7a5a14;
}

/* Botao trabalhando (Gerando.../Imprimindo...): o icone pulsa */

.botao-acao.processando .icone {
  animation: pulsar-icone 0.9s ease-in-out infinite;
}

@keyframes pulsar-icone {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- Ferramentas > Cadastro de Impressoras --------------------------------- */

/* Situacao do programa de impressao deste computador */
.cartao-agente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--up-borda-suave);
  border-left: 4px solid var(--up-borda);
  border-radius: 6px;
  background-color: #fff;
}

.cartao-agente-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--up-cinza-frio);
  color: var(--up-texto-suave);
}

.cartao-agente-texto {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.cartao-agente-texto strong {
  font-size: 13.5px;
  color: var(--up-texto);
}

.cartao-agente-texto span {
  font-size: 12px;
  color: var(--up-texto-suave);
}

.cartao-agente-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cartao-agente-acoes [hidden] {
  display: none;
}

/* mesma altura dos botoes da barra de ferramentas */
.cartao-agente-acoes .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
}

.cartao-agente[data-estado="ok"] {
  border-left-color: #55a459;
}

.cartao-agente[data-estado="ok"] .cartao-agente-icone {
  background-color: #e3f1e4;
  color: #3d7a42;
}

.cartao-agente[data-estado="ausente"],
.cartao-agente[data-estado="nao-autorizado"],
.cartao-agente[data-estado="desatualizado"] {
  border-left-color: #e0a526;
}

.cartao-agente[data-estado="ausente"] .cartao-agente-icone,
.cartao-agente[data-estado="nao-autorizado"] .cartao-agente-icone,
.cartao-agente[data-estado="desatualizado"] .cartao-agente-icone {
  background-color: #fdf6e7;
  color: #a3740f;
}

.cartao-agente[data-estado="verificando"] .cartao-agente-icone {
  animation: pulsar-icone 0.9s ease-in-out infinite;
}

.passos-instalacao {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem 0.75rem 2.25rem;
  border: 1px dashed var(--up-borda);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--up-texto);
}

.passos-instalacao[hidden] {
  display: none;
}

.passos-instalacao li + li {
  margin-top: 0.35rem;
}

.tabela-impressoras .col-documento { width: 9rem; }
.tabela-impressoras .col-acoes { width: 7.5rem; }

.tabela-impressoras .texto-ausente {
  color: var(--up-texto-suave);
}

/* "Padrao": a impressora que ja vem escolhida ao imprimir o documento */
.tabela-impressoras .etiqueta-padrao {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* "Tornar padrao" abaixo do "Sim": discreto, como um link */
.botao-tornar-padrao {
  display: block;
  margin: 0.2rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  color: var(--up-azul-royal);
  text-decoration: underline;
}

.botao-tornar-padrao:hover {
  color: #003f80;
}

.acoes-impressora {
  display: inline-flex;
  gap: 0.3rem;
}

/* pagina de teste: contornado em azul, como o mover item da grade do Pedido.
   Classe dobrada: `.botao-icone-item` vem depois no arquivo e zeraria a borda. */
.botao-icone-item.botao-teste-impressora {
  border-color: var(--up-azul-royal);
  background-color: #fff;
  color: var(--up-azul-royal);
}

.botao-icone-item.botao-teste-impressora:hover:not(:disabled),
.botao-icone-item.botao-teste-impressora:focus-visible:not(:disabled) {
  background-color: var(--up-azul-royal);
  color: #fff;
}

/* dialogo Incluir/Alterar impressora */
.impressora-corpo {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.25rem 1.25rem 0.9rem;
}

.impressora-corpo .campo select {
  padding: 0.5rem 0.65rem;
  font-size: 14px;
}

.impressora-apoio {
  margin: 0.3rem 0 0;
}

.impressora-documentos {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* documento marcavel (varios ao mesmo tempo): o visto aparece a direita */
.opcao-marca {
  display: inline-flex;
  margin-left: auto;
  color: var(--up-azul-royal);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}

.opcao-marcavel:has(input:checked) .opcao-marca {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .botao-acao.processando .icone,
  .cartao-agente[data-estado="verificando"] .cartao-agente-icone {
    animation: none;
  }
}

/* --- Pauta de preco (aba Itens do documento de venda) ---------------------
   O <select> mora no rodape (`.rodape-documento .footer-start`); aqui so o
   aviso de "nenhuma pauta ativa". */

.aviso-pauta {
  margin: 0 0 0.75rem;
  font-size: 12px;
  color: var(--up-texto-suave);
}

/* Campo recusado: so a moldura muda de cor -- nada que mexa na altura da
   linha do formulario denso. */
.campo-invalido,
.campo input.campo-invalido {
  border-color: var(--up-primaria);
  box-shadow: 0 0 0 2px var(--up-primaria-fundo);
}

/* --- Modal: local de trabalho --------------------------------------------- */

.modal-local-trabalho {
  max-width: 26rem;
}

/* moldura clara em volta dos dois campos, como no ERP */
.caixa-local-trabalho {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--up-borda-suave);
  border-radius: 6px;
  background-color: #fbfcfd;
}

/* `.campo label` (secao dos formularios) vem depois no arquivo e tem a mesma
   especificidade, entao aqui precisa de uma classe a mais para vencer. */
.caixa-local-trabalho .campo label {
  color: var(--up-azul-royal);
  font-weight: 700;
}

/* os dois campos usam a mesma moldura azul da referencia */
.caixa-local-trabalho select,
.combo-campo {
  border-color: var(--up-azul-royal);
}

/* seta azul propria, para o <select> nativo casar com a caixa de filial */
.caixa-local-trabalho select {
  appearance: none;
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%230050a0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

/* --- Caixa de selecao com opcoes detalhadas (filial) ---------------------- */
/* Um <select> nativo nao consegue mostrar Nome/Codigo/CNPJ em cada opcao. */

.combo {
  position: relative;
}

.combo-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  font-family: var(--up-fonte);
  font-size: 13px;
  color: var(--up-texto);
  text-align: left;
}

.combo.aberto .combo-campo {
  background-color: #dbe7f6;
}

.combo-campo:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.15rem rgba(54, 169, 225, 0.2);
}

.combo-campo:disabled {
  background-color: var(--up-cinza-frio);
  color: var(--up-texto-suave);
}

.combo-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-seta {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--up-azul-royal);
}

.combo-opcoes {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0.2rem 0 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--up-azul-royal);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--up-sombra-menu);
}

/* cada opcao e um cartao de duas linhas: Nome / Codigo + CPF-CNPJ */
.combo-opcao {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--up-borda-suave);
}

.combo-opcao:last-child {
  border-bottom: 0;
}

.combo-opcao:hover,
.combo-opcao.selecionada {
  background-color: #dbe7f6;
}

.combo-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  font-size: 12px;
  color: var(--up-texto);
}

.combo-linha b {
  color: var(--up-azul-royal);
}

.topo-acoes {
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* o <form> do logout so existe pra dar POST em /logout -- display:contents
   tira a caixa dele do layout, entao o <button> vira filho direto do flex
   acima, exatamente como o <a> do Painel Admin. Sem isso o botao ficava
   fora do centro: o form (bloco comum) nao repassava o align-items:center
   pro botao dentro dele. */
.topo-acoes form {
  display: contents;
}

.btn-topo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  border-left: 1px solid var(--up-borda);
  background: transparent;
  color: var(--up-cinza-chumbo);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-topo:hover,
.btn-topo:focus-visible {
  background-color: var(--up-cinza-frio);
  color: var(--up-texto);
}

.btn-topo.btn-sair:hover,
.btn-topo.btn-sair:focus-visible {
  color: var(--up-primaria);
  background-color: var(--up-primaria-fundo);
}

/* --- Barra de modulos ----------------------------------------------------- */

.barra-modulos {
  position: relative; /* ancora o painel suspenso */
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  background-color: #fff;
  border-bottom: 1px solid var(--up-borda);
  padding-left: 0.4rem;
}

.modulo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--up-fonte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4a4f54;
}

.modulo svg {
  color: var(--up-azul-sky);
}

.modulo:hover {
  color: #1f2529;
  border-bottom-color: var(--up-borda);
}

.modulo.aberto {
  color: #1f2529;
  border-bottom-color: var(--up-azul-sky);
}

/* --- Painel suspenso do modulo -------------------------------------------- */

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: 1.1rem 1.5rem 1.4rem;
  background-color: #fff;
  border-bottom: 1px solid var(--up-borda);
  box-shadow: var(--up-sombra-menu);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.mega-menu[hidden] {
  display: none;
}

.mega-menu-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem 2.5rem;
}

.grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--up-texto);
}

.grupo-titulo svg {
  color: var(--up-azul);
}

.grupo-linha {
  margin: 0 0 0.6rem;
  border: 0;
  border-top: 1px solid var(--up-borda-suave);
  opacity: 1;
}

.lista-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* espelha .fundo-btn-link do sistema: raio 4px, sem sublinhado */
.item-menu {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.5rem;
  border-radius: 4px;
  font-size: 13px;
  color: var(--up-azul);
  text-decoration: none;
}

.item-menu svg {
  flex: 0 0 auto;
  color: var(--up-azul);
}

.item-menu:hover,
.item-menu:focus-visible {
  color: var(--up-primaria-escuro);
  background-color: var(--up-primaria-fundo);
}

.item-menu:hover svg,
.item-menu:focus-visible svg {
  color: var(--up-primaria);
}

/* --- Area trocada a cada navegacao (SPA) ---------------------------------- */

/* O #dynamic-content (base.html) entra ENTRE o .app-uniplus e a faixa de
   abas/painel, entao precisa repassar o contexto flex: sem isto o
   `flex: 1 1 auto` do .painel nao acha coluna nenhuma e a tela perde altura.
   `min-height: 0` e o que deixa o .painel rolar por dentro -- item de flex
   aninhado tem min-height auto por padrao e cresceria ate estourar a janela
   em vez de ativar o proprio overflow-y. */
#dynamic-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Enquanto o router busca a proxima tela. Fica numa barra fina sobre o
   cabecalho (o cursor de "carregando" saiu em 22/09/2026: o sistema usa so a
   setinha -- ver "Cursor do sistema", no fim da folha): a tela atual continua visivel e clicavel (o router
   cancela o fetch anterior se vier outro clique). */

body.navegando::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 2000;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--up-desktop), transparent);
  animation: up-navegando 900ms linear infinite;
}

@keyframes up-navegando {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  body.navegando::before {
    animation: none;
    background: var(--up-desktop);
  }
}

/* --- Area de trabalho vazia ----------------------------------------------- */

.area-trabalho {
  flex: 1 1 auto;
}

/* --- Abas das funcoes abertas --------------------------------------------- */

.abas {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  padding: 3px 6px 0;
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.7rem;
  background-color: #fff;
  border: 1px solid var(--up-borda);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1f2529;
}

/* aba de fundo: mesma forma, recuada, como no ERP */
a.aba {
  background-color: #e9edf0;
  color: var(--up-texto-suave);

  /* Setinha normal, e nao a mao de link. So as abas INATIVAS sao <a> (a ativa
     e um <span> e o "x" e um <button>), entao sem isto a mao aparecia uma sim
     outra nao ao passar pela faixa. O cursor e herdado, entao o "x" de dentro
     acompanha. Elas continuam clicaveis -- muda so o ponteiro. */
  cursor: default;
}

a.aba:hover {
  background-color: #f4f7f9;
  color: var(--up-texto);
}

a.aba .aba-fechar {
  color: #b9c1c8;
}

.abas[hidden] {
  display: none;
}

.aba-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--up-texto-suave);
  text-decoration: none;
}

.aba-fechar:hover {
  background-color: var(--up-primaria-fundo);
  color: var(--up-primaria);
}

/* --- Painel da funcao aberta ---------------------------------------------- */

.painel {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 8px 8px;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
  border: 1px solid var(--up-borda);
  border-radius: 0 4px 4px 4px;
  box-shadow: var(--up-sombra-card);
}

@media (max-width: 575.98px) {
  .topo {
    flex-basis: 3.25rem;
    height: 3.25rem;
    padding-left: 0.85rem;
  }

  .marca {
    height: 1.9rem;
  }

  .topo-usuario {
    display: none;
  }

  .painel {
    padding: 1rem;
  }
}

/* ==========================================================================
   Dialogo de confirmacao

   O botao SIM era o laranja #e47646/#d4622b da folha original (identidade
   Uniplus); agora le --up-confirmar, que segue o azul da marca Next ERP. O NAO
   continua no cinza neutro -- e o descarte, nao tem cor de marca.
     .btn-cancel-up -> #93a3b5 / borda #00000080 (NAO)
     .modal-content -> raio .3rem   .line-bottom -> 1px rgba(0,0,0,.1)
   ========================================================================== */

.dialogo {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: 0 10px 34px rgba(0, 6, 12, 0.3);
  color: var(--up-texto);
}

.dialogo::backdrop {
  background-color: rgba(0, 0, 0, 0.45);
}

.dialogo-titulo {
  margin: 0;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  color: #3a4550;
}

.dialogo-acoes {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem 2rem 1.5rem;
}

/* --- Senha tecnica do Painel Admin (base.html + js/senha_tecnica.js) ------- */

.dialogo-senha-tecnica {
  width: min(24rem, calc(100vw - 2rem));
  text-align: center;
}

.senha-tecnica-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-top: 1.5rem;
  border-radius: 50%;
  background-color: #dceefb;
  color: var(--up-azul-royal);
}

.dialogo-senha-tecnica .dialogo-titulo {
  padding: 0.6rem 2rem 0.25rem;
  border-bottom: 0;
}

.dialogo-senha-tecnica .dialogo-texto {
  padding-top: 0;
}

.senha-tecnica-campo {
  padding: 1rem 2rem 0;
}

/* Campo e botoes na altura padrao da casa: o campo com o mesmo recuo dos
   formularios (2px), e os botoes com os 28px dos botoes de acao. Antes o
   dialogo nascia com um campo de ~48px e botoes de ~34px, destoando do resto
   do sistema. Escopado a este dialogo: os outros (Sim/Nao, sucesso, recusa)
   seguem com a medida deles. */
.senha-tecnica-campo input {
  width: 100%;
  padding: 2px 0.75rem;
  height: 28px;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  font-family: var(--up-fonte);
  font-size: 15px;
  letter-spacing: 0.35em;
  text-align: center;
}

.dialogo-senha-tecnica .dialogo-acoes {
  padding: 1rem 2rem 1.25rem;
}

.dialogo-senha-tecnica .botao-up {
  height: 28px;
  padding: 0 1.1rem;
  font-size: 12px;
}

/* o placeholder nao herda o espacamento largo dos digitos da senha */
.senha-tecnica-campo input::placeholder {
  font-size: 13px;
  letter-spacing: normal;
}

.senha-tecnica-campo input:focus {
  outline: none;
  border-color: var(--up-azul-sky);
  box-shadow: 0 0 0 3px rgba(54, 169, 225, 0.2);
}

.senha-tecnica-campo input.campo-invalido {
  border-color: var(--up-primaria);
  box-shadow: 0 0 0 3px var(--up-primaria-fundo);
}

.senha-tecnica-erro {
  margin: 0.45rem 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--up-primaria);
}

.senha-tecnica-erro[hidden] {
  display: none;
}

.senha-tecnica-recusada {
  animation: senha-tecnica-sacudir 0.3s ease-in-out;
}

@keyframes senha-tecnica-sacudir {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .senha-tecnica-recusada {
    animation: none;
  }
}

/* --- Minha Senha (menu do usuario) -------------------------------------------
   O dialogo e o da senha tecnica (icone, titulo, botoes de 28px); os tres
   campos sao `.campo` com rotulo em cima, na medida padrao dos formularios
   (#formMinhaSenha entra nas listas "Cadastros de Cliente, Produto e
   Vendedor"). */
.minha-senha-campos {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 2rem 0;
  text-align: left;
}

/* --- Liberacao de desconto pelo supervisor (venda_documento_form) ----------
   Mesma casca da senha tecnica (icone redondo, titulo, campo com erro que
   sacode), com dois campos -- usuario e senha -- e o percentual pedido em
   destaque, para o supervisor saber o que esta liberando. */

.dialogo-supervisor {
  width: min(25rem, calc(100vw - 2rem));
  text-align: center;
}

.dialogo-supervisor[open] {
  animation: up-sucesso-entrada 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.supervisor-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-top: 1.5rem;
  border-radius: 50%;
  background-color: #fdecea;
  color: #d70a23;
}

.dialogo-supervisor .dialogo-titulo {
  padding: 0.6rem 1.75rem 0;
  border-bottom: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.dialogo-supervisor .dialogo-texto {
  padding: 0.35rem 1.75rem 0;
}

.dialogo-supervisor .dialogo-texto:empty {
  display: none;
}

.supervisor-pedido {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background-color: #f1f4f6;
  font-size: 12px;
  color: var(--up-texto-suave);
}

.supervisor-pedido strong {
  font-size: 15px;
  color: var(--up-marca-escura);
}

.supervisor-instrucao {
  margin: 0.9rem 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--up-azul-royal);
}

.supervisor-campos {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem 2rem 0;
}

.supervisor-campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.65rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  color: var(--up-texto-suave);
  cursor: text;
}

.supervisor-campo:focus-within {
  border-color: var(--up-azul-sky);
  box-shadow: 0 0 0 3px rgba(54, 169, 225, 0.2);
  color: var(--up-azul-royal);
}

.supervisor-campo.campo-invalido {
  border-color: var(--up-primaria);
  box-shadow: 0 0 0 3px var(--up-primaria-fundo);
}

.supervisor-campo input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--up-fonte);
  font-size: 14px;
  color: var(--up-texto);
}

.supervisor-campos .senha-tecnica-erro {
  margin: 0;
}

.botao-up {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 7rem;
  padding: 0.45rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--up-fonte);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.2s;
}

.botao-sim {
  background-color: var(--up-confirmar);
  border-color: var(--up-confirmar-escuro);
}

.botao-sim:hover,
.botao-sim:focus-visible {
  background-color: var(--up-confirmar-escuro);
}

/* --- Confirmacao de gravacao (pedido/orcamento) ----------------------------
   Circulo e check se desenham em sequencia (stroke-dashoffset), o dialogo
   entra com um leve "pulo" e a barra no pe esvazia no tempo que falta para
   fechar sozinho. A duracao da barra vem do JS (TEMPO_SUCESSO). */

.dialogo-sucesso {
  width: min(24rem, calc(100vw - 2rem));
  overflow: hidden;
  text-align: center;
}

.dialogo-sucesso[open] {
  animation: up-sucesso-entrada 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.dialogo-sucesso::backdrop {
  background-color: rgba(21, 26, 61, 0.45);
}

.sucesso-icone {
  display: flex;
  justify-content: center;
  padding-top: 1.75rem;
}

.sucesso-circulo,
.sucesso-check {
  stroke: #1e9e5a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sucesso-circulo {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: up-sucesso-traco 0.5s ease-out 0.1s forwards;
}

.sucesso-check {
  stroke-width: 3.5;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: up-sucesso-traco 0.3s ease-out 0.55s forwards;
}

.sucesso-titulo {
  margin: 0.75rem 0 0;
  padding: 0 1.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--up-marca-escura);
}

.sucesso-texto {
  margin: 0.3rem 0 0;
  padding: 0 1.5rem;
  font-size: 13px;
  color: var(--up-texto-suave);
}

.sucesso-resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.1rem 1.5rem 0;
  border: 1px solid var(--up-borda-suave);
  border-radius: 6px;
  background-color: var(--up-cinza-frio);
}

.sucesso-resumo > div {
  padding: 0.55rem 0.4rem;
}

.sucesso-resumo > div + div {
  border-left: 1px solid var(--up-borda-suave);
}

.sucesso-resumo dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--up-texto-suave);
}

.sucesso-resumo dd {
  margin: 0.1rem 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--up-azul-royal);
  white-space: nowrap;
}

/* Pergunta "imprimir?" da confirmacao de gravacao; `.falhou` quando a
   impressao nao saiu (mesmo vermelho da caixa de motivo da recusa). */
.sucesso-pergunta {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1rem 1.5rem 0;
  padding: 0.65rem 0.85rem;
  border-left: 4px solid var(--up-azul-royal);
  border-radius: 4px;
  background-color: #eef6fd;
  color: var(--up-azul-royal);
  text-align: left;
}

.sucesso-pergunta[hidden],
.dialogo-sucesso .botao-up[hidden] {
  display: none;
}

.sucesso-pergunta .icone {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.sucesso-pergunta p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--up-texto);
}

.sucesso-pergunta.falhou {
  border-left-color: #d70a23;
  background-color: #fdf2f2;
  color: #d70a23;
}

.sucesso-tempo {
  height: 4px;
  background-color: var(--up-borda-suave);
}

.sucesso-tempo span {
  display: block;
  height: 100%;
  background-color: #1e9e5a;
  transform-origin: left;
  animation: up-sucesso-tempo linear forwards;
}

/* --- Operacao recusada ------------------------------------------------------
   Reaproveita a casca da confirmacao (`.dialogo-sucesso`: entrada, titulo,
   icone) trocando o verde pelo vermelho da lixeira, e o resumo pela caixa do
   motivo. Na entrada o dialogo balanca de leve -- o "nao" do gesto. */

.dialogo-recusa[open] {
  animation: up-sucesso-entrada 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25),
    up-recusa-balanco 0.4s ease-in-out 0.28s;
}

.recusa-circulo,
.recusa-sinal {
  stroke: #d70a23;
  stroke-width: 3;
  stroke-linecap: round;
}

.recusa-circulo {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: up-sucesso-traco 0.5s ease-out 0.1s forwards;
}

.recusa-sinal {
  stroke-width: 3.5;
}

.recusa-ponto {
  fill: #d70a23;
}

.recusa-motivo {
  margin: 1rem 1.5rem 0;
  padding: 0.65rem 0.85rem;
  border-left: 4px solid #d70a23;
  border-radius: 4px;
  background-color: #fdf2f2;
  text-align: left;
}

.recusa-motivo-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a33a37;
}

.recusa-motivo p {
  margin: 0.15rem 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--up-texto);
}

@keyframes up-recusa-balanco {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes up-sucesso-entrada {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes up-sucesso-traco {
  to { stroke-dashoffset: 0; }
}

@keyframes up-sucesso-tempo {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dialogo-sucesso[open],
  .sucesso-circulo,
  .sucesso-check,
  .recusa-circulo {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.botao-nao {
  background-color: #93a3b5;
  border-color: rgba(0, 0, 0, 0.5);
}

.botao-nao:hover,
.botao-nao:focus-visible {
  background-color: #7d8d9f;
}

.botao-pdf {
  background-color: var(--up-gerar-pdf);
  border-color: var(--up-gerar-pdf-escuro);
}

.botao-pdf:hover:enabled,
.botao-pdf:focus-visible {
  background-color: var(--up-gerar-pdf-escuro);
}

/* com o "Gerar PDF" a confirmacao de gravacao tem tres botoes (Sim / Gerar
   PDF / Nao): o dialogo passou de 24rem para 28rem e os botoes dele ficaram
   mais enxutos para caber os tres numa linha. Em tela estreita eles quebram
   de linha em vez de estourar a largura. */
.dialogo-sucesso {
  width: min(28rem, calc(100vw - 2rem));
}

.dialogo-sucesso .dialogo-acoes {
  flex-wrap: wrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.dialogo-sucesso .botao-up {
  min-width: 6rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Listas "Impressora" e "Modelo" da confirmacao de gravacao. Antes so havia
   a do modelo, sozinha e com margem propria; agora as duas dividem a mesma
   linha (o dialogo tem largura de sobra) e a margem passou para o grupo. Em
   tela estreita a segunda desce para a linha de baixo. Qualquer uma pode
   estar escondida -- so a impressora, so o modelo, ou nenhuma. */
.sucesso-escolhas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
  margin: 0.85rem 1.5rem 0;
}

.sucesso-escolhas[hidden] {
  display: none;
}

/* Rotulo e campo nas medidas da casa (10.5px / 11.5px), alinhados a margem
   da pergunta de impressao logo acima. */
.sucesso-campo {
  flex: 1 1 9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  text-align: left;
}

.sucesso-campo[hidden] {
  display: none;
}

.sucesso-campo label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--up-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sucesso-campo select {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  font-family: var(--up-fonte);
  font-size: 11.5px;
  color: var(--up-texto);
  background-color: #fff;
}

.sucesso-campo select:focus {
  outline: none;
  border-color: var(--up-primaria-claro);
}

/* nada a escolher (uma impressora so, ou programa de impressao antigo): o
   campo continua mostrando o destino, mas sem parecer clicavel. O motivo vai
   no `title`. */
.sucesso-campo select:disabled {
  color: var(--up-texto-suave);
  background-color: var(--up-cinza-frio);
  cursor: not-allowed;
}

/* ==========================================================================
   Barra de ferramentas e grade de listagem
   ========================================================================== */

.barra-ferramentas {
  display: flex;
  align-items: center;
  /* barra fina: os botoes andam juntos, como na barra do ERP */
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.campo-pesquisa {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background-color: #fff;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  color: var(--up-texto-suave);
}

.campo-pesquisa input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  font-family: var(--up-fonte);
  font-size: 13px;
  color: var(--up-texto);
  background: none;
}

/* A pesquisa na MESMA altura dos botoes ao lado, senao a barra fica com dois
   patamares. So dentro da barra de ferramentas: o mesmo `.campo-pesquisa` e
   usado no dialogo de pesquisa de produtos, onde o tamanho normal e o certo. */
.barra-ferramentas .campo-pesquisa {
  height: 28px;
  padding-block: 0;
  padding-inline: 0.6rem;
}

.barra-ferramentas .campo-pesquisa input {
  font-size: 12px;
}

.botao-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.42rem 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--up-fonte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

.botao-incluir,
.botao-gravar,
.botao-ok {
  background-color: #55a459;
  border-color: #468f4a;
}

.botao-incluir:hover,
.botao-gravar:hover,
.botao-ok:hover {
  background-color: #468f4a;
  color: #fff;
}

.botao-cancelar,
.botao-limpar {
  background-color: #93a3b5;
  border-color: rgba(0, 0, 0, 0.35);
}

.botao-cancelar:hover,
.botao-limpar:hover {
  background-color: #7d8d9f;
  color: #fff;
}

.botao-acao:disabled {
  opacity: 0.55;
  /* acao indisponivel (sem permissao, documento travado...): o cursor ja
     avisa, e o motivo fica no `title` do botao */
  cursor: not-allowed;
}

.grade-envolucro {
  overflow-x: auto;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;

  /* ANCORA para o que estiver posicionado em absolute aqui dentro -- hoje os
     <label class="visually-hidden"> de cada controle das grades do Painel
     Admin. Sem um ancestral posicionado, `position: absolute` se resolve
     contra o bloco inicial do DOCUMENTO: os rotulos das linhas do fim ficam
     ancorados centenas de pixels abaixo da janela e esticam a area rolavel do
     documento (medido: 170px de rolagem fantasma). Como o <body> tem
     overflow:hidden, isso nao rola com a roda -- mas o navegador rola o
     documento sozinho ao focar um campo, o app inteiro sobe e aparece uma
     faixa do fundo vermelho embaixo do card. */
  position: relative;
}

.grade {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.grade th {
  padding: 0.5rem 0.65rem;
  background-color: #f2f5f7;
  border-bottom: 1px solid var(--up-borda);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  color: var(--up-texto);
}

.grade td {
  padding: 0.42rem 0.65rem;
  border-bottom: 1px solid var(--up-borda-suave);
  white-space: nowrap;
}

.grade tbody tr:hover td {
  background-color: var(--up-primaria-fundo);
}

.grade .num {
  text-align: right;
}

/* nomes das colunas sempre a esquerda, mesmo nas colunas numericas */
.grade th.num {
  text-align: left;
}

/* Coluna do tamanho do conteudo: com layout automatico, width minimo faz a
   coluna encolher ate caber o texto e sobra vai para as colunas sem a classe. */
.grade th.encolher {
  width: 1px;
  white-space: nowrap;
}

/* --- Colunas arrastaveis e redimensionaveis -------------------------------- */

.grade th {
  position: relative;
}

.grade th.movel {
  cursor: grab;
  user-select: none;
}

.puxador {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}

.puxador:hover,
.puxador.ativo {
  background-color: var(--up-azul-sky);
}

body.redimensionando,
body.redimensionando * {
  cursor: col-resize !important;
  user-select: none;
}

/* depois do primeiro redimensionamento a largura declarada passa a mandar */
.grade.fixa {
  table-layout: fixed;
}

.grade.fixa th,
.grade.fixa td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade th.movel:active {
  cursor: grabbing;
}

.grade th.arrastando {
  opacity: 0.45;
}

.grade th.alvo {
  box-shadow: inset 3px 0 0 var(--up-azul-sky);
}

.grade .destaque {
  color: var(--up-azul-royal);
}

.grade .vazia td {
  padding: 1.5rem;
  text-align: center;
  color: var(--up-texto-suave);
}

.grade tfoot td {
  padding: 0.5rem 0.65rem;
  background-color: #f2f5f7;
  border-top: 1px solid var(--up-borda);
  font-weight: 700;
}

.grade .acao {
  text-align: center;
}

/* --- Variante "planilha" da grade ------------------------------------------
   Modificador de `.grade` para as telas em que o que importa e densidade de
   leitura, e nao respiro: fonte pequena, celulas apertadas, linhas finas e
   claras nos DOIS sentidos e coluna de numeracao com o fundo do cabecalho,
   fazendo o papel do indice de linhas do Excel. Nasceu na grade de itens do
   Pedido/Orcamento (para acompanhar a tela original do ERP) e e usada hoje em:

     #gradeItens            Pedido/Orcamento > Itens
     #gradeSituacaoPadrao   Painel Admin > Vendas
     #gradeUsuarios         Painel Admin > Usuarios

   Marcar a grade com `.grade-planilha` e o envolucro com `.planilha` e o que
   liga tudo -- `.grade` sozinha continua com o visual arejado das listagens do
   resto do sistema (inclusive o dialogo de pesquisa de produtos). */

.grade-envolucro.planilha {
  border-color: #d4d9dd;
}

.grade-planilha {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11.5px;
}

.grade-planilha th {
  padding: 3px 6px;
  /* degrade vertical bem sutil do branco pro cinza claro, como o cabecalho de
     coluna de uma planilha */
  background-color: #f5f5f5;
  background-image: linear-gradient(#fdfdfd, #f1f2f4);
  border-bottom: 1px solid #c9ced3;
  border-right: 1px solid #dfe3e6;
  font-size: 11.5px;
  font-weight: 700;
  color: #2c3e50;
}

/* Sem background-color aqui: o fundo branco ja vem do .grade-envolucro e
   deixar a celula transparente preserva o realce de linha no hover e o da
   linha em edicao (regras de especificidade menor). */
.grade-planilha td {
  padding: 2px 6px;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}

/* ultima coluna e ultima linha encostam na moldura do envolucro -- borda
   propria ali viraria linha dupla */
.grade-planilha th:last-child,
.grade-planilha td:last-child {
  border-right: 0;
}

.grade-planilha tbody tr:last-child td {
  border-bottom: 0;
}

/* Coluna de numeracao: indice da planilha -- fundo do cabecalho, negrito,
   centralizado e do tamanho exato do conteudo.
   `.grade.grade-planilha` (duas classes) de proposito: com uma so, o realce de
   `.grade tbody tr:hover td` teria especificidade maior e repintaria o indice
   junto com a linha. */
/* --- Altura da linha da grade de itens ------------------------------------
   Alvo pedido: ~21px por linha (vinha de ~23,4).

   A altura da linha e o MAIOR requisito entre as celulas, entao os dois pisos
   precisam cair juntos -- mexer so num deles nao muda nada, porque o outro
   vira o novo limite:

     celula de texto  = line-height + padding (2+2) + borda (1)
     celula de Acoes  = altura do botao + padding (2+2) + borda (1)

   Com line-height e botao em 16px, os dois dao 21px e a linha para ai.
   Escopado em #gradeItens: as grades do Painel Admin compartilham
   `.grade-planilha`, mas tem <select> de 20px dentro e ficariam com texto
   espremido sem ganhar altura nenhuma. */
#gradeItens td {
  line-height: 16px;
}

/* Botoes de acao encolhidos DENTRO da grade densa.
   Eram eles, e nao o padding da celula, que definiam a altura da linha: com
   26px fixos a linha ficava em 33px (26 + 3 + 3 + borda) por mais que o `td`
   encolhesse. Em 18px quem manda volta a ser o texto, e a linha cai para ~22px
   -- cerca de 30% mais itens visiveis sem rolar. Escopado na variante densa
   para nao mexer no mesmo botao usado fora dela. */
.grade-planilha .botao-icone-item {
  width: 18px;
  height: 18px;
  border-radius: 3px;
}

.grade.grade-planilha .indice {
  width: 1px;
  background-color: #f5f5f5;
  font-weight: 700;
  text-align: center;
  color: var(--up-cinza-chumbo);
}

/* `.grade .vazia td` tem a mesma especificidade de `.grade-planilha td` e
   perde por vir antes na folha -- a linha de "nada encontrado" precisa do
   respiro de volta. */
.grade-planilha tbody tr.vazia td {
  padding: 1.25rem;
}

/* Celula que hospeda um campo (hoje o <select> de pauta): o campo e quem
   ganha o respiro, a celula fica praticamente sem padding. */
.grade-planilha td.celula-campo {
  padding: 1px 4px;
}

/* Campo dentro da celula: sem moldura enquanto esta parado, para a linha nao
   engordar nem virar um formulario; a borda so aparece no hover/foco, quando
   o usuario ja esta interagindo. A seta e desenhada aqui (appearance: none)
   porque a nativa do Windows nao cabe em 20px de altura. */
.grade-planilha .campo-celula {
  width: 100%;
  height: 20px;
  padding: 0 17px 0 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%237b8085'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 7px 5px;
  font-family: inherit;
  font-size: inherit;
  color: var(--up-texto);
  appearance: none;
}

.grade-planilha .campo-celula:hover {
  border-color: var(--up-borda);
  background-color: #fff;
}

.grade-planilha .campo-celula:focus {
  border-color: var(--up-azul-royal);
  background-color: #fff;
  outline: none;
}

/* Situacao: cor do texto, nada de badge -- um retangulo colorido no meio de
   uma planilha quebraria a altura da linha e o alinhamento da coluna. */
.grade-planilha .situacao-ativo {
  color: #1d7a45;
}

.grade-planilha .situacao-inativa {
  color: #a3423a;
}

/* --- Controles editaveis DENTRO da linha ---------------------------------- */
/* Regra que vale pra todos: nada aqui pode aumentar a altura da linha (20px de
   campo dentro de uma celula de 3px de padding). Por isso checkbox miudo,
   toggle reduzido e input numerico sem as setinhas. */

.grade-planilha .coluna-marca {
  width: 1px;
  text-align: center;
}

.grade-planilha .coluna-percentual {
  width: 6.5rem;
}

/* Espaco liberado para o bloco de permissoes: o nome trunca com reticencias
   em vez de esticar a coluna (o `title` no <td> mostra o nome inteiro).
   O limite vai no <span>, nao no <td>: com `table-layout: auto` o navegador
   trata `max-width` de celula como sugestao e estica a coluna assim mesmo. */
.grade-planilha .nome-usuario {
  display: inline-block;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Coluna "Acesso": interruptor + texto "Ativo/Inativo" (ver admin/usuarios.html) */
.grade-planilha .coluna-situacao {
  width: 1px;
  white-space: nowrap;
}

.grade-planilha td.coluna-marca,
.grade-planilha td.coluna-percentual,
.grade-planilha td.coluna-situacao {
  text-align: center;
}

/* Checkbox fino: o nativo em 13px fica na altura certa e mantem o
   comportamento de teclado (espaco marca/desmarca). */
.grade-planilha .marca-celula {
  width: 13px;
  height: 13px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--up-azul-royal);
}

/* Input numerico: alinhado a direita como todo numero da planilha, e sem as
   setas do navegador -- elas nao cabem em 20px e roubariam a largura do valor. */
.grade-planilha .numero-celula {
  text-align: right;
  padding: 0 4px;
  background-image: none;
  cursor: text;
}

.grade-planilha .numero-celula::-webkit-outer-spin-button,
.grade-planilha .numero-celula::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.grade-planilha .numero-celula {
  appearance: textfield;
}

/* Toggle da situacao: mesma peca do Painel Admin > Vendas (.chave-liga),
   reduzida pra caber na linha. Sobrescreve so as medidas. */
.grade-planilha .chave-celula {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: inherit;
}

.grade-planilha .chave-celula .chave-liga-trilho {
  width: 26px;
  height: 14px;
  margin-top: 0;
}

.grade-planilha .chave-celula .chave-liga-trilho::after {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
}

.grade-planilha .chave-celula .chave-liga-entrada:checked + .chave-liga-trilho::after {
  transform: translateX(12px);
}

/* Acesso na grade de Usuarios: verde = ativo, vermelho = inativo, no trilho e
   no texto ao lado. So aqui (`.chave-celula`): os toggles de regra do Painel
   Admin > Vendas seguem azul/cinza, porque la "desligado" nao e um alerta. */
.grade-planilha .chave-celula .chave-liga-trilho {
  background-color: #d63a3a;
}

.grade-planilha .chave-celula .chave-liga-entrada:checked + .chave-liga-trilho {
  background-color: #1e9e5a;
}

.grade-planilha .chave-celula .rotulo-situacao {
  /* largura de "Inativo": o interruptor nao dança ao trocar o texto */
  min-width: 3.4em;
  font-weight: 700;
  text-align: left;
  color: #c62828;
}

.grade-planilha .chave-celula .chave-liga-entrada:checked ~ .rotulo-situacao {
  color: #1b7f47;
}


/* Linha com alteracao ainda nao gravada: o mesmo azul da linha em edicao da
   grade de itens, pro operador enxergar o que o GRAVAR vai levar. */
.grade-planilha tbody tr.linha-alterada td {
  background-color: #eef6fd;
}

.grade-planilha tbody tr.linha-alterada .indice {
  background-color: #dceefb;
  color: var(--up-azul-royal);
}

/* Bloqueio de seguranca do ERP: so indicacao, nao e editavel aqui. */
.grade-planilha .marca-bloqueado {
  margin-left: 0.3rem;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #a3423a;
}

/* Marcador de administrador ao lado do nome: "(ADMIN)" em negrito, sem fundo
   nem pilula -- um retangulo colorido aqui quebraria a altura da linha.
   Sem margin-left: o espaco antes ja esta no proprio HTML. */
.grade-planilha .marca-admin {
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--up-texto-suave);
}

.grade-planilha .coluna-vendedor {
  width: 13rem;
}

/* --- Seletor de vendedor (Painel Admin > Usuarios) --------------------------
   O botao da celula herda o visual do `.campo-celula` (o <select> que ele
   substitui); o painel abre em `position: fixed` logo abaixo dele, com a
   pesquisa em cima e a lista rolando por dentro. */
.grade-planilha .vendedor-escolha {
  display: block;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-planilha .vendedor-escolha:disabled {
  cursor: default;
}

.seletor-vendedor {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--up-sombra-menu);
}

.seletor-vendedor[hidden] {
  display: none;
}

.seletor-vendedor .campo-pesquisa {
  flex: 0 0 auto;
  margin: 0.4rem;
  padding: 0.25rem 0.6rem;
}

.seletor-vendedor-lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 0.3rem;
  overflow-y: auto;
  list-style: none;
  font-size: 12.5px;
}

.seletor-vendedor-lista li {
  padding: 0.25rem 0.7rem;
  color: var(--up-texto);
  white-space: nowrap;
}

.seletor-vendedor-lista li.ativo {
  background-color: var(--up-primaria-fundo);
}

.seletor-vendedor-lista li[aria-selected="true"] {
  font-weight: 700;
  color: var(--up-azul-royal);
}

.seletor-vendedor-vazio {
  margin: 0;
  padding: 0.4rem 0.7rem 0.6rem;
  font-size: 12.5px;
  color: var(--up-texto-suave);
}

.seletor-vendedor-vazio[hidden] {
  display: none;
}

/* --- Seletor de pautas (Painel Admin > Usuarios) ----------------------------
   A coluna "Pautas de preco" era um <select> de escolha unica ate 23/09/2026.
   Hoje sao duas informacoes na mesma celula -- as pautas MARCADAS (as que o
   vendedor usa sem senha de supervisor) e a FAVORITA (estrela dourada, a que
   abre no pedido) --, e nenhum controle nativo mostra as duas. O botao da
   celula resume ("estrela + nome + 2 outras") e o painel abaixo dele, irmao do
   .seletor-vendedor, e onde se marca. */
.grade-planilha .pautas-escolha {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}

.grade-planilha .pautas-escolha:disabled {
  cursor: default;
}

/* o nome da pauta e a unica parte que pode encolher: a estrela e o "+2" sao
   curtos e nao podem sumir antes dele */
.grade-planilha .pautas-resumo {
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade-planilha .pautas-extra {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--up-texto-suave);
}

/* a estrela segue o texto pelo `currentColor` em todo lugar, MENOS aqui: e
   justamente a cor que diz qual e a favorita */
.pauta-favorita,
.pauta-estrela.favorita {
  color: var(--up-favorita);
}

.pauta-favorita {
  display: inline-flex;
  flex: 0 0 auto;
}

/* preenchida quando acesa: a silhueta cheia se le de relance numa grade de 13
   colunas, o contorno nao */
.pauta-favorita .icone,
.pauta-estrela.favorita .icone {
  fill: currentColor;
}

.seletor-pautas {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--up-sombra-menu);
}

.seletor-pautas[hidden] {
  display: none;
}

.seletor-pautas-titulo {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.4rem 0.7rem 0.3rem;
  border-bottom: 1px solid var(--up-borda-suave);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--up-azul-royal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seletor-pautas-lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0.2rem 0;
  overflow-y: auto;
  list-style: none;
  font-size: 12.5px;
}

.pauta-opcao {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem 0.2rem 0.7rem;
  color: var(--up-texto);
}

.pauta-opcao.marcada {
  background-color: var(--up-primaria-fundo);
}

/* o rotulo inteiro e area de clique do checkbox -- alvo maior numa lista
   densa, e o mesmo gesto das colunas de marca da grade */
.pauta-marca {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  cursor: pointer;
}

.pauta-marca span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pauta-inativa {
  font-size: 10.5px;
  font-style: normal;
  color: var(--up-texto-suave);
}

/* apagada ate ser acesa: contorno cinza, para o dourado da favorita ser a
   unica coisa colorida da lista */
.pauta-estrela {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.1rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--up-borda);
  cursor: pointer;
}

.pauta-estrela:hover {
  color: var(--up-favorita);
}

.pauta-estrela:focus-visible {
  outline: 2px solid var(--up-azul-royal);
  outline-offset: 1px;
}

/* Cadeado, ao lado da estrela (23/09/2026): ABERTO a pauta entra no pedido
   direto; FECHADO ela continua na lista do vendedor, mas so entra com a senha
   de um supervisor. Nasce apagado como a estrela -- a lista so ganha cor onde
   uma decisao foi tomada --, e acende no vermelho de restricao quando
   fechado. */
.pauta-cadeado {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.1rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--up-borda);
  cursor: pointer;
}

.pauta-cadeado:hover,
.pauta-cadeado.fechado {
  color: var(--up-restrito);
}

.pauta-cadeado:focus-visible {
  outline: 2px solid var(--up-azul-royal);
  outline-offset: 1px;
}

/* Pauta DESMARCADA: ela nao aparece para o vendedor, entao o nome sai riscado
   e apagado -- o risco e o sinal de "desativada" que o usuario pediu
   (23/09/2026). A estrela e o cadeado ficam desativados (o JS poe o
   `disabled`): nao ha favorita nem liberacao a definir numa pauta que ele nem
   ve. O caminho e marcar a pauta primeiro. */
.pauta-opcao.desmarcada .pauta-marca span {
  color: var(--up-texto-suave);
  text-decoration: line-through;
}

.pauta-opcao.desmarcada .pauta-estrela,
.pauta-opcao.desmarcada .pauta-cadeado {
  opacity: 0.4;
  cursor: default;
}

/* botao desativado nao responde ao mouse: o vermelho do hover confundiria */
.pauta-opcao.desmarcada .pauta-cadeado:hover {
  color: var(--up-borda);
}

/* Contagem de cadeados no resumo da celula ("🔒 2"): da para varrer a coluna
   e ver quem tem pauta pedindo supervisor sem abrir o painel. Curta e fixa,
   como o "+2" das marcadas. */
.grade-planilha .pautas-com-senha {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.1rem;
  font-size: 10px;
  color: var(--up-restrito);
}

.seletor-pautas-ajuda {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.35rem 0.7rem 0.5rem;
  border-top: 1px solid var(--up-borda-suave);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--up-texto-suave);
}

/* "so Next" na coluna Next ERP: inativo no Uniplus e ativo aqui. Mesmo
   desenho do "bloq." da coluna ao lado (texto miudo, sem pilula, para nao
   engordar a linha), mas na cor da marca: e uma excecao escolhida, nao um
   alerta. */
.grade-planilha .marca-so-next {
  margin-left: 0.3rem;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--up-primaria);
}

.grade-planilha .marca-so-next[hidden] {
  display: none;
}

/* --- Filtro por coluna (funil no titulo da grade) ---------------------------
   Pedido do cliente em 23/09/2026 para a grade de Usuarios: o autofiltro do
   Excel. O funil fica apagado ate a coluna ter filtro; filtrada, ele acende
   na cor da marca e fica PREENCHIDO -- numa fileira de 14 titulos, a silhueta
   cheia e o que se acha de relance. O painel e irmao do .seletor-pautas
   (fixed, abre embaixo do botao) -- ver js/filtro_colunas.js. */
.filtro-coluna-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--up-texto-suave);
  vertical-align: middle;
  cursor: pointer;
}

.filtro-coluna-botao:hover,
.filtro-coluna-botao[aria-expanded="true"] {
  border-color: var(--up-borda);
  background-color: #fff;
  color: var(--up-azul-royal);
}

.filtro-coluna-botao.ativo {
  border-color: var(--up-primaria);
  background-color: var(--up-primaria-fundo);
  color: var(--up-primaria);
}

.filtro-coluna-botao.ativo .icone {
  fill: currentColor;
}

.filtro-coluna {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--up-sombra-menu);
  font-size: 12px;
}

.filtro-coluna[hidden] {
  display: none;
}

.filtro-coluna-titulo {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.4rem 0.7rem 0.3rem;
  border-bottom: 1px solid var(--up-borda-suave);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--up-azul-royal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro-coluna .campo-pesquisa {
  flex: 0 0 auto;
  margin: 0.4rem 0.5rem 0.2rem;
  padding: 0.2rem 0.5rem;
}

.filtro-coluna .campo-pesquisa input {
  font-size: 12px;
}

/* "(Selecionar tudo)" e cada valor: checkbox, texto que trunca e, colada na
   direita, a quantidade de linhas -- o resumo da coluna */
.filtro-coluna-todos,
.filtro-coluna-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.2rem 0.7rem;
  color: var(--up-texto);
  cursor: pointer;
}

.filtro-coluna-todos {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--up-borda-suave);
  font-weight: 700;
}

.filtro-coluna-item:hover,
.filtro-coluna-todos:hover {
  background-color: var(--up-primaria-fundo);
}

.filtro-coluna-todos input,
.filtro-coluna-item input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--up-azul-royal);
}

.filtro-coluna-valor {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro-coluna-qtd {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--up-texto-suave);
}

.filtro-coluna-lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0.15rem 0;
  overflow-y: auto;
  list-style: none;
}

.filtro-coluna-vazio {
  margin: 0;
  padding: 0.4rem 0.7rem;
  color: var(--up-texto-suave);
}

.filtro-coluna-vazio[hidden] {
  display: none;
}

/* botoes de tela (.botao-acao) encolhidos: o painel tem 250px e os dois
   precisam caber lado a lado sem quebrar o texto */
.filtro-coluna-acoes {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--up-borda-suave);
}

.filtro-coluna-acoes .botao-acao {
  padding: 0.25rem 0.65rem;
  font-size: 11px;
}

/* "Limpar filtros" na barra da grade: so aparece com algum funil aceso. Cara
   de link, e nao de botao cheio -- e um atalho, nao uma acao da tela. */
.limpar-filtros {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.3rem;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--up-primaria);
  cursor: pointer;
}

.limpar-filtros:hover {
  text-decoration: underline;
}

.limpar-filtros[hidden] {
  display: none;
}

/* --- Grade AG Grid --------------------------------------------------------- */
/* A listagem de pedidos usa AG Grid; o resto do sistema segue com .grade.
   Aqui o tema alpine e calibrado com os mesmos tokens do ERP. */

/* painel em coluna: a grade ocupa a altura que sobra e rola por dentro */
.painel.painel-coluna {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* o rodape da grade (engrenagem, exportar, "X de Y") ja e a ultima linha:
     o respiro cheio de baixo do .painel so engordava a faixa */
  padding-bottom: 0.45rem;
}

.grade-ag {
  flex: 1 1 auto;
  min-height: 12rem;
  width: 100%;

  /* A grade nasce invisivel e `.pronta` a revela em onFirstDataRendered (ver
     revelarQuandoPronta em grade_ferramentas.js). Entre createGrid() e o
     primeiro bloco de linhas o AG Grid pinta com a largura/ordem PADRAO das
     colunas e so entao aplica o estado salvo: as colunas andam na frente do
     usuario. No MPA o branco do reload escondia isso; com a injecao do
     router.js a casca nao pisca mais e o salto ficou evidente.

     `opacity`, e nao `display:none`/`visibility:hidden`: o AG Grid precisa
     medir o container para calcular a coluna `flex: 1`, e escondido de
     verdade ele mede zero. A classe entra por JS -- se o script nao rodar, o
     temporizador de seguranca de grade_ferramentas.js revela assim mesmo. */
  opacity: 0;
}

.grade-ag.pronta {
  opacity: 1;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .grade-ag.pronta {
    transition: none;
  }
}

/* Densidade: as listagens seguem a mesma regua da grade de itens do
   Pedido/Orcamento (.grade-planilha) -- fonte 11.5px e 6px de padding lateral
   na celula. O que NAO da para trazer de la e a altura da linha: no AG Grid ela
   e opcao de JS (`rowHeight`/`headerHeight`, aplicada como estilo inline em
   cada linha), nao CSS -- ver os tres *_grade.js. */
.grade-ag.ag-theme-alpine {
  --ag-font-family: var(--up-fonte);
  --ag-font-size: 11.5px;
  --ag-foreground-color: var(--up-texto);
  --ag-background-color: #fff;
  --ag-border-color: var(--up-borda);
  --ag-wrapper-border-radius: 4px;
  --ag-borders: solid 1px;

  --ag-header-background-color: #f2f5f7;
  --ag-header-foreground-color: var(--up-texto);
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-color: var(--up-borda);
  --ag-header-column-separator-height: 100%;
  --ag-header-column-separator-width: 1px;

  --ag-row-border-color: var(--up-borda-suave);
  --ag-cell-horizontal-border: solid var(--up-borda-suave);
  /* 6px = o mesmo padding lateral de `.grade-planilha td` */
  --ag-cell-horizontal-padding: 6px;
  --ag-row-hover-color: var(--up-primaria-fundo);
  --ag-selected-row-background-color: #dceefb;

  --ag-checkbox-checked-color: var(--up-azul-royal);
  --ag-input-focus-border-color: var(--up-azul-sky);
  --ag-range-selection-border-color: transparent;
}

.grade-ag .ag-header-cell-text {
  font-weight: 700;
}

/* nome da coluna sempre a esquerda, mesmo nas colunas numericas */
.grade-ag .ag-header-cell-label {
  justify-content: flex-start;
}

/* Setinha normal em toda a grade, e nao a mao. Duas fontes de mao aqui:

   1. a LINHA, que era `pointer` nesta regra por ser clicavel (duplo clique
      abre o registro);
   2. o CABECALHO de cada coluna -- o AG Grid poe `pointer` em
      `.ag-header-cell-sortable .ag-header-cell-label`, e como o defaultColDef
      declara `sortable: true`, isso vale para TODAS as colunas.

   O seletor do cabecalho aqui fica em 0,3,0 contra os 0,2,0 do AG Grid, entao
   ganha por especificidade -- o que importa porque o AG Grid injeta as folhas
   dele em <style> no runtime, DEPOIS do app.css, e um empate se resolveria a
   favor dele. Clicar e ordenar continuam funcionando; muda so o ponteiro. */
.grade-ag .ag-row {
  cursor: default;
}

.grade-ag .ag-header-cell-sortable .ag-header-cell-label {
  cursor: default;
}

/* O tema alpine define `.ag-theme-alpine .ag-row { font-size: calc(var
   (--ag-font-size) + 1px) }` -- a linha sai 1px MAIOR que o resto da grade.
   Aqui o tamanho e cravado para bater com `.grade-planilha` (11.5px), em vez de
   compensar o +1 no token, o que deixaria o valor do token mentindo sobre o
   tamanho real.

   As DUAS classes no mesmo elemento nao sao enfeite. O AG Grid injeta as
   folhas dele em <style> no runtime, DEPOIS do app.css, entao `.grade-ag
   .ag-row` empataria em especificidade com o seletor do tema (as duas em
   0,2,0) e perderia o desempate por ordem no documento. `.grade-ag
   .ag-theme-alpine` no mesmo elemento sobe para 0,3,0 e resolve. */
.grade-ag.ag-theme-alpine .ag-row {
  font-size: 11.5px;
}

/* A etiqueta de status e `inline-block`: a altura dela sai da line-height
   herdada da celula, que o AG Grid calcula a partir da altura da linha. Sem um
   valor proprio ela pedia 25px dentro de uma linha de 22 e ficava cortada. */
.grade-ag .etiqueta-status {
  padding-block: 0;
  line-height: 15px;
}

.grade-ag .celula-destaque {
  color: var(--up-azul-royal);
}

/* coluna fixa da esquerda: caixa de marcar (e o sigma no rodape) */
.grade-ag .celula-escolha {
  padding-inline: 0;
  text-align: center;
}

.grade-ag .celula-escolha .ag-selection-checkbox {
  justify-content: center;
  width: 100%;
  margin-right: 0;
}

/* rodape fixo do somatorio */
.grade-ag .ag-floating-bottom {
  border-top: 1px solid var(--up-borda);
  font-weight: 700;
}

.grade-ag .ag-floating-bottom .ag-row {
  background-color: #f2f5f7;
  cursor: default;
}

.grade-ag .soma {
  font-weight: 700;
  color: var(--up-cinza-chumbo);
}

/* ==========================================================================
   Ferramentas da grade: rodape (configuracao de colunas / exportacao) e os
   dois modais Bootstrap correspondentes -- ver partials/grade_ferramentas.html
   ========================================================================== */

.grade-rodape-ferramentas {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.1rem 0;
}

/* botoes compactos (22px), na altura da linha da grade */
.botao-ferramenta-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--up-azul);
  color: #fff;
}

.botao-ferramenta-grade:hover,
.botao-ferramenta-grade:focus-visible {
  background-color: var(--up-azul-royal);
}

/* "X de Y" encostado na direita da barra, como no ERP */
.contador-registros {
  margin-left: auto;
  padding-right: 0.2rem;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--up-texto);
}

/* --- Modal: exportacao --------------------------------------------------- */

.grupo-opcoes-exportar {
  margin-bottom: 1.1rem;
}

.grupo-opcoes-exportar:last-child {
  margin-bottom: 0;
}

.titulo-opcoes-exportar {
  margin: 0 0 0.5rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--up-azul-royal);
}

.botoes-opcoes-exportar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.botao-opcao-exportar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 5.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--up-borda);
  border-radius: 6px;
  background-color: #fff;
  color: var(--up-texto-suave);
  font-size: 12px;
  font-weight: 600;
  user-select: none;
}

.botao-opcao-exportar:hover {
  border-color: var(--up-azul-sky);
}

.btn-check:checked + .botao-opcao-exportar {
  border-color: #55a459;
  background-color: #eef8ef;
  color: var(--up-texto);
}

.btn-check:focus-visible + .botao-opcao-exportar {
  outline: 2px solid var(--up-azul-sky);
  outline-offset: 1px;
}

/* --- Modal: configuracao de colunas --------------------------------------- */

.colunas-duas-listas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 767px) {
  .colunas-duas-listas {
    grid-template-columns: 1fr;
  }
}

.titulo-lista-colunas {
  margin: 0 0 0.5rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--up-azul-sky);
}

.titulo-lista-colunas small {
  font-weight: 400;
  color: var(--up-texto-suave);
}

/* Campos e linhas deste modal nas medidas densas da casa (as do
   Pedido/Orcamento e da `.grade-planilha`): texto 11.5px, linha de ~21px e
   campo com 2px de padding vertical. */
.campo-pesquisa-colunas {
  margin-bottom: 0.5rem;
  padding: 2px 0.6rem;
  border-radius: 3px;
}

.campo-pesquisa-colunas input {
  padding: 0;
  font-size: 11.5px;
  line-height: 1.35;
}

.lista-colunas {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
}

.lista-colunas li {
  padding: 2px 0.6rem;
  font-size: 11.5px;
  line-height: 16px;
  border-bottom: 1px solid var(--up-borda-suave);
}

.lista-colunas li:hover {
  background-color: var(--up-cinza-frio);
}

.tabela-colunas-configuradas {
  width: 100%;
  height: 16rem;
  display: block;
  overflow-y: auto;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  border-collapse: collapse;
  font-size: 11.5px;
}

.tabela-colunas-configuradas thead,
.tabela-colunas-configuradas tbody {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.tabela-colunas-configuradas th {
  padding: 3px 0.6rem;
  text-align: left;
  font-size: 10.5px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--up-texto-suave);
  border-bottom: 1px solid var(--up-borda);
}

.tabela-colunas-configuradas th:last-child,
.tabela-colunas-configuradas td:last-child {
  text-align: center;
  width: 40%;
}

.tabela-colunas-configuradas td {
  padding: 2px 0.6rem;
  line-height: 16px;
  border-bottom: 1px solid var(--up-borda-suave);
}

/* o checkbox nativo tem margem e 13px+ de altura: sem zerar, e ele que
   manda na altura da linha, nao o texto */
.tabela-colunas-configuradas td input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--up-azul-royal);
}

.tabela-colunas-configuradas tr.selecionada td {
  background-color: #e7f0fb;
}

.botoes-mover-colunas {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.bloco-nova-visao {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--up-borda-suave);
}

.titulo-nova-visao {
  margin: 0 0 0.5rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--up-azul-sky);
}

.descricao-nova-visao {
  margin-top: 0.5rem;
  width: 100%;
  max-width: 24rem;
  padding: 2px 4px;
  border: 1px solid var(--up-borda);
  border-radius: 3px;
  font-family: var(--up-fonte);
  font-size: 11.5px;
  line-height: 1.35;
}

.descricao-nova-visao:disabled {
  background-color: var(--up-cinza-frio);
}

/* Fora da grade densa (ex.: "atualizar lista" no Painel Admin > Geral) o
   botao continua com area de toque confortavel. */
.botao-icone-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid transparent;
}

.botao-editar-item {
  border-color: var(--up-borda);
  background-color: #fff;
  color: var(--up-texto-suave);
}

.botao-editar-item:hover,
.botao-editar-item:focus-visible {
  background-color: var(--up-cinza-frio);
  color: var(--up-texto);
}

/* Excluir item da grade. Vermelho do .btn-danger da folha original do ERP. */
.botao-excluir-item {
  border-color: #990b24;
  background-color: #d70a23;
  color: #fff;
}

.botao-excluir-item:hover,
.botao-excluir-item:focus-visible {
  background-color: #b40a1e;
}

.botao-icone-item:disabled {
  opacity: 0.55;
}

/* Linha cujo item esta carregado no bloco "Incluir item" para edicao --
   mesmo azul usado em `.grade.selecionavel tbody tr.selecionada` (abaixo),
   pra reaproveitar o mesmo sinal visual de "este e o registro corrente". */
.grade-planilha tbody tr.linha-em-edicao td {
  background-color: #dceefb;
}

/* ==========================================================================
   Formulario com abas internas
   ========================================================================== */

.abas-internas {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--up-borda);
  margin-bottom: 1.1rem;
  overflow-x: auto;
}

.aba-interna {
  padding: 0.6rem 1.5rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: var(--up-fonte);
  font-size: 13px;
  font-weight: 600;
  color: var(--up-texto-suave);
  white-space: nowrap;
}

.aba-interna:hover {
  color: var(--up-texto);
}

.aba-interna.ativa {
  color: var(--up-azul-royal);
  border-bottom-color: var(--up-azul-sky);
}

.aba-interna:disabled {
  color: var(--up-borda);
  cursor: not-allowed;
}

.painel-aba {
  display: none;
}

.painel-aba.ativa {
  display: block;
}

.bloco-titulo {
  margin: 0 0 0.6rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--up-azul-sky);
}

/* Titulo "Itens" com o "Copiar Pedido" ao lado (Pedido/Orcamento) */
.itens-topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

/* "Itens" e o titulo do cartao (`.titulo-bloco-nf`); `.bloco-titulo` ficou
   para as outras telas que usam a mesma faixa */
.itens-topo .bloco-titulo,
.itens-topo .titulo-bloco-nf {
  margin: 0;
}

/* discreto: mesmo verde do Gravar, mas na altura de uma linha de texto */
.botao-copiar-itens {
  height: 20px;
  padding: 0 0.55rem;
  gap: 0.3rem;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.botao-copiar-itens:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Plano B do "Copiar Pedido": a imagem gerada, para copiar pelo botao direito */
.dialogo-imagem {
  width: min(64rem, calc(100vw - 3rem));
}

.imagem-instrucao {
  margin: 0;
  padding: 0.8rem 1.25rem 0;
  font-size: 13px;
}

.imagem-moldura {
  max-height: calc(100vh - 16rem);
  margin: 0.8rem 1.25rem 0;
  overflow: auto;
  border: 1px solid var(--up-borda-suave);
}

/* tamanho real (a imagem sai em 2x), sem esticar */
.imagem-moldura img {
  display: block;
  max-width: 100%;
}

.bloco-campos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.85rem 1rem;
  padding: 1rem;
  border: 1px solid var(--up-borda-suave);
  border-radius: 4px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  grid-column: span 12;
}

.campo label {
  font-size: 12px;
  font-weight: 600;
  color: var(--up-texto-suave);
}

.campo .obrigatorio {
  color: #ff8b15;
}

/* Campo exigido pelo Painel Admin > Campos obrigatorios: mesmo asterisco do
   `.obrigatorio`, mas por ::after -- o rotulo pode ter o texto reescrito pelo
   JS da tela (CNPJ/CPF no Cliente). Ver static/js/campos_obrigatorios.js. */
.campo label.rotulo-obrigatorio::after {
  content: " *";
  color: #ff8b15;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  font-family: var(--up-fonte);
  font-size: 13px;
  color: var(--up-texto);
  background-color: #fff;
}

.campo textarea {
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 0;
  border-color: var(--up-azul-sky);
  box-shadow: 0 0 0 0.15rem rgba(54, 169, 225, 0.2);
}

.campo input:disabled {
  background-color: var(--up-cinza-frio);
  color: var(--up-texto-suave);
}

/* "Preço mínimo" do Incluir item (regra "Respeitar preço mínimo por pauta"):
   so leitura, mas em verde pastel -- e uma informacao para o vendedor, nao um
   campo apagado. Ver venda_documento_form.html. */
.campo input.campo-preco-minimo:disabled {
  background-color: #e6f4ea;
  border-color: #b7dfc2;
  color: #1e6b3a;
  font-weight: 600;
}

/* Caixa de marcar dentro de um .campo (ex.: "Aprovado" no Orcamento): precisa
   escapar do width:100% que vale para os campos de digitacao. */
.campo input.campo-marca {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  margin-top: 0.15rem;
  accent-color: var(--up-azul-royal);
}

.campo-botoes {
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5rem;
}

/* --- Pedido de Venda / Orcamento: layout mais denso -------------------------
   Igual ao "Incluir item" do ERP de referencia: campos com fonte menor e
   menos padding, pra sobrar mais altura de tela pros itens lancados. Escopado
   a #formDocumento (o <form> desta tela) para nao encolher Clientes/Produtos
   nem o dialogo de pesquisa de produto, que ficam com o padrao normal. */
/* Abas Geral/Itens no mesmo desenho do Pedido de Faturamento: fonte de 13px e
   a mesma altura. La as sete abas se esticam (`flex: 1 1 0`); aqui sao duas, e
   esticadas virariam dois botoes enormes -- entao ficam na largura do texto,
   encostadas na esquerda, com mais recuo lateral para nao ficarem estreitas. */
#formDocumento .abas-internas {
  margin-bottom: 0.6rem;
}

#formDocumento .aba-interna {
  padding: 0.45rem 1.4rem;
  font-size: 13px;
}

#formDocumento .bloco-titulo {
  margin-bottom: 0.4rem;
  font-size: 12px;
  font-weight: 600;
}

/* Cartao branco com sombra, como os do Pedido de Faturamento, no lugar da
   moldura de traco fino. `.bloco-sem-moldura` e o bloco que ja mora DENTRO de
   um cartao (`.bloco-nf`): la a sombra seria sombra sobre sombra. */
#formDocumento .bloco-campos {
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  border: 0;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 6, 12, 0.12);
}

#formDocumento .bloco-campos.bloco-sem-moldura {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

#formDocumento .campo {
  gap: 0.05rem;
}

#formDocumento .campo label {
  font-size: 10.5px;
  line-height: 1.25;
}

/* Campos sem cara de "caixa grande": a altura vem do padding, entao cortar o
   padding vertical e o que realmente devolve linhas de item na tela. */
#formDocumento .campo input,
#formDocumento .campo select,
#formDocumento .campo textarea,
#formDocumento .busca-item,
#formDocumento .busca-vazio {
  padding: 2px 4px;
  font-size: 11.5px;
  line-height: 1.35;
  border-radius: 3px;
}

/* A observacao e o unico campo alto do formulario: `min-height` (e nao
   `height`) para o `resize: vertical` de `.campo textarea` continuar valendo
   -- o operador pode esticar quando a observacao e longa, mas nunca encolher
   abaixo dos 80px. O `rows="3"` no HTML e so a rede para quando esta folha
   nao carrega. */
#formDocumento #observacao {
  min-height: 80px;
}

/* o checkbox "Aprovado" nao acompanha o encolhimento do texto */
#formDocumento .campo .campo-marca {
  width: 14px;
  height: 14px;
  padding: 0;
}

/* Botoes da linha de inclusao na altura EXATA dos campos ao lado.
   As metricas sao copiadas do input de proposito -- mesma fonte, mesma
   line-height, mesmo padding vertical e mesma borda de 1px. Foi assim que a
   diferenca de 5px (botao 29px x campo 24px) sumiu, sem cravar um `height`
   fixo que descasaria de novo no proximo ajuste de fonte. */
#formDocumento .campo-botoes .botao-acao {
  padding: 2px 10px;
  font-size: 11.5px;
  line-height: 1.35;
  border-width: 1px;
}

/* --- Cadastros de Cliente, Produto e Vendedor: mesma altura de campo -------
   Os campos seguem as medidas do Pedido/Orcamento (acima), que viraram o
   padrao da casa: rotulo 10.5px, campo com 2px de padding e fonte 11.5px.
   Checkbox e radio ficam de fora -- o `.interruptor` (Ativo) e o
   `.campo-marcavel` tem desenho proprio e quebrariam com padding de campo.
   A edicao rapida do cliente (#formEditarCliente, no Pedido/Orcamento)
   segue o mesmo padrao. Cadastro novo entra nas TRES listas deste bloco e nas duas do rodape
   (`.painel-documento`, mais abaixo). */
#formCliente .campo,
#formProduto .campo,
#formVendedor .campo,
#formEditarCliente .campo,
#formMinhaSenha .campo {
  gap: 0.05rem;
}

#formCliente .campo label,
#formProduto .campo label,
#formVendedor .campo label,
#formEditarCliente .campo label,
#formMinhaSenha .campo label {
  font-size: 10.5px;
  line-height: 1.25;
}

#formEditarCliente .campo input:not([type="checkbox"]):not([type="radio"]),
#formEditarCliente .campo select,
#formEditarCliente .busca-item,
#formEditarCliente .busca-vazio,
#formCliente .campo input:not([type="checkbox"]):not([type="radio"]),
#formCliente .campo select,
#formCliente .campo textarea,
#formCliente .busca-item,
#formCliente .busca-vazio,
#formVendedor .campo input:not([type="checkbox"]):not([type="radio"]),
#formMinhaSenha .campo input,
#formProduto .campo input:not([type="checkbox"]):not([type="radio"]),
#formProduto .campo select,
#formProduto .campo textarea,
#formProduto .busca-item,
#formProduto .busca-vazio {
  padding: 2px 4px;
  font-size: 11.5px;
  line-height: 1.35;
  border-radius: 3px;
}

/* CEP consultando a tabela de CEPs: moldura azul pulsando enquanto a resposta
   nao chega -- a consulta e rapida, mas o operador ve que algo esta vindo */
#formCliente #cep.carregando-cep {
  border-color: var(--up-azul-sky);
  animation: up-cep-pulso 0.8s ease-in-out infinite alternate;
}

@keyframes up-cep-pulso {
  from { box-shadow: 0 0 0 0 rgba(54, 169, 225, 0.35); }
  to { box-shadow: 0 0 0 3px rgba(54, 169, 225, 0.15); }
}

/* "OK / Limpar" da classificacao do produto na altura dos campos ao lado */
#formProduto .campo-botoes .botao-acao {
  padding: 2px 10px;
  font-size: 11.5px;
  line-height: 1.35;
  border-width: 1px;
}


@media (min-width: 768px) {
  .campo-1 { grid-column: span 1; }
  .campo-2 { grid-column: span 2; }
  .campo-3 { grid-column: span 3; }
  .campo-4 { grid-column: span 4; }
  .campo-12 { grid-column: span 12; }
}

/* --- Busca com sugestoes --------------------------------------------------- */

.busca {
  position: relative;
}

.busca-resultados {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1040;
  max-height: 15rem;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  box-shadow: var(--up-sombra-menu);
}

.busca-resultados[hidden] {
  display: none;
}

.busca-item,
.busca-vazio {
  padding: 0.4rem 0.6rem;
  font-size: 13px;
}

.busca-item {
  color: var(--up-azul-royal);
}

/* .ativo = linha realcada pelas setas do teclado -- mesmo destaque do mouse,
   para quem lanca item sem tirar as maos do teclado ver onde esta */
.busca-item:hover,
.busca-item.ativo {
  background-color: var(--up-primaria-fundo);
  color: var(--up-primaria-escuro);
}

.busca-vazio {
  color: var(--up-texto-suave);
}

/* --- Lista de opcoes dos <select> (js/selecao.js) -------------------------
   Substitui a lista nativa, que o Windows desenha fora da pagina e vaza da
   janela. Mesmo desenho das sugestoes de busca (.busca-resultados). A posicao
   e o tamanho vem do JS, medidos contra a janela; a fonte, do proprio campo. */
.lista-selecao {
  z-index: 2000;
  margin: 0;
  padding: 2px 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  box-shadow: var(--up-sombra-menu);
  color: var(--up-texto, #212529);
}

.lista-selecao-item {
  padding: 3px 8px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a opcao que esta no campo agora */
.lista-selecao-item.selecionado {
  font-weight: 700;
}

/* realce do mouse / das setas -- mesmo da busca com sugestoes */
.lista-selecao-item.ativo {
  background-color: var(--up-primaria-fundo);
  color: var(--up-primaria-escuro);
}

.lista-selecao-item.desabilitado {
  color: var(--up-texto-suave);
  cursor: default;
}

/* --- Sugestoes em grade de planilha (produto nos itens, cliente na Geral) --
   Mesmo desenho da `.grade-planilha` de itens logo abaixo: cabecalho em
   degrade cinza, linhas de grade e fonte densa. Mais larga que o campo (que e
   estreito) para caber codigo, nome e preco lado a lado. */
.busca-resultados.busca-grade {
  right: auto;
  width: max(100%, 38rem);
  max-width: calc(100vw - 2rem);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  /* as setas rolam a linha realcada para a vista (scrollIntoView): sem isto
     ela pararia escondida atras do cabecalho fixo */
  scroll-padding-top: 1.6rem;
}

.busca-grade .busca-cabecalho,
#formDocumento .busca-grade .busca-item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 8.5rem;
  padding: 0;
  border-radius: 0;
}

/* cliente: so codigo e nome -- sem a coluna de preco, o nome fica com o resto */
[data-busca="clientes"] .busca-grade .busca-cabecalho,
#formDocumento [data-busca="clientes"] .busca-grade .busca-item {
  grid-template-columns: 6.5rem minmax(0, 1fr);
}

.busca-grade .busca-cabecalho {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f5f5f5;
  background-image: linear-gradient(#fdfdfd, #f1f2f4);
  font-size: 11.5px;
  font-weight: 700;
  color: #2c3e50;
}

.busca-grade .busca-cabecalho span {
  padding: 3px 6px;
  border-bottom: 1px solid #c9ced3;
  border-right: 1px solid #dfe3e6;
}

.busca-grade .busca-item span {
  padding: 2px 6px;
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.busca-grade .busca-cabecalho span:last-child,
.busca-grade .busca-item span:last-child {
  border-right: 0;
}

.busca-grade .num {
  text-align: right;
}

.aviso-itens {
  margin: 0.6rem 0 0;
  font-size: 12px;
  color: var(--up-texto-suave);
}

.aviso-itens[hidden] {
  display: none;
}

/* --- Rodape do formulario -------------------------------------------------- */

.rodape-formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1rem 2rem;
  border-top: 1px solid var(--up-borda-suave);

  /* Fixo no fundo da area de rolagem: `.painel` e quem rola (overflow-y:
     auto, ver acima), entao "sticky" gruda no fundo DELE, nao da janela --
     o usuario grava/cancela sem descer ate o fim do formulario. As margens
     negativas cancelam o padding do `.painel` para o rodape encostar nas
     bordas; o `padding` repoe o respiro visual por dentro. */
  position: sticky;
  bottom: -1.25rem;
  z-index: 3;
  margin: 1.25rem -1.5rem -1.25rem;
  padding: 1rem 1.5rem;
  background-color: #fff;
  box-shadow: var(--up-sombra-card);
}

.totais {
  display: flex;
  gap: 2rem;
  margin-right: auto;
}

.total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.total-rotulo {
  font-size: 11px;
  color: var(--up-texto-suave);
}

.total-valor {
  font-size: 17px;
  color: var(--up-texto);
}

.total-valor.destaque {
  color: var(--up-azul-royal);
}

.acoes-formulario {
  display: flex;
  gap: 0.5rem;
}

/* --- Rodape da tela de Pedido/Orcamento ------------------------------------
   Aqui o rodape precisa ficar na BASE do card sempre, nao so quando ha
   rolagem. `position: sticky` sozinho nao resolve isso: sticky gruda enquanto
   se rola, mas com a aba ativa curta (a Geral, com poucos campos) o conteudo
   acaba no meio da tela e o rodape acaba junto, deixando uma faixa branca
   embaixo.

   A cola e a mesma do Painel Admin: uma CADEIA FLEX com altura definida
   (.app-uniplus 100vh -> .painel flex:1 -> formulario) e `margin-top: auto` no
   rodape, que empurra ele para a base da coluna. O sticky continua valendo
   para o caso oposto (muitos itens): ai o rodape gruda no fundo da area
   rolavel em vez de sumir la embaixo. */

.painel-documento {
  display: flex;
  flex-direction: column;
  /* quem encosta na base do card agora e o rodape, nao o padding do card */
  padding-bottom: 0;
}

#formDocumento,
#formCliente,
#formProduto,
#formVendedor {
  display: flex;
  flex-direction: column;
  /* cresce ate o fundo do card, mas NUNCA encolhe abaixo do proprio conteudo
     (flex-shrink 0) -- com muitos itens quem rola e o card, como antes */
  flex: 1 0 auto;
}

/* O Importar XML e o contrario dos formularios acima: nao tem campos que
   crescem, tem UMA grade que precisa de toda a altura do card (`1 1 auto` +
   `min-height: 0`, para poder encolher e rolar por dentro). */
#importacaoXml {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* --- Aba Itens: grade com cabecalho fixo e rolagem interna ----------------
   Com a aba Itens aberta, o formulario deixa de crescer com o conteudo e fica
   do tamanho exato do card (flex 1 1 auto + min-height 0). A aba pega a altura
   que sobra entre as abas e o rodape, e dentro dela a grade (`.rolagem-interna`,
   regra do Painel Admin) fica com o resto: "Incluir item" e rodape parados, so
   as linhas rolam.

   `:has()` escopa isso a aba Itens. A Geral continua como era -- o card rola
   inteiro se ela nao couber -- e o dropdown da busca de cliente nao corre
   risco de ser cortado por um overflow.

   Sem overflow na aba de proposito: a lista de sugestoes do produto
   (`.busca-resultados`, absolute) passa por cima da grade e seria cortada. Numa
   janela baixa demais, o `min-height` da grade faz o card rolar, como antes. */
#formDocumento:has(#painelItens.ativa) {
  flex: 1 1 auto;
  min-height: 0;
}

#formDocumento #painelItens.ativa {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#formDocumento #envolucroItens {
  min-height: 6rem;
}

/* Com muitos itens, quem cede espaco e SO a grade (que rola por dentro).
   A barra das abas internas tem `overflow-x: auto`, e num flex em coluna isso
   zera o tamanho minimo dela: sem o `flex-shrink: 0` ela era espremida ate
   sumir ("Geral"/"Itens" cortados). O mesmo vale para o resto da aba Itens
   -- "Incluir item", campos, barra do "Copiar" e aviso ficam com a altura
   deles. */
#formDocumento > .abas-internas,
#formDocumento #painelItens.ativa > * {
  flex-shrink: 0;
}

/* A grade fica DENTRO do cartao "Itens", entao quem toma a altura que sobra e
   o cartao; dentro dele, so a grade cede (o titulo e a barra de botoes ficam
   com a altura deles). Mesma cadeia ja usada no Pedido de Faturamento. */
#formDocumento #painelItens.ativa > #cartaoItens {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* `:not(.rolagem-interna)` NAO e detalhe: era `> *` e isso incluia a propria
   grade. Um seletor com 2 ids vence o `flex: 1 1 auto` de
   `.grade-envolucro.rolagem-interna` (2 classes), entao o envolucro ficava com
   `flex-shrink: 0` e nunca encolhia: ele crescia com os itens, o cartao
   estourava e quem rolava era o CARD inteiro -- a pagina andava junto e a
   rolagem de dentro nunca aparecia. Excluindo a grade, ela volta a ser a unica
   que cede altura, como o Painel Admin ja fazia em
   `.admin-corpo-rolavel > :not(.rolagem-interna)`. */
#formDocumento #cartaoItens > :not(.rolagem-interna) {
  flex-shrink: 0;
}

#formDocumento .rodape-formulario,
#formCliente .rodape-formulario,
#formProduto .rodape-formulario,
#formVendedor .rodape-formulario,
#importacaoXml .rodape-formulario {
  /* topo auto = cola na base; laterais negativas = alcanca as bordas do card,
     passando por cima do padding dele. A margem inferior e 0 (e nao -1.25rem,
     como na regra geral) porque `.painel-documento` ja zerou o padding de
     baixo: nao sobrou nada para cancelar. */
  margin: auto -1.5rem 0;
  bottom: 0;
}

/* Duas FAIXAS empilhadas, as duas encostadas na direita: totais em cima,
   botoes embaixo. A regra geral poe tudo na mesma linha (totais na esquerda,
   via `margin-right: auto` em `.totais`); aqui a coluna e o que reproduz a
   barra do ERP. */
/* Uma linha so. Era `flex-direction: column`, e por isso desconto, totais e
   botoes saiam empilhados e o rodape ficava alto. Agora:
   `.footer-start` (desconto) a esquerda | `.footer-end` (totais + acoes) a
   direita, empurrados pelo space-between. O `nowrap` cancela o `flex-wrap:
   wrap` da regra geral -- sem ele os botoes caem para a linha de baixo assim
   que a janela aperta, que e justamente o que queremos evitar. */
.rodape-documento {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 1.5rem;
}

/* Pauta de preco e desconto do subtotal lado a lado; o `gap` e o respiro
   entre os dois campos. */
.rodape-documento .footer-start {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

/* O rotulo sai de cima e vai para o lado do input: e o que tira uma linha
   inteira da altura do rodape. A espessura do input NAO e tocada aqui -- ela
   continua vindo de `#formDocumento .campo input`. */
/* `#formDocumento` no seletor: sem ele vence `#formDocumento .campo`
   (gap: 0.05rem) e rotulo e input ficam colados, apesar do 0.75rem daqui. */
#formDocumento .rodape-documento .footer-start .campo {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

/* Rotulos do rodape (Pauta de preco, Desc. Subtotal, Total geral) com a mesma
   cara: preto, negrito, 14px. O `#formDocumento` no seletor e necessario para
   vencer `#formDocumento .campo label`, que encolhe os rotulos a 10.5px. */
#formDocumento .rodape-documento .footer-start .campo label,
.rodape-documento .total-rotulo {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

/* `.campo input` e width:100%; aqui ele precisa de largura propria, senao
   estica e empurra os totais. */
.rodape-documento .footer-start .campo input {
  width: 3.5rem;
}

.rodape-documento .footer-start .campo select {
  width: 10rem;
}

/* Pauta trocada pelo Tab (23/09/2026): o cursor continua no item em
   digitacao, entao e esta piscada que conta ao operador -- que esta olhando
   para o campo do produto, no alto -- que a pauta mudou. Antes o Tab levava o
   foco ate aqui, e o proprio foco era o sinal.
   Azul da marca, e nao o amarelo do `.admin-destaque`: la algo foi ENCONTRADO
   e pede conferencia; aqui e a confirmacao de uma acao que o operador acabou
   de fazer. `inset` de proposito: o rodape e uma linha so e um anel por fora
   encostaria nos campos vizinhos. */
.rodape-documento .footer-start .campo select.pauta-trocada {
  animation: pauta-trocada 1.4s ease-out;
}

@keyframes pauta-trocada {
  0%, 30% {
    background-color: var(--up-primaria-fundo);
    box-shadow: inset 0 0 0 2px var(--up-primaria);
  }
  100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rodape-documento .footer-start .campo select.pauta-trocada {
    animation: none;
    background-color: var(--up-primaria-fundo);
  }
}

.rodape-documento .footer-end {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* o `margin-right: auto` da regra geral e o que jogaria os totais para a
   esquerda -- sem ele o bloco encosta na direita, sobre os botoes */
.rodape-documento .totais {
  margin-right: 0;
  gap: 2.5rem;
}

/* Rotulo ao lado do valor, e nao acima. `.total` e coluna na regra geral, e
   com o rodape em linha unica essas duas linhas eram o que ainda sobrava de
   altura. `baseline` alinha o texto pequeno do rotulo pela base do numero
   grande. Escopado ao rodape do documento: as outras telas que usam `.totais`
   seguem empilhadas. */
.rodape-documento .total {
  flex-direction: row;
  align-items: baseline;
  /* mesmo respiro entre rotulo e valor dos campos de `.footer-start` */
  gap: 0.75rem;
  white-space: nowrap;
}

/* Valor grande e azul -- a proporcao da tela do ERP, onde o numero e que se
   le de longe. O rotulo segue a regra comum dos rotulos do rodape, acima.
   Escopado ao `.rodape-documento` para nao repintar os totais das outras telas
   que usam a mesma barra. */

.rodape-documento .total-valor {
  font-size: 19px;
  font-weight: 700;
  color: var(--up-azul-royal);
}

/* botoes colados uns nos outros, como na barra do ERP */
.rodape-documento .acoes-formulario {
  gap: 0.3rem;
}

/* Cadastros de Cliente/Produto: o rodape so tem os botoes, sem desconto nem
   totais. Sozinho, o `space-between` deixaria o grupo na esquerda. */
.rodape-documento > .acoes-formulario:only-child {
  margin-left: auto;
}

/* 28px de altura e a medida do ERP: no HTML original o botao quadrado de
   configuracao traz `h-28p` e fica rente aos de texto ao lado. O `gap` de meio
   rem repoe o respiro que la vem dos `&nbsp;&nbsp;` em volta do <i> do icone.
   Escopado ao rodape do documento e a barra das listagens -- os formularios de
   Clientes/Produtos e o Painel Admin seguem com os 33px do padrao da casa.

   Os dois seletores dividem a MESMA regra de proposito: o pedido era que os
   botoes do topo das listagens ficassem identicos aos do rodape, e duas regras
   iguais lado a lado so garantem isso ate alguem mexer numa delas. O
   "Selecionar" das lupas (clientes/produtos) entra na mesma regra: abre por
   cima do documento e fica do tamanho do Gravar dele. O "Ficha do cliente",
   no canto esquerdo do rodape da ficha do cliente, tambem: ficava com os 33px
   do padrao e destoava do Gravar/Cancelar da mesma linha. */
.rodape-documento .acoes-formulario .botao-acao,
.rodape-documento .footer-start .botao-acao,
.barra-ferramentas .botao-acao,
.dialogo-largo .dialogo-rodape .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
}

/* Funil e Duplicar sao so icone: o recuo lateral de um botao com texto os
   deixaria largos a toa. Dividem a MESMA regra porque o pedido era que o
   Duplicar tivesse exatamente o tamanho do filtro -- separados, o primeiro
   ajuste num deles desencontraria os dois. */
.barra-ferramentas .botao-filtro,
.barra-ferramentas .botao-duplicar {
  padding-inline: 0.55rem;
}

.botao-navegacao {
  background-color: var(--up-azul-royal);
  border-color: #003f80;
}

.botao-navegacao:hover:enabled {
  background-color: #003f80;
  color: #fff;
}

/* --- Selecao de linha na grade --------------------------------------------- */


.grade.selecionavel tbody tr.selecionada td {
  background-color: #dceefb;
}

.grade .escolha {
  width: 2.2rem;
  padding-inline: 0.35rem;
  text-align: center;
  border-right: 1px solid var(--up-borda-suave);
}

.grade .escolha input {
  vertical-align: middle;
  accent-color: var(--up-azul-royal);
}

.grade thead .escolha {
  border-right-color: var(--up-borda);
}

.etiqueta-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background-color: #e8ecef;
  color: var(--up-cinza-chumbo);
}

/* Cores pela tabela de status do ERP (venda_documento_service.ROTULO_STATUS).
   Verde = ainda aceita alterar/cancelar (STATUS_EDITAVEIS: 1 Nao faturado,
   9 Pre-pedido e o 0 legado); vermelho = os dois cancelados (3 e 13, no PDV);
   azul = nota fiscal gerada. O resto fica no cinza padrao da etiqueta. */
.etiqueta-status.status-0,
.etiqueta-status.status-1,
.etiqueta-status.status-9 {
  background-color: #e3f1e4;
  color: #3d7a42;
}

.etiqueta-status.status-3,
.etiqueta-status.status-13 {
  background-color: var(--up-primaria-fundo);
  color: var(--up-primaria-escuro);
}

.etiqueta-status.status-4 {
  background-color: #dceefb;
  color: var(--up-azul-royal);
}

/* Situacao da NF-e (Fiscal > Notas fiscais de saida), nas cores da legenda
   da tela equivalente do Uniplus: verde autorizada, vermelho cancelada ou
   rejeitada, cinza denegada, azul normal (nao transmitida), lilas
   desconhecida. Codigos em fiscal_service.SITUACAO_NFE. */
.etiqueta-nfe {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
}

.etiqueta-nfe.nfe-autorizada { background-color: #e3f1e4; color: #3d7a42; }
.etiqueta-nfe.nfe-rejeitada,
.etiqueta-nfe.nfe-cancelada { background-color: #fbe3e3; color: #b3261e; }
.etiqueta-nfe.nfe-denegada { background-color: #e8ecef; color: var(--up-cinza-chumbo); }
.etiqueta-nfe.nfe-normal { background-color: #dceefb; color: var(--up-azul-royal); }
.etiqueta-nfe.nfe-desconhecida { background-color: #efe6f7; color: #6b3fa0; }

.botao-alterar {
  background-color: var(--up-azul-royal);
  border-color: #003f80;
}

.botao-alterar:hover:enabled {
  background-color: #003f80;
}

/* --- Menu "Opcoes" da lista de Orcamentos ----------------------------------
   Botao claro com texto azul e painel de duas colunas (Faturamento / Outras
   acoes), no desenho do menu equivalente do Uniplus. */
.opcoes-lista {
  position: relative;
}

.botao-opcoes {
  background-color: #fff;
  border-color: var(--up-azul-royal);
  color: var(--up-azul-royal);
}

.botao-opcoes:hover:enabled,
.botao-opcoes[aria-expanded="true"] {
  background-color: #eef3fb;
  color: var(--up-azul-royal);
}

.menu-opcoes {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1050;
  display: grid;
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 1.5rem;
  padding: 0.9rem 1.1rem 1rem;
  background-color: #fff;
  border: 1px solid var(--up-borda);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 6, 12, 0.18);
}

.menu-opcoes[hidden] {
  display: none;
}

.menu-opcoes-titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--up-borda);
  font-size: 15px;
  font-weight: 700;
  color: var(--up-azul-royal);
}

.menu-opcoes-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 13px;
  color: var(--up-cinza-chumbo);
  text-align: left;
  white-space: nowrap;
}

.menu-opcoes-item:hover:enabled,
.menu-opcoes-item:focus-visible {
  background-color: #57525a;
  color: #fff;
  outline: none;
}

.menu-opcoes-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Menu Opcoes com um grupo so (Pedido de Venda: so "Outras acoes"; notas
   fiscais de saida: so "Opcoes NF-e"). */
.menu-opcoes.menu-opcoes-1 {
  grid-template-columns: minmax(15rem, auto);
}

@media (max-width: 575.98px) {
  .menu-opcoes {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.botao-cancelar-pedido {
  background-color: #e47646;
  border-color: #d4622b;
}

.botao-cancelar-pedido:hover:enabled {
  background-color: #d4622b;
}

/* Marrom -- fica ao lado do laranja do "Cancelar" sem se confundir com ele.
   Sem fundo proprio o botao herdaria so o `color: #fff` de .botao-acao e
   sumiria contra a pagina branca. */
/* Verde-azulado -- consulta, entre o azul claro do filtro e o marrom do
   "Imprimir", sem se confundir com o azul do "Alterar". */
.botao-visualizar {
  background-color: #0f766e;
  border-color: #0b5c56;
}

.botao-visualizar:hover:enabled {
  background-color: #0b5c56;
}

/* Duplicar: indigo da marca (--up-desktop, o mesmo da barrinha de navegacao).
   Fica ao lado do azul claro do funil sem virar irmao dele -- os dois sao os
   unicos botoes so-icone da barra, e cor igual faria parecerem um par de
   filtros. O tom escuro do hover e a unica cor solta aqui, como nos vizinhos:
   e uma sombra do proprio token, nao uma cor nova da identidade. */
.botao-duplicar {
  background-color: var(--up-desktop);
  border-color: #3f49a1;
}

.botao-duplicar:hover:enabled {
  background-color: #3f49a1;
}

/* Roxo -- consulta rapida dos itens, distinto dos vizinhos */
.botao-itens-rapidos {
  background-color: #6d4fa8;
  border-color: #563d88;
}

.botao-itens-rapidos:hover:enabled {
  background-color: #563d88;
}

.botao-imprimir {
  background-color: #7a4f2c;
  border-color: #5f3d21;
}

.botao-imprimir:hover:enabled {
  background-color: #5f3d21;
}

/* --- Campo com lupa -------------------------------------------------------- */

.campo-com-lupa {
  display: flex;
}

.campo-com-lupa input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.botao-lupa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  border: 1px solid var(--up-azul-royal);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background-color: var(--up-azul-royal);
  color: #fff;
}

.botao-lupa:hover:enabled {
  background-color: #003f80;
}

/* Lupa seguida de outro botao (ex.: editar cliente): so o ultimo arredonda,
   e um filete claro separa os dois */
.campo-com-lupa .botao-lupa:not(:last-child) {
  border-radius: 0;
}

.campo-com-lupa .botao-lupa + .botao-lupa {
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

/* sem cliente escolhido nao ha o que editar */
.botao-editar-cliente:disabled {
  opacity: 0.45;
  cursor: default;
}

/* O lapis nao tem rotulo -- e so o desenho --, entao o atalho aparece DENTRO
   dele, do mesmo jeito que os botoes com texto mostram o deles ("GRAVAR
   (F10)", "ALTERAR (F3)"). Sem isto o F3 existia so no `title`, e atalho que
   so aparece parando o mouse em cima ninguem descobre.
   A largura deixa de ser a fixa da lupa (2.1rem) e passa a acompanhar o
   conteudo; o resto (fundo azul, cor branca, centralizacao) continua vindo de
   `.botao-lupa`. */
.botao-editar-cliente {
  width: auto;
  gap: 0.3rem;
  padding: 0 0.45rem;
}

/* Miudo de proposito: e uma legenda do botao, nao o conteudo dele -- quem
   nomeia a acao e o icone (e o `title`, para quem passa o mouse). */
.atalho-botao {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

/* --- Edicao rapida do cliente (Pedido/Orcamento) --------------------------- */

/* Cabecalho e rodape fixos, so o meio rola: numa janela baixa os botoes
   Gravar/Cancelar continuam sempre a vista (mesma ideia do rodape fixo do
   Pedido). A altura maxima deixa folga da borda da janela. */
/* `.dialogo-medio.` na frente: a regra generica `.dialogo-medio[open]
   { display: block }` vem depois no arquivo e desligaria o flex */
.dialogo-medio.dialogo-cliente-rapido[open] {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

.dialogo-cliente-rapido .dialogo-cabecalho,
.dialogo-cliente-rapido .dialogo-rodape {
  flex: 0 0 auto;
}

.dialogo-cliente-rapido .cliente-rapido-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* mesma densidade do bloco de campos do Pedido (#formDocumento) */
.dialogo-cliente-rapido .bloco-campos {
  gap: 0.5rem 0.75rem;
  padding: 0.9rem 1.25rem;
  border: 0;
}

/* titulo de secao, como "Pessoa Juridica" no Cadastro de Clientes */
.dialogo-cliente-rapido .bloco-titulo {
  grid-column: span 12;
  margin: 0.35rem 0 0;
}

/* campos so de Pessoa Juridica, escondidos na Fisica (o `display` do
   .campo passaria por cima do atributo hidden) */
.dialogo-cliente-rapido .campo[hidden] {
  display: none;
}
.dialogo-cliente-rapido .campo-7 { grid-column: span 7; }
.dialogo-cliente-rapido .campo-8 { grid-column: span 8; }

.dialogo-cliente-rapido .dialogo-rodape {
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
}

@media (max-width: 767.98px) {
  .dialogo-cliente-rapido .campo {
    grid-column: span 12;
  }
}

/* --- Dialogo largo (pesquisa de produtos) ---------------------------------- */

.dialogo-largo {
  /* tamanho fixo: a janela nao pode encolher/crescer conforme o resultado */
  width: min(72rem, calc(100vw - 3rem));
  height: min(44rem, calc(100vh - 4rem));
}

/* nao declarar `display` fora do [open]: isso sobrescreve o
   `dialog:not([open]) { display: none }` do navegador e a janela nasce aberta */
.dialogo-largo[open] {
  display: flex;
  flex-direction: column;
}

.dialogo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dialogo-titulo-largo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #3a4550;
}

.dialogo-fechar {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--up-texto-suave);
}

.dialogo-fechar:hover {
  color: var(--up-primaria);
}

.dialogo-filtros {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 1.25rem;
}

.dialogo-filtros .campo-pesquisa {
  max-width: 22rem;
}

.campo-marcavel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--up-texto-suave);
}

.campo-marcavel input {
  accent-color: var(--up-azul-royal);
}

/* --- Interruptor (toggle) --------------------------------------------------- */
/* Checkbox nativo escondido + trilho estilizado ao lado; sem JS proprio. */

.interruptor {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.5rem;
  height: 1.35rem;
  flex: 0 0 auto;
}

.interruptor input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}

.interruptor .trilho {
  position: absolute;
  inset: 0;
  background-color: var(--up-borda);
  border-radius: 999px;
  transition: background-color 0.15s ease;
}

.interruptor .trilho::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 6, 12, 0.3);
  transition: transform 0.15s ease;
}

.interruptor input:checked + .trilho {
  background-color: var(--up-azul-royal);
}

.interruptor input:checked + .trilho::before {
  transform: translateX(1.15rem);
}

.interruptor input:focus-visible + .trilho {
  box-shadow: 0 0 0 0.15rem rgba(54, 169, 225, 0.35);
}

/* --- Linha de sinalizadores (Cliente, Fornecedor, Vendedor...) ------------- */

.linha-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.dialogo-corpo {
  flex: 1 1 auto;
  min-height: 0; /* deixa o flex encolher e a rolagem ficar aqui dentro */
  overflow-y: auto;
  padding: 0 1.25rem;
}

/* dentro do dialogo a rolagem e do corpo, nao da moldura da grade */
.dialogo-corpo .grade-envolucro {
  overflow-y: visible;
}

.dialogo-corpo .grade thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Uma linha explicando o que fazer na janela, antes da grade (Duplicar: "marque
   os itens que vao..."). Fica ACIMA do conteudo e alinhada a esquerda -- ao
   contrario de .dialogo-texto, que e o recado centralizado dos dialogos de
   confirmacao. */
.dialogo-instrucao {
  margin: 0.75rem 0 0.6rem;
  font-size: 12px;
  color: var(--up-texto-suave);
}

/* --- Rastreabilidade (janela do menu Opcoes) -------------------------------
   Duas colunas: o CAMINHO do documento a esquerda, em largura fixa (a lista e
   curta e previsivel -- de onde veio, no que deu, a nota), e a LINHA DO TEMPO
   a direita, que e quem cresce. Abaixo de 900px viram uma coluna so: a janela
   ja ocupa quase a tela inteira e duas colunas estreitas quebrariam as datas.

   Nada aqui inventa cor: as situacoes reaproveitam `.etiqueta-status` e
   `.etiqueta-nfe` das listagens, e os pontos da linha do tempo usam as cores
   que ja significam aquela acao na barra de ferramentas (verde = incluir,
   indigo = duplicar, marrom = imprimir...). */

.rastreio-corpo {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding-block: 0.75rem;
}

@media (max-width: 900px) {
  .rastreio-corpo {
    grid-template-columns: 1fr;
  }
}

.rastreio-corpo .bloco-titulo {
  margin: 0 0 0.6rem;
}

.rastreio-aviso {
  margin: 0 0 0.6rem;
  font-size: 11.5px;
  color: var(--up-texto-suave);
}

/* --- Caminho do documento --------------------------------------------------- */

.rastreio-cadeia {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O fio da esquerda e o que transforma cartoes soltos em CADEIA: sem ele,
   "veio de" e "duplicado para" pareceriam listas independentes. */
.rastreio-item {
  position: relative;
  padding-left: 0.9rem;
}

.rastreio-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--up-borda);
}

/* o fio comeca no primeiro cartao e termina no ultimo, em vez de sobrar para
   fora da lista */
.rastreio-item:first-child::before {
  top: 1.1rem;
}

.rastreio-item:last-child::before {
  bottom: calc(100% - 1.1rem);
}

.rastreio-relacao {
  display: block;
  margin: 0.5rem 0 0.2rem;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--up-texto-suave);
}

.rastreio-cartao {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--up-texto);
}

/* o cartao vira botao quando da para abrir o documento; quando nao da (outra
   filial, outro vendedor, ou a tela desligada nos Modulos) ele continua ali,
   so que como texto -- esconder o documento mentiria sobre a historia */

button.rastreio-cartao:hover {
  border-color: var(--up-primaria);
  background-color: var(--up-primaria-fundo);
}

.rastreio-item.atual .rastreio-cartao {
  border-color: var(--up-azul-royal);
  background-color: #dceefb;
}

.rastreio-cartao-titulo {
  display: block;
  font-weight: 700;
  color: var(--up-marca-escura);
}

.rastreio-cartao-cliente {
  display: block;
  margin-top: 0.15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--up-texto-suave);
}

.rastreio-cartao-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.rastreio-cartao-valor {
  font-weight: 700;
  color: var(--up-azul-royal);
}

/* --- Linha do tempo --------------------------------------------------------- */

.linha-tempo {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linha-tempo .evento {
  position: relative;
  padding: 0 0 0.9rem 1.15rem;
}

.linha-tempo .evento::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1rem;
  bottom: 0;
  border-left: 2px solid var(--up-borda);
}

.linha-tempo .evento:last-child::before {
  display: none;
}

/* o ponto: o anel branco + a sombra de 1px o destacam do fio que passa por
   tras dele */
.evento-marca {
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--up-azul-sky);
  box-shadow: 0 0 0 1px var(--up-borda);
}

/* autorizada pela SEFAZ e importada do XML (Rastreabilidade da nota) sao o
   mesmo "nasceu" da criacao; a carta de correcao fica com o azul padrao */
.evento-criado .evento-marca,
.evento-autorizado .evento-marca,
.evento-importado .evento-marca {
  background-color: #55a459;
}

.evento-cancelado .evento-marca {
  background-color: #d70a23;
}

.evento-duplicado .evento-marca,
.evento-copia_de .evento-marca {
  background-color: var(--up-desktop);
}

.evento-transformado .evento-marca,
.evento-gerado_de .evento-marca,
.evento-nota_gerada .evento-marca {
  background-color: #6d4fa8;
}

.evento-impresso .evento-marca {
  background-color: #7a4f2c;
}

/* supervisor derrubou a edicao de alguem (ver trava_edicao_service) e
   supervisor liberou uma pauta fora das marcadas para o vendedor (ver
   autorizacao_pauta_service): os dois sao a mesma coisa para quem le o
   historico -- alguem com mais poder autorizou o que a regra barrava. */
.evento-edicao_liberada .evento-marca,
.evento-pauta_liberada .evento-marca {
  background-color: var(--up-intervencao);
}

.evento-titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--up-texto);
}

.evento-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  font-size: 11.5px;
  color: var(--up-texto-suave);
}

/* de qual sistema veio a linha: o mesmo documento tem historia dos dois lados,
   e saber quem registrou o que e parte da rastreabilidade */
.evento-fonte {
  padding: 0 0.35rem;
  border-radius: 10px;
  background-color: var(--up-cinza-frio);
  font-size: 10.5px;
  font-weight: 700;
}

.evento-campos {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
}

.evento-campos li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.1rem 0;
}

.evento-campo {
  color: var(--up-texto-suave);
}

/* valor antigo riscado: a mudanca se le de relance, sem precisar comparar os
   dois textos palavra a palavra */
.evento-de {
  color: var(--up-texto-suave);
  text-decoration: line-through;
}

.evento-para {
  font-weight: 600;
}

.rastreio-vazio {
  margin: 0;
  font-size: 12px;
  color: var(--up-texto-suave);
}

.contagem-resultados {
  margin: 0.5rem 0;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--up-azul-royal);
}

.carregando-mais {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 12px;
  color: var(--up-texto-suave);
}

.carregando-mais[hidden] {
  display: none;
}

.dialogo-rodape {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dialogo-texto {
  margin: 0;
  padding: 1rem 2rem 0;
  text-align: center;
  font-size: 13px;
  color: var(--up-texto-suave);
}

/* --- Dialogo de filtros ---------------------------------------------------- */

.dialogo-medio {
  width: min(46rem, calc(100vw - 3rem));
}

.dialogo-medio[open] {
  display: block;
}

.formulario-filtro .bloco-campos.sem-moldura {
  border: 0;
  padding: 1.25rem;
}

.dialogo-rodape.centralizado {
  justify-content: center;
  gap: 0.5rem;
}

.botao-filtro {
  background-color: var(--up-azul-sky);
  border-color: #2b8dbe;
  padding-inline: 0.75rem;
}

.botao-filtro:hover {
  background-color: #2b8dbe;
  color: #fff;
}

.botao-filtro.ativo {
  background-color: var(--up-azul-royal);
  border-color: #003f80;
}

.botao-aplicar {
  background-color: var(--up-azul-royal);
  border-color: #003f80;
}

.botao-aplicar:hover {
  background-color: #003f80;
  color: #fff;
}

.chips-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.chip-filtro {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  background-color: var(--up-azul-royal);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* "x" dentro do chip: fecha so aquele filtro (ver venda_documento_lista.html) */
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chip-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

.chip-fechar:hover,
.chip-fechar:focus-visible {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  opacity: 1;
}

@media (min-width: 768px) {
  .campo-6 { grid-column: span 6; }
}

/* Previa do arquivo lido: monoespacada para preservar as colunas fixas */
.previa-arquivo {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  white-space: pre;
  overflow-x: auto;
  background-color: var(--up-cinza-frio);
  border: 1px solid var(--up-borda-suave);
  border-radius: 4px;
  padding: 0.75rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Painel Admin: casca da tela (menu lateral + conteudo)
   ========================================================================== */

/* O painel do admin cuida do proprio espacamento (o menu lateral precisa ir de
   ponta a ponta) e, principalmente, vira uma COLUNA FLEX: e daqui que sai a
   altura definida para `.painel-admin` -> `.admin-conteudo` -> formulario ->
   grade. Sem uma altura definida nessa cadeia, `flex: 1` na grade nao tem do
   que tomar 1 fracao e ela cresce com o conteudo, esticando o card.

   `overflow-y: auto` continua na regra geral de `.painel` como rede de
   seguranca (janela muito baixa), mas no uso normal quem rola e a grade. */
.painel.painel-sem-respiro {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.painel-admin {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem;
  /* toma a altura que sobra do card; min-height:0 deixa encolher abaixo do
     conteudo, que e o que faz a rolagem acontecer na grade e nao aqui */
  flex: 1 1 auto;
  min-height: 0;
}

.admin-menu {
  padding: 1.25rem 0.75rem;
  border-right: 1px solid var(--up-borda-suave);
  background-color: var(--up-cinza-frio);
}

.admin-menu-titulo {
  margin: 0 0 0.6rem 0.65rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--up-texto-suave);
}

/* --- Busca de configuracoes (menu lateral) -------------------------------
   Campo com lupa acima das secoes; os resultados abrem por cima do conteudo,
   mais largos que o menu, com o nome e a secao de cada configuracao. */
.admin-busca {
  position: relative;
  margin: 0 0 0.75rem;
}

.admin-busca-campo {
  position: relative;
}

.admin-busca-lupa {
  position: absolute;
  top: 50%;
  left: 8px;
  display: flex;
  transform: translateY(-50%);
  color: #a7b1ba;
  pointer-events: none;
  transition: color 0.15s;
}

.admin-busca-campo:focus-within .admin-busca-lupa {
  color: var(--up-azul-sky);
}

.admin-busca-campo input {
  width: 100%;
  padding: 3px 6px 3px 26px;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  font-family: var(--up-fonte);
  font-size: 12px;
  line-height: 1.4;
  color: var(--up-texto);
}

.admin-busca-campo input:focus {
  outline: 0;
  border-color: var(--up-azul-sky);
  box-shadow: 0 0 0 0.15rem rgba(54, 169, 225, 0.2);
}

.admin-busca-resultados {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 1040;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  max-height: 22rem;
  margin: 0;
  padding: 3px 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: #fff;
  box-shadow: var(--up-sombra-menu);
}

.admin-busca-resultados[hidden] {
  display: none;
}

.admin-busca-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 4px 10px;
}

.admin-busca-item.ativo {
  background-color: var(--up-primaria-fundo);
}

.admin-busca-titulo {
  min-width: 0;
  font-size: 12px;
  color: var(--up-azul-royal);
}

.admin-busca-item.ativo .admin-busca-titulo {
  color: var(--up-primaria-escuro);
}

.admin-busca-secao {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--up-texto-suave);
}

.admin-busca-vazio {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--up-texto-suave);
}

/* Configuracao encontrada pela busca: pisca em amarelo suave e apaga */
.admin-destaque {
  animation: admin-destaque 2.6s ease-out;
}

@keyframes admin-destaque {
  0%, 35% {
    background-color: #fff3bf;
    box-shadow: inset 0 0 0 2px #f2c94c;
  }
  100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-destaque {
    animation: none;
    background-color: #fff3bf;
  }
}

.admin-menu-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--up-cinza-chumbo);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-menu-item:hover,
.admin-menu-item:focus-visible {
  background-color: #fff;
  color: var(--up-texto);
}

.admin-menu-item.ativo {
  background-color: #fff;
  box-shadow: inset 2px 0 0 var(--up-azul-royal);
  font-weight: 700;
  color: var(--up-azul-royal);
}

/* Coluna de conteudo como FLEX COLUMN: e o que permite a grade tomar a altura
   que sobra e o rodape ficar colado na base do card.

   `position: sticky` sozinho nao resolvia: sticky gruda enquanto HA rolagem,
   mas nao empurra nada para o fundo. Numa janela alta, em que o conteudo cabe
   inteiro, o rodape parava no lugar natural dele e sobrava um bloco de card
   branco vazio embaixo -- o "espaco enorme" entre o GRAVAR e o fundo vermelho. */
.admin-conteudo {
  /* o padding que o .painel daria de volta, agora so do lado do conteudo */
  padding: 1.25rem 1.5rem 0 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* o formulario da secao ocupa toda a altura que sobra da coluna */
.admin-conteudo > .formulario {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* sem isto um filho que rola nao encolhe abaixo do proprio conteudo e o
     flex:1 da grade nao teria efeito nenhum */
  min-height: 0;
}

/* `margin-top: auto` empurra o rodape para a base da coluna -- que e o que
   `position: sticky` NAO faz (sticky so gruda enquanto ha rolagem).
   A margem inferior negativa da regra geral e zerada aqui de proposito: num
   container flex a margem auto ABSORVE o espaco que a negativa criaria, o
   rodape nao desce, e sobra o padding do card como uma faixa branca. Aqui o
   `.painel` nao tem padding nenhum (painel-sem-respiro), entao nao ha o que
   cancelar; so a direita precisa esticar ate a borda do card. */
.admin-conteudo .rodape-formulario {
  /* topo auto = cola na base; direita negativa = alcanca a borda do card,
     passando por cima do padding da coluna */
  margin: auto -1.5rem 0 0;
}

/* Grade que rola POR DENTRO em vez de esticar o card. A altura sai do
   flex:1 1 auto -- nada de max-height/calc() com numero magico, que quebraria
   em outra resolucao ou se o cabecalho da secao mudasse de tamanho. */
/* Painel Admin > Usuarios: os textos de ajuda acima da grade, num bloco so.
   Ate 23/09/2026 eram <p> soltos com a margem do .texto-apoio (1.1rem) e a
   entrelinha do corpo -- quatro paragrafos tomavam ~1/3 da altura e a grade,
   que so fica com a SOBRA da coluna (flex: 1), mostrava umas 10 linhas. O
   cliente pediu o texto mais junto e a grade mais alta: letra 12px,
   entrelinha 1.35 e 0.3rem entre paragrafos. `flex-shrink: 0` porque quem
   cede altura numa janela baixa e a grade (ate o min-height dela), nunca o
   texto -- texto espremido num flex vira sobreposicao. */
.ajuda-usuarios {
  flex: 0 0 auto;
  margin-bottom: 0.55rem;
}

.ajuda-usuarios .texto-apoio,
.ajuda-usuarios .aviso-pauta {
  margin: 0 0 0.3rem;
  font-size: 12px;
  line-height: 1.35;
}

.ajuda-usuarios > :last-child {
  margin-bottom: 0;
}

/* a grade de Usuarios nao encolhe abaixo de ~8 linhas: numa janela baixa
   quem rola passa a ser o painel (a rede de seguranca do .painel), em vez de
   a grade virar uma fresta de 3 linhas */
#formUsuarios .grade-envolucro.rolagem-interna {
  min-height: 15rem;
}

/* Painel Admin > Usuarios: pesquisa acima da grade */
.barra-usuarios .campo-pesquisa {
  flex: 0 1 24rem;
}

.contagem-usuarios {
  margin-left: auto;
  font-size: 12px;
  color: var(--up-texto-suave);
}

#gradeUsuarios tbody tr[hidden] {
  display: none;
}

.grade-envolucro.rolagem-interna {
  flex: 1 1 auto;
  min-height: 8rem;
  overflow-y: auto;
}

/* Corpo da secao que rola POR INTEIRO quando nao cabe (Painel Admin > Vendas):
   o rodape fica fora dele, sempre colado na base. Coluna flex para a grade
   `.rolagem-interna` de dentro continuar tomando a sobra numa janela alta;
   os demais blocos nao encolhem -- quem cede altura primeiro e a grade (ate o
   min-height dela), e so depois o corpo passa a rolar. */
.admin-corpo-rolavel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-corpo-rolavel > :not(.rolagem-interna) {
  flex-shrink: 0;
}

/* --- Painel Admin > Modulos -------------------------------------------------- */

/* pedido da senha de desenvolvedor: cartao pequeno no alto da secao */
.acesso-desenvolvedor {
  max-width: 26rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--up-borda-suave);
  border-radius: 6px;
  text-align: center;
}

.acesso-desenvolvedor-icone {
  color: var(--up-primaria);
  margin-bottom: 0.5rem;
}

.acesso-desenvolvedor-titulo {
  margin: 0 0 0.4rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--up-texto);
}

.acesso-desenvolvedor-texto {
  margin: 0 0 1rem;
  font-size: 12.5px;
  color: var(--up-texto-suave);
}

.acesso-desenvolvedor-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.acesso-desenvolvedor-form input {
  flex: 1 1 12rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
}

.acesso-desenvolvedor-erro {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 12px;
  color: #c0392b;
}

/* liga/desliga do modulo, no lugar do titulo do bloco */
.modulo-chave .bloco-titulo {
  margin: 0;
}

.grade-modulos {
  flex-shrink: 0;
}

.grade-modulos .coluna-tela {
  width: 16rem;
}

.grade-modulos .coluna-disponivel {
  width: 6.5rem;
  text-align: center;
}

.grade-modulos .celula-funcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
}

.marca-funcao {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* desligado (proprio ou por um pai desligado): apagado, mas a marca fica */
.marca-funcao.desligado,
.grade-modulos tr.desligado td:not(.coluna-disponivel),
.grade-modulos.desligado {
  opacity: 0.45;
}

.grade-modulos.desligado tr.desligado td:not(.coluna-disponivel) {
  opacity: 1;
}

/* Painel Admin > Vendas, "Situacao padrao das listagens": poucas linhas (uma
   por filial), entao nao encolhe -- quando falta altura quem rola e o corpo da
   secao inteiro (`.admin-corpo-rolavel`). Antes de 22/09/2026 a secao tinha
   embaixo a grade de pautas, que era a que rolava por dentro; ela virou uma
   coluna da grade de Usuarios. */
.grade-situacao-padrao {
  flex-shrink: 0;
  margin-bottom: 0.25rem;
}

.grade-planilha .coluna-situacao-padrao {
  width: 14rem;
}

/* Pesquisa de Produtos (Pedido/Orcamento): produto sem preco numa pauta mostra
   o preco base naquela coluna, apagado -- e o que vale, mas nao e da pauta */
.grade-planilha td.preco-sem-pauta {
  color: #9aa3ab;
}

/* Painel Admin > Modelos de impressao: o botao Incluir a direita, acima da
   lista; a lista (alerta + blocos por documento) rola por dentro da secao,
   com o cabecalho do painel parado. */
.barra-modelos-admin {
  justify-content: flex-end;
}

.admin-rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 1rem;
}

/* Painel Admin > Campos obrigatorios: as abas (Cliente, Vendedor...) ficam
   entre o seletor de filial e o rodape; a aba ativa vira coluna flex para a
   grade dela rolar por dentro, como as demais secoes do painel. */
/* Filial e barra de abas mantem a altura: numa coluna flex com min-height 0
   eles encolheriam para dar lugar a grade, cortando o texto das abas (a barra
   tem overflow-x:auto, entao nao se defende sozinha). */
#formCamposObrigatorios > .bloco-campos,
#formCamposObrigatorios > .abas-internas {
  flex-shrink: 0;
}

#formCamposObrigatorios > .painel-aba.ativa {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* A lista e so rotulo + secao + uma marca: esticada na largura toda, a coluna
   "Campo" abria um vao enorme ate a secao. A grade (e a moldura dela) ocupa so
   o que o conteudo pede; as larguras minimas deixam as cinco abas alinhadas. */
#formCamposObrigatorios .grade-envolucro {
  align-self: flex-start;
  max-width: 100%;
}

#formCamposObrigatorios .grade-planilha {
  width: auto;
}

#formCamposObrigatorios .grade-planilha .coluna-campo {
  min-width: 22rem;
}

#formCamposObrigatorios .grade-planilha .coluna-secao {
  min-width: 11rem;
}

.grade-planilha .nota-campo {
  color: var(--up-cinza-chumbo);
  font-size: 11px;
}

/* Com a rolagem por dentro, o cabecalho sairia de vista na primeira rolada.
   Escopado no modificador porque so faz sentido em quem rola por dentro; nas
   demais grades o sticky nao teria efeito.
   (O comentario antigo citava a grade de itens do Pedido como exemplo de grade
   que NAO rola por dentro -- isso era o sintoma de um bug, nao a intencao: o
   `> *` do `#cartaoItens` travava o encolhimento do envolucro. Corrigido junto
   com esta nota; a grade do Pedido rola por dentro e usa este cabecalho fixo.) */
.grade-envolucro.rolagem-interna .grade-planilha th {
  position: sticky;
  top: 0;
  /* acima do <select>/checkbox das linhas, que criam contexto de empilhamento */
  z-index: 2;
}

.admin-cabecalho {
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--up-borda-suave);
}

.admin-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--up-texto);
}

.admin-apoio {
  margin: 0.15rem 0 0;
  font-size: 12px;
  color: var(--up-texto-suave);
}

.admin-apoio:empty {
  display: none;
}

@media (max-width: 767px) {
  .painel-admin {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .admin-menu {
    border-right: 0;
    border-bottom: 1px solid var(--up-borda-suave);
  }

  .admin-menu-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .admin-conteudo {
    padding: 1.25rem 1.5rem 0;
  }
}

/* --- Chave liga/desliga (toggle switch) ----------------------------------- */

.bloco-preferencia {
  align-items: start;
}

/* Regras em colunas de 3: enche a coluna de cima para baixo e so entao abre a
   proxima. A 4a regra comeca a 2a coluna ao lado da 1a, e as primeiras nao
   mudam de lugar quando entra uma regra nova. No celular, uma coluna so. */
@media (min-width: 768px) {
  .bloco-preferencia.em-colunas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }

  .bloco-preferencia.em-colunas > .campo {
    grid-column: auto;
  }
}

.chave-liga {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 12.5px;
  color: var(--up-texto);
  /* ancora o <input> escondido abaixo, que e position:absolute -- ver a nota
     em .grade-envolucro sobre a rolagem fantasma do documento */
  position: relative;
}

/* O <input> real continua no DOM (acessibilidade, teclado, :focus-visible e o
   `checked` que o servidor renderiza); quem aparece e o trilho ao lado. */
.chave-liga-entrada {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.chave-liga-trilho {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 18px;
  margin-top: 1px;
  border-radius: 999px;
  background-color: #c6ccd2;
  transition: background-color 0.18s ease;
}

.chave-liga-trilho::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

.chave-liga-entrada:checked + .chave-liga-trilho {
  background-color: var(--up-azul-royal);
}

.chave-liga-entrada:checked + .chave-liga-trilho::after {
  transform: translateX(16px);
}

.chave-liga-entrada:focus-visible + .chave-liga-trilho {
  outline: 2px solid var(--up-azul-royal);
  outline-offset: 2px;
}

.chave-liga-texto {
  display: block;
  font-weight: 600;
}

/* Coluna "Pautas de preco" da grade de Usuarios (ate 22/09/2026 era a grade
   "Pauta fixa por vendedor", em Vendas). A grade usa a variante
   `.grade-planilha`, definida junto de `.grade` la em cima -- o que sobra de
   especifico daqui e so a largura da celula. Mais estreita que a de
   "Vendedor vinculado" (13rem) porque o que aparece e um resumo curto
   (estrela + nome da favorita + "+2") e a linha ja tem 13 colunas disputando
   largura -- a lista inteira vive no painel `.seletor-pautas`. */
.coluna-pauta {
  width: 10.5rem;
}

/* ==========================================================================
   Painel Admin > Atualizacao do Sistema
   ========================================================================== */

.zona-envio-bloco {
  margin-bottom: 1.6rem;
}

.zona-envio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 2.25rem 1.5rem;
  border: 1.5px dashed var(--up-borda);
  border-radius: 6px;
  background-color: var(--up-cinza-frio);
  transition: border-color 0.15s, background-color 0.15s;
}

.zona-envio.arrastando {
  border-color: var(--up-azul-royal);
  background-color: #eaf3fb;
}

.zona-envio-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.3rem;
  border-radius: 50%;
  background-color: #dceefb;
  color: var(--up-azul-royal);
}

.zona-envio-titulo {
  margin: 0;
  font-weight: 700;
  color: var(--up-texto);
}

.zona-envio-apoio {
  margin: 0;
  font-size: 12px;
  color: var(--up-texto-suave);
}

.zona-envio-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--up-azul-royal);
  font-weight: 700;
  text-decoration: underline;
}

.zona-envio-arquivo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--up-borda-suave);
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
  color: var(--up-texto);
}

.zona-envio-arquivo span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zona-envio-remover {
  border: 0;
  background: none;
  padding: 0 0.2rem;
  font-size: 16px;
  line-height: 1;
  color: var(--up-texto-suave);
}

.zona-envio-remover:hover {
  color: var(--up-primaria);
}

/* ==========================================================================
   Fiscal > Notas de saida > Importar XML (fiscal/importar_xml.html)
   Reaproveita a .grade, a .busca com sugestoes e o rodape de formulario; aqui
   so o que e da tela. A zona de envio acima NAO e mais usada por ela -- ficou
   para o Painel Admin > Atualizacao do Sistema, que e quem a estreou.
   ========================================================================== */

/* Uma linha so acima da grade: o que o lote tem (esquerda, negrito) e como
   mexer nele (direita, cinza). `wrap` para a dica cair para baixo, e nao ser
   espremida, em janela estreita. */
.importacao-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-bottom: 0.5rem;
}

.importacao-resumo {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--up-texto);
}

.importacao-apoio {
  margin: 0;
  font-size: 12px;
  color: var(--up-texto-suave);
}

/* --- A lista e a tela -----------------------------------------------------
   Era uma lista de altura fixa (16.5rem) com os itens da nota clicada num
   BLOCO SEPARADO embaixo. Esse bloco mudava de tamanho a cada nota -- uma com
   2 itens, a seguinte com 30 -- e a tela chacoalhava a cada clique.

   Agora a nota abre na PROPRIA LINHA (accordion) e a lista ocupa o card do
   topo ao rodape, rolando por dentro: o que esta em volta nao se mexe, so o
   conteudo da lista. A cadeia de altura e a mesma da aba Itens do Pedido
   (.painel-documento em flex -> bloco -> grade).

   A zona de arrastar arquivos que ficava em cima saiu: era um terco da tela
   parado, para uma acao feita uma vez por lote. Quem abre os XMLs agora e o
   botao do rodape (ver o comentario do template). */

/* faixa de resumo e rodape ficam com a altura deles; so a grade cede */
#importacaoXml > * {
  flex-shrink: 0;
}

.importacao-bloco-notas {
  display: flex;
  flex-direction: column;
}

#importacaoXml > .importacao-bloco-notas {
  flex: 1 1 auto;
  min-height: 0;
}

#importacaoXml .rodape-documento .footer-start {
  gap: 0.5rem;
}

.importacao-notas {
  flex: 1 1 auto;
  overflow-y: auto;
  /* com a janela baixa demais quem rola e o card, como antes: abaixo disto a
     lista viraria uma fresta */
  min-height: 12rem;
}

.importacao-notas:focus-visible {
  outline: 2px solid var(--up-azul-sky);
  outline-offset: 1px;
}

/* z-index 2: acima da linha aberta, que tem fundo proprio */
.importacao-notas > .grade > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.importacao-notas .importacao-linha {
  cursor: pointer;
}

/* --- Colunas da lista das notas --------------------------------------------
   Numero, Valor e Itens usavam `.num` (alinhado a direita, padrao da casa).
   Com o layout automatico, a sobra da tabela caia nessas colunas e o valor ia
   parar a um palmo do proprio titulo -- o mesmo defeito ja corrigido na tabela
   dos itens. Agora toda coluna curta e `.encolher` (largura do conteudo) e o
   conteudo fica a ESQUERDA, comecando embaixo do rotulo; a sobra vai para
   Cliente e Observacao, que sao as colunas de texto. */
.importacao-grade td.importacao-col-sequencia {
  /* "3 de 45": a posicao do XML no lote. Discreta, como o numero do item da
     tabela de itens -- e referencia de conferencia, nao dado da nota. */
  color: var(--up-texto-suave);
  font-variant-numeric: tabular-nums;
}

/* --- A linha que expande ---------------------------------------------------
   A seta e o unico enfeite novo: fechada aponta para baixo, aberta gira para
   cima, como nas arvores do proprio ERP. */
.grade .importacao-col-seta {
  width: 1.9rem;
  padding-inline: 0.4rem;
  text-align: center;
}

.importacao-seta {
  display: inline-flex;
  color: var(--up-texto-suave);
  transition: transform 0.15s;
}

.importacao-linha.aberta .importacao-seta {
  transform: rotate(180deg);
  color: var(--up-azul-royal);
}

@media (prefers-reduced-motion: reduce) {
  .importacao-seta {
    transition: none;
  }
}

/* A linha da nota aberta continua realcada (a classe .selecionada, azul de
   .grade.selecionavel) e ganha peso: com os itens abertos embaixo, e ela que
   diz de qual nota sao. */
.importacao-linha.aberta td {
  font-weight: 700;
}

/* a linha do detalhe nao e clicavel nem realca no hover: ela nao e uma nota */
.importacao-detalhe td {
  padding: 0;
  border-bottom: 1px solid var(--up-borda);
  white-space: normal;
}

.grade tbody tr.importacao-detalhe:hover td {
  background-color: transparent;
}

/* fundo cinza e faixa azul a esquerda amarram os itens a nota de cima */
.importacao-detalhe-caixa {
  padding: 0.75rem 0.9rem 0.9rem;
  border-left: 3px solid var(--up-azul-sky);
  background-color: var(--up-cinza-frio);
}

.importacao-detalhe-titulo {
  margin: 0 0 0.35rem;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--up-azul-sky);
}

.importacao-detalhe .importacao-apoio {
  margin-bottom: 0.5rem;
}

.importacao-itens-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.6rem;
}

/* dentro do detalhe a grade dos itens rola SO na horizontal: a altura e dada
   pelos itens, e quem rola na vertical e a lista de notas */
.importacao-associacao {
  overflow-x: auto;
  overflow-y: visible;
}

/* A lista de sugestoes do produto em `position: fixed`, com a posicao vinda do
   JS (posicionarOpcoes): dentro de uma area que rola por dentro, uma lista em
   `absolute` seria cortada na borda dela. Mesma solucao da lista de opcoes dos
   <select> (.lista-selecao). */
.importacao-detalhe .busca-resultados {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
  box-sizing: border-box;
}

/* --- A grade dos itens da nota aberta --------------------------------------
   Colunas: Item | Codigo no XML | Descricao | Un. | Quantidade | Valor |
   Produto no sistema.

   As larguras e o filete entre as colunas nao sao enfeite. Com o layout
   automatico e sem borda, "Item" (alinhado a direita) encostava em "Codigo no
   XML" (alinhado a esquerda) e os dois liam-se como um numero so: item 1 +
   codigo 0256 viravam "10256". O mesmo acontecia entre o valor e o nome do
   produto. O filete e a mesma ideia da planilha de itens do Pedido
   (.grade-planilha), sem a densidade dela: aqui cada linha hospeda um campo de
   busca e e lida com calma, entao a linha e ALTA, nao apertada. */
.importacao-itens th,
.importacao-itens td {
  border-right: 1px solid var(--up-borda-suave);
  vertical-align: middle;
}

/* no cabecalho o filete acompanha a borda de baixo, que e mais forte */
.importacao-itens th {
  border-right-color: var(--up-borda);
}

/* a ultima coluna encosta na moldura do envolucro: borda ali viraria dupla */
.importacao-itens th:last-child,
.importacao-itens td:last-child {
  border-right: 0;
}

/* `height` numa celula de tabela vale como altura MINIMA do conteudo: e o que
   mantem a linha do item com campo de busca e a do produto ja vinculado do
   mesmo tamanho -- sem isso a grade ficava com degraus de 5px, linha sim,
   linha nao. Cuidado ao mexer: a celula e content-box, entao os 0.4rem de
   padding entram POR FORA (1.9 + 0.8rem = uma linha de ~44px). */
.importacao-itens td {
  height: 1.9rem;
  padding: 0.4rem 0.7rem;
}

/* numero do item: do tamanho do conteudo e centralizado, como a coluna de
   indice da planilha do Pedido */
.importacao-itens .indice {
  width: 1px;
  text-align: center;
  color: var(--up-texto-suave);
}

.importacao-itens .importacao-col-codigo {
  width: 9rem;
}

.importacao-itens .importacao-col-un {
  width: 4rem;
  text-align: center;
}

/* largura fixa nas duas colunas numericas: sem ela o layout automatico dava a
   elas a sobra da tabela e o numero ia parar longe do proprio cabecalho. O
   conteudo fica a esquerda, embaixo do rotulo, como na lista das notas. */
.importacao-itens .importacao-col-numero {
  width: 8rem;
}

.grade .importacao-col-produto {
  min-width: 22rem;
  white-space: normal;
}

.importacao-busca {
  width: 100%;
  /* mesma altura das outras celulas da linha: o campo nao aperta a linha nem
     sobra por fora dela */
  padding: 4px 8px;
  border: 1px solid var(--up-borda);
  border-radius: 3px;
  font-size: 12.5px;
}

.importacao-busca:focus {
  outline: none;
  border-color: var(--up-azul-royal);
}

.importacao-produto-fixo {
  font-weight: 700;
  color: var(--up-texto);
}

.importacao-dica {
  font-size: 11px;
  color: var(--up-texto-suave);
}

/* Era um "x" cinza, sem borda e sem cursor de mao: o operador que associou o
   produto errado nao via que dali dava para trocar e achava que a tela tinha
   travado. Virou botao com a palavra Trocar -- pequeno, para nao competir com
   o nome do produto, mas com cara de botao. */
.importacao-trocar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.4rem;
  padding: 1px 0.45rem;
  border: 1px solid var(--up-borda);
  border-radius: 3px;
  background-color: #fff;
  font-size: 11px;
  line-height: 1.6;
  color: var(--up-texto-suave);
  cursor: pointer;
}

.importacao-trocar:hover {
  border-color: var(--up-primaria);
  color: var(--up-primaria);
}

.importacao-trocar:focus-visible {
  outline: 2px solid var(--up-azul-sky);
  outline-offset: 1px;
}

.grade .importacao-texto {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grade .importacao-motivo {
  min-width: 16rem;
  white-space: normal;
  color: var(--up-texto-suave);
}

.campo-anotacao-bloco {
  margin-top: 0.85rem;
}

.campo-anotacao-bloco input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  background-color: var(--up-cinza-frio);
  font-family: var(--up-fonte);
  font-size: 13px;
}

.zona-envio-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--up-borda-suave);
}

.zona-envio-aviso {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 12px;
  color: var(--up-texto-suave);
}

.zona-envio-aviso strong {
  color: var(--up-texto);
}

.bloco-builds {
  margin-bottom: 1.6rem;
}

.lista-builds {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.build-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--up-borda-suave);
  border-radius: 6px;
  background-color: #fff;
}

.build-item.atual {
  border-color: var(--up-azul-royal);
  background-color: #f3f9fe;
}

.build-corpo {
  flex: 1 1 18rem;
  min-width: 0;
}

.build-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
}

.build-anotacao {
  margin: 0.25rem 0 0;
  font-size: 13px;
  color: var(--up-texto);
}

.build-meta {
  margin: 0.2rem 0 0;
  font-size: 11px;
  color: var(--up-texto-suave);
}

.build-acoes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.botao-instalar {
  background-color: #fff;
  border-color: var(--up-borda);
  color: var(--up-texto);
}

.botao-instalar:hover {
  background-color: var(--up-cinza-frio);
}

.link-excluir {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--up-primaria);
}

.link-excluir:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Painel de Vendas (painel/vendas.html + js/painel_vendas.js)

   Cores com papel fixo, NUNCA pela posicao: Pedido e sempre azul e Orcamento
   sempre laranja, em cartao, chave e grafico. Sao os slots 1 e 2 da paleta de
   referencia de dataviz, validados como par adjacente para daltonismo. Texto
   nunca usa a cor da serie -- a identidade vem da "chave" colorida ao lado.
   Grade e eixos em linha fina e solida, um tom acima do fundo.
   ========================================================================== */

.painel.painel-vendas {
  --pv-pedido: #2a78d6;
  --pv-orcamento: #eb6834;
  --pv-superficie: #ffffff;
  --pv-plano: #f6f7f8;
  --pv-tinta: #1f2328;
  --pv-tinta-2: #52514e;
  --pv-tinta-3: #898781;
  --pv-grade: #e6e7e3;
  --pv-borda: rgba(11, 11, 11, 0.09);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  background-color: var(--pv-plano);
}

/* Tela unica: o painel ocupa exatamente a altura disponivel e os dois blocos
   dividem o que sobra depois dos filtros. Os graficos encolhem junto -- nada
   de rolagem em tela de desktop. So em tela baixa demais (ou celular) os
   blocos ganham altura minima e a rolagem volta, para nao esmagar o grafico. */
.pv {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  color: var(--pv-tinta);
}

.pv-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.pv-titulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--up-marca-escura);
}

.pv-apoio {
  margin: 0;
  font-size: 12px;
  color: var(--pv-tinta-2);
}

/* --- Filtros ---------------------------------------------------------------- */

.pv-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.pv-periodos {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--pv-borda);
  border-radius: 8px;
  background-color: var(--pv-superficie);
}

.pv-periodo {
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--pv-tinta-2);
}

.pv-periodo:hover {
  background-color: var(--pv-plano);
}

.pv-periodo.ativo {
  background-color: var(--up-azul-royal);
  color: #fff;
}

.pv-datas {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  color: var(--pv-tinta-2);
}

.pv-datas input,
.pv-vendedor select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--pv-borda);
  border-radius: 6px;
  background-color: var(--pv-superficie);
  font-family: var(--up-fonte);
  font-size: 12px;
  color: var(--pv-tinta);
}

.pv-vendedor select {
  min-width: 13rem;
  max-width: 100%;
}

.pv-situacoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.pv-situacoes:empty {
  display: none;
}

.pv-situacoes-rotulo {
  margin-right: 0.2rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--pv-tinta-2);
}

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 1px 9px;
  border: 1px solid var(--pv-borda);
  border-radius: 999px;
  background-color: var(--pv-superficie);
  font-size: 11.5px;
  color: var(--pv-tinta-3);
  user-select: none;
}

.pv-chip input {
  margin: 0;
  accent-color: var(--up-azul-royal);
}

.pv-chip.marcado {
  border-color: rgba(0, 80, 160, 0.35);
  background-color: #eef4fb;
  color: var(--pv-tinta);
}

.pv-chip-qtd {
  font-variant-numeric: tabular-nums;
  color: var(--pv-tinta-3);
}

.pv-erro {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-left: 4px solid #d70a23;
  border-radius: 4px;
  background-color: #fdf2f2;
  font-size: 13px;
}

.pv-erro[hidden] {
  display: none;
}

/* --- Blocos Pedido / Orcamento ---------------------------------------------- */

.pv-blocos {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.15s;
}

/* recarregando: mantem o desenho anterior esmaecido, sem piscar nem pular */
.pv-blocos.carregando {
  opacity: 0.5;
  pointer-events: none;
}

.pv-bloco {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 0.5rem 0.75rem 0.4rem;
  border: 1px solid var(--pv-borda);
  border-top: 3px solid var(--pv-cor);
  border-radius: 8px;
  background-color: var(--pv-superficie);
}

.pv-pedidos { --pv-cor: var(--pv-pedido); }
.pv-orcamentos { --pv-cor: var(--pv-orcamento); }

.pv-bloco-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.25rem;
}

.pv-bloco-titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pv-tinta);
}

.pv-bloco-sub {
  font-weight: 600;
  color: var(--pv-tinta-3);
}

.pv-chave {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background-color: var(--pv-cor);
}

/* totais do periodo: uma linha no cabecalho do bloco, nao cartoes soltos */
.pv-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
}

.pv-kpi {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.pv-kpi dt {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pv-tinta-3);
}

.pv-kpi dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pv-tinta);
  font-variant-numeric: tabular-nums;
}

.pv-graficos {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 0;
}

.pv-blocos.sem-ranking .pv-graficos {
  grid-template-columns: minmax(0, 1fr);
}

.pv-cartao {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.pv-cartao + .pv-cartao {
  padding-left: 0.75rem;
  border-left: 1px solid var(--pv-grade);
}

.pv-cartao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.pv-cartao-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--pv-tinta-2);
}

.pv-alternar-tabela {
  padding: 0 8px;
  border: 1px solid var(--pv-borda);
  border-radius: 6px;
  background: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--pv-tinta-2);
}

.pv-alternar-tabela[aria-pressed="true"] {
  background-color: var(--pv-plano);
  color: var(--pv-tinta);
}

/* o grafico preenche o cartao; o Chart.js redimensiona junto com a janela */
.pv-tela {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}

/* canvas fora do fluxo: o tamanho dele nao segura a altura do bloco quando a
   janela diminui (o Chart.js mede o pai e redesenha) */
.pv-tela canvas {
  position: absolute;
  inset: 0;
}

.pv-tela[hidden],
.pv-sem-dados[hidden],
.pv-tabela[hidden],
.pv-alternar-tabela[hidden] {
  display: none;
}

.pv-sem-dados {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 13px;
  color: var(--pv-tinta-3);
}

.pv-tabela {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.pv-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pv-tabela th,
.pv-tabela td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--pv-grade);
  text-align: left;
}

.pv-tabela th {
  position: sticky;
  top: 0;
  background-color: var(--pv-superficie);
  font-weight: 700;
  color: var(--pv-tinta-2);
}

.pv-tabela .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .pv-graficos {
    grid-template-columns: minmax(0, 1fr);
  }

  .pv-bloco {
    flex: 0 0 auto;
  }

  .pv-tela {
    flex: 0 0 auto;
    height: 240px;
  }

  .pv-cartao + .pv-cartao {
    padding: 0.5rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--pv-grade);
  }
}

/* --- Sem vendedor vinculado ------------------------------------------------- */

.pv-vazio {
  max-width: 34rem;
  margin: 3rem auto;
  padding: 2rem;
  border: 1px solid var(--pv-borda);
  border-radius: 12px;
  background-color: var(--pv-superficie);
  text-align: center;
}

.pv-vazio-icone {
  display: inline-flex;
  padding: 0.75rem;
  border-radius: 999px;
  background-color: #eef4fb;
  color: var(--up-azul-royal);
}

.pv-vazio h2 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.pv-vazio p {
  margin: 0;
  font-size: 13px;
  color: var(--pv-tinta-2);
}

/* ==========================================================================
   Sistema base (Uniplus): funcao bloqueada por configuracao feita LA
   (core/sistema_base.py + js/sistema_base.js). Azul e discreto, de proposito:
   nao e erro do operador, e um ajuste de configuracao.
   ========================================================================== */

/* Controle travado: o <span> recebe mouse/clique/Tab no lugar do botao
   desabilitado (que nao recebe nenhum dos tres) */
.bloqueio-base {
  display: inline-flex;
  cursor: help;
  border-radius: 4px;
}

.bloqueio-base > :disabled {
  pointer-events: none;
}

.bloqueio-base:focus-visible {
  outline: 2px solid var(--up-azul-sky);
  outline-offset: 1px;
}

/* lapis de editar cliente travado, ao lado da lupa: mesmo filete e cantos */
.campo-com-lupa .bloqueio-base .botao-lupa {
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.balao-sistema-base {
  position: fixed;
  z-index: 2000;
  max-width: 21rem;
  padding: 0.5rem 0.7rem 0.55rem;
  border: 1px solid #c9dcf0;
  border-left: 3px solid #2f6fb3;
  border-radius: 4px;
  background-color: #f5f9fd;
  box-shadow: 0 6px 16px rgba(0, 6, 12, 0.14);
  font-family: var(--up-fonte);
  animation: balao-sistema-base 0.12s ease-out;
}

.balao-sistema-base[hidden] {
  display: none;
}

.balao-sistema-base p {
  margin: 0;
}

.balao-sistema-base-titulo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2f6fb3;
}

.balao-sistema-base-texto {
  margin-top: 0.25rem !important;
  font-size: 12px;
  line-height: 1.4;
  color: var(--up-texto);
}

.balao-sistema-base-caminho {
  margin-top: 0.35rem !important;
  font-size: 11px;
  line-height: 1.35;
  color: var(--up-texto-suave);
}

.balao-sistema-base-caminho span::after {
  content: ": ";
}

.balao-sistema-base-caminho strong {
  font-weight: 600;
  color: #2f6fb3;
}

.balao-sistema-base-caminho[hidden] {
  display: none;
}

@keyframes balao-sistema-base {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Recusa vinda do servidor por configuracao do sistema base: o mesmo dialogo
   de recusa, trocado para o tom de aviso -- azul, sem o balanco do "nao",
   com "O que ajustar" e a linha "Onde ajustar". */
.dialogo-recusa.aviso-sistema-base[open] {
  animation: up-sucesso-entrada 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.aviso-sistema-base .recusa-circulo,
.aviso-sistema-base .recusa-sinal {
  stroke: #2f6fb3;
}

.aviso-sistema-base .recusa-ponto {
  fill: #2f6fb3;
}

.aviso-sistema-base .sucesso-titulo {
  font-size: 1.15rem;
}

.aviso-sistema-base .recusa-motivo {
  border-left-color: #2f6fb3;
  background-color: #eef5fc;
}

.aviso-sistema-base .recusa-motivo-rotulo {
  color: #2f6fb3;
}

.aviso-sistema-base .recusa-motivo p {
  font-weight: 500;
}

.recusa-caminho {
  margin: 0.45rem 0 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--up-texto-suave) !important;
}

.recusa-caminho strong {
  font-weight: 600;
  color: #2f6fb3;
}

.recusa-caminho[hidden] {
  display: none;
}

/* --- Fiscal > Nota fiscal de saida (Visualizar) ----------------------------
   Copia da tela do Uniplus: oito abas espalhadas na largura toda, grade de 24
   colunas (as larguras do Uniplus nao cabem nas 12 da casa -- IE, Contribuinte,
   Tipo e Celular tem 1,5 coluna cada) e rodape em duas faixas: credito e totais
   em cima, botoes embaixo. So leitura: todos os campos vem desabilitados. */

.painel-documento #formNotaFiscal {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

#formNotaFiscal > .abas-internas {
  flex-shrink: 0;
  margin-bottom: 0.6rem;
}

#formNotaFiscal .aba-interna {
  flex: 1 1 0;
  padding: 0.45rem 0.6rem;
  font-size: 13px;
}

/* Espaco entre colunas SEM `column-gap`: com 24 colunas, 23 vaos fixos de
   ~17px somam ~400px, mais que a largura de um cartao estreito (os 4 do
   Subtotal) -- os campos vazavam para fora a 100% de zoom. O respiro vira
   recuo lateral de cada `.campo` (meio vao de cada lado), e a grade, que so
   tem trilhas `minmax(0, 1fr)`, encolhe com o cartao em qualquer largura.
   A margem negativa na grade devolve o alinhamento das bordas. */
#formNotaFiscal .bloco-campos {
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 0.5rem 0;
  padding: 0.9rem 0.55rem 1.1rem;
  box-shadow: 0 1px 4px rgba(0, 6, 12, 0.12);
}

#formNotaFiscal .bloco-campos.bloco-sem-moldura {
  margin: 0 -0.55rem;
}

#formNotaFiscal .bloco-campos > .campo {
  padding: 0 0.55rem;
}

#formNotaFiscal .campo {
  gap: 0.05rem;
  grid-column: span 24;
  min-width: 0;
}

@media (min-width: 768px) {
  #formNotaFiscal .nf-2 { grid-column: span 2; }
  #formNotaFiscal .nf-3 { grid-column: span 3; }
  #formNotaFiscal .nf-4 { grid-column: span 4; }
  #formNotaFiscal .nf-6 { grid-column: span 6; }
  #formNotaFiscal .nf-8 { grid-column: span 8; }
  #formNotaFiscal .nf-12 { grid-column: span 12; }
}

/* Medidas do padrao da casa (Cadastros, Pedido/Orcamento): rotulo 10.5px,
   campo com 2px 4px de padding e fonte 11.5px. */
#formNotaFiscal .campo label {
  font-size: 10.5px;
  line-height: 1.25;
}

/* campo de consulta: cinza claro, texto legivel (nao o cinza apagado de um
   campo desabilitado comum -- aqui o valor e a informacao da tela) */
#formNotaFiscal .campo input:not([type="checkbox"]),
#formNotaFiscal .campo select {
  padding: 2px 4px;
  font-size: 11.5px;
  line-height: 1.35;
  border-radius: 3px;
  border-color: var(--up-borda);
  background-color: var(--up-cinza-frio);
  color: var(--up-texto);
  opacity: 1;
}

#formNotaFiscal .campo select:disabled {
  cursor: default;
}

/* Cliente + botao azul de atualizar, separados como no Uniplus */
.nf-cliente-linha {
  display: flex;
  gap: 1.2rem;
}

.botao-nf-cliente {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  border: 1px solid #8fa8e0;
  border-radius: 4px;
  background-color: #a9bdf0;
  color: #fff;
}

/* Icones DENTRO do campo (CEP, calendario, relogio): o grupo leva a moldura e
   o fundo do campo, e o input perde a dele */
.campo-com-icones {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--up-borda);
  border-radius: 3px;
  background-color: var(--up-cinza-frio);
}

#formNotaFiscal .campo-com-icones input {
  border: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.botao-no-campo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  border: 0;
  border-left: 1px solid var(--up-borda-suave);
  background: none;
  color: var(--up-cinza-chumbo);
}

.botao-nf-cliente:disabled,
.botao-no-campo:disabled {
  cursor: default;
}

/* "Emissao": caixa verde marcada, como no Uniplus. Desenhada a mao
   (appearance: none) porque o navegador pinta de cinza toda caixa desabilitada,
   e aqui ela e so leitura. */
#formNotaFiscal .campo .marca-nf {
  appearance: none;
  width: 21px;
  height: 21px;
  margin: 0.1rem 0 0;
  border: 1px solid var(--up-borda);
  border-radius: 3px;
  background-color: var(--up-cinza-frio);
  opacity: 1;
}

#formNotaFiscal .campo .marca-nf:checked {
  border-color: #7cb342;
  background: #9ccc65 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* --- Rodape da nota -------------------------------------------------------- */

#formNotaFiscal .rodape-nota {
  margin: auto -1.5rem 0;
  bottom: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.5rem 1.5rem 0.35rem;
}

.rodape-nota-valores {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.nf-credito,
.nf-totais {
  display: flex;
}

.nf-credito .nf-valor {
  align-items: center;
  min-width: 9rem;
}

.nf-credito .nf-valor + .nf-valor {
  margin-left: 6rem;
}

/* totais encostados na direita, com o filete tracejado entre eles */
.nf-totais .nf-valor {
  align-items: flex-end;
  min-width: 11rem;
  padding: 0 1.2rem;
}

.nf-totais .nf-valor + .nf-valor {
  border-left: 1px dashed var(--up-borda);
}

.nf-totais .nf-valor:last-child {
  padding-right: 0;
}

.nf-valor {
  display: flex;
  flex-direction: column;
}

.nf-valor-rotulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--up-cinza-chumbo);
}

.nf-valor-numero {
  font-size: 17px;
  color: var(--up-azul-escuro);
  white-space: nowrap;
}

.nf-valor-numero.nf-total {
  font-size: 22px;
}

.rodape-nota .acoes-formulario {
  justify-content: flex-end;
  gap: 0.3rem;
}

.rodape-nota .acoes-formulario .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
}

@media (max-width: 991.98px) {
  .rodape-nota-valores {
    flex-direction: column;
    align-items: stretch;
  }

  .nf-credito .nf-valor + .nf-valor {
    margin-left: 2rem;
  }
}

/* --- Nota fiscal (Visualizar) > aba Itens ---------------------------------- */

/* Sub-abas Produtos/Servicos: encostadas na esquerda, a ativa com fundo cinza
   (e nao o sublinhado das abas principais), como no Uniplus */
#formNotaFiscal .sub-abas-nf {
  margin-bottom: 0.4rem;
  border-bottom: 0;
}

#formNotaFiscal .sub-abas-nf .aba-interna {
  flex: 0 0 12.5rem;
  padding: 0.3rem 0.6rem;
  border-bottom: 0;
  color: var(--up-texto);
}

#formNotaFiscal .sub-abas-nf .aba-interna.ativa {
  background-color: #e8e8e8;
  color: var(--up-texto);
}

#formNotaFiscal .sub-abas-nf .aba-interna:disabled {
  color: var(--up-borda);
}

/* cartoes "Incluir item" e "Itens" */
.bloco-nf {
  margin-bottom: 0.6rem;
  padding: 0.7rem 1.1rem 0.6rem;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 6, 12, 0.12);
}

.titulo-bloco-nf {
  margin: 0 0 0.4rem;
  font-size: 15px;
  color: var(--up-azul-sky);
}

#formNotaFiscal .bloco-campos.bloco-sem-moldura {
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* forca o proximo campo para a linha de baixo (CFOP sozinho, como la) */
#formNotaFiscal .nf-quebra {
  grid-column: 1 / -1;
  height: 0;
}

#formNotaFiscal .campo input.texto-direita {
  text-align: right;
}

.nf-produto-linha {
  gap: 1rem;
}

.botao-nf-lupa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  border: 0;
  border-radius: 3px;
  background-color: #6aa7dc;
  color: #fff;
}

.botao-nf-lupa:disabled {
  cursor: default;
}

.acoes-bloco-nf {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--up-borda-suave);
}

.acoes-bloco-nf .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
  border: 0;
  color: #fff;
  text-transform: uppercase;
}

/* cores dos botoes do Uniplus; travados, ficam no tom claro de la */
.acoes-bloco-nf .botao-acao:disabled {
  opacity: 0.6;
  cursor: default;
}

.botao-nf-ok { background-color: #9ccc65; }
.botao-nf-limpar { background-color: #78909c; }
.botao-nf-alterar { background-color: #26808f; }
.botao-nf-excluir { background-color: #f4743b; }
.botao-nf-kit { background-color: #4a90d9; }
.botao-nf-dimensoes { background-color: #4db6ac; }

/* Grade: larguras fixas do Uniplus (colgroup), rolagem na horizontal */
.grade-itens-nf {
  min-height: 11rem;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--up-borda);
}

#gradeNfItens {
  table-layout: fixed;
  width: 1671px;
}

#gradeNfItens th,
#gradeNfItens td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#gradeNfItens th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 700;
}

.legenda-nf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin: 0.2rem 0 0.4rem;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--up-cinza-chumbo);
}

.bolinha-nf {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.3rem;
  border-radius: 50%;
}

.bolinha-nf.verde { background-color: #b6e3a8; }
.bolinha-nf.vermelha { background-color: #f28b82; }
.bolinha-nf.amarela { background-color: #fff176; }

/* --- Nota fiscal (Visualizar) > Subtotal, Financeiro, Comissao, Transporte,
   Retirada/Entrega e Inf. Complementares ------------------------------------ */

@media (min-width: 768px) {
  #formNotaFiscal .nf-5 { grid-column: span 5; }
  #formNotaFiscal .nf-7 { grid-column: span 7; }
  #formNotaFiscal .nf-9 { grid-column: span 9; }
}

/* cartoes lado a lado (Subtotal: 4; Financeiro e Inf. Complementares: 2) */
.nf-cartoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

@media (min-width: 992px) {
  .nf-cartoes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-cartoes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.nf-cartoes > .bloco-nf {
  margin-bottom: 0;
}

/* cartao dentro de cartao (Dados cheque, Outros parcelamentos, os dois do
   Financeiro): mesma moldura, respiro menor */
.bloco-nf .bloco-nf {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.9rem;
}

#formNotaFiscal .campo textarea {
  min-height: 92px;
  padding: 2px 4px;
  font-size: 11.5px;
  line-height: 1.4;
  border-radius: 3px;
  border-color: var(--up-borda);
  background-color: var(--up-cinza-frio);
  color: var(--up-texto);
  resize: vertical;
}

#formNotaFiscal .bloco-nf > .campo + .campo {
  margin-top: 0.5rem;
}

/* botao "impressora" do POS: o azul claro do Uniplus */
.botao-nf-lupa.botao-nf-claro {
  background-color: #9db8e8;
}

/* grades que ocupam a largura toda (Servicos, parcelas): proporcoes do
   colgroup, sem rolagem horizontal */
#formNotaFiscal .grade-nf-larga {
  table-layout: fixed;
  width: 100%;
}

#formNotaFiscal .grade-nf-larga th,
#formNotaFiscal .grade-nf-larga td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#formNotaFiscal .grade-nf-larga th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 700;
}

.grade-parcelas-nf {
  min-height: 6.5rem;
}

.acoes-bloco-nf.sem-filete {
  border-top: 0;
  padding-top: 0;
}

/* "Carregar" da entrega: na linha do combo, alinhado pela base */
#formNotaFiscal .campo-botao-nf {
  justify-content: flex-end;
  align-items: flex-start;
}

#formNotaFiscal .campo-botao-nf .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
  border: 0;
  color: #fff;
  text-transform: uppercase;
  opacity: 0.6;
}

/* --- Vendas > Pedido de Faturamento ------------------------------------------
   O formulario do Pedido de Venda (#formDocumento, mesmas medidas de campo)
   no desenho da tela "Ped. Faturamento" do Uniplus: sete abas espalhadas na
   largura toda, grade de 24 colunas (as mesmas classes `nf-*` da Nota fiscal
   de saida), cartoes "Incluir item"/"Itens" e rodape em duas faixas, totais
   em cima e botoes embaixo. Aqui os campos sao EDITAVEIS: ficam brancos com a
   borda azul do Uniplus; so os calculados/copiados ficam cinza.
   `#formDocumento` nos seletores: as regras do Pedido de Venda sao escopadas
   pelo id, e sem ele venceriam estas. */

#formDocumento#formDocumento.form-faturamento > .abas-internas {
  flex-shrink: 0;
  margin-bottom: 0.6rem;
}

#formDocumento.form-faturamento .aba-interna {
  flex: 1 1 0;
  padding: 0.45rem 0.6rem;
  font-size: 13px;
}

/* mesmo truque da nota: sem `column-gap`, o respiro vira recuo de cada campo */
#formDocumento.form-faturamento .bloco-campos {
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 0.5rem 0;
  padding: 0.9rem 0.55rem 1.1rem;
  box-shadow: 0 1px 4px rgba(0, 6, 12, 0.12);
}

#formDocumento.form-faturamento .bloco-campos > .campo {
  padding: 0 0.55rem;
}

#formDocumento.form-faturamento .campo {
  grid-column: span 24;
  min-width: 0;
}

@media (min-width: 768px) {
  #formDocumento.form-faturamento .nf-2 { grid-column: span 2; }
  #formDocumento.form-faturamento .nf-3 { grid-column: span 3; }
  #formDocumento.form-faturamento .nf-4 { grid-column: span 4; }
  #formDocumento.form-faturamento .nf-5 { grid-column: span 5; }
  #formDocumento.form-faturamento .nf-6 { grid-column: span 6; }
  #formDocumento.form-faturamento .nf-7 { grid-column: span 7; }
  #formDocumento.form-faturamento .nf-8 { grid-column: span 8; }
  #formDocumento.form-faturamento .nf-9 { grid-column: span 9; }
  #formDocumento.form-faturamento .nf-12 { grid-column: span 12; }
}

#formDocumento.form-faturamento .nf-quebra {
  grid-column: 1 / -1;
  height: 0;
}

/* Condicao de pagamento e Vendedor da aba Geral: largura pelo nome escolhido
   (pedido de 23/09/2026). Na grade um campo tem largura fixa (nf-3 cortava
   nome comprido), entao os dois ficam numa faixa flex da linha inteira. O
   piso e 3/24 da faixa -- a mesma largura das datas, porque a grade nao tem
   column-gap e a faixa tem a largura util do bloco --, o teto e a metade da
   linha. `field-sizing: content` faz o <select> medir a opcao ESCOLHIDA e
   acompanhar cada troca, sem JS; navegador sem suporte cai no piso. */
#formDocumento.form-faturamento .campos-crescentes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
}

#formDocumento.form-faturamento .campos-crescentes > .campo {
  flex: 0 0 auto;
  width: 100%;
  padding: 0 0.55rem;
}

@media (min-width: 768px) {
  #formDocumento.form-faturamento .campos-crescentes > .campo {
    width: auto;
    min-width: calc(100% * 3 / 24);
    max-width: 50%;
  }

  #formDocumento.form-faturamento .campos-crescentes select {
    field-sizing: content;
    width: auto;
    min-width: 100%;
    max-width: 100%;
  }
}

/* campo editavel: a borda azul do Uniplus */
#formDocumento.form-faturamento .campo input:not([type="checkbox"]):not(:disabled),
#formDocumento.form-faturamento .campo select:not(:disabled),
#formDocumento.form-faturamento .campo textarea {
  border-color: #3b64c4;
}

#formDocumento.form-faturamento .campo select:disabled {
  background-color: var(--up-cinza-frio);
  color: var(--up-texto-suave);
  opacity: 1;
}

#formDocumento.form-faturamento .campo input.texto-direita {
  text-align: right;
}

#formDocumento.form-faturamento .bloco-campos.bloco-sem-moldura {
  margin: 0 -0.55rem;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Brinde: a caixa sozinha embaixo do rotulo */
#formDocumento.form-faturamento .campo-marca-faturamento .campo-marca {
  width: 21px;
  height: 21px;
  margin-top: 0.1rem;
}

/* icones dentro do campo (CEP, telefone) num campo que se digita */
#formDocumento.form-faturamento .campo-com-icones-editavel {
  border-color: #3b64c4;
  background-color: #fff;
}

#formDocumento.form-faturamento .campo-com-icones input {
  border: 0;
  min-width: 0;
  flex: 1 1 auto;
}

#formDocumento.form-faturamento .campo-com-icones input:focus {
  box-shadow: none;
}

#formDocumento.form-faturamento .botao-no-campo:enabled {
  color: #3b64c4;
}

/* "Carregar" da entrega: na linha do combo, alinhado pela base */
#formDocumento.form-faturamento .campo-botao-nf {
  justify-content: flex-end;
  align-items: flex-start;
}

#formDocumento.form-faturamento .campo-botao-nf .botao-acao,
#formDocumento .acoes-bloco-nf .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
  border: 0;
  color: #fff;
  text-transform: uppercase;
}

#formDocumento.form-faturamento .observacao-faturamento,
#formDocumento.form-faturamento #observacao {
  min-height: 70px;
}

#formDocumento.form-faturamento .bloco-complementares {
  padding-top: 3.2rem;
}

/* Inf. Complementares: a observacao ocupa metade da largura, como la */
#formDocumento.form-faturamento .bloco-complementares .campo {
  grid-column: span 24;
}

@media (min-width: 768px) {
  #formDocumento.form-faturamento .bloco-complementares .campo {
    grid-column: span 12;
  }
}

/* --- Aba Itens ---------------------------------------------------------------- */

/* sub-aba "Itens" encostada na esquerda, com o fundo cinza do Uniplus */
.sub-abas-faturamento {
  display: flex;
  margin-bottom: 0.4rem;
}

.sub-aba-faturamento {
  flex: 0 0 12.5rem;
  padding: 0.3rem 0.6rem;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--up-texto);
}

.sub-aba-faturamento.ativa {
  background-color: #e8e8e8;
}

/* A aba Itens ocupa a altura que sobra e so a grade rola (mesma ideia do
   Pedido de Venda, mas a grade aqui esta dentro do cartao "Itens") */
#formDocumento.form-faturamento #painelItens.ativa {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#formDocumento.form-faturamento #painelItens.ativa > * {
  flex-shrink: 0;
}

#formDocumento.form-faturamento #painelItens.ativa > #cartaoItens {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* mesmo cuidado do Pedido de Venda: a grade fica de fora do `flex-shrink: 0`.
   A nota antiga dizia que `#formDocumento.form-faturamento #envolucroItens`
   devolvia o `flex: 1 1 auto` "por vir depois com a mesma especificidade" --
   nao vinha: o `:not(.rolagem-interna)` pesa uma classe a mais e VENCIA o
   flex-shrink. Como o envolucro daqui nao tinha `.rolagem-interna` (usava uma
   classe que nem existia na folha), ele nunca encolhia: crescia com os itens,
   o cartao estourava, a pagina rolava inteira e o rodape colado na base cobria
   as linhas. Com a classe certa no HTML a grade volta a ser a unica que cede
   altura, igual ao Pedido/Orcamento. */
#formDocumento.form-faturamento #cartaoItens > :not(.rolagem-interna) {
  flex-shrink: 0;
}

/* `.rolagem-interna` ja da `flex: 1 1 auto` e `overflow-y: auto`; aqui sobra o
   que e so desta tela -- a grade tem 1914px fixos, entao precisa rolar tambem
   na horizontal (`overflow: auto`, nos dois eixos). */
#formDocumento.form-faturamento #envolucroItens {
  min-height: 10rem;
  overflow: auto;
  border: 1px solid var(--up-borda);
}

/* larguras do Uniplus (colgroup) e rolagem na horizontal, como la. Eram
   1914px; +125px da coluna "Codigo de barras" (produto.ean). */
#formDocumento.form-faturamento #gradeItens {
  table-layout: fixed;
  width: 2039px;
}

#formDocumento.form-faturamento #gradeItens th,
#formDocumento.form-faturamento #gradeItens td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* o cabecalho fixo vem de `.grade-envolucro.rolagem-interna .grade-planilha th`
   (sticky + z-index 2), o mesmo das outras grades; aqui so o peso da fonte. */
#formDocumento.form-faturamento #gradeItens th {
  font-weight: 700;
}

#formDocumento.form-faturamento #gradeItens .centro {
  text-align: center;
}

/* linha marcada: e sobre ela que a barra de botoes age (as tres telas) */
#formDocumento #gradeItens tbody tr.linha-selecionada td {
  background-color: #b9dcf5;
}


/* --- Mover para cima / para baixo -----------------------------------------
   As duas linhas trocam de lugar deslizando e a movida ainda recebe um realce
   que some sozinho -- sem isso a troca e instantanea e o operador perde de
   vista qual item andou. O deslize nasce em `--desloca` (a altura da outra
   linha, medida no JS antes de redesenhar) e termina em zero. */

@keyframes desliza-item {
  from { transform: translateY(var(--desloca, 0)); }
  to   { transform: translateY(0); }
}

#formDocumento #gradeItens tbody tr.item-deslizando {
  animation: desliza-item 260ms ease-out;
  /* durante o deslize a linha passa por cima das vizinhas */
  position: relative;
  z-index: 2;
}

/* Moldura azul por dentro da celula, que se apaga. E `box-shadow` e nao
   `background`: assim o realce convive com a cor da linha marcada, em vez de
   disputar a mesma propriedade com ela. */
@keyframes realca-item {
  from { box-shadow: inset 0 0 0 2px var(--up-azul-royal); }
  to   { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0); }
}

#formDocumento #gradeItens tbody tr.item-movido td {
  animation: realca-item 900ms ease-out;
}

/* Quem pediu menos movimento no sistema operacional ve so o realce. */
@media (prefers-reduced-motion: reduce) {
  #formDocumento #gradeItens tbody tr.item-deslizando {
    animation: none;
  }
}

.barra-itens {
  margin-top: 0.5rem;
}

/* travados ficam no tom claro de la (ver .acoes-bloco-nf .botao-acao:disabled) */
#formDocumento .acoes-bloco-nf .botao-acao:disabled {
  opacity: 0.6;
  cursor: default;
}

#formDocumento.form-faturamento #painelItens .campo-com-lupa .botao-lupa {
  margin-left: 1rem;
  border-radius: 3px;
}

/* --- Rodape: o mesmo do Pedido de Venda (`.rodape-documento`) --------------------
   Aqui so o encaixe no card do faturamento: colado na base e rente as bordas. */

#formDocumento.form-faturamento .rodape-faturamento {
  margin: auto -1.5rem 0;
  bottom: 0;
}

/* ==========================================================================
   Cursor do sistema -- regra do cliente (22/09/2026)
   Em toda tela o cursor e a SETINHA padrao do Windows. Nada de maozinha em
   botao, link, aba, linha de grade ou cartao, e nada do cursor de texto em
   cima de texto que nao se edita (as abas internas do Orcamento, rotulos,
   titulos). O cursor de texto fica SO no campo em que se digita -- campo
   desabilitado ou somente leitura tambem mostra a setinha.

   Por que numa regra so, no fim da folha, e nao espalhado: a maozinha vinha
   de tres lugares -- esta folha (as ~30 declaracoes foram tiradas no mesmo
   dia), o Bootstrap (`button`, `.btn`, `[role=button]`...) e o proprio
   navegador (todo link). O cursor de texto sobre texto comum e o `auto` do
   navegador. `body` com a setinha resolve o `auto` por heranca; a lista de
   baixo neutraliza quem declara a maozinha, com `inherit` e NAO `default`:
   durante o arraste de coluna a AG Grid (e o nosso `body.redimensionando`)
   pinta o cursor no body e conta com a heranca para ele valer em cima de
   qualquer elemento.

   Mantidos de proposito, a pedido do cliente: o de proibido nos botoes
   desabilitados, os de redimensionar/mover colunas das grades e o de ajuda
   do aviso de sistema base. O de "carregando" saiu.
   ========================================================================== */

html,
body {
  cursor: default;
}

a,
button,
summary,
label,
select,
input,
textarea,
.btn,
[role="button"],
[type="button"],
[type="reset"],
[type="submit"],
.ag-root-wrapper,
.ag-root-wrapper * {
  cursor: inherit !important;
}

/* o botao "x" que o Chrome poe no campo de busca */
input::-webkit-search-cancel-button {
  cursor: inherit !important;
}

/* onde se digita de verdade */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not(:disabled):not([readonly]),
textarea:not(:disabled):not([readonly]),
[contenteditable=""],
[contenteditable="true"] {
  cursor: text !important;
}

/* --- Excecoes mantidas ------------------------------------------------------ */

/* botao que nao pode ser clicado agora (o motivo vai no `title`) */
.botao-acao:disabled,
.aba-interna:disabled,
.menu-opcoes-item:disabled {
  cursor: not-allowed !important;
}

/* bloqueado por configuracao do Uniplus: o balao explica ao passar o mouse */
.bloqueio-base,
.bloqueio-base * {
  cursor: help !important;
}

/* colunas das grades: puxador de largura e arraste de ordem (nossa .grade) */
.puxador,
body.redimensionando,
body.redimensionando * {
  cursor: col-resize !important;
}

.grade th.movel {
  cursor: grab !important;
}

.grade th.movel:active {
  cursor: grabbing !important;
}

/* ...e as mesmas alças na AG Grid (listagens) */
.ag-root-wrapper .ag-header-cell-resize {
  cursor: ew-resize !important;
}

.ag-root-wrapper .ag-drag-handle {
  cursor: grab !important;
}