/* WhatsApp Geo – Public Styles */
:root {
    --wabp-color: #25D366;
    --wabp-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
    --wabp-size: 58px;
    --wabp-bottom: 24px;
    --wabp-side: 24px;
}

#wabp-wrapper {
    position: fixed;
    bottom: var(--wabp-bottom);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: wabp-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Botón derecha: tooltip a la izquierda del botón → orden inverso */
#wabp-wrapper.wabp-pos-right {
    right: var(--wabp-side);
    flex-direction: row-reverse; /* botón primero a la derecha, tooltip a su izquierda */
}

/* Botón izquierda: tooltip a la derecha del botón → orden normal */
#wabp-wrapper.wabp-pos-left {
    left: var(--wabp-side);
    flex-direction: row; /* botón primero a la izquierda, tooltip a su derecha */
}

#wabp-btn {
    width: var(--wabp-size);
    height: var(--wabp-size);
    border-radius: 50%; /* override per style below */
    background: var(--wabp-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wabp-shadow);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

#wabp-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit; /* hereda del estilo activo */
    background: var(--wabp-color);
    opacity: 0.4;
    animation: wabp-pulse 2.5s ease-out infinite;
}

#wabp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

#wabp-btn:active {
    transform: scale(0.95);
}

#wabp-btn svg {
    position: relative;
    z-index: 1;
}

/* Tooltip base — oculto */
#wabp-tooltip {
    background: #111;
    color: #fff;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Botón derecha: tooltip entra desde la derecha hacia el botón */
#wabp-wrapper.wabp-pos-right #wabp-tooltip {
    transform: translateX(10px);
}

/* Botón izquierda: tooltip entra desde la izquierda hacia el botón */
#wabp-wrapper.wabp-pos-left #wabp-tooltip {
    transform: translateX(-10px);
}

/* Al hacer hover: aparece en su posición natural */
#wabp-wrapper:hover #wabp-tooltip {
    opacity: 1;
    transform: translateX(0);
}



/* Base styles para wabp-btn-desktop (igual que wabp-btn) */
#wabp-btn-desktop {
    background: var(--wabp-color);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wabp-shadow);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    flex-shrink: 0;
    position: relative;
}
#wabp-btn-desktop::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--wabp-color);
    opacity: 0.4;
    animation: wabp-pulse 2.5s ease-out infinite;
}
#wabp-btn-desktop:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}
#wabp-btn-desktop svg { position: relative; z-index: 1; }
#wabp-btn-desktop .wabp-btn-label { position: relative; z-index: 1; }

/* ============================================================
   WIDGET STYLES — aplican a ambos botones (mobile y desktop)
   ============================================================ */

/* --- Móvil 1: Círculo --- */
#wabp-btn.wabp-style-mobile-circle {
    width: var(--wabp-size);
    height: var(--wabp-size);
    border-radius: 50%;
}

/* --- Móvil 2: Cuadrado redondeado --- */
#wabp-btn.wabp-style-mobile-rounded {
    width: var(--wabp-size);
    height: var(--wabp-size);
    border-radius: 18px;
}

/* --- Escritorio 1: Píldora horizontal --- */
#wabp-btn-desktop.wabp-style-desktop-pill {
    width: auto;
    height: 50px;
    border-radius: 50px;
    padding: 0 22px 0 16px;
    gap: 10px;
    flex-direction: row;
}
#wabp-btn-desktop.wabp-style-desktop-pill .wabp-btn-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* --- Escritorio 2: Tarjeta vertical --- */
#wabp-btn-desktop.wabp-style-desktop-card {
    width: auto;
    min-width: 80px;
    height: auto;
    border-radius: 16px;
    padding: 12px 16px 10px;
    flex-direction: column;
    gap: 5px;
}
#wabp-btn-desktop.wabp-style-desktop-card .wabp-btn-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
@keyframes wabp-pulse {
    0%   { transform: scale(1);   opacity: 0.4; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

@keyframes wabp-slide-in {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}


/* ============================================================
   RESPONSIVE: mostrar widget correcto según dispositivo
   ============================================================ */

/* Por defecto (desktop): mostrar desktop, ocultar mobile */
#wabp-btn         { display: none; }
#wabp-btn-desktop { display: flex; }

/* En móvil: mostrar mobile, ocultar desktop */
@media (max-width: 768px) {
    #wabp-btn         { display: flex; }
    #wabp-btn-desktop { display: none; }
}
/* Responsive */
@media (max-width: 480px) {
    :root {
        --wabp-size: 62px;
        --wabp-bottom: 14px;
        --wabp-side: 14px;
    }
    #wabp-tooltip { display: none; }
}