/*==================================================
LM_SOFT
LM Saludo Familiar
==================================================*/

#lmf-widget{
    position:fixed;
    z-index:999999;
    display:flex;
    align-items:flex-end;
    gap:15px;
    max-width:700px;
    transition:all .5s ease;
}

/*==========================
POSICIONES
==========================*/

#lmf-widget.bottom-left{
    left:20px;
    bottom:20px;
}

#lmf-widget.bottom-right{
    right:20px;
    bottom:20px;
    flex-direction:row-reverse;
}

#lmf-widget.top-left{
    left:20px;
    top:20px;
    align-items:flex-start;
}

#lmf-widget.top-right{
    right:20px;
    top:20px;
    align-items:flex-start;
    flex-direction:row-reverse;
}

/*==========================
PERSONAJE
==========================*/

.lmf-character{

    display:block;

    max-width:100%;

    user-select:none;

    pointer-events:none;

    animation:lmFloat 3s ease-in-out infinite;

    filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));

}

/*==========================
GLOBO
==========================*/

.lmf-bubble{

    position:relative;

    width:350px;

    padding:22px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.20);

    font-family:Arial,Helvetica,sans-serif;

    line-height:1.55;

}

.lmf-bubble-content{
    display:flex;
    align-items:center;
    gap:20px;
}

.lmf-character-inline{
    flex-shrink:0;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    max-width:120px;
    height:auto;
}

.lmf-text-content{
    flex:1;
    min-width:0;
    text-align:left;
}

/* Cola del globo */

.bottom-left .lmf-bubble:after,
.top-left .lmf-bubble:after{

    content:"";

    position:absolute;

    left:35px;

    bottom:-18px;

    width:0;

    height:0;

    border-left:18px solid transparent;

    border-right:18px solid transparent;

    border-top:18px solid white;

}

.bottom-right .lmf-bubble:after,
.top-right .lmf-bubble:after{

    content:"";

    position:absolute;

    right:35px;

    bottom:-18px;

    width:0;

    height:0;

    border-left:18px solid transparent;

    border-right:18px solid transparent;

    border-top:18px solid white;

}

/*==========================
TEXTOS
==========================*/

.lmf-bubble h3{

    margin:0 0 12px;

    font-size:22px;

    font-weight:bold;

}

.lmf-message{

    font-size:16px;

}

.lmf-message strong{

    color:#0066cc;

    font-size:22px;

}

/*==========================
BOTON CERRAR
==========================*/

.lmf-close{

    position:absolute;

    top:8px;

    right:12px;

    cursor:pointer;

    font-size:24px;

    font-weight:bold;

    color:#666;

    transition:.2s;

}

.lmf-close:hover{

    color:red;

}

/*==========================
ANIMACIONES
==========================*/

.slide{

    animation:lmSlide .8s;

}

.fade{

    animation:lmFade .8s;

}

.zoom{

    animation:lmZoom .8s;

}

.bounce{

    animation:lmBounce .9s;

}

@keyframes lmSlide{

    from{

        transform:translateX(-350px);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

@keyframes lmFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes lmZoom{

    from{

        opacity:0;

        transform:scale(.3);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes lmBounce{

    0%{

        transform:scale(.3);

    }

    60%{

        transform:scale(1.1);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes lmFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:768px){

    #lmf-widget{

        left:10px !important;

        right:10px !important;

        bottom:10px !important;

        top:auto !important;

        flex-direction:column;

        align-items:flex-start;

        max-width:95%;

    }

    .lmf-bubble-content{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:15px;
    }

    .lmf-character-inline{
        width:100px !important;
        height:auto !important;
        margin-bottom:0;
    }

    .lmf-bubble{

        width:240px;
        max-width:85%;
        font-size:13px;
        padding:18px;

    }

    .lmf-bubble h3{

        font-size:18px;

    }

}