.demo-mes {
--verde: #1F6B44; --esmeralda: #1F8A54; --ouro: #C98F1F; --ouro-texto: #8A6212;
--creme: #FDF3DD; --papel: #FFFDF7; --sombreado: #F6EFDC; --tinta: #16211B;
--linha: #E0D8C2; --corpo: #3D4C44; --apagado: #5F6E64;
--positivo: #1B7A3D; --negativo: #B3261E; --projecao: #A9B8AE;
--serifa: 'Newsreader', Georgia, 'Times New Roman', serif;
--sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
max-width: 390px; margin: 0 auto;
background: var(--papel); color: var(--tinta);
font: 16px/1.55 var(--sans);
border: 1px solid var(--linha); border-radius: 18px; overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.demo-mes *, .demo-mes *::before, .demo-mes *::after { box-sizing: border-box; }
.demo-mes p, .demo-mes h3, .demo-mes figure, .demo-mes ul { margin: 0; }
.demo-mes ul { list-style: none; padding: 0; }
.dm-topo { padding: 18px 16px 16px; border-bottom: 1px solid var(--linha); }
.dm-mes { font-family: var(--serifa); font-weight: 600; font-size: 27px; line-height: 1.1;
letter-spacing: -.4px; color: var(--verde); }
.dm-numeros { display: grid; gap: 10px; margin-top: 14px; }
.dm-num { padding: 10px 12px; border-radius: 12px; background: var(--sombreado); border: 1px solid var(--linha); }
.dm-num--forte { background: var(--tinta); border-color: var(--tinta); }
.dm-num__rotulo { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: var(--apagado); }
.dm-num__valor { display: block; margin-top: 2px; font-size: 22px; font-weight: 700;
letter-spacing: -.4px; font-variant-numeric: tabular-nums; color: var(--tinta); }
.dm-num__nota { display: block; margin-top: 1px; font-size: 12px; line-height: 1.45;
color: var(--apagado); font-variant-numeric: tabular-nums; }
.dm-num--forte .dm-num__rotulo, .dm-num--forte .dm-num__nota { color: #A7BCAF; }
.dm-num--forte .dm-num__valor { font-size: 30px; color: var(--papel); }
.dm-negativo { color: var(--negativo); }
.dm-num--forte .dm-negativo { color: #F2A9A3; }
.dm-planilha { padding-bottom: 6px; }
.dm-cols, .dm-grupo__cab, .dm-item {
display: grid; grid-template-columns: 44px minmax(0, 1fr) 80px 84px; gap: 2px; align-items: center;
}
.dm-cols { padding: 10px 14px 8px; border-bottom: 1px solid var(--linha);
font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: var(--apagado); }
.dm-cols span:first-child { grid-column: 1 / 3; }
.dm-cols span:not(:first-child) { text-align: right; }
.dm-col-plan { color: var(--verde); }
.dm-col-real { color: var(--ouro-texto); }
.dm-grupo { border: 1px solid color-mix(in srgb, var(--cor, var(--linha)) 45%, transparent); border-radius: 10px; margin: 8px 0; overflow: hidden; }
.dm-grupo__cab { padding: 11px 14px 9px; background: color-mix(in srgb, var(--cor, var(--creme)) 13%, var(--papel)); }
@supports not (background: color-mix(in srgb, red 10%, white)) { .dm-grupo__cab { background: var(--creme); } .dm-grupo { border-color: var(--linha); } }
.dm-grupo__nome { grid-column: 1 / 3; font-size: 12.5px; font-weight: 700; letter-spacing: .6px;
text-transform: uppercase; color: var(--cor-texto, var(--corpo)); }
.dm-grupo__plan, .dm-grupo__real { text-align: right; white-space: nowrap; font-size: 12px; font-weight: 700;
font-variant-numeric: tabular-nums; color: var(--corpo); }
.dm-grupo__real { color: var(--ouro-texto); }
.dm-item { padding: 4px 14px; border-bottom: 1px solid var(--sombreado); font-size: 14px;
font-variant-numeric: tabular-nums; }
.dm-itens li:last-child { border-bottom: 0; }
.dm-bolinha { width: 44px; height: 44px; margin-left: -11px; padding: 0; border: 0; background: none;
display: flex; align-items: center; justify-content: center; cursor: pointer;
-webkit-tap-highlight-color: transparent; }
.dm-bolinha__disco { width: 20px; height: 20px; border-radius: 50%; position: relative;
border: 1.8px solid var(--cor, var(--apagado)); background: var(--papel);
transition: background-color .16s ease, border-color .16s ease; }
.dm-bolinha--fixa { cursor: default; }
.dm-bolinha--fixa::after { content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--cor, var(--apagado)); opacity: .45; }
.dm-item--pago .dm-bolinha__disco { background: var(--cor, var(--positivo)); border-color: var(--cor, var(--positivo)); }
.dm-item--pago .dm-bolinha__disco::after { content: ""; position: absolute; left: 5.6px; top: 2.4px;
width: 4.5px; height: 9px; border: solid var(--papel); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.dm-bolinha:focus-visible { outline: none; }
.dm-bolinha:focus-visible .dm-bolinha__disco { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--verde); }
.dm-nome { min-width: 0; padding: 6px 0; }
.dm-nome b { display: block; font-weight: 400; color: var(--tinta); line-height: 1.25; text-wrap: pretty; }
.dm-nome small { display: block; font-size: 11px; color: var(--apagado); }
.dm-item--pago .dm-nome b { color: var(--apagado); text-decoration: line-through; }
.dm-plan, .dm-real { text-align: right; white-space: nowrap; font-size: 13px; }
.dm-plan { color: var(--apagado); }
.dm-real { font-weight: 700; color: var(--tinta); }
.dm-real--zero { font-weight: 400; color: #93A099; }
.dm-grafico { padding: 18px 14px 20px; background: var(--creme); border-top: 1px solid var(--linha); }
.dm-grafico__titulo { font-family: var(--serifa); font-style: italic; font-size: 17px; color: var(--verde); }
.dm-grafico svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.dm-zero { stroke: #C3B694; stroke-width: 1; }
.dm-zero__txt { font-family: var(--sans); font-size: 9.5px; fill: var(--apagado); }
.dm-eixo text { font-family: var(--sans); font-size: 10px; fill: var(--apagado); }
.dm-hoje { stroke: var(--ouro); stroke-width: 1; }
.dm-hoje__txt { font-family: var(--serifa); font-style: italic; font-size: 11px; fill: var(--ouro-texto); }
.dm-traco { stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1.4s ease-out; }
.dm-traco--proj { stroke: var(--projecao); stroke-width: 2.2; transition-delay: .15s; }
.dm-traco--conf { stroke: var(--esmeralda); stroke-width: 3.4; }
.dm-traco--neg { stroke: var(--negativo); stroke-width: 3.4; transition-delay: .5s; }
.dm-moeda { opacity: 0; transform: translateY(-14px);
transition: opacity .35s ease-out 1.3s, transform .5s cubic-bezier(.22,1,.36,1) 1.3s; }
.dm-grafico.dm-ativo .dm-moeda { opacity: 1; transform: translateY(0); }
.dm-moeda__txt { font-family: var(--sans); font-size: 11px; font-weight: 700; fill: var(--ouro-texto); }
.dm-legenda { margin-top: 8px; font-size: 12.5px; color: var(--apagado); }
.dm-chaves { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--apagado); }
.dm-chave { display: flex; align-items: center; gap: 6px; }
.dm-chave::before { content: ""; width: 14px; height: 3px; border-radius: 2px; flex: none; }
.dm-chave--conf::before { background: var(--esmeralda); }
.dm-chave--proj::before { background: var(--projecao); }
.dm-chave--neg::before { background: var(--negativo); }
@media (min-width: 720px) {
.demo-mes { max-width: 980px; border-radius: 22px;
display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "topo topo" "planilha grafico"; }
.dm-topo { grid-area: topo; padding: 26px 28px 22px; }
.dm-mes { font-size: 34px; }
.dm-numeros { grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; margin-top: 18px; }
.dm-num { padding: 12px 14px; }
.dm-num--forte .dm-num__valor { font-size: 33px; }
.dm-planilha { grid-area: planilha; border-right: 1px solid var(--linha); }
.dm-grafico { grid-area: grafico; border-top: 0; align-self: start; position: sticky; top: 0; }
.dm-grafico svg { margin-top: 14px; }
.dm-cols, .dm-grupo__cab, .dm-item { grid-template-columns: 44px minmax(0, 1fr) 92px 96px; }
.dm-item { font-size: 15px; }
.dm-plan, .dm-real { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.dm-traco, .dm-moeda, .dm-bolinha__disco { transition: none !important; }
.dm-moeda { opacity: 1 !important; transform: none !important; }
}