/* ==========================================================================
   FiscPro: tema

   Identidade: o design de marca do FiscPro (06/10/2026, cópia completa em
   design/fiscpro-design-system), irmão do JMC Pro. Petróleo e ouro, Century
   Gothic em toda a interface e Cormorant Garamond 300 só nos títulos de página
   e na tagline. Ferramenta que fica aberta o dia todo, então clara:

     - a MARCA é a Nota (o símbolo: documento em traço fino, duas linhas gelo e
       a terceira, mais curta, em ouro) com o wordmark "Fisc" 400 + "Pro" 700.
       Desenho em `.simbolo-nota`, `.lockup` e `.wordmark`, aqui, e o SVG em
       publico/js/marca.js. Nunca "FISCPRO" em caixa alta, nunca ouro na letra;
     - o FUNDO é o claro da marca (#F2F6F7) e o CONTEÚDO são cartões brancos com
       a sombra petróleo. O petróleo em bloco fica para a tela de entrada
       (entrar.css), o cartão de destaque das métricas e os ícones;
     - o PETRÓLEO (#1B4D5C) é o acento: botões, foco, link, aba, seleção e os
       rótulos em caixa-alta espaçada. O petróleo profundo (#0F2F38) é a cor dos
       títulos e do traço da marca;
     - o OURO (#C8A96E) é reservado: a linha da Nota, os filetes (topo do menu,
       item ativo, linha das seções, fio da ação principal) e o hover. Nunca em
       área grande. Verde, âmbar e vermelho são só estado, nunca decoração.

   Tudo passa por variável, declarada nos DOIS temas (claro e escuro), e é isso
   que faz a troca ser instantânea. Cor crua escrita direto numa regra fica
   presa num tema só (armadilha 30 do desktop): precisando de cor nova, declare
   aqui, nos dois blocos.
   ========================================================================== */

/* ------------------------------------------------------------ tema claro --- */

:root,
:root[data-tema="claro"] {
  color-scheme: light;

  /* marca (design/fiscpro-design-system/tokens/brand.css) */
  --petroleo-profundo: #0F2F38;
  --petroleo-medio:    #1B4D5C;
  --ouro:              #C8A96E;
  --ouro-forte:        #B8944A;
  --ouro-texto:        #8C6D33;   /* ouro legível sobre fundo claro (≥ 4,5:1) */
  --gelo:              #E8F0F2;
  --gelo-medio:        #D0DDE0;
  --gradiente-marca:   linear-gradient(145deg, #0F2F38 0%, #1B4D5C 100%);
  --ceu:               #1B4D5C;   /* acento de interação: o petróleo */
  --ceu-suave:         rgba(27, 77, 92, .07);
  --ceu-borda:         rgba(27, 77, 92, .32);
  --texto-rotulo:      #1B4D5C;   /* rótulos em caixa-alta espaçada */

  /* O símbolo e o wordmark: traço petróleo profundo sobre o claro, linhas de
     leitura a 45% (FISCPRO-BRAND.md, "Cor do traço"). */
  --marca-traco:       #0F2F38;
  --marca-texto:       #0F2F38;
  --marca-leitura:     .45;

  /* fundo: o claro da marca, com um halo gelo quase imperceptível no canto */
  --bg:            #F2F6F7;
  --bg-alto:       #F7FAFA;
  --bg-textura:
    radial-gradient(1200px 720px at 104% -12%, rgba(208, 221, 224, .55), transparent 60%),
    linear-gradient(180deg, #F4F8F8 0%, #F2F6F7 45%, #EDF3F4 100%);

  /* Os nomes "vidro" ficaram das telas herdadas. Desde o design de marca o
     cartão é branco e opaco, com a sombra petróleo; sem transparência, o
     desfoque não tem o que mostrar e sai. */
  --vidro:          #FFFFFF;
  --vidro-forte:    #FFFFFF;
  --vidro-borda:    rgba(15, 47, 56, .07);
  --vidro-desfoque: none;
  --vidro-brilho:   0 0 0 transparent;

  /* superfícies */
  --superficie:    #FFFFFF;
  /* Fundo do QR Code do segundo fator: branco nos dois temas, porque é a câmera
     do celular que precisa ler (entrar.css). */
  --qr-fundo:      #FFFFFF;
  /* Séries dos gráficos do painel (NF-e, NFC-e, NFS-e), validadas para daltonismo,
     contraste e saturação contra a superfície clara (05/10/2026). */
  --serie-1:       #008C9E;
  --serie-2:       #C2851A;
  --serie-3:       #7650B8;
  --superficie-2:  #FFFFFF;
  --superficie-3:  #E8F0F2;
  --elevado:       #FFFFFF;
  --card:          var(--vidro);
  --painel:        var(--vidro);

  --barra-topo:        #FFFFFF;
  --divisor:           rgba(15, 47, 56, .14);
  --gradiente-cartao:  var(--vidro);
  --gradiente-metrica: #FFFFFF;
  /* O cartão que importa mais que os vizinhos é um pedaço da marca: petróleo
     em degradê, valor em branco e o fio de ouro no pé. */
  --gradiente-metrica-destaque: var(--gradiente-marca);
  --linha-metrica-destaque:     rgba(200, 169, 110, .38);
  --rotulo-metrica-destaque:    rgba(232, 240, 242, .80);
  --valor-metrica-destaque:     #FFFFFF;
  --complemento-metrica-destaque: rgba(232, 240, 242, .74);
  --recuo:             #F5F8F9;
  --desabilitado:      #EEF3F4;
  --fundo-modal:       rgba(15, 47, 56, .30);
  --fundo-cobertura:   rgba(242, 246, 247, .86);
  --fundo-modal-caixa: #FFFFFF;
  --cabecalho-tabela:  #F5F8F9;
  --fundo-codigo:      #F5F8F9;
  --fundo-dica:        #0F2F38;
  --texto-dica:        #F2F6F7;
  --fundo-toast:       #FFFFFF;

  /* menu: branco, como os cartões; o item ativo é gelo com o filete de ouro */
  --menu-fundo:       #FFFFFF;
  --menu-borda:       rgba(15, 47, 56, .07);
  --menu-sombra:      0 2px 8px rgba(15, 47, 56, .10);
  --menu-texto:       #3A4A50;
  --menu-texto-forte: #0F2F38;
  --menu-texto-fraco: #5A6A72;
  --menu-icone:       #6B7C83;
  --menu-linha:       rgba(15, 47, 56, .08);
  --menu-hover:       rgba(27, 77, 92, .06);
  --menu-ativo:       #E8F0F2;
  --menu-caixa:       #F5F8F9;
  --menu-rolagem:     rgba(15, 47, 56, .16);
  --sidebar:          var(--menu-fundo);

  /* linhas */
  --linha:         rgba(15, 47, 56, .11);
  --linha-forte:   rgba(15, 47, 56, .22);
  --linha-suave:   rgba(15, 47, 56, .06);
  /* borda dos campos: o gelo médio da marca, e um passo mais forte no hover */
  --borda-campo:   #D0DDE0;
  --borda-campo-h: #AFC3C8;

  /* texto: chumbo no corpo, meta no secundário, petróleo profundo nos títulos */
  --texto:         #3A4A50;
  --texto-titulo:  #0F2F38;
  --texto-suave:   #3A4A50;
  --texto-fraco:   #5A6A72;
  --texto-tenue:   #7F8F96;
  --texto-menu-ativo: #0F2F38;
  --texto-sobre-acento: #FFFFFF;
  --texto-sobre-ouro:   #3B2F16;
  --texto-sucesso: #2C6A50;
  --texto-erro:    #94383A;
  --texto-alerta:  #7A5A1C;
  --texto-info:    #1B4D5C;

  /* estados, e os nomes antigos que as telas herdadas ainda citam */
  --sucesso:       #3A8A68;
  --erro:          #BF5656;
  --atencao:       #BE8D3C;
  --verde:         #3A8A68;
  --verde-escuro:  #2C6A50;
  --verde-claro:   #4FA07D;
  --verde-btn:     #3A8A68;
  --verde-btn-h:   #327A5C;
  --petroleo:      #1B4D5C;
  --petroleo-2:    #2A6475;
  --azul-petroleo: #1B4D5C;
  --menta:         #1B4D5C;
  --amarelo:       #BE8D3C;
  --laranja:       #BF7040;
  --vermelho:      #BF5656;
  --vermelho-claro:#A84444;
  --azul:          #3F76A0;
  --roxo:          #7466B4;

  /* tingimentos dos estados (fundos e bordas de pílulas, avisos, marcas) */
  --tinta-sucesso:  rgba(58, 138, 104, .10);
  --borda-sucesso:  rgba(58, 138, 104, .26);
  --tinta-erro:     rgba(191, 86, 86, .09);
  --borda-erro:     rgba(191, 86, 86, .26);
  --tinta-atencao:  rgba(206, 160, 80, .12);
  --borda-atencao:  rgba(190, 141, 60, .30);
  --tinta-info:     rgba(27, 77, 92, .07);
  --borda-info:     rgba(27, 77, 92, .22);
  --tinta-ouro:     rgba(200, 169, 110, .15);
  --borda-ouro:     rgba(184, 148, 74, .36);
  --tinta-roxo:     rgba(116, 102, 180, .09);
  --borda-roxo:     rgba(116, 102, 180, .24);

  /* Botões. O comum é petróleo; a ação principal de cada tela (`.botao.grande`)
     é o degradê da marca com um fio de ouro. No escuro ela vira o botão branco
     da tela de entrada. */
  --botao-principal:   #1B4D5C;
  --botao-principal-h: #0F2F38;
  --botao-destaque:    var(--gradiente-marca);
  --botao-destaque-h:  linear-gradient(145deg, #0B252C 0%, #17434F 100%);
  --texto-botao-destaque: #FFFFFF;
  --fio-botao-destaque:   rgba(200, 169, 110, .55);
  --brilho-principal:  0 8px 20px -8px rgba(15, 47, 56, .45);
  --interruptor-ligado: #1B4D5C;

  /* selos: o círculo com ícone do emitente, do certificado, do progresso */
  --selo-fundo:    #E8F0F2;
  --selo-texto:    #1B4D5C;

  /* seleção, foco e rolagem */
  --selecao:       rgba(200, 169, 110, .30);
  --anel-foco:     0 0 0 3px rgba(27, 77, 92, .14);
  --rolagem:       rgba(15, 47, 56, .18);
  --rolagem-h:     rgba(15, 47, 56, .32);

  /* A seta do `select` é SVG embutido e a cor vai escrita na URL: a imagem
     inteira é variável de tema (armadilha 35 do desktop). */
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235A6A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");

  /* tipografia */
  --fonte-texto:   "Century Gothic", "Jost", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo:  "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --fonte-mono:    "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;

  /* medidas: raios 6/10/16/999 e grade de 4 px da marca, movimento de 220 ms */
  --raio:          10px;
  --raio-p:        6px;
  --raio-g:        16px;
  --raio-cartao:   16px;
  --altura-controle: 40px;
  --sombra:        0 8px 24px rgba(15, 47, 56, .14);
  --sombra-suave:  0 2px 8px rgba(15, 47, 56, .10);
  --transicao:     .22s cubic-bezier(.4, 0, .2, 1);
  --largura-menu:  288px;
  --altura-topo:   72px;
  --respiro:       16px;
}

/* ----------------------------------------------------------- tema escuro --- */

/**
 * Escuro: a noite do petróleo. Fundo petróleo quase negro, cartões um tom
 * acima, o traço da marca em branco (como no ícone) e a ação principal no
 * botão branco da tela de entrada. O ouro continua o mesmo.
 */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --petroleo-profundo: #E8F0F2;
  --petroleo-medio:    #8EC3CD;
  --ouro-texto:        #D8C08E;
  --ceu:               #8EC3CD;
  --ceu-suave:         rgba(142, 195, 205, .10);
  --ceu-borda:         rgba(142, 195, 205, .36);
  --texto-rotulo:      #9FC6CE;

  --marca-traco:       #FFFFFF;
  --marca-texto:       #FFFFFF;
  --marca-leitura:     .55;

  --bg:            #0B1E24;
  --bg-alto:       #0F252C;
  --bg-textura:
    radial-gradient(1200px 720px at 104% -12%, rgba(27, 77, 92, .50), transparent 60%),
    linear-gradient(180deg, #0D232A 0%, #0B1E24 50%, #091A1F 100%);

  --vidro:         #102B33;
  --vidro-forte:   #12313A;
  --vidro-borda:   rgba(232, 240, 242, .07);
  --vidro-desfoque: none;
  --vidro-brilho:  0 0 0 transparent;

  --superficie:    #143640;
  --qr-fundo:      #FFFFFF;
  /* As mesmas séries, com os passos validados contra a superfície escura. */
  --serie-1:       #1FA2B4;
  --serie-2:       #B98525;
  --serie-3:       #9878D8;
  --superficie-2:  #0E262D;
  --superficie-3:  #1A3F4A;
  --elevado:       #163A44;

  --barra-topo:        #102B33;
  --divisor:           rgba(232, 240, 242, .14);
  --gradiente-metrica: #102B33;
  --gradiente-metrica-destaque: linear-gradient(145deg, #1B4D5C 0%, #24606F 100%);
  --linha-metrica-destaque:     rgba(200, 169, 110, .42);
  --rotulo-metrica-destaque:    rgba(232, 240, 242, .80);
  --valor-metrica-destaque:     #FFFFFF;
  --complemento-metrica-destaque: rgba(232, 240, 242, .74);
  --recuo:             #0D252C;
  --desabilitado:      rgba(14, 38, 45, .70);
  --fundo-modal:       rgba(4, 12, 15, .60);
  --fundo-cobertura:   rgba(11, 30, 36, .86);
  --fundo-modal-caixa: #11303A;
  --cabecalho-tabela:  #0F2A32;
  --fundo-codigo:      #0B2026;
  --fundo-dica:        #E8F0F2;
  --texto-dica:        #0F2F38;
  --fundo-toast:       #143640;

  --menu-fundo:       #102B33;
  --menu-borda:       rgba(232, 240, 242, .07);
  --menu-sombra:      0 8px 24px rgba(0, 0, 0, .35);
  --menu-texto:       #C7D5D9;
  --menu-texto-forte: #FFFFFF;
  --menu-texto-fraco: #93A9B0;
  --menu-icone:       #8CA3AA;
  --menu-linha:       rgba(232, 240, 242, .07);
  --menu-hover:       rgba(142, 195, 205, .08);
  --menu-ativo:       rgba(232, 240, 242, .08);
  --menu-caixa:       rgba(232, 240, 242, .04);
  --menu-rolagem:     rgba(232, 240, 242, .14);

  --linha:         rgba(232, 240, 242, .11);
  --linha-forte:   rgba(232, 240, 242, .22);
  --linha-suave:   rgba(232, 240, 242, .06);
  --borda-campo:   rgba(232, 240, 242, .16);
  --borda-campo-h: rgba(232, 240, 242, .30);

  --texto:         #E3ECEE;
  --texto-titulo:  #F7FAFA;
  --texto-suave:   #C5D3D7;
  --texto-fraco:   #9AB0B6;
  --texto-tenue:   #768D95;
  --texto-menu-ativo: #FFFFFF;
  --texto-sobre-acento: #FFFFFF;
  --texto-sobre-ouro:   #2E2410;
  --texto-sucesso: #94DDBB;
  --texto-erro:    #F4B0AC;
  --texto-alerta:  #EACB8E;
  --texto-info:    #A9D3DB;

  --sucesso:       #62C39A;
  --erro:          #E07F7B;
  --atencao:       #DDB463;
  --verde:         #62C39A;
  --verde-escuro:  #47A67E;
  --verde-claro:   #84D5B1;
  --verde-btn:     #47A67E;
  --verde-btn-h:   #52B48A;
  --petroleo:      #8EC3CD;
  --petroleo-2:    #5E9AA6;
  --azul-petroleo: #8EC3CD;
  --menta:         #8EC3CD;
  --amarelo:       #DDB463;
  --laranja:       #E09A62;
  --vermelho:      #E07F7B;
  --vermelho-claro:#F29C98;
  --azul:          #86B8DE;
  --roxo:          #ADA2E2;

  --tinta-sucesso:  rgba(98, 195, 154, .13);
  --borda-sucesso:  rgba(98, 195, 154, .32);
  --tinta-erro:     rgba(224, 127, 123, .13);
  --borda-erro:     rgba(224, 127, 123, .34);
  --tinta-atencao:  rgba(221, 180, 99, .13);
  --borda-atencao:  rgba(221, 180, 99, .34);
  --tinta-info:     rgba(142, 195, 205, .12);
  --borda-info:     rgba(142, 195, 205, .30);
  --tinta-ouro:     rgba(200, 169, 110, .15);
  --borda-ouro:     rgba(216, 192, 142, .36);
  --tinta-roxo:     rgba(173, 162, 226, .13);
  --borda-roxo:     rgba(173, 162, 226, .30);

  --botao-principal:   #2A6475;
  --botao-principal-h: #327486;
  --botao-destaque:    #FFFFFF;
  --botao-destaque-h:  #F2F6F7;
  --texto-botao-destaque: #0F2F38;
  --fio-botao-destaque:   rgba(200, 169, 110, .70);
  --brilho-principal:  0 8px 20px -8px rgba(0, 0, 0, .60);
  --interruptor-ligado: #3E8394;

  --selo-fundo:    rgba(142, 195, 205, .12);
  --selo-texto:    #A9D3DB;

  --selecao:       rgba(200, 169, 110, .28);
  --anel-foco:     0 0 0 3px rgba(142, 195, 205, .22);
  --rolagem:       rgba(232, 240, 242, .18);
  --rolagem-h:     rgba(232, 240, 242, .32);

  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239AB0B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");

  --sombra:        0 8px 24px rgba(0, 0, 0, .40);
  --sombra-suave:  0 2px 8px rgba(0, 0, 0, .28);
}

/* --------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--fonte-texto);
  font-size: 15.5px;
  line-height: 1.45;
  font-feature-settings: "kern" 1;
  background-color: var(--bg);
  background-image: var(--bg-textura);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--texto);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

input, textarea, select, [contenteditable], .selecionavel { user-select: text; }

/* Retorno da SEFAZ ou da Sefin que se seleciona e se copia (ui.textoCopiavel, 13/10/2026). */
.texto-copiavel { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.texto-copiavel > .selecionavel { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; cursor: text; }
.texto-copiavel > .botao { flex: 0 0 auto; }

/* O atributo `hidden` vence qualquer `display` de classe: sem isto, um
   formulário com `display: flex` aparecia mesmo marcado como escondido. */
[hidden] { display: none !important; }

a { color: var(--ceu); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--ouro-texto); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--selecao); color: var(--texto); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.005em; }

:focus-visible { outline: 2px solid var(--ceu); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Rótulo de seção à moda da marca: caixa-alta pequena, espaçada, em petróleo. */
.sobrescrito,
.menu-grupo-titulo,
.secao-titulo {
  font-family: var(--fonte-texto);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
}

/* ------------------------------------------------------------- marca --- */

/*
 * A Nota (FISCPRO-BRAND.md, seção 1). O SVG vem de publico/js/marca.js (ou
 * escrito igual no HTML das páginas estáticas): viewBox 200 x 256, que é o
 * símbolo de 512 px do design, traço 12, raio 22, linhas de 12 e a de ouro de
 * 15 com 60% da largura. A cor do traço e das linhas de leitura é do tema
 * (`--marca-traco`, `--marca-leitura`); o ouro é sempre o mesmo.
 */
.simbolo-nota {
  display: block; flex: 0 0 auto;
  width: 1em; height: 1.28em;
  overflow: visible;
  color: var(--marca-traco);
}
.simbolo-nota .contorno { fill: none; stroke: currentColor; stroke-width: 12; }
.simbolo-nota .leitura { fill: currentColor; fill-opacity: var(--marca-leitura); }
.simbolo-nota .valor { fill: var(--ouro); }

/* Wordmark: "Fisc" Regular e "Pro" Bold, sem espaço, tracking -0,02em. */
.wordmark {
  font-family: var(--fonte-texto);
  font-weight: 400; font-style: normal;
  letter-spacing: -.02em; line-height: 1;
  text-transform: none;
  color: var(--marca-texto);
  white-space: nowrap;
}
.wordmark b { font-weight: 700; }

/* Lockups. Horizontal: símbolo com 1,28 x a letra e espaço de 0,44 x; vertical:
   símbolo com 2,1 x a letra, acima, e espaço de 0,57 x. Tudo em `em`: o
   tamanho do lockup é o `font-size` dele. */
.lockup {
  display: inline-flex; align-items: center; gap: .44em;
  font-size: 24px; line-height: 1;
}
.lockup .simbolo-nota { width: 1em; height: 1.28em; }
.lockup.vertical { flex-direction: column; gap: .57em; }
.lockup.vertical .simbolo-nota { width: 1.64em; height: 2.1em; }

/* Tagline do rodapé (FISCPRO-BRAND.md, "Copy"): Cormorant 300 em itálico. */
.tagline {
  font-family: var(--fonte-titulo);
  font-style: italic; font-weight: 300;
  line-height: 1.3;
  color: var(--texto-rotulo);
}

/* ------------------------------------------------- barras de rolagem --- */

.rolagem,
.conteudo,
.tabela-envolucro,
.modal-corpo,
.lista-rolavel,
textarea,
.menu-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--rolagem) transparent;
}

.rolagem::-webkit-scrollbar,
.conteudo::-webkit-scrollbar,
.tabela-envolucro::-webkit-scrollbar,
.modal-corpo::-webkit-scrollbar,
.lista-rolavel::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.menu-nav::-webkit-scrollbar { width: 10px; height: 10px; }

.rolagem::-webkit-scrollbar-track,
.conteudo::-webkit-scrollbar-track,
.tabela-envolucro::-webkit-scrollbar-track,
.modal-corpo::-webkit-scrollbar-track,
.lista-rolavel::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
.menu-nav::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }

.rolagem::-webkit-scrollbar-thumb,
.conteudo::-webkit-scrollbar-thumb,
.tabela-envolucro::-webkit-scrollbar-thumb,
.modal-corpo::-webkit-scrollbar-thumb,
.lista-rolavel::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.menu-nav::-webkit-scrollbar-thumb {
  background: var(--rolagem);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.rolagem::-webkit-scrollbar-thumb:hover,
.conteudo::-webkit-scrollbar-thumb:hover,
.tabela-envolucro::-webkit-scrollbar-thumb:hover,
.modal-corpo::-webkit-scrollbar-thumb:hover,
.lista-rolavel::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
.menu-nav::-webkit-scrollbar-thumb:hover { background: var(--rolagem-h); background-clip: padding-box; }


.rolagem::-webkit-scrollbar-corner,
.conteudo::-webkit-scrollbar-corner,
.tabela-envolucro::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------------ layout --- */

/* Menu e área de trabalho flutuam sobre o fundo, com o mesmo respiro em volta:
   é o que deixa o degradê aparecer entre as peças e dá a sensação de camadas. */
.aplicacao {
  display: grid;
  grid-template-columns: var(--largura-menu) minmax(0, 1fr);
  gap: var(--respiro);
  height: 100vh;
  height: 100dvh;
  padding: var(--respiro);
}

.aplicacao.menu-recolhido { --largura-menu: 80px; }

/* ----------------------------------------------------------- sidebar --- */

/* O menu é um cartão branco, da mesma família dos outros: a navegação some no
   ambiente e o que chama a atenção é o conteúdo. A marca fica no alto (o
   lockup horizontal) e nos filetes de ouro (o do topo e o do item ativo). */
.menu {
  background: var(--menu-fundo);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  color: var(--menu-texto);
  border: 1px solid var(--menu-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--menu-sombra), var(--vidro-brilho);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Filete de ouro no topo do menu: um "filete premium" da marca. */
.menu::before {
  content: "";
  position: absolute; inset: 0 26px auto;
  height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  opacity: .8;
}

/* Lockup horizontal, com o respiro mínimo da marca (meia altura do símbolo)
   em volta. "Júnior Moreira Contabilidade" assina no rodapé, nunca aqui. */
.menu-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  min-height: var(--altura-topo);
  border-bottom: 1px solid var(--menu-linha);
}
.menu-marca .lockup { font-size: 26px; min-width: 0; }

/* X da gaveta: escondido no computador, onde o menu não cobre a tela. */
.menu-fechar { display: none; }

.menu-recolhido .menu-marca .wordmark,
.menu-recolhido .menu-nav span,
.menu-recolhido .menu-grupo-titulo,
.menu-recolhido .menu-rodape .detalhe,
.menu-recolhido .menu-assinatura,
.menu-recolhido .menu-usuario .quem { display: none; }
.menu-recolhido .menu-marca { justify-content: center; padding-left: 0; padding-right: 0; }
.menu-recolhido .menu-nav a { justify-content: center; padding-left: 0; padding-right: 0; }

.menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-grupo-titulo {
  color: var(--texto-rotulo);
  font-size: 11px;
  padding: 18px 12px 7px;
}
.menu-grupo-titulo:first-child { padding-top: 8px; }

.menu-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--raio);
  color: var(--menu-texto);
  font-size: 14.5px;
  font-weight: 450;
  letter-spacing: .005em;
  transition: var(--transicao);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  /* Sem estas duas linhas o rótulo comprido empurrava o texto para fora da
     caixa do link e o fundo do hover cobria só parte dele. */
  min-width: 0;
  overflow: hidden;
}
.menu-nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-nav a:hover { background: var(--menu-hover); color: var(--menu-texto-forte); text-decoration: none; }
.menu-nav a svg { color: var(--menu-icone); flex: 0 0 auto; transition: var(--transicao); }
.menu-nav a:hover svg { color: var(--ceu); }

.menu-nav a.ativo {
  background: var(--menu-ativo);
  color: var(--texto-menu-ativo);
  font-weight: 600;
}
.menu-nav a.ativo::before {
  content: "";
  position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--ouro);
}
.menu-nav a.ativo svg { color: var(--ceu); }

.menu-nav { scrollbar-color: var(--menu-rolagem) transparent; }
.menu-nav::-webkit-scrollbar-thumb { background: var(--menu-rolagem); background-clip: padding-box; }

.menu-rodape {
  border-top: 1px solid var(--menu-linha);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Indicadores do rodapé: BD e EF, com a bolinha de estado. O detalhe fica no
   `title`: é lá que ele é procurado, quando algo fica vermelho. */
.menu-indicadores { display: flex; gap: 7px; }

.menu-indicadores .indicador {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid var(--menu-linha);
  background: var(--menu-caixa);
  color: var(--menu-texto-fraco);
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  cursor: pointer;
  transition: var(--transicao);
}
.menu-indicadores .indicador:hover { border-color: var(--borda-ouro); color: var(--menu-texto-forte); }
/* Recuo, margem e borda zerados: qualquer classe de estado com caixa própria
   inflaria a bolinha (com border-box, o recuo vira o piso da largura). */
.menu-indicadores .ponto,
.menu-estado .ponto {
  width: 8px; height: 8px; min-width: 8px; flex: 0 0 auto;
  padding: 0; margin: 0; border: 0;
  border-radius: 50%; background: var(--menu-texto-fraco);
}
.menu-indicadores .ponto.on, .menu-estado .ponto.on { background: var(--sucesso); box-shadow: 0 0 0 3px var(--tinta-sucesso); }
.menu-indicadores .ponto.off, .menu-estado .ponto.off { background: var(--erro); box-shadow: 0 0 0 3px var(--tinta-erro); }
.menu-indicadores .ponto.alerta, .menu-estado .ponto.alerta { background: var(--atencao); box-shadow: 0 0 0 3px var(--tinta-atencao); }

.menu-recolhido .menu-indicadores { flex-direction: column; }

.menu-estado {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 11px;
  background: var(--menu-caixa);
  border: 1px solid var(--menu-linha);
  font-size: 13px; color: var(--menu-texto-fraco);
  cursor: pointer; transition: var(--transicao);
}
.menu-estado:hover { border-color: var(--borda-ouro); color: var(--menu-texto-forte); }
.menu-estado .detalhe { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.menu-estado .detalhe b { color: var(--menu-texto); font-size: 13px; font-weight: 600; }
.menu-estado .detalhe span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quem está logado: avatar com as iniciais, nome e papel, e o botão de sair. */
.menu-usuario {
  display: flex; align-items: center; gap: 11px;
  padding: 9px;
  border-radius: var(--raio);
  background: var(--menu-caixa);
  border: 1px solid var(--menu-linha);
  min-width: 0;
}
.menu-usuario .avatar {
  width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradiente-marca);
  color: var(--ouro); font-weight: 700; font-size: 14.5px; letter-spacing: .04em;
}
.menu-usuario .quem { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.menu-usuario .quem b { color: var(--menu-texto-forte); font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario .quem span { color: var(--menu-texto-fraco); font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; }
.menu-usuario .sair {
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--menu-linha);
  color: var(--menu-texto-fraco); cursor: pointer; transition: var(--transicao);
}
.menu-usuario .sair:hover { color: var(--ouro-forte); border-color: var(--borda-ouro); background: var(--tinta-ouro); }
.menu-recolhido .menu-usuario { flex-direction: column; padding: 8px 0; background: none; border: 0; }

/* Assinatura no pé do menu (FISCPRO-BRAND.md: "Júnior Moreira Contabilidade®"
   assina no rodapé, nunca dentro da logo; a tagline vai no rodapé de todas as
   telas). A versão do sistema vem junto, depois do ponto. */
.menu-assinatura {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px 4px 0;
  text-align: center;
}
.menu-assinatura .tagline { font-size: 14.5px; text-wrap: balance; }
.menu-assinatura small {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--menu-texto-fraco);
  white-space: nowrap;
}
.menu-assinatura sup { font-size: .7em; letter-spacing: 0; }
.menu-assinatura .marca-versao-numero { text-transform: none; letter-spacing: .04em; }

/* -------------------------------------------------------------- main --- */

.principal {
  display: flex;
  flex-direction: column;
  gap: var(--respiro);
  min-width: 0;
  min-height: 0;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px 0 10px;
  min-height: var(--altura-topo);
  background: var(--barra-topo);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-suave), var(--vidro-brilho);
  position: relative;
  z-index: 5;
}

/* O título da tela não encolhe: quem cede espaço é o nome do emitente, que já
   tem reticências e o nome inteiro no `title`. */
.topo > .linha-flex { flex: 0 0 auto; }
.topo .identificacao { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.topo .sobrescrito { color: var(--texto-rotulo); font-size: 11px; }
/* Título de página: o único lugar da tela de trabalho com a Cormorant (300). */
/* A Cormorant desce mais que o corpo da letra: com a linha de 1,05 e o
   `overflow: hidden` (que as reticências pedem), o "g" e o "p" perdiam a perna
   (14/10/2026). A linha cresce e a margem negativa devolve a altura do topo. */
.topo h1 {
  font-family: var(--fonte-titulo);
  font-size: 31px; font-weight: 300; line-height: 1.32; letter-spacing: 0;
  margin: -.135em 0;
  color: var(--texto-titulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* As ações do topo ficam numa linha só: quem cede espaço é o seletor de
   emitente, que já corta o nome com reticências. */
.topo .acoes { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 0 0 auto; }

/* ----------------------------------------- seletor de emitente no topo --- */

.topo-emitente { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }

/* Uma linha só: rótulo, razão social, CNPJ e ambiente. A razão social por
   extenso é o que identifica o emitente sem ambiguidade na hora de conferir
   de quem é a nota: ela é a última coisa a sumir quando a tela estreita. */
.seletor-emitente {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 0 7px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--borda-campo);
  background: var(--superficie);
  color: var(--texto); cursor: pointer; text-align: left;
  font-family: inherit;
  transition: var(--transicao);
  max-width: min(1080px, 60vw); min-width: 0;
}
.seletor-emitente:hover { border-color: var(--ouro); box-shadow: var(--sombra-suave); }
.seletor-emitente .selo {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--selo-fundo); color: var(--selo-texto);
}
.seletor-emitente .rotulo {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-rotulo);
}
.seletor-emitente .nome {
  font-size: 15px; font-weight: 500; color: var(--texto-titulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  flex: 0 1 auto;
}
.seletor-emitente .divisor { flex: 0 0 auto; width: 1px; height: 18px; background: var(--divisor); }
.seletor-emitente .documento {
  flex: 0 0 auto;
  font-family: var(--fonte-mono);
  font-size: 13.5px; color: var(--texto-suave); letter-spacing: -.2px; white-space: nowrap;
}
.seletor-emitente .ambiente {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.seletor-emitente .ambiente.producao { background: var(--tinta-sucesso); color: var(--texto-sucesso); }
.seletor-emitente .ambiente.teste    { background: var(--tinta-atencao); color: var(--texto-alerta); }
.seletor-emitente .ambiente:empty    { display: none; }
.seletor-emitente .quantos { flex: 0 0 auto; font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }
.seletor-emitente .quantos:empty { display: none; }
.seletor-emitente .seta { color: var(--texto-tenue); display: grid; place-items: center; flex: 0 0 auto; }

.seletor-emitente.incompleto { border-color: var(--borda-atencao); }
.seletor-emitente.incompleto .selo { background: var(--tinta-atencao); color: var(--amarelo); }
.seletor-emitente.incompleto .rotulo { color: var(--texto-alerta); }

.seletor-emitente.vazio { border-color: var(--borda-erro); }
.seletor-emitente.vazio .selo { background: var(--tinta-erro); color: var(--vermelho); }
.seletor-emitente.vazio .rotulo { color: var(--texto-erro); }
.seletor-emitente.vazio .divisor { display: none; }

@media (max-width: 1440px) { .seletor-emitente .quantos { display: none; } }
@media (max-width: 1600px) { .seletor-emitente .rotulo { display: none; } }
@media (max-width: 1080px) { .seletor-emitente .documento, .seletor-emitente .divisor { display: none; } }

.conteudo {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 18px 2px;
  min-height: 0;
}

.conteudo-largo { max-width: 2200px; margin: 0 auto; }
.conteudo-estreito { max-width: 1120px; margin: 0 auto; }

/* ------------------------------------------------------------- cards --- */

.cartao {
  background: var(--gradiente-cartao);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-suave), var(--vidro-brilho);
  padding: 20px 22px;
  margin-bottom: var(--respiro);
}

.cartao.compacto { padding: 14px 16px; }
.cartao.limpo { background: none; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.cartao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.cartao-cabecalho h2 { font-size: 17px; color: var(--texto-titulo); font-weight: 600; letter-spacing: .005em; }
.cartao-cabecalho .descricao { color: var(--texto-fraco); font-size: 14px; font-weight: 400; margin-top: 3px; }
.cartao-cabecalho .acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.secao-titulo {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px;
  color: var(--texto-rotulo);
  margin: 16px 0 9px;
}
.secao-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--borda-ouro), transparent); }
.secao-titulo:first-child { margin-top: 0; }

/* Seção recolhível do cadastro (`recolhida`): o título é o botão, e a seta
   gira quando abre. Fechada enquanto os campos estão vazios. */
.secao-titulo.recolhivel { cursor: pointer; user-select: none; gap: 8px; }
.secao-titulo.recolhivel svg { flex: 0 0 auto; transition: transform .15s ease; }
.secao-titulo.recolhivel.aberta svg { transform: rotate(90deg); }
.secao-titulo.recolhivel:hover { color: var(--texto-titulo); }
.secao-titulo.recolhivel:focus-visible { outline: 2px solid var(--ceu); outline-offset: 3px; border-radius: 4px; }

/* Bloco de seção: o grupo de campos com caixa própria, para que num
   formulário com quatro grupos lado a lado se veja onde um termina. */
.bloco-secao {
  border: 1px solid var(--linha-suave);
  border-radius: var(--raio);
  background: var(--recuo);
  padding: 12px 14px 14px;
  margin-bottom: 12px;
}
.bloco-secao > .secao-titulo { margin-top: 0; }
.bloco-secao:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ grades --- */

.grade { display: grid; gap: var(--respiro); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }

/* Corpo do painel: últimas notas, atalhos e certificado numa faixa só. */
.painel-corpo {
  display: grid; gap: var(--respiro); align-items: start;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr) minmax(250px, 1fr);
}
@media (max-width: 1280px) {
  .painel-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-corpo > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .painel-corpo { grid-template-columns: minmax(0, 1fr); }
  .painel-corpo > :first-child { grid-column: auto; }
}
.painel-corpo > .cartao { margin-bottom: 0; }

/* Sugestões opcionais do painel numa linha: título, um botão por sugestão e,
   no fim, o selo "tudo pronto" com o botão de verificar de novo. */
.faixa-sugestoes { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.faixa-sugestoes .titulo { display: flex; flex-direction: column; line-height: 1.3; }
.faixa-sugestoes .titulo b { font-size: 15px; font-weight: 600; color: var(--texto-titulo); }
.faixa-sugestoes .titulo span { font-size: 13px; color: var(--texto-fraco); }
.faixa-sugestoes .itens { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.faixa-sugestoes .fim { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.grade-formulario { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }

.colunas-modal {
  display: grid; gap: 0 24px; align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.colunas-modal > * { min-width: 0; }
@media (max-width: 1180px) { .colunas-modal { grid-template-columns: minmax(0, 1fr); } }

/* Cadastro em abas (cadastros.js, 05/10/2026). A barra fica parada no alto do
   corpo do modal enquanto o painel rola; os painéis ocupam a mesma célula, e só
   o ativo aparece: a altura é a do mais alto, e trocar de aba não mexe no modal. */
.abas-formulario {
  position: sticky; top: -18px; z-index: 3;
  margin: -18px -22px 16px; padding: 4px 22px 0;
  background: var(--fundo-modal-caixa);
}
/* Com o aviso de duplicação ou de modelo acima dela, a barra não sobe por cima dele. */
.abas-formulario:not(:first-child) { margin-top: 0; }
.paineis-formulario { display: grid; }
/* Painel inativo: transparente e `inert` (sem foco, sem clique, fora do leitor de tela).
   Não é `visibility`: ela é herdada, e os campos têm `transition: var(--transicao)` (todas as
   propriedades), então o campo só "aparecia" depois da transição e o foco falhava nesse meio-tempo. */
.painel-formulario { grid-area: 1 / 1; min-width: 0; opacity: 0; pointer-events: none; }
.painel-formulario.ativo { opacity: 1; pointer-events: auto; }
.aba.com-erro::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-radius: 50%; background: var(--erro); vertical-align: middle;
}

.col-1  { grid-column: span 1; }  .col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }  .col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }  .col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }  .col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }  .col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }

@media (max-width: 1180px) {
  .col-1, .col-2, .col-3 { grid-column: span 4; }
  .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
}
@media (max-width: 820px) {
  /* `*=` e não `^=`: o envoltório do campo é "campo col-N", e o seletor antigo,
     que pedia a classe COMEÇANDO por col-, nunca valia (05/10/2026). */
  .grade-formulario > [class*="col-"] { grid-column: span 12; }
}

/* ------------------------------------------------------------ campos --- */

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

/* Num contêiner flex em coluna o filho não encolhe abaixo do próprio conteúdo:
   um select com opção longa estourava a coluna. */
.campo > input,
.campo > select,
.campo > textarea,
.campo > .campo-composto,
.campo > .campo-arquivo { min-width: 0; max-width: 100%; }

.campo > label,
.rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Rótulo sempre em UMA linha: quando um quebrava, o input daquela coluna descia
   e a linha inteira do formulário saía do alinhamento. */
.campo > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo > label .obrigatorio { color: var(--ouro-forte); margin-left: 3px; }
.campo .dica { font-size: 12.5px; color: var(--texto-tenue); font-weight: 400; }

/* Interruptor e caixa de seleção encostam no rodapé da célula, na altura do
   input vizinho. */
.grade-formulario > .campo:has(> .interruptor),
.grade-formulario > .campo:has(> .caixa) {
  justify-content: flex-end;
  padding-bottom: 7px;
}

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="search"], input[type="email"], input[type="tel"],
select, textarea {
  width: 100%;
  min-height: var(--altura-controle);
  /* `background-color`, nunca o atalho `background`: o atalho reescreve também
     `background-image` e `background-repeat`, e a seta do select se multiplicava
     em ladrilho (armadilha 35 do desktop). */
  background-color: var(--superficie-2);
  border: 1px solid var(--borda-campo);
  color: var(--texto);
  border-radius: var(--raio-p);
  padding: 8px 13px;
  font-size: 15px;
  font-family: inherit;
  transition: var(--transicao);
  outline: none;
}

textarea { min-height: 70px; resize: vertical; line-height: 1.5; }
/* A de duas linhas (descrição da NFS-e) não precisa da altura mínima das outras. */
textarea[rows="2"] { min-height: 58px; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--borda-campo-h); }

input:focus, select:focus, textarea:focus {
  border-color: var(--ceu-borda);
  box-shadow: var(--anel-foco);
  background-color: var(--superficie);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: .6;
  cursor: not-allowed;
  background-color: var(--desabilitado);
}

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

input.invalido, select.invalido, textarea.invalido {
  border-color: var(--borda-erro);
  box-shadow: 0 0 0 3px var(--tinta-erro);
}
/* Validação antes de emitir (emitir.js:destacarProblemas): a linha do item, a lista de itens vazia
   e o quadro de pagamentos também se marcam, por dentro, para não alargar a grade. */
div.invalido {
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--borda-erro);
  background-color: var(--tinta-erro);
}

.campo .erro-campo { font-size: 13px; color: var(--vermelho-claro); font-weight: 500; }

/* A seta do select: SVG de fundo, cor dentro da URL, daí ser variável. */
select {
  appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image: var(--seta-select);
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select option { background-color: var(--superficie); color: var(--texto); }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
:root[data-tema="escuro"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-tema="escuro"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); }

.entrada-numero { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fonte-mono); font-size: 14px; letter-spacing: -.2px; }

/* campo com botão colado à direita: o botão herda o raio do campo */
.campo-composto { display: flex; gap: 0; min-width: 0; }
.campo-composto input, .campo-composto select {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
  flex: 1 1 auto; min-width: 0;
}
.campo-composto .botao {
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  min-height: var(--altura-controle); white-space: nowrap; flex: 0 0 auto;
}
.campo-composto .botao:not(:last-child) { border-radius: 0; border-right: 0; }
/* Texto de várias linhas com botão (a pastinha dos textos salvos da NFS-e): o botão fica
   solto, um pouco afastado da borda direita do campo, e não colado como no campo de uma
   linha, onde ele continua a borda (14/10/2026, pedido do usuário). */
.campo-composto:has(> textarea) { gap: 10px; align-items: flex-start; }
.campo-composto:has(> textarea) > textarea { flex: 1 1 auto; min-width: 0; }
.campo-composto:has(> textarea) > .botao {
  width: var(--altura-controle); padding: 0; justify-content: center;
  border-radius: var(--raio-p);
}

/* Camuflagem de endereços e caminhos: bolinhas, sem botão de revelar. */
.texto-sigiloso { display: inline-flex; align-items: center; min-width: 0; }
.texto-sigiloso .valor.mascarado { letter-spacing: 2px; color: var(--texto-fraco); user-select: none; }

/* arquivo: mesma altura de um input */
.campo-arquivo {
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie-2);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-p);
  padding: 6px 12px;
  height: var(--altura-controle);
  cursor: pointer;
  transition: var(--transicao);
}
.campo-arquivo svg { flex: 0 0 auto; color: var(--ceu); }
.campo-arquivo:hover { border-color: var(--ceu-borda); background: var(--superficie); }
.campo-arquivo .nome { font-size: 14.5px; color: var(--texto-suave); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo-arquivo .vazio { color: var(--texto-tenue); font-style: italic; }

/* interruptor */
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--texto-suave); }
.interruptor input { display: none; }
.interruptor .trilho {
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--superficie-3); border: 1px solid var(--linha);
  position: relative; transition: var(--transicao); flex: 0 0 auto;
}
.interruptor .trilho::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--superficie); box-shadow: 0 1px 3px rgba(31, 58, 66, .28);
  transition: var(--transicao);
}
.interruptor input:checked + .trilho { background: var(--interruptor-ligado); border-color: var(--interruptor-ligado); }
.interruptor input:checked + .trilho::after { left: 20px; background: var(--superficie); }

/* caixa de seleção */
.caixa { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 15px; color: var(--texto-suave); }
.caixa input[type="checkbox"], .caixa input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--ceu); cursor: pointer; margin: 0;
}

/* ------------------------------------------------------------ botões --- */

/*
 * Pílulas (raio 999 da marca). A hierarquia:
 *   .botao                 petróleo: a ação comum de uma tela;
 *   .botao.grande          o degradê da marca com fio de ouro: a ação principal
 *                          (Emitir, Entrar). Uma por tela. No escuro, branco;
 *   .botao.secundario      branco com borda gelo: a ação de apoio;
 *   .botao.contorno        só a borda, em petróleo;
 *   .botao.fantasma        sem caixa: ação de terceiro plano;
 *   .botao.perigo/.alerta  tingidos pelo estado.
 * O ouro só aparece no fio da ação principal e no hover dos botões de apoio.
 */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--altura-controle);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--botao-principal);
  color: var(--texto-sobre-acento);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .02em;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.botao:hover:not(:disabled) { background: var(--botao-principal-h); transform: translateY(-1px); box-shadow: var(--brilho-principal); }
.botao:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.botao svg { flex: 0 0 auto; }

.botao.grande { height: 48px; padding: 0 28px; font-size: 15px; }
.botao.grande:not(.secundario):not(.contorno):not(.fantasma):not(.perigo):not(.alerta):not(.petroleo) {
  background: var(--botao-destaque);
  color: var(--texto-botao-destaque);
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px var(--fio-botao-destaque);
}
.botao.grande:not(.secundario):not(.contorno):not(.fantasma):not(.perigo):not(.alerta):not(.petroleo):hover:not(:disabled) {
  background: var(--botao-destaque-h);
  box-shadow: inset 0 0 0 1px var(--ouro), var(--brilho-principal);
  transform: translateY(-1px);
}

.botao.secundario {
  background: var(--superficie);
  color: var(--texto-titulo);
  border-color: var(--borda-campo);
}
.botao.secundario:hover:not(:disabled) {
  background: var(--superficie);
  border-color: var(--ouro);
  color: var(--texto-titulo);
  box-shadow: var(--sombra-suave);
}

.botao.contorno { background: transparent; color: var(--ceu); border-color: var(--ceu-borda); }
.botao.contorno:hover:not(:disabled) { background: var(--ceu-suave); border-color: var(--ceu); box-shadow: none; }

.botao.petroleo { background: var(--botao-principal); color: var(--texto-sobre-acento); }
.botao.petroleo:hover:not(:disabled) { background: var(--botao-principal-h); }

.botao.perigo { background: var(--tinta-erro); color: var(--vermelho-claro); border-color: var(--borda-erro); }
.botao.perigo:hover:not(:disabled) { background: var(--vermelho); color: var(--texto-sobre-acento); border-color: var(--vermelho); box-shadow: none; }

.botao.alerta { background: var(--tinta-atencao); color: var(--texto-alerta); border-color: var(--borda-atencao); }
.botao.alerta:hover:not(:disabled) { background: var(--tinta-atencao); border-color: var(--atencao); box-shadow: none; }

.botao.fantasma { background: transparent; color: var(--texto-fraco); border-color: transparent; }
.botao.fantasma:hover:not(:disabled) { background: var(--ceu-suave); color: var(--texto-titulo); box-shadow: none; }

.botao.pequeno { height: 35px; padding: 0 16px; font-size: 14px; gap: 6px; }
.botao.mini { height: 31px; padding: 0 12px; font-size: 13.5px; gap: 5px; }
.botao.bloco { width: 100%; }

/* Atalho com título e descrição: duas linhas pedem forma de cartão, não pílula. */
.botao.atalho {
  height: auto; padding: 11px 15px; gap: 12px;
  justify-content: flex-start; text-align: left;
  border-radius: var(--raio);
  white-space: normal; min-width: 0;
}
.botao.atalho svg { color: var(--ceu); }
.botao.atalho b { font-weight: 500; color: var(--texto-titulo); }
.botao.atalho .atalho-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.3; min-width: 0; }
.botao.atalho .atalho-texto b { font-size: 14.5px; }
.botao.atalho .atalho-texto small { font-size: 12.5px; color: var(--texto-tenue); font-weight: 500; letter-spacing: 0; }

/* Cartões de modelo (Criar por modelo): atalhos de duas linhas em grade. */
.grade-modelos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 14px; }
.grade-modelos:last-child { margin-bottom: 0; }
.grade-modelos .botao.atalho { align-items: flex-start; height: 100%; }
.grade-modelos .botao.atalho svg { margin-top: 2px; }

/* Botão que ocupa uma célula da grade do formulário, na altura do CONTROLE do
   campo vizinho (06/10/2026: "o select e o botão Novo grupo por modelo estão
   desalinhados"). Encostado no fundo da célula ele ficava mais baixo: o campo ao
   lado tem o rótulo em cima e, embaixo, a linha do erro (vazia, mas com o
   espaçamento). Agora a célula começa com um espaço da altura do rótulo. */
.grade-formulario > .campo.campo-acao { justify-content: flex-start; }
.grade-formulario > .campo.campo-acao::before {
  content: '\00a0'; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.grade-formulario > .campo.campo-acao > .botao { width: 100%; }
.botao.icone { width: var(--altura-controle); padding: 0; }
.botao.icone.pequeno { width: 35px; }
.botao.icone.mini { width: 31px; }

/* Botões de ícone de tabela e de apoio: círculo branco com borda gelo, e o
   ouro no hover. */
.botao.icone.secundario:hover:not(:disabled) { border-color: var(--ouro); color: var(--ouro-texto); }

.botao.carregando { position: relative; color: transparent !important; pointer-events: none; }
.botao.carregando::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--texto-sobre-acento);
  border-radius: 50%; animation: girar .7s linear infinite;
}
.botao.secundario.carregando::after, .botao.contorno.carregando::after, .botao.fantasma.carregando::after {
  border-color: var(--ceu-suave); border-top-color: var(--ceu);
}
.botao.grande.carregando::after { border-color: var(--fio-botao-destaque); border-top-color: var(--texto-botao-destaque); }

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

/* Trilho gelo e o segmento ativo em branco: num cartão branco, um trilho branco
   sumiria. */
.grupo-botoes {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--recuo);
}
.grupo-botoes .botao {
  border: 0; background: transparent; color: var(--texto-fraco); font-weight: 500;
  height: calc(var(--altura-controle) - 8px);
}
.grupo-botoes .botao:hover:not(:disabled) { transform: none; background: var(--ceu-suave); color: var(--texto-titulo); box-shadow: none; }
/* Segmento ativo: uma pastilha branca que sobe do trilho, não um bloco escuro. */
.grupo-botoes .botao.ativo { background: var(--superficie); color: var(--texto-titulo); box-shadow: var(--sombra-suave); }

.barra-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha-suave); }
.barra-acoes.sem-linha { border-top: 0; padding-top: 0; }
.barra-acoes .espacador { flex: 1; }
/* Barra do CSC (painel/configuracao-emitente.js): a UF das URLs, o botão e o recado, na
   mesma linha do "Salvar", com o rótulo ao lado do seletor. */
.barra-urls-uf .campo-em-linha { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.barra-urls-uf .campo-em-linha label { margin: 0; white-space: nowrap; }
.barra-urls-uf .campo-em-linha select { width: 104px; }
.barra-urls-uf .espacador .dica { margin: 0; font-size: 13px; line-height: 1.4; }

/* Ações de uma linha de tabela: sempre lado a lado, sem quebrar. */
.acoes-linha { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: nowrap; }

/* ---------------------------------------------------------- tabelas --- */

.tabela-envolucro {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: auto;
  max-height: calc(100vh - 250px);
  background: var(--superficie-2);
}

.tabela-envolucro.densa { max-height: none; }
.tabela-envolucro.densa table.tabela th { padding: 9px 13px; }
.tabela-envolucro.densa table.tabela td { padding: 8px 13px; }

/* Tabela que nunca rola para o lado: layout fixo, texto quebra na célula. */
.tabela-envolucro.sem-rolagem-x { overflow-x: hidden; }
.tabela-envolucro.sem-rolagem-x table.tabela { table-layout: fixed; }
.tabela-envolucro.sem-rolagem-x table.tabela th { white-space: normal; }
.tabela-envolucro.sem-rolagem-x table.tabela td { overflow-wrap: anywhere; }
.tabela-envolucro.sem-rolagem-x table.tabela td.acoes { overflow-wrap: normal; }

/* 14 px: a Century Gothic é larga, e nesse tamanho já rende o mesmo que o
   texto corrido; mais que isso aperta as colunas de largura fixa. */
table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }

table.tabela th {
  position: sticky; top: 0; z-index: 2;
  text-align: left;
  padding: 11px 12px;
  background: var(--cabecalho-tabela);
  border-bottom: 1px solid var(--linha-forte);
  color: var(--texto-fraco);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
}
table.tabela th.ordenavel { cursor: pointer; user-select: none; }
table.tabela th.ordenavel:hover { color: var(--ceu); }

table.tabela td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha-suave);
  vertical-align: middle;
  color: var(--texto-suave);
}
table.tabela tbody tr { transition: background .1s; }
table.tabela tbody tr:hover td { background: var(--ceu-suave); }
table.tabela tbody tr:last-child td { border-bottom: 0; }
table.tabela tbody tr.selecionada td { background: var(--tinta-ouro); }

table.tabela td.numero, table.tabela th.numero { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela td.centro, table.tabela th.centro { text-align: center; }
table.tabela td.acoes { text-align: right; white-space: nowrap; }
table.tabela td.acoes > * + * { margin-left: 5px; }
table.tabela td strong { color: var(--texto-titulo); font-weight: 500; }

.tabela-vazia { padding: 36px 18px; text-align: center; color: var(--texto-tenue); }
.tabela-vazia svg { opacity: .4; margin-bottom: 12px; color: var(--ceu); }
.tabela-vazia p { margin: 0 0 4px; font-size: 17px; color: var(--texto-titulo); font-weight: 600; }
.tabela-vazia span { font-size: 14px; }
/* Lista vazia dentro de um cartão que divide a tela com outros (pagamentos da
   nota): o recado cabe em duas linhas, sem a altura de uma tela vazia. */
.tabela-vazia.compacta { padding: 14px 18px; }
.tabela-vazia.compacta p { font-size: 15.5px; }

.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--texto-fraco);
}
.paginacao .controles { display: flex; gap: 6px; align-items: center; }

/* ------------------------------------------------------ tela de lista --- */

/* Tela de lista: quem rola é a lista, não a página. A tela marcada com
   `.tela-cheia` ocupa a altura da área de trabalho; abas, filtros e métricas
   ficam com a altura deles, e a tabela marcada com `.preenche` (a opção
   `preencher` de `ui.tabela`) fica com o que sobra, com a barra de rolagem
   dentro dela e o cabeçalho parado.

   Cada elemento entre a tela e a tabela vira coluna flexível que pode ceder
   altura: é o `:has()` que acha essa cadeia, qualquer que seja a
   profundidade (cartão, aba, área da lista). Só conta a tabela visível: numa
   aba de formulário a tela volta a ser uma página comum, que rola inteira.

   O piso de altura existe para a janela baixa: abaixo dele a página volta a
   rolar, em vez de espremer a lista até sumir. */
.tela-cheia:has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 24rem;
}
.tela-cheia:has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) > * { flex: 0 0 auto; }
.tela-cheia:has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) > :last-child { margin-bottom: 0; }
/* A cadeia CRESCE até o fim da área (14/10/2026, pedido do usuário: "se o conteúdo
   estiver próximo da altura da tela, que complete para ficar no mesmo nível do
   menu"): com poucas linhas, o cartão da lista vai até a linha do menu, e as
   linhas ficam no alto dele. Com muitas, ela cede e a lista rola por dentro. */
.tela-cheia :has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* Só a cadeia cede altura. Os irmãos dela (cabeçalho do cartão, barra de
   abas, paginação) ficam com a altura deles: a barra de abas rola para o lado
   e, sem isto, encolheria até sumir. */
.tela-cheia :has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *))
  > :not(:has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)), .tabela-envolucro.preenche) { flex-shrink: 0; }
/* Grade no caminho (o painel, as duas colunas do Faturamento e Simples):
   continua grade, com a linha cedendo altura. */
.tela-cheia :is(.grade, .painel-corpo):has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
}
.tela-cheia :is(.grade, .painel-corpo) > :has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) { align-self: stretch; max-height: 100%; }
.tela-cheia .tabela-envolucro.preenche { max-height: none; min-height: 120px; flex: 1 1 auto; }

/* Celular e janela muito baixa: a página rola, e a tabela tem teto. */
@media (max-width: 900px), (max-height: 620px) {
  .tela-cheia:has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)),
  .tela-cheia :has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) {
    display: block;
    height: auto;
    min-height: 0;
  }
  .tela-cheia :is(.grade, .painel-corpo):has(.tabela-envolucro.preenche:not([hidden] *, .painel-aba:not(.ativo) *)) { display: grid; }
  .tela-cheia .tabela-envolucro.preenche { max-height: 75vh; min-height: 0; }
}

/* --------------------------------------- telas que terminam no menu --- */

/* O fim da tela na linha do fim do menu (14/10/2026, pedido do usuário: "as telas
   que estão bem próximas de completar a altura, complete para que a altura total
   seja equivalente ao menu"). A área de trabalho desce até a borda da janela e
   usa o respiro como recuo: o que termina no fim dela termina na mesma linha do
   menu, e a sombra do cartão cabe no recuo, como a do menu. Antes sobravam 18 px
   (o recuo antigo), e a tela cheia ficava mais curta que o menu.

   Na emissão, a aba ativa cresce até a barra de ações encostar no fim: o último
   cartão (ou a caixa de itens) fica com a altura que sobra, e a barra do Emitir
   não sobe e desce ao trocar de aba. É altura MÍNIMA: aba mais alta que a tela
   continua rolando como antes. Cartão não vira flex (a grade de campos dentro
   dele esticaria as linhas). */
@media (min-width: 901px) and (min-height: 621px) {
  .conteudo { margin-bottom: calc(-1 * var(--respiro)); padding-bottom: var(--respiro); }
  .tela-emissao { display: flex; flex-direction: column; min-height: 100%; }
  .tela-emissao > * { flex: 0 0 auto; }
  .tela-emissao > .abas-emissao { flex: 1 0 auto; display: flex; flex-direction: column; }
  .tela-emissao > .abas-emissao > :last-child { flex: 1 0 auto; display: flex; flex-direction: column; }
  .tela-emissao > .abas-emissao .painel-aba.ativo { flex: 1 0 auto; display: flex; flex-direction: column; }
  .tela-emissao > .abas-emissao .painel-aba.ativo > :last-child { flex: 1 0 auto; }
  .tela-emissao > .abas-emissao .painel-aba.ativo > :last-child:not(.cartao) { display: flex; flex-direction: column; }
  .tela-emissao > .abas-emissao .painel-aba.ativo > :last-child:not(.cartao) > :last-child { flex: 1 0 auto; }
}

/* ----------------------------------------------------------- pílulas --- */

.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.pilula::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pilula.sem-ponto::before { display: none; }

.pilula.sucesso  { background: var(--tinta-sucesso); color: var(--texto-sucesso); border-color: var(--borda-sucesso); }
.pilula.aviso    { background: var(--tinta-atencao); color: var(--texto-alerta);  border-color: var(--borda-atencao); }
/* `aviso` é também a caixa de recado das telas (`.aviso`, mais abaixo), que vem
   depois no arquivo e, com a mesma especificidade, trocava a pílula por um
   bloco: display flex, recuo de caixa, margem embaixo e cantos de cartão. A
   pílula amarela ("Incerto", "Assinado", "sem valor") saía esticada e dobrava a
   altura da linha da tabela. Repetir o desenho da pílula com as duas classes é
   o que a mantém pílula (armadilha 65 do desktop). */
.pilula.aviso {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; margin: 0; border-radius: 999px;
  font-size: 13px; line-height: normal;
}
.pilula.erro     { background: var(--tinta-erro);    color: var(--texto-erro);    border-color: var(--borda-erro); }
.pilula.neutra   { background: var(--linha-suave);   color: var(--texto-fraco);   border-color: var(--linha); }
.pilula.info     { background: var(--tinta-info);    color: var(--texto-info);    border-color: var(--borda-info); }
.pilula.destaque { background: var(--tinta-ouro);    color: var(--ouro-texto);    border-color: var(--borda-ouro); }
.pilula.roxa     { background: var(--tinta-roxo);    color: var(--roxo);          border-color: var(--borda-roxo); }

/* ---------------------------------------------------------- métricas --- */

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: var(--respiro); margin-bottom: var(--respiro); }

.metrica {
  background: var(--gradiente-metrica);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-suave), var(--vidro-brilho);
  padding: 15px 16px 16px;
  position: relative;
  overflow: hidden;
  transition: var(--transicao);
  display: flex; flex-direction: column;
}
/* Filete no pé do cartão, em vez da barra lateral: é a mesma "barra de marca". */
.metrica::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--ceu), transparent);
  opacity: .55;
}
.metrica:hover { transform: translateY(-2px); box-shadow: var(--sombra), var(--vidro-brilho); }
/* Grade e não flex: o texto quebra AO LADO do ícone, em vez de descer inteiro
   para a linha de baixo; o detalhe entre parênteses ocupa a linha toda. */
.metrica .rotulo-metrica {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2px 7px;
  color: var(--texto-fraco); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.metrica .rotulo-metrica .detalhe-rotulo { grid-column: 1 / -1; text-transform: none; letter-spacing: 0; font-weight: 500; white-space: nowrap; }
.metrica .rotulo-metrica > svg { margin-top: 1px; }
/* O valor encosta na base: a grade estica os cartões até a mesma altura, e é
   isso que alinha os valores quando um rótulo tem duas linhas. */
.metrica .valor {
  display: block; margin-top: auto; padding-top: 4px;
  font-size: 25px; font-weight: 500; color: var(--texto-titulo);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; line-height: 1.2;
}
.metrica .complemento { font-size: 13.5px; color: var(--texto-fraco); margin-top: 3px; }
.metrica.petroleo::after { background: linear-gradient(90deg, var(--petroleo), transparent); }
.metrica.alerta::after { background: linear-gradient(90deg, var(--atencao), transparent); opacity: .8; }
.metrica.perigo::after { background: linear-gradient(90deg, var(--vermelho), transparent); opacity: .8; }
/* O cartão que importa mais que os vizinhos (o valor das autorizadas): um
   pedaço do ícone da marca, petróleo em degradê com o globo de ouro recortado
   no canto e o fio de ouro no pé. É o único cartão escuro da faixa. O globo
   fica atrás do texto (`isolation` + z-index negativo). */
.metrica.destaque { background: var(--gradiente-metrica-destaque); border-color: var(--linha-metrica-destaque); isolation: isolate; }
.metrica.destaque::before {
  content: ""; position: absolute; z-index: -1;
  top: -46%; right: -24%; width: 82%; aspect-ratio: 1;
  background: url("../imagens/marca/globo-ouro.png") center / contain no-repeat;
  opacity: .32; pointer-events: none;
}
.metrica.destaque::after { background: linear-gradient(90deg, var(--ouro), transparent); opacity: 1; }
.metrica.destaque .rotulo-metrica { color: var(--rotulo-metrica-destaque); }
.metrica.destaque .valor { color: var(--valor-metrica-destaque); }
.metrica.destaque .complemento { color: var(--complemento-metrica-destaque); }

/* Caixa do código para as operações críticas (ponte.js e o painel). */
.confirmacao-critica { display: flex; flex-direction: column; gap: 12px; }
.confirmacao-critica p { margin: 0; }
/* O formulário da senha (usuário escondido para o gerenciador de senhas) não entra no desenho. */
.confirmacao-critica .formulario-confirmacao { display: contents; }
.confirmacao-critica .campo-confirmacao {
  width: 100%; height: 56px; text-align: center;
  font-size: 26px; letter-spacing: .32em; font-variant-numeric: tabular-nums;
}
/* Com o segundo fator desligado a caixa pede a senha: letra normal. */
.confirmacao-critica .campo-confirmacao.senha { font-size: 18px; letter-spacing: .06em; }

/* ------------------------------------------------------------ avisos --- */

.aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px; border-radius: var(--raio);
  border: 1px solid transparent; font-size: 14.5px; line-height: 1.5;
  margin-bottom: 10px;
}
.aviso svg { flex: 0 0 auto; margin-top: 1px; }
.aviso .corpo { flex: 1; min-width: 0; }
.aviso b { display: block; margin-bottom: 2px; font-weight: 600; }
.aviso .acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.aviso.sucesso { background: var(--tinta-sucesso); border-color: var(--borda-sucesso); color: var(--texto-sucesso); }
.aviso.erro    { background: var(--tinta-erro);    border-color: var(--borda-erro);    color: var(--texto-erro); }
.aviso.alerta  { background: var(--tinta-atencao); border-color: var(--borda-atencao); color: var(--texto-alerta); }
.aviso.info    { background: var(--tinta-info);    border-color: var(--borda-info);    color: var(--texto-info); }
.aviso.neutro  { background: var(--vidro);         border-color: var(--linha);         color: var(--texto-suave); }

/* Aviso de uma linha: texto e botão lado a lado, para recado curto que não
   merece três linhas de altura no topo da tela. */
.aviso.em-linha { align-items: center; }
.aviso.em-linha .corpo { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.aviso.em-linha b { display: inline; margin: 0; }
.aviso.em-linha .acoes { margin: 0 0 0 auto; }

/* O motivo da tentativa anterior no topo da reemissão: uma linha, cortada, que
   abre com um clique (14/10/2026, para a emissão não rolar por causa dele). */
.aviso.motivo-anterior { padding: 4px 6px 4px 12px; gap: 10px; margin-bottom: 4px; line-height: 1.4; }
.aviso.motivo-anterior .corpo { flex-wrap: nowrap; gap: 12px; }
.aviso.motivo-anterior b { flex: 0 0 auto; white-space: nowrap; }
.aviso.motivo-anterior .motivo {
  flex: 1 1 auto; min-width: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aviso.motivo-anterior.aberto .motivo { white-space: normal; overflow-wrap: anywhere; cursor: text; }
.aviso.motivo-anterior > .botao { flex: 0 0 auto; }
@media (max-width: 900px) {
  .aviso.motivo-anterior .corpo { flex-wrap: wrap; gap: 2px 12px; }
  .aviso.motivo-anterior b { white-space: normal; }
}

/* Pares rótulo e valor em grade, lado a lado enquanto couberem. */
.pares {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--linha-suave);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
}
.pares .par { background: var(--superficie-2); padding: 9px 12px; min-width: 0; }
.pares .par span { display: block; font-size: 12.5px; color: var(--texto-fraco); }
.pares .par b { display: block; font-weight: 500; font-size: 14px; color: var(--texto-titulo); overflow-wrap: anywhere; }
.pares .par .pilula { margin: 5px 0 3px; }
.pares .par .detalhe { font-size: 13px; color: var(--texto-fraco); }

/* Cartões lado a lado nas telas de configuração: em tela larga, uma pilha de
   cartões da largura toda deixa metade da tela vazia e manda o resto para
   baixo da dobra. `.coluna` agrupa cartões que devem ficar um sob o outro. */
.colunas-cartoes {
  display: grid; gap: var(--respiro); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  margin-bottom: var(--respiro);
}
.colunas-cartoes > .cartao, .colunas-cartoes > .coluna > .cartao { margin-bottom: 0; }
.colunas-cartoes > .coluna { display: flex; flex-direction: column; gap: var(--respiro); min-width: 0; }
@media (max-width: 1100px) { .colunas-cartoes { grid-template-columns: minmax(0, 1fr); } }

/* Pílula de estado que reaproveita o nome de uma caixa de recado
   (`pilula aviso`, `pilula sucesso`...): a caixa vem depois no arquivo e trazia
   recuo, margem e alinhamento de bloco para dentro da pílula. */
.pilula.aviso, .pilula.sucesso, .pilula.erro, .pilula.info, .pilula.alerta {
  display: inline-flex; align-items: center;
  padding: 3px 10px; margin: 0;
  border-radius: 999px; font-size: 13px; line-height: 1.35;
}

/* ------------------------------------------------------------- abas --- */

/* A linha de baixo é uma sombra INTERNA, e o sublinhado da aba ativa fica
   dentro da caixa. Antes era borda da barra com a aba descendo 1 px por cima
   dela (margem negativa): com `overflow-x: auto` o eixo vertical também vira
   rolável, e esse 1 px acendia uma barra de rolagem vertical na linha das abas
   de todas as telas (pedido do usuário, 05/10/2026). A barra continua rolando
   para o lado quando as abas não cabem, sem barra visível. */
.abas {
  display: flex; gap: 4px;
  box-shadow: inset 0 -1px 0 var(--linha);
  margin-bottom: 12px; padding-bottom: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; width: 0; height: 0; }
.aba {
  padding: 10px 16px 12px;
  border: 0; background: none;
  color: var(--texto-fraco);
  font-size: 15px; font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: var(--transicao);
  display: inline-flex; align-items: center; gap: 8px;
}
.aba:hover { color: var(--texto-titulo); }
.aba.ativa { color: var(--texto-titulo); border-bottom-color: var(--ceu); font-weight: 600; }
.aba .contador {
  background: var(--superficie-3); color: var(--texto-fraco);
  border-radius: 999px; padding: 1px 8px; font-size: 12.5px; font-weight: 600;
}
.aba.ativa .contador { background: var(--ceu-suave); color: var(--ceu); }

.painel-aba { display: none; }
.painel-aba.ativo { display: block; animation: aparecer .2s ease; }

@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ modais --- */

.modal-fundo {
  position: fixed; inset: 0; z-index: 900;
  background: var(--fundo-modal);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity .18s;
}
.modal-fundo.visivel { opacity: 1; }

.modal {
  background: var(--fundo-modal-caixa);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra), var(--vidro-brilho);
  width: min(560px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  transform: translateY(14px) scale(.985);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
  overflow: hidden;
}
.modal-fundo.visivel .modal { transform: none; }

.modal.medio  { width: min(880px, 100%); }
.modal.largo  { width: min(1240px, 94vw); }
.modal.enorme { width: min(1480px, 96vw); }
.modal.maximo { width: min(1720px, 96vw); }
/* 85% da tela nos dois sentidos (pedido do usuário, 06/10/2026, no "Novo usuário"
   do painel): formulário com campo e lista que precisam de folga. O corpo vira
   coluna, para o conteúdo poder ocupar a altura que sobra. */
.modal.amplo { width: 85vw; height: 85vh; max-height: 85vh; }
.modal.amplo .modal-corpo { display: flex; flex-direction: column; }
/* Textos salvos da NFS-e (emitir.js:abrirTextosSalvos), na caixa ampla: a lista fica com a
   altura que sobra e rola por dentro, e cada texto aparece inteiro (14/10/2026). */
.corpo-textos-salvos { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.lista-textos-salvos { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.lista-textos-salvos > .tabela-envolucro { flex: 1 1 auto; min-height: 0; max-height: none; }
.texto-salvo-integral {
  margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--texto-suave);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Detalhes da nota (notas.js:abrirDetalhes): duas colunas para caber na altura
   da janela sem rolar. À esquerda o que se lê, à direita o que se faz. */
.detalhe-nota {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}
.detalhe-nota-principal > .aviso:first-child { margin-bottom: 14px; }
.detalhe-nota-lateral {
  padding-left: 26px;
  border-left: 1px solid var(--linha-suave);
}
.detalhe-nota-dados {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
  margin-bottom: 4px;
}
.detalhe-nota-dados > .largo { grid-column: span 2; }
.detalhe-nota-dados .valor {
  font-weight: 600; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Botões da coluna direita em grade: alinhados, do mesmo tamanho, sem a fila
   torta que o flex deixava quando quebrava a linha. */
.detalhe-nota-botoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 8px;
}
.detalhe-nota-botoes > .botao,
.detalhe-nota-botoes > select { width: 100%; justify-content: center; }
.detalhe-nota-botoes > select { grid-column: span 2; }
@media (max-width: 1100px) {
  .detalhe-nota { grid-template-columns: minmax(0, 1fr); }
  .detalhe-nota-lateral { padding-left: 0; border-left: 0; margin-top: 6px; }
  .detalhe-nota-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Todo modal que carrega lista usa este tamanho, com altura fixa: reconhecer o
   formato vale mais do que apertar cada caixa ao conteúdo. */
.modal.busca,
.modal.gigante {
  width: min(1240px, 94vw);
  height: min(880px, 90vh);
  max-height: 90vh;
}

/* ------------------------------------------- seletor de tabela pública --- */

.seletor-tabela,
.corpo-busca { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.seletor-tabela .barra,
.corpo-busca .barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seletor-tabela .barra .busca-envolucro,
.corpo-busca .barra .busca-envolucro { flex: 1 1 260px; }

.corpo-busca .lista-busca {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--linha-suave); border-radius: var(--raio);
  background: var(--superficie-2);
}
.seletor-tabela .situacao {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--texto-fraco); min-height: 20px;
}
.seletor-tabela .situacao .ponto-carregando {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ceu);
  animation: pulsar-ponto 1s ease-in-out infinite;
}
@keyframes pulsar-ponto { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.seletor-tabela .resultado {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--linha-suave); border-radius: var(--raio);
  background: var(--superficie-2);
}
.linha-resultado {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--linha-suave);
  transition: background .12s;
}
.seletor-tabela .linha-resultado { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.linha-resultado:last-child { border-bottom: 0; }
.linha-resultado:hover,
.linha-resultado.destacada { background: var(--ceu-suave); }
.linha-resultado .codigo {
  font-family: var(--fonte-mono);
  font-weight: 600; color: var(--ceu); font-size: 14px; white-space: nowrap;
}
.linha-resultado .texto { color: var(--texto-suave); font-size: 14px; line-height: 1.45; }
.seletor-tabela .carregando-tabela,
.corpo-busca .carregando-tabela {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 20px; color: var(--texto-fraco); text-align: center;
}

.modal-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--linha-suave);
}
/* Título de caixa: Century Gothic em negrito (a Cormorant é só do título de
   página e da tagline). */
.modal-cabecalho h3 {
  font-size: 19px; line-height: 1.25; color: var(--texto-titulo); font-weight: 700; letter-spacing: -.005em;
}
.modal-cabecalho .descricao { color: var(--texto-fraco); font-size: 14px; margin-top: 4px; font-weight: 400; }
.modal-fechar {
  border: 1px solid var(--linha); background: var(--vidro-forte); color: var(--texto-fraco); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  transition: var(--transicao); flex: 0 0 auto;
}
.modal-fechar:hover { border-color: var(--ouro); color: var(--texto-titulo); }

/* `overflow-x: hidden`: nenhum formulário tem conteúdo à direita para rolar. */
.modal-corpo { padding: 18px 22px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
.modal-corpo p { margin: 0 0 12px; color: var(--texto-suave); line-height: 1.6; }
.modal-corpo p:last-child { margin-bottom: 0; }

.modal-rodape {
  display: flex; gap: 9px; justify-content: flex-end; align-items: center;
  padding: 14px 22px 16px; border-top: 1px solid var(--linha-suave); flex-wrap: wrap;
  background: var(--recuo);
}
.modal-rodape .espacador { flex: 1; }

.modal-icone {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 auto; margin-bottom: 14px;
}
.modal-icone.pergunta { background: var(--tinta-info);    color: var(--ceu); }
.modal-icone.perigo   { background: var(--tinta-erro);    color: var(--vermelho); }
.modal-icone.alerta   { background: var(--tinta-atencao); color: var(--atencao); }
.modal-icone.sucesso  { background: var(--tinta-sucesso); color: var(--sucesso); }
.modal-icone.info     { background: var(--selo-fundo);    color: var(--selo-texto); }

/* ------------------------------------------------------------ toasts --- */

.avisos-flutuantes {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000;
  display: flex; flex-direction: column; gap: 9px; max-width: 400px;
  pointer-events: none;
}

.toast {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: var(--raio);
  background: var(--fundo-toast);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra);
  font-size: 14.5px; color: var(--texto-suave);
  opacity: 0; transform: translateX(16px);
  transition: opacity .2s, transform .2s;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.toast::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ceu); }
.toast.visivel { opacity: 1; transform: none; }
.toast svg { flex: 0 0 auto; margin-top: 1px; }
.toast .corpo { flex: 1; min-width: 0; }
.toast b { display: block; color: var(--texto-titulo); font-weight: 600; margin-bottom: 2px; }
.toast .fechar { border: 0; background: none; color: var(--texto-tenue); cursor: pointer; padding: 0 2px; font-size: 16.5px; line-height: 1; }
.toast .fechar:hover { color: var(--texto); }
.toast .copiar { border: 0; background: none; color: var(--texto-tenue); cursor: pointer; padding: 0 2px; line-height: 1; display: flex; align-items: center; }
.toast .copiar:hover { color: var(--texto); }
.toast .copiar svg { color: inherit; margin-top: 0; }

.toast.sucesso::before { background: var(--sucesso); }
.toast.sucesso svg { color: var(--sucesso); }
.toast.erro::before { background: var(--vermelho); }
.toast.erro svg { color: var(--vermelho); }
.toast.alerta::before { background: var(--atencao); }
.toast.alerta svg { color: var(--atencao); }
.toast.info::before { background: var(--ceu); }
.toast.info svg { color: var(--ceu); }

/* --------------------------------------------------------- carregando --- */

.carregando-tela {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 70px 20px; color: var(--texto-fraco);
}
.rodinha {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--superficie-3); border-top-color: var(--ceu);
  animation: girar .8s linear infinite;
}
.rodinha.pequena { width: 16px; height: 16px; border-width: 2px; }

.cobertura-carregando {
  position: fixed; inset: 0; z-index: 950;
  background: var(--fundo-cobertura); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.cobertura-carregando p { color: var(--texto-suave); font-size: 15.5px; font-weight: 500; margin: 0; }

/* ----------------------------------------------------------- diversos --- */

.linha-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha-flex.entre { justify-content: space-between; }
.linha-flex.fim { justify-content: flex-end; }
.espacador { flex: 1; }

.texto-fraco { color: var(--texto-fraco); }
.texto-tenue { color: var(--texto-tenue); }
.texto-verde { color: var(--sucesso); }
.texto-vermelho { color: var(--vermelho-claro); }
.texto-amarelo { color: var(--texto-alerta); }
.texto-pequeno { font-size: 13.5px; }
.texto-menor { font-size: 12.5px; }
.texto-forte { font-weight: 600; }
.texto-direita { text-align: right; }
.texto-centro { text-align: center; }
.quebra { word-break: break-all; }
.sem-margem { margin: 0 !important; }
.oculto { display: none !important; }

/* Alíquotas do Simples (API do JMC Pro) ------------------------------ */

/* A competência entre as duas setas tem a altura dos botões, para a linha não pular. */
.rotulo-competencia {
  min-width: 84px; height: var(--altura-controle);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--texto);
  white-space: nowrap;
}
/* "Alterado à mão" na NFS-e: `.campo .dica` tem duas classes e venceria a cor. */
.campo .dica.texto-amarelo { color: var(--texto-alerta); }
/* Campo dentro de tabela densa: a altura cheia de formulário dobraria a linha. */
.tabela-envolucro.densa table.tabela td input[type="text"] { min-height: 32px; height: 32px; padding-top: 0; padding-bottom: 0; }

.resumo-simples { margin-bottom: var(--respiro); }
.resumo-simples .par b, .lado-simples .pares .par b { font-variant-numeric: tabular-nums; }
.lado-simples .pares .par b { font-size: 16px; font-weight: 600; }
.lado-simples h3 { margin: 0 0 10px; }
/* A repartição de cada lado, logo abaixo dos números da nota. */
.reparticao-simples { margin-top: 12px; }
.reparticao-simples .rotulo-secao {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-rotulo); margin-bottom: 6px;
}
.reparticao-simples .tabela-envolucro.densa table.tabela th { padding: 6px 12px; }
.reparticao-simples .tabela-envolucro.densa table.tabela td { padding: 5px 12px; font-variant-numeric: tabular-nums; }
.reparticao-simples table.tabela td:first-child { color: var(--texto-fraco); white-space: nowrap; }
.reparticao-simples table.tabela :is(th, td).total { border-left: 1px solid var(--linha); }

.separador { height: 1px; background: var(--linha-suave); margin: 18px 0; border: 0; }

.chave-acesso {
  font-family: var(--fonte-mono);
  font-size: 13.5px; letter-spacing: .4px; word-break: break-all;
  color: var(--texto-suave); background: var(--superficie-2);
  border: 1px solid var(--linha); border-radius: 8px; padding: 6px 10px;
  display: inline-block;
}

.bloco-codigo {
  background: var(--fundo-codigo); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 13px 15px;
  font-family: var(--fonte-mono); font-size: 13.5px;
  color: var(--texto-suave); overflow: auto; max-height: 420px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.55;
}

.dica-flutuante { position: relative; }
.dica-flutuante::after {
  content: attr(data-dica);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--fundo-dica); color: var(--texto-dica);
  padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 40; box-shadow: var(--sombra-suave);
}
.dica-flutuante:hover::after { opacity: 1; }

/* Na barra de topo não há espaço acima: a dica abre para baixo, pela direita. */
.topo .dica-flutuante::after,
.dica-flutuante.abaixo::after {
  top: calc(100% + 8px);
  bottom: auto;
  left: auto;
  right: 0;
  transform: none;
}

/* Dentro de tabela a dica é desenhada por ui.js num elemento do body. */
.tabela-envolucro .dica-flutuante::after { content: none; }
.dica-tabela {
  position: fixed; left: 0; top: 0; z-index: 1000;
  max-width: min(360px, calc(100vw - 12px));
  background: var(--fundo-dica); color: var(--texto-dica);
  padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1.35;
  opacity: 0; pointer-events: none; transition: opacity .12s;
  box-shadow: var(--sombra-suave);
}
.dica-tabela.visivel { opacity: 1; }

.barra-filtros {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 12px;
}
.barra-filtros .campo { min-width: 128px; }
.barra-filtros .campo.busca { flex: 1; min-width: 200px; }
/* Na barra de filtros todo controle tem a mesma altura e o mesmo pé (13/10/2026,
   pedido do usuário: "os filtros e botões não estão alinhados"): a linha vazia de
   erro do `ui.campo` subia as datas e os seletores 6 px acima da busca e dos
   botões, e a data tinha 2 px a mais. */
.barra-filtros .campo > .erro-campo:empty { display: none; }
.barra-filtros .campo > input, .barra-filtros .campo > select { height: var(--altura-controle); }

.busca-envolucro { position: relative; }
.busca-envolucro svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); pointer-events: none; }
.busca-envolucro input { padding-left: 38px; border-radius: 999px; }

/* lista de seleção rápida (autocompletar) */
.sugestoes {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--fundo-modal-caixa); backdrop-filter: var(--vidro-desfoque); -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda); border-radius: var(--raio);
  box-shadow: var(--sombra); max-height: 280px; overflow-y: auto;
}
.sugestoes .item { padding: 9px 13px; cursor: pointer; font-size: 14.5px; border-bottom: 1px solid var(--linha-suave); }
.sugestoes .item:last-child { border-bottom: 0; }
.sugestoes .item:hover, .sugestoes .item.destacado { background: var(--ceu-suave); }
.sugestoes .item b { display: block; color: var(--texto-titulo); font-weight: 500; }
.sugestoes .item span { font-size: 13px; color: var(--texto-tenue); }

.relativo { position: relative; }

/* passos do assistente */
.passos { display: flex; align-items: center; gap: 0; margin-bottom: 26px; }
.passo { display: flex; align-items: center; gap: 10px; flex: 1; }
.passo .bolha {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vidro-forte); border: 1px solid var(--linha);
  color: var(--texto-tenue); font-weight: 600; font-size: 14.5px;
}
.passo .rotulo-passo { font-size: 14px; color: var(--texto-tenue); font-weight: 500; }
.passo .conector { flex: 1; height: 1px; background: var(--linha); margin: 0 12px; }
.passo.ativo .bolha { background: var(--gradiente-marca); border-color: var(--fio-botao-destaque); color: var(--texto-sobre-acento); }
.passo.ativo .rotulo-passo { color: var(--texto-titulo); }
.passo.concluido .bolha { background: var(--selo-fundo); border-color: var(--ceu-borda); color: var(--selo-texto); }
.passo.concluido .rotulo-passo { color: var(--texto-suave); }

/* --------------------------------------------------- página de ajuda --- */

/* A Ajuda ocupa a altura da área de trabalho: o índice fica parado e só a
   coluna do texto rola. Em tela estreita, índice em cima e a página rola. */
.ajuda-layout {
  display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 20px; align-items: start; height: 100%;
}
.ajuda-rolagem { height: 100%; overflow-y: auto; padding-right: 10px; }
@media (max-width: 1080px) {
  .ajuda-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .ajuda-layout > * { min-width: 0; }
  .ajuda-rolagem { height: auto; overflow: visible; padding-right: 0; }
}

.ajuda-indice {
  background: var(--vidro); backdrop-filter: var(--vidro-desfoque); -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-cartao); padding: 14px;
  max-height: 100%; overflow-y: auto;
  box-shadow: var(--sombra-suave);
}
.ajuda-indice a {
  display: block; padding: 7px 10px; border-radius: 9px;
  color: var(--texto-fraco); font-size: 14px; font-weight: 500;
  border-left: 2px solid transparent;
}
.ajuda-indice a:hover { background: var(--ceu-suave); color: var(--texto-titulo); text-decoration: none; }
.ajuda-indice a.ativo { color: var(--texto-titulo); border-left-color: var(--ouro); background: var(--menu-ativo); }
.ajuda-indice .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--texto-rotulo); font-weight: 600; padding: 14px 10px 5px; }
.ajuda-indice .grupo:first-child { padding-top: 2px; }

.ajuda-texto { max-width: 980px; }
.ajuda-texto h2 {
  font-family: var(--fonte-titulo);
  font-size: 34px; font-weight: 300; color: var(--texto-titulo); margin: 36px 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--linha);
  scroll-margin-top: 20px;
}
.ajuda-texto h2:first-child { margin-top: 0; }
.ajuda-texto h3 { font-size: 17px; font-weight: 600; color: var(--petroleo-medio); margin: 24px 0 9px; }
:root[data-tema="escuro"] .ajuda-texto h3 { color: var(--ceu); }
.ajuda-texto h4 { font-size: 15px; font-weight: 600; color: var(--texto-suave); margin: 18px 0 7px; }
.ajuda-texto p { color: var(--texto-suave); line-height: 1.75; margin: 0 0 13px; max-width: 72ch; }
.ajuda-texto ul, .ajuda-texto ol { color: var(--texto-suave); line-height: 1.75; padding-left: 22px; margin: 0 0 13px; max-width: 72ch; }
.ajuda-texto li { margin-bottom: 6px; }
.ajuda-texto li::marker { color: var(--ouro-forte); }
.ajuda-texto code {
  background: var(--superficie-3); padding: 2px 6px; border-radius: 5px;
  font-family: var(--fonte-mono); font-size: 14px; color: var(--petroleo-medio);
}
:root[data-tema="escuro"] .ajuda-texto code { color: var(--ceu); }
.ajuda-texto strong { color: var(--texto-titulo); font-weight: 600; }
.ajuda-texto table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14.5px; }
.ajuda-texto table th {
  text-align: left; padding: 9px 12px; background: var(--cabecalho-tabela);
  color: var(--texto-fraco); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  border-bottom: 1px solid var(--linha-forte);
}
.ajuda-texto table td { padding: 9px 12px; border-bottom: 1px solid var(--linha-suave); color: var(--texto-suave); vertical-align: top; }

.ajuda-caixa {
  border-left: 3px solid var(--ceu);
  background: var(--tinta-info);
  padding: 13px 16px; border-radius: 0 var(--raio-p) var(--raio-p) 0;
  margin: 0 0 16px;
}
.ajuda-caixa.atencao { border-left-color: var(--atencao); background: var(--tinta-atencao); }
.ajuda-caixa.perigo { border-left-color: var(--vermelho); background: var(--tinta-erro); }
.ajuda-caixa p:last-child { margin-bottom: 0; }
.ajuda-caixa b { color: var(--texto-titulo); }

/* ------------------------------------------------ itens da nota fiscal --- */

.itens-nota { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--superficie-2); }
.itens-nota .cabecalho-itens {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 13px; background: var(--cabecalho-tabela); border-bottom: 1px solid var(--linha);
}
.itens-nota .cabecalho-itens h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-fraco); }

.item-linha {
  display: grid;
  grid-template-columns: 28px minmax(0, 3fr) 82px 90px 108px 116px 68px;
  gap: 7px; align-items: center;
  padding: 7px 13px; border-bottom: 1px solid var(--linha-suave);
  transition: background .1s;
}
.item-linha:hover { background: var(--ceu-suave); }
.item-linha:last-child { border-bottom: 0; }
.item-linha .indice { color: var(--texto-rotulo); font-size: 13.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.item-linha .descricao-item { min-width: 0; }
.item-linha .descricao-item b { display: block; font-size: 14.5px; color: var(--texto-titulo); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-linha .descricao-item span { font-size: 13px; color: var(--texto-tenue); }
.item-linha .valor-item { text-align: right; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.item-linha .acoes-item { display: flex; gap: 4px; justify-content: flex-end; }

@media (max-width: 1000px) {
  .item-linha { grid-template-columns: 30px minmax(0, 1fr) 100px 70px; }
  .item-linha .esconder-estreito { display: none; }
}

.resumo-totais {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 1px;
  background: var(--linha-suave); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden; margin-top: 14px;
}
.resumo-totais .item-total { background: var(--vidro-forte); padding: 9px 12px; }
.resumo-totais .item-total .rotulo-total { font-size: 11px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.resumo-totais .item-total .valor-total { display: block; font-size: 17.5px; font-weight: 500; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--texto-titulo); }
.resumo-totais .item-total.destaque { background: var(--gradiente-metrica-destaque); }
.resumo-totais .item-total.destaque .rotulo-total { color: var(--rotulo-metrica-destaque); }
.resumo-totais .item-total.destaque .valor-total { color: var(--valor-metrica-destaque); font-size: 21.5px; }

/* ------------------------------------------------------ certificados --- */

.cartao-certificado {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--vidro-forte);
  transition: var(--transicao);
}
.cartao-certificado.ativo { border-color: var(--borda-sucesso); }
.cartao-certificado.vencido { border-color: var(--borda-erro); background: var(--tinta-erro); }
.cartao-certificado.proximo { border-color: var(--borda-atencao); background: var(--tinta-atencao); }
.cartao-certificado .selo {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-fraco);
}
.cartao-certificado.ativo .selo { background: var(--selo-fundo); color: var(--selo-texto); }
.cartao-certificado.vencido .selo { background: var(--tinta-erro); color: var(--vermelho); }
.cartao-certificado.proximo .selo { background: var(--tinta-atencao); color: var(--atencao); }
.cartao-certificado .info { flex: 1; min-width: 0; }
.cartao-certificado .info b { display: block; font-size: 15.5px; color: var(--texto-titulo); font-weight: 600; }
.cartao-certificado .info .linha-detalhe { font-size: 14px; color: var(--texto-fraco); margin-top: 3px; }

.barra-validade { height: 5px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; margin-top: 10px; }
.barra-validade .preenchimento { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--petroleo-medio), var(--ouro)); transition: width .3s; }
.barra-validade .preenchimento.aviso { background: linear-gradient(90deg, var(--atencao), var(--laranja)); }
.barra-validade .preenchimento.perigo { background: linear-gradient(90deg, var(--vermelho), var(--laranja)); }

/* -------------------------------------------------- tela de abertura --- */

/* Opaca de propósito: o que ela esconde é uma tela que se desenha e se corrige
   em seguida. Usa o mesmo fundo do corpo, então nasce na cor do tema. */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background-color: var(--bg);
  background-image: var(--bg-textura);
  opacity: 1;
  transition: opacity .28s ease;
}
.abertura.saindo { opacity: 0; pointer-events: none; }

.abertura .caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(320px, 78vw);
  text-align: center;
}
/* Lockup vertical, o da abertura de aplicativo no design; a assinatura da JMC
   vem abaixo dele, separada, nunca dentro da logo. */
.abertura .lockup { font-size: 32px; margin-bottom: 14px; }
.abertura .assinatura {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--texto-rotulo);
  text-transform: uppercase;
}
.abertura .assinatura sup { font-size: .7em; letter-spacing: 0; }

/* Barra indeterminada: o banco responde quando responde. */
.abertura .barra {
  width: 100%;
  height: 3px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--superficie-3);
  overflow: hidden;
}
.abertura .barra span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--petroleo-medio), var(--ouro));
  animation: abertura-desliza 1.15s ease-in-out infinite;
}
@keyframes abertura-desliza {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(240%); }
}

.abertura .passo {
  font-size: 14px;
  color: var(--texto-fraco);
  min-height: 18px;
}

/* ------------------------------------------- telas estreitas (tablet) --- */

/*
 * O desktop pedia janela de pelo menos 1100 px. No navegador ninguém garante
 * isso: abaixo de 900 px o menu vira gaveta, que desliza por cima do conteúdo
 * pelo botão do topo, e a área de trabalho ocupa a tela inteira.
 */
@media (max-width: 900px) {
  :root { --respiro: 8px; --altura-topo: 62px; }
  .aplicacao { grid-template-columns: minmax(0, 1fr); }
  .aplicacao.menu-recolhido { --largura-menu: 288px; }
  .menu {
    position: fixed; z-index: 800;
    top: var(--respiro); bottom: var(--respiro); left: var(--respiro);
    width: min(300px, calc(100vw - 48px));
    transform: translateX(calc(-100% - 24px));
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
  }
  .aplicacao.menu-aberto .menu { transform: none; }
  .menu-fechar {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; margin-left: auto; border-radius: 50%;
    border: 1px solid var(--linha); background: var(--vidro-forte); color: var(--texto-fraco);
    cursor: pointer; transition: var(--transicao);
  }
  .menu-fechar:hover, .menu-fechar:focus-visible { border-color: var(--ouro); color: var(--texto-titulo); }
  .aplicacao.menu-aberto::after {
    content: ""; position: fixed; inset: 0; z-index: 790;
    background: var(--fundo-modal);
  }
  .aplicacao.menu-recolhido .menu-marca .wordmark,
  .aplicacao.menu-recolhido .menu-nav span,
  .aplicacao.menu-recolhido .menu-grupo-titulo,
  .aplicacao.menu-recolhido .menu-usuario .quem { display: revert; }
  .aplicacao.menu-recolhido .menu-assinatura { display: flex; }
  .aplicacao.menu-recolhido .menu-marca { justify-content: flex-start; padding-left: 20px; padding-right: 14px; }
  .topo { flex-wrap: wrap; padding-block: 8px; }
  .topo .acoes { flex-wrap: wrap; }
  .topo h1 { font-size: 26px; }
  .topo-emitente { order: 3; width: 100%; margin-left: 0; }
  .seletor-emitente { max-width: 100%; flex: 1; }
}

@media (max-width: 520px) {
  .seletor-emitente .ambiente { display: none; }
  .cartao { padding: 13px 14px; border-radius: var(--raio); }
  .avisos-flutuantes { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* --------------------------------------------------------- celular --- */

/* Celular (05/10/2026, pedido do usuário: "totalmente responsivo"). As telas
   já viravam uma coluna abaixo de 900 px; aqui o que faltava para nada passar
   da largura do aparelho e tudo dar para tocar. Conferência:
   `npm run verificar-interface -- --celular`, que reprova a tela que rola
   para o lado. */
@media (max-width: 900px) {
  /* 16 px nos campos: abaixo disso o Safari do iPhone dá zoom ao tocar no campo. */
  input, select, textarea { font-size: 16px; }
  /* Botão nunca passa da largura de quem o contém; o texto longo ganha reticências. */
  .botao { max-width: 100%; }
  .botao > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cartao-cabecalho { flex-wrap: wrap; }
  .cartao-cabecalho .acoes { flex-wrap: wrap; }
  .barra-filtros .campo, .barra-filtros .campo.busca { min-width: 0; flex: 1 1 100%; }
  .barra-acoes .botao { flex: 1 1 auto; }
  /* Caixas de diálogo ocupam a tela, com o rodapé sempre à vista. */
  .modal-fundo { padding: 8px; align-items: stretch; }
  .modal, .modal.medio, .modal.largo, .modal.enorme, .modal.maximo, .modal.amplo { width: 100%; max-height: 100%; border-radius: var(--raio); }
  .modal.amplo { height: 100%; }
  .modal-corpo { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-rodape { padding: 10px 12px; }
  .modal-rodape .botao { flex: 1 1 auto; }
  /* Índice da Ajuda: uma faixa que rola para o lado, em cima do texto. */
  .ajuda-indice {
    display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    padding: 8px; max-height: none; position: sticky; top: 0; z-index: 2;
  }
  .ajuda-indice .grupo { display: none; }
  .ajuda-indice a { border-left: 0; border-radius: 999px; padding: 6px 12px; flex: 0 0 auto; }
  /* Tabela larga rola dentro do próprio quadro, nunca a página. */
  .tabela-envolucro { max-width: 100%; -webkit-overflow-scrolling: touch; }
  img, svg, canvas, video { max-width: 100%; }
  /* A dica de CSS existe invisível (opacity 0) e, larga e sem quebra, alargava a
     página para o lado. No toque não há "passar o mouse": ela sai. */
  .dica-flutuante::after { content: none; }
  .faixa-sugestoes { align-items: stretch; }
  .faixa-sugestoes .fim { margin-left: 0; flex-wrap: wrap; min-width: 0; }
  .ajuda-texto table { display: block; overflow-x: auto; max-width: 100%; }
}
@media (hover: none) {
  .dica-flutuante::after { content: none; }
}
@media (max-width: 520px) {
  .topo .identificacao h1 { font-size: 24px; }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrica .valor { font-size: 21px; }
}

/* Tabela em cartões no telefone (05/10/2026): cada linha vira um cartão, com o
   rótulo da coluna à esquerda e o valor à direita; a primeira coluna (o que
   identifica a linha) vem sem rótulo, como título do cartão. Nada de deslizar
   a tabela para o lado para achar a coluna. O rótulo vem de ui.tabela
   (data-rotulo em cada célula). */
@media (max-width: 600px) {
  .tabela-envolucro { overflow-x: hidden; }
  table.tabela, table.tabela tbody, table.tabela tr, table.tabela td { display: block; width: 100% !important; }
  table.tabela thead { display: none; }
  table.tabela tbody tr { padding: 10px 12px; border-bottom: 1px solid var(--linha); }
  table.tabela tbody tr:last-child { border-bottom: 0; }
  table.tabela td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 3px 0 !important; border: 0 !important; text-align: right !important;
    white-space: normal; overflow-wrap: anywhere; min-height: 0;
  }
  table.tabela td::before {
    content: attr(data-rotulo); flex: 0 0 auto; max-width: 45%;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto-fraco); text-align: left;
  }
  table.tabela td[data-rotulo=""]::before { content: none; }
  table.tabela td:first-child { justify-content: flex-start; text-align: left !important; font-size: 15px; }
  table.tabela td:first-child::before { content: none; }
  table.tabela td > * { min-width: 0; }
  table.tabela td .acoes-linha { justify-content: flex-end; flex-wrap: wrap; }
}

/* Os dois botões da NFS-e numa linha antes da descrição do serviço, lado a lado e à direita,
   como o "Escolher cliente cadastrado" no cabeçalho do Tomador (14/10/2026). No celular, à
   esquerda, um sobre o outro. */
.grade-formulario > .campo.campo-acoes-servico { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.grade-formulario > .campo.campo-acoes-servico > .botao { flex: 0 0 auto; justify-content: center; }
@media (max-width: 900px) {
  .grade-formulario > .campo.campo-acoes-servico { justify-content: flex-start; }
}