/* ==========================================================================
   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;

  /* Papel de parede da area de trabalho: indigo dessaturado, para as formas
     brancas de fundo-sistema.svg continuarem legiveis por cima. */
  --up-desktop: #4d58b8;

  /* 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;

  /* 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: #f4f7fd;
  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);
  cursor: pointer;
}

.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);
  cursor: pointer;
}

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

/* --- 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;
  cursor: pointer;
  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);
  cursor: progress;
}

@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: vermelho com a ilustracao ancorada no rodape */
  background-color: var(--up-desktop);
  background-image: url("/static/img/fundo-sistema.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}

/* --- 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);
}

.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 ("Pauta fixa por vendedor") */
.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;
  cursor: pointer;
  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] {
  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 {
  cursor: progress;
}

.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"] {
  border-left-color: #e0a526;
}

.cartao-agente[data-estado="ausente"] .cartao-agente-icone,
.cartao-agente[data-estado="nao-autorizado"] .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);
}

.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);
  cursor: pointer;
}

.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 no cursor e numa barra fina
   sobre o cabecalho: a tela atual continua visivel e clicavel (o router
   cancela o fetch anterior se vier outro clique). */
body.navegando {
  cursor: progress;
}

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;
}

.senha-tecnica-campo input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--up-borda);
  border-radius: 4px;
  font-family: var(--up-fonte);
  font-size: 1.25rem;
  letter-spacing: 0.35em;
  text-align: center;
}

/* 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;
  }
}

.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;
}

/* ==========================================================================
   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;
}

.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
     #gradeVendedores    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;
}

/* Retangulo horizontal em vez de quadrado: a altura fica travada (nao pode
   empurrar a linha) e a area de clique cresce para o lado, que e onde ha
   espaco de sobra na coluna "Acoes".

   Os 13px de altura NAO sao o piso da linha: a celula de texto pede
   16 (line-height) + 4 (padding) + 1 (borda) = 21, e a de Acoes passa a pedir
   13 + 4 + 1 = 18. Quem manda na altura da linha e o texto, entao esta regra
   nao mexe nos 21px.

   `display: flex` (de bloco) ja vem de `.botao-icone-item`; o que muda aqui e
   so a proporcao. A centralizacao e por flex justamente para o icone nao
   esticar junto com a largura -- um `<svg>` de 13px num flex nao e redimen-
   sionado, so posicionado. */
#gradeItens .botao-icone-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 13px;
}

/* 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;
}

/* `display: flex` (de bloco, nao `inline-flex`): um inline-flex participa da
   caixa de linha da celula e carrega junto o meio-espaco da fonte, ~2,4px que
   nao somem nem com `vertical-align: middle`. Como bloco, a celula passa a ter
   exatamente a altura dos botoes. `justify-content` repoe a centralizacao que
   vinha do `text-align: center` do <td>, que o bloco flex ignora. */
.grade-planilha .acoes-item-linha {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.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;
  cursor: pointer;
}

.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);
  cursor: pointer;
}

/* 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;
  cursor: pointer;
}

.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;
}

/* --- 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;
}

.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);
}

/* colunas fixas da esquerda: lapis e caixa de marcar */
.grade-ag .celula-indicador,
.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;
}

.grade-ag .lapis {
  display: inline-flex;
  visibility: hidden;
  color: var(--up-cinza-chumbo);
}

/* o lapis marca a linha corrente, como no ERP */
.grade-ag .ag-row-focus .lapis {
  visibility: visible;
}

/* 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.4rem;
  padding: 0.4rem 0.1rem 0;
}

.botao-ferramenta-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  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;
  cursor: pointer;
  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);
  cursor: pointer;
}

.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);
  cursor: pointer;
}

/* 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);
}

/* Editar/excluir item da grade: dois botoes so com icone, lado a lado. */
.acoes-item-linha {
  display: inline-flex;
  gap: 0.35rem;
}

/* 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);
}

/* Subir/descer item da grade: azul royal da paleta, contornado como o lapis
   para nao competir com o vermelho da lixeira. */
.botao-mover-item {
  border-color: var(--up-azul-royal);
  background-color: #fff;
  color: var(--up-azul-royal);
}

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

/* primeira linha nao sobe, ultima nao desce */
.botao-mover-item:disabled {
  cursor: default;
}

/* 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-topo .bloco-titulo {
  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 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);
}

/* 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. */
#formDocumento .abas-internas {
  margin-bottom: 0.5rem;
}

#formDocumento .aba-interna {
  padding: 0.3rem 0.9rem;
  font-size: 11.5px;
}

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

#formDocumento .bloco-campos {
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
}

#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.
   Cadastro novo entra nas TRES listas deste bloco e nas duas do rodape
   (`.painel-documento`, mais abaixo). */
#formCliente .campo,
#formProduto .campo,
#formVendedor .campo {
  gap: 0.05rem;
}

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

#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"]),
#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 {
  cursor: pointer;
  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);
}

.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;
}

/* --- 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;
}

#formDocumento .rodape-formulario,
#formCliente .rodape-formulario,
#formProduto .rodape-formulario,
#formVendedor .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;
}

.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. */
.rodape-documento .acoes-formulario .botao-acao,
.barra-ferramentas .botao-acao,
.dialogo-largo .dialogo-rodape .botao-acao {
  height: 28px;
  padding: 0 0.85rem;
  gap: 0.5rem;
}

/* o botao do funil e so icone: o recuo lateral de um botao com texto o
   deixaria largo a toa */
.barra-ferramentas .botao-filtro {
  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 {
  cursor: pointer;
}

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

/* coluna estreita do lapis: marca a linha corrente, como no ERP */
.grade .indicador {
  width: 1.6rem;
  padding-inline: 0.35rem;
  text-align: center;
  border-right: 1px solid var(--up-borda-suave);
}

.grade .lapis {
  display: inline-flex;
  visibility: hidden;
  color: var(--up-cinza-chumbo);
}

.grade tbody tr.atual .lapis {
  visibility: visible;
}

.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 .indicador,
.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);
}

.etiqueta-status.status-0 {
  background-color: #e3f1e4;
  color: #3d7a42;
}

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

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

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

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

.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. */
.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;
}

/* --- 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;
  cursor: pointer;
}

.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;
}

.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;
}

.limpar-filtro {
  font-size: 11px;
  color: var(--up-primaria-escuro);
}

@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);
}

.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: 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;
}

/* Com a rolagem por dentro, o cabecalho sairia de vista na primeira rolada.
   Escopado no modificador: nas grades que NAO rolam por dentro (a de itens do
   Pedido) o sticky nao teria efeito, mas tambem nao ha por que aplicar. */
.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;
  cursor: pointer;
  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;
}

/* As grades do painel (vendedor x pauta e usuarios) usam a variante
   `.grade-planilha`, definida junto de `.grade` la em cima -- o que sobra de
   especifico daqui e so a largura da coluna do <select>. */
.coluna-pauta {
  width: 13rem;
}

/* ==========================================================================
   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);
}

.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);
  cursor: pointer;
  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);
}