/* VipControl mobile shell. Desktop remains untouched. */
#mobile-bottom-nav,
#mobile-brand,
.mobile-greeting,
.mobile-card-list,
.overview-mobile-list { display: none; }

@media (max-width: 768px) {
  #page-viptrainer .vt-reports-header { align-items: stretch; flex-direction: column; }
  #page-viptrainer .vt-report-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #page-viptrainer .vt-report-controls .btn { grid-column: 1/-1; min-height: 46px; }
  #page-viptrainer .vt-report-score { grid-template-columns: 100px minmax(0,1fr); padding: 12px; }
  #page-viptrainer .vt-report-score-ring { width: 92px; }
  #page-viptrainer .vt-report-score-list { grid-template-columns: minmax(0,1fr); }
  #page-viptrainer .vt-report-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #page-viptrainer .vt-report-charts, #page-viptrainer #vt-report-insights { grid-template-columns: minmax(0,1fr); }
  #page-viptrainer .vt-report-chart, #page-viptrainer .vt-report-chart-empty { min-width: 0; overflow: hidden; }
  #page-viptrainer .vt-nutrition-metrics, #page-viptrainer .vt-nutrition-reminders { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #page-viptrainer .vt-water-quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #page-viptrainer .vt-water-quick-actions .btn { min-width: 0; padding-inline: 4px; font-size: .72rem; }
  #page-viptrainer .vt-nutrition-hero-head { align-items: flex-start; }
  #page-viptrainer .vt-routine-grid, #page-viptrainer .vt-internal-reminders { grid-template-columns: minmax(0, 1fr); }
  #page-viptrainer .vt-premium-week { padding: 12px 8px; }
  #page-viptrainer .vt-week-days { gap: 3px; }
  #page-viptrainer .vt-week-day { min-height: 76px; padding: 7px 1px; }
  #page-viptrainer .vt-week-day span { width: 28px; height: 28px; }
  .vt-quick-checkin-form { grid-template-columns: minmax(0, 1fr); }
  .vt-checkin-chips { grid-template-columns: repeat(5, minmax(38px, 1fr)); }
  .vt-checkin-chips span { width: 100%; min-width: 38px; height: 42px; }
  .vt-checkin-actions { position: sticky; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg-1); }
  #page-viptrainer .vt-body-hero { align-items: stretch; flex-direction: column; padding: 16px; }
  #page-viptrainer .vt-body-hero .btn { width: 100%; min-height: 46px; }
  #page-viptrainer .vt-body-chart-filters { width: 100%; padding-bottom: 2px; }
  #page-viptrainer .vt-body-charts-grid { grid-template-columns: minmax(0, 1fr); }
  #page-viptrainer .vt-body-chart-svg { min-height: 150px; }
  #page-viptrainer .vt-body-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-viptrainer .vt-achievements-grid { grid-template-columns: minmax(0, 1fr); }
  #page-viptrainer .vt-achievement { min-width: 0; }
  #page-viptrainer #vt-measurements-table { min-width: 620px; }
  :root {
    --mobile-header-h: 58px;
    --mobile-bottom-h: 96px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --viptrainer-bottom-nav-h: 68px;
    --mobile-x: clamp(14px, 4vw, 22px);
    --mobile-card-bg: rgba(14, 36, 64, .74);
    --mobile-card-border: rgba(105, 156, 220, .28);
    --mobile-dock-base: 50px;
    --mobile-dock-panel-h: 68px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    background: #071626;
  }

  body {
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0 !important;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
  }

  body.mobile-menu-open {
    /* iOS Safari ignora overflow:hidden para travar toque — fixamos o body.
       O `top: -<scrollY>px` é aplicado pelo JS (setMobileSidebarShell) e
       restaurado ao fechar, preservando a posição de rolagem. */
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  #app,
  .main-wrapper,
  .main-content,
  .page {
    max-width: 100%;
    min-width: 0;
  }

  .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  html body #app .dashboard-sidebar ~ .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 260;
    min-height: calc(var(--mobile-header-h) + var(--safe-t));
    height: calc(var(--mobile-header-h) + var(--safe-t)) !important;
    padding: var(--safe-t) var(--mobile-x) 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(6, 19, 34, .92) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(106, 157, 220, .18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
    backdrop-filter: blur(18px) saturate(1.25) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  }

  #sidebar-toggle,
  #theme-toggle-btn,
  #btn-change-pass,
  #btn-logout,
  #shell-theme-btn,
  #shell-logout-btn {
    display: none !important;
  }

  #sidebar-toggle {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(148, 184, 255, .18);
    border-radius: 13px;
    background: var(--vc-layer-medium);
    color: var(--vc-ink-inverse);
  }

  #mobile-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
    color: var(--vc-ink-inverse);
    font-weight: 800;
    font-size: 1.04rem;
    line-height: 1;
  }

  #mobile-brand .mb-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--vc-ink-inverse);
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .34);
  }

  .topbar-title {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0 !important;
    color: rgba(255, 255, 255, .86);
    font-size: .86rem !important;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-title i { display: none; }
  .topbar-actions {
    flex: 0 0 auto;
    margin-left: auto !important;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .topbar-actions .topbar-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    border: 1px solid var(--vc-border-strong);
    background: var(--vc-layer-alpha-050);
  }

  .main-content {
    padding: 16px var(--mobile-x) calc(var(--mobile-bottom-h) + var(--safe-b) + 28px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: calc(100svh - var(--mobile-header-h) - var(--safe-t));
    min-height: calc(100dvh - var(--mobile-header-h) - var(--safe-t));
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .page {
    padding: 0 !important;
  }

  .page.active {
    display: block;
  }

  #page-viptrainer.page.active {
    animation: none !important;
    transform: none !important;
  }

  #page-frame-host {
    margin: -16px calc(var(--mobile-x) * -1) 0 !important;
    height: calc(100svh - var(--mobile-header-h) - var(--safe-t) - var(--mobile-bottom-h) - var(--safe-b)) !important;
    min-height: 420px;
    overflow: hidden;
  }

  #main-frame {
    width: 100% !important;
    height: 100% !important;
  }

  #mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(var(--safe-b) + 10px);
    transform: translateX(-50%);
    z-index: 320;
    align-items: flex-end;
    justify-content: center;
    width: max-content;
    max-width: calc(100vw - 22px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    height: var(--mobile-dock-panel-h);
    padding: 0 8px 8px;
    gap: clamp(7px, 2.2vw, 12px);
    overflow: visible;
    border-radius: 18px;
    background:
      linear-gradient(180deg, var(--vc-layer-strong), transparent 48%),
      rgba(18, 15, 23, .9);
    border: 1px solid rgba(143, 166, 255, .22);
    box-shadow:
      0 24px 54px rgba(0, 0, 0, .48),
      0 0 0 1px var(--vc-layer-alpha-030) inset,
      0 0 42px var(--vc-primary-alpha-16);
    -webkit-backdrop-filter: blur(24px) saturate(1.28);
    backdrop-filter: blur(24px) saturate(1.28);
    isolation: isolate;
    touch-action: pan-y;
  }

  #mobile-bottom-nav.is-hidden {
    display: none !important;
  }

  #mobile-bottom-nav::before {
    content: "";
    position: absolute;
    inset: -18px 8px auto;
    height: 34px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(83, 145, 255, .28), transparent 72%);
    filter: blur(12px);
    opacity: .74;
    pointer-events: none;
    z-index: -1;
  }

  .mbn-item {
    --dock-size: var(--mobile-dock-base);
    --dock-lift: 0px;
    flex: 0 0 auto;
    position: relative;
    width: var(--dock-size);
    height: var(--dock-size);
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    background:
      linear-gradient(180deg, var(--vc-layer-alpha-070), var(--vc-layer-alpha-015)),
      rgba(18, 15, 23, .96);
    color: rgba(226, 232, 240, .72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font: inherit;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    outline: none;
    box-shadow:
      0 8px 18px rgba(0, 0, 0, .24),
      0 1px 0 var(--vc-layer-strong) inset;
    transform: translateY(var(--dock-lift));
    transition:
      width 160ms cubic-bezier(.2, .85, .2, 1),
      height 160ms cubic-bezier(.2, .85, .2, 1),
      transform 160ms cubic-bezier(.2, .85, .2, 1),
      color 160ms ease,
      border-color 160ms ease,
      background 160ms ease,
      box-shadow 160ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mbn-item::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 18%, rgba(96, 165, 250, .22), transparent 62%);
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
  }

  .mbn-item i {
    position: relative;
    z-index: 1;
    font-size: 1.16rem;
    line-height: 1;
    transition: transform 160ms ease, color 160ms ease, filter 160ms ease;
  }

  .mbn-item span {
    position: absolute;
    top: -34px;
    left: 50%;
    z-index: 2;
    width: max-content;
    max-width: calc(100vw - 28px);
    padding: 5px 9px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, .2);
    background: rgba(18, 15, 23, .96);
    color: var(--vc-ink-inverse);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .36);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .mbn-item:hover,
  .mbn-item:focus-visible,
  .mbn-item.is-dock-hover {
    color: var(--vc-ink-inverse);
    border-color: rgba(96, 165, 250, .44);
  }

  .mbn-item:hover::before,
  .mbn-item:focus-visible::before,
  .mbn-item.is-dock-hover::before,
  .mbn-item.active::before {
    opacity: 1;
  }

  .mbn-item:hover span,
  .mbn-item:focus-visible span,
  .mbn-item.is-dock-hover span,
  #mobile-bottom-nav:not(.is-dock-interacting) .mbn-item.active span {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .mbn-item.active {
    color: var(--vc-ink-inverse);
    border-color: rgba(96, 165, 250, .6);
    background:
      linear-gradient(180deg, rgba(96, 165, 250, .38), rgba(37, 99, 235, .2)),
      rgba(18, 15, 23, .96);
    box-shadow:
      0 14px 28px rgba(37, 99, 235, .22),
      0 0 0 1px rgba(147, 197, 253, .12) inset,
      0 0 22px rgba(59, 130, 246, .28);
  }

  .mbn-item.active i {
    filter: drop-shadow(0 0 12px rgba(147, 197, 253, .55));
    transform: translateY(-1px);
  }

  .mbn-item:active {
    transform: translateY(calc(var(--dock-lift) + 2px)) scale(.96);
  }

  [data-theme="light"] #mobile-bottom-nav {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(247, 249, 252, .78)),
      rgba(248, 250, 252, .92);
    border-color: rgba(88, 124, 173, .24);
    box-shadow:
      0 22px 48px rgba(15, 23, 42, .18),
      0 0 0 1px rgba(255, 255, 255, .74) inset,
      0 0 36px var(--vc-primary-alpha-12);
  }

  [data-theme="light"] .mbn-item {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(241, 245, 249, .84)),
      rgba(248, 250, 252, .94);
    border-color: rgba(100, 116, 139, .2);
    color: rgba(51, 65, 85, .74);
    box-shadow:
      0 9px 18px rgba(15, 23, 42, .08),
      0 1px 0 rgba(255, 255, 255, .88) inset;
  }

  [data-theme="light"] .mbn-item span {
    background: rgba(248, 250, 252, .96);
    border-color: rgba(100, 116, 139, .2);
    color: #0f172a;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
  }

  [data-theme="light"] .mbn-item:hover,
  [data-theme="light"] .mbn-item:focus-visible,
  [data-theme="light"] .mbn-item.is-dock-hover,
  [data-theme="light"] .mbn-item.active {
    color: #0f172a;
  }

  #toast-container {
    left: var(--mobile-x) !important;
    right: var(--mobile-x) !important;
    bottom: calc(var(--mobile-bottom-h) + var(--safe-b) + 12px) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 12000 !important;
  }

  #toast-container .toast {
    max-width: 100%;
    min-height: 58px;
    padding: 12px 12px 13px;
    gap: 10px;
  }

  #toast-container .toast-icon {
    font-size: 16px;
  }

  #toast-container .toast-message {
    font-size: 14px;
    line-height: 1.25;
  }

  #toast-container .toast-detail {
    font-size: 12px;
    line-height: 1.35;
  }

  #toast-container .toast-close {
    width: 24px;
    height: 24px;
  }

  .mobile-greeting {
    display: block;
    margin: 0 0 16px;
  }

  .mobile-greeting .mg-hi {
    margin: 0;
    color: var(--vc-ink-inverse);
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.18;
  }

  .mobile-greeting .mg-sub {
    margin: 5px 0 0;
    color: rgba(225, 232, 244, .76);
    font-size: .98rem;
  }

  .toolbar,
  .filtros-bar,
  .payments-tabs {
    max-width: 100%;
  }

  .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px !important;
    margin-bottom: 12px;
  }

  .toolbar .spacer { display: none !important; }
  .toolbar .search-box,
  .toolbar input[type="search"],
  .toolbar input[type="text"],
  .toolbar .glass-select,
  .toolbar select,
  .toolbar .btn-vip-main,
  .toolbar .btn,
  .receipt-search-wrap,
  .receipt-search-box {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .toolbar .search-box,
  .receipt-search-wrap {
    flex: 1 1 100% !important;
  }

  .toolbar .glass-select,
  .toolbar select {
    flex: 1 1 calc(50% - 6px);
    width: auto !important;
  }

  .toolbar .btn-vip-main,
  .toolbar > .btn {
    min-height: 48px;
    justify-content: center;
    flex: 1 1 auto;
    white-space: nowrap;
  }

  .col-chooser-wrap {
    flex: 0 0 auto;
  }

  .payments-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px !important;
    margin-bottom: 14px;
    overflow: visible !important;
  }

  .payments-tab-btn {
    min-width: 0 !important;
    min-height: 46px;
    padding: 9px 10px !important;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .metric-card {
    min-width: 0 !important;
    width: 100%;
    min-height: 96px;
    padding: 18px !important;
    border-radius: var(--vc-radius-card) !important;
    background: var(--mobile-card-bg) !important;
    border: 1px solid var(--mobile-card-border) !important;
    box-shadow: 0 18px 40px var(--vc-shade-strong);
  }

  .metric-val {
    font-size: 1.35rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .metric-lbl {
    margin-top: 4px;
    font-size: .86rem !important;
    line-height: 1.25;
  }

  .metric-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    flex: 0 0 auto;
  }

  .dashboard-grid,
  #page-agenda > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #page-overview .overview-billing-card {
    overflow: hidden;
  }

  #page-overview .overview-billing-card .card-header {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
  }

  #page-overview .overview-billing-card .card-header > div {
    display: grid !important;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    gap: 10px !important;
    width: 100%;
  }

  #page-overview .year-select-wrapper,
  #page-overview #overview-year,
  #page-overview .btn-refresh {
    width: 100% !important;
    min-width: 0 !important;
  }

  #page-overview .overview-billing-card .table-wrapper {
    display: none !important;
  }

  .overview-mobile-list {
    display: flex;
    flex-direction: column;
  }

  .overview-mobile-card {
    padding: 14px 16px;
    border-top: 1px solid var(--vc-border);
  }

  .overview-mobile-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 12px;
  }

  .overview-mobile-head strong {
    min-width: 0;
    color: var(--vc-ink-inverse);
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .overview-mobile-head span {
    color: rgba(225, 232, 244, .7);
    font-size: .72rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }

  .overview-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .overview-month-chip {
    min-width: 0;
    min-height: 54px;
    padding: 7px 6px;
    border-radius: 12px;
    border: 1px solid var(--vc-border);
    background: var(--vc-layer-faint);
    color: rgba(225, 232, 244, .72);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    text-align: center;
    font: inherit;
  }

  .overview-month-chip b {
    color: rgba(219, 234, 254, .76);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .overview-month-chip em {
    min-width: 0;
    font-style: normal;
    font-size: .75rem;
    font-weight: 900;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .overview-month-chip.is-paid {
    color: #34d399;
    background: var(--vc-success-soft);
    border-color: rgba(52, 211, 153, .16);
  }

  .overview-month-chip.is-pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, .10);
    border-color: rgba(251, 191, 36, .18);
  }

  .overview-month-chip.is-overdue {
    color: #fb7185;
    background: rgba(244, 63, 94, .10);
    border-color: rgba(251, 113, 133, .20);
  }

  .overview-month-chip.is-empty {
    color: rgba(225, 232, 244, .58);
  }

  .overview-mobile-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .overview-mobile-totals span {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--vc-layer-subtle);
    color: rgba(225, 232, 244, .86);
    font-size: .78rem;
    font-weight: 900;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .overview-mobile-totals b {
    display: block;
    margin-bottom: 2px;
    color: rgba(188, 207, 235, .64);
    font-size: .62rem;
    text-transform: uppercase;
    text-align: left;
  }

  #page-agenda > div,
  #page-agenda > div > div,
  #page-agenda .toolbar,
  #page-agenda .calendar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #page-agenda .calendar-header {
    padding: 12px 14px !important;
  }

  .settings-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    margin-bottom: 16px !important;
  }

  .settings-tab {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 9px 10px !important;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
  }

  .card {
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--vc-radius-card) !important;
    background: var(--mobile-card-bg) !important;
    border-color: var(--mobile-card-border) !important;
  }

  .card-header {
    gap: 10px !important;
    padding: 16px var(--mobile-x) !important;
  }

  .card-title {
    min-width: 0;
    max-width: 100%;
    font-size: 1rem !important;
    line-height: 1.25;
  }

  .card-body {
    padding: 14px !important;
  }

  .chart-container {
    width: 100% !important;
    min-width: 0 !important;
    height: min(320px, 62vw) !important;
    max-height: 340px;
  }

  .table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-managed .table-wrapper {
    display: none !important;
  }

  .mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .mobile-card {
    width: 100%;
    min-width: 0;
    padding: 16px;
    border-radius: var(--vc-radius-card);
    background: rgba(9, 31, 55, .78);
    border: 1px solid rgba(115, 166, 228, .22);
    box-shadow: 0 18px 34px var(--vc-shade-strong);
    overflow: hidden;
  }

  .mobile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 12px;
  }

  .mobile-card-kicker {
    color: rgba(188, 207, 235, .72);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-card-title {
    min-width: 0;
    color: var(--vc-ink-inverse);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .mobile-card-subtitle {
    margin-top: 4px;
    color: rgba(225, 232, 244, .76);
    font-size: .86rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    /* Descrições longas (ex.: Serviços) não podem estourar o card.
       Clampa em 3 linhas. .mobile-ellipsis (e-mail do cliente) usa display:block
       e continua em 1 linha, pois é declarada depois nesta folha. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mobile-card-value {
    flex: 0 0 auto;
    color: var(--vc-ink-inverse);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
  }

  .mobile-field-grid {
    display: grid;
    gap: 8px;
  }

  .mobile-field-row {
    display: grid;
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid var(--vc-border);
  }

  .mobile-field-row:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .mobile-field-label {
    color: rgba(188, 207, 235, .72);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.25;
  }

  .mobile-field-value {
    min-width: 0;
    color: rgba(255, 255, 255, .94);
    font-size: .9rem;
    line-height: 1.35;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .mobile-field-value.is-muted {
    color: rgba(225, 232, 244, .68);
  }

  .mobile-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-action-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--vc-border);
  }

  .mobile-action-row .action-btn,
  .mobile-card .action-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border-radius: 13px !important;
  }

  .mobile-action-row .btn,
  .mobile-action-row .btn-sm {
    min-height: 42px;
    border-radius: 12px !important;
  }

  .mobile-card .registrar-pill {
    max-width: 100%;
    justify-content: flex-end;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mobile-card .badge {
    white-space: normal;
    text-align: center;
  }

  /* Executive finance */
  #page-financial-overview .cfo-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  #page-financial-overview .cfo-toolbar input,
  #page-financial-overview .cfo-toolbar button {
    width: 100% !important;
    min-height: 46px;
  }

  #page-financial-overview .cfo-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  #page-financial-overview .cfo-kpi,
  #expenses-metrics .metric-card {
    display: flex !important;
    align-items: center;
    gap: 14px;
  }

  #page-financial-overview .cfo-kpi > div:last-child,
  #expenses-metrics .metric-card > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #page-financial-overview .cfo-chart-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #page-financial-overview .cfo-chart-card {
    padding: 16px !important;
  }

  #page-financial-overview canvas {
    max-width: 100% !important;
  }

  #grafico-alocacao {
    max-height: 260px !important;
  }

  #grafico-evolucao {
    min-height: 230px !important;
    max-height: 280px !important;
  }

  #cfo-donut-legend > div {
    min-width: 0;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  #cfo-donut-legend span:nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .metric-icon i,
  .metric-icon svg,
  .metric-icon .vc-line-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 1.12rem !important;
    line-height: 1 !important;
  }

  /* Expenses and domains */
  #expenses-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  #page-expenses .toolbar,
  #page-domains .toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  #page-expenses .toolbar select,
  #page-expenses .toolbar button,
  #page-domains .toolbar select,
  #page-domains .toolbar button {
    width: 100% !important;
    min-height: 46px;
  }

  .expense-mobile-card.is-overdue {
    border-color: rgba(248, 113, 113, .38);
    box-shadow: 0 18px 34px rgba(127, 29, 29, .22);
  }

  .domain-mobile-card .mobile-card-title,
  .expense-mobile-card .mobile-card-title {
    white-space: normal;
  }

  /* Agenda */
  #page-agenda.active {
    display: block !important;
  }

  #page-agenda:not(.active) {
    display: none !important;
  }

  #page-agenda .toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  #page-agenda #btn-new-agenda {
    width: 100%;
  }

  #page-agenda .calendar-wrapper {
    border-radius: var(--vc-sheet-radius) !important;
    background:
      linear-gradient(180deg, rgba(14, 36, 64, .86), rgba(8, 27, 49, .72)) !important;
    border: 1px solid rgba(115, 166, 228, .24) !important;
    box-shadow: 0 18px 40px var(--vc-shade-strong), inset 0 1px 0 var(--vc-layer-alpha-050);
  }

  #page-agenda .calendar-header {
    min-height: 58px;
    padding: 12px 14px !important;
  }

  #page-agenda .calendar-header h3 {
    font-size: 1rem !important;
  }

  #page-agenda .cal-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: #dbeafe;
    background: var(--vc-layer-medium);
    border-color: var(--vc-border-strong);
  }

  #page-agenda .calendar-grid {
    gap: 4px !important;
    padding: 10px !important;
  }

  #page-agenda .calendar-day-name {
    font-size: .6rem !important;
    color: rgba(188, 207, 235, .72);
  }

  #page-agenda .calendar-cell {
    min-height: 58px !important;
    padding: 5px 4px !important;
    border-radius: 12px !important;
    background: var(--vc-layer-faint);
    border-color: var(--vc-border);
  }

  #page-agenda .calendar-cell.today {
    background: rgba(59,130,246,.14);
    border-color: rgba(96,165,250,.48);
  }

  #page-agenda .cell-event {
    /* R3: piso tipográfico — 8.5px era ilegível e o chip é interativo. */
    font-size: 10px !important;
    border-radius: 999px !important;
    padding: 2px 5px !important;
  }

  .agenda-upcoming-empty {
    margin: 0;
    padding: 16px;
    color: rgba(225, 232, 244, .66);
    font-size: .86rem;
  }

  .agenda-upcoming-item {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--vc-border);
    background: transparent;
    color: inherit;
    text-align: left;
  }

  .agenda-type-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--agenda-color);
    background: rgba(96, 165, 250, .12);
    border: 1px solid rgba(96, 165, 250, .20);
    background: color-mix(in srgb, var(--agenda-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--agenda-color) 26%, transparent);
  }

  .agenda-upcoming-body {
    min-width: 0;
  }

  .agenda-upcoming-title {
    color: var(--vc-ink-inverse);
    font-size: .9rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-upcoming-meta {
    margin-top: 3px;
    color: rgba(225, 232, 244, .66);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-upcoming-due {
    color: rgba(225, 232, 244, .72);
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
  }

  .agenda-upcoming-due.is-soon {
    color: #fecaca;
  }

  .agenda-mobile-card .mobile-card-head {
    align-items: center;
  }

  .agenda-date-chip {
    width: 54px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(59,130,246,.24), var(--vc-primary-alpha-10));
    border: 1px solid rgba(96,165,250,.26);
  }

  .agenda-date-chip span {
    color: var(--vc-ink-inverse);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1;
  }

  .agenda-date-chip small {
    margin-top: 3px;
    color: rgba(219,234,254,.78);
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  /* Leads board */
  #page-leads {
    height: auto !important;
    min-height: calc(100svh - var(--mobile-header-h) - var(--safe-t) - var(--mobile-bottom-h) - var(--safe-b) - 24px);
    overflow: visible !important;
    padding: 0 !important;
    gap: 12px !important;
  }

  #page-leads.active {
    display: flex !important;
    flex-direction: column !important;
  }

  #page-leads .leads-toolbar,
  #page-leads .leads-wa-bar {
    width: 100% !important;
    min-width: 0 !important;
  }

  #page-leads .leads-kpis {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 0 !important;
  }

  #page-leads .leads-body {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  #page-leads .leads-board {
    width: calc(100vw - (var(--mobile-x) * 2)) !important;
    max-width: calc(100vw - (var(--mobile-x) * 2)) !important;
    margin: 0 !important;
    padding: 2px 0 18px !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  #page-leads .leads-board::after {
    content: '';
    flex: 0 0 2px;
  }

  #page-leads .kanban-col {
    min-width: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    flex: 0 0 min(86vw, 340px) !important;
    max-width: min(86vw, 340px) !important;
    max-height: none !important;
    height: auto !important;
    scroll-snap-align: start;
  }

  /* FAB do tutorial: default CSS acima do dock (guarda para quando o JS ainda
     não posicionou). O JS reposiciona/permite arrastar; aqui só garantimos que
     o estado inicial nunca cubra o menu inferior (dock ~68px + offset safe-b+10). */
  #page-leads .leads-ribbon-tab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  }

  #page-leads .col-body {
    overflow: visible !important;
    max-height: none !important;
  }

  #page-leads .lead-card {
    touch-action: pan-x pan-y;
  }

  #page-leads .lc-actions {
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
  }

  .mobile-inline-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-inline-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px 14px;
    border-bottom: 1px solid var(--vc-border);
  }

  .mobile-inline-title {
    min-width: 0;
    color: var(--vc-ink-inverse);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .mobile-inline-sub {
    margin-top: 4px;
    color: rgba(225, 232, 244, .7);
    font-size: .78rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .mobile-inline-meta {
    color: rgba(255, 255, 255, .95);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
  }

  .receipt-search-box {
    min-height: 54px;
  }

  .receipt-search-input {
    font-size: 16px !important;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px !important;
  }

  .btn,
  .btn-vip-main,
  button {
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    width: min(80vw, 320px) !important;
    max-width: 80vw !important;
    height: 100svh !important;
    height: 100dvh !important; /* fallback dinâmico — iOS ajusta com a barra do Safari */
    padding-top: max(0px, var(--safe-t));
    transform: translateX(-102%) !important;
    z-index: 360 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    /* Sem backdrop-filter no mobile: o drawer glass (blur 12-14px, sempre
       ativo em qualquer largura via vipcontrol-theme.css) some de composição
       GPU pesada no WebKit/PWA. Fundo sólido quase idêntico visualmente,
       custo de composição ~zero. Desktop mantém o vidro fosco normalmente. */
    background: rgba(10, 10, 15, .97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-theme="light"] .sidebar {
    background: rgba(250, 251, 253, .96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .sidebar-logo,
  .sidebar-user,
  .sidebar-edit-toolbar,
  .sidebar-close-mobile {
    flex: 0 0 auto;
  }

  .sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    padding-bottom: calc(var(--safe-b) + var(--mobile-bottom-h) + 24px) !important;
  }

  html body #app .dashboard-sidebar {
    height: 100svh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html body #app .dashboard-sidebar .sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: calc(var(--safe-b) + var(--mobile-bottom-h) + 24px) !important;
  }

  .sidebar.mobile-open,
  .sidebar.open,
  html body #app .dashboard-sidebar.mobile-open,
  html body #app .dashboard-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 16px 0 46px rgba(0, 0, 0, .48) !important;
  }

  .sidebar-overlay,
  #sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 340 !important;
    /* Sem backdrop-filter fullscreen no mobile: compor um blur de tela
       inteira sobre o conteúdo é o maior custo de GPU do gesto de abrir o
       menu no WebKit/PWA. Overlay um pouco mais escuro compensa a perda
       visual do blur sem custo de composição. */
    background: rgba(0, 0, 0, .66) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .sidebar-overlay.active,
  #sidebar-overlay.active,
  #sidebar-overlay.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .sidebar-close-mobile {
    top: calc(var(--safe-t) + 10px) !important;
  }

  .dashboard-sidebar .sidebar-workspace-chevron {
    display: none !important;
  }

  .modal,
  .modal-dialog {
    max-width: calc(100vw - 20px) !important;
  }

  #modal-client {
    height: 100svh;
    height: 100dvh;
    max-height: 100svh;
    max-height: 100dvh;
    overflow: hidden !important;
  }

  #modal-client .modal {
    display: flex !important;
    flex-direction: column !important;
    width: min(100vw - 12px, 720px) !important;
    height: calc(100svh - var(--safe-t) - max(10px, var(--safe-b))) !important;
    height: calc(100dvh - var(--safe-t) - max(10px, var(--safe-b))) !important;
    max-height: calc(100svh - var(--safe-t) - max(10px, var(--safe-b))) !important;
    max-height: calc(100dvh - var(--safe-t) - max(10px, var(--safe-b))) !important;
    margin-top: var(--safe-t) !important;
    overflow: hidden !important;
  }

  #modal-client .modal-header {
    flex: 0 0 auto !important;
    min-height: 58px;
    padding: 12px 16px !important;
  }

  #modal-client .modal-header h3 {
    min-width: 0;
    font-size: 1rem !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #modal-client .modal-body {
    --modal-client-body-pad: 22px;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #modal-client #form-client {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  #modal-client .tab-panel {
    padding: 18px var(--modal-client-body-pad) 108px !important;
    position: relative;
    z-index: 0;
  }

  /* CL5 — hardening: bulletproof contra o select da aba anterior "vazando"
     visualmente atrás da barra de abas sticky (evita depender só da troca de
     classe via JS; garante que qualquer painel sem .active fique realmente
     fora do fluxo/pintura, mesmo sob quirks de compositing mobile). */
  #modal-client .tab-panel:not(.active) {
    display: none !important;
  }

  #modal-client .modal-body .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin: auto 0 0;
    padding: 12px var(--modal-client-body-pad) max(12px, var(--safe-b));
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    box-shadow: 0 -16px 28px rgba(0, 0, 0, .28);
  }

  #modal-client .tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    isolation: isolate;
    background: var(--bg-2);
    margin: 0 !important;
    padding: 8px var(--modal-client-body-pad) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .modal-body .form-actions,
  .modal-footer {
    padding-bottom: max(12px, var(--safe-b));
  }

  #page-viptrainer .vt-tabpanel {
    padding-bottom: calc(var(--mobile-bottom-h) + var(--safe-b) + 24px);
  }

  #page-viptrainer .vt-header {
    margin-bottom: 6px;
  }

  #page-viptrainer .vt-header h2 {
    font-size: 1.16rem;
  }

  #page-viptrainer .viptrainer-brand-mark {
    width: 26px;
    height: 26px;
  }

  #page-viptrainer .vt-tagline {
    display: none;
  }

  #page-viptrainer > .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  #page-viptrainer > .metrics-grid .metric-card {
    min-height: 64px;
    padding: 10px !important;
    border-radius: 10px !important;
  }

  #page-viptrainer > .metrics-grid .metric-card:nth-child(1),
  #page-viptrainer > .metrics-grid .metric-card:nth-child(2) {
    display: none;
  }

  #page-viptrainer > .metrics-grid .metric-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  #page-viptrainer > .metrics-grid .metric-val {
    font-size: 1rem !important;
  }

  #page-viptrainer > .metrics-grid .metric-lbl {
    font-size: .7rem !important;
  }

  #page-viptrainer {
    min-height: calc(100svh - var(--mobile-header-h) - var(--safe-t));
    min-height: calc(100dvh - var(--mobile-header-h) - var(--safe-t));
    padding-bottom: calc(var(--viptrainer-bottom-nav-h) + var(--mobile-bottom-h) + var(--safe-b) + 36px) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y;
  }

  #page-viptrainer .vt-tabs {
    gap: 5px;
    padding: 5px;
    margin: 8px 0 10px;
    scroll-snap-type: x proximity;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  #page-viptrainer .vt-tab {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0;
    scroll-snap-align: start;
  }

  #page-viptrainer .vt-tab::after {
    content: attr(data-vt-short);
    font-size: .74rem;
  }

  #page-viptrainer .vt-tab[data-vt-tab="today"] {
    order: -6;
  }

  #page-viptrainer .vt-tab[data-vt-tab="week"] {
    order: -5;
  }

  #page-viptrainer .vt-tab[data-vt-tab="exercises"] {
    order: -4;
  }

  #page-viptrainer .vt-tab[data-vt-tab="nutrition"] {
    order: -3;
  }

  #page-viptrainer .vt-tab[data-vt-tab="profile"] {
    order: -2;
  }

  #page-viptrainer .vt-tab[data-vt-tab="coach"] {
    order: -1;
  }

  #page-viptrainer .viptrainer-app-shell,
  #page-viptrainer .viptrainer-app-main,
  #page-viptrainer .viptrainer-app-side,
  #page-viptrainer .viptrainer-exercise-card,
  #page-viptrainer .viptrainer-today-hero,
  #page-viptrainer .viptrainer-active-session,
  #page-viptrainer .viptrainer-session-coach,
  #page-viptrainer .viptrainer-workout-footer {
    max-width: 100%;
    overflow-x: hidden;
  }

  #page-viptrainer .viptrainer-app-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-bottom: calc(var(--viptrainer-bottom-nav-h) + var(--mobile-bottom-h) + var(--safe-b) + 96px);
    overflow: visible;
    touch-action: pan-y;
  }

  #page-viptrainer .viptrainer-today-header,
  #page-viptrainer .viptrainer-section-head,
  #page-viptrainer .viptrainer-exercise-topline {
    align-items: flex-start;
  }

  #page-viptrainer .viptrainer-today-hero,
  #page-viptrainer .viptrainer-active-grid,
  #page-viptrainer .viptrainer-workout-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-viptrainer .viptrainer-today-hero,
  #page-viptrainer .viptrainer-active-session,
  #page-viptrainer .viptrainer-quick-card,
  #page-viptrainer .viptrainer-week-strip,
  #page-viptrainer .viptrainer-progress-card {
    padding: 14px;
  }

  #page-viptrainer .viptrainer-week-days {
    gap: 5px;
  }

  #page-viptrainer .viptrainer-week-day {
    min-height: 58px;
    border-radius: 10px;
  }

  #page-viptrainer .viptrainer-week-day span {
    font-size: .62rem;
  }

  #page-viptrainer .viptrainer-week-day strong {
    width: 28px;
    height: 28px;
  }

  #page-viptrainer .viptrainer-progress-main {
    align-items: flex-start;
  }

  #page-viptrainer .viptrainer-progress-main strong {
    font-size: 1.78rem;
  }

  #page-viptrainer .viptrainer-progress-stats {
    gap: 6px;
  }

  #page-viptrainer .viptrainer-progress-ring {
    width: 58px;
    height: 58px;
  }

  #page-viptrainer .vt-premium-chart {
    padding: 11px;
    gap: 10px;
  }

  #page-viptrainer .vt-premium-chart-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #page-viptrainer .vt-chart-trend {
    max-width: 100%;
    white-space: normal;
  }

  #page-viptrainer .vt-chart-layout {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
  }

  #page-viptrainer .viptrainer-evolution-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-viptrainer .viptrainer-evolution-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-viptrainer .viptrainer-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  #page-viptrainer .viptrainer-section-title small {
    text-align: left;
  }

  #page-viptrainer .vt-chart-ring {
    width: 60px;
    height: 60px;
  }

  #page-viptrainer .vt-chart-stage {
    min-width: 0;
  }

  #page-viptrainer .viptrainer-hero-metrics {
    margin: 12px 0 8px;
  }

  #page-viptrainer .viptrainer-hero-action,
  #page-viptrainer .viptrainer-hero-action .btn,
  #page-viptrainer .viptrainer-active-actions .btn,
  #page-viptrainer .viptrainer-exercise-actions .btn,
  #page-viptrainer .viptrainer-empty-actions,
  #page-viptrainer .viptrainer-empty-actions .btn,
  #page-viptrainer .viptrainer-coach-actions,
  #page-viptrainer .viptrainer-coach-actions .btn,
  #page-viptrainer .viptrainer-workout-footer .btn {
    width: 100%;
  }

  #page-viptrainer .viptrainer-empty-actions,
  #page-viptrainer .viptrainer-coach-actions {
    align-items: stretch;
  }

  #page-viptrainer .viptrainer-active-top,
  #page-viptrainer .viptrainer-active-empty,
  #page-viptrainer .viptrainer-session-coach,
  #page-viptrainer .viptrainer-workout-footer {
    align-items: flex-start;
  }

  #page-viptrainer .viptrainer-active-top,
  #page-viptrainer .viptrainer-workout-footer {
    flex-direction: column;
  }

  #page-viptrainer .viptrainer-active-count {
    min-width: 0;
  }

  #page-viptrainer .viptrainer-set-list.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-viptrainer .viptrainer-set-row {
    grid-template-columns: minmax(52px, .7fr) minmax(58px, 1fr) minmax(58px, 1fr);
    gap: 6px;
  }

  #page-viptrainer .viptrainer-set-row > .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  #page-viptrainer .viptrainer-rest-timer {
    min-height: 224px;
    padding: 18px 14px;
    border-radius: var(--vc-radius-card-sm);
  }

  #page-viptrainer .viptrainer-rest-timer.is-running strong {
    font-size: 4.25rem;
  }

  #page-viptrainer .viptrainer-timer-actions .btn {
    min-height: 44px;
  }

  #page-viptrainer .viptrainer-set-row input {
    min-height: 44px;
    font-size: 1rem;
  }

  #page-viptrainer .viptrainer-active-actions .btn-vip-main {
    min-height: 52px;
    font-size: .92rem;
  }

  #page-viptrainer .viptrainer-exercise-card {
    grid-template-columns: 28px 64px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
    align-items: center;
  }

  #page-viptrainer .viptrainer-exercise-check {
    width: 26px;
    height: 26px;
  }

  #page-viptrainer .viptrainer-exercise-thumb {
    width: 64px;
  }

  #page-viptrainer .viptrainer-active-heading {
    width: 100%;
    align-items: flex-start;
  }

  #page-viptrainer .viptrainer-active-heading > .viptrainer-exercise-thumb {
    flex-basis: 64px;
    width: 64px;
  }

  #page-viptrainer .viptrainer-media-lock {
    width: 42px;
    height: 42px;
    top: 7px;
    right: 7px;
  }

  #page-viptrainer .viptrainer-media-play {
    width: 42px;
    height: 42px;
  }

  #page-viptrainer .viptrainer-media-editor {
    padding: 10px;
  }

  #page-viptrainer .viptrainer-media-editor-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-viptrainer .viptrainer-media-editor-actions .btn {
    width: 100%;
    min-height: 46px;
  }

  #modal-viptrainer .viptrainer-video-player {
    border-radius: 8px;
  }

  #page-viptrainer .viptrainer-exercise-title {
    font-size: .9rem;
  }

  #page-viptrainer .viptrainer-exercise-meta {
    display: none;
  }

  #page-viptrainer .viptrainer-exercise-stats {
    display: none;
  }

  #page-viptrainer .viptrainer-exercise-session-summary {
    gap: 6px;
  }

  #page-viptrainer .viptrainer-exercise-session-summary span:not(.viptrainer-exercise-rest-chip) {
    display: none;
  }

  #page-viptrainer .viptrainer-exercise-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #page-viptrainer .viptrainer-exercise-actions .btn {
    min-height: 34px;
    padding-inline: 8px;
    font-size: .72rem;
  }

  #page-viptrainer .viptrainer-set-list.compact {
    display: none;
  }

  #page-viptrainer .viptrainer-bottom-nav {
    position: fixed;
    left: max(10px, var(--safe-l));
    right: max(10px, var(--safe-r));
    bottom: calc(var(--mobile-bottom-h) + var(--safe-b) + 10px);
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 7px;
    min-height: var(--viptrainer-bottom-nav-h);
    border: 1px solid var(--vc-border-strong);
    border-radius: 14px;
    background: rgba(7,11,20,.86);
    box-shadow: 0 16px 40px rgba(0,0,0,.34);
    backdrop-filter: blur(18px);
    touch-action: manipulation;
  }

  #page-viptrainer .viptrainer-bottom-nav button {
    min-width: 0;
    min-height: 48px;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 0;
    border-radius: 10px;
    color: #94a3b8;
    background: transparent;
    font-size: .66rem;
    font-weight: 800;
  }

  #page-viptrainer .viptrainer-bottom-nav button i {
    font-size: .9rem;
  }

  #page-viptrainer .viptrainer-bottom-nav button.active {
    color: #dbeafe;
    background: rgba(79,156,255,.18);
  }

  #modal-viptrainer .modal-body {
    padding-bottom: calc(var(--mobile-bottom-h) + var(--safe-b) + 16px) !important;
  }

  /* VipTreiner Fase 4 — Modo Treino Foco: sem backdrop-filter fullscreen
     (mesma disciplina do fix de GPU do menu mobile); safe-area iOS respeitada. */
  #page-viptrainer .vt-focus-mode {
    padding-top: var(--safe-t);
    padding-bottom: var(--safe-b);
  }
  #page-viptrainer .vt-focus-header {
    padding-left: max(16px, var(--safe-l));
    padding-right: max(16px, var(--safe-r));
  }
  #page-viptrainer .vt-focus-body,
  #page-viptrainer .vt-focus-nav,
  #page-viptrainer .vt-focus-footer-actions {
    padding-left: max(16px, var(--safe-l));
    padding-right: max(16px, var(--safe-r));
  }
  #page-viptrainer .vt-focus-footer-actions {
    padding-bottom: calc(var(--mobile-bottom-h) + var(--safe-b) + 16px);
  }
  #page-viptrainer .vt-focus-mode .viptrainer-active-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Dense layout refinement — mobile/tablet QA 2026-07
   ========================================================================== */
@media (max-width: 768px) {
  .vc-page-header--compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .vc-page-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .vc-page-header-actions > :where(.btn, .btn-vip-main, .btn-vip-secondary) {
    flex: 1 1 auto;
    min-height: 46px;
    justify-content: center;
  }

  .payments-tabs.vc-glass-tabs,
  #page-settings .vc-settings-tabs.vc-glass-tabs,
  #page-ia-marketing .mk-filter-tabs.vc-glass-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100%;
    max-width: 100%;
    padding: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
  }

  .vc-glass-tabs .vc-glass-tab,
  #page-settings .vc-settings-tab,
  .payments-tabs .payments-tab-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content !important;
    min-height: 44px;
    padding-inline: 13px !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  #page-overview .overview-actions {
    display: grid !important;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    width: 100%;
  }

  #page-agenda .agenda-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #page-agenda .agenda-upcoming-card { order: 2; }
  #page-agenda .agenda-events-card { margin-top: 12px !important; }
  #page-agenda #filtro-agenda { width: 100%; max-width: none; }

  #page-ia-marketing .marketing-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #page-ia-marketing .mk-filter-tabs { margin-inline: 10px; }
  #page-ia-marketing .mk-manual-action { padding: 10px; }
  #page-ia-marketing #btn-mk-generate { width: 100%; justify-content: center; }

  #page-notifications .notification-page-actions > * { flex: 1 1 100%; }
  #page-notifications .notification-page-item {
    display: flex !important;
    flex-wrap: wrap;
  }

  #page-leads .leads-toolbar-main,
  #page-leads .leads-toolbar-lower,
  #page-leads .leads-toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  #page-leads .leads-toolbar-lower { display: grid; }
  #page-leads .leads-toolbar-actions {
    margin-left: 0;
    justify-content: stretch;
  }
  #page-leads .leads-toolbar-actions > * { flex: 1 1 calc(50% - 6px); }
  #page-leads .leads-board { padding-bottom: 8px !important; }

  .card.vc-data-card { border-radius: var(--vc-radius-table, 11px) !important; }
  .mobile-managed .card.vc-data-card:not(.overview-billing-card),
  .vc-table-card-mobile .card.vc-data-card {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #page-backups.vc-table-card-mobile .vc-data-card table,
  #page-cron.vc-table-card-mobile .vc-data-card table {
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  #modal-client .modal-body {
    --modal-client-body-pad: 14px;
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-dock-base: 44px;
    --mobile-dock-panel-h: 64px;
  }

  #mobile-bottom-nav {
    gap: 6px;
    padding-inline: 7px;
  }

  .mbn-item { font-size: .62rem; }
  .mbn-item i { font-size: 1.06rem; }
  .settings-tabs { grid-template-columns: 1fr; }
  .mobile-field-row { grid-template-columns: 1fr; gap: 4px; }
  .mobile-field-value { text-align: left; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mbn-item,
  .mbn-item i,
  .mbn-item span {
    transition: none !important;
  }

  #page-viptrainer .viptrainer-timer-energy i {
    animation: none !important;
  }
}

/* Fase 4G Design System - dock mobile ligado ao editor visual. */
@media (max-width: 768px) {
  #mobile-bottom-nav {
    border-color: var(--vc-mobile-dock-border);
    border-radius: var(--vc-mobile-dock-radius);
    background: linear-gradient(180deg, var(--vc-layer-strong), transparent 48%), var(--vc-mobile-dock-surface);
  }
  .mbn-item {
    color: var(--vc-mobile-dock-text);
    border-radius: var(--vc-mobile-dock-item-radius);
    background: linear-gradient(180deg, var(--vc-layer-alpha-070), var(--vc-layer-alpha-015)), var(--vc-mobile-dock-item-bg);
  }
  .mbn-item.active {
    color: var(--vc-sidebar-item-active-text);
    border-color: var(--vc-sidebar-item-active-border);
    background: linear-gradient(180deg, var(--vc-mobile-dock-active-start), var(--vc-mobile-dock-active-end)), var(--vc-mobile-dock-item-bg);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase Global — Harmonização mobile (camada ≤768px)
   !important só onde regras legadas com !important (tabela §7 do tema,
   toast, table-wrapper) precisam ser vencidas — casos comentados.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Touch targets mínimos em controles densos */
  .btn-sm { min-height: 38px; }
  .btn-xs { min-height: 34px; }
  #page-notices .notices-icon-btn { width: 40px; height: 40px; }
  #page-notices .notice-modal-close { width: 40px; height: 40px; flex-basis: 40px; }

  /* Guarda mobile-safe para todos os modais: nunca mais alto que a tela,
     scroll interno em vez de corte. #modal-client mantém seu layout próprio
     (o corte interno `hidden !important` dele vence esta regra). */
  .modal-overlay .modal,
  .modal-overlay .modal-dialog {
    max-height: calc(100dvh - var(--safe-t) - max(10px, var(--safe-b)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Utilitários canônicos mobile */
  .vc-mobile-stack { display: flex; flex-direction: column; gap: var(--vc-space-3, 12px); }
  .vc-mobile-stack > * { width: 100%; }
  .vc-safe-bottom { padding-bottom: var(--vc-mobile-bottom-safe-gap); }

  /* ── .vc-table-card-mobile: tabela → cards ────────────────────────────────
     Consome os data-label que mobile-shell.js já injeta nos <td> a partir do
     <thead> (mecanismo existia sem CSS correspondente). Opt-in por página via
     classe no container — primeira adoção: #page-tickets. Os !important daqui
     vencem: td{padding:14px 20px !important}, tbody tr{background !important},
     td{border-bottom !important} (tema §7) e estilos inline white-space. */
  .vc-table-card-mobile .table-wrapper { overflow: visible !important; }
  .vc-table-card-mobile table { min-width: 0 !important; width: 100%; }
  .vc-table-card-mobile thead { display: none !important; }
  .vc-table-card-mobile table,
  .vc-table-card-mobile tbody,
  .vc-table-card-mobile tbody tr { display: block; }

  .vc-table-card-mobile tbody tr {
    margin: 0 0 var(--vc-table-card-gap, 12px);
    padding: 8px 14px;
    border: 1px solid rgba(115, 166, 228, .22);
    border-radius: var(--vc-radius-card);
    background: rgba(9, 31, 55, .78) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
  }

  [data-theme="light"] .vc-table-card-mobile tbody tr {
    border-color: #dfe3ea;
    background: #f8f9fb !important;
    box-shadow: 0 2px 8px var(--vc-shade-soft);
  }

  .vc-table-card-mobile tbody td {
    display: grid;
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 0 !important;
    border-bottom: 1px solid var(--vc-border) !important;
    font-size: .88rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  [data-theme="light"] .vc-table-card-mobile tbody td {
    border-bottom-color: #eceef2 !important;
  }

  .vc-table-card-mobile tbody td:last-child {
    border-bottom: 0 !important;
  }

  .vc-table-card-mobile tbody td::before {
    content: attr(data-label);
    color: rgba(188, 207, 235, .72);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  [data-theme="light"] .vc-table-card-mobile tbody td::before {
    color: #5a6577;
  }

  .vc-table-card-mobile tbody td.td-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px !important;
  }

  .vc-table-card-mobile tbody td.td-actions::before { display: none; }

  .vc-table-card-mobile .action-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border-radius: 13px !important;
  }

  /* ── Nav única no VipTreiner (fim da dupla navegação) ─────────────────────
     Com o VipTreiner ativo, o dock global some e --mobile-bottom-h colapsa
     para 0px: todos os calc() existentes (padding do page, bottom da nav do
     VipTreiner, footer do Modo Foco, modal, sidebar) se reacomodam sozinhos
     — a nav própria do VipTreiner assume o lugar do dock, devolvendo ~96px
     de tela útil. Navegadores sem :has() mantêm o comportamento atual
     (degradação graciosa, sem regressão). */
  body:has(#page-viptrainer.page.active) {
    --mobile-bottom-h: 0px;
  }

  body:has(#page-viptrainer.page.active) #mobile-bottom-nav {
    display: none;
  }

  /* Toasts no VipTreiner sobem para logo acima da nav própria
     (!important: a regra base do #toast-container usa !important). */
  body:has(#page-viptrainer.page.active) #toast-container {
    bottom: calc(var(--viptrainer-bottom-nav-h) + var(--safe-b) + 20px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase Global — Rodada 3: comunicação (Inbox/WA Monitor/Fila IA) no mobile
   Mesma disciplina: sem desfoque de tela inteira, sem contexto gráfico novo,
   !important só contra legado com !important (nenhum caso necessário aqui).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* WA Monitor: tiles de resumo em grade 2×2 em vez de fila espremida. */
  #page-wa-monitor #wam-summary {
    display: grid !important; /* vence o display:flex inline do container */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #page-wa-monitor #wam-summary > div {
    min-width: 0;
  }

  /* Abas Hoje/Próximos com alvo de toque confortável. */
  #page-wa-monitor .wam-tab {
    min-height: 42px;
  }

  /* Inbox: conversas com altura de toque e prévia sem estouro. */
  #page-inbox .conv {
    min-height: 56px;
    padding: 10px 12px;
  }

  #page-inbox .conv-prev {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #page-inbox #inbox-handover {
    min-height: 42px;
  }

  /* Fila IA: ações em largura total, tocáveis. */
  #page-ia-fila .ia-fila-approve,
  #page-ia-fila .ia-fila-discard {
    flex: 1 1 auto;
    min-height: 46px;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase Global — Rodada 4: Settings, Inbox, WA Monitor e IA no mobile
   Mantém a camada leve e respeita o dock/safe-area já existentes.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Settings: formulários e ações em uma coluna, sem largura fixa legada. */
  #page-settings .settings-page-header {
    margin-bottom: 14px;
  }

  #page-settings .vc-settings-tabs {
    align-items: stretch;
  }

  #page-settings .vc-settings-tab {
    width: 100%;
    min-height: 46px;
  }

  #page-settings .settings-content,
  #page-settings .settings-content-narrow,
  #page-settings .settings-content-wide {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  #page-settings .form-row-2,
  #page-settings .form-row-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-settings .settings-card .card-header {
    min-height: 0;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #page-settings .settings-card .card-body {
    padding: 14px;
  }

  #page-settings .form-actions.vc-action-row,
  #page-settings .settings-panel-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  #page-settings .form-actions.vc-action-row > *,
  #page-settings .settings-panel-actions > * {
    width: 100%;
  }

  #page-settings .integ-card .form-row-2 > :last-child {
    width: 100%;
  }

  #page-settings .integ-card .form-row-2 > :last-child > * {
    min-width: 0;
    flex: 1 1 140px;
  }

  #page-settings .dev-flag-item {
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }

  /* Inbox: lista e conversa viram blocos roláveis dentro da página. */
  #page-inbox .inbox-grid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    gap: 12px;
  }

  #page-inbox .inbox-list {
    max-height: 34dvh;
    min-height: 160px;
  }

  #page-inbox .inbox-chat {
    height: min(560px, 62dvh);
    min-height: 420px;
  }

  #page-inbox .chat-head {
    align-items: stretch;
    flex-direction: column;
  }

  #page-inbox .inbox-chat-identity {
    justify-content: space-between;
  }

  #page-inbox #inbox-handover {
    width: 100%;
    min-height: 44px;
  }

  #page-inbox .chat-body {
    min-height: 260px;
    padding: 14px;
  }

  #page-inbox .bubble {
    max-width: 88%;
  }

  #page-inbox .chat-foot.vc-action-row {
    gap: 8px;
  }

  #page-inbox #inbox-send {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  /* WA Monitor: filtros e modal se mantêm dentro do viewport. */
  #page-wa-monitor .wam-header-actions {
    width: 100%;
    align-items: stretch;
    justify-content: stretch;
  }

  #page-wa-monitor .wam-tabs {
    display: grid;
    min-width: 0;
    flex: 1 1 240px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-wa-monitor .wam-tab {
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
    white-space: normal;
  }

  #page-wa-monitor .wam-refresh {
    flex: 1 1 120px;
    justify-content: center;
  }

  #page-wa-monitor .wam-summary-card {
    width: 100%;
    min-width: 0;
  }

  #page-wa-monitor .wam-description {
    max-width: none;
    white-space: normal;
  }

  #page-wa-monitor .wam-modal {
    width: calc(100% - 16px);
  }

  #page-wa-monitor .wam-modal-body {
    padding: 14px;
  }

  #page-wa-monitor .wam-context-item,
  #page-wa-monitor .wam-context-schedule {
    min-width: 0;
    flex: 1 1 100%;
    text-align: left;
  }

  #page-wa-monitor .wam-ai-tools {
    align-items: stretch;
  }

  #page-wa-monitor .wam-ai-label {
    flex: 1 1 calc(100% - 28px);
  }

  #page-wa-monitor .wam-tool-button {
    min-height: 40px;
    flex: 1 1 120px;
    justify-content: center;
  }

  #page-wa-monitor .wam-options-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-wa-monitor .wam-modal-footer {
    align-items: stretch;
  }

  #page-wa-monitor .wam-footer-spacer {
    display: none;
  }

  #page-wa-monitor .wam-modal-footer > button {
    min-height: 44px;
    flex: 1 1 160px;
    justify-content: center;
  }

  /* Fila IA: metadados quebram linha e ações ocupam a largura disponível. */
  #page-ia-fila .ia-fila-card.card.vc-card {
    padding: 14px;
  }

  #page-ia-fila .ia-fila-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  #page-ia-fila .ia-fila-date {
    width: 100%;
  }

  #page-ia-fila .ia-fila-actions.vc-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  #page-ia-fila .ia-fila-actions > button {
    width: 100%;
  }

  /* Painel da IA: master e ferramentas sem mínimos que provoquem overflow. */
  #page-ia-agent .ia-master-card {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  #page-ia-agent .ia-master-info {
    flex-basis: calc(100% - 48px);
  }

  #page-ia-agent .ia-master-status {
    margin-left: 42px;
    margin-right: auto;
  }

  #page-ia-agent .ia-tools-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-ia-agent .ia-tool-card {
    min-width: 0;
    padding: 14px;
  }
}

@media (max-width: 768px) {
  #page-settings .vc-settings-tabs.vc-glass-tabs .vc-settings-tab {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content !important;
  }

  /* Fase 3: os grids semânticos colapsam sem depender da estrutura legada. */
  .vc-form-grid,
  .vc-form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .vc-card > .vc-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .vc-table-shell > .vc-scroll-x-safe {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  /* Movimento do menu controlado pelo Editor Visual. */
  html body #app .dashboard-sidebar {
    transition:
      transform var(--vc-sidebar-motion-duration) var(--vc-sidebar-motion-ease),
      opacity var(--vc-sidebar-motion-duration) var(--vc-sidebar-motion-ease),
      clip-path var(--vc-sidebar-motion-duration) var(--vc-sidebar-motion-ease) !important;
  }

  html body #app .dashboard-sidebar.mobile-open,
  html body #app .dashboard-sidebar.open {
    box-shadow: var(--vc-sidebar-shadow-value) !important;
  }

  html body .sidebar-overlay,
  html body #sidebar-overlay { background: var(--vc-sidebar-overlay) !important; }

  html[data-vc-sidebar-motion="none"] body #app .dashboard-sidebar {
    transition: none !important;
  }

  html[data-vc-sidebar-motion="fade"] body #app .dashboard-sidebar {
    transform: translateX(0) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html[data-vc-sidebar-motion="fade"] body #app .dashboard-sidebar.mobile-open,
  html[data-vc-sidebar-motion="fade"] body #app .dashboard-sidebar.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  html[data-vc-sidebar-motion="scale"] body #app .dashboard-sidebar {
    transform: translateX(-8%) scale(.96) !important;
    transform-origin: left center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html[data-vc-sidebar-motion="scale"] body #app .dashboard-sidebar.mobile-open,
  html[data-vc-sidebar-motion="scale"] body #app .dashboard-sidebar.open {
    transform: translateX(0) scale(1) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  html[data-vc-sidebar-motion="reveal"] body #app .dashboard-sidebar {
    transform: translateX(0) !important;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
  }
  html[data-vc-sidebar-motion="reveal"] body #app .dashboard-sidebar.mobile-open,
  html[data-vc-sidebar-motion="reveal"] body #app .dashboard-sidebar.open {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }

  html[data-vc-animations-enabled="false"] body #app .dashboard-sidebar {
    transition: none !important;
  }
}