.radio-ptt {
    position: fixed;
    right: calc(1rem + var(--radio-ptt-recuo, 0px));
    bottom: calc(1rem + var(--radio-ptt-recuo-vertical, 0px));
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: right 0.3s ease-in-out;
    /* Largura fixa, do tamanho do rótulo (que é o filho mais largo) — sem
       isso, o texto do status mudando de largura a cada estado ("Rádio
       Empresa" / "Conectando..." / "Transmitindo...") encolhia ou esticava
       a caixa toda, e como a borda direita fica fixa ("right" acima), o
       botão (centralizado dentro da caixa) parecia "andar" de lugar a cada
       clique em vez de ficar parado no mesmo lugar. */
    width: 160px;
}

.radio-ptt-botao {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: var(--cor-primaria, #0148C2);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.radio-ptt-botao:active {
    background: var(--cor-primaria-escura, #013a94);
}

.radio-ptt-botao[disabled] {
    background: #6c757d;
    opacity: 0.85;
}

.radio-ptt--transmitindo .radio-ptt-botao {
    background: #dc3545;
    animation: radio-ptt-pulsar 1s infinite;
}

@keyframes radio-ptt-pulsar {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6); }
    50% { box-shadow: 0 0 0 12px rgba(220, 53, 69, 0); }
}

.radio-ptt-status {
    /* Fica acima do botão (não abaixo, na ordem natural do DOM) porque é
       justamente a área abaixo/ao redor do botão que o polegar cobre ao
       pressionar — texto vermelho de "Transmitindo..." aqui continua visível
       mesmo com o dedo em cima do ícone. */
    order: -1;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    max-width: 160px;
    text-align: center;
}

.radio-ptt--transmitindo .radio-ptt-status {
    background: #dc3545;
    font-weight: 600;
}

@media print {
    #radio-ptt {
        display: none !important;
    }
}

/* A partir do breakpoint lg, a barra lateral (.sidebar-cacambou, 88px) fica
   visível — o botão do rádio deixa de flutuar solto no canto da tela e passa
   a ficar ancorado dentro dessa mesma coluna azul, embaixo dos itens de menu.
   Sem recuo horizontal/vertical aqui: o Drawer da Central e as barras de ação
   flutuantes vivem só na área de conteúdo (à direita da barra lateral), então
   nunca mais se sobrepõem ao botão nesta posição. */
@media (min-width: 992px) {
    .radio-ptt {
        left: 0;
        right: auto;
        bottom: 1.5rem;
        width: 88px;
    }

    .radio-ptt-status {
        max-width: 76px;
        padding: 0.15rem 0.35rem;
        overflow-wrap: anywhere;
    }
}