@keyframes oleaje {
                    0%, 100% { transform: translateX(0); }
                    50% { transform: translateX(-25%); }
                }
                @keyframes burbuja {
                    0% { transform: translateY(0) scale(1); opacity: 0.8; }
                    50% { transform: translateY(-40px) scale(1.1); opacity: 0.5; }
                    100% { transform: translateY(-90px) scale(0.8); opacity: 0; }
                }
                @keyframes flotar {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-8px); }
                }
                @keyframes pulso {
                    0%, 100% { opacity: 1; transform: scale(1); }
                    50% { opacity: 0.5; transform: scale(1.2); }
                }
                @keyframes brilloAgua {
                    0%, 100% { opacity: 0; transform: translateX(-100%) skewX(-20deg); }
                    50% { opacity: 1; transform: translateX(300%) skewX(-20deg); }
                }
                @keyframes shimmer {
                    0% { transform: translateX(-100%); }
                    100% { transform: translateX(100%); }
                }
                
                /* RESPONSIVE KPIs DASHBOARD */
                @media (max-width: 768px) {
                    .kpi-dashboard-container {
                        padding: 20px 16px !important;
                        margin: 20px auto 0 !important;
                    }
                    .kpi-dashboard-header h2 {
                        font-size: 18px !important;
                    }
                    .kpi-comercios-card {
                        padding: 20px !important;
                    }
                    .kpi-comercios-icon {
                        width: 60px !important;
                        height: 60px !important;
                    }
                    .kpi-comercios-icon i {
                        font-size: 28px !important;
                    }
                    .kpi-comercios-numero {
                        font-size: 42px !important;
                    }
                    .kpi-meta-card {
                        padding: 20px !important;
                    }
                    .kpi-meta-header {
                        flex-direction: column !important;
                        gap: 12px !important;
                    }
                    .kpi-meta-header > div:last-child {
                        text-align: left !important;
                    }
                    .kpi-meta-porcentaje {
                        font-size: 36px !important;
                    }
                    .kpi-meta-actual {
                        font-size: 28px !important;
                    }
                    .kpi-tanque {
                        height: 120px !important;
                    }
                    .kpi-mensaje {
                        padding: 12px 16px !important;
                        font-size: 13px !important;
                    }
                }
                
                @media (max-width: 480px) {
                    .kpi-dashboard-container {
                        padding: 16px 12px !important;
                        border-radius: 16px !important;
                    }
                    .kpi-dashboard-header h2 {
                        font-size: 16px !important;
                        flex-wrap: wrap;
                        justify-content: center;
                    }
                    .kpi-dashboard-header p {
                        font-size: 12px !important;
                    }
                    .kpi-comercios-card, .kpi-meta-card {
                        padding: 16px !important;
                        border-radius: 14px !important;
                    }
                    .kpi-comercios-icon {
                        width: 50px !important;
                        height: 50px !important;
                        border-radius: 14px !important;
                    }
                    .kpi-comercios-icon i {
                        font-size: 24px !important;
                    }
                    .kpi-comercios-numero {
                        font-size: 36px !important;
                    }
                    .kpi-comercios-label {
                        font-size: 11px !important;
                    }
                    .kpi-meta-porcentaje {
                        font-size: 28px !important;
                    }
                    .kpi-meta-actual {
                        font-size: 24px !important;
                    }
                    .kpi-tanque {
                        height: 100px !important;
                        border-radius: 12px !important;
                    }
                    .kpi-tanque-marca {
                        font-size: 9px !important;
                    }
                    .kpi-mensaje {
                        padding: 10px 12px !important;
                        font-size: 12px !important;
                        border-radius: 10px !important;
                    }
                    .kpi-barra-progreso {
                        height: 6px !important;
                    }
                }