/* Each sequence is finite; the configured cadence restarts it while visible. */
.whatsapp-widget[data-whatsapp-animation] {
    animation-duration: 1.8s;
    animation-delay: var(--whatsapp-animation-delay, 1.2s);
    animation-iteration-count: 2;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    transform-origin: right center;
}
.whatsapp-widget[data-whatsapp-animation="latido"] { animation-name: whatsapp-attention-pulse; }
.whatsapp-widget[data-whatsapp-animation="salto"] { animation-name: whatsapp-attention-lift; }
.whatsapp-widget[data-whatsapp-animation="balanceo"] { animation-name: whatsapp-attention-wave; }
.whatsapp-widget[data-whatsapp-animation="halo"] { animation-name: whatsapp-attention-halo; animation-duration:var(--whatsapp-halo-duration, 1.8s); }
.whatsapp-widget[data-whatsapp-animation="aparicion"] { animation-name: whatsapp-attention-appear; }
.whatsapp-widget[data-whatsapp-animation="giro"] { animation-name: whatsapp-attention-turn; }
.whatsapp-widget[data-whatsapp-animation="doble_toque"] { animation-name: whatsapp-attention-double-tap; }
.whatsapp-widget[data-whatsapp-animation]:hover,
.whatsapp-widget[data-whatsapp-animation]:focus-within,
.whatsapp-widget[data-whatsapp-paused="true"] { animation-play-state: paused; }
@keyframes whatsapp-attention-pulse {
    0%, 38%, 100% { transform: scale(1); }
    16% { transform: scale(1.055); }
    28% { transform: scale(1.025); }
}
@keyframes whatsapp-attention-lift {
    0%, 45%, 100% { transform: translateY(0); }
    18% { transform: translateY(-6px); }
    32% { transform: translateY(-2px); }
}
@keyframes whatsapp-attention-wave {
    0%, 48%, 100% { transform: rotate(0); }
    12% { transform: rotate(-3deg); }
    24% { transform: rotate(2deg); }
    36% { transform: rotate(-1deg); }
}
@keyframes whatsapp-attention-halo {
    0%, 65%, 100% { filter:drop-shadow(0 0 0 transparent); }
    28% { filter:drop-shadow(0 0 5px var(--whatsapp-halo-color, var(--whatsapp-color, #22c961))); }
}
@keyframes whatsapp-attention-appear {
    0%, 55%, 100% { transform:translateX(0); opacity:1; }
    12% { transform:translateX(8px); opacity:.82; }
}
@keyframes whatsapp-attention-turn {
    0%, 55%, 100% { transform:perspective(480px) rotateY(0); }
    18% { transform:perspective(480px) rotateY(-25deg); }
}
@keyframes whatsapp-attention-double-tap {
    0%, 20%, 40%, 100% { transform:scale(1); }
    10%, 30% { transform:scale(.96); }
}
/* Light effects stay inside the pill, including its compact mobile state. */
.whatsapp-widget[data-whatsapp-animation="borde"] .whatsapp-float,
.whatsapp-widget[data-whatsapp-animation="destello"] .whatsapp-float,
.whatsapp-widget[data-whatsapp-animation="borde"] .whatsapp-preview-bubble,
.whatsapp-widget[data-whatsapp-animation="destello"] .whatsapp-preview-bubble { position:relative; overflow:hidden; }
@property --whatsapp-border-angle {
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor) {
    .whatsapp-widget[data-whatsapp-animation="borde"] .whatsapp-float::before,
    .whatsapp-widget[data-whatsapp-animation="borde"] .whatsapp-preview-bubble::before {
        content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
        background:conic-gradient(from var(--whatsapp-border-angle), transparent 0deg, transparent 210deg, var(--whatsapp-border-color, #fff) 315deg, transparent 350deg);
        -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite:xor; mask-composite:exclude;
        opacity:0; pointer-events:none;
        animation:whatsapp-attention-border var(--whatsapp-border-duration, 1.8s) linear var(--whatsapp-animation-delay, 1.2s) 2;
    }
}
@keyframes whatsapp-attention-border {
    0% { --whatsapp-border-angle:0deg; opacity:0; }
    12%, 88% { opacity:1; }
    100% { --whatsapp-border-angle:360deg; opacity:0; }
}
.whatsapp-widget[data-whatsapp-animation="destello"] .whatsapp-float::after,
.whatsapp-widget[data-whatsapp-animation="destello"] .whatsapp-preview-bubble::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(110deg, transparent 32%, var(--whatsapp-shine-color, #fff) 50%, transparent 68%);
    opacity:0; transform:translateX(-110%);
    animation:whatsapp-attention-shine var(--whatsapp-shine-duration, 1.8s) cubic-bezier(.16,1,.3,1) var(--whatsapp-animation-delay, 1.2s) 2;
}
@keyframes whatsapp-attention-shine {
    0% { transform:translateX(-110%); opacity:0; }
    12%, 65% { opacity:.42; }
    85%, 100% { transform:translateX(110%); opacity:0; }
}
/* Ondas breves: una sola emisión por intervalo, sin desplazar el botón. */
.whatsapp-widget[data-whatsapp-animation^="onda_"] .whatsapp-float,
.whatsapp-widget[data-whatsapp-animation^="onda_"] .whatsapp-preview-bubble { position:relative; overflow:visible; }
.whatsapp-widget[data-whatsapp-animation^="onda_"] .whatsapp-float::before,
.whatsapp-widget[data-whatsapp-animation^="onda_"] .whatsapp-preview-bubble::before,
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-float::after,
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-preview-bubble::after {
    content:""; position:absolute; left:50%; top:50%;
    width:calc(100% + var(--whatsapp-wave-reach, 16px) * 2); height:calc(100% + var(--whatsapp-wave-reach, 16px) * 2); box-sizing:border-box;
    border:var(--whatsapp-wave-width, 2px) solid var(--whatsapp-wave-color, var(--whatsapp-color, #22c961)); border-radius:inherit;
    outline:1px solid rgba(255,255,255,.75); outline-offset:-3px;
    pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.04);
    transform-origin:center;
    animation:whatsapp-ripple-center var(--whatsapp-wave-duration, .9s) cubic-bezier(.16,1,.3,1) var(--whatsapp-animation-delay, 1.2s) 1 both;
}
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-float::before,
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-preview-bubble::before,
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-float::after,
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-preview-bubble::after { animation-duration:calc(var(--whatsapp-wave-duration, .9s) * .78); }
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-float::after,
.whatsapp-widget[data-whatsapp-animation="onda_doble"] .whatsapp-preview-bubble::after { animation-delay:calc(var(--whatsapp-animation-delay, 1.2s) + var(--whatsapp-wave-duration, .9s) * .22); }
.whatsapp-widget[data-whatsapp-animation="onda_contorno"] .whatsapp-float::before,
.whatsapp-widget[data-whatsapp-animation="onda_contorno"] .whatsapp-preview-bubble::before {
    inset:0; width:auto; height:auto; aspect-ratio:auto; border-radius:inherit;
    transform:none; animation-name:whatsapp-ripple-outline; animation-duration:var(--whatsapp-wave-duration, .9s);
}
@keyframes whatsapp-ripple-center {
    0% { transform:translate(-50%,-50%) scale(.04); opacity:0; }
    10% { opacity:.85; }
    100% { transform:translate(-50%,-50%) scale(1); opacity:0; }
}
@keyframes whatsapp-ripple-outline {
    /* Only the absolute outline expands; the button and stroke stay unchanged. */
    0% { inset:0; opacity:0; }
    8% { opacity:.7; }
    100% { inset:calc(var(--whatsapp-wave-reach, 16px) * -1); opacity:0; }
}
.whatsapp-widget[data-whatsapp-animation]:hover ::before,
.whatsapp-widget[data-whatsapp-animation]:hover ::after,
.whatsapp-widget[data-whatsapp-animation]:focus-within ::before,
.whatsapp-widget[data-whatsapp-animation]:focus-within ::after,
.whatsapp-widget[data-whatsapp-animation][data-whatsapp-paused="true"] ::before,
.whatsapp-widget[data-whatsapp-animation][data-whatsapp-paused="true"] ::after { animation-play-state:paused; }
/* Al interactuar se retiran las ondas, sin dejar un anillo congelado. */
.whatsapp-widget[data-whatsapp-animation^="onda_"]:hover ::before,
.whatsapp-widget[data-whatsapp-animation^="onda_"]:hover ::after,
.whatsapp-widget[data-whatsapp-animation^="onda_"]:focus-within ::before,
.whatsapp-widget[data-whatsapp-animation^="onda_"]:focus-within ::after,
.whatsapp-widget[data-whatsapp-animation^="onda_"][data-whatsapp-paused="true"] ::before,
.whatsapp-widget[data-whatsapp-animation^="onda_"][data-whatsapp-paused="true"] ::after { visibility:hidden; }
/* Preview is deliberately local to this panel, with no chat link. */
/* Pointer feedback is separate from the repeating attention animation. */
.whatsapp-widget[data-whatsapp-hover] .whatsapp-float,
#whatsappPreview[data-whatsapp-hover] .whatsapp-preview-bubble {
    translate:0;
    transition:width .28s ease, height .28s ease, padding .28s ease, border-radius .28s ease, transform .28s ease, box-shadow .18s ease, background-color .18s ease, translate .18s ease;
}
.whatsapp-widget[data-whatsapp-hover] .whatsapp-float:hover { transform:none; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25); }
@media (hover:hover) {
    .whatsapp-widget[data-whatsapp-hover="elevar"] .whatsapp-float:hover,
    .whatsapp-widget[data-whatsapp-hover="elevar_color"] .whatsapp-float:hover,
    #whatsappPreview[data-whatsapp-hover="elevar"] .whatsapp-preview-bubble:hover,
    #whatsappPreview[data-whatsapp-hover="elevar_color"] .whatsapp-preview-bubble:hover { translate:0 -2px; box-shadow:0 6px 16px rgba(0,0,0,.3); }
    .whatsapp-widget[data-whatsapp-hover="color"] .whatsapp-float:hover,
    .whatsapp-widget[data-whatsapp-hover="elevar_color"] .whatsapp-float:hover,
    #whatsappPreview[data-whatsapp-hover="color"] .whatsapp-preview-bubble:hover,
    #whatsappPreview[data-whatsapp-hover="elevar_color"] .whatsapp-preview-bubble:hover { background-color:var(--whatsapp-hover-color, #128c7e); }
}
#whatsapp-animation-preview { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; clear:both; float:none; box-sizing:border-box; width:100%; margin:8px 0 0; padding:12px; background:#f4f4f4; border:1px solid #ccc; color:#222; }
#whatsapp-animation-preview h3 { display:flex; align-items:center; gap:4px; float:none; margin:0; font-size:16px; }
#whatsapp-animation-preview p,
#container #content #page #configuracion #configuracion_configuracion form #whatsapp-animation-preview p { float:none; width:auto; line-height:1.5; margin:12px 0 0; }
#whatsapp-animation-preview [hidden] { display:none; }
.whatsapp-preview-stage { grid-column:1 / -1; display:flex; justify-content:center; align-items:center; min-height:calc(96px + var(--whatsapp-preview-wave-reach, 0px) * 2); padding:8px; overflow:hidden; }
#whatsappMotionNotice { grid-column:1 / -1; }
#whatsappPreview { position:static; display:inline-flex; align-items:center; gap:8px; max-width:100%; --whatsapp-color:#22c961; --whatsapp-scale:1; }
#whatsappPreview .whatsapp-preview-bubble { display:flex; align-items:center; gap:8px; min-width:0; padding:calc(12px * var(--whatsapp-scale)) calc(18px * var(--whatsapp-scale)); border-radius:999px; background:var(--whatsapp-color); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25); font:bold calc(15px * var(--whatsapp-scale))/1.35 Arial,sans-serif; }
#whatsappPreviewText { overflow-wrap:anywhere; }
#whatsappPreview img { display:none; flex:none; filter:brightness(0) invert(1); }
#whatsappPreview .whatsapp-preview-toggle { flex:none; display:inline-flex; justify-content:center; align-items:center; box-sizing:border-box; width:calc(28px * var(--whatsapp-scale)); height:calc(28px * var(--whatsapp-scale)); padding:0; margin:0; border:0; border-radius:50%; background:#333; color:#fff; font:calc(20px * var(--whatsapp-scale))/1 Arial,sans-serif; cursor:pointer; }
#whatsappPreview .whatsapp-preview-toggle:hover { background:#111; }
#whatsappPreview .whatsapp-preview-toggle:focus-visible { outline:2px solid #154f6b; outline-offset:3px; }
#whatsappPreview.is-small #whatsappPreviewText { display:none; }
#whatsappPreview.is-small img { display:block; width:calc(30px * var(--whatsapp-scale)); height:calc(30px * var(--whatsapp-scale)); }
#whatsappPreview.is-small .whatsapp-preview-bubble { flex:none; box-sizing:border-box; width:calc(54px * var(--whatsapp-scale)); height:calc(54px * var(--whatsapp-scale)); padding:0; border-radius:50%; justify-content:center; }
#whatsappReplay { min-height:32px; padding:4px 12px; background:#154f6b; border:1px solid #154f6b; color:#fff; font:13px/1.3 Arial,sans-serif; cursor:pointer; }
#whatsappReplay:hover { background:#103e54; }
#whatsappReplay:disabled { cursor:default; background:#e4e4e4; border-color:#aaa; color:#555; }
#whatsappReplay:focus-visible, #whatsapp_animacion:focus-visible { outline:2px solid #154f6b; outline-offset:3px; }
#whatsapp-animation-preview ::selection { background:#d7eaf3; color:#143c50; }
#whatsapp_animacion { min-height:36px; max-width:100%; }
#whatsapp_animacion_ayuda, #whatsapp_intervalo_ayuda { line-height:1.5; }
/* Controles de personalización y ayudas del administrador. */
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings { max-width:100%; --whatsapp-help-track:24px; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings > h2 { float:none; box-sizing:border-box; width:100%; height:auto; margin-bottom:8px; line-height:1.25; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; float:none; width:100%; max-width:100%; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form > p:not(.separador),
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings .whatsapp-effect-options > p { display:grid; grid-template-columns:155px minmax(0,1fr) var(--whatsapp-help-track); gap:0 8px; align-items:center; float:none; box-sizing:border-box; width:100%; margin:0; line-height:1.35; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form > p.separador { grid-column:1 / -1; float:none; box-sizing:border-box; width:100%; margin:0 0 4px; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form > .whatsapp-animation-field { grid-column:1; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form > .whatsapp-field-wide,
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form > .whatsapp-actions,
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings .whatsapp-effect-options,
#whatsapp-animation-preview { grid-column:1 / -1; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p label { float:none; width:auto; min-width:0; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p input.text,
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p select.select,
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p input[type="number"] { float:none; box-sizing:border-box; width:100%; min-width:0; min-height:32px; font:13px Arial,sans-serif; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p .chosen-container { max-width:100%; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p input.submit { grid-column:1 / -1; box-sizing:border-box; width:100%; min-height:32px; margin:0; }
#container #content #page #configuracion #configuracion_configuracion.whatsapp-settings .whatsapp-effect-options h3 { grid-column:1 / -1; margin:4px 0 0; font-size:14px; }
@media(max-width:760px) {
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form,
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings .whatsapp-effect-options { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings { --whatsapp-help-track:44px; }
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form > p:not(.separador),
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings .whatsapp-effect-options > p { grid-template-columns:minmax(0,1fr) var(--whatsapp-help-track); row-gap:4px; }
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p label { grid-column:1 / -1; }
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p input.text,
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p input[type="number"],
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p input[type="color"],
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p input.submit,
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings form p select.select { min-height:44px; }
    #whatsapp-animation-preview h3 { font-size:14px; }
    #whatsappReplay { max-width:88px; padding:4px 6px; font-size:12px; }
}

.whatsapp-effect-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; clear:both; }
.whatsapp-effect-options[hidden], .whatsapp-help-text[hidden], #whatsapp_hover_color_options[hidden] { display:none !important; }
#configuracion_configuracion input[id^="whatsapp_"][type="color"] {
    box-sizing:border-box; width:54px; height:32px; padding:2px;
    border:1px solid #888; border-radius:3px; background:#fff; cursor:pointer;
}
#configuracion_configuracion .whatsapp-help {
    position:relative; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
    margin:0; width:var(--whatsapp-help-track,24px); height:32px; flex:none; float:none;
}
#configuracion_configuracion .whatsapp-help-button {
    display:inline-flex; justify-content:center; align-items:center;
    box-sizing:border-box; width:24px; height:24px; min-height:0; margin:0; padding:0;
    border:1px solid #154f6b; border-radius:50%; background:#fff; color:#154f6b;
    font:italic 700 17px/1 Georgia,"Times New Roman",serif; cursor:help;
}
#configuracion_configuracion .whatsapp-help-button:hover,
#configuracion_configuracion .whatsapp-help-button[aria-expanded="true"] { background:#e4f2f7; }
#configuracion_configuracion .whatsapp-help-button:focus-visible { outline:2px solid #154f6b; outline-offset:3px; }
#configuracion_configuracion .whatsapp-help-text {
    position:fixed; z-index:10050; box-sizing:border-box; width:280px;
    max-width:calc(100vw - 32px); padding:12px 14px; margin:0;
    border:1px solid #b9cbd3; border-radius:5px; background:#fff; color:#173845;
    box-shadow:0 4px 14px rgba(0,0,0,.16); font:400 14px/1.45 Arial,sans-serif;
    text-align:left; text-transform:none; white-space:normal; overflow-wrap:anywhere;
}
@media (pointer:coarse) {
    #container #content #page #configuracion #configuracion_configuracion.whatsapp-settings { --whatsapp-help-track:44px; }
    #configuracion_configuracion .whatsapp-help { height:44px; }
    #configuracion_configuracion .whatsapp-help-button { position:relative; }
    #configuracion_configuracion .whatsapp-help-button::before { content:""; position:absolute; inset:-10px; }
}
@media (max-width:600px) {
    #whatsappPreview .whatsapp-preview-toggle { min-width:44px; min-height:44px; }
    #whatsappReplay, #whatsapp_animacion { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
    .whatsapp-widget[data-whatsapp-animation],
    .whatsapp-widget[data-whatsapp-animation] *,
    .whatsapp-widget[data-whatsapp-animation] *::before,
    .whatsapp-widget[data-whatsapp-animation] *::after { animation:none !important; transition:none !important; }
}
