/* Tokens de cor (18/08/2026) - tema claro/escuro. Todo o resto do arquivo usa
   var(--...) em vez de cor fixa, então o tema muda só trocando os valores
   aqui (ver btn-tema em app.js, que alterna html[data-theme]). Paleta clara é
   a mesma que o projeto já usava antes deste campo existir. */
:root {
  --cor-fundo: #f6f7f9;
  --cor-fundo-cartao: #ffffff;
  --cor-texto: #111826;
  --cor-texto-secundario: #48526a;
  /* Escurecido de #727d92 (23/09/2026) - o tom original dava contraste
     ≈4.15:1 sobre --cor-fundo-cartao branco, abaixo do mínimo de 4.5:1 do
     WCAG AA para texto normal (usado em .campo-hint e afins). Este tom dá
     ≈5.3:1, mesma tonalidade azul-acinzentada. */
  --cor-texto-suave: #626b7f;
  --cor-borda: #e4e7ee;
  --cor-borda-suave: #eef0f4;
  --cor-input-borda: #7f889c;

  --cor-primaria: #1b2a4a;
  --cor-primaria-hover: #2c3f66;
  --cor-primaria-texto: #ffffff;
  /* Cor de destaque - usada em TEXTO sobre fundo de cartão (legend, links,
     valores de card, botão secundário, foco de teclado), nunca como fundo.
     Redesenho (ago/2026): a identidade ganhou um acento esmeralda; este
     token passou de azul-marinho para o esmeralda escuro, legível nos dois
     temas. O fundo/shell continua no azul-marinho de --cor-primaria. */
  --cor-destaque: #0c7d5e;

  /* Acento esmeralda - a cor de ação/positivo do redesenho. --cor-acento é
     o tom cheio (fundo de CTA), --cor-acento-forte o de hover/texto. */
  --cor-acento: #0f9d76;
  --cor-acento-forte: #0c7d5e;
  --cor-acento-fundo: #e8f7f1;
  --cor-acento-borda: #cdece0;
  /* Fundo + texto de elementos PREENCHIDOS com a cor de ação (botão Continuar,
     bolinhas numeradas). O acento cheio (#0f9d76) com texto branco dá 3,4:1;
     estes dão 5,1:1 ou mais. */
  --cor-acao-fundo: #0c7d5e;
  --cor-acao-fundo-hover: #0a6a50;
  --cor-acao-texto: #ffffff;

  --cor-secundario-fundo: #eef2f8;
  --cor-secundario-fundo-hover: #e2e8f2;
  --cor-secundario-borda: #d5dbe6;

  --cor-sucesso-fundo: #e8f7f1;
  --cor-sucesso-texto: #0c7d5e;
  --cor-sucesso-borda: #cdece0;

  --cor-erro-fundo: #fdecec;
  --cor-erro-texto: #c0362c;
  --cor-erro-borda: #f2c7c3;

  --cor-aviso-fundo: #fdf4e4;
  /* Escurecido de #b7791f (23/09/2026) - ≈3.64:1 sobre branco em
     .aviso-campo (12px), abaixo do mínimo de 4.5:1 do WCAG AA. Este tom dá
     ≈5.2:1, mesmo âmbar de aviso. */
  --cor-aviso-texto: #94621a;
  --cor-aviso-borda: #f3dcae;

  --cor-badge-producao-fundo: #fdecec;
  --cor-badge-producao-texto: #c0362c;
  --cor-badge-producao-borda: #f2c7c3;
  --cor-badge-homologacao-fundo: #fdf4e4;
  --cor-badge-homologacao-texto: #94621a;
  --cor-badge-homologacao-borda: #f3dcae;

  --sombra-cartao: 0 1px 2px rgba(20, 33, 61, 0.06), 0 10px 24px -14px rgba(20, 33, 61, 0.12);
  --sombra-flutuante: 0 10px 28px -10px rgba(20, 33, 61, 0.2);
  --sombra-modal: 0 24px 56px -20px rgba(20, 33, 61, 0.34);
  --overlay-modal: rgba(17, 24, 38, 0.5);

  /* Tipografia do redesenho: Newsreader (títulos, editorial), IBM Plex Sans
     (interface) e IBM Plex Mono (chave de acesso, valores alinhados). As
     fontes vêm do Google Fonts no <head> do index.html; os fallbacks têm
     métrica próxima pra não "pular" enquanto carregam. */
  /* Escala tipográfica (auditoria de design, fase 2): 8 tamanhos em vez de 34 valores soltos.
     Texto miúdo nunca diminui: o valor intermediário sobe para o degrau de cima. */
  --fs-micro: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fonte-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Camadas (z-index) - ordem de empilhamento, de baixo para cima. */
  --z-conteudo: 1;
  --z-sticky: 10;
  --z-sticky-alto: 15;
  --z-topo: 20;
  --z-menu: 30;
  --z-flutuante: 50;
  --z-popover: 60;
  --z-painel: 70;
  --z-camada: 85;
  --z-ajuda: 88;
  --z-modal: 90;
  --z-sugestoes: 95;
  --z-ajuda-pop: 97;
  --z-modal-topo: 1000;
  --z-paleta: 1100;

  --raio-cartao: 12px;
  --raio-controle: 9px;
  --raio-campo: 8px;

  /* Largura máxima do conteúdo dentro de <main> (17/09/2026 - antes era um
     1180px fixo, que sobrava muito espaço vazio nas laterais em monitor
     grande: 1920px de tela já deixava ~490px em branco, um ultrawide de
     3440px deixava mais de 2000px). 1920px cobre folgado a esmagadora
     maioria das telas reais (notebook/desktop até Full HD) sem cortar
     nada, e ainda segura um teto sensato pra ultrawide/4K não esticar
     formulário e tabela a ponto de ficar difícil de ler. */
  --largura-max-conteudo: 1920px;

  /* Barra lateral de navegação (redesenho 2/4) - azul-marinho mais fundo
     que o --cor-primaria; a shell é a única parte "escura" no tema claro. */
  --cor-sidebar: #14213d;
  --cor-sidebar-texto: #c3cde0;
  --cor-sidebar-suave: #8794b5;
  --cor-sidebar-avatar: #3a5080;

  /* Chip "Transmitida" (azul info) - redesenho 3/4. */
  --cor-chip-info-texto: #2f5bd0;
  --cor-chip-info-fundo: #eaf0fc;
  --cor-chip-info-borda: #d3e0f7;
}

/* Segue a preferência do sistema quando o usuário nunca escolheu um tema
   manualmente (sem atributo data-theme ainda - ver app.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cor-fundo: #10151f;
    --cor-fundo-cartao: #1a2130;
    --cor-texto: #e7e9ee;
    --cor-texto-secundario: #a9afbc;
    --cor-texto-suave: #8b91a0;
    --cor-borda: #313a4d;
    --cor-borda-suave: #2a3242;
    --cor-input-borda: #66718c;

    --cor-primaria: #223159;
    --cor-primaria-hover: #2f4472;
    --cor-primaria-texto: #f2f4f8;
    --cor-destaque: #4fd0a6;

    --cor-acento: #17b98c;
    --cor-acento-forte: #4fd0a6;
    --cor-acento-fundo: #123a2c;
    --cor-acento-borda: #1f5744;
  --cor-acao-fundo: #17b98c;
  --cor-acao-fundo-hover: #4fd0a6;
  --cor-acao-texto: #06251b;

    --cor-sidebar: #171f30;
    --cor-sidebar-texto: #aeb9d4;
    --cor-sidebar-suave: #8794b5;
    --cor-sidebar-avatar: #2f4472;

    --cor-chip-info-texto: #9db8f2;
    --cor-chip-info-fundo: #1a2744;
    --cor-chip-info-borda: #2b3f6b;

    --cor-secundario-fundo: #232c3e;
    --cor-secundario-fundo-hover: #2b3549;
    --cor-secundario-borda: #3a4459;

    --cor-sucesso-fundo: #163524;
    --cor-sucesso-texto: #5fd3ab;
    --cor-sucesso-borda: #245c39;

    --cor-erro-fundo: #3a1b18;
    --cor-erro-texto: #ff9d92;
    --cor-erro-borda: #6b2b24;

    --cor-aviso-fundo: #3a2f0f;
    --cor-aviso-texto: #ffd166;
    --cor-aviso-borda: #6b551d;

    --cor-badge-producao-fundo: #3a1b18;
    --cor-badge-producao-texto: #ff9d92;
    --cor-badge-producao-borda: #6b2b24;
    --cor-badge-homologacao-fundo: #3a2f0f;
    --cor-badge-homologacao-texto: #ffd166;
    --cor-badge-homologacao-borda: #6b551d;

    --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -16px rgba(0, 0, 0, 0.5);
    --sombra-flutuante: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
    --sombra-modal: 0 28px 60px -20px rgba(0, 0, 0, 0.65);
    --overlay-modal: rgba(0, 0, 0, 0.65);
  }
}

/* Escolha manual do usuário (botão de tema) - sempre vence a preferência do
   sistema, nos dois sentidos (claro forçado ou escuro forçado). */
:root[data-theme="dark"] {
  --cor-fundo: #10151f;
  --cor-fundo-cartao: #1a2130;
  --cor-texto: #e7e9ee;
  --cor-texto-secundario: #a9afbc;
  --cor-texto-suave: #8b91a0;
  --cor-borda: #313a4d;
  --cor-borda-suave: #2a3242;
  --cor-input-borda: #66718c;

  --cor-primaria: #223159;
  --cor-primaria-hover: #2f4472;
  --cor-primaria-texto: #f2f4f8;
  --cor-destaque: #4fd0a6;

  --cor-acento: #17b98c;
  --cor-acento-forte: #4fd0a6;
  --cor-acento-fundo: #123a2c;
  --cor-acento-borda: #1f5744;
  --cor-acao-fundo: #17b98c;
  --cor-acao-fundo-hover: #4fd0a6;
  --cor-acao-texto: #06251b;

  --cor-sidebar: #171f30;
  --cor-sidebar-texto: #aeb9d4;
  --cor-sidebar-suave: #8794b5;
  --cor-sidebar-avatar: #2f4472;

  --cor-chip-info-texto: #9db8f2;
  --cor-chip-info-fundo: #1a2744;
  --cor-chip-info-borda: #2b3f6b;

  --cor-secundario-fundo: #232c3e;
  --cor-secundario-fundo-hover: #2b3549;
  --cor-secundario-borda: #3a4459;

  --cor-sucesso-fundo: #163524;
  --cor-sucesso-texto: #5fd3ab;
  --cor-sucesso-borda: #245c39;

  --cor-erro-fundo: #3a1b18;
  --cor-erro-texto: #ff9d92;
  --cor-erro-borda: #6b2b24;

  --cor-aviso-fundo: #3a2f0f;
  --cor-aviso-texto: #ffd166;
  --cor-aviso-borda: #6b551d;

  --cor-badge-producao-fundo: #3a1b18;
  --cor-badge-producao-texto: #ff9d92;
  --cor-badge-producao-borda: #6b2b24;
  --cor-badge-homologacao-fundo: #3a2f0f;
  --cor-badge-homologacao-texto: #ffd166;
  --cor-badge-homologacao-borda: #6b551d;

  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -16px rgba(0, 0, 0, 0.5);
  --sombra-flutuante: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  --sombra-modal: 0 28px 60px -20px rgba(0, 0, 0, 0.65);
  --overlay-modal: rgba(0, 0, 0, 0.65);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--fonte-ui);
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Shell do app (redesenho 2/4) - barra lateral fixa de navegação
   + barra de topo fina, no lugar do <header> + tira de abas. Os
   botões continuam sendo os mesmos [role="tab"] de antes (mesmos
   id/data-secao), só mudaram de lugar e de estilo - app.js não
   precisou de nada além de atualizar o título do topo.
   ============================================================ */
.app-grid {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.barra-lateral {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: var(--cor-sidebar);
  color: var(--cor-sidebar-texto);
  border-right: 1px solid rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 2px;
}
.marca-icone {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--cor-acento);
  display: grid;
  place-items: center;
}
.marca-icone svg {
  width: 17px;
  height: 17px;
}
.marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: #ffffff;
  letter-spacing: 0.2px;
  line-height: 1.1;
}
.marca-nome small {
  display: block;
  font-family: var(--fonte-ui);
  font-weight: 400;
  font-size: var(--fs-micro);
  color: var(--cor-sidebar-suave);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.app-conteudo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: var(--cor-fundo-cartao);
  border-bottom: 1px solid var(--cor-borda);
}
.topo-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--cor-texto);
  flex: 0 0 auto;
}

/* Abaixo de 1100px o cabecalho aperta. Em vez de espremer tudo ate o
   seletor de empresa sumir, os itens de apoio saem de cena - o CNPJ, o
   regime, o rotulo e o atalho de cadastro estao todos na aba Empresas. */
@media (max-width: 1100px) {
  .topo-empresa-rot,
  .topo-empresa-cnpj,
  .topo-empresa-nova,
  #topo-empresa-regime {
    display: none;
  }
}
.topo-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Sem isto o bloco se recusa a encolher e empurra a pagina. */
  min-width: 0;
}
.btn-icone {
  /* 44px (23/09/2026) - abaixo disso fica apertado pra toque (tablet/balcão
     de NFC-e). Antes 34px. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: var(--fs-md);
  line-height: 1;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto-secundario);
  cursor: pointer;
}
.btn-icone:hover {
  background: var(--cor-secundario-fundo);
}

/* Títulos das seções e sub-seções em Newsreader - o tom editorial que
   diferencia o redesenho. A interface (labels, campos, botões) segue em
   IBM Plex Sans. */
section h2 {
  margin-top: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: 0.2px;
  color: var(--cor-texto);
}

section h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--cor-texto);
}

.barra-lateral-usuario {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.usuario-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--cor-sidebar-avatar);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.usuario-meta {
  min-width: 0;
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #e6ebf5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-sair {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--cor-sidebar-texto);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--raio-campo);
  padding: 5px 10px;
  cursor: pointer;
}
.btn-sair:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Badge de ambiente (18/08/2026) - sempre visível no cabeçalho, pra nunca
   haver dúvida se o sistema está gravando os documentos como Homologação
   (teste) ou Produção - ver carregarBadgeAmbiente em app.js. */
/* Botão nativo, sem os resets de fundo/borda; o badge é agora um gatilho
   pra trocar de ambiente direto no cabeçalho (15/09/2026), sem precisar
   entrar em Empresas. */
.topo-ambiente-wrap {
  position: relative;
}
.badge-ambiente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}
/* Ancorada a direita - a regra precisa vencer .topo-empresa-lista, que vem
   depois no arquivo; dai o seletor mais especifico em vez de contar com a
   ordem. */
.topo-ambiente-wrap .topo-ambiente-lista {
  min-width: 160px;
  right: 0;
  left: auto;
}
.badge-ambiente::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge-ambiente:empty {
  display: none;
}

.badge-ambiente.homologacao {
  background: var(--cor-badge-homologacao-fundo);
  color: var(--cor-badge-homologacao-texto);
  border-color: var(--cor-badge-homologacao-borda);
}

/* Seletor de empresa ativa no cabeçalho (15/09/2026) - "gatilho" pra trocar
   de empresa em qualquer aba, sem precisar rolar até Empresas. */
.topo-empresa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  border-right: 1px solid var(--cor-borda);
  min-width: 0;
}
.topo-empresa-select-wrap {
  /* Piso: o seletor de empresa e o item que se usa aqui - ele encolhe, mas
     nunca a ponto de sumir. */
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 100%;
}
.topo-empresa-botao {
  /* O botao pode encolher porque o texto dentro dele corta com reticencias
     (ver #topo-empresa-nome). */
  min-width: 0;
  max-width: 100%;
}
/* Razao social longa corta com reticencias em vez de empurrar a pagina -
   o nome inteiro continua acessivel ao abrir a lista de empresas. */
#topo-empresa-nome {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-empresa-rot {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}
.topo-empresa-select-wrap {
  position: relative;
}
.topo-empresa-botao {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  max-width: 220px;
}
.topo-empresa-botao:hover {
  background: var(--cor-secundario-fundo);
}
.topo-empresa-botao span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-empresa-seta {
  flex: none;
  color: var(--cor-texto-suave);
}
.topo-empresa-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  /* Teto de largura: a lista mostra razao social, que pode ser muito longa.
     Sem isto ela cresce e empurra a pagina ao ser aberta. */
  max-width: min(360px, calc(100vw - 32px));
  max-height: 320px;
  overflow-y: auto;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 6px;
  z-index: var(--z-menu);
}
.topo-empresa-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--raio-campo);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--cor-texto);
}
.topo-empresa-item:hover {
  background: var(--cor-secundario-fundo);
}
.topo-empresa-item.ativo {
  background: var(--cor-acento-fundo);
}
.topo-empresa-item-nome {
  font-weight: 600;
  font-size: var(--fs-base);
}
.topo-empresa-item-cnpj {
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
}
.topo-empresa-vazio {
  margin: 0;
  padding: 10px;
  font-size: var(--fs-sm);
  color: var(--cor-texto-suave);
}
/* Antes era .secundario - promovido a .principal (17/09/2026, pedido do
   usuário) porque é um atalho de criação tão relevante quanto "+ Nova
   matriz"/"+ Emitir NF-e" (que já eram .principal), só que ficava discreto
   demais no cabeçalho. Mantém o tamanho compacto (não herda o padding/
   margin-top do .principal padrão, que é grande demais pra caber ao lado
   do seletor de empresa). */
.topo-empresa-nova {
  padding: 5px 10px;
  font-size: var(--fs-sm);
  white-space: nowrap;
  margin-top: 0;
}
.topo-empresa-cnpj {
  font-family: var(--fonte-mono);
  font-size: var(--fs-xs);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}
@media (max-width: 980px) {
  .topo-empresa-rot,
  .topo-empresa-cnpj {
    display: none;
  }
}

/* Aviso de troca de empresa (15/09/2026) - flutua sobre o conteúdo, visível
   em QUALQUER aba (o seletor de empresa fica no cabeçalho, fora de qualquer
   seção) - sem isso, uma troca que falha (ex.: cadastro da empresa com
   campo inválido) não mostrava erro nenhum fora da aba Empresas. */
.topo-empresa-status {
  position: fixed;
  top: calc(var(--altura-topo, 56px) + 8px);
  right: 24px;
  z-index: var(--z-popover);
  max-width: 360px;
  padding: 10px 14px;
  border-radius: var(--raio-campo);
  font-size: var(--fs-base);
  box-shadow: var(--sombra-cartao);
  border: 1px solid;
}
.topo-empresa-status.erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
  border-color: var(--cor-erro-borda);
}
.topo-empresa-status.sucesso {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso-texto);
  border-color: var(--cor-sucesso-borda);
}

.badge-ambiente.producao {
  background: var(--cor-badge-producao-fundo);
  color: var(--cor-badge-producao-texto);
  border-color: var(--cor-badge-producao-borda);
}

/* O botão de tema herda .btn-icone (topo). */

/* Tela de login/registro (16/08/2026) - ocupa a tela inteira até a sessão
   ser confirmada (ver verificarSessao em app.js); substituiu o antigo modal
   de API key compartilhada. */
.tela-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-fundo);
  padding: 24px;
}

.cartao-auth {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-cartao);
  padding: 32px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--sombra-cartao);
}

.cartao-auth h1 {
  color: var(--cor-destaque);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-xl);
  margin: 0 0 24px;
  text-align: center;
}

.cartao-auth h2 {
  color: var(--cor-destaque);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin: 0 0 12px;
}

.cartao-auth button.principal {
  width: 100%;
}

.troca-auth {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--cor-texto-secundario);
  margin-top: 16px;
}

.troca-auth a {
  color: var(--cor-destaque);
  font-weight: 600;
}

.barra-lateral nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-grupo {
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cor-sidebar-suave);
  padding: 12px 10px 5px;
}
.nav-grupo:first-child {
  padding-top: 2px;
}
.barra-lateral nav [role="tab"] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--raio-campo);
  background: transparent;
  color: var(--cor-sidebar-texto);
  font-family: inherit;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.barra-lateral nav [role="tab"]:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: -2px;
}
/* Contador de "Notas Rejeitadas" pendentes no menu lateral (17/09/2026) -
   só a quantidade que ainda precisa de ação (ver indicadoresNotasRejeitadas
   em notas-rejeitadas.ts) - some sozinho (hidden) quando chega a zero. */
.nav-badge {
  margin-left: auto;
  flex: none;
  background: var(--cor-erro-texto);
  color: #ffffff;
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.nav-icone {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.barra-lateral nav [role="tab"]:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.barra-lateral nav [role="tab"].ativo {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-weight: 600;
}
.barra-lateral nav [role="tab"].ativo::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cor-acento);
}

main {
  padding: 28px 32px 44px;
  width: 100%;
  max-width: var(--largura-max-conteudo);
}

section {
  display: none;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-cartao);
  padding: 22px 24px;
  box-shadow: var(--sombra-cartao);
}

section.ativa {
  display: block;
}

fieldset {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  margin-bottom: 16px;
  padding: 14px 16px;
}

legend {
  font-weight: 600;
  color: var(--cor-destaque);
}

/* Rótulo de campo em semi-negrito e tom escuro: acha-se o campo de relance,
   e fica distinto do valor digitado (peso normal) e do placeholder (claro).
   Rótulo que envolve caixa de marcar/opção é o próprio texto da opção: normal. */
label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cor-texto);
  margin-top: 8px;
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  font-weight: 400;
  color: var(--cor-texto-secundario);
}

input, select, textarea {
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  border: 1px solid var(--cor-input-borda);
  border-radius: var(--raio-campo);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--cor-fundo-cartao);
  color: var(--cor-texto);
}

/* Checkbox/radio soltos (fora de .col-selecao, que já tinha o reset próprio)
   herdavam width:100%+padding da regra acima, esticando até a largura da
   célula/container - foi o que sobrepunha "Data" e "Tipo" na tabela de Notas
   Emitidas: o checkbox de baixar XML (.chk-baixar-nota) virava ~150px de
   largura dentro de uma célula "nowrap" e empurrava o texto por cima da
   coluna vizinha (11/10/2026 - feedback de sobreposição). */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  margin-top: 0;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px rgba(15, 157, 118, 0.18);
}

.linha {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.linha > div {
  flex: 1;
  min-width: 140px;
}

/* Campos de CNPJ/CPF (14/11 dígitos) - largura minima suficiente pra
   mostrar o numero inteiro sem rolar por dentro do input, mesmo dividindo
   a linha com outros campos. */
.campo-documento {
  min-width: 190px;
  font-variant-numeric: tabular-nums;
}

/* Coluna que combina o campo de documento com o botão "Buscar CNPJ" ao
   lado - precisa de espaço reservado pros dois juntos (input 190px +
   botão + gap), senão o flex space espreme o botão por baixo do campo.
   Seletor ".linha > .col-documento-busca" (2 classes) de propósito, pra
   ter mais especificidade que a regra ".linha > div" (1 classe + 1 tipo)
   e realmente sobrescrever o min-width/flex padrão da coluna. */
.linha > .col-documento-busca {
  /* input do CNPJ (190px) + gap + botão "Buscar CNPJ" (~110px) - com 280px
     o botão passava por baixo do campo seguinte (ex.: "Razão Social" na aba
     Emitir). 340px reserva os dois lado a lado com folga. */
  min-width: 340px;
  flex-grow: 1.4;
}

/* Quando o CNPJ + "Buscar CNPJ" ficam sozinhos numa linha (aba Emitir),
   não deixa o bloco esticar pela largura toda do formulário. */
.col-documento-busca .linha-com-botao {
  max-width: 460px;
}

button.principal {
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  border: none;
  padding: 12px 22px;
  border-radius: var(--raio-controle);
  cursor: pointer;
  font-size: var(--fs-base);
  /* Negrito de verdade (700), acima do 600 do botão secundário
     (17/09/2026, pedido do usuário) - antes os dois tinham o mesmo peso e
     só se diferenciavam pela cor de fundo, então a ação principal de cada
     tela não se destacava o suficiente da secundária (ex.: "Salvar" vs
     "Cancelar"). */
  font-weight: 700;
  margin-top: 16px;
}

button.principal:hover {
  background: var(--cor-primaria-hover);
}

button.secundario {
  background: var(--cor-secundario-fundo);
  color: var(--cor-destaque);
  border: 1px solid var(--cor-secundario-borda);
  padding: 8px 14px;
  border-radius: var(--raio-controle);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-top: 8px;
}

button.secundario:hover {
  background: var(--cor-secundario-fundo-hover);
}

/* "Excluir" nas tabelas (produtos, clientes, naturezas, matrizes) usava o
   mesmo .secundario neutro de "Editar" - sem diferença visual entre uma
   ação reversível e uma destrutiva (17/09/2026, pedido do usuário).
   Reaproveita os tokens de erro já usados nos avisos/validação do resto do
   app, em vez de inventar uma cor nova. Seletor por substring porque a
   ordem das classes varia entre os templates (`btn-excluir-x secundario`
   vs `secundario btn-excluir-x`). */
button[class*='btn-excluir-'].secundario {
  color: var(--cor-erro-texto);
  border-color: var(--cor-erro-borda);
}
button[class*='btn-excluir-'].secundario:hover {
  background: var(--cor-erro-fundo);
}

.item-linha, .pagamento-linha {
  border: 1px solid var(--cor-borda-suave);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

/* Bloco recolhível "ICMS específico deste item" na linha de item (01/09/2026)
   - fechado por padrão pra não poluir quem usa só a Tributação geral. */
.item-icms-avancado {
  margin-top: 8px;
  border-top: 1px dashed var(--cor-borda-suave);
  padding-top: 4px;
}
.item-icms-avancado > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cor-texto-suave, inherit);
  padding: 4px 0;
}
.item-icms-avancado[open] > summary {
  margin-bottom: 6px;
}
.item-icms-avancado .aviso-inline {
  display: block;
  margin-top: 4px;
  color: var(--cor-texto-suave, inherit);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.item-icms-avancado label > small {
  font-weight: 400;
  color: var(--cor-texto-suave, inherit);
}

.btn-remover-linha {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
  border: 1px solid var(--cor-erro-borda);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 2px 8px;
}

/* Dica curta abaixo de um campo (ex.: RNTRC do MDF-e, 02/09/2026). */
.campo-hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
}

#resultado-emissao {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: var(--fs-base);
  white-space: pre-wrap;
}

#resultado-emissao.sucesso {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso-texto);
  border: 1px solid var(--cor-sucesso-borda);
}

#resultado-emissao.erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
  border: 1px solid var(--cor-erro-borda);
}

.links-arquivos {
  margin: 8px 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.links-arquivos a {
  color: var(--cor-destaque);
  font-weight: 600;
  text-decoration: underline;
}

/* Bloco "Transmitir p/ SEFAZ agora" no cartão de sucesso da emissão da
   NF-e (27/08/2026) - separado dos links por uma linha, com o aviso de
   irreversibilidade logo abaixo do botão. */
.bloco-transmissao {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-sucesso-borda);
}
.bloco-transmissao #resultado-transmissao-sefaz {
  margin-top: 8px;
  font-size: var(--fs-sm);
}
.bloco-transmissao #resultado-transmissao-sefaz.sucesso {
  color: var(--cor-sucesso-texto);
}
.bloco-transmissao #resultado-transmissao-sefaz.erro {
  color: var(--cor-erro-texto);
}

/* "+ Nova Nota Fiscal" no cartão de sucesso (28/08/2026) - zera o formulário
   e volta ao passo 1. Bloco próprio, separado do conteúdo acima. */
.btn-nova-nota {
  display: block;
  margin-top: 14px;
}

/* Bloco <details> recolhível genérico (28/08/2026, generalizado 11/09/2026) -
   usado pra conteúdo opcional/avançado que não precisa ficar sempre visível
   (lista de 27 UFs de ICMS, volume transportado etc.). Fechado por padrão. */
.bloco-recolhivel > summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
  color: var(--cor-texto-suave, inherit);
}
.bloco-recolhivel[open] > summary {
  margin-bottom: 8px;
}

/* Envolve as tabelas que podem ficar mais largas que a secao (ex.: coluna
   de chave de acesso, com 44 caracteres) - sem isso, o conteudo extra
   "vaza" para fora do cartao branco em vez de ficar dentro dele com
   rolagem horizontal propria.

   A rolagem aqui e o ULTIMO recurso: quando a tabela nao cabe, o
   JavaScript marca a caixa com .tabela-em-cartoes e ela deixa de ser
   tabela (ver ajustarTabelaAoEspaco em app.js). */
.tabela-scroll {
  overflow-x: auto;
  background: var(--cor-fundo-cartao);
}

@media (min-width: 721px) and (max-width: 1024px) {
  .app-grid {
    grid-template-columns: 64px 1fr;
  }
  .barra-lateral {
    width: 64px;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
  /* Só o ícone. O rótulo sai da tela mas continua no DOM - é ele que o
     leitor de tela anuncia, e o title mostra no passar do mouse. */
  .barra-lateral .nav-grupo,
  .barra-lateral .marca-nome,
  .barra-lateral .usuario-meta,
  .barra-lateral .btn-sair {
    display: none;
  }
  .barra-lateral .marca,
  .barra-lateral-usuario {
    justify-content: center;
  }
  .barra-lateral nav [role="tab"],
  .barra-lateral .nav-atalho {
    justify-content: center;
    gap: 0;
    padding: 12px 0;
    font-size: 0;
    overflow: hidden;
  }
  .barra-lateral nav [role="tab"] .nav-icone,
  .barra-lateral .nav-atalho .nav-icone {
    font-size: var(--fs-md);
    flex: 0 0 auto;
  }
  /* O selo de pendências não pode sumir junto com o texto. */
  .barra-lateral .nav-badge {
    position: absolute;
    transform: translate(14px, -10px);
    font-size: var(--fs-micro);
  }
  .barra-lateral nav [role="tab"] {
    position: relative;
  }
  .nav-atalhos {
    padding-left: 4px;
    padding-right: 4px;
  }
}