/* ESGSimple — Radar de Apoios + NIF demo.
 * Uses only the design tokens from styles.css (no new colours). */

.radar-hero { background: var(--c-bg-soft); padding: 48px 0 32px; border-bottom: 1px solid var(--c-border); }
.radar-hero h1 { margin: 0 0 10px; }
.radar-hero p { color: var(--c-text-muted); max-width: 62ch; margin: 0 0 18px; }

.radar-fresh {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .875rem; color: var(--c-text-muted);
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.radar-fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-good); flex: none; }
.radar-fresh-stale .radar-fresh-dot { background: var(--c-mid); }

.radar-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.radar-stat b { display: block; font-size: 1.6rem; color: var(--c-primary); line-height: 1.15; }
.radar-stat span { font-size: .8125rem; color: var(--c-text-muted); }

.radar-controls { border-bottom: 1px solid var(--c-border); background: var(--c-bg-card); padding: 14px 0; }
.radar-controls-inner { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.radar-search, .radar-select {
  font: inherit; font-size: .9375rem; padding: 9px 12px;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
  background: var(--c-bg-card); color: var(--c-text);
}
.radar-search { flex: 1 1 240px; min-width: 0; }
/* Programme names are long ("Programa Regional do Alentejo 2021-2027 (30)").
   Cap the control and let the browser ellipsise, or it overflows the row. */
.radar-select { flex: 0 1 340px; min-width: 0; max-width: 100%; }
.radar-count { font-size: .875rem; color: var(--c-text-muted); margin-left: auto; }

.radar-list { display: grid; gap: 14px; margin-top: 22px; }
.radar-card {
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.radar-card h3 { margin: 0 0 6px; font-size: 1.0625rem; line-height: 1.35; }
.radar-card-prog { font-size: .8125rem; color: var(--c-text-muted); margin: 0 0 12px; }
.radar-card-meta { display: flex; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 12px; }
.radar-meta-item { font-size: .8125rem; }
.radar-meta-item b { display: block; color: var(--c-text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .6875rem; }
.radar-meta-item span { color: var(--c-text); }
.radar-meta-null { color: var(--c-text-faint); font-style: italic; }

.radar-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.radar-badge {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid transparent;
}
.radar-badge-aberto { background: var(--c-primary-soft); color: var(--c-primary); border-color: #c3ddd1; }
.radar-badge-brevemente { background: #fbf3df; color: var(--c-mid); border-color: #e8d6a4; }
.radar-badge-regiao { background: var(--c-bg-soft); color: var(--c-text-muted); border-color: var(--c-border); }
.radar-badge-urgent { background: #fbe8e0; color: var(--c-warn); border-color: #f0cdbb; }
.radar-badge-expired { background: #f6e7e7; color: var(--c-danger); border-color: #e6c6c6; }

.radar-card-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--c-border); }
.radar-src { font-size: .75rem; color: var(--c-text-faint); }
.radar-empty, .radar-loading, .radar-error { padding: 40px 0; text-align: center; color: var(--c-text-muted); }
.radar-error { color: var(--c-danger); }

/* ---- NIF demo ---- */
.nif-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin: 18px 0 6px; }
.nif-input {
  font: inherit; font-size: 1.125rem; letter-spacing: .06em; padding: 12px 14px; width: 12ch;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-bg-card);
}
.nif-input.is-invalid { border-color: var(--c-danger); }
.nif-hint { font-size: .8125rem; color: var(--c-text-muted); margin: 0; }
.nif-hint-error { color: var(--c-danger); }

.nif-company { background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 22px; }
.nif-company h2 { margin: 0 0 4px; font-size: 1.125rem; }
.nif-company dl { display: flex; gap: 10px 32px; flex-wrap: wrap; margin: 10px 0 0; }
.nif-dl-item { min-width: 0; }
.nif-company dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-faint); font-weight: 600; }
.nif-company dd { margin: 2px 0 0; font-size: .9375rem; overflow-wrap: anywhere; }

.nif-headline { font-size: 1.0625rem; line-height: 1.6; margin: 0 0 6px; }
.nif-headline b { color: var(--c-primary); }

/* The two match levels must never look alike — that separation is the honesty
   of this feature, so it is carried by border, background AND label. */
.nif-level { margin-top: 30px; }
.nif-level-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.nif-level-head h2 { margin: 0; font-size: 1.125rem; }
.nif-level-note { font-size: .8125rem; color: var(--c-text-muted); margin: 0 0 14px; max-width: 72ch; }
.nif-level-curated .radar-card { border-left: 4px solid var(--c-primary); }
.nif-level-triage .radar-card { border-left: 4px solid var(--c-border-strong); background: #fcfbf8; }

.nif-checks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.nif-check {
  font-size: .6875rem; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--c-primary-soft); color: var(--c-primary); border: 1px solid #c3ddd1;
}
.nif-check-unchecked { background: var(--c-bg-soft); color: var(--c-text-faint); border-color: var(--c-border); }

.nif-cta { margin-top: 34px; padding: 22px 24px; background: var(--c-primary-soft); border: 1px solid #c3ddd1; border-radius: var(--radius-md); }
.nif-cta h2 { margin: 0 0 6px; font-size: 1.125rem; }
.nif-cta p { margin: 0 0 14px; color: var(--c-text-muted); }

/* Homepage entry card.
   index.html is the reskinned v2 (navy), while this stylesheet's accents come
   from the older green system used by the rest of the site. The card therefore
   drops the green tint here and borrows the page's own surface tokens, so the
   entry point does not look pasted in — without touching the reskin itself
   (ETAPA 1b stays a separate task). */
.radar-home-card {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  background: var(--c-bg-card, #fff); border-color: var(--c-border, #e4e7ec);
}
.radar-home-card p { margin: 6px 0 0; color: var(--c-text-muted); max-width: 60ch; }
.radar-home-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .radar-hero { padding: 32px 0 24px; }
  .radar-count { margin-left: 0; width: 100%; }
  .radar-stats { gap: 18px; }
  .nif-input { width: 100%; }
}