/* ============================================================
   SGLA — Portal Ambiental de Moçambique
   Custom Stylesheet — Limpo, Profissional, Responsivo
   ============================================================ */

/* ── Variáveis MAAP — Paleta Oficial Completa (3 Famílias) ─── */
:root {
    /* ── VERDE (Ambiente) — Família Principal ─────────────────── */
    --verde-50:   #DAEAC5;
    --verde-100:  #B8D99A;
    --verde-200:  #8FC96B;
    --verde-300:  #75A636;
    --verde-400:  #5B8C20;
    --verde-500:  #45752E;
    --verde-700:  #2E5A1A;
    --verde-900:  #24571A;

    /* ── CASTANHO (Terra) — Família Secundária ─────────────────── */
    --terra-50:   #F8F0E5;
    --terra-100:  #EDD8B8;
    --terra-200:  #D4A97A;
    --terra-300:  #B87B42;
    --terra-400:  #956030;
    --terra-500:  #7A4E26;
    --terra-700:  #5E3A18;
    --terra-900:  #60413;  /* ~#604132 */

    /* ── AZUL (Pescas) — Família Terciária ────────────────────── */
    --azul-50:   #E2F0F6;
    --azul-100:  #A8D8EC;
    --azul-200:  #55AEDD;
    --azul-300:  #2090C8;
    --azul-400:  #1070A8;
    --azul-500:  #085090;
    --azul-700:  #053572;
    --azul-900:  #021A50;

    /* ── Aliases funcionais ────────────────────────────────────── */
    --green-dark:   var(--verde-900);
    --green:        var(--verde-500);
    --green-mid:    var(--verde-400);
    --green-light:  var(--verde-300);
    --green-pale:   var(--verde-50);

    --brown-dark:   var(--terra-700);
    --brown:        var(--terra-500);
    --brown-mid:    var(--terra-400);
    --brown-light:  var(--terra-300);
    --brown-pale:   var(--terra-50);

    --blue-dark:    var(--azul-700);
    --blue:         var(--azul-500);
    --blue-mid:     var(--azul-400);
    --blue-light:   var(--azul-300);
    --blue-pale:    var(--azul-50);

    --accent:       var(--verde-200);

    --dark:         #0c1608;
    --text:         #252820;
    --muted:        #5a6450;
    --white:        #ffffff;
    --bg-light:     #f5faf2;
    --shadow-sm:    0 2px 8px rgba(36,87,26,.12);
    --shadow-md:    0 4px 24px rgba(36,87,26,.18);
    --shadow-lg:    0 8px 40px rgba(36,87,26,.25);
    --shadow-blue:  0 4px 24px rgba(8,80,144,.18);
    --shadow-terra: 0 4px 24px rgba(122,78,38,.18);
    --radius:       12px;
    --radius-lg:    20px;
    --transition:   .3s ease;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Rubik', 'Nunito', sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.7;
    padding-top: 111px; /* topbar(45) + navbar(66) */
}

h1, h2, h3, h4, h5, h6 { font-family: 'Nunito', sans-serif; font-weight: 700; color: var(--dark); }
h1.fw-bold, h2.fw-bold { font-weight: 800 !important; }

a { text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
    width: 42px; height: 42px;
    background: var(--green);
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@keyframes sk-rotateplane {
    0%   { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50%  { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
#spinner { opacity:0; visibility:hidden; transition: opacity .4s ease, visibility 0s .4s; z-index:99999; }
#spinner.show { opacity:1; visibility:visible; transition: opacity .4s ease; }

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar-wrap {
    background: linear-gradient(90deg, var(--green-dark), var(--green-mid), var(--green-light));
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1040;
}
.topbar-inner { padding-top: 0; padding-bottom: 0; }
.topbar-inner small { color: rgba(255,255,255,.92); font-size: .8rem; }
.topbar-inner small i { color: var(--verde-50); }
.topbar-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: rgba(255,255,255,.85);
    font-size: .75rem;
    transition: all var(--transition);
}
.topbar-social:hover { background: var(--verde-50); border-color: var(--verde-50); color: var(--green-dark); }

/* ── Navbar ─────────────────────────────────────────────────── */
.sgla-navbar {
    background: var(--green) !important;
    top: 45px;
    box-shadow: var(--shadow-md);
    transition: background var(--transition), box-shadow var(--transition);
    min-height: 66px;
}
.sgla-navbar.scrolled {
    background: var(--green-dark) !important;
    box-shadow: var(--shadow-lg);
}
.brand-text {
    font-family: 'Nunito', sans-serif;
    font-size: .7rem;
    line-height: 1.25;
    color: rgba(255,255,255,.92);
}
.brand-text strong { color: var(--white); font-size: .78rem; }
@media (min-width: 576px) {
    .brand-text { font-size: .82rem; }
    .brand-text strong { font-size: .95rem; }
}
@media (min-width: 992px) {
    .brand-text { font-size: .85rem; }
    .brand-text strong { font-size: 1rem; }
}

.sgla-navbar .nav-link {
    color: rgba(255,255,255,.88) !important;
    font-weight: 600;
    font-size: .9rem;
    padding: .55rem .85rem !important;
    border-radius: 8px;
    transition: all var(--transition);
    position: relative;
}
.sgla-navbar .nav-link:hover,
.sgla-navbar .nav-link.active {
    color: var(--verde-50) !important;
    background: rgba(255,255,255,.12);
}

/* Dropdown */
.sgla-dropdown {
    background: var(--green-mid) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: .5rem !important;
    min-width: 220px;
}
.sgla-dropdown .dropdown-item {
    color: rgba(255,255,255,.88) !important;
    border-radius: 8px;
    padding: .55rem 1rem;
    font-size: .88rem;
    font-weight: 500;
    transition: all var(--transition);
}
.sgla-dropdown .dropdown-item:hover,
.sgla-dropdown .dropdown-item.active {
    background: var(--green-light) !important;
    color: var(--white) !important;
}
.sgla-dropdown .dropdown-item i { color: var(--verde-50); }

/* Mobile navbar */
@media (max-width: 991.98px) {
    body { padding-top: 45px; }
    .sgla-navbar { top: 45px; }
    .sgla-navbar .navbar-collapse {
        background: var(--green-dark);
        border-radius: 0 0 var(--radius) var(--radius);
        padding: 1rem;
        margin-top: .5rem;
    }
    .sgla-dropdown { background: rgba(0,0,0,.2) !important; margin-left: 1rem; }
}

/* ── Hero Carousel ──────────────────────────────────────────── */
.carousel-item img {
    height: 620px;
    object-fit: cover;
    object-position: center;
    filter: brightness(.70);
}
@media (max-width: 768px) { .carousel-item img { height: 420px; } }

.carousel-caption {
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(36,87,26,.55) 0%, rgba(0,0,0,.5) 100%);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.carousel-caption h5 { font-size: .95rem; letter-spacing: 2px; color: var(--verde-50); text-transform: uppercase; }
.carousel-caption h3 { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 800; color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,.4); }

.carousel-control-prev, .carousel-control-next { width: 6%; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 2.5rem; height: 2.5rem; }

/* ── Página: Cabeçalho Interno (banner) ─────────────────────── */
.page-banner {
    background: linear-gradient(rgba(36,87,26,.78), rgba(0,0,0,.65)),
                url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&q=85') center center no-repeat;
    background-size: cover;
    padding: 5rem 1rem 4rem;
    text-align: center;
    margin-bottom: 3rem;
}
.page-banner h1 {
    color: var(--white);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}
.page-banner .breadcrumb { justify-content: center; }
.page-banner .breadcrumb-item, .page-banner .breadcrumb-item a { color: rgba(255,255,255,.75); }
.page-banner .breadcrumb-item.active { color: var(--verde-50); }
.page-banner .breadcrumb-divider { color: rgba(255,255,255,.5); }

/* ── Facts Bar ──────────────────────────────────────────────── */
.facts-bar {
    position: relative;
    z-index: 5;
    margin-top: -60px;
}
.fact-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: transform var(--transition), box-shadow var(--transition);
    border-left: 4px solid var(--green);
}
.fact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fact-card.alt { border-left-color: var(--green-light); }
.fact-icon {
    width: 56px; height: 56px; min-width: 56px;
    border-radius: 12px;
    background: var(--green-pale);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: var(--green);
}
.fact-card.alt .fact-icon { background: #e8f3d6; color: var(--green-dark); }
.fact-info h5 { font-size: .82rem; color: var(--muted); margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .5px; }
.fact-info h2 { font-size: 1.8rem; font-weight: 800; color: var(--green); margin: 0; line-height: 1; }

/* ── Section Titles ─────────────────────────────────────────── */
.section-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    display: block;
    margin-bottom: .4rem;
}
.section-heading {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 1.5rem;
}
.section-divider {
    width: 60px; height: 4px;
    background: linear-gradient(90deg, var(--green-dark), var(--green-light));
    border-radius: 2px;
    margin: 0 auto 2rem;
}
.section-divider.left { margin: 0 0 1.5rem; }

/* ── Stat Cards (Estatísticas Básicas) ──────────────────────── */
.stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(25,135,84,.1);
    transition: all var(--transition);
    height: 100%;
}
.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--green);
}
.stat-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--green), var(--green-light));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem; color: var(--white);
    box-shadow: 0 4px 16px rgba(25,135,84,.3);
    transform: rotate(-5deg);
    transition: transform var(--transition);
}
.stat-card:hover .stat-icon { transform: rotate(0deg) scale(1.08); }
.stat-card h4 { font-size: .88rem; color: var(--muted); font-weight: 600; margin-bottom: .5rem; min-height: 40px; }
.stat-card h2 { font-size: 2.2rem; font-weight: 800; color: var(--green); margin-bottom: 1rem; }
.stat-card .btn-stat {
    background: var(--green-pale);
    color: var(--green);
    border: none;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    padding: .4rem 1.2rem;
    transition: all var(--transition);
}
.stat-card .btn-stat:hover { background: var(--green); color: var(--white); }

/* ── About / Accordion ──────────────────────────────────────── */
.about-img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 100%;
    min-height: 420px;
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }

.accordion-item { border: none !important; margin-bottom: .5rem; border-radius: var(--radius) !important; overflow: hidden; box-shadow: var(--shadow-sm); }
.accordion-button {
    background: var(--green) !important;
    color: var(--white) !important;
    font-weight: 700;
    border-radius: var(--radius) !important;
    font-size: .95rem;
}
.accordion-button.collapsed {
    background: var(--green-pale) !important;
    color: var(--green-dark) !important;
}
.accordion-button::after { filter: brightness(0) invert(1); }
.accordion-button.collapsed::after { filter: none; }
.accordion-body { background: var(--bg-light); border-radius: 0 0 var(--radius) var(--radius); }
.accordion-body ul { padding-left: 1.2rem; }
.accordion-body ul li { margin-bottom: .4rem; }

/* ── Vendors / Parceiros ────────────────────────────────────── */
.vendor-carousel img {
    filter: grayscale(60%) opacity(.7);
    transition: all var(--transition);
    height: 60px; object-fit: contain;
}
.vendor-carousel img:hover { filter: none; transform: scale(1.08); }

/* ── Cards de Tabelas (páginas internas) ────────────────────── */
.content-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(25,135,84,.08);
    overflow: hidden;
}
.content-card-header {
    background: linear-gradient(90deg, var(--green), var(--green-light));
    padding: 1.25rem 1.5rem;
    color: var(--white);
}
.content-card-header h5 { margin: 0; font-weight: 700; }

/* DataTables overrides */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid rgba(25,135,84,.3);
    border-radius: 8px;
    padding: .35rem .75rem;
    font-size: .875rem;
    outline: none;
    transition: border-color var(--transition);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(25,135,84,.12); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--green) !important;
    color: var(--white) !important;
    border-color: var(--green) !important;
    border-radius: 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--green-pale) !important;
    color: var(--green) !important;
    border-color: transparent !important;
    border-radius: 8px;
}
table.dataTable thead th {
    background: var(--green) !important;
    color: var(--white) !important;
    font-weight: 700;
    border: none !important;
    white-space: nowrap;
}
table.dataTable tbody tr:hover { background: var(--green-pale) !important; }
table.dataTable.table-bordered { border-radius: var(--radius); overflow: hidden; }

/* ── Modais ─────────────────────────────────────────────────── */
.modal-header.sgla-modal-header {
    background: linear-gradient(90deg, var(--green), var(--green-light));
    color: var(--white);
    border: none;
}
.modal-header.sgla-modal-header .btn-close { filter: brightness(0) invert(1); }
.modal-title { font-weight: 700 !important; }
.modal-body .form-select, .modal-body .form-control {
    border-radius: 8px;
    border: 1px solid rgba(25,135,84,.3);
}
.modal-body .form-select:focus, .modal-body .form-control:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(25,135,84,.12);
}

/* ── List Group (detalhes modais) ───────────────────────────── */
.list-group-item.sgla-header {
    background: var(--green);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    border: none;
}
.list-group-item { border-color: rgba(25,135,84,.12); font-size: .875rem; }
.list-group-item span { font-weight: 600; color: var(--green-dark); }

/* ── Formulário de Contacto ─────────────────────────────────── */
.contact-form-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.5rem;
}
.contact-info-card {
    background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    color: var(--white);
    height: 100%;
}
.contact-info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.contact-info-item i { font-size: 1.3rem; color: var(--verde-50); margin-top: 2px; }
.contact-info-item p { margin: 0; color: rgba(255,255,255,.85); }
.contact-info-item strong { color: var(--white); display: block; margin-bottom: .15rem; }

.form-control, .form-select {
    border-radius: 10px;
    border: 1.5px solid #e0e0e0;
    padding: .7rem 1rem;
    font-size: .9rem;
    transition: all var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(25,135,84,.12);
}
.btn-sgla {
    background: var(--green);
    color: var(--white);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    padding: .7rem 2rem;
    transition: all var(--transition);
}
.btn-sgla:hover { background: var(--green-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── Footer ─────────────────────────────────────────────────── */
.sgla-footer {}
.footer-main {
    background: linear-gradient(rgba(4,18,2,.93), rgba(4,18,2,.97)),
                url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80') center center / cover no-repeat;
    padding: 5rem 0 3rem;
    color: rgba(255,255,255,.8);
}
.footer-brand .footer-text { font-size: .875rem; color: rgba(255,255,255,.7); line-height: 1.7; }
.footer-heading { color: var(--white); font-weight: 700; font-size: 1rem; margin-bottom: 1.2rem; padding-bottom: .5rem; border-bottom: 2px solid var(--green-light); display: inline-block; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: rgba(255,255,255,.65); font-size: .875rem; transition: all var(--transition); }
.footer-links a:hover { color: var(--verde-50); padding-left: 6px; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: .75rem; margin-bottom: 1rem; align-items: flex-start; }
.footer-contact i { color: var(--verde-100); font-size: 1rem; margin-top: 2px; }
.footer-contact span { font-size: .875rem; color: rgba(255,255,255,.7); }
.footer-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    transition: all var(--transition);
}
.footer-social:hover { background: var(--green-light); color: var(--white); transform: translateY(-3px); }
.footer-bottom {
    background: #020f04;
    padding: 1.25rem 0;
    color: rgba(255,255,255,.5);
    font-size: .82rem;
}
.footer-bottom p { margin: 0; }
.footer-dev-link { color: var(--verde-100); text-decoration: none; }
.footer-dev-link:hover { color: var(--white); }

/* ── Back to Top ────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 46px; height: 46px;
    background: var(--green);
    color: var(--white);
    border-radius: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--shadow-md);
    z-index: 999;
    transition: all var(--transition);
}
.back-to-top:hover { background: var(--green-dark); color: var(--white); transform: translateY(-3px); }

/* ── Buttons Global ─────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 600; transition: all var(--transition); }
.btn-success { background: var(--green) !important; border-color: var(--green) !important; }
.btn-success:hover { background: var(--green-dark) !important; border-color: var(--green-dark) !important; transform: translateY(-1px); }
.btn-outline-success { color: var(--green); border-color: var(--green); }
.btn-outline-success:hover { background: var(--green); border-color: var(--green); }

/* ── Utilitários ────────────────────────────────────────────── */
.text-green { color: var(--green) !important; }
.bg-green-pale { background: var(--green-pale) !important; }
.border-green { border-color: var(--green) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }

/* ── Responsividade Extra ───────────────────────────────────── */
@media (max-width: 576px) {
    .carousel-caption h3 { font-size: 1.4rem; }
    .stat-card h2 { font-size: 1.8rem; }
    .facts-bar { margin-top: 0; }
    .contact-form-card { padding: 1.5rem; }
}
@media (max-width: 768px) {
    .page-banner { padding: 4rem 1rem 3rem; }
}

/* ── Animações ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── MAAP — Melhorias de Identidade Visual (Verde Ambiente) ─── */

/* Gradiente institucional MAAP nos cabeçalhos de conteúdo */
.content-card-header {
    background: linear-gradient(90deg, var(--green-dark), var(--green-mid), var(--green-light)) !important;
}

/* Modal header gradiente MAAP */
.modal-header.sgla-modal-header {
    background: linear-gradient(90deg, var(--green-dark), var(--green-light)) !important;
}

/* Stat card hover com cor MAAP */
.stat-card:hover { border-color: var(--green-mid) !important; }

/* Botão SGLA com gradiente MAAP */
.btn-sgla {
    background: linear-gradient(135deg, var(--green-dark), var(--green-light)) !important;
    border: none;
}
.btn-sgla:hover {
    background: linear-gradient(135deg, var(--green-light), var(--green-dark)) !important;
}

/* Accordion com cores MAAP */
.accordion-button {
    background: linear-gradient(90deg, var(--green-dark), var(--green-mid)) !important;
}
.accordion-button.collapsed {
    background: var(--green-pale) !important;
    color: var(--green-dark) !important;
}

/* Tabela cabeçalho MAAP */
table.dataTable thead th {
    background: linear-gradient(90deg, var(--green-dark), var(--green-mid)) !important;
}

/* Fact card icon alt com MAAP verde */
.fact-card.alt .fact-info h2 { color: var(--green-mid) !important; }

/* Section label cor MAAP */
.section-label { color: var(--green-mid) !important; }

/* About image moldura verde MAAP */
.about-img {
    border: 3px solid var(--verde-200);
    box-shadow: 0 12px 48px rgba(36,87,26,.28);
}

/* Spinner cor MAAP */
.spinner { background: var(--green-mid) !important; }

/* Back to top MAAP */
.back-to-top { background: linear-gradient(135deg, var(--green-dark), var(--green-light)) !important; }
.back-to-top:hover { background: linear-gradient(135deg, var(--green-light), var(--green-dark)) !important; }

/* Footer bottom cor MAAP */
.footer-bottom { background: #010d01; }

/* Stat icon com gradiente MAAP oficial */
.stat-icon {
    background: linear-gradient(135deg, var(--green-dark), var(--green-light)) !important;
    box-shadow: 0 4px 16px rgba(36,87,26,.35) !important;
}

/* Google Charts cor MAAP — via CSS variable nos títulos */
.stat-card h2 { color: var(--green-mid) !important; }
.fact-info h2 { color: var(--green-dark) !important; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MAAP — TRÊS FAMÍLIAS DE CORES APLICADAS                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Topbar com faixa tricolor MAAP ─────────────────────────── */
.topbar-wrap {
    background: linear-gradient(90deg,
        var(--verde-900)  0%,
        var(--verde-700) 33%,
        var(--verde-500) 55%,
        var(--terra-500) 75%,
        var(--azul-500)  100%) !important;
}

/* ── Navbar com verde institucional ─────────────────────────── */
.sgla-navbar { background: var(--verde-700) !important; }
.sgla-navbar.scrolled { background: var(--verde-900) !important; }

/* ── Fact Cards — uma cor por família ───────────────────────── */
/* Verde (Ambiente) */
.fact-card.fc-verde {
    border-left: 4px solid var(--verde-500);
}
.fact-card.fc-verde .fact-icon {
    background: var(--verde-50);
    color: var(--verde-700);
}
.fact-card.fc-verde .fact-info h2 { color: var(--verde-700); }

/* Castanho (Terra) */
.fact-card.fc-terra {
    border-left: 4px solid var(--terra-400);
}
.fact-card.fc-terra .fact-icon {
    background: var(--terra-50);
    color: var(--terra-700);
}
.fact-card.fc-terra .fact-info h2 { color: var(--terra-500); }

/* Azul (Pescas) */
.fact-card.fc-azul {
    border-left: 4px solid var(--azul-400);
}
.fact-card.fc-azul .fact-icon {
    background: var(--azul-50);
    color: var(--azul-700);
}
.fact-card.fc-azul .fact-info h2 { color: var(--azul-500); }

/* ── Stat Cards — ícones tricolor ───────────────────────────── */
.stat-icon.si-verde {
    background: linear-gradient(135deg, var(--verde-900), var(--verde-400)) !important;
    box-shadow: 0 4px 16px rgba(36,87,26,.35) !important;
}
.stat-icon.si-terra {
    background: linear-gradient(135deg, var(--terra-700), var(--terra-300)) !important;
    box-shadow: 0 4px 16px rgba(122,78,38,.35) !important;
}
.stat-icon.si-azul {
    background: linear-gradient(135deg, var(--azul-700), var(--azul-300)) !important;
    box-shadow: 0 4px 16px rgba(8,80,144,.35) !important;
}

.stat-card.sc-verde:hover { border-color: var(--verde-400) !important; }
.stat-card.sc-verde h2   { color: var(--verde-700) !important; }
.stat-card.sc-verde .btn-stat { background: var(--verde-50); color: var(--verde-700); }
.stat-card.sc-verde .btn-stat:hover { background: var(--verde-500); color: var(--white); }

.stat-card.sc-terra:hover { border-color: var(--terra-400) !important; }
.stat-card.sc-terra h2   { color: var(--terra-500) !important; }
.stat-card.sc-terra .btn-stat { background: var(--terra-50); color: var(--terra-700); }
.stat-card.sc-terra .btn-stat:hover { background: var(--terra-500); color: var(--white); }

.stat-card.sc-azul:hover { border-color: var(--azul-400) !important; }
.stat-card.sc-azul h2   { color: var(--azul-500) !important; }
.stat-card.sc-azul .btn-stat { background: var(--azul-50); color: var(--azul-700); }
.stat-card.sc-azul .btn-stat:hover { background: var(--azul-500); color: var(--white); }

/* ── Secção de Estatísticas — fundo Azul (Pescas) ───────────── */
#stats {
    background: linear-gradient(rgba(2,26,80,.78), rgba(5,53,114,.70)),
        url('https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=1920&q=85')
        center/cover no-repeat !important;
}
#stats .section-label { color: var(--azul-100) !important; }
#stats .section-heading { color: var(--white) !important; }
#stats .section-divider {
    background: linear-gradient(90deg, var(--azul-200), var(--verde-200)) !important;
}

/* ── Secção "Sobre" — faixa terra na borda ───────────────────── */
.about-section-wrap {
    border-left: 5px solid var(--terra-300);
    padding-left: 1.5rem;
}

/* ── Accordion — cabeçalho com gradiente verde/terra ─────────── */
.accordion-button {
    background: linear-gradient(90deg, var(--verde-900), var(--verde-700)) !important;
}
.accordion-button.collapsed {
    background: var(--verde-50) !important;
    color: var(--verde-900) !important;
}

/* ── Page Banner — fundo verde com gradiente ─────────────────── */
.page-banner {
    background: linear-gradient(135deg, rgba(36,87,26,.88) 0%, rgba(8,80,144,.70) 100%),
        url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&q=85')
        center center / cover no-repeat !important;
}
.page-banner .breadcrumb-item.active { color: var(--verde-100) !important; }

/* ── Contact section — fundo azul ───────────────────────────── */
.contact-info-card {
    background: linear-gradient(135deg, var(--azul-700), var(--azul-400)) !important;
}
.contact-info-item i { color: var(--azul-100) !important; }

/* ── Content card header — gradiente tricolor ────────────────── */
.content-card-header {
    background: linear-gradient(90deg, var(--verde-900), var(--verde-500), var(--azul-500)) !important;
}

/* ── Modal header — verde → azul ─────────────────────────────── */
.modal-header.sgla-modal-header {
    background: linear-gradient(90deg, var(--verde-900), var(--verde-400)) !important;
}

/* ── Tabela cabeçalho verde escuro ───────────────────────────── */
table.dataTable thead th {
    background: linear-gradient(90deg, var(--verde-900), var(--verde-700)) !important;
}
table.dataTable tbody tr:hover { background: var(--verde-50) !important; }

/* ── Parceiros — fundo terra suave ───────────────────────────── */
.vendor-section-bg {
    background: var(--terra-50);
    border-top: 3px solid var(--terra-200);
    border-bottom: 3px solid var(--terra-200);
}

/* ── Faixa decorativa tricolor (separador de secções) ─────────── */
.maap-tricolor-bar {
    height: 5px;
    background: linear-gradient(90deg,
        var(--verde-500) 33.3%,
        var(--terra-400) 33.3% 66.6%,
        var(--azul-500)  66.6%);
    width: 100%;
}

/* ── Footer — gradiente verde escuro sobre floresta ─────────── */
.footer-main {
    background: linear-gradient(rgba(4,14,2,.94), rgba(4,14,2,.97)),
        url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80')
        center center / cover no-repeat !important;
}
.footer-heading { border-bottom-color: var(--verde-300) !important; }
.footer-links a:hover { color: var(--verde-200) !important; }
.footer-contact i { color: var(--verde-200) !important; }
.footer-social:hover { background: var(--verde-500) !important; }
.footer-dev-link { color: var(--verde-200) !important; }

/* ── Back-to-top verde escuro ────────────────────────────────── */
.back-to-top {
    background: linear-gradient(135deg, var(--verde-900), var(--verde-500)) !important;
}
.back-to-top:hover {
    background: linear-gradient(135deg, var(--azul-700), var(--azul-400)) !important;
}

/* ── Section divider tricolor ────────────────────────────────── */
.section-divider {
    background: linear-gradient(90deg, var(--verde-700), var(--terra-400), var(--azul-500)) !important;
    width: 80px !important;
    height: 4px !important;
}

/* ── Spinner tricolor ────────────────────────────────────────── */
.spinner { background: var(--verde-500) !important; }

/* ── Utilitários ─────────────────────────────────────────────── */
.text-terra  { color: var(--terra-500) !important; }
.text-azul   { color: var(--azul-500) !important; }
.bg-terra-pale { background: var(--terra-50) !important; }
.bg-azul-pale  { background: var(--azul-50) !important; }
.border-terra  { border-color: var(--terra-400) !important; }
.border-azul   { border-color: var(--azul-400) !important; }