/**
 * Aposentações de professores — estilos próprios.
 *
 * Carregado DEPOIS do ../assets/css/style1.css. Copiado do BI da escola
 * (escola/assets/escola.css), que por sua vez vem das Reservas de
 * Recrutamento: copiado e não partilhado, para as páginas poderem evoluir sem
 * se partirem umas às outras. No fim, o que é só desta página: o barómetro,
 * o mapa e a tabela dos agrupamentos.
 *
 * Cor dos dados: laranja = sai (o par entra/sai dos Fluxos). O mapa usa uma
 * escala de um só tom, do laranja claro ao escuro.
 */

:root {
    --tinta: #212529;
    --suave: #6c757d;
    --vermelho: #dc3545;
    --verde: #1f7a37;
    --ambar: #fdf0d5;
    --ambar-forte: #b8860b;
    --ciano: #17798a;
    --linha: #e9ecef;
    --papel: #f8f6f1;
    --entra: #2b6cb0;
    --entra-claro: #dbe7fb;
    --sai: #c4532d;
    --sai-claro: #fde3d1;
    --neutro: #495057;
    --neutro-claro: #e9ecef;
}

/* ── Alinhamento com a identidade do site ────────────────────────── */

/* A Meta Pro desenha pequena: 18px de base em vez dos 16px do Bootstrap.
   Tudo o resto está em rem, por isso escala com isto. */
html {
    font-size: 118.75%;   /* 19 px: letra grande, como nas Reservas de Recrutamento */
}

body {
    padding-top: 5rem;          /* a nav do nav.html é fixed-top */
}

[hidden] {
    display: none !important;
}

h1, h2, h3, h4, h5, h6,
.card-header,
.btn,
.form-label {
    font-family: 'Meta Pro', sans-serif;
}

.smaller { font-size: .95rem; }

table td,
table th,
.num {
    font-variant-numeric: tabular-nums;
}

.destaque {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.destaque strong {
    background: linear-gradient(transparent 60%, #ffe28a 60%, #ffe28a 92%, transparent 92%);
}

.vazio {
    color: var(--suave);
    font-style: italic;
}

/* Onde não há dados, isso tem de se ver: caixa âmbar tracejada em vez de
   uma linha cinzenta em itálico que passa despercebida. Com .nada a
   resposta é mesmo «nenhum» (zero relatos, zero vagas) e não falta de
   dados — fica discreto para não parecer um alerta. */
p.vazio:not(.nada) {
    color: var(--tinta);
    font-style: normal;
    font-weight: 600;
    background: var(--ambar);
    border: 1px dashed var(--ambar-forte);
    border-radius: 10px;
    padding: .7rem 1rem;
}

p.vazio:not(.nada)::before {
    content: '\f05a';           /* fa-circle-info */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--ambar-forte);
    margin-right: .5rem;
}

/* Dado em falta na ficha («Ainda não sabemos.») e o que se pode fazer. */
.falta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: #7a5a00;
    background: var(--ambar);
    border: 1px dashed var(--ambar-forte);
    border-radius: 999px;
    padding: .1rem .7rem;
    margin-right: .35rem;
}

.falta-acao {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    color: #fff;
    background: var(--tinta);
    border-radius: 999px;
    padding: .15rem .75rem;
    margin: .15rem .25rem .15rem 0;
}

.falta-acao:hover,
.falta-acao:focus {
    color: #fff;
    background: #7a5a00;
}

/* Data dos dados, logo por baixo do título. */
.atualizacao {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.1rem;
    color: var(--tinta);
    background: #f1f8f2;
    border: 1px solid #cfe6d4;
    border-left: 4px solid var(--verde);
    border-radius: 0 8px 8px 0;
    padding: .45rem .9rem;
}

.atualizacao::before {
    content: '';
    flex: none;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 0 3px rgba(31, 122, 55, .2);
}

.atualizacao strong { color: var(--verde); font-weight: 800; }

.ligacoes-topo a { margin-right: 1rem; }

/* ── Introdução crítica ─────────────────────────────────────────── */

.intro-critica {
    max-width: 52rem;
    font-size: 1.15rem;
    line-height: 1.6;
    border-left: 4px solid #b3325a;
    padding: .25rem 0 .25rem 1rem;
    margin: 1.25rem 0 2.5rem;
}

.intro-critica p { margin: 0 0 .75rem; }
.intro-critica p:last-child { margin-bottom: 0; }
.intro-critica strong { color: #b3325a; }

/* ── Cartões nacionais ──────────────────────────────────────────── */

.grelha-cartoes {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .grelha-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .grelha-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cartao-nacional {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #868e96;
    border-radius: 16px;
    box-shadow: 0 .35rem .85rem rgba(0, 0, 0, .12);
    transition: transform .2s ease, box-shadow .2s ease;
    color: inherit;
    text-decoration: none;
}

.cartao-nacional:hover {
    transform: translateY(-3px);
    box-shadow: 0 .85rem 2rem rgba(0, 0, 0, .18);
    color: inherit;
}

.cartao-icone {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.25rem;
}

.cartao-info { min-width: 0; }

.cartao-rotulo {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #4a5057;
    margin-bottom: .35rem;
}

.cartao-valor {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.cartao-sufixo {
    font-size: 1.05rem;
    color: var(--suave);
}

.cartao-nota {
    margin-top: .35rem;
    font-size: .95rem;
    color: var(--suave);
}

.cartao-vazio {
    box-shadow: none;
    background: #f8f9fa;
    min-height: 6.5rem;
}

/* Os cartões de secção vêm do Bootstrap com border-0 !important — a borda
   é reposta aqui para combinarem com os cartões nacionais. */
.card.border-0 {
    border: 1px solid #868e96 !important;
}

.cor-ambar   { background: #fdf0d5; color: #b8860b; }
.cor-azul    { background: #dbe7fb; color: #2f6fb3; }
.cor-verde   { background: #d9efdd; color: #1f7a37; }
.cor-ciano   { background: #d5eef1; color: #17798a; }
.cor-laranja { background: #fde3d1; color: #c25a12; }
.cor-rosa    { background: #fbdde3; color: #b3325a; }
.cor-violeta { background: #e5ddf7; color: #6a3fb0; }
.cor-cinza   { background: #e9ecef; color: #495057; }
.cor-jade    { background: #d7f2e3; color: #0f7a4a; }

/* ── Indicadores (mesma anatomia das Reservas) ───────────────────── */

.grelha-indicadores {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .grelha-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grelha-indicadores.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.indicador {
    --acento: #6c757d;
    --acento-fundo: #f1f3f5;
    position: relative;
    background: #fff;
    border: 1px solid var(--linha);
    border-top: 4px solid var(--acento);
    border-radius: 12px;
    padding: .85rem 1rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    min-width: 0;
}

.ind-verde   { --acento: #1f7a37; --acento-fundo: #e3f3e6; }
.ind-ambar   { --acento: #b8860b; --acento-fundo: #fdf0d5; }
.ind-rosa    { --acento: #b3325a; --acento-fundo: #fbdde3; }
.ind-azul    { --acento: #2563a8; --acento-fundo: #dde9f7; }
.ind-laranja { --acento: #c25a12; --acento-fundo: #fde3d1; }
.ind-violeta { --acento: #6a3fb0; --acento-fundo: #e5ddf7; }
.ind-ciano   { --acento: #17798a; --acento-fundo: #d5eef1; }

.indicador-topo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.indicador-icone {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acento-fundo);
    color: var(--acento);
    font-size: .95rem;
}

.indicador-rotulo {
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #4a5057;
    font-weight: 700;
    line-height: 1.2;
}

.indicador-valor {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 2.3rem;
    line-height: 1.05;
    color: var(--acento);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.indicador-valor small {
    font-size: .95rem;
    color: var(--suave);
    font-weight: 600;
}

.indicador-barra {
    height: 8px;
    border-radius: 4px;
    background: var(--acento-fundo);
    overflow: hidden;
    margin: .45rem 0 .1rem;
}

.indicador-barra span {
    display: block;
    height: 100%;
    background: var(--acento);
    border-radius: 4px;
}

.indicador-delta {
    display: inline-block;
    margin: .4rem 0 .15rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    background: #e9ecef;
    color: #495057;
}

.indicador-delta.bom { background: #dff1e3; color: #17692d; }
.indicador-delta.mau { background: #fbe1e1; color: #a12626; }

.indicador-nota {
    font-size: .95rem;
    color: var(--suave);
    line-height: 1.35;
}

/* ── Gráficos ────────────────────────────────────────────────────── */

.grafico-caixa {
    position: relative;
    height: 18rem;
}

@media (min-width: 768px) {
    .grafico-caixa { height: 20rem; }
}

.grafico-caixa.grafico-pequeno { height: 15rem; }

.subtitulo {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 1.75rem 0 .6rem;
}

.subtitulo:first-child { margin-top: 0; }

/* ── «Que escola?»: a faixa preta, como o «Onde estou?» ───────────── */

.onde-cabeca {
    background: #111;
    color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1.5rem 1.25rem;
}

.onde-cabeca p { color: #d9d9d9; max-width: 46rem; }

.onde-etiqueta {
    display: inline-block;
    background: #ffc107;
    color: #111;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}

.onde-corpo { border-radius: 0 0 16px 16px !important; }

/* ── Listas em barras ───────────────────────────────────────────── */

.barras {
    list-style: none;
    padding: 0;
    margin: 0;
}

.barras li {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .4rem .6rem;
    margin-bottom: .3rem;
    border-radius: 6px;
    overflow: hidden;
    font-size: .95rem;
}

.barras li .fundo {
    position: absolute;
    inset: 0 auto 0 0;
    background: #d5eef1;
    z-index: 0;
}

.barras li > :not(.fundo) { position: relative; z-index: 1; }

.barras li .nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barras li .total {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.barras li .sub {
    font-size: .95rem;
    color: var(--suave);
    font-weight: 400;
    margin-left: .35rem;
}

.barras.azul li .fundo { background: var(--entra-claro); }
.barras.laranja li .fundo,
.barras li.negativo .fundo { background: var(--sai-claro); }
.barras.ambar li .fundo { background: var(--ambar); }

.barras li.clicavel { cursor: pointer; }
.barras li.clicavel:hover .nome,
.barras li.clicavel:focus-visible .nome { text-decoration: underline; }
.barras li.clicavel:focus-visible { outline: 2px solid #b3325a; outline-offset: 1px; }

.barras.numeradas { counter-reset: barra; }
.barras.numeradas li .nome::before {
    counter-increment: barra;
    content: counter(barra) '. ';
    font-weight: 700;
    color: var(--suave);
}

/* ── Tabelas ─────────────────────────────────────────────────────── */

.tabela-dados { font-size: .95rem; }

.tabela-dados thead th {
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #4a5057;
    white-space: nowrap;
    border-bottom-width: 2px;
}

.tabela-alta { max-height: 26rem; overflow-y: auto; }

.tabela-alta thead th { position: sticky; top: 0; background: #fff; }

/* Números nunca partem; a tabela desliza no telemóvel. */
.tabela-dados td { white-space: nowrap; }
.tabela-dados td.nome-ae { white-space: normal; min-width: 14rem; }

/* ── O que os números dizem (acordeão) ──────────────────────────── */

.leitura .accordion-item {
    border: 0;
    border-radius: .75rem !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    margin-bottom: .75rem;
    overflow: hidden;
}

.leitura .accordion-button {
    font-size: 1.1rem;
    font-weight: 700;
    background: #fff;
    color: #212529;
    box-shadow: none;
}

.leitura .accordion-button:not(.collapsed) { background: #fbdde3; }
.leitura .accordion-button:focus-visible { outline: 3px solid #b3325a; outline-offset: -3px; }
.leitura .accordion-button i { color: #b3325a; width: 1.4rem; }
.leitura .accordion-body { line-height: 1.55; }

/* ── Newsletter, partilha, citação, contacto ─────────────────────── */

.bloco-final {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    padding: 1.5rem;
}

.bloco-newsletter {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
}

.bloco-newsletter a,
.bloco-newsletter .nl-privacidade { color: #e3eeff; }

.partilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.partilha-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #212529;
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform .15s, background .15s;
}

.partilha-botao:hover,
.partilha-botao:focus-visible {
    background: #b3325a;
    color: #fff;
    transform: translateY(-2px);
}

.citacao {
    background: #f8f9fa;
    border-left: 4px solid #b3325a;
    border-radius: .25rem;
    padding: .75rem 1rem;
    font-size: .95rem;
    word-break: break-word;
}

/* ── Tooltip das réguas e das barras ─────────────────────────────── */

.viz-tooltip {
    position: fixed;
    z-index: 1080;
    max-width: 300px;
    padding: .55rem .75rem;
    background: #fff;
    color: var(--tinta);
    border: 1px solid #868e96;
    border-radius: 10px;
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .18);
    font-size: .95rem;
    line-height: 1.4;
    pointer-events: none;
}

.viz-tooltip .tt-valor {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
}

@media (max-width: 767.98px) {
    .mapa-caixa { height: 420px; }
}

@media (max-width: 575.98px) {
    .onde-cabeca { padding: 1.1rem; }
}

@media print {
    #nav-placeholder,
    #footer-placeholder,
    .bloco-final { display: none !important; }

    body { padding-top: 0; }
}

/* Letra grande: quem lê estas páginas são muitas vezes professores mais velhos.
   Nada abaixo de 0,95rem (≈18 px); o texto corrido a 1,1rem. */
main { font-size: 1.1rem; }
main .small, main small { font-size: 1rem; }

/* ── Só desta página ─────────────────────────────────────────────── */

/* O barómetro: o número da lista mais recente, grande, como manchete. */
.manchete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: 1.25rem;
}

.manchete-numero {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: clamp(3.5rem, 9vw, 5.5rem);
    line-height: 1;
    color: var(--sai);
    font-variant-numeric: tabular-nums;
}

.manchete-texto {
    font-size: 1.25rem;
    line-height: 1.4;
    max-width: 34rem;
}

.manchete-texto strong { color: var(--tinta); }

/* Controlos por cima do mapa e dos gráficos: botões de alternar. */
.alternar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.alternar button {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border: 1px solid #868e96;
    background: #fff;
    color: var(--tinta);
    border-radius: 999px;
    padding: .3rem .9rem;
}

.alternar button[aria-pressed="true"] {
    background: var(--tinta);
    border-color: var(--tinta);
    color: #fff;
}

.alternar button:focus-visible { outline: 3px solid #b3325a; outline-offset: 2px; }

.mapa-caixa {
    height: 560px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--linha);
    background: #f4f1ea;
}

.mapa-caixa .leaflet-container { font: inherit; }

.legenda-mapa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin-top: .75rem;
    font-size: 1rem;
}

.legenda-mapa .passo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.legenda-mapa i {
    display: inline-block;
    width: 1.4rem;
    height: 1rem;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .15);
}

.legenda-mapa .sem-dados i {
    background: repeating-linear-gradient(45deg, #e9ecef 0 3px, #fff 3px 6px);
}

.tt-mapa .tt-titulo {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: .2rem;
}

.tt-mapa .tt-linha { display: block; }

.filtro-tabela {
    max-width: 26rem;
}

.tabela-dados td.num,
.tabela-dados th.num { text-align: right; }

.tabela-dados tbody tr { cursor: pointer; }
.tabela-dados tbody tr:hover > * { background: #fff8dd; }


.grafico-caixa.grafico-alto { height: 22rem; }
@media (min-width: 768px) { .grafico-caixa.grafico-alto { height: 26rem; } }

.alternar button:disabled { opacity: .45; cursor: not-allowed; }

.tabela-simples tbody tr { cursor: default; }
.tabela-simples tbody tr:hover > * { background: transparent; }

details summary { cursor: pointer; }

/* Nas listas ao lado do mapa, os concelhos do QZP cortam-se para o número não fugir. */
#lista-top li .sub {
    display: inline-block;
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* No telemóvel, uma coluna: os números grandes («≈ 45 800») não partem. */
.indicador-valor { white-space: nowrap; }
@media (max-width: 575.98px) {
    .grelha-indicadores { grid-template-columns: 1fr; }
}

/* Situação de cada grupo: sempre com ícone e palavra, nunca só cor. */
.estado {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .65rem;
    white-space: nowrap;
}
.estado-critico  { background: #fbe1e1; color: #a12626; }
.estado-apertado { background: #fdf0d5; color: #7a5a00; }
.estado-folga    { background: #dff1e3; color: #17692d; }
.estado-sem      { background: #e9ecef; color: #495057; font-weight: 400; }

#tabela-grupos td.nome-ae small { display: block; color: var(--suave); }