/* css/main.css: Variables, Reset y Layout Principal */

:root {
    --primary-color: #009933; 
    --secondary-color: #6c757d; 
    --background-color: #1e1e1e;
    --text-color: #f8f8f8;
    --module-bg-color: #262626;
    --font-family: 'Consolas', 'Courier New', monospace;
    --header-height: 100px;
}

body.light-theme {
    --primary-color: #0066cc; 
    --background-color: #ffffff; 
    --text-color: #1e1e1e; 
    --module-bg-color: #f5f5f5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color); 
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.5s, color 0.5s; 
    overflow-x: hidden;
}

.body-content {
    padding: calc(var(--header-height) + 2rem) 5% 2rem; 
    display: flex;
    flex-direction: column;
    gap: 5rem; 
}

.content-section {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid #333;
    color: var(--secondary-color);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .body-content {
        padding-top: calc(var(--header-height) + 1rem);
        gap: 4rem;
    }
}