/* ========================================
   BOTON FLOTANTE UNIFICADO (WhatsApp + Telegram + Maps + Uber)
   Un unico boton con apariencia de WhatsApp que despliega
   verticalmente los botones de Uber, Google Maps, Telegram y WhatsApp.

   Para usar este componente, incluir este CSS y agregar el HTML:

   <div class="wa-menu" id="waMenu">
       <div class="wa-menu-items" id="waMenuItems">
           <a id="botonUberMenu" class="wa-menu-item wa-item-uber">
               <span class="wa-menu-label">Uber a nuestro local</span>
               <span class="wa-menu-circle"> ... svg uber ... </span>
           </a>
           <a id="botonMapsMenu" class="wa-menu-item wa-item-maps">
               <span class="wa-menu-label">Maps a nuestro local</span>
               <span class="wa-menu-circle"> ... svg pin ... </span>
           </a>
           <a class="wa-menu-item wa-item-tg" href="https://t.me/...">
               <span class="wa-menu-label">Escríbenos por Telegram</span>
               <span class="wa-menu-circle"> ... svg telegram ... </span>
           </a>
           <a class="wa-menu-item wa-item-wa" href="https://wa.me/...">
               <span class="wa-menu-label">Escríbenos por WhatsApp</span>
               <span class="wa-menu-circle"> ... svg whatsapp ... </span>
           </a>
       </div>
       <button type="button" class="wa-menu-toggle" id="waMenuToggle"
               aria-haspopup="true" aria-expanded="false"
               aria-controls="waMenuItems" title="Contacto y cómo llegar">
           ... svg whatsapp + svg X ...
       </button>
   </div>

   Tambien incluir el script:
   <script src="botones_flotantes.js"></script>

   NOTA: Los botones individuales anteriores (whatsapp_button.*,
   uber_button.*, waze_button.*, telegram_button.*) fueron reemplazados
   por este componente y se encuentran de respaldo en la carpeta
   respaldo_botones_independientes/.
   ======================================== */

.wa-menu {
    position: fixed;
    bottom: var(--wa-bottom-offset, 30px);
    left: 30px; /* Lado izquierdo de la pantalla */
    width: 60px;
    z-index: 10000;
}

/* ---------- Boton principal (apariencia WhatsApp) ---------- */
.wa-menu-toggle {
    position: relative;
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--whatsapp-primary-color, #25D366);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    animation: waPulse 2s infinite;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.wa-menu-toggle:hover {
    background: var(--whatsapp-secondary-color, #128C7E);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.wa-menu-toggle:focus {
    outline: none;
}

.wa-menu-toggle:focus-visible {
    outline: 3px solid #128C7E;
    outline-offset: 2px;
}

/* Iconos del boton principal (WhatsApp <-> X) */
.wa-menu-toggle .wa-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.wa-menu-toggle .wa-icon-wa {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
}

.wa-menu-toggle .wa-icon-close {
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
    opacity: 0;
}

.wa-menu.open .wa-icon-wa {
    transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
    opacity: 0;
}

.wa-menu.open .wa-icon-close {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
}

/* Mientras esta abierto se detiene el pulso */
.wa-menu.open .wa-menu-toggle {
    animation-play-state: paused;
}

/* ---------- Contenedor vertical de opciones ---------- */
.wa-menu-items {
    position: absolute;
    bottom: 74px;
    left: 0; /* Anclado al borde izquierdo: crece hacia adentro de la pantalla */
    display: flex;
    flex-direction: column; /* De arriba a abajo: Uber, Maps, Telegram, WhatsApp */
    align-items: flex-start;
    gap: 14px;
    pointer-events: none;
}

/* ---------- Cada opcion del menu ---------- */
.wa-menu-item {
    display: flex;
    flex-direction: row-reverse; /* Circulo a la izquierda, etiqueta a la derecha */
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-decoration: none !important;
    color: inherit !important;
    border: none;
    outline: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px) scale(0.5);
    transform-origin: bottom center;
    transition: all 0.28s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wa-menu.open .wa-menu-item {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Aparicion escalonada al abrir */
.wa-menu.open .wa-menu-item:nth-child(1) { transition-delay: 0.27s; }
.wa-menu.open .wa-menu-item:nth-child(2) { transition-delay: 0.18s; }
.wa-menu.open .wa-menu-item:nth-child(3) { transition-delay: 0.09s; }
.wa-menu.open .wa-menu-item:nth-child(4) { transition-delay: 0s; }

/* Circulo de color por aplicacion */
.wa-menu-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wa-menu-item:hover .wa-menu-circle,
.wa-menu-item:focus-visible .wa-menu-circle {
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.wa-item-wa .wa-menu-circle {
    background: #25D366; /* Verde WhatsApp */
}

.wa-item-tg .wa-menu-circle {
    background: #0088cc; /* Azul Telegram */
}

.wa-item-maps .wa-menu-circle {
    background: #4285F4; /* Azul Google Maps */
}

.wa-item-uber .wa-menu-circle {
    background: #000000; /* Negro Uber */
}

.wa-menu-item svg {
    fill: #ffffff;
}

/* ---------- Etiqueta temporal del boton principal ---------- */
/* Aparece al abrir el menu y se oculta sola a los ~3 segundos */
.wa-menu-hint {
    position: absolute;
    bottom: 18px; /* Centrada verticalmente junto al boton principal */
    left: 74px;   /* A la derecha del boton principal */
    background: #ffffff;
    color: #333333;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease,
                visibility 0s linear 0.25s;
    pointer-events: none;
    z-index: 1;
}

.wa-menu-hint.wa-hint-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ---------- Etiqueta flotante de cada opcion ---------- */
.wa-menu-label {
    background: #ffffff;
    color: #333333;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    text-decoration: none !important;
}

.wa-menu.open .wa-menu-item:hover .wa-menu-label,
.wa-menu.open .wa-menu-item:focus-visible .wa-menu-label {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Animaciones de atencion (mismas del boton original) ---------- */
@keyframes waPulse {
    0% {
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.6);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
    }
}

.wa-menu-toggle.initial-animation {
    animation: waAttention 1.5s ease 1s 1 normal forwards;
}

.wa-menu-toggle.scroll-animation {
    animation: waScrollAttention 1s ease;
}

@keyframes waAttention {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
    }
    50% {
        transform: scale(1.6);
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
        background: var(--whatsapp-secondary-color, #128C7E);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
    }
}

@keyframes waScrollAttention {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
        background: var(--whatsapp-secondary-color, #128C7E);
    }
    100% {
        transform: scale(1);
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .wa-menu {
        width: 55px;
        bottom: calc(var(--wa-bottom-offset, 30px) + 10px);
        left: 25px;
    }

    .wa-menu-toggle {
        width: 55px;
        height: 55px;
    }

    .wa-menu-toggle svg {
        width: 28px;
        height: 28px;
    }

    .wa-menu-items {
        bottom: 68px;
        gap: 12px;
    }

    .wa-menu-circle {
        width: 44px;
        height: 44px;
    }

    .wa-menu-item svg {
        width: 22px;
        height: 22px;
    }

    .wa-menu-label {
        font-size: 11px;
    }

    .wa-menu-hint {
        bottom: 16px;
        left: 68px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .wa-menu {
        width: 50px;
        bottom: calc(var(--wa-bottom-offset, 30px) + 15px);
        left: 20px;
    }

    .wa-menu-toggle {
        width: 50px;
        height: 50px;
    }

    .wa-menu-toggle svg {
        width: 26px;
        height: 26px;
    }

    .wa-menu-items {
        bottom: 62px;
        gap: 10px;
    }

    .wa-menu-circle {
        width: 40px;
        height: 40px;
    }

    .wa-menu-item svg {
        width: 20px;
        height: 20px;
    }

    .wa-menu-label {
        font-size: 10px;
        padding: 5px 10px;
    }

    .wa-menu-hint {
        bottom: 14px;
        left: 62px;
        font-size: 10px;
        padding: 5px 10px;
    }
}