/* --- HEADER E ÍCONES (OTIMIZADO) --- */

header {
    position: relative;
    z-index: 9994;
    display: flex;
    flex: 0 1 auto; 
    gap: 15px;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 3px 6px ;
    padding: 0.5em 6px; 
    max-width: 100%;
    
    /* Mantém o isolamento de layout */
    contain: layout inline-size; 
    container-type: inline-size;
    container-name: header-fixo;
    anchor-name: --ancora-header;
    
    /* Removemos o fundo, bordas e blur daqui para não pesar no scroll */
    background: transparent;
}

/* O TRUQUE DA MÁGICA: Camada isolada apenas para o visual */
header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; /* Fica atrás dos ícones e textos */
    
    /* Bordas e Sombra */
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    
    /* Efeitos Visuais (Gradiente + Blur) */
    background: linear-gradient(165deg, #fc5f21, rgba(155, 90, 185, 0.824));
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    
    /* IMPULSIONADORES DE HARDWARE (GPU) */
    /* Isolam o blur e o gradiente em uma folha de vidro na placa de vídeo */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, backdrop-filter;
}


/* Nova classe para alinhar o que está dentro do header */
.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    gap: clamp(6px, 1.5cqi, 15px);
    /* Espaço entre o botão hamburguer e o título */
}

header h1 {
    font-size: 0.95rem;
    font-size: var(--tamanho-fonte-header, clamp(0.9rem, 4cqi, 2rem));
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-transform: uppercase;
    color: #ffffff;                                  /* 🐚 CORRENTE – Fase 2 */
    color: var(--texto-primario, #ffffff);           /* 🐚 CORRENTE – Fase 2 */
    font-family: 'Urbanist', sans-serif;
    font-weight: bold; 
    margin: 0;

}

/* --- ESTILO BASE DOS ÍCONES --- */
.header-icons  {
    display: flex;
    gap: 5px;
    gap: clamp(0.5rem, 1vw, 1.2em);
    align-items: center;
    padding: 2px 3px;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: auto;
    
}

.header-icons a {
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    /* Transição suave para todos */
}

.header-icons i {
    color: #ffbc00;                                  /* 🐚 CORRENTE – Fase 2 */
    color: var(--texto-dourado, #ffbc00);            /* 🐚 CORRENTE – Fase 2 */
    font-size: 1.05rem;
    font-size: clamp(1.15rem, 3cqi, 1.75rem);
    transition: all 0.3s ease;
}

/* HOVER GERAL */
.header-icons a:hover i {
    color: #fff;
    transform: scale(1.2);
}

/*  HOVER ESPECÍFICO DA ENGRENAGEM  */
.btn-config:hover i {
    transform: rotate(90deg) scale(1.2) !important;
    color: #fff;
}


.notificacao-wrapper:hover .badge-alerta {
    transform: scale(0.8) translateY(-5px);

}

.btn-feed-home:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 187, 0, 0.89);
    filter: brightness(1.2);
}


/* --- MENU NAVBAR (RECUPERADO) --- */

.fenda-saudacao {
    margin: 20px auto;
    font-size: 1.4rem; 
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-family: 'Segoe UI', BlinkMacSystemFont, system-ui, -apple-system, Roboto, sans-serif; 
    letter-spacing: 1px;
    padding: 12px;
    width: 100%;
    justify-content: center;
}


main article {
    text-align: left;
    margin: 10px auto;
    padding: 0 5px;
    width: 100%;
    box-sizing: border-box;
}


nav {
    width: 100%;
    position: relative;
    /* Ela sobe com o scroll */
    transition: all 0.3s ease;
}

/* PAINEL DE CONTROLE, SIDEBAR E TOOLBAR */
.painel-controle-container {
    display: flex;
    min-height: 100dvh;
    gap: 15px;
    max-width: 2000px;
    margin: 0 auto;
    padding: 15px;
}


/* Ajuste fino dos itens */
.menu-item a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: clamp(0.95rem, 0.8rem + 0.5cqi, 1.5rem);
    line-height: 1.5;
    padding: 8px 16px;
    display: block;
    transition: 0.3s;
    border-radius: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* lógica de setinha no dropdown */
.dropdown>a::after {
    content: ' ▼';
    font-size: 20px;
    opacity: 0.7;
    margin-left: 5px;
}


/* Sidebar simples, limpa e com scroll funcional */
.sidebar-fenda {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(-100%, 0, 0);
    max-width: 350px;
    height: 100dvh;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y ;
    -webkit-overflow-scrolling: touch;
    background: rgba(10, 25, 47, 0.95);
    background: var(--bg-sidebar, rgba(10, 25, 47, 0.95));  /* 🐚 CORRENTE – Fase 2 */
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border: 2px solid #222;
    border-radius: 20px;
    padding: 15px;
    z-index: 999999;
    transition: transform 0.35s ease-out;
    overflow-y: auto ;

}

/* --- CABEÇALHO DA GAVETA (SIDEBAR HEADER) --- */
.sidebar-header {
    display: flex;
    justify-content: flex-end;
    /* Empurra o botão de fechar totalmente para a direita */
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

/* O "X" redondo, centralizado e sem quebrar layout */
#btn-fechar-menu {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    /* Centraliza o "✕" perfeitamente dentro do círculo */
    display: flex;
    padding: 4px;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

#btn-fechar-menu:hover {
    background: #ff8c00;
    transform: rotate(90deg);
}

.sidebar-fenda.ativa {
    transform: translate3d(0, 0, 0);
    background: rgba(10, 25, 47, 0.95);                        /* fallback */
    background: var(--bg-sidebar, rgba(10, 25, 47, 0.95));     /* 🐚 CORRENTE – Fase 2 */
    border: 1px solid #029687;
    padding: 12px;
}

/* Overlay simples */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.514);
    background: var(--bg-modal-overlay, rgba(0, 0, 0, 0.514));  /* 🐚 CORRENTE – Fase 2 */
    z-index: 9998;
}

.overlay.ativa {
    display: block;
}

/* --- ESTILO DO BOTÃO DO MAPA (NOVO MENU) --- */

.hamburger-floating-container {
    position: relative;
    /* Mantém ele fixo no canto superior */
    z-index: 10001;
    /* Garante que fique acima de tudo */
}

#btn-menu-hamburguer {
    background: rgba(5, 14, 65, 0.329);
    background: oklch(0.2013 0.0964 267.22 / 32.9%);
    /* Fundo semi-transparente */
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    cursor: pointer;
    color: #ffc72d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Efeito ao passar o mouse */
#btn-menu-hamburguer:hover {
    background: rgba(255, 140, 0, 0.3);
    transform: scale(1.03);
    border-color: rgba(255, 140, 0, 0.5);
}

/* Ajuste fino do ícone dentro do botão */
.btn-menu-hamburguer {
    width: 32px;
    height: 32px;
    width: clamp(32px, 10vmin, 70px);
    height: clamp(32px, 10vmin, 70px);
    display: block;
    stroke: currentColor;
}


/* Estilo dos itens do menu na gaveta */
.menu-gaveta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.item-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #ccc;
    text-decoration: none;
    border-radius: 10px;
    transition: 0.3s;
    font-size: 15px;
}

.item-menu:hover,
.item-menu.active {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.item-menu i {
    width: 20px;
    text-align: center;
}

.avatar-gaveta {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.perfil-resumo-gaveta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;

}

/* Ajuste específico para o título do conteúdo pessoal */
.titulo-sessao-pessoal {
    color: #fa800e;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block ;
    margin-bottom: 20px;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sessao-pessoal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-content: center;
}

/* ============================================================
   MODAL OVERLAY E ESTRUTURA BASE
   ============================================================ */

.toolbar-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 55dvh;
    padding-right: 5px;
    scrollbar-width: none;
}

.toolbar-content ::-webkit-scrollbar {
    display: none;
}

#fenda-toolbar {
    position: fixed;
    right: 0;
    top: 45%;
    transform: translate3d(100%, -50%, 0);
    width: 280px;
    background: rgba(0, 20, 20, 0.67);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid #00ff00;
    border-radius: 15px 0 0 15px;
    transition: transform 0.35s ease-out;
    z-index: 9995;
    padding: 12px;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    /* ===== SCROLL VERTICAL ===== */
    max-height: 50dvh;
    /* Altura máxima de 50% da tela */

}

/* Quando estiver aberta */
#fenda-toolbar.toolbar-aberta {
    transform: translate3d(0, -50%, 0);
}

/* O Gatilho (Bússola) */
.toolbar-trigger {
    position: fixed;
    top: 10%;
    background: #001a1a;
    border: 1px solid #00ff00;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    display: none ;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
    font-size: clamp(16px, 16vmin, 26px);
    width: clamp(40px, 8vmin, 65px);
    height: clamp(40px, 8vmin, 65px);
    padding: 6px;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
    background: #004d40;
    color: #00ffcc;
    transform: translateY(-50%);
    margin: auto;

}

/* Container dos controles */
.setup-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0;
}

/* Estilização dos mini botões de som */
.btns-mini {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    justify-content: center;
}

.btns-mini button {
    background: rgba(0, 77, 64, 0.3);
    border: 1px solid #00a896;
    color: #00ffcc;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    flex: 1;
    /* Faz os botões dividirem o espaço igualmente */
}

.btns-mini button:hover {
    background: #00ffcc;
    color: #000;
}

/* Botão de Perfil e Modo Terminal mais destacados */
.btn-perfil-toolbar,
#hacker-toggle-lateral {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #00ffcc;
    border-radius: 8px;
    color: #00ffcc;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-perfil-toolbar:hover,
#hacker-toggle-lateral:hover {
    background: #00ffcc;
    color: #000;
    transition: 0.3s ease-in-out;

}

.status-section {
    margin-top: 15px;
    color: #00ffcc; font-weight: bold; font-size: 0.9rem; margin-bottom: 10px; display: block;
}

.status-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 5px;
    border-bottom: 1px solid rgba(0, 255, 204, 0.1);
    font-size: 0.9rem;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-online {
    background-color: #00ff0d;
    box-shadow: 0 0 5px #00ffcc;
}

.dot-offline {
    background-color: #555555;
}

/*  EX BOTÃO FLUTUANTE (FAB) - AGORA ESTÁ DENTRO DO NEXUS  */
/* --- BOTÃO FLUTUANTE (FAB) --- */
.fab-postar {
    position: fixed;
    bottom: 40px;
    left: 15px;
    width: clamp(50px, 15vmin, 80px);
    height: clamp(50px, 15vmin, 80px);
    background: #b8f11ace;
    padding: 10px;
    /* Branco acinzentado */
    color: #000;
    /* Ícone preto para alto contraste */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 998;
    display: none !important;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.fa-plus::before {
    font-size: clamp(25px, 0.5vw, 45px);
    font-weight: bold;
}

.fab-postar:hover {
    transform: scale(1.1) rotate(90deg);
    background: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}


body.modal-aberto .fab-postar {
    display: none;
}

/* --- ESTRUTURA BASE DOS MODAIS --- */
.fenda-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.473);
    background: var(--bg-modal-overlay, rgba(0, 0, 0, 0.473));  /* 🐚 CORRENTE – Fase 2 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.fenda-modal-content {
    box-shadow: 0 0 20px rgba(255, 188, 0, 0.2);
    animation: surgimentoModalBase 0.3s ease-out;
    padding: 15px;
    max-width: 95%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}


@keyframes surgimentoModalBase {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/*  CLASSES AUXILIARES  (ZARPAR)  */
.fenda-modal-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.fenda-modal-content h2 {
    color: var(--dourado);
    color: var(--texto-dourado, var(--dourado, #ffbc00));           /* 🐚 FAROL – Fase 2 */
    margin-bottom: 20px;
}

.fenda-modal-content p {
    color: #ccc;                                                    /* fallback */
    color: var(--texto-secundario, #ccc);                           /* 🐚 FAROL – Fase 2 */
    margin-bottom: 25px;
}

.fenda-modal-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-ficar-terra {
    flex: 1;
    background: var(--dourado);
    background: var(--texto-dourado, var(--dourado, #ffbc00));      /* 🐚 FAROL – Fase 2 */
    color: #000;                                                    /* fallback */
    color: var(--bg-page-dark, #000);                            /* 🐚 FAROL – Fase 2 */
    border: none;
    padding: 6px 10px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-size: clamp(13px, 3vmin, 18px);
}

.btn-zarpar {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);                          /* fallback */
    background: var(--bg-input, rgba(255, 255, 255, 0.05));         /* 🐚 FAROL – Fase 2 */
    color: #fff;                                                    /* fallback */
    color: var(--texto-primario, #fff);                             /* 🐚 FAROL – Fase 2 */
    border: 1px solid #444;                                         /* fallback */
    border: 1px solid var(--borda-card, #444);                      /* 🐚 FAROL – Fase 2 */
    padding: 6px 8px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-size: clamp(13px, 3vmin, 18px);
}


.btn-ficar-terra:hover {
    background: #eab100;
    transform: translateY(-2px);
}

.btn-zarpar:hover {
    background: rgba(255, 99, 71, 0.2);
    border-color: #ff5638;
}

/* Estilização do Botão de Ir para o Feed na Toolbar */
.btn-feed-toolbar {
    width: 100%;
    padding: 8px;
    background: rgba(0, 243, 255, 0.1);
    /* Ciano suave com transparência */
    border: 1px solid var(--accent-cyan, #00f3ff);
    border-radius: 8px;
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

}

.btn-feed-toolbar:hover {
     /* Fallback */
    background: linear-gradient(165deg, #fc5f21, rgba(155, 90, 185, 0.824));
    background: var(--laranja-fenda);
    color: #000;
    box-shadow: 0 0 15px rgba(255, 99, 71, 0.5);
    transform: translateY(-2px);
}


.menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 5px;
    gap: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.37);
    width: 100%;
    justify-content: center;
    position: relative;
    z-index: 100;

}

.menu-item:hover>a {
    background: rgba(255, 255, 255, 0.11);
    border-radius: 5px;
}


.dropdown {
    position: relative;
}

/*  setinha no dropdown */
.dropdown>a::after {
    content: ' ▼';
    font-size: 10px;
    opacity: 0.5;
    margin-left: 5px;
}

.dropdown:hover>a::after {
    content: ' ▲';
}

.submenu {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 10px 10px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100px;
    padding: 5px;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.4);
    list-style: none;
    z-index: 10000;
}

.submenu li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.021);
    font-size: 0.9rem;
    font-size: clamp(0.85rem, 2cqw, 1.2rem);
    font-weight: normal;
    text-align: left;
    color: #d4b8b8;
    padding: 6px 12px;
    line-height: 1.3;
}

.submenu li:hover {
    background: rgba(255, 255, 255, 0.11);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

.submenu li:hover a {
    color: #ff8c00;
    transition: color 0.3s ease;
}

.menu-item:hover .submenu {
    display: flex;
    flex-direction: column;
}

/* CORREÇÃO DA SIDEBAR  */

/* 1. Força a coluna na sidebar */
.sidebar-fenda .menu {
    flex-direction: column;
    align-items: flex-start;
}

/* 2. Reseta o submenu para ser 'normal' dentro da sidebar */
.sidebar-fenda .submenu {
    position: relative;
    /* Sai do absoluto */
    display: none;
    /* Esconde por padrão */
    width: 100%;
    box-shadow: none;
    top: 0 !important;
}

/* 3. Faz o submenu abrir quando passa o mouse no menu-item */
.sidebar-fenda .menu-item:hover .submenu {
    display: flex;
    /* Força aparecer */
    flex-direction: column;
}

.sidebar-fenda .menu {
    flex-direction: column;
    /* Força o menu a ficar vertical dentro da gaveta */
    width: 100%;
}

/* O Container que segura a onda no index */
.fenda-container {
    width: 100%;
    max-width: clamp(300px, 100%, 800px);
    margin: 0 auto;
    padding: 20px 0px;
    box-sizing: border-box;
}


/* Ajuste específico para as duas fotos dos Campus */
.fenda-container div[style*="flex"] {
    gap: 15px;
}


/* Container de botões - Não afeta o resto do site */
.fenda-acoes-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

/* Base dos botões com brilho */
.fenda-btn-glow {
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
}


.fenda-primary {
    background: #ffbc00;
    color: #000;
    padding: 12px 20px;
}


.fenda-outline {
    background: rgba(204, 66, 12, 0.1);
    color: #fa593d;
    border: 1px solid #cc420c !important;
    padding: 10px 20px;
}


.fenda-btn-glow:hover {
    filter: brightness(1.05);
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.fenda-primary:hover {
    box-shadow: 0 0 15px rgba(255, 188, 0, 0.4);
}

.fenda-outline:hover {
    background: rgba(248, 78, 11, 0.753);
    border-color: #ff824d !important;
    color: #dddddd;

}

/* FOOTER GLOBAL E MODAL */
footer {
    clear: both;
    width: 100%;
    background: #1a1a1ae0;                                       /* fica local – tema hacker sobrescreve direto */
    padding: 20px 20px 30px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 188, 0, 0.2);                /* fallback */
    border-top: 1px solid var(--borda-dourada, rgba(255, 188, 0, 0.2)); /* 🐚 FAROL – Fase 2 */
    color: rgba(250, 202, 44, 0.719);
    font-size: 0.9rem;
    z-index: 100;
    flex-shrink: 0;
}

footer a {
    text-decoration: underline;
}

/* Efeito de Hover notificações que não quebra a borda */
/* --- ESTILIZAÇÃO DAS NOTIFICAÇÕES (VERSÃO FENDA) --- */

.link-notificacao {
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
    transition: transform 0.2s ease;
}


.card-notificacao {
    background: rgba(255, 255, 255, 0.03);                        /* fallback */
    background: var(--bg-card, rgba(255, 255, 255, 0.03));        /* 🐚 FAROL – Fase 2 */
    border: 1px solid rgba(255, 255, 255, 0.1);                   /* fallback */
    border: 1px solid var(--borda-media, rgba(255, 255, 255, 0.1)); /* 🐚 FAROL – Fase 2 */
    border-left: 4px solid #ffbc00;                               /* fallback */
    border-left: 4px solid var(--texto-dourado, #ffbc00);         /* 🐚 FAROL – Fase 2 */
    padding: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.fa-clock small {
    font-size: 15px;
    font-weight: bold;
    color: #ffffffe0;
}

.card-notificacao:hover {
    background-color: #252525 !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.link-notificacao:hover .card-notificacao {
    background: rgba(255, 188, 0, 0.08);
    border-color: rgba(255, 187, 0, 0.219);
    border-left-width: 6px;
    transform: translateX(5px);
}

.notificacao-conteudo p {
    margin: 0;
    font-size: 1rem;
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
    color: #eee;                                                  /* fallback */
    color: var(--texto-secundario, #eee);                         /* 🐚 FAROL – Fase 2 */
    line-height: 1.4;
}

.notificacao-conteudo small {
    color: #bebebef1;
    display: block;
    margin-top: 5px;
}

.seta-notificacao {
    color: #ffbc00;
    opacity: 0.5;
    font-size: 0.95rem;
}

/* Estilo para notificações que ainda não foram abertas */
.card-notificacao.nova {
    background: rgba(255, 187, 0, 0);
}



/* ESTILO DO CARD DE NOTIFICAÇÃO (TOAST) */
.notificacao-popup {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: rgba(10, 10, 10, 0.95);                          /* fallback */
    background: var(--bg-modal-content, rgba(10, 10, 10, 0.95));  /* 🐚 FAROL – Fase 2 */
    color: white;                                                 /* fallback */
    color: var(--texto-primario, white);                          /* 🐚 FAROL – Fase 2 */
    padding: 16px 25px;
    border-radius: 16px;
    border: 1px solid rgba(255, 188, 0, 0.3);
    border-left: 5px solid var(--dourado);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.8);
    z-index: 10000001;
    /* Está bem alto, então não é problema de sobreposição */
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 350px;
    width:auto;
    min-width: 180px;
    cursor: pointer;
    animation: entrarNotif 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.3s ease;

    /* GARANTIA ANTI-BUG: */
    pointer-events: all !important;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Evita que o usuário selecione o texto sem querer ao clicar */
}

/* Animação Corrigida */
@keyframes entrarNotif {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notificacao-popup:hover {
    transform: translateY(-5px) !important;
    /* Adicionei o !important para não brigar com o transform do keyframe */
    border-color: var(--dourado);
    box-shadow: 0 15px 30px rgba(255, 188, 0, 0.4);
}

.notificacao-popup strong {
    font-size: 15px;
    /* Título mais visível */
    margin-bottom: 3px;
}


/*  PAINEL DE ÁUDIO - A FENDA (ESTILO STEALTH) */

/* Card que envolve as opções */
.audio-settings-card {
    padding: 10px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Container dos botões de Chuva/Onda/Mudo */
.audio-choices-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    margin-top: 8px;
    gap: 10px;
}

/* Estilo Base dos Botões de Escolha */
.btn-audio-choice {
    background: rgba(255, 255, 255, 0.05);                        /* fallback */
    background: var(--bg-input, rgba(255, 255, 255, 0.05));       /* 🐚 FAROL – Fase 2 */
    border: 1px solid rgba(255, 255, 255, 0.1);                   /* fallback */
    border: 1px solid var(--borda-media, rgba(255, 255, 255, 0.1)); /* 🐚 FAROL – Fase 2 */
    color: #999;                                                  /* fallback */
    color: var(--texto-muted, #999);                              /* 🐚 FAROL – Fase 2 */
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.2rem);
    font-weight: 600;
    transition: all 0.3s ease;
    flex: 1;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-audio-choice i {
    margin-right: 5px;
    font-size: 0.95rem;
}

.btn-audio-choice:hover {
    background: rgba(255, 255, 255, 0.1);                        /* fallback */
    background: var(--bg-input-hover, rgba(255, 255, 255, 0.1)); /* 🐚 FAROL – Fase 2 */
    color: #fff;                                                 /* fallback */
    color: var(--texto-primario, #fff);                          /* 🐚 FAROL – Fase 2 */
    border-color: rgba(255, 255, 255, 0.3);
}

/* ESTADO ATIVO: Quando o som está selecionado */
.btn-audio-choice.active {
    background: rgba(255, 188, 0, 0.15) !important;
    border-color: #ddc80e !important;
    /* Cor Dourada da Fenda */
    color: #ddc80e;
    box-shadow: 0 0 15px rgba(255, 188, 0, 0.1);
}

.btn-bolhas-on.active-blue {
    background-color: rgb(27, 158, 219) !important;
    color: white !important;
}

/* Estilo para as bolhas desligadas */
.btn-bolhas-off.active-red {
    background-color: rgba(243, 76, 53, 0.87) !important;
    color: white !important;
}


.campo-grupo input[type="color"] {
    width: 80px;
    height: 40px;
    justify-content: center;
}

/* Botão de Toggle (Radar/Notificações) */
.btn-stealth-toggle {
    background: rgba(255, 188, 0, 0.1);
    border: 1px solid #ddc80e;
    color: #ddc80e;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    min-width: 120px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estado Mudo do Toggle */
.btn-stealth-toggle.mudo {
    background: rgba(255, 255, 255, 0.05);
    border-color: #555;
    color: #777;
}

.btn-stealth-toggle:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}


.nota-seguranca {
    background-color: #ffffcc;
    color: #000;
    padding: 15px;
    font-size: 0.85em;
    border-left: 5px solid #ffcc00;
    margin: 15px 0;
    border-radius: 4px;
}


/* Limpa os anteriores e usa só este: */
.notificacao-wrapper {
    position: relative;
    display: inline-flex;
    /* Alinha direitinho com os outros ícones do header */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 10px;
    /* Dá um respiro entre o sino e os outros botões */
}

.notificacao-wrapper:hover {
    color: white;
}

.badge-alertas {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(45deg, #ff4b2b, #ff416c);
    color: white;
    font-size: 10px;
    font-weight: 800;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid #1a1a1a;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    animation: pulsarNotif 3s infinite;

    /* ISSO AQUI É O SEGREDO: */
    line-height: 1;
    padding: 0;
    /* Centralização garantida */
    text-indent: 0;
    box-sizing: border-box;
    /* Garante que o border não aumente o círculo */
}

/*  animação do numero no sino */
@keyframes pulsarNotif {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 12px rgba(255, 75, 43, 0.7);
        /* Brilho neon ao pulsar */
    }

    100% {
        transform: scale(1);
    }
}

.badge-alertas span {
    color: var(--dourado);
    font-weight: bold;
}


/* GAVETA DE CONFIGURAÇÕES - O "Manto Invisível" */
.drawer-perfil-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 650px;
    min-height: 100vh;
    height: 100dvh;
    background-color: #11111105;
    background-color: var(--bg-drawer, #11111105);              /* 🐚 CORRENTE – Fase 2 */
    color: #ffffff;                                              /* 🐚 CORRENTE – Fase 2 */
    color: var(--texto-primario, #ffffff);                       /* 🐚 CORRENTE – Fase 2 */
    z-index: 999999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-color: rgba(255, 166, 0, 0.5);
    padding: 8px;
    border-left: 1px solid #333;
}

/* O estado ativo - Quando o JS adiciona a classe */
.drawer-perfil-container.ativa {
    transform: translateX(0);
    /* Desliza para a posição 0 (dentro da tela) */
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    inset: 0;
    right: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    background: var(--bg-modal-overlay, rgba(0, 0, 0, 0.6));  /* 🐚 CORRENTE – Fase 2 */
    display: none;
    z-index: 99998;
}

/* Quando abrir, faz o backdrop aparecer ( trigger) */
.drawer-backdrop.ativa {
    display: block;
}

/* Estilo base do botão de fechar */
.btn-fechar-drawer {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;                                              /* 🐚 CORRENTE – Fase 2 */
    color: var(--texto-primario, #ffffff);                       /* 🐚 CORRENTE – Fase 2 */
    font-size: 1rem;
    font-size: clamp(0.95rem, 1cqw, 1.3rem);
    cursor: pointer;
    z-index: 1000000;
    padding: 5px 10px;
    border-radius: 50%;
    pointer-events: auto;
}

.btn-fechar-drawer:hover {
    background: rgba(255, 255, 255, 0.26);
    transition: background ease 0.3s;
}

/* A caixa que envolve a logo no classificados */
.atletica-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    overflow: visible;
    /* Mude para visible para o brilho não cortar */
    background: none;
    border: none;
}

.atletica-item:hover .insignia-atletica-link {
    transform: scale(1.05) !important;
    filter: brightness(1.1) drop-shadow(0 0 12px var(--dourado));
}

/* A logo */
.insignia-atletica-link {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/*  SESSÃO DE BUSCA - FORMULÁRIO E RESULTADOS  */

/* 1. O Formulário (Tamanho Desktop e Mobile) */
.container-busca.container-fenda-flex {
    height: 100dvh;
    margin: 25px auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100dvh;
}

.form-busca-fenda {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 800px;
    margin: 25px auto;
    background: transparent !important;
    border: none;
}

.form-busca-fenda input[type="text"] {
    display: flex;
    flex: 1;
    min-width: 0;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.08);                        /* fallback */
    background: var(--bg-input, rgba(255, 255, 255, 0.08));       /* 🐚 FAROL – Fase 2 */
    color: white;                                                 /* fallback */
    color: var(--texto-primario, white);                          /* 🐚 FAROL – Fase 2 */
    border: 2px solid rgba(255, 188, 0, 0.5);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 1.2rem;
    box-sizing: border-box;
}

/* Quando você clica para digitar */
.form-busca-fenda input[type="text"]:focus-visible {
    border-color: #fc900c;
    background: rgba(255, 255, 255, 0.12);
    outline: none ;
    box-shadow: 0 0 10px rgba(252, 144, 12, 0.3);
}

.form-busca-fenda button {
    flex: 0 0 auto !important;
    min-width: 50px;
    min-height: 50px;
    background: #fc900c;
    color: #000;
    border: none;
    border-radius: 10px;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 20px;
    outline: none;
}


.form-busca-fenda button {
    padding: 0 15px;
    font-size: 1rem;
}


/* 2. Lista de Resultados  */
.lista-resultados {
    display: grid;
    align-items: flex-start;
    align-content: center;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    max-width: 1600px; 
    margin: 20px auto;
    width: 100%;
    box-sizing: border-box;
    column-count: auto;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 16px;
    max-width: 100%;
    
}

/* 3. O Card de Usuário  */
.user-card {
    display: flex;
    background: rgba(255, 255, 255, 0.05);                        /* fallback */
    background: var(--bg-input, rgba(255, 255, 255, 0.05));       /* 🐚 FAROL – Fase 2 */
    padding: 12px;
    border-radius: 10px;
    padding: 10px;
    break-inside: avoid;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    width: 100%;
    max-width: 350px;
     /* Suaviza as bordas do card em movimento de forma contínua */
    -webkit-font-smoothing: antialiased;
    height: auto;
    scrollbar-width: none;
    container-type: inline-size;
    container-name: card-busca;
    border: 1px solid rgba(255, 255, 255, 0.1);                   /* fallback */
    border: 1px solid var(--borda-media, rgba(255, 255, 255, 0.1)); /* 🐚 FAROL – Fase 2 */
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.user-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

/* 4. A Foto do Usuário (Tamanho fixo anti-erro) */
.avatar-busca {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #e48c29;
    flex-shrink: 0 !important;
}

.avatar-busca .perfil-gold {
    border-color: var(--dourado);
}

/* 5. Textos dentro do Card */
.nome-user {
    display: block;
    color: #ffffff;                                               /* fallback */
    color: var(--texto-primario, #ffffff);                        /* 🐚 FAROL – Fase 2 */
    font-size: 1.1rem;
    font-weight: bold;
}

.username-user {
    color: var(--dourado);
    font-size: 1rem;
    opacity: 0.8;
}

.erro-fenda {
    color: #ff4b2bc7 !important;
    padding: 10px;
    border-radius: 8px;
    text-align: center !important;
    margin-top: 15px;
    min-height: 300px;
}


/* --- LOGIN MODO SR-71 STEALTH (TOTALMENTE INVISÍVEL) --- */

.fenda-glass-container {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none !important;
    box-shadow: none;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

/* Mantendo os inputs visíveis no escuro */
form[action="confirma-login.php"] input[type="email"],
form[action="confirma-login.php"] input[type="password"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 187, 0, 0.288);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


/* Card de boas-vindas para não ficar colado */
.card-boas-vindas-fenda {
    text-align: center;
    color: #fff; 
    color: oklch(100% 0.00011 271.152);
    margin: 25px auto;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
}

/* AJUSTES PARA COMPLEMENTAR O MODO HACKER */
h2.titulo-home {
    font-size: 1.8rem;
    font-size: clamp(1.4rem, 1.5vw, 2rem);
    text-align: center;
    margin: 30px auto;
   
}

.img-home-capa {
    border-radius: 20px;
    -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    /* Não deixa colar nas bordas do iPhone/Lumia */
    max-width: clamp(300px, 100%, 800px);
    height: auto;
    margin: 20px auto;
    /* Reforça a centralização */
    display: block;
    /* Mantém o estilo da Fenda */

}

article.conteudo-principal {
    font-size: clamp(14px, 2.5vw, 18px);
    line-height: 1.6;
    margin-top: 25px;
    margin-bottom: 15px;
    text-align: left;
    color: #e0e0e0;
    color: oklch(0.9067 0 0);
    /* Ativa o kerning (espaçamento) de alta qualidade */
    font-kerning: normal;
  
  /* Ativa as ligaduras padrão (ex: fi, fl) e evita ligaduras raras/decorativas */
    font-variant-ligatures: common-ligatures no-discretionary-ligatures;
  
  /* Fallback para navegadores antigos que entendem apenas o motor SVG */
    text-rendering: optimizeLegibility; 
    max-width: clamp(300px, 100%, 800px);
}


.aviso-legal {
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 20px;
    color: #a6d4eeee;
    color: oklch(0.8462 0.0603 233.17 / 93.3%);
}

.citacao-anarquica {
    border-left: 5px solid #00ff00c7;
    padding: 15px;
    margin: 25px 0;
    font-style: italic;
    background: rgba(255, 255, 255, 0.096);
}

.conselho-header {
    font-size: clamp(1rem, 1.3vw, 1.5rem);
    border-bottom: 1px dotted #fff3504f;
    font-weight: 600;
}

.bloco-conselhos {
    padding: 10px;
    background: rgba(255 255 255 / 5%);
    background: oklch(1 0 0 / 5%);
    border-radius: 15px;
    border-top: 2px solid #fff350f3;
    border-bottom: 2px solid #fff350f3;
}

.lista-conselhos {
    font-weight: bold;
    text-align: left;
    margin: 30px 0;
    color: #ff9900da;
}

.lista-conselhos li {
    transition: all 0.3s ease;
    /* Transição suave para o efeito não ser seco */
    cursor: pointer;
    margin-bottom: 10px;
    display: block;
    /* Garante que o item ocupe a largura disponível */
}

/* O "Pulo do Gato": Hover individual */
.lista-conselhos li:hover {
    transform: translateX(8px) scale(1.02);
    color: #ffcc00d5;
    filter: drop-shadow(0 0 8px rgba(255, 153, 0, 0.6));
}

/* Container Principal da Apresentação */
.presentation-deck {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cada "Slide" da nossa apresentação */
.fenda-slide {
    background: rgba(0, 0, 0, 0.473);                             /* fallback */
    background: var(--bg-modal-overlay, rgba(0, 0, 0, 0.473));    /* 🐚 FAROL – Fase 2 */
    border: 1px solid rgba(255, 255, 255, 0.08);                  /* fallback */
    border: 1px solid var(--borda-media, rgba(255, 255, 255, 0.08)); /* 🐚 FAROL – Fase 2 */
    border-radius: 20px;
    padding: clamp(8px, 2.5dvh, 20px) clamp(8px, 2.5dvh, 20px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: transform 0.3s ease, border-color 0.3s ease;
    margin: 20px auto;
}

.fenda-slide:hover {
    transform: translateY(-8px);
    border-color: rgba(252, 144, 12, 0.3);
    /* Brilho sutil com o dourado/laranja da Fenda */
}

/* Títulos dos Slides */
.slide-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: #fc900c;                                                /* fallback */
    color: var(--cor-principal-laranja, #fc900c);                  /* 🐚 FAROL – Fase 2 (variável NOVA) */
    letter-spacing: 2px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.slide-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    background: #fc900c;                                           /* fallback */
    background: var(--cor-principal-laranja, #fc900c);             /* 🐚 FAROL – Fase 2 */
    border-radius: 2px;
}

/* Conteúdo de texto dos slides */
.slide-body {
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.5;
    color: #e0e0e0;                                                /* fallback */
    color: var(--texto-secundario, #e0e0e0);                       /* 🐚 FAROL – Fase 2 */
}

.slide-body p {
    margin-bottom: 15px;
}

/* Ajuste do layout dos Câmpus para casar com o Slide */
.campus-container {
    width: 100%;
    margin-top: 20px;
}

.campus-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Centraliza lado a lado no PC */
    align-items: center;
    /* Alinha verticalmente */
    gap: 20px;
    /* Espaço entre as fotos */
    max-width: 100%;
}

/* Alinhamento das tags picture */
.campus-flex img {
    display: block;
    text-align: center;
    max-width: 100%;
    max-height: 100vh;
    /* Garante o conteúdo centrado */
}

/* Correção e upgrade da imagem do Câmpus */
.campus-flex .img-campus {
    width: 280px;
    width: clamp(200px, 100vh, 300px);
    min-height: 200px;
    max-height: 100dvh;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    display: block;
    object-position: center;
    /* Remove espaços em branco inferiores */
}

.img-campus:hover {
    transform: scale(1.02);
}

/* Legenda das fotos do campus */
.legenda-campus {
    margin-top: 15px;
    opacity: 0.8;
    font-style: italic;
    text-align: center;
}

/* PÁGINA DE COMUNIDADES (ATLÉTICAS) */

.comunidade-topo {
    text-align: center;
    gap: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    flex:  1 1 auto;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 0 30px 30px;
    border-bottom: 1px solid rgba(255, 188, 0, 0.2);
    margin: 20px auto;
}

.img-comunidade-grande {
    max-width: 250px;
    max-height: 250px;
    object-fit: contain;
    display: flex;
    justify-content: center;
    align-self: center;
    align-content: center;
    filter: drop-shadow(0 0 10px rgba(255, 188, 0, 0.3));
}

.grid-habitantes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 15px;
    padding: 10px;
    max-width: 1600px;
    margin: 0 auto;
}

.card-habitante {
    background: #0a0a0a;                                            /* fallback */
    background: var(--bg-page-dark, #0a0a0a);                       /* 🐚 FAROL – Fase 2 */
    border: 1px solid #333;                                         /* fallback */
    border: 1px solid var(--borda-media, #333);                     /* 🐚 FAROL – Fase 2 */
    border-radius: 20px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    text-decoration: none;
    break-inside: avoid;
    text-overflow: ellipsis;
    word-break: break-word;
    /* Evita que cards enormes explodam o layout */
    overflow-wrap: break-word;
    max-width: 300px;
    margin: 20px auto;
    position: relative;
}

.card-habitante:hover {
    border-color: var(--dourado);
    border-color: var(--texto-dourado, var(--dourado, #ffbc00));     /* 🐚 FAROL – Fase 2 */
    transform: translateY(-6px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.avatar-lista {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #444;                                         /* fallback */
    border: 2px solid var(--borda-card, #444);                      /* 🐚 FAROL – Fase 2 */
}

.info-h h3 {
    margin: 0;
    color: #fff;                                                    /* fallback */
    color: var(--texto-primario, #fff);                             /* 🐚 FAROL – Fase 2 */
    font-size: 1rem;
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
}

.info-h p {
    margin: 10px 0 0;
    color: #888;                                                    /* fallback */
    color: var(--texto-muted, #888);                                /* 🐚 FAROL – Fase 2 */
    font-size: 0.84rem;
    font-size: clamp(0.78rem, 2cqi, 0.95rem);
}

/* CONTAINER DAS REGRAS - VISUAL FENDA */

/* ESTILO DA SEÇÃO PAI (DIRETRIZES) */
.secao-seguranca {
    background-color: rgba(105, 61, 10, 0.22);                    /* fica local – tom específico */
    /* Cor original que você estava usando */
    border-radius: 20px;
    padding: 10px;
    /* Valor de segurança que não entendem os clamps */
    padding: clamp(8px, 4vw, 20px);
    line-height: 1.4;
    border: 1px solid rgba(252, 144, 12, 0.2);                    /* fica local – border sutil */
    /* Uma bordinha bem sutil laranja */
    transition: all 0.3s ease;
}

.secao-seguranca h2 {
    color: #fc900c;                                                /* fallback */
    color: var(--cor-principal-laranja, #fc900c);                  /* 🐚 FAROL – Fase 2 */
    /* Laranja padrão da Fenda */
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    font-size: clamp(1.1rem, 5vw, 1.8rem);
}

.secao-seguranca p {
    color: #ffffff;                                                /* fallback */
    color: var(--texto-primario, #ffffff);                         /* 🐚 FAROL – Fase 2 */
    font-size: 14px ;
    font-size: clamp(14px, 2.5vw, 18px);
    margin-bottom: 15px;
}

.box-diretrizes {
    background: rgba(255, 255, 255, 0.05);
    /* Um fundo bem sutil */
    border-left: 4px solid #fc900c;
    /* O laranja que você curtiu */
    padding: 6px;
    padding: clamp(8px, 3vw, 20px);
    -webkit-hyphens: auto;
    /*Safari/Chrome*/
    -ms-hyphens: auto;
    /*IE/Edge */
    hyphens: auto;
    word-wrap: break-word;
    white-space: wrap;
    margin: 15px 0;
    border-radius: 10px;
    margin: 20px 0;
    display: block;
}


.box-diretrizes ul {
    list-style-type: none;
    /* Vamos tirar as bolinhas padrão */
    padding: 0 ;
    margin: 0;
}

.box-diretrizes li {
    color: #e0e0e0;
    color: oklch(90.67% 0.0001 271.152);
    /* Cinza claro: aparece bem no fundo branco e no preto */
    margin-bottom: 15px;
    line-height: 1.6;
    position: relative;
    padding-left: 20px;
    list-style: none;
    font-size: 13px;
    font-size: clamp(13px, 2.5vw, 16px)
}


/* Colocando uma setinha estilizada no lugar da bolinha */
.box-diretrizes li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: #fc900c;                                                /* fallback */
    color: var(--cor-principal-laranja, #fc900c);                  /* 🐚 FAROL – Fase 2 */
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.box-diretrizes li strong {
    color: #ffffff;                                                /* fallback */
    color: var(--texto-primario, #ffffff);                         /* 🐚 FAROL – Fase 2 */
    /* Deixa o título do item bem visível */
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* --- AJUSTE CORRIGIDO PARA O FORMULÁRIO MOBILE --- */

.config-item {
    justify-content: left;
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    justify-content: center;
    align-content: center;
    font-family: -apple-system, 'Urbanist', sans-serif;
    font-size: 0.87rem;
    font-size: clamp(0.92rem, 1.5vw, 1.1rem);
}

input[type="checkbox" i] {
    height: 12px;
    width: 12px;
    height: clamp(13px, 1.3cqi, 18px);
    width: clamp(13px, 1.3cqi, 18px);
    margin: 4px auto;
    accent-color: #efb71c;
    accent-color: oklch(80.867% 0.16047 85.448);
}

/* OS CAMPOS (Organização vertical) */
.campo-grupo {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    margin-bottom: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    grid-column: span 1;

}

/* 4. Estilo dos Inputs para não vazarem */
input[type="text"],
input[type="password"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
}


/* Nome, Username e Bio unificados */
.campo-grupo input[type="text"],
.campo-grupo select,
.campo-grupo textarea,
.input-username-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* ISSO AQUI resolve o vazamento da Bio */
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.07);
    background: oklch(100% 0.00011 271.152 / 0.07);
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    color: oklch(100% 0.00011 271.152);
}

/* Formulários (criar/editar posts) – fundo escuro com leve vidro */
.form-container {
    display: flex;
    flex-direction: column;
    background: #00000094;
    background: oklch(0% 0 0 / 0.58);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px 20px;
    margin: 0 auto 20px auto;
}


/* Bio Ajustada */
.campo-grupo textarea {
    min-height: 120px;
    resize: none;
    padding: 12px;
}


textarea[name="bio"] {
    min-height: 120px;
    resize: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* Tooglezinho de Notificção */

.notificacao-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    /* Alinha com a direita do sino */
    top: calc(20% + 30px);
    /* Joga um pouco para baixo do sino */
    width: 260px;
    background: rgba(10, 25, 41, 0.98);
    background: oklch(20.926% 0.03813 251.502 / 0.98);
    /* Fundo bem sólido para não vazar o que está atrás */
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px 6px 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    /* A MÁGICA AQUI: */
    z-index: 10000;
    /* Valor absurdamente alto para ganhar da navbar */
    overflow: hidden;
}

.item-notif-rapida {
    display: flex;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.item-notif-rapida:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notif-nova {
    border-left: 3px solid var(--dourado);
    border-left: 3px solid var(--texto-dourado, var(--dourado, #ffbc00)); /* 🐚 FAROL – Fase 2 */
    background: rgba(221, 200, 14, 0.05);                          /* fica local – cor específica */
}

.notif-avatar {
    width: 38px;
    height: 38px;
     /* Fallback */
    background: transparent;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    font-size: 0.8rem;
}

.notif-txt {
    display: flex;
    flex-direction: column;
}

.notif-txt strong {
    font-size: 0.85rem;
    color: var(--dourado);
    color: var(--texto-dourado, var(--dourado, #ffbc00));         /* 🐚 FAROL – Fase 2 */
}

.notif-txt span {
    font-size: 0.8rem;
    opacity: 0.9;
}

.notif-txt small {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 2px;
}

.ver-todas-notif {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 0.8rem;
    color: var(--dourado);
    color: var(--texto-dourado, var(--dourado, #ffbc00));         /* 🐚 FAROL – Fase 2 */
    text-decoration: none;
    background: rgba(0, 0, 0, 0.2);                               /* fica local */
}

/* Efeito especial para o post do Leonardo */
.post-admin-gold {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
    position: relative;
}

.spotted-card.selo-adm::after {
    content: 'ADM';
    position: absolute;
    top: 5px;
    right: 40px;
    /* Ajuste conforme o menu de opções */
    font-size: 0.65rem;
    font-size: clamp(0.65rem, 1.8cqi, 0.95rem);
    font-weight: bold;
    color: #FFD700;                                                /* fica local – cor específica do selo */
    letter-spacing: 2px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}



/* ============================================================
   SISTEMA DE RESPONSIVIDADE "A FENDA" - CORREÇÃO LANDSCAPE
   ============================================================ */
/* CORREÇÃO DA MARGEM ESQUERDA NO IPHONE 4 (PORTRAIT) */


/* 1. CELULARES MUITO BAIXOS (iPhone 4 deitado, S20 deitado) */
@media (orientation: landscape) and (max-height: 360px),
(orientation: portrait) and (max-height: 480px) {

    /* Forçamos 1 coluna só. 2 colunas em 320px de altura é suicídio de layout */
    main.container-feed {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        /* Espaço para a navbar não cobrir o post */
    }


    /* O Card precisa ser mais "magro" em altura para caber na tela */
    article.spotted-card {
        width: 100%;
        max-width: 400px;
        gap: 4px;
        padding: 6px;
    }


    #conteudo-principal.main-perdidos {
        padding: 10px;
    }


    /* Esconde elementos não essenciais para ganhar altura */
    .avatar-p {
        width: 38px;
        height: 38px;
    }

    /* Reseta o main-perdidos que estava deslocado */
    #conteudo-principal.main-perdidos {
        display: flex;
        flex-direction: column;
        left: 0;
        right: 0;
        margin: 12px auto;
        padding: 4px;
    }


    /* Garante que o container do feed não tenha padding lateral */
    body:not(.modo-swipe-ativo) .container-feed,
    .main-perdidos .feed-anexos-grid {
        margin: 6px auto;
        width: 100%;
        grid-template-columns: 1fr;
        padding: 10px;
    }

    /* Os cards ocupam a largura total sem margem extra */
    .spotted-card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    body:not(.modo-swipe-ativo) .feed-anexos-grid {
        grid-template-columns: repeat(2, minmax(40px, 80px));

    }

    .modo-tinder-ativo .bt-controles {
        top: calc(10% + 30px);
        max-height: 15vh;
        max-height: 15dvh;
    }


    footer {
        /* Garante que ele saia debaixo de floats */
        padding: 6px 12px 12px 6px;
        font-size: 0.8rem;
        line-height: 1.3;

    }

    header {
        padding: 4px 2px;
    }

    .area-perdidos-vivo {
        justify-content: space-between;
        display: flex;
        flex-direction: column;
    }


}


/* 2. CELULARES EM PÉ (Portrait) - O padrão que já funciona */
@media screen and (max-width: 600px) and (orientation: portrait) {
    main.container-feed {
        display: grid;
        grid-template-columns: 1fr;
        padding: 10px;
    }

}


/* 3. TABLETS E CELULARES LARGOS (S20 Ultra Normal) */
@media screen and (min-width: 601px) and (min-height: 421px) {
    main.container-feed {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

}


/* ============================================================
    AJUSTES MOBILE (MENU, GAVETA, ETC.)
   ============================================================ */
@media (max-width: 768px) {

    .form-perdidos-vivo {
        flex-direction: row;
    }

    /* Força o botão de toggle e a área de texto a ficarem alinhados */
    .toggle-perdidos-vivo {
        flex-direction: column;
        flex-shrink: 0;
        justify-content: center;
    }

    .form-publicar.form-perdidos-vivo {
        flex-direction: row;
    }

    .form-publicar.form-perdidos-vivo .toggle-perdidos-vivo {
        display: flex;
        flex-direction: row;
        width: auto;
        flex-shrink: 0;
        justify-content: center;
    }

    .chat-input-container {
        justify-content: space-between;
    }

    section.sessao-publicar {
        max-width: 100%;
        width: 100%;
    }

    #form-comentario {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar-fenda {
        display: block !important;
        visibility: visible !important;
        max-width: 250px;
        max-height: 100vh;
        position: fixed !important;
        top: 0;
        left: 0;
    }

    .sidebar-fenda .menu {
        display: flex;
        flex-direction: column;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .menu.ativa {
        display: flex;
    }

    #btn-menu-hamburguer {
        display: block;
    }

    .drawer-perfil-container {
        width: 85%;
    }

    /* 1. Registra a propriedade para permitir a animação suave do ângulo do gradiente */
    @property --angulo-motoserra {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    body.modo-swipe-ativo .filtros-wrapper-retratil.aberto {
        top: 40px;
        top: calc(1cqi + 10px);
    }

    body:not(.modo-swipe-ativo) #btn-abrir-filtros {
        display: block;
        position: fixed;
        top: calc(10% + 10px);
        gap: 6px;
        left: 50%;
        transform: translate3d(-50%, -50%, 0px);
        transform: translate(-50%, -50%);
        z-index: 9995;
        color: #000;
        padding: 4px 10px;
        padding: clamp(4px, 1cqw, 8px) clamp(8px, 1cqw, 16px);
        font-size: 0.75rem;
        font-size: clamp(0.8rem, 1.4cqw, 1.15rem);
        border-radius: 40px;
        font-weight: bold;
        white-space: nowrap;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        /* Fallback estrutural e visual para navegadores velhos */
        background: #ffffff;
        border: 2px solid #ff8c00;;
    }


    /* O contorno "motosserra" que corre perfeitamente fixo no eixo */
    body:not(.modo-swipe-ativo) #btn-abrir-filtros::before {
        content: '';
        position: absolute;
        inset: -3px;
        /* Espessura da borda um pouquinho maior*/
        border-radius: inherit;
        z-index: -1;
        /* Fallback de degradê estático para navegadores velhos */
        background: linear-gradient(90deg, #ff8c00, #ff007f);
        /* O segredo: passamos a variável do ângulo aqui dentro */
        background: conic-gradient(from var(--angulo-motoserra), oklab(75.053% 0.09416 0.15231), oklab(64.50399999999999% 0.25982 0.01255), oklab(87.006% -0.13649 -0.05769), oklab(75.053% 0.09416 0.15231));
        /* Máscara para manter o centro do botão limpo (branco) */
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        padding: 2px;
        /* Animação que altera apenas o ângulo do gradiente, sem mover o elemento */
        animation: rodarMotoserra 3s linear infinite;
    }

    body:not(.modo-swipe-ativo) .filtros-wrapper-retratil .filtros-container {
        display: none;
    }

    body:not(.modo-swipe-ativo) .filtros-wrapper-retratil.aberto .filtros-container {
        top: 20%;
        top: calc(20% + 20px);
        left: 50%;
        transform: translate3d(-50%, -50%, 0px);
        transform: translate(-50%, -50%);
        display: inline-flex;
        background: #111;
        background: oklch(0.1 0 0);
        color: #000;
        color: oklch(0 0 0);
        gap: 10px;
        padding: 40px 15px 25px 15px;
        border-radius: 0 0 20px 20px;
        font-size: 0.76rem;
        font-size: clamp(0.8rem, 1.5cqi, 1rem);
        font-weight: bold;
        white-space: nowrap;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        max-height: 35vh;
        z-index: 98;
        position: fixed;
        overflow-y: auto;
        border-bottom: 3px solid #ff8c00;
        will-change: opacity, animation;
        /* CORRIGIDO: Injeta a animação clássica de abertura controlada pela curva cubic-bezier */
        animation: slideDownFiltro 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* Anima apenas os graus do gradiente (de 0 a 360) */
    @keyframes rodarMotoserra {
        to {
            --angulo-motoserra: 360deg;
        }
    }

    /* Nova Keyframe específica para o contêiner fixo centralizado */
    @keyframes slideDownFiltro {
        from {
            /* Mantém o alinhamento em X (-50%) e desliza o Y de cima para a posição correta */
            transform: translate(-50%, -150%);
            opacity: 0;
        }

        to {
            transform: translate(-50%, -50%);
            opacity: 1;
        }
    }


    .lista-comentarios-social {
        padding: 20px 12px 30px 12px;
        max-width: 550px;
    }

    .gaveta-opcoes {
        padding: 12px;
        gap: 8px;
    }

    .textarea-chat {
        font-size: 0.85rem;
        padding: 8px;
    }

    .form-perdidos-vivo {
        padding: 10px;
        border-radius: 12px;
        justify-content: center;
    }

    .barra-perdidos-vivo {
        flex-direction: column;
        align-items: stretch;
    }

    .barra-perdidos-vivo .acoes-esquerda,
    .barra-perdidos-vivo .acoes-direita {
        justify-content: center;
    }

    .btn-lancar-perdidos {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .btn-toggle-perdido {
        max-width: 100%;
        flex: 1 1 50%;
    }

    .area-post-vivo .barra-acoes-vivo {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    .acoes-esquerda,
    .acoes-direita {
        justify-content: center;
    }

    .btn-lancar-vivo {
        width: 100%;
        justify-content: center;
    }

    .btn-lancar {
        flex: 1 1 100%;
        border: none;
        padding: 6px 10px;
        border-radius: 15px;
    }

}

    /* O efeito motosserra completo isolado para navegadores modernos */
@supports (background: conic-gradient(from 0deg, red, blue)) and (mask-composite: exclude) {
    body:not(.modo-swipe-ativo) #btn-abrir-filtros {
        border: none; /* Remove a borda simples se o navegador for moderno */
    }
}

@media (min-width: 769px) {
    body:not(.modo-swipe-ativo) #btn-abrir-filtros {
        display: none;
    }

    body:not(.modo-swipe-ativo) .filtros-wrapper-retratil {
        display: block;
        position: relative;
        background: transparent;
        backdrop-filter: none;
        padding: 10px;
        margin: 15px 0;
        box-shadow: none;
    }

    body:not(.modo-swipe-ativo) .filtros-wrapper-retratil .filtros-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    body.modo-swipe-ativo .filtros-wrapper-retratil.aberto {
        top: 40px;
        transform: translateX(-50%);
    }

    .lista-comentarios-social {
        padding: 30px 20px;
        max-width: 700px;
    }

    .sticky-header {
        max-height: 30vh;
    }


    .central-conteudo #central-body {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        align-items: flex-start;
        gap: 15px;

    }

    .central-conteudo {
        border-radius: 12px;
        padding: 10px;
        margin: 10px auto;
        min-height: 200px;
    }

    .central-usuario-container {
        gap: 15px;
        padding: 10px;

    }


}


@media (orientation: landscape) and (max-height: 500px) {
    body.modo-swipe-ativo .filtros-wrapper-retratil.aberto {
        top: 30px;
        max-height: 45dvh;
    }
    .drawer-perfil-container {
        max-width: 70%;
    }

    .main-perfil-container-publico .capa-container {
        width: 100%;
        max-width: 600px;
        max-height: 230px;
        aspect-ratio: 600 / 230;
    }

    .main-perfil-container-publico .avatar-posicionador {
        position: absolute;
        bottom: -70px;
        bottom: clamp(-70px, 10cqi, -110px);
        width: clamp(70px, 10cqi, 110px);
        height: clamp(70px, 10cqi, 110px);
        aspect-ratio: 1/1;
    }

    .bt-galeria-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

}


/* Container Pai - Fica no canto inferior direito */
.fenda-nexus {
    position: fixed;
    bottom: 20%;
    right: 15px;
    padding-bottom: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    /* Abre para cima */
    align-items: flex-end;
    gap: 15px;
}

#fenda-nexus {
    transition: opacity 0.3s ease;
}

/* Quando um modal abre, podemos dar um leve fade-out no Nexus para focar no conteúdo */
body.modal-aberto #fenda-nexus {
    opacity: 0.3;
    pointer-events: none;
    /* Impede cliques no Nexus enquanto o modal estiver aberto */
}


/* O Botão Principal (O "Leque" fechado) */
.nexus-trigger {
    width: 60px;
    width: clamp(40px, 8vmin, 95px);
    background: var(--dourado, #ffbc00);
    background: var(--texto-dourado, var(--dourado, #ffbc00));      /* 🐚 FAROL – Fase 2 */
    border-radius: 50% !important;
    aspect-ratio: 1/1;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Estado Aberto - Rotação do botão */
.fenda-nexus.aberto .nexus-trigger {
    transform: rotate(45deg);
}

/* Lista de Ações (O Leque) */
.nexus-menu {
    display: none;
    /* Escondido por padrão */
    flex-direction: row-reverse;
    gap: 10px;
    margin-bottom: 10px;
    width: fit-content;
}

.fenda-nexus.aberto .nexus-menu {
    display: flex;
    animation: surgimentoMenu 0.3s ease-out;
}

.nexus-item {
    background: rgba(20, 11, 0, 0.397);                             /* fica local – marrom específico */
    border: 1px solid var(--cor-borda-glow, #00ff00);
    padding: 10px;
    border-radius: 12px;
    color: #fff;                                                    /* fallback */
    color: var(--texto-primario, #fff);                             /* 🐚 FAROL – Fase 2 */
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    font-size: clamp(0.9rem, 0.382vw + 0.625rem, 1.3rem);
}

@keyframes surgimentoMenu {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* O botão ativo fica com destaque */
.nexus-item.active {
    background: rgba(255, 255, 255, 0.2);                           /* fica local – alpha específico */
    border: 1px solid #fff;                                         /* fallback */
    border: 1px solid var(--texto-primario, #fff);                  /* 🐚 FAROL – Fase 2 */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    /* Um glow extra */
}

#bussola-svg {
    display: inline-block;
    vertical-align: middle;
}

/* Garante que o SVG fique centralizado no botão */
.nexus-trigger svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    /* Ocupa 75% do espaço do botão */
    height: 75%;
    /* Ocupa 75% do espaço do botão */
    display: block;
}

/* O Ponteiro: Animação suave e origem no centro */
#ponteiro-bussola {
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Classes de rotação (que o JS vai aplicar) */
.girar-0 {
    transform: rotate(0deg);
}

/* Norte */
.girar-90 {
    transform: rotate(90deg);
}

/* Leste */
.girar-180 {
    transform: rotate(180deg);
}

/* Sul */
.girar-270 {
    transform: rotate(270deg);
}

/* Oeste */

/* Link para Página Especializada ( Achados & Perdidos) */
.link-pagina-especializada {
    margin-top: 8px;
    text-align: center;
    opacity: 0.75;
    color: #ffffff;                                              /* fallback */
    color: var(--texto-primario, #ffffff);                       /* 🐚 FAROL – Fase 2 */
    font-weight: bold;
    font-size: clamp(0.7rem, 2vw, 0.95rem);
}

.link-pagina-especializada a {
    color: var(--dourado);
    color: var(--texto-dourado, var(--dourado, #ffbc00));         /* 🐚 FAROL – Fase 2 */
    text-decoration: none;
}

.link-pagina-especializada a:hover {
    text-decoration: underline;
}


/* ==================================================
   GRID DE ANEXOS (COMPARTILHADO – COMENTÁRIOS E MODAL POST, ACHADOS E PERDIDOS, ETC.)
   ================================================== */
/* Estiliza o botão de clique em QUALQUER input de arquivo do site */
input[type="file"]::file-selector-button {
    background-color: #2ecc71;
    font-size: clamp(0.8rem, 0.8vw, 1rem);
    color: #f1f1f1;
    color: oklch(0.95 0 0);
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;

    /* Efeito seguro para PC e Celular: Transição suave de opacidade */
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* Efeito exclusivo para computadores (não trava no touch do celular) */
@media (hover: hover) {
    input[type="file"]::file-selector-button:hover {
        background-color: #27ae60;
        opacity: 0.9;
    }
}



.anexos-grid-post {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(255, 255, 255, 0.06);
    padding: 4px 0 4px 0;
    width: 100%;
}

.anexos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 4px 0;
    width: 100%;
}

.anexo-item {
    position: relative;
    width: 64px;
    height: 64px;
    width: clamp(60px, 12cqi, 120px);
    height: clamp(60px, 12cqi, 120px);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

section.sessao-publicar .form-publicar .anexos-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    grid-auto-rows: minmax(100px, auto);
    padding: 6px 0 6px 0;
    align-items: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
}

.anexo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Botão de remover – unificado */
.btn-remover-anexo {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    width: clamp(14px, 2.5cqw, 22px);
    height: clamp(14px, 2.5cqw, 22px);
    font-size: 9px;
    font-size: clamp(9px, 1cqw, 14px);
    cursor: pointer;
    background-clip: padding-box;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: 0.2s;
    backdrop-filter: blur(1px);
}

.btn-remover-anexo:hover {
    background: rgba(255, 50, 50, 0.8);
    transform: scale(1.05);
}

/* Spinner de upload */
.anexo-item .spinner-anexo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0px);
    transform: translate(-50%, -50%);
    color: #ffbc00;
    font-size: 1.1rem;
    animation: spin 2s linear infinite;
    display: none;
    /* oculto por padrão */
}

.anexo-item.uploading img {
    opacity: 0.4;
}

.anexo-item.uploading .spinner-anexo {
    display: block !important;
}


/* ============================================================
   NOTIFICAÇÕES – PÁGINA DEDICADA (CSS PURO, SEM INLINE)
   ============================================================ */

/* Container principal */
.notificacoes-page {
    max-width: 300px;
    max-width: clamp(300px, 90%, 600px);
    margin: 20px auto;
    margin: clamp(15px, 4vh, 40px) auto;
    padding: 8px;
    padding: clamp(6px, 2vw, 15px);
    box-sizing: border-box;
}

/* Cabeçalho com título e botão */
.notificacoes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-bottom: clamp(12px, 3vw, 24px);
    flex-wrap: wrap;
    gap: 6px;
    gap: clamp(6px, 1.5vw, 15px);
}

.notificacoes-header h2 {
    color: var(--dourado, #ffbc00);
    margin: 0;
    font-size: 1rem;
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    display: flex;
    align-items: center;
    gap: 5px;
    gap: clamp(4px, 1vw, 10px);
}

.notificacoes-header h2 i {
    color: inherit;
}

/* Botão "Marcar todas" – sem inline */
.btn-marcar-todas {
    font-size: 0.75rem;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    padding: 4px 10px;
    padding: clamp(4px, 0.6vw, 8px) clamp(10px, 1.5vw, 18px);
    background: rgba(255, 188, 0, 0.12);
    color: var(--dourado, #ffbc00);
    color: oklch(0.834633 0.17177 82.5648);
    border: 1px solid rgba(255, 188, 0, 0.15);
    border-radius: 30px;
    cursor: pointer;
    transition: 0.2s;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
}

.btn-marcar-todas:hover {
    background: rgba(255, 188, 0, 0.2);
    border-color: var(--dourado, #ffbc00);
    transform: scale(1.02);
}

.btn-marcar-todas:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Lista de notificações */
.notificacoes-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    gap: clamp(6px, 1.5vw, 14px);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.notificacao-item {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

/* Link que envolve o card */
.notificacao-link {
    text-decoration: none;
    color: inherit;
    display: block;
    flex: 1;
    min-width: 0;
    transition: transform 0.15s ease;
}

.notificacao-link:hover .notificacao-card {
    transform: none;
}

.btn-excluir-notificacao {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #ffb4b4;
    border-radius: 10px;
    width: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-excluir-notificacao:focus-visible {
    outline: 2px solid #ffbc00;
    outline-offset: 2px;
}

.item-notif-rapida-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.item-notif-rapida-wrap .item-notif-rapida {
    flex: 1;
    min-width: 0;
}



/* Card individual */
.notificacao-card {
    background: rgba(255, 255, 255, 0.05);
    background: oklch(1 0 0 / 0.05);
    padding: 8px;
    padding: clamp(10px, 2vw, 18px);
    border-radius: clamp(8px, 1.2vw, 14px);
    border-left: 2px solid var(--borda-esquerda, transparent);
    border-left: clamp(3px, 0.5vw, 6px) solid var(--borda-esquerda, transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s, transform 0.15s;
    box-sizing: border-box;
}

/* Destaque para não lidas */
.notificacao-card.nova {
    border-left-color: var(--dourado, #ffbc00);
    background: rgba(255, 188, 0, 0.04);
    background: oklch(83.276% 0.17139 82.036 / 0.04);
}

/* Conteúdo textual */
.notificacao-conteudo {
    flex: 1;
    min-width: 0;
}

.notificacao-conteudo p {
    margin: 0;
    font-size: 0.8rem;
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    color: #fff;
    color: oklch(1 0 0);
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.notificacao-data {
    font-size: 0.6rem;
    font-size: clamp(0.65rem, 1.4vw, 0.9rem);
    color: rgba(255, 255, 255, 0.6);
    color: oklch(1 0 0 / 0.6);
    display: inline-block;
    margin-top: clamp(2px, 0.4vw, 6px);
}

.notificacao-data i {
    margin-right: 4px;
}

/* Indicador de não lida (bolinha dourada) */
.notificacao-indicador {
    display: inline-block;
    width: 5px;
    height: 5px;
    width: clamp(6px, 1vw, 10px);
    height: clamp(6px, 1vw, 10px);
    border-radius: 50%;
    background: var(--dourado, #ffbc00);
    flex-shrink: 0;
    margin-left: 5px;
    margin-left: clamp(6px, 1.5vw, 14px);
}

/* Estado vazio */
.notificacao-empty {
    text-align: center;
    color: #666;
    color: oklch(0.6 0 0);
    margin-top: 15px;
    margin-top: clamp(20px, 5vh, 50px);
    padding: 8px;
    padding: clamp(10px, 2vw, 30px);
    font-size: 0.85rem;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

/* ============================================================
   FALLBACKS PARA NAVEGADORES ANTIGOS
   ============================================================ */
@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
    .notificacoes-header h2 {
        font-size: 1.5rem;
    }

    .notificacao-conteudo p {
        font-size: 1rem;
    }

    .notificacao-data {
        font-size: 0.8rem;
    }

    .btn-marcar-todas {
        font-size: 0.8rem;
        padding: 4px 12px;
    }

    .notificacao-card {
        padding: 14px;
        border-left-width: 4px;
    }

    .notificacao-indicador {
        width: 8px;
        height: 8px;
    }

    .notificacoes-page {
        max-width: 600px;
        margin: 30px auto;
        padding: 15px;
    }
}

@supports not (background: oklch(1 0 0 / 0.05)) {
    .notificacao-card {
        background: rgba(255, 255, 255, 0.05);
    }

    .notificacao-card.nova {
        background: rgba(255, 188, 0, 0.04);
    }

    .notificacao-conteudo p {
        color: #fff;
    }

    .notificacao-data {
        color: rgba(255, 255, 255, 0.6);
    }

    .notificacao-empty {
        color: #666;
    }
}

/* ============================================================
   RESPONSIVIDADE (APENAS UMA MEDIA QUERY ESSENCIAL)
   ============================================================ */
@media (max-width: 480px) {
    .notificacoes-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .btn-marcar-todas {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 8px;
        font-size: 0.8rem;
    }

    .notificacao-card {
        padding: 12px;
    }
}



/* ---------------------------------------------------------------
    MODO DE SEGURANÇA PARA REDUÇÃO DE MOVIMENTO (OTIMIZADO)
   --------------------------------------------------------------- */
/* 🌅 FAGULHA — Fase 3: body.hacker-mode → [data-theme="hacker"] */
@media (prefers-reduced-motion: reduce) {

    [data-theme="hacker"] body::before,
    [data-theme="hacker"] body::after,
    [data-theme="hacker"] body .post-content,
    .main-perfil-container-publico.vibe-neon,
    [data-theme="hacker"] body .comentario-texto,
    [data-theme="hacker"] body .hacker-booting,
    .modo-swipe-ativo .spotted-card,
    .main-perfil-container-publico.vibe-ads {
        animation: none !important;
    }

    .main-perfil-container-publico.vibe-ads::after,
    .main-perfil-container-publico.vibe-ads .perfil-header-container::before,
    .main-perfil-container-publico.vibe-ads .hex-item {
        animation: none !important;
        transition: none !important;
        /* Desativa transições para economizar processamento em celulares fracos */
        filter: none !important;
    }

    /* Mantém as colmeias fixas e os mocegos com a aura suavizada e estática */
    .main-perfil-container-publico.vibe-ads::after {
        opacity: 0.3;
        background-position: 0px 0px;
    }

    .main-perfil-container-publico.vibe-dark::after {
        opacity: 0.2;
        background-position: 0px 0px;
    }

    .main-perfil-container-publico.vibe-ads .perfil-header-container::before {
        display: none;
    }

     #fenda-toolbar,
    .sidebar-fenda {
        transition-duration: 0.01ms;
    }


    #central-body .item-notif-rapida,
    #central-body .item-notif-rapida-wrap,
    #central-body .btn-excluir-notificacao {
        transition: none;
    }

    .feedback-swipe {
        transition: none;
    }

     .social-collapse {
        transition-duration: 0.01ms;
    }

    
}