/* ========================================================================== styles.css — Control LED Arduino Complementa Tailwind con animaciones y variantes de estado propias. ========================================================================== */ /* ── Tipografía base ──────────────────────────────────────────────────────── */ body { font-family: 'Inter', 'Segoe UI', sans-serif; } /* ── LED visual ───────────────────────────────────────────────────────────── */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 16px 4px rgba(250, 204, 21, 0.70); } 50% { box-shadow: 0 0 28px 10px rgba(250, 204, 21, 0.90); } } .led-on { animation: pulse-glow 1.4s ease-in-out infinite; } .led-off { box-shadow: none; } /* ── Spinner de carga (dentro del botón Conectar) ─────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } /* ── Botones de acción (Encender / Apagar) ────────────────────────────────── */ /* Estado deshabilitado unificado; Tailwind no cubre :disabled con opacidad */ .btn-action:disabled { opacity: 0.35; cursor: not-allowed; } /* ── Botón Conectar: alterna color según data-connected en ─────────── */ /* En lugar de manipular strings de clases Tailwind desde JavaScript, app.js solo escribe: document.body.dataset.connected = 'true' | 'false' y estas reglas CSS reaccionan de forma declarativa. */ /* Color cuando NO está conectado (estado inicial) */ .btn-connect-off { background-color: #4f46e5; /* indigo-600 */ } .btn-connect-off:hover { background-color: #6366f1; } /* indigo-500 */ .btn-connect-off:active { background-color: #4338ca; } /* indigo-700 */ /* Color cuando SÍ está conectado */ .btn-connect-on { background-color: #b91c1c; /* red-700 */ } .btn-connect-on:hover { background-color: #dc2626; } /* red-600 */ .btn-connect-on:active { background-color: #991b1b; } /* red-800 */