:root { --primary-h: 210; --primary-s: 100%; --primary-l: 58%; --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --bg-dark: #050811; --glass-bg: rgba(30, 41, 59, 0.4); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 20px; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); background-image: radial-gradient(at 0% 0%, hsla(var(--primary-h), 100%, 50%, 0.15) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(280, 100%, 50%, 0.1) 0, transparent 50%); color: #f1f5f9; margin: 0; min-height: 100vh; } .glass-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5); } .sa-tab { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 20px; color: #94a3b8; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .sa-tab:hover { background: rgba(255,255,255,0.06); color: #f8fafc; } .sa-tab-active { background: hsla(var(--primary-h), 100%, 50%, 0.1) !important; border-color: var(--primary) !important; color: var(--primary) !important; box-shadow: 0 0 20px hsla(var(--primary-h), 100%, 50%, 0.2); } .sa-table { width: 100%; border-collapse: separate; border-spacing: 0; } .sa-table th { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; padding: 16px 20px; border-bottom: 1px solid var(--glass-border); text-align: left; } .sa-table td { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 14px; color: #cbd5e1; } .sa-table tr:last-child td { border-bottom: none; } .sa-table tr:hover td { background: rgba(255,255,255,0.02); } .glass-input { background: rgba(15, 23, 42, 0.6) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; color: #ffffff !important; padding: 12px 16px !important; transition: all 0.2s; } .glass-input:focus { background: rgba(15, 23, 42, 0.9) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 2px hsla(var(--primary-h), 100%, 50%, 0.2) !important; } .btn-primary-sa { background: var(--primary); color: #000; font-weight: 700; padding: 12px 24px; border-radius: 12px; transition: all 0.2s; box-shadow: 0 4px 15px hsla(var(--primary-h), 100%, 50%, 0.3); } .btn-primary-sa:hover { transform: translateY(-2px); box-shadow: 0 6px 20px hsla(var(--primary-h), 100%, 50%, 0.4); } } /* Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(11, 19, 38, 0.85); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-overlay.active { display: flex; } .modal-content { width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; animation: modal-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modal-zoom { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* AR Content Modal — wider to fit photo gallery */ .ar-modal-content { width: 100%; max-width: 820px; max-height: 92vh; overflow-y: auto; animation: modal-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* File input styling */ input[type="file"].glass-input { cursor: pointer; } input[type="file"].glass-input::-webkit-file-upload-button { background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.3); color: #60a5fa; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 11px; margin-right: 8px; } /* Search Bar */ .search-container { position: relative; margin-bottom: 24px; } .search-container input { padding-left: 40px !important; } .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 16px; pointer-events: none; } /* Auth Prompt */ .auth-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0b1326; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; } .auth-box { padding: 2.5rem; text-align: center; max-width: 400px; width: 100%; } .hidden { display: none !important; } /* Toasts */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; } .toast { background: #1e293b; color: white; padding: 16px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); font-size: 14px; animation: slide-in 0.3s forwards; box-shadow: 0 10px 25px rgba(0,0,0,0.5); } .toast.error { border-left: 4px solid #ef4444; } .toast.success { border-left: 4px solid #10b981; } @keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

Zero Trust Access

Ingresa tu API Secret para acceder a la consola administrativa de alto nivel.