/* ============================================================
   Sistema de Estoque EBN — identidade visual
   Paleta oficial EBN + fonte Outfit (SIL Open Font License)
   ============================================================ */

@font-face{font-family:'Outfit';src:url('fontes/outfit-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Outfit';src:url('fontes/outfit-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'Outfit';src:url('fontes/outfit-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap}

html{font-size: calc(16px * var(--escala-letra, 1));}

:root{
  /* Tamanho da letra: o rodapé de cada tela muda esta variável, e o
     sistema inteiro cresce junto porque tudo é medido em rem — texto,
     botão, campo de digitar. Muita gente na obra enxerga mal. */
  --escala-letra: 1;

  /* Paleta EBN */
  --azul:#4862CA;            /* Azul Estrutura     */
  --azul-profundo:#21306F;   /* Azul Profundo      */
  --laranja:#E06F2D;         /* Laranja Construção */
  --terracota:#8E441A;       /* Terracota Solo     */
  --cinza:#3B3B3B;           /* Cinza Estrutural   */
  --concreto:#ECECEC;        /* Concreto Claro     */
  --areia:#F4F0E6;           /* Branco Areia       */

  /* Derivados de uso */
  --texto:var(--cinza);
  --texto-fraco:#6E6E6E;
  --borda:rgba(59,59,59,.18);
  --cartao:#FFFFFF;
  --ok:#1B7A4B;      --ok-fundo:#E7F5EE;
  --erro:#B3261E;    --erro-fundo:#FCEDEB;
  --aviso:#8E441A;   --aviso-fundo:#FBEEE2;

  --fonte:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --raio:12px;
}

*{box-sizing:border-box}
img{max-width:100%; height:auto}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--areia); color:var(--texto);
  font-family:var(--fonte); font-size:1.0625rem; line-height:1.5;
  font-feature-settings:"tnum" 1;
}

/* ---------- Topo ---------- */
.topo{
  background:var(--azul-profundo); padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topo .marca{display:flex; align-items:center; text-decoration:none;
  min-width:0; flex:0 1 auto}
.topo .marca img{max-width:100%}
/* O botão e o nome ficam juntos à direita, sem disputar com o logo */
.topo-direita{display:flex; align-items:center; gap:.75rem; flex:0 0 auto}
.topo .marca img{height:1.625rem; width:auto; max-width:190px; display:block}
.quem{color:var(--concreto); font-size:0.875rem; opacity:.9; white-space:nowrap}

.conteudo{max-width:780px; margin:0 auto; padding:18px 16px 44px}
h1{font-size:1.4375rem; font-weight:700; margin:6px 0 18px; color:var(--azul-profundo)}
h2{font-size:1.1875rem; font-weight:700; margin:30px 0 12px; color:var(--azul-profundo)}

/* ---------- Formulários ---------- */
label{display:block; margin:16px 0 6px; font-size:0.9375rem; font-weight:500; color:var(--texto-fraco)}
input,select,textarea{
  width:100%; padding:0.875rem; font-size:1.0625rem; font-family:var(--fonte);
  border:1.5px solid var(--borda); border-radius:10px;
  background:var(--cartao); color:var(--texto);
}
input:focus,select:focus{outline:3px solid rgba(72,98,202,.28); border-color:var(--azul)}
input[readonly]{background:var(--concreto); color:var(--texto-fraco)}

/* ---------- Botões ---------- */
/* O botão do sistema é usado como <button> e como <a>. Com
   "inline-block" o navegador centraliza o texto sozinho no <button>,
   mas no <a> ele encosta no topo — e o mesmo botão fica torto conforme
   a tag. "inline-flex" com centro nos dois eixos deixa os dois iguais,
   qualquer que seja a altura. */
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:3.25rem; padding:0.875rem 1.125rem;
  background:var(--azul); color:#fff; border:0; border-radius:10px;
  font-family:var(--fonte); font-size:1.0625rem; font-weight:700; letter-spacing:.3px;
  line-height:1.2; text-align:center; text-decoration:none; cursor:pointer;
  margin-top:16px; box-sizing:border-box;
}
.botao:active{filter:brightness(.92)}
.botao.grande{min-height:3.625rem; font-size:1.125rem}
.botao.pequeno{
  width:auto; min-height:2.5rem; padding:0.5rem 0.875rem; font-size:0.875rem; font-weight:500;
  margin:4px 6px 0 0; background:var(--cartao); color:var(--azul-profundo);
  border:1.5px solid var(--borda); white-space:nowrap;
}
.botao.perigo{background:var(--terracota)}

/* ---------- Quatro ações do operador ---------- */
.acoes{display:grid; gap:14px; margin-top:8px}
.botao.acao{
  min-height:5.125rem; margin:0; font-size:1.375rem; letter-spacing:1px;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.botao.acao .seta{font-size:1.625rem; font-weight:400; opacity:.9}
.acao-receber{background:var(--azul)}
.acao-enviar{background:var(--laranja)}
.acao-transferir{background:var(--azul-profundo)}
.acao-contar{background:var(--cinza)}

.secundario{display:flex; flex-wrap:wrap; gap:16px 20px; margin-top:28px}
.secundario a{color:var(--azul-profundo); font-size:1.0rem; font-weight:500}

/* ---------- Recados ---------- */
.recado{padding:12px 14px; border-radius:10px; margin:0 0 16px; font-size:1.0rem; border-left:4px solid}
.recado.ok{background:var(--ok-fundo); color:var(--ok); border-color:var(--ok)}
.recado.erro{background:var(--erro-fundo); color:var(--erro); border-color:var(--erro)}
.recado.aviso{background:var(--aviso-fundo); color:var(--aviso); border-color:var(--laranja)}
.senha{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.375rem; letter-spacing:2px}

/* ---------- Login ---------- */
.caixa-login{
  max-width:420px; margin:7vh auto; background:var(--cartao); padding:32px 24px 28px;
  border-radius:16px; border:1px solid var(--borda); box-shadow:0 2px 14px rgba(33,48,111,.06);
}
.caixa-login.largo{max-width:580px}
.caixa-login .logo{display:block; width:210px; max-width:72%; margin:0 auto 24px}
.caixa-login h1{text-align:center; margin-bottom:20px}

/* ---------- Tabelas ---------- */
.tabela{
  width:100%; border-collapse:collapse; margin-top:12px; background:var(--cartao);
  border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden;
}
/* ---------- Alinhamento vertical: UMA regra para todo o sistema ----------
   Toda célula centraliza o conteúdo na altura da linha. Quando um nome
   ocupa duas linhas, a quantidade e os botões acompanham em vez de
   ficarem colados no topo.
   Isto vale em qualquer largura de tela e não deve ser sobrescrito. */
.tabela th,.tabela td{padding:11px 12px; text-align:left; font-size:0.9375rem;
  border-bottom:1px solid var(--borda); vertical-align:middle}
.tabela th{background:var(--azul-profundo); color:var(--concreto); font-weight:500}
.tabela tr:last-child td{border-bottom:0}
.tabela tr.inativo{opacity:.5}
.tabela small{color:var(--texto-fraco)}


/* ---------- Cadastros ---------- */
.abas{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 22px}
.abas a{padding:8px 14px; border-radius:8px; background:var(--cartao);
  border:1.5px solid var(--borda); color:var(--azul-profundo); font-size:0.9375rem;
  font-weight:500; text-decoration:none}
.abas a.ativa{background:var(--azul); color:#fff; border-color:var(--azul)}
/* ---------- Barra de filtros: um padrão para o site inteiro ----------
   Os filtros ocupam a largura toda, divididos em colunas iguais. Uma
   linha por assunto: primeiro as listas, depois as datas e o botão.
   Antes cada tela resolvia do seu jeito e nenhuma ficava igual à outra. */
.filtros{display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
  gap:.625rem; align-items:end; margin:12px 0 4px; width:100%}

/* Uma linha de filtros que ocupa a largura toda e quebra sozinha */
.linha-filtros{display:grid; gap:.625rem; align-items:end; width:100%; margin:0 0 .625rem}
.linha-filtros:last-of-type{margin-bottom:1rem}
.linha-filtros > *{margin:0; width:100%}
.linha-filtros select,.linha-filtros input{width:100%; margin:0}
/* Os filtros ocupam a largura toda; o botão fica no fim, com o tamanho
   do texto que carrega. Antes ele ou esticava como campo, ou sobrava
   espaço vazio à direita. */
.linha-filtros{grid-template-columns:1fr}
.linha-filtros.de-2{grid-template-columns:1fr 1fr auto}
.linha-filtros.de-3{grid-template-columns:1fr 1fr auto}
.linha-filtros.de-4{grid-template-columns:1fr 1fr 1fr auto}
.linha-filtros .botao{margin:0; width:auto; min-width:6.5rem;
  padding-left:1.25rem; padding-right:1.25rem; justify-self:stretch}

/* Quantos cabem por linha — o "auto" do fim é a coluna do botão, quando
   a linha tem um. Linhas sem botão usam as classes abaixo. */
.linha-filtros.so-campos.de-2{grid-template-columns:repeat(2, 1fr)}
.linha-filtros.so-campos.de-3{grid-template-columns:repeat(3, 1fr)}
.linha-filtros.so-campos.de-4{grid-template-columns:repeat(4, 1fr)}
/* A linha de período: duas datas e o botão */
.linha-filtros.periodo{grid-template-columns:1fr 1fr auto}
.linha-filtros.periodo .botao{width:auto; min-width:7rem; padding-left:1.5rem; padding-right:1.5rem}

@media (max-width:640px){
  .linha-filtros.de-3,.linha-filtros.de-4{grid-template-columns:repeat(2, 1fr)}
  .linha-filtros.periodo{grid-template-columns:1fr 1fr}
  .linha-filtros.periodo .botao,
  .linha-filtros.de-3 .botao,
  .linha-filtros.de-4 .botao{grid-column:1 / -1; width:100%; justify-self:stretch}
}
@media (max-width:420px){
  .linha-filtros.de-2,.linha-filtros.de-3,.linha-filtros.de-4{grid-template-columns:1fr}
}

/* A busca ocupa a largura toda, com o botão do lado */
.barra-busca{display:grid; grid-template-columns:1fr auto auto; gap:.5rem;
  align-items:stretch; width:100%; margin:0 0 1rem}
.barra-busca input{width:100%; margin:0}
.barra-busca .botao{margin:0; width:auto; min-width:6.5rem}
@media (max-width:520px){
  .barra-busca{grid-template-columns:1fr}
  .barra-busca .botao{width:100%}
}

/* Título com o botão de "+ Novo" do lado, alinhados */
.topo-tela{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin:0 0 .25rem}
.topo-tela h1{margin:0}
.topo-tela .botao{margin:0; width:auto; flex:0 0 auto}
.filtros input,.filtros select{width:100%; padding:0.625rem; font-size:0.9375rem; margin:0}
/* O botão Filtrar não estica junto com os campos */
.filtros .botao{width:auto; justify-self:start; align-self:end; margin:0}
@media (max-width:520px){
  .filtros{grid-template-columns:1fr 1fr}
  .filtros select,.filtros .botao{grid-column:1 / -1}
  .filtros .botao{justify-self:stretch; width:100%}
}
.filtros .botao{margin-top:0}
.ajuda{color:var(--texto-fraco); font-size:0.875rem; margin:6px 0 0}
.contador{font-size:0.875rem; font-weight:400; color:var(--texto-fraco)}
.etiqueta{display:inline-block; padding:2px 9px; border-radius:20px;
  background:var(--concreto); color:var(--cinza); font-size:0.75rem; font-weight:500;
  margin-left:6px; vertical-align:middle}
.recuo{color:var(--texto-fraco)}

/* ---------- Rodapé ---------- */
.rodape{max-width:780px; margin:0 auto; padding:20px 16px 44px;
  display:flex; gap:22px; border-top:1px solid var(--borda)}
.rodape a{color:var(--texto-fraco); font-size:0.9375rem}

@media (max-width:520px){
  .tabela th,.tabela td{padding:9px 8px; font-size:0.875rem}
  .conteudo{padding:14px 12px 34px}
  .topo .marca img{height:1.375rem}
  .botao.acao{min-height:4.625rem; font-size:1.25rem}
}

/* ---------- Fluxo de lançamento ---------- */
.contexto{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:14px 16px 18px; margin-bottom:22px}
.contexto label:first-child{margin-top:0}

.busca-grande{display:flex; gap:8px; align-items:stretch; margin:12px 0 18px}
.busca-grande input{flex:1; font-size:1.125rem; padding:0.9375rem}
.busca-grande .botao{width:auto; margin-top:0; padding:0 1.25rem; font-size:0.9375rem;
  display:flex; align-items:center; justify-content:center; white-space:nowrap}
/* O "Limpar" é um link com cara de botão: sem isto ele fica com outra
   altura e desalinha da barra de busca. */
.busca-grande .botao.pequeno{padding:0 1rem; font-size:0.875rem}
.busca-grande a.botao{text-decoration:none; line-height:1}

.lista-toque{display:flex; flex-direction:column; gap:10px; margin:10px 0 18px}
.item-toque{display:block; padding:1.0rem; background:var(--cartao); border:1.5px solid var(--borda);
  border-radius:var(--raio); text-decoration:none; color:var(--texto); min-height:4.0rem}
.item-toque:active{border-color:var(--azul); background:#F7F8FE}
.item-toque.sem-saldo{opacity:.55}
.item-nome{display:block; font-size:1.0625rem; font-weight:500; color:var(--azul-profundo)}
.item-info{display:block; font-size:0.875rem; color:var(--texto-fraco); margin-top:3px}

.opcoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.opcao{margin:0; flex:1 1 120px}
.opcao input{position:absolute; opacity:0; width:0; height:0}
.opcao span{display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:3.75rem; padding:0.625rem; border:2px solid var(--borda); border-radius:10px;
  background:var(--cartao); font-size:1.0rem; font-weight:500; color:var(--texto); text-align:center}
.opcao span small{font-weight:400; font-size:0.75rem; color:var(--texto-fraco); margin-top:2px}
.opcao input:checked + span{border-color:var(--azul); background:#EEF1FC; color:var(--azul-profundo)}

.numero-grande{font-size:1.875rem; font-weight:700; text-align:center; letter-spacing:1px; padding:16px}

.lista-itens{display:flex; flex-direction:column; gap:8px; margin:8px 0 16px}
.linha-item{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:12px 14px}
.linha-item.alerta{border-color:var(--laranja); background:var(--aviso-fundo)}
.linha-item form{margin:0}
.linha-item .botao{margin-top:0}
.aviso-falta{color:var(--terracota); font-weight:500}

.destaque-saldo{background:var(--cartao); border-left:4px solid var(--azul); border-radius:8px;
  padding:12px 14px; margin:10px 0 16px; font-size:1.0rem}
.destaque-saldo.grande{font-size:1.1875rem; border-left-color:var(--laranja)}
.destaque-saldo strong{color:var(--azul-profundo)}

.confirmar{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:6px 16px 18px; margin-top:22px}

.positivo{color:var(--ok); font-weight:500; white-space:nowrap}
.negativo{color:var(--terracota); font-weight:500; white-space:nowrap}

/* ---------- Comprovante ---------- */
.comprovante{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio); padding:20px}
.comprovante-topo{display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid var(--azul-profundo); padding-bottom:12px; margin-bottom:16px}
.comprovante-topo img{height:1.875rem; width:auto; max-width:58%; flex:0 0 auto}
.comprovante-topo .numero{font-weight:700; color:var(--azul-profundo)}
.comprovante .tabela th{width:38%}
.assinatura{display:flex; flex-wrap:wrap; gap:24px; margin-top:40px; text-align:center}
.assinatura div{flex:1 1 200px; font-size:0.875rem; color:var(--texto-fraco)}
.sem-impressao{margin-top:20px}

@media print{
  .topo,.rodape,.sem-impressao,.recado{display:none !important}
  body{background:#fff}
  .comprovante{border:0; padding:0}
  .conteudo{max-width:none; padding:0}
}

/* ---------- Nome do produto no login ---------- */
.nome-produto{text-align:center; margin:-14px 0 22px; font-size:0.9375rem; font-weight:500;
  color:var(--texto-fraco); letter-spacing:.3px}

/* ---------- Importação ---------- */
.linha-erro{background:var(--erro-fundo)}
.marca-erro{color:var(--erro); font-size:0.8125rem}
.marca-aviso{color:var(--aviso); font-size:0.8125rem}
.marca-ok{color:var(--ok); font-size:0.8125rem; font-weight:500}
input[type=file]{padding:0.75rem; background:var(--cartao)}

/* ---------- Seleção múltipla (galpões do usuário) ---------- */
.opcoes-lista{display:flex; flex-direction:column; gap:8px; margin-top:6px;
  background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:12px 14px}
.opcao-linha{display:flex; align-items:center; gap:10px; margin:0; font-size:1.0rem;
  font-weight:400; color:var(--texto); cursor:pointer}
.opcao-linha input[type=checkbox]{width:22px; height:1.375rem; margin:0; flex:0 0 auto}
.nome-produto{text-align:center; color:var(--texto-fraco); font-size:0.9375rem;
  margin:-10px 0 22px; letter-spacing:.2px}

/* Relatórios: mesmo tamanho das quatro ações, mas em contorno —
   os quatro de cima mexem no estoque, este só mostra. */
.botao.acao.acao-relatorios{
  margin-top:14px; background:transparent; color:var(--azul-profundo);
  border:2.5px solid var(--azul-profundo);
}
.botao.acao.acao-relatorios:active{background:rgba(33,48,111,.08)}

/* ---------- Folha de relatório: na tela e no papel ---------- */
.folha{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:22px 20px; margin-top:8px}
.folha-topo{display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:2px solid var(--azul-profundo); padding-bottom:14px; margin-bottom:18px}
.folha-topo img{height:1.875rem; width:auto; max-width:45%; flex:0 0 auto}
.folha-titulo{text-align:right; color:var(--azul-profundo); font-size:1.0rem; line-height:1.35}
.folha-titulo small{color:var(--texto-fraco); font-weight:400; font-size:0.8125rem}
.folha-rodape{margin-top:16px; color:var(--texto-fraco); font-size:0.8125rem;
  border-top:1px solid var(--borda); padding-top:10px}
.tabela .num{text-align:right; white-space:nowrap}
.devolvido{color:var(--texto-fraco)}
.acoes-relatorio{margin-top:18px}
.acoes-relatorio .botao{margin-top:8px}

@media print{
  .folha{border:0; padding:0; margin:0}
  .folha-topo{page-break-after:avoid}
  .tabela{border:0; border-radius:0; font-size:11pt}
  .tabela th{background:#21306F !important; color:#fff !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .tabela tr{page-break-inside:avoid}
  .abas,.filtros{display:none !important}
  @page{margin:14mm}
}

/* ---------- Barra do topo um pouco mais alta ---------- */
.topo{padding:16px 18px}
.topo .marca img{height:1.875rem}

/* ---------- Rodapé ---------- */
.rodape{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-top:36px; padding:22px 16px 40px; border-top:1px solid var(--borda)}
.rodape-marca{display:flex; align-items:center; gap:10px; color:var(--texto-fraco); font-size:0.8125rem; line-height:1.4}
.rodape-marca img{height:1.625rem; width:auto; opacity:.75}
.rodape-marca strong{color:var(--azul-profundo); font-weight:700}
.rodape-links{display:flex; gap:18px}
.rodape a{color:var(--texto-fraco); font-size:0.875rem}
.rodape a:hover{color:var(--azul)}
.botao.pequeno.perigo-texto{color:var(--terracota); border-color:rgba(142,68,26,.35)}

@media (max-width:520px){
  .rodape{flex-direction:column; align-items:flex-start; gap:14px}
  .topo{padding:14px 14px}
  .topo .marca img{height:1.5625rem}
}
@media print{ .rodape{display:none !important} }

.sinal{font-size:1.25rem; flex:0 0 auto}
.codigo{background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:12px 14px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.8125rem;
  overflow-x:auto; white-space:pre-wrap; word-break:break-all; color:var(--azul-profundo)}

.esqueci{text-align:center; margin-top:18px}
.esqueci a{color:var(--azul-profundo); font-size:0.9375rem}
.pediu-senha{color:var(--terracota); font-weight:500}

.botao.repetir{background:var(--cartao); color:var(--azul-profundo);
  border:2px dashed rgba(72,98,202,.5); font-weight:500}
.linha-item.editavel{gap:10px}
.item-dados{flex:1 1 auto; min-width:0}
.qtd-linha{width:104px; flex:0 0 auto; text-align:right; font-size:1.125rem;
  font-weight:700; padding:0.6875rem 0.625rem}

.fornecedor-novo{background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:12px 16px; margin-bottom:18px}
.fornecedor-novo summary{cursor:pointer; color:var(--azul-profundo); font-weight:500; font-size:0.9375rem}
.fornecedor-novo .botao{margin-top:12px}

/* Precisa Comprar na tela inicial */
.botao.acao.acao-comprar{margin-top:14px; background:var(--cartao); color:var(--terracota);
  border:2.5px solid var(--terracota)}
.botao.acao.acao-comprar:active{background:#FBEEE2}
.contador-alerta{background:var(--terracota); color:#fff; border-radius:20px;
  min-width:34px; padding:2px 11px; font-size:1.0rem; margin-left:8px; font-weight:700}

/* Repetir compra: cara de botão, não de aviso */
.botao.repetir{display:flex; flex-direction:column; align-items:center; gap:3px;
  background:#EEF1FC; color:var(--azul-profundo); border:2px solid var(--azul);
  border-style:solid; min-height:4.0rem; padding:0.75rem 1.0rem; text-align:center}
.botao.repetir small{font-weight:400; font-size:0.8125rem; color:var(--texto-fraco)}

/* Categorias: principal x subcategoria */
.cat-principal{font-weight:700; color:var(--azul-profundo)}
.tabela tr:has(.sub-categoria){background:#F7F7F7}
.sub-categoria{color:#6E6E6E; padding-left:26px !important; font-weight:400}
.sub-categoria .recuo{color:#B9B9B9; margin-right:8px; font-weight:400}

/* Kits */
.usar-kit{background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:12px 16px 16px; margin-top:14px}
.linha-kit{display:flex; gap:8px; align-items:stretch}
.linha-kit select{flex:1 1 auto}
.linha-kit .qtd-linha{width:74px}
.linha-kit .botao{margin-top:0; white-space:nowrap}
.linha-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:10px 12px; margin-bottom:8px}
.linha-add select{width:auto; flex:0 1 130px}
.linha-add .botao{margin-top:0}

/* Cabeçalho com ações */
.topo-acoes{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.topo-acoes h1{margin-bottom:8px}
.topo-acoes .botao{margin-top:0}


/* Onde estou: título acima das abas de gestão */
.onde-estou{margin:0 0 10px; font-size:0.875rem; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--azul-profundo);
  border-left:4px solid var(--azul); padding-left:10px}
.voltar-topo{margin:0 0 14px}
.voltar-topo a{color:var(--azul-profundo); font-size:1.0rem; font-weight:500}
.contador{font-weight:400; color:var(--texto-fraco); font-size:1.0rem}
.bloco-cadastro{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:6px 18px 20px; margin-top:28px; scroll-margin-top:16px}
@media print{ .onde-estou{display:none !important} }

.bloco-admin{background:#F7F8FE; border:1px dashed rgba(72,98,202,.45); border-radius:10px;
  padding:12px 16px 18px; margin:18px 0}
.bloco-admin summary{cursor:pointer; color:var(--azul-profundo); font-weight:500; font-size:0.9375rem}
.lancado-por{color:var(--laranja); font-weight:500}

/* Um padrão só em todas as telas de lançamento:
   azul = montar a lista · laranja = confirmar e gravar */
.botao.grande.acao-confirmar{background:var(--laranja)}
.botao.grande.acao-confirmar:active{filter:brightness(.92)}

/* Barra de ação que acompanha a rolagem no ajuste de saldo */
.barra-fixa{position:sticky; top:0; z-index:5; background:var(--areia);
  border-bottom:1px solid var(--borda); padding:12px 0 14px; margin-bottom:8px}
.barra-fixa .botao{margin-top:10px}
.linha-horario{display:flex; align-items:center; gap:10px; margin-top:6px}
.linha-horario input{width:auto; flex:0 1 130px}
.opcoes-lista.dias{flex-direction:row; flex-wrap:wrap; gap:10px 16px; margin-top:10px}
.opcoes-lista.dias .opcao-linha{flex:0 0 auto}

.destaque-duplicata{background:var(--aviso-fundo); border:1.5px solid var(--laranja);
  border-radius:10px; padding:12px 14px; margin-top:14px; font-weight:500}

.acoes-perigo{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; padding-top:16px;
  border-top:1px dashed var(--borda)}
.acoes-perigo form{margin:0}
.acoes-perigo .botao{margin-top:0}

.resumo-dia{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:14px 18px; margin:14px 0 18px; line-height:1.7; color:var(--azul-profundo);
  font-weight:500; font-size:1.0rem}

/* Contexto do lançamento sempre à vista: evita lançar no galpão errado */
.faixa-contexto{position:sticky; top:0; z-index:6; background:var(--azul-profundo); color:#fff;
  padding:10px 16px; border-radius:10px; margin:6px 0 14px; font-size:0.9375rem;
  box-shadow:0 2px 8px rgba(33,48,111,.18)}
.faixa-contexto strong{letter-spacing:.4px}
@media print{ .faixa-contexto{display:none !important} }

.lista-erros{display:flex; flex-direction:column; gap:8px; margin:14px 0}
.linha-erro{background:var(--cartao); border-left:3px solid var(--terracota); border-radius:6px;
  padding:10px 14px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px;
  line-height:1.5; word-break:break-word; color:var(--texto)}
.linha-erro small{color:var(--texto-fraco); font-family:var(--fonte)}

.faixa-destino{display:block; margin-top:3px; opacity:.92; font-size:0.875rem}

.paginacao{display:flex; align-items:center; gap:14px; margin:16px 0; flex-wrap:wrap}
.paginacao span{color:var(--texto-fraco); font-size:0.875rem}
.paginacao .botao{margin-top:0}
.bloco-correcao{background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:14px 16px 18px; margin-bottom:14px}
.correcao-atual{margin:0 0 12px; color:var(--texto-fraco); font-size:0.875rem}
.correcao-atual strong{color:var(--azul-profundo)}


.alerta-diagnostico{display:block; text-align:center; margin-top:14px;
  background:var(--aviso-fundo); color:var(--terracota); border:1px solid var(--terracota)}

.busca-viva{margin-top:6px}

.col-estreita{max-width:130px}
.col-estreita small{display:block; overflow-wrap:anywhere; line-height:1.35}
.tabela td em{font-style:normal; color:var(--texto-fraco); font-size:0.75rem}

.emb-ajuste{width:auto; max-width:150px; margin-top:6px; font-size:0.875rem; padding:8px 10px}

.usar-kit-recolhido{background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:12px 16px; margin:14px 0}
.usar-kit-recolhido summary{cursor:pointer; color:var(--azul-profundo); font-weight:500; font-size:0.9375rem}
.usar-kit-recolhido form{margin-top:12px}

/* A unidade ao lado do número: sem ela, material fora do comum confunde */
.linha-quantidade{display:flex; align-items:center; gap:12px}
.linha-quantidade .numero-grande{flex:1 1 auto; min-width:0}
.unidade-campo{flex:0 0 auto; font-size:1.25rem; font-weight:600; color:var(--azul-profundo);
  background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:12px 16px; white-space:nowrap}

.cartao-destaque{background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio);
  padding:18px 20px; margin:16px 0 24px}
.cartao-destaque h2{margin-top:0}

/* Navegação entre páginas: alvos grandes para o dedo, e a página atual
   destacada para não se perder em lista comprida */
.paginacao{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:20px 0;
  justify-content:center}
.paginacao .pag-seta,
.paginacao .pag-numero{display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:2.75rem; padding:0 12px; border:1px solid var(--borda);
  border-radius:10px; background:#fff; color:var(--azul-profundo);
  text-decoration:none; font-size:0.9375rem; font-weight:500}
.paginacao .pag-seta:hover,
.paginacao .pag-numero:hover{background:var(--cartao); border-color:var(--azul-profundo)}
.paginacao .pag-atual{display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:2.75rem; padding:0 12px; border-radius:10px;
  background:var(--azul-profundo); color:#fff; font-size:0.9375rem}
.paginacao .pag-numeros{display:flex; gap:6px; align-items:center}
.paginacao .pag-corte{padding:0 4px; color:var(--texto-fraco)}
@media (max-width:520px){
  .paginacao .pag-seta{padding:0 10px; font-size:0.875rem}
  .paginacao .pag-numeros{order:-1; width:100%; justify-content:center; margin-bottom:6px}
}



/* ---------- Botões dentro da tabela ----------
   display:flex num <td> destrói o alinhamento da tabela: a célula deixa
   de ser célula, a linha divisória para no meio e as colunas escorregam.
   Era isso que quebrava todas as listas.
   A célula continua célula; quem se organiza em linha são os botões. */
.acoes-linha > form,
.acoes-linha > a,
.acoes-linha > button{
  display:inline-flex; align-items:center; vertical-align:middle;
  margin:2px 4px 2px 0;
}
.acoes-linha form{margin:2px 4px 2px 0}
.acoes-linha .botao{margin-top:0; white-space:nowrap}

/* A célula das ações centraliza os botões na ALTURA da linha.
   "vertical-align:middle" no BOTÃO alinha ele dentro da linha de texto,
   não dentro da célula — por isso ele subia quando o nome do material
   ocupava duas linhas. Quem manda aqui é o vertical-align da CÉLULA. */
.tabela td.acoes-linha{
  white-space:nowrap;
  vertical-align:middle;
  text-align:right;
  padding-top:.5rem;
  padding-bottom:.5rem;
}
/* E o mesmo para a célula que mostra o saldo ou a quantidade: elas
   também desalinhavam de um nome que ocupa duas linhas. */

/* ---------- Botão DENTRO de tabela ----------
   O ".botao.pequeno" tem 2,5rem de altura porque no celular ele precisa
   ser alvo de dedo. Dentro de uma linha de tabela isso é enorme: o botão
   fica mais alto que o próprio texto da linha e rouba a largura do nome.
   Aqui ele é só um botão de tabela, do tamanho do texto que carrega. */
.tabela td .botao.pequeno{
  min-height:0; padding:.3125rem .625rem; font-size:.8125rem;
  margin:.125rem .25rem .125rem 0; border-width:1px; border-radius:.375rem;
  line-height:1.35;
}
.tabela td.acoes-linha{padding-top:.5rem; padding-bottom:.5rem}

/* Fora de tabela (blocos de cadastro), a linha de botões pode ser flex.
   ATENÇÃO ao seletor: "form .acoes-linha" pegava TAMBÉM as células
   dentro de tabelas que ficam dentro de um form — como a do Ajustar
   Saldo. Virar flex faz a célula deixar de ser célula: ela sai do
   alinhamento das colunas e a borda da linha não passa por baixo dela.
   Era isso que deixava o botão Remover "fora da moldura".
   O ":not(td)" garante que isto nunca alcance uma célula de tabela. */
.bloco-correcao .acoes-linha:not(td),
form .acoes-linha:not(td){display:flex; flex-wrap:wrap; gap:8px; align-items:center}

.item-incluido{opacity:.6; pointer-events:none}
.item-incluido .item-info{color:var(--verde, #2f6b3f); font-weight:600}
.recado-incluidos{background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:10px 14px; margin-top:8px; color:var(--azul-profundo); font-weight:500}

/* De onde vem o número: sem isso o mesmo material parece ter saldos
   diferentes conforme a tela */
.onde-saldo{color:var(--texto-fraco); font-weight:400; font-size:0.8125rem}

/* ---------- Ficha do comprovante ----------
   Aqui o <th> não é cabeçalho de coluna: é o rótulo da linha ("Data",
   "Entrou em", "Fornecedor"). A regra geral de celular o tratava como
   cabeçalho e ele virava uma tarja azul enorme. */
.tabela.ficha th{
  background:transparent; color:var(--texto-fraco);
  font-weight:500; font-size:0.875rem; text-align:left;
  width:38%; padding:10px 14px; white-space:nowrap;
}
.tabela.ficha td{padding:10px 14px; font-size:1.0rem}
.tabela.ficha tr{border-bottom:1px solid var(--borda)}
.tabela.ficha tr:last-child{border-bottom:0}



/* O número do comprovante, para se localizar ao conferir vários */
.num-comprovante{color:var(--azul-profundo); font-variant-numeric:tabular-nums}
.item-nome .num-comprovante{font-size:0.875rem; color:var(--texto-fraco); font-weight:600}

.tirar-item{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;
  padding-top:10px; border-top:1px dashed var(--borda)}
.tirar-item input{flex:1 1 180px; margin:0}
.tirar-item .botao{margin-top:0; flex:0 0 auto}


/* ==================================================================
   TABELAS NO CELULAR — a mesma tela, sem rolagem
   A tabela continua tabela: cabeçalho azul, colunas na mesma ordem.
   Para caber em 360px sem deslizar, as colunas secundárias somem —
   o dado continua no comprovante, a um toque de distância.
   ================================================================== */
@media (max-width: 720px) {
  /* SEM "table-layout: fixed": com ele, o que não couber na coluna
     ESCAPA da tabela em vez de se ajustar. Era isso que deixava botão
     fora da moldura. O navegador mede o conteúdo e distribui melhor. */
  .tabela { font-size:0.875rem; width: 100%; }
  .tabela th, .tabela td {
    padding: 10px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    /* NÃO forçar "top" aqui: era isto que desalinhava toda célula de
       toda tabela sempre que o nome ocupava duas linhas. O alinhamento
       vale igual em qualquer largura, e está definido uma vez só. */
  }
  .tabela th { font-size:0.75rem; padding: 9px 8px; }
  .tabela td small { font-size:0.75rem; display: block; margin-top: 2px; }

  /* Colunas que só fazem sentido na tela grande */
  .tabela .col-secundaria { display: none; }

  /* Botão de linha: alvo de dedo, empilhado quando preciso */
  .tabela td.acoes-linha { padding: 8px 6px; }
  /* "block" aqui desfazia a centralização do texto: o botão vira uma
     caixa alta com a palavra encostada no topo. "flex" mantém o texto
     no meio e o botão ocupando a largura toda. */
  /* No celular o dedo precisa de alvo: aqui o botão volta a crescer */
  .tabela td .botao.pequeno {
    min-height:2.25rem; padding:0.5rem 0.625rem; font-size:0.8125rem;
    margin: 2px 0; display: flex; align-items: center; justify-content: center;
    width: 100%;
  }
  .tabela td.acoes-linha > form { display: block; margin: 0 }

  /* O número do comprovante fica estreito e legível */
  .tabela td.num-comprovante { width: 46px; font-weight: 700; font-size:1.0rem; }

  /* Nenhum rótulo antes do valor: a coluna já tem cabeçalho */
  .tabela td::before { content: none !important; }
}

@media (max-width: 420px) {
  .tabela { font-size:0.8125rem; }
  .tabela th, .tabela td { padding: 8px 6px; }
  .tabela td.acoes-linha .botao { padding:0.5rem; font-size:0.75rem; }
}

.marca-igual{color:var(--texto-fraco); font-size:0.8125rem}

.linha-filtro{margin:14px 0 8px}
.linha-filtro a{margin-left:8px}

/* ---------- Botões de tamanho da letra, no rodapé ---------- */
.rodape-letra{
  display:flex; align-items:center; gap:.625rem; flex-wrap:wrap;
  padding:.75rem 0; margin-top:.5rem;
}
.rodape-letra-titulo{color:var(--texto-fraco); font-size:.875rem; margin-right:.25rem}
.botao-letra{
  min-width:3rem; min-height:3rem; padding:.5rem .875rem;
  border:1px solid var(--borda); border-radius:.625rem; background:#fff;
  color:var(--azul-profundo); font-family:inherit; font-weight:700;
  font-size:1.125rem; cursor:pointer; line-height:1;
}
.botao-letra:hover:not(:disabled){background:var(--cartao); border-color:var(--azul-profundo)}
.botao-letra:disabled{opacity:.4; cursor:default}
.letra-atual{
  min-width:3.5rem; text-align:center; color:var(--texto-fraco);
  font-size:.875rem; font-variant-numeric:tabular-nums;
}

/* Com a letra grande, o texto precisa de mais espaço para respirar */
.tabela td, .tabela th{line-height:1.45}
.item-toque{line-height:1.4}

/* Contraste: cinza-claro sobre bege cansa mais que letra pequena */
:root{--texto-fraco:#5A5A5A}

/* "De" e "Até" acima do campo: sem isso ninguém sabe qual é qual */
.rotulo-data{display:flex; flex-direction:column; gap:.25rem;
  font-size:.8125rem; color:var(--texto-fraco); flex:0 0 auto}
.rotulo-data input[type="date"]{margin:0}

.linha-desistir{margin-top:.75rem}
.linha-desistir .botao{margin-top:0}


/* Os botões ficam à direita sem espremer o resto.
   "width:1%" com "min-width" nos botões fazia a coluna de ações roubar
   metade da largura e o nome do material ficar ilegível — o nome é o que
   a pessoa lê, os botões ela só aperta. */
.tabela td.acoes-linha{white-space:nowrap; text-align:right}
/* Numa tabela de largura fixada, quem manda é o colgroup */
/* A coluna de ações pede só o espaço do botão ("width:1%" faz a tabela
   dar o mínimo necessário) e não o estica. */
.tabela-ajuste td.acoes-linha{white-space:nowrap; text-align:center; padding:.5rem .625rem}
.tabela-ajuste td.acoes-linha .botao{margin:0; width:auto; min-width:0}
.tabela td.acoes-linha .botao{text-align:center}
/* A primeira coluna é o assunto da linha: fica com o espaço que sobra */
.tabela td:first-child,.tabela th:first-child{width:auto}
.tabela th:last-child,.tabela td.acoes-linha{padding-left:.5rem}

/* Botão que não leva a lugar nenhum: ocupa o espaço para alinhar, sem
   parecer clicável */
.botao.sem-uso{opacity:.4; cursor:default; pointer-events:none;
  display:inline-flex; align-items:center; justify-content:center}

/* ---------- Linha do Ajustar Saldo ----------
   Larguras fixadas por colgroup: o nome fica com o que sobra e as outras
   colunas com o que precisam. Sem isso um nome longo espreme a coluna da
   quantidade e a linha desmonta — foi o que aconteceu com 10 itens. */
/* SEM "table-layout: fixed".
   Com ele, a coluna tem largura obrigatória e o que não couber ESCAPA
   da tabela — foi o que deixou o botão Remover fora da moldura, com a
   borda da linha parando antes dele.
   Sem ele, o navegador mede o conteúdo e dá a cada coluna o que ela
   precisa. As larguras abaixo viram uma sugestão, não uma imposição:
   a coluna de ações nunca fica menor que o botão, e o nome fica com o
   que sobra. */
.tabela-ajuste{width:100%}
.tabela-ajuste .col-material{width:44%}
.tabela-ajuste .col-tem{width:18%}
.tabela-ajuste .col-novo{width:23%}
.tabela-ajuste .col-acao{width:1%}

.tabela-ajuste td{padding:.75rem .625rem}
.tabela-ajuste .cel-material{white-space:normal; overflow-wrap:anywhere}
.tabela-ajuste .nome-material{display:block; font-weight:600; line-height:1.3}
.tabela-ajuste .cel-material small{display:block; color:var(--texto-fraco);
  font-size:.8125rem; margin-top:.125rem}
.tabela-ajuste .cel-tem{white-space:normal; font-size:.875rem; line-height:1.3}

.par-quantidade{display:flex; flex-direction:column; gap:.25rem; align-items:stretch}
.par-quantidade .qtd-linha{width:100%; margin:0; text-align:right; min-height:2.75rem}
.par-quantidade .emb-ajuste{width:100%; margin:0; padding:.375rem .5rem;
  font-size:.8125rem; min-height:2.25rem}
.par-quantidade .unidade-fixa{color:var(--texto-fraco); font-size:.8125rem;
  text-align:right; padding-right:.25rem}

@media (max-width:720px){
  .tabela-ajuste .col-material{width:38%}
  .tabela-ajuste .col-tem{width:18%}
  .tabela-ajuste .col-novo{width:24%}
  .tabela-ajuste .col-acao{width:1%}
  .tabela-ajuste td{padding:.625rem .375rem}
  .tabela-ajuste .cel-material small{display:none}
}

/* As três abas de relatório dividem a largura igualmente */
.abas.abas-largas{display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; margin:0 0 1rem}
.abas.abas-largas a{margin:0; text-align:center; justify-content:center}
@media (max-width:520px){
  .abas.abas-largas{grid-template-columns:1fr}
}

/* O saldo de agora fica FORA da folha: o comprovante é o registro do que
   aconteceu e não pode mudar quando reimpresso. */
.bloco-saldo-agora{margin:1.25rem 0; padding:1rem 1.125rem; background:var(--cartao);
  border:1px solid var(--borda); border-radius:var(--raio)}
.bloco-saldo-agora h3{margin:0 0 .25rem; font-size:1rem; color:var(--azul-profundo)}
.bloco-saldo-agora .ajuda{margin:0 0 .75rem}
.bloco-saldo-agora .tabela{margin:0}
@media print{ .bloco-saldo-agora{display:none} }

/* Lista de peças do Separar Material */
.tabela-pecas{width:100%; margin-bottom:.5rem}
.tabela-pecas .col-peca{width:auto}
.tabela-pecas .col-qtd{width:26%}
.tabela-pecas .col-tira{width:1%}
.tabela-pecas td{padding:.5rem .375rem}
.tabela-pecas select,.tabela-pecas input{width:100%; margin:0}
.mais-peca{margin:0 0 1rem}

/* Como o pessoal chama na obra: "canopla" para o Acabamento para Registro */
.item-apelido{display:block; color:var(--azul); font-size:.875rem; font-weight:500;
  margin-top:.125rem}
.apelido-material{color:var(--azul); font-weight:500}

/* Coluna centralizada: número ou palavra curta que não precisa de margem */
.tabela th.centro,.tabela td.centro{text-align:center; vertical-align:middle}

/* ---------- Atalho para a Administração ----------
   Preto porque é a identidade do outro subdomínio: a cor já avisa que
   você está saindo do estoque.
   No computador fica na barra de cima; no celular vai para o rodapé,
   porque lá em cima disputava espaço com o logo e o nome e ficava
   espremido. É o mesmo link nos dois lugares — só um aparece por vez. */
/* Sem "margin-left:auto": a barra já usa space-between, e forçar isso
   empurraria o nome do usuário para fora da tela. */
.ir-adm{
  display:inline-flex; align-items:center; flex:0 0 auto;
  background:#111111; color:#FFFFFF; text-decoration:none;
  border:1px solid rgba(255,255,255,.35); border-radius:999px;
  padding:.4375rem 1rem; font-size:.875rem; font-weight:600; white-space:nowrap;
}
.ir-adm:hover{background:#FFFFFF; color:#111111; border-color:#FFFFFF}

.ir-adm-rodape{
  display:inline-flex; align-items:center; background:#111111; color:#FFFFFF;
  border-radius:999px; padding:.375rem .875rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.ir-adm-rodape:hover{background:#333333; color:#FFFFFF}

/* Um aparece, o outro some — conforme a largura da tela */
.so-tela-pequena{display:none}
@media (max-width:720px){
  .so-tela-grande{display:none}
  .so-tela-pequena{display:inline-flex}
}