/* * ==================================================
 * BURBUJA DE SOPORTE (JS/burbujaSoporte.js)
 *
 * ! Un único botón (#burbujaSoporte) en las páginas públicas que cargan
 * ! notificacionesUsuario.js, solo con una conversación no resuelta.
 * ! z-index por debajo del backdrop de Bootstrap (1050) y de los
 * ! offcanvas: nunca queda encima de modales ni paneles.
 * ! --alerta-soporte-reserva: altura que ocupan otros flotantes de la
 * ! esquina (catálogo, /mis-ganancias); ver reservas más abajo.
 * ================================================== */
.burbuja-soporte {
    --alerta-soporte-reserva: 0px;
    --burbuja-soporte-borde: var(--accent-global, #0ff0fc);
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + var(--alerta-soporte-reserva) + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    display: inline-flex;
    width: 52px;
    height: 52px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--accent-global, #0ff0fc);
    font-size: 1.3rem;
    background: var(--surface-dark, #121215);
    border: 2px solid var(--burbuja-soporte-borde);
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 14px rgba(var(--wod-cyan-rgb, 15, 240, 252), 0.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: burbuja-soporte-entrada 0.2s ease-out;
    transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, bottom 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}

.burbuja-soporte[hidden] {
    display: none;
}

@media (hover: hover) {
    .burbuja-soporte:hover {
        background: var(--surface-hover, #1a1a1f);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 18px rgba(var(--wod-cyan-rgb, 15, 240, 252), 0.4);
    }
}

.burbuja-soporte:active {
    transform: scale(0.94);
}

.burbuja-soporte:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* * Cargando el chat (primer clic) */
.burbuja-soporte[aria-busy="true"] {
    cursor: progress;
}

.burbuja-soporte[aria-busy="true"] .burbuja-soporte-icono {
    opacity: 0.55;
}

/* * Fuera de horario: gris; el punto de mensaje nuevo se conserva */
.burbuja-soporte.is-fuera-horario {
    --burbuja-soporte-borde: #6b7280;
    color: #9ca3af;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* * Mensaje del equipo sin leer (pendienteUsuario). Punto sin número:
 * el número exacto no se deriva de los campos del chat. */
.burbuja-soporte-punto {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--wod-warning, #ffc107);
    border: 2px solid var(--bg-dark, #070709);
    border-radius: 50%;
}

.burbuja-soporte-punto[hidden] {
    display: none;
}

/* * Mensaje nuevo en vivo: aro amarillo, 2 latidos, nunca infinito */
.burbuja-soporte-aro {
    position: absolute;
    inset: -2px;
    border: 2px solid var(--wod-warning, #ffc107);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.burbuja-soporte.is-latido .burbuja-soporte-aro {
    animation: burbuja-soporte-aro 0.9s ease-out 2;
}

@keyframes burbuja-soporte-aro {

    0% {
        opacity: 0.9;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

/* * Alerta (solo aviso «Notificar usuario» vigente y no visto): aro
 * amarillo + rebote ~1,2 s y pausa ~2,5 s (ciclo de 3,7 s), sin fin hasta que
 * el chat se vea de verdad (burbujaSoporte.js quita .is-aviso) o caduque.
 * ! translate (no transform): no pisa el :active ni el aro del latido. */
.burbuja-soporte.is-aviso {
    --burbuja-soporte-borde: var(--wod-warning, #ffc107);
    color: var(--wod-warning, #ffc107);
    animation: burbuja-soporte-rebote 3.7s ease-out 0.2s infinite;
}

.burbuja-soporte.is-aviso .burbuja-soporte-aro {
    animation: burbuja-soporte-aviso-aro 3.7s ease-out 0.2s infinite;
}

@keyframes burbuja-soporte-rebote {

    0%,
    32%,
    100% {
        translate: 0 0;
    }

    8% {
        translate: 0 -9px;
    }

    16% {
        translate: 0 0;
    }

    22% {
        translate: 0 -4px;
    }

    27% {
        translate: 0 0;
    }
}

@keyframes burbuja-soporte-aviso-aro {

    0% {
        opacity: 0.9;
        transform: scale(1);
    }

    32% {
        opacity: 0;
        transform: scale(1.6);
    }

    33%,
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes burbuja-soporte-entrada {

    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* * Tooltip propio (el nombre accesible es aria-label) */
.burbuja-soporte-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    padding: 6px 10px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: rgba(7, 16, 25, 0.95);
    border: 1px solid rgba(var(--wod-cyan-rgb, 15, 240, 252), 0.35);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(4px, -50%);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.burbuja-soporte:focus-visible .burbuja-soporte-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

@media (hover: hover) {
    .burbuja-soporte:hover .burbuja-soporte-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }
}

@media (max-width: 575.98px) {
    .burbuja-soporte {
        right: max(12px, env(safe-area-inset-right, 0px));
    }
}

/* * ==================================================
 * RESERVA SOBRE LOS CONTROLES FLOTANTES DEL CATÁLOGO
 *
 * Pila (abajo → arriba): barra "Buscar y filtrar" (48px, bottom 16),
 * "Ir arriba" (52px; 46px en móvil), burbuja de soporte; 12px de aire.
 * Valores = geometría de catalogo-ui.css. "Ir arriba" visible =
 * .btn-volver-arriba-catalogo.visible (clase que ya gestiona el JS).
 * Solo se mueve la posición; no se toca z-index.
 * ================================================== */
/* * Catálogo con barra flotante */
body.catalogo-controles-flotando .burbuja-soporte {
    --alerta-soporte-reserva: 60px;
}

/* * Barra oculta por el footer */
body.catalogo-controles-flotando.catalogo-controles-en-footer .burbuja-soporte {
    --alerta-soporte-reserva: 0px;
}

/* * "Ir arriba" visible sobre la barra */
body.catalogo-controles-flotando:has(.btn-volver-arriba-catalogo.visible) .burbuja-soporte {
    --alerta-soporte-reserva: 124px;
}

/* * "Ir arriba" visible con la barra oculta por el footer */
body.catalogo-controles-flotando.catalogo-controles-en-footer:has(.btn-volver-arriba-catalogo.visible) .burbuja-soporte {
    --alerta-soporte-reserva: 64px;
}

/* * "Ir arriba" visible sin barra flotante (bottom 28px) */
body:not(.catalogo-controles-flotando):has(.btn-volver-arriba-catalogo.visible) .burbuja-soporte {
    --alerta-soporte-reserva: 76px;
}

/* * Panel de filtros abierto: ocupa la esquina; la burbuja cede el sitio */
body.catalogo-controles-abierto .burbuja-soporte {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* * /mis-ganancias: Términos / Preguntas (.ganancias-flotantes desde bottom
 * 12; hasta 2 × 48px + 8px) a la vista → la burbuja sube encima con aire. */
body:has(#panelAfiliadoContenido:not(.d-none)):has(.ganancias-flotantes:not(.is-hidden-by-footer)) .burbuja-soporte {
    --alerta-soporte-reserva: 112px;
}

/* * /mis-pedidos: «Filtrar y ordenar» (.pedidos-filtro-bar, fixed right 16 /
 * bottom 16 + safe-area, ~50px) ocupa la misma esquina que la burbuja → esta
 * sube encima con aire. Con la barra oculta por el footer o con un offcanvas
 * abierto (clases que ya gestiona misPedidos.js) la reserva vuelve a 0 y
 * `bottom` anima (0.2s) sin saltos. */
body.mis-pedidos-body:has(.pedidos-filtro-bar:not(.is-hidden-by-footer)) .burbuja-soporte {
    --alerta-soporte-reserva: 64px;
}

body.mis-pedidos-body.offcanvas-abierto:has(.pedidos-filtro-bar) .burbuja-soporte {
    --alerta-soporte-reserva: 0px;
}

@media (max-width: 767.98px) {
    /* * Trigger móvil: 46px. */
    body.mis-pedidos-body:has(.pedidos-filtro-bar:not(.is-hidden-by-footer)) .burbuja-soporte {
        --alerta-soporte-reserva: 60px;
    }

    body.mis-pedidos-body.offcanvas-abierto:has(.pedidos-filtro-bar) .burbuja-soporte {
        --alerta-soporte-reserva: 0px;
    }

    body.catalogo-controles-flotando:has(.btn-volver-arriba-catalogo.visible) .burbuja-soporte {
        --alerta-soporte-reserva: 118px;
    }

    body.catalogo-controles-flotando.catalogo-controles-en-footer:has(.btn-volver-arriba-catalogo.visible) .burbuja-soporte {
        --alerta-soporte-reserva: 58px;
    }

    /* * "Ir arriba" móvil: bottom 18px, 46px */
    body:not(.catalogo-controles-flotando):has(.btn-volver-arriba-catalogo.visible) .burbuja-soporte {
        --alerta-soporte-reserva: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .burbuja-soporte,
    .burbuja-soporte-tooltip {
        animation: none;
        transition: none;
    }

    .burbuja-soporte.is-latido .burbuja-soporte-aro {
        animation: none;
    }

    /* * Alerta sin movimiento: color amarillo, punto fijo y resplandor suave
     * constante hasta que se lea. */
    .burbuja-soporte.is-aviso,
    .burbuja-soporte.is-aviso .burbuja-soporte-aro {
        animation: none;
    }

    .burbuja-soporte.is-aviso {
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 16px 3px rgba(255, 193, 7, 0.45);
    }

    .burbuja-soporte.is-aviso .burbuja-soporte-punto {
        display: block;
    }
}