.es-staff-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .es-staff-grid { grid-template-columns: repeat(2, 1fr); } }

.es-staff-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1px solid var(--bs-border-color, #e3e7ff);
    border-radius: 16px; padding: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    transition: box-shadow .2s ease, transform .2s ease;
}
.es-staff-card:hover { box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb, 67, 94, 190), .12); }

.es-staff-avatar {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary-bg-subtle, #dbe1ff); color: var(--bs-primary, #2845a4);
    font-size: 1.4rem; font-weight: 700;
}
.es-staff-avatar img { width: 100%; height: 100%; object-fit: cover; }

.es-staff-info { flex: 1 1 auto; min-width: 0; }
.es-staff-name { font-size: 1rem; font-weight: 600; color: var(--bs-heading-color, #00174a); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-staff-pos  { font-size: .85rem; color: var(--bs-secondary-color, #6c757d); margin: .1rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-staff-phone { font-size: .9rem; font-weight: 500; color: var(--bs-primary, #2845a4); margin: .3rem 0 0; }

.es-staff-actions { flex: 0 0 auto; display: flex; gap: .4rem; }
.es-staff-btn {
    width: 46px; height: 46px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--bs-primary-rgb, 67, 94, 190), .12); color: var(--bs-primary, #2845a4);
    font-size: 1.15rem; text-decoration: none; transition: background-color .2s ease;
}
.es-staff-btn:hover { background: rgba(var(--bs-primary-rgb, 67, 94, 190), .22); color: var(--bs-primary, #2845a4); }
.es-staff-btn.es-staff-line { background: rgba(0, 195, 0, .12); color: #00b900; }
.es-staff-btn.es-staff-line:hover { background: rgba(0, 195, 0, .22); }

.es-staff-empty { text-align: center; color: var(--bs-secondary-color, #6c757d); padding: 3rem 1rem; }
.es-staff-empty i { font-size: 2.5rem; opacity: .5; }


@media (min-width: 768px) { .es-search-ico { display: none; } }


@media (max-width: 767.98px) {
    body { background: var(--bs-body-bg, #f2f7ff); }

    
    #main > header { display: none !important; }
    footer { display: none !important; }

    
    .es-mhero {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1; overflow: hidden;
        height: 210px; color: #fff;
        background: linear-gradient(120deg, #182d63 0%, var(--bs-primary, #435ebe) 100%);
        display: flex; flex-direction: column;
        padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px 0;
    }
    .es-mhero-topbar { display: flex; align-items: center; justify-content: space-between; height: 52px; }
    .es-mhero-brand { display: flex; align-items: center; gap: .5rem; min-width: 0; }
    .es-mhero-brand img { height: 42px; width: auto; }
    .es-mhero-brand span { font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
    .es-mhero-user {
        flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
        display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
        color: #fff; font-size: 1.25rem; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35);
        backdrop-filter: blur(2px);
    }
    .es-mhero-user img { width: 100%; height: 100%; object-fit: cover; }
    .es-mhero-body { margin-top: auto; padding-bottom: 34px; }
    .es-mhero-title { color: #fff; font-size: 1.7rem; font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
    .es-mhero-sub { font-size: .9rem; opacity: .85; margin-top: 3px; }

    
    #main-content.p-3 { padding: 0 !important; }
    #main-content .content-wrapper.container {
        max-width: none; position: relative; z-index: 2;
        margin-top: calc(210px - 26px);
        padding: 22px 16px calc(96px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(#fff 0%, var(--bs-body-bg, #f2f7ff) 18%);
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .05);
        min-height: calc(100dvh - 184px);
    }
    #main-content .page-title { display: none; }
    #main-content .section { margin: 0; }

    
    .es-search-wrap .es-search-ico { position: absolute; top: 50%; left: .9rem; transform: translateY(-50%); color: #9aa0ac; pointer-events: none; }
    .es-search-input { padding-left: 2.4rem; border-radius: 2rem; background: #fff; }

    
    .es-staff-card { border-color: rgba(0, 0, 0, .06); }

    
    .es-mbottomnav {
        position: fixed; z-index: 1040; left: 50%; transform: translateX(-50%);
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: calc(100% - 28px); max-width: 460px;
        display: flex; justify-content: space-around; align-items: center; gap: 2px; padding: 10px 8px;
        background: rgba(255, 255, 255, .72);
        -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, .55); border-radius: 26px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .16); transform-origin: bottom center;
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), padding .3s ease, opacity .3s ease;
    }
    .es-mnav-item {
        flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
        text-decoration: none; color: var(--bs-secondary-color, #6c757d);
        font-size: .64rem; font-weight: 500; line-height: 1; transition: color .2s ease;
    }
    .es-mnav-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 32px; border-radius: 999px; transition: background-color .25s ease, color .25s ease, height .25s ease; }
    .es-mnav-item i { font-size: 1.2rem; }
    .es-mnav-item.active { color: var(--bs-primary, #435ebe); }
    .es-mnav-item.active .es-mnav-ico { background: rgba(var(--bs-primary-rgb, 67, 94, 190), .14); }
    .es-mnav-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s ease, max-height .25s ease, margin .25s ease; max-height: 1.2em; }
    .es-mbottomnav.is-shrink { padding: 7px 8px; }
    .es-mbottomnav.is-shrink .es-mnav-label { opacity: 0; max-height: 0; margin: 0; }
    .es-mbottomnav.is-shrink .es-mnav-ico { height: 28px; }

    .es-cookie-fab { bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
}