/* aula-extra-11.css — estilos específicos da Aula Extra 11 (Sarcomas).
   Herda 100% dos tokens da plataforma (tokens.css) e os componentes (components.css).
   NÃO redefine token canônico.
   Os 8 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 — sarcomas-interactive.js é um stub no-op.
   Paleta semântica da aula (sarcomas): teal = baseline/bom/ressecável/margem livre ·
   coral / --err-red = ruim/metástase/espalhar/recorrência/irressecável · âmbar (--warn-amber) =
   pegadinha/cautela (PAAF, gatilho, adjuvância) · --ok-green = conduta certa/preservação/sem
   metástase. 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;
}