/* =========================================================================
   Canal de Denúncias — sistema visual
   -------------------------------------------------------------------------
   Sem pedidos a terceiros: nenhuma fonte, folha de estilo ou ícone vem de
   fora. Num canal anónimo, cada pedido externo seria mais uma entidade a
   ver o IP de quem denuncia. Os ícones são SVG inline nas vistas.

   Paleta construída a partir do #8A6A4F da marca Aveleda.
   ========================================================================= */

:root {
    --marca: #8A6A4F;
    --marca-escura: #6E5340;
    --marca-clara: #A98A6E;
    --marca-vestigio: rgba(138, 106, 79, .08);

    --tinta: #2A2521;
    --tinta-suave: #6B6259;
    --tinta-tenue: #9A918C;

    --pergaminho: #FAF8F5;
    --papel: #FFFFFF;
    --linha: #E8E2DA;
    --linha-forte: #D6CDC1;

    --musgo: #5F7355;
    --musgo-vestigio: rgba(95, 115, 85, .10);
    --barro: #A8524A;
    --barro-vestigio: rgba(168, 82, 74, .09);

    --raio: 14px;
    --raio-pequeno: 9px;
    --sombra-suave: 0 1px 2px rgba(42, 37, 33, .04), 0 8px 24px rgba(42, 37, 33, .06);
    --sombra-elevada: 0 2px 4px rgba(42, 37, 33, .05), 0 16px 40px rgba(42, 37, 33, .10);

    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-codigo: "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, monospace;

    --largura-leitura: 760px;
}

/* ---------- base ---------- */

body {
    background: var(--pergaminho);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Halo quente muito ténue no topo, para o fundo não ler como chapa lisa. */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 420px;
    background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(138, 106, 79, .07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.pd-conteudo {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--largura-leitura);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.pd-conteudo--largo {
    max-width: 940px;
}

/* ---------- tipografia ---------- */

.pd-titulo {
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--tinta);
    margin: 0 0 .6rem;
}

.pd-titulo strong {
    font-weight: 600;
}

.pd-subtitulo {
    font-size: 1.02rem;
    color: var(--tinta-suave);
    margin: 0;
    max-width: 56ch;
}

.pd-sobretitulo {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--marca);
    margin: 0 0 .75rem;
}

.pd-cabecalho {
    margin-bottom: 2rem;
}

.pd-cabecalho--centro {
    text-align: center;
}

.pd-cabecalho--centro .pd-subtitulo {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- navbar ---------- */

.pd-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 248, 245, .78);
    backdrop-filter: saturate(170%) blur(14px);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    border-bottom: 1px solid var(--linha);
}

.pd-navbar__interior {
    max-width: 1100px;
    margin: 0 auto;
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pd-marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--tinta);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -.01em;
    text-decoration: none;
}

.pd-marca:hover {
    color: var(--marca-escura);
    text-decoration: none;
}

.pd-marca__selo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--marca);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pd-navbar__links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.pd-navlink {
    color: var(--tinta-suave);
    font-size: .85rem;
    font-weight: 500;
    padding: .35rem .7rem;
    border-radius: .45rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.pd-navlink:hover {
    background: var(--marca-vestigio);
    color: var(--tinta);
    text-decoration: none;
}

/* ---------- cartões ---------- */

.pd-cartao {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-suave);
    padding: 1.75rem;
}

.pd-cartao + .pd-cartao {
    margin-top: 1.25rem;
}

.pd-cartao__titulo {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .3rem;
}

.pd-cartao__nota {
    font-size: .88rem;
    color: var(--tinta-suave);
    margin: 0 0 1.4rem;
}

/* ---------- escolhas em cartão (anónima / confidencial, home) ---------- */

.pd-escolhas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.pd-escolha {
    display: block;
    text-align: left;
    width: 100%;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.35rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pd-escolha:hover {
    border-color: var(--marca-clara);
    box-shadow: var(--sombra-elevada);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.pd-escolha.active,
.pd-escolha[aria-pressed="true"] {
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-vestigio), var(--sombra-suave);
}

.pd-escolha__icone {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--marca-vestigio);
    color: var(--marca);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}

.pd-escolha__nome {
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 .25rem;
    letter-spacing: -.01em;
}

.pd-escolha__desc {
    font-size: .85rem;
    color: var(--tinta-suave);
    margin: 0;
    line-height: 1.5;
}

/* ---------- passos ---------- */

.pd-passos {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
    padding: 0;
    list-style: none;
}

.pd-passo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--tinta-tenue);
    font-weight: 500;
    white-space: nowrap;
}

.pd-passo__num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--linha-forte);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    flex: 0 0 auto;
    background: var(--papel);
}

.pd-passo.is-ativo {
    color: var(--tinta);
}

.pd-passo.is-ativo .pd-passo__num {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.pd-passo.is-feito .pd-passo__num {
    background: var(--marca-vestigio);
    border-color: var(--marca-clara);
    color: var(--marca-escura);
}

.pd-passo__linha {
    flex: 1 1 auto;
    height: 1px;
    background: var(--linha-forte);
    min-width: 12px;
}

/* ---------- campos ---------- */

.pd-campo {
    margin-bottom: 1.35rem;
}

.pd-campo:last-child {
    margin-bottom: 0;
}

.pd-rotulo {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: .4rem;
    letter-spacing: -.005em;
}

.pd-rotulo__opcional {
    font-weight: 400;
    color: var(--tinta-tenue);
    font-size: .8rem;
}

.pd-rotulo__obrigatorio {
    color: var(--marca);
    margin-left: .15rem;
}

.pd-ajuda {
    display: block;
    font-size: .8rem;
    color: var(--tinta-suave);
    margin-top: .4rem;
    line-height: 1.5;
}

.pd-input,
.pd-select,
.pd-textarea {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: .93rem;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
    padding: .6rem .8rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
}

.pd-textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.pd-input:focus,
.pd-select:focus,
.pd-textarea:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-vestigio);
}

.pd-input::placeholder,
.pd-textarea::placeholder {
    color: #B7AFA5;
}

/* Seta do select desenhada em CSS, para não depender de imagem externa. */
.pd-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%),
                      linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}

/* Campo por preencher, assinalado ao tentar avançar. O scroll-margin evita que
   o campo fique escondido debaixo da navbar quando o levamos ao ecrã. */
.pd-campo {
    scroll-margin-top: 90px;
}

.pd-campo.tem-erro .pd-input,
.pd-campo.tem-erro .pd-select,
.pd-campo.tem-erro .pd-textarea,
.pd-campo.tem-erro .pd-ficheiro {
    border-color: var(--barro);
    background: var(--barro-vestigio);
}

.pd-campo.tem-erro .pd-input:focus,
.pd-campo.tem-erro .pd-select:focus,
.pd-campo.tem-erro .pd-textarea:focus {
    border-color: var(--barro);
    box-shadow: 0 0 0 3px var(--barro-vestigio);
}

.pd-campo.tem-erro .pd-rotulo {
    color: #7E3A34;
}

.pd-erro {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 500;
    color: #7E3A34;
    margin-top: .4rem;
}

.pd-erro::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--barro);
    /* ponto de exclamação desenhado com gradientes, sem imagem externa */
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-size: 1.5px 4px, 1.5px 1.5px;
    background-position: center 3px, center 8.5px;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 13px var(--barro);
}

.pd-input.border-success,
.pd-input.border-danger {
    box-shadow: none;
}

.pd-input.border-success {
    border-color: var(--musgo) !important;
}

.pd-input.border-danger {
    border-color: var(--barro) !important;
}

/* ficheiro */
.pd-ficheiro {
    display: block;
    width: 100%;
    font-size: .88rem;
    color: var(--tinta-suave);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-pequeno);
    padding: .85rem;
    background: var(--pergaminho);
    cursor: pointer;
}

.pd-ficheiro:hover {
    border-color: var(--marca-clara);
}

.pd-ficheiro::file-selector-button {
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--linha-forte);
    border-radius: .4rem;
    padding: .35rem .7rem;
    margin-right: .75rem;
    cursor: pointer;
}

/* rádio em linha */
.pd-radios {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pd-radio {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    cursor: pointer;
    margin: 0;
}

.pd-radio input {
    width: 17px;
    height: 17px;
    accent-color: var(--marca);
    margin: 0;
    cursor: pointer;
}

/* ---------- botões ---------- */

.pd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.005em;
    padding: .62rem 1.25rem;
    border-radius: var(--raio-pequeno);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.pd-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--marca-vestigio);
}

.pd-btn--principal {
    background: var(--marca);
    color: #fff;
}

.pd-btn--principal:hover {
    background: var(--marca-escura);
    color: #fff;
    text-decoration: none;
}

.pd-btn--discreto {
    background: var(--papel);
    color: var(--tinta);
    border-color: var(--linha-forte);
}

.pd-btn--discreto:hover {
    background: var(--pergaminho);
    border-color: var(--marca-clara);
    color: var(--tinta);
    text-decoration: none;
}

.pd-btn--largo {
    width: 100%;
}

.pd-acoes {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}

.pd-acoes--fim {
    justify-content: flex-end;
}

/* ---------- avisos ---------- */

.pd-aviso {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    border-radius: var(--raio-pequeno);
    padding: .9rem 1rem;
    font-size: .88rem;
    line-height: 1.55;
    border: 1px solid;
}

.pd-aviso__icone {
    flex: 0 0 auto;
    margin-top: 1px;
}

.pd-aviso--erro {
    background: var(--barro-vestigio);
    border-color: rgba(168, 82, 74, .25);
    color: #7E3A34;
}

.pd-aviso--calmo {
    background: var(--marca-vestigio);
    border-color: rgba(138, 106, 79, .2);
    color: #5C4633;
}

.pd-aviso--bom {
    background: var(--musgo-vestigio);
    border-color: rgba(95, 115, 85, .25);
    color: #41503A;
}

/* ---------- chave de acesso ---------- */

.pd-chave {
    text-align: center;
    padding: 2.5rem 1.75rem;
}

.pd-chave__selo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--musgo-vestigio);
    color: var(--musgo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pd-chave__codigo {
    font-family: var(--fonte-codigo);
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.1rem);
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--tinta);
    background: var(--pergaminho);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-pequeno);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    word-break: break-all;
    user-select: all;
}

/* ---------- resumo / revisão ---------- */

.pd-resumo {
    margin: 0;
}

.pd-resumo__linha {
    display: grid;
    grid-template-columns: minmax(150px, 34%) 1fr;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--linha);
}

.pd-resumo__linha:last-child {
    border-bottom: 0;
}

.pd-resumo__rotulo {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tinta-suave);
    margin: 0;
}

.pd-resumo__valor {
    font-size: .92rem;
    color: var(--tinta);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.pd-resumo__valor:empty::before {
    content: "—";
    color: var(--tinta-tenue);
}

@media (max-width: 560px) {
    .pd-resumo__linha {
        grid-template-columns: 1fr;
        gap: .15rem;
    }
}

/* ---------- estado da denúncia ---------- */

.pd-estado {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--marca-vestigio);
    color: var(--marca-escura);
    border: 1px solid rgba(138, 106, 79, .2);
}

.pd-estado__ponto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- rodapé ---------- */

.pd-rodape {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    border-top: 1px solid var(--linha);
    background: rgba(255, 255, 255, .6);
    padding: 1.25rem;
    text-align: center;
    font-size: .82rem;
    color: var(--tinta-suave);
}

.pd-rodape a {
    color: var(--tinta-suave);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pd-rodape a:hover {
    color: var(--marca-escura);
}

/* ---------- entrada suave ---------- */

@media (prefers-reduced-motion: no-preference) {
    .pd-entra {
        animation: pd-entrada .45s cubic-bezier(.22, .61, .36, 1) both;
    }

    .pd-entra--2 { animation-delay: .07s; }
    .pd-entra--3 { animation-delay: .14s; }
}

@keyframes pd-entrada {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Acrescentos da migração para os Portais Externos
   -------------------------------------------------------------------------
   O portal antigo escondia blocos com jQuery e trazia espaçamentos em style=""
   nas vistas. Aqui os blocos escondem-se com o atributo hidden e os
   espaçamentos são classes, porque a CSP não admite estilos inline.
   ========================================================================= */

/* O portal antigo carregava o Bootstrap inteiro só por causa deste reset. Sem ele, a
   largura de 100% dos cartões e dos campos soma-se ao padding, e os dois cartões da
   entrada passavam por cima um do outro. */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

/* O logótipo é um JPEG de fundo branco. Sobre o creme da página lia-se como um
   retângulo por acabar, por isso passa a ser um selo assumido, na mesma linguagem
   dos cartões. */
.pd-logotipo {
    max-width: 180px;
    height: auto;
    margin-bottom: 1.75rem;
    padding: .9rem 1.2rem;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-suave);
}

/* Duas colunas encostadas liam-se como um bloco cortado ao meio. */
.pd-escolhas { gap: 1.25rem; }

/* O subtítulo da entrada ficava com linhas de comprimentos muito diferentes. */
.pd-cabecalho--centro .pd-subtitulo { max-width: 62ch; margin-inline: auto; text-wrap: balance; }

.pd-aviso--espaco { margin-top: 1.25rem; }
.pd-aviso--antes { margin-bottom: 1.5rem; }
.pd-aviso--chave { margin-top: 1.75rem; text-align: left; }

.pd-subtitulo--centro { margin: 0 auto; }
.pd-acoes--centro { justify-content: center; }
.pd-ajuda--espaco { margin-top: 1rem; }

/* Erro vindo do servidor: aparece sem a pessoa ter tocado no campo. */
.pd-erro:empty { display: none; }

/* Sem erros, o resumo de validação fica na página com uma lista vazia lá dentro —
   via-se uma caixa rosa com um ponto. Só aparece quando tem mesmo alguma coisa. */
.validation-summary-valid { display: none !important; }
.pd-aviso ul { margin: 0; padding-left: 1.1rem; }
.pd-aviso li { margin: 0; }

/* O código de acesso tem 12 carateres e é copiado à mão: em monoespaçado e com as
   letras afastadas, confere-se de relance. */
.pd-input--codigo {
    font-family: var(--fonte-codigo);
    font-size: 1.05rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.pd-input--codigo::placeholder { letter-spacing: .08em; text-transform: none; }

/* Foco visível em tudo o que é clicável: quem navega por teclado tem de saber onde está. */
.pd-escolha:focus-visible,
.pd-btn:focus-visible,
.pd-navlink:focus-visible,
.pd-marca:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}

/* Num telemóvel a barra de topo ficava com o nome do canal partido em duas linhas. */
@media (max-width: 560px) {
    .pd-navbar__interior { padding: .6rem .9rem; gap: .5rem; }
    .pd-marca { font-size: .9rem; white-space: nowrap; }
    .pd-marca__selo { flex: none; }
    .pd-navbar__links { gap: 0; }
    .pd-navlink { font-size: .8rem; padding: .35rem .5rem; white-space: nowrap; }
    /* O link para o site da Aveleda é o menos importante dos três. */
    .pd-navbar__links .pd-navlink:last-child { display: none; }
}

/* Campo invisível usado para copiar em browsers sem a API de clipboard. */
.pd-copiar-temporario { position: fixed; top: 0; left: -9999px; opacity: 0; }