Update static/style.css

static/style.css

@@ -1,12 +1,13 @@
 /* --- Reset y Fuentes --- */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;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);
+    --primary-bg: #101010;
+    --secondary-bg: #1d1d1f;
+    --primary-text: #f5f5f7;
+    --secondary-text: #a1a1a6;
+    --accent-blue: #0071e3;
+    --accent-green: #30d158;
+    --accent-purple: #5e5ce6;
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body {
@@ -16,97 +17,62 @@ body {
     overflow: hidden;
     height: 100vh;
     width: 100vw;
-    transition: background-color 0.8s ease-in-out;
 }
 
+/* --- Estructura de Pantallas --- */
+.screen { display: none; }
+.screen.visible { display: flex; flex-direction: column; height: 100%; }
+
 /* --- 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; }
+#welcome-screen { justify-content: center; align-items: center; text-align: center; }
+.logo-container { position: relative; width: 120px; height: 120px; margin: 0 auto 20px auto; }
+.logo-bg { width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); border-radius: 25%; animation: spin 20s linear infinite; }
+.logo-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; color: white; }
+h1 { font-size: 2.8em; font-weight: 700; }
+#loading-status { color: var(--secondary-text); margin-top: 10px; }
+#user-creation { margin-top: 30px; }
+#user-creation p { margin-bottom: 5px; }
+#user-creation input { background: var(--secondary-bg); border: 1px solid #333; color: var(--primary-text); padding: 12px; border-radius: 8px; margin-top: 5px; width: 80%; }
+#user-creation button { background: var(--accent-blue); color: white; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; margin-top: 20px; font-weight: 500; }
 
-/* --- 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); }
+/* --- App Principal --- */
+#app-container { position: relative; }
+#camera-feed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
+header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); }
+#status-indicator { display: flex; align-items: center; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(10px); padding: 8px 15px; border-radius: 20px; }
+.status-dot { width: 10px; height: 10px; background-color: var(--accent-green); border-radius: 50%; margin-right: 10px; animation: pulse 2s infinite; }
+#status-text { font-weight: 500; }
+.header-btn { background: none; border: none; color: white; font-size: 1.5em; cursor: pointer; }
 
-/* --- 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); }
+main { flex-grow: 1; display: flex; align-items: flex-end; padding: 20px; }
+#output-container { width: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(15px); border-radius: 15px; padding: 20px; animation: slideUp 0.5s ease-out; }
+#output-text { font-size: 1.2em; line-height: 1.5; }
+
+footer { display: flex; justify-content: space-around; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); }
+.control-btn { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); color: var(--primary-text); border: 1px solid rgba(255,255,255,0.2); border-radius: 15px; padding: 12px 0; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; width: 90px; }
+.control-btn i { font-size: 1.5em; margin-bottom: 5px; }
+.control-btn span { font-size: 0.8em; font-weight: 500; }
+.control-btn.active { background-color: var(--accent-blue); border-color: var(--accent-blue); transform: translateY(-5px); }
+
+/* --- Paneles Modales --- */
+.modal-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(10px); z-index: 100; display: none; align-items: center; justify-content: center; }
+.modal-panel.visible { display: flex; }
+.panel-content { background-color: var(--secondary-bg); width: 90%; max-width: 500px; border-radius: 20px; padding: 20px; animation: scaleUp 0.3s ease-out; }
+.panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 15px; }
+.close-panel-btn { background: none; border: none; color: white; font-size: 1.2em; cursor: pointer; }
+.panel-body button { background: var(--accent-blue); /* ... */ }
+.panel-body input { background: #333; /* ... */ }
+
+/* --- Animaciones --- */
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes scaleUp { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
 
-/* --- Nudges Visuales --- */
-body.eco-nudge { background-color: var(--nudge-eco); }
-body.serenity-nudge { background-color: var(--nudge-stress); }
+body.serenity-nudge { animation: breath 11s ease-in-out; }
+@keyframes breath {
+  0% { background-color: var(--primary-bg); }
+  36% { background-color: var(--accent-purple); } /* Inhalar 4s */
+  45% { background-color: var(--accent-purple); } /* Sostener 1s */
+  100% { background-color: var(--primary-bg); } /* Exhalar 6s */
+}