:root {
    color-scheme: light dark;
    accent-color: var(--brand);

    --bg: #f1f2f7;
    --surface: #ffffff;
    --soft: #f5f6fa;
    --ink: #14161c;
    --text: #3b4150;
    --muted: #697083;
    --line: #e7e9f0;
    --brand: #7f9523;
    --brand-contrast: #ffffff;
    --positive: #11804a;
    --negative: #c62f3a;
    --on-negative: #ffffff;
    --pos: #1a9d5f; --neg: #e5484d; --warn: #ee8a1d; --info: #2f62f0; --viol: #7c5cf0; --neu: #6b7385;
    --series-faturamento: #2f62f0;
    --series-pagamentos: var(--neg);
    --c1: #2f62f0; --c2: #f0a81c; --c3: #1fa971; --c4: #7c5cf0; --c5: #ee5a93;
    --foco: #14161c;
    --sombra: 0 1px 2px rgb(20 24 40 / .04), 0 8px 24px -16px rgb(20 24 40 / .12);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --bg: #0e1015;
        --surface: #171a21;
        --soft: #1e222b;
        --ink: #eef0f6;
        --text: #c6cad6;
        --muted: #98a0b2;
        --line: #262a34;
        --brand: #7f9523;
        --brand-contrast: #ffffff;
        --positive: #5fd39b;
        --negative: #ff8c93;
        --on-negative: #1a0b0a;
        --pos: #5fd39b; --neg: #ff8c93; --warn: #f5ae5b; --info: #6d94ff; --viol: #b3a1ff; --neu: #98a0b2;
        --series-faturamento: #6d94ff;
        --series-pagamentos: var(--neg);
        --c1: #6d94ff; --c2: #f5c04a; --c3: #5fd39b; --c4: #b3a1ff; --c5: #ff8fb8;
        --foco: #eef0f6;
        --sombra: 0 1px 0 rgb(255 255 255 / .03) inset, 0 12px 28px -14px rgb(0 0 0 / .6);
    }
}
:root[data-tema="escuro"] {
    --bg: #0e1015;
    --surface: #171a21;
    --soft: #1e222b;
    --ink: #eef0f6;
    --text: #c6cad6;
    --muted: #98a0b2;
    --line: #262a34;
    --brand: #7f9523;
    --brand-contrast: #ffffff;
    --positive: #5fd39b;
    --negative: #ff8c93;
    --on-negative: #1a0b0a;
    --pos: #5fd39b; --neg: #ff8c93; --warn: #f5ae5b; --info: #6d94ff; --viol: #b3a1ff; --neu: #98a0b2;
    --series-faturamento: #6d94ff;
    --series-pagamentos: var(--neg);
    --c1: #6d94ff; --c2: #f5c04a; --c3: #5fd39b; --c4: #b3a1ff; --c5: #ff8fb8;
    --foco: #eef0f6;
    --sombra: 0 1px 0 rgb(255 255 255 / .03) inset, 0 12px 28px -14px rgb(0 0 0 / .6);
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }
/* Clareamento da marca (degradês) e cores do menu lateral */
:root {
    --brand-2: color-mix(in srgb, var(--brand) 72%, #fff);
    --menu-bg: var(--surface);
    --menu-ink: var(--text);
    --menu-muted: color-mix(in srgb, var(--menu-ink) 75%, var(--menu-bg));
    --menu-line: color-mix(in srgb, var(--menu-ink) 14%, var(--menu-bg));
    --menu-hover: color-mix(in srgb, var(--menu-ink) 9%, var(--menu-bg));
    --menu-active: color-mix(in srgb, var(--menu-ink) 15%, var(--menu-bg));
}
/* Tokens --pv-* seguem a marca */
:root {
    --pv-bg: var(--bg);
    --pv-surface: var(--surface);
    --pv-surface-2: var(--bg);
    --pv-ink: var(--ink);
    --pv-sidebar: var(--surface);
    --pv-sidebar-ink: var(--ink);
    --pv-text: var(--text);
    --pv-muted: var(--muted);
    --pv-faint: var(--muted);
    --pv-line: var(--line);
    --pv-border: var(--line);
    --pv-primary: var(--brand);
    --pv-primary-hover: color-mix(in srgb, var(--brand) 82%, #000);
    --pv-danger: var(--negative);
    --pv-ok: var(--positive);
    --pv-radius: 18px;
    --pv-radius-sm: 12px;
}
.pv-body { background: var(--bg); }
.pv-body :focus-visible { outline-color: var(--foco); }
.pv-body input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible,
.pv-body select:focus-visible,
.pv-body textarea:focus-visible,
.pv-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.pv-btn-primary { color: var(--brand-contrast); }
.pv-btn-primary:hover { color: var(--brand-contrast); }

/* Shell: menu lateral (claro) */
.pv-sidebar { background: var(--menu-bg); border-inline-end: 1px solid var(--menu-line); }
.pv-brand { border-bottom: 0; }
.pv-brand-name { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.05rem/1 var(--pv-sans); letter-spacing: -.01em; text-transform: none; color: var(--menu-ink); }
.pv-brand-name:not(:has(img))::before { content: ""; width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(145deg, var(--brand-2), var(--brand)); flex: none; }
.pv-nav-label { color: var(--menu-muted); letter-spacing: .1em; }
.pv-nav-item { color: var(--menu-ink); border-radius: 12px; font-weight: 500; transition: background .15s, color .15s; }
.pv-nav-item i { color: var(--menu-muted); }
.pv-nav-item:hover { background: var(--menu-hover); color: var(--menu-ink); }
.pv-nav-item.is-active { background: var(--menu-active); color: var(--menu-ink); }
.pv-nav-item.is-active > span:not(.pv-badge) { font-weight: 700; }
.pv-nav-item.is-active i { color: var(--menu-ink); }
.pv-nav-item.is-off { color: var(--menu-muted); cursor: not-allowed; }
.pv-nav-item.is-off:hover { background: none; color: var(--menu-muted); }
.pv-tag-breve { margin-inline-start: auto; padding: 3px 7px 2px; border: 0; border-radius: 99px; background: var(--menu-hover); font: 600 11px/1.2 var(--pv-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--menu-muted); }
.pv-nav-item > span.pv-tag-breve { flex: 0 0 auto; margin-inline-start: auto; overflow: visible; }
.pv-sidebar-foot { border-top-color: var(--menu-line); }
.pv-sitelink { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: start; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--menu-ink); border-radius: 12px; }
.pv-sitelink:hover { background: var(--menu-hover); color: var(--menu-ink); }
.pv-sidebar .pv-sitelink, .pv-drawer-foot .pv-sitelink { background: none; }
.pv-sidebar .pv-sitelink:hover, .pv-drawer-foot .pv-sitelink:hover { background: var(--menu-hover); }

/* Menu do celular (drawer): mesmas cores do menu lateral */
.pv-drawer { background: var(--menu-bg); }
.pv-drawer-head { border-bottom-color: var(--menu-line); }
.pv-drawer-head span, .pv-drawer-head .pv-iconbtn { color: var(--menu-ink); }
.pv-drawer-head .pv-iconbtn:hover { background: var(--menu-hover); color: var(--menu-ink); }
.pv-drawer .pv-nav-label { color: var(--menu-muted); }
.pv-drawer .pv-nav-item { color: var(--menu-ink); }
.pv-drawer .pv-nav-item:hover { background: var(--menu-hover); color: var(--menu-ink); }
.pv-drawer .pv-nav-item.is-active { background: var(--menu-active); }
.pv-drawer .pv-nav-item.is-off, .pv-drawer .pv-nav-item.is-off:hover { color: var(--menu-muted); background: none; }
.pv-drawer-foot { border-top-color: var(--menu-line); }

/* Shell: topo */
.pv-header { background: var(--bg); box-shadow: none; } /* sem backdrop-filter: com o menu recolhendo, o Chrome deixava os cartoes sem pintar */
.pv-avatar { background: var(--brand); color: var(--brand-contrast); }
.pv-user-meta small { text-decoration: none; }
.pv-user { cursor: default; }
.pv-user:hover { background: none; }
.pv-user:hover .pv-user-meta small { color: var(--pv-muted); }

.pv-pular { position: absolute; inset-inline-start: -999px; top: 0; z-index: 100; background: var(--surface); color: var(--ink); padding: .75rem 1rem; }
.pv-pular:focus { inset-inline-start: 0; }
.pv-header-narrow { align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.pv-brand-logo { max-height: 36px; max-width: 160px; display: block; }
.pv-ico-15 { font-size: 15px; }
.pv-ico-16 { font-size: 16px; }
.pv-wrap.pv-w-dash { max-width: 1240px; margin: 0 auto; }
.alerta { background: color-mix(in srgb, var(--neg) 9%, var(--surface)); color: var(--negative); border: 1px solid var(--negative); border-radius: 14px; padding: .75rem 1rem; margin: 0 0 1rem; font-weight: 600; }
.alerta--ok { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); color: var(--positive); border-color: var(--positive); }
.alerta--info { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--brand); border-color: var(--brand); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); font-size: .875rem; }
.nota { margin-top: .5rem; }
.pv-header-title { color: var(--ink); }
.pv-iconbtn { color: var(--ink); }

/* Topo da página */
.pagina-topo { display: grid; gap: 1rem; padding: .25rem 0 1.1rem; }
.pagina-topo > * { min-width: 0; }
.pagina-topo .eyebrow { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.pagina-topo h1 { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.pagina-topo h1 em { font-style: normal; color: var(--brand); }
.pagina-topo .muted { margin: .35rem 0 0; font-size: .875rem; }
.pagina-topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.mes-form { display: flex; align-items: center; gap: .5rem; max-width: 100%; padding: .3rem .3rem .3rem 1rem; background: var(--surface); border-radius: 999px; box-shadow: var(--sombra); }
.mes-form label { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.mes-form input { flex: 1 1 9rem; min-width: 0; height: 36px; padding: 0 .75rem; font: .8125rem var(--pv-mono); color: var(--ink); background: var(--soft); border: 1px solid transparent; border-radius: 999px; outline: none; transition: border-color .15s, box-shadow .15s; }
.mes-form input:hover { border-color: var(--line); }
.mes-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 36px; padding: 0 1.2rem; font: 600 .8125rem/1 var(--pv-sans); color: var(--brand-contrast); background: var(--brand); border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: filter .15s, transform .15s; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn--sec { color: var(--ink); background: var(--surface); border-color: var(--line); }
.btn--sec:hover { filter: none; background: var(--soft); }
.atualizacao { display: inline-flex; align-items: center; gap: .5rem; margin: 0; margin-inline-end: .25rem; padding: 0; padding-inline-end: 1rem; border-inline-end: 1px solid var(--line); font: .72rem/1 var(--pv-mono); color: var(--muted); white-space: nowrap; }
.atualizacao strong { font-weight: 600; color: var(--ink); }
.atualizacao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 22%, transparent); }
@media (min-width: 900px) { .pagina-topo { grid-template-columns: 1fr auto; align-items: center; } }
@media (max-width: 640px) { .mes-form { flex-wrap: wrap; border-radius: 24px; } .atualizacao { flex: 1 0 100%; margin: 0; padding: .25rem 0 .4rem; border-inline-end: 0; white-space: normal; flex-wrap: wrap; } }
@media (max-width: 480px) { .mes-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* Blocos */
.blocos { display: grid; gap: 1.25rem; }
.bloco { position: relative; background: var(--surface); border-radius: 26px; padding: 1.25rem 1.4rem 1.5rem; min-width: 0; box-shadow: var(--sombra); animation: sobe .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.bloco > h2 { margin: 0; padding-inline-end: 3rem; font-size: 1rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.bloco > .sub { margin: .15rem 0 1.1rem; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.bloco:not(.bloco--caixa):not(.bloco--formas) > h2:not(:has(+ .sub)) { margin-bottom: 1rem; }
.bloco--kpi { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.bloco--kpi > h2 { padding-inline-end: 0; font-size: 1.0625rem; }
.dia-sem { margin-inline-start: .35rem; font-weight: 400; color: var(--muted, var(--text)); }
.bloco--kpi > .sub { margin-bottom: .85rem; }
.vazio { color: var(--muted); padding: .5rem 0; margin: 0; }
.par { display: grid; gap: 1.25rem; }
@media (min-width: 1100px) { .par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .par--grafico { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.blocos > :nth-child(2) { animation-delay: .05s; }
.blocos > :nth-child(3) { animation-delay: .1s; }
.blocos > :nth-child(4) { animation-delay: .15s; }
.blocos > :nth-child(5) { animation-delay: .2s; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }

/* Cartões */
.grupo { display: grid; gap: .875rem; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grupo--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grupo--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Resumo do dia: título + cartões dentro de um cartão maior */
.bloco--caixa { padding: 1.1rem; border-radius: 24px; background: var(--surface); box-shadow: var(--sombra); }
.bloco--caixa > h2 + .grupo, .bloco--formas > h2 + .grupo { margin-top: .85rem; }
.bloco--caixa .cel:not(.t-navy):not(.t-neg-forte):not(.t-atraso) { background: var(--soft); box-shadow: none; }
.bloco--caixa .cel.t-atraso { box-shadow: none; }
.bloco--formas { padding: 1.1rem 0 0; border-radius: 24px; background: var(--surface); box-shadow: var(--sombra); }
.bloco--formas > h2, .bloco--formas > .sub { padding-inline: 1.1rem; }
.bloco--formas > .sub { margin-bottom: .85rem; }
.grupo--formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-bottom: 1.1rem; }
@media (min-width: 720px) { .grupo--formas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .grupo--formas .cel { padding-inline: .5rem; } }
.grupo--formas .cel { --barra: var(--info); padding: .15rem 1rem; justify-content: flex-end; gap: .6rem; border-radius: 0; background: none; box-shadow: none; }
.grupo--formas .cel:nth-child(even) { border-inline-start: 1px solid var(--line); }
@media (min-width: 720px) { .grupo--formas .cel:nth-child(even) { border-inline-start: 0; } .grupo--formas .cel .v { font-size: clamp(.95rem, 9cqi, 1.3rem); } }
.grupo--formas dt { white-space: nowrap; display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--muted); }
.grupo--formas dt::before { content: ""; flex: none; width: 3px; height: 1em; border-radius: 2px; background: var(--barra); }
.grupo--formas .cel:nth-child(6n+2) { --barra: var(--warn); } .grupo--formas .cel:nth-child(6n+3) { --barra: var(--pos); } .grupo--formas .cel:nth-child(6n+4) { --barra: #38b6e8; }
.grupo--formas .cel:nth-child(6n+5) { --barra: var(--viol); } .grupo--formas .cel:nth-child(6n) { --barra: var(--neg); }
.grupo--formas .cel .v { margin-top: 0; font-weight: 700; }
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.125rem; height: 1.125rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: .95rem; cursor: help; }
.info:hover, .info:focus-visible { color: var(--brand); }
.info:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.info::after { content: attr(data-dica); position: absolute; z-index: 10; bottom: calc(100% + .5rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: 14rem; padding: .5rem .65rem; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: .75rem; font-weight: 400; line-height: 1.35; text-align: start; display: none; pointer-events: none; }
.info:hover::after, .info:focus-visible::after { display: block; }
.grupo--formas .cel:first-child .info::after { left: auto; inset-inline-start: 0; transform: none; }
.grupo--formas .cel:last-child .info::after { left: auto; inset-inline-end: 0; transform: none; }
@media (max-width: 719px) { .grupo--formas .cel:nth-child(even) .info::after { left: auto; inset-inline-end: 0; transform: none; } }
.grupo--formas .cel--total .v { color: var(--info); }
.cel { --tone: var(--neu); position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; border-radius: 24px; background: var(--surface); box-shadow: var(--sombra); }
.cel dt { display: block; margin-top: 3.2rem; font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.cel dd { margin: 0; }
.cel .ico { position: absolute; top: 1rem; inset-inline-start: 1.1rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.2rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, var(--surface)); }
.cel .v { margin-top: .35rem; font-size: clamp(.9rem, 13cqi, 1.7rem); white-space: nowrap; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cel dt, .cel .s { overflow-wrap: anywhere; text-wrap: balance; }
.cel .s { font-size: .75rem; line-height: 1.35; color: var(--muted); }
.rs { margin-inline-end: .3em; font-size: .55em; font-weight: 600; letter-spacing: .02em; vertical-align: .25em; opacity: .6; }
.secoes__val .rs { font-size: .8em; vertical-align: baseline; }
.neg { color: var(--negative); }
.t-info { --tone: var(--info); } .t-pos { --tone: var(--pos); } .t-neg { --tone: var(--neg); } .t-neu { --tone: var(--neu); } .t-warn { --tone: var(--warn); } .t-viol { --tone: var(--viol); }
.t-neg .v { color: var(--negative); }
.t-atraso { background: color-mix(in srgb, var(--neg) 8%, var(--surface)); }
.t-pago { background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.t-pago .v { color: var(--positive); }
/* Saldo: cartão verde claro (igual ao "pago"), ou vermelho forte se negativo */
.t-navy { --tone: var(--pos); background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.t-navy .v { color: var(--positive); }
.t-neg-forte { color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 18px 28px -18px rgb(229 72 77 / .7);
    background: radial-gradient(120% 100% at 100% 0, rgb(255 255 255 / .08), transparent 55%), linear-gradient(155deg, #d6363d, #c62f3a 60%, #a5232d); }
.t-neg-forte dt, .t-neg-forte .v, .t-neg-forte .neg, .t-neg-forte .s { color: #fff; }
.t-neg-forte .ico { color: #fff; background: rgb(255 255 255 / .2); }
/* Mini: formas de pagamento, sem ícone */
.cel--mini { gap: .1rem; padding: .9rem 1.1rem 1rem; border-radius: 20px; }
.cel--mini dt { margin-top: 0; color: var(--muted); font-weight: 500; }
.cel--mini .v { margin-top: .2rem; font-size: clamp(1.1rem, 11cqi, 1.4rem); }
/* Dentro de um bloco branco, os cartões viram "ladrilhos" cinza */
.bloco:not(.bloco--kpi) .cel { background: var(--soft); box-shadow: none; }
.bloco:not(.bloco--kpi) .cel.t-navy,
.bloco:not(.bloco--kpi) .cel.t-pago { background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.bloco:not(.bloco--kpi) .cel.t-atraso { background: color-mix(in srgb, var(--neg) 8%, var(--surface)); }
.bloco:not(.bloco--kpi) .cel .ico { background: var(--surface); }
.bloco:not(.bloco--kpi) .cel dt { margin-top: 3rem; }
/* Contas a receber/pagar: título ao lado do ícone */
.bloco:not(.bloco--kpi) .grupo--2 .cel dt { display: flex; align-items: center; min-height: 2.5rem; margin-top: 0; padding-inline-start: 3.25rem; }

/* Meta: cartão azul em gradiente */
/* Azul fixo (não muda com a cor da marca nem com o tema), texto branco */
.bloco--meta { color: #fff; background: radial-gradient(90% 120% at 100% 0, rgb(255 255 255 / .08), transparent 55%), linear-gradient(150deg, #3566f0, #2f62f0 50%, #2650d0); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 24px 40px -24px rgb(47 98 240 / .75); }
.bloco--meta > h2 { color: #fff; }
.bloco--meta > .sub { color: #fff; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.anel { position: relative; flex: none; width: 7.5rem; height: 7.5rem; }
.anel svg { display: block; width: 100%; height: 100%; }
.anel circle { fill: none; stroke-width: 3.2; }
.anel__fundo { stroke: rgb(255 255 255 / .25); }
.anel__cheio { stroke: #fff; stroke-linecap: round; }
.anel__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.anel__txt strong { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.anel__txt span { margin-top: .2rem; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.meta__itens { display: grid; flex: 1 1 18rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0; }
.meta__itens > div { padding: .9rem 1.1rem 1rem; border-radius: 18px; background: rgb(255 255 255 / .16); }
.meta__itens dt { font-size: .75rem; color: #fff; }
.meta__itens dd { margin: .2rem 0 0; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 650; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.bloco--meta .rs { opacity: .8; }
.bloco--meta > .vazio { color: rgb(255 255 255 / .85); }

/* Barras */

/* Gráfico */
.legenda { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .75rem; color: var(--text); }
.legenda li { display: flex; align-items: center; gap: .45rem; }
.sw { width: 9px; height: 9px; border-radius: 50%; }
.sw--fat { background: var(--series-faturamento); }
.sw--pag { background: var(--series-pagamentos); }
.bloco:has(.grafico) { container-type: inline-size; }
.grafico { display: block; width: 100%; height: auto; }
.grafico.largo { display: none; }
@container (min-width: 480px) {
    .grafico.largo { display: block; }
    .grafico.estreito { display: none; }
}
.g-eixo { fill: var(--muted); }
.g-sel .g-mes-rot, .g-mes.ativo .g-mes-rot { fill: var(--ink); font-weight: 700; }
/* clicou em outro mês: o destacado inicial perde o destaque */
.grafico:has(.g-mes.ativo) .g-sel:not(.ativo) .g-mes-rot { fill: var(--muted); font-weight: 400; }
.grafico:has(.g-mes.ativo) .g-sel:not(.ativo):not(:hover) :is(.g-fat, .g-pag) { opacity: .4; }
.g-grade { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.g-fat { fill: var(--series-faturamento); rx: 3px; }
.g-pag { fill: var(--series-pagamentos); rx: 3px; }
.g-fat, .g-pag { transition: opacity .15s; }
.g-off { opacity: .4; }
.g-mes:hover .g-off, .g-mes.ativo .g-off { opacity: 1; }
.g-hit { fill: transparent; }
.g-mes:hover .g-hit, .grafico:not(:has(.g-mes:hover)) .g-mes.ativo .g-hit { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.g-dica { fill: var(--muted); font-weight: 500; opacity: 0; pointer-events: none; }
.g-dica-mes { fill: var(--ink); font-weight: 700; }
.g-pt-fat { fill: var(--series-faturamento); } .g-pt-pag { fill: var(--series-pagamentos); }
/* só uma legenda por vez: mês sob o mouse > mês clicado > mês destacado */
.g-mes:hover .g-dica { opacity: 1; }
.grafico:not(:has(.g-mes:hover)) .g-mes.ativo .g-dica { opacity: 1; }
.grafico:not(:has(.g-mes:hover, .g-mes.ativo)) .g-sel .g-dica { opacity: 1; }

/* Vendas por seção */
.secoes { display: grid; margin: 0; padding: 0; list-style: none; }
.secoes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .4rem .9rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.secoes li:last-child { border-bottom: 0; }
.secoes__nome { font-size: .8125rem; color: var(--text); overflow-wrap: anywhere; text-transform: lowercase; }
.secoes__nome::first-letter { text-transform: uppercase; }
.secoes__val { display: flex; align-items: baseline; gap: .6rem; text-align: end; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ver-todas { display: none; margin-top: .5rem; padding: 0; border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--brand); cursor: pointer; }
.js .ver-todas { display: inline-flex; align-items: center; gap: .25rem; }
.ver-todas::after { content: "→"; }
.ver-todas:hover { text-decoration: underline; }
.ver-todas:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.modal { width: min(32rem, calc(100% - 2rem)); max-height: 85vh; padding: 1.1rem 1.25rem 1rem; border: 0; border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .45); }
.modal::backdrop { background: rgb(15 20 35 / .5); }
.modal__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.modal__topo h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.modal__fechar { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: 1.15rem; cursor: pointer; }
.modal__fechar:hover { color: var(--ink); }
.modal__fechar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.carregando .cel, .carregando .secoes li, .carregando .grafico { color: transparent; background: linear-gradient(90deg, var(--line) 25%, var(--bg) 50%, var(--line) 75%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
.carregando .cel * { visibility: hidden; }
@keyframes brilho { to { background-position: -200% 0; } }

.aviso-versao {
    position: fixed; inset-inline: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 200;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: 480px; margin-inline: auto; padding: .75rem 1rem;
    background: var(--ink); color: var(--surface); border-radius: 16px; font-size: .9rem;
}
.aviso-versao[hidden] { display: none; }
.aviso-versao .pv-btn { min-height: 44px; background: var(--surface); color: var(--ink); border-color: var(--surface); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Preferencias */
.pf-titulo { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 16px; }
.pf-h { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.pf-sub { margin: 0 0 12px; }
.pf-box { border: 1px solid var(--pv-line); border-radius: 9px; overflow: hidden; }
.pf-row { padding: 12px 14px; margin: 0; }
.pf-img { width: 64px; height: 44px; flex: 0 0 auto; object-fit: contain; border: 1px solid var(--pv-line); border-radius: 7px; background: #fff; }
.pf-arquivo { flex: 1 1 100%; margin-top: 2px; }
.pf-arquivo:empty { display: none; }
.pf-acoes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.pf-aviso { margin: 0 0 .75rem; color: var(--negative); font-weight: 600; }
.pf-rec { margin-top: 2px; color: var(--ink); font-weight: 500; }

.pv-creditos { padding: 14px 16px 22px; text-align: center; font-size: 12px; color: var(--muted); }
.pv-creditos span { display: inline-block; white-space: nowrap; }
.pv-creditos a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pv-creditos a:hover { color: var(--brand); }
.pv-auth-box .pv-creditos { margin-top: 10px; }

/* Menu recolhido: o icone do app no lugar da logo */
.pv-brand-icon { display: none; width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.pv-collapsed .pv-brand-icon { display: block; }
.pv-drawer-head .pv-iconbtn { margin-inline-start: auto; }

.pv-header-brand { display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; color: var(--ink); }

/* Topo no celular: logo a esquerda, botao de menu colado na direita */
.pv-header-narrow { justify-content: space-between; }
.pv-header-narrow .pv-iconbtn { order: 2; margin-inline-end: -6px; }

.pv-drawer { bottom: auto; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.pv-drawer .pv-nav { flex: 0 0 auto; overflow: visible; }
.pv-drawer-foot { margin-top: auto; padding-bottom: max(14px, env(safe-area-inset-bottom)); }

.info::before { content: ""; position: absolute; inset: -13px; }
@media (pointer: coarse) {
    .mes-form input, .btn { height: 44px; }
    .mes-form input { font-size: 16px; }
    .modal__fechar { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
    .pf-row:has(.pf-img) .pv-settings-meta { flex: 1 1 9rem; }
}

@media (max-width: 419px) { .grupo--2 { grid-template-columns: minmax(0, 1fr); } }

/* Menu lateral: largura para caber "Movimentação" + etiqueta "Em breve" */
:root { --pv-sidebar-w: 264px; }

.pv-shell { --pv-wrap-max: 1000px; }
.pv-shell[data-largura="dash"] { --pv-wrap-max: 1240px; }
@media (min-width: 1080px) {
    .pv-header-bar { padding-inline-end: max(16px, calc((100% - var(--pv-wrap-max)) / 2)); }
}

@media (max-width: 560px) {
    .pf-row:has(.pv-color-hex) .pv-settings-meta { flex: 1 1 9rem; }
    .pf-row:has(.pv-color-hex) .pv-color-hex { flex: 1 1 100%; width: auto; max-width: none; }
}

/* Modal aberta: a página de trás não rola */
body:has(dialog[open]) { overflow: hidden; }

@media (max-width: 359px) {
    .bloco--caixa { padding: .75rem; }
    .grupo { gap: .5rem; }
    .cel { padding-inline: .75rem; }
    .cel .ico { inset-inline-start: .75rem; }
}