/* Versão 2 do painel: indicadores, funil em barras, atividade recente, tela da proposta como área de trabalho,
   lead, listas com busca e ordenação, busca rápida. Só tokens do :root de app.css (nenhuma cor ou fonte literal).
   Celular primeiro. Números que decidem algo em Geologica facetada e com algarismos tabulares. */

/* ---------- cabeçalho com ações ---------- */
.cabeca-painel, .cabeca-lista { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.cabeca-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.cabeca-painel { margin-bottom: 22px; }

/* ---------- indicadores: a faixa de números que decidem algo ---------- */
.indicadores {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 36px; border-top: 2px solid var(--marca); border-bottom: 1px solid var(--linha);
}
.indicador {
  position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 14px 12px 16px 0; color: var(--texto); text-decoration: none;
  border-bottom: 1px solid var(--linha);
}
.indicador:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--linha); }
.indicador:nth-last-child(-n + 2) { border-bottom: 0; }
.indicador-rotulo { font: 700 .64rem/1.25 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.indicador-numero {
  font: 600 clamp(1.4rem, .55rem + 1.05vw, 1.8rem)/1.05 var(--fonte-display); font-variation-settings: var(--facetas);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--marca); white-space: nowrap;
}
.indicador-unidade { margin-left: 2px; font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--apagado); }
.indicador-sub { font-size: .8rem; line-height: 1.3; color: var(--apagado); }
.indicador.positivo .indicador-numero { color: var(--positivo-tinta); }
.indicador.atencao .indicador-numero { color: var(--atencao); }
.indicador.atencao .indicador-rotulo::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 1px; background: var(--atencao);
}
.indicador::after {
  content: ""; position: absolute; left: 0; right: 12px; top: -2px; height: 2px;
  background: var(--acento); transform: scaleX(0); transform-origin: left center; transition: transform .25s var(--curva);
}
.indicador:nth-child(2n)::after { left: 14px; }
.indicador:hover::after, .indicador:focus-visible::after { transform: scaleX(1); }
.indicador:hover .indicador-rotulo { color: var(--marca); }
.indicador:focus-visible { outline-offset: -2px; }
.indicador.com-semana { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: end; align-content: start; }
.indicador.com-semana .indicador-rotulo, .indicador.com-semana .indicador-sub { grid-column: 1 / -1; }

/* a semana de leituras: sete barras verticais, hoje na cor da ação */
.semana { display: flex; align-items: flex-end; gap: 3px; height: 26px; max-width: 96px; }
.semana i {
  flex: 1 1 0; height: 100%; border-radius: 1px; background: var(--marca-tinta);
  transform: scaleY(max(.1, var(--parte, 0))); transform-origin: bottom center;
  animation: subir .5s var(--curva) both;
}
.semana i.zerada { background: var(--linha); }
.semana i.hoje { background: var(--acento); }
.semana i.hoje.zerada { background: color-mix(in srgb, var(--acento) 35%, var(--linha)); }
@keyframes subir { from { transform: scaleY(.1); } }

/* ---------- funil em barras ---------- */
.funil a { row-gap: 7px; }
.funil-trilho { grid-column: 1 / -1; display: block; height: 5px; overflow: hidden; border-radius: 1px; background: var(--linha); }
.funil-trilho i {
  display: block; height: 100%; border-radius: 1px; background: var(--cor);
  transform: scaleX(var(--parte, 0)); transform-origin: left center; animation: crescer .55s var(--curva) both;
}
.funil-linha.zerada .funil-trilho { opacity: .5; }

/* ---------- atividade recente ---------- */
.atividades > li { padding: 12px 0; }
.atividade { display: flex; flex-direction: column; gap: 3px; }
.atividade-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.atividade-texto {
  font-size: .94rem; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.atividade-quem { align-self: flex-start; font-size: .86rem; font-weight: 600; color: var(--apagado); text-decoration-color: var(--linha); }
.atividade-quem:hover { color: var(--marca); text-decoration-color: var(--acento); }
.atividade[data-tipo="visita"] .tempo-tipo, .atividade[data-tipo="alerta"] .tempo-tipo { color: var(--acento-forte); }

/* ---------- migalha ---------- */
.migalha ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: -6px 0 12px; padding: 0; list-style: none;
  font: 600 .86rem/1.2 var(--fonte-texto); color: var(--apagado);
}
.migalha li { display: flex; align-items: center; min-height: 32px; }
.migalha li + li::before { content: "/"; margin-right: 8px; color: var(--borda-campo); font-weight: 400; }
.migalha a { color: var(--apagado); text-decoration: none; }
.migalha a:hover { color: var(--marca); text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.migalha [aria-current] { color: var(--texto); }

/* ---------- proposta como área de trabalho ---------- */
.trabalho { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "lado" "abas" "principal"; }
.trabalho-cabeca { grid-area: cabeca; min-width: 0; }
.trabalho-lado { grid-area: lado; min-width: 0; }
.trabalho-abas { grid-area: abas; min-width: 0; }
.trabalho-principal { grid-area: principal; min-width: 0; }
.tela-proposta .cabeca-proposta, .tela-lead .cabeca-lead { max-width: none; margin-bottom: 20px; }
.cabeca-proposta .titulo-tela { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem); }
.cabeca-proposta .cabeca-estado { gap: 8px 14px; }
.cabeca-prazo { display: inline-flex; align-items: baseline; gap: 2px; font-size: .88rem; white-space: nowrap; }
.seletor-status select {
  min-height: 34px; padding: 4px 32px 4px 10px; cursor: pointer;
  background-color: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda-campo); border-left: 4px solid var(--cor, var(--borda-campo)); border-radius: var(--raio);
  font: 600 .88rem/1.2 var(--fonte-texto); -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--marca) 50%), linear-gradient(135deg, var(--marca) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px; background-position: right 16px center, right 11px center; background-repeat: no-repeat;
}
.seletor-status select:focus-visible { outline: 2px solid var(--acento-forte); outline-offset: 2px; }
.cabeca-faixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.cabeca-valores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.valor-grande {
  font: 600 1.7rem/1.1 var(--fonte-display); font-variation-settings: var(--facetas);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--marca);
}
.cabeca-valores .valor-mensal { font-size: .95rem; }
.acoes-proposta { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-proposta .botao { flex: 1 1 auto; }
.botao.desativado { opacity: .6; border-style: dashed; }
.link-reserva-abrir { margin-top: 10px; }

/* quadro de leitura: sempre à vista (ao lado, fixo, no computador) */
.quadro-leitura {
  margin-bottom: 22px; padding: 14px 18px 14px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: inset 0 3px 0 var(--cor-proposta, var(--acento));
}
.quadro-leitura .bloco-titulo {
  padding-bottom: 0; border-bottom: 0;
  font: 700 .66rem/1.2 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado);
}
.quadro-leitura .leitura-frase { margin: 8px 0 0; font-size: 1.3rem; }
.quadro-leitura .leitura-com-marcas { margin-top: 12px; }
.quadro-leitura .leitura-marcas b { background: var(--superficie); }
.quadro-leitura .fatos dd { font-size: 1.1rem; }
.quadro-leitura .fatos dd .esqueleto { height: 16px; margin-top: 4px; }
.quadro-dica { margin: 4px 0 8px; font-size: .9rem; color: var(--apagado); }
.quadro-datas { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: .82rem; color: var(--apagado); }

/* abas da área de trabalho */
.trabalho-abas {
  position: sticky; top: calc(var(--topo-h) + env(safe-area-inset-top)); z-index: 10;
  margin: 0 calc(-1 * var(--lado)); padding: 0 var(--lado);
  background: var(--fundo); box-shadow: inset 0 -1px var(--linha);
}
.abas-trabalho { display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.abas-trabalho::-webkit-scrollbar { display: none; }
.aba-trabalho {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 48px; padding: 0 12px; background: none; border: 0; cursor: pointer; white-space: nowrap;
  font: 600 .95rem/1 var(--fonte-texto); color: var(--apagado);
}
.aba-trabalho:first-child { padding-left: 0; }
.aba-trabalho::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  background: var(--acento); transform: scaleX(0); transform-origin: left center; transition: transform .2s var(--curva);
}
.aba-trabalho:first-child::after { left: 0; }
.aba-trabalho:hover { color: var(--texto); }
.aba-trabalho[aria-selected="true"] { color: var(--marca); }
.aba-trabalho[aria-selected="true"]::after { transform: scaleX(1); }
.aba-trabalho:focus-visible { outline-offset: -4px; }
.aba-qtd {
  min-width: 20px; padding: 3px 6px 2px; border-radius: 9px; text-align: center;
  background: var(--superficie-toque); color: var(--apagado);
  font: 700 .72rem/1 var(--fonte-texto); font-variant-numeric: tabular-nums;
}
.aba-trabalho[aria-selected="true"] .aba-qtd { background: var(--marca); color: var(--sobre-marca); }
.painel-aba { padding-top: 26px; }
.painel-aba:focus-visible { outline-offset: 6px; }
.bloco-passo-lead .passo-atual { margin: 12px 0 14px; }
.bloco-ultimas .lista-paginada + .botao { margin-top: 10px; }
.historico-nota { margin-top: 12px; }
.bloco-historico .tempo-item { grid-template-columns: minmax(0, 1fr) auto; }

@media (min-width: 600px) {
  .acoes-proposta .botao { flex: 0 0 auto; }
}

@media (min-width: 900px) {
  .trabalho {
    grid-template-columns: minmax(0, 1fr) 300px; column-gap: 44px; align-items: start;
    grid-template-areas: "cabeca cabeca" "abas lado" "principal lado";
  }
  .trabalho-lado { position: sticky; top: calc(var(--topo-h) + 16px); grid-row: 2 / span 2; }
  .trabalho-abas { margin: 0; padding: 0; }
  .quadro-leitura .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-aba .estatisticas-grade { gap: 0 40px; }
}

@media (min-width: 1400px) {
  .trabalho { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; }
}

@media (min-width: 600px) {
  .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .indicador:nth-child(2n) { padding-left: 0; border-left: 0; }
  .indicador:nth-child(2n)::after { left: 0; }
  .indicador:not(:nth-child(3n + 1)) { padding-left: 16px; border-left: 1px solid var(--linha); }
  .indicador:not(:nth-child(3n + 1))::after { left: 16px; }
  .indicador:nth-last-child(-n + 2) { border-bottom: 1px solid var(--linha); }
  .indicador:nth-last-child(-n + 3) { border-bottom: 0; }
}

@media (min-width: 1100px) {
  .indicadores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .indicador { border-bottom: 0; padding: 16px 16px 18px; }
  .indicador:not(:nth-child(3n + 1)), .indicador:nth-child(4) { padding-left: 16px; border-left: 1px solid var(--linha); }
  .indicador:nth-child(4)::after { left: 16px; }
  .indicador:first-child { padding-left: 0; }
  .esqueleto-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .esqueleto-duas { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 64px; }
  .dados-novos { bottom: 28px; }
}

@media (min-width: 1400px) {
  :root { --largura: 1240px; }
}

@media (prefers-reduced-motion: reduce) {
  .semana i, .funil-trilho i { animation: none; }
}

/* ---------- lead ---------- */
.trabalho-lead { display: flex; flex-direction: column; }
.trabalho-lead .trabalho-cabeca { order: 0; }
.lead-principal, .lead-lado { min-width: 0; }
.cabeca-lead .acoes-contato { margin-top: 16px; }
.cabeca-lead .cabeca-estado { gap: 8px 14px; font-size: .88rem; }
.sem-telefone { align-self: center; }
.passo-editar {
  padding: 0; background: none; border: 0; cursor: text; text-align: left;
  font: inherit; color: inherit; text-decoration: underline dotted var(--borda-campo); text-underline-offset: 6px;
}
.passo-editar:hover { text-decoration-color: var(--acento); text-decoration-style: solid; }

/* cartões de proposta */
.cartoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.cartao-item { min-width: 0; }
.cartao-proposta {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 16px 14px 18px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: inset 3px 0 var(--cor-proposta, var(--acento));
  color: var(--texto); text-decoration: none; transition: border-color .15s;
}
.cartao-proposta:hover { border-color: var(--marca-tinta); }
.cartao-proposta:hover .cartao-titulo { text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.cartao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cartao-topo .prazo { margin-left: auto; }
.cartao-titulo { font: 600 1.06rem/1.25 var(--fonte-display); font-variation-settings: var(--facetas); overflow-wrap: anywhere; }
.cartao-valores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cartao-leitura { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 4px; font-size: .85rem; }

/* blocos recolhíveis (dados do lead) */
.recolhivel > summary { list-style: none; cursor: pointer; }
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel > summary .bloco-titulo::after {
  content: ""; width: 7px; height: 7px; margin: 0 4px 3px auto; align-self: center;
  border-right: 2px solid var(--marca); border-bottom: 2px solid var(--marca);
  transform: rotate(45deg); transition: transform .2s var(--curva);
}
.recolhivel[open] > summary .bloco-titulo::after { transform: rotate(-135deg); }
.recolhivel > summary:focus-visible { outline-offset: 4px; }

@media (max-width: 899px) {
  .lead-principal, .lead-lado { display: contents; }
  .trabalho-lead .area-passo { order: 1; }
  .trabalho-lead .area-tarefas { order: 2; }
  .trabalho-lead .area-propostas { order: 3; }
  .trabalho-lead .bloco-tempo { order: 4; }
  .trabalho-lead .bloco-dados { order: 5; }
  .trabalho-lead .bloco-arquivar { order: 6; }
}

@media (min-width: 600px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .trabalho-lead {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; align-items: start;
    grid-template-areas: "cabeca cabeca" "principal lado";
  }
  .trabalho-lead .trabalho-cabeca { grid-area: cabeca; }
  .lead-principal { grid-area: principal; }
  .lead-lado { grid-area: lado; }
}

@media (min-width: 1400px) {
  .trabalho-lead { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 56px; }
}

/* ---------- listas: busca, filtros com contagem, ordenação e colunas ---------- */
.ferramentas-lista { display: flex; flex-direction: column; gap: 12px; }
.ferramentas-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ferramentas-linha .busca { flex: 1 1 280px; margin: 0; }
.ordem { display: flex; align-items: center; gap: 8px; font: 600 .86rem/1 var(--fonte-texto); color: var(--apagado); }
.ordem select {
  min-height: 48px; padding: 0 36px 0 12px; cursor: pointer;
  background-color: var(--superficie); color: var(--texto); border: 1px solid var(--borda-campo); border-radius: var(--raio);
  font: 600 .95rem/1.2 var(--fonte-texto); -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--marca) 50%), linear-gradient(135deg, var(--marca) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px; background-position: right 20px center, right 14px center; background-repeat: no-repeat;
}
.ordem select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca), 0 0 0 4px color-mix(in srgb, var(--acento) 35%, transparent); }
.chips {
  display: flex; gap: 6px; margin: 0 calc(-1 * var(--lado)); padding: 2px var(--lado) 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; cursor: pointer;
  background: var(--superficie); color: var(--apagado); border: 1px solid var(--linha); border-radius: 19px;
  font: 600 .88rem/1 var(--fonte-texto); transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--marca-tinta); color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.chip-qtd { font-size: .78rem; font-variant-numeric: tabular-nums; opacity: .85; }
.chip.vazio-chip:not([aria-pressed="true"]) { opacity: .55; }
.chips .abas-divisor { margin: 9px 4px; }
.tela-leads .contagem, .tela-propostas .contagem { margin-top: 16px; }

.linha-lista {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 0;
  color: inherit; text-decoration: none;
}
.linha-lista-proposta { grid-template-areas: "principal status" "valor valor" "leitura leitura" "movimento validade"; }
.linha-lista-lead { grid-template-areas: "principal status" "passo passo" "valor qtd" "movimento movimento"; }
a.linha-lista:active { background: var(--superficie-toque); }
a.linha-lista:hover .linha-nome { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lc-principal { grid-area: principal; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lc-principal .linha-nome .marca-proposta.com-codinome { vertical-align: .12em; }
.lc-status { grid-area: status; justify-self: end; }
.lc-valor { grid-area: valor; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.lc-leitura { grid-area: leitura; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.lc-movimento { grid-area: movimento; }
.lc-validade { grid-area: validade; justify-self: end; display: flex; align-items: baseline; gap: 8px; }
.lc-passo { grid-area: passo; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .92rem; min-width: 0; }
.lc-qtd { grid-area: qtd; justify-self: end; }
.tabela-lista-cabeca { display: none; }

@media (min-width: 900px) {
  .chips { flex-wrap: wrap; margin: 0; padding: 0 0 4px; }
  .linha-lista { align-items: center; gap: 0 18px; margin: 0 -12px; padding: 14px 12px; border-radius: var(--raio); transition: background-color .12s; }
  a.linha-lista:hover { background: color-mix(in srgb, var(--superficie) 70%, transparent); }
  .linha-lista-proposta {
    grid-template-columns: minmax(0, 2.3fr) 7.5rem 8.5rem minmax(0, 1.5fr) 6.5rem 8.5rem;
    grid-template-areas: "principal status valor leitura movimento validade";
  }
  .linha-lista-lead {
    grid-template-columns: minmax(0, 1.5fr) 10.5rem minmax(0, 1.7fr) 7.5rem 7.5rem 6.5rem;
    grid-template-areas: "principal status passo valor qtd movimento";
  }
  .lc-status, .lc-validade, .lc-qtd { justify-self: start; }
  .lc-valor { flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
  .lc-validade { flex-direction: column; gap: 2px; }
  .tabela-lista-cabeca {
    display: grid; align-items: end; gap: 0 18px; margin: 8px -12px 0; padding: 0 12px 8px; border-bottom: 1px solid var(--marca);
    font: 700 .64rem/1.2 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado);
  }
  .tabela-lista-cabeca.linha-lista-proposta span:nth-child(3), .tabela-lista-cabeca.linha-lista-lead span:nth-child(4) { text-align: right; }
  .tabela-lista-cabeca.linha-lista-lead span:nth-child(4) { text-align: right; }
}

/* ---------- busca rápida (Ctrl+K ou "/") ---------- */
.buscar {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 40px; padding: 0 10px; cursor: pointer;
  background: color-mix(in srgb, var(--sobre-escuro-forte) 7%, transparent); color: var(--sobre-escuro);
  border: 1px solid color-mix(in srgb, var(--sobre-escuro-forte) 16%, transparent); border-radius: var(--raio);
  font: 600 .9rem/1 var(--fonte-texto);
}
.buscar:hover { color: var(--sobre-escuro-forte); border-color: color-mix(in srgb, var(--sobre-escuro-forte) 35%, transparent); }
.buscar-rotulo, .buscar-tecla { display: none; }
.buscar-tecla {
  padding: 3px 5px; border: 1px solid color-mix(in srgb, var(--sobre-escuro-forte) 22%, transparent); border-radius: 3px;
  font: 600 .7rem/1 var(--fonte-texto); color: var(--apagado-sobre-escuro);
}
.topo .sair { margin-left: 6px; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 2px 5px; text-align: center;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 3px;
  font: 600 .72rem/1.2 var(--fonte-texto);
}
.busca-rapida {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--veu); color: var(--texto);
}
.busca-rapida[open] { display: flex; justify-content: center; align-items: flex-start; padding: max(9vh, 12px) 12px 12px; }
.busca-rapida::backdrop { background: transparent; }
.br-painel {
  display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 78dvh; overflow: hidden;
  background: var(--fundo); border-radius: var(--raio-g); box-shadow: 0 18px 48px var(--sombra);
  animation: folha-subir .2s var(--curva) both;
}
.br-campo {
  width: 100%; min-height: 58px; padding: 0 18px; outline: none;
  background: var(--superficie); color: var(--texto); border: 0; border-bottom: 1px solid var(--linha);
  font: 400 1.1rem/1.2 var(--fonte-texto); -webkit-appearance: none; appearance: none;
}
.br-campo:focus { box-shadow: inset 0 -2px 0 var(--acento); }
.br-lista { flex: 1; margin: 0; padding: 6px 0 8px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.br-grupo { padding: 12px 18px 4px; font: 700 .64rem/1.2 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.br-opcao { display: flex; align-items: baseline; gap: 10px; min-height: 42px; padding: 10px 18px; cursor: pointer; }
.br-opcao .marca-proposta.com-codinome { align-self: center; }
.br-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.br-sub { flex: none; max-width: 45%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; color: var(--apagado); }
.br-opcao kbd { margin-left: auto; }
.br-opcao[aria-selected="true"] { background: var(--superficie-toque); box-shadow: inset 3px 0 var(--acento); }
.br-vazio { padding: 18px; color: var(--apagado); }
.br-rodape {
  display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 18px; border-top: 1px solid var(--linha);
  font-size: .8rem; color: var(--apagado);
}
.br-rodape kbd { margin-right: 3px; }
.br-rodape.destaque { background: color-mix(in srgb, var(--acento) 10%, var(--fundo)); color: var(--texto); }

@media (min-width: 900px) {
  .buscar { min-width: 190px; justify-content: flex-start; margin-right: 8px; }
  .buscar-rotulo { display: inline; }
  .buscar-tecla { display: inline-block; margin-left: auto; }
}

.tipos-tema { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; margin-top: 12px; }
.buscar-tecla { background: transparent; }

/* celular: abas e filtros rolam de lado; a borda direita esmaece para mostrar que há mais */
@media (max-width: 899px) {
  .abas-trabalho, .chips {
    -webkit-mask-image: linear-gradient(to right, var(--texto) calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, var(--texto) calc(100% - 28px), transparent);
  }
  .abas-trabalho { padding-right: 24px; }
}
@media (max-width: 899px) {
  .lc-valor.sem-valor { display: none; }
}