/*
  Estilos de toda a app (Android e web). As cores, tamanhos de letra e espaçamentos só existem aqui, como
  variáveis; os componentes usam classes, nunca valores soltos.
  Sistema visual (021): maqueta docs/ideias/referencias/maqueta-visual-021.html; letra Nunito e ícones Lucide
  incluídos na app (wwwroot/fonts; ícones em linha, Servicos/IconesLucide.cs). Contraste de texto ≥ 4,5:1 em claro e escuro.
*/

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("../fonts/nunito/nunito-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("../fonts/nunito/nunito-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Modo claro (e .tema-claro, para o Guia visual mostrar os dois lado a lado) */
:root,
.tema-claro {
    /* Marca e destaque */
    --cor-primaria: #2E7D32;
    --cor-primaria-escura: #1B5E20;
    --cor-primaria-suave: #EDF6EE;
    --cor-primaria-texto: #FFFFFF;
    --cor-destaque: #C2410C;
    --cor-destaque-suave: #FFF0E6;
    --cor-destaque-texto: #FFFFFF;
    --cor-secundaria: #F9A825;
    --cor-branco: #FFFFFF;

    /* Estados (sempre com ícone ou texto, nunca só a cor) */
    --cor-sucesso: #2E7D32;
    --cor-aviso: #8F5600;
    --cor-perigo: #C62828;
    --cor-perigo-suave: #FDECEC;
    --cor-info: #1565C0;
    --cor-info-suave: #E5EEF9;

    /* Fundos e texto */
    --cor-fundo: #F4F6F1;
    --cor-superficie: #FFFFFF;
    --cor-superficie-2: #F0F2EC;
    --cor-texto: #1B1F1B;
    --cor-texto-secundario: #5B645B;
    --cor-contorno: #E2E6DD;
    --cor-sombra-dialogo: rgba(0, 0, 0, 0.45);
    --cor-esqueleto: #E6E9E2;
    --sombra: 0 1px 2px rgba(20, 30, 20, 0.06), 0 4px 14px rgba(20, 30, 20, 0.06);

    /* Secções (etiquetas, avatares e barras); o texto sobre os Lobitos é escuro */
    --cor-lobitos: #F2B705;
    --cor-exploradores: #2E7D32;
    --cor-pioneiros: #1565C0;
    --cor-caminheiros: #C62828;
    --cor-agrupamento: var(--cor-primaria);
    --cor-texto-sobre-seccao: #FFFFFF;
    --cor-texto-sobre-lobitos: #1B1F1B;

    /* Áreas FACEIS (como no manual do CNE) */
    --cor-area-fisico: #43A047;
    --cor-area-afetivo: #E53935;
    --cor-area-carater: #283593;
    --cor-area-espiritual: #8E24AA;
    --cor-area-intelectual: #FB8C00;
    --cor-area-social: #F9C80E;

    /* Medalhas da liga 🥉🥈🥇💎: a cor do enfeite e a do texto das etiquetas */
    --cor-ouro: #C99A06;
    --cor-prata: #8A9299;
    --cor-bronze: #A0622D;
    --cor-ouro-texto: #7A5C00;
    --cor-prata-texto: #5F676E;
    --cor-bronze-texto: #8A5224;
    --cor-ouro-suave: rgba(201, 154, 6, 0.15);
    --cor-prata-suave: rgba(138, 146, 153, 0.18);
    --cor-bronze-suave: rgba(160, 98, 45, 0.15);
    --cor-platina: #3F8FA6;
    --cor-platina-texto: #1F5E70;
    --cor-platina-suave: rgba(63, 143, 166, 0.15);

    /* QR: escuro sobre claro também no modo escuro, para as câmaras o lerem */
    --cor-qr-modulo: #000000;
    --cor-qr-fundo: #FFFFFF;

    /* Avisos (sem rede, registos não aceites) */
    --cor-aviso-fundo: #FFF4D6;
    --cor-aviso-texto: #5C4300;
    --cor-aviso-contorno: #F2C14E;

    /* Gráficos (012): séries por equipa na ordem fixa (validadas para daltonismo), grelha, linhas e barras discretas */
    --cor-serie-1: #2A78D6;
    --cor-serie-2: #EB6834;
    --cor-serie-3: #1BAF7A;
    --cor-serie-4: #EDA100;
    --cor-serie-5: #E87BA4;
    --cor-serie-6: #008300;
    --cor-serie-7: #6250D6;
    --cor-serie-8: #E34948;
    --cor-grelha: #E4E6E1;
    --cor-discreta: #B3B9B1;
}

/* Modo escuro (e .tema-escuro) */
.tema-escuro {
    --cor-primaria: #5CB860;
    --cor-primaria-escura: #3E9443;
    --cor-primaria-suave: #1C2E1D;
    --cor-primaria-texto: #0F120F;
    --cor-destaque: #FF8A3D;
    --cor-destaque-suave: #3A2416;
    --cor-destaque-texto: #0F120F;
    --cor-sucesso: #5CB860;
    --cor-aviso: #F0B44C;
    --cor-perigo: #EF6B6B;
    --cor-perigo-suave: #3A1C1C;
    --cor-info: #64A0F0;
    --cor-info-suave: #18273A;
    --cor-fundo: #0F120F;
    --cor-superficie: #181C18;
    --cor-superficie-2: #20251F;
    --cor-texto: #EAEDE7;
    --cor-texto-secundario: #A3ABA2;
    --cor-contorno: #2B312A;
    --cor-sombra-dialogo: rgba(0, 0, 0, 0.65);
    --cor-esqueleto: #262C25;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cor-exploradores: #5CB860;
    --cor-pioneiros: #64A0F0;
    --cor-caminheiros: #EF6B6B;
    --cor-texto-sobre-seccao: #0F120F;
    --cor-area-carater: #7986CB;
    --cor-ouro-texto: #D9AE2B;
    --cor-platina-texto: #7FCBDD;
    --cor-prata-texto: #AEB5BB;
    --cor-bronze-texto: #C8895A;
    --cor-aviso-fundo: #3A2E0A;
    --cor-aviso-texto: #FFE3A3;
    --cor-aviso-contorno: #8A6A1C;
    --cor-serie-1: #3987E5;
    --cor-serie-2: #D95926;
    --cor-serie-3: #199E70;
    --cor-serie-4: #C98500;
    --cor-serie-5: #D55181;
    --cor-serie-6: #008300;
    --cor-serie-7: #9085E9;
    --cor-serie-8: #E66767;
    --cor-grelha: #2E332E;
    --cor-discreta: #5B625B;
}

@media (prefers-color-scheme: dark) {
    :root:not(.tema-claro) {
        --cor-primaria: #5CB860;
        --cor-primaria-escura: #3E9443;
        --cor-primaria-suave: #1C2E1D;
        --cor-primaria-texto: #0F120F;
        --cor-destaque: #FF8A3D;
        --cor-destaque-suave: #3A2416;
        --cor-destaque-texto: #0F120F;
        --cor-sucesso: #5CB860;
        --cor-aviso: #F0B44C;
        --cor-perigo: #EF6B6B;
        --cor-perigo-suave: #3A1C1C;
        --cor-info: #64A0F0;
        --cor-info-suave: #18273A;
        --cor-fundo: #0F120F;
        --cor-superficie: #181C18;
        --cor-superficie-2: #20251F;
        --cor-texto: #EAEDE7;
        --cor-texto-secundario: #A3ABA2;
        --cor-contorno: #2B312A;
        --cor-sombra-dialogo: rgba(0, 0, 0, 0.65);
        --cor-esqueleto: #262C25;
        --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
        --cor-exploradores: #5CB860;
        --cor-pioneiros: #64A0F0;
        --cor-caminheiros: #EF6B6B;
        --cor-texto-sobre-seccao: #0F120F;
        --cor-area-carater: #7986CB;
        --cor-ouro-texto: #D9AE2B;
        --cor-platina-texto: #7FCBDD;
        --cor-prata-texto: #AEB5BB;
        --cor-bronze-texto: #C8895A;
        --cor-aviso-fundo: #3A2E0A;
        --cor-aviso-texto: #FFE3A3;
        --cor-aviso-contorno: #8A6A1C;
        --cor-serie-1: #3987E5;
        --cor-serie-2: #D95926;
        --cor-serie-3: #199E70;
        --cor-serie-4: #C98500;
        --cor-serie-5: #D55181;
        --cor-serie-6: #008300;
        --cor-serie-7: #9085E9;
        --cor-serie-8: #E66767;
        --cor-grelha: #2E332E;
        --cor-discreta: #5B625B;
    }
}

/* Escalas (iguais em claro e escuro) */
:root {
    /* Espaçamento */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;

    /* Letra */
    --letra: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --l-pequena: 13px;
    --l-base: 16px;
    --l-media: 18px;
    --l-grande: 22px;
    --l-titulo: 28px;
    --l-numero: 34px;

    /* Cantos e medidas */
    --raio: 16px;
    --raio-medio: 12px;
    --raio-pequeno: 10px;
    --toque: 44px;
    --altura-cabecalho: 56px;
    --altura-separadores: 64px;
    --largura-maxima: 560px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--letra);
    font-size: var(--l-base);
    line-height: 1.45;
    /* o browser não recarrega a app ao puxar para baixo: o puxar para atualizar é da app (026) */
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
}

/* Sem scroll horizontal. No body é clip e não hidden (027): hidden fazia do body uma caixa com scroll (sem nada para
   deslocar) e, com o overscroll-behavior: contain, o gesto ficava preso nela e a página não descia (dedo e roda). */
html {
    overflow-x: hidden;
}

body {
    overflow-x: clip;
}

button, input, select, textarea {
    font-family: inherit;
}

h1, h2, h3, p {
    margin: 0;
    overflow-wrap: anywhere;
}

a {
    color: var(--cor-primaria);
}

:focus-visible {
    outline: 3px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* Ícones (Lucide, em linha): herdam a cor do texto */
.ic {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ic.pequeno {
    width: 18px;
    height: 18px;
}

/* Nome de ícone desconhecido (só em Debug aparece este quadrado tracejado; em Release fica vazio) */
.ic.desconhecido rect {
    stroke-dasharray: 3 2;
}

/* ===== Estrutura ===== */

/* Cabeçalho e, por baixo, o aviso «Sem rede»: ficam presos no topo. */
.topo {
    position: sticky;
    top: 0;
    z-index: 10;
}

.cabecalho {
    display: flex;
    align-items: center;
    gap: var(--e1);
    min-height: var(--altura-cabecalho);
    padding: env(safe-area-inset-top) var(--e2) 0 var(--e4);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    border-bottom: 1px solid var(--cor-contorno);
}

.cabecalho h1 {
    flex: 1;
    min-width: 0;
    font-size: var(--l-grande);
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabecalho .voltar,
.cabecalho .acao-cabecalho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--toque);
    min-height: var(--toque);
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--cor-texto);
    text-decoration: none;
    cursor: pointer;
}

.cabecalho .voltar {
    margin-left: calc(-1 * var(--e3));
}

.conteudo {
    width: 100%;
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.com-separadores .conteudo {
    padding-bottom: calc(var(--altura-separadores) + var(--e5) + env(safe-area-inset-bottom));
}

/* Separadores em baixo: ícone + texto; o ativo com o ícone num fundo verde-claro */
.barra-separadores {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 6px var(--e1) calc(6px + env(safe-area-inset-bottom));
    background: var(--cor-superficie);
    border-top: 1px solid var(--cor-contorno);
}

.barra-separadores nav {
    display: flex;
    width: 100%;
    max-width: var(--largura-maxima);
}

.barra-separadores a {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: var(--e1) 2px;
    border-radius: var(--raio-medio);
    color: var(--cor-texto-secundario);
    text-decoration: none;
    font-size: var(--l-pequena);
    font-weight: 700;
    text-align: center;
}

.barra-separadores .icone-nav {
    display: grid;
    place-items: center;
    width: 52px;
    height: 30px;
    border-radius: 999px;
}

.barra-separadores a.active {
    color: var(--cor-primaria);
}

.barra-separadores a.active .icone-nav {
    background: var(--cor-primaria-suave);
}

/* ===== Texto ===== */

.titulo {
    font-size: var(--l-grande);
    font-weight: 800;
}

.subtitulo,
.sub {
    font-size: var(--l-pequena);
    color: var(--cor-texto-secundario);
}

.cabecalho-seccao {
    margin-top: var(--e2);
    font-size: var(--l-media);
    font-weight: 800;
}

.cabecalho-grupo {
    margin-top: var(--e1);
    font-size: var(--l-pequena);
    font-weight: 800;
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rotulo {
    display: block;
    margin-bottom: var(--e1);
    font-size: var(--l-pequena);
    font-weight: 700;
    color: var(--cor-texto-secundario);
}

.numero-grande {
    font-size: var(--l-numero);
    font-weight: 800;
    line-height: 1.1;
    color: var(--cor-primaria);
}

.codigo-grande {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cor-primaria);
    overflow-wrap: anywhere;
}

.ajuda {
    font-size: var(--l-pequena);
    color: var(--cor-texto-secundario);
}

.erro {
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-perigo);
}

/* Estado vazio: uma frase (e, se fizer sentido, a ação para começar) */
.vazio,
.estado-vazio {
    margin: var(--e5) 0;
    text-align: center;
    font-size: 14px;
    color: var(--cor-texto-secundario);
}

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e3);
}

.estado-vazio .icone-caixa {
    width: 56px;
    height: 56px;
    border-radius: 999px;
}

/* ===== Cartões e listas ===== */

.cartao {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e4);
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
}

.cartao h3,
.cartao-titulo h3 {
    font-size: var(--l-media);
    font-weight: 800;
}

.cartao-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
}

.cartao-titulo > div {
    min-width: 0;
}

/* «A decorrer agora»: o cartão principal do Início */
.cartao.destaque-agora {
    border: none;
    background: var(--cor-primaria);
    color: var(--cor-primaria-texto);
}

.destaque-agora .subtitulo,
.destaque-agora .sub {
    color: inherit;
    opacity: 0.9;
}

.agora-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--l-pequena);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ponto-vivo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulsar 1.6s infinite;
}

@keyframes pulsar {
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .ponto-vivo, .esqueleto { animation: none; }
}

.lista {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.item {
    display: flex;
    align-items: stretch;
    gap: var(--e3);
    width: 100%;
    min-height: 56px;
    padding: var(--e4);
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra);
    font: inherit;
    text-align: left;
    text-decoration: none;
}

button.item, a.item {
    cursor: pointer;
}

/* Dentro de um cartão: sem fundo nem margem própria */
.item.embutido {
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.item .corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item .nome {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.item .acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-top: var(--e2);
}

/* Linha de lista: ícone ou avatar, título e subtítulo, valor ou seta à direita (separadas por uma linha) */
.linha-lista {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 56px;
    padding: var(--e3) 0;
    border-top: 1px solid var(--cor-contorno);
    color: inherit;
    text-decoration: none;
}

.linha-lista:first-child {
    border-top: none;
}

.cartao > .linha-lista:first-child,
.cartao > .cartao-titulo + .linha-lista {
    border-top: none;
    padding-top: 0;
}

.cartao > .linha-lista:last-child {
    padding-bottom: 0;
}

.linha-lista .meio {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.linha-lista .titulo-linha {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.linha-lista .valor {
    flex: none;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.linha-lista .seta {
    color: var(--cor-texto-secundario);
}

.icone-caixa {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--raio-medio);
    background: var(--cor-superficie-2);
    color: var(--cor-texto-secundario);
}

.contador {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--e2);
    border-radius: 999px;
    background: var(--cor-destaque);
    color: var(--cor-destaque-texto);
    font-size: var(--l-pequena);
    font-weight: 800;
}

/* Avatar com iniciais e a cor da secção */
.avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cor-agrupamento);
    color: var(--cor-texto-sobre-seccao);
    font-weight: 800;
}

.avatar.seccao-lobitos {
    color: var(--cor-texto-sobre-lobitos);
}

.avatar.chefe {
    background: var(--cor-primaria);
    color: var(--cor-primaria-texto);
}

/* Saudação do Início */
.saudacao {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e2) 0 var(--e1);
}

.saudacao h2 {
    font-size: var(--l-grande);
    font-weight: 800;
}

/* Dois cartões lado a lado (ex.: ofensiva e noites) */
.par {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e3);
}

.numero {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--l-numero);
    font-weight: 800;
    line-height: 1;
}

.numero small {
    font-size: var(--l-pequena);
    font-weight: 600;
    color: var(--cor-texto-secundario);
}

.barra-cor {
    flex: none;
    width: 6px;
    border-radius: 3px;
    background: var(--cor-agrupamento);
}

.seccao-lobitos { background: var(--cor-lobitos); }
.seccao-exploradores { background: var(--cor-exploradores); }
.seccao-pioneiros { background: var(--cor-pioneiros); }
.seccao-caminheiros { background: var(--cor-caminheiros); }
.seccao-agrupamento { background: var(--cor-agrupamento); }

/* Etiqueta («chip») de estado: texto (e ícone) sobre um fundo suave */
.etiqueta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--e1);
    padding: 3px 10px;
    border: none;
    border-radius: 999px;
    background: var(--cor-superficie-2);
    color: var(--cor-texto-secundario);
    font-size: var(--l-pequena);
    font-weight: 800;
    white-space: nowrap;
}

.etiqueta.destaque,
.etiqueta.ok { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.etiqueta.curso { background: var(--cor-info-suave); color: var(--cor-info); }
.etiqueta.perigo { background: var(--cor-perigo-suave); color: var(--cor-perigo); }
.etiqueta.aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.etiqueta.ouro { background: var(--cor-ouro-suave); color: var(--cor-ouro-texto); }
.etiqueta.prata { background: var(--cor-prata-suave); color: var(--cor-prata-texto); }
.etiqueta.bronze { background: var(--cor-bronze-suave); color: var(--cor-bronze-texto); }
.etiqueta.platina { background: var(--cor-platina-suave); color: var(--cor-platina-texto); }

.linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
}

.separador {
    height: 1px;
    margin: var(--e1) 0;
    background: var(--cor-contorno);
}

/* ===== Botões ===== */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 48px;
    padding: 0 var(--e4);
    border: none;
    border-radius: var(--raio-medio);
    background: var(--cor-primaria);
    color: var(--cor-primaria-texto);
    font: inherit;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.botao:disabled {
    opacity: 0.5;
    cursor: default;
}

.botao.secundario {
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
}

.botao.texto {
    background: transparent;
    color: var(--cor-primaria);
}

.botao.perigo {
    background: var(--cor-perigo-suave);
    color: var(--cor-perigo);
}

.botao.perigo-cheio {
    background: var(--cor-perigo);
    color: var(--cor-branco);
}

/* Sobre o cartão verde «A decorrer agora» */
.botao.invertido {
    background: var(--cor-primaria-texto);
    color: var(--cor-primaria);
}

.botao.pequeno {
    min-height: var(--toque);
    padding: 0 var(--e3);
    font-size: 14px;
}

.botao.largo {
    width: 100%;
}

/* «A trabalhar…»: o botão fica desativado com um círculo a rodar */
.botao .a-trabalhar {
    width: 18px;
    height: 18px;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: girar 0.9s linear infinite;
}

.botoes {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    margin-top: var(--e2);
}

.ligacao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--toque);
    padding: 0 var(--e1);
    border: none;
    background: transparent;
    color: var(--cor-primaria);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* ===== Formulários ===== */

.campo {
    display: flex;
    flex-direction: column;
}

.campo input,
.campo select {
    width: 100%;
    min-height: 48px;
    padding: var(--e2) var(--e3);
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio-medio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
}

.campo input:disabled,
.campo select:disabled {
    opacity: 0.6;
}

.campo input:focus,
.campo select:focus {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -1px;
}

.campo .erro,
.campo .ajuda {
    margin-top: var(--e1);
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.entrada {
    min-height: 100vh;
    justify-content: center;
}

.campo textarea {
    width: 100%;
    min-height: 96px;
    padding: var(--e2) var(--e3);
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio-medio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    resize: vertical;
}

.campo textarea:focus {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -1px;
}

/* Caixa de escolha com o texto ao lado (secções, «Conta para a assiduidade», datas das reuniões…) */
.escolha {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--toque);
    cursor: pointer;
}

.escolha input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--cor-primaria);
}

.escolha.desativada {
    color: var(--cor-texto-secundario);
    cursor: default;
}

.escolhas {
    display: flex;
    flex-direction: column;
}

/* ===== Atividades ===== */

/* Separadores internos (ex.: Próximas / A decorrer / Passadas): «pílulas»; a ativa a cheio */
.separadores-lista {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.separadores-lista button {
    flex: 1 0 auto;
    min-height: var(--toque);
    padding: 0 14px;
    border: 1px solid var(--cor-contorno);
    border-radius: 999px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.separadores-lista button.ativo {
    border-color: transparent;
    background: var(--cor-texto);
    color: var(--cor-fundo);
}

.icone-tipo {
    flex: none;
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--cor-primaria);
}

.cancelada .nome {
    text-decoration: line-through;
    color: var(--cor-texto-secundario);
}

.aviso-sem-rede {
    padding: 6px var(--e4);
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso-texto);
    border-bottom: 1px solid var(--cor-aviso-contorno);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* «Última atualização: 23/10 às 14:05» por baixo do aviso (026) */
.aviso-sem-rede .ultima-atualizacao {
    display: block;
    font-weight: 400;
}

.cartao.aviso {
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso-texto);
    border: 1px solid var(--cor-aviso-contorno);
}

.cartao.aviso .botao {
    align-self: flex-end;
}

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cartao.destaque {
    border: 2px solid var(--cor-primaria);
}

.contadores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.contadores .cartao {
    align-items: center;
    padding: 12px 8px;
    text-align: center;
}

.contadores .numero-grande {
    font-size: 26px;
}

.linha-presenca {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linha-presenca .estado-presente { color: var(--cor-primaria); font-weight: 700; }
.linha-presenca .estado-justificada { color: var(--cor-texto-secundario); font-weight: 700; }
.linha-presenca .estado-falta { color: var(--cor-perigo); font-weight: 700; }

/* ===== Código da atividade (ecrã cheio) e QR ===== */

.ecra-cheio {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
    background: var(--cor-fundo);
    overflow-y: auto;
    text-align: center;
}

.ecra-cheio .fechar {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
}

.codigo-qr {
    width: min(80vw, 60vh, 420px);
    height: auto;
    padding: 12px;
    border-radius: var(--raio);
    background: var(--cor-qr-fundo);
}

.codigo-qr path {
    fill: var(--cor-qr-modulo);
}

.leitor-qr {
    width: 100%;
    max-height: 60vh;
    border-radius: var(--raio);
    background: var(--cor-qr-modulo);
    object-fit: cover;
}

/* ===== Carregamento e diálogos ===== */

/* Esqueletos enquanto os dados carregam (em vez de só um círculo a rodar) */
.esqueletos {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.esqueleto {
    border-radius: var(--raio);
    background: var(--cor-esqueleto);
    animation: brilhar 1.4s ease-in-out infinite;
}

.esqueleto.bloco {
    height: 88px;
}

.esqueleto.bloco.baixo {
    height: 56px;
}

.esqueleto.texto {
    height: 14px;
    border-radius: 7px;
}

@keyframes brilhar {
    50% { opacity: 0.55; }
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

.falha-carregamento {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    text-align: center;
}

/* Só em Debug: o erro verdadeiro por baixo de «Não foi possível carregar os dados.» */
.detalhes-tecnicos {
    width: 100%;
    text-align: left;
    font-size: 13px;
    color: var(--cor-texto-secundario);
}

.detalhes-tecnicos summary {
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

.detalhes-tecnicos pre {
    margin: 8px 0 0;
    padding: 8px;
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dialogo-fundo {
    position: fixed;
    inset: 0;
    z-index: 20;
    /* arrastar no fundo não desloca a página por trás (027) */
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--cor-sombra-dialogo);
}

.dialogo {
    width: 100%;
    max-width: 400px;
    /* um diálogo comprido faz scroll por dentro, sem deslocar a página por trás (027) */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--e4);
    padding: var(--e5);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
}

/* Puxar para atualizar (026): o círculo desce do topo enquanto se puxa e roda enquanto o ecrã atualiza */
.puxar {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border-radius: 50%;
    background: var(--cor-superficie);
    color: var(--cor-primaria);
    box-shadow: var(--sombra);
    opacity: 0;
    transform: translateY(calc(var(--puxado, 0px) - 48px));
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
}

.puxar.visivel {
    opacity: 1;
}

.puxar.a-puxar {
    transition: none;
}

.puxar svg {
    width: 24px;
    height: 24px;
    transform: rotate(var(--rodar, 0deg));
}

.puxar circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 36 60;
    opacity: 0.6;
}

.puxar.pronto circle,
.puxar.a-atualizar circle {
    opacity: 1;
}

.puxar.a-atualizar svg {
    animation: puxar-rodar 0.8s linear infinite;
}

@keyframes puxar-rodar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .puxar.a-atualizar svg { animation-duration: 2.4s; }
}

/* Mensagem temporária («Guardado») no fundo do ecrã, por cima dos separadores */
.mensagem-temporaria {
    position: fixed;
    left: 50%;
    bottom: calc(var(--altura-separadores) + var(--e4) + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--e2);
    width: max-content;
    max-width: calc(100% - 2 * var(--e4));
    padding: var(--e3) var(--e4);
    border-radius: var(--raio-medio);
    background: var(--cor-texto);
    color: var(--cor-fundo);
    font-weight: 700;
    box-shadow: var(--sombra);
    transform: translateX(-50%);
}

/* ===== Erro inesperado (fora do Blazor) ===== */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 12px 16px;
    background: var(--cor-perigo);
    color: var(--cor-branco);
}

#blazor-error-ui a,
#blazor-error-ui .dismiss {
    margin-left: 12px;
    color: var(--cor-branco);
    cursor: pointer;
}

/* ===== Noites ===== */

.noites {
    font-size: 17px;
    font-weight: 600;
}

/* ===== Ofensiva ===== */

.ofensiva {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
}

.escudos {
    font-size: 20px;
    font-weight: 600;
}

/* Um cartão inteiro que é uma ligação (ex.: a ofensiva abre o histórico) */
a.cartao-ligacao {
    color: inherit;
    text-decoration: none;
}

.passo-ofensiva {
    font-weight: 600;
}

/* ===== Pontos das equipas (012) ===== */

/* Uma equipa na liga: nome e linha da medalha à esquerda, linha e percentagem à direita; por baixo, a toda a largura,
   o que precisa na próxima atividade (028) */
.liga-equipa {
    align-items: center;
    flex-wrap: wrap;
}

.objetivos-liga {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

.pontos-equipa {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 52px;
}

.pontos-total {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.medalha {
    font-size: 18px;
    line-height: 1;
}

.tendencia {
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-texto-secundario);
}

.cartao-ligacao-tabela {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Linha minimalista (pontos acumulados): sem eixos nem números */
.linha-pontos {
    flex: none;
    width: 72px;
    height: 28px;
    overflow: visible;
}

.linha-pontos polyline {
    fill: none;
    stroke: var(--cor-discreta);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.linha-pontos.destaque polyline {
    stroke: var(--cor-primaria);
}

.linha-pontos.grande {
    width: 100%;
    height: auto;
}

.linha-pontos circle {
    fill: var(--cor-primaria);
    stroke: var(--cor-superficie);
    stroke-width: 2;
}

/* Gráficos dos chefes e mini-gráfico do Ritmo */
.grafico {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.grafico .grelha {
    stroke: var(--cor-grelha);
    stroke-width: 1;
}

.grafico text {
    fill: var(--cor-texto-secundario);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.grafico .linha-serie {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.grafico .ponto-serie {
    stroke: var(--cor-superficie);
    stroke-width: 2;
}

.grafico .barra {
    fill: var(--cor-discreta);
}

.grafico .barra.acima {
    fill: var(--cor-primaria);
}

.grafico .linha-objetivo {
    stroke: var(--cor-texto-secundario);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.serie-1 { stroke: var(--cor-serie-1); fill: var(--cor-serie-1); }
.serie-2 { stroke: var(--cor-serie-2); fill: var(--cor-serie-2); }
.serie-3 { stroke: var(--cor-serie-3); fill: var(--cor-serie-3); }
.serie-4 { stroke: var(--cor-serie-4); fill: var(--cor-serie-4); }
.serie-5 { stroke: var(--cor-serie-5); fill: var(--cor-serie-5); }
.serie-6 { stroke: var(--cor-serie-6); fill: var(--cor-serie-6); }
.serie-7 { stroke: var(--cor-serie-7); fill: var(--cor-serie-7); }
.serie-8 { stroke: var(--cor-serie-8); fill: var(--cor-serie-8); }

.grafico .linha-serie.serie-1, .grafico .linha-serie.serie-2, .grafico .linha-serie.serie-3, .grafico .linha-serie.serie-4,
.grafico .linha-serie.serie-5, .grafico .linha-serie.serie-6, .grafico .linha-serie.serie-7, .grafico .linha-serie.serie-8 {
    fill: none;
}

/* Legenda: a cor fica na chave ao lado; o texto mantém a cor do texto */
.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--cor-texto-secundario);
}

.legenda li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legenda .chave {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.chave.serie-1 { background: var(--cor-serie-1); }
.chave.serie-2 { background: var(--cor-serie-2); }
.chave.serie-3 { background: var(--cor-serie-3); }
.chave.serie-4 { background: var(--cor-serie-4); }
.chave.serie-5 { background: var(--cor-serie-5); }
.chave.serie-6 { background: var(--cor-serie-6); }
.chave.serie-7 { background: var(--cor-serie-7); }
.chave.serie-8 { background: var(--cor-serie-8); }

/* Dar pontos e tabela de pontos */
.escolha .corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.escolha .pontos,
.acao-pontos .pontos {
    flex: none;
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.acao-pontos {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acao-pontos .corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.desativada {
    color: var(--cor-texto-secundario);
}

.desempenho {
    font-weight: 700;
    color: var(--cor-primaria);
}

.entrada-numero {
    max-width: 120px;
}

/* Medalhas da liga em Definições: dois campos por linha */
.medalhas-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e2) var(--e3);
}

/* Dar pontos (028): cada ação inteira ou a metade; os atalhos dos pontos especiais */
.acao-avaliar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2) var(--e3);
    padding: var(--e2) 0;
    border-top: 1px solid var(--cor-contorno);
}

.acao-avaliar .corpo {
    flex: 1 1 160px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.opcoes-acao {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

.opcoes-acao button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--e3);
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* a escolhida: contorno grosso e fundo verde-claro (não só a cor) */
.opcoes-acao button[aria-pressed="true"] {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
    box-shadow: inset 0 0 0 1px var(--cor-primaria);
}

.especiais-formulario {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding-top: var(--e2);
    border-top: 1px solid var(--cor-contorno);
}

/* «⭐ +10% — motivo» no detalhe da equipa */
.especiais {
    font-size: var(--l-pequena);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Tabela de pontos: o total das ações ativas (100% ✓ ou o que falta / sobra) */
.total-tabela.aviso {
    border-color: var(--cor-aviso-contorno);
    background: var(--cor-aviso-fundo);
    color: var(--cor-aviso-texto);
}

/* A partir da 9.ª equipa de uma secção não há mais cores: fica discreta (a legenda identifica-a) */
.grafico .linha-serie.discreta { stroke: var(--cor-discreta); }
.grafico .ponto-serie.discreta { fill: var(--cor-discreta); }
.chave.discreta { background: var(--cor-discreta); }

/* ===== Medalhas (013) ===== */

.grelha-medalhas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.medalha-cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: var(--raio);
    background: var(--cor-superficie);
    text-align: center;
}

.medalha-cartao .nome {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.medalha-icone {
    font-size: 32px;
    line-height: 1.1;
}

.medalha-cartao .nota {
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Medalhas automáticas por conquistar: a cinzento */
.medalha-cartao.por-conquistar {
    border: 1px dashed var(--cor-contorno);
    background: transparent;
    color: var(--cor-texto-secundario);
}

.medalha-cartao.por-conquistar .medalha-icone {
    filter: grayscale(1);
    opacity: 0.5;
}

/* ===== Especialidades (014) ===== */

ol.requisitos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 22px;
}

/* ===== Especialidades do elemento (015) ===== */

.requisito {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cor-contorno);
}

.requisito:last-child {
    border-bottom: none;
}

.ja-tem {
    font-weight: 700;
    color: var(--cor-primaria);
}

.nota-requisito {
    width: 100%;
    min-height: var(--toque);
    padding: 6px 10px;
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-size: 14px;
}

/* ===== Progresso pessoal (016) ===== */

/* As 6 áreas (FACEIS) em 2 linhas de 3, para caberem a 360 px */
/* As 6 áreas (FACEIS) numa linha que desliza, como na maqueta */
.separadores-areas {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.separadores-areas button {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--toque);
    padding: 0 14px;
    white-space: nowrap;
    border: 1px solid var(--cor-contorno);
    border-radius: 999px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-size: var(--l-pequena);
    font-weight: 700;
    cursor: pointer;
}

.separadores-areas button.ativo {
    border-color: transparent;
    background: var(--cor-texto);
    color: var(--cor-fundo);
}

.ponto-area {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.area-F { background: var(--cor-area-fisico); }
.area-A { background: var(--cor-area-afetivo); }
.area-C { background: var(--cor-area-carater); }
.area-E { background: var(--cor-area-espiritual); }
.area-I { background: var(--cor-area-intelectual); }
.area-S { background: var(--cor-area-social); }

.cabeca-trilho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cor-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cabeca-trilho .nome {
    font-weight: 700;
}

.diario {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
}

/* Pedidos de progresso (029): os cartões de cada elemento e, em cada cartão, uma linha por trilho ou objetivo */
.pedidos-elemento {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.linhas-pedidos {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.linhas-pedidos > li {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    padding: var(--e3) 0;
    border-top: 1px solid var(--cor-contorno);
}

.nome-pedido {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-width: 0;
}

.letra-area {
    flex: none;
    font-size: var(--l-pequena);
    font-weight: 800;
    color: var(--cor-texto-secundario);
}

/* Grelha da secção (chefes) */
.grelha-progresso {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.grelha-progresso th,
.grelha-progresso td {
    padding: 6px 2px;
    border-bottom: 1px solid var(--cor-contorno);
    text-align: center;
}

.grelha-progresso th:first-child,
.grelha-progresso td:first-child {
    text-align: left;
}

.grelha-progresso tbody tr {
    cursor: pointer;
}

/* ===== Histórico de épocas (020) ===== */

/* Pódio: 2.º, 1.º e 3.º lado a lado; o 1.º mais alto */
.podio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
}

.podio-lugar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    border-radius: var(--raio);
    background: var(--cor-superficie);
    text-align: center;
}

.podio-1 {
    min-height: 128px;
    border: 2px solid var(--cor-primaria);
}

.podio-2 {
    min-height: 104px;
}

.podio-3 {
    min-height: 88px;
}

.podio-posicao {
    font-size: 20px;
    font-weight: 700;
}

.podio-nome {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Posição na classificação final */
.posicao-liga {
    flex: none;
    min-width: 28px;
    align-self: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto-secundario);
}

/* ===== Sistema visual (021) ===== */

/* Anel de progresso, com o texto ao meio */
.anel {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
}

.anel svg {
    transform: rotate(-90deg);
}

.anel circle {
    fill: none;
    stroke-width: 7;
}

.anel .fundo {
    stroke: var(--cor-superficie-2);
}

.anel .valor {
    stroke: var(--cor-primaria);
    stroke-linecap: round;
}

.anel b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--l-pequena);
}

/* Ofensiva no Início: fundo laranja suave */
.cartao.cartao-ofensiva {
    border-color: transparent;
    background: var(--cor-destaque-suave);
}

.cartao-ofensiva .numero {
    color: var(--cor-destaque);
}

/* A equipa do elemento numa lista (ligas) */
.item.destaque {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
}

/* Guia visual (só em Debug): amostras das cores, da letra e do espaçamento */
.guia {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

.amostras {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

.amostra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e1);
    width: 72px;
    font-size: 11px;
    text-align: center;
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

.pinta {
    width: 40px;
    height: 40px;
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio-pequeno);
}

.pinta.cor-primaria { background: var(--cor-primaria); }
.pinta.cor-primaria-suave { background: var(--cor-primaria-suave); }
.pinta.cor-destaque { background: var(--cor-destaque); }
.pinta.cor-destaque-suave { background: var(--cor-destaque-suave); }
.pinta.cor-fundo { background: var(--cor-fundo); }
.pinta.cor-superficie { background: var(--cor-superficie); }
.pinta.cor-superficie-2 { background: var(--cor-superficie-2); }
.pinta.cor-texto { background: var(--cor-texto); }
.pinta.cor-texto-secundario { background: var(--cor-texto-secundario); }
.pinta.cor-contorno { background: var(--cor-contorno); }
.pinta.cor-sucesso { background: var(--cor-sucesso); }
.pinta.cor-aviso { background: var(--cor-aviso); }
.pinta.cor-perigo { background: var(--cor-perigo); }
.pinta.cor-info { background: var(--cor-info); }
.pinta.cor-lobitos { background: var(--cor-lobitos); }
.pinta.cor-exploradores { background: var(--cor-exploradores); }
.pinta.cor-pioneiros { background: var(--cor-pioneiros); }
.pinta.cor-caminheiros { background: var(--cor-caminheiros); }
.pinta.cor-area-fisico { background: var(--cor-area-fisico); }
.pinta.cor-area-afetivo { background: var(--cor-area-afetivo); }
.pinta.cor-area-carater { background: var(--cor-area-carater); }
.pinta.cor-area-espiritual { background: var(--cor-area-espiritual); }
.pinta.cor-area-intelectual { background: var(--cor-area-intelectual); }
.pinta.cor-area-social { background: var(--cor-area-social); }
.pinta.cor-ouro { background: var(--cor-ouro); }
.pinta.cor-prata { background: var(--cor-prata); }
.pinta.cor-bronze { background: var(--cor-bronze); }
.pinta.cor-platina { background: var(--cor-platina); }

.letra-titulo { font-size: var(--l-titulo); font-weight: 800; line-height: 1.1; }
.letra-grande { font-size: var(--l-grande); font-weight: 800; }
.letra-media { font-size: var(--l-media); font-weight: 700; }
.letra-base { font-size: var(--l-base); }
.letra-pequena { font-size: var(--l-pequena); color: var(--cor-texto-secundario); }

.espaco {
    height: 12px;
    border-radius: 3px;
    background: var(--cor-primaria);
}

.espaco.e1 { width: var(--e1); }
.espaco.e2 { width: var(--e2); }
.espaco.e3 { width: var(--e3); }
.espaco.e4 { width: var(--e4); }
.espaco.e5 { width: var(--e5); }
.espaco.e6 { width: var(--e6); }

.grelha-icones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--e2);
}

/* Frase do ritmo da equipa (Início) */
.ritmo-msg {
    padding: var(--e3);
    border-radius: var(--raio-pequeno);
    background: var(--cor-primaria-suave);
    font-size: var(--l-pequena);
    font-weight: 600;
}

/* Tendência na liga resumida: seta com cor e o texto para leitores de ecrã */
.tendencia-seta {
    display: inline-flex;
    align-items: center;
}

.tendencia-seta.subir { color: var(--cor-sucesso); }
.tendencia-seta.descer { color: var(--cor-perigo); }
.tendencia-seta.estavel { color: var(--cor-texto-secundario); }

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* «A decorrer agora» do chefe: o título abre a atividade; os dois botões dividem a largura */
.titulo-agora {
    color: inherit;
    text-decoration: none;
}

.destaque-agora .linha .botao {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--e2);
}

.icone-caixa .icone-tipo {
    width: 22px;
    height: 22px;
    margin: 0;
}

/* Liga (como na maqueta): as equipas numa só caixa, sem contorno por linha; a do elemento com fundo verde-claro */
.cartao.cartao-liga {
    gap: 2px;
    padding: var(--e2);
}

.cartao-liga > .item {
    min-height: 56px;
    padding: var(--e3);
    border: none;
    border-radius: var(--raio-pequeno);
    background: transparent;
    box-shadow: none;
}

.cartao-liga > .item.destaque {
    background: var(--cor-primaria-suave);
}

.cartao-liga .corpo {
    gap: var(--e1);
}

.cartao-liga .posicao-liga {
    min-width: 20px;
}

/* Número médio (ex.: ritmo atual e ritmo da meta) */
.numero.media {
    font-size: var(--l-grande);
}

/* Progresso (como na maqueta): anel e etapa atual; trilhos com a borda da cor da área */
.linha-etapa {
    display: flex;
    align-items: center;
    gap: var(--e4);
}

.linha-etapa .corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.etapa-nome {
    font-size: var(--l-grande);
    font-weight: 800;
}

.cartao.trilho {
    border-left: 6px solid var(--cor-contorno);
}

.trilho.borda-F { border-left-color: var(--cor-area-fisico); }
.trilho.borda-A { border-left-color: var(--cor-area-afetivo); }
.trilho.borda-C { border-left-color: var(--cor-area-carater); }
.trilho.borda-E { border-left-color: var(--cor-area-espiritual); }
.trilho.borda-I { border-left-color: var(--cor-area-intelectual); }
.trilho.borda-S { border-left-color: var(--cor-area-social); }

.linha-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e2);
    width: 100%;
}

.trilho .cabeca-trilho .nome {
    font-size: var(--l-media);
    font-weight: 800;
}

/* Avatares e ícones numa linha de lista: ao centro */
.item > .avatar,
.item > .icone-caixa {
    align-self: center;
}

/* A etiqueta de uma atividade cancelada pode ter o motivo: deixa-a quebrar a linha */
.cancelada .etiqueta {
    white-space: normal;
}

/* Entrar: a marca da app (sem símbolos oficiais do CNE) */
.marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e2);
    margin-bottom: var(--e3);
    text-align: center;
}

.marca h1 {
    font-size: var(--l-titulo);
    font-weight: 800;
}

.marca-icone {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: var(--cor-primaria-texto);
}

.marca-icone .ic {
    width: 32px;
    height: 32px;
}

/* ===== Secção ativa do chefe (022) ===== */

.seletor-seccao {
    position: relative;
    flex: none;
}

.botao-seccao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--toque);
    padding: 0 var(--e3);
    border: 1px solid var(--cor-contorno);
    border-radius: 999px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ponto-seccao {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.menu-seccoes {
    position: absolute;
    right: 0;
    top: calc(100% + var(--e1));
    z-index: 15;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: var(--e1);
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio-medio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
}

.menu-seccoes button {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: var(--toque);
    padding: 0 var(--e3);
    border: none;
    border-radius: var(--raio-pequeno);
    background: transparent;
    color: var(--cor-texto);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.menu-seccoes button.ativa {
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
}

.menu-seccoes button .ic {
    margin-left: auto;
}

.seletor-seccao .erro {
    position: absolute;
    right: 0;
    top: calc(100% + var(--e1));
    width: 220px;
}

/* «Com que secção trabalhas?» */
.escolha-seccao {
    align-items: center;
}

.saudacao .seletor-seccao {
    margin-left: auto;
}

/* ===== Caderneta de conquistas (023): maqueta docs/ideias/referencias/maqueta-perfil-023.html ===== */

/* Cores das insígnias e do cabeçalho em destaque (iguais em claro e escuro: são medalhas) */
:root {
    --heroi-inicio: #2E7D32;
    --heroi-fim: #1B5E20;
    --heroi-brilho: rgba(255, 255, 255, 0.18);
    --heroi-texto: #FFFFFF;
    --heroi-botao: rgba(255, 255, 255, 0.18);
    --heroi-anel: rgba(255, 255, 255, 0.35);
    --heroi-avatar: #FFFFFF;
    --heroi-avatar-texto: #2E7D32;

    --ins-simbolo: #FFFFFF;
    --ins-simbolo-escuro: #3A2A00;
    --ins-ouro-claro: #FFE58A;
    --ins-ouro: #C99A06;
    --ins-prata-claro: #F1F3F5;
    --ins-prata: #8A9299;
    --ins-bronze-claro: #F0C29A;
    --ins-bronze: #A0622D;
    --ins-platina-claro: #D8F3F9;
    --ins-platina: #3F8FA6;
    --ins-lobitos-claro: #FFE27A;
    --ins-lobitos: #E0A800;
    --ins-exploradores-claro: #8BD38F;
    --ins-exploradores: #2E7D32;
    --ins-pioneiros-claro: #90C2F5;
    --ins-pioneiros: #1565C0;
    --ins-caminheiros-claro: #F09A9A;
    --ins-caminheiros: #C62828;
    --ins-noite-claro: #9FA8DA;
    --ins-noite: #283593;
    --ins-campo-claro: #9CCC65;
    --ins-campo: #33691E;
    --ins-dias-claro: #FFB74D;
    --ins-dias: #D84315;
    --ins-melhorou-claro: #80CBC4;
    --ins-melhorou: #00695C;
    --ins-merito-claro: #FFE082;
    --ins-merito: #8D6E00;
    /* especialidades: uma cor por área do site do CNE */
    --ins-area-1: #C62828;
    --ins-area-1-escura: #7F1D1D;
    --ins-area-2: #EF6C00;
    --ins-area-2-escura: #8A3D00;
    --ins-area-3: #6D4C41;
    --ins-area-3-escura: #3E2723;
    --ins-area-4: #6A1B9A;
    --ins-area-4-escura: #3C0F57;
    --ins-area-5: #00838F;
    --ins-area-5-escura: #004D55;
    --ins-area-6: #AD1457;
    --ins-area-6-escura: #5E0B2F;
    --ins-area-7: #4527A0;
    --ins-area-7-escura: #251357;
    --ins-area-8: #1565C0;
    --ins-area-8-escura: #0D3C78;
    --ins-area-outra: #546E7A;
    --ins-area-outra-escura: #263238;
}

.conteudo.caderneta {
    gap: var(--e3);
}

/* Cabeçalho em destaque */
.heroi {
    position: relative;
    margin: calc(-1 * var(--e4)) calc(-1 * var(--e4)) 0;
    padding: 28px var(--e4) 20px;
    color: var(--heroi-texto);
    text-align: center;
    background: radial-gradient(circle at 20% 0%, var(--heroi-brilho), transparent 45%),
        linear-gradient(160deg, var(--heroi-inicio) 0%, var(--heroi-fim) 100%);
}

.heroi .avatar.grande {
    width: 84px;
    height: 84px;
    margin: 0 auto 10px;
    background: var(--heroi-avatar);
    color: var(--heroi-avatar-texto);
    font-size: 30px;
    font-weight: 900;
    box-shadow: 0 0 0 4px var(--heroi-anel);
}

.heroi h2 {
    font-size: var(--l-grande);
    font-weight: 900;
}

.heroi .sub {
    color: var(--heroi-texto);
    opacity: 0.9;
    font-size: var(--l-pequena);
    font-weight: 600;
}

.heroi-acao {
    position: absolute;
    top: var(--e3);
    right: var(--e3);
    min-height: 32px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--heroi-botao);
    color: var(--heroi-texto);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.heroi-destaques {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: var(--e4);
}

.heroi-destaques .conquista {
    width: 76px;
}

.heroi-destaques .conquista figcaption,
.heroi-destaques .conquista figcaption em {
    color: var(--heroi-texto);
}

/* Insígnias: hexágono nas especialidades, círculo no resto (a caixa leva a etiqueta da secção) */
.ins-caixa {
    position: relative;
    flex: none;
    display: inline-grid;
}

.ins {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: var(--ins-simbolo);
    font-size: 26px;
    line-height: 1;
}

.ins .ic.ins-simbolo {
    width: 26px;
    height: 26px;
}

.ins.pequena {
    width: 30px;
    height: 30px;
    font-size: 15px;
}

.ins.pequena .ic.ins-simbolo {
    width: 16px;
    height: 16px;
}

.ins.circulo {
    border-radius: 50%;
}

.ins.hex {
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.ins.ouro {
    background: radial-gradient(circle at 35% 30%, var(--ins-ouro-claro), var(--ins-ouro));
    color: var(--ins-simbolo-escuro);
}

.ins.prata {
    background: radial-gradient(circle at 35% 30%, var(--ins-prata-claro), var(--ins-prata));
    color: var(--ins-simbolo-escuro);
}

.ins.bronze { background: radial-gradient(circle at 35% 30%, var(--ins-bronze-claro), var(--ins-bronze)); }

.ins.platina {
    background: radial-gradient(circle at 35% 30%, var(--ins-platina-claro), var(--ins-platina));
    color: var(--ins-simbolo-escuro);
}

.ins.etapa.ins-lobitos {
    background: radial-gradient(circle at 35% 30%, var(--ins-lobitos-claro), var(--ins-lobitos));
    color: var(--ins-simbolo-escuro);
}

.ins.etapa.ins-exploradores { background: radial-gradient(circle at 35% 30%, var(--ins-exploradores-claro), var(--ins-exploradores)); }
.ins.etapa.ins-pioneiros { background: radial-gradient(circle at 35% 30%, var(--ins-pioneiros-claro), var(--ins-pioneiros)); }
.ins.etapa.ins-caminheiros { background: radial-gradient(circle at 35% 30%, var(--ins-caminheiros-claro), var(--ins-caminheiros)); }
.ins.noite { background: radial-gradient(circle at 35% 30%, var(--ins-noite-claro), var(--ins-noite)); }
.ins.campo { background: radial-gradient(circle at 35% 30%, var(--ins-campo-claro), var(--ins-campo)); }
.ins.dias { background: radial-gradient(circle at 35% 30%, var(--ins-dias-claro), var(--ins-dias)); }
.ins.melhorou { background: radial-gradient(circle at 35% 30%, var(--ins-melhorou-claro), var(--ins-melhorou)); }

.ins.merito {
    background: radial-gradient(circle at 35% 30%, var(--ins-merito-claro), var(--ins-merito));
}

.ins.esp.area-1 { background: linear-gradient(160deg, var(--ins-area-1), var(--ins-area-1-escura)); }
.ins.esp.area-2 { background: linear-gradient(160deg, var(--ins-area-2), var(--ins-area-2-escura)); }
.ins.esp.area-3 { background: linear-gradient(160deg, var(--ins-area-3), var(--ins-area-3-escura)); }
.ins.esp.area-4 { background: linear-gradient(160deg, var(--ins-area-4), var(--ins-area-4-escura)); }
.ins.esp.area-5 { background: linear-gradient(160deg, var(--ins-area-5), var(--ins-area-5-escura)); }
.ins.esp.area-6 { background: linear-gradient(160deg, var(--ins-area-6), var(--ins-area-6-escura)); }
.ins.esp.area-7 { background: linear-gradient(160deg, var(--ins-area-7), var(--ins-area-7-escura)); }
.ins.esp.area-8 { background: linear-gradient(160deg, var(--ins-area-8), var(--ins-area-8-escura)); }
.ins.esp.area-outra { background: linear-gradient(160deg, var(--ins-area-outra), var(--ins-area-outra-escura)); }

/* Anilha de Mérito: anel com as cores das 4 secções */
.ins.anilha {
    background: conic-gradient(from 0deg, var(--ins-lobitos), var(--ins-exploradores), var(--ins-pioneiros),
        var(--ins-caminheiros), var(--ins-lobitos));
}

.ins.anilha::after {
    content: "";
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: var(--cor-superficie);
}

.ins.anilha .ins-simbolo {
    position: relative;
    z-index: 1;
}

/* O que já não está em vigor: a cinzento, com a etiqueta da secção */
.ins.antiga {
    filter: saturate(0.25);
    opacity: 0.75;
}

.ins-etiqueta {
    position: absolute;
    right: -4px;
    bottom: -4px;
    z-index: 2;
    padding: 1px 5px;
    border: 1px solid var(--cor-contorno);
    border-radius: 999px;
    background: var(--cor-superficie);
    color: var(--cor-texto-secundario);
    font-size: 9px;
    font-weight: 900;
    line-height: 1.3;
}

.ins-caixa.pequena .ins-etiqueta {
    right: -6px;
    bottom: -6px;
    padding: 0 3px;
    font-size: 8px;
}

/* Grelhas de conquistas (4 por linha) */
.grelha-conquistas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e3) 6px;
}

.conquista {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e1);
    min-width: 0;
    text-align: center;
}

.conquista figcaption {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.conquista figcaption em {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--cor-texto-secundario);
}

/* Números da caderneta */
.numeros-caderneta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e2);
    text-align: center;
}

.numeros-caderneta b {
    display: block;
    font-size: var(--l-grande);
    font-weight: 900;
}

.numeros-caderneta span {
    font-size: 12px;
    font-weight: 700;
    color: var(--cor-texto-secundario);
}

/* Linha de etapas */
.etapas-caderneta {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.passo-etapa {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e1);
    text-align: center;
}

.passo-etapa small {
    font-size: 10px;
    font-weight: 800;
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

/* (só na caderneta: .linha-etapa sozinha é o cabeçalho do progresso do elemento) */
.etapas-caderneta .linha-etapa {
    flex: 1 1 8px;
    min-width: 6px;
    height: 4px;
    margin-top: 13px;
    border-radius: 999px;
    background: var(--cor-superficie-2);
}

.etapas-caderneta .linha-etapa.feita {
    background: var(--cor-primaria);
}

.ins.vazia {
    background: var(--cor-superficie-2);
    color: var(--cor-texto-secundario);
}

.sub.centrado {
    margin-top: 6px;
    text-align: center;
}

/* Destaques junto ao nome */
.destaques-nome {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    align-self: center;
    margin-left: auto;
    vertical-align: middle;
}

.destaque-botao {
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.destaque-cartao {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 5;
    width: max-content;
    max-width: 240px;
    padding: var(--e2) var(--e3);
    border: 1px solid var(--cor-contorno);
    border-radius: var(--raio-medio);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra);
    font-size: var(--l-pequena);
    font-weight: 700;
    text-align: left;
    white-space: normal;
}

/* Folha «Escolhe 3 destaques» (sobe do fundo do ecrã) */
.folha-fundo {
    position: fixed;
    inset: 0;
    z-index: 20;
    touch-action: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--cor-sombra-dialogo);
}

.folha {
    width: 100%;
    max-width: var(--largura-maxima);
    max-height: 85vh;
    overflow-y: auto;
    /* faz scroll por dentro e não desloca a página por trás (027) */
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e4);
    border-radius: 20px 20px 0 0;
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
}

.escolha-destaques {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 6px;
}

.escolha-destaque {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e1);
    min-width: 0;
    padding: 6px 2px;
    border: 2px solid transparent;
    border-radius: var(--raio-medio);
    background: none;
    color: var(--cor-texto);
    font: inherit;
    cursor: pointer;
}

.escolha-destaque.escolhida {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
}

.escolha-destaque .legenda {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.numero-escolha {
    position: absolute;
    top: 2px;
    left: 4px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: var(--cor-primaria-texto);
    font-size: 11px;
    font-weight: 900;
}

/* O meu percurso: um cartão por secção */
.seccao-percurso {
    border-left: 6px solid var(--cor-contorno);
}

.seccao-percurso.ins-lobitos { border-left-color: var(--cor-lobitos); }
.seccao-percurso.ins-exploradores { border-left-color: var(--cor-exploradores); }
.seccao-percurso.ins-pioneiros { border-left-color: var(--cor-pioneiros); }
.seccao-percurso.ins-caminheiros { border-left-color: var(--cor-caminheiros); }

.seccao-percurso summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--e2);
    list-style: none;
    cursor: pointer;
}

.seccao-percurso summary::-webkit-details-marker {
    display: none;
}

.seccao-percurso[open] summary {
    margin-bottom: var(--e3);
}

.seccao-percurso > .sub {
    margin-top: 10px;
}

.nota-percurso {
    border-color: transparent;
    background: var(--cor-primaria-suave);
}

.nota-percurso .forte {
    font-weight: 800;
}

.nota-percurso .sub {
    color: var(--cor-texto);
}

/* ===== Separador «Agrupamento» (024): a montra, minimalista ===== */

/* Os separadores internos também podem ser ligações (Secção do chefe: Escuteiros · Equipas · Pontos · Progresso) */
.separadores-lista a {
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    min-height: var(--toque);
    padding: 0 14px;
    border: 1px solid var(--cor-contorno);
    border-radius: 999px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.separadores-lista a.ativo {
    border-color: transparent;
    background: var(--cor-texto);
    color: var(--cor-fundo);
}

/* «Secção» do chefe: os 4 separadores cabem sempre a 360 px */
.separadores-seccao {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
}

.separadores-seccao a {
    min-width: 0;
    padding: 0 4px;
    font-size: 13px;
}

/* Grelha 2 × 2 das secções, com a cor de cada uma */
.grelha-seccoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e3);
}

.cartao-seccao {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--e1);
    min-height: 96px;
    padding: var(--e4);
    border-radius: var(--raio);
    color: var(--cor-texto-sobre-seccao);
    text-decoration: none;
    box-shadow: var(--sombra);
}

.cartao-seccao.seccao-lobitos {
    color: var(--cor-texto-sobre-lobitos);
}

.cartao-seccao .nome {
    font-size: var(--l-media);
    font-weight: 900;
}

.cartao-seccao .sub {
    color: inherit;
    opacity: 0.9;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Secção: faixa com a cor e as equipas com os membros */
.faixa-seccao {
    height: 6px;
    border-radius: 999px;
}

.membros {
    display: flex;
    flex-direction: column;
}

.membro {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 52px;
    padding: 6px 0;
    border-top: 1px solid var(--cor-contorno);
}

.membro:first-child {
    border-top: none;
}

.membro .nome {
    flex: 1;
    min-width: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}