/* aula-extra-08.css — estilos específicos da Aula Extra 8 (Câncer de Testículo).
   Herda 100% dos tokens da plataforma (tokens.css) e os componentes (components.css).
   NÃO redefine token canônico.
   Os 12 SVGs interativos usam a engine CANÔNICA de hotspot (initInteractive →
   .figure-svg__stage[data-hs-stage] + .hs-shape + .hotspot-detail). Como o components.css
   já cobre .hs-shape (hover/foco/active/tone) e .hotspot-detail (tones), este arquivo só
   acrescenta: (a) garantia de responsividade do SVG dentro da coluna e (b) cursor pointer
   no shape-alvo. Sem comportamento bespoke — testiculo-interactive.js é um stub no-op.
   Paleta semântica da aula (uro-oncologia): teal = baseline/benigno · coral = maligno ·
   âmbar (--warn-amber) = pegadinha/decisão · verde (--ok-green) = cura/bom · vermelho
   (--err-red) = perigo. Cor nunca é único portador — rótulo textual sempre presente.
   ZERO hex novo: só var(--token) canônico. */

/* responsivo: SVGs grandes escalam sem estourar a coluna (defensivo; o chassi já põe
   width:100% no svg; isto cobre stage/frame em qualquer browser). */
.figure-svg__stage svg,
.figure-svg__frame svg { max-width: 100%; height: auto; }

/* o elemento desenhado é o alvo do clique (regra de luxo Bauer) — cursor coerente */
.figure-svg .hs-shape { cursor: pointer; }

/* foco visível padronizado em qualquer alvo interativo dentro do SVG (não remover outline) */
.figure-svg svg [tabindex]:focus-visible,
.figure-svg svg [role="button"]:focus-visible {
  outline: 2px solid var(--warn-amber);
  outline-offset: 2px;
}