/* ==========================================================
   Governança Corporativa - Accordion com colunas
   Cole este bloco no seu arquivo de CSS institucional
   (usa as mesmas cores já existentes no tema: #039296 / #006466)
   ========================================================== */

.governanca-accordion .panel {
    margin-bottom: 20px;
    border: 1px solid #d5eef0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.governanca-accordion .panel-heading {
    padding: 0;
    background-color: #eaf7f8;
    border-bottom: none;
}

.governanca-accordion .panel-title {
    margin: 0;
    font-size: 16px;
}

    .governanca-accordion .panel-title > a {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        color: #039296 !important;
        font-weight: bold;
        letter-spacing: 0.3px;
        text-decoration: none !important;
    }

        .governanca-accordion .panel-title > a:hover,
        .governanca-accordion .panel-title > a:focus {
            color: #039296 !important;
            text-decoration: none !important;
        }

        /* garante que o texto do título (fora do ícone e da seta) herde o mesmo verde */
        .governanca-accordion .panel-title > a .titulo-texto {
            color: #039296 !important;
        }

/* ícone circular à esquerda do título (fa-users / fa-search) */
.governanca-accordion .icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 15px;
    border-radius: 50%;
    background-color: #039296;
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
}

/* seta que indica abrir/fechar, gira sozinha via classe .collapsed do Bootstrap */
.governanca-accordion .panel-title .fa-chevron-down {
    margin-left: auto;
    color: #039296 !important;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.governanca-accordion .panel-title > a:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}

.governanca-accordion .panel-body {
    padding: 25px 30px;
    background-color: #fff;
}

/* título das colunas "Membros efetivos" / "Membros suplentes" em verde */
.governanca-accordion .coluna-titulo {
    margin-top: 0;
    margin-bottom: 15px;
    color: #039296;
    font-weight: bold;
    font-size: 15px;
}

.governanca-accordion .lista-membros {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .governanca-accordion .lista-membros li {
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
        padding: 10px 0;
        border-bottom: 1px solid #ededed;
    }

        .governanca-accordion .lista-membros li:last-child {
            border-bottom: none;
        }

        .governanca-accordion .lista-membros li strong {
            color: #313131;
            font-weight: bold;
        }

        .governanca-accordion .lista-membros li .divisor {
            margin: 0 10px;
            color: #c9c9c9;
            font-weight: normal;
        }

        .governanca-accordion .lista-membros li span.cargo {
            color: #8d8d8d;
            font-size: 13px;
            font-weight: normal;
        }

/* Diretoria Executiva: cargo fica abaixo do nome (cada cargo é único,
   não é redundante como nos conselhos) */
.governanca-accordion .lista-diretoria li {
    display: block;
}

    .governanca-accordion .lista-diretoria li strong {
        display: block;
    }

    .governanca-accordion .lista-diretoria li span.cargo {
        display: block;
        margin-top: 4px;
    }

@media (max-width: 767px) {
    .governanca-accordion .panel-body {
        padding: 20px;
    }

    .governanca-accordion .panel-title > a {
        padding: 14px 15px;
    }

    .governanca-accordion .icon-circle {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        font-size: 13px;
    }
}

/* só em telas bem estreitas (celular) permite nome | cargo quebrar linha,
   pra não estourar a tela horizontalmente */
@media (max-width: 420px) {
    .governanca-accordion .lista-membros li {
        flex-wrap: wrap;
    }
}
