/**
 * Contact speed-dial — Panamerik (Hyvä)
 * CSS autónomo. Usa los tokens del tema (--brand-yellow, --brand-red, etc.).
 * No depende de utilidades de Tailwind.
 */

[x-cloak] { display: none !important; }

.pk-speeddial {
    position: fixed;
    right: 24px;
    bottom: 65px;
    z-index: 40; 
    font-family: var(--font-body, system-ui, sans-serif);
}
@media print { .pk-speeddial { display: none !important; } }

/* ---- Acciones desplegables ---- */
.pk-speeddial__actions {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.pk-fab-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    /* estado cerrado */
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pk-speeddial.is-open .pk-fab-action {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* la acción más cercana al disparador entra primero */
.pk-speeddial.is-open .pk-fab-action:nth-child(1) { transition-delay: 0.06s; }
.pk-speeddial.is-open .pk-fab-action:nth-child(2) { transition-delay: 0s; }

.pk-fab-action__label {
    background: var(--color-neutral-900);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.pk-fab-action__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pk-fab-action:hover .pk-fab-action__btn { transform: scale(1.06); }
.pk-fab-action__btn svg { width: 22px; height: 22px; }
.pk-fab-action__btn--whatsapp { background: #25D366; }
.pk-fab-action__btn--chat { background: var(--brand-red); }
.pk-fab-action__btn--chat svg { width: 20px; height: 20px; } 

/* ---- Disparador ---- */
.pk-speeddial__trigger {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.06); /* hairline: ayuda en tema oscuro */
    border-radius: 50%;
    background-color: var(--text-primary);
    color: var(--brand-yellow);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pk-speeddial__trigger:hover { transform: scale(1.05); }
.pk-speeddial__trigger:active { transform: scale(0.95); }
.pk-speeddial__trigger svg { width: 24px; height: 24px; }
.pk-speeddial__trigger:focus-visible {
    outline: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28),
                0 0 0 2px var(--bg-canvas),
                0 0 0 4px var(--brand-yellow);
}

/* Cambio de icono chat <-> cerrar, solo con CSS */
.pk-icon--close { display: none; }
.pk-speeddial.is-open .pk-icon--chat { display: none; }
.pk-speeddial.is-open .pk-icon--close { display: block; }

@media (prefers-reduced-motion: reduce) {
    .pk-fab-action,
    .pk-fab-action__btn,
    .pk-speeddial__trigger { transition: none !important; }
}