/* OpenNota — painel do SaaS (painel.opennota.com.br, fase E1).
   Carregado depois de opennota.css e portal.css. Referência: OpenNota Painel.dc.html.
   A CSP não aceita estilo inline: barras usam degraus de 5% (pn-h-*, pn-w-*). */

.pn-topo { background: var(--navy); border-bottom-color: var(--navy); }
.pn-topo .p-marca { color: #c9d6e8; }
.pn-selo { font: 700 .7rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #7fb2e8; }

/* barra lateral escura, como no protótipo */
.painel .p-lateral { background: var(--navy); border-right-color: var(--navy); }
.painel .p-grupo { color: #7f93b3; }
.painel .p-nav { color: #c9d6e8; }
.painel .p-nav:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.painel .p-nav-ativo, .painel .p-nav-ativo:hover { background: #7fb2e8; color: var(--navy); font-weight: 600; }
.painel .p-nav-off, .painel .p-nav-off:hover { color: #6d7f9c; background: none; }
.painel .p-nav small { color: #6d7f9c; }
.painel .p-usuario { border-top-color: rgba(255, 255, 255, .14); }
.painel .p-usuario-nome { color: #fff; }
.painel .p-usuario-nome span { color: #9fb0c9; }
.painel .p-avatar { background: #7fb2e8; color: var(--navy); }
.painel .p-usuario .p-link-botao { color: #c9d6e8; }

.pn-campo-inline { flex-direction: row; align-items: center; gap: 8px; }
.pn-campo-inline select { min-width: 170px; }

/* indicadores */
.pn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pn-kpi { background: #fff; border: 1px solid var(--p-borda); border-radius: var(--p-raio); padding: 16px 18px; display: grid; gap: 4px; min-width: 0; }
.pn-kpi span { font: 700 .7rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pn-kpi strong { font: 800 1.7rem/1.1 var(--font-head); color: var(--navy); }
.pn-kpi small { color: var(--muted); font-size: .82rem; }
.pn-kpi-alerta strong { color: var(--p-erro); }

.pn-colunas-largas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pn-grade { gap: 20px; }

/* gráfico de barras por dia */
.pn-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 180px; padding-top: 6px; border-bottom: 1px solid var(--p-borda); }
.pn-barra { display: block; border-radius: 3px 3px 0 0; background: var(--navy); min-height: 0; }
.pn-barra-fds { background: #c9d7ea; }
.pn-eixo { display: flex; justify-content: space-between; font: 500 .75rem/1 var(--font-mono); color: var(--muted); }

/* alertas */
.pn-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-alertas li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .9rem; }

/* barras horizontais */
.pn-tabela-barras td { vertical-align: middle; }
.pn-col-barra { width: 45%; }
.pn-trilho { display: block; height: 8px; border-radius: 999px; background: #e3e9f2; overflow: hidden; min-width: 80px; }
.pn-preenche { display: block; height: 100%; background: var(--navy); }
.pn-preenche-alerta { background: #ff9b43; }
.pn-preenche-estouro { background: var(--red); }
.pn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-estouro { color: var(--red); font-weight: 600; }
.pn-uso { display: grid; gap: 4px; min-width: 150px; }

/* contas */
.pn-contas { display: grid; gap: 20px; align-items: start; }
.pn-contas-com-detalhe { grid-template-columns: minmax(0, 1fr) 400px; }
.pn-linha-sel td { background: var(--p-vermelho-claro); }
.pn-linha-sel td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.pn-linha-fora td { color: var(--muted); }
.pn-detalhe { position: sticky; top: 16px; }
.pn-quadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pn-quadros div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--p-borda); }
.pn-quadros span { font: 700 .66rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pn-quadros strong { color: var(--navy); font-size: .95rem; }
.pn-botao-perigo { background: var(--red); border-color: var(--red); }

/* planos */
.pn-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pn-plano { align-content: start; }
.pn-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pn-motivo { flex: 1 1 320px; }
.pn-planos-form { display: grid; gap: 20px; }

@media (max-width: 1200px) {
    .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pn-planos { grid-template-columns: 1fr; }
    .pn-contas-com-detalhe { grid-template-columns: 1fr; }
    .pn-detalhe { position: static; }
}
@media (max-width: 640px) {
    .pn-kpis, .pn-quadros { grid-template-columns: 1fr; }
    .pn-barras { height: 120px; gap: 2px; }
}

/* degraus de 5% */
.pn-h-0 { height: 0%; }
.pn-h-5 { height: 5%; }
.pn-h-10 { height: 10%; }
.pn-h-15 { height: 15%; }
.pn-h-20 { height: 20%; }
.pn-h-25 { height: 25%; }
.pn-h-30 { height: 30%; }
.pn-h-35 { height: 35%; }
.pn-h-40 { height: 40%; }
.pn-h-45 { height: 45%; }
.pn-h-50 { height: 50%; }
.pn-h-55 { height: 55%; }
.pn-h-60 { height: 60%; }
.pn-h-65 { height: 65%; }
.pn-h-70 { height: 70%; }
.pn-h-75 { height: 75%; }
.pn-h-80 { height: 80%; }
.pn-h-85 { height: 85%; }
.pn-h-90 { height: 90%; }
.pn-h-95 { height: 95%; }
.pn-h-100 { height: 100%; }
.pn-w-0 { width: 0%; }
.pn-w-5 { width: 5%; }
.pn-w-10 { width: 10%; }
.pn-w-15 { width: 15%; }
.pn-w-20 { width: 20%; }
.pn-w-25 { width: 25%; }
.pn-w-30 { width: 30%; }
.pn-w-35 { width: 35%; }
.pn-w-40 { width: 40%; }
.pn-w-45 { width: 45%; }
.pn-w-50 { width: 50%; }
.pn-w-55 { width: 55%; }
.pn-w-60 { width: 60%; }
.pn-w-65 { width: 65%; }
.pn-w-70 { width: 70%; }
.pn-w-75 { width: 75%; }
.pn-w-80 { width: 80%; }
.pn-w-85 { width: 85%; }
.pn-w-90 { width: 90%; }
.pn-w-95 { width: 95%; }
.pn-w-100 { width: 100%; }