:root {
        /* Fuentes */
        --font-primary: 'Space Mono', monospace;

        /* Tamaños */
        --header-height: 50px;
        --footer-height: 40px;
        --icon-size: 24px;

        /* Colores por defecto (modo dark) */
        --text-color: #ffffff;
        --bg-color: #121212;
        --header-bg-color: #f5f5f5;
        --footer-bg-color: #f5f5f5;
        --menu-bg-color: #f5f5f5;
        --header-text-color: #121212;
        --footer-text-color: #121212;
        --border-color: #333333;
        --active-item-color: #a0a0a0;

        /* Opacidad del header y footer */
        --header-opacity: 1;
        --footer-opacity: 1;
}

/* Modo light */
body.light {
        --text-color: #121212;
        --bg-color: #f5f5f5;
        --header-bg-color: #121212;
        --footer-bg-color: #121212;
        --menu-bg-color: #121212;
        --header-text-color: #f5f5f5;
        --footer-text-color: #f5f5f5;
        --border-color: #bbbbbb;
        --active-item-color: #d3d3d3;
}

/* Aplicar variables de estilo */
body {
        font-family: var(--font-primary);
        background-color: var(--bg-color);
        color: var(--text-color);
}

#t-header {
        background-color: rgba(var(--header-bg-color-rgb), var(--header-opacity));
        border-bottom: 1px solid var(--border-color);
        color: var(--header-text-color);
}

#t-footer {
        background-color: rgba(var(--footer-bg-color-rgb), var(--footer-opacity));
        border-top: 1px solid var(--border-color);
        color: var(--footer-text-color);
}

/* Menú de navegación */
.menu-items a {
        color: var(--header-text-color);
        text-decoration: none;
        /* font-size: 0.9rem; */
        transition: color 0.3s ease;
}

.menu-items a:hover {
        color: var(--active-item-color);
}

.menu-items a.active {
        color: var(--active-item-color);
        font-weight: bold;
}

/* Estilos para el botón hamburguesa */
.hamburger-button span {
        background-color: var(--header-text-color);
        transition: all 0.3s ease;
}

/* Modo transparente para header y footer */
#t-header.transparent {
        --header-opacity: 0.9;
        backdrop-filter: blur(5px);
}

#t-footer.transparent {
        --footer-opacity: 0.9;
        backdrop-filter: blur(5px);
}

/* Convertir valores RGB para usar con opacidad */
:root {
        --header-bg-color-rgb: 245, 245, 245;
        /* #f5f5f5 para modo dark */
        --footer-bg-color-rgb: 245, 245, 245;
        /* #f5f5f5 para modo dark */
}

body.light {
        --header-bg-color-rgb: 18, 18, 18;
        /* #121212 para modo light */
        --footer-bg-color-rgb: 18, 18, 18;
        /* #121212 para modo light */
}