@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(/fonts/plus-jakarta-sans.woff2) format("woff2");
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:italic;
  font-weight:200 800;
  font-display:swap;
  src:url(/fonts/plus-jakarta-sans-italic.woff2) format("woff2");
}

:root{
  color-scheme:light;
  --bg:#EFF6FA;
  --bg-glow:#DCEFF9;
  --surface:#FFFFFF;
  --surface-2:#EAF2F7;
  --surface-3:#DCEAF1;
  --border:#D6E3EA;
  --ink:#071C2E;
  --ink-2:#3F5B73;
  --ink-3:#7C93A3;
  --accent:#189CD8;
  --accent-ink:#FFFFFF;
  --accent-deep:#002945;
  --accent-mid:#1A3D65;
  --accent-light:#5CCCF2;
  --chip-bg:#EAF2F7;
  --chip-ink:#0E5C82;
  --good:#006300;
  --bad:#D03B3B;
  --good-bg:#E1F3E1;
  --bad-bg:#FBEAEA;
  --shadow:0 24px 50px -24px rgba(7,28,46,.28), 0 2px 8px rgba(7,28,46,.07);
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100;
  --c5:#e87ba4; --c6:#008300; --c7:#4a3aa7; --c8:#e34948;
  --seq1:#dbe9fa; --seq2:#a9cdf3; --seq3:#6da7ec; --seq4:#3987e5; --seq5:#1c5cab; --seq6:#0d366b;
  --div-pos:#2a78d6; --div-pos-soft:#b7d3f6; --div-neu:#E4E7EA; --div-neg-soft:#f6c4c3; --div-neg:#e34948;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#071420;
    --bg-glow:#0B2233;
    --surface:#0E1E2E;
    --surface-2:#132A3D;
    --surface-3:#1B3549;
    --border:#20394E;
    --ink:#EAF3F8;
    --ink-2:#B7CBD9;
    --ink-3:#7C93A3;
    --accent:#4CBBEE;
    --accent-ink:#00131F;
    --accent-deep:#04263D;
    --accent-mid:#1B4E73;
    --accent-light:#7FDBFA;
    --chip-bg:#132A3D;
    --chip-ink:#8FD6F5;
    --good:#39c15a;
    --bad:#e66767;
    --good-bg:#123A1E;
    --bad-bg:#3A1B1B;
    --shadow:0 24px 50px -24px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.4);
    --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500;
    --c5:#d55181; --c6:#3fb23f; --c7:#9085e9; --c8:#e66767;
    --seq1:#12283b; --seq2:#184f95; --seq3:#2a78d6; --seq4:#5598e7; --seq5:#86b6ef; --seq6:#cde2fb;
    --div-pos:#3987e5; --div-pos-soft:#184f95; --div-neu:#383835; --div-neg-soft:#5c2a2a; --div-neg:#e66767;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#071420;
  --bg-glow:#0B2233;
  --surface:#0E1E2E;
  --surface-2:#132A3D;
  --surface-3:#1B3549;
  --border:#20394E;
  --ink:#EAF3F8;
  --ink-2:#B7CBD9;
  --ink-3:#7C93A3;
  --accent:#4CBBEE;
  --accent-ink:#00131F;
  --accent-deep:#04263D;
  --accent-mid:#1B4E73;
  --accent-light:#7FDBFA;
  --chip-bg:#132A3D;
  --chip-ink:#8FD6F5;
  --good:#39c15a;
  --bad:#e66767;
  --good-bg:#123A1E;
  --bad-bg:#3A1B1B;
  --shadow:0 24px 50px -24px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.4);
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500;
  --c5:#d55181; --c6:#3fb23f; --c7:#9085e9; --c8:#e66767;
  --seq1:#12283b; --seq2:#184f95; --seq3:#2a78d6; --seq4:#5598e7; --seq5:#86b6ef; --seq6:#cde2fb;
  --div-pos:#3987e5; --div-pos-soft:#184f95; --div-neu:#383835; --div-neg-soft:#5c2a2a; --div-neg:#e66767;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(ellipse 900px 600px at 50% -8%, var(--bg-glow), transparent 60%), var(--bg);
  color:var(--ink);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4{margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

.page{
  max-width:462px;
  margin:0 auto;
  padding:22px 0 60px;
}
@media (min-width:560px){
  .page{
    margin:28px auto 60px;
    background:var(--surface);
    border-radius:28px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    overflow:hidden;
    padding-bottom:0;
  }
  .frame-pad{padding:0 22px 40px;}
}
@media (max-width:559px){
  .frame-pad{padding:0 16px 40px;}
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--surface);
  padding:16px 22px 0;
}
@media (max-width:559px){ .topbar{padding:14px 16px 0;} }
.brand{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand-mark{display:flex; align-items:center; gap:9px;}
/* Altura fixa, largura pelo aspecto: a marca e um PNG exportado a 3x, entao
   nao serrilha em tela retina. 40px e o minimo em que a linha "MULTI FAMILY
   OFFICE" do lockup ainda se le — abaixo disso ela vira um borrao. */
.brand-logo{display:block; height:40px; width:auto;}
.brand-meta{text-align:right;}
.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.ref-date{font-size:12.5px; font-weight:600; color:var(--ink-2); margin-top:2px;}

.date-select-wrap{position:relative; margin-top:4px;}
.date-select{
  display:flex; align-items:center; gap:5px; background:var(--chip-bg); border:1px solid var(--border);
  border-radius:99px; padding:5px 10px 5px 9px; font-size:12px; font-weight:700; color:var(--ink);
  cursor:pointer; white-space:nowrap;
}
.date-select .cal-icon{color:var(--accent); flex-shrink:0;}
.date-select .chev-icon{color:var(--ink-3); flex-shrink:0; transition:transform .15s;}
.date-select[aria-expanded="true"] .chev-icon{transform:rotate(180deg);}
.date-dropdown{
  position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:6px; min-width:172px; z-index:50;
  display:none; flex-direction:column; gap:1px;
}
.date-dropdown.open{display:flex;}
.date-opt{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:9px;
  font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; background:none; border:none;
  width:100%; text-align:left; font-variant-numeric:tabular-nums;
}
.date-opt:hover{background:var(--surface-2);}
.date-opt[aria-selected="true"]{background:var(--accent); color:var(--accent-ink);}

.tabs{
  display:flex; gap:6px; margin-top:14px; padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.tab{
  flex:1; text-align:center; padding:9px 4px; border-radius:11px;
  font-size:12.8px; font-weight:600; background:transparent; border:1px solid transparent;
  color:var(--ink-3); cursor:pointer; transition:background .15s,color .15s;
  letter-spacing:.01em;
}
.tab:hover{color:var(--ink-2);}
.tab[aria-selected="true"]{
  background:var(--accent-deep); color:#fff; border-color:var(--accent-deep);
}

/* ---------- sections ---------- */
main{padding-top:18px;}
.stack{display:flex; flex-direction:column; gap:16px;}
.card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
}
.card-tight{padding:16px;}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px;
}
.section-title{font-size:14.5px; font-weight:700; color:var(--ink);}
.section-hint{font-size:11.5px; color:var(--ink-3); font-weight:500;}
.section-note{font-size:11px; color:var(--ink-3); font-weight:500; line-height:1.5; margin:-4px 0 12px;}
.section-note b{color:var(--ink-2); font-weight:700;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(165deg, var(--accent-deep) 0%, var(--accent-mid) 100%);
  border-radius:22px;
  padding:22px 20px 26px;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero-wave{
  position:absolute; left:-8%; right:-8%; bottom:-2px; height:46px;
  opacity:.55; z-index:0;
}
.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  position:relative; z-index:1;
}
.hero-label{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.68);}
.cur-toggle{
  display:flex; flex-shrink:0; background:rgba(255,255,255,.12); border-radius:99px; padding:2px;
  position:relative; z-index:1;
}
.cur-btn{
  border:none; background:none; color:rgba(255,255,255,.65); font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:99px; cursor:pointer; font-variant-numeric:tabular-nums;
}
.cur-btn[aria-pressed="true"]{background:#fff; color:var(--accent-deep);}
.hero-fx-note{
  font-size:10.5px; color:rgba(255,255,255,.55); font-weight:500; margin-top:6px; position:relative; z-index:1;
}
.hero-figure{
  margin-top:14px; position:relative; z-index:1;
  font-size:32px; font-weight:800; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.hero-figure sup{font-size:16px; font-weight:600; opacity:.7; margin-right:2px;}
.hero-delta-row{
  display:flex; align-items:center; gap:8px; margin-top:8px; position:relative; z-index:1;
}
.delta-pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:700; padding:3px 9px 3px 8px; border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.delta-pill.up{background:rgba(57,193,90,.18); color:#8CF0A8;}
.delta-pill.down{background:rgba(230,103,103,.2); color:#FFB0AA;}
.hero-delta-note{font-size:11.5px; color:rgba(255,255,255,.62); font-weight:500;}
.hero-flow{
  display:flex; margin-top:16px; border-top:1px solid rgba(255,255,255,.16);
  padding-top:12px; position:relative; z-index:1;
}
.hero-flow div{flex:1;}
.hero-flow dt{font-size:10.5px; color:rgba(255,255,255,.55); font-weight:600; letter-spacing:.03em;}
.hero-flow dd{margin:3px 0 0; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;}

/* ---------- kpi grid ---------- */
.kpi-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:13px 14px;
}
.kpi-label{font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.02em;}
.kpi-value-row{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-top:5px;}
.kpi-value{
  font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.kpi-value.pos{color:var(--good);}
.kpi-value.neg{color:var(--bad);}
.kpi-nominal{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; opacity:.75;}
.kpi-nominal.pos{color:var(--good);}
.kpi-nominal.neg{color:var(--bad);}
.kpi-sub{font-size:11px; color:var(--ink-3); margin-top:4px; font-weight:500;}
.kpi-sub b{color:var(--ink-2); font-weight:700; font-variant-numeric:tabular-nums;}
.kpi-cdi-track{
  margin-top:8px; height:4px; border-radius:99px; background:var(--surface-3); overflow:hidden; position:relative;
}
.kpi-cdi-fill{position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:99px;}
.kpi-full{grid-column:1 / -1;}
.period-row{display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:2px;}
.period-item{font-size:11.5px; color:var(--ink-3); font-weight:500;}
.period-item b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;}

/* ---------- chart card ---------- */
.chips{display:flex; gap:6px;}
.chip-btn{
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-3); cursor:pointer;
}
.chip-btn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.chart-wrap{position:relative; margin-top:2px;}
.chart-svg{width:100%; height:auto; display:block; overflow:visible;}
.chart-legend{display:flex; gap:16px; margin-top:10px; flex-wrap:wrap;}
.legend-item{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink-2);}
.legend-swatch{width:14px; height:0; border-top:2.5px solid; border-radius:2px;}
.legend-swatch.dashed{border-top-style:dashed;}

.tooltip{
  position:absolute; pointer-events:none; z-index:30;
  background:var(--accent-deep); color:#fff; border-radius:10px; padding:8px 10px;
  font-size:11.5px; line-height:1.45; box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
  opacity:0; transform:translate(-50%,-100%) translateY(-8px); transition:opacity .1s;
  white-space:nowrap;
}
.tooltip.show{opacity:1;}
.tooltip b{font-variant-numeric:tabular-nums;}
.tooltip .tt-row{display:flex; gap:8px; justify-content:space-between;}
.tooltip .tt-title{font-weight:700; margin-bottom:3px; opacity:.85;}

/* ---------- liquidity ---------- */
.liq-bar{
  display:flex; height:26px; border-radius:8px; overflow:hidden; background:var(--surface-3);
}
.liq-seg{height:100%; cursor:pointer; border-right:2px solid var(--surface-2);}
.liq-seg:last-child{border-right:none;}
.liq-legend{margin-top:12px; display:flex; flex-direction:column; gap:7px;}
.liq-row{display:flex; align-items:center; gap:9px; font-size:12px;}
.liq-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
.liq-row-label{flex:1; color:var(--ink-2); font-weight:600;}
.liq-row-pct{font-weight:700; font-variant-numeric:tabular-nums; width:52px; text-align:right;}
.liq-row-val{color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; width:98px; text-align:right; font-size:11px;}

/* ---------- composition / donut ---------- */
.donut-wrap{position:relative; flex-shrink:0; width:132px; height:132px;}
.donut-wrap-solo{margin:0 auto;}
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.donut-center-label{font-size:9.5px; font-weight:600; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase;}
.donut-center-value{font-size:15px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums;}

/* stacked pct (bold) + money (muted, small) used in acc rows */
.figures{display:flex; flex-direction:column; align-items:flex-end; line-height:1.32; flex-shrink:0;}
.figures b{font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink);}
.figures small{font-size:10.5px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;}

.accordion{margin-top:14px; border-top:1px solid var(--border); padding-top:12px;}
.accordion-flush{margin-top:20px;}
.acc-item{border-bottom:1px solid var(--border);}
.acc-item:last-child{border-bottom:none;}
.acc-btn{
  width:100%; display:flex; align-items:center; gap:10px; background:none; border:none; text-align:left;
  padding:10px 2px; cursor:pointer;
}
.acc-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
.acc-name{flex:1; font-size:12.8px; font-weight:700; color:var(--ink);}
.acc-chevron{width:9px; height:9px; border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3); transform:rotate(-45deg); transition:transform .18s; flex-shrink:0;}
.acc-item[data-open="true"] .acc-chevron{transform:rotate(45deg);}
.acc-body{max-height:0; overflow:hidden; transition:max-height .22s ease;}
.acc-body-inner{padding:0 2px 12px 19px;}
.acc-sub{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; font-size:12px; padding:5px 0; color:var(--ink-2);}
.acc-sub .figures{padding-top:1px;}

/* ---------- monthly heatmap ---------- */
.heat-table{width:100%; border-collapse:collapse;}
.heat-table th{
  font-size:9.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.02em;
  padding-bottom:6px; text-align:center;
}
.heat-table th:first-child, .heat-table td:first-child{text-align:left; padding-left:2px;}
.heat-table td{text-align:center; padding:2px;}
.heat-cell{
  display:flex; align-items:center; justify-content:center; height:28px; border-radius:7px;
  font-size:10.8px; font-weight:700; font-variant-numeric:tabular-nums; cursor:pointer;
}
.heat-year-label{font-size:12px; font-weight:700; color:var(--ink);}
.heat-empty{visibility:hidden;}
.heat-legend{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:10.5px; color:var(--ink-3); font-weight:500;}
.heat-legend-ramp{flex:1; height:6px; border-radius:99px; background:linear-gradient(90deg, var(--div-neg), var(--div-neu), var(--div-pos));}
.more-btn{
  margin-top:12px; width:100%; text-align:center; padding:9px; border-radius:11px; border:1px dashed var(--border);
  background:none; color:var(--ink-2); font-size:12px; font-weight:700; cursor:pointer;
}
.more-btn:hover{background:var(--surface);}

footer{margin-top:22px; padding-top:16px; border-top:1px solid var(--border);}
.foot-word{display:flex; align-items:center;}
/* No rodape cabe o lockup inteiro, com "MULTI FAMILY OFFICE" legivel. */
.foot-logo{display:block; height:30px; width:auto;}
.disclaimer{font-size:10.3px; line-height:1.55; color:var(--ink-3); margin-top:10px;}
.foot-meta{font-size:10.3px; color:var(--ink-3); margin-top:8px;}

/* ============================================================
   Estados de carga e falha.

   O Container App roda com minReplicas=0 — dorme quando ninguém
   está usando e acorda na primeira visita. Esse cold start é
   visível (segundos), então a tela precisa dizer que está viva.
   Sem isto o cliente vê branco e conclui que quebrou.
   ============================================================ */
.estado-carregando { display: grid; gap: 14px; }

.skel {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-hero  { height: 96px; }
.skel-kpi   { height: 64px; flex: 1 1 120px; }
.skel-chart { height: 180px; }
.skel-row   { display: flex; gap: 12px; flex-wrap: wrap; }

@keyframes skel-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.estado-msg {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.estado-falha { text-align: center; padding: 28px 20px; }
.estado-falha h2 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.estado-falha p  { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-2); }

.btn-retry {
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-ink);
  background: var(--accent);
  cursor: pointer;
}
.btn-retry:hover { background: var(--accent-mid); }

/* prefers-reduced-motion: o shimmer é decorativo, não vale enjoar ninguém. */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}


/* ============================================================
   Desktop.

   A base continua sendo o telefone — foi assim que o piloto foi
   validado com o cliente, e e onde ele mais abre. Ate 1023px nada
   muda. Dai para cima o relatorio deixa de ser uma coluna estreita
   no meio de um monitor vazio: os mesmos blocos, na mesma ordem de
   leitura, se redistribuem em duas colunas. Nao e outra tela, e a
   mesma tela usando o espaco que tem.
   ============================================================ */
@media (min-width:1024px){
  .page{max-width:1180px; border-radius:24px;}
  .topbar{padding:20px 28px 0;}
  .frame-pad{padding:0 28px 34px;}
  main{padding-top:20px;}

  .brand-logo{height:46px;}

  .stack{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:18px;
    /* stretch, nao start: com alturas livres cada card terminava numa altura
       diferente e a linha ficava com a base serrilhada. Agora os dois cards
       de uma linha fecham juntos. */
    align-items:stretch;
  }

  /* Patrimonio e rentabilidade lado a lado: sao o que o cliente abre para
     ver, e cabem os dois acima da dobra. */
  .hero{grid-column:span 5;}
  .sec-kpi{grid-column:span 7;}
  /* O grafico pede largura; a liquidez e uma lista curta e cabe ao lado. */
  .sec-chart{grid-column:span 8;}
  .sec-liq{grid-column:span 4;}
  .sec-comp{grid-column:span 7;}
  .sec-heat{grid-column:span 5;}
  /* Esta linha foge do stretch: abrir um custodiante na composicao pode
     triplicar a altura do card, e o vizinho esticaria junto virando um retangulo
     quase vazio. As duas primeiras linhas continuam alinhadas. */
  .sec-comp, .sec-heat{align-self:start;}

  /* Sao tres prazos no grid (mes, ano, 12 meses) - "desde o inicio" e um
     bloco a parte, na largura toda. Com quatro colunas sobrava um buraco. */
  .kpi-grid{grid-template-columns:repeat(3, 1fr);}

  /* No celular as abas dividem a largura (.tab tem flex:1); numa tela larga
     isso vira um botao "Brasil" de 400px. Aqui elas encolhem para o texto. */
  .tab{flex:0 0 auto; padding:9px 26px;}

  /* Estados de carga e falha nao sao um card do painel: ocupam a largura. */
  .estado-carregando, .estado-falha{grid-column:1 / -1;}

  /* No celular a rosca fica centrada acima da lista, que e o unico jeito numa
     coluna de 400px. Com 700px de largura isso deixa um vazio grande dos dois
     lados dela: aqui a rosca vai para o lado da lista. */
  .sec-comp{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:"cabecalho cabecalho" "rosca lista";
    column-gap:28px;
    align-items:start;
  }
  .sec-comp .section-head{grid-area:cabecalho;}
  .sec-comp .donut-wrap{grid-area:rosca; margin:10px 0 0;}
  .sec-comp .accordion{grid-area:lista;}

  /* No rodape a marca completa so cumpre o papel se "MULTI FAMILY OFFICE"
     der para ler. */
  .foot-logo{height:38px;}
}

@media (min-width:1400px){
  .page{max-width:1300px;}
  .foot-logo{height:42px;}
}


/* ============================================================
   Tema claro / escuro.

   As variaveis dos dois temas ja existiam no topo deste arquivo; o que
   faltava era (a) trocar a versao da marca, porque o arquivo do brandbook
   e escuro sobre transparente e sumiria no fundo escuro, e (b) um botao.
   Ordem das regras importa: primeiro o padrao claro, depois a preferencia
   do sistema (caminho sem JS), e por ultimo o atributo explicito, que e o
   que o botao escreve e precisa ganhar de todos.
   ============================================================ */
.marca-escura{display:none;}
.icone-sol{display:none;}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marca-clara{display:none;}
  :root:not([data-theme="light"]) .marca-escura{display:block;}
  :root:not([data-theme="light"]) .icone-lua{display:none;}
  :root:not([data-theme="light"]) .icone-sol{display:block;}
}

:root[data-theme="light"] .marca-clara{display:block;}
:root[data-theme="light"] .marca-escura{display:none;}
:root[data-theme="light"] .icone-lua{display:block;}
:root[data-theme="light"] .icone-sol{display:none;}

:root[data-theme="dark"] .marca-clara{display:none;}
:root[data-theme="dark"] .marca-escura{display:block;}
:root[data-theme="dark"] .icone-lua{display:none;}
:root[data-theme="dark"] .icone-sol{display:block;}

.meta-row{
  display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:4px;
}
.meta-row .date-select-wrap{margin-top:0;}

/* Mesma linguagem do seletor de data ao lado: pilula discreta, sem competir
   com o conteudo. */
.tema-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0; padding:0;
  background:var(--chip-bg); border:1px solid var(--border); border-radius:99px;
  color:var(--ink-2); cursor:pointer;
  transition:color .15s, background .15s;
}
.tema-btn:hover{color:var(--ink); background:var(--surface-3);}
.tema-btn svg{display:block;}