/* MX Notas 1.0 — painel local.
 *
 * ============================================================================
 * CONTRATO DE COR. Cada matiz tem um ofício; matiz sem ofício não entra aqui.
 *   verde   — a marca MAXIMOS e o que está FEITO (nota emitida, cliente em dia)
 *   âmbar   — DEPENDE DE VOCÊ: a emitir neste mês
 *   rosa    — PERDA ou PRAZO: cliente que parou, certificado vencendo, recusa
 *   azul    — DINHEIRO: faturado, previsto, ticket médio
 *   ciano   — CADASTRO: quantidade de clientes, origem do dado
 * Fora desses cinco papéis a tela é NEUTRA. Município, serviço e código são
 * TEXTO, não pílula colorida: cada cor a mais tira o destaque de todas.
 * ============================================================================
 *
 * ⚠️ CADA MATIZ TEM DOIS TONS, e eles não se trocam:
 *     --cor       serve de TEXTO e de preenchimento com branco em cima (>= 4,5:1)
 *     --cor-vivo  serve de INDICADOR (barra, ponto, ícone) — nunca de texto pequeno
 *   O verde vivo #08a982 com texto branco dá 2,98:1: fica bonito e não se lê.
 *   Botão cheio e pílula contada usam --cheio-fundo/--cheio-tinta, medidos nos
 *   DOIS temas (no escuro o fundo é claro e a tinta é escura, de propósito).
 *
 * ⚠️ TEMA CLARO É O PADRÃO, e de propósito não existe regra
 *   `@media (prefers-color-scheme: dark)`: o painel abre claro mesmo com o
 *   Windows no escuro, e só fica escuro quando a pessoa pede. O botão de tema
 *   grava a escolha; sem escolha gravada, claro.
 *
 * ⚠️ A INTER VEM JUNTO COM O PAINEL, em `interface/fontes/`. O painel roda OFFLINE
 *   com CSP `default-src 'self'`: fonte da internet não carregaria, e mesmo que
 *   carregasse deixaria um sistema local dependendo de rede. A pilha do Windows
 *   continua atrás, para o painel não ficar sem letra se o arquivo sumir.
 */

/* Inter VARIÁVEL: um arquivo cobre os pesos 100 a 900, então o 650 dos títulos é
   um peso de verdade, não o 700 fingindo. Dois recortes, cada um com o seu
   `unicode-range` — o navegador só busca o `latin-ext` se aparecer uma letra fora
   do latim básico, o que em razão social brasileira não acontece.
   ⚠️ O caminho tem de estar no `ESTATICOS` do servidor.js, que é lista de
   permissão: pôr o arquivo na pasta não basta. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---- casca ---- */
  --fundo:        #f5f6f7;
  --lateral:      #ffffff;
  --superficie:   #ffffff;
  --superficie-2: #f7f8f9;
  --linha:        #dde1e6;  /* o cinza da identidade */
  --linha-forte:  #c7cdd4;

  /* ---- texto: três tons, hierarquia por TAMANHO e PESO, não por apagar ----
     O secundário #718096 da paleta dá 4,03:1 no branco e é justamente o tom que
     carrega CNPJ, mês da última nota e cabeçalho de coluna — informação que se
     lê para trabalhar. Os três abaixo guardam o matiz e passam de 4,5:1 no
     branco, no cartão e no fundo da página. */
  --tinta:       #212121;  /* 16,1:1 — o GRAFITE da identidade */
  --tinta-2:     #4a5056;  /*  8,2:1 */
  --tinta-3:     #646b72;  /*  5,4:1 */
  --tinta-fraca: #8d949b;  /*  3,0:1 — SÓ desenho: tracejado, ícone de vazio */

  /* ---- matizes com ofício ----
     ⚠️⚠️ O MENTA É CLARO: branco em cima dele dá **1,46:1**. Ele NUNCA é fundo de
     texto branco, e nunca é texto sobre branco. O lugar dele é: preenchimento
     com GRAFITE por cima (11:1), indicador, e texto no tema ESCURO (11:1).
     Por isso o papel "feito" tem dois tons: `--verde` é o menta ESCURECIDO, que
     serve de texto no claro; `--verde-vivo` é o menta da marca, que preenche. */
  --verde:       #0b7a57;  /* 5,3:1 no branco — texto */
  --verde-vivo:  #4defb8;  /* O MENTA DA IDENTIDADE — preenchimento e indicador */
  --verde-fundo: #e4fbf2;
  --azul:        #1f6bd0;
  --azul-vivo:   #2478e8;
  --azul-fundo:  #e8f1fe;
  --ambar:       #a85a06;
  --ambar-vivo:  #f59e0b;
  --ambar-fundo: #fdf3e3;
  --rosa:        #be123c;
  --rosa-vivo:   #f43f5e;
  --rosa-fundo:  #fdedf0;
  --ciano:       #0e7490;
  --ciano-vivo:  #06b6d4;
  --ciano-fundo: #e5f5fa;

  /* ⭐ A assinatura da marca: botão principal é MENTA com letra GRAFITE, 11:1.
     Vale nos DOIS temas — é o que faz a tela ser reconhecida como MX Notas. */
  --cheio-fundo: #4defb8;
  --cheio-tinta: #212121;  /* 11,0:1 */
  /* o par da pílula âmbar "pede ação" */
  --pede-fundo:  #f59e0b;
  --pede-tinta:  #3d2406;  /* 7,9:1 */

  /* ⚠️ Herança do índigo: o gráfico e os cartões de dinheiro chamavam --indigo.
     DINHEIRO agora é o azul da paleta nova, e os dois nomes apontam para ele —
     assim nenhuma regra antiga sai sem cor. */
  --indigo:       var(--azul);
  --indigo-vivo:  var(--azul-vivo);
  --indigo-fundo: var(--azul-fundo);

  /* ---- forma ---- */
  --raio-p: 10px;
  --raio:   14px;
  --raio-g: 16px;
  --sombra:      0 1px 2px rgba(20, 36, 59, .05), 0 8px 24px -14px rgba(20, 36, 59, .18);
  --sombra-alta: 0 2px 6px rgba(20, 36, 59, .07), 0 28px 60px -24px rgba(20, 36, 59, .30);
  --anel: 0 0 0 3px color-mix(in srgb, var(--verde-vivo) 28%, transparent);

  /* ---- ritmo ---- */
  --rapido: 130ms cubic-bezier(.4, 0, .2, 1);
  --calmo:  240ms cubic-bezier(.16, 1, .3, 1);

  --fonte: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-titulo: Inter, "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ⭐ No escuro o CARTÃO é o grafite da identidade (#212121) e o fundo da página é
   mais escuro que ele — assim o grafite da marca aparece como superfície, que é
   o papel que a identidade dá a ele. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo:        #141414;
  --lateral:      #1a1a1a;
  --superficie:   #212121;  /* o GRAFITE da identidade */
  --superficie-2: #2a2a2a;
  --linha:        #343434;
  --linha-forte:  #434343;
  --tinta:       #ffffff;  /* 16,1:1 */
  --tinta-2:     #b9bec4;  /*  8,6:1 */
  --tinta-3:     #8e959c;  /*  5,3:1 */
  --tinta-fraca: #6b7278;  /*  3,3:1 */
  /* No escuro o menta pode ser TEXTO: 11:1 sobre o grafite. */
  --verde:       #4defb8;
  --verde-vivo:  #4defb8;
  --verde-fundo: #0c2a20;
  --azul:        #6fb0ff;
  --azul-vivo:   #328bff;
  --azul-fundo:  #10243d;
  --ambar:       #fbbf24;
  --ambar-vivo:  #f59e0b;
  --ambar-fundo: #33240a;
  --rosa:        #fb7185;
  --rosa-vivo:   #f43f5e;
  --rosa-fundo:  #39111c;
  --ciano:       #67e8f9;
  --ciano-vivo:  #06b6d4;
  --ciano-fundo: #0a2b35;
  /* O botão principal NÃO muda entre os temas: menta com grafite. É a marca. */
  --cheio-fundo: #4defb8;
  --cheio-tinta: #212121;  /* 11,0:1 */
  --sombra:      0 1px 2px rgba(0, 0, 0, .40), 0 8px 26px -14px rgba(0, 0, 0, .75);
  --sombra-alta: 0 2px 8px rgba(0, 0, 0, .50), 0 30px 64px -26px rgba(0, 0, 0, .85);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 14px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 650; letter-spacing: -.015em; margin: 0; }
a { color: var(--verde); }

/* Ícones: desenhados no padrão Lucide (24px, traço 1,8, pontas redondas) e
   guardados como <symbol> no próprio index.html — nenhum arquivo de fora. */
svg.ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
svg.ico.g { width: 20px; height: 20px; }
svg.ico.p { width: 15px; height: 15px; }

/* ======================== casca ======================== */

/* ⚠️⚠️ `minmax(0, 1fr)`, nunca `1fr` solto. `1fr` quer dizer `minmax(auto, 1fr)`, e
   esse `auto` deixa a COLUNA crescer até o min-content do que está dentro: com a
   lateral virando faixa de nove botões, a coluna foi para 1523px numa janela de
   820 e quem rolava de lado era a PÁGINA INTEIRA — barra de cima e lateral saindo
   da tela junto, em vez de a tabela rolar dentro da própria caixa.
   `min-width: 0` no item não resolve sozinho: o estouro é na coluna, não no item. */
/* ⚠️ 272px, não 252: com a Inter (uns 8% mais larga que a Segoe) o item "Notas com
   pendência" passou a pedir 228px num botão de 223 e QUEBRAVA em duas linhas. A
   folga aqui aguenta o rótulo mais comprido com contador de três dígitos. Trocar a
   fonte mexe na largura de tudo — medir os rótulos, não só olhar a tela. */
.app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.app > main { min-width: 0; display: flex; flex-direction: column; }

.lateral {
  background: var(--lateral);
  border-right: 1px solid var(--linha);
  padding: 18px 14px 16px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}

.marca { display: flex; align-items: center; gap: 11px; padding: 2px 6px 0; }

/* ⚠️ DUAS VERSÕES DE CADA PEÇA DA MARCA, e o tema escolhe por CSS. É o que o
   pacote da identidade entrega e o que a regra manda: logo tem versão para fundo
   claro e para fundo escuro, e NUNCA leva `filter` — filtro desbota a marca e é
   justamente o que a identidade proíbe. */
/* o ícone quadrado, na lateral */
.marca-icone { width: 38px; height: 38px; flex: none; border-radius: 11px; display: block; }

/* a logo inteira, na tela de entrar — ela já traz o nome e a assinatura */
.logo-mxnotas { display: block; width: 190px; height: auto; }

/* ⚠️⚠️ `img.` de propósito, e DEPOIS das regras acima. Com `.so-escuro` solto
   (mesma especificidade de `.logo-mxnotas`) quem vinha por último ganhava, e as
   DUAS versões da logo apareciam empilhadas na tela de entrar. `img.so-escuro`
   pesa mais e não depende da ordem do arquivo. */
img.so-escuro { display: none; }
:root[data-tema="escuro"] img.so-claro  { display: none; }
:root[data-tema="escuro"] img.so-escuro { display: block; }

/* Mesmos valores do cabeçalho do Portal: 17/800 em cima, 11/500 embaixo. */
.marca-nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 17px; line-height: 1.05; }
.marca-sub  { font-size: 11px; font-weight: 500; color: var(--tinta-3); margin-top: 1px; }

/* ---- menu em grupos ---- */

.menu { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.grupo { display: flex; flex-direction: column; gap: 2px; }
.grupo > .titulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3); padding: 0 10px 6px;
}
.menu button {
  all: unset;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--raio-p);
  font: 500 13.5px/1 var(--fonte); color: var(--tinta-2); cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.menu button .ico { color: var(--tinta-3); transition: color var(--rapido); }
.menu button:hover { background: var(--superficie-2); color: var(--tinta); }
.menu button:hover .ico { color: var(--tinta-2); }
.menu button:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 1px; }
.menu button[aria-current="page"] { background: var(--verde-fundo); color: var(--verde); font-weight: 650; }
.menu button[aria-current="page"] .ico { color: var(--verde); }
.menu .conta {
  margin-left: auto; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 700;
  background: var(--linha); color: var(--tinta-2); border-radius: 999px; padding: 2px 7px;
  transition: background var(--rapido), color var(--rapido);
}
.menu button[aria-current="page"] .conta { background: var(--cheio-fundo); color: var(--cheio-tinta); }
.menu .conta.pede { background: var(--pede-fundo); color: var(--pede-tinta); }

/* ---- pé da lateral ---- */

.rodape-lateral { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

/* ⚠️ `.cert` NÃO é flex: o app.js apaga o conteúdo e põe um <b> e um texto solto
   lado a lado. Em flex os dois virariam colunas e a validade sairia na mesma
   linha do rótulo, em vez de embaixo. */
.cert { font-size: 11.5px; padding: 10px 12px; border-radius: var(--raio-p); line-height: 1.4; }
.cert b { display: block; font-weight: 700; }
.cert.ok    { background: var(--verde-fundo); color: var(--verde); }
.cert.perto { background: var(--ambar-fundo); color: var(--ambar); }
.cert.ruim  { background: var(--rosa-fundo);  color: var(--rosa); }

/* A caixa do cofre tem botão e campo de senha dentro — precisa empilhar, e o campo precisa
   caber na lateral estreita. ⚠️ `min-width: 0` porque campo em coluna estreita não encolhe
   sozinho e empurraria a barra lateral inteira. */
.cert.cofre { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin-top: 8px; }
.cert.cofre input { min-width: 0; width: 100%; font-size: 12px; padding: 6px 8px; }
.cert.cofre .btn { width: 100%; justify-content: center; }

.selo-local {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px;
  border: 1px dashed var(--linha-forte); border-radius: var(--raio-p);
  font-size: 11px; color: var(--tinta-3); line-height: 1.4;
}
.selo-local .ico { color: var(--tinta-fraca); margin-top: 1px; }

/* ======================== barra de cima ======================== */

.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; min-height: 62px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.trilha { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tinta-3); min-width: 0; }
.trilha b { color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ `flex-wrap` e `min-width: 0` são a rede: a fila de controles da direita não
   encolhe sozinha (cada peça tem largura própria) e, sem isto, ela empurra a
   PÁGINA para fora em vez de se acomodar. Com a rede, no pior caso ela quebra
   numa segunda linha — feio, mas nada sai da tela. */
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

/* a empresa em que o painel está, como pílula */
.empresa {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 11px 5px 7px; border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: var(--superficie); min-width: 0;
}
.empresa .sigla {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--azul-fundo); color: var(--azul); font-weight: 700; font-size: 11px;
}
.empresa > div { min-width: 0; }
.empresa b {
  display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; max-width: 190px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.empresa span { font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* ⚠️ Com mais de uma empresa liberada, o seletor ao lado JÁ diz o nome — e o nome
   escrito duas vezes na mesma barra faz a pessoa procurar a diferença entre os
   dois. A pílula fica só com o CNPJ, que o seletor não mostra e que é a prova de
   com qual inscrição a nota vai ser assinada. */
.empresa.so-documento b { display: none; }
.empresa.so-documento span { font-size: 12px; color: var(--tinta-2); font-weight: 600; }

.icone-botao {
  all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: var(--raio-p);
  display: grid; place-items: center; color: var(--tinta-2); flex: none;
  border: 1px solid var(--linha); background: var(--superficie);
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.icone-botao:hover { background: var(--superficie-2); color: var(--tinta); border-color: var(--linha-forte); }
.icone-botao:focus-visible { outline: none; box-shadow: var(--anel); }

/* ⚠️ `.quem` existe em DOIS lugares: aqui, na barra de cima, e dentro de `.fila`,
   onde o app.js monta o nome do tomador. Por isso as regras da pílula estão
   presas a `.topo` — soltas, elas punham borda e fundo em cada linha de fila. */
.topo .quem {
  display: flex; align-items: center; gap: 9px; padding: 4px 11px 4px 5px;
  border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--superficie);
}
.topo .quem .retrato {
  width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cheio-fundo), color-mix(in srgb, var(--cheio-fundo) 75%, #000));
  color: var(--cheio-tinta); font-weight: 700; font-size: 11.5px;
}
.topo .quem > div { min-width: 0; }
.topo .quem b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.topo .quem span { font-size: 11px; color: var(--tinta-3); }

/* seletor de empresa: aparece só com mais de uma liberada */
.campo.seletor { flex-direction: row; align-items: center; gap: 7px; }
.campo.seletor > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.campo.seletor select { font: 600 12.5px var(--fonte); padding: 7px 9px; max-width: 220px; }

/* ======================== conteúdo ======================== */

.painel { padding: 24px 28px 60px; min-width: 0; }

/* Entrada da tela: 240 ms de subir-e-aparecer. Reinicia a cada troca porque a
   tela sai de `display:none` — é o que dá a sensação de página nova. */
.tela { animation: entrar var(--calmo) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tela { animation: none; }
  * { transition-duration: 1ms !important; }
}

.cabeca { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.cabeca h1 { font-size: 23px; }
.cabeca p { margin: 5px 0 0; color: var(--tinta-2); font-size: 13px; }
.cabeca .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; }

label.campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--tinta-2); font-weight: 600; }
input, select, textarea {
  font: 13.5px var(--fonte); color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p); padding: 8px 11px;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--verde-vivo); box-shadow: var(--anel);
}
input[type="number"], input.dinheiro { font-variant-numeric: tabular-nums; text-align: right; }

.btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--raio-p);
  font: 600 13px/1 var(--fonte); color: var(--tinta);
  border: 1px solid var(--linha-forte); background: var(--superficie);
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.btn:hover { background: var(--superficie-2); border-color: var(--tinta-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--anel); }
/* ⭐ O botão da marca: menta cheio, letra grafite, igual nos dois temas.
   ⚠️ Sem gradiente. Um gradiente que termina num verde escuro deixaria a letra
   grafite em cima do tom escuro — e aí o rótulo do botão principal sumiria. */
.btn.cheio {
  background: var(--cheio-fundo); color: var(--cheio-tinta); border-color: transparent;
  box-shadow: 0 1px 2px rgba(33, 33, 33, .10), 0 6px 16px -8px rgba(77, 239, 184, .55);
}
.btn.cheio:hover { background: color-mix(in srgb, var(--cheio-fundo) 86%, var(--tinta)); border-color: transparent; }
.btn.perigo {
  color: var(--rosa); background: var(--rosa-fundo);
  border-color: color-mix(in srgb, var(--rosa) 30%, transparent);
}
.btn.perigo:hover { background: color-mix(in srgb, var(--rosa) 16%, var(--superficie)); border-color: var(--rosa); }
.btn.miudo { padding: 6px 10px; font-size: 12px; }
.btn.largo { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ======================== cartões de número ======================== */

/* 192px para os quatro caberem lado a lado já em ~840px de conteúdo. */
.tiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: 14px; margin-bottom: 18px; }

/* ⚠️ Os cartões vêm em DUAS formas: com `.alto` (chip de ícone + rótulo), que é
   o que o index.html monta, e sem `.alto` — a numeração da DPS é montada pelo
   app.js e empilha rótulo, número e pé direto. Por isso o espaço vem de
   `margin`, não de `gap`: com `gap` a forma empilhada ficava frouxa. */
.tira {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra);
}
.tira .alto { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tira .chip { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.tira .rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3);
}
.tira .numero {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 29px; line-height: 1.1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-top: 6px;
}
.tira .alto + .numero { margin-top: 0; }
.tira .pe { font-size: 12px; color: var(--tinta-2); margin-top: 6px; }

.tira.acao     .chip { background: var(--ambar-fundo); color: var(--ambar); }
.tira.acao     .numero { color: var(--ambar); }
.tira.dinheiro .chip { background: var(--azul-fundo);  color: var(--azul); }
.tira.dinheiro .numero { color: var(--azul); }
.tira.feito    .chip { background: var(--verde-fundo); color: var(--verde); }
.tira.feito    .numero { color: var(--verde); }
.tira.perda    .chip { background: var(--rosa-fundo);  color: var(--rosa); }
.tira.perda    .numero { color: var(--rosa); }
.tira.cadastro .chip { background: var(--ciano-fundo); color: var(--ciano); }
.tira.cadastro .numero { color: var(--ciano); }

/* ⚠️ Globais: a variação também aparece na tabela do relatório. Presas a
   `.tira .pe`, as duas saíam sem cor lá e o número ficava igual subindo ou
   caindo. */
.sobe  { color: var(--verde); font-weight: 650; }
.desce { color: var(--rosa);  font-weight: 650; }

/* ======================== blocos ======================== */

.bloco {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden;
}
.bloco > header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--linha);
}
.bloco > header h2 { font-size: 14.5px; }
.bloco > header .nota { font-size: 12px; color: var(--tinta-3); }
.bloco > header .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bloco .corpo { padding: 18px; }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.duas > .bloco { margin: 0; }

/* ======================== gráfico ======================== */

.grafico { display: block; width: 100%; height: auto; }
.grafico .barra { fill: var(--azul-vivo); opacity: .9; }
.grafico .barra.agora { fill: var(--verde-vivo); opacity: 1; }
.grafico .eixo  { fill: var(--tinta-3); font: 600 10px var(--fonte); }
.grafico .valor { fill: var(--tinta-2); font: 650 10px var(--fonte); font-variant-numeric: tabular-nums; }
.grafico .regua { stroke: var(--linha); stroke-width: 1; }

/* ======================== listas e tabelas ======================== */

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

/* ⚠️ Razão social é comprida: "ENSAQ INDUSTRIA E COMERCIO DE MAQUINAS E
   IMPORTACAO E EXPORTACAO LTDA" quebrava em cinco linhas e a linha da tabela
   virava um bloco de 90px. `table-layout: fixed` + `colgroup` dá largura à
   coluna, e o nome corta com reticências guardando o texto inteiro no `title`.
   Sem o `fixed`, o navegador ignora a largura. */
table.fixa { table-layout: fixed; min-width: 740px; }
table.fixa td, table.fixa th { overflow: hidden; text-overflow: ellipsis; }
.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ⚠️ Abaixo da largura mínima a tabela ROLA; não encolhe — rótulo cortado é pior
   que rolagem.
   ⚠️ MEDIDO em 09/11/2026, e a regra acima NÃO se cumpre até o fim: no mínimo de
   740px as colunas estreitas da tabela de tomadores (7% e 8%: "Meses", "Notas",
   "Última") têm 52px e o rótulo em maiúsculas precisa de 69. Abaixo de ~1300px de
   janela eles saem como "Me…", "No…". Já era assim antes do redesenho.
   Para cumprir de verdade, `table.fixa` precisaria de `min-width: 990px` — o que
   troca rótulo cortado por mais rolagem lateral. É decisão do João, não minha. */
.rolagem-x { overflow-x: auto; }
thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
  padding: 11px 14px; background: var(--superficie-2);
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--rapido); }
tbody tr:hover { background: var(--superficie-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nome { font-weight: 600; }
.sutil { color: var(--tinta-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
tfoot td { padding: 12px 14px; border-top: 2px solid var(--linha-forte); font-weight: 700; }

.situacao { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: 12px; }
/* ⚠️ O ponto usa o tom de TEXTO, não o vivo, e é medido: o texto ao lado dele é
   neutro, então a bolinha é a ÚNICA coisa que carrega a situação, e forma
   sozinha tem de passar de 3:1 contra o fundo. O verde vivo dá 3,00:1 raspando
   e o âmbar vivo dá 2,1:1 — some no branco justamente onde diz "a emitir". */
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ponto.acao  { background: var(--ambar); }
.ponto.perda { background: var(--rosa); }
.ponto.feito { background: var(--verde); }
.ponto.frio  { background: var(--tinta-3); }

.fila { list-style: none; margin: 0; padding: 0; }
.fila li {
  display: flex; align-items: center; gap: 11px; padding: 11px 18px;
  border-bottom: 1px solid var(--linha); transition: background var(--rapido);
}
.fila li:last-child { border-bottom: 0; }
.fila li:hover { background: var(--superficie-2); }
.fila .quem { min-width: 0; flex: 1; }
.fila .quem b {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila .quem span { font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.fila .valor { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13px; }

.vazio { padding: 40px 18px; text-align: center; color: var(--tinta-3); font-size: 13px; }
.vazio b { display: block; color: var(--tinta-2); font-size: 14px; margin-bottom: 3px; }

/* ======================== avisos ======================== */

.aviso {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--raio); padding: 13px 16px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.45; border: 1px solid transparent;
}
.aviso .ico { margin-top: 2px; }
.aviso b { font-weight: 700; }
.aviso.prazo   { background: var(--rosa-fundo);  color: var(--rosa);  border-color: color-mix(in srgb, var(--rosa) 22%, transparent); }
.aviso.atencao { background: var(--ambar-fundo); color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 22%, transparent); }
.aviso.info    { background: var(--azul-fundo);  color: var(--azul);  border-color: color-mix(in srgb, var(--azul) 22%, transparent); }
.aviso.bom     { background: var(--verde-fundo); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 22%, transparent); }
.aviso .fechar { all: unset; cursor: pointer; margin-left: auto; font-size: 16px; line-height: 1; opacity: .7; padding: 0 2px; }
.aviso .fechar:hover { opacity: 1; }
.aviso code {
  font: 12.5px var(--mono); padding: 1px 5px; border-radius: 6px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ======================== comando ======================== */

.comando {
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie-2); border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-p); padding: 11px 13px; margin-top: 12px;
}
.comando code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font: 12.5px/1.5 var(--mono); color: var(--tinta);
}

/* ======================== formulário da nota avulsa ======================== */

.formGrade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.formGrade .largo { grid-column: 1 / -1; }
.formGrade label.campo input, .formGrade label.campo select, .formGrade label.campo textarea { width: 100%; }

.caixas { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.caixas label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }

/* A caixa "Por que está resolvida?", aberta embaixo da linha da pendência. Gap menor que o do
   `.caixas` solto porque aqui é UMA frase a preencher, não um grupo de opções — e o campo
   cresce com a linha: campo curto convida a escrever pouco, e motivo curto não explica nada. */
.caixas.motivo-resolucao { gap: 10px; }
.caixas.motivo-resolucao input { flex: 1 1 340px; min-width: 0; }

/* Resultados da busca de serviço: lista curta, clicável, sem virar menu enorme. */
.achados {
  list-style: none; margin: 8px 0 0; padding: 0; max-height: 212px; overflow-y: auto;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
}
.achados li { border-bottom: 1px solid var(--linha); }
.achados li:last-child { border-bottom: 0; }
.achados button {
  all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box;
  padding: 9px 12px; font: 13px/1.35 var(--fonte); color: var(--tinta);
}
.achados button:hover { background: var(--superficie-2); }
.achados button:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: -2px; }
.achados .cod { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ciano); margin-right: 8px; }

/* Prévia do núcleo fiscal, do jeito que o comando mostra. */
.previa {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--raio-p);
  background: var(--superficie-2); border: 1px solid var(--linha);
  font: 13px/1.6 var(--mono); white-space: pre-wrap; color: var(--tinta);
}

/* ======================== filtros ======================== */

.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtros input[type="search"] { min-width: 240px; }
.cabeca .direita input[type="search"] { min-width: 250px; }
.chips {
  display: flex; gap: 3px; background: var(--superficie-2);
  border: 1px solid var(--linha); border-radius: 999px; padding: 3px;
}
.chips button {
  all: unset; cursor: pointer; padding: 5px 12px; border-radius: 999px;
  font: 600 12px/1 var(--fonte); color: var(--tinta-2);
  transition: background var(--rapido), color var(--rapido);
}
.chips button:hover { color: var(--tinta); }
.chips button:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 1px; }
.chips button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }

/* ======================== gaveta de edição ======================== */

.gaveta-fundo { position: fixed; inset: 0; background: rgba(7, 20, 38, .45); z-index: 40; }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--superficie); border-left: 1px solid var(--linha);
  box-shadow: var(--sombra-alta); z-index: 41;
  display: flex; flex-direction: column;
  animation: entrar-gaveta var(--calmo) both;
}
@keyframes entrar-gaveta { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gaveta { animation: none; } }
.gaveta > header {
  padding: 18px 20px; border-bottom: 1px solid var(--linha);
  display: flex; align-items: flex-start; gap: 12px;
}
.gaveta > header h2 { font-size: 16px; line-height: 1.25; }
.gaveta > header .sutil { display: block; margin-top: 3px; }
.gaveta > header .btn { margin-left: auto; flex: none; }
.gaveta .conteudo { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.gaveta .pe-gaveta {
  margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--linha);
  display: flex; gap: 8px; align-items: center;
}
.gaveta .pe-gaveta .direita { margin-left: auto; display: flex; gap: 8px; }
.linha-dado {
  display: flex; justify-content: space-between; gap: 14px; font-size: 13px;
  padding: 7px 0; border-bottom: 1px solid var(--linha);
}
.linha-dado span:first-child { color: var(--tinta-3); }
.linha-dado span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ======================== entrar ========================
 *
 * ⚠️ Desenho COPIADO da tela de entrar do MX Portal (`MX PORTAL\app.html`), a
 * pedido do João: é a mesma porta para os sistemas da casa, então as duas telas
 * têm de se parecer. Daqui vieram, com os números do Portal: o cartão de 420px
 * com canto de 22px, a logo da MAXIMOS num ladrilho de 48px, o título com o
 * subtítulo em versalete, os campos de 48px com rótulo em cima e marca-d'água
 * dentro, o botão de largura cheia com 50px e o rodapé separado por um fio.
 *
 * O que NÃO veio: a paleta. O Portal tem a dele; aqui os neutros continuam sendo
 * os do painel, senão a tela de entrar seria de um sistema e o resto de outro —
 * e o tema escuro deixaria de funcionar.
 */

.portao {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: var(--fundo);
}
/* O brilho de fundo do Portal: dois halos verdes, um em cima à direita e outro
   embaixo à esquerda. */
.portao::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 82% -10%, color-mix(in srgb, var(--verde-vivo) 18%, transparent), transparent 58%),
    radial-gradient(760px 560px at 4% 108%, color-mix(in srgb, var(--verde) 16%, transparent), transparent 55%);
}
.cartao-portao {
  position: relative; width: 100%; max-width: 420px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 22px;
  box-shadow: var(--sombra-alta);
  padding: 38px 34px 28px;
}

/* Na porta de entrada a logo vem INTEIRA e sozinha, em cima do título: ela já
   traz o nome e a assinatura, então repetir "MX Notas" ao lado seria dizer duas
   vezes a mesma coisa. */
.marca-portao { display: block; margin-bottom: 22px; }
.cartao-portao h1 { font-size: 22px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.cartao-portao .sub { color: var(--tinta-2); font-size: 14px; margin: 10px 0 24px; line-height: 1.5; }

/* ⚠️ Aqui `.campo` é uma DIV com `<label>` dentro (como no Portal), não o
   `label.campo` do resto do painel — por isso as regras são próprias e presas
   ao cartão. Trocar uma pela outra deixaria o campo sem rótulo em cima. */
.cartao-portao .campo { margin-bottom: 15px; }
.cartao-portao .campo label {
  display: block; font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-bottom: 7px;
}
.cartao-portao .campo input {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 15px;
  border: 1.5px solid var(--linha-forte); border-radius: 12px;
  background: var(--superficie-2); color: var(--tinta);
  transition: border-color var(--rapido), background var(--rapido), box-shadow var(--rapido);
}
.cartao-portao .campo input::placeholder { color: var(--tinta-fraca); }
.cartao-portao .campo input:focus {
  outline: none; border-color: var(--verde-vivo); background: var(--superficie);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde-vivo) 16%, transparent);
}
.campo-senha { position: relative; }
.campo-senha input { padding-right: 52px; }
#btn-ver-senha {
  all: unset; cursor: pointer;
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--tinta-3);
  transition: color var(--rapido), background var(--rapido);
}
#btn-ver-senha:hover { color: var(--verde); background: var(--superficie-2); }
#btn-ver-senha:focus-visible { outline: none; box-shadow: var(--anel); }

/* Botão de entrar: a mesma proporção do Portal, com a cor da marca MX Notas. */
.cartao-portao .btn.largo {
  width: 100%; min-height: 50px; margin-top: 8px;
  font-size: 15px; font-weight: 700; justify-content: center;
  border: none; border-radius: 12px;
  background: var(--cheio-fundo); color: var(--cheio-tinta);
  box-shadow: 0 8px 20px -10px rgba(77, 239, 184, .8);
  transition: background var(--rapido), transform var(--rapido);
}
.cartao-portao .btn.largo:hover {
  background: color-mix(in srgb, var(--cheio-fundo) 86%, var(--tinta)); transform: translateY(-1px);
}
.cartao-portao .btn.largo:active { transform: none; }
.cartao-portao .aviso { margin: 14px 0 0; }

/* Troca entre "conta do MX Portal" e "acesso só deste painel". É botão de
   verdade (não <a>), porque não navega para lugar nenhum — só troca o modo. */
.link-portao {
  all: unset; cursor: pointer; display: block; width: 100%;
  margin-top: 14px; text-align: center;
  font: 600 12.5px var(--fonte); color: var(--verde);
  padding: 6px; border-radius: var(--raio-p);
  transition: background var(--rapido), color var(--rapido);
}
.link-portao:hover { background: var(--verde-fundo); }
.link-portao:focus-visible { outline: none; box-shadow: var(--anel); }

.pe-portao {
  margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--tinta-3); line-height: 1.5;
}
.pe-portao:empty { display: none; }
.pe-portao code { font: 12px var(--mono); }

/* ======================== usuários ======================== */

.papel { font-size: 11.5px; font-weight: 650; }
.papel.feito { color: var(--verde); }
.papel.perda { color: var(--rosa); }
.marcas { display: flex; flex-wrap: wrap; gap: 5px; }
.marca-empresa {
  font: 600 11.5px var(--fonte); cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta-3);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.marca-empresa:hover { color: var(--tinta); border-color: var(--tinta-3); }
.marca-empresa:focus-visible { outline: none; box-shadow: var(--anel); }
/* ⚠️ Marcada usa o VERDE (liberado = feito) e não só um fundo cinza: a diferença
   entre liberado e não liberado é a informação mais importante desta tela. */
.marca-empresa[aria-pressed="true"] {
  background: var(--verde-fundo); color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 35%, transparent);
}
.marca-empresa[disabled] { opacity: .5; cursor: progress; }

/* A permissão de EMITIR, colada na empresa liberada. Fica grudada de propósito: é uma
   permissão DAQUELA empresa, não do usuário inteiro, e separá-las na tela faria parecer
   que vale para todas. */
.marca-grupo { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; }
.marca-emitir {
  font: 600 10.5px var(--fonte); cursor: pointer; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  border: 1px dashed var(--linha-forte); background: transparent; color: var(--tinta-fraca);
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.marca-emitir:hover { color: var(--tinta); border-color: var(--tinta-3); }
.marca-emitir:focus-visible { outline: none; box-shadow: var(--anel); }
/* ⚠️ Âmbar, não verde: assinar nota fiscal em nome do cliente é permissão que merece ser
   notada na varredura da tela, não mais uma marca igual às outras. E a borda vira sólida —
   quem enxerga pouca cor percebe a diferença pelo traço. */
.marca-emitir[aria-pressed="true"] {
  background: var(--ambar-fundo); color: var(--ambar);
  border-style: solid; border-color: var(--ambar);
}
.marca-emitir[disabled] { opacity: .5; cursor: progress; }
td.acoes { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; align-items: center; }
/* ⚠️ Só nesta fila de ações o "perigo" ganha borda: ele divide a linha com
   botões de borda cinza, e sem a dele o Apagar some do conjunto e vira texto
   vermelho avulso. */
td.acoes .btn.perigo { border-color: color-mix(in srgb, var(--rosa) 30%, transparent); }
textarea.senha-nova {
  font-family: var(--mono); font-size: 15px;
  letter-spacing: .04em; text-align: center; resize: none;
}
.campo-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rotulo-bloco { font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }

/* ======================== diversos ======================== */

.oculto { display: none !important; }
.carregando { padding: 60px 20px; text-align: center; color: var(--tinta-3); }

/* ⚠️ Entre 900 e 1200px a barra de cima não cabe numa linha: a fila de controles
   pedia 731px numa janela de 1009 e estourava 18px para fora da tela. Em vez de
   deixar quebrar, ela larga o que é repetido — o nome de quem está usando (o
   retrato fica, e o nome inteiro está na tela de Usuários) e o rótulo "EMPRESA",
   que o próprio seletor já diz. O que some é rótulo, nunca dado. */
@media (max-width: 1200px) {
  .topo .quem b, .topo .quem span { display: none; }
  .topo .quem { padding: 4px; }
  .campo.seletor > span { display: none; }
  .empresa b { max-width: 130px; }
  .campo.seletor select { max-width: 170px; }
}

/* ⚠️ Abaixo de 900px a lateral deixa de ser coluna e vira faixa: o menu rola na
   horizontal em vez de empilhar nove itens e empurrar o conteúdo para baixo da
   dobra. O pé da lateral sai da tela — tema, empresa e quem está usando já
   moram na barra de cima, que continua lá. */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: static; height: auto; flex-direction: row; align-items: center; gap: 14px;
    border-right: 0; border-bottom: 1px solid var(--linha); padding: 12px 14px;
  }
  /* ⚠️ `flex: 1` + `min-width: 0`: sem isso o menu, que é item flex, se recusa a
     ficar menor que os nove botões, a faixa inteira fica com ~1550px e quem rola
     de lado é a PÁGINA — levando a barra de cima junto para fora da tela. Com a
     regra, quem rola é só o menu, que é o que se queria. */
  .menu { flex: 1; min-width: 0; flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
  .grupo { flex-direction: row; gap: 2px; flex: none; }
  .grupo > .titulo { display: none; }
  .menu button { white-space: nowrap; }
  .rodape-lateral { display: none; }
  .topo { padding: 10px 16px; }
  .painel { padding: 18px 16px 48px; }
  .empresa b, .topo .quem b, .topo .quem span, .campo.seletor > span { display: none; }
  .trilha { font-size: 12px; }
}

/* ======================== emissão em massa ======================== */

/* Área de soltar o arquivo. ⚠️ É um <label for="…"> de propósito: assim o clique
   e o teclado abrem o seletor sem uma linha de script, e continua funcionando com
   a CSP que proíbe script embutido. */
.solta {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 18px; cursor: pointer; text-align: center;
  border: 2px dashed var(--linha-forte); border-radius: var(--raio-m);
  background: var(--superficie-2); color: var(--tinta-2);
  transition: border-color var(--rapido), background var(--rapido);
}
.solta:hover, .solta:focus-within { border-color: var(--verde); background: var(--verde-fundo); }
.solta.pairando { border-color: var(--verde); background: var(--verde-fundo); }
.solta.ocupada { pointer-events: none; opacity: .6; }
.solta b { font-size: 14px; font-weight: 650; }
.ico-solta { width: 28px; height: 28px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta-3); }

.conferindo { display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.girando {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--linha-forte); border-top-color: var(--verde);
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
/* ⚠️ Quem desliga animação não pode ficar sem saber que o painel está trabalhando:
   o anel para de girar, mas continua visível. */
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }

/* As seis contas da prévia. `auto-fit` com mínimo: em tela estreita viram duas
   colunas sozinhas, sem ponto de quebra escrito à mão. */
.fichas-massa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.ficha-massa {
  padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--superficie-2);
}
.ficha-valor { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--tinta); }
.ficha-rotulo { font-size: 11px; color: var(--tinta-3); margin-top: 2px; }
.ficha-massa.bom  { border-color: color-mix(in srgb, var(--verde) 30%, transparent); background: var(--verde-fundo); }
.ficha-massa.bom  .ficha-valor { color: var(--verde); }
.ficha-massa.ruim { border-color: color-mix(in srgb, var(--rosa) 30%, transparent);  background: var(--rosa-fundo); }
.ficha-massa.ruim .ficha-valor { color: var(--rosa); }
.ficha-massa.pede { border-color: color-mix(in srgb, var(--ambar) 30%, transparent); background: var(--ambar-fundo); }
.ficha-massa.pede .ficha-valor { color: var(--ambar); }
.ficha-massa.bom .ficha-rotulo,
.ficha-massa.ruim .ficha-rotulo,
.ficha-massa.pede .ficha-rotulo { color: var(--tinta-2); }

/* ⚠️ Nome PRÓPRIO, não `.situacao`: aquela é inline e `nowrap`, para um estado de
   uma palavra. Aqui são vários motivos, um por linha, e cada um pode ser longo. */
.motivos-linha { display: flex; flex-direction: column; gap: 4px; }
.motivo { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.35; }
.motivo .ico { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.motivo.ruim { color: var(--rosa); }
.motivo.pede { color: var(--ambar); }

tbody tr.linha-ruim { background: color-mix(in srgb, var(--rosa-fundo) 55%, transparent); }
tbody tr.linha-ruim:hover { background: var(--rosa-fundo); }

/* ============ a fila de emissão (passos 2 e 3 da emissão em massa) ============ */

/* O pé da prévia: o botão que põe na fila. ⚠️ Separado do bloco da fila de propósito —
   é outro passo, e passo que parece o mesmo botão vira um clique só. */
.pe-previa {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.pe-previa b { font-size: 14px; }

/* Andamento. Barra fina: o número ao lado é que informa, a barra só dá a proporção
   num relance. ⚠️ Sem transição de largura — ela é redesenhada a cada bloco, e animar
   faria a barra sempre parecer atrasada em relação ao texto. */
.barra-fila {
  height: 6px; border-radius: 999px; background: var(--superficie-2);
  border: 1px solid var(--linha); overflow: hidden; margin: 2px 0 6px;
}
/* ⚠️ `--verde`, NÃO `--verde-vivo`: o menta da marca sobre a superfície clara mede 1,38:1 —
   a barra existiria e não se veria, justamente no tema claro. `--verde` dá 5,0:1 no claro e
   9,8:1 no escuro. Medido, não olhado: no escuro os dois parecem iguais. */
.barra-fila span { display: block; height: 100%; background: var(--verde); }

/* A confirmação do passo 3. ⚠️ `.real` (produção) ganha a borda âmbar: é o único lugar
   da tela onde um clique gera documento fiscal irreversível, e isso tem de se ver antes
   de ler. Cor com significado, e o significado está escrito ao lado. */
.confirma-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 16px; border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: var(--superficie-2);
}
.confirma-fila.real {
  border-color: color-mix(in srgb, var(--ambar) 45%, transparent);
  background: var(--ambar-fundo);
}
.confirma-texto { min-width: 240px; flex: 1 1 320px; font-size: 13px; line-height: 1.5; }
.confirma-texto > b { display: block; font-size: 15px; margin-bottom: 3px; }
.confirma-texto .sutil { margin-top: 4px; }
.em-producao { color: var(--ambar); }
.confirma-botoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============ mandar a nota por e-mail ============ */

/* A prévia do que vai: assunto, anexos e o texto, antes de qualquer envio. */
.previa-email { border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--superficie-2); padding: 12px 14px; margin: 12px 0; }
.linha-previa { display: flex; gap: 12px; font-size: 13px; padding: 3px 0; }
.linha-previa > span { flex: none; width: 70px; color: var(--tinta-3); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.linha-previa > b { min-width: 0; word-break: break-word; }
/* ⚠️ `pre` com quebra: o texto da mensagem tem parágrafos e não pode rolar na horizontal
   dentro da gaveta. */
.texto-email { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--raio-p);
  background: var(--superficie); border: 1px solid var(--linha);
  font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--tinta-2);
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }
.caixinha { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; }

/* ======================== o telefone ========================
 *
 * Até aqui o painel só sabia ser um computador: `.app` é uma grade de 272px mais
 * o resto, então num iPhone de 390pt sobravam 118px de conteúdo. Não havia uma
 * regra de largura no arquivo inteiro — só `prefers-reduced-motion`.
 *
 * ⚠️⚠️ TUDO AQUI É CSS, de propósito. A barra de baixo é a PRÓPRIA `.lateral`,
 *   deitada: os botões já têm `data-tela` e já estão ligados pelo app.js desde
 *   sempre. Mexer no JS para isto seria arriscar a navegação que funciona em
 *   troca de nada. Nenhum botão novo, nenhum ouvinte novo, nenhuma tela nova.
 *
 * ⭐ `.grupo { display: contents }` é o que destrava: os títulos de grupo somem e
 *   os botões viram filhos diretos de `.menu`, então `order:` passa a valer em
 *   cada um e a barra põe na frente o que se usa no telefone, sem tocar no HTML.
 *
 * ⚠️⚠️ ESTE BLOCO DESFAZ DUAS COISAS DO BLOCO DE 900px ACIMA, e as duas de
 *   propósito. Ele vem DEPOIS no arquivo, então ganha nos pontos em que repete:
 *
 *   1. `.rodape-lateral` lá está `display: none`, e o comentário diz que o pé
 *      "já mora na barra de cima". Não mora: `#cert` e `#cofre` existem SÓ ali.
 *      Abaixo de 900px o painel perdia, calado, o aviso de certificado vencendo
 *      e o de cofre fechado. Aqui ele volta, e volta no TOPO (`order: -1`): quem
 *      vai emitir precisa saber disso ANTES de montar a nota, que é a mesma
 *      razão pela qual ler `/api/cofre` é de todo mundo no servidor.js.
 *
 *   2. `.empresa b` lá some. A regra escrita naquele bloco é "o que some é
 *      rótulo, nunca dado" — e o nome da empresa é dado. Num telefone é o dado
 *      mais importante da tela: é por ela que a nota vai sair.
 */
@media (max-width: 820px) {
  :root {
    /* ⚠️ 44px é o mínimo que a Apple pede para tocar. O `.btn` do painel escreve
       8+13+8 ≈ 31px: bom no mouse, pequeno no polegar. */
    --toque: 44px;
  }

  /* ---- a casca vira uma coluna ---- */
  /* ⚠️ `100dvh`, não `100vh`: no Safari do iPhone o `100vh` conta a barra de
     endereço que não está lá e a página nasce mais alta que a tela. */
  .app { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
  .lateral { display: contents; }
  .marca { display: none; }

  /* ⚠️ `display: flex` escrito à mão: sem ele o `display: none` do bloco de 900px
     continua valendo, porque aqui eu só mexia em ordem e espaçamento. Foi
     exatamente o que aconteceu na primeira tentativa — a tira não apareceu. */
  .rodape-lateral {
    display: flex; order: -1; margin-top: 0; padding: 12px 16px 0; gap: 8px;
  }
  .selo-local { display: none; }
  /* ⭐ No telefone a tira só aparece quando há o que resolver. "Certificado A1 ·
     vence em 300 dias" e "Cofre aberto" são `.ok`: notícia boa não paga 40px no
     alto de TODA tela, e cor sem significado tira o destaque da que tem. Ficam
     só `.perto` (âmbar) e `.ruim` (rosa) — os dois papéis que pedem ação.
     ⚠️ Na lateral do computador os `.ok` continuam aparecendo: lá eles moram num
     canto que não disputa espaço com nada. */
  .rodape-lateral .cert.ok { display: none; }
  .rodape-lateral:not(:has(.cert.perto, .cert.ruim)) { display: none; }
  /* Mais apertada que na lateral: aqui ela está no caminho de TODA tela, não num
     canto. O texto é curto de verdade — "Certificado A1 / vence em 16 dia(s)". */
  .cert { padding: 8px 11px; font-size: 11px; line-height: 1.35; }
  /* ⚠️ A caixa do cofre CONTINUA empilhada, e eu tentei o contrário antes de
     entender por quê: o recado "ninguém assina até alguém abrir" é um nó de
     texto solto, sem <span>, então em linha ele vira item de flex e senta ao
     lado do campo de senha. Empilhado fica alto — mas com o cofre fechado nada
     é emitido, e o formulário é justamente o que se precisa naquele momento. */
  .cert.cofre { margin-top: 0; }

  /* ---- o menu deita e vira a barra de baixo ---- */
  .menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    flex-direction: row; gap: 0;
    background: var(--lateral); border-top: 1px solid var(--linha);
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(20, 36, 59, .07);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .menu::-webkit-scrollbar { display: none; }
  .grupo { display: contents; }
  .grupo > .titulo { display: none; }

  /* A ordem do telefone. No computador a lista é por assunto (Emitir, Consultar,
     Cadastro); aqui é por quanto se usa, porque só cabem cinco de uma vez. */
  .menu [data-tela="visao"]      { order: 1; }
  .menu [data-tela="avulsa"]     { order: 2; }
  .menu [data-tela="pendencias"] { order: 3; }
  .menu [data-tela="arquivos"]   { order: 4; }
  .menu [data-tela="relatorio"]  { order: 5; }
  .menu [data-tela="tomadores"]  { order: 6; }
  .menu [data-tela="emissao"]    { order: 7; }
  .menu [data-tela="massa"]      { order: 8; }
  .menu [data-tela="empresas"]   { order: 9; }
  .menu [data-tela="usuarios"]   { order: 10; }

  /* ⚠️ O rótulo é um nó de TEXTO solto dentro do <button>, sem <span> à volta:
     CSS não alcança para encurtar. Então ele quebra em duas linhas numa caixa de
     altura fixa — assim "Notas com pendência" cabe e todos os ícones ficam na
     mesma linha de base. */
  /* ⚠️ Altura FIXA, não mínima: "Notas com pendência" quebra em duas linhas e
     "PDF e XML" não, e com altura automática os ícones dançavam de um botão para
     o outro. 60px é o que cabe: 7 de pé + 20 de ícone + 4 de vão + duas linhas
     de 11,9 + 5 de pé. */
  /* ⚠️ Com 84px fixos só cabiam 3 abas e meia num iPhone de 375pt, e Pendências
     — que é a terceira coisa mais usada — nascia fora da tela. A conta agora é
     "quatro abas e meia na largura que houver": a meia aba cortada na direita é
     o que diz, sem escrever, que a barra rola. */
  .menu button {
    flex: 0 0 auto; width: calc((100vw - 12px) / 4.5); min-width: 68px; max-width: 96px;
    height: 60px;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 7px 4px 5px; border-radius: var(--raio-p);
    font: 600 9.5px/1.25 var(--fonte); text-align: center;
    position: relative; white-space: normal;
  }
  .menu button .ico { width: 20px; height: 20px; }
  .menu button[aria-current="page"] { background: none; color: var(--verde); }

  /* A pílula contada deixa de empurrar a linha e vira selo no canto. */
  .menu .conta {
    position: absolute; top: 3px; right: 13px; margin: 0;
    font-size: 9.5px; padding: 1px 5px; line-height: 1.35;
  }

  /* ---- a barra de cima ---- */
  /* A trilha dizia "MX Notas / Visão geral": no telefone a barra de baixo já diz
     em que tela a pessoa está, e a largura vale mais que a repetição. */
  .topo { padding: 8px 16px; min-height: var(--toque); gap: 8px; }
  .topo .trilha { display: none; }
  .topo .direita { gap: 6px; }
  .topo .quem > div { display: none; }
  .topo .quem { padding: 4px; border: 0; background: none; }
  /* ⭐ O nome da empresa VOLTA (ver o cabeçalho deste bloco): é por ela que a
     nota sai, e no telefone é o único jeito de saber em qual você está. */
  .empresa { padding: 4px 9px 4px 6px; min-width: 0; }
  .empresa b { display: block; font-size: 12px; max-width: 42vw; }
  .icone-botao { width: var(--toque); height: var(--toque); }

  /* ---- o conteúdo ---- */
  /* ⚠️ O pé tem de limpar a barra de baixo, que é fixa e flutua por cima. Sem
     isto a última linha de toda lista fica embaixo dos ícones. */
  .painel { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .cabeca { gap: 12px; margin-bottom: 16px; }
  .cabeca h1 { font-size: 19px; }
  /* ⚠️ `auto-fit, minmax(192px)` dava UMA coluna em 343px úteis, e três cartões
     de 100px viravam uma rolagem só para ler três números. Dois lado a lado
     cabem e é o que o desenho aprovado mostra. */
  .tiras { grid-template-columns: 1fr 1fr; }
  .tira .rotulo { font-size: 10px; }
  .cabeca .direita { margin-left: 0; width: 100%; }
  .cabeca .direita input[type="search"],
  .filtros input[type="search"] { min-width: 0; width: 100%; }
  .filtros { width: 100%; }
  .bloco > header { padding: 12px 14px; }
  .bloco .corpo { padding: 14px; }
  .tiras { gap: 10px; margin-bottom: 14px; }
  .tira { padding: 14px 15px; }
  .tira .numero { font-size: 25px; }
  .duas { gap: 14px; }
  .btn { min-height: var(--toque); }
  .btn.miudo { min-height: 36px; }

  /* ⚠️⚠️ 16px nos campos NÃO é gosto: abaixo disso o Safari do iPhone dá zoom na
     página inteira a cada toque num campo, e a pessoa fica arrastando a tela de
     volta depois de cada digitação. É a única medida aqui que não veio do tema. */
  input, select, textarea { font-size: 16px; }
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="password"], select, textarea { min-height: var(--toque); }

  /* ---- a gaveta vira folha de baixo para cima ---- */
  .gaveta { width: 100%; border-left: 0; }
  .gaveta > header { padding: 14px 16px; }
  .gaveta .conteudo { padding: 16px; }
  .gaveta .pe-gaveta { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }

  /* ---- o portão ---- */
  .cartao-portao { padding: 24px 20px; }
}