/*
  Prontidão: Anatomia interativa (/anatomia/).
  Carregar depois de components.css e guia.css. Só var(--token).
  As regras dos diagramas vieram dos blocos <style> que estavam dentro de
  cada SVG (a CSP não os deixa correr). Cores por token: claro e escuro.
*/

.rotulo-guia {
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.texto-longo { line-height: 1.6; }

/* Diagrama + painel: um por baixo do outro no telemóvel, lado a lado em ecrãs largos */
.anatomia-layout { display: grid; gap: var(--esp-3); }
@media (min-width: 768px) {
  .anatomia-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .painel { position: sticky; top: calc(var(--toque-min) + var(--esp-6)); }
}

.diagrama-card { display: grid; gap: var(--esp-2); }
.diagrama { width: 100%; max-width: 360px; margin-inline: auto; }
.diagrama svg { display: block; width: 100%; height: auto; max-height: 64vh; }
.diagrama-vazio { padding: var(--esp-8) var(--esp-3); text-align: center; }
.dica { font-size: var(--fs-sm); text-align: center; }

.painel { display: grid; gap: var(--esp-2); border: 1.5px solid var(--mint); }
.painel-vazio { padding: var(--esp-4) var(--esp-1); text-align: center; }
.painel-rotulo {
  color: var(--mint-forte);
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.painel .painel-titulo { margin: 0; font-size: var(--fs-md); }

/* ---------- Desenho dos SVG ---------- */

/* Silhueta e linhas de referência: só decoração, não se tocam */
.diagrama .silhouette {
  fill: none;
  stroke: var(--muted);
  stroke-opacity: .6;
  stroke-width: 2;
  pointer-events: none;
}
.diagrama svg.contorno-fino .silhouette { stroke-width: 1.5; }
.diagrama .fissure {
  fill: none;
  stroke: var(--muted);
  stroke-opacity: .45;
  stroke-width: 1.2;
  pointer-events: none;
}

/* Estruturas (órgãos) */
.diagrama .organ { cursor: pointer; }
.diagrama .organ:focus { outline: none; }
.diagrama .organ * {
  fill: color-mix(in srgb, var(--mint) 28%, transparent);
  stroke: var(--mint);
  stroke-width: 1.5;
  transition: fill var(--transicao), stroke-width var(--transicao);
}
.diagrama .organ:hover * { fill: color-mix(in srgb, var(--mint) 55%, transparent); }
.diagrama .organ[aria-pressed="true"] * {
  fill: color-mix(in srgb, var(--mint) 85%, transparent);
  stroke-width: 2.25;
}
.diagrama .organ[aria-pressed="true"] { filter: drop-shadow(0 0 5px var(--mint)); }
/* Foco do teclado: contorno da cor do texto, bem visível */
.diagrama .organ:focus-visible * { stroke: var(--ink); stroke-width: 3; }

/* Estruturas desenhadas só com traço (vasos, fios, nervos, membranas) */
.diagrama .organ:is(.organ-tree, .organ-wire, .organ-shell, .organ-nerve) * {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vasos e tubos: traço grosso */
.diagrama .organ.organ-tree * { stroke-width: 8; }
.diagrama .organ.organ-tree:hover * { stroke-width: 9; }
.diagrama .organ.organ-tree[aria-pressed="true"] * { stroke-width: 10; }
.diagrama svg.tubos-finos .organ.organ-tree * { stroke-width: 6; }
.diagrama svg.tubos-finos .organ.organ-tree:hover * { stroke-width: 7; }
.diagrama svg.tubos-finos .organ.organ-tree[aria-pressed="true"] * { stroke-width: 7.5; }

/* Sistema elétrico do coração: "fios" tracejados */
.diagrama .organ.organ-wire * { stroke-width: 3; stroke-dasharray: 1 5; }
.diagrama .organ.organ-wire:hover * { stroke-width: 4; }
.diagrama .organ.organ-wire[aria-pressed="true"] * { stroke-width: 4.5; }

/* Membranas (meninges): contorno tracejado */
.diagrama .organ.organ-shell * { stroke-width: 3; stroke-dasharray: 2 4; stroke-linecap: butt; }
.diagrama .organ.organ-shell:hover * { stroke-width: 4; }
.diagrama .organ.organ-shell[aria-pressed="true"] * { stroke-width: 4.5; }

/* Nervos */
.diagrama .organ.organ-nerve * { stroke-width: 4; }
.diagrama .organ.organ-nerve:hover * { stroke-width: 5; }
.diagrama .organ.organ-nerve[aria-pressed="true"] * { stroke-width: 5.5; }

/* Pontos (alvéolos, articulações, paratiroides…) */
.diagrama .organ.organ-dots circle {
  fill: color-mix(in srgb, var(--mint) 55%, transparent);
  stroke-width: 1;
}
.diagrama .organ.organ-dots:hover circle,
.diagrama .organ.organ-dots[aria-pressed="true"] circle { fill: var(--mint); }

/* Foco do teclado por cima de tudo o resto */
.diagrama .organ.organ:focus-visible * { stroke: var(--ink); }