/* atricon/publico/index.php — hero/gauge/heatmap/barras da autoavaliação
   ATRICON/PNTP. Extraído do <style> inline da tela (P2) para o bundle
   específico da tela (B06); valores dinâmicos (cores do selo, score,
   percentual por dimensão) continuam via custom property definida na
   própria tag (--tier-1/--tier-2/--score-pct/--c/--bar-pct/--bar-cor),
   como o padrão permite para style= dinâmico. */
.atr-hero { position: relative; border-radius: 18px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--tier-1), var(--tier-2)); padding: 22px 24px; margin-top: 6px; }
.atr-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255,255,255,.10); }
.atr-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: center; }
@media (max-width: 720px) { .atr-hero-grid { grid-template-columns: minmax(0,1fr); } }
.atr-hero-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; opacity: .85; font-weight: 700; }
.atr-hero-selo { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.atr-hero-glyph { font-size: 3rem; line-height: 1; }
.atr-hero-nome { font-size: 2rem; font-weight: 800; line-height: 1.05; }
.atr-hero-sub { opacity: .92; margin-top: 2px; }
.atr-gauge { width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(#fff var(--score-pct), rgba(255,255,255,.28) 0); }
.atr-gauge-inner { width: 112px; height: 112px; border-radius: 50%; background: linear-gradient(135deg, var(--tier-1), var(--tier-2));
  display: grid; place-items: center; text-align: center; }
.atr-gauge-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.atr-gauge-leg { font-size: .72rem; opacity: .85; }

.atr-rail { position: relative; margin-top: 22px; }
.atr-rail-track { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.atr-rail-fill { height: 100%; border-radius: 999px; background: #fff; transition: width .6s ease; width: var(--score-pct); }
.atr-rail-tick { position: absolute; top: -4px; width: 2px; height: 20px; background: rgba(255,255,255,.6); }
.atr-rail-labels { position: relative; height: 18px; margin-top: 6px; font-size: .72rem; opacity: .9; }
.atr-rail-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
/* marcas fixas dos limiares de selo (Prata/Ouro/Diamante) — sempre 50/75/90% */
.atr-tick-50 { left: 50%; }
.atr-tick-75 { left: 75%; }
.atr-tick-90 { left: 90%; }
@media (prefers-reduced-motion: reduce) { .atr-rail-fill { transition: none; } }

.atr-essenciais { border: 1px solid var(--perigo, #dc2626); background: color-mix(in srgb, var(--perigo, #dc2626) 6%, transparent);
  border-radius: 14px; padding: 16px 18px; margin-top: 16px; }
.atr-essenciais h2 { color: var(--perigo, #dc2626); font-size: 1rem; margin: 0 0 6px; }
.atr-essenciais ul { margin: 8px 0 0; padding-left: 18px; }

.atr-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; margin: 12px 14px; }
.atr-heat a { aspect-ratio: 1 / 1; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: #fff; font-weight: 700; font-size: .8rem; background: var(--c); position: relative; }
.atr-heat a small { font-weight: 600; font-size: .66rem; opacity: .92; }
.atr-heat a.ess { outline: 2px solid var(--perigo, #dc2626); outline-offset: 1px; }

.atr-bars { display: flex; flex-direction: column; gap: 9px; padding: 8px 14px 16px; }
.atr-bar-row { display: grid; grid-template-columns: 220px minmax(0,1fr) 160px; align-items: center; gap: 12px; }
@media (max-width: 760px) { .atr-bar-row { grid-template-columns: minmax(0,1fr); gap: 3px; } }
@media (max-width: 380px) { .atr-bar-row { gap: 2px; } }
.atr-bar-label { font-size: .88rem; }
.atr-bar-label .atr-flag { color: var(--perigo, #dc2626); font-weight: 600; font-size: .72rem; margin-left: 6px; }
.atr-track { height: 12px; border-radius: 999px; background: var(--fundo-suave, #f1f5f9); overflow: hidden; }
.atr-fill { height: 100%; border-radius: 999px; transition: width .6s ease; width: var(--bar-pct); background: var(--bar-cor); }
@media (prefers-reduced-motion: reduce) { .atr-fill { transition: none; } }
.atr-bar-num { font-size: .84rem; color: var(--texto-suave, #64748b); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .atr-bar-num { text-align: left; } }

.atr-exportar { padding: 0 14px 16px; }