/* Animaciones para tarjetas del escritorio */
@keyframes placas-stat-enter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes placas-icon-pop {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-18deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.18) rotate(6deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes placas-icon-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.placas-stat-card {
    position: relative;
    overflow: hidden;
    animation: placas-stat-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    will-change: transform, opacity;
}

.placas-stat-card:nth-child(1),
.fi-wi-stats-overview-stat.placas-stat-card:nth-of-type(1) {
    animation-delay: 0.05s;
}

.placas-stat-card:nth-child(2),
.fi-wi-stats-overview-stat.placas-stat-card:nth-of-type(2) {
    animation-delay: 0.15s;
}

.placas-stat-card:nth-child(3),
.fi-wi-stats-overview-stat.placas-stat-card:nth-of-type(3) {
    animation-delay: 0.25s;
}

.placas-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgb(15 23 42 / 0.12);
}

/* Iconos principales */
.placas-stat-card .fi-wi-stats-overview-stat-label-ctn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.placas-stat-card .fi-wi-stats-overview-stat-label-ctn > .fi-icon,
.placas-stat-card .fi-wi-stats-overview-stat-label-ctn > svg,
.placas-stat-card .fi-wi-stats-overview-stat-label-ctn svg {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    padding: 0.45rem;
    box-sizing: content-box;
    border-radius: 0.75rem;
    animation: placas-icon-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
    transform-origin: center;
}

.placas-stat-card:nth-of-type(1) .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card:nth-of-type(1) .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    animation-delay: 0.2s;
}

.placas-stat-card:nth-of-type(2) .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card:nth-of-type(2) .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    animation-delay: 0.35s;
}

.placas-stat-card:nth-of-type(3) .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card:nth-of-type(3) .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    animation-delay: 0.5s;
}

.placas-stat-card--primary .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card--primary .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    color: #2563eb;
    background-color: rgb(37 99 235 / 0.12);
}

.placas-stat-card--success .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card--success .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    color: #16a34a;
    background-color: rgb(22 163 74 / 0.12);
}

.placas-stat-card--warning .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card--warning .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    color: #d97706;
    background-color: rgb(217 119 6 / 0.12);
}

.placas-stat-card:hover .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card:hover .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    transform: scale(1.15) rotate(-8deg);
    animation: placas-icon-float 1.2s ease-in-out infinite;
    box-shadow: 0 6px 16px rgb(15 23 42 / 0.12);
}

.placas-stat-card--primary:hover .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card--primary:hover .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    background-color: rgb(37 99 235 / 0.22);
    color: #1d4ed8;
}

.placas-stat-card--success:hover .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card--success:hover .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    background-color: rgb(22 163 74 / 0.22);
    color: #15803d;
}

.placas-stat-card--warning:hover .fi-wi-stats-overview-stat-label-ctn svg,
.placas-stat-card--warning:hover .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    background-color: rgb(217 119 6 / 0.22);
    color: #b45309;
}

.placas-stat-value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.placas-stat-card .fi-wi-stats-overview-stat-value {
    transition: color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .placas-stat-card,
    .placas-stat-card:hover,
    .placas-stat-card .fi-wi-stats-overview-stat-label-ctn svg,
    .placas-stat-card .fi-wi-stats-overview-stat-label-ctn .fi-icon,
    .placas-stat-card:hover .fi-wi-stats-overview-stat-label-ctn svg,
    .placas-stat-card:hover .fi-wi-stats-overview-stat-label-ctn .fi-icon {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}