/*
 * 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 {
  --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;

  /* Verde e vermelho carregam significado aqui: entra / sai dinheiro. */
  --entra:#0f8a4d; --entra-fraco:#e7f6ee;
  --sai:#c0392b;   --sai-fraco:#fdecea;
  --alerta:#b45309; --alerta-fraco:#fef3c7;

  --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: 104px;
  --sombra:0 1px 2px rgba(7,27,61,.06), 0 4px 14px rgba(7,27,61,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#070f22; --surface:#0d1a35; --bg-mute:#122a4d; --border:#1c2f56;
    --text:#e8eefb; --text-soft:#a8b8d4; --text-mute:#8496b6;
    --entra-fraco:#0d2a1c; --sai-fraco:#2a1210; --alerta-fraco:#2b2008; --blue-50:#10213f;
  }
}

* { 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 e o mesmo contorno do cartao de entrada do GestorMI. */
  border-radius: 14px; padding: 2rem; box-shadow: 0 24px 60px rgba(4,16,42,.4);
}
/*
 * 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 {
  display: flex; align-items: center; gap: .5rem;
  margin: -2rem -2rem 1.5rem; padding: 1.1rem 1.5rem;
  /* 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 {
  height: 46px; width: auto; max-width: 150px; 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));
}
/* Coladas: line-height curto e margem zero, como o brand-mark/brand-sub do
   GestorMI, onde o subtitulo encosta no nome. */
.entrada__marca strong {
  display: block; font-size: 1.2rem; color: #fff;
  line-height: 1.15; letter-spacing: -.3px; margin: 0;
}
.entrada__marca span {
  display: block; font-size: .82rem; 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. */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app__painel {
  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;
  /* 100vh passaria POR BAIXO do rodape. A altura agora e a da propria linha. */
  position: sticky; top: 0; align-self: stretch; max-height: 100vh;
}
.lateral__marca {
  display: flex; align-items: center; justify-content: center;
  padding: 0 .5rem; min-height: var(--cabecalho);
}
/* 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. */
  width: 100%; height: auto; max-height: calc(var(--cabecalho) - 14px);
  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); }
/*
 * 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;
}
.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; }
/* Quem não tem permissão vê o item apagado, e sabe que existe. */
.menu__item--bloqueado { opacity: .38; cursor: not-allowed; }

.corpo { display: flex; flex-direction: column; min-width: 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 {
  /* Tres colunas, e nao flex: com flex o titulo ficaria no meio do que SOBRA
     entre a busca e os selos, e sairia do centro assim que um selo mudasse de
     texto. As colunas 1fr dos lados sao iguais, entao o meio e o meio de fato. */
  display: grid; grid-template-columns: 1fr auto 1fr;
  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); position: sticky; top: 0; z-index: 5;
}
/* 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: center; 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; 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); }

/* 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; }
.topo__direita {
  /* stretch, 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. */
  justify-self: end; display: flex; flex-direction: column;
  align-items: stretch; gap: .3rem;
}

.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; }

/*
 * 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; }

h1.titulo { margin: 0 0 1rem; font-size: 1.35rem; }
.linha-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.espaco { flex: 1; }

/* =================================================== 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. */
.linha-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.linha-titulo .titulo { margin: 0; }
.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 {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-g);
  padding: 1.3rem .8rem; text-align: center; cursor: pointer;
  font: inherit; color: var(--text); box-shadow: var(--sombra);
}
.atalho:hover { border-color: var(--blue-400); transform: translateY(-1px); }
.atalho__icone { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.atalho__nome { font-size: .88rem; color: var(--blue-600); font-weight: 600; }

/* ==================================================== 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); }
.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--primario { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.botao--primario:hover { background: var(--blue-600); }
.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; }

/* ==================================================== 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; }

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);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue-400); outline-offset: 1px; }
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));
}
dialog::backdrop { background: rgba(4,16,42,.55); }
dialog form { padding: 1.4rem; }
dialog h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.dialogo__rodape { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* ===================================================== 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;
}
.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); }

/* 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; }

/* 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) === */

/*
 * z-index 9999: acima de tudo, inclusive da lista de certificados. Se um alerta
 * abrir por baixo de algo, ele não avisa ninguém.
 *
 * O <dialog> nativo vive na top layer e ignoraria este número -- por isso a
 * regra abaixo desliga os cliques do diálogo enquanto o alerta está aberto.
 */
.alerta-overlay {
  position: fixed; inset: 0; z-index: 9999; padding: 20px;
  background: rgba(43,43,43,.55);
  display: flex; align-items: center; justify-content: center;
}
.alerta-overlay[hidden] { display: none; }
.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;
}
.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); }
.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. */
.alerta-voltar {
  background: #fff; color: #8f271c; font-weight: 800;
  border: 1px solid #fff; border-radius: 8px;
  padding: 8px 22px; font-size: 15px; cursor: pointer;
}
.alerta-voltar[hidden] { display: none; }
.alerta-ok {
  background: #8f271c; color: #ffdd00; font-weight: 800;
  border: 1px solid #ffdd00; border-radius: 8px;
  padding: 8px 28px; font-size: 15px; letter-spacing: 1px; cursor: pointer;
}
.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; } }

/* 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; }
.cert-linha .campo { flex: 1; margin-bottom: .9rem; }

/* 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.
   */
  .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; }

  .menu {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
    overflow: visible; padding: .5rem;
  }
  .menu__item { padding: .6rem .7rem; font-size: .88rem; }
  .grade-2, .grade-3 { 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; }
  .lateral__marca { min-height: 0; padding: .6rem; }
  .lateral__logo { max-height: 54px; }
  /* 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; }
}