@media (max-width: 900px) {
    .site-header {
        flex-direction: column;
        gap: 12px;
        padding: 14px 20px;
    }

    .site-header nav { gap: 14px; font-size: 14px; flex-wrap: wrap; justify-content: center; }

    .hero { padding: 72px 20px 48px; min-height: auto; }
    .hero-pills, .why-grid, .trainers-grid, .plans-wrap, .grid-3, .grid-2, .grid-4, .routine-cards {
        grid-template-columns: 1fr;
    }

    .plan.featured { transform: none; }
    .cta-banner, .section, .site-footer { margin-left: 16px; margin-right: 16px; padding-left: 20px; padding-right: 20px; }
    .cta-banner { flex-direction: column; gap: 16px; text-align: center; }
    .site-footer { grid-template-columns: 1fr 1fr; }

    .login-page { grid-template-columns: 1fr; }
    .login-image, .login-photo { min-height: 220px; }
    .login-form-side { min-height: auto; padding-top: 64px; }
    .login-form { padding: 32px 22px 40px; }

    .app { display: block; }
    .menu-toggle {
        display: flex;
        min-width: 42px;
        min-height: 42px;
    }
    .app.is-nav-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .app.is-nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
    .app.is-nav-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 86vw);
        z-index: 50;
        transform: translateX(-105%);
        transition: transform .25s ease;
        flex-direction: column;
        overflow-y: auto;
        padding: 18px 14px 24px;
        box-shadow: none;
    }
    .app.is-nav-open .sidebar {
        transform: translateX(0);
        box-shadow: 8px 0 28px rgba(8, 18, 40, .28);
    }
    .sidebar .logo { padding: 6px 10px 22px; }
    .side-nav { display: flex; flex-direction: column; gap: 4px; }
    .side-nav a, .side-nav button { width: 100%; }
    .side-spacer { display: block; min-height: 16px; }

    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(8, 18, 40, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .app.is-nav-open .nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    body.is-nav-open { overflow: hidden; }

    .app-main { padding: 68px 14px 32px; overflow-x: clip; }
    #contenido { min-width: 0; max-width: 100%; overflow: visible; }
    .grid-2 {
        width: 100%;
        max-width: 100%;
    }
    .grid-2 > .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .quick a,
    .quick button {
        max-width: 100%;
        box-sizing: border-box;
    }
    .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
        align-items: center;
        margin: 0;
        padding: 10px 14px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        background: var(--bg);
        box-shadow: 0 1px 0 rgba(13, 71, 132, 0.08);
    }
    .menu-toggle {
        position: relative;
        z-index: 31;
        flex-shrink: 0;
    }
    .topbar-left { flex: 1 1 auto; min-width: 0; }
    .topbar-actions { flex: 0 0 auto; gap: 8px; }
    .topbar-left h1,
    .topbar h1 {
        font-size: 1.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .workout-timer { top: 62px; }
    .user-chip { padding: 6px; }
    .user-chip-text { display: none; }
    .fp-points-chip { padding: 6px 10px 6px 6px; }
    .fp-points-chip img { width: 22px; height: 22px; }
    .avatar { width: 36px; height: 36px; font-size: 13px; }

    .welcome { font-size: 1.25rem; }
    .grid-4.home-kpis,
    .grid-3.home-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .grid-4.home-kpis .notify-card,
    .grid-3.home-kpis > .card:last-child {
        grid-column: 1 / -1;
    }
    .home-kpis > .card {
        min-height: 0;
        padding: 16px;
    }
    .photo-card { min-height: 160px; }
    .routine-card.has-cover { min-height: 180px; }
    .stat .num { font-size: 1.85rem; }
    .card-head {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }
    .table-scroll {
        overflow-x: auto;
        max-width: 100%;
    }
    .table-hscroll {
        display: block;
        height: 32px;
    }
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .form-inline .field,
    .form-inline .field.search-field,
    .routine-filter .field {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
    .form-inline .btn { width: 100%; justify-content: center; }
    .routine-filter { gap: 10px; }
    .membership { flex-wrap: wrap; }
    .card-actions { flex-direction: column; align-items: stretch; }
    .card-actions .btn { width: 100%; justify-content: center; }

    .exercise-block {
        grid-template-columns: 1fr;
    }
    .exercise-gif {
        max-width: 260px;
        margin: 0 auto;
    }
    .reward-grid {
        grid-template-columns: 1fr 1fr;
    }
    .fp-balance { gap: 12px; }
    .fp-balance > img { width: 56px; height: 56px; }
    .fp-balance-text { min-width: 0; }
    .fp-balance-text strong { font-size: 1.7rem; }
    .fp-balance .btn { width: 100%; justify-content: center; }
    .timer-time { font-size: 1.8rem; }

    .users-create,
    .users-section {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .users-create .field input,
    .users-create .field select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .users-table thead { display: none; }
    .users-table,
    .users-table tbody,
    .users-table tr,
    .users-table td {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .users-table tr {
        box-sizing: border-box;
        padding: 4px 0 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid #e8eef6;
    }
    .users-table tr.is-editing {
        background: var(--blue-soft);
        border-radius: 12px;
        padding: 8px 10px 14px;
        border-bottom: 0;
    }
    .users-table tr.is-editing td { background: transparent; }
    .users-table tr:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    .users-table td {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 8px 0;
        border-bottom: 0;
        overflow-wrap: anywhere;
    }
    .users-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
    }
    .users-table .person { min-width: 0; flex-wrap: wrap; }
    .users-table .assign,
    .users-table .membership-select,
    .users-table .row-actions .btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        justify-content: center;
    }
    .users-table .row-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .users-table tr.users-empty-row { border: 0; padding: 4px 0; }
    .users-table .users-empty {
        display: block;
        grid-template-columns: 1fr;
    }
    .users-table .users-empty::before { content: none; }
}

@media (max-width: 560px) {
    .grid-4.home-kpis,
    .grid-3.home-kpis {
        grid-template-columns: 1fr;
    }
    .grid-4.home-kpis .notify-card { grid-column: auto; }
    .grid-3.home-kpis > .card:last-child { grid-column: auto; }
    .reward-grid { grid-template-columns: 1fr; }
    .reward-card { aspect-ratio: auto; }
    .site-footer { grid-template-columns: 1fr; }
}