/* tabbar-7k.css — extraido de tabbar.php em 17/09/2026.
   POR QUE SAIU DE LA: o tabbar.php e incluido no FIM da pagina, entao este CSS ficava
   ~411 KB depois da marcacao do menu lateral (medido: menu no byte 187.898, a regra
   .sv-menu-cab no byte 599.482). O navegador desenhava o menu CRU — botao cinza do
   sistema e link azul sublinhado — e so restilizava ao chegar no fim do documento.
   Carregado no <head>, o estilo existe antes de qualquer coisa ser pintada.

   A ORDEM DOS DOIS BLOCOS FOI MANTIDA. O segundo trazia a nota: 'vem no FIM do arquivo
   de proposito: as regras antigas de .tabbar estao nas linhas 178-290 deste mesmo
   arquivo, e CSS de mesma especificidade que vem depois vence'. Inverter aqui
   quebraria a barra de baixo. */

/* ───── bloco 1 (era <style> na linha 143) ───── */
/* ========================================
   CORES PROFISSIONAIS (SEM GRADIENTES)
   ======================================== */
:root {
    --tabbar-bg: #101222;
    --tabbar-border: #1a0a30;
    --tabbar-item-active: #f9e30e;
    --tabbar-item-inactive: rgba(255,255,255,0.7);
    --tabbar-item-hover: #e0cc00;
    
    --chat-modal-bg: rgba(11,6,15, 0.98);
    --chat-container-bg: #16182a;
    --chat-header-bg: #101222;
    --chat-header-border: #1a0a30;
    --chat-message-bg: #101222;
    --chat-message-border: #1a0a30;
    --chat-input-bg: #101222;
    --chat-input-border: #1a0a30;
    --chat-input-focus: #f9e30e;
    --chat-send-btn: #f9e30e;
    --chat-send-btn-hover: #e0cc00;
    --chat-badge-bg: #f1416c;
    --chat-text-primary: #ffffff;
    --chat-text-secondary: #9a9a9a;
    --chat-text-muted: #624e74;
    --chat-system-bg: #101222;
    --chat-system-border: #1a0a30;
}

/* ========================================
   TABBAR NAVEGAÇÃO INFERIOR — clone PIXEL da betpontobet
   h-14 (56px) · bg #1c1e34 · borda white/10 · label 10px semibold
   inativo #fdffffb3 · ativo #f9e30e · justify-around
   ======================================== */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 56px;                                       /* h-14 */
    padding-bottom: env(safe-area-inset-bottom, 0px);   /* safe-area-bottom */
    background: #1c1e34;                                 /* bg-bg-secondary */
    border-top: 1px solid rgba(255, 255, 255, 0.1);     /* border-white/10 */
    display: none;
    justify-content: space-around;                      /* justify-around */
    align-items: center;
    /* Fica ACIMA do menu lateral e do véu dele (1500/1400), para não ficar fosca quando
       o menu abre — mas ABAIXO do painel da conta (2000/2001), que passa por cima dela. */
    z-index: 1600;
    box-shadow: none;
}

.tabbar-item {
    flex: 1;                                            /* flex-1 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;                                           /* gap-1.5 */
    height: 100%;                                       /* h-full */
    text-decoration: none;
    color: #fdffffb3;                                   /* text-texts/70 (inativo) */
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
    font-family: 'Montserrat', 'Montserrat Fallback', ui-sans-serif, system-ui, sans-serif;
}

.tabbar-item:active { opacity: 0.7; }

/* Área do ícone 22×22 (âncora p/ a bolinha ao vivo) */
.tabbar-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.tabbar-item svg { width: 22px; height: 22px; flex-shrink: 0; display: block; }

/* Label simples (Menu / Cassino / Esportes) */
.tabbar-label {
    font-size: 10px;                                    /* text-[10px] */
    font-weight: 600;                                   /* font-semibold */
    line-height: 1.25;                                   /* leading-tight */
}

/* Item ativo → laranja da marca (text-primary #f9e30e) */
.tabbar-item.active { color: #f9e30e; }
.tabbar-item:hover  { color: #f9e30e; }

/* Bolinha "AO VIVO" pulsante (canto sup. direito do ícone) */
.tabbar-dot {
    position: absolute;
    top: -2px;                                          /* -top-0.5 */
    right: -4px;                                        /* -right-1 */
    width: 6px;                                         /* h-1.5 / w-1.5 */
    height: 6px;
    border-radius: 9999px;
    animation: tabbar-live-pulse 1.5s infinite;
}
.tabbar-dot--red   { background: #ef4444; }
.tabbar-dot--green { background: #22bb33; }
@keyframes tabbar-live-pulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
}

/* Label ROLANDO — alterna "Cassino"↔"Ao Vivo" e "Esportes"↔"Ao Vivo" */
.tabbar-roll {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12px;                                       /* h-3 */
    width: 100%;
    overflow: hidden;
}
.tabbar-roll span {
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
.tabbar-roll .tr-a { animation: tabbar-roll-a 4s ease-in-out infinite; }
.tabbar-roll .tr-b { animation: tabbar-roll-b 4s ease-in-out infinite; }
@keyframes tabbar-roll-a {
    0%, 42%  { opacity: 1; transform: translateY(0); }
    50%, 92% { opacity: 0; transform: translateY(-8px); }
    100%     { opacity: 1; transform: translateY(0); }
}
@keyframes tabbar-roll-b {
    0%, 42%  { opacity: 0; transform: translateY(8px); }
    50%, 92% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .tabbar-dot { animation: none; }
    .tabbar-roll .tr-a { animation: none; opacity: 0; }
    .tabbar-roll .tr-b { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   MENU MOBILE (gaveta) — o botão "Menu" da tabbar abre a
   sidebar .bp-sb como drawer deslizante + overlay em < 1024px.
   No desktop (>=1024px) a .bp-sb continua sendo a sidebar fixa.
   ============================================================ */
.bp-sb-overlay { display: none; }
@media (max-width: 1023.98px) {
    .bp-sb {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        left: 0;
        top: 56px;                                      /* abaixo do header */
        width: min(86vw, 300px);
        height: calc(100dvh - 56px);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1500;
        background: var(--bg-body, #16182a);
        border-right: 1px solid var(--bg-card, #1c1e34);
        padding: 12px 12px calc(70px + env(safe-area-inset-bottom, 0px));  /* folga p/ a tabbar */
        font-family: var(--font-main, 'Montserrat', sans-serif);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
        -webkit-overflow-scrolling: touch;
    }
    html.sb-mobile-open .bp-sb {
        transform: translateX(0);
        visibility: visible;
    }
    .bp-sb-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 4, 15, .62);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s ease;
        z-index: 1400;
    }
    html.sb-mobile-open .bp-sb-overlay { opacity: 1; visibility: visible; }
    html.sb-mobile-open, html.sb-mobile-open body { overflow: hidden; }
}

/* Badge de notificações */
.chat-badge {
    position: absolute;
    top: 6px;
    right: 50%;
    transform: translateX(12px);
    background: var(--chat-badge-bg);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   MODAL CHAT AO VIVO
   ======================================== */
.chat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--chat-modal-bg);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: flex-end;
    animation: fadeIn 0.2s ease;
}

.chat-modal.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chat-container {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 60px);
    background: var(--chat-container-bg);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Header do Chat */
.chat-header {
    background: var(--chat-header-bg);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--chat-header-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-info i {
    font-size: 24px;
    color: var(--tabbar-item-active);
}

.chat-header-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--chat-text-primary);
    letter-spacing: 0.3px;
}

.chat-users-count {
    font-size: 12px;
    color: var(--chat-text-secondary);
    font-weight: 500;
}

.chat-close-btn {
    background: transparent;
    border: none;
    color: var(--chat-text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
}

.chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--chat-text-primary);
}

.chat-close-btn:active {
    transform: scale(0.95);
}

/* Área de Mensagens */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--chat-input-bg);
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--chat-input-border);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--chat-text-muted);
}

/* Mensagem do Sistema */
.chat-system-message {
    background: var(--chat-system-bg);
    border: 1px solid var(--chat-system-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--chat-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.chat-system-message i {
    color: var(--tabbar-item-active);
    font-size: 14px;
}

/* Mensagem de Usuário */
.chat-message {
    background: var(--chat-message-bg);
    border: 1px solid var(--chat-message-border);
    border-radius: 8px;
    padding: 12px 14px;
    animation: messageSlide 0.2s ease;
}

@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.chat-username {
    font-size: 13px;
    font-weight: 700;
    color: var(--tabbar-item-active);
    letter-spacing: 0.3px;
}

.chat-time {
    font-size: 11px;
    color: var(--chat-text-muted);
    font-weight: 500;
}

.chat-message-text {
    font-size: 14px;
    color: var(--chat-text-primary);
    line-height: 1.5;
    word-wrap: break-word;
    font-weight: 500;
}

/* Área de Input */
.chat-input-container {
    background: var(--chat-header-bg);
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--chat-header-border);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.chat-input {
    flex: 1;
    background: var(--chat-input-bg);
    border: 1px solid var(--chat-input-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--chat-text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.chat-input::placeholder {
    color: var(--chat-text-muted);
    font-weight: 500;
}

.chat-input:focus {
    outline: none;
    border-color: var(--chat-input-focus);
    box-shadow: 0 0 0 2px rgba(255, 70, 6, 0.1);
}

.chat-send-btn {
    background: var(--chat-send-btn);
    border: none;
    border-radius: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #101222;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.chat-send-btn:hover {
    background: var(--chat-send-btn-hover);
    transform: scale(1.05);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */
/* Barra aparece em < 1024px (igual ao lg:hidden da betpontobet; casa com a sidebar >=1024px) */
@media (max-width: 1023.98px) {
    .tabbar {
        display: flex;
    }
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 768px) {
    /* AJUSTES MOBILE PARA CHAT */
    .chat-container {
        height: calc(100vh - 80px); /* Reduzido de 60px para 80px */
        max-height: calc(100vh - 80px);
    }
    
    .chat-header {
        padding: 20px 20px 16px; /* Mais padding no topo */
        min-height: 70px; /* Altura mínima garantida */
    }
    
    .chat-modal {
        align-items: flex-start; /* Começar do topo */
        padding-top: 20px; /* Espaço do topo da tela */
    }
}

@media (min-width: 769px) {
    .chat-modal {
        align-items: center;
    }
    
    .chat-container {
        width: 100%;
        max-width: 480px;
        height: 600px;
        max-height: 90vh;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
    
    .chat-header {
        border-radius: 12px 12px 0 0;
    }
}

/* Melhorias visuais */
.chat-input:-webkit-autofill,
.chat-input:-webkit-autofill:hover,
.chat-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px var(--chat-input-bg) inset !important;
    -webkit-text-fill-color: var(--chat-text-primary) !important;
}

/* ========================================
   MODAL DE COOLDOWN (MENSAGENS RÁPIDAS)
   ======================================== */
.cooldown-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(32,18,44, 0.95);
    backdrop-filter: blur(4px);
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}

.cooldown-modal.active {
    display: flex;
}

.cooldown-content {
    background: var(--chat-container-bg);
    border-radius: 12px;
    padding: 32px 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.3s ease;
    border: 1px solid var(--chat-header-border);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cooldown-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: var(--chat-header-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--chat-header-border);
}

.cooldown-icon i {
    font-size: 28px;
    color: #f9e30e;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.cooldown-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--chat-text-primary);
    margin: 0 0 12px;
    letter-spacing: 0.3px;
}

.cooldown-message {
    font-size: 14px;
    color: var(--chat-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
    font-weight: 500;
}

.cooldown-timer {
    background: var(--chat-header-bg);
    border: 1px solid var(--chat-header-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cooldown-seconds {
    font-size: 32px;
    font-weight: 700;
    color: #f9e30e;
    min-width: 50px;
    animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.cooldown-text {
    font-size: 14px;
    color: var(--chat-text-secondary);
    font-weight: 600;
}

.cooldown-btn {
    width: 100%;
    background: var(--chat-header-bg);
    border: 1px solid var(--chat-header-border);
    border-radius: 8px;
    padding: 12px 24px;
    color: var(--chat-text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.cooldown-btn:hover {
    background: var(--chat-input-border);
    transform: translateY(-2px);
}

.cooldown-btn:active {
    transform: translateY(0);
}

/* ───── bloco 2 (era <style id="tabbar-7k"> na linha 1125) ───── */
/* ══ BARRA DE BAIXO no desenho do 7k.bet.br ═══════════════════════════════════════════════════
   Medidas tiradas do HTML deles: barra de 56px, dois grupos de 2 itens, vao de 76px no meio e
   um botao redondo que sobe 19px acima da barra.

   Vem no FIM do arquivo de proposito: as regras antigas de .tabbar estao nas linhas 178-290 deste
   mesmo arquivo, e CSS de mesma especificidade que vem depois vence. Assim eu nao preciso mexer
   em cada uma delas — e, se der problema, basta apagar este bloco para voltar ao que era.
   ========================================================================================== */

.tabbar {
    justify-content: flex-start;          /* era space-around, com os 5 itens soltos */
    align-items: stretch;
    padding: 0;
    overflow: visible;                    /* o botao do meio PRECISA vazar para fora */
    position: fixed;
}

/* os dois grupos dividem o que sobra dos lados do vao central */
.tabbar-grupo {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: space-around;
}
.tabbar-vao { width: 76px; flex: 0 0 76px; }

.tabbar .tabbar-item {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
}

/* ── o botao redondo do meio ─────────────────────────────────────────────────────────────── */
.tabbar-fab {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -19px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tabbar-fab-ext {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #1c1e34;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    transition: transform .2s;
}
.tabbar-fab:active .tabbar-fab-ext { transform: scale(.95); }

.tabbar-fab-int {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #16182a;
    overflow: hidden;
}
.tabbar-fab-int img {
    width: 32px;
    max-width: 32px;
    height: auto;
    object-fit: contain;
    display: block;
}

.tabbar-fab-rotulo {
    position: relative;
    z-index: 10;
    margin-top: -8px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(224, 224, 224, .9);
    color: #16182a;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    white-space: nowrap;
}

/* ══ MENU LATERAL no desenho do 7k.bet.br ════════════════════════════════════════════════
   Cores do CSS compilado deles: sidebar-bg #1c1e34 · sidebar-button-bg #3b3e5e ·
   titles/links #e0e0e0 · sidebar-icon → #f9e30e. Na 7k o menu do celular toma a tela
   inteira até a barra de baixo (`inset-x-0 top-0 bottom-[var(--mobile-nav-h)]`), sem a
   gaveta estreita que havia aqui. Este bloco vem depois das regras antigas de propósito. */

@media (max-width: 1023.98px) {
  .bp-sb.sv-menu {
    /* tela inteira, do topo até a barra de baixo */
    left: 0; right: 0; top: 0;
    width: auto;
    height: auto;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0;
    gap: 0;
    background: #1c1e34;
    border-right: 1px solid rgba(255,255,255,.1);
    z-index: 1500;
    overscroll-behavior: contain;
    /* na 7k ele sobe, não desliza do lado */
    transform: translateY(16px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s, visibility .3s;
  }
  html.sb-mobile-open .bp-sb.sv-menu { transform: none; opacity: 1; }
}

/* ── cabeçalho ── */
.sv-menu-topo {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sv-menu-marca { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sv-menu-logo img { display: block; width: auto; height: 24px; max-width: 45vw; object-fit: contain; }
.sv-menu-presente { display: inline-flex; align-items: center; }
.sv-menu-presente > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px; overflow: hidden;
  background: rgba(249,227,14,.15);
  color: #f9e30e;
}
.sv-menu-fechar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 9999px;
  background-color: #3b3e5e;
  -webkit-appearance: none; appearance: none;
  color: #e0e0e0;
  cursor: pointer;
}

/* ── o cartão "Indique e Ganhe", com a borda em degradê ──
   O truque é o deles: um span por cima com padding de 1.5px e duas máscaras que se
   anulam no miolo, deixando só a moldura pintada pelo degradê. */
.sv-menu-cta-caixa { flex-shrink: 0; padding: 16px; }
.sv-menu-cta {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px;
  border-radius: 8px;
  background-image: linear-gradient(to right, #3b3e5e, #1c1e34);
  color: #fff;
  text-decoration: none;
  transition: filter .3s, box-shadow .3s;
}
.sv-menu-cta:hover { filter: brightness(1.1); box-shadow: 0 4px 6px -1px rgba(0,0,0,.3); }
.sv-menu-cta-esq { position: relative; z-index: 10; display: flex; align-items: center; gap: 12px; }
.sv-menu-cta-rot {
  font-size: 14px; font-weight: 600; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.sv-menu-cta-seta { position: relative; z-index: 10; flex-shrink: 0; color: rgba(255,255,255,.7); transition: transform .3s, color .3s; }
.sv-menu-cta:hover .sv-menu-cta-seta { transform: translateX(2px); color: #fff; }
.sv-menu-cta-borda {
  position: absolute; inset: 0; z-index: 10;
  border-radius: 8px;
  pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(90deg, #f9e30e 0%, #1c1e34 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
}

/* ── seções ── */
.sv-menu-secoes { display: flex; flex-direction: column; }
.sv-menu-bloco { border-top: 1px solid rgba(255,255,255,.1); }
.sv-menu-cab {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 56px;
  padding: 0 16px; border: 0;
  background-color: transparent;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-transform: capitalize;
  color: #e0e0e0;
  cursor: pointer;
}
.sv-menu-cab-seta { flex-shrink: 0; color: rgba(224,224,224,.6); transition: transform .2s; }
.sv-menu-cab[aria-expanded="true"] .sv-menu-cab-seta { transform: rotate(180deg); }

/* o acordeão deles anima o grid-template-rows de 0fr a 1fr */
.sv-menu-corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease-out;
}
.sv-menu-corpo.sv-menu-aberto { grid-template-rows: 1fr; }
.sv-menu-corpo-in { min-height: 0; overflow: hidden; }
.sv-menu-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }

/* ── um item ── */
.sv-menu-item {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px;
  border-radius: 8px;
  background-image: linear-gradient(to right, #3b3e5e, #1c1e34);
  font-size: 12px; font-weight: 600;
  color: #e0e0e0;
  text-decoration: none;
  transition: filter .15s;
}
.sv-menu-item:hover { filter: brightness(1.1); }
.sv-menu-item-txt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sv-menu-ico { flex-shrink: 0; display: inline-flex; color: #f9e30e; }
.sv-menu-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-menu-seta { flex-shrink: 0; color: rgba(224,224,224,.5); }

/* ── rodapé do menu ── */
.sv-menu-fim {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 16px;
}
.sv-menu-fim .sv-menu-lista { padding-bottom: 16px; }

/* ── no desktop ele volta a ser a coluna fixa da esquerda ──
   ESTA REGRA ESTAVA PELA METADE (corrigido em 17/09/2026). Ela so trazia cor e borda:
   nao havia position, width nem top, entao no desktop o menu virava um bloco comum de
   largura inteira. Medido em 1400px: position=static, width=1390px, altura=1128px — e a
   pagina toda comecava em y=1184, empurrada para baixo por ele.
   O .bp-page ja reservava `padding-left: 250px` para uma coluna que nunca foi fixada ali;
   agora ela existe e os dois numeros batem.
   top: 72px e a altura medida do cabecalho no desktop. z-index 900 o deixa ABAIXO do
   cabecalho (que e 2100) e acima do conteudo. */
@media (min-width: 1024px) {
  .bp-sb.sv-menu {
    position: fixed;
    top: 72px;
    left: 0;
    bottom: 0;
    width: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 900;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: #1c1e34;
    border-right: 1px solid rgba(255,255,255,.1);
    padding: 0;
    gap: 0;
  }
}
