/**
 * Acompanhar AED — estilos próprios.
 *
 * Carregado DEPOIS do ../assets/css/style1.css. A anatomia (cartões com ícone,
 * faixa preta onde o professor faz alguma coisa, acordeão de leituras, blocos
 * finais) é a das reservas_recrutamento/assets/app.css, copiada e não
 * partilhada, para as páginas poderem evoluir sem se partirem uma à outra.
 */

:root {
    --tinta: #212529;
    --suave: #4f575e;           /* mais escuro do que o do Bootstrap: lê-se melhor */
    --vermelho: #dc3545;
    --magenta: #b3325a;
    --verde: #1f7a37;
    --ambar: #fdf0d5;
    --ambar-forte: #b8860b;
    --amarelo: #ffc107;
    --linha: #e9ecef;
    --preto: #111;
    --contorno: #3d444a;        /* linha dos cartões: escura e com 2px, para se ver bem */
}

/* Letra maior em todo o AED: muitos professores deslocados já não leem bem
   letra pequena. O Bootstrap mede quase tudo em rem, por isso subir a base
   (16 → 20 px) aumenta texto, formulários e botões de uma vez. */
html {
    font-size: 125%;            /* 20 px: ver a nota em cima */
    scroll-padding-top: 6.5rem; /* as âncoras (#entrar, #voltar…) não ficam debaixo da nav fixa */
}

body {
    padding-top: 5rem;          /* a nav do nav.html é fixed-top */
    color: var(--tinta);
    background: #fff;
    line-height: 1.6;
}

/* Os cinzentos do Bootstrap (text-muted, form-text) são claros de mais. */
main .text-muted,
main .form-text { color: var(--suave) !important; }
main .form-text { font-size: .95rem; }
main .small, main small { font-size: .95em; }

[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; }
.num { font-variant-numeric: tabular-nums; }

/* Frase de leitura por cima de cada bloco: o número que interessa, dito em
   português, antes do gráfico que o mostra. */
.destaque { font-size: 1.1rem; margin-bottom: 1rem; }
.destaque strong {
    background: linear-gradient(transparent 60%, #ffe28a 60%, #ffe28a 92%, transparent 92%);
}

.card.border-0 { border: 2px solid var(--contorno) !important; border-radius: 16px !important; }
.card.border-0 > .card-header { border-bottom: 2px solid #dee2e6; border-radius: 14px 14px 0 0; }
.card.border-0.bg-light { border-color: #adb5bd !important; }

/* ── Rubricas com ícone ──────────────────────────────────────────────── */

.rubrica {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    margin: 0;
}

.rubrica-icone {
    flex: none;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--amarelo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.rubrica-grande { font-size: 1.75rem; margin-bottom: .25rem; }
.rubrica-grande .rubrica-icone { width: 2.8rem; height: 2.8rem; font-size: 1.2rem; }

/* ── Cabeçalho ─────────────────────────────────────────────────────── */

.titulo-aed { text-transform: uppercase; letter-spacing: -.01em; }

.atualizacao {
    display: inline-flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: 1rem;
    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;
    margin-top: .45rem;
    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; }

.atualizacao.fechada { background: #fbf0f2; border-color: #f1c9d3; border-left-color: var(--vermelho); }
.atualizacao.fechada::before { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(220, 53, 69, .2); }
.atualizacao.fechada strong { color: var(--vermelho); }

.intro-critica {
    max-width: 52rem;
    font-size: 1.05rem;
    line-height: 1.6;
    border-left: 4px solid var(--magenta);
    padding: .25rem 0 .25rem 1rem;
    margin: 1.25rem 0 2.5rem;
}

.intro-critica strong { color: var(--magenta); }

/* ── Faixa preta: o contador e as ações ──────────────────────────────── */

.faixa {
    background: var(--preto);
    color: #fff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
}

.faixa p { color: #d9d9d9; }
.faixa strong { color: #fff; }

.etiqueta {
    display: inline-block;
    background: var(--amarelo);
    color: var(--preto);
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}

.contador {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.contador-numero {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: clamp(5rem, 20vw, 10rem);
    line-height: .85;
    color: var(--amarelo);
    font-variant-numeric: tabular-nums;
}

.contador-texto {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: clamp(1.35rem, 3.4vw, 2rem);
    line-height: 1.15;
    max-width: 18em;
    padding-bottom: .4rem;
}

.contador-texto span { color: var(--amarelo); }

.faixa .btn-warning { color: var(--preto); }

@media (min-width: 768px) {
    .faixa { padding: 2.5rem 2.5rem; }
}

/* ── Cartões nacionais (mesma anatomia das reservas) ──────────────── */

.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(3, minmax(0, 1fr)); }
}

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

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

.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: .85rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #3d444a;
    margin-bottom: .35rem;
}

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

.cartao-valor.alerta { color: var(--vermelho); }
.cartao-valor.vazio { color: #adb5bd; }

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

.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; }

/* Barra «faltam X inscrições» enquanto os números não são públicos. */
.meta-barra {
    height: .75rem;
    background: var(--linha);
    border-radius: 99px;
    overflow: hidden;
}

.meta-barra > span {
    display: block;
    height: 100%;
    background: var(--amarelo);
    border-radius: 99px;
}

/* ── Funil das etapas ───────────────────────────────────────────────── */

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

.funil li {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .6rem .75rem;
    margin-bottom: .4rem;
    border-radius: 8px;
    overflow: hidden;
}

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

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

.funil .passo {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--tinta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: .9rem;
}

.funil .total {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.funil .total small { font-weight: 400; color: var(--suave); margin-left: .25rem; }

.funil li.devolvida .fundo { background: #fbdde3; }
.funil li.devolvida .passo { background: var(--magenta); }

/* ── O que exigimos ─────────────────────────────────────────────────── */

.exigencias {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    counter-reset: exigencia;
}

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

.exigencia {
    position: relative;
    background: #fff;
    border: 2px solid var(--contorno);
    border-radius: 16px;
    padding: 1.4rem 1.4rem 1.25rem 4.6rem;
    box-shadow: 0 .35rem .85rem rgba(0, 0, 0, .08);
}

.exigencia::before {
    counter-increment: exigencia;
    content: counter(exigencia);
    position: absolute;
    left: 1.2rem;
    top: 1.15rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--vermelho);
    color: #fff;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exigencia h3 { font-weight: 900; font-size: 1.25rem; margin-bottom: .35rem; }
.exigencia h3 i { color: var(--vermelho); }
.exigencia p { margin: 0; color: #495057; }

/* ── Escalões ───────────────────────────────────────────────────────── */

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

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

.escalao {
    background: #f8f9fa;
    border: 2px solid #ced4da;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
}

.escalao-km {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: #3d444a;
}

.escalao-valor {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 2.4rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.escalao-valor small { font-size: 1rem; font-weight: 400; color: var(--suave); }
.escalao-nota { font-size: .95rem; color: var(--suave); }

/* ── Inscrição: cabeça preta por cima do cartão ─────────────────────── */

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

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

.onde-cabeca { border: 2px solid var(--preto); border-bottom: 0; }
.card.border-0.onde-corpo { border-radius: 0 0 16px 16px !important; border-top: 0 !important; }

@media (max-width: 575.98px) {
    .falta-um-passo .lead { font-size: 1.1rem; }
    .falta-um-passo .display-6 { font-size: 1.6rem; }
}

.passos {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    counter-reset: passo;
}

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

.passos li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    color: #d9d9d9;
    font-size: 1rem;
}

.passos li::before {
    counter-increment: passo;
    content: counter(passo);
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--amarelo);
    color: var(--preto);
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.passos strong { color: #fff; display: block; }

.caixa-preta {
    display: flex;
    gap: 1rem;
    background: var(--preto);
    color: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.caixa-preta-icone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--amarelo);
    color: var(--preto);
    font-size: 1.2rem;
}

.caixa-preta p { color: #d9d9d9; }
.caixa-preta strong { color: #fff; }
.caixa-preta a:not(.btn) { color: var(--amarelo); }

@media (max-width: 575.98px) {
    .caixa-preta { padding: 1rem; }
    .caixa-preta-icone { display: none; }
}

/* Mensagens dos formulários (resposta da API). */
.resposta { border-radius: 8px; padding: .75rem 1rem; margin-top: 1rem; font-weight: 600; }
.resposta.ok { background: #f1f8f2; color: var(--verde); border-left: 4px solid var(--verde); }
.resposta.aviso { background: #fbf0f2; color: #8a1c2b; border-left: 4px solid var(--vermelho); }
.caixa-preta .resposta.ok { background: #1d3524; color: #b9e4c4; }
.caixa-preta .resposta.aviso { background: #3d1a20; color: #f5c2c7; }

.aviso-confirmar {
    display: flex;
    align-items: flex-start;
    background: var(--ambar);
    border-left: 4px solid var(--ambar-forte);
    border-radius: 0 8px 8px 0;
    padding: .75rem 1rem;
}

.aviso-confirmar i { color: var(--ambar-forte); font-size: 1.3rem; margin-top: .1rem; }

/* «Falta um passo»: o ecrã depois da inscrição. Tem de ser impossível de
   ignorar, porque sem abrir o link a inscrição não conta. */
.falta-um-passo {
    position: relative;
    background: var(--ambar);
    border: 3px solid var(--amarelo);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    outline: none;
    scroll-margin-top: 6.5rem;
}

.falta-icone {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--preto);
    color: var(--amarelo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.passos-confirmar { padding-left: 1.4rem; margin-bottom: 1rem; }
.passos-confirmar li { margin-bottom: .4rem; font-size: 1.05rem; }

@media (min-width: 768px) {
    .falta-um-passo { padding: 2.25rem 2.5rem; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Calculadora: chamada na página principal ────────────────────────── */

.chamada-calc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: var(--ambar);
    border-radius: 1rem;
    padding: 1.5rem;
}

.chamada-calc-texto { flex: 1 1 22rem; max-width: 40rem; }

.chamada-calc-numero {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: clamp(3.5rem, 10vw, 5rem);
    line-height: .9;
    color: var(--vermelho);
    font-variant-numeric: tabular-nums;
}

/* ── Leituras (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: var(--tinta);
    box-shadow: none;
}

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

.numero-leitura {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--magenta);
}

/* ── Blocos finais (relatórios, newsletter, partilha, contacto) ──────── */

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

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

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

.relatorio {
    display: block;
    text-decoration: none;
    color: var(--tinta);
    border-radius: 12px;
    padding: .9rem 1rem;
    margin-bottom: .6rem;
    background: #f8f9fa;
    border: 2px solid #ced4da;
    transition: background .15s;
}

.relatorio:hover, .relatorio:focus-visible { background: #fbdde3; color: var(--tinta); }
.relatorio .data { display: block; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); font-weight: 700; }
.relatorio .nome { display: block; font-family: 'Meta Pro', sans-serif; font-weight: 900; font-size: 1.1rem; }
.relatorio .nome::after { content: ' →'; }
.relatorio .desc { display: block; font-size: .95rem; color: var(--suave); }

.leis { list-style: none; padding: 0; margin: 0; }
.leis li { padding: .6rem 0; border-bottom: 1px dashed #dee2e6; }
.leis li:last-child { border-bottom: 0; }
.leis a { font-weight: 700; color: var(--tinta); }
.leis span { display: block; font-size: .95rem; color: var(--suave); }

.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: var(--tinta);
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform .15s, background .15s;
}

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

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

/* ── Calculadora ────────────────────────────────────────────────────── */

.calc-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .calc-grelha { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .resultado { position: sticky; top: 6rem; }
}

/* Sem isto, as colunas (e a grelha interna do resultado) esticam com o
   conteúdo e passam a largura do ecrã no telemóvel. */
.calc-grelha > *,
.resultado > * { min-width: 0; }
.calc-grelha #calc,
.resultado { grid-template-columns: minmax(0, 1fr); }

.calc-grelha .input-group-text { background: #f8f9fa; }
.calc-grelha .badge { font-size: .9rem; }
.calc-grelha .escondido { display: none; }

.calc-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--tinta);
    color: #fff;
    font-size: .9rem;
    margin-right: .5rem;
}

.veredicto-numero {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 14vw, 6.5rem);
    line-height: .9;
    color: var(--vermelho);
    font-variant-numeric: tabular-nums;
}

.veredicto-numero.ok { color: var(--verde); }

.veredicto-titulo {
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.25;
}

.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 { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.contas td { padding: .45rem 0; border-bottom: 1px dashed #dee2e6; vertical-align: top; }
.contas 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 tr.total td { border-bottom: 2px solid var(--tinta); font-weight: 700; }
.contas tr.falta td { color: var(--vermelho); font-weight: 700; border-bottom: 0; font-size: 1.05rem; }

.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: var(--preto);
    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.barra-registo { background: var(--amarelo); color: var(--preto); }
.barra-movel.barra-registo:hover { color: var(--preto); }
.barra-movel.barra-registo strong { color: var(--preto); font-size: 1.05rem; }
.barra-movel strong { color: var(--amarelo); font-family: 'Meta Pro', sans-serif; font-weight: 900; font-size: 1.4rem; }
.barra-movel:hover { color: #fff; }

/* ── «E agora?»: a ponte entre as contas e o resto da calculadora ──── */

.agora { display: grid; gap: .75rem; grid-template-columns: 1fr; }

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

.agora-item {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 2px solid var(--contorno);
    border-radius: 14px;
    background: #fff;
    color: var(--tinta);
    text-decoration: none;
    transition: background .15s, transform .15s;
}

.agora-item:hover, .agora-item:focus-visible { background: var(--ambar); color: var(--tinta); transform: translateY(-2px); }
.agora-item i { color: var(--vermelho); font-size: 1.4rem; margin-top: .2rem; width: 1.6rem; text-align: center; }
.agora-item strong { display: block; }
.agora-item span { color: var(--suave); }
.agora-item span strong { color: var(--tinta); }

/* ── Faixa do registo (na calculadora) ──────────────────────────────── */

.faixa-registo { display: flex; gap: 1.5rem; align-items: flex-start; border: 3px solid var(--amarelo); }

.faixa-registo-icone {
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--amarelo);
    color: var(--preto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

@media (max-width: 575.98px) {
    .faixa-registo-icone { display: none; }
}

.nota-lei { color: #c9cdd1; font-size: .95rem; }
.caixa-preta .nota-lei a { color: var(--amarelo); }

/* ── Perguntas sobre o impacto: botões grandes, fáceis de carregar ──── */

.perguntas { display: grid; gap: 1.25rem; }

.pergunta { border: 0; padding: 0 0 1.1rem; margin: 0; border-bottom: 1px dashed #ced4da; }

.pergunta legend {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .6rem;
    float: none;
    width: auto;
}

.pergunta legend i { color: var(--magenta); }

.pergunta .opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }

.pergunta .btn {
    border-width: 2px;
    border-radius: 99px;
    padding: .5rem 1.1rem;
    font-family: 'Meta Pro', sans-serif;
}

.desabafo textarea { font-size: 1.05rem; line-height: 1.55; border: 2px solid var(--contorno); }
.desabafo .h4 i { color: var(--magenta); }

.codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #fff;
    border: 2px dashed var(--contorno);
    border-radius: 6px;
    padding: .05rem .5rem;
    letter-spacing: .08em;
}

#texto-partilha {
    background: #f8f9fa;
    border-left: 4px solid var(--amarelo);
    border-radius: .25rem;
    padding: .75rem 1rem;
    font-size: 1rem;
    overflow-wrap: anywhere;    /* o endereço longo não cabe numa linha no telemóvel */
}

/* ── Registo pessoal (acompanhar.php) ───────────────────────────────── */

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

.etapa {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px dashed #dee2e6;
    position: relative;
}

.etapa:last-child { border-bottom: 0; }

.etapa .bola {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid #adb5bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    color: #6c757d;
    background: #fff;
}

.etapa.feita .bola { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapa.devolvida .bola { border-color: var(--magenta); color: var(--magenta); }
.etapa.devolvida.feita .bola { background: var(--magenta); color: #fff; }
.etapa .titulo { font-weight: 700; }
.etapa .quando { font-size: .95rem; color: var(--suave); }
.etapa form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; align-items: center; }
.etapa form .form-control, .etapa form .form-select { width: auto; min-width: 0; max-width: 100%; }

.mensagem-ok { background: #f1f8f2; border-left: 4px solid var(--verde); border-radius: 0 8px 8px 0; padding: .75rem 1rem; }
.mensagem-erro { background: #fbf0f2; border-left: 4px solid var(--vermelho); border-radius: 0 8px 8px 0; padding: .75rem 1rem; }