/* Abas de anúncios em vidro (porte do comprecomigo, 08/10/2026). Vidro neutro: reflexos, bordas polidas e profundidade. */
.tabs, .ann-toptabs { column-gap: .5cm; }
.ann-toptabs { align-items: center; padding-block: 7px; }
.tab-btn[data-tab] { --tab-rgb: 110, 110, 110; }
body .tab-btn[data-tab] {
  zoom: .8;
  flex-shrink: 0;
  min-height: 46px;
  padding: 7px 12px;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-top-color: rgba(255,255,255,.65);
  border-left-color: rgba(255,255,255,.5);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025) 55%, rgba(255,255,255,.08));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 1px 0 1px rgba(255,255,255,.25),
    inset 0 -1px 1px rgba(255,255,255,.35), inset -1px 0 2px rgba(0,0,0,.09),
    0 4px 6px -2px rgba(0,0,0,.25), 2px 2px 4px rgba(0,0,0,.07);
  backdrop-filter: blur(6px) saturate(.2);
  -webkit-backdrop-filter: blur(6px) saturate(.2);
  color: #343434;
  font-size: 12px;
  font-weight: 750;
  opacity: 1;
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
/* Ícone em SVG inline (antes: fonte de ícones, que chegava depois e alargava o botão). 1em = font-size abaixo. */
body .tab-btn[data-tab] .tab-icon { font-size: 27px; width: 1em; height: 1em; display: block; color: inherit; flex-shrink: 0; }
/* As abas da barra superior só aparecem com fonte, contagens e alinhamento no lugar: entram sem se mexer. */
.ann-toptabs { transition: opacity .16s ease; }
.ann-toptabs.is-settling { opacity: 0; pointer-events: none; transition: none; }
body .tab-btn[data-tab]::after { content: '\203A'; font-size: 22px; font-weight: 400; margin-left: auto; opacity: .65; }
body .tab-btn[data-tab]:hover { background-color: rgba(255,255,255,.08); }
body .tab-btn[data-tab].active {
  border-color: rgba(255,255,255,.6);
  background-color: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.85), inset 0 -1px 1px rgba(255,255,255,.5),
    0 0 0 1px rgba(0,0,0,.12), 0 4px 7px -2px rgba(0,0,0,.3);
}
body .tab-btn[data-tab]:focus-visible { outline: 3px solid rgb(var(--tab-rgb)); outline-offset: 2px; }
body .tab-btn[data-tab] .tab-count {
  color: inherit;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
/* No escuro, o vidro preserva os tons quentes do fundo da loja. */
[data-theme="dark"] body .tab-btn[data-tab] {
  --tab-rgb: 207, 185, 153;
  color: var(--text);
  border-color: rgba(207,185,153,.18);
  border-top-color: rgba(236,220,196,.32);
  border-left-color: rgba(236,220,196,.25);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(236,220,196,.1), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(236,220,196,.07), transparent 40%),
    linear-gradient(135deg, rgba(207,185,153,.045), rgba(207,185,153,.015) 55%, rgba(207,185,153,.05));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(236,220,196,.26), inset 1px 0 1px rgba(236,220,196,.1),
    inset 0 -1px 1px rgba(236,220,196,.13), 0 3px 6px -2px rgba(0,0,0,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
[data-theme="dark"] body .tab-btn[data-tab]:hover { background-color: rgba(207,185,153,.06); }
[data-theme="dark"] body .tab-btn[data-tab].active {
  border-color: rgba(207,185,153,.45);
  background-color: rgba(207,185,153,.08);
  box-shadow: inset 0 1px 2px rgba(236,220,196,.38), inset 0 -1px 1px rgba(236,220,196,.2),
    0 3px 7px -2px rgba(0,0,0,.3);
}
[data-theme="dark"] body .tab-btn[data-tab] .tab-icon { color: inherit; }
[data-theme="dark"] body .tab-btn[data-tab] .tab-count {
  color: var(--text);
  background: rgba(207,185,153,.12);
  border-color: rgba(207,185,153,.18);
}
body .tab-btn[data-tab]:active { transform: scale(.97); }
@media (max-width: 640px) {
  body .tabs { gap: 6px; padding: 7px 6px; }
  body .tabs .tab-btn[data-tab] { flex: 1 0 auto; min-height: 44px; padding: 6px 8px; font-size: 11px; gap: 5px; }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; font-size: 21px; }
  body .tabs .tab-btn[data-tab]::after { display: none; }
}
/* ── Tablet (761–1024px) — 28/09/2026, porte da Micarla (60c0de7) ─────────
   Acima de 1024 as abas sobem pra barra superior. Aqui ficavam na faixa com
   largura natural e, centralizadas numa faixa estreita, vazavam pelos DOIS lados
   (iPad em pé: "Anúncios Ativos" e "Monitor IA" cortados). Agora as 6 dividem a
   linha por igual, com nome curto e o ícone antes (o nome inteiro cortava até 1024px). */
@media (min-width: 761px) and (max-width: 1024px) {
  body .tabs { flex-wrap: nowrap; justify-content: center; column-gap: 8px; padding: 8px 12px; overflow: visible; }
  body .tabs .tab-btn[data-tab] { zoom: 1; flex: 1 1 0; min-width: 0; max-width: 220px; justify-content: center; min-height: 42px; padding: 6px 8px; gap: 6px; font-size: 12.5px; border-radius: 14px; white-space: nowrap; }
  body .tabs .tab-btn[data-tab] .tab-icon { font-size: 20px; }
  body .tabs .tab-btn[data-tab]::after { display: none; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body .tabs .tab-btn[data-tab] > span:not(.tab-count) { display: none; }
  body .tabs .tab-btn[data-tab]::before { content: attr(data-short); }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; }
}
/* ── Notebook / iPad deitado (1025–1499px), abas NA BARRA SUPERIOR — 28/09/2026 ──
   As 6 abas com nome inteiro pedem ~930px; ao lado da saudação sobravam 535 (1040),
   675 (1180) e 861 (1366): "Monitor IA" saía cortado e o resto só por rolagem lateral.
   Nome curto + sem a setinha; até 1199px a saudação sai do topo (como no celular). */
@media (min-width: 1025px) and (max-width: 1499px) {
  body.ann-tabs-in-top .ann-toptabs { column-gap: 10px; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab] { padding: 7px 11px; gap: 7px; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab] > span:not(.tab-count) { display: none; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab]::before { content: attr(data-short); }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab] .tab-icon { order: -1; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab]::after { display: none; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  body.ann-tabs-in-top .mf-top__who { display: none; }
}
/* ── Celular (≤760px) — 28/09/2026 ──────────────────────────────────────────
   Eram 4 abas + 2 esticadas numa 2ª fileira. Agora as 6 numa linha só: ícone em
   cima, nome curto embaixo, e o contador vira selinho no canto (não come largura). */
@media (max-width: 760px) {
  body .tabs { flex-wrap: nowrap; justify-content: space-between; column-gap: 4px; padding: 10px 6px 8px; overflow: visible; }
  body .tabs::after { display: none; } /* a quebra forçada antiga (100%) espremia as abas */
  body .tabs .tab-btn[data-tab] { zoom: 1; position: relative; overflow: visible; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; align-items: center; min-height: 50px; padding: 5px 1px; gap: 3px; font-size: 10.5px; letter-spacing: -.02em; line-height: 1.1; border-radius: 12px; white-space: nowrap; }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; font-size: 19px; }
  body .tabs .tab-btn[data-tab]::after { display: none; }
  body .tabs .tab-btn[data-tab] .tab-count { position: absolute; top: -7px; right: -3px; min-width: 16px; height: 16px; line-height: 14px; font-size: 9px !important; padding: 0 4px !important; margin: 0; border-radius: 99px; text-align: center; background: var(--surface2, var(--surface)) !important; border: 1px solid var(--border); }
  body .tabs .tab-btn[data-tab] .tab-count:empty { display: none; }
}
/* ── Celular: vendedoras numa linha só (28/09/2026, pedido do dono) ──────────
   No Fechados a linha era `nowrap` com o filtro, a busca e o botão juntos: o filtro
   ficava espremido e Todas / Brena / Camila empilhavam em 3 linhas, com a busca
   cortada ("Busca"). Agora: 1ª linha = as vendedoras lado a lado dividindo a largura;
   2ª linha = busca (cresce) + "+ Anúncio Manual". Vale pras três abas com filtro. */
@media (max-width: 760px) {
  body #tabAtivos .ann-search-row, body #tabFechados .ann-search-row, body #tabPedidos .ann-search-row { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  body .tab-content .ann-search-row > .sender-filter:not(:empty) { order: -1 !important; flex: 1 0 100%; min-width: 0; flex-wrap: nowrap; gap: 6px; }
  body .ann-search-row > .sender-filter .sender-chip { flex: 1 1 0; min-width: 0; justify-content: center; height: 34px; padding: 0 8px 0 4px; }
  body .ann-search-row > .sender-filter .sender-chip--all { padding: 0 8px; }
  body .ann-search-row > .sender-filter .sender-chip__n { flex-shrink: 0; }
  body #tabFechados .ann-search-row .tabs-search { flex: 1 1 0 !important; min-width: 0; }
  body #tabFechados .ann-search-row > button { height: 36px !important; border-radius: 18px !important; }
  body #tabFechados .ann-search-row .tabs-search input { height: 36px !important; }
}
/* Celular pequeno (≤360px): "Camila 90" com foto não cabia num terço da linha. */
@media (max-width: 360px) {
  body .ann-search-row > .sender-filter .sender-chip { gap: 4px; font-size: 11px; padding: 0 5px 0 3px; }
  body .ann-search-row > .sender-filter .sender-chip__ava { width: 20px; height: 20px; }
  body .ann-search-row > .sender-filter .sender-chip__n { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { body .tab-btn[data-tab] { transition: none; } }