@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* =========================================
   1. VARIÁVEIS DE CORES
   ========================================= */
:root {
    /* --- MODO CLARO --- */
    --bg-body: #f0f4f8;
    --bg-container: #ffffff;
    
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-border: rgba(0, 0, 0, 0.1);
    
    --text-main: #333333;
    --text-secondary: #6c757d;
    
    --primary-color: #c0392b;       
    --primary-hover: #a93226;
    --title-color: #96281b; 
    
    /* Inputs */
    --input-bg: #f7f9fc;
    --input-border: #dbe2f0;
    --input-text: #333333;
    --input-icon: #7a8a9e;
    
    /* Sombras */
    --shadow-color: rgba(192, 57, 43, 0.15); 
    --shadow-header: rgba(0, 0, 0, 0.05);
}

/* --- MODO ESCURO --- */
body.dark-mode {
    --bg-body: #121212;
    --bg-container: #1e1e1e;
    
    --header-bg: rgba(18, 18, 18, 0.95);
    --header-border: rgba(255, 255, 255, 0.08);
    
    --text-main: #e0e0e0;
    --text-secondary: #b0b0b0;
    
    --primary-color: #e74c3c;    
    --primary-hover: #ff7675;
    --title-color: #ffffff;        
    
    --input-bg: #2d2d2d;
    --input-border: #444444;
    --input-text: #ffffff;
    --input-icon: #a0a0a0;
    
    --shadow-color: rgba(0, 0, 0, 0.6);
    --shadow-header: rgba(0, 0, 0, 0.5);
}

/* =========================================
   2. CONFIGURAÇÕES GLOBAIS
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { 
    height: 100%; 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =========================================
   3. CABEÇALHO (HEADER) 
   ========================================= */
.header-main { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 75px; 
    padding: 0 5%; 
    background: var(--header-bg); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    
    /* Centralizado */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    
    z-index: 1000; 
    border-bottom: 1px solid var(--header-border); 
    box-shadow: 0 4px 15px var(--shadow-header); 
    transition: all 0.3s ease;
}

/* Logo Fixa na Esquerda */
.logo { 
    position: absolute;
    left: 5%;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
}

.logo a { 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
}

.logo img { 
    height: 55px; 
    width: auto; 
    transition: filter 0.3s ease;
}

body.dark-mode .logo img {
    filter: brightness(0) invert(1);
}

/* Navegação Centralizada */
.desktop-nav { 
    display: flex; 
    gap: 35px; 
    align-items: center; 
}

.nav-link { 
    font-size: 1rem; 
    font-weight: 500; 
    color: var(--text-main); 
    text-decoration: none; 
    position: relative; 
    padding: 5px 0; 
    transition: color 0.3s ease; 
}

.nav-link::after { 
    content: ''; 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background-color: var(--primary-color); 
    transition: width 0.3s ease; 
}

.nav-link:hover, .nav-link.active { color: var(--primary-color); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.theme-btn {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%); 

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--text-main);
    
    transition: background-color 0.3s ease; 
}

.theme-btn:hover {
    background-color: rgba(128, 128, 128, 0.1) !important; 
}

body.dark-mode .theme-btn {
    color: #ffca28; 
}

body.dark-mode .theme-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffd54f;
}

/* =========================================
   4. CONTEÚDO
   ========================================= */
.background-container { 
    width: 100%; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
    padding-top: 95px;
    
    background-image: url('../imagens/background-light.png'); 
    background-size: cover; 
    background-position: center; 
    transition: background 0.3s ease;
}

body.dark-mode .background-container {
    background-image: none; 
    background-color: var(--bg-body);
}

.login-container { 
    width: 100%; 
    max-width: 480px; 
    padding: 45px; 
    background: var(--bg-container); 
    border-radius: 16px; 
    box-shadow: 0 10px 40px var(--shadow-color); 
    border: 1px solid var(--header-border); 
    text-align: center; 
    transition: all 0.3s ease;
}

.login-header { margin-bottom: 30px; }

.login-header h2 { 
    font-size: 2.2rem; 
    font-weight: 600; 
    color: var(--title-color); 
    margin-bottom: 10px; 
}

.login-header p { 
    font-weight: 400; 
    color: var(--text-secondary); 
    font-size: 0.95rem;
}

.input-group { position: relative; margin-bottom: 20px; }

.input-group input { 
    width: 100%; 
    padding: 14px 14px 14px 45px; 
    background: var(--input-bg); 
    border: 1px solid var(--input-border); 
    border-radius: 10px; 
    color: var(--input-text); 
    font-size: 1rem; 
    outline: none; 
    transition: all 0.3s ease; 
}

.input-group input:focus { 
    border-color: var(--primary-color); 
    background: var(--bg-container); 
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.1); 
}

.input-group input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.input-group .icon { 
    position: absolute; 
    left: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--input-icon); 
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.input-group input:focus + .icon {
    color: var(--primary-color);
}

.btn-login { 
    width: 100%; 
    padding: 15px; 
    border: none; 
    border-radius: 10px; 
    background: var(--primary-color); 
    color: white; 
    font-size: 1.1rem; 
    font-weight: 500; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    margin-top: 10px;
}

.btn-login:hover { 
    background: var(--primary-hover); 
    box-shadow: 0 5px 15px rgba(192, 57, 43, 0.3); 
}

.btn-login:active {
    transform: none;
}

.additional-links { margin-top: 25px; text-align: center; }

.additional-links a { 
    color: var(--primary-color); 
    text-decoration: none; 
    font-size: 0.9rem; 
    font-weight: 500;
    transition: color 0.3s ease;
}

.additional-links a:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

.alert { 
    padding: 15px; 
    border-radius: 10px; 
    margin-bottom: 25px; 
    font-size: 0.9rem; 
    border: 1px solid transparent; 
    text-align: left;
    display: flex;
    align-items: center;
}

.alert-success { 
    background-color: #d1e7dd; 
    color: #0f5132; 
    border-color: #badbcc; 
}
body.dark-mode .alert-success {
    background-color: #052c1e;
    color: #75b798;
    border-color: #0f5132;
}

.alert-danger { 
    background-color: #f8d7da; 
    color: #842029; 
    border-color: #f5c2c7; 
}
body.dark-mode .alert-danger {
    background-color: #3c1216; 
    color: #ff8b94;
    border-color: #842029;
}