/*
 * Identidade visual "Certifixe" sobre o Bootstrap 5 (vendido em
 * static/vendor/bootstrap/, copiado por scripts/copy-vendor.mjs).
 *
 * Importante: redefinir `--bs-primary` no :root NÃO basta. O CSS
 * compilado do Bootstrap define, para cada componente (`.btn-primary`,
 * `.nav-pills .active`, `.form-control:focus`, `.form-check-input:checked`,
 * `.alert-primary`, ...), variáveis LOCAIS já resolvidas para o azul
 * `#0d6efd` em vez de um `var(--bs-primary)` - confirmado por inspeção
 * direta ao `bootstrap.min.css` vendido. Por isso este ficheiro faz
 * dois níveis de trabalho: (1) redefine as variáveis globais `--bs-*`
 * de que os utilitários (`.text-primary`, `.bg-primary`, `.link-primary`,
 * `.text-bg-primary`, ...) DEPENDEM de facto via `var(--bs-primary-rgb)`;
 * (2) sobrepõe explicitamente os componentes que não dependem - a
 * técnica indicada na própria documentação do Bootstrap 5.3 para temas
 * sem recompilar via Sass.
 */

:root,
[data-bs-theme="light"] {
    /* Identidade visual Certifixe (2026-09) - paleta oficial:
       primária #6672F8, CTA #5A5AF2, fundo #FFFFFF, texto #111827,
       texto secundário #6B7280, bordas #E5E7EB. Contraste sobre branco:
       #6672F8 mede 3,9:1 (só ícones, bordas, destaques e texto grande);
       #5A5AF2 mede 5,0:1 (links, texto e fundo dos botões, com texto
       branco por cima também a 5,0:1). */
    --cfx-primaria: #6672F8;
    --cfx-primaria-rgb: 102, 114, 248;
    --cfx-cta: #5A5AF2;
    --cfx-cta-hover: #4848DE;
    --cfx-cta-ativo: #3E3EC8;
    --cfx-texto: #111827;
    --cfx-texto-secundario: #6B7280;
    --cfx-borda: #E5E7EB;
    --cfx-borda-campo: #D1D5DB;
    --cfx-superficie: #FFFFFF;
    --cfx-superficie-suave: #F9FAFB;
    --cfx-sombra-cartao: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.03);
    --cfx-sombra-elevada: 0 12px 24px -12px rgba(17, 24, 39, 0.14), 0 4px 8px -4px rgba(17, 24, 39, 0.06);
    --cfx-raio: 0.625rem;
    --cfx-raio-cartao: 1rem;
    --cfx-foco: 0 0 0 3px rgba(102, 114, 248, 0.22);

    --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --bs-body-bg: #FFFFFF;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #111827;
    --bs-body-color-rgb: 17, 24, 39;
    --bs-secondary-color: #6B7280;
    --bs-emphasis-color: #111827;
    --bs-secondary-bg: #F3F4F6;
    --bs-tertiary-bg: #F9FAFB;
    --bs-border-color: #E5E7EB;
    --bs-border-color-translucent: rgba(17, 24, 39, 0.09);

    --bs-primary: #5A5AF2;
    --bs-primary-rgb: 90, 90, 242;
    --bs-primary-text-emphasis: #3E3EC8;
    --bs-primary-bg-subtle: #EEF0FE;
    --bs-primary-border-subtle: #C9CDFC;

    /* `--bs-secondary` é, neste projeto, a cor de ACENTO (links de ação,
       destaques de título, ícones) - antes o dourado. Na identidade nova
       o acento é a própria primária; o "secundário" dos botões passou a
       ser neutro (ver `.btn-secondary`/`.btn-outline-secondary`). */
    --bs-secondary: #5A5AF2;
    --bs-secondary-rgb: 90, 90, 242;
    --bs-secondary-text-emphasis: #3E3EC8;
    --bs-secondary-bg-subtle: #EEF0FE;
    --bs-secondary-border-subtle: #C9CDFC;
    /* Acento como TEXTO - #5A5AF2 (5,0:1 sobre branco). */
    --bs-secondary-text: #5A5AF2;

    --bs-success: #3D6B52;
    --bs-success-rgb: 61, 107, 82;
    --bs-success-text-emphasis: #274434;
    --bs-success-bg-subtle: #dbe7e0;
    --bs-success-border-subtle: #b8cec2;

    --bs-danger: #B23A2E;
    --bs-danger-rgb: 178, 58, 46;
    --bs-danger-text-emphasis: #74251d;
    --bs-danger-bg-subtle: #f2dcd9;
    --bs-danger-border-subtle: #e2b3ac;

    --bs-link-color: #5A5AF2;
    --bs-link-color-rgb: 90, 90, 242;
    --bs-link-hover-color: #3E3EC8;
    --bs-link-hover-color-rgb: 62, 62, 200;

    --heading-color: #111827;
    --texto-secundario: #6B7280;

    /* Cores semânticas dos ícones - a cor segue o significado, não a
       decoração: primária = gestão/dados/certificados, verde =
       pagamentos/confirmação, cinza = presença/tecnologia, vermelho =
       só alerta/dívida. Sem cartões coloridos: a cor fica no ícone. */
    --icone-dados: #5A5AF2;
    --icone-certificado: #5A5AF2;
    --icone-sucesso: var(--bs-success);
    --icone-alerta: var(--bs-danger);
    --icone-tecnologia: #4B5563;
    /* Tinta do fundo dos ícones em quadrado/círculo (ex.: cartões de tipo
       de conta no registo) - leve, 8-12%. */
    --selo-tinta: 10%;
}

/* Modo escuro - grafite neutro (nunca azul): fundo #111214, superfícies
   #1A1B1F/#202126, bordas #2A2C31. A primária clareia para #8B94FA
   (6,9:1 sobre o fundo) para manter contraste em texto e ícones; o
   fundo dos botões CTA continua #5A5AF2 (texto branco a 5,0:1). */
[data-bs-theme="dark"] {
    --cfx-texto: #ECEDEF;
    --cfx-texto-secundario: #9CA3AF;
    --cfx-borda: #2A2C31;
    --cfx-borda-campo: #3A3C42;
    --cfx-superficie: #1A1B1F;
    --cfx-superficie-suave: #202126;
    --cfx-sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cfx-sombra-elevada: 0 16px 32px -16px rgba(0, 0, 0, 0.6);
    --cfx-foco: 0 0 0 3px rgba(139, 148, 250, 0.3);
    --icone-tecnologia: #9CA3AF;
    --icone-certificado: #8B94FA;
    --icone-dados: #8B94FA;
    --selo-tinta: 14%;
    --bs-body-bg: #111214;
    --bs-body-bg-rgb: 17, 18, 20;
    --bs-body-color: #ECEDEF;
    --bs-body-color-rgb: 236, 237, 239;
    --bs-secondary-bg: #202126;
    --bs-tertiary-bg: #1A1B1F;
    --bs-border-color: #2A2C31;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-secondary-color: #9CA3AF;
    /* Faltava no tema escuro: como o bloco claro usa o seletor
       `:root, [data-bs-theme="light"]`, `:root` sozinho já cobre
       qualquer tema por omissão - sem esta redefinição aqui, esta
       variável ficava presa no valor escuro do tema claro (#1C1F26)
       mesmo em modo escuro. É a base de `--bs-table-color` no
       Bootstrap (var(--bs-emphasis-color)), por isso o texto das
       tabelas (.table, sem classe extra) ficava ilegível - quase
       invisível - sobre o fundo escuro da página. */
    --bs-emphasis-color: #ECEDEF;

    --bs-primary: #8B94FA;
    --bs-primary-rgb: 139, 148, 250;
    --bs-primary-text-emphasis: #C3C8FD;
    --bs-primary-bg-subtle: #1E2040;
    --bs-primary-border-subtle: #34397A;

    --bs-secondary: #8B94FA;
    --bs-secondary-rgb: 139, 148, 250;
    --bs-secondary-text-emphasis: #C3C8FD;
    --bs-secondary-bg-subtle: #1E2040;
    --bs-secondary-text: #8B94FA;
    --bs-secondary-border-subtle: #34397A;

    --bs-success: #6b9b81;
    --bs-success-rgb: 107, 155, 129;
    --bs-success-text-emphasis: #a3c7b2;
    --bs-success-bg-subtle: #1a2620;
    --bs-success-border-subtle: #2b4034;

    --bs-danger: #d1685a;
    --bs-danger-rgb: 209, 104, 90;
    --bs-danger-text-emphasis: #e6a89e;
    --bs-danger-bg-subtle: #331714;
    --bs-danger-border-subtle: #532620;

    --bs-link-color: #8B94FA;
    --bs-link-color-rgb: 139, 148, 250;
    --bs-link-hover-color: #A5ACFB;
    --bs-link-hover-color-rgb: 165, 172, 251;

    --heading-color: #F3F4F6;
    --texto-secundario: #9CA3AF;
}

/* Tipografia - uma só família (Poppins, servida pelo próprio Certifixe:
   static/css/fontes.css). Títulos a 600 com tracking ligeiramente
   negativo; os `display-*` (títulos grandes da landing) mais leves. */
h1, h2, h3, h4, h5, h6, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--heading-color);
}

/* ---- Logótipo da plataforma (navbar pública, navbar do painel,
   navbar do Super Administrador) - troca de imagem por tema, mesmo
   mecanismo `[data-bs-theme="dark"]` já usado em todo este ficheiro
   para variáveis de cor. NUNCA usado para o logotipo de cada CENTRO
   (esse é um `ImageField` configurável por centro, ver
   apps.centros.models.Centro.logotipo - completamente à parte deste
   logótipo fixo da marca Certifixe). ---- */
.logo-certifixe-claro { display: inline-block; }
.logo-certifixe-escuro { display: none; }
[data-bs-theme="dark"] .logo-certifixe-claro { display: none; }
[data-bs-theme="dark"] .logo-certifixe-escuro { display: inline-block; }

/* Redução moderada da escala tipográfica - só do PAINEL INTERNO
   (Administração/Super Administrador), nunca do site institucional
   público, que partilha o mesmo `base.html` mas não tem esta classe.

   `body.pagina-painel` (`{% block body_class %}` em painel_base.html
   e superadmin_base.html - mesmo mecanismo de `body.pagina-landing`,
   ver mais abaixo) - NÃO `.conteudo-painel` (só o `<main>`), porque o
   cabeçalho (nome do centro/utilizador) e a sidebar ficam FORA dele e
   também precisam de encolher progressivamente por breakpoint. As
   variáveis vivem no `<body>` e todos os consumidores (dentro ou fora
   de `<main>`) herdam de lá - um único ponto de ajuste para o painel
   inteiro (Dashboard, Cursos, Turmas, Formandos, Financeiro,
   Relatórios, cabeçalho, sidebar, Painel do Super Administrador, ...),
   sem tocar em templates além dos dois `body_class` já feitos.

   Escala responsiva por breakpoint (mesmo mecanismo da escala da
   Landing Page - variáveis centralizadas redefinidas por media query,
   nunca um valor solto por ecrã) - variáveis PRÓPRIAS do painel
   (`--fs-painel-*`, não partilhadas com as `--fs-*` da landing): o
   painel tem um conjunto de níveis diferente (h1-h6 mapeados
   diretamente às classes `.h1`-`.h6` já usadas em todo o painel -
   KPIs, tabelas, gráficos - em vez dos níveis semânticos da landing
   como "Hero"/"lead"/"botão"), e valores mais compactos, pensados
   para uma aplicação densa de dados, não para cópia de marketing.

   `--fs-painel-body`/`--fs-painel-btn`/`--fs-painel-input` NUNCA
   descem abaixo de 0.875rem (14px, mínimo de legibilidade pedido) em
   nenhum breakpoint - só os títulos (que têm peso/contraste extra) e
   `--fs-painel-small` (texto secundário, sempre acompanhado do texto
   principal ao lado - rótulos, legendas) podem ir abaixo disso.
   `--fs-painel-input` sobe a exatamente 1rem (16px) em mobile, em vez
   de continuar a encolher como os outros - abaixo de 16px, o Safari
   do iOS dá zoom automático ao focar o campo (comportamento nativo do
   browser, não um bug nosso) e essa é a pior experiência possível num
   campo de formulário em ecrã tátil; os botões não têm esse problema
   (não são editáveis), por isso `--fs-painel-btn` mantém o piso normal
   de 14px. */
body.pagina-painel {
    --fs-painel-body: 0.9rem;
    --fs-painel-h1: 1.7rem;
    --fs-painel-h2: 1.35rem;
    --fs-painel-h3: 1.15rem;
    --fs-painel-h4: 0.95rem;
    --fs-painel-h5: 0.9rem;
    --fs-painel-h6: 0.825rem;
    --fs-painel-small: 0.8rem;
    --fs-painel-btn: 0.9rem;
    --fs-painel-btn-sm: 0.8rem;
    --fs-painel-btn-lg: 1rem;
    --fs-painel-input: 0.9rem;
}

@media (max-width: 1023.98px) {
    body.pagina-painel {
        --fs-painel-body: 0.875rem;
        --fs-painel-h1: 1.55rem;
        --fs-painel-h2: 1.25rem;
        --fs-painel-h3: 1.05rem;
        --fs-painel-h4: 0.9rem;
        --fs-painel-h5: 0.85rem;
        --fs-painel-h6: 0.8rem;
        --fs-painel-small: 0.78rem;
        --fs-painel-btn: 0.875rem;
        --fs-painel-btn-sm: 0.8rem;
        --fs-painel-btn-lg: 0.95rem;
        --fs-painel-input: 0.9rem;
    }
}

@media (max-width: 767.98px) {
    body.pagina-painel {
        --fs-painel-body: 0.875rem;
        --fs-painel-h1: 1.4rem;
        --fs-painel-h2: 1.15rem;
        --fs-painel-h3: 1rem;
        --fs-painel-h4: 0.85rem;
        --fs-painel-h5: 0.8rem;
        --fs-painel-h6: 0.78rem;
        --fs-painel-small: 0.75rem;
        --fs-painel-btn: 0.875rem;
        --fs-painel-btn-sm: 0.8rem;
        --fs-painel-btn-lg: 0.95rem;
        --fs-painel-input: 1rem;
    }
}

.conteudo-painel {
    font-size: var(--fs-painel-body);
}

.conteudo-painel h1, .conteudo-painel .h1 { font-size: var(--fs-painel-h1); }
.conteudo-painel h2, .conteudo-painel .h2 { font-size: var(--fs-painel-h2); }
.conteudo-painel h3, .conteudo-painel .h3 { font-size: var(--fs-painel-h3); }
.conteudo-painel h4, .conteudo-painel .h4 { font-size: var(--fs-painel-h4); }
.conteudo-painel h5, .conteudo-painel .h5 { font-size: var(--fs-painel-h5); }
.conteudo-painel h6, .conteudo-painel .h6 { font-size: var(--fs-painel-h6); }

/* Consumidores centralizados de `--fs-painel-*` que vivem FORA de
   `.conteudo-painel` (cabeçalho, sidebar) ou que o Bootstrap define
   com `font-size` absoluto em rem (não relativo/herdado do contentor,
   por isso nunca encolhiam sozinhos só com a redução de `font-size`
   em `.conteudo-painel`/`body.pagina-painel`) - `.btn`, `.form-
   control`, `.form-select` e `.small`/`small` entram nesta segunda
   categoria mesmo dentro do painel. Um único bloco aqui cobre o
   sistema todo (nenhuma regra por ecrã). */
body.pagina-painel .small,
body.pagina-painel small {
    font-size: var(--fs-painel-small);
}

body.pagina-painel .btn-lg {
    font-size: var(--fs-painel-btn-lg);
}

/* Biblioteca de Modelos (painel) e Galeria de Modelos (pública) -
   partilhado pelos dois contextos: o cartão único
   (`biblioteca_modelos/_cartao_modelo.html`), a pesquisa, as categorias
   e a pré-visualização renderizam de forma idêntica nos dois sítios.
   Premium (2026-09): cada miniatura aparece como uma folha sobre um fundo
   suave da marca, selos curtos, ação sempre visível. */
.galeria-fundo {
    background: var(--cfx-superficie-suave);
}

.galeria-pagina {
    padding-top: 2.25rem;
    padding-bottom: 3.5rem;
}

.galeria-pagina--painel {
    padding-top: 0;
}

/* ---- Topo: título e pesquisa ---- */
.galeria-topo {
    max-width: 760px;
    margin: 0 auto 1.75rem;
    text-align: center;
}

.galeria-rotulo {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cfx-primaria);
}

.galeria-titulo {
    margin: 0;
    font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--heading-color);
    text-wrap: balance;
}

.galeria-titulo span {
    color: var(--cfx-primaria);
}

.galeria-subtitulo {
    max-width: 36rem;
    margin: 0.6rem auto 0;
    color: var(--cfx-texto-secundario);
}

.galeria-pesquisa {
    position: relative;
    max-width: 640px;
    margin: 1.5rem auto 0;
}

.galeria-pesquisa > .bi {
    position: absolute;
    top: 50%;
    left: 1.15rem;
    font-size: 1.05rem;
    color: var(--cfx-texto-secundario);
    transform: translateY(-50%);
}

.galeria-pesquisa .form-control {
    height: 3.25rem;
    padding-left: 2.9rem;
    font-size: 1rem;
    background: var(--cfx-superficie);
    border: 1.5px solid var(--cfx-borda);
    border-radius: 999px;
    box-shadow: var(--cfx-sombra-elevada);
}

.galeria-pesquisa .form-control:focus {
    border-color: var(--cfx-primaria);
    box-shadow: 0 0 0 4px rgba(var(--cfx-primaria-rgb), 0.12);
}

/* Painel: topo alinhado à esquerda, com o botão "Criar do zero". */
.galeria-topo--painel {
    max-width: none;
    margin: 1rem 0 1.25rem;
    text-align: left;
}

.galeria-topo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.galeria-topo--painel .galeria-titulo {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.galeria-topo--painel .galeria-subtitulo {
    margin-left: 0;
}

.galeria-topo--painel .galeria-pesquisa {
    max-width: 560px;
    margin: 1rem 0 0;
}

.galeria-topo--painel .galeria-pesquisa .form-control {
    height: 2.9rem;
    box-shadow: none;
}

.galeria-criar {
    padding-inline: 1.1rem;
    font-weight: 600;
    border-radius: 999px;
}

/* ---- Categorias (pílulas) ---- */
.galeria-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* Telemóvel/tablet no painel: uma linha que desliza (no seu contentor). */
.galeria-chips--carril {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.galeria-chips--carril::-webkit-scrollbar {
    display: none;
}

.galeria-chip,
.galeria-filtro {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cfx-texto);
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.galeria-chip:hover,
.galeria-filtro:hover {
    color: var(--cfx-primaria);
    background: var(--cfx-superficie);
    border-color: rgba(var(--cfx-primaria-rgb), 0.5);
}

.galeria-chip.active,
.galeria-chip.active:hover,
.galeria-filtro.active,
.galeria-filtro.active:hover {
    color: #FFFFFF;
    background: var(--cfx-cta);
    border-color: var(--cfx-cta);
}

/* ---- Barra: contagem, ordenar, tamanho ---- */
.galeria-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.galeria-contagem {
    margin: 0;
    font-size: 0.9rem;
    color: var(--cfx-texto-secundario);
}

.galeria-contagem strong {
    color: var(--heading-color);
}

.galeria-ordenar {
    width: auto;
    min-height: 2.25rem;
    padding-left: 0.9rem;
    background-color: var(--cfx-superficie);
    border-radius: 999px;
}

.galeria-tamanhos {
    padding: 0.2rem;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
}

.galeria-tamanhos .btn {
    padding: 0.2rem 0.6rem;
    color: var(--cfx-texto-secundario);
    border: 0;
    border-radius: 999px !important;
}

.galeria-tamanhos .btn.active,
.galeria-tamanhos .btn:hover {
    color: var(--cfx-primaria);
    background: rgba(var(--cfx-primaria-rgb), 0.12);
}

.galeria-botao-filtros {
    color: var(--cfx-texto);
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
}

/* ---- Painel: coluna lateral de categorias + resultados ---- */
.galeria-corpo {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}

.galeria-resultados {
    flex: 1 1 auto;
    min-width: 0;
}

/* `sticky` - a lista de categorias é sempre mais curta do que a grelha;
   fixa-se logo abaixo da barra superior do painel. */
.galeria-lateral {
    position: sticky;
    top: calc(var(--header-height, 65px) + var(--espaco-topo-conteudo, 1.25rem));
    flex-shrink: 0;
    width: 232px;
    max-height: calc(100vh - var(--header-height, 65px) - var(--espaco-topo-conteudo, 1.25rem) - 1rem);
    padding: 1rem;
    overflow-y: auto;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 1.25rem;
}

.galeria-lateral-titulo {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
}

.galeria-lateral-lista {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.galeria-item-lateral {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.875rem;
    color: var(--cfx-texto);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0.65rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.galeria-item-lateral .bi {
    width: 1.1rem;
    color: var(--cfx-texto-secundario);
    text-align: center;
}

.galeria-item-lateral:hover {
    background: var(--cfx-superficie-suave);
}

.galeria-item-lateral.active,
.galeria-item-lateral.active:hover {
    font-weight: 600;
    color: var(--cfx-primaria);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
}

.galeria-item-lateral.active .bi {
    color: var(--cfx-primaria);
}

/* ---- Grelha de cartões (justificada) ----
   Cada cartão tem o formato da sua folha (`--proporcao` = largura/altura,
   posto no cartão pelo servidor ou, sem desenho do Designer, pela
   própria miniatura em galeria-comum.js): os horizontais são largos, os
   verticais estreitos, e todos os cartões de uma linha ficam com a
   mesma altura - nunca um certificado deitado perdido num quadro em pé.
   `--galeria-linha` é a altura de referência do quadro; cada linha
   estica-se para encher a largura (crescimento proporcional ao
   formato, por isso as alturas continuam iguais). O alternador
   pequena/média/grande só muda essa altura. */
#galeria-grid.galeria-grid,
.galeria-grade {
    --galeria-linha: 170px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

#galeria-grid.galeria-grid > .galeria-item,
.galeria-grade > .galeria-cartao {
    --proporcao-efetiva: var(--proporcao, 0.7071);
    flex: var(--proporcao-efetiva) 1 calc(var(--proporcao-efetiva) * var(--galeria-linha));
    /* Abaixo da largura de referência de um vertical em cada tamanho -
       senão esse cartão ficaria mais alto do que os vizinhos. */
    min-width: 7rem;
    /* Um cartão sozinho numa linha não cresce sem fim (um vertical
       esticado a toda a largura ficaria enorme). */
    max-width: calc(var(--proporcao-efetiva) * var(--galeria-linha) * 1.6);
}

/* A última linha fica no tamanho de referência, sem esticar. */
#galeria-grid.galeria-grid::after,
.galeria-grade::after {
    content: "";
    flex: 1000 1 0;
}

#galeria-grid.galeria-grid > .galeria-vazio { flex: 1 1 100%; max-width: none; }

/* Horizontais e verticais separados ("Horizontais" / "Verticais" no
   início de cada grupo, ver `services._agrupar_por_formato`): cada
   linha fica só com cartões do mesmo formato. */
.galeria-grupo-titulo {
    display: flex;
    flex: 1 1 100%;
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.45rem;
    margin: 0.5rem 0 -0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
}

.galeria-grupo-titulo:first-child { margin-top: 0; }

.galeria-grupo-titulo::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--cfx-borda);
}

/* Secções de "Outros documentos": os verticais vêm depois dos
   horizontais, numa linha nova (o `::before` força a quebra). */
.galeria-grade > [data-formato="vertical"] { order: 2; }
.galeria-grade::after { order: 3; }

.galeria-grade:has(> [data-formato="horizontal"]):has(> [data-formato="vertical"])::before {
    content: "";
    flex: 1 1 100%;
    grid-column: 1 / -1;
    order: 1;
    height: 0;
}

@media (min-width: 768px) {
    #galeria-grid.galeria-grid,
    .galeria-grade { --galeria-linha: 180px; }
}

#galeria-grid.galeria-grid[data-tamanho="pequena"] { --galeria-linha: 150px; }
#galeria-grid.galeria-grid[data-tamanho="grande"] { --galeria-linha: 250px; }

/* Painel: o cartão leva nome, selos e dois botões - mais largo. */
.galeria-pagina--painel #galeria-grid.galeria-grid { --galeria-linha: 200px; }
.galeria-pagina--painel #galeria-grid.galeria-grid > .galeria-item { min-width: 8rem; }

@media (min-width: 768px) {
    .galeria-pagina--painel #galeria-grid.galeria-grid { --galeria-linha: 215px; }
}

.galeria-pagina--painel #galeria-grid.galeria-grid[data-tamanho="pequena"] { --galeria-linha: 185px; }
.galeria-pagina--painel #galeria-grid.galeria-grid[data-tamanho="grande"] { --galeria-linha: 280px; }

/* Telemóvel: duas colunas iguais (como o Canva), cada cartão com o
   formato da sua folha - dois certificados deitados lado a lado. Os
   tamanhos da grelha passam a ser 3 / 2 / 1 colunas. */
@media (max-width: 575.98px) {
    #galeria-grid.galeria-grid,
    .galeria-grade {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1rem 0.75rem;
    }

    #galeria-grid.galeria-grid[data-tamanho="pequena"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #galeria-grid.galeria-grid[data-tamanho="grande"] { grid-template-columns: minmax(0, 1fr); }

    #galeria-grid.galeria-grid::after,
    .galeria-grade::after { content: none; }

    #galeria-grid.galeria-grid > .galeria-item,
    .galeria-grade > .galeria-cartao,
    .galeria-pagina--painel #galeria-grid.galeria-grid > .galeria-item {
        min-width: 0;
        max-width: none;
    }

    #galeria-grid.galeria-grid > .galeria-vazio { grid-column: 1 / -1; }

    /* Cartão estreito: a folha quase encosta ao quadro e o rodapé fica compacto. */
    .galeria-cartao--visual .galeria-thumb { --galeria-margem: 5%; }

    .galeria-cartao-rodape { padding: 0.45rem 0.5rem 0.55rem; }

    .galeria-cartao--visual .galeria-acao-botao {
        padding: 0.3rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* ---- Cartão ---- */
.galeria-cartao {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 1.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.galeria-cartao--padrao {
    border-color: rgba(var(--cfx-primaria-rgb), 0.55);
    box-shadow: 0 0 0 1px rgba(var(--cfx-primaria-rgb), 0.25);
}

.galeria-thumb-botao {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
}

.galeria-thumb-botao:focus-visible {
    outline: 2px solid var(--cfx-primaria);
    outline-offset: -2px;
}

/* A folha (miniatura inteira, sem cortes) sobre um fundo suave da marca. */
.galeria-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Margens que deixam o interior do quadro com o formato exato da
       folha (a de cima/baixo relativa ao lado menor; a dos lados
       multiplicada pela proporção) - a folha enche-o sem sobras. A
       percentagem do CSS é sempre da largura, daí as contas. */
    --galeria-margem: 9%;
    padding:
        calc(var(--galeria-margem) * min(1, 1 / var(--proporcao, 0.7071)))
        calc(var(--galeria-margem) * min(1, var(--proporcao, 0.7071)));
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--cfx-primaria-rgb), 0.1), transparent 70%),
        var(--cfx-superficie-suave);
}

.galeria-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 10px 22px -10px rgba(17, 24, 39, 0.35);
    transition: transform 0.3s ease;
}

.galeria-thumb-icone {
    font-size: 2.5rem;
    color: var(--cfx-texto-secundario);
}

.galeria-thumb-ver {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(17, 24, 39, 0.72);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.galeria-thumb-botao:focus-visible .galeria-thumb-ver {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .galeria-thumb-ver { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
    .galeria-cartao:hover {
        border-color: rgba(var(--cfx-primaria-rgb), 0.35);
        box-shadow: var(--cfx-sombra-elevada);
        transform: translateY(-4px);
    }

    .galeria-cartao:hover .galeria-thumb img {
        transform: scale(1.03);
    }

    .galeria-cartao:hover .galeria-thumb-ver {
        opacity: 1;
        transform: none;
    }
}

.galeria-cartao-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem 0.85rem;
}

.galeria-cartao-nome {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--heading-color);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.galeria-cartao-tipo {
    margin: 0;
    overflow: hidden;
    font-size: 0.78rem;
    color: var(--cfx-texto-secundario);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.galeria-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.galeria-selos:empty {
    display: none;
}

.galeria-selo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.15rem 0.5rem;
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--cfx-texto-secundario);
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--cfx-superficie-suave);
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
}

.galeria-selo--oficial {
    color: var(--cfx-primaria);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    border-color: transparent;
}

.galeria-selo--padrao {
    color: #FFFFFF;
    background: var(--cfx-cta);
    border-color: transparent;
}

.galeria-selo--exemplo {
    color: #92400E;
    background: #FEF3C7;
    border-color: transparent;
}

[data-bs-theme="dark"] .galeria-selo--exemplo {
    color: #FCD34D;
    background: rgba(252, 211, 77, 0.12);
}

.galeria-acao {
    margin-top: auto;
    padding-top: 0.65rem;
}

.galeria-acao-botao {
    width: 100%;
    min-height: 2.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cfx-primaria);
    background: rgba(var(--cfx-primaria-rgb), 0.08);
    border: 0;
    border-radius: 0.65rem;
}

.galeria-acao-botao:hover,
.galeria-acao-botao:focus-visible {
    color: #FFFFFF;
    background: var(--cfx-cta);
}

/* Galeria pública: cartão VISUAL - a folha é o protagonista; por baixo
   só a categoria (discreta) e "Personalizar". O nome do modelo existe
   só para leitores de ecrã (.visually-hidden). */
.galeria-cartao--visual .galeria-thumb {
    --galeria-margem: 7%;
}

.galeria-cartao-rodape {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.55rem 0.65rem 0.7rem;
    border-top: 1px solid var(--cfx-borda);
}

.galeria-cartao-categoria {
    margin: 0;
    overflow: hidden;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.galeria-cartao-rodape .galeria-acao-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

@media (hover: hover) and (pointer: fine) {
    .galeria-cartao--visual:hover .galeria-acao-botao {
        color: #FFFFFF;
        background: var(--cfx-cta);
    }
}

/* "Usar este modelo" - ação principal (cheia); a de duplicar/editar
   fica por baixo, mais leve. */
.galeria-acao-botao--usar {
    color: #FFFFFF;
    background: var(--cfx-cta);
}

.galeria-acao-botao--usar:hover,
.galeria-acao-botao--usar:focus-visible {
    background: var(--cfx-cta-hover, var(--cfx-cta));
}

.galeria-acao-botao--usar + .galeria-acao-botao,
form + form .galeria-acao-botao,
form + a.galeria-acao-botao {
    background: transparent;
}

.galeria-em-uso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #16A34A;
}

.galeria-vazio .card {
    background: var(--cfx-superficie);
    border: 1px dashed var(--cfx-borda);
    border-radius: 1.25rem;
}

.galeria-mais {
    margin-top: 2rem;
    text-align: center;
}

.galeria-mais-botao {
    padding-inline: 2rem;
    font-size: 0.95rem;
    border-radius: 999px;
}

/* ---- Galeria pública: "Outros documentos" ---- */
.galeria-outros {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--cfx-borda);
}

.galeria-outros-titulo {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--heading-color);
    text-align: center;
}

.galeria-outros-sub {
    max-width: 36rem;
    margin: 0.4rem auto 1.25rem;
    color: var(--cfx-texto-secundario);
    text-align: center;
}

.galeria-outros-grupo {
    margin-bottom: 2.25rem;
}

.galeria-outros-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
}

.galeria-outros-grupo-total {
    margin-left: 0.35rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

.galeria-outros-grupo-titulo .bi {
    color: var(--cfx-primaria);
}

/* ---- Pré-visualização ampliada ---- */
.galeria-modal {
    overflow: hidden;
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 24px 48px -12px rgba(17, 24, 39, 0.35);
}

/* Subtítulo vazio (galeria pública) não ocupa espaço no cabeçalho. */
#galeria-modal-subtitulo:empty { display: none; }

.galeria-modal .modal-body {
    padding: 1.25rem;
    background: var(--cfx-superficie-suave);
}

.galeria-modal-folha {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(40vh, 320px);
    margin-inline: auto;
}

.galeria-modal-folha img {
    display: block;
    max-width: 100%;
    /* Desconta o cabeçalho, o rodapé (botão) e as margens da janela: a
       folha inteira cabe sempre no ecrã, sem barra de rolagem. */
    max-height: min(70vh, calc(100vh - 13rem));
    object-fit: contain;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.08), 0 16px 32px -12px rgba(17, 24, 39, 0.35);
}

/* Proporção de uma folha A4 (210:297) - o espaço da miniatura nunca
   "salta" quando a imagem acaba de carregar. */
/* O quadro tem o formato da folha (A4 em pé por omissão). */
.galeria-thumb-a4 {
    aspect-ratio: var(--proporcao, 0.7071);
}

/* O diálogo tem largura limitada e a folha segue a proporção real da
   imagem (horizontal ou A4), limitada em altura pelo ecrã - cabe sempre
   sem scroll, nunca distorcida nem com espaço vazio à volta. */
.galeria-modal-preview-dialog {
    max-width: 480px;
    max-height: 92vh;
}


@media (min-width: 992px) {
    .galeria-modal-preview-dialog { max-width: 720px; }
    .galeria-modal-folha img { max-height: min(76vh, calc(100vh - 13rem)); }
}

/* Skeleton de miniatura - mesma proporção do <img> final, sem CLS. */
.galeria-thumb.a-carregar { position: relative; overflow: hidden; background: var(--bs-tertiary-bg); }
.galeria-thumb.a-carregar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
    animation: galeria-skeleton 1.2s infinite;
}
@keyframes galeria-skeleton { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .galeria-cartao,
    .galeria-thumb img,
    .galeria-thumb-ver,
    .galeria-chip,
    .galeria-filtro,
    .galeria-item-lateral {
        transition: none;
    }

    .galeria-cartao:hover,
    .galeria-cartao:hover .galeria-thumb img {
        transform: none;
    }
}

/* Elemento decorativo de identidade visual do cabeçalho de módulo -
   duas camadas geométricas finas (mesmo espírito da "moldura dupla"
   do Certificado de Mérito Premium, nunca o mesmo elemento), muito
   subtis, só atrás do título/toolbar/pesquisa do cabeçalho - NUNCA
   atrás de tabelas/formulários/gráficos, que ficam sempre fora deste
   `<div>`. `var(--bs-primary)`/`var(--bs-secondary)` já trocam
   sozinhas com o tema (claro/escuro) do Bootstrap - nenhuma regra
   extra de `[data-bs-theme=dark]` é precisa. Aplicado ao `<div>` que
   já envolve o título de cada ecrã (nunca um wrapper novo) - usado em
   todos os módulos principais do painel, na Galeria de Modelos
   pública, e na Biblioteca de Modelos. O Marketplace tem o seu
   próprio componente (`.marketplace-hero-busca`, carrossel
   fotográfico), propositadamente diferente - não usa esta classe. */
.cabecalho-modulo-decorado {
    position: relative;
    padding: 1.5rem 1.5rem 1.75rem;
    overflow: hidden;
    border-radius: 1rem;
}
/* Identidade 2026-09: sem as formas geométricas decorativas de antes
   (cabeçalho limpo, ao estilo Linear/Stripe) - a classe mantém só o
   espaçamento e o contexto de empilhamento, usados por todos os
   módulos. */
.cabecalho-modulo-decorado > * {
    position: relative;
    z-index: 1;
}
/* No painel, o título alinha à esquerda com o conteúdo (tabelas,
   cartões) - igual ao Menu Principal. O recuo lateral era para as
   antigas formas decorativas, que já não existem. */
body.pagina-painel .cabecalho-modulo-decorado {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1rem;
    overflow: visible;
}
/* Uma linha do cabeçalho que contenha um dropdown tem de pintar acima
   das linhas seguintes (ex.: a pesquisa da Biblioteca de Modelos) -
   `position:fixed` no menu (ver templates/base.html) escapa ao
   recorte (`overflow:hidden`) do cabeçalho, mas não escapa ao
   contexto de empilhamento da própria linha - sem isto, o menu aberto
   continuava a pintar atrás da linha seguinte com o mesmo z-index. */
.cabecalho-modulo-decorado > *:has(.dropdown) {
    z-index: 2;
}

body.pagina-painel .btn-sm {
    font-size: var(--fs-painel-btn-sm);
}

body.pagina-painel .btn:not(.btn-sm):not(.btn-lg) {
    font-size: var(--fs-painel-btn);
}

body.pagina-painel .form-control,
body.pagina-painel .form-select,
body.pagina-painel textarea.form-control {
    font-size: var(--fs-painel-input);
}

/* Bloco de identidade do cabeçalho do painel (nome do centro, nome do
   utilizador e cargo no menu do avatar) - ver painel_base.html e
   _avatar_navbar.html. */
.nome-centro-navbar,
.nome-utilizador-navbar {
    font-size: var(--fs-painel-body);
}

.sidebar-painel .navbar-brand {
    font-size: var(--fs-painel-h5);
}

.sidebar-painel .nav-link {
    font-size: var(--fs-painel-body);
}

/* ---- Rede de segurança: qualquer link "esquecido" sem nenhuma classe ----
   Até aqui, o comportamento "sem sublinhado, cor de acento, sublinhado
   só no hover" (`.link-secundario`/`.link-perigo` abaixo) dependia de
   cada ecrã novo se lembrar de aplicar a classe certa a cada `<a>` - o
   que já falhou mais que uma vez (nome do formando na tabela de
   Formandos, nome do formando na Chamada de Assiduidade, ambos com um
   `<a href="...">` nu, a cair no azul/sublinhado por omissão do
   Bootstrap). `:not([class])` só apanha um `<a>` SEM nenhum atributo
   `class` - qualquer elemento com `.btn`/`.dropdown-item`/`.nav-link`/
   `.page-link`/`.alert-link`/`.link-secundario`/etc. já tem um atributo
   `class` e por isso nunca entra em conflito de especificidade com
   essas regras (não precisa de as listar uma a uma em `:not(...)`,
   nem corre o risco de as sobrepor). Serve de rede de segurança para o
   dia em que outro link nu aparecer - não substitui usar
   `.link-secundario`/`.link-perigo` explicitamente, que continua a ser
   a forma preferida de o fazer. */
.conteudo-painel a:not([class]) {
    color: var(--bs-secondary);
    text-decoration: none;
}

.conteudo-painel a:not([class]):hover {
    color: color-mix(in srgb, var(--bs-secondary), black 15%);
    text-decoration: underline;
}

.text-body-secondary {
    color: var(--texto-secundario) !important;
}

/* Utilitários "secondary" do Bootstrap = NEUTRO (estados "Inativo",
   "Rascunho", etapas, círculos de avatar), nunca a cor de acento -
   neste projeto `--bs-secondary` é o acento (índigo), por isso os
   utilitários de fundo/texto/borda são fixados aqui em cinzento. */
.bg-secondary,
.text-bg-secondary,
.badge.bg-secondary {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--cfx-texto) !important;
}

.text-secondary {
    color: var(--texto-secundario) !important;
}

.border-secondary {
    border-color: var(--cfx-borda-campo) !important;
}

/* ---- Vista "Lista de Presença" ao vivo (dentro da Chamada) ----
   Mesma paleta de estados usada no PDF (`apps.listas_presenca.pdf`,
   cores duplicadas de propósito - motores de render diferentes,
   HTML aqui vs. ReportLab lá): F a vermelho, FJ a laranja, dias sem
   aula sombreados com travessão. */
.tabela-lista-presenca .dia-bloqueado {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-color);
}

.tabela-lista-presenca .dia-falta {
    color: var(--bs-danger);
    font-weight: 700;
}

.tabela-lista-presenca .dia-falta-justificada {
    color: #B45F06;
    font-weight: 700;
}

.tabela-lista-presenca .dia-presente {
    color: var(--bs-success);
}

/* ---- Componentes cujas cores o Bootstrap resolve à parte (ver nota
   no topo do ficheiro): sobrepostos explicitamente aqui. ---- */
/* Botões - três níveis, iguais em todo o sistema:
   primário (`.btn-primary`, `.btn-marca`) = CTA #5A5AF2, texto branco;
   secundário (`.btn-secondary`, `.btn-outline-secondary`) = superfície
   com borda #E5E7EB e texto escuro; link (`.btn-link`) = #5A5AF2.
   O CTA NÃO segue `--bs-primary` no modo escuro (que clareia para
   texto): o fundo #5A5AF2 com texto branco já mede 5,0:1 nos dois
   temas. `--bs-btn-active-color` explícito - sem isto um
   `.dropdown-toggle` aberto herdava texto escuro sobre o fundo CTA. */
.btn-primary,
.btn-marca {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cfx-cta);
    --bs-btn-border-color: var(--cfx-cta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cfx-cta-hover);
    --bs-btn-hover-border-color: var(--cfx-cta-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cfx-cta-ativo);
    --bs-btn-active-border-color: var(--cfx-cta-ativo);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cfx-cta);
    --bs-btn-disabled-border-color: var(--cfx-cta);
    --bs-btn-focus-shadow-rgb: var(--cfx-primaria-rgb);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cfx-cta);
    --bs-btn-hover-border-color: var(--cfx-cta);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cfx-cta-ativo);
    --bs-btn-active-border-color: var(--cfx-cta-ativo);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--cfx-texto);
    --bs-btn-bg: var(--cfx-superficie);
    --bs-btn-border-color: var(--cfx-borda-campo);
    --bs-btn-hover-color: var(--cfx-texto);
    --bs-btn-hover-bg: var(--cfx-superficie-suave);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--cfx-texto) 25%, var(--cfx-borda-campo));
    --bs-btn-active-color: var(--cfx-texto);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: color-mix(in srgb, var(--cfx-texto) 25%, var(--cfx-borda-campo));
    --bs-btn-disabled-color: var(--cfx-texto-secundario);
    --bs-btn-disabled-bg: var(--cfx-superficie);
    --bs-btn-disabled-border-color: var(--cfx-borda);
}

.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success), black 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success), black 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-success), black 25%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success), black 30%);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger), black 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger), black 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger), black 25%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger), black 30%);
}

/* Campos (input, select, textarea, data, pesquisa) - superfície, borda
   cinza, raio do sistema, foco #6672F8 com anel de 3px. */
.form-control,
.form-select {
    background-color: var(--cfx-superficie);
    border-color: var(--cfx-borda-campo);
    border-radius: var(--cfx-raio);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--cfx-texto) 30%, var(--cfx-borda-campo));
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cfx-primaria);
    box-shadow: var(--cfx-foco);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bs-secondary-bg);
}

.input-group > .form-control,
.input-group > .form-select {
    box-shadow: none;
}

/* Vários formulários (widgets Django) marcam o <select> com
   `form-control` em vez de `form-select` - sem seta, parecia um campo
   de texto. Mesmo aspeto do `.form-select`, sem mexer em cada form. */
select.form-control:not([multiple]):not([size]) {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Campo de ficheiro - o botão nativo ("Escolher ficheiro") com o
   aspeto do botão secundário, com ou sem `.form-control`. */
input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--cfx-borda-campo);
    border-radius: 0.5rem;
    background: var(--cfx-superficie);
    color: var(--cfx-texto);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: var(--cfx-superficie-suave);
}

/* Campo de ficheiro SEM `.form-control` (widget Django sem classe, ex.:
   "Foto" em Novo formando): ficava inline, colado ao rótulo, e desalinhado
   dos campos vizinhos. Mesmo bloco/altura/borda de qualquer outro campo. */
input[type="file"]:not(.form-control) {
    display: block;
    width: 100%;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.125rem 0.375rem;
    font-size: var(--fs-painel-input, 1rem);
    color: var(--cfx-texto-secundario);
    background-color: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda-campo);
    border-radius: var(--cfx-raio);
}

input[type="file"]:not(.form-control):focus {
    outline: none;
    border-color: var(--cfx-primaria);
    box-shadow: var(--cfx-foco);
}

input[type="file"]:not(.form-control)::file-selector-button {
    padding: 0.125rem 0.75rem;
}

.form-control[type="file"]::file-selector-button {
    margin: 0 0.75rem 0 0;
    border: 0;
    border-right: 1px solid var(--cfx-borda-campo);
    border-radius: 0;
}

.input-group-text {
    background-color: var(--cfx-superficie-suave);
    border-color: var(--cfx-borda-campo);
    color: var(--cfx-texto-secundario);
}

.form-check-input {
    border-color: var(--cfx-borda-campo);
}

.form-check-input:checked {
    background-color: var(--cfx-cta);
    border-color: var(--cfx-cta);
}

.form-check-input:focus {
    border-color: var(--cfx-primaria);
    box-shadow: var(--cfx-foco);
}

.form-label {
    font-weight: 500;
}

/* Tabelas - cabeçalho sem fundo (nunca cabeçalhos coloridos), rótulos
   em cinza, linhas separadas por uma borda suave, hover discreto. O
   `thead.table-light` (65 tabelas) segue a mesma regra. */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--cfx-borda);
    --bs-table-hover-bg: color-mix(in srgb, var(--cfx-primaria) 5%, transparent);
    --bs-table-hover-color: var(--bs-body-color);
}

.table > thead,
.table > thead.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cfx-texto-secundario);
}

.table > thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cfx-texto-secundario);
    border-bottom-color: var(--cfx-borda);
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.table-sm > :not(caption) > * > * {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.pagination {
    --bs-pagination-color: var(--cfx-texto);
    --bs-pagination-bg: var(--cfx-superficie);
    --bs-pagination-border-color: var(--cfx-borda);
    --bs-pagination-hover-color: var(--cfx-texto);
    --bs-pagination-hover-bg: var(--cfx-superficie-suave);
    --bs-pagination-hover-border-color: var(--cfx-borda);
    --bs-pagination-border-radius: var(--cfx-raio);
}

/* Estados "ativo" com fundo cheio: sempre o CTA (#5A5AF2), nunca
   `--bs-primary` - no modo escuro essa clareia para #8B94FA, onde o
   texto branco ficaria abaixo de 3:1. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--cfx-cta);
    --bs-nav-pills-border-radius: var(--cfx-raio);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--cfx-borda);
    --bs-dropdown-border-radius: var(--cfx-raio);
    --bs-dropdown-box-shadow: var(--cfx-sombra-elevada);
    --bs-dropdown-link-hover-bg: var(--cfx-superficie-suave);
    --bs-dropdown-bg: var(--cfx-superficie);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--cfx-cta);
    color: #fff;
}

.list-group-item.active {
    background-color: var(--cfx-cta);
    border-color: var(--cfx-cta);
}

.pagination {
    --bs-pagination-active-bg: var(--cfx-cta);
    --bs-pagination-active-border-color: var(--cfx-cta);
    --bs-pagination-focus-box-shadow: var(--cfx-foco);
}

.progress-bar {
    background-color: var(--cfx-primaria);
}

/* Botões - raio moderno (não "pill"). Tamanho normal compacto (listas e
   formulários do painel); `.btn-lg` = CTA grande, 48px de altura. */
.btn {
    border-radius: var(--cfx-raio);
    font-family: var(--bs-body-font-family);
    font-weight: 500;
    --bs-btn-focus-box-shadow: var(--cfx-foco);
}

.btn-lg {
    min-height: 48px;
    border-radius: 0.75rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-sm {
    border-radius: 0.5rem;
}

.card, .alert {
    border-radius: var(--cfx-raio-cartao);
}

.badge {
    border-radius: 0.375rem;
    font-weight: 500;
}

.modal {
    --bs-modal-border-radius: var(--cfx-raio-cartao);
    --bs-modal-border-color: var(--cfx-borda);
}

/* Cartões - um só estilo em todo o sistema: superfície branca (grafite
   no escuro), borda #E5E7EB, sombra quase impercetível, raio 16px. */
.card {
    --bs-card-bg: var(--cfx-superficie);
    --bs-card-border-color: var(--cfx-borda);
    --bs-card-border-radius: var(--cfx-raio-cartao);
    --bs-card-inner-border-radius: calc(var(--cfx-raio-cartao) - 1px);
    --bs-card-cap-bg: transparent;
    background-color: var(--cfx-superficie);
    border-color: var(--cfx-borda);
    box-shadow: var(--cfx-sombra-cartao);
}

/* `.shadow`/`.shadow-sm` em cartões ficam na sombra do sistema - nunca
   sombras pesadas espalhadas pelo projeto. */
.card.shadow,
.card.shadow-sm {
    box-shadow: var(--cfx-sombra-cartao) !important;
}

/* Métrica de um cartão de indicadores - número na primária. */
.card-modulo .fw-bold,
.valor-metrica {
    color: var(--cfx-primaria);
    font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .card-modulo .fw-bold,
[data-bs-theme="dark"] .valor-metrica {
    color: #A5ACFB;
}

.section-titulo h2 {
    font-weight: 700;
}

/* ---- Link de identificação (nome clicável que abre um registo) ----
   Ex: nome do formando na tabela de Formandos/Chamada. Ao contrário de
   `.link-secundario` (ações como "Editar"/"Ver ficha"), aqui mantém-se
   a cor de link por omissão do Bootstrap (`var(--bs-link-color)`, não
   sobreposta) - só se tira o sublinhado permanente, que voltava a
   aparecer no hover para não perder a affordance de "isto é clicável". */
.link-identificacao {
    text-decoration: none;
}

.link-identificacao:hover {
    text-decoration: underline;
}

/* ---- Link secundário do hero (ao lado do botão principal) ----
   Cor de acento (não `--bs-primary`), sem sublinhado por omissão - a
   cor + a seta já bastam para se ler como clicável - com sublinhado
   só a aparecer no hover, para dar feedback sem enfraquecer o estado
   de repouso. `--bs-secondary-text` (não `--bs-secondary` puro) - ver
   a nota no :root sobre o dourado "objeto" vs. "texto": como TEXTO,
   `--bs-secondary` sozinho não chega ao mínimo AA de contraste. */
.link-secundario {
    color: var(--bs-secondary-text);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.link-secundario:hover {
    color: color-mix(in srgb, var(--bs-secondary-text), black 15%);
    text-decoration: underline;
}

/* Par de `.link-secundario` para ações destrutivas (Eliminar/Remover/
   Cancelar/Suspender) fora de um menu de ações - mesmo comportamento
   (sem sublinhado em repouso, só no hover), cor de perigo em vez do
   acento da marca, porque aqui a cor É o aviso. Dentro de um
   `{% menu_acoes %}` usa-se antes `.dropdown-item.text-danger` - o
   dropdown já não sublinha por omissão, não precisa desta classe. */
.link-perigo {
    color: var(--bs-danger);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.link-perigo:hover {
    color: color-mix(in srgb, var(--bs-danger), black 15%);
    text-decoration: underline;
}

/* As duas classes também são usadas em <button> (ações POST dentro de
   um <form>, ex.: "Remover" em Formadores - 22 casos): sem isto o botão
   ficava com o fundo/borda nativos do browser e não parecia um link. */
button.link-secundario,
button.link-perigo {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    line-height: inherit;
    cursor: pointer;
}

button.link-secundario:focus-visible,
button.link-perigo:focus-visible {
    outline: 2px solid var(--cfx-primaria);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ---- Menu de ações "⋮" (ver core/templatetags/menu_acoes.py) ----
   Para linhas de tabela/listagem com 3+ ações - substitui os links em
   linha (que obrigavam a tabela a quebrar para uma segunda linha em
   ecrãs como Turmas, que chegava a ter 6). */
.menu-acoes-botao {
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.menu-acoes-botao:hover,
.menu-acoes-botao:focus,
.menu-acoes-botao:active {
    color: var(--bs-secondary) !important;
    background: transparent !important;
}

/* Caixa e letra mais compactas do que o dropdown por omissão do
   Bootstrap - é uma lista de ações rápidas, não texto para ler com
   calma, por isso ganha mais lendo-se ligeiramente mais pequena e
   apertada do que o resto da interface. */
.menu-acoes .dropdown-menu {
    min-width: 11rem;
    font-size: 0.8125rem;
    padding: 0.25rem;
}
/* Contentor no fim do <body> para onde o menu aberto é movido (ver
   `base.html`): acima de colunas fixas e cabeçalhos da página, abaixo
   da barra fixa do topo e dos modais. */
.menu-acoes-portal { position: relative; z-index: 1015; }

/* Menu mais alto do que o espaço visível: rola dentro de si próprio
   (a altura máxima é calculada ao abrir - ver `base.html`). */
.menu-acoes .dropdown-menu.menu-acoes-rolavel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.menu-acoes .dropdown-menu .dropdown-item {
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
}

.menu-acoes .dropdown-menu .dropdown-item:hover,
.menu-acoes .dropdown-menu .dropdown-item:focus {
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
}

.menu-acoes .dropdown-menu .dropdown-item.text-danger:hover,
.menu-acoes .dropdown-menu .dropdown-item.text-danger:focus {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
}

/* ---- Cards de módulo (landing page) ----
   40px de gutter-x é maior do que o padding lateral do `.container` a
   partir dos 768px (20-24px, ver a regra de "respiro lateral mínimo em
   tablet" acima) - sem este ajuste, a margem negativa que o `.row` usa
   para compensar o gutter ultrapassa esse padding e a página ganha
   scroll horizontal em mobile/tablet (confirmado com Playwright a
   375px: 8px de overflow de cada lado). Volta ao valor normal só a
   partir de lg (992px), onde o padding do `.container` já sobe para
   24px - exatamente metade de 48px, sem overflow nenhum. */

/* Compensa o cabeçalho fixo ao saltar para uma âncora (#como-funciona,
   #modulos, ligados a partir do rodapé) - sem isto o topo da secção
   fica escondido atrás do header. */
#como-funciona,
#modulos {
    scroll-margin-top: 5.5rem;
}

/* ---- Secção "Perguntas Frequentes" ----
   `--bs-accordion-active-color`/`-active-bg` já herdam a marca (vêm de
   `--bs-primary-text-emphasis`/`-bg-subtle`, redefinidos no :root lá
   em cima). O ícone da seta é que não - o Bootstrap compilado grava a
   cor do traço dentro do próprio SVG em base64, não numa variável, por
   isso tem de ser substituído aqui por um SVG igual mas na cor de
   acento. */
.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A5AF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A5AF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow: var(--cfx-foco);
    --bs-accordion-border-color: transparent;
}

.accordion-item {
    border: none;
}

/* ---- Secção "Como Funciona" ---- */

/* Indicadores do dashboard - cartão neutro (sem a antiga barra
   dourada no topo); o destaque fica no valor (`.card-modulo .fs-5`/
   `.fw-bold` - ver regra da métrica abaixo). */
.card-modulo {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-modulo:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cfx-primaria) 35%, var(--cfx-borda));
    box-shadow: var(--cfx-sombra-elevada);
}

/* Cartões "O que resolves com o Certifixe" (só na landing - o
   `.card-modulo` acima é dos indicadores do dashboard e não muda).
   Borda superior no tom do ícone do cartão (ver `.tom-*`), mas
   discreta: fina e esbatida, para nunca competir com o título. */
/* A animação de entrada (`.reveal`) fica no `.col` à volta deste
   cartão (ver _modulo_card.html), nunca no próprio cartão - se
   ficasse aqui, `.reveal.mostrar { transform }` anulava a elevação do
   hover e a transição da entrada (com o atraso escalonado) substituía
   a do hover. */

/* Só com rato/trackpad: em ecrãs táteis o :hover "fica preso" depois
   de um toque. A sombra do hover (`--micro-sombra-hover`) tem uma
   versão própria no tema escuro, onde os cartões já têm uma sombra de
   repouso mais forte - senão o cartão pareceria perder profundidade. */

/* ===== Entrada progressiva (sistema único de entrada dos elementos) =====
   Um só motor - o script "Entrada progressiva" em templates/base.html
   (IntersectionObserver, também usado pela landing) - com duas formas de
   marcar os elementos:
   - manual, nos templates: `.reveal`, `.reveal-esq`, `.reveal-dir`,
     `.reveal-seta`, com a ordem em `--cfx-d` inline (ex.: 0/60/120ms);
   - automática: `.cfx-revelar`, posta pelo script por hierarquia em cada
     secção (título -> texto -> CTA -> visual -> cartões), sem editar os
     templates.
   O estado escondido só existe com `html.cfx-entrada` (JS a correr, sem
   movimento reduzido, fora dos Designers) - sem isso tudo aparece logo.
   Ao entrar no ecrã, `.mostrar` corre UMA animação (só opacity/transform,
   fill `backwards`: no fim não fica transform nenhum, por isso hovers,
   dropdowns e `position: fixed` ficam intactos) e o script marca
   `.cfx-revelado`, que a desliga - nunca repete, nem ao sair do ecrã. */
html.cfx-entrada :is(.reveal, .reveal-esq, .reveal-dir, .reveal-seta, .cfx-revelar):not(.mostrar) {
    opacity: 0;
}
.reveal,
.cfx-revelar {
    --cfx-de: translateY(12px);
}
.reveal-esq {
    --cfx-de: translateX(-16px);
}
.reveal-dir {
    --cfx-de: translateX(16px);
}
.reveal-seta {
    --cfx-de: none;
}
/* Colunas empilhadas (abaixo de lg): sem deslize lateral. Antes, um
   `.reveal-dir` ainda por revelar ficava parado em translateX(24px) e
   alargava o documento (24px de scroll horizontal na landing a 390/414px);
   agora o deslocamento só existe durante a própria animação e, aqui,
   é vertical. */
@media (max-width: 991.98px) {
    .reveal-esq,
    .reveal-dir {
        --cfx-de: translateY(12px);
    }
}
html.cfx-entrada :is(.reveal, .reveal-esq, .reveal-dir, .reveal-seta, .cfx-revelar).mostrar:not(.cfx-revelado) {
    animation: cfx-entrada-item 360ms cubic-bezier(.22, 1, .36, 1) calc(var(--cfx-base, 0ms) + var(--cfx-d, 0ms)) backwards;
}
@keyframes cfx-entrada-item {
    from { opacity: 0; transform: var(--cfx-de); }
}
@media (prefers-reduced-motion: reduce) {
    html.cfx-entrada :is(.reveal, .reveal-esq, .reveal-dir, .reveal-seta, .cfx-revelar) {
        opacity: 1;
        animation: none;
    }
}

body {
    min-height: 100vh;
    /* Rede de segurança para `.reveal-esq`/`.reveal-dir` (ver mais
       abaixo): antes de entrarem no ecrã, estes elementos começam
       deslocados +-24px via `transform: translateX(...)` - um
       elemento ainda por revelar mais abaixo na página (fora do
       ecrã verticalmente) continua a contar para a largura total do
       documento enquanto esse deslocamento não é anulado, o que
       criava scroll horizontal em mobile mesmo sem nenhum conteúdo
       realmente mais largo do que o ecrã (confirmado com Playwright a
       375px). `overflow-x: hidden` no `<body>` é a correção padrão
       para animações de entrada por `transform` - não corta nenhum
       conteúdo real, porque nenhuma secção depende de scroll
       horizontal no eixo X do body (a única exceção deliberada,
       `.comparacao-excel-scroll`, tem o seu PRÓPRIO scroll interno,
       que continua a funcionar normalmente). */
    overflow-x: hidden;
}

/* ---- Botão de alternância de tema: só um dos dois ícones aparece ---- */
.icone-tema-escuro {
    display: none;
}

[data-bs-theme="dark"] .icone-tema-claro {
    display: none;
}

[data-bs-theme="dark"] .icone-tema-escuro {
    display: inline;
}

/* ---- Avatar de utilizador na barra de topo (abre "Meu Perfil") ---- */
.avatar-navbar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    color: var(--texto-secundario);
    font-size: 1.5rem;
    line-height: 1;
    transition: border-color 0.15s ease;
}

.avatar-navbar:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.avatar-navbar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Largura do nome do centro na barra superior ----
   `max-width` em `clamp()` (não um rem fixo) - dá mais espaço ao nome
   em ecrãs largos e encolhe automaticamente em ecrãs estreitos,
   sempre dentro de `text-truncate` (overflow:hidden + ellipsis já
   aplicado no template) - um nome de centro comprido nunca ultrapassa
   a sua caixa nem sobrepõe o botão de tema/avatar ao lado, só corta
   com "..." e mostra o nome completo no `title` (tooltip) do
   contentor. O `font-size` de `.nome-centro-navbar`/`.nome-
   utilizador-navbar` vem da escala responsiva centralizada
   (`--fs-painel-body`, ver `body.pagina-painel` mais abaixo), não
   fica fixo aqui. */
.nome-centro-navbar {
    max-width: clamp(5rem, 18vw, 11rem);
}

/* Desktop: a barra tem espaço de sobra - o nome do centro aparece
   inteiro, sem "..."; um nome muito comprido passa a uma segunda linha
   em vez de ser cortado. */
@media (min-width: 992px) {
    .info-centro-navbar .nome-centro-navbar {
        max-width: min(40vw, 34rem);
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
}

/* Mesma lógica para o nome do utilizador ao lado (antes um `max-width`
   fixo de 12rem inline no template - em ecrãs estreitos, 12rem (192px)
   já não cabia ao lado do nome do centro + ícones, e como nenhum dos
   dois lados tinha `overflow-x` a compensar, o excesso empurrava a
   página inteira para um scroll horizontal indesejado em mobile
   (confirmado: scrollWidth > clientWidth). `clamp()` mais apertado que
   o do centro (este vem depois na fila, com menos espaço sobrando). */
.nome-utilizador-navbar {
    max-width: clamp(3.5rem, 22vw, 12rem);
}

/* Telemóvel: o espaço vai para o nome do centro. O nome do utilizador
   sai da barra (continua no topo do menu do avatar, ao tocar) e o nome
   do centro ocupa todo o espaço livre, em até 2 linhas a ~13px; só um
   nome que nem assim caiba é cortado no fim da 2.ª linha (tocar mostra-o
   inteiro, ver painel_base.html). A barra mantém a altura fixa
   (`--header-height`), alinhada com a da barra lateral. */
@media (max-width: 575.98px) {
    .barra-cabecalho-painel .nome-utilizador-navbar,
    .barra-cabecalho-painel .dropdown > button > .bi-chevron-down {
        display: none;
    }

    .barra-cabecalho-acoes {
        flex: 1 1 auto;
        justify-content: flex-end;
        min-width: 0;
        margin-left: 0.5rem;
    }

    .barra-cabecalho-acoes .info-centro-navbar {
        flex: 0 1 auto;
        min-width: 0;
    }

    .info-centro-navbar .nome-centro-navbar {
        display: -webkit-box;
        max-width: none;
        overflow: hidden;
        font-size: 0.8125rem;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .info-centro-navbar[role="button"] {
        cursor: pointer;
    }

    .info-centro-navbar[role="button"]:focus-visible {
        border-radius: 0.5rem;
        outline: none;
        box-shadow: var(--cfx-foco);
    }

    .popover-nome-centro {
        max-width: calc(100vw - 2rem);
    }
}

/* ---- Cabeçalho público (site institucional) ---- */
.cabecalho-publico {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.cabecalho-publico .nav-link {
    font-weight: 500;
    /* `--fs-small` (escala tipográfica da landing, ver mais abaixo) -
       variável centralizada, não um valor solto - envolvida em `max()`
       com 0.875rem (14px, o piso de legibilidade já documentado nesta
       mesma escala) para nunca ficar pequeno demais nos breakpoints
       tablet/mobile, onde `--fs-small` desce a 12.5-12.8px. Na prática
       resolve para exatamente 14px em qualquer ecrã - uma redução
       deliberada face ao tamanho herdado por omissão (16px), mas
       nunca abaixo do mínimo de legibilidade pedido. O fallback do
       `var()` replica o valor desktop da própria escala, para páginas
       públicas fora de `body.pagina-landing` (Preços, Verificar
       Certificado, Modelos, ...) ficarem com o mesmo tamanho. */
    font-size: max(var(--fs-small, 0.825rem), 0.875rem);
    /* `.nav-link` "nu" (fora de `.navbar-nav`) não herda o padding do
       Bootstrap (`--bs-nav-link-padding-x/y` só existe dentro de
       `.nav`) - passava a 0 em todos os lados. Fixo em rem (nunca
       relativo à fonte): a área de clique/toque não encolhe com o
       texto, sobretudo em ecrãs táteis (tablet, onde a navbar
       colapsada empilha os links verticalmente). */
    padding: 0.55rem 0.25rem;
}

/* Botão "Criar Conta Gratuitamente" da navbar pública - altura própria
   (~48px) para se destacar dos links de texto ao lado, sem chegar ao
   tamanho de .btn-lg (pensado para o Hero/CTA final, não para caber
   numa barra de navegação). */
.btn-navbar-cta {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ---- Cabeçalho da sidebar + barra superior do conteúdo (painel) ----
   As duas linhas divisórias (a ocre por baixo do logotipo, a cinzenta
   por baixo da barra superior) só formam uma reta contínua se as duas
   barras tiverem exatamente a mesma altura - por isso partilham esta
   classe em vez de cada uma definir o seu próprio py-* utilitário
   (que dava alturas diferentes consoante o conteúdo de cada lado). */
:root {
    --header-height: 65px;
}

.barra-cabecalho-painel {
    height: var(--header-height);
}

/* Espaço entre a barra superior e o título de cada página do painel -
   uma única variável partilhada (ver painel_base.html, `<main>`) em
   vez de cada página definir o seu próprio `py-*`, que dava valores
   diferentes (algumas páginas tinham `py-4` a mais, outras nenhum) e
   nalguns casos um espaço vazio exagerado antes do título. */
:root {
    --espaco-topo-conteudo: 1.25rem;
}

/* Espaço no FUNDO do conteúdo - sem isto, o último elemento de
   qualquer página do painel (ex.: botão "Guardar" em Automações →
   Mensagens de Notificação) acaba exatamente à altura 0 do fim da
   página, em QUALQUER largura de ecrã (confirmado com Playwright:
   0px de espaço abaixo do botão em mobile/tablet/desktop por igual).
   Em desktop isso passa despercebido porque o ecrã costuma ser mais
   alto do que o conteúdo, por isso raramente se chega ao fundo real
   da página a fazer scroll; em tablet/mobile, onde o conteúdo obriga
   a scroll até ao fim, o corte fica visível - lê-se como "botão
   colado ao fundo". Mesma classe `.conteudo-painel` usada em todos os
   ecrãs do painel (ver nota acima), por isso uma correção aqui cobre
   o sistema todo, não só este ecrã. */
:root {
    --espaco-fundo-conteudo: 2rem;
}

.conteudo-painel {
    padding-top: var(--espaco-topo-conteudo);
    padding-bottom: var(--espaco-fundo-conteudo);
}

/* ---- Barra lateral do painel (autenticado) - paleta da marca ----
   `height` (não `min-height`) + `sticky` - com `min-height`, a
   sidebar crescia à vontade conforme o número de itens de menu,
   nunca ficando "presa" ao ecrã; sem limite de altura, o
   `overflow-y-auto` já existente no `<nav>` de painel_base.html
   nunca tinha onde estourar, e quem acabava a scrollar era a página
   inteira - arrastando o cabeçalho da sidebar (logotipo + botão de
   recolher) para fora do ecrã junto com os itens do fundo. Com
   `height:100vh` + `sticky`, a sidebar fica sempre visível e do
   tamanho do ecrã, e só a lista de itens (dentro do `<nav>`) scrolla
   sozinha quando não cabe - o cabeçalho fica de fora dessa área,
   como já estava estruturado no HTML. Em mobile (ver
   `@media max-width:991.98px` mais abaixo) já usa `position:fixed`
   com `inset`, que sobrepõe isto sem conflito. */
/* Identidade 2026-09: branca no tema claro, grafite no escuro (nunca
   blocos azul-escuro) - separada do conteúdo só por uma borda fina. */
:root,
[data-bs-theme="light"] {
    --sidebar-fundo: #FFFFFF;
    --sidebar-borda: #E5E7EB;
    --sidebar-texto: #111827;
    --sidebar-icone: #6B7280;
    --sidebar-titulo: #6B7280;
    --sidebar-hover: #F3F4F6;
    --sidebar-ativo-fundo: rgba(102, 114, 248, 0.10);
    --sidebar-ativo-texto: #4848DE;
    --sidebar-ativo-icone: #6672F8;
    --sidebar-scroll: rgba(17, 24, 39, 0.18);
}

[data-bs-theme="dark"] {
    --sidebar-fundo: #16171A;
    --sidebar-borda: #2A2C31;
    --sidebar-texto: #ECEDEF;
    --sidebar-icone: #9CA3AF;
    --sidebar-titulo: #8B919C;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-ativo-fundo: rgba(139, 148, 250, 0.14);
    --sidebar-ativo-texto: #C3C8FD;
    --sidebar-ativo-icone: #A5ACFB;
    --sidebar-scroll: rgba(255, 255, 255, 0.18);
}

.sidebar-painel {
    position: sticky;
    top: 0;
    width: 260px;
    height: 100vh;
    background-color: var(--sidebar-fundo);
    color: var(--sidebar-texto);
    border-right: 1px solid var(--sidebar-borda);
}

.sidebar-painel .sidebar-cabecalho,
.sidebar-painel > .navbar-brand {
    border-bottom: 1px solid var(--sidebar-borda) !important;
}

/* O comentário acima já explica o `height:100vh` + `sticky` - mas
   isso só funciona se o `<nav>` (o item flex que deve absorver o
   overflow) puder encolher abaixo do tamanho do seu conteúdo. Por
   omissão, um item flex tem `min-height:auto`, que usa a altura
   MÍNIMA DE CONTEÚDO como piso - com muitos itens de menu (ex.: a
   secção "Financeiro & Resultados"), esse piso passa a ultrapassar
   os 100vh disponíveis, e o algoritmo de flex-shrink (que atua sobre
   TODOS os irmãos, não só o que estourou) acaba por encolher também
   o `.sidebar-cabecalho` - quebrando a altura fixa de
   --header-height e desalinhando a linha divisória da barra superior
   (ver `.barra-cabecalho-painel`). `min-height:0` no `<nav>` remove
   esse piso, deixando-o encolher livremente e scrollar por dentro
   (`overflow-y-auto`, já existente); `flex-shrink:0` no cabeçalho é
   uma segunda garantia direta, para nunca mais depender do
   comportamento por omissão do flex nesta zona. */
.sidebar-painel > nav {
    min-height: 0;
}

.sidebar-cabecalho {
    flex-shrink: 0;
}

/* Escondido por omissão (sidebar expandida, ou em mobile - que nunca
   tem estado "recolhida", só overlay de largura total) - só aparece
   dentro de `html[data-sidebar="recolhida"]`, ver media query mais
   abaixo. */
.logo-sidebar-icone {
    display: none;
}

/* Barra de scroll fina e discreta, só na lista de itens da sidebar
   (nunca genérica em toda a app) - Firefox (`scrollbar-*`) e
   Chrome/Edge/Safari (`::-webkit-scrollbar`). Cor neutra clara e
   semi-transparente sobre o fundo azul-marinho da sidebar, visível
   mas discreta em qualquer estado (expandida ou recolhida - a regra
   não depende da largura). */
.sidebar-painel nav {
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-scroll) transparent;
}

.sidebar-painel nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-painel nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-painel nav::-webkit-scrollbar-thumb {
    background-color: var(--sidebar-scroll);
    border-radius: 50px;
}

.sidebar-painel nav::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--sidebar-icone) 60%, transparent);
}

/* Botão de recolher/expandir - ver painel_base.html. Só existe a
   partir do breakpoint lg: em mobile a sidebar já é um menu de
   overlay (ver @media max-width 991.98px mais abaixo), controlado
   pelo botão hamburger separado no cabeçalho - as duas lógicas nunca
   se misturam porque esta secção fica toda dentro de min-width:992px. */
#botao-recolher-sidebar i {
    transition: transform 0.2s ease;
}

/* Pega de arrasto (redimensionamento com encaixe - ver
   static/js/sidebar-resize.js) - só existe/visível a partir de lg
   (`d-none d-lg-block` no template), mesmo breakpoint de toda a
   lógica de recolher/expandir. Faixa larga o suficiente para ser fácil
   de agarrar (10px), mas só pinta uma linha fina encostada à borda -
   o resto é área de clique invisível. Fica sempre DENTRO da caixa da
   sidebar (nunca `right` negativo): a área de conteúdo principal é um
   irmão flex a seguir no DOM e pinta-se por cima de qualquer parte da
   pega que ultrapassasse a borda, bloqueando o rato nessa zona.*/
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}

/* A barra de scroll nativa da lista de itens (ver `.sidebar-painel
   nav::-webkit-scrollbar` acima) pinta-se sempre por cima de tudo,
   independentemente de `z-index` - nenhum CSS de camadas resolve
   isso. `margin-right` empurra a scrollbar 10px para dentro, para
   nunca ocupar os mesmos pixels da pega de arrasto acima - sem isto,
   as duas zonas de clique ficavam sobrepostas e arrastar a pega era
   quase sempre interpretado como scroll da lista. */
.sidebar-painel nav {
    margin-right: 10px;
}

.sidebar-resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.sidebar-resize-handle:hover::after,
.sidebar-resize-handle.a-arrastar::after {
    background-color: var(--cfx-primaria);
}

@media (min-width: 992px) {
    .sidebar-painel {
        width: var(--sidebar-largura, 260px);
        transition: width 0.25s ease;
    }

    html[data-sidebar="recolhida"] .sidebar-painel {
        width: 70px;
    }

    /* `.nav-texto` cobre o texto "Certifixe" e os rótulos dos links - em
       todos os casos o ícone (irmão, fora do span) fica visível, só o
       texto desaparece. */
    html[data-sidebar="recolhida"] .sidebar-painel .nav-texto,
    html[data-sidebar="recolhida"] .sidebar-painel .nav-section-title {
        display: none;
    }

    /* Logótipo completo (ícone+nome, mesma imagem do rodapé/login -
       "CertifiXe" com o X maiúsculo e o acento laranja em "Xe", nunca
       o "Certifixe" simples em texto corrido que aqui estava antes)
       cabe no cabeçalho expandido; recolhida, só o ícone (`.logo-
       sidebar-icone`, escondido por omissão logo abaixo) tem espaço. */
    html[data-sidebar="recolhida"] .sidebar-painel .logo-sidebar-icone {
        display: inline-flex;
    }

    /* Recolhida, o cabeçalho passa a ter logotipo + botão empilhados -
       `height` continua fixo em --header-height (a linha divisória tem
       de se manter alinhada com a barra superior mesmo aqui), por isso
       o gap fica mais apertado do que no estado expandido para os dois
       elementos (32px + 28px) caberem nos --header-height (65px). */
    /* `!important` - o template tem `justify-content-between` (utilitário
       do Bootstrap, também `!important`), que empurrava o símbolo contra
       o topo e o botão contra o fundo. */
    html[data-sidebar="recolhida"] .sidebar-painel .sidebar-cabecalho {
        flex-direction: column;
        justify-content: center !important;
        gap: 0.375rem;
    }

    /* Sem o padding vertical da `.navbar-brand` do Bootstrap (10px) e
       com o símbolo a 24px: logótipo + botão + intervalo cabem nos 65px
       do cabeçalho sem o símbolo ficar cortado no topo. */
    html[data-sidebar="recolhida"] .sidebar-painel .navbar-brand {
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    html[data-sidebar="recolhida"] .sidebar-painel .logo-sidebar-icone img {
        height: 24px;
    }

    html[data-sidebar="recolhida"] .sidebar-painel .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        border-left: none;
    }

    html[data-sidebar="recolhida"] .sidebar-painel .nav-link i {
        margin-right: 0 !important;
        font-size: 1.05rem;
    }

    html[data-sidebar="recolhida"] #botao-recolher-sidebar i {
        transform: rotate(180deg);
    }
}

/* ---- Página do Marketplace - espaçamento do topo ----
   Reduzido para caber nos 50-65px pedidos entre a navbar e o início
   da secção (o `py-5` do Bootstrap sozinho dava 48px, próximo mas
   fora do intervalo pedido, e sem controlo fino). */
.marketplace-secao {
    padding-top: 56px;
    padding-bottom: 3rem;
}

/* ---- Filtros do Marketplace - dois níveis ----
   Nível principal (Província/Área/Modalidade/Data de Início) sempre
   visível dentro de `#filtros-secundarios` (que por sua vez só
   colapsa abaixo de `lg` - `d-lg-block` no template força-o sempre
   aberto em ecrã largo, mecanismo já existente, não novo). "Filtros
   avançados" é um SEGUNDO `collapse` aninhado, sempre recolhido por
   omissão em qualquer largura de ecrã. */
.marketplace-filtros-painel {
    transition: none;
}

@media (max-width: 991.98px) {
    /* Em mobile, `#filtros-secundarios` deixa de ser um painel inline
       por baixo da pesquisa e passa a cobrir o ecrã inteiro enquanto
       aberto - o mesmo `<div class="collapse">` de sempre, só que
       aqui ganha `position:fixed` durante o estado aberto/a abrir.
       Continua a ser um único `<form>`, os mesmos campos, nunca uma
       cópia. */
    #filtros-secundarios.show,
    #filtros-secundarios.collapsing {
        position: fixed;
        inset: 0;
        z-index: 1060;
        overflow-y: auto;
        background: var(--bs-body-bg);
        padding: 1rem;
        margin: 0;
        border-radius: 0;
    }
}

/* `body { overflow-x: hidden }` (ver mais acima, proteção genérica
   contra scroll horizontal das animações de entrada `.reveal-esq`/
   `.reveal-dir` da landing page) também recorta, na prática, QUALQUER
   descendente `position:fixed`, em qualquer profundidade - não só
   `overflow:hidden` de um ancestral direto (confirmado com Playwright:
   mover o recorte de cantos arredondados para o próprio carrossel, ver
   nota em `.marketplace-hero-busca`, não resolveu sozinho; só ao
   remover isto do `<body>` é que o botão de fechar do painel mobile
   passou a ser clicável). `static/marketplace/busca_resultados.js`
   (não, na verdade um pequeno script à parte, ver busca.html) liga/tira
   esta classe do `<body>` exatamente quando `#filtros-secundarios`
   abre/fecha - nunca permanentemente, para não reintroduzir o scroll
   horizontal que a regra original evita nas páginas que têm `.reveal-
   esq`/`.reveal-dir` (o Marketplace não tem nenhum). */
body.marketplace-filtros-abertos {
    overflow-x: visible;
}

/* ---- Campos de preço - alinhados com as restantes colunas de filtro
   (mesma grelha `col-sm-6 col-lg-3`, ver template) e com formatação
   visual "45.000 Kz" (reutiliza `window.formatarKz`, ver `static/js/
   formatar-kz.js` e `static/js/marketplace/campo-preco.js`) - o
   `<input>` visível NUNCA tem atributo `name`; o valor limpo (só
   dígitos) vive num `<input type="hidden">` irmão, que é o único que
   a filtragem (`_para_decimal` em views.py) chega a ver. */
.campo-preco-marketplace {
    position: relative;
}

/* ---- Selo real do tipo de certificado (Conclusão/Participação) -
   mesma distinção já usada pelo filtro "Certificado" (`curso.
   modelo_certificado.estilo`), nunca um selo de confiança inventado. */
.badge-certificado-conclusao {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.badge-certificado-participacao {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* ---- Ecrã de autenticação (login / definir password) - duas colunas ----
   Reformulado a pedido explícito: a versão anterior (bloco único,
   formulário sobreposto à imagem com overlay) foi substituída por
   duas colunas distintas - a fotografia é só reforço de marca (coluna
   esquerda), o formulário vive isolado num cartão TOTALMENTE OPACO
   (coluna direita), sem overlay nem imagem por baixo de si. A foto
   não deve competir visualmente com o momento de maior confiança da
   sessão. */
.pagina-autenticacao {
    /* Reduzido de 130px/110px (ficava com um vão grande a mais por
       baixo da navbar, confirmado pelo utilizador) - 56px chega para
       separar visualmente da navbar sem "empurrar" os painéis para
       baixo. `max()` com `env(safe-area-inset-*)` - em dispositivos
       com notch/ilha dinâmica, o espaçamento nunca fica apertado
       contra a área de sistema. */
    padding-top: max(56px, calc(40px + env(safe-area-inset-top)));
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.autenticacao-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 992px) {
    /* 55/45 exato, pedido explicitamente - `fr` unicamente para
       manter a proporção mesmo que o conteúdo de um dos lados cresça,
       nunca 55%/45% fixos em `%`, que arredondam de forma inconsistente
       com `gap` no meio. `align-items: stretch` (valor por omissão do
       grid, antes forçado a `start`) - as duas colunas passam a ter
       sempre a mesma altura, a da mais alta das duas (confirmado pelo
       utilizador: ficavam com alturas diferentes). */
    .autenticacao-grid {
        grid-template-columns: 55fr 45fr;
        gap: 2rem;
        padding-inline: 0;
    }
}

/* ---- Coluna esquerda: carrossel + logótipo, reforço de marca ---- */
.autenticacao-coluna-imagem {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #111827;
    /* Altura reservada desde o início (nunca depende da imagem
       carregar) - evita Layout Shift ao abrir a página. */
    min-height: 200px;
}

@media (min-width: 992px) {
    .autenticacao-coluna-imagem {
        min-height: 520px;
    }
}

@media (max-width: 380px) {
    /* Ecrã muito pequeno: a imagem sai de vez, o cartão de login fica
       sozinho - a prioridade é sempre a usabilidade do formulário. */
    .autenticacao-coluna-imagem {
        display: none;
    }
}

/* Mesma classe partilhada `.carrossel-painel`/`.carrossel-painel-item`
   do Hero/Ação/Marketplace (reaproveita `static/js/carrossel-
   painel.js`) - só anula o que essa base assume para SCREENSHOTS
   (moldura com borda/sombra própria, `aspect-ratio` fixo a 1200x750,
   `object-fit:contain` para nunca cortar um ecrã); aqui a fotografia
   preenche a coluna toda (`cover`), sem moldura própria. */
.autenticacao-carrossel.carrossel-painel {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.autenticacao-carrossel .carousel-inner,
.autenticacao-carrossel .carrossel-painel-item {
    height: 100%;
}

.autenticacao-carrossel .carrossel-painel-item {
    aspect-ratio: auto;
    background: none;
}

.autenticacao-carrossel .carrossel-painel-item img {
    object-fit: cover;
}

/* Ken Burns - mesmo mecanismo já usado no carrossel de fundo do
   Marketplace (nota completa em `.marketplace-hero-carrossel` mais
   abaixo): só o slide `.active` anima, `forwards` mantém o zoom final
   enquanto esse slide estiver visível, e ao perder `.active` a regra
   deixa de se aplicar - a próxima vez que este slide voltar a ficar
   ativo, a animação recomeça sozinha, sem nenhum JS dedicado a isto. */
.autenticacao-carrossel .carrossel-painel-item img {
    transform: scale(1.08);
}

.autenticacao-carrossel .carrossel-painel-item.active img {
    animation: carrossel-autenticacao-ken-burns 5s ease-out forwards;
}

@keyframes carrossel-autenticacao-ken-burns {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .autenticacao-carrossel .carrossel-painel-item img,
    .autenticacao-carrossel .carrossel-painel-item.active img {
        transform: scale(1);
        animation: none;
    }
}

/* Gradiente leve só para o logótipo se manter legível sobre a foto -
   NUNCA um overlay a cobrir a imagem toda (essa era a abordagem
   anterior). A fotografia deve respirar; só o canto onde o logótipo
   fica precisa de reforço de contraste. */
.autenticacao-coluna-imagem-gradiente {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0) 55%, rgba(17, 24, 39, 0.75) 100%);
}

.autenticacao-coluna-imagem-logo {
    position: absolute;
    z-index: 2;
    left: 1.5rem;
    bottom: 1.5rem;
}

/* ---- Coluna direita: cartão de login opaco ----
   `justify-content: center` em qualquer largura (chegou a estar
   `flex-start` só no desktop) - com o cartão limitado a `max-width:
   460px` dentro de uma coluna de 45% mais larga do que isso em ecrãs
   largos, alinhar à esquerda deixava um vão vazio à DIREITA do
   cartão que não existia à esquerda da imagem (a imagem preenche a
   coluna toda) - lateralmente parecia descentrado (confirmado pelo
   utilizador). Centrado, o espaço à volta do cartão fica sempre
   simétrico dentro da própria coluna, em qualquer largura de ecrã. */
.autenticacao-coluna-form {
    display: flex;
    justify-content: center;
}

.autenticacao-cartao {
    width: 100%;
    max-width: 460px;
    border-radius: 0.75rem;
    /* Opaco a 100% nos dois temas - branco no claro, navy fixo no
       escuro (mesma "âncora de marca sempre escura" já usada no
       rodapé/sidebar/overlay do Marketplace - nunca `var(--bs-primary)`
       aqui, que no tema escuro passa a um azul CLARO pensado para
       acentos de botão, o oposto do "muito escuro" pedido). Nada
       transparente - é o elemento de maior confiança da página. */
    background-color: #fff;
    /* `display:flex` + `.card-body` a crescer (ver abaixo) - o
       cartão fica esticado à mesma altura da coluna da imagem
       (`align-items:stretch`, valor por omissão do grid/flex, já
       ativo desde que deixámos de forçar `align-items:start` no
       grid); sem isto, o conteúdo do formulário ficava "colado" ao
       topo de um cartão muito mais alto do que ele, com um vão vazio
       grande por baixo. */
    display: flex;
    flex-direction: column;
}

[data-bs-theme="dark"] .autenticacao-cartao {
    background-color: var(--cfx-superficie);
}

.autenticacao-cartao .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

/* Rótulos e campos também vinham ao tamanho por omissão do Bootstrap
   (1rem) - grande a mais para um cartão compacto (460px), mesma
   observação do utilizador sobre o título. Reduzido só aqui, não no
   `.form-control` genérico (usado em todo o site), para não afetar
   nenhum outro formulário. */
.autenticacao-cartao .form-label {
    font-size: 0.875rem;
}

.autenticacao-cartao .form-control {
    font-size: 0.9rem;
}

.autenticacao-cartao .form-check-label {
    font-size: 0.875rem;
}

.autenticacao-titulo {
    /* Poppins (herdado do body, nunca Montserrat) - só os títulos
       genéricos do site usam Lora/serif (ver regra `h1,h2,...` no
       topo deste ficheiro); este título usa antes a fonte de corpo,
       em negrito forte, para ficar consistente com o peso pedido
       para toda a hierarquia deste ecrã. Tamanho reduzido explicitamente
       (`<h1>` sem classe `.h4` desta vez ficava ao tamanho nativo do
       Bootstrap, ~2.5rem em ecrã largo - confirmado pelo utilizador
       como "letras muito grandes"). */
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ---- Campos com ícone ---- */
.campo-com-icone {
    position: relative;
}

.campo-com-icone .campo-icone {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    color: var(--texto-secundario);
    pointer-events: none;
}

/* Mesmo campo do resto do sistema (superfície + borda cinza) - antes
   tinha um fundo cinzento que só ficava branco com o foco. */
.campo-com-icone .form-control {
    padding-left: 2.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-com-icone-fim .form-control {
    padding-right: 2.75rem;
}

.botao-mostrar-password {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--texto-secundario);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 0.375rem;
}

.botao-mostrar-password:hover {
    color: var(--bs-body-color);
}

.botao-mostrar-password:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.botao-mostrar-password:disabled {
    opacity: 0.5;
}

/* ---- Botão "Entrar" - foco principal do ecrã ---- */
.autenticacao-botao-entrar {
    letter-spacing: 0.3px;
}

.autenticacao-spinner {
    margin-right: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .autenticacao-spinner {
        animation-duration: 1.5s;
    }
}

.sidebar-painel .navbar-brand {
    color: var(--sidebar-texto);
}

.sidebar-painel #botao-recolher-sidebar {
    color: var(--sidebar-icone);
    border-radius: 0.5rem;
}

.sidebar-painel #botao-recolher-sidebar:hover {
    color: var(--sidebar-texto);
    background-color: var(--sidebar-hover);
}

/* Item de menu - texto escuro, ícone cinza; ativo = texto e ícone na
   primária sobre uma tinta de 10% (sem barra lateral colorida). */
.sidebar-painel .nav-link {
    color: var(--sidebar-texto);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 400;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-painel .nav-link i {
    color: var(--sidebar-icone);
    transition: color 0.15s ease;
}

.sidebar-painel .nav-link:hover {
    color: var(--sidebar-texto);
    background-color: var(--sidebar-hover);
}

.sidebar-painel .nav-link:hover i {
    color: var(--sidebar-texto);
}

.sidebar-painel .nav-link.active,
.sidebar-painel .nav-link.active:hover {
    color: var(--sidebar-ativo-texto);
    background-color: var(--sidebar-ativo-fundo);
    font-weight: 500;
}

.sidebar-painel .nav-link.active i {
    color: var(--sidebar-ativo-icone);
}

.sidebar-painel .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--cfx-foco);
}

.sidebar-painel .nav-section-title {
    color: var(--sidebar-titulo);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 0.75rem;
}

/* Rodapé da sidebar (ex.: âmbito do utilizador INEFOP). */
.sidebar-rodape {
    border-top: 1px solid var(--sidebar-borda);
    color: var(--sidebar-titulo);
}

@media (max-width: 991.98px) {
    .sidebar-painel {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
    }

    .sidebar-painel.mostrar {
        transform: translateX(0);
    }

    /* ---- Coluna de ações sempre visível nas tabelas (mobile/tablet) ----
       Em vez de forçar cada tabela a virar cartões empilhados (obrigaria
       a reescrever o HTML de cada ecrã de listagem, um a um), mantém-se
       o scroll horizontal do `.table-responsive` do Bootstrap - já usado
       em todos os ecrãs de listagem - mas fixa-se a última coluna (por
       convenção, sempre a de ações/"⋮" neste projeto) com
       `position: sticky` para nunca ficar cortada à direita, mesmo a
       meio do scroll. Aplica-se a QUALQUER tabela dentro de
       `.table-responsive` no painel, sem precisar de tocar em nenhum
       template - basta a app continuar a pôr a coluna de ações no fim,
       como já faz em todo o lado. */
    .table-responsive td:last-child,
    .table-responsive th:last-child {
        position: sticky;
        right: 0;
        background-color: var(--cfx-superficie);
        box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.15);
    }

    /* ---- Formulários em coluna única (mobile/tablet) ----
       A grelha do Bootstrap (`row` + `col-sm-*`/`col-md-*`) põe campos
       lado a lado a partir dos 576/768px - o que em ecrãs de tablet
       (768-1024px) já aperta demasiado alguns formulários (rótulos e
       campos a colidir). Em vez de trocar as classes `col-sm-*`/
       `col-md-*` formulário a formulário, força-se aqui, de forma
       centralizada, QUALQUER coluna de formulário dentro do painel
       (`.conteudo-painel`) a ocupar a largura toda até ao breakpoint
       `lg` (992px, o mesmo já usado acima para a sidebar) - a partir
       daí (ecrã desktop) o comportamento fica exatamente como estava,
       sem nenhuma alteração. O gap vertical entre campos continua a vir
       do `g-3`/`gap-3` já usado em cada formulário, não precisa de ser
       redefinido aqui. */
    .conteudo-painel .row > [class*="col-sm-"],
    .conteudo-painel .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.stat-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* ---- Respiro lateral mínimo em tablet (rede de segurança) ----
   O gutter por omissão do `.container` do Bootstrap é de apenas 12px
   de cada lado (metade de `--bs-gutter-x: 1.5rem`). Em larguras de
   tablet (~768–1024px) isso lê-se como "colado à margem". Além disso,
   dentro do painel autenticado o `.container`/`.container-xl` decide o
   seu breakpoint pela largura da JANELA, não pela largura da coluna
   de conteúdo (mais estreita, por estar ao lado da sidebar) - por
   isso este mínimo tem de ser imposto explicitamente, não basta
   confiar no comportamento automático do `.container`. */
@media (min-width: 768px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Pré-visualização pública do certificado (Validação Pública de
   Certificados - ver apps.certificados.templates.certificados.
   verificar_publico.html/apps.certificados.preview) - imagem em baixa
   resolução, servida por um endpoint com token de curta duração,
   nunca o PDF oficial. `user-select`/`-webkit-user-drag` bloqueiam
   selecionar/arrastar a imagem para fora da página; o menu de
   contexto (clique direito) é bloqueado via `oncontextmenu` inline no
   template, não aqui. */
.certificado-preview-protegido {
    max-width: 320px;
    user-select: none;
    -webkit-user-select: none;
}

.certificado-preview-protegido img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}

/* Nunca sai na impressão da página - só a informação em texto (já
   fora deste bloco) é que serve de prova imprimível da consulta. */
@media print {
    .certificado-preview-protegido {
        display: none !important;
    }
}

/* ---- Tons semânticos de ícone (`.tom-*`) ----
   `.tom-*` só escolhe a cor (tokens `--icone-*` no topo deste
   ficheiro) e é herdado pelos filhos - pode ir no cartão inteiro.
   Sem nenhum `.tom-*`, fica o dourado da marca de sempre (fallback
   em cada `var(--icone-cor, ...)`). */
.tom-dados { --icone-cor: var(--icone-dados); }
.tom-certificado { --icone-cor: var(--icone-certificado); }
.tom-sucesso { --icone-cor: var(--icone-sucesso); }
.tom-tecnologia { --icone-cor: var(--icone-tecnologia); }
.tom-alerta { --icone-cor: var(--icone-alerta); }

/* ---- Carrossel de capturas (Bootstrap Carousel nativo, já carregado
   em todo o site via bootstrap.bundle.min.js - nenhuma biblioteca
   nova). Caixa de altura fixa (proporção 1200x750, entre a mais larga
   - ecrãs 1200x566 - e a mais alta - documentos 1200x849) com
   `object-fit:contain`: nenhuma amostra é cortada, só ganha uma
   margem clara nos lados/topo consoante a proporção original - ver
   `apps.site_institucional.views._amostra_painel`. Inicialização e
   avanço automático ficam em JS (home.html), nunca aqui - esta parte
   é só a caixa/moldura. */
.carrossel-painel {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--bs-border-color-translucent);
}

.carrossel-painel-item {
    aspect-ratio: 1200 / 750;
    background: var(--bs-tertiary-bg);
}

.carrossel-painel-item img {
    object-fit: contain;
}

/* Pontos do Hero - a cor branca por omissão do Bootstrap é invisível
   sobre o fundo claro do cartão; aqui ficam sempre visíveis, em
   qualquer tema. */
.carrossel-painel .carousel-indicators {
    margin-bottom: 0.6rem;
}

.carrossel-painel .carousel-indicators [data-bs-target] {
    background-color: var(--bs-primary);
    opacity: 0.35;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.carrossel-painel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--bs-secondary);
}

/* Contador numérico ("1/4") de "Veja o Certifixe em ação" - em vez de
   pontos, mais legível com várias amostras (ver o pedido original). */
.carrossel-painel-contador {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.65rem;
    border-radius: 50px;
    font-variant-numeric: tabular-nums;
}

.carrossel-painel-anterior,
.carrossel-painel-seguinte {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.carrossel-painel:hover .carrossel-painel-anterior,
.carrossel-painel:hover .carrossel-painel-seguinte,
.carrossel-painel-anterior:focus-visible,
.carrossel-painel-seguinte:focus-visible {
    opacity: 1;
}

.carrossel-painel-anterior:hover,
.carrossel-painel-seguinte:hover {
    background: rgba(17, 24, 39, 0.78);
}

.carrossel-painel-anterior {
    left: 0.5rem;
}

.carrossel-painel-seguinte {
    right: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .carrossel-painel .carousel-item {
        transition: none;
    }
}

/* ---- Marketplace de Cursos - microinterações funcionais, mesma
   disciplina da landing page (só opacity/transform, hover 150-200ms,
   nunca decorativo). Ver apps/marketplace/static/marketplace/
   busca_resultados.js. ---- */

/* Skeleton loading - placeholders neutros com "pulsar" suave enquanto
   os resultados carregam via AJAX, para nunca mostrar um ecrã em
   branco/spinner genérico. */
.skeleton {
    background-color: var(--bs-secondary-bg, #e9ecef);
    border-radius: 0.375rem;
    animation: skeleton-pulsar 1.2s ease-in-out infinite;
}

.skeleton-linha {
    height: 0.85rem;
    border-radius: 0.25rem;
}

@keyframes skeleton-pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        opacity: 0.7;
    }
}

/* Troca de resultados (filtro/pesquisa aplicados via AJAX) - fade
   suave em vez de troca abrupta dos cartões. */
.marketplace-resultados {
    transition: opacity 0.2s ease;
}

.marketplace-resultados--a-transitar {
    opacity: 0;
}

/* ---- Indicador de estado (/status/) - círculo de cor, sempre ao lado
   de um rótulo de texto ("Operacional"/etc.) que já transmite o
   mesmo significado - a cor nunca é a ÚNICA forma de o distinguir. */
.indicador-status {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.indicador-status-operacional {
    background-color: var(--bs-success);
}

.indicador-status-degradado {
    background-color: var(--bs-secondary);
}

.indicador-status-indisponivel {
    background-color: var(--bs-danger);
}

@media (prefers-reduced-motion: reduce) {
    .marketplace-resultados {
        transition: none;
    }
}

/* Banner persistente de "dias restantes" (templates/painel_base.html)
   - cobre tanto o período de teste como a assinatura paga a expirar
   (ver apps.centros.context_processors.estado_assinatura_banner) -
   reaproveita os tokens `alert-warning` já definidos pelo tema
   Bootstrap (claro/escuro) em vez de cores fixas próprias. */
.banner-trial {
    padding: 0.6rem 1rem;
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border-bottom: 1px solid var(--bs-warning-border-subtle);
    font-size: 0.85rem;
}
.banner-trial:hover {
    background-color: var(--bs-warning-border-subtle);
}
/* Variante de urgência (últimos `dias_aviso_expiracao` dias) - mesma
   estrutura, só troca `warning` por `danger`, nunca um componente novo. */
.banner-trial--urgente {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border-bottom-color: var(--bs-danger-border-subtle);
}
.banner-trial--urgente:hover {
    background-color: var(--bs-danger-border-subtle);
}

/* ===== Animação de entrada (substitui o antigo #certifixe-splash) =====
   Duas partes, as duas decididas pelo script do <head> de base.html ANTES
   da primeira pintura (sem JS, com movimento reduzido ou nas páginas com
   `{% block sem_animacao_entrada %}` - os Designers - nada disto corre):
   1. `html.cfx-abertura` - SÓ na primeira página de cada sessão do
      separador: camada escura (#111827) com o logótipo, brilho, curvas e
      pontos na primária (as formas do `certifixe-bg`). Sequência
      (ms): 0 navy · 40 brilho · 80-220 logótipo · 320-550 saída (a
      camada é retirada aos 550 por base.html). Define `--cfx-base`
      (350ms) para o conteúdo só começar quando a camada sai.
   2. `html.cfx-entrada` - em TODAS as páginas: o elemento principal
      entra (opacity + 8px, 240ms) e, dentro dele, os elementos entram
      por hierarquia (ver "Entrada progressiva", mais acima).
   Só `opacity`/`transform`. */
/* `--cfx-base` (atraso do conteúdo na 1.ª página da sessão) ficou a 0 -
   opção C aprovada: o conteúdo entra enquanto a camada sai, sem os
   350ms extra que atrasavam o LCP. A variável continua a existir (0ms
   por omissão) nos `calc()`. */
.cfx-entrada-camada {
    display: none;
}
html.cfx-abertura .cfx-entrada-camada {
    --cfx-entrada-curvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 560' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238B94FA' stroke-width='1.5'%3E%3Cpath stroke-opacity='0.16' d='M-20 470 C 320 380 560 520 860 400 S 1260 220 1420 250' vector-effect='non-scaling-stroke'/%3E%3Cpath stroke-opacity='0.12' d='M-20 150 C 260 60 520 210 780 120 S 1180 40 1420 90' stroke-dasharray='2 9' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-entrada-pontos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 110'%3E%3Cg fill='%238B94FA' fill-opacity='0.30'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='37' cy='12' r='1.6'/%3E%3Ccircle cx='62' cy='12' r='1.6'/%3E%3Ccircle cx='87' cy='12' r='1.6'/%3E%3Ccircle cx='112' cy='12' r='1.6'/%3E%3Ccircle cx='137' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='33' r='1.6'/%3E%3Ccircle cx='37' cy='33' r='1.6'/%3E%3Ccircle cx='62' cy='33' r='1.6'/%3E%3Ccircle cx='87' cy='33' r='1.6'/%3E%3Ccircle cx='112' cy='33' r='1.6'/%3E%3Ccircle cx='137' cy='33' r='1.6'/%3E%3Ccircle cx='12' cy='54' r='1.6'/%3E%3Ccircle cx='37' cy='54' r='1.6'/%3E%3Ccircle cx='62' cy='54' r='1.6'/%3E%3Ccircle cx='87' cy='54' r='1.6'/%3E%3Ccircle cx='112' cy='54' r='1.6'/%3E%3Ccircle cx='137' cy='54' r='1.6'/%3E%3Ccircle cx='12' cy='75' r='1.6'/%3E%3Ccircle cx='37' cy='75' r='1.6'/%3E%3Ccircle cx='62' cy='75' r='1.6'/%3E%3Ccircle cx='87' cy='75' r='1.6'/%3E%3Ccircle cx='112' cy='75' r='1.6'/%3E%3Ccircle cx='137' cy='75' r='1.6'/%3E%3Ccircle cx='12' cy='96' r='1.6'/%3E%3Ccircle cx='37' cy='96' r='1.6'/%3E%3Ccircle cx='62' cy='96' r='1.6'/%3E%3Ccircle cx='87' cy='96' r='1.6'/%3E%3Ccircle cx='112' cy='96' r='1.6'/%3E%3Ccircle cx='137' cy='96' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #111827;
    background-image: var(--cfx-entrada-curvas);
    background-size: 100% 100%;
    pointer-events: none;
    animation: cfx-entrada-sair 230ms cubic-bezier(.4, 0, .2, 1) 320ms both;
}
/* Grelhas de pontos discretas em dois cantos opostos. */
html.cfx-abertura .cfx-entrada-camada::before,
html.cfx-abertura .cfx-entrada-camada::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 110px;
    background: var(--cfx-entrada-pontos) no-repeat;
}
html.cfx-abertura .cfx-entrada-camada::before {
    top: 12%;
    right: 10%;
}
html.cfx-abertura .cfx-entrada-camada::after {
    bottom: 12%;
    left: 10%;
}
.cfx-entrada-brilho {
    position: absolute;
    width: min(70vmin, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 114, 248, .30) 0%, rgba(102, 114, 248, .10) 38%, rgba(102, 114, 248, 0) 70%);
    animation: cfx-entrada-brilho 300ms ease-out 40ms both;
}
.cfx-entrada-logo {
    position: relative;
    height: clamp(44px, 8vw, 64px);
    width: auto;
    animation: cfx-entrada-logo 140ms cubic-bezier(.22, 1, .36, 1) 80ms both;
}
/* Elemento principal: no painel só `.conteudo-painel` (sidebar e navbar
   nunca se mexem); nas páginas públicas o <main> (a navbar fica
   parada). `backwards`: no fim não fica nenhum transform aplicado.
   `.cfx-entrada-feita` (base.html, 1100ms depois do fim do documento) desliga-as,
   para cartões inseridos mais tarde por JS nunca voltarem a animar. */
html.cfx-entrada:not(.cfx-entrada-feita) .conteudo-painel,
html.cfx-entrada:not(.cfx-entrada-feita) body:not(.pagina-painel) > main {
    animation: cfx-entrada-conteudo 240ms cubic-bezier(.22, 1, .36, 1) var(--cfx-base, 0ms) backwards;
}
/* Painel: cartões das grelhas - o motor da entrada progressiva (base.html)
   marca-os `.cfx-revelar.cfx-cartao-painel` com --cfx-d 140/180/220/260ms
   para os 4 primeiros de cada grelha e 300ms para os restantes, a
   seguir ao título (0), texto (60) e botões (120), com a mesma origem de
   tempo (nunca passam à frente do título). Entrada do painel: 240ms, 8px. */
html.cfx-entrada .cfx-cartao-painel {
    --cfx-de: translateY(8px);
}
html.cfx-entrada .cfx-cartao-painel.mostrar:not(.cfx-revelado) {
    animation-duration: 240ms;
}
@keyframes cfx-entrada-sair {
    to { opacity: 0; }
}
@keyframes cfx-entrada-brilho {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}
/* "Respiração": 96% -> 101% -> 100%, tudo em 140 ms. */
@keyframes cfx-entrada-logo {
    0% { opacity: 0; transform: scale(.96); }
    70% { opacity: 1; transform: scale(1.01); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes cfx-entrada-conteudo {
    from { opacity: 0; transform: translateY(8px); }
}
/* Rede de segurança: o script do <head> já não põe estas classes com
   movimento reduzido; isto cobre uma preferência mudada a meio. */
@media (prefers-reduced-motion: reduce) {
    html.cfx-abertura .cfx-entrada-camada { display: none; }
    html.cfx-entrada .conteudo-painel,
    html.cfx-entrada body:not(.pagina-painel) > main,
    html.cfx-entrada .conteudo-painel .card { animation: none; }
}

/* ===== LoadingOverlay centralizado (static/js/loading-provider.js) =====
   Sistema ÚNICO para operações pesadas (certificados em lote,
   exportação de relatórios, Designer) - nunca substitui os skeletons
   da Biblioteca de Modelos/Marketplace nem o spinner de botão do
   Login/Cadastro, que continuam como estavam. */

.certifixe-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.certifixe-loading-overlay-bloqueante {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(var(--bs-body-bg-rgb), 0.85);
}
.certifixe-loading-overlay-contextual {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(var(--bs-body-bg-rgb), 0.85);
    border-radius: inherit;
}
.certifixe-loading-area-relativa {
    position: relative;
}
.certifixe-loading-overlay-caixa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
    max-width: 22rem;
}
.certifixe-loading-spinner {
    color: var(--bs-primary);
}
.certifixe-loading-mensagem {
    color: var(--bs-primary);
    font-weight: 600;
    margin: 0;
}
.certifixe-loading-aviso-demora {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    margin: 0;
}
.certifixe-loading-overlay-erro .certifixe-loading-mensagem {
    color: var(--bs-danger);
}
@media (prefers-reduced-motion: reduce) {
    .certifixe-loading-spinner { animation-duration: 1.5s; }
}

/* Página "Planos e Preços" (site_institucional/planos.html e o resumo
   em home.html, ambos via _cartao_planos.html) - movido para aqui do
   <style> inline que existia no parcial, seguindo a convenção do
   projeto de centralizar CSS partilhado neste ficheiro. */
.container-planos {
    /* max-width (nunca width fixa) para o cartão poder alargar em
       ecrãs maiores sem ficar preso a 560px - responsivo entre tablet
       e ultrawide via clamp(), sem precisar de vários breakpoints.
       Tope em 680px (não 760px): testado visualmente a 760px o
       cartão ficava com espaço vazio a mais à volta da lista de
       benefícios (texto curto, centrado, não preenche uma caixa tão
       larga) - 680px alarga claramente face aos ~560-600px antigos
       sem esvaziar o cartão. */
    max-width: clamp(560px, 46vw, 680px);
}
/* Seletor de FAMÍLIA (Pessoal / Empresas e Centros) - visualmente
   mais forte que o seletor de periodicidade abaixo (botões maiores,
   contorno mais grosso quando ativo): é a primeira decisão do
   utilizador, a periodicidade vem depois, já dentro da família
   escolhida - a hierarquia visual espelha essa ordem. */
.seletor-familia-pilula {
    border-radius: 50px;
    border: 2px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 1.5rem;
}
.seletor-familia-pilula.ativa {
    background: var(--cfx-cta);
    border-color: var(--cfx-cta);
    color: #fff;
}
.seletor-pilula {
    /* --bs-tertiary-bg muda entre temas (claro: bege muito claro,
       escuro: cinzento-azulado escuro) - antes usava --bs-surface,
       uma variável que não existe no projeto, por isso caía sempre
       no fallback #fff e ficava clara mesmo no modo escuro, enquanto
       o texto (var(--bs-body-color)) já mudava para claro - texto
       claro sobre fundo claro. */
    border-radius: 50px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.45rem 1.1rem;
}
.seletor-pilula.ativa {
    /* Fixo, não var(--bs-primary): essa variável fica clara no modo
       escuro (serve de acento a botões), o que apagaria o texto
       branco aqui - ver a mesma correção em home.html/_rodape.html. */
    background: var(--cfx-cta);
    border-color: var(--cfx-cta);
    color: #fff;
}
.badge-poupanca {
    display: block;
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cfx-cta);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 50px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}
.card-plano {
    border-top: 4px solid var(--bs-secondary);
}
.card-plano h2 {
    font-family: var(--bs-body-font-family);
    /* Reduzido de 2.15rem para 1.85rem - hierarquia mais equilibrada
       com o resto da página (título/subtítulo também reduzidos em
       planos.html), o preço continua o elemento de maior destaque
       dentro do próprio cartão. */
    font-size: 1.85rem;
}
.card-plano #lista-funcionalidades span,
.card-plano #lista-funcionalidades li {
    font-size: 0.92rem;
}
.lista-confianca {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}
.lista-confianca i {
    color: var(--bs-secondary);
}

/* Faixa "Centros e Parceiros" (home.html, modelo Kursinha) - ver
   apps.site_institucional.templates.site_institucional.
   _faixa_parceiros.html. Texto à esquerda, logótipos a cores sempre em
   movimento. O `overflow:hidden` do `.marquee-logos` é o recorte da
   própria faixa (a trilha é `width:max-content` com a volta duplicada),
   não um remendo de transbordo - nada de JS, só `transform`. */
.faixa-parceiros {
    padding-block: 1.5rem;
    background: var(--bs-body-bg);
    border-block: 1px solid var(--bs-border-color);
}
.faixa-parceiros-linha {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.faixa-parceiros-titulo {
    flex: 0 0 auto;
    max-width: 10rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}
.marquee-logos {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-logos-trilho {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    width: max-content;
    animation: marquee-deslocar 55s linear infinite;
}
/* Pausa ao hover - para olhar com calma para um logótipo. */
.marquee-logos:hover .marquee-logos-trilho {
    animation-play-state: paused;
}
@keyframes marquee-deslocar {
    from { transform: translateX(0); }
    /* -50%: a trilha tem a volta duplicada lado a lado - deslocar
       metade da largura total desloca exatamente UMA volta, por isso no
       fim do ciclo a cópia está pixel-a-pixel onde o original começou. */
    to { transform: translateX(-50%); }
}
.marquee-logo-item {
    position: relative;
    flex: 0 0 auto;
    height: 3rem;
    display: flex;
    align-items: center;
}
/* Logótipos sempre nas cores originais (nada de tons de cinza). */
.marquee-logo-item img {
    max-height: 100%;
    max-width: 11rem;
    width: auto;
    object-fit: contain;
}
/* Tema escuro: logótipos com fundo branco ficariam como quadrados
   soltos - um cartão claro arredondado dá-lhes o mesmo acabamento. */
[data-bs-theme="dark"] .marquee-logo-item img {
    background: #fff;
    border-radius: .5rem;
    padding: .25rem .5rem;
}
/* Telemóvel: o texto passa para cima da faixa, centrado. */
@media (max-width: 575.98px) {
    .faixa-parceiros-linha { flex-direction: column; gap: 1rem; }
    .faixa-parceiros-titulo { max-width: none; text-align: center; }
    .marquee-logos { align-self: stretch; }
    .marquee-logos-trilho { gap: 2.5rem; }
    .marquee-logo-item { height: 2.5rem; }
}
/* Selo "Parceiro Oficial" - só logótipos institucionais (INEFOP,
   INAPEM, ...). Sobreposto (`position:absolute`) para nunca aumentar
   a altura da faixa; tamanho muito pequeno e opacidade subtil para
   nunca competir visualmente com o próprio logótipo que identifica. */
.badge-parceiro-oficial {
    position: absolute;
    top: -0.3rem;
    right: -0.4rem;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--bs-secondary);
    background: rgba(var(--bs-secondary-rgb), .12);
    border: 1px solid rgba(var(--bs-secondary-rgb), .35);
    border-radius: 999px;
    padding: 0 0.35rem;
    opacity: .85;
    pointer-events: none;
}
/* Acessibilidade - `prefers-reduced-motion`: sem movimento; as
   repetições do loop somem e a trilha vira uma grelha estática que
   embrulha - mesmo conteúdo, mesma ordem, mesmos selos. */
@media (prefers-reduced-motion: reduce) {
    .marquee-logos { -webkit-mask-image: none; mask-image: none; }
    .marquee-logos-trilho { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 1.25rem; }
    .marquee-logo-duplicado { display: none; }
}

/* =====================================================================
   .certifixe-bg - fundo decorativo de identidade das PÁGINAS PÚBLICAS
   ---------------------------------------------------------------------
   Só CSS/SVG (sem imagens nem JavaScript). A biblioteca de peças SVG é
   definida UMA única vez (variáveis `--cfx-peca-*`, desenhadas a preto
   com opacidade própria entre 3,5% e 11%) e usada como MÁSCARA tingida
   pela cor do tema (`--cfx-cor`) - as mesmas peças servem claro/escuro.
   Acompanha a altura real do conteúdo (camadas com `inset: 0`, sem
   altura fixa), em 3 zonas - nunca um SVG esticado:
     topo  - composição principal (brilho + wireframes), em px do topo;
     meio  - curvas, grelha de pontos, geometria, certificado na margem,
             em % da altura real (`max()` evita que apareçam em páginas
             curtas, onde ficariam em cima do topo);
     fim   - 1-2 peças ancoradas ao fim do conteúdo.
   Classes:
     .certifixe-bg          sistema comum (topo + meio + fim)
     .certifixe-bg--corpo   só meio + fim (landing, cujo topo é o Hero)
     .certifixe-bg--hero    variante do Hero da landing, composta em
                            relação à captura (mesmas peças); é a única
                            com movimento (deriva de 4px em 36s)
     .certifixe-bg--medio / --suave / --discreto   só `--bg-opacity`
   Nunca no painel: os templates do painel substituem o bloco do
   `<main>` onde a classe é posta, e todas as regras exigem
   `body:not(.pagina-painel)`. Sem `isolation`/`z-index`/`overflow` no
   elemento (não cria contexto de empilhamento nem esconde conteúdo); as
   camadas ficam dentro da caixa do elemento (`inset: 0`), por isso não
   criam scroll horizontal.
   ===================================================================== */
body:not(.pagina-painel) .certifixe-bg {
    --cfx-peca-cert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 260'%3E %3Cg transform='rotate(-7 170 130)' fill='none' stroke='%23000' stroke-opacity='0.11' stroke-width='2' stroke-linecap='round'%3E %3Crect x='30' y='35' width='280' height='190' rx='8'/%3E%3Crect x='42' y='47' width='256' height='166' rx='4' stroke-width='1'/%3E %3Cpath d='M110 80h120' stroke-width='5'/%3E%3Cpath d='M130 97h80M95 118h150M105 131h130M120 144h100' stroke-width='2'/%3E %3Ccircle cx='250' cy='182' r='16'/%3E%3Ccircle cx='250' cy='182' r='9' stroke-width='1'/%3E%3Cpath d='M241 196l-5 17 9-5M259 196l5 17-9-5'/%3E %3Cpath d='M70 188h70M70 200h45' stroke-width='1.5'/%3E%3Crect x='168' y='176' width='22' height='22' rx='2' stroke-width='1.5'/%3E %3Cpath d='M172 180h5v5h-5zM181 189h5v5h-5z' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-cert-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 260'%3E %3Cg transform='rotate(6 170 130)' fill='none' stroke='%23000' stroke-opacity='0.08' stroke-width='2' stroke-linecap='round'%3E %3Crect x='30' y='35' width='280' height='190' rx='8'/%3E%3Crect x='42' y='47' width='256' height='166' rx='4' stroke-width='1'/%3E %3Cpath d='M110 80h120' stroke-width='5'/%3E%3Cpath d='M130 97h80M95 118h150M105 131h130M120 144h100' stroke-width='2'/%3E %3Ccircle cx='250' cy='182' r='16'/%3E%3Ccircle cx='250' cy='182' r='9' stroke-width='1'/%3E%3Cpath d='M241 196l-5 17 9-5M259 196l5 17-9-5'/%3E %3Cpath d='M70 188h70M70 200h45' stroke-width='1.5'/%3E%3Crect x='168' y='176' width='22' height='22' rx='2' stroke-width='1.5'/%3E %3Cpath d='M172 180h5v5h-5zM181 189h5v5h-5z' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-cert-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 260'%3E %3Cg transform='rotate(4 170 130)' fill='none' stroke='%23000' stroke-opacity='0.05' stroke-width='2' stroke-linecap='round'%3E %3Crect x='30' y='35' width='280' height='190' rx='8'/%3E%3Crect x='42' y='47' width='256' height='166' rx='4' stroke-width='1'/%3E %3Cpath d='M110 80h120' stroke-width='5'/%3E%3Cpath d='M130 97h80M95 118h150M105 131h130M120 144h100' stroke-width='2'/%3E %3Ccircle cx='250' cy='182' r='16'/%3E%3Ccircle cx='250' cy='182' r='9' stroke-width='1'/%3E%3Cpath d='M241 196l-5 17 9-5M259 196l5 17-9-5'/%3E %3Cpath d='M70 188h70M70 200h45' stroke-width='1.5'/%3E%3Crect x='168' y='176' width='22' height='22' rx='2' stroke-width='1.5'/%3E %3Cpath d='M172 180h5v5h-5zM181 189h5v5h-5z' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-cert-hero-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 260'%3E %3Cg transform='rotate(9 170 130)' fill='none' stroke='%23000' stroke-opacity='0.07' stroke-width='2' stroke-linecap='round'%3E %3Crect x='30' y='35' width='280' height='190' rx='8'/%3E%3Crect x='42' y='47' width='256' height='166' rx='4' stroke-width='1'/%3E %3Cpath d='M110 80h120' stroke-width='5'/%3E%3Cpath d='M130 97h80M95 118h150M105 131h130M120 144h100' stroke-width='2'/%3E %3Ccircle cx='250' cy='182' r='16'/%3E%3Ccircle cx='250' cy='182' r='9' stroke-width='1'/%3E%3Cpath d='M241 196l-5 17 9-5M259 196l5 17-9-5'/%3E %3Cpath d='M70 188h70M70 200h45' stroke-width='1.5'/%3E%3Crect x='168' y='176' width='22' height='22' rx='2' stroke-width='1.5'/%3E %3Cpath d='M172 180h5v5h-5zM181 189h5v5h-5z' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-cert-qr-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 260'%3E %3Cg transform='rotate(-5 170 130)' fill='none' stroke='%23000' stroke-opacity='0.045' stroke-width='2' stroke-linecap='round'%3E %3Crect x='30' y='35' width='280' height='190' rx='8'/%3E%3Crect x='42' y='47' width='256' height='166' rx='4' stroke-width='1'/%3E %3Cpath d='M110 80h120' stroke-width='5'/%3E%3Cpath d='M130 97h80M95 118h150M105 131h130M120 144h100' stroke-width='2'/%3E %3Ccircle cx='250' cy='182' r='16'/%3E%3Ccircle cx='250' cy='182' r='9' stroke-width='1'/%3E%3Cpath d='M241 196l-5 17 9-5M259 196l5 17-9-5'/%3E %3Cpath d='M70 188h70M70 200h45' stroke-width='1.5'/%3E%3Crect x='168' y='176' width='22' height='22' rx='2' stroke-width='1.5'/%3E %3Cpath d='M172 180h5v5h-5zM181 189h5v5h-5z' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-geo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E %3Cg fill='none' stroke='%23000' stroke-opacity='0.09' stroke-width='2' stroke-linecap='round'%3E %3Cpath d='M30 30v16M22 38h16'/%3E%3Ccircle cx='150' cy='40' r='7'/%3E%3Ccircle cx='95' cy='120' r='3.5' fill='%23000' fill-opacity='0.09'/%3E %3Cpath d='M170 110l9 9-9 9-9-9z'/%3E%3Cpath d='M20 140a120 120 0 0 1 110-70' stroke-dasharray='2 7'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-geo-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E %3Cg fill='none' stroke='%23000' stroke-opacity='0.06' stroke-width='2' stroke-linecap='round'%3E %3Cpath d='M30 30v16M22 38h16'/%3E%3Ccircle cx='150' cy='40' r='7'/%3E%3Ccircle cx='95' cy='120' r='3.5' fill='%23000' fill-opacity='0.06'/%3E %3Cpath d='M170 110l9 9-9 9-9-9z'/%3E%3Cpath d='M20 140a120 120 0 0 1 110-70' stroke-dasharray='2 7'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-linhas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 600'%3E %3Cg fill='none' stroke='%23000' stroke-opacity='0.035' stroke-width='1.5'%3E %3Cpath d='M0 560L760 120'/%3E%3Cpath d='M60 600L760 200' stroke-dasharray='3 9'/%3E%3Cpath d='M680 0v600' stroke-dasharray='2 10'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-curvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 560' preserveAspectRatio='none'%3E %3Cg fill='none' stroke='%23000' stroke-opacity='0.05' stroke-width='1.5'%3E %3Cpath d='M-20 470 C 320 380 560 520 860 400 S 1260 220 1420 250' vector-effect='non-scaling-stroke'/%3E %3Cpath d='M-20 150 C 260 60 520 210 780 120 S 1180 40 1420 90' stroke-dasharray='2 9' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-curvas-corpo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 520' preserveAspectRatio='none'%3E %3Cg fill='none' stroke='%23000' stroke-opacity='0.04' stroke-width='1.5'%3E %3Cpath d='M-20 120 C 300 260 620 40 940 180 S 1260 360 1420 300' vector-effect='non-scaling-stroke'/%3E %3Cpath d='M-20 400 C 340 330 700 470 1040 360 S 1320 300 1420 330' stroke-dasharray='2 10' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
    --cfx-peca-pontos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 110'%3E%3Cg fill='%23000' fill-opacity='0.08'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='37' cy='12' r='1.6'/%3E%3Ccircle cx='62' cy='12' r='1.6'/%3E%3Ccircle cx='87' cy='12' r='1.6'/%3E%3Ccircle cx='112' cy='12' r='1.6'/%3E%3Ccircle cx='137' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='33' r='1.6'/%3E%3Ccircle cx='37' cy='33' r='1.6'/%3E%3Ccircle cx='62' cy='33' r='1.6'/%3E%3Ccircle cx='87' cy='33' r='1.6'/%3E%3Ccircle cx='112' cy='33' r='1.6'/%3E%3Ccircle cx='137' cy='33' r='1.6'/%3E%3Ccircle cx='12' cy='54' r='1.6'/%3E%3Ccircle cx='37' cy='54' r='1.6'/%3E%3Ccircle cx='62' cy='54' r='1.6'/%3E%3Ccircle cx='87' cy='54' r='1.6'/%3E%3Ccircle cx='112' cy='54' r='1.6'/%3E%3Ccircle cx='137' cy='54' r='1.6'/%3E%3Ccircle cx='12' cy='75' r='1.6'/%3E%3Ccircle cx='37' cy='75' r='1.6'/%3E%3Ccircle cx='62' cy='75' r='1.6'/%3E%3Ccircle cx='87' cy='75' r='1.6'/%3E%3Ccircle cx='112' cy='75' r='1.6'/%3E%3Ccircle cx='137' cy='75' r='1.6'/%3E%3Ccircle cx='12' cy='96' r='1.6'/%3E%3Ccircle cx='37' cy='96' r='1.6'/%3E%3Ccircle cx='62' cy='96' r='1.6'/%3E%3Ccircle cx='87' cy='96' r='1.6'/%3E%3Ccircle cx='112' cy='96' r='1.6'/%3E%3Ccircle cx='137' cy='96' r='1.6'/%3E%3C/g%3E%3C/svg%3E");

    --cfx-cor: #6672F8;
    --cfx-glow: rgba(47, 74, 128, 0.08);
    --cfx-dourado: rgba(102, 114, 248, 0.30);
    --bg-opacity: 1;

    position: relative;
}

[data-bs-theme="dark"] body:not(.pagina-painel) .certifixe-bg {
    --cfx-cor: #8B94FA;
    --cfx-glow: rgba(106, 132, 191, 0.18);
    --cfx-dourado: rgba(139, 148, 250, 0.40);
}

/* ---- Composição comum (topo + meio + fim) ---- */
body:not(.pagina-painel) .certifixe-bg:not(.certifixe-bg--hero) {
    --cfx-mascara-topo:
        var(--cfx-peca-cert) right 3% top 36px / 250px auto no-repeat,
        var(--cfx-peca-cert-qr) left 2% top 290px / 190px auto no-repeat,
        var(--cfx-peca-geo) left 6% top 56px / 120px auto no-repeat,
        var(--cfx-peca-geo) right 1% top 330px / 110px auto no-repeat,
        var(--cfx-peca-curvas) 0 0 / 100% 560px no-repeat;
    --cfx-mascara-meio:
        var(--cfx-peca-curvas-corpo) 0 max(760px, 30%) / 100% 520px no-repeat,
        var(--cfx-peca-geo-suave) right 4% top max(900px, 27%) / 110px auto no-repeat,
        var(--cfx-peca-cert-suave) left -70px top max(1100px, 45%) / 230px auto no-repeat,
        var(--cfx-peca-pontos) right 2% top max(1250px, 60%) / 150px auto no-repeat,
        var(--cfx-peca-geo-suave) left 3% top max(1400px, 70%) / 90px auto no-repeat,
        var(--cfx-peca-linhas) right -140px top max(1500px, 78%) / 620px auto no-repeat;
    --cfx-mascara-fim:
        var(--cfx-peca-cert-qr-suave) right 5% top max(1700px, calc(100% - 330px)) / 175px auto no-repeat,
        var(--cfx-peca-pontos) left 6% top max(1800px, calc(100% - 180px)) / 120px auto no-repeat;
    --cfx-mascara: var(--cfx-mascara-topo), var(--cfx-mascara-meio), var(--cfx-mascara-fim);

    --cfx-fundo-topo:
        radial-gradient(circle at 86% 70px, var(--cfx-dourado) 0 3px, transparent 3.5px),
        radial-gradient(circle at 11% 250px, var(--cfx-dourado) 0 2.5px, transparent 3px),
        radial-gradient(circle at 93% 430px, var(--cfx-dourado) 0 2.5px, transparent 3px),
        radial-gradient(ellipse 38% 420px at 80% 200px, var(--cfx-glow), transparent 72%);
    --cfx-fundo-corpo:
        radial-gradient(circle at 7% max(1000px, 38%), var(--cfx-dourado) 0 2.5px, transparent 3px),
        radial-gradient(circle at 93% max(1300px, 57%), var(--cfx-dourado) 0 2px, transparent 2.5px),
        radial-gradient(circle at 14% max(1700px, 84%), var(--cfx-dourado) 0 2px, transparent 2.5px),
        radial-gradient(ellipse 34% 14% at 10% 42%, var(--cfx-glow), transparent 70%),
        radial-gradient(ellipse 34% 14% at 90% 74%, var(--cfx-glow), transparent 70%);
    --cfx-fundo: var(--cfx-fundo-topo), var(--cfx-fundo-corpo);
}

/* Landing: o topo é o Hero (variante própria) - o <main> só leva meio +
   fim, e as camadas começam abaixo do Hero (que tem fundo transparente:
   sem isto, as curvas do meio apareciam por trás dele). */
body:not(.pagina-painel) .certifixe-bg--corpo {
    --cfx-mascara: var(--cfx-mascara-meio), var(--cfx-mascara-fim);
    --cfx-fundo: var(--cfx-fundo-corpo);
    --cfx-inset: 680px 0 0 0;
}

/* ---- Camadas (partilhadas por todas as variantes) ---- */
body:not(.pagina-painel) .certifixe-bg::before,
body:not(.pagina-painel) .certifixe-bg::after {
    content: "";
    position: absolute;
    inset: var(--cfx-inset, 0);
    z-index: -1;
    pointer-events: none;
    opacity: var(--bg-opacity);
}

/* Camada 1 - brilhos radiais azuis + pontos dourados */
body:not(.pagina-painel) .certifixe-bg::before {
    background: var(--cfx-fundo);
}

/* Camada 2 - wireframes, curvas/linhas, pontos e geometria (máscaras) */
body:not(.pagina-painel) .certifixe-bg::after {
    background-color: var(--cfx-cor);
    -webkit-mask: var(--cfx-mascara);
            mask: var(--cfx-mascara);
}

/* Intensidade por página - só `--bg-opacity`. */
body:not(.pagina-painel) .certifixe-bg--medio { --bg-opacity: 0.9; }
body:not(.pagina-painel) .certifixe-bg--suave { --bg-opacity: 0.7; }
body:not(.pagina-painel) .certifixe-bg--discreto { --bg-opacity: 0.45; }

/* O cabeçalho decorado do painel (`.cabecalho-modulo-decorado`) tem as
   suas próprias formas - numa página com `.certifixe-bg` escondem-se só
   essas formas, para não haver duas decorações. A regra global não muda
   (continua a servir o dashboard e as páginas internas). */
body:not(.pagina-painel) .certifixe-bg .cabecalho-modulo-decorado::before,
body:not(.pagina-painel) .certifixe-bg .cabecalho-modulo-decorado::after {
    display: none;
}

/* ---- Variante do Hero da landing (composição aprovada em relação à
   captura). Única variante com movimento e com recorte próprio: a
   camada das peças começa 40px fora do Hero, que a recorta - nunca fica
   sob a navbar nem cria scroll horizontal. ---- */
body:not(.pagina-painel) .certifixe-bg--hero {
    --cfx-fundo:
        radial-gradient(circle at calc(50% + 330px) 470px, var(--cfx-dourado) 0 3px, transparent 3.5px),
        radial-gradient(circle at calc(50% + 612px) 96px, var(--cfx-dourado) 0 2.5px, transparent 3px),
        radial-gradient(ellipse 34% 62% at calc(50% + 330px) 52%, var(--cfx-glow), transparent 72%);
    --cfx-mascara:
        var(--cfx-peca-cert) calc(50% - 10px) 10px / 290px auto no-repeat,
        var(--cfx-peca-cert-qr) calc(50% + 480px) 470px / 190px auto no-repeat,
        var(--cfx-peca-geo) calc(50% + 640px) 20px / 150px auto no-repeat,
        var(--cfx-peca-geo) calc(50% + 15px) 470px / 120px auto no-repeat,
        var(--cfx-peca-linhas) calc(50% + 380px) 0 / 760px auto no-repeat;
    --cfx-inset: 0;
    overflow: clip;
    isolation: isolate;
}

body:not(.pagina-painel) .certifixe-bg--hero::after {
    inset: -40px;
    animation: cfx-deriva 36s ease-in-out infinite alternate;
}

@keyframes cfx-deriva {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -4px, 0); }
}

/* ---- Ecrãs estreitos (layout empilhado): menos elementos e mais ténues ---- */
@media (max-width: 991.98px) {
    body:not(.pagina-painel) .certifixe-bg:not(.certifixe-bg--hero) {
        --cfx-mascara-topo:
            var(--cfx-peca-cert) calc(100% + 60px) 16px / 170px auto no-repeat,
            var(--cfx-peca-geo) -10px 280px / 96px auto no-repeat,
            var(--cfx-peca-curvas) 0 0 / 100% 440px no-repeat;
        --cfx-mascara-meio:
            var(--cfx-peca-curvas-corpo) 0 max(700px, 35%) / 100% 360px no-repeat,
            var(--cfx-peca-geo-suave) right -12px top max(820px, 30%) / 84px auto no-repeat,
            var(--cfx-peca-cert-suave) left -80px top max(1000px, 55%) / 170px auto no-repeat,
            var(--cfx-peca-pontos) right 3% top max(1200px, 74%) / 110px auto no-repeat;
        --cfx-mascara-fim:
            var(--cfx-peca-cert-qr-suave) right -40px top max(1400px, calc(100% - 260px)) / 140px auto no-repeat;
        --cfx-mascara: var(--cfx-mascara-topo), var(--cfx-mascara-meio), var(--cfx-mascara-fim);
        --cfx-fundo-topo:
            radial-gradient(circle at calc(100% - 26px) 300px, var(--cfx-dourado) 0 2.5px, transparent 3px),
            radial-gradient(ellipse 80% 300px at 70% 120px, var(--cfx-glow), transparent 72%);
        --cfx-fundo-corpo:
            radial-gradient(circle at 8% max(900px, 46%), var(--cfx-dourado) 0 2px, transparent 2.5px),
            radial-gradient(ellipse 70% 10% at 20% 50%, var(--cfx-glow), transparent 70%);
        --cfx-fundo: var(--cfx-fundo-topo), var(--cfx-fundo-corpo);
    }
    body:not(.pagina-painel) .certifixe-bg--corpo {
        --cfx-mascara: var(--cfx-mascara-meio), var(--cfx-mascara-fim);
        --cfx-fundo: var(--cfx-fundo-corpo);
        --cfx-inset: 1020px 0 0 0;
    }
    body:not(.pagina-painel) .certifixe-bg--hero {
        --cfx-fundo:
            radial-gradient(circle at calc(100% - 22px) calc(100% - 262px), var(--cfx-dourado) 0 2.5px, transparent 3px),
            radial-gradient(ellipse 80% 30% at 50% calc(100% - 150px), var(--cfx-glow), transparent 72%);
        --cfx-mascara:
            var(--cfx-peca-cert-hero-mobile) calc(100% + 24px) 92px / 150px auto no-repeat,
            var(--cfx-peca-geo) -6px calc(100% + 14px) / 96px auto no-repeat;
    }
    body:not(.pagina-painel) .certifixe-bg--hero::after {
        inset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.pagina-painel) .certifixe-bg--hero::after { animation: none; }
}

/* ---- "Como Funciona" (landing): número ao lado do título ----
   Grelha no próprio cartão do passo (sem wrapper nem position:absolute):
   coluna 1 = número (ocupa as duas linhas), coluna 2 = título e, por
   baixo, a descrição - recuada, alinhada com o título. O título desce
   metade da diferença entre o círculo (2.25rem) e a sua própria linha
   (1.2em), para o número ficar centrado na PRIMEIRA linha do título,
   mesmo quando este quebra em duas. Os passos só ficam lado a lado a
   partir de 992px (`flex-lg-row` em home.html); abaixo disso, um por
   linha, com a mesma grelha. */

/* =====================================================================
   Landing 2026-09 (home.html, `body.pagina-lp`) - identidade nova:
   muito espaço, títulos grandes, o produto (capturas reais em mockups
   CSS) como protagonista, pouco texto. Tema claro fixo (`data-tema-
   fixo` em base.html). Classes `lp-*` só existem nesta página.
   ===================================================================== */
body.pagina-lp {
    --lp-h1: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
    --lp-h2: clamp(1.875rem, 1.3rem + 1.9vw, 2.875rem);
    --lp-sub: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
    --lp-texto: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --lp-secao-y: clamp(4rem, 2.6rem + 4.6vw, 7.5rem);
    --lp-raio-grande: 1.5rem;
    background: #FFFFFF;
    color: #111827;
}

/* Âncoras (#planos, #como-funciona...) não ficam escondidas atrás do
   cabeçalho fixo. */
body.pagina-lp section[id] {
    scroll-margin-top: 5rem;
}

.lp-hero {
    padding: clamp(3rem, 1.5rem + 5vw, 6.5rem) 0 clamp(3.5rem, 2rem + 4vw, 6rem);
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(102, 114, 248, 0.10), transparent 60%),
        radial-gradient(40rem 24rem at -10% 110%, rgba(102, 114, 248, 0.06), transparent 60%);
}

.lp-rotulo {
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5A5AF2;
}

.lp-titulo-hero {
    margin-bottom: 1.25rem;
    font-size: var(--lp-h1);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #111827;
    text-wrap: balance;
}

.lp-acento {
    color: #5A5AF2;
}

.lp-subtitulo {
    max-width: 32rem;
    margin-bottom: 2rem;
    font-size: var(--lp-sub);
    line-height: 1.55;
    color: #6B7280;
}

.lp-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pagina-lp .btn-lg {
    min-height: 52px;
    padding-inline: 1.5rem;
    font-size: 1rem;
    border-radius: 0.75rem;
}

.pagina-lp .btn-outline-secondary {
    --bs-btn-bg: #FFFFFF;
}

.lp-secao {
    padding: var(--lp-secao-y) 0;
}

.lp-secao--compacta {
    padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.lp-secao--suave {
    background: #F9FAFB;
    border-top: 1px solid #F1F2F4;
    border-bottom: 1px solid #F1F2F4;
}

.lp-cabecalho-secao {
    max-width: 44rem;
    margin: 0 auto clamp(2.5rem, 1.8rem + 2vw, 4rem);
}

.lp-titulo {
    margin-bottom: 1rem;
    font-size: var(--lp-h2);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #111827;
    text-wrap: balance;
}

.lp-cabecalho-secao .lp-titulo {
    margin-bottom: 0;
}

.lp-texto {
    max-width: 30rem;
    margin-bottom: 1.5rem;
    font-size: var(--lp-texto);
    line-height: 1.6;
    color: #6B7280;
}

.lp-lista {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    font-size: var(--lp-texto);
    color: #374151;
}

.lp-lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.lp-lista i {
    flex-shrink: 0;
    margin-top: 0.1em;
    color: #6672F8;
    font-size: 1.15em;
}

.lp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #5A5AF2;
    text-decoration: none;
}

.lp-link i {
    transition: transform 0.18s ease;
}

.lp-link:hover {
    color: #3E3EC8;
}

@media (hover: hover) {
    .lp-link:hover i {
        transform: translateX(3px);
    }
}

/* ---- Mockup de portátil (só CSS, à volta de uma captura real) ---- */
.lp-mockup {
    position: relative;
}

.lp-mockup.reveal {
    --cfx-de: translateY(16px) scale(0.98);
}

.lp-portatil {
    position: relative;
    width: 100%;
    margin: 0 auto;
    filter: drop-shadow(0 30px 40px rgba(17, 24, 39, 0.16)) drop-shadow(0 8px 12px rgba(17, 24, 39, 0.08));
}

.lp-portatil-ecra {
    position: relative;
    width: 89.3%;
    margin: 0 auto;
    padding: 2.2% 2.2% 2.6%;
    background: #0F1115;
    border-radius: 1rem 1rem 0.35rem 0.35rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Câmara */
.lp-portatil-ecra::before {
    content: "";
    position: absolute;
    top: 0.9%;
    left: 50%;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #2A2D35;
    transform: translateX(-50%);
}

.lp-portatil-ecra img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    border-radius: 0.2rem;
    background: #F3F4F6;
}

.lp-portatil-base {
    /* A base é que ocupa a largura toda da coluna (o ecrã fica a 89%,
       centrado) - antes era a base a 112% com margem negativa, que
       passava a margem direita da página em ecrãs estreitos. */
    position: relative;
    width: 100%;
    height: clamp(0.55rem, 0.3rem + 0.8vw, 1rem);
    background: linear-gradient(180deg, #E5E7EB 0%, #C9CDD4 70%, #AEB3BC 100%);
    border-radius: 0 0 1.25rem 1.25rem;
}

/* Entalhe de abrir o portátil */
.lp-portatil-base::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 16%;
    height: 40%;
    background: #B8BDC6;
    border-radius: 0 0 0.6rem 0.6rem;
    transform: translateX(-50%);
}

/* Segundo ecrã (tablet) por cima do portátil, em baixo à direita. */
.lp-mockup-extra {
    position: absolute;
    right: -2%;
    bottom: -10%;
    width: 44%;
    margin: 0;
    padding: 0.45rem;
    background: #0F1115;
    border-radius: 1rem;
    box-shadow: 0 24px 40px -12px rgba(17, 24, 39, 0.35);
}

.lp-mockup-extra img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top left;
    border-radius: 0.6rem;
}

.lp-mockup--com-extra {
    margin-bottom: 8%;
}

/* ---- Certificado (documento real) ---- */
.lp-certificado picture img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 30px 50px -20px rgba(17, 24, 39, 0.28), 0 0 0 1px rgba(17, 24, 39, 0.06);
    transform: rotate(-1.5deg);
}

.lp-certificado-selo {
    position: absolute;
    left: 6%;
    bottom: -1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 0.875rem;
    box-shadow: 0 16px 30px -12px rgba(17, 24, 39, 0.25);
}

.lp-certificado-selo i {
    color: #5A5AF2;
    font-size: 1.1rem;
}

/* ---- Tudo num só lugar ---- */
.lp-modulos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-modulos li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.lp-modulos li + li {
    border-left: 1px solid #E5E7EB;
}

.lp-modulos strong {
    margin-top: 0.75rem;
    font-weight: 600;
    color: #111827;
}

.lp-modulos span:last-child {
    font-size: 0.875rem;
    color: #6B7280;
}

.lp-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.35rem;
    color: #5A5AF2;
    background: rgba(102, 114, 248, 0.10);
    border-radius: 50%;
}

/* ---- Para quem é: 4 blocos com captura real de fundo ---- */
.lp-publicos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.lp-publico {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 26rem;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
    background: #111827;
    border-radius: var(--lp-raio-grande);
    isolation: isolate;
}

.lp-publico-fundo img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}

.lp-publico::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Fotografia visível em cima (tinta índigo leve), escurece para
       baixo, onde fica o texto - o texto branco assenta sempre na
       parte escura (>= 7:1). */
    background:
        linear-gradient(180deg, rgba(62, 62, 200, 0.18) 0%, rgba(52, 52, 159, 0.45) 40%, rgba(22, 22, 70, 0.88) 72%, rgba(17, 24, 39, 0.96) 100%);
}

.lp-publico-conteudo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 26rem;
}

.lp-publico-rotulo {
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.lp-publico-titulo {
    margin: 0.25rem 0 0;
    font-size: clamp(1.5rem, 1.15rem + 1vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.lp-publico-descricao {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.lp-publico-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.6rem 1.1rem;
    font-weight: 600;
    color: #3E3EC8;
    background: #FFFFFF;
    border-radius: 0.75rem;
}

.lp-publico:focus-visible {
    outline: 3px solid #6672F8;
    outline-offset: 3px;
}

@media (hover: hover) {
    .lp-publico:hover .lp-publico-fundo img {
        transform: scale(1.04);
    }
}

/* ---- Como funciona ---- */
.lp-passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-passos li {
    padding-top: 1.25rem;
    border-top: 2px solid #E5E7EB;
}

.lp-passos li:first-child {
    border-top-color: #6672F8;
}

.lp-passo-numero {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #5A5AF2;
}

.lp-passos h3 {
    margin-bottom: 0.35rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.lp-passos p {
    margin: 0;
    color: #6B7280;
}

/* ---- FAQ ---- */
.lp-faq {
    max-width: 48rem;
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: #111827;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1.35rem;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
}

.lp-faq .accordion-item {
    border-bottom: 1px solid #E5E7EB;
}

.lp-faq .accordion-button {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #111827;
    background: transparent;
    box-shadow: none;
}

.lp-faq .accordion-button:focus-visible {
    box-shadow: var(--cfx-foco);
}

.lp-faq .accordion-body {
    padding-bottom: 1.35rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #6B7280;
}

/* ---- CTA final ---- */
.lp-secao--cta {
    padding-top: 0;
}

.lp-cta {
    position: relative;
    padding: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
    overflow: hidden;
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(135deg, #4848DE 0%, #5A5AF2 45%, #7A83FA 100%);
    border-radius: 1.75rem;
    isolation: isolate;
}

.lp-cta::before,
.lp-cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.lp-cta::before {
    top: -40%;
    right: -8%;
    width: 26rem;
    height: 26rem;
}

.lp-cta::after {
    bottom: -45%;
    left: -6%;
    width: 18rem;
    height: 18rem;
}

.lp-cta h2 {
    margin-bottom: 0.75rem;
    font-size: var(--lp-h2);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    text-wrap: balance;
}

.lp-cta p {
    margin-bottom: 2rem;
    font-size: var(--lp-sub);
    color: rgba(255, 255, 255, 0.85);
}

.lp-botao-branco {
    --bs-btn-color: #3E3EC8;
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #FFFFFF;
    --bs-btn-hover-color: #3E3EC8;
    --bs-btn-hover-bg: #EEF0FE;
    --bs-btn-hover-border-color: #EEF0FE;
    --bs-btn-active-color: #3E3EC8;
    --bs-btn-active-bg: #E0E3FD;
    --bs-btn-active-border-color: #E0E3FD;
    font-weight: 600;
}

.lp-botao-contorno {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, 0.55);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.18);
    --bs-btn-active-border-color: #FFFFFF;
}

.lp-cta .btn:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* ---- Rodapé compacto (só na landing, `_rodape_compacto.html`) ---- */
.rodape-compacto {
    padding: 3.5rem 0 2rem;
    font-size: 0.9375rem;
    color: #6B7280;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
}

.rodape-compacto-topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
}

.rodape-compacto-marca {
    max-width: 22rem;
}

.rodape-compacto-marca p {
    margin: 0.75rem 0 0;
}

.rodape-compacto-contactos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    font-size: 0.875rem;
}

.rodape-compacto-contactos a,
.rodape-compacto-contactos span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rodape-compacto-colunas {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 2.5rem 4rem;
}

.rodape-compacto-colunas div {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rodape-compacto-colunas h2 {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #111827;
}

.rodape-compacto a {
    color: #6B7280;
    text-decoration: none;
    transition: color 0.15s ease;
}

.rodape-compacto a:hover,
.rodape-compacto a:focus-visible {
    color: #5A5AF2;
}

.rodape-compacto-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    font-size: 0.875rem;
    border-top: 1px solid #E5E7EB;
}

.rodape-compacto-legal {
    display: inline-flex;
    gap: 0.5rem;
}

/* ---- Tablet (768-1199) e mobile ---- */
@media (max-width: 1199.98px) {
    .lp-modulos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .lp-modulos li + li {
        border-left: 0;
    }

    .lp-modulos li:nth-child(3n + 2),
    .lp-modulos li:nth-child(3n + 3) {
        border-left: 1px solid #E5E7EB;
    }
}

@media (max-width: 991.98px) {
    .lp-subtitulo,
    .lp-texto {
        max-width: 40rem;
    }

    .lp-passos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .lp-mockup-extra {
        right: 0;
    }
}

@media (max-width: 767.98px) {
    .lp-publicos {
        grid-template-columns: 1fr;
    }

    .lp-publico {
        min-height: 19rem;
    }

    .rodape-compacto-colunas {
        grid-template-columns: repeat(2, auto);
        gap: 2rem 3rem;
    }
}

@media (max-width: 575.98px) {
    .lp-acoes .btn {
        width: 100%;
    }

    .lp-modulos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-modulos li:nth-child(n) {
        border-left: 0;
    }

    .lp-modulos li:nth-child(2n) {
        border-left: 1px solid #E5E7EB;
    }

    .lp-passos {
        grid-template-columns: 1fr;
    }

    .lp-mockup-extra {
        width: 50%;
        bottom: -14%;
    }

    .lp-mockup--com-extra {
        margin-bottom: 14%;
    }

    .lp-certificado-selo {
        position: static;
        margin-top: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-publico-fundo img,
    .lp-link i {
        transition: none;
    }
}

/* ---- Cabeçalho público (todas as páginas públicas) ----
   Minimalista: logótipo à esquerda, poucos links ao centro, "Entrar" +
   CTA à direita; translúcido sobre o conteúdo ao fazer scroll. */
.cabecalho-publico {
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cfx-borda);
}

.cabecalho-publico .navbar {
    min-height: 4.25rem;
}

.cabecalho-publico .nav-link {
    color: var(--cfx-texto-secundario);
}

.cabecalho-publico .nav-link:hover,
.cabecalho-publico .nav-link:focus-visible {
    color: var(--cfx-texto);
}

.cabecalho-publico .cabecalho-acoes .nav-link {
    color: var(--cfx-texto);
}

.btn-navbar-cta {
    padding: 0.6rem 1.15rem;
    border-radius: 0.75rem;
    font-weight: 600;
}

@media (min-width: 992px) {
    .cabecalho-links {
        gap: 1.1rem;
    }

    .cabecalho-acoes {
        gap: 0.75rem;
    }
}

@media (min-width: 1200px) {
    .cabecalho-links {
        gap: 1.75rem;
    }

    .cabecalho-acoes {
        gap: 1rem;
    }
}

/* Botões ☰ (abrir a gaveta) e ✕ (fechar): 44 x 44 px para o toque. */
.cabecalho-botao-menu,
.cabecalho-botao-fechar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--cfx-texto);
    background: transparent;
    border: 0;
    border-radius: 0.7rem;
    transition: background-color 0.15s ease;
}

.cabecalho-botao-menu { font-size: 1.5rem; }
.cabecalho-botao-fechar { margin-right: -0.5rem; font-size: 1.05rem; }

.cabecalho-botao-menu:hover,
.cabecalho-botao-fechar:hover { background: var(--cfx-superficie-suave); }

/* Sem o anel de foco pesado depois de um toque; só com o teclado. */
.cabecalho-botao-menu:focus,
.cabecalho-botao-fechar:focus { outline: none; box-shadow: none; }

.cabecalho-botao-menu:focus-visible,
.cabecalho-botao-fechar:focus-visible { box-shadow: var(--cfx-foco); }

/* Menu em gaveta pela direita (telemóvel e tablet, < 992px).
   Ordem: links, separador, tema, "Entrar"/"Painel" com contorno e o CTA
   preenchido em largura total. */
@media (max-width: 991.98px) {
    /* O `backdrop-filter` faria da gaveta (fixa, dentro do cabeçalho) uma
       caixa presa à altura do cabeçalho: aqui o fundo é sólido. */
    .cabecalho-publico {
        background: var(--bs-body-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Gaveta aberta: o cabeçalho (contexto próprio por ser sticky) sobe
       acima do fundo escuro do Bootstrap e escurece-se com o mesmo tom. */
    .cabecalho-publico.menu-aberto { z-index: 1050; }

    .cabecalho-publico::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: #000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s linear;
    }

    .cabecalho-publico.menu-aberto::after {
        opacity: 0.5;
        pointer-events: auto;
    }

    .menu-publico {
        --bs-offcanvas-width: min(86vw, 340px);
        --bs-offcanvas-padding-x: 1.25rem;
        --bs-offcanvas-border-color: var(--cfx-borda);
        --bs-offcanvas-transition: transform 0.25s ease-out;
        z-index: 1045;
        height: 100vh;
        height: 100dvh;
        box-shadow: -18px 0 40px -18px rgba(15, 23, 42, 0.45);
    }

    .menu-publico .offcanvas-header {
        justify-content: space-between;
        min-height: 4.25rem;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 1px solid var(--cfx-borda);
    }

    .menu-publico .offcanvas-body {
        display: flex;
        padding-top: 0.5rem;
        padding-bottom: 1.5rem;
        overscroll-behavior: contain;
    }

    .cabecalho-links .nav-link,
    .cabecalho-acoes .nav-link {
        padding: 0.8rem 0.25rem;
        font-size: 1rem;
    }

    .cabecalho-links .nav-link {
        border-radius: 0.6rem;
    }

    .cabecalho-links .nav-link:hover {
        background: var(--cfx-superficie-suave);
    }

    .cabecalho-acoes {
        gap: 0.75rem;
        margin-top: 0.75rem;
        padding-top: 1rem;
        border-top: 1px solid var(--cfx-borda);
    }

    .cabecalho-acoes [data-alternar-tema] {
        order: -1;
        align-self: flex-start;
    }

    .cabecalho-publico .cabecalho-acoes .nav-link {
        padding: 0.65rem 1rem;
        text-align: center;
        border: 1px solid var(--cfx-borda);
        border-radius: 0.75rem;
    }

    .cabecalho-publico .cabecalho-acoes .nav-link:hover {
        border-color: var(--cfx-texto-secundario);
    }

    .cabecalho-acoes .btn-navbar-cta {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .menu-publico { --bs-offcanvas-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-publico,
    .cabecalho-publico::after { transition: none !important; }
}

.cabecalho-cta-movel {
    border-radius: 0.6rem;
    font-weight: 600;
}

/* Ecrãs muito estreitos (320px): logótipo, CTA e ☰ numa só linha. */
@media (max-width: 359.98px) {
    .cabecalho-cta-movel {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.8rem;
    }

    .cabecalho-publico .navbar-brand { margin-right: 0.5rem; }
}


/* ---- Entrada da Landing - elemento a elemento, bem visível ----
   A página define a ordem (`--cfx-d` em cada `.reveal`, ver home.html;
   `data-entrada-manual` no <body>). Aqui só a "força" do movimento:
   700ms, 28px a subir; os mockups sobem 40px e crescem de 96% para 100%
   em 1s. Na 1.ª página da sessão, o Hero só começa quando a camada de
   abertura sai (420ms) - antes animava escondido por trás dela. */
html.cfx-abertura body.pagina-lp {
    --cfx-base: 420ms;
}

body.pagina-lp .reveal {
    --cfx-de: translateY(28px);
}

body.pagina-lp .lp-mockup.reveal {
    --cfx-de: translateY(40px) scale(0.96);
}

html.cfx-entrada body.pagina-lp .reveal.mostrar:not(.cfx-revelado) {
    animation-duration: 700ms;
}

html.cfx-entrada body.pagina-lp .lp-mockup.reveal.mostrar:not(.cfx-revelado) {
    animation-duration: 1000ms;
}

/* O <main> não faz fade próprio na landing - cada elemento já entra
   sozinho (evita o conteúdo inteiro a aparecer de uma vez por baixo). */
html.cfx-entrada:not(.cfx-entrada-feita) body.pagina-lp > main {
    animation: none;
}

/* ---- Índice de Relatórios (relatorios/index.html) - cartão clicável:
   ícone, título, seta; altura igual em cada linha da grelha. ---- */
.cartao-relatorio {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    height: 100%;
    min-height: 4.25rem;
    padding: 0.875rem 1rem;
    color: var(--cfx-texto);
    text-decoration: none;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 0.875rem;
    box-shadow: var(--cfx-sombra-cartao);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cartao-relatorio:hover {
    color: var(--cfx-texto);
    border-color: color-mix(in srgb, var(--cfx-primaria) 45%, var(--cfx-borda));
    box-shadow: var(--cfx-sombra-elevada);
}

.cartao-relatorio:focus-visible {
    outline: none;
    border-color: var(--cfx-primaria);
    box-shadow: var(--cfx-foco);
}

.cartao-relatorio-icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--icone-dados);
    background: color-mix(in srgb, var(--cfx-primaria) 10%, transparent);
    border-radius: 0.625rem;
}

.cartao-relatorio-titulo {
    flex: 1;
    font-weight: 500;
    line-height: 1.35;
}

.cartao-relatorio-seta {
    flex-shrink: 0;
    color: var(--cfx-texto-secundario);
    transition: transform 0.15s ease, color 0.15s ease;
}

.cartao-relatorio:hover .cartao-relatorio-seta {
    color: var(--bs-primary);
    transform: translateX(2px);
}

.cartao-relatorio--destaque {
    border-color: color-mix(in srgb, var(--cfx-primaria) 40%, var(--cfx-borda));
    background: color-mix(in srgb, var(--cfx-primaria) 5%, var(--cfx-superficie));
}

@media (prefers-reduced-motion: reduce) {
    .cartao-relatorio,
    .cartao-relatorio-seta {
        transition: none;
    }
}

/* ---- Hero em painel índigo (mesmo elemento do CTA final) ----
   A landing abre e fecha com o mesmo bloco. Gradiente do escuro (onde
   fica o texto: #3E3EC8 ~7:1 com branco) para o mais claro (onde fica o
   portátil) - o texto nunca assenta na parte clara. */
.lp-hero {
    padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem) 0 0;
    background: none;
}

.lp-hero-painel {
    position: relative;
    padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 0.75rem + 3.5vw, 4.5rem);
    overflow: hidden;
    color: #FFFFFF;
    background: linear-gradient(135deg, #34349F 0%, #3E3EC8 30%, #5A5AF2 70%, #7A83FA 100%);
    border-radius: 1.75rem;
    isolation: isolate;
}

.lp-hero-painel::before,
.lp-hero-painel::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.lp-hero-painel::before {
    top: -30%;
    right: -10%;
    width: 34rem;
    height: 34rem;
}

.lp-hero-painel::after {
    bottom: -40%;
    left: -8%;
    width: 22rem;
    height: 22rem;
}

.lp-hero-painel .lp-rotulo {
    color: rgba(255, 255, 255, 0.78);
}

.lp-hero-painel .lp-titulo-hero {
    color: #FFFFFF;
}

.lp-hero-painel .lp-acento {
    color: #C7CBFF;
}

.lp-hero-painel .lp-subtitulo {
    color: rgba(255, 255, 255, 0.88);
}

/* Portáteis pequenos (992-1199px): a coluna do texto é estreita - o
   título fica em 3 linhas e os dois botões lado a lado, como no ecrã
   grande, em vez de 4 linhas e botões empilhados. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .lp-hero-painel .lp-titulo-hero {
        font-size: 2.625rem;
    }

    .lp-hero-painel .lp-acoes .btn-lg {
        padding-inline: 1.1rem;
        font-size: 1rem;
    }
}

/* 1200-1399px (inclui os portáteis de 1366px): a coluna do texto ainda
   só tem ~510px - título um pouco mais pequeno para ficar em 3 linhas. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .lp-hero-painel .lp-titulo-hero {
        font-size: 3.25rem;
    }
}

.lp-hero-painel .lp-portatil {
    filter: drop-shadow(0 30px 40px rgba(17, 17, 70, 0.45)) drop-shadow(0 8px 12px rgba(17, 17, 70, 0.25));
}

.lp-hero-painel .btn:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

.lp-cta p {
    color: rgba(255, 255, 255, 0.9);
}

/* ---- Mobile e tablet (< 992px): texto do conteúdo centrado ----
   Rótulos, títulos, textos, listas, ligações e passos ao centro; botões
   a toda a largura. A FAQ continua alinhada à esquerda (perguntas de
   acordeão centradas lêem-se mal). */
@media (max-width: 991.98px) {
    .lp-hero-painel,
    .pagina-lp .lp-secao .col-lg-5,
    .pagina-lp .lp-secao .col-lg-6 {
        text-align: center;
    }

    .lp-subtitulo,
    .lp-texto {
        margin-inline: auto;
    }

    .lp-acoes {
        justify-content: center;
    }

    /* A lista fica centrada como um bloco, com os itens alinhados entre
       si (ícones em coluna), não cada linha centrada à sua maneira. */
    .lp-lista {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .lp-lista li {
        text-align: left;
    }

    .lp-link {
        display: flex;
        justify-content: center;
    }

    .lp-passos li {
        text-align: center;
    }

    .lp-publico {
        justify-content: center;
        text-align: center;
    }

    .lp-publico-conteudo {
        align-items: center;
    }
}

/* ---- Marketplace: "Carregar mais" (marketplace/_botao_mais_cursos.html) ---- */
.marketplace-mais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.marketplace-mais-contagem {
    margin: 0;
    font-size: 0.875rem;
    color: var(--cfx-texto-secundario);
}

.marketplace-mais-botao {
    min-width: 14rem;
}

.marketplace-mais-botao[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
}

/* Cursos acrescentados pelo botão entram com o mesmo movimento do resto
   do site (opacidade + 12px, 360ms), em cascata curta. */
.marketplace-cartao-novo {
    animation: cfx-entrada-item 360ms cubic-bezier(.22, 1, .36, 1) backwards;
    --cfx-de: translateY(12px);
}

.marketplace-cartao-novo:nth-child(3n + 2) { animation-delay: 60ms; }
.marketplace-cartao-novo:nth-child(3n + 3) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
    .marketplace-cartao-novo {
        animation: none;
    }
}

/* ---- Hero: portátil + tablet + telemóvel (_mockup_dispositivos.html) ----
   Portátil ao centro; tablet à frente à esquerda, telemóvel à frente à
   direita, a sobrepor a base do portátil. Molduras só em CSS. */
.lp-dispositivos {
    position: relative;
    padding: 0 7% 12% 9%;
}

.lp-tablet,
.lp-telemovel {
    position: absolute;
    margin: 0;
    background: #0F1115;
    box-shadow: 0 28px 50px -18px rgba(17, 17, 70, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.lp-tablet img,
.lp-telemovel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    background: #FFFFFF;
}

.lp-tablet {
    left: 0;
    bottom: 0;
    width: 29%;
    aspect-ratio: 3 / 4.2;
    padding: 2.4% 1.8%;
    border-radius: 1.1rem;
}

.lp-tablet img {
    border-radius: 0.45rem;
}

.lp-telemovel {
    right: 1%;
    bottom: -2%;
    width: 17%;
    aspect-ratio: 9 / 19;
    padding: 1.6% 1.2%;
    border-radius: 1.35rem;
}

.lp-telemovel img {
    border-radius: 1rem;
}

/* "Ilha" do telemóvel */
.lp-telemovel::before {
    content: "";
    position: absolute;
    top: 3.2%;
    left: 50%;
    z-index: 1;
    width: 30%;
    height: 2.4%;
    background: #0F1115;
    border-radius: 999px;
    transform: translateX(-50%);
}

/* Entrada: o conjunto entra com o mockup (`.lp-mockup.reveal`); tablet e
   telemóvel chegam logo a seguir, dos lados. */
html.cfx-entrada body.pagina-lp .lp-mockup.mostrar:not(.cfx-revelado) .lp-tablet {
    animation: cfx-entrada-item 900ms cubic-bezier(.22, 1, .36, 1) calc(var(--cfx-base, 0ms) + var(--cfx-d, 0ms) + 250ms) backwards;
    --cfx-de: translate(-28px, 16px);
}

html.cfx-entrada body.pagina-lp .lp-mockup.mostrar:not(.cfx-revelado) .lp-telemovel {
    animation: cfx-entrada-item 900ms cubic-bezier(.22, 1, .36, 1) calc(var(--cfx-base, 0ms) + var(--cfx-d, 0ms) + 380ms) backwards;
    --cfx-de: translate(28px, 16px);
}

@media (prefers-reduced-motion: reduce) {
    html.cfx-entrada body.pagina-lp .lp-mockup .lp-tablet,
    html.cfx-entrada body.pagina-lp .lp-mockup .lp-telemovel {
        animation: none;
    }
}

/* ---- Landing: imagem do painel no tema ativo (_imagem_tema.html) ---- */
.lp-img-claro,
.lp-img-escuro {
    display: block;
}

.lp-img-escuro,
[data-bs-theme="dark"] .lp-img-claro {
    display: none;
}

[data-bs-theme="dark"] .lp-img-escuro {
    display: block;
}

.lp-tablet picture,
.lp-telemovel picture {
    height: 100%;
}

/* ---- Landing em modo escuro - grafite, como o painel ----
   O painel índigo do Hero e o CTA final ficam iguais nos dois temas. */
[data-bs-theme="dark"] body.pagina-lp {
    background: #111214;
    color: #ECEDEF;
}

[data-bs-theme="dark"] .lp-hero {
    background: none;
}

[data-bs-theme="dark"] body.pagina-lp .lp-rotulo,
[data-bs-theme="dark"] body.pagina-lp .lp-passo-numero,
[data-bs-theme="dark"] body.pagina-lp .lp-acento {
    color: #A5ACFB;
}

[data-bs-theme="dark"] .lp-hero-painel .lp-rotulo {
    color: rgba(255, 255, 255, 0.78);
}

[data-bs-theme="dark"] .lp-hero-painel .lp-acento {
    color: #C7CBFF;
}

[data-bs-theme="dark"] .lp-titulo,
[data-bs-theme="dark"] .lp-modulos strong,
[data-bs-theme="dark"] .lp-passos h3,
[data-bs-theme="dark"] .lp-faq .accordion-button {
    color: #F3F4F6;
}

[data-bs-theme="dark"] .lp-texto,
[data-bs-theme="dark"] .lp-modulos span:last-child,
[data-bs-theme="dark"] .lp-passos p,
[data-bs-theme="dark"] .lp-faq .accordion-body {
    color: #9CA3AF;
}

[data-bs-theme="dark"] .lp-lista {
    color: #D1D5DB;
}

[data-bs-theme="dark"] .lp-lista i {
    color: #8B94FA;
}

[data-bs-theme="dark"] .lp-link {
    color: #A5ACFB;
}

[data-bs-theme="dark"] .lp-link:hover {
    color: #C3C8FD;
}

[data-bs-theme="dark"] .lp-secao--suave {
    background: #16171A;
    border-color: #1F2024;
}

[data-bs-theme="dark"] .lp-modulos li + li,
[data-bs-theme="dark"] .lp-modulos li:nth-child(n) {
    border-color: #2A2C31;
}

[data-bs-theme="dark"] .lp-icone {
    color: #A5ACFB;
    background: rgba(139, 148, 250, 0.14);
}

[data-bs-theme="dark"] .lp-passos li {
    border-top-color: #2A2C31;
}

[data-bs-theme="dark"] .lp-passos li:first-child {
    border-top-color: #8B94FA;
}

[data-bs-theme="dark"] .lp-faq .accordion-item {
    border-bottom-color: #2A2C31;
}

[data-bs-theme="dark"] .lp-certificado-selo {
    color: #ECEDEF;
    background: #1A1B1F;
    border-color: #2A2C31;
}

[data-bs-theme="dark"] .lp-certificado-selo i {
    color: #A5ACFB;
}

[data-bs-theme="dark"] .pagina-lp .btn-outline-secondary {
    --bs-btn-bg: #1A1B1F;
}

[data-bs-theme="dark"] .lp-portatil {
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

[data-bs-theme="dark"] .lp-portatil-ecra img,
[data-bs-theme="dark"] .lp-tablet img,
[data-bs-theme="dark"] .lp-telemovel img {
    background: #111214;
}

[data-bs-theme="dark"] .rodape-compacto {
    color: #9CA3AF;
    background: #111214;
    border-top-color: #2A2C31;
}

[data-bs-theme="dark"] .rodape-compacto-colunas h2 {
    color: #F3F4F6;
}

[data-bs-theme="dark"] .rodape-compacto a {
    color: #9CA3AF;
}

[data-bs-theme="dark"] .rodape-compacto a:hover,
[data-bs-theme="dark"] .rodape-compacto a:focus-visible {
    color: #A5ACFB;
}

[data-bs-theme="dark"] .rodape-compacto-base {
    border-top-color: #2A2C31;
}

/* =====================================================================
   Marketplace premium (2026-09) - topo limpo (título + pesquisa), banners
   publicitários no carrossel do topo, panfletos numa faixa entre os
   cursos (ver apps/marketplace/templates/marketplace/_banners.html,
   _panfletos.html; geridos pelo Super Administrador em "Publicidade") e
   cartões de curso mais limpos (_cartao_curso.html).
   ===================================================================== */
.mkt-fundo {
    background: var(--cfx-superficie-suave);
}

.marketplace-secao {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
}

/* ---- Banners (carrossel do topo) ---- */
.mkt-banners {
    margin-bottom: 2rem;
}

.mkt-banners .carousel {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--cfx-superficie);
    box-shadow: var(--cfx-sombra-elevada);
}

.mkt-banner {
    display: block;
}

.mkt-banner img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .mkt-banner img.mkt-banner-img--telemovel {
        aspect-ratio: 9 / 5;
    }
}

.mkt-etiqueta-pub {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3;
    padding: 0.2rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: rgba(17, 24, 39, 0.55);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.mkt-etiqueta-pub--estatica {
    position: static;
    color: var(--cfx-primaria);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.mkt-banners .mkt-banners-seta {
    top: 50%;
    bottom: auto;
    width: 2.75rem;
    height: 2.75rem;
    margin-inline: 0.75rem;
    color: #111827;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

.mkt-banners .carousel:hover .mkt-banners-seta,
.mkt-banners .mkt-banners-seta:focus-visible {
    opacity: 1;
}

.mkt-banners-indicadores {
    margin-bottom: 0.6rem;
}

.mkt-banners-indicadores [data-bs-target] {
    width: 0.5rem;
    height: 0.5rem;
    margin-inline: 0.2rem;
    border: 0;
    border-radius: 999px;
    opacity: 0.55;
    transition: width 0.25s ease, opacity 0.25s ease;
}

.mkt-banners-indicadores .active {
    width: 1.35rem;
    opacity: 1;
}

/* ---- Topo: título e pesquisa ---- */
.mkt-topo {
    margin-bottom: 2rem;
}

.mkt-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.mkt-titulo {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--heading-color);
    text-wrap: balance;
}

.mkt-titulo span {
    color: var(--cfx-primaria);
}

.mkt-subtitulo {
    margin: 0.4rem 0 0;
    color: var(--cfx-texto-secundario);
}

.mkt-anuncie {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--heading-color);
    text-decoration: none;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.mkt-anuncie:hover {
    color: var(--cfx-primaria);
    border-color: var(--cfx-primaria);
}

.mkt-busca {
    padding: 1rem;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 1.25rem;
    box-shadow: var(--cfx-sombra-elevada);
}

.mkt-pesquisa {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.35rem 0.35rem 1.1rem;
    background: var(--cfx-superficie);
    border: 1.5px solid var(--cfx-borda);
    border-radius: 999px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mkt-pesquisa:focus-within {
    border-color: var(--cfx-primaria);
    box-shadow: 0 0 0 4px rgba(var(--cfx-primaria-rgb), 0.12);
}

.mkt-pesquisa > .bi-search {
    font-size: 1.05rem;
    color: var(--cfx-texto-secundario);
}

.mkt-pesquisa .form-control {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.mkt-pesquisa .btn {
    min-height: 2.75rem;
    padding-inline: 1.4rem;
    font-weight: 600;
    border-radius: 999px;
}

.mkt-botao-filtros {
    min-height: 2.75rem;
    border-radius: 999px;
}

.mkt-busca .marketplace-filtros-painel .mkt-filtros {
    margin-top: 0.25rem;
}

@media (min-width: 992px) {
    .mkt-busca .marketplace-filtros-painel {
        margin-top: 1rem;
    }
}

.mkt-filtros .form-label {
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
}

.mkt-busca .form-select-sm,
.mkt-busca .form-control-sm {
    min-height: 2.5rem;
    border-radius: 0.75rem;
}

@media (max-width: 575.98px) {
    .mkt-busca {
        padding: 0.75rem;
    }

    .mkt-pesquisa {
        padding-left: 0.9rem;
    }

    .mkt-pesquisa .btn {
        padding-inline: 1rem;
    }
}

/* ---- Resultados: grelha de cursos ---- */
.mkt-contagem {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--cfx-texto-secundario);
}

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

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

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

@media (min-width: 1200px) {
    .mkt-grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* `.col` do Bootstrap fora de uma `.row` - neutraliza o flex/padding. */
.mkt-grelha > .col {
    width: auto;
    max-width: none;
    padding: 0;
}

.mkt-vazio {
    grid-column: 1 / -1;
    margin: 0;
    padding: 3rem 0;
    text-align: center;
    color: var(--cfx-texto-secundario);
}

/* ---- Cartão de curso ---- */
.card-curso-marketplace {
    overflow: hidden;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* `.shadow-sm` do Bootstrap é `!important` - daí o `!important` aqui. */
.card-curso-marketplace.shadow-sm {
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}

.mkt-capa {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cfx-superficie-suave);
}

.mkt-capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mkt-selo {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #111827;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mkt-selo--exemplo {
    right: 0.75rem;
    left: auto;
    color: #FFFFFF;
    background: rgba(17, 24, 39, 0.7);
}

.mkt-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.1rem 1.1rem;
}

.mkt-centro {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
    font-size: 0.8rem;
    color: var(--cfx-texto-secundario);
}

.mkt-centro span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-titulo-curso {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--heading-color);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mkt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    color: var(--cfx-texto-secundario);
    list-style: none;
}

.mkt-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mkt-rodape-cartao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cfx-borda);
}

.mkt-preco {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cfx-primaria);
    font-variant-numeric: tabular-nums;
}

.mkt-ver {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--heading-color);
    text-decoration: none;
}

.mkt-ver .bi {
    transition: transform 0.2s ease;
}

.mkt-ver:focus-visible {
    outline: none;
}

.card-curso-marketplace:has(.mkt-ver:focus-visible) {
    outline: 2px solid var(--cfx-primaria);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .card-curso-marketplace:hover {
        border-color: rgba(var(--cfx-primaria-rgb), 0.35);
        transform: translateY(-4px);
    }

    .card-curso-marketplace.shadow-sm:hover {
        box-shadow: var(--cfx-sombra-elevada) !important;
    }

    .card-curso-marketplace:hover .mkt-capa img {
        transform: scale(1.04);
    }

    .card-curso-marketplace:hover .mkt-ver {
        color: var(--cfx-primaria);
    }

    .card-curso-marketplace:hover .mkt-ver .bi {
        transform: translateX(3px);
    }
}

/* Placeholder do cartão enquanto os resultados carregam (JS). */
.mkt-esqueleto {
    overflow: hidden;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 1.25rem;
}

/* ---- Panfletos (faixa entre os cursos) ---- */
.mkt-panfletos {
    grid-column: 1 / -1;
    padding: 1.25rem;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 1.25rem;
}

.mkt-grelha + .mkt-panfletos {
    margin-top: 1.5rem;
}

.mkt-panfletos-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mkt-panfletos-titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--heading-color);
}

/* Desliza na horizontal DENTRO do seu contentor (nunca a página). */
.mkt-panfletos-lista {
    display: grid;
    grid-auto-columns: 62%;
    grid-auto-flow: column;
    gap: 1rem;
    margin: 0;
    padding: 0 0 0.35rem;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.mkt-panfletos-lista > li {
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .mkt-panfletos-lista { grid-auto-columns: calc((100% - 2rem) / 3); }
}

@media (min-width: 992px) {
    .mkt-panfletos-lista { grid-auto-columns: calc((100% - 3rem) / 4); }
}

.mkt-panfleto {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--cfx-superficie-suave);
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mkt-panfleto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
    a.mkt-panfleto:hover {
        box-shadow: var(--cfx-sombra-elevada);
        transform: translateY(-3px);
    }
}

/* ---- Centro/Formador destacado na pesquisa por nome ---- */
.mkt-centro-destaque {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    background: var(--cfx-superficie);
    border: 1.5px solid rgba(var(--cfx-primaria-rgb), 0.35);
    border-radius: 1.25rem;
    transition: border-color 0.2s ease;
}

.mkt-centro-destaque:hover {
    border-color: var(--cfx-primaria);
}

.mkt-centro-destaque-logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    font-size: 1.5rem;
    color: var(--cfx-primaria);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    border-radius: 50%;
}

.mkt-centro-destaque-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mkt-centro-destaque-rotulo {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cfx-primaria);
}

.mkt-centro-destaque-nome {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-color);
}

.mkt-centro-destaque-info {
    display: block;
    font-size: 0.85rem;
    color: var(--cfx-texto-secundario);
}

@media (prefers-reduced-motion: reduce) {
    .card-curso-marketplace,
    .mkt-capa img,
    .mkt-ver .bi,
    .mkt-panfleto,
    .mkt-banners-seta,
    .mkt-banners-indicadores [data-bs-target] {
        transition: none;
    }

    .card-curso-marketplace:hover,
    a.mkt-panfleto:hover {
        transform: none;
    }

    .card-curso-marketplace:hover .mkt-capa img,
    .card-curso-marketplace:hover .mkt-ver .bi {
        transform: none;
    }
}

/* =====================================================================
   Página de Planos (premium) - /planos/
   ===================================================================== */
.planos-fundo {
    background:
        radial-gradient(60rem 28rem at 50% -8rem, rgba(var(--cfx-primaria-rgb), 0.12), transparent 70%),
        var(--bs-body-bg);
}

.planos-pagina { padding-top: 2.5rem; padding-bottom: 1rem; }

.planos-topo { max-width: 680px; margin: 0 auto 1.75rem; text-align: center; }

.planos-rotulo {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cfx-primaria);
}

.planos-titulo {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--cfx-texto);
    text-wrap: balance;
}

.planos-titulo span { color: var(--cfx-primaria); }

.planos-subtitulo {
    max-width: 32rem;
    margin: 0.7rem auto 0;
    font-size: 0.96rem;
    color: var(--cfx-texto-secundario);
}

/* seletor de periodicidade (controlo segmentado) */
.planos-periodos {
    display: inline-flex;
    gap: 0.25rem;
    margin-top: 1.35rem;
    padding: 0.25rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    background: var(--cfx-superficie);
    box-shadow: var(--cfx-sombra-cartao);
}

.planos-periodo {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--cfx-texto-secundario);
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* seletor dentro do parcial partilhado (página de Planos e Home) */
.planos-topo--seletor { margin-top: -0.5rem; margin-bottom: 1.75rem; }

.planos-periodo:hover { color: var(--cfx-texto); }

.planos-periodo.ativo {
    background: var(--cfx-cta);
    color: #FFFFFF;
    box-shadow: 0 6px 16px -8px rgba(var(--cfx-primaria-rgb), 0.9);
}

.planos-periodo:focus-visible { outline: none; box-shadow: var(--cfx-foco); }

.planos-poupanca {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(var(--cfx-primaria-rgb), 0.12);
    color: var(--cfx-primaria);
}

.planos-periodo.ativo .planos-poupanca { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

/* cartões dos planos */
.planos-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.25rem;
    max-width: 820px;
    margin: 0 auto;
    align-items: stretch;
}

.planos-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.4rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1.1rem;
    background: var(--cfx-superficie);
    box-shadow: var(--cfx-sombra-cartao);
}

.planos-cartao--destaque {
    background:
        linear-gradient(var(--cfx-superficie), var(--cfx-superficie)) padding-box,
        linear-gradient(135deg, var(--cfx-primaria), #A78BFA 55%, var(--cfx-primaria)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 24px 48px -24px rgba(var(--cfx-primaria-rgb), 0.55);
}

.planos-fita {
    position: absolute;
    top: -0.85rem;
    left: 1.5rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--cfx-cta);
    color: #FFFFFF;
}

.planos-cartao-cabecalho { display: flex; gap: 0.9rem; align-items: flex-start; }

.planos-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.7rem;
    font-size: 1.05rem;
    background: rgba(var(--cfx-primaria-rgb), 0.12);
    color: var(--cfx-primaria);
}

.planos-nome { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--cfx-texto); }

.planos-descricao { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--cfx-texto-secundario); }

.planos-preco { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 1.2rem; flex-wrap: wrap; }

.planos-valor {
    font-size: clamp(1.75rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--cfx-texto);
    font-variant-numeric: tabular-nums;
}

.planos-unidade { font-size: 0.88rem; color: var(--cfx-texto-secundario); }

.planos-equivalente { margin: 0.45rem 0 0; font-size: 0.86rem; color: var(--cfx-texto-secundario); }

.planos-poupanca-cartao {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.35rem;
    margin: 0.6rem 0 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(var(--bs-success-rgb), 0.12);
    color: var(--bs-success);
}

.planos-cta {
    margin-top: 1.15rem;
    padding: 0.62rem 1rem;
    border-radius: 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
    width: 100%;
}

.planos-cta--contorno {
    border: 1px solid var(--cfx-borda-campo);
    background: var(--cfx-superficie);
    color: var(--cfx-texto);
}

.planos-cta--contorno:hover { border-color: var(--cfx-primaria); color: var(--cfx-primaria); }

.planos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 1.2rem 0 0;
    padding: 1.05rem 0 0;
    list-style: none;
    border-top: 1px solid var(--cfx-borda);
}

.planos-lista li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; color: var(--cfx-texto); }

.planos-lista .bi {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    font-size: 0.72rem;
    background: rgba(var(--cfx-primaria-rgb), 0.12);
    color: var(--cfx-primaria);
}

.planos-garantias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.75rem;
    margin: 1.5rem auto 0;
    font-size: 0.84rem;
    color: var(--cfx-texto-secundario);
}

.planos-garantias span { display: inline-flex; align-items: center; gap: 0.45rem; }

.planos-garantias .bi { color: var(--cfx-primaria); }

/* secções seguintes */
.planos-seccao { padding-top: 2.75rem; }

.planos-seccao-topo { max-width: 600px; margin: 0 auto 1.5rem; text-align: center; }

.planos-seccao-titulo {
    margin: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cfx-texto);
    text-wrap: balance;
}

.planos-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
    max-width: 1040px;
    margin: 0 auto;
}

.planos-modulo {
    padding: 1.05rem 1.05rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.9rem;
    background: var(--cfx-superficie);
}

.planos-modulo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    color: var(--cfx-primaria);
}

.planos-modulo h3 { margin: 0.65rem 0 0.25rem; font-size: 0.92rem; font-weight: 600; color: var(--cfx-texto); }

.planos-modulo p { margin: 0; font-size: 0.8rem; color: var(--cfx-texto-secundario); }

.planos-faq { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }

.planos-faq-item {
    border: 1px solid var(--cfx-borda);
    border-radius: 0.9rem;
    background: var(--cfx-superficie);
}

.planos-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cfx-texto);
    cursor: pointer;
    list-style: none;
}

.planos-faq-item summary::-webkit-details-marker { display: none; }

.planos-faq-item summary:focus-visible { outline: none; box-shadow: var(--cfx-foco); border-radius: 0.9rem; }

.planos-faq-item summary .bi { color: var(--cfx-primaria); transition: transform 0.2s ease; }

.planos-faq-item[open] summary .bi { transform: rotate(45deg); }

.planos-faq-item p { margin: 0; padding: 0 1.1rem 0.95rem; color: var(--cfx-texto-secundario); font-size: 0.86rem; }

.planos-final {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 1.6rem 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(120deg, #2E2A8C, var(--cfx-cta) 55%, #8B7CF6);
    color: #FFFFFF;
    box-shadow: 0 24px 48px -28px rgba(46, 42, 140, 0.8);
}

.planos-final h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; color: #FFFFFF; }

.planos-final p { margin: 0.3rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }

.planos-final-botao {
    padding: 0.62rem 1.2rem;
    border-radius: 0.7rem;
    font-size: 0.92rem;
    font-weight: 600;
    background: #FFFFFF;
    color: #2E2A8C;
}

.planos-final-botao:hover { background: #EEF0FE; color: #2E2A8C; }

@media (max-width: 575.98px) {
    .planos-pagina { padding-top: 1.75rem; }
    .planos-titulo { font-size: 1.55rem; }
    .planos-subtitulo { font-size: 0.88rem; }
    .planos-periodos { display: flex; width: 100%; margin-top: 1.1rem; }
    .planos-periodo { flex: 1; justify-content: center; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.3rem; font-size: 0.8rem; }
    .planos-poupanca { font-size: 0.6rem; }
    .planos-grelha { gap: 1.1rem; }
    .planos-cartao { padding: 1.3rem 1.1rem 1.15rem; }
    .planos-valor { font-size: 1.7rem; }
    .planos-lista li { font-size: 0.83rem; }
    .planos-seccao { padding-top: 2.1rem; }
    .planos-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .planos-modulo { padding: 0.85rem 0.8rem; }
    .planos-modulo p { font-size: 0.76rem; }
    .planos-final { padding: 1.35rem 1.2rem; margin-bottom: 2rem; }
    .planos-final-botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .planos-periodo, .planos-faq-item summary .bi { transition: none; }
}

/* =====================================================================
   Verificar Certificado (premium) - /verificar-certificado/
   ===================================================================== */
:root {
    --verif-ok: #15803D;
    --verif-ok-rgb: 21, 128, 61;
    --verif-erro: #B91C1C;
    --verif-erro-rgb: 185, 28, 28;
    --verif-espera: #B45309;
    --verif-espera-rgb: 180, 83, 9;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --verif-ok: #4ADE80;
        --verif-ok-rgb: 74, 222, 128;
        --verif-erro: #F87171;
        --verif-erro-rgb: 248, 113, 113;
        --verif-espera: #FBBF24;
        --verif-espera-rgb: 251, 191, 36;
    }
}

[data-bs-theme="dark"] {
    --verif-ok: #4ADE80;
    --verif-ok-rgb: 74, 222, 128;
    --verif-erro: #F87171;
    --verif-erro-rgb: 248, 113, 113;
    --verif-espera: #FBBF24;
    --verif-espera-rgb: 251, 191, 36;
}

.verif-fundo {
    background:
        radial-gradient(56rem 26rem at 20% -6rem, rgba(var(--cfx-primaria-rgb), 0.11), transparent 70%),
        var(--bs-body-bg);
}

.verif-pagina { padding-top: 3rem; padding-bottom: 3.5rem; }

.verif-pagina--resultado { max-width: 1040px; }

/* ---- pesquisa ---- */
.verif-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}

.verif-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    color: var(--cfx-primaria);
}

.verif-titulo {
    margin: 0;
    font-size: clamp(1.75rem, 3.3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cfx-texto);
    text-wrap: balance;
}

.verif-titulo span { color: var(--cfx-primaria); }

.verif-subtitulo { max-width: 30rem; margin: 0.8rem 0 0; font-size: 0.98rem; color: var(--cfx-texto-secundario); }

.verif-form {
    margin-top: 1.6rem;
    padding: 1.25rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1.1rem;
    background: var(--cfx-superficie);
    box-shadow: var(--cfx-sombra-elevada);
}

.verif-form-rotulo { display: block; margin-bottom: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--cfx-texto-secundario); }

.verif-campo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.85rem;
    border: 1px solid var(--cfx-borda-campo);
    border-radius: 0.8rem;
    background: var(--cfx-superficie);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.verif-campo:focus-within { border-color: var(--cfx-primaria); box-shadow: var(--cfx-foco); }

.verif-campo > .bi { font-size: 1.1rem; color: var(--cfx-texto-secundario); }

.verif-campo .form-control {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.2rem;
    border: 0;
    background: transparent;
    font-family: var(--bs-font-monospace);
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: none;
}

.verif-campo .form-control::placeholder { letter-spacing: 0.04em; }

.verif-botao { padding: 0.6rem 1.2rem; border-radius: 0.6rem; font-weight: 600; white-space: nowrap; }

.verif-desafio { margin-top: 1rem; }

.verif-dica {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--cfx-texto-secundario);
}

.verif-dica .bi { color: var(--cfx-primaria); }

.verif-aviso {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    font-size: 0.86rem;
    background: rgba(var(--verif-espera-rgb), 0.12);
    color: var(--verif-espera);
}

/* ilustração: um certificado estilizado com selo e QR */
.verif-ilustracao { display: flex; justify-content: center; }

.verif-doc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    max-width: 340px;
    padding: 2rem 1.75rem 1.4rem;
    border-radius: 1rem;
    background:
        linear-gradient(var(--cfx-superficie), var(--cfx-superficie)) padding-box,
        linear-gradient(140deg, var(--cfx-primaria), #A78BFA 60%, var(--cfx-primaria)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 30px 60px -30px rgba(var(--cfx-primaria-rgb), 0.55);
    transform: rotate(-2deg);
}

.verif-doc-selo {
    position: absolute;
    top: -0.9rem;
    right: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--verif-ok);
    color: #FFFFFF;
    box-shadow: 0 8px 18px -8px rgba(var(--verif-ok-rgb), 0.8);
}

.verif-doc-linha { display: block; height: 0.5rem; border-radius: 999px; background: var(--cfx-borda); }

.verif-doc-linha--titulo { width: 55%; height: 0.8rem; margin: 0 auto 0.3rem; background: rgba(var(--cfx-primaria-rgb), 0.35); }

.verif-doc-linha--curta { width: 35%; margin: 0 auto; }

.verif-doc-linha--media { width: 70%; }

.verif-doc-nome {
    margin: 0.4rem 0 0.2rem;
    text-align: center;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cfx-texto);
}

.verif-doc-rodape {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--cfx-borda);
}

.verif-doc-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.5rem;
    font-size: 1.6rem;
    background: var(--cfx-superficie-suave);
    color: var(--cfx-texto);
}

.verif-doc-codigo { font-family: var(--bs-font-monospace); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--cfx-texto-secundario); }

.verif-passos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1040px;
    margin: 3rem auto 0;
    padding: 0;
    list-style: none;
}

.verif-passos li {
    display: flex;
    gap: 0.8rem;
    padding: 1.1rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.9rem;
    background: var(--cfx-superficie);
}

.verif-passo-numero {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(var(--cfx-primaria-rgb), 0.12);
    color: var(--cfx-primaria);
}

.verif-passos h2 { margin: 0.15rem 0 0.25rem; font-size: 0.95rem; font-weight: 600; color: var(--cfx-texto); }

.verif-passos p { margin: 0; font-size: 0.82rem; color: var(--cfx-texto-secundario); }

/* ---- resultado ---- */
.verif-barra {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1.1rem;
}

.verif-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cfx-primaria);
    text-decoration: none;
}

.verif-voltar:hover { text-decoration: underline; }

.verif-consulta { font-size: 0.8rem; color: var(--cfx-texto-secundario); }

.verif-estado {
    --tom: var(--verif-ok);
    --tom-rgb: var(--verif-ok-rgb);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(var(--tom-rgb), 0.35);
    border-radius: 1rem;
    background: linear-gradient(120deg, rgba(var(--tom-rgb), 0.14), rgba(var(--tom-rgb), 0.04));
}

.verif-estado--erro { --tom: var(--verif-erro); --tom-rgb: var(--verif-erro-rgb); }

.verif-estado--espera { --tom: var(--verif-espera); --tom-rgb: var(--verif-espera-rgb); }

.verif-estado > div { flex: 1; min-width: 14rem; }

.verif-estado-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    font-size: 1.5rem;
    background: var(--tom);
    color: #FFFFFF;
    box-shadow: 0 10px 20px -10px rgba(var(--tom-rgb), 0.9);
}

.verif-estado-titulo { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--tom); }

.verif-estado-texto { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--cfx-texto); }

.verif-estado-tipo {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--cfx-superficie);
    color: var(--cfx-texto);
    border: 1px solid var(--cfx-borda);
}

.verif-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
    align-items: start;
}

.verif-grelha--simples { grid-template-columns: minmax(0, 1fr); max-width: 720px; }

.verif-cartao {
    padding: 1.5rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1.1rem;
    background: var(--cfx-superficie);
    box-shadow: var(--cfx-sombra-cartao);
}

.verif-emissor {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--cfx-borda);
}

.verif-emissor-logo { max-height: 3.2rem; max-width: 7rem; object-fit: contain; }

.verif-emissor-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    color: var(--cfx-primaria);
}

.verif-emissor-tipo { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cfx-texto-secundario); }

.verif-emissor-nome { margin: 0.1rem 0 0; font-size: 1.02rem; font-weight: 700; color: var(--cfx-texto); }

.verif-emissor-sublinha { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--cfx-texto-secundario); }

.verif-campo-rotulo { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cfx-texto-secundario); }

.verif-titular {
    margin: 0.2rem 0 1.1rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cfx-texto);
}

.verif-dados {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.verif-dados > div {
    padding: 0.75rem 0.85rem;
    border-radius: 0.7rem;
    background: var(--cfx-superficie-suave);
}

.verif-dados-largo { grid-column: 1 / -1; }

.verif-dados dt { font-size: 0.75rem; font-weight: 500; color: var(--cfx-texto-secundario); }

.verif-dados dd { margin: 0.15rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--cfx-texto); }

.verif-codigo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--cfx-borda);
}

.verif-codigo-valor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    font-family: var(--bs-font-monospace);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cfx-texto);
    word-break: break-all;
}

.verif-codigo-valor--erro { margin-bottom: 1.25rem; color: var(--verif-erro); }

.verif-copiar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.5rem;
    background: transparent;
    font-family: var(--bs-body-font-family);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--cfx-texto-secundario);
}

.verif-copiar:hover { border-color: var(--cfx-primaria); color: var(--cfx-primaria); }

.verif-qr { width: 5.5rem; height: 5.5rem; border-radius: 0.5rem; background: #FFFFFF; padding: 0.25rem; }

.verif-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

.verif-acao {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--cfx-borda-campo);
    border-radius: 0.7rem;
    background: var(--cfx-superficie);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cfx-texto);
}

.verif-acao:hover { border-color: var(--cfx-primaria); color: var(--cfx-primaria); }

.verif-preview .certificado-preview-protegido { max-width: 100%; margin-top: 0.75rem; }

.verif-preview-nota { display: flex; gap: 0.4rem; margin: 0.75rem 0 0; font-size: 0.74rem; color: var(--cfx-texto-secundario); }

.verif-invalido { max-width: 720px; margin-top: 1.25rem; }

.verif-invalido h2 { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; color: var(--cfx-texto); }

.verif-invalido ul { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }

.verif-invalido li { display: flex; gap: 0.5rem; font-size: 0.9rem; color: var(--cfx-texto-secundario); }

.verif-invalido li .bi { color: var(--cfx-primaria); }

.verif-botao-largo { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.2rem; border-radius: 0.7rem; font-weight: 600; }

@media (max-width: 991.98px) {
    .verif-hero { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .verif-doc { max-width: 300px; padding: 1.6rem 1.4rem 1.1rem; }
    .verif-grelha { grid-template-columns: minmax(0, 1fr); }
    .verif-preview .certificado-preview-protegido { max-width: 320px; }
}

@media (max-width: 575.98px) {
    .verif-pagina { padding-top: 1.75rem; padding-bottom: 2.5rem; }
    .verif-titulo { font-size: 1.6rem; }
    .verif-campo { flex-wrap: wrap; padding: 0.3rem; }
    .verif-campo > .bi { display: none; }
    .verif-campo .form-control { flex-basis: 100%; padding: 0.55rem 0.5rem; }
    .verif-botao { width: 100%; }
    .verif-passos { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
    .verif-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .verif-dados > div:last-child { grid-column: 1 / -1; }
    .verif-doc { max-width: 250px; }
    .verif-cartao { padding: 1.15rem; }
    .verif-codigo { align-items: flex-start; }
    .verif-qr { width: 4.5rem; height: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .verif-campo { transition: none; }
}

/* Comprovativo impresso: só os dados (a pré-visualização já é escondida
   pela regra de impressão de `.certificado-preview-protegido`). */
@media print {
    .verif-barra, .verif-acoes, .verif-copiar, .verif-preview { display: none !important; }
    .verif-fundo { background: #FFFFFF; }
    .verif-grelha { grid-template-columns: minmax(0, 1fr); }
    .verif-cartao, .verif-estado { box-shadow: none; }
}

/* =====================================================================
   Entrar (login) premium - /conta/entrar/
   ===================================================================== */
.entrar-fundo {
    background:
        radial-gradient(50rem 24rem at 85% -4rem, rgba(var(--cfx-primaria-rgb), 0.12), transparent 70%),
        radial-gradient(40rem 22rem at 0% 110%, rgba(167, 139, 250, 0.10), transparent 70%),
        var(--bs-body-bg);
}

.entrar-pagina { padding-top: 2.5rem; padding-bottom: 3rem; }

.entrar-bloco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 1040px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--cfx-borda);
    border-radius: 1.5rem;
    background: var(--cfx-superficie);
    box-shadow: 0 30px 60px -30px rgba(17, 24, 39, 0.28), 0 8px 20px -12px rgba(17, 24, 39, 0.12);
}

/* lado da marca: a fotografia ocupa a metade toda, com um painel de vidro */
.entrar-lado-marca { position: relative; min-height: 560px; }

.entrar-lado-marca .autenticacao-coluna-imagem {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: 0;
}

.entrar-lado-marca .autenticacao-coluna-imagem-gradiente {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.62) 0%, rgba(17, 24, 39, 0) 24%, rgba(17, 24, 39, 0) 45%, rgba(17, 24, 39, 0.78) 100%);
}

.entrar-lado-marca .autenticacao-coluna-imagem-logo { top: 1.5rem; bottom: auto; }

.entrar-vidro {
    position: absolute;
    z-index: 3;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 1rem;
    background: rgba(17, 24, 39, 0.42);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #FFFFFF;
}

.entrar-vidro-titulo { margin: 0 0 0.7rem; font-size: 1.12rem; font-weight: 700; line-height: 1.3; }

.entrar-vidro ul { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.entrar-vidro li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: rgba(255, 255, 255, 0.9); }

.entrar-vidro .bi { color: #A5B4FC; }

/* lado do formulário */
.entrar-lado-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.75rem 3rem;
}

.entrar-faixa-movel { display: none; }

.entrar-rotulo {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cfx-primaria);
}

.entrar-titulo { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -0.01em; color: var(--cfx-texto); }

.entrar-subtitulo { margin: 0.35rem 0 1.5rem; font-size: 0.92rem; color: var(--cfx-texto-secundario); }

.entrar-form { display: flex; flex-direction: column; gap: 1rem; }

.entrar-label { display: block; margin-bottom: 0.35rem; font-size: 0.84rem; font-weight: 600; color: var(--cfx-texto); }

.entrar-campo .form-control {
    height: 2.9rem;
    border-radius: 0.75rem;
    background: var(--cfx-superficie-suave);
}

.entrar-campo .form-control:focus { background: var(--cfx-superficie); }

.entrar-erro {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: var(--bs-danger);
}

.entrar-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.86rem; }

.entrar-link { font-weight: 600; color: var(--cfx-primaria); text-decoration: none; }

.entrar-link:hover { text-decoration: underline; }

.entrar-botao {
    height: 2.9rem;
    margin-top: 0.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    box-shadow: 0 10px 20px -12px rgba(var(--cfx-primaria-rgb), 0.9);
}

.entrar-separador {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 0.85rem;
    font-size: 0.8rem;
    color: var(--cfx-texto-secundario);
}

.entrar-separador::before,
.entrar-separador::after { content: ""; flex: 1; height: 1px; background: var(--cfx-borda); }

.entrar-botao-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    border: 1px solid var(--cfx-borda-campo);
    border-radius: 0.75rem;
    background: var(--cfx-superficie);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cfx-texto);
}

.entrar-botao-secundario:hover { border-color: var(--cfx-primaria); color: var(--cfx-primaria); }

.entrar-botao-nota {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(var(--cfx-primaria-rgb), 0.12);
    color: var(--cfx-primaria);
}

.entrar-seguro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.25rem 0 0;
    font-size: 0.76rem;
    color: var(--cfx-texto-secundario);
}

@media (max-width: 991.98px) {
    .entrar-lado-form { padding: 2.25rem 2rem; }
}

@media (max-width: 767.98px) {
    .entrar-pagina { padding-top: 1.25rem; padding-bottom: 2rem; }
    .entrar-bloco { grid-template-columns: minmax(0, 1fr); border-radius: 1.25rem; }
    .entrar-lado-marca { display: none; }
    .entrar-lado-form { padding: 0 1.25rem 1.5rem; }
    .entrar-faixa-movel {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0 -1.25rem 1.5rem;
        padding: 0.9rem 1.25rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: #FFFFFF;
        background: linear-gradient(120deg, #2E2A8C, var(--cfx-cta) 60%, #8B7CF6);
    }
}

/* ---- Ecrãs de acesso: estados (link inválido, email enviado, sucesso) ---- */
.entrar-estado { display: flex; flex-direction: column; align-items: flex-start; }

.entrar-estado .entrar-subtitulo { margin-bottom: 1.4rem; }

.entrar-estado-icone {
    --tom-rgb: var(--cfx-primaria-rgb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.1rem;
    border-radius: 1rem;
    font-size: 1.55rem;
    background: rgba(var(--tom-rgb), 0.12);
    color: rgb(var(--tom-rgb));
}

.entrar-estado--ok .entrar-estado-icone { --tom-rgb: var(--bs-success-rgb); }

.entrar-estado--erro .entrar-estado-icone { --tom-rgb: var(--bs-danger-rgb); }

.entrar-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: center;
    margin-top: 1.2rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cfx-primaria);
    text-decoration: none;
}

.entrar-voltar:hover { text-decoration: underline; }

.entrar-lado-form > .entrar-voltar { align-self: center; }

/* regras da password (help_text do Django), discretas */
.entrar-ajuda { margin-top: 0.45rem; font-size: 0.76rem; color: var(--cfx-texto-secundario); }

.entrar-ajuda ul { margin: 0; padding-left: 1.1rem; }

.entrar-ajuda li + li { margin-top: 0.1rem; }

/* ---- Fluxo da conta: código SMS, mensagens, reenviar, escolha de centro ---- */
.entrar-campo--codigo .form-control {
    height: 3.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.55em;
    text-align: center;
    padding-left: 0.55em; /* compensa o espaçamento da última letra */
    font-variant-numeric: tabular-nums;
}

.entrar-campo--codigo .form-control::placeholder { color: var(--cfx-borda-campo); font-weight: 600; }

.entrar-mensagens { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; margin-bottom: 1rem; }

.entrar-mensagem {
    --tom-rgb: var(--bs-success-rgb);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(var(--tom-rgb), 0.28);
    border-radius: 0.75rem;
    font-size: 0.84rem;
    background: rgba(var(--tom-rgb), 0.08);
    color: var(--cfx-texto);
}

.entrar-mensagem .bi { margin-top: 0.1rem; color: rgb(var(--tom-rgb)); }

.entrar-mensagem--erro { --tom-rgb: var(--bs-danger-rgb); }

.entrar-dica {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: -0.6rem 0 1.25rem;
    font-size: 0.8rem;
    color: var(--cfx-texto-secundario);
}

.entrar-reenviar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.4rem;
    margin-top: 1.25rem;
    font-size: 0.86rem;
    color: var(--cfx-texto-secundario);
}

.entrar-reenviar small { flex-basis: 100%; text-align: center; font-size: 0.76rem; }

.entrar-link-botao {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    color: var(--cfx-primaria);
}

.entrar-link-botao:hover:not(:disabled) { text-decoration: underline; }

.entrar-link-botao:disabled { color: var(--cfx-texto-secundario); opacity: 0.6; cursor: not-allowed; }

.entrar-centros { display: flex; flex-direction: column; gap: 0.6rem; max-height: 22rem; overflow-y: auto; padding: 0.15rem; }

.entrar-centro {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--cfx-borda-campo);
    border-radius: 0.9rem;
    background: var(--cfx-superficie);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.entrar-centro:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.55); transform: translateY(-1px); }

.entrar-centro input { position: absolute; opacity: 0; pointer-events: none; }

.entrar-centro:has(input:checked) {
    border-color: var(--cfx-primaria);
    box-shadow: 0 0 0 3px rgba(var(--cfx-primaria-rgb), 0.15);
    background: rgba(var(--cfx-primaria-rgb), 0.04);
}

.entrar-centro:has(input:focus-visible) { outline: 2px solid var(--cfx-primaria); outline-offset: 2px; }

.entrar-centro-logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    overflow: hidden;
    border-radius: 0.7rem;
    font-size: 1.15rem;
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    color: var(--cfx-primaria);
}

.entrar-centro-logo img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; }

.entrar-centro-texto { display: flex; flex: 1; min-width: 0; flex-direction: column; }

.entrar-centro-texto strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--cfx-texto);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.entrar-centro-texto small { font-size: 0.78rem; color: var(--cfx-texto-secundario); }

.entrar-centro-visto { font-size: 1.15rem; color: var(--cfx-primaria); opacity: 0; transition: opacity 0.15s ease; }

.entrar-centro:has(input:checked) .entrar-centro-visto { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .entrar-centro { transition: none; }
    .entrar-centro:hover { transform: none; }
}

/* =====================================================================
   Montra de publicidade fora do Marketplace (Galeria, Verificar Certificado)
   ===================================================================== */
.pub-montra {
    position: relative;
    margin: 2.75rem 0 0;
    padding: 1.4rem;
    border-radius: 1.5rem;
    background:
        linear-gradient(var(--cfx-superficie), var(--cfx-superficie)) padding-box,
        linear-gradient(135deg, rgba(var(--cfx-primaria-rgb), 0.55), rgba(167, 139, 250, 0.35) 45%, var(--cfx-borda) 70%) border-box;
    border: 1px solid transparent;
    box-shadow: 0 24px 48px -32px rgba(var(--cfx-primaria-rgb), 0.55);
}

.pub-montra-topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-bottom: 1.1rem;
}

.pub-montra-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

.pub-montra-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cfx-texto);
}

.pub-montra-rotulo .bi { color: var(--cfx-primaria); }

.pub-montra-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cfx-primaria);
    text-decoration: none;
}

.pub-montra-link:hover { text-decoration: underline; }

/* dentro da montra, os parciais do Marketplace perdem a moldura própria */
.pub-montra .mkt-banners { margin-bottom: 0; }

.pub-montra .mkt-banners .carousel { box-shadow: none; }

.pub-montra .mkt-banners + .mkt-panfletos { margin-top: 1rem; }

.pub-montra .mkt-panfletos { padding: 0; border: 0; background: transparent; }

.pub-montra .mkt-panfletos-cabecalho { display: none; }

/* banner no topo (Galeria, pesquisa de Verificar): largura contida */
.pub-topo { max-width: 1040px; margin: 0 auto 2rem; }

.pub-topo .mkt-banners { margin-bottom: 0; }

/* páginas estreitas (verificação): a montra acompanha a largura do conteúdo */
.verif-pagina .pub-montra { max-width: 1040px; margin-left: auto; margin-right: auto; }

.galeria-pagina .pub-montra { margin-top: 3rem; }

@media (max-width: 575.98px) {
    .pub-montra { margin-top: 2rem; padding: 1rem; border-radius: 1.2rem; }
    .pub-montra-rotulo { font-size: 0.92rem; }
}

/* =====================================================================
   Editor de modelos (Designer v2) ao estilo Canva
   ===================================================================== */
:root {
    --ed-palco: #EDEEF3;
    --ed-palco-ponto: rgba(17, 24, 39, 0.07);
    --ed-trilho: #FFFFFF;
    --ed-gaveta: #FFFFFF;
    --ed-mosaico: #F4F5F9;
    --ed-mosaico-hover: #ECEEFE;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --ed-palco: #0C0D11;
        --ed-palco-ponto: rgba(255, 255, 255, 0.05);
        --ed-trilho: #15161A;
        --ed-gaveta: #1A1B1F;
        --ed-mosaico: #232429;
        --ed-mosaico-hover: #2A2C47;
    }
}

[data-bs-theme="dark"] {
    --ed-palco: #0C0D11;
    --ed-palco-ponto: rgba(255, 255, 255, 0.05);
    --ed-trilho: #15161A;
    --ed-gaveta: #1A1B1F;
    --ed-mosaico: #232429;
    --ed-mosaico-hover: #2A2C47;
}

/* o editor ocupa todo o espaço por baixo da barra do painel */
.conteudo-painel:has(> .cfx-editor) { padding: 0 !important; }

.cfx-editor {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-height, 64px));
    min-height: 520px;
    overflow: hidden;
    background: var(--ed-palco);
}

/* ---- barra superior ---- */
.cfx-ed-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 56px;
    flex: 0 0 auto;
    padding: 0 0.85rem;
    color: #FFFFFF;
    background: linear-gradient(90deg, #2E2A8C 0%, #5A5AF2 55%, #8B7CF6 100%);
}

.cfx-ed-topo-esq, .cfx-ed-topo-meio, .cfx-ed-topo-dir { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }

/* Só o lado esquerdo (nome do modelo) encolhe; o meio e a direita
   ocupam o que precisam - nunca se sobrepõem. */
.cfx-ed-topo-esq { flex: 1 1 0; }

.cfx-ed-topo-meio { flex: 0 0 auto; }

.cfx-ed-topo-dir { flex: 0 0 auto; justify-content: flex-end; }

.cfx-ed-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.55rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
}

.cfx-ed-voltar:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }

.cfx-ed-sep { width: 1px; height: 1.4rem; margin: 0 0.35rem; background: rgba(255, 255, 255, 0.28); }

.cfx-ed-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

.cfx-ed-nome h1 {
    margin: 0;
    overflow: hidden;
    font-size: 0.95rem !important;
    font-weight: 700;
    color: #FFFFFF;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#estado-guardado { font-size: 0.72rem; color: rgba(255, 255, 255, 0.78); white-space: nowrap; }

.cfx-ed-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    font-size: 1.05rem;
    color: #FFFFFF;
}

.cfx-ed-icone:hover { background: rgba(255, 255, 255, 0.16); }

.cfx-ed-icone:disabled { opacity: 0.45; }

.cfx-ed-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.3rem;
    padding: 0 0.95rem;
    border-radius: 0.6rem;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.cfx-ed-botao, .cfx-ed-botao:hover { text-decoration: none; }

.cfx-ed-botao--vidro { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

.cfx-ed-botao--vidro:hover { color: #FFFFFF; }

.cfx-ed-botao--vidro:hover { background: rgba(255, 255, 255, 0.22); }

.cfx-ed-botao--branco { border: 0; background: #FFFFFF; color: #2E2A8C; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5); }

.cfx-ed-botao--branco:hover { background: #EEF0FE; }

.cfx-ed-topo :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }

/* ---- corpo: trilho | gaveta | palco | propriedades ---- */
.cfx-ed-corpo { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }

.cfx-ed-trilho {
    flex: 0 0 76px;
    padding: 0.6rem 0.4rem;
    border-right: 1px solid var(--cfx-borda);
    background: var(--ed-trilho);
}

.cfx-ed-trilho .nav { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }

.cfx-ed-trilho .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.6rem 0.2rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--cfx-texto-secundario);
}

.cfx-ed-trilho .nav-link .bi { font-size: 1.3rem; }

.cfx-ed-trilho .nav-link:hover { color: var(--cfx-texto); background: var(--ed-mosaico); }

.cfx-ed-trilho .nav-link.active { color: var(--cfx-primaria); background: rgba(var(--cfx-primaria-rgb), 0.12); }

.cfx-ed-gaveta {
    position: relative;
    flex: 0 0 312px;
    overflow-y: auto;
    padding: 1.1rem 1rem 1.5rem;
    border-right: 1px solid var(--cfx-borda);
    background: var(--ed-gaveta);
    scrollbar-width: thin;
}

.cfx-ed-gaveta.faixa-recolhida { display: none; }

.cfx-ed-gaveta-fechar {
    position: absolute;
    top: 0.85rem;
    right: 0.75rem;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--cfx-texto-secundario);
}

.cfx-ed-gaveta-fechar:hover { background: var(--ed-mosaico); color: var(--cfx-texto); }

.cfx-ed-gaveta-titulo { margin: 0 0 0.2rem; font-size: 1.05rem !important; font-weight: 700; color: var(--cfx-texto); }

.cfx-ed-gaveta-sub {
    margin: 1.4rem 0 0.6rem;
    font-size: 0.74rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
}

.cfx-ed-gaveta-dica { margin: 0 0 0.9rem; font-size: 0.8rem; color: var(--cfx-texto-secundario); }

.cfx-ed-gaveta-nota { margin: 0.55rem 0 0; font-size: 0.76rem; color: var(--cfx-texto-secundario); }

.cfx-ed-mosaicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

.cfx-ed-mosaicos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cfx-ed-mosaico {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    aspect-ratio: 4 / 3;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    background: var(--ed-mosaico);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cfx-texto);
    cursor: grab;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cfx-ed-mosaico .bi { font-size: 1.55rem; color: var(--cfx-primaria); }

.cfx-ed-mosaico:hover { background: var(--ed-mosaico-hover); border-color: rgba(var(--cfx-primaria-rgb), 0.35); transform: translateY(-1px); }

.cfx-ed-mosaico--forma { aspect-ratio: 1; }

.cfx-forma { display: block; background: var(--cfx-primaria); }

.cfx-forma--rect { width: 1.6rem; height: 1.2rem; border-radius: 0.2rem; }

.cfx-forma--circulo { width: 1.45rem; height: 1.45rem; border-radius: 50%; }

.cfx-forma--linha { width: 1.7rem; height: 3px; border-radius: 3px; }

.cfx-ed-cartao {
    padding: 0.85rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.85rem;
    background: var(--cfx-superficie);
}

.cfx-ed-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }

.cfx-ed-campos label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; color: var(--cfx-texto-secundario); }

.cfx-ed-campos .form-control-color { width: 100%; height: 2rem; padding: 0.15rem; }

.cfx-ed-botao-largo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.55rem;
    border: 0;
    border-radius: 0.65rem;
    background: var(--cfx-cta);
    font-size: 0.84rem;
    font-weight: 600;
    color: #FFFFFF;
}

.cfx-ed-botao-largo:hover { background: var(--cfx-cta-hover); }

/* texto */
.cfx-ed-textos { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }

.cfx-ed-texto {
    padding: 0.75rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: var(--ed-mosaico);
    color: var(--cfx-texto);
    text-align: left;
}

.cfx-ed-texto:hover { background: var(--ed-mosaico-hover); border-color: rgba(var(--cfx-primaria-rgb), 0.35); }

.cfx-ed-texto--titulo { font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; font-weight: 700; }

.cfx-ed-texto--subtitulo { font-size: 1rem; font-weight: 700; }

.cfx-ed-texto--corpo { font-size: 0.84rem; }

.cfx-ed-pesquisa {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.7rem;
    padding: 0 0.7rem;
    border: 1px solid var(--cfx-borda-campo);
    border-radius: 0.65rem;
    background: var(--cfx-superficie);
}

.cfx-ed-pesquisa:focus-within { border-color: var(--cfx-primaria); box-shadow: var(--cfx-foco); }

.cfx-ed-pesquisa .bi { color: var(--cfx-texto-secundario); }

.cfx-ed-pesquisa input { flex: 1; min-width: 0; padding: 0.5rem 0; border: 0; outline: 0; background: transparent; font-size: 0.84rem; color: var(--cfx-texto); }

.cfx-ed-variaveis { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.9rem; }

.cfx-ed-var-grupo > p { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; font-size: 0.76rem; font-weight: 700; color: var(--cfx-texto); }

.cfx-ed-var-grupo > p .bi { color: var(--cfx-primaria); }

.cfx-ed-var-grupo > div { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.cfx-ed-chip {
    max-width: 100%;
    padding: 0.3rem 0.65rem;
    overflow: hidden;
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    background: var(--cfx-superficie);
    font-size: 0.76rem;
    color: var(--cfx-texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfx-ed-chip:hover { border-color: var(--cfx-primaria); color: var(--cfx-primaria); background: rgba(var(--cfx-primaria-rgb), 0.06); }

/* página */
.cfx-ed-interruptores { display: flex; flex-direction: column; gap: 0.6rem; }

.cfx-ed-interruptores .form-check { display: flex; align-items: center; gap: 0.55rem; margin: 0; padding-left: 0; }

.cfx-ed-interruptores .form-check-input { order: 2; margin: 0 0 0 auto; }

.cfx-ed-interruptores .form-check-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--cfx-texto); }

.cfx-ed-interruptores .form-check-label .bi { color: var(--cfx-primaria); }

.cfx-ed-soltar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1.1rem 0.75rem;
    border: 1.5px dashed rgba(var(--cfx-primaria-rgb), 0.45);
    border-radius: 0.85rem;
    background: rgba(var(--cfx-primaria-rgb), 0.05);
    text-align: center;
    cursor: pointer;
}

.cfx-ed-soltar:hover { background: rgba(var(--cfx-primaria-rgb), 0.1); }

.cfx-ed-soltar .bi { font-size: 1.5rem; color: var(--cfx-primaria); }

.cfx-ed-soltar strong { font-size: 0.86rem; color: var(--cfx-texto); }

.cfx-ed-soltar span { font-size: 0.74rem; color: var(--cfx-texto-secundario); }

.cfx-ed-soltar input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cfx-ed-rotulo { display: block; margin-bottom: 0.3rem; font-size: 0.74rem; font-weight: 600; color: var(--cfx-texto-secundario); }

.cfx-ed-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }

.cfx-ed-asset { margin: 0; overflow: hidden; border: 1px solid var(--cfx-borda); border-radius: 0.7rem; background: var(--cfx-superficie); }

.cfx-ed-asset img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: repeating-conic-gradient(var(--ed-mosaico) 0% 25%, var(--cfx-superficie) 0% 50%) 50% / 14px 14px; }

.cfx-ed-asset figcaption { padding: 0.35rem 0.5rem; overflow: hidden; font-size: 0.72rem; color: var(--cfx-texto-secundario); text-overflow: ellipsis; white-space: nowrap; }

/* ---- palco ---- */
.cfx-ed-palco { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }

#konva-scroll {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    overflow: auto;
    padding: 36px;
    background-color: var(--ed-palco);
    background-image: radial-gradient(var(--ed-palco-ponto) 1px, transparent 1px);
    background-size: 18px 18px;
}

#konva-container {
    position: relative;
    margin: auto;
    padding: 0;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1), 0 18px 40px -18px rgba(17, 24, 39, 0.45);
}

#konva-scroll > #konva-container { flex: 0 0 auto; margin: auto; }

.designer-v2-edicao-direta { box-sizing: border-box; }

.cfx-ed-zoom {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.25rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    background: var(--cfx-superficie);
    box-shadow: 0 10px 24px -12px rgba(17, 24, 39, 0.4);
}

.cfx-ed-zoom button {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cfx-texto);
    font-variant-numeric: tabular-nums;
}

.cfx-ed-zoom button:hover { background: var(--ed-mosaico); }

.cfx-ed-zoom .cfx-ed-sep { background: var(--cfx-borda); height: 1.1rem; margin: 0 0.2rem; }

/* ---- propriedades ---- */
.cfx-ed-props {
    flex: 0 0 300px;
    overflow-y: auto;
    padding: 1.1rem 1rem 1.5rem;
    border-left: 1px solid var(--cfx-borda);
    background: var(--ed-gaveta);
    scrollbar-width: thin;
}

.cfx-ed-props[hidden] { display: none; }

.cfx-ed-props-titulo {
    margin: 0 0 0.9rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
}

.cfx-ed-props-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 0.75rem;
    border: 1.5px dashed var(--cfx-borda);
    border-radius: 0.9rem;
    text-align: center;
}

.cfx-ed-props-vazio[hidden] { display: none; }

.cfx-ed-props-vazio .bi { font-size: 1.6rem; color: var(--cfx-primaria); }

.cfx-ed-props-vazio p { margin: 0; font-size: 0.8rem; color: var(--cfx-texto-secundario); }

#propriedades-conteudo .form-label, #propriedades-conteudo label { font-size: 0.74rem; font-weight: 600; color: var(--cfx-texto-secundario); }

#propriedades-conteudo .form-control, #propriedades-conteudo .form-select { border-radius: 0.55rem; font-size: 0.84rem; }

#propriedades-conteudo .btn { border-radius: 0.55rem; }

#propriedades-conteudo hr { margin: 1rem 0; border-color: var(--cfx-borda); opacity: 1; }

/* modais */
.cfx-ed-modal { border: 0; border-radius: 1rem; overflow: hidden; }

.cfx-ed-preview { background: var(--ed-palco); }

.cfx-ed-preview img { border-radius: 0.3rem; box-shadow: 0 18px 40px -18px rgba(17, 24, 39, 0.5); }

/* ---- ecrãs estreitos: gaveta e propriedades por cima da folha ---- */
/* Barra do topo: quanto menos largura, mais botões passam a só ícone
   (o texto fica no "title"; os atalhos de teclado continuam). */
@media (max-width: 1499.98px) {
    #btn-verificar > span:not(.cfx-ed-verificar-contador), #btn-preview > span { display: none; }
    #btn-verificar, #btn-preview { padding: 0 0.7rem; }
}

@media (max-width: 1279.98px) {
    .cfx-ed-topo-meio .cfx-ed-sep, #btn-copiar, #btn-cortar, #btn-colar { display: none; }
    #btn-pdf-exemplo > span, .cfx-ed-voltar span { display: none; }
    #btn-pdf-exemplo { padding: 0 0.7rem; }
}

@media (max-width: 991.98px) {
    .cfx-ed-botao > span:not(.cfx-ed-verificar-contador) { display: none; }
    .cfx-ed-botao { padding: 0 0.7rem; }
    .cfx-ed-gaveta, .cfx-ed-props {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 5;
        box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.45);
    }
    .cfx-ed-gaveta { left: 76px; width: min(312px, calc(100vw - 96px)); }
    .cfx-ed-props { right: 0; width: min(300px, 88vw); }
}

@media (max-width: 575.98px) {
    .cfx-ed-topo { padding: 0 0.4rem; gap: 0.3rem; }
    .cfx-ed-sep { display: none; }
    .cfx-ed-icone { width: 2rem; }
    .cfx-ed-trilho { flex-basis: 62px; }
    .cfx-ed-gaveta { left: 62px; width: calc(100vw - 72px); }
    .cfx-ed-trilho .nav-link { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cfx-ed-mosaico { transition: none; }
    .cfx-ed-mosaico:hover { transform: none; }
}

/* =====================================================================
   Painel premium (produtividade): superfícies calmas, hierarquia clara
   ===================================================================== */
:root {
    --painel-fundo: #F5F6F9;
    --painel-cartao: #FFFFFF;
    --painel-linha-hover: rgba(90, 90, 242, 0.035);
    --painel-cabecalho-tabela: #F9FAFB;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --painel-fundo: #0E0F12;
        --painel-cartao: #17181C;
        --painel-linha-hover: rgba(139, 148, 250, 0.06);
        --painel-cabecalho-tabela: #1C1D22;
    }
}

[data-bs-theme="dark"] {
    --painel-fundo: #0E0F12;
    --painel-cartao: #17181C;
    --painel-linha-hover: rgba(139, 148, 250, 0.06);
    --painel-cabecalho-tabela: #1C1D22;
}

/* a área de trabalho ganha um tom suave; cartões e tabelas destacam-se sem brilho */
body.pagina-painel .conteudo-painel { background: var(--painel-fundo); }

body.pagina-painel .conteudo-painel .card {
    border: 1px solid var(--cfx-borda);
    border-radius: 0.9rem;
    background: var(--painel-cartao);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

body.pagina-painel .conteudo-painel .card.shadow-sm,
body.pagina-painel .conteudo-painel .card.shadow { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important; }

/* tabelas: cabeçalho discreto, linhas confortáveis */
body.pagina-painel .conteudo-painel .table { --bs-table-bg: transparent; margin-bottom: 0; }

body.pagina-painel .conteudo-painel .table > thead > tr > th,
body.pagina-painel .conteudo-painel .table > thead.table-light > tr > th {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--cfx-borda);
    background: var(--painel-cabecalho-tabela);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
    white-space: nowrap;
}

body.pagina-painel .conteudo-painel .table > tbody > tr > td {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-color: var(--cfx-borda);
}

body.pagina-painel .conteudo-painel .table > tbody > tr:last-child > td { border-bottom: 0; }

body.pagina-painel .conteudo-painel .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--painel-linha-hover); }

body.pagina-painel .conteudo-painel .table-responsive.card,
body.pagina-painel .conteudo-painel .card > .table-responsive { border-radius: 0.9rem; overflow: hidden; }

/* coluna fixa de ações (mobile): mesma superfície do cartão */
@media (max-width: 1023.98px) {
    body.pagina-painel .conteudo-painel .table-responsive td:last-child,
    body.pagina-painel .conteudo-painel .table-responsive th:last-child { background-color: var(--painel-cartao); }
}

/* nomes na 1.ª coluna: cor do texto (listas longas cansam menos), acento só ao passar */
body.pagina-painel .conteudo-painel .table > tbody > tr > td:first-child > a:not(.btn) {
    font-weight: 600;
    color: var(--cfx-texto);
    text-decoration: none;
}

body.pagina-painel .conteudo-painel .table > tbody > tr > td:first-child > a:not(.btn):hover { color: var(--cfx-primaria); }

/* campos: um pouco mais de conforto */
body.pagina-painel .conteudo-painel .form-control,
body.pagina-painel .conteudo-painel .form-select { border-radius: 0.6rem; }

/* título de cada ecrã */
body.pagina-painel .conteudo-painel .cabecalho-modulo-decorado h1 { letter-spacing: -0.01em; }

/* =====================================================================
   Menu Principal (dashboard)
   ===================================================================== */
.dash { --dash-verde: #16A34A; --dash-vermelho: #DC2626; --dash-ambar: #D97706; }

[data-bs-theme="dark"] .dash { --dash-verde: #4ADE80; --dash-vermelho: #F87171; --dash-ambar: #FBBF24; }

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .dash { --dash-verde: #4ADE80; --dash-vermelho: #F87171; --dash-ambar: #FBBF24; }
}

.dash-topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    padding: 0.5rem 0 1.4rem;
}

.dash-saudacao { margin: 0 0 0.15rem; font-size: 0.86rem; font-weight: 600; color: var(--cfx-primaria); }

.dash-titulo { margin: 0; font-size: var(--fs-painel-h1) !important; font-weight: 700; letter-spacing: -0.02em; color: var(--cfx-texto); }

.dash-subtitulo { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--cfx-texto-secundario); }

.dash-periodo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.35rem 0.3rem 0.75rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.75rem;
    background: var(--painel-cartao);
}

.dash-periodo > .bi { color: var(--cfx-texto-secundario); }

.dash-periodo .form-control { width: 9.2rem; padding: 0.3rem 0.4rem; border: 0; background: transparent; font-size: 0.84rem; box-shadow: none; }

.dash-periodo > span { color: var(--cfx-texto-secundario); }

.dash-periodo .btn { border-radius: 0.55rem; }

/* indicadores principais */
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.dash-kpi {
    display: flex;
    flex-direction: column;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: var(--painel-cartao);
    color: var(--cfx-texto);
    text-decoration: none;
}

.dash-kpi--link { transition: border-color 0.15s ease, box-shadow 0.15s ease; }

.dash-kpi--link:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.45); box-shadow: 0 8px 20px -14px rgba(var(--cfx-primaria-rgb), 0.7); color: var(--cfx-texto); }

.dash-kpi-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    margin-bottom: 0.85rem;
    border-radius: 0.7rem;
    font-size: 1.1rem;
}

.dash-tom-primario { background: rgba(var(--cfx-primaria-rgb), 0.12); color: var(--cfx-primaria); }

.dash-tom-sucesso { background: color-mix(in srgb, var(--dash-verde) 14%, transparent); color: var(--dash-verde); }

.dash-tom-perigo { background: color-mix(in srgb, var(--dash-vermelho) 14%, transparent); color: var(--dash-vermelho); }

.dash-tom-alerta { background: color-mix(in srgb, var(--dash-ambar) 16%, transparent); color: var(--dash-ambar); }

.dash-kpi-rotulo { margin: 0; font-size: 0.8rem; color: var(--cfx-texto-secundario); }

.dash-kpi-valor {
    margin: 0.15rem 0 0;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.dash-kpi-nota { margin: 0.45rem 0 0; font-size: 0.76rem; color: var(--cfx-texto-secundario); }

.dash-kpi-nota strong { color: var(--cfx-texto); }

.dash-negativo { color: var(--dash-vermelho) !important; }

.dash-positivo { color: var(--dash-verde) !important; }

.dash-progresso { height: 6px; margin-top: 0.6rem; overflow: hidden; border-radius: 999px; background: var(--cfx-borda); }

.dash-progresso > span { display: block; max-width: 100%; height: 100%; border-radius: inherit; background: var(--dash-verde); }

.dash-progresso--fino { height: 5px; margin-top: 0; }

.dash-progresso--fino > span { background: var(--cfx-primaria); }

/* ações rápidas */
.dash-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.4rem; }

.dash-acoes a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.7rem;
    background: var(--painel-cartao);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cfx-texto);
    text-decoration: none;
}

.dash-acoes a .bi { color: var(--cfx-primaria); }

.dash-acoes a:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.45); color: var(--cfx-primaria); }

/* grelhas e cartões */
.dash-grelha { display: grid; gap: 1rem; margin-bottom: 1rem; }

.dash-grelha--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.dash-grelha--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.dash-grelha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dash-cartao {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: var(--painel-cartao);
}

.dash-cartao > header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.85rem; }

.dash-cartao > header h2 { margin: 0; font-size: 0.95rem !important; font-weight: 700; color: var(--cfx-texto); }

.dash-cartao > header span { font-size: 0.76rem; color: var(--cfx-texto-secundario); }

.dash-link { font-size: 0.8rem; font-weight: 600; color: var(--cfx-primaria); text-decoration: none; white-space: nowrap; }

.dash-link:hover { text-decoration: underline; }

.dash-grafico { position: relative; height: 240px; }

.dash-grafico--redondo { height: 220px; }

.dash-indicadores-cartao { margin-bottom: 1rem; }

.dash-indicadores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }

.dash-indicadores > div, .dash-indicadores > a {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    background: var(--painel-fundo);
    color: var(--cfx-texto);
    text-decoration: none;
}

.dash-indicadores > a:hover { box-shadow: inset 0 0 0 1px rgba(var(--cfx-primaria-rgb), 0.45); }

.dash-indicadores p { margin: 0; font-size: 0.75rem; color: var(--cfx-texto-secundario); }

.dash-indicadores strong { margin-top: 0.15rem; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.dash-indicadores small { margin-top: 0.15rem; font-size: 0.7rem; line-height: 1.3; color: var(--cfx-texto-secundario); }

.dash-rodape-nota { margin: 0.75rem 0 0; font-size: 0.72rem; color: var(--cfx-texto-secundario); }

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

.dash-turmas li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--cfx-borda);
}

.dash-turmas li:last-child { border-bottom: 0; }

.dash-turma-info { display: flex; flex-direction: column; min-width: 0; }

.dash-turma-info strong { overflow: hidden; font-size: 0.88rem; color: var(--cfx-texto); text-overflow: ellipsis; white-space: nowrap; }

.dash-turma-info span { font-size: 0.76rem; color: var(--cfx-texto-secundario); }

.dash-turma-ocupacao { display: flex; flex: 0 0 auto; align-items: center; gap: 0.6rem; width: 11rem; }

.dash-turma-ocupacao .dash-progresso { flex: 1; }

.dash-turma-ocupacao small { width: 3rem; font-size: 0.76rem; color: var(--cfx-texto-secundario); text-align: right; font-variant-numeric: tabular-nums; }

.dash-vazio { justify-content: center !important; color: var(--cfx-texto-secundario); font-size: 0.86rem; }

@media (max-width: 1199.98px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .dash-grelha--2-1, .dash-grelha--1-2, .dash-grelha--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .dash-topo { align-items: stretch; }
    .dash-periodo { width: 100%; flex-wrap: wrap; padding: 0.5rem; }
    .dash-periodo > .bi, .dash-periodo > span { display: none; }
    .dash-periodo .form-control { flex: 1 1 calc(50% - 0.4rem); width: auto; min-width: 8.5rem; border: 1px solid var(--cfx-borda); }
    .dash-periodo .btn { flex: 1 1 100%; }
    .dash-kpis { gap: 0.7rem; }
    .dash-kpi { padding: 0.95rem; }
    .dash-kpi-valor { font-size: 1.2rem; }
    .dash-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-acoes a { flex: 1 1 calc(50% - 0.6rem); justify-content: center; }
    .dash-turma-ocupacao { width: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-kpi--link { transition: none; }
}

/* ---- Menu Principal: tamanhos mais contidos + resposta ao passar o rato ---- */
.dash-saudacao { font-size: 0.76rem; }
.dash-titulo { font-size: 1.35rem !important; }
.dash-subtitulo { font-size: 0.76rem; }
.dash-periodo .form-control { width: 8.4rem; font-size: 0.78rem; }
.dash-periodo .btn { font-size: 0.78rem; }
.dash-kpi-rotulo { font-size: 0.74rem; }
.dash-kpi-valor { font-size: 1.28rem; }
.dash-kpi-nota { font-size: 0.7rem; }
.dash-kpi-icone { width: 2.05rem; height: 2.05rem; margin-bottom: 0.7rem; font-size: 1rem; }
body.pagina-painel .nome-utilizador-navbar { font-size: 0.8rem; }

/* ligações em forma de cartão/botão: nunca sublinhadas */
.dash a, .dash a:hover, .dash a:focus { text-decoration: none; }

.dash-kpi, .dash-cartao, .dash-acoes a, .dash-indicadores > div, .dash-indicadores > a {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.dash-kpi-icone { transition: transform 0.18s ease; }

.dash-kpi:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--cfx-primaria-rgb), 0.35);
    box-shadow: 0 14px 28px -18px rgba(17, 24, 39, 0.35);
}

.dash-kpi:hover .dash-kpi-icone { transform: scale(1.08); }

.dash-cartao:hover { box-shadow: 0 12px 26px -20px rgba(17, 24, 39, 0.35); }

.dash-acoes a:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--cfx-primaria-rgb), 0.45);
    background: rgba(var(--cfx-primaria-rgb), 0.06);
    box-shadow: 0 8px 18px -12px rgba(var(--cfx-primaria-rgb), 0.6);
    color: var(--cfx-primaria);
}

.dash-acoes a:active, .dash-kpi--link:active { transform: translateY(0); }

.dash-indicadores > div:hover, .dash-indicadores > a:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--painel-fundo) 70%, rgba(var(--cfx-primaria-rgb), 0.3));
}

.dash-acoes a:focus-visible, .dash-kpi--link:focus-visible, .dash-indicadores > a:focus-visible {
    outline: none;
    box-shadow: var(--cfx-foco);
}

@media (max-width: 575.98px) {
    .dash-kpi-valor { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-kpi, .dash-cartao, .dash-acoes a, .dash-indicadores > div, .dash-indicadores > a, .dash-kpi-icone { transition: none; }
    .dash-kpi:hover, .dash-acoes a:hover, .dash-indicadores > div:hover, .dash-indicadores > a:hover { transform: none; }
    .dash-kpi:hover .dash-kpi-icone { transform: none; }
}

/* Sobrepõe `.conteudo-painel a:not([class]):hover` (sublinhado + cor) nas
   ligações do Menu Principal que são botões/cartões. */
.conteudo-painel .dash a:not([class]):hover,
.conteudo-painel .dash a:hover { text-decoration: none; }
.conteudo-painel .dash .dash-acoes a:hover { color: var(--cfx-primaria); }
.conteudo-painel .dash .dash-indicadores > a:hover { color: var(--cfx-texto); }

/* ---- Valores e estados em pílula (tabelas do painel) ----
   Mesma leitura em todos os ecrãs: azul = valor acordado/total,
   vermelho = em dívida, verde = pago; estado da matrícula por cor. */
.valor-pilula, .estado-pilula {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.valor-pilula--acordado { background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria); }
.valor-pilula--divida { background: rgba(220, 38, 38, 0.1); color: #B91C1C; }
.valor-pilula--pago { background: rgba(22, 163, 74, 0.12); color: #15803D; }

.estado-pilula { font-weight: 500; font-size: 0.76rem; }
.estado-pilula--ativa { background: rgba(22, 163, 74, 0.12); color: #15803D; }
.estado-pilula--concluida { background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria); }
.estado-pilula--transferida { background: rgba(217, 119, 6, 0.13); color: #B45309; }
.estado-pilula--cancelada { background: rgba(107, 114, 128, 0.14); color: var(--cfx-texto-secundario); }

[data-bs-theme="dark"] .valor-pilula--divida { background: rgba(248, 113, 113, 0.14); color: #FCA5A5; }
[data-bs-theme="dark"] .valor-pilula--pago, [data-bs-theme="dark"] .estado-pilula--ativa { background: rgba(74, 222, 128, 0.13); color: #86EFAC; }
[data-bs-theme="dark"] .estado-pilula--transferida { background: rgba(251, 191, 36, 0.13); color: #FCD34D; }

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .valor-pilula--divida { background: rgba(248, 113, 113, 0.14); color: #FCA5A5; }
    :root:not([data-bs-theme="light"]) .valor-pilula--pago, :root:not([data-bs-theme="light"]) .estado-pilula--ativa { background: rgba(74, 222, 128, 0.13); color: #86EFAC; }
    :root:not([data-bs-theme="light"]) .estado-pilula--transferida { background: rgba(251, 191, 36, 0.13); color: #FCD34D; }
}

.dash-valor--marca { color: var(--cfx-primaria); }

/* ---- Tabelas do painel no telemóvel ----
   (1) o contentor volta a poder deslizar na horizontal (o arredondamento
   com overflow:hidden bloqueava-o); (2) tabelas de listagem viram cartões
   "Rótulo: valor" (ver static/js/tabelas-moveis.js). */
body.pagina-painel .conteudo-painel .table-responsive,
body.pagina-painel .conteudo-painel .table-responsive.card { overflow-x: auto; overflow-y: hidden; }

@media (max-width: 767.98px) {
    body.pagina-painel .conteudo-painel table.tabela-cartoes,
    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody,
    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr,
    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td { display: block; width: 100%; }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > thead { display: none; }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr {
        position: relative;
        padding: 0.85rem 1rem 0.75rem;
        border-bottom: 1px solid var(--cfx-borda);
    }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr:last-child { border-bottom: 0; }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.28rem 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: right;
        white-space: normal;
    }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--cfx-texto-secundario);
        text-align: left;
    }

    /* 1.ª coluna: título do cartão, sem rótulo */
    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td:first-child {
        justify-content: flex-start;
        padding: 0 2.75rem 0.4rem 0 !important;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
    }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td:first-child::before { display: none; }

    /* ações (⋮ / ligações): canto superior direito do cartão */
    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td.tabela-cartoes-acoes {
        position: absolute !important;
        top: 0.55rem;
        right: 0.6rem;
        width: auto;
        padding: 0 !important;
    }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td.tabela-cartoes-acoes::before { display: none; }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr.tabela-cartoes-vazia > td { justify-content: center; text-align: center; }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr.tabela-cartoes-vazia > td::before { display: none; }
}

@media (max-width: 767.98px) {
    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td.tabela-cartoes-acoes-fim {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding-top: 0.6rem !important;
        border-top: 1px dashed var(--cfx-borda) !important;
    }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td.tabela-cartoes-acoes-fim::before { display: none; }

    body.pagina-painel .conteudo-painel table.tabela-cartoes > tbody > tr > td.tabela-cartoes-acoes-fim > * { margin: 0 !important; }
}

/* Cabeçalho de cada ecrã no telemóvel: título por cima, botões em linhas */
@media (max-width: 575.98px) {
    body.pagina-painel .cabecalho-modulo-decorado.d-flex { flex-wrap: wrap; gap: 0.75rem; }
    body.pagina-painel .cabecalho-modulo-decorado.d-flex > .d-flex { flex-wrap: wrap; width: 100%; }
    body.pagina-painel .cabecalho-modulo-decorado.d-flex > .d-flex > .btn { flex: 1 1 auto; }
}

.dash-saudacao span { font-weight: 500; color: var(--cfx-texto-secundario); }

/* =====================================================================
   Galeria: "Precisa de uma conta ativa" (e outros bloqueios) - móvel primeiro
   ===================================================================== */
.bloq-fundo {
    background:
        radial-gradient(40rem 22rem at 50% -6rem, rgba(var(--cfx-primaria-rgb), 0.14), transparent 70%),
        var(--bs-body-bg);
}

.bloq-pagina { padding-top: 1.5rem; padding-bottom: 2.5rem; }

.bloq-bloco {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.4rem 1.2rem 1.6rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1.4rem;
    background: var(--cfx-superficie);
    box-shadow: 0 24px 48px -32px rgba(17, 24, 39, 0.35);
}

/* pré-visualização */
.bloq-previa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.4rem 1rem 1rem;
    border-radius: 1.1rem;
    background:
        radial-gradient(18rem 10rem at 50% 30%, rgba(167, 139, 250, 0.22), transparent 70%),
        linear-gradient(160deg, rgba(var(--cfx-primaria-rgb), 0.10), rgba(var(--cfx-primaria-rgb), 0.02));
}

.bloq-folha {
    position: relative;
    width: min(100%, 300px);
    padding: 0.4rem;
    border-radius: 0.6rem;
    background: #FFFFFF;
    box-shadow: 0 20px 40px -20px rgba(46, 42, 140, 0.55);
    transform: rotate(-2deg);
}

.bloq-folha img { display: block; width: 100%; height: auto; border-radius: 0.35rem; }

.bloq-folha-vazia { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; font-size: 2.5rem; color: var(--cfx-primaria); }

.bloq-selo {
    position: absolute;
    right: -0.6rem;
    bottom: -0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 3px solid var(--cfx-superficie);
    border-radius: 50%;
    background: var(--cfx-cta);
    font-size: 1.05rem;
    color: #FFFFFF;
    box-shadow: 0 8px 18px -8px rgba(var(--cfx-primaria-rgb), 0.9);
}

.bloq-previa-legenda { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; margin: 0.4rem 0 0; text-align: center; }

.bloq-previa-legenda span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cfx-primaria); }

.bloq-previa-legenda strong { font-size: 0.86rem; color: var(--cfx-texto); }

/* texto */
.bloq-texto { display: flex; flex-direction: column; }

.bloq-rotulo {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    color: var(--cfx-primaria);
}

.bloq-rotulo--alerta { background: rgba(217, 119, 6, 0.13); color: #B45309; }

.bloq-titulo {
    margin: 0;
    font-size: clamp(1.35rem, 3.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cfx-texto);
    text-wrap: balance;
}

.bloq-sub { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--cfx-texto-secundario); }

.bloq-lista { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }

.bloq-lista li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; color: var(--cfx-texto); }

.bloq-lista .bi { flex: 0 0 auto; margin-top: 0.1rem; color: #16A34A; }

.bloq-acoes { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.4rem; }

.bloq-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.7rem 1.1rem;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.bloq-botao--contorno { border: 1px solid var(--cfx-borda-campo); background: var(--cfx-superficie); color: var(--cfx-texto); }

.bloq-botao--contorno:hover { border-color: var(--cfx-primaria); color: var(--cfx-primaria); }

.bloq-voltar {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.4rem;
    margin-top: 1.2rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cfx-primaria);
    text-decoration: none;
}

.bloq-voltar:hover { text-decoration: underline; }

/* tablet e computador: duas colunas */
@media (min-width: 768px) {
    .bloq-pagina { padding-top: 3rem; padding-bottom: 4rem; }
    .bloq-bloco { flex-direction: row; align-items: center; gap: 2.5rem; padding: 1.5rem 2.5rem 1.5rem 1.5rem; }
    .bloq-previa { flex: 0 0 44%; align-self: stretch; justify-content: center; padding: 2.5rem 1.5rem; }
    .bloq-texto { flex: 1; padding: 1rem 0; }
    .bloq-acoes { flex-direction: row; }
    .bloq-botao { flex: 1; }
    .bloq-voltar { align-self: flex-start; }
}

/* =====================================================================
   Conta Gratuita de Criador - painel, planos e páginas de acesso
   ===================================================================== */
.entrar-alternativa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.4rem;
    margin: 1rem 0 0;
    font-size: 0.84rem;
    color: var(--cfx-texto-secundario);
    text-align: center;
}

.entrar-termos { font-size: 0.82rem; color: var(--cfx-texto-secundario); }

.bloq-nota { margin: 1rem 0 0; font-size: 0.84rem; color: var(--cfx-texto-secundario); }

.bloq-nota a { font-weight: 600; }

.criador-novo { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 0.65rem; font-weight: 600; }

.criador-kpis { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.criador-kpi-de { font-size: 0.9rem; font-weight: 500; color: var(--cfx-texto-secundario); }

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

.criador-recentes li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--cfx-borda);
}

.criador-recentes li:first-child { border-top: 0; }

.criador-recente-icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.6rem;
    background: rgba(var(--cfx-primaria-rgb), 0.09);
    color: var(--cfx-primaria);
}

.criador-recente-texto { display: flex; flex: 1; min-width: 0; flex-direction: column; }

.criador-recente-texto strong { overflow: hidden; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; color: var(--cfx-texto); }

.criador-recente-texto small { font-size: 0.76rem; color: var(--cfx-texto-secundario); }

.criador-recente-acoes { display: flex; flex-shrink: 0; gap: 0.35rem; }

.criador-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; }

.criador-vazio > .bi { font-size: 1.6rem; color: var(--cfx-primaria); }

.criador-vazio p { margin: 0; font-size: 0.88rem; color: var(--cfx-texto-secundario); }

.criador-upgrade { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.criador-upgrade-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    font-size: 1.1rem;
    background: rgba(var(--cfx-primaria-rgb), 0.09);
    color: var(--cfx-primaria);
}

.criador-upgrade h2 { margin: 0; font-size: 1rem; font-weight: 700; }

.criador-upgrade p { margin: 0; font-size: 0.85rem; color: var(--cfx-texto-secundario); }

.criador-upgrade ul,
.criador-plano ul { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.25rem 0 0.5rem; padding: 0; list-style: none; font-size: 0.85rem; }

.criador-upgrade li .bi,
.criador-plano li .bi { margin-right: 0.35rem; color: var(--bs-success); }

.criador-sugestoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }

.criador-sugestao { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; color: var(--cfx-texto); text-decoration: none; }

.criador-sugestao:hover { text-decoration: none; }

.criador-sugestao-folha {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0.6rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.8rem;
    background: var(--cfx-superficie-suave);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.criador-sugestao:hover .criador-sugestao-folha {
    border-color: rgba(var(--cfx-primaria-rgb), 0.45);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -16px rgba(15, 23, 42, 0.45);
}

.criador-sugestao-folha img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); }

.criador-sugestao-nome {
    display: -webkit-box; overflow: hidden; min-height: 2.5em; font-size: 0.8rem; font-weight: 600; line-height: 1.25;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

.criador-sugestao-tipo { font-size: 0.72rem; color: var(--cfx-texto-secundario); }

.criador-planos-intro { max-width: 62ch; margin: -0.5rem 0 1.25rem; font-size: 0.9rem; color: var(--cfx-texto-secundario); }

.criador-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; align-items: stretch; }

.criador-plano { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }

.criador-plano h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }

.criador-plano-rotulo { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cfx-texto-secundario); }

.criador-plano--destaque { border-color: rgba(var(--cfx-primaria-rgb), 0.45); box-shadow: 0 12px 30px -24px rgba(var(--cfx-primaria-rgb), 0.9); }

.criador-plano--destaque .criador-plano-rotulo { color: var(--cfx-primaria); }

.criador-plano .btn { margin-top: auto; border-radius: 0.65rem; font-weight: 600; }

.criador-plano-nota { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--cfx-texto-secundario); }

.criador-planos-rodape { margin: 1.25rem 0 0; font-size: 0.86rem; }

@media (prefers-reduced-motion: reduce) {
    .criador-sugestao-folha { transition: none; }
    .criador-sugestao:hover .criador-sugestao-folha { transform: none; }
}

/* =====================================================================
   Oportunidades (apps/oportunidades): cartões de cursos, workshops e
   eventos no painel. O selo diz sempre a origem: Certifixe (primária),
   Patrocinado (âmbar, pago), Anúncio (neutro) e Marketplace (verde).
   Sem pop-ups nem animação em ciclo - só um "levantar" discreto no hover.
   ===================================================================== */
:root {
    --op-selo-certifixe-fundo: rgba(90, 90, 242, 0.10);
    --op-selo-certifixe-texto: #4040C8;
    --op-selo-patrocinado-fundo: #FEF3C7;
    --op-selo-patrocinado-texto: #92400E;
    --op-selo-anuncio-fundo: #F1F2F5;
    --op-selo-anuncio-texto: #4B5563;
    --op-selo-marketplace-fundo: #E7F6EE;
    --op-selo-marketplace-texto: #166534;
    --op-media-fundo: linear-gradient(135deg, #EEF0FF 0%, #F6F2FF 100%);
    --op-media-icone: #5A5AF2;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --op-selo-certifixe-fundo: rgba(139, 148, 250, 0.16);
        --op-selo-certifixe-texto: #B7BDFD;
        --op-selo-patrocinado-fundo: rgba(245, 158, 11, 0.16);
        --op-selo-patrocinado-texto: #FCD34D;
        --op-selo-anuncio-fundo: #25262C;
        --op-selo-anuncio-texto: #C4C7CE;
        --op-selo-marketplace-fundo: rgba(34, 197, 94, 0.14);
        --op-selo-marketplace-texto: #86EFAC;
        --op-media-fundo: linear-gradient(135deg, #1D1F2E 0%, #221D2E 100%);
        --op-media-icone: #8B94FA;
    }
}

[data-bs-theme="dark"] {
    --op-selo-certifixe-fundo: rgba(139, 148, 250, 0.16);
    --op-selo-certifixe-texto: #B7BDFD;
    --op-selo-patrocinado-fundo: rgba(245, 158, 11, 0.16);
    --op-selo-patrocinado-texto: #FCD34D;
    --op-selo-anuncio-fundo: #25262C;
    --op-selo-anuncio-texto: #C4C7CE;
    --op-selo-marketplace-fundo: rgba(34, 197, 94, 0.14);
    --op-selo-marketplace-texto: #86EFAC;
    --op-media-fundo: linear-gradient(135deg, #1D1F2E 0%, #221D2E 100%);
    --op-media-icone: #8B94FA;
}

/* ---- selo de origem ---- */
.op-selo {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--op-selo-anuncio-fundo);
    color: var(--op-selo-anuncio-texto);
}
.op-selo--certifixe { background: var(--op-selo-certifixe-fundo); color: var(--op-selo-certifixe-texto); }
.op-selo--patrocinado { background: var(--op-selo-patrocinado-fundo); color: var(--op-selo-patrocinado-texto); }
.op-selo--marketplace { background: var(--op-selo-marketplace-fundo); color: var(--op-selo-marketplace-texto); }

/* ---- grelhas ---- */
.op-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.op-grelha--painel { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---- cartão ---- */
.op-cartao {
    position: relative;
    display: flex;
    min-width: 0;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.9rem;
    background: var(--painel-cartao);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.2s ease;
}
.op-cartao:hover { transform: translateY(-2px); border-color: rgba(var(--cfx-primaria-rgb), 0.35); box-shadow: var(--cfx-sombra-elevada); }
.op-cartao:focus-within { border-color: rgba(var(--cfx-primaria-rgb), 0.55); box-shadow: var(--cfx-foco); }
.op-cartao--destaque { border-color: rgba(var(--cfx-primaria-rgb), 0.45); }
.op-cartao-link { display: flex; flex-direction: column; width: 100%; color: var(--cfx-texto); text-decoration: none; }
.op-cartao-link:hover { color: var(--cfx-texto); text-decoration: none; }
.op-cartao-link:focus-visible { outline: none; }
.op-cartao-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--op-media-fundo); overflow: hidden; }
.op-cartao-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-cartao-icone { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.1rem; color: var(--op-media-icone); }
.op-cartao-corpo { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; padding: 0.85rem 0.95rem 0.95rem; }
.op-cartao-topo { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.op-cartao-tipo { overflow: hidden; font-size: 0.72rem; font-weight: 600; color: var(--cfx-texto-secundario); text-overflow: ellipsis; white-space: nowrap; }
.op-cartao-titulo {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.op-cartao-resumo {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--cfx-texto-secundario);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.op-cartao-factos { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 600; color: var(--cfx-texto); font-variant-numeric: tabular-nums; }
.op-cartao-factos span { display: inline-flex; align-items: center; gap: 0.3rem; }
.op-cartao-factos i { color: var(--cfx-texto-secundario); font-size: 0.8rem; }
.op-cartao-organizador { overflow: hidden; font-size: 0.72rem; color: var(--cfx-texto-secundario); text-overflow: ellipsis; white-space: nowrap; }
.op-cartao-cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.45rem; font-size: 0.8rem; font-weight: 700; color: var(--cfx-primaria); }
.op-cartao-cta i { transition: transform 0.18s ease; }
.op-cartao:hover .op-cartao-cta i { transform: translateX(3px); }

/* cartão do produto: o mesmo formato, mas com a cor da marca */
.op-cartao--produto { border-color: rgba(var(--cfx-primaria-rgb), 0.25); background: linear-gradient(180deg, rgba(var(--cfx-primaria-rgb), 0.06) 0%, var(--painel-cartao) 58%); }
.op-cartao--produto .op-cartao-media { aspect-ratio: auto; height: 4.25rem; background: transparent; }
.op-cartao--produto .op-cartao-icone { justify-content: flex-start; padding: 1rem 0.95rem 0; font-size: 1.5rem; }
.op-cartao--produto .op-cartao-icone i {
    display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
    border-radius: 0.75rem; background: rgba(var(--cfx-primaria-rgb), 0.12);
}
.op-cartao--produto .op-cartao-resumo { -webkit-line-clamp: 3; }

/* "×" dispensar - só a oportunidade, nunca a secção */
.op-dispensar { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; }
.op-dispensar button {
    display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
    border: 0; border-radius: 999px; background: rgba(17, 24, 39, 0.55); color: #FFFFFF; font-size: 0.72rem;
    backdrop-filter: blur(4px); opacity: 0.85; transition: opacity 0.15s ease, background 0.15s ease;
}
.op-dispensar button:hover, .op-dispensar button:focus-visible { opacity: 1; background: rgba(17, 24, 39, 0.8); outline: none; box-shadow: var(--cfx-foco); }
.op-saindo { opacity: 0; transform: scale(0.97); }

/* ---- secção do Início ---- */
.op-seccao { margin-top: 1.25rem; }
.op-seccao > header > div { display: flex; flex-direction: column; gap: 0.15rem; }

/* ---- cartão contextual (Designer, Galeria, emissão) ---- */
.op-contextual-lugar { margin-top: 1.5rem; }
.op-contextual-lugar:empty { display: none; }
.op-contextual {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 0.8rem 3rem 0.8rem 0.85rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.9rem;
    background: var(--painel-cartao);
    transition: opacity 0.2s ease;
}
.op-contextual--produto { background: linear-gradient(90deg, rgba(var(--cfx-primaria-rgb), 0.07) 0%, var(--painel-cartao) 70%); border-color: rgba(var(--cfx-primaria-rgb), 0.22); }
.op-contextual-media {
    display: flex; flex: none; align-items: center; justify-content: center; width: 4.5rem; height: 3rem;
    border-radius: 0.6rem; background: var(--op-media-fundo); color: var(--op-media-icone); font-size: 1.25rem; overflow: hidden;
}
.op-contextual-media img { width: 100%; height: 100%; object-fit: cover; }
.op-contextual-texto { flex: 1 1 16rem; min-width: 0; }
.op-contextual-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 0.15rem; font-size: 0.72rem; font-weight: 600; color: var(--cfx-texto-secundario); }
.op-contextual-titulo { display: block; overflow: hidden; font-size: 0.9rem; font-weight: 700; color: var(--cfx-texto); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.op-contextual-titulo:hover { color: var(--cfx-primaria); }
.op-contextual-meta { margin: 0.1rem 0 0; overflow: hidden; font-size: 0.76rem; color: var(--cfx-texto-secundario); text-overflow: ellipsis; white-space: nowrap; }
.op-contextual-acoes { display: flex; align-items: center; gap: 0.75rem; }
.op-contextual-todas { font-size: 0.78rem; font-weight: 600; color: var(--cfx-texto-secundario); text-decoration: none; white-space: nowrap; }
.op-contextual-todas:hover { color: var(--cfx-primaria); }
.op-contextual .op-dispensar { top: 50%; right: 0.6rem; transform: translateY(-50%); }
.op-contextual .op-dispensar button { background: transparent; color: var(--cfx-texto-secundario); backdrop-filter: none; }
.op-contextual .op-dispensar button:hover { background: var(--cfx-superficie-suave); color: var(--cfx-texto); }

/* ---- página Oportunidades ---- */
.op-pagina { padding-top: 0.5rem; }
.op-migalhas { margin-bottom: 0.75rem; font-size: 0.82rem; }
.op-migalhas a { color: var(--cfx-texto-secundario); text-decoration: none; }
.op-migalhas a:hover { color: var(--cfx-primaria); }
.op-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.op-cabecalho h1 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.op-eyebrow { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cfx-primaria); }
.op-cabecalho-sub { max-width: 40rem; margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--cfx-texto-secundario); }
.op-cabecalho-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.op-filtros {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; padding: 0.6rem;
    border: 1px solid var(--cfx-borda); border-radius: 0.9rem; background: var(--painel-cartao);
}
.op-filtros-pesquisa { position: relative; flex: 1 1 16rem; }
.op-filtros-pesquisa i { position: absolute; top: 50%; left: 0.75rem; transform: translateY(-50%); color: var(--cfx-texto-secundario); pointer-events: none; }
.op-filtros-pesquisa .form-control { padding-left: 2.2rem; }
.op-filtros > .form-select, .op-filtros > .form-control { flex: 0 1 12.5rem; width: auto; min-width: 10.5rem; }
.op-filtros-limpar { font-size: 0.82rem; font-weight: 600; color: var(--cfx-texto-secundario); text-decoration: none; }
.op-filtros-limpar:hover { color: var(--cfx-primaria); }

.op-bloco { margin-top: 2rem; }
.op-bloco-cab { margin-bottom: 0.9rem; }
.op-bloco-cab--linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; }
.op-bloco-cab h2 { margin: 0; font-size: 1.05rem !important; font-weight: 700; }
.op-bloco-cab p { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--cfx-texto-secundario); }
.op-paginacao { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; font-size: 0.85rem; color: var(--cfx-texto-secundario); }

.op-vazio {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2.25rem 1rem; text-align: center;
    border: 1px dashed var(--cfx-borda-campo); border-radius: 0.9rem; background: var(--painel-cartao);
}
.op-vazio p { max-width: 32rem; margin: 0; font-size: 0.88rem; color: var(--cfx-texto-secundario); }
.op-vazio p strong { color: var(--cfx-texto); }
.op-vazio .btn { margin-top: 0.6rem; }
.op-vazio-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: 0.35rem;
    border-radius: 999px; background: var(--op-media-fundo); color: var(--op-media-icone); font-size: 1.3rem;
}

.op-produto {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.25rem; padding: 1.1rem 1.25rem;
    border: 1px solid rgba(var(--cfx-primaria-rgb), 0.22); border-radius: 1rem;
    background: linear-gradient(100deg, rgba(var(--cfx-primaria-rgb), 0.08) 0%, var(--painel-cartao) 75%);
}
.op-produto > div { flex: 1 1 18rem; min-width: 0; }
.op-produto-icone {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 3rem; height: 3rem;
    border-radius: 0.8rem; background: rgba(var(--cfx-primaria-rgb), 0.14); color: var(--cfx-primaria); font-size: 1.35rem;
}
.op-produto-eyebrow { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cfx-primaria); }
.op-produto-titulo { margin: 0.1rem 0 0; font-size: 1rem; font-weight: 700; }
.op-produto-texto { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--cfx-texto-secundario); }

/* ---- detalhe ---- */
.op-detalhe-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; align-items: start; }
.op-detalhe-capa { aspect-ratio: 16 / 9; border-radius: 1rem; background: var(--op-media-fundo); overflow: hidden; }
.op-detalhe-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-detalhe-capa-vazia { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3.5rem; color: var(--op-media-icone); }
.op-detalhe-etiquetas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.op-etiqueta { padding: 0.14rem 0.55rem; border: 1px solid var(--cfx-borda); border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--cfx-texto-secundario); }
.op-detalhe-titulo { margin: 0.65rem 0 0.25rem; font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.op-detalhe-organizador { margin: 0; font-size: 0.88rem; color: var(--cfx-texto-secundario); }
.op-detalhe-organizador strong { color: var(--cfx-texto); }
.op-detalhe-resumo { max-width: 42rem; margin: 1rem 0 0; font-size: 1.02rem; line-height: 1.6; }
.op-detalhe-descricao { max-width: 42rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--cfx-borda); font-size: 0.92rem; line-height: 1.7; }
.op-detalhe-descricao h2 { margin-bottom: 0.6rem; font-size: 1rem !important; font-weight: 700; }
.op-detalhe-lateral { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.op-ficha { padding: 1.15rem; border: 1px solid var(--cfx-borda); border-radius: 1rem; background: var(--painel-cartao); box-shadow: var(--cfx-sombra-cartao); }
.op-ficha dl { display: flex; flex-direction: column; margin: 0; }
.op-ficha dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--cfx-borda); }
.op-ficha dl > div:first-child { padding-top: 0; }
.op-ficha dt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--cfx-texto-secundario); }
.op-ficha dd { margin: 0; font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.op-ficha dd small { font-weight: 500; color: var(--cfx-texto-secundario); }
.op-ficha-preco { font-size: 1rem !important; color: var(--cfx-texto); }
.op-ficha-acoes { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.op-ficha-acoes .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.op-ficha-contactos { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.35rem 0 0; font-size: 0.82rem; }
.op-ficha-contactos a { display: inline-flex; align-items: center; gap: 0.45rem; overflow-wrap: anywhere; color: var(--cfx-texto); text-decoration: none; }
.op-ficha-contactos a:hover { color: var(--cfx-primaria); }
.op-aviso { display: flex; gap: 0.5rem; margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--cfx-texto-secundario); }
.op-aviso i { flex: none; margin-top: 0.1rem; }

/* ---- as minhas oportunidades ---- */
.op-minhas { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.op-minha {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto auto; align-items: center; gap: 1rem;
    padding: 0.85rem 1rem; border: 1px solid var(--cfx-borda); border-radius: 0.9rem; background: var(--painel-cartao);
}
.op-minha-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 0.55rem; background: var(--op-media-fundo); color: var(--op-media-icone); overflow: hidden; }
.op-minha-media img { width: 100%; height: 100%; object-fit: cover; }
.op-minha-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; font-weight: 700; }
.op-minha-titulo a { color: var(--cfx-texto); text-decoration: none; }
.op-minha-titulo a:hover { color: var(--cfx-primaria); }
.op-minha-meta { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--cfx-texto-secundario); }
.op-minha-motivo { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--bs-danger-text-emphasis); }
.op-minha-numeros { display: flex; gap: 1.1rem; margin: 0; text-align: right; }
.op-minha-numeros dt { font-size: 0.68rem; font-weight: 600; color: var(--cfx-texto-secundario); }
.op-minha-numeros dd { margin: 0; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-minha-acoes { display: flex; gap: 0.4rem; }
.op-minha-acoes form { margin: 0; }
.op-nota { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--cfx-texto-secundario); }
.op-estado { padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; background: var(--op-selo-anuncio-fundo); color: var(--op-selo-anuncio-texto); }
.op-estado--publicado { background: var(--op-selo-marketplace-fundo); color: var(--op-selo-marketplace-texto); }
.op-estado--em-revisao, .op-estado--agendado { background: var(--op-selo-patrocinado-fundo); color: var(--op-selo-patrocinado-texto); }
.op-estado--rejeitado { background: rgba(220, 38, 38, 0.1); color: var(--bs-danger-text-emphasis); }

/* ---- Super Administrador: gráfico de 30 dias ---- */
.op-previa { max-width: 20rem; }
.op-grafico { display: flex; align-items: flex-end; gap: 3px; height: 5.5rem; padding-top: 0.25rem; border-bottom: 1px solid var(--cfx-borda); }
.op-grafico-barra { position: relative; flex: 1; height: max(var(--h), 2px); border-radius: 3px 3px 0 0; background: rgba(var(--cfx-primaria-rgb), 0.28); }
.op-grafico-cliques { position: absolute; right: 0; bottom: 0; left: 0; height: var(--h); border-radius: 3px 3px 0 0; background: var(--cfx-primaria); }
.op-legenda { display: inline-block; width: 0.6rem; height: 0.6rem; margin: 0 0.4rem 0 0.15rem; border-radius: 2px; vertical-align: middle; }
.op-legenda--imp { background: rgba(var(--cfx-primaria-rgb), 0.28); }
.op-legenda--cli { background: var(--cfx-primaria); }

/* ---- telemóvel e tablet ---- */
@media (max-width: 991.98px) {
    .op-detalhe-grelha { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .op-detalhe-lateral { position: static; }
    .op-minha { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .op-minha-numeros { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
    .op-minha-acoes { grid-column: 1 / -1; flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .op-grelha, .op-grelha--painel { grid-template-columns: minmax(0, 1fr); }
    .op-filtros > .form-select, .op-filtros > .form-control, .op-filtros > .btn { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }
    .op-contextual { padding-right: 2.75rem; }
    .op-contextual-acoes { width: 100%; }
    .op-cabecalho h1 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .op-cartao, .op-cartao-cta i, .op-contextual, .op-dispensar button { transition: none; }
    .op-cartao:hover { transform: none; }
    .op-cartao:hover .op-cartao-cta i { transform: none; }
}

/* =====================================================================
   Cartões de tipo de conta - partilhados pelo registo público e por
   "Experimentar a gestão completa" (Conta Gratuita -> gestão).
   ===================================================================== */
.cadastro-tipos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.cartao-tipo-conta {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--cfx-borda, var(--bs-border-color));
    border-radius: 1rem;
    background: var(--cfx-superficie, var(--bs-body-bg));
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cartao-tipo-conta:hover {
    border-color: rgba(var(--cfx-primaria-rgb), .55);
}
/* O radio nativo cobre o cartão inteiro (invisível) - alvo de toque
   no cartão todo, teclado nativo (Tab/Setas/Espaço) e a bolha de
   validação (reportValidity()) ancorada no cartão. */
.cartao-tipo-conta input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.cartao-tipo-conta:has(input:checked) {
    border-color: var(--cfx-cta);
    background-color: rgba(var(--cfx-primaria-rgb), .06);
    box-shadow: 0 0 0 3px rgba(var(--cfx-primaria-rgb), .14);
}
.cartao-tipo-conta:has(input:focus-visible) {
    outline: 2px solid var(--cfx-foco, var(--bs-primary));
    outline-offset: 2px;
}
.cartao-icone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    font-size: 1.25rem;
    color: var(--cfx-primaria);
    background: rgba(var(--cfx-primaria-rgb), .1);
    transition: background-color .18s ease, color .18s ease;
}
.cartao-tipo-conta:has(input:checked) .cartao-icone {
    color: #FFFFFF;
    background: var(--cfx-cta);
}
.cartao-texto {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    padding-right: 1.25rem;
}
.cartao-titulo {
    font-weight: 600;
    line-height: 1.3;
    color: var(--heading-color);
}
.cartao-descricao {
    font-size: .85rem;
    line-height: 1.4;
    color: var(--cfx-texto-secundario, var(--bs-secondary-color));
}
.cartao-check {
    position: absolute;
    top: .6rem;
    right: .7rem;
    font-size: 1.05rem;
    color: var(--cfx-cta);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .18s ease;
}
.cartao-tipo-conta:has(input:checked) .cartao-check {
    opacity: 1;
    transform: scale(1);
}

/* =====================================================================
   "Experimentar a gestão completa" (Conta Gratuita -> teste): formulário
   em três passos à esquerda, resumo do que ganha à direita (fixo no
   desktop, depois do formulário no telemóvel).
   ===================================================================== */
.upg { padding-top: 0.5rem; }
.upg-topo { max-width: 46rem; margin-bottom: 1.75rem; }
.upg-voltar { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 1rem; font-size: 0.82rem; color: var(--cfx-texto-secundario); text-decoration: none; }
.upg-voltar:hover { color: var(--cfx-primaria); }
.upg-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; padding: 0.25rem 0.7rem;
    border-radius: 999px; background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria);
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
}
.upg-topo h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
.upg-sub { max-width: 40rem; margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--cfx-texto-secundario); }

.upg-passos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.upg-passos li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; font-weight: 600; color: var(--cfx-texto-secundario); }
.upg-passos span {
    display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
    border: 1.5px solid var(--cfx-borda-campo); border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.upg-passos li.feito { color: var(--cfx-texto); }
.upg-passos li.feito span { border-color: var(--cfx-cta); background: var(--cfx-cta); color: transparent; position: relative; }
.upg-passos li.feito span::after {
    content: "\F26E"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: "bootstrap-icons"; font-size: 0.95rem; color: #FFFFFF;
}

.upg-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.75rem; align-items: start; }
.upg .form-sec-lista { min-width: 0; }
.upg .form-control, .upg .form-select { min-height: 2.75rem; border-radius: 0.7rem; }
.upg .input-group-text { border-radius: 0.7rem 0 0 0.7rem; font-weight: 600; color: var(--cfx-texto-secundario); background: var(--cfx-superficie-suave); }
.upg .input-group .form-control { border-radius: 0 0.7rem 0.7rem 0; }

.upg-sub-pergunta { margin-top: 1.1rem; padding: 1rem 1.15rem; border-radius: 0.9rem; background: rgba(var(--cfx-primaria-rgb), 0.05); }
.upg-sub-titulo { margin: 0 0 0.5rem; font-size: 0.88rem; font-weight: 600; }

.upg-acoes {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem 1.25rem; margin-top: 0.5rem; padding: 0.9rem 1.1rem;
    border: 1px solid var(--cfx-borda); border-radius: 1rem; background: var(--painel-cartao);
    box-shadow: 0 -8px 24px -18px rgba(17, 24, 39, 0.35);
}
.upg-acoes-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.upg-acoes-estado { font-size: 0.82rem; font-weight: 600; color: var(--cfx-texto); }
.upg-acoes-estado .com-erro { color: var(--bs-danger-text-emphasis); }
.upg-acoes-nota { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.76rem; color: var(--cfx-texto-secundario); }
.upg-acoes-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.upg-acoes-botoes .btn-primary { display: inline-flex; align-items: center; gap: 0.45rem; padding-inline: 1.15rem; font-weight: 700; }

.upg-resumo { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.upg-resumo-cartao {
    padding: 1.35rem 1.25rem; border: 1px solid rgba(var(--cfx-primaria-rgb), 0.22); border-radius: 1.1rem;
    background: linear-gradient(170deg, rgba(var(--cfx-primaria-rgb), 0.09) 0%, var(--painel-cartao) 55%);
}
.upg-resumo-eyebrow { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cfx-primaria); }
.upg-resumo-cartao h2 { margin: 0.3rem 0 1rem; font-size: 1.05rem !important; font-weight: 800; line-height: 1.3; }
.upg-lista { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.upg-lista li { display: flex; gap: 0.75rem; }
.upg-lista i {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
    border-radius: 0.6rem; background: rgba(var(--cfx-primaria-rgb), 0.12); color: var(--cfx-primaria); font-size: 1rem;
}
.upg-lista span { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.8rem; line-height: 1.45; color: var(--cfx-texto-secundario); }
.upg-lista strong { font-size: 0.86rem; color: var(--cfx-texto); }
.upg-garantias { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--cfx-borda); }
.upg-garantias p { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--cfx-texto); }
.upg-garantias i { color: var(--bs-success); font-size: 0.95rem; }
.upg-ajuda { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0 0.25rem; font-size: 0.78rem; color: var(--cfx-texto-secundario); }

@media (max-width: 991.98px) {
    .upg-grelha { grid-template-columns: minmax(0, 1fr); }
    .upg-resumo { position: static; order: 2; }
}

@media (max-width: 575.98px) {
    .cadastro-tipos { grid-template-columns: minmax(0, 1fr); }
    .upg-acoes { gap: 0.5rem; padding: 0.7rem 0.8rem; }
    .upg-acoes-nota { display: none; }
    .upg-acoes-estado { font-size: 0.76rem; }
    .upg-acoes-botoes { width: 100%; flex-wrap: nowrap; }
    .upg-acoes-botoes .btn { justify-content: center; padding-inline: 0.75rem; font-size: 0.85rem; }
    .upg-acoes-botoes .btn-primary { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .upg-passos span { transition: none; }
}

/* ---- Editor: painel "Camadas" e mover a folha com Espaço ---- */
.cfx-ed-camadas { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.cfx-ed-camada {
    display: flex; align-items: center; gap: 0.35rem; min-width: 0; padding: 0.35rem 0.35rem 0.35rem 0.55rem;
    border: 1px solid transparent; border-radius: 0.55rem; cursor: pointer; font-size: 0.8rem; color: var(--cfx-texto);
}
.cfx-ed-camada:hover { background: var(--ed-mosaico); }
.cfx-ed-camada.ativa { border-color: rgba(var(--cfx-primaria-rgb), 0.45); background: rgba(var(--cfx-primaria-rgb), 0.08); }
.cfx-ed-camada.oculta .cfx-ed-camada-nome, .cfx-ed-camada.oculta .cfx-ed-camada-tipo { opacity: 0.45; }
.cfx-ed-camada-tipo { flex: none; color: var(--cfx-texto-secundario); }
.cfx-ed-camada-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfx-ed-camada .form-control { flex: 1; min-width: 0; height: 1.7rem; padding: 0.1rem 0.4rem; font-size: 0.8rem; }
.cfx-ed-camada button {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
    border: 0; border-radius: 0.4rem; background: transparent; color: var(--cfx-texto-secundario); font-size: 0.8rem;
}
.cfx-ed-camada button:hover:not(:disabled) { background: var(--cfx-superficie); color: var(--cfx-texto); }
.cfx-ed-camada button:disabled { opacity: 0.3; cursor: default; }
.cfx-ed-camada button:focus-visible { outline: none; box-shadow: var(--cfx-foco); }
.cfx-ed-camada button[aria-pressed="true"] { color: var(--cfx-primaria); }
.cfx-ed-camada-vazia { padding: 0.6rem 0.2rem; font-size: 0.8rem; color: var(--cfx-texto-secundario); }
#konva-scroll.a-mover { cursor: grab; }
#konva-scroll.a-arrastar { cursor: grabbing; }

/* ---- Editor: blocos prontos ---- */
.cfx-ed-blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.cfx-ed-bloco {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; padding: 0.6rem 0.65rem;
    border: 1px solid var(--cfx-borda); border-radius: 0.7rem; background: var(--cfx-superficie);
    color: var(--cfx-texto); font-size: 0.76rem; font-weight: 600; line-height: 1.25; text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cfx-ed-bloco i { font-size: 1rem; color: var(--cfx-primaria); }
.cfx-ed-bloco:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.5); background: rgba(var(--cfx-primaria-rgb), 0.05); }
.cfx-ed-bloco:focus-visible { outline: none; box-shadow: var(--cfx-foco); }

/* ---- Editor: Verificação do documento ---- */
#btn-verificar { position: relative; }
.cfx-ed-verificar-contador {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; margin-left: 0.3rem;
    padding: 0 0.3rem; border-radius: 999px; background: #F59E0B; color: #111827; font-size: 0.68rem; font-weight: 800;
}
.cfx-ed-verificar-contador.com-erros { background: #DC2626; color: #FFFFFF; }
.cfx-ed-verif-ok { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 0.8rem; background: rgba(22, 163, 74, 0.1); }
.cfx-ed-verif-ok > i { font-size: 1.6rem; color: #16A34A; }
.cfx-ed-verif-ok strong { display: block; font-size: 0.95rem; }
.cfx-ed-verif-ok span { font-size: 0.8rem; color: var(--cfx-texto-secundario); }
.cfx-ed-verif-resumo { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--cfx-texto-secundario); }
.cfx-ed-verif-resumo strong { color: #DC2626; }
.cfx-ed-verif-lista { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.cfx-ed-verif-item {
    display: flex; gap: 0.65rem; padding: 0.65rem 0.75rem; border: 1px solid var(--cfx-borda); border-left-width: 3px;
    border-radius: 0.6rem; background: var(--cfx-superficie);
}
.cfx-ed-verif-item[data-verif-elemento] { cursor: pointer; }
.cfx-ed-verif-item[data-verif-elemento]:hover, .cfx-ed-verif-item[data-verif-elemento]:focus-visible { background: var(--cfx-superficie-suave); outline: none; }
.cfx-ed-verif-item > i { margin-top: 0.1rem; }
.cfx-ed-verif-item strong { display: block; font-size: 0.84rem; }
.cfx-ed-verif-item span { display: block; margin-top: 0.1rem; font-size: 0.78rem; line-height: 1.45; color: var(--cfx-texto-secundario); }
.cfx-ed-verif-item--erro { border-left-color: #DC2626; }
.cfx-ed-verif-item--erro > i { color: #DC2626; }
.cfx-ed-verif-item--aviso { border-left-color: #F59E0B; }
.cfx-ed-verif-item--aviso > i { color: #D97706; }
.cfx-ed-verif-item--info { border-left-color: var(--cfx-borda-campo); }
.cfx-ed-verif-item--info > i { color: var(--cfx-texto-secundario); }
.cfx-ed-verif-feitos { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.9rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--cfx-borda); list-style: none; }
.cfx-ed-verif-feitos li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--cfx-texto-secundario); }
.cfx-ed-verif-feitos i { color: #16A34A; }

/* ---- Editor: guias personalizadas ---- */
.cfx-ed-guias-novo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cfx-ed-guias-novo .form-control { width: 4.5rem; }
.cfx-ed-guias-novo span { font-size: 0.78rem; color: var(--cfx-texto-secundario); }
.cfx-ed-guias-lista { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.cfx-ed-guias-lista li { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.78rem; color: var(--cfx-texto); }
.cfx-ed-guias-lista li i { margin-right: 0.3rem; color: #06B6D4; }
.cfx-ed-guias-lista button { border: 0; border-radius: 0.35rem; background: transparent; color: var(--cfx-texto-secundario); }
.cfx-ed-guias-lista button:hover { background: var(--ed-mosaico); color: var(--cfx-texto); }
.cfx-ed-camada-grupo { flex: none; font-size: 0.75rem; color: var(--cfx-primaria); }

/* ---- Editor: histórico de versões ---- */
.cfx-ed-versoes { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cfx-ed-versao {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem;
    border: 1px solid var(--cfx-borda); border-radius: 0.6rem; background: var(--cfx-superficie);
}
.cfx-ed-versao.atual { border-color: rgba(var(--cfx-primaria-rgb), 0.4); background: rgba(var(--cfx-primaria-rgb), 0.05); }
.cfx-ed-versao strong { display: block; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cfx-ed-versao span { font-size: 0.76rem; color: var(--cfx-texto-secundario); }
.cfx-ed-versao-atual { flex: none; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(var(--cfx-primaria-rgb), 0.12); color: var(--cfx-primaria) !important; font-weight: 700; }

/* ---- Editor: tabela livre (linhas/colunas e células no painel) ---- */
.cfx-ed-tabela-contas { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; font-size: 0.78rem; color: var(--cfx-texto-secundario); }
.cfx-ed-tabela-contas > span { width: 3.6rem; }
.cfx-ed-tabela-contas .btn { width: 1.7rem; height: 1.7rem; padding: 0; line-height: 1; }
.cfx-ed-tabela-contas strong { min-width: 1.2rem; text-align: center; color: var(--cfx-texto); font-variant-numeric: tabular-nums; }
/* Grelha do conteúdo da tabela livre: cada coluna com largura própria
   (scroll horizontal em vez de espremer), cabeçalho fixo em cima e o nº da
   linha fixo à esquerda; "Ver em ecrã grande" abre a mesma grelha por cima
   do editor. */
.cfx-ed-tabela-barra { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin: 0.2rem 0 0.4rem; }
.cfx-ed-tabela-barra > span { font-size: 0.72rem; color: var(--cfx-texto-secundario); font-variant-numeric: tabular-nums; }
.cfx-ed-tabela-barra .btn { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
.cfx-ed-tabela-grelha { border: 1px solid var(--cfx-borda); border-radius: 0.5rem; background: var(--cfx-superficie); }
.cfx-ed-tabela-grelha-topo { display: none; }
.cfx-ed-tabela-grelha-scroll { max-height: 15rem; overflow: auto; border-radius: inherit; }
.cfx-ed-tabela-grelha table { width: max-content; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cfx-ed-tabela-grelha th, .cfx-ed-tabela-grelha td {
    width: 6.5rem; min-width: 6.5rem; max-width: 6.5rem; padding: 0;
    border-right: 1px solid var(--cfx-borda); border-bottom: 1px solid var(--cfx-borda);
    background: var(--cfx-superficie);
}
.cfx-ed-tabela-grelha thead th { position: sticky; top: 0; z-index: 2; background: var(--cfx-superficie-suave, var(--cfx-superficie)); }
.cfx-ed-tabela-grelha .cfx-ed-tabela-n {
    position: sticky; left: 0; z-index: 1; width: 2rem; min-width: 2rem; max-width: 2rem;
    font-size: 0.66rem; font-weight: 600; text-align: center; color: var(--cfx-texto-secundario);
    background: var(--cfx-superficie-suave, var(--cfx-superficie));
}
.cfx-ed-tabela-grelha thead .cfx-ed-tabela-n { z-index: 3; }
.cfx-ed-tabela-grelha input {
    display: block; width: 100%; height: 1.85rem; padding: 0 0.4rem; border: 0; background: transparent;
    color: var(--cfx-texto); font-size: 0.74rem; text-overflow: ellipsis;
}
.cfx-ed-tabela-grelha th input { font-weight: 700; }
.cfx-ed-tabela-grelha input:focus { outline: 2px solid var(--cfx-primaria); outline-offset: -2px; background: var(--cfx-superficie); }

.cfx-ed-tabela-grelha--grande {
    position: fixed; inset: 5vh 4vw; z-index: 1080; display: flex; flex-direction: column;
    border-radius: 0.9rem; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.45), 0 24px 60px -20px rgba(15, 23, 42, 0.6);
}
.cfx-ed-tabela-grelha--grande .cfx-ed-tabela-grelha-topo {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--cfx-borda);
}
.cfx-ed-tabela-grelha--grande .cfx-ed-tabela-grelha-topo strong { font-size: 0.9rem; color: var(--cfx-texto); }
.cfx-ed-tabela-grelha--grande .cfx-ed-tabela-grelha-topo span { flex: 1; font-size: 0.76rem; color: var(--cfx-texto-secundario); }
.cfx-ed-tabela-grelha--grande .cfx-ed-tabela-grelha-scroll { flex: 1; max-height: none; }
.cfx-ed-tabela-grelha--grande th, .cfx-ed-tabela-grelha--grande td { width: 9rem; min-width: 9rem; max-width: 9rem; }
.cfx-ed-tabela-grelha--grande input { height: 2.2rem; font-size: 0.82rem; }

/* ---- Editor: editar célula da tabela diretamente na folha ---- */
.cfx-ed-celula-folha {
    position: absolute; z-index: 1000; box-sizing: border-box; margin: 0; padding: 0 0.3rem;
    border: 2px solid var(--cfx-primaria); border-radius: 2px; outline: none;
    background: #FFFFFF; color: #111827; font-family: Arial, sans-serif; text-align: center;
    box-shadow: 0 6px 16px -6px rgba(17, 24, 39, 0.35);
}

/* ---- Editor: galeria de estilos de tabela ---- */
.cfx-ed-estilos-tabela { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.6rem; }
.cfx-ed-estilo-tabela {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.4rem;
    border: 1px solid var(--cfx-borda); border-radius: 0.55rem; background: var(--cfx-superficie);
    color: var(--cfx-texto); font-size: 0.7rem; font-weight: 600; text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cfx-ed-estilo-tabela:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.5); }
.cfx-ed-estilo-tabela.ativo { border-color: var(--cfx-primaria); box-shadow: 0 0 0 2px rgba(var(--cfx-primaria-rgb), 0.2); }
.cfx-ed-estilo-tabela:focus-visible { outline: none; box-shadow: var(--cfx-foco); }
.mini-tabela { display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; background: #FFFFFF; }
.mini-tabela i { display: block; }
.mini-cab { height: 8px; }
.mini-linha { height: 7px; box-sizing: border-box; }

/* ==========================================================================
   Lembretes de pagamentos (Automações) - lpg-*
   ========================================================================== */
.lpg-secao {
    --lpg-acento: var(--cfx-primaria);
    --lpg-acento-fundo: rgba(var(--cfx-primaria-rgb), .1);
    border: 1px solid var(--cfx-borda);
    border-radius: .9rem;
    background: var(--cfx-superficie);
    padding: 1.1rem 1.15rem 1.15rem;
}
[data-bs-theme="dark"] .lpg-secao {
    /* O roxo da marca é escuro demais para texto sobre fundo escuro. */
    --lpg-acento: color-mix(in srgb, var(--cfx-primaria) 45%, #ffffff);
    --lpg-acento-fundo: rgba(var(--cfx-primaria-rgb), .22);
}
.lpg-sobretitulo {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lpg-acento);
    margin: 0 0 .25rem;
}
.conteudo-painel .lpg-secao-titulo,
.lpg-secao-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cfx-texto);
    margin: 0 0 .35rem;
}
.lpg-secao-texto {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--cfx-texto-secundario);
    max-width: 72ch;
    margin: 0;
}
.lpg-secao-texto strong {
    color: var(--cfx-texto);
}
.lpg-garantias {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .4rem 1rem;
    margin: .8rem 0 0;
    padding: .65rem .8rem;
    border-radius: .6rem;
    background: var(--cfx-superficie-suave, var(--lpg-acento-fundo));
}
.lpg-garantias li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--cfx-texto);
}
.lpg-garantias i {
    color: var(--lpg-acento);
    margin-top: .05rem;
}
.lpg-grelha {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}
.lpg-cartao {
    border: 1px solid var(--cfx-borda);
    border-left-width: 3px;
    border-radius: .7rem;
    background: var(--cfx-superficie);
    transition: border-color .2s ease;
}
.lpg-cartao:not(.lpg-desligado) {
    border-color: var(--lpg-acento);
}
.lpg-cartao-topo {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .95rem;
}
.lpg-icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    background: var(--lpg-acento-fundo);
    color: var(--lpg-acento);
    font-size: .95rem;
}
.lpg-cabecalho-texto {
    flex: 1 1 auto;
    min-width: 0;
}
.conteudo-painel .lpg-titulo,
.lpg-titulo {
    font-size: .86rem;
    font-weight: 700;
    color: var(--cfx-texto);
    margin: .1rem 0 .15rem;
}
.lpg-descricao {
    font-size: .76rem;
    line-height: 1.45;
    color: var(--cfx-texto-secundario);
    margin: 0;
    max-width: 75ch;
}
.lpg-interruptor {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-left: 2.5em;
    margin-top: .15rem;
    white-space: nowrap;
}
.lpg-interruptor .form-check-input {
    width: 2.2em;
    height: 1.2em;
    cursor: pointer;
}
.lpg-estado::after {
    content: attr(data-estado-desligado);
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    background: var(--cfx-superficie-suave, rgba(127, 127, 127, .12));
    color: var(--cfx-texto-secundario);
    border: 1px solid var(--cfx-borda);
}
.lpg-interruptor input:checked + .lpg-estado::after {
    content: attr(data-estado-ligado);
    background: var(--lpg-acento-fundo);
    color: var(--lpg-acento);
    border-color: transparent;
}
.lpg-corpo {
    display: grid;
    gap: .9rem;
    padding: .85rem .95rem .95rem;
    border-top: 1px solid var(--cfx-borda);
}
@media (min-width: 992px) {
    .lpg-corpo {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 1.25rem;
    }
}
.lpg-config {
    display: grid;
    gap: .8rem;
    align-content: start;
}
.lpg-rotulo {
    font-size: .74rem;
    font-weight: 600;
    color: var(--cfx-texto);
    margin: 0 0 .35rem;
}
.lpg-ajuda {
    font-weight: 400;
    color: var(--cfx-texto-secundario);
}
.lpg-modos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.lpg-modo {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .7rem;
    border: 1px solid var(--cfx-borda-campo, var(--cfx-borda));
    border-radius: .5rem;
    cursor: pointer;
    background: var(--cfx-superficie);
    transition: border-color .15s ease, background-color .15s ease;
}
.lpg-modo:hover {
    border-color: var(--lpg-acento);
}
.lpg-modo:has(input:checked) {
    border-color: var(--lpg-acento);
    background: var(--lpg-acento-fundo);
}
.lpg-modo input {
    margin: 0;
    accent-color: var(--cfx-primaria);
}
.lpg-modo input:focus-visible {
    outline: 2px solid var(--lpg-acento);
    outline-offset: 2px;
}
.lpg-modo span {
    display: grid;
    line-height: 1.25;
}
.lpg-modo strong {
    font-size: .76rem;
    color: var(--cfx-texto);
}
.lpg-modo small {
    font-size: .68rem;
    color: var(--cfx-texto-secundario);
}
.lpg-dias {
    display: grid;
    gap: .45rem;
}
.lpg-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.lpg-etiqueta {
    display: inline-flex;
    align-items: center;
    padding: .18rem .25rem .18rem .6rem;
    border-radius: 999px;
    background: var(--lpg-acento-fundo);
    color: var(--cfx-texto);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}
.lpg-etiqueta strong {
    font-weight: 700;
    margin-right: .2rem;
}
.lpg-remover {
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: .25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cfx-texto-secundario);
    font-size: .9rem;
    line-height: 1;
}
.lpg-remover:hover,
.lpg-remover:focus-visible {
    background: var(--cfx-borda);
    color: var(--cfx-texto);
}
.lpg-sem-dias {
    font-size: .74rem;
    color: var(--cfx-texto-secundario);
}
.lpg-adicionar {
    display: flex;
    gap: .4rem;
}
.lpg-adicionar .form-control {
    width: 7.5rem;
    font-size: .76rem;
}
.lpg-adicionar .btn {
    font-size: .74rem;
    white-space: nowrap;
}
.lpg-dias-texto {
    font-size: .78rem;
    max-width: 14rem;
}
.lpg-com-js .lpg-dias-texto {
    display: none;
}
.lpg-cartao:not(.lpg-com-js) .lpg-etiquetas,
.lpg-cartao:not(.lpg-com-js) .lpg-adicionar {
    display: none;
}
.lpg-erro,
.lpg-erro-campo,
.lpg-aviso-modo {
    font-size: .72rem;
    margin: 0;
}
.lpg-erro,
.lpg-erro-campo {
    color: var(--bs-danger-text-emphasis, #b42318);
}
.lpg-erro-campo {
    margin-top: .35rem;
}
.lpg-aviso-modo {
    color: var(--cfx-texto-secundario);
}
.lpg-lado {
    display: grid;
    gap: .55rem;
    align-content: start;
}
.lpg-exemplo {
    border-radius: .55rem;
    padding: .6rem .75rem;
    background: var(--cfx-superficie-suave, var(--lpg-acento-fundo));
    border: 1px solid var(--cfx-borda);
}
.lpg-exemplo-titulo {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
    margin: 0 0 .25rem;
}
.lpg-exemplo-titulo i {
    color: var(--lpg-acento);
}
.lpg-exemplo-texto {
    font-size: .77rem;
    line-height: 1.45;
    color: var(--cfx-texto);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.lpg-nota {
    display: flex;
    gap: .4rem;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--cfx-texto-secundario);
    margin: 0;
}
.lpg-nota i {
    color: var(--lpg-acento);
    margin-top: .05rem;
}
@media (max-width: 575.98px) {
    .lpg-cartao-topo {
        flex-wrap: wrap;
    }
    .lpg-interruptor {
        order: -1;
        width: 100%;
        justify-content: flex-end;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lpg-cartao,
    .lpg-modo {
        transition: none;
    }
}

/* ==========================================================================
   Configuração de automações - aut-*
   ========================================================================== */
.aut-pagina {
    --aut-acento: var(--cfx-primaria);
    --aut-acento-fundo: rgba(var(--cfx-primaria-rgb), .1);
}
[data-bs-theme="dark"] .aut-pagina {
    --aut-acento: color-mix(in srgb, var(--cfx-primaria) 45%, #ffffff);
    --aut-acento-fundo: rgba(var(--cfx-primaria-rgb), .22);
}
.aut-indice {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
}
.aut-indice a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    background: var(--cfx-superficie);
    color: var(--cfx-texto);
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.aut-indice a i {
    color: var(--aut-acento);
}
.aut-indice a:hover,
.aut-indice a:focus-visible {
    border-color: var(--aut-acento);
    background: var(--aut-acento-fundo);
}
.aut-form {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
.aut-form > section {
    scroll-margin-top: 5rem;
}
.aut-secao {
    border: 1px solid var(--cfx-borda);
    border-radius: .9rem;
    background: var(--cfx-superficie);
    overflow: hidden;
}
.aut-secao-topo {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--cfx-borda);
}
.aut-icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    background: var(--aut-acento-fundo);
    color: var(--aut-acento);
    font-size: .95rem;
}
.conteudo-painel .aut-secao-titulo,
.aut-secao-titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cfx-texto);
    margin: .1rem 0 .2rem;
}
.aut-secao-texto {
    font-size: .76rem;
    line-height: 1.45;
    color: var(--cfx-texto-secundario);
    margin: 0;
    max-width: 78ch;
}
.aut-linhas > .aut-linha + .aut-linha {
    border-top: 1px solid var(--cfx-borda);
}
.aut-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .4rem 1rem;
    padding: .75rem 1.1rem;
}
.aut-linha:hover {
    background: var(--cfx-superficie-suave, transparent);
}
.aut-linha-texto {
    display: grid;
    gap: .1rem;
    cursor: pointer;
    min-width: 0;
}
.aut-linha-texto strong {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cfx-texto);
}
.aut-linha-texto small {
    font-size: .74rem;
    line-height: 1.4;
    color: var(--cfx-texto-secundario);
}
.aut-linha > .aut-interruptor {
    grid-column: 3;
    grid-row: 1;
}
.aut-linha > .aut-numero {
    grid-column: 2;
    grid-row: 1;
}
.aut-interruptor {
    margin: 0;
    padding-left: 2.5em;
    min-height: 0;
}
.aut-interruptor .form-check-input {
    width: 2.2em;
    height: 1.2em;
    cursor: pointer;
}
.aut-numero {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}
.aut-numero .form-control {
    width: 4.6rem;
    padding: .25rem .5rem;
    font-size: .8rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.aut-numero span {
    font-size: .74rem;
    color: var(--cfx-texto-secundario);
}
.aut-escada {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .5rem;
    margin-top: .35rem;
}
.aut-degrau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .65rem;
    border: 1px solid var(--cfx-borda);
    border-radius: .55rem;
    background: var(--cfx-superficie);
}
.aut-degrau label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--cfx-texto);
}
.aut-passo {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--aut-acento-fundo);
    color: var(--aut-acento);
    font-size: .68rem;
    font-weight: 700;
}
.aut-erro {
    grid-column: 1 / -1;
    font-size: .72rem;
    color: var(--bs-danger-text-emphasis, #b42318);
    margin: 0;
}
.aut-mensagens {
    display: grid;
}
.aut-mensagem + .aut-mensagem {
    border-top: 1px solid var(--cfx-borda);
}
.aut-mensagem summary {
    display: grid;
    gap: .2rem;
    padding: .7rem 2.6rem .7rem 1.1rem;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.aut-mensagem summary::-webkit-details-marker {
    display: none;
}
.aut-mensagem summary::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    position: absolute;
    right: 1.1rem;
    top: .8rem;
    font-size: .75rem;
    color: var(--cfx-texto-secundario);
    transition: transform .15s ease;
}
.aut-mensagem[open] summary::after {
    transform: rotate(180deg);
}
.aut-mensagem summary:hover {
    background: var(--cfx-superficie-suave, transparent);
}
.aut-mensagem summary:focus-visible {
    outline: 2px solid var(--aut-acento);
    outline-offset: -2px;
}
.aut-mensagem-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.aut-mensagem-titulo {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cfx-texto);
}
.aut-etiqueta {
    padding: .08rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--cfx-borda);
    font-size: .64rem;
    font-weight: 700;
    color: var(--cfx-texto-secundario);
}
.aut-etiqueta-ativa {
    border-color: transparent;
    background: var(--aut-acento-fundo);
    color: var(--aut-acento);
}
.aut-mensagem-previa {
    font-size: .74rem;
    line-height: 1.4;
    color: var(--cfx-texto-secundario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aut-mensagem[open] .aut-mensagem-previa {
    white-space: normal;
}
.aut-mensagem-corpo {
    display: grid;
    gap: .45rem;
    padding: 0 1.1rem .9rem;
}
.aut-mensagem-corpo .form-control {
    font-size: .8rem;
}
.aut-mensagem-corpo .btn {
    justify-self: start;
    font-size: .74rem;
}
.aut-rotulo {
    font-size: .74rem;
    font-weight: 600;
    color: var(--cfx-texto);
}
.aut-rotulo span {
    font-weight: 400;
    color: var(--cfx-texto-secundario);
}
.aut-mensagem-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1rem;
}
.aut-variaveis,
.aut-contador {
    font-size: .7rem;
    color: var(--cfx-texto-secundario);
    margin: 0;
}
.aut-variaveis code {
    display: inline-block;
    margin: .1rem .2rem 0 0;
    padding: .02rem .35rem;
    border-radius: .3rem;
    background: var(--aut-acento-fundo);
    color: var(--cfx-texto);
    font-size: .68rem;
}
.aut-contador {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.aut-barra {
    position: sticky;
    bottom: .75rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .6rem .6rem .6rem 1rem;
    border: 1px solid var(--cfx-borda);
    border-radius: .8rem;
    background: var(--cfx-superficie);
    box-shadow: var(--cfx-sombra-elevada, 0 8px 24px rgba(0, 0, 0, .12));
}
.aut-barra p {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: var(--cfx-texto-secundario);
    margin: 0;
}
@media (max-width: 575.98px) {
    .aut-linha {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .aut-linha > .aut-interruptor {
        grid-column: 2;
    }
    .aut-linha > .aut-numero {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
@media (prefers-reduced-motion: reduce) {
    .aut-indice a,
    .aut-mensagem summary::after {
        transition: none;
    }
}

/* ==========================================================================
   Configurações do Centro - cfg-* (reaproveita aut-secao/aut-linha/aut-barra)
   ========================================================================== */
.cfg-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .6rem;
}
.cfg-atalho {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    border: 1px solid var(--cfx-borda);
    border-radius: .75rem;
    background: var(--cfx-superficie);
    color: var(--cfx-texto);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.cfg-atalho:hover,
.cfg-atalho:focus-visible {
    border-color: var(--aut-acento);
    color: var(--cfx-texto);
}
.cfg-atalho > span:last-child {
    display: grid;
    gap: .05rem;
    min-width: 0;
}
.cfg-atalho strong {
    font-size: .8rem;
    font-weight: 600;
}
.cfg-atalho small {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--cfx-texto-secundario);
}
.cfg-grelha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.1rem;
    padding: .95rem 1.1rem 1.05rem;
}
.cfg-campo {
    display: grid;
    gap: .3rem;
    align-content: start;
    min-width: 0;
}
.cfg-campo-largo {
    grid-column: 1 / -1;
}
.cfg-rotulo {
    font-size: .76rem;
    font-weight: 600;
    color: var(--cfx-texto);
    margin: 0;
}
.cfg-ajuda {
    font-size: .71rem;
    line-height: 1.4;
    color: var(--cfx-texto-secundario);
    margin: 0;
}
.cfg-pagina .cfg-campo .form-control,
.cfg-pagina .cfg-campo .form-select {
    font-size: .82rem;
}
.cfg-pagina .cfg-campo input[type="file"] {
    font-size: .76rem;
}
.cfg-linhas-separadas {
    border-top: 1px solid var(--cfx-borda);
}
.cfg-blocos {
    display: grid;
    gap: 1rem;
    padding: .95rem 1.1rem 1.05rem;
}
.cfg-opcoes > div {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .35rem;
}
.cfg-opcoes > div > div,
.cfg-opcoes label {
    margin: 0;
}
.cfg-opcoes label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .7rem;
    border: 1px solid var(--cfx-borda-campo, var(--cfx-borda));
    border-radius: 999px;
    background: var(--cfx-superficie);
    font-size: .76rem;
    color: var(--cfx-texto);
    cursor: pointer;
}
.cfg-opcoes label:has(input:checked) {
    border-color: var(--aut-acento);
    background: var(--aut-acento-fundo);
    font-weight: 600;
}
.cfg-opcoes input {
    margin: 0;
    accent-color: var(--cfx-primaria);
}
.cfg-pagina .aut-indice {
    margin-top: .8rem;
}
.cfg-pagina .cfg-atalhos {
    margin-top: .2rem;
}
@media (max-width: 767.98px) {
    .cfg-grelha {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cfg-atalho {
        transition: none;
    }
}
.cfg-logo {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.cfg-logo-imagem,
.cfg-logo-vazio {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .6rem;
    border: 1px solid var(--cfx-borda);
    background: #ffffff;
    object-fit: contain;
    padding: .25rem;
}
.cfg-logo-vazio {
    display: grid;
    place-items: center;
    background: var(--cfx-superficie-suave, transparent);
    color: var(--cfx-texto-secundario);
    font-size: 1.2rem;
}
.cfg-logo-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    min-width: 0;
}
.cfg-logo-acoes .btn {
    font-size: .74rem;
}
.cfg-logo-remover {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--cfx-texto-secundario);
    cursor: pointer;
}

/* ---- Menu Principal: blocos Agora / Atividade / Desde o início ---- */
.dash-bloco { margin-bottom: 1.6rem; }

.dash-bloco-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
}

.dash-bloco-topo--periodo { align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.25rem; }

.dash .dash-bloco-titulo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.98rem !important;
    font-weight: 700;
    color: var(--cfx-texto);
}

.dash-bloco-titulo .bi { color: var(--cfx-primaria); font-size: 0.9rem; }

.dash-bloco-nota { margin: 0; font-size: 0.74rem; color: var(--cfx-texto-secundario); }

.dash-bloco > .dash-acoes { margin: 0.9rem 0; }

.dash-grelha--depois-kpis { margin-top: 1rem; }

/* seletor de período */
.dash-periodo-escolha {
    display: grid;
    gap: 0.45rem;
    justify-items: end;
    max-width: 100%;
}

.dash-periodo-atual {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.76rem;
    color: var(--cfx-texto-secundario);
}

.dash-periodo-atual .bi { color: var(--cfx-primaria); }

.dash-periodo-atual strong { font-size: 0.86rem; color: var(--cfx-texto); }

.dash-periodo-atalhos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 0.25rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.75rem;
    background: var(--painel-cartao);
}

.dash-atalho {
    padding: 0.3rem 0.65rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cfx-texto-secundario);
    white-space: nowrap;
    cursor: pointer;
}

.dash-atalho:hover { color: var(--cfx-texto); background: var(--painel-fundo); }

.dash-atalho:focus-visible { outline: 2px solid var(--cfx-primaria); outline-offset: 1px; }

.dash-atalho--ativo,
.dash-atalho--ativo:hover { background: var(--cfx-primaria); color: #fff; }

.dash-periodo-mais { font-size: 0.74rem; text-align: right; }

.dash-periodo-mais > summary {
    display: inline-block;
    cursor: pointer;
    font-weight: 600;
    color: var(--cfx-primaria);
    list-style: none;
}

.dash-periodo-mais > summary::-webkit-details-marker { display: none; }

.dash-periodo-mais > summary::after { content: " \25BE"; }

.dash-periodo-mais[open] > summary::after { content: " \25B4"; }

.dash-periodo-campos {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.45rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.75rem;
    background: var(--painel-cartao);
    text-align: left;
}

.dash-periodo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.dash-periodo-linha label { font-size: 0.74rem; font-weight: 600; color: var(--cfx-texto); }

.dash-periodo-linha .form-control { width: 9.5rem; padding: 0.25rem 0.45rem; font-size: 0.78rem; }

.dash-periodo-linha .btn { font-size: 0.74rem; }

.dash-periodo-erro { margin: 0; font-size: 0.72rem; color: var(--dash-vermelho); }

/* presenças e candidatos: uma coluna dentro do cartão */
.dash-indicadores--coluna { grid-template-columns: minmax(0, 1fr) !important; }

.dash-vazio-cartao {
    display: grid;
    place-items: center;
    min-height: 8rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--cfx-texto-secundario);
}

@media (max-width: 991.98px) {
    .dash-periodo-escolha { justify-items: stretch; width: 100%; }
    .dash-periodo-atalhos { justify-content: flex-start; }
    .dash-periodo-mais { text-align: left; }
}

@media (max-width: 575.98px) {
    .dash-periodo-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-atalho { padding: 0.4rem 0.3rem; white-space: normal; }
    .dash-periodo-linha .form-control { flex: 1 1 8rem; width: auto; }
}

.dash-periodo-linha input[type="month"].form-control { width: 11.5rem; }

/* Registo/login vindos de "Usar este modelo" na Galeria */
.entrar-modelo {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(var(--cfx-primaria-rgb), 0.3);
    border-radius: 0.75rem;
    background: rgba(var(--cfx-primaria-rgb), 0.07);
}
.entrar-modelo .bi { color: var(--cfx-primaria); font-size: 1.05rem; margin-top: 0.05rem; }
.entrar-modelo p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--cfx-texto); }
.entrar-modelo span { color: var(--cfx-texto-secundario); }

/* =====================================================================
   Páginas de suporte (site público): Central de Ajuda, Fale Connosco,
   Estado do Serviço, Termos, Proteção de Dados e Cookies.
   O título fica no MESMO contentor do conteúdo (alinhado à esquerda com
   ele - sem o recuo do `.cabecalho-modulo-decorado`) e com espaçamento
   normal entre letras.
   ===================================================================== */
:root,
[data-bs-theme="light"] {
    --sup-ok: #15803D;
    --sup-ok-fundo: #DCFCE7;
    --sup-aviso: #B45309;
    --sup-aviso-fundo: #FEF3C7;
    --sup-erro: #B91C1C;
    --sup-erro-fundo: #FEE2E2;
}

[data-bs-theme="dark"] {
    --sup-ok: #4ADE80;
    --sup-ok-fundo: rgba(74, 222, 128, 0.12);
    --sup-aviso: #FBBF24;
    --sup-aviso-fundo: rgba(251, 191, 36, 0.12);
    --sup-erro: #F87171;
    --sup-erro-fundo: rgba(248, 113, 113, 0.12);
}

.sup-contentor { max-width: 1120px; }

/* ---- Cabeçalho ---- */
.sup-cab {
    padding: 2.5rem 0 1.9rem;
    background:
        radial-gradient(70% 120% at 85% -10%, rgba(var(--cfx-primaria-rgb), 0.13), transparent 60%),
        radial-gradient(50% 90% at 0% 0%, rgba(var(--cfx-primaria-rgb), 0.07), transparent 70%),
        var(--cfx-superficie-suave);
    border-bottom: 1px solid var(--cfx-borda);
}

.sup-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.22rem 0.65rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-text);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    border-radius: 999px;
}

.sup-titulo {
    margin: 0;
    font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.05rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
    text-wrap: balance;
}

.sup-titulo span { color: var(--bs-secondary-text); }

.sup-subtitulo {
    max-width: 62ch;
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cfx-texto-secundario);
}

.sup-legal-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.sup-legal-abas a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--cfx-texto-secundario);
    text-decoration: none;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.sup-legal-abas a:hover { color: var(--cfx-texto); border-color: var(--cfx-borda-campo); }

.sup-legal-abas a[aria-current="page"] {
    color: #FFFFFF;
    background: var(--cfx-cta);
    border-color: var(--cfx-cta);
}

/* ---- Peças comuns ---- */
.sup-cartao {
    padding: 1.4rem 1.5rem;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: var(--cfx-raio-cartao);
    box-shadow: var(--cfx-sombra-cartao);
}

.sup-cartao-titulo {
    margin: 0 0 0.8rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
}

.sup-dica {
    margin: 0.4rem 0 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--cfx-texto-secundario);
}

.sup-info-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    color: var(--bs-secondary-text);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    border-radius: 0.65rem;
}

.sup-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin: 3rem 0 3.5rem;
    padding: 1.6rem 1.75rem;
    background:
        radial-gradient(80% 140% at 100% 0%, rgba(var(--cfx-primaria-rgb), 0.14), transparent 60%),
        var(--cfx-superficie-suave);
    border: 1px solid var(--cfx-borda);
    border-radius: 1.25rem;
}

.sup-cta h2 { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.sup-cta p { margin: 0; font-size: 0.84rem; color: var(--cfx-texto-secundario); }
.sup-cta-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Índice lateral (Ajuda e documentos legais) */
.sup-indice-titulo {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
}

.sup-indice nav { display: flex; flex-direction: column; gap: 0.15rem; }

.sup-indice nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--cfx-texto-secundario);
    text-decoration: none;
    border-radius: 0.6rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sup-indice nav a:hover { color: var(--cfx-texto); background: var(--cfx-superficie-suave); }

.sup-indice nav a[aria-current] {
    font-weight: 600;
    color: var(--bs-secondary-text);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
}

.sup-indice nav a .bi { width: 1.1rem; text-align: center; }
.sup-indice nav a span { flex: 1 1 auto; }

.sup-indice nav a small {
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--cfx-texto-secundario);
}

/* ---- Central de Ajuda ---- */
/* A pesquisa vive dentro da faixa do cabeçalho (nunca uma caixa à parte
   colada a ele): só o campo, branco, sobre o fundo suave. */
.sup-pesquisa-bloco { max-width: 44rem; margin-top: 1.4rem; }

.sup-pesquisa {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.9rem;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda-campo);
    border-radius: 0.8rem;
    box-shadow: var(--cfx-sombra-cartao);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sup-pesquisa:focus-within { border-color: var(--cfx-primaria); box-shadow: var(--cfx-foco); }
.sup-pesquisa .bi { font-size: 1.05rem; color: var(--cfx-texto-secundario); }

.sup-pesquisa input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.8rem;
    font-size: 0.9rem;
    color: var(--cfx-texto);
    background: transparent;
    border: 0;
    outline: 0;
}

.sup-pesquisa kbd {
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    color: var(--cfx-texto-secundario);
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 0.35rem;
}

.sup-populares {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.sup-populares > span {
    margin-right: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cfx-texto-secundario);
}

.sup-chip {
    padding: 0.28rem 0.7rem;
    font-size: 0.74rem;
    color: var(--cfx-texto);
    text-decoration: none;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.sup-chip:hover { color: var(--bs-secondary-text); border-color: rgba(var(--cfx-primaria-rgb), 0.45); }
.sup-populares .sup-chip:nth-of-type(n+5) { display: none; }

.sup-contagem {
    margin: 1.75rem 0 0;
    font-size: 0.8rem;
    color: var(--cfx-texto-secundario);
}

.sup-ajuda-grelha {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2.5rem;
    margin-top: 1rem;
}

.sup-indice { position: sticky; top: 6rem; align-self: start; }
.sup-temas { display: flex; flex-direction: column; gap: 2.5rem; }
.sup-tema { scroll-margin-top: 6rem; }

.sup-tema-cab {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.sup-tema-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1.05rem;
    color: #FFFFFF;
    background: var(--cfx-cta);
    border-radius: 0.8rem;
    box-shadow: 0 8px 18px -10px rgba(var(--cfx-primaria-rgb), 0.9);
}

.sup-tema-cab h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.sup-tema-cab p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--cfx-texto-secundario); }

.sup-novo {
    padding: 0.12rem 0.5rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sup-ok);
    background: var(--sup-ok-fundo);
    border-radius: 999px;
}

.sup-faqs {
    overflow: hidden;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: var(--cfx-raio-cartao);
    box-shadow: var(--cfx-sombra-cartao);
}

.sup-faq { scroll-margin-top: 6rem; }
.sup-faq + .sup-faq { border-top: 1px solid var(--cfx-borda); }

.sup-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cfx-texto);
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s ease;
}

.sup-faq summary::-webkit-details-marker { display: none; }
.sup-faq summary:hover { background: var(--cfx-superficie-suave); }
.sup-faq summary:focus-visible { outline: 2px solid var(--cfx-primaria); outline-offset: -2px; }

.sup-faq summary .bi {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--cfx-texto-secundario);
    transition: transform 0.2s ease, color 0.2s ease;
}

.sup-faq[open] summary { color: var(--bs-secondary-text); }
.sup-faq[open] summary .bi { color: var(--bs-secondary-text); transform: rotate(45deg); }

.sup-faq-corpo {
    padding: 0 1.15rem 1.05rem;
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--cfx-texto-secundario);
}

.sup-faq-corpo p { max-width: 70ch; margin: 0 0 0.6rem; }

.sup-faq-corpo ul {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 70ch;
    margin: 0 0 0.7rem;
    padding: 0;
    list-style: none;
}

.sup-faq-corpo li { position: relative; padding-left: 1.1rem; }

.sup-faq-corpo li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0.15rem;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--cfx-primaria);
    border-radius: 50%;
}

.sup-faq-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.sup-caminho {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--cfx-texto);
    background: var(--cfx-superficie-suave);
    border: 1px solid var(--cfx-borda);
    border-radius: 0.5rem;
}

.sup-caminho .bi { color: var(--bs-secondary-text); }

.sup-copiar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.76rem;
    color: var(--cfx-texto-secundario);
    background: transparent;
    border: 0;
    border-radius: 0.4rem;
}

.sup-copiar:hover { color: var(--bs-secondary-text); background: var(--cfx-superficie-suave); }
.sup-copiar:focus-visible { outline: 2px solid var(--cfx-primaria); }

.sup-vazio {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--cfx-texto-secundario);
    background: var(--cfx-superficie);
    border: 1px dashed var(--cfx-borda-campo);
    border-radius: var(--cfx-raio-cartao);
}

.sup-vazio > .bi { display: block; margin-bottom: 0.5rem; font-size: 1.6rem; }
.sup-vazio-titulo { margin-bottom: 0.3rem; font-weight: 600; color: var(--cfx-texto); }
.sup-vazio p { margin: 0; font-size: 0.9rem; }

/* ---- Fale Connosco ---- */
.sup-contacto-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin: 2rem 0 3.5rem;
}

.sup-contacto-form { padding: 1.75rem; }
.sup-contacto-lado { display: flex; flex-direction: column; gap: 1rem; }
.sup-form { display: flex; flex-direction: column; gap: 1.1rem; }
.sup-form .form-label { margin-bottom: 0.3rem; font-size: 0.8rem; font-weight: 500; }

.sup-form-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.sup-erro { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--sup-erro); }

.sup-assuntos { margin: 0; padding: 0; border: 0; }
.sup-assuntos-opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sup-assunto { position: relative; cursor: pointer; }

.sup-assunto input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sup-assunto span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.8rem;
    font-size: 0.8rem;
    color: var(--cfx-texto-secundario);
    background: var(--cfx-superficie-suave);
    border: 1px solid var(--cfx-borda);
    border-radius: 0.7rem;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.sup-assunto:hover span { color: var(--cfx-texto); border-color: var(--cfx-borda-campo); }

.sup-assunto input:checked + span {
    font-weight: 600;
    color: var(--bs-secondary-text);
    background: rgba(var(--cfx-primaria-rgb), 0.1);
    border-color: var(--cfx-primaria);
}

.sup-assunto input:focus-visible + span { box-shadow: var(--cfx-foco); }

.sup-form-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.sup-lista-info {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sup-lista-info li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.84rem; }
.sup-lista-info li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sup-lista-info small { font-size: 0.72rem; color: var(--cfx-texto-secundario); }
.sup-lista-info a { font-weight: 600; overflow-wrap: anywhere; }

.sup-lista-ligacoes {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
}

.sup-lista-ligacoes li + li { border-top: 1px solid var(--cfx-borda); }

.sup-lista-ligacoes a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--cfx-texto);
    text-decoration: none;
}

.sup-lista-ligacoes a .bi { color: var(--cfx-texto-secundario); transition: transform 0.15s ease; }
.sup-lista-ligacoes a:hover { color: var(--bs-secondary-text); }
.sup-lista-ligacoes a:hover .bi { color: var(--bs-secondary-text); transform: translateX(2px); }
.sup-ligacao-forte { font-size: 0.85rem; font-weight: 600; }

.sup-estado-atalho {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cfx-texto);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.sup-estado-atalho:hover { color: var(--cfx-texto); border-color: rgba(var(--cfx-primaria-rgb), 0.45); }
.sup-estado-atalho > span:nth-child(2) { display: flex; flex: 1 1 auto; flex-direction: column; font-size: 0.88rem; }
.sup-estado-atalho small { font-size: 0.76rem; color: var(--cfx-texto-secundario); }
.sup-estado-atalho > .bi { color: var(--cfx-texto-secundario); }

.sup-enviado { padding: 2rem 0.5rem; text-align: center; }

.sup-enviado-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.9rem;
    font-size: 1.5rem;
    color: var(--sup-ok);
    background: var(--sup-ok-fundo);
    border-radius: 50%;
}

.sup-enviado h2 { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
.sup-enviado p { max-width: 42ch; margin: 0 auto 1.1rem; color: var(--cfx-texto-secundario); }

/* ---- Estado do Serviço ---- */
.sup-estado { padding-top: 2rem; padding-bottom: 3.5rem; }

.sup-estado-geral {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 1.1rem;
}

.sup-estado-geral--operacional { background: var(--sup-ok-fundo); border-color: color-mix(in srgb, var(--sup-ok) 30%, transparent); }
.sup-estado-geral--degradado { background: var(--sup-aviso-fundo); border-color: color-mix(in srgb, var(--sup-aviso) 30%, transparent); }
.sup-estado-geral--indisponivel { background: var(--sup-erro-fundo); border-color: color-mix(in srgb, var(--sup-erro) 30%, transparent); }

.sup-estado-geral-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.35rem;
    color: #FFFFFF;
    border-radius: 50%;
}

.sup-estado-geral--operacional .sup-estado-geral-icone { background: var(--sup-ok); }
.sup-estado-geral--degradado .sup-estado-geral-icone { background: var(--sup-aviso); }
.sup-estado-geral--indisponivel .sup-estado-geral-icone { background: var(--sup-erro); }
[data-bs-theme="dark"] .sup-estado-geral-icone { color: #111214; }

.sup-estado-geral > div { flex: 1 1 16rem; }
.sup-estado-geral h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.sup-estado-geral p { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--cfx-texto-secundario); }

.sup-servicos {
    margin: 1.25rem 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    background: var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
    border-radius: var(--cfx-raio-cartao);
    box-shadow: var(--cfx-sombra-cartao);
}

.sup-servico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
}

.sup-servico + .sup-servico { border-top: 1px solid var(--cfx-borda); }
.sup-servico-texto { display: flex; flex: 1 1 14rem; flex-direction: column; min-width: 0; }
.sup-servico-texto strong { font-size: 0.88rem; font-weight: 600; }
.sup-servico-texto small { font-size: 0.76rem; color: var(--cfx-texto-secundario); }

.sup-servico-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    text-align: right;
}

.sup-servico-estado small { font-size: 0.74rem; color: var(--cfx-texto-secundario); font-variant-numeric: tabular-nums; }

.sup-pilula {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
}

.sup-pilula--operacional { color: var(--sup-ok); background: var(--sup-ok-fundo); }
.sup-pilula--degradado { color: var(--sup-aviso); background: var(--sup-aviso-fundo); }
.sup-pilula--indisponivel { color: var(--sup-erro); background: var(--sup-erro-fundo); }

.sup-ponto {
    width: 0.5rem;
    height: 0.5rem;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.sup-estado-baixo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* ---- Documentos legais ---- */
.sup-legal-grelha {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 2.5rem;
    margin-top: 2rem;
}

.sup-legal-indice nav a { padding: 0.4rem 0.7rem; font-size: 0.82rem; }
.sup-legal { padding: 2rem 2.5rem; }
.sup-legal p, .sup-legal ul { max-width: 72ch; }

.sup-legal-data {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem;
    color: var(--cfx-texto-secundario);
    background: var(--cfx-superficie-suave);
    border-radius: 0.5rem;
}

.sup-legal h2 {
    scroll-margin-top: 6rem;
    margin: 2rem 0 0.6rem;
    padding-top: 1.3rem;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
    border-top: 1px solid var(--cfx-borda);
}

.sup-legal-data + h2 { margin-top: 0.5rem; padding-top: 0; border-top: 0; }

.sup-legal p,
.sup-legal li {
    font-size: 0.86rem;
    line-height: 1.75;
    color: var(--cfx-texto-secundario);
}

.sup-legal p { margin: 0 0 0.8rem; }
.sup-legal ul { padding-left: 1.2rem; }

/* ---- Telemóvel e tablet ---- */
@media (max-width: 991.98px) {
    .sup-ajuda-grelha,
    .sup-legal-grelha { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

    .sup-indice { position: static; }

    .sup-indice nav {
        flex-direction: row;
        gap: 0.4rem;
        /* Encosta às margens do contentor, nem mais nem menos (sem scroll
           horizontal da página). */
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5) 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sup-indice nav::-webkit-scrollbar { display: none; }

    .sup-indice nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        background: var(--cfx-superficie);
        border: 1px solid var(--cfx-borda);
        border-radius: 999px;
    }

    .sup-legal-indice { display: none; }
    .sup-contacto-grelha { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .sup-cab { padding: 1.9rem 0 1.7rem; }
    .sup-subtitulo { font-size: 0.86rem; }
    .sup-form-dupla,
    .sup-estado-baixo { grid-template-columns: minmax(0, 1fr); }
    .sup-contacto-form,
    .sup-legal { padding: 1.25rem; }
    .sup-faq summary { padding: 0.8rem 1rem; font-size: 0.85rem; }
    .sup-faq-corpo { padding: 0 1rem 1rem; }
    .sup-servico-estado { align-items: flex-start; text-align: left; }
    .sup-cta { padding: 1.3rem; }
    .sup-pesquisa input { height: 2.6rem; font-size: 0.88rem; }
    .sup-populares .sup-chip:nth-of-type(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sup-faq summary .bi,
    .sup-lista-ligacoes a .bi { transition: none; }
}


/* =====================================================================
   Páginas do painel renovadas (Ciclos, Matrículas por Ciclo, Matricular
   + Pagamento, Nova Matrícula, Exportar, Assistente de IA). Os
   formulários usam o padrão em secções (formulario-seccoes.css); aqui só
   o que é próprio destas páginas. Cartões com a mesma borda, raio e
   fundo de `.form-sec`/`.dash-kpi`.
   ===================================================================== */

/* ---- Listagens: cartão, barra de pesquisa, estados, vazio ---- */
.lst-cartao {
    overflow: hidden;
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: var(--painel-cartao, var(--cfx-superficie));
}

.lst-cartao .table { --bs-table-bg: transparent; }
.lst-cartao .table > :not(caption) > * > * { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.lst-cartao .table th:first-child,
.lst-cartao .table td:first-child { padding-left: 1.15rem; }
.lst-cartao .table th:last-child,
.lst-cartao .table td:last-child { padding-right: 1.15rem; }

.lst-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--cfx-borda);
}

.lst-pesquisa { position: relative; flex: 0 1 22rem; min-width: 12rem; }
.lst-pesquisa .bi { position: absolute; top: 50%; left: 0.8rem; transform: translateY(-50%); color: var(--cfx-texto-secundario); pointer-events: none; }
.lst-pesquisa .form-control { padding-left: 2.2rem; border-radius: 0.7rem; }
.lst-contagem { font-size: 0.8rem; color: var(--cfx-texto-secundario); font-variant-numeric: tabular-nums; }

.lst-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.lst-estado::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.lst-estado--ativo { background: rgba(var(--bs-success-rgb), 0.12); color: var(--bs-success-text-emphasis); }
.lst-estado--planeado { background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria); }
.lst-estado--concluido { background: var(--cfx-superficie-suave); color: var(--cfx-texto-secundario); }

.lst-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--cfx-superficie-suave);
    color: var(--cfx-texto);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
}

a.lst-numero:hover { background: rgba(var(--cfx-primaria-rgb), 0.12); color: var(--cfx-primaria); }

.lst-vazio { padding: 2.5rem 1rem !important; text-align: center; }
.lst-vazio > .bi { display: block; margin-bottom: 0.6rem; font-size: 1.8rem; color: var(--cfx-texto-secundario); }

/* ---- Matrículas por Ciclo ---- */
.mpc-filtro { margin-bottom: 1rem; }
.mpc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpc-kpi-datas { font-size: 1.2rem; }

.mpc-ciclo,
.mpc-curso {
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: var(--painel-cartao, var(--cfx-superficie));
}

.mpc-ciclo > summary,
.mpc-curso > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.9rem 1.15rem;
    cursor: pointer;
    list-style: none;
}

.mpc-ciclo > summary::-webkit-details-marker,
.mpc-curso > summary::-webkit-details-marker { display: none; }

.mpc-ciclo-nome,
.mpc-curso-nome { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 0.55rem; font-weight: 600; }

.mpc-ciclo-nome .bi,
.mpc-curso-nome .bi { font-size: 0.8rem; color: var(--cfx-texto-secundario); transition: transform 0.15s ease; }

.mpc-ciclo[open] > summary .mpc-ciclo-nome .bi,
.mpc-curso[open] > summary .mpc-curso-nome .bi { transform: rotate(90deg); }

.mpc-ciclo-datas,
.mpc-curso-turmas { font-size: 0.78rem; color: var(--cfx-texto-secundario); }

.mpc-ciclo-corpo { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem 1rem; }
.mpc-curso .table-responsive { border-top: 1px solid var(--cfx-borda); }
.mpc-curso .table { --bs-table-bg: transparent; }
.mpc-curso .table th:first-child, .mpc-curso .table td:first-child { padding-left: 1.15rem; }
.mpc-curso .table th:last-child, .mpc-curso .table td:last-child { padding-right: 1.15rem; }

/* ---- Matricular + Pagamento / Nova Matrícula ---- */
.mpg-aviso {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    background: rgba(var(--cfx-primaria-rgb), 0.07);
    color: var(--cfx-texto);
    font-size: 0.84rem;
}

.mpg-aviso .bi { margin-top: 0.1rem; color: var(--cfx-primaria); }
.mpg-aviso--erro { background: rgba(var(--bs-danger-rgb), 0.08); }
.mpg-aviso--erro .bi { color: var(--bs-danger); }

.mpg-itens {
    padding: 0.9rem 1rem;
    border: 1px dashed var(--cfx-borda-campo, var(--cfx-borda));
    border-radius: 0.85rem;
    background: var(--cfx-superficie-suave);
}

.mpg-itens-titulo,
.mpg-resumo-titulo { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.03em; color: var(--cfx-texto-secundario); text-transform: uppercase; }

.mpg-itens-lista { display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 0.75rem; padding: 0; list-style: none; font-size: 0.86rem; }
.mpg-itens-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.mpg-itens-lista li > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.mpg-itens-lista small { margin-left: 0.35rem; font-weight: 400; color: var(--cfx-texto-secundario); }

.mpg-resumo {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--cfx-primaria-rgb), 0.22);
    border-radius: 0.85rem;
    background: rgba(var(--cfx-primaria-rgb), 0.04);
}

.mpg-resumo-linhas { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; font-size: 0.88rem; }
.mpg-linha { display: flex; justify-content: space-between; gap: 1rem; }
.mpg-linha dt { font-weight: 400; color: var(--cfx-texto); }
.mpg-linha dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mpg-linha--total { padding-bottom: 0.4rem; margin-bottom: 0.1rem; border-bottom: 1px solid var(--cfx-borda); }
.mpg-linha--total dt, .mpg-linha--total dd { font-weight: 700; }
.mpg-resumo-linhas .mpg-linha--total:last-child { padding: 0.4rem 0 0; margin: 0.1rem 0 0; border-top: 1px solid var(--cfx-borda); border-bottom: 0; }
.mpg-linha--troco dt, .mpg-linha--troco dd { color: var(--bs-success-text-emphasis); font-weight: 700; }
.mpg-linha--divida dt, .mpg-linha--divida dd { color: var(--bs-danger-text-emphasis); }

/* ---- Exportar para Contabilidade ---- */
.exp-aviso {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.45);
    border-radius: 1rem;
    background: rgba(var(--bs-warning-rgb), 0.08);
    font-size: 0.84rem;
}

.exp-aviso > .bi { font-size: 1.1rem; color: var(--bs-warning-text-emphasis); }
.exp-aviso p { margin: 0; }
.exp-aviso p + p { margin-top: 0.25rem; color: var(--cfx-texto-secundario); }
.exp-aviso-titulo { font-weight: 650; color: var(--cfx-texto); }

.exp-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.exp-opcoes--grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.exp-opcao {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.8rem;
    background: var(--painel-cartao, var(--cfx-superficie));
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.exp-opcao input { flex-shrink: 0; margin: 0; accent-color: var(--cfx-primaria); }
.exp-opcao .bi { font-size: 1.05rem; color: var(--cfx-texto-secundario); }
.exp-opcao:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.45); }
.exp-opcao:has(input:checked) { border-color: rgba(var(--cfx-primaria-rgb), 0.6); background: rgba(var(--cfx-primaria-rgb), 0.06); }
.exp-opcao:has(input:checked) .bi { color: var(--cfx-primaria); }
.exp-opcao:has(input:focus-visible) { box-shadow: var(--cfx-foco); }

/* ---- Assistente de IA ---- */
.ia-pagina { max-width: 880px; }

.ia-marca {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    background: rgba(var(--cfx-primaria-rgb), 0.12);
    color: var(--cfx-primaria);
    font-size: 1.2rem;
}

.ia-compositor {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: var(--painel-cartao, var(--cfx-superficie));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ia-compositor:focus-within { border-color: rgba(var(--cfx-primaria-rgb), 0.4); box-shadow: 0 8px 24px -18px rgba(var(--cfx-primaria-rgb), 0.7); }
.ia-compositor textarea { min-height: 4.5rem; padding: 0.25rem 0.35rem; border: 0; background: transparent; resize: vertical; box-shadow: none !important; }
.ia-compositor-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ia-compositor-dica { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--cfx-texto-secundario); }
.ia-compositor .btn { border-radius: 0.7rem; font-weight: 600; }
.ia-enviar-carregar { display: none; }
#ia-enviar.a-carregar .ia-enviar-texto { display: none; }
#ia-enviar.a-carregar .ia-enviar-carregar { display: inline; }

.ia-sugestoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.85rem 0 1.25rem; }
.ia-sugestoes-rotulo { font-size: 0.78rem; color: var(--cfx-texto-secundario); }

.ia-sugestao {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 999px;
    background: var(--painel-cartao, var(--cfx-superficie));
    color: var(--cfx-texto);
    font-size: 0.78rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ia-sugestao:hover,
.ia-sugestao:focus-visible { border-color: rgba(var(--cfx-primaria-rgb), 0.5); color: var(--cfx-primaria); outline: none; }

.ia-resposta {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(var(--cfx-primaria-rgb), 0.25);
    border-radius: 1rem;
    background: rgba(var(--cfx-primaria-rgb), 0.04);
}

.ia-resposta > header { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; font-size: 0.78rem; font-weight: 650; color: var(--cfx-primaria); text-transform: uppercase; letter-spacing: 0.03em; }
.ia-pagina .ia-resposta-texto { font-size: 0.92rem; line-height: 1.6; }
.ia-resposta-dados { margin-top: 0.85rem; }
.ia-resposta-dados summary { font-size: 0.8rem; color: var(--cfx-primaria); cursor: pointer; }
.ia-resposta-dados pre { max-height: 22rem; margin: 0.5rem 0 0; padding: 0.75rem; overflow: auto; border-radius: 0.6rem; background: var(--cfx-superficie-suave); font-size: 0.76rem; }

.ia-pagina .ia-historico-titulo { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.03em; color: var(--cfx-texto-secundario); text-transform: uppercase; }
.ia-historico { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.ia-historico li {
    padding: 0.85rem 1rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.9rem;
    background: var(--painel-cartao, var(--cfx-superficie));
}

.ia-historico-pergunta {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cfx-texto);
    font-weight: 600;
    text-align: left;
}

.ia-historico-pergunta .bi { margin-top: 0.15rem; color: var(--cfx-texto-secundario); }
.ia-historico-pergunta:hover { color: var(--cfx-primaria); }
.ia-pagina .ia-historico-resposta { margin: 0.35rem 0 0 1.5rem; font-size: 0.84rem; color: var(--cfx-texto-secundario); }
.ia-pagina .ia-historico-meta { margin: 0.35rem 0 0 1.5rem; font-size: 0.74rem; color: var(--cfx-texto-secundario); }

@media (max-width: 767.98px) {
    .exp-opcoes--grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mpc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .exp-opcoes,
    .exp-opcoes--grelha { grid-template-columns: minmax(0, 1fr); }
    .lst-pesquisa { flex-basis: 100%; }
}


/* ---- Páginas de uma turma: cabeçalho comum + separadores ---- */
.turma-cab { display: flex; flex-direction: column; gap: 0.5rem; }
.turma-cab-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--cfx-primaria); }
.turma-cab-linha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.turma-cab-linha > div:first-child { max-width: 68ch; }
.turma-cab-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.turma-nav {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.6rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--cfx-borda);
    scrollbar-width: none;
}

.turma-nav::-webkit-scrollbar { display: none; }

.turma-nav a {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: -1px;
    padding: 0.55rem 0.8rem;
    border-bottom: 2px solid transparent;
    color: var(--cfx-texto-secundario);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.turma-nav a:hover { color: var(--cfx-texto); }
.turma-nav a.ativo { border-bottom-color: var(--cfx-primaria); color: var(--cfx-primaria); font-weight: 600; }
.turma-nav a:focus-visible { outline: none; box-shadow: var(--cfx-foco); border-radius: 0.4rem; }

.pag-subtitulo { margin: 1.5rem 0 0.6rem; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.03em; color: var(--cfx-texto-secundario); text-transform: uppercase; }

.lst-estado--erro { background: rgba(var(--bs-danger-rgb), 0.1); color: var(--bs-danger-text-emphasis); }

/* ---- Avaliações ---- */
.aval-modulo-cab { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--cfx-borda); }
.aval-modulo-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 0.55rem; background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria); font-size: 0.8rem; font-weight: 700; }
body.pagina-painel .aval-modulo-nome { flex: 1 1 auto; margin: 0; font-size: 0.98rem; font-weight: 650; }
.aval-lista { margin: 0; padding: 0; list-style: none; }
.aval-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 1.15rem; border-bottom: 1px solid var(--cfx-borda); }
.aval-lista li:last-child { border-bottom: 0; }
.aval-nome { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 0.5rem; }
.aval-nome .bi { color: var(--cfx-texto-secundario); }
.aval-peso { font-size: 0.78rem; color: var(--cfx-texto-secundario); }
.aval-vazio { margin: 0; padding: 0.9rem 1.15rem; font-size: 0.84rem; color: var(--cfx-texto-secundario); }

/* ---- Mini-pauta ---- */
.mp-exportar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 0.85rem;
    background: var(--painel-cartao, var(--cfx-superficie));
}

.mp-exportar > .bi { color: var(--cfx-texto-secundario); }
.mp-exportar-rotulo { margin: 0; font-size: 0.84rem; color: var(--cfx-texto-secundario); }
.mp-exportar select { width: auto; min-width: 12rem; }

.mp-acoes {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--painel-cartao, var(--cfx-superficie)) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 24px -20px rgba(15, 23, 42, 0.45);
}

.mp-acoes-info { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--cfx-texto-secundario); }
.mp-acoes .btn { border-radius: 0.65rem; font-weight: 600; }

/* ---- Certificados da turma ---- */
.cert-lote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(var(--cfx-primaria-rgb), 0.25);
    border-radius: 1rem;
    background: rgba(var(--cfx-primaria-rgb), 0.04);
}

.cert-lote-icone { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; background: rgba(var(--cfx-primaria-rgb), 0.12); color: var(--cfx-primaria); font-size: 1.1rem; }
.cert-lote-texto { flex: 1 1 14rem; }
.cert-lote-campos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cert-lote-campos select { width: auto; min-width: 14rem; }
.cert-numero { margin-left: 0.4rem; font-size: 0.78rem; color: var(--cfx-texto-secundario); white-space: nowrap; }
.cert-motivos { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--bs-danger-text-emphasis); }
.cert-modelo select { width: auto; max-width: 12rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.8rem; }

/* ---- Ranking ---- */
.rk-posicao { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-posicao--1 { color: #B7791F; }
.rk-posicao--2 { color: #6B7280; }
.rk-posicao--3 { color: #9A5B2E; }
[data-bs-theme="dark"] .rk-posicao--1 { color: #F6C453; }
[data-bs-theme="dark"] .rk-posicao--2 { color: #C7CBD3; }
[data-bs-theme="dark"] .rk-posicao--3 { color: #D9925B; }

.rk-merito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding: 0.9rem 1.15rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: var(--painel-cartao, var(--cfx-superficie));
}

.rk-merito-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; background: rgba(183, 121, 31, 0.12); color: #B7791F; font-size: 1.05rem; }
.rk-historico { margin: 0; padding: 0; list-style: none; }
.rk-historico li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.15rem; border-bottom: 1px solid var(--cfx-borda); font-size: 0.86rem; }
.rk-historico li:last-child { border-bottom: 0; }
.rk-historico .bi { margin-right: 0.45rem; color: var(--cfx-texto-secundario); }

/* ---- Relatórios de fim de ciclo ---- */
.rel-gerar-carregar { display: none; }
#botao-gerar-relatorio.a-carregar .rel-gerar-texto { display: none; }
#botao-gerar-relatorio.a-carregar .rel-gerar-carregar { display: inline; }

.rel-cartao { padding: 1rem 1.15rem; border: 1px solid var(--cfx-borda); border-radius: 1rem; background: var(--painel-cartao, var(--cfx-superficie)); }
.rel-cartao-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.rel-cartao-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria); }
.rel-cartao-titulo { margin: 0; font-weight: 650; }
.rel-cartao-meta { margin: 0; font-size: 0.78rem; color: var(--cfx-texto-secundario); }
.rel-cartao-acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.rel-cartao-texto { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--cfx-borda); font-size: 0.86rem; line-height: 1.55; color: var(--cfx-texto-secundario); }

/* ---- Logs de Auditoria ---- */
.log-filtros { margin-bottom: 1rem; padding: 1rem 1.15rem; }
.log-filtros-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 0.75rem; align-items: end; }
.log-filtros .form-label { font-size: 0.8rem; }
.log-filtros-botoes { display: flex; gap: 0.5rem; }
.log-acao { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(var(--cfx-primaria-rgb), 0.08); color: var(--cfx-texto); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.log-detalhe { min-width: 16rem; font-size: 0.86rem; }
.log-alteracao { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--cfx-texto-secundario); font-variant-numeric: tabular-nums; }
.log-motivo { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--cfx-texto-secundario); font-style: italic; }
.log-paginacao { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }

/* ---- Cargos ---- */
.cargo-matriz { border: 1px solid var(--cfx-borda); border-radius: 0.85rem; }
.cargo-matriz .table { --bs-table-bg: transparent; }
.cargo-matriz .table th:first-child, .cargo-matriz .table td:first-child { padding-left: 1rem; }
.cargo-coluna { padding: 0.15rem 0.5rem; border: 1px dashed transparent; border-radius: 0.45rem; background: none; color: var(--cfx-texto); font-size: 0.78rem; font-weight: 650; }
.cargo-coluna:hover, .cargo-coluna:focus-visible { border-color: rgba(var(--cfx-primaria-rgb), 0.5); color: var(--cfx-primaria); outline: none; }

/* ---- Comunicado Geral ---- */
.com-contador { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--cfx-texto-secundario); }
.com-contador .bi { margin-right: 0.3rem; }
.com-estados { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.com-estado { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; border: 1px solid var(--cfx-borda); border-radius: 999px; font-size: 0.82rem; cursor: pointer; }
.com-estado input { margin: 0; accent-color: var(--cfx-primaria); }
.com-estado:has(input:checked) { border-color: rgba(var(--cfx-primaria-rgb), 0.6); background: rgba(var(--cfx-primaria-rgb), 0.06); }

/* ---- Workshop: adicionar / emitir rápido, escolha de participantes ---- */
.ws-adicionar { margin-bottom: 1rem; padding: 1.1rem 1.2rem 1.25rem; border: 1px solid var(--cfx-borda); border-radius: 1rem; background: var(--painel-cartao, var(--cfx-superficie)); }
.ws-adicionar-cab { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--cfx-borda); }
body.pagina-painel .ws-adicionar-titulo { margin: 0; font-size: 0.98rem; font-weight: 650; }
.ws-adicionar .form-label { font-size: 0.84rem; font-weight: 500; }
.ws-filtro { width: auto; min-width: 11rem; }

.ws-escolha { border: 1px solid var(--cfx-borda); border-radius: 0.85rem; }
.ws-escolha-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--cfx-borda); }
.ws-escolha-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.75rem; max-height: 18rem; padding: 0.5rem 0.6rem; overflow-y: auto; }
.ws-escolha-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 0.5rem; font-size: 0.84rem; cursor: pointer; }
.ws-escolha-item:hover { background: var(--cfx-superficie-suave); }
.ws-escolha-item input { flex-shrink: 0; margin: 0; accent-color: var(--cfx-primaria); }

@media (max-width: 991.98px) {
    .log-filtros-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .log-filtros-botoes { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .log-filtros-campos { grid-template-columns: minmax(0, 1fr); }
    .ws-escolha-lista { grid-template-columns: minmax(0, 1fr); }
    .cert-lote-campos, .cert-lote-campos select, .mp-exportar select { width: 100%; }
    .rel-cartao-acoes { margin-left: 0; }
}

.lst-acoes { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.35rem; }

/* ---- Formulário simples: cartão de resumo do que se está a alterar ---- */
.fs-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem 1.25rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid var(--cfx-borda);
    border-radius: 1rem;
    background: var(--cfx-superficie-suave);
}

.fs-resumo > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fs-resumo span { font-size: 0.74rem; color: var(--cfx-texto-secundario); text-transform: uppercase; letter-spacing: 0.03em; }
.fs-resumo strong { overflow-wrap: anywhere; font-weight: 600; }
.fs-resumo-destaque { color: var(--cfx-primaria); font-variant-numeric: tabular-nums; }

.form-sec input[type="color"].form-control { width: 4.5rem; height: 2.4rem; padding: 0.2rem; cursor: pointer; }

/* =====================================================================
   Super Administrador e INEFOP: filtros, fichas e password gerada
   ===================================================================== */
.lst-estado--aviso { background: rgba(var(--bs-warning-rgb), 0.16); color: var(--bs-warning-text-emphasis); }

/* Filtros com qualquer número de campos: cada um cresce até ocupar a linha. */
.flt-cartao { margin-bottom: 1rem; padding: 1rem 1.15rem; }
.flt-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.flt-campos > div { flex: 1 1 11rem; min-width: 0; }
.flt-campos > .flt-botoes { display: flex; flex: 0 0 auto; gap: 0.5rem; }
.flt-cartao .form-label { font-size: 0.8rem; }

/* Ficha de consulta: pares rótulo/valor em grelha. */
.fch-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.fch-dados > div { padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--cfx-borda); }
.fch-dados > div:nth-child(odd) { border-right: 1px solid var(--cfx-borda); }
.fch-dados dt { margin-bottom: 0.15rem; font-size: 0.74rem; font-weight: 500; color: var(--cfx-texto-secundario); text-transform: uppercase; letter-spacing: 0.03em; }
.fch-dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .fch-dados { grid-template-columns: minmax(0, 1fr); }
    .fch-dados > div:nth-child(odd) { border-right: 0; }
}

/* Password gerada: mostrada uma única vez, com botão para copiar. */
.pwd-cartao { padding: 1.5rem; border: 1px solid var(--cfx-borda); border-radius: 1rem; background: var(--painel-cartao, var(--cfx-superficie)); }
.pwd-pessoa { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
.pwd-valor { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.9rem; border: 1px dashed rgba(var(--cfx-primaria-rgb), 0.5); border-radius: 0.75rem; background: rgba(var(--cfx-primaria-rgb), 0.05); }
.pwd-valor code { flex: 1 1 auto; min-width: 0; color: var(--cfx-texto); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; }

/* Painel do Super Administrador: barra de uso (WhatsApp). */
.sa-uso { height: 0.5rem; border-radius: 999px; }

/* Escolha única (RadioSelect do Django) nos formulários em secções: pílulas. */
.form-sec div:has(> div > label > input[type="radio"]) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form-sec div > div > label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border: 1px solid var(--cfx-borda); border-radius: 999px; font-size: 0.88rem; cursor: pointer; }
.form-sec label:has(> input[type="radio"]) input { margin: 0; accent-color: var(--cfx-primaria); }
.form-sec label:has(> input[type="radio"]:checked) { border-color: rgba(var(--cfx-primaria-rgb), 0.6); background: rgba(var(--cfx-primaria-rgb), 0.06); font-weight: 600; }

/* Ficha em lista simples: rótulo à esquerda, valor à direita (resumos). */
.fch-dados--lista { grid-template-columns: minmax(0, 1fr); }
.fch-dados--lista > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 1.15rem; border-right: 0 !important; }
.fch-dados--lista > div:last-child { border-bottom: 0; }
.fch-dados--lista dt { margin: 0; color: var(--cfx-texto); font-size: 0.88rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.fch-dados--lista dd { font-variant-numeric: tabular-nums; }

/* Modelos oficiais (Super Administrador) */
h2.mo-seccao { display: flex; align-items: center; gap: 0.6rem; margin: 2rem 0 0.9rem; font-size: 1.02rem; font-weight: 650; }
.mo-miniatura { border-bottom: 1px solid var(--cfx-borda); background: var(--cfx-superficie-suave); }
.mo-cartao { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.mo-cartao:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.45); box-shadow: 0 8px 20px -14px rgba(var(--cfx-primaria-rgb), 0.7); }

/* Nos formulários em secções o asterisco de obrigatório já vem do padrão. */
.form-sec .campo-obrigatorio { display: none; }

/* =====================================================================
   Confirmação de ações em massa (templates/painel_confirmar.html)
   ===================================================================== */
.cnf-cartao { padding: 1.5rem; border: 1px solid var(--cfx-borda); border-radius: 1rem; background: var(--painel-cartao, var(--cfx-superficie)); }
.cnf-destaque { display: flex; align-items: center; gap: 1rem; }
.cnf-icone { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 0.9rem; background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria); font-size: 1.4rem; }
.cnf-icone--perigo { background: rgba(var(--bs-danger-rgb), 0.1); color: var(--bs-danger); }
.cnf-icone--teste { background: rgba(var(--bs-info-rgb), 0.12); color: var(--bs-info-text-emphasis); }
.cnf-numero { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cnf-numero-rotulo { margin: 0; font-size: 0.85rem; color: var(--cfx-texto-secundario); }
.cnf-pergunta { margin: 1.1rem 0 0; font-size: 0.95rem; }
.cnf-bloco { margin-top: 1rem; }
.cnf-bloco-rotulo { margin: 0 0 0.35rem; font-size: 0.74rem; font-weight: 500; color: var(--cfx-texto-secundario); text-transform: uppercase; letter-spacing: 0.03em; }
.cnf-mensagem { margin: 0; padding: 0.85rem 1rem; border-radius: 0.2rem 0.9rem 0.9rem 0.9rem; background: var(--cfx-superficie-suave); white-space: pre-wrap; overflow-wrap: anywhere; }
.cnf-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--cfx-borda); }
@media (max-width: 575.98px) { .cnf-acoes > * { flex: 1 1 auto; } }
.cnf-numero { overflow-wrap: anywhere; }

/* Chamada */
.chm-vistas { gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--cfx-borda); border-radius: 0.75rem; }
.chm-vistas .nav-link { padding: 0.4rem 0.8rem; border-radius: 0.55rem; font-size: 0.85rem; }
.chm-estado .btn { white-space: nowrap; }
.dash-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .dash-kpis--3 { grid-template-columns: minmax(0, 1fr); } }

/* Ficha do formando */
.fd-foto { width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.fd-foto--vazia { display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria); font-size: 1.5rem; }
.fd-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-colunas > div { padding: 1rem 1.15rem; }
.fd-colunas > div + div { border-left: 1px solid var(--cfx-borda); }
.fd-grande { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
    .fd-colunas { grid-template-columns: minmax(0, 1fr); }
    .fd-colunas > div + div { border-left: 0; border-top: 1px solid var(--cfx-borda); }
}

/* Ficha do candidato: observações e linha do tempo */
.cd-nota { padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: var(--cfx-superficie-suave); }
.cd-linha { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding-left: 1.1rem; border-left: 2px solid var(--cfx-borda); }
.cd-linha .cd-nota { position: relative; background: none; padding: 0; }
.cd-linha .cd-nota::before { content: ""; position: absolute; top: 0.4rem; left: -1.47rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cfx-primaria); box-shadow: 0 0 0 3px var(--painel-cartao, var(--cfx-superficie)); }

/* Balanço por ciclo: detalhe em acordeão */
.bc-resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1rem; padding: 0.85rem 1.15rem; cursor: pointer; list-style: none; }
.bc-resumo::-webkit-details-marker { display: none; }
.bc-resumo > .fw-semibold, .bc-resumo > .fw-medium { flex: 1 1 auto; }
.bc-resumo > .fw-semibold::before, .bc-resumo > .fw-medium::before { content: "\203A"; display: inline-block; width: 1rem; color: var(--cfx-texto-secundario); transition: transform 0.15s ease; }
details[open] > .bc-resumo > .fw-semibold::before, details[open] > .bc-resumo > .fw-medium::before { transform: rotate(90deg); }
.bc-metricas { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bc-metricas > span { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--cfx-superficie-suave); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.bc-cursos { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1.15rem 1.15rem; }
.bc-curso { border: 1px solid var(--cfx-borda); border-radius: 0.75rem; }
.bc-curso .table-responsive { padding: 0 0.75rem 0.75rem; }