/* ============================================
   Unimed Sorocaba — Relatório GRI 2025
   Visual style matching existing project
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    font-size: 16px
}

body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    background: #f0f5f2;
    line-height: 1.7;
    overflow-x: hidden
}

a {
    color: #00734c;
    text-decoration: none
}

    a:hover {
        text-decoration: underline;
        color: #1a5c4a
    }

img {
    max-width: 100%;
    height: auto
}

h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00734c;
    margin: 1.8rem 0 .6rem
}

p {
    margin-bottom: .9rem
}

.text-justify {
    text-align: justify
}

.text-center {
    text-align: center
}

strong {
    font-weight: 700
}

.subtitulo {
    font-size: .85rem;
    color: #666;
    margin-top: .2rem
}

.ps-5 {
    padding-left: 2.5rem
}

.mt-5 {
    margin-top: 2.5rem
}

.my-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.75rem
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 .75rem
}

.container-xl {
    max-width: 1140px
}

/* SIDEBAR */
.main-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background-color: #00734c;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    transition: transform .3s ease
}

    .main-sidebar::-webkit-scrollbar {
        width: 5px
    }

    .main-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .2);
        border-radius: 3px
    }

.sidebar {
    padding: .5rem 0
}

    .sidebar .nav-sidebar {
        list-style: none;
        padding: 0;
        margin: 0
    }

    .sidebar .nav-item {
        padding: 0
    }

        .sidebar .nav-item.border-bottom {
            border-bottom: 1px solid rgba(255, 255, 255, .12) !important
        }

    .sidebar .nav-link {
        display: block;
        padding: .5rem 1rem;
        color: rgba(255, 255, 255, .85);
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        text-decoration: none;
        cursor: pointer;
        transition: background .2s, color .2s;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        line-height: 1.5
    }

        .sidebar .nav-link:hover {
            background: rgba(255, 255, 255, .08);
            color: #fff;
            text-decoration: none
        }

        .sidebar .nav-link p {
            margin: 0;
            font-size: .75rem;
            font-weight: 600;
            text-transform: none
        }

        .sidebar .nav-link img {
            max-width: 80%;
            margin: 0 auto;
            display: block
        }

    .sidebar .nav-treeview {
        list-style: none;
        padding: 0;
        margin: 0;
        display: none
    }

    .sidebar .nav-item.menu-open > .nav-treeview {
        display: block
    }

    .sidebar .nav-treeview .nav-link {
        font-size: .73rem;
        padding: .35rem .5rem;
        font-weight: 500
    }

        .sidebar .nav-treeview .nav-link p {
            font-size: .73rem
        }

    .sidebar .fa-angle-left {
        float: right;
        transition: transform .3s;
        font-style: normal
    }

        .sidebar .fa-angle-left::before {
            content: '‹';
            font-size: 1.1rem
        }

    .sidebar .menu-open > a .fa-angle-left {
        transform: rotate(-90deg)
    }

.sidebar-logo-area {
    padding: 1rem 1.2rem .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    margin-bottom: .5rem;
    text-align: center
}

    .sidebar-logo-area img {
        max-width: 80%;
        max-height: 65px;
        object-fit: contain;
        margin-bottom: .3rem;
        filter: drop-shadow(0px 0 0 white) drop-shadow(0px 0 0 white) drop-shadow(0 0px 0 white) drop-shadow(0 0px 0 white) drop-shadow(0 0 0px rgba(255, 255, 255, .55))
    }

    .sidebar-logo-area span {
        display: block;
        color: rgba(255, 255, 255, .7);
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .05em
    }

.sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: .8rem;
    left: .8rem;
    z-index: 1100;
    width: 40px;
    height: 40px;
    background: #00734c;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 1.2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}

    .sidebar-toggle-btn span {
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: .3s
    }

        .sidebar-toggle-btn span + span {
            margin-top: 5px
        }

    .sidebar-toggle-btn.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg)
    }

    .sidebar-toggle-btn.open span:nth-child(2) {
        opacity: 0
    }

    .sidebar-toggle-btn.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }

/* CONTENT */
.content-wrapper {
    margin-left: 260px;
    min-height: 100vh;
    background: #f0f5f2
}

    .content-wrapper .container-fluid {
        padding: 0 2rem 3rem
    }

/* TITLES */
.c-titulo-duplo-pagina,
.c-titulo-simples-pagina {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem
}

.ciruclo-titulo {
    position: absolute;
    left: 0;
    top: .3rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00734c
}

.titulo-fino {
    font-size: 1.6rem;
    font-weight: 300;
    color: #555;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0
}

.titulo-forte {
    font-size: 1.8rem;
    font-weight: 800;
    color: #00734c;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0
}

/* CARDS */
.card {
    background: #fff;
    border-radius: .5rem;
    border: 1px solid rgba(0, 0, 0, .06);
    margin-bottom: 1.5rem;
    overflow: hidden
}

    .card.shadow {
        box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
        border: none
    }

.card-body {
    padding: 1.5rem
}

.card-header {
    padding: 1rem 1.5rem;
    background: rgba(0, 115, 76, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .06)
}

.card-footer {
    padding: .8rem 1.5rem;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .06);
    text-align: right
}

/* PHOTOS */
.c-foto-diretor,
.c-foto-presidente {
    float: right;
    margin: 0 0 1.5rem 2rem;
    position: relative
}

.photo {
    position: relative;
    display: inline-block
}

    .photo img {
        width: 180px;
        height: 230px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
        position: relative;
        z-index: 2
    }

.img-zezo {
    object-position: 50% 20%;
}

.img-presidente {
    object-position: 50% 10%;
}

.img-sergio {
    object-position: 50% 25%;
}

.photo .circle {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 1;
    top: -12px;
    right: -12px;
    background: #2e8b6e
}

    .photo .circle.sergio {
        background: #c8e550
    }

    .photo .circle.agnes {
        background: #4db892
    }

    .photo .circle.mercado {
        background: #00734c
    }

    .photo .circle.presidente {
        background: #c8e550
    }

.foto-presidente .circle {
    width: 70px;
    height: 70px;
    background: #2e8b6e;
    top: -15px;
    right: -15px
}

/* STAT CARDS */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0
}

.stat-card .numero {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    display: block;
    margin-bottom: .3rem
}

/* TABLE */
.table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .9rem
}

    .table th,
    .table td {
        padding: .75rem 1rem;
        border: 1px solid #dee2e6;
        vertical-align: middle
    }

.table-verde thead th,
.table-verde th {
    background: #00734c;
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    border-color: #00734c
}

.table-verde tbody tr:nth-child(even) {
    background: #f5faf7
}

.table-hover tbody tr:hover {
    background: #e8f5ee
}

.c-table {
    overflow-x: auto
}

/* BLOCKQUOTE */
.blockquote {
    margin: 1.5rem 0;
    padding: 0;
    border: none
}

.blockquote-footer {
    font-size: .9rem;
    color: #666
}

    .blockquote-footer strong,
    .blockquote-footer .font-weight-bold {
        color: #00734c;
        font-size: 1rem
    }

/* DOUGHNUT SOLO — gráficos empilhados verticalmente, tamanho uniforme */
.doughnut-solo {
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

.chart-title-doughnut {
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 .5rem;
}

/* SVG CHARTS */
.svg-chart {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto
}

    .svg-chart h4 {
        margin: 0 0 1rem;
        text-align: center;
        font-size: 1.05rem;
        color: #333
    }

    .svg-chart svg {
        display: block;
        margin: 0 auto;
        width: 100%
    }

/* DOCX IMAGE */
.docx-img {
    width: 100%;
    border-radius: .5rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
    margin: 1.5rem 0
}

/* VALUES/PROGRAMS */
.value-card {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
    padding: 1.2rem 1.5rem;
    border-left: 4px solid #00734c;
    margin-bottom: 1rem;
    display: block;
    transition: box-shadow .2s;
    color: inherit
}

    .value-card:hover {
        box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12);
        text-decoration: none
    }

    .value-card h4 {
        margin-top: 0
    }

    .value-card p {
        font-size: .9rem;
        color: #666;
        margin-bottom: 0
    }

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0
}

/* TIMELINE */
.timeline {
    position: relative;
    padding-left: 2rem;
    margin: 1.5rem 0
}

    .timeline::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, #00734c, #2e8b6e);
        border-radius: 2px
    }

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 1rem
}

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -2.35rem;
        top: .4rem;
        width: 12px;
        height: 12px;
        background: #00734c;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 3px #00734c
    }

/* PAGE NAV */
.page-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6
}

    .page-nav a {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .6rem 1rem;
        background: #fff;
        border-radius: .5rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
        font-size: .85rem;
        font-weight: 600;
        color: #00734c;
        text-decoration: none;
        transition: all .2s;
        max-width: 48%
    }

        .page-nav a:hover {
            background: #00734c;
            color: #fff;
            text-decoration: none
        }

        .page-nav a.prev::before {
            content: '←';
            font-size: 1.1rem
        }

        .page-nav a.next::after {
            content: '→';
            font-size: 1.1rem
        }

        .page-nav a.next {
            margin-left: auto;
            text-align: right
        }

/* HERO */
.c-inicio {
    padding: 2rem
}

/* ── Hero banner wide ───────────────────────────────────── */
.c-hero-inicio {
    position: relative;
    margin: 0 -2rem 2.5rem -2rem;
    /* cancela padding do container → full width */
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.c-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
    border-radius: 0;
}

.c-hero-texto {
    position: relative;
    z-index: 2;
    flex: 0 0 52%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem 3rem 3.5rem;
    background: linear-gradient(to right, rgba(26, 60, 52, .92) 60%, transparent 100%);
    gap: .25rem;
}

    /* Texto no hero — cores invertidas para fundo escuro */
    .c-hero-texto .texto-inicio-1 span {
        color: rgba(255, 255, 255, .78);
        font-size: 1.1rem;
        font-weight: 300
    }

    .c-hero-texto .texto-inicio-2 span {
        color: #c8e550;
        font-size: 2.6rem;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.05
    }

    .c-hero-texto .texto-inicio-3 span {
        color: #ffffff;
        font-size: 2.6rem;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.05
    }

    .c-hero-texto .texto-inicio-4 span {
        font-size: 5.5rem;
        font-weight: 900;
        line-height: .88;
        color: transparent;
        -webkit-text-stroke: 2px rgba(200, 229, 80, .85);
        letter-spacing: -.02em;
    }

/* Estilos originais fora do hero (mantidos para outros usos) */
.texto-inicio-1 span {
    font-size: 1.2rem;
    color: #666;
    font-weight: 300
}

.texto-inicio-2 span {
    font-size: 2.5rem;
    color: #00734c;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1
}

.texto-inicio-3 span {
    font-size: 2.5rem;
    color: #333;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1
}

.texto-inicio-4 span {
    font-size: 5rem;
    font-weight: 900;
    color: #00734c;
    line-height: .9;
    opacity: .9
}

/* ── PAGE HERO — banner para subpáginas ─────────────────── */
.c-page-hero {
    position: relative;
    margin: 0 -5rem 2.5rem -5rem;
    padding: 3rem 5.5rem 2.5rem;
    background: linear-gradient(135deg, #0d3d28 0%, #00734c 55%, #2e8b6e 100%);
    overflow: hidden;
}

    .c-page-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('../images/bg-texture.png') center/cover no-repeat;
        opacity: .18;
        pointer-events: none;
    }

    .c-page-hero .ph-label {
        display: block;
        position: relative;
        z-index: 2;
        font-size: .78rem;
        font-weight: 400;
        color: rgba(255, 255, 255, .65);
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: .6rem;
    }

    .c-page-hero h1 {
        position: relative;
        z-index: 2;
        font-size: 2.4rem;
        font-weight: 900;
        color: #fff;
        text-transform: uppercase;
        line-height: 1.1;
        margin: 0 0 .3rem;
    }

    .c-page-hero .ph-accent {
        color: #c8e550
    }

    .c-page-hero .ph-gri {
        position: relative;
        z-index: 2;
        font-size: .75rem;
        color: rgba(255, 255, 255, .45);
        margin-top: .3rem;
    }

/* ── CHART containers ────────────────────────────────────── */
.chart-wrap {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .08);
    padding: 1.5rem;
    margin: 1.5rem 0
}

    .chart-wrap h5 {
        text-align: center;
        font-size: .95rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 1rem
    }

.chart-container {
    flex: 1; /* ocupa todo espaço restante */
    display: flex;
    justify-content: center; /* centraliza horizontal */
    align-items: center; /* centraliza vertical */
    position: relative;
    height: 340px;
}
.chart-fonte {
    font-size: .72rem;
    color: #888;
    text-align: center;
    margin-top: .6rem
}

/* ── DATA TABLES ─────────────────────────────────────────── */
.tbl-dados {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
    margin: 1.2rem 0
}

    .tbl-dados th {
        background: #00734c;
        color: #fff;
        font-weight: 700;
        padding: .55rem .8rem;
        text-align: center;
        border: 1px solid #005c3b
    }

    .tbl-dados td {
        padding: .5rem .8rem;
        border: 1px solid #d0ddd8;
        vertical-align: middle
    }

    .tbl-dados tbody tr:nth-child(even) {
        background: #f5faf7
    }

    .tbl-dados .td-label {
        color: #00734c;
        font-weight: 600
    }

    .tbl-dados .tr-group td {
        background: #e8f5ee;
        font-weight: 700;
        color: #1a3c34
    }

    .tbl-dados .tr-total td {
        background: #00734c;
        color: #fff;
        font-weight: 700
    }

    .tbl-dados .th-section {
        background: #1a3c34;
        color: #fff;
        font-weight: 800;
        text-align: center;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .05em
    }

    .tbl-dados .td-center {
        text-align: center
    }

    .tbl-dados .td-pct {
        text-align: center;
        font-weight: 600
    }

    .tbl-dados .td-maior-m {
        color: #1a5c9a;
        font-size: .75rem
    }

    .tbl-dados .td-maior-f {
        color: #9a1a5c;
        font-size: .75rem
    }

    .tbl-dados .td-na {
        color: #999;
        font-style: italic;
        font-size: .78rem
    }

/* FOOTER */
.main-footer {
    background: #1a3c34;
    color: rgba(255, 255, 255, .7);
    padding: 2rem 2.5rem;
    font-size: .85rem;
    text-align: center;
    margin-left: 260px
}

    .main-footer strong {
        color: #fff
    }

/* LISTS */
ul {
    margin: .5rem 0 1rem 1.5rem
}

li {
    margin-bottom: .3rem
}

    li.text-justify {
        text-align: justify
    }

/* ============================================================
   CHECK-LIST — listas de itens com ícone ✓
   ============================================================ */
.ps-5 ul,
.check-list {
    list-style: none;
    margin: .3rem 0 .8rem 0;
    padding: 0;
}

    .ps-5 ul li,
    .check-list li {
        position: relative;
        padding: .28rem 0 .28rem 1.6rem;
        margin-bottom: 0;
        font-size: .93rem;
        line-height: 1.6;
        border-bottom: 1px solid rgba(0, 115, 76, .07);
    }

        .ps-5 ul li:last-child,
        .check-list li:last-child {
            border-bottom: none;
        }

        .ps-5 ul li::before,
        .check-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: .32rem;
            color: #00734c;
            font-weight: 900;
            font-size: .85rem;
        }

/* ============================================================
   IDENTIDADE CARD — Propósito / Missão / Visão / Valores
   ============================================================ */
.identidade-card-wrap {
    border: 2px solid rgba(0, 115, 76, .18);
    border-radius: 12px;
    overflow: hidden;
    margin: 1.2rem 0 1.6rem;
    box-shadow: 0 3px 14px rgba(0, 115, 76, .09);
}

.identidade-pillars {
    display: flex;
    gap: 0;
    background: #fff;
}

.identidade-pillar {
    flex: 1;
    padding: 1.2rem 1rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(0, 115, 76, .12);
}

    .identidade-pillar:last-child {
        border-right: none;
    }

.identidade-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .5rem;
    width: 44px;
    height: 44px;
    background: rgba(0, 115, 76, .08);
    border-radius: 50%;
}

.identidade-pillar-title {
    font-size: .92rem;
    font-weight: 800;
    color: #00734c;
    margin: 0 0 .3rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.identidade-pillar-text {
    font-size: .82rem;
    color: #444;
    margin: 0;
    line-height: 1.5;
}

.identidade-valores-box {
    background: linear-gradient(135deg, #00734c 0%, #1a5c4a 100%);
    padding: 1rem 1.4rem 1.2rem;
    color: #fff;
}

.identidade-valores-title {
    font-size: 1rem;
    font-weight: 800;
    color: #c8e550;
    margin: 0 0 .1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.identidade-valores-sub {
    font-size: .75rem;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 .85rem;
    font-style: italic;
}

.identidade-valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .4rem .8rem;
}

.identidade-valor-item {
    font-size: .82rem;
    color: rgba(255, 255, 255, .93);
    line-height: 1.45;
}

    .identidade-valor-item strong {
        color: #c8e550;
    }

@media(max-width:600px) {
    .identidade-pillars {
        flex-direction: column;
    }

    .identidade-pillar {
        border-right: none;
        border-bottom: 1px solid rgba(0, 115, 76, .12);
    }
}

/* ============================================================
   STAT CARDS — números em destaque
   ============================================================ */
.stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.2rem 0 1.8rem;
}

.stat-card {
    flex: 1 1 130px;
    background: linear-gradient(135deg, #00734c 0%, #1a5c4a 100%);
    color: #fff;
    border-radius: 10px;
    padding: .9rem 1rem .85rem;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0, 115, 76, .18);
}

.stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #fff;
}

.stat-label {
    display: block;
    font-size: .68rem;
    line-height: 1.35;
    margin-top: .3rem;
    opacity: .88;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .88);
}

@media(max-width:600px) {
    .stat-card {
        flex: 1 1 calc(50% - .4rem);
    }
}

/* ============================================================
   LEAD PARAGRAPH — primeiro parágrafo após título de seção
   ============================================================ */
.sec-section-title + p,
.sec-section-title + .text-justify {
    font-size: 1.0rem;
    color: #1a3c34;
    font-weight: 500;
    line-height: 1.78;
    border-left: 4px solid #00734c;
    padding-left: .85rem;
    margin-bottom: 1rem;
}

/* ============================================================
   GRI BADGE — referências normativas inline
   ============================================================ */
.gri-badge {
    display: inline-block;
    background: rgba(0, 115, 76, .1);
    color: #005c38;
    border: 1px solid rgba(0, 115, 76, .28);
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    padding: .05rem .45rem;
    letter-spacing: .03em;
    font-family: 'Courier New', monospace;
    vertical-align: middle;
    margin: 0 .1rem;
    white-space: nowrap;
}

/* subtitulo com GRI — estiliza o parágrafo inteiro como barra de referência */
.subtitulo:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
    font-size: .78rem;
    color: #555;
    margin: -.2rem 0 .8rem;
    background: rgba(0, 115, 76, .04);
    border-radius: 6px;
    padding: .35rem .65rem;
    border-left: 3px solid rgba(0, 115, 76, .3);
}

/* ============================================================
   SEPARADOR VISUAL entre seções maiores
   ============================================================ */
.sec-divider {
    border: none;
    border-top: 1.5px solid rgba(0, 115, 76, .13);
    margin: 2rem 0 1.5rem;
    border-radius: 2px;
}

/* RESPONSIVE */
@media(max-width:900px) {
    .main-sidebar {
        transform: translateX(-100%)
    }

        .main-sidebar.open {
            transform: translateX(0)
        }

    .sidebar-toggle-btn {
        display: flex
    }

    .content-wrapper {
        margin-left: 0
    }

    .main-footer {
        margin-left: 0
    }

    .c-foto-diretor,
    .c-foto-presidente {
        float: none;
        margin: 0 auto 1.5rem;
        text-align: center
    }

    .photo img {
        width: 150px;
        height: 190px
    }

    .titulo-fino {
        font-size: 1.2rem
    }

    .titulo-forte {
        font-size: 1.4rem
    }

    .texto-inicio-2 span,
    .texto-inicio-3 span {
        font-size: 1.8rem
    }

    .texto-inicio-4 span {
        font-size: 3.5rem
    }

    .stat-cards-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .page-nav {
        flex-direction: column
    }

        .page-nav a {
            max-width: 100%
        }

    /* Page hero mobile */
    .c-page-hero {
        margin: 0 -2rem 2rem -2rem;
        padding: 2rem 1.5rem
    }

        .c-page-hero h1 {
            font-size: 1.7rem
        }

    /* Hero mobile */
    .c-hero-inicio {
        min-height: 280px;
        flex-direction: column
    }

    .c-hero-texto {
        flex: unset;
        min-height: unset;
        padding: 2rem 1.5rem;
        background: rgba(26, 60, 52, .9)
    }

        .c-hero-texto .texto-inicio-2 span,
        .c-hero-texto .texto-inicio-3 span {
            font-size: 1.8rem
        }

        .c-hero-texto .texto-inicio-4 span {
            font-size: 3.5rem
        }
}

@media(max-width:576px) {
    .stat-cards-grid {
        grid-template-columns: 1fr
    }

    .content-wrapper .container-fluid {
        padding: 0 1rem 2rem
    }

    .ps-5 {
        padding-left: 1rem
    }
}

.reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .5s ease, transform .5s ease
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0)
    }

/* ============================================================
   MELHORIAS TIPOGRÁFICAS — seções e parágrafos
   ============================================================ */

/* Espaçamento maior abaixo do bloco de título de seção */
.c-titulo-duplo-pagina,
.c-titulo-simples-pagina {
    margin-bottom: 2rem;
}

/* Primeiro parágrafo após título de seção — destaque lead */
.ps-5 > p:first-of-type {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #1a3c34;
}

/* H4 como cabeçalho de subseção no conteúdo */
.ps-5 > h4 {
    margin-top: 2rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid rgba(0, 115, 76, .12);
    position: relative;
    color: #00734c;
    font-size: 1rem;
}

    .ps-5 > h4::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 40px;
        height: 2px;
        background: #00734c;
    }

/* Âncora de seção sem deslocamento visual */
.sec-anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

/* Títulos de seção que servem de âncora de navegação */
.sec-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a3c34;
    border-left: 5px solid #00734c;
    background: rgba(0, 115, 76, .06);
    padding: .5rem 1rem;
    margin: 2rem 0 1rem;
    border-radius: 0 6px 6px 0;
    text-align: left;
}

/* Bloco destacado de lead text (usado em seções introdutórias) */
.lead-block {
    background: linear-gradient(135deg, rgba(0, 115, 76, .04), rgba(200, 229, 80, .05));
    border-left: 4px solid #00734c;
    border-radius: 0 .5rem .5rem 0;
    padding: 1.1rem 1.4rem;
    margin: 1.2rem 0 2rem;
    color: #1a3c34;
    font-size: 1.02rem;
    line-height: 1.85;
}

/* ============================================================
   SIDEBAR ACCORDION
   ============================================================ */
.nav-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .55rem 1rem;
    text-align: left;
    line-height: 1.5;
    transition: background .2s, color .2s;
}

    .nav-parent:hover {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

.nav-arrow {
    flex-shrink: 0;
    margin-left: .4rem;
    transition: transform .3s ease;
    opacity: .65;
}

.nav-item.is-open > .nav-parent .nav-arrow {
    transform: rotate(180deg);
}

.nav-sub {
    display: none;
    list-style: none;
    padding: .25rem 0 .5rem;
    margin: 0;
    background: rgba(0, 0, 0, .20);
}

.nav-item.is-open > .nav-sub {
    display: block;
}

.nav-sublink {
    display: block;
    padding: .28rem 1rem .28rem 2rem;
    font-size: .71rem;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    border-left: 2px solid transparent;
    font-weight: 500;
    transition: color .2s, background .2s, border-left-color .2s;
}

    .nav-sublink:hover,
    .nav-sublink.active {
        color: #c8e550;
        border-left-color: #c8e550;
        background: rgba(255, 255, 255, .05);
        text-decoration: none;
    }

/* ============================================================
   GRADE DE MEMBROS DO CONSELHO
   ============================================================ */
/* Cards de governança — grid circular */
.conselho-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem 1rem;
    margin: 1.2rem 0 2rem;
}

    .conselho-grid.conselho-grid-sm {
        grid-template-columns: repeat(5, 1fr);
    }

.conselho-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.conselho-foto-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto .55rem;
    border: 3px solid #00734c;
    background: #e8f5ee;
    flex-shrink: 0;
}

.conselho-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.conselho-foto-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #00734c, #2e8b6e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    font-family: Arial, sans-serif;
    letter-spacing: .03em;
}

.conselho-membro-nome {
    font-size: .75rem;
    font-weight: 700;
    color: #1a3c34;
    line-height: 1.35;
    margin: 0 0 .15rem;
    user-select: text;
}

.conselho-membro-cargo {
    display: block;
    font-size: .68rem;
    color: #666;
    font-style: italic;
    line-height: 1.3;
}

.conselho-mandato-titulo {
    font-size: .85rem;
    font-weight: 700;
    color: #00734c;
    border-left: 4px solid #00734c;
    padding-left: .6rem;
    margin: 0 0 .5rem;
}

/* membro legado (classe antiga) */
.conselho-membro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .conselho-membro img {
        width: 100%;
        aspect-ratio: 3/4;
        object-fit: cover;
        object-position: top center;
        border-radius: .5rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
        display: block;
        margin-bottom: .6rem;
    }

@media(max-width:1024px) {
    .conselho-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(max-width:768px) {
    .conselho-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:480px) {
    .conselho-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem .8rem;
    }

    .conselho-foto-wrap {
        width: 76px;
        height: 76px;
    }
}

/* ============================================================
   HERO CAPA — página inicial
   ============================================================ */
.c-hero-capa {
    border-radius: .75rem;
    overflow: hidden;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .13);
}

    .c-hero-capa img {
        width: 100%;
        display: block;
    }

/* ============================================================
   ÍNDICE GRI — Tabela de indicadores com links
   ============================================================ */
#tbl-gri-index thead th {
    background: #1a3c34;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .5rem .75rem;
    vertical-align: middle;
    white-space: nowrap;
}

.gri-series-header td {
    background: #00734c;
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    padding: .4rem .75rem;
    letter-spacing: .03em;
}

.gri-code-cell {
    font-family: 'Courier New', Courier, monospace;
    font-size: .82rem;
    font-weight: 700;
    color: #1a3c34;
    white-space: nowrap;
}

.gri-page-cell {
    font-size: .82rem;
    color: #555;
}

.gri-link-cell {
    text-align: center;
}

.btn-gri-link {
    display: inline-block;
    background: #00734c;
    color: #fff !important;
    border-radius: 4px;
    padding: .15rem .5rem;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s;
    line-height: 1.6;
}

    .btn-gri-link:hover {
        background: #1a3c34;
        color: #fff !important;
        text-decoration: none;
    }

#tbl-gri-index tbody tr:not(.gri-series-header):hover {
    background: rgba(0, 115, 76, .07);
}

/* Grid de membros dos conselhos */
.council-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    grid-auto-rows: 220px;
}

@media (min-width: 768px) {
    .council-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .council-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.council-grid .member {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
}

    .council-grid .member img {
        width: 140px;
        height: 140px;
        object-fit: cover;
        object-position: top center;
        border-radius: 50%;
        flex-shrink: 0;
        margin-bottom: 10px;
        object-position: center;
    }

    .council-grid .member p {
        font-size: 0.8125rem;
        font-weight: 600;
        text-align: center;
        margin: 0;
        line-height: 1.35;
        color: #333;
    }

.localizacao .layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.localizacao .mapa {
    flex: 2;
}

.localizacao .unidades {
    flex: 1;
}

.localizacao .divisor {
    width: 2px;
    background: #000;
}

@media (max-width: 992px) {
    .localizacao .layout {
        flex-direction: column;
    }

    .localizacao .divisor {
        display: none;
    }
}

@media (max-width: 992px) {
    .layout {
        flex-direction: column;
    }
}

/* overlay de destaque */
.mapa-wrapper {
    position: relative;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.img-mapa {
    width: 100%;
    display: block;
}

/* overlay */
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cidade {
    fill: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

    /* hover */
    .cidade:hover {
        fill: rgba(0, 200, 83, 0.2);
    }

    /* ativa */
    .cidade.ativa {
        fill: rgba(0, 200, 83, 0.45);
        stroke: #00c853;
        stroke-width: 4;
    }

.container-unidades {
    height: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
}

    /* scrollbar bonita */
    .container-unidades::-webkit-scrollbar {
        width: 6px;
    }

    .container-unidades::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

.btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* CARD */
.card-unidade {
    background: #d9d4cf;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    animation: fadeIn 0.3s ease;
}

/* TOPO (imagem + texto) */
.card-top {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* IMAGEM */
.img-unidade {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
}

/* TEXTO */
.info {
    flex: 1;
    text-align: center;
}

    .info h5 {
        margin: 0;
        font-size: 20px;
        font-weight: bold;
        color: #4a4a4a;
    }

    .info p {
        margin: 5px 0 0;
        font-size: 14px;
        color: #555;
        line-height: 1.4;
    }

/* BOTÕES */
.botoes {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* BOTÕES BASE */
.btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

/* PRIMARY */
.btn-primary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

    .btn-primary:hover {
        background-color: #5c636a;
        transform: translateY(-2px);
    }

/* SUCCESS */
.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}

    .btn-success:hover {
        background-color: #157347;
        transform: translateY(-2px);
    }

/* CLICK */
.btn:active {
    transform: scale(0.95);
}

/* ANIMAÇÃO */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {

    .card-top {
        flex-direction: column;
        text-align: center;
    }

    .img-unidade {
        width: 90px;
        height: 90px;
    }

    .botoes {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
}

/* ── Layout geral do diagrama ── */
.cdv-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 16px;
    align-items: stretch;
    margin-top: 2rem;
}

/* ── Coluna INPUTS ── */
.cdv-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cdv-inputs-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.cdv-inputs-header-badge {
    padding: 6px 32px;
    color: var(--verde-escuro);
    border: 3px solid var(--verde-escuro);
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    background: transparent;
    letter-spacing: 1px;
}

.cdv-capital-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
}

.cdv-capital-box {
    border: 2px dashed var(--verde-escuro);
    border-radius: 14px; /* menos arredondado */
    padding: 14px 18px 10px;
    background-color: #f8f8f8; /* leve fundo cinza */
}

    .cdv-capital-box ul {
        list-style: none; /* remove bolinha padrão */
        padding-left: 0;
    }

        .cdv-capital-box ul li {
            position: relative;
            padding-left: 18px;
            color: var(--cinza-primario);
        }

            .cdv-capital-box ul li::before {
                content: "•";
                position: absolute;
                left: 0;
                top: 0;
                color: var(--verde-escuro);
                font-weight: bold;
            }

.cdv-arrow {
    color: var(--verde-escuro);
    font-size: 2rem; /* maior */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
}

.cdv-capital-label {
    background-color: var(--verde-escuro);
    color: #fff;
    border-radius: 20px;
    padding: 12px 16px;
    font-size: 0.85rem;
    width: 150px; /* um pouco maior */
}

/* ── Coluna MODELO DE NEGÓCIO (centro) ── */
.cdv-modelo {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 220px;
    max-width: 240px;
}

.cdv-modelo-header {
    background-color: var(--verde-escuro);
    color: #fff;
    text-align: center;
    padding: 8px 4px;
    font-weight: bold;
    font-size: 0.9rem;
}

.cdv-modelo-section {
    border: 2px dashed var(--verde-escuro);
    margin-top: 6px;
    padding: 4px;
}

.cdv-modelo-sub-header {
    background-color: var(--verde-escuro);
    color: #fff;
    text-align: center;
    padding: 6px 4px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.cdv-modelo-pill {
    background: #fff;
    border: 1px solid var(--verde-escuro);
    border-radius: 8px;
    text-align: center;
    padding: 4px 6px;
    margin: 3px 0;
    font-size: 0.75rem;
    color: var(--cinza-primario);
}

.cdv-modelo-inner-grid {
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 4px;
}

.cdv-rede-credenciada {
    background: #fff;
    border: 1px solid var(--verde-escuro);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.7rem;
    color: var(--cinza-primario);
    padding: 6px 4px;
}

.cdv-modelo-second-section {
    border: 2px dashed var(--verde-escuro);
    margin-top: 6px;
    padding: 4px;
}

.cdv-modelo-block {
    margin-bottom: 6px;
}

.cdv-modelo-block-header {
    background-color: var(--verde-escuro);
    color: #fff;
    text-align: center;
    padding: 5px 4px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 3px;
}

.cdv-modelo-block-body {
    background: #fff;
    border: 1px solid var(--verde-escuro);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.74rem;
    color: var(--cinza-primario);
}

/* ── Coluna OUTPUTS ── */
.cdv-outputs {
    background-color: var(--verde-escuro);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cdv-outputs-header {
    background-color: var(--verde-claro);
    color: var(--verde-escuro);
    border: 2px solid #fff;
    border-radius: 8px;
    text-align: center;
    padding: 6px;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
}

.cdv-outputs-body {
    background-color: var(--verde-claro);
    border: 2px solid #fff;
    border-radius: 40px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    justify-content: space-between;
}

    .cdv-outputs-body p {
        font-size: 0.82rem;
        color: var(--cinza-primario);
        margin: 0;
        line-height: 1.6;
    }

    .cdv-outputs-body .bold {
        font-weight: bold;
        color: var(--cinza-primario);
    }

    .cdv-outputs-body a {
        color: var(--verde-escuro);
        text-decoration: underline;
        font-size: 0.78rem;
    }

.cdv-output-item {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* ── Responsivo: mobile (<= 900px) empilha tudo ── */
@media (max-width: 900px) {
    .cdv-grid {
        grid-template-columns: 1fr;
    }

    .cdv-modelo {
        max-width: 100%;
        min-width: unset;
    }

    .cdv-capital-row {
        grid-template-columns: 1fr;
    }

    .cdv-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .cdv-capital-label {
        width: 100%;
    }

    .cdv-inputs-header {
        justify-content: center;
    }
}

:root {
    --cinza-primario: #3c3c3b;
    --cinza-secundario: #706f6f;
    --verde-primario: #b3db38;
    --verde-secundario: #b1c757;
    --verde-bem-claro: #ebf1e6;
    --verde-claro: #e2f0d9;
    --verde-escuro: #00995d;
    --verdew-limao: #dfecb7;
    --branco: #fff;
    --cinza: #706f6f;
    --preto: #000;
}

/* ── Layout geral do diagrama ── */
.cdv-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 16px;
    align-items: stretch;
    margin-top: 2rem;
}

/* ── Coluna INPUTS ── */
.cdv-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cdv-inputs-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.cdv-inputs-header-badge {
    padding: 6px 32px;
    color: var(--verde-escuro);
    border: 3px solid var(--verde-escuro);
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    background: transparent;
    letter-spacing: 1px;
}

.cdv-capital-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
}

.cdv-capital-box {
    border: 2px dashed var(--verde-escuro);
    border-radius: 14px; /* menos arredondado */
    padding: 14px 18px 10px;
    background-color: #f8f8f8; /* leve fundo cinza */
}

    .cdv-capital-box ul {
        list-style: none; /* remove bolinha padrão */
        padding-left: 0;
    }

        .cdv-capital-box ul li {
            position: relative;
            padding-left: 18px;
            color: var(--cinza-primario);
        }

            .cdv-capital-box ul li::before {
                content: "•";
                position: absolute;
                left: 0;
                top: 0;
                color: var(--verde-escuro);
                font-weight: bold;
            }

.cdv-arrow {
    color: var(--verde-escuro);
    font-size: 2rem; /* maior */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
}

.cdv-capital-label {
    background-color: var(--verde-escuro);
    color: #fff;
    border-radius: 20px;
    padding: 12px 16px;
    font-size: 0.85rem;
    width: 150px; /* um pouco maior */
}

/* ── Coluna MODELO DE NEGÓCIO (centro) ── */
.cdv-modelo {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 220px;
    max-width: 240px;
}

.cdv-modelo-header {
    background-color: var(--verde-escuro);
    color: #fff;
    text-align: center;
    padding: 8px 4px;
    font-weight: bold;
    font-size: 0.9rem;
}

.cdv-modelo-section {
    border: 2px dashed var(--verde-escuro);
    margin-top: 6px;
    padding: 4px;
}

.cdv-modelo-sub-header {
    background-color: var(--verde-escuro);
    color: #fff;
    text-align: center;
    padding: 6px 4px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.cdv-modelo-pill {
    background: #fff;
    border: 1px solid var(--verde-escuro);
    border-radius: 8px;
    text-align: center;
    padding: 4px 6px;
    margin: 3px 0;
    font-size: 0.75rem;
    color: var(--cinza-primario);
}

.cdv-modelo-inner-grid {
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 4px;
}

.cdv-rede-credenciada {
    background: #fff;
    border: 1px solid var(--verde-escuro);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.7rem;
    color: var(--cinza-primario);
    padding: 6px 4px;
}

.cdv-modelo-second-section {
    border: 2px dashed var(--verde-escuro);
    margin-top: 6px;
    padding: 4px;
}

.cdv-modelo-block {
    margin-bottom: 6px;
}

.cdv-modelo-block-header {
    background-color: var(--verde-escuro);
    color: #fff;
    text-align: center;
    padding: 5px 4px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 3px;
}

.cdv-modelo-block-body {
    background: #fff;
    border: 1px solid var(--verde-escuro);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.74rem;
    color: var(--cinza-primario);
}

/* ── Coluna OUTPUTS ── */
.cdv-outputs {
    background-color: var(--verde-escuro);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cdv-outputs-header {
    background-color: var(--verde-claro);
    color: var(--verde-escuro);
    border: 2px solid #fff;
    border-radius: 8px;
    text-align: center;
    padding: 6px;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
}

.cdv-outputs-body {
    background-color: var(--verde-claro);
    border: 2px solid #fff;
    border-radius: 40px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    justify-content: space-between;
}

    .cdv-outputs-body p {
        font-size: 0.82rem;
        color: var(--cinza-primario);
        margin: 0;
        line-height: 1.6;
    }

    .cdv-outputs-body .bold {
        font-weight: bold;
        color: var(--cinza-primario);
    }

    .cdv-outputs-body a {
        color: var(--verde-escuro);
        text-decoration: underline;
        font-size: 0.78rem;
    }

.cdv-output-item {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* ── Responsivo: mobile (<= 900px) empilha tudo ── */
@media (max-width: 900px) {
    .cdv-grid {
        grid-template-columns: 1fr;
    }

    .cdv-modelo {
        max-width: 100%;
        min-width: unset;
    }

    .cdv-capital-row {
        grid-template-columns: 1fr;
    }

    .cdv-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .cdv-capital-label {
        width: 100%;
    }

    .cdv-inputs-header {
        justify-content: center;
    }
}

:root {
    --cinza-primario: #3c3c3b;
    --cinza-secundario: #706f6f;
    --verde-primario: #b3db38;
    --verde-secundario: #b1c757;
    --verde-bem-claro: #ebf1e6;
    --verde-claro: #e2f0d9;
    --verde-escuro: #00995d;
    --verdew-limao: #dfecb7;
    --branco: #fff;
    --cinza: #706f6f;
    --preto: #000;
}

.tabela-residuos {
    border-collapse: collapse;
    width: 100%;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
}

    .tabela-residuos thead tr {
        background-color: #4a7c2f;
        color: white;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .tabela-residuos thead th {
        padding: 10px 12px;
        border: 1px solid #3a6020;
    }

        .tabela-residuos thead th.col-ano {
            background-color: #6aaa3a;
        }

    .tabela-residuos tbody tr {
        background-color: #ffffff;
    }

        .tabela-residuos tbody tr:nth-child(even) {
            background-color: #f4f9f0;
        }

    .tabela-residuos tbody td {
        padding: 9px 12px;
        border: 1px solid #c8ddb8;
        color: #2c2c2c;
    }

        .tabela-residuos tbody td:first-child {
            font-weight: 600;
            color: #2c4a1e;
        }

        .tabela-residuos tbody td:not(:first-child):not(:last-child) {
            text-align: right;
        }

        .tabela-residuos tbody td:last-child {
            text-align: center;
            color: #3a6020;
            font-style: italic;
        }

.ps-5 {
    padding-left: 3rem;
}

.section {
    margin-bottom: 2.5rem;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 1rem;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

/* ── Tabela salarial ── */
.tbl {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

    .tbl th {
        background: #4a7c2f;
        color: #fff;
        font-weight: 600;
        padding: 7px 10px;
        text-align: center;
        border: 1px solid #3a6020;
        font-size: 11px;
    }

    .tbl td {
        padding: 6px 10px;
        border: 1px solid #c8ddb8;
        font-size: 11px;
    }

    .tbl tr:nth-child(even) td {
        background: #f4f9f0;
    }

    .tbl .val {
        text-align: right;
    }

    .tbl .center {
        text-align: center;
    }

    .tbl .empresa-row td {
        background: #4a7c2f !important;
        color: #fff;
        font-weight: 600;
        text-align: center;
        font-size: 11px;
    }

    .tbl .tag {
        font-size: 10px;
        color: #777;
        font-style: italic;
    }

/* ── Mini tabelas ── */
.mini-tbl-wrap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.mini-tbl {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 160px;
}

    .mini-tbl th {
        background: #f4f4f4;
        font-weight: 600;
        padding: 6px 10px;
        border: 1px solid #d0d0d0;
        font-size: 11px;
    }

    .mini-tbl td {
        padding: 5px 10px;
        border: 1px solid #e0e0e0;
    }

        .mini-tbl td:last-child {
            text-align: right;
            font-weight: 600;
        }

/* ── Tabela grande (rotatividade) ── */
.big-tbl {
    border-collapse: collapse;
    width: 100%;
    font-size: 11px;
}

    .big-tbl th {
        background: #e8e8e8;
        font-weight: 600;
        padding: 6px 8px;
        border: 1px solid #ccc;
        text-align: right;
        font-size: 10px;
    }

        .big-tbl th:first-child {
            text-align: left;
        }

    .big-tbl td {
        padding: 5px 8px;
        border: 1px solid #e0e0e0;
        text-align: right;
    }

        .big-tbl td:first-child {
            text-align: left;
            font-weight: 600;
        }

    .big-tbl tr.subheader td {
        background: #f5f5f5;
        font-weight: 600;
        color: #444;
    }

    .big-tbl tr.region td:first-child {
        padding-left: 16px;
        font-weight: normal;
    }

    .big-tbl .pct {
        color: #c05000;
        font-weight: 600;
    }

/* ── Tabela comitês ── */
.comite-tbl {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

    .comite-tbl th {
        font-weight: 600;
        padding: 7px 12px;
        border: 1px solid #d0d0d0;
        font-size: 11px;
        color: #555;
        background: #f9f9f9;
    }

    .comite-tbl td {
        padding: 6px 12px;
        border: 1px solid #e8e8e8;
    }

        .comite-tbl td:not(:first-child) {
            text-align: center;
        }

    .comite-tbl tr:last-child td {
        font-weight: 600;
        background: #f9f9f9;
    }

.bar-m {
    display: inline-block;
    height: 8px;
    background: #4a7c2f;
    border-radius: 2px;
}

.bar-f {
    display: inline-block;
    height: 8px;
    background: #a8d5b8;
    border-radius: 2px;
}

/* ── Charts ── */
.chart-wrap {
    position: relative;
    width: 100%;
}

/* ── Legend ── */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

    .legend span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .legend .dot {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        flex-shrink: 0;
    }

.legend-custom {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 15px;
}

    .legend-custom div {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #333;
        font-weight: 500;
        gap: 6px;
    }

    .legend-custom img {
        height: 18px; /* controla o tamanho */
        width: auto; /* mantém proporção */
        object-fit: contain;
    }

.container-organograma {
    display: flex;
    background: #f5f2eb;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    min-height: 600px;
}

.container-organograma .chart-area {
    flex: 1;
    padding: 24px 16px;
}

.container-organograma .info-panel {
    width: 270px;
    background: #f5f2eb;
    border-left: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}

.container-organograma .placeholder {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.5;
}

.container-organograma .info-content {
    display: none;
    text-align: left;
    font-size: 0.87rem;
    color: #222;
    line-height: 1.65;
}

.container-organograma .info-title {
    font-weight: bold;
}

.container-organograma svg {
    display: block;
    margin: 0 auto;
    overflow: visible;
}

.container-organograma .box-static rect {
    fill: #fff;
    stroke: #2e7d5e;
    stroke-width: 1.5;
}

.container-organograma .box-static text {
    fill: #2e7d5e;
    font-size: 11px;
    font-family: Arial, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
}

.container-organograma .box-click {
    cursor: pointer;
}

.container-organograma .box-click rect {
    fill: #fff;
    stroke: #2e7d5e;
    stroke-width: 1.5;
    transition: fill .15s;
}

.container-organograma .box-click:hover rect,
.container-organograma .box-click.active rect {
    fill: #d4ede3;
}

.container-organograma .box-click text {
    fill: #2e7d5e;
    font-size: 11px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.container-organograma .hl rect {
    fill: #2e7d5e !important;
}

.container-organograma .hl text {
    fill: #fff !important;
}

.container-organograma .hl.active rect {
    fill: #d4ede3 !important;
}

.container-organograma .hl.active text {
    fill: #2e7d5e !important;
}