/* BLOQUEAR SCROLL AL ABRIR */

body.dashboard-ai-activo{

    overflow:hidden;

}
.sr-only{

    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;
    clip:rect(0, 0, 0, 0);

    white-space:nowrap;
    border:0;

}
/*======================================
            CHAT IA NTEGRAX
======================================*/


/*======================================
            CONTENEDOR
======================================*/

.chat-ia{

    position:fixed;

    right:28px;
    bottom:28px;

    z-index:9999;

}


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

.chat-ia-boton{

    min-width:138px;
    height:58px;

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

    gap:10px;

    padding:0 22px;

    background:linear-gradient(
        135deg,
        #0B1F3A,
        #1565C0
    );

    color:#FFFFFF;

    border:none;
    border-radius:30px;

    font-family:inherit;
    font-size:15px;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(11,31,58,.28),
        0 4px 12px rgba(21,101,192,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.chat-ia-boton:hover{

    transform:translateY(-3px);

    box-shadow:
        0 16px 34px rgba(11,31,58,.34),
        0 6px 16px rgba(21,101,192,.25);

}

.chat-ia-boton i{

    font-size:20px;

}


/*======================================
            VENTANA DEL CHAT
======================================*/

.chat-ia-ventana{

    position:absolute;

    right:0;
    bottom:76px;

    width:380px;
    height:560px;

    display:none;
    flex-direction:column;

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid rgba(11,31,58,.10);
    border-radius:20px;

    box-shadow:
        0 24px 70px rgba(11,31,58,.24),
        0 8px 24px rgba(11,31,58,.12);

    transform-origin:bottom right;

}

.chat-ia-ventana.activo{

    display:flex;

    animation:chatAparecer .25s ease forwards;

}


/*======================================
            ENCABEZADO
======================================*/

.chat-ia-header{

    min-height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:16px 18px;

    background:linear-gradient(
        135deg,
        #0B1F3A,
        #123A6D
    );

    color:#FFFFFF;

}

.chat-ia-identidad{

    display:flex;
    align-items:center;

    gap:12px;

}

.chat-ia-logo{

    width:46px;
    height:46px;

    flex-shrink:0;

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

    background:linear-gradient(
        135deg,
        #2A7BFF,
        #00B8D9
    );

    color:#FFFFFF;

    border:2px solid rgba(255,255,255,.24);
    border-radius:14px;

    font-size:14px;
    font-weight:800;
    letter-spacing:.5px;

    box-shadow:0 7px 18px rgba(0,0,0,.15);

}

.chat-ia-identidad > div:last-child{

    display:flex;
    flex-direction:column;

    gap:3px;

}

.chat-ia-identidad strong{

    font-size:15px;
    font-weight:800;
    letter-spacing:.4px;

}

.chat-ia-identidad span{

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

    font-size:12px;
    font-weight:500;

}

.chat-ia-cerrar{

    width:38px;
    height:38px;

    flex-shrink:0;

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

    background:rgba(255,255,255,.10);

    color:#FFFFFF;

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}

.chat-ia-cerrar:hover{

    background:rgba(255,255,255,.20);

    transform:rotate(5deg);

}

.chat-ia-cerrar i{

    font-size:17px;

}


/*======================================
            CUERPO DEL CHAT
======================================*/

.chat-ia-body{

    flex:1;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:14px;

    padding:20px 18px;

    overflow-y:auto;

    background:
        linear-gradient(
            rgba(246,249,253,.94),
            rgba(246,249,253,.94)
        );

}


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

.chat-mensaje{

    max-width:88%;

    padding:13px 15px;

    border-radius:16px;

    font-size:14px;
    line-height:1.6;

    animation:chatMensajeAparecer .22s ease;

}

.chat-mensaje p{

    margin:0;

}

.chat-mensaje p + p{

    margin-top:7px;

}

.chat-mensaje-ia{

    align-self:flex-start;

    background:#FFFFFF;

    color:#26364D;

    border:1px solid rgba(11,31,58,.08);

    border-bottom-left-radius:5px;

    box-shadow:0 7px 20px rgba(11,31,58,.07);

}

.chat-mensaje-usuario{

    align-self:flex-end;

    background:linear-gradient(
        135deg,
        #1565C0,
        #2A7BFF
    );

    color:#FFFFFF;

    border-bottom-right-radius:5px;

    box-shadow:0 7px 20px rgba(21,101,192,.18);

}


/*======================================
            OPCIONES RÁPIDAS
======================================*/

.chat-ia-opciones{

    width:100%;

    display:flex;
    flex-wrap:wrap;

    gap:8px;

}

.chat-ia-opciones button{

    padding:9px 12px;

    background:#FFFFFF;

    color:#174A82;

    border:1px solid rgba(21,101,192,.18);
    border-radius:18px;

    font-family:inherit;
    font-size:12px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 4px 12px rgba(11,31,58,.05);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.chat-ia-opciones button:hover{

    background:#1565C0;

    color:#FFFFFF;

    border-color:#1565C0;

    transform:translateY(-2px);

}


/*======================================
            FORMULARIO
======================================*/

.chat-ia-form{

    min-height:72px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 14px;

    background:#FFFFFF;

    border-top:1px solid rgba(11,31,58,.08);

}

.chat-ia-form input{

    flex:1;
    min-width:0;

    height:46px;

    padding:0 16px;

    background:#F5F8FC;

    color:#26364D;

    border:1px solid rgba(11,31,58,.10);
    border-radius:24px;

    font-family:inherit;
    font-size:14px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}

.chat-ia-form input::placeholder{

    color:#8794A6;

}

.chat-ia-form input:focus{

    background:#FFFFFF;

    border-color:#2A7BFF;

    box-shadow:0 0 0 4px rgba(42,123,255,.10);

}

.chat-ia-form button{

    width:46px;
    height:46px;

    flex-shrink:0;

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

    background:linear-gradient(
        135deg,
        #1565C0,
        #2A7BFF
    );

    color:#FFFFFF;

    border:none;
    border-radius:50%;

    cursor:pointer;

    box-shadow:0 7px 18px rgba(21,101,192,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.chat-ia-form button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(21,101,192,.28);

}

.chat-ia-form button i{

    font-size:15px;

}


/*======================================
            SCROLL
======================================*/

.chat-ia-body{

    scrollbar-width:thin;
    scrollbar-color:#B8C7DA transparent;

}

.chat-ia-body::-webkit-scrollbar{

    width:6px;

}

.chat-ia-body::-webkit-scrollbar-track{

    background:transparent;

}

.chat-ia-body::-webkit-scrollbar-thumb{

    background:#B8C7DA;

    border-radius:10px;

}


/*======================================
            ACCESIBILIDAD
======================================*/

.sr-only{

    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}
/*======================================
        INDICADOR ESCRIBIENDO
======================================*/

.chat-escribiendo{

    align-self:flex-start;

    display:flex;
    align-items:center;

    gap:5px;

    width:max-content;

    padding:13px 16px;

    background:#FFFFFF;

    border:1px solid rgba(11,31,58,.08);

    border-radius:16px;
    border-bottom-left-radius:5px;

    box-shadow:0 7px 20px rgba(11,31,58,.07);

}

.chat-escribiendo span{

    width:7px;
    height:7px;

    display:block;

    background:#7E8FA6;

    border-radius:50%;

    animation:chatPunto 1.2s infinite ease-in-out;

}

.chat-escribiendo span:nth-child(2){

    animation-delay:.15s;

}

.chat-escribiendo span:nth-child(3){

    animation-delay:.30s;

}


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

@keyframes chatAparecer{

    from{

        opacity:0;

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

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

@keyframes chatMensajeAparecer{

    from{

        opacity:0;

        transform:translateY(7px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
@keyframes chatPunto{

    0%,
    60%,
    100%{

        opacity:.35;
        transform:translateY(0);

    }

    30%{

        opacity:1;
        transform:translateY(-4px);

    }

}
/*======================================
        OPCIONES DE CONTACTO
======================================*/

.chat-contacto-opciones{

    width:100%;

    display:flex;
    flex-direction:column;

    gap:10px;

    margin-top:12px;
    padding:14px;

    background:#F5F8FC;

    border:1px solid #DCE5F0;
    border-radius:12px;

}

.chat-contacto-opciones a,
.chat-contacto-opciones button{

    width:100%;

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

    min-height:42px;

    padding:10px 14px;

    border:1px solid #0B1F3A;
    border-radius:9px;

    background:#FFFFFF;

    color:#0B1F3A;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}

.chat-contacto-opciones a:hover,
.chat-contacto-opciones button:hover{

    background:#0B1F3A;

    color:#FFFFFF;

    transform:translateY(-1px);

}

.chat-contacto-opciones a:first-child{

    background:#25D366;
    border-color:#25D366;

    color:#FFFFFF;

}

.chat-contacto-opciones a:first-child:hover{

    background:#1EAF55;
    border-color:#1EAF55;

}
/*======================================
        RESPONSIVE CHAT IA
======================================*/

@media (max-width: 576px){

    .chat-ia{

        right:14px;
        bottom:14px;

    }

    .chat-ia-boton{

        min-width:120px;
        height:52px;

        padding:0 18px;

        font-size:14px;

    }

    .chat-ia-ventana{

        position:fixed;

        left:12px;
        right:12px;
        bottom:78px;

        width:auto;
        height:min(560px, calc(100vh - 105px));

        border-radius:18px;

    }

    .chat-ia-header{

        min-height:74px;

        padding:13px 14px;

    }

    .chat-ia-logo{

        width:42px;
        height:42px;

    }

    .chat-ia-body{

        padding:16px 14px;

    }

    .chat-mensaje{

        max-width:92%;

        padding:12px 13px;

        font-size:13px;

    }

    .chat-ia-opciones{

        gap:7px;

    }

    .chat-ia-opciones button{

        padding:8px 10px;

        font-size:11px;

    }

    .chat-ia-form{

        min-height:66px;

        padding:10px 12px;

    }

    .chat-ia-form input{

        height:44px;

        font-size:13px;

    }

    .chat-ia-form button{

        width:44px;
        height:44px;

    }

}


@media (max-width: 390px){

    .chat-ia{

        right:10px;
        bottom:10px;

    }

    .chat-ia-boton{

        min-width:108px;
        height:48px;

        padding:0 15px;

        gap:7px;

        font-size:13px;

    }

    .chat-ia-ventana{

        left:8px;
        right:8px;
        bottom:68px;

        height:calc(100vh - 88px);

        border-radius:16px;

    }

    .chat-ia-header{

        min-height:68px;

        padding:11px 12px;

    }

    .chat-ia-identidad{

        gap:9px;

    }

    .chat-ia-logo{

        width:38px;
        height:38px;

        border-radius:11px;

        font-size:12px;

    }

    .chat-ia-identidad strong{

        font-size:13px;

    }

    .chat-ia-identidad span{

        font-size:10px;

    }

    .chat-ia-cerrar{

        width:34px;
        height:34px;

    }

    .chat-ia-body{

        gap:11px;

        padding:13px 11px;

    }

    .chat-mensaje{

        max-width:94%;

        padding:11px 12px;

        font-size:12px;
        line-height:1.5;

    }

    .chat-contacto-opciones{

        padding:11px;

    }

    .chat-contacto-opciones a,
    .chat-contacto-opciones button{

        min-height:39px;

        padding:9px 11px;

        font-size:12px;

    }

}