/* =====================================================================
   MASTER — Sistema da fábrica
   Padrão visual tirado dos layouts aprovados (pasta layouts/):
   barra lateral azul-escura, topo branco, fundo cinza-claro, cartões
   brancos com borda fina, etiquetas de status arredondadas, letras grandes.
   Sem sombra forte, sem gradiente.
   ===================================================================== */

:root {
  --azul-escuro: #00478a;
  --azul: #005aaa;
  --azul-hover: #004c91;
  --azul-ativo: #0d66c2;
  --azul-claro: #e6f0fa;
  --azul-linha: #dbe9f7;

  --fundo: #f0f3f7;
  --branco: #ffffff;
  --borda: #d9e0e8;
  --borda-forte: #c3ccd7;
  --cabecalho-tabela: #f3f6f9;

  --texto: #1b2533;
  --texto-2: #4a5666;
  --texto-3: #758194;

  --verde: #1e8e4a;
  --verde-hover: #187a3f;
  --verde-claro: #e3f4ea;
  --amarelo: #f5c033;
  --amarelo-texto: #4a3800;
  --amarelo-claro: #fff6dc;
  --vermelho: #dc3535;
  --vermelho-hover: #c22c2c;
  --vermelho-claro: #fde8e8;
  --cinza-etiqueta: #e4e8ee;

  --raio: 4px;
  --raio-etiqueta: 999px;
  --fonte: "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lateral: 248px;
  --topo: 72px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--texto); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--azul-escuro);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 20;
}
.marca { padding: 18px 16px 14px; display: block; color: #fff; text-decoration: none !important; }
.marca-logo { display: block; width: 100%; max-width: 216px; height: auto; margin: 0 auto; }
.marca-nome { display: block; font-size: 34px; font-weight: 800; letter-spacing: .5px; line-height: 1; }
.marca-sub { display: block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; opacity: .85; margin-top: 6px; }

.menu { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }
.menu a {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 24px;
  color: #fff; font-size: 16px;
  text-decoration: none !important;
  border-left: 4px solid transparent;
}
.menu a svg { width: 24px; height: 24px; flex: 0 0 24px; opacity: .95; }
.menu a:hover { background: rgba(255, 255, 255, .08); }
.menu a.ativo { background: var(--azul-ativo); border-left-color: #fff; font-weight: 600; }
.menu .menu-sep { height: 1px; background: rgba(255, 255, 255, .15); margin: 10px 20px; }

/* grupos do menu com seta (submenu) */
.menu-grupo { display: flex; flex-direction: column; }
.menu-cabeca {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 20px 13px 24px; background: none; border: 0; border-left: 4px solid transparent;
  color: #fff; font-size: 16px; text-align: left; cursor: pointer;
}
.menu-cabeca:hover { background: rgba(255, 255, 255, .08); }
.menu-cabeca svg { width: 24px; height: 24px; flex: 0 0 24px; opacity: .95; }
.menu-cabeca svg.seta { width: 18px; height: 18px; flex-basis: 18px; margin-left: auto; transition: transform .15s; }
.menu-grupo.aberto > .menu-cabeca svg.seta { transform: rotate(180deg); }
.menu-grupo.tem-ativo > .menu-cabeca { font-weight: 600; }
.menu-grupo.tem-ativo:not(.aberto) > .menu-cabeca { background: var(--azul-ativo); border-left-color: #fff; }
.submenu { display: none; flex-direction: column; background: rgba(0, 0, 0, .16); padding: 4px 0; }
.menu-grupo.aberto > .submenu { display: flex; }
.menu .submenu a { padding: 10px 16px 10px 62px; font-size: 15px; color: rgba(255, 255, 255, .92); }
.menu .submenu a.ativo { color: #fff; }
.lateral-rodape { padding: 14px 24px 18px; font-size: 12px; opacity: .7; }

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

.topo {
  height: var(--topo);
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 10;
}
.topo h1 { font-size: 26px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .subtitulo { font-size: 15px; color: var(--texto-3); font-weight: 400; margin-left: 4px; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.botao-menu { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.botao-menu svg { width: 26px; height: 26px; }
.usuario {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  font-size: 16px; color: var(--texto); padding: 6px 8px; border-radius: var(--raio);
}
.usuario:hover { background: var(--fundo); }
.usuario svg { width: 24px; height: 24px; color: var(--texto-2); }
.conexao { font-size: 13px; color: var(--texto-3); display: flex; align-items: center; gap: 6px; }
.conexao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.conexao.off::before { background: var(--vermelho); }

.faixa-exemplo {
  background: var(--amarelo-claro);
  border-bottom: 1px solid #f0d98a;
  color: var(--amarelo-texto);
  padding: 9px 28px; font-size: 14px;
}
.faixa-exemplo a { color: var(--amarelo-texto); font-weight: 600; text-decoration: underline; }

.conteudo { padding: 24px 28px 40px; flex: 1; }
.carregando { padding: 40px; text-align: center; color: var(--texto-3); }

/* ------------------------------------------------------------ cartões e grades */
.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 20px;
}
.cartao.sem-espaco { padding: 0; }
.cartao-titulo { font-size: 19px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.cartao-titulo .acoes { margin-left: auto; display: flex; gap: 8px; }
.cartao.sem-espaco > .cartao-titulo { padding: 18px 20px 0; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.lado-a-lado > .cartao, .grade-2 > .cartao, .grade-3 > .cartao { margin-bottom: 0; }
/* sem isto, uma tabela larga alarga a coluna (e a página inteira no celular) em vez de rolar dentro do cartão */
.lado-a-lado > *, .grade-2 > *, .grade-3 > * { min-width: 0; }
.pilha > * + * { margin-top: 20px; }

/* resumo (números do painel) */
.resumos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-bottom: 20px; }
.resumo {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
  color: inherit; text-decoration: none !important;
}
a.resumo:hover { border-color: var(--azul); }
.resumo-rotulo { font-size: 17px; color: var(--texto); }
.resumo-valor { font-size: 46px; font-weight: 800; line-height: 1.05; color: var(--azul); }
.resumo-detalhe { font-size: 13px; color: var(--texto-3); }
.resumo.ok .resumo-valor { color: var(--verde); }
.resumo.atencao .resumo-valor { color: #b88400; }
.resumo.critico .resumo-valor { color: var(--vermelho); }

/* barra de ferramentas (busca, filtros e botões) */
.barra {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px 18px; margin-bottom: 20px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
.barra .campo { margin: 0; }
.barra .espaco { flex: 1; }
.busca { position: relative; flex: 1 1 280px; max-width: 520px; }
.busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--texto-3); pointer-events: none; }
/* ".barra .busca" é mais forte que ".barra input" (mais abaixo), que apagaria o recuo da lupa */
.busca input, .barra .busca input { padding-left: 44px; }

/* abas */
.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--borda); margin-bottom: 20px; flex-wrap: wrap; }
.abas a, .abas button {
  padding: 10px 18px; font-size: 16px; color: var(--texto-2); background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none !important;
}
.abas a.ativa, .abas button.ativa { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
.abas .contador { background: var(--cinza-etiqueta); border-radius: 999px; padding: 1px 8px; font-size: 13px; margin-left: 6px; color: var(--texto-2); }

/* ------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  background: var(--azul); color: #fff;
  border: 1px solid var(--azul); border-radius: var(--raio);
  font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap;
  text-decoration: none !important;
}
.btn:hover { background: var(--azul-hover); border-color: var(--azul-hover); }
.btn:disabled, .btn.desabilitado { opacity: .5; cursor: not-allowed; }
.btn svg { width: 20px; height: 20px; }
.btn.sec { background: var(--branco); color: var(--azul); border-color: var(--azul); }
.btn.sec:hover { background: var(--azul-claro); }
.btn.neutro { background: var(--branco); color: var(--texto); border-color: var(--borda-forte); }
.btn.neutro:hover { background: var(--fundo); }
.btn.verde { background: var(--verde); border-color: var(--verde); }
.btn.verde:hover { background: var(--verde-hover); border-color: var(--verde-hover); }
.btn.perigo { background: var(--vermelho); border-color: var(--vermelho); }
.btn.perigo:hover { background: var(--vermelho-hover); }
.btn.perigo-sec { background: var(--branco); color: var(--vermelho); border-color: var(--vermelho); }
.btn.perigo-sec:hover { background: var(--vermelho-claro); }
.btn.grande { min-height: 64px; font-size: 22px; padding: 0 32px; }
.btn.grande svg { width: 28px; height: 28px; }
.btn.pequeno { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn-link { background: none; border: 0; color: var(--azul); cursor: pointer; padding: 4px 6px; font-size: 14px; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }
.btn-link.perigo { color: var(--vermelho); }
.btn-icone { background: none; border: 0; cursor: pointer; padding: 6px; border-radius: var(--raio); color: var(--texto-2); line-height: 0; }
.btn-icone:hover { background: var(--fundo); color: var(--texto); }
.btn-icone svg { width: 20px; height: 20px; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.botoes.direita { justify-content: flex-end; }

/* ------------------------------------------------------------ formulários */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.campo > label, .rotulo { font-size: 15px; font-weight: 600; color: var(--texto-2); }
.campo .dica { font-size: 13px; color: var(--texto-3); }
.campo .obrigatorio { color: var(--vermelho); }
.entrada, .campo input, .campo select, .campo textarea, .barra input, .barra select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--branco);
  font-size: 16px;
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus, .barra input:focus, .barra select:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 90, 170, .15);
}
.campo input[readonly] { background: var(--fundo); color: var(--texto-2); }
.campo.invalido input, .campo.invalido select { border-color: var(--vermelho); }
.num-entrada { text-align: right; }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.formulario .inteiro { grid-column: 1 / -1; }
.formulario.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formulario.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.checar { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.checar input { width: 20px; height: 20px; }
.erro-form { background: var(--vermelho-claro); color: #8a1c1c; border: 1px solid #f3b9b9; border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px; }

/* ------------------------------------------------------------ tabelas */
.tabela-caixa { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th {
  background: var(--cabecalho-tabela); color: var(--texto); font-weight: 700; text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; font-size: 15px;
}
.tabela td { padding: 13px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr[data-href] { cursor: pointer; }
.tabela tbody tr:hover td { background: #f7fafd; }
.tabela tr.selecionada td { background: var(--azul-linha) !important; }
.tabela .num, .tabela th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .centro { text-align: center; }
.tabela .acoes { text-align: right; white-space: nowrap; width: 1%; }
.tabela .fraco { color: var(--texto-3); }
.tabela .forte { font-weight: 700; }
.tabela input.entrada { min-height: 40px; padding: 6px 10px; }
.tabela tfoot td { font-weight: 700; background: var(--cabecalho-tabela); border-top: 1px solid var(--borda); border-bottom: 0; }
.tabela.compacta td { padding: 9px 12px; }
.tabela.compacta th { padding: 9px 12px; font-size: 14px; }
.cartao > .tabela-caixa { margin: 0 -20px -20px; }
.cartao.sem-espaco > .tabela-caixa { margin: 0; }   /* cartão sem espaço interno: a tabela já encosta na borda */
.cartao > .tabela-caixa .tabela th:first-child, .cartao > .tabela-caixa .tabela td:first-child { padding-left: 20px; }
.cartao > .tabela-caixa .tabela th:last-child, .cartao > .tabela-caixa .tabela td:last-child { padding-right: 20px; }
.vazio { padding: 36px 20px; text-align: center; color: var(--texto-3); font-size: 15px; }

/* ------------------------------------------------------------ etiquetas de status */
.etiqueta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 4px 14px;
  border-radius: var(--raio-etiqueta);
  font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  background: var(--cinza-etiqueta); color: var(--texto-2);
}
.etiqueta.ok { background: var(--verde); color: #fff; }
.etiqueta.atencao { background: var(--amarelo); color: var(--amarelo-texto); }
.etiqueta.critico { background: var(--vermelho); color: #fff; }
.etiqueta.info { background: var(--azul); color: #fff; }
/* .info também é a lista rótulo/valor (display grid, fonte 15px), declarada mais abaixo: a etiqueta desfaz isso */
.etiqueta.info { display: inline-flex; font-size: 14px; }
.etiqueta.neutra { background: var(--cinza-etiqueta); color: var(--texto-2); }
/* .entrada também é a classe de campo (largura 100%, altura 46px, borda): a etiqueta desfaz isso */
.etiqueta.entrada { background: #d8eafc; color: #0b4f96; min-width: 0; padding: 2px 12px; font-size: 13px; width: auto; min-height: 0; border: 0; }
.etiqueta.saida { background: #fbdcdc; color: #9c1f1f; min-width: 0; padding: 2px 12px; font-size: 13px; }
.etiqueta.ajuste { background: var(--amarelo-claro); color: var(--amarelo-texto); min-width: 0; padding: 2px 12px; font-size: 13px; }

/* linha de informações (rótulo: valor) */
.info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 15px; }
.info dt { color: var(--texto-2); }
.info dd { margin: 0; font-weight: 600; }
.info-linha { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.info-linha > div { display: flex; flex-direction: column; gap: 2px; }
.info-linha .rot { font-size: 14px; color: var(--texto-2); }
.info-linha .val { font-size: 17px; font-weight: 600; }

/* etapas (planejada → em produção → concluída) */
.etapas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etapa { display: flex; align-items: center; gap: 10px; color: var(--texto-3); font-size: 16px; }
.etapa .bola {
  width: 38px; height: 38px; border-radius: 50%; background: var(--cinza-etiqueta); color: var(--texto-3);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.etapa.feita .bola { background: var(--verde); color: #fff; }
.etapa.atual .bola { background: var(--azul); color: #fff; }
.etapa.atual { color: var(--azul); font-weight: 700; }
.etapa.feita { color: var(--texto); }
.etapa-linha { width: 56px; height: 2px; background: var(--borda-forte); }
.rodape-acoes {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px;
}
.rodape-acoes .botoes { margin-left: auto; }

/* barra de progresso */
.progresso { height: 14px; background: var(--cinza-etiqueta); border-radius: 999px; overflow: hidden; flex: 1; }
.progresso > div { height: 100%; background: var(--azul); border-radius: 999px; transition: width .2s; }
.progresso.ok > div { background: var(--verde); }

/* avisos (toast) */
#avisos { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.aviso {
  min-width: 280px; max-width: 440px; padding: 14px 18px; border-radius: var(--raio);
  background: var(--texto); color: #fff; font-size: 15px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.aviso.ok { background: var(--verde); }
.aviso.erro { background: var(--vermelho); }
.aviso.alerta { background: var(--amarelo); color: var(--amarelo-texto); }

/* janela (modal) */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(15, 25, 40, .45); z-index: 500;
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto;
}
.modal { background: var(--branco); border-radius: 6px; width: 100%; max-width: 640px; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); }
.modal.largo { max-width: 920px; }
.modal.estreito { max-width: 460px; }
.modal-topo { display: flex; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--borda); }
.modal-topo h2 { font-size: 20px; }
.modal-topo .btn-icone { margin-left: auto; }
.modal-corpo { padding: 22px; }
.modal-rodape { padding: 16px 22px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 12px; background: var(--cabecalho-tabela); border-radius: 0 0 6px 6px; }

/* leitor de código de barras (expedição) */
.leitor { display: flex; align-items: center; gap: 22px; }
.leitor svg.icone-barras { width: 84px; height: 64px; flex: 0 0 84px; color: var(--texto); }
.leitor input {
  flex: 1; min-height: 76px; font-size: 30px; font-weight: 600; color: var(--azul-escuro);
  border: 2px solid var(--azul); border-radius: var(--raio); background: #f2f7fd; padding: 0 22px;
}
.leitor input::placeholder { color: var(--azul); opacity: .85; }
.leitor input:focus { outline: none; box-shadow: 0 0 0 4px rgba(0, 90, 170, .18); }
.lista-carga .tabela td { font-size: 20px; padding: 16px 14px; }
.lista-carga .tabela td.produto { font-weight: 700; }
.lista-carga input[type=checkbox] { width: 34px; height: 34px; cursor: pointer; accent-color: var(--azul); }

/* utilidades */
.texto-fraco { color: var(--texto-3); }
.texto-2 { color: var(--texto-2); }
.texto-ok { color: var(--verde); }
.texto-critico { color: var(--vermelho); }
.forte { font-weight: 700; }
.grande { font-size: 20px; }
.nowrap { white-space: nowrap; }
.direita { text-align: right; }
.mt { margin-top: 20px; }
.mb0 { margin-bottom: 0 !important; }
.linha-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.linha-flex .espaco { flex: 1; }
.destaque-numero { font-size: 28px; font-weight: 700; }
.so-impressao { display: none; }

/* ------------------------------------------------------------ documento para impressão (A4) */
.folha {
  background: #fff; width: 210mm; min-height: 297mm; margin: 0 auto 24px; padding: 14mm 14mm 12mm;
  border: 1px solid var(--borda); color: #111; font-size: 13px;
}
.doc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 8mm; }
.doc-logo { display: block; height: 22mm; width: auto; margin: -2mm 0 2mm -2mm; }
.doc-empresa .nome { font-size: 30px; font-weight: 800; color: var(--azul-escuro); text-transform: uppercase; line-height: 1.05; }
.doc-empresa .dados { font-size: 12px; color: #333; margin-top: 6px; line-height: 1.5; }
.doc-barras { text-align: center; }
.doc-barras svg { display: block; height: 22mm; width: auto; max-width: 75mm; }
.doc-barras .numero { font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-top: 2px; }
.doc-titulo { text-align: center; font-size: 24px; font-weight: 800; color: var(--azul-escuro); margin: 0 0 6mm; text-transform: uppercase; }
.doc-caixa { width: 100%; border-collapse: collapse; border: 1.5px solid var(--azul-escuro); margin-bottom: 6mm; }
.doc-caixa td { border: 1px solid var(--azul-escuro); padding: 7px 10px; font-size: 14px; }
.doc-caixa .rot { color: var(--azul-escuro); font-weight: 700; white-space: nowrap; width: 1%; }
.doc-itens { width: 100%; border-collapse: collapse; border: 1.5px solid var(--azul-escuro); }
.doc-itens th { background: var(--azul-escuro); color: #fff; padding: 8px; font-size: 13px; border: 1px solid var(--azul-escuro); }
.doc-itens td { border: 1px solid var(--azul-escuro); padding: 7px 8px; font-size: 14px; height: 32px; }
.doc-itens .num { text-align: right; white-space: nowrap; }
.doc-itens .centro { text-align: center; }
.doc-totais { width: 48%; margin-left: auto; border-collapse: collapse; border: 1.5px solid var(--azul-escuro); border-top: 0; }
.doc-totais td { border: 1px solid var(--azul-escuro); padding: 7px 10px; font-size: 14px; }
.doc-totais .rot { color: var(--azul-escuro); font-weight: 700; }
.doc-totais .num { text-align: right; }
.doc-totais tr.total td { background: var(--azul-escuro); color: #fff; font-size: 18px; font-weight: 800; }
.doc-obs { margin-top: 6mm; font-size: 13px; }
.doc-assinaturas { display: flex; gap: 14mm; margin-top: 22mm; }
.doc-assinaturas div { flex: 1; border-top: 1px solid #111; text-align: center; padding-top: 6px; font-size: 14px; }
.doc-rodape { text-align: center; font-size: 11px; margin-top: 10mm; color: #333; }
.barra-impressao { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }

/* ------------------------------------------------------------ celular / tablet */
@media screen and (max-width: 1100px) {
  .lado-a-lado { grid-template-columns: 1fr; }
  .grade-3 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 860px) {
  .lateral { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto .lateral { transform: none; box-shadow: 4px 0 24px rgba(0, 0, 0, .25); }
  .botao-menu { display: inline-flex; }
  .topo { padding: 0 16px; }
  .topo h1 { font-size: 20px; }
  .conteudo { padding: 16px; }
  .grade-2, .grade-3, .formulario, .formulario.tres, .formulario.quatro { grid-template-columns: 1fr; }
  .conexao span { display: none; }
  .folha { width: 100%; min-height: 0; padding: 16px; }
}

/* ------------------------------------------------------------ impressão */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .lateral, .topo, .faixa-exemplo, .barra-impressao, #avisos, .nao-imprimir { display: none !important; }
  .conteudo { padding: 0; }
  .folha { border: 0; margin: 0; width: 210mm; min-height: 0; page-break-after: always; }
  .so-impressao { display: block; }
  .cartao { border: 0; padding: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}