/* ============================================================
   Hub · Troca de foto em massa.
   Tudo em cima dos tokens (public/css/tokens.css) — nenhuma cor solta, pra
   a tela envelhecer junto com o resto do Sistema em vez de virar uma ilha.
   Desenho: 4 colunas que afunilam (canal → SKU → variação → anúncios).
   ============================================================ */

/* ── a tela: achar o SKU pai ──────────────────────────────────────────────
   🔴 Aqui morava um grid de 4 colunas (canal · conta > SKU pai > variação >
      anúncios) com trilha, estado de passo e regras de celular pra esconder
      coluna. Tudo isso saiu: a tela faz UMA coisa agora, e as 22 classes do
      desenho antigo (hf-grade, hf-col, hf-item, hf-trilha, hf-anu, hf-acao…)
      foram removidas em vez de ficarem como regra morta. */
.hf-topo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }

.hf-busca {
  width: 100%; max-width: 480px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font-size: var(--fs-body);
}
.hf-busca:focus { outline: none; border-color: var(--primary); background: var(--surface); }

.hf-nota { font-size: var(--fs-xs); color: var(--ink-muted); font-style: italic; }
.hf-sub { font-size: var(--fs-sm); color: var(--ink-muted); }
.hf-vazio { color: var(--ink-muted); font-size: var(--fs-sm); padding: var(--sp-4) 2px; }

/* Cartões de SKU pai. Auto-fill em vez de nº fixo de colunas: a mesma regra
   serve do celular ao monitor largo, sem media query por tamanho. */
.hf-pais { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-2); }

.hf-pai {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px; text-align: left;
  min-height: 64px;                       /* alvo de toque com folga */
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit;
}
.hf-pai:hover { border-color: var(--primary); background: var(--sw-bridesmaid); }
.hf-pai:focus-visible { outline: 2px solid var(--sw-netuno); outline-offset: 1px; }
.hf-pai img, .hf-pai .hf-semfoto {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--bg); border: 1px solid var(--line);
}
.hf-pai-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hf-pai-txt b { font-family: var(--font-mono); font-weight: 700; }
/* O título é longo e quebraria o cartão em duas alturas diferentes. */
.hf-pai-txt .hf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-pai-num { font-size: var(--fs-xs); color: var(--ink-muted); white-space: nowrap; text-align: right; }
.hf-pai-num b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Em quais canais este SKU existe — pra saber o tamanho do estrago antes de
   abrir. Uma cor por canal: a operação reconhece pela cor antes de ler. */
.hf-selos { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.hf-selo {
  font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px; background: var(--line); color: var(--ink-soft);
}
.hf-selo-ml     { background: var(--sw-bridesmaid); color: var(--primary); }
.hf-selo-shopee { background: var(--danger-bg); color: var(--danger); }
.hf-selo-tiktok { background: var(--sw-pattens); color: var(--sw-arapawa-deep); }
.hf-selo-shein  { background: var(--ok-bg); color: var(--ok); }

/* Placeholder de foto: um quadrado branco vazio parece imagem que não carregou.
   Um hachurado discreto diz "não tem foto" sem competir com as que têm. */
.hf-semfoto {
  background:
    repeating-linear-gradient(45deg, var(--bg) 0 4px, var(--line) 4px 5px) !important;
  opacity: .5;
}


/* ── MODAL de troca de foto (dentro de Produtos) ─────────────────────────── */
.tf-wrap { position: fixed; inset: 0; background: rgba(35,50,56,.42); z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 24px 40px; }
.tf-modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; width: 100%; max-width: 1500px; height: 100%; max-height: 900px; overflow: hidden; }
.tf-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.tf-cab h2 { margin: 0; font-size: 17px; font-family: var(--font-mono); font-weight: 700; }
.tf-cab p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.tf-x { margin-left: auto; background: none; border: 0; font-size: 22px; color: var(--ink-muted); cursor: pointer; padding: 0 4px; }
.tf-x:hover { color: var(--ink); }

.tf-abas { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.tf-aba { padding: 11px 16px; border: 0; background: none; font-family: var(--font-ui); font-size: var(--fs-sm);
  color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 7px; }
.tf-aba:hover { color: var(--ink); }
.tf-aba.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; background: var(--surface); }
.tf-aba i { font-style: normal; font-size: var(--fs-xs); background: var(--line); color: var(--ink-muted);
  padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 600; }
.tf-aba.on i { background: var(--primary); color: var(--surface); }

.tf-corpo { flex: 1; display: grid; grid-template-columns: 286px minmax(0,1fr); overflow: hidden; }
.tf-nova { padding: 18px; border-right: 1px solid var(--line); background: var(--bg); overflow: auto; }
.tf-nova h3, .tf-lista h3 { margin: 0 0 10px; font-size: var(--fs-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
.tf-drop { display: block; border: 2px dashed var(--line-2); border-radius: var(--radius-md); padding: 22px 14px;
  text-align: center; background: var(--surface); color: var(--ink-muted); font-size: var(--fs-sm); cursor: pointer; }
.tf-drop:hover { border-color: var(--primary); color: var(--ink); }
.tf-drop b { display: block; color: var(--ink); font-size: var(--fs-body); margin-bottom: 3px; }
.tf-pos { margin-top: 14px; font-size: var(--fs-sm); }
.tf-pos label { display: flex; align-items: center; gap: 8px; padding: 6px 2px; cursor: pointer; }
.tf-aviso { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn); font-size: var(--fs-xs); line-height: 1.45; }

.tf-lista { padding: 18px; overflow: auto; }
.tf-cabl { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px; font-size: var(--fs-sm); }
.tf-cabl label { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink-soft); }
.tf-sel { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.tf-grupo { margin: 14px 0 6px; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tf-grupo::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.tf-anu { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto auto auto; align-items: center;
  gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 5px; background: var(--surface); cursor: pointer; }
.tf-anu:hover { border-color: var(--sw-netuno); }
.tf-anu:has(input:checked) { border-color: var(--primary); background: var(--sw-bridesmaid); box-shadow: inset 3px 0 0 var(--primary); }
.tf-anu.off { background: var(--bg); cursor: default; }
.tf-anu.off:hover { border-color: var(--line); }
.tf-anu input { width: 16px; height: 16px; accent-color: var(--primary); }
.tf-anu img, .tf-anu .hf-semfoto { width: 40px; height: 40px; border-radius: var(--radius-sm);
  object-fit: cover; border: 1px solid var(--line); display: block; }
.tf-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tf-txt b { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; }
.tf-txt span { font-size: var(--fs-xs); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-n { font-size: var(--fs-xs); color: var(--ink-muted); white-space: nowrap; }
.tf-tag { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; }
.tf-ok { background: var(--ok-bg); color: var(--ok); }
.tf-pau { background: var(--line); color: var(--ink-muted); }
.tf-bloq { background: var(--danger-bg); color: var(--danger); }
.tf-fila { background: var(--info-bg); color: var(--chrome-deep); }

/* o acompanhamento do lote — é aqui que mora o desfazer */
.tf-lote { margin-top: 16px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--surface); }
.tf-lote-cab { display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-sm); margin-bottom: 8px; }
.tf-lote-cab b { font-family: var(--font-mono); font-size: var(--fs-xs); }
.tf-and { color: var(--warn); font-size: var(--fs-xs); font-weight: 600; }
.tf-fim { color: var(--ok); font-size: var(--fs-xs); font-weight: 600; }
.tf-sts { display: flex; flex-wrap: wrap; gap: 5px; }
.tf-st { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--line); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tf-st-feito { background: var(--ok-bg); color: var(--ok); }
.tf-st-falhou, .tf-st-indeterminado { background: var(--danger-bg); color: var(--danger); }
.tf-st-aguardando { background: var(--warn-bg); color: var(--warn); }
.tf-falhas { margin-top: 9px; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.tf-falhas code { font-family: var(--font-mono); background: var(--bg); padding: 0 4px; border-radius: 4px; }
.tf-lote .sw-btn { margin-top: 10px; width: 100%; }

.tf-rod { display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-top: 1px solid var(--line); background: var(--bg); }
.tf-dir { margin-left: auto; display: flex; gap: 10px; }
/* o botão que abre a troca, na lista de Produtos */
.vp-foto { margin-left: 7px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-muted); border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 3px 6px; }
.vp-foto:hover { border-color: var(--primary); color: var(--primary); background: var(--sw-cinderela); }

/* ═══ MOBILE ═══════════════════════════════════════════════════════════════
   Régua do frontend-swisz (22/09), depois de ele ler o repo:
   · 768px é o ÚNICO breakpoint que o Sistema trata como "isto é celular de
     verdade" (app.js:748 isMobileNav, styles.css:474 — a sidebar vira gaveta).
   · --sp-1..6 existem (tokens.css:83) e são subutilizados. Usar em vez de px.
   · Modal pequeno tem DUAS famílias na casa: "encolhe o respiro" e "vira tela
     cheia". Não existe bottom-sheet — e inventar um seria uma 3ª família.
   · ⚠️ O SwiszList NÃO resolve mobile: `.swl-table-cards` (list.css:334) está
     escrito e NENHUM js aplica — CSS morto. O comportamento real em <560px é
     só `overflow:auto`. Minhas telas de lista herdam isso como todas as
     outras; card-ificar só as minhas criaria divergência. Fica pro crm-swisz,
     dono do list.js.

   Medido antes de mexer, em 390×844: a coluna dos anúncios ficava com 36px —
   a razão de existir do modal, invisível. O rodapé quebrava em coluna e o
   botão de enviar vazava pra fora da tela.
   ────────────────────────────────────────────────────────────────────────── */

/* ── o modal: mesma receita do .ha-corpo2 (vendas-anuncios.js:585), que já
   resolveu esta MESMA forma — coluna fixa de foto + lista. Não inventar. ── */
@media (max-width: 820px) {
  .tf-corpo { grid-template-columns: 1fr; }        /* empilha: foto em cima, lista embaixo */
  .tf-nova { border-right: 0; border-bottom: 1px solid var(--line); }
  .tf-corpo { overflow: auto; }                     /* a rolagem passa a ser do corpo */
  /* Sem isso as duas faixas viram linhas `auto` que ESTICAM igual (align-content
     padrão do grid é stretch): a área da foto, vazia, comia metade da tela e
     empurrava a lista pra baixo da dobra. `auto 1fr` = foto do tamanho do
     conteúdo, lista fica com o resto. */
  .tf-corpo { grid-template-rows: auto minmax(0,1fr); }
  .tf-lista, .tf-nova { overflow: visible; }
}

/* família "encolhe o respiro" (styles.css:552), não "vira tela cheia" */
@media (max-width: 768px) {
  .tf-wrap { padding: var(--sp-2); }
  .tf-modal { max-height: 100%; border-radius: var(--radius-md); }
  .tf-cab { padding: var(--sp-3) var(--sp-4); }
  .tf-cab h2 { font-size: 15px; }
  .tf-cab p { display: none; }                      /* o subtítulo rouba 2 linhas do topo */
  .tf-abas { padding: 0 var(--sp-2); overflow-x: auto; }   /* 5 canais não cabem: rola */
  .tf-aba { padding: 10px var(--sp-3); white-space: nowrap; }
  .tf-nova, .tf-lista { padding: var(--sp-3); }

  /* A área de soltar a foto ocupava ~1/3 da tela vazia e empurrava a lista pra
     fora da primeira dobra. No celular a lista é o que se olha primeiro: ela
     tem 2 anúncios e você já quer ver quais. */
  .tf-drop { padding: var(--sp-3); }
  .tf-drop b { display: inline; margin: 0 6px 0 0; }
  .tf-pos { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); }
  .tf-pos label { padding: 4px 0; min-height: 44px; }

  /* 🔴 O rodapé quebrava em coluna: "nada é / enviado / agora: o / lote..."
     A nota é contexto, não instrução — some no celular, e o botão ganha a
     largura inteira em vez de vazar pra fora da tela. */
  .tf-rod { padding: var(--sp-3); }
  .tf-rod .hf-nota { display: none; }
  .tf-dir { margin-left: 0; width: 100%; }
  .tf-dir .sw-btn { flex: 1; }

  /* alvo de toque: 16px de checkbox é impossível de acertar com o dedo.
     O mínimo aceito (WCAG 2.5.5 / HIG) é 44px — a LINHA inteira vira o alvo. */
  /* 🔴 São 6 filhos no DOM (check, foto, título, "N fotos", status, motivo) e
     aqui só 4 colunas: o motivo transbordava pra uma 2ª linha implícita e
     espremia a coluna do título até ~15px. Em vez de apertar 6 numa linha de
     390px, o motivo ganha a linha INTEIRA embaixo — que é onde ele se lê. */
  /* 5 filhos em flow no celular (o "N fotos" some): check · foto · título ·
     status · ↗. Com 4 colunas o ↗ caía numa linha só pra ele. */
  .tf-anu { grid-template-columns: auto auto minmax(0,1fr) auto auto; min-height: 52px;
            padding: var(--sp-2) var(--sp-3); row-gap: 4px; }
  /* ⚠️ Aqui havia `*:nth-child(6)`, escolhido quando o motivo era o 6º filho.
     Entrou o link ↗ e o 6º virou OUTRO elemento: a regra passou a jogar o LINK
     pra linha inteira e o motivo voltou a esmagar o título (0px, medido).
     Seletor posicional quebra calado quando o DOM muda de ordem — agora é
     .tf-motivo, uma classe, que o js põe em quem realmente é o motivo. */
  .tf-anu > span:empty { display: none; }   /* o <span></span> de "sem link" não vira coluna */
  .tf-anu input { width: 22px; height: 22px; }
  .tf-anu .tf-n { display: none; }                  /* "6 fotos" cabe no desktop, não aqui */
  .tf-anu .tf-tag { font-size: 10px; padding: 2px 6px; }
  /* "marcar os 16 disponíveis (8 não podem)" + a contagem não cabem lado a lado
     em 390px: viravam 3 colunas espremidas. Empilha. */
  .tf-cabl { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* o alvo de toque do ↗ mudou pro bloco do fim: aqui ele era anulado pela
     base `.tf-ext { min-*: 32px }`, declarada depois. */
  .tf-txt span { font-size: 10.5px; }
}

/* ── celular ──────────────────────────────────────────────────────────────
   A tela virou uma lista de cartões com auto-fill, então não precisa mais de
   regra de coluna aqui: o grid já colapsa sozinho. Ficou só o alvo de toque. */
@media (max-width: 768px) {
  .hf-pai { min-height: 68px; }
  .hf-busca { max-width: none; font-size: 16px; }   /* 16px: abaixo disso o iOS dá zoom ao focar */
}


/* Enquanto a imagem é reduzida (até ~1,9s num Android médio) a área não pode
   parecer clicável: era nesse silêncio que a pessoa escolhia a foto de novo. */
.tf-drop.ocupado { opacity: .65; cursor: progress; border-style: solid; }

/* Agrupamento da lista do modal: SKU filho manda, o canal é subtítulo dentro de
   "Todos os canais". Sem os dois níveis, 24 anúncios de 3 contas viram uma
   parede sem hierarquia. */
.tf-grupo-sku { font-weight: 700; color: var(--ink); margin-top: var(--sp-3); }
.tf-grupo-canal { font-size: var(--fs-xs); color: var(--ink-muted); letter-spacing: .04em;
  text-transform: uppercase; margin: var(--sp-2) 0 2px var(--sp-3); }
/* O link pro anúncio. Alvo de toque próprio — no celular ele encosta no
   checkbox e um polegar não distingue 16px de 16px. */
.tf-ext { display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; border-radius: var(--radius-sm);
  color: var(--ink-muted); text-decoration: none; font-size: 15px; }
.tf-ext:hover { background: var(--sw-bridesmaid); color: var(--primary); }
/* ⚠️ 2 classes DE PROPÓSITO. `.tf-tag` tem a mesma especificidade e também
   declara `white-space` — hoje esta regra vence só porque vem DEPOIS no
   arquivo. Foi exatamente assim que o mesmo `white-space: normal` morreu no
   `.hf-motivo` (achado do crm-swisz, 681c623f): escrito e sem valer nada,
   com a linha vazando 18px no celular. Vencer por ordem é vencer por sorte. */
.tf-anu .tf-motivo { grid-column: 1 / -1; justify-self: start; white-space: normal; }

/* "parei de acompanhar depois de 5 min sem mudança". Não é erro — é a tela
   dizendo que desistiu, em vez de girar pra sempre fingindo que algo anda. */
.tf-parou { font-size: var(--fs-xs); color: var(--warn); background: var(--warn-bg);
  border-radius: 6px; padding: 6px 9px; margin: var(--sp-2) 0; }

/* ── a galeria que vai subir ────────────────────────────────────────────────
   Horizontal e na ordem: a 1ª é a capa. A ordem é conteúdo, então ela é
   editável e está dita na tela — não implícita no nome do arquivo. */
.tf-galeria { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); }
.tf-foto { position: relative; width: 74px; }
.tf-foto img { width: 74px; height: 74px; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg); }
.tf-foto.subindo img { opacity: .5; }
.tf-foto.ruim img { border-color: var(--danger); }
/* 🔴 O SELO É O SELETOR — um elemento só. Antes eram três por foto (selo com o
   número, <select> com o mesmo número, e o ×) num cartão de 80px: o dono olhou
   e disse "ficou ruinzinho". Estava. `appearance:none` tira a seta nativa e o
   selo volta a parecer selo; o clique continua abrindo o menu do sistema, que
   no celular é a roleta nativa — melhor que qualquer coisa que eu desenhasse. */
.tf-pos-sel {
  position: absolute; top: 4px; right: 4px;
  appearance: none; -webkit-appearance: none;
  min-width: 30px; height: 22px; padding: 0 7px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(35,50,56,.78); color: #fff;
  font: 700 10px/1 var(--font-ui); text-align: center; text-align-last: center;
}
.tf-pos-sel:hover { background: var(--ink); }
.tf-pos-sel:focus-visible { outline: 2px solid var(--sw-netuno); outline-offset: 1px; }
/* A capa é a decisão que mais importa: ela é a única laranja. */
.tf-foto.eh-capa .tf-pos-sel { background: var(--primary); }
.tf-foto.eh-capa img { box-shadow: 0 0 0 2px var(--primary); }

/* O × no canto oposto, discreto até o mouse chegar. No toque ele fica sempre
   visível — não existe hover no dedo. */
.tf-tirar {
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(35,50,56,.55); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; opacity: 0; transition: opacity .12s;
}
.tf-foto:hover .tf-tirar, .tf-tirar:focus-visible { opacity: 1; }
@media (hover: none) { .tf-tirar { opacity: 1; } }
.tf-tirar:hover { background: var(--danger); }

.tf-galeria-dica { font-size: var(--fs-xs); color: var(--ink-muted); margin: 6px 0 0; font-style: italic; }
.tf-foto-nota { display: block; font-size: 9.5px; color: var(--ink-muted); margin-top: 2px; }

/* O que vai acontecer, em número, antes do clique. */
.tf-impacto { margin-top: var(--sp-2); padding: 7px 10px; border-radius: 7px;
  font-size: var(--fs-xs); background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
/* `substituir` apaga. Vermelho porque o estrago é real, não porque é erro. */
.tf-impacto-forte { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* ── celular: o alvo de toque da galeria ────────────────────────────────────
   🔴 NO FIM DO ARQUIVO DE PROPÓSITO. A 1ª versão desta regra ficou no bloco
   @media lá de cima (linha ~250) e a base `.tf-foto-acao select { min-height:
   28px }` vem DEPOIS (linha ~315): mesma especificidade, e em empate quem vem
   depois vence. Medi e continuava 28px — a regra estava escrita e não valia
   nada. É EXATAMENTE a armadilha que o crm-swisz achou hoje no `white-space`
   do motivo, no mesmo arquivo. Media query não ganha de base por ser media
   query; ganha por ordem ou por especificidade. */
@media (max-width: 768px) {
  /* O cartão respira e os dois controles em cima dele chegam ao mínimo de 44px
     de largura — é o que o polegar precisa pra não errar entre o × e o número. */
  /* 🔴 MEDIDO: com 92px os dois controles de 44 se SOBREPUNHAM 6px — o dedo
     acertaria o × achando que tocava no número, e o × APAGA a foto. 108 = 5 de
     margem + 44 + 10 de folga + 44 + 5. A folga é a diferença entre tocar no
     que se quer e desfazer trabalho. */
  .tf-foto { width: 108px; }
  .tf-pos-sel { min-width: 44px; height: 30px; font-size: 11px; top: 5px; right: 5px; }
  .tf-tirar   { min-width: 44px; height: 30px; font-size: 16px; top: 5px; left: 5px; }
  /* 🔴 O ↗ estava com 32px MEDIDOS no celular, com a regra de 40 escrita lá em
     cima e morta pela mesma armadilha. Este achado veio do teste novo, na
     primeira execução — e é código que JÁ está em produção. 44 é o mínimo. */
  .tf-ext { min-width: 44px; min-height: 44px; }
}

/* Atalhos "marcar só de: <canal>". Ficam abaixo do marcar-todos e só aparecem
   em "Todos os canais", onde a pergunta "e se eu quiser só o ML?" existe. */
.tf-so-canal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: var(--fs-xs); color: var(--ink-muted); }
.tf-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--radius-pill); padding: 4px 10px; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; }
.tf-chip:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.tf-chip.on { background: var(--primary); border-color: var(--primary); color: var(--surface); font-weight: 700; }
.tf-chip:disabled { opacity: .45; cursor: default; }
.tf-chip i { font-style: normal; font-variant-numeric: tabular-nums; opacity: .75; }

/* Quantos da aba NÃO podem trocar agora. O número grande é o TOTAL — nenhum
   anúncio some da conta, por regra do dono. Este, menor e apagado, é o aviso. */
.tf-aba-bloq { font-weight: 600; font-size: 10px; padding: 1px 5px; border-radius: 999px;
  background: var(--danger-bg); color: var(--danger); }
.tf-aba.on .tf-aba-bloq { background: var(--danger-bg); color: var(--danger); }

/* ── a busca do modal (01/10) ─────────────────────────────────────────────── */
.tf-busca-linha { position: relative; margin: 0 0 10px; }
.tf-busca { max-width: none; padding-right: 34px; }
.tf-busca-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--ink-muted);
  font-size: 18px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.tf-busca-x:hover { color: var(--ink); }
/* marcado e escondido pelo filtro: é pra eles que a foto vai, então aparece */
.tf-escondidos { color: var(--primary); font-weight: 600; }

/* ── as variações de um anúncio único (01/10) ────────────────────────────── */
.tf-vars-resumo { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-muted); }
.tf-vars-bt {
  border: 0; background: transparent; color: var(--primary); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; padding: 2px 4px; margin-left: 4px;
}
.tf-vars-bt:hover { text-decoration: underline; }
.tf-vars {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px;
  margin: -4px 0 10px 36px; padding: 10px; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); background: var(--bg);
}
.tf-var { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tf-var img, .tf-var .hf-semfoto { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 40px; }
.tf-var-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-xs); }
.tf-var-txt b { font-size: var(--fs-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-var-txt span { color: var(--ink-muted); }
.tf-var-canal { color: var(--ink-muted); font-size: 11px; }
.tf-vars-nota { grid-column: 1 / -1; margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-muted); font-style: italic; }
@media (max-width: 768px) {
  .tf-vars { margin-left: 0; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── a aba BASE (01/10): o cadastro, não um canal ────────────────────────── */
/* separada das abas de canal por uma linha: não é mais um marketplace */
.tf-aba-base { border-right: 1px solid var(--line); margin-right: 4px; }
.tf-base-fotos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.tf-base-fotos a { display: block; line-height: 0; }
.tf-anu .tf-base-fotos img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.tf-anu .tf-base-fotos a:first-child img { border-color: var(--primary); }   /* a capa */
.tf-base-fotos i { font-style: normal; font-size: var(--fs-xs); color: var(--ink-muted); }
.tf-base-vazia { font-size: var(--fs-xs); color: var(--ink-muted); font-style: italic; }
.tf-base-linha { cursor: default; }
.tf-base-aviso { margin-bottom: 10px; }
@media (max-width: 768px) {
  .tf-anu .tf-base-fotos img { width: 32px; height: 32px; }   /* dedo, não mouse */
}