/* =========================================================
   HUACHAF
========================================================= */

.huachaf{

    position:fixed;

    right:25px;
    bottom:80px;

    z-index:9999999;

    font-family:
        Arial,
        sans-serif;

}


/* =========================================================
   BOTÓN
========================================================= */

/* =========================================================
   BOTÓN HUACHAF
========================================================= */

/* =========================================================
   BOTÓN HUACHAF
========================================================= */

.huachaf-toggle{

    width:140px !important;
    height:140px !important;

    padding:10px !important;

    border:0 !important;
    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background: none;

    cursor:pointer;

    overflow:hidden !important;

    box-sizing:border-box !important;


    transition:
        transform .2s ease;

}


/* LOGO */

.huachaf-toggle img.huachaf-toggle-icon{

    display:block !important;

    width:120px !important;
    height:120px !important;

    max-width:120px !important;
    max-height:120px !important;

    min-width:120px !important;
    min-height:120px !important;

    object-fit:contain !important;

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

}


/* HOVER */

.huachaf-toggle:hover{

    transform:scale(1.06);
    background: border-area;

}


/* =========================================================
   VENTANA
========================================================= */

.huachaf-window{

    position:absolute;

    right:0;
    bottom:140px;

    width:390px;
    height:570px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border-radius:18px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:#111b21;

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.7);


    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(15px)
        scale(.97);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

}


.huachaf-window.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   HEADER
========================================================= */

.huachaf-header{

    min-height:72px;

    padding:
        0 16px;

    display:flex;

    align-items:center;

    gap:12px;

    background:#075e54;

    color:#fff;

}


.huachaf-avatar{

    width:44px;
    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    font-size:20px;
    font-weight:800;

}


.huachaf-header-info{

    flex:1;

    min-width:0;

}


.huachaf-header-info strong{

    display:block;

    font-size:17px;

}


.huachaf-header-info span{

    display:block;

    margin-top:3px;

    color:
        rgba(255,255,255,.75);

    font-size:12px;

}


.huachaf-close{

    padding:0;

    border:0;

    background:transparent;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}


/* =========================================================
   MENSAJES
========================================================= */

.huachaf-messages{

    flex:1;

    padding:18px;

    overflow-y:auto;

    background:#0b141a;

}


/* =========================================================
   BURBUJAS
========================================================= */

.huachaf-message{

    width:fit-content;

    max-width:80%;

    margin-bottom:10px;

    padding:
        9px
        12px;

    border-radius:9px;

    color:#fff;

    font-size:14px;

    line-height:1.5;

    box-shadow:
        0 1px 2px
        rgba(0,0,0,.25);

}


.huachaf-message--advisor{

    margin-right:auto;

    background:#202c33;

    border-top-left-radius:2px;

}


.huachaf-message--user{

    margin-left:auto;

    background:#005c4b;

    border-top-right-radius:2px;

}


/* =========================================================
   INPUT
========================================================= */

.huachaf-compose{

    padding:10px;

    display:flex;

    align-items:center;

    gap:8px;

    background:#202c33;

}


.huachaf-input{

    flex:1;

    min-width:0;

    height:44px;

    padding:
        0
        16px;

    border:0;

    border-radius:24px;

    outline:none;

    background:#2a3942;

    color:#fff;

    font-size:14px;

}


.huachaf-input::placeholder{

    color:#8696a0;

}


/* =========================================================
   ENVIAR
========================================================= */

.huachaf-send{

    width:44px;
    height:44px;

    flex-shrink:0;

    padding:0;

    border:0;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#00a884;

    color:#fff;

    font-size:18px;

    cursor:pointer;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .huachaf{

        right:15px;
        bottom:50px;

    }


    .huachaf-window{

        position:fixed;

        left:10px;
        right:10px;

        bottom:90px;

        width:auto;

        height:
            min(
                650px,
                calc(100vh - 120px)
            );

    }
    
    .huachaf-toggle{

    width:80px !important;
    height:80px !important;

    padding:10px !important;

    border:0 !important;
    border-radius:50% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background: none;

    cursor:pointer;

    overflow:hidden !important;

    box-sizing:border-box !important;


    transition:
        transform .2s ease;

}


/* LOGO */

.huachaf-toggle img.huachaf-toggle-icon{

    display:block !important;

    width:60px !important;
    height:60px !important;

    max-width:60px !important;
    max-height:60px !important;

    min-width:60px !important;
    min-height:60px !important;

    object-fit:contain !important;

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

}
    
    

}

/* =========================================================
   HORA
========================================================= */

.huachaf-message-time{

    display:block;

    margin-top:4px;

    text-align:right;

    color:rgba(255,255,255,.5);

    font-size:10px;

}


/* =========================================================
   LOGIN
========================================================= */

.huachaf-login{

    display:inline-block;

    margin-top:12px;

    padding:
        9px
        14px;

    border-radius:20px;

    background:#00a884;

    color:#fff !important;

    font-size:13px;
    font-weight:700;

    text-decoration:none;

}

/* =========================================================
   HUACHAF OCULTO DURANTE VIDEO INTRO
========================================================= */

.huachaf.huachaf-hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(20px);

}


/* transición al aparecer */

.huachaf{

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;

}