/* ==================================================
   MOBILE LAYOUT — desktop approved, do not affect >=768px
   ==================================================
   This file is intentionally loaded last.
   All rules must stay inside @media (max-width: 767px).
   Desktop is the approved baseline and must remain untouched.
   ================================================== */

@media (max-width: 767px) {
  /* 01. Global mobile guardrails */
  /*
   * base.css — `.table-wrap { overflow-x: hidden !important; }` (regra global, ~3243).
   * Pode impedir scroll horizontal no wrapper para tabelas largas fora do fluxo do Livro.
   * Não se usa `!important` aqui para não disputar essa cascata neste micropasso.
   */

  #mesaAppShell,
  #mesaAppShell *,
  #mesaGuestShell,
  #mesaGuestShell * {
    box-sizing: border-box;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #mesaAppShell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #mesaGuestShell {
    max-width: 100%;
    overflow-x: hidden;
  }

  #mesaAppShell .container,
  #mesaAppShell section,
  #mesaAppShell .view,
  #mesaAppShell .form-card,
  #mesaAppShell .context-card,
  #mesaAppShell .header-dashboard,
  #mesaAppShell .mesa-decision-deck,
  #mesaAppShell .seleto-banner {
    max-width: 100%;
  }

  #mesaAppShell img,
  #mesaAppShell canvas {
    max-width: 100%;
    height: auto;
  }

  #mesaAppShell svg {
    max-width: 100%;
  }

  #mesaAppShell .table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  #mesaAppShell .mesa-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #mesaAppShell {
    --mobile-page-gutter: 16px;
  }

  /* 02. Auth / login */

  /* 03. App shell / header — hero unificado mobile (primeira dobra como peça única) */
  /* Evita faixa do fundo `--bg` / clean acima do scoreboard por padding-top do `.container`. */
  #mesaAppShell > .container {
    padding-top: 0;
  }

  /* Full-bleed horizontal; fluxo flex no `header`; sem mouldura lateral do `.container`. */
  #mesaAppShell header.app-header {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    padding-top: max(22px, env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: 14px;
    padding-left: max(var(--mobile-page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mobile-page-gutter), env(safe-area-inset-right, 0px));

    margin-bottom: 8px;
    margin-top: 0;

    border-radius: 0;
    border-bottom: none;
  }

  #mesaAppShell header.app-header {
    background: var(--bg-inverse);
    color: var(--bg-surface);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
  }

  #mesaAppShell .app-header__scoreboard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    min-width: 0;

    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  #mesaAppShell .app-header__scoreboard__primary,
  #mesaAppShell .app-header__identity {
    min-width: 0;
    width: 100%;
  }

  #mesaAppShell .app-header__title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  #mesaAppShell .app-header__brand-mark {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
  }

  #mesaAppShell .app-header__titles {
    flex: 1 1 auto;
    min-width: 0;
  }

  #mesaAppShell .app-header__scoreboard .logo-title {
    font-size: clamp(1.125rem, 4.2vw, 1.375rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #mesaAppShell .app-header__scoreboard .logo-sub {
    font-size: clamp(0.6875rem, 2.8vw, 0.8125rem);
    line-height: 1.45;
    margin-top: 4px;
    margin-bottom: 0;
    overflow-wrap: anywhere;
  }

  #mesaAppShell .app-header__scoreboard__kpis {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  /*
   * Valor da carteira — fluxo normal (sem absolute), ≤767px completo (não só ≤479).
   * Clean: --text no fundo inverse pode “sumir”; alinhar a .logo-title / --bg-surface.
   */
  #mesaAppShell #headerKpiHero:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    overflow: visible;
    margin: 0;
    padding: 0 0 14px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-subtle, var(--border));
  }

  #mesaAppShell #headerKpiHero:not([hidden]) {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  #mesaAppShell #headerKpiHero .app-header__kpi-hero-label {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.35;
  }

  #mesaAppShell #headerKpiHero .app-header__kpi-hero-value {
    flex: 0 0 auto;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: clamp(1.375rem, 5.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.22;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  #mesaAppShell #headerKpiHero .app-header__kpi-hero-label {
    color: rgba(255, 255, 255, 0.55);
  }

  #mesaAppShell #headerKpiHero .app-header__kpi-hero-value {
    color: var(--bg-surface);
  }

  #mesaAppShell .app-header__scoreboard__tools {
    width: 100%;
    align-self: stretch;
    justify-content: stretch;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
  }

  #mesaAppShell .app-header__scoreboard__tools:has(#mesaHeaderSessionBar:not([hidden])) {
    padding-top: 10px;
    margin-top: 0;
    border-top: 1px solid var(--border-subtle, var(--border));
  }

  #mesaAppShell
    .app-header__scoreboard__tools:has(#mesaHeaderSessionBar:not([hidden])) {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  #mesaAppShell .app-header__session-tools {
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding-top: 0;
  }

  #mesaAppShell .mesa-header-session {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }

  #mesaAppShell .mesa-header-btn {
    min-height: 44px;
    min-width: 0;
    flex: 1 1 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: max(10px, 2.8vw);
  }

  #mesaAppShell .mesa-header-btn--reload {
    flex: 0 0 48px;
    min-width: 48px;
    max-width: 52px;
    padding-left: 0;
    padding-right: 0;
  }

  /* 04. Dashboard / executive summary — métricas 2×2 */
  #mesaAppShell .header-patrimonio-executive__metrics.mesa-kpi-scroll {
    width: 100%;
    min-width: 0;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, auto));
    gap: 11px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }

  /* Sobrescreve `mesa-theme` (≤760px): nth-child(n+3) com border-top/padding-top diferentes — grelha uniforme. */
  #mesaAppShell
    #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard))
    > .stat:nth-child(n + 3) {
    border-top: none !important;
    padding: 11px 10px !important;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0 !important;
    max-width: none;
    width: auto;
    flex: initial !important;
    padding: 11px 10px;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--surface, var(--bg-surface)) 88%, transparent);
    border: 1px solid var(--border-subtle, var(--border));
    border-radius: var(--panel-inset-radius, 10px);
    overflow: visible;
    position: relative;
  }

  #mesaAppShell
    #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard))
    > .stat {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-label {
    flex: 0 0 auto;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.2;
    opacity: 0.88;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value {
    flex: 0 1 auto;
    margin: 0;
    font-size: clamp(0.875rem, 3.5vw, 1.0625rem);
    font-weight: 700;
    line-height: 1.22;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /*
   * Resultado realizado: sublinhado do desktop com peso mobile mais fino — respiro igual ao “slot” da %.
   */
  #mesaAppShell
    #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard))
    .stat--patrimonio-realized
    .stat-value.up,
  #mesaAppShell
    #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard))
    .stat--patrimonio-realized
    .stat-value.down {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    padding-bottom: 1px;
  }

  /* PnL não realizado: coluna (valor + badge). Cores do badge = mesmas regras do desktop em `mesa-theme.css` (—negative-bg / —positive-bg, etc.); aqui só layout. */
  #mesaAppShell
    #headerStatsMaster.header-stats--scoreboard
    .stat--patrimonio-unrealized
    .stat-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  /*
   * Só geometria/spacing relativos ao stack vertical (override do margin-left:inline do desktop;
   * padding/font/borda/cores vêm de [data-theme] #headerStatsMaster… .header-kpi-pct-badge*).
   */
  #mesaAppShell
    #headerStatsMaster.header-stats--scoreboard
    .stat--patrimonio-unrealized
    .stat-value
    .header-kpi-pct-badge {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    margin: 2px 0 0;
    align-self: flex-start;
    position: static;
    overflow-wrap: anywhere;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard .header-kpi-pct-badge {
    margin-left: 0;
    margin-top: 0;
    align-self: flex-start;
    max-width: 100%;
    position: static;
    overflow-wrap: anywhere;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:has(.stat--guest-dashboard) {
    display: grid !important;
    grid-template-columns: 1fr;
    min-width: 0;
  }

  #mesaAppShell #headerStatsMaster.header-stats--scoreboard:has(.stat--guest-dashboard) > .stat {
    min-width: 0;
    border-left: none !important;
  }

  /* 05. Wallet classes — resumo Carteiras (entrada intencional após hero escura) */
  #mesaAppShell .header-dashboard--patrimonio-executive {
    padding-left: 0;
    padding-right: 0;
    margin-top: 2px;
    margin-bottom: 6px;
    min-width: 0;
    gap: 10px;
  }

  #mesaAppShell .header-dashboard--patrimonio-executive {
    margin-top: 4px;
  }

  #mesaAppShell #headerWalletStrip .wallet-strip-details {
    margin-top: 0;
    border-radius: var(--panel-inset-radius, 14px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #mesaAppShell #headerWalletStrip .wallet-strip-details {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    border-color: color-mix(in srgb, var(--border2) 70%, transparent);
  }

  #mesaAppShell
    .header-patrimonio-executive__wallets
    .wallet-strip-wrap::after {
    background: linear-gradient(to left, var(--bg-surface, var(--bg)), transparent);
  }

  #mesaAppShell .header-patrimonio-executive__wallets {
    width: 100%;
    min-width: 0;
  }

  #mesaAppShell .header-patrimonio-executive__wallets .wallet-strip-wrap {
    width: 100%;
    min-width: 0;
  }

  #mesaAppShell .header-dashboard--patrimonio-executive .wallet-strip-details {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #mesaAppShell
    .header-dashboard--patrimonio-executive
    .wallet-strip-details__summary.wallet-strip__heading {
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding-left: max(12px, var(--mobile-page-gutter));
    padding-right: max(12px, var(--mobile-page-gutter));
  }

  #mesaAppShell .header-dashboard--patrimonio-executive .wallet-strip__title-stack {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
  }

  #mesaAppShell .header-dashboard--patrimonio-executive .wallet-strip__title {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  #mesaAppShell .header-dashboard--patrimonio-executive .wallet-strip__subtitle {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  #mesaAppShell .header-dashboard--patrimonio-executive .wallet-strip__microcopy {
    max-width: 100%;
  }

  #mesaAppShell
    .header-dashboard--patrimonio-executive
    .wallet-strip-details__summary
    .wallet-panel__caret {
    flex-shrink: 0;
    align-self: center;
    box-sizing: border-box;
  }

  /*
   * 05b. Carteiras expandida (strip do header — #headerWalletStrip)
   * Sobrescreve `mesa-mobile-system`: `.wallet-strip` em linha + overflow-x + máscara = carrossel;
   * aqui: coluna única, cartões fluídos, sem corte lateral.
   */
  #mesaAppShell #headerWalletStrip .wallet-strip {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-x: none;
    scroll-snap-type: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
    padding: 4px 0 12px !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
  }

  #mesaAppShell #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell #headerWalletStrip .wallet-strip .wallet-mini {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
    box-sizing: border-box !important;
  }

  #mesaAppShell #headerWalletStrip .wallet-strip-details__body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible !important;
    box-sizing: border-box !important;
  }

  /*
   * Fade à direita (mesa-mobile-767 `.wallet-strip-wrap::after`): era para scroll horizontal dos minis;
   * neste strip não há mais carrossel. O pseudo cobre Top–Bottom à direita e mancha/recorta visualmente o cartão
   * quando fechado. Remover sempre no #headerWalletStrip mantém bordas limpas (clean/dark).
   */
  #mesaAppShell #headerWalletStrip.wallet-strip-wrap::after {
    display: none !important;
    content: none !important;
  }

  /*
   * 05c. Carteiras expandida — acento lateral (tokens --wallet-bar-*), sem faixa superior “solta”.
   * Desktop mantém `.wallet-mini__class-bar` (+ theme); mobile layout layer esconde aqui apenas no strip header.
   */
  #mesaAppShell #headerWalletStrip .wallet-mini .wallet-mini__class-bar {
    display: none !important;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini[data-wallet='acoes'] {
    border-left: 3px solid var(--wallet-bar-acoes) !important;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini[data-wallet='fiis'] {
    border-left: 3px solid var(--wallet-bar-fiis) !important;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini[data-wallet='etfs'] {
    border-left: 3px solid var(--wallet-bar-etfs) !important;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini[data-wallet='bdrs'] {
    border-left: 3px solid var(--wallet-bar-bdrs) !important;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini[data-wallet='outros'] {
    border-left: 3px solid var(--wallet-bar-outros) !important;
  }

  /*
   * 05d. Mini-cards executivos (carteiras no strip — Ações, FIIs, ETFs, BDRs, Outros):
   * `mesa-mobile-system` impõe min-height aos `.wallet-mini`; aqui tiramos-no só no executivo
   * e reorganizamos padding, cabeçalho vs métricas e KPIs (rótulo → valor → respiro).
   */
  #mesaAppShell #headerWalletStrip .wallet-strip .wallet-mini--executive {
    min-height: unset !important;
    padding: 18px 17px 20px;
    gap: 0;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-head {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border2, var(--border)) 52%, transparent);
    box-sizing: border-box;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__kicker-row {
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__kicker {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(14.25px, 4vw, 15px);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.24;
    color: var(--label-accent);
    margin: 0;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__pos-badge {
    flex-shrink: 0;
    margin-top: 1px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.048em;
    border-radius: 6px;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-sub {
    margin-top: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.45;
    color: var(--text-mid);
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-metrics {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    margin: 16px 0 0;
    padding: 0;
    flex: 0 1 auto;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__kv {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin: 0;
    padding: 0;
    min-height: 0 !important;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, sans-serif;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__kv > span:first-child {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.068em;
    line-height: 1.38;
    text-transform: uppercase;
    color: var(--label-accent);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__kv > span:last-child {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.44;
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__pl {
    font-weight: 600;
  }

  #mesaAppShell #headerWalletStrip .wallet-mini--executive .wallet-mini__pct {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: 0.012em;
    opacity: 0.91;
    white-space: normal;
  }

  /* 06. Livro do Sócio (#mainFormCard — só #mesaAppShell; desktop intocado) */
  /* Tokens alinhados ao Radar (.radar-block--*, .radar-select-*) */
  #mesaAppShell #view-ops,
  #mesaAppShell #mainFormCard.form-card {
    /* Mesmo raio dos blocos Radar (12px), não panel-outer 20px */
    --book-module-outer-radius: 12px;
    --book-module-border: color-mix(in srgb, var(--border2, #d8cfc0) 42%, var(--border, #e8e4dc));
    --book-module-bg: color-mix(in srgb, var(--surface, #faf9f6) 94%, var(--surface2) 6%);
    --book-module-header-bg: color-mix(in srgb, var(--surface2, #f5f3ef) 22%, var(--surface, #faf9f6));
    --book-module-gap: 14px;
    --book-module-pad-x: 12px;
    --book-module-pad-y: 14px;
    --book-module-trigger-h: 40px;
  }

  #mesaAppShell #mainFormCard.form-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--book-module-gap);

    padding: 0 !important;
    border: 1px solid var(--book-module-border);
    border-radius: var(--book-module-outer-radius) !important;
    background: var(--book-module-bg);
    box-shadow: 0 1px 2px rgba(18, 24, 33, 0.03);
  }

  #mesaAppShell #mainFormCard.form-card::before {
    display: none;
  }

  #mesaAppShell #view-ops .mesa-book-module {
    display: block;
    margin-bottom: var(--book-module-gap);
    border: 1px solid var(--book-module-border);
    border-radius: var(--book-module-outer-radius);
    background: var(--book-module-bg);
    box-shadow: 0 1px 2px rgba(18, 24, 33, 0.03);
    overflow: hidden;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-toggle,
  #mesaAppShell #view-ops .mesa-book-module__summary,
  #mesaAppShell #view-ops .ops-filters-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    min-height: var(--book-module-trigger-h);
    margin: 0;
    padding: 0 var(--book-module-pad-x);
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: var(--book-module-bg);
    color: var(--text-mid, var(--text)) !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  #mesaAppShell #view-ops .ops-filters-toggle__label {
    color: inherit !important;
  }

  /* Recolhido: cabeçalho = superfície do card (igual nos dois) */
  #mesaAppShell #mainFormCard.mesa-op-form--collapsed .mesa-op-form-toggle,
  #mesaAppShell #view-ops .ops-filters-panel.collapsed .ops-filters-toggle {
    background: var(--book-module-bg);
    border-radius: 0;
  }

  /* Aberto: faixa de cabeçalho levemente mais marcada (igual nos dois) */
  #mesaAppShell #mainFormCard:not(.mesa-op-form--collapsed) .mesa-op-form-toggle,
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .ops-filters-toggle {
    background: var(--book-module-header-bg);
    border-radius: var(--book-module-outer-radius) var(--book-module-outer-radius) 0 0;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-toggle:focus-visible,
  #mesaAppShell #view-ops .mesa-book-module__summary:focus-visible,
  #mesaAppShell #view-ops .ops-filters-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    outline-offset: 2px;
    z-index: 1;
  }

  #mesaAppShell #view-ops .mesa-book-module:not(.mesa-book-module--collapsed) .mesa-book-module__summary {
    background: var(--book-module-header-bg);
    border-radius: var(--book-module-outer-radius) var(--book-module-outer-radius) 0 0;
  }

  /* Hover como Radar (.radar-select-trigger:hover) — sem depender só de (hover: hover) */
  #mesaAppShell #mainFormCard.mesa-op-form--collapsed .mesa-op-form-toggle:hover:not(:disabled),
  #mesaAppShell #view-ops .ops-filters-panel.collapsed .ops-filters-toggle:hover:not(:disabled) {
    background: color-mix(in srgb, var(--surface2) 16%, var(--surface)) !important;
  }

  #mesaAppShell #mainFormCard:not(.mesa-op-form--collapsed) .mesa-op-form-toggle:hover:not(:disabled),
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .ops-filters-toggle:hover:not(:disabled),
  #mesaAppShell #view-ops .mesa-book-module:not(.mesa-book-module--collapsed) .mesa-book-module__summary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--surface2) 32%, var(--surface)) !important;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-toggle:hover .mesa-book-module__chev,
  #mesaAppShell #view-ops .mesa-book-module__summary:hover .mesa-book-module__chev,
  #mesaAppShell #view-ops .ops-filters-toggle:hover .mesa-book-module__chev {
    opacity: 0.9;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-toggle:active:not(:disabled),
  #mesaAppShell #view-ops .mesa-book-module__summary:active:not(:disabled),
  #mesaAppShell #view-ops .ops-filters-toggle:active:not(:disabled) {
    background: color-mix(in srgb, var(--surface2) 30%, var(--surface)) !important;
  }

  #mesaAppShell #mainFormCard .mesa-book-module__title,
  #mesaAppShell #view-ops .mesa-book-module__title,
  #mesaAppShell #view-ops .ops-filters-toggle__label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mesaAppShell #mainFormCard .mesa-book-module__chev,
  #mesaAppShell #view-ops .mesa-book-module__chev {
    display: block;
    grid-column: 2;
    width: 16px;
    height: auto;
    min-width: 16px;
    margin-left: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-dim, var(--text-mid));
    font-size: 11px;
    line-height: 1;
    text-align: center;
    justify-self: end;
    opacity: 0.72;
    transition: transform 250ms ease, opacity 0.15s ease;
  }

  #mesaAppShell #mainFormCard:not(.mesa-op-form--collapsed) .mesa-book-module__chev,
  #mesaAppShell #view-ops .mesa-book-module:not(.mesa-book-module--collapsed) .mesa-book-module__chev,
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .mesa-book-module__chev {
    transform: rotate(180deg);
    opacity: 0.95;
  }

  #mesaAppShell #mainFormCard.mesa-op-form--collapsed .mesa-op-form-body {
    display: none;
  }

  #mesaAppShell #view-ops .mesa-book-module.mesa-book-module--collapsed .mesa-book-module__body {
    display: none;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-body {
    padding-left: max(var(--book-module-pad-x), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--book-module-pad-x), env(safe-area-inset-right, 0px)) !important;
    padding-top: var(--book-module-pad-y) !important;
    /*
     * Sob a assinatura J2CA: apenas respiro (20–28px alvo) + safe-area onde existir.
     * O botão usa `position: sticky` em `mesa-mobile-system` — não repetir ~96px vazios no card.
     */
    padding-bottom: max(26px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #mesaAppShell #view-ops .mesa-book-module__body {
    display: block;
    padding: var(--book-module-pad-y) var(--book-module-pad-x);
  }

  #mesaAppShell #view-ops > .section-header:first-child {
    margin-bottom: var(--book-module-gap);
  }

  #mesaAppShell #view-ops > .section-header:first-child .header-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    padding: 0;
  }

  #mesaAppShell #view-ops > .section-header:first-child .header-actions .btn-ghost {
    width: 100%;
    min-height: var(--book-module-trigger-h);
    padding: 10px var(--book-module-pad-x);
    border-radius: var(--book-module-outer-radius);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  #mesaAppShell #view-ops .ops-filters-panel {
    margin-bottom: var(--book-module-gap);
    border: 1px solid var(--book-module-border);
    border-radius: var(--book-module-outer-radius) !important;
    background: var(--book-module-bg);
    box-shadow: 0 1px 2px rgba(18, 24, 33, 0.03);
    overflow: hidden;
  }

  #mesaAppShell #view-ops .ops-filters-panel::before {
    display: none;
  }

  #mesaAppShell #view-ops .ops-filters-body {
    padding: var(--book-module-pad-y) var(--book-module-pad-x);
  }

  #mesaAppShell #view-ops .ops-filter-label {
    display: none;
  }

  #mesaAppShell #view-ops .ops-filters-toggle-icon {
    width: auto;
    height: auto;
    min-width: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #mesaAppShell #view-ops .ops-filters-toggle:hover {
    color: var(--text-mid, var(--text)) !important;
  }

  #mesaAppShell #view-ops .ops-filters-toggle:hover .ops-filters-toggle-icon {
    border-color: transparent;
    background: transparent;
    color: var(--text-dim, var(--text-mid));
    opacity: 0.9;
  }

  #mesaAppShell #mainFormCard .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 12px;
    margin-bottom: 16px;
    min-width: 0;
  }

  /* Título: mantém caixa alta / label-accent; letter-spacing um pouco menos denso no narrow */
  #mesaAppShell #mainFormCard .form-title {
    margin-bottom: 0 !important;
    font-size: var(--ui-form-kicker-size, 11px);
    font-weight: var(--ui-form-kicker-weight, 600);
    letter-spacing: max(0.08em, calc(var(--ui-form-kicker-tracking, 0.18em) - 0.06em));
    line-height: 1.25;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--label-accent);
    text-transform: uppercase;
  }

  /*
   * Grelha 1 col × linha (DOM já na ordem pedida: ticker→…→nota; tema 860px faz 2 col — neutralizado).
   */
  #mesaAppShell #mainFormCard .form-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    row-gap: 12px !important;
    margin-bottom: 14px !important;
    align-items: stretch !important;
    align-content: start !important;
    width: 100%;
    min-width: 0;
  }

  #mesaAppShell #mainFormCard .form-row:last-of-type {
    margin-bottom: 12px !important;
  }

  #mesaAppShell #mainFormCard .form-row.cols-3,
  #mesaAppShell #mainFormCard .form-row.cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mesaAppShell #mainFormCard .field {
    width: 100%;
    min-width: 0;
  }

  /*
   * Kickers acima dos controlos não-float (Data; Tipo da operação — Compra/Venda).
   * Não aplicar aos .field--float para não estragar labels flutuantes (mesa-premium-ui).
   */
  #mesaAppShell #mainFormCard .field:not(.field--float) > label,
  #mesaAppShell #mainFormCard .field.date-field > label {
    font-size: var(--ui-field-label-size, 10.5px) !important;
    font-weight: var(--ui-field-label-weight, 600) !important;
    letter-spacing: var(--ui-field-label-tracking, 0.1em) !important;
    color: var(--ui-field-label-color, var(--label-accent)) !important;
    margin-bottom: 0 !important;
    line-height: var(--ui-field-label-line-height, 1.1) !important;
    white-space: normal !important;
  }

  #mesaAppShell #mainFormCard #tickerField {
    position: relative;
  }

  #mesaAppShell #mainFormCard .autocomplete-list {
    left: 0;
    right: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Inputs / data / select — mesma altura e largura total (tokens --field-h já no tema) */
  #mesaAppShell #mainFormCard input[type='text'],
  #mesaAppShell #mainFormCard input[type='number'],
  #mesaAppShell #mainFormCard .date-display-btn {
    width: 100% !important;
    max-width: 100%;
    min-height: var(--field-h, 40px) !important;
    border-radius: var(--panel-inset-radius, 12px);
  }

  /* Compra / Venda: segmented full-width, confortável ao toque */
  #mesaAppShell #mainFormCard .toggle-wrap {
    width: 100% !important;
    max-width: 100%;
    min-height: var(--field-h, 40px) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: var(--panel-inset-radius, 12px);
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
  }

  #mesaAppShell #mainFormCard .toggle-btn {
    flex: 1 1 0 !important;
    min-height: var(--field-h, 40px) !important;
    height: auto !important;
    max-height: none !important;
    font-size: max(12px, calc(11px + 0.25vw)) !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
  }

  /* Tipo do ativo — gatilho mobile alinhado ao campo */
  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select .mobile-select-trigger {
    width: 100% !important;
    max-width: 100%;
    min-height: var(--field-h, 40px) !important;
    border-radius: var(--panel-inset-radius, 12px);
    box-sizing: border-box !important;
  }

  #mesaAppShell #mainFormCard #fAssetType.app-select {
    width: 100% !important;
  }

  /* Contexto + rodapé interno */
  #mesaAppShell #mainFormCard #formContext.context-card {
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box !important;
    border-radius: var(--panel-inset-radius, 12px);
  }

  /*
   * CTA principal: full-width (já no tema); espaço claro em relação aos campos — sticky mantido em mesa-mobile-system.
   */
  #mesaAppShell #mainFormCard #btnSubmitOp.btn-add,
  #mesaAppShell #mainFormCard .btn-add {
    width: 100% !important;
    max-width: 100%;
    min-height: var(--ui-button-height, var(--field-h, 40px)) !important;
    margin-top: 18px !important;
    margin-bottom: 4px !important;
    border-radius: var(--ui-button-radius, var(--panel-inset-radius, 12px));
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-body > .panel-footer {
    margin-top: 14px;
    padding-top: 4px;
    text-align: center;
    font-size: clamp(10px, 2.8vw, 11px);
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--text-dim, var(--text-mid));
    opacity: 0.92;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #mesaAppShell #mainFormCard #btnCancelEdit {
    flex-shrink: 0;
    min-height: 40px;
  }

  /*
   * 07. Mesa de Decisão — lista vertical de cards (substitui barra horizontal + ícone-only em mesa-mobile-system).
   * Ordem visual mobile: Comparativo CDI (protagonista) → Patrimônio → Radar → Livro (CSS order; DOM / desktop ≥768 intactos).
   */
  #mesaAppShell .mesa-decision-deck {
    overflow-x: clip;
    overflow-y: visible;
    padding-left: max(14px, var(--mobile-page-gutter));
    padding-right: max(14px, var(--mobile-page-gutter));
    padding-top: max(14px, var(--mobile-page-gutter));
    padding-bottom: 18px;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }


  /* Divisória única agora vem do elemento `.mesa-panel-heading-divider`; tabs sem border-top. */
  #mesaAppShell .mesa-decision-deck .mesa-decision-deck__tabs.mesa-decision-deck__tools {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 6px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    scrollbar-width: auto !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
  }

  #mesaAppShell .mesa-decision-deck .mesa-decision-deck__tabs.mesa-decision-deck__tools::-webkit-scrollbar {
    display: none;
  }

  #mesaAppShell .mesa-decision-deck .mesa-decision-deck__tabs.mesa-decision-deck__tools::after {
    display: none !important;
    content: none !important;
  }

  #mesaAppShell #tabCdiSocio {
    order: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #mesaAppShell #tabPatrimonioSocio {
    order: 2 !important;
  }
  #mesaAppShell #tabRadarSocio {
    order: 3 !important;
  }
  #mesaAppShell #tabLivroSocio {
    order: 4 !important;
  }

  /*
   * 07 — Mesa de Decisão mobile: herdar linguagem desktop (`mesa-premium-ui.css` + `base.css`)
   * — grelha/áreas unchanged; só tipografia, tokens e peso visual (ícones, CTA, estados).
   */
  #mesaAppShell .mesa-decision-deck.decision-mobile .mesa-decision-deck__tabs.mesa-decision-deck__tools {
    gap: 16px !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-areas:
      'icon badge'
      'icon title'
      'icon desc'
      'icon cta' !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    align-items: start !important;
    min-height: 142px !important;
    padding: 22px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
    text-align: left !important;
    white-space: normal !important;
    flex: none !important;
    height: auto !important;
    transform: none !important;
    scroll-snap-align: none !important;
  }

  /*
   * Inactivos — mesmos valores que `.mesa-decision-deck__tools .tab.mesa-tool-card` em `mesa-premium-ui.css`
   * Património #tabPatrimonioSocio / CDI destacado `#tabCdiSocio.is-featured` usam sobrescritas existentes em `base.css`.
   */
  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card:not(.active) {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--surface2) 96%, var(--navy) 2%),
      var(--surface)
    ) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 14px rgba(16, 24, 32, 0.055) !important;
  }

  /* CDI protagonista (base: `.tab--accent.tab--hero` inactivo). */
  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    #tabCdiSocio.tab.mesa-tool-card.decision-card.is-featured:not(.active) {
    border-color: color-mix(in srgb, var(--gold) 26%, var(--border)) !important;
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--gold) 9%, transparent),
      rgba(255, 255, 255, 0.02)
    ) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14) !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .mesa-tool-card__body {
    display: contents !important;
  }

  /* Ícone: mais próximo do desktop (premium não encaixa tile pesado — só cor; aqui halo mínimo). */
  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .mesa-tool-card__icon {
    grid-area: icon !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: color-mix(in srgb, var(--surface2, var(--surface)) 92%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border) 52%, transparent) !important;
    box-shadow: none !important;
    grid-row: 1 / span 4 !important;
    align-self: start !important;
    justify-self: center !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .mesa-tool-card__icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .mesa-tool-card__icon {
    color: var(--accent) !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .mesa-tool-card__head {
    grid-area: badge !important;
    justify-self: start !important;
    align-self: start !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .mesa-tool-card__badges {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .tab__pin {
    position: relative !important;
    inset: auto !important;
    display: none !important;
    box-sizing: border-box !important;
    min-height: 22px !important;
    height: auto !important;
    padding: 5px 11px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 7.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active .tab__pin {
    display: inline-flex !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .tab__eyebrow {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
  }

  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    .tab.mesa-tool-card.decision-card:not(.active)
    .tab__eyebrow {
    color: var(--text-dim) !important;
  }

  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    #tabRadarSocio.tab.mesa-tool-card.decision-card:not(.active)
    .tab__eyebrow {
    color: color-mix(in srgb, var(--text-dim) 62%, var(--gold-soft)) !important;
  }

  /* CTA inativos: mesmo tom que `.mesa-premium-ui.css`; attr `data-theme` refinam. */
  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    .tab.mesa-tool-card.decision-card:not(.active)
    .mesa-tool-card__cta {
    color: var(--accent) !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .tab__kicker--desktop {
    display: block !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .tab__kicker--mobile {
    display: none !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .tab__title {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text) !important;
    text-wrap: balance !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    .tab.mesa-tool-card.decision-card:not(.active)
    .tab__title {
    color: var(--navy) !important;
    font-weight: 650 !important;
  }

  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    .tab.mesa-tool-card.decision-card
    .mesa-tool-card__desc.tab__kicker--desktop {
    grid-area: desc !important;
    margin: 0 !important;
    max-width: 28ch !important;
    color: var(--text-mid) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-wrap: balance !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  /* CTA secundário (desktop: peso moderado + sem uppercase) */
  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card .mesa-tool-card__cta {
    grid-area: cta !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    padding-top: 2px !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    .tab.mesa-tool-card.decision-card:not(.active)
    .mesa-tool-card__cta {
    color: var(--navy-soft, var(--navy)) !important;
  }

  /* Ativo — `mesa-premium-ui.css`: navy pleno + mesmo pin/CTA/ícone. */
  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active {
    background: #1f2c3a !important;
    border: 1px solid rgba(176, 142, 87, 0.45) !important;
    color: #f7f4ee !important;
    box-shadow: 0 10px 28px rgba(15, 22, 30, 0.2), 0 0 0 1px rgba(176, 142, 87, 0.22) !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active .tab__title {
    color: #f7f4ee !important;
    font-weight: 700 !important;
  }

  #mesaAppShell
    .mesa-decision-deck.decision-mobile
    .tab.mesa-tool-card.decision-card.active
    .mesa-tool-card__desc.tab__kicker--desktop {
    color: #d8d2c8 !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active .mesa-tool-card__cta {
    color: #e7dbc2 !important;
    font-weight: 650 !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active .mesa-tool-card__icon {
    background: transparent !important;
    border: none !important;
    color: #e7dbc2 !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent) !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active .mesa-tool-card__icon svg {
    color: inherit !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active .tab__pin {
    color: var(--navy) !important;
    border: 1px solid rgba(176, 142, 87, 0.38) !important;
    background: linear-gradient(180deg, #e7dbc2, color-mix(in srgb, #e7dbc2 88%, #f5f0e6)) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18) !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card.active .tab__eyebrow {
    color: color-mix(in srgb, #d8d2c8 82%, transparent) !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile #tabCdiSocio.tab.mesa-tool-card .mesa-decision-deck__hero-preview {
    display: none !important;
  }

  #mesaAppShell .mesa-decision-deck.decision-mobile .tab.mesa-tool-card.decision-card:active {
    opacity: 1 !important;
    transition: opacity 0.12s ease !important;
  }

  /* 08a. Patrimônio — contenção horizontal mínima (só #view-summary; desktop intocado) */
  #mesaAppShell #view-summary #summaryContent,
  #mesaAppShell #view-summary .wallet-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  #mesaAppShell #view-summary .wallet-panel__body {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  #mesaAppShell #view-summary .wallet-panel__body::after {
    display: none;
    content: none;
  }

  #mesaAppShell #view-summary .wallet-panel__summary,
  #mesaAppShell #view-summary .wallet-panel__summary-main,
  #mesaAppShell #view-summary .wallet-panel__meta,
  #mesaAppShell #view-summary .wallet-panel__meta-line {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Carteira (summary): posições · investido na 1.ª linha; lucro não realizado e realizado cada um na sua linha */
  #mesaAppShell #view-summary .wallet-panel__meta-line {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 5px;
    column-gap: 0;
  }

  /*
   * Cabeçalho da carteira (mobile, ≤767px): compactação só visual.
   * - `padding` do summary reduzido (vence `mesa-mobile-767.css` por 2 IDs).
   * - `min-height` zerado: o conteúdo (título 14px + meta multilinha) já dita altura.
   * - `gap` interno menor entre o bloco título+caret e o resumo.
   * - Caret encolhido para 28×28 com border-radius 8px (visual). O alvo de toque
   *   continua sendo o `<summary>` inteiro — o caret nunca foi target dedicado.
   * - `padding-top` do body cortado para aproximar a lista do cabeçalho.
   * Tudo escopado em `#view-summary`: o caret do strip de carteiras (header, em
   * `#headerWalletStrip`) e o painel CDI permanecem inalterados.
   */
  #mesaAppShell #view-summary .wallet-panel > .wallet-panel__summary {
    padding: 8px 14px;
    gap: 3px;
    min-height: 0;
  }

  #mesaAppShell #view-summary .wallet-panel .wallet-panel__caret {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 6px;
  }

  #mesaAppShell #view-summary .wallet-panel > .wallet-panel__body {
    padding-top: 6px;
  }

  #mesaAppShell #view-summary .wallet-panel__meta-head {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
  }

  #mesaAppShell
    #view-summary
    .wallet-panel__body
    .summary-card.summary-card--premium
    .summary-card__premium-inner {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 08. Patrimônio cards — reforço: uma coluna e sem vazamento lateral (767 já corrige wallet-panel) */
  #mesaAppShell #view-summary .wallet-panel__body .summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #mesaAppShell #view-summary .wallet-panel__body .summary-card.summary-card--premium {
    max-width: 100%;
    min-width: 0;
  }

  /*
   * 08b. Fechamento mensal — repõe melhoria legível (commit 756d5c7) sem mexer no resto do system.
   * Só `#view-summary` + `.realized-card--mesa-monthly` (desktop ≥768 inalterado).
   */
  #mesaAppShell #view-summary .realized-card--mesa-monthly .mesa-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #mesaAppShell #view-summary .realized-card--mesa-monthly .mesa-month-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    aspect-ratio: auto;
  }

  /* `font-size:11px` removido: a regra base em `mesa-premium-ui.css` (sem @media)
   * já define 11px para `.mesa-month-cell__hd--readable`. Aqui mantemos só o
   * override mobile de `line-height` (mais compacto). */
  #mesaAppShell #view-summary .realized-card--mesa-monthly .mesa-month-cell__hd--readable {
    line-height: 1.25;
  }

  #mesaAppShell #view-summary .realized-card--mesa-monthly .mesa-month-cell__sub {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 10px;
    line-height: 1.35;
  }

  #mesaAppShell #view-summary .realized-card--mesa-monthly .mesa-month-cell__result {
    font-size: 16px;
  }

  /*
   * Patrimônio — módulos secundários recolhíveis (mobile).
   * Apenas envolve Resultado realizado / Posições encerradas / Fechamento mensal;
   * o conteúdo interno aprovado permanece dentro do body sem alteração visual.
   */
  #mesaAppShell #view-summary .realized-section > .mesa-mobile-secondary-module {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module__summary {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 58%, var(--surface) 42%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, var(--surface2) 8%);
    color: var(--text);
    cursor: pointer;
    list-style: none;
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module__summary::-webkit-details-marker {
    display: none;
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 82%, var(--text-mid) 18%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module__caret {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-color: transparent;
    background: transparent;
    border-radius: 999px;
    opacity: 0.72;
    transition: transform 0.2s ease, opacity 0.15s ease, background-color 0.15s ease;
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module__caret::after {
    top: 45%;
    width: 6px;
    height: 6px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    border-right-color: color-mix(in srgb, var(--text-mid) 82%, var(--text) 18%);
    border-bottom-color: color-mix(in srgb, var(--text-mid) 82%, var(--text) 18%);
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module__summary:hover .mesa-mobile-secondary-module__caret {
    background: color-mix(in srgb, var(--text) 4%, transparent);
    opacity: 0.86;
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module[open] .mesa-mobile-secondary-module__caret {
    transform: rotate(180deg);
  }

  #mesaAppShell #view-summary .mesa-mobile-secondary-module__body {
    margin-top: 10px;
  }

  /* 09. Radar do Sócio — formulário + lista contidos na largura do telemóvel */
  #mesaAppShell #view-radar {
    min-width: 0;
    max-width: 100%;
  }

  #mesaAppShell #view-radar .radar-form,
  #mesaAppShell #view-radar .radar-toolbar,
  #mesaAppShell #view-radar .radar-help-accordion,
  #mesaAppShell #view-radar #radarContent {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /*
   * Radar — formulário recolhível no mobile.
   * O summary é o único cabeçalho do módulo; os labels dos campos aparecem
   * apenas quando o formulário está aberto.
   */
  #mesaAppShell #view-radar .radar-form--m-collapsible {
    padding: 0;
    margin: 0 0 12px;
    border: 1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 58%, var(--surface) 42%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, var(--surface2) 8%);
    box-shadow: none;
    overflow: hidden;
  }

  #mesaAppShell #view-radar .radar-form--m-collapsible::before {
    display: none;
    content: none;
  }

  #mesaAppShell #view-radar .radar-form__m-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    box-sizing: border-box;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  #mesaAppShell #view-radar .radar-form__m-summary::-webkit-details-marker {
    display: none;
  }

  #mesaAppShell #view-radar .radar-form__m-summary-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #mesaAppShell #view-radar .radar-form__m-title,
  #mesaAppShell #view-radar .radar-form__m-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mesaAppShell #view-radar .radar-form__m-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 82%, var(--text-mid) 18%);
  }

  #mesaAppShell #view-radar .radar-form__m-subtitle {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--text-mid);
  }

  #mesaAppShell #view-radar .radar-form__m-caret {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    opacity: 0.72;
    position: relative;
    transition: transform 0.2s ease, opacity 0.15s ease, background-color 0.15s ease;
  }

  #mesaAppShell #view-radar .radar-form__m-caret::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid color-mix(in srgb, var(--text-mid) 82%, var(--text) 18%);
    border-bottom: 1.5px solid color-mix(in srgb, var(--text-mid) 82%, var(--text) 18%);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  #mesaAppShell #view-radar .radar-form--m-collapsible[open] .radar-form__m-caret::after {
    transform: translate(-50%, -50%) rotate(-135deg);
  }

  #mesaAppShell #view-radar .radar-form__m-summary:hover .radar-form__m-caret {
    background: color-mix(in srgb, var(--text) 4%, transparent);
    opacity: 0.86;
  }

  #mesaAppShell #view-radar .radar-form__body {
    padding: 0 12px 14px;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 42%, transparent);
  }

  #mesaAppShell #view-radar .radar-form__body > .radar-form__title {
    display: none;
  }

  #mesaAppShell #view-radar .radar-form__submit.btn-add {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #mesaAppShell #view-radar .radar-hint {
    max-width: 100%;
  }

  /*
   * Radar — controles (Ordenar / Intervalo): grelha 2 colunas, selects iguais.
   * Escopo: toolbar + sync apenas; cards do radar inalterados.
   */
  #mesaAppShell #view-radar {
    --muted: var(--text-dim);
    --line: var(--border);
    --paper: var(--surface);
  }

  /* Espaçamento do bloco de exibição: radar.css (.radar-block--display) */
  #mesaAppShell #view-radar .radar-toolbar__sync {
    font-size: 0.82rem;
    font-weight: 500;
    gap: 10px;
    margin: 0;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    letter-spacing: 0.02em;
  }

  #mesaAppShell #view-radar .radar-toolbar__menus {
    margin: 0 !important;
  }

  #mesaAppShell #view-radar .radar-toolbar__menu {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px;
  }

  #mesaAppShell #view-radar .radar-toolbar__menu-label {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    color: var(--muted) !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    opacity: 1 !important;
  }

  #mesaAppShell #view-radar .radar-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Radar accordion de ajuda: css/radar.css (.radar-help-accordion) */

  #mesaAppShell #view-radar .radar-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #mesaAppShell #view-radar #radarContent .summary-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #mesaAppShell #view-radar .summary-card.radar-card {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    scroll-margin-top: max(16px, env(safe-area-inset-top, 0px));
    scroll-margin-bottom: max(40px, env(safe-area-inset-bottom, 0px));
  }

  #mesaAppShell #view-radar .radar-card__header {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #mesaAppShell #view-radar .radar-card__hero-price-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #mesaAppShell #view-radar .radar-card__hero-price {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #mesaAppShell #view-radar .radar-card__identity,
  #mesaAppShell #view-radar .radar-card__identity--stack,
  #mesaAppShell #view-radar .radar-card__id-lines,
  #mesaAppShell #view-radar .radar-card__hero,
  #mesaAppShell #view-radar .radar-card-footer,
  #mesaAppShell #view-radar .radar-card-journal,
  #mesaAppShell #view-radar .radar-range {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 10. Modals / overlays */

  /* 11. Utility overrides */
}

/* Patrimônio — cartões colapsáveis (≤768px): lista compacta + painel expandido */
@media (max-width:768px){
  #mesaAppShell #view-summary .wallet-panel.wallet-panel--single[open] > .wallet-panel__summary,
  #mesaAppShell #view-summary .wallet-panel[data-wallet][open] > .wallet-panel__summary{
    position:sticky;
    top:0;
    z-index:4;
  }

  #mesaAppShell #view-summary .wallet-panel__body .summary-grid{
    gap:0 !important;
    padding-top:0 !important;
    padding-bottom:max(28px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #mesaAppShell #view-summary .wallet-panel__body .summary-grid > .summary-card.summary-card--patrimonio-m-accordion{
    height:auto !important;
    min-height:0 !important;
    align-self:stretch;
    border-radius:0 !important;
    box-shadow:none !important;
    border:none !important;
    border-bottom:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 55%, var(--surface) 45%) !important;
    margin:0 !important;
    overflow:visible;
    scroll-margin-top:max(16px, env(safe-area-inset-top, 0px));
    scroll-margin-bottom:max(40px, env(safe-area-inset-bottom, 0px));
  }

  /* Aberto: mesmo tratamento visual que Radar (cartão destacado na lista) */
  #mesaAppShell #view-summary .wallet-panel__body .summary-grid > .summary-card.summary-card--patrimonio-m-accordion.summary-card--patrimonio-m-open{
    border-radius:12px !important;
    border:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 70%, var(--surface) 30%) !important;
    border-bottom:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 70%, var(--surface) 30%) !important;
    box-shadow:0 2px 12px color-mix(in srgb, var(--text) 7%, transparent) !important;
    margin-bottom:10px !important;
    overflow:hidden;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-trigger{
    -webkit-appearance:none;
    appearance:none;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    margin:0;
    box-sizing:border-box;
    min-height:56px;
    height:auto;
    padding:max(8px, calc(var(--panel-header-gap-after) / 2)) var(--mobile-page-gutter, 16px);
    border:none;
    border-radius:0;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    text-align:left;
    cursor:pointer;
    flex-shrink:0;
    transition:background-color 0.2s ease;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion.summary-card--patrimonio-m-open .summary-card__m-acc-trigger{
    background:var(--surface2);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-trigger:focus-visible{
    outline:2px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    outline-offset:2px;
    z-index:1;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-trigger-left{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-logo{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-logo .card-logo-badge,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-logo .card-logo-badge img{
    width:24px !important;
    height:24px !important;
    min-width:24px;
    min-height:24px;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-id{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:var(--panel-header-gap-after);
    min-width:0;
    flex-wrap:nowrap;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-id-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:max(2px, calc(var(--panel-header-gap-after) / 6));
    min-width:0;
    flex:1 1 auto;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-company{
    font-size:var(--ui-hint-size, 11px);
    font-weight:500;
    line-height:1.25;
    color:var(--text-muted);
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-ticker{
    font-size:14px;
    font-weight:700;
    letter-spacing:0.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    font-variant-numeric:tabular-nums;
    color:var(--text);
  }

  /* Linha fechada (mobile): badge de setor oculto para liberar espaço ao ticker
   * e ao nome da empresa. O HTML continua sendo emitido em `app.js` (variante
   * `--m-acc`); apenas a apresentação é suprimida no mobile. O painel expandido
   * (z1) já fica `display:none` em mobile, então não há badge nem lá. Desktop
   * permanece intocado (esta regra vive dentro do `@media (max-width:767px)`).
   */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__sector-badge--m-acc{
    display:none !important;
  }

  /* Linha fechada (mobile): coluna direita em duas linhas, alinhadas à direita.
   * Linha 1: [valor atual] [chevron]
   * Linha 2: [% resultado]            (chevron ocupa as duas linhas)
   * Mantém o markup atual (`pct-wrap`, `pos-wrap`, `chev` como irmãos diretos).
   */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-trigger-right{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "value chev"
      "pct   chev";
    align-items:center;
    justify-items:end;
    column-gap:8px;
    row-gap:2px;
    flex-shrink:0;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-wrap{
    grid-area:value;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct-wrap{
    grid-area:pct;
    display:flex;
    align-items:center;
    flex-shrink:0;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct{
    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct.up{
    color:color-mix(in srgb, var(--positive) 80%, var(--text-mid) 20%);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct.down{
    color:color-mix(in srgb, var(--negative) 74%, var(--text-mid) 26%);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct--neutral,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct--muted{
    color:var(--text-mid);
    font-weight:600;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-val{
    font-size:13px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-val--gain{
    color:color-mix(in srgb, var(--positive) 80%, var(--text-mid) 20%);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-val--loss{
    color:color-mix(in srgb, var(--negative) 74%, var(--text-mid) 26%);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-val--neutral{
    color:var(--text);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-chev{
    flex-shrink:0;
    font-size:11px;
    line-height:1;
    opacity:0.65;
    margin-left:2px;
    transition:transform 250ms ease;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion.summary-card--patrimonio-m-open .summary-card__m-acc-chev{
    transform:rotate(180deg);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height 250ms ease;
    flex-shrink:0;
  }

  /*
   * Painel expandido: igual ao Radar — altura livre (scroll da página), respiro entre trigger e corpo.
   */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion.summary-card--patrimonio-m-open .summary-card__m-acc-panel{
    max-height:min(3200px, 400vh);
    overflow:visible;
    margin-top:max(6px, calc(var(--mobile-page-gutter, 16px) / 2));
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-panel-scroll{
    max-height:none;
    overflow-x:hidden;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    padding:0;
    box-sizing:border-box;
  }

  /* Sem faixa lateral e sem padding interno: para o painel expandido mobile reproduzir
   * a "linguagem desktop" (divisórias entre `__metric-cell` formando uma cruz central
   * e o `__z3` com tinta de fundo encostando nas bordas do card), o padding lateral
   * sai do `__premium-inner` e migra para os próprios cells e para o z3. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__premium-inner{
    border-left:none !important;
    border-radius:0;
    padding:0;
    box-sizing:border-box;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion.summary-card--patrimonio-m-open .summary-card__premium-inner{
    margin-top:0;
  }

  /* Miolo mobile: cabeçalho duplicado (z1) oculto — desktop ≥769 mantém z1 via `mesa-premium-ui` */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z1{
    display:none !important;
  }

  /* z2 colado ao topo do inner: o cabeçalho z1 é `display:none` em mobile, então o
   * antigo `padding-top` que existia para "respirar" o z1 escondido foi removido.
   * O respiro até a primeira linha de métricas vem agora apenas do padding vertical
   * do `__premium-inner`. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z2{
    padding:0;
    margin:0;
  }

  /* Grid 2x2 sem gaps: as divisórias internas entre cells (cruz central) é que separam
   * as métricas, idêntico à linguagem desktop em `mesa-premium-ui.css`. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metrics-grid{
    column-gap:0;
    row-gap:0;
  }

  /* Cada cell ganha padding interno e divisórias finas (mesma cor do desktop).
   * O padding-x usa `--panel-pad-x` para manter o recuo lateral premium do conteúdo. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-cell{
    padding:10px var(--panel-pad-x) 8px;
    border-right:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 26%, var(--surface) 74%);
    border-bottom:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 26%, var(--surface) 74%);
  }

  /* Cancelar borda direita na 2ª coluna e borda inferior na 2ª linha (cruz central).
   * As mesmas regras existem em `mesa-premium-ui.css` (sem `@media`), mas a especificidade
   * baixa (`.summary-card__metric-cell:nth-child(...)`) perde para a regra mobile acima
   * — então repetimos aqui em escopo mobile. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-cell:nth-child(2n){
    border-right:none;
  }
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-cell:nth-child(n+3){
    border-bottom:none;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__zlabel{
    margin-bottom:max(4px, calc(var(--panel-header-gap-after) / 4));
  }

  /* Valor → micro empilhados (mesma linguagem do desktop em `mesa-premium-ui.css`).
   * Antes estávamos em `flex-direction:row; align-items:baseline; flex-wrap:wrap` para
   * compactar, mas isso desalinhava label x valor entre células: o `<div class="price-slot">`
   * (em Cotação) tem `width:100%` herdado de `base.css` e, num pai flex-row, tomava a linha
   * inteira; em Preço médio o micro "por ação" cabia, em Total investido com micro phantom
   * o valor centralizava na baseline — cada cell renderizava num eixo diferente. Voltar a
   * column garante que label, valor e micro fiquem todos no mesmo `text-align:left` natural,
   * idêntico ao desktop. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-value-block{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-micro{
    margin-top:0;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-val--lg{
    font-size:clamp(15px, 4.8cqi + 0.5rem, 22px);
    font-weight:700;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-val--md{
    font-size:clamp(14px, 3.5cqi + 0.45rem, 17px);
    font-weight:700;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-val--quote .mesa-quote-val,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__metric-val--quote .price-val{
    font-size:clamp(14px, 3.5cqi + 0.45rem, 17px);
    font-weight:700;
  }

  /* Hint de cronologia: respeita o recuo lateral premium quando aparece. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__hint--chronology{
    margin:max(8px, calc(var(--panel-header-gap-after) - 4px)) var(--panel-pad-x) 0;
  }

  /* Bloco de resultado (z3) — separação com o z2 vem do `border-top` herdado de
   * `mesa-premium-ui.css`; o fundo tintado (`--gain` / `--loss` / `--neutral`)
   * também herda. Aqui só ajustamos o padding interno mobile (compacto, com
   * recuo lateral) e zeramos a `margin-top` para o z3 colar no border-top. */
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3{
    margin-top:0;
    padding:max(12px, calc(var(--panel-pad-y-top) - 8px)) var(--panel-pad-x) max(12px, calc(var(--panel-pad-y-top) - 8px));
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:max(4px, calc(var(--panel-header-gap-after) / 3)) var(--panel-header-gap-after);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3 > .summary-card__z3-row:first-child{
    display:contents;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3-pnl{
    flex:1 1 auto;
    min-width:min(100%, 11rem);
    max-width:100%;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3-row--split{
    flex:0 1 auto;
    min-width:min(100%, 10rem);
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:none !important;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--panel-header-gap-after);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3-pnl-main{
    column-gap:max(4px, calc(var(--panel-header-gap-after) / 3));
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3-pos-lbl{
    padding-right:max(4px, calc(var(--panel-header-gap-after) / 3));
  }

  @container mesa-patrimonio-card (max-width: 360px){
    #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3{
      flex-direction:column;
      align-items:stretch;
      gap:max(4px, calc(var(--panel-header-gap-after) / 3));
    }

    #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3-pnl{
      min-width:0;
    }

    #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__z3-row--split{
      justify-content:space-between;
      min-width:0;
      width:100%;
    }
  }

  /* Radar — cartões colapsáveis (≤768px) */
  /*
   * Ghost à direita: `.summary-card::before` (base.css ~1084) é absolute 168x76 com
   * `var(--panel-glow)` no topo-direito; `.summary-card::after` é uma linha gradiente
   * dourada na base. Em mobile esses pseudo-elementos vazam tanto na linha fechada
   * (faixa clara à direita) quanto no card expandido (trigger 56px vs glow 76px,
   * deixando o glow sangrar para dentro do painel + linha dourada no rodapé).
   * Padrão idêntico ao Patrimônio mobile: superfície limpa, sem glow nem linha.
   * Escopo: SOMENTE `#view-radar` em `@media (max-width:768px)` — desktop e
   * Patrimônio (`#view-summary`) não são afetados.
   */
  #mesaAppShell #view-radar .summary-card.radar-card.radar-card--m-accordion::before,
  #mesaAppShell #view-radar .summary-card.radar-card.radar-card--m-accordion::after{
    display:none !important;
    content:none !important;
  }

  #mesaAppShell #view-radar #radarContent .summary-grid{
    gap:0 !important;
    padding-top:0 !important;
    padding-bottom:max(28px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #mesaAppShell #view-radar #radarContent .summary-grid > .summary-card.radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip){
    height:auto !important;
    min-height:0 !important;
    align-self:stretch;
    border-radius:var(--radius) !important;
    box-shadow:none !important;
    border:none !important;
    border-bottom:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 55%, var(--surface) 45%) !important;
    margin:0 !important;
    overflow:hidden;
    background:var(--surface);
  }

  #mesaAppShell #view-radar #radarContent .summary-grid > .summary-card.radar-card.radar-card--m-acc-skip{
    height:auto !important;
    min-height:0 !important;
    align-self:stretch;
    border-radius:var(--radius) !important;
    border:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 70%, var(--surface) 30%) !important;
    box-shadow:0 2px 12px color-mix(in srgb, var(--text) 7%, transparent) !important;
    margin-bottom:10px !important;
    overflow:hidden;
    background:var(--surface);
  }

  #mesaAppShell #view-radar #radarContent .summary-grid > .summary-card.radar-card.radar-card--m-accordion.radar-card--m-open{
    border-radius:var(--radius) !important;
    border:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 70%, var(--surface) 30%) !important;
    border-bottom:1px solid color-mix(in srgb, var(--border-subtle, var(--border)) 70%, var(--surface) 30%) !important;
    box-shadow:0 2px 12px color-mix(in srgb, var(--text) 7%, transparent) !important;
    margin-bottom:10px !important;
    overflow:hidden;
    background:var(--surface) !important;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-trigger{
    -webkit-appearance:none;
    appearance:none;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    margin:0;
    box-sizing:border-box;
    min-height:56px;
    height:56px;
    padding:0 var(--mobile-page-gutter, 16px);
    border:none;
    border-radius:0;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    text-align:left;
    cursor:pointer;
    flex-shrink:0;
    transition:background-color 0.22s ease;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion.radar-card--m-open .radar-card__m-acc-trigger{
    background:var(--surface) !important;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-trigger:focus-visible{
    outline:2px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    outline-offset:2px;
    z-index:1;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-trigger-left{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-logo{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-logo .card-logo-badge,
  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-logo .card-logo-badge img{
    width:28px !important;
    height:28px !important;
    min-width:28px;
    min-height:28px;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-id{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    min-width:0;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-ticker{
    font-size:15px;
    font-weight:700;
    letter-spacing:0.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    font-variant-numeric:tabular-nums;
    color:var(--text);
    line-height:1.15;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-kind{
    font-size:11px;
    font-weight:600;
    color:var(--text-mid);
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
  }

  /* Linha fechada (mobile): coluna direita em duas linhas, alinhadas à direita.
   * Mesmo padrão aprovado no Patrimônio mobile.
   * Linha 1: [preço atual] [chevron]
   * Linha 2: [% variação]            (chevron ocupa as duas linhas)
   * Mantém o markup atual em `mesa-radar-render.js` (`price-wrap`, `change-wrap`,
   * `chev` como irmãos diretos do `__m-acc-trigger-right`). */
  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-trigger-right{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "value chev"
      "pct   chev";
    align-items:center;
    justify-items:end;
    column-gap:8px;
    row-gap:2px;
    flex-shrink:0;
  }

  /* Status chip oculto na linha fechada mobile (papel análogo ao badge de setor
   * no Patrimônio): libera espaço para ticker, kind, preço e variação. O status
   * continua visível no card expandido (não tocado neste micropasso). */
  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-status-chip{
    display:none !important;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-price{
    font-size:13px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--text);
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-price--muted{
    color:var(--text-mid);
    font-weight:600;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-change{
    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-change-wrap{
    grid-area:pct;
    flex-shrink:0;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-price-wrap{
    grid-area:value;
    flex-shrink:0;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-chev{
    grid-area:chev;
    flex-shrink:0;
    font-size:11px;
    line-height:1;
    opacity:0.65;
    margin-left:2px;
    transition:transform 280ms ease;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion.radar-card--m-open .radar-card__m-acc-chev{
    transform:rotate(180deg);
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height 280ms ease;
    flex-shrink:0;
  }

  /*
   * Painel expandido: altura ilimitada — o scroll é o da página (evita cortar rodapé / Jornal).
   * max-height alto mantém transição aproximada ao fechar; conteúdo real não fica preso a 400px.
   */
  #mesaAppShell #view-radar .radar-card--m-accordion.radar-card--m-open .radar-card__m-acc-panel{
    max-height:min(3200px, 400vh);
    overflow:visible;
    margin-top:var(--mobile-page-gutter, 16px);
    background:var(--surface) !important;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-panel-scroll{
    max-height:none;
    overflow-x:hidden;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    /*
     * padding-bottom: respiro discreto após o Jornal do Sócio.
     * O `env(safe-area-inset-bottom)` aqui é redundante — o card vive no meio
     * da `.summary-grid`, não colado ao fundo da viewport; quem cuida da safe
     * area é o `padding-bottom` da própria grid (~2028). Manter `max(16px,…)`
     * empilhava ~46–64px junto com `radar-card-footer` (16px) e o respiro
     * interno do `radar-card-journal` (14px), criando "espaço fantasma" no fim
     * do card expandido. 6px deixa um respiro intencional sem encostar.
     */
    padding:0 var(--mobile-page-gutter, 16px) 6px;
    box-sizing:border-box;
    background:var(--surface) !important;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion .radar-card__m-acc-body{
    background:var(--surface) !important;
  }

  /* Reduz padding-bottom do `radar-card-footer` no expandido mobile. O respiro
   * vertical principal entre "Jornal do Sócio" e o fim do card já vem do
   * padding interno do próprio `radar-card-journal` (14px) + dos 6px do
   * panel-scroll acima. Manter os 16px legados aqui inflava o final do card. */
  #mesaAppShell #view-radar .radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card-footer{
    padding-bottom:8px;
  }

  #mesaAppShell #view-radar .radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-range{
    min-height:24px;
    margin-bottom:0;
  }

  #mesaAppShell #view-radar .radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-range__track{
    margin-bottom:2px;
  }

  #mesaAppShell #view-radar .radar-card--m-acc-skip .radar-card__m-acc-panel{
    max-height:none !important;
    overflow:visible !important;
    transition:none !important;
  }

  #mesaAppShell #view-radar .radar-card--m-acc-skip .radar-card__m-acc-panel-scroll{
    max-height:none !important;
    overflow:visible !important;
    padding:0;
  }

  /*
   * CTA do Jornal do Sócio em mobile: força UMA linha e deixa a fonte encolher
   * proporcionalmente à largura do card via container query (mesma técnica usada
   * no desktop em base.css ~4395, porém em escopo `(max-width:768px)`).
   * Cobre tanto o rótulo curto ("Notícias recentes deste ativo") quanto o longo
   * legado ("Ver notícias recentes deste ativo"), evitando quebra em duas linhas
   * em viewports estreitos.
   */
  #mesaAppShell #view-radar .radar-card-journal{
    container-type:inline-size;
    container-name:radar-journal-m;
  }

  #mesaAppShell #view-radar .radar-card-journal .radar-card-footer__btn.radar-card-journal__btn{
    white-space:nowrap;
    font-size:clamp(10px, 4.4cqi, 12px);
    letter-spacing:0.015em;
    line-height:1.2;
    padding-left:clamp(10px, 2.4cqi, 18px);
    padding-right:clamp(10px, 2.4cqi, 18px);
  }

  /*
   * Card expandido (mobile): redução de redundância com o trigger compacto.
   * O trigger sticky no topo do card já entrega [logo + ticker + kind +
   * preço + variação]. O `radar-card__header` interno repetia logo grande
   * (card-brand) e a linha 1 (ticker 22px + segment 11px), inflando altura.
   * Aqui ocultamos só esses dois elementos no header expandido, mantendo
   * visíveis o nome da empresa (`__company`) e as ações `__actions` (✎/✕).
   * Escopo: `.radar-card--m-accordion:not(.radar-card--m-acc-skip)` — a
   * variante "skip" (sem accordion, sem trigger compacto) preserva o header
   * grande para não perder identidade.
   * Hero (preço grande + status chip), levels, range, footer e Jornal não
   * são tocados.
   */
  #mesaAppShell #view-radar .radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__header .card-brand,
  #mesaAppShell #view-radar .radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__header .radar-card__id-line1{
    display:none !important;
  }

  #mesaAppShell #view-radar .radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__header{
    gap:8px;
    margin-bottom:8px;
  }

  #mesaAppShell #view-radar .radar-card.radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__identity--stack{
    gap:0;
  }
}

/* Contrato comum — item recolhido mobile de ativo (Patrimônio + Radar) */
@media (max-width:768px){
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion:not(.summary-card--patrimonio-m-open),
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-open):not(.radar-card--m-acc-skip){
    padding:0 !important;
    box-sizing:border-box;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-trigger,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-trigger{
    display:grid;
    grid-template-columns:minmax(0, 1fr) clamp(112px, 34vw, 132px);
    align-items:center;
    column-gap:8px;
    min-height:56px;
    height:56px;
    padding:0 var(--mobile-page-gutter, 16px);
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-trigger-left,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-trigger-left{
    min-width:0;
    max-width:100%;
    gap:10px;
    overflow:hidden;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-logo,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-logo{
    flex:0 0 24px;
    width:24px;
    height:24px;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-logo .card-logo-badge,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-logo .card-logo-badge img,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-logo .card-logo-badge,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-logo .card-logo-badge img{
    width:24px !important;
    height:24px !important;
    min-width:24px;
    min-height:24px;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-id,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-id-stack,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-id{
    min-width:0;
    max-width:100%;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-id-stack,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-id{
    gap:2px;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-ticker,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-ticker{
    font-size:14px;
    line-height:1.15;
    max-width:100%;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-company,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-kind{
    font-size:11px;
    line-height:1.2;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-trigger-right,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-trigger-right{
    width:100%;
    min-width:0;
    grid-template-columns:minmax(0, 1fr) 16px;
    column-gap:6px;
    row-gap:2px;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-trigger-right{
    width:100%;
    min-width:0;
    flex:initial;
    grid-template-columns:minmax(0, 1fr) 32px;
    column-gap:16px;
    align-items:center;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-wrap,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct-wrap,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-price-wrap,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-change-wrap{
    min-width:0;
    max-width:100%;
    justify-self:end;
    overflow:hidden;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-val,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-price{
    line-height:1.25;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-change{
    line-height:1.25;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pos-val,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-pct,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-price,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-change{
    display:block;
    max-width:100%;
    margin-top:0;
    margin-bottom:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:right;
    font-variant-numeric:tabular-nums;
  }

  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-chev,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-chev{
    grid-area:chev;
    width:16px;
    min-width:16px;
    margin-left:0;
    text-align:center;
    justify-self:end;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-chev{
    align-self:center;
    justify-self:end;
    margin-left:0;
  }
  /* ==========================================================================
     Livro do Sócio — mobile paid layout pass (CSS-only)
     --------------------------------------------------------------------------
     Escopo: apenas mobile, apenas Livro (#mainFormCard / #view-ops).
     Desktop aprovado permanece intocado porque este arquivo inteiro está dentro
     de @media (max-width: 767px).
     ========================================================================== */

  #mesaAppShell #mainFormCard.form-card,
  #mesaAppShell #view-ops .ops-filters-panel,
  #mesaAppShell #view-ops .ops-mobile-list {
    --book-module-outer-radius: 14px;
    --book-module-pad-x: 14px;
    --book-module-pad-y: 14px;
    --book-module-trigger-h: 44px;
    --book-field-h: var(--field-h, 40px);
    --book-label-gap: var(--ui-label-gap, 6px);
    --book-button-h: var(--ui-button-height, var(--book-field-h));
    --book-control-radius: 10px;
    --book-soft-border: color-mix(in srgb, var(--border2, var(--border)) 42%, var(--border));
    --book-soft-surface: color-mix(in srgb, var(--surface2, var(--surface)) 28%, var(--surface));
    --book-module-shadow: 0 1px 3px rgba(18, 24, 33, 0.045);
  }

  #mesaAppShell #mainFormCard.form-card,
  #mesaAppShell #view-ops .ops-filters-panel {
    border-radius: var(--book-module-outer-radius) !important;
    border: 1px solid var(--book-soft-border) !important;
    background: var(--surface, #faf9f6) !important;
    box-shadow: var(--book-module-shadow) !important;
    overflow: hidden !important;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-toggle,
  #mesaAppShell #view-ops .ops-filters-toggle {
    min-height: var(--book-module-trigger-h) !important;
    padding: 0 14px !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    overflow: hidden !important;
    background: color-mix(in srgb, var(--surface2, var(--surface)) 18%, var(--surface)) !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-overline, 10px) !important;
    font-weight: var(--mesa-type-weight-bold, 700) !important;
    letter-spacing: var(--mesa-type-tracking-overline, 0.12em) !important;
    line-height: var(--mesa-type-line-compact, 1.2) !important;
    color: var(--text-dim, var(--text-mid)) !important;
  }

  #mesaAppShell #mainFormCard:not(.mesa-op-form--collapsed) .mesa-op-form-toggle,
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .ops-filters-toggle {
    background: color-mix(in srgb, var(--surface2, var(--surface)) 34%, var(--surface)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border2, var(--border)) 36%, transparent) !important;
  }

  #mesaAppShell #mainFormCard .mesa-book-module__title,
  #mesaAppShell #view-ops .ops-filters-toggle__label {
    color: inherit !important;
    text-transform: uppercase !important;
  }

  #mesaAppShell #mainFormCard .mesa-book-module__chev,
  #mesaAppShell #view-ops .ops-filters-toggle-icon,
  #mesaAppShell #view-ops .ops-filters-toggle .summary-card__m-acc-chev {
    position: relative !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: transparent !important;
    font-size: 0 !important;
    opacity: 0.8 !important;
    transform: none !important;
  }

  #mesaAppShell #mainFormCard .mesa-book-module__chev::before,
  #mesaAppShell #view-ops .ops-filters-toggle-icon::before,
  #mesaAppShell #view-ops .ops-filters-toggle .summary-card__m-acc-chev::before {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.5px solid var(--text-dim, var(--text-mid)) !important;
    border-bottom: 1.5px solid var(--text-dim, var(--text-mid)) !important;
    transform: rotate(45deg) translateY(-2px) !important;
    transition: transform 0.18s ease, opacity 0.15s ease !important;
  }

  #mesaAppShell #mainFormCard:not(.mesa-op-form--collapsed) .mesa-book-module__chev::before,
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .ops-filters-toggle-icon::before,
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .ops-filters-toggle .summary-card__m-acc-chev::before {
    transform: rotate(225deg) translate(-1px, -1px) !important;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-body,
  #mesaAppShell #view-ops .ops-filters-body {
    padding: 14px !important;
  }

  #mesaAppShell #mainFormCard .section-header {
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border2, var(--border)) 28%, transparent) !important;
  }

  #mesaAppShell #mainFormCard .form-title {
    margin: 0 !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-overline, 10px) !important;
    line-height: var(--mesa-type-line-compact, 1.2) !important;
    font-weight: var(--mesa-type-weight-bold, 700) !important;
    letter-spacing: var(--mesa-type-tracking-overline, 0.12em) !important;
    color: var(--text-dim, var(--text-mid)) !important;
  }

  #mesaAppShell #mainFormCard .form-row {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  #mesaAppShell #mainFormCard .field {
    gap: var(--book-label-gap) !important;
  }

  #mesaAppShell #mainFormCard .field:not(.field--float) > label,
  #mesaAppShell #mainFormCard .field.date-field > label,
  #mesaAppShell #view-ops .ops-filters-body .field > label,
  #mesaAppShell #view-ops .ops-period-header > label {
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--ui-field-label-size, 10.5px) !important;
    font-weight: var(--ui-field-label-weight, 600) !important;
    letter-spacing: var(--ui-field-label-tracking, 0.1em) !important;
    line-height: var(--ui-field-label-line-height, 1.1) !important;
    margin: 0 !important;
    color: var(--ui-field-label-color, var(--label-accent)) !important;
    text-transform: uppercase !important;
  }

  #mesaAppShell #mainFormCard input[type='text'],
  #mesaAppShell #mainFormCard input[type='number'],
  #mesaAppShell #mainFormCard .date-display-btn,
  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select .mobile-select-trigger,
  #mesaAppShell #view-ops .ops-filters-body input,
  #mesaAppShell #view-ops .ops-filters-body select,
  #mesaAppShell #view-ops .ops-filters-body .date-display-btn {
    min-height: var(--book-field-h) !important;
    height: var(--book-field-h) !important;
    max-height: var(--book-field-h) !important;
    border-radius: var(--book-control-radius) !important;
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 48%, var(--border)) !important;
    background: var(--input-bg, var(--surface)) !important;
    box-shadow: 0 1px 2px rgba(18, 24, 33, 0.028) !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-control, 12.5px) !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
    line-height: 1.2 !important;
    color: var(--text, #121821) !important;
  }

  #mesaAppShell #mainFormCard .toggle-wrap {
    min-height: var(--book-field-h) !important;
    height: var(--book-field-h) !important;
    max-height: var(--book-field-h) !important;
    border-radius: var(--book-control-radius) !important;
    background: var(--book-soft-surface) !important;
    box-sizing: border-box !important;
  }

  #mesaAppShell #mainFormCard .toggle-btn {
    min-height: 100% !important;
    height: 100% !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-control, 12.5px) !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
    text-transform: none !important;
  }

  #mesaAppShell #mainFormCard #formContext.context-card {
    margin: 8px 0 12px !important;
    border-radius: var(--book-control-radius) !important;
    background: color-mix(in srgb, var(--surface2, var(--surface)) 26%, var(--surface)) !important;
  }

  #mesaAppShell #mainFormCard #btnSubmitOp.btn-add,
  #mesaAppShell #mainFormCard .btn-add {
    min-height: var(--book-button-h) !important;
    height: var(--book-button-h) !important;
    max-height: var(--book-button-h) !important;
    margin-top: 14px !important;
    border-radius: var(--ui-button-radius, var(--book-control-radius)) !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-control, 12.5px) !important;
    font-weight: var(--mesa-type-weight-bold, 700) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
    text-transform: none !important;
  }

  #mesaAppShell #mainFormCard #btnSubmitOp.btn-add {
    position: relative !important;
    z-index: 1 !important;
  }

  #mesaAppShell #view-ops .ops-filter-grid,
  #mesaAppShell #view-ops .ops-filter-grid--top,
  #mesaAppShell #view-ops .ops-custom-range {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }

  #mesaAppShell #view-ops .ops-filters-body .field {
    display: grid !important;
    gap: var(--book-label-gap, 6px) !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #mesaAppShell #view-ops .ops-filter-label {
    display: block !important;
    margin: 0 !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--ui-field-label-size, 10.5px) !important;
    font-weight: var(--ui-field-label-weight, 600) !important;
    letter-spacing: var(--ui-field-label-tracking, 0.1em) !important;
    line-height: var(--ui-field-label-line-height, 1.1) !important;
    text-transform: uppercase !important;
    color: var(--ui-field-label-color, var(--label-accent)) !important;
  }

  #mesaAppShell #view-ops .ops-period-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 8px !important;
  }



  #mesaAppShell #mainFormCard #fAssetType {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #mesaAppShell #mainFormCard .asset-type-inline-option span,
  #mesaAppShell #view-ops .ops-type-inline-option span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #mesaAppShell #view-ops .ops-period-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  #mesaAppShell #view-ops .ops-period-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: 11px !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
    line-height: 1 !important;
    color: var(--text-mid) !important;
    background: color-mix(in srgb, var(--surface2, var(--surface)) 34%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 48%, var(--border)) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  #mesaAppShell #view-ops .ops-period-chip.active {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--gold, var(--accent)) 10%, var(--surface2, var(--surface))) !important;
    border-color: color-mix(in srgb, var(--gold, var(--accent)) 34%, var(--border)) !important;
    font-weight: var(--mesa-type-weight-bold, 700) !important;
  }

  #mesaAppShell #view-ops .ops-period-chip--ghost {
    height: var(--ui-button-height, var(--field-h, 40px)) !important;
    min-height: var(--ui-button-height, var(--field-h, 40px)) !important;
    max-height: var(--ui-button-height, var(--field-h, 40px)) !important;
    padding: 0 var(--ui-control-padding-x, 14px) !important;
    border-style: dashed !important;
    font-size: 13px !important;
  }

  #mesaAppShell #view-ops .ops-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #mesaAppShell #view-ops .ops-mobile-card {
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 42%, var(--border)) !important;
    border-radius: var(--ui-radius-card, 14px) !important;
    background: var(--surface, #faf9f6) !important;
    box-shadow: 0 1px 3px rgba(18, 24, 33, 0.04) !important;
    overflow: hidden !important;
  }

  #mesaAppShell #view-ops .ops-mobile-card + .ops-mobile-card {
    margin-top: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--border2, var(--border)) 42%, var(--border)) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-card__summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    align-items: center !important;
    min-height: 70px !important;
    padding: 12px 10px 12px 14px !important;
    gap: 8px !important;
  }

  #mesaAppShell #view-ops .ops-mobile-card__main {
    gap: 8px !important;
  }

  #mesaAppShell #view-ops .ops-mobile-head,
  #mesaAppShell #view-ops .ops-mobile-flow {
    column-gap: 10px !important;
  }

  #mesaAppShell #view-ops .ops-mobile-head {
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-flow {
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-head__identity .tag-op {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 58px !important;
    max-width: 72px !important;
    padding: 3px 7px !important;
    font-size: 9.5px !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-ticker {
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: var(--mesa-type-weight-bold, 700) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
    color: var(--text) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-date,
  #mesaAppShell #view-ops .ops-mobile-flow__qty {
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    color: var(--text-mid) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-date {
    padding-right: 2px !important;
    font-size: 11px !important;
    font-weight: var(--mesa-type-weight-medium, 500) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-flow__qty {
    font-size: 11.5px !important;
    font-weight: var(--mesa-type-weight-medium, 500) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-flow__amount-value {
    font-size: 12.5px !important;
    font-weight: var(--mesa-type-weight-bold, 700) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-chevron {
    position: relative !important;
    align-self: center !important;
    justify-self: end !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin-left: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    opacity: 0.78 !important;
    transform: none !important;
  }

  #mesaAppShell #view-ops .ops-mobile-chevron::before {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.5px solid var(--text-dim, var(--text-mid)) !important;
    border-bottom: 1.5px solid var(--text-dim, var(--text-mid)) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.18s ease !important;
  }

  #mesaAppShell #view-ops .ops-mobile-card.open .ops-mobile-chevron::before {
    transform: rotate(225deg) translate(-1px, -1px) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-card__details {
    padding: 12px 14px 14px !important;
    border-top: 1px solid color-mix(in srgb, var(--border2, var(--border)) 28%, transparent) !important;
    background: var(--surface, #faf9f6) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-top: 0 !important;
  }

  #mesaAppShell #view-ops .ops-mobile-meta-item {
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    min-height: 54px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 30%, transparent) !important;
    border-radius: var(--ui-radius-control, 12px) !important;
    background: var(--bg-subtle, color-mix(in srgb, var(--surface2, var(--surface)) 22%, transparent)) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-meta-label {
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: 9px !important;
    font-weight: var(--mesa-type-weight-bold, 700) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.15 !important;
    color: var(--text-dim) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #mesaAppShell #view-ops .ops-mobile-meta-value {
    margin-top: 0 !important;
    font-size: 12.5px !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
    line-height: 1.25 !important;
    color: var(--text) !important;
  }

  #mesaAppShell #view-ops .ops-mobile-detail-grid .ops-mobile-meta-item:nth-child(6) {
    min-height: 70px !important;
    align-content: start !important;
  }

  #mesaAppShell #view-ops .ops-mobile-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-top: 12px !important;
  }

  #mesaAppShell #view-ops .ops-mobile-actions .btn-edit,
  #mesaAppShell #view-ops .ops-mobile-actions .btn-del {
    min-width: 40px !important;
    min-height: 34px !important;
    border-radius: 9px !important;
  }

  #mesaAppShell #view-ops .ops-ledger-more-btn {
    min-height: 42px !important;
    margin-top: 12px !important;
    border-radius: 10px !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: 11.5px !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
  }

}


/* ======================================================================
   Livro do Sócio — Tipo de operação como dropdown real no mobile
   ----------------------------------------------------------------------
   Escopo: mobile-only. Evita sheet/modal para o filtro opsTypeFilter.
   ====================================================================== */
@media (max-width: 767px) {
  #mesaAppShell #view-ops #opsTypeFilter.ops-type-select-native-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #mesaAppShell #view-ops .ops-filter-grid--top .field:has(#opsTypeFilter) {
    position: relative !important;
    overflow: visible !important;
    z-index: 4 !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: var(--book-field-h, 42px) !important;
    height: var(--book-field-h, 42px) !important;
    max-height: var(--book-field-h, 42px) !important;
    padding: 0 14px !important;
    border-radius: var(--book-control-radius, 12px) !important;
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 48%, var(--border)) !important;
    background: var(--input-bg, var(--surface)) !important;
    box-shadow: 0 1px 2px rgba(18, 24, 33, 0.028) !important;
    color: var(--text, #121821) !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-control, 12.5px) !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
    line-height: var(--mesa-type-line-compact, 1.2) !important;
    text-align: left !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gold, var(--accent)) 34%, var(--border)) !important;
    outline-offset: 2px !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-trigger--open {
    border-color: color-mix(in srgb, var(--gold, var(--accent)) 42%, var(--border)) !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-trigger__text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-trigger__chevron {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 1.5px solid color-mix(in srgb, var(--text-dim) 78%, transparent) !important;
    border-bottom: 1.5px solid color-mix(in srgb, var(--text-dim) 78%, transparent) !important;
    transform: translateY(-2px) rotate(45deg) !important;
    opacity: 0.78 !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-trigger--open .ops-type-inline-trigger__chevron {
    transform: translateY(2px) rotate(-135deg) !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-dropdown {
    position: absolute !important;
    z-index: 80 !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-dropdown[hidden] {
    display: none !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: min(240px, 44vh) !important;
    padding: 6px !important;
    border-radius: var(--book-control-radius, 12px) !important;
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border)) !important;
    background: var(--surface, #faf9f6) !important;
    box-shadow: 0 12px 28px rgba(18, 24, 33, 0.10) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-mid, #4a5568) !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-control, 12.5px) !important;
    font-weight: var(--mesa-type-weight-medium, 500) !important;
    letter-spacing: var(--mesa-type-tracking-none, 0) !important;
    line-height: var(--mesa-type-line-compact, 1.2) !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-option:hover,
  #mesaAppShell #view-ops .ops-type-inline-option:focus-visible {
    background: color-mix(in srgb, var(--surface2, var(--surface)) 34%, transparent) !important;
    outline: none !important;
  }

  #mesaAppShell #view-ops .ops-type-inline-option--selected,
  #mesaAppShell #view-ops .ops-type-inline-option[aria-selected='true'] {
    background: color-mix(in srgb, var(--surface2, var(--surface)) 42%, transparent) !important;
    color: var(--text, #121821) !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
  }
}


/* ======================================================================
   Livro do Sócio — correção mobile-only dos selects inline
   ----------------------------------------------------------------------
   Mantém dropdown real no mobile. Não usa sheet, modal, backdrop, header
   editorial ou marca de check. Escopo restrito ao Livro.
   ====================================================================== */
@media (max-width: 767px) {
  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select {
    position: relative !important;
    overflow: visible !important;
    z-index: 80 !important;
  }

  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select .mobile-select-trigger {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: var(--book-field-h, 42px) !important;
    height: var(--book-field-h, 42px) !important;
    max-height: var(--book-field-h, 42px) !important;
    padding: 0 14px !important;
    border-radius: var(--book-control-radius, 12px) !important;
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 48%, var(--border)) !important;
    background: var(--input-bg, var(--surface)) !important;
    box-shadow: 0 1px 2px rgba(18, 24, 33, 0.028) !important;
    color: var(--text, #121821) !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-control, 12.5px) !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
    letter-spacing: var(--mesa-type-tracking-tight, 0.01em) !important;
    line-height: var(--mesa-type-line-compact, 1.2) !important;
    text-align: left !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select .mobile-select-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gold, var(--accent)) 34%, var(--border)) !important;
    outline-offset: 2px !important;
  }

  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select .asset-type-inline-trigger--open {
    border-color: color-mix(in srgb, var(--gold, var(--accent)) 42%, var(--border)) !important;
  }

  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select .mobile-select-trigger__icon {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    color: transparent !important;
    font-size: 0 !important;
    border-right: 1.5px solid color-mix(in srgb, var(--text-dim) 78%, transparent) !important;
    border-bottom: 1.5px solid color-mix(in srgb, var(--text-dim) 78%, transparent) !important;
    transform: translateY(-2px) rotate(45deg) !important;
    opacity: 0.78 !important;
  }

  #mesaAppShell #mainFormCard #assetTypeFieldWrap.field--float-select .asset-type-inline-trigger--open .mobile-select-trigger__icon {
    transform: translateY(2px) rotate(-135deg) !important;
  }

  #mesaAppShell #mainFormCard .asset-type-inline-dropdown {
    position: absolute !important;
    z-index: 9999 !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #mesaAppShell #mainFormCard .asset-type-inline-dropdown[hidden] {
    display: none !important;
  }

  #mesaAppShell #mainFormCard .asset-type-inline-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: min(260px, 46vh) !important;
    padding: 6px !important;
    border-radius: var(--book-control-radius, 12px) !important;
    border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 44%, var(--border)) !important;
    background: var(--surface, #faf9f6) !important;
    box-shadow: 0 12px 28px rgba(18, 24, 33, 0.10) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  #mesaAppShell #mainFormCard .asset-type-inline-option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-mid, #4a5568) !important;
    font-family: var(--mesa-type-font-ui, 'Inter', sans-serif) !important;
    font-size: var(--mesa-type-size-control, 12.5px) !important;
    font-weight: var(--mesa-type-weight-medium, 500) !important;
    letter-spacing: var(--mesa-type-tracking-none, 0) !important;
    line-height: var(--mesa-type-line-compact, 1.2) !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  #mesaAppShell #mainFormCard .asset-type-inline-option:hover,
  #mesaAppShell #mainFormCard .asset-type-inline-option:focus-visible {
    background: color-mix(in srgb, var(--surface2, var(--surface)) 34%, transparent) !important;
    outline: none !important;
  }

  #mesaAppShell #mainFormCard .asset-type-inline-option--selected,
  #mesaAppShell #mainFormCard .asset-type-inline-option[aria-selected='true'] {
    background: color-mix(in srgb, var(--surface2, var(--surface)) 42%, transparent) !important;
    color: var(--text, #121821) !important;
    font-weight: var(--mesa-type-weight-semibold, 600) !important;
  }


  #mesaAppShell #view-ops .ops-period-chips {
    margin-bottom: 14px !important;
  }

  #mesaAppShell #view-ops .ops-period-chip {
    position: relative !important;
    z-index: 1 !important;
  }

  #mesaAppShell #view-ops .ops-custom-range:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 14px 0 12px !important;
    padding-top: 2px !important;
    clear: both !important;
  }

  #mesaAppShell #view-ops .ops-custom-range .field {
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (min-width: 768px) {
  /* O dropdown próprio de Tipo do ativo também é usado no desktop.
     Não esconder aqui: o visual desktop fica em mesa-premium-ui.css. */
  #mesaAppShell #mainFormCard .asset-type-inline-dropdown:not([hidden]) {
    display: block !important;
  }
}

/* Mesa Design System — Chevron / controle de expansão aprovado: opção 4. */
@media (max-width: 767px) {
  #mesaAppShell #mainFormCard .mesa-book-module__chev,
  #mesaAppShell #view-ops .ops-filters-toggle-icon,
  #mesaAppShell #view-ops .ops-filters-toggle .summary-card__m-acc-chev,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-chev,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-chev,
  #mesaAppShell #view-ops .ops-mobile-chevron {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin-left: 4px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    opacity: 0.78 !important;
    transform: none !important;
    transition: background 180ms ease, opacity 180ms ease, transform 180ms ease !important;
  }

  #mesaAppShell #mainFormCard .mesa-book-module__chev::before,
  #mesaAppShell #view-ops .ops-filters-toggle-icon::before,
  #mesaAppShell #view-ops .ops-filters-toggle .summary-card__m-acc-chev::before,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion .summary-card__m-acc-chev::before,
  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-chev::before,
  #mesaAppShell #view-ops .ops-mobile-chevron::before {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 1.7px solid color-mix(in srgb, var(--text-dim, #6f665c) 86%, transparent) !important;
    border-bottom: 1.7px solid color-mix(in srgb, var(--text-dim, #6f665c) 86%, transparent) !important;
    transform: rotate(45deg) translate(-1px, -1px) !important;
    transform-origin: center !important;
    transition: transform 180ms ease, border-color 180ms ease !important;
  }

  #mesaAppShell #mainFormCard .mesa-op-form-toggle:hover .mesa-book-module__chev,
  #mesaAppShell #mainFormCard .mesa-op-form-toggle:focus-visible .mesa-book-module__chev,
  #mesaAppShell #view-ops .ops-filters-toggle:hover .ops-filters-toggle-icon,
  #mesaAppShell #view-ops .ops-filters-toggle:focus-visible .ops-filters-toggle-icon,
  #mesaAppShell #view-summary .summary-card__m-acc-trigger:hover .summary-card__m-acc-chev,
  #mesaAppShell #view-summary .summary-card__m-acc-trigger:focus-visible .summary-card__m-acc-chev,
  #mesaAppShell #view-radar .radar-card__m-acc-trigger:hover .radar-card__m-acc-chev,
  #mesaAppShell #view-radar .radar-card__m-acc-trigger:focus-visible .radar-card__m-acc-chev,
  #mesaAppShell #view-ops .ops-mobile-card__summary:hover .ops-mobile-chevron,
  #mesaAppShell #view-ops .ops-mobile-card__summary:focus-visible .ops-mobile-chevron {
    background: color-mix(in srgb, var(--text, #161512) 5%, transparent) !important;
    opacity: 1 !important;
  }

  #mesaAppShell #mainFormCard:not(.mesa-op-form--collapsed) .mesa-book-module__chev::before,
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .ops-filters-toggle-icon::before,
  #mesaAppShell #view-ops .ops-filters-panel:not(.collapsed) .ops-filters-toggle .summary-card__m-acc-chev::before,
  #mesaAppShell #view-summary .summary-card--patrimonio-m-accordion.summary-card--patrimonio-m-open .summary-card__m-acc-chev::before,
  #mesaAppShell #view-radar .radar-card--m-accordion.radar-card--m-open .radar-card__m-acc-chev::before,
  #mesaAppShell #view-ops .ops-mobile-card.open .ops-mobile-chevron::before {
    transform: rotate(225deg) translate(-1px, -1px) !important;
  }

  #mesaAppShell #view-radar .radar-card--m-accordion:not(.radar-card--m-acc-skip) .radar-card__m-acc-chev {
    align-self: center !important;
    justify-self: end !important;
    margin-left: 0 !important;
  }

  #mesaAppShell #view-ops .ops-mobile-card__summary .ops-mobile-chevron {
    align-self: center !important;
    justify-self: end !important;
    margin-left: 0 !important;
  }
}


  /* Livro mobile: evita barra nativa/overflow visual no cabeçalho recolhido dos filtros.
     O chevron aprovado tem 32px; a coluna do grid precisa ter a mesma largura. */
  #mesaAppShell #view-ops {
    overflow-x: hidden !important;
  }

  #mesaAppShell #view-ops .ops-filters-panel.collapsed {
    overflow: hidden !important;
  }

  #mesaAppShell #view-ops .ops-filters-panel.collapsed .ops-filters-body {
    display: none !important;
  }

  #mesaAppShell #view-ops .ops-filters-toggle {
    max-width: 100% !important;
    overflow: hidden !important;
  }

/* Livro do Sócio — ajuste do botão Limpar filtros após mover para o topo do tipo */
@media (max-width: 767px) {
  #mesaAppShell #view-ops .ops-type-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 6px !important;
  }

  #mesaAppShell #view-ops .ops-type-filter-header > label {
    margin: 0 !important;
  }

  #mesaAppShell #view-ops .ops-clear-filters-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--book-field-h, var(--field-h, 40px)) !important;
    min-height: var(--book-field-h, var(--field-h, 40px)) !important;
    max-height: var(--book-field-h, var(--field-h, 40px)) !important;
    padding: 0 var(--ui-control-padding-x, 14px) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 768px) {
  #mesaAppShell #view-ops .ops-filter-label {
    display: none !important;
  }
}


/* Header mobile — nome curto e carrossel de carteiras
   Escopo restrito ao punch header mobile. Não altera desktop. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-greet__name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-cards-rail,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets,
  #mesaAppShell .app-header--punch #headerWalletStrip {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body {
    padding: 0 !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-left: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding: 0 34vw 12px 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip::-webkit-scrollbar {
    display: none !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip .wallet-mini {
    flex: 0 0 clamp(216px, 62vw, 268px) !important;
    width: clamp(216px, 62vw, 268px) !important;
    max-width: clamp(216px, 62vw, 268px) !important;
    min-width: clamp(216px, 62vw, 268px) !important;
    align-self: stretch !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }
}

/* Header mobile — carrossel das carteiras mais compacto, sobre o fundo da página.
   Escopo restrito ao punch header mobile. Não altera desktop. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail {
    margin: -4.9rem 0 0 !important;
    padding: 0 0 8px 1.25rem !important;
    background: var(--bg) !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets,
  #mesaAppShell .app-header--punch #headerWalletStrip,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body {
    background: transparent !important;
    overflow: visible !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    gap: 8px !important;
    padding: 0 30vw 8px 0 !important;
    background: transparent !important;
    scroll-snap-type: x proximity !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip .wallet-mini {
    flex: 0 0 clamp(224px, 68vw, 262px) !important;
    width: clamp(224px, 68vw, 262px) !important;
    min-width: clamp(224px, 68vw, 262px) !important;
    max-width: clamp(224px, 68vw, 262px) !important;
    min-height: 0 !important;
    padding: 13px 12px 12px !important;
    border-radius: 13px !important;
    scroll-snap-align: start !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-head {
    padding: 0 0 9px !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kicker-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kicker {
    font-size: 13.5px !important;
    line-height: 1.18 !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-sub {
    margin-top: 5px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-metrics {
    gap: 0 !important;
    margin: 7px 0 0 !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 6.5px 0 !important;
    border-top: 1px solid rgba(26, 26, 24, 0.10) !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv:first-child {
    border-top: 0 !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv > span:first-child {
    flex: 0 0 auto !important;
    max-width: 48% !important;
    font-size: 9.8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv > span:last-child {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 52% !important;
    font-size: 12.2px !important;
    line-height: 1.18 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__pl,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__pct {
    display: inline !important;
    white-space: nowrap !important;
  }
}

/* Header mobile — refinamento do carrossel de carteiras.
   Mantém o carrossel sobre o fundo da página, mas evita colisão com o título
   "Carteiras" e reduz o peso visual dos valores. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail {
    margin-top: -3.55rem !important;
    padding-top: 0.45rem !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    padding-top: 0.2rem !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip .wallet-mini {
    flex-basis: clamp(171px, 51vw, 200px) !important;
    width: clamp(171px, 51vw, 200px) !important;
    min-width: clamp(171px, 51vw, 200px) !important;
    max-width: clamp(171px, 51vw, 200px) !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv {
    padding-top: 5.5px !important;
    padding-bottom: 5.5px !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv > span:last-child {
    font-size: 11.3px !important;
    line-height: 1.16 !important;
    font-weight: 600 !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__pl,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__pct {
    font-size: 0.86em !important;
  }
}

/* Header mobile — micropasso: reduzir apenas a altura dos cards do carrossel em ~10%.
   Escopo restrito ao mobile; desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip .wallet-mini {
    padding-top: 11.5px !important;
    padding-bottom: 10.5px !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-head {
    padding-bottom: 7.5px !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-sub {
    margin-top: 4px !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-metrics {
    margin-top: 5.5px !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv {
    padding-top: 4.8px !important;
    padding-bottom: 4.8px !important;
  }
}

/* Header mobile — micropasso: padronizar a escala dos valores nos cards.
   Corrige a fonte no seletor que realmente controla a coluna de valor
   e mantém os centavos menores no tamanho já aprovado. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv > span:last-child {
    font-size: 11.6px !important;
    line-height: 1.13 !important;
    font-weight: 600 !important;
    text-align: right !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv .wallet-mini__value-stack {
    display: block !important;
    width: 100% !important;
    line-height: inherit !important;
    text-align: right !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv .wallet-mini__money {
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv .wallet-mini__money-cents {
    font-size: 8.7px !important;
  }
}

/* Header mobile — micropasso: remover painéis de fundo do carrossel de carteiras.
   Mantém apenas os cards sobre o fundo da própria página. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets,
  #mesaAppShell .app-header--punch #headerWalletStrip,
  #mesaAppShell .app-header--punch #headerWalletStrip.wallet-strip-wrap,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip.wallet-strip-wrap::after,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets .wallet-strip-wrap::after {
    display: none !important;
    content: none !important;
  }
}

/* Header mobile — micropasso: remover qualquer fundo residual do wrapper do carrossel.
   Escopo restrito ao mobile punch header; mantém somente os cards visíveis. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-wallets,
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets .wallet-strip-wrap,
  #mesaAppShell .app-header--punch #headerWalletStrip,
  #mesaAppShell .app-header--punch #headerWalletStrip.wallet-strip-wrap,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-wallets::before,
  #mesaAppShell .app-header--punch .mesa-punch-wallets::after,
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail::before,
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail::after,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets::before,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets::after,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets .wallet-strip-wrap::before,
  #mesaAppShell .app-header--punch .header-patrimonio-executive__wallets .wallet-strip-wrap::after,
  #mesaAppShell .app-header--punch #headerWalletStrip::before,
  #mesaAppShell .app-header--punch #headerWalletStrip::after,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details::before,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details::after,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body::before,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body::after,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip::before,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip::after {
    display: none !important;
    content: none !important;
  }
}

/* Header mobile — micropasso: remover a mancha/sombra residual abaixo dos cards.
   A faixa percebida vinha da sombra difusa herdada dos cards. Mantém o card,
   mas remove o efeito de painel no trilho. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip .wallet-mini {
    box-shadow: 0 1px 2px rgba(26, 26, 24, 0.08) !important;
  }
}


/* Header mobile — micropasso: abrir um pouco o espaçamento entre cards.
   Escopo restrito ao carrossel mobile do header; desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    gap: 12px !important;
  }
}

/* Header mobile — micropasso: cards 15% mais largos e pista visual de swipe.
   Escopo restrito ao carrossel mobile do header; desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip .wallet-mini {
    flex-basis: clamp(197px, 58.65vw, 230px) !important;
    width: clamp(197px, 58.65vw, 230px) !important;
    min-width: clamp(197px, 58.65vw, 230px) !important;
    max-width: clamp(197px, 58.65vw, 230px) !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-cards-rail {
    padding-bottom: 18px !important;
  }
}

.wallet-strip-swipe {
  display: none;
}

/* Header mobile — indicador real do carrossel de carteiras.
   Uma bolinha por card; ativa circular com miolo champagne e inativas vazadas. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-swipe {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-swipe[hidden] {
    display: none !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-swipe__dot {
    position: relative !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(122, 118, 104, 0.36) !important;
    border-radius: 999px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color 160ms ease, background-color 160ms ease !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-swipe__dot::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: transparent !important;
    transform: translate(-50%, -50%) !important;
    transition: background-color 160ms ease !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-swipe__dot--active {
    border-color: rgba(185, 143, 85, 0.22) !important;
    background: rgba(185, 143, 85, 0.12) !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-swipe__dot--active::after {
    background: rgba(185, 143, 85, 0.96) !important;
  }
}

/* Header mobile — carrossel nativo de carteiras com peek do próximo card.
   Usa scroll-snap start, card com 84% da largura do trilho e gap de 12px. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail {
    padding-left: 1.25rem !important;
    padding-right: 0 !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    --wallet-strip-gap: 12px;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--wallet-strip-gap) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    padding: 0 0 12px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip::-webkit-scrollbar {
    display: none !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini,
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip .wallet-mini {
    flex: 0 0 84% !important;
    width: 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
}

/* Header mobile — título externo Carteiras em duas linhas.
   Escopo restrito ao punch header mobile; desktop permanece intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-announce {
    align-items: flex-start !important;
    padding-top: 1.15rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-announce > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-announce__sub {
    display: block !important;
    margin-left: 0 !important;
    line-height: 1.25 !important;
  }
}

/* Header mobile — micropasso: subir mais os indicadores do carrossel.
   Ajusta somente a distância vertical dos dots no mobile,
   sem alterar cards, desktop, JS, cálculos ou estrutura. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch .mesa-punch-cards-rail {
    margin-top: -4.1rem !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-swipe {
    margin-top: -6px !important;
  }
}


/* ==================================================
   Mobile header punch — full-bleed only for the dark hero
   Desktop and panels below the header remain untouched.
   ================================================== */
@media (max-width: 767px) {
  #mesaAppShell:has(.app-header--punch) > .container {
    padding-top: 0 !important;
  }

  #mesaAppShell .app-header--punch {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    outline: 0 !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-shell::before {
    display: none !important;
    content: none !important;
  }
}

/* Header mobile — micropasso: respiro final do carrossel igual ao inicial.
   Ajusta somente o padding final do trilho para o último card não colar na borda. Desktop intocado. */
@media (max-width: 767px) {
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip {
    padding-right: 1.25rem !important;
    scroll-padding-right: 1.25rem !important;
  }
}