/* ============================================================
   React Bits — vanilla port (JS + CSS stack)
   https://reactbits.dev
   Componentes portados: Aurora, SplitText, BlurText, ShinyText,
   GradientText, CountUp, SpotlightCard, GlareHover, StarBorder,
   ClickSpark, AnimatedContent, FadeContent.
   Sem build step — carregado direto no index.html.
   ============================================================ */

:root {
    --rb-brand-300: #4FD1C5;
    --rb-brand-400: #38B2AC;
    --rb-brand-500: #0D9488;
    --rb-brand-600: #0F766E;
    --rb-spot-color: 13, 148, 136;
    --rb-spot-alpha: 0.10;
    --rb-glare-color: 255, 255, 255;
    --rb-glare-alpha: 0.35;
    --rb-glow-strength: 1;
    --rb-ease: cubic-bezier(.22, 1, .36, 1);
}

.dark {
    --rb-spot-alpha: 0.16;
    --rb-glare-alpha: 0.12;
}

.midnight {
    --rb-spot-alpha: 0.20;
    --rb-glare-alpha: 0.10;
}

/* ─────────────────────────── Aurora ───────────────────────────
   Fundo animado. O canvas roda em baixa resolução e o blur é
   feito em CSS — custo de GPU baixo, visual idêntico ao efeito
   WebGL original. */

.rb-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.rb-aurora canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: blur(38px) saturate(1.25);
    /* Estende o canvas além do recorte para o blur não clarear as bordas */
    transform: scale(1.15);
    opacity: 0;
    transition: opacity 1.1s ease;
    will-change: opacity;
}

.rb-aurora canvas.rb-aurora-ready {
    opacity: 0.85;
}

.dark .rb-aurora canvas.rb-aurora-ready {
    opacity: 0.65;
}

.midnight .rb-aurora canvas.rb-aurora-ready {
    opacity: 0.5;
}

/* Garante que o conteúdo fique acima do fundo animado */
.rb-aurora-host {
    position: relative;
}

.rb-aurora-host > *:not(.rb-aurora) {
    position: relative;
    z-index: 1;
}

/* ─────────────────────── SplitText / BlurText ─────────────────
   Revelação de texto caractere a caractere (SplitText) ou
   palavra a palavra com desfoque (BlurText). */

.rb-split,
.rb-blur-text {
    display: inline-block;
}

.rb-split-char,
.rb-blur-word {
    display: inline-block;
    white-space: pre;
    will-change: transform, opacity, filter;
}

.rb-split-char {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s var(--rb-ease), transform .55s var(--rb-ease);
}

.rb-blur-word {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(12px);
    transition: opacity .6s ease, filter .6s ease, transform .6s var(--rb-ease);
}

.rb-split.rb-in .rb-split-char,
.rb-blur-text.rb-in .rb-blur-word {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ─────────────────────────── ShinyText ────────────────────────
   Brilho que percorre o texto continuamente. */

.rb-shiny {
    background: linear-gradient(120deg,
        currentColor 35%,
        rgba(255, 255, 255, .95) 50%,
        currentColor 65%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rb-shine 4.5s linear infinite;
}

.dark .rb-shiny {
    background-image: linear-gradient(120deg,
        currentColor 35%,
        rgba(255, 255, 255, .75) 50%,
        currentColor 65%);
}

@keyframes rb-shine {
    0%   { background-position: 180% 0; }
    100% { background-position: -80% 0; }
}

/* ────────────────────────── GradientText ──────────────────────
   Preenchimento com gradiente animado da marca. */

.rb-gradient-text {
    background: linear-gradient(90deg,
        var(--rb-brand-600), var(--rb-brand-400),
        var(--rb-brand-300), var(--rb-brand-400), var(--rb-brand-600));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rb-gradient-pan 7s linear infinite;
}

@keyframes rb-gradient-pan {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ───────────────────────── SpotlightCard ──────────────────────
   Halo radial que acompanha o cursor sobre o cartão. */

.rb-spotlight {
    position: relative;
    isolation: isolate;
}

.rb-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(
        320px circle at var(--rb-mx, 50%) var(--rb-my, 50%),
        rgba(var(--rb-spot-color), var(--rb-spot-alpha)),
        transparent 62%);
    z-index: 2;
}

.rb-spotlight.rb-spot-on::after {
    opacity: 1;
}

/* Borda que acende junto com o halo */
.rb-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    padding: 1px;
    background: radial-gradient(
        260px circle at var(--rb-mx, 50%) var(--rb-my, 50%),
        rgba(var(--rb-spot-color), .55),
        transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    z-index: 3;
}

.rb-spotlight.rb-spot-on::before {
    opacity: 1;
}

/* ────────────────────────── GlareHover ────────────────────────
   Lâmina de luz diagonal que cruza o botão no hover. */

.rb-glare {
    position: relative;
    overflow: hidden;
}

.rb-glare > .rb-glare-sheen {
    position: absolute;
    top: -60%;
    left: -80%;
    width: 45%;
    height: 220%;
    pointer-events: none;
    transform: rotate(18deg) translateX(0);
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--rb-glare-color), var(--rb-glare-alpha)),
        transparent);
    transition: transform .75s var(--rb-ease);
    z-index: 1;
}

.rb-glare:hover > .rb-glare-sheen,
.rb-glare:focus-visible > .rb-glare-sheen {
    transform: rotate(18deg) translateX(430%);
}

/* ────────────────────────── StarBorder ────────────────────────
   Dois pontos de luz percorrendo a borda superior e inferior. */

.rb-star-border {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.rb-star-border > .rb-star-top,
.rb-star-border > .rb-star-bottom {
    position: absolute;
    width: 300%;
    height: 50%;
    pointer-events: none;
    opacity: .7;
    z-index: 0;
}

.rb-star-border > .rb-star-top {
    top: -11px;
    right: -250%;
    background: radial-gradient(circle, var(--rb-brand-300), transparent 12%);
    animation: rb-star-move-top 6s linear infinite alternate;
}

.rb-star-border > .rb-star-bottom {
    bottom: -11px;
    left: -250%;
    background: radial-gradient(circle, var(--rb-brand-300), transparent 12%);
    animation: rb-star-move-bottom 6s linear infinite alternate;
}

.rb-star-border > *:not(.rb-star-top):not(.rb-star-bottom) {
    position: relative;
    z-index: 1;
}

@keyframes rb-star-move-top {
    0%   { transform: translate(0, 0); opacity: .5; }
    100% { transform: translate(-100%, 0); opacity: 1; }
}

@keyframes rb-star-move-bottom {
    0%   { transform: translate(0, 0); opacity: .5; }
    100% { transform: translate(100%, 0); opacity: 1; }
}

/* ─────────────────── AnimatedContent / FadeContent ────────────
   Entrada dos blocos ao aparecerem na viewport. */

.rb-animate {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition:
        opacity .6s var(--rb-ease),
        transform .6s var(--rb-ease);
    will-change: transform, opacity;
}

.rb-animate.rb-in {
    opacity: 1;
    transform: none;
}

.rb-fade {
    opacity: 0;
    transition: opacity .7s ease;
}

.rb-fade.rb-in {
    opacity: 1;
}

/* ─────────────────────── InfiniteMenu ─────────────────────────
   Esfera de itens em CSS 3D. Abre por cima de tudo; arraste gira,
   o item da frente ganha destaque e um clique nele navega. */

.rb-imenu {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: none;
    background: rgba(248, 250, 252, .92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    outline: none;
}

.dark .rb-imenu { background: rgba(2, 6, 23, .93); }
.midnight .rb-imenu { background: rgba(0, 0, 0, .95); }

.rb-imenu.rb-imenu-open { display: block; }

.rb-imenu-stage {
    position: absolute;
    inset: 0;
    perspective: 1100px;
    cursor: grab;
    touch-action: none;
}

.rb-imenu-stage:active { cursor: grabbing; }

.rb-imenu-sphere {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}

.rb-imenu-tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 108px;
    height: 108px;
    margin: -54px 0 0 -54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    background: none;
    cursor: pointer;
    will-change: transform, opacity;
}

.rb-imenu-face {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 26px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 10px 28px -8px rgba(15, 23, 42, .55);
    transition: box-shadow .25s ease, outline-color .25s ease;
    outline: 2px solid transparent;
    outline-offset: 3px;
}

/* A imagem cobre o ícone; se falhar ao carregar, o ícone reaparece */
.rb-imenu-face {
    position: relative;
}

.rb-imenu-face img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: inherit;
}

/* Formato das peças: quadrado arredondado (padrão) ou redondo.
   O overflow:hidden da face recorta o conteúdo junto, então o selo de
   marca e a logo acompanham o formato sem precisar de regra própria. */
.rb-imenu-shape-circle .rb-imenu-face { border-radius: 50%; }

/* O selo de marca é reaproveitado aqui, só que maior */
.rb-imenu-face .mp-logo {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    box-shadow: none;
    font-size: 22px;
}

.rb-imenu-cap {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: #334155;
    opacity: .75;
}

.dark .rb-imenu-cap { color: #CBD5E1; }

.rb-imenu-focused .rb-imenu-face {
    outline-color: rgba(var(--rb-spot-color), .9);
    box-shadow: 0 14px 40px -6px rgba(var(--rb-spot-color), .65);
}

.rb-imenu-focused .rb-imenu-cap { opacity: 1; }

.rb-imenu-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 42px;
    text-align: center;
    padding: 0 24px;
    pointer-events: none;
}

.rb-imenu-title {
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 4px;
}

.dark .rb-imenu-title { color: #F1F5F9; }

.rb-imenu-desc {
    font-size: 13px;
    color: #64748B;
    margin: 0 0 10px;
    min-height: 18px;
}

.rb-imenu-hint {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
}

.rb-imenu-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
    background: rgba(15, 23, 42, .07);
}

.dark .rb-imenu-close { color: #CBD5E1; background: rgba(255, 255, 255, .09); }

.rb-imenu-close:hover { background: rgba(var(--rb-spot-color), .18); }

/* Gatilho que abre a esfera quando este é o menu escolhido */
.rb-imenu-trigger {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: var(--rb-brand-500);
    box-shadow: 0 12px 32px -8px rgba(var(--rb-spot-color), .75);
}

body.rb-menu-infinite .rb-imenu-trigger { display: flex; }
body.rb-menu-infinite #sidebar,
body.rb-menu-infinite #sidebar-overlay { display: none !important; }
body.rb-menu-infinite #main-area { margin-left: 0 !important; }
body.rb-menu-infinite #main-content { padding-bottom: 90px; }
body.rb-menu-infinite #hamburger-button { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .rb-imenu-tile { transition: none; }
}

/* ───────────────── Selos das plataformas (marketplaces) ───────
   Quadrado com a cor oficial da plataforma. Se `logo` estiver
   preenchido em MARKETPLACE_BRANDS, a imagem cobre o selo; se ela
   falhar ao carregar, o monograma por baixo continua valendo. */

.mp-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 5px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
}

.mp-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: inherit;
}

/* ─────────────────────── PulsatingButton ──────────────────────
   Porta do <PulsatingButton/> do MagicUI: ondas de luz saindo da
   borda para chamar atenção.

   Duas diferenças em relação ao original, ambas deliberadas:

   1) A animação vai no PRÓPRIO botão, não num <span> filho. Os
      botões daqui recebem `.rb-glare`, que tem overflow:hidden — o
      box-shadow de um filho seria recortado. O box-shadow do
      próprio elemento não é afetado pelo overflow dele.

   2) A cor vem de --rb-pulse-color (que segue a cor de destaque)
      em vez de `oklch(from var(--bg) …)`. Cor relativa em oklch
      ainda não é suportada em todo lugar, e cairia para nada. */

.rb-pulse {
    --rb-pulse-duration: 1.6s;
    --rb-pulse-distance: 9px;
    --rb-pulse-color: var(--rb-spot-color, 13, 148, 136);
    animation: rb-pulse var(--rb-pulse-duration) ease-out infinite;
}

@keyframes rb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rb-pulse-color), .55); }
    50%      { box-shadow: 0 0 0 var(--rb-pulse-distance) rgba(var(--rb-pulse-color), 0); }
}

/* Variante ripple: onda única expandindo e sumindo */
.rb-pulse-ripple {
    animation-name: rb-pulse-ripple;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@keyframes rb-pulse-ripple {
    0%   { box-shadow: 0 0 0 0 rgba(var(--rb-pulse-color), .75); }
    100% { box-shadow: 0 0 0 var(--rb-pulse-distance) rgba(var(--rb-pulse-color), 0); }
}

/* Ao passar o cursor a pulsação para: o usuário já achou o botão */
.rb-pulse:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .rb-pulse { animation: none; }
}

/* ──────────────────────── SpecularButton ──────────────────────
   Traço de luz que percorre a borda seguindo o cursor. Aplicado
   aos botões e aos itens da dock SEM tocar nas cores deles — só
   acrescenta o reflexo por cima. */

.rb-specular {
    position: relative;
    isolation: isolate;
}

/* Traço na borda: o conic-gradient nasce no ângulo do cursor, com
   queda simétrica para os dois lados. */
.rb-specular::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--spec-thickness, 1px);
    pointer-events: none;
    z-index: 6;
    opacity: var(--spec-intensity, 0);
    transition: opacity .3s ease;
    background: conic-gradient(from var(--spec-angle, 0deg),
        rgba(var(--spec-line, 255, 255, 255), .95) 0deg,
        rgba(var(--spec-line, 255, 255, 255), .35) var(--spec-shine, 10deg),
        transparent var(--spec-fade, 40deg),
        transparent calc(360deg - var(--spec-fade, 40deg)),
        rgba(var(--spec-line, 255, 255, 255), .35) calc(360deg - var(--spec-shine, 10deg)),
        rgba(var(--spec-line, 255, 255, 255), .95) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* Brilho suave na superfície, do lado de onde vem a luz */
.rb-specular::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    opacity: var(--spec-intensity, 0);
    transition: opacity .3s ease;
    background: radial-gradient(140% 130% at var(--spec-x, 50%) var(--spec-y, 0%),
        rgba(var(--spec-line, 255, 255, 255), .20) 0%,
        transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
    .rb-specular::before,
    .rb-specular::after { display: none; }
}

/* ────────────────────────── MagicBento ────────────────────────
   Camada de efeitos aplicada aos cartões existentes (e aos itens
   da dock): brilho de borda por proximidade, holofote global,
   partículas, inclinação 3D, magnetismo e onda no clique.

   A cor vem de --rb-glow-color, que preferences.js mantém igual
   à cor de destaque escolhida pelo usuário. */

.rb-magic {
    position: relative;
    /* isolation cria contexto de empilhamento p/ o ::after não vazar */
    isolation: isolate;
}

/* Brilho de borda — anel fino que acende na direção do cursor */
.rb-magic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    z-index: 4;
    /* intensidade (proximidade do cursor) × força (ajuste do usuário) */
    opacity: calc(var(--rb-glow-intensity, 0) * var(--rb-glow-strength, 1));
    transition: opacity .28s ease;
    background: radial-gradient(
        var(--rb-glow-radius, 200px) circle at var(--rb-glow-x, 50%) var(--rb-glow-y, 50%),
        rgba(var(--rb-glow-color, 13, 148, 136), 0.85) 0%,
        rgba(var(--rb-glow-color, 13, 148, 136), 0.38) 32%,
        transparent 62%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.rb-magic-noborder::after { display: none; }

/* Preenchimento suave sob o conteúdo, acompanhando o cursor.
   z-index NEGATIVO de propósito: dentro do contexto de empilhamento
   criado por `isolation`, filhos negativos pintam DEPOIS do fundo do
   cartão e ANTES do conteúdo — assim o brilho nunca cobre números
   nem texto. Com z-index 0 ou maior, cobriria. */
.rb-magic-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: calc(var(--rb-glow-intensity, 0) * var(--rb-glow-strength, 1));
    transition: opacity .28s ease;
    background: radial-gradient(
        var(--rb-glow-radius, 200px) circle at var(--rb-glow-x, 50%) var(--rb-glow-y, 50%),
        rgba(var(--rb-glow-color, 13, 148, 136), 0.10) 0%,
        transparent 65%);
}

/* Camada que recorta partículas e ondas no formato do cartão.
   Também negativa: partículas passando por cima de valores em R$
   atrapalhariam a leitura. Elas aparecem em volta do texto. */
.rb-magic-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.rb-bento-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--rb-glow-color, 13, 148, 136), 1);
    box-shadow: 0 0 6px rgba(var(--rb-glow-color, 13, 148, 136), .7);
    pointer-events: none;
}

.rb-bento-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(var(--rb-glow-color, 13, 148, 136), .35) 0%,
        rgba(var(--rb-glow-color, 13, 148, 136), .14) 35%,
        transparent 70%);
}

/* Holofote global que percorre a tela */
.rb-bento-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 55;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .35s ease;
    /* Sem mix-blend-mode: `isolation:isolate` nos cartões limita os
       grupos de mesclagem, e o resultado ficava imperceptível. Alpha
       direto é previsível nos três temas. */
    background: radial-gradient(circle,
        rgba(var(--rb-glow-color, 13, 148, 136), .20) 0%,
        rgba(var(--rb-glow-color, 13, 148, 136), .09) 38%,
        transparent 70%);
}

.dark .rb-bento-spotlight {
    background: radial-gradient(circle,
        rgba(var(--rb-glow-color, 13, 148, 136), .30) 0%,
        rgba(var(--rb-glow-color, 13, 148, 136), .13) 38%,
        transparent 70%);
}

/* textAutoHide: some com o texto secundário no hover do cartão */
.rb-magic-autohide .rb-magic-fade {
    transition: opacity .25s ease;
}

.rb-magic-autohide:hover .rb-magic-fade { opacity: 0; }

/* Itens da dock recebem só brilho + onda: inclinação e magnetismo
   brigariam com a animação de largura/altura da ampliação. */
.rb-dock-item.rb-magic { transform-style: flat; }

@media (prefers-reduced-motion: reduce) {
    .rb-magic::after,
    .rb-magic-fill,
    .rb-bento-spotlight { display: none; }
    .rb-magic { transform: none !important; }
}

/* ─────────────────────────────  Dock  ─────────────────────────
   Barra flutuante com ampliação por proximidade do cursor. */

.rb-dock-outer {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    pointer-events: none;
    max-width: calc(100vw - 24px);
}

/* Sobe a dock quando o aviso de impersonação está na tela */
.rb-dock-outer.rb-dock-raised { bottom: 60px; }

.rb-dock-outer { width: max-content; }

/* Rolagem horizontal fica AQUI, não no painel.
   `overflow-x:auto` obriga o overflow-y a virar `auto` — se estivesse no
   painel, os ícones ampliados e os rótulos seriam cortados. O padding-top
   (calculado em JS) afasta a linha de corte para bem acima do painel. */
.rb-dock-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 54px 14px 6px;
    pointer-events: auto;
    scrollbar-width: none;
}

.rb-dock-scroll::-webkit-scrollbar { display: none; }

.rb-dock-panel {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 0 12px 10px;
    border-radius: 22px;
    width: max-content;
    margin: 0 auto;
    /* visível de propósito: o item ampliado ultrapassa o topo do painel */
    overflow: visible;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 18px 45px -12px rgba(15, 23, 42, .35);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
}

.rb-dock-panel::-webkit-scrollbar { display: none; }

.dark .rb-dock-panel {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 18px 45px -12px rgba(0, 0, 0, .65);
}

.midnight .rb-dock-panel {
    background: rgba(10, 10, 10, .85);
    border-color: #232323;
}

/* Alinhamento vertical dos ícones dentro do painel (prop `direction`) */
.rb-dock-dir-bottom { align-items: flex-end; }
.rb-dock-dir-middle { align-items: center; }
.rb-dock-dir-top    { align-items: flex-start; }

/* ── Variante macOS (MagicUI) ──
   Ícones redondos, painel mais baixo e translúcido. */
.rb-dock-panel.rb-dock-macos {
    gap: 8px;
    padding: 0 8px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(15, 23, 42, .14);
}

.dark .rb-dock-panel.rb-dock-macos {
    background: rgba(0, 0, 0, .10);
    border-color: rgba(255, 255, 255, .14);
}

.rb-dock-macos .rb-dock-item {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.rb-dock-macos .rb-dock-icon { font-size: calc(var(--rb-dock-size, 40px) * 0.42); }

.rb-dock-item {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, .06);
    color: #475569;
    cursor: pointer;
    will-change: width, height;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.dark .rb-dock-item {
    background: rgba(255, 255, 255, .08);
    color: #CBD5E1;
}

.rb-dock-item:hover,
.rb-dock-item:focus-visible {
    background: rgba(var(--rb-spot-color), .16);
    color: var(--rb-brand-600);
    outline: none;
}

.dark .rb-dock-item:hover,
.dark .rb-dock-item:focus-visible { color: var(--rb-brand-300); }

.rb-dock-item.rb-dock-active {
    background: rgba(var(--rb-spot-color), .20);
    border-color: rgba(var(--rb-spot-color), .55);
    color: var(--rb-brand-600);
}

.dark .rb-dock-item.rb-dock-active { color: var(--rb-brand-300); }

.rb-dock-icon {
    line-height: 1;
    /* Acompanha o tamanho do item conforme ele amplia */
    font-size: calc(var(--rb-dock-size, 50px) * 0.38);
    transition: font-size .05s linear;
}

.rb-dock-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    background: #0F172A;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.dark .rb-dock-label { background: #E2E8F0; color: #0F172A; }

.rb-dock-item:hover .rb-dock-label,
.rb-dock-item:focus-visible .rb-dock-label { opacity: 1; }

/* Badge (ex.: contador do Mural) */
.rb-dock-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #F43F5E;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

/* Modo dock: sidebar sai, conteúdo ganha respiro no rodapé */
body.rb-menu-dock #sidebar,
body.rb-menu-dock #sidebar-overlay { display: none !important; }

body.rb-menu-dock #main-area { margin-left: 0 !important; }

body.rb-menu-dock #main-content { padding-bottom: 110px; }

@media (prefers-reduced-motion: reduce) {
    .rb-dock-item { will-change: auto; }
}

/* Sem sidebar, o hambúrguer do topo mobile não tem o que abrir */
body.rb-menu-dock #hamburger-button { visibility: hidden; }

/* Seletor de marketplace do modo dock */
.rb-mp-popover {
    position: fixed;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    z-index: 61;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    max-height: 52vh;
    overflow-y: auto;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 18px 45px -12px rgba(15, 23, 42, .45);
}

.dark .rb-mp-popover { background: #1E293B; border-color: rgba(255, 255, 255, .10); }
.midnight .rb-mp-popover { background: #111; border-color: #232323; }

.rb-mp-popover button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: #334155;
    cursor: pointer;
}

.dark .rb-mp-popover button { color: #CBD5E1; }

.rb-mp-popover button:hover { background: rgba(var(--rb-spot-color), .14); }
.rb-mp-popover button i { width: 16px; text-align: center; opacity: .7; }
.rb-mp-popover button .mp-logo { width: 20px !important; height: 20px !important; }

/* Troca de filial pela dock */
.rb-filial-popover { min-width: 230px; }
.rb-filial-popover .rb-filial-on { background: rgba(var(--rb-spot-color), .16); }
.rb-filial-popover .rb-filial-on i { color: var(--rb-brand-500); opacity: 1; }

.rb-dock-filial {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: calc(var(--rb-dock-size, 50px) * 0.30);
}

/* Troca de filial dentro da esfera */
.rb-imenu-tools {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rb-imenu-tools-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94A3B8;
    margin-right: 2px;
}

.rb-imenu-filial {
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    color: #475569;
    background: rgba(15, 23, 42, .07);
    transition: background .18s ease, color .18s ease;
}

.dark .rb-imenu-filial { color: #CBD5E1; background: rgba(255, 255, 255, .09); }

.rb-imenu-filial:hover { background: rgba(var(--rb-spot-color), .18); }

.rb-imenu-filial-on {
    color: #fff;
    background: var(--rb-brand-500);
}

.dark .rb-imenu-filial-on { color: #fff; background: var(--rb-brand-500); }

/* ─────────────── Controles da página de Configurações ────────── */

.rb-swatch {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .2);
    transition: transform .15s var(--rb-ease), border-color .15s;
}

.rb-swatch i { opacity: 0; transition: opacity .15s; }
.rb-swatch:hover { transform: translateY(-2px); }
.rb-swatch-active { border-color: currentColor; }
.rb-swatch-active i { opacity: 1; }

.rb-fx-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s ease;
}

.rb-fx-row:hover { background: rgba(var(--rb-spot-color), .09); }

.rb-fx-row input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--rb-brand-500);
}

.rb-menu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px;
    border-radius: 14px;
    border: 2px solid rgb(226, 232, 240);
    background: rgb(248, 250, 252);
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .18s var(--rb-ease);
}

.dark .rb-menu-card {
    border-color: rgb(51, 65, 85);
    background: rgba(30, 41, 59, .6);
    color: #CBD5E1;
}

.rb-menu-card:hover { transform: translateY(-2px); }

/* Estado selecionado.
   Os seletores abaixo repetem `.dark`/`.midnight` de propósito: sem isso
   `.dark .rb-menu-card` (0,2,0) venceria `.rb-menu-card-active` (0,1,0) e
   o item escolhido ficaria idêntico aos outros nos temas escuros. */
.rb-menu-card-active,
.dark .rb-menu-card-active,
.midnight .rb-menu-card-active {
    border-color: var(--rb-brand-500);
    background: rgba(var(--rb-spot-color), .16);
    box-shadow: 0 0 0 3px rgba(var(--rb-spot-color), .20);
}

.dark .rb-menu-card-active,
.midnight .rb-menu-card-active { color: #F1F5F9; }

/* Selo de confirmação no canto — some quando o cartão não está ativo */
.rb-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
    color: var(--rb-brand-500);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .18s var(--rb-ease);
}

.rb-menu-card-active .rb-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Sub-opção que só aparece quando a Esfera 3D está escolhida */
.rb-subopt {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rb-subopt button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 10px;
    border: 2px solid rgb(226, 232, 240);
    background: rgb(248, 250, 252);
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}

.dark .rb-subopt button {
    border-color: rgb(51, 65, 85);
    background: rgba(30, 41, 59, .6);
    color: #CBD5E1;
}

.rb-subopt button.rb-subopt-on,
.dark .rb-subopt button.rb-subopt-on,
.midnight .rb-subopt button.rb-subopt-on {
    border-color: var(--rb-brand-500);
    background: rgba(var(--rb-spot-color), .16);
    color: var(--rb-brand-500);
}

/* Miniatura do formato do ícone */
.rb-subopt .rb-shape-demo {
    width: 15px;
    height: 15px;
    background: currentColor;
    opacity: .85;
}

.rb-subopt .rb-shape-rounded { border-radius: 4px; }
.rb-subopt .rb-shape-circle  { border-radius: 50%; }

/* ────────────────────────── ClickSpark ────────────────────────
   Canvas global de faíscas no clique. */

#rb-click-spark {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
}

/* ─────────────────────────── CountUp ──────────────────────────
   Leve destaque enquanto o número está contando. */

.rb-counting {
    font-variant-numeric: tabular-nums;
}

/* ──────────────────── Acessibilidade / desempenho ─────────────
   Respeita a preferência do sistema por menos movimento. */

@media (prefers-reduced-motion: reduce) {
    .rb-aurora { display: none; }
    .rb-shiny,
    .rb-gradient-text,
    .rb-star-border > .rb-star-top,
    .rb-star-border > .rb-star-bottom { animation: none; }
    .rb-shiny { -webkit-text-fill-color: currentColor; }
    .rb-split-char,
    .rb-blur-word,
    .rb-animate,
    .rb-fade {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
    .rb-glare > .rb-glare-sheen { display: none; }
}