/* ═══════════════════════════════════════════════════════════════════════
   BOTÕES DE VIDRO — abas do /anuncios (porte da comprecomigo/micarla, 29/09/2026,
   pedido do dono: "os mesmos ícones de menu que a micarla e outras lojas usam").
   Mesmo desenho de lá: ícone (SVG inline, sem fonte que chega depois e alarga o
   botão) + rótulo + "›", bordas polidas, reflexo e profundidade. O que muda pra
   paleta "Laranja Camila" da Camila:
   • CLARO: a faixa das abas é creme claro (#fbe9d7) — reflexo branco sobre creme
     some, então o vidro ganha borda/sombra em tinta (26,21,20) e um véu rosé escuro
     (140,90,76, o acento do claro) pra ter corpo. Anel da ativa no acento.
   • ESCURO: os matizes viram o rosé da marca (219,177,161) com brilho blush
     (240,216,200) — na comprecomigo eram dourados, na micarla rosé-frio.
   • Tablet (761–1024px) e celular (≤760px): correção da micarla 60c0de7 via
     comprecomigo bb5138c/fe46dd3 — as 6 abas dividem a linha por igual com nome
     curto; no celular ícone em cima e contador como selinho.
   ⚠️ Seletores levam `body` de propósito: as regras inline do anuncios.html
   (`.tabs .tab-btn`) têm especificidade menor e ficam ANTES no cascade.
   ═══════════════════════════════════════════════════════════════════════ */
.tabs, .ann-toptabs { column-gap: .5cm; }
.ann-toptabs { align-items: center; padding-block: 7px; }
.tab-btn[data-tab] { --tab-rgb: 140, 90, 76; }
body .tab-btn[data-tab] {
  zoom: .8;
  flex-shrink: 0;
  min-height: 46px;
  padding: 7px 12px;
  gap: 8px;
  border: 1px solid rgba(43, 29, 18, .12);
  border-top-color: rgba(255, 255, 255, .9);
  border-left-color: rgba(255, 255, 255, .7);
  border-bottom-color: rgba(43, 29, 18, .16);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, .95), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(194, 80, 26, .07), transparent 40%),
    linear-gradient(135deg, rgba(194, 80, 26, .05), rgba(43, 29, 18, .015) 55%, rgba(194, 80, 26, .06));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 1px 0 1px rgba(255, 255, 255, .5),
    inset 0 -1px 1px rgba(43, 29, 18, .06), inset -1px 0 2px rgba(43, 29, 18, .05),
    0 4px 6px -2px rgba(43, 29, 18, .22), 2px 2px 4px rgba(43, 29, 18, .06);
  backdrop-filter: blur(6px) saturate(.2);
  -webkit-backdrop-filter: blur(6px) saturate(.2);
  color: #2b2223;
  font-size: 12px;
  font-weight: 750;
  opacity: 1;
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
/* Ícone em SVG inline. 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; }
.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(194, 80, 26, .06); }
body .tab-btn[data-tab].active {
  color: var(--text);
  border-color: rgba(var(--tab-rgb), .45);
  border-top-color: rgba(255, 255, 255, .95);
  background-color: rgba(194, 80, 26, .08);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(194, 80, 26, .12),
    0 0 0 1px rgba(var(--tab-rgb), .55), 0 4px 7px -2px rgba(43, 29, 18, .28);
}
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(43, 29, 18, .06);
  border-color: rgba(43, 29, 18, .14);
}
body .tab-btn[data-tab].active .tab-count {
  color: var(--gold);
  background: var(--gold-bg);
  border-color: var(--gold-border);
}

/* ── Escuro: o vidro guarda o rosé quente da marca sobre o ônix ── */
[data-theme="dark"] body .tab-btn[data-tab] {
  --tab-rgb: 219, 177, 161;
  color: var(--text);
  border-color: rgba(254, 145, 76, .18);
  border-top-color: rgba(251, 233, 215, .32);
  border-left-color: rgba(251, 233, 215, .25);
  border-bottom-color: rgba(254, 145, 76, .14);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(251, 233, 215, .10), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(251, 233, 215, .07), transparent 40%),
    linear-gradient(135deg, rgba(254, 145, 76, .045), rgba(254, 145, 76, .015) 55%, rgba(254, 145, 76, .05));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(251, 233, 215, .26), inset 1px 0 1px rgba(251, 233, 215, .10),
    inset 0 -1px 1px rgba(251, 233, 215, .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(254, 145, 76, .06); }
[data-theme="dark"] body .tab-btn[data-tab].active {
  border-color: rgba(254, 145, 76, .8);
  background-color: rgba(254, 145, 76, .13);
  box-shadow: inset 0 1px 2px rgba(251, 233, 215, .38), inset 0 -1px 1px rgba(251, 233, 215, .2),
    0 0 0 1px rgba(254, 145, 76, .7), 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(254, 145, 76, .12);
  border-color: rgba(254, 145, 76, .18);
}
body .tab-btn[data-tab]:active { transform: scale(.97); }

/* ── Tablet (761–1024px) — porte da Micarla (60c0de7) ─────────────────────
   Acima de 1024 as abas sobem pra barra superior. Aqui ficam na faixa: as 6
   dividem a linha por igual, com nome curto e o ícone antes (o nome inteiro
   cortava até 1024px — iPad em pé). Substitui a regra de 26/09 que rolava a
   faixa e mantinha "Fornecedores"/"Monitor IA" por extenso: com ícone não cabe. */
@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; margin: 0; 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; }
  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 ──────────
   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) ──────────────────────────────────────────────────────
   As 6 abas numa linha só: ícone em cima, nome curto embaixo, e o contador vira
   selinho no canto (não come largura). A quebra forçada antiga (`.tabs::after`
   de 100%) separava marca/ações das abas — com a shell ligada as duas somem e
   ela só espremia as abas. */
@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; }
  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ó (comprecomigo fe46dd3) ──────────────
   No Fechados a linha era `nowrap` com o filtro, a busca e o botão juntos: o filtro
   ficava espremido e as vendedoras empilhavam, com a busca cortada. 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): chip 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; } }

/* ═══════════════════════════════════════════════════════════════════════
   BUSCA NOVA "Buscar por #enquete ou produto" (dono, 08/10/2026 — "o campo buscar novo
   como fiz em outras lojas"; porte talita 3ec89e9 / joana 19fc62a). Pílula de vidro com a
   lupa numa pílula escura interna à direita (clicar busca na hora). Paleta Laranja Camila:
   claro = vidro sobre o creme, lupa tinta com ícone rosé; escuro = vidro fosco, lupa rosé.
   As 3 abas (Ativos/Fechados/Pedidos) usam o mesmo `.tabs-search.ann-searchbar`.
   ═══════════════════════════════════════════════════════════════════════ */
body .ann-searchbar {
  position: relative; display: flex !important; align-items: stretch; gap: 4px;
  height: 42px; padding: 3px; box-sizing: border-box; border-radius: 999px; overflow: visible !important;
  border: 1px solid rgba(60, 36, 18, .14);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 4px 12px -6px rgba(60, 36, 18, .28);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: box-shadow .18s, border-color .18s, background-color .18s;
}
body .ann-searchbar:focus-within {
  border-color: rgba(194, 80, 26, .55); background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), 0 0 0 3px rgba(194, 80, 26, .14), 0 4px 12px -6px rgba(60, 36, 18, .3);
}
body .ann-searchbar .ann-search { height: 100% !important; padding-left: 15px !important; font-size: 13.5px !important; }
body .ann-searchbar .ann-search::placeholder { color: rgba(43, 29, 18, .5); font-weight: 500; }
body .ann-searchbar .ann-clear { height: 100% !important; }
body .ann-searchbar__btn {
  flex: 0 0 auto; width: 50px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(43, 29, 18, .86); color: #fe914c;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .16), 0 2px 4px -1px rgba(43, 29, 18, .3);
  transition: background-color .15s, transform .15s;
}
body .ann-searchbar__btn:hover { background: rgba(43, 29, 18, .95); }
body .ann-searchbar__btn:active { transform: scale(.95); }
body .ann-searchbar__btn:focus-visible { outline: 2px solid #c2501a; outline-offset: 2px; }
[data-theme="dark"] body .ann-searchbar {
  border-color: rgba(251, 233, 215, .16); background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 1px rgba(251, 233, 215, .12), 0 4px 12px -6px rgba(0, 0, 0, .5);
}
[data-theme="dark"] body .ann-searchbar:focus-within { border-color: rgba(254, 145, 76, .55); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 3px rgba(254, 145, 76, .14); }
[data-theme="dark"] body .ann-searchbar .ann-search::placeholder { color: var(--text); opacity: .5; }
[data-theme="dark"] body .ann-searchbar__btn { background: rgba(254, 145, 76, .85); color: #2b1d12; border-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] body .ann-searchbar__btn:hover { background: rgba(254, 145, 76, .97); }
@media (max-width: 760px) {
  body .ann-searchbar { height: 40px; }
  body .ann-searchbar__btn { width: 44px; }
}