/*======================================================================
PROYECTO   : MAXALUD
MÓDULO     : Agenda Médica
ARCHIVO    : 03-specialty-picker.css
-----------------------------------------------------------------------
Estilos del componente Specialty Picker.
======================================================================*/

/*======================================================================
VARIABLES
======================================================================*/

:root{

    --mx-primary:#0D2A94;

    --mx-primary-light:#2952CC;

    --mx-success:#18B65B;

    --mx-warning:#F5A623;

    --mx-danger:#E53935;

    --mx-white:#FFFFFF;

    --mx-background:#F5F7FB;

    --mx-border:#D8E1EF;

    --mx-text:#263238;

    --mx-text-light:#667085;

    --mx-radius:18px;

    --mx-shadow:

        0 10px 35px rgba(13,42,148,.08);

    --mx-transition:

        .25s ease;

}

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

.mx-specialty-picker{

    width:100%;

    max-width:900px;

    margin:40px auto;

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*======================================================================
CABECERA
======================================================================*/

.mx-specialty-picker__header{

    display:flex;

    flex-direction:column;

    gap:18px;

    text-align:center;

    align-items:center;

}

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

.mx-specialty-picker__badge{

    width:max-content;

    margin-top:90px;

    padding:10px 22px;

    border-radius:50px;

    background:#E8F8EF;

    color:var(--mx-success);

    font-size:.92rem;

    font-weight:600;

}

/*======================================================================
TÍTULO
======================================================================*/

.mx-specialty-picker__title{

    margin: 40px 0 0;

    font-size:3rem;

    line-height:1.1;

    font-weight:700;

    color:var(--mx-primary);

}

/*======================================================================
DESCRIPCIÓN
======================================================================*/

.mx-specialty-picker__description{

    margin:0;

    max-width:760px;

    font-size:1.20rem;

    line-height:1.8;

    color:var(--mx-text-light);

}

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

.mx-picker__info{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 22px;

    border-radius:18px;

    background:#FFFFFF;

    border:1px solid var(--mx-border);

    color:var(--mx-text-light);

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

}

.mx-picker__info i{

    color:var(--mx-success);

}

/*======================================================================
LISTADO DE MÉDICOS

El contenido será administrado por doctor-list.js

======================================================================*/

.mx-doctor-list{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:20px;

}

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

TABLET

======================================================================*/

@media(max-width:992px){

    .mx-specialty-picker{

        padding:0 20px;

    }

    .mx-specialty-picker__title{

        font-size:2.4rem;

    }

}

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

MÓVIL

======================================================================*/

@media(max-width:768px){

    .mx-specialty-picker__title{

        font-size:2rem;

    }

    .mx-specialty-picker__description{

        font-size:1rem;

    }

}

/*======================================================================
PICKER
======================================================================*/

.mx-picker{

    position:relative;

    width:100%;

}

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

.mx-picker__button{

    width:100%;

    min-height:74px;

    padding:0 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#FFFFFF;

    border:2px solid var(--mx-primary);

    border-radius:22px;

    cursor:pointer;

    transition:all var(--mx-transition);

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

}

.mx-picker__button:hover{

    border-color:var(--mx-primary-light);

    transform:translateY(-2px);

    box-shadow:

        0 18px 35px rgba(13,42,148,.15);

}

/*======================================================================
CONTENIDO DEL BOTÓN
======================================================================*/

.mx-picker__selected{

    display:flex;

    align-items:center;

    gap:16px;

}

.mx-picker__selected i{

    font-size:1.35rem;

    color:var(--mx-primary);

}

#mxPickerValue{

    font-size:1.25rem;

    font-weight:600;

    color:var(--mx-text);

}

/*======================================================================
FLECHA
======================================================================*/

.mx-picker__arrow{

    color:var(--mx-primary);

    font-size:1rem;

    transition:transform .25s ease;

}

.mx-picker__dropdown.active
+.mx-picker__arrow{

    transform:rotate(180deg);

}

/*======================================================================
DROPDOWN
======================================================================*/

.mx-picker__dropdown{

    position:absolute;

    top:calc(100% + 12px);

    left:0;

    width:100%;

    background:#FFFFFF;

    border:1px solid var(--mx-border);

    border-radius:22px;

    box-shadow:

        0 25px 45px rgba(0,0,0,.12);

    overflow:hidden;

    display:none;

    z-index:1000;

    animation:mxDropdown .20s ease;

}

.mx-picker__dropdown.active{

    display:block;

}

/*======================================================================
BUSCADOR
======================================================================*/

.mx-picker__search{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 22px;

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

    background:#F8FAFD;

}

.mx-picker__search i{

    color:var(--mx-primary);

    font-size:1rem;

}

#mxPickerSearch{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:1rem;

    color:var(--mx-text);

}

#mxPickerSearch::placeholder{

    color:#98A2B3;

}

/*======================================================================
CONTENEDOR DE OPCIONES
======================================================================*/

.mx-picker__options{

    max-height:380px;

    overflow-y:auto;

}

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

.mx-picker__options::-webkit-scrollbar{

    width:8px;

}

.mx-picker__options::-webkit-scrollbar-track{

    background:#EEF2F8;

}

.mx-picker__options::-webkit-scrollbar-thumb{

    background:var(--mx-primary);

    border-radius:20px;

}

/*======================================================================
ITEMS DEL DROPDOWN
======================================================================*/

.mx-picker__item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    cursor:pointer;

    transition:all .25s ease;

    border-bottom:1px solid #EEF2F8;

    background:#FFFFFF;

}

.mx-picker__item:last-child{

    border-bottom:none;

}

/*======================================================================
HOVER
======================================================================*/

.mx-picker__item:hover{

    background:#F5F8FF;

    transform:translateX(6px);

}

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

.mx-picker__icon{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#EEF4FF;

    font-size:1.30rem;

    flex-shrink:0;

}

/*======================================================================
NOMBRE
======================================================================*/

.mx-picker__name{

    flex:1;

    font-size:1.05rem;

    font-weight:600;

    color:var(--mx-text);

    line-height:1.4;

}

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

.mx-picker__item.active{

    background:#EAF2FF;

    border-left:5px solid var(--mx-primary);

}

.mx-picker__item.active .mx-picker__name{

    color:var(--mx-primary);

    font-weight:700;

}

/*======================================================================
MENSAJE VACÍO
======================================================================*/

.mx-picker__empty{

    padding:30px;

    text-align:center;

    color:#98A2B3;

    font-size:1rem;

}

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

.mx-picker__info{

    transition:all .25s ease;

}

.mx-picker__info strong{

    color:var(--mx-primary);

}

/*======================================================================
ANIMACIÓN DEL DROPDOWN
======================================================================*/

@keyframes mxDropdown{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================================================
FOCUS DEL BUSCADOR
======================================================================*/

#mxPickerSearch:focus{

    color:var(--mx-primary);

}

/*======================================================================
FOCUS DEL BOTÓN
======================================================================*/

.mx-picker__button:focus{

    outline:none;

    border-color:var(--mx-primary-light);

    box-shadow:

        0 0 0 4px rgba(13,42,148,.15);

}

/*======================================================================
ESTADO DESHABILITADO (PREPARADO)
======================================================================*/

.mx-picker__button:disabled{

    opacity:.60;

    cursor:not-allowed;

}

/*======================================================================
EFECTO DE CARGA (PREPARADO)
======================================================================*/

.mx-picker--loading{

    opacity:.70;

    pointer-events:none;

}

/*======================================================================
PREPARADO PARA MODO OSCURO
======================================================================*/

.mx-dark .mx-picker__button{

    background:#1F2937;

}

.mx-dark .mx-picker__dropdown{

    background:#111827;

}

/*======================================================================
MEJORA VISUAL DEL DROPDOWN
======================================================================*/

.mx-picker__dropdown{

    transition:
        opacity .25s ease,
        transform .25s ease;

    transform-origin:top center;

}

.mx-picker__dropdown.active{

    opacity:1;

    transform:translateY(0);

}

.mx-picker__dropdown:not(.active){

    opacity:0;

    transform:translateY(-8px);

}

/*======================================================================
ANIMACIÓN DEL ICONO DEL BOTÓN

Preparado para el JavaScript.

button.classList.toggle("active")

======================================================================*/

.mx-picker__button.active .mx-picker__arrow{

    transform:rotate(180deg);

}

/*======================================================================
EFECTO HOVER DEL BOTÓN
======================================================================*/

.mx-picker__button:hover .mx-picker__selected i{

    transform:scale(1.10);

}

.mx-picker__selected i{

    transition:transform .25s ease;

}

/*======================================================================
EFECTO HOVER DEL ICONO
======================================================================*/

.mx-picker__item:hover .mx-picker__icon{

    transform:scale(1.08);

}

.mx-picker__icon{

    transition:all .25s ease;

}

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

html{

    scroll-behavior:smooth;

}

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

@media(max-width:992px){

    .mx-picker__button{

        min-height:68px;

        padding:0 22px;

    }

    #mxPickerValue{

        font-size:1.10rem;

    }

}

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

@media(max-width:768px){

    .mx-picker__button{

        min-height:64px;

    }

    .mx-picker__selected{

        gap:12px;

    }

    .mx-picker__icon{

        width:40px;

        height:40px;

    }

    .mx-picker__name{

        font-size:1rem;

    }

}

/*======================================================================
RESPONSIVE MÓVIL
======================================================================*/

@media(max-width:576px){

    .mx-picker__button{

        padding:0 16px;

    }

    #mxPickerValue{

        font-size:1rem;

    }

    .mx-picker__search{

        padding:14px;

    }

}

/*======================================================================
PREPARADO PARA ESTADOS FUTUROS
======================================================================*/

.mx-picker__item.disabled{

    opacity:.50;

    pointer-events:none;

}

.mx-picker__item.loading{

    opacity:.70;

}

.mx-picker__item.online{

    border-left:4px solid #18B65B;

}

.mx-picker__item.offline{

    border-left:4px solid #E53935;

}

/*======================================================================
PREPARADO PARA BASE DE DATOS
======================================================================*/

.mx-picker__loading{

    padding:30px;

    text-align:center;

    color:var(--mx-primary);

    font-weight:600;

}

.mx-picker__error{

    padding:30px;

    text-align:center;

    color:#E53935;

    font-weight:600;

}

/*======================================================================
OPTIMIZACIÓN
======================================================================*/

.mx-picker *{

    box-sizing:border-box;

}