/**
 * Floating Icons Pro - SVG Color Fix
 * Correcciones para aplicar colores de SVG correctamente
 */
 
.fip-icon__svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
    pointer-events: none;
}

.fip-icon__svg svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    transition: fill var(--fip-animation-speed) ease;
}

/* Aplicar el color de hover del SVG */
.fip-icon:hover .fip-icon__svg svg {
    fill: var(--icon-svg-hover-color, currentColor);
}

/* Estilos específicos para el estilo hexágono */
.fip-icon--hexagon {
    background-color: transparent !important;
    position: relative;
}

.fip-icon--hexagon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--icon-color, #25D366);
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    z-index: -1;
    transition: background-color var(--fip-animation-speed) ease;
}

.fip-icon--hexagon:hover::before {
    background-color: var(--icon-hover-color, var(--icon-color, #25D366));
    filter: brightness(0.8);
}

/* Fix para animaciones */
.fip-animate-pulse {
    animation: fip-pulse 2s infinite;
}

.fip-animate-bounce {
    animation: fip-bounce 2s infinite;
}

.fip-animate-shake {
    animation: fip-shake 3s infinite;
}

.fip-animate-rotate {
    animation: fip-rotate 3s linear infinite;
}

.fip-animate-zoom {
    animation: fip-zoom 2s ease-in-out infinite;
}

.fip-animate-swing {
    animation: fip-swing 2s ease-in-out infinite;
    transform-origin: top center;
}

.fip-animate-tada {
    animation: fip-tada 3s infinite;
}

.fip-animate-heartbeat {
    animation: fip-heartbeat 1.5s ease-in-out infinite;
}

/* Asegurar que las animaciones estén definidas */
@keyframes fip-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes fip-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes fip-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes fip-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fip-zoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes fip-swing {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
}

@keyframes fip-tada {
    0% { transform: scale(1) rotate(0deg); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes fip-heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70% { transform: scale(1); }
}

/* Fix para el texto del icono */
.fip-icon__text {
    position: absolute;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: opacity var(--fip-animation-speed) ease;
    opacity: 0;
    pointer-events: none;
}

/* Posicionamiento del texto según la posición del icono */
.fip-position-top-left .fip-icon__text,
.fip-position-center-left .fip-icon__text,
.fip-position-bottom-left .fip-icon__text {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.fip-position-top-right .fip-icon__text,
.fip-position-center-right .fip-icon__text,
.fip-position-bottom-right .fip-icon__text {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.fip-position-bottom-center .fip-icon__text {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

/* Mostrar texto al hover */
.fip-icon:hover .fip-icon__text {
    opacity: 1;
}

/* Fix para opacidad */
.fip-icon {
    transition: all var(--fip-animation-speed) ease;
}