/* ===================================================== */
/* RESET */
/* ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================================================== */
/* BODY 
/* ===================================================== */

html, body {
    width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #2A302D !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Libera a rolagem correta de todo o conteúdo */
}

body {
  touch-action: manipulation !important;
}
/* Isso garante que ele comece escondido, não importa o tamanho da tela */
#aviso-orientacao {
    display: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
}


/* ===================================================== */
/* CONTADOR SUPERIOR - BLINDADO CONTRA ESTOURO          */
/* ===================================================== */
#container-contador {
    position: absolute !important;
    top: 23vw !important;
    left: 60vw !important;
    transform: translateX(-50%) !important;
    width: 91.5vh !important;
    max-width: none !important;
    margin: 0 auto !important; 
    z-index: 200 !important;
}

/* NÚMEROS */

#numeros-contador {
    position: absolute !important;
    top: 23vw !important;
    left: 60vw !important;
    transform: translateY(-50%) !important;
    color: #81ba55 !important;
    font-family: monospace !important;
    font-size: 5vw !important;
    font-weight: bold !important;
    letter-spacing: 2px !important; 
    white-space: nowrap !important; 
}


/* ===================================================== */
/* BLINDAGEM MESTRE - ALTERNÂNCIA E TAMANHO DO BOTÃO CENTRAL */
/* ===================================================== */

/* 1. Força o Stop a sumir por padrão usando o caminho completo do container */
html body div.main-footer div#player-rodape div.controles-player button#btn-pause-small,
html body div.main-footer div#player-rodape div.controles-player button#btn-pause-small img {
    display: none !important;
}

/* 2. Quando o sistema estiver ativo (tocando), força o Play a sumir */
html body .playing div.main-footer div#player-rodape div.controles-player button#btn-play-small,
html body .playing div.main-footer div#player-rodape div.controles-player button#btn-play-small img {
    display: none !important;
}

/* 3. Quando o sistema estiver ativo (tocando), força o Stop a aparecer */
html body .playing div.main-footer div#player-rodape div.controles-player button#btn-pause-small {
    display: flex !important;
}
html body .playing div.main-footer div#player-rodape div.controles-player button#btn-pause-small img {
    display: block !important;
}

/* 4. Ganho de escala imponente para destacar o botão central das setas */
html body div.main-footer div#player-rodape div.controles-player button#btn-play-small,
html body div.main-footer div#player-rodape div.controles-player button#btn-pause-small {
    width: 54px !important;
    height: 54px !important;
}

html body div.main-footer div#player-rodape div.controles-player button#btn-play-small img,
html body div.main-footer div#player-rodape div.controles-player button#btn-pause-small img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
}


/* ===================================================== */
/* ISOLAMENTO EXCLUSIVO DO DIAMANTE (PRODUÇÃO)          */
/* ===================================================== */

/* 💎 CONTAINER DO DIAMANTE (TRILHO) */
#controle-diamante {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important; 
    top: 122vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 75vw !important;
    max-width: none !important;
    height: 8vw !important;         
    background: transparent !important;
    border: none !important;
    z-index: 999 !important;
    cursor: pointer !important;
}

/* 🎨 DESENHO DO PONTEIRO - CHROME, EDGE E SAFARI */
#controle-diamante::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    
    width: 9vw !important;         
    height: 6vw !important;        
    margin-top: -1.2vh !important; /* 📐 Ajuste fino puramente geométrico para encaixar no trilho */
    background: url("diamante-volume.svg") no-repeat center !important;
    background-size: contain !important;
    border: none !important;
    box-shadow: none !important;
}

/* 🦊 DESENHO DO PONTEIRO - FIREFOX */
#controle-diamante::-moz-range-thumb {
    appearance: none !important;
    
    width: 9vw !important;         
    height: 6vw !important;        
    margin-top: -1.2vh !important; /* 📐 Ajuste fino puramente geométrico para encaixar no trilho */
    background: url("diamante-volume.svg") no-repeat center !important;
    background-size: contain !important;
    border: none !important;
    box-shadow: none !important;
}


/* ===================================================== */
/* REDIMENSIONAMENTO DO BOTÃO MESTRE CENTRAL (PLAY/STOP) */
/* ===================================================== */


/* Aumenta a caixinha de clique dos botões centrais */
#btn-play-small, 
#btn-pause-small {
    width: 54px !important;
    height: 54px !important;
}

/* Aumenta os ícones internos (SVGs) do Play e Stop para se destacarem */
#btn-play-small img, 
#btn-pause-small img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
}


#player-rodape .controles-player button,
#player-rodape .controles-player button img,
#player-rodape .controles-player button svg,
#player-rodape .controles-player button * {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    outline-offset: 0 !important;
    outline-style: none !important;
    outline-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#player-rodape .controles-player button:focus,
#player-rodape .controles-player button:focus-visible,
#player-rodape .controles-player button:focus-within,
#player-rodape .controles-player button:active,
#player-rodape .controles-player button:-moz-focusring,
#player-rodape .controles-player button *:focus,
#player-rodape .controles-player button *:focus-visible,
#player-rodape .controles-player button *:active,
#player-rodape .controles-player button *:focus-within,
#player-rodape .controles-player button *::-moz-focus-inner,
#player-rodape .controles-player button::-moz-focus-inner,
#player-rodape .controles-player button::-webkit-focus-ring-color {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    outline-offset: 0 !important;
    outline-style: none !important;
    outline-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#player-rodape .controles-player button::-moz-focus-inner {
    border: none !important;
    box-shadow: none !important;
}

/* ===================================================== */
/* LETREIRO DE STATUS - ECCOSSISTEMA BEEPSONIC           */
/* ===================================================== */

#rodape-tecnico {
    position: absolute !important;  /* 🔒 Trava permanentemente na tela do celular */
    bottom: 27vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 85vw !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    z-index: 1 !important;
    overflow: visible !important;
    padding-top: 3vw !important;
}

/* 2. O Texto Interno Real (Trata a frase longa para caber) */
#msg-tecnica {
    margin-top: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-family: "Eras Demi ITC", "Eras Bold ITC", sans-serif !important;
    font-size: 1.0rem !important;
    font-weight: bold !important;
    color: #0bba4b; /* Verde oficial BEEPSONIC */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    width: 100% !important;
}



/* ===================================================== 
  RESTAURAÇÃO DOS BOTÕES ORIGINAIS DO PAINEL - PLAY/MUDAR 
/* ===================================================== */

.zona-botoes {
    position: absolute !important;
    top: 137vw !important;     /* Diminuir para subir */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12vw !important;           /* ↔️ Espaçamento proporcional fluido */
    width: 100% !important;
    z-index: 1 !important;
}

.zona-botoes img {
    width: 30vw !important;         /* Aumentar valor para aumentar Tamanho dos botões */
    height: auto !important;
}

/* ===================================================== */
/* ENQUADRAMENTO DOS TEMPOS NAS EXTREMIDADES DA BARRA    */
/* ===================================================== */

/* ⏱️ TRAVA DO CONTAINER DOS NÚMEROS DE TEMPO */
.timeline-container {
    position: absolute !important;
    top: -3.3vw !important;       /* 📐 Posicionado perfeitamente no miolo da imagem */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 88vw !important;         
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline important; 
    z-index: 550 !important;
}
/* 🔴 ESPESSURA E COR DA BARRA DE PROGRESSO */
input[type="range"]:not(#controle-diamante) {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    top: 2vw !important;         /* Logo abaixo dos números */
    left: 50% !important;           /* Alinhado junto com o container */
    transform: translateX(-50%) !important;
    width: 60vw !important;         /* Mesma largura para manter alinhado */
    height: 0.6vh !important;       /* 📐 Espessura da barra (aumente ou diminua em vh se preferir) */
    background: #cca90b !important; /* 🎨 Cor oficial BEEPSONIC (ou mude para #f97320 se quiser laranja) */
    border-radius: 4px !important;
    outline: none !important;
    z-index: 500 !important;        
}
/* ⚪ BOLINHA / THUMB DA BARRA DE PROGRESSO EM VW/VH */
input[type="range"]:not(#controle-diamante)::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 3.5vw !important;          /* 📐 Largura proporcional em vw */
    height: 3.5vw !important;         /* 📐 Altura proporcional em vw para manter redonda */
    background: #0ecf07 !important;   /* 🎨 Bolinha branca solicitada */
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 0 4px rgba(0,0,0,0.5) !important;
}

/* Ajuste dos textos de tempo */
.tempo-atual, .tempo-total, .duracao {
    font-family: monospace !important; 
    font-size: 3.5vw !important;      
    font-weight: bold !important;
    color: #0bba4b !important;        
}

#player-rodape {
    position: absolute !important; 
    top: 84vw !important;           /* 📐 Logo abaixo da timeline, dentro da tela visível */
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 auto !important;
    height: auto !important;
    padding: 0 !important;
    z-index: 120 !important;      
}

/* ===================================================== */
/* COMPACTAÇÃO INDUSTRIAL E ATIVAÇÃO DO MOTOR FLEX     */
/* ===================================================== */
.controles-player {
    margin-top: 1.5vh !important;   /* 📐 Ajuste fino vertical proporcional em vh para os botões */
    width: 100% !important;
    max-width: 75vw !important;     
    margin-left: auto !important;   
    margin-right: auto !important;
    transform: translateY(0) !important; 
    display: flex !important;       
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important;
    padding: 0 !important;
}

/* Zera interferências de margens nos botões */
.controles-player button {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================================================== */
/* 3. ATIVAÇÃO, REDIMENSIONAMENTO E EXIBIÇÃO DOS SVGs    */
/* ===================================================== */
.audio-interface {
    position: absolute !important;
    top: 80vw !important;           /* 📐 Alinhado no bloco inferior do painel */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85% !important;
    max-width: 420px !important;
    background: transparent !important;
    z-index: 600 !important;
}

div[class*="player"] button, 
div[class*="control"] button, 
.controls button,
div[class*="player"] .btn,
div[class*="control"] .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
}

div[class*="player"] button img, 
div[class*="player"] button svg, 
.controls button img, 
.controls button svg,
div[class*="control"] button img {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.7)) !important;
}

.volume-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.time-label {
    font-family: monospace !important;
    font-size: 1rem !important;
    color: #d6fec7 !important;         
    min-width: 45px !important;
    text-align: center !important;
    line-height: 1 !important;         
    display: block !important;
}


/*=========================================
 Posicionamento da Lupa de Busca (SEARCH)
===========================================*/

#gatilho-lupa-busca {
    position: absolute !important;
    right: 4.8vw !important;          /* 📐 Aumentar  para ir para esquerda */
    top: 45.8vw !important;           /* 📐 Aumentar para descer */
    width: 27.5vw !important;         /* 📐 Largura proporcional da lupa em vw */
    height: auto !important;
    cursor: pointer !important;
    z-index: 9999 !important;       
    transition: opacity 0.2s, filter 0.2s !important;
}

#gatilho-lupa-busca.inativo {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    filter: grayscale(100%) brightness(0.85) !important;
    pointer-events: none !important;
}

#status-lupa {
    position: absolute !important;
    top: 34vw !important;           /* 📐 Posição proporcional do texto de status */
    right: 8vw !important;          /* 📐 Alinhado à direita de forma proporcional */
    font-family: monospace !important;
    font-size: 3.5vw !important;    /* 🔤 Convertido para vw proporcional */
    color: #0bba4b !important;      /* Verde BEEPSONIC */
    text-transform: uppercase !important;
}


/* BASE: O que define o miolo */
#conteudo-abas {
    position: absolute !important;
    top: 40.5vw !important;    /* Diminuir para subir*/
    left: 1.5vw !important;     /* Diminuir valor negativo para ir esquerda */
    width: 91.5vw !important;    /* Aumentar para alargar */
    height: 56vw !important;   /* Aumenta a altura vertical total da caixa para ocupar todo o miolo até embaixo */
    background-color: #000000 !important;
    overflow-y: scroll !important; /* Força a exibição da barra de rolagem */
    padding: 1vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    z-index: 999 !important;
}

/* 🎛️ COMPACTADOR INDUSTRIAL DE FAIXAS (BEEPSONIC CORE) */
.painel-lista > div, .painel-lista > label, #conteudo-abas div {
    padding-top: 0.11% !important;    /* ↕️ Reduzido o espaço superior entre as linhas */
    padding-bottom: 0.07% !important; /* ↕️ Reduzido o espaço inferior entre as linhas */
    margin-top: 0.04% !important;     /* 🎯 Deixa as faixas mais coladas e visíveis */
    margin-bottom: 0.07% !important;
}

/* 🎛️ CUSTOMIZAÇÃO INDUSTRIAL DA BARRA DE ROLAGEM (BEEPSONIC CORE) */

/* 1. Define a largura da barra proporcional à tela */
#conteudo-abas::-webkit-scrollbar {
    width: 1.2vw !important;
}

/* 2. O trilho/fundo da barra */
#conteudo-abas::-webkit-scrollbar-track {
    background: #000000 !important;
    border-radius: 10px
}

/* 3. O "Cursor" que se move (Cor Laranja beepsonic padrão) */
#conteudo-abas::-webkit-scrollbar-thumb {
    background: #f97320 !important;
    border-radius: 10px;
}

/* 4. Cor do cursor quando o mouse passa por cima / toca */
#conteudo-abas::-webkit-scrollbar-thumb:hover {
    background: #0bba4b !important;
}

/* Remove o botão de favorito (desativado do sistema) */
.btn-favorito {
    display: none !important;
}

/* -------------------------------------------------------------
   BLINDAGEM MOBILE DEFINITIVA UNIFICADA - ECOSSISTEMA BEEPSONIC
   ------------------------------------------------------------- */

@media screen and (max-width: 480px) {

    body {
        margin: 0 !important;
        padding: 0 !important;
        background-color: #2A302D !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

.painel-principal {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    height: calc(100vw * (2737 / 1500)) !important;
    background-image: url("fundo_conversor_mobile.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 100% !important; /* 🖼️ Garante que a imagem se estique para preencher 100% do painel sem cortar embaixo */
    background-color: #000000 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    
}


#btn-recolher-lista {
    position: absolute !important;
    left: 10vw !important;  /* Baseado na largura da tela */
    top: 47.2vw !important;   /* Baseado também na largura da tela, garantindo proporção fixa */
    width: 8vw !important;  
    height: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

}

  /* CALIBRAGEM CIRÚRGICA PARA EXPANDIR, CENTRALIZAR E DAR AMPLITUDE ÀS ONDAS */
    .imagem-fundo-frequencia, .onda-bloco, #painel-canvas, .canvas-frequencia,
    #osciloscópio, #container-onda, canvas {
        position: absolute !important;
        top: 28vw !important;         /* Diminuir para subir */
        left: 50% !important;          /* Move o início do elemento para o centro morto da tela */
        transform: translateX(-50%) scaleY(1.2) !important; /* CENTRALIZA E AMPLIFICA: Aumenta a altura da onda em 35% */
        width: 91vw !important;       /* Garante a largura total de ponta a ponta */
        height: 44vw !important;      /* Aumentamos um pouco para dar espaço para a amplitude crescer */
        object-fit: fill !important;   
        background: transparent !important;
        box-sizing: border-box !important;
        pointer-events: none !important; 
        z-index: 2 !important; /* Baixa a prioridade dele */

    }    



/* 1.1 AJUSTE DOS BOTÕES RETANGULARES (PLAY E MUDAR) */
.zona-bootoes {
    position: fixed !important;  /* 🔒 Trava permanentemente na tela do celular */
    bottom: 22vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12vw !important;
    width: 100vw !important;
    z-index: 100 !important;

}
.zona-bootoes img {
    /* 📐 Tamanho visual convertido para vw para escalar perfeitamente em qualquer tela */
    width: 25vw !important;     
    height: auto !important;
    max-height: none !important; /* Remove o limite fixo em px para o vw dominar */
    object-fit: contain !important;
    cursor: pointer !important;
    transition: transform 0.1s !important;
}

/* 2. ALVO REAL DO MIOLO DO CONVERSOR (ABA) */
    #aba-conversor, .aba-conversor {
        height: auto !important;
        max-height: 350px !important; 
        margin-top: 15px !important; 
    }

   /* CALIBRAGEM CIRÚRGICA PARA EXPANDIR E BAIXAR AS ONDAS */
    .imagem-fundo-frequencia, .onda-bloco, #painel-canvas, .canvas-frequencia {
        position: absolute !important;
        top: 42vw !important;           /* Valor do rebaixamento. Mude para achar o encaixe do SVG */
        left: 0 !important;            /* Gruda na parede esquerda da tela */
        right: 0 !important;           /* Gruda na parede direita da tela */
        width: 110vw !important;       /* Força a onda a ter a largura total da janela */
        max-height: 110vw !important;  /* Achata para dar o design industrial */
        object-fit: fill !important;   /* Força o desenho a esticar horizontalmente */
        z-index: 100 !important;
    }


/* ===================================================== */
/* 🔢 CONTADOR SUPERIOR - AJUSTE EXCLUSIVO DOS NÚMEROS   */
/* ===================================================== */

#container-contador {
    position: absolute !important;
    top: 18vw !important;           
    left: 50% !important;           
    transform: translateX(-50%) !important;
    width: 95vw !important;         
    max-width: none !important;     
    height: auto !important;
    background: transparent !important;
    display: block !important;
    z-index: 9999 !important;
}

/* 🔢 Posicionamento exclusivo dos números (o miolo lá em cima na linha 472 fica 100% untouched) */
#container-contador #numeros-contador {
    position: absolute !important;
    top: 20.6vw !important;          /* 📐 Diminuir para subir */
    right: 3.5vw !important;          /* 📐 Diminuir para ir esquerda */
    left: auto !important;
    transform: translateY(-50%) !important;
    font-family: monospace !important;
    font-size: 6vw !important;      
    font-weight: bold !important;
    letter-spacing: 2px !important; 
    color: #0bba4b !important;      /* Verde BEEPSONIC */
    z-index: 20000 !important;      
}

    /* 🚫 ELIMINA O FANTASMA AZUL E A SELEÇÃO AO ARRASTAR O DIAMANTE */
.barra-progresso, .timeline-input, #controle-diamante {
    -webkit-user-select: none !important;  /* Safari/Chrome Celular */
    -moz-user-select: none !important;     /* Firefox */
    -ms-user-select: none !important;      /* IE/Edge */
    user-select: none !important;          /* Padrão Técnico Universal */
    -webkit-tap-highlight-color: transparent !important; /* Remove o flash azul de clique nativo */
}


    /* 🔍 Posicionamento Livre da Lupa de Busca */
#gatilho-lupa-busca {
    position: absolute;
    
    /* 🎛️ CONTROLES DE POSIÇÃO: Mude estes valores para mover para onde quiser! */
    right: 16px;       /* Aumente para mover para a esquerda */
    top: 175px;         /* Distância do topo da tela. Aumente para descer, diminua para subir */
    
    width: 110px;       /* Largura da lupa */
    height: auto;
    cursor: pointer;
    z-index: 9999;     /* Garante que fica por cima de tudo */
    transition: opacity 0.2s, filter 0.2s;
}

#gatilho-lupa-busca.inativo {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(100%) brightness(0.85);
    pointer-events: none;
}

#status-lupa {
    position: absolute;
    top: 175px;
    right: 82px;
    font-family: monospace;
    font-size: 15px;
    color: #0bba4b;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    white-space: nowrap;
}
/* 🎛️ POSICIONAMENTO EXATO DO MIOLO DE MÚSICAS (BEEPSONIC) */
#conteudo-abas.ajuste-fino {
    width: 103.7% !important;
    height: 168px !important;
    margin-top: 59px !important;
    margin-left: -4.7% !important;
}
/* 2. O Compactador Industrial de Faixas (Onde a mágica acontece) */
 .linha-musica {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 8px 5px !important;
}

    /* 3. A Amplitude do texto (Nome da música) */
 .nome-musica-texto {
    /* O SEGREDO: flex: 1 permite crescer, min-width: 0 permite encolher sem quebrar o pai */
flex: 0 1 auto !important; 
    
    /* Definimos que ele pode crescer, mas deve parar 25px antes do botão (8mm é aprox 20-25px em tela) */
    max-width: calc(100% - 60px) !important; 
    
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    
    /* Aqui criamos o seu respiro industrial de 8mm */
    margin-right: 25px !important; 
}

.container-botoes {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

@media screen and (orientation: landscape) and (max-width: 900px) {
  #aviso-orientacao {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #2A302D !important;
    z-index: 999999 !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
  }
}
#aviso-orientacao img.svg-aviso {
    width: auto !important;
    height: 200% !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: rotate(90deg) !important;
}
/* 📱 BLINDAGEM EXCLUSIVA PARA TELAS CURTAS */
@media screen and (max-height: 600px) {
    .painel-principal {
        position: relative !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    #controle-diamante {
        top: 80vh !important;
    }
} 
/* ================================================================= 
   ESTILOS DO MENU FLUTUANTE E HAMBÚRGUER (BEEPSONIC)
   ================================================================ */

.hamburger-container {
    position: absolute;
    top: 7vw;
    right: 4vw;
    width: 18vw; /* Proporcional à tela mobile */
    cursor: pointer;
    z-index: 100002;

    /* Remove o destaque azul padrão de toque do celular */
    -webkit-tap-highlight-color: transparent;

}
.hamburger-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Menu flutuante blindado por cima de tudo com z-index máximo */
.menu-card {
    position: absolute;
    top: 33vw; /* Desceu o bloco inteiro um pouco mais para baixo */
    right: 4vw;
    width: 65vw; /* Largura fluida baseada em vw */
    z-index: 100001; /* Fica acima de absolutamente qualquer elemento do app */
}

.menu-bg {
    width: 100%;
    height: auto;
    display: block;
}

.menu-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha do topo para baixo respeitando o respiro */
    align-items: center;
    gap: 2vw; /* Convertido de 8px para vw para manter a proporção */
    padding-top: 4.5vw; /* Joga os botões para baixo, liberando a frase do topo */
    padding-bottom: 4vw;
    padding-left: 4vw;
    padding-right: 4vw;
}
/* Classe exclusiva para os botões do submenu (desce mais para liberar o título) */
.submenu-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    padding-top: 15vw; /* <--- Aumente para descer botões o submenu */
    padding-bottom: 4vw;
    padding-left: 4vw;
    padding-right: 4vw;
}

.menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 0;
}

.menu-btn img {
    width: 100%;
    height: auto;
    display: block;
}

.hidden {
    display: none !important;
}
/* ========================================== */
/* ESTILOS DO GUIA INSTRUTIVO (BEEPSONIC)     */
/* ========================================== */
.guia-instrutivo-container {
    position: absolute;
    top: 17vh; /* Ajusta proporcionalmente à altura de qualquer tela de celular */
    left: 0;
    width: 100%;
    height: calc(100vh - 17vh);
    padding: 15px 10px; /* Adiciona respiro nas laterais (esquerda e direita) dos blocos */
    background-color: #1a1e1c !important;
    overflow-y: auto;
    z-index: 99995 !important;
    display: none;
    font-family: Arial, sans-serif;
}

.bloco-guia {
    background-color: #242927;
    border: 1px solid #0bba4b;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Aumenta a fonte e melhora o espaçamento de todo o texto dentro do guia */
.bloco-guia p, .bloco-guia span {
    font-size: 24px; /* Aumenta o tamanho da letra para uma leitura confortável */
    line-height: 1.2; /* Dá um respiro entre as linhas para não embolar */
}

.cabecalho-bloco {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.titulo-bloco {
    color: #0bba4b;
    font-weight: bold;
    font-size: 23px;
    flex-grow: 1;
    margin-left: 10px;
}

.btn-audio {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 22px;
    padding: 5px;
    
}

.texto-bloco {
    color: #0bba4b;
    font-style: italic;
    font-size: 23px;
    line-height: 1.3;
    margin: 0;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

@media screen and (max-width: 400px) {
    .menu-card {
        width: 80vw;
        right: 3vw; /* Convertido de 10px para vw */
    }
}
/* Remove o bloco comentado incorreto e aplica o recolhimento geral e a remoção do foco azul */
.guia-instrutivo-container.recolhido-geral .conteudo-bloco {
    display: none !important;
}

.btn-recolher-todos:focus,
.btn-recolher-todos:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}
.btn-audio, .btn-audio * {
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/* ======================================================== */
/* CAMADA INICIAL ESTÁTICA (BANNER ABAIXO DA FRASE E BOTÃO ACIMA) */
/* ======================================================== */

.camada-inicial-estatica {
    position: absolute !important;
    top: 34vw !important; /* Desce mais o banner para que a frase dos 10 mil inscritos fique visível acima dele */
    left: 0 !important;
    width: 100vw !important;
    height: 100vw !important; /* Mantém a altura proporcional à largura */
    z-index: 99990 !important;
    visibility: visible !important;
    background-color: #1a1e1c !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

.banner-inicial-svg {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

.botao-cadastro-estatico {
    position: absolute !important;
    top: 4.5vw !important; /* Diminuir para subir o botão de cadastro */
    left: 50vw !important;
    transform: translateX(-50%) !important;
    width: 70vw !important;
    z-index: 99991 !important;
    cursor: pointer;
}
#camadaInicialEstatica {
    z-index: 99990 !important;
    position: absolute !important;
} 
/* Estilo e prioridade para o botão Saiba Mais */
#btn-saiba-mais {
    display: flex !important;
    position: relative !important;
    z-index: 100002 !important;
}