/* ==========================================================================
   1. IMPORTAÇÃO DE FONTES E VARIÁVEIS NATIVAS (TEMA CENTRAL)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Montserrat:wght@800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --janus-bg-dark: #07070A;       
    --janus-panel: #111116;         
    --janus-border: #2A1B38;        
    --janus-accent: #9c4be0;        
    --janus-accent-hover: #b873f2;  
    --janus-danger: #ff2a2a;        
    --janus-text-main: #D4D4DB;     
    --janus-text-muted: #7A7A8C;    
    --janus-text-title: #FFFFFF;    
    --sidebar-width: 320px; 

    /* Matriz controladora de fundos dinâmicos */
    --janus-accent-rgb: 156, 75, 224; 
}

/* ==========================================================================
   2. SCROLLBARS E BASE DA PÁGINA
   ========================================================================== */
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}

::-webkit-scrollbar-track { 
    background: var(--janus-bg-dark); 
}

::-webkit-scrollbar-thumb { 
    background: var(--janus-border); 
    border-radius: 10px; 
}

::-webkit-scrollbar-thumb:hover { 
    background: var(--janus-accent); 
}

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

body {
    background-color: var(--janus-bg-dark);
    color: var(--janus-text-main);
    font-family: 'Inter', sans-serif;
    margin: 0; 
    padding: 0;
    line-height: 1.6; 
    font-size: 15px;
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

.layout-intranet {
    display: flex;
    height: 100vh; 
    width: 100vw;
    overflow: hidden; 
    position: relative;
}

/* ==========================================================================
   3. BOTÃO DE CONTROLE DA BARRA LATERAL (HAMBÚRGUER / X)
   ========================================================================== */
.btn-toggle-sidebar {
    position: fixed;
    top: 25px; 
    left: 25px;
    z-index: 100;
    background: rgba(17, 17, 22, 0.85);
    border: 1px solid var(--janus-border);
    width: 45px; 
    height: 45px;
    cursor: pointer; 
    border-radius: 6px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-toggle-sidebar .icone-barra {
    display: block; 
    width: 20px; 
    height: 20px; 
    position: relative;
}

.btn-toggle-sidebar .icone-barra::before,
.btn-toggle-sidebar .icone-barra::after,
.btn-toggle-sidebar .icone-barra {
    background-color: var(--janus-accent);
    content: ""; 
    height: 2px; 
    position: absolute; 
    left: 0; 
    right: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-toggle-sidebar .icone-barra::before { 
    top: 6px; 
}

.btn-toggle-sidebar .icone-barra::after { 
    bottom: 6px; 
}

.btn-toggle-sidebar:hover {
    border-color: var(--janus-accent);
    box-shadow: 0 0 15px rgba(var(--janus-accent-rgb), 0.4);
    transform: scale(1.05);
}

/* Animação para o "X" quando o menu está fechado */
.btn-toggle-sidebar.ativo .icone-barra { 
    background-color: transparent !important; 
}

.btn-toggle-sidebar.ativo .icone-barra::before { 
    transform: translateY(6px) rotate(45deg); 
    background-color: var(--janus-danger); 
}

.btn-toggle-sidebar.ativo .icone-barra::after { 
    transform: translateY(-6px) rotate(-45deg); 
    background-color: var(--janus-danger); 
}

/* ==========================================================================
   4. BARRA LATERAL (PC E MOTOR DE OCULTAÇÃO)
   ========================================================================== */
.menu-lateral {
    background-color: var(--janus-bg-dark);
    border-right: 1px solid var(--janus-border);
    width: var(--sidebar-width);
    padding: 90px 15px 15px 15px; 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    flex-shrink: 0;
    box-shadow: 5px 0 25px rgba(0,0,0,0.6);
    z-index: 50; 
    box-sizing: border-box;
    /* Transição master que empurra o menu pro lado */
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Estado Fechado no PC */
.menu-lateral.recolhido {
    margin-left: calc(-1 * var(--sidebar-width)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.menu-scroll-container { 
    flex-grow: 1; 
    overflow-y: auto; 
    margin-bottom: 15px; 
    padding-right: 5px; 
}

.menu-inferior-fixo { 
    margin-top: auto; 
    padding-top: 15px; 
    border-top: 1px dashed var(--janus-border); 
    flex-shrink: 0; 
}

/* ==========================================================================
   5. BOTÕES DE CHAVEAMENTO (HUB <-> PARALAXES)
   ========================================================================== */
.btn-paralaxes {
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: rgba(255, 42, 42, 0.02);
    border: 1px solid rgba(255, 42, 42, 0.15);
    color: var(--janus-text-main);
    font-family: 'Space Mono', monospace; 
    font-size: 0.8em; 
    font-weight: bold;
    text-decoration: none; 
    padding: 14px; 
    border-radius: 4px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 1px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.btn-paralaxes:hover {
    background: rgba(255, 42, 42, 0.1); 
    border-color: var(--janus-danger);
    color: #ffffff; 
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.2); 
    transform: translateY(-2px);
}

/* Botão Azul de Retorno */
.btn-retorno-hub { 
    background: rgba(0, 150, 255, 0.02) !important; 
    border: 1px solid rgba(0, 150, 255, 0.15) !important; 
}

.btn-retorno-hub:hover { 
    background: rgba(0, 150, 255, 0.08) !important; 
    border-color: #0088ff !important; 
    box-shadow: 0 0 15px rgba(0, 136, 255, 0.2) !important; 
}

/* Luzes Pulsantes */
.pisca-alerta, .pisca-alerta-azul {
    width: 7px; 
    height: 7px; 
    border-radius: 50%; 
    margin-right: 12px; 
    display: inline-block;
}

.pisca-alerta { 
    background-color: var(--janus-danger); 
    box-shadow: 0 0 8px var(--janus-danger); 
    animation: pulsoLuzJanus 1.8s infinite ease-in-out; 
}

.pisca-alerta-azul { 
    background-color: #0088ff; 
    box-shadow: 0 0 8px #0088ff; 
    animation: pulsoLuzAzul 1.8s infinite ease-in-out; 
}

@keyframes pulsoLuzJanus { 
    0%, 100% { opacity: 0.3; transform: scale(0.9); } 
    50% { opacity: 1; box-shadow: 0 0 14px var(--janus-danger); transform: scale(1.1); } 
}

@keyframes pulsoLuzAzul { 
    0%, 100% { opacity: 0.3; transform: scale(0.9); } 
    50% { opacity: 1; box-shadow: 0 0 14px #0088ff; transform: scale(1.1); } 
}

/* ==========================================================================
   6. A ÁRVORE DE ARQUIVOS (OBSIDIAN STYLE)
   ========================================================================== */
.menu-obsidian { 
    font-family: 'Space Mono', monospace; 
    font-size: 0.85em; 
    letter-spacing: -0.5px; 
}

.menu-obsidian details { 
    margin-bottom: 2px; 
}

.menu-obsidian summary::-webkit-details-marker { 
    display: none; 
}

.menu-obsidian summary {
    cursor: pointer; 
    color: var(--janus-text-muted); 
    font-weight: 700;
    padding: 8px 10px; 
    user-select: none; 
    border-radius: 4px; 
    transition: all 0.2s ease; 
    text-transform: uppercase;
}

.menu-obsidian summary:hover { 
    background-color: rgba(var(--janus-accent-rgb), 0.08); 
    color: var(--janus-text-main); 
}

.menu-obsidian summary::before {
    content: "▸"; 
    display: inline-block; 
    width: 15px; 
    color: var(--janus-accent); 
    font-size: 1.2em; 
    transition: transform 0.2s ease;
}

.menu-obsidian details[open] > summary::before { 
    transform: rotate(90deg); 
}

.menu-obsidian details[open] > summary { 
    color: var(--janus-text-title); 
}

.menu-obsidian ul { 
    list-style-type: none; 
    padding-left: 20px; 
    margin: 5px 0 10px 10px; 
    border-left: 1px dashed var(--janus-border); 
}

.menu-obsidian li { 
    margin-bottom: 2px; 
}

.menu-obsidian a {
    color: var(--janus-text-muted); 
    text-decoration: none; 
    display: block;
    padding: 6px 10px; 
    border-radius: 4px; 
    transition: all 0.2s ease; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.menu-obsidian a:hover { 
    background-color: rgba(255,255,255,0.03); 
    color: var(--janus-text-main); 
    transform: translateX(3px); 
}

.menu-obsidian a.ativo {
    background-color: rgba(var(--janus-accent-rgb), 0.12); 
    color: var(--janus-accent-hover); 
    border-left: 2px solid var(--janus-accent);
}

.btn-hub-topo { 
    font-weight: bold; 
    border-left: 2px solid transparent; 
}

.btn-hub-topo:hover { 
    border-left: 2px solid var(--janus-accent-hover) !important; 
}

.btn-hub-topo.ativo { 
    background-color: rgba(var(--janus-accent-rgb), 0.15) !important; 
    color: var(--janus-accent-hover) !important; 
    border-left: 2px solid var(--janus-accent) !important; 
}

/* ==========================================================================
   7. ÁREA DE LEITURA (O PAINEL CENTRAL E MARKDOWN)
   ========================================================================== */
.conteudo-relatorio {
    flex-grow: 1; 
    background-color: var(--janus-panel);
    padding: 100px 50px 50px 50px; 
    overflow-y: auto; 
    position: relative;
    background-image: radial-gradient(circle at 50% 0%, #15151F 0%, transparent 75%);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* BLINDAGEM CONTRA O "FLEXBOX BLOWOUT" (ESTOURO DE TELA) */
    min-width: 0; 
    overflow-x: hidden; 
}

.documento { 
    max-width: 800px; 
    margin: 0 auto; 
    
    /* DESTRUIÇÃO UNIVERSAL DE STRINGS ININTERRUPTAS */
    word-break: break-all !important; 
    overflow-wrap: anywhere !important; 
}

.documento { 
    max-width: 800px; 
    margin: 0 auto; 
}

.documento h1, .documento h2, .documento h3, .documento h4 { 
    font-family: 'Montserrat', sans-serif; 
    color: var(--janus-text-title); 
    text-transform: uppercase; 
    margin-top: 1.6em; 
    margin-bottom: 0.6em; 
}

.documento h1 { 
    font-size: 2.4em; 
    border-bottom: 1px solid var(--janus-border); 
    padding-bottom: 15px; 
    font-weight: 900; 
}

.documento h2 { 
    font-size: 1.6em; 
    color: var(--janus-accent); 
}

.documento h3 { 
    font-size: 1.2em; 
    color: var(--janus-text-title); 
    border-left: 3px solid var(--janus-border); 
    padding-left: 10px; 
}

.documento a { 
    color: var(--janus-accent-hover); 
    text-decoration: none; 
    border-bottom: 1px solid rgba(var(--janus-accent-rgb), 0.3); 
    transition: 0.2s ease; 
}

.documento a:hover { 
    border-bottom: 1px solid var(--janus-accent-hover); 
    text-shadow: 0 0 8px rgba(var(--janus-accent-rgb), 0.6); 
}

.documento ul, .documento ol { 
    padding-left: 25px; 
    margin-bottom: 25px; 
}

.documento li { 
    margin-bottom: 10px; 
}

.documento li::marker { 
    color: var(--janus-accent); 
}

.documento p { 
    margin-bottom: 1.5em; 
    color: var(--janus-text-main); 
    text-align: justify; 
}

/* ==========================================================================
   8. ELEMENTOS ESPECIAIS E SEGURANÇA
   ========================================================================== */
.documento blockquote { 
    background-color: rgba(255,255,255,0.01); 
    border-left: 4px solid var(--janus-accent); 
    margin: 25px 0; 
    padding: 15px 25px; 
    font-style: italic; 
    color: #9A9AB0; 
    border-radius: 0 4px 4px 0; 
}

.caixa-alerta { 
    background-color: rgba(255, 42, 42, 0.03); 
    border: 1px solid rgba(255, 42, 42, 0.15); 
    border-left: 4px solid var(--janus-danger); 
    padding: 22px; 
    margin: 35px 0; 
    border-radius: 0 6px 6px 0; 
}

.caixa-alerta strong { 
    color: var(--janus-danger); 
    font-family: 'Montserrat', sans-serif; 
    letter-spacing: 1px; 
    font-size: 0.9em; 
    display: block; 
    margin-bottom: 5px; 
}

/* Correção de força bruta para blocos de código e strings massivas */
.documento pre, 
.documento pre code { 
    white-space: pre-wrap !important;       /* Permite que o bloco quebre linhas */
    word-wrap: break-word !important;       /* Força a quebra se a palavra for maior que a tela */
    word-break: break-all !important;       /* Destrói a regra de "não quebrar palavras" do navegador */
    overflow-x: hidden !important;          /* Garante a extinção da rolagem horizontal */
}

.documento pre { 
    background-color: #040407; 
    border: 1px solid var(--janus-border); 
    padding: 20px; 
    border-radius: 6px; 
    margin: 25px 0; 
}

.documento code { 
    font-family: 'Space Mono', monospace; 
    font-size: 0.9em; 
    color: #00FF88; 
}

.documento p code { 
    background-color: rgba(var(--janus-accent-rgb), 0.08); 
    color: var(--janus-accent-hover); 
    padding: 2px 6px; 
    border-radius: 4px; 
}

.documento table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 35px 0; 
    font-size: 0.95em; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}

.documento th { 
    background-color: rgba(var(--janus-accent-rgb), 0.08); 
    color: var(--janus-text-title); 
    font-family: 'Montserrat', sans-serif; 
    text-transform: uppercase; 
    text-align: left; 
    padding: 14px; 
    border-bottom: 2px solid var(--janus-accent); 
}

.documento td { 
    padding: 14px; 
    border-bottom: 1px solid var(--janus-border); 
}

.documento tr:hover td { 
    background-color: rgba(255,255,255,0.01); 
}

.documento img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 6px; 
    border: 1px solid var(--janus-border); 
    margin: 30px 0; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.7); 
}

.documento hr { 
    border: 0; 
    height: 1px; 
    background: linear-gradient(90deg, transparent, var(--janus-border), transparent); 
    margin: 50px 0; 
}

/* Blindagem Criptográfica (Textos Liberados e Censurados) */
.acesso-liberado { 
    color: #00ff88; 
    background-color: rgba(0, 255, 136, 0.08); 
    border-bottom: 1px dashed #00ff88; 
    padding: 2px 4px; 
    border-radius: 3px; 
    font-family: 'Space Mono', monospace; 
    font-size: 0.95em; 
}

.documento .tarja-preta { 
    background-color: #000000; 
    color: #000000; 
    padding: 0 4px; 
    border-radius: 2px; 
    user-select: none; 
    cursor: not-allowed; 
    position: relative; 
}

.documento .tarja-preta:hover { 
    color: #111; 
}

.documento .tarja-preta:hover::after {
    content: attr(title); 
    position: absolute; 
    bottom: 130%; 
    left: 50%; 
    transform: translateX(-50%);
    background-color: #cc0000; 
    color: #ffffff; 
    padding: 5px 10px; 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: bold; 
    white-space: nowrap; 
    pointer-events: none; 
    z-index: 100; 
    box-shadow: 0 0 10px rgba(204, 0, 0, 0.7); 
    animation: popup 0.2s ease-out forwards;
}

.documento .tarja-preta:hover::before { 
    content: ""; 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    border-width: 5px; 
    border-style: solid; 
    border-color: #cc0000 transparent transparent transparent; 
    z-index: 100; 
}

@keyframes popup { 
    from { opacity: 0; margin-bottom: -10px; } 
    to { opacity: 1; margin-bottom: 0; } 
}

/* ==========================================================================
   9. TEMA DE SUB-SISTEMA: PARALAXE (VERMELHO CRÍTICO ABSOLUTO)
   ========================================================================== */
body.theme-paralaxe {
    --janus-bg-dark: #0A0303;       
    --janus-panel: #050101;         
    --janus-border: #4A1A1A;        
    --janus-accent: #ff0000;        
    --janus-accent-hover: #ff4d4d;  
    --janus-danger: #ff0000;
    --janus-text-main: #E2D5D5;     
    --janus-text-muted: #8F7272;    
    --janus-text-title: #FFFFFF;
    
    /* Variável Mestra que converte todas as tabelas e hovers em Vermelho */
    --janus-accent-rgb: 255, 42, 42; 
}

body.theme-paralaxe .conteudo-relatorio { 
    background-image: radial-gradient(circle at 50% 0%, #2A0505 0%, transparent 75%); 
}

body.theme-paralaxe .documento p code { 
    background-color: rgba(var(--janus-accent-rgb), 0.08); 
    color: var(--janus-accent-hover); 
}

body.theme-paralaxe .documento li::marker { 
    color: var(--janus-accent); 
}

/* ==========================================================================
   10. RESPONSIVIDADE (MOBILE / DRAWER APP)
   ========================================================================== */
@media (max-width: 800px) {
    .layout-intranet { 
        display: block; 
    }
    
    .menu-lateral {
        position: fixed; 
        top: 0; 
        left: 0;
        height: 100vh; 
        height: 100dvh; 
        width: 85vw; 
        max-width: 320px;
        padding: 90px 15px 20px 15px;
        border-right: 1px solid var(--janus-border);
        z-index: 90; 
        margin: 0; 
        transform: translateX(0);
    }
    
    /* Estado Fechado no Celular */
    .menu-lateral.recolhido {
        transform: translateX(-100%) !important;
        margin-left: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .conteudo-relatorio { 
        padding: 90px 25px 50px 25px; 
        height: 100vh; 
        height: 100dvh; 
        overflow-y: auto; 
    }
    
    .btn-toggle-sidebar { 
        top: 15px; 
        left: 15px; 
        width: 45px; 
        height: 45px; 
    }
}