/* ═══════════════════════════════════════════════════════════════════════
   MERCADO DE FRAG — três andares
   ═══════════════════════════════════════════════════════════════════════

   O porquê de cada decisão está no `js/telas/frag.js`. Aqui é só a roupa.

       ANDAR 1   a busca, o "quanto você tem" e o botão FILTROS. Fica.
       ANDAR 2   as cartas. É o assunto, então é ele que ocupa a tela.
       ANDAR 3   a barra de custo, presa embaixo, que sobe no toque.

   A JANELA DE FILTROS não está aqui: ela usa a receita de
   `css/telas/janela.css`, que é a mesma do TOP 10. Aqui só fica o que é
   específico dos campos do legado que moram dentro dela.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ANDAR 1: A BARRA QUE FICA ────────────────────────────────────────── */

.mf-topo {
  width: 100%; max-width: 1400px;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}

.mf-busca {
  display: flex; align-items: center; gap: 9px;
  padding: 0 13px;
  background: rgba(1, 14, 4, 0.72);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
}
.mf-busca > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--boss-verde); }
.mf-busca-vaga { flex: 1; min-width: 0; display: flex; }
/* ⚠️ O campo é o MESMO `<input id="montar-search">` do legado, movido pra
   cá com o `oninput` dele. O que muda é só a casca: sem moldura própria,
   porque a moldura agora é a da linha inteira. */
input.mf-campo-busca {
  flex: 1; min-width: 0;
  height: 44px; padding: 0 !important;
  background: none !important; border: none !important; outline: none;
  font-family: var(--fonte-texto); font-size: 0.92rem;
  color: var(--texto-forte);
}
input.mf-campo-busca::placeholder { color: var(--texto-fraco); }

.mf-linha { display: flex; gap: 8px; align-items: stretch; }

.mf-orc {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 6px 13px;
  background: rgba(1, 14, 4, 0.72);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
}
.mf-orc-rot {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.mf-orc-vaga { display: flex; }
input.mf-campo-orc {
  flex: 1; min-width: 0;
  height: 22px; padding: 0 !important;
  background: none !important; border: none !important; outline: none;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.03em;
  color: var(--boss-ouro);
}
input.mf-campo-orc::placeholder { color: var(--texto-fraco); font-weight: 400; font-size: 0.9rem; }

.mf-filtros {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  padding: 0 15px;
  background: linear-gradient(135deg, rgba(0,200,75,0.14), rgba(0,200,75,0.04));
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.16);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-forte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, border-color .15s, background .15s;
}
.mf-filtros:active { transform: scale(0.96); }
.mf-filtros svg { width: 16px; height: 16px; color: var(--boss-verde); }
/* COM FILTRO LIGADO ele vira dourado. Filtro ativo dentro de uma janela
   fechada é filtro invisível: a pessoa vê 3 cartas e acha que quebrou. */
.mf-filtros.tem { border-color: var(--boss-ouro); background: rgba(232,183,58,0.12); }
.mf-filtros.tem svg { color: var(--boss-ouro); }
.mf-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--boss-ouro); color: #0a0f0c;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0;
}

/* ── ANDAR 2: AS CARTAS ───────────────────────────────────────────────── */

#screen-montar .montar-layout { display: block; }
#screen-montar .montar-results-grid {
  background: rgba(1, 10, 4, 0.55);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-g);
  padding: 11px;
  /* espaço pra barra de custo não tapar a última fileira */
  margin-bottom: 78px;
}
#screen-montar .montar-search-hint {
  font-family: var(--fonte-texto); font-size: 0.86rem; line-height: 1.6;
  letter-spacing: 0; color: var(--texto-fraco); text-transform: none;
}

/* A barra de filtros do legado fica VAZIA (os campos foram pra janela) e os
   controles injetados pelo viewer também. Os dois somem de vista, mas NÃO
   do DOM: é neles que moram o `#montar-count` e o `#vm-search`, que a
   janela usa. Remover mataria o número do botão VER X RESULTADOS. */
#screen-montar .montar-filter-bar.mf-barra-vazia,
#screen-montar #viewer-montar-controls { display: none !important; }

/* ── OS CAMPOS DO LEGADO, DENTRO DA JANELA ────────────────────────────── */

#mf-janela .montar-field { width: 100%; display: flex; flex-direction: column; gap: 6px; }
#mf-janela .montar-field + .montar-field { margin-top: 12px; }
/* O campo cujo input subiu pro topo: fica a casca com o rótulo e nada
   embaixo. Sem isto, a janela mostra um "BUSCAR" solto no meio dos filtros. */
#mf-janela .montar-field.mf-casca-vazia { display: none !important; }
/* Grupo com UM campo só: quem nomeia é o título do grupo, e o rótulo do
   campo diria a mesma palavra logo embaixo ("POSIÇÃO" / "Posição"). */
#mf-janela .bx-grupo-um .montar-field-label { display: none; }
#mf-janela .montar-field-label {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-fraco);
  padding-left: 0;
}
#mf-janela .montar-field select,
#mf-janela .montar-field input[type="text"],
#mf-janela .montar-field input[type="number"] {
  width: 100% !important;
  height: 44px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-m);
  color: var(--texto-forte);
  font-family: var(--fonte-texto); font-size: 0.88rem;
}
#mf-janela .montar-field select:focus,
#mf-janela .montar-field input:focus { border-color: var(--boss-ouro); outline: none; }
#mf-janela .montar-frag-range { display: flex; align-items: center; gap: 8px; }
#mf-janela .montar-frag-range .sep { color: var(--texto-fraco); }
#mf-janela .montar-field-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

/* Os botões do legado que vieram junto (POSIÇÃO SECUNDÁRIA, ESCOLHER
   PLAYSTYLE). O ESCOLHER PLAYSTYLE vinha VERDE CHAPADO e roubava a janela
   inteira: ele é um filtro entre dez, não a ação principal. A ação
   principal é o VER RESULTADOS do pé, e ele é o único dourado. */
#mf-janela .btn,
#mf-janela .montar-ps-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  font-size: 0.74rem !important; letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--texto) !important;
  background: rgba(0,200,75,0.08) !important;
  border: 1px solid var(--borda) !important;
  border-radius: var(--canto-m) !important;
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
}
#mf-janela .btn.active,
#mf-janela .montar-ps-btn.active {
  border-color: var(--boss-ouro) !important;
  background: rgba(232,183,58,0.12) !important;
  color: var(--texto-forte) !important;
}
/* As etiquetas do que já está filtrado, na cor do app. */
#mf-janela .montar-tags,
#mf-janela .vm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#mf-janela .vm-chips:not(:empty) { margin-bottom: 14px; }
#mf-janela .montar-tag,
#mf-janela .vm-chip {
  font-family: var(--fonte-rotulo) !important; font-weight: 600 !important;
  font-size: 0.66rem !important;
  color: var(--texto-forte) !important;
  background: rgba(0,200,75,0.12) !important;
  border: 1px solid var(--borda) !important;
  border-radius: 999px !important;
}
/* ── OS ATRIBUTOS ─────────────────────────────────────────────────────
   O filtro de atributos e uma grade do legado (uma linha por atributo, com
   TANTO FAZ / 3+ / 4+ / 5). Ele vem com o verde chapado dele, que dentro da
   janela puxa o olho mais que o botao principal. Aqui ele so entra na
   paleta: a logica, os niveis e os nomes continuam sendo os dele. */
#mf-janela .attrf-inline { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
#mf-janela .attrf-inline button,
#mf-janela .attrf-inline .attrf-op {
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  font-size: 0.66rem !important; letter-spacing: 0.04em !important;
  color: var(--texto) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--borda-fraca) !important;
  border-radius: var(--canto-p) !important;
}
#mf-janela .attrf-inline button.active,
#mf-janela .attrf-inline .attrf-op.active,
#mf-janela .attrf-inline .on {
  color: #0a0f0c !important;
  background: var(--boss-ouro) !important;
  border-color: var(--boss-ouro) !important;
}

/* ── ANDAR 3: A BARRA DE CUSTO ────────────────────────────────────────── */

/* ⚠️ Ela mora no `document.body` (o porquê está no frag.js), então ela NÃO
   é filha da tela e precisa ser escondida quando a tela sai - senão ela
   aparece por cima de todas as outras. Quem liga e desliga é o
   `seguirATela`. */
.mf-custo {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-barra, 5000);
  background: linear-gradient(180deg, rgba(4,26,11,0.97), rgba(1,11,4,0.99));
  border-top: 1px solid rgba(0,200,75,0.45);
  border-radius: var(--canto-g) var(--canto-g) 0 0;
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.22), 0 -10px 34px rgba(0,0,0,0.75);
  backdrop-filter: blur(16px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mf-custo.fora { display: none; }
.mf-custo-puxar {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mf-custo-rot {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.mf-custo-val {
  flex: 1; text-align: left;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.03em;
  color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mf-custo.tem .mf-custo-val { color: var(--boss-ouro); }
/* A seta do `icones.js` aponta pra direita; aqui ela vira pra cima, e gira
   pra baixo quando a gaveta está aberta. Um desenho, dois estados. */
.mf-custo-seta {
  flex: 0 0 auto; width: 18px; height: 18px; color: var(--texto-fraco);
  transform: rotate(-90deg);
  transition: transform .2s;
}
.mf-custo.aberta .mf-custo-seta { transform: rotate(90deg); }
.mf-custo-corpo {
  display: none;
  max-height: 62vh; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 14px 14px;
}
.mf-custo.aberta .mf-custo-corpo { display: block; }
.mf-custo .montar-right { position: static !important; }
.mf-custo .montar-total-strip {
  border-radius: var(--canto-m);
  border: 1px solid var(--borda);
  background: rgba(0,200,75,0.07);
}
.mf-custo .montar-total-label {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.14em; color: var(--texto-fraco);
}
.mf-custo .montar-total-value {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.5rem; letter-spacing: 0.03em; color: var(--boss-ouro);
}

/* ── A BARRA DE CIMA ──────────────────────────────────────────────────── */

#screen-montar .tier-header .btn {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--texto);
  background: rgba(0,200,75,0.08);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
}
#screen-montar .tier-header .btn-gold {
  color: #0a0f0c;
  background: linear-gradient(135deg, #f3c94a, var(--boss-ouro));
  border: none;
}

/* ── O CELULAR ────────────────────────────────────────────────────────── */

@media (max-width: 360px) {
  .mf-filtros { padding: 0 11px; font-size: 0.68rem; }
  .mf-filtros span { display: none; }   /* fica o funil e o número */
}