/* ===== FAQ de erros (20/09/2026) =====
   Lista de blocos abríveis. O objetivo é alguém em pânico com uma nota
   recusada achar a resposta em segundos - por isso o código do erro é a
   informação mais destacada de cada linha, e não o título. */

.faq-busca {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 12px;
}

.faq-busca input {
  font-size: var(--fs-md);
  padding: 10px 12px;
}

.faq-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.faq-filtro {
  font-size: var(--fs-xs);
  padding: 5px 12px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto-suave);
  border-radius: 999px;
  cursor: pointer;
}

.faq-filtro:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.faq-filtro.ativo {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  font-weight: 600;
}

.faq-contagem {
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
  margin-bottom: 10px;
}

.faq-item {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  background: var(--cor-fundo-cartao);
  margin-bottom: 8px;
}

.faq-item > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary:hover {
  background: var(--cor-secundario-fundo);
}

.faq-item[open] > summary {
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-secundario-fundo);
}

.faq-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* O código é o que a pessoa copia da tela de erro - fica em destaque e em
   fonte monoespaçada para bater visualmente com o que ela tem na mão. */
.faq-codigo {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
}

.faq-codigo-sem {
  background: var(--cor-secundario-fundo);
  color: var(--cor-texto-suave);
}

.faq-titulo {
  font-weight: 600;
  color: var(--cor-texto);
}

/* Estado escrito por extenso, nunca só por cor. */
.faq-marca-visto {
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  white-space: nowrap;
}

.faq-categoria {
  color: var(--cor-texto-suave);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.faq-corpo {
  padding: 4px 14px 16px;
  max-width: 78ch;
}

.faq-corpo h4 {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin: 16px 0 5px;
}

.faq-corpo p {
  margin: 0;
  line-height: 1.6;
}

.faq-corpo ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.faq-corpo ol li {
  margin-bottom: 6px;
}

.faq-mensagem-sefaz {
  font-size: var(--fs-sm);
  padding: 9px 12px;
  border-left: 3px solid var(--cor-borda-suave);
  background: var(--cor-secundario-fundo);
  color: var(--cor-texto-suave);
  border-radius: 0 4px 4px 0;
}

.faq-vazio {
  padding: 24px 16px;
  line-height: 1.6;
}

.faq-vazio p + p {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .faq-item > summary {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Correção assistida (20/09/2026) =====
   O "de X para Y" é a parte que importa: é ele que o usuário lê antes de
   confirmar uma alteração em nota fiscal. Por isso os dois valores ficam um
   embaixo do outro, com rótulo escrito, e nunca diferenciados só por cor. */

.bloco-correcao {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  background: var(--cor-fundo-cartao);
  margin: 14px 0;
}

.bloco-correcao > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.bloco-correcao > summary::-webkit-details-marker {
  display: none;
}

.bloco-correcao > summary:hover {
  background: var(--cor-secundario-fundo);
}

.bloco-correcao[open] > summary {
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-secundario-fundo);
}

.correcao-corpo {
  padding: 14px;
  max-width: 78ch;
}

.correcao-explica {
  font-size: var(--fs-sm);
  color: var(--cor-texto-suave);
  line-height: 1.6;
  margin: 0 0 12px;
}

.correcao-corpo textarea {
  width: 100%;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.correcao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.correcao-acoes select {
  flex: 1 1 240px;
  min-width: 0;
}

.correcao-diag {
  margin-top: 14px;
  padding: 12px 13px;
  border-left: 3px solid var(--cor-primaria);
  background: var(--cor-secundario-fundo);
  font-size: var(--fs-base);
  line-height: 1.6;
  border-radius: 0 4px 4px 0;
}

.correcao-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.correcao-campo {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  padding: 12px 13px;
  background: var(--cor-fundo);
}

.correcao-campo-nome {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: 6px;
}

.correcao-de,
.correcao-para {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-sm);
  padding: 2px 0;
}

/* O rótulo "de" / "para" é escrito, não deduzido da cor. */
.correcao-de > span,
.correcao-para > span {
  flex: 0 0 34px;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
}

.correcao-de code {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
  padding: 2px 8px;
  border-radius: 3px;
  word-break: break-word;
}

.correcao-para code {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso-texto);
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  word-break: break-word;
}

.correcao-campo small {
  display: block;
  margin-top: 6px;
  color: var(--cor-texto-suave);
  line-height: 1.5;
}

.correcao-ressalva {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  border-radius: 4px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.correcao-corpo h4 {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin: 16px 0 8px;
}

/* Botão em estado de "clique de novo para confirmar" (23/09/2026). Usado
   quando a ação tem consequência mas não justifica um modal inteiro - o
   aviso cabe no próprio rótulo. A cor de alerta vem acompanhada do texto
   mudando, nunca sozinha. */
.btn-confirmando {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  border-color: var(--cor-aviso-texto);
  font-weight: 600;
}

/* Aviso que BLOQUEIA a ação, diferente do aviso informativo azul (23/09/2026).
   Usado quando falta configuração sem a qual a emissão não acontece - tem
   que se distinguir do aviso comum, senão vira mais um texto ignorado. */
.aviso.aviso-erro {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
  color: var(--cor-erro-texto);
}

.aviso.aviso-erro button {
  margin-left: 8px;
}

/* ---- Pré-auditoria fiscal (fiscal-autofill, Fase 1) ---- */
.pa-bloco { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-fundo-cartao); text-align: left; }
.pa-bloco h4 { margin: 0 0 6px; font-size: var(--fs-md); }
.pa-recolhido > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-md); }
.pa-recolhido > summary::-webkit-details-marker { display: none; }
.pa-recolhido > summary::before { content: "▸"; color: var(--cor-texto-suave); transition: transform 0.15s; }
.pa-recolhido[open] > summary::before { content: "▾"; }
.pa-recolhido > summary .pa-titulo { font-weight: 600; color: var(--cor-texto); }
.pa-recolhido > summary .pa-resumo-curto { font-size: var(--fs-base); color: var(--cor-texto-secundario); }
.pa-recolhido .pa-corpo { margin-top: 8px; }
.pa-bloco .pa-resumo { font-size: var(--fs-base); color: var(--cor-texto-secundario); margin: 0 0 6px; }
.pa-lista { list-style: none; margin: 6px 0; padding: 0; }
.pa-lista li { padding: 6px 8px; margin-bottom: 5px; border-radius: 6px; font-size: var(--fs-base); border: 1px solid var(--cor-secundario-borda); background: var(--cor-secundario-fundo); }
.pa-lista li.pa-BLOQUEANTE { background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); color: var(--cor-erro-texto); }
.pa-lista li.pa-ALERTA { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso-texto); }
.pa-lista small { display: block; opacity: 0.85; margin-top: 2px; }
.pa-ok { color: var(--cor-sucesso-texto); font-size: var(--fs-base); margin: 4px 0; }
.pa-nota { font-size: var(--fs-xs); color: var(--cor-texto-suave); margin: 6px 0 0; }

/* ---- Utilitários (auditoria de design, fase 3) ----
   Substituem os style="..." soltos do index.html. Têm !important de propósito: o estilo
   inline que eles trocaram vencia qualquer regra, então o visual fica idêntico.
   Para um estilo novo, prefira uma classe com nome de componente; use estes só se já existir. */
.u-barra-entre { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; flex-wrap:wrap !important; }
.u-barra-entre-base { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:12px !important; flex-wrap:wrap !important; margin-top:22px !important; }
.u-block-mb10 { display:block !important; margin-bottom:10px !important; }
.u-block-mb8 { display:block !important; margin-bottom:8px !important; }
.u-caixa { border:1px solid var(--cor-borda) !important; border-radius:8px !important; padding:10px 12px !important; margin-top:8px !important; }
.u-campo-inline { width:auto !important; display:inline !important; }
.u-campo-inline-mt3 { width:auto !important; margin-top:4px !important; }
.u-centro-texto { text-align:center !important; margin:0 auto 16px !important; max-width:52ch !important; }
.u-check-linha { display:flex !important; align-items:flex-start !important; gap:8px !important; margin:10px 0 !important; }
.u-dica { display:block !important; color:var(--cor-texto-suave) !important; margin-top:4px !important; }
.u-flex-centro-negrito { display:flex !important; align-items:center !important; gap:8px !important; font-weight:600 !important; }
.u-flex-entre { display:flex !important; justify-content:space-between !important; align-items:center !important; }
.u-flex-gap8 { display:flex !important; gap:8px !important; }
.u-fw400 { font-weight:400 !important; }
.u-m-0-0-2 { margin:0 0 2px !important; }
.u-m-4-0-8 { margin:4px 0 8px !important; }
.u-m0 { margin:0 !important; }
.u-max560 { max-width:560px !important; }
.u-mb12 { margin-bottom:12px !important; }
.u-mb2 { margin-bottom:2px !important; }
.u-ml8 { margin-left:8px !important; }
.u-mt-4 { margin-top:-4px !important; }
.u-mt0 { margin-top:0 !important; }
.u-mt12 { margin-top:12px !important; }
.u-mt4 { margin-top:4px !important; }
.u-mt8 { margin-top:8px !important; }
.u-my14 { margin:14px 0 !important; }
.u-pad-detalhe { padding:0 18px 16px !important; }
.u-pad-x6 { padding:0 6px !important; }
.u-pre-quebra { white-space:pre-wrap !important; }
.u-qr { width:180px !important; height:180px !important; border:1px solid var(--cor-borda) !important; border-radius:8px !important; }
.u-quebra-tudo { word-break:break-all !important; }
.u-relativo { position:relative !important; }
.u-uppercase { text-transform:uppercase !important; }
.u-vazio-grande { margin-top:16px !important; text-align:center !important; padding:36px 24px !important; }
.u-w-auto { width:auto !important; }
.btn-tema-icone { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ---- Busca global e atalhos (auditoria de design, fase 4) ---- */
.paleta-fundo { position: fixed; inset: 0; z-index: var(--z-paleta); background: var(--overlay-modal); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.paleta-fundo[hidden] { display: none; }
.paleta { width: 100%; max-width: 620px; background: var(--cor-fundo-cartao); color: var(--cor-texto); border: 1px solid var(--cor-borda); border-radius: 12px; box-shadow: var(--sombra-modal); overflow: hidden; }
.paleta input { width: 100%; margin: 0; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--cor-borda); border-radius: 0; font-size: var(--fs-md); background: transparent; color: inherit; }
.paleta input:focus { outline: none; box-shadow: none; }
.paleta ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.paleta li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: var(--fs-base); }
.paleta li.ativo { background: var(--cor-secundario-fundo-hover); }
.paleta li.paleta-grupo { cursor: default; padding: 10px 10px 4px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); }
.paleta li.paleta-vazio { cursor: default; color: var(--cor-texto-secundario); display: block; }
.paleta-dica { color: var(--cor-texto-suave); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.paleta-rotulo { overflow: hidden; text-overflow: ellipsis; }
.paleta-rodape { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--cor-borda); font-size: var(--fs-xs); color: var(--cor-texto-suave); }
.paleta-ajuda { padding: 18px 20px; max-width: 520px; }
.paleta-ajuda h3 { margin: 0 0 10px; }
.paleta-ajuda-rodape { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.btn-ajuda-flutuante {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-flutuante);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  font-size: var(--fs-lg);
  font-weight: 700;
  box-shadow: var(--sombra-flutuante);
  cursor: pointer;
}
.btn-ajuda-flutuante:hover { background: var(--cor-primaria-hover); }
@media print { .btn-ajuda-flutuante { display: none; } }
.paleta-ajuda table { width: 100%; margin-bottom: 14px; }
.paleta-ajuda td { padding: 6px 4px; vertical-align: top; font-size: var(--fs-sm); }
.paleta-ajuda kbd { font-family: inherit; font-size: var(--fs-xs); padding: 2px 6px; border: 1px solid var(--cor-borda); border-radius: 5px; background: var(--cor-secundario-fundo); white-space: nowrap; }
.btn-busca-global { margin-right: 6px; }

/* ---- Importar produtos de arquivo (aba Produtos) ---- */
.ip-bloco { margin: 12px 0 16px; }
.ip-corpo { padding: 4px 4px 8px; }
.ip-ajuda { font-size: var(--fs-sm); color: var(--cor-texto-secundario); margin: 6px 0 10px; }
.ip-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.ip-linha input[type='file'] { width: auto; flex: 1 1 260px; }
.ip-painel { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.ip-colunas-campos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ip-colunas-campos label { display: flex; flex-direction: column; font-size: var(--fs-xs); min-width: 140px; }
.ip-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 10px 0; }
.ip-marcar-todos { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ip-marcar-todos input { width: auto; }
.ip-tabela-rolagem { max-height: 420px; overflow: auto; margin-bottom: 10px; }
.ip-campo-ncm { width: 110px; }
.ip-campo-valor { width: 96px; text-align: right; }
.ip-desmarcado td { opacity: 0.55; }
.ip-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.ip-ok { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); color: var(--cor-sucesso-texto); }
.ip-aviso { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso-texto); }
.ip-erro { background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); color: var(--cor-erro-texto); }
.ip-alertas { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-xs); color: var(--cor-texto-secundario); }
.ip-progresso { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: var(--fs-sm); }
.ip-progresso[hidden] { display: none; }
.ip-progresso progress { width: 220px; height: 14px; }