/* Mesa theme — tokens, paleta institucional e regras globais do produto.
   (Antes havia aqui um :root "legado" inteiro duplicando o tema; as 82 cores
   duplicadas foram removidas. Sobraram só as 14 que o bloco principal não
   define. As duas que eram de cor receberam valor do tema único claro.) */
:root {
  --bg-elevated:#FFFFFF;            /* era #1C1C19 (escuro); agora claro */
  --gold-line:#E7DBC2;             /* era #7A6330 (escuro); agora linha dourada clara */
  --ui-overline-size: 11px;
  --ui-overline-weight: 600;
  --ui-field-label-size: 10.5px;
  --ui-field-label-weight: var(--ui-overline-weight, 600);
  --ui-field-label-tracking: 0.1em;
  --ui-field-label-line-height: 1.1;
  --ui-strip-title-weight: 600;
  --ui-strip-title-tracking: 0.07em;
  --ui-section-eyebrow-size: 12px;
  --ui-section-eyebrow-weight: 600;
  --ui-form-kicker-size: 11px;
  --ui-form-kicker-weight: 600;
  --ui-form-kicker-tracking: 0.18em;
  --ui-card-metric-size: 14px;
  --ui-card-metric-weight: 600;
  --ui-hint-size: 11px;
}
:root {
  /* Institucional claro — off-white, semântica positivo/negativo, acento azul */
  --bg-root:#F2F1EE;
  --bg-surface:#FFFFFF;
  --bg-subtle:#F8F7F4;
  --bg-inverse:#1A1A18;
  --border-subtle:#F0EEE9;
  --accent:#2C5F8A;
  --accent-soft:#E8EFF5;
  --positive:#1A6B45;
  --negative:#B83232;
  --positive-bg:#EBF5EF;
  --negative-bg:#FAEAEA;
  --sync-pending-bg:#FEF3C7;
  --sync-pending-border:#D97706;
  --wallet-bar-acoes:var(--accent);
  --wallet-bar-fiis:#7B5EA7;
  --wallet-bar-etfs:#2A7F6F;
  --wallet-bar-bdrs:#8A6032;
  --wallet-bar-outros:color-mix(in srgb, var(--text-mid) 65%, var(--border) 35%);
  --bg:var(--bg-root);
  --surface:var(--bg-surface);
  --surface2:var(--bg-subtle);
  --surface3:var(--border-subtle);
  --border:#E8E6E0;
  --border2:color-mix(in srgb, var(--border) 72%, var(--text) 28%);
  --gold:#B08E57;
  --gold-soft:#E7DBC2;
  --gold-hover:#9D7C47;
  --gold-bright:#E2C06A;
  --gold-dim:rgba(176, 142, 87, 0.15);
  --gold-bg:rgba(201, 168, 76, 0.08);
  --navy:#1A1A18;
  --navy-soft:#6B6860;
  --ivory:var(--bg-surface);
  --text:#1A1A18;
  --text-mid:#6B6860;
  --text-dim:#A8A49C;
  --text-primary:var(--text);
  --text-secondary:var(--text-mid);
  --text-muted:var(--text-dim);
  --green:var(--positive);
  --red:var(--negative);
  --green-dim:color-mix(in srgb, var(--positive) 14%, transparent);
  --red-dim:color-mix(in srgb, var(--negative) 14%, transparent);
  --green-soft:var(--positive-bg);
  --red-soft:var(--negative-bg);
  --info:var(--accent);
  --info-soft:var(--accent-soft);
  --shadow-xs:0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow:var(--shadow-md);
  --panel-outer-bg:var(--surface);
  --panel-outer-border:1px solid var(--border);
  --ui-radius-panel:20px;
  --ui-radius-card:14px;
  --ui-radius-control:12px;
  --ui-radius-compact:8px;
  --ui-radius-pill:999px;
  --panel-outer-radius:var(--ui-radius-panel);
  --panel-glow:radial-gradient(ellipse 115% 88% at 100% 0%, color-mix(in srgb, var(--accent) 06%, transparent), transparent 76%);
  --panel-inset-bg:var(--surface2);
  --panel-inset-border:1px solid var(--border);
  --panel-inset-radius:var(--ui-radius-card);
  --panel-cell-bg:var(--surface3);
  --panel-cell-border:1px solid var(--border);
  --panel-shell-bg:color-mix(in srgb, var(--bg-surface) 88%, var(--bg-subtle) 12%);
  --field-h: 40px;
  --label-accent:var(--navy-soft);
  --ui-label-gap: 6px;
  --ui-button-height: var(--field-h, 40px);
  --ui-panel-radius:var(--ui-radius-panel);
  --ui-control-radius:var(--ui-radius-control);
  --ui-context-radius:var(--ui-radius-card);
  --ui-button-radius:var(--ui-radius-control);
  --ui-field-label-size: clamp(10px, calc(var(--field-h, 40px) - 29.5px), 11px);
  --ui-field-label-color: var(--label-accent);
  --panel-pad-x: 28px;
  --panel-pad-y-top: 28px;
  --panel-pad-y-bottom: 24px;
  --panel-header-gap-after: 16px;
  --header-border:var(--border);
  --input-border:var(--border);
  --input-bg:var(--bg-subtle);
  --toggle-bg:rgba(26, 26, 24, 0.045);
  --tab-bg:rgba(26, 26, 24, 0.04);
  --thead-bg:var(--surface2);
  --tbody-hover:rgba(26, 26, 24, 0.045);
  --ticker-accent:var(--navy-soft);
  --toast-bg:var(--surface);
  --toast-fg:var(--text);
  --toast-border:rgba(176, 142, 87, 0.34);
  --btn-add-fg:var(--bg-surface);
  --tab-active-fg:var(--text);
  --toggle-buy-fg:var(--bg-surface);
  --ui-overline-tracking: 0.1em;
  --ui-strip-title-size: 13px;
  --ui-section-eyebrow-tracking: 0.05em;
  --ui-card-heading-size: 14px;
}

/* Scrollbar — dark ouro; clean discreto */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--gold-dim) var(--bg);
}
html::-webkit-scrollbar{width:4px;height:4px}
html::-webkit-scrollbar-track{background:var(--bg)}
html::-webkit-scrollbar-thumb{background:var(--gold-line);border-radius:2px}
html::-webkit-scrollbar-thumb:hover{background:var(--gold)}
html{
  scrollbar-color:var(--text-dim) var(--bg);
}
html::-webkit-scrollbar-thumb{background:var(--text-dim)}
html::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--text-mid) 70%, var(--text-dim) 30%)}



/* Cabeçalho — scoreboard executiva + KPIs em linha */

/*
 * Faixa executiva — LAYOUT partilhado (clean + dark).
 * Cores, divisores e hover ficam nos blocos [data-theme] abaixo.
 */
.app-header__scoreboard__kpis{
  container-type:inline-size;
  container-name:header-kpis;
  min-width:0;
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)){
  display:flex;
  flex-flow:row nowrap;
  align-items:stretch;
  gap:0;
  width:100%;
  min-width:0;
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
  flex:1 1 0;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:8px clamp(6px, min(1.35vw, 1.2vmin), 20px);
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat:first-child{
  padding-left:0;
}

#headerStatsMaster.header-stats--scoreboard .stat-label{
  font-size:10px;
  letter-spacing:0.1em;
  font-weight:600;
  font-family:'DM Sans','Inter',system-ui,sans-serif;
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-family:'DM Sans','Inter',system-ui,sans-serif;
  transition:filter 0.2s ease,color 0.2s ease;
  white-space:nowrap;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  line-height:1.2;
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
  font-size:clamp(17px, min(2.35vw, 2vmin), 28px);
}

@supports (container-type: inline-size){
  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
    font-size:clamp(13px, min(2.25vw, 0.38rem + 3.65cqi), 28px);
  }
}

#headerStatsMaster.header-stats--scoreboard .header-kpi-pct-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  padding:2px 7px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.04em;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
}

/*
 * PnL não realizado: .stat-value__figure (nowrap) + badge.
 * Base: wrap (tablets / zoom intermédio); desktop ≥761px força nowrap + CQ em `mesa-theme` (stack só coluna estreita).
 */
#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat--patrimonio-unrealized .stat-value:not(.stat-value--pending){
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  align-content:flex-start;
  gap:6px;
  white-space:normal;
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat--patrimonio-unrealized .stat-value .stat-value__figure{
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat--patrimonio-unrealized .stat-value .header-kpi-pct-badge{
  margin-left:0;
  flex:0 0 auto;
  max-width:100%;
  width:fit-content;
  box-sizing:border-box;
}

header.app-header{
  border-bottom:none;
  padding-bottom:0;
}
header.app-header::after{
  display:none;
}
.app-header__scoreboard{
  background:var(--bg-inverse);
  color:var(--bg-surface);
  padding:clamp(26px,4vw,40px) clamp(12px,2.4vw,24px);
  margin-bottom:clamp(8px,1.2vw,14px);
}
.app-header__scoreboard .logo-title{
  color:var(--bg-surface);
  font-size:clamp(26px,2.8vw,32px);
  font-weight:600;
  letter-spacing:0.02em;
  text-shadow:none;
}
.app-header__scoreboard .logo-sub{
  color:rgba(255,255,255,0.52);
}
.app-header__scoreboard .app-header__manual-link{
  color:rgba(255,255,255,0.72);
}
.app-header__scoreboard .app-header__manual-link:hover{
  color:var(--bg-surface);
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat:not(:first-child){
  border-left:1px solid rgba(255,255,255,0.12);
}
#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat:first-child{
  border-left:0;
}

#headerStatsMaster.header-stats--scoreboard .stat-label{
  color:rgba(255,255,255,0.52);
}

#headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
  color:var(--bg-surface);
}

#headerStatsMaster.header-stats--scoreboard .stat:hover .stat-value{
  filter:brightness(1.06);
}

#headerStatsMaster.header-stats--scoreboard .stat-value.up,
#headerStatsMaster.header-stats--scoreboard .stat-value.down{
  color:var(--bg-surface);
}

#headerStatsMaster.header-stats--scoreboard .stat--patrimonio-unrealized .stat-value.up{
  color:var(--positive);
}
#headerStatsMaster.header-stats--scoreboard .stat--patrimonio-unrealized .stat-value.down{
  color:var(--negative);
}
#headerStatsMaster.header-stats--scoreboard .stat--patrimonio-realized .stat-value.up{
  color:var(--positive);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color:var(--positive);
  text-underline-offset:4px;
}
#headerStatsMaster.header-stats--scoreboard .stat--patrimonio-realized .stat-value.down{
  color:var(--negative);
}

#headerStatsMaster.header-stats--scoreboard .header-kpi-pct-badge--gain{
  background:var(--positive-bg);
  color:var(--positive);
  border:1px solid color-mix(in srgb, var(--positive) 28%, transparent);
}
#headerStatsMaster.header-stats--scoreboard .header-kpi-pct-badge--loss{
  background:var(--negative-bg);
  color:var(--negative);
  border:1px solid color-mix(in srgb, var(--negative) 28%, transparent);
}

#headerStatsMaster.header-stats--scoreboard:has(.stat--guest-dashboard) > .stat{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:4px 0 0;
}
#headerStatsMaster.header-stats--scoreboard:has(.stat--guest-dashboard) .stat-label{
  color:rgba(255,255,255,0.55);
}
#headerStatsMaster.header-stats--scoreboard:has(.stat--guest-dashboard) .stat-value--guest-hint{
  color:rgba(255,255,255,0.78)!important;
}
#headerStatsMaster.header-stats--scoreboard .stat-value--pending{
  color:rgba(255,255,255,0.5)!important;
}

/*
 * Notebook / desktop intermédio (901–1399px): mais espaço útil na grelha KPI + tipografia coerente (sem hacks de zoom).
 */
@media (min-width:901px) and (max-width:1399px){
  .app-header__scoreboard{
    gap:clamp(8px, min(1.5vw, 1.35vmin), 22px);
    grid-template-columns:minmax(0,1fr) minmax(0,2.55fr) auto;
  }
  .app-header__scoreboard{
    padding:clamp(18px,2.6vw,32px) clamp(8px,1.4vw,18px);
  }
  .app-header__scoreboard .logo-title{
    font-size:clamp(20px,2.15vw,28px);
  }

  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
    padding:6px clamp(4px, min(0.85vw, 0.75vmin), 14px);
  }

  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-label{
    font-size:9px;
    letter-spacing:0.09em;
  }

  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
    font-size:clamp(13px, min(1.65vw, 1.32vmin), 23px);
    line-height:1.18;
    white-space:nowrap;
  }

  @supports (container-type: inline-size){
    #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
      font-size:clamp(12px, min(1.55vw, 0.34rem + 4.05cqi), 23px);
    }
  }

  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat--patrimonio-unrealized .stat-value:not(.stat-value--pending){
    white-space:normal;
  }

  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat.stat--metric-patrimonio{
    min-height:64px;
  }
  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat.stat--patrimonio-unrealized{
    min-height:70px;
  }
}

/*
 * Desktop (≥761px): clip entre colunas; cada .stat mede largura para CQ.
 * Não realizado: uma linha (nowrap); só empilha valor+% quando a coluna aperta (zoom).
 * Mobile ≤760 mantém grelha 2×2 (sem estas regras).
 */
@media (min-width:761px){
  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
    overflow-x: clip;
    container-type:inline-size;
    container-name:header-stat;
  }

  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat--patrimonio-unrealized .stat-value:not(.stat-value--pending){
    flex-flow:row nowrap;
    align-items:center;
    gap:5px;
  }
}

@supports (container-type: inline-size){
  @container header-stat (max-width:215px){
    #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat.stat--patrimonio-unrealized .stat-value:not(.stat-value--pending){
      flex-flow:column nowrap;
      align-items:flex-start;
      gap:4px;
    }
  }
}

@media (max-width:760px){
  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)){
    flex-wrap:wrap;
    gap:12px 0;
  }
  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
    flex:1 1 calc(50% - 6px);
    min-width:140px;
    border-left:none !important;
    padding-top:8px;
  }
  #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat:nth-child(n+3){
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:14px;
  }
}

/* Botões Nuvem / Sair — header */
.mesa-header-btn{
  border-radius:2px;
  border:1px solid rgba(255,255,255,0.22);
  background:transparent;
  color:rgba(255,255,255,0.78);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.12em;
  box-shadow:none;
  background-image:none;
}
.mesa-header-btn:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.32);
  color:var(--bg-surface);
}

/* Strip — barra de classe no mini-card */
#headerWalletStrip .wallet-mini--executive .wallet-mini__class-bar{
  display:block;
  height:4px;
  width:calc(100% + 22px);
  margin:-10px -11px 10px;
  border-radius:8px 8px 0 0;
  flex-shrink:0;
}
#headerWalletStrip .wallet-mini[data-wallet="acoes"] .wallet-mini__class-bar{background:var(--wallet-bar-acoes)}
#headerWalletStrip .wallet-mini[data-wallet="fiis"] .wallet-mini__class-bar{background:var(--wallet-bar-fiis)}
#headerWalletStrip .wallet-mini[data-wallet="etfs"] .wallet-mini__class-bar{background:var(--wallet-bar-etfs)}
#headerWalletStrip .wallet-mini[data-wallet="bdrs"] .wallet-mini__class-bar{background:var(--wallet-bar-bdrs)}
#headerWalletStrip .wallet-mini[data-wallet="outros"] .wallet-mini__class-bar{background:var(--wallet-bar-outros)}
#headerWalletStrip .wallet-mini__pos-badge{
  background:var(--bg-subtle);
  border-color:var(--border);
  color:var(--text-mid);
}

/* Radar — no clean o cartão é claro: `radar-range__track` em base.css usa rgba branco (some no branco)
   e o fim do preenchimento perde contraste; reforçamos trilha, bordo do preço atual e marcadores. */
.radar-range__track{
  background:color-mix(in srgb, var(--surface3) 88%, var(--text) 12%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.radar-range__fill{
  background:linear-gradient(
    90deg,
    color-mix(in srgb, var(--green) 78%, var(--surface3) 22%),
    color-mix(in srgb, var(--info) 55%, var(--surface3) 45%)
  );
  border-right:2px solid color-mix(in srgb, var(--text) 50%, transparent);
  box-sizing:border-box;
}
.radar-range__marker-target{
  border-color:color-mix(in srgb, var(--text) 70%, transparent);
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.14);
}
.radar-range__marker{
  background:var(--surface);
  border-color:color-mix(in srgb, var(--text) 65%, transparent);
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(252, 252, 250, 0.85);
}

.radar-card__hero{
  background:color-mix(in srgb, var(--surface2) 88%, var(--surface) 12%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.65);
}
.radar-card__hero-kicker{
  color:var(--text-mid);
}
.radar-status{
  font-weight:600;
  letter-spacing:0.06em;
}
.radar-status--inside,
.radar-status--near-max{
  background:color-mix(in srgb, var(--gold-soft) 35%, var(--surface2));
  color:var(--navy-soft);
  border:1px solid color-mix(in srgb, var(--gold) 24%, var(--border));
}
.radar-status--near-min{
  background:var(--green-soft);
  color:color-mix(in srgb, var(--green) 70%, var(--navy));
  border:1px solid color-mix(in srgb, var(--green) 16%, var(--border));
}
.radar-status--low,
.radar-status--high{
  background:var(--red-soft);
  color:color-mix(in srgb, var(--red) 72%, var(--navy));
  border:1px solid color-mix(in srgb, var(--red) 18%, var(--border));
}
.radar-status--no-range{
  background:var(--surface2);
  color:var(--text-dim);
  border:1px solid var(--border);
}

.radar-card-journal{
  background:color-mix(in srgb, var(--surface2) 90%, var(--surface) 10%);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
}
.radar-card-journal__title{
  color:var(--navy-soft);
}
.radar-card-journal__subtitle--up{
  color:color-mix(in srgb, var(--green) 74%, var(--navy-soft));
}
.radar-card-journal__subtitle--down{
  color:color-mix(in srgb, var(--red) 70%, var(--navy-soft));
}
.radar-card-journal__subtitle--neutral{
  color:var(--text-dim);
}
.radar-card-journal__subtitle--move-up{
  color:color-mix(in srgb, var(--green) 74%, var(--navy-soft));
}
.radar-card-journal__subtitle--move-down{
  color:color-mix(in srgb, var(--red) 70%, var(--navy-soft));
}

/* Clean: leitura um pouco mais confortável (contraste + peso suave no Inter) */
.logo-title{
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--navy);
}
.stat-value,
.field input,
.app-select,
.date-display-btn{
  font-weight:500;
}
tbody td{
  font-weight:500;
}
.welcome-name-input{
  background:var(--input-bg);
  border:1px solid var(--input-border);
}
.welcome-name-input:focus{
  border-color:color-mix(in srgb, var(--gold) 55%, var(--input-border));
  box-shadow:0 0 0 3px var(--gold-dim);
}

/* Selects nativos: seta e color-scheme (base ainda usa SVG pensado para fundo escuro) */
.app-select,
.reports-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23314152' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  color-scheme:light;
}
.app-select option,
.reports-select option{
  background-color:var(--surface);
  color:var(--text);
}
.app-select option[value=""],
.reports-select option[value=""]{
  color:var(--text-dim);
}

@media (max-width: 760px){
  .mobile-select-trigger{
    border:1px solid var(--input-border) !important;
    background-color:var(--input-bg) !important;
    color:var(--text) !important;
  }
  .mobile-select-trigger:focus{
    border-color:color-mix(in srgb, var(--gold) 55%, var(--input-border)) !important;
    box-shadow:0 0 0 3px var(--gold-dim) !important;
  }
  .mobile-select-trigger__icon{
    color:var(--text-mid) !important;
    opacity:1 !important;
  }
  .mobile-select-trigger--generic{
    border:1px solid var(--input-border) !important;
    background-color:var(--input-bg) !important;
    color:var(--text) !important;
  }
  .mobile-select-trigger--generic:focus{
    border-color:color-mix(in srgb, var(--gold) 55%, var(--input-border)) !important;
    box-shadow:0 0 0 3px var(--gold-dim) !important;
  }
  .mobile-select-trigger--generic .mobile-select-trigger__icon{
    color:var(--text-mid) !important;
    opacity:1 !important;
  }
}
.mobile-select-sheet__panel{
  border:1px solid var(--border2) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow) !important;
}
.mobile-select-sheet__title{
  color:var(--text) !important;
}
.mobile-select-sheet__header{
  border-bottom:1px solid var(--border2) !important;
}
.mobile-select-sheet--generic .mobile-select-sheet__header{
  border-bottom:0 !important;
}
.mobile-select-sheet--generic .mobile-select-sheet__options{
  padding-top:12px !important;
}
.mobile-select-sheet__close{
  border:1px solid var(--border2) !important;
  background:var(--panel-inset-bg) !important;
  color:var(--text-mid) !important;
}
.mobile-select-option{
  border:1px solid var(--border) !important;
  background:var(--panel-inset-bg) !important;
  color:var(--text) !important;
}
.mobile-select-option:hover,
.mobile-select-option:focus{
  background:var(--surface3) !important;
  border-color:color-mix(in srgb, var(--gold) 28%, var(--border)) !important;
  color:var(--text) !important;
}
/* base.css refinamento usa #f0e2b7 !important no hover e gradiente champagne no .active */
.mobile-select-option.active{
  border-color:color-mix(in srgb, var(--gold) 36%, var(--border2)) !important;
  background:linear-gradient(
    135deg,
    color-mix(in srgb, var(--navy-soft) 12%, var(--surface)) 0%,
    var(--surface2) 100%
  ) !important;
  color:var(--text) !important;
  font-weight:700 !important;
  margin:0 0 8px !important;
  box-shadow:0 1px 4px rgba(22, 28, 36, 0.06) !important;
}
.mobile-select-option.active .mobile-select-option__check{
  border-color:var(--border2) !important;
  background:var(--surface) !important;
  color:var(--navy) !important;
}

/* Calendário: no clean o painel escuro herdava --text escuro nas células (ilegível) */
.calendar-modal{
  background:rgba(17, 24, 39, 0.42);
}
.calendar-card{
  background:var(--surface);
  border:1px solid var(--border2);
  box-shadow:var(--shadow);
}
.calendar-close{
  border:1px solid var(--border2);
  background:var(--panel-inset-bg);
  color:var(--text-mid);
}
.calendar-close:hover{
  background:var(--surface3);
  color:var(--text);
}
.calendar-nav-btn,
.calendar-footer-btn{
  border:1px solid var(--border2);
  background:var(--surface2);
  color:var(--text-mid);
}
.calendar-nav-btn:hover,
.calendar-footer-btn:hover{
  border-color:color-mix(in srgb, var(--gold) 42%, var(--border2));
  background:var(--gold-dim);
  color:var(--text);
}
.calendar-weekdays span{
  color:var(--text-dim);
}
.calendar-day{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
}
.calendar-day:hover{
  border-color:color-mix(in srgb, var(--gold) 40%, var(--border2));
  background:var(--gold-dim);
  color:var(--text);
}
.calendar-day.muted{
  opacity:0.45;
  color:var(--text-dim);
}
.calendar-day.today{
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--gold) 48%, var(--border2));
  color:var(--gold-hover);
}
.calendar-day.selected{
  background:linear-gradient(135deg, var(--navy-soft), var(--navy));
  color:var(--ivory);
  border-color:transparent;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
}
.calendar-footer-btn.ghost{
  background:var(--surface2);
}
body{
  font-weight:450;
  letter-spacing:0.01em;
  background:var(--bg) !important;
  background-image:linear-gradient(180deg, #F1F2EF 0%, var(--bg) 42%, var(--bg) 100%) !important;
  background-color:var(--bg) !important;
  background-attachment:fixed !important;
}
.container{max-width:1120px;padding:34px 20px 28px}
header{
  margin-bottom:34px;
  padding-bottom:26px;
  border-bottom:1px solid var(--header-border);
}
header::after{
  width:180px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 85%, transparent), transparent);
}
header::after{
  background:linear-gradient(
    90deg,
    color-mix(in srgb, var(--gold) 42%, transparent) 0%,
    rgba(31, 44, 58, 0.22) 55%,
    transparent 100%
  );
}
header{
  border-bottom-color:color-mix(in srgb, var(--border2) 88%, var(--navy) 12%);
}
.logo-sub{
  color:var(--text-mid);
  font-weight:500;
  letter-spacing:0.28em;
}
.welcome-name-wrap{
  margin-top:4px;
}
.logo-title{
  font-size:42px;
  line-height:1;
  color:var(--text);
  letter-spacing:0.2px;
  text-shadow:none;
  text-align:left;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.logo-sub{
  margin-top:10px;
  margin-bottom:20px;
  font-size:10px;
  letter-spacing:3.2px;
  color:var(--text-dim);
  text-align:left;
  width:100%;
  box-sizing:border-box;
}
.stat{
  background:var(--panel-outer-bg);
  border:var(--panel-outer-border);
  border-radius:var(--panel-inset-radius);
  padding:13px 16px;
  box-shadow:var(--shadow);
}
.stat-value.up{color:var(--green)}
.form-card,
.summary-card,
.realized-card,
.table-wrap{
  background:var(--panel-outer-bg);
  border:var(--panel-outer-border);
  box-shadow:var(--shadow);
}
.form-card{
  border-radius:var(--panel-outer-radius);
  padding:24px;
}
.form-card::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  left:auto;
  width:168px;
  height:76px;
  pointer-events:none;
  border-radius:0 var(--panel-outer-radius) 0 0;
  background:var(--panel-glow);
  z-index:0;
  opacity:1;
}
.form-card > *{position:relative;z-index:1}
/* Com autocomplete aberto, a 1ª linha precisa ficar acima das seguintes (hint FREE / Data) */
#mainFormCard.form-card:has(#acList.open) .form-row.cols-3{
  z-index:400 !important;
}
.radar-form:has(#radarAcList.open) .radar-grid{
  position:relative;
  z-index:400 !important;
}
.radar-form:has(#radarAcList.open){
  overflow:visible;
}
.field input,
.toggle-wrap,
.tab,
.context-card,
.realized-item,
.btn-ghost,
.refresh-btn{
  border-color:var(--input-border);
}
.field input{
  background:var(--input-bg);
}
.context-card{
  background:var(--panel-inset-bg);
  border:var(--panel-inset-border);
}
.field input:focus{
  border-color:rgba(201,178,122,0.9);
  box-shadow:0 0 0 4px rgba(201,178,122,0.08);
}
.field input:focus{
  border-color:color-mix(in srgb, var(--navy-soft) 55%, var(--gold) 25%);
  box-shadow:0 0 0 4px rgba(29, 42, 58, 0.09);
}
.toggle-wrap{
  background:var(--toggle-bg);
  border-radius:14px;
}
.toggle-btn.buy.active{
  background:linear-gradient(135deg, rgba(201,178,122,0.16), rgba(201,178,122,0.08));
  color:var(--toggle-buy-fg);
}
.toggle-btn.buy.active{
  background:linear-gradient(135deg, color-mix(in srgb, var(--navy) 10%, var(--surface)), color-mix(in srgb, var(--navy-soft) 8%, var(--surface2)));
  border-color:color-mix(in srgb, var(--gold) 38%, var(--border2));
  color:var(--navy);
}
.toggle-btn.sell.active{
  background:rgba(128,128,128,0.12);
  color:var(--text-mid);
}
.toggle-btn.sell.active{
  background:rgba(0,0,0,0.06);
}
.btn-add{
  background:linear-gradient(135deg, #ece2c4, #c9b27a);
  color:var(--btn-add-fg);
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
}
.btn-add{
  background:linear-gradient(135deg, var(--navy-soft) 0%, var(--navy) 100%);
  color:var(--btn-add-fg);
  box-shadow:0 10px 26px rgba(29, 42, 58, 0.22), 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent);
}
.btn-add:hover:not(:disabled){
  filter:brightness(1.05);
  box-shadow:0 12px 28px rgba(29, 42, 58, 0.26), 0 0 0 1px color-mix(in srgb, var(--gold-hover) 45%, transparent);
}
.btn-seleto{
  background:linear-gradient(135deg, var(--navy-soft) 0%, var(--navy) 100%);
  color:var(--btn-add-fg);
  box-shadow:0 10px 26px rgba(29, 42, 58, 0.2), 0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent);
}
.btn-seleto:hover:not(:disabled){
  filter:brightness(1.025);
}
.btn-seleto-ghost:hover:not(:disabled){
  filter:brightness(1.02);
}
.tab:not(.active):hover:not(:disabled){
  filter:brightness(1.04);
}
.toggle-btn:hover:not(:disabled){
  filter:brightness(1.04);
}

.confirm-btn-danger{
  background:linear-gradient(135deg, #e87084, #c73d52);
  color:#fff;
  box-shadow:0 8px 22px rgba(199, 61, 82, 0.32);
}
.confirm-btn-danger{
  background:linear-gradient(135deg, #c73d52, #8f2a3a);
  color:#fff;
  box-shadow:0 8px 22px rgba(199, 61, 82, 0.22);
}
.tabs{
  gap:10px;
  margin-bottom:18px;
}
.tab{
  border-radius:14px;
  background:var(--tab-bg);
}
.tab.active{
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(201,178,122,0.10));
  color:var(--tab-active-fg);
  border-color:rgba(201,178,122,0.35);
  box-shadow:none;
}
.tab.active{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  border-color:color-mix(in srgb, var(--gold) 34%, var(--border2));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent);
}
/* Mesa de Decisão — clean: inativos claros; ativo navy (só o card .active) */
.mesa-decision-deck{
  background:linear-gradient(165deg, var(--surface) 0%, var(--surface2) 100%);
  box-shadow:0 14px 40px rgba(22, 28, 36, 0.065);
}
.mesa-decision-deck .tab:not(.active){
  background:linear-gradient(165deg, color-mix(in srgb, var(--surface2) 96%, var(--navy) 2%), var(--surface));
  border-color:var(--border);
  box-shadow:0 4px 14px rgba(16, 24, 32, 0.055);
  color:var(--navy);
  transition:background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.mesa-decision-deck .tab:not(.active) .tab__title{
  color:var(--navy);
  font-weight:650;
}
.mesa-decision-deck .tab:not(.active) .tab__kicker{
  color:var(--text-mid);
  font-weight:500;
}
.mesa-decision-deck .tab:not(.active) .tab__eyebrow{
  color:var(--text-dim);
}
.mesa-decision-deck #tabRadarSocio:not(.active) .tab__eyebrow{
  color:var(--text-mid);
}
.mesa-decision-deck .tab.active{
  background:#1f2c3a;
  border:1px solid rgba(176, 142, 87, 0.45);
  box-shadow:0 10px 28px rgba(15, 22, 30, 0.2), 0 0 0 1px rgba(176, 142, 87, 0.22);
  color:#f7f4ee;
  transition:background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.mesa-decision-deck .tab.active:hover{
  background:#26384b;
  border-color:rgba(176, 142, 87, 0.52);
  box-shadow:0 12px 32px rgba(15, 22, 30, 0.24), 0 0 0 1px rgba(176, 142, 87, 0.28);
}
.mesa-decision-deck .tab.active .tab__title{
  color:#f7f4ee;
  font-weight:700;
}
.mesa-decision-deck .tab.active .tab__kicker{
  color:#d8d2c8;
  font-weight:500;
}
.mesa-decision-deck .tab.active .tab__eyebrow{
  color:color-mix(in srgb, #d8d2c8 82%, transparent);
}
.mesa-decision-deck .tab.active .tab__pin{
  color:var(--navy);
  border:1px solid rgba(176, 142, 87, 0.38);
  background:linear-gradient(180deg, #e7dbc2, color-mix(in srgb, #e7dbc2 88%, #f5f0e6));
  box-shadow:0 1px 6px rgba(0, 0, 0, 0.18);
  padding:3px 9px;
  min-height:20px;
}
.mesa-decision-deck .tab.active .tab__title .seleto-inline-badge{
  border-color:rgba(176, 142, 87, 0.5);
  background:linear-gradient(180deg, #e7dbc2, color-mix(in srgb, #e7dbc2 90%, #fff));
  color:var(--navy);
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.12);
}
.mesa-decision-deck .tab.active .mesa-decision-deck__hero-preview{
  border-top-color:rgba(231, 219, 194, 0.28);
}
.mesa-decision-deck .tab.active .mesa-decision-deck__hero-lead{
  color:#d8d2c8;
}
.mesa-decision-deck .tab.active .mesa-decision-deck__hero-note{
  color:color-mix(in srgb, #d8d2c8 75%, transparent);
}
.mesa-decision-deck .tab.active .mesa-decision-deck__hero-bars-legend{
  color:color-mix(in srgb, #d8d2c8 80%, transparent);
}
.mesa-decision-deck .tab.active .mesa-decision-deck__hero-tagline{
  color:#e7dbc2;
}
.mesa-decision-deck .tab.active .mesa-decision-deck__hero-chip{
  border-color:rgba(176, 142, 87, 0.55);
  background:linear-gradient(180deg, #e7dbc2, color-mix(in srgb, #e7dbc2 88%, #fff));
  color:var(--navy);
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.16);
}
.mesa-decision-deck .tab.active .mesa-decision-deck__hero-bars span{
  border-color:rgba(231, 219, 194, 0.42);
  background:linear-gradient(180deg, color-mix(in srgb, #e7dbc2 58%, transparent), color-mix(in srgb, #e7dbc2 24%, transparent));
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.mesa-decision-deck .tab:not(.active) .mesa-decision-deck__hero-chip{
  border-color:color-mix(in srgb, var(--gold) 40%, var(--border));
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold-soft) 70%, var(--surface)), var(--surface2));
  color:var(--navy);
  box-shadow:0 1px 3px rgba(17, 24, 39, 0.05);
}
.mesa-decision-deck .tab:focus-visible{
  outline:2px solid color-mix(in srgb, var(--navy) 42%, transparent);
  outline-offset:3px;
}
.mesa-decision-deck .tab.active:focus-visible{
  outline-color:#e7dbc2;
}

/* Patrimônio por carteira: título do painel — no clean `--ivory` = `--surface` → texto invisível */
.wallet-panel__title{
  color:var(--navy);
}
/* seleto-banner: mesmo problema — --ivory = branco no tema claro → título invisível */
.seleto-banner__title{
  color:var(--navy);
}
.wallet-panel__caret{
  border-color:var(--border2);
  background:var(--surface2);
}
.wallet-panel__caret::after{
  border-right-color:var(--navy-soft);
  border-bottom-color:var(--navy-soft);
}
.wallet-panel__summary:hover .wallet-panel__caret{
  background:color-mix(in srgb, var(--navy) 7%, var(--surface2));
  border-color:var(--border2);
}
/* Patrimônio por carteira: shell off-white vs cards em --surface2 (evita chapado com .summary-card) */
.wallet-panel{
  background:var(--panel-shell-bg);
  border:1px solid color-mix(in srgb, var(--border2) 82%, var(--navy) 10%);
  box-shadow:
    0 10px 32px rgba(22, 28, 36, 0.062),
    0 0 0 1px color-mix(in srgb, var(--gold) 11%, transparent);
}
.wallet-panel__body{
  background:transparent;
  border-top:none;
}
/* Patrimônio — cartões resumo + strip: superfície um pouco mais clara, bordo e sombra alinhados */
.summary-card:not(.radar-card),
.wallet-strip .wallet-mini{
  background:color-mix(in srgb, #ffffff 58%, var(--surface2) 42%);
  border:1px solid color-mix(in srgb, var(--border2) 88%, var(--navy) 12%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 28px rgba(22, 28, 36, 0.072);
}
.header-stats--master:not(.header-stats--scoreboard) > .stat{
  background:color-mix(in srgb, #ffffff 58%, var(--surface2) 42%);
  border:1px solid color-mix(in srgb, var(--border2) 88%, var(--navy) 12%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 18px rgba(22, 28, 36, 0.055);
}
.header-stats--master:not(.header-stats--scoreboard) .stat-label{
  color:var(--navy-soft);
  font-weight:600;
}
.header-stats--master:not(.header-stats--scoreboard) .stat-value.up{
  color:color-mix(in srgb, var(--green) 56%, var(--text-mid));
}
.header-stats--master:not(.header-stats--scoreboard) .stat-value.down{
  color:color-mix(in srgb, var(--red) 52%, var(--text-mid));
}

/*
 * Patrimônio (clean): 3 filas — (1) métricas com largura máx.; (2) Carteiras full-width; (3) grelha de mini-cards full-width.
 * Tipografia: Inter na UI; serif só `.logo-title`.
 */
.app-header .header-dashboard--patrimonio-executive{
  align-items:flex-start;
  gap:clamp(14px, 1.65vw, 22px);
  margin-top:8px;
  width:100%;
}
.header-patrimonio-executive__metrics{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.header-patrimonio-executive__wallets{
  align-self:stretch;
}
.header-patrimonio-executive__wallets,
.header-patrimonio-executive__wallets .wallet-strip-wrap{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
@media (max-width:760px){
  .header-patrimonio-executive__metrics{
    width:100%;
  }
}

@media (min-width:761px) and (max-width:1023px){
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard):not(:has(.stat--guest-dashboard)){
    display:grid;
    align-items:stretch;
    gap:10px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard):not(:has(.stat--guest-dashboard)) > .stat:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}

@media (min-width:1024px){
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard):not(:has(.stat--guest-dashboard)){
    display:grid;
    align-items:stretch;
    gap:11px;
  }
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard):not(:has(.stat--guest-dashboard)):has(> .stat:nth-child(4):last-child){
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard):not(:has(.stat--guest-dashboard)):has(> .stat:nth-child(3):last-child){
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard):not(:has(.stat--guest-dashboard)):has(> .stat:nth-child(2):last-child){
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:761px){
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard) > .stat.stat--metric-patrimonio{
    min-height:70px;
    padding:11px 12px;
    gap:6px;
    justify-content:flex-start;
    border-radius:11px;
  }
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard) .stat-label{
    font-size:9.5px;
    letter-spacing:0.07em;
    font-weight:600;
    font-family:'Inter', system-ui, sans-serif;
  }
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard) .stat-value{
    font-size:15px;
    font-weight:600;
    line-height:1.22;
    font-variant-numeric:tabular-nums;
    font-family:'Inter', system-ui, sans-serif;
  }
  #headerStatsMaster.header-stats--master:not(.header-stats--scoreboard) .stat-pct{
    font-size:10px;
    font-weight:500;
    opacity:0.94;
    font-family:'Inter', system-ui, sans-serif;
  }
}

/*
 * Carteiras (header, clean): título + subtítulo + microcopy; grelha 4/2; mini-cards executivos.
 */
@media (min-width:761px){
  #headerWalletStrip .wallet-strip-details{
    width:100%;
  }
  #headerWalletStrip .wallet-strip__heading{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    gap:0;
  }
  #headerWalletStrip .wallet-strip__title-stack{
    gap:4px;
    width:100%;
    max-width:100%;
  }
  #headerWalletStrip .wallet-strip-details__summary.wallet-strip__heading{
    margin:0 0 8px;
    padding:0;
    width:100%;
  }
  #headerWalletStrip .wallet-strip__title{
    font-family:'Inter', system-ui, sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:-0.012em;
    color:var(--navy);
    text-transform:none;
    line-height:1.25;
  }
  #headerWalletStrip .wallet-strip__subtitle{
    font-size:11px;
    font-weight:500;
    letter-spacing:0.02em;
    color:color-mix(in srgb, var(--text-mid) 85%, var(--navy) 15%);
    line-height:1.38;
    margin-top:2px;
  }
  #headerWalletStrip .wallet-strip__microcopy{
    margin-top:6px;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    max-width:100%;
    font-size:10.5px;
    font-weight:400;
    line-height:1.48;
    letter-spacing:0.018em;
    color:color-mix(in srgb, var(--text-mid) 94%, var(--navy) 6%);
  }
  #headerWalletStrip .wallet-strip-details__body{
    gap:10px;
    padding-top:6px;
  }
  #headerWalletStrip .wallet-strip .wallet-mini--executive{
    display:flex;
    flex-direction:column;
    padding:10px 11px 10px;
    gap:0;
    min-height:184px;
    height:100%;
    align-self:stretch;
    box-sizing:border-box;
    border-radius:8px;
    box-shadow:var(--shadow-sm);
  }
  #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-head{
    flex:0 0 auto;
    min-height:48px;
    padding-bottom:8px;
    margin-bottom:8px;
    border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent);
    gap:3px;
    box-sizing:border-box;
  }
  #headerWalletStrip .wallet-mini--executive .wallet-mini__kicker{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--navy);
    margin-bottom:0;
  }
  #headerWalletStrip .wallet-mini__exec-sub{
    font-size:10.5px;
    font-weight:500;
    letter-spacing:0.02em;
    color:color-mix(in srgb, var(--text-mid) 90%, var(--navy) 10%);
    min-height:1.35em;
    white-space:nowrap;
  }
  #headerWalletStrip .wallet-mini__exec-metrics{
    flex:1 1 auto;
    display:grid;
    grid-template-rows:repeat(3, minmax(26px, 1fr));
    align-items:center;
    gap:0;
    min-height:78px;
  }
  #headerWalletStrip .wallet-mini--executive .wallet-mini__kv{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:8px;
    min-height:26px;
    font-size:11px;
  }
  #headerWalletStrip .wallet-mini--executive .wallet-mini__kv span:first-child{
    letter-spacing:0.04em;
    font-weight:600;
    font-size:9.5px;
    color:color-mix(in srgb, var(--label-accent) 88%, var(--text-mid) 12%);
    min-width:0;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #headerWalletStrip .wallet-mini--executive .wallet-mini__kv span:last-child{
    white-space:nowrap;
    text-align:right;
    justify-self:end;
    max-width:100%;
    font-size:10.5px;
    line-height:1.25;
  }
  #headerWalletStrip .wallet-mini--executive .wallet-mini__pct{
    font-size:9.5px;
  }
}

@media (max-width:760px){
  #headerWalletStrip .wallet-strip__title{
    font-size:14px;
    letter-spacing:-0.01em;
  }
  #headerWalletStrip .wallet-strip__microcopy{
    font-size:10px;
    max-width:100%;
  }
  #headerWalletStrip .wallet-mini--executive .wallet-mini__exec-head{
    padding-bottom:7px;
    margin-bottom:7px;
  }
}

@media (min-width: 761px) and (max-width: 1023px){
  #headerWalletStrip .wallet-strip:not(.wallet-strip--free-teaser):not(.wallet-strip--guest-login){
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    align-items:stretch;
    width:100%;
  }
  #headerWalletStrip .wallet-strip:not(.wallet-strip--free-teaser):not(.wallet-strip--guest-login):has(> .wallet-mini:nth-child(5):last-child) .wallet-mini:nth-child(5){
    grid-column:1 / -1;
  }
}

@media (min-width: 1024px){
  #headerWalletStrip .wallet-strip:not(.wallet-strip--free-teaser):not(.wallet-strip--guest-login){
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    align-items:stretch;
    width:100%;
  }
  #headerWalletStrip .wallet-strip:not(.wallet-strip--free-teaser):not(.wallet-strip--guest-login):has(> .wallet-mini:nth-child(5):last-child) .wallet-mini:nth-child(5){
    grid-column:1 / -1;
  }
}
.wallet-mini__pl--gain{
  color:color-mix(in srgb, var(--green) 58%, var(--text-mid)) !important;
}
.wallet-mini__pl--loss{
  color:color-mix(in srgb, var(--red) 54%, var(--text-mid)) !important;
}
.wallet-mini__kv .wallet-mini__pl--gain{
  color:color-mix(in srgb, var(--green) 58%, var(--text-mid)) !important;
}
.wallet-mini__kv .wallet-mini__pl--loss{
  color:color-mix(in srgb, var(--red) 54%, var(--text-mid)) !important;
}
.wallet-panel__meta .wallet-mini__pl--gain{
  color:color-mix(in srgb, var(--green) 58%, var(--text-mid)) !important;
}
.wallet-panel__meta .wallet-mini__pl--loss{
  color:color-mix(in srgb, var(--red) 54%, var(--text-mid)) !important;
}
.realized-card{
  background:var(--panel-shell-bg);
  border-color:color-mix(in srgb, var(--border2) 76%, transparent);
  box-shadow:0 10px 30px rgba(22, 28, 36, 0.058);
}
.mesa-decision-deck .tab:not(.active) .tab__title .seleto-inline-badge{
  border-color:color-mix(in srgb, var(--gold) 40%, var(--border2));
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--surface)), color-mix(in srgb, var(--gold) 6%, var(--surface2)));
  color:var(--text);
  font-weight:700;
  letter-spacing:0.09em;
}
.seleto-inline-badge{
  border-color:color-mix(in srgb, var(--gold) 38%, var(--border2));
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, var(--surface)), color-mix(in srgb, var(--gold) 5%, var(--surface2)));
  color:var(--text);
}

#tabRadarSocio.is-premium-disabled,
#tabCdiSocio.is-premium-disabled,
#tabPatrimonioSocio.is-premium-disabled{
  border-color:color-mix(in srgb, var(--gold) 28%, var(--border)) !important;
  background:linear-gradient(145deg, color-mix(in srgb, var(--gold) 7%, var(--surface)), var(--surface2)) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent), 0 4px 14px rgba(16,24,32,0.05) !important;
  color:var(--text-mid) !important;
}
#tabRadarSocio.is-premium-disabled .seleto-inline-badge,
#tabCdiSocio.is-premium-disabled .seleto-inline-badge,
#tabPatrimonioSocio.is-premium-disabled .seleto-inline-badge{
  border-color:color-mix(in srgb, var(--gold) 35%, var(--border2)) !important;
  background:color-mix(in srgb, var(--gold) 12%, var(--surface)) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
#tabRadarSocio.is-premium-disabled:hover,
#tabCdiSocio.is-premium-disabled:hover,
#tabPatrimonioSocio.is-premium-disabled:hover{
  border-color:color-mix(in srgb, var(--gold) 34%, var(--border2)) !important;
  background:linear-gradient(145deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface2)) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent), 0 6px 18px rgba(16, 24, 32, 0.06) !important;
  color:var(--text-mid) !important;
}

@media (max-width:760px){
  .cdi-metric__value{
    font-size:clamp(17px,4.9vw,21px);
  }
  .cdi-card__sub{
    font-size:10.5px;
    line-height:1.48;
    font-weight:500;
    color:var(--text-mid);
  }
}
.cdi-metric__value.up,
.cdi-metric__sub.up{
  color:color-mix(in srgb, var(--green) 72%, var(--text-mid));
}
.cdi-metric__value.down,
.cdi-metric__sub.down{
  color:color-mix(in srgb, var(--red) 68%, var(--text-mid));
}

/* Comparativo CDI — clean: cartão sem --panel-shell-bg (mistura superfície + bege antigo); alinhado a --bg-surface */
.cdi-card{
  background:var(--bg-surface);
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}
/* Comparativo CDI — clean: contraste (segmentos, labels, microcopy, refresh) */
.cdi-card__title{
  color:var(--navy);
  font-weight:700;
}
.cdi-card__sub{
  color:var(--text-mid);
  font-weight:500;
}
.cdi-metric__label{
  color:var(--navy);
  font-weight:800;
}
.cdi-config .field label{
  color:var(--ui-field-label-color, var(--label-accent));
  font-weight:var(--ui-field-label-weight, 600);
}
.cdi-type-panel__summary{
  color:var(--navy);
  font-weight:800;
}
.cdi-type-panel__meta{
  color:var(--text-mid);
  font-weight:600;
}
.cdi-row__label{
  color:var(--navy);
  font-weight:700;
}
.cdi-row__lot-meta{
  color:var(--text-mid);
  font-weight:600;
}
.cdi-row__ticker{
  color:var(--navy-soft);
}
.cdi-mode-toggle{
  background:var(--toggle-bg);
  border-color:var(--input-border);
}
.cdi-mode-toggle button{
  color:var(--text-mid);
  font-weight:700;
}
.cdi-mode-toggle button.active{
  /* Mesmo padrão dos segmentos Livro `.toggle-btn.buy.active` — navy + superfície, não --gold-soft */
  background:linear-gradient(135deg, color-mix(in srgb, var(--navy) 10%, var(--surface)), color-mix(in srgb, var(--navy-soft) 8%, var(--surface2)));
  color:var(--navy);
  font-weight:800;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 38%, var(--border2));
}
.cdi-config-note{
  color:var(--text-mid);
  font-weight:500;
  background:var(--info-soft);
  border-color:color-mix(in srgb, var(--accent) 18%, var(--border));
}
.cdi-how-to-read{
  border-color:var(--border);
  background:var(--bg-surface);
}
.cdi-how-to-read__summary{
  color:var(--navy);
  font-weight:700;
}
.cdi-how-to-read__body{
  border-top-color:var(--border);
}
.cdi-how-to-read__body p,
.cdi-how-to-read__body ul{
  color:var(--text-mid);
  font-weight:500;
}
.cdi-type-panel__rows{
  /* --surface3 no clean resolve para --border-subtle (#F0EEE9): evitar “faixa bege”; usar --bg-subtle aprovado */
  background:var(--bg-subtle);
}
.cdi-status{
  color:var(--text-mid);
  font-weight:600;
  background:var(--bg-subtle);
  border-color:var(--border);
}
.cdi-status.loading{
  color:var(--navy);
  border-color:color-mix(in srgb, var(--accent) 32%, var(--border));
  background:var(--info-soft);
}
#view-cdi .cdi-card__title-row .refresh-btn.refresh-btn--patrimonio-toolbar.is-premium-disabled{
  color:var(--text-mid);
  border-color:var(--border);
  opacity:0.9;
  cursor:not-allowed;
}

#view-ops thead th{
  color:var(--text-mid) !important;
  background:color-mix(in srgb, var(--surface2) 70%, var(--surface)) !important;
  border-bottom:1px solid var(--border) !important;
}
#view-ops tbody tr{
  border-bottom-color:color-mix(in srgb, var(--border) 85%, transparent) !important;
}
#view-ops tbody tr:hover{
  background:color-mix(in srgb, var(--surface2) 55%, var(--surface)) !important;
}
#view-ops .tag-op--buy{
  border:1px solid color-mix(in srgb, var(--gold) 28%, var(--border2));
  background:color-mix(in srgb, var(--gold) 10%, var(--surface)) !important;
  color:var(--text) !important;
}
#view-ops .tag-op--sell-profit{
  border:1px solid color-mix(in srgb, var(--green) 22%, var(--border));
  background:color-mix(in srgb, var(--green) 8%, var(--surface2)) !important;
  color:color-mix(in srgb, var(--green) 78%, var(--text)) !important;
}
#view-ops .tag-op--sell-loss{
  border:1px solid color-mix(in srgb, var(--red) 20%, var(--border));
  background:color-mix(in srgb, var(--red) 7%, var(--surface2)) !important;
  color:color-mix(in srgb, var(--red) 78%, var(--text-mid)) !important;
}
#view-ops .tag-op--sell-flat{
  border:1px solid color-mix(in srgb, var(--border2) 90%, var(--text-mid));
  background:color-mix(in srgb, var(--text-mid) 8%, var(--surface2)) !important;
  color:var(--text-mid) !important;
}
#view-ops .btn-edit{
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  color:var(--text-mid) !important;
}
#view-ops .btn-edit:hover:not(:disabled){
  border-color:color-mix(in srgb, var(--gold) 28%, var(--border2)) !important;
  color:var(--text) !important;
}
#view-ops .btn-del{
  border-color:color-mix(in srgb, var(--red) 22%, var(--border)) !important;
  color:color-mix(in srgb, var(--red) 88%, var(--text-mid)) !important;
}
#view-ops .btn-del:hover:not(:disabled){
  background:color-mix(in srgb, var(--red) 8%, var(--surface)) !important;
}
.section-title,
.form-title,
.realized-title,
.price-label,
.card-label,
.field label,
.stat-label{
  color:var(--label-accent);
}
thead tr{
  background:var(--thead-bg);
}
tbody tr:hover{
  background:var(--tbody-hover);
}
.ticker-cell,
.ac-ticker,
.card-ticker,
.realized-ticker{
  color:var(--ticker-accent);
}
.card-ticker{
  font-size:30px;
}
.summary-card{
  border-radius:var(--panel-outer-radius);
}
.summary-card::after{
  opacity:0.5;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,178,122,0.35), transparent);
}
.toast{
  background:var(--toast-bg);
  border-color:var(--toast-border);
  color:var(--toast-fg);
  box-shadow:0 10px 24px rgba(0,0,0,0.24);
}
.toast{
  box-shadow:0 10px 32px rgba(17, 24, 39, 0.12);
}
.summary-card::after{
  background:linear-gradient(90deg, transparent, rgba(29, 42, 58, 0.14), transparent);
}
.summary-card:hover{
  border-color:color-mix(in srgb, var(--navy-soft) 32%, var(--border2)) !important;
  box-shadow:0 14px 38px rgba(22, 28, 36, 0.08) !important;
}
.mesa-trial-active-banner{
  border-color:var(--border2);
}
.mesa-decision-deck::before{
  opacity:0.28;
}
.ticker-cell{
  color:var(--ticker-accent);
}
.context-value.up{
  color:var(--green);
}
.summary-card__hint--chronology{
  background:rgba(53, 92, 138, 0.06);
  border-color:rgba(17, 24, 39, 0.1);
}
.cdi-type-panel__summary::after{
  border-right-color:var(--navy-soft);
  border-bottom-color:var(--navy-soft);
}
.empty-text{
  letter-spacing:1.2px;
}
@media (max-width: 640px){
  .logo-title{font-size:34px}
  .container{padding:24px 14px 22px}
}


/* =============================================
   UX FIX v2 — Formulário Principal Alinhado
   ============================================= */

#mainFormCard.form-card {
  padding: var(--panel-pad-y-top) var(--panel-pad-x) var(--panel-pad-y-bottom) !important;
  border-radius: var(--panel-outer-radius) !important;
}

/* Grid das linhas */
#mainFormCard .form-row {
  display: grid !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  align-items: end !important;
}
#mainFormCard .form-row.cols-3 {
  grid-template-columns: 1.2fr 1fr 1fr !important;
}
#mainFormCard .form-row.cols-2 {
  grid-template-columns: 1fr 1fr !important;
}

/* Labels de campo — alinhados aos tokens --ui-field-label-* */
#mainFormCard .field > label {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  font-size: var(--ui-field-label-size, 10.5px) !important;
  letter-spacing: var(--ui-field-label-tracking, 0.1em) !important;
  font-weight: var(--ui-field-label-weight, 600) !important;
  color: var(--ui-field-label-color, var(--label-accent)) !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
  line-height: var(--ui-field-label-line-height, 1.1) !important;
  white-space: nowrap !important;
  font-family: 'Inter', sans-serif !important;
}
#mainFormCard .field > label.field-label--asset-type{
  white-space:normal !important;
}

/* O campo .field não deve ter altura forçada */
#mainFormCard .field {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ui-label-gap, 6px) !important;
  min-width: 0 !important;
}

/* ---- Controles: todos com var(--field-h) ---- */

/* Inputs */
#mainFormCard input[type="text"],
#mainFormCard input[type="number"] {
  height: var(--field-h) !important;
  min-height: var(--field-h) !important;
  max-height: var(--field-h) !important;
  padding: 0 14px !important;
  border-radius: var(--ui-radius-control, 12px) !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield !important;
  border: 1px solid var(--input-border) !important;
  background: var(--input-bg) !important;
}
#mainFormCard input[type="text"]:focus,
#mainFormCard input[type="number"]:focus {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--input-border)) !important;
  box-shadow: 0 0 0 3px var(--gold-dim) !important;
}
#mainFormCard input[type="text"]:focus,
#mainFormCard input[type="number"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
#mainFormCard input[type="number"]::-webkit-inner-spin-button,
#mainFormCard input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

/* Date picker */
#mainFormCard .date-display-btn,
#dateDisplayBtn {
  height: var(--field-h) !important;
  min-height: var(--field-h) !important;
  max-height: var(--field-h) !important;
  padding: 0 14px !important;
  border-radius: var(--ui-radius-control, 12px) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Select */
#mainFormCard .app-select,
#fAssetType,
#reportsYearSelect.app-select {
  height: var(--field-h) !important;
  min-height: var(--field-h) !important;
  max-height: var(--field-h) !important;
  padding: 0 40px 0 14px !important;
  border-radius: var(--ui-radius-control, 12px) !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-position: right 12px center !important;
  border: 1px solid var(--input-border) !important;
  background-color: var(--input-bg) !important;
}

/* Toggle wrapper */
#mainFormCard .toggle-wrap,
.form-row .toggle-wrap {
  height: var(--field-h) !important;
  min-height: var(--field-h) !important;
  max-height: var(--field-h) !important;
  border-radius: var(--ui-radius-control, 12px) !important;
  overflow: hidden !important;
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Toggle buttons */
#mainFormCard .toggle-btn,
.form-row .toggle-btn {
  flex: 1 !important;
  height: 100% !important;
  min-height: unset !important;
  max-height: unset !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Nota */
#fNote {
  height: var(--field-h) !important;
  min-height: var(--field-h) !important;
  max-height: var(--field-h) !important;
}

/* Context card */
#formContext.context-card {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  min-height: 40px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--text-dim) !important;
  background: var(--panel-inset-bg) !important;
  border: var(--panel-inset-border) !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}
#formContext.context-card:empty { display: none !important; }

/* Botão adicionar */
#btnSubmitOp.btn-add {
  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;
  margin-top: 14px !important;
  border-radius: var(--ui-button-radius, 12px) !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  width: 100% !important;
}

/* Responsive */
@media (max-width: 860px) {
  #mainFormCard .form-row.cols-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  :root,
  {
    --panel-pad-x: 16px;
    --panel-pad-y-top: 20px;
    --panel-pad-y-bottom: 18px;
    --panel-header-gap-after: 14px;
  }
  #mainFormCard .form-row.cols-3,
  #mainFormCard .form-row.cols-2 {
    grid-template-columns: 1fr !important;
  }
}

.mesa-password-toggle{
  background:rgba(0,0,0,0.05);
}
.mesa-password-toggle:hover{
  background:rgba(29, 42, 58, 0.08);
}
.cdi-dev-cell{
  border-color:rgba(0,0,0,0.08);
  background:rgba(0,0,0,0.03);
}
.cdi-dev-lot{
  border-color:rgba(0,0,0,0.08);
  background:var(--info-soft);
}
.wallet-mini--locked::before{
  background:repeating-linear-gradient(
    -32deg,
    transparent,
    transparent 11px,
    rgba(0,0,0,0.07) 11px,
    rgba(0,0,0,0.07) 12px
  );
}

/* Tema na tela de login (layout fino da entrada: mesa-guest-entry.css) */
.mesa-guest-theme-label{
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--label-accent);
}
.mesa-guest-theme-toggle{
  display:flex;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border2);
  flex-shrink:0;
}
.mesa-guest-theme-btn{
  border:none;
  background:var(--tab-bg);
  color:var(--text-dim);
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:10px 14px;
  cursor:pointer;
  transition:transform 0.12s ease, background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.mesa-guest-theme-btn:hover:not(:disabled):not(.active){filter:brightness(1.06)}
.mesa-guest-theme-btn:active:not(:disabled){transform:scale(0.985)}
.mesa-guest-theme-btn.active{
  background:linear-gradient(135deg,rgba(212,175,55,0.22),rgba(212,175,55,0.1));
  color:var(--gold-soft);
}

/* Clean — segmentos convidado (TEMA + ENTRAR/CRIAR): contraste, hierarquia, focus */
.mesa-guest-theme-label{
  color:var(--navy);
  font-weight:700;
  letter-spacing:0.07em;
}
.mesa-guest-theme-toggle,
.mesa-guest-mode-toggle{
  background:var(--surface2);
  border:1px solid color-mix(in srgb, var(--navy) 14%, var(--border2));
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.mesa-guest-theme-btn,
.mesa-guest-mode-btn{
  position:relative;
  background:transparent;
  color:var(--text-mid);
  font-weight:600;
  letter-spacing:0.07em;
  filter:none;
}
.mesa-guest-theme-btn:not(:first-child),
.mesa-guest-mode-btn:not(:first-child){
  box-shadow:inset 1px 0 0 color-mix(in srgb, var(--navy) 10%, var(--border2));
}
.mesa-guest-theme-btn:hover:not(:disabled):not(.active),
.mesa-guest-mode-btn:hover:not(:disabled):not(.active){
  filter:none;
  background:color-mix(in srgb, var(--surface3) 88%, var(--navy) 6%);
  color:var(--text);
}
.mesa-guest-theme-btn:focus-visible,
.mesa-guest-mode-btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--gold) 38%, var(--navy-soft));
  outline-offset:-2px;
  z-index:1;
}
.mesa-guest-theme-btn.active,
.mesa-guest-mode-btn.active{
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--gold-soft) 58%, var(--surface)) 0%,
    color-mix(in srgb, var(--gold-soft) 26%, var(--surface2)) 100%
  );
  color:var(--navy);
  font-weight:800;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
}
.mesa-guest-theme-btn.active:not(:first-child),
.mesa-guest-mode-btn.active:not(:first-child){
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--navy) 10%, var(--border2));
}
.mesa-guest-theme-btn.active:hover:not(:disabled),
.mesa-guest-mode-btn.active:hover:not(:disabled){
  filter:brightness(1.02);
}

.welcome-name-btn{
  background:linear-gradient(135deg, var(--navy-soft), var(--navy));
  color:var(--ivory);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent);
}

/* Clean — cartões resumo Patrimônio/Livro: PnL mais sóbrio (todos os viewports; Radar excluído) */
.summary-card:not(.radar-card) .pnl-rs.up,
.summary-card:not(.radar-card) .pnl-pct.up,
.summary-card:not(.radar-card) .price-val.up{
  color:color-mix(in srgb, var(--green) 54%, var(--text-mid)) !important;
}
.summary-card:not(.radar-card) .pnl-rs.down,
.summary-card:not(.radar-card) .pnl-pct.down,
.summary-card:not(.radar-card) .price-val.down{
  color:color-mix(in srgb, var(--red) 50%, var(--text-mid)) !important;
}

/* Clean — mobile: CDI / Radar / Livro (ops) mais sóbrios; PnL dos summary-card acima é global */
@media (max-width:899px){
  #view-ops .ops-mobile-meta-value.up{
    color:color-mix(in srgb, var(--green) 52%, var(--text-mid));
  }
  #view-ops .ops-mobile-meta-value.down{
    color:color-mix(in srgb, var(--red) 50%, var(--text-mid));
  }
  .result-cell.up{
    color:color-mix(in srgb, var(--green) 52%, var(--text-mid));
  }
  .result-cell.down{
    color:color-mix(in srgb, var(--red) 50%, var(--text-mid));
  }
  .cdi-metric__value.up,
  .cdi-metric__sub.up{
    color:color-mix(in srgb, var(--green) 52%, var(--text-mid));
  }
  .cdi-metric__value.down,
  .cdi-metric__sub.down{
    color:color-mix(in srgb, var(--red) 48%, var(--text-mid));
  }
  .radar-day-change.up{
    color:color-mix(in srgb, var(--green) 52%, var(--text-mid));
  }
  .radar-day-change.down{
    color:color-mix(in srgb, var(--red) 48%, var(--text-mid));
  }
}

@media (prefers-reduced-motion: reduce){
  .mesa-guest-theme-btn:active,
  .mesa-guest-mode-btn:active{
    transform:none !important;
  }
}

/* ── Comparativo CDI: tokens de texto/superfície em todo o viewport (alinhado a `--text-primary` / painéis). */
  .cdi-card{
    background:var(--bg-surface);
    border:1px solid var(--border);
    color:var(--text-primary);
    box-shadow:var(--shadow-sm);
  }
  .cdi-card::before{
    background:var(--panel-glow);
  }
  .cdi-card__title{
    color:var(--text-primary);
    font-weight:700;
    font-size:var(--ui-section-eyebrow-size, 13px);
    letter-spacing:var(--ui-section-eyebrow-tracking, 0.055em);
    text-transform:none;
  }
  .cdi-card__sub{
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.6;
  }
  .cdi-card__sub strong{
    color:var(--text-primary);
    font-weight:600;
  }
  .cdi-card__title{
    color:var(--text-primary);
    font-weight:700;
  }
  .cdi-card__sub{
    color:var(--text-secondary);
  }
  .cdi-card{
    background:var(--bg-surface);
    border-color:var(--border);
    box-shadow:var(--shadow-sm);
  }
  .cdi-how-to-read{
    background:var(--bg-subtle);
    border:1px solid var(--border);
  }
  .cdi-how-to-read__summary{
    color:var(--text-secondary);
    font-size:11px;
    font-weight:600;
  }
  .cdi-how-to-read__body{
    border-top:1px solid var(--border-subtle, var(--border));
  }
  .cdi-how-to-read__body p,
  .cdi-how-to-read__body ul{
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.6;
  }
  .cdi-how-to-read__body strong{
    color:var(--text-primary);
    font-weight:600;
  }
  .cdi-config-panel{
    background:var(--bg-subtle);
    border:1px solid var(--border);
    border-radius:var(--panel-inset-radius);
  }
  .cdi-config .field label,
  .cdi-metric__label{
    font-size:var(--ui-field-label-size, 10px);
    letter-spacing:var(--ui-field-label-tracking, 0.1em);
    text-transform:uppercase;
    color:var(--ui-field-label-color, var(--text-muted));
    font-weight:var(--ui-field-label-weight, 600);
    line-height:var(--ui-field-label-line-height, 1.1);
  }
  .cdi-metric__label,
  .cdi-config .field label{
    color:var(--ui-field-label-color, var(--text-muted));
    font-weight:var(--ui-field-label-weight, 600);
  }
  .cdi-type-panel__summary{
    color:var(--text-muted);
  }
  .cdi-row__label{
    color:var(--text-muted);
    font-weight:600;
  }
  .cdi-row__ticker{
    color:var(--text-primary);
  }
  .cdi-config .field input[type="number"]{
    background:var(--bg-surface);
    border:1px solid var(--border);
    color:var(--text-primary);
    font-size:16px;
  }
  .cdi-config .field input[type="number"]:focus-visible{
    border-color:var(--accent);
    outline:none;
  }
  /* Mesmo modelo que `#mainFormCard .toggle-wrap` / `.toggle-btn` (premium + tema). */
  .cdi-mode-toggle{
    background:var(--toggle-bg);
    border:1px solid var(--input-border);
    border-radius:var(--ui-control-radius);
  }
  .cdi-mode-toggle button:not(.active){
    color:var(--text-muted);
  }
  .cdi-mode-toggle button.active{
    background:var(--accent);
    color:var(--btn-add-fg);
    font-weight:600;
    box-shadow:none;
  }
  .cdi-config-note{
    background:var(--info-soft);
    border:1px solid var(--border);
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.6;
  }
  .cdi-config-note strong{
    color:var(--text-primary);
    font-weight:600;
  }
  #view-cdi .cdi-grid,
  #view-cdi .cdi-list{
    background:var(--bg-subtle);
    border:1px solid var(--border);
  }
  #view-cdi .cdi-metric{
    background:var(--bg-subtle);
    border:1px solid var(--border);
    border-radius:var(--panel-inset-radius);
  }
  .cdi-metric__value:not(.up):not(.down){
    font-size:28px;
    font-weight:800;
    color:var(--text-primary);
  }
  .cdi-metric__value.up,
  .cdi-metric__value.down{
    font-size:24px;
    font-weight:700;
  }
  .cdi-metric__value.up{color:var(--positive)}
  .cdi-metric__value.down{color:var(--negative)}
  .cdi-metric__sub{
    font-size:12px;
    line-height:1.5;
  }
  .cdi-metric__sub.up{color:var(--positive)}
  .cdi-metric__sub.down{color:var(--negative)}
  .cdi-metric__value.up,
  .cdi-metric__sub.up{color:var(--positive)}
  .cdi-metric__value.down,
  .cdi-metric__sub.down{color:var(--negative)}
  .cdi-type-panel{
    background:var(--bg-surface);
    border:1px solid var(--border);
  }
  .cdi-type-panel__summary{
    background:var(--bg-subtle);
    border-bottom:1px solid var(--border);
    color:var(--text-muted);
    font-size:10px;
    letter-spacing:0.1em;
    font-weight:600;
  }
  .cdi-type-panel__meta{
    color:var(--text-secondary);
    font-weight:600;
  }
  .cdi-type-panel__summary::after{
    border-right-color:var(--text-muted);
    border-bottom-color:var(--text-muted);
  }
  .cdi-type-panel__rows{
    background:transparent;
  }
  .cdi-row{
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--panel-inset-radius);
  }
  .cdi-row:hover{
    background:var(--bg-subtle);
  }
  .cdi-row__ticker{
    color:var(--text-primary);
    font-weight:700;
    font-size:13px;
    letter-spacing:0.04em;
  }
  .cdi-row__label{
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-muted);
    font-weight:600;
  }
  .cdi-row__value{
    font-size:13px;
    color:var(--text-primary);
  }
  .cdi-row__value.up,
  .cdi-row__value.down{
    font-weight:600;
  }
  .cdi-row__value.up{color:var(--positive)}
  .cdi-row__value.down{color:var(--negative)}
  .cdi-row__diff-stack.up .cdi-row__value--money,
  .cdi-row__diff-stack.up .cdi-row__pct{color:var(--positive)}
  .cdi-row__diff-stack.down .cdi-row__value--money,
  .cdi-row__diff-stack.down .cdi-row__pct{color:var(--negative)}
  .cdi-rows-table__head{
    color:var(--text-muted);
  }
  .cdi-row__lot-meta{
    color:var(--text-secondary);
  }
  .cdi-row__na{color:var(--text-muted)}
  .cdi-status{
    background:var(--bg-subtle);
    border:1px solid var(--border);
    color:var(--text-muted);
  }
  .cdi-status.loading{
    color:var(--text-secondary);
    border-color:var(--gold-dim);
    background:var(--gold-bg);
  }
  .cdi-status.error{
    color:var(--negative);
    border-color:color-mix(in srgb, var(--negative) 40%, var(--border));
    background:var(--negative-bg);
  }
  .cdi-dev-audit{
    border:1px solid var(--border);
    background:var(--bg-subtle);
  }
  .cdi-dev-audit__toggle{
    color:var(--text-muted);
    background:transparent;
  }
  .cdi-dev-audit__body{
    border-top:1px solid var(--border-subtle, var(--border));
  }
  .cdi-dev-audit__note{color:var(--text-muted)}
  .cdi-dev-asset{
    border:1px solid var(--border);
    background:var(--bg-surface);
  }
  .cdi-dev-asset__ticker{color:var(--text-primary)}
  .cdi-dev-asset__diff.up{color:var(--positive)}
  .cdi-dev-asset__diff.down{color:var(--negative)}
  .cdi-dev-cell{
    border:1px solid var(--border);
    background:var(--bg-surface);
  }
  .cdi-dev-label{
    color:var(--text-muted);
    font-size:10px;
    letter-spacing:0.1em;
  }
  .cdi-dev-value{color:var(--text-primary)}
  .cdi-dev-lot{
    border:1px solid var(--border);
    background:var(--bg-surface);
  }
  .cdi-dev-lot__title{color:var(--text-secondary)}
  #view-cdi .cdi-actions > .refresh-btn:not(:disabled){
    border:1px solid var(--border);
    background:transparent;
    color:var(--text-secondary);
  }
  #view-cdi .cdi-actions > .refresh-btn:hover:not(:disabled){
    border-color:var(--accent);
    color:var(--accent);
  }
  .cdi-card--locked::after{
    background:color-mix(in srgb, var(--bg-inverse) 35%, transparent);
  }

  /* Hierarquia clean só no Comparativo CDI: cartões de grelha/lista/config ficam sobre --bg-surface (vácuo menos “creme” que --bg-subtle da faixa seguinte no DOM). Métricas/linhas usam já --panel-inset-bg no base (= --surface2; não mais --surface3). */
#view-cdi .cdi-grid,
#view-cdi .cdi-list,
/* Sub-blocos do CDI em creme (= padrão Renda: casco branco + sub-cards creme).
   Antes eram --bg-surface (branco), sumindo dentro do casco branco. */
#view-cdi .cdi-config-panel,
#view-cdi .cdi-charts__panel,
#view-cdi .cdi-how-to-read.mesa-help{
  background:var(--bg-subtle);
}
/* Contraste do padrão aprovado vem da BORDA (--border), não do preenchimento.
   As caixas de ajuda usavam --border-subtle (quase invisível) → recorte fraco. */
#view-cdi .cdi-how-to-read.mesa-help,
#view-cdi .cdi-config-note.mesa-help{
  border:1px solid var(--border) !important;
}

/* Calendário — opção 3 aprovada: seletor limpo, sem branding interno */
.calendar-modal {
  background: rgba(17, 24, 39, 0.44);
  backdrop-filter: blur(8px);
}

.calendar-card {
  width: min(100%, 440px);
  padding: 18px;
  border: 1px solid var(--border2);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: 0 24px 60px rgba(30, 25, 18, 0.18);
  overflow: hidden;
}

.calendar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}

.calendar-kicker {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.calendar-close:hover,
.calendar-close:focus-visible {
  background: rgba(22, 28, 36, 0.045);
  color: var(--text);
  outline: none;
}

.calendar-nav {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  margin: 16px 0 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-inset-bg);
}

.calendar-title {
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 25px;
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1;
  text-align: center;
}

.calendar-nav-btn,
.calendar-footer-btn {
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}

.calendar-nav-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
}

.calendar-nav-btn--icon svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-nav-btn:hover,
.calendar-nav-btn:focus-visible,
.calendar-footer-btn:hover,
.calendar-footer-btn:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--border2));
  background: var(--gold-dim);
  color: var(--text);
  outline: none;
}

.calendar-nav-btn:active:not(:disabled),
.calendar-footer-btn:active:not(:disabled) {
  transform: translateY(0.5px) scale(0.99);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 8px;
}

.calendar-weekdays span {
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  min-height: 302px;
  padding: 0;
}

.calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.calendar-day.placeholder {
  visibility: hidden;
  pointer-events: none;
}

.calendar-day:hover,
.calendar-day:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--border2));
  background: var(--gold-dim);
  color: var(--text);
  outline: none;
  transform: translateY(-1px);
}

.calendar-day.muted {
  opacity: 0.44;
  color: var(--text-dim);
}

.calendar-day.today {
  border-color: var(--border2);
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent);
  color: var(--gold-hover);
}

.calendar-day.selected {
  border-color: color-mix(in srgb, var(--gold) 76%, var(--border2));
  background: color-mix(in srgb, var(--gold) 13%, var(--surface));
  color: var(--gold-hover);
  font-weight: 750;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
}

.calendar-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  background: transparent;
}

.calendar-footer-btn {
  min-height: 44px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-footer-btn.ghost {
  background: transparent;
  color: var(--text-muted);
}

.calendar-footer-btn:not(.ghost) {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--ivory);
}

.calendar-footer-btn:not(.ghost):hover,
.calendar-footer-btn:not(.ghost):focus-visible {
  border-color: var(--navy-soft);
  background: var(--navy-soft);
  color: var(--ivory);
}


/* ========== Header punch-out dedicado ========== */
#mesaAppShell .app-header--punch{
  position: relative;
  overflow: visible;
  margin: 0 0 72px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#mesaAppShell .mesa-punch-hero{
  position: relative;
  min-height: 372px;
  padding: 30px 40px 118px;
  border-radius: 24px;
  overflow: hidden;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 80% 62% at 92% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 66%),
    radial-gradient(ellipse 58% 50% at 0% 100%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 62%),
    var(--bg-inverse);
  box-shadow: 0 20px 48px rgba(26, 26, 24, 0.16), inset 0 1px 0 rgba(255,255,255,0.045);
}

#mesaAppShell .mesa-punch-hero::before{
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), transparent);
  opacity: 0.76;
}

#mesaAppShell .mesa-punch-hero::after{
  content: "J2CA";
  position: absolute;
  right: -0.14em;
  bottom: 0.18em;
  pointer-events: none;
  user-select: none;
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size: clamp(148px, 15vw, 248px);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--gold) 5%, transparent);
}

#mesaAppShell .mesa-punch-hero > *{
  position: relative;
  z-index: 1;
}

#mesaAppShell .mesa-punch-hero__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

#mesaAppShell .mesa-punch-hero__wordmark{
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

#mesaAppShell .mesa-punch-hero__main{
  display: grid;
  grid-template-columns: minmax(300px, 0.84fr) minmax(520px, 1.16fr);
  gap: 54px;
  align-items: end;
}

#mesaAppShell .mesa-punch-hero__identity{
  min-width: 0;
}

#mesaAppShell .mesa-punch-hero__hello{
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--ivory) 58%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

#mesaAppShell .mesa-punch-hero__title{
  max-width: 13ch;
  margin: 0;
  color: var(--ivory);
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size: clamp(38px, 3.7vw, 56px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
}

#mesaAppShell .mesa-punch-hero__manual{
  display: inline-flex;
  width: max-content;
  margin-top: 18px;
  color: var(--gold-bright);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-bright) 44%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

#mesaAppShell .mesa-punch-hero__metrics{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, auto) minmax(380px, 1fr);
  gap: 42px;
  align-items: end;
}

#mesaAppShell .app-header--punch #headerKpiHero:not([hidden]){
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-label{
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--ivory) 62%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-value{
  color: var(--ivory);
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.014em;
  font-variant-numeric: tabular-nums;
}

#mesaAppShell .app-header--punch .header-patrimonio-executive__metrics.mesa-kpi-scroll{
  min-width: 0;
  overflow: visible;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)){
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  width: 100%;
  min-width: 0;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  margin: 0 0 0 22px;
  padding: 0 0 0 22px;
  border-left: 1px solid color-mix(in srgb, var(--ivory) 10%, transparent) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat:first-child{
  margin-left: 0;
  padding-left: 0;
  border-left: 0 !important;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard .stat-label{
  margin: 0 0 9px;
  color: color-mix(in srgb, var(--ivory) 48%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) .stat-value{
  color: var(--ivory);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard .stat-value.up{
  color: color-mix(in srgb, var(--positive) 72%, var(--ivory) 28%);
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard .stat-value.down{
  color: color-mix(in srgb, var(--negative) 76%, var(--ivory) 24%);
}

#mesaAppShell .app-header--punch .header-kpi-pct-badge{
  margin-left: 6px;
}

#mesaAppShell .mesa-punch-hero__announce{
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 76px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#mesaAppShell .mesa-punch-hero__announce-title{
  color: var(--ivory);
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

#mesaAppShell .mesa-punch-hero__announce-sub{
  color: color-mix(in srgb, var(--ivory) 48%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

#mesaAppShell .app-header--punch .mesa-header-session{
  display: flex;
  align-items: center;
  gap: 8px;
}

#mesaAppShell .app-header--punch .mesa-header-btn{
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ivory) 16%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--ivory) 82%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
}

#mesaAppShell .app-header--punch .mesa-header-btn--reload{
  width: 34px;
  min-width: 34px;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--ivory) 64%, transparent);
}

#mesaAppShell .app-header--punch .mesa-header-btn:hover{
  border-color: color-mix(in srgb, var(--ivory) 30%, transparent);
  background: color-mix(in srgb, var(--ivory) 7%, transparent);
  color: var(--ivory);
}

#mesaAppShell .mesa-punch-wallets{
  position: relative;
  z-index: 2;
  margin: -56px 34px 0;
  padding: 0;
}

#mesaAppShell .app-header--punch .header-patrimonio-executive__wallets,
#mesaAppShell .app-header--punch #headerWalletStrip{
  overflow: visible;
}

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

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body{
  overflow: visible;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  overflow: visible;
  padding: 0;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini{
  position: relative;
  min-width: 0;
  min-height: 168px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 13px 28px rgba(26, 26, 24, 0.08), 0 1px 3px rgba(26,26,24,0.05);
  overflow: visible;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__class-bar{
  display: block !important;
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  width: auto;
  height: 4px;
  margin: 0;
  border-radius: 13px 13px 0 0;
  pointer-events: none;
  z-index: 1;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__kicker-row{
  display: block;
  margin-bottom: 5px;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__pos-badge{
  display: none !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__kicker{
  color: var(--text);
  font-size: clamp(15px, 0.98vw, 18px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__exec-sub{
  margin-bottom: 15px;
  color: var(--text-dim);
  font-size: clamp(12px, 0.78vw, 14px);
  font-weight: 500;
  line-height: 1.25;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__kv{
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__kv:first-child{
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 1120px){
  #mesaAppShell .mesa-punch-hero{
    padding-left: 32px;
    padding-right: 32px;
  }

  #mesaAppShell .mesa-punch-hero__main{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #mesaAppShell .mesa-punch-hero__metrics{
    grid-template-columns: minmax(280px, auto) minmax(360px, 1fr);
  }

  #mesaAppShell .mesa-punch-wallets{
    margin-left: 28px;
    margin-right: 28px;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  #mesaAppShell .app-header--punch{
    margin-bottom: 28px;
  }

  #mesaAppShell .mesa-punch-hero{
    min-height: 0;
    padding: 22px 18px 28px;
    border-radius: 0;
  }

  #mesaAppShell .mesa-punch-hero__top{
    margin-bottom: 22px;
  }

  #mesaAppShell .mesa-punch-hero__wordmark{
    font-size: 10px;
    letter-spacing: 0.26em;
  }

  #mesaAppShell .app-header--punch .mesa-header-btn--reload,
  #mesaAppShell .app-header--punch .mesa-header-btn--logout{
    display: none;
  }

  #mesaAppShell .mesa-punch-hero__main{
    display: block;
  }

  #mesaAppShell .mesa-punch-hero__title{
    font-size: clamp(28px, 9vw, 38px);
  }

  #mesaAppShell .mesa-punch-hero__metrics{
    display: block;
    margin-top: 24px;
  }

  #mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)){
    display: none !important;
  }

  #mesaAppShell .mesa-punch-hero__announce{
    display: none;
  }

  #mesaAppShell .mesa-punch-wallets{
    margin: -12px 0 0;
    padding: 0 16px;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 0 10px;
    scrollbar-width: none;
  }

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

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip > .wallet-mini{
    flex: 0 0 min(72vw, 270px);
    min-height: 150px;
  }
}


/* ========== Header punch-out — identidade como referência, sem nome pessoal ========== */
#mesaAppShell .mesa-punch-hero__identity{
  max-width: 920px;
}

#mesaAppShell .mesa-punch-hero__hello{
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--ivory) 72%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

#mesaAppShell .mesa-punch-hero__title{
  max-width: 24ch;
  margin: 0;
  color: color-mix(in srgb, var(--ivory) 94%, var(--gold-bright) 6%);
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size: clamp(40px, 4.2vw, 62px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

#mesaAppShell .mesa-punch-hero__subline{
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--ivory) 52%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.035em;
}

#mesaAppShell .mesa-punch-hero__subline > span{
  color: var(--gold-bright);
  font-weight: 800;
}

#mesaAppShell .mesa-punch-hero__manual{
  margin-top: 18px;
}

@media (max-width: 1120px){
  #mesaAppShell .mesa-punch-hero__title{
    max-width: 18ch;
    font-size: clamp(34px, 5vw, 50px);
  }
}

@media (max-width: 768px){
  #mesaAppShell .mesa-punch-hero__hello{
    font-size: 13px;
  }

  #mesaAppShell .mesa-punch-hero__title{
    max-width: 15ch;
    font-size: clamp(29px, 8.2vw, 38px);
    line-height: 1.04;
  }

  #mesaAppShell .mesa-punch-hero__subline{
    font-size: 11.5px;
  }
}


/* ========== Header punch-out — título da carteira em uma linha no desktop ========== */
@media (min-width: 1121px){
  #mesaAppShell .mesa-punch-hero__main{
    grid-template-columns: minmax(620px, 1.08fr) minmax(520px, 0.92fr);
    gap: 42px;
  }

  #mesaAppShell .mesa-punch-hero__identity{
    max-width: none;
    min-width: 0;
  }

  #mesaAppShell .mesa-punch-hero__title{
    max-width: none;
    white-space: nowrap;
    font-size: clamp(42px, 3.8vw, 58px);
    line-height: 1.02;
  }

  #mesaAppShell .mesa-punch-hero__metrics{
    grid-template-columns: minmax(240px, auto) minmax(320px, 1fr);
    gap: 30px;
  }
}

@media (min-width: 769px) and (max-width: 1120px){
  #mesaAppShell .mesa-punch-hero__title{
    max-width: none;
    white-space: nowrap;
    font-size: clamp(34px, 4.2vw, 46px);
  }
}


/* ========== Header punch-out — remover faixa superior herdada do container ========== */
#mesaAppShell:has(.app-header--punch) > .container{
  padding-top: 0 !important;
}

#mesaAppShell .app-header--punch{
  margin-top: 0 !important;
}


/* ========== Header punch-out — topo controlado sem corte visual ========== */
#mesaAppShell:has(.app-header--punch) > .container{
  padding-top: 18px !important;
}

#mesaAppShell .app-header--punch{
  margin-top: 0 !important;
}

@media (max-width: 768px){
  #mesaAppShell:has(.app-header--punch) > .container{
    padding-top: 0 !important;
  }
}


/* ========== Header punch-out — métrica hero no padrão do exemplo ========== */
#mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-label{
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--ivory) 66%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-value{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  min-width: 0;
  color: var(--ivory);
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size: initial;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-money{
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  color: color-mix(in srgb, var(--ivory) 94%, var(--gold-bright) 6%);
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-money.up{
  color: color-mix(in srgb, var(--positive) 58%, var(--ivory) 42%);
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-money.down{
  color: color-mix(in srgb, var(--negative) 62%, var(--ivory) 38%);
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-sign{
  margin-right: 0.14em;
  font-size: clamp(42px, 4.2vw, 62px);
  font-weight: 300;
  color: currentColor;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-currency{
  margin-right: 0.22em;
  align-self: flex-start;
  margin-top: 0.44em;
  color: color-mix(in srgb, var(--ivory) 48%, transparent);
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size: clamp(20px, 1.45vw, 28px);
  font-weight: 400;
  line-height: 1;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-main{
  font-size: clamp(54px, 5.4vw, 82px);
  line-height: 0.95;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-cents{
  align-self: flex-start;
  margin-top: 0.34em;
  margin-left: 0.04em;
  color: color-mix(in srgb, var(--ivory) 50%, transparent);
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-pct{
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 7px;
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-pct.up{
  color: color-mix(in srgb, var(--positive) 70%, var(--ivory) 30%);
  background: color-mix(in srgb, var(--positive) 20%, transparent);
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-pct.down{
  color: color-mix(in srgb, var(--negative) 78%, var(--ivory) 22%);
  background: color-mix(in srgb, var(--negative) 18%, transparent);
}

@media (max-width: 1120px){
  #mesaAppShell .app-header--punch .app-header__kpi-hero-sign{
    font-size: clamp(34px, 5vw, 48px);
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-main{
    font-size: clamp(42px, 7vw, 60px);
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-cents{
    font-size: clamp(20px, 3vw, 28px);
  }
}

@media (max-width: 768px){
  #mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-label{
    font-size: 10px;
  }

  #mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-value{
    gap: 8px;
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-sign{
    font-size: clamp(28px, 8vw, 38px);
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-main{
    font-size: clamp(34px, 10vw, 48px);
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-currency{
    font-size: clamp(16px, 4vw, 22px);
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-cents{
    font-size: clamp(17px, 5vw, 24px);
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-pct{
    min-height: 24px;
    padding: 4px 8px;
    font-size: 11.5px;
  }
}


/* ========== Header punch-out — hero metric no lugar correto ========== */
#mesaAppShell .mesa-punch-hero__main{
  grid-template-columns: minmax(760px, 1.08fr) minmax(420px, 0.92fr);
  align-items: end;
}

#mesaAppShell .mesa-punch-hero__identity{
  max-width: none;
}

#mesaAppShell .mesa-punch-hero__title{
  max-width: none;
  white-space: nowrap;
}

#mesaAppShell .mesa-punch-hero__identity #headerKpiHero:not([hidden]){
  display: block;
  margin: 44px 0 0;
  padding: 0;
  border: 0;
}

#mesaAppShell .mesa-punch-hero__identity #headerKpiHero .app-header__kpi-hero-label{
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--ivory) 70%, transparent);
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#mesaAppShell .mesa-punch-hero__identity #headerKpiHero .app-header__kpi-hero-value{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}

#mesaAppShell .mesa-punch-hero__metrics{
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

#mesaAppShell .mesa-punch-hero__metrics .header-patrimonio-executive__metrics{
  width: 100%;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)){
  justify-content: flex-end;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
  max-width: 180px;
}

#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat[data-stat="patrimony"],
#mesaAppShell .app-header--punch #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat[data-stat="invested"]{
  max-width: 210px;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-main{
  font-size: clamp(58px, 5.8vw, 88px);
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-sign{
  font-size: clamp(46px, 4.4vw, 66px);
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-currency{
  font-size: clamp(21px, 1.5vw, 30px);
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-cents{
  font-size: clamp(25px, 2.1vw, 36px);
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-pct{
  min-height: 30px;
  font-size: 14px;
}

@media (max-width: 1320px){
  #mesaAppShell .mesa-punch-hero__main{
    grid-template-columns: minmax(650px, 1fr) minmax(360px, 0.82fr);
    gap: 36px;
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-main{
    font-size: clamp(48px, 5vw, 72px);
  }
}

@media (max-width: 1120px){
  #mesaAppShell .mesa-punch-hero__main{
    grid-template-columns: 1fr;
  }

  #mesaAppShell .mesa-punch-hero__title{
    white-space: normal;
  }

  #mesaAppShell .mesa-punch-hero__identity #headerKpiHero:not([hidden]){
    margin-top: 32px;
  }
}


/* ========== Header punch-out — métrica hero fiel ao exemplo visual ========== */
#mesaAppShell .app-header--punch .mesa-punch-hero{
  background:
    radial-gradient(ellipse 80% 62% at 92% 0%, rgba(176, 142, 87, 0.08), transparent 66%),
    #1A1A18 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-hero__identity #headerKpiHero:not([hidden]){
  margin-top: 42px !important;
}

#mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-label,
#mesaAppShell .mesa-punch-hero__identity #headerKpiHero .app-header__kpi-hero-label{
  margin: 0 0 18px !important;
  color: #B8B3A3 !important;
  font-family: 'DM Sans','Inter',system-ui,sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

#mesaAppShell .app-header--punch #headerKpiHero .app-header__kpi-hero-value,
#mesaAppShell .mesa-punch-hero__identity #headerKpiHero .app-header__kpi-hero-value{
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  min-width: 0 !important;
  color: #F0ECD6 !important;
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif !important;
  line-height: 1 !important;
  letter-spacing: -0.012em !important;
  font-variant-numeric: tabular-nums !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-money{
  display: inline-flex !important;
  align-items: baseline !important;
  min-width: 0 !important;
  color: #F0ECD6 !important;
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif !important;
  font-weight: 400 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.016em !important;
  font-variant-numeric: tabular-nums !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-money.up{
  color: #5FB37D !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-money.down{
  color: #B85F5F !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-sign{
  margin-right: 0.13em !important;
  color: currentColor !important;
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif !important;
  font-size: clamp(44px, 4.4vw, 66px) !important;
  font-weight: 300 !important;
  line-height: 0.95 !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-currency{
  align-self: baseline !important;
  margin: 0 0.22em 0 0 !important;
  color: #7A7668 !important;
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif !important;
  font-size: clamp(26px, 2vw, 36px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-main{
  color: #F0ECD6 !important;
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif !important;
  font-size: clamp(62px, 6vw, 92px) !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.018em !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-money.up .app-header__kpi-hero-main,
#mesaAppShell .app-header--punch .app-header__kpi-hero-money.down .app-header__kpi-hero-main{
  color: #F0ECD6 !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-cents{
  align-self: baseline !important;
  margin: 0 0 0 0.04em !important;
  color: #7A7668 !important;
  font-family: 'DM Serif Display','Cormorant Garamond',Georgia,serif !important;
  font-size: clamp(30px, 2.55vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-pct{
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 6px 13px !important;
  border-radius: 7px !important;
  font-family: 'DM Sans','Inter',system-ui,sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  font-variant-numeric: tabular-nums !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-pct.up{
  color: #5FB37D !important;
  background: #243127 !important;
}

#mesaAppShell .app-header--punch .app-header__kpi-hero-pct.down{
  color: #D27B7B !important;
  background: rgba(80, 36, 36, 0.92) !important;
}

@media (max-width: 1120px){
  #mesaAppShell .app-header--punch .app-header__kpi-hero-sign{
    font-size: clamp(34px, 5vw, 48px) !important;
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-currency{
    font-size: clamp(20px, 3vw, 28px) !important;
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-main{
    font-size: clamp(44px, 7vw, 64px) !important;
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-cents{
    font-size: clamp(22px, 3.6vw, 30px) !important;
  }

  #mesaAppShell .app-header--punch .app-header__kpi-hero-pct{
    min-height: 30px !important;
    font-size: 14px !important;
  }
}


/* ========== Header punch-out V12 — baseado no HTML header-v10 ========== */
#mesaAppShell .app-header--punch{
  position: relative;
  overflow: visible;
  margin: 0 0 72px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#mesaAppShell .mesa-punch-shell{
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 60% at 90% 0%, rgba(212,178,108,0.10), transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(212,178,108,0.05), transparent 60%),
    #1A1A18;
  padding: 1.75rem 2.5rem 6rem;
  color: #F0ECD6;
  box-shadow: 0 12px 32px rgba(26,26,24,0.15), 0 1px 0 rgba(255,255,255,0.04) inset;
  overflow: hidden;
}

#mesaAppShell .mesa-punch-shell::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, #D4B26C 0%, transparent 100%);
}

#mesaAppShell .mesa-punch-shell::after{
  content: "J2CA";
  position: absolute;
  right: -0.12em;
  bottom: 0.12rem;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(320px, 30vw, 520px);
  font-weight: 400;
  color: rgba(212,178,108,0.034);
  letter-spacing: -0.035em;
  line-height: 0.78;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

#mesaAppShell .mesa-punch-shell > *{
  position: relative;
  z-index: 1;
}

#mesaAppShell .mesa-punch-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}

#mesaAppShell .mesa-punch-wordmark{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #D4B26C;
  line-height: 1;
}

#mesaAppShell .mesa-punch-tools .mesa-header-session{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#mesaAppShell .app-header--punch .mesa-header-btn{
  background: transparent;
  border: 1px solid rgba(240,236,214,0.14);
  color: #F0ECD6;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  box-shadow: none;
}

#mesaAppShell .app-header--punch .mesa-header-btn:hover{
  background: rgba(240,236,214,0.06);
  border-color: rgba(240,236,214,0.28);
}

#mesaAppShell .app-header--punch .mesa-header-btn--reload{
  padding: 0.55rem 0.7rem;
  font-size: 14px;
  letter-spacing: 0;
  color: #B8B3A3;
}

#mesaAppShell .mesa-punch-greet{
  margin-bottom: 2rem;
}

#mesaAppShell .mesa-punch-greet__hello{
  font-size: 13px;
  font-weight: 500;
  color: #B8B3A3;
  letter-spacing: 0.005em;
  margin: 0 0 0.4rem;
  line-height: 1;
}

#mesaAppShell .mesa-punch-greet__name{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 400;
  color: #F0ECD6;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0 0 0.4rem;
  white-space: nowrap;
}

#mesaAppShell .mesa-punch-greet__sub{
  font-size: 12px;
  font-weight: 500;
  color: #7A7668;
  letter-spacing: 0.04em;
}

#mesaAppShell .mesa-punch-greet__sub-num{
  color: #D4B26C;
  font-weight: 700;
}

#mesaAppShell .mesa-punch-metrics{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

#mesaAppShell .mesa-punch-lucro__label{
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #B8B3A3 !important;
  margin: 0 0 0.8rem !important;
  line-height: 1 !important;
}

#mesaAppShell .mesa-punch-lucro__row{
  display: flex !important;
  align-items: baseline !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

#mesaAppShell .mesa-punch-lucro__num{
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: clamp(44px, 5vw, 64px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.012em !important;
  color: #F0ECD6 !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-flex !important;
  align-items: baseline !important;
}

#mesaAppShell .mesa-punch-lucro__sign{
  margin-right: 0.06em !important;
}

#mesaAppShell .mesa-punch-lucro__sign.up{
  color: #5FB37D !important;
}

#mesaAppShell .mesa-punch-lucro__sign.down{
  color: #D97070 !important;
}

#mesaAppShell .mesa-punch-lucro__curr{
  font-size: 0.38em !important;
  font-weight: 400 !important;
  color: #7A7668 !important;
  margin-right: 0.25em !important;
  align-self: flex-start !important;
  margin-top: 0.55em !important;
  letter-spacing: 0.02em !important;
}

#mesaAppShell .mesa-punch-lucro__cents{
  font-size: 0.48em !important;
  color: #7A7668 !important;
  margin-left: 0.04em !important;
  align-self: flex-start !important;
  margin-top: 0.42em !important;
}

#mesaAppShell .mesa-punch-lucro__pct{
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 5px 11px !important;
  border-radius: 5px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  align-self: center !important;
}

#mesaAppShell .mesa-punch-lucro__pct.up{
  color: #5FB37D !important;
  background: rgba(95,179,125,0.15) !important;
}

#mesaAppShell .mesa-punch-lucro__pct.down{
  color: #D97070 !important;
  background: rgba(217,112,112,0.15) !important;
}

/* Count-up do "não realizado": "R$" e o % entram com fade só ao fim da contagem.
   Durante a animação o hero não tem .mesa-hero-revealed → fadein em opacity 0. */
#mesaAppShell .mesa-punch-lucro .mesa-hero-fadein{
  opacity: 0;
  transition: opacity 0.3s ease;
}
#mesaAppShell .mesa-punch-lucro.mesa-hero-revealed .mesa-hero-fadein{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  #mesaAppShell .mesa-punch-lucro .mesa-hero-fadein{
    opacity: 1 !important;
    transition: none !important;
  }
}

#mesaAppShell .mesa-punch-secs #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)){
  display: flex !important;
  gap: 2.5rem !important;
  justify-content: flex-end !important;
  align-items: end !important;
  width: 100% !important;
}

#mesaAppShell .mesa-punch-secs #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)) > .stat{
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  border-left: 1px solid rgba(240,236,214,0.08) !important;
  padding: 0 0 0 1.5rem !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 180px !important;
}

#mesaAppShell .mesa-punch-secs #headerStatsMaster .stat-label{
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #7A7668 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#mesaAppShell .mesa-punch-secs #headerStatsMaster .stat-value{
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #F0ECD6 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.005em !important;
}

#mesaAppShell .mesa-punch-secs #headerStatsMaster .stat-value.up{
  color: #5FB37D !important;
}

#mesaAppShell .mesa-punch-announce{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(240,236,214,0.08);
}

#mesaAppShell .mesa-punch-announce__title{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #F0ECD6;
  margin: 0;
  letter-spacing: 0.005em;
}

#mesaAppShell .mesa-punch-announce__sub{
  font-size: 12px;
  color: #7A7668;
  font-weight: 400;
  margin-left: 0.8rem;
}

#mesaAppShell .mesa-punch-cards-rail{
  display: block;
  margin: -4.5rem 2.5rem 0;
  position: relative;
  z-index: 2;
}

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

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  overflow: visible !important;
  padding: 0 !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.1rem 1.25rem !important;
  box-shadow: 0 8px 20px rgba(26,26,24,0.06), 0 1px 3px rgba(26,26,24,0.04) !important;
}

@media (min-width: 881px){
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini{
    --wallet-class-bar: var(--wallet-bar-outros);
    background:
      linear-gradient(
        to bottom,
        var(--wallet-class-bar) 0,
        var(--wallet-class-bar) 5px,
        #FFFFFF 5px,
        #FFFFFF 100%
      ) !important;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini[data-wallet="acoes"]{
    --wallet-class-bar: var(--wallet-bar-acoes);
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini[data-wallet="fiis"]{
    --wallet-class-bar: var(--wallet-bar-fiis);
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini[data-wallet="etfs"]{
    --wallet-class-bar: var(--wallet-bar-etfs);
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini[data-wallet="bdrs"]{
    --wallet-class-bar: var(--wallet-bar-bdrs);
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini[data-wallet="outros"]{
    --wallet-class-bar: var(--wallet-bar-outros);
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__class-bar{
    display: none !important;
  }
}

@media (max-width: 880px){
  #mesaAppShell .mesa-punch-shell{
    padding: 1.25rem 1.25rem 5rem;
    border-radius: 16px;
  }

  #mesaAppShell .mesa-punch-metrics{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  #mesaAppShell .mesa-punch-secs #headerStatsMaster.header-stats--scoreboard:not(:has(.stat--guest-dashboard)){
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }

  #mesaAppShell .mesa-punch-cards-rail{
    margin: -3.5rem 1.25rem 0;
  }

  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #mesaAppShell .mesa-punch-top{
    margin-bottom: 1.75rem;
  }
}


/* ========== Header punch-out V13 — garantir lucro/KPIs visíveis ========== */
#mesaAppShell .app-header--punch .mesa-punch-metrics{
  display: grid !important;
  grid-template-columns: minmax(360px, auto) minmax(360px, 1fr) !important;
  gap: 3rem !important;
  align-items: end !important;
  margin-bottom: 2.5rem !important;
}

#mesaAppShell .app-header--punch #headerKpiHero,
#mesaAppShell .app-header--punch #headerKpiHero:not([hidden]){
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  min-height: 92px !important;
}

#mesaAppShell .app-header--punch #headerKpiHero[hidden]{
  display: block !important;
}

#mesaAppShell .app-header--punch #headerKpiHeroValue{
  display: flex !important;
  align-items: baseline !important;
  gap: 1rem !important;
  min-width: 0 !important;
  color: #F0ECD6 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__label{
  display: block !important;
  color: #B8B3A3 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__num{
  display: inline-flex !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: end !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: end !important;
  gap: 2.5rem !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster > .stat{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  flex: 0 0 auto !important;
  min-width: 120px !important;
  border-left: 1px solid rgba(240,236,214,0.08) !important;
  padding-left: 1.5rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #F0ECD6 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster .stat-label{
  display: block !important;
  color: #7A7668 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster .stat-value{
  display: block !important;
  color: #F0ECD6 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

@media (max-width: 880px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }
}


/* ========== Header punch-out V15 — reparo seguro em cima da V13 ========== */

/* Não zerar topo: respiro pequeno, igual page padding do protótipo, sem corte. */
#mesaAppShell:has(.app-header--punch) > .container{
  padding-top: 1rem !important;
}

#mesaAppShell .app-header--punch{
  margin-top: 0 !important;
}

/* A grade do exemplo: lucro à esquerda, secundárias à direita. */
#mesaAppShell .app-header--punch .mesa-punch-metrics{
  display: grid !important;
  grid-template-columns: minmax(420px, auto) minmax(520px, 1fr) !important;
  gap: 3rem !important;
  align-items: end !important;
  margin-bottom: 2.5rem !important;
}

/* Hero intacto, só garantindo respiro do badge. */
#mesaAppShell .app-header--punch #headerKpiHeroValue{
  display: flex !important;
  align-items: baseline !important;
  gap: 1rem !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__num{
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__pct{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* KPIs da direita: exatamente a lógica .secs/.sec do HTML. */
#mesaAppShell .app-header--punch .mesa-punch-secs{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: end !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-end !important;
  align-items: end !important;
  gap: 2.5rem !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster > .stat{
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 1.5rem !important;
  border-left: 1px solid rgba(240,236,214,0.08) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster .stat-label{
  display: block !important;
  margin: 0 !important;
  color: #7A7668 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster .stat-value{
  display: block !important;
  margin: 0 !important;
  color: #F0ECD6 !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money{
  color: #F0ECD6 !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.up{
  color: #5FB37D !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.down{
  color: #D97070 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money__cents{
  color: #7A7668 !important;
  font-size: 0.66em !important;
  font-weight: 400 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.up .mesa-punch-sec-money__cents{
  color: rgba(95,179,125,0.70) !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.down .mesa-punch-sec-money__cents{
  color: rgba(217,112,112,0.70) !important;
}

/* Em telas médias, empilha linha de métricas sem sumir com nada. */
@media (max-width: 1280px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs,
  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    justify-content: flex-start !important;
  }
}

@media (max-width: 880px){
  #mesaAppShell:has(.app-header--punch) > .container{
    padding-top: 0 !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }
}


/* ========== Header punch-out V16 — hard fix topo + KPIs igual ao HTML ========== */

/* Topo: não pode ser 0. O HTML exemplo tem page padding de 2rem.
   Aqui usamos 24px para não cortar no navegador e ainda ficar compacto. */
#mesaAppShell:has(.app-header--punch) > .container{
  padding-top: 24px !important;
}

#mesaAppShell .app-header--punch{
  margin-top: 0 !important;
}

/* Shell com padding interno estável para não cortar wordmark/botões. */
#mesaAppShell .app-header--punch .mesa-punch-shell{
  padding-top: 1.75rem !important;
  overflow: hidden !important;
}

/* Métricas exatamente como o HTML:
   .metrics { grid-template-columns: auto 1fr; gap: 3rem; align-items:end; } */
#mesaAppShell .app-header--punch .mesa-punch-metrics{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 3rem !important;
  align-items: end !important;
  margin-bottom: 2.5rem !important;
  min-width: 0 !important;
}

/* Coluna esquerda não pode empurrar/engolir a direita. */
#mesaAppShell .app-header--punch .mesa-punch-lucro{
  min-width: 0 !important;
  max-width: max-content !important;
}

#mesaAppShell .app-header--punch #headerKpiHeroValue{
  display: flex !important;
  align-items: baseline !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__num{
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__pct{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* KPIs da direita: agora a estrutura é .sec/.sec__label/.sec__value, igual ao HTML. */
#mesaAppShell .app-header--punch .mesa-punch-secs{
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
  display: flex !important;
  gap: 2.5rem !important;
  justify-content: flex-end !important;
  align-items: end !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster > .sec{
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  border-left: 1px solid rgba(240,236,214,0.08) !important;
  padding-left: 1.5rem !important;
  min-width: max-content !important;
  max-width: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#mesaAppShell .app-header--punch .sec__label{
  display: block !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #7A7668 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .sec__value{
  display: block !important;
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #F0ECD6 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money{
  color: #F0ECD6 !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.up{
  color: #5FB37D !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.down{
  color: #D97070 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money__cents{
  font-size: 0.68em !important;
  color: #7A7668 !important;
  font-weight: 500 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.up .mesa-punch-sec-money__cents{
  color: rgba(95,179,125,0.70) !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.down .mesa-punch-sec-money__cents{
  color: rgba(217,112,112,0.70) !important;
}

/* Em larguras onde não cabe, empilha a linha de métricas inteira.
   Não comprime os KPIs, porque isso foi o que causou corte. */
@media (max-width: 1320px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    justify-content: flex-start !important;
  }
}

@media (max-width: 880px){
  #mesaAppShell:has(.app-header--punch) > .container{
    padding-top: 0 !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }
}


/* ========== Header punch-out V16.1 — topo seguro sem cortar viewport ========== */
#mesaAppShell:has(.app-header--punch) > .container{
  padding-top: 24px !important;
}

#mesaAppShell .app-header--punch{
  margin-top: 0 !important;
}


/* ========== Header punch-out V17 — calibração final pelo header-v10.html ========== */

/*
  Base visual copiada do contrato do protótipo:
  .page { padding: 2rem 2rem 4rem; }
  .shell { padding: 1.75rem 2.5rem 6rem; }
  .top { margin-bottom: 2.5rem; }
  .greet { margin-bottom: 2rem; }
  .metrics { grid-template-columns: auto 1fr; gap: 3rem; align-items: end; }
  .secs { gap: 2.5rem; align-items: end; }
*/

/* respiro superior como no HTML, sem cortar e sem colar no navegador */
#mesaAppShell:has(.app-header--punch) > .container{
  padding-top: 2rem !important;
}

#mesaAppShell .app-header--punch{
  margin-top: 0 !important;
  margin-bottom: 72px !important;
}

/* shell exatamente na escala do exemplo */
#mesaAppShell .app-header--punch .mesa-punch-shell{
  border-radius: 22px !important;
  padding: 1.75rem 2.5rem 6rem !important;
  background:
    radial-gradient(ellipse 80% 60% at 90% 0%, rgba(212,178,108,0.10), transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(212,178,108,0.05), transparent 60%),
    #1A1A18 !important;
  box-shadow: 0 12px 32px rgba(26,26,24,0.15), 0 1px 0 rgba(255,255,255,0.04) inset !important;
}

/* top bar */
#mesaAppShell .app-header--punch .mesa-punch-top{
  margin-bottom: 2.5rem !important;
  align-items: center !important;
}

#mesaAppShell .app-header--punch .mesa-punch-wordmark{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  line-height: 1 !important;
}

#mesaAppShell .app-header--punch .mesa-header-btn{
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  padding: 0.55rem 1rem !important;
  border-radius: 8px !important;
}

#mesaAppShell .app-header--punch .mesa-header-btn--reload{
  padding: 0.55rem 0.7rem !important;
  min-width: auto !important;
  width: auto !important;
}

/* greeting exatamente mais editorial e menos gigante */
#mesaAppShell .app-header--punch .mesa-punch-greet{
  margin-bottom: 2rem !important;
}

#mesaAppShell .app-header--punch .mesa-punch-greet__hello{
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #B8B3A3 !important;
  letter-spacing: 0.005em !important;
  margin: 0 0 0.4rem !important;
  line-height: 1 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-greet__name{
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: clamp(32px, 3.6vw, 44px) !important;
  font-weight: 400 !important;
  color: #F0ECD6 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.005em !important;
  margin: 0 0 0.4rem !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-greet__sub{
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #7A7668 !important;
  letter-spacing: 0.04em !important;
}

#mesaAppShell .app-header--punch .mesa-punch-greet__sub-num{
  color: #D4B26C !important;
  font-weight: 700 !important;
}

/* linha lucro + KPIs, igual ao exemplo */
#mesaAppShell .app-header--punch .mesa-punch-metrics{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 3rem !important;
  align-items: end !important;
  margin-bottom: 2.5rem !important;
  min-width: 0 !important;
}

/* bloco lucro do lado esquerdo */
#mesaAppShell .app-header--punch .mesa-punch-lucro{
  min-width: 0 !important;
  max-width: max-content !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__label{
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: #B8B3A3 !important;
  margin-bottom: 0.8rem !important;
  line-height: 1 !important;
}

#mesaAppShell .app-header--punch #headerKpiHeroValue{
  display: flex !important;
  align-items: baseline !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__num{
  font-size: clamp(44px, 5vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -0.012em !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__curr{
  font-size: 0.38em !important;
  margin-right: 0.25em !important;
  align-self: flex-start !important;
  margin-top: 0.55em !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__cents{
  font-size: 0.48em !important;
  margin-left: 0.04em !important;
  align-self: flex-start !important;
  margin-top: 0.42em !important;
}

#mesaAppShell .app-header--punch .mesa-punch-lucro__pct{
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 5px 11px !important;
  border-radius: 5px !important;
  align-self: center !important;
  white-space: nowrap !important;
}

/* KPIs da direita exatamente como .secs/.sec do HTML */
#mesaAppShell .app-header--punch .mesa-punch-secs{
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
  display: flex !important;
  gap: 2.5rem !important;
  justify-content: flex-end !important;
  align-items: end !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster > .sec{
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  border-left: 1px solid rgba(240,236,214,0.08) !important;
  padding-left: 1.5rem !important;
  min-width: max-content !important;
  max-width: none !important;
}

#mesaAppShell .app-header--punch .sec__label{
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: clamp(10px, 0.72vw, 12px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #7A7668 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .sec__value{
  font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
  font-size: clamp(20px, 1.55vw, 28px) !important;
  font-weight: 500 !important;
  color: #F0ECD6 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.012em !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money__cents{
  font-size: 0.68em !important;
  color: #7A7668 !important;
  font-weight: 500 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.up{
  color: #5FB37D !important;
}

#mesaAppShell .app-header--punch .mesa-punch-sec-money.up .mesa-punch-sec-money__cents{
  opacity: 0.7 !important;
  color: currentColor !important;
}

/* announce igual ao HTML */
#mesaAppShell .app-header--punch .mesa-punch-announce{
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(240,236,214,0.08) !important;
}

#mesaAppShell .app-header--punch .mesa-punch-announce__title{
  font-size: 22px !important;
  line-height: 1 !important;
}

#mesaAppShell .app-header--punch .mesa-punch-announce__sub{
  font-size: 12px !important;
  margin-left: 0.8rem !important;
}

/* Cards punch-out: distância do HTML */
#mesaAppShell .app-header--punch .mesa-punch-cards-rail{
  margin: -4.5rem 2.5rem 0 !important;
}

/* médio: empilha antes de comprimir a direita */
@media (max-width: 1360px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    justify-content: flex-start !important;
  }
}

@media (max-width: 880px){
  #mesaAppShell:has(.app-header--punch) > .container{
    padding-top: 0 !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-shell{
    padding: 1.25rem 1.25rem 5rem !important;
    border-radius: 16px !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: 1fr !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }
}


/* ========== Header punch-out V18 — sublinha de sincronização ========== */
#mesaAppShell .app-header--punch .mesa-punch-greet__sub{
  white-space: nowrap;
}


/* ========== Header punch-out V19 — remover separadores dos cards ========== */

/* Remove a divisória entre o bloco de métricas e o título Carteiras. */
#mesaAppShell .app-header--punch .mesa-punch-announce{
  border-top: 0 !important;
}

/* Remove linhas herdadas do wrapper antigo do wallet strip. */
#mesaAppShell .app-header--punch #headerWalletStrip,
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details,
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip-details__body,
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-strip{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Garante que nenhum pseudo-elemento antigo desenhe divisor horizontal no trilho. */
#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 punch-out V24 — remover linha da seção seguinte ========== */

/*
  A linha inferior que aparecia abaixo dos cards não era dos cards.
  Era a borda/sombra superior da Mesa de Decisão aparecendo logo atrás do punch-out.
  No layout punch-out, a transição já é feita pelos cards, então a próxima seção precisa
  começar mais abaixo e sem top-edge visível.
*/
#mesaAppShell .app-header--punch ~ .mesa-decision-deck,
#mesaAppShell .app-header--punch ~ section.mesa-decision-deck{
  margin-top: 64px !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

#mesaAppShell .app-header--punch ~ .mesa-decision-deck::before,
#mesaAppShell .app-header--punch ~ .mesa-decision-deck::after{
  display: none !important;
  content: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Se existir algum bloco premium/banner oculto entre header e Mesa de Decisão,
   aplica a mesma limpeza quando a decisão vem depois dele. */
#mesaAppShell .app-header--punch ~ * + .mesa-decision-deck{
  margin-top: 64px !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Mantém os cards com sua borda/sombra normal; não mexe mais no wallet-mini. */


/* ========== Header punch-out V26 — remover aresta superior da Mesa de Decisão ========== */

/*
  A linha visível abaixo dos cards é a aresta superior do painel branco da Mesa de Decisão.
  No desktop com header punch-out, esse painel não deve começar como um card branco logo abaixo
  das carteiras. A transição visual já é feita pelos cards de carteira.
*/
@media (min-width: 769px){
  #mesaAppShell .app-header--punch ~ .mesa-decision-deck,
  #mesaAppShell .app-header--punch ~ section.mesa-decision-deck,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck{
    margin-top: 42px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mesaAppShell .app-header--punch ~ .mesa-decision-deck::before,
  #mesaAppShell .app-header--punch ~ .mesa-decision-deck::after,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck::before,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck::after{
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /*
    Mantém o conteúdo interno da Mesa de Decisão com respiro próprio,
    mas sem o grande container branco desenhando linha superior.
  */
  #mesaAppShell .app-header--punch ~ .mesa-decision-deck > *,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck > *{
    position: relative;
    z-index: 1;
  }
}


/* ========== Header punch-out V27 — limpar arestas da Mesa de Decisão ========== */

/*
  Depois do header punch-out, a Mesa de Decisão não deve aparecer como um
  container branco gigante com bordas laterais/top-edge. As carteiras já fazem
  a transição visual. A seção abaixo precisa ser limpa/editorial.
*/
@media (min-width: 769px){
  #mesaAppShell .app-header--punch ~ .mesa-decision-deck,
  #mesaAppShell .app-header--punch ~ section.mesa-decision-deck,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck{
    margin-top: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  /*
    Remove qualquer pseudo-elemento do painel que esteja desenhando
    a linha horizontal abaixo das carteiras ou as linhas verticais laterais.
  */
  #mesaAppShell .app-header--punch ~ .mesa-decision-deck::before,
  #mesaAppShell .app-header--punch ~ .mesa-decision-deck::after,
  #mesaAppShell .app-header--punch ~ section.mesa-decision-deck::before,
  #mesaAppShell .app-header--punch ~ section.mesa-decision-deck::after,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck::before,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck::after{
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }


  /*
    Os cards internos da Mesa continuam com visual próprio.
  */
  #mesaAppShell .app-header--punch ~ .mesa-decision-deck .mesa-decision-deck__tabs,
  #mesaAppShell .app-header--punch ~ section.mesa-decision-deck .mesa-decision-deck__tabs,
  #mesaAppShell .app-header--punch ~ * + .mesa-decision-deck .mesa-decision-deck__tabs{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}


/* ========== Header punch-out V28 — KPIs desktop ampliados + hints ========== */
@media (min-width: 881px){
  #mesaAppShell .app-header--punch .mesa-punch-shell::after{
    right: -0.12em !important;
    bottom: 0.12rem !important;
    font-size: clamp(320px, 30vw, 520px) !important;
    color: rgba(212,178,108,0.034) !important;
    letter-spacing: -0.035em !important;
    line-height: 0.78 !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster > .sec{
    gap: 0.52rem !important;
  }

  #mesaAppShell .app-header--punch .sec__label{
    font-size: clamp(10px, 0.72vw, 12px) !important;
    white-space: nowrap !important;
  }

  #mesaAppShell .app-header--punch .sec__value{
    font-size: clamp(20px, 1.55vw, 28px) !important;
    letter-spacing: -0.012em !important;
    white-space: nowrap !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-sec-money__cents{
    font-size: 0.68em !important;
  }

  #mesaAppShell .app-header--punch .sec__hint{
    display: block !important;
    margin: 0 !important;
    font-family: "Inter", "DM Sans", system-ui, sans-serif !important;
    font-size: clamp(10px, 0.68vw, 12px) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    color: rgba(184,179,163,0.72) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1360px) and (min-width: 881px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    justify-content: flex-start !important;
  }
}


/* ========== Header punch-out V29 — divisor editorial de Carteiras ========== */
@media (min-width: 881px){
  #mesaAppShell .app-header--punch .mesa-punch-announce{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 1rem !important;
    padding-top: 1.45rem !important;
    border-top: 1px solid rgba(240,236,214,0.08) !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-announce > div{
    display: flex !important;
    align-items: baseline !important;
    gap: 1rem !important;
    min-width: 0 !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-announce__title{
    font-size: clamp(24px, 1.75vw, 32px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-announce__sub{
    display: inline-block !important;
    margin-left: 0 !important;
    font-size: clamp(12px, 0.82vw, 14px) !important;
    line-height: 1 !important;
    color: rgba(184,179,163,0.74) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1180px) and (min-width: 881px){
  #mesaAppShell .app-header--punch .mesa-punch-announce__title{
    font-size: clamp(22px, 2vw, 26px) !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-announce__sub{
    font-size: 12px !important;
  }
}

/* Header punch-out V29 — carteira cards: valores, percentuais e cards vazios */
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv{
  align-items: flex-start !important;
  gap: 1rem !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--executive .wallet-mini__kv > span:first-child{
  min-width: 0 !important;
  padding-top: 0.12rem !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__value-stack{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  text-align: right !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__money{
  color: #11110F !important;
  font-size: clamp(11.44px, 0.704vw, 13.2px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__money-cents{
  color: rgba(17, 17, 15, 0.58) !important;
  font-size: 0.66em !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

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

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__value-stack--tooltip{
  cursor: help !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__pct{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  font-size: clamp(11px, 0.72vw, 13px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__pct--gain{
  color: color-mix(in srgb, var(--green) 72%, #11110F) !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__pct--loss{
  color: color-mix(in srgb, var(--red) 72%, #11110F) !important;
}

@media (min-width: 881px){
  #mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini--empty{
    opacity: 0.72 !important;
  }
}

/* Header punch-out V30 — carteira cards: tooltip discreto e respiro notebook */
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__value-stack--tooltip{
  position: relative !important;
  cursor: default !important;
  overflow: visible !important;
}


#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini:has(.wallet-mini__value-stack--tooltip:hover),
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini:has(.wallet-mini__value-stack--tooltip:focus-within){
  z-index: 20 !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__exec-metrics,
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__kv{
  overflow: visible !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__tooltip-panel{
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 5000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: none !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid color-mix(in srgb, var(--radar-select-border, #d9d2c2) 72%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--surface2, #f7f4ed)) !important;
  box-shadow: 0 10px 26px rgba(18, 24, 33, 0.12), 0 1px 2px rgba(18, 24, 33, 0.06) !important;
  color: var(--text-dim, #6f6a5f) !important;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.005em !important;
  text-align: left !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.14s ease, visibility 0.14s ease, transform 0.14s ease !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__tooltip-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  border: 1px solid color-mix(in srgb, var(--accent, #caa85c) 52%, transparent) !important;
  border-radius: 999px !important;
  color: color-mix(in srgb, var(--accent, #caa85c) 78%, #11110F) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: none !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__tooltip-text{
  display: inline-block !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__value-stack--tooltip:hover .wallet-mini__tooltip-panel,
#mesaAppShell .app-header--punch #headerWalletStrip .wallet-mini__value-stack--tooltip:focus-within .wallet-mini__tooltip-panel{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

@media (min-width: 881px) and (max-width: 1440px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    margin-bottom: 1.25rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-shell{
    padding-bottom: 5.25rem !important;
  }
}

/* ========== Header punch-out V31 — KPIs alinhados em notebooks ========== */
@media (min-width: 881px) and (max-width: 1440px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: minmax(400px, auto) minmax(500px, 1fr) !important;
    align-items: center !important;
    gap: clamp(2rem, 4vw, 3.25rem) !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs{
    align-self: center !important;
    transform: translateY(-0.45rem) !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    justify-content: flex-end !important;
    gap: clamp(1rem, 2vw, 1.8rem) !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster > .sec{
    padding-left: clamp(1rem, 1.6vw, 1.35rem) !important;
  }

  #mesaAppShell .app-header--punch .sec__label{
    font-size: clamp(9.5px, 0.7vw, 11px) !important;
    letter-spacing: 0.13em !important;
  }

  #mesaAppShell .app-header--punch .sec__value{
    font-size: clamp(19px, 1.45vw, 24px) !important;
  }

  #mesaAppShell .app-header--punch .sec__hint{
    font-size: clamp(10px, 0.66vw, 11px) !important;
  }
}

@media (min-width: 881px) and (max-width: 1180px){
  #mesaAppShell .app-header--punch .mesa-punch-metrics{
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 1.2rem !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs{
    transform: none !important;
  }

  #mesaAppShell .app-header--punch .mesa-punch-secs #headerStatsMaster{
    justify-content: flex-start !important;
  }
}

/* ========== Mobile header punch-out — remover bordas externas ========== */
@media (max-width: 880px){
  /* Remove a moldura herdada do header mobile antigo sem afetar o desktop. */
  #mesaAppShell .app-header--punch{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Remove qualquer borda/moldura do bloco escuro principal no mobile. */
  #mesaAppShell .app-header--punch .mesa-punch-shell{
    border: 0 !important;
    outline: 0 !important;
  }

  /* Remove a linha decorativa superior no mobile; ela estava parecendo borda/remendo. */
  #mesaAppShell .app-header--punch .mesa-punch-shell::before{
    display: none !important;
    content: none !important;
  }
}

/* ==========================================================================
   Mesa Help Bubble - padrao unico para informativos
   ========================================================================== */
:root{
  --mesa-help-bg: var(--surface, var(--bg-surface, #fffefa));
  --mesa-help-surface-soft: var(--surface2, var(--bg-subtle, #f8f7f4));
  --mesa-help-surface-hover: color-mix(in srgb, var(--surface2, #f8f7f4) 68%, var(--surface, #fffefa));
  --mesa-help-border: 1px solid var(--border, #ded9cf);
  --mesa-help-border-soft: var(--border-subtle, var(--border2, #e9e4da));
  --mesa-help-radius: var(--ui-radius-card, 14px);
  --mesa-help-padding-y: 14px;
  --mesa-help-padding-x: 16px;
  --mesa-help-gap: 12px;
  --mesa-help-icon-size: 22px;
  --mesa-help-trigger-icon-size: 30px;
  --mesa-help-label-size: 11px;
  --mesa-help-label-weight: 700;
  --mesa-help-label-tracking: 0.08em;
  --mesa-help-text-size: 13px;
  --mesa-help-line-height: 1.55;
  --mesa-help-transition-speed: 240ms;
  --mesa-help-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mesa-help-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04));
  --mesa-help-shadow-md: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05));
  --mesa-help-shadow-lg: 0 18px 44px rgba(38, 34, 28, 0.12);
}

.mesa-help{
  position: relative;
  min-width: 0;
  color: var(--text-mid);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: var(--mesa-help-text-size);
  font-weight: 450;
  line-height: var(--mesa-help-line-height);
  box-sizing: border-box;
}

.mesa-help__head{
  display: flex;
  align-items: center;
  gap: var(--mesa-help-gap);
  width: 100%;
  min-width: 0;
  margin: 0;
}

button.mesa-help__head{
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  appearance: none;
}

.mesa-help__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--mesa-help-icon-size);
  height: var(--mesa-help-icon-size);
  border: 1px solid var(--border, #ded9cf);
  border-radius: 50%;
  background: var(--mesa-help-bg);
  color: var(--text, #1d1c19);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--mesa-help-shadow-sm);
  transition:
    background var(--mesa-help-transition-speed) var(--mesa-help-ease),
    border-color var(--mesa-help-transition-speed) var(--mesa-help-ease),
    color var(--mesa-help-transition-speed) var(--mesa-help-ease),
    transform var(--mesa-help-transition-speed) var(--mesa-help-ease),
    box-shadow var(--mesa-help-transition-speed) var(--mesa-help-ease);
}

.mesa-help__label{
  min-width: 0;
  margin: 0;
  color: var(--text, #1d1c19);
  font-size: var(--mesa-help-label-size);
  font-weight: var(--mesa-help-label-weight);
  letter-spacing: var(--mesa-help-label-tracking);
  line-height: 1.1;
  text-transform: uppercase;
}

.mesa-help__body{
  min-width: 0;
  margin: 8px 0 0 calc(var(--mesa-help-icon-size) + var(--mesa-help-gap));
  color: var(--text-mid);
}

.mesa-help__body p,
.mesa-help__body ul{
  margin: 0;
}

.mesa-help__body ul{
  display: grid;
  gap: 8px;
  padding-left: 16px;
  margin-top: 8px;
}

.mesa-help strong{
  color: var(--text, #1d1c19);
  font-weight: 700;
}

.mesa-help--inline{
  padding: var(--mesa-help-padding-y) var(--mesa-help-padding-x);
  border: var(--mesa-help-border);
  border-radius: var(--mesa-help-radius);
  background: var(--mesa-help-bg);
  box-shadow: var(--mesa-help-shadow-sm);
}

.mesa-help--soft{
  background: var(--mesa-help-surface-soft);
  border-color: var(--mesa-help-border-soft);
}

.mesa-help--numeric{
  background: var(--accent-soft, var(--info-soft, #e8eff5));
  border-color: color-mix(in srgb, var(--accent, #1f2c3a) 12%, transparent);
}

.mesa-help--numeric .mesa-help__icon{
  background: var(--accent, #1f2c3a);
  color: var(--surface, #fffefa);
  border-color: transparent;
}

.mesa-help--trigger{
  position: relative;
  z-index: 10;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
}

.mesa-help--trigger .mesa-help__head{
  cursor: pointer;
  outline: none;
}

.mesa-help--trigger .mesa-help__head:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent, #1f2c3a) 28%, transparent);
  outline-offset: 5px;
  border-radius: 12px;
}

.mesa-help--trigger .mesa-help__icon{
  width: var(--mesa-help-trigger-icon-size);
  height: var(--mesa-help-trigger-icon-size);
  font-size: 13px;
}

.mesa-help--trigger .mesa-help__label{
  color: var(--label-accent, var(--text-dim));
  transition: color var(--mesa-help-transition-speed) var(--mesa-help-ease);
}

.mesa-help--trigger .mesa-help__head:hover .mesa-help__icon,
.mesa-help--trigger .mesa-help__head:focus-visible .mesa-help__icon{
  border-color: var(--accent, #1f2c3a);
  background: var(--accent, #1f2c3a);
  color: var(--surface, #fffefa);
  transform: scale(1.04);
  box-shadow: var(--mesa-help-shadow-md);
}

.mesa-help--trigger .mesa-help__head:hover .mesa-help__label,
.mesa-help--trigger .mesa-help__head:focus-visible .mesa-help__label{
  color: var(--text, #1d1c19);
}

.mesa-help__popover{
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  width: min(380px, calc(100vw - 48px));
  padding: 16px;
  border: var(--mesa-help-border);
  border-radius: var(--mesa-help-radius);
  background: var(--mesa-help-bg);
  box-shadow: var(--mesa-help-shadow-lg);
  color: var(--text-mid);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition:
    opacity var(--mesa-help-transition-speed) var(--mesa-help-ease),
    visibility var(--mesa-help-transition-speed) var(--mesa-help-ease),
    transform var(--mesa-help-transition-speed) var(--mesa-help-ease);
}

.mesa-help__popover p{
  margin: 0;
}

.mesa-help--trigger:hover .mesa-help__popover,
.mesa-help--trigger:focus-within .mesa-help__popover{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mesa-help__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mesa-help__chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--mesa-help-border-soft);
  border-radius: 20px;
  background: var(--mesa-help-surface-soft);
  color: var(--text-mid);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.mesa-help__chip::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
}

.mesa-help__chip--target::before{
  background: var(--gold, #b99a57);
}

details.mesa-help--disclosure{
  padding: var(--mesa-help-padding-y) var(--mesa-help-padding-x);
  border: var(--mesa-help-border);
  border-radius: var(--mesa-help-radius);
  background: var(--mesa-help-bg);
  box-shadow: var(--mesa-help-shadow-sm);
  overflow: visible;
  transition: box-shadow var(--mesa-help-transition-speed) var(--mesa-help-ease);
}

details.mesa-help--disclosure[open]{
  box-shadow: var(--mesa-help-shadow-md);
}

.mesa-help--disclosure > summary{
  list-style: none;
  cursor: pointer;
  outline: none;
}

.mesa-help--disclosure > summary::-webkit-details-marker,
.mesa-help--disclosure > summary::marker{
  display: none;
  content: "";
}

.mesa-help__chev{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--text-dim);
  transition:
    background var(--mesa-help-transition-speed) var(--mesa-help-ease),
    color var(--mesa-help-transition-speed) var(--mesa-help-ease);
}

.mesa-help--disclosure > summary:hover .mesa-help__chev,
.mesa-help--disclosure > summary:focus-visible .mesa-help__chev{
  background: var(--mesa-help-surface-hover);
  color: var(--text, #1d1c19);
}

.mesa-help__chev::before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--mesa-help-transition-speed) var(--mesa-help-ease);
}

details.mesa-help--disclosure[open] .mesa-help__chev::before{
  transform: translateY(2px) rotate(-135deg);
}

#formContext.context-card.mesa-help,
#mesaAppShell #mainFormCard #formContext.context-card.mesa-help{
  min-height: 0 !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding: var(--mesa-help-padding-y) var(--mesa-help-padding-x) !important;
  border: var(--mesa-help-border) !important;
  border-radius: var(--mesa-help-radius) !important;
  background: var(--mesa-help-surface-soft) !important;
  color: var(--text-mid) !important;
  font-size: var(--mesa-help-text-size) !important;
  line-height: var(--mesa-help-line-height) !important;
}

#formContext.context-card.mesa-help:empty,
#mesaAppShell #mainFormCard #formContext.context-card.mesa-help:empty{
  display: none !important;
}

.cdi-config-note.mesa-help{
  margin: 0 !important;
  padding: var(--mesa-help-padding-y) var(--mesa-help-padding-x) !important;
  border: var(--mesa-help-border) !important;
  border-color: color-mix(in srgb, var(--accent, #1f2c3a) 12%, transparent) !important;
  border-radius: var(--mesa-help-radius) !important;
  background: var(--accent-soft, var(--info-soft, #e8eff5)) !important;
  color: var(--text-mid) !important;
  font-size: var(--mesa-help-text-size) !important;
  line-height: var(--mesa-help-line-height) !important;
  box-shadow: var(--mesa-help-shadow-sm) !important;
}

.cdi-config-note.mesa-help p{
  margin: 0 !important;
}

.cdi-how-to-read.mesa-help{
  margin: 10px 0 0 !important;
  border: var(--mesa-help-border) !important;
  border-radius: var(--mesa-help-radius) !important;
  background: var(--mesa-help-bg) !important;
  overflow: visible !important;
}

.cdi-how-to-read.mesa-help > .cdi-how-to-read__summary{
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
}

.cdi-how-to-read.mesa-help > .cdi-how-to-read__body{
  padding: 0 !important;
  border-top: 0 !important;
}

.cdi-how-to-read.mesa-help .cdi-how-to-read__body p,
.cdi-how-to-read.mesa-help .cdi-how-to-read__body ul{
  color: var(--text-mid) !important;
  font-size: var(--mesa-help-text-size) !important;
  font-weight: 450 !important;
  line-height: var(--mesa-help-line-height) !important;
}