/* UNIFIN-FPA-03 — superfície "Planejamento" (/planejamento).
 *
 * Classes próprias `pl-*` (Gate F8: nada emprestado de outra feature), derivadas SÓ de `--uni-*` (uni-components.css).
 * Anatomias reproduzidas de padrões canônicos, citados no ponto de uso: esqueleto (`.ah-skeleton`/
 * `.crm-dashboard-skeleton`, G44), gráfico temporal (UniTimeChart), lista (UniList), linha (UniScanRow).
 * Breakpoints canônicos 1023 / 767. Tema escuro: só tokens (`:root[data-unifin-theme="dark"]`).
 */

:root {
    /* Série do gráfico de caixa — derivada dos tokens; valores validados com dataviz validate_palette.js (claro: primary-soft-text; escuro: primary). */
    --pl-series: var(--uni-color-primary-soft-text);
}

:root[data-unifin-theme="dark"] {
    --pl-series: var(--uni-color-primary);
}

/* ---------- Página ---------- */
.pl-page {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
    min-height: 100%;
    padding: var(--uni-space-5) var(--uni-space-6) var(--uni-space-7);
    background: var(--uni-color-app-bg);
    color: var(--uni-color-text);
}

.pl-page .crm-page-header { margin-bottom: 0; }
.pl-page h2, .pl-page h3, .pl-page h4, .pl-page p { margin: 0; }
.pl-stack { display: grid; gap: var(--uni-space-5); min-width: 0; }

/* Os rótulos de campo do UniFin legado (`label { ... }` em unifin.css) não podem vazar para a ficha canônica. */
.pl-page label.uni-field, .uni-modal label.uni-field { color: var(--uni-color-text); font-size: var(--uni-font-size-sm); }
.pl-page .app-control, .uni-modal .app-control { min-height: 42px; box-shadow: none; }
.pl-optional { color: var(--uni-color-text-muted); font-weight: 400; }

/* ---------- Contexto do cenário ---------- */
.pl-context {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--uni-space-4) var(--uni-space-6);
    padding: var(--uni-space-4) var(--uni-space-5);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}

.pl-context-scenario { display: flex; flex: 1 1 560px; flex-wrap: wrap; align-items: flex-end; gap: var(--uni-space-4) var(--uni-space-6); min-width: 0; }
.pl-context-scenario > .uni-field { width: min(320px, 100%); }
.pl-context-cutoff { display: flex; align-items: flex-end; gap: var(--uni-space-3); }
.pl-context-cutoff > .uni-field { width: 220px; }
.pl-context-menu { margin-bottom: 2px; }

.pl-context-meta { display: flex; flex-wrap: wrap; gap: var(--uni-space-3) var(--uni-space-5); margin: 0; }
.pl-context-meta div { display: grid; gap: var(--uni-space-1); }
.pl-context-meta dt { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }
.pl-context-meta dd { display: flex; align-items: center; min-height: 42px; margin: 0; font-size: var(--uni-font-size-md); font-weight: 500; }

.pl-panel { min-width: 0; }

/* ---------- Esqueleto (anatomia de .ah-skeleton / .crm-dashboard-skeleton, G44) ---------- */
.pl-skeleton { display: grid; gap: var(--uni-space-4); }
.pl-skeleton-bar, .pl-skeleton-grid span {
    display: block;
    border-radius: var(--uni-radius-lg);
    background: linear-gradient(90deg, var(--uni-color-neutral-soft), var(--uni-color-surface), var(--uni-color-neutral-soft));
    background-size: 200% 100%;
    animation: pl-shimmer 1.4s ease-in-out infinite;
}
.pl-skeleton-bar.is-context { height: 84px; }
.pl-skeleton-bar.is-tabs { width: min(560px, 100%); height: 42px; border-radius: var(--uni-radius-pill); }
.pl-skeleton-bar.is-block { height: 240px; }
.pl-skeleton-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uni-space-4); }
.pl-skeleton-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-skeleton-grid span { height: 128px; }
@keyframes pl-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pl-skeleton-bar, .pl-skeleton-grid span { animation: none; } }

/* ---------- Módulos e cards ---------- */
.pl-module { display: grid; gap: var(--uni-space-4); min-width: 0; }
.pl-module-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--uni-space-4); }
.pl-module-head h2 { font-size: var(--uni-font-size-lg); font-weight: 600; line-height: 1.3; }
.pl-module-head p { margin-top: var(--uni-space-1); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.pl-module-empty {
    padding: var(--uni-space-4);
    border: 1px dashed var(--uni-color-border-strong);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.pl-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--uni-space-1);
    min-height: 44px;
    padding: 0 var(--uni-space-1);
    border: 0;
    background: transparent;
    color: var(--uni-color-primary-soft-text);
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    cursor: pointer;
}
.pl-link .crm-icon { width: 16px; height: 16px; }
.pl-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-link:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; border-radius: var(--uni-radius-sm); }

.pl-card {
    display: grid;
    gap: var(--uni-space-4);
    min-width: 0;
    padding: var(--uni-space-5);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}
.pl-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--uni-space-2) var(--uni-space-4); }
.pl-card-head h3 { font-size: var(--uni-font-size-lg); font-weight: 600; }
.pl-card-head span { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }

/* ---------- Métricas ---------- */
.pl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uni-space-4); }
.pl-kpis.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-kpis.is-wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.pl-metric {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-width: 0;
    padding: var(--uni-space-4) calc(var(--uni-space-4) + var(--uni-space-1));
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}
.pl-metric-head { display: flex; align-items: center; gap: var(--uni-space-1); min-height: 24px; }
.pl-metric-label { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); font-weight: 500; }
.pl-metric-value { font-size: var(--uni-font-size-2xl); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.pl-metric-state { color: var(--uni-color-text); font-size: var(--uni-font-size-lg); font-weight: 600; line-height: 1.3; }
.pl-metric.is-unavailable .pl-metric-state { color: var(--uni-color-text-muted); }
.pl-metric-detail { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); line-height: 1.45; }
.pl-metric-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-1) var(--uni-space-3); margin-top: auto; padding-top: var(--uni-space-1); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }

/* Compacto: dentro de um grupo (sem card dentro de card — AP-01). */
.pl-metric.is-compact { padding: 0; border: 0; border-radius: 0; background: transparent; }
.pl-metric.is-compact .pl-metric-value { font-size: var(--uni-font-size-xl); }
.pl-metric.is-compact .pl-metric-state { font-size: var(--uni-font-size-md); }

.pl-metric-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--uni-space-4); }
.pl-metric-group {
    display: grid;
    align-content: start;
    gap: var(--uni-space-4);
    padding: var(--uni-space-4) var(--uni-space-5) var(--uni-space-5);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
}
.pl-metric-group h3 { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pl-metric-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--uni-space-4) var(--uni-space-5); }
.pl-scope-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-2); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }

/* ---------- Origem: Realizado (sólido) × Projetado/Planejado (tracejado) ---------- */
.pl-source { display: inline-flex; align-items: center; gap: var(--uni-space-2); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 600; white-space: nowrap; }
.pl-source i { display: inline-block; width: 16px; border-top: 2px solid var(--pl-series); }
.pl-source--planned i { border-top-style: dashed; }

/* ---------- Gráfico de caixa (anatomia do UniTimeChart) ---------- */
.pl-chart { margin: 0; display: grid; gap: var(--uni-space-3); min-width: 0; }
.pl-chart-frame { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: var(--pl-chart-height, 220px) auto; column-gap: var(--uni-space-3); min-width: 0; }
.pl-chart-axis-y { position: relative; }
.pl-chart-axis-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-chart-plot { position: relative; min-width: 0; }
.pl-chart-grid span { position: absolute; left: 0; right: 0; height: 1px; background: var(--uni-color-border); }
.pl-chart-grid span.is-zero { height: 2px; background: var(--uni-color-border-strong); }
.pl-chart-forecast-zone { position: absolute; top: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--uni-color-neutral-soft) 60%, transparent); }
.pl-chart-cutoff { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--uni-color-text-muted); }
.pl-chart-cutoff span {
    position: absolute;
    top: 0;
    left: var(--uni-space-2);
    padding: 0 var(--uni-space-1);
    border-radius: var(--uni-radius-xs);
    background: var(--uni-color-surface);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    white-space: nowrap;
}
.pl-chart-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-chart-line { fill: none; stroke: var(--pl-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pl-chart-line.is-forecast { stroke-dasharray: 6 5; stroke-linecap: butt; }
.pl-chart-dots { position: absolute; inset: 0; pointer-events: none; }
.pl-chart-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, 50%); box-shadow: 0 0 0 2px var(--uni-color-surface); }
.pl-chart-dot.is-actual { background: var(--pl-series); }
.pl-chart-dot.is-forecast { border: 2px solid var(--pl-series); background: var(--uni-color-surface); }
.pl-chart-bands { position: absolute; inset: 0; }
.pl-chart-band { position: absolute; top: 0; bottom: 0; outline: none; }
.pl-chart-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--uni-color-border-strong); opacity: 0; }
.pl-chart-band:hover::before, .pl-chart-band:focus::before { opacity: 1; }
.pl-chart-band:focus-visible { box-shadow: inset 0 0 0 2px var(--uni-color-focus-ring); border-radius: var(--uni-radius-sm); }
.pl-chart-tip {
    position: absolute;
    top: var(--uni-space-2);
    left: 50%;
    z-index: var(--uni-z-tooltip);
    display: none;
    flex-direction: column;
    gap: var(--uni-space-1);
    min-width: 168px;
    padding: var(--uni-space-2) var(--uni-space-3);
    transform: translateX(var(--uni-space-3));
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-surface);
    box-shadow: var(--uni-shadow-md);
    pointer-events: none;
}
.pl-chart-tip.is-left { transform: translateX(calc(-100% - var(--uni-space-3))); }
.pl-chart-tip strong { font-size: var(--uni-font-size-md); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-chart-tip > span { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }
.pl-chart-band:hover .pl-chart-tip, .pl-chart-band:focus .pl-chart-tip { display: flex; }
.pl-chart-axis-x { position: relative; grid-column: 2; height: 24px; margin-top: var(--uni-space-2); }
.pl-chart-axis-x span { position: absolute; top: 0; transform: translateX(-50%); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-2xs); white-space: nowrap; }
.pl-chart-axis-x span:first-child { transform: none; }
.pl-chart-axis-x span:last-child { transform: translateX(-100%); }
.pl-chart-axis-x span.is-sparse { visibility: hidden; }
.pl-chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-2) var(--uni-space-5); padding-left: calc(72px + var(--uni-space-3)); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.pl-chart-key > span { display: inline-flex; align-items: center; gap: var(--uni-space-2); }
.pl-chart-key i { display: inline-block; width: 22px; border-top: 2px solid var(--pl-series); }
.pl-chart-key i.is-forecast { border-top-style: dashed; }
.pl-chart-empty { display: grid; justify-items: center; gap: var(--uni-space-1); padding: var(--uni-space-6) var(--uni-space-4); border: 1px dashed var(--uni-color-border-strong); border-radius: var(--uni-radius-md); text-align: center; }
.pl-chart-empty strong { font-size: var(--uni-font-size-md); font-weight: 600; }
.pl-chart-empty span { max-width: 460px; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }

/* ---------- Ponte realizado × projetado ---------- */
.pl-bridge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uni-space-4); }
.pl-bridge-col { display: grid; align-content: start; gap: var(--uni-space-3); padding: var(--uni-space-4) var(--uni-space-5); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-lg); background: var(--uni-color-surface); }
.pl-bridge-col:last-child { border-style: dashed; border-color: var(--uni-color-border-strong); }
.pl-bridge-col > header { display: grid; gap: var(--uni-space-1); }
.pl-bridge-col > header strong { font-size: var(--uni-font-size-lg); font-weight: 600; }
.pl-lines { display: grid; margin: 0; }
.pl-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--uni-space-4); padding: var(--uni-space-3) 0; border-bottom: 1px solid var(--uni-color-border); }
.pl-line:last-child { border-bottom: 0; padding-bottom: 0; }
.pl-line dt { display: inline-flex; align-items: center; gap: var(--uni-space-1); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.pl-line dd { margin: 0; font-size: var(--uni-font-size-md); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.pl-line dd.is-state { max-width: 60%; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); font-weight: 500; }
.pl-line dd small { display: block; margin-top: var(--uni-space-1); font-size: var(--uni-font-size-xs); font-weight: 400; line-height: 1.4; }

/* ---------- Barra de recorte ---------- */
.pl-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--uni-space-3) var(--uni-space-4); }
.pl-toolbar > .uni-field { flex: 0 1 220px; min-width: 160px; }
.pl-toolbar-note { align-self: center; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.pl-compare-note { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }

/* ---------- Tabela mês a mês (SUPPORTED VARIANT: superfície tabular) ---------- */
.pl-table-wrap { overflow-x: auto; min-width: 0; }
.pl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uni-font-size-md); }
.pl-table thead th {
    padding: var(--uni-space-2) var(--uni-space-3);
    background: var(--uni-color-neutral-soft);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.pl-table thead th:first-child { border-radius: var(--uni-radius-sm) 0 0 var(--uni-radius-sm); }
.pl-table thead th:last-child { border-radius: 0 var(--uni-radius-sm) var(--uni-radius-sm) 0; }
.pl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-th { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--uni-space-1); }
.pl-table tbody th, .pl-table tbody td { padding: var(--uni-space-3); border-bottom: 1px solid var(--uni-color-border); vertical-align: middle; }
.pl-table tbody th { display: flex; flex-direction: column; align-items: flex-start; gap: var(--uni-space-1); font-weight: 500; text-align: left; }
.pl-table tbody tr.is-forecast > * { background: color-mix(in srgb, var(--uni-color-neutral-soft) 45%, transparent); }
.pl-table td.is-state { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }
.pl-month { font-size: var(--uni-font-size-sm); font-weight: 600; }
.pl-cutoff-row td, li.pl-cutoff-row { padding: var(--uni-space-2) var(--uni-space-3); border-top: 2px dashed var(--uni-color-border-strong); }
.pl-cutoff-row span { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 600; letter-spacing: 0.02em; }

.pl-month-cards { display: grid; gap: var(--uni-space-3); margin: 0; padding: 0; list-style: none; }
.pl-month-card { display: grid; gap: var(--uni-space-3); padding: var(--uni-space-3) var(--uni-space-4); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-md); }
.pl-month-card.is-forecast { border-style: dashed; border-color: var(--uni-color-border-strong); }
.pl-month-card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--uni-space-2); }
.pl-month-card > header strong { font-size: var(--uni-font-size-md); font-weight: 600; }
.pl-month-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uni-space-3); margin: 0; }
.pl-month-card dt { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }
.pl-month-card dd { margin: var(--uni-space-1) 0 0; font-size: var(--uni-font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-month-card dd.is-state { color: var(--uni-color-text-muted); font-weight: 500; }

.pl-reasons { display: grid; gap: var(--uni-space-2); padding-top: var(--uni-space-4); border-top: 1px solid var(--uni-color-border); font-size: var(--uni-font-size-sm); }
.pl-reasons strong { font-weight: 600; }
.pl-reasons ul { display: grid; gap: var(--uni-space-1); margin: 0; padding-left: var(--uni-space-5); color: var(--uni-color-text-muted); }
.pl-reasons small { color: var(--uni-color-text-subtle); font-size: var(--uni-font-size-xs); }

/* ---------- Listas (padrão UniList) ---------- */
.pl-list-empty { display: grid; justify-items: center; gap: var(--uni-space-2); padding: var(--uni-space-6) var(--uni-space-4); text-align: center; }
.pl-list-empty.is-compact { padding: var(--uni-space-4); }
.pl-list-empty strong { font-size: var(--uni-font-size-lg); font-weight: 600; }
.pl-list-empty.is-compact strong { font-size: var(--uni-font-size-md); }
.pl-list-empty span { max-width: 520px; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); }
.pl-inline-filter { width: 200px; }
.pl-groups { display: grid; gap: var(--uni-space-5); }
.pl-group { display: grid; gap: var(--uni-space-3); }
.pl-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 var(--uni-space-3); padding-bottom: var(--uni-space-2); border-bottom: 1px solid var(--uni-color-border); }
.pl-group-eyebrow { grid-column: 1 / -1; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pl-group-head h3 { font-size: var(--uni-font-size-md); font-weight: 600; }
.pl-group-count { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }

.pl-row { grid-template-columns: minmax(0, 1fr) auto minmax(120px, auto); width: 100%; font: inherit; text-align: left; }
button.pl-row { cursor: pointer; }
.pl-row-main { display: grid; gap: var(--uni-space-1); }
.pl-row-badges { display: flex; gap: var(--uni-space-2); }
.pl-row-amount { font-size: var(--uni-font-size-md); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-row-amount small { display: inline; margin-right: var(--uni-space-1); font-weight: 400; }

.pl-products { display: grid; gap: var(--uni-space-5); }
.pl-product { display: grid; gap: var(--uni-space-3); }
.pl-product + .pl-product { padding-top: var(--uni-space-5); border-top: 1px solid var(--uni-color-border); }
.pl-product-head { display: flex; align-items: center; gap: var(--uni-space-3); }
.pl-product-title { display: grid; flex: 1 1 auto; justify-items: start; gap: var(--uni-space-1); min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--uni-color-text); font: inherit; text-align: left; }
button.pl-product-title { cursor: pointer; }
button.pl-product-title:hover strong { text-decoration: underline; text-underline-offset: 3px; }
button.pl-product-title:focus-visible { outline: 2px solid var(--uni-color-focus-ring); outline-offset: 2px; border-radius: var(--uni-radius-sm); }
.pl-product-title strong { font-size: var(--uni-font-size-md); font-weight: 600; }
.pl-product-title small { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); }

/* ---------- Comparação ---------- */
.pl-compare { display: grid; }
.pl-compare-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--uni-space-3); padding: var(--uni-space-3) 0; border-bottom: 1px solid var(--uni-color-border); }
.pl-compare-row.is-head { padding: var(--uni-space-2) var(--uni-space-3); border: 0; border-radius: var(--uni-radius-sm); background: var(--uni-color-neutral-soft); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pl-compare-row:not(.is-head) { padding-left: var(--uni-space-3); padding-right: var(--uni-space-3); }
.pl-compare-label { display: inline-flex; align-items: center; gap: var(--uni-space-1); font-size: var(--uni-font-size-sm); font-weight: 500; }
.pl-compare-value, .pl-compare-delta { font-size: var(--uni-font-size-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-compare-delta { color: var(--uni-color-text); font-weight: 500; }
.pl-compare-value.is-state { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-sm); font-weight: 500; }
.pl-compare-value small { display: block; margin-top: var(--uni-space-1); font-size: var(--uni-font-size-xs); font-weight: 400; line-height: 1.4; }
.pl-page .pl-compare-group { display: flex; align-items: center; gap: var(--uni-space-3); margin-top: var(--uni-space-5); padding: 0 var(--uni-space-3) var(--uni-space-2); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Formulários dos modais ---------- */
.pl-form-sections { display: grid; gap: var(--uni-space-5); }
.pl-form-section { margin: 0; padding: 0; border: 0; min-width: 0; }
.pl-form-section legend { margin-bottom: var(--uni-space-3); padding: 0; color: var(--uni-color-text); font-size: var(--uni-font-size-md); font-weight: 600; }
.pl-static-value { display: flex; align-items: center; min-height: 42px; margin: 0; font-size: var(--uni-font-size-md); }
.pl-affix { position: relative; }
.pl-affix .app-control { padding-right: var(--uni-space-7); }
.pl-affix > span { position: absolute; top: 50%; right: var(--uni-space-3); transform: translateY(-50%); color: var(--uni-color-text-muted); font-size: var(--uni-font-size-md); pointer-events: none; }

/* ---------- ≤1023: shell de toque ---------- */
@media (max-width: 1023px) {
    .pl-page { padding: var(--uni-space-5) var(--uni-space-5) var(--uni-space-7); }
    .pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-kpis.is-3, .pl-kpis.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pl-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-context { display: grid; align-items: stretch; }
    .pl-context-scenario { flex: 0 0 auto; }
    .pl-context-cutoff { justify-content: flex-start; }
}

/* ---------- ≤767: celular ---------- */
@media (max-width: 767px) {
    .pl-page { gap: var(--uni-space-4); padding: var(--uni-space-4) var(--uni-space-4) var(--uni-space-6); }
    .pl-stack { gap: var(--uni-space-4); }
    .pl-page .crm-page-header { flex-direction: column; align-items: stretch; }
    .pl-page .crm-page-header-actions > * { width: 100%; }
    .pl-context { padding: var(--uni-space-4); }
    .pl-context-scenario > .uni-field, .pl-context-cutoff > .uni-field { width: 100%; }
    .pl-context-cutoff { align-items: flex-end; }
    .pl-context-cutoff > .uni-field { flex: 1 1 auto; }
    .pl-kpis, .pl-kpis.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uni-space-3); }
    .pl-kpis.is-3 { grid-template-columns: 1fr; }
    .pl-metric { padding: var(--uni-space-3) var(--uni-space-4); }
    .pl-metric-value { font-size: var(--uni-font-size-xl); }
    .pl-metric-groups { grid-template-columns: 1fr; }
    .pl-metric-group { padding: var(--uni-space-4); }
    .pl-bridge { grid-template-columns: 1fr; }
    .pl-card { padding: var(--uni-space-4); }
    .pl-module-head { flex-direction: column; align-items: flex-start; gap: var(--uni-space-1); }
    .pl-toolbar > .uni-field { flex: 1 1 calc(50% - var(--uni-space-3)); min-width: 0; }
    .pl-chart-frame { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--uni-space-2); }
    .pl-chart-key { padding-left: 0; }
    .pl-chart-cutoff span { display: none; }
    .pl-chart-axis-x span.is-minor { visibility: hidden; }
    .pl-inline-filter { width: 100%; }
    .pl-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pl-row-badges { grid-column: 1 / -1; grid-row: 2; }
    .pl-row-amount { grid-column: 2; grid-row: 1; }
    .pl-compare-row:not(.is-head) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-compare-row.is-head { display: none; }
    .pl-compare-label { grid-column: 1 / -1; }
    .pl-compare-value::before, .pl-compare-delta::before { content: attr(data-label); display: block; color: var(--uni-color-text-muted); font-size: var(--uni-font-size-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
    .pl-compare-delta { grid-column: 1 / -1; }
}

/* ---------- Caixa de seleção da ficha de formulário ----------
   O CSS legado do UniFin estiliza `label` (coluna) e `input` (44px) de forma global; a ficha `.uni-field-check` da
   família Uni é uma LINHA com a caixa de 16px ao lado do texto (DS §3.3). */
.pl-page .uni-field-check,
.uni-modal .uni-field-check { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--uni-space-2); }
.pl-page .uni-field-check input[type="checkbox"],
.uni-modal .uni-field-check input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; padding: 0; box-shadow: none; }

/* ---------- Relatórios executivos (UNIFIN-FPA-07) ----------
   Seletor de três relatórios (cartões de rádio), parâmetros do relatório escolhido e o arquivo pronto. Só tokens --uni-*. */
.pl-report-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--uni-space-4); }
.pl-report-type {
    display: grid; align-content: start; gap: var(--uni-space-2); min-width: 0; padding: var(--uni-space-4) var(--uni-space-5);
    border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-lg); background: var(--uni-color-surface);
    color: var(--uni-color-text); font: inherit; text-align: left; cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.pl-report-type:hover:not(:disabled) { border-color: var(--uni-color-border-strong); }
.pl-report-type:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--uni-color-focus-ring); }
.pl-report-type.is-selected { border-color: var(--uni-color-primary); box-shadow: inset 0 0 0 1px var(--uni-color-primary); background: color-mix(in srgb, var(--uni-color-primary-soft) 45%, var(--uni-color-surface)); }
.pl-report-type:disabled { cursor: not-allowed; opacity: 0.6; }
.pl-report-type-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--uni-radius-md); background: var(--uni-color-primary-soft); color: var(--uni-color-primary-soft-text); }
.pl-report-type-icon .crm-icon { width: 18px; height: 18px; }
.pl-report-type strong { font-size: var(--uni-font-size-md); font-weight: 600; line-height: 1.3; }
.pl-report-type-question { color: var(--uni-color-text); font-size: var(--uni-font-size-sm); line-height: 1.45; }
.pl-report-type small { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); line-height: 1.45; }
.pl-report-type small.pl-report-type-lock { color: var(--uni-color-warning); font-weight: 600; }
.pl-report-form .uni-disclosure { border-top: 1px solid var(--uni-color-border); padding-top: var(--uni-space-3); }
.pl-report-form .uni-disclosure-body { display: grid; gap: var(--uni-space-3); padding-top: var(--uni-space-3); }
.pl-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uni-space-3) var(--uni-space-4); }
.pl-report-ready { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border-color: color-mix(in srgb, var(--uni-color-success) 35%, var(--uni-color-border)); }
.pl-report-ready-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--uni-color-success-soft); color: var(--uni-color-success); }
.pl-report-ready-icon .crm-icon { width: 18px; height: 18px; }
.pl-report-ready-text { display: grid; gap: var(--uni-space-1); min-width: 0; }
.pl-report-ready-text strong { font-size: var(--uni-font-size-md); font-weight: 600; }
.pl-report-ready-text span { font-size: var(--uni-font-size-sm); }
.pl-report-ready-text small { color: var(--uni-color-text-muted); font-size: var(--uni-font-size-xs); overflow-wrap: anywhere; }
.pl-report-ready-actions { display: flex; flex-wrap: wrap; gap: var(--uni-space-2); }
.pl-report-ready-actions .app-button { text-decoration: none; }

@media (max-width: 1023px) {
    .pl-report-types { grid-template-columns: 1fr; }
    .pl-report-type { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--uni-space-3); }
    .pl-report-type > :not(.pl-report-type-icon) { grid-column: 2; }
    .pl-report-type-icon { grid-row: 1 / span 3; }
}

@media (max-width: 767px) {
    .pl-report-ready { grid-template-columns: auto minmax(0, 1fr); }
    .pl-report-ready-actions { grid-column: 1 / -1; }
    .pl-report-ready-actions .app-button, .pl-report-actions .app-button { flex: 1 1 100%; justify-content: center; }
}