/* =========================================================
   FINANCEIRO CLIMATIKO
========================================================= */

.fin-menu-climatiko{
  margin:2px 0 8px 21px;

  padding-left:8px;

  border-left:
    1px solid rgba(255,255,255,.16);
}


.fin-menu-climatiko.fechado{
  display:none;
}


.fin-menu-climatiko button{
  width:100%;

  min-height:31px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:6px 8px;

  border:0;

  border-radius:6px;

  background:transparent;

  color:#eaf4fa;

  text-align:left;

  font-size:9px;
}


.fin-menu-climatiko button:hover,
.fin-menu-climatiko button.ativo{
  background:
    rgba(255,255,255,.11);
}


.fin-menu-grupo{
  margin-top:4px;

  background:
    rgba(255,255,255,.07)
    !important;
}


.fin-menu-grupo strong{
  flex:1;

  font-size:9px;
}


.fin-menu-grupo i{
  font-style:normal;
}


.fin-menu-filhos{
  padding-left:17px;
}


.fin-menu-filhos.fechado{
  display:none;
}


.fin-arrow{
  margin-left:auto;
}


body.sidebar-collapsed
.fin-menu-climatiko{
  display:none !important;
}



/* =========================================================
   PAGINA
========================================================= */

.fin-pagina{
  max-width:1450px;

  margin:0 auto;
}


.fin-titulo{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:13px;

  padding:18px 20px;

  background:#fff;

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

  border-radius:13px;
}


.fin-titulo > div > span{
  color:var(--royal);

  font-size:8px;

  font-weight:900;

  letter-spacing:1px;
}


.fin-titulo h2{
  margin:4px 0 0;

  color:var(--navy);

  font-size:20px;
}


.fin-titulo p{
  margin:4px 0 0;

  color:#667085;

  font-size:9px;
}



/* =========================================================
   BOTOES
========================================================= */

.fin-btn-primary,
.fin-btn-secondary{
  min-height:38px;

  padding:0 15px;

  border-radius:8px;

  font-size:9px;

  font-weight:800;
}


.fin-btn-primary{
  border:0;

  background:var(--royal);

  color:#fff;
}


.fin-btn-secondary{
  border:1px solid var(--line);

  background:#fff;

  color:#667085;
}


.fin-btn-icon{
  width:31px;

  height:31px;

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

  border-radius:7px;

  background:#fff;

  color:var(--navy);
}



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

.fin-filtros{
  margin-bottom:13px;

  background:#fff;

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

  border-radius:13px;

  box-shadow:var(--shadow);
}


.fin-filtros-cabecalho{
  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:12px 15px;

  border-bottom:1px solid var(--line);
}


.fin-filtros-cabecalho strong{
  display:block;

  color:var(--navy);

  font-size:11px;
}


.fin-filtros-cabecalho span{
  display:block;

  margin-top:2px;

  color:#98a2b3;

  font-size:8px;
}


.fin-filtros-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;

  padding:14px 15px;
}


.fin-filtros-grid.fechado{
  display:none;
}


.fin-filtros-grid label,
.fin-modal-grid label{
  display:block;

  margin-bottom:4px;

  color:#344054;

  font-size:8px;

  font-weight:800;
}


.fin-filtros-grid input,
.fin-filtros-grid select,
.fin-modal-grid input,
.fin-modal-grid select,
.fin-modal-grid textarea{
  width:100%;

  border:1px solid #d7e0e9;

  border-radius:7px;

  background:#fff;

  color:#172033;

  outline:none;

  font-size:10px;
}


.fin-filtros-grid input,
.fin-filtros-grid select,
.fin-modal-grid input,
.fin-modal-grid select{
  height:37px;

  padding:0 9px;
}


.fin-modal-grid textarea{
  padding:9px;

  resize:vertical;
}


.fin-filtros-grid input:focus,
.fin-filtros-grid select:focus,
.fin-modal-grid input:focus,
.fin-modal-grid select:focus,
.fin-modal-grid textarea:focus{
  border-color:var(--sky);

  box-shadow:
    0 0 0 3px
    rgba(121,199,237,.13);
}


.span2{
  grid-column:span 2;
}


.span4{
  grid-column:1/-1;
}


.fin-filtros-botoes{
  display:flex;

  justify-content:flex-end;

  gap:7px;

  padding-top:3px;
}



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

.fin-lista-card{
  background:#fff;

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

  border-radius:13px;

  box-shadow:var(--shadow);

  overflow:visible;
}


.fin-lista-topo{
  padding:14px 16px;

  border-bottom:1px solid var(--line);
}


.fin-lista-topo strong{
  display:block;

  color:var(--navy);

  font-size:12px;
}


.fin-lista-topo span{
  display:block;

  margin-top:3px;

  color:#98a2b3;

  font-size:8px;
}


.fin-table-scroll{
  overflow-x:auto;
}


.fin-table{
  width:100%;

  border-collapse:collapse;

  font-size:9px;
}


.fin-table th{
  padding:10px;

  background:#f7f9fc;

  color:#667085;

  font-size:7px;

  text-align:left;

  text-transform:uppercase;

  letter-spacing:.3px;
}


.fin-table td{
  padding:11px 10px;

  border-top:
    1px solid #edf1f5;

  color:#344054;

  vertical-align:middle;
}


.fin-table td strong{
  color:#172033;
}


.direita{
  text-align:right !important;
}


.fin-vazio{
  padding:45px !important;

  color:#98a2b3 !important;

  text-align:center !important;
}



/* =========================================================
   STATUS
========================================================= */

.fin-status{
  display:inline-flex;

  padding:4px 7px;

  border-radius:18px;

  font-size:8px;

  font-weight:800;
}


.fin-status.aberto{
  background:#eef4ff;

  color:#30449b;
}


.fin-status.vencido{
  background:#fff0f0;

  color:#c53b3b;
}


.fin-status.pago{
  background:#eaf8f0;

  color:#148552;
}



/* =========================================================
   ACOES
========================================================= */

.fin-acoes{
  position:relative;

  width:45px;

  text-align:center;
}


.fin-acoes-btn{
  width:29px;

  height:29px;

  border:0;

  border-radius:7px;

  background:#f4f7fb;

  color:var(--navy);

  font-size:17px;
}


.fin-acoes-menu{
  position:absolute;

  right:12px;

  top:39px;

  width:155px;

  padding:5px;

  background:#fff;

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

  border-radius:9px;

  box-shadow:
    0 12px 30px
    rgba(20,34,66,.16);

  z-index:100;
}


.fin-acoes-menu button{
  width:100%;

  display:block;

  padding:8px;

  border:0;

  border-radius:6px;

  background:#fff;

  color:#344054;

  text-align:left;

  font-size:9px;
}


.fin-acoes-menu button:hover{
  background:#f5f7fa;
}


.fin-acoes-menu button.perigo{
  color:#d44444;
}



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

.fin-modal-overlay{
  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:25px;

  background:
    rgba(10,18,45,.45);

  z-index:10000;
}


.fin-modal{
  width:min(850px,95vw);

  max-height:90vh;

  overflow-y:auto;

  background:#fff;

  border-radius:14px;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.25);
}


.fin-modal-head{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  padding:18px 20px;

  border-bottom:1px solid var(--line);
}


.fin-modal-head h3{
  margin:0;

  color:var(--navy);

  font-size:16px;
}


.fin-modal-head p{
  margin:4px 0 0;

  color:#667085;

  font-size:8px;
}


.fin-modal-head button{
  width:32px;

  height:32px;

  border:0;

  border-radius:7px;

  background:#f4f7fb;

  color:#667085;

  font-size:20px;
}


.fin-modal-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:12px;

  padding:19px 20px;
}


.fin-modal-footer{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  padding:14px 20px;

  border-top:1px solid var(--line);
}


.fin-modal-footer > div{
  display:flex;

  gap:7px;
}


#fmMensagem{
  color:#d44444;

  font-size:9px;

  font-weight:700;
}



@media(max-width:1000px){

  .fin-filtros-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media(max-width:650px){

  .fin-titulo{
    align-items:stretch;

    flex-direction:column;
  }


  .fin-filtros-grid,
  .fin-modal-grid{
    grid-template-columns:1fr;
  }


  .span2,
  .span4{
    grid-column:auto;
  }

}



/* =========================================================
   CONTAS A PAGAR - MODELO GESTAOCLICK / CLIMATIKO
========================================================= */

.cp-gc{
  width:100%;
}


.cp-gc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:12px;

  padding:2px 2px 10px;

  border-bottom:1px solid #e4e8ee;
}


.cp-gc-header-left{
  display:flex;
  align-items:center;
  gap:8px;
}


.cp-gc-title-icon{
  color:var(--navy);
  font-size:20px;
}


.cp-gc-header h2{
  margin:0;

  color:var(--navy);

  font-size:20px;
}


.cp-gc-breadcrumb{
  margin-top:4px;

  color:#98a2b3;

  font-size:8px;
}


/* TOOLBAR */

.cp-toolbar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;
}


.cp-toolbar-left,
.cp-toolbar-right{
  display:flex;

  align-items:center;

  gap:6px;
}


.cp-btn-dark,
.cp-btn-outline,
.cp-btn-light,
.cp-btn-icon{
  min-height:37px;

  padding:0 12px;

  border-radius:6px;

  font-size:9px;

  font-weight:700;

  cursor:pointer;
}


.cp-btn-dark{
  border:1px solid #101d2b;

  background:#101d2b;

  color:#fff;
}


.cp-btn-outline{
  border:1px solid #cfd6df;

  background:#fff;

  color:#344054;
}


.cp-btn-light{
  border:1px solid #d7dde5;

  background:#fff;

  color:#667085;
}


.cp-btn-icon{
  width:38px;

  padding:0;

  border:1px solid #cfd6df;

  background:#fff;

  color:#344054;
}


.cp-btn-dark:hover{
  opacity:.92;
}


.cp-lupa{
  width:39px;

  padding:0;
}


.cp-lupa.ativo{
  background:var(--royal);

  border-color:var(--royal);
}


.cp-periodo{
  min-width:132px;
}


.cp-dropdown-wrap{
  position:relative;
}


.cp-dropdown-menu{
  position:absolute;

  top:42px;

  right:0;

  min-width:170px;

  padding:5px;

  background:#fff;

  border:1px solid #d7dde5;

  border-radius:7px;

  box-shadow:
    0 10px 25px
    rgba(15,23,42,.14);

  z-index:200;
}


.cp-toolbar-left
.cp-dropdown-menu{
  left:0;
  right:auto;
}


.cp-dropdown-menu button{
  width:100%;

  display:block;

  padding:8px 10px;

  border:0;

  border-radius:5px;

  background:#fff;

  color:#344054;

  font-size:9px;

  text-align:left;
}


.cp-dropdown-menu button:hover{
  background:#f4f7fa;
}


.cp-periodo-menu{
  min-width:165px;
}



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

.cp-resumo-grid{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap:10px;

  margin-bottom:13px;
}


.cp-card{
  min-height:118px;

  padding:15px 16px;

  background:#fff;

  border:1px solid #dfe5ec;

  border-radius:8px;
}


.cp-card-top{
  display:flex;

  align-items:center;

  gap:9px;

  margin-bottom:14px;

  color:#344054;

  font-size:9px;

  font-weight:600;
}


.cp-card-icon{
  width:30px;

  height:30px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:5px;

  font-size:13px;

  font-weight:900;
}


.cp-card-icon.total{
  background:#eef1f4;
  color:#172033;
}


.cp-card-icon.vencido{
  background:#fae8ea;
  color:#d44444;
}


.cp-card-icon.hoje{
  background:#fff2de;
  color:#d38616;
}


.cp-card-icon.vencer{
  background:#edf1f5;
  color:#526174;
}


.cp-card-icon.pago{
  background:#e4f4e9;
  color:#149552;
}


.cp-card > strong{
  display:block;

  margin-bottom:5px;

  color:#101828;

  font-size:19px;
}


.cp-card small{
  color:#667085;

  font-size:8px;
}



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

.cp-filtros-painel{
  margin-bottom:13px;

  padding:17px 18px;

  background:#fff;

  border:1px solid #dfe5ec;

  border-radius:8px;
}


.cp-filtros-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:13px 18px;
}


.cp-filtros-grid label{
  display:block;

  margin-bottom:6px;

  color:#344054;

  font-size:8px;

  font-weight:600;
}


.cp-filtros-grid input,
.cp-filtros-grid select{
  width:100%;

  height:38px;

  padding:0 10px;

  border:1px solid #ccd5df;

  border-radius:4px;

  background:#fff;

  color:#344054;

  outline:none;

  font-size:10px;
}


.cp-filtros-grid input:focus,
.cp-filtros-grid select:focus{
  border-color:#7ac7ed;

  box-shadow:
    0 0 0 2px
    rgba(122,199,237,.12);
}


.cp-span2{
  grid-column:span 2;
}


.cp-periodo-range,
.cp-valor-range{
  display:grid;

  grid-template-columns:
    1fr 25px 1fr;

  align-items:center;

  gap:5px;
}


.cp-periodo-range span,
.cp-valor-range span{
  text-align:center;

  color:#667085;

  font-size:9px;
}


.cp-filtro-buttons{
  grid-column:1/-1;

  display:flex;

  gap:6px;

  padding-top:4px;
}



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

.cp-table-card{
  background:#fff;

  border:1px solid #dfe5ec;

  border-radius:8px;

  overflow:visible;
}


.cp-table-scroll{
  overflow-x:auto;
}


.cp-table{
  width:100%;

  border-collapse:collapse;

  font-size:9px;
}


.cp-table th{
  padding:11px 10px;

  border-right:1px solid #e1e6ec;

  border-bottom:1px solid #d8dee7;

  background:#fafbfc;

  color:#172033;

  font-size:8px;

  font-weight:700;

  text-align:left;
}


.cp-table td{
  padding:11px 10px;

  border-right:1px solid #edf0f4;

  border-bottom:1px solid #edf0f4;

  color:#344054;

  vertical-align:middle;
}


.cp-table tr:hover td{
  background:#fbfcfd;
}


.cp-check{
  width:37px;

  text-align:center !important;
}


.cp-status{
  display:inline-flex;

  align-items:center;

  padding:4px 7px;

  border:1px solid;

  border-radius:5px;

  font-size:8px;

  font-weight:700;
}


.cp-status.pago{
  border-color:#35a853;

  background:#eaf8ee;

  color:#16833c;
}


.cp-status.aberto{
  border-color:#6385d5;

  background:#eef4ff;

  color:#365aa6;
}


.cp-status.vencido{
  border-color:#d95c5c;

  background:#fff0f0;

  color:#bd3737;
}



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

@media(max-width:1200px){

  .cp-resumo-grid{
    grid-template-columns:
      repeat(3,1fr);
  }


  .cp-filtros-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media(max-width:750px){

  .cp-toolbar{
    align-items:stretch;
    flex-direction:column;
  }


  .cp-toolbar-left,
  .cp-toolbar-right{
    flex-wrap:wrap;
  }


  .cp-resumo-grid{
    grid-template-columns:1fr;
  }


  .cp-filtros-grid{
    grid-template-columns:1fr;
  }


  .cp-span2{
    grid-column:auto;
  }

}


/* IMPRESSAO */

@media print{

  .sidebar,
  .topbar,
  .cp-toolbar,
  .cp-filtros-painel,
  .fin-acoes{
    display:none !important;
  }


  .main{
    margin-left:0 !important;
  }


  .cp-table{
    font-size:10px;
  }

}



/* =========================================================
   GERENCIAR COLUNAS
========================================================= */

.cp-colunas-menu{
  min-width:220px;

  padding:6px 10px 10px;
}


.cp-colunas-titulo{
  padding:7px 4px 8px;

  margin-bottom:4px;

  border-bottom:1px solid #e5e7eb;

  color:#172033;

  font-size:10px;

  font-weight:700;
}


.cp-colunas-menu label{
  min-height:27px;

  display:flex;

  align-items:center;

  gap:8px;

  padding:3px 4px;

  color:#344054;

  font-size:9px;

  cursor:pointer;
}


.cp-colunas-menu label:hover{
  background:#f7f9fb;
}


.cp-colunas-menu input[type="checkbox"]{
  width:14px;

  height:14px;

  accent-color:#132536;
}



/* =========================================================
   MAIS ACOES - CONTAS A PAGAR
========================================================= */

.cp-mais-acoes-menu{
  min-width:225px;
}


.cp-mais-acoes-menu button{
  display:flex;

  align-items:center;

  gap:9px;

  min-height:34px;

  border-bottom:
    1px solid #edf0f3;
}


.cp-mais-acoes-menu button:last-child{
  border-bottom:0;
}


.cp-mais-acoes-menu button span{
  width:19px;

  color:#172033;

  text-align:center;

  font-size:13px;
}



/* =========================================================
   MODAL DAS ACOES
========================================================= */

.cp-acao-overlay{
  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:25px;

  background:
    rgba(10,18,45,.45);

  z-index:12000;
}


.cp-acao-modal{
  width:min(
    620px,
    94vw
  );

  background:#fff;

  border-radius:12px;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.25);

  overflow:hidden;
}


.cp-acao-modal-head{
  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:15px;

  padding:18px 20px;

  border-bottom:
    1px solid #e5e9ef;
}


.cp-acao-modal-head h3{
  margin:0;

  color:var(--navy);

  font-size:16px;
}


.cp-acao-modal-head p{
  margin:4px 0 0;

  color:#667085;

  font-size:9px;
}


.cp-acao-modal-head button{
  width:31px;

  height:31px;

  border:0;

  border-radius:6px;

  background:#f4f6f8;

  color:#667085;

  font-size:20px;
}


.cp-acao-modal-body{
  padding:22px;
}


.cp-acao-modal-footer{
  display:flex;

  justify-content:flex-end;

  padding:13px 20px;

  border-top:
    1px solid #e5e9ef;
}


.cp-upload-area{
  padding:30px;

  border:
    1px dashed #bdc8d5;

  border-radius:9px;

  background:#fafbfd;

  text-align:center;
}


.cp-upload-area > div{
  margin-bottom:7px;

  color:var(--royal);

  font-size:25px;
}


.cp-upload-area strong{
  display:block;

  color:var(--navy);

  font-size:11px;
}


.cp-upload-area p{
  margin:4px 0 14px;

  color:#667085;

  font-size:9px;
}


.cp-upload-area input{
  max-width:100%;
}


.cp-contas-fixas-info,
.cp-ajuste-massa-info{
  padding:17px;

  border:1px solid #e1e6ec;

  border-radius:8px;

  background:#f8fafc;
}


.cp-contas-fixas-info strong,
.cp-ajuste-massa-info strong{
  color:var(--navy);

  font-size:11px;
}


.cp-contas-fixas-info p,
.cp-ajuste-massa-info p{
  margin:5px 0 0;

  color:#667085;

  font-size:9px;

  line-height:1.6;
}


/* Quando os filtros estiverem abertos,
   eles ficam acima dos indicadores. */

.cp-filtros-painel:not(.hidden){
  display:block;
}


.cp-resumo-grid{
  transition:.15s ease;
}



/* =========================================================
   REPARO DOS CONTROLES
========================================================= */

#cpPrevistas.ativo{
  background:#eaf7fd;

  border-color:#7ac7ed;

  color:#15164f;

  box-shadow:
    inset 0 0 0 1px
    rgba(121,199,237,.25);
}


#cpGerenciarColunas,
#cpAbrirFiltros,
#cpMaisAcoes,
#cpPeriodo,
#cpAdicionar,
#cpPrevistas{
  cursor:pointer;
}