/*==========================================================
MAXALUD
SMART PANEL
==========================================================*/

.assistant-panel{

    position:fixed;

    inset:0;

    display:none;

    justify-content:flex-end;

    z-index:9999;

}

.assistant-panel.active{

    display:flex;

}


/*==========================================================
OVERLAY
==========================================================*/

.assistant-overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(4px);

}


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

.assistant{

    position:relative;

    width:560px;

    max-width:100%;

    height:100vh;

    background:#FFFFFF;

    overflow-y:auto;

    box-shadow:-12px 0 35px rgba(0,0,0,.18);

    animation:assistantOpen .35s ease;

}


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

.assistant-header{

    position:sticky;

    top:0;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding:20px;

    background:#FFFFFF;

    border-bottom:1px solid #E5E7EB;

    z-index:100;

}

#closeAssistant{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#F1F5F9;

    cursor:pointer;

    transition:.30s;

}

#closeAssistant:hover{

    background:#0D2A94;

    color:#FFFFFF;

}

/*==========================================================
BODY
==========================================================*/

.assistant-body{

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:42px;

    background:#FFFFFF;

}


/*==========================================================
SECCIONES
==========================================================*/

.assistant-section{

    display:flex;

    flex-direction:column;

    gap:24px;

    animation:fadeUp .35s ease;

}

.assistant-section h2{

    margin:0;

    font-family:"Poppins",sans-serif;

    font-size:32px;

    font-weight:600;

    line-height:1.2;

    color:#0D2A94;

    letter-spacing:-0.5px;

}

.assistant-text{

    margin:0;

    max-width:430px;

    font-family:"Roboto",sans-serif;

    font-size:16px;

    line-height:1.75;

    color:#64748B;

}


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

.specialty-card,
.doctor-card,
.date-card,
.hour-card,
.modality-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:18px;

    cursor:pointer;

    transition:.30s;

}

#modalityContainer{

    display:grid;

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

    gap:16px;

    margin-top:60px;

}

#modalityContainer button{

    width:100%;

    min-height:90px;

    padding:18px;

    border:1px solid #afafaf;

    border-radius:16px;

    background:#FFFFFF;

    color:#1E293B;

    font-family:"Poppins",sans-serif;

    font-size:16px;

    font-weight:500;

    cursor:pointer;

    transition:all .30s ease;

}

#modalityContainer button:hover{

    border-color:#0D2A94;

    color:#0D2A94;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(13,42,148,.10);

}

.specialty-card:hover,
.doctor-card:hover,
.date-card:hover,
.hour-card:hover,
.modality-card:hover{

    border-color:#0D2A94;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(13,42,148,.10);

}

.specialty-card.active,
.doctor-card.active,
.date-card.active,
.hour-card.active,
#modalityContainer button.active{

    border:1px solid #0D2A94;

    background:#e9e9e9;

}



/*==========================================================
ICONOS
==========================================================*/

.specialty-card i,
.doctor-card i,
.date-card i,
.hour-card i,
.modality-card i{

    font-size:28px;

    color:#0D2A94;

    margin-bottom:12px;

}

/*==========================================================
FORMULARIO DEL PACIENTE
==========================================================*/

.form-grid{

    display:grid;

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

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group.full-width{

    grid-column:1 / -1;

}



/*==========================================================
LABELS
==========================================================*/

.form-group label{

    margin-bottom:8px;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    font-weight:500;

    color:#334155;

}



/*==========================================================
INPUTS
==========================================================*/

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    font-family:'Roboto',sans-serif;

    font-size:15px;

    color:#334155;

    background:#FFFFFF;

    border:1px solid #D1D5DB;

    border-radius:12px;

    outline:none;

    transition:.30s;

    box-sizing:border-box;

}



/*==========================================================
FOCUS
==========================================================*/

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#0D2A94;

    box-shadow:0 0 0 4px rgba(13,42,148,.10);

}



/*==========================================================
TEXTAREA
==========================================================*/

.form-group textarea{

    resize:vertical;

    min-height:120px;

}



/*==========================================================
PLACEHOLDERS
==========================================================*/

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#94A3B8;

}



/*==========================================================
SELECT
==========================================================*/

.form-group select{

    cursor:pointer;

}

/*==========================================================
RESUMEN DE LA CITA
==========================================================*/

.summary-card{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:24px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

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

}


/*==========================================================
FILAS DEL RESUMEN
==========================================================*/

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:12px 0;

    border-bottom:1px solid #EEF2F7;

}

.summary-row:last-child{

    border-bottom:none;

}


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

.summary-row span{

    font-family:'Roboto',sans-serif;

    font-size:15px;

    color:#64748B;

}

.summary-row strong{

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    color:#1E293B;

    text-align:right;

}



/*==========================================================
TOTAL
==========================================================*/

.summary-row.total{

    margin-top:10px;

    padding-top:18px;

    border-top:2px solid #0D2A94;

    border-bottom:none;

}

.summary-row.total span{

    font-size:16px;

    font-weight:600;

    color:#0D2A94;

}

.summary-row.total strong{

    font-size:22px;

    font-weight:700;

    color:#0D2A94;

}



/*==========================================================
ANIMACIÓN
==========================================================*/

.summary-card{

    animation:fadeUp .35s ease;

}

/*==========================================================
HORARIOS DISPONIBLES
==========================================================*/

.time-slots{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:10px;

}

.time-slot{

    min-width:90px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFFFFF;

    border:2px solid #0D2A94;

    border-radius:10px;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    font-weight:600;

    color:#0D2A94;

    cursor:pointer;

    transition:.25s;

}

.time-slot:hover{

    background:#EEF4FF;

}

.time-slot.active{

    background:#0D2A94;

    color:#FFFFFF;

}

/*==========================================================
PAGO
==========================================================*/

#paymentContainer{

    display:grid;

    gap:18px;

}



/*==========================================================
TARJETA DE PAGO
==========================================================*/

.payment-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 20px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:16px;

    cursor:pointer;

    transition:.30s;

}

.payment-card:hover{

    border-color:#0D2A94;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(13,42,148,.10);

}

.payment-card.active{

    border:2px solid #0D2A94;

    background:#F5F8FF;

}



/*==========================================================
ICONO
==========================================================*/

.payment-icon{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#EDF4FF;

    color:#0D2A94;

    font-size:24px;

    flex-shrink:0;

}



/*==========================================================
INFORMACIÓN
==========================================================*/

.payment-info{

    flex:1;

}

.payment-info h3{

    margin:0 0 6px;

    font-family:'Poppins',sans-serif;

    font-size:17px;

    font-weight:600;

    color:#1E293B;

}

.payment-info p{

    margin:0;

    font-family:'Roboto',sans-serif;

    font-size:14px;

    line-height:1.5;

    color:#64748B;

}



/*==========================================================
ESTADO
==========================================================*/

.payment-status{

    display:flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    border-radius:50%;

    border:2px solid #CBD5E1;

    transition:.30s;

}

.payment-card.active .payment-status{

    background:#0D2A94;

    border-color:#0D2A94;

    color:#FFFFFF;

}



/*==========================================================
BADGE OPCIONAL
==========================================================*/

.payment-badge{

    display:inline-block;

    margin-top:8px;

    padding:4px 10px;

    border-radius:20px;

    background:#E8F5E9;

    color:#2E7D32;

    font-size:12px;

    font-family:'Roboto',sans-serif;

    font-weight:500;

}

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

.assistant-footer{

    position:sticky;

    bottom:0;

    display:flex;

    align-items:center;

    gap:16px;

    padding:24px 30px;

    background:#FFFFFF;

    border-top:1px solid #E5E7EB;

}



/*==========================================================
BOTONES
==========================================================*/

.btn-back,
.btn-next{

    flex:1;

    min-width:0;

    height:60px;

    border:none;

    border-radius:20px;

    font-family:"Poppins",sans-serif;

    font-size:16px;

    font-weight:400;

    cursor:pointer;

    transition:all .30s ease;

}



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

.btn-back{

    background:#0D2A94;

    color:#FFFFFF;

    border:none;

    display:flex;

    justify-content:center;

    align-items:center;

}

.btn-back:hover{

    background:#1238B8;

    transform:translateY(-2px);

}



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

.btn-next{

    background:#16A34A;

    color:#FFFFFF;

    box-shadow:0 10px 24px rgba(22,163,74,.30);

    flex:1;

}

.btn-next:hover{

    background:#15803D;

    transform:translateY(-2px);

    box-shadow:0 14px 30px rgba(22,163,74,.35);

}

.btn-next:active{

    transform:translateY(0);

}



/*==========================================================
ESTADOS DESHABILITADOS
==========================================================*/

.btn-back:disabled,
.btn-next:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

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

/*=========================
TABLET
=========================*/

@media (max-width:992px){

    .assistant{

        width:480px;

    }

    .assistant-body{

        padding:24px;

    }

}



/*=========================
MÓVILES
=========================*/

@media (max-width:768px){

    .assistant{

        width:100%;

        max-width:100%;

        border-radius:0;

    }

    .assistant-body{

        padding:20px;

        gap:30px;

    }

    .assistant-section h2{

        font-size:22px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .summary-row{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .summary-row strong{

        text-align:left;

    }

    .assistant-footer{

        flex-direction:column;

        padding:20px;

    }

    .btn-back,

    .btn-next{

        width:100%;

    }

}



/*=========================
MÓVILES PEQUEÑOS
=========================*/

@media (max-width:480px){

    .assistant-header{

        padding:16px;

    }

    .assistant-body{

        padding:18px;

    }

    .assistant-section h2{

        font-size:20px;

    }

    .assistant-text{

        font-size:14px;

    }

    .payment-card{

        padding:16px;

    }

    .payment-icon{

        width:50px;

        height:50px;

        font-size:20px;

    }

    .payment-info h3{

        font-size:16px;

    }

    .payment-info p{

        font-size:13px;

    }

}

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

.assistant::-webkit-scrollbar{

    width:10px;

}

.assistant::-webkit-scrollbar-track{

    background:#F1F5F9;

}

.assistant::-webkit-scrollbar-thumb{

    background:#C7D2FE;

    border-radius:20px;

}

.assistant::-webkit-scrollbar-thumb:hover{

    background:#0D2A94;

}



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

@keyframes assistantOpen{

    from{

        transform:translateX(100%);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==========================================================
ANIMACIONES DE LOS COMPONENTES
==========================================================*/

.assistant-section{

    animation:fadeUp .35s ease;

}

.payment-card,
.summary-card,
.specialty-card,
.doctor-card,
.date-card,
.hour-card,
.modality-card{

    animation:fadeIn .30s ease;

}



/*==========================================================
SELECCIÓN DE TEXTO
==========================================================*/

::selection{

    background:#0D2A94;

    color:#FFFFFF;

}


/*==========================================================
MEJORAS DE RENDIMIENTO
==========================================================*/

.assistant,
.payment-card,
.summary-card,
.specialty-card,
.doctor-card,
.date-card,
.hour-card,
.modality-card,
.btn-next,
.btn-back{

    will-change:transform;

}

.doctor-summary{

    text-align:center;

    margin-bottom:20px;

}

.doctor-summary h3{

    margin:0;

    font-size:18px;

    font-weight:600;

}

.doctor-summary span{

    color:#555;

}

.check-policy{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:15px;

    font-size:14px;

}

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

.calendar-day{

    width:78px;

    height:78px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    background:#FFFFFF;

    border:1px solid #D9E2F2;

    border-radius:18px;

    cursor:pointer;

    transition:all .30s ease;

}

.calendar-day strong{

    font-family:"Poppins",sans-serif;

    font-size:24px;

    font-weight:700;

    color:#173A8A;

}

.calendar-day span{

    font-family:"Roboto",sans-serif;

    font-size:13px;

    color:#64748B;

    text-transform:capitalize;

}

.calendar-day:hover{

    border-color:#16A34A;

    transform:translateY(-3px);

    box-shadow:0 12px 24px rgba(22,163,74,.15);

}

.calendar-day.selected{

    background:#16A34A;

    border-color:#16A34A;

    box-shadow:0 12px 28px rgba(22,163,74,.25);

}

.calendar-day.selected strong,

.calendar-day.selected span{

    color:#FFFFFF;

}

/*==========================================================
HORARIOS
==========================================================*/

.schedule-slot{

    min-width:86px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFFFFF;

    border:1px solid #D9E2F2;

    border-radius:14px;

    font-family:"Poppins",sans-serif;

    font-size:15px;

    font-weight:600;

    color:#173A8A;

    cursor:pointer;

    transition:all .30s ease;

}

.schedule-slot:hover{

    border-color:#16A34A;

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(22,163,74,.15);

}

.schedule-slot.selected{

    background:#16A34A;

    color:#FFFFFF;

    border-color:#16A34A;

    box-shadow:0 10px 24px rgba(22,163,74,.25);

}

/*==========================================================
CONTENEDORES DEL CALENDARIO
==========================================================*/

#calendarContainer{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(80px,1fr));

    gap:14px;

    margin-top:12px;

}

#scheduleContainer{

    display:block;

    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));

    gap:14px;

    margin-top:12px;

}