/* Philnance — Mês (#/mes): estilos só desta vista (ecrãs 03, 04, 05, 11 e 16 do design).
   Tokens e componentes partilhados (cartões, hero-card, tiles, segmentos, chips, perguntas fixas, valores) vêm do
   styles.css; aqui só o que é próprio do Mês (fluxo diário, linha do tempo, próximos 12 meses, prestação, …). */

.mes-vista { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.mes-c { display: flex; flex-direction: column; gap: 12px; }
.mes-v { font: 500 16px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mes-nota { font: 400 12.5px var(--sans); color: var(--ink3); }
.mes-div { height: 1px; background: var(--line); margin: 4px 0; }
.mes-sub-t { font: 400 19px/1.15 var(--serif); letter-spacing: -.01em; margin-top: 6px; }
.mes-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 12px var(--sans); color: var(--ink2); }
.mes-legenda > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mes-legenda .est-aprox { font: italic 400 14px var(--serif); }
.mes-calendario { flex-wrap: wrap; padding: 12px 12px 12px 14px; border-radius: 20px; }
.mes-calendario .banner-txt { flex: 1 1 180px; line-height: 1.35; }
.mes-calendario .banner-txt span { color: var(--ink2); }
.mes-vista .vazio .btn { min-width: 200px; }

/* cabeçalho do Mês (UI.cabecalho com classe mes-cab): a seta fica junto ao ano e a linha de baixo parte entre as
   datas e o dia, nunca a meio */
.mes-cab .cabecalho-escolher { flex-wrap: nowrap; }
.mes-cab .cabecalho-sub > .mes-cab-p { white-space: nowrap; }
@media (max-width: 380px) {
  .mes-cab .cabecalho-t { font-size: 26px; }
  .mes-cab .cabecalho-aux, .mes-cab .cabecalho-car { font-size: 17px; }
  .mes-cab .cabecalho-escolher { gap: 0 6px; }
  .mes-cab .cabecalho-linha { gap: 8px; }
}

/* ---------- Hoje podem gastar ---------- */
.mes-hero-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 26px; }
.mes-hero .hero-rot { white-space: nowrap; }
.mes-meta-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mes-meta-s { display: none; }
.mes-hero-v { display: flex; align-items: baseline; flex-wrap: wrap; row-gap: 4px; }
.mes-hero-un { font: 400 14px/1 var(--sans); opacity: .8; margin-left: 8px; }
.mes-hero .hero-txt b { white-space: nowrap; }
.mes-ritmo { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.mes-ritmo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 400 13px/1.3 var(--sans); }
.mes-ritmo-cab > span:first-child { opacity: .85; }
.mes-ritmo-cab b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mes-ritmo-ver { font-weight: 600; text-align: right; }
.mes-ritmo-ver.ok { color: var(--hero-ok); }
.mes-ritmo-ver.acima { color: var(--hero-marca); }
.mes-hero .hero-barra > span { max-width: 100%; }
.mes-hero .hero-barra > i { margin-left: -1.5px; }
.mes-ritmo-escala { position: relative; height: 14px; font: 400 11.5px/1 var(--sans); opacity: .75; font-variant-numeric: tabular-nums; }
.mes-ritmo-escala > span { position: absolute; top: 0; white-space: nowrap; }
.mes-ritmo-escala > .zero { left: 0; }
.mes-ritmo-escala > .lim { transform: translateX(-50%); font-weight: 600; }
.mes-ritmo-escala > .lim.ini { transform: none; }
.mes-ritmo-escala > .lim.fim { transform: translateX(-100%); }
.mes-ritmo-escala > .max { right: 0; }

/* ---------- tiles, por classificar, alerta ---------- */
.mes-tiles .tile { padding: 14px; }
.mes-tiles .tile-v .valor { font: inherit; }
.mes-classificar { min-height: 60px; gap: 12px; border-radius: 20px; }
.mes-classificar > .ms { font-size: 22px; }
.mes-classificar .banner-txt { line-height: 1.3; }
.mes-classificar .banner-txt b { font-size: 14px; }
.mes-classificar .banner-txt span { font-size: 12.5px; color: var(--ink2); }
.mes-alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 6px; border-radius: 22px; }
.mes-alerta-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--tan-tint); color: var(--tan); }
.mes-alerta-ico.sm { width: 34px; height: 34px; }
.mes-alerta-ico .ms { font-size: 20px; }
.mes-alerta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; padding-bottom: 8px; }
.mes-alerta-txt > b { font: 600 14px/1.35 var(--sans); overflow-wrap: anywhere; }
.mes-alerta-txt > span { font: 400 13px var(--sans); color: var(--ink2); }
.mes-alerta-ver { align-self: flex-start; margin: -4px 0 -10px -4px; font-size: 13px; }
/* nomes que abrem o email: sem sublinhado (como no desenho); só ao passar o rato ou com o foco */
.mes-al-link, .mes-tl-link { color: inherit; text-decoration: none; }
.mes-al-link:hover, .mes-tl-link:hover, .mes-al-link:focus-visible, .mes-tl-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* ligações dentro do texto: a área de toque cresce para cima e para baixo sem mexer na linha */
.mes-al-link, .mes-tl-link { padding: 7px 0; }
.mes-alertas .linha { align-items: center; }

/* ---------- secções e perguntas fixas ---------- */
.mes-corpo { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.mes-sec { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; scroll-margin-top: 112px; }
.mes-sec .sec-cab h2:focus { outline: none; }
.mes-marco { height: 1px; margin-bottom: calc(-1px - var(--gap)); }
/* a barra é absoluta dentro de um elemento fixo de altura zero: não ocupa espaço enquanto não está fixa */
.mes-fixas { position: sticky; top: 0; z-index: 6; height: 0; margin: 0 calc(-1 * var(--margem)) calc(-1 * var(--gap)); }
.mes-fixas > .perguntas {
  position: absolute; top: 0; left: 0; right: 0; margin: 0;
  transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s;
}
.mes-fixas:not(.fixa) > .perguntas { opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; }
.mes-fixas .perguntas-t .aux { color: var(--ink3); }
.mes-fixas .perguntas-chips { margin: 0 calc(-1 * var(--margem)); padding: 0 var(--margem); }
.mes-sec .t-frase { margin-top: 2px; }

/* ---------- Como estamos ---------- */
.mes-balanco .linha { min-height: 50px; }
.mes-balanco .mes-nota { white-space: normal; }
.mes-saldo .linha-txt, .mes-saldo .mes-v { font-weight: 600; }

/* fluxo diário */
.mes-fx { position: relative; }
.mes-fx .fx { display: block; width: 100%; overflow: visible; }
.fx .fx-ent { fill: var(--green); }
.fx .fx-sai { fill: var(--accent); }
.fx .fx-vai { fill: none; stroke: var(--accent); stroke-width: 1.5px; }
.fx .fx-vai.est { stroke-dasharray: 3 2.5; }
.fx .fx-eixo { stroke: var(--line2); stroke-width: 1px; }
.fx .fx-hoje { stroke: var(--tan); stroke-width: 2px; }
.fx .fx-alvo { fill: transparent; cursor: pointer; }
.fx .fx-alvo:hover { fill: color-mix(in oklch, var(--ink) 5%, transparent); }
.mes-fx-ent, .mes-fx-nota { position: absolute; white-space: nowrap; line-height: 1; pointer-events: none; }
.mes-fx-ent { font: 500 12px var(--sans); color: var(--green); }
.mes-fx-nota { font: 500 11.5px var(--sans); color: var(--ink2); }
.mes-fx-eixo { position: relative; height: 15px; font: 400 11.5px/1 var(--sans); color: var(--ink3); }
.mes-fx-eixo > span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.mes-fx-eixo > .ini { left: 0; transform: none; }
.mes-fx-eixo > .fim { right: 0; transform: none; }
.mes-fx-eixo > .ref { color: var(--tan); font-weight: 600; }
.mes-q { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.mes-q.ent { background: var(--green); }
.mes-q.vai { background: none; border: 1.5px solid var(--accent); }
.mes-q.vai.est { border-style: dashed; }

/* poupança */
.mes-poup { display: flex; gap: 16px; align-items: center; }
.mes-poup-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mes-poup-rot { font: 500 13px var(--sans); color: var(--ink2); }
.mes-poup-v { font: 400 24px/1 var(--serif); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.mes-poup-v .valor { font: inherit; }
.mes-poup-d { font: 500 13px var(--sans); color: var(--green); }
.mes-poup-d.neg, .mes-poup-d .valor:not(.pos) { color: var(--ink2); }
.mes-poup-barras { display: flex; align-items: flex-end; gap: 5px; height: 56px; width: 104px; flex: none; }
.mes-poup-barras > span { flex: 1; border-radius: 3px; background: var(--line2); cursor: pointer; }
.mes-poup-barras > span.ult { background: var(--green); }

/* ---------- Para onde vai ---------- */
.mes-cats { padding: 2px 16px; }
.mes-cats-lista { list-style: none; }
.mes-cat { display: flex; flex-direction: column; gap: 9px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.mes-cats-lista > .mes-cat:last-child { border-bottom: 0; }
.mes-cat-l { display: flex; align-items: center; gap: 12px; }
.mes-cat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mes-cat-nome { font: 500 15px var(--sans); }
.mes-cat-sub { font: 400 12.5px var(--sans); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mes-cat-v { font: 500 15px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mes-cat-barra { height: 4px; border-radius: 2px; background: var(--chip); margin-left: 52px; overflow: hidden; }
.mes-cat-barra > span { display: block; height: 100%; border-radius: 2px; background: var(--c, var(--accent)); }
.mes-ver {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 0;
  border: 0; border-top: 1px solid var(--line); background: none; font: 500 14px var(--sans); color: var(--accent); text-align: left;
}
.mes-ver .ms { font-size: 20px; }
.mes-cats-vazio { padding: 16px 0; font-size: 13.5px; color: var(--ink2); }

.mes-fv-barra { display: flex; gap: 3px; height: 12px; }
.mes-fv-barra > span { display: block; min-width: 4px; }
.mes-fv-barra > .fixo { border-radius: 6px 0 0 6px; background: var(--accent); }
.mes-fv-barra > .var { flex: 1; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(45deg, var(--tan) 0 2px, var(--tan-tint) 2px 6px); }
.mes-fv-barra > .fixo:last-child { border-radius: 6px; }
.mes-fv-barra > .var:first-child { border-radius: 6px; }
.mes-fv-n { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; line-height: 1.35; }
.mes-fv-n b { display: block; font: 500 15px var(--sans); font-variant-numeric: tabular-nums; }
.mes-fv-n b .valor { font: inherit; }
.mes-fv-n span { font: 400 12.5px var(--sans); color: var(--ink2); }
.mes-cartoes .lista .linha { min-height: 44px; }
.mes-cartoes .mes-v, .mes-extra .mes-v { font-size: 15px; }
.mes-extra .lista .linha { min-height: 54px; }
.mes-extra .linha-sub { font-size: 12px; }

.mes-cortar { display: flex; flex-direction: column; gap: 10px; }
.mes-corte { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; background: var(--tan-tint); }
.mes-corte .cat-ico { width: 34px; height: 34px; }
.mes-corte-txt { min-width: 0; line-height: 1.4; }
.mes-corte-txt b { display: block; font: 600 14px var(--sans); }
.mes-corte-txt span { font: 400 13px var(--sans); color: var(--ink2); }

.mes-cons { min-height: 52px; }
.mes-cons-ico { font-size: 19px; }
.mes-cons-ico.luz { color: var(--cat-casa-servicos); }
.mes-cons-ico.agua { color: var(--cat-poupanca); }
.mes-cons-ico.port { color: var(--cat-transporte); }
.mes-cons-v { font: 400 14px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.mes-cons-sobe { color: var(--tan); font-weight: 600; }
.mes-cons-desce { color: var(--green); font-weight: 600; }
.mes-cons-igual { color: var(--ink3); }

/* ---------- O que vem aí ---------- */
.mes-tl { padding: 8px 18px 14px; display: flex; flex-direction: column; }
.mes-tl-lista { list-style: none; }
.mes-tl-linha { display: grid; grid-template-columns: 42px 14px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 56px; }
.mes-tl-data { display: flex; flex-direction: column; font: 500 12px/1.15 var(--sans); color: var(--ink2); white-space: nowrap; }
.mes-tl-data small { font: 400 12px/1.15 var(--sans); color: var(--ink3); }
.mes-tl-eixo { align-self: stretch; display: grid; place-items: center; background: linear-gradient(var(--line2), var(--line2)) center / 1.5px 100% no-repeat; }
.mes-tl-ponto { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.mes-tl-ponto.est { background: var(--card); border: 1.5px solid var(--ink2); }
.mes-tl-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; padding: 6px 0; }
.mes-tl-nome { font: 500 15px var(--sans); overflow-wrap: anywhere; }
.mes-tl-sub { font: 400 12.5px var(--sans); color: var(--ink2); }
.mes-tl-v { font: 500 15px var(--sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mes-tl-v .valor.est, .mes-ans-l .valor.est, .mes-12-lista .valor.est { color: var(--ink2); }
.mes-tl-v .valor.est { font-size: 17px; }
.mes-tl .mes-legenda { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12.5px; gap: 6px 18px; }
.mes-pt { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.mes-pt.est { background: none; border: 1.5px solid var(--ink2); }

.mes-12-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.mes-12-v .v { font: 400 26px/1 var(--serif); letter-spacing: -.015em; }
.mes-12-u { font: 400 13.5px var(--sans); color: var(--ink2); }
.mes-12-graf { display: flex; gap: 6px; }
.mes-12-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mes-12-barra { display: flex; align-items: flex-end; height: 56px; }
.mes-12-b { display: block; width: 100%; border-radius: 3px; background: var(--line2); cursor: pointer; }
.mes-12-b.cheio { background: var(--accent); }
.mes-12-b.proj { background: none; border: 1.5px dashed var(--accent); }
.mes-12-col small { display: block; height: 13px; font: 400 11px/13px var(--sans); color: var(--ink3); text-align: center; white-space: nowrap; overflow: visible; }
.mes-12-lista { border-top: 1px solid var(--line); }
.mes-12-lista .linha { min-height: 44px; font-size: 14.5px; }
.mes-12-lista .mes-v { font-size: 14.5px; }
.mes-12-mais { padding-top: 8px; }

.mes-casa-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.mes-casa-v .v-destaque { font-size: 26px; }
.mes-casa-v .v-destaque .valor { font: inherit; }
.mes-casa-taxa { font: 400 13px var(--sans); color: var(--ink2); }
.mes-cen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mes-cen-c { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; line-height: 1.3; min-width: 0; }
.mes-cen-c.meio { border: 1.5px solid var(--ink); }
.mes-cen-c > span:first-child { font: 400 11.5px var(--sans); color: var(--ink2); }
.mes-cen-c .valor.est { font-size: 18px; }

/* ---------- mês fechado ---------- */
.mes-fecho { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-hero); box-shadow: 0 1px 2px var(--shade); }
.mes-fecho-rot { font: 500 13px/1 var(--sans); color: var(--ink2); }
.mes-fecho-v .num-grande .ng-int { font-size: 62px; letter-spacing: -.045em; }
.mes-fecho-v .num-grande .ng-dec { font-size: 28px; }
.mes-fecho-meta { display: flex; justify-content: space-between; gap: 8px; font: 400 13.5px var(--sans); }
.mes-fecho-meta > span:first-child { color: var(--ink2); }
.mes-fecho-meta .falta { color: var(--tan); font-weight: 500; text-align: right; }
.mes-fecho-meta .ok { color: var(--green); font-weight: 500; }
.mes-fecho-barra { position: relative; height: 8px; border-radius: 4px; background: var(--chip); }
.mes-fecho-barra > span { display: block; height: 100%; border-radius: 4px; background: var(--tan); }
.mes-fecho-barra.ok > span { background: var(--green); }
.mes-fecho-barra > i { position: absolute; right: 0; top: -5px; width: 3px; height: 18px; border-radius: 2px; background: var(--line2); }
.mes-fecho-es { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); line-height: 1.35; }
.mes-fecho-es span:first-child { display: block; font: 400 12.5px var(--sans); color: var(--ink2); }
.mes-fecho-es .valor { font: 500 15px var(--sans); font-variant-numeric: tabular-nums; }

.mes-acordo { display: flex; flex-direction: column; padding: 16px 18px 6px; }
.mes-acordo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.mes-acordo-t { font: 400 21px/1.1 var(--serif); letter-spacing: -.01em; }
.mes-acordo-n { font: 500 13px var(--sans); color: var(--ink2); white-space: nowrap; }
.mes-acordo-lista { list-style: none; }
.mes-acordo-lista > li + li { border-top: 1px solid var(--line); }
.mes-acordo-item {
  display: flex; gap: 12px; align-items: center; width: 100%; min-height: 54px; padding: 8px 0;
  border: 0; background: none; color: var(--ink); text-align: left;
}
.mes-acordo-item > .ms { font-size: 22px; }
.mes-acordo-por { color: var(--tan); }
.mes-acordo-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mes-acordo-txt b { font: 500 14.5px var(--sans); overflow-wrap: anywhere; }
.mes-acordo-txt span { font: 400 12.5px var(--sans); color: var(--ink2); }
.mes-acordo-vazio { padding: 6px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.mes-rever { height: 50px; border-radius: 25px; font-size: 14.5px; }
.mes-rever .ms { font-size: 20px; }

/* ---------- ecrãs estreitos ---------- */
@media (max-width: 380px) {
  .mes-meta > button { padding: 0 6px; font-size: 12px; }
  .mes-meta-c { display: none; }
  .mes-meta-s { display: inline; }
  .mes-classificar { flex-wrap: wrap; }
  .mes-classificar .banner-txt { flex: 1 1 150px; }
  .mes-classificar .btn { margin-left: auto; }
  .mes-poup-barras { width: 84px; gap: 4px; }
  .mes-tl { padding: 8px 14px 14px; }
  .mes-tl-linha { grid-template-columns: 40px 12px minmax(0, 1fr) auto; column-gap: 9px; }
  .mes-cats { padding: 2px 14px; }
  .mes-cat-l { gap: 10px; }
  .mes-cat-barra { margin-left: 50px; }
  .mes-fecho-v .num-grande .ng-int { font-size: 54px; }
  .mes-cen { gap: 6px; }
  .mes-cen-c { padding: 8px; }
  .mes-cen-c .valor.est { font-size: 16px; }
}

/* ---------- computador (≥ 1024 px): a grelha do ecrã 16 ---------- */
@media (min-width: 1024px) {
  .mes-vista { gap: 16px; }
  .mes-grelha { gap: 16px; }
  .mes-cel { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .mes-grelha > .span-1 { grid-column: span 1; } .mes-grelha > .span-2 { grid-column: span 2; }
  .mes-grelha > .span-10 { grid-column: span 10; } .mes-grelha > .span-11 { grid-column: span 11; }
  .mes-largo .card { padding: 16px 18px; }
  .mes-largo .mes-fluxo { padding: 18px 22px; }
  .mes-largo .mes-hero { padding: 20px 22px; }
  .mes-largo .mes-hero-topo { min-height: 32px; }
  .mes-largo .mes-meta { height: 32px; padding: 3px; border-radius: 16px; grid-auto-columns: auto; }
  .mes-largo .mes-meta > button { padding: 0 12px; border-radius: 13px; font-size: 12px; }
  .mes-largo .mes-meta > button::after { inset: -6px -1px; }
  .mes-largo .mes-hero-un { margin-left: 10px; }
  .mes-largo .hero-rot { white-space: nowrap; }
  /* no topo do cartão o segmento é pequeno: o valor do outro modo vai sem cêntimos */
  .mes-largo .mes-meta-c { display: none; }
  .mes-largo .mes-meta-s { display: inline; }
  .mes-tiles-col { display: flex; flex-direction: column; gap: 16px; }
  .mes-tiles-col .tile { padding: 16px 18px; }
  .mes-tiles-col .tile-v { font-size: 26px; }

  /* alertas (com o "por classificar" no fundo) */
  .mes-al { display: flex; flex-direction: column; padding: 16px 18px 12px; }
  .mes-al .card-cab { margin-bottom: 4px; }
  .mes-al-lista { list-style: none; }
  .mes-al-l { display: flex; gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .mes-al-l:last-child { border-bottom: 0; }
  .mes-al-ico { font-size: 19px; color: var(--tan); }
  .mes-al-t { flex: 1; min-width: 0; }
  .mes-al-v { font: 400 12.5px var(--sans); color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .mes-al-ver { align-self: flex-start; min-height: 36px; font-size: 13px; }
  .mes-al-nada { padding: 8px 0; }
  .mes-al-class {
    display: flex; gap: 10px; align-items: center; min-height: 46px; margin: 6px -8px 0; padding: 0 8px; border-radius: 14px;
    background: var(--tan-tint); color: var(--ink); text-decoration: none; font-size: 14px;
  }
  .mes-al-class > .ms { font-size: 19px; color: var(--tan); }
  .mes-al-class b { flex: 1; font-weight: 600; }
  .mes-al-class-a { font: 600 13px var(--sans); color: var(--accent); }
  .mes-al-class:hover .mes-al-class-a { text-decoration: underline; }

  /* fluxo */
  .mes-fx-numeros { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; font: 400 12.5px var(--sans); color: var(--ink2); }
  .mes-fx-numeros .valor { font-weight: 600; }
  .mes-fx-numeros b .valor { color: var(--ink); }

  /* ainda não saiu (compacto) */
  .mes-ans { display: flex; flex-direction: column; padding: 16px 18px 12px; }
  .mes-ans .card-cab { margin-bottom: 2px; }
  .mes-ans-lista { list-style: none; }
  .mes-ans-l { display: grid; grid-template-columns: 44px 12px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 38px; font-size: 14px; }
  .mes-ans-d { font: 500 12px var(--sans); color: var(--ink2); white-space: nowrap; }
  .mes-ans-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mes-ans-l .valor { font-variant-numeric: tabular-nums; }
  .mes-ans-l .valor.est { font-size: 16px; }
  .mes-ans-vazio { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 13.5px; color: var(--ink2); }

  /* para onde vai (compacto) */
  .mes-para { gap: 6px; padding: 16px 20px; }
  .mes-para .card-cab { align-items: center; margin-bottom: 4px; }
  .mes-seg-peq { height: 30px; padding: 3px; border-radius: 15px; background: var(--paper); grid-auto-columns: auto; }
  .mes-seg-peq > button { padding: 0 10px; border-radius: 12px; font-size: 12px; }
  .mes-seg-peq > button::after { inset: -7px -1px; }
  .mes-frase-peq { font: 400 17px/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); margin-bottom: 4px; }
  .mes-catl-lista { list-style: none; }
  .mes-catl { display: grid; grid-template-columns: 26px minmax(0, 1fr) 72px 84px; align-items: center; column-gap: 10px; min-height: 38px; font-size: 14px; }
  .mes-catl > .ms { font-size: 18px; color: var(--c); }
  .mes-catl-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mes-catl-barra { display: block; height: 5px; border-radius: 3px; background: var(--chip); overflow: hidden; }
  .mes-catl-barra > span { display: block; height: 100%; border-radius: 3px; background: var(--c); }
  .mes-catl-v { text-align: right; font-variant-numeric: tabular-nums; }
  .mes-para .mes-ver { min-height: 40px; border-top: 0; font-size: 13px; }

  /* fixo contra variável + onde se gastou */
  .mes-fvl { gap: 10px; }
  .mes-fvl .mes-fv-barra { height: 10px; }
  .mes-fvl-n { display: flex; justify-content: space-between; gap: 8px; font: 400 12.5px var(--sans); color: var(--ink2); }
  .mes-fvl-n b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .mes-fvl-cartoes .linha { min-height: 30px; padding: 2px 0; border: 0; font-size: 13.5px; }
  .mes-fvl-cartoes .linha-txt { color: var(--ink2); }
  .mes-fvl-cartoes .mes-v { font: 400 13.5px var(--sans); }

  .mes-extra .lista .linha { min-height: 52px; font-size: 14px; }
  .mes-extra .cat-ico.sm { width: 36px; height: 36px; }
  .mes-12 { gap: 10px; }
  .mes-12-barra { height: 48px; }
  .mes-12-graf { gap: 5px; }
  .mes-12-lista .linha { min-height: 40px; font-size: 14px; }
  .mes-casa { gap: 10px; }

  /* poupança e consumos */
  .mes-pc { gap: 10px; }
  .mes-pc-topo { display: flex; gap: 14px; align-items: flex-end; }
  .mes-pc .mes-poup-v { font-size: 26px; }
  .mes-pc .mes-poup-d { font-size: 12.5px; }
  .mes-pc .mes-poup-barras { height: 44px; width: 110px; gap: 4px; }
  .mes-pc .mes-poup-barras > span { background: color-mix(in oklch, var(--green) 35%, var(--card)); }
  .mes-pc .mes-poup-barras > span.ult { background: var(--green); }
  .mes-pc-lista { border-top: 1px solid var(--line); }
  .mes-pc-lista .mes-cons { min-height: 36px; font-size: 13.5px; }
  .mes-pc-lista .linha-sub { display: none; }

  /* onde dá para cortar: título à esquerda e os cartões caramelo em linha */
  .mes-largo .mes-cortar { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .mes-cortar-t { display: flex; align-items: center; font: 400 21px/1.15 var(--serif); letter-spacing: -.01em; }

  /* mês fechado */
  .mes-largo .mes-fecho { padding: 20px 22px; border-radius: var(--r-card); }
  .mes-largo .mes-acordo { padding: 16px 20px 6px; }
  .mes-largo .mes-rever { height: 44px; }
}