/* Variables CSS para Modos de Color */ :root { /* Modo Claro (Valores por defecto) */ --background-color: #ffffff; --text-color: #333333; --header-footer-bg: #f0f0f0; --sidebar-bg: #e9e9e9; } /* Modo Oscuro (se aplica cuando se añade la clase 'dark-mode' al ) */ body.dark-mode { --background-color: #121212; --text-color: #f0f0f0; --header-footer-bg: #1f1f1f; --sidebar-bg: #2c2c2c; } /* Estilos Generales y Reset */ body { font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; transition: background-color 0.5s, color 0.5s; /* Transición suave entre modos */ } /* Estilos del Encabezado */ .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: var(--header-footer-bg); border-bottom: 1px solid var(--sidebar-bg); } .menu-principal a { margin-left: 15px; color: var(--text-color); text-decoration: none; } /* Distribución del Contenido (Grid/Flexbox para Cuerpo y Sidebar) */ .main-container { display: flex; max-width: 1200px; margin: 20px auto; /* Centra el contenido */ padding: 0 20px; } .main-content { flex: 3; /* Ocupa más espacio */ padding-right: 20px; } .sidebar { flex: 1; /* Ocupa menos espacio */ background-color: var(--sidebar-bg); padding: 15px; border-radius: 5px; } /* Estilos de Multimedia */ .multimedia-section, .gallery { margin-top: 30px; padding: 15px; border: 1px solid var(--sidebar-bg); border-radius: 5px; } .gallery img { width: 100%; max-width: 250px; height: auto; margin-right: 10px; display: inline-block; } /* Estilos del Pie de Página */ .footer { text-align: center; padding: 15px 20px; background-color: var(--header-footer-bg); margin-top: 20px; font-size: 0.9em; } /* Estilos para el botón de cambio de modo */ #mode-toggle { background: none; border: 1px solid var(--text-color); color: var(--text-color); padding: 8px 12px; cursor: pointer; border-radius: 4px; } img{ width:100px; }