body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #000000;
            color: #ffffff;
        }

            .pin-dot {
                transition: all 0.2s ease;
            }

            .pin-dot.filled {
                background-color: #d97f1c;
                transform: scale(1.2);
            }

            .pin-btn {
                transition: all 0.15s ease;
                -webkit-tap-highlight-color: transparent;
            }

            .pin-btn:active {
                transform: scale(0.9);
                background-color: rgba(255, 255, 255, 0.15);
            }

            @keyframes shake {

                0%,
                100% {
                    transform: translateX(0)
                }

                20%,
                60% {
                    transform: translateX(-8px)
                }

                40%,
                80% {
                    transform: translateX(8px)
                }
            }

            .shake {
                animation: shake 0.4s ease;
            }

            @keyframes fadeUp {
                0% {
                    opacity: 0;
                    transform: translateY(20px)
                }

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

            .fade-up {
                animation: fadeUp 0.6s ease forwards;
            }

            .paw-bg {
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M30 35c-2.5 0-4.5 2-4.5 4.5S27.5 44 30 44s4.5-2 4.5-4.5S32.5 35 30 35zm-8-5c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3zm16 0c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3zm-12-6c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3zm8 0c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
        
        .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
        .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Dashboard CSS */
/* ============================================
           Estilos personalizados adicionales
           ============================================ */

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

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        /* Animación escalonada para las tarjetas */
        .card-animate {
            opacity: 0;
            animation: slideUp 0.5s ease-out forwards;
        }

        .card-animate:nth-child(1) {
            animation-delay: 0.1s;
        }

        .card-animate:nth-child(2) {
            animation-delay: 0.2s;
        }

        .card-animate:nth-child(3) {
            animation-delay: 0.3s;
        }

        .card-animate:nth-child(4) {
            animation-delay: 0.4s;
        }

        @keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Efecto de brillo en hover para las tarjetas */
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
        }

        /* Animación del latido para el ícono de emergencia */
        @keyframes heartbeat {

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

            25% {
                transform: scale(1.15);
            }

            50% {
                transform: scale(1);
            }

            75% {
                transform: scale(1.1);
            }
        }

        .heartbeat {
            animation: heartbeat 2s ease-in-out infinite;
        }

        /* Checkbox custom con Tailwind */
        .checkbox-custom:checked {
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
            background-color: #d97f1c;
            border-color: #d97f1c;
        }

        /* Gradiente suave para el fondo del header */
        .header-gradient {
            background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);
        }

        /* Paw pattern decorativo */
        .paw-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M30 35c-2.5 0-4.5 2-4.5 4.5S27.5 44 30 44s4.5-2 4.5-4.5S32.5 35 30 35zm-8-5c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3zm16 0c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3zm-12-6c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3zm8 0c-1.5 0-3 1.5-3 3s1.5 3 3 3 3-1.5 3-3-1.5-3-3-3z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        /* Efecto shimmer para el peso */
        .shimmer {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
        }

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

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

        /* Tooltip sutil */
        .tooltip-trigger:hover .tooltip-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .tooltip-content {
            opacity: 0;
            visibility: hidden;
            transform: translateY(4px);
            transition: all 0.2s ease;
        }

        /* ===== MOBILE-FIRST OPTIMIZATIONS ===== */

        /* Safe area para iPhones con notch */
        body {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* Todos los elementos táctiles mínimo 44px */
        .touch-target {
            min-height: 44px;
            min-width: 44px;
        }

        /* Bottom nav para acciones rápidas en móvil */
        .mobile-bottom-nav {
            padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        }

        /* Efecto de tap/active para elementos interactivos en mobile */
        @media (hover: none) {
            .card-hover:active {
                transform: scale(0.98);
                transition: transform 0.1s ease;
            }

            .training-item:active {
                background-color: rgba(99, 102, 241, 0.1) !important;
                transform: scale(0.98);
                transition: all 0.1s ease;
            }
        }

        /* Suavizar el scroll en iOS */
        html {
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

        /* Prevenir zoom en inputs en iOS (16px mínimo) */
        input[type="checkbox"] {
            font-size: 16px;
        }

        /* ===== REDISEÑO PREMIUM: GLASSMORPHISM & BOTTOM SHEETS ===== */
        .glass-panel {
            background: #1c1c1e;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
        }

        .bottom-sheet-overlay {
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            transition: opacity 0.3s ease;
        }

        .bottom-sheet {
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
            border-top-left-radius: 1.5rem;
            border-top-right-radius: 1.5rem;
            padding-bottom: env(safe-area-inset-bottom);
            max-height: 85vh;
        }

        .bottom-sheet .space-y-4 {
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .bottom-sheet.open {
            transform: translateY(0);
        }

        .bottom-nav-glass {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }