/* ============================================================
   views/assets/css/custom/customdoctores.css
   DOCTOR — ESTILOS EXCLUSIVOS
   Última actualización: 2026-06-22 11:30 a.m. (VET)
   ============================================================ */

/* ===== Encabezado Doctor ===== */
.doctor-header {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.doctor-header h5 {
    font-weight: 700;
    color: #333;
    margin: 0;
    font-size: 1.1rem;
}

/* ===== Foto del Doctor ===== */
#preview_photo_doctor {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ===== Tabs del módulo Doctor ===== */
.tabs-scroll {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 6px;
}

.tabs-scroll .nav-link {
    border-radius: 10px 10px 0 0;
    margin-right: 6px;
}

/* ===== Select2 exclusivo de Doctor ===== */
.doctor-form .select2-container {
    width: 100% !important;
}

.doctor-form .select2-selection {
    border-radius: 10px !important;
    border: 1px solid #d8d8d8 !important;
    background: #fafafa !important;
    transition: all 0.2s ease-in-out;
}

.doctor-form .select2-selection:hover {
    border-color: #bcbcbc !important;
}

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

@media (max-width: 576px) {

    .doctor-header {
        padding: 12px 14px;
    }

    #preview_photo_doctor {
        width: 100px;
        height: 100px;
    }

    .doctor-form .col-12,
    .doctor-form .col-md-6 {
        margin-bottom: 12px;
    }
}

/* ============================================================
   FULLSCREEN MODAL — DOCTOR (Bootstrap 4)
   Samuel Premium Edition
============================================================ */

@media (max-width: 768px) {

    /* El modal ocupa toda la pantalla */
    .modal-fullscreen-mobile {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* El contenido también ocupa toda la pantalla */
    .modal-fullscreen-mobile .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
    }

    /* El body debe ser scrollable */
    .modal-fullscreen-mobile .modal-body {
        overflow-y: auto !important;
        padding-bottom: 80px !important;
    }

    /* Header fijo arriba */
    .modal-fullscreen-mobile .modal-header {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    /* Footer fijo abajo */
    .modal-fullscreen-mobile .modal-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 10;
        border-top: 1px solid #ddd;
    }
}