/* ================================================================== BASE UI (aplica siempre, no depende del tema) Desactiva la selección de texto por pulsación larga (muy molesta en móviles al usar la app). Solo se permite seleccionar en inputs, textareas y contenido editable — así se pueden copiar/editar los nombres de escenas, horarios, alarmas, etc. Tambien se suprime el menú contextual de iOS (callout) y el flash azul de tap. ================================================================== */ html, body, * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } input, textarea, select, [contenteditable="true"], [contenteditable=""], .allow-select, .allow-select * { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-touch-callout: default; } /* ================================================================== MODO OSCURO — overrides opt-in. Se activa con class="theme-dark" en . Revertir: quitar la clase (o pulsar el boton ☀ que inyecta theme-toggle.js). No toca la paleta de marca: solo invierte fondos/texto/bordes para look oscuro legible. ================================================================== */ body.theme-dark { background: #0f172a; color: #e2e8f0; /* Variable que usan los sliders con relleno amarillo (Iluminacion rapido) */ --slider-track: #475569; } /* Texto general (Tailwind util classes que usamos en el HTML) */ body.theme-dark .text-black, body.theme-dark .text-gray-900, body.theme-dark .text-gray-800, body.theme-dark .text-gray-700, body.theme-dark .text-gray-600, body.theme-dark .text-slate-900, body.theme-dark .text-slate-800, body.theme-dark .text-slate-700 { color: #e2e8f0 !important; } body.theme-dark .text-gray-500, body.theme-dark .text-gray-400, body.theme-dark .text-gray-300, body.theme-dark .text-slate-500, body.theme-dark .text-slate-400 { color: #94a3b8 !important; } /* Fondos Tailwind de cards en estancia.html, index.html y otras pantallas */ body.theme-dark .bg-white { background-color: #1e293b !important; color: #e2e8f0; } body.theme-dark .bg-gray-50, body.theme-dark .bg-gray-100 { background-color: #1e293b !important; } body.theme-dark .bg-gray-200 { background-color: #334155 !important; } body.theme-dark .bg-gray-800, body.theme-dark .bg-gray-900 { background-color: #0f172a !important; } /* Hover azul Tailwind (hover:bg-blue-50) queda muy claro en dark: oscurecer */ body.theme-dark [class*="hover:bg-blue-50"]:hover { background-color: #243549 !important; } /* Bordes claros -> bordes oscuros */ body.theme-dark .border-gray-100, body.theme-dark .border-gray-200, body.theme-dark .border-slate-100, body.theme-dark .border-slate-200 { border-color: rgba(255,255,255,0.06) !important; } /* Shadow Tailwind sobre fondo claro no se nota en dark: reforzar */ body.theme-dark .shadow, body.theme-dark .shadow-sm, body.theme-dark .shadow-md, body.theme-dark .shadow-xl { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; } /* Cards principales */ body.theme-dark .expand-card, body.theme-dark .control-card, body.theme-dark .sombreado-control, body.theme-dark .acs-control, body.theme-dark .modo-card, body.theme-dark .luz-card, body.theme-dark .toma-card, body.theme-dark .escena-card, body.theme-dark .horario-card, body.theme-dark .info-card, body.theme-dark #card-nocturno, body.theme-dark .card, body.theme-dark .section-card, body.theme-dark .param-item, body.theme-dark .energy-card, body.theme-dark .flow-diagram, body.theme-dark .access-card, body.theme-dark .alarm-display, body.theme-dark .sonos-card, body.theme-dark .sonos-panel { background: #1e293b !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important; border-color: rgba(255, 255, 255, 0.04); } /* Termostato y control circular de clima.html */ body.theme-dark .thermostat-ring { background: #1e293b !important; } body.theme-dark .thermostat-center { background: linear-gradient(145deg, #1e293b, #0f172a) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; } /* Botones de temperatura / modo / ventilador clima + dia-btn despertador */ body.theme-dark .temp-btn, body.theme-dark .fan-btn, body.theme-dark .day-btn { background: #334155 !important; color: #e2e8f0 !important; border-color: #475569 !important; } body.theme-dark .fan-btn.active, body.theme-dark .mode-btn.active, body.theme-dark .mode-btn.selected, body.theme-dark .day-btn.selected { background: #34799f !important; color: white !important; } /* Titulos / textos de seccion con colores inline #374151 / #9ca3af */ body.theme-dark .section-title, body.theme-dark .section-label, body.theme-dark .section-name { color: #e2e8f0 !important; } body.theme-dark .section-status, body.theme-dark .section-chevron { color: #94a3b8 !important; } /* Burbujas pastel (section-icon en alarma / maquinas) atenuadas en dark */ body.theme-dark .section-icon { filter: brightness(0.85) saturate(0.9); } /* Contenido desplegable en maquinas */ body.theme-dark .section-content { background: #162033 !important; } body.theme-dark .content-inner { border-top-color: rgba(255, 255, 255, 0.05) !important; } body.theme-dark .section-header:active { background: rgba(52, 121, 159, 0.15) !important; } body.theme-dark .section-header.expanded { background: rgba(52, 121, 159, 0.2) !important; } /* Control "Automatico" (automatico.html): anillo + centro circular */ body.theme-dark .auto-ring { background: #1e293b !important; } body.theme-dark .auto-ring::before { background: #0f172a !important; } body.theme-dark .auto-center { background: #1e293b !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; } body.theme-dark .auto-center.apagado { background: linear-gradient(145deg, #1e293b, #0f172a) !important; } body.theme-dark .auto-center.encendido { background: linear-gradient(145deg, #1e293b, #253449) !important; box-shadow: 0 10px 40px rgba(52, 121, 159, 0.35) !important; } body.theme-dark .auto-subtitle, body.theme-dark .auto-center.apagado .auto-estado { color: #94a3b8 !important; } /* Sliders "custom-slider" usados en automatico/funciones: track claro -> oscuro */ body.theme-dark .custom-slider { background: #334155 !important; } /* Chips/pills tipo night-indicator: fondo claro -> oscuro */ body.theme-dark .night-indicator { background: #334155 !important; color: #e2e8f0; } /* ------------------------------------------------------------------ Inputs/select/textarea con fondo gris claro hardcoded (horarios, escenas, despertador, config) — invertir a slate oscuro. ------------------------------------------------------------------ */ body.theme-dark input[type="time"], body.theme-dark input[type="text"], body.theme-dark input[type="number"], body.theme-dark input[type="email"], body.theme-dark input[type="password"], body.theme-dark select, body.theme-dark textarea { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder { color: #64748b !important; opacity: 1; } body.theme-dark select { /* el chevron del select cambia a claro */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; } /* Fila de evento (horarios-estancia): fondo #f9fafb -> slate oscuro */ body.theme-dark .evento-row { background: #0f172a !important; border: 1px solid rgba(255,255,255,0.04); } body.theme-dark .evento-row:active { background: #162033 !important; } body.theme-dark .evento-hora { color: #e2e8f0 !important; } body.theme-dark .evento-meta { color: #94a3b8 !important; } /* Chips de dias/tipo/dom no seleccionados: fondo claro -> oscuro */ body.theme-dark .dia-btn, body.theme-dark .dom-btn { background: #334155 !important; color: #cbd5e1 !important; } body.theme-dark .dia-btn.selected, body.theme-dark .dom-btn.selected, body.theme-dark .tipo-btn.selected { background: rgba(52, 121, 159, 0.28) !important; } /* Botón "X" de cerrar modal: fondo claro -> slate */ body.theme-dark .btn-close { background: #334155 !important; color: #e2e8f0 !important; } /* Selector de iconos del modal "Editar/Nueva Escena" (las dos variantes del proyecto: .icono-btn en escenas-estancia y .icon-btn en funciones) */ body.theme-dark .icono-btn, body.theme-dark .icon-btn { background: #334155 !important; color: #e2e8f0 !important; border-color: transparent !important; } body.theme-dark .icono-btn.selected, body.theme-dark .icon-btn.selected { background: #34799f !important; color: white !important; border-color: #34799f !important; } body.theme-dark .icono-btn.selected svg, body.theme-dark .icon-btn.selected svg { stroke: white !important; color: white !important; } /* Item de dispositivo del modal de escena */ body.theme-dark .dispositivo-item { background: #0f172a !important; color: #e2e8f0; } body.theme-dark .dispositivo-item.activo { background: linear-gradient(135deg, rgba(52,121,159,0.22), rgba(45,106,138,0.22)) !important; border: 1px solid rgba(52,121,159,0.4); } /* Papelera roja sobre fondo oscuro: suavizar para que no "chille" */ body.theme-dark .text-red-500, body.theme-dark .text-red-600 { color: #f87171 !important; opacity: 0.85; } /* Lista de motores en proteccion-solar.html */ body.theme-dark .motores-lista { background: #0f172a !important; } body.theme-dark .motor-row { border-bottom-color: rgba(255,255,255,0.04) !important; } body.theme-dark .motor-row:active, body.theme-dark .motor-row.selected { background: rgba(52,121,159,0.18) !important; } body.theme-dark .motor-row .icon-bubble { background: rgba(52,121,159,0.18) !important; color: #4a94bf !important; } body.theme-dark .motor-row .nombre { color: #e2e8f0 !important; } body.theme-dark .motor-row .check { border-color: #475569 !important; } body.theme-dark .motor-toolbar .btn-mini { background: rgba(52,121,159,0.22) !important; color: #4a94bf !important; } /* Titulos/estado dentro de cards de iluminacion/tomas */ body.theme-dark .luz-title, body.theme-dark .luz-card .nombre-label { color: #e2e8f0 !important; } body.theme-dark .luz-info, body.theme-dark .luz-card .estado-luz, body.theme-dark .luz-card .tipo-luz { color: #94a3b8 !important; } /* Luz encendida: mantener la "chispa" amarilla pero menos estridente en dark */ body.theme-dark .luz-card.encendido { background: linear-gradient(135deg, rgba(250, 204, 21, 0.85), rgba(234, 179, 8, 0.85)) !important; box-shadow: 0 6px 22px rgba(234, 179, 8, 0.25) !important; } body.theme-dark .expand-content { background: #162033 !important; } body.theme-dark .expand-inner { border-top-color: rgba(255, 255, 255, 0.05) !important; } /* Titulos dentro de cards */ body.theme-dark .funcion-name, body.theme-dark .modal-title, body.theme-dark h1, body.theme-dark h2, body.theme-dark .section-title { color: #f1f5f9 !important; } body.theme-dark p { color: #94a3b8; } /* Burbujas de iconos: tintados oscurecidos (conservan el color de marca que venga inline en style="background:..." pero con overlay oscuro) */ body.theme-dark .funcion-icon { filter: brightness(0.85) saturate(0.9); } /* Botones neutros / secundarios */ body.theme-dark .btn-motor, body.theme-dark .btn-secondary, body.theme-dark .btn-salir, body.theme-dark .temp-btn, body.theme-dark .btn-close, body.theme-dark .tipo-btn, body.theme-dark .icon-btn, body.theme-dark .mode-btn { background: #334155 !important; color: #e2e8f0 !important; border-color: #475569 !important; } body.theme-dark .btn-motor:active, body.theme-dark .tipo-btn:active, body.theme-dark .icon-btn:active { background: #475569 !important; } /* Input fields */ body.theme-dark .input-field { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } body.theme-dark .input-field:focus { border-color: #34799f !important; } /* Modal */ body.theme-dark .modal-overlay { background: rgba(0,0,0,0.6); } body.theme-dark .modal-content { background: #1e293b !important; color: #e2e8f0; } /* Items dispositivos */ body.theme-dark .disp-item { background: linear-gradient(135deg, rgba(52,121,159,0.22), rgba(45,106,138,0.22)) !important; } body.theme-dark .disp-info { color: #e2e8f0 !important; } body.theme-dark .disp-estancia { background: #334155 !important; color: #cbd5e1 !important; } /* Modo-card especial "Crear" y activo */ body.theme-dark .modo-card.crear-modo { background: rgba(52,121,159,0.15) !important; border-color: #34799f !important; } body.theme-dark .modo-card.active { background: rgba(52,121,159,0.25) !important; } /* Nav inferior (si presente) */ body.theme-dark nav { background: #1e293b !important; border-top-color: rgba(255,255,255,0.05) !important; } body.theme-dark .nav-btn { color: #94a3b8 !important; } body.theme-dark .nav-btn.text-\[\#34799f\], body.theme-dark .nav-btn.text-blue-600 { color: #4a94bf !important; } /* Toggle switch tracks */ body.theme-dark .toggle, body.theme-dark .toggle-switch { background: #475569; } /* Slider track */ body.theme-dark input[type="range"], body.theme-dark .custom-slider, body.theme-dark .value-slider { background: #334155 !important; } /* Boton flotante de cambio de tema (inyectado por theme-toggle.js) */ #theme-toggle-btn { position: fixed; top: 14px; right: 14px; z-index: 100001; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #334155; transition: transform 120ms ease-out, background 150ms ease-out; } #theme-toggle-btn:active { transform: scale(0.92); } body.theme-dark #theme-toggle-btn { background: rgba(30, 41, 59, 0.85); color: #e2e8f0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }