Create static/style.css

static/style.css

@@ -0,0 +1,112 @@
+/* --- Reset y Fuentes --- */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');
+:root {
+    --primary-bg: #121212;
+    --secondary-bg: #1E1E1E;
+    --primary-text: #E0E0E0;
+    --accent-color: #4CAF50;
+    --nudge-eco: rgba(76, 175, 80, 0.2);
+    --nudge-stress: rgba(3, 169, 244, 0.15);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--primary-bg);
+    color: var(--primary-text);
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
+    transition: background-color 0.8s ease-in-out;
+}
+
+/* --- Pantalla de Bienvenida --- */
+#welcome-screen {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    text-align: center;
+    flex-direction: column;
+}
+.welcome-content { max-width: 80%; }
+.logo { width: 80px; margin-bottom: 20px; }
+h1 { font-size: 2.5em; margin-bottom: 10px; }
+.privacy-note { font-size: 0.9em; color: #aaa; margin-top: 20px; }
+#user-creation input { background: var(--secondary-bg); border: 1px solid #444; color: var(--primary-text); padding: 10px; border-radius: 5px; margin-top: 10px; }
+#user-creation button { background: var(--accent-color); color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-left: 5px; }
+
+/* --- Contenedor Principal --- */
+#app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    background-color: rgba(30, 30, 30, 0.8);
+    backdrop-filter: blur(5px);
+}
+main { flex-grow: 1; position: relative; }
+#camera-container {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+}
+#camera-feed { width: 100%; height: 100%; object-fit: cover; }
+#output-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: linear-gradient(to top, rgba(18, 18, 18, 0.9), transparent);
+    padding: 60px 20px 20px;
+    text-align: center;
+    font-size: 1.1em;
+}
+footer {
+    display: flex;
+    justify-content: space-around;
+    padding: 15px;
+    background-color: rgba(30, 30, 30, 0.8);
+    backdrop-filter: blur(5px);
+}
+.control-btn {
+    background: var(--secondary-bg);
+    color: var(--primary-text);
+    border: 1px solid #444;
+    padding: 12px 20px;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+.control-btn.active { background-color: var(--accent-color); border-color: var(--accent-color); }
+
+/* --- Espejo de la Conciencia --- */
+#consciousness-mirror {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(10px);
+    z-index: 100;
+    transform: translateY(100%);
+    transition: transform 0.5s ease-in-out;
+}
+#consciousness-mirror.visible { transform: translateY(0); }
+.mirror-header { display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid #444; }
+#close-mirror-btn { background: none; border: none; color: white; font-size: 1.5em; cursor: pointer; }
+#mirror-log { padding: 20px; overflow-y: auto; height: calc(100% - 70px); }
+.log-entry {
+    background: var(--secondary-bg);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    border-left: 4px solid var(--accent-color);
+}
+.log-entry strong { display: block; margin-bottom: 5px; color: var(--accent-color); }
+
+/* --- Nudges Visuales --- */
+body.eco-nudge { background-color: var(--nudge-eco); }
+body.serenity-nudge { background-color: var(--nudge-stress); }