/* ─────────────────────────────────────────────────────────
 *  portto-psi-design.css — Design system compartilhado das páginas PSI
 *  Fase PSI visual (#251). Importado por Pg5 (admin), Pg6 (validação),
 *  Pg7 (cronograma) — e referenciável pelo Pg4 (avaliação).
 *  Só estilos — não toca lógica de negócio.
 * ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --psi-dark: #1e2a4a;
  --psi-dark-2: #2a3960;
  --psi-cream: #faf8f3;
  --psi-card: #ffffff;
  --psi-border: #e5e7eb;
  --psi-text: #1f2937;
  --psi-muted: #6b7280;
  --psi-azul: #2563eb;
  --psi-verde: #10b981;
  --psi-verde-light: #d1fae5;

  /* Matriz PGR (mesma da skill inventario-riscos-portto) */
  --pgr-trivial: #00B050;
  --pgr-moderado: #FFC000;
  --pgr-importante: #FF8C00;
  --pgr-intoleravel: #FF0000;
}

/* HEADER */
.psi-header {
  background: var(--psi-dark);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.psi-header__brand { display: flex; align-items: center; gap: 12px; }
.psi-header__brand img { height: 32px; background: #fff; border-radius: 6px; padding: 4px 8px; }
.psi-header__brand h1 { font-size: 16px; margin: 0; font-weight: 700; font-family: 'Inter', sans-serif; }
.psi-header__brand p { font-size: 12px; opacity: 0.7; margin: 2px 0 0; }
.psi-header__meta { font-size: 12px; opacity: 0.75; }

/* PROGRESS */
.psi-progress { background: var(--psi-border); height: 6px; }
.psi-progress__bar { background: var(--psi-verde); height: 100%; transition: width 0.3s ease; }

/* CARD */
.psi-card {
  background: var(--psi-card);
  border: 1px solid var(--psi-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* BOTÕES */
.psi-btn { padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; font-size: 14px; font-family: 'Inter', sans-serif; }
.psi-btn--primary { background: var(--psi-dark); color: #fff; }
.psi-btn--primary:hover { background: var(--psi-dark-2); }
.psi-btn--secondary { background: #fff; color: var(--psi-text); border: 1px solid var(--psi-border); }

/* BADGE PGR */
.badge-pgr { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; white-space: nowrap; }
.badge-pgr--trivial { background: var(--pgr-trivial); }
.badge-pgr--moderado { background: var(--pgr-moderado); color: #5b4a00; }
.badge-pgr--importante { background: var(--pgr-importante); }
.badge-pgr--intoleravel { background: var(--pgr-intoleravel); }

/* CHIP (agravos/tags) */
.chip { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 999px; font-weight: 600; background: #eef2f7; color: #475569; }

/* INPUT */
.psi-input {
  width: 100%; border: 1px solid var(--psi-border); border-radius: 8px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; background: #fff;
}
.psi-input:focus { outline: 2px solid var(--psi-azul); outline-offset: 1px; border-color: var(--psi-azul); }

/* utilidade: badge PGR por texto (helper p/ classe dinâmica no JS)
   badge-pgr + (Trivial→--trivial, Moderado→--moderado, Importante→--importante, Intolerável→--intoleravel) */

@media (max-width: 1024px) {
  .psi-grid-2, .psi-grid-3, .psi-grid-4 { grid-template-columns: 1fr !important; }
}