/* ======================================================================= TEMA: Live Energico y vibrante: degradados saturados, fondo animado y acentos magenta/violeta/naranja. Se activa con: No modifica la logica: solo redefine variables y superficies. ======================================================================= */ [data-theme="live"] { --ink: #1a1430; --muted: #7a6f95; --panel: rgba(255, 255, 255, 0.78); --panel-strong: rgba(255, 255, 255, 0.92); --line: rgba(123, 47, 247, 0.16); --aqua: #ff3d81; --mint: #ffa63d; --coral: #ff5c7a; --violet: #7b2ff7; } [data-theme="live"] body { color: var(--ink); background: radial-gradient(circle at 12% 10%, rgba(255, 61, 129, 0.30), transparent 30rem), radial-gradient(circle at 88% 14%, rgba(123, 47, 247, 0.26), transparent 30rem), radial-gradient(circle at 60% 92%, rgba(255, 166, 61, 0.22), transparent 32rem), linear-gradient(135deg, #fff5fb 0%, #f3edff 50%, #fff3ec 100%); background-size: 220% 220%; animation: liveShift 18s ease infinite; } @keyframes liveShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } [data-theme="live"] a { color: #c0238a; } [data-theme="live"] .sidebar { background: linear-gradient(160deg, rgba(123, 47, 247, 0.92), rgba(255, 61, 129, 0.85)); border-right: none; } [data-theme="live"] .brand-mark { background: linear-gradient(145deg, #ff3d81, #ffa63d); box-shadow: inset 0 1px 8px rgba(255, 255, 255, 0.5), 0 12px 30px rgba(255, 61, 129, 0.45); } [data-theme="live"] .glass-card, [data-theme="live"] .table-wrap, [data-theme="live"] .metric, [data-theme="live"] .timeline-item, [data-theme="live"] .auth-card { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 42px rgba(123, 47, 247, 0.14); } [data-theme="live"] .auth-card { background: var(--panel-strong); } [data-theme="live"] .metric strong { background: linear-gradient(135deg, #7b2ff7, #ff3d81); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="live"] .btn { border-radius: 10px; } [data-theme="live"] .mobile-quick-nav { background: rgba(255, 255, 255, 0.9); border-color: rgba(123, 47, 247, 0.18); box-shadow: 0 18px 44px rgba(123, 47, 247, 0.24); } [data-theme="live"] .mobile-quick-nav__item:hover, [data-theme="live"] .mobile-quick-nav__item.active { color: var(--ink); background: rgba(255, 61, 129, 0.12); border-color: rgba(255, 61, 129, 0.24); } [data-theme="live"] .btn-primary { --bs-btn-bg: #7b2ff7; --bs-btn-border-color: #7b2ff7; --bs-btn-hover-bg: #6a25d8; --bs-btn-hover-border-color: #6a25d8; } [data-theme="live"] .btn-success { --bs-btn-bg: #ff3d81; --bs-btn-border-color: #ff3d81; --bs-btn-hover-bg: #e62e6f; --bs-btn-hover-border-color: #e62e6f; } [data-theme="live"] .form-control, [data-theme="live"] .form-select { border-radius: 10px; border-color: var(--line); } [data-theme="live"] .pos-payment-modal .modal-content, [data-theme="live"] .pos-ticket-modal .modal-content { background: rgba(255, 255, 255, 0.94); border-color: rgba(123, 47, 247, 0.18); box-shadow: 0 24px 70px rgba(123, 47, 247, 0.26); } [data-theme="live"] .pos-payment-method { border-color: rgba(123, 47, 247, 0.28); background: rgba(255, 255, 255, 0.6); } [data-theme="live"] .btn-check:checked + .pos-payment-method { color: #fff; background: linear-gradient(135deg, #7b2ff7, #ff3d81); border-color: rgba(255, 61, 129, 0.58); box-shadow: 0 10px 24px rgba(255, 61, 129, 0.22); }