/* demo-painel: cartões de KPI, sparklines, filtro de período, mini barras, medidor e alertas com semáforo */
.pa{position:relative;display:flex;flex-direction:column;gap:20px;contain:inline-size}
.pa-carga{position:absolute;left:-30px;right:-30px;top:-28px;height:4px;background:var(--cor);transform-origin:0 50%;transform:scaleX(0);opacity:0}
.pa-topo{display:flex;align-items:center;gap:20px}
.pa-topo>b{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.pa-per{position:relative;display:flex;border:1px solid var(--line);border-radius:8px;background:#F3F5F8;padding:4px;margin-left:auto}
.pa-per span{position:relative;z-index:1;width:104px;text-align:center;font-size:18px;font-weight:700;color:var(--muted);padding:6px 0}
.pa-per span.on{color:var(--ink)}
.pa-perp{position:absolute;left:4px;top:4px;bottom:4px;max-width:104px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 6px rgba(20,32,42,.08)}
.pa-per .pa-perp{width:104px !important}
.pa-at{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--muted);font-weight:600;min-width:180px}
.pa-viva{width:10px;height:10px;border-radius:50%;background:#2E9E50}
.pa-at em{font-style:normal}
.pa-kpis{display:grid;gap:16px}
.pa-k{position:relative;border:1px solid var(--line);border-radius:8px;background:#fff;padding:16px 16px 0;display:flex;flex-direction:column;gap:6px;overflow:hidden;min-width:0}
.pa-k small{font-size:18px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-k>b{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-var{align-self:flex-start;display:flex;align-items:center;gap:4px;font-size:18px;font-weight:700;padding:2px 8px;border-radius:5px}
.pa-var svg{width:18px;height:18px}
.pa-var em{font-style:normal;font-variant-numeric:tabular-nums}
.pa-var.bom{background:#E6F4EA;color:#1E7B3A}
.pa-var.ruim{background:#FDECEC;color:#B42318}
.pa-spw{margin:4px -16px 0;min-width:0}
.pa-sp{display:block;width:100%;height:56px}
.pa-spl{fill:none;stroke:var(--cor);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.pa-spa{fill:var(--cor);opacity:.08}
.pa-baixo{display:flex;gap:16px;align-items:stretch}
.pa-c{border:1px solid var(--line);border-radius:8px;background:#fff;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pa-ct{font-size:19px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px}
.pa-bar{flex:.85}
.pa-bs{flex:1;display:flex;gap:12px;align-items:stretch;min-height:190px}
.pa-b{flex:1;display:flex;flex-direction:column;gap:6px}
.pa-b div{flex:1;position:relative;border-bottom:2px solid var(--line)}
.pa-b i{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--cor);border-radius:5px 5px 0 0}
.pa-b span{font-size:18px;color:var(--muted);font-weight:600;text-align:center}
.pa-meta{width:200px;flex-shrink:0;align-items:center}
.pa-meta .pa-ct{align-self:flex-start}
.pa-g{position:relative;width:190px;height:110px}
.pa-g svg{width:100%;height:100%;overflow:visible}
.pa-gf,.pa-gv{fill:none;stroke-width:18;stroke-linecap:round}
.pa-gf{stroke:#EEF1F5}
.pa-gv{stroke:var(--cor);stroke-dasharray:0 100}
.pa-g b{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:30px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.pa-gt{font-size:18px;color:var(--muted);font-weight:600;text-align:center;line-height:1.35;font-variant-numeric:tabular-nums}
.pa-al{flex:1.7}
.pa-sem{margin-left:auto;display:flex;gap:10px}
.pa-s{display:flex;align-items:center;gap:5px;font-size:18px;font-weight:700;color:var(--ink)}
.pa-s i{width:12px;height:12px;border-radius:50%}
.pa-s em{font-style:normal;display:inline-block;font-variant-numeric:tabular-nums}
.pa-s.vermelho i,.pa-a.vermelho .pa-luz{background:#D92D20}
.pa-s.amarelo i,.pa-a.amarelo .pa-luz{background:#E3A008}
.pa-s.verde i,.pa-a.verde .pa-luz{background:#2E9E50}
.pa-ls{display:flex;flex-direction:column;height:190px;overflow:hidden}
.pa-novo{height:0;overflow:hidden;flex-shrink:0}
.pa-a{display:flex;align-items:center;gap:12px;height:58px;margin-bottom:8px;padding:0 12px;border:1px solid var(--line);border-left-width:4px;border-radius:6px;flex-shrink:0;background:#fff}
.pa-a.vermelho{border-left-color:#D92D20}.pa-a.amarelo{border-left-color:#E3A008}.pa-a.verde{border-left-color:#2E9E50}
.pa-a.dest{background:#FFF6F5}
.pa-luz{position:relative;width:14px;height:14px;border-radius:50%;flex-shrink:0}
.pa-luz u{position:absolute;inset:0;border-radius:50%;background:#D92D20;opacity:0}
.pa-a span{flex:1;min-width:0;font-size:18px;font-weight:600;color:var(--ink);line-height:1.22;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pa-a em{font-style:normal;font-size:18px;color:var(--muted);font-weight:600;white-space:nowrap}
.pa-a em.pa-tag{background:#D92D20;color:#fff;border-radius:4px;padding:1px 8px;font-size:18px}