/* ===========================================================
   Negocios con Osio
   ASESOR EJECUTIVO PREMIUM
   BLOQUE 1/4
=========================================================== */

:root{

    --advisor-primary:#0F172A;
    --advisor-secondary:#C8A35F;
    --advisor-light:#FFFFFF;
    --advisor-background:#F8FAFC;
    --advisor-border:#E5E7EB;
    --advisor-text:#334155;
    --advisor-muted:#64748B;
    --advisor-success:#22C55E;

    --advisor-radius:22px;

    --advisor-shadow:
            0 24px 70px rgba(15,23,42,.18);

}

/*===========================================================
RESET
===========================================================*/

#advisor-widget,
#advisor-widget *,

#advisorChat,
#advisorChat *{

    box-sizing:border-box;

    font-family:
            "Inter",
            "Segoe UI",
            sans-serif;

}

/*===========================================================
LAUNCHER
===========================================================*/

#advisor-widget{

    position:fixed;

    right:99px;

    bottom:24px;

    z-index:999990;

}

.advisor-launcher{

    display:flex;

}

.advisor-launcher-button{

    display:flex;

    align-items:center;

    gap:14px;

    padding:10px 18px 10px 10px;

    background:#FFF;

    border:none;

    border-radius:60px;

    cursor:pointer;

    box-shadow:var(--advisor-shadow);

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

}

.advisor-launcher-button:hover{

    transform:translateY(-3px);

    box-shadow:
            0 30px 80px rgba(15,23,42,.24);

}

.advisor-launcher-photo{

    position:relative;

    width:64px;

    height:64px;

    flex-shrink:0;

}

.advisor-launcher-photo img{

    width:100%;

    height:100%;

    border-radius:50%;

    object-fit:cover;

}

.advisor-online{

    position:absolute;

    right:2px;

    bottom:3px;

    width:15px;

    height:15px;

    border-radius:50%;

    background:var(--advisor-success);

    border:3px solid #FFF;

    animation:pulse 2s infinite;

}

.advisor-launcher-text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.advisor-launcher-title{

    font-size:15px;

    font-weight:700;

    color:var(--advisor-primary);

}

.advisor-launcher-message{

    margin-top:3px;

    font-size:13px;

    color:var(--advisor-muted);

}

/*===========================================================
BACKDROP
===========================================================*/

.advisor-backdrop{

    position:fixed;

    inset:0;

    display:none;

    background:rgba(0,0,0,.30);

    backdrop-filter:blur(4px);

    z-index:999995;

}

/*===========================================================
PANEL
===========================================================*/

#advisorChat{

    position:fixed;

    right:105px;

    bottom:24px;

    width:440px;

    height:min(760px,calc(100vh - 48px));

    display:none;

    flex-direction:column;

    overflow:hidden;

    background:#FFF;

    border-radius:24px;

    box-shadow:var(--advisor-shadow);

    z-index:999999;

}

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

.chat-header{

    flex:0 0 86px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    background:var(--advisor-primary);

    color:#FFF;

}

.chat-user{

    display:flex;

    align-items:center;

    gap:14px;

}

.chat-user img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid rgba(255,255,255,.15);

}

.chat-user h2{

    margin:0;

    font-size:19px;

    font-weight:700;

}

.chat-user p{

    margin:4px 0 0;

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

    font-size:13px;

}

#advisorClose{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

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

    color:#FFF;

    font-size:26px;

    cursor:pointer;

    transition:.25s;

}

#advisorClose:hover{

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

}

/*===========================================================
STATUS
===========================================================*/

.chat-status{

    flex:0 0 42px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 22px;

    background:#FFF;

    border-bottom:1px solid var(--advisor-border);

    font-size:13px;

    color:var(--advisor-muted);

}

.status-circle{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--advisor-success);

    animation:pulse 2s infinite;

}

/*===========================================================
CUERPO
===========================================================*/

.chat-body{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

    background:var(--advisor-background);

}

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

@keyframes pulse{

    0%{

        transform:scale(.90);

        box-shadow:0 0 0 0 rgba(34,197,94,.60);

    }

    70%{

        transform:scale(1);

        box-shadow:0 0 0 14px rgba(34,197,94,0);

    }

    100%{

        transform:scale(.90);

    }

}

/*===========================================================
CONVERSACIÓN
===========================================================*/

.chat-conversation{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    padding:22px;

    scroll-behavior:smooth;

    background:var(--advisor-background);

}

.chat-conversation::-webkit-scrollbar{

    width:7px;

}

.chat-conversation::-webkit-scrollbar-track{

    background:transparent;

}

.chat-conversation::-webkit-scrollbar-thumb{

    background:#D6DCE5;

    border-radius:20px;

}

.chat-conversation::-webkit-scrollbar-thumb:hover{

    background:#C0C8D2;

}

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

.message{

    display:flex;

    width:100%;

    margin-bottom:16px;

    animation:messageIn .25s ease;

}

.message:last-child{

    margin-bottom:0;

}

.message.advisor{

    justify-content:flex-start;

}

.message.user{

    justify-content:flex-end;

}

.message-content{

    max-width:78%;

    padding:14px 18px;

    border-radius:18px;

    font-size:15px;

    line-height:1.65;

    word-break:break-word;

}

.message.advisor .message-content{

    background:#FFFFFF;

    color:#334155;

    border-top-left-radius:6px;

    box-shadow:

            0 6px 18px rgba(15,23,42,.05);

}

.message.user .message-content{

    background:var(--advisor-primary);

    color:#FFF;

    border-top-right-radius:6px;

}

@keyframes messageIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*===========================================================
TYPING
===========================================================*/

.typing-indicator{

    display:none;

    align-items:center;

    gap:12px;

    padding:16px 22px;

    background:#F8FAFC;

    border-top:1px solid var(--advisor-border);

}

.typing-avatar{

    flex-shrink:0;

}

.typing-avatar img{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

}

.typing-animation{

    display:flex;

    align-items:center;

    gap:6px;

}

.typing-animation span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#94A3B8;

    animation:typingAnimation 1.2s infinite;

}

.typing-animation span:nth-child(2){

    animation-delay:.15s;

}

.typing-animation span:nth-child(3){

    animation-delay:.30s;

}

@keyframes typingAnimation{

    0%{

        opacity:.25;

        transform:translateY(0);

    }

    50%{

        opacity:1;

        transform:translateY(-4px);

    }

    100%{

        opacity:.25;

        transform:translateY(0);

    }

}

/*===========================================================
ÁREA DE OPCIONES
===========================================================*/

.conversation-actions{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:18px;

    background:#FFFFFF;

    border-top:1px solid var(--advisor-border);

    max-height:260px;

    overflow-y:auto;

    overflow-x:hidden;

    flex-shrink:0;

}

.conversation-actions:empty{

    display:none;

}

.conversation-actions::-webkit-scrollbar{

    width:6px;

}

.conversation-actions::-webkit-scrollbar-thumb{

    background:#D6DCE5;

    border-radius:20px;

}

/*===========================================================
TARJETAS
===========================================================*/

.action-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:5px;

    border-radius:16px;

    background:#F8FAFC;

    border:2px solid transparent;

    cursor:pointer;

    transition:

            transform .20s,

            border-color .20s,

            background .20s,

            box-shadow .20s;

}

.action-card:hover{

    transform:translateY(-2px);

    background:#FFFFFF;

    border-color:var(--advisor-secondary);

    box-shadow:

            0 10px 24px rgba(15,23,42,.08);

}

.action-icon{

    width:48px;

    height:48px;

    flex-shrink:0;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(200,163,95,.15);

    font-size:22px;

}

.action-title{

    font-size:15px;

    font-weight:700;

    color:#1E293B;

}

.action-description{

    margin-top:5px;

    font-size:13px;

    line-height:1;

    color:#64748B;

}

/*===========================================================
CALENDARIO
===========================================================*/

.calendar-container{

    display:none;

    flex-shrink:0;

    background:#FFFFFF;

    border-top:1px solid var(--advisor-border);

    padding:20px;

    animation:fadeCalendar .25s ease;

}

.calendar-header{

    text-align:center;

    margin-bottom:18px;

}

.calendar-header h3{

    margin:0;

    color:var(--advisor-primary);

    font-size:22px;

    font-weight:700;

}

.calendar-header p{

    margin:8px 0 0;

    color:var(--advisor-muted);

    font-size:14px;

    line-height:1.6;

}

.calendar-dates{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-bottom:18px;

}

.calendar-date{

    appearance:none;

    border:2px solid var(--advisor-border);

    background:#FFF;

    border-radius:14px;

    padding:14px;

    cursor:pointer;

    transition:.20s;

    font-size:14px;

    font-weight:600;

}

.calendar-date:hover{

    border-color:var(--advisor-secondary);

}

.calendar-date.selected{

    background:var(--advisor-secondary);

    border-color:var(--advisor-secondary);

    color:#FFF;

}

.calendar-hours{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-bottom:20px;

}

.calendar-hour{

    appearance:none;

    border:2px solid var(--advisor-border);

    background:#FFF;

    border-radius:14px;

    padding:14px;

    cursor:pointer;

    transition:.20s;

    font-size:14px;

    font-weight:600;

}

.calendar-hour:hover{

    border-color:var(--advisor-primary);

}

.calendar-hour.selected{

    background:var(--advisor-primary);

    border-color:var(--advisor-primary);

    color:#FFF;

}

.calendar-footer{

    margin-top:8px;

}

.calendar-footer button{

    width:100%;

}

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

.advisor-button{

    width:100%;

    height:52px;

    border:none;

    border-radius:14px;

    background:var(--advisor-secondary);

    color:#FFF;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.20s;

}

.advisor-button:hover:not(:disabled){

    transform:translateY(-2px);

    filter:brightness(.96);

}

.advisor-button:disabled{

    background:#CBD5E1;

    cursor:not-allowed;

}

/*===========================================================
FOOTER
===========================================================*/

.chat-footer{

    flex-shrink:0;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFFFFF;

    border-top:1px solid var(--advisor-border);

}

.chat-footer small{

    color:#94A3B8;

    font-size:12px;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/*===========================================================
BACKDROP
===========================================================*/

.advisor-backdrop{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.28);

    backdrop-filter:blur(4px);

    display:none;

    z-index:999998;

}

/*===========================================================
APERTURA
===========================================================*/

.advisor-show{

    display:flex !important;

    animation:advisorOpen .28s ease;

}

.advisor-hide{

    animation:advisorClose .22s ease;

}

@keyframes advisorOpen{

    from{

        opacity:0;

        transform:

                translateX(30px)

                scale(.96);

    }

    to{

        opacity:1;

        transform:

                translateX(0)

                scale(1);

    }

}

@keyframes advisorClose{

    from{

        opacity:1;

        transform:

                translateX(0)

                scale(1);

    }

    to{

        opacity:0;

        transform:

                translateX(25px)

                scale(.96);

    }

}

@keyframes fadeCalendar{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:1200px){

    #advisorChat{

        right:95px;

        width:420px;

    }

}

@media (max-width:992px){

    #advisorChat{

        right:80px;

        width:390px;

    }

}

@media (max-width:768px){

    #advisor-widget{

        right:18px;

        bottom:18px;

    }

    #advisorChat{

        left:0;

        right:0;

        top:0;

        bottom:0;

        width:100%;

        height:100dvh;

        max-height:none;

        border-radius:0;

    }

    .calendar-dates{

        grid-template-columns:1fr;

    }

    .calendar-hours{

        grid-template-columns:repeat(2,1fr);

    }

    .message-content{

        max-width:88%;

    }

}

@media (max-width:480px){

    .chat-header{

        padding:16px;

    }

    .chat-user img{

        width:50px;

        height:50px;

    }

    .chat-user h2{

        font-size:17px;

    }

    .chat-user p{

        font-size:12px;

    }

    .conversation-actions{

        padding:14px;

    }

    .action-card{

        padding:14px;

    }

    .calendar-hours{

        grid-template-columns:1fr;

    }

}

/*===========================================================
UTILIDADES
===========================================================*/

.hidden{

    display:none !important;

}

.invisible{

    visibility:hidden !important;

}

.fade-in{

    animation:fadeIn .25s ease;

}

.fade-out{

    animation:fadeOut .20s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

/*===========================================================
ESTADO VACÍO
===========================================================*/

.conversation-actions:empty{

    display:none;

}

.calendar-container:empty{

    display:none;

}

/*===========================================================
MEJORAS VISUALES
===========================================================*/

.action-card:active{

    transform:scale(.98);

}

button{

    outline:none;

}

button:focus-visible{

    outline:2px solid var(--advisor-secondary);

    outline-offset:2px;

}

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*===========================================================
FIN
===========================================================*/