/* -----------------------------------------
   Custom.css - put your own changes here 
----------------------------------------- */

/* ------------------Put your custom code here--------------------*/

.control-label {
  font-weight: bold;
}
form .control-group:last-child {
  margin-bottom: 0;
}
form .control-group .controls-row {
  margin-bottom: 5px;
}
form .control-group .controls-row textarea {
  margin-bottom: 15px;
}
form .control-group .controls-row .btn.special {
  margin-left: 10px;
}

@media all and (max-width: 1550px) {
  .panel .panel-heading h4 {
  }
}

@media only screen and (max-width: 1280px) {
  /* ------------------ Form styles --------------------*/
  [class*="span6"] form .control-group .control-label {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
  }
  [class*="span6"] form .control-group .controls {
    margin-left: 0;
  }
  [class*="span6"] form .control-group {
    margin-bottom: 10px;
  }
  [class*="span6"] form .form-actions {
    padding-left: 20px;
  }
}

@media only screen and (max-width: 767px) {
  /* ------------------ Form styles--------------------*/
  form .control-group [class*="span"] {
    margin-bottom: 10px !important;
  }
  form .control-group .control-label {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
  }
  form .control-group .controls {
    margin-left: 0;
  }
  form .control-group {
    margin-bottom: 10px;
  }
  form .form-actions {
    padding-left: 20px;
  }
  form .control-group .controls-row [class*="span"] {
    margin-left: 0 !important;
  }
  form .control-group .controls-row .btn.special {
    margin-left: 0px;
  }
}

.fixed_options_footer,
.fixed_option_space,
.sortable_save,
.fixed_options_footer_perguntas,
.fixed_option_space_perguntas,
.sortable_save_perguntas,
.del-all {
  display: none;
}
.fixed_options_footer, .fixed_options_footer_perguntas {
  position: fixed;
  width: 100%;
  padding: 10px;
  bottom: 0;
  left: 0;
  background-color: #e0e0e0;
  background-image: linear-gradient(to bottom, #fafafa 0px, #dcdcdc 100%);
  border-top: 1px solid #c4c4c4;
  text-align: right;
  z-index: 100;
}

.fixed_options_footer,
.fixed_options_footer_perguntas,
.flex-main {
  margin-right: 50px;
}

.fixed_options_footer,
.fixed_options_footer_perguntas,
.flex-main .flex-div {
  margin-right: 20px;
  float: right;
}

.fixed_option_space {
  height: 50px;
}

img.maxwmaxh {
  max-width: 100%;
  max-height: 100%;
}

img.pad-radius-img {
  border: 1px solid #e3e2e2;
  border-radius: 2px;
  padding: 5px;
}

.dib {
  display: inline-block !important;
}

.w10 {
  width: 10px !important;
}
.w20 {
  width: 20px !important;
}
.w30 {
  width: 30px !important;
}
.w40 {
  width: 40px !important;
}
.w50 {
  width: 50px !important;
}
.w60 {
  width: 60px !important;
}
.w70 {
  width: 70px !important;
}
.w80 {
  width: 80px !important;
}
.w90 {
  width: 90px !important;
}
.w100 {
  width: 100px !important;
}
.w110 {
  width: 110px !important;
}
.w120 {
  width: 120px !important;
}
.w130 {
  width: 130px !important;
}
.w140 {
  width: 140px !important;
}
.w150 {
  width: 150px !important;
}
.w160 {
  width: 160px !important;
}
.w170 {
  width: 170px !important;
}
.w180 {
  width: 180px !important;
}
.w190 {
  width: 190px !important;
}
.w200 {
  width: 200px !important;
}

.mt5 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt25 {
  margin-top: 25px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt35 {
  margin-top: 35px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt45 {
  margin-top: 45px !important;
}
.mt50 {
  margin-top: 50px !important;
}

.pl0 {
  padding-left: 0 !important;
}
.pr0 {
  padding-right: 0 !important;
}

.tal {
  text-align: left !important;
}
.right {
  text-align: right !important;
}
.pointer {
  cursor: pointer;
}
.logo-login-custom {
  position: absolute;
  left: 50%;
  min-width: 200px;
  max-width: 200px;
  margin-left: -100px;
}
.slogan-custom {
  display: inline-block;
  margin-top: 8px;
}
.logo-custom {
  margin-top: 2px;
}
#header.shrink .logo-custom {
  margin-top: 0px;
  max-height: 45px;
}
.legendLabel {
  padding-left: 3px;
}
.box-header-date {
  position: absolute;
  bottom: 10px;
  right: 50px;
  width: 120px;
  border: 1px solid #dcdcdc;
  color: #475569;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  border-radius: 3px;
  background: #fff;
  padding: 5px 7px;
  
  /* line-height: 15px !important; */
  /* top: 0px; */
  /* margin-top: 6px; */
  /* color: black; */
  /* font: 12px verdana, arial, sans-serif; */
  /* border: 1px solid #ccc; */
  /* padding: 3px; */
}

.box-header-date.select {
  margin-right: 279px;
  width:160px;
  background: white;
  /* width: 109px;
  height: 23px; */
}
.box-header-date.select_tipo {
  margin-right: 460px;
  background: white;
  width:160px;

  /* width: 109px;
  
  height: 23px; */
}
.box-header-date.select_categoria {
  margin-right: 640px;
  background: white;
  width:180px;

  /* width: 109px;
  
  height: 23px; */
}
.box-header-date.de {
  margin-right: 140px;
  /* width: 120px; */
}
.box-header-date.ate {
  /* width: 120px; */
}
.files {
  padding: 2.7px;
}

.box-header-time {
  position: absolute;
  bottom: 10px;
  right: 50px;
  width: 120px;
  border: 1px solid #dcdcdc;
  color: #475569;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  border-radius: 3px;
  background: #fff;
  padding: 5px 7px;
  line-height: 10px !important;

  /* top: 0px; */
  /* margin-top: 6px; */
  /* color: black; */
  /* font: 12px verdana, arial, sans-serif; */
  /* border: 1px solid #ccc; */
  /* padding: 3px; */
}

@media(max-width: 850px) {
  .box-header-date {
    display: none;
  }
}

@media all and (max-width: 680px) {
  /* .box-header-date.select {
    margin-right: 186px;
    width: 85px;
  }
  .box-header-date.de {
    margin-right: 100px;
    width: 80px;
  }
  .box-header-date.ate {
    width: 80px;
  } */

  /* .box-header-date {
    display: none;
  } */

  /* .select-all {
    position: absolute;
    margin-right: -70px;
    margin-top: 35px;
  } */
  .select-general {
    position: absolute;
    margin-right: -240px;
    margin-top: 65px;
  }
  .input-sm {
    margin-top: 15px;
  }
  .panel-body {
    padding-top: 30px;
  }
  .files {
    width: 150px;
    padding: 2.5px;
  }
}
/* @media all and (max-width: 620px) {
  .box-header-date {
    display: none;
  }
} */
.box-header-date::-webkit-input-placeholder {
  color: grey;
  font: 12px verdana, arial, sans-serif;
}

.box-header-date:-moz-placeholder {
  color: grey;
  font: 12px verdana, arial, sans-serif;
}

.box-header-date::-moz-placeholder {
  color: grey;
  font: 12px verdana, arial, sans-serif;
}

.box-header-date:-ms-input-placeholder {
  color: grey;
  font: 12px verdana, arial, sans-serif;
}
@media all and (max-width: 1600px) {
  .box-header-date.de.min {
    margin-right: 100px;
    width: 80px;
  }
  .box-header-date.ate.min {
    width: 80px;
  }
}
@media all and (max-width: 1400px) {
  .box-header-date.de.min {
    margin-right: 70px;
    width: 60px;
  }
  .box-header-date.ate.min {
    width: 60px;
  }
}
@media all and (max-width: 1200px) {
  .box-header-date.de.min {
    margin-right: 100px;
    width: 80px;
  }
  .box-header-date.ate.min {
    width: 80px;
  }
}
.center {
  text-align: center !important;
}
.noStyleInputCheckbox {
  position: relative;
  top: 3px;
  display: inline-table;
  margin-left: 4px;
}
th label {
  top: -3px;
}
td.noStyleInputCheckbox {
  top: 0;
}
.esta_funcao_txt {
  font-weight: normal;
}
.select-all {
  cursor: pointer;
  position: absolute;
  right: 0;
  z-index: 1;
  /*right: 80px;
  bottom: 10px; */
  /* top: 3px; */
  /* display: block;
  background: #fff;
  cursor: pointer;
  border-radius: 5px;
  padding: 0 15px;
  border: 1px solid #dcdcdc;
  font-family: Arial, Helvetica, sans-serif;
  color: #475569;
  font-weight: 500;
  font-size: 11px;
  height: 100%;
  line-height: 19px; */
}
.select-general {
  top: 3px;
  cursor: pointer;
  position: absolute;
  right: 250px;
  z-index: 1;
}
.panel-heading {
  text-align: left;
}
.table th label {
  margin: 0 0 0 -4px;
}
form .image {
  padding: 5px;
  border: 1px solid #c4c4c4;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
td .image {
  padding: 5px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
label.fileupload {
  font-weight: normal;
}
label.fileupload input {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

/* Dual Multiselect
----------------------------------*/
.leftBox {
  float: left;
  width: 44%;
  margin-left: 2%;
}
.rightBox {
  float: right;
  width: 44%;
  margin-right: 2%;
}
.dualBtn {
  text-align: center;
  width: 100px;
  margin: 160px 1px;
  position: absolute;
  left: 50%;
  margin-left: -55px;
}
.dualBtn .btn span {
  margin-right: 0;
}
.searchField {
  max-width: 60%;
  margin: 0 5px 0 5px;
  float: left;
  background: url(../images/search.png) no-repeat 95% center;
}
.searchBox {
  margin: 0px 0 22px 0;
  position: relative;
  width: 100%;
}
.searchBox > span {
  float: left;
  display: block;
  margin-top: 8px;
}
.searchBox button {
  margin-left: 5px;
}
.count {
  margin-top: 10px;
  display: block;
  float: left;
}
#box1Clear span,
#box2Clear span,
#box3Clear span,
#box4Clear span {
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 5px;
  height: 12px;
}
.slider {
  margin-top: 12px;
}

.pbar .ui-progressbar-value {
  display: block !important;
}
.pbar {
  overflow: hidden;
}
.percent1 {
  position: relative;
  float: left;
}
.elapsed {
  position: relative;
  float: right;
}

/* Gallery view
----------------------------------*/
.galleryView > li img {
  border: 1px solid #e3e2e2;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 5px;
}
.galleryView > li img:hover {
  border: 1px solid #88bbc8;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

.galleryView > li .actionBtn {
  position: absolute;
  bottom: 10px;
  width: 100%;
}
.galleryView > li .actionBtn a {
  padding: 3px;
  background: #000;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  width: 23px;
  display: inline-block;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.galleryView > li .actionBtn a span {
  margin-left: 0;
  margin-right: 0;
}
.galleryView > li .actionBtn a:first-child {
  float: left;
  margin-left: 10px;
}
.galleryView > li .actionBtn a:last-child {
  float: right;
  margin-right: 10px;
}

.galleryView > li .actionBtnPlantas {
  position: absolute;
  bottom: 10px;
  width: 100%;
}
.galleryView > li .actionBtnPlantas a {
  padding: 3px;
  background: #000;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  width: 23px;
  display: inline-block;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.galleryView > li .actionBtnPlantas a span {
  margin-left: 0;
  margin-right: 0;
}
.galleryView > li .actionBtnPlantas a:first-child {
  float: left;
  margin-left: 10px;
}
.galleryView > li .actionBtnPlantas a:last-child {
  float: right;
  margin-right: 10px;
}

.panel-body.box-header-forms {
  border-style: none;
  border: none;
  background: transparent;
}

.panel-body.box-header-forms input,
.panel-body.box-header-forms select,
.panel-body.box-header-forms button {
  margin: 5px 0;
}

.form-control-custom {
  padding: 5px 10px;
  border: 1px solid #ccc;
}
.table th,
.table td {
  text-align: center;
}
.form-group img {
  max-width: 100%;
}

/*loader*/
#qLoverlay {
  visibility: visible;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 666999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../images/patterns/2.png) repeat;
}
#qLbar {
  visibility: visible;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -40px;
  background: url(../images/loader.gif) no-repeat;
  z-index: 667999;
}

.qLoverlayText {
  visibility: visible;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -40px;
  background: url(../images/loader.gif) no-repeat;
  z-index: 667999;
}

.options-listas ul {
  position: absolute;
  margin-top: -300px;
  right: 150px;
  bottom: 46px;
}

.listas-options li {
  text-align: left;
  list-style: none;
}

.listas-options-nomes {
  min-width: 300px;
  min-height: 34px;
  cursor: pointer;
}

.listas-options {
  list-style-type: none;
  border: 1px solid #ccc;
  padding: 5px;
  position: relative;
  z-index: 2002;
  display: block;
  background-color: #fff;
  min-height: 300px;
  max-height: 300px;
  overflow: auto;
  overflow-x: hidden;
  min-width: 300px;
}

.listas-options label {
  cursor: pointer;
}

.options-segmentacoes ul {
  position: absolute;
  margin-top: -300px;
}

.segmentacoes-options li {
  text-align: left;
  list-style: none;
}

.segmentacoes-options-nomes {
  min-width: 300px;
  min-height: 34px;
  cursor: pointer;
}

.segmentacoes-options {
  list-style-type: none;
  border: 1px solid #ccc;
  padding: 5px;
  position: relative;
  z-index: 2002;
  display: block;
  background-color: #fff;
  min-height: 300px;
  max-height: 300px;
  overflow: auto;
  overflow-x: hidden;
  min-width: 300px;
}

.segmentacoes-options label {
  cursor: pointer;
}

.alert.alert-default {
  background-color: #e8e8e8;
  background-image: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 100%);
  font-weight: 600;
}

.custom-info {
  letter-spacing: 0.1em;
  color: #737373;
  margin: 5px 0;
}

.previewshipping.ok {
  font-size: 18px;
  font-weight: 700;
  color: #080;
}

.previewshipping.zero {
  font-size: 18px;
  font-weight: 700;
  color: #d14;
}

/*
multi campos emails, telefones, etc...
*/

.input-group {
  margin-bottom: 10px;
}
.inputs_add_rm {
  height: 40px;
}

.no-border-right {
  border-right: none;
}

#contatos .box_input .inline-block {
  display: inline-block !important;
  width: calc(20% - 3px);
}

/* @media all and (max-width: 767px) {
  .input-group {
    margin-bottom: 10px;
  }
  .inputs_add_rm {
    height: 40px;
  }

  .box_input {
    padding-bottom: 10px;
  }

  .no-border-right {
    border-right: solid 1px #ccc;
  }

  .input-group {
    display: block;
    position: relative;
    width: 100%;
  }

  .input-group-addon {
    border: 1px solicd #ccc;
    position: relative;
    display: inline-table;
  }

  .input-group-addon label {
    border: 1px solicd #ccc;
  }

  #contatos .box_input .inline-block {
    display: block !important;
    width: inherit;
  }

  #contatos .box_input .inline-block input {
    margin-bottom: 10px;
  }
} */

.modal-person .modal-body {
  min-height: 120px;
}

.ponto-verde {
  font-weight: bold;
  color: #008000;
}

.ponto-vermelho {
  font-weight: bold;
  color: #f42f08;
}

/*
* FINANCEIRO
*/
#filtro button {
  width: 100%;
  margin-bottom: 10px;
}
.financeiro-contas,
.financeiro-categorias,
.financeiro-centrocustos {
  position: relative;
}
.financeiro-contas ul,
.financeiro-categorias ul,
.financeiro-centrocustos ul {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
}

.financeiro-contas ul li label,
.financeiro-categorias ul li label,
.financeiro-centrocustos ul li label {
  /* font-weight: normal; */
}

.financeiro-categorias input:first-child,
.financeiro-contas input:first-child,
.financeiro-centrocustos input:first-child {
  text-align: left;
  color: #000;
}

.btn-dre-close {
  position: absolute;
  right: 17px;
  cursor: pointer;
}

.css-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("../images/select_arrow.gif");
  background-repeat: no-repeat;
  background-position: center right 10px;
  cursor: pointer;
  font-size: 12px;
}
select.css-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("../images/select_arrow.gif");
  background-repeat: no-repeat;
  background-position: center right 10px;
  cursor: pointer;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
  padding: 0;
  margin: 0;
  padding-left: 10px;
  outline: hidden;
}
#filtro {
  min-width: 300px;
}
#filtro div {
  background-color: rgba(250, 250, 250, 0.5);
}
#filtro .form-control {
  margin-top: 20px;
}
#filtro .filtro-label {
  /* font-weight: normal; */
}

#filtro .form-wall {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 4px 4px 4px 4px;
}

.box-flex {
  display: flex;
}
.box-flex .tabelas {
  width: 80%;
  margin-left: 15px;
}
.box-flex #filtro {
  width: 20%;
  margin-left: 20px;
  margin-right: 15px;
}

@media (max-width: 1222px) {
  .box-flex {
    display: inherit;
  }
  .box-flex .tabelas {
    width: auto;
    margin-left: 15px;

    margin-right: 15px;
  }
  .box-flex #filtro {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* relatório financeiro */
.fresult {
  opacity: 0.25;
}

.fluxocaixa tr {
  border: 2px solid #fff;
  background-color: rgba(236, 240, 241, 1);
}
.fluxocaixa tr:hover {
  background-color: rgba(236, 240, 241, 0.5);
  cursor: default;
}
.fluxocaixa th {
  border: 2px solid #fff;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-weight: normal;
}
.fluxocaixa td {
  border: 2px solid #fff;
  height: 52px;
  line-height: 52px;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}
.body-fluxo .tal {
  background-color: rgba(102, 153, 204, 1);
  color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}
.head-fluxo th {
  background-color: rgba(48, 84, 150, 1);
  color: #fff;
}
.body-fluxo td.red {
  background-color: rgba(255, 199, 206, 0.5);
  color: red;
}
.body-fluxo td.green {
  background-color: rgba(198, 239, 206, 0.5);
  color: green;
}
#fluxo-ano {
  width: 95px;
  height: 28px;
  text-align: center;
}
#regime-competencia {
  display: block;
  position: absolute;
  right: 20px;
  cursor: pointer;
  z-index: 9;
  margin-top: 2px;
}
.fluxo-touchspin.input-group.bootstrap-touchspin {
  top: 5px;
  left: 200px;
  position: absolute;
  width: 120px;
  heigth: 28px;
}
#tabela-fluxo-caixa .input-group-btn .bootstrap-touchspin-up,
#tabela-fluxo-caixa .input-group-btn .bootstrap-touchspin-down {
  heigth: 14px;
  line-height: 14px;
}
.selectempresas {
  height: 36px;
  border: 1px solid #ccc;
  min-width: 150px;
  padding: 0 5px 0 5px;
}

.selectempresas option {
  padding: 0 5px 0 5px;
}

.dre-box li {
  display: flex;
}
.dre-box li div:first-child {
  min-width: 250px;
  text-transform: uppercase;
}
.dre-box li div.v {
  min-width: inherit;
}

#getDRE {
  margin-right: -35px;
  height: 24px;
  width: 22px;
}

.dre-periodo {
  background-color: #f3f3f3;
}
@media (max-width: 1400px) {
  .fluxocaixa {
    margin-left: 114px;
  }
  .fluxocaixa .colleftfirst:first-child {
    height: 52px;
    line-height: 52px;
    width: 120px;
  }
  .fluxocaixa .colleftfirst {
    position: absolute;
    left: 0;
    width: 120px;
    vertical-align: middle;
    margin-top: -2px;
    display: block;
    padding-bottom: 70px;
  }
  .fluxocaixa .colleftfirst.last {
    padding-bottom: 52px;
  }
}
@media (max-width: 700px) {
  #regime-competencia {
    display: block;
    position: absolute;
    right: 20px;
    cursor: pointer;
    z-index: 9;
    right: 0;
  }
}

@media (max-width: 490px) {
  .fluxo-touchspin.input-group.bootstrap-touchspin {
    top: 5px;
    left: inherit;
    position: relative;
  }
  #regime-competencia {
    display: none;
  }
}

.popup-ponto-eletronico button.cancel {
  background-color: #c12e2a !important;
}

.popup-ponto-eletronico .ponto-obter-relatorio {
  margin-top: -10px;
  margin-bottom: 20px;
}

@media screen and (min-width: 1240px) {
  #content.ponto-eletronico tr:not(:last-child) td:not(:first-child) div {
    transform: translateY(50%);
  }
}

.vert-filter-ajust {
  margin: 6px 0;
  float: right;
  clear: both;
}

.avatar-wrap {
    display: inline-block;
    width: 43px;
    height: 43px;
    vertical-align: middle;
    padding: 5px !important;
}

.avatar-default {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.table-responsive {
  width: 100% !important;
}

.note-editor .btn-group{
  width: inherit;
}

div.dn{
  display:none;
}

.full-width{
  width: 100% !important;
}

/* =============================================================
   ILEVA — Dashboard Components
   Sistema de cards, gráficos e utilitários de identidade visual
   Paleta: Eventos #1B8FEF | Gestão #AB11D1 | Associado #00FFE6
           Consultoria #FF9D00 | Benefícios #FFCE00
   ============================================================= */

/* -------------------------------------------------------------
   Overrides globais de dashboard
   ------------------------------------------------------------- */
button.filtro { margin-right: 50px !important; }
/* .panel .panel-heading .panel-controls-right { top: unset !important; } */
.container_filters_graph { padding: unset !important; }

/* Highcharts — normalização de texto nos eixos */
.highcharts-axis text,
.highcharts-no-tooltip text,
.highcharts-axis-labels text,
.highcharts-drilldown-axis-label text,
.highcharts-drilldown-data-label text {
  font-weight: bold !important;
  font-size: 1em !important;
  text-decoration: none !important;
  color: black !important;
  fill: black !important;
}

/* -------------------------------------------------------------
   cop-card — sistema de cards de resumo/KPI
   ------------------------------------------------------------- */
.cop-cards { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 16px; }
.cop-cards .cop-card { flex: 1 0 calc(25% - 8px); min-width: 200px; }
.cop-cards-stretch .cop-card { flex: 1 1 0; min-width: 200px; }
.cop-cards-3col .cop-card { flex: 1 0 calc(33.333% - 7px); min-width: 200px; }
.cop-cards-5col .cop-card { flex: 1 0 calc(20% - 8px); min-width: 170px; }
.cop-cards-section-title {
    font-size: 12px; font-weight: 600; color: #64748B;
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em;
}

.cop-card {
  border: 1px solid #e8e8e8;
  border-left: 5px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.cop-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.cop-card .freq-card-body { margin-top: auto; }
.cop-card .cop-card-badges { margin-top: auto; }

.cop-card-header {
  font-weight: 700;
  font-size: 13px;
  color: #444;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.4em;
}
.cop-card-header--truncate {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: unset; display: block; min-height: auto;
}
.cop-card-header--flex {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    -webkit-line-clamp: unset; line-clamp: unset; -webkit-box-orient: unset;
}
.cop-card-header .cop-card-action {
    cursor: pointer; font-size: 11px; font-weight: 600;
    white-space: nowrap; text-decoration: underline !important;
}
.cop-card-header a { color: inherit; text-decoration: none; }
.cop-card-header a:hover { text-decoration: underline; }

.cop-card-link { display: block; text-decoration: none; color: inherit; }
.cop-card-link:hover { text-decoration: none; }
.cop-card-link.cop-card { display: flex; }

.cop-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

/* cop-card — modificadores de cor (ILEVA identity) */
.cop-card--eventos  { border-left-color: #1B8FEF; }
.cop-card--purple   { border-left-color: #622773; }
.cop-card--green    { border-left-color: #10B981; }
.cop-card--violet   { border-left-color: #8B5CF6; }
.cop-card--rose     { border-left-color: #F43F5E; }
.cop-card--orange   { border-left-color: #FF9D00; }
.cop-card--gold     { border-left-color: #FFCE00; }
.cop-card--muted    { border-left-color: #A192A6; }
.cop-card--warning  { border-left-color: #e67e22; }
.cop-card--success  { border-left-color: #27ae60; }

/* -------------------------------------------------------------
   freq-card — métricas dentro dos cop-cards
   ------------------------------------------------------------- */
.freq-card-body { display: flex; align-items: center; gap: 0; }
.freq-card-metric { flex: 1; text-align: center; }
.freq-card-val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}
.freq-card-lbl {
  display: block;
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 3px;
}
.freq-card-sep { width: 1px; background: #efefef; align-self: stretch; margin: 0 5px; }
/* Memória de cálculo do card: fórmula em linguagem de negócio + valores aplicados */
.freq-card-formula {
  display: block;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #EDF1F6;
  font-size: 10px;
  line-height: 1.45;
  color: #94A3B8;
}
.freq-card-formula-exp { display: block; }
.freq-card-formula-val { display: block; color: #64748B; font-weight: 600; }

/* -------------------------------------------------------------
   kpi-leads — card de KPIs agrupados (estilo dashboard comercial)
   ------------------------------------------------------------- */
.kpi-leads-card {
  border: 1px solid #eef0f3;
  border-radius: 12px;
  background: #fff;
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.kpi-leads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.kpi-leads-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6b7280;
}
.kpi-leads-title i { margin-right: 7px; color: #9ca3af; }
.kpi-leads-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.kpi-leads-metric { flex: 1 1 0; min-width: 110px; }
.kpi-leads-lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
}
.kpi-leads-lbl .kpi-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.kpi-dot--blue   { background: #1B8FEF; }
.kpi-dot--green  { background: #10B981; }
.kpi-dot--rose   { background: #F43F5E; }
.kpi-dot--violet { background: #8B5CF6; }
.kpi-leads-val {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: #1f2937;
}
.kpi-leads-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  background: #f7f8fa;
  border-radius: 10px;
}
.kpi-leads-foot-item { flex: 1 1 0; min-width: 150px; }
.kpi-leads-foot-lbl {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 3px;
}
.kpi-leads-foot-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}
.kpi-leads-foot-val i { margin-right: 6px; font-size: 15px; color: #1B8FEF; }
.kpi-leads-foot-val--violet,
.kpi-leads-foot-val--violet i { color: #8B5CF6; }
.kpi-leads-foot-sub {
  display: block;
  font-size: 10px;
  color: #b4b9c2;
  margin-top: 2px;
}
@media (max-width: 575px) {
  .kpi-leads-metric { flex-basis: 100%; }
}

/* freq-card-val — modificadores de cor */
.freq-val--eventos  { color: #1B8FEF; }
.freq-val--purple   { color: #622773; }
.freq-val--green    { color: #10B981; }
.freq-val--violet   { color: #8B5CF6; }
.freq-val--rose     { color: #F43F5E; }
.freq-val--orange   { color: #FF9D00; }
.freq-val--muted    { color: #A192A6; }
.freq-val--warning  { color: #e67e22; }
.freq-val--success  { color: #27ae60; }

/* -------------------------------------------------------------
   freq-estado-card — cards de frequência por estado/região
   ------------------------------------------------------------- */
.freq-card-filtro-hint { font-size: 11px; color: #aaa; margin: 0 0 10px; }
.freq-estados-cards { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }

.freq-estado-card {
  flex: 1 1 calc(25% - 8px);
  max-width: calc(33.333% - 7px);
  border: 1px solid #e8e8e8;
  border-left: 5px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow .15s;
}
.freq-estado-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.freq-estado-card.freq-baixa { border-left-color: #27ae60; }
.freq-estado-card.freq-media { border-left-color: #f39c12; }
.freq-estado-card.freq-alta  { border-left-color: #e74c3c; }

.freq-card-header {
  font-weight: 700;
  font-size: 13px;
  color: #444;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #f0f0f0;
}
.freq-pct.freq-baixa { color: #27ae60; }
.freq-pct.freq-media { color: #e67e22; }
.freq-pct.freq-alta  { color: #e74c3c; }

@media (max-width: 1199px) {
  .cop-cards .cop-card { flex: 1 0 calc(33.333% - 7px); min-width: 200px; }
  .cop-cards-5col .cop-card { flex: 1 0 calc(33.333% - 7px); min-width: 170px; }
  .freq-estado-card    { flex: 1 0 calc(33.333% - 7px); min-width: 200px; }
}
@media (max-width: 991px) {
  .freq-estado-card    { flex: 1 0 calc(50% - 5px); min-width: 150px; max-width: none; }
}
@media (max-width: 767px) {
  .cop-cards .cop-card { flex: 1 0 calc(50% - 5px); min-width: 150px; }
  .cop-cards-3col .cop-card { flex: 1 0 calc(50% - 5px); min-width: 150px; }
  .cop-cards-5col .cop-card { flex: 1 0 calc(50% - 5px); min-width: 150px; }
  .cop-cards-stretch .cop-card { flex: 1 0 calc(50% - 5px); min-width: 150px; }
  .freq-estado-card    { flex: 1 0 calc(50% - 5px); min-width: 150px; max-width: none; }
}
@media (max-width: 480px) {
  .cop-cards .cop-card { flex: 0 0 100%; min-width: 0; }
  .cop-cards-3col .cop-card { flex: 0 0 100%; min-width: 0; }
  .cop-cards-5col .cop-card { flex: 0 0 100%; min-width: 0; }
  .cop-cards-stretch .cop-card { flex: 0 0 100%; min-width: 0; }
  .freq-estado-card    { flex: 0 0 100%; min-width: 0; max-width: none; }
}

/* row-cards — substitui inline flex em .row de cards/gráficos */
.row-cards { display: flex; flex-wrap: wrap; align-items: stretch; }
@media (max-width: 767px) { .row-cards { display: block; } }

/* assoc-badge — tags de tipo Associado / Terceiro */
.assoc-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.assoc-color  { background: #ccfaf7; color: #007a70; }

/* ==========================================================
   HEADER MODERNIZADO — ileva 2026
   Sobrescrita de main.css — não alterar main.css diretamente
   ========================================================== */

/* --- Barra principal ----------------------------------------
   Altura sincronizada com sidebar-adm padding-top: 63px
   ------------------------------------------------------------ */
#header .navbar {
  background-color: #ffffff;
  padding: 0 20px;
  border-bottom: 1px solid #f0f2f5;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  min-height: 73px;
}

/* Sidebar: alinha topo do conteúdo com o bottom do header */
#sidebar.sidebar-adm {
  padding-top: 63px !important;
}

/* --- Logo ---------------------------------------------------- *
   min-width: 166px → 166 + 16px padding-right + 8px margin = 190px
   + hamburger li (~60px) = 250px = sidebar width
   Pill alinha com a borda esquerda da área de conteúdo.
 * ------------------------------------------------------------ */
#header .navbar .navbar-brand {
  height: 63px;
  line-height: normal;
  padding: 0 16px 0 16px;
  margin-right: 8px;
  min-width: 166px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-custom {
  height: 42px;
  display: block;
}

/* --- Nav items — remove estilo caixa cinza ----------------- */
#header .navbar .nav > li > a {
  background: transparent;
  background-image: none !important;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  text-shadow: none;
  filter: none !important;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  line-height: 20px;
  transition: background 0.18s ease, color 0.18s ease;
}
#header .navbar .nav > li > a:hover {
  background: #f3f4f6;
  background-image: none !important;
  filter: none !important;
  color: #111827;
  border-color: transparent;
  box-shadow: none;
  text-decoration: none;
}

/* --- Item ativo — pílula roxo brand ------------------------- */
#header .navbar .nav > li.active > a,
#header .navbar .nav > li.active > a:hover {
  background: #f3eef5 !important;
  background-image: none !important;
  filter: none !important;
  color: #4A1259 !important;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: none;
}
#header .navbar .nav > li.active > a span.s16,
#header .navbar .nav > li.active > a i {
  color: #4A1259 !important;
}
/* Remove a seta/triangulo do item ativo */
#header .navbar .nav > li.active > a:after {
  display: none;
}

/* --- Avatar circular --------------------------------------- */
#header .navbar .nav > li > a.avatar .image {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  top: 2px;
  bottom: 2px;
  left: 5px;
  object-fit: cover;
  border: 2px solid #e5e7eb;
}
#header .navbar .nav > li > a.avatar {
  padding-left: 42px;
  display: flex;
  align-items: center;
}

/* --- Notificação badge — azul brand ----------------------- */
#header .navbar .nav > li > a[style*="background-color: #428bca"],
#header .navbar .nav > li > a[style*="background-color:#428bca"] {
  background-color: #1B8FEF !important;
  border-color: #1B8FEF !important;
  border-radius: 8px !important;
  color: #fff !important;
}
#header .navbar .nav > li > a .notification {
  background: #F43F5E;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  top: -6px;
  right: -6px;
}

/* --- Loader bar — azul brand ------------------------------ */
.loader .bar {
  background-color: #1B8FEF;
}

/* --- Separador visual leve entre nav e user nav ----------- */
#header .navbar .usernav {
  border-left: 1px solid #f0f2f5;
  padding-left: 10px;
  margin-left: 4px;
}

/* --- Dropdown menus — cantos arredondados modernos -------- */
#header .navbar .nav > li.dropdown .dropdown-menu {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  padding: 6px;
  margin-top: 6px;
}
#header .navbar .nav > li.dropdown .dropdown-menu:before,
#header .navbar .nav > li.dropdown .dropdown-menu:after {
  display: none;
}
#header .navbar .nav > li.dropdown .dropdown-menu li.menu ul li a {
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  padding: 7px 10px;
}
#header .navbar .nav > li.dropdown .dropdown-menu li.menu ul li a:hover {
  background: #f3f4f6;
  color: #1B8FEF;
}
#header .navbar .nav > li.dropdown .dropdown-menu .view-all a {
  border-radius: 6px;
  font-size: 12px;
  color: #1B8FEF;
}

/* --- Dropdowns do header: alinhamento de ícones FA nos itens --- */
#header .navbar .nav > li.dropdown .dropdown-menu li.menu ul li a i {
  width: 24px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  flex-shrink: 0;
}
#header .navbar .nav > li.dropdown .dropdown-menu li.menu ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
}
#header .navbar .nav > li.dropdown .dropdown-menu li.menu ul li a:hover i {
  color: #1B8FEF;
}

.terc-color   { background: #FFF3E0; color: #B35900; }

/* ==========================================================
   SIDEBAR MODERNIZADA — ileva 2026
   Sobrescrita de main.css — não alterar main.css diretamente
   ========================================================== */

/* --- Sidebar: borda direita e fundo limpo ------------------ */
#sidebar {
  border-right: 1px solid #f0f2f5;
}

/* --- Sidebar: topo fixo, navegação com scroll próprio ------------
   #sidebar vira coluna flex e deixa de rolar como um todo:
   .sidebar-widget-fixed (busca + #modulo-select + rótulo) sai do
   fluxo de rolagem e .sidebar-inner ocupa a altura restante da
   viewport (100vh menos o padding do header), rolando sozinha.
   O flex interno também neutraliza o float dos .sidebar-widget.
   ---------------------------------------------------------------- */
#sidebar.sidebar-adm {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

#sidebar.sidebar-adm > .sidebar-widget-fixed {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  z-index: 2;
}

#sidebar.sidebar-adm > .sidebar-widget-fixed > .sidebar-widget {
  float: none;
  margin: 0;
}

#sidebar.sidebar-adm > .sidebar-inner {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* O padding-top de 12px do .sidenav serve para afastar a busca do header;
   na .sidenav interna ele só abriria um vão entre o rótulo "Menu" e o
   primeiro item. */
#sidebar.sidebar-adm > .sidebar-inner > .sidenav {
  padding-top: 0;
}

/* --- Sidebar colapsada: volta ao comportamento do main.css --------
   Colapsada, o #sidebar vira width:100% transparente e só a faixa de
   60px é clicável — por isso .sidebar-widget-fixed precisa da mesma
   largura de .sidebar-inner, senão os itens do dashboard esticam.
   Nada pode clipar aqui: os submenus viram flyouts posicionados fora
   dos 60px. E como busca e #modulo-select são .sidebar-widget (ambos
   display:none), não sobra nada para fixar — o #sidebar volta a ser o
   container de rolagem.
   ------------------------------------------------------------------ */
#sidebar.sidebar-adm.collapse-sidebar {
  display: block;
  overflow-y: scroll !important;
}

#sidebar.sidebar-adm.collapse-sidebar > .sidebar-widget-fixed {
  width: 60px;
  pointer-events: all;
}

#sidebar.sidebar-adm.collapse-sidebar > .sidebar-widget-fixed,
#sidebar.sidebar-adm.collapse-sidebar > .sidebar-inner {
  overflow: visible;
}

/* Um submenu que ficou expandido carrega display:block inline (slideDown
   e setCurrentClass). Colapsada, ele continuaria empilhado dentro da faixa
   de 60px, com os itens sem texto — só o flyout do item sob o cursor deve
   aparecer. Restrito ao 2o nível para não afetar os .sub.three, que abrem
   pelo hover-li do próprio li aninhado. */
#sidebar.collapse-sidebar .mainnav > ul > li:not(.hover-li) > ul.sub {
  display: none !important;
}

/* --- Flyout colapsado: alinhar .select-interno com os itens simples ---
   Colapsada, span.txt é absolute em `left: 45px; top: 0`. O main.css
   devolve `position: static` só para `span:not(a.select-interno span)`,
   então o texto do select-interno ficava ancorado no li em vez de fluir
   depois do ícone — desalinhado nos dois eixos.
   Com o texto de volta ao fluxo, as duas linhas batem em 45px:
     bullet  →  15 + 11 + 7 + 12 = 45   (centro do ponto em 29,5)
     ícone   →  20 + 20 + 5      = 45   (centro do glifo em 30)
   -------------------------------------------------------------------- */
#sidebar.collapse-sidebar .mainnav li a span.txt {
  position: unset;
}

#sidebar.collapse-sidebar .sidenav .mainnav li.hover-li > ul.sub li > a.select-interno {
  padding: 0 0 0 20px !important;
}

#sidebar.collapse-sidebar .sidenav .mainnav li.hover-li > ul.sub li > a > i.item-drop {
  margin: 0 12px 0 11px !important;
}

#sidebar.collapse-sidebar .sidenav .mainnav li.hover-li > ul.sub li > a > span.txt {
  padding-left: 0 !important;
}

/* O caret é absolute com `top: 10px` fixo, que só acerta o centro em
   linhas de uma altura específica. */
#sidebar.collapse-sidebar .sidenav .mainnav li.hover-li > ul.sub li > a > i.hasDrop {
  top: 50% !important;
  right: 8px !important;
  margin: 0 !important;
  transform: translateY(-50%) rotate(-90deg);
}

#sidebar.collapse-sidebar .sidenav .mainnav li.hover-li > ul.sub li > a.expand > i.hasDrop {
  transform: translateY(-50%) rotate(0deg);
}


/* --- Ícones dos itens do menu: FA6 + legado padronizados ---- */
#sidebar .sidenav .mainnav ul li > a > i:not(.item-drop):not(.hasDrop):not(.select-interno-icon) {
  font-size: 14px !important;
  width: 24px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}
/* Sub-item select-interno icons */
#sidebar .sidenav .mainnav ul li a i.select-interno-icon {
  font-size: 13px !important;
  width: 20px;
  text-align: center;
  display: inline-block;
}

/* --- Alinhamento select-interno com item-drop --------------- */
#sidebar .sidenav .mainnav ul li .sub li a.select-interno {
  padding-left: 16px !important;
}
#sidebar .sidenav .mainnav ul li .sub li a.select-interno .select-interno-icon {
  margin: 0 5px 0 0 !important;
  position: static !important;
}

/* --- Item ativo — tint escuro ileva ------------------------ */
#sidebar .sidenav .mainnav ul li a.active:not(#sidebar .sidenav .mainnav ul.sub li a.active) {
  background: #f3eaf6 !important;
  color: #4A1259 !important;
}
#sidebar .sidenav .mainnav ul li a.active:not(#sidebar .sidenav .mainnav ul.sub li a.active) i {
  color: #4A1259 !important;
}

/* --- Expand (dropdown aberto) — tint escuro leve ----------- */
#sidebar .sidenav .mainnav ul li a.expand {
  background: #f3eaf6;
  color: #4A1259;
}
#sidebar .sidenav .mainnav ul li a.expand i {
  color: #4A1259;
}
#sidebar .sidenav .mainnav ul li a.expand .hasDrop {
  color: #4A1259;
}

/* --- Hover: flat, sem filtros IE --------------------------- */
#sidebar .sidenav .mainnav ul li a:hover {
  background: #f3f4f6;
  filter: none !important;
  color: #111827;
}
#sidebar .sidenav .mainnav ul li a:hover i {
  color: #374151;
}

/* --- Sub-menu: fundo levemente destacado ------------------- */
#sidebar .sidenav .mainnav ul li .sub {
  background: transparent;
  filter: none !important;
}

/* --- Sub-item bullet — inativo ----------------------------- */
#sidebar .sidenav .mainnav ul li .sub li a i.item-drop {
  background: #fff;
  border: 1.5px solid #4A1259;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin: 0 12px 0 22px;
  display: inline-block;
}

/* --- Sub-item bullet — ativo ------------------------------- */
#sidebar .sidenav .mainnav ul li .sub li a.active i.item-drop {
  background: #4A1259;
  border-color: #4A1259;
  box-shadow: 0 0 0 3px rgba(74, 18, 89, 0.25);
}

/* --- Sub-item texto ativo ---------------------------------- */
#sidebar .sidenav .mainnav ul li .sub li a.active {
  color: #4A1259 !important;
  font-weight: 600;
}

/* --- Sub-item hover ---------------------------------------- */
#sidebar .sidenav .mainnav ul li .sub li a:hover {
  background: #f3f4f6;
  filter: none !important;
  border-top: none !important;
  border-bottom: none !important;
}
#sidebar .sidenav .mainnav ul li .sub li a:hover i.item-drop {
  border-color: #4A1259;
}

/* --- Sub-item multi-linha: sobrescreve height fixo --------- */
#sidebar .mainnav ul.sub .multi-line a {
  height: auto !important;
  min-height: 35px;
  padding-top: 6px;
  padding-bottom: 6px;
}
#sidebar .mainnav ul.sub .multi-line a i.item-drop {
  align-self: flex-start;
  margin-top: 2px !important;
}

/* --- Sub-item: permite quebra de linha em labels longos ---- */
/* Aplica a TODOS os sub-itens (não só .multi-line) para evitar
   deformação quando o estado .active deixa o texto em negrito e
   transborda a largura fixa da sidebar (ex.: "Tipos de Ordem e
   Regulagem"). Mantém min-height: 35px para itens curtos e deixa
   altura crescer para itens longos. */
#sidebar .sidenav .mainnav ul li .sub li a {
  height: auto !important;
  min-height: 35px;
}
#sidebar .sidenav .mainnav ul li .sub li a .txt {
  white-space: normal;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
#sidebar .sidenav .mainnav ul li .sub li a i.item-drop {
  flex-shrink: 0;
  align-self: center;
}

/* ==========================================================
   BADGES / NOTIFICAÇÕES — sidebar modernizado
   ========================================================== */

/* Badge base: pill moderno */
#sidebar .sidenav .mainnav ul li a .notification {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  line-height: 18px;
  min-width: 22px;
  text-align: center;
  box-shadow: none;
  top: 13px;
  right: 28px;
}
#sidebar .sidenav .mainnav ul li > ul > li > a .notification {
  top: 8px;
  right: 20px;
}

/* Azul → roxo brand */
.notification.blue {
  background: #4A1259 !important;
  color: #fff !important;
  border-radius: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  box-shadow: none;
}

/* Amarelo → âmbar moderno */
.notification.yellow {
  background: #F59E0B !important;
  color: #fff !important;
  border-radius: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  box-shadow: none;
}

.sidenav .mainnav {
  height: auto !important;
}

.sidebar-widget .title {
  padding-top: 0;
  color: #333333 !important;
}

/* --- Divisor com rótulo do menu ---------------------------- */
.sidebar-nav-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px 14px 3px;
}
.sidebar-nav-label span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(74, 18, 89, 0.45);
  white-space: nowrap;
  flex-shrink: 0;
}
.sidebar-nav-label::before {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, rgba(74, 18, 89, 0.2), transparent);
}
.sidebar-nav-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(74, 18, 89, 0.2), transparent);
}
/* Colapsada só sobram os ícones: o rótulo não é um .sidebar-widget,
   então não cai na regra de main.css que esconde os widgets. */
#sidebar.collapse-sidebar .sidebar-nav-label {
  display: none;
}

/* --- Search: espaçamento do topo e focus roxo -------------- */
#sidebar .sidenav {
  padding-top: 12px;
}
.sidebar-search-input:focus {
  border-color: #4A1259 !important;
  box-shadow: 0 0 0 3px rgba(74, 18, 89, 0.15) !important;
  background-color: #fff !important;
  outline: none;
}

/* --- Sidebar colapsado: item ativo e hover ----------------- */
#sidebar.collapse-sidebar .sidenav .mainnav ul li a.active:not(#sidebar.collapse-sidebar .sidenav .mainnav ul.sub li a.active) {
  background: #4A1259 !important;
  color: #fff !important;
}
#sidebar.collapse-sidebar .sidenav .mainnav ul li a.active i:not(#sidebar.collapse-sidebar .sidenav .mainnav ul.sub li a.active) {
  color: #fff !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li a {
  background: #4A1259 !important;
  filter: none !important;
  color: #fff !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li a.active {
  background: #3a0e47 !important;
  filter: none !important;
  color: #fff !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li a {
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li a span.txt {
  padding-left: 8px !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li a i {
  float: none !important;
  display: inline-flex !important;
  margin-top: 0 !important;
  margin-left: 8px !important;
  flex-shrink: 0;
}
#sidebar.collapse-sidebar .mainnav li.hover-li a > i {
  color: #e2d4e8 !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li a.active > i {
  color: #fff !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li > ul.sub li,
#sidebar.collapse-sidebar .mainnav li.hover-li > ul.sub li a {
  background: #3a0e47 !important;
  color: #fff !important;
}
#sidebar.collapse-sidebar .mainnav li.hover-li > ul.sub li a:hover {
  background: #4A1259 !important;
  color: #fff !important;
}

/* --- Select de módulo no sidebar --------------------------- */
.sidebar-modulo-select {
  /* 10px = mesmo recuo lateral de .sidebar-search-container, para o select
     nascer e terminar no mesmo x que #sidebar-menu-search */
  padding: 0px 10px;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.sidebar-modulo-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: #4A1259;
  color: #fff;
  font-size: 12.9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
/* .sidebar-modulo-input:hover {
  background: #5c1a6e;
  box-shadow: 0 2px 8px rgba(74, 18, 89, 0.25);
}
.sidebar-modulo-input:focus {
  background: #5c1a6e;
  box-shadow: 0 0 0 3px rgba(74, 18, 89, 0.2);
}
*/

.sidebar-modulo-input option {
  background: #fff;
  color: #4A1259;
  font-weight: 500;
}

/* -------------------------------------------------------------
   chart-loading-state / chart-no-data — estados de gráficos
   ------------------------------------------------------------- */
.chart-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin: 8px 0;
}
.chart-loading-state::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: dashShimmer 1.6s ease-in-out infinite;
}
@keyframes dashShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.chart-loading-spinner {
    position: relative;
    z-index: 1;
    font-size: 30px;
    color: #1B8FEF;
}
.chart-loading-spinner--violet { color: #622773; }
.chart-loading-text {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.chart-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    gap: 10px;
    color: #94a3b8;
    padding: 16px;
}
.chart-no-data > i {
    font-size: 32px;
    color: #cbd5e1;
}
.chart-no-data > p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* loading overlay — sobreposição translúcida para recarregamento sem perder layout */
.chart-loading-overlay-container { position: relative; }
.chart-loading-overlay {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center;
}

/* modal de palavras-chave / variáveis dinâmicas — pattern: modal-palavras-chave.md */
.var-modal .modal-dialog { width: 720px; max-width: 95%; }
.var-modal .modal-header {
    background: linear-gradient(135deg, #350C40 0%, #622773 100%);
    color: #fff;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}
.var-modal .modal-content .modal-header .close { color: #fff; opacity: 0.9; text-shadow: none; }
.var-modal .modal-title { color: #fff; font-weight: 600; }
.var-modal .modal-title i { color: #fff; }
.var-search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.var-search-wrap i {
    position: absolute;
    top: 50%; left: 14px;
    transform: translateY(-50%);
    color: #9ca3af;
}
.var-search-input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all .2s;
}
.var-search-input:focus {
    outline: none;
    border-color: #622773;
    box-shadow: 0 0 0 3px rgba(98, 39, 115, 0.15);
}
.var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
}
.var-chip {
    display: inline-flex;
    flex-direction: column;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    overflow: hidden;
}
.var-chip:hover {
    background: #622773;
    border-color: #622773;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(98, 39, 115, 0.25);
}
.var-chip-name {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #622773;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
    word-break: break-all;
    min-width: 0;
}
.var-chip:hover .var-chip-name { color: #fff; }
.var-chip-desc {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    overflow-wrap: anywhere;
    min-width: 0;
}
.var-chip:hover .var-chip-desc { color: rgba(255,255,255,0.9); }
.var-empty {
    text-align: center;
    color: #9ca3af;
    padding: 30px;
    font-size: 13px;
}
@media (max-width: 768px) {
    .var-chip { flex: 1 1 100%; max-width: 100%; }
}

/* =============================================================
   PADRÕES CENTRALIZADOS — extraídos de views (.phtml)
   Manter este bloco em ordem; ver .claude/patterns/layout/
   ============================================================= */

/* -------------------------------------------------------------
   Highcharts — labels de eixo em preto/negrito (legibilidade)
   ------------------------------------------------------------- */
.highcharts-axis text,
.highcharts-no-tooltip text,
.highcharts-axis-labels text,
.highcharts-drilldown-axis-label text,
.highcharts-drilldown-data-label text {
    font-weight: bold !important;
    font-size: 1em !important;
    text-decoration: none !important;
    color: black !important;
    fill: black !important;
}

/* -------------------------------------------------------------
   row-graficos-side — empilha gráficos lado-a-lado em ≤ 1024px
   uso: <div class="row row-graficos-side">
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .row-graficos-side > .col-lg-6,
    .row-graficos-side > .col-md-6 {
        width: 100% !important;
        float: none;
    }
}

/* -------------------------------------------------------------
   DataTables — ajustes do filtro/info (telas de listagem)
   ------------------------------------------------------------- */
.dataTables_filter select { max-width: 150px; }
.dataTables_filter #categoria { width: 150px; }
.dataTables_filter .icomoon-icon-remove-3 { margin-right: 0; }
.dataTables_info {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
}
.dataTables_filter {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}
#selecionados {
    margin-left: -15px;
    font-weight: normal !important;
    color: #f48024;
}

/* -------------------------------------------------------------
   ileva-table — header padronizado de tabelas
   uso: <table class="ileva-table">
   ------------------------------------------------------------- */
.ileva-table thead th {
    background: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    border-top: none;
    border-bottom: 2px solid #e2e8f0;
    padding: 12px 14px;
}
.ileva-table tbody td {
    padding: 12px 14px;
    vertical-align: middle;
    font-size: 13px;
    border-top: 1px solid #f1f5f9;
}
.ileva-table tbody tr:hover { background: #f8fbff; }

/* -------------------------------------------------------------
   badge-status — pílulas de status (substitui pr-badge, tpl-status,
   integ-badge, risk-badge, pay-chip)
   uso: <span class="badge-status badge-status--success">Ativo</span>
   ------------------------------------------------------------- */
.badge-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-status--success  { background: #d1fae5; color: #065f46; }
.badge-status--danger   { background: #fee2e2; color: #991b1b; }
.badge-status--warning  { background: #fef3c7; color: #92400e; }
.badge-status--info     { background: #dbeafe; color: #1e40af; }
.badge-status--violet   { background: #ede9fe; color: #5b21b6; }
.badge-status--muted    { background: #f3f4f6; color: #6b7280; }
.badge-status--module   { background: #e0f2fe; color: #0369a1; font-size: 10px; }
.badge-status--orange   { background: #ffedd5; color: #9a3412; }
.badge-status--rose     { background: #ffe4e6; color: #9f1239; }

/* -------------------------------------------------------------
   form-spaced / two-input — formulários com mais respiro
   uso: <form class="form-horizontal form-spaced">
   adicionar form-spaced--label-tall quando o label precisar de 50px
   (usado em telas de edição de comunicados/situações)
   ------------------------------------------------------------- */
.form-spaced .form-group { padding-bottom: 15px !important; }
.form-spaced .control-label { height: 35px !important; }
.form-spaced.form-spaced--label-tall .control-label { height: 50px !important; }
.two-input { display: inline-flex; width: 100%; }

/* -------------------------------------------------------------
   panel-controls-right — reset top quando dentro de panelfloat
   ------------------------------------------------------------- */
.panelfloat .panel-heading .panel-controls-right { top: unset !important; }

/* -------------------------------------------------------------
   tpl-* — telas de templates de disparo (abas + pills + cards)
   uso: adm/apptemplates, associados/templates,
        associados/notificacao-associado
   ------------------------------------------------------------- */

/* ===== Tabs ===== */
.tpl-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.tpl-tab {
    padding: 12px 22px;
    cursor: pointer;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border-top: none; border-left: none; border-right: none;
}
.tpl-tab:hover { color: #622773; }
.tpl-tab.active {
    color: #622773;
    border-bottom-color: #622773;
}
.tpl-tab .tpl-tab-count {
    background: #e5e7eb;
    color: #374151;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.tpl-tab.active .tpl-tab-count {
    background: #622773;
    color: #fff;
}

/* ===== Pills (subgrupos) ===== */
.tpl-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.tpl-pill {
    padding: 8px 16px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: all .2s;
}
.tpl-pill:hover { background: #e5e7eb; }
.tpl-pill.active {
    background: #622773;
    color: #fff;
    box-shadow: 0 2px 6px rgba(98, 39, 115, 0.3);
}
.tpl-pill.active i { color: #fff; }
.tpl-pill .tpl-pill-count {
    background: rgba(255,255,255,0.25);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
}
.tpl-pill:not(.active) .tpl-pill-count {
    background: #fff;
    color: #6b7280;
}

/* ===== Status pill ===== */
.tpl-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    border: none;
    transition: all .2s;
}
.tpl-status::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tpl-status.is-ativo {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.tpl-status.is-ativo::before { background: #10B981; }
.tpl-status.is-inativo {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
}
.tpl-status.is-inativo::before { background: #F43F5E; }
.tpl-status:hover { filter: brightness(0.95); }

/* ===== Card de template ===== */
.tpl-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: all .2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.tpl-card:hover {
    border-color: #622773;
    box-shadow: 0 4px 12px rgba(98, 39, 115, 0.08);
    transform: translateY(-1px);
}
.tpl-card-main { flex: 1; min-width: 0; }
.tpl-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}
.tpl-card-title a { color: inherit; text-decoration: none; }
.tpl-card-title a:hover { color: #622773; }
.tpl-card-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tpl-card-meta i { margin-right: 4px; opacity: 0.7; }
.tpl-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tpl-card-actions .btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.tpl-card-actions .btn-icon:hover {
    background: #622773;
    color: #fff;
    border-color: #622773;
}
.tpl-card-actions .btn-icon:hover i { color: #fff; }
.tpl-card-actions .btn-icon.btn-danger-soft:hover {
    background: #F43F5E;
    border-color: #F43F5E;
}
.tpl-card-actions .btn-icon.btn-danger-soft:hover i { color: #fff; }

/* ===== Badges de canal de disparo ===== */
.tpl-chans {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.tpl-chan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    border: 1px solid transparent;
}
.tpl-chan i { font-size: 11px; }
.tpl-chan--whatsapp {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}
.tpl-chan--push {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
    border-color: rgba(139, 92, 246, 0.25);
}
.tpl-chan--email {
    background: rgba(27, 143, 239, 0.12);
    color: #1366b0;
    border-color: rgba(27, 143, 239, 0.25);
}

/* ===== Legenda dos canais ===== */
.tpl-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #faf8fc;
    border: 1px solid #ece6f2;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #4b5563;
}
.tpl-legend-title { font-weight: 700; color: #374151; }
.tpl-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tpl-legend-item i { font-size: 12px; }
.tpl-legend-item.is-whatsapp i { color: #10B981; }
.tpl-legend-item.is-push i { color: #8B5CF6; }
.tpl-legend-item.is-email i { color: #1B8FEF; }

/* ===== Estado vazio ===== */
.tpl-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}
.tpl-empty i {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* ===== Toolbar ===== */
.tpl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.tpl-toolbar .btn-add {
    background: #622773;
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
    text-decoration: none;
}
.tpl-toolbar .btn-add i { color: #fff; }
.tpl-toolbar .btn-add:hover {
    background: #4A1259;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(98, 39, 115, 0.3);
    color: #fff;
    text-decoration: none;
}
.tpl-toolbar .btn-add:hover i { color: #fff; }

/* ===== Busca global ===== */
.tpl-search-bar { margin: 0 0 18px; }
.tpl-search-wrapper { position: relative; max-width: 480px; }
.tpl-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none; z-index: 1;
}
.tpl-search-input {
    padding-left: 40px !important; padding-right: 40px !important;
    border-radius: 8px !important; border: 1px solid #e5e7eb !important;
    height: 42px; font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.tpl-search-input:focus {
    border-color: #622773 !important;
    box-shadow: 0 0 0 3px rgba(98,39,115,.12) !important;
}
.tpl-search-clear {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; cursor: pointer; transition: color .2s;
}
.tpl-search-clear:hover { color: #622773; }
.tpl-search-info { font-size: 12px; color: #6b7280; margin-top: 6px; padding-left: 4px; }
.tpl-search-empty { text-align: center; padding: 40px 20px; color: #9ca3af; }
.tpl-search-empty i { font-size: 36px; display: block; margin-bottom: 8px; opacity: .5; }
.tpl-card-origem {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f3e8f7; color: #622773;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 3px 9px; border-radius: 10px; margin-bottom: 6px;
}
.tpl-card-origem i { font-size: 11px; }
mark.tpl-highlight {
    background: #fde68a; color: #92400e;
    padding: 0 2px; border-radius: 2px;
}

/* ===== Responsividade ===== */
@media (max-width: 1024px) {
    .tpl-card { flex-direction: column; align-items: stretch; }
    .tpl-card-actions { justify-content: flex-end; }
}
@media (max-width: 768px) {
    .tpl-tab { padding: 10px 14px; font-size: 13px; }
    .tpl-tab .tpl-tab-count { display: none; }
}

/* fa-whatsapp — o FontAwesome 6 free traz o ícone apenas na família brands;
   as views usam o prefixo "fa", então o glifo é desenhado via SVG inline. */
i.fa-whatsapp::before { content: '' !important; }
i.fa-whatsapp {
    display: inline-block;
    width: calc(1em + 7px);
    height: calc(1em + 7px);
    vertical-align: -0.125em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='rgb(53,53,53)' d='M476.9 161.1C435 119.1 379.2 96 319.9 96C197.5 96 97.9 195.6 97.9 318C97.9 357.1 108.1 395.3 127.5 429L96 544L213.7 513.1C246.1 530.8 282.6 540.1 319.8 540.1L319.9 540.1C442.2 540.1 544 440.5 544 318.1C544 258.8 518.8 203.1 476.9 161.1zM319.9 502.7C286.7 502.7 254.2 493.8 225.9 477L219.2 473L149.4 491.3L168 423.2L163.6 416.2C145.1 386.8 135.4 352.9 135.4 318C135.4 216.3 218.2 133.5 320 133.5C369.3 133.5 415.6 152.7 450.4 187.6C485.2 222.5 506.6 268.8 506.5 318.1C506.5 419.9 421.6 502.7 319.9 502.7zM421.1 364.5C415.6 361.7 388.3 348.3 383.2 346.5C378.1 344.6 374.4 343.7 370.7 349.3C367 354.9 356.4 367.3 353.1 371.1C349.9 374.8 346.6 375.3 341.1 372.5C308.5 356.2 287.1 343.4 265.6 306.5C259.9 296.7 271.3 297.4 281.9 276.2C283.7 272.5 282.8 269.3 281.4 266.5C280 263.7 268.9 236.4 264.3 225.3C259.8 214.5 255.2 216 251.8 215.8C248.6 215.6 244.9 215.6 241.2 215.6C237.5 215.6 231.5 217 226.4 222.5C221.3 228.1 207 241.5 207 268.8C207 296.1 226.9 322.5 229.6 326.2C232.4 329.9 268.7 385.9 324.4 410C359.6 425.2 373.4 426.5 391 423.9C401.7 422.3 423.8 410.5 428.4 397.5C433 384.5 433 373.4 431.6 371.1C430.3 368.6 426.6 367.2 421.1 364.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -------------------------------------------------------------
   risco-formula — modal de cálculo do Score de Risco
   Usado por adm/consultantperformance e associados/associado.
   Promovido do <style> local da view de desempenho para cá quando
   a segunda tela passou a exibir o mesmo modal.
   ------------------------------------------------------------- */
#riskDetailModal .modal-body { max-height: 80vh; overflow-y: auto; }
#riskDetailModal .ileva-table tfoot td { border-top: 2px solid #E2E8F0; padding: 12px 14px; font-size: 13px; }

/* Largura do diálogo: a tabela tem 7 colunas e no .modal-lg padrão (900px) a coluna "Conta"
   quebra a fórmula em três linhas. Ancorado no id do modal, e não no do diálogo, para valer em
   todas as telas que o exibem. Sem media query, mesmo critério do #detalhe-risco-consultor na
   Análise Geral de Desempenho — as quatro telas ficam com a mesma largura em qualquer viewport. */
#riskDetailModal .modal-dialog { width: 65%; }

/* Sem borda lateral colorida no modal: a cor da faixa fica só nos números. */
#riskDetailModal .cop-card { border-left: 1px solid #e8e8e8; }

/* Identificação no topo do modal: foto (só consultor) e nome, centralizados. */
.risco-identidade { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.risco-identidade-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 10px;
    border-radius: 50%;
    overflow: hidden;
    background: #F1F5F9;
    color: #94A3B8;
    font-size: 36px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #622773, 0 4px 12px rgba(15, 23, 42, 0.15);
}
.risco-identidade-foto img { width: 100%; height: 100%; object-fit: cover; }
.risco-identidade-foto.is-ampliavel { position: relative; cursor: zoom-in; }
.risco-identidade-foto-lupa {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    color: #fff;
    font-size: 24px;
    opacity: 0;
    transition: opacity .15s;
}
.risco-identidade-foto.is-ampliavel:hover .risco-identidade-foto-lupa { opacity: 1; }
/* icons.css pinta todo [class*=" fa"] de #353535; aqui o ícone herda a cor do contêiner. */
.risco-identidade-foto i,
.risco-regua-extremo i { color: inherit; }
.risco-identidade-nome { font-size: 18px; font-weight: 700; line-height: 1.3; color: #1E293B; text-align: center; }

/* Alerta de risco nas listagens de eventos e envolvidos (ícone na linha e contagem no cabeçalho). */
.risco-linha-alerta { margin-left: 6px; font-size: 14px; color: #F43F5E; cursor: pointer; }
.risco-linha-cabecalho { margin-left: 4px; color: #F43F5E; font-weight: 700; white-space: nowrap; }
.risco-linha-cabecalho i { color: #F43F5E; font-size: 15px; }
.risco-linha-lista { margin: 4px 0 0; padding-left: 18px; }
.risco-linha-atencao { color: #dc4917; }

/* Faixa de análise de risco da página, acima dos filtros das listagens de eventos e envolvidos. */
.risco-pagina {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background: #F8FAFC;
    color: #334155;
}
.risco-pagina-icone { width: 18px; font-size: 18px; line-height: 1; text-align: center; }
/* icons.css pinta todo [class*=" fa"] de #353535; aqui o ícone herda a cor do contêiner. */
.risco-pagina-icone i,
.risco-evento-link i { color: inherit; }
.risco-pagina-texto { flex: 1; min-width: 0; font-size: 13px; }
.risco-pagina-escopo { display: block; margin-top: 2px; font-size: 12px; color: #64748B; }
.risco-pagina-acao { flex-shrink: 0; background: #fff; border: 1px solid currentColor; font-weight: 600; }
.risco-pagina-acao:hover,
.risco-pagina-acao:focus { background: rgba(255, 255, 255, 0.6); color: inherit; }
.risco-pagina--carregando .risco-pagina-icone { color: #1B8FEF; }
.risco-pagina--alerta { border-color: #FECDD3; background: #FFF1F2; }
.risco-pagina--alerta .risco-pagina-icone,
.risco-pagina--alerta .risco-pagina-acao { color: #E11D48; }
.risco-pagina--sem-alerta .risco-pagina-icone { color: #10B981; }
.risco-pagina--erro { border-color: #FDE68A; background: #FFFBEB; }
.risco-pagina--erro .risco-pagina-icone,
.risco-pagina--erro .risco-pagina-acao { color: #B45309; }
@media (max-width: 767px) {
    .risco-pagina { flex-wrap: wrap; }
    .risco-pagina-acao { margin-left: 30px; }
}

/* Modal da análise de risco da página: um bloco por linha com alerta. */
.risco-pagina-resumo { margin-bottom: 14px; }
.risco-evento { margin-bottom: 10px; padding: 12px 14px; border: 1px solid #E2E8F0; border-radius: 6px; }
.risco-evento-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.risco-evento-titulo { margin-right: 4px; font-size: 14px; color: #1E293B; }
.risco-evento-link { margin-left: auto; font-size: 12px; font-weight: 600; }
.risco-evento-link i { font-size: 11px; }
/* Faixa da edição do evento/envolvido: mantém a caixa do alert, mas só o título fica em vermelho. */
.alert.risco-alerta { color: inherit; }
.alert.risco-alerta .alert-icon { color: #dc4917; }

.risco-formula {
    background: #F8FAFC;
    border-left: 3px solid #1B8FEF;
    border-radius: 4px;
    padding: 12px 15px;
    margin-bottom: 12px;
}
.risco-formula--exemplo { border-left-color: #8B5CF6; }
.risco-formula-titulo { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; }
.risco-formula-titulo small { font-weight: 400; color: #64748B; }
.risco-formula-exp {
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    color: #0F172A;
    line-height: 1.9;
    word-break: break-word;
}
.risco-formula-nota { font-size: 12px; color: #475569; line-height: 1.6; margin-top: 8px; }
.risco-nota-conta { font-size: 10px; white-space: nowrap; }

/* risco-regua — posição do score nas faixas de risco, no mesmo modal.
   Larguras, cores e posição vêm do payload (reguaDeRisco); aqui só a forma. */
.risco-regua { margin-top: 20px; }
.risco-regua h6 { margin: 0 0 4px; }
/* A régua não empilha: em tela estreita rola na horizontal. */
.risco-regua-scroll { overflow-x: auto; }
.risco-regua-corpo { display: flex; align-items: flex-start; gap: 10px; min-width: 420px; padding: 0 4px 4px; }
.risco-regua-extremo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 27px;
    font-size: 16px;
    line-height: 16px;
}
.risco-regua-extremo small { font-size: 11px; font-weight: 700; margin-top: 6px; }
.risco-regua-extremo--inicio { color: #10B981; }
.risco-regua-extremo--fim { color: #F43F5E; }
.risco-regua-trilho { position: relative; flex: 1; padding-top: 32px; }
.risco-regua-linha { display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.risco-regua-trecho + .risco-regua-trecho { border-left: 2px solid #fff; }
/* Cor da faixa entra por `color`; pílula, seta e ponto herdam via currentColor. */
.risco-regua-marcador {
    position: absolute;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}
.risco-regua-marcador--inicio { align-items: flex-start; transform: translateX(-6px); }
.risco-regua-marcador--fim { align-items: flex-end; transform: translateX(calc(-100% + 6px)); }
.risco-regua-pilula {
    position: relative;
    background: currentColor;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}
.risco-regua-pilula > span { color: #fff; }
.risco-regua-pilula::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: currentColor;
}
.risco-regua-marcador--inicio .risco-regua-pilula::after { left: 1px; margin-left: 0; }
.risco-regua-marcador--fim .risco-regua-pilula::after { left: auto; right: 1px; margin-left: 0; }
.risco-regua-ponto {
    width: 12px;
    height: 12px;
    margin-top: 9px;
    border-radius: 50%;
    background: currentColor;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px currentColor;
}
.risco-regua-faixas { display: flex; margin-top: 8px; }
.risco-regua-faixa {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    line-height: 1.4;
    color: #94A3B8;
}
.risco-regua-faixa strong { font-weight: 600; }
.risco-regua-faixa.is-ativa strong { font-weight: 700; }