/* Estilos base */
:root {
    --primary-color: #e62b2b;
    --secondary-color: #964141f6;
    --text-color: #2b2d42;
    --white: #ffffff;
    --black: #000000;
    --bg-light: #f8f9fa;
    --bg-dark: #121212;
}

[data-theme="dark"] {
    --primary-color: #c74d4d;
    --secondary-color: #9c4343;
    --text-color: #f8f9fa;
    --white: #1a1a1a;
    --black: #ffffff;
    --light-gray: #212529;
    --medium-gray: #343a40;
}

/* Cabeçalho */
.site-header {
    background-color: var(--white);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 100;
}

.logo-nav-container {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.logo-container .logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.main-nav ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

.main-nav a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--primary-color);
}

/* Rodapé */
.site-footer {
    background-color: var(--white);
    padding: 1.5rem;
    text-align: center;
    margin-top: auto;
}

/* Botão Toggle */
.theme-toggle {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

/* Dark Mode */
[data-theme="dark"] {
    --text-color: #f8f9fa;
    --white: #1a1a1a;
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-footer {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

[data-theme="dark"] .main-nav a {
    color: var(--text-color);
}

[data-theme="dark"] .main-nav a:hover {
    color: #c74d4d;
}

/* Garante que o tema seja aplicado ao body */
body[data-theme="dark"] {
    background-color: var(--bg-dark);
    color: var(--text-color);
}

/* Estilos para o conteúdo principal em dark mode */
body[data-theme="dark"] .main-content {
    color: var(--text-color);
}

/* Garante consistência com a página de login */
[data-theme="dark"] {
    --primary-color: #c74d4d;
    --secondary-color: #9c4343;
    --text-color: #f8f9fa;
    --white: #1a1a1a;
}

/* Estilos específicos para quando o tema escuro está ativo */
[data-theme="dark"] .login-container {
    background-color: rgba(26, 26, 26, 0.9);
    box-shadow: 0 10px 25px rgba(129, 51, 51, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 992px) {
    .logo-nav-container {
        gap: 1rem;
    }
    
    .main-nav ul {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .logo-nav-container {
        width: 100%;
        justify-content: space-between;
    }
    
    .theme-toggle span {
        display: none; /* Oculta o texto "Dark Mode" */
    }
    
    .theme-toggle {
        padding: 8px;
        border-radius: 50%;
    }
}