/* SmartKondo — painel de administração.
   Tema claro por padrão, escuro conforme o sistema ou a escolha do usuário.
   Todas as cores saem de tokens: nenhuma cor literal nos componentes, senão
   um dos temas fica com texto de um sobre fundo do outro. */

:root {
  --fundo:        #f4f6f8;
  --superficie:   #ffffff;
  --superficie-2: #eef1f4;
  --lateral:      #16202e;
  --lateral-item: #93a3b8;
  --lateral-ativo:#ffffff;
  --tinta:        #16202e;
  --tinta-suave:  #46566b;
  --apagado:      #6b7b90;
  --linha:        #dde3e9;
  --linha-suave:  #e9edf1;
  --acento:       #0f8a5f;
  --acento-forte: #0a6d4b;
  --acento-lavado:#e4f3ec;
  /* A marca tem UMA cor, nos dois temas: é o mesmo verde do ícone do app
     (amostrado do icone-512.png: rgb(15,138,95)). Fica separada de --acento
     de propósito — o acento clareia no tema escuro para dar contraste de
     interface, e um logotipo que muda de cor não é o mesmo logotipo. */
  --marca-verde:  #0f8a5f;
  --marca-anel:   #fff;
  --perigo:       #b3261e;
  --perigo-lavado:#fbeae9;
  --alerta:       #a8690b;
  --sombra:       0 1px 2px rgba(22,32,46,.06), 0 10px 30px -22px rgba(22,32,46,.4);
  --raio:         8px;
  --lateral-larg: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo:        #0e141c;
    --superficie:   #161f2b;
    --superficie-2: #1d2836;
    --lateral:      #0b1119;
    --lateral-item: #8496ab;
    --lateral-ativo:#ffffff;
    --tinta:        #e8edf3;
    --tinta-suave:  #c3ccd7;
    --apagado:      #8b9aad;
    --linha:        #29343f;
    --linha-suave:  #212b36;
    --acento:       #3fbd8a;
    --acento-forte: #63d0a4;
    --acento-lavado:#122b21;
    --perigo:       #e2695f;
    --perigo-lavado:#2c1614;
    --alerta:       #d99a3c;
    --sombra:       0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.95);
  }
}

:root[data-theme="dark"] {
  --fundo:        #0e141c;
  --superficie:   #161f2b;
  --superficie-2: #1d2836;
  --lateral:      #0b1119;
  --lateral-item: #8496ab;
  --lateral-ativo:#ffffff;
  --tinta:        #e8edf3;
  --tinta-suave:  #c3ccd7;
  --apagado:      #8b9aad;
  --linha:        #29343f;
  --linha-suave:  #212b36;
  --acento:       #3fbd8a;
  --acento-forte: #63d0a4;
  --acento-lavado:#122b21;
  --perigo:       #e2695f;
  --perigo-lavado:#2c1614;
  --alerta:       #d99a3c;
  --sombra:       0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.95);
}

* { box-sizing: border-box; }

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

.oculto { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* ---------------- marca ---------------- */
.marca { display: flex; align-items: center; gap: 9px; }
/* O mesmo desenho do ícone do app e do PWA (`frontend/icones/`): disco verde,
   anel branco, bola verde no meio. As proporções foram MEDIDAS no
   icone-512.png — verde até 82px, anel de 66px, centro de 216px — o que dá
   anel externo a 0,68 do lado, espessura 0,129 e centro 0,422. Em 22px:
   recuo 3,5px e anel de 2,8px, que devolvem um centro de 9,3px (0,42). Feito
   com borda em vez de imagem porque assim não há arquivo para carregar nem
   versão que fique para trás das outras. */
.marca-simbolo {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--marca-verde);
  position: relative;
}
.marca-simbolo::after {
  content: ""; position: absolute; inset: 3.5px;
  border-radius: 50%;
  /* Token que NÃO muda com o tema, ao contrário dos outros: o anel vive sobre
     o verde da marca, não sobre o fundo da página. */
  border: 2.8px solid var(--marca-anel);
}
.marca-nome { font-weight: 650; letter-spacing: -.01em; font-size: 16px; }

/* ---------------- login ---------------- */
.login {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.login-cartao {
  width: 100%; max-width: 370px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 14px; padding: 30px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px;
}
.login-sub { margin: -6px 0 8px; color: var(--apagado); font-size: 14px; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); }
.campo.linha-dupla { grid-column: span 2; }

input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 8px 10px; width: 100%;
}
input:disabled, select:disabled { background: var(--superficie-2); color: var(--apagado); }
textarea { min-height: 76px; resize: vertical; }

.erro { color: var(--perigo); font-size: 13.5px; margin: 2px 0 0; min-height: 19px; }
.dica { color: var(--apagado); font-size: 12.5px; margin: 3px 0 0; }

/* ---------------- botões ---------------- */
.botao {
  font: inherit; font-weight: 550; cursor: pointer;
  border: 1px solid var(--linha); background: var(--superficie);
  color: var(--tinta); border-radius: var(--raio); padding: 8px 13px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.botao:hover:not(:disabled) { background: var(--superficie-2); }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao.primario {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.botao.primario:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao.perigo { color: var(--perigo); border-color: var(--linha); }
.botao.perigo:hover:not(:disabled) { background: var(--perigo-lavado); }
.botao.discreto { border-color: transparent; background: transparent; color: var(--apagado); padding: 5px 8px; }
.botao.discreto:hover { color: var(--tinta); background: var(--superficie-2); }
.botao.icone { padding: 7px 9px; line-height: 1; }
.botao.largo { justify-content: center; width: 100%; padding: 10px; }
.botao.pequeno { padding: 5px 9px; font-size: 13px; }

/* ---------------- estrutura ---------------- */
.app { display: grid; grid-template-columns: var(--lateral-larg) 1fr; min-height: 100dvh; }

.lateral {
  background: var(--lateral); color: var(--lateral-item);
  display: flex; flex-direction: column; padding: 18px 12px;
  position: sticky; top: 0; height: 100dvh;
}
.marca-lateral { color: #fff; padding: 0 8px 18px; }
.lateral nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }

.menu-secao {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #5f7186; padding: 16px 10px 6px; font-weight: 600;
}
.menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 6px; color: inherit;
  text-decoration: none; font-size: 14px; cursor: pointer;
}
.menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-item.ativo { background: var(--acento); color: #fff; font-weight: 550; }
.menu-item .glifo { width: 17px; text-align: center; opacity: .95; flex: none; }

.lateral-rodape {
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px; margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.usuario { display: flex; flex-direction: column; min-width: 0; }
.usuario-nome {
  color: #fff; font-size: 13.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta-papel { font-size: 11px; color: #7e8fa4; }

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

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; background: var(--superficie);
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5;
}
.seletor-condominio select { min-width: 230px; font-weight: 550; }

/* Contexto no topo: "Condomínio · Nome · Papel" (ou "Plataforma"). O atributo
   hidden precisa vencer o display das classes (.selo é inline-block). */
[hidden] { display: none !important; }
.contexto-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contexto-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--apagado); font-weight: 600; flex: none;
}
.contexto-nome {
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contexto-topo.fora .contexto-rotulo { color: var(--acento-forte); }

/* Bloco do condomínio no menu: separa as áreas de contas (Plataforma, Minha
   carteira) das seções que pertencem a um prédio específico. */
.menu-condominio {
  margin: 14px 0 4px; padding: 10px 10px 8px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.menu-condominio-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #5f7186; font-weight: 600;
}
.menu-condominio strong {
  color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-condominio-papel { font-size: 11px; color: #7e8fa4; }
.topo-direita { margin-left: auto; display: flex; gap: 6px; }
.so-mobile { display: none; }

.pagina { padding: 24px 22px 64px; max-width: 1240px; width: 100%; }

/* ---------------- cabeçalho de página ---------------- */
.pagina-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.pagina-topo h1 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.pagina-topo p { margin: 4px 0 0; color: var(--apagado); font-size: 14px; max-width: 62ch; }
.pagina-acoes { display: flex; gap: 8px; }

/* ---------------- cartões e indicadores ---------------- */
.grade-indicadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.indicador {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px 16px;
}
.indicador b {
  display: block; font-size: 26px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.indicador span { font-size: 12.5px; color: var(--apagado); }
.indicador.alerta b { color: var(--alerta); }
.indicador.ok b { color: var(--acento); }

.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px;
}
.cartao > h2 {
  margin: 0 0 4px; font-size: 15px; letter-spacing: .01em;
}
.cartao > .cartao-sub { margin: 0 0 16px; color: var(--apagado); font-size: 13.5px; }

.aviso {
  border-left: 3px solid var(--alerta); background: var(--superficie);
  border-radius: 0 var(--raio) var(--raio) 0; padding: 11px 15px;
  font-size: 14px; color: var(--tinta-suave); margin-bottom: 16px;
}
.aviso.ruim { border-left-color: var(--perigo); }
.aviso.bom  { border-left-color: var(--acento); }

/* ---------------- barra de ferramentas ---------------- */
.ferramentas {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
}
.ferramentas input[type="search"], .ferramentas select { width: auto; min-width: 160px; }

/* ---------------- tabela ---------------- */
.moldura-tabela {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden;
}
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--apagado); font-weight: 600; padding: 11px 14px;
  border-bottom: 1px solid var(--linha); white-space: nowrap;
  background: var(--superficie-2);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--linha-suave); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--superficie-2); }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
td.acoes { text-align: right; white-space: nowrap; }
td.acoes .botao { margin-left: 4px; }

.vazio { padding: 40px 20px; text-align: center; color: var(--apagado); }
.vazio p { margin: 0 0 12px; }
/* Hierarquia: a frase que diz o que falta pesa mais que a que explica, e a
   ação vem separada das duas — sem isto as três linhas saíam com o mesmo tom
   e a pessoa não sabia qual ler primeiro. */
.vazio-titulo { color: var(--tinta-suave); font-weight: 600; }
.vazio-descricao { font-size: 13.5px; max-width: 46ch; margin-inline: auto; }
.vazio .botao { margin-top: 4px; }

.selo {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  background: var(--superficie-2); color: var(--tinta-suave);
}
.selo.verde { background: var(--acento-lavado); color: var(--acento-forte); }
.selo.vermelho { background: var(--perigo-lavado); color: var(--perigo); }
/* `alerta` já era pedido pelas telas de encomendas e visitantes e não tinha
   regra nenhuma — o selo saía neutro e a distinção não chegava a existir.
   `info` entrou com a natureza da conta no plano de contas. */
.selo.alerta { background: var(--superficie-2); color: var(--alerta); }
.selo.info { background: var(--superficie-2); color: var(--tinta-suave); }
/* Vários selos na mesma célula (as retenções de um fornecedor). */
.selos { display: flex; flex-wrap: wrap; gap: 4px; }

/* Registro desativado: continua na tela, porque some-lo faria a conta
   inativa parecer apagada — e ela ainda classifica o que já foi lançado. */
tr.esmaecido td { opacity: .55; }

/* Linha que abre um detalhe ao clique (notas fiscais). */
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--superficie-2); }

/* Par rótulo/valor do detalhe da nota fiscal. */
.detalhe-linha { margin-bottom: 8px; }
.detalhe-linha > .dica { display: block; }

/* Receita e despesa no balancete. A cor não sai do sinal do número: estourar
   o previsto é ruim numa despesa e bom numa receita, então quem decide é o
   tipo da conta. */
.valor-receita { color: var(--acento-forte); font-variant-numeric: tabular-nums; }
.valor-despesa { color: var(--perigo); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Conta sintética: é cabeçalho de grupo, não mais uma linha da lista. */
tr.linha-grupo td { background: var(--superficie-2); }

/* Código contábil e CNPJ: dígito embaixo de dígito, senão não dá para
   comparar duas linhas de relance. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.rodape-tabela {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linha);
  font-size: 13px; color: var(--apagado); flex-wrap: wrap;
}

/* ---------------- formulário ---------------- */
.grade-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.campo-checkbox {
  display: flex; align-items: center; gap: 9px; padding-top: 20px;
}
.campo-checkbox input { width: auto; }
.campo-checkbox span { font-size: 14px; }

/* ---------------- modal ---------------- */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(10,16,24,.55);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.modal {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: var(--sombra);
  width: 100%; max-width: 620px; max-height: 88dvh;
  /* Item de grid nasce com min-width:auto — um rodapé de três botões ou um
     código sem espaços esticava o modal para fora do celular. */
  min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-topo {
  padding: 18px 22px 12px; border-bottom: 1px solid var(--linha);
}
.modal-topo h2 { margin: 0; font-size: 17px; }
.modal-topo p { margin: 4px 0 0; color: var(--apagado); font-size: 13.5px; }
.modal-corpo { padding: 18px 22px; overflow-y: auto; overflow-wrap: anywhere; }
.modal-rodape {
  padding: 14px 22px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.modal-rodape .a-esquerda { margin-right: auto; }

/* ---------------- avisos flutuantes ---------------- */
.avisos {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.flutuante {
  background: var(--superficie); border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio); padding: 11px 15px; box-shadow: var(--sombra);
  font-size: 14px; animation: surgir .18s ease-out;
}
.flutuante.ruim { border-left-color: var(--perigo); }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .flutuante { animation: none; } }

/* ---------------- carregando ---------------- */
.carregando { padding: 40px; text-align: center; color: var(--apagado); }

/* ---------------- responsivo ---------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: var(--lateral-larg);
    z-index: 40; transform: translateX(-100%); transition: transform .18s;
  }
  .lateral.aberta { transform: none; }
  .so-mobile { display: inline-flex; }
  .pagina { padding: 18px 14px 56px; }
  .grade-form { grid-template-columns: 1fr; }
  .campo.linha-dupla { grid-column: auto; }
  .seletor-condominio select { min-width: 140px; }
  .contexto-rotulo { display: none; }
  .contexto-nome { font-size: 14px; }
}

/* ---------------- arquivos ---------------- */
.arquivo-linha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px dashed var(--linha);
  border-radius: var(--raio); background: var(--superficie-2);
}
.arquivo-nome { display: flex; align-items: center; gap: 7px; font-size: 14px; min-width: 0; }
.arquivo-glifo { color: var(--acento); }
.arquivo-tamanho { font-size: 12.5px; color: var(--apagado); }
.arquivo-vazio { font-size: 14px; color: var(--apagado); flex: 1; }
.arquivo-linha .botao { margin-left: auto; }

/* ---------------- medidor de plano ---------------- */
.medidor { margin: 10px 0 0; }
.medidor-topo {
  display: flex; justify-content: space-between; font-size: 12.5px;
  color: var(--apagado); margin-bottom: 5px;
}
.medidor-trilho {
  height: 7px; background: var(--superficie-2); border-radius: 4px; overflow: hidden;
}
.medidor-barra { height: 100%; background: var(--acento); border-radius: 4px; }
.medidor-barra.cheio { background: var(--perigo); }
.medidor-barra.quase { background: var(--alerta); }

/* ---------------- interfone: a chamada do portão no navegador ------------- */
/* Sobreposição acima de tudo (inclusive do modal): tem alguém no portão. */
#interfone-chamada {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 32, 46, .6);
}
.interfone-cartao {
  background: var(--superficie); color: var(--tinta);
  border-radius: 12px; padding: 24px 28px; min-width: 260px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); text-align: center;
}
.interfone-titulo { margin: 0 0 4px; color: var(--apagado); font-size: .9rem; }
.interfone-quem { margin: 0 0 16px; font-size: 1.3rem; font-weight: 600; }
.interfone-botoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ------------- visitas do morador: cartões em vez de tabela --------------- */
/* No celular, uma tabela de seis colunas vira rolagem horizontal com o
   código escondido. O cartão põe o código à vista e "Enviar código" à mão. */
.visitas-lista { display: flex; flex-direction: column; gap: 10px; }
.visita-cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 10px; padding: 14px 16px;
}
.visita-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; flex-wrap: wrap; font-size: 1.05rem;
}
.visita-selos { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.visita-sub { color: var(--apagado); font-size: 13px; margin: 3px 0 10px; }
.visita-codigo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--fundo); border-radius: 8px; padding: 9px 12px;
  margin-bottom: 10px;
}
.visita-validade { color: var(--apagado); font-size: 12.5px; }
.visita-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------- foto de cadastro: câmera, miniatura e balão ------------- */
.foto-linha { display: flex; align-items: center; gap: 12px; }
.foto-miniatura {
  width: 84px; height: 84px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--fundo);
}
.foto-lado { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foto-botoes { display: flex; gap: 6px; flex-wrap: wrap; }

.balao-foto {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none;
  background: var(--acento); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.balao-foto img { width: 100%; height: 100%; object-fit: cover; }
.com-avatar { display: inline-flex; align-items: center; gap: 8px; }

/* O balão do usuário logado, no rodapé da lateral. */
#usuario-foto .balao-foto { border: 1px solid rgba(255, 255, 255, .25); }

/* ---------------- busca global (Ctrl+K) ---------------- */
/* Reaproveita o .fundo-modal; o que muda é o alinhamento, porque uma paleta
   de comandos vive no alto da tela, não no centro — a lista cresce para baixo
   e o olho já está onde a resposta vai aparecer. */
.fundo-busca { align-items: flex-start; padding-top: 12vh; }
.busca {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: var(--sombra);
  width: 100%; max-width: 560px; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.busca-topo { padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.busca-campo {
  width: 100%; border: 0; background: transparent; color: var(--tinta);
  font: inherit; font-size: 16px; padding: 6px 4px; outline: none;
}
.busca-campo::-webkit-search-cancel-button { display: none; }
.busca-lista { max-height: 52dvh; overflow-y: auto; padding: 6px; }
.busca-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: var(--raio);
}
/* Um realce só para teclado e ponteiro: com dois (hover + marcado) a lista
   mostrava duas linhas acesas e o Enter agia na que a pessoa não olhava. */
.busca-item.marcado { background: var(--acento-lavado); color: var(--acento-forte); }
.busca-glifo { width: 1.2em; text-align: center; opacity: .75; }
.busca-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-grupo { font-size: 12px; color: var(--apagado); flex-shrink: 0; }
.busca-item.marcado .busca-grupo { color: inherit; opacity: .8; }
.busca-nada { margin: 0; padding: 18px 10px; text-align: center; color: var(--apagado); }
.busca-rodape {
  padding: 8px 14px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--apagado);
}

.busca-atalho {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--superficie-2); border: 1px solid var(--linha);
  color: var(--apagado); border-radius: var(--raio);
  font: inherit; font-size: 13.5px; padding: 6px 10px; cursor: pointer;
}
.busca-atalho:hover { color: var(--tinta-suave); border-color: var(--linha); }
.busca-atalho-texto, .busca-atalho-tecla { display: none; }
.busca-atalho-tecla {
  border: 1px solid var(--linha); border-radius: 4px;
  padding: 1px 5px; font-size: 11px; background: var(--superficie);
}
@media (min-width: 640px) {
  .busca-atalho-texto { display: inline; }
  .busca-atalho-tecla { display: inline; }
  .busca-atalho { min-width: 190px; }
  .busca-atalho-texto { flex: 1; text-align: left; }
}