/* ==========================================================
   PORTAL DA TRANSPARÊNCIA
   Gibi Esporte Educação
   Arquivo: transparencia.css
========================================================== */

/* =======================
   VARIÁVEIS
======================= */

:root{

    --verde:#00897B;
    --verde-escuro:#00695C;
    --verde-claro:#00A99D;

    --amarelo:#F4B400;

    --cinza:#f5f7f8;

    --texto:#444;

    --borda:#d9d9d9;

    --branco:#ffffff;

}


/* =======================
   GERAL
======================= */

body{

    background:var(--cinza);

    color:var(--texto);

    font-family:Arial, Helvetica, sans-serif;

    font-size:16px;

}


a{

    text-decoration:none;

}


img{

    max-width:100%;

}


/* =======================
   TOPO
======================= */

.topo{

    background:linear-gradient(
            90deg,
            var(--verde),
            var(--verde-claro)
    );

    color:white;

    padding:40px 0;

    margin-bottom:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}


.topo h1{

    font-size:38px;

    font-weight:bold;

    margin-bottom:8px;

}


.topo p{

    font-size:18px;

    margin:0;

}


/* =======================
   CARDS
======================= */

.card{

    border:none;

    border-radius:12px;

}


.card-header{

    background:var(--verde);

    color:white;

    font-weight:bold;

    font-size:18px;

}


.card-body{

    background:white;

}


/* =======================
   PAINEL
======================= */

.painel{

    cursor:pointer;

    border-radius:8px;

    transition:.35s;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}


.painel:hover{

    transform:scale(1.01);

}


/* =======================
   INDICADORES
======================= */

.indicador{

    text-align:center;

    transition:.35s;

    margin-bottom:20px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}


.indicador:hover{

    transform:translateY(-5px);

}


.indicador h5{

    color:var(--verde);

    font-size:16px;

}


.indicador h2{

    color:var(--verde-escuro);

    font-size:34px;

    margin-top:10px;

}


/* =======================
   FILTROS
======================= */

.form-control,
.form-select{

    border-radius:8px;

    border:1px solid var(--borda);

    min-height:48px;

}


.form-control:focus,
.form-select:focus{

    border-color:var(--verde);

    box-shadow:0 0 0 .15rem rgba(0,137,123,.25);

}


/* =======================
   TABELA
======================= */

table{

    background:white;

}


table thead{

    background:var(--verde);

    color:white;

}


table thead th{

    text-align:center;

    vertical-align:middle;

}


table tbody td{

    vertical-align:middle;

}


table tbody tr:hover{

    background:#edf9f8;

}


/* =======================
   MINIATURA
======================= */

.miniatura{

    width:70px;

    border-radius:5px;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 2px 8px rgba(0,0,0,.20);

}


.miniatura:hover{

    transform:scale(1.15);

}


/* =======================
   DOWNLOAD
======================= */

.btn-download{

    background:var(--verde);

    color:white;

    padding:8px 18px;

    border-radius:6px;

    display:inline-block;

    transition:.3s;

    font-weight:bold;

}


.btn-download:hover{

    background:var(--verde-escuro);

    color:white;

}


/* =======================
   MODAL
======================= */

.modal-content{

    border-radius:12px;

}


.modal-header{

    background:var(--verde);

    color:white;

}


.modal-body{

    background:#fafafa;

}


#imagemGrande{

    border-radius:10px;

}


/* =======================
   DATATABLE
======================= */

.dataTables_wrapper{

    margin-top:20px;

}


.dataTables_filter{

    display:none;

}


.dataTables_length select{

    border-radius:5px;

}


.page-item.active .page-link{

    background:var(--verde);

    border-color:var(--verde);

}


.page-link{

    color:var(--verde);

}


.page-link:hover{

    color:var(--verde-escuro);

}


/* =======================
   BADGES
======================= */

.badge{

    padding:8px 10px;

    border-radius:20px;

}


.badge-painel{

    background:#00796B;

    color:white;

}


.badge-prestacao{

    background:#1976D2;

    color:white;

}


.badge-edital{

    background:#FF9800;

    color:white;

}


.badge-relatorio{

    background:#9C27B0;

    color:white;

}


/* =======================
   RODAPÉ
======================= */

footer{

    margin-top:60px;

    padding:30px;

    background:var(--verde);

    color:white;

    text-align:center;

}


/* =======================
   RESPONSIVO
======================= */

@media(max-width:992px){

.topo h1{

font-size:30px;

}

}


@media(max-width:768px){

.topo{

text-align:center;

}

.indicador{

margin-bottom:15px;

}

table{

font-size:14px;

}

.miniatura{

width:55px;

}

}


@media(max-width:576px){

.topo h1{

font-size:26px;

}

.card-header{

font-size:16px;

}

.indicador h2{

font-size:28px;

}

.form-control,
.form-select{

margin-bottom:12px;

}

}


/* =======================
   IMPRESSÃO
======================= */

@media print{

body{

background:white;

}

.topo{

background:white;

color:black;

box-shadow:none;

}

.btn-download{

display:none;

}

.form-control,
.form-select{

display:none;

}

}