/* Shared mobile rules for the admin, staff, client and parent panels. */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
    }

    .page-content, .page-inner, #main-wrapper, .container-fluid, .panel, .panel-body, .tab-content, .tab-pane {
        min-width: 0;
    }

    .nav.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .nav.nav-tabs > li {
        float: none !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    /* Legacy tables do not consistently use Bootstrap's table-responsive wrapper. */
    table.display,
    table.table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .table-responsive {
        width: 100%;
        border: 0;
        -webkit-overflow-scrolling: touch;
    }

    .modal-dialog {
        width: auto;
        margin: 10px;
    }

    .modal-body {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overflow-wrap: anywhere;
    }

    .modal-footer .btn {
        margin-bottom: 8px;
    }

    .form-inline .form-control,
    .form-inline .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .experiencia-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
    }

    .experiencia-resumen,
    .experiencia-acciones {
        width: 100%;
    }

    .experiencia-acciones {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .servicio-item {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .servicio-item > [class*="col-"] {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .servicio-item > .col-md-7 {
        width: calc(100% - 50px);
        padding-right: 8px;
    }

    .servicio-item > .col-md-1 {
        width: 50px;
        margin-left: 0;
        padding-left: 0;
    }

    .servicio-item .eliminar-documento {
        margin-bottom: 15px;
    }

    .calif-staff-resumen .calif-cards-row > [class*="col-"] {
        width: 100%;
    }

    #tabla-staff-viaje .staff-viaje-descripcion {
        min-width: 180px;
        max-width: 280px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}