/*
 * Painéis de indicadores.
 *
 * Cores por papel, não por valor: a série 1 é sempre o azul e a 2 o laranja —
 * que por acaso são as cores da marca VAR —, e a paleta inteira passou no
 * validador de daltonismo (CVD ΔE ≥ 9 entre vizinhas). Verde-água e amarelo
 * ficam abaixo de 3:1 sobre o branco; por isso todo gráfico tem "Ver tabela".
 * Os mesmos valores estão em public/redesign/js/paineis.js.
 */
.pn {
    --pn-plano: #f4f5f7;
    --pn-superficie: #ffffff;
    --pn-tinta: #0b0b0b;
    --pn-tinta-2: #52514e;
    --pn-tinta-3: #6f6e69;
    --pn-grade: #e8e7e1;
    --pn-base: #c3c2b7;
    --pn-borda: rgba(11, 11, 11, .09);
    --pn-s1: #2a78d6;
    --pn-s1-claro: #e8f1fc;
    --pn-s2: #eb6834;
    --pn-bom: #006300;
    --pn-bom-fundo: #e6f4e6;
    --pn-ruim: #b42828;
    --pn-ruim-fundo: #fbeaea;
    --pn-aviso: #8a5a00;
    --pn-aviso-fundo: #fff4dc;
    --pn-marinho: #1a2b47;

    color: var(--pn-tinta);
    font-size: 14px;
    line-height: 1.45;
    padding: 4px 4px 32px;
}
.pn *, .pn *::before, .pn *::after { box-sizing: border-box; }
.pn h1, .pn h2, .pn h3, .pn h4 { color: var(--pn-tinta); margin: 0; letter-spacing: -.01em; }
.pn a { color: var(--pn-s1); }
.pn .num, .pn .pn-tab td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn .cen { text-align: center; }

/* Faixa da prévia ("Ver como" o dashboard de um gestor) ----------------- */
.pn-previa {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    background: repeating-linear-gradient(135deg, #fff8e6 0 10px, #fff3d6 10px 20px);
    border: 1px solid #f0d58c; border-radius: 10px;
    padding: 8px 14px; margin-bottom: 18px; font-size: 13px; color: #5c4400;
}
.pn-previa-selo { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; background: #5c4400; color: #fff8e6; border-radius: 99px; padding: 2px 10px; }

/* Topo ----------------------------------------------------------------- */
.pn-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.pn-sobre { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pn-tinta-3); font-weight: 600; }
.pn-topo h1 { font-size: 26px; font-weight: 600; margin-top: 2px; }
.pn-como { margin-top: 6px; font-size: 13px; color: var(--pn-tinta-2); background: #eef0f4; border-radius: 8px; padding: 4px 10px; display: inline-block; }
.pn-como a { margin-left: 6px; }
.pn-paineis { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-paineis a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 99px; border: 1px solid var(--pn-borda);
    background: var(--pn-superficie); color: var(--pn-tinta-2); font-size: 13px; font-weight: 500; text-decoration: none;
}
.pn-paineis a:hover { border-color: var(--pn-s1); color: var(--pn-s1); }
.pn-paineis a.ativo { background: var(--pn-marinho); border-color: var(--pn-marinho); color: #fff; }

/* Filtros: uma linha, acima de tudo que eles recortam ------------------- */
.pn-filtros {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px;
    background: var(--pn-superficie); border: 1px solid var(--pn-borda); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px;
}
.pn-campo { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 140px; }
.pn-campo-largo { min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.pn-campo > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pn-tinta-3); }
.pn-campo select, .pn-campo input {
    height: 36px; border: 1px solid #d9d8d2; border-radius: 8px; background: #fff;
    padding: 0 10px; font-size: 14px; color: var(--pn-tinta); width: 100%;
}
.pn-datas { display: contents; }
.pn-datas[hidden] { display: none; }
.pn-botao { height: 36px; border: 0; border-radius: 8px; background: var(--pn-s1); color: #fff; font-weight: 600; padding: 0 18px; cursor: pointer; }
.pn-botao:hover { background: #256abf; }
.pn-limpar { align-self: center; font-size: 13px; }
.pn .select2-container { min-width: 100%; }
.pn .select2-container .select2-selection--single { height: 36px; border-color: #d9d8d2; border-radius: 8px; }
.pn .select2-container .select2-selection--single .select2-selection__rendered { line-height: 34px; }
.pn .select2-container .select2-selection--single .select2-selection__arrow { height: 34px; }

.pn-vercomo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--pn-tinta-2); margin: 0 2px 16px; }
.pn-vercomo label { margin: 0; font-weight: 500; }
.pn-vercomo input { height: 30px; border: 1px solid #d9d8d2; border-radius: 6px; padding: 0 8px; width: 210px; font-size: 13px; }
.pn-vercomo button { height: 30px; border: 1px solid var(--pn-borda); border-radius: 6px; background: #fff; padding: 0 12px; cursor: pointer; }
.pn-vercomo small { color: var(--pn-tinta-3); flex-basis: 100%; }
@media (min-width: 1100px) { .pn-vercomo small { flex-basis: auto; } }

.pn-aviso { background: var(--pn-aviso-fundo); color: var(--pn-aviso); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

/* Abas ----------------------------------------------------------------- */
.pn-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--pn-grade); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.pn-abas a {
    padding: 10px 14px; color: var(--pn-tinta-2); font-weight: 500; text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pn-abas a:hover { color: var(--pn-tinta); }
.pn-abas a.ativa { color: var(--pn-tinta); border-bottom-color: var(--pn-s1); font-weight: 600; }

.pn-abas-mini { margin-bottom: 12px; }
.pn-abas-mini a { padding: 6px 10px; font-size: 13px; }
.pn-iframe { display: block; width: 100%; height: 3500px; min-height: 600px; border: 0; border-radius: 8px; }

.pn-intro { color: var(--pn-tinta-2); max-width: 820px; margin: -4px 0 16px; }
.pn-secao { font-size: 17px; font-weight: 600; margin: 26px 0 12px; }

/* KPIs ----------------------------------------------------------------- */
.pn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pn-kpi {
    display: flex; flex-direction: column;
    background: var(--pn-superficie); border: 1px solid var(--pn-borda); border-radius: 12px;
    padding: 14px 16px 12px;
}
.pn-kpi-rotulo { font-size: 13px; color: var(--pn-tinta-2); font-weight: 500; }
.pn-kpi-valor { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; line-height: 1.15; }
.pn-kpi-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12px; }
.pn-kpi .pn-spark { margin-top: auto; padding-top: 8px; height: 30px; }
.pn-kpi-nota { color: var(--pn-tinta-3); }
.pn-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; border-radius: 6px; padding: 1px 6px; }
.pn-delta.bom { color: var(--pn-bom); background: var(--pn-bom-fundo); }
.pn-delta.ruim { color: var(--pn-ruim); background: var(--pn-ruim-fundo); }
.pn-spark { display: block; width: 100%; height: 22px; margin-top: 8px; overflow: visible; }
.pn-spark polyline { stroke: #b9c8dc; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pn-spark circle { fill: var(--pn-s1); }

/* Grade de cartões ----------------------------------------------------- */
.pn-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.pn-grade-1 { grid-template-columns: minmax(0, 1fr); }
.pn-col-2 { grid-column: span 2; }
.pn-col-3 { grid-column: 1 / -1; }
.pn-linha-2 { grid-row: span 2; }
@media (max-width: 1199px) {
    .pn-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pn-grade-1 { grid-template-columns: minmax(0, 1fr); }
    .pn-col-3, .pn-col-2 { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .pn-grade { grid-template-columns: minmax(0, 1fr); }
    .pn-linha-2 { grid-row: auto; }
    .pn-topo h1 { font-size: 21px; }
    .pn-campo, .pn-campo-largo { min-width: 0; flex: 1 1 140px; }
}

.pn-card {
    background: var(--pn-superficie); border: 1px solid var(--pn-borda); border-radius: 12px;
    padding: 16px 16px 14px; margin: 0 0 14px; min-width: 0;
}
.pn-grade > .pn-card { margin: 0; }
.pn-card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.pn-card-topo h3 { font-size: 15px; font-weight: 600; }
.pn-card-topo p { margin: 2px 0 0; font-size: 12.5px; color: var(--pn-tinta-3); }
.pn-card-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.pn-card-acoes button {
    border: 1px solid var(--pn-borda); background: #fff; border-radius: 6px; font-size: 12px;
    padding: 3px 8px; color: var(--pn-tinta-2); cursor: pointer;
}
.pn-card-acoes button:hover, .pn-card-acoes button[aria-pressed="true"] { border-color: var(--pn-s1); color: var(--pn-s1); }
.pn-plot { position: relative; height: 260px; }
.pn-grafico:has(.pn-plot-mapa) { display: flex; flex-direction: column; }
.pn-plot-mapa { flex: 1 1 auto; height: auto; min-height: 380px; }
.pn-mapa { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: #eef0f2; }
.pn-grafico.pn-mostra-tabela .pn-plot { display: none; }
.pn-vazio { color: var(--pn-tinta-3); font-size: 13px; padding: 28px 8px; text-align: center; background: #fafaf8; border-radius: 8px; }

/* Tooltip do mapa no mesmo estilo do Chart.js */
.pn .leaflet-tooltip { border: 1px solid var(--pn-borda); box-shadow: 0 4px 14px rgba(0,0,0,.08); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
.pn .leaflet-tooltip strong { font-size: 14px; }

/* Tabelas -------------------------------------------------------------- */
.pn-rolagem { overflow-x: auto; }
.pn-rolagem-alta { max-height: 520px; overflow-y: auto; }
.pn-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.pn-tab th {
    position: sticky; top: 0; background: var(--pn-superficie); z-index: 1;
    text-align: left; font-weight: 600; color: var(--pn-tinta-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    padding: 8px 8px; border-bottom: 1px solid var(--pn-grade); white-space: nowrap;
}
.pn-tab th.num { text-align: right; }
.pn-tab td { padding: 8px 8px; border-bottom: 1px solid #f0efea; vertical-align: top; }
.pn-tab tbody tr:hover td { background: #fafaf7; }
.pn-tab td small { display: block; color: var(--pn-tinta-3); font-size: 12px; }
.pn-tab-compacta td, .pn-tab-compacta th { padding: 6px 8px; }
.pn-tab[data-ordenavel] th { cursor: pointer; user-select: none; }
.pn-tab[data-ordenavel] th[aria-sort="descending"]::after { content: " ↓"; }
.pn-tab[data-ordenavel] th[aria-sort="ascending"]::after { content: " ↑"; }
.pn-tab-nome { position: relative; min-width: 180px; }
.pn-tab-barra { display: block; height: 3px; background: var(--pn-s1); border-radius: 2px; margin-top: 5px; opacity: .55; }
.pn-tab-check td { vertical-align: middle; }
.pn-tab-produto { min-width: 240px; }
.pn code { color: var(--pn-tinta-2); background: #f4f4f1; border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }
.pn-ok { color: var(--pn-bom); }
.pn-falta { color: var(--pn-ruim); }
.pn-na { color: var(--pn-base); }
.pn-atrasado { color: var(--pn-ruim); font-weight: 600; }
.pn-riscada td { color: var(--pn-tinta-3); text-decoration: line-through; }
.pn-riscada td:last-child, .pn-riscada td:nth-last-child(2) { text-decoration: none; }
.pn-etiqueta { display: inline-block; font-size: 11px; background: #eeede8; color: var(--pn-tinta-2); border-radius: 4px; padding: 0 6px; margin-left: 6px; }
.pn-etiqueta-boa { background: var(--pn-bom-fundo); color: var(--pn-bom); margin-left: 0; }

.pn-tabela { margin-top: 4px; max-height: 340px; overflow: auto; }
.pn-tabela table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pn-tabela th, .pn-tabela td { padding: 5px 8px; border-bottom: 1px solid #f0efea; text-align: left; }
.pn-tabela th { color: var(--pn-tinta-3); font-weight: 600; position: sticky; top: 0; background: #fff; }
.pn-tabela td + td, .pn-tabela th + th { text-align: right; font-variant-numeric: tabular-nums; }

/* Números em bloco (presença, capacidade) ------------------------------ */
.pn-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 16px; margin: 4px 0 10px; }
.pn-numeros dt { font-size: 12.5px; font-weight: 500; color: var(--pn-tinta-2); }
.pn-numeros dd { font-size: 22px; font-weight: 600; margin: 2px 0 0; }
.pn-numeros small { color: var(--pn-tinta-3); font-size: 12px; }
.pn-numeros .pn-ruim dd { color: var(--pn-ruim); }
.pn-nota { font-size: 12.5px; color: var(--pn-tinta-3); margin: 8px 0 0; }

/* Funil: cada etapa mostra quanto passou da anterior ------------------- */
.pn-funil { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.pn-funil li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.pn-funil-rotulo { font-size: 13px; color: var(--pn-tinta-2); }
.pn-funil-valor { font-size: 20px; font-weight: 600; text-align: right; }
.pn-funil-passo { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pn-tinta-3); }
.pn-funil-passo .pn-medidor { flex: 1; height: 8px; }
.pn-funil-passo strong { color: var(--pn-tinta); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* Medidor: trilho claro do mesmo azul ---------------------------------- */
.pn-medidor { display: block; height: 6px; background: var(--pn-s1-claro); border-radius: 99px; overflow: hidden; }
.pn-medidor > span { display: block; height: 100%; background: var(--pn-s1); border-radius: 99px; }
.pn-medidor-ruim > span { background: #d03b3b; }

.pn-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-checklist li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; }
.pn-checklist .pn-medidor { grid-column: 1 / -1; }
.pn-checklist-num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Sazonalidade --------------------------------------------------------- */
.pn-calor { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.pn-calor th { color: var(--pn-tinta-3); font-weight: 600; text-align: center; padding: 2px 4px; }
.pn-calor tbody th { text-align: left; color: var(--pn-tinta-2); }
.pn-calor td { text-align: center; height: 30px; min-width: 40px; border-radius: 4px; background: #f6f6f3; }
.pn-calor td.pn-calor-total { background: none; font-weight: 600; text-align: right; padding-left: 8px; }
.pn-escala { display: flex; align-items: center; gap: 2px; margin-top: 10px; font-size: 11.5px; color: var(--pn-tinta-3); }
.pn-escala i { width: 22px; height: 10px; border-radius: 2px; }
.pn-escala span:first-child { margin-right: 6px; }
.pn-escala span:last-child { margin-left: 6px; }

/* Destaques ------------------------------------------------------------ */
.pn-destaques-lista ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 24px; }
.pn-destaques-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--pn-tinta-2); line-height: 1.5; }
.pn-destaques-lista strong { color: var(--pn-tinta); }
.pn-destaque-icone { flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--pn-s1-claro); color: #184f95; display: flex; align-items: center; justify-content: center; }

.pn-calor-hora td { min-width: 34px; height: 26px; font-size: 11px; }

/* Agenda ---------------------------------------------------------------- */
.pn-agenda { list-style: none; margin: 0; padding: 0; max-height: 470px; overflow-y: auto; }
.pn-agenda li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0efea; }
.pn-agenda time { flex: 0 0 44px; text-align: center; font-size: 11px; text-transform: uppercase; color: var(--pn-tinta-3); line-height: 1.1; }
.pn-agenda time strong { display: block; font-size: 20px; color: var(--pn-tinta); }
.pn-agenda-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pn-agenda-txt > span:first-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-agenda-txt small { color: var(--pn-tinta-3); }

/* Pesquisa --------------------------------------------------------------- */
.pn-pesquisa { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; }
.pn-pesquisa h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.pn-barrinhas { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pn-barrinhas li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 38px; align-items: center; gap: 8px; font-size: 12.5px; }
.pn-barrinha-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pn-tinta-2); }
.pn-barrinha { display: block; height: 8px; background: var(--pn-s1-claro); border-radius: 0 4px 4px 0; }
.pn-barrinha > span { display: block; height: 100%; background: var(--pn-s1); border-radius: 0 4px 4px 0; }
.pn-barrinha-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Avaliações -------------------------------------------------------------- */
.pn-avaliacoes { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.pn-avaliacoes li { padding: 10px 0; border-bottom: 1px solid #f0efea; }
.pn-av-topo { display: flex; align-items: center; gap: 8px; }
.pn-av-nota { font-weight: 700; background: var(--pn-s1-claro); color: #184f95; border-radius: 6px; padding: 0 7px; }
.pn-av-data { color: var(--pn-tinta-3); font-size: 12px; }
.pn-avaliacoes p { margin: 4px 0 2px; }
.pn-avaliacoes small { color: var(--pn-tinta-3); }

/* Alertas -------------------------------------------------------------- */
.pn-alertas { display: grid; gap: 10px; }
.pn-alerta { background: var(--pn-superficie); border: 1px solid var(--pn-borda); border-left-width: 4px; border-radius: 10px; padding: 12px 16px; }
.pn-alerta summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; list-style: none; }
.pn-alerta summary::-webkit-details-marker { display: none; }
.pn-alerta summary strong { font-size: 15px; }
.pn-alerta > p { margin: 8px 0; color: var(--pn-tinta-2); }
.pn-alerta ul { margin: 0; padding: 0; list-style: none; }
.pn-alerta li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #f0efea; font-size: 13px; }
.pn-alerta-valor { color: var(--pn-tinta-3); white-space: nowrap; }
.pn-nivel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 4px; padding: 1px 7px; }
.pn-nivel-critico { border-left-color: #d03b3b; }
.pn-nivel-critico .pn-nivel { background: #fbeaea; color: #a32626; }
.pn-nivel-serio { border-left-color: #ec835a; }
.pn-nivel-serio .pn-nivel { background: #fdeee7; color: #9c4219; }
.pn-nivel-aviso { border-left-color: #fab219; }
.pn-nivel-aviso .pn-nivel { background: #fff4dc; color: #7a5200; }
.pn-nivel-info { border-left-color: var(--pn-base); }
.pn-nivel-info .pn-nivel { background: #f0efea; color: var(--pn-tinta-2); }
.pn-tudo-certo { display: flex; align-items: center; gap: 14px; }
.pn-tudo-certo .fa { font-size: 28px; color: #0ca30c; }
.pn-tudo-certo p { margin: 0; color: var(--pn-tinta-3); }
.pn-faixa-alerta { display: block; background: var(--pn-aviso-fundo); color: var(--pn-aviso) !important; border-radius: 8px; padding: 8px 12px; margin: -2px 0 14px; font-weight: 500; text-decoration: none; }

/* Qualidade dos dados ---------------------------------------------------- */
.pn-qualidade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.pn-qualidade .pn-card { margin: 0; }
.pn-q header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pn-q h3 { font-size: 15px; font-weight: 600; }
.pn-q-num { font-size: 13px; color: var(--pn-tinta-3); font-variant-numeric: tabular-nums; }
.pn-q-num strong { font-size: 20px; color: var(--pn-tinta); }
.pn-q .pn-medidor > span { background: #ec835a; }
.pn-q .pn-medidor { background: #fdeee7; }
.pn-q-ok .pn-q-num strong { color: var(--pn-bom); font-size: 16px; }
.pn-q > p { margin: 10px 0 0; color: var(--pn-tinta-2); font-size: 13px; }
.pn-q-ex { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--pn-tinta-3); }
.pn-q-acao { background: #f6f6f3; border-radius: 6px; padding: 6px 10px; font-size: 12.5px !important; color: var(--pn-tinta-2) !important; }

/* Turista ------------------------------------------------------------------ */
.pn-proximas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pn-proximas .pn-card { margin: 0; }
.pn-viagem { display: flex; gap: 14px; }
.pn-viagem time { flex: 0 0 56px; text-align: center; background: var(--pn-s1-claro); border-radius: 10px; padding: 8px 4px; font-size: 11px; color: #184f95; text-transform: uppercase; line-height: 1.2; }
.pn-viagem time strong { display: block; font-size: 24px; }
.pn-viagem h3 { font-size: 15px; font-weight: 600; }
.pn-viagem p { margin: 2px 0 6px; color: var(--pn-tinta-2); font-size: 13px; }

/* Glossário -------------------------------------------------------------- */
.pn-glossario { margin-top: 26px; background: var(--pn-superficie); border: 1px solid var(--pn-borda); border-radius: 12px; padding: 12px 16px; }
.pn-glossario summary { cursor: pointer; font-weight: 600; color: var(--pn-tinta-2); }
.pn-glossario dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 18px; margin: 14px 0 4px; font-size: 13px; }
.pn-glossario dt { font-weight: 600; }
.pn-glossario dd { margin: 0; color: var(--pn-tinta-2); }
@media (max-width: 767px) { .pn-glossario dl { grid-template-columns: 1fr; } .pn-glossario dd { margin-bottom: 6px; } }
.pn-fonte { margin: 10px 4px 0; font-size: 12px; color: var(--pn-tinta-3); }

/* Recarregando: segura o desenho anterior, sem piscar */
.pn.pn-carregando .pn-corpo { opacity: .55; transition: opacity .2s; pointer-events: none; }

/* Aba "Empresas (CNPJ)" do admin: a linha de cima, com o "Enviar relatório". */
.pn-rfb-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 16px; }
.pn-rfb-topo .pn-intro { margin: 0; flex: 1 1 320px; }
/* A grade dentro do painel fica com as cores dela (o ".pn a" pintava cabeçalho e nome de azul). */
.pn .dg .dg-ordena { color: inherit; }
.pn .dg .dg-tit-link { color: var(--dg-tinta); }
.pn .dg a.dg-tit-link:hover { color: var(--dg-azul); }

/* ── Aba dos sites, para quem vê vários: o site à vista e a lista site por site ── */
.pn-site-atual { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 16px; border-left: 4px solid var(--pn-s1); }
.pn-site-atual-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.pn-site-atual-texto .pn-sobre { margin: 0; }
.pn-site-atual-texto strong { font-size: 17px; }
.pn-site-atual-texto a { font-size: 13.5px; overflow-wrap: anywhere; }
.pn-site-atual-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-botao-leve {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid #dcdad3; border-radius: 8px;
    background: #fff; color: var(--pn-tinta); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pn-botao-leve:hover, .pn-botao-leve:focus { border-color: var(--pn-s1); color: var(--pn-s1); text-decoration: none; }
/* width: 0 + min-width: 100%: a tabela rola dentro do cartão em vez de alargar a página
   (no /admin o painel é item de uma caixa flex, que cresceria até caber a tabela inteira). */
.pn-sites { width: 0; min-width: 100%; overflow-x: auto; }
.pn-sites table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pn-sites th, .pn-sites td { padding: 10px 12px; border-bottom: 1px solid #f0efea; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-sites th { color: var(--pn-tinta-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pn-sites th:first-child, .pn-sites td:first-child { text-align: left; white-space: normal; }
.pn-sites tbody tr:last-child td { border-bottom: 0; }
.pn-sites tbody tr:hover { background: #faf9f6; }
.pn-sites-nome { display: block; color: var(--pn-tinta); font-weight: 700; text-decoration: none; }
.pn-sites-nome:hover, .pn-sites-nome:focus { color: var(--pn-s1); text-decoration: underline; }
.pn-sites-endereco { display: block; color: var(--pn-tinta-3); font-size: 12.5px; overflow-wrap: anywhere; }
.pn-sites-abrir { font-weight: 600; text-decoration: none; }
.pn-sites-vazio td { color: var(--pn-tinta-3); }
/* No celular ficam o site, as visitas e os contatos; o resto está no relatório de cada um. */
@media (max-width: 640px) {
    .pn-sites th:nth-child(2), .pn-sites td:nth-child(2),
    .pn-sites th:nth-child(4), .pn-sites td:nth-child(4),
    .pn-sites th:nth-child(6), .pn-sites td:nth-child(6),
    .pn-sites th:nth-child(7), .pn-sites td:nth-child(7) { display: none; }
    .pn-sites th, .pn-sites td { padding: 10px 8px; }
}