/* Padrão visual unificado do sistema (carregado por último em app.html).
   Alinha tipografia (Manrope e escala hierárquica h1/h2/h3/labels), bordas finas (1px),
   cores semânticas autoexplicativas, barras de busca, filtros, balão do usuário e módulos. */

/* 1. Tipografia unificada (Manrope em todo o sistema, números tabulares e escala hierárquica padronizada) */
:root {
  --fonte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --larg-max: 1680px;
}
body, button, input, select, textarea, table, code, kbd, .mono,
.pd .mono, .fo .mono, .em .mono, .rec .chv code {
  font-family: var(--fonte) !important;
  font-variant-numeric: tabular-nums;
}

/* Hierarquia tipográfica global padronizada (h1, h2, h3, subtítulos, rótulos e cabeçalhos de tabela) */
.cab h1, #tela h1 {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--tinta) !important;
  margin: 0 !important;
}
.cab p, .cab .sub {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--suave) !important;
  margin: 3px 0 0 !important;
}
.tl-modal h2, .rc-modal h2, .em-modal h2, #tela h2 {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: var(--tinta) !important;
}
.c h3, .rt-col h3, .fo-sec h3, .cl-sec, .tl-modal h3, #tela h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--tinta) !important;
}
.campo > label, .campo > .rot, .tl-modal .campo > label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--tinta2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* 2. Ícones, botões com borda fina (1px), cores semânticas autoexplicativas e badges/tags */
svg.ic.sm { width: 15px; height: 15px; }
svg.ic.lg { width: 20px; height: 20px; }

.btn {
  white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s, transform .08s;
}
.btn.sm {
  min-height: 36px;
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 999px;
  white-space: nowrap;
}
.btn.ico {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  justify-content: center;
}
.btn:not(.azul):not(.preto):not(.verde):not(.ambar):not(.claro):not(.verm):not(.perigo):not(.pd-perigo-cheio):not(.fantasma):not(.rc-feito):not(.rt-desistir):not(.em-desistir):not(.cl-excluir):not(.fo-excluir):not(.em-perigo),
.btn.borda:not(.rt-desistir):not(.em-desistir):not(.cl-excluir):not(.fo-excluir):not(.em-perigo):not(.perigo):not(.verm) {
  background: #fff;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px #d4dae6;
}
.btn:not(.azul):not(.preto):not(.verde):not(.ambar):not(.claro):not(.verm):not(.perigo):not(.pd-perigo-cheio):not(.fantasma):not(.rc-feito):not(.rt-desistir):not(.em-desistir):not(.cl-excluir):not(.fo-excluir):not(.em-perigo):hover:not(:disabled),
.btn.borda:not(.rt-desistir):not(.em-desistir):not(.cl-excluir):not(.fo-excluir):not(.em-perigo):not(.perigo):not(.verm):hover:not(:disabled) {
  background: #f5f8fc;
  box-shadow: inset 0 0 0 1px #94a3b8;
}
.btn.fantasma {
  background: transparent;
  color: var(--suave);
  box-shadow: none;
}
.btn.fantasma:hover {
  background: var(--app);
  color: var(--tinta);
}

/* Sinalização semântica por cores: ações destrutivas/desistir/excluir/remover sempre em vermelho claro/autoexplicativo */
.btn.rt-desistir,
.btn.em-desistir,
.btn.cl-excluir,
.btn.fo-excluir,
.btn.em-perigo,
.btn.verm,
.btn.perigo:not(#em-aOk),
.btn[data-acao="excluir"],
.btn[data-acao="desistir"],
.btn[data-acao="desistir-nota"],
.btn[data-acao="limpar"],
.btn[data-acao="exc-abrir"],
.btn[data-acao="excluir-sel"],
.btn[data-acao="desvincular"],
.rt-linha .btn[data-acao="rem"],
.em-linha .btn[data-acao="rem"] {
  background: #fff5f5 !important;
  color: var(--verm) !important;
  box-shadow: inset 0 0 0 1px #f3b8b8 !important;
}
.btn.rt-desistir:hover:not(:disabled),
.btn.em-desistir:hover:not(:disabled),
.btn.cl-excluir:hover:not(:disabled),
.btn.fo-excluir:hover:not(:disabled),
.btn.em-perigo:hover:not(:disabled),
.btn.verm:hover:not(:disabled),
.btn.perigo:not(#em-aOk):hover:not(:disabled),
.btn[data-acao="excluir"]:hover:not(:disabled),
.btn[data-acao="desistir"]:hover:not(:disabled),
.btn[data-acao="desistir-nota"]:hover:not(:disabled),
.btn[data-acao="limpar"]:hover:not(:disabled),
.btn[data-acao="exc-abrir"]:hover:not(:disabled),
.btn[data-acao="excluir-sel"]:hover:not(:disabled),
.btn[data-acao="desvincular"]:hover:not(:disabled),
.rt-linha .btn[data-acao="rem"]:hover:not(:disabled),
.em-linha .btn[data-acao="rem"]:hover:not(:disabled) {
  background: var(--verm2) !important;
  color: #991b1b !important;
  box-shadow: inset 0 0 0 1px #e57373 !important;
}
/* Confirmação final de ação destrutiva (vermelho cheio) */
.btn.pd-perigo-cheio,
#em-aOk.perigo,
#pd-eOk,
.btn[data-conf="1"] {
  background: var(--verm) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn.pd-perigo-cheio:hover:not(:disabled),
#em-aOk.perigo:hover:not(:disabled),
#pd-eOk:hover:not(:disabled),
.btn[data-conf="1"]:hover:not(:disabled) {
  background: #991b1b !important;
  color: #fff !important;
}

/* Botões semânticos verdes (confirmação/sucesso) e âmbar (ciência/atenção) */
.btn.verde {
  background: var(--verde) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn.verde:hover:not(:disabled) {
  background: #116932 !important;
}
.btn.ambar {
  background: var(--ambar2) !important;
  color: #92400e !important;
  box-shadow: inset 0 0 0 1px #f59e0b !important;
}
.btn.ambar:hover:not(:disabled) {
  background: #fde68a !important;
}

.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--app);
  color: var(--tinta2);
}
.badge.t-ok, .tag.t-ok, .tag.v { background: var(--verde2); color: var(--verde); }
.badge.t-warn, .tag.t-warn, .tag.a { background: var(--ambar2); color: #9a4a06; }
.badge.t-bad, .tag.t-bad { background: var(--verm2); color: var(--verm); }
.badge.t-info, .tag.t-info, .tag.z { background: var(--azul3); color: var(--azul); }
.badge.t-neutral, .tag.t-neutral { background: var(--app); color: var(--suave); }

/* 3. Campos editáveis de formulário: fundo branco, borda fina e elegante (1px solid #d0d7e3) e foco azul. */
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo, #acesso)
  :is(input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], input:not([type]), select, textarea):not(:disabled):not([readonly]):not(.cl-busca *):not(.fo-busca *):not(.em-busca *):not(.busca *):not(.pd-nBusca *):not(.rt-add *) {
  background-color: #ffffff !important;
  border: 1px solid #cfd6e3 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 16, 19, 0.03) !important;
  font: 600 13.5px var(--fonte) !important;
  color: var(--tinta) !important;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo, #acesso)
  :is(input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], input:not([type]), select, textarea):not(:disabled):not([readonly]):not(.cl-busca *):not(.fo-busca *):not(.em-busca *):not(.busca *):not(.pd-nBusca *):not(.rt-add *):hover {
  border-color: #94a3b8 !important;
}
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo, #acesso)
  :is(input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], input:not([type]), select, textarea):not(.cl-busca *):not(.fo-busca *):not(.em-busca *):not(.busca *):not(.pd-nBusca *):not(.rt-add *):focus,
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo, #acesso)
  :is(input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], input:not([type]), select, textarea):not(.cl-busca *):not(.fo-busca *):not(.em-busca *):not(.busca *):not(.pd-nBusca *):not(.rt-add *):focus-visible {
  outline: none !important;
  background-color: #ffffff !important;
  border-color: var(--azul) !important;
  box-shadow: 0 0 0 3px rgba(31, 107, 255, 0.14) !important;
}
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo, #acesso)
  :is(input, textarea)::placeholder {
  color: #7b8496 !important;
  font-weight: 500;
  opacity: 1;
}

/* Seta visível em todos os campos <select> para deixar claro que é uma lista de opções */
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo) select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b3f48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important;
  cursor: pointer;
}

/* Campos somente-leitura ou desabilitados: visual cinza tracejado para não confundir com editáveis */
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo)
  :is(input[readonly], input:disabled, select:disabled, textarea:disabled) {
  background-color: #eef1f6 !important;
  border: 1px dashed #c5cede !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #555d6d !important;
  cursor: not-allowed;
}

/* Campos com erro de validação */
:is(#tela, .tl-ov, .tl-fundo, .em-ov, .pd-ov, .fo-ov, .rc-ov, .rc-fundo)
  :is(.campo.erro input, .campo.erro select, .campo.erro textarea, input[aria-invalid="true"], select.falta, input.falta) {
  background-color: var(--verm2) !important;
  border: 1px solid var(--verm) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

/* 4. Barras de busca (ocupando todo o espaço disponível) e filtros visíveis e fáceis de usar */
.cl-barra, .fo-barra, .pd-barra, .em-barra, .rc-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cl-busca, .fo-busca, .em-busca, .em label.em-busca, .pd .busca, .rec .busca, .pd-nBusca, .rt-add {
  flex: 1 1 280px !important;
  max-width: none !important;
  min-height: 44px;
  background: #fff !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #cfd6e3 !important;
  box-shadow: 0 1px 2px rgba(15, 16, 19, 0.03) !important;
  margin: 0 !important;
}
.rt-add {
  flex: 0 0 auto !important;
}
.cl-busca:focus-within, .fo-busca:focus-within, .em-busca:focus-within,
.pd .busca:focus-within, .rec .busca:focus-within, .pd-nBusca:focus-within, .rt-add:focus-within {
  border-color: var(--azul) !important;
  box-shadow: 0 0 0 3px rgba(24, 71, 240, 0.12) !important;
}
.cl-busca svg, .fo-busca svg, .em-busca svg, .pd .busca svg, .rec .busca svg, .pd-nBusca svg, .rt-add svg {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  color: var(--suave);
}
.cl-busca input, .fo-busca input, .em-busca input, .em .em-busca input, .pd .busca input, .rec .busca input, .pd-nBusca input, .rt-add input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font: 600 13.5px var(--fonte) !important;
  color: var(--tinta);
  min-height: 40px;
  margin: 0 !important;
  padding: 0 !important;
}

#cl-rota {
  flex: 0 0 auto;
  width: auto;
  min-width: 190px;
  min-height: 44px;
  border-radius: 999px !important;
  padding: 0 16px;
}

.cl-filtros, .fo-filtros, .em-filtros-b, .pd .filtros, .rec .filtros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 !important;
}
.cl-filtros button, .fo-filtros button, .em-filtros-b button, .pd .filtros button, .rec .filtros button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #d5d9e0;
  background: #fff;
  color: var(--tinta2);
  font: 700 12.5px var(--fonte);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cl-filtros button:hover, .fo-filtros button:hover, .em-filtros-b button:hover,
.pd .filtros button:hover, .rec .filtros button:hover {
  border-color: var(--tinta);
  color: var(--tinta);
}
.cl-filtros button.on, .fo-filtros button.on, .em-filtros-b button.on,
.pd .filtros button.on, .rec .filtros button.on {
  background: var(--preto);
  border-color: var(--preto);
  color: #fff;
}
.fo-filtros .cnt, .em-filtros-b .cnt, .pd .filtros .cnt, .rec .filtros .cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--app);
  color: var(--tinta);
  font-size: 11px;
  font-weight: 800;
}
.fo-filtros button.on .cnt, .em-filtros-b button.on .cnt,
.pd .filtros button.on .cnt, .rec .filtros button.on .cnt {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Filtro de Registro de atividades (Empresa) */
.em-filtros {
  background: var(--app);
  padding: 12px 14px;
  border-radius: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.em-filtros label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta2);
}
.em-filtros select { min-width: 220px; }
.em-filtros input[type=date] { min-width: 155px; }
.em-filtros .btn { min-height: 40px; padding: 0 18px; }

/* 5. Padronização de Tabelas e Listas no "Estilo Clientes" (Cartões arredondados flutuantes) */
.pd-card, .em-c, .rec .card-tab {
  border-radius: var(--r);
  background: var(--card);
}
.em-tabela table, .rec .tabela-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.em-tabela th, .rec .tabela-wrap th {
  font-size: 11px;
  font-weight: 700;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 14px;
  background: #f7f8fa;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  white-space: nowrap;
}
.em-tabela th.r, .rec .tabela-wrap th.r, .fo-tabela th.r, .pd-tabela th.r,
.em-tabela td.r, .rec .tabela-wrap td.r, .fo-tabela td.r, .pd-tabela td.r {
  text-align: right !important;
}
.em-tabela th.ce, .em-tabela td.ce {
  text-align: center !important;
}
.em-tabela td, .rec .tabela-wrap td {
  padding: 12px 14px;
  border-top: 1px solid var(--linha);
  vertical-align: middle;
  color: var(--tinta);
  font-size: 13.5px;
}
.em-tabela tbody tr:hover, .rec .tabela-wrap tbody tr:hover {
  background: #f8faff;
}
.cl-nome b, .fo-nome b, .pd .c-desc b, .em-tabela td b, .em-cli b, .rec td.forn b, .nt .nome b {
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.01em;
}
.cl-nome small, .fo-nome small, .em-tabela td small, .em-cli small, .rec td.forn .doc, .nt .nome .nota {
  font-size: 12px;
  font-weight: 500;
  color: var(--suave);
}

/* Em Produtos, botões Editar e Movimentação lado a lado, sem embolar */
.pd .pd-ac {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
}
.pd .pd-ac .btn, .pd .c-acoes .btn {
  width: auto !important;
  min-height: 36px !important;
  padding: 6px 12px !important;
  justify-content: center;
  white-space: nowrap !important;
}
.pd .pd-ac .btn .tx, .pd .c-acoes .btn .tx {
  display: inline !important;
  font-size: 12.5px;
}
.pd .c-cod .mono {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--tinta2);
  background: var(--app);
  padding: 4px 9px;
  border-radius: 8px;
}

/* Fornecedores, Produtos e Notas recebidas no layout arredondado de Clientes (cada linha = cartão branco arredondado) */
.fo-c, #pd-p-produtos > .pd-card, .rec .card-tab {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.fo-vazio, #pd-corpoProd > .pd-vazio, #pd-corpoProd > .pd-falha, .rec .vazio-lista {
  background: var(--card);
  border: 1px dashed var(--linha);
  border-radius: 18px;
  padding: 46px 20px;
}

/* Polimento específico de Notas recebidas (#/recebidas) */
.rec .hero > .c, .rec .kpi, .rec details.hist {
  border: 1px solid var(--linha);
  border-radius: 18px;
}
.rec .card-topo {
  padding: 4px 4px 10px !important;
}
.rec td.forn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.rec td.forn b {
  max-width: 100% !important;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec .chv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px !important;
  background: var(--app);
  border: 1px solid #e2e6ef;
  border-radius: 999px;
  padding: 2px 3px 2px 10px;
  max-width: 100%;
}
.rec .chv code {
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta2);
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec .chv .copiar {
  min-height: 24px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  border: 1px solid #d5d9e0 !important;
  background: #fff !important;
  color: var(--tinta2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex: none;
}
.rec .chv .copiar:hover {
  border-color: var(--azul) !important;
  color: var(--azul) !important;
}
.rec .chv .copiar.feito {
  background: var(--verde2) !important;
  border-color: var(--verde) !important;
  color: var(--verde) !important;
}
.rec .chv .copiar span {
  display: inline !important;
}
.rec .forn b {
  max-width: none !important;
}
.rec td.c-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
.rec .trilha {
  margin-top: 0 !important;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.rec .trilha .p {
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
}
.rec .trilha .p span {
  display: none !important;
}
.rec .trilha .p i {
  width: 16px !important;
  height: 16px !important;
}
.rec .trilha .p i svg {
  width: 10px !important;
  height: 10px !important;
}
.rec .trilha .l {
  width: 10px !important;
  margin: 0 4px !important;
}
.rec .prazo {
  margin-top: 0 !important;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rec .acoes-nota {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}
.rec .rc-feito {
  background: var(--verde2) !important;
  color: var(--verde) !important;
  box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.22) !important;
  font-weight: 700 !important;
  min-width: 164px;
  white-space: nowrap !important;
  justify-content: center;
}
.rec .acoes-nota > [data-acao="importar"],
.rec .acoes-nota > [data-evento],
.rec .acoes-nota > [data-acao="xml"],
.rec .acoes-nota > [data-acao="portal"] {
  min-width: 164px;
  white-space: nowrap !important;
  justify-content: center;
}
.fo-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta2);
  font-size: 13px;
}
.fo-loc svg { color: var(--suave); flex: none; }
.fo-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--app);
  color: var(--tinta2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.fo-pill svg { color: var(--suave); }

@media (min-width: 1100px) {
  .fo-tabela table, .fo-tabela thead, .fo-tabela tbody,
  #pd-corpoProd .pd-tabela table, #pd-corpoProd .pd-tabela thead, #pd-corpoProd .pd-tabela tbody,
  .rec .tabela-wrap table, .rec .tabela-wrap thead, .rec .tabela-wrap tbody {
    display: grid !important;
    gap: 8px;
    width: 100%;
  }
  .fo-tabela thead tr {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.8fr) minmax(140px, 1.1fr) 110px 115px 130px 105px 60px;
    gap: 12px;
    align-items: center;
    padding: 2px 16px;
  }
  .fo-tabela tbody tr {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.8fr) minmax(140px, 1.1fr) 110px 115px 130px 105px 60px;
    gap: 12px;
    align-items: center;
    background: var(--card) !important;
    border: 1px solid var(--linha) !important;
    border-radius: 18px !important;
    padding: 13px 16px !important;
    transition: border-color .12s, box-shadow .12s;
  }
  #pd-corpoProd .pd-tabela thead tr {
    display: grid !important;
    grid-template-columns: 34px 92px minmax(240px, 1fr) 52px 96px 104px 108px 60px;
    gap: 12px;
    align-items: center;
    padding: 2px 16px;
  }
  #pd-corpoProd .pd-tabela tbody tr {
    display: grid !important;
    grid-template-columns: 34px 92px minmax(240px, 1fr) 52px 96px 104px 108px 60px;
    gap: 12px;
    align-items: center;
    background: var(--card) !important;
    border: 1px solid var(--linha) !important;
    border-radius: 18px !important;
    padding: 12px 16px !important;
    transition: border-color .12s, box-shadow .12s;
  }
  .rec .tabela-wrap thead tr {
    display: grid !important;
    grid-template-columns: 28px minmax(280px, 1fr) 92px 110px 136px 214px;
    gap: 14px;
    align-items: center;
    padding: 2px 16px;
  }
  .rec .tabela-wrap tbody tr {
    display: grid !important;
    grid-template-columns: 28px minmax(280px, 1fr) 92px 110px 136px 214px;
    gap: 14px;
    align-items: center;
    background: var(--card) !important;
    border: 1px solid var(--linha) !important;
    border-radius: 18px !important;
    padding: 13px 16px !important;
    transition: border-color .12s, box-shadow .12s;
  }
  .rec .tabela-wrap tbody tr.sel {
    background: var(--azul4) !important;
    border-color: var(--azul) !important;
  }
  .rec .tabela-wrap td {
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 0 !important;
  }
  .rec .tabela-wrap td.c-emissao,
  .rec .tabela-wrap td.c-status {
    text-align: left !important;
  }
  #pd-corpoProd .pd-tabela td.c-desc {
    width: auto !important;
    min-width: 0 !important;
  }
  .fo-tabela th, #pd-corpoProd .pd-tabela th, .rec .tabela-wrap th {
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    font-size: 11px;
    font-weight: 700;
    color: var(--suave);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .fo-tabela td, #pd-corpoProd .pd-tabela td, .rec .tabela-wrap td {
    padding: 0 !important;
    border: 0 !important;
    min-width: 0;
  }
  .fo-tabela tbody tr:hover, #pd-corpoProd .pd-tabela tbody tr:hover, .rec .tabela-wrap tbody tr:hover:not(.sel) {
    background: #fff !important;
    border-color: #cfd5e2 !important;
    box-shadow: 0 4px 12px rgba(15, 16, 19, 0.04);
  }
  #pd-corpoProd .pd-tabela tbody tr.inativo {
    opacity: 0.68;
  }
}

@media (max-width: 1099px) {
  .fo-tabela table, .fo-tabela tbody, .rec .tabela-wrap tbody { display: grid; gap: 8px; }
  .fo-tabela thead { display: none; }
  .fo-tabela tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    background: var(--card) !important;
    border: 1px solid var(--linha) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
  }
  .fo-tabela td { padding: 0 !important; border: 0 !important; text-align: left !important; }
  .fo-tabela td.fo-acoes { grid-column: 2; grid-row: 1; }
  #pd-corpoProd .pd-tabela tbody { display: grid; gap: 8px; }
  #pd-corpoProd .pd-tabela tbody tr, .rec .tabela-wrap tbody tr {
    background: var(--card) !important;
    border: 1px solid var(--linha) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
  }
}

/* 6. Topo: Trilha de navegação (Pasta x › y › z), Sub-abas da tela e Balão do Usuário */
.princ > .topo {
  max-width: none !important;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  flex-wrap: nowrap;
}
.topo .pilulas {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
.topo .pilulas.trilha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--suave);
}
.topo .pilulas.trilha a {
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border-radius: 6px;
  color: var(--suave);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.topo .pilulas.trilha a:hover {
  color: var(--azul);
  background: transparent !important;
}
.topo .pilulas.trilha .bc-sep {
  color: #b0b6c3;
  font-weight: 700;
  user-select: none;
}
.topo .pilulas.trilha .bc-pasta {
  color: var(--suave);
}
.topo .pilulas.trilha .bc-atual {
  color: var(--tinta);
  font-weight: 800;
}

/* Sub-abas de módulos com várias páginas (Produtos e estoque / Empresa) */
.w-abas, .pd .pd-abas {
  display: flex !important;
  gap: 4px;
  padding: 4px;
  background: #e9ebef;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 14px;
  overflow-x: auto;
}
.w-abas a, .pd .pd-abas button {
  flex: none;
  min-height: 38px;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta2);
  font: 700 13px var(--fonte);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.w-abas a:hover, .pd .pd-abas button:hover {
  background: #dfe2e8;
}
.w-abas a.on, .pd .pd-abas button.on {
  background: var(--preto);
  color: #fff;
}
.topo .dir {
  order: 2 !important;
  flex: 0 0 auto;
  margin-left: auto !important;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto !important;
}
.topo .dir .chip[hidden] { display: none !important; }

.topo .dir .av, .av {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 40px !important;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  border: 1px solid #d5d9e0;
  background: #fff;
  color: var(--tinta);
  font: 700 13px var(--fonte);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 16, 19, 0.04);
}
.av:hover { border-color: var(--azul); }
.av-circ {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--azul3);
  color: var(--azul);
  font: 800 12px var(--fonte);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.av-circ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.av-nome {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-usuario {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 20px;
  padding: 14px;
  min-width: 280px;
  box-shadow: 0 18px 40px rgba(15, 16, 19, 0.16);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-usuario[hidden] { display: none !important; }
.mu-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
}
.mu-cab .av-circ { width: 46px; height: 46px; font-size: 15px; }
.mu-id, .mu-cab > div { min-width: 0; flex: 1; }
.mu-id b, .mu-cab > div b { display: block; font-size: 14px; color: var(--tinta); overflow-wrap: anywhere; line-height: 1.25; }
.mu-id small, .mu-cab > div small { display: block; font-size: 12px; color: var(--suave); overflow-wrap: anywhere; margin-top: 2px; }
.mu-foto-ac { display: flex; gap: 10px; margin-top: 5px; }
.mu-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--azul);
  font: 700 12px var(--fonte);
  cursor: pointer;
}
.mu-link:hover { text-decoration: underline; }
.mu-link.perigo { color: var(--verm); }

.mu-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--app);
  border-radius: 14px;
  padding: 10px 12px;
}
.mu-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
}
a.mu-chip:hover { color: var(--azul); }
.mu-chip .ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  flex: none;
}
.mu-chip.warn { color: #9a4a06; }
.mu-chip.bad { color: var(--verm); }

.menu-usuario button[role="menuitem"]:not(.mu-sair) {
  width: 100%;
  border: 1.5px solid #c5cede;
  border-radius: 12px;
  background: #ffffff;
  padding: 9px 14px;
  min-height: 40px;
  text-align: center;
  font: 700 13px var(--fonte);
  color: var(--tinta);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.menu-usuario button[role="menuitem"]:not(.mu-sair):hover {
  background: var(--azul4);
  border-color: var(--azul);
  color: var(--azul);
}
.menu-usuario button[role="menuitem"].mu-perigo,
.menu-usuario button[data-a="sem-foto"] {
  border-color: #fecaca;
  color: var(--verm);
}
.menu-usuario button[role="menuitem"].mu-perigo:hover,
.menu-usuario button[data-a="sem-foto"]:hover {
  background: var(--verm2);
  border-color: var(--verm);
  color: var(--verm);
}

.mu-sair {
  width: 100%;
  border: 1.5px solid #fecaca;
  border-radius: 12px;
  background: #fff5f5;
  padding: 9px 14px;
  min-height: 40px;
  text-align: center;
  font: 700 13px var(--fonte);
  color: var(--verm);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.mu-sair:hover { background: var(--verm2); border-color: var(--verm); }

/* Marca lateral quando a empresa tem logo enviada */
.marca i.com-logo {
  background: #fff;
  border: 1px solid var(--linha);
  padding: 2px;
  overflow: hidden;
}
.marca i.com-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 7. Upload de Logo da Empresa (DANFE) e Foto do Usuário em Empresa */
label.btn, .em label.btn, .em-modal label.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1.2;
}
.em-logo-box, .em-foto-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--app);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 4px;
}
.em-logo-prev {
  width: 156px;
  height: 84px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px dashed #b8c2d4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  flex: none;
  text-align: center;
}
.em-logo-prev img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.em-logo-prev span { font-size: 11.5px; font-weight: 700; color: var(--suave); line-height: 1.25; }
.em-logo-prev span small { display: block; font-size: 10.5px; font-weight: 500; }
.em-logo-info, .em-foto-info { flex: 1; min-width: 0; }
.em-logo-info b, .em-foto-info b { display: block; font-size: 13.5px; }
.em-logo-info .sub, .em-foto-info .sub { margin: 2px 0 10px; }
.em-logo-info .em-ac, .em-foto-info .em-ac {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.em-foto-prev .av-circ { width: 54px; height: 54px; font-size: 18px; }
.em-usu { display: flex; align-items: center; gap: 10px; }

/* 8. NF-e e Preços (.cf): 3 cartões alinhados no topo e grade de 12 colunas em Padrões da nota */
.cf .rodape { justify-content: flex-end; }
.cf .rodape .msg-erro { order: -1; }
.cf .cards.tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.cf .cards.tres > .c {
  display: flex;
  flex-direction: column;
}
.cf .cards.tres > .c .rodape {
  margin-top: auto;
  padding-top: 14px;
}
.cf .cards.tres > .c.larga { grid-column: 1 / -1; }
.cf textarea { min-height: 88px; }

.cf-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 12px;
  align-items: start;
}
.cf-grade .c1 { grid-column: span 1; }
.cf-grade .c2 { grid-column: span 2; }
.cf-grade .c3 { grid-column: span 3; }
.cf-grade .c4 { grid-column: span 4; }
.cf-grade .c6 { grid-column: span 6; }
.cf-grade .c12 { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .cf .cards.tres { grid-template-columns: minmax(0, 1fr); }
  .cf-grade .c1, .cf-grade .c2, .cf-grade .c3, .cf-grade .c4 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .cf-grade [class^="c"], .cf-grade [class*=" c"] { grid-column: 1 / -1; }
  .em-logo-box, .em-foto-box { flex-direction: column; align-items: flex-start; }
}

/* 9. Botão de menu 3 risquinhos (☰) e popover de opções unificado em Produtos, Fornecedores, Clientes e Notas */
.w-btn-menu {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--tinta2) !important;
  box-shadow: inset 0 0 0 1px #d4dae6 !important;
  transition: background .12s, color .12s, box-shadow .12s;
}
.w-btn-menu:hover:not(:disabled) {
  background: #f4f7fc !important;
  color: var(--tinta) !important;
  box-shadow: inset 0 0 0 1px #94a3b8 !important;
}
.w-btn-menu.on,
.w-btn-menu[aria-expanded="true"] {
  background: var(--azul4) !important;
  color: var(--azul) !important;
  box-shadow: inset 0 0 0 1px var(--azul) !important;
}
#pd-corpoProd .pd-tabela tbody tr,
.cl-item {
  cursor: pointer;
}
.rc-menu,
.w-menu-acoes {
  position: fixed;
  z-index: 95;
  width: min(300px, calc(100vw - 20px));
  max-height: calc(100dvh / var(--z, 1) - 20px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d5dce8;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 16, 19, 0.18);
  padding: 6px;
}
.rc-menu button.perigo,
.w-menu-acoes button.perigo {
  color: var(--verm);
}
.rc-menu button.perigo:hover:not(:disabled),
.w-menu-acoes button.perigo:hover:not(:disabled) {
  background: var(--verm2);
}
.rc-menu button.perigo svg,
.w-menu-acoes button.perigo svg {
  color: var(--verm);
}
.w-menu-acoes .sec {
  font-size: 11px;
  font-weight: 800;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-menu-acoes hr {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: 4px 0;
}
.w-menu-acoes button,
.w-menu-acoes a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: 600 13px var(--fonte);
  color: var(--tinta);
  padding: 9px 10px;
  border-radius: 12px;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
}
.w-menu-acoes button:hover:not(:disabled),
.w-menu-acoes a:hover {
  background: var(--app);
}
.w-menu-acoes button.perigo {
  color: var(--verm);
}
.w-menu-acoes button.perigo:hover:not(:disabled) {
  background: var(--verm2);
}
.w-menu-acoes button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.w-menu-acoes button svg,
.w-menu-acoes a svg {
  margin-top: 1px;
  color: var(--suave);
  flex: none;
}
.w-menu-acoes button.perigo svg {
  color: var(--verm);
}
.w-menu-acoes small {
  display: block;
  color: var(--suave);
  font-weight: 500;
  font-size: 11.5px;
  margin-top: 2px;
  line-height: 1.3;
}
.w-menu-acoes:not([hidden]),
.rc-menu.on {
  display: block !important;
  animation: surge .12s ease-out;
}
.w-menu-acoes[hidden] {
  display: none !important;
}