/* ===================================================================== Modo oscuro/claro (aplicado según ) Estilo "Liquid Glass": fondo con manchas de color suaves + superficies traslúcidas con blur (backdrop-filter) definido en style.css; aquí solo se define el color/opacidad de cada superficie por tema. ===================================================================== */ [data-bs-theme="dark"] body { background: radial-gradient(circle at 12% -5%, rgba(0,122,255,0.20), transparent 42%), radial-gradient(circle at 90% 15%, rgba(30,136,229,0.16), transparent 40%), radial-gradient(circle at 50% 105%, rgba(67,160,71,0.14), transparent 45%), #050505; color: #FFFFFF; } [data-bs-theme="dark"] .app-sidebar { background-color: rgba(20,20,22,0.62); border-right: 1px solid rgba(255,255,255,0.08); box-shadow: inset -1px 0 0 rgba(255,255,255,0.04); } [data-bs-theme="dark"] .topbar, [data-bs-theme="dark"] .registro-rapido-topbar { background-color: rgba(12,12,14,0.55); border-bottom: 1px solid rgba(255,255,255,0.08); } [data-bs-theme="dark"] .tarjeta, [data-bs-theme="dark"] .tarjeta-resumen, [data-bs-theme="dark"] .registro-rapido-tarjeta, [data-bs-theme="dark"] .login-caja, [data-bs-theme="dark"] .calendario-dia { background-color: rgba(30,30,32,0.55); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px -14px rgba(0,0,0,0.6); } [data-bs-theme="dark"] .ios-tabbar { background-color: rgba(18,18,20,0.68); border-top: 1px solid rgba(255,255,255,0.08); box-shadow: 0 -8px 30px rgba(0,0,0,0.4); } [data-bs-theme="dark"] .nav-link { color: #b8b8b8; border-radius: 14px; } [data-bs-theme="dark"] .nav-link:hover { background-color: rgba(0,122,255,0.1); color: #fff; } [data-bs-theme="dark"] .nav-link.active { background-color: var(--color-principal); color: #fff; font-weight: 600; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: rgba(255,255,255,0.08); border: 1px solid transparent; color: #fff; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: rgba(255,255,255,0.1); color: #fff; border-color: var(--color-principal); box-shadow: 0 0 0 0.2rem rgba(0,122,255,0.25); } [data-bs-theme="dark"] .form-check-input { background-color: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #fff; --bs-table-hover-bg: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } [data-bs-theme="dark"] .modal-content { background-color: rgba(24,24,26,0.85); color: #fff; border: 1px solid rgba(255,255,255,0.08); } [data-bs-theme="dark"] .dropdown-menu { background-color: rgba(28,28,30,0.85); border: 1px solid rgba(255,255,255,0.1); } [data-bs-theme="dark"] .dropdown-menu .text-muted { color: #999 !important; } /* ---------- Modo claro ---------- */ [data-bs-theme="light"] body { background: radial-gradient(circle at 12% -5%, rgba(0,122,255,0.12), transparent 42%), radial-gradient(circle at 90% 15%, rgba(30,136,229,0.10), transparent 40%), radial-gradient(circle at 50% 105%, rgba(67,160,71,0.10), transparent 45%), #f2f3f7; } [data-bs-theme="light"] .app-sidebar { background-color: rgba(255,255,255,0.6); border-right: 1px solid rgba(0,0,0,0.06); } [data-bs-theme="light"] .topbar, [data-bs-theme="light"] .registro-rapido-topbar { background-color: rgba(255,255,255,0.55); border-bottom: 1px solid rgba(0,0,0,0.06); } [data-bs-theme="light"] .tarjeta, [data-bs-theme="light"] .tarjeta-resumen, [data-bs-theme="light"] .registro-rapido-tarjeta, [data-bs-theme="light"] .login-caja, [data-bs-theme="light"] .calendario-dia { background-color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 30px -18px rgba(0,0,0,0.25); } [data-bs-theme="light"] .ios-tabbar { background-color: rgba(255,255,255,0.7); border-top: 1px solid rgba(0,0,0,0.06); box-shadow: 0 -8px 30px rgba(0,0,0,0.08); } [data-bs-theme="light"] .nav-link.active { background-color: var(--color-principal); color: #fff; font-weight: 600; } [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select { background-color: rgba(0,0,0,0.045); border: 1px solid transparent; } [data-bs-theme="light"] .modal-content { background-color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.8); } [data-bs-theme="light"] .dropdown-menu { background-color: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.06); }