/*======================================================================
PROYECTO   : MAXALUD
MÓDULO     : Agenda Médica
ARCHIVO    : 08-doctor-list.css
VERSIÓN    : Enterprise 5.0

Listado de médicos.
======================================================================*/

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

.mx-doctor-list{

    width:100%;

    margin-top:32px;

    display:grid;

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

    gap:24px;

    align-items:stretch;

}

/*======================================================================
TARJETA
======================================================================*/

.mx-doctor-card{

    position:relative;

    display:flex;

    flex-direction:row;

    align-items:center;

    background:#FFFFFF;

    border:1px solid #E3E8F2;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        border-color .25s ease;

    box-shadow:

        0 6px 18px rgba(13,42,148,.07);

}

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

.mx-doctor-card:hover{

    transform:translateY(-6px);

    border-color:#0D2A94;

    box-shadow:

        0 22px 45px rgba(13,42,148,.18);

}

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

.mx-doctor-card.selected{

    border:2px solid #0D2A94;

    box-shadow:

        0 24px 48px rgba(13,42,148,.20);

}

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

@media(max-width:992px){

    .mx-doctor-list{

        grid-template-columns:1fr;

    }

}

/*======================================================================
FOTOGRAFÍA DEL MÉDICO
======================================================================*/

.mx-doctor-card__photo{

    flex:0 0 92px;

    width:92px;

    height:92px;

    margin:14px 0 14px 14px;

    overflow:hidden;

    border-radius:12px;

    background:#F4F7FC;

}

.mx-doctor-card__photo img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}

.mx-doctor-card:hover .mx-doctor-card__photo img{

    transform:scale(1.05);

}

/*======================================================================
CONTENIDO
======================================================================*/

.mx-doctor-card__content{

    display:flex;

    flex-direction:column;

    gap:3px;

    flex:1;

    padding:10px 12px;

}

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

.mx-doctor-card__name{

    margin:0;

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

    font-size:22px;

    font-weight:600;

    color:#233044;

    line-height:1.3;

}

/*======================================================================
ESPECIALIDAD
======================================================================*/

.mx-doctor-card__specialty{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:8px 16px;

    border-radius:50px;

    background:#EEF3FF;

    color:#0D2A94;

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

    font-size:14px;

    font-weight:500;

}

/*======================================================================
DATOS DEL MÉDICO
======================================================================*/

.mx-doctor-card__info{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.mx-doctor-card__item{

    display:flex;

    align-items:center;

    gap:10px;

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

    font-size:15px;

    color:#586273;

}

.mx-doctor-card__item i{

    width:18px;

    text-align:center;

    color:#0D2A94;

}

/*======================================================================
CALIFICACIÓN
======================================================================*/

.mx-doctor-card__rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:6px;

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

    font-size:15px;

    font-weight:500;

    color:#C99700;

}

.mx-doctor-card__rating i{

    color:#F4B400;

}

/*======================================================================
DISPONIBILIDAD
======================================================================*/

.mx-doctor-card__status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    margin-top:4px;

    padding:8px 16px;

    border-radius:50px;

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

    font-size:13px;

    font-weight:600;

    letter-spacing:.3px;

}

.mx-doctor-card__status.available{

    background:#EAF8EF;

    color:#1E8E3E;

}

.mx-doctor-card__status.busy{

    background:#FFF2E5;

    color:#E67E22;

}

.mx-doctor-card__status.offline{

    background:#F2F3F5;

    color:#6C757D;

}

/*======================================================================
ACCIONES
======================================================================*/

.mx-doctor-card__actions{

    display:flex;

    justify-content:flex-end;

    margin-top:24px;

}

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

.mx-doctor-card__button{

    width:100%;

    height:48px;

    border:none;

    border-radius:12px;

    background:#0D2A94;

    color:#FFFFFF;

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

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:all .25s ease;

}

.mx-doctor-card__button:hover{

    background:#1239B6;

    transform:translateY(-2px);

}

/*======================================================================
MÉDICO SELECCIONADO
======================================================================*/

.mx-doctor-card.selected{

    border:2px solid #0D2A94;

    box-shadow:0 22px 48px rgba(13,42,148,.22);

}

.mx-doctor-card.selected::after{

    content:"✓";

    position:absolute;

    top:18px;

    right:18px;

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#0D2A94;

    color:#FFFFFF;

    font-size:18px;

    font-weight:bold;

}

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

@keyframes doctorFade{

    from{

        opacity:0;

        transform:translateY(16px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mx-doctor-card{

    animation:doctorFade .35s ease;

}

/*======================================================================
ESPACIADO INTERNO
======================================================================*/

.mx-doctor-card>*:last-child{

    margin-bottom:0;

}

.mx-doctor-card__content>*:last-child{

    margin-bottom:0;

}

/*======================================================================
TRANSICIONES SUAVES
======================================================================*/

.mx-doctor-card,
.mx-doctor-card__button,
.mx-doctor-card__photo img{

    will-change:transform;

}

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

@media (max-width:992px){

    .mx-doctor-list{

        grid-template-columns:1fr;

        gap:22px;

    }

    .mx-doctor-card{

        max-width:700px;

        margin:0 auto;

    }

    .mx-doctor-card__photo{

        height:260px;

    }

}

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

@media (max-width:768px){

    .mx-doctor-card{

        border-radius:18px;

    }

    .mx-doctor-card__photo{

        height:220px;

    }

    .mx-doctor-card__content{

        padding:18px;

        gap:12px;

    }

    .mx-doctor-card__name{

        font-size:20px;

    }

    .mx-doctor-card__button{

        width:100%;

    }

}

/*======================================================================
MÓVIL PEQUEÑO
======================================================================*/

@media (max-width:480px){

    .mx-doctor-card__photo{

        height:190px;

    }

    .mx-doctor-card__content{

        padding:16px;

    }

    .mx-doctor-card__name{

        font-size:18px;

    }

    .mx-doctor-card__specialty{

        font-size:13px;

    }

    .mx-doctor-card__item{

        font-size:14px;

    }

    .mx-doctor-card__button{

        height:46px;

        font-size:14px;

    }

}

/*======================================================================
PREPARACIÓN PARA SMART PANEL
(No modifica el comportamiento actual.
Permite resaltar la tarjeta cuando el usuario avance al siguiente paso.)
======================================================================*/

.mx-doctor-card.is-active{

    border:2px solid #0D2A94;

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

}

.mx-doctor-card.is-disabled{

    opacity:.55;

    pointer-events:none;

    filter:grayscale(.2);

}

/*======================================================================
PROYECTO   : MAXALUD
MÓDULO     : Agenda Médica
ARCHIVO    : 08-doctor-list.css
BLOQUE 5   : Optimización Enterprise
======================================================================*/

/*======================================================================
FOCUS (Accesibilidad)
======================================================================*/

.mx-doctor-card:focus-within{

    outline:3px solid rgba(13,42,148,.18);

    outline-offset:4px;

}

.mx-doctor-card__button:focus{

    outline:none;

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

}

/*======================================================================
ESTADOS FUTUROS
======================================================================*/

.mx-doctor-card.is-online{

    border-left:5px solid #2E7D32;

}

.mx-doctor-card.is-featured{

    border-top:4px solid #C99700;

}

.mx-doctor-card.is-unavailable{

    opacity:.55;

    pointer-events:none;

}

/*======================================================================
BADGES
======================================================================*/

.mx-doctor-card__badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:10px;

}

.mx-doctor-card__badge{

    padding:6px 12px;

    border-radius:30px;

    background:#EEF3FF;

    color:#0D2A94;

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

    font-size:12px;

    font-weight:600;

}

/*======================================================================
LOADER
======================================================================*/

.mx-doctor-list.loading{

    opacity:.55;

    pointer-events:none;

    transition:opacity .25s ease;

}

/*======================================================================
SIN RESULTADOS
======================================================================*/

.mx-doctor-list__empty{

    width:100%;

    padding:50px 30px;

    text-align:center;

    background:#FFFFFF;

    border:2px dashed #D8DFEC;

    border-radius:18px;

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

    color:#6B7280;

}

.mx-doctor-list__empty h3{

    margin-bottom:12px;

    color:#233044;

    font-size:22px;

}

.mx-doctor-list__empty p{

    margin:0;

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

    font-size:15px;

    line-height:1.6;

}

/*======================================================================
ANIMACIÓN DE ENTRADA
======================================================================*/

@keyframes mxDoctorFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mx-doctor-card{

    animation:mxDoctorFade .35s ease both;

}

/*======================================================================
IMPRESIÓN
======================================================================*/

@media print{

    .mx-doctor-card{

        box-shadow:none;

        border:1px solid #CCCCCC;

        break-inside:avoid;

    }

    .mx-doctor-card__button{

        display:none;

    }

}

/*======================================================================
UX FINAL — TARJETA MÉDICO COMPACTA
======================================================================*/

.mx-doctor-card{

    display:flex;

    flex-direction:row;

    align-items:center;

    min-height:180px;

    padding:14px;

}

.mx-doctor-card__photo{

    flex:0 0 110px;

    width:110px;

    height:110px;

    margin:0 18px 0 50px;

    border-radius:50%;

}

.mx-doctor-card__content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:3px;

    padding:0;

}

.mx-doctor-card__content h3{

    margin:0 0 8px 0;

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

    font-size:20px;

    font-weight:600;

    line-height:1.2;

    color:#233044;

}

.mx-doctor-card__content p{

    margin:0;

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

    font-size:15px;

    line-height:1.35;

    color:#3D4652;

}

.mx-doctor-card__button{

    width:190px;

    height:42px;

    margin-top:10px;

    border:none;

    border-radius:7px;

    background:#0D2A94;

    color:#FFFFFF;

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

    font-size:14px;

    font-weight:500;

}

@media(max-width:576px){

    .mx-doctor-card{

        min-height:160px;

        padding:12px;

    }

    .mx-doctor-card__photo{

        flex:0 0 85px;

        width:85px;

        height:85px;

        margin-right:14px;

    }

    .mx-doctor-card__content h3{

        font-size:18px;

    }

    .mx-doctor-card__content p{

        font-size:14px;

        line-height:1.3;

    }

    .mx-doctor-card__button{

        width:170px;

        height:40px;

        margin-top:8px;

    }

}