/* STREAMING_CHUNK:Variaveis e Resets Iniciais... /
/ ==========================================================================

VARIÁVEIS, CORES E RESETS (Aplica a todas as páginas)
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--red:      #E0041B;
--red-dark: #a80213;
--black:    #0A0A0A;
--dark:     #111111;
--card:     #161616;
--card2:    #1c1c1c;
--border:   #242424;
--border2:   #a80202;
--muted:    #555555;
--light:    #AAAAAA;
--white:    #FFFFFF;
}

body {
background: var(--black);
color: var(--white);
font-family: 'Barlow', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
}

/* O .page garante que o "miolo" empurra sempre o Footer para o fundo */
.page { flex: 1; width: 100%; }

/* --- SINO DA NAVBAR --- */
.nav-bell-btn {
    background: transparent;
    border: 2px solid var(--muted, #888);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #888);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 0px; /* Separa o sino do avatar */
    outline: none;
}

.nav-bell-btn svg {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

.nav-bell-btn:hover {
    border-color: var(--white);
    color: var(--white);
}

/* O ESTADO ATIVO (Vermelho) */
.nav-bell-btn.active {
    border-color: var(--red, #E0041B);
    color: var(--red, #E0041B);
    background: rgba(224, 4, 27, 0.1);
    box-shadow: 0 0 10px rgba(224, 4, 27, 0.4); /* Dá um brilho subtil para saberes que está ligado */
}

/* Efeito de abanar o sino quando clicas */
@keyframes ring {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}
.nav-bell-btn.active svg {
    animation: ring 0.5s ease-in-out;
}