/**
 * Quem dirige o seu agrupamento? — estilos próprios.
 *
 * Carregado DEPOIS do ../assets/css/style1.css. Segue o desenho do BI da
 * escola (escola/assets/escola.css): faixa preta onde se faz alguma coisa,
 * cartões brancos sobre papel, letra grande (base 19 px, nada abaixo de
 * ~18 px), porque quem lê são sobretudo professores mais velhos.
 *
 * Cores dos estados: verde = confirmado, azul = falta só a data, âmbar = por
 * confirmar, laranja = não sabemos, violeta = CAP. Cada uma tem a versão
 * clara (fundo dos selos) e a forte (barra e texto).
 */

:root {
    --tinta: #212529;
    --suave: #5c636a;
    --linha: #e9ecef;
    --papel: #f8f6f1;
    --ambar: #fdf0d5;
    --ambar-forte: #b8860b;

    --e-confirmado: #1f7a37;
    --e-confirmado-claro: #d8efdf;
    --e-nome_confirmado: #2b6cb0;
    --e-nome_confirmado-claro: #dbe7fb;
    --e-a_confirmar: #a87400;
    --e-a_confirmar-claro: #fdf0d5;
    --e-desconhecido: #c4532d;
    --e-desconhecido-claro: #fde3d1;
    --e-cap: #6f42c1;
    --e-cap-claro: #ebe1fa;
}

html { font-size: 118.75%; }   /* 19 px */

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

[hidden] { display: none !important; }

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

.lead { font-size: 1.35rem; }

.ligacoes-topo { font-size: .95rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

.intro p { font-size: 1.1rem; line-height: 1.6; max-width: 50rem; }

.nota, .ajuda, .opcional { font-size: .95rem; color: var(--suave); font-weight: 400; }
.ajuda { margin: .35rem 0 0; }
.obrigatorio { font-size: .95rem; color: var(--e-desconhecido); font-weight: 600; }

/* ── Como funciona (uma linha) ───────────────────────────────────── */
.passos {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.passos li { display: flex; align-items: center; gap: .55rem; }

.passo-n {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #ffc107;
    color: #111;
    font-family: 'Meta Pro', sans-serif;
    font-weight: 900;
    display: grid;
    place-items: center;
}

/* ── Faixa preta da pesquisa ─────────────────────────────────────── */
.onde-cabeca {
    background: #111;
    color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1.5rem 1.3rem;
}

.pesquisa-caixa { position: relative; }
.pesquisa-caixa i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--suave); font-size: 1.2rem; }
.pesquisa-caixa input { padding: .9rem 1rem .9rem 3.1rem; font-size: 1.25rem; border: 0; }

.progresso p { color: #d9d9d9; font-size: 1rem; line-height: 1.55; }
.progresso strong { color: #fff; }

.barra-estados {
    display: flex;
    height: .9rem;
    border-radius: 6px;
    overflow: hidden;
    gap: 2px;
}

.ponto {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: -.05rem;
}

.onde-corpo {
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    padding: 1.4rem 1.5rem 1.6rem;
}

.estado-linha { font-size: 1.05rem; margin: 0 0 .8rem; }
.estado-linha .btn-link { font-size: inherit; }

.convite { font-size: 1.1rem; }
.convite .btn { font-size: 1rem; }

/* ── Lista de resultados ─────────────────────────────────────────── */
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.resultado {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto 1.2rem;
    align-items: center;
    gap: .4rem 1rem;
    text-align: left;
    background: #fff;
    border: 2px solid var(--linha);
    border-left: 6px solid var(--linha);
    border-radius: 12px;
    padding: .75rem 1rem;
    color: inherit;
    font-size: 1.05rem;
}

.resultado:hover, .resultado:focus-visible { border-color: var(--tinta); background: var(--papel); }
.resultado.e-confirmado { border-left-color: var(--e-confirmado); }
.resultado.e-nome_confirmado { border-left-color: var(--e-nome_confirmado); }
.resultado.e-a_confirmar { border-left-color: var(--e-a_confirmar); }
.resultado.e-desconhecido { border-left-color: var(--e-desconhecido); }
.resultado.e-cap { border-left-color: var(--e-cap); }

.resultado-nome { font-weight: 700; font-size: 1.15rem; }
.resultado-nome small { display: block; font-weight: 400; font-size: .95rem; color: var(--suave); }
.faltam { font-weight: 700; color: #9a3a18; white-space: nowrap; }
.completo { font-weight: 700; color: var(--e-confirmado); white-space: nowrap; }
.seta { color: var(--suave); }

.sem-resultados {
    background: var(--ambar);
    border: 1px dashed var(--ambar-forte);
    border-radius: 10px;
    padding: .8rem 1rem;
    font-weight: 600;
    margin: 0;
}

/* ── Ficha ───────────────────────────────────────────────────────── */
.ficha-topo h3 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.ficha-topo h3:focus { outline: none; }
.ficha-local { font-size: 1rem; color: var(--suave); margin: .25rem 0 .8rem; }
.voltar { font-size: 1rem; padding: 0; margin-bottom: .6rem; }

.falta {
    background: var(--ambar);
    border: 1px dashed var(--ambar-forte);
    border-radius: 10px;
    padding: .5rem .8rem;
    margin: 0 0 .8rem;
    font-size: 1rem;
}

.falta strong { color: #7a5a00; }

/* «O mandato 2022–2026 já terminou. X continua a dirigir?» */
.mandato-acabou {
    background: var(--ambar);
    border-left: 6px solid var(--ambar-forte);
    border-radius: 10px;
    padding: .9rem 1rem;
    margin: 0 0 1rem;
    font-size: 1.05rem;
}
.mandato-acabou p { margin-bottom: .7rem; }
.mandato-acabou .btn { font-size: 1rem; }

.sinais { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .95rem; color: var(--suave); margin-bottom: .8rem; }
.sinais .ja { color: var(--e-confirmado); font-weight: 600; }

.tabela-ficha {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: .6rem 0 1.4rem;
    font-size: 1.05rem;
}

.tabela-ficha thead th {
    font-family: 'Meta Pro', sans-serif;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--suave);
    padding: 0 .8rem .5rem;
    border-bottom: 2px solid var(--tinta);
}

.tabela-ficha tbody th, .tabela-ficha td {
    padding: .75rem .8rem;
    border-bottom: 1px solid var(--linha);
    vertical-align: middle;
}

.tabela-ficha tbody th { font-weight: 700; width: 24%; }
.tabela-ficha .valor { width: 26%; }
.tabela-ficha .marca-celula { width: 14rem; white-space: nowrap; }
.tabela-ficha .resposta { width: 36%; }
.tabela-ficha .vazio { color: var(--suave); }

.tabela-ficha tr.s-falta { background: #fff8f3; }

.marca { font-weight: 700; }
.marca-ok { color: var(--e-confirmado); }
.marca-confirmar { color: #7a5a00; }
.marca-falta { color: #9a3a18; }
.marca-opcional { color: var(--suave); font-weight: 600; }

.corrigir { font-size: 1rem; padding: 0; }

.como { margin-bottom: 1.2rem; }
.como legend { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }

.pilulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .5rem; }

.pilula {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    border: 2px solid var(--linha);
    border-radius: 10px;
    padding: .55rem .8rem;
    cursor: pointer;
    font-size: 1rem;
}

.pilula:has(input:checked) { border-color: var(--tinta); background: var(--papel); }
.pilula input { margin-top: .25rem; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }

.mais-info {
    border: 2px dashed var(--linha);
    border-radius: 10px;
    padding: .7rem 1rem;
    margin-bottom: 1.4rem;
}

.mais-info summary { font-weight: 700; cursor: pointer; font-size: 1.05rem; }

.enviar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.enviar-linha .btn { font-size: 1.15rem; padding: .7rem 1.6rem; }

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

.agradecimento { text-align: center; padding: 1.5rem .5rem; outline: none; }
.agradecimento i.fa-circle-check { font-size: 3rem; color: var(--e-confirmado); }
.agradecimento p { font-size: 1.15rem; margin: 1rem auto 0; max-width: 36rem; }

.selo {
    display: inline-block;
    border-radius: 999px;
    padding: .15rem .7rem;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

.selo-confirmado { background: var(--e-confirmado-claro); color: var(--e-confirmado); }
.selo-nome_confirmado { background: var(--e-nome_confirmado-claro); color: var(--e-nome_confirmado); }
.selo-a_confirmar { background: var(--e-a_confirmar-claro); color: #7a5a00; }
.selo-desconhecido { background: var(--e-desconhecido-claro); color: #9a3a18; }
.selo-cap { background: var(--e-cap-claro); color: var(--e-cap); }

/* ── Blocos finais ───────────────────────────────────────────────── */
.bloco-final {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    padding: 1.5rem;
    font-size: 1.05rem;
}

.geral summary { cursor: pointer; }
.privacidade { background: #f1f3f5; }

/* ── Telemóvel: a tabela passa a blocos, um por dado ─────────────── */
@media (max-width: 767.98px) {
    .onde-cabeca, .onde-corpo { padding-left: 1rem; padding-right: 1rem; }

    .resultado { grid-template-columns: 1fr 1.2rem; }
    .resultado-nome { grid-column: 1; }
    .resultado .seta { grid-column: 2; grid-row: 1 / span 3; }
    .resultado .selo, .faltam, .completo { grid-column: 1; justify-self: start; }

    .tabela-ficha thead { display: none; }
    .tabela-ficha, .tabela-ficha tbody { display: block; }
    .tabela-ficha tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .2rem .8rem;
        padding: .8rem .2rem;
        border-bottom: 1px solid var(--linha);
    }
    .tabela-ficha tr.s-falta { padding-left: .6rem; padding-right: .6rem; border-radius: 8px; }
    .tabela-ficha tbody th, .tabela-ficha td { display: block; width: auto !important; padding: 0; border: 0; }
    .tabela-ficha tbody th { grid-column: 1; }
    .tabela-ficha .marca-celula { grid-column: 2; grid-row: 1; text-align: right; }
    .tabela-ficha .valor { grid-column: 1 / -1; font-weight: 600; }
    .tabela-ficha .sem-valor { display: none; }
    .tabela-ficha .resposta { grid-column: 1 / -1; margin-top: .3rem; }

    .enviar-linha .btn { width: 100%; }
}