/* =========================================
   SHELL.CSS v2.5 - Estrutura Geral e Login Corrigido
   ========================================= */

/* --- VARIÁVEIS GLOBAIS --- */
:root {
    --gold: #C6A24A;    /* Cor Dourada Principal */
    --gold2: #E2C978;   /* Cor Dourada Secundária */
    --line: #2B3439;    /* Cor das linhas */
    --bg-dark: #0b1013; /* Fundo escuro */
    --text: #E7E3DA;    /* Cor do texto */
    --muted: #7f8c8d;   /* Cor de texto apagado */
    
    /* Controles de Posicionamento Widgets */
    --kickWidgetsX: 170px;
    --kickWidgetsY: 10px;
    --kickWidgetsScale: 0.75;
    
    /* Login - Agora controlado por Flexbox, variáveis zeradas para segurança */
    --loginBlockX: 0px; --loginBlockY: 0px; --loginBlockScale: 1;

    /* BDO Widget */
    --bdoBlockX: 0px; --bdoBlockY: 0px; --bdoBlockScale: 1.1;

    /* Garmoth Widget */
    --garmothX: 150px; --garmothY: 50%; --garmothScale: 0.70;
    --garmothTx: -30%; --garmothTy: -33%;
}

/* --- BARRA SUPERIOR (TOP BAR) --- */
#top-bar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 70px;
    background: #000;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 200;
    box-shadow: 0 5px 20px rgba(0,0,0,0.9);
}

/* =========================================
   ESQUERDA: WIDGETS
   ========================================= */
.bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    justify-content: flex-start;
    overflow: visible;
    position: relative;
    transform: translate(var(--kickWidgetsX), var(--kickWidgetsY)) scale(var(--kickWidgetsScale));
    transform-origin: left top;
}

/* WIDGET BDO */
.bdo-timer-widget {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 230px;
    height: 60px;
    padding: 0 12px;
    background: rgba(9, 14, 17, 0.95);
    border: 2px solid #FFD700;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    transform: translate(var(--bdoBlockX), var(--bdoBlockY)) scale(var(--bdoBlockScale));
    transform-origin: left center;
}

.bdo-icon-col {
    width: 48px; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: rgba(0,0,0,0.15); border-radius: 6px;
}
#bdo-ibdo-icon-sm { font-size: 20px; color: var(--gold); }

.bdo-info-col {
    display: flex; flex-direction: column; justify-content: center; height: 100%; padding-left: 12px; border-left: 2px solid #3a3a3a;
}
.bdo-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; line-height: 1; }
.bdo-time { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Estados Dia/Noite */
.bdo-timer-widget.is-day { border-color: #FFD700; box-shadow: 0 0 14px rgba(255, 215, 0, 0.25); }
.bdo-timer-widget.is-night { border-color: #9146FF; box-shadow: 0 0 14px rgba(145, 70, 255, 0.25); }
.bdo-timer-widget.is-night #bdo-ibdo-icon-sm { color: #9146FF; }

/* WIDGET GARMOTH */
.garmoth-mini-circle {
    position: relative; flex: 0 0 108px; width: 108px; height: 60px;
    border-radius: 0; overflow: visible; background: transparent; border: none; box-shadow: none;
    transform: translate(var(--garmothX), var(--garmothY)); transform-origin: left top;
}
.garmoth-mini-circle iframe {
    width: 600%; height: 250%; border: none; pointer-events: none;
    transform: scale(var(--garmothScale)) translate(var(--garmothTx), var(--garmothTy)); transform-origin: 0 0;
}

/* =========================================
   CENTRO: NAVEGAÇÃO
   ========================================= */
.bar-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
}
.header-titles { display: none; }
@media (min-width: 1400px) {
    .header-titles { display: flex; flex-direction: column; align-items: center; margin-bottom: 2px; }
    .main-title { font-size: 14px; color: var(--gold); font-weight: 800; margin: 0; }
}
.hub-navbar { display: flex; gap: 5px; }
.nav-btn {
    text-decoration: none; color: #aaa; font-size: 11px; font-weight: 600; text-transform: uppercase;
    padding: 5px 10px; border-radius: 4px; transition: 0.3s; border: 1px solid transparent;
}
.nav-btn:hover, .nav-btn.active {
    color: #fff; border-color: var(--gold); background: rgba(198, 162, 74, 0.1); box-shadow: 0 0 10px rgba(198, 162, 74, 0.1);
}

/* =========================================
   DIREITA: LOGIN (CORRIGIDO)
   ========================================= */
.bar-right {
    display: flex; 
    align-items: center; 
    justify-content: flex-end; /* Garante alinhamento à direita */
    width: auto; 
    min-width: 320px;
    z-index: 2100;
    /* Removido transform que causava deslocamento */
}

/* Container do Formulário */
#guest-area { 
    display: flex; 
    align-items: center; 
    /* Removemos posicionamento absoluto/relativo antigo */
}

/* O Formulário em si (Linha flexível) */
.login-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px; /* Espaço entre botão e inputs */
}

/* Coluna dos Inputs (Login/Senha + Links) */
.inputs-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinha inputs à direita */
    gap: 4px;
}

/* Campos de Texto (Inputs) */
.input-hub {
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid #333;
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    width: 140px;
    outline: none;
    transition: 0.2s;
    /* Resetando posições antigas */
    position: static; 
    top: auto; left: auto;
}
.input-hub:focus {
    border-color: var(--gold);
    background: #000;
}

/* Botão ENTRAR */
.btn-login-big {
    background: var(--gold);
    color: #000;
    font-weight: 800;
    border: none;
    height: 54px; /* Altura para alinhar com os 2 inputs */
    padding: 0 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(198, 162, 74, 0.2);
    transition: 0.2s;
    /* Resetando posições antigas */
    position: static;
    top: auto; left: auto;
}
.btn-login-big:hover {
    background: #fff;
    box-shadow: 0 0 15px rgba(198, 162, 74, 0.6);
}

/* Links pequenos (Esqueci senha / Criar conta) */
.link-register-sm {
    font-size: 9px;
    text-align: right;
    margin-top: 2px;
    /* Resetando posições antigas */
    position: static;
    top: auto; left: auto;
}
.link-register-sm a { color: #aaa; text-decoration: none; }
.link-register-sm a:hover { color: #fff; text-decoration: underline; }

/* Área Logada (Perfil) */
#user-logged-area {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #E7E3DA;
    font-weight: 500;
    text-transform: uppercase;
}
.user-name-text { color: var(--gold); cursor: default; font-weight: bold; font-size: 14px; }
.user-logout-btn { cursor: pointer; transition: 0.2s; font-size: 11px; color: #ccc; }
.user-logout-btn:hover { color: #fff; text-decoration: underline; }

/* =========================================
   ESTRUTURA GERAL (IFRAME DO SITE)
   ========================================= */
.mascara-url {
    display: flex; flex-direction: column; min-height: 100vh; width: 100vw; overflow: visible;
}
.site-frame {
    flex: 1; width: 100%; border: none; display: block; margin-top: 60px; height: calc(100vh - 60px);
}

/* ============================================================
   FIX MOBILE - RESET DE ESTRUTURA (TOP BAR APENAS)
   ============================================================ */
@media (max-width: 1081px) {
    /* Destravar posições do Top Bar para Mobile */
    .bar-center { position: static !important; transform: none !important; width: auto !important; height: auto !important; }
    .bar-left, .bar-right {
        width: auto !important; min-width: 0 !important; max-width: none !important;
        transform: none !important; display: flex !important;
    }
    /* Esconde widgets de PC */
    .desktop-only, .bdo-timer-widget, .garmoth-mini-circle, .header-titles, #guest-area { display: none !important; }
    
    /* Mostra Mobile */
    .mobile-only {
        display: flex !important; position: static !important; width: 100%; height: 100%;
        align-items: center; justify-content: center;
    }
    .btn-mobile-trigger { transform: none !important; }
}