/**
 * Arrendar casa para dar aulas — estilos próprios.
 *
 * Carregado DEPOIS do ../assets/css/style1.css. Copiado das Aposentações
 * (aposentacoes/assets/aposentacoes.css), que vem do BI da escola: 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: a calculadora e a tabela ordenável.
 *
 * O mapa usa a escala de um só tom das Aposentações, 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); }


/* ── Só da habitação ─────────────────────────────────────────────── */

/* As três perguntas da calculadora, lado a lado no ecrã largo. */
.contas {
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: 1fr;
    max-width: 52rem;
}
@media (min-width: 768px) {
    .contas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cabeçalhos da tabela que ordenam: botões que parecem cabeçalhos. */
.tabela-dados thead th button {
    all: unset;
    cursor: pointer;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
}
.tabela-dados thead th button:focus-visible { outline: 2px solid #b3325a; outline-offset: 2px; }
.tabela-dados thead th button::after { content: ' ↕'; color: #adb5bd; }
.tabela-dados thead th[aria-sort="ascending"] button::after { content: ' ↑'; color: var(--tinta); }
.tabela-dados thead th[aria-sort="descending"] button::after { content: ' ↓'; color: var(--tinta); }

/* Como ler a tabela: o que quer dizer cada coluna, em duas colunas no ecrã largo. */
.como-ler {
    background: var(--papel);
    border-radius: 12px;
    padding: .75rem 1.25rem;
}
.como-ler-lista {
    display: grid;
    gap: .9rem 2rem;
    grid-template-columns: 1fr;
    margin: .9rem 0 .25rem;
    font-size: .95rem;
}
@media (min-width: 992px) {
    .como-ler-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.como-ler-lista dt {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #4a5057;
}
.como-ler-lista dd { margin: .15rem 0 0; }
.como-ler-lista .pesa { display: block; margin-top: .2rem; }

/* O que sobra da renda depois do apoio, e a parte do ordenado. */
.tabela-dados td.forte { font-weight: 700; }
.tabela-dados td.alerta { color: #a12626; font-weight: 700; }

/* QZP carenciado: palavra e ícone, nunca só cor. */
.marca-carenciado {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .95rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 .55rem;
    background: #dde9f7;
    color: #1d4f88;
    white-space: nowrap;
}

.tabela-dados td.nome-ae small { display: block; color: var(--suave); font-size: .95rem; }

/* Lista ao lado do mapa: o nome da zona nunca desaparece; os concelhos cortam-se. */
#lista-top li .nome { min-width: 4.5rem; }
#lista-top li .sub { max-width: 10rem; }
.marca-icone { color: #1d4f88; margin-right: .3rem; }

/* A renda que o professor paga, comparada com a do concelho. */

.minha-casa {
    border-left: 4px solid var(--sai);
    background: var(--sai-claro);
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.25rem;
    max-width: 52rem;
}
.minha-casa p { margin-bottom: .5rem; }
.minha-casa p:last-child { margin-bottom: 0; }
.minha-casa .grande {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    line-height: 1.3;
}

/* Casa para professores, o que fazem as câmaras: um cartão por câmara, a renda do concelho em baixo. */
.grelha-camaras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}
.camara {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linha);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    background: #fff;
}
.camara-topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}
.camara-qzp { font-weight: 400; color: var(--suave); font-size: 1rem; }
.camara-programa { font-weight: 700; margin-bottom: .5rem; }
.camara-dados { margin: 0 0 .75rem; }
.camara-dados dt { font-size: 1rem; color: var(--suave); margin-top: .5rem; }
.camara-dados dd { margin: 0; }
.camara-renda {
    margin: auto 0 .6rem;       /* empurra a renda e as fontes para o fundo do cartão */
    padding: .5rem .75rem;
    border-radius: 8px;
    background: var(--sai-claro);
}
.camara-fontes { font-size: .95rem; color: var(--suave); margin: 0; }
.camara-fontes a { color: inherit; }

/* Enviar a renda: a mesma caixa da comparação, a azul para se distinguir. */
.enviar-renda {
    border-left: 4px solid var(--entra);
    background: var(--entra-claro);
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.25rem;
    max-width: 52rem;
}
.enviar-renda:focus { outline: none; }
.enviar-renda .contas { max-width: none; }
@media (min-width: 768px) {
    .enviar-renda .contas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.enviar-renda .resposta.aviso {
    background: #fbe1e1;
    color: #a12626;
    border-radius: 8px;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
}
.codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    background: #fff;
    border-radius: 6px;
    padding: .05rem .4rem;
}
/* Armadilha para robôs: fora do ecrã, não escondida (alguns robôs saltam os campos escondidos). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enviar-renda legend { font-size: inherit; }

/* ── Calculadora «Quanto lhe custa a casa?», como a do AED ──────────
   Perguntas à esquerda em três passos, resultado à direita (fixo ao
   rolar no computador); no telemóvel, o resultado fica por baixo e uma
   barra presa ao fundo do ecrã mostra o número enquanto se preenche. */

.calc-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}
@media (min-width: 992px) {
    .calc-grelha { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .resultado { position: sticky; top: 6rem; }
}
.calc-grelha > * { min-width: 0; }
.calc-grelha .input-group-text { background: #f8f9fa; }
.calc-grelha + .enviar-renda,
.calc-grelha ~ #renda-ok { margin-top: 2rem; }

.passo-titulo {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: .75rem;
}
.calc-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--tinta);
    color: #fff;
    font-size: 1rem;
    margin-right: .6rem;
    vertical-align: .15em;
}
.passo-titulo .opcional {
    font-family: inherit;
    font-weight: 400;
    font-size: .95rem;
    color: var(--suave);
    margin-left: .5rem;
}

.resultado {
    background: #fff;
    border: 2px solid var(--tinta);
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
}
.etiqueta-res {
    display: inline-block;
    background: #ffc107;
    color: #111;
    font-weight: 700;
    border-radius: 6px;
    padding: .1rem .55rem;
}
.veredicto-numero {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: clamp(3.5rem, 13vw, 5.5rem);
    line-height: .95;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.veredicto-numero.mau { color: var(--vermelho); }
.veredicto-numero.bom { color: var(--verde); }
.veredicto-titulo {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.3;
}
.veredicto-titulo span {
    background: linear-gradient(transparent 60%, #ffe28a 60%, #ffe28a 92%, transparent 92%);
}

.barra-cob {
    height: .9rem;
    background: var(--linha);
    border-radius: 99px;
    overflow: hidden;
}
.barra-cob > i {
    display: block;
    height: 100%;
    background: var(--vermelho);
    border-radius: 99px;
    transition: width .25s;
}
.barra-cob.ok > i { background: var(--verde); }

.contas-res { width: 100%; border-collapse: collapse; }
.contas-res td { padding: .45rem 0; border-bottom: 1px dashed #dee2e6; vertical-align: top; }
.contas-res td.v {
    text-align: right;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    white-space: nowrap;
    padding-left: .75rem;
    font-variant-numeric: tabular-nums;
}
.contas-res tr:last-child td { border-bottom: 0; }
.contas-res tr.perde td { color: var(--vermelho); font-weight: 700; }

.barra-movel {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    padding: .75rem 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
    transform: translateY(160%);
    transition: transform .25s ease;
}
.barra-movel.visivel { transform: none; }
.barra-movel strong { color: #ffc107; font-family: 'Meta Pro', sans-serif; font-weight: 900; font-size: 1.4rem; }
.barra-movel:hover { color: #fff; }

/* Secção que abre e fecha no próprio cabeçalho escuro (as câmaras). Fechada,
   o cabeçalho tem os quatro cantos redondos; aberta, junta-se ao cartão. */
.abre-fecha > summary { list-style: none; cursor: pointer; }
.abre-fecha > summary::-webkit-details-marker { display: none; }
.abre-fecha:not([open]) > summary.onde-cabeca { border-radius: 16px; }
.abre-fecha-botao {
    display: inline-flex;
    align-items: center;
    background: #ffc107;
    color: #111;
    font-weight: 700;
    border-radius: 999px;
    padding: .35rem 1rem;
}
.abre-fecha-botao i { transition: transform .2s; }
.abre-fecha[open] .abre-fecha-botao i { transform: rotate(180deg); }
.abre-fecha > summary:focus-visible { outline: 3px solid #ffc107; outline-offset: 3px; }

/* Cada passo da calculadora numa caixa própria: separa o 1, o 2 e o 3. */
#calc.d-grid { gap: 1.25rem !important; }
#calc > fieldset {
    background: var(--papel);
    border: 1px solid #e6e1d6;
    border-radius: 14px;
    padding: 1.1rem 1.25rem 1.3rem;
}
#calc > fieldset .passo-titulo { margin-bottom: .9rem; }
@media (max-width: 575.98px) {
    #calc > fieldset { padding: 1rem 1rem 1.15rem; }
}
.barra-movel strong { white-space: nowrap; }   /* «515 €» não parte o € para a linha de baixo */

/* Aviso da próxima reunião com uma câmara, no topo: a faixa preta do metaProf
   (como o contador do AED), com a data grande a amarelo. Leva aos testemunhos. */
.faixa-reuniao {
    background: #111;
    color: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.4rem;
    max-width: 60rem;
}
.faixa-reuniao p { color: #d9d9d9; max-width: 40rem; }
.faixa-reuniao p strong { color: #fff; }
.faixa-reuniao-linha {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: .5rem;
}
.faixa-reuniao-datas {
    flex: none;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.faixa-reuniao-e {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: #ffc107;
}
@media (max-width: 575.98px) {
    .faixa-reuniao-linha { flex-wrap: wrap; }   /* duas datas e o título não cabem lado a lado */
}
.faixa-reuniao-data {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    color: #ffc107;
    line-height: .85;
}
.faixa-reuniao-data .dia { font-size: clamp(4rem, 14vw, 6.5rem); font-variant-numeric: tabular-nums; }
.faixa-reuniao-data .mes { font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; margin-top: clamp(.6rem, 1.6vw, 1.2rem); }
.faixa-reuniao-titulo {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: clamp(1.35rem, 3.4vw, 2rem);
    line-height: 1.15;
    margin: 0 0 .5rem;
    max-width: 22em;
}
.faixa-reuniao-titulo .faixa-camara { color: #ffc107; }
.faixa-reuniao .btn-warning { color: #111; white-space: nowrap; }
@media (min-width: 768px) {
    .faixa-reuniao { padding: 2rem 2.25rem; }
}

/* Erros dos formulários (testemunhos e rendas). */
.resposta.aviso {
    background: #fbe1e1;
    color: #a12626;
    border-radius: 8px;
    padding: .5rem .75rem;
}

/* As secções para onde a página salta ficam por baixo da nav fixa, não tapadas por ela. */
#o-que-pesa, #onde-pesa-mais, #calculadora, #resultado, #testemunhos, #zona-a-zona, #o-que-pagam,
#anuncios, #camaras, #o-que-dizem { scroll-margin-top: 6rem; }