/* ============================================================
   Diagnóstico IMD Express
   Só tokens do :root (landing.css). O elemento marcante é a régua
   de maturidade; todo o resto fica quieto.
   ============================================================ */

body.page-diagnostico {
    background: var(--surface-base);
}

.imd {
    /* Trechos da régua: do --surface-line ao --accent. Nenhuma cor de estado:
       baixa maturidade é ponto de partida, não erro. */
    --imd-trecho-1: var(--surface-line);
    --imd-trecho-2: color-mix(in srgb, var(--accent) 25%, var(--surface-line));
    --imd-trecho-3: color-mix(in srgb, var(--accent) 50%, var(--surface-line));
    --imd-trecho-4: color-mix(in srgb, var(--accent) 75%, var(--surface-line));
    --imd-trecho-5: var(--accent);
    --imd-anel-foco: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);

    color: var(--text-primary);
}

.imd [hidden] {
    display: none !important;
}

.imd ol {
    list-style: none;
}

.imd-largura {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

.imd-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Header próprio ---------- */
.imd-topo {
    background: var(--surface-base);
    border-bottom: 1px solid var(--surface-line);
}

.imd-topo-interno {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.imd-topo-logo img {
    display: block;
    height: 56px;
    width: auto;
}

.imd-topo-titulo {
    margin-left: auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

.imd-topo-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 18px;
}

.imd-topo-fechar:hover {
    color: var(--text-primary);
    background: var(--surface-raised);
}

@media (max-width: 640px) {
    .imd-topo-titulo { display: none; }
    .imd-topo-fechar { margin-left: auto; }
}

/* ---------- Foco visível em tudo que é interativo ---------- */
.imd a:focus-visible,
.imd button:focus-visible,
.imd-topo a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.imd h2[tabindex="-1"]:focus {
    outline: none;
}

/* ---------- Botões (padrão do site: pílula) ---------- */
.imd-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 50px;
    border: 2px solid transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.imd-botao-primario {
    background: var(--accent);
    color: var(--accent-ink);
}

.imd-botao-primario:hover {
    background: var(--accent-strong);
}

.imd-botao-primario[disabled] {
    cursor: progress;
    opacity: 0.75;
}

.imd-botao-secundario {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

.imd-botao-secundario:hover {
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

.imd-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.imd-link:hover {
    color: var(--accent-strong);
}

/* ============================================================
   Perguntas
   ============================================================ */
.imd-perguntas {
    padding-block: 32px 72px;
}

.imd-progresso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

/* O trilho é a régua antes da nota: 8 marcas, sem revelar pontuação. */
.imd-trilho {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    flex: 1;
    max-width: 480px;
}

.imd-trilho-marca {
    height: 8px;
    background: var(--surface-sunken);
    box-shadow: inset 0 0 0 1px var(--surface-line);
}

.imd-trilho-marca.is-respondida {
    background: var(--accent);
    box-shadow: none;
}

.imd-trilho-marca.is-atual {
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

.imd-contador {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.imd-abertura {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--surface-line);
}

.imd-abertura h1 {
    max-width: 760px;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.imd-abertura-sub {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--accent);
}

/* Atalho para quem já quer responder: só rola até a pergunta 1, não é tela de começar. */
.imd-ir-pergunta {
    margin-top: 16px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.imd-ir-pergunta:hover {
    color: var(--accent-strong);
}

/* Por que medir: contexto antes da pergunta 1, sem esconder a pergunta atrás de um clique. */
.imd-porque {
    margin-top: 40px;
}

.imd-porque-titulo {
    font-size: 20px;
    letter-spacing: -0.01em;
}

.imd-porque-texto {
    max-width: 68ch;
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.imd-porque-pontos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px clamp(24px, 3vw, 48px);
    margin-top: 32px;
}

/* A barra curta de acento repete o marcador dos títulos de seção do site. */
.imd-porque-pontos li::before {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    margin-bottom: 14px;
    background: var(--accent);
}

.imd-porque-pontos h3 {
    font-size: 17px;
    line-height: 1.3;
}

.imd-porque-pontos p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.imd-porque-garantia {
    margin-top: 32px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Depois da primeira resposta a abertura sai da tela. Só o título segue no
   documento, para leitores de tela; o resto não volta a ser lido. */
.imd-abertura.is-recolhida {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.imd-abertura.is-recolhida > :not(h1) {
    display: none;
}

.imd-aviso {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.imd-pergunta {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
        "enunciado alternativas"
        "voltar alternativas";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.imd-enunciado {
    grid-area: enunciado;
    position: sticky;
    top: 24px;
}

.imd-enunciado-dimensao {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 16px;
}

.imd-enunciado-texto {
    font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    max-width: 21em;
}

.imd-alternativas {
    grid-area: alternativas;
    border-top: 1px solid var(--surface-line);
}

.imd-alternativa {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 64px;
    padding: 16px 20px;
    border: 0;
    border-bottom: 1px solid var(--surface-line);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 17px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.imd-alternativa:hover {
    background: var(--surface-raised);
}

.imd-alternativa[aria-checked="true"] {
    background: var(--surface-overlay);
    box-shadow: inset 3px 0 0 var(--accent);
}

.imd-alternativa:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.imd-alternativa-marca {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
}

.imd-alternativa[aria-checked="true"] .imd-alternativa-marca {
    border-color: var(--accent);
    background: radial-gradient(circle, var(--accent) 0 4px, transparent 5px);
}

.imd-voltar {
    grid-area: voltar;
    justify-self: start;
    margin-top: 32px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.imd-voltar:hover {
    color: var(--text-primary);
}

@media (max-width: 899px) {
    .imd-progresso {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 28px;
    }

    .imd-trilho { max-width: none; }

    .imd-abertura { margin-bottom: 32px; padding-bottom: 32px; }

    .imd-porque { margin-top: 32px; }

    .imd-porque-pontos {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 24px;
    }

    .imd-porque-pontos li::before { margin-bottom: 10px; }

    .imd-porque-garantia { margin-top: 24px; }

    .imd-pergunta {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "enunciado"
            "alternativas"
            "voltar";
        grid-template-rows: auto;
    }

    .imd-enunciado {
        position: static;
        margin-bottom: 24px;
    }

    .imd-alternativa {
        padding-inline: 12px;
        font-size: 16px;
    }

    .imd-voltar { margin-top: 20px; }
}

/* ============================================================
   Nota e régua de maturidade
   ============================================================ */
.imd-nota {
    padding-block: 48px 56px;
}

.imd-nota-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
}

.imd-nota-prefixo {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* O estágio é o que a pessoa vai repetir para o chefe: o maior texto da página. */
.imd-nota-estagio {
    display: block;
    font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.imd-nota-valor {
    font-size: 20px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    padding-bottom: 6px;
}

.imd-nota-valor strong {
    color: var(--text-primary);
}

/* O que a gestão consegue neste estágio, logo abaixo do nome. */
.imd-nota-capacidade {
    order: 3;
    flex-basis: 100%;
    margin-top: -4px;
    font-size: 20px;
    font-weight: 500;
    color: var(--accent);
}

.imd-nota-faixa {
    max-width: 68ch;
    margin-top: 36px;
}

.imd-nota-faixa-titulo {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.imd-nota-texto {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.imd-nota-benchmark {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-muted);
}

.imd-nota-acoes {
    margin-top: 28px;
}

/* A régua: um instrumento de medida. Nomes em cima, trechos, agulha, escala graduada. */
.imd-regua {
    margin-top: 40px;
}

.imd-regua-nomes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.imd-regua-nome {
    padding-bottom: 6px;
    padding-right: 12px;
    color: var(--text-muted);
}

.imd-regua-nome-texto {
    display: block;
    font-size: clamp(10.5px, 2.9vw, 13px);
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -0.005em;
}

/* A cadeia do estágio: sei que aconteceu, consigo encontrar, acompanhar, entender, antecipar. */
.imd-regua-capacidade {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.4;
}

.imd-regua-nome.is-atual {
    color: var(--text-primary);
}

.imd-regua-nome.is-atual .imd-regua-nome-texto {
    font-weight: 700;
}

@media (max-width: 899px) {
    .imd-regua-capacidade { display: none; }
}

.imd-regua-pista {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 14px;
    margin-top: 24px;
}

.imd-regua-trecho:nth-child(1) { background: var(--imd-trecho-1); }
.imd-regua-trecho:nth-child(2) { background: var(--imd-trecho-2); }
.imd-regua-trecho:nth-child(3) { background: var(--imd-trecho-3); }
.imd-regua-trecho:nth-child(4) { background: var(--imd-trecho-4); }
.imd-regua-trecho:nth-child(5) { background: var(--imd-trecho-5); }

/* Divisa de 2px entre trechos, na cor do fundo. */
.imd-regua-trecho + .imd-regua-trecho {
    box-shadow: inset 2px 0 0 var(--surface-base);
}

.imd-regua-escala {
    position: relative;
    height: 30px;
}

.imd-regua-tique {
    position: absolute;
    top: 0;
    left: calc(var(--pos) * 1%);
    width: 1px;
    height: 6px;
    background: var(--text-muted);
}

.imd-regua-tique.is-divisa {
    height: 10px;
}

.imd-regua-numero {
    position: absolute;
    top: 13px;
    left: 0;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.imd-regua-tique:first-child .imd-regua-numero { transform: none; }
.imd-regua-tique:last-child .imd-regua-numero { transform: translateX(-100%); }

/* Agulha: triângulo acima da pista e fio atravessando o trecho. O contorno
   na cor do fundo a mantém visível também sobre o trecho em --accent. */
.imd-regua-agulha {
    position: absolute;
    top: -14px;
    bottom: -6px;
    left: calc(var(--imd-pos, 0) * 1%);
    width: 2px;
    margin-left: -1px;
    background: var(--text-primary);
    box-shadow: 0 0 0 1px var(--surface-base);
    transition: left 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.imd-regua-agulha::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top: 9px solid var(--text-primary);
    border-bottom: 0;
}

.imd-regua-referencia {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: calc(var(--imd-ref, 0) * 1%);
    border-left: 2px dotted var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .imd-regua-agulha { transition: none; }
}

/* Compacta, no diagnóstico completo. */
.imd-resultado.is-completo .imd-nota {
    padding-block: 36px 40px;
}

/* Divisa de largura total entre a régua compacta e o diagnóstico. */
.imd-completo {
    border-top: 1px solid var(--surface-line);
}

.imd-resultado.is-completo .imd-nota-estagio {
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}

.imd-resultado.is-completo .imd-regua {
    margin-top: 28px;
}

.imd-resultado.is-completo .imd-nota-texto {
    margin-top: 20px;
    font-size: 17px;
}

/* ============================================================
   Captura
   ============================================================ */
.imd-captura {
    background: var(--surface-raised);
    padding-block: 56px 64px;
}

.imd-captura-interno {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px clamp(32px, 5vw, 72px);
    align-items: start;
}

.imd-captura-intro h2 {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    letter-spacing: -0.01em;
}

.imd-captura-lista {
    margin-top: 20px;
    display: grid;
    gap: 12px;
}

.imd-captura-lista li {
    position: relative;
    padding-left: 22px;
    font-size: 17px;
    color: var(--text-secondary);
}

.imd-captura-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    background: var(--accent);
}

.imd-form-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.imd-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.imd-campo input,
.imd-campo select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 9px;
    border: 1px solid var(--surface-line);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.imd-campo input::placeholder {
    color: var(--text-muted);
}

.imd-campo input:focus,
.imd-campo select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--imd-anel-foco);
}

.imd-campo .is-invalid {
    border-color: var(--state-danger);
}

.imd-select {
    position: relative;
}

.imd-select select {
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.imd-select select:invalid {
    color: var(--text-muted);
}

.imd-select select option {
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.imd-select::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.imd-campo-erro {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--state-danger);
}

.imd-campo-erro:empty {
    display: none;
}

.imd-form-enviar {
    margin-top: 28px;
}

.imd-form-privacidade {
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 60ch;
}

.imd-form-privacidade a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.imd-form-status {
    margin-top: 16px;
    font-size: 15px;
}

.imd-form-status:empty {
    display: none;
}

.imd-form-status.is-erro {
    color: var(--state-danger);
}

.imd-form-status.is-sucesso {
    color: var(--state-ok);
}

.imd-form-status a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 899px) {
    .imd-captura-interno {
        grid-template-columns: minmax(0, 1fr);
    }

    .imd-form-grade {
        grid-template-columns: minmax(0, 1fr);
    }

    .imd-form-enviar {
        width: 100%;
    }
}

/* ============================================================
   Diagnóstico completo
   ============================================================ */
.imd-bloco {
    padding-block: 56px;
}

.imd-bloco-elevado {
    background: var(--surface-raised);
}

.imd-bloco h2 {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    letter-spacing: -0.01em;
}

.imd-bloco-sub {
    margin-top: 8px;
    color: var(--accent);
    font-size: 17px;
    font-weight: 500;
}

/* Confirmação do envio, logo acima das prioridades. */
.imd-confirmacao {
    margin: 0 0 36px;
    max-width: 62ch;
}

.imd-confirmacao:focus {
    outline: none;
}

/* As 2 prioridades são os únicos cartões da tela. */
.imd-prioridades {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.imd-prioridade {
    background: var(--surface-raised);
    border-radius: 12px;
    padding: 28px;
}

.imd-prioridade h3 {
    font-size: 20px;
    line-height: 1.3;
}

.imd-prioridade .imd-degraus {
    margin-top: 16px;
}

.imd-par {
    margin-top: 20px;
    display: grid;
    gap: 14px;
}

.imd-par dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.imd-par dd {
    margin-top: 2px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

.imd-par .imd-produto {
    padding-top: 14px;
    border-top: 1px solid var(--surface-line);
}

.imd-produto-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    font-size: 15px;
}

/* Mini régua: 5 degraus em escada. Atual em --accent, próximo com contorno. */
.imd-degraus {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    height: 30px;
    flex: none;
}

.imd-degrau {
    width: 14px;
    box-shadow: inset 0 0 0 1px var(--surface-line);
}

.imd-degrau:nth-child(1) { height: 20%; }
.imd-degrau:nth-child(2) { height: 40%; }
.imd-degrau:nth-child(3) { height: 60%; }
.imd-degrau:nth-child(4) { height: 80%; }
.imd-degrau:nth-child(5) { height: 100%; }

.imd-degrau.is-vencido {
    background: var(--imd-trecho-2);
    box-shadow: none;
}

.imd-degrau.is-atual {
    background: var(--accent);
    box-shadow: none;
}

.imd-degrau.is-proximo {
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* Mapa: radar e matriz lado a lado. As outras dimensões têm seção própria, logo abaixo. */
.imd-mapa {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "radar matriz";
    gap: 48px clamp(32px, 5vw, 72px);
    margin-top: 32px;
    align-items: start;
}

.imd-radar-area { grid-area: radar; }
.imd-matriz-area { grid-area: matriz; }

/* Leitura do estágio: o resto do texto da faixa e a prioridade. */
.imd-leitura {
    max-width: 68ch;
}

.imd-leitura-texto {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.imd-leitura h2 + .imd-leitura-texto {
    margin-top: 16px;
}

.imd-leitura-prioridade {
    margin-top: 24px;
    padding-left: 16px;
    border-left: 3px solid var(--accent);
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-primary);
}

.imd-comece {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--surface-line);
}

/* Matriz 8 x 5. Mesma gramática da escada: vencidos em tom escuro, atual em --accent,
   próximo com contorno. A casa escolhida ganha um anel. */
.imd-matriz {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
}

.imd-matriz thead th {
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.imd-matriz thead th:first-child {
    width: 30%;
}

.imd-matriz tbody th {
    padding-right: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    text-align: left;
}

.imd-matriz-numero {
    display: none;
}

.imd-celula {
    display: block;
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--surface-line);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.imd-celula:hover {
    background: var(--surface-overlay);
}

.imd-celula.is-vencido {
    background: var(--imd-trecho-2);
    box-shadow: none;
}

.imd-celula.is-atual {
    background: var(--accent);
    box-shadow: none;
}

.imd-celula.is-proximo {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.imd-celula[aria-pressed="true"] {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.imd .imd-celula:focus-visible {
    outline: 3px solid var(--accent-strong);
    outline-offset: 2px;
}

.imd-matriz-legenda {
    display: none;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.imd-matriz-detalhe {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--surface-line);
}

.imd-matriz-detalhe-titulo {
    font-size: 17px;
    font-weight: 700;
}

.imd-matriz-detalhe-marca {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

.imd-matriz-detalhe .imd-par {
    margin-top: 14px;
}

.imd-matriz-detalhe .imd-par dd {
    font-size: 15px;
    color: var(--text-secondary);
}

@media (max-width: 599px) {
    .imd-matriz-nivel {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .imd-matriz-numero {
        display: inline;
    }

    .imd-matriz thead th:first-child {
        width: 38%;
    }

    .imd-matriz tbody th {
        font-size: 13px;
    }

    .imd-celula {
        height: 32px;
    }

    .imd-matriz-legenda {
        display: block;
    }
}

.imd-radar {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 100 / 92;
    margin-inline: auto;
}

.imd-radar svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.imd-radar-anel {
    fill: none;
    stroke: var(--surface-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.imd-radar-eixo {
    stroke: var(--surface-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.imd-radar-proximo {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
}

.imd-radar-referencia {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 1 3;
    vector-effect: non-scaling-stroke;
}

.imd-radar-lead {
    fill: color-mix(in srgb, var(--accent) 25%, transparent);
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.imd-radar-ponto {
    fill: var(--accent);
}

.imd-radar-rotulo {
    position: absolute;
    max-width: 7.5em;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-secondary);
}

.imd-radar-legenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.imd-radar-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.imd-radar-legenda svg {
    width: 22px;
    height: 10px;
    flex: none;
}

.imd-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 72px);
    margin-top: 28px;
    border-top: 1px solid var(--surface-line);
}

.imd-dimensao-linha {
    padding-block: 22px;
    border-bottom: 1px solid var(--surface-line);
}

.imd-dimensao-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.imd-dimensao-topo h3 {
    font-size: 17px;
    line-height: 1.3;
}

.imd-dimensao-linha .imd-par {
    margin-top: 12px;
    gap: 10px;
}

.imd-dimensao-linha .imd-par dd {
    font-size: 15px;
    color: var(--text-secondary);
}

.imd-percepcao {
    max-width: 760px;
}

.imd-percepcao p {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.6;
}

.imd-percepcao .imd-percepcao-detalhe {
    font-size: 15px;
    color: var(--text-secondary);
}

.imd-chamada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.imd-refazer {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    cursor: pointer;
}

.imd-refazer:hover {
    color: var(--text-primary);
}

@media (max-width: 899px) {
    .imd-prioridades,
    .imd-lista {
        grid-template-columns: minmax(0, 1fr);
    }

    .imd-mapa {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "radar"
            "matriz";
        row-gap: 40px;
    }

    .imd-comece {
        margin-top: 44px;
        padding-top: 40px;
    }

    .imd-prioridade {
        padding: 22px 20px;
    }

    .imd-bloco {
        padding-block: 44px;
    }
}

/* ============================================================
   Impressão: resumo de uma página para a diretoria
   ============================================================ */
.imd-impressao-cabeca,
.imd-impressao-rodape {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 11mm 12mm;
    }

    /* Os mesmos tokens, em versão para papel branco. */
    :root {
        --surface-sunken: #ffffff;
        --surface-base: #ffffff;
        --surface-raised: #f1f5f9;
        --surface-overlay: #e2e8f0;
        --surface-line: #c3d0de;
        --text-primary: #021b35;
        --text-secondary: #314a66;
        --text-muted: #546b84;
        --accent: #0f7f86;
    }

    html, body.page-diagnostico {
        background: #fff !important;
        font-size: 9pt;
    }

    body.page-diagnostico {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .imd-topo,
    .imd-perguntas,
    .imd-captura,
    .imd-nota-acoes,
    .imd-chamada-bloco,
    .modal-overlay {
        display: none !important;
    }

    .imd-largura {
        max-width: none;
        padding-inline: 0;
    }

    .imd-impressao-cabeca {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 3mm;
        border-bottom: 1px solid var(--surface-line);
    }

    .imd-impressao-cabeca img {
        height: 9mm;
        width: auto;
    }

    .imd-impressao-cabeca p {
        font-size: 9pt;
        color: var(--text-secondary);
    }

    .imd-impressao-rodape {
        display: block;
        margin-top: 3mm;
        padding-top: 2mm;
        border-top: 1px solid var(--surface-line);
        font-size: 8pt;
        color: var(--text-muted);
    }

    .imd-resultado.is-completo .imd-nota {
        padding-block: 3mm 1mm;
    }

    .imd-completo { border-top: 0; }

    .imd-nota-prefixo { font-size: 9pt; margin-bottom: 0.5mm; }
    .imd-resultado.is-completo .imd-nota-estagio { font-size: 22pt; }
    .imd-nota-valor { font-size: 10.5pt; padding-bottom: 0; }
    .imd-resultado.is-completo .imd-regua { margin-top: 3mm; }
    .imd-regua-nome { padding-bottom: 0; }
    .imd-regua-nome-texto { font-size: 7.5pt; }
    .imd-regua-pista { height: 2.5mm; margin-top: 3.2mm; }
    .imd-regua-agulha { top: -2.4mm; bottom: -1mm; transition: none; }
    .imd-regua-agulha::before { top: -1.6mm; border-width: 1.4mm; border-top-width: 1.8mm; }
    .imd-regua-escala { height: 4.5mm; }
    .imd-regua-tique { height: 1mm; }
    .imd-regua-tique.is-divisa { height: 1.6mm; }
    .imd-regua-numero { font-size: 6.5pt; top: 1.8mm; }
    .imd-resultado.is-completo .imd-nota-texto { margin-top: 1mm; font-size: 8.5pt; line-height: 1.4; max-width: none; }

    .imd-bloco {
        padding-block: 2mm;
        background: none;
    }

    .imd-confirmacao,
    .imd-bloco-sub { display: none; }

    .imd-bloco h2 { font-size: 10.5pt; }

    /* Rótulo e texto na mesma linha: "Hoje: ...". Economiza uma linha por item. */
    .imd-par dt,
    .imd-par dd { display: inline; }
    .imd-par dt::after { content: ": "; }
    .imd-par dt { font-size: 7.5pt; color: var(--text-primary); }
    .imd-par dd { margin: 0; font-size: 8pt; line-height: 1.3; }
    .imd-par .imd-produto { padding-top: 1mm; }
    .imd-produto-links { display: none !important; }

    .imd-prioridades {
        grid-template-columns: 1fr 1fr;
        gap: 3mm;
        margin-top: 1.5mm;
    }

    .imd-prioridade {
        padding: 2.5mm 3mm;
        break-inside: avoid;
    }

    .imd-prioridade h3 { font-size: 9.5pt; }
    .imd-prioridade .imd-degraus { margin-top: 1mm; }
    .imd-par { margin-top: 1.2mm; gap: 0.8mm; }
    .imd-degraus { height: 3.2mm; gap: 0.6mm; }
    .imd-degrau { width: 1.8mm; }

    /* No papel: radar e as outras dimensões lado a lado; a matriz interativa fica de fora. */
    .imd-matriz-area,
    .imd-par-oportunidade,
    .imd-dimensao-linha .imd-par-proximo,
    .imd-regua-capacidade,
    .imd-nota-texto,
    .imd-leitura h2,
    .imd-leitura-texto {
        display: none !important;
    }

    /* No papel o radar e as outras dimensões ficam lado a lado, como seções vizinhas. */
    .imd-completo {
        display: grid;
        grid-template-columns: 62mm minmax(0, 1fr);
        column-gap: 4mm;
        align-items: start;
    }

    /* Áreas nomeadas: o papel mantém prioridades em cima e radar ao lado da lista,
       qualquer que seja a ordem das seções na tela. */
    .imd-completo {
        grid-template-areas:
            "leitura leitura"
            "mapa outras"
            "final final";
    }

    .imd-completo > .imd-secao-leitura { grid-area: leitura; }
    .imd-completo > .imd-secao-mapa { grid-area: mapa; }
    .imd-completo > .imd-secao-outras { grid-area: outras; }
    .imd-completo > .imd-secao-final { grid-area: final; }

    .imd-mapa {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "radar";
        margin-top: 1.5mm;
    }

    .imd-lista {
        grid-template-columns: 1fr;
        margin-top: 1.5mm;
    }

    .imd-nota-capacidade { font-size: 10pt; margin-top: 0; }
    .imd-nota-faixa { margin-top: 2mm; max-width: none; }
    .imd-nota-faixa-titulo { font-size: 9.5pt; line-height: 1.35; }
    .imd-leitura { max-width: none; }
    .imd-leitura-prioridade { margin-top: 1mm; padding-left: 2.5mm; font-size: 9pt; line-height: 1.35; border-left-width: 2px; }
    .imd-comece { margin-top: 2.5mm; padding-top: 0; border-top: 0; }

    /* Respiro lateral: os rótulos de Inovação e Integração passam do desenho. */
    .imd-radar-area { position: static; padding-inline: 4mm; }
    .imd-radar { max-width: 52mm; }
    .imd-radar-rotulo { font-size: 6pt; max-width: 6.5em; }
    .imd-radar-legenda { margin-top: 1mm; font-size: 6.5pt; gap: 0.5mm 3mm; }

    .imd-dimensao-linha { padding-block: 1.1mm; break-inside: avoid; }
    .imd-dimensao-topo h3 { font-size: 8pt; }
    .imd-dimensao-linha .imd-par { margin-top: 0.4mm; gap: 0.3mm; }
    .imd-dimensao-linha .imd-par dd { font-size: 7.5pt; line-height: 1.25; }
    .imd-dimensao-linha .imd-par dt { font-size: 7pt; }

    .imd-percepcao h2 { font-size: 10pt; }
    .imd-percepcao p { font-size: 8pt; margin-top: 0.5mm; line-height: 1.35; }
    .imd-percepcao .imd-percepcao-detalhe { font-size: 7.5pt; }

    .imd-impressao-rodape { margin-top: 2mm; }
}