.ceim-vambe-widget {
    --ceim-icon-size: 52px;
    --ceim-gap: 10px;
    --ceim-bubble-width: min(145px, calc(100vw - 100px));
    --ceim-card-width: min(260px, calc(100vw - 90px));
    position: fixed;
    z-index: 2147483000;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(62px + env(safe-area-inset-bottom));
    width: var(--ceim-icon-size);
    height: var(--ceim-icon-size);
    transition: width 320ms ease, height 320ms ease;
}

.ceim-vambe-widget:hover:not(:has(.ceim-vambe-toggle:checked)) {
    width: calc(var(--ceim-icon-size) + var(--ceim-gap) + var(--ceim-bubble-width));
}

.ceim-vambe-widget:has(.ceim-vambe-toggle:checked) {
    width: calc(var(--ceim-icon-size) + var(--ceim-gap) + var(--ceim-card-width));
    height: 221px;
}

.ceim-vambe-widget .ceim-vambe-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.ceim-vambe-widget .ceim-vambe-launcher {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: var(--ceim-icon-size);
    cursor: pointer;
}

.ceim-vambe-widget .ceim-vambe-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: var(--ceim-icon-size);
    height: var(--ceim-icon-size);
    object-fit: contain;
}

.ceim-vambe-widget .ceim-vambe-bubble {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: var(--ceim-bubble-width);
    height: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.97);
    transform-origin: right bottom;
    transition: opacity 260ms ease, transform 320ms ease, visibility 0s linear 320ms;
}

.ceim-vambe-widget:hover:not(:has(.ceim-vambe-toggle:checked)) .ceim-vambe-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.ceim-vambe-widget .ceim-vambe-card {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--ceim-card-width);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.97);
    transform-origin: right bottom;
    transition: opacity 260ms ease, transform 320ms ease, visibility 0s linear 320ms;
}

.ceim-vambe-widget .ceim-vambe-toggle:checked ~ .ceim-vambe-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.ceim-vambe-widget .ceim-vambe-action,
.ceim-vambe-widget .ceim-vambe-action img {
    display: block;
    width: 100%;
    height: auto;
}

.ceim-vambe-widget .ceim-vambe-action {
    line-height: 0;
    text-decoration: none;
}

.ceim-vambe-widget .ceim-vambe-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #424463;
    color: #fff;
    font: 24px/1 Arial, sans-serif;
    cursor: pointer;
}

.ceim-vambe-widget .ceim-vambe-toggle:focus-visible + .ceim-vambe-launcher .ceim-vambe-icon,
.ceim-vambe-widget .ceim-vambe-action:focus-visible {
    outline: 3px solid #004a70;
    outline-offset: 3px;
}

/* El widget sustituye visualmente al botón original de Vambe en todo el sitio. */
.vambe-whatsapp-button {
    display: none !important;
}

/* Centra la columna social en el costado derecho y reserva espacio para Laura. */
#sfsi_floater {
    position: fixed !important;
    top: max(90px, min(50%, calc(100% - 390px))) !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 45px !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 480px) {
    .ceim-vambe-widget {
        --ceim-icon-size: 48px;
        --ceim-gap: 6px;
        --ceim-bubble-width: min(135px, calc(100vw - 75px));
        --ceim-card-width: min(220px, calc(100vw - 80px));
        right: max(8px, env(safe-area-inset-right));
    }

    .ceim-vambe-widget:has(.ceim-vambe-toggle:checked) {
        height: 187px;
    }

    .ceim-vambe-widget .ceim-vambe-bubble {
        bottom: 0;
    }

    #sfsi_floater {
        top: max(90px, min(50%, calc(100% - 340px))) !important;
        right: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ceim-vambe-widget,
    .ceim-vambe-widget .ceim-vambe-bubble,
    .ceim-vambe-widget .ceim-vambe-card {
        transition-duration: 0ms;
        transition-delay: 0ms;
    }
}