/* Botón flotante de Calculadora - Versión CYBER con imagen futurista */
.calculadora-float {
    position: fixed !important;
    width: 65px !important;
    height: 65px !important;
    bottom: 120px !important;
    right: 40px !important;
    /* Gradiente cyber que combina con la imagen */
    background: linear-gradient(145deg, #0f1419 0%, #1a2332 50%, #0a0e1a 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    /* Sombra con brillo cyan */
    box-shadow:
            0 4px 15px rgba(0, 255, 255, 0.3),
            0 0 20px rgba(0, 191, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    /* Border con efecto neón */
    border: 2px solid rgba(0, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;

    /* Animación de entrada futurista */
    animation: calculadoraCyberEntrada 1.2s ease-out 0.5s both !important;
}

.calculadora-float:hover {
    transform: translateY(-8px) scale(1.15) !important;
    /* Fondo más brillante al hover */
    background: linear-gradient(145deg, #1a2332 0%, #2a3442 50%, #1a1f2e 100%) !important;
    /* Sombra más intensa */
    box-shadow:
            0 8px 25px rgba(0, 255, 255, 0.5),
            0 0 35px rgba(0, 191, 255, 0.4),
            0 0 50px rgba(0, 255, 255, 0.2),
            inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(0, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

/* EFECTO DE PULSO CYBER - Versión mejorada */
.calculadora-float::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border-radius: 50% !important;
    background: linear-gradient(45deg,
    transparent 30%,
    rgba(0, 255, 255, 0.1) 50%,
    transparent 70%) !important;
    z-index: -1 !important;
    animation: calculadoraCyberPulso 3s infinite !important;
    pointer-events: none !important;
}

/* IMAGEN PNG OPTIMIZADA PARA EL DISEÑO CYBER */
.calculadora-float img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    display: block !important;
    /* Mantener los colores originales cyan/azul de la imagen */
    filter:
            drop-shadow(0 0 8px rgba(0, 255, 255, 0.6))
            drop-shadow(0 0 15px rgba(0, 191, 255, 0.3)) !important;
    z-index: 2 !important;
    position: relative !important;
    margin: auto !important;
    transition: all 0.3s ease !important;
}

/* Efecto hover mejorado para la imagen cyber */
.calculadora-float:hover img {
    filter:
            drop-shadow(0 0 12px rgba(0, 255, 255, 0.9))
            drop-shadow(0 0 20px rgba(0, 191, 255, 0.5))
            drop-shadow(0 0 30px rgba(0, 255, 255, 0.3)) !important;
    transform: scale(1.1) !important;
}

/* Animaciones cyber mejoradas */
@keyframes calculadoraCyberPulso {
    0% {
        transform: scale(1);
        opacity: 0.8;
        background: linear-gradient(45deg,
        transparent 30%,
        rgba(0, 255, 255, 0.1) 50%,
        transparent 70%);
    }
    50% {
        transform: scale(1.3);
        opacity: 0.4;
        background: linear-gradient(45deg,
        transparent 20%,
        rgba(0, 255, 255, 0.2) 50%,
        transparent 80%);
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
        background: linear-gradient(45deg,
        transparent 10%,
        rgba(0, 255, 255, 0.05) 50%,
        transparent 90%);
    }
}

@keyframes calculadoraCyberEntrada {
    0% {
        transform: translateX(100px) rotate(180deg);
        opacity: 0;
        filter: blur(5px);
    }
    50% {
        transform: translateX(-15px) rotate(-10deg);
        opacity: 0.8;
        filter: blur(2px);
    }
    80% {
        transform: translateX(8px) rotate(5deg);
        filter: blur(1px);
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

/* Efecto de partículas cyber al hacer hover */
.calculadora-float::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle,
    transparent 30%,
    rgba(0, 255, 255, 0.05) 40%,
    rgba(0, 191, 255, 0.1) 50%,
    transparent 60%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: -2;
}

.calculadora-float:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.6;
}

/* Estados focus/active con efectos cyber */
.calculadora-float:focus,
.calculadora-float:active {
    outline: none !important;
    box-shadow:
            0 0 0 4px rgba(0, 255, 255, 0.4),
            0 8px 25px rgba(0, 255, 255, 0.5),
            0 0 35px rgba(0, 191, 255, 0.4) !important;
    text-decoration: none !important;
}

.calculadora-float:active {
    transform: translateY(-5px) scale(1.05) !important;
    transition: all 0.1s ease !important;
}

/* Pausa las animaciones al hacer hover */
.calculadora-float:hover::before {
    animation-play-state: paused !important;
}

/* RESPONSIVE CYBER DESIGN */

/* Para tablets */
@media (max-width: 992px) and (min-width: 769px) {
    .calculadora-float {
        width: 60px !important;
        height: 60px !important;
        bottom: 110px !important;
        right: 30px !important;
    }

    .calculadora-float img {
        width: 34px !important;
        height: 34px !important;
    }
}

/* Para móviles */
@media (max-width: 768px) {
    .calculadora-float {
        width: 55px !important;
        height: 55px !important;
        bottom: 90px !important;
        right: 20px !important;
        box-shadow:
                0 3px 12px rgba(0, 255, 255, 0.3),
                0 0 15px rgba(0, 191, 255, 0.2) !important;
    }

    .calculadora-float:hover {
        transform: translateY(-6px) scale(1.1) !important;
        box-shadow:
                0 6px 20px rgba(0, 255, 255, 0.4),
                0 0 25px rgba(0, 191, 255, 0.3) !important;
    }

    .calculadora-float img {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Para pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    .calculadora-float {
        width: 50px !important;
        height: 50px !important;
        bottom: 75px !important;
        right: 15px !important;
    }

    .calculadora-float img {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Para pantallas extra pequeñas */
@media screen and (max-width: 360px) {
    .calculadora-float {
        width: 45px !important;
        height: 45px !important;
        bottom: 70px !important;
        right: 12px !important;
    }

    .calculadora-float img {
        width: 24px !important;
        height: 24px !important;
    }
}

/* FALLBACK PARA ÍCONO FONTAWESOME */
.calculadora-float i {
    display: none !important;
    font-size: 28px !important;
    color: #00ffff !important;
    text-shadow:
            0 0 10px rgba(0, 255, 255, 0.8),
            0 0 20px rgba(0, 191, 255, 0.4) !important;
    z-index: 2 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.calculadora-float:hover i {
    color: #ffffff !important;
    text-shadow:
            0 0 15px rgba(0, 255, 255, 1),
            0 0 25px rgba(0, 191, 255, 0.6),
            0 0 35px rgba(0, 255, 255, 0.4) !important;
    transform: scale(1.1) !important;
}

/* Sistema de fallback automático */
.calculadora-float .fallback-icon {
    display: none !important;
    font-size: 26px !important;
    color: #00ffff !important;
    text-shadow:
            0 0 8px rgba(0, 255, 255, 0.8),
            0 0 15px rgba(0, 191, 255, 0.4) !important;
}

.calculadora-float img:not([src]) + .fallback-icon,
.calculadora-float img[src=""] + .fallback-icon,
.calculadora-float img[src*="404"] + .fallback-icon {
    display: block !important;
}

.calculadora-float img:not([src]),
.calculadora-float img[src=""],
.calculadora-float img[src*="404"] {
    display: none !important;
}

/* TEMA OSCURO ESPECÍFICO */
@media (prefers-color-scheme: dark) {
    .calculadora-float {
        background: linear-gradient(145deg, #000510 0%, #0a1320 50%, #000408 100%) !important;
        border-color: rgba(0, 255, 255, 0.6) !important;
        box-shadow:
                0 4px 15px rgba(0, 255, 255, 0.4),
                0 0 25px rgba(0, 191, 255, 0.3) !important;
    }

    .calculadora-float:hover {
        background: linear-gradient(145deg, #0a1320 0%, #1a2330 50%, #0a0f1c 100%) !important;
        box-shadow:
                0 8px 25px rgba(0, 255, 255, 0.6),
                0 0 40px rgba(0, 191, 255, 0.5) !important;
    }
}

/* MODO DE CONTRASTE ALTO */
@media (prefers-contrast: high) {
    .calculadora-float {
        background: #000000 !important;
        border: 3px solid #00ffff !important;
        box-shadow:
                0 4px 15px rgba(0, 255, 255, 0.8),
                0 0 20px rgba(0, 255, 255, 0.6) !important;
    }

    .calculadora-float:hover {
        background: #001122 !important;
        border-color: #ffffff !important;
        box-shadow:
                0 8px 25px rgba(0, 255, 255, 1),
                0 0 35px rgba(255, 255, 255, 0.8) !important;
    }
}

/* MOTION REDUCE SUPPORT */
@media (prefers-reduced-motion: reduce) {
    .calculadora-float {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }

    .calculadora-float::before {
        animation: none !important;
    }

    .calculadora-float:hover {
        transform: none !important;
    }

    .calculadora-float:active {
        transform: none !important;
    }

    .calculadora-float img {
        transition: opacity 0.2s ease !important;
    }
}

/* Z-INDEX MANAGEMENT */
.calculadora-float {
    z-index: 9998 !important;
}

.whatsapp-float {
    z-index: 9999 !important;
}

/* EFECTO DE CARGA CYBER */
.calculadora-float.loading {
    animation: calculadoraCyberLoading 1.5s infinite !important;
}

@keyframes calculadoraCyberLoading {
    0%, 100% {
        border-color: rgba(0, 255, 255, 0.4);
        box-shadow:
                0 4px 15px rgba(0, 255, 255, 0.3),
                0 0 20px rgba(0, 191, 255, 0.2);
    }
    50% {
        border-color: rgba(0, 255, 255, 0.8);
        box-shadow:
                0 4px 15px rgba(0, 255, 255, 0.6),
                0 0 30px rgba(0, 191, 255, 0.4);
    }
}

/* COMPATIBILIDAD CON NAVEGADORES WEBKIT */
@-webkit-keyframes calculadoraCyberPulso {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0.4;
    }
    100% {
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
        opacity: 0;
    }
}

@-webkit-keyframes calculadoraCyberEntrada {
    0% {
        -webkit-transform: translateX(100px) rotate(180deg);
        transform: translateX(100px) rotate(180deg);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateX(-15px) rotate(-10deg);
        transform: translateX(-15px) rotate(-10deg);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* EFECTOS ESPECIALES PARA LA IMAGEN CYBER */
.calculadora-float img {
    /* Mantener la transparencia y los colores cyan originales */
    mix-blend-mode: screen;
}

/* NOTIFICATION BADGE CYBER STYLE */
.calculadora-float .notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(45deg, #ff0080, #ff4000);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    z-index: 3;
    border: 2px solid rgba(0, 255, 255, 0.6);
    box-shadow:
            0 0 15px rgba(255, 0, 128, 0.6),
            0 0 25px rgba(255, 64, 0, 0.4);
    animation: cyberBadgePulse 2s infinite;
}

@keyframes cyberBadgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
                0 0 15px rgba(255, 0, 128, 0.6),
                0 0 25px rgba(255, 64, 0, 0.4);
    }
    50% {
        transform: scale(1.2);
        box-shadow:
                0 0 20px rgba(255, 0, 128, 0.8),
                0 0 35px rgba(255, 64, 0, 0.6);
    }
}