/* Peças usadas pela página de links e pelas abas do blog: abas do topo, botão de compartilhar,
   aviso rápido e janela do QR code. As cores vêm das variáveis do tema da página de links. */
/* ---------- Cantos (compartilhar) ---------- */
.floats { position: relative; z-index: 60; }
.corner { position: fixed; z-index: 60; display: flex; gap: 8px; align-items: center; }
.corner--top-left { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
.corner--top-right { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); flex-direction: row-reverse; }
.corner--bottom-left { bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
.corner--bottom-right { bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); flex-direction: row-reverse; }
.corner .blk { margin: 0; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 11px;
  border-radius: 999px; cursor: pointer; color: var(--c-text);
  background: color-mix(in srgb, var(--c-cardBg) 82%, transparent); border: 1px solid var(--c-cardBorder);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgb(0 0 0 / .2); font: 600 13px var(--f-body);
}
.share-btn .ico { width: 19px; height: 19px; }

/* ---------- Abas no topo (Links · Blog · Mural) ---------- */
.tabs { position: relative; z-index: 50; padding: max(12px, env(safe-area-inset-top)) 64px 4px; }
.tabs-sticky .tabs { position: sticky; top: 0; }
.tabs-in { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: var(--blog-w, 680px); margin: 0 auto; }
.tabs-al-left .tabs-in { justify-content: flex-start; }
.tabs-al-right .tabs-in { justify-content: flex-end; }
.tab {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; text-decoration: none; cursor: pointer;
  font: 600 var(--tabs-size, 14px)/1.2 var(--f-button, var(--f-body)); letter-spacing: var(--btn-ls, 0); text-transform: var(--btn-transform, none);
  color: var(--c-tabText, var(--c-text)); transition: background .2s, color .2s, border-color .2s;
}
.tabs-pills .tabs-in { width: fit-content; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--c-tabBg, var(--c-cardBg)) 86%, transparent); border: 1px solid var(--c-cardBorder); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgb(0 0 0 / .18); }
.tabs-pills.tabs-al-center .tabs-in { margin: 0 auto; }
.tabs-pills.tabs-al-left .tabs-in { margin: 0 auto 0 max(0px, calc((100% - var(--blog-w, 680px)) / 2)); }
.tabs-pills.tabs-al-right .tabs-in { margin: 0 max(0px, calc((100% - var(--blog-w, 680px)) / 2)) 0 auto; }
.tabs-pills .tab { border-radius: 999px; }
.tabs-pills .tab.is-on { background: var(--c-tabActiveBg, var(--c-accent)); color: var(--c-tabActiveText, var(--c-accentText)); }
.tabs-underline .tabs-in { gap: 18px; border-bottom: 1px solid color-mix(in srgb, var(--c-cardBorder) 80%, transparent); }
.tabs-underline .tab { padding: 8px 2px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-underline .tab.is-on { color: var(--c-tabActiveBg, var(--c-accent)); border-color: var(--c-tabActiveBg, var(--c-accent)); }
.tabs-underline.tabs-sticky .tabs { background: linear-gradient(var(--c-bg) 70%, transparent); }
.tabs-buttons .tab { border-radius: var(--btn-radius, 14px); background: var(--c-tabBg, var(--c-btnBg)); border: var(--btn-bw, 1px) solid var(--c-btnBorder, transparent); box-shadow: var(--btn-shadow, none); }
.tabs-buttons .tab.is-on { background: var(--c-tabActiveBg, var(--c-accent)); color: var(--c-tabActiveText, var(--c-accentText)); border-color: transparent; }
.tabs-boxed .tabs-in { gap: 0; }
.tabs-boxed .tab { border: 1px solid var(--c-cardBorder); background: color-mix(in srgb, var(--c-tabBg, var(--c-cardBg)) 90%, transparent); border-radius: 0; margin-left: -1px; }
.tabs-boxed .tab:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.tabs-boxed .tab:last-child { border-radius: 0 10px 10px 0; }
.tabs-boxed .tab.is-on { background: var(--c-tabActiveBg, var(--c-accent)); color: var(--c-tabActiveText, var(--c-accentText)); border-color: var(--c-tabActiveBg, var(--c-accent)); position: relative; z-index: 1; }
@media (hover: hover) { .tab:not(.is-on):hover { color: var(--c-tabActiveBg, var(--c-accent)); } }
.tabs + .wrap { padding-top: calc(var(--pad-top, 40px) * .6); }


/* ---------- Aviso e janela de compartilhar ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 90;
  padding: 9px 16px; border-radius: 999px; background: var(--c-accent); color: var(--c-accentText); font: 600 14px var(--f-body);
  box-shadow: 0 8px 22px rgb(0 0 0 / .3); animation: toast-in .25s ease;
}
@keyframes toast-in { from { opacity: 0; translate: -50% 10px; } }
.sheet-wrap { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; background: rgb(0 0 0 / .5); animation: fade-in .2s ease; }
@media (min-width: 600px) { .sheet-wrap { align-items: center; } }
@keyframes fade-in { from { opacity: 0; } }
.sheet {
  width: min(420px, 100%); margin: 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: var(--c-cardBg); color: var(--c-text); border: 1px solid var(--c-cardBorder);
  box-shadow: 0 -10px 40px rgb(0 0 0 / .35); text-align: center; animation: sheet-up .25s ease;
}
@media (min-width: 600px) { .sheet { border-radius: 22px; } }
@keyframes sheet-up { from { translate: 0 30px; opacity: .4; } }
.sheet h2 { margin: 0 0 14px; font-family: var(--f-heading); font-style: var(--heading-style); color: var(--c-heading); font-size: 1.4em; font-weight: var(--heading-weight); }
.sheet .qr { width: 196px; height: 196px; margin: 0 auto 14px; padding: 10px; background: #fff; border-radius: 14px; }
.sheet .qr svg, .sheet .qr img { width: 100%; height: 100%; display: block; }
.sheet-url { display: block; margin: 0 0 14px; color: var(--c-muted); font-size: 13px; overflow-wrap: anywhere; }
.sheet-actions { display: flex; flex-direction: column; gap: 8px; }
.sheet-actions button { min-height: 46px; border-radius: 14px; border: 1px solid var(--c-btnBorder); background: var(--btn-bg); color: var(--c-btnText); font: 600 15px var(--f-body); cursor: pointer; }
.sheet-actions button.primary { background: var(--c-accent); color: var(--c-accentText); border-color: transparent; }