/* Abas de Anúncios em botões de vidro com ícone + busca em pílula com lupa
   (porte JHEMILLY b2fff9d/67ca219/ca18da7 · comprecomigo, 19/10/2026) nas cores da Anna.
   A Anna não tem a lateral/shell: abas e busca ficam na própria faixa .tabs (sticky).
   Degraus de largura:
     ≥1700  abas com nome inteiro, centralizadas; busca ancorada à direita
     1280–1699  nome inteiro, busca na MESMA linha ocupando o que sobra
     1025–1279  nome curto (data-short), busca na mesma linha
     761–1024   nome curto dividindo a linha; busca na 2ª linha, largura toda
     ≤760       6 abas numa linha (ícone em cima, nome curto, contador em selinho); busca embaixo */

body .tabs {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
  padding: 9px 16px; min-height: 58px; overflow: visible;
  border-bottom: 1px solid var(--border);
}

body .tab-btn[data-tab] {
  --glass: 120, 170, 230;
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--glass), .2);
  border-top-color: rgba(var(--glass), .38);
  border-left-color: rgba(var(--glass), .3);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--glass), .14), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(var(--glass), .08), transparent 40%),
    linear-gradient(135deg, rgba(var(--glass), .06), rgba(var(--glass), .02) 55%, rgba(var(--glass), .06));
  box-shadow: inset 0 1px 1px rgba(var(--glass), .3), inset 0 -1px 1px rgba(var(--glass), .12),
    0 3px 6px -2px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--text-muted);
  font-size: 13px; font-weight: 750; line-height: 1.1;
  white-space: nowrap; opacity: 1;
  transition: background-color .18s, box-shadow .18s, color .18s, transform .12s;
}
body .tab-btn[data-tab]:hover { color: var(--text); background-color: rgba(120, 170, 230, .08); }
body .tab-btn[data-tab]:active { transform: scale(.97); }
body .tab-btn[data-tab].active {
  color: var(--text);
  border-color: rgba(62, 143, 208, .7);
  background-color: rgba(62, 143, 208, .16);
  box-shadow: inset 0 1px 2px rgba(160, 205, 245, .45), 0 0 0 1px rgba(62, 143, 208, .25),
    0 4px 12px -3px rgba(62, 143, 208, .45);
}
body .tab-btn[data-tab]:focus-visible { outline: 3px solid #3E8FD0; outline-offset: 2px; }
body .tab-btn[data-tab] .tab-icon { width: 20px; height: 20px; flex-shrink: 0; display: block; color: inherit; }
body .tab-btn[data-tab].active .tab-icon { color: #6FB3EA; }
body .tab-btn[data-tab] .tab-count {
  color: inherit; background: rgba(120, 170, 230, .14); border-color: rgba(120, 170, 230, .3);
}
body .tab-btn[data-tab].active .tab-count { color: #CFE6FA; background: rgba(62, 143, 208, .35); border-color: rgba(111, 179, 234, .6); }
body .tab-btn[data-tab] .tab-count:empty { display: none; }
body .tab-btn[data-tab] > span:not(.tab-count) { overflow: hidden; text-overflow: ellipsis; }

/* Claro (ondas azuis): vidro branco, texto navy */
[data-theme="light"] body .tab-btn[data-tab] {
  --glass: 255, 255, 255;
  color: #2A4560;
  border-color: rgba(255, 255, 255, .5);
  border-top-color: rgba(255, 255, 255, .85);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, .5), transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, .32));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 3px 6px -2px rgba(26, 40, 64, .22);
  backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
[data-theme="light"] body .tab-btn[data-tab]:hover { color: #1A2840; background-color: rgba(255, 255, 255, .3); }
[data-theme="light"] body .tab-btn[data-tab].active {
  color: #1A2840; border-color: rgba(42, 114, 180, .65); background-color: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 2px #fff, 0 0 0 1px rgba(42, 114, 180, .25), 0 4px 10px -3px rgba(26, 40, 64, .3);
}
[data-theme="light"] body .tab-btn[data-tab].active .tab-icon { color: #2A72B4; }
[data-theme="light"] body .tab-btn[data-tab] .tab-count { background: rgba(255, 255, 255, .55); border-color: rgba(26, 40, 64, .15); }
[data-theme="light"] body .tab-btn[data-tab].active .tab-count { color: #fff; background: #2A72B4; border-color: #2A72B4; }

/* ── Busca: pílula de vidro, lupa num botão azul à direita ─────────────── */
body #tabsSearchWrap {
  position: static; transform: none; padding: 0;
  flex: 1 1 220px; min-width: 200px; max-width: 360px; margin-left: auto;
  display: flex; align-items: center;
}
body .ann-searchbar {
  position: relative; display: flex; align-items: center; width: 100%; height: 40px;
  padding: 0 3px 0 12px; gap: 6px; border-radius: 999px;
  border: 1px solid rgba(120, 170, 230, .22);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08), 0 4px 12px -6px rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body .ann-searchbar:focus-within {
  border-color: rgba(62, 143, 208, .7); background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(62, 143, 208, .18);
}
body .ann-searchbar__ico { flex-shrink: 0; color: var(--text-muted); opacity: .75; }
body .ann-searchbar .ann-search {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: none; outline: none; background: transparent;
  color: var(--text); font-size: 13.5px; font-weight: 600;
}
body .ann-searchbar .ann-search::placeholder { color: var(--text-muted); opacity: .7; font-weight: 500; }
body .ann-searchbar__clear {
  display: none; flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1;
}
body .ann-searchbar__clear:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
body .ann-searchbar .ann-search:not(:placeholder-shown) ~ .ann-searchbar__clear { display: grid; place-items: center; }
body .ann-searchbar__btn {
  flex-shrink: 0; width: 42px; height: 34px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(135deg, #3E8FD0, #2A72B4); color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 2px 6px -2px rgba(0, 0, 0, .4);
  transition: filter .15s, transform .12s;
}
body .ann-searchbar__btn:hover { filter: brightness(1.1); }
body .ann-searchbar__btn:active { transform: scale(.95); }
body .ann-searchbar__btn:focus-visible { outline: 2px solid #6FB3EA; outline-offset: 2px; }
[data-theme="light"] body .ann-searchbar { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 1px #fff, 0 4px 12px -6px rgba(26, 40, 64, .35); }
[data-theme="light"] body .ann-searchbar:focus-within { background: rgba(255, 255, 255, .8); border-color: rgba(42, 114, 180, .6); }
[data-theme="light"] body .ann-searchbar__ico,
[data-theme="light"] body .ann-searchbar .ann-search::placeholder { color: #2A4560; }
[data-theme="light"] body .ann-searchbar .ann-search { color: #1A2840; }

/* ── ≥1700: centralizadas, busca ancorada à direita ─────────────────────── */
@media (min-width: 1700px) {
  body .tabs { justify-content: center; }
  body #tabsSearchWrap { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 340px; max-width: none; margin: 0; }
}
/* ── 1280–1699: nome inteiro, busca na mesma linha ──────────────────────── */
@media (min-width: 1280px) and (max-width: 1699px) {
  body .tabs { justify-content: flex-start; }
}
/* ── ≤1279: nome curto ──────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  body .tab-btn[data-tab] > span:not(.tab-count) { display: none; }
  body .tab-btn[data-tab]::before { content: attr(data-short); order: 1; }
  body .tab-btn[data-tab] .tab-count { order: 2; }
  body .tab-btn[data-tab] { padding: 6px 11px; gap: 7px; }
}
/* ── 761–1024: abas dividem a linha; busca vai pra 2ª linha ─────────────── */
@media (min-width: 761px) and (max-width: 1024px) {
  body .tabs { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; padding: 9px 12px; }
  body .tab-btn[data-tab] { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: 12.5px; }
  body #tabsSearchWrap { flex: 1 0 100%; max-width: none; min-width: 0; margin: 0; }
}
/* ── Celular ≤760: 6 numa linha, ícone em cima, contador em selinho ─────── */
@media (max-width: 760px) {
  body .tabs { flex-wrap: wrap; justify-content: space-between; column-gap: 4px; row-gap: 9px; padding: 10px 8px 9px; }
  body .tab-btn[data-tab] {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
    min-height: 50px; padding: 5px 1px; border-radius: 12px;
    font-size: 10.5px; letter-spacing: -.02em; overflow: visible;
  }
  body .tab-btn[data-tab]::before { order: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body .tab-btn[data-tab] .tab-icon { width: 19px; height: 19px; }
  body .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;
    background: var(--surface2, var(--surface)) !important; border: 1px solid var(--border);
  }
  body .tab-btn[data-tab].active .tab-count { background: #2A72B4 !important; color: #fff; border-color: #2A72B4; }
  body #tabsSearchWrap { flex: 1 0 100%; max-width: none; min-width: 0; margin: 0; }
  body .ann-searchbar { height: 40px; }
  body .ann-searchbar__btn { width: 46px; }
}
@media (max-width: 360px) {
  body .tab-btn[data-tab] { font-size: 9.5px; }
  body .tab-btn[data-tab] .tab-icon { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) { body .tab-btn[data-tab], body .ann-searchbar__btn { transition: none; } }