:root {
    --cor-ouvidoria-principal: #f05820;
    --cor-ouvidoria-secundaria: #fb730fe6;
    --cor-ouvidoria-mulher: #df436f;
    --cor-ouvidoria-SIC: #ff8f3d;
    --cor-ouvidoria-LGPD: #fd6d00cc;
}

.ouvidoria-primary-text-color {
    color: var(--cor-ouvidoria-principal);
}

.ouvidoria-secundary-text-color {
    color: var(--cor-secundaria);
}

.ouvidoria-mulher-text-color {
    color: var(--cor-ouvidoria-mulher);
}

.box-formulario {
    /*border-radius: 5%;*/
    color: white;
    font-weight: bold;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
    aspect-ratio: 1;
    flex-basis: 225px;
    text-align: center;
}

.box-formulario u {
    color: white;
    font-size: 12px;
    cursor: pointer;
}

    a.box-formulario {
        color: white;
        text-decoration: none;
    }
    a.box-formulario:hover {
        cursor: pointer;
    }

    .descricao-form-ouvidoria {
        font-weight: 500;
        font-size: 16px;
    }
    .box-formulario:hover .descricao-form-ouvidoria {
    text-decoration: underline;
}

    .grupo-formulario > .box-formulario:nth-of-type(1) {
        background-color: var(--cor-ouvidoria-principal);
    }
    .grupo-formulario > .box-formulario:nth-of-type(2) {
        background-color: var(--cor-ouvidoria-mulher);
    }
    .grupo-formulario > .box-formulario:nth-of-type(3) {
        background-color: var(--cor-ouvidoria-SIC);
    }
    .grupo-formulario > .box-formulario:nth-of-type(4) {
        background-color: var(--cor-ouvidoria-LGPD);
    }


.titulo-ouvidoria {
    margin-bottom: 0px;
    color: var(--cor-ouvidoria-secundaria);
}

h2.titulo-ouvidoria {
    color: var(--cor-ouvidoria-principal)
}

.subtitulo-ouvidoria {
    margin-top: 50px;
    margin-bottom: 20px;
    color: var(--cor-ouvidoria-secundaria);
}

hr {
    margin-top: 10px;
    margin-bottom: 25px;
}

.imgFull {
    width: 100%;
    margin-bottom: 30px;
}

p {
    margin-bottom: 25px;
}

ul li {
    margin-bottom: 5px;
}

/*------INICIO DA OUVIDORIA MULHER------*/

.flex-mulher {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.flex-mulher > div:first-of-type {
        width: 75%;
        flex-grow: 1;
    }
.ouvidoria-mulher-bg-color {
    background: var(--cor-ouvidoria-mulher);
}

/*.titulo-ouvidoria-mulher {
    color: var(--cor-ouvidoria-mulher);
}*/

/*------FIM DA OUVIDORIA MULHER------*/
section {
    padding: 0px;
}

.cls-1 {
    fill: var(--cor-ouvidoria-mulher);
    stroke-width: 0px;
}

.sizeMulher {
    display: flex;
    margin: 15px 0;
}

    .sizeMulher svg {
        width: 10%;
        aspect-ratio: 4/3;
    }

    .sizeMulher ul {
        width: 80%;
    }

.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    background: #FFF;
    color: #000;
    padding: 12px 16px;
    z-index: 9999;
    text-decoration: none;
    border-radius: 4px;
}

    .skip-link:focus {
        top: 16px;
    }


    a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #005ea8 !important;
    outline-offset: 2px;
}


/*----------início dos Formulários---------------*/

.grupo-formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

@media (max-width: 991px) {
    .grupo-formulario {
        gap: 20px;
    }

    .grupo-formulario > * {
        width: calc(50% - 10px);
    }
}

@media (max-width: 744px) {
    .grupo-formulario {
        justify-content: space-evenly;
    }
}

/*-----------Fim dos formulários--------------------*/



/*--------Ínicio do fluxograma--------------*/

.ouvidoria-flex-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 20px 0;
}

@media (max-width: 1199px) {
    .ouvidoria-flex-container {
        justify-content: space-evenly;
        gap: 20px;
    }
}

.ouvidoria-box-phase {
    width: 14%;
    min-width: 100px;
    height: auto;
    display: flex;
    flex-direction: column;
}

    .ouvidoria-box-phase span {
        font-size: 22px;
        font-weight: bold;
    }


    .ouvidoria-box-phase-img-container {
        width: 100%;
        height: auto;
        aspect-ratio: 5/3;
        min-height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ouvidoria-box-phase-img-container img {
        width: 70px;
        aspect-ratio: 1;
        border-radius: 50%;
        z-index: 1;
    }


        .ouvidoria-box-phase-content-container {
            width: 100%;
            height: auto;
            min-height: 60px;
            flex-grow: 1;
            text-align: center;
        }

    .ouvidoria-box-phase-content-container h5 {
        margin: 0;
    }

    /* odd controla elementos ímpares, even controla elementos pares */
    .ouvidoria-flex-container .ouvidoria-box-phase:nth-of-type(odd) span {
        color: var(--cor-ouvidoria-principal);
    }

    .ouvidoria-flex-container .ouvidoria-box-phase:nth-of-type(even) span {
        color: var(--cor-ouvidoria-secundaria);
    }

    .ouvidoria-flex-container .ouvidoria-box-phase:nth-of-type(odd) img {
        background: var(--cor-ouvidoria-principal);
    }

    .ouvidoria-flex-container .ouvidoria-box-phase:nth-of-type(even) img {
        background: var(--cor-ouvidoria-secundaria);
    }


 /*Linhas do fluxograma*/

.ouvidoria-phase-line {
    position: relative;
}

/* esse ::before irá reproduzir a primeira linha do fluxograma */
    .ouvidoria-phase-line::before {
        content: "";
        width: 85%;
        height: 2px;
        background: #eee;
        position: absolute;
        top: 48px;
        left: 77px;
    }

    /* esse ::after será chamado em @medias com menos de 744px para reproduzir a segunda linha em largura diferente da primeira (::before) */
    .ouvidoria-phase-line::after {
        content: "";
        width: 0;
        height: 2px;
        background: #eee;
        position: absolute;
    }

@media (max-width: 1199px) {
    .ouvidoria-phase-line::before {
        top: 40px;
    }
}

@media (max-width: 991px) {
    .ouvidoria-phase-line::before {
        top: 30px;
    }
}

/*@media (max-width:744px) {
    .ouvidoria-phase-line::after {
        width: 40%;
        top: 355px;
        left: 212px;
    }
}*/

@media (max-width: 729px) {
    .ouvidoria-phase-line::before {
        width: 75%;
    }

    .ouvidoria-phase-line::after {
        width: 40%;
        top: 325px;
    }
    
}

@media (max-width: 625px) {
    .ouvidoria-phase-line::after {
        width: 45%;
        top: 330px;
        left: 150px;
    }
}

@media (max-width: 609px) {

    .ouvidoria-phase-line::after {
        width: 60%;
        top: 330px;
        left: 121px;
    }
}


@media (max-width: 504px) {
    .ouvidoria-phase-line::after {
        width: 60%;
        top: 265px;
        left: 79px;
    }
}

@media (max-width: 489px) {
    .ouvidoria-phase-line::before {
        width: 58%;
    }

    .ouvidoria-phase-line::after {
        top: 265px;
    }
}

@media (max-width: 369px) {
    .ouvidoria-phase-line::after {
        width: 50%;
        top: 265px;
        left: 79px;
        /*o box-shadow irá reproduzir a terceira linha a partir da segunda linha*/
        box-shadow: 0 295px 0 0 #eee;
    }
}

@media (max-width: 249px) {
    .ouvidoria-phase-line::before {
        width: 0;
        height: 0;
    }

    .ouvidoria-phase-line::after {
        width: 0;
        height: 0;
    }
}


/*--------------Fim do fluxograma--------------*/


/*--------------inicio do menu horizontal--------------*/


.ouvidoria-menu-horizontal-container {
    display: flex;
    width: 85%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
    margin: 0 auto;
    text-align: center;
}

.ouvidoria-card {
    display: flex;
    flex-direction: column;
    width: 13%;
    min-width: 118px;
    border: none;
    border-bottom: 4px solid #d6d5d5;
    box-sizing: border-box;
    background-color: transparent;
}

a.ouvidoria-card {
    color: inherit;
    text-decoration: none;
}

.ouvidoria-card p {
    font-size: 16px;
    margin: 0;
    margin-bottom: 5px;
}



.ouvidoria-card-img-container {
    width: 100%;
    aspect-ratio: 4/2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ouvidoria-card-img-container img {
    width: 60px;
    aspect-ratio: 1;
    object-fit: fill;

}

.ouvidoria-card-text-container {
    /*foi usado flex aqui apenas para centralizar verticalmente o texto*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*como o pai está no padrão colunm, a altura dos elementos com essa classe será igualado com flex-grow 1*/
    flex-grow: 1;
}


/*--------------Fim do menu horizontal--------------*/



/*--------------Início das seções--------------*/


#ouvidoria-conteudo-principal :is(#orientacoes, #sec-competencias, #sec-ouvidores, #sec-pesquisa, #sec-regulamentacao, #sec-perguntas) a {
    color: var(--cor-ouvidoria-secundaria);
}

#ouvidoria-conteudo-principal {
    text-align: justify;
}

#ouvidoria-conteudo-principal :is(.ouvidoria-menu-horizontal-container, .ouvidoria-flex-container) {
    text-align: center;
}

#ouvidoria-conteudo-principal #sec-relatorios {
    text-align: left;
    white-space: nowrap;
}

/*--------------Início da seção Competencias--------------*/

#sec-competencias :is(p, li) {
    margin: 15px 0;
}

/*--------------Fim da seção competencias--------------*/

/*--------------Inicio da seção ouvidores--------------*/

.ouvidores-flex {
    display: flex;
}

/*--------------Fim da seção ouvidores--------------*/


/*--------------Início da seção relatórios anuais--------------*/

#sec-relatorios a {
    color: inherit;
}

.ouvidoria-menu-relatorios {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 75px;
}

/*--------------Fim da seção relatórios anuais--------------*/




/*classes usadas no Javascript para troca de seções*/

/*classe usada em todas as section*/
.ouvidoria-section {
    display: none;
}

.secaoAtiva {
    display: block;
}

.botaoAtivo {
    border-bottom-color: var(--cor-ouvidoria-secundaria);
}