/* =====================================================================
   OKUTANGA — Folha de estilos do núcleo

   "Okutanga", em umbundu, significa contar e ler — os dois actos que
   fundam uma escola. Esta folha de estilos parte daí: a instituição
   feita sistema é, no fundo, um caderno pautado tornado digital —
   pautas, matrículas, boletins, tudo com o seu carimbo. A paleta vem
   da tinta e do selo, não de uma paleta de SaaS genérica; a tipografia
   junta um serifado com carácter a um grotesco discreto e denso o
   suficiente para tabelas cheias de números.
   ===================================================================== */

:root {
    /* Tinta — a cor de fundo da instituição, não um azul-marinho qualquer */
    --siga-ink-950: #131e17;
    --siga-ink-900: #1c2a20;
    --siga-ink-800: #24352a;
    --siga-ink-700: #2c4030;
    --siga-ink-100: #e8ece6;

    /* Selo e pauta — os dois acentos, tirados do carimbo e do dourado envelhecido */
    --siga-selo-600: #8f3226;
    --siga-selo-500: #a13a2e;
    --siga-pauta-600: #a3762f;
    --siga-pauta-500: #b9863a;
    --siga-pauta-400: #cc9c52;

    /* mantidos por compatibilidade com nomes antigos ainda referenciados nas views */
    --siga-navy-950: var(--siga-ink-950);
    --siga-navy-900: var(--siga-ink-900);
    --siga-navy-800: var(--siga-ink-700);
    --siga-navy-100: var(--siga-ink-100);
    --siga-gold-500: var(--siga-pauta-500);
    --siga-gold-400: var(--siga-pauta-400);

    --siga-bg: #eef0e9;
    --siga-surface: #fdfdfb;
    --siga-surface-sunken: #f4f5f0;
    --siga-text: #20241d;
    --siga-text-muted: #5c6357;
    --siga-border: #dde1d6;

    --siga-success: #3c6b46;
    --siga-danger: #a13a2e;
    --siga-warning: #96692a;
    --siga-info: #45607a;

    --siga-radius-sm: 6px;
    --siga-radius: 10px;
    --siga-radius-lg: 16px;
    --siga-shadow-sm: 0 1px 2px rgba(28, 42, 32, 0.06);
    --siga-shadow: 0 6px 20px rgba(28, 42, 32, 0.08);
    --siga-shadow-lg: 0 24px 60px rgba(19, 30, 23, 0.35);

    --siga-font-display: 'Fraunces', 'Georgia', serif;
    --siga-font-body: 'Work Sans', 'Segoe UI', sans-serif;
    --siga-font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

    /* Bootstrap 5 lê estas variáveis directamente — isto dá a toda a componente nativa
       (botões, alertas, badges text-bg-*, focus rings, links) a paleta da OKUTANGA sem
       precisar de tocar em nenhuma das centenas de vistas que já usam essas classes. */
    --bs-primary: var(--siga-ink-900);
    --bs-primary-rgb: 28, 42, 32;
    --bs-secondary: #746b5c;
    --bs-secondary-rgb: 116, 107, 92;
    --bs-success: var(--siga-success);
    --bs-success-rgb: 60, 107, 70;
    --bs-danger: var(--siga-danger);
    --bs-danger-rgb: 161, 58, 46;
    --bs-warning: var(--siga-warning);
    --bs-warning-rgb: 150, 105, 42;
    --bs-info: var(--siga-info);
    --bs-info-rgb: 69, 96, 122;
    --bs-body-color: var(--siga-text);
    --bs-body-bg: var(--siga-bg);
    --bs-border-color: var(--siga-border);
    --bs-border-radius: var(--siga-radius);
    --bs-border-radius-sm: var(--siga-radius-sm);
    --bs-border-radius-lg: var(--siga-radius-lg);
    --bs-link-color: var(--siga-ink-900);
    --bs-link-color-rgb: 28, 42, 32;
    --bs-link-hover-color: var(--siga-selo-500);
    --bs-link-hover-color-rgb: 161, 58, 46;
    --bs-focus-ring-color: rgba(185, 134, 58, 0.35);
    --bs-body-font-family: var(--siga-font-body);
}

[data-theme="dark"] {
    --siga-bg: #10160f;
    --siga-surface: #182019;
    --siga-surface-sunken: #131a12;
    --siga-text: #e7ece3;
    --siga-text-muted: #a1a99a;
    --siga-border: #2a352a;
    --siga-ink-100: #1e2a1f;
    --bs-body-color: var(--siga-text);
    --bs-body-bg: var(--siga-bg);
    --bs-border-color: var(--siga-border);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--siga-font-body);
    background-color: var(--siga-bg);
    color: var(--siga-text);
}

h1, h2, h3, .siga-brand {
    font-family: var(--siga-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h4, h5, h6 { font-family: var(--siga-font-body); font-weight: 700; }

code, .siga-mono { font-family: var(--siga-font-mono); }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Foco de teclado sempre visível — nunca só a cor por trás de um botão a mudar */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--siga-pauta-500);
    outline-offset: 2px;
}

/* ---------- Layout: barra lateral + topo ---------- */

.siga-shell { display: flex; min-height: 100vh; }

.siga-sidebar {
    width: 268px;
    flex-shrink: 0;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.028) 0, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 34px),
        linear-gradient(175deg, var(--siga-ink-900), var(--siga-ink-950) 78%);
    color: #eef1ea;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    z-index: 1030;
    transition: transform 0.2s ease;
}

.siga-sidebar .siga-brand {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 1.35rem 1.25rem 1.1rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
}
.siga-brand .badge-mark {
    background: var(--siga-pauta-500);
    color: var(--siga-ink-950);
    width: 36px; height: 36px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--siga-font-display);
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgba(19, 30, 23, 0.25);
}

.siga-nav-section {
    padding: 1rem 1.25rem 0.4rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8a9686;
    font-weight: 600;
}

.siga-main { margin-left: 268px; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.siga-topbar {
    background: var(--siga-surface);
    border-bottom: 1px solid var(--siga-border);
    padding: 0.75rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1020;
    min-height: 56px;
}

.siga-content { padding: 1.5rem; flex: 1; }

.siga-sidebar-toggle { display: none; }

/* Tap target mínimo de 44px em mobile para o botão do menu */
@media (max-width: 991.98px) {
    .siga-sidebar-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        font-size: 1.25rem;
    }
}



.siga-sidebar-close {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.siga-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(19, 30, 23, 0.5);
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .siga-sidebar { transform: translateX(-100%); z-index: 1040; }
    .siga-sidebar.open { transform: translateX(0); }
    .siga-sidebar.open .siga-sidebar-close { display: flex; }
    .siga-sidebar.open ~ .siga-sidebar-backdrop,
    .siga-sidebar-backdrop.open { display: block; }
    .siga-main { margin-left: 0; }
    /* toggle visibility handled by the dedicated block above */
}

/* ---------- Componentes ---------- */

.siga-card {
    background: var(--siga-surface);
    border: 1px solid var(--siga-border);
    border-radius: var(--siga-radius);
    box-shadow: var(--siga-shadow-sm);
}

.siga-kpi {
    background: var(--siga-surface);
    border: 1px solid var(--siga-border);
    border-radius: var(--siga-radius);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--siga-shadow-sm);
}
.siga-kpi .siga-kpi-value { font-family: var(--siga-font-display); font-size: 1.75rem; font-weight: 600; }
.siga-kpi .siga-kpi-label { color: var(--siga-text-muted); font-size: 0.8rem; }

.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--siga-text-muted);
    font-weight: 600;
    border-bottom-width: 1px;
    background: var(--siga-surface-sunken);
}
.table > :not(caption) > * > * { background-color: transparent; }

.btn { font-weight: 500; }
.btn-siga-primary {
    background-color: var(--siga-ink-900);
    border-color: var(--siga-ink-900);
    color: #fff;
}
.btn-siga-primary:hover, .btn-siga-primary:focus {
    background-color: var(--siga-ink-700);
    border-color: var(--siga-ink-700);
    color: #fff;
}

.btn-siga-gold {
    background-color: var(--siga-pauta-500);
    border-color: var(--siga-pauta-500);
    color: var(--siga-ink-950);
    font-weight: 600;
}
.btn-siga-gold:hover, .btn-siga-gold:focus {
    background-color: var(--siga-pauta-400);
    border-color: var(--siga-pauta-400);
    color: var(--siga-ink-950);
}

.siga-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--siga-text-muted);
}

.siga-guest {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 36px),
        radial-gradient(circle at top left, var(--siga-ink-700), var(--siga-ink-950) 65%);
    padding: 1.5rem;
}
.siga-guest-card {
    background: var(--siga-surface);
    border-radius: var(--siga-radius-lg);
    padding: 2.25rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--siga-shadow-lg);
}

/* Selo — o elemento de assinatura desta interface. Cada documento oficial que a OKUTANGA
   emite já leva um carimbo ("autenticado com o carimbo em uso nesta Instituição"); os
   estados aqui pegam nessa mesma ideia — um selo de aprovação, não uma pastilha qualquer. */
.siga-badge-status-active,
.siga-badge-status-trial,
.siga-badge-status-suspended,
.siga-badge-status-inactive {
    display: inline-flex;
    align-items: center;
    font-family: var(--siga-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.28em 0.75em;
    border-radius: 999px;
    transform: rotate(-1.5deg);
    box-shadow: inset 0 0 0 1px currentColor;
}
.siga-badge-status-active { background: rgba(60,107,70,0.1); color: var(--siga-success); }
.siga-badge-status-trial { background: rgba(150,105,42,0.1); color: var(--siga-warning); }
.siga-badge-status-suspended,
.siga-badge-status-inactive { background: rgba(161,58,46,0.1); color: var(--siga-danger); }

/* Mapa esquemático interactivo das províncias (Landing Page) */
.siga-province-tile {
    transition: transform .15s ease, filter .15s ease;
}
.siga-province-tile:hover {
    transform: scale(1.06);
    filter: brightness(1.1);
}

/* ══════════════════════════════════════════════════════════════════
 * IMPRESSÃO UNIVERSAL — aplica-se a QUALQUER página da plataforma
 * quando o utilizador usa Ctrl+P ou o botão "Imprimir" de cada módulo.
 * ══════════════════════════════════════════════════════════════════ */
@media print {
    /* Oculta elementos de UI */
    .siga-sidebar,
    .siga-topbar,
    .siga-sidebar-close,
    .no-print,
    .btn:not(.btn-print-keep),
    nav,
    [data-bs-toggle],
    .siga-nav,
    .siga-brand,
    #sigaNav,
    #sigaSidebar,
    form.filter-form,
    .pagination { display: none !important; }

    /* Remove a sidebar e expande o conteúdo */
    .siga-layout  { display: block !important; }
    .siga-main    { margin-left: 0 !important; width: 100% !important; }
    .siga-content { padding: .5rem 0 !important; }

    body  { background: #fff !important; font-size: 11pt; color: #000; }

    /* Cabeçalho de impressão — instituição + título da página */
    .print-page-header { display: flex !important; }

    /* Tabelas */
    table { border-collapse: collapse; width: 100%; font-size: 10pt; }
    thead { display: table-header-group; }
    tr    { page-break-inside: avoid; }
    th, td { border: 1px solid #ccc !important; padding: .3rem .5rem !important; }
    thead th { background: #1c2a20 !important; color: #fff !important;
               -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Cards e KPIs ficam visíveis */
    .siga-card { box-shadow: none !important; border: 1px solid #ddd !important; }
    .siga-kpi  { break-inside: avoid; }

    /* Badges e cores */
    .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .text-muted { color: #444 !important; }

    /* Última folha — não inserir saltos desnecessários */
    .page-break-before { page-break-before: always; }
    .page-break-avoid  { page-break-inside: avoid; }
}

/* ── Cabeçalho de impressão (oculto no ecrã, visível ao imprimir) ── */
.print-page-header {
    display: none;
    align-items: center;
    gap: .8rem;
    padding-bottom: .6rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #1c2a20;
}
.print-page-header img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; }
.print-page-header .phi-inst  { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #555; }
.print-page-header .phi-title { font-size: 1.05rem; font-weight: 700; color: #1c2a20; line-height: 1.2; }
.print-page-header .phi-date  { font-size: .75rem; color: #666; margin-top: .1rem; }

/* ── Botão "Imprimir página" — aparece nos filtros/topo das listagens ── */
.btn-print-page {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .32rem .75rem;
    font-size: .82rem; font-weight: 500;
    border: 1.5px solid #8aa0bc;
    border-radius: 6px;
    background: transparent;
    color: #5a78a0;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-decoration: none;
}
.btn-print-page:hover { background: #1c2a20; color: #f5c842; border-color: #1c2a20; }

/* ══════════════════════════════════════════════════════════════════
 * RESPONSIVIDADE GLOBAL — correctivos universais para todos os módulos
 * Breakpoints Bootstrap: sm≥576 md≥768 lg≥992 xl≥1200
 * ══════════════════════════════════════════════════════════════════ */

/* ── Formulários: max-width em desktop mas 100% em mobile ─────── */
@media (max-width: 575.98px) {
    /* Contentor de formulário com max-width fixo */
    [style*="max-width:560px"],
    [style*="max-width: 560px"],
    [style*="max-width:640px"],
    [style*="max-width: 640px"],
    [style*="max-width:680px"],
    [style*="max-width: 680px"],
    [style*="max-width:720px"],
    [style*="max-width: 720px"],
    [style*="max-width:760px"],
    [style*="max-width: 760px"],
    [style*="max-width:480px"],
    [style*="max-width: 480px"],
    [style*="max-width:520px"],
    [style*="max-width: 520px"],
    [style*="max-width:600px"],
    [style*="max-width: 600px"],
    [style*="max-width:620px"],
    [style*="max-width: 620px"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* KPIs em mobile: 2 colunas */
    .row > [class*="col-lg-2"],
    .row > [class*="col-lg-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Tabelas: scroll horizontal */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Botões de acção em mobile: largura total */
    .btn-group-mobile .btn { width: 100%; margin-bottom: .25rem; }

    /* Topbar: comprimir */
    .siga-topbar { padding: .5rem .75rem; }

    /* Ocultar texto em botões de ícone */
    .btn-icon-only-sm .btn-text { display: none; }

    /* Cards de dados: padding menor */
    .siga-card { border-radius: 8px; }
    .siga-kpi  { padding: .75rem 1rem; }
    .siga-kpi-value { font-size: 1.3rem; }

    /* Grelha de listagem em mobile */
    .siga-content { padding: 1rem .75rem; }
}

@media (max-width: 767.98px) {
    /* Formulários em tablet: ainda 100% */
    [style*="max-width:760px"],
    [style*="max-width: 760px"],
    [style*="max-width:720px"],
    [style*="max-width: 720px"] {
        max-width: 100% !important;
    }

    /* Separar botões do cabeçalho */
    .page-actions { flex-direction: column; align-items: stretch !important; }
    .page-actions .btn { width: 100%; }

    /* Pauta e grelhas complexas: scroll */
    .table-responsive { border-radius: 8px; }

    /* KPIs: 2 colunas no tablet */
    .row > .col-lg-2 { min-width: 150px; }

    /* Barra lateral oculta */
    .siga-sidebar { transform: translateX(-100%); }
    .siga-main    { margin-left: 0 !important; }
}

/* ── Tabelas com muitas colunas: fonte menor em mobile ─────────── */
@media (max-width: 767.98px) {
    .siga-table-sm td,
    .siga-table-sm th { font-size: .78rem; padding: .3rem .4rem !important; }
}

/* ── Formulários: labels e inputs sempre legíveis ──────────────── */
@media (max-width: 575.98px) {
    .form-label { font-size: .9rem; margin-bottom: .25rem; }
    .form-control, .form-select { font-size: .95rem; padding: .5rem .75rem; }
    .form-control-sm { font-size: .85rem; }
}

/* ── Topbar: nome de utilizador oculto em telas muito pequenas ─── */
@media (max-width: 400px) {
    .siga-topbar-username { display: none !important; }
    .siga-brand span:not(.badge-mark) { display: none; }
}

/* ── Paginação: botões mais pequenos em mobile ──────────────────── */
@media (max-width: 575.98px) {
    .pagination .page-link { padding: .35rem .55rem; font-size: .82rem; }
}

/* ── Modal em mobile: largura total ─────────────────────────────── */
@media (max-width: 575.98px) {
    .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
}

/* ── Sidebar overlay em mobile ──────────────────────────────────── */
/* mobile sidebar handled in responsive block below */

/* ── Contentor de página: padding seguro em mobile ──────────────── */
@media (max-width: 575.98px) {
    .siga-content { padding: .75rem .5rem !important; }
    .siga-card.p-4 { padding: 1rem !important; }
    .siga-card.p-3 { padding: .75rem !important; }
}

/* ── Texto de cabeçalho de página ──────────────────────────────── */
@media (max-width: 575.98px) {
    .h4 { font-size: 1.1rem; }
    .h5 { font-size: 1rem; }
    .h6 { font-size: .92rem; }
}

/* ── Botões de filtragem em mobile: scroll horizontal ──────────── */
@media (max-width: 767.98px) {
    .filter-pills { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: .25rem; }
    .filter-pills::-webkit-scrollbar { height: 3px; }
    .filter-pills::-webkit-scrollbar-thumb { background: #8aa0bc; border-radius: 2px; }
}

/* ── Cartões do portal: 1 coluna em mobile ──────────────────────── */
@media (max-width: 575.98px) {
    .portal-card-grid .col-md-4,
    .portal-card-grid .col-lg-4,
    .portal-card-grid .col-md-6 { flex: 0 0 100%; max-width: 100%; }
}

/* ── Imagens responsivas por omissão ───────────────────────────── */
img:not([class*="rounded"]):not([class*="avatar"]):not([style*="width"]) {
    max-width: 100%;
    height: auto;
}

/* ══════════════════════════════════════════════════════════════════
 * MENU ACORDEÃO — Sessões colapsáveis, itens ocultos por defeito
 * ══════════════════════════════════════════════════════════════════ */

/* ── Link único Dashboard (fora do acordeão) ── */
.siga-nav .nav-dash-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1.25rem;
    color: #c4d4bf;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .14s, color .14s;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 2px;
}
.siga-nav .nav-dash-link i { font-size: 1.1rem; flex-shrink: 0; }
.siga-nav .nav-dash-link:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
    border-left-color: rgba(255,255,255,.2);
}
.siga-nav .nav-dash-link.is-active {
    background: rgba(185,134,58,.18);
    color: #f5c842;
    font-weight: 600;
    border-left-color: #b9863a;
}

/* ── Botão de secção (cabeçalho clicável) ── */
.nav-group-btn {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: .7rem 1.25rem .7rem .85rem;
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #7a9476;
    background: transparent;
    border-top: 1px solid rgba(255,255,255,.06);
    transition: background .14s, color .14s;
    position: relative;
    user-select: none;
}
/* Linha indicadora à esquerda — oculta por defeito */
.nav-group-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: transparent;
    transition: background .14s;
}
.nav-group-btn:hover {
    background: rgba(255,255,255,.05);
    color: #b8ceb4;
}
.nav-group-btn:hover::before { background: rgba(185,134,58,.35); }

/* Estado: secção aberta */
.nav-group-btn.is-open {
    background: rgba(255,255,255,.04);
    color: #d4e4cf;
}
.nav-group-btn.is-open::before { background: rgba(185,134,58,.5); }

/* Estado: secção contém link activo */
.nav-group-btn.has-active { color: #f5c842; }
.nav-group-btn.has-active::before { background: #b9863a; }
.nav-group-btn.is-open.has-active { background: rgba(185,134,58,.08); }

/* Ícone e texto */
.nav-group-btn .ngb-left {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
}
.nav-group-btn .ngb-left i {
    font-size: 1rem;
    flex-shrink: 0;
    opacity: .75;
    transition: opacity .14s;
}
.nav-group-btn:hover .ngb-left i,
.nav-group-btn.is-open .ngb-left i { opacity: 1; }
.nav-group-btn.has-active .ngb-left i { opacity: 1; color: #f5c842; }

/* Seta giratória */
.nav-group-btn .ngb-arrow {
    font-size: .65rem;
    opacity: .45;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform .22s ease, opacity .14s;
}
.nav-group-btn:hover .ngb-arrow { opacity: .7; }
.nav-group-btn.is-open .ngb-arrow {
    transform: rotate(180deg);
    opacity: .8;
}

/* ── Lista de itens — OCULTA por defeito ── */
.nav-sub {
    list-style: none;
    margin: 0;
    padding: 2px 0 4px;
    background: rgba(0,0,0,.14);
    display: none;           /* ← OCULTO até .is-open ser adicionado */
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

/* Quando a secção é aberta por JS */
.nav-sub.is-open {
    display: block;
    animation: navSubSlideIn .18s ease-out;
}

@keyframes navSubSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Itens individuais ── */
.nav-sub li a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .68rem 1.25rem .68rem 2.35rem;
    color: #9abf95;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 400;
    border-left: 3px solid transparent;
    transition: background .1s, color .1s, border-color .1s;
    position: relative;
}

/* Ponto decorativo */
.nav-sub li a::before {
    content: '';
    position: absolute;
    left: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(154,175,149,.3);
    transition: background .1s, transform .1s;
}

.nav-sub li a i {
    font-size: .9rem;
    opacity: .65;
    flex-shrink: 0;
    transition: opacity .1s;
}

.nav-sub li a:hover {
    background: rgba(255,255,255,.055);
    color: #d8e8d4;
    border-left-color: rgba(185,134,58,.3);
}
.nav-sub li a:hover::before { background: rgba(185,134,58,.6); transform: translateY(-50%) scale(1.3); }
.nav-sub li a:hover i { opacity: .9; }

/* Item activo */
.nav-sub li a.is-active {
    background: rgba(185,134,58,.14);
    color: #f5c842;
    font-weight: 600;
    border-left-color: #b9863a;
}
.nav-sub li a.is-active::before { background: #b9863a; }
.nav-sub li a.is-active i { opacity: 1; color: #f5c842; }