/* ============================================
   WHATSAPP FLOATING BUTTON STYLES
   Versión: 1.0
   Autor: Tu Nombre
   Fecha: 2024
   ============================================ */

/* ============================================
   VARIABLES CSS (Custom Properties)
   Facilita el mantenimiento y personalización
   ============================================ */
:root {
    /* Colores principales */
    --whatsapp-green: #25D366;
    --whatsapp-dark: #128C7E;
    --whatsapp-hover: #1EBE57;
    
    /* Colores del indicador */
    --status-online: #4CAF50;
    --status-offline: #9E9E9E;
    
    /* Tamaños */
    --button-size-desktop: 60px;
    --button-size-mobile: 50px;
    --icon-size-desktop: 32px;
    --icon-size-mobile: 26px;
    
    /* Espaciado */
    --button-bottom: 30px;
    --button-right: 30px;
    
    /* Sombras */
    --shadow-normal: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.4);
    --shadow-pulse: 0 0 0 0 rgba(37, 211, 102, 0.7);
    
    /* Transiciones */
    --transition-speed: 0.3s;
    
    /* Z-index */
    --z-index-float: 9999;
}


/* ============================================
   BOTÓN FLOTANTE PRINCIPAL
   ============================================ */
.whatsapp-float {
    /* Posicionamiento fijo */
    position: fixed;
    bottom: var(--button-bottom);
    right: var(--button-right);
    z-index: var(--z-index-float);
    
    /* Dimensiones */
    width: var(--button-size-desktop);
    height: var(--button-size-desktop);
    
    /* Apariencia */
    background-color: var(--whatsapp-green);
    border-radius: 50%;
    box-shadow: var(--shadow-normal);
    
    /* Flexbox para centrar el ícono */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Eliminar estilos de enlace */
    text-decoration: none;
    color: white;
    
    /* Cursor */
    cursor: pointer;
    
    /* Transiciones suaves */
    transition: all var(--transition-speed) ease;
    
    /* Animación de pulso */
    animation: whatsapp-pulse 2s infinite;
}


/* ============================================
   ESTADOS DEL BOTÓN
   ============================================ */

/* Hover (cuando pasas el mouse) */
.whatsapp-float:hover {
    background-color: var(--whatsapp-hover);
    transform: scale(1.1);
    box-shadow: var(--shadow-hover);
    
    /* Pausa la animación de pulso */
    animation-play-state: paused;
}

/* Active (cuando haces click) */
.whatsapp-float:active {
    transform: scale(0.95);
}

/* Focus (accesibilidad - teclado) */
.whatsapp-float:focus {
    outline: 3px solid var(--whatsapp-green);
    outline-offset: 4px;
}


/* ============================================
   ÍCONO DE WHATSAPP
   ============================================ */
.whatsapp-float i {
    color: white;
    font-size: var(--icon-size-desktop);
    
    /* Asegura que el ícono no se deforme */
    display: block;
    line-height: 1;
}


/* ============================================
   INDICADOR DE ESTADO (ONLINE/OFFLINE)
   ============================================ */
.whatsapp-status {
    /* Posicionamiento absoluto dentro del botón */
    position: absolute;
    top: 5px;
    right: 5px;
    
    /* Dimensiones */
    width: 12px;
    height: 12px;
    
    /* Apariencia */
    background-color: var(--status-online);
    border: 2px solid white;
    border-radius: 50%;
    
    /* Animación de parpadeo */
    animation: status-blink 2s infinite;
}

/* Estado offline (añade clase .offline con JS) */
.whatsapp-float.offline .whatsapp-status {
    background-color: var(--status-offline);
    animation: none;
}


/* ============================================
   ANIMACIONES
   ============================================ */

/* Animación de pulso para el botón */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Animación de parpadeo para el indicador */
@keyframes status-blink {
    0%, 100% {
        opacity: 1;
    }
    
    50% {
        opacity: 0.5;
    }
}

/* Animación de entrada (aparición inicial) */
@keyframes whatsapp-appear {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Aplica la animación de entrada */
.whatsapp-float {
    animation: whatsapp-appear 0.5s ease-out, whatsapp-pulse 2s infinite 0.5s;
}


/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets */
@media screen and (max-width: 768px) {
    .whatsapp-float {
        width: var(--button-size-mobile);
        height: var(--button-size-mobile);
        bottom: 20px;
        right: 20px;
    }
    
    .whatsapp-float i {
        font-size: var(--icon-size-mobile);
    }
    
    .whatsapp-status {
        width: 10px;
        height: 10px;
        top: 3px;
        right: 3px;
    }
}

/* Móviles pequeños */
@media screen and (max-width: 480px) {
    .whatsapp-float {
        bottom: 15px;
        right: 15px;
    }
}


/* ============================================
   MODO OSCURO (DARK MODE)
   ============================================ */
@media (prefers-color-scheme: dark) {
    .whatsapp-float {
        /* En modo oscuro el verde es más suave */
        background-color: #1EBE57;
    }
    
    .whatsapp-float:hover {
        background-color: var(--whatsapp-green);
    }
}


/* ============================================
   REDUCIR MOVIMIENTO (ACCESIBILIDAD)
   Para usuarios que prefieren menos animaciones
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
        transition: none;
    }
    
    .whatsapp-status {
        animation: none;
    }
    
    .whatsapp-float:hover {
        transform: none;
    }
}


/* ============================================
   ESTADO OCULTO (Controlado por JavaScript)
   ============================================ */
.whatsapp-float.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0);
}


/* ============================================
   PRINT (Al imprimir la página)
   No mostrar el botón en versión impresa
   ============================================ */
@media print {
    .whatsapp-float {
        display: none;
    }
}


/* ============================================
   PERSONALIZACIÓN ADICIONAL
   Puedes modificar estos valores según tu diseño
   ============================================ */

/* Ejemplo: Botón más grande en desktop */
/*
.whatsapp-float {
    width: 70px;
    height: 70px;
}

.whatsapp-float i {
    font-size: 36px;
}
*/

/* Ejemplo: Cambiar posición a la izquierda */
/*
.whatsapp-float {
    right: auto;
    left: 30px;
}
*/

/* Ejemplo: Botón cuadrado en lugar de circular */
/*
.whatsapp-float {
    border-radius: 15px;
}
*/

/* Ejemplo: Color personalizado */
/*
:root {
    --whatsapp-green: #FF5722;
    --whatsapp-hover: #E64A19;
}
*/


/* ============================================
   NOTAS PARA EL DESARROLLADOR
   
   1. PERSONALIZACIÓN:
      - Modifica las variables en :root
      - No edites los valores directamente en las clases
      
   2. COMPATIBILIDAD:
      - CSS3 (variables, animaciones, flexbox)
      - IE11+ (sin variables CSS)
      - Todos los navegadores modernos
      
   3. PERFORMANCE:
      - Usa transform en lugar de top/left
      - Animaciones GPU-aceleradas
      - Will-change solo cuando sea necesario
      
   4. ACCESIBILIDAD:
      - prefers-reduced-motion respetado
      - Focus visible para teclado
      - Alto contraste soportado
      
   5. MANTENIMIENTO:
      - Código comentado
      - Variables centralizadas
      - Fácil de modificar
      
   ============================================ */