/* =====================================================================================
   Verum — tema "Aurora": vidro, luz e silêncio.
   Fundo com luzes suaves nas cores da marca, superfícies de vidro, DM Sans no texto e Manrope nos títulos e números.
   Claro e escuro (segue o sistema até a pessoa escolher). As cores da marca vêm da configuração:
   --pm-marca e --pm-destaque (definidas no _Layout). Classes do portal começam com "pm-".
   ===================================================================================== */

@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans.woff2") format("woff2-variations"), url("../fonts/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2-variations"), url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* ---- Tokens: claro ------------------------------------------------------------------ */
:root {
    --pm-fonte: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --pm-fonte-titulo: "Manrope", "DM Sans", ui-sans-serif, system-ui, sans-serif;
    --pm-fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    --pm-acento: var(--pm-marca, #2b59c3);
    --pm-acento-forte: color-mix(in srgb, var(--pm-acento) 82%, #000);
    --pm-acento-suave: color-mix(in srgb, var(--pm-acento) 11%, transparent);
    --pm-acento-linha: color-mix(in srgb, var(--pm-acento) 30%, transparent);
    --pm-no-acento: #fff;

    --pm-fundo: #eef2f7;
    --pm-ceu: linear-gradient(165deg, #f8fafc 0%, #eef2f7 48%, #f4f2ee 100%);
    --pm-aura: .34;
    --pm-vidro: rgba(255, 255, 255, .62);
    --pm-vidro-forte: rgba(255, 255, 255, .84);
    --pm-vidro-borda: rgba(255, 255, 255, .9);
    --pm-vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .85);
    --pm-desfoque: blur(22px) saturate(1.45);
    --pm-superficie: rgba(255, 255, 255, .78);
    --pm-superficie-2: rgba(240, 244, 249, .82);
    --pm-borda: rgba(16, 32, 54, .09);
    --pm-borda-forte: rgba(16, 32, 54, .16);

    --pm-texto: #0e1b2b;
    --pm-texto-2: #2b3a4e;
    --pm-suave: #5b697c;
    --pm-fraco: #8794a6;

    --pm-sombra: 0 1px 2px rgba(15, 29, 46, .04), 0 14px 34px -16px rgba(15, 29, 46, .20);
    --pm-sombra-alta: 0 34px 80px -28px rgba(15, 29, 46, .38), 0 2px 8px rgba(15, 29, 46, .06);
    --pm-anel: 0 0 0 3px color-mix(in srgb, var(--pm-acento) 28%, transparent);

    --pm-raio: 18px;
    --pm-raio-sm: 12px;
    --pm-raio-xs: 8px;
    --pm-suave-curva: cubic-bezier(.2, .7, .2, 1);

    --pm-positivo: #16804f;
    --pm-negativo: #c0392b;
    --pm-alerta: #a86a08;
    --pm-grafico-1: var(--pm-acento);
    --pm-grafico-2: var(--pm-destaque, #13a89a);
    --pm-grafico-3: #7a5af0;
    --pm-grafico-4: #e0864a;
    --pm-grafico-5: #8a98aa;
    --pm-grafico-6: #d9487a;
    --pm-tom-azul: #2f6fdb;
    --pm-tom-verde: #16935c;
    --pm-tom-violeta: #7a5af0;
    --pm-tom-ciano: #0f9fb2;
    --pm-tom-ambar: #c98510;
    --pm-tom-vermelho: #d0453a;
    --pm-tom-rosa: #c2387a;

    --pm-lateral: 268px;
    --pm-lateral-recolhida: 78px;
    color-scheme: light;
}

/* ---- Tokens: escuro ----------------------------------------------------------------- */
:root[data-tema="escuro"] {
    --pm-acento: color-mix(in srgb, var(--pm-marca, #2b59c3) 52%, #fff);
    --pm-acento-forte: color-mix(in srgb, var(--pm-marca, #2b59c3) 30%, #fff);
    --pm-acento-suave: color-mix(in srgb, var(--pm-acento) 14%, transparent);
    --pm-no-acento: #07111d;
    --pm-fundo: #070d16;
    --pm-ceu: linear-gradient(165deg, #070e18 0%, #0b1522 48%, #08101a 100%);
    --pm-aura: .24;
    --pm-vidro: rgba(17, 27, 41, .58);
    --pm-vidro-forte: rgba(17, 27, 41, .86);
    --pm-vidro-borda: rgba(170, 200, 240, .10);
    --pm-vidro-brilho: inset 0 1px 0 rgba(255, 255, 255, .05);
    --pm-superficie: rgba(22, 34, 50, .82);
    --pm-superficie-2: rgba(28, 42, 60, .7);
    --pm-borda: rgba(160, 190, 225, .11);
    --pm-borda-forte: rgba(160, 190, 225, .2);
    --pm-texto: #eaf0f8;
    --pm-texto-2: #c9d4e2;
    --pm-suave: #9aabbf;
    --pm-fraco: #6c7d92;
    --pm-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .6);
    --pm-sombra-alta: 0 40px 90px -28px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .35);
    --pm-positivo: #5fd99c;
    --pm-negativo: #ff8a80;
    --pm-alerta: #f2bd5b;
    --pm-grafico-3: #a892ff;
    --pm-grafico-4: #f4a46b;
    --pm-grafico-5: #a2b0c2;
    --pm-grafico-6: #ff7aa8;
    --pm-tom-azul: #7cb0ff;
    --pm-tom-verde: #5fd99c;
    --pm-tom-violeta: #b39dff;
    --pm-tom-ciano: #59d4e6;
    --pm-tom-ambar: #f2bd5b;
    --pm-tom-vermelho: #ff8a80;
    --pm-tom-rosa: #ff8cc6;
    color-scheme: dark;
}

/* ---- Bootstrap falando a mesma língua ------------------------------------------------ */
:root, :root[data-bs-theme] {
    --bs-body-font-family: var(--pm-fonte);
    --bs-body-font-size: .925rem;
    --bs-body-color: var(--pm-texto);
    --bs-body-bg: var(--pm-fundo);
    --bs-emphasis-color: var(--pm-texto);
    --bs-secondary-color: var(--pm-suave);
    --bs-tertiary-color: var(--pm-fraco);
    --bs-secondary-bg: var(--pm-superficie-2);
    --bs-tertiary-bg: var(--pm-acento-suave);
    --bs-border-color: var(--pm-borda);
    --bs-border-color-translucent: var(--pm-borda);
    --bs-border-radius: var(--pm-raio-xs);
    --bs-border-radius-sm: 7px;
    --bs-border-radius-lg: var(--pm-raio-sm);
    --bs-link-color: var(--pm-acento);
    --bs-link-color-rgb: 43, 89, 195;
    --bs-link-hover-color: var(--pm-acento-forte);
    --bs-primary: var(--pm-acento);
    --bs-focus-ring-color: color-mix(in srgb, var(--pm-acento) 28%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--pm-fundo);
    color: var(--pm-texto);
    font: 400 .925rem/1.55 var(--pm-fonte);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}

/* Céu: três luzes nas cores da marca, que se movem devagar, e um grão fino por cima */
body::before {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38% 36% at 10% 6%, color-mix(in srgb, var(--pm-marca, #2b59c3) calc(var(--pm-aura) * 100%), transparent), transparent 70%),
        radial-gradient(32% 30% at 94% 10%, color-mix(in srgb, var(--pm-destaque, #13a89a) calc(var(--pm-aura) * 80%), transparent), transparent 70%),
        radial-gradient(40% 42% at 72% 98%, color-mix(in srgb, #8a6cff calc(var(--pm-aura) * 60%), transparent), transparent 70%),
        var(--pm-ceu);
    animation: pm-aurora 40s ease-in-out infinite alternate;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .62 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes pm-aurora {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
    100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--pm-fonte-titulo); color: var(--pm-texto); letter-spacing: -.02em; }
h1, .h1, .h2, .h3 { font-weight: 800; }
h2, h3, h4, h5, h6, .h4, .h5, .h6 { font-weight: 700; }
a { color: var(--pm-acento); text-underline-offset: 3px; }
a:hover { color: var(--pm-acento-forte); }
::selection { background: color-mix(in srgb, var(--pm-acento) 24%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--pm-borda-forte) transparent; }
:focus-visible { outline: 2px solid var(--pm-acento); outline-offset: 2px; }
code, kbd, .pm-mono { font-family: var(--pm-fonte-mono); }
.pm-mono { font-size: .82rem; }
.text-body-secondary { color: var(--pm-suave) !important; }
.text-body { color: var(--pm-texto) !important; }
.small, small { font-size: .82em; }

/* =====================================================================================
   Estrutura: barra lateral de vidro + área principal
   ===================================================================================== */
.pm-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    width: var(--pm-lateral);
    display: flex;
    flex-direction: column;
    padding: 18px 14px 14px;
    background: var(--pm-vidro);
    -webkit-backdrop-filter: var(--pm-desfoque);
    backdrop-filter: var(--pm-desfoque);
    border-right: 1px solid var(--pm-borda);
    box-shadow: var(--pm-vidro-brilho);
    transition: width .28s var(--pm-suave-curva), transform .28s var(--pm-suave-curva);
}
.pm-principal { margin-left: var(--pm-lateral); min-height: 100vh; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; transition: margin-left .28s var(--pm-suave-curva); }
.pm-conteudo > * { max-width: 100%; }
.pm-topo-demo { display: none !important; }

.pm-marca-portal { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; text-decoration: none; color: var(--pm-texto); min-width: 0; }
.pm-marca-portal:hover { color: var(--pm-texto); }
.pm-monograma {
    flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
    color: #fff; font: 800 18px/1 var(--pm-fonte-titulo); letter-spacing: -.02em;
    background: linear-gradient(145deg, color-mix(in srgb, var(--pm-marca, #2b59c3) 70%, #fff), var(--pm-marca, #2b59c3) 55%, color-mix(in srgb, var(--pm-marca, #2b59c3) 70%, var(--pm-destaque, #13a89a)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -8px color-mix(in srgb, var(--pm-marca, #2b59c3) 70%, transparent);
}
.pm-logo { width: 40px; height: 40px; object-fit: contain; flex: none; }
.pm-marca-texto { min-width: 0; line-height: 1.15; }
.pm-marca-texto strong { display: block; font: 800 1.02rem/1.2 var(--pm-fonte-titulo); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-marca-texto small { display: block; font-size: .74rem; letter-spacing: 0; color: var(--pm-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pm-busca-atalho {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 9px 12px;
    border: 1px solid var(--pm-borda); border-radius: var(--pm-raio-sm); background: var(--pm-superficie);
    color: var(--pm-suave); font-size: .86rem; text-align: left; cursor: pointer; transition: border-color .16s, box-shadow .16s;
}
.pm-busca-atalho:hover { border-color: var(--pm-acento-linha); box-shadow: var(--pm-anel); }
.pm-busca-atalho span { flex: 1; white-space: nowrap; overflow: hidden; }
kbd, .pm-tecla { font: 600 .68rem/1 var(--pm-fonte); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--pm-borda-forte); background: var(--pm-superficie-2); color: var(--pm-suave); box-shadow: none; }

.pm-nav { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.pm-nav-item {
    position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin: 1px 0; border-radius: 11px;
    color: var(--pm-texto-2); text-decoration: none; font-size: .9rem; white-space: nowrap; transition: background .16s, color .16s;
}
.pm-nav-item:hover { background: var(--pm-superficie-2); color: var(--pm-texto); }
.pm-nav-item.ativo { background: color-mix(in srgb, var(--pm-tom-grupo, var(--pm-acento)) 13%, transparent); color: var(--pm-texto); font-weight: 600; }
.pm-nav-item.ativo::before { content: ""; position: absolute; left: -6px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--pm-tom-grupo, var(--pm-acento)); }
.pm-nav-icone { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--pm-tom-grupo, var(--pm-acento)); background: color-mix(in srgb, var(--pm-tom-grupo, var(--pm-acento)) 11%, transparent); }
.pm-nav-icone svg { width: 17px; height: 17px; }
.pm-nav-rotulo { overflow: hidden; text-overflow: ellipsis; }
.pm-nav-grupo { margin-top: 10px; }
.pm-nav-titulo {
    display: flex; align-items: center; width: 100%; gap: 8px; padding: 6px 10px; border: 0; background: none; cursor: pointer;
    color: var(--pm-fraco); font: 700 .66rem/1 var(--pm-fonte); letter-spacing: .14em; text-transform: uppercase;
}
.pm-nav-titulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pm-tom-grupo); opacity: .9; }
.pm-nav-titulo svg { margin-left: auto; width: 14px; height: 14px; transition: transform .2s; }
.pm-nav-grupo.recolhido .pm-nav-titulo svg { transform: rotate(-90deg); }
.pm-nav-itens { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .26s var(--pm-suave-curva); }
.pm-nav-itens > div { overflow: hidden; }
.pm-nav-grupo.recolhido .pm-nav-itens { grid-template-rows: 0fr; }

[data-grupo="gestao"] { --pm-tom-grupo: var(--pm-tom-violeta); }
[data-grupo="contabilidade"] { --pm-tom-grupo: var(--pm-tom-azul); }
[data-grupo="fiscal"] { --pm-tom-grupo: var(--pm-tom-ambar); }
[data-grupo="financeiro"] { --pm-tom-grupo: var(--pm-tom-verde); }
[data-grupo="reforma"] { --pm-tom-grupo: var(--pm-tom-rosa); }
[data-grupo="cadastros"] { --pm-tom-grupo: var(--pm-tom-ciano); }
[data-grupo="inicio"], [data-grupo="sistema"] { --pm-tom-grupo: var(--pm-acento); }

.pm-lateral-pe { border-top: 1px solid var(--pm-borda); padding-top: 12px; margin-top: 10px; display: grid; gap: 10px; }
.pm-lateral-linha { display: flex; align-items: center; gap: 8px; }
.pm-tema { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--pm-superficie-2); border: 1px solid var(--pm-borda); }
.pm-tema button { border: 0; background: none; color: var(--pm-suave); width: 32px; height: 28px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; transition: background .16s, color .16s; }
.pm-tema button:hover { color: var(--pm-texto); }
.pm-tema button.ativo { background: var(--pm-vidro-forte); color: var(--pm-texto); box-shadow: var(--pm-sombra); }
.pm-tema svg { width: 15px; height: 15px; }
.pm-botao-icone { border: 1px solid var(--pm-borda); background: var(--pm-superficie); color: var(--pm-suave); width: 36px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center; cursor: pointer; transition: color .16s, border-color .16s, transform .16s; }
.pm-botao-icone:hover { color: var(--pm-texto); border-color: var(--pm-acento-linha); }
.pm-botao-icone svg { width: 17px; height: 17px; }
.pm-pessoa { font: 700 .72rem/1 var(--pm-fonte); letter-spacing: .02em; color: var(--pm-marca); }
.pm-menu-pessoa { min-width: 15rem; border-color: var(--pm-borda); background: var(--pm-superficie); }

.pm-selo-demo {
    display: inline-flex; align-items: center; gap: 7px; font: 700 .64rem/1 var(--pm-fonte); letter-spacing: .12em; text-transform: uppercase;
    color: var(--pm-alerta); padding: 6px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pm-alerta) 35%, transparent);
    background: color-mix(in srgb, var(--pm-alerta) 9%, transparent); white-space: nowrap;
}
.pm-selo-demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); animation: pm-pulso 2.4s ease-in-out infinite; }
@keyframes pm-pulso { 50% { box-shadow: 0 0 0 6px transparent; } }

/* Lateral recolhida (só ícones) */
:root.pm-recolhida .pm-lateral { width: var(--pm-lateral-recolhida); }
:root.pm-recolhida .pm-principal { margin-left: var(--pm-lateral-recolhida); }
:root.pm-recolhida :is(.pm-marca-texto, .pm-busca-atalho span, .pm-busca-atalho kbd, .pm-nav-rotulo, .pm-nav-titulo, .pm-lateral-pe .pm-ocultar-recolhida) { display: none; }
:root.pm-recolhida .pm-busca-atalho { justify-content: center; padding: 9px 0; }
:root.pm-recolhida .pm-nav-item { justify-content: center; padding: 6px 0; }
:root.pm-recolhida .pm-nav-grupo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--pm-borda); }
:root.pm-recolhida .pm-nav-grupo.recolhido .pm-nav-itens { grid-template-rows: 1fr; }
:root.pm-recolhida .pm-lateral-linha { flex-direction: column; }
:root.pm-recolhida .pm-tema { flex-direction: column; }
:root.pm-recolhida .pm-marca-portal { justify-content: center; padding-left: 0; padding-right: 0; }

/* Barra do topo */
.pm-barra-topo {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 28px;
    background: color-mix(in srgb, var(--pm-fundo) 62%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--pm-borda);
}
.pm-trilha { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .84rem; color: var(--pm-suave); }
.pm-trilha strong { color: var(--pm-texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-trilha .pm-trilha-grupo { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pm-trilha .pm-trilha-grupo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pm-tom-grupo, var(--pm-acento)); }
.pm-trilha svg { width: 14px; height: 14px; opacity: .6; flex: none; }
.pm-barra-topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pm-so-celular { display: none !important; }

.pm-largura { width: 100%; max-width: 1640px; margin-left: auto; margin-right: auto; }
.pm-conteudo { flex: 1; width: 100%; max-width: 1640px; margin: 0 auto; padding: 26px 32px 40px; }
.pm-rodape { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 32px 26px; color: var(--pm-fraco); font-size: .76rem; display: flex; gap: 8px; flex-wrap: wrap; }

/* Progresso no topo (navegação e consultas) */
.pm-progresso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pm-progresso::before {
    content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--pm-marca, #2b59c3), var(--pm-destaque, #13a89a), #8a6cff);
    box-shadow: 0 0 12px color-mix(in srgb, var(--pm-destaque, #13a89a) 60%, transparent);
}
.pm-progresso.ativo { opacity: 1; }
.pm-progresso.ativo::before { animation: pm-progredir 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes pm-progredir { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 60% { transform: scaleX(.78); } 100% { transform: scaleX(.94); } }

.pm-carregando {
    position: fixed; right: 22px; bottom: 22px; z-index: 1080; display: flex; align-items: center; gap: .6rem;
    background: var(--pm-vidro-forte); -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque);
    border: 1px solid var(--pm-vidro-borda); border-radius: 999px; padding: .55rem 1rem; box-shadow: var(--pm-sombra-alta); font-size: .86rem;
}
.pm-carregando .spinner-border { color: var(--pm-acento); }

/* =====================================================================================
   Paleta de comandos (Ctrl+K)
   ===================================================================================== */
.pm-paleta-fundo { position: fixed; inset: 0; z-index: 2050; background: color-mix(in srgb, #050a12 38%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: pm-aparecer .16s ease-out; }
.pm-paleta-fundo[hidden] { display: none; }
.pm-paleta {
    width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--pm-vidro-forte); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
    border: 1px solid var(--pm-vidro-borda); border-radius: 20px; box-shadow: var(--pm-sombra-alta), var(--pm-vidro-brilho);
    animation: pm-subir .22s var(--pm-suave-curva);
}
.pm-paleta-busca { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--pm-borda); }
.pm-paleta-busca svg { width: 20px; height: 20px; color: var(--pm-suave); flex: none; }
.pm-paleta-busca input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--pm-texto); font: 500 1.05rem/1.4 var(--pm-fonte); }
.pm-paleta-busca input::placeholder { color: var(--pm-fraco); }
.pm-paleta-lista { overflow-y: auto; padding: 8px; }
.pm-paleta-secao { padding: 10px 12px 6px; font: 700 .64rem/1 var(--pm-fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-fraco); }
.pm-paleta-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--pm-texto); text-decoration: none; cursor: pointer; }
.pm-paleta-item .pm-nav-icone { width: 34px; height: 34px; }
.pm-paleta-item small { display: block; color: var(--pm-suave); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-paleta-item > span:nth-child(2) { min-width: 0; flex: 1; }
.pm-paleta-item.ativo { background: color-mix(in srgb, var(--pm-tom-grupo, var(--pm-acento)) 13%, transparent); }
.pm-paleta-item mark { background: none; color: var(--pm-acento); padding: 0; font-weight: 700; }
.pm-paleta-vazio { padding: 28px; text-align: center; color: var(--pm-suave); }
.pm-paleta-pe { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--pm-borda); color: var(--pm-fraco); font-size: .74rem; }
@keyframes pm-aparecer { from { opacity: 0; } }
@keyframes pm-subir { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* =====================================================================================
   Página: cabeçalho, cartões, filtros
   ===================================================================================== */
.pm-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.pm-cabecalho h1 { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem); font-weight: 800; letter-spacing: -.03em; }
.pm-cabecalho > .text-body-secondary { max-width: 70ch; }
.pm-cabecalho .pm-cabecalho-acoes { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.pm-cartao {
    position: relative;
    background: var(--pm-vidro);
    -webkit-backdrop-filter: var(--pm-desfoque);
    backdrop-filter: var(--pm-desfoque);
    border: 1px solid var(--pm-vidro-borda);
    border-radius: var(--pm-raio);
    box-shadow: var(--pm-sombra), var(--pm-vidro-brilho);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
}
.pm-cartao > h2, .pm-cartao > h3 { font-size: 1rem; font-weight: 700; }
.pm-cartao-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .8rem; }
.pm-cartao-titulo h2, .pm-cartao-titulo h3 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.pm-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem 1.1rem; }
.pm-filtros .form-label, .pm-seletor .form-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .3rem; color: var(--pm-suave); }
.pm-titulo-grupo { letter-spacing: .12em; }

/* entrada suave dos blocos (o portal.js escalona) */
.pm-surgir { animation: pm-surgir .5s var(--pm-suave-curva) both; animation-delay: calc(var(--pm-ordem, 0) * 45ms); }
@keyframes pm-surgir { from { opacity: 0; transform: translateY(10px); } }

/* =====================================================================================
   Indicadores (KPIs)
   ===================================================================================== */
.pm-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.pm-indicador {
    --pm-tom: var(--pm-tom-azul);
    position: relative; overflow: hidden;
    background: var(--pm-vidro); -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque);
    border: 1px solid var(--pm-vidro-borda); border-radius: var(--pm-raio); box-shadow: var(--pm-sombra), var(--pm-vidro-brilho);
    padding: .95rem 1.1rem 1rem;
    transition: transform .2s var(--pm-suave-curva), box-shadow .2s;
}
.pm-indicador::before {
    content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -90px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--pm-tom) 26%, transparent), transparent 70%);
}
.pm-indicador::after { content: ""; position: absolute; left: 1.1rem; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pm-tom); }
.pm-indicador:hover { transform: translateY(-2px); box-shadow: var(--pm-sombra-alta), var(--pm-vidro-brilho); }
.pm-indicador-rotulo { position: relative; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-suave); }
.pm-indicador-valor { position: relative; font: 800 1.55rem/1.25 var(--pm-fonte-titulo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--pm-texto); margin-top: .2rem; }
.pm-indicador-nota { position: relative; font-size: .77rem; color: var(--pm-suave); margin-top: .15rem; }
.pm-tom-azul { --pm-tom: var(--pm-tom-azul); }
.pm-tom-verde { --pm-tom: var(--pm-tom-verde); }
.pm-tom-violeta { --pm-tom: var(--pm-tom-violeta); }
.pm-tom-ciano { --pm-tom: var(--pm-tom-ciano); }
.pm-tom-rosa { --pm-tom: var(--pm-tom-rosa); }
.pm-tom-ambar { --pm-tom: var(--pm-tom-ambar); }
.pm-tom-vermelho { --pm-tom: var(--pm-tom-vermelho); }
/* tons de situação (os mesmos nomes que as regras das telas devolvem: ruim, atencao, bom, info, neutro) */
.pm-tom-ruim { --pm-tom: var(--pm-negativo); }
.pm-tom-atencao { --pm-tom: var(--pm-alerta); }
.pm-tom-bom { --pm-tom: var(--pm-positivo); }
.pm-tom-info { --pm-tom: var(--pm-tom-azul); }
.pm-tom-neutro { --pm-tom: var(--pm-fraco); }

/* =====================================================================================
   Achados e situação — no lugar da faixa grossa na lateral: um ponto de luz na cor da situação
   ===================================================================================== */
/* Achados: notas curtas ("o que a conta mostrou"), em grade. <div class="pm-achados"><div class="pm-achado pm-tom-ruim">… */
.pm-achados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .6rem; }
:where(.pm-achado) { --pm-tom: var(--pm-fraco); }
.pm-achado {
    position: relative; padding: .65rem .9rem .7rem 1.9rem; border-radius: var(--pm-raio-sm);
    background: linear-gradient(135deg, color-mix(in srgb, var(--pm-tom) 10%, transparent), transparent 62%), var(--pm-superficie);
    border: 1px solid color-mix(in srgb, var(--pm-tom) 20%, var(--pm-borda));
    font-size: .84rem; line-height: 1.5; color: var(--pm-texto-2);
}
.pm-achado::before {
    content: ""; position: absolute; left: .85rem; top: calc(.65rem + .55em); width: 7px; height: 7px; border-radius: 50%;
    background: var(--pm-tom); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pm-tom) 17%, transparent);
}
.pm-achado strong { color: var(--pm-texto); font-weight: 650; }
.pm-achado-titulo { font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-suave); margin-bottom: .15rem; }

/* Situação: cartão com a cor da situação no topo e uma luz no canto, como os indicadores. <div class="pm-cartao pm-situacao pm-tom-bom"> */
:where(.pm-situacao) { --pm-tom: var(--pm-borda-forte); }
.pm-situacao { overflow: hidden; }
.pm-situacao::before {
    content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -120px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--pm-tom) 20%, transparent), transparent 70%);
}
.pm-situacao::after { content: ""; position: absolute; left: 1.25rem; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pm-tom); }
.pm-situacao > * { position: relative; }
a.pm-situacao { transition: transform .2s var(--pm-suave-curva), box-shadow .2s, border-color .2s; }
a.pm-situacao:hover, a.pm-situacao:focus-visible {
    transform: translateY(-2px); outline: none;
    box-shadow: var(--pm-sombra-alta), var(--pm-vidro-brilho); border-color: color-mix(in srgb, var(--pm-tom) 35%, var(--pm-vidro-borda));
}

/* =====================================================================================
   Alternador (segmentos) com marcador que desliza, e abas
   ===================================================================================== */
.pm-alternador {
    position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px;
    background: var(--pm-superficie-2); border: 1px solid var(--pm-borda); isolation: isolate;
}
.pm-alternador-marcador {
    position: absolute; z-index: -1; top: 0; left: 0; border-radius: 999px; pointer-events: none;
    background: var(--pm-acento); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--pm-acento) 70%, transparent);
    transition: transform .32s var(--pm-suave-curva), width .32s var(--pm-suave-curva), height .32s var(--pm-suave-curva);
}
.pm-alternador-opcao {
    position: relative; padding: .3rem .9rem; border-radius: 999px; font-size: .83rem; font-weight: 500; text-decoration: none;
    color: var(--pm-texto-2); border: 0; background: transparent; white-space: nowrap; cursor: pointer; transition: color .2s;
}
.pm-alternador-opcao:hover { color: var(--pm-texto); }
.pm-alternador-opcao.ativo { color: var(--pm-no-acento); font-weight: 600; }
.pm-alternador:not(.pm-com-marcador) .pm-alternador-opcao.ativo { background: var(--pm-acento); }
.pm-alternador-opcao.ativo .pm-selo { background: color-mix(in srgb, var(--pm-no-acento) 92%, transparent); color: var(--pm-acento); border-color: transparent; }

/* abas numa linha só: o que não cabe rola de lado, com a borda esmaecida avisando que há mais (o portal.js marca os lados) */
.pm-abas {
    --pm-fade-esq: 0px; --pm-fade-dir: 0px;
    display: flex; flex-wrap: nowrap; gap: .25rem; border-bottom: 1px solid var(--pm-borda); margin-bottom: 1.1rem;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pm-fade-esq), #000 calc(100% - var(--pm-fade-dir)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--pm-fade-esq), #000 calc(100% - var(--pm-fade-dir)), transparent);
}
.pm-abas::-webkit-scrollbar { display: none; }
.pm-abas.pm-mais-esq { --pm-fade-esq: 48px; }
.pm-abas.pm-mais-dir { --pm-fade-dir: 48px; }
.pm-aba { position: relative; flex: none; white-space: nowrap; padding: .55rem .9rem; text-decoration: none; color: var(--pm-suave); font-size: .9rem; font-weight: 500; transition: color .16s; }
.pm-aba:hover { color: var(--pm-texto); }
.pm-aba.ativa { color: var(--pm-texto); font-weight: 650; }
.pm-aba.ativa::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--pm-acento); }

/* =====================================================================================
   Tabelas
   ===================================================================================== */
.table { --bs-table-bg: transparent; --bs-table-color: var(--pm-texto); --bs-table-border-color: var(--pm-borda); --bs-table-hover-bg: var(--pm-acento-suave); --bs-table-hover-color: var(--pm-texto); --bs-table-striped-bg: transparent; --bs-table-active-bg: var(--pm-acento-suave); }
.pm-tabela { font-size: .855rem; margin-bottom: 0; }
/* seletor de mês (portal.js troca o <input type="month"> por ele) */
.pm-mes {
    text-align: left; cursor: pointer; min-width: 10.5rem; padding-right: 2rem; white-space: nowrap;
    background: var(--pm-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238794a6' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right .6rem center / 15px;
}
.pm-mes[aria-expanded="true"] { border-color: var(--pm-acento); box-shadow: var(--pm-anel); }
.pm-mes-painel {
    position: absolute; z-index: 1090; width: 15.5rem; padding: .6rem;
    background: var(--pm-vidro-forte); -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque);
    border: 1px solid var(--pm-vidro-borda); border-radius: var(--pm-raio-sm); box-shadow: var(--pm-sombra-alta), var(--pm-vidro-brilho);
    animation: pm-surgir .18s var(--pm-suave-curva) both;
}
.pm-mes-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.pm-mes-topo strong { font: 700 .95rem var(--pm-fonte-titulo); }
.pm-mes-painel button { border: 0; background: transparent; color: var(--pm-texto-2); border-radius: var(--pm-raio-xs); font: inherit; cursor: pointer; transition: background .15s, color .15s; }
.pm-mes-topo button { width: 2rem; height: 2rem; font-size: 1.1rem; line-height: 1; }
.pm-mes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.pm-mes-grade button { padding: .45rem 0; font-size: .85rem; }
.pm-mes-painel button:hover:not([disabled]), .pm-mes-painel button:focus-visible { background: var(--pm-acento-suave); color: var(--pm-texto); outline: none; }
.pm-mes-grade button.ativo { background: var(--pm-acento); color: var(--pm-no-acento); font-weight: 650; }
.pm-mes-painel button[disabled] { opacity: .35; cursor: default; }

/* célula de cadastro: código pequeno em cima e o nome numa linha só (o completo no title) */
.pm-celula-nome { max-width: 17rem; }
.pm-celula-nome > small { display: block; font-size: .7rem; color: var(--pm-fraco); font-variant-numeric: tabular-nums; line-height: 1.2; }
.pm-celula-nome > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tabela > :not(caption) > * > * { padding: .5rem .6rem; border-bottom-color: var(--pm-borda); }
.pm-tabela > thead th {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-suave);
    white-space: nowrap; background: transparent; border-bottom: 1px solid var(--pm-borda-forte);
}
.pm-tabela > tbody > tr { transition: background .14s; }
.pm-tabela > tbody > tr:hover > * { background: var(--pm-acento-suave); }
.pm-tabela-rolagem { overflow: auto; max-height: 72vh; border-radius: var(--pm-raio-sm); }
.pm-tabela-rolagem > .pm-tabela > thead th { position: sticky; top: 0; z-index: 2; background: var(--pm-vidro-forte); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pm-tabela td, .pm-tabela th { vertical-align: middle; }
.num, .pm-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-tabela tr.pm-total > td, .pm-tabela tr.pm-total > th { font-weight: 700; background: var(--pm-acento-suave); border-top: 1px solid var(--pm-borda-forte); }
.pm-tabela tr.pm-subtotal > td { font-weight: 650; }
.pm-tabela tr.pm-clicavel { cursor: pointer; }
.pm-tabela th[data-ordenar] { cursor: pointer; user-select: none; }
.pm-tabela th[data-ordenar]::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .25; transition: transform .2s, opacity .2s; }
.pm-tabela th[data-ordem="asc"]::after { transform: rotate(-135deg) translate(-2px, -1px); opacity: .9; color: var(--pm-acento); }
.pm-tabela th[data-ordem="desc"]::after { transform: rotate(45deg) translateY(-2px); opacity: .9; color: var(--pm-acento); }
.pm-recuo-1 { padding-left: 1.3rem !important; }
.pm-recuo-2 { padding-left: 2.3rem !important; }
.pm-recuo-3 { padding-left: 3.3rem !important; }

.pm-positivo { color: var(--pm-positivo) !important; }
.pm-negativo { color: var(--pm-negativo) !important; }
.pm-alerta { color: var(--pm-alerta) !important; }
.pm-apagado { color: var(--pm-fraco) !important; }

.pm-selo { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 650; border-radius: 999px; padding: .18rem .58rem; background: var(--pm-superficie-2); color: var(--pm-suave); border: 1px solid var(--pm-borda); white-space: nowrap; }
.pm-selo-ok { background: color-mix(in srgb, var(--pm-positivo) 11%, transparent); color: var(--pm-positivo); border-color: color-mix(in srgb, var(--pm-positivo) 24%, transparent); }
.pm-selo-alerta { background: color-mix(in srgb, var(--pm-alerta) 11%, transparent); color: var(--pm-alerta); border-color: color-mix(in srgb, var(--pm-alerta) 26%, transparent); }
.pm-selo-erro { background: color-mix(in srgb, var(--pm-negativo) 11%, transparent); color: var(--pm-negativo); border-color: color-mix(in srgb, var(--pm-negativo) 24%, transparent); }

/* =====================================================================================
   Barra da grade e seletor múltiplo
   ===================================================================================== */
.pm-barra-grade { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .7rem; }
.pm-barra-busca { max-width: 320px; padding-left: 2rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238794a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: .65rem center !important; background-size: 14px !important; }
.pm-painel-colunas {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 250px; max-height: 360px; overflow: auto;
    background: var(--pm-vidro-forte); -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque);
    border: 1px solid var(--pm-vidro-borda); border-radius: var(--pm-raio-sm); box-shadow: var(--pm-sombra-alta); padding: .6rem .8rem;
}
.pm-linha-filtros th { padding-top: .25rem; padding-bottom: .4rem; }
.pm-linha-filtros select { font-size: .75rem; padding-top: .1rem; padding-bottom: .1rem; }
.pm-seletor-botao { min-width: 170px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-seletor-lista { max-height: 300px; overflow: auto; min-width: 240px; }

/* =====================================================================================
   Controles do Bootstrap no vidro
   ===================================================================================== */
.form-control, .form-select {
    background-color: var(--pm-superficie); color: var(--pm-texto); border: 1px solid var(--pm-borda-forte); border-radius: 10px;
    transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.form-control:focus, .form-select:focus { background-color: var(--pm-vidro-forte); color: var(--pm-texto); border-color: var(--pm-acento); box-shadow: var(--pm-anel); }
.form-control::placeholder { color: var(--pm-fraco); }
.form-control-sm, .form-select-sm { border-radius: 9px; min-height: 34px; font-size: .86rem; }
.form-check-input { background-color: var(--pm-superficie); border-color: var(--pm-borda-forte); }
.form-check-input:checked { background-color: var(--pm-acento); border-color: var(--pm-acento); }
.form-check-input:focus { border-color: var(--pm-acento); box-shadow: var(--pm-anel); }
.form-switch .form-check-input { width: 2.2em; }

.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 10px; --bs-btn-padding-x: .95rem; transition: transform .16s var(--pm-suave-curva), box-shadow .16s, background-color .16s, border-color .16s, color .16s; }
.btn-sm { --bs-btn-border-radius: 9px; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .82rem; }
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: var(--pm-marca, #2b59c3); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--pm-marca, #2b59c3); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--pm-marca, #2b59c3); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--pm-marca, #2b59c3); --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(140deg, color-mix(in srgb, var(--pm-marca, #2b59c3) 78%, #fff) 0%, var(--pm-marca, #2b59c3) 55%, color-mix(in srgb, var(--pm-marca, #2b59c3) 80%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -10px color-mix(in srgb, var(--pm-marca, #2b59c3) 80%, transparent);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 24px -10px color-mix(in srgb, var(--pm-marca, #2b59c3) 85%, transparent); }
.btn-outline-secondary, .btn-outline-primary, .btn-light {
    --bs-btn-color: var(--pm-texto-2); --bs-btn-bg: var(--pm-superficie); --bs-btn-border-color: var(--pm-borda-forte);
    --bs-btn-hover-color: var(--pm-texto); --bs-btn-hover-bg: var(--pm-vidro-forte); --bs-btn-hover-border-color: var(--pm-acento-linha);
    --bs-btn-active-color: var(--pm-texto); --bs-btn-active-bg: var(--pm-acento-suave); --bs-btn-active-border-color: var(--pm-acento);
}
.btn-outline-secondary:hover, .btn-outline-primary:hover { transform: translateY(-1px); }
.btn-link { --bs-btn-color: var(--pm-acento); --bs-btn-hover-color: var(--pm-acento-forte); }
.btn-group > .btn { transform: none !important; }

.dropdown-menu {
    --bs-dropdown-bg: var(--pm-vidro-forte); --bs-dropdown-border-color: var(--pm-vidro-borda); --bs-dropdown-color: var(--pm-texto);
    --bs-dropdown-link-color: var(--pm-texto); --bs-dropdown-link-hover-bg: var(--pm-acento-suave); --bs-dropdown-link-active-bg: var(--pm-acento);
    --bs-dropdown-border-radius: 14px; --bs-dropdown-box-shadow: var(--pm-sombra-alta);
    -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque); box-shadow: var(--pm-sombra-alta);
}
.alert { border-radius: var(--pm-raio-sm); border: 1px solid var(--pm-borda); -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque); }
.alert-info { --bs-alert-bg: color-mix(in srgb, var(--pm-acento) 9%, var(--pm-vidro)); --bs-alert-color: var(--pm-texto-2); --bs-alert-border-color: color-mix(in srgb, var(--pm-acento) 24%, transparent); }
.alert-warning { --bs-alert-bg: color-mix(in srgb, var(--pm-alerta) 10%, var(--pm-vidro)); --bs-alert-color: var(--pm-texto-2); --bs-alert-border-color: color-mix(in srgb, var(--pm-alerta) 30%, transparent); }
.alert-danger { --bs-alert-bg: color-mix(in srgb, var(--pm-negativo) 10%, var(--pm-vidro)); --bs-alert-color: var(--pm-texto-2); --bs-alert-border-color: color-mix(in srgb, var(--pm-negativo) 30%, transparent); }
.alert-success { --bs-alert-bg: color-mix(in srgb, var(--pm-positivo) 10%, var(--pm-vidro)); --bs-alert-color: var(--pm-texto-2); --bs-alert-border-color: color-mix(in srgb, var(--pm-positivo) 30%, transparent); }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--pm-superficie-2) !important; color: var(--pm-suave) !important; }
.modal-content { background: var(--pm-vidro-forte); -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque); border: 1px solid var(--pm-vidro-borda); border-radius: 20px; box-shadow: var(--pm-sombra-alta); }
.progress { --bs-progress-bg: var(--pm-superficie-2); --bs-progress-bar-bg: var(--pm-acento); border-radius: 999px; }
details > summary { cursor: pointer; }
.bg-body-tertiary { background-color: var(--pm-acento-suave) !important; }
.bg-body, .bg-white { background-color: var(--pm-superficie) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--pm-borda) !important; }

/* =====================================================================================
   Gráficos (SVG do Kit)
   ===================================================================================== */
.pm-grafico { width: 100%; height: auto; display: block; overflow: visible; }
.pm-grafico-rotulo { font: 500 11px var(--pm-fonte); fill: var(--pm-suave); }
.pm-grafico-grade { stroke: var(--pm-borda); stroke-width: 1; stroke-dasharray: 3 4; }
.pm-grafico-zero { stroke: var(--pm-borda-forte); stroke-width: 1; }
.pm-grafico circle, .pm-grafico rect { transition: opacity .15s, transform .15s; }
.pm-grafico:hover rect:not(:hover) { opacity: .72; }
.pm-grafico circle:hover { transform-box: fill-box; transform-origin: center; transform: scale(1.5); }

/* =====================================================================================
   Página inicial
   ===================================================================================== */
.pm-heroi {
    position: relative; overflow: hidden; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: 24px; margin-bottom: 1.6rem;
    background: var(--pm-vidro); -webkit-backdrop-filter: var(--pm-desfoque); backdrop-filter: var(--pm-desfoque);
    border: 1px solid var(--pm-vidro-borda); box-shadow: var(--pm-sombra), var(--pm-vidro-brilho);
}
.pm-heroi::before {
    content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 140deg, color-mix(in srgb, var(--pm-marca, #2b59c3) 30%, transparent), color-mix(in srgb, var(--pm-destaque, #13a89a) 28%, transparent), color-mix(in srgb, #8a6cff 22%, transparent), color-mix(in srgb, var(--pm-marca, #2b59c3) 30%, transparent));
    filter: blur(60px); opacity: .7; animation: pm-girar 30s linear infinite;
}
@keyframes pm-girar { to { transform: rotate(360deg); } }
.pm-heroi > * { position: relative; }
.pm-heroi-sobre { font: 700 .72rem/1 var(--pm-fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-acento); margin-bottom: .8rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pm-heroi h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin: 0 0 .6rem; }
.pm-heroi h1 span { background: linear-gradient(100deg, var(--pm-acento), var(--pm-destaque, #13a89a) 60%, #8a6cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-heroi p { color: var(--pm-suave); max-width: 62ch; font-size: 1rem; margin: 0 0 1.3rem; }
.pm-heroi-busca {
    display: flex; align-items: center; gap: 12px; width: min(560px, 100%); padding: 13px 16px; border-radius: 16px; cursor: pointer;
    border: 1px solid var(--pm-borda-forte); background: var(--pm-vidro-forte); color: var(--pm-suave); font-size: .95rem; text-align: left;
    box-shadow: var(--pm-sombra); transition: box-shadow .2s, border-color .2s, transform .2s var(--pm-suave-curva);
}
.pm-heroi-busca:hover { border-color: var(--pm-acento-linha); box-shadow: var(--pm-sombra-alta), var(--pm-anel); transform: translateY(-1px); }
.pm-heroi-busca svg { width: 19px; height: 19px; }
.pm-heroi-busca span { flex: 1; }
.pm-heroi-numeros { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pm-heroi-numeros div strong { display: block; font: 800 1.6rem/1.1 var(--pm-fonte-titulo); letter-spacing: -.03em; }
.pm-heroi-numeros div span { font-size: .78rem; color: var(--pm-suave); }

.pm-grupo-inicio { margin-bottom: 1.6rem; }
.pm-grupo-inicio-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 .8rem; font: 700 .74rem/1 var(--pm-fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-suave); }
.pm-grupo-inicio-titulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pm-tom-grupo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pm-tom-grupo) 18%, transparent); }
.pm-grupo-inicio-titulo::after { content: ""; flex: 1; height: 1px; background: var(--pm-borda); }
.pm-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .9rem; }
.pm-cartao-tela {
    display: flex; flex-direction: column; gap: .9rem; text-decoration: none; margin: 0; min-height: 150px; padding: 1.15rem 1.2rem;
    transition: transform .25s var(--pm-suave-curva), box-shadow .25s, border-color .25s;
}
.pm-cartao-tela::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: radial-gradient(420px 160px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--pm-tom-grupo) 16%, transparent), transparent 70%);
}
.pm-cartao-tela:hover { transform: translateY(-3px); box-shadow: var(--pm-sombra-alta), var(--pm-vidro-brilho); border-color: color-mix(in srgb, var(--pm-tom-grupo) 35%, var(--pm-vidro-borda)); }
.pm-cartao-tela:hover::after { opacity: 1; }
.pm-cartao-tela-topo { display: flex; align-items: center; justify-content: space-between; }
.pm-cartao-tela-icone { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--pm-tom-grupo); background: color-mix(in srgb, var(--pm-tom-grupo) 13%, transparent); border: 1px solid color-mix(in srgb, var(--pm-tom-grupo) 20%, transparent); }
.pm-cartao-tela-icone svg { width: 22px; height: 22px; }
.pm-cartao-tela-seta { color: var(--pm-fraco); transition: transform .25s var(--pm-suave-curva), color .25s; }
.pm-cartao-tela:hover .pm-cartao-tela-seta { transform: translateX(4px); color: var(--pm-tom-grupo); }
.pm-cartao-tela strong { display: block; font: 700 1.05rem/1.25 var(--pm-fonte-titulo); letter-spacing: -.02em; color: var(--pm-texto); }
.pm-cartao-tela small { display: block; color: var(--pm-suave); font-size: .84rem; line-height: 1.45; margin-top: .25rem; }

.pm-amostra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 1px solid var(--pm-borda); }

/* =====================================================================================
   Celular e tablet
   ===================================================================================== */
@media (max-width: 1100px) {
    .pm-conteudo { padding: 22px 22px 36px; }
    .pm-barra-topo { padding: 0 22px; }
    .pm-rodape { padding: 0 22px 22px; }
}
@media (max-width: 900px) {
    .pm-lateral { transform: translateX(-102%); width: min(300px, 86vw) !important; box-shadow: var(--pm-sombra-alta); background: var(--pm-vidro-forte); }
    :root.pm-lateral-aberta .pm-lateral { transform: none; }
    .pm-principal, :root.pm-recolhida .pm-principal { margin-left: 0; }
    .pm-lateral-fundo { position: fixed; inset: 0; z-index: 1025; background: color-mix(in srgb, #050a12 35%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s; }
    :root.pm-lateral-aberta .pm-lateral-fundo { opacity: 1; pointer-events: auto; }
    .pm-so-celular { display: inline-grid !important; }
    .pm-topo-demo { display: inline-flex !important; }
    .pm-so-computador { display: none !important; }
    :root.pm-recolhida :is(.pm-marca-texto, .pm-busca-atalho span, .pm-busca-atalho kbd, .pm-nav-rotulo, .pm-nav-titulo) { display: revert; }
    :root.pm-recolhida .pm-nav-item { justify-content: flex-start; padding: 8px 10px; }
}
@media (max-width: 640px) {
    .pm-conteudo { padding: 16px 16px 28px; }
    .pm-barra-topo { padding: 0 14px; height: 56px; }
    .pm-rodape { padding: 0 16px 18px; }
    .pm-cartao { padding: .95rem 1rem; border-radius: 16px; }
    .pm-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .pm-indicador-valor { font-size: 1.2rem; }
    .pm-cabecalho .pm-cabecalho-acoes { margin-left: 0; }
    .pm-trilha .pm-trilha-grupo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media print {
    .pm-lateral, .pm-barra-topo, .pm-rodape, .pm-barra-grade, .pm-filtros, .pm-alternador, .btn, .pm-progresso, .pm-paleta-fundo { display: none !important; }
    .pm-principal { margin: 0 !important; }
    body { background: #fff !important; color: #111; }
    body::before, body::after { display: none; }
    .pm-cartao, .pm-indicador { box-shadow: none; border: 1px solid #ddd; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}