/**
 * Quem conduz as escolas, e por quanto tempo — estilos da análise.
 *
 * Carregado DEPOIS do diretores.css, de que usa as cores (--tinta, --suave,
 * --papel, --m-0 a --m-3 do mapa, --pino) e a letra grande.
 *
 * Cores dos sinais: laranja forte (--m-3) = na direção; azul-ardósia =
 * outras fragilidades; cinzento = para saber. Levam sempre ícone e texto.
 */

:root {
    --sinal-direcao: #b02a37;
    --sinal-direcao-claro: #f8d7da;
    --sinal-contexto: #34557a;
    --sinal-contexto-claro: #e2eaf3;
    --sinal-info: #5c636a;
    --sinal-info-claro: #eef0f2;
    --col-acabou: var(--m-3);
    --col-proximo: var(--m-2);
    --col-depois: #c5c9cd;
    /* Página branca, cartões em papel com contorno: o cartão destaca-se do
       fundo e o que vai dentro dele (listas, mapa, tabelas) volta ao branco. */
    --cartao: #f8f9fa;
    --cartao-linha: #dee2e6;
    --linha: #dee2e6;
}

body { background: #fff; }

.bloco, .bloco-final {
    background: var(--cartao);
    border: 1px solid var(--cartao-linha);
    border-radius: 1rem;
    box-shadow: none;
    padding: 1.6rem;
    font-size: 1.05rem;
}
.bloco > p, .bloco .col-12 > p { max-width: 52rem; line-height: 1.6; }
.bloco h2 { margin-bottom: .8rem; }

/* ── Índice do dossier ───────────────────────────────────────────── */
.indice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.4rem; }
.indice-titulo { font-family: 'Meta Pro', sans-serif; font-weight: 700; margin-right: .2rem; }
.indice a {
    display: inline-block;
    padding: .3rem .8rem;
    border: 1px solid var(--cartao-linha);
    border-radius: 6px;
    background: var(--cartao);
    color: var(--tinta);
    text-decoration: none;
    font-size: 1rem;
}
.indice a:hover, .indice a:focus-visible { border-color: var(--tinta); }
/* Volta à página de entrada do dossier (movel.html). */
.indice a.indice-voltar { background: #dc3545; border-color: #dc3545; color: #fff; font-weight: 700; }
.indice a.indice-voltar:hover, .indice a.indice-voltar:focus-visible { background: #b02a37; border-color: #b02a37; }
[id] { scroll-margin-top: 6rem; }   /* a nav fixa não tapa o título ao saltar */
/* Texto da coluna esquerda da secção das CAP: justificado em ecrãs grandes. */
@media (min-width: 992px) {
    #cap .col-lg-5 > p { text-align: justify; hyphens: auto; }
}
.sub-titulo { font-family: 'Meta Pro', sans-serif; font-weight: 900; font-size: 1.2rem; margin-bottom: .5rem; }

/* ── Faixa do resumo ─────────────────────────────────────────────── */
.faixa-resumo {
    background: #000;
    color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
}
.frase-chave { font-size: 1.25rem; line-height: 1.5; color: #e9e9e9; max-width: 52rem; margin: .3rem 0 1.2rem; }
.frase-chave strong { color: #fff; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: #1f1f1f;
    border: 2px solid #333;
    border-radius: 8px;
    padding: .9rem 1rem;
    color: #fff;
    text-decoration: none;
}
.tile:hover, .tile:focus-visible { border-color: var(--pino); color: #fff; }
.tile-forte { border-left: 6px solid var(--m-2); }
.tile-valor { font-family: 'Meta Pro', sans-serif; font-weight: 900; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-rot { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.tile-sub { color: #bdbdbd; font-size: .95rem; }
.fonte-linha { color: #bdbdbd; font-size: .95rem; margin-top: 1rem; }

/* ── Números e factos ────────────────────────────────────────────── */
.numero-grande { font-size: 1.3rem; margin-bottom: .6rem; }
.numero-grande strong { font-family: 'Meta Pro', sans-serif; font-size: 2rem; font-weight: 900; }
.factos { padding-left: 1.2rem; margin-bottom: 1rem; }
.factos li { margin-bottom: .45rem; line-height: 1.5; }
.lista-lei li { margin-bottom: .5rem; line-height: 1.5; }
.vazio { color: var(--suave); }
.vazio-caixa { background: #fff; border-radius: 8px; padding: .8rem 1rem; }

/* ── Tabela com barras (cobertura, IGEC) ─────────────────────────── */
.tabela-barras { width: 100%; border-collapse: collapse; }
.tabela-barras th, .tabela-barras td { padding: .4rem .3rem; vertical-align: middle; }
.tabela-barras th { font-weight: 600; width: 38%; }
.tabela-barras .barra-celula { width: 42%; }
.tabela-barras .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.tabela-barras .de { font-weight: 400; color: var(--suave); font-size: .95rem; }
.barra { display: block; height: .8rem; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--sinal-contexto); border-radius: 0 4px 4px 0; }
.tabela-barras tr.fraca .barra span { background: var(--m-2); }
.tabela-barras tr.fraca th { color: var(--sinal-direcao); }

/* ── Tabelas de dados ────────────────────────────────────────────── */
.tabela-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-dados { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.tabela-dados thead th {
    font-family: 'Meta Pro', sans-serif;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--suave);
    padding: 0 .6rem .5rem;
    border-bottom: 2px solid var(--tinta);
    vertical-align: bottom;
}
.tabela-dados tbody th, .tabela-dados td { padding: .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-dados small { display: block; color: var(--suave); font-size: .92rem; }
.tabela-dados .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-dados .sinal { margin: 0 .2rem .2rem 0; }

.tabela-distritos { font-size: .95rem; }
.tabela-distritos thead th { font-size: .88rem; letter-spacing: .02em; padding: 0 .4rem .5rem; }
.tabela-distritos thead th.num { white-space: normal; }
.tabela-distritos tbody th, .tabela-distritos td { padding: .5rem .4rem; }
.tabela-distritos tbody th { white-space: nowrap; }
.tabela-distritos .conhecido { color: var(--suave); }
.tabela-distritos .btn-link { font-size: inherit; font-weight: 700; color: var(--tinta); }
/* Mapa de calor: o tom do laranja diz o peso de cada célula na sua coluna. */
.calor, .tabela-cruzada td { background: color-mix(in srgb, var(--m-2) calc(var(--t, 0) * 55%), #fff); }

.tabela-cruzada { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 1rem; }
.tabela-cruzada caption { caption-side: top; color: var(--suave); font-size: .95rem; padding-bottom: .4rem; }
.tabela-cruzada thead th { font-size: .95rem; font-weight: 700; vertical-align: bottom; padding: .3rem .5rem; text-align: right; }
.tabela-cruzada thead th:first-child { text-align: left; }
.tabela-cruzada tbody th { font-weight: 600; padding: .5rem; white-space: nowrap; }
.tabela-cruzada td { padding: .5rem .7rem; border-radius: 6px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Gráfico do calendário ───────────────────────────────────────── */
.grafico { margin: 1rem 0 1.2rem; max-width: 44rem; }
.grafico-titulo { font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.grafico-svg { display: block; width: 100%; height: auto; }
.grafico-svg .eixo { stroke: #adb5bd; stroke-width: 1; }
.grafico-svg .valor { font-family: 'Meta Pro', sans-serif; font-weight: 700; font-size: 17px; fill: var(--tinta); }
.grafico-svg .ano { font-size: 16px; fill: var(--suave); }
.coluna.col-acabou path { fill: var(--col-acabou); }
.coluna.col-proximo path { fill: var(--col-proximo); }
.coluna.col-depois path { fill: var(--col-depois); }
.legenda-linha { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .95rem; }
.legenda-linha li { display: flex; align-items: center; gap: .4rem; }
.amostra.col-acabou { background: var(--col-acabou); }
.amostra.col-proximo { background: var(--col-proximo); }
.amostra.col-depois { background: var(--col-depois); }

/* ── Listas dobradas ─────────────────────────────────────────────── */
.dobra { background: #fff; border: 1px solid var(--cartao-linha); border-radius: 8px; padding: .7rem 1rem; margin-top: .7rem; }
.dobra summary { font-weight: 700; cursor: pointer; }
.dobra .contagem { color: var(--suave); font-weight: 400; }
.lista-simples { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .45rem; }
.lista-simples small { color: var(--suave); font-size: .92rem; }

/* ── Sinais ──────────────────────────────────────────────────────── */
.sinal {
    display: inline-block;
    border-radius: 8px;
    padding: .12rem .65rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5;
}
.sinal-direcao { background: var(--sinal-direcao-claro); color: var(--sinal-direcao); }
.sinal-contexto { background: var(--sinal-contexto-claro); color: var(--sinal-contexto); }
.sinal-info { background: var(--sinal-info-claro); color: var(--sinal-info); }

.destaque-bloco { border-left: 6px solid var(--m-2); }

/* ── O mapa ──────────────────────────────────────────────────────── */
.mapa-escolha { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.escolha {
    font-family: 'Meta Pro', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: .4rem .9rem;
    border: 2px solid var(--cartao-linha);
    border-radius: 6px;
    background: #fff;
    color: var(--tinta);
}
.escolha:hover, .escolha:focus-visible { border-color: var(--tinta); }
.escolha[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.escolha-n { font-weight: 400; opacity: .8; margin-left: .2rem; }

.mapa-caixa { position: relative; background: #fff; border-radius: 8px; padding: .6rem; }
.mapa-analise { max-height: 46rem; }
.mapa-analise .concelho-base { fill: #f1f3f5; stroke: #fff; stroke-width: .6; }
.mapa-analise .fronteira-distritos { stroke: rgba(33, 37, 41, .4); }
.bola { stroke: #fff; stroke-width: 1.2; fill-opacity: .82; }
.bola-direcao { fill: var(--m-3); }
.bola-contexto { fill: var(--sinal-contexto); }
.mapa-analise .bola { cursor: pointer; }
.mapa-analise .bola:hover, .mapa-analise .bola:focus-visible { stroke: var(--tinta); stroke-width: 2.4; fill-opacity: 1; outline: none; }

.mapa-legenda { margin-top: .6rem; }
.legenda-bolas { list-style: none; padding: 0; margin: 0; display: flex; align-items: flex-end; gap: 1.2rem; font-size: .95rem; }
.legenda-bolas li { display: flex; align-items: center; gap: .4rem; }

#ranking-distritos .distrito-linha { grid-template-columns: 9.5rem 1fr 5.4rem; }
#ranking-distritos .distrito-linha:hover, #ranking-distritos .distrito-linha:focus-visible { background: #fff; }
#ranking-distritos .distrito-barra { background: #e9ecef; }
.barra-direcao { background: var(--m-3); }
.barra-contexto { background: var(--sinal-contexto); }
.distrito-num .de { font-weight: 400; color: var(--suave); font-size: .95rem; }

/* ── A lista ─────────────────────────────────────────────────────── */
.filtros { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: .8rem; margin-bottom: 1rem; }
.lista-sinais { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.item-sinais { background: #fff; border: 1px solid var(--cartao-linha); border-radius: 8px; padding: .8rem 1rem; }
.item-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem 1rem; }
.item-nome { font-weight: 700; font-size: 1.1rem; }
.item-nome a { color: var(--tinta); }
.item-nome small { display: block; font-weight: 400; font-size: .95rem; color: var(--suave); }
.item-ficha { flex: 0 0 auto; font-size: .95rem; }
.item-selos { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem; }

/* ── O que dizem os professores daqui (testemunhos; o mesmo do movel.css, à escala desta página) ── */
.item-vozes {
    margin-top: .6rem; background: none; border: 0; padding: 0; font: inherit; font-size: 1rem; font-weight: 700;
    color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.item-vozes[aria-expanded="true"] { text-decoration: none; }
.item-vozes[aria-expanded="true"]::after { content: " ▴"; }
.vozes { margin-top: .8rem; padding-top: .9rem; border-top: 1px solid var(--cartao-linha); max-width: 46rem; }
.vozes .nota { color: var(--suave); margin: .2rem 0; }
.vozes-numeros { background: var(--papel); border-radius: 8px; padding: .9rem 1rem .8rem; margin-bottom: .9rem; }
.vozes-media { font-family: 'Meta Pro', sans-serif; font-size: 2.6rem; font-weight: 900; line-height: 1; margin: 0; }
.vozes-media span { font-size: 1.1rem; color: var(--suave); font-weight: 400; }
.vozes-media-rot { color: var(--suave); margin: .2rem 0 0; }
.regua-5 { position: relative; height: .45rem; border-radius: 99px; margin: .6rem 0 .2rem; background: linear-gradient(90deg, #e9a98c, #f1d9a8 50%, #d8e6d9); }
.regua-5 span { position: absolute; top: 50%; left: var(--p); width: .9rem; height: .9rem; border-radius: 50%; background: var(--tinta); border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.vozes-ext { display: flex; justify-content: space-between; font-size: .95rem; color: var(--suave); margin: .15rem 0 0; }
.vozes-pesa { list-style: none; padding: 0; margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.vozes-pesa li { background: #fff; border: 1px solid var(--cartao-linha); border-radius: 4px; padding: .2rem .7rem; font-size: .95rem; }
.vozes-pesa b { color: var(--sinal-contexto); margin-left: .15rem; }
.vozes-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.voz blockquote {
    margin: 0; padding: .8rem .95rem;
    background: var(--papel); border: 1px solid var(--cartao-linha); border-left: 4px solid var(--tinta);
    border-radius: 0 12px 12px 0;
    white-space: pre-line; line-height: 1.5;
}
.voz-rodape { font-size: .95rem; color: var(--suave); margin: .3rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.voz-denunciar, .voz-mais {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--suave); text-decoration: underline; text-underline-offset: 2px;
}
.voz-mais { margin-top: .6rem; font-weight: 700; color: var(--tinta); }
.voz-denuncia { display: inline-flex; gap: .3rem; }
.voz-denuncia select, .voz-denuncia button { font: inherit; font-size: .95rem; padding: .2rem .45rem; border-radius: 6px; border: 1px solid var(--cartao-linha); background: #fff; }
.voz-denunciada { font-style: italic; }
.vozes-vazio { color: var(--suave); }
.botao-voz { margin-top: 1rem; font-weight: 700; }

.voz-form { margin-top: 1rem; display: grid; gap: 1rem; scroll-margin-top: 6rem; }
.voz-regras { background: var(--ambar); border-left: 4px solid var(--ambar-forte); border-radius: 0 12px 12px 0; padding: .75rem 1rem; }
.voz-regras ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.voz-regras li + li { margin-top: .2rem; }
.voz-form fieldset { border: 0; padding: 0; margin: 0; }
.voz-form legend, .voz-rot { font-weight: 700; margin-bottom: .45rem; padding: 0; font-size: 1.05rem; }
.voz-form legend small, .voz-rot small { font-weight: 400; color: var(--suave); }
.voz-opcao { display: flex; gap: .55rem; align-items: flex-start; padding: .3rem 0; line-height: 1.4; }
.voz-opcao input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: none; accent-color: var(--tinta); }
.voz-escala { display: grid; grid-template-columns: repeat(5, minmax(0, 4.5rem)); gap: .4rem; }
.voz-escala input, .voz-chips input { position: absolute; opacity: 0; pointer-events: none; }
.voz-escala span {
    display: grid; place-items: center; height: 3rem;
    border: 2px solid var(--cartao-linha); border-radius: 8px; background: #fff;
    font-weight: 700; font-size: 1.2rem; cursor: pointer;
}
.voz-escala input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.voz-escala input:focus-visible + span, .voz-chips input:focus-visible + span { outline: 3px solid var(--pino); outline-offset: 2px; }
.voz-form .vozes-ext { max-width: calc(5 * 4.5rem + 4 * .4rem); }
.voz-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.voz-chips span {
    display: inline-block; padding: .4rem .85rem;
    border: 1.5px solid var(--cartao-linha); border-radius: 6px; background: #fff; cursor: pointer;
}
.voz-chips input:checked + span { background: var(--sinal-contexto); border-color: var(--sinal-contexto); color: #fff; }
#voz-texto {
    width: 100%; font: inherit;
    padding: .75rem .85rem; border: 2px solid var(--cartao-linha); border-radius: 8px; resize: vertical;
}
#voz-texto:focus { outline: none; border-color: var(--tinta); }
.voz-conta { font-size: .95rem; color: var(--suave); text-align: right; margin: -.7rem 0 0; }
.voz-erro { color: var(--sinal-direcao); font-weight: 700; margin: 0; }
.voz-obrigado { margin-top: 1rem; padding: .9rem 1rem; border-radius: 8px; background: var(--e-confirmado-claro); color: var(--e-confirmado); font-weight: 700; }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Método ──────────────────────────────────────────────────────── */
.metodo { background: #fff; border-width: 2px; }
.metodo-dobra > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.metodo-dobra > summary::-webkit-details-marker { display: none; }
.metodo-dobra > summary::after {
    content: "\f078";   /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .95rem;
    margin-left: auto;
    transition: transform .2s;
}
.metodo-dobra[open] > summary::after { transform: rotate(180deg); }
.metodo-dobra > summary:hover h2 { text-decoration: underline; }
.metodo-dica { color: var(--suave); font-size: 1rem; }
.metodo-corpo { margin-top: 1rem; }
.definicoes { display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: .5rem 1rem; margin: 0; }
.definicoes dt { font-weight: 400; }
.definicoes dd { margin: 0; line-height: 1.5; }

@media (max-width: 767.98px) {
    .bloco, .bloco-final, .faixa-resumo { padding: 1.1rem 1rem; }
    #ranking-distritos .distrito-linha { grid-template-columns: 7.5rem 1fr 5rem; gap: .5rem; }
    .tiles { grid-template-columns: 1fr 1fr; }
    .tile-valor { font-size: 2.1rem; }
    .filtros { grid-template-columns: 1fr; }
    .item-cabeca { flex-direction: column; }
    .definicoes { grid-template-columns: 1fr; }
    .definicoes dd { margin-bottom: .6rem; }
    .tabela-barras th { width: 45%; }
    /* O gráfico encolhe com o ecrã: a letra do SVG cresce para não ficar abaixo de ~14 px. */
    .grafico-svg .valor { font-size: 24px; }
    .grafico-svg .ano { font-size: 22px; }
}
