/* ============================================
           ESTILOS PERSONALIZADOS - NexusCore Dashboard
           ============================================ */

 :root {
     --primary-gradient: linear-gradient(135deg, #3b82f6, #6366f1);
     --primary-color: #3b82f6;
     --secondary-color: #6366f1;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'DM Sans', sans-serif;
     background: #eef2f9;
     color: #0f172a;
     overflow-x: hidden;
 }

 /* Fuentes personalizadas */
 .font-display {
     font-family: 'Sora', sans-serif;
 }

 /* Animaciones */
 @keyframes floatIn {
     0% {
         opacity: 0;
         transform: translateY(20px) scale(0.97);
     }

     100% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 @keyframes pulseRing {
     0% {
         box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
     }
 }

 @keyframes shimmer {
     0% {
         background-position: 200% center;
     }

     100% {
         background-position: -200% center;
     }
 }

 @keyframes grow {
     from {
         width: 0;
     }

     to {
         width: var(--w);
     }
 }

 @keyframes fadeOut {
     0% {
         opacity: 1;
     }

     100% {
         opacity: 0;
         visibility: hidden;
     }
 }

 .animate-float-in {
     animation: floatIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }

 .badge-pulse {
     animation: pulseRing 2.2s ease-out infinite;
 }

 .shimmer-text {
     background: linear-gradient(90deg, #1d4ed8 0%, #7c3aed 40%, #2563eb 70%, #1d4ed8 100%);
     background-size: 300% auto;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     animation: shimmer 4s ease-in-out infinite;
 }

 /* Mesh gradient */
 body {
     background-color: #eef2f9;
     background-image:
         radial-gradient(at 20% 25%, hsla(214, 90%, 62%, 0.13) 0, transparent 50%),
         radial-gradient(at 82% 72%, hsla(260, 90%, 65%, 0.09) 0, transparent 50%),
         radial-gradient(at 52% 5%, hsla(340, 80%, 65%, 0.07) 0, transparent 42%);
 }

 /* Preloader */
 .preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity 0.5s ease, visibility 0.5s ease;
 }

 .preloader.fade-out {
     opacity: 0;
     visibility: hidden;
 }

 .preloader-logo {
     width: 120px;
     height: auto;
     animation: pulseRing 2s ease-out infinite;
 }

 /* Sidebar */
 .sidebar {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     width: 280px;
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(20px);
     border-right: 1px solid rgba(255, 255, 255, 0.7);
     box-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.15);
     transform: translateX(-100%);
     transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
     z-index: 1050;
     overflow-y: auto;
 }

 .sidebar.open {
     transform: translateX(0);
 }

 @media (min-width: 992px) {
     .sidebar {
         transform: none !important;
         position: sticky;
         top: 0;
         height: 100vh;
     }

     .sidebar-backdrop {
         display: none !important;
     }

     .menu-toggle {
         display: none !important;
     }
 }

 /* Sidebar backdrop */
 .sidebar-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(4px);
     z-index: 1040;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.25s ease, visibility 0.25s ease;
 }

 .sidebar-backdrop.show {
     opacity: 1;
     visibility: visible;
 }

 /* Nav items */
 .nav-item-custom {
     transition: all 0.2s ease;
     cursor: pointer;
 }

 .nav-item-custom:hover {
     background: rgba(59, 130, 246, 0.08);
     transform: translateX(4px);
 }

 .nav-item-custom:active {
     transform: scale(0.98);
 }

 /* Stat cards */
 .stat-card {
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     cursor: pointer;
 }

 .stat-card:active {
     transform: scale(0.98);
 }

 .stat-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15) !important;
 }

 /* Progress bar animation */
 .progress-bar-animated {
     animation: grow 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
     width: 0;
 }

 /* Donut center */
 .donut-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -58%);
     text-align: center;
     pointer-events: none;
 }

 /* Avatar ring */
 .avatar-ring {
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6;
 }

 /* Scrollbar */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }

 ::-webkit-scrollbar-track {
     background: #e2e8f3;
     border-radius: 99px;
 }

 ::-webkit-scrollbar-thumb {
     background: #c0cad9;
     border-radius: 99px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #3b82f6;
 }

 /* Canvas responsive */
 canvas {
     max-width: 100% !important;
     height: auto !important;
 }

 /* Touch optimizations */
 .btn-touch {
     min-height: 44px;
     min-width: 44px;
 }

 /* Prevent zoom on iOS */
 @media (max-width: 768px) {

     input,
     select,
     textarea {
         font-size: 16px !important;
     }
 }

 /* Reduce motion */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
 }

 /* Logo image sizing */
 .logo-img {
     width: 42px;
     height: 42px;
     object-fit: contain;
     filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.3));
 }

 .sidebar .logo-img {
     width: 42px;
     height: 42px;
 }