/* ==========================================================================
   Palhano Café — design system v0 (white-label: trocar --brand-* re-tematiza)
   Paleta: papel #ECE8CD · areia #D9D0AF · palha #A99A6F · oliva #625932
           tinta #211A12 · ouro #A58147
   ========================================================================== */
:root {
  --brand-papel:  #ECE8CD;
  --brand-areia:  #D9D0AF;
  --brand-palha:  #A99A6F;
  --brand-oliva:  #625932;
  --brand-tinta:  #211A12;
  --brand-ouro:   #A58147;

  /* semanticos */
  --bg:            var(--brand-papel);
  --bg-cartao:     #F6F2DF;
  --linha:         var(--brand-areia);
  --texto:         var(--brand-tinta);
  --texto-suave:   var(--brand-oliva);
  /* Escurecido de #A99A6F p/ passar contraste AA em texto pequeno sobre o
     fundo claro (o PDV escuro usa --brand-palha direto, não este token). */
  --texto-fraco:   #7C6E42;
  --acento:        var(--brand-ouro);
  --acento-escuro: #8A6B39;
  --perigo:        #9C3D2E;
  --ok:            #5A7A4D;

  --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(33, 26, 18, .06), 0 6px 18px rgba(33, 26, 18, .05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* textura sutil de papel (linhas diagonais quase invisiveis) */
body.backoffice {
  background:
    repeating-linear-gradient(-45deg,
      rgba(169, 154, 111, .05) 0 1px, transparent 1px 9px),
    var(--bg);
  display: flex;
  flex-direction: column;
}

a { color: var(--acento-escuro); text-decoration: none; }

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: .6rem; }
.marca-simbolo { width: 40px; height: 19px; fill: var(--brand-ouro); flex: none; }
.marca-simbolo.grande { width: 72px; height: 34px; }
.marca-texto {
  font-weight: 600; font-size: 1.05rem; letter-spacing: .01em;
  color: #F6F2DF; white-space: nowrap;
}
.marca-texto em {
  font-style: normal; font-weight: 300; font-size: .78em;
  letter-spacing: .38em; color: var(--brand-ouro); margin-left: .28em;
}

/* ---------- topbar ---------- */
.topbar {
  background: var(--brand-tinta);
  border-bottom: 3px solid var(--brand-ouro);
  color: #F6F2DF;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .65rem 1.4rem;
  flex-wrap: wrap;
}
.nav-principal { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.nav-principal a {
  color: #D9D0AF; padding: .45rem .8rem; border-radius: 8px;
  font-size: .92rem; font-weight: 500; transition: background .15s, color .15s;
}
.nav-principal a:hover { color: #F6F2DF; background: rgba(246, 242, 223, .08); }
.nav-principal a.ativo { color: var(--brand-tinta); background: var(--brand-ouro); }
.nav-principal a.nav-pdv {
  border: 1px solid var(--brand-ouro); color: var(--brand-ouro);
}
.nav-principal a.nav-pdv:hover { background: var(--brand-ouro); color: var(--brand-tinta); }

.topbar-direita { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.usuario-nome { font-size: .88rem; color: var(--brand-areia); }
.loja-fixa {
  font-size: .82rem; color: var(--brand-ouro); border: 1px solid rgba(165, 129, 71, .5);
  padding: .3rem .7rem; border-radius: 999px;
}
.seletor-loja select {
  background: rgba(246, 242, 223, .06); color: #F6F2DF;
  border: 1px solid rgba(165, 129, 71, .55); border-radius: 8px;
  padding: .4rem .6rem; font-family: var(--fonte); font-size: .88rem;
}
/* O DROPDOWN das opções abre em fundo claro do sistema — herdando o texto
   claro do topo escuro, a loja selecionada ficava ilegível (feedback 01/09,
   print do gestor). Cores explícitas: escuro no claro, sempre legível. */
.seletor-loja select option {
  background: #FFFFFF; color: #211A12;
}

/* ---------- layout ---------- */
.conteudo { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 2rem 1.4rem 3rem; }
.rodape {
  text-align: center; font-size: .78rem; color: var(--texto-fraco);
  padding: 1.2rem; border-top: 1px solid var(--linha);
}

.pagina-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}
.overline {
  font-size: .72rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--acento-escuro); margin-bottom: .2rem;
}
h1 { font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; }
.subtitulo { color: var(--texto-suave); font-size: .92rem; margin-top: .25rem; }

.cartao {
  background: var(--bg-cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.4rem;
}
.cartao-titulo {
  font-size: .8rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: .9rem;
}
.cartao-titulo.espacado { margin-top: 1.8rem; }

.grade-2col { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .grade-2col { grid-template-columns: 1fr; } }

.cards-metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem; margin-bottom: 1.4rem;
}
.metrica-rotulo {
  font-size: .74rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.metrica-valor { font-size: 1.9rem; font-weight: 600; color: var(--texto); margin: .2rem 0; }
.metrica-detalhe { font-size: .84rem; color: var(--texto-suave); }

/* ---------- tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th {
  text-align: left; font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-fraco); padding: .5rem .6rem;
  border-bottom: 2px solid var(--linha);
}
.tabela td { padding: .65rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tfoot td { border-bottom: none; padding-top: .9rem; }
.tabela .col-num, .tabela th.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .col-acoes { text-align: right; white-space: nowrap; }
.tabela-vazia { text-align: center; color: var(--texto-fraco); padding: 1.6rem !important; }
.linha-inativa { color: var(--texto-fraco); }
.linha-inativa strong { color: inherit; }
.valor-devendo { color: var(--perigo); font-weight: 600; }
.texto-fraco { color: var(--texto-fraco); font-size: .82rem; }

/* ---------- tags ---------- */
.tag {
  display: inline-block; font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: 999px; margin-left: .4rem;
}
.tag-ok      { background: rgba(90, 122, 77, .15); color: var(--ok); }
.tag-neutra  { background: rgba(169, 154, 111, .2); color: var(--texto-suave); }
.tag-combo   { background: rgba(165, 129, 71, .18); color: var(--acento-escuro); }
.tag-vencida { background: rgba(156, 61, 46, .14); color: var(--perigo); }
/* "olhe isto" sem acusar ninguém: contagem de ajustes de comanda do dia. Âmbar,
   não vermelho — ajustar comanda é rotina, o vermelho gritaria furto. */
.tag-aviso   { background: rgba(224, 164, 88, .22); color: #8A5F1E; }

/* ---------- botoes ---------- */
button { font-family: var(--fonte); cursor: pointer; }
.btn-ouro {
  display: inline-block; background: var(--acento); color: var(--brand-tinta);
  border: none; border-radius: 8px; padding: .6rem 1.2rem;
  font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  transition: background .15s, transform .05s;
}
.btn-ouro:hover { background: #B8935A; }
.btn-ouro:active { transform: translateY(1px); }
.btn-largo { width: 100%; }
.btn-fantasma {
  display: inline-block; background: transparent; color: var(--texto-suave);
  border: 1px solid var(--linha); border-radius: 8px;
  padding: .5rem 1rem; font-size: .88rem; font-weight: 500;
  transition: border-color .15s, color .15s;
}
.btn-fantasma:hover { border-color: var(--acento); color: var(--acento-escuro); }
.btn-fantasma.claro { color: var(--brand-areia); border-color: rgba(217, 208, 175, .35); }
.btn-fantasma.claro:hover { color: var(--brand-ouro); border-color: var(--brand-ouro); }
.btn-mini {
  display: inline-block; background: var(--brand-tinta); color: var(--brand-papel);
  border: none; border-radius: 6px; padding: .35rem .7rem;
  font-size: .78rem; font-weight: 500;
}
.btn-mini:hover { background: #3A2E20; color: var(--brand-papel); }
.btn-mini.fantasma {
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--linha);
}
.btn-mini.fantasma:hover { border-color: var(--acento); color: var(--acento-escuro); }
/* Ação primária pequena: '.btn-mini' sobrescrevia o dourado do '.btn-ouro'
   (mesma especificidade, vinha depois). A combinação restaura o destaque. */
.btn-ouro.btn-mini { background: var(--acento); color: var(--brand-tinta);
  border-color: var(--acento); }
.btn-ouro.btn-mini:hover { background: #B8935A; }
.inline-form { display: inline-block; margin-left: .35rem; }

/* ---------- formularios ---------- */
.formulario .campo { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .3rem; }
/* flex-wrap + min-width:0: campos com input date/number não encolhem sozinhos
   e estouravam a linha (scroll lateral) em telas estreitas. */
.formulario .campo-linha { display: flex; gap: 1rem; flex-wrap: wrap; }
.formulario .campo-linha .campo { flex: 1 1 8rem; min-width: 0; }
.formulario label { font-size: .82rem; font-weight: 500; color: var(--texto-suave); }
.formulario input[type="text"], .formulario input[type="email"],
.formulario input[type="password"], .formulario input[type="date"],
.formulario input[type="number"], .formulario select {
  border: 1px solid var(--linha); border-radius: 8px;
  background: #FBF8EA; color: var(--texto);
  padding: .55rem .7rem; font-family: var(--fonte); font-size: .92rem;
}
.formulario input:focus, .formulario select:focus {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.formulario input[type="color"] { width: 3.2rem; height: 2.3rem; border: 1px solid var(--linha); border-radius: 8px; background: none; padding: 2px; }
.campo-check label { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-size: .92rem; padding-top: 1.4rem; }
.formulario-lateral { position: sticky; top: 1rem; }
.acerto-form {
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--linha);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.acerto-form label { font-size: .88rem; color: var(--texto-suave); }
.acerto-form select {
  border: 1px solid var(--linha); border-radius: 8px; background: #FBF8EA;
  padding: .5rem .7rem; font-family: var(--fonte);
}

/* ---------- flashes ---------- */
.flashes { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.flash {
  padding: .7rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 500;
  border: 1px solid;
}
.flash-ok   { background: rgba(90, 122, 77, .12); border-color: rgba(90, 122, 77, .4); color: var(--ok); }
.flash-erro { background: rgba(156, 61, 46, .1); border-color: rgba(156, 61, 46, .35); color: var(--perigo); }
.flash-info { background: rgba(165, 129, 71, .12); border-color: rgba(165, 129, 71, .4); color: var(--acento-escuro); }
.flash-message { background: rgba(165, 129, 71, .12); border-color: rgba(165, 129, 71, .4); color: var(--acento-escuro); }

/* ---------- erro ---------- */
.pagina-erro { text-align: center; max-width: 420px; margin: 3rem auto; padding: 3rem 2rem; }
.pagina-erro h1 { font-size: 3.4rem; color: var(--brand-ouro); margin-bottom: .4rem; }
.pagina-erro p { color: var(--texto-suave); margin-bottom: 1.4rem; }

/* ---------- login (bloco escuro, luas de contraponto) ---------- */
body.tela-login {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(165, 129, 71, .22), transparent 60%),
    var(--brand-tinta);
  display: grid; place-items: center; padding: 2rem 1rem;
}
.login-moldura { width: 100%; max-width: 380px; }
.login-marca { text-align: center; margin-bottom: 1.8rem; }
.login-marca .marca-simbolo { margin-bottom: .8rem; }
.login-wordmark { color: #F6F2DF; font-size: 1.7rem; font-weight: 600; }
.login-wordmark em {
  font-style: normal; font-weight: 300; font-size: .62em;
  letter-spacing: .42em; color: var(--brand-ouro); margin-left: .3em;
}
.login-tagline {
  color: var(--brand-palha); font-size: .84rem; font-style: italic; margin-top: .35rem;
}
.login-cartao {
  background: var(--bg-cartao); border-radius: 14px; padding: 1.8rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: .35rem;
}
.login-cartao label {
  font-size: .8rem; font-weight: 500; color: var(--texto-suave); margin-top: .7rem;
}
.login-cartao input {
  border: 1px solid var(--linha); border-radius: 8px; background: #FBF8EA;
  padding: .65rem .8rem; font-family: var(--fonte); font-size: .95rem;
}
.login-cartao input:focus { outline: 2px solid var(--acento); border-color: var(--acento); }
.login-cartao .btn-ouro { margin-top: 1.2rem; padding: .75rem; }
.login-cartao .flash { margin-bottom: .4rem; }
.login-rodape { text-align: center; color: rgba(169, 154, 111, .6); font-size: .76rem; margin-top: 1.4rem; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Login por PIN (balcão) ---- */
.oculto { display: none !important; }
.login-flash { margin-bottom: .8rem; }
.pin-titulo {
  text-align: center; color: var(--texto-suave);
  font-size: .82rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: .8rem;
}
.pin-pontos { display: flex; justify-content: center; gap: .9rem; margin-bottom: 1.1rem; }
.pin-pontos span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--brand-palha); transition: background .12s;
}
.pin-pontos span.cheio { background: var(--acento); border-color: var(--acento); }
.pin-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.pin-teclado button {
  font: 600 1.35rem var(--fonte); padding: .8rem 0;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--bg); color: var(--texto); cursor: pointer;
  touch-action: manipulation;
}
.pin-teclado button:hover { border-color: var(--acento); }
.pin-teclado button:active { background: var(--brand-areia); transform: translateY(1px); }
.pin-teclado .pin-acao { color: var(--texto-fraco); font-size: 1.1rem; }
.login-alternar {
  display: block; margin: 1rem auto 0; background: none; border: none;
  color: var(--brand-palha); font: 500 .85rem var(--fonte);
  text-decoration: underline; cursor: pointer;
}
.login-alternar:hover { color: var(--brand-ouro); }

/* ---- Cabeçalho com múltiplas ações ---- */
.cabecalho-acoes { display: flex; gap: .6rem; align-items: center; }

/* ---- Equipe: PIN inline ---- */
.form-pin { display: inline-flex; gap: .35rem; align-items: center; }
.input-pin {
  width: 4.2rem; text-align: center; letter-spacing: .18em;
  font: 500 1rem var(--fonte); padding: .35rem .3rem;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--bg);
}
.input-pin:focus { outline: 2px solid var(--acento); border-color: var(--acento); }
.nota-rodape { font-size: .78rem; margin-top: .9rem; }

/* ---- Importação por planilha ---- */
.cartao-estreito { max-width: 560px; }
.passos { margin: 0 0 1.3rem 1.1rem; color: var(--texto-suave); line-height: 1.7; }
.passos code {
  background: var(--brand-areia); padding: .05rem .35rem; border-radius: 5px;
  font-size: .85em; color: var(--acento-escuro);
}
.formulario-upload { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linha); }
.formulario-upload input[type=file] { font: 400 .9rem var(--fonte); color: var(--texto-suave); }

/* ---- Relatórios: filtro de período ---- */
.filtro-periodo { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.filtro-periodo .campo { margin: 0; }
.filtro-periodo .campo-cresce { flex: 1 1 12rem; }
.filtro-periodo input { padding: .5rem .6rem; }
.filtro-periodo .btn-ouro { padding: .55rem 1.2rem; }
.atalhos-periodo { display: flex; gap: 1rem; margin: .8rem 0 1.4rem; }
.atalhos-periodo a { font-size: .85rem; color: var(--texto-suave); text-decoration: underline; }
.atalhos-periodo a:hover { color: var(--acento-escuro); }

/* ---- Categorias: formulários inline ---- */
.form-inline-nova { display: flex; gap: .5rem; margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--linha); flex-wrap: wrap; }
.form-inline-nova input[type=text] { flex: 1 1 8rem; padding: .45rem .6rem;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--bg); }
.form-inline-nova select, .select-grupo { padding: .4rem .5rem; border: 1px solid var(--linha);
  border-radius: 8px; background: var(--bg); font: 400 .88rem var(--fonte); }
.tabela-compacta td, .tabela-compacta th { padding-top: .4rem; padding-bottom: .4rem; }
.linha-total td { border-top: 2px solid var(--linha); }

/* ---- Conta de crédito ---- */
.valor-credito { color: var(--ok); font-weight: 600; }
.campo-ajuda { font-size: .78rem; color: var(--texto-fraco); margin-top: .25rem; }
/* .formulario p/ bater a especificidade de '.formulario .campo' (que força
   coluna) — senão o rótulo fica centralizado sobre um input estreito. */
.formulario .campo-pagto { flex-direction: row; align-items: center; gap: .8rem;
  margin-bottom: .5rem; }
.formulario .campo-pagto label { min-width: 5rem; margin: 0; font-size: .9rem; }
.formulario .campo-pagto input { flex: 1; min-width: 0; padding: .45rem .6rem;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--bg); }
.cartao-titulo.espacado { margin-top: 1.6rem; }

/* ---- Estoque / combo: inputs compactos de quantidade ---- */
.input-qtde { width: 4.5rem; padding: .35rem .4rem; border: 1px solid var(--linha);
  border-radius: 8px; background: var(--bg); font: 400 .9rem var(--fonte); text-align: center; }
.form-estoque { display: inline-flex; gap: .35rem; align-items: center; }

/* ---- Fiscal ---- */
.formas-emitir { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fiscal-acoes { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ================= Responsivo do backoffice (dono no celular) ================= */
/* Nenhum elemento pode forçar a página a rolar de lado. */
html, body { overflow-x: hidden; }

@media (max-width: 760px) {
  .conteudo { padding: 1.2rem 1rem 2.5rem; }
  /* Header empilha: marca, depois ações (loja/Gestor/Sair), depois o menu. */
  .topbar { gap: .5rem .8rem; padding: .6rem 1rem; }
  .topbar-direita { margin-left: 0; width: 100%; order: 2; }
  .nav-principal { order: 3; width: 100%; }
  /* Tabelas largas rolam DENTRO do cartão, sem empurrar a página. */
  .cartao > .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cartao > .tabela thead th { white-space: nowrap; }
  .pagina-cabecalho { align-items: flex-start; }
  .pagina-cabecalho h1 { font-size: 1.5rem; }
}

/* ---- v0.4 Financeiro: busca de contas (dentro do cartão de contas) ---- */
.busca-contas { margin-bottom: 1.2rem; }

/* ---- v0.4 Relatórios: filtro por dia da semana + fluxo de caixa ---- */
/* O fieldset ocupa a linha inteira do form flex (quebra pra baixo do botão). */
.filtro-periodo .campo-dias { border: none; padding: 0; margin: 0; flex: 1 1 100%; }
.campo-dias legend {
  font-size: .82rem; font-weight: 500; color: var(--texto-suave);
  margin-bottom: .4rem; padding: 0;
}
.campo-dias .campo-ajuda-inline {
  font-weight: 400; font-size: .78rem; color: var(--texto-fraco);
}
.dias-semana { display: flex; gap: .4rem; flex-wrap: wrap; }
.dia-check {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--linha); border-radius: 999px;
  padding: .28rem .7rem; font-size: .82rem; color: var(--texto-suave);
  background: #FBF8EA; cursor: pointer; user-select: none;
}
.dia-check input { accent-color: var(--acento-escuro); margin: 0; cursor: pointer; }
.dia-check:hover { border-color: var(--acento); }
.dia-check:has(input:checked) {
  border-color: var(--acento); background: rgba(165, 129, 71, .16);
  color: var(--acento-escuro); font-weight: 600;
}
/* Parágrafo que explica os cards (bruto × recebido × fiado / saldo atual). */
.nota-fluxo { margin: -.4rem 0 1.6rem; max-width: 72ch; line-height: 1.55; }

/* ---- v0.5 Relatórios: todas as lojas + recebido por forma ---- */
/* Selects do filtro (loja / forma de pagto) — espelham os inputs do form. */
.filtro-periodo select {
  border: 1px solid var(--linha); border-radius: 8px;
  background: #FBF8EA; color: var(--texto);
  padding: .5rem .6rem; font: 400 .92rem var(--fonte);
}
/* Aviso curto da visão consolidada (todas as lojas somadas). */
.aviso-consolidado {
  display: inline-block; margin: -.6rem 0 1.4rem; padding: .4rem .9rem;
  border: 1px solid var(--acento); border-radius: 999px;
  background: rgba(165, 129, 71, .12); color: var(--acento-escuro);
  font-size: .85rem; font-weight: 500;
}
/* Explicação curta dentro de um cartão de tabela (recebido por forma). */
.nota-tabela { margin: -.2rem 0 .9rem; font-size: .85rem; max-width: 72ch; line-height: 1.5; }
/* Rodapé de totais da tabela (linha separada do corpo). */
.linha-total th {
  border-top: 2px solid var(--linha); padding: .6rem .6rem .2rem;
  font-size: .92rem; color: var(--texto);
}

/* ==========================================================================
   v0.6 — busca (pedido do dono, 15/07: "barra de pesquisa em tudo")
   ========================================================================== */

/* ---- filtro client-side das listas (filtro-lista.js) ---- */
/* !important: a linha oculta pode ser <tr>/<section> com display próprio. */
.filtro-oculto { display: none !important; }

.filtro-barra {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.campo-busca {
  flex: 1; min-width: 12rem;
  border: 1px solid var(--linha); border-radius: 8px;
  background: #FBF8EA; color: var(--texto);
  padding: .55rem .8rem; font: 400 .95rem var(--fonte);
}
.campo-busca::placeholder { color: var(--texto-fraco); }
.campo-busca:focus {
  outline: 2px solid var(--acento); outline-offset: 1px;
  border-color: var(--acento);
}
.filtro-contador {
  font-size: .82rem; color: var(--texto-fraco); white-space: nowrap;
}

/* ---- paleta de busca global (paleta.js): Ctrl+K / ⌘K / botão 🔍 ---- */
.btn-busca {
  border: 1px solid var(--linha); border-radius: 999px; background: transparent;
  color: var(--texto-suave); cursor: pointer;
  font: 400 1rem var(--fonte); line-height: 1; padding: .4rem .7rem;
}
.btn-busca:hover { border-color: var(--acento); color: var(--acento-escuro); }
.btn-busca:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.paleta-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(33, 26, 18, .55);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 10vh 1rem 1rem;
}
/* O display:flex acima ganharia do [hidden] da folha do navegador. */
.paleta-overlay[hidden] { display: none; }

.paleta {
  width: min(640px, 100%); max-height: 72vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-cartao); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.paleta-campo {
  border: none; border-bottom: 1px solid var(--linha); background: transparent;
  color: var(--texto); font: 400 1.05rem var(--fonte); padding: .9rem 1rem;
}
.paleta-campo::placeholder { color: var(--texto-fraco); }
.paleta-campo:focus { outline: none; border-bottom-color: var(--acento); }

.paleta-lista { list-style: none; overflow-y: auto; }
.paleta-item {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem 1rem; color: var(--texto);
  border-bottom: 1px solid rgba(217, 208, 175, .45);
}
.paleta-item.selecionado { background: rgba(165, 129, 71, .16); }
.paleta-linha { display: flex; align-items: center; gap: .6rem; }
.paleta-titulo { font-weight: 600; }
.paleta-tipo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); border: 1px solid var(--linha);
  border-radius: 999px; padding: .1rem .5rem; white-space: nowrap;
}
.paleta-sub { font-size: .82rem; color: var(--texto-fraco); }
.paleta-vazio, .paleta-dica {
  padding: .8rem 1rem; font-size: .82rem; color: var(--texto-fraco);
}
.paleta-dica { border-top: 1px solid var(--linha); }

@media (max-width: 760px) {
  .paleta-overlay { padding: 4vh .6rem .6rem; }
  /* Atalho de teclado não existe no toque: a dica só confunde no celular. */
  .paleta-dica { display: none; }
}

/* ---- v0.8 (24/07): DRE por período ---- */
.dre-tabela td { padding: .55rem .6rem; }
.dre-tabela .dre-sub td:first-child { padding-left: 1.6rem; color: var(--texto-suave); }
.dre-tabela .dre-forte td { font-weight: 700; border-top: 1px solid var(--linha); }
.dre-tabela .dre-resultado td {
  font-weight: 700; font-size: 1.05rem;
  border-top: 2px solid var(--acento); padding-top: .7rem;
}