/*
 * GestorApp — painel de computador.
 *
 * Paleta da Mateus Informática (SmartMI/marca/IDENTIDADE-VISUAL.md), hex
 * copiados do documento. O sistema tem de parecer da mesma casa que o SmartMI,
 * e não do que ele substitui.
 */
/*
 * O [hidden] do navegador tem especificidade zero: QUALQUER display do nosso
 * CSS ganha dele. Sem esta regra, .entrada, .app, .campo e .erro tinham display
 * proprio e nunca sumiam -- a tela de login ficava por cima do sistema depois
 * de entrar, e os campos de primeiro acesso apareciam no login normal.
 * Esconder e decisao do JS; aqui so garantimos que ela valha.
 */
[hidden] { display: none !important; }

:root {
  /* MADALICE STORE: marrom do monograma, dourado e creme (do logo do Instagram). */
  --navy-950:#150802; --navy-900:#2b1206; --navy-850:#3b1b09; --navy-800:#4d270f;
  --blue-600:#9a7333; --blue-500:#b08d57; --blue-400:#c8a877; --blue-300:#e0c9a2;
  --blue-100:#f1e5d2; --blue-50:#fbf6ef;
  /* O destaque (nome no cabeçalho, botão escolhido): o ouro da MadaLice. */
  --ouro:#e0b54a; --ouro-escuro:#c9a227;

  --bg:#faf6f1; --surface:#ffffff; --bg-mute:#f3e9dc;
  --border:#e8dccb; --text:#2b1a10; --text-soft:#6b5746; --text-mute:#8e7b69;

  /* Verde e vermelho carregam significado aqui: entra / sai dinheiro. */
  --entra:#0f8a4d; --entra-fraco:#e7f6ee;
  --sai:#c0392b;   --sai-fraco:#fdecea;
  --alerta:#b45309; --alerta-fraco:#fef3c7;
  /* Amarelo pedido pelo usuário especificamente pro "Com Ressalvas" do
     Monitoramento -- não é o --alerta (âmbar) usado no resto do sistema. */
  --amarelo-ressalvas:#f7d417;
  --laranja:#ea6a12;
  --financeiro:#3e5a3c;
  --roxo:#6d28d9;
  --rosa:#db2777;

  --r:12px; --r-g:18px;
  --lateral: 232px;
  /* Uma medida so: a marca na lateral e o cabecalho tem de fechar na mesma
     linha. Duas alturas soltas desalinham no primeiro ajuste de fonte. */
  --cabecalho: 132px;   /* alto o bastante para as duas logos (20/09/2026) */
  --sombra:0 1px 2px rgba(43,18,6,.06), 0 4px 14px rgba(43,18,6,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#120802; --surface:#1e0f06; --bg-mute:#2b1a0e; --border:#3a2616;
    --text:#f5ece0; --text-soft:#d3bda3; --text-mute:#b09a80;
    --entra-fraco:#0d2a1c; --sai-fraco:#2a1210; --alerta-fraco:#2b2008; --blue-50:#2a1a0c;
  }
}

/*
 * Modo escuro MANUAL, escolhido na Paleta de Cores do Cadastro da Empresa --
 * vale por cima do que o sistema operacional disser (a media query acima é
 * só o padrão de quem nunca escolheu nada). Mesmos valores, virando classe
 * em vez de preferência do SO.
 */
:root[data-tema="escuro"] {
  --bg:#120802; --surface:#1e0f06; --bg-mute:#2b1a0e; --border:#3a2616;
  --text:#f5ece0; --text-soft:#d3bda3; --text-mute:#b09a80;
  --entra-fraco:#0d2a1c; --sai-fraco:#2a1210; --alerta-fraco:#2b2008; --blue-50:#2a1a0c;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==================================================== entrada ===== */

.entrada {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
}
.entrada__cartao {
  width: min(420px, 100%); background: var(--surface);
  /* 14px de contorno no cartao de entrada. */
  border-radius: 14px; padding: 2rem; box-shadow: 0 24px 60px rgba(4,16,42,.4);
}
/* Cartao mais apertado que o resto do sistema: com a marca maior e os
   telefones do suporte embaixo, o espacamento normal dos campos empurrava
   o rodape para fora da tela em monitor baixo. */
.entrada__cartao .campo { margin-bottom: .5rem; }
.entrada__cartao .botao--largo { margin-top: 0; }
.entrada__cartao .elo { margin-top: .35rem; }
/*
 * A marca vira uma faixa azul sangrada ate a borda do cartao: as margens
 * negativas de 2rem cancelam o padding do .entrada__cartao. Sem isso ficaria
 * um retangulo azul flutuando com moldura branca em volta.
 */
.entrada__marca {
  /* Três colunas: logo da loja | nome | nossa logo. Grid, e não flex, para o
     nome ficar centralizado de verdade mesmo com logos de larguras diferentes. */
  /* Colunas laterais do MESMO tamanho (1fr cada): assim o nome fica
     centralizado de verdade no cartão, e não no espaço que sobra entre duas
     logos de larguras diferentes. */
  /* auto | 1fr | auto: o nome fica centralizado no ESPAÇO ENTRE as duas
     logos, que é o que o Mateus pediu — e não no meio do cartão. */
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  margin: -2rem -2rem 1.2rem; padding: .9rem 1.2rem;
  /* Navy profundo, nao o azul claro: e sobre ele que o brilho da logo aparece.
     Em azul chapado o halo se perde e a logo escura afunda. */
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  border-radius: 14px 14px 0 0;
}
/*
 * O brilho e drop-shadow, nao box-shadow: box-shadow desenha em volta da CAIXA
 * da imagem e daria a moldura retangular que estava errada. drop-shadow segue o
 * recorte do PNG, entao o halo acompanha o contorno da propria logo -- que e o
 * efeito do logo-brilho da marca.
 *
 * Sao tres camadas: uma branca curta para separar a logo do fundo, e duas azuis
 * mais largas que espalham. Uma so fica dura, com cara de contorno.
 *
 * Altura fixa e largura livre porque a logo e deitada (quase 3:1); travar num
 * quadrado desenhava ela com 15px de altura.
 */
.entrada__logo {
  /* Mesma altura para as duas; a da Mateus é deitada e a da loja é quadrada,
     então cada uma fica na sua ponta e ocupa o mesmo peso visual. */
  height: 62px; width: auto; max-width: 140px; object-fit: contain; justify-self: end;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.9))
    drop-shadow(0 0 9px rgba(99,166,255,.75))
    drop-shadow(0 0 20px rgba(47,131,245,.55));
}
/* Coladas: line-height curto e margem zero, como o brand-mark/brand-sub do
   padrao, onde o subtitulo encosta no nome. */
.entrada__marca strong {
  display: block; font-size: 1.5rem; color: #fff;
  line-height: 1.15; letter-spacing: -.3px; margin: 0;
}
.entrada__marca span {
  display: block; font-size: .95rem; color: var(--blue-100);
  line-height: 1.2; margin: 0;
}

/*
 * Quem vai entrar.
 *
 * Azul claro e não verde: não é confirmação de que a senha está certa, é só o
 * nome de quem tem esse e-mail. Verde faria a pessoa achar que já entrou.
 */
.usuario-atual {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  color: var(--blue-600); border-radius: var(--r);
  padding: .5rem .7rem; margin: 0;
  font-size: .88rem; font-weight: 600;
}

/* ======================================================= app ====== */

/* Coluna: a grade lateral+corpo em cima, o rodape atravessando embaixo.
   Com o rodape DENTRO da grade ele comecaria depois da lateral, e o canto
   esquerdo -- que e onde vai cidade e hora -- nao existiria.
 *
 * Moldura FIXA no computador: .app trava em 100vh e nunca rola -- so o
 * <main> por dentro rola (overflow-y:auto la embaixo). Cabecalho, rodape e
 * menu lateral ficam parados o tempo todo, sem depender de position:sticky.
 * Antes a lateral tentava fazer isso sozinha com sticky+max-height:100vh, e
 * se soltava (rolava junto) assim que o conteudo da tela ficava mais alto
 * que a janela -- porque sticky so funciona dentro da altura da PROPRIA
 * caixa, e o max-height cortava essa caixa em 100vh mesmo quando a grade
 * (puxada pelo conteudo do corpo) era mais alta que isso.
 * No celular a regra muda: a pagina INTEIRA rola (ver @media 860px), entao
 * la embaixo isso e desfeito.
 */
.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app__painel {
  /* O cabeçalho atravessa a tela toda, por cima da lateral também; aqui
     ficam só o menu e a área de trabalho, começando abaixo dele. */
  display: grid; grid-template-columns: var(--lateral) 1fr;
  flex: 1; min-height: 0;
}

.lateral {
  background: var(--navy-900); color: #fff;
  display: flex; flex-direction: column; min-height: 0;
}
/*
 * A faixa da logo do cliente. Ocupa TODO o espaço até o menu -- é a marca da
 * loja, e é a primeira coisa que quem senta no balcão vê. Era só a altura do
 * cabeçalho; o resto do espaço estava gasto com uma frase explicando que o
 * menu ficava logo abaixo, que ninguém precisa ler duas vezes.
 */
.lateral__marca {
  display: flex; align-items: center; justify-content: center;
  padding: .6rem .5rem; min-height: calc(var(--cabecalho) + 62px);
}
/* A logo é o botão de trocar a logo. O realce no hover é o que conta isso
   sem precisar de um "editar" escrito em cima da marca da empresa. */
.lateral__marca--clicavel { cursor: pointer; }
.lateral__marca--clicavel:hover { background: rgba(255,255,255,.06); }

/* As regras do arquivo, na janela da logo. Lista, e não parágrafo: são
   quatro coisas independentes, e em texto corrido a pessoa lê a primeira e
   pula o resto. */
.logo-explica { margin-bottom: .6rem; }
.logo-regras { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .85rem; color: var(--text-soft); line-height: 1.5; }
.logo-regras li { margin-bottom: .3rem; }
/* Sem logo cadastrada ainda: convite tracejado, na mesma cor fraca que muda
   com a paleta (var(--blue-300)) -- e nao um texto solto, que pareceria
   defeito em vez de convite. Quadrado (nao retangulo), do mesmo tamanho mais
   ou menos do que o texto dos itens do menu logo abaixo (Home, Cadastros) --
   e nao esticado de ponta a ponta da lateral. */
.logo-vazio {
  width: 150px; aspect-ratio: 1 / 1;
  border: 2px dashed var(--blue-300); border-radius: var(--r);
  color: var(--blue-300); font-size: .9rem; font-weight: 600; text-align: center;
  display: flex; align-items: center; justify-content: center; padding: .5rem;
}
/* O mesmo brilho da tela de entrada -- drop-shadow segue o recorte do PNG, e
   nao a caixa da imagem. Ver .entrada__logo. */
.lateral__logo {
  /* Cresce pela LARGURA da lateral, nao por altura fixa: a logo e deitada, e
     e a largura que decide o tamanho que ela aparenta. O max-height segura a
     altura para nao estourar a faixa -- que agora e a faixa inteira. */
  width: 100%; height: auto; max-height: calc(var(--cabecalho) + 48px);
  object-fit: contain;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.9))
    drop-shadow(0 0 9px rgba(99,166,255,.75))
    drop-shadow(0 0 20px rgba(47,131,245,.55));
}

/*
 * O menu e a faixa CLARA entre a marca e o rodape, os dois em navy. O item
 * escolhido inverte: fica navy dentro do azul, e por isso se le de longe --
 * mais azul dentro de azul se perderia.
 */
.menu { flex: 1; overflow-y: auto; padding: .3rem .5rem .5rem; background: var(--blue-600); }

/* ---------------------------------------------------- implantação
 * Sem empresa cadastrada, o menu inteiro fica fora do ar: tudo no sistema
 * pendura numa empresa, e cada tela daria um erro diferente. Apagado E
 * sem clique -- só apagado ainda deixaria clicar, e só sem clique pareceria
 * defeito ("cliquei e não foi"). A saída é o Sair, que fica fora do menu.
 */
.menu--travado { opacity: .45; pointer-events: none; user-select: none; }
/*
 * Item enxuto de proposito: sao 16 no menu.
 *
 * Com .6rem de altura eles somavam ~640px e, junto com os 104px da faixa da
 * marca, passavam da altura da tela -- o menu virava uma caixinha rolando com
 * dois itens a vista. Aqui cada item fica em ~33px e os 16 cabem inteiros.
 */
.menu__item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .4rem .7rem; margin-bottom: 1px;
  background: transparent; border: 0; border-radius: 8px;
  color: #fff; font: inherit; font-size: .86rem; text-align: left; cursor: pointer;
}
/* So no computador: no celular a marca+atalhos ja dizem onde a pessoa esta,
   e o menu completo vem la embaixo (ver @media 860px), sem precisar de
   titulo repetindo o obvio. */
.menu__item:hover { background: rgba(255,255,255,.16); }
.menu__item--ativo { background: var(--navy-900); color: #fff; font-weight: 600; }
.menu__icone { width: 20px; text-align: center; font-size: 1rem; flex: none; }
/* Verde/vermelho puro do --entra/--sai perderia contraste no azul do menu;
   uma versao mais clara e a mesma ideia de "entra/sai dinheiro" mas legivel. */
.menu__icone--entra { color: #4ade80; }
.menu__icone--sai { color: #ff8a80; }
/* Distintivo do grupo Financeiro -- circulo branco por baixo do emoji
   (a nota verde ja vem colorida pelo proprio emoji). */
.menu__icone-circulo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; font-size: .78rem;
}
/* Quem não tem permissão vê o item apagado, e sabe que existe. */
.menu__item--bloqueado { opacity: .38; cursor: not-allowed; }

/*
 * Grupo com submenu ("Cadastros"). Fechado por padrao -- so os 4 itens dele
 * empurrariam o resto do menu pra baixo o tempo todo. Abre no clique do
 * cabecalho, ou sozinho quando a tela ativa e uma das filhas (marcarMenu).
 */
.menu__grupo-cabecalho { position: relative; }
.menu__seta { margin-left: auto; transition: transform .15s; opacity: .8; }
.menu__grupo--aberto > .menu__grupo-cabecalho .menu__seta { transform: rotate(90deg); }
.menu__submenu { display: none; padding-left: .6rem; }
.menu__grupo--aberto > .menu__submenu { display: block; }
.menu__item--sub { font-size: .82rem; }
.menu__item--sub .menu__icone { font-size: .88rem; }

.corpo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/*
 * O cabecalho e a mesma faixa da lateral, continuando: navy escuro, mesma
 * altura. Antes era branco e cortava a barra em duas cores na mesma linha.
 */
.topo {
  /* Duas colunas: titulo a esquerda (mesmo padding-left do <main>, entao
     alinha com a tela branca logo abaixo) e o bloco da direita encostado
     na ponta. Duas colunas, e nao flex: com flex o titulo empurraria ou
     seria empurrado pelo bloco da direita conforme o texto dele muda. */
  /* Três colunas: logo da loja | título | bloco da direita (Sair, telefones
     e a logo da Mateus). As duas logos ficam nas pontas, na mesma linha. */
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1rem;
  padding: .5rem 1.25rem; min-height: var(--cabecalho);
  background: var(--navy-900); color: #fff;
  border-bottom: 1px solid var(--navy-850);
}
/* Cresceu junto com a faixa: a 1,1rem o titulo boiava no meio de 104px de
   altura. As duas linhas somadas ocupam agora pouco mais da metade da faixa,
   que e o que deixa a marca com peso sem encostar nas bordas. */
.topo__titulo { text-align: left; line-height: 1.12; }
.topo__titulo strong { display: block; font-size: 2.1rem; font-weight: 700; color: #fff; letter-spacing: -.5px; }
.topo__titulo span { display: block; margin-top: .35rem; font-size: 1.02rem; color: var(--blue-300); }
.topo__sair {
  padding: .3rem 1.1rem; border-radius: 999px;
  background: #fff; border: 1px solid #fff;
  color: var(--navy-900); font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer;
}
.topo__sair:hover { background: var(--blue-50); border-color: var(--blue-50); }

/*
 * Trocar de Empresa -- redondo, azul, seta em círculo branca (mesmo ícone
 * "repetir/trocar" universal). O aviso do MatIA aqui é balão de HOVER, e não
 * o alerta em modal (alertaPadrao) usado no resto do sistema: é um lembrete
 * de passagem que aparece ao encostar o mouse, não um aviso que precisa de
 * clique pra sumir -- clicar é o que o botão já faz sozinho.
 */
.trocar-empresa { position: relative; display: inline-flex; align-self: center; }
.trocar-empresa__botao {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--blue-500); border: 1px solid var(--blue-500);
  display: grid; place-items: center; cursor: pointer;
}
.trocar-empresa__botao:hover { background: var(--blue-600); border-color: var(--blue-600); }
.trocar-empresa__balao {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  display: flex; align-items: center; gap: .4rem;
  width: max-content; max-width: 220px;
  background: #fff; color: var(--navy-900); font-size: .78rem; font-weight: 600;
  padding: .5rem .7rem; border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
}
.trocar-empresa:hover .trocar-empresa__balao,
.trocar-empresa:focus-within .trocar-empresa__balao { opacity: 1; transform: translateY(0); }
.trocar-empresa__matia { width: 26px; height: 26px; flex: none; border-radius: 50%; }

/* Os dois botões redondos do canto (Trocar de Empresa + Instagram), lado a
   lado, depois da logo da Mateus. */
/* Um embaixo do outro -- Trocar de Empresa em cima, Instagram embaixo. */
.botoes-canto { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-left: .6rem; }

/* Instagram da Mateus Informática -- mesmo tamanho do botão de trocar
   empresa, cor de marca do próprio Instagram (gradiente oficial). */
.instagram-botao {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%,
    #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.instagram-botao:hover { filter: brightness(1.08); }

/* O Voltar -- do cabeçalho de tela e dos atalhos da Home. Tamanho, formato e
   cor vêm do BOTÃO PADRÃO DE TELA, lá embaixo: é o mesmo botão do Novo, e
   ter os dois com medidas diferentes era o que fazia o cabeçalho parecer
   torto. Aqui sobra só o que é dele. */
.botao--pilula { white-space: nowrap; }

/* Os telefones do suporte. Ficam no cabecalho porque e onde a pessoa olha
   quando algo nao funciona -- rodape sai da vista em tela cheia de lista. */
.suporte { display: flex; flex-direction: column; gap: .1rem; }
.suporte a {
  display: flex; align-items: center; gap: .3rem;
  color: #fff; text-decoration: none;
  font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.suporte a:hover { text-decoration: underline; }
.zap { width: 13px; height: 13px; fill: #25D366; flex: none; }

/* Os mesmos telefones, no cartão de entrada. Lá em cima eles ficam sobre o
   navy do cabeçalho; aqui o fundo é branco, então a letra branca vira azul
   -- e a linha de cima separa o suporte do "Esqueci o e-mail e a senha",
   que é outro assunto. */
/* Os dois numeros lado a lado: em coluna eram duas linhas de altura e
   empurravam o botao azul para baixo. */
.suporte--entrada {
  flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: .4rem 1.1rem;
}
.suporte--entrada a { color: var(--blue-600); font-size: .85rem; }
.suporte--entrada .zap { width: 15px; height: 15px; }

/* ======================= SEPARADOR COM TÍTULO =====================
 *
 * Linha fina atravessando, com a palavra sentada NO meio dela -- a linha
 * para antes da palavra e recomeça depois. Uma linha inteira com o texto
 * por baixo gastaria duas alturas para dizer a mesma coisa.
 *
 * Os dois traços são ::before/::after com flex:1, então eles se dividem o
 * que sobra: a palavra fica centrada sozinha, sem ninguém medir pixel.
 */
.separador {
  display: flex; align-items: center; gap: .7rem;
  margin: .9rem 0 .5rem;
}
.separador::before, .separador::after {
  content: ''; flex: 1 1 0; height: 1px; background: var(--border);
}
.separador span {
  font-size: .72rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-mute);
}

/* ============================ DESPEDIDA ==========================
 * O mesmo cartão da entrada, sem os campos. É a última tela que a pessoa
 * vê, então ela agradece -- e mantém o Suporte à vista, porque quem sai
 * por causa de um problema precisa do telefone tanto quanto quem não
 * consegue entrar.
 */
.despedida__frase {
  margin: .2rem 0 1.1rem; text-align: center;
  font-size: 1.15rem; color: var(--text);
}
/* Os "!!!" da assinatura da casa, o mesmo destaque do cabeçalho. */
.despedida__frase em { font-style: normal; font-weight: 700; color: var(--blue-500); }

/* Os dois lado a lado e do mesmo tamanho: são duas saídas do mesmo peso,
   e uma embaixo da outra a de cima parecia a "certa". O azul no Entrar é
   só porque é para onde a maioria volta. */
.despedida__botoes { display: flex; gap: .6rem; }
.despedida__botoes .botao { flex: 1 1 0; padding: .7rem; font-size: .95rem; font-weight: 600; }

.despedida__recado {
  margin: .2rem 0 0; text-align: center;
  font-size: 1rem; line-height: 1.5; color: var(--text-soft);
}
.topo__direita {
  /* Linha, e nao mais coluna: a assinatura da Mateus (.marca-dev) fica do
     LADO do bloco Sair+telefones (.topo__acoes), nao embaixo. Gap pequeno
     de proposito -- os dois blocos formam um so canto, e nao duas coisas
     soltas no cabecalho.
     stretch, e nao center: os dois lados ficam com a MESMA altura, entao o
     traco (border-left do .marca-dev) fecha exatamente do topo do Sair ao
     fundo dos telefones -- com center sobrava uns pixels de traco para cima
     e para baixo, que nao existem na referencia. */
  justify-self: end; display: flex; flex-direction: row;
  align-items: stretch; gap: 0;
}
.topo__acoes {
  /* space-between, e nao stretch/center: com a altura esticada pra bater com
     a logo ao lado, o Sair e os telefones precisam se espalhar do topo ao
     fundo -- senao os dois ficariam juntos no meio, com vao sobrando embaixo
     (ou em cima) e sem uso.
     stretch (largura), e nao flex-end: assim o Sair toma a largura do bloco -- que quem
     define sao os telefones, o item mais largo. Encaixotado no proprio texto
     ele ficava mais estreito que os numeros embaixo. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
}

/*
 * Assinatura de quem desenvolveu o sistema -- pequena, do lado do Sair e
 * dos telefones. Antes essa marca era A logo da lateral inteira; agora a
 * lateral e da logo do CLIENTE, e a Mateus vira só este selo discreto.
 * "Desenvolvimento" embaixo, centralizado pela largura da propria imagem --
 * que e onde a base do triangulo/piramide do logo cai.
 */
.marca-dev {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  /* Encostada no extremo direito do cabeçalho (pedido do Mateus, 20/09/2026):
     os dois botões redondos que ficavam depois dela saíram, então ela vira a
     última coisa da linha e cola na borda. */
  /* Quase encostando na borda direita do cabeçalho (pedido do Mateus). */
  /* Folga MEDIDA: o desenho da logo da MADALICE começa a 24px da borda
     esquerda do cabeçalho; a nossa (que tem 23,5% de vazio à direita no PNG)
     precisa deste puxão para terminar também a 24px da borda direita. */
  margin-left: .2rem; margin-right: -63px; text-decoration: none; color: inherit;
}
.marca-dev:hover { opacity: .88; }
/* A copia de dentro da .lateral__marca so existe pro celular -- no
   computador ela ficaria duplicada com a do cabecalho. Ver @media 860px
   pra troca (essa aparece, a do cabecalho some). */
.marca-dev--mobile { display: none; }
/* O maior possivel dentro do cabecalho, com o mesmo brilho branco da tela
   de entrada (ver .entrada__logo / .lateral__logo -- o recorte do PNG e
   escuro, sem o drop-shadow ele some no navy do cabecalho). */
.marca-dev__logo {
  height: calc(var(--cabecalho) - 40px); width: auto; object-fit: contain;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.9))
    drop-shadow(0 0 8px rgba(99,166,255,.7));
}
/* Nowrap e fonte pequena de proposito: nao pode passar da largura da base
   do triangulo do logo, que e mais estreita que a palavra inteira num
   tamanho normal. */
.marca-dev span {
  /* Esticada até a base do triângulo da logo: bloco do tamanho da imagem e
     letras espalhadas para preencher a linha inteira. */
  /* 46% é a BASE do triângulo medida no PNG (173 de 378 px, centrada):
     a palavra termina onde o triângulo termina, não na borda da imagem. */
  display: block; width: 46%; margin: 0 auto; box-sizing: border-box;
  color: #fff; font-size: .78rem; font-weight: 600; opacity: .85; white-space: nowrap;
  text-align: justify; text-align-last: justify; text-justify: inter-character;
  padding: 0 .1rem;
}

.chip {
  font-size: .78rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--bg-mute); color: var(--text-soft);
}
.chip--papel { background: var(--blue-50); color: var(--blue-600); font-weight: 600; }
.chip--aberto { background: var(--entra-fraco); color: var(--entra); font-weight: 600; }
.chip--fechado { background: var(--sai-fraco); color: var(--sai); font-weight: 600; }

main { padding: 1.25rem; flex: 1; overflow-y: auto; min-height: 0; }

/*
 * Rodape.
 *
 * Mesmo navy do cabecalho, fechando a tela em cima e embaixo. Fica no .corpo e
 * nao no .app porque a lateral ja termina no proprio botao Sair -- rodape
 * atravessando por baixo dela cortaria o menu.
 *
 * Gruda embaixo pelo flex do .corpo: o main leva flex:1 e empurra o rodape
 * para o fim mesmo em tela vazia. Sem position:fixed, que taparia conteudo.
 */
/* Tres colunas iguais nas pontas, para o USUÁRIO cair no meio de verdade --
   e nao no meio do que sobra entre cidade e empresa, que mudam de tamanho. */
.rodape {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1rem;
  padding: .55rem 1.25rem;
  background: var(--navy-900); color: rgba(255,255,255,.78);
  border-top: 1px solid var(--navy-850); font-size: .8rem;
}
.rodape strong { color: #fff; font-weight: 700; letter-spacing: .3px; }
.rodape__local {
  justify-self: end; color: var(--blue-300);
  font-variant-numeric: tabular-nums;
}
.rodape__usuario { text-align: center; }

/* ===================== TÍTULO PADRÃO DE TELA ======================
 *
 * UM tamanho para o título de tela, seja h1 ou h2. Antes cada tela punha o
 * seu por style= na marra (1.05rem aqui, 1.1rem ali, o padrão do navegador
 * acolá) e o nome da tela mudava de tamanho conforme a tela -- em cima do
 * mesmo par de botões, que é o que fazia a linha parecer torta.
 *
 * .titulo--secao é o segundo nível: subtítulo DENTRO da tela ("Lançamentos",
 * "Certificado digital"). Também um só tamanho, para o mesmo motivo.
 */
.titulo { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 700; }
.titulo--secao { font-size: 1.05rem; }
.linha-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.espaco { flex: 1; }

/* Sugestões / Reclamações. */
.sugestao-titulo {
  font-size: 1.05rem; font-weight: 400; color: var(--blue-600);
  max-width: 640px; margin: -.3rem 0 1.25rem;
}
.sugestao-texto { min-height: 220px; resize: vertical; }

/* =================================================== atalhos ====== */

/*
 * A caixinha "Acessar por atalhos" e coisa de CELULAR.
 *
 * No computador o menu inteiro esta sempre a vista na lateral, entao os
 * atalhos sao um atalho de verdade e nunca atrapalham -- vem sempre, e a
 * caixinha nem aparece. No celular a lista de menus ja ocupa a tela toda, e ai
 * faz diferenca poder desligar os atalhos. Ver o @media la embaixo.
 */
/* O titulo a esquerda e a caixinha encostada no canto direito da area
   branca -- que e onde a mao ja esta quando se olha para os atalhos. */
/* ===================== CABEÇALHO PADRÃO DE TELA ===================
 *
 * Três lugares fixos, iguais em toda tela: Voltar na esquerda, título no
 * MEIO, ação na direita. Grade e não flex de propósito -- com flex o
 * título escorregava conforme o tamanho do nome da tela e do botão, e
 * nenhuma tela ficava com o título no mesmo lugar da anterior.
 *
 * As duas pontas têm a mesma largura mínima (a do botão padrão, 132px),
 * inclusive quando a tela não tem botão de ação: é isso que deixa o título
 * centralizado DE VERDADE, e não centralizado no que sobrou.
 */
.linha-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.linha-titulo .titulo { margin: 0; }
.linha-titulo__acoes { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }

/* O cabeçalho DA TELA -- o de cima, com Voltar. Os outros .linha-titulo são
   subtítulos de dentro da tela ("Lançamentos", "Tipos de pagamento") e
   continuam sendo uma linha comum. */
.linha-titulo--tela {
  display: grid; grid-template-columns: minmax(132px, auto) 1fr minmax(132px, auto);
  flex-wrap: nowrap;
}
.linha-titulo--tela .titulo { text-align: center; }
.marcar--canto { padding: .3rem .5rem; font-size: .85rem; color: var(--text-soft); }
.marcar--canto span { font-weight: 600; }

.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
/* DEPOIS de .atalhos de proposito: as duas regras tem a mesma
   especificidade, entao quem vence e a ultima do arquivo. Antes dela,
   esta linha nao escondia nada. */
.atalhos--ocultos { display: none; }
.atalho {
  /* Borda na cor da paleta (hoje o azul --blue-500; quando a paleta de cores
     virar de verdade, e so trocar essa variavel que todo cartao acompanha). */
  background: var(--surface); border: 1px solid var(--blue-500); border-radius: var(--r-g);
  padding: 1.3rem .8rem; text-align: center; cursor: pointer;
  font: inherit; color: var(--text); box-shadow: var(--sombra);
}
/* border-box (regra global do arquivo) segura o tamanho do cartao igual
   antes e depois -- so o CONTORNO engrossa, o card nao "pula" nem empurra
   o vizinho ao lado. */
.atalho:hover { border-width: 3px; border-color: var(--blue-600); transform: translateY(-1px); }
.atalho__icone { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.atalho__icone--entra { color: var(--entra); }
.atalho__icone--sai { color: var(--sai); }
.atalho__nome { font-size: .88rem; color: var(--blue-600); font-weight: 600; }

/*
 * Contas a Receber / Contas a Pagar destacam sozinhas -- fundo verde/vermelho
 * cheio, e nao so o icone -- porque sao a pergunta financeira do dia, e o
 * dono tem de achar isso sem ler tudo. O icone continua na MESMA cor do
 * fundo (so que dentro do circulo branco), entao a paleta so muda quem
 * corre o show.
 *
 * Cadastros usa o mesmo desenho, em azul (a mesma cor do menu lateral) --
 * e' o grupo, entao pesa tanto quanto os dois cartoes financeiros.
 */
.atalho--azul, .atalho--verde, .atalho--laranja, .atalho--financeiro,
.atalho--roxo, .atalho--rosa { border: none; }
.atalho--azul { background: var(--blue-600); }
/* Cadastros em verde: e o grupo por onde tudo comeca, e verde le como
   "entrada", que e o que se faz ali -- por o cadastro no sistema. */
.atalho--verde { background: var(--entra); }
.atalho--laranja { background: var(--laranja); }
.atalho--financeiro { background: var(--financeiro); }
.atalho--roxo { background: var(--roxo); }
.atalho--rosa { background: var(--rosa); }
.atalho--azul .atalho__nome, .atalho--verde .atalho__nome, .atalho--laranja .atalho__nome,
.atalho--financeiro .atalho__nome, .atalho--roxo .atalho__nome,
.atalho--rosa .atalho__nome { color: #fff; }
.atalho--azul .atalho__icone, .atalho--verde .atalho__icone, .atalho--laranja .atalho__icone,
.atalho--financeiro .atalho__icone, .atalho--roxo .atalho__icone,
.atalho--rosa .atalho__icone {
  width: 2.5rem; height: 2.5rem; margin: 0 auto .6rem; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
}
.atalho--azul .atalho__icone { color: var(--blue-600); }
.atalho--verde .atalho__icone { color: var(--entra); }
.atalho--financeiro .atalho__icone { color: var(--financeiro); }
.atalho--roxo .atalho__icone { color: var(--roxo); }
.atalho--rosa .atalho__icone { color: var(--rosa); }
/* Quadrado, e nao circulo, so no de Movimentações -- pra diferenciar as
   setas (que já formam um circulo sozinhas) do resto dos cartoes. */
.atalho--laranja .atalho__icone { border-radius: var(--r); color: var(--laranja); }

/*
 * Contas a Receber / Contas a Pagar: cartao BRANCO, igual aos outros -- so o
 * circulo do icone e que carrega a cor (verde/vermelho), com o cifrao em
 * branco por dentro. Inverso do Cadastros/Movimentações de proposito: sao
 * SO dois cartoes (nao um grupo), e cartao inteiro colorido ao lado de
 * cartao branco comum ja bastava pra chamar a atenção.
 */
.atalho--entra .atalho__icone, .atalho--sai .atalho__icone {
  width: 2.5rem; height: 2.5rem; margin: 0 auto .6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
}
.atalho--entra .atalho__icone { background: var(--entra); }
.atalho--sai .atalho__icone { background: var(--sai); }

/* ==================================================== placar ====== */

/*
 * A barra de período do placar. Fica ACIMA dos cartões porque é ela que manda
 * neles: ler o número antes de saber de que dia ele é leva a decisão errada.
 */
.periodo {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .85rem; font-size: .85rem; color: var(--text-soft);
}
.periodo label { display: flex; align-items: center; gap: .4rem; }
.periodo input {
  font: inherit; padding: .35rem .5rem;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text);
}

.placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
.placar__cartao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-g); padding: .9rem 1.1rem; box-shadow: var(--sombra);
}
.placar__rotulo { font-size: .74rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .4px; }
.placar__valor { font-size: 1.45rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.placar__nota { font-size: .78rem; color: var(--text-soft); }
.placar__cartao--ruim .placar__valor { color: var(--sai); }
.placar__cartao--bom  .placar__valor { color: var(--entra); }

/* ===================================================== lista ====== */

.dia { display: flex; align-items: center; gap: .75rem; margin: 1.3rem 0 .5rem; }
.dia__data { font-weight: 700; font-size: .92rem; }
.dia__linha { flex: 1; height: 1px; background: var(--border); }
.dia__soma { font-size: .84rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }

.item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: .75rem 1rem; margin-bottom: .5rem;
}
.item:hover { border-color: var(--blue-300); }
.item__nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item__meta { font-size: .8rem; color: var(--text-mute); }
.item__valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.item__sub { font-size: .76rem; color: var(--text-soft); font-weight: 400; }

.selo { display: inline-block; font-size: .71rem; font-weight: 700; padding: .16rem .5rem; border-radius: 999px; }
.selo--vencido, .selo--cancelado { background: var(--sai-fraco); color: var(--sai); }
.selo--vence_hoje, .selo--aberto  { background: var(--alerta-fraco); color: var(--alerta); }
.selo--quitado, .selo--confirmado, .selo--entregue { background: var(--entra-fraco); color: var(--entra); }
.selo--parcial { background: var(--blue-50); color: var(--blue-600); }
.selo--neutro { background: var(--bg-mute); color: var(--text-soft); }

.parcela { font-variant-numeric: tabular-nums; }

/* ===================================================== tabela ===== */

.tabela { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-g); overflow: auto; }
.tabela table { width: 100%; border-collapse: collapse; }
/*
 * A tabela cabe na área, em vez de rolar.
 *
 * Com nowrap em TODAS as células, um nome comprido esticava a tabela para
 * além da tela e os botões do fim da linha ficavam cortados -- o operador via
 * "Altera" e não sabia que faltava alguma coisa ali.
 *
 * Agora só o que não pode quebrar continua nowrap (documento, telefone,
 * valores). O nome quebra em duas linhas, que é o que sobra de espaço.
 */
.tabela th, .tabela td { padding: .45rem .5rem; text-align: left; white-space: nowrap; }
/* Letra um pouco menor: e o que faz a linha inteira caber em tela de 1024,
   que ainda e o tamanho de muito monitor de loja. Diminuir padding sozinho
   nao dava conta -- quem ocupava o espaco era o texto. */
.tabela table { width: 100%; table-layout: auto; font-size: .9rem; }
/* Nome e cidade quebram em duas linhas; e o que da para espremer sem perder
   leitura. Documento, telefone e valor continuam inteiros: numero quebrado no
   meio se le errado. */
.tabela td:first-child, .tabela th:first-child { white-space: normal; min-width: 9rem; }
.tabela td.quebra { white-space: normal; }
/* A coluna dos botoes encolhe ate o tamanho deles e fica encostada a direita. */
.tabela td.acoes, .tabela th:last-child { width: 1%; white-space: nowrap; text-align: right; }
.tabela td.acoes { display: table-cell; }
.tabela td.acoes .botao { padding: .28rem .55rem; font-size: .78rem; }
.tabela td.acoes .botao + .botao { margin-left: .3rem; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela thead th { background: var(--bg-mute); font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-soft); }

/* ====================== LISTAGEM PADRÃO ==========================
 *
 * Faixa azul com o nome da listagem em cima da tabela, e uma coluna de
 * marcar à esquerda. A faixa diz O QUE é a lista sem gastar uma linha de
 * título separada; a coluna de marcar é o que permite agir em várias
 * linhas de uma vez.
 *
 * O azul é o mesmo do menu e do cabeçalho de janela -- a tela inteira usa
 * um azul só, senão cada faixa parece de um sistema diferente.
 */
.lista__faixa {
  caption-side: top;
  background: var(--blue-600); color: #fff;
  font-weight: 700; font-size: .95rem; text-align: center;
  padding: .5rem .7rem; letter-spacing: .3px;
}
/* Coluna do quadradinho: encolhe até o tamanho dele. O :first-child lá de
   cima abre 9rem para o nome -- aqui esse mínimo não vale, senão a coluna
   de marcar ficaria mais larga que o nome da empresa. */
.tabela--lista th.col-marcar, .tabela--lista td.col-marcar {
  width: 1%; min-width: 0; white-space: nowrap; text-align: center;
}
.col-marcar input { width: auto; margin: 0; cursor: pointer; }
.tabela--lista thead th.col-marcar { line-height: 1.25; }
/* O número da empresa, colado antes do nome. */
.tabela--lista th.col-num, .tabela--lista td.col-num {
  width: 1%; min-width: 0; white-space: nowrap; text-align: center; font-weight: 700;
}
.tabela tbody tr + tr { border-top: 1px solid var(--border); }
.tabela tbody tr:hover { background: var(--bg); }

/* ================================================ estado vazio ==== */

/*
 * Nenhuma tela abre vazia sem dizer por quê. Foi o pior defeito do sistema
 * anterior: tela cinza, sem uma linha de explicação.
 */
.vazio {
  text-align: center; color: var(--text-soft); padding: 3rem 1rem;
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-g);
}
.vazio strong { display: block; color: var(--text); margin-bottom: .35rem; font-size: 1.05rem; }
.vazio code { background: var(--bg-mute); padding: .1rem .4rem; border-radius: 6px; }

/* ==================================================== botões ====== */

.botao {
  font: inherit; font-size: .9rem; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.botao:hover { background: var(--bg-mute); }
.botao--perigo { background: var(--sai-fraco); border-color: var(--sai-fraco); color: var(--sai); }
.botao--pequeno { padding: .32rem .7rem; font-size: .82rem; }
.botao--largo { width: 100%; padding: .7rem; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

/* ========================== BOTÃO PADRÃO ==========================
 *
 * UM tamanho de botão em todo o sistema: 132px de largura mínima, pílula,
 * mesma fonte. Vale para Novo, Voltar, Alterar, Excluir, Consultar, Salvar,
 * Cancelar e para qualquer botão novo que apareça.
 *
 * A regra está no PRÓPRIO `.botao`, e não numa classe extra: botão criado
 * daqui em diante já nasce certo, sem ninguém precisar lembrar de marcar
 * nada. Antes cada tela tinha o seu -- "+ Novo produto" largo, "Nova
 * empresa" médio, "+ Novo" curto, "Salvar" miúdo no rodapé da janela -- e a
 * mão de quem trabalha o dia inteiro tinha de procurar o botão em cada
 * tela em vez de já saber onde ele está.
 *
 * Frase que NÃO cabe em 132px estica o botão (min-width, não width); o que
 * não pode é encolher. Se algum botão precisar ser maior de propósito, ele
 * é caso à parte e leva classe própria.
 *
 * Três exceções, e só três:
 *  - .botao--pequeno   -- ação de dentro de uma linha de tabela ("✕", "🔎");
 *  - .acoes .botao     -- a coluna de ações da tabela, pelo mesmo motivo;
 *  - .botao--circulo   -- botão redondo de ícone, que tem tamanho próprio.
 */
/*
 * Este bloco define só a GEOMETRIA -- tamanho, formato, fonte. A cor
 * continua sendo de cada tipo: o comum é branco, o --primario é azul, o do
 * alerta é o vermelho de lá. Padronizar a cor junto apagaria a diferença
 * entre "Cancelar" e "Salvar", que é justamente o que a pessoa lê antes de
 * clicar.
 */
.botao:not(.botao--pequeno),
.botao--pilula,
.alerta-voltar, .alerta-ok {
  min-width: 132px;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
  /* inline-flex e não inline-block: é o que alinha o texto no centro exato
     da pílula, e é o que faz Voltar e Novo terminarem com a MESMA altura
     mesmo tendo número de letras diferente. */
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2;
}
/* A coluna de ações da tabela fica de fora: ali o botão vive dentro de uma
   linha, e 132px empurrariam as colunas de dado para fora da tela. */
.tabela td.acoes .botao { min-width: 0; padding: .28rem .55rem; font-size: .78rem; }

/* O azul dos botões de ação. O contorno é UMA linha fina de um azul mais
   escuro: sem ela o botão se dissolve no fundo claro, e é ela que dá o
   recorte do formato de pílula. */
.botao--primario, .botao--pilula {
  background: var(--blue-400); border: 1px solid var(--blue-600); color: #fff;
}
.botao--primario:hover, .botao--pilula:hover {
  background: var(--blue-500); border-color: var(--navy-800);
}

/* ==================================================== campos ====== */

.campo { display: block; margin-bottom: .9rem; }
.campo > span { display: block; font-size: .8rem; color: var(--text-soft); margin-bottom: .25rem; }
.campo em { font-style: normal; color: var(--text-mute); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.grade-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
.grade-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: .75rem; }
/* CEP e Número guardam pouco e têm tamanho conhecido; Bairro é nome e pode
   ser comprido ("VILA SÃO JOSÉ OPERÁRIA"). Colunas iguais sobravam espaço
   nos dois primeiros e faltava no terceiro. */
.grade-endereco-topo { display: grid; grid-template-columns: 8.5rem 2fr 5.5rem 1.5fr; gap: .75rem; }
/* Logradouro, cidade e estado: o logradouro é o que tem nome comprido, e o
   estado guarda duas letras -- dividir a linha em três partes iguais
   sobraria espaço num e faltaria no outro. */
.grade-endereco { display: grid; grid-template-columns: 2.2fr 1.3fr .7fr; gap: .75rem; }

/* Duas colunas: escolher o arquivo de um lado, ver o resultado do outro --
   sem isso, so descobre se a logo ficou boa depois de salvar e reabrir. */
.logo-campo { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.logo-preview-caixa {
  width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); background: var(--bg-mute); border: 1px solid var(--border); flex: none;
}
.logo-preview-caixa span { font-size: .72rem; color: var(--text-mute); text-align: center; padding: .3rem; }
.logo-preview { width: 100%; height: 100%; object-fit: contain; }

input, select, textarea {
  font: inherit; width: 100%; padding: .55rem .75rem; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
/* Contorno fino: o de 2px com folga somava 6px em volta do campo e, numa
   linha apertada como a dos documentos fiscais, encostava no campo do lado
   e parecia defeito. 1px colado já diz onde está o cursor. */
input:focus, select:focus, textarea:focus { outline: 1px solid var(--blue-400); outline-offset: 0; }
/* So leitura -- vem de outra fonte (CNPJ, certificado...) e nao se digita
   por cima. Azul bem claro avisa "isto nao e um campo livre" so de olhar. */
input[readonly] { background: var(--blue-50); color: var(--text-soft); cursor: default; }

/*
 * Série/Próximo número (tipos de nota) são type="number" -- as setinhas pra
 * cima/baixo do próprio navegador servem pra isso, mas alguns temas do Chrome
 * deixam elas quase invisíveis dentro de um input com borda arredondada.
 * Força elas aparecerem, em vez de depender do padrão do navegador.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
  -webkit-appearance: auto;
}
textarea { min-height: 76px; resize: vertical; }

/*
 * Campo de senha com o olho.
 *
 * O botão fica dentro do campo, à direita, e o `padding-right` do input abre
 * o espaço — sem isso o texto passa por baixo do ícone justamente na senha
 * longa, que é quando mais se precisa conferir.
 */
.campo--senha { position: relative; }
.campo--senha input { padding-right: 2.6rem; }
.olho {
  position: absolute; right: .5rem; top: 1.55rem;
  width: 2rem; height: 2rem; line-height: 1;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; opacity: .55; border-radius: 8px;
}
.olho:hover { opacity: 1; background: var(--bg-mute); }
.olho--aberto { opacity: 1; }

.conferencia { display: block; font-size: .8rem; margin-top: .3rem; min-height: 1.1em; }
.conferencia--ok   { color: var(--entra); }
.conferencia--ruim { color: var(--sai); }

.interruptor { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.interruptor input { width: auto; }
.interruptor span { font-size: .9rem; }
.interruptor small { display: block; color: var(--text-mute); font-size: .78rem; }

.erro { background: var(--sai-fraco); color: var(--sai); padding: .6rem .8rem; border-radius: var(--r); font-size: .88rem; margin: .5rem 0; }
.dica { font-size: .82rem; color: var(--text-soft); margin: -.4rem 0 .8rem; min-height: 1.2em; }

/* =================================================== diálogo ====== */

dialog {
  border: 0; border-radius: var(--r-g); padding: 0; background: var(--surface); color: var(--text);
  box-shadow: 0 20px 60px rgba(4,16,42,.35); width: min(560px, calc(100vw - 2rem));
}

/*
 * A janela do cadastro e uma COLUNA: barra de titulo parada em cima,
 * formulario rolando por baixo. Antes o dialogo inteiro rolava e o titulo
 * sumia -- com os botoes de minimizar/maximizar/fechar na barra isso seria
 * pior, porque eles sumiriam junto no meio de um cadastro comprido.
 *
 * Tudo preso ao #dlg, e nao a `dialog`: o alerta do MatIA tambem e um
 * <dialog> (.alerta-overlay) e nao pode herdar coluna nem altura daqui.
 * E `[open]`, porque display proprio ganha do display:none que o navegador
 * poe no dialogo fechado -- sem isso a janela ficaria SEMPRE na tela.
 */
#dlg { overflow: hidden; }
#dlg[open] {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 4rem);
}
#dlg-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/*
 * Formulario comprido (produto/servico): o dialogo abre largo e os blocos
 * vao em duas colunas. Nos 560px de sempre, o cadastro de produto dava tres
 * telas de rolagem com a tela do computador vazia dos dois lados.
 */
dialog.dialogo--amplo { width: min(1060px, calc(100vw - 2rem)); }

/*
 * Coluna dupla por `columns`, e nao por grid: os blocos tem alturas
 * diferentes e o grid deixaria buraco embaixo do mais curto de cada linha.
 * E quando o tipo vira "Servico" quatro blocos somem de uma vez -- o
 * `columns` reequilibra sozinho, o grid ficaria com uma coluna oca.
 */
.form-colunas { columns: 2; column-gap: 1rem; }
/* Sem isto um bloco parte no meio e o rodape dele aparece na outra coluna. */
.form-colunas > .grupo { break-inside: avoid; }
/* Identificacao atravessa as duas: e a Descricao rende mais na largura toda. */
.grupo--largo { column-span: all; }

/* Estreito demais para duas colunas -- volta a ser uma fila so. */
@media (max-width: 900px) {
  .form-colunas { columns: 1; }
}

dialog::backdrop { background: rgba(4,16,42,.55); }
dialog form { padding: 1.4rem; }
dialog h2 { margin: 0; font-size: 1.15rem; }

/* ============================ CABEÇALHO PADRÃO DE JANELA ==========
 *
 * Barra azul-escura com os tres botoes do Windows. E para ser copiada
 * inteira para os outros sistemas da casa -- por isso nao depende de nada
 * da tela de produto: so das variaveis de cor la de cima.
 *
 * Os botoes sao QUADRADOS e colados no canto, como os do Windows, e nao
 * bolinhas espacadas: a mao de quem usa ja sabe que o de baixar e o
 * primeiro, o do meio maximiza e o ultimo fecha.
 */
.janela__barra {
  flex: none; min-height: 46px;
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 1rem;
  /* Mesmo azul do menu da lateral: a janela tem de parecer parte do sistema,
     e o navy escuro do topo brigava com ele. */
  background: var(--blue-600); color: #fff;
  padding-left: 1.4rem;
}
/* A barra é a alça da janela: o cursor diz isso antes do clique. */
.janela__barra { cursor: grab; user-select: none; }
.janela__barra--arrastando { cursor: grabbing; }
/* Maximizada não vai a lugar nenhum, então não finge que vai. */
.janela--max .janela__barra { cursor: default; }
.janela__titulo {
  align-self: center;
  font-size: 1.15rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.janela__botoes { flex: none; display: flex; align-items: stretch; }
/* Alvo grande de propósito: é onde a mão vai sem olhar, e num monitor de
   balcão os três sinais pequenos davam clique errado. */
.janela__botao {
  width: 54px; border: 0; background: transparent; color: #fff;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.janela__botao:hover { background: rgba(255,255,255,.16); }
/* A moldura preta do navegador não combina com a barra azul -- aqui o foco
   é uma linha branca por dentro. Só quem chega pelo teclado vê (:focus-visible):
   clicando, o botão já mostrou que foi clicado. */
.janela__botao:focus { outline: none; }
.janela__botao:focus-visible { outline: 2px solid #fff; outline-offset: -5px; border-radius: 4px; }
/* Vermelho so no fechar, e so no hover: e o unico dos tres que perde o que
   foi digitado, entao ele avisa antes de ser clicado. */
.janela__botao--fechar:hover { background: rgba(255,255,255,.18); }   /* sem vermelho: é só o X */

/* Maximizada: a janela ocupa a tela quase toda. O limite de largura do
   .dialogo--amplo teria de perder para isto, por isso o !important. */
dialog.janela--max {
  width: calc(100vw - 1rem) !important;
  max-height: calc(100vh - 1rem);
  height: calc(100vh - 1rem);
}

/* --------------------------------- barra das janelas minimizadas ---
 * Canto de baixo, à esquerda: o aviso do sistema nasce no meio e o MatIA
 * mora na direita -- este é o pedaço de tela que sobra livre.
 */
.barra-janelas {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-wrap: wrap; gap: .5rem; max-width: calc(100vw - 2rem);
}
.janela-min {
  display: flex; align-items: center; gap: .2rem;
  background: var(--blue-600); border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(4,16,42,.3);
  border-bottom: 3px solid var(--blue-300);
}
.janela-min:hover { background: var(--blue-500); }
/* O nome é o botão de voltar -- a tarja inteira, menos o X, volta a janela. */
.janela-min__nome {
  border: 0; background: transparent; color: #fff;
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .5rem .2rem .5rem .7rem; text-align: left;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O X da tarja: descarta a janela guardada sem precisar abrir ela de novo. */
.janela-min__fechar {
  border: 0; background: transparent; color: #fff; opacity: .7;
  cursor: pointer; font-size: .8rem; line-height: 1; padding: .5rem .6rem .5rem .2rem;
}
.janela-min__fechar:hover { opacity: 1; color: #ff8b7d; }
.dialogo__rodape { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
/* Campo extra plantado no rodapé (Saldo da Conta, ver formularioContaPlano)
   -- margin-right:auto empurra ele pra esquerda e deixa Cancelar/Confirmar
   colados à direita, do jeito que já eram. */
.campo-saldo-rodape { display: flex; align-items: center; gap: .6rem; margin-right: auto; }

/* ===================================================== aviso ====== */

.aviso {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: #fff; padding: .7rem 1.2rem;
  border-radius: 999px; box-shadow: 0 8px 30px rgba(4,16,42,.35);
  font-size: .9rem; z-index: 50;
}
.aviso--ruim { background: var(--sai); }


/* Empresa inativa continua na lista, só apagada: sumir da tela faria o dono
   achar que o cadastro se perdeu. */
.linha--inativa { opacity: .55; }
.acoes { display: flex; gap: .4rem; }

/*
 * Lista para marcar (usuários da empresa).
 *
 * Caixa com rolagem e altura limitada: com dez usuários a lista empurraria o
 * botao Salvar para fora da tela, e quem nao rola nao salva.
 */
.lista-marcar {
  max-height: 190px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); padding: .3rem;
}
/* Quem trabalha nesta empresa (ver campoUsuarios): linha mais alta que as
   outras listas -- nome em cima, papel e e-mail embaixo -- e por isso a
   caixa precisa de mais altura para caber a loja inteira sem rolar. Uma
   loja pequena tem tres, quatro, cinco pessoas; passando disso, rola. */
.lista-marcar--usuarios { max-height: 270px; }

/* ------------------------------------ seletor dos documentos fiscais
 * Mesmo desenho do seletor de Homologacao/Producao logo acima: campo fechado
 * com a seta, que abre a lista para marcar. Fechado, diz o que a empresa
 * emite -- documento fiscal se configura uma vez, nao precisa ocupar meia
 * tela do cadastro o tempo todo. */
.doc-sel { position: relative; }
.doc-sel__campo {
  width: 100%; text-align: left; min-height: 42px;
  padding: .5rem 2.2rem .5rem .75rem;
  font: inherit; color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue-500) 50%),
                    linear-gradient(135deg, var(--blue-500) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.doc-sel__campo--aberto {
  background-image: linear-gradient(135deg, transparent 50%, var(--blue-500) 50%),
                    linear-gradient(45deg, var(--blue-500) 50%, transparent 50%);
}
.doc-sel__resumo { font-weight: 600; }
.doc-sel__resumo--vazio { font-weight: 400; color: var(--text-mute); }
.doc-sel__lista { margin-top: .35rem; }
.doc-sel__lista[hidden] { display: none; }

/* ------------------------------------- documentos fiscais, um por linha
 * Cada modelo (NF-e, NFC-e) ocupa UMA linha: nome a esquerda, campos a
 * direita, e os campos so aparecem com o modelo marcado. Em bloco, dois
 * modelos ja esticavam o Cadastro da Empresa a ponto de o endereco ficar
 * longe demais para conferir. */
.nota-linha { padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
.nota-linha:last-child { border-bottom: 0; }
.nota-linha__topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* O nome empurra o resto para a direita ate onde couber. */
.nota-linha__nome { margin-bottom: 0; flex: 1 1 auto; min-width: 12rem; }
.nota-linha .botao--circulo { width: 22px; height: 22px; min-width: 22px; font-size: .8rem; flex: 0 0 auto; }
.nota-campos { display: flex; align-items: flex-end; gap: .5rem; flex: 0 0 auto; }
.nota-campos[hidden] { display: none; }
/* Campinhos: rotulo pequeno em cima, caixa estreita embaixo. */
.nota-campo { display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.nota-campo > span { font-size: .72rem; color: var(--text-soft); white-space: nowrap; }
.nota-campo input { width: 5.5rem; padding: .35rem .5rem; font-size: .9rem; }
.nota-campo--medio input { width: 9rem; }
.nota-linha .nf-salvar { align-self: flex-end; }
/* O Token (CSC) e longo demais para a linha -- desce, so na NFC-e. */
.nota-linha__csc { margin: .5rem 0 0; }
@media (max-width: 640px) {
  /* Sem espaco lateral, os campos descem em vez de espremer. */
  .nota-campos { width: 100%; margin-top: .4rem; }
  .nota-campo input { width: 100%; }
}
.marcar {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem; border-radius: var(--r); cursor: pointer;
}
.marcar:hover { background: var(--blue-50); }
.marcar input { width: 17px; height: 17px; flex: none; accent-color: var(--blue-500); }
.marcar strong { display: block; font-size: .9rem; font-weight: 600; }
.marcar small { display: block; font-size: .76rem; color: var(--text-mute); }
/* So leitura (Usuários desta empresa, ver abrirEmpresa): sem checkbox, sem
   cursor de clique, sem hover -- nao e uma opcao pra marcar. */
.marcar--leitura { cursor: default; }
.marcar--leitura:hover { background: none; }

/*
 * Combo de empresas (campoEmpresas em painel.js): fechado parece um
 * <select> comum, com seta -- só abre a lista de checkboxes ao clicar, pra
 * não ocupar espaço com o cadastro de empresas inteiro à mostra o tempo
 * todo.
 */
.combo-empresas__campo {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.combo-empresas__campo:hover { border-color: var(--blue-500); }
.combo-empresas__seta { color: var(--text-mute); font-size: .75rem; flex: none; }
.combo-empresas__painel { margin-top: .4rem; }

/* Link em forma de botão: precisa ser <button> para não navegar. */
.elo {
  display: block; width: 100%; margin-top: .8rem;
  background: none; border: 0; padding: .3rem;
  color: var(--text-mute); font: inherit; font-size: .82rem;
  text-decoration: underline; cursor: pointer;
}
.elo:hover { color: var(--blue-600); }

/* Cliente e Fornecedor lado a lado, no topo do cadastro: e o que decide os
   campos de baixo. */
.marcas { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .9rem; }
.marcas .marcar { padding: .35rem .5rem; }
.marcas .marcar span { font-weight: 600; font-size: .92rem; }

/* 4 marcações (Cliente/Fornecedor/Física/Jurídica) na mesma linha -- gap e
   padding menores só aqui, pra caber sem quebrar em telas mais estreitas. */
.marcas--apertado { gap: 0; flex-wrap: nowrap; }
.marcas--apertado .marcar { gap: .3rem; padding: .3rem .35rem; }
.marcas--apertado .marcar span { font-size: .84rem; white-space: nowrap; }
.marcas--apertado .marcar input { width: 15px; height: 15px; }

/*
 * Monitoramento -- a palavra na sua cor (verde/amarelo/vermelho) e um
 * QUADRADINHO do lado pra marcar (não o círculo padrão de radio, nem pílula
 * preenchida): o quadrado é o de sempre, só pintado na cor da opção quando
 * marcado, igual um checkbox de verdade.
 */
.marcas--monitoramento { gap: .7rem; flex-wrap: nowrap; }
.marcas--monitoramento .marcar { padding: .3rem .35rem; gap: .3rem; }
.marcas--monitoramento .marcar span { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.marcas--monitoramento .marcar--liberado span { color: var(--entra); }
.marcas--monitoramento .marcar--ressalvas span { color: var(--amarelo-ressalvas); }
.marcas--monitoramento .marcar--bloqueado span { color: var(--sai); }
.marcas--monitoramento .marcar--carteira span { color: var(--blue-500); }
.marcas--monitoramento .marcar input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border);
  cursor: pointer; position: relative; flex: none;
}
.marcas--monitoramento .marcar--liberado input { border-color: var(--entra); }
.marcas--monitoramento .marcar--ressalvas input { border-color: var(--amarelo-ressalvas); }
.marcas--monitoramento .marcar--bloqueado input { border-color: var(--sai); }
.marcas--monitoramento .marcar--carteira input { border-color: var(--blue-500); }
.marcas--monitoramento .marcar--liberado input:checked { background: var(--entra); }
.marcas--monitoramento .marcar--ressalvas input:checked { background: var(--amarelo-ressalvas); }
.marcas--monitoramento .marcar--bloqueado input:checked { background: var(--sai); }
.marcas--monitoramento .marcar--carteira input:checked { background: var(--blue-500); }
.marcas--monitoramento .marcar input:checked::after {
  content: ''; position: absolute; left: 4px; top: 0px;
  width: 4px; height: 9px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Só leitura, informativo -- usado no Total de Vale/Créditos do cliente. */
.campo-codigo {
  margin: 0; padding: .4rem .75rem; border-radius: var(--r);
  background: var(--blue-50); color: var(--blue-600); font-size: .88rem; white-space: nowrap;
}
.campo-codigo strong { font-size: 1rem; }

/* Busca dentro da tela, e nao no cabecalho: cada tela procura uma coisa. */
.busca-tela {
  flex: 1; max-width: 360px; font: inherit;
  padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.busca-tela:focus { outline: none; border-color: var(--blue-400); }

/*
 * Abas de filtro (Ambos / Clientes / Fornecedores).
 *
 * Botoes, e nao um <select>: sao tres opcoes e a escolhida precisa ficar a
 * vista o tempo todo -- num select, quem chega na tela nao sabe que ela esta
 * filtrada sem abrir a lista, e conclui que faltam cadastros.
 */
.abas { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.aba {
  padding: .45rem 1rem; border: 0; background: var(--surface);
  color: var(--text-soft); font: inherit; font-size: .85rem; cursor: pointer;
}
.aba + .aba { border-left: 1px solid var(--border); }
.aba:hover { background: var(--blue-50); }
.aba--ativa { background: var(--blue-500); color: #fff; font-weight: 700; }
.aba--ativa:hover { background: var(--blue-600); }

/* Grupo de opcoes (o "*Tipo" do Master): moldura com titulo e as escolhas
   dentro, para se ler como UMA pergunta e nao como oito caixinhas soltas. */
.grupo {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: .5rem .8rem .7rem; margin-bottom: .9rem;
}
.grupo legend { font-size: .8rem; color: var(--text-soft); padding: 0 .35rem; }
.grupo__opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .1rem; }
.grupo__opcoes .marcar { padding: .3rem .4rem; }
.grupo__opcoes .marcar span { font-size: .88rem; }

/* ================================================ ALERTA (MatIA) === */

/*
 * <dialog> de propósito (não <div> com z-index) -- é a única forma de ficar
 * ACIMA de outro <dialog> já aberto (Cadastro da Empresa, lista de
 * certificados...), porque diálogos nativos vivem na "top layer" do
 * navegador, que ignora z-index de elemento comum. Mesma ideia do
 * .cert-fundo logo abaixo. Sem isso, o alerta existia no HTML com a
 * mensagem certa mas ficava escondido atrás do diálogo aberto -- foi
 * exatamente o bug que motivou esta mudança.
 */
.alerta-overlay {
  border: 0; padding: 20px; background: transparent;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  display: none; align-items: center; justify-content: center;
}
.alerta-overlay[open] { display: flex; }
.alerta-overlay::backdrop { background: rgba(43,43,43,.55); }
.alerta-wrap { position: relative; }
.alerta-caixa {
  width: min(94vw, 430px); background: #fff; border-radius: 12px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.alerta-cab, .alerta-rod { background: #c0392b; }
.alerta-cab {
  color: #ffdd00; font-weight: 800; text-align: center;
  padding: 12px; font-size: 19px; letter-spacing: .5px;
  position: relative;
}
/* O X do alto -- só aparece em quem pede (alertaPadrao(..., { fechar: true })). */
.alerta-x {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,221,0,.6); background: transparent;
  color: #ffdd00; font-size: 22px; line-height: 1; font-weight: 700; cursor: pointer;
}
.alerta-x:hover { background: #8f271c; }
.alerta-x[hidden] { display: none; }
/*
 * A caixa MÉDIA: o recado continua sendo recado, mas as frases cabem
 * inteiras.
 *
 * Entre os 430px da caixa comum e os 1080px da que carrega tabela. Existe
 * para o aviso escrito em linhas -- uma função por linha, por exemplo --
 * onde a quebra no meio da frase estraga a leitura: "• Financeiro — Contas
 * a Pagar e a Receber, Baixas e" numa linha e "Relatórios" na outra faz a
 * lista parecer texto corrido. Decisão do dono em 12/09: vale a caixa
 * crescer para a frase não partir.
 */
.alerta-caixa--medio { width: min(94vw, 680px); }
/* A caixa larga: aviso que carrega tabela usa a tela, não a caixa de recado. */
/*
 * A caixa larga cabe na altura da tela: cabeçalho (com o X) e rodapé (com o
 * OK) ficam sempre à vista, e quem rola é só o miolo. Numa tela de 700px de
 * altura o cronograma inteiro passava da borda e o X sumia lá em cima.
 */
.alerta-caixa--largo {
  width: min(96vw, 1080px);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
}
.alerta-caixa--largo .alerta-cab, .alerta-caixa--largo .alerta-rod { flex: none; }
.alerta-caixa--largo .alerta-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 22px 14px;
}
.alerta-caixa--largo .alerta-ola { margin: 0 0 4px; }
.alerta-corpo {
  padding: 20px 22px; text-align: center;
  color: var(--text); font-size: 15px; line-height: 1.5;
}
.alerta-corpo p { margin: 6px 0; }
.alerta-ola { font-weight: 700; color: var(--alerta); }
/* O dado concreto do aviso -- o numero, o nome, a lista. Destacado porque e o
 * que a pessoa precisa LER antes de decidir; o resto e explicacao. */
.alerta-faltando {
  display: block; margin: 10px 0; font-weight: 700; color: var(--sai);
}
.alerta-rod { display: flex; justify-content: center; gap: 10px; padding: 10px; flex-wrap: wrap; }
/* Desistir e branco; a acao e a vermelha. A tecla Esc faz o mesmo que ele. */
/* Só as cores: tamanho e formato vêm do BOTÃO PADRÃO, lá em cima -- os dois
   ficam do mesmo tamanho um do outro e do resto do sistema. */
.alerta-voltar {
  background: #fff; color: #8f271c; font-weight: 800;
  border: 1px solid #fff;
}
.alerta-voltar[hidden] { display: none; }
.alerta-ok {
  background: #8f271c; color: #ffdd00; font-weight: 800;
  border: 1px solid #ffdd00; letter-spacing: 1px;
}
.alerta-ok:hover { background: #741f16; }
.alerta-matia {
  position: absolute; right: -42px; bottom: -30px; width: 100px; height: auto;
  z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.3));
}
@media (max-width: 620px) { .alerta-matia { right: -10px; bottom: -14px; width: 74px; } }

/* Número do Caixa do usuário -- só mostra, não edita (ver formularioUsuario
   em painel.js e atribuirNumeroCaixa em banco.js). */
.campo-caixa {
  margin: 0; padding: .55rem .75rem; border-radius: var(--r);
  border: 1px solid var(--blue-600);
  background: var(--blue-50); color: var(--blue-600); font-size: .9rem;
}
.campo-caixa strong { font-size: 1.05rem; }

/* Campo que ficou faltando: fica marcado até a pessoa preencher. */
.campo--falta input, .campo--falta select { border-color: #c0392b; background: #fdf4f3; }

/* =========================================== escolher certificado == */

/*
 * A lista de certificados e um <dialog> aberto com showModal(): assim entra na
 * top layer do navegador e fica ACIMA do dialogo do cadastro. z-index nao
 * resolvia -- a top layer ignora z-index de elemento comum.
 *
 * O ::backdrop e o escurecido que o proprio navegador pinta atras do dialog.
 */
.cert-fundo {
  border: 0; padding: 1rem; background: transparent;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  display: grid; place-items: center;
}
.cert-fundo::backdrop { background: rgba(4,16,42,.55); }
.cert-fundo[open] { display: grid; }
.cert-caixa {
  width: min(520px, 100%); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-g);
  box-shadow: 0 24px 60px rgba(4,16,42,.4);
}
.cert-caixa__topo {
  padding: .9rem 1.1rem; font-weight: 700; user-select: none;
  background: var(--navy-900); color: #fff;
  border-radius: var(--r-g) var(--r-g) 0 0;
}
.cert-caixa__corpo { overflow-y: auto; padding: .6rem; }
.cert-caixa__rodape {
  padding: .7rem 1.1rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.cert-item {
  display: block; width: 100%; text-align: left; user-select: none;
  padding: .7rem .8rem; margin-bottom: .4rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); font: inherit; cursor: pointer;
}
.cert-item:hover { border-color: var(--blue-400); background: var(--blue-50); }
.cert-item strong { display: block; font-size: .95rem; }
.cert-item span { display: block; font-size: .78rem; color: var(--text-soft); }

/* O campo do certificado e o botao lado a lado, alinhados por baixo. */
.cert-linha { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.cert-linha .campo { flex: 1; margin-bottom: .9rem; }
/* Sem isso, os dois inputs (que nao tem wrapper .campo) e o botao disputavam
   o mesmo espaco em partes iguais -- o botao perdia a briga e o texto
   quebrava em tres linhas dentro de uma caixa pequena e redonda demais. */
.cert-linha input { flex: 1 1 160px; min-width: 140px; }
.cert-linha .botao { flex: none; white-space: nowrap; }
/* Senha com olhinho, mas SEM label acima (ao contrario de .campo--senha) --
   o campo de certificado mora numa linha corrida, nao numa coluna com
   rotulo. Por isso o icone centraliza pelo meio (50%), e nao num "top" fixo
   pensado pra quando existe rotulo em cima. */
.senha-inline { position: relative; flex: 1 1 160px; min-width: 140px; }
.senha-inline input { width: 100%; padding-right: 2.6rem; }
.olho--inline { top: 50%; transform: translateY(-50%); }
/* Rotulo do arquivo do certificado -- menor e mais colado que um .campo
   span comum, porque o campo logo abaixo já é auto-explicativo (é um
   seletor de arquivo, não precisa de tanto ar como um campo de texto). */
.rotulo-pequeno { display: block; font-size: .78rem; color: var(--text-soft); margin-bottom: .15rem; }
/* Quadrado com cantos arredondados (e nao circulo) -- Windows e pasta, pra
   escolher o certificado -- mesmo par azul/branco dos outros botoes de acao. */
.botao--circulo {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--r);
  background: var(--blue-500); border: none; color: #fff;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.botao--circulo:hover { background: var(--blue-600); }

/* Computador: atalhos sempre, e sem caixinha para marcar. */
@media (min-width: 861px) {
  .atalhos--ocultos { display: grid; }
  .marcar--canto { display: none; }
}

@media (max-width: 860px) {
  /*
   * No celular a lateral deixa de ser lateral: vira uma faixa em cima, com os
   * menus POR NOME em duas colunas.
   *
   * Antes ela encolhia para 64px e sobravam so os icones -- e icone sozinho
   * ninguem le. "Sera que o cadeado e Configuracoes ou Usuarios?" e uma duvida
   * que nao existe quando o nome esta escrito.
   *
   * A moldura fixa (.app com altura travada e so o <main> rolando) e coisa de
   * computador, onde cabecalho/rodape/menu tem que ficar sempre visiveis. No
   * celular o desenho e outro -- tudo empilhado, a pagina INTEIRA rola -- por
   * isso desfeita aqui.
   */
  .app { height: auto; min-height: 100vh; overflow: visible; }
  /* A caixinha "Acessar por atalhos" so fazia sentido pra alternar com o
     menu completo -- que agora nunca aparece no celular (.menu{display:none}
     ali embaixo). Sem o menu pra alternar, a caixinha marcava uma escolha
     que deixou de existir.
     Os atalhos ficam SEMPRE visiveis aqui, mesmo pra quem tinha desmarcado
     a caixinha antes (o valor fica salvo no localStorage do aparelho) --
     escondido o menu, esconder os atalhos tambem deixaria a tela em branco,
     sem jeito nenhum de navegar. */
  .marcar--canto { display: none; }
  .atalhos--ocultos { display: grid; }
  main { overflow: visible; }
  .app__painel { grid-template-columns: 1fr; }
  .lateral { position: static; max-height: none; }

  /*
   * Ordem no celular: marca, CONTEUDO (onde estao os atalhos) e o menu por
   * ultimo.
   *
   * Antes a lateral inteira vinha primeiro, entao era preciso rolar os 16
   * itens de menu para chegar nos atalhos -- que existem justamente para
   * poupar essa rolagem. Invertido, a mao cai no atalho, e o menu completo
   * fica logo abaixo para quem quer o que o atalho nao cobre.
   *
   * display:contents dissolve a caixa da .lateral para que a marca e o menu
   * virem itens da MESMA grade e possam ser ordenados um a um. Como a caixa
   * deixa de existir, o navy que era dela passa para a marca.
   */
  .lateral { display: contents; }
  .lateral__marca { order: 1; background: var(--navy-900); }
  .corpo { order: 2; }
  .menu { order: 3; }

  /* No celular o menu NUNCA aparece -- so os cards de atalho da Home levam
     pra tudo (grupos incluidos, ver desenharAtalhos em painel.js). A lista
     de 16 itens rolando embaixo da tela nao servia pra nada que o atalho ja
     nao resolvesse, e so empurrava pra baixo quem queria rolar a pagina. */
  .menu { display: none; }
  .grade-2, .grade-3, .grade-4, .grade-endereco, .grade-endereco-topo { grid-template-columns: 1fr; }

  /* O titulo grande do cabecalho nao cabe junto com o Sair e os telefones. */
  .topo { grid-template-columns: 1fr auto; padding: .6rem .9rem; min-height: 0; }
  .topo__vazio { display: none; }
  .topo__titulo { text-align: left; }
  .topo__titulo strong { font-size: 1.3rem; }
  .topo__titulo span { font-size: .8rem; }
  /* Os dois telefones num numero so as vezes nao cabiam na largura do
     celular e quebravam NO MEIO do numero ("(54)" numa linha, o resto na
     outra) -- nowrap for a da caixa, ela encolhe a fonte do resto da linha
     em vez de partir o numero. */
  .suporte a { white-space: nowrap; font-size: .72rem; }

  /*
   * As duas logos (cliente + Mateus) lado a lado no topo -- a da Mateus sai
   * do cabecalho (ali ela brigaria de espaco com Sair/telefones numa tela
   * ja apertada) e vem pra cá, pequena, ao lado da logo do cliente.
   */
  .lateral__marca {
    min-height: 0; padding: .6rem; display: flex; align-items: center;
    justify-content: center; gap: .8rem;
  }
  .lateral__logo { max-height: 54px; width: auto; flex: none; }
  .marca-dev--mobile { display: flex; }
  .marca-dev--mobile .marca-dev__logo { height: 46px; }
  .marca-dev--mobile span { font-size: .68rem; }
  /* A original (cabecalho) some no celular -- so a copia de dentro da
     .lateral__marca (acima) fica visivel la. */
  .topo .marca-dev { display: none; }
  /* Em tela estreita as tres partes viram uma coluna so, senao a cidade e a
     empresa se espremem em duas letras cada. */
  .rodape { grid-template-columns: 1fr; text-align: center; gap: .2rem; }
  .rodape__local, .rodape__usuario { justify-self: center; text-align: center; }
}

/* ------------------------------------------- lista de sugestão (bancos)
 * Substitui o <datalist> do navegador, que não aceita estilo: com os ~300
 * bancos da tabela oficial a lista abria do tamanho que o Chrome quisesse e
 * sem barra de rolagem à vista. Altura fixa com rolagem, e cada banco numa
 * linha só -- código apagado à esquerda, nome em seguida. */
.sugere { position: relative; display: block; }
.sugere__lista {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 3px);
  max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
  padding: .25rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: 0 12px 30px rgba(4,16,42,.18);
}
.sugere__lista[hidden] { display: none; }
.sugere__item {
  display: block; padding: .45rem .55rem; border-radius: 8px;
  font-size: .9rem; cursor: pointer;
}
.sugere__item:hover,
.sugere__item--ativo { background: var(--bg-mute); }
.sugere__codigo {
  color: var(--text-mute); font-variant-numeric: tabular-nums; margin-right: .45rem;
}
.sugere__vazio { display: block; padding: .5rem .55rem; font-size: .85rem; color: var(--text-mute); }

/* ------------------------------- campo com "+" ao lado (grupo/sub-grupo)
 * O "+" cadastra sem sair do formulário: o diálogo é um só na tela, e abrir
 * outro por cima apagaria tudo que já foi digitado. A linha de baixo aparece
 * no lugar, com o nome e Salvar. */
/* .campo > span e display:block e ganha de .com-mais sozinho -- por isso o
   seletor repete o .campo aqui: sem ele o "+" cai para baixo do campo. */
.campo > span.com-mais { display: flex; gap: .4rem; align-items: stretch; }
.com-mais select { flex: 1 1 auto; min-width: 0; }
.com-mais .botao {
  flex: 0 0 auto; width: 2.4rem; padding: 0;
  font-size: 1.1rem; font-weight: 700; line-height: 1;
}
.linha-novo {
  display: flex; gap: .4rem; align-items: center;
  margin: -.5rem 0 .9rem; padding: .5rem;
  background: var(--bg-mute); border-radius: var(--r);
}
.linha-novo[hidden] { display: none; }
.linha-novo input { flex: 1 1 auto; min-width: 0; }

/* Esconder um bloco com o atributo `hidden` só funciona quando o elemento não
   tem display próprio -- e .campo é block, .grade-2/.grade-3 são grid, que
   ganham do padrão do hidden. Sem isto, marcar Serviço não escondia nada. */
.campo[hidden], .grade-2[hidden], .grade-3[hidden],
.grade-4[hidden], .grade-endereco[hidden], .grade-endereco-topo[hidden] { display: none; }

/* ------------------------------------ identificação do produto
 * Produto ou Serviço são DUAS marcas lado a lado, e não uma lista: é uma
 * escolha de duas, e lista esconde a segunda atrás de um clique. */
/* ----------------------------------------- bloco fiscal compacto ---
 * Cada linha guarda uma pergunta inteira. Antes eram sete linhas para o
 * que cabe em quatro, e a metade da largura ficava vazia -- num formulário
 * comprido isso é rolagem que não precisava existir.
 */
/*
 * A linha de cima do bloco: pergunta, escolha do certificado e senha, lado
 * a lado. Cada uma é um campo normal -- rótulo em cima, resposta embaixo.
 * A do meio leva o que sobra porque o nome do arquivo pode ser comprido; a
 * senha é curta e não ganha nada sendo larga.
 */
.fiscal-linha { display: grid; grid-template-columns: auto 1fr 14rem; gap: .9rem; align-items: start; }
.fiscal-linha .campo { margin-bottom: .6rem; }

/* Sim e Não sem moldura: é só a bolinha e a palavra. A caixa em volta (do
   Produto/Serviço) serve quando a escolha É a tela; aqui ela é um campo
   entre outros, e a moldura pesava mais que o resto da linha. */
/* Clientes e Fornecedores um ABAIXO do outro, ao lado do Voltar: os dois
   juntos não passam da altura do botão e ficam centrados na linha dele. */
.marcas-simples {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 0; padding-top: 0; align-self: center;
  max-height: 34px; line-height: 1.05;
}
.marcas-simples .marcar { gap: .3rem; }
.marcas-simples .marcar span { font-weight: 600; font-size: .78rem; }
.marcas-simples .marcar input { width: 13px; height: 13px; }
/* Sem o quadrado azul de foco em volta da bolinha depois do clique: quem
   clicou viu o que escolheu, a moldura só suja. Para quem chega pelo
   teclado ela fica -- senão não há como saber onde se está. */
.marcas-simples input:focus { outline: none; }
.marcas-simples input:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }

/* O centro da linha do Voltar, quando a tela põe ali um filtro em vez do
   título (ver cabecalho em painel.js). */
.linha-titulo__meio { display: flex; justify-content: center; align-items: center; }
.linha-titulo__meio .marcas-simples { padding-top: 0; }

/* Titular, validade e série do certificado guardado, na mesma linha. O
   titular leva o espaço que sobra: é um nome, e nome é comprido. */
.cert-guardado { display: grid; grid-template-columns: 1fr 10rem 14rem; gap: .75rem; align-items: end; }
.cert-guardado .campo { margin-bottom: .4rem; }
@media (max-width: 820px) { .cert-guardado { grid-template-columns: 1fr; } }

/* Cada caminho do certificado numa linha, com a explicação ao lado do
   próprio botão: quem nunca mexeu nisso não tem de adivinhar qual é qual. */
.cert-opcao { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.cert-opcao__texto { font-size: .8rem; color: var(--text-soft); line-height: 1.25; }
.cert-opcao__nome { display: block; color: var(--text-mute); font-size: .76rem; }

/* Regime, ambiente e o teste na SEFAZ na mesma linha. O botão fecha a
   linha à direita; os dois campos dividem o que sobra. */
.cert-final { display: grid; grid-template-columns: 180px 1fr; gap: .75rem; align-items: end; }
.cert-final .campo { margin-bottom: 0; }
/* Começa na coluna do Ambiente e segue até o fim da linha: é recado daquele
   par de campos, não do bloco inteiro. Vermelho porque é passo obrigatório
   -- sem ele o Salvar não passa (ver sefazConferida em painel.js). */
.cert-final__instrucao {
  grid-column: 1 / -1; margin: -.2rem 0 0;
  font-size: .8rem; line-height: 1.3; color: var(--sai);
}
/* Conferido: vira confirmação verde. Ficar vermelho depois do "Serviço em
   Operação" mandava dois recados contrários na mesma tela. */
.cert-final__instrucao--ok { color: var(--entra); }
/* A resposta da SEFAZ ocupa a altura de um campo, para a linha não pular
   quando o texto troca de "Consultando…" para o resultado. */
/* A altura mínima segura a linha no lugar quando o texto troca de
   "Consultando…" para o resultado: sem ela o formulário pulava a cada
   consulta. */
.sefaz-estado { margin: 0; min-height: 1.6rem; }
@media (max-width: 820px) {
  .cert-final { grid-template-columns: 1fr; }
  .fiscal-linha { grid-template-columns: 1fr; }
}

.tipo-marcas { display: flex; gap: .5rem; margin-bottom: .8rem; }
.tipo-marcas .marcar { border: 1px solid var(--border); border-radius: var(--r); }
.tipo-marcas .marcar:has(input:checked) {
  border-color: var(--blue-500); background: var(--blue-50);
}
.tipo-marcas .marcar span { font-weight: 600; }

/* Código estreito (são seis dígitos), depois o de barras e o alfanumérico. */
/*
 * Código de barras e alfanumérico na METADE da largura que tinham: nenhum
 * dos dois passa de 20 caracteres, e ocupando 1fr cada um sobrava campo
 * vazio na linha inteira. O que entrou no lugar foi o botão dos outros
 * códigos, que fecha a linha em vez de deixar o buraco.
 */
.grade-codigos { display: grid; grid-template-columns: 110px 220px 220px minmax(180px, 1fr); gap: .75rem; }
/* Célula que tem botão no lugar de campo -- o rótulo em cima alinha com os
   dos vizinhos, e o botão ocupa a altura de um input. */
.campo--acao > .botao { width: 100%; max-width: 280px; padding: .55rem .8rem; }

/* Campo que o sistema preenche: azul, para se ler como "isto não é seu". */
.campo--auto input {
  color: var(--blue-500); font-weight: 700; letter-spacing: .04em;
  background: var(--blue-50); border-color: var(--blue-100); cursor: default;
}

/* Código de barras que não fecha com o dígito verificador. */
.campo--erro { border-color: var(--sai) !important; background: var(--sai-fraco); }

/* Área de escrita livre que ocupa o quadro inteiro -- sem rótulo por dentro,
   porque o título do quadro já diz o que é. */
.campo-livre { width: 100%; resize: vertical; }

/* Numa tela estreita os três códigos não cabem lado a lado sem espremer o de
   barras, que é o mais comprido dos três. */
@media (max-width: 780px) {
  .grade-codigos { grid-template-columns: 1fr; }
  .campo--acao > .botao { max-width: none; }
}

/* ------------------------------------- janela dos outros códigos ---
 * Mesma moldura do #dlg (barra em cima, corpo rolando no meio, rodapé
 * parado embaixo) -- é a mesma janela padrão, só que menor.
 */
#dlg-codigos { overflow: hidden; width: min(680px, calc(100vw - 2rem)); }
#dlg-codigos[open] { display: flex; flex-direction: column; max-height: calc(100vh - 6rem); }
.janela__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.4rem; }
.janela__rodape { padding: 0 1.4rem 1.2rem; margin-top: 0; }
/* Código, descrição e o botão de adicionar na mesma linha: é uma ação só,
   e em três linhas separadas pareceriam três perguntas. */
.grade-codigo-novo { display: grid; grid-template-columns: 180px 1fr auto; gap: .75rem; align-items: end; }
.tabela--codigos { width: 100%; border-collapse: collapse; }
.tabela--codigos th, .tabela--codigos td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
.tabela--codigos th { font-size: .78rem; color: var(--text-soft); font-weight: 600; }
.tabela--codigos .col-acao { width: 1%; text-align: right; }
@media (max-width: 620px) {
  .grade-codigo-novo { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- MAIÚSCULAS em tudo
 * O JavaScript já converte o que se digita (ver o ouvinte de 'input' em
 * painel.js); isto evita o piscar do minúsculo antes da conversão, e vale
 * para o texto colado. Senha, e-mail e o que é escolha (select) ficam fora --
 * e .sem-maiuscula solta qualquer campo. */
input:not([type]), input[type="text"], input[type="search"], input[type="tel"], textarea {
  text-transform: uppercase;
}
/* E-mail é minúsculo, sempre -- inclusive o que o navegador cola no campo,
   que não passa pelo ouvinte de 'input'. Ver ehCampoDeEmail em painel.js. */
input[type="email"], input[id$="email"], input[id$="e-mail"] { text-transform: lowercase; }
input.sem-maiuscula, textarea.sem-maiuscula, .sem-maiuscula input, .sem-maiuscula textarea {
  text-transform: none;
}

/* ------------------------------------------- fiscal / tributações */
.fiscal-bloco { margin-bottom: 2rem; }
.fiscal-cabeca {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.fiscal-cabeca h3 { margin: 0; font-size: 1rem; }
/* O botão de atualizar vai para a ponta direita -- é a ação da tabela,
   não um campo dela. */
.fiscal-cabeca .botao { margin-left: auto; }
.fiscal-selo {
  font-size: .82rem; color: var(--text-soft);
  padding: .25rem .6rem; border-radius: 999px; background: var(--bg-mute);
}
.fiscal-selo small { display: block; font-size: .72rem; color: var(--text-mute); }
.fiscal-selo--vazia { color: var(--alerta); background: var(--alerta-fraco); }
.busca-fiscal { max-width: 100%; width: 100%; margin-bottom: .8rem; }

/* Descrição do que foi escolhido (NCM/CEST): confirma a escolha sem abrir a
   tabela de novo -- código de oito dígitos ninguém confere de cabeça. */
.dica-campo {
  display: block; margin-top: .25rem; font-size: .78rem;
  color: var(--text-mute); line-height: 1.3;
}
/* Estado de uma consulta automática (CNPJ, SEFAZ). */
.dica-campo--ok { color: var(--entra); }
.dica-campo--erro { color: var(--sai); }
/* Só onde o próprio texto é o caminho de tentar de novo (o CNPJ). Onde há
   botão ao lado, o texto é recado e não se clica -- sublinhado ali só
   ensinaria a clicar no lugar errado. */
.dica-campo--clicavel { cursor: pointer; text-decoration: underline; }

/* ---- Cronograma da reforma tributária ----
 *
 * Vive dentro do diálogo do MatIA, que é estreito: a tabela rola sozinha em
 * vez de esticar o aviso. O ano corrente vem marcado porque a pergunta que
 * se faz olhando esta tabela é sempre "e agora, em que fase estamos?".
 */
.tabela--cronograma {
  margin: .6rem 0 .5rem; border: 1px solid var(--border); border-radius: .5rem;
  /* Quem rola é o miolo do aviso (ver .alerta-caixa--largo): assim o título
     da tabela gruda no alto dele e a tabela não ganha uma segunda barra. */
  overflow: visible;
}
.tabela--cronograma th, .tabela--cronograma td { padding: .38rem .55rem; }
.tabela--cronograma table { font-size: .86rem; }
.tabela--cronograma th { position: sticky; top: 0; z-index: 1; background: var(--bg-mute); }
.tabela--cronograma td { vertical-align: top; }
.tabela--cronograma .linha--agora { background: var(--alerta-fraco); }
.tabela--cronograma .linha--agora td { font-weight: 600; }
/* Ano não é nome: não precisa da largura mínima da primeira coluna. */
.tabela--cronograma td:first-child, .tabela--cronograma th:first-child { min-width: 0; }
/* "O que muda" é a última coluna, e texto: quebra e fica à esquerda, ao
   contrário da coluna de botões que o .tabela prevê para a última. */
.tabela--cronograma th:last-child, .tabela--cronograma td.cronograma-obs {
  width: auto; white-space: normal; text-align: left;
  min-width: 16rem; color: var(--text-mute); font-weight: 400; line-height: 1.35;
}
.tabela--cronograma .linha--agora td.cronograma-obs { color: var(--text); }
.cronograma-hoje {
  display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 99px;
  background: var(--alerta); color: #fff; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; vertical-align: 1px;
}
.cronograma-det { display: block; font-size: .72rem; font-weight: 400; color: var(--text-mute); }
.cronograma { text-align: left; }
.cronograma-titulo { display: block; font-size: 1.05rem; text-align: center; }
.cronograma > small { display: block; text-align: center; color: var(--text-mute); }
.cronograma-fonte, .cronograma-nota, .cronograma-aviso, .cronograma-novidade {
  margin: .35rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--text-mute);
}
.cronograma-aviso { color: var(--alerta); font-weight: 600; }
.cronograma-novidade {
  padding: .45rem .6rem; border-radius: .4rem;
  background: var(--alerta-fraco); color: var(--text);
}
.cronograma-conferindo { font-style: italic; }
/* Celular: a tabela rola de lado em vez de espremer a observação. */
@media (max-width: 700px) {
  .tabela--cronograma { overflow-x: auto; }
  .tabela--cronograma th { position: static; }
  .tabela--cronograma th:last-child, .tabela--cronograma td.cronograma-obs { min-width: 14rem; }
}

/* ---- Tabelas oficiais (Utilitários › Fiscal / Tributações) ----
 *
 * Um cartão por tabela, no desenho do SmartMI: nome, para que serve, e um
 * rodapé com registros, versão e fonte. O resultado da atualização aparece
 * DENTRO do cartão, logo abaixo do rodapé -- diálogo por cima esconderia
 * justamente o número que a pessoa quer conferir depois de baixar.
 */
.tabela-oficial {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: .7rem; padding: 1.2rem 1.4rem; margin-bottom: .9rem;
}
.tabela-oficial__cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.tabela-oficial__nome { margin: 0; font-size: 1rem; color: var(--text); }
.tabela-oficial__descricao {
  margin: .3rem 0 0; font-size: .85rem; color: var(--text-soft);
  max-width: 60ch; line-height: 1.45;
}
.tabela-oficial__acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
/* O rodapé é dado de conferência, não texto corrido: fica apagado e em
   linha, para varrer os quatro campos de um olhar. */
.tabela-oficial__rodape {
  display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-mute);
}
.tabela-oficial__resultado:not(:empty) { margin-top: .8rem; }

/* Etiqueta da tabela que não tem botão próprio -- ela vem junto com outra. */
.etiqueta {
  display: inline-block; padding: .3rem .6rem; border-radius: .4rem;
  background: var(--bg-mute); color: var(--text-mute);
  font-size: .78rem; white-space: nowrap;
}

/* Recado de uma linha dentro do cartão, no lugar de um diálogo. */
.aviso-linha {
  margin: 0; padding: .55rem .75rem; border-radius: .45rem;
  background: var(--bg-mute); color: var(--text-soft); font-size: .84rem;
}
.aviso-linha--ok { background: var(--entra-fraco); color: var(--entra); }
.aviso-linha--erro { background: var(--sai-fraco); color: var(--sai); }


/* ---- a ficha do Consultar: rótulo e valor alinhados --------------- */
.ficha-consulta {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .3rem .9rem; margin: .9rem 0 0; text-align: left;
}
.ficha-consulta dt { font-weight: 700; color: var(--text-soft); }
.ficha-consulta dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }


/* ---- Unidades numa linha: saída, entrada, fator e Multiplica/Divide ---- */
.grade-unidades {
  display: grid; grid-template-columns: 5.5rem 5.5rem 7.5rem 1fr;
  gap: .75rem; align-items: end;
}
/* Multiplica em cima, Divide embaixo: lado a lado invadiam o Custo. */
.grade-unidades .marcas-simples {
  padding-top: 0; flex-direction: column; align-items: flex-start; gap: 0;
}
.grade-unidades .marcas-simples .marcar { padding: .1rem .3rem; }
@media (max-width: 860px) { .grade-unidades { grid-template-columns: 1fr 1fr; } }

/* ---- NCM e CEST lado a lado, do tamanho do código ---- */
.grade-fiscal { display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)); gap: .75rem; }
.grade-fiscal[hidden] { display: none; }
.com-mais .sugere { flex: 1 1 auto; min-width: 0; }
.grade-fiscal .sugere__lista { min-width: 24rem; }
@media (max-width: 860px) { .grade-fiscal { grid-template-columns: 1fr; } }

/* ---- Janela da tabela de NCM / CEST (abrirTabelaFiscal) ---- */
.janela-tabela { overflow: hidden; width: min(760px, calc(100vw - 2rem)); }
.janela-tabela[open] { display: flex; flex-direction: column; max-height: calc(100vh - 6rem); }
.tabela-busca__lista { margin-top: .6rem; }
.tf-linha { cursor: pointer; }
.tf-linha:hover td { background: var(--bg-mute); }


/* ---- Plano de Contas: a pergunta do tipo antes da conta nova ---- */
.janela-tipo-conta { overflow: hidden; width: min(440px, calc(100vw - 2rem)); }
.janela-tipo-conta[open] { display: flex; flex-direction: column; }
.tipo-conta { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.tipo-conta__botao {
  padding: 1.1rem .8rem; border: 2px solid currentColor; border-radius: 12px;
  background: var(--surface); font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer;
}
.tipo-conta__botao:hover { background: var(--bg-mute); }
.tipo-conta__botao--receita { color: var(--entra); }
.tipo-conta__botao--despesa { color: var(--sai); }
.tipo-conta__botao--pedido { color: #2b1206; }
.tipo-conta__botao--orcamento { color: #b08d57; }

/* ---- Características: tamanho e cor viram lista com código ---- */
.grade-caracteristicas {
  display: grid; grid-template-columns: 1fr 1fr auto 1fr; gap: .75rem; align-items: end;
}
.grade-caracteristicas .campo--acao > .botao {
  width: 2.4rem; max-width: none; padding: .55rem 0; font-size: 1.1rem; font-weight: 700;
}
.tabela--grade { margin-top: .6rem; }
.tabela--grade td.acoes { width: 1%; text-align: right; }
@media (max-width: 860px) { .grade-caracteristicas { grid-template-columns: 1fr 1fr; } }


/* ---- Fotografia: três botões, a capa, a webcam e a galeria ---- */
.fotos-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.fotos-capa { max-width: 220px; }
.janela-galeria, .janela-camera { overflow: hidden; width: min(900px, calc(100vw - 2rem)); }
.janela-galeria[open], .janela-camera[open] {
  display: flex; flex-direction: column; max-height: calc(100vh - 4rem);
}
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.galeria__item {
  position: relative; display: block; overflow: hidden; cursor: pointer;
  border: 2px solid var(--border); border-radius: 12px; background: var(--surface);
}
.galeria__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.galeria__item input {
  position: absolute; top: .45rem; left: .45rem; width: 20px; height: 20px; accent-color: var(--blue-500);
}
.galeria__item--catalogo { border-color: var(--entra); }
.galeria__item:has(input:checked) { border-color: var(--blue-500); box-shadow: 0 0 0 2px var(--blue-500); }
.galeria__selo {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem .4rem;
  font-size: .72rem; font-weight: 700; text-align: center; color: #fff; background: var(--entra);
}
.camera__acoes { display: flex; gap: .5rem; margin-bottom: .5rem; }
.camera video { display: block; width: 100%; max-height: 60vh; background: #000; border-radius: 10px; }
.camera__aviso { min-height: 1.2rem; margin: .2rem 0 .5rem; font-size: .88rem; }
.camera__aviso--bom { color: var(--entra); }
.camera__aviso--erro { color: var(--sai); }

/* ---- Estoque: Quantidade estreita, Motivo com o resto da linha ---- */
.grade-mov { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; }

/* ---- Contas Pagar / Receber: símbolo metade vermelho, metade verde ---- */
.menu__icone--misto {
  background: linear-gradient(90deg, #ff8a80 50%, #4ade80 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.atalho--misto .atalho__icone {
  width: 2.5rem; height: 2.5rem; margin: 0 auto .6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, var(--sai) 50%, var(--entra) 50%);
}
@media (max-width: 860px) { .grade-mov { grid-template-columns: 1fr; } }


/* ---- Grade: +, − e Gravar lado a lado, junto de Tamanho e Cor ---- */
.campo > span.grade-botoes { display: flex; gap: .35rem; align-items: stretch; }
.grade-botoes .botao { min-width: 2.4rem; padding: .55rem .6rem; font-weight: 700; }
.grade-botoes .botao:not(.botao--primario) { font-size: 1.1rem; }
.grade-botoes .botao:disabled { opacity: .45; cursor: default; }


/* ---- Contas a Pagar / Receber: filtro e total ---- */
.filtro-titulos {
  display: grid; grid-template-columns: 9rem 9rem minmax(14rem, 1fr) 10rem auto;
  gap: .75rem; align-items: end; margin: 1rem 0;
}
.filtro-titulos .campo { margin-bottom: 0; }
.campo > span.filtro-titulos__botoes { display: flex; gap: .4rem; }
.total-titulos {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.5rem;
  margin-top: .8rem; padding: .7rem 1rem; border-radius: 12px;
  background: var(--bg-mute); font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
  .filtro-titulos { grid-template-columns: 1fr 1fr; }
  .filtro-titulos__pessoa { grid-column: 1 / -1; }
}


/* ---- Ver no celular: moldura de 390 x 844 com o próprio painel ---- */
.topo__celular { margin-right: .4rem; }
.topo__celular[hidden] { display: none; }
.janela-celular { overflow: hidden; padding: 0; }
.janela-celular[open] { display: flex; flex-direction: column; }
.celular { display: flex; justify-content: center; padding: 1rem; background: var(--bg-mute); }
.celular__tela {
  width: 390px; height: min(844px, calc(100vh - 9rem));
  border: 10px solid #111; border-radius: 34px; background: #fff;
}
@media (max-width: 860px) { .topo__celular { display: none; } }


/* ---- Dar baixa: Caixa ou Banco (14/09) ---- */
.destino-baixa { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .4rem 0 .9rem; }
.destino-baixa__botao {
  font: inherit; font-size: 1rem; font-weight: 600; padding: .8rem .6rem; border-radius: 12px;
  border: 1px solid var(--blue-600); background: var(--surface); color: var(--blue-600); cursor: pointer;
}
.destino-baixa__botao--ativo { background: var(--blue-400); border-color: var(--blue-600); color: #fff; }

/* ---- Catálogo On-Line no cadastro do produto (14/09) ---- */
.marcas-simples--linha { display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem 1.2rem; }
.calculo-catalogo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .6rem; }
.calculo-catalogo .dica { grid-column: 1 / -1; margin: 0; }
.calculo-catalogo__cartao {
  display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border-radius: 12px;
  background: var(--blue-50); border: 1px solid var(--border);
}
.calculo-catalogo__cartao--loja { background: #e8f6ee; }
.calculo-catalogo__rotulo { font-size: .78rem; color: var(--text-soft); }
.calculo-catalogo__cartao strong { font-size: 1.15rem; }
.calculo-catalogo__cartao small { font-size: .78rem; color: var(--text-soft); }
@media (max-width: 860px) { .calculo-catalogo { grid-template-columns: 1fr; } }

/* Alternar entre escolher na lista e digitar o usuário, na tela de entrada. */
.ligacao {
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  color: var(--blue-600); font-size: .9rem; text-decoration: underline; justify-self: center;
}
.ligacao:hover { color: var(--navy-900); }


/* Duas marcas no cabeçalho da entrada: a da loja na esquerda, a nossa na
   direita, e o nome do sistema centralizado entre elas. */
.entrada__marca strong {
  /* Numa linha só: quebrado em duas, o nome descia e desalinhava das logos. */
  text-align: center; white-space: nowrap; font-size: 1.32rem;
}
.entrada__logo--cliente {
  /* Mesmo tamanho aparente da logo da Mateus: a nossa é deitada (378x122) e
     ocupa 180px de largura; a da MADALICE é quadrada, então cresce em altura
     para pesar igual ao lado do nome. */
  height: 62px; width: 62px; max-width: 62px; justify-self: start;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 10px rgba(224,201,162,.55));
}

/* ---------------------------------------------------------------- HOME
 * Cartões grandes, no formato do GestorAppMI: quadrado claro, ícone grande em
 * cima e o nome embaixo, nas cores da MADALICE.
 */
.cartoes {
  display: grid; gap: 1rem; margin: 1rem 0 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.cartao {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; min-height: 132px; padding: 1rem .6rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-g); box-shadow: var(--sombra);
  color: var(--navy-900); font-family: inherit;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cartao:hover {
  transform: translateY(-2px); border-color: var(--blue-400);
  box-shadow: 0 6px 18px rgba(43,18,6,.16);
}
.cartao__icone { font-size: 2.1rem; line-height: 1; }
.cartao__nome { font-size: 1rem; font-weight: 700; text-align: center; color: var(--text); }


/* Logo da MADALICE no cabeçalho, na mesma altura da logo da Mateus. */
.topo__logo-loja {
  height: 86px; width: 86px; object-fit: contain; margin-left: -.2rem;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 12px rgba(224,201,162,.5));
}
@media (max-width: 860px) { .topo__logo-loja { display: none; } }

/* A logo da loja passou para o CABEÇALHO (20/09/2026), então a lateral não
   repete: o menu começa no alto, alinhado com a área de trabalho. */
@media (min-width: 861px) {
  .lateral__marca { display: none; }
  .menu { padding-top: .5rem; }
}

/* Sair, último item do menu — separado do resto por um traço. */
.menu__item--sair {
  margin-top: .6rem; border-top: 1px solid rgba(255,255,255,.18); padding-top: .7rem;
  width: 100%;
}

/* Botões da barra em SÍMBOLO (projeto da MADALICE): miúdos e quadrados, com
   o símbolo grande e em negrito, e o mínimo de espaço entre eles. */
.botao.botao--simbolo, .botao--pilula.botao--simbolo {
  /* Um pouco maiores, com o símbolo bem no centro: grid + place-items e
     line-height 1 tiram o deslocamento que a linha de base da fonte dá. */
  min-width: 44px; width: 44px; height: 38px; padding: 0;
  font-size: 1.45rem; font-weight: 900; line-height: 38px;
  /* flex + center nos dois eixos: cada símbolo tem altura de glifo diferente
     (a flecha é baixa, o + é alto), e com line-height igual à altura do botão
     todos caem no mesmo meio. */
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; vertical-align: middle;
}
.botao--simbolo + .botao--simbolo { margin-left: 2px; }
/* O Voltar segue o mesmo padrão: flecha grande e em negrito. */
.botao--pilula.botao--simbolo { width: 62px; height: 38px; font-size: 1.5rem; font-weight: 900; }

/* ------------------------------------------------------- CELULAR
 * Elas vão usar o sistema quase só no celular. Aqui o cabeçalho vira uma
 * faixa baixa (logo pequena + nome na mesma linha) e os atalhos da Home ficam
 * DOIS por linha — um por linha gastava a tela inteira em três cartões.
 */
@media (max-width: 860px) {
  .topo {
    grid-template-columns: auto 1fr auto; gap: .6rem;
    min-height: 64px; padding: .4rem .8rem;
  }
  .topo__logo-loja { display: block; height: 46px; width: 46px; margin: 0; }
  .topo__titulo strong { font-size: 1.15rem; }
  .topo .marca-dev { display: flex; margin: 0; }
  .topo .marca-dev__logo { height: 34px; }
  .topo .marca-dev span { display: none; }

  .cartoes { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .cartao { min-height: 104px; padding: .7rem .4rem; gap: .35rem; }
  .cartao__icone { font-size: 1.7rem; }
  .cartao__nome { font-size: .82rem; line-height: 1.15; }
}

/* O sistema é claro, como a loja: não acompanha o modo escuro do aparelho.
   Quem quiser escuro liga no próprio sistema (data-tema no <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="escuro"]):is(:not([data-paleta]), [data-paleta=""]) {
    --bg: #faf6f1; --surface: #ffffff; --bg-mute: #f3e9dc;
    --border: #e8dccb; --text: #2b1a10; --text-soft: #6b5746; --text-mute: #8e7b69;
    --blue-50: #fbf6ef;
  }
}

/* No celular o cabeçalho já traz as duas logos, então a faixa de marca que
   existia dentro da lateral não se repete. */
@media (max-width: 860px) {
  .lateral__marca { display: none; }
  .marca-dev--mobile { display: none; }
}

/* Os símbolos dos botões são desenhos (SVG): centram sozinhos, sem depender
   da altura do glifo de cada caractere. */
.botao--simbolo svg { display: block; }

/* Cartão de entrada no CELULAR: logos menores e o nome no meio delas, numa
   linha só, sem encostar nas bordas. */
@media (max-width: 860px) {
  .entrada { padding: .8rem; }
  .entrada__cartao { padding: 1.4rem 1.1rem; }
  .entrada__marca {
    margin: -1.4rem -1.1rem 1rem; padding: .7rem .8rem; gap: .5rem;
  }
  .entrada__logo { height: 46px; max-width: 108px; }
  .entrada__logo--cliente { height: 46px; width: 46px; max-width: 46px; }
  .entrada__marca strong { font-size: 1.08rem; }
}

/* "Olá, NOME" menor no celular: o título tomava uma faixa inteira da tela. */
@media (max-width: 860px) {
  .titulo { font-size: 1.15rem; }
  .linha-titulo { margin-bottom: .5rem; }
}

/* ------------------------------------------------ LISTA NO CELULAR
 * A lista de Clientes / Fornecedores no celular mostra só o que cabe: nome,
 * o papel (C/F) e a situação (A/I). Telefone, cidade e CNPJ/CPF ficam na
 * ficha — na lista eles empurravam a tabela para fora da tela, e a faixa do
 * título sumia junto.
 */
@media (max-width: 860px) {
  .tabela--pessoas th:nth-child(3), .tabela--pessoas td:nth-child(3),
  .tabela--pessoas th:nth-child(4), .tabela--pessoas td:nth-child(4),
  .tabela--pessoas th:nth-child(5), .tabela--pessoas td:nth-child(5) { display: none; }
  .tabela--pessoas table { width: 100%; }
  .tabela--lista { overflow-x: hidden; }
  .lista__faixa { position: sticky; left: 0; }
}

/* Os símbolos (C F A I) ficam todos juntos, encostados na direita, e o nome
   ocupa o resto — cortando com reticências quando não cabe. */
.tabela--pessoas .col-selos { white-space: nowrap; text-align: right; width: 1%; }
.tabela--pessoas .col-nome {
  max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A faixa do título fica centrada na LARGURA DA TELA, não na da tabela:
   com a tabela mais larga que o celular, o texto fugia para fora. */
@media (max-width: 860px) {
  .lista__faixa { position: sticky; left: 0; text-align: center; }
}

/* Tabela de pessoas no celular: largura travada (table-layout: fixed), com a
   coluna dos quatro selos com medida certa e o nome ocupando o resto. Sem
   isso o navegador alargava a tabela e os selos saíam pela direita. */
@media (max-width: 860px) {
  .tabela--pessoas table { table-layout: fixed; width: 100%; }
  .tabela--pessoas .col-marcar { width: 30px; }
  .tabela--pessoas .col-selos { width: 104px; padding-right: 6px; }
  .tabela--pessoas .col-nome strong { font-weight: 700; }
  .selo--letra { width: 19px; height: 19px; margin-right: 1px; font-size: .72rem; }
}

/* Tela de toque: sem barra de rolagem à mostra, como no celular. A rolagem
   continua funcionando (dedo, roda do mouse ou teclado). */
@media (max-width: 860px) {
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { width: 0; height: 0; }
}

/* No celular a primeira coluna é a marcação (checkbox), então o min-width de
   9rem que vale no PC não pode valer aqui — era ele que alargava a tabela e
   jogava os selos para fora da tela. */
@media (max-width: 860px) {
  .tabela--pessoas td:first-child, .tabela--pessoas th:first-child {
    min-width: 0; width: 28px; white-space: nowrap;
  }
  .tabela--pessoas th, .tabela--pessoas td { padding: .45rem .3rem; }
}

/* Com table-layout: fixed quem manda nas larguras é a LINHA DO CABEÇALHO —
   por isso a medida dos selos vai no <th>, e não só no <td>. */
@media (max-width: 860px) {
  .tabela--pessoas th:nth-child(6) { width: 96px; text-align: right; }
  .tabela--pessoas th:nth-child(2) { width: auto; }
}

/* Filtros por símbolo no cabeçalho da lista: o ligado fica firme, o desligado
   fica apagado — e o toque alterna. */
.selo--filtro { cursor: pointer; border: 1px dashed var(--border); background: transparent; color: var(--text-mute); font-family: inherit; }
.selo--filtro.selo--ligado { border-style: solid; border-color: transparent; background: var(--blue-500); color: #fff; }
/* A linha inteira abre o cadastro: mostra que dá para tocar. */
.linha--toque { cursor: pointer; }
.linha--toque:active { background: var(--bg-mute); }

/* Letras dos selos (C F A I) exatamente no centro do quadradinho: grid com
   centralização nos dois eixos, sem line-height herdado e sem padding. */
.selo--letra {
  display: inline-grid !important; place-items: center; place-content: center;
  padding: 0 !important; line-height: 1; text-align: center; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.selo--letra.selo--filtro { padding: 0 !important; }

/* Janela no jeito CELULAR: ocupa a tela toda, barra só com o nome e o X.
   Nada de minimizar, restaurar ou arrastar — isso é de computador. */
@media (max-width: 860px) {
  dialog#dlg, dialog#dlg-codigos {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0; inset: 0;
  }
  .janela__barra { border-radius: 0; padding: .6rem .8rem; }
  .janela__titulo { font-size: 1.05rem; }
}

/* Cliente em atraso: o nome sai em vermelho na lista, sem precisar abrir nada. */
.nome--atraso { color: var(--sai); }

/* Linha das datas: Cadastro + Nascimento (Física) ou Cadastro + Fundação
   (Jurídica) — duas colunas, também no celular. */
.grade-datas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* UF e Cidade lado a lado, também no celular: a UF é estreita, a cidade fica
   com o resto da linha. */
.grade-uf-cidade { display: grid; grid-template-columns: 92px 1fr; gap: .6rem; }

/* Nada rola para o lado no celular: a tela sobe e desce, e só. As quatro
   marcações do cadastro (Cliente/Fornecedor/Física/Jurídica) quebram em duas
   linhas em vez de esticar a janela. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  #dlg, #dlg-codigos, #dlg-corpo, .dialogo__corpo { overflow-x: hidden; }
  .marcas, .marcas--apertado { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
  .marcas .marcar { flex: 0 0 auto; }
  .campo input, .campo select, .campo textarea { max-width: 100%; }
}

/* Endereço no celular: CEP + Bairro numa linha, Endereço + Número noutra. */
.grade-cep { display: grid; grid-template-columns: 132px 1fr; gap: .6rem; }
.grade-endereco { display: grid; grid-template-columns: 1fr 80px; gap: .6rem; }

/* As quatro marcações (Cliente/Fornecedor/Física/Jurídica) em duas colunas
   iguais, centradas no espaço do celular — em vez de esticarem a linha. */
@media (max-width: 860px) {
  .marcas--apertado {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem;
    justify-items: start; max-width: 320px; margin-left: auto; margin-right: auto;
  }
}

/* Limite e Saldo lado a lado, inclusive no celular. */
.grade-credito { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* O contador (5/232) é só informação: fica pequeno, no canto direito e em
   baixo da faixa. O título continua centrado pelo tamanho do cabeçalho — a
   faixa só reserva a altura dele, sem empurrar o texto para o lado. */
.lista__faixa { position: relative; padding-bottom: 1.15rem; }
.lista__conta {
  position: absolute; right: .5rem; bottom: .15rem;
  font-size: .62rem; font-weight: 600; letter-spacing: 0;
  opacity: .85; line-height: 1;
}

/* As quatro marcações em duas linhas ficaram com espaço sobrando: crescem um
   pouco para o dedo acertar, sem passar da largura dos campos. */
@media (max-width: 860px) {
  .marcas--apertado { max-width: 330px; justify-items: stretch; }
  .marcas--apertado .marcar {
    padding: .5rem .55rem; gap: .45rem;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  }
  .marcas--apertado .marcar span { font-size: .92rem; }
  .marcas--apertado .marcar input { width: 19px; height: 19px; }
}

/* O R$ da barra: texto no lugar de desenho, no peso dos outros símbolos. */
.simbolo-rs { font-size: 1.02rem; font-weight: 900; letter-spacing: -.5px; line-height: 1; }

/* Financeiro da pessoa: atalhos de período, totais e títulos. */
.fin-atalhos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.fin-atalhos .selo { padding: .45rem .7rem; font-size: .85rem; border-radius: 999px; cursor: pointer; }
.fin-placar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .8rem; }
.fin-cartao {
  background: var(--bg-mute); border-radius: 12px; padding: .55rem .7rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.fin-cartao span { font-size: .75rem; opacity: .75; }
.fin-cartao b { font-size: 1.05rem; }
.fin-cartao--atraso b { color: var(--sai); }
.fin-linha {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .45rem .1rem; border-top: 1px solid var(--border); font-size: .9rem;
}
.fin-nada { opacity: .7; font-size: .9rem; }

/* Financeiro: um título por lado (Clientes / Fornecedores) e o terceiro
   cartão ocupando a linha inteira, já que são três números. */
.fin-titulo { margin: .9rem 0 .5rem; font-size: .95rem; }
.fin-titulo:first-child { margin-top: 0; }
.fin-cartao--largo { grid-column: 1 / -1; }

/* O cabeçalho não sai da tela: é a barra fixa do aplicativo, e a logo dentro
   dele é o botão de INÍCIO (volta para os menus). */
.topo { position: sticky; top: 0; z-index: 40; }
.topo__inicio {
  background: none; border: 0; padding: 0; margin: 0;
  display: flex; align-items: center; cursor: pointer;
}
.topo__inicio:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; border-radius: 50%; }
.topo__inicio:active .topo__logo-loja { transform: scale(.94); }
.topo__logo-loja { transition: transform .12s; }

/* `overflow-x: hidden` no body transformava o body num container de rolagem —
   e com isso o cabeçalho sticky deixava de grudar. `clip` corta o que passa
   dos lados sem criar rolagem, e aí o cabeçalho fica. */
@media (max-width: 860px) {
  body { overflow-x: clip; overflow-y: visible; }
}

/* No celular a Home é só os cartões. A grade de ATALHOS repetia o menu
   inteiro (Crediário, Bancos, Configurações...) logo abaixo deles — duas
   listas da mesma coisa na mesma tela. Fica escondida no telefone; no
   computador continua igual, nada foi tirado do sistema. */
@media (max-width: 860px) {
  #atalhos-area, .marcar--canto { display: none; }
}

/* Cartão marcado como "só no computador": some no celular, continua inteiro
   no sistema (é só a Home do telefone que fica enxuta). */
@media (max-width: 860px) {
  .cartao--pc { display: none; }
}

/* No celular NENHUMA lista rola para o lado: a tabela cabe na tela (colunas
   cortadas com reticências). Isso também é o que faz o nome da faixa ficar
   centralizado — antes ele se centrava na largura da TABELA (645px numa tela
   de 412) e aparecia jogado na direita. */
@media (max-width: 860px) {
  .tabela--lista { overflow-x: hidden; }
  .tabela--lista table { table-layout: fixed; width: 100%; }
  .tabela--lista th, .tabela--lista td { overflow: hidden; text-overflow: ellipsis; }
  .lista__faixa { font-size: 1.08rem; }
}

/* Lista de Empresas no celular: só o nome. Nº, documento, contato e telefones
   continuam no cadastro e no computador — na tela do telefone eles só
   espremiam o nome, que é o que se procura ali. */
@media (max-width: 860px) {
  .tabela--empresas th:nth-child(2), .tabela--empresas td:nth-child(2),
  .tabela--empresas th:nth-child(4), .tabela--empresas td:nth-child(4),
  .tabela--empresas th:nth-child(5), .tabela--empresas td:nth-child(5),
  .tabela--empresas th:nth-child(6), .tabela--empresas td:nth-child(6),
  .tabela--empresas th:nth-child(7), .tabela--empresas td:nth-child(7) { display: none; }
  .tabela--empresas .col-marcar { width: 30px; }
}

/* A coluna de marcar em TODA lista: a mesma largura do cadastro de Clientes.
   Com table-layout fixed o "width: 1%" dela virava um fio invisível. */
@media (max-width: 860px) {
  .tabela--lista .col-marcar { width: 34px; }
}

/* Especificidade: a regra geral usa th.col-marcar/td.col-marcar, então a do
   celular precisa do mesmo peso para valer (senão a coluna fica com 4px). */
@media (max-width: 860px) {
  .tabela--lista th.col-marcar, .tabela--lista td.col-marcar { width: 34px; }
}

/* A caixa de pergunta/recado nas cores da loja -- o vermelho de "alerta" saiu
   junto com a palavra. */
.alerta-cab, .alerta-rod { background: var(--navy-900); }
.alerta-cab { color: #fff; padding: 8px; min-height: 0; }
.alerta-x { border-color: rgba(255,255,255,.5); color: #fff; }
.alerta-ok { background: var(--blue-600); }
.alerta-ok:hover { background: var(--blue-500); }
.alerta-ok, .alerta-voltar {
  min-width: 44px; font-size: 1.3rem; font-weight: 900; line-height: 1;
}

/* Rodapé: EMPRESA e USUÁRIO lado a lado, e só isso. A linha de cidade, dia e
   hora sai da tela (o celular já mostra a hora dele em cima). */
.rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.2rem; }
.rodape__local { display: none; }

/* Rua + número: a rua leva a linha quase toda. (Era .grade-endereco, que já
   tinha dono no cadastro da empresa.) */
.grade-rua-numero { display: grid; grid-template-columns: 1fr 80px; gap: .6rem; }

/* Marcação miúda embaixo de um campo ("Não tenho CNPJ"). */
.marcar--mini { font-size: .76rem; margin-top: .3rem; gap: .35rem; }
.marcar--mini input { width: 15px; height: 15px; }

/* Campo apagado: continua à vista, em marrom claro, sem aceitar digitação. */
.campo--apagado > span { color: var(--blue-400); }
.campo--apagado input,
.campo--apagado select,
.campo--apagado input:disabled {
  color: var(--blue-400); background: var(--bg-mute);
  border-color: var(--border); -webkit-text-fill-color: var(--blue-400); opacity: 1;
}

/* Cidade com a linha quase toda; o estado são duas letras. */
.grade-cidade-uf { display: grid; grid-template-columns: 1fr 92px; gap: .6rem; }

/* Título de bloco (Identificação, Contato, Usuários desta empresa…) sempre em
   negrito: é ele que separa um assunto do outro dentro do cadastro. Vale
   também para o separador de linha, como "Endereço". */
.grupo legend, .separador span {
  font-weight: 800; color: var(--text); letter-spacing: .2px;
}

/* Tipo da Empresa é da Receita, não do operador: parece travado (sem a seta
   de lista, fundo do campo preenchido pelo sistema) e não aceita toque. */
#emp-crt[disabled] {
  appearance: none; -webkit-appearance: none;
  background-image: none; background: var(--bg-mute);
  color: var(--text-soft); -webkit-text-fill-color: var(--text-soft);
  opacity: 1; cursor: default;
}

/* Lista de Usuários no celular: sem a coluna de e-mail — ela só cabia
   truncada ("camille@madalice.lo…"), e o e-mail continua no cadastro. */
@media (max-width: 860px) {
  .tabela--lista th.col-email, .tabela--lista td.col-email { display: none; }
}

/* Nome larga, caixa estreito (um número, com as setinhas do próprio campo). */
.grade-nome-caixa { display: grid; grid-template-columns: 1fr 92px; gap: .6rem; }

/* "Ativo" é resposta de sim/não que se lê de longe: letra um pouco maior. */
.interruptor span { font-size: 1rem; font-weight: 600; }

/* Produtos no celular: nome (com o código ao lado e o código de barras
   embaixo), preço de venda e o olhinho. O resto é do computador. */
.produto__codigo { color: var(--text-mute); font-weight: 600; margin-left: .35rem; }
.tabela--lista th.col-olho, .tabela--lista td.col-olho { width: 38px; text-align: center; }
@media (max-width: 860px) {
  .tabela--lista th.col-pc, .tabela--lista td.col-pc { display: none; }
}

/* Campo de porcentagem: alinhado à direita, como os de dinheiro. */
.campo-pct { text-align: right; }

/* O código do produto embaixo do nome: some junto com o nome cortado se
   ficar na mesma linha. */
.produto__codigo { display: inline-block; margin: .1rem 0 0; }

/* NCM e CEST na MESMA linha também no celular: são dois códigos curtos, e um
   embaixo do outro gastava duas linhas da tela por nada. */
@media (max-width: 860px) {
  .grade-fiscal { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .grade-fiscal .botao--pequeno { padding: .3rem .45rem; }
}

/* Custo, Preço e Margem numa linha só, inclusive no celular: é uma conta só
   vista de três lados. */
@media (max-width: 860px) {
  #bl-precos .grade-3 { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
  #bl-precos .grade-2 { grid-template-columns: 1fr 1fr; gap: .4rem; }
  #bl-precos .campo span { font-size: .78rem; }
}

/* Lista de produtos: preço e catálogo estreitos; o NOME fica com todo o
   resto da largura -- é ele que a loja procura na tela, não o número. */
@media (max-width: 860px) {
  .tabela--lista th.col-preco, .tabela--lista td.col-preco {
    width: 72px; font-size: .8rem; padding-left: .2rem; padding-right: .2rem;
  }
  .tabela--lista td.col-nome strong { font-size: .95rem; }
}

/* Painel de filtros da lista: uma caixa clara acima da tabela, com os botões
   ✕ (limpar) e ✓ (filtrar) no canto direito. */
.filtros {
  background: var(--bg-mute); border: 1px solid var(--border);
  border-radius: 12px; padding: .7rem; margin-bottom: .8rem;
}
.filtros[hidden] { display: none; }
.filtros .campo { margin-bottom: .5rem; }
.filtros__acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
@media (max-width: 860px) {
  .filtros .grade-2 { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .filtros .campo span { font-size: .78rem; }
}

/* Produto no celular: o nome ocupa a linha toda; código, barras e preços vão
   embaixo. As colunas de preço somem -- viraram essa segunda linha. */
.produto__linha2 { display: none; }
@media (max-width: 860px) {
  .tabela--lista th.col-preco, .tabela--lista td.col-preco { display: none; }
  .produto__linha2 {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: .5rem; margin-top: .15rem;
  }
  .produto__precos { white-space: nowrap; color: var(--text-soft); font-weight: 600; }
  .tabela--lista td.col-nome strong { white-space: normal; }
}

/* Os quatro códigos em DUAS linhas no celular: código + barras em cima,
   alfanumérico + outros embaixo. Quatro linhas empurravam a descrição para
   fora da tela. */
@media (max-width: 860px) {
  /* Código é curto (três dígitos); o de barras tem treze -- por isso 1 para 2. */
  .grade-codigos { grid-template-columns: 1fr 2fr; gap: .5rem; }
  .grade-codigos .campo span { font-size: .78rem; }
  .grade-codigos .botao--pequeno { padding: .3rem .4rem; }
}

/* Código cabe seis dígitos; o de barras fica com o resto da linha. */
@media (max-width: 860px) {
  .grade-codigos { grid-template-columns: 96px 1fr; }
  .grade-codigos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .grade-codigos-2 .campo span { font-size: .78rem; }
}
.grade-codigos-2 { display: grid; grid-template-columns: 220px minmax(180px, 1fr); gap: .75rem; }

/* (Vem por último de propósito: as regras de largura dos códigos acima são
   do computador, e no celular quem manda é esta.) */
@media (max-width: 860px) {
  .grade-codigos { grid-template-columns: 96px minmax(0, 1fr); gap: .5rem; }
  .grade-codigos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
  .grade-codigos .campo, .grade-codigos-2 .campo { min-width: 0; }
  .grade-codigos input, .grade-codigos-2 input { width: 100%; min-width: 0; }
}

/* Lista de produtos dentro da janela de grupo: rola dentro da janela, não
   empurra os botões para fora da tela. */
.lista-marcar { max-height: 38vh; overflow-y: auto; margin: .3rem 0 .6rem; }
.lista-marcar .marcar { display: flex; padding: .25rem .1rem; }
.lista-marcar .marcar span { font-size: .85rem; }

/* Os três botões de foto: mesma largura, na mesma linha, também no celular. */
.fotos-acoes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
.fotos-acoes .botao {
  width: 100%; padding: .5rem .3rem; font-size: .82rem; white-space: nowrap;
}

/* O lembrete DD/MM/AAAA dentro do campo de data: discreto, maiúsculo. */
.campo-data::placeholder { color: var(--text-mute); letter-spacing: .04em; text-transform: uppercase; }

/* Produto no celular: nome numa linha só (corta com reticências), código e
   código de barras embaixo, e os preços escritos na linha seguinte. */
.produto__precos { display: none; }
@media (max-width: 860px) {
  .tabela--lista td.col-nome strong {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .produto__linha2 { display: block; margin-top: .1rem; }
  .produto__precos {
    display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin-top: .1rem;
    color: var(--text-soft); font-weight: 600;
  }
}

/* Nome do produto um pouco menor: assim o nome inteiro cabe na linha em vez
   de terminar em "..." — é o nome que a loja procura na tela. */
@media (max-width: 860px) {
  .tabela--lista td.col-nome strong { font-size: .84rem; letter-spacing: -.1px; }
  .produto__codigo, .produto__precos small { font-size: .72rem; }
}

/* Os três botões de foto não podem esticar o quadro: eles encolhem e, se
   faltar espaço, o texto corta com reticências. (Sem isto o fieldset ficava
   436px numa tela de 412 e a janela rolava para o lado.) */
.grupo, .fotos-acoes { min-width: 0; }
.fotos-acoes .botao {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Galeria do produto: três por linha, e vai criando linhas (até seis fotos). */
.galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 860px) {
  .galeria { gap: .4rem; }
}

/* Cartão em obra: o selo diz o que é, e o cartão fica um tom mais apagado. */
.cartao--obra { opacity: .85; }
.cartao__obra {
  display: block; margin-top: .15rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blue-600);
}

/* Faixa de "em desenvolvimento" no alto da tela -- mesma cara das faixas do
   aplicativo, sem virar caixa de aviso. */
.faixa-obra {
  margin: 0 0 .7rem; padding: .45rem .7rem; border-radius: 10px;
  background: var(--bg-mute); border: 1px solid var(--border);
  color: var(--blue-600); font-weight: 700; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
}

/* Linha de cadastro rápido: campo larga, ✓ e ✕ do tamanho dos outros
   botões-símbolo, e nada passa da largura da tela. */
.linha-novo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .35rem; align-items: center; margin: .3rem 0 .6rem; max-width: 100%;
}
.linha-novo input { width: 100%; min-width: 0; }
.linha-novo .botao {
  min-width: 40px; width: 40px; padding: .4rem 0; font-size: 1.1rem;
  font-weight: 900; line-height: 1;
}

/* A linha de cadastro rápido ocupa a largura toda da grade onde está: dentro
   de uma coluna estreita o campo ficava com 55px, sem caber nada. */
.grade-caracteristicas .linha-novo,
.grade-codigos .linha-novo,
.grade-2 .linha-novo,
.grade-3 .linha-novo { grid-column: 1 / -1; }

/* Tamanho e Cor um embaixo do outro no celular: com os dois na mesma linha, a
   lista ficava estreita demais para ler o nome da cor. */
@media (max-width: 860px) {
  .grade-caracteristicas { grid-template-columns: 1fr; }
}

/* Preços da linha do produto: à direita e em negrito; catálogo e promoção
   descem, cada um na sua linha. */
@media (max-width: 860px) {
  .produto__linha2 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
  .produto__precos { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
  .produto__preco { white-space: nowrap; color: var(--text-soft); }
  .produto__preco b { color: var(--text); font-weight: 800; }
}

/* Estoque do produto novo: rótulo em cima, campo curto embaixo e o ✓ ao lado.
   O campo não toma a linha toda -- é um número. */
.estoque-inicial { display: flex; align-items: flex-end; gap: .4rem; }
.estoque-inicial .campo { margin-bottom: 0; width: 84px; }
.estoque-inicial .campo input { text-align: center; }
.estoque-inicial .botao { min-width: 32px; width: 32px; height: 32px; padding: 0; font-size: .95rem; font-weight: 900; }

/* Os preços encostam na borda direita da linha (só o respiro do 👁). */
@media (max-width: 860px) {
  .tabela--lista td.col-nome { padding-right: .15rem; }
  .tabela--lista th.col-olho, .tabela--lista td.col-olho { width: 30px; padding-left: 0; padding-right: 2px; }
}

/* Terceira linha do produto: estoque à esquerda, catálogo e promoção à
   direita, encostados na borda. */
.produto__linha3 { display: none; }
@media (max-width: 860px) {
  .produto__linha3 {
    display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
  }
  .produto__estoque { color: var(--text-soft); white-space: nowrap; }
  .produto__estoque b { color: var(--text); font-weight: 800; }
  .tabela--lista td.col-nome { padding-right: 0; }
  .tabela--lista th.col-olho, .tabela--lista td.col-olho { width: 26px; padding: 0; }
}

/* As setinhas do campo de estoque ficam sempre à mostra (no celular o
   navegador esconde por padrão). */
.estoque-inicial input[type="number"] { -moz-appearance: number-input; }
.estoque-inicial input[type="number"]::-webkit-outer-spin-button,
.estoque-inicial input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button; opacity: 1; height: 1.6rem;
}

/* Faixa da caixa de informação: sem texto ela some; com "INFORMAÇÃO" ela
   aparece, nas cores do aplicativo (nada de vermelho de alerta). */
.alerta-cab:empty { padding: 4px; }

/* Movimentação ao lado do Estoque, como o dono desenhou: o título em negrito
   na altura da legenda "Estoque", e os dois botões na mesma linha do número.
   A coluna do estoque é estreita (é um número); a da movimentação fica com o
   resto, senão os botões não cabem. */
#bl-estoque .grade-2 { grid-template-columns: 116px minmax(0, 1fr); align-items: start; }
.movimentacao { display: block; }
.movimentacao__titulo {
  display: block; font-size: .8rem; font-weight: 800; color: var(--text);
  margin-bottom: .3rem;
}
/* Os dois botões ficam um embaixo do outro dentro da coluna: lado a lado,
   "Movimentações" e "Consultas" não cabiam e vazavam para fora do quadro. */
.movimentacao__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.movimentacao__botoes .botao {
  width: 100%; min-width: 0; font-size: .7rem; padding: .45rem .2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* "Movimentação:" sobe para a linha da legenda "Estoque" e fica centralizado
   sobre os dois botões — como o dono desenhou. Fundo branco por baixo para
   ele cortar a borda do quadro, igual à legenda. */
#bl-estoque { position: relative; }
.movimentacao__titulo {
  /* Centrado na própria borda do quadro, igual à legenda "Estoque" -- por
     isso translateY(-50%) a partir do topo, e não um recuo chutado. */
  /* Os 10px descontam o padding de cima do quadro: o "top: 0" do absoluto
     começa DEPOIS dele, e a legenda "Estoque" mora na borda. */
  position: absolute; top: 0; transform: translateY(calc(-50% - 10px));
  right: .7rem; left: calc(116px + .75rem + .7rem);
  text-align: center; margin: 0; line-height: 1.2;
}
/* Só o TEXTO tem fundo: assim a linha do quadro corta no "M" e volta depois
   dos dois pontos, em vez de sumir num vão branco do tamanho da coluna. */
.movimentacao__titulo b { background: var(--surface); padding: 0 .4rem; }

/* Os botões ficam do tamanho do campo do estoque: mesma altura e começando
   na mesma linha dele (o rótulo "Estoque:" ocupa a linha de cima). */
/* Mesma altura e mesma linha do campo do estoque -- os botões descem e ficam
   do tamanho dele, só que ocupando a largura da coluna. */
.movimentacao__botoes { margin-top: 1.45rem; }
.movimentacao__botoes .botao {
  height: 42px; display: inline-flex; align-items: center; justify-content: center;
}

/* Título de trecho com um botão do lado (os preços dentro da entrada). */
.linha-titulo-mini {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: .8rem 0 .4rem; font-size: .88rem;
}

/* Duas colunas de verdade, também no celular (a .grade-2 vira uma coluna lá). */
.grade-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* Movimento escolhido fica marcado: fundo marrom claro e letra forte. */
#m-tipo { background: var(--bg-mute); font-weight: 700; color: var(--navy-900); }

/* Campo preenchido pelo sistema: muda a cor do texto e o fundo, mas a BORDA
   é a mesma dos outros campos -- assim a tela tem um desenho só. */
.campo--auto input, .campo--auto select { border-color: var(--border); }

/* Quantidade com o botão Alterar do lado, alinhados pela base. */
.quantidade-linha { display: flex; align-items: flex-end; gap: .5rem; }
.quantidade-linha .campo { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }
.quantidade-linha .botao { height: 42px; white-space: nowrap; }

/* Celular: o nome fica com a linha toda e os símbolos descem, maiores. */
.pessoa__selos { display: none; }
@media (max-width: 860px) {
  .tabela--pessoas th.col-selos, .tabela--pessoas td.col-selos { display: none; }
  .tabela--pessoas .col-nome { max-width: none; white-space: normal; }
  .pessoa__selos { display: flex; gap: .5rem; margin-top: .35rem; }
  .pessoa__selos .selo--letra { width: 26px; height: 26px; font-size: .9rem; margin: 0; }
}

/* Linha de filtros (C F A I) -- só no celular, onde a coluna deles não existe. */
.filtros-selos { display: none; }
@media (max-width: 860px) {
  .filtros-selos { display: flex; justify-content: center; gap: .6rem; margin: 0 0 .6rem; }
  .filtros-selos .selo--letra { width: 34px; height: 34px; font-size: 1rem; margin: 0; }
}

/* Quantidade curta, Alterar grande: é o botão que se procura com o dedo. */
.quantidade-linha .campo { flex: 0 0 130px; }
.quantidade-linha .botao { flex: 1 1 auto; font-size: .9rem; font-weight: 700; }

/* Os preços da entrada respondem igual aos do cadastro: Custo, Venda e
   Margem numa linha só, com o mesmo tamanho de rótulo. */
@media (max-width: 860px) {
  #m-bloco-precos .grade-3 { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
  #m-bloco-precos .campo span, #m-bloco-conversao .campo span { font-size: .78rem; }
}

/* Com as unidades na linha, os três campos dividem o espaço por igual. */
.quantidade-linha--cheia { gap: .4rem; }
.quantidade-linha--cheia .campo { flex: 1 1 0; margin-bottom: 0; }
.quantidade-linha--cheia .campo span { font-size: .76rem; }

/* A caixa dos filtros C F A I, com "Selecione:" centralizado na borda. */
@media (max-width: 860px) {
  .filtros-selos { padding: .5rem .6rem .6rem; margin-bottom: .7rem; }
  .filtros-selos legend {
    float: none; width: auto; margin: 0 auto; padding: 0 .4rem;
    text-align: center; font-weight: 800; color: var(--text);
  }
}

/* Linha da consulta: quantidade e o botão "Ver" juntos, à direita. */
.cm-direita { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.cm-direita .botao { padding: .25rem .5rem; font-size: .75rem; }

/* Telas estreitas de verdade (até 400px): Movimentações e Consultas não
   cabem lado a lado sem cortar o nome -- ficam um embaixo do outro. */
@media (max-width: 400px) {
  .movimentacao__botoes { grid-template-columns: 1fr; }
  .movimentacao__botoes .botao { height: 36px; font-size: .75rem; }
  #bl-estoque .grade-2 { grid-template-columns: 96px minmax(0, 1fr); }
}

/* Título da tela dentro da janela (*** MOVIMENTAÇÃO ***): grande e centrado,
   para não confundir com o cadastro. */
.titulo-tela {
  margin: 0 0 .8rem; text-align: center; font-weight: 800;
  font-size: 1.1rem; letter-spacing: .04em; color: var(--navy-900);
}

/* Linha abaixo do nome no cartão (Receber / Pagar): o ícone e o nome sobem
   um pouco para ela caber sem esticar o cartão. */
.cartao__abaixo { display: block; margin-top: .1rem; font-size: .78rem; }
.cartao__abaixo .verde { color: var(--entra); }
.cartao__abaixo .vermelho { color: var(--sai); }
.cartao__nome .verde { color: var(--entra); }
.cartao__nome .vermelho { color: var(--sai); }
.cartao:has(.cartao__abaixo) .cartao__icone { margin-top: -.25rem; }

/* "Caixa" no cartão do dinheiro, em azul. */
.cartao__nome.azul { color: #1d4ed8; }

/* "Caixa" e "Receber / Pagar" juntos: são a mesma informação, não duas. */
.cartao:has(.cartao__abaixo) .cartao__nome { margin-bottom: -.15rem; }
.cartao__abaixo { margin-top: 0; line-height: 1.1; }

/* Ajuste fino do cartão do Caixa: o conjunto inteiro desce um pouco, o nome
   encosta no "Receber / Pagar" por cima (e não o contrário), e as duas
   linhas ficam um pouco maiores. */
.cartao:has(.cartao__abaixo) .cartao__icone { margin-top: .25rem; }
.cartao:has(.cartao__abaixo) .cartao__nome {
  margin-top: .3rem; margin-bottom: -.2rem; font-size: .95rem;
}
.cartao__abaixo { font-size: .84rem; }

/* "(Múltiplos Produtos)" miúdo e preto, embaixo do nome do cartão. */
.cartao__abaixo .preto { color: var(--text); font-size: .72rem; font-weight: 600; }

/* O botão da câmera é um símbolo: fica quadrado, do tamanho do toque. */
.fotos-acoes #p-foto-webcam { font-size: 1.2rem; flex: 0 0 auto; }

/* Os símbolos do cliente ficam à DIREITA da segunda linha (o nome já ocupa a
   primeira inteira). */
@media (max-width: 860px) {
  .pessoa__selos { justify-content: flex-end; padding-right: .2rem; }
}

/* Galeria: a marcação de excluir no canto, a do catálogo embaixo da foto, e
   a foto abre grande num toque. */
.galeria__item { position: relative; }
.galeria__marcar { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; z-index: 2; }
.galeria__item img { cursor: zoom-in; }
.galeria__catalogo {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .3rem 0; font-size: .74rem; font-weight: 700; color: var(--text-soft);
}
.galeria__catalogo input { width: 16px; height: 16px; }
.galeria__item--catalogo { border-color: var(--blue-500); }
.galeria__item--catalogo .galeria__catalogo { color: var(--blue-600); }

/* A foto grande ocupa a tela e fecha com um toque. */
.foto-grande {
  border: 0; padding: 0; background: rgba(0,0,0,.92);
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
}
.foto-grande::backdrop { background: rgba(0,0,0,.6); }
.foto-grande img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }

/* Botões de toque (preço e pagamento): escolha por dedo, não por lista. */
.botoes-toque { display: flex; flex-wrap: wrap; gap: .4rem; }
.toque {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: .5rem .8rem; font-size: .85rem; font-weight: 700;
  cursor: pointer; min-height: 40px;
}
#m-pagamento .toque { font-size: 1.15rem; min-width: 52px; text-align: center; }
.toque--ligado { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }

/* Os três preços numa linha só: são a mesma escolha, e quebrar em duas
   linhas fazia parecer que o de baixo era outra coisa. */
#m-precos { flex-wrap: nowrap; gap: .3rem; }
#m-precos .toque {
  flex: 1 1 0; min-width: 0; padding: .5rem .25rem; font-size: .72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Os símbolos de pagamento ficam centrados na linha, com folga igual entre
   eles — é uma fileira de botões, não uma lista encostada à esquerda. */
#m-pagamento { justify-content: center; gap: .5rem; }

/* Os dois botões da pergunta "entrada ou saída": grandes, de dedo. */
.botoes-toque--grandes { gap: .6rem; }
.botoes-toque--grandes .toque { flex: 1 1 0; min-height: 64px; font-size: 1rem; }

/* Quantidade, preço e o + do lado: uma linha só, mesmo no celular. */
.linha-item { display: flex; align-items: flex-end; gap: .4rem; }
.linha-item .campo { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.linha-item .botao { flex: 0 0 auto; height: 42px; }

/* Três campos e o + na mesma linha: rótulos miúdos para caber no celular. */
.linha-item .campo span { font-size: .72rem; }
.linha-item .campo input { padding-left: .4rem; padding-right: .4rem; }

/* Os símbolos de pagamento do documento também centrados. */
#dc-pagamento { justify-content: center; gap: .5rem; }
#dc-pagamento .toque { font-size: 1.15rem; min-width: 52px; text-align: center; }

/* Botão de uma linha só, largo como o dedo pede (CONCLUÍDO, AJUSTAR CUSTOS). */
.botao--largo { display: block; width: 100%; margin-top: .5rem; font-weight: 600; }

/* Os dois saldos acima de CAIXA / BANCO: azul no positivo, vermelho no negativo. */
.saldos-linha { display: flex; justify-content: space-between; gap: .5rem;
  margin: .6rem 0 .3rem; font-size: .85rem; }
.saldo--positivo { color: #1558b0; }
.saldo--negativo { color: #b3261e; }

/* O custo de cada peça depois do rateio, embaixo da linha do item. */
.dc-custo { color: #1558b0; font-weight: 600; }

/* Quem lançou e a que horas: canto direito da primeira linha, discreto. */
.doc__topo { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.doc__quem { color: #7a6a58; font-size: .72rem; white-space: nowrap; }

/* CAIXA e BANCO: do tamanho do dedo, iguais entre si e no meio da tela --
   é a escolha de onde o dinheiro entra ou sai. */
#dc-origem { justify-content: center; gap: .6rem; }
#dc-origem .toque { flex: 1 1 0; max-width: 46%; min-height: 48px;
  font-size: 1rem; font-weight: 600; border-radius: 12px; }

/* Os dois saldos, logo acima, com o mesmo respiro. */
.saldos-linha { font-size: .9rem; }

/* ============================================================
 * CABEÇALHO DA ENTRADA SEM A LOGO DA MATEUS (Mateus, 26/09/2026)
 * A logo da Mateus saiu do canto direito; o nome "MadaLice Store" fica no
 * MEIO DO CARTÃO (1fr | auto | 1fr, a 3ª coluna vazia equilibra a 1ª) e em
 * AMARELO-OURO. O crédito da Mateus foi para o RODAPÉ do cartão.
 * ============================================================ */
.entrada__marca { grid-template-columns: 1fr auto 1fr; }
.entrada__marca .entrada__logo--cliente { justify-self: start; }
/* Nome MAIOR (Mateus, 26/09/2026), escrito "MadaLice Store". */
.entrada__marca strong { grid-column: 2; text-align: center; color: var(--ouro); font-size: 1.9rem; }
@media (max-width: 860px) { .entrada__marca strong { font-size: 1.55rem; } }

/* RODAPÉ com o crédito (SEMPRE), nas CORES DO CLIENTE (Madalice: bronze e
   marrom-claro), não nas da Mateus: "Desenvolvimento: Mateus Informática®"
   e o site embaixo. */
.credito-dev { margin: 1.1rem 0 0; text-align: center; font-size: .74rem; line-height: 1.5; }
.credito-dev a { display: block; width: fit-content; margin: 0 auto; color: #9a7333; text-decoration: none; }
.credito-dev a:hover { text-decoration: underline; }
.credito-dev sup { font-size: .6em; line-height: 0; margin-left: 1px; }
.credito-dev a.credito-dev__site { font-size: .7rem; color: #9a7333; opacity: .85; }

/* PERMANECER CONECTADO (26/09/2026): caixinha grande, fácil de tocar no celular, nas cores da loja. */
.lembrar { display: flex; align-items: center; gap: .55rem; margin: .2rem 0 .9rem; font-size: .92rem; color: #2b1a10; cursor: pointer; user-select: none; }
.lembrar input { width: 1.25rem; height: 1.25rem; accent-color: #9a7333; margin: 0; flex: none; cursor: pointer; }


/* ============================================================
 * TELA DE INFORMAÇÃO -- padrão do app (Mateus, 26/09/2026)
 * Faixa de cima igual à do login (marrom em degradê, logo da loja na ponta,
 * título em amarelo-ouro no meio), o MatIA à esquerda do recado e o rodapé
 * com os botões no mesmo marrom. O MatIA fica SEMPRE à DIREITA. Ver telaInformacao() em painel.js.
 * ============================================================ */
.alerta-caixa--info { width: min(94vw, 440px); }
.alerta-caixa--padrao { border-radius: 14px; }
.alerta-caixa--padrao .alerta-cab,
.alerta-caixa--padrao .alerta-rod {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
}
.alerta-caixa--padrao .alerta-cab {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: .55rem .8rem; min-height: 0;
}
.info-logo {
  height: 42px; width: 42px; justify-self: start; object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(224,201,162,.55));
}
.info-titulo {
  grid-column: 2; color: var(--ouro); font-size: 1.3rem; font-weight: 800;
  letter-spacing: .5px; white-space: nowrap;
}
.alerta-caixa--padrao .alerta-x { position: static; transform: none; justify-self: end; grid-column: 3; }
.alerta-caixa--info .alerta-corpo {
  display: flex; flex-direction: row-reverse; align-items: flex-end; gap: .7rem;
  padding: 14px 0 0 18px; text-align: left; background: #fffdf9;
}
.info-matia { width: 104px; height: auto; flex: none; display: block; }
.info-texto {
  flex: 1; align-self: center; padding-bottom: 14px;
  font-size: 1rem; line-height: 1.45; color: var(--text);
  /* Recado CENTRALIZADO e em MAIÚSCULAS (Mateus, 26/09/2026). */
  text-align: center; text-transform: uppercase;
}
.info-texto b, .info-texto strong { color: var(--navy-900); }
.alerta-caixa--padrao .alerta-rod { gap: .8rem; padding: .7rem; }
.alerta-caixa--padrao .alerta-ok,
.alerta-caixa--padrao .alerta-voltar {
  min-width: 96px; font-size: 1rem; font-weight: 800; letter-spacing: .3px;
}
.alerta-caixa--padrao .alerta-ok { background: var(--ouro); color: var(--navy-900); border: 1px solid var(--ouro); }
.alerta-caixa--padrao .alerta-ok:hover { background: var(--ouro-escuro); }
.alerta-caixa--padrao .alerta-voltar { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }

/* ============================================================
 * CABEÇALHO DO APP = O DO LOGIN, em todas as telas (Mateus, 26/09/2026)
 * Marrom em degradê, a logo da loja na ponta esquerda (é o botão de Início)
 * e "MadaLice Store" no MEIO, em amarelo-ouro. A logo da Mateus saiu.
 * ============================================================ */
.topo {
  grid-template-columns: 1fr auto 1fr;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
}
.topo__inicio { justify-self: start; }
.topo__titulo { grid-column: 2; text-align: center; }
.topo__titulo strong { color: var(--ouro); font-size: 1.9rem; white-space: nowrap; }
.topo__direita { grid-column: 3; justify-self: end; }
@media (max-width: 860px) {
  .topo { grid-template-columns: 1fr auto 1fr; }
  .topo__titulo { text-align: center; }
  .topo__titulo strong { font-size: 1.55rem; }
  .topo__logo-loja { height: 50px; width: 50px; }
}

/* ============================================================
 * SITUAÇÃO DO PEDIDO, em cor (Mateus, 26/09/2026):
 * Em aberto = VERMELHO · Confirmado = AZUL · Entregue = VERDE · Cancelado = CINZA
 * ============================================================ */
.tabela--pedidos .selo--aberto     { background: #fde2e1; color: #c0392b; }
.tabela--pedidos .selo--confirmado { background: #dbeafe; color: #1d4ed8; }
.tabela--pedidos .selo--entregue   { background: #dcfce7; color: #15803d; }
.tabela--pedidos .selo--cancelado  { background: #ececec; color: #6b6b6b; }
.info-sit--aberto     { color: #c0392b !important; }
.info-sit--confirmado { color: #1d4ed8 !important; }
.info-sit--entregue   { color: #15803d !important; }
.info-sit--cancelado  { color: #6b6b6b !important; }

/* Linha do pedido: número à esquerda e a situação no canto superior DIREITO;
   embaixo o cliente, e na última linha a data e o total (Mateus, 26/09/2026). */
.tabela--pedidos .pd-linha { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tabela--pedidos .pd-linha .selo { flex: none; }
.tabela--pedidos .pd-cliente { font-weight: 700; color: var(--text); }   /* cliente em NEGRITO, na 2ª linha */
/* Duas colunas só (marcar | pedido): larguras fixas, senão o table-layout
   fixed dava a tela inteira para a caixinha. */
.tabela--pedidos table { table-layout: fixed; width: 100%; }
.tabela--pedidos th.col-marcar, .tabela--pedidos td.col-marcar { width: 34px; }
.tabela--pedidos th.col-nome, .tabela--pedidos td.col-nome { width: auto; }
.tabela--pedidos th.col-nome { text-align: left; }
.tabela--pedidos td.col-nome { padding-right: .7rem !important; }

/* O 👁 do pedido: embaixo da situação, na mesma linha do cliente. */
.tabela--pedidos .pd-olho { position: static; width: 2rem; height: 1.7rem; opacity: .8; flex: none; }
/* A janela de VER o pedido (só leitura). */
.ver-pedido { text-align: left; font-size: .92rem; }
.ver-pedido .pd-linha { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ver-pedido .pd-cliente { font-weight: 700; margin-top: .3rem; }
.ver-pedido__itens { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .85rem; }
.ver-pedido__itens th { text-align: left; font-size: .72rem; color: var(--text-mute); border-bottom: 1px solid var(--border); padding: .25rem 0; }
.ver-pedido__itens td { padding: .35rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.ver-pedido__itens .num { text-align: right; padding-left: .5rem; white-space: nowrap; }
.ver-pedido__total { font-size: 1.05rem; margin-top: .2rem; }
.ver-pedido__obs { margin: .5rem 0 0; color: var(--text-soft); font-style: italic; }
.ver-pedido .selo--aberto     { background: #fde2e1; color: #c0392b; }
.ver-pedido .selo--confirmado { background: #dbeafe; color: #1d4ed8; }
.ver-pedido .selo--entregue   { background: #dcfce7; color: #15803d; }
.ver-pedido .selo--cancelado  { background: #ececec; color: #6b6b6b; }
.tabela--pedidos .pd-olho { font-size: 1.35rem; opacity: 1; width: 2.4rem; height: 2rem; }

/* Cores do financeiro (Mateus, 26/09/2026), sempre, mesmo com R$ 0,00:
   Vencidas = VERMELHO · A Vencer / A Pagar = AZUL · Recebidas / Pagas = VERDE */
.fin-cartao--atraso b  { color: #c0392b; }
.fin-cartao--avencer b { color: #1d4ed8; }
.fin-cartao--pago b    { color: #15803d; }
/* Situações SEMPRE em MAIÚSCULAS: CONFIRMADO, EM ABERTO, ENTREGUE... (Mateus, 26/09/2026) */
.selo { text-transform: uppercase; letter-spacing: .3px; }
/* O 👀 tem de ser FÁCIL DE TOCAR (Mateus, 26/09/2026): área de 48x44 px,
   o mínimo confortável para o dedo, com fundo leve para parecer botão. */
.tabela--pedidos .pd-olho {
  width: 48px; height: 44px; font-size: 1.45rem;
  background: var(--bg-mute); border: 1px solid var(--border); border-radius: 12px;
  margin: .15rem 0;
}
.tabela--pedidos .pd-olho:active { transform: scale(.94); }
.ver-pedido .pd-linha .pd-cliente { margin-top: 0; }
/* Linha do pedido em duas colunas: a da direita com a situação, o 👀 e o
   total CENTRALIZADOS entre si (Mateus, 26/09/2026). */
.tabela--pedidos .pd-grade { display: flex; justify-content: space-between; align-items: stretch; gap: .6rem; }
.tabela--pedidos .pd-esq { display: flex; flex-direction: column; justify-content: space-between; gap: .25rem; min-width: 0; }
.tabela--pedidos .pd-esq .pd-cliente { white-space: normal; }
.tabela--pedidos .pd-dir { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .25rem; flex: none; }
.tabela--pedidos .pd-dir .pd-olho { margin: 0; }
.tabela--pedidos .pd-dir { width: 112px; }   /* largura fixa: tudo alinhado de uma linha para a outra */
.info-aviso { display: inline-block; margin: .4rem 0; color: #c0392b; font-weight: 700; font-size: .9rem; }   /* aviso de pedido fora de aberto */

/* "GestorAppMI" bem pequeno, em OURO, no canto ESQUERDO de cada rodapé
   (Mateus, 26/09/2026): o das janelas padrão e o rodapé geral do app. */
.alerta-caixa--padrao .alerta-rod, .rodape { position: relative; }
.alerta-caixa--padrao .alerta-rod::before, .rodape::before {
  content: "GestorAppMI";
  position: absolute; left: .7rem; bottom: .3rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .3px;
  color: var(--ouro-escuro); pointer-events: none;
}
/* No rodapé geral o texto é centralizado e, no celular, começa quase na
   borda: a marca ganha uma faixa própria EMBAIXO, sem encostar em nada. */
.rodape { padding-bottom: 1rem !important; }
.rodape::before { bottom: .2rem; }
/* Linha própria também no rodapé das janelas (Mateus, 26/09/2026): a marca
   fica embaixo dos botões, nunca ao lado deles. */
.alerta-caixa--padrao .alerta-rod { padding-bottom: 1.15rem; }
.alerta-caixa--padrao .alerta-rod::before { bottom: .25rem; }
/* A linha própria do rodapé (Mateus, 26/09/2026): "GestorAppMI - Mateus
   Informática®", CENTRALIZADA, pequena e em ouro. */
.alerta-caixa--padrao .alerta-rod::before, .rodape::before {
  content: "GestorAppMI - Mateus Inform\00E1tica\00AE";
  left: 0; right: 0; text-align: center;
}
/* A marca do rodapé: SEM negrito e com mais espaço até o botão (Mateus, 26/09/2026). */
.alerta-caixa--padrao .alerta-rod::before, .rodape::before { font-weight: 400; }
.alerta-caixa--padrao .alerta-rod { padding-bottom: 1.7rem; }
.alerta-caixa--padrao .alerta-rod::before { bottom: .45rem; }
.rodape { padding-bottom: 1.4rem !important; }
.rodape::before { bottom: .35rem; }

/* "GestorAppMI - Mateus Informática®" em TODOS os rodapés (Mateus,
   26/09/2026): também nos avisos comuns e nas janelas de cadastro. Linha
   própria, centralizada, pequena, sem negrito, em ouro. */
.alerta-rod, .dialogo__rodape { position: relative; }
.alerta-rod { padding-bottom: 1.7rem; }
.dialogo__rodape { padding-bottom: 1.4rem; }
.alerta-rod::before, .dialogo__rodape::before {
  content: "GestorAppMI - Mateus Inform\00E1tica\00AE";
  position: absolute; left: 0; right: 0; bottom: .4rem; text-align: center;
  font-size: .6rem; font-weight: 400; letter-spacing: .3px;
  color: var(--ouro-escuro); pointer-events: none;
}

/* ============================================================
 * TODA TELA TEM RODAPÉ (Mateus, 26/09/2026)
 * O rodapé geral (EMPRESA, USUÁRIO e "GestorAppMI - Mateus Informática®")
 * fica FIXO no pé da tela, como o cabeçalho fica em cima: numa lista
 * comprida ele não some lá no fim. As janelas sem rodapé ganham a linha.
 * ============================================================ */
.rodape { position: sticky; bottom: 0; z-index: 40; }
.janela-marca {
  position: relative; min-height: 1.5rem;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
}
.janela-marca::before {
  content: "GestorAppMI - Mateus Inform\00E1tica\00AE";
  position: absolute; left: 0; right: 0; bottom: .4rem; text-align: center;
  font-size: .6rem; font-weight: 400; letter-spacing: .3px; color: var(--ouro-escuro);
}

/* ============================================================
 * ✕ PADRÃO e TÍTULO CENTRALIZADO em todo cabeçalho (Mateus, 26/09/2026)
 * O ✕ é só o sinal, sem quadro nem círculo em volta (o quadrado era o foco
 * que o navegador desenha ao abrir a janela). O título fica no MEIO: uma
 * coluna vazia à esquerda do mesmo tamanho da do ✕ equilibra os dois lados.
 * ============================================================ */
.janela__botao:focus, .janela__botao:focus-visible { outline: none; }
.janela__barra {
  display: grid; grid-template-columns: 54px 1fr 54px; gap: 0; padding-left: 0;
}
.janela__barra::before { content: ""; }
.janela__titulo { grid-column: 2; text-align: center; justify-self: center; max-width: 100%; }
.janela__botoes { grid-column: 3; justify-content: flex-end; }
.alerta-caixa--padrao .alerta-x,
.alerta-x {
  border: 0 !important; background: transparent; border-radius: 0;
  font-size: 1.6rem; font-weight: 400; width: 44px; height: 44px;
}
.alerta-x:focus, .alerta-x:focus-visible { outline: none; }
.alerta-x:hover { background: rgba(255,255,255,.14); }
/* Rodapé que só tem a linha do GestorAppMI: mesma altura dos outros
   rodapés (fininho ficava feio), com a linha no MEIO da faixa. */
.janela-marca { min-height: 3.1rem; }
.janela-marca::before { top: 50%; bottom: auto; transform: translateY(-50%); }

/* Filtro PEDIDOS / ORÇAMENTOS logo abaixo do título da faixa (26/09/2026).
   Ligado = ouro cheio; desligado = só o contorno. Fácil de tocar (36px). */
.pd-filtro { display: flex; justify-content: center; gap: .5rem; margin: .45rem 0 .1rem; }
.pd-filtro__botao {
  min-height: 36px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75);
}
.pd-filtro__botao--ligado { background: var(--ouro); color: var(--navy-900); border-color: var(--ouro); }
.pd-filtro__botao:focus { outline: none; }
.pd-filtro__botao { width: 132px; padding: 0; text-align: center; }   /* os dois do MESMO tamanho, centralizados (Mateus, 26/09/2026) */

/* ============================================================
 * NOVO PEDIDO / ORÇAMENTO (Mateus, 26/09/2026) -- tela de celular
 * ============================================================ */
.np { display: flex; flex-direction: column; gap: .8rem; }
.np__faixa {
  background: var(--blue-600); color: #fff; border-radius: 14px;
  padding: .7rem .8rem .8rem; text-align: center;
}
.np__titulo { display: block; font-size: 1.1rem; font-weight: 700; }
.np__bloco {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: .8rem .9rem;
}
.np__bloco .campo { margin-bottom: .5rem; }
.np__bloco .campo:last-child { margin-bottom: 0; }
.np__ficha {
  margin-top: .6rem; padding: .7rem .8rem; border-radius: 12px;
  background: var(--bg-mute); font-size: .86rem; display: grid; gap: .3rem;
}
.np__ficha > div, .np__ficha-aberto > div { display: flex; justify-content: space-between; gap: .6rem; }
.np__ficha span { color: var(--text-mute); }
.np__ficha b { text-align: right; }
.np__ficha-nome { font-weight: 800; font-size: .95rem; }
.np__ficha-aberto { display: grid; gap: .3rem; border-top: 1px dashed var(--border); padding-top: .35rem; }
.np__ficha-aberto:empty { display: none; }
.np__ficha-obs { font-style: italic; color: var(--text-soft); display: block !important; }
.np--vermelho { color: #c0392b !important; }
.np__item { margin-top: .6rem; padding: .7rem .8rem; border-radius: 12px; background: var(--bg-mute); }
.np__item-nome { font-weight: 800; margin-bottom: .5rem; }
.np__qtd { display: grid; grid-template-columns: 48px 1fr 48px; gap: .4rem; }
.np__qtd button {
  height: 44px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); font-size: 1.3rem; font-weight: 800; cursor: pointer;
}
.np__qtd input { text-align: center; font-weight: 800; font-size: 1.05rem; }
.np__preco[readonly] { background: #f3ece2; cursor: pointer; font-weight: 800; }
.np__preco--livre { background: #fff; border-color: #c0392b; }
.np__itens-titulo { display: flex; justify-content: space-between; margin-bottom: .3rem; }
.np__linha {
  display: flex; justify-content: space-between; gap: .6rem; align-items: center;
  padding: .55rem 0; border-top: 1px solid var(--border);
}
.np__linha-esq { display: flex; flex-direction: column; min-width: 0; }
.np__linha-esq small { color: var(--text-soft); }
.np__linha-dir { display: flex; align-items: center; gap: .4rem; flex: none; }
.np__tirar {
  width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-mute); cursor: pointer; font-size: 1.05rem;
}
.np__vazio { margin: 0; text-align: center; }
.np__total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.15rem; margin: .3rem 0 .6rem;
}
.np__total strong { font-size: 1.35rem; }
.np__acoes { display: flex; justify-content: flex-end; gap: .8rem; padding-bottom: .5rem; }
.np__acoes .botao { min-width: 64px; min-height: 52px; font-size: 1.4rem; }
.np__ficha > .np__ficha-nome { display: block; }
.np__ficha-nome small { color: var(--text-mute); font-weight: 600; }
.np__ficha > .np__ficha-aberto { display: grid; }

/* FORMAS DE PAGAMENTO (26/09/2026): dois grupos, À Vista e A Prazo. */
.fp { display: flex; flex-direction: column; gap: .8rem; }
.fp__faixa { border-radius: 14px; position: relative; padding-bottom: 1.1rem; }
.fp-grupo { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .7rem .9rem; }
.fp-grupo__titulo { font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--blue-600); margin-bottom: .3rem; }
.fp-linha {
  display: flex; align-items: center; gap: .6rem; min-height: 52px;
  border-top: 1px solid var(--border); cursor: pointer;
}
.fp-linha__nome { flex: 1; font-weight: 700; }
.fp-linha--inativa .fp-linha__nome { color: var(--text-mute); text-decoration: line-through; }
.fp-vazio { margin: .3rem 0 .1rem; color: var(--text-mute); font-size: .9rem; }

/* Filtro por SITUAÇÃO no cabeçalho da lista de pedidos (26/09/2026):
   ligado = na cor da situação; desligado = apagado e riscado. Toque fácil. */
.pd-sits { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-start; }
.pd-sit {
  border: 1.5px solid currentColor; cursor: pointer; min-height: 32px;
  padding: 0 .6rem; font-size: .66rem; opacity: .35; text-decoration: line-through;
}
.pd-sit--ligado { opacity: 1; text-decoration: none; }
.pd-sit:focus { outline: none; }
.tabela--pedidos thead th.col-nome { text-transform: none; padding-top: .45rem; padding-bottom: .45rem; }
.tabela--pedidos thead .selo--aberto     { background: #fde2e1; color: #c0392b; }
.tabela--pedidos thead .selo--confirmado { background: #dbeafe; color: #1d4ed8; }
.tabela--pedidos thead .selo--entregue   { background: #dcfce7; color: #15803d; }
.tabela--pedidos thead .selo--cancelado  { background: #ececec; color: #6b6b6b; }
/* 2 x 2, todos do MESMO tamanho (regra dos botões de filtro). */
.pd-sits { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.pd-sit { width: 100%; justify-content: center; text-align: center; }
/* Os botões de situação CENTRALIZADOS na largura toda do cabeçalho
   (Mateus, 26/09/2026): passam por cima da coluna vazia das caixinhas,
   com a mesma margem dos dois lados. */
.tabela--pedidos thead th.col-nome { padding-left: .6rem !important; padding-right: .6rem !important; }
.tabela--pedidos thead .pd-sits { margin-left: -34px; }
.tabela--pedidos thead th.col-marcar { padding: 0; }
.tabela--pedidos thead th.col-nome { overflow: visible !important; position: relative; z-index: 1; }

/* LISTA DE ESCOLHA embaixo do campo (cliente, produto) -- 26/09/2026.
   Linhas altas, fáceis de tocar; rola por dentro. */
.escolha {
  margin-top: .35rem; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: 0 8px 20px rgba(43,18,6,.12);
}
.escolha__linha {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; min-height: 52px; padding: .5rem .8rem; text-align: left;
  border: 0; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer;
}
.escolha__linha:last-child { border-bottom: 0; }
.escolha__linha:active { background: var(--bg-mute); }
.escolha__texto { font-weight: 700; color: var(--text); }
.escolha__detalhe { font-size: .8rem; color: var(--text-soft); }
.escolha__nada { padding: .8rem; color: var(--text-mute); text-align: center; }

/* R$ Venda | R$ Catálogo: dois botões do MESMO tamanho, lado a lado
   (Mateus, 26/09/2026). Ligado = ouro; sem preço = apagado. */
.np__tabelas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.np__tabela {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 60px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--blue-500); background: var(--surface); color: var(--text);
}
.np__tabela span { font-size: .8rem; font-weight: 700; }
.np__tabela b { font-size: 1.05rem; }
.np__tabela--ligada { background: var(--ouro); border-color: var(--ouro); color: var(--navy-900); }
.np__tabela:disabled { opacity: .45; cursor: default; }
.np__tabela:focus { outline: none; }

/* TODO VALOR EM DINHEIRO À DIREITA (Mateus, 26/09/2026), no sistema inteiro. */
input.campo-dinheiro, .campo-dinheiro, .num { text-align: right; }
.np__preco { text-align: right; }

/* Forma de Pagamento no pedido: o nome do grupo e os botões 2 a 2. */
.np__fp-grupo { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--blue-600); margin: .5rem 0 .35rem; }
.np__fp { min-height: 52px; }
/* Botões 2 a 2: o que sobra sozinho na última linha fica no CENTRO, do
   mesmo tamanho dos outros (regra do Mateus: sempre centralizado). */
.np__tabelas { display: flex; flex-wrap: wrap; justify-content: center; }
.np__tabelas > .np__tabela { flex: 0 0 calc(50% - .25rem); }

/* Pagamento das SAÍDAS (botões fixos 💵 ⚡ 💳 🏧 📋) ESCONDIDO por ora
   (Mateus, 26/09/2026): as formas vão sair do cadastro de Configurações,
   com a regra de cada lugar. Por baixo continua valendo o padrão (Dinheiro),
   para a gravação não quebrar. Apagar estas duas linhas para religar. */
.campo:has(> #m-pagamento), .grupo:has(> #dc-pagamento) { display: none !important; }
/* PAGAMENTOS: À VISTA e A PRAZO lado a lado, do mesmo tamanho (Mateus,
   26/09/2026); a faixa do título ocupa as duas colunas. */
.fp { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
.fp > .fp__faixa { grid-column: 1 / -1; }
.fp-grupo__titulo { text-align: center; }
.fp-vazio { text-align: center; }
/* "+ Cadastrar" dentro de cada grupo de Pagamentos: largo e fácil de tocar. */
.fp-cadastrar {
  display: block; width: 100%; min-height: 44px; margin-top: .6rem; border-radius: 10px; cursor: pointer;
  border: 1.5px dashed var(--blue-500); background: var(--bg-mute); color: var(--blue-600);
  font-weight: 800; font-size: .9rem;
}
.fp-cadastrar:focus { outline: none; }
.fp-linha__nome small { display: block; font-weight: 400; font-size: .78rem; color: var(--text-soft); }

/* PAGAMENTOS: a lista que se forma na hora (26/09/2026). */
.fp-linha { display: block; padding: .5rem 0; min-height: 0; cursor: default; }
.fp-linha__topo { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.fp-destino { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-top: .35rem; }
.fp-destino__botao {
  min-height: 36px; border-radius: 999px; cursor: pointer; font-size: .78rem; font-weight: 800;
  border: 1.5px solid var(--blue-500); background: var(--surface); color: var(--blue-600);
}
.fp-destino__botao--ligado { background: var(--ouro); border-color: var(--ouro); color: var(--navy-900); }
.fp-destino__botao:focus { outline: none; }
.fp-conta { margin-top: .35rem; width: 100%; }
.fp-aviso { margin: .35rem 0 0; font-size: .75rem; color: #c0392b; text-align: center; }
.fp-novo { display: flex; gap: .35rem; margin-top: .6rem; }
.fp-novo input { flex: 1; min-width: 0; }
.fp-novo__mais {
  flex: none; width: 44px; min-height: 44px; border-radius: 10px; cursor: pointer;
  border: 0; background: var(--ouro); color: var(--navy-900); font-size: 1.4rem; font-weight: 800;
}
/* A PRAZO: em quantas vezes, entrada Sim|Não e as formas da entrada. */
.fp-prazo { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; }
.fp-prazo__rotulo { font-size: .72rem; font-weight: 700; color: var(--text-soft); }
.fp-prazo__vezes { grid-template-columns: 40px 1fr 40px; align-items: center; text-align: center; }
.fp-prazo__vezes button { height: 36px; font-size: 1.1rem; }
.fp-prazo__formas { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.fp-prazo__formas > .fp-destino__botao { flex: 0 0 calc(50% - .2rem); }
/* O WhatsApp do suporte na mensagem de falha: símbolo + número em negrito. */
.suporte-zap { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; color: #15803d; text-decoration: none; }
.suporte-zap .zap { width: 22px; height: 22px; fill: #25d366; }
.suporte-zap b { color: var(--navy-900); font-size: 1.05rem; }

/* Opção é SEMPRE "SIM" ou "NÃO", em MAIÚSCULAS (Mateus, 26/09/2026) -- e
   todo botão de escolha segue o mesmo: VER, ALTERAR, CAIXA, BANCO... */
.alerta-caixa--padrao .alerta-ok, .alerta-caixa--padrao .alerta-voltar,
.fp-destino__botao, .np__tabela, .pd-filtro__botao { text-transform: uppercase; }

/* BANCO / CONTAS e MOVIMENTO CAIXA / BANCO (26/09/2026). */
.bc { display: flex; flex-direction: column; gap: .8rem; }
.bc__faixa { border-radius: 14px; position: relative; padding-bottom: 1.1rem; }
.bc-conta {
  display: flex; justify-content: space-between; gap: .6rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .7rem .9rem;
}
.bc-conta__esq { display: flex; flex-direction: column; min-width: 0; }
.bc-conta__esq small { color: var(--text-soft); }
.bc-conta__dir { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.bc-conta__rot { font-size: .7rem; color: var(--text-mute); }
.bc-conta__dir b { font-size: 1.1rem; }
.bc--verde { color: #15803d; }
.bc-vazio { text-align: center; color: var(--text-mute); padding: 1rem; background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; }
.bc-nova__titulo { font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--blue-600); text-align: center; margin-bottom: .5rem; }
.bc-duas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bc-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.bc-aviso { font-size: .75rem; color: var(--text-mute); text-align: center; margin: .2rem 0 .5rem; }
.bc-atualizar { display: block; margin: .6rem auto 0; background: none; border: 0; color: var(--blue-600); font-size: .78rem; text-decoration: underline; cursor: pointer; }

/* ============================================================
 * AVISOS: sempre em MAIÚSCULAS e nas CORES DA LOJA (Mateus, 26/09/2026)
 * -- bronze sobre o bege, com a borda tracejada da casa. Vale para todo
 * aviso de "nenhum ainda", de regra ("o saldo inicial não muda") e para a
 * faixa EM DESENVOLVIMENTO. Erro de verdade continua no .erro.
 * ============================================================ */
.fp-aviso, .bc-aviso, .fp-vazio, .bc-vazio, .np__vazio, .escolha__nada, .faixa-obra, .lista__nada {
  text-transform: uppercase; letter-spacing: .3px; font-weight: 700;
  color: var(--blue-600) !important; background: var(--bg-mute);
  border: 1px dashed var(--blue-400); border-radius: 10px;
  padding: .55rem .7rem; text-align: center; font-size: .74rem; line-height: 1.4;
}
.bc-aviso { margin: .3rem 0 .6rem; }
.fp-aviso { margin: .4rem 0 0; }
.bc-conta__rot b { color: var(--text); font-size: .8rem; }
.info-pedido { text-align: center; font-weight: 700; color: var(--blue-600); margin: 0 0 .8rem; }

/* CONTAS A RECEBER / A PAGAR (26/09/2026). */
.ct { display: flex; flex-direction: column; gap: .7rem; }
.ct-sits { margin: 0; }
.ct-sits .pd-sit { min-height: 36px; font-size: .7rem; }
.ct-sit--vencido { background: #fde2e1; color: #c0392b; }
.ct-sit--aberto  { background: #dbeafe; color: #1d4ed8; }
.ct-sit--parcial { background: #fef3c7; color: #b45309; }
.ct-sit--quitado { background: #dcfce7; color: #15803d; }
.ct-busca { margin: 0; }
.ct-linha {
  display: flex; justify-content: space-between; gap: .6rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .65rem .85rem;
}
.ct-linha:active { background: var(--bg-mute); }
.ct-linha__esq { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.ct-linha__esq small { color: var(--text-soft); }
.ct-linha__dir { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.ct-linha__dir b { font-size: 1.05rem; }
.ct-linha__dir small { color: var(--text-mute); font-size: .72rem; }
.ct-resumo { display: grid; gap: .25rem; background: var(--bg-mute); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .6rem; }
.ct-resumo > div { display: flex; justify-content: space-between; }
/* "DIGITAR PARA PROCURAR" no alto da lista: o teclado só abre se pedir. */
.escolha__digitar {
  display: block; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid var(--border);
  background: var(--bg-mute); color: var(--blue-600); font-weight: 800; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .3px; cursor: pointer; position: sticky; top: 0; z-index: 1;
}
.escolha { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* CLIENTE: CPF ou CNPJ no topo + NÃO TENHO (26/09/2026). */
.cl-doc { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; margin-bottom: .5rem; }
.cl-doc .campo { margin-bottom: 0; }
.cl-doc__nao {
  min-height: 44px; padding: 0 .9rem; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--blue-500); background: var(--surface); color: var(--blue-600);
  font-weight: 800; font-size: .8rem; text-transform: uppercase;
}
/* Com o campo único, os de CPF e CNPJ de baixo só guardam o valor. */
#dlg-corpo:has(#cl-doc) #cl-campo-cpf, #dlg-corpo:has(#cl-doc) #cl-campo-cnpj { display: none !important; }

/* LOGIN: os rótulos (Empresa, Usuário, Senha...) SEMPRE em negrito (Mateus, 26/09/2026). */
#entrada .campo > span { font-weight: 700; color: var(--text); }


/* ============================================================
 * PALETAS POR EMPRESA (26/09/2026): a empresa escolhe no cadastro; o
 * sistema põe data-paleta no <html>. Sem escolha, fica a marrom/ouro.
 * AZUL = as cores da MATEUS INFORMÁTICA (marinho + azul, destaque celeste).
 * ============================================================ */
html[data-paleta="azul"] {
  --navy-950:#04102a; --navy-900:#071b3d; --navy-850:#0a2350; --navy-800:#0d2b5e;
  --blue-600:#1461cf; --blue-500:#1668e3; --blue-400:#2f83f5; --blue-300:#63a6ff;
  --blue-100:#dbeafe; --blue-50:#eff6ff;
  --bg:#f4f7fc; --surface:#ffffff; --bg-mute:#e9f0fa;
  --border:#e3e9f3; --text:#16233d; --text-soft:#4d5d7a; --text-mute:#71809b;
  --ouro:#63a6ff; --ouro-escuro:#2f83f5;
}
html[data-paleta="verde"] {
  --navy-950:#03140d; --navy-900:#062a1b; --navy-850:#093624; --navy-800:#0d4a31;
  --blue-600:#15803d; --blue-500:#16a34a; --blue-400:#22c55e; --blue-300:#86efac;
  --blue-100:#dcfce7; --blue-50:#f0fdf4;
  --bg:#f5faf6; --bg-mute:#e7f3ea; --border:#dcebe0; --text:#10261a; --text-soft:#4a6354; --text-mute:#6f8577;
  --ouro:#f5c542; --ouro-escuro:#d4a72c;
}
html[data-paleta="vinho"] {
  --navy-950:#1a0509; --navy-900:#330a12; --navy-850:#45101b; --navy-800:#5c1726;
  --blue-600:#9f1239; --blue-500:#be123c; --blue-400:#e11d48; --blue-300:#fda4af;
  --blue-100:#ffe4e6; --blue-50:#fff1f2;
  --bg:#fcf6f7; --bg-mute:#f6e8ea; --border:#efdde0; --text:#2a1216; --text-soft:#6b4a50; --text-mute:#8e7277;
  --ouro:#f5c542; --ouro-escuro:#d4a72c;
}
html[data-paleta="grafite"] {
  --navy-950:#0b0c0e; --navy-900:#18191c; --navy-850:#222327; --navy-800:#2e3035;
  --blue-600:#4b5563; --blue-500:#6b7280; --blue-400:#9ca3af; --blue-300:#d1d5db;
  --blue-100:#e5e7eb; --blue-50:#f3f4f6;
  --bg:#f6f7f8; --bg-mute:#eceef0; --border:#e2e4e8; --text:#16181c; --text-soft:#4b5058; --text-mute:#737983;
  --ouro:#f5c542; --ouro-escuro:#d4a72c;
}
/* A frase embaixo do nome ("Tecnologia e Sistemas"). */
.marca-frase { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .4px; color: rgba(255,255,255,.8); margin-top: .1rem; text-align: center; white-space: nowrap; }

/* RODAPÉ: EMPRESA/USUÁRIO e, embaixo, o crédito em 3 linhas (Desenvolvimento,
   site, GestorAppMI), nas cores da PALETA da empresa (26/09/2026). */
.rodape { flex-wrap: wrap; padding-bottom: .45rem !important; }
.rodape::before { content: none !important; }
.rodape__credito { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; line-height: 1.3; margin-top: .15rem; }
.rodape__credito a { color: var(--blue-300); font-size: .62rem; text-decoration: none; }
.rodape__credito sup { font-size: .6em; }
.rodape__credito b { color: var(--ouro); font-size: .72rem; letter-spacing: .3px; }

/* "Empresa 1/2" com as setas, à direita do cabeçalho. */
.emp-contador { display: flex; align-items: center; gap: .15rem; color: #fff; }
.emp-contador__seta {
  width: 34px; height: 40px; border: 0; background: transparent; color: var(--ouro);
  font-size: 1.6rem; font-weight: 800; cursor: pointer; line-height: 1;
}
.emp-contador__seta:focus { outline: none; }
.emp-contador__num { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.emp-contador__num b { font-size: 1rem; color: var(--ouro); }
.emp-contador__num small { font-size: .58rem; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,.85); }
.topo__direita:has(.emp-contador) { display: flex; justify-content: flex-end; }

/* MARCA no login: o complemento EMBAIXO do nome (e não ao lado); a logo se
   ajusta ao formato (larga ou quadrada) sem ficar espremida (26/09/2026). */
.entrada__marca { grid-template-rows: auto auto; row-gap: 0; }
.entrada__marca .entrada__logo--cliente { grid-row: 1 / span 2; }
.entrada__marca strong { grid-row: 1; align-self: end; }
.entrada__marca .marca-frase { grid-column: 2; grid-row: 2; align-self: start; }
.entrada__logo--cliente, .topo__logo-loja {
  width: auto !important; max-width: 34vw; height: 56px !important; object-fit: contain; border-radius: 10px;
}
@media (max-width: 860px) {
  .entrada__logo--cliente, .topo__logo-loja { height: 44px !important; max-width: 30vw; }
}
.topo__titulo .marca-frase { font-size: .66rem; }
/* O crédito do cartão de entrada também segue a paleta. */
.credito-dev a, .credito-dev a.credito-dev__site { color: var(--blue-600) !important; }
.info-logo { width: auto !important; max-width: 90px; height: 42px; object-fit: contain; }
.bc-informar { margin-top: .35rem; min-height: 36px; font-size: .75rem; }

/* CABEÇALHO (26/09/2026, pedido do Mateus): o complemento ("Tecnologia e
   Sistemas") quase do tamanho do nome; o "2/2" na MESMA LINHA do nome e o
   "EMPRESAS" na mesma linha do complemento -- as alturas das linhas são as
   mesmas nos dois blocos, por isso eles se alinham. */
.topo { --tit: 2.1rem; --frase: 1.6rem; }
@media (max-width: 860px) { .topo { --tit: 1.3rem; --frase: 1rem; } }
.topo__titulo strong { font-size: var(--tit) !important; line-height: 1.15; }
.topo__titulo .marca-frase { font-size: var(--frase) !important; line-height: 1.15; margin-top: .1rem; text-align: left; letter-spacing: 0; }
.topo__direita:has(.emp-contador) { align-self: center; align-items: center; }
.emp-contador__num { display: block; text-align: center; }
.emp-contador__num b { display: block; font-size: calc(var(--tit) * .8); line-height: calc(var(--tit) * 1.15); }
.emp-contador__num small { display: block; font-size: .62rem; line-height: calc(var(--frase) * 1.15); margin-top: .1rem; }
@media (max-width: 860px) {
  .topo { --tit: 1.15rem; --frase: .9rem; gap: .4rem !important; padding: .5rem .5rem !important; }
  .topo__logo-loja { height: 38px !important; max-width: 22vw; }
  .topo__titulo { min-width: 0; }
  .emp-contador { gap: 0; }
  .emp-contador__seta { width: 22px; font-size: 1.4rem; }
}

/* SEM MARROM fora da MadaLice (26/09/2026): com qualquer paleta escolhida, os
   textos, fundos e sombras que ainda eram fixos no marrom/ouro seguem a
   paleta. (Antes o modo escuro do CELULAR trazia o fundo e o texto marrons de
   volta: aquele bloco ganhava da paleta.) */
html[data-paleta]:not([data-paleta=""]) { --text: #16233d; --text-soft: #4d5d7a; --text-mute: #71809b; }
html[data-paleta]:not([data-paleta=""]) .tipo-conta__botao--pedido { color: var(--navy-900); }
html[data-paleta]:not([data-paleta=""]) .tipo-conta__botao--orcamento { color: var(--blue-500); }
html[data-paleta]:not([data-paleta=""]) .credito-dev a,
html[data-paleta]:not([data-paleta=""]) .credito-dev a.credito-dev__site { color: var(--blue-600) !important; }
html[data-paleta]:not([data-paleta=""]) .lembrar { color: var(--text); }
html[data-paleta]:not([data-paleta=""]) .lembrar input { accent-color: var(--blue-600); }

/* TUDO EM MAIÚSCULAS (pedido do Mateus, 26/09/2026 -- mais adiante vira
   opção do cliente). Fora: e-mail, senha, o nome/complemento da marca no
   cabeçalho e no login, o crédito do rodapé e endereços de site. */
body, input, textarea, select, button { text-transform: uppercase; }
input[type="email"], input[type="password"], input[type="url"], [id$="-email"], [id$="email"],
.col-email, .email, td.col-email, .topo__titulo, .topo__titulo *, .entrada__marca, .entrada__marca *,
.rodape__credito, .rodape__credito *, .credito-dev, .credito-dev *, a[href^="http"], a[href^="mailto"] {
  text-transform: none;
}
/* Razão social pequena embaixo do nome fantasia (rodapé e login). */
.campo__razao { display: block; font-size: .62rem; font-weight: 500; opacity: .8; line-height: 1.2; margin-top: .25rem; }
.campo__razao { color: var(--text-soft); }
/* Nome + complemento CENTRALIZADOS entre a logo e o contador de empresas;
   a logo um pouco maior (26/09/2026). */
.topo__titulo, .topo__titulo strong, .topo__titulo .marca-frase { text-align: center !important; }
@media (max-width: 860px) {
  .topo__logo-loja { height: 46px !important; max-width: 25vw; }
  .emp-contador__seta { width: 20px; }
}

/* CELULAR DEITADO (26/09/2026): pouca altura -- cabeçalho e rodapé baixos
   (o crédito numa linha só) e o menu em 4 colunas, para caber mais na tela. */
@media (orientation: landscape) and (max-height: 520px) {
  .topo { min-height: 0 !important; padding-top: .3rem !important; padding-bottom: .3rem !important; }
  .topo__logo-loja { height: 38px !important; }
  .cartoes { grid-template-columns: repeat(4, 1fr) !important; gap: .5rem !important; }
  .cartao { min-height: 84px !important; padding: .5rem .3rem !important; }
  .rodape { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  .rodape__credito { flex-direction: row; justify-content: center; gap: .6rem; flex-wrap: wrap; }
}
/* RAZÃO SOCIAL: linha própria, centralizada, embaixo de EMPRESA e USUÁRIO (Mateus, 26/09/2026). */
.rodape__razao { flex-basis: 100%; text-align: center; }
.rodape__razao { font-size: .66rem; margin-top: -.35rem; line-height: 1.1; }
.rodape__razao span { font-weight: 400; }

/* Cabeçalho da MESMA altura do rodapé, com a logo maior (Mateus, 26/09/2026). */
@media (max-width: 860px) and (orientation: portrait) {
  .topo { min-height: 92px !important; }
  .topo__logo-loja { height: 66px !important; max-width: 27vw; }
}

/* FILTRO DE PERÍODO (Hoje / 30 Dias / Ano / Todos + datas), o mesmo em toda tela de dinheiro. */
.periodo { margin: .5rem 0 .6rem; }
.periodo__botoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.periodo__bt {
  min-height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--navy-900); font: inherit; font-weight: 700; font-size: .8rem; cursor: pointer;
}
.periodo__bt--ligado { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.periodo__datas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .45rem; }
.periodo__datas label { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; }
.periodo__datas input { min-height: 42px; text-align: center; }

/* A LOGO da empresa quase encostada na margem esquerda, em destaque (26/09/2026). */
.topo { padding-left: .2rem !important; }
.topo__inicio { padding: 0 !important; margin: 0 !important; }
/* O brilho branco em volta da logo (o "destaque") fica SEMPRE: uma sombra escura tinha entrado e a logo alternava entre as duas. */
.topo__logo-loja { filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.periodo__botoes .periodo__bt { width: 100%; padding: 0 .2rem; }
/* LOGIN: a razão social centralizada embaixo do nome da empresa (26/09/2026). */
.campo__razao { text-align: center; }
#campo-empresa select { text-align: center; text-align-last: center; }

/* CAMPO DE DATA centralizado em TODO o sistema: o rótulo e a data dentro do
   campo (Mateus, 26/09/2026). */
input.campo-data { text-align: center !important; }
.campo:has(> input.campo-data) > span, .periodo__datas label > span { display: block; text-align: center !important; }

/* LOGIN TODO CENTRALIZADO (Mateus, 26/09/2026, pelo print do celular): os
   rótulos EMPRESA / USUÁRIO / SENHA, o que está dentro dos campos e o
   "Permanecer conectado". */
#form-entrar .campo > span { display: block; text-align: center; }
#form-entrar select, #form-entrar input:not([type="checkbox"]) { text-align: center; text-align-last: center; }
#form-entrar .lembrar { justify-content: center; text-align: center; }

/* CELULAR ESTREITO (360px, o do Mateus): o nome não encosta no "2/2" e, no
   rodapé, EMPRESA e USUÁRIO ficam na mesma linha. */
@media (max-width: 380px) {
  .topo { --tit: 1rem; --frase: .8rem; gap: .3rem !important; }
  .topo__logo-loja { max-width: 24vw; }
  .rodape { column-gap: .6rem !important; }
  .rodape__empresa, .rodape__usuario { font-size: .7rem; white-space: nowrap; }
}

/* =====================================================================
 * RESPONSIVO DE VERDADE (Mateus, 26/09/2026): qualquer celular -- iPhone,
 * Android pequeno ou grande, tablet, em pé ou deitado. Em vez de um tamanho
 * por aparelho, as medidas ACOMPANHAM a largura da tela (clamp: um mínimo,
 * o proporcional à tela e um máximo). E o entalhe / a barra do iPhone
 * (safe-area) nunca cobrem o cabeçalho nem o rodapé.
 * ===================================================================== */
.topo {
  --tit: clamp(.95rem, 4.3vw, 2.1rem) !important;
  --frase: clamp(.74rem, 3.5vw, 1.6rem) !important;
  gap: clamp(.25rem, 1.5vw, 1rem) !important;
  padding-left: max(.2rem, env(safe-area-inset-left)) !important;
  padding-right: max(.4rem, env(safe-area-inset-right)) !important;
  padding-top: max(.35rem, env(safe-area-inset-top)) !important;
  min-height: clamp(64px, 25.5vw, 110px) !important;
}
.topo__logo-loja { height: clamp(40px, 18.5vw, 86px) !important; max-width: 27vw !important; }
.emp-contador__seta { width: clamp(18px, 6vw, 34px) !important; font-size: clamp(1.1rem, 5vw, 1.6rem) !important; }
.emp-contador__num small { font-size: clamp(.5rem, 2.2vw, .62rem) !important; }
.rodape { padding-bottom: max(.45rem, env(safe-area-inset-bottom)) !important; }
.rodape__empresa, .rodape__usuario { font-size: clamp(.64rem, 3vw, .9rem) !important; white-space: nowrap; }
.rodape__razao { font-size: clamp(.58rem, 2.6vw, .75rem) !important; }
/* Deitado (pouca altura): cabeçalho baixo, para sobrar tela. */
@media (orientation: landscape) and (max-height: 520px) {
  .topo { min-height: 0 !important; }
  .topo__logo-loja { height: clamp(34px, 11vh, 50px) !important; }
  .topo { --tit: clamp(.95rem, 2.6vw, 1.5rem) !important; --frase: clamp(.72rem, 2vw, 1.1rem) !important; }
}
/* Nada vaza para o lado em tela nenhuma. */
html, body { max-width: 100%; overflow-x: hidden; }

/* LOGIN (Mateus, 26/09/2026): a logo do cliente maior, com o mesmo espaço
   do nome "Mateus Informática"; a razão social um pouco mais afastada da
   empresa (no login e no rodapé) -- sem virar uma linha inteira. */
.entrada__logo--cliente { height: clamp(58px, 21vw, 96px) !important; max-width: 36vw !important; }
.campo__razao { margin-top: .4rem !important; }
.rodape__razao { margin-top: -.05rem !important; }
/* A marca do login cabe em QUALQUER largura: o nome acompanha a tela e o
   cartão nunca passa da borda. */
.entrada__cartao { width: 100% !important; max-width: 430px !important; box-sizing: border-box; }
.entrada__marca { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: clamp(.4rem, 2.5vw, 1rem) !important; }
.entrada__marca strong { font-size: clamp(1.05rem, 5.4vw, 1.7rem) !important; white-space: nowrap; }
.entrada__marca .marca-frase { font-size: clamp(.72rem, 3.4vw, 1rem) !important; }
.entrada__logo--cliente { max-width: 30vw !important; }

/* CELULAR: CABEÇALHO e RODAPÉ FIXOS, só o meio rola (Mateus, 26/09/2026 --
   antes a página inteira rolava e o rodapé "andava junto"). A moldura fica
   na altura da tela (dvh: a barra do navegador do celular aparece e some) e
   a área de trabalho no meio é quem rola. */
@media (max-width: 860px), (orientation: landscape) and (max-height: 520px) {
  .app { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .topo, .rodape { flex: none; position: relative !important; }
  .app__painel {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; align-content: start;
  }
}

/* JANELAS no celular ENTRE o cabeçalho e o rodapé (Mateus, 26/09/2026):
   cabeçalho e rodapé aparecem SEMPRE, em toda tela -- a janela (cadastro de
   empresa, cliente, produto...) ocupa só a área de trabalho do meio. As
   alturas vêm do JS (--alt-topo / --alt-rodape) e acompanham a tela. */
@media (max-width: 860px), (orientation: landscape) and (max-height: 520px) {
  #dlg[open], #dlg-codigos[open], dialog.janela--max[open], dialog.dialogo--amplo[open] {
    position: fixed !important; margin: 0 !important;
    top: var(--alt-topo, 0px) !important; bottom: var(--alt-rodape, 0px) !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: none !important; border-radius: 0 !important;
  }
  #dlg::backdrop, #dlg-codigos::backdrop, dialog.janela--max::backdrop { background: transparent; }
}

/* RAZÃO SOCIAL no cabeçalho, centralizada embaixo do complemento e do mesmo
   tamanho dele (saiu do rodapé, 26/09/2026). */
.topo__titulo .marca-razao {
  display: block; text-align: center; font-size: var(--frase); line-height: 1.15; margin-top: .1rem;
  color: rgba(255,255,255,.85); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: uppercase;
}
.topo__titulo { min-width: 0; overflow: hidden; }

/* A MARCA do software e da empresa ("GestorAppMI - Mateus Informática") é
   escrita SEMPRE assim, nunca em maiúsculas -- mesmo dentro de texto que o
   resto do sistema mostra em MAIÚSCULAS (Mateus, 26/09/2026). */
.marca-sw { text-transform: none !important; }
.marca-sw sup { font-size: .6em; vertical-align: super; line-height: 0; margin-left: .05em; }

/* A marca desenhada no rodapé das janelas e avisos ("GestorAppMI - Mateus
   Informática®") com a GRAFIA da marca -- herdava as MAIÚSCULAS do sistema. */
.alerta-rod::before, .dialogo__rodape::before, .janela-marca::before,
.alerta-caixa--padrao .alerta-rod::before, .rodape::before { text-transform: none !important; }

/* Valor (R$) e percentual (%) SEMPRE à direita -- no campo e na lista. */
input.campo-dinheiro, input.campo-pct, .campo-dinheiro, .campo-pct, .num, .valor, td.valor, th.valor { text-align: right !important; }

/* CERTIFICADO na NUVEM (26/09/2026): o sistema roda no servidor e é usado no
   celular -- "certificado instalado no Windows" não existe para quem usa.
   Fica só o ARQUIVO (.pfx / .p12) com a senha. */
.cert-opcao:has(#emp-cert-windows) { display: none !important; }

/* SETINHA ▾ em todo campo com lista (26/09/2026). */
.escolha__campo { position: relative; display: block; }
.escolha__campo > input { width: 100%; padding-right: 2.6rem !important; box-sizing: border-box; }
.escolha__seta {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; border: 0; background: transparent; cursor: pointer;
  color: var(--blue-600); font-size: 1.25rem; line-height: 1; padding: 0;
}
.escolha__seta:focus { outline: none; }

/* LOGIN TRAVADO na tela do celular (Mateus, 26/09/2026): nada de arrastar
   para os lados dentro da área azul. A tela ocupa exatamente o aparelho;
   só rola para CIMA/BAIXO se o cartão for mais alto que a tela. O zoom de
   pinça continua valendo. */
.entrada {
  position: fixed; inset: 0; min-height: 0 !important;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right))
           max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)) !important;
  box-sizing: border-box;
}
.entrada[hidden] { display: none !important; }
@media (max-width: 480px) { .entrada__cartao { padding: 1.1rem !important; } }

/* FISCAL da empresa: SIM / NÃO lado a lado, centralizados, do mesmo tamanho. */
#bl-emp-fiscal .marcas-simples { display: grid !important; grid-template-columns: 1fr 1fr; gap: .6rem; }
#bl-emp-fiscal .marcas-simples .marcar {
  justify-content: center; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
#bl-emp-fiscal .marcas-simples .marcar:has(input:checked) { border-color: var(--blue-600); background: var(--blue-50); font-weight: 700; }
#bl-emp-fiscal .campo > span:first-child { font-weight: 700; }
/* LOGIN no PC: a logo não passa de 150px de largura -- sobra espaço para o nome. */
.entrada__logo--cliente { max-width: min(36vw, 150px) !important; width: auto !important; object-fit: contain; }
/* A proteção da marca não muda o tamanho nem a cor de onde ela está. */
span.marca-sw { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; letter-spacing: inherit !important; display: inline !important; margin: 0 !important; }

/* LOGO com o BRILHO AZUL por trás (Mateus, 26/09/2026): a logo agora tem
   fundo transparente (só os triângulos e o nome); o brilho segue a paleta. */
.topo__logo-loja, .entrada__logo--cliente {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 8px var(--blue-400)) drop-shadow(0 0 16px var(--blue-500)) !important;
  background: transparent !important;
}

/* MatIA no cantinho direito do rodapé + a janela dela no meio da tela (26/09/2026). */
.rodape { position: relative; }
.matia-canto {
  position: absolute; right: max(.35rem, env(safe-area-inset-right)); bottom: max(.35rem, env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 2px solid var(--blue-400);
  background: var(--surface); overflow: hidden; cursor: pointer; z-index: 2;
  box-shadow: 0 0 10px var(--blue-500);
}
.matia-canto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.matia-janela {
  width: min(420px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0;
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(4,16,42,.45);
}
.matia-janela::backdrop { background: rgba(4,16,42,.55); }
.matia-janela__barra {
  display: flex; align-items: center; justify-content: center; position: relative; padding: .7rem;
  background: var(--navy-900); color: #fff; font-size: 1.1rem;
}
.matia-janela__fechar { position: absolute; right: .5rem; border: 0; background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; }
.matia-janela__corpo { padding: 1rem; overflow-y: auto; max-height: calc(100dvh - 6rem); text-align: center; }
.matia-janela__foto { width: 120px; height: 120px; object-fit: cover; object-position: top; border-radius: 50%; border: 3px solid var(--blue-400); box-shadow: 0 0 14px var(--blue-500); }
.matia-janela__pergunta { font-size: 1.35rem; font-weight: 800; color: var(--navy-900); margin: .6rem 0 .8rem; }
.matia-janela__modos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.matia-janela__modos button {
  min-height: 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-weight: 700; color: var(--navy-900); cursor: pointer;
}
.matia-janela__modos button.ligado { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.matia-janela__aviso { font-size: .78rem; font-weight: 700; color: var(--sai); background: var(--sai-fraco); border-radius: 10px; padding: .6rem; line-height: 1.35; }
.matia-janela .campo > span { text-align: center; display: block; }
.matia-janela__respostas { margin-top: .7rem; display: grid; gap: .4rem; }
.matia-janela__resp {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .6rem .8rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg); font: inherit; cursor: pointer; min-height: 48px;
}
.matia-janela__resp small { color: var(--text-soft); font-size: .75rem; }
.matia-janela__nada { font-size: .85rem; color: var(--text-soft); }
.matia-janela__barra b { text-transform: none !important; }
/* MatIA: campo com o 🎤 e a resposta da IA. */
.matia-janela__entrada { position: relative; display: block; }
.matia-janela__entrada input { width: 100%; padding-right: 3rem !important; box-sizing: border-box; }
.matia-janela__mic {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--blue-50); font-size: 1.3rem; cursor: pointer;
}
.matia-janela__ia {
  text-align: left; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 12px;
  padding: .7rem .8rem; font-size: .9rem; line-height: 1.4;
}
.matia-janela__aviso { background: #fdecea !important; color: #c0392b !important; }
#emp-cert-enviar { margin: .6rem 0 .4rem; min-height: 46px; }

/* DOCUMENTOS FISCAIS no CELULAR: NF-e, NFS-e, NFP-e e NFA-e (Mateus, 26/09/2026). No PC
   continuam todos. O que estiver marcado e escondido continua marcado. */
@media (max-width: 860px) {
  .nota-linha:not([data-modelo="nfe"]):not([data-modelo="nfse"]):not([data-modelo="nfpe"]):not([data-modelo="nfae"]) { display: none !important; }
}
/* Documento fiscal gravado: o botão vira SALVO, em verde. */
.nf-salvar.nf-salvar--salvo { background: var(--entra, #0f8a4d) !important; border-color: var(--entra, #0f8a4d) !important; color: #fff !important; }

/* Campo TRAVADO pelo certificado digital (CNPJ, IE): cinza, com cadeado. */
input.campo--travado { background: var(--bg-mute) !important; color: var(--text-soft) !important; cursor: not-allowed; }
label.campo:has(input.campo--travado) > span::after { content: " 🔒"; }

/* LOGO DA EMPRESA no cadastro (celular primeiro). */
.emp-logo { text-align: center; }
.emp-logo__previa {
  display: grid; place-items: center; min-height: 110px; margin: .3rem auto .6rem; max-width: 280px;
  border-radius: 14px; background: var(--navy-900); padding: .6rem;
}
.emp-logo__previa img { max-width: 100%; max-height: 110px; object-fit: contain; filter: drop-shadow(0 0 8px var(--blue-400)); }
.emp-logo__previa span { color: rgba(255,255,255,.7); font-weight: 700; font-size: .8rem; }
.emp-logo__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 420px; margin: 0 auto .4rem; }
.emp-logo__botoes .botao { min-height: 46px; }
.emp-logo__botoes .botao[hidden] { display: none; }
.emp-logo__botoes:has(> .botao[hidden]) { grid-template-columns: 1fr; }
/* O quadro do CONTADOR (emp-contabil -- "emp-contador" já é o 1/2 EMPRESAS do cabeçalho). */
.emp-contabil .grade-2 { gap: .5rem; }

/* CONTAS: 📌 Fixar período, "Você pode localizar por" e Mostrar mais (26/09/2026). */
.periodo__fixar { display: flex; justify-content: center; margin: -.2rem 0 .5rem; font-size: .8rem; }
.ct-modos { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: center; margin: -.2rem 0 .6rem; }
.ct-modos small { flex-basis: 100%; text-align: center; font-size: .66rem; color: var(--text-soft); }
.ct-modo {
  border: 1px solid var(--border); background: var(--surface); color: var(--navy-900); border-radius: 999px;
  padding: .28rem .6rem; font: inherit; font-size: .66rem; font-weight: 700; cursor: pointer; min-height: 30px;
}
.ct-modo--ligado { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.ct-mais { margin: .6rem 0 1rem; min-height: 46px; }
/* O filtro de período em BLOCO (outra regra .periodo, mais antiga, o deixava em linha e encolhido). */
.ct .periodo, .np .periodo { display: block !important; }
.ct .periodo__botoes, .np .periodo__botoes { width: 100%; }
/* BOTÃO FIXAR do período: cinza solto, VERDE quando fixado. */
.periodo__fixar-bt {
  display: block; width: 100%; min-height: 42px; margin: -.1rem 0 .7rem; border-radius: 10px;
  border: 1px dashed var(--border); background: var(--surface); color: var(--text-soft);
  font: inherit; font-weight: 700; font-size: .8rem; cursor: pointer;
}
.periodo__fixar-bt--fixado { border: 1px solid var(--entra, #0f8a4d); background: var(--entra-fraco, #e7f6ee); color: var(--entra, #0f8a4d); }
/* O 📌 ao lado do TODOS: a linha ganha uma coluna pequena; fixado = verde. */
.periodo__botoes.periodo__botoes--fixar { grid-template-columns: repeat(4, 1fr) 44px !important; }
.periodo__pino { padding: 0 !important; font-size: 1rem !important; filter: grayscale(1); opacity: .6; }
.periodo__pino--fixado { filter: none; opacity: 1; background: var(--entra-fraco, #e7f6ee) !important; border-color: var(--entra, #0f8a4d) !important; }
/* DATA INICIAL / FINAL do período: letra maior, aproveitando o campo (Mateus, 26/09/2026). */
.periodo__datas input { font-size: 1.1rem !important; font-weight: 600; letter-spacing: .5px; }
/* TODO CAMPO DE DATA do sistema com letra maior, aproveitando o campo (Mateus, 26/09/2026).
   Encolhe um pouco só se o campo for estreito, para a data nunca ser cortada. */
input.campo-data { font-size: clamp(.95rem, 4.8vw, 1.1rem) !important; font-weight: 600; letter-spacing: .5px; }

/* CONFIGURAÇÕES no celular: só pergunta e resposta, sem cortar; % com o sinal ao lado. */
.cfg-pct { display: flex; align-items: center; gap: .35rem; }
.cfg-pct input { text-align: right; min-width: 0; flex: 1; }
.cfg-pct b { color: var(--text-soft); }
@media (max-width: 860px) {
  .cfg-tabela table, .cfg-tabela tbody, .cfg-tabela tr, .cfg-tabela td { display: block; width: 100%; }
  .cfg-tabela thead { display: none; }
  .cfg-tabela tr { padding: .6rem .2rem; border-bottom: 1px solid var(--border); }
  .cfg-tabela td { padding: .2rem 0; border: 0; }
  .cfg-tabela .cfg-valor select, .cfg-tabela .cfg-valor input { width: 100%; min-height: 44px; }
}

/* CONFIGURAÇÕES EM BLOCOS (26/09/2026): um quadro por assunto; percentuais lado a lado. */
.cfg-blocos { display: grid; gap: .9rem; }
.cfg-bloco { margin: 0; }
.cfg-item { margin-bottom: .55rem; }
.cfg-item select, .cfg-item > input { width: 100%; min-height: 44px; }
.cfg-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .5rem .7rem; }
.cfg-lado .cfg-item > span { font-size: .78rem; }
/* O % ao LADO do número (a regra de .campo o jogava para a linha de baixo). */
.cfg-item .cfg-pct { display: flex !important; flex-direction: row !important; align-items: center; }
.cfg-item .cfg-pct b { display: inline !important; margin: 0; }
.cfg-ajuda { display: block; margin-top: .25rem; font-size: .68rem; color: var(--text-soft); }