/* =========================================================
   Auditoria GEO · House Whey
   Extensão de styles.css: só o que essa página precisa e o
   dashboard principal ainda não tem (medidor de score, cores
   de severidade, cards de categoria). Todo o resto (topbar,
   cards, tabelas, tabs, timeline) vem do styles.css normal.
   ========================================================= */

/* ---------- Score hero ---------- */
.score-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.score-ring {
  width: 132px; height: 132px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--score-color, var(--critical)) calc(var(--pct, 0) * 1%), color-mix(in srgb, var(--grid) 55%, transparent) 0);
  display: grid; place-items: center;
}
.score-ring-inner {
  width: 104px; height: 104px; border-radius: 50%; background: var(--surface-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border);
}
.score-ring-value { font-size: 30px; font-weight: 800; line-height: 1; }
.score-ring-max { font-size: 11px; color: var(--muted); margin-top: 2px; }
.score-hero-meta { flex: 1; min-width: 220px; }
.score-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; padding: 4px 11px; border-radius: 99px;
  background: color-mix(in srgb, var(--score-color, var(--critical)) 16%, transparent); color: var(--score-color, var(--critical));
  margin-bottom: 8px;
}
.score-hero-meta dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; margin-top: 10px; }
.score-hero-meta dt { color: var(--muted); font-weight: 600; }
.score-hero-meta dd { color: var(--text-secondary); }

/* ---------- Category score bars (reusa a grade do hbar-chart, cor por categoria) ---------- */
.cat-bar-row { display: grid; grid-template-columns: 168px 1fr 48px; align-items: center; gap: 10px; }
.cat-bar-row + .cat-bar-row { margin-top: 9px; }
.cat-bar-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cat-bar-track { position: relative; height: 16px; background: color-mix(in srgb, var(--grid) 45%, transparent); border-radius: 5px; }
.cat-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; min-width: 3px; }
.cat-bar-value { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Severity tabs + issue list ---------- */
.sev-tab-btn.active.sev-critical { background: var(--critical); border-color: var(--critical); }
.sev-tab-btn.active.sev-high { background: var(--serious); border-color: var(--serious); }
.sev-tab-btn.active.sev-medium { background: var(--warning); border-color: var(--warning); color: #4a3a00; }
.sev-tab-btn.active.sev-low { background: var(--muted); border-color: var(--muted); }
.sev-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 99px; background: color-mix(in srgb, currentColor 18%, transparent); font-size: 10px;
}

.issue-list { display: flex; flex-direction: column; gap: 10px; }
.issue-item {
  border-left: 3px solid var(--sev-color, var(--muted)); background: var(--surface-1);
  border-radius: 0 10px 10px 0; padding: 12px 14px; box-shadow: var(--shadow);
  border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.issue-item strong { font-size: 13px; color: var(--text-primary); }
.issue-item p { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.issue-item .issue-scope { font-size: 11px; color: var(--muted); margin-top: 5px; display: block; font-style: italic; }

/* ---------- Category deep-dive cards ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.category-card .card-head { align-items: center; }
.category-score {
  font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--cat-color, var(--series-1)) 16%, transparent); color: var(--cat-color, var(--series-1));
}
.category-card p { font-size: 12.5px; color: var(--text-secondary); }
.category-card p + p { margin-top: 8px; }

/* ---------- Quick wins ---------- */
.quick-wins-list { list-style: none; counter-reset: qw; display: flex; flex-direction: column; gap: 10px; }
.quick-wins-list li { counter-increment: qw; position: relative; padding-left: 34px; font-size: 13px; color: var(--text-secondary); }
.quick-wins-list li strong { color: var(--text-primary); }
.quick-wins-list li::before {
  content: counter(qw); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: var(--good); color: #fff;
}

/* ---------- Nav "voltar" ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); text-decoration: none; margin-bottom: 4px;
}
.back-link:hover { color: var(--text-primary); }
.back-link svg { width: 13px; height: 13px; }

/* ---------- Subseção (blocos dentro da seção única #geo em index.html) ---------- */
.subsection-head { margin: 34px 0 16px; }
.subsection-head h3 { font-size: 18px; font-weight: 800; }
.subsection-head .section-sub { margin-top: 4px; }