/* ═══════════════════════════════════════════════════════════════════════
   BOTÕES DE VIDRO — abas do /anuncios (porte Jéssica a00c5ae ← layssa/Micarla,
   09/10/2026). Ícone Tabler + rótulo + "›", bordas polidas, reflexo e profundidade.
   Na Alana:
   • Tom do vidro no MALVA da marca (125,86,86) no claro e no ROSÉ (217,167,167)
     no escuro.
   • Notebook: as 6 abas dividem a linha (nome inteiro até 1200px, depois nome
     curto com o ícone); celular: ÍCONE em cima + nome curto (data-short)
     embaixo, contador vira selinho no canto.
   • Com a barra única (shell) a marca "AL" da faixa sai — a logo já está na
     lateral — e as abas ficam centralizadas. A busca continua dentro de cada
     aba (pílula de vidro, já existente na página).
   ═══════════════════════════════════════════════════════════════════════ */
.tabs { column-gap: 10px; align-items: center; padding-block: 7px; }
.tab-btn[data-tab] { --tab-rgb: 125, 86, 86; }
body .tab-btn[data-tab] {
  display: inline-flex;
  align-items: center;
  zoom: .8;
  flex-shrink: 0;
  min-height: 46px;
  padding: 7px 12px;
  gap: 8px;
  border: 1px solid rgba(61, 43, 43, .12);
  border-top-color: rgba(255, 255, 255, .9);
  border-left-color: rgba(255, 255, 255, .7);
  border-bottom-color: rgba(61, 43, 43, .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(125, 86, 86, .08), transparent 40%),
    linear-gradient(135deg, rgba(125, 86, 86, .06), rgba(61, 43, 43, .015) 55%, rgba(125, 86, 86, .07));
  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(61, 43, 43, .06), inset -1px 0 2px rgba(61, 43, 43, .05),
    0 4px 6px -2px rgba(61, 43, 43, .22), 2px 2px 4px rgba(61, 43, 43, .06);
  backdrop-filter: blur(6px) saturate(.2);
  -webkit-backdrop-filter: blur(6px) saturate(.2);
  color: #3d2b2b;
  font-size: 15px;
  font-weight: 750;
  opacity: 1;
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
body .tab-btn[data-tab] .tab-icon { font-size: 27px; line-height: 1; color: inherit; flex-shrink: 0; }
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(125, 86, 86, .07); }
body .tab-btn[data-tab].active {
  color: #4a2a2a;
  border-color: rgba(var(--tab-rgb), .5);
  border-top-color: rgba(255, 255, 255, .95);
  background-color: rgba(125, 86, 86, .12);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(125, 86, 86, .14),
    0 0 0 1px rgba(var(--tab-rgb), .6), 0 4px 7px -2px rgba(61, 43, 43, .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(61, 43, 43, .06);
  border-color: rgba(61, 43, 43, .14);
}
body .tab-btn[data-tab].active .tab-count {
  color: #4a2a2a;
  background: rgba(125, 86, 86, .12);
  border-color: rgba(125, 86, 86, .4);
}

/* ── Escuro ── */
[data-theme="dark"] body .tab-btn[data-tab] {
  --tab-rgb: 217, 167, 167;
  color: var(--text);
  border-color: rgba(217, 167, 167, .18);
  border-top-color: rgba(226, 232, 240, .32);
  border-left-color: rgba(226, 232, 240, .25);
  border-bottom-color: rgba(217, 167, 167, .14);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(226, 232, 240, .10), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(226, 232, 240, .07), transparent 40%),
    linear-gradient(135deg, rgba(217, 167, 167, .045), rgba(217, 167, 167, .015) 55%, rgba(217, 167, 167, .05));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(226, 232, 240, .26), inset 1px 0 1px rgba(226, 232, 240, .10),
    inset 0 -1px 1px rgba(226, 232, 240, .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(217, 167, 167, .07); }
[data-theme="dark"] body .tab-btn[data-tab].active {
  color: var(--text);
  border-color: rgba(217, 167, 167, .8);
  background-color: rgba(217, 167, 167, .14);
  box-shadow: inset 0 1px 2px rgba(226, 232, 240, .38), inset 0 -1px 1px rgba(226, 232, 240, .2),
    0 0 0 1px rgba(217, 167, 167, .7), 0 3px 7px -2px rgba(0, 0, 0, .3);
}
[data-theme="dark"] body .tab-btn[data-tab] .tab-count,
[data-theme="dark"] body .tab-btn[data-tab].active .tab-count {
  color: var(--text);
  background: rgba(217, 167, 167, .12);
  border-color: rgba(217, 167, 167, .2);
}
body .tab-btn[data-tab]:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { body .tab-btn[data-tab] { transition: none; } }

/* ── Barra única: a marca da faixa sai (a logo está na lateral) e a direita vazia some ── */
body.mf-shell-on .tabs > .tabs-brand { display: none; }
body.mf-shell-on .tabs-right:not(:has(#topbarRight > *)) { display: none; }

/* ── Notebook (761–1499px): as 6 abas dividem a linha, sem rolagem lateral ── */
@media (min-width: 761px) and (max-width: 1499px) {
  body .tabs { 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; }
}
/* Tablet (761–1199px): nome curto (data-short), com o ícone antes dele. */
@media (min-width: 761px) and (max-width: 1199px) {
  body .tabs .tab-btn[data-tab] > .tab-label { display: none; }
  body .tabs .tab-btn[data-tab]::before { content: attr(data-short); }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; }
}

/* ── Celular (≤760px): as 6 abas numa linha — ícone EM CIMA, nome curto embaixo;
   contador vira selinho no canto (não come largura). ── */
@media (max-width: 760px) {
  body .tabs { column-gap: 4px; row-gap: 8px; padding: 10px 6px 8px; flex-wrap: wrap; }
  body.mf-shell-on .tabs::after { display: none; }
  body .tabs .tab-btn[data-tab] {
    zoom: 1; position: relative; overflow: visible;
    flex: 1 1 0; min-width: 0; min-height: 50px; padding: 6px 1px 5px;
    flex-direction: column; justify-content: center; gap: 2px;
    font-size: 10px; letter-spacing: -.02em; border-radius: 12px; white-space: nowrap;
  }
  body .tabs .tab-btn[data-tab] > .tab-label { display: none; }
  body .tabs .tab-btn[data-tab]::before { content: attr(data-short); order: 2; }
  body .tabs .tab-btn[data-tab] .tab-icon { display: block; 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; border-radius: 99px; text-align: center; background: var(--surface2) !important; }
  body .tabs .tab-btn[data-tab] .tab-count:empty { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ABAS DENTRO DA BARRA DE CIMA (PC >1024px, porte comprecomigo/samara).
   A faixa própria das abas some e o calendário + cards ganham essa altura.
   Quem move os botões é _placeTabsInTop() no anuncios.html; tablet/celular
   seguem com a faixa e os nomes curtos.
   ═══════════════════════════════════════════════════════════════════════ */
body.mf-shell-on .tabs { top: var(--anntop-h, var(--mf-top-h, 60px)) !important; }
body.ann-tabs-in-top .tabs { display: none !important; }
body.ann-tabs-in-top .mf-top__spacer { display: none; }
/* Abas + busca num grupo só, encostados (pedido do dono): as abas empurram pra direita
   (margin-left:auto) e a busca vem logo depois, com o mesmo espaçamento entre os botões. */
.ann-toptabs {
  flex: 0 1 auto; margin-left: auto; min-width: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding: 0 4px;
}
.ann-toptabs::-webkit-scrollbar { display: none; }
/* Botões compactos na barra (pedido do dono: menores, pra caber a busca ao lado) */
body .ann-toptabs .tab-btn[data-tab] {
  zoom: 1; flex-shrink: 0; min-height: 34px; padding: 3px 10px; gap: 6px;
  font-size: 12px; border-radius: 12px; white-space: nowrap;
}
body .ann-toptabs .tab-btn[data-tab] .tab-icon { font-size: 17px; }
body .ann-toptabs .tab-btn[data-tab]::after { display: none; }
body .ann-toptabs .tab-count { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
/* Busca na barra: a da aba Ativos sobe; as das outras abas somem (são sincronizadas) e a
   faixa da busca que ficar vazia some — os cards colam na barra. */
body.ann-search-moved .ann-search-row .tabs-search { display: none !important; }
body.ann-search-moved .ann-search-row:not(:has(> :not(.tabs-search))) { display: none !important; }
body .mf-top .tabs-search.ann-topsearch { margin-left: -4px; flex: 0 1 300px; width: 300px !important; min-width: 200px; height: 40px; }
/* Notebook: a saudação da direita sai antes das abas apertarem; abaixo de
   1500px os botões usam o nome curto com o ícone. */
@media (max-width: 1699px) { body.ann-tabs-in-top .mf-top__who, body.ann-tabs-in-top .mf-top__sep { display: none; } }
@media (max-width: 1499px) {
  body .ann-toptabs { gap: 5px; }
  body .ann-toptabs .tab-btn[data-tab] { padding: 3px 8px; }
  body .ann-toptabs .tab-btn[data-tab] > .tab-label { display: none; }
  body .ann-toptabs .tab-btn[data-tab]::before { content: attr(data-short); order: 0; }
  body .ann-toptabs .tab-btn[data-tab] .tab-icon { order: -1; }
  body .mf-top .tabs-search.ann-topsearch { flex-basis: 240px; width: 240px !important; }
}
@media (max-width: 1199px) {
  body .mf-top .tabs-search.ann-topsearch { flex-basis: 190px; width: 190px !important; min-width: 160px; }
  body .ann-toptabs .tab-count { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR/TABLET no padrão da Micarla (pedido do dono, 09/10/2026):
   abas só com o NOME (sem ícone), contador em selinho no canto; a busca larga
   na linha de baixo da faixa; o calendário vem logo depois. Faixa em cartão.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.ann-search-moved .tabs::after { content: ''; order: 5; flex-basis: 100%; height: 0; display: block !important; }
  body .tabs > .tabs-search.ann-tabsearch { order: 6; flex: 1 1 100% !important; width: auto !important; max-width: 560px; margin: 0 auto; height: 42px; }
  body.ann-search-moved .tabs { flex-wrap: wrap; row-gap: 10px; }
}
@media (max-width: 760px) {
  body.mf-shell-on .tabs {
    margin: 8px 8px 6px; padding: 12px 8px 10px !important; column-gap: 5px; row-gap: 10px;
    border-radius: 18px; border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 8px 22px -14px rgba(61, 43, 43, .45);
    justify-content: space-between;
  }
  body .tabs .tab-btn[data-tab] {
    flex-direction: row; min-height: 40px; padding: 6px 2px; font-size: 11.5px; border-radius: 13px;
  }
  body .tabs .tab-btn[data-tab] .tab-icon { display: none; }
  body .tabs .tab-btn[data-tab]::before { order: 0; }
  body .tabs > .tabs-search.ann-tabsearch { max-width: none; height: 40px; }
}