/* =========================================================================
   MAPA DO SER nas landings públicas: /nr1/ não usa; /individual/, /mentores/
   e /empresas/ usam o MESMO bloco, gerado por
   app/scripts/mapa-do-ser-inserir-nas-paginas.php.

   Complementa /style.css e /plataforma/planos/assets/planos.css, que já trazem
   os tokens (`--pl-graf-eixo`, `--pl-border-gold`, `--primary-gold`) e as
   classes da moldura (`.pl-graf`, `.pl-visual`, `.pl-ilustrativo`). Aqui só
   entra o que é do componente interativo.

   Escopado em `.mds`, e NÃO na classe da página: o bloco é o mesmo nas três, e
   amarrá-lo a `.ind`/`.men`/`.emp` obrigaria a triplicar a regra.

   TODA GRADE NASCE COM `minmax(0, ...)`. Trilha `1fr` pura tem mínimo `auto` e o
   item de grade nasce com `min-width: auto`: juntos, recusam encolher e estouram
   a página. Foi assim que a Individual mediu 330px numa tela de 320.
   ========================================================================= */

/* O cabeçalho da seção. Classe própria, e não a da página: o bloco é o mesmo nas
   três, e usar `.ind-cabeca`/`.men-cabeca`/`.emp-cabeca` amarraria o gerador ao
   CSS de cada uma. */
.mds-cabeca { margin-bottom: 2rem; max-width: 62ch; }
.mds-cabeca .pl-lead { margin-bottom: 0; }

.mds {
    --mds-borda: rgba(255, 255, 255, 0.10);
    --mds-ease: cubic-bezier(0.16, 1, 0.3, 1);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
}

.mds-figura { margin: 0; min-width: 0; }
.mds-figura svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------------ os nós --- */
/* O card dentro do SVG acende quando o botão correspondente está ativo. A arte
   não sabe disso: quem anota os `<g>` com `data-mds-no` é o gerador, casando
   pelo rótulo que já existe dentro dela. */

.mds-figura [data-mds-no] rect {
    transition: fill 0.25s var(--mds-ease), stroke 0.25s var(--mds-ease);
}
.mds-figura [data-mds-no].is-ativo rect {
    fill: rgba(var(--primary-gold-rgb), 0.18);
    stroke: var(--primary-gold);
}
/* O nó ativo também engorda o ponto, para quem enxerga pouco contraste de cor
   perceber a mudança pela FORMA (WCAG 1.4.1: nunca só pela cor). */
.mds-figura [data-mds-no].is-ativo circle { r: 7; }

/* ------------------------------------------------------------- painel lateral --- */

.mds-painel { min-width: 0; display: grid; gap: 0.9rem; align-content: start; }

.mds-titulo { font-family: 'Outfit', sans-serif; font-size: 1.05rem; color: var(--text-main); margin: 0; }
.mds-intro { margin: 0; font-size: 0.93rem; line-height: 1.7; color: var(--text-muted); }

/* A lista É a alternativa sem JavaScript, e não um extra escondido: com script
   ela vira a barra de botões; sem script, continua sendo o conteúdo inteiro,
   com a explicação de cada nó visível de uma vez. */
.mds-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.mds-botao {
    appearance: none;
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--mds-borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    padding: 0.7rem 0.85rem;
    min-height: 48px;
    font: 500 0.9rem 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.mds-botao:hover { border-color: var(--primary-gold); color: var(--text-main); }
.mds-botao:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 2px; }
.mds-botao[aria-pressed="true"] {
    border-color: var(--primary-gold);
    background: rgba(var(--primary-gold-rgb), 0.10);
    color: var(--text-main);
    font-weight: 700;
}
.mds-botao b { font-weight: 600; color: inherit; }

.mds-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--pl-graf-eixo); }
.mds-botao[data-status="respondido"] .mds-ponto { background: var(--primary-gold); }

.mds-selo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* A explicação de cada nó. Sem JS todas ficam visíveis, uma sob a outra. */
.mds-texto {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

/* Com JS, o painel de detalhe assume e as explicações saem de dentro da lista.
   `aria-live` não entra aqui de propósito: a troca é resposta a um clique da
   própria pessoa, e anunciar tudo de novo a cada toque atrapalha mais do que
   ajuda quem usa leitor de tela. */
.mds-detalhe {
    border: 1px solid var(--pl-border-gold);
    border-radius: 14px;
    background: rgba(var(--primary-gold-rgb), 0.05);
    padding: 1rem 1.1rem;
    min-height: 7.5rem;
}
.mds-detalhe h4 { margin: 0 0 0.15rem; font-size: 1rem; color: var(--primary-gold); font-family: 'Outfit', sans-serif; }
.mds-detalhe .mds-chamada { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--text-muted); }
.mds-detalhe p.mds-corpo { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--text-main); }

html:not(.mds-js) .mds-detalhe { display: none; }
html.mds-js .mds-lista .mds-texto { display: none; }

/* ----------------------------------------------------------- as fontes que reúne --- */
/* Os contadores NÃO são escritos à mão: vêm de `mapa_do_ser_avaliacoes()`, separando
   avaliação (`tipo = 'slug'`) de módulo. É o que o §7.6 chama de contador derivado. */

.mds-fontes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.5rem;
}
.mds-fonte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    border: 1px solid var(--mds-borda);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.86rem;
    min-width: 0;
}
.mds-fonte b { color: var(--text-main); font-weight: 600; }
.mds-fonte span span { display: block; font-size: 0.76rem; color: var(--text-muted); }
.mds-fonte .mds-ponto { align-self: center; }
.mds-fonte--avaliacao .mds-ponto { background: var(--primary-gold); }
.mds-fonte--modulo .mds-ponto { background: var(--pl-graf-azul, #10d8ff); }

.mds-ressalva {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.65;
    border-left: 2px solid var(--pl-border-gold);
    padding-left: 0.9rem;
    margin: 0;
}

.mds-duvida { margin: 0; font-size: 0.88rem; line-height: 1.65; }
.mds-duvida a { color: var(--primary-gold); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------- o que ele não faz --- */

.mds-limites { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.mds-limites li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.mds-limites i { color: var(--text-muted); margin-top: 0.25rem; font-size: 0.75rem; }

/* ----------------------------------------------------------------- responsivo --- */

@media (max-width: 900px) {
    .mds { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
}

@media (pointer: coarse) {
    .mds-botao { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .mds-figura [data-mds-no] rect,
    .mds-botao { transition: none; }
}

/* Na impressão não há interação: todas as explicações voltam para a lista, que é
   a forma que sobrevive no papel. */
@media print {
    .mds-detalhe { display: none !important; }
    html.mds-js .mds-lista .mds-texto { display: block !important; }
    .mds-botao { border-color: #999; color: #000; }
}