/* ==================================================================
 * EMISSOR DE NF-e — DESIGN SYSTEM
 *
 * A referência visual é o próprio documento fiscal: o DANFE é uma grade
 * de campos em caixa, com rótulo curto no canto, régua separando bloco
 * de bloco e número alinhado por casa decimal. É essa disciplina que a
 * tela herda — e não a estética de painel administrativo genérico.
 *
 * A cor aqui tem função. Cada módulo do sistema carrega um matiz seu,
 * que aparece sempre nos mesmos lugares: o ícone do menu, a aba ativa,
 * a régua do cabeçalho da tela e o indicador. Quem usa o sistema todo
 * dia aprende a achar a tela pela cor antes de ler o nome.
 *
 * Ordem do arquivo:
 *   1. Fundação — matizes, temas, reset
 *   2. Tipografia
 *   3. Estrutura — casca, lateral, topo
 *   4. Cabeçalho de tela
 *   5. Superfícies — cartões, painéis
 *   6. Navegação — trilha, abas
 *   7. Formulários e filtros
 *   8. Botões
 *   9. Tabelas e paginação
 *  10. Etiquetas e situações
 *  11. Sobreposições — janelas, menus, dicas
 *  12. Avisos
 *  13. Estados — carregando, vazio
 *  14. Painel inicial
 *  15. Emissão
 *  16. Utilidades
 *  17. Telas estreitas
 * ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. FUNDAÇÃO                                                         */
/* ------------------------------------------------------------------ */

:root {
  /* Escala neutra, levemente azulada: encosta no azul-tinta da casca em
     vez de brigar com ele. */
  --cinza-25:  #fbfcfe;
  --cinza-50:  #f5f7fa;
  --cinza-100: #eceff5;
  --cinza-150: #e2e7ef;
  --cinza-200: #d4dbe6;
  --cinza-300: #b6c1d1;
  --cinza-400: #8d9bae;
  --cinza-500: #64738a;
  --cinza-600: #4a5668;
  --cinza-700: #364150;
  --cinza-800: #252f3c;
  --cinza-900: #171f2a;
  --cinza-950: #0d131c;

  /* Azul-tinta: a cor da casca — lateral, cabeçalhos de tabela, âncoras
     estruturais. Escuro o bastante para o conteúdo saltar sobre ele. */
  --tinta-900: #0a111c;
  --tinta-800: #101a29;
  --tinta-700: #172437;
  --tinta-600: #1f3149;

  /* --- Matizes por módulo ---
     Separados no círculo cromático para que dois itens vizinhos do menu
     nunca se confundam. A seção Cadastros usa a família fria de
     propósito: lida junta, parece um conjunto. */
  --h-inicio:          #2563eb;
  --h-notas:           #4f46e5;
  --h-emissao:         #ea580c;
  --h-ferramentas:     #b8820a;
  --h-clientes:        #0891b2;
  --h-produtos:        #0d9488;
  --h-transportadoras: #059669;
  --h-emitentes:       #7c3aed;
  --h-usuarios:        #db2777;
  --h-setores:         #9333ea;
  --h-importacao:      #0284c7;

  /* Cores de significado. Diferentes dos matizes de módulo: estas dizem
     o que aconteceu com a nota, e não em que tela você está. */
  --verde-50:    #e7f6ed;  --verde-500:    #0f8a4d;  --verde-600:    #0b6d3d;
  --ambar-50:    #fdf3e0;  --ambar-500:    #9a6206;  --ambar-600:    #7c4e04;
  --vermelho-50: #fdeceb;  --vermelho-500: #c22a22;  --vermelho-600: #9c211b;
  --azul-50:     #e8f1fd;  --azul-500:     #1d6fe0;  --azul-600:     #1557b4;

  /* Espaçamento em escala de 4. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

  /* Raio curto por decisão: canto muito arredondado amolece a tela e
     tira dela a precisão que um documento fiscal pede. */
  --raio-sm: 3px;
  --raio: 5px;
  --raio-lg: 8px;
  --raio-cheio: 999px;

  --transicao: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  --largura-lateral: 252px;
  --largura-lateral-fechada: 64px;
  --altura-topo: 60px;

  --fonte: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --fonte-numerica: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;

  /* Matiz da tela atual. app.js troca pelo módulo aberto; o valor abaixo
     é só a rede para uma tela que não declare o seu. */
  --modulo: var(--h-inicio);
}

/* Cada rota pinta o seu matiz. Vale para o item do menu e, quando
   marcada na casca, para o cabeçalho e as abas da tela inteira. */
[data-rota="inicio"],          [data-modulo="inicio"]          { --modulo: var(--h-inicio); }
[data-rota="notas"],           [data-modulo="notas"]           { --modulo: var(--h-notas); }
[data-rota="emissao"],         [data-modulo="emissao"]         { --modulo: var(--h-emissao); }
[data-rota="ferramentas"],     [data-modulo="ferramentas"]     { --modulo: var(--h-ferramentas); }
[data-rota="clientes"],        [data-modulo="clientes"]        { --modulo: var(--h-clientes); }
[data-rota="produtos"],        [data-modulo="produtos"]        { --modulo: var(--h-produtos); }
[data-rota="transportadoras"], [data-modulo="transportadoras"] { --modulo: var(--h-transportadoras); }
[data-rota="emitentes"],       [data-modulo="emitentes"]       { --modulo: var(--h-emitentes); }
[data-rota="usuarios"],        [data-modulo="usuarios"]        { --modulo: var(--h-usuarios); }
[data-rota="setores"],         [data-modulo="setores"]         { --modulo: var(--h-setores); }
[data-rota="importacao"],      [data-modulo="importacao"]      { --modulo: var(--h-importacao); }

/* --- Tema claro (padrão) --- */
:root,
[data-tema="claro"] {
  color-scheme: light;

  --fundo: #e9edf4;
  --superficie: #ffffff;
  --superficie-2: var(--cinza-50);
  --superficie-3: var(--cinza-100);
  --superficie-4: var(--cinza-150);
  --superficie-inversa: var(--tinta-800);

  --borda: var(--cinza-200);
  --borda-forte: var(--cinza-300);
  --borda-sutil: var(--cinza-150);

  --texto: var(--cinza-900);
  --texto-2: var(--cinza-600);
  --texto-3: var(--cinza-500);
  --texto-inverso: #ffffff;

  --primaria: var(--azul-500);
  --primaria-forte: var(--azul-600);
  --primaria-fraca: var(--azul-50);
  --primaria-contorno: #b9d3f6;

  --sucesso: var(--verde-500);
  --sucesso-forte: var(--verde-600);
  --sucesso-fraco: var(--verde-50);
  --alerta: var(--ambar-500);
  --alerta-forte: var(--ambar-600);
  --alerta-fraco: var(--ambar-50);
  --perigo: var(--vermelho-500);
  --perigo-forte: var(--vermelho-600);
  --perigo-fraco: var(--vermelho-50);
  --info: var(--azul-500);
  --info-fraco: var(--azul-50);

  /* Sombra curta e de baixa opacidade: sombra pesada envelhece a tela e
     cansa em oito horas de uso. */
  --sombra-1: 0 1px 2px rgba(13, 22, 38, .06);
  --sombra-2: 0 1px 3px rgba(13, 22, 38, .08), 0 4px 12px rgba(13, 22, 38, .06);
  --sombra-3: 0 12px 28px rgba(13, 22, 38, .16), 0 2px 8px rgba(13, 22, 38, .08);

  --topo-fundo: #ffffff;

  /* A lateral acompanha o tema. Sobre fundo claro os matizes de módulo
     saem em cheio, em vez de abafados por um fundo quase preto — que é
     onde âmbar, violeta e verde viravam borrões escuros. */
  --lateral-fundo: #ffffff;
  --lateral-fundo-2: var(--cinza-50);
  --lateral-texto: var(--cinza-600);
  --lateral-texto-ativo: var(--cinza-900);
  --lateral-titulo: var(--cinza-500);
  --lateral-borda: var(--cinza-200);
  --lateral-hover: var(--cinza-100);
  --lateral-contagem: var(--cinza-150);

  /* Intensidade do matiz dentro da lateral escura: no fundo escuro o
     matiz puro fica sujo, então ele é clareado. */
  /* --- Como derivar o matiz do módulo ---
     Guardar a cor pronta numa variável não funciona: um var() aninhado
     dentro de uma custom property é resolvido onde ela é DECLARADA, e o
     valor já resolvido é o que herda. Declarada no :root, ela congelaria
     no matiz do :root e todos os módulos sairiam da mesma cor.
     Por isso o que viaja aqui é a receita — percentual e cor de mistura —
     e a conta acontece em cada ponto de uso, onde --modulo já vale o do
     módulo daquela tela. */

  /* O matiz cru não serve nem como texto sobre superfície clara nem como
     fundo sólido com texto branco: laranja, âmbar, ciano e teal ficam
     entre 2,6:1 e 4,3:1 nos dois papéis, abaixo do mínimo. Escurecer
     resolve os dois sem mudar a identidade da cor. */
  --p-legivel: 74%;   --c-legivel: black;
  /* Dentro da lateral escura o matiz precisa clarear. */
  --p-lateral: 100%;  --c-lateral: black;
}

/* --- Tema escuro ---
   Níveis de superfície de verdade: fundo, lateral, topo, cartão, campo e
   sobreposição são seis valores distintos. Sem isso, tudo vira o mesmo
   preto e a hierarquia da tela desaparece no escuro. */
[data-tema="escuro"] {
  color-scheme: dark;

  --fundo: #080d15;
  --superficie: #121b27;
  --superficie-2: #18222f;
  --superficie-3: #1f2b3a;
  --superficie-4: #273345;
  --superficie-inversa: var(--cinza-100);

  --borda: #2a3749;
  --borda-forte: #3a4a60;
  --borda-sutil: #1e2a38;

  --texto: #e8edf4;
  --texto-2: #a6b4c6;
  --texto-3: #7d8da3;
  --texto-inverso: var(--cinza-950);

  --primaria: #5b9bf5;
  --primaria-forte: #82b4f8;
  --primaria-fraca: rgba(91, 155, 245, .15);
  --primaria-contorno: rgba(91, 155, 245, .38);

  --sucesso: #34d399;
  --sucesso-forte: #6ee7b7;
  --sucesso-fraco: rgba(52, 211, 153, .15);
  --alerta: #f0b13f;
  --alerta-forte: #f8cd77;
  --alerta-fraco: rgba(240, 177, 63, .15);
  --perigo: #f87171;
  --perigo-forte: #fca5a5;
  --perigo-fraco: rgba(248, 113, 113, .15);
  --info: #60a5fa;
  --info-fraco: rgba(96, 165, 250, .15);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .3);
  --sombra-3: 0 16px 40px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);

  --topo-fundo: #0e1723;

  --lateral-fundo: #060b12;
  --lateral-fundo-2: #0c1520;
  --lateral-texto: #92a3ba;
  --lateral-texto-ativo: #ffffff;
  --lateral-titulo: #55677e;
  --lateral-borda: rgba(255, 255, 255, .06);
  --lateral-hover: rgba(255, 255, 255, .05);
  --lateral-contagem: rgba(255, 255, 255, .1);

  /* No escuro o matiz clareia para não sumir contra o cartão, e o fundo
     sólido passa a levar texto escuro. */
  --p-legivel: 62%;   --c-legivel: white;
  --p-lateral: 78%;   --c-lateral: white;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * O atributo hidden precisa vencer as regras de display deste arquivo.
 *
 * A regra do navegador para [hidden] é display:none, mas tem peso baixo:
 * qualquer seletor de classe daqui que defina display ganha dela. Foi o
 * que aconteceu com a tela de entrada, que é `display: grid` — esconder
 * não fazia efeito, e entrar no sistema parecia não fazer nada.
 */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: var(--raio-cheio);
  border: 3px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--texto-3);
  background-clip: content-box;
}

/* Ícone em contexto sem regra própria.
   Os ícones são SVG com viewBox e sem largura declarada: dentro de um
   flex eles esticam até o espaço disponível, e um ícone de 200px foi
   exatamente o que apareceu no cabeçalho dos cartões. */
svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Foco visível em tudo que recebe teclado: quem usa o sistema o dia
   inteiro navega por Tab, e foco invisível trava essa pessoa. */
:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* ------------------------------------------------------------------ */
/* 2. TIPOGRAFIA                                                       */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--texto);
}

h1 { font-size: 21px; line-height: 1.25; }
h2 { font-size: 16px; line-height: 1.35; }
h3 { font-size: 14px; line-height: 1.4; }
h4 { font-size: 13px; line-height: 1.4; }

p { margin: 0; }

a {
  color: var(--primaria);
  text-decoration: none;
  transition: color var(--transicao);
}

a:hover { color: var(--primaria-forte); text-decoration: underline; }

.ajuda {
  color: var(--texto-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.erro {
  color: var(--perigo);
  font-size: 12.5px;
}

/* Numeral tabular em tudo que é número: é o que faz as casas baterem
   coluna a coluna na conferência. */
.numero {
  font-family: var(--fonte-numerica);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.valor {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.mono {
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ */
/* 3. ESTRUTURA                                                        */
/* ------------------------------------------------------------------ */

/* --- Entrada --- */

.tela-entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e5);
  background:
    radial-gradient(900px 520px at 50% -15%, rgba(37, 99, 235, .16), transparent 70%),
    var(--fundo);
}

.cartao-entrada {
  width: 100%;
  max-width: 392px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-3);
  padding: var(--e8);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  /* Régua de topo na cor da marca: a primeira tela do sistema já diz a
     que linguagem visual ele pertence. */
  border-top: 3px solid var(--h-inicio);
}

.entrada-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e5);
}

.entrada-marca svg {
  width: 38px;
  height: 38px;
  flex: none;
  padding: 7px;
  border-radius: var(--raio);
  background: var(--h-inicio);
  color: #fff;
  box-sizing: border-box;
}

.entrada-marca strong {
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.02em;
  display: block;
}

.cartao-entrada label {
  margin-top: var(--e3);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--texto-2);
}

.cartao-entrada button {
  margin-top: var(--e5);
}

/* --- Casca da aplicação --- */

/* minmax(0, 1fr), e não 1fr: uma faixa 1fr não encolhe abaixo do
   conteúdo mínimo do que está dentro dela. Com uma tabela larga, a
   coluna do conteúdo ficava com 876px numa tela de 390px — e como esta
   casca tem overflow: hidden, o excesso era cortado, sem nada que o
   revelasse. */
.aplicacao {
  display: grid;
  grid-template-columns: var(--largura-lateral) minmax(0, 1fr);
  grid-template-rows: var(--altura-topo) minmax(0, 1fr);
  grid-template-areas:
    "lateral topo"
    "lateral conteudo";
  height: 100vh;
  overflow: hidden;
}

.aplicacao.lateral-fechada {
  grid-template-columns: var(--largura-lateral-fechada) minmax(0, 1fr);
}

/* --- Barra lateral ---
   É aqui que o sistema gasta a sua ousadia. O resto da tela é contido de
   propósito para que esta faixa seja o que se reconhece de longe. */

.lateral {
  grid-area: lateral;
  background: var(--lateral-fundo);
  border-right: 1px solid var(--lateral-borda);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.lateral-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: var(--altura-topo);
  padding: 0 var(--e4);
  border-bottom: 1px solid var(--lateral-borda);
  background: var(--lateral-fundo-2);
  flex: none;
  color: var(--lateral-texto-ativo);
  overflow: hidden;
}

.lateral-marca svg {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 6px;
  border-radius: var(--raio);
  background: var(--h-inicio);
  color: #fff;
  box-sizing: border-box;
}

.lateral-marca-texto {
  min-width: 0;
  white-space: nowrap;
}

.lateral-marca-texto strong {
  display: block;
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lateral-marca-texto span {
  font-size: 10.5px;
  color: var(--lateral-texto);
  letter-spacing: 0.03em;
}

.lateral-navegacao {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--e3) var(--e2) var(--e4);
}

.lateral-grupo + .lateral-grupo {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--lateral-borda);
}

.lateral-grupo-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lateral-titulo);
  padding: 0 var(--e3) var(--e2);
  white-space: nowrap;
}

.lateral-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px var(--e2);
  border-radius: var(--raio);
  color: var(--lateral-texto);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
  position: relative;
  min-width: 0;
}

.lateral-item + .lateral-item { margin-top: 2px; }

/* O ícone mora numa pastilha com o matiz do módulo. É o que quebra o
   "todos os ícones cinza" e o que deixa o menu legível de relance. */
.lateral-item svg {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 7px;
  border-radius: var(--raio);
  box-sizing: border-box;
  background: var(--lateral-hover);
  background: color-mix(in srgb, var(--modulo) 15%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-lateral), var(--c-lateral));
  transition: background var(--transicao), color var(--transicao);
}

.lateral-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lateral-item:hover {
  background: var(--lateral-hover);
  color: var(--lateral-texto-ativo);
  text-decoration: none;
}

.lateral-item:hover svg {
  background: var(--lateral-hover);
  background: color-mix(in srgb, var(--modulo) 26%, transparent);
}

.lateral-item.ativo {
  background: var(--lateral-hover);
  background: color-mix(in srgb, var(--modulo) 13%, transparent);
  color: var(--lateral-texto-ativo);
  font-weight: 620;
}

.lateral-item.ativo svg {
  background: var(--modulo);
  color: #fff;
}

/* Trilho na borda, no matiz do módulo: dá para achar a tela atual sem
   ler nenhuma palavra. */
.lateral-item.ativo::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 0 var(--raio-cheio) var(--raio-cheio) 0;
  background: var(--modulo);
  background: color-mix(in srgb, var(--modulo) var(--p-lateral), var(--c-lateral));
}

.lateral-item-contagem {
  margin-left: auto;
  font-size: 11px;
  font-weight: 650;
  padding: 1px 7px;
  border-radius: var(--raio-cheio);
  background: var(--lateral-contagem);
  color: var(--lateral-texto-ativo);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.lateral-rodape {
  flex: none;
  padding: var(--e3);
  border-top: 1px solid var(--lateral-borda);
  background: var(--lateral-fundo-2);
}

/* Lateral fechada: só as pastilhas de ícone, que continuam coloridas e
   por isso continuam identificáveis. */
.lateral-fechada .lateral-marca-texto,
.lateral-fechada .lateral-grupo-titulo,
.lateral-fechada .lateral-item span,
.lateral-fechada .lateral-item-contagem {
  display: none;
}

.lateral-fechada .lateral-item {
  justify-content: center;
  padding: 7px 0;
}

.lateral-fechada .lateral-marca {
  justify-content: center;
  padding: 0;
}

.lateral-fechada .lateral-grupo + .lateral-grupo {
  margin-top: var(--e3);
  padding-top: var(--e3);
}

/* --- Topo --- */

.topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: 0 var(--e5);
  background: var(--topo-fundo);
  border-bottom: 1px solid var(--borda);
  z-index: 20;
  min-width: 0;
}

/* A esquerda é a parte elástica do topo: quando falta espaço, é a trilha
   que encolhe — nunca o nome de quem está logado. */
.topo-esquerda {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.topo-direita {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex: none;
  min-width: 0;
}

.topo-titulo {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Separador vertical entre grupos de ferramentas do topo. */
.topo-divisor {
  width: 1px;
  height: 26px;
  background: var(--borda);
  flex: none;
}

/* --- Bloco do usuário no topo ---
   Requisito explícito: o nome nunca pode ser cortado a ponto de não se
   reconhecer quem está logado. Por isso este bloco é `flex: none` (não
   cede espaço), o nome não recebe ellipsis em tela larga, e em tela
   estreita ele encolhe para o primeiro nome — que ainda identifica —
   em vez de sumir. */
.usuario-topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 5px 8px 5px 5px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
  flex: none;
  max-width: 260px;
}

.usuario-topo:hover {
  background: var(--superficie-3);
  border-color: var(--borda);
}

.usuario-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--raio);
  flex: none;
  display: grid;
  place-items: center;
  background: var(--h-inicio);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.usuario-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  min-width: 0;
  text-align: left;
}

.usuario-nome {
  font-size: 13px;
  font-weight: 620;
  color: var(--texto);
  white-space: nowrap;
}

.usuario-papel {
  font-size: 11px;
  color: var(--texto-3);
  white-space: nowrap;
}

.usuario-topo > svg {
  width: 14px;
  height: 14px;
  color: var(--texto-3);
  flex: none;
}

/* Emitente em que se trabalha. */
.emitente-topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  padding: 4px var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
  max-width: 320px;
}

.emitente-topo svg {
  width: 15px;
  height: 15px;
  color: var(--h-emitentes);
  flex: none;
}

.emitente-topo-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.emitente-topo-rotulo {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.emitente-topo-nome {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Conteúdo ---
   Sem largura máxima: a tela é de trabalho, e margem vazia dos dois
   lados num monitor de 1920 é espaço que a tabela precisava. O respiro
   vem do padding, que acompanha a largura da janela. */
.conteudo {
  grid-area: conteudo;
  overflow-y: auto;
  padding: clamp(16px, 1.4vw, 26px);
  scroll-behavior: smooth;
  min-width: 0;
}

.conteudo-largura {
  max-width: none;
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 4. CABEÇALHO DE TELA                                                */
/* ------------------------------------------------------------------ */

/* Título da tela com régua no matiz do módulo. É o que dá identidade a
   cada área sem precisar de ilustração nem de cor de fundo. */
.pagina-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e5);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
  position: relative;
}

.pagina-topo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 3px;
  border-radius: var(--raio-cheio);
  background: var(--modulo);
  background: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.pagina-topo-texto {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
}

.pagina-topo-icone {
  width: 40px;
  height: 40px;
  border-radius: var(--raio);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 14%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.pagina-topo-icone svg { width: 21px; height: 21px; }

.pagina-topo h1 { letter-spacing: -0.02em; }

.pagina-topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* 5. SUPERFÍCIES                                                      */
/* ------------------------------------------------------------------ */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  min-width: 0;
}

.cartao + .cartao { margin-top: var(--e4); }

.cartao-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda-sutil);
  background: var(--superficie-2);
  border-radius: var(--raio) var(--raio) 0 0;
  flex-wrap: wrap;
  min-width: 0;
}

.cartao-cabecalho h2,
.cartao-cabecalho h3 { flex: 1; min-width: 0; font-size: 13.5px; }

/* Ícone do cartão herda o matiz da tela: o cartão pertence ao módulo. */
.cartao-cabecalho > svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: var(--raio-sm);
  box-sizing: border-box;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 13%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.cartao-corpo { padding: var(--e4); min-width: 0; }

.cartao-corpo-denso { padding: var(--e3); }

.cartao-rodape {
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borda-sutil);
  background: var(--superficie-2);
  border-radius: 0 0 var(--raio) var(--raio);
}

/* Cartão sem enfeite, para a tabela encostar nas bordas. */
.cartao-liso > .cartao-corpo { padding: 0; }

/* ------------------------------------------------------------------ */
/* 6. NAVEGAÇÃO                                                        */
/* ------------------------------------------------------------------ */

/* --- Trilha --- */

.trilha {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-size: 12.5px;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.trilha a { color: var(--texto-2); }
.trilha a:hover { color: var(--primaria); }

.trilha svg {
  width: 13px;
  height: 13px;
  opacity: .5;
  flex: none;
}

.trilha-atual {
  color: var(--texto);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Abas ---
   A aba ativa é marcada no matiz do módulo, com régua embaixo e fundo
   levemente tingido. Tamanho contido de propósito: aba gigante rouba a
   altura que a lista precisa. */
.abas {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  margin-bottom: var(--e4);
  min-width: 0;
}

.abas::-webkit-scrollbar { display: none; }

.aba {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px var(--e4);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--texto-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color var(--transicao), border-color var(--transicao),
    background var(--transicao);
  margin-bottom: -1px;
}

.aba svg { width: 16px; height: 16px; flex: none; opacity: .75; }

.aba:hover {
  color: var(--texto);
  background: var(--superficie-3);
  text-decoration: none;
}

.aba.ativa {
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  border-bottom-color: var(--modulo);
  border-bottom-color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  /* Sem fundo tingido: a aba já se identifica pela cor do texto, pela
     régua embaixo e pelo peso. O tingido só escurecia o fundo o bastante
     para derrubar o contraste do rótulo abaixo de 4,5:1 nos matizes
     quentes. */
  font-weight: 650;
}

.aba.ativa svg { opacity: 1; }

.aba-contagem {
  font-size: 11px;
  font-weight: 650;
  padding: 1px 7px;
  border-radius: var(--raio-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.aba.ativa .aba-contagem {
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 18%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

/* ------------------------------------------------------------------ */
/* 7. FORMULÁRIOS E FILTROS                                            */
/* ------------------------------------------------------------------ */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3) var(--e4);
}

.grade-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.campo.largo { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .campo.largo { grid-column: span 2; }
}

.campo label {
  font-size: 12px;
  font-weight: 620;
  color: var(--texto-2);
  letter-spacing: 0.005em;
}

.campo .obrigatorio::after {
  content: " *";
  color: var(--perigo);
  font-weight: 700;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao);
  min-width: 0;
}

[data-tema="escuro"] input,
[data-tema="escuro"] select,
[data-tema="escuro"] textarea {
  background: var(--superficie-2);
}

input::placeholder,
textarea::placeholder { color: var(--texto-3); }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--texto-3); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--primaria-fraca);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--superficie-3);
  color: var(--texto-3);
  cursor: not-allowed;
}

/* A seta do select desenhada aqui, para não variar entre navegadores. */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364738a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  padding-right: 30px;
}

[data-tema="escuro"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primaria);
  cursor: pointer;
  flex: none;
}

input[type="file"] {
  padding: 6px 8px;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
  transition: background var(--transicao);
}

input[type="file"]::file-selector-button:hover { background: var(--superficie-3); }

textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
}

.campo-erro {
  color: var(--perigo);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

input.invalido,
select.invalido,
textarea.invalido {
  border-color: var(--perigo);
  background: var(--perigo-fraco);
}

input.invalido:focus,
select.invalido:focus,
textarea.invalido:focus {
  box-shadow: 0 0 0 3px var(--perigo-fraco);
}

/* Seção de formulário: agrupa o que pertence junto. Formulário de trinta
   campos sem isso é um paredão. */
.secao {
  border-top: 1px solid var(--borda-sutil);
  padding-top: var(--e4);
  margin-top: var(--e4);
}

.secao:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.secao-titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e3);
  color: var(--texto);
}

.secao-titulo svg {
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: var(--raio-sm);
  box-sizing: border-box;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 14%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  flex: none;
}

.secao-titulo h3 { font-size: 13.5px; }

.secao-titulo-ajuda {
  font-size: 12px;
  color: var(--texto-3);
  font-weight: 400;
  margin-left: auto;
}

/* --- Barra de filtros ---
   Densa e em grade que se acomoda sozinha: os campos ocupam a largura
   disponível em vez de formarem um paredão de uma coluna. */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: var(--e3);
  align-items: end;
}

.filtros-acoes {
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex-wrap: wrap;
}

/* Cabeçalho da barra de filtros, com o resumo do que está filtrado. */
.filtros-titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-2);
  min-width: 0;
}

.filtros-titulo svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel)); }

/* --- Campo de busca com ícone --- */

.busca {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.busca svg {
  position: absolute;
  left: 9px;
  width: 15px;
  height: 15px;
  color: var(--texto-3);
  pointer-events: none;
}

.busca input { padding-left: 30px; }

/* ------------------------------------------------------------------ */
/* 8. BOTÕES                                                           */
/* ------------------------------------------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 570;
  padding: 8px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao), box-shadow var(--transicao);
  user-select: none;
}

.botao svg { width: 15px; height: 15px; flex: none; }

.botao:hover:not(:disabled) {
  background: var(--superficie-2);
  border-color: var(--texto-3);
}

/* Um pixel de deslocamento ao clicar: confirma o toque sem animação
   longa, que atrapalha quem clica rápido. */
.botao:active:not(:disabled) { transform: translateY(1px); }

.botao:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* O botão principal assume o matiz da tela: emitir nota é laranja na
   tela de emissão, salvar cliente é ciano no cadastro de clientes. */
.botao.principal {
  background: var(--modulo);
  background: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  border-color: var(--modulo);
  border-color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  color: #fff;
  box-shadow: var(--sombra-1);
}

.botao.principal:hover:not(:disabled) {
  background: color-mix(in srgb, var(--modulo) calc(var(--p-legivel) * 0.84), var(--c-legivel));
  border-color: color-mix(in srgb, var(--modulo) calc(var(--p-legivel) * 0.84), var(--c-legivel));
}

[data-tema="escuro"] .botao.principal { color: #08111d; }

.botao.perigo {
  color: var(--perigo);
  border-color: var(--borda-forte);
}

.botao.perigo:hover:not(:disabled) {
  background: var(--perigo-fraco);
  border-color: var(--perigo);
}

.botao.perigo-solido {
  background: var(--perigo);
  border-color: var(--perigo);
  color: #fff;
}

.botao.perigo-solido:hover:not(:disabled) {
  background: var(--perigo-forte);
  border-color: var(--perigo-forte);
}

.botao.discreto {
  border-color: transparent;
  background: transparent;
  color: var(--texto-2);
}

.botao.discreto:hover:not(:disabled) {
  background: var(--superficie-3);
  color: var(--texto);
  border-color: transparent;
}

.botao.miudo {
  padding: 4px 9px;
  font-size: 12.5px;
  gap: 4px;
}

.botao.miudo svg { width: 13px; height: 13px; }

.botao.icone {
  padding: 7px;
  border-color: transparent;
  background: transparent;
  color: var(--texto-2);
}

.botao.icone:hover:not(:disabled) {
  background: var(--superficie-3);
  color: var(--texto);
  border-color: transparent;
}

.botao.icone svg { width: 18px; height: 18px; }

.botao.largo { width: 100%; }

.barra-acoes {
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--e4);
}

.barra-acoes.direita { justify-content: flex-end; }
.barra-acoes.espacada { justify-content: space-between; }

/* Grupo de botões colados, para ações que são variações da mesma coisa. */
.grupo-botoes {
  display: inline-flex;
  border-radius: var(--raio-sm);
  overflow: hidden;
  border: 1px solid var(--borda-forte);
}

.grupo-botoes .botao {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--borda-forte);
}

.grupo-botoes .botao:last-child { border-right: none; }

/* ------------------------------------------------------------------ */
/* 9. TABELAS E PAGINAÇÃO                                              */
/* ------------------------------------------------------------------ */

/* A rolagem horizontal existe, mas presa à tabela — nunca à página. É a
   estratégia correta para uma grade fiscal de doze colunas: some a
   coluna e some o dado; rola a grade e o dado continua lá. */
.tabela-rolagem {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0 0 var(--raio) var(--raio);
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 9px var(--e3);
  background: var(--superficie-3);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Cabeçalho que ordena. */
thead th.ordenavel {
  cursor: pointer;
  user-select: none;
  transition: color var(--transicao), background var(--transicao);
}

thead th.ordenavel:hover { color: var(--texto); background: var(--superficie-4); }

thead th .seta-ordem {
  width: 12px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -2px;
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

tbody td {
  padding: 9px var(--e3);
  border-bottom: 1px solid var(--borda-sutil);
  vertical-align: middle;
}

tbody tr { transition: background var(--transicao); }

tbody tr:hover { background: var(--superficie-2); }

tbody tr:last-child td { border-bottom: none; }

td.acoes {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

td.acoes > span {
  display: inline-flex;
  gap: 3px;
  justify-content: flex-end;
}

/* Coluna principal da linha: o que identifica o registro. */
td.principal {
  font-weight: 600;
  color: var(--texto);
}

/* --- Paginação ---
   Obrigatória em toda lista. Mostra o intervalo, os números de página e
   quantos registros por página. */
.paginacao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
  font-size: 12.5px;
  color: var(--texto-2);
  flex-wrap: wrap;
  border-radius: 0 0 var(--raio) var(--raio);
}

.paginacao-info {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.paginacao-info strong { color: var(--texto); font-weight: 650; }

.paginacao-tamanho {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.paginacao-tamanho select {
  width: auto;
  padding: 3px 26px 3px 8px;
  font-size: 12.5px;
  background-position: right 6px center;
  background-size: 13px;
}

.paginacao-numeros {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.pagina-numero {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: none;
  color: var(--texto-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
    border-color var(--transicao);
}

.pagina-numero:hover:not(:disabled):not(.atual) {
  background: var(--superficie-4);
  color: var(--texto);
}

.pagina-numero.atual {
  background: var(--modulo);
  background: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  border-color: var(--modulo);
  border-color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  color: #fff;
  cursor: default;
}

[data-tema="escuro"] .pagina-numero.atual { color: #08111d; }

.pagina-numero:disabled { opacity: .35; cursor: not-allowed; }

.pagina-numero svg { width: 14px; height: 14px; }

.pagina-reticencias {
  padding: 0 2px;
  color: var(--texto-3);
  user-select: none;
}

/* ------------------------------------------------------------------ */
/* 10. ETIQUETAS E SITUAÇÕES                                           */
/* ------------------------------------------------------------------ */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 2px 9px;
  border-radius: var(--raio-cheio);
  background: var(--superficie-3);
  color: var(--texto-2);
  white-space: nowrap;
  line-height: 1.65;
}

.etiqueta.contorno {
  background: transparent;
  border: 1px solid currentColor;
}

/* Ponto colorido antes do texto: dá para varrer a coluna de situação
   pelo canto do olho, sem ler cada linha. */
.etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.etiqueta.sem-ponto::before { display: none; }

.etiqueta.sucesso { background: var(--sucesso-fraco); color: var(--sucesso); }
.etiqueta.alerta  { background: var(--alerta-fraco);  color: var(--alerta); }
.etiqueta.perigo  { background: var(--perigo-fraco);  color: var(--perigo); }
.etiqueta.info    { background: var(--info-fraco);    color: var(--info); }
.etiqueta.neutra  { background: var(--superficie-3);  color: var(--texto-2); }

/* Situações da NF-e, com a mesma semântica de cor em todo o sistema. */
.situacao-AUTORIZADA            { background: var(--sucesso-fraco); color: var(--sucesso); }
.situacao-CANCELADA,
.situacao-CANCELADA_EVENTO      { background: var(--perigo-fraco);  color: var(--perigo); }
.situacao-REJEITADA,
.situacao-DENEGADA              { background: var(--perigo-fraco);  color: var(--perigo); }
.situacao-EM_PROCESSAMENTO_SEFAZ,
.situacao-TRANSMITIDA_COM_PENDENCIA { background: var(--alerta-fraco); color: var(--alerta); }
.situacao-EM_DIGITACAO,
.situacao-VALIDADA,
.situacao-ASSINADA              { background: var(--superficie-3);  color: var(--texto-2); }

/* Indicador de ambiente no topo. Produção precisa ser inconfundível. */
.ambiente {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--raio-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--alerta-fraco);
  color: var(--alerta);
  transition: border-color var(--transicao), background var(--transicao);
  font-family: inherit;
  flex: none;
}

.ambiente:hover { border-color: currentColor; }

.ambiente.producao {
  background: var(--sucesso-fraco);
  color: var(--sucesso);
}

.ambiente svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ */
/* 11. SOBREPOSIÇÕES                                                   */
/* ------------------------------------------------------------------ */

.fundo-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 13, 21, .55);
  display: grid;
  place-items: center;
  padding: var(--e5);
  z-index: 100;
  animation: aparecer 140ms ease-out;
}

.modal {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-3);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - var(--e10));
  display: flex;
  flex-direction: column;
  animation: subir 190ms cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
}

.modal.largo { max-width: 900px; }
.modal.extra-largo { max-width: 1180px; }

.modal-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda-sutil);
  background: var(--superficie-2);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  flex: none;
}

.modal-cabecalho h2 { flex: 1; min-width: 0; font-size: 15px; }

.modal-icone {
  width: 34px;
  height: 34px;
  border-radius: var(--raio);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 14%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.modal-icone svg { width: 18px; height: 18px; }

.modal-icone.perigo { background: var(--perigo-fraco); color: var(--perigo); }
.modal-icone.alerta { background: var(--alerta-fraco); color: var(--alerta); }
.modal-icone.sucesso { background: var(--sucesso-fraco); color: var(--sucesso); }

.modal-corpo {
  padding: var(--e4);
  overflow-y: auto;
  flex: 1;
  min-width: 0;
}

.modal-rodape {
  display: flex;
  gap: var(--e2);
  justify-content: flex-end;
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borda-sutil);
  background: var(--superficie-2);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  flex: none;
  flex-wrap: wrap;
}

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* --- Menu suspenso --- */

.suspenso {
  position: relative;
  display: inline-flex;
}

.suspenso-painel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 232px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-3);
  padding: var(--e1);
  z-index: 90;
  animation: subir 130ms cubic-bezier(0.16, 1, 0.3, 1);
}

.suspenso-cabecalho {
  padding: var(--e3);
  border-bottom: 1px solid var(--borda-sutil);
  margin-bottom: var(--e1);
}

.suspenso-item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  padding: 7px var(--e3);
  border-radius: var(--raio-sm);
  font-size: 13.5px;
  color: var(--texto);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--transicao);
}

.suspenso-item:hover {
  background: var(--superficie-3);
  text-decoration: none;
}

.suspenso-item svg { width: 15px; height: 15px; color: var(--texto-2); flex: none; }

.suspenso-item.perigo { color: var(--perigo); }
.suspenso-item.perigo svg { color: var(--perigo); }

.suspenso-separador {
  height: 1px;
  background: var(--borda-sutil);
  margin: var(--e1) 0;
}

/* --- Dica --- */

[data-dica] { position: relative; }

[data-dica]::after {
  content: attr(data-dica);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--superficie-inversa);
  color: var(--texto-inverso);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--raio-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao);
  z-index: 80;
}

[data-dica]:hover::after { opacity: 1; }

/* --- Lista de seleção --- */

.lista-selecao {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: var(--e1);
  background: var(--superficie);
}

.item-selecao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 7px var(--e3);
  cursor: pointer;
  border-radius: var(--raio-sm);
  transition: background var(--transicao);
  font-size: 13.5px;
}

.item-selecao:hover { background: var(--superficie-2); }

.item-selecao input { width: auto; margin: 0; flex: none; }

.item-selecao.vencido { opacity: .55; }
.item-selecao.vencido strong { text-decoration: line-through; }

.item-pasta {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  justify-content: space-between;
}

.item-pasta:hover { background: var(--superficie-2); }
.item-pasta.eh-banco { font-weight: 600; }
.item-pasta .etiqueta { font-weight: 500; }

/* ------------------------------------------------------------------ */
/* 12. AVISOS                                                          */
/* ------------------------------------------------------------------ */

.avisos {
  position: fixed;
  bottom: var(--e5);
  right: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  z-index: 200;
  max-width: min(440px, calc(100vw - var(--e10)));
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-3);
  border-radius: var(--raio);
  box-shadow: var(--sombra-3);
  font-size: 13.5px;
  animation: entrar-lado 190ms cubic-bezier(0.16, 1, 0.3, 1);
}

.aviso-icone { flex: none; margin-top: 1px; }
.aviso-icone svg { width: 17px; height: 17px; }

/* A mensagem da SEFAZ é longa e precisa ser lida com calma, às vezes
   copiada para o contador: quebra de linha preservada. */
.aviso-texto {
  flex: 1;
  min-width: 0;
  white-space: pre-line;
  word-break: break-word;
}

.aviso-fechar {
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-3);
  padding: 0;
  line-height: 1;
  transition: color var(--transicao);
}

.aviso-fechar:hover { color: var(--texto); }
.aviso-fechar svg { width: 15px; height: 15px; }

.aviso.sucesso { border-left-color: var(--sucesso); }
.aviso.sucesso .aviso-icone { color: var(--sucesso); }
.aviso.erro { border-left-color: var(--perigo); }
.aviso.erro .aviso-icone { color: var(--perigo); }
.aviso.atencao { border-left-color: var(--alerta); }
.aviso.atencao .aviso-icone { color: var(--alerta); }
.aviso.informacao { border-left-color: var(--info); }
.aviso.informacao .aviso-icone { color: var(--info); }

@keyframes entrar-lado {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Faixa de mensagem dentro da página --- */

.faixa {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  font-size: 13px;
  border: 1px solid;
  border-left-width: 3px;
  min-width: 0;
}

.faixa svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

.faixa.informacao {
  background: var(--info-fraco);
  border-color: var(--info);
  color: var(--texto);
}

.faixa.atencao {
  background: var(--alerta-fraco);
  border-color: var(--alerta);
  color: var(--texto);
}

.faixa.perigo {
  background: var(--perigo-fraco);
  border-color: var(--perigo);
  color: var(--texto);
}

.faixa.sucesso {
  background: var(--sucesso-fraco);
  border-color: var(--sucesso);
  color: var(--texto);
}

.faixa.informacao svg { color: var(--info); }
.faixa.atencao svg { color: var(--alerta); }
.faixa.perigo svg { color: var(--perigo); }
.faixa.sucesso svg { color: var(--sucesso); }

.faixa-titulo { font-weight: 650; display: block; margin-bottom: 2px; }

/* ------------------------------------------------------------------ */
/* 13. ESTADOS                                                         */
/* ------------------------------------------------------------------ */

.carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  padding: var(--e10);
  color: var(--texto-2);
  font-size: 13.5px;
}

.girando {
  width: 18px;
  height: 18px;
  border: 2px solid var(--borda-forte);
  border-top-color: var(--modulo);
  border-top-color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  border-radius: 50%;
  animation: girar 700ms linear infinite;
  flex: none;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Esqueleto: mostra a forma do que vem, em vez de um vazio que parece
   travamento. */
.esqueleto {
  background: linear-gradient(
    90deg,
    var(--superficie-3) 25%,
    var(--superficie-2) 50%,
    var(--superficie-3) 75%
  );
  background-size: 200% 100%;
  animation: brilho 1.4s ease-in-out infinite;
  border-radius: var(--raio-sm);
}

@keyframes brilho {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.esqueleto-linha { height: 13px; margin-bottom: var(--e2); }
.esqueleto-linha:last-child { margin-bottom: 0; width: 60%; }

/* Estado vazio: diz o que aconteceu e o que fazer a seguir. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e3);
  padding: var(--e10) var(--e5);
  color: var(--texto-2);
}

.vazio-icone {
  width: 56px;
  height: 56px;
  border-radius: var(--raio-lg);
  display: grid;
  place-items: center;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 12%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.vazio-icone svg { width: 26px; height: 26px; }

.vazio h3 { color: var(--texto); font-size: 15px; }

.vazio p { max-width: 62ch; font-size: 13px; }

/* ------------------------------------------------------------------ */
/* 14. PAINEL INICIAL                                                  */
/* ------------------------------------------------------------------ */

.saudacao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  margin-bottom: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
  position: relative;
}

.saudacao::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 3px;
  border-radius: var(--raio-cheio);
  background: var(--modulo);
  background: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.saudacao h1 { font-size: 23px; }

.saudacao-data {
  font-size: 13px;
  color: var(--texto-2);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.relogio {
  font-family: var(--fonte-numerica);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.relogio svg { width: 14px; height: 14px; opacity: .6; }

/* --- Indicadores ---
   Cinco em linha numa tela larga, sem largura mínima folgada demais: o
   pedido era aproveitar a tela, não distribuir quatro cartões perdidos
   no topo. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* A faixa superior no matiz do indicador é o que dá cor à tela inicial
   sem pintar fundo nenhum. */
.indicador {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 3px solid color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  box-shadow: var(--sombra-1);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.indicador.clicavel { cursor: pointer; }

.indicador.clicavel:hover {
  box-shadow: var(--sombra-2);
  text-decoration: none;
}

.indicador-topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

.indicador-icone {
  width: 30px;
  height: 30px;
  border-radius: var(--raio-sm);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 14%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.indicador-icone svg { width: 16px; height: 16px; }

/* Os indicadores não seguem o módulo da tela: cada um carrega a cor do
   seu próprio significado, que é o que a pessoa está lendo. */
.indicador-icone.primaria { --modulo: var(--h-inicio); }
.indicador-icone.sucesso  { background: var(--sucesso-fraco); color: var(--sucesso); }
.indicador-icone.alerta   { background: var(--alerta-fraco);  color: var(--alerta); }
.indicador-icone.perigo   { background: var(--perigo-fraco);  color: var(--perigo); }

.indicador.cor-sucesso { border-top-color: var(--sucesso); }
.indicador.cor-alerta  { border-top-color: var(--alerta); }
.indicador.cor-perigo  { border-top-color: var(--perigo); }

.indicador-titulo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.indicador-valor {
  font-size: 30px;
  font-weight: 680;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--texto);
}

.indicador-rodape {
  font-size: 12px;
  color: var(--texto-3);
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.tendencia {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 650;
  padding: 1px 5px;
  border-radius: var(--raio-sm);
}

.tendencia svg { width: 13px; height: 13px; }
.tendencia.subiu { color: var(--sucesso); background: var(--sucesso-fraco); }
.tendencia.desceu { color: var(--perigo); background: var(--perigo-fraco); }

/* Barra de proporção por situação. Uma linha diz mais que cinco números. */
.barra-situacoes {
  display: flex;
  height: 10px;
  border-radius: var(--raio-sm);
  overflow: hidden;
  background: var(--superficie-3);
}

.barra-situacoes > span { transition: width var(--transicao-lenta); }

.legenda-situacoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin-top: var(--e3);
}

.legenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--texto-2);
}

.legenda-cor {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

.legenda-item strong {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* Atalhos da tela inicial. Cada um carrega o matiz do módulo de destino,
   o que faz a fileira de atalhos ser lida pela cor. */
.atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e2);
}

.atalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 10px var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color var(--transicao), background var(--transicao);
  font-size: 13.5px;
  font-weight: 550;
  min-width: 0;
}

.atalho svg {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 7px;
  border-radius: var(--raio-sm);
  box-sizing: border-box;
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 14%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  transition: background var(--transicao), color var(--transicao);
}

.atalho:hover {
  border-color: var(--modulo);
  border-color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  background: var(--superficie-2);
  text-decoration: none;
}

.atalho:hover svg {
  background: var(--modulo);
  background: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  color: #fff;
}

[data-tema="escuro"] .atalho:hover svg { color: #08111d; }

.atalho .cresce { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Composição da tela inicial: painel largo à esquerda, coluna de apoio à
   direita, ocupando a largura toda. */
.painel-inicial {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}

@media (max-width: 1180px) {
  .painel-inicial { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* 15. EMISSÃO                                                         */
/* ------------------------------------------------------------------ */

/* A tela de emissão é a mais longa do sistema e a única em que um erro
   custa dinheiro. Layout próprio: os blocos de um lado, e de outro um
   resumo que acompanha a rolagem, para ninguém precisar subir a tela
   inteira só para conferir quanto está dando.

   Não é assistente de etapas: todos os blocos ficam abertos e visíveis,
   e a pessoa preenche na ordem que quiser. */
.emissao-etapas { min-width: 0; }

/* --- Bloco da nota --- */

.etapa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}

.etapa + .etapa { margin-top: var(--e3); }

.etapa-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda-sutil);
  background: var(--superficie-2);
}

/* No lugar do número de etapa vai o ícone do assunto do bloco: a tela
   deixa de parecer um assistente de seis passos e passa a ser um
   formulário organizado em seções, que é o que ela é. */
.etapa-icone {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--raio-sm);
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 14%, transparent);
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  display: grid;
  place-items: center;
  transition: background var(--transicao), color var(--transicao);
}

.etapa-icone svg { width: 17px; height: 17px; }

/* Bloco completo ganha o verde de conferido — sinal de que aquela parte
   da nota está resolvida, sem sugerir que exista uma ordem obrigatória. */
.etapa.pronta .etapa-icone {
  background: var(--sucesso-fraco);
  color: var(--sucesso);
}

.etapa-titulo {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.etapa-titulo span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--texto-3);
  letter-spacing: 0;
  margin-top: 1px;
}

.etapa-corpo { padding: var(--e4); }

/* --- Itens da nota --- */

.item-nota {
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
}

.item-nota + .item-nota { margin-top: var(--e2); }

.item-nota-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--borda-sutil);
}

.item-nota-indice {
  flex: none;
  font-family: var(--fonte-numerica);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 14%, transparent);
  border-radius: var(--raio-sm);
  padding: 2px 7px;
}

.item-nota-nome {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-nota-nome.vazio { color: var(--texto-3); font-weight: 400; }

.item-nota-total {
  flex: none;
  font-family: var(--fonte-numerica);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 13px;
}

.item-nota-corpo { padding: var(--e3); }

/* A descrição ocupa duas colunas: é o que se lê para saber que item é,
   e os demais campos são números curtos. */
.item-nota-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--e3);
}

.item-nota-grade .campo.descricao { grid-column: span 2; }

/* Valores acessórios ficam fechados: a maioria das notas não tem
   desconto nem frete rateado por item. */
.item-nota-acessorios {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px dashed var(--borda);
}

.item-nota-abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  background: none;
  border: none;
  padding: 0;
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}

.item-nota-abrir svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .item-nota-grade { grid-template-columns: minmax(0, 1fr); }
  .item-nota-grade .campo.descricao { grid-column: auto; }
}

/* --- Totais dentro da Revisão ---
   Deixaram de ser uma coluna estreita e passaram a ocupar a largura do
   bloco: as linhas de imposto ficam em duas ou três colunas, e o total
   sai destacado à direita, junto de quem vai clicar em emitir. */

.totais-revisao {
  margin-bottom: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
}

.resumo-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e1) var(--e6);
  margin: 0;
}

.resumo-linha {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: 13px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--borda);
}

.resumo-linha dt {
  flex: 1;
  min-width: 0;
  color: var(--texto-2);
}

.resumo-linha dd {
  margin: 0;
  font-family: var(--fonte-numerica);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.resumo-linha.desconto dd { color: var(--sucesso); }

.resumo-linha.pendente dd {
  color: var(--texto-3);
  font-weight: 400;
  font-size: 12px;
}

/* O total é o número que se confere antes de assinar: o maior da tela e
   o único em caixa. */
.resumo-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  margin-top: var(--e3);
  border-radius: var(--raio-sm);
  background: var(--superficie-3);
  background: color-mix(in srgb, var(--modulo) 10%, transparent);
  border: 1px solid var(--borda);
  border-color: color-mix(in srgb, var(--modulo) 24%, transparent);
}

.resumo-total dt { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }

.resumo-total dd {
  margin: 0;
  font-family: var(--fonte-numerica);
  font-variant-numeric: tabular-nums;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--modulo);
  color: color-mix(in srgb, var(--modulo) var(--p-legivel), var(--c-legivel));
}

.resumo-total.desatualizado dd { color: var(--texto-3); }

/* ------------------------------------------------------------------ */
/* 16. UTILIDADES                                                      */
/* ------------------------------------------------------------------ */

.linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  min-width: 0;
}

.linha-entre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  min-width: 0;
}

.cresce { flex: 1; min-width: 0; }
.sem-quebra { white-space: nowrap; }

.pilha {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  min-width: 0;
}

.pilha-4 { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }

.separador {
  height: 1px;
  background: var(--borda-sutil);
  margin: var(--e4) 0;
  border: none;
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Conteúdo largo com coluna de apoio. */
.com-lateral {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}

.lateral-fixa {
  position: sticky;
  top: 0;
}

/* ------------------------------------------------------------------ */
/* 17. TELAS ESTREITAS                                                 */
/* ------------------------------------------------------------------ */

@media (max-width: 1180px) {
  .com-lateral { grid-template-columns: minmax(0, 1fr); }
  .lateral-fixa { position: static; }
}

/* Some em tela estreita: informação de apoio que, no celular, custa mais
   espaço do que vale. O nome de quem está logado nunca entra aqui. */
@media (max-width: 1100px) {
  .so-largo { display: none !important; }
}

@media (max-width: 1280px) {
  .emitente-topo { max-width: 220px; }
}

@media (max-width: 900px) {
  /* A barra lateral vira gaveta: fora da tela até ser chamada. */
  .aplicacao {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topo"
      "conteudo";
  }

  .aplicacao.lateral-fechada {
    grid-template-columns: minmax(0, 1fr);
  }

  .lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--largura-lateral);
    z-index: 110;
    transform: translateX(-100%);
    transition: transform var(--transicao-lenta);
    box-shadow: var(--sombra-3);
  }

  .aplicacao.gaveta-aberta .lateral { transform: none; }

  .fundo-gaveta {
    position: fixed;
    inset: 0;
    background: rgba(8, 13, 21, .5);
    z-index: 105;
    animation: aparecer 140ms ease-out;
  }

  /* Na gaveta o texto sempre aparece: ela só existe quando foi aberta. */
  .lateral-fechada .lateral-marca-texto,
  .lateral-fechada .lateral-grupo-titulo,
  .lateral-fechada .lateral-item span,
  .lateral-fechada .lateral-item-contagem { display: revert; }

  .lateral-fechada .lateral-item { justify-content: flex-start; padding: 7px var(--e2); }
  .lateral-fechada .lateral-marca { justify-content: flex-start; padding: 0 var(--e4); }

  .conteudo { padding: var(--e3); }
  .topo { padding: 0 var(--e3); gap: var(--e2); }

  .emitente-topo { max-width: 180px; }
  .emitente-topo-rotulo { display: none; }

  .saudacao h1 { font-size: 20px; }
  .indicador-valor { font-size: 26px; }
  .pagina-topo h1 { font-size: 19px; }
  .pagina-topo-icone { width: 34px; height: 34px; }
  .pagina-topo-icone svg { width: 18px; height: 18px; }
}

@media (max-width: 760px) {
  /* O emitente sai do topo e aparece no cabeçalho da tela, que no
     celular está a um palmo de distância. */
  .emitente-topo { display: none; }
  #seletor-emitente { display: none; }
  .trilha { display: none; }
}

@media (max-width: 640px) {
  /* A barra do topo não quebra linha: quebrando, o bloco do usuário
     empurrava o botão da gaveta para cima do próprio texto. */
  .topo { flex-wrap: nowrap; }

  /* O cargo sai, o nome fica: o requisito é reconhecer quem está
     logado, e o nome é o que faz isso. */
  .usuario-papel { display: none; }
  .usuario-topo { max-width: 172px; padding-right: 4px; }
  .usuario-nome { overflow: hidden; text-overflow: ellipsis; }
  .usuario-topo > svg { display: none; }

  .ambiente span { display: none; }
  .ambiente { padding: 6px; }

  .cartao-corpo { padding: var(--e3); }
  .cartao-cabecalho { padding: var(--e2) var(--e3); }

  /* Uma coluna: formulário de duas colunas em tela de celular deixa os
     campos estreitos demais para digitar número. */
  .grade,
  .grade-2,
  .filtros,
  .indicadores,
  .atalhos { grid-template-columns: minmax(0, 1fr); }

  .fundo-modal { padding: 0; align-items: flex-end; }

  /* No celular o modal vira folha que sobe de baixo: é onde o polegar
     alcança, e aproveita a altura toda. */
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    animation: subir-folha 210ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .modal-rodape { border-radius: 0; }
  .modal-rodape .botao { flex: 1; }

  .avisos {
    left: var(--e3);
    right: var(--e3);
    bottom: var(--e3);
    max-width: none;
  }

  .barra-acoes .botao { flex: 1; }

  td.acoes > span { flex-wrap: wrap; justify-content: flex-start; }

  .paginacao { justify-content: center; }
  .paginacao-info { flex: 1 0 100%; text-align: center; }

  .pagina-topo { align-items: flex-start; flex-direction: column; }
  .pagina-topo-acoes { width: 100%; }
  .pagina-topo-acoes .botao { flex: 1; }
}

@keyframes subir-folha {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* Quem pediu menos movimento ao sistema operacional recebe menos. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .lateral, .topo, .avisos, .barra-acoes, .abas, .paginacao { display: none !important; }
  .aplicacao { display: block; height: auto; }
  .conteudo { overflow: visible; padding: 0; }
  .cartao { border: none; box-shadow: none; }
}